/* ===== Merged transcription editor as a PWA view (#view-transcription-editor)
   task e8df75f5 step 1 (Merged Editor v2)

   Ported from the <style> block of client/transcription-editor.html (the
   standalone merged editor, Merged Editor v1). Same look; two structural
   changes so it lives inside the SPA shell:
     - EVERY rule is scoped under #view-transcription-editor. The standalone
       page owned the whole document and used generic class names (.btn,
       .block, .layout, .sidebar, .chat-panel …); inside index.html those
       would leak into every other view, and the PWA's own rules would leak in.
     - Fixed-position chrome became flex rows: the .layout grid used
       calc(100vh - topbar - strip) and the .bottombar was position:fixed
       (which would sit over the PWA's bottom nav). Both are now ordinary
       children of the flex-column view.
   Keyframes are global names, so they carry a txe- prefix (styles.css already
   defines @keyframes spin). ===== */

#view-transcription-editor { display: none; height: 100%; overflow: hidden; color: #e0e0e0; background: #0a0a0a; }
#view-transcription-editor.active { display: flex; flex-direction: column; }
#view-transcription-editor .hidden { display: none !important; }

/* ── Top bar ── */
#view-transcription-editor .topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: #111; border-bottom: 1px solid #222;
  height: 48px; flex-shrink: 0; gap: 10px;
}
#view-transcription-editor .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
#view-transcription-editor .topbar-left .logo { font-size: 12px; font-weight: 600; color: #555; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
#view-transcription-editor .topbar-left .episode-name { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-transcription-editor .topbar-left .episode-meta { font-size: 11px; color: #555; white-space: nowrap; }
#view-transcription-editor .topbar-center { display: flex; align-items: center; gap: 10px; }
#view-transcription-editor .topbar-right { display: flex; align-items: center; gap: 10px; }
/* S1 (task 577704d4 step 4): trimmed top bar. The hidden elements carry the
   hidden attribute; this scoped rule makes it win over .status-pill's
   inline-flex and .chat-toggle's display:flex (the UA [hidden] rule loses to
   both). Drop the attribute to bring any of them back — no JS changed. */
#view-transcription-editor .topbar [hidden] { display: none !important; }
/* S2: search in the top bar's right slot (was the sidebar top strip). */
#view-transcription-editor .topbar-search { width: 260px; max-width: 30vw; flex-shrink: 1; }
#view-transcription-editor .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#view-transcription-editor .episode-select { background: #141414; color: #ccc; border: 1px solid #333; border-radius: 6px; font-size: 11px; padding: 4px 8px; max-width: 260px; }
#view-transcription-editor .episode-select:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
#view-transcription-editor .chapters-status { font-size: 10px; color: #777; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-transcription-editor .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
#view-transcription-editor .summary-progress { margin-bottom: 12px; }
#view-transcription-editor .summary-progress-track { height: 4px; background: #1a1a1a; border-radius: 2px; overflow: hidden; }
#view-transcription-editor .summary-progress-fill { height: 100%; background: #a78bfa; width: 0%; transition: width 0.4s ease; }
#view-transcription-editor .summary-progress-readout { margin-top: 5px; font-size: 9px; color: #666; font-family: 'SF Mono', monospace; }

/* Status pills */
#view-transcription-editor .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
#view-transcription-editor .status-pill .dot { width: 5px; height: 5px; border-radius: 50%; }
#view-transcription-editor .status-worker { background: #1a1a2a; color: #818cf8; }
#view-transcription-editor .status-worker .dot { background: #818cf8; animation: txe-pulse 1.5s infinite; }
#view-transcription-editor .status-eval { background: #2a1a2a; color: #c084fc; }
#view-transcription-editor .status-eval .dot { background: #c084fc; }
#view-transcription-editor .status-human { background: #2a2a1a; color: #fbbf24; display: none; }
#view-transcription-editor .status-human.active { display: inline-flex; }
#view-transcription-editor .status-human .dot { background: #fbbf24; }
@keyframes txe-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Chat toggle */
#view-transcription-editor .chat-toggle {
  width: 32px; height: 32px; border-radius: 6px; background: #1a1a1a;
  border: 1px solid #333; color: #888; cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
}
#view-transcription-editor .chat-toggle:hover { color: #fff; border-color: #555; }
#view-transcription-editor .chat-toggle.active { background: #1a1a2a; border-color: #818cf8; color: #818cf8; }

/* ── Flag navigator ── S3 (task 577704d4 step 5): lives in the LLM-pass row
   now (right-aligned by the bar's flex:1), so the sticky / negative-margin
   overlay it needed under the player is gone. Hidden by default; shown by
   updateFlagNav() when there are human-review flags. */
#view-transcription-editor .flag-nav-wrap { display: flex; align-items: center; flex-shrink: 0; }
#view-transcription-editor .flag-nav {
  display: flex; align-items: center; gap: 4px;
  background: #1a1008; border: 1px solid #3a2410;
  border-radius: 8px; padding: 3px 6px;
}
#view-transcription-editor .flag-nav-btn {
  background: transparent; border: none; color: #888; cursor: pointer;
  width: 20px; height: 20px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
