/* ============================================================
   zombidle-visualizers.css
   Scoped to .zbl-* classes — drop in next to your existing CSS.
   ============================================================ */

/* ── Cue Feed panel ─────────────────────────────────────────
   Wrap both canvases in this if you want the full ACTIVE CUE
   FEED panel from the design (optional — use the canvases
   standalone if you prefer).
   ─────────────────────────────────────────────────────────── */
.zbl-cue-feed {
  display:          flex;
  flex-direction:   column;
  background:       #080C08;
  border:           1px solid rgba(92, 189, 60, 0.20);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(0, 0, 0, 0.5);
  position:         relative;
  overflow:         hidden;
}

/* subtle horizontal grid lines in the background */
.zbl-cue-feed::before {
  content:      '';
  position:     absolute;
  inset:        0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(92, 189, 60, 0.025) 0px,
      rgba(92, 189, 60, 0.025) 1px,
      transparent 1px,
      transparent 30px
    );
  pointer-events: none;
  z-index:      0;
}

/* ── Panel header bar ─────────────────────────────────────── */
.zbl-cue-feed__header {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          7px 12px;
  border-bottom:    1px solid rgba(92, 189, 60, 0.15);
  position:         relative;
  z-index:          1;
}

.zbl-cue-feed__title {
  font-family:      'Share Tech Mono', 'Courier New', monospace;
  font-size:        10px;
  font-weight:      normal;
  letter-spacing:   0.28em;
  text-transform:   uppercase;
  color:            rgba(232, 168, 26, 0.9);
  margin:           0;
}

/* ── LIVE FEED badge ─────────────────────────────────────── */
.zbl-live-badge {
  display:          flex;
  align-items:      center;
  gap:              5px;
  font-family:      'Share Tech Mono', 'Courier New', monospace;
  font-size:        9px;
  letter-spacing:   0.22em;
  text-transform:   uppercase;
  color:            rgba(92, 189, 60, 0.65);
}

.zbl-live-badge__dot {
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background:       #5CBD3C;
  box-shadow:       0 0 6px rgba(92, 189, 60, 0.8);
  animation:        zbl-blink 1.4s ease-in-out infinite;
  flex-shrink:      0;
}

@keyframes zbl-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── Visualizer body row (radar + waveform side by side) ─── */
.zbl-cue-feed__body {
  display:          flex;
  align-items:      stretch;
  gap:              0;
  flex:             1;
  position:         relative;
  z-index:          1;
}

/* ── Radar canvas wrapper ────────────────────────────────── */
.zbl-radar-wrap {
  flex-shrink:      0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          12px;
  border-right:     1px solid rgba(92, 189, 60, 0.12);
  background:       transparent;
}

.zbl-radar-canvas {
  display:          block;
  width:            140px;
  height:           140px;
  /* filter keeps the green glow from bleeding into neighbours */
  filter:           drop-shadow(0 0 8px rgba(92, 189, 60, 0.45));
}

/* ── Waveform canvas wrapper ─────────────────────────────── */
.zbl-waveform-wrap {
  flex:             1;
  min-width:        0;    /* prevents flex overflow */
  display:          flex;
  align-items:      stretch;
}

.zbl-waveform-canvas {
  display:          block;
  width:            100%;
  height:           164px;   /* match .zbl-radar-canvas + padding */
}

/* ── Standalone usage (no .zbl-cue-feed wrapper) ─────────── */
.zbl-radar-canvas--standalone {
  display:          block;
  background:       #080C08;
  filter:           drop-shadow(0 0 8px rgba(92, 189, 60, 0.4));
}

.zbl-waveform-canvas--standalone {
  display:          block;
  background:       #080C08;
  border:           1px solid rgba(92, 189, 60, 0.18);
}


/* ============================================================
   .cue-visualizer
   Replaces the old .signal-box static image.
   Sits in the same spot in the play-panel layout.
   ============================================================ */
.cue-visualizer {
  display:          flex;
  align-items:      stretch;
  position:         relative;
  overflow:         hidden;
  border:           1px solid rgba(91, 143, 66, 0.44);
  background:       #07100a;
  box-shadow:
    inset 0 0 72px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}

/* scanline + inner border overlay — matches the original signal-box feel */
.cue-visualizer::before {
  content:          '';
  position:         absolute;
  inset:            0;
  border:           1px solid rgba(141, 232, 121, 0.09);
  background:       repeating-linear-gradient(
                      180deg,
                      rgba(255, 255, 255, 0.028) 0 1px,
                      transparent 1px 4px
                    );
  opacity:          0.5;
  pointer-events:   none;
  z-index:          2;
}

/* Radar canvas — fixed width, draws itself via JS */
.cue-visualizer__radar {
  display:          block;
  width:            164px;
  height:           164px;
  flex-shrink:      0;
  box-sizing:       border-box;
  border-right:     1px solid rgba(92, 189, 60, 0.15);
  /* JS ResizeObserver handles the actual drawing-surface size */
}

/* Waveform canvas — fills remaining width */
.cue-visualizer__waveform {
  display:          block;
  flex:             1;
  min-width:        0;   /* prevent flex overflow */
  height:           164px;
}