#view-transcription-editor .flag-nav-btn:hover:not(:disabled) { background: #2a1a0a; color: #fbbf24; }
#view-transcription-editor .flag-nav-btn:disabled { opacity: 0.25; cursor: default; }
#view-transcription-editor .flag-nav-btn svg { width: 13px; height: 13px; }
#view-transcription-editor .flag-nav-counter {
  display: flex; align-items: center; gap: 5px;
  padding: 0 6px; color: #fbbf24;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
}
#view-transcription-editor .flag-nav-counter svg { width: 11px; height: 11px; }

/* ── LLM pass strip (sits below topbar, spans full width, always visible) ──
   S3 + S8: also hosts the inline stats and the flag navigator, so it grew from
   a fixed 28px to min-height 36px; the bar keeps a floor so the extras never
   squeeze it to nothing. */
#view-transcription-editor .llm-pass-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 20px; background: #0c0c14; border-bottom: 1px solid #1a1a1a;
  min-height: 36px; flex-shrink: 0;
}
#view-transcription-editor .llm-pass-strip [hidden] { display: none !important; }
#view-transcription-editor .stats-inline { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#view-transcription-editor .stats-inline .stat { flex-direction: row; align-items: baseline; gap: 4px; }
#view-transcription-editor .stats-inline .stat-value { font-size: 11px; font-family: 'SF Mono', monospace; }
#view-transcription-editor .llm-pass-label { font-size: 9px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap; }
#view-transcription-editor .llm-pass-label .status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #444; margin-right: 5px; vertical-align: middle; }
#view-transcription-editor .llm-pass-label.running .status-dot { background: #818cf8; animation: txe-pulse 1.5s infinite; }
#view-transcription-editor .llm-pass-label.running { color: #818cf8; }
#view-transcription-editor .llm-pass-label.complete .status-dot { background: #22c55e; }
#view-transcription-editor .llm-pass-label.complete { color: #22c55e; }
/* S10: our request is out, the worker row has not appeared yet. */
#view-transcription-editor .llm-pass-label.requested .status-dot { background: #fbbf24; animation: txe-pulse 1.5s infinite; }
#view-transcription-editor .llm-pass-label.requested { color: #fbbf24; }
#view-transcription-editor .llm-pass-run { padding: 2px 9px; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
#view-transcription-editor .llm-pass-note { font-size: 10px; color: #fca5a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
#view-transcription-editor .llm-pass-note:empty { display: none; }
#view-transcription-editor .llm-pass-bar-bg { flex: 1; min-width: 120px; height: 4px; background: #161622; border-radius: 2px; overflow: hidden; position: relative; }
#view-transcription-editor .llm-pass-bar-fill { height: 100%; background: linear-gradient(90deg, #818cf8, #a78bfa); border-radius: 2px; transition: width 0.5s; }
#view-transcription-editor .llm-pass-numbers { font-size: 10px; color: #666; font-family: 'SF Mono', monospace; white-space: nowrap; }
#view-transcription-editor .llm-pass-numbers .pct { color: #a78bfa; font-weight: 700; }
#view-transcription-editor .llm-pass-numbers .corrections { color: #4ade80; }

#view-transcription-editor .btn { padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; }
#view-transcription-editor .btn-ghost { background: transparent; color: #888; border: 1px solid #333; }
#view-transcription-editor .btn-ghost:hover { color: #fff; border-color: #555; }
#view-transcription-editor .btn-success { background: #166534; color: #86efac; }
#view-transcription-editor .btn-success:hover { background: #15803d; }
#view-transcription-editor kbd { display: inline-block; padding: 0px 4px; font-size: 9px; font-family: 'SF Mono', monospace; background: #222; border: 1px solid #333; border-radius: 2px; color: #666; }

/* ── Layout ── flex child of the view column (was calc(100vh - 48px - 28px)) */
/* Two columns since step 3: the transcript, and the right panel (top strip +
   tabs). The 240px sidebar column is gone; the panel takes its width. */
#view-transcription-editor .layout { display: grid; grid-template-columns: 1fr 0px; flex: 1 1 auto; min-height: 0; transition: grid-template-columns 0.2s; }
#view-transcription-editor .layout.chat-open { grid-template-columns: 1fr 400px; }

/* ── Main column ── */
#view-transcription-editor .main-col { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── Multicam cam-strip (task 05dd96f7 step 2) ──
   Row of camera buttons above .video-preview. `hidden` when no proxies
   (0/1-video payloads keep it out of layout so nothing shifts). The active
   button fills in the progress teal; a pending src-swap flags
   data-switching for the "switching…" overlay; a mount-drop swaps the whole
   strip for the "Camera unavailable" state. */
/* ── Cam row (S4, task 577704d4 step 2) ── one always-visible row above the
   player: [multicam pills] · [#block · timecode] · [marker legend]. Three
   columns so the HUD stays centred whether or not the cam-strip is showing.
   The row carries the padding / border the strip used to; the strip itself
   is now just its buttons. */
#view-transcription-editor .cam-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  min-height: 36px; padding: 6px 12px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}
#view-transcription-editor .cam-strip {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  justify-self: start; min-width: 0;
}
#view-transcription-editor .cam-strip[hidden] { display: none; }
#view-transcription-editor .cam-btn {
  appearance: none; background: transparent; color: #cfcfcf; cursor: pointer;
  border: 1px solid #333; border-radius: 4px;
  padding: 6px 12px; font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background 0.12s, border-color 0.12s;
}
#view-transcription-editor .cam-btn:hover { background: #1a1a1a; border-color: #555; }
#view-transcription-editor .cam-btn:focus-visible { outline: 2px solid #4dabf7; outline-offset: 2px; }
#view-transcription-editor .cam-btn.active {
  background: #0f766e; color: #fff; border-color: #0f766e;
}
#view-transcription-editor .cam-strip[data-switching]::after {
  content: 'switching…'; color: rgba(255,255,255,0.7);
  font: 400 11px/1 -apple-system, sans-serif; margin-left: 6px;
}
#view-transcription-editor .cam-strip[data-camera-unavailable]::before {
  content: 'Camera unavailable'; color: rgba(255,255,255,0.55);
  font: 500 12px/1 -apple-system, sans-serif;
}

/* ── Video preview ── */
#view-transcription-editor .video-preview {
  position: relative; background: #0a0a0a; width: 100%;
  overflow: hidden; border-bottom: 1px solid #1a1a1a; flex-shrink: 0;
  display: flex; justify-content: center; align-items: center;
  padding: 8px 0;
}
#view-transcription-editor .video-placeholder {
  position: relative; background: #000;
  width: 854px; max-width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; overflow: hidden;
  transition: width 0.2s ease;
}
#view-transcription-editor .video-placeholder video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ── Player size (S7, task 577704d4 step 3) ── data-player on the view
   element: full = the 854px frame above; compact = a 420px frame (16:9 via
   aspect-ratio, so ~236px tall) and .editor-area takes the freed height by
   its existing flex:1. Only the placeholder narrows — .video-controls (the
   marker timeline) is a child of .video-preview and stays full-width. The
   caption scales down so it still fits the small frame. */
#view-transcription-editor[data-player="compact"] .video-placeholder { width: 420px; max-width: 420px; }
#view-transcription-editor[data-player="compact"] .yt-caption-text { font-size: 15px; }
#view-transcription-editor[data-player="compact"] .yt-caption-overlay { bottom: 18px; }
#view-transcription-editor .player-size-toggle {
  appearance: none; background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 4px;
  color: #999; cursor: pointer; width: 26px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s;
}
#view-transcription-editor .player-size-toggle:hover { color: #fff; border-color: #555; }
#view-transcription-editor .player-size-toggle:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
#view-transcription-editor .player-size-toggle svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
#view-transcription-editor[data-player="compact"] .player-size-toggle svg { transform: rotate(180deg); }
/* YouTube CC overlay — matches real YouTube closed caption rendering */
#view-transcription-editor .yt-caption-overlay {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  max-width: 80%; text-align: center; pointer-events: none;
}
#view-transcription-editor .yt-caption-speaker {
  font-size: 11px; color: rgba(255,255,255,0.6); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 500;
  font-family: 'Roboto', 'YouTube Noto', Arial, sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#view-transcription-editor .yt-caption-text {
  font-size: 21px; line-height: 1.35; color: #fff;
  font-family: 'Roboto', 'YouTube Noto', Arial, sans-serif;
  font-weight: 500;
  background: rgba(8,8,8,0.75); padding: 3px 8px; border-radius: 2px;
  display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
#view-transcription-editor .video-controls { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: #333; cursor: pointer; overflow: visible; }
#view-transcription-editor .video-controls:hover { height: 6px; }
#view-transcription-editor .video-progress { height: 100%; width: 0%; background: #ff0000; transition: width 0.1s linear; }
/* ── Timecode / block-number HUD (S4) ── middle column of .cam-row; was an
   absolute overlay in the player's top-right corner. Same ids, same writers
   (onTimeUpdate, setBlockNumDisplay, copyBlockNum); bigger type now that it
   is not competing with the picture. */
#view-transcription-editor .video-hud { display: flex; align-items: center; gap: 8px; justify-self: center; }
#view-transcription-editor .video-timecode { font-size: 14px; font-family: 'SF Mono', monospace; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.05); padding: 3px 9px; border-radius: 4px; user-select: text; }
#view-transcription-editor .video-block-num { font-size: 14px; font-family: 'SF Mono', monospace; color: rgba(251,191,36,0.9); background: rgba(255,255,255,0.05); padding: 3px 9px; border-radius: 4px; cursor: pointer; user-select: none; transition: background 0.12s, color 0.12s; }
#view-transcription-editor .video-block-num:hover:not(.empty) { background: rgba(251,191,36,0.2); }
#view-transcription-editor .video-block-num.copied { background: rgba(34,197,94,0.25); color: #86efac; }
#view-transcription-editor .video-block-num.empty { color: rgba(255,255,255,0.35); cursor: default; }

/* ── Marker legend (S4) ── right column of .cam-row, laid out as a row; was
   an absolute column stacked over the player. */
#view-transcription-editor .marker-stack {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  justify-self: end; flex-wrap: wrap;
}
#view-transcription-editor .marker-row-item { display: flex; align-items: center; gap: 6px; }
#view-transcription-editor .marker-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
  color: rgba(255,255,255,0.75); font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  user-select: none;
}
/* Legend WORD = visibility toggle (2026-09-03). Dimmed when that type is
   hidden; the SQUARE next to it still creates. */
#view-transcription-editor .marker-label.mk-toggle { pointer-events: auto; cursor: pointer; transition: opacity 0.12s; }
#view-transcription-editor .marker-label.mk-toggle:hover { color: #fff; }
#view-transcription-editor .marker-label.mk-toggle.off { opacity: 0.4; }
#view-transcription-editor .marker-label.mk-toggle:focus-visible { outline: 1px solid #a78bfa; outline-offset: 2px; border-radius: 2px; }
#view-transcription-editor .marker-btn {
  width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, box-shadow 0.1s; flex-shrink: 0;
}
#view-transcription-editor .marker-btn:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
#view-transcription-editor .marker-btn:active { transform: scale(0.95); }
#view-transcription-editor .marker-btn.mk-intro    { background: #ef4444; }
#view-transcription-editor .marker-btn.mk-reels    { background: #ffffff; }
#view-transcription-editor .marker-btn.mk-segments { background: #3b82f6; }
#view-transcription-editor .marker-btn.mk-cut      { background: #f97316; }
#view-transcription-editor .marker-btn.mk-chapters { background: #22c55e; }

/* ── Marker ticks + ranges on video progress bar ── */
#view-transcription-editor .marker-tick {
  position: absolute; top: -3px; width: 3px; height: 10px;
  border-radius: 1px; pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
#view-transcription-editor .marker-tick.mk-intro    { background: #ef4444; }
#view-transcription-editor .marker-tick.mk-reels    { background: #ffffff; }
#view-transcription-editor .marker-tick.mk-segments { background: #3b82f6; }
#view-transcription-editor .marker-tick.mk-cut      { background: #f97316; }
#view-transcription-editor .marker-tick.mk-chapters { background: #22c55e; }
#view-transcription-editor .marker-tick:hover { height: 14px; top: -5px; width: 4px; }

#view-transcription-editor .marker-range {
  position: absolute; top: -2px; height: 8px; border-radius: 2px;
  pointer-events: auto; cursor: pointer;
  border-left: 2px solid; border-right: 2px solid;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
/* Duration fill in the type's own colour (2026-09-03). Alpha 0.5: reads as a
   solid band at the strip's 8px height while a longer range underneath still
   shows through. Solid left/right borders keep the exact in/out edges. */
#view-transcription-editor .marker-range.mk-intro    { background: rgba(239,68,68,0.5);  border-color: #ef4444; }
#view-transcription-editor .marker-range.mk-reels    { background: rgba(255,255,255,0.5); border-color: #ffffff; }
#view-transcription-editor .marker-range.mk-segments { background: rgba(59,130,246,0.5); border-color: #3b82f6; }
#view-transcription-editor .marker-range.mk-cut      { background: rgba(249,115,22,0.5); border-color: #f97316; }
#view-transcription-editor .marker-range.mk-chapters { background: rgba(34,197,94,0.5);  border-color: #22c55e; }
/* Overlap stack: ranges are rendered longest-first, so a range with
   data-stack ≥ 1 is painted OVER a longer one. Lighten the upper layers so
   the band beneath stays legible; hover restores full opacity + lifts it. */
#view-transcription-editor .marker-range[data-stack="1"] { opacity: 0.8; }
#view-transcription-editor .marker-range[data-stack="2"] { opacity: 0.7; }
#view-transcription-editor .marker-range[data-stack="3"],
#view-transcription-editor .marker-range[data-stack="4"],
#view-transcription-editor .marker-range[data-stack="5"] { opacity: 0.6; }
#view-transcription-editor .marker-range:hover { height: 12px; top: -4px; opacity: 1; z-index: 1; }

/* ── Markers panel ── */
#view-transcription-editor .chat-tab.markers.active { color: #f97316; border-bottom-color: #f97316; background: #140a05; }
#view-transcription-editor .markers-view { flex: 1; overflow-y: auto; padding: 10px 12px; display: none; flex-direction: column; gap: 6px; }
#view-transcription-editor .markers-view.active { display: flex; }
#view-transcription-editor .markers-empty { color: #444; font-size: 12px; font-style: italic; text-align: center; padding-top: 40px; }
#view-transcription-editor .marker-row {
  display: grid;
  grid-template-columns: 12px auto auto 1fr auto;
  gap: 4px 8px;
  align-items: center;
  padding: 7px 9px; border-radius: 5px; background: #111; border: 1px solid #1a1a1a;
  font-size: 12px; cursor: pointer; transition: background 0.1s;
}
#view-transcription-editor .marker-row:hover { background: #161616; }
#view-transcription-editor .marker-row .dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; grid-column: 1; grid-row: 1; align-self: center; }
#view-transcription-editor .marker-row .dot.mk-intro    { background: #ef4444; }
#view-transcription-editor .marker-row .dot.mk-reels    { background: #ffffff; }
#view-transcription-editor .marker-row .dot.mk-segments { background: #3b82f6; }
#view-transcription-editor .marker-row .dot.mk-cut      { background: #f97316; }
#view-transcription-editor .marker-row .dot.mk-chapters { background: #22c55e; }
#view-transcription-editor .marker-row .tc { color: #888; font-family: 'SF Mono', monospace; font-size: 11px; padding: 2px 6px; border-radius: 3px; }
#view-transcription-editor .marker-row .tc.in  { color: #b5b5c0; grid-column: 2; grid-row: 1; }
#view-transcription-editor .marker-row .tc.out {
  background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.15);
  color: #555; cursor: pointer; font-style: italic;
  grid-column: 3; grid-row: 1;
}
#view-transcription-editor .marker-row .tc.out.set { background: transparent; border: 1px solid transparent; color: #b5b5c0; font-style: normal; }
#view-transcription-editor .marker-row .tc.out:hover:not(.set) { border-color: rgba(255,255,255,0.35); color: #888; }
#view-transcription-editor .marker-row .tc.out.set:hover { border-color: rgba(255,255,255,0.15); }
#view-transcription-editor .marker-row .del-btn {
  background: transparent; border: none; color: #555; cursor: pointer; padding: 2px 4px;
  border-radius: 3px; flex-shrink: 0; grid-column: 5; grid-row: 1; align-self: center;
}
#view-transcription-editor .marker-row .del-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
#view-transcription-editor .marker-row .label-input {
  background: transparent; border: 1px solid transparent; color: #d0d0d0; font-size: 12px;
  padding: 4px 6px; outline: none; font-family: inherit; border-radius: 3px;
  grid-column: 1 / -1; grid-row: 2; width: 100%;
  line-height: 1.3;
}
#view-transcription-editor .marker-row .label-input:focus { background: #1a1a1a; border-color: #333; }
#view-transcription-editor .marker-row .label-input:hover:not(:focus) { border-color: #222; }
#view-transcription-editor .marker-row .label-input::placeholder { color: #444; font-style: italic; }

/* Play button */
#view-transcription-editor .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.15); color: #fff; font-size: 20px;
  cursor: pointer; z-index: 10; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.15s;
}
#view-transcription-editor .play-btn:hover { background: rgba(255,255,255,0.25); transform: translate(-50%, -50%) scale(1.1); }

/* Playing block highlight */
#view-transcription-editor .block.playing { background: #0d1117; border-left: 2px solid #3b82f6; padding-left: 8px; }

/* Worker cursor — shows which block the worker is currently reviewing */
#view-transcription-editor .block.worker-focus { background: #0f0f1f; border-left: 3px solid #818cf8; padding-left: 7px; }
#view-transcription-editor .block.worker-focus .block-time { color: #818cf8; }

/* Speaker change divider */
#view-transcription-editor .block.speaker-change { border-top: 1px solid #2a2a2a; margin-top: 6px; padding-top: 8px; }

/* Word-level highlighting */
#view-transcription-editor .word { transition: color 0.1s, background 0.1s; border-radius: 2px; padding: 0 1px; }
#view-transcription-editor .word-active { background: rgba(59,130,246,0.3); color: #fff; }
#view-transcription-editor .caption-active { color: #fbbf24; }

/* ── Editor area ── */
#view-transcription-editor .editor-area { overflow-y: auto; padding: 12px 24px 40px; flex: 1; min-height: 0; }

/* (.stats-bar under the player is gone — S8 moved the counts into the
   LLM-pass row as .stats-inline; .stat / .stat-label / .stat-value are shared.) */
#view-transcription-editor .stat { display: flex; flex-direction: column; gap: 1px; }
#view-transcription-editor .stat-label { font-size: 9px; color: #444; text-transform: uppercase; letter-spacing: 1px; }
#view-transcription-editor .stat-value { font-size: 13px; font-weight: 600; }
#view-transcription-editor #txe-stat-edited { color: #4ade80; }
#view-transcription-editor #txe-stat-flagged { color: #eab308; }

/* S8: the colour legend sits under the speaker split in the sidebar now. */
#view-transcription-editor .speaker-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
#view-transcription-editor .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #888; }
#view-transcription-editor .legend-swatch { width: 8px; height: 8px; border-radius: 2px; }

/* Lock banner */
#view-transcription-editor .lock-banner {
  background: #2a2a0a; border: 1px solid #3a3a0a; border-radius: 5px;
  padding: 6px 12px; margin-bottom: 10px;
  display: none; align-items: center; justify-content: space-between; font-size: 12px;
}
#view-transcription-editor .lock-banner.active { display: flex; }
#view-transcription-editor .lock-banner .lock-text { color: #fbbf24; font-weight: 500; }
#view-transcription-editor .lock-banner .lock-release { color: #666; font-size: 10px; cursor: pointer; }

/* ── Blocks ── */
#view-transcription-editor .blocks-container { min-height: 200px; }
#view-transcription-editor .block {
  display: grid; grid-template-columns: 72px 48px 1fr 24px 32px;
  align-items: start; padding: 6px 0; border-bottom: 1px solid #141414;
  transition: background 0.15s; position: relative; cursor: default;
  content-visibility: auto; contain-intrinsic-size: auto 34px;
}
#view-transcription-editor .block:hover { background: #111; border-radius: 4px; }
#view-transcription-editor .block.active-edit { background: #1a1a0a; border-left: 2px solid #fbbf24; padding-left: 8px; }
#view-transcription-editor .block.worker-editing { background: #0f0f1f; border-left: 2px solid #818cf8; padding-left: 8px; }
@keyframes txe-flash-edit {
  0%   { box-shadow: inset 0 0 0 9999px rgba(192, 132, 252, 0.26); }
  70%  { box-shadow: inset 0 0 0 9999px rgba(192, 132, 252, 0.10); }
  100% { box-shadow: inset 0 0 0 9999px rgba(192, 132, 252, 0);    }
}
#view-transcription-editor .block.just-edited { animation: txe-flash-edit 1.5s ease-out; }
#view-transcription-editor .block.flagged { background: #1a1008; }
/* Context window — the rolling 30-block window the LLM pass is looking at. */
#view-transcription-editor .block.context-window { background: #0b0b17; border-left: 2px solid rgba(139, 92, 246, 0.35); padding-left: 8px; }
#view-transcription-editor .block.context-window.worker-focus { border-left-color: #818cf8; background: #0f0f1f; }

#view-transcription-editor .block-time { font-size: 10px; color: #3a3a3a; font-family: 'SF Mono', 'Menlo', monospace; padding-top: 4px; cursor: pointer; }
#view-transcription-editor .block-time:hover { color: #888; }

#view-transcription-editor .block-speaker { padding-top: 2px; }
#view-transcription-editor .speaker-tag {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; cursor: pointer; user-select: none;
  transition: all 0.15s;
}
#view-transcription-editor .speaker-tag:hover { filter: brightness(1.3); transform: scale(1.05); }

#view-transcription-editor .block-text {
  font-size: 14px; line-height: 1.5; color: #d4d4d4; padding: 2px 6px;
  border-radius: 3px; min-height: 22px; outline: none;
  border: 1px solid transparent; transition: all 0.15s; word-break: break-word;
}
#view-transcription-editor .block-text:hover { border-color: #222; }
#view-transcription-editor .block-text:focus { border-color: #fbbf24; background: #1a1a0a; color: #fff; }
#view-transcription-editor .block-text.edited { color: #fff; }

#view-transcription-editor .block-confidence { padding-top: 5px; display: flex; align-items: center; justify-content: center; }
#view-transcription-editor .conf-bar { width: 3px; height: 16px; border-radius: 2px; }
#view-transcription-editor .conf-high { background: #22c55e; }
#view-transcription-editor .conf-med { background: #eab308; }
#view-transcription-editor .conf-low { background: #ef4444; }

/* Flag icon — clickable. Empty cell when no flag so the grid column stays aligned. */
#view-transcription-editor .block-flag-cell { padding-top: 3px; display: flex; align-items: center; justify-content: center; }
#view-transcription-editor .block-flag-icon {
  width: 16px; height: 16px; border: none; background: transparent; padding: 0;
  color: #f87171; cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; transition: all 0.15s;
}
#view-transcription-editor .block-flag-icon:hover { background: rgba(248,113,113,0.15); color: #fca5a5; transform: scale(1.1); }
#view-transcription-editor .block-flag-icon svg { width: 13px; height: 13px; }

/* ── Sidebar ── */
/* ── Top strip (step 3; S5 of task 577704d4 step 4): Speaker Split only, above
   the tab bar — search moved to the top bar in S2. ── */
#view-transcription-editor .top-strip { display: flex; gap: 12px; padding: 10px 12px; background: #0f0f0f; border-bottom: 1px solid #1a1a1a; flex-shrink: 0; }
#view-transcription-editor .strip-section { flex: 1 1 0; min-width: 0; }
#view-transcription-editor .strip-section h3 { font-size: 9px; color: #444; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 6px; font-weight: 600; }

#view-transcription-editor .search-input { width: 100%; background: #1a1a1a; border: 1px solid #222; border-radius: 5px; padding: 6px 10px; color: #e0e0e0; font-size: 12px; outline: none; font-family: inherit; }
#view-transcription-editor .search-input:focus { border-color: #3b82f6; }
#view-transcription-editor .search-input::placeholder { color: #333; }

/* S5: the (two) speakers sit side by side, one column each. */
#view-transcription-editor .speaker-breakdown { display: flex; flex-direction: row; gap: 12px; }
#view-transcription-editor .speaker-row { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
#view-transcription-editor .speaker-bar-bg { flex: 1; height: 5px; background: #1a1a1a; border-radius: 3px; overflow: hidden; }
#view-transcription-editor .speaker-bar-fill { height: 100%; border-radius: 3px; }
#view-transcription-editor .speaker-pct { font-size: 10px; color: #555; font-family: monospace; width: 28px; text-align: right; }

/* (Human Edits progress + Activity feed rules removed in task e8df75f5 step 2
   together with their markup and JS.) */

/* ── Chat panel (tabbed: Team Chat | Summary | Markers) ── */
#view-transcription-editor .chat-panel {
  background: #0a0a0f; border-left: 1px solid #1a1a1a;
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
}
/* S6 (task 577704d4 step 5): the maroon tint was never .chat-panel (black
   above) — it is the borrowed room-chat thread painting its own gradient
   (dm-messaging.css .dm-thread, --bg-secondary) over the panel. Scoped to
   this view, id specificity beats the class rule; the room chat elsewhere
   keeps its theme. Swept: .dm-compose is already #000, .dm-msg / .dm-msg-row
   carry no background. */
#view-transcription-editor .dm-thread { background: linear-gradient(180deg, #0a0a0a 0%, #161616 100%); }
#view-transcription-editor .chat-header { padding: 0; border-bottom: 1px solid #1a1a1a; display: flex; flex-shrink: 0; }
#view-transcription-editor .chat-tab {
  flex: 1; padding: 10px 14px; background: transparent; border: none; border-right: 1px solid #1a1a1a;
  color: #555; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
#view-transcription-editor .chat-tab:last-child { border-right: none; }
#view-transcription-editor .chat-tab:hover { color: #888; }
#view-transcription-editor .chat-tab.active { color: #fbbf24; background: #0a0a08; border-bottom: 2px solid #fbbf24; }
#view-transcription-editor .chat-tab.summary.active { color: #a78bfa; border-bottom-color: #a78bfa; background: #0a0a14; }

/* Team Chat = the borrowed room chat. transcripts.css already styles the
   .dm-lent-chat wrapper (flex column, thread grows, composer pinned). The slot
   only needs to give it room. */
#view-transcription-editor .chat-slot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Lent chat chrome (task 5b1b61f1): the row above the borrowed thread carries
   the episode context + the sidebar's own #dm-tmux-tabs node (pane lights,
   token badges, CLR). The compact tab look is scoped .dm-sidebar in
   orchestrator-log.css; mirrored here because the node sits outside the
   sidebar while lent. */
#view-transcription-editor .dm-lent-chrome { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #0f0f0f; border-bottom: 1px solid #1a1a1a; flex-shrink: 0; min-height: 34px; }
#view-transcription-editor .dm-lent-context { flex: 1 1 auto; min-width: 0; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-transcription-editor .dm-lent-chrome .dm-tmux-tabs { gap: 4px; padding: 0; background: transparent; flex-shrink: 0; }
#view-transcription-editor .dm-lent-chrome .dm-tmux-tabs .tmux-tab { font-family: var(--fleet-mono, 'SF Mono', 'Menlo', ui-monospace, monospace); background: rgba(255,255,255,0.015); border: 1px solid var(--fleet-hair); color: rgba(255,255,255,0.55); min-height: 26px; padding: 3px 8px; font-size: 0.7rem; }
#view-transcription-editor .dm-lent-chrome .dm-tmux-tabs .tmux-tab.active { background: rgba(254,202,87,0.12); border-color: rgba(254,202,87,0.35); color: var(--fleet-your-move); }
#view-transcription-editor .dm-lent-chrome .dm-tmux-tabs .tmux-tab-add { background: rgba(46,213,115,0.12); border-color: rgba(46,213,115,0.3); color: var(--fleet-working); }
#view-transcription-editor .dm-lent-chrome .dm-tmux-tabs .tmux-tab-clear { font-family: var(--fleet-text); letter-spacing: 1px; }

/* Summary panel */
#view-transcription-editor .summary-view { flex: 1; overflow-y: auto; padding: 14px 16px; display: none; }
#view-transcription-editor .summary-view.active { display: block; }
#view-transcription-editor .summary-empty { color: #444; font-size: 12px; font-style: italic; text-align: center; padding-top: 40px; }
#view-transcription-editor .summary-meta { display: flex; gap: 10px; font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #1a1a1a; }
#view-transcription-editor .summary-meta .label { color: #333; }
#view-transcription-editor .summary-meta .value { color: #a78bfa; font-family: 'SF Mono', monospace; font-weight: 600; }
#view-transcription-editor .summary-content { font-size: 12px; line-height: 1.6; color: #b5b5c0; white-space: pre-wrap; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
/* Summary sections (2026-09-03): one node per `Blocks X–Y` section, rendered in
   block order; .active tracks playback the way .block.playing does, so the
   eye lands on the same place in both panels. */
#view-transcription-editor .summary-section { padding: 6px 8px 8px; margin: 0 0 6px; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; scroll-margin-top: 8px; }
#view-transcription-editor .summary-section-header { font-size: 11px; font-weight: 600; color: #7c8592; letter-spacing: 0.3px; margin-bottom: 3px; }
#view-transcription-editor .summary-section-body { white-space: pre-wrap; }
#view-transcription-editor .summary-section.active { background: #0d1117; border-left-color: #3b82f6; }
#view-transcription-editor .summary-section.active .summary-section-header { color: #4dabf7; }

/* ── Bottom bar ── flex row at the foot of the view (was position:fixed,
   which would sit on top of the PWA's bottom nav) */
#view-transcription-editor .bottombar {
  flex-shrink: 0;
  padding: 10px 24px; background: #111; border-top: 1px solid #222;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#view-transcription-editor .bottombar-left { font-size: 11px; color: #444; }
#view-transcription-editor .bottombar-right { display: flex; gap: 6px; }
/* S9 (task 577704d4 step 5): Export SRT / TXT / Done are hidden behind a
   feature attribute that init() sets on the view (not in the markup's
   opening tag — a pin matches that literally). Handlers stay bound; set
   data-exports to anything else to bring the buttons back. */
#view-transcription-editor[data-exports="off"] .bottombar-right { display: none; }

/* Loading state */
#view-transcription-editor .loading { display: flex; align-items: center; justify-content: center; height: 300px; color: #555; font-size: 14px; text-align: center; padding: 0 20px; }
#view-transcription-editor .loading .spinner { width: 20px; height: 20px; border: 2px solid #333; border-top-color: #818cf8; border-radius: 50%; animation: txe-spin 0.8s linear infinite; margin-right: 10px; }
@keyframes txe-spin { to { transform: rotate(360deg); } }

/* Narrow screens: stack the sidebar under the main column rather than
   squeezing three grid columns into a phone width. */
@media (max-width: 900px) {
  #view-transcription-editor .layout { grid-template-columns: 1fr; grid-template-rows: 1fr 0px; overflow-y: auto; }
  #view-transcription-editor .layout.chat-open { grid-template-columns: 1fr; grid-template-rows: 1fr minmax(280px, 45vh); }
  #view-transcription-editor .chat-panel { border-left: none; border-top: 1px solid #1a1a1a; }
  #view-transcription-editor .top-strip { flex-wrap: wrap; }
  #view-transcription-editor .topbar { height: auto; flex-wrap: wrap; }
  #view-transcription-editor .topbar-center { display: none; }
}

/* Marker in-point edit (2026-09-03): the .tc.in badge is clickable; while
   editing it hosts a small inline input sized to the badge. */
#view-transcription-editor .marker-row .tc.in { cursor: text; }
#view-transcription-editor .marker-row .tc.in:hover { color: #fff; text-decoration: underline dotted; }
#view-transcription-editor .marker-row .tc-edit { width: 7.5ch; background: #0d1117; color: #fff; border: 1px solid #3b82f6; border-radius: 3px; font: inherit; padding: 0 3px; }

/* Marker-type visibility (2026-09-03): the editor sets data-mk-vis-<type>
   on the view element; hidden types drop out of the timeline (ticks +
   ranges) AND the marker panel (rows). Scoped to those three surfaces on
   purpose — the legend swatch keeps its .mk-<type> colour and stays
   clickable so a hidden type can still be created (which reveals it). */
#view-transcription-editor[data-mk-vis-intro="off"] .marker-tick.mk-intro,
#view-transcription-editor[data-mk-vis-intro="off"] .marker-range.mk-intro,
#view-transcription-editor[data-mk-vis-intro="off"] .marker-row[data-type="intro"] { display: none; }
#view-transcription-editor[data-mk-vis-reels="off"] .marker-tick.mk-reels,
#view-transcription-editor[data-mk-vis-reels="off"] .marker-range.mk-reels,
#view-transcription-editor[data-mk-vis-reels="off"] .marker-row[data-type="reels"] { display: none; }
#view-transcription-editor[data-mk-vis-segments="off"] .marker-tick.mk-segments,
#view-transcription-editor[data-mk-vis-segments="off"] .marker-range.mk-segments,
#view-transcription-editor[data-mk-vis-segments="off"] .marker-row[data-type="segments"] { display: none; }
#view-transcription-editor[data-mk-vis-cut="off"] .marker-tick.mk-cut,
#view-transcription-editor[data-mk-vis-cut="off"] .marker-range.mk-cut,
#view-transcription-editor[data-mk-vis-cut="off"] .marker-row[data-type="cut"] { display: none; }
#view-transcription-editor[data-mk-vis-chapters="off"] .marker-tick.mk-chapters,
#view-transcription-editor[data-mk-vis-chapters="off"] .marker-range.mk-chapters,
#view-transcription-editor[data-mk-vis-chapters="off"] .marker-row[data-type="chapters"] { display: none; }