/* ============================================================
   Voice-Activated Teleprompter — Genspark Studio
   Brand-faithful to source: Inter font, #0f7fff primary blue,
   #e8f2ff voice-note bg, #cfe4ff slide-cue bg, #f4f4f4 code,
   #f8f9fa toc bg, #e5e5e5 borders, #8a8a8a secondary text.
   Scaled up to be easy to read from a computer screen or TV.
   ============================================================ */

:root {
  /* Brand palette (matches source script HTML) */
  --brand-blue: #0f7fff;
  --brand-blue-bg: #e8f2ff;
  --brand-blue-soft: #cfe4ff;
  --bg: #ffffff;
  --bg-alt: #f8f9fa;
  --bg-code: #f4f4f4;
  --border: #e5e5e5;
  --text: #000000;
  --text-mute: #8a8a8a;

  /* Dynamic font size — controlled by slider */
  --tp-font-size: 56px;
  --tp-line-height: 1.45;

  /* Spacing */
  --toolbar-h: 96px;
  --sidebar-w: 280px;
}

body.sidebar-collapsed {
  --sidebar-w: 0px;
}

/* Dark mode (for filming dark studios / OLED TVs) */
[data-theme='dark'] {
  --bg: #0a0a0a;
  --bg-alt: #141414;
  --bg-code: #1a1a1a;
  --border: #2a2a2a;
  --text: #ffffff;
  --text-mute: #9a9a9a;
  --brand-blue-bg: rgba(15, 127, 255, 0.15);
  --brand-blue-soft: rgba(15, 127, 255, 0.28);
}

/* Studio mode — pure black for OLED displays */
[data-theme='studio'] {
  --bg: #000000;
  --bg-alt: #060606;
  --bg-code: #0a0a0a;
  --border: #1a1a1a;
  --text: #f5f5f5;
  --text-mute: #707070;
  --brand-blue-bg: rgba(15, 127, 255, 0.10);
  --brand-blue-soft: rgba(15, 127, 255, 0.22);
}
[data-theme='studio'] .tp-toolbar,
[data-theme='studio'] .tp-sidebar,
[data-theme='studio'] .pane-head,
[data-theme='studio'] .modal-content {
  background: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* the tp-stage handles scroll */
  height: 100vh;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
}

/* ============================================================
   Toolbar — v5.6 polish: hairline border + soft blue-tinted lift
   ============================================================ */
.tp-toolbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 100;
  background: var(--bg);
  /* Hairline border replaces the chunky 2px line; box-shadow lifts the toolbar
     off the page with a faint blue-tinted ambient glow. */
  border-bottom: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(15, 127, 255, 0.04),
    0 8px 24px -16px rgba(0, 0, 0, 0.08);
  min-height: var(--toolbar-h);
  display: flex;
  flex-direction: column;
  transition: left 0.2s ease;
}

.toolbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  flex-wrap: wrap;
}

/* ----- v5.6 — Brand mark (sidebar): eyebrow + star-accent wordmark ----- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-right: 0;
  border-right: none;
  margin-right: 0;
}
.brand-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.brand-star {
  color: var(--brand-blue);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.brand-wordmark {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand-wordmark-accent {
  color: var(--brand-blue);
  font-weight: 700;
}

/* Legacy classes kept for safety (not rendered, but old CSS rules in modals/help may reference them) */
.brand-dot, .brand-text, .brand-sub { display: none; }

/* ----- v5.6 — Toolbar group zones + dividers ----- */
.ctrl-zone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ctrl-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
  /* Subtle inner highlight so the divider doesn't read as a hard line */
  opacity: 0.7;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}

.ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* v5.6 — animate transform + shadow + border separately for a real "press" feel */
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  /* Subtle inner highlight so flat-white buttons aren't completely flat */
  box-shadow: 0 1px 0 rgba(15, 127, 255, 0.02);
}
.ctrl-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  /* v5.6 — hover lift: button rises 1px and casts a soft brand-blue shadow */
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px -4px rgba(15, 127, 255, 0.22),
    0 1px 0 rgba(15, 127, 255, 0.04);
}
.ctrl-btn:active {
  /* Snap back on press so it feels physical */
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(15, 127, 255, 0.02);
}
.ctrl-btn.primary {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
  box-shadow: 0 2px 6px -2px rgba(15, 127, 255, 0.45);
}
.ctrl-btn.primary:hover {
  background: #0a6ce0;
  border-color: #0a6ce0;
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px -4px rgba(15, 127, 255, 0.5),
    0 2px 4px -2px rgba(15, 127, 255, 0.35);
}
.ctrl-btn.primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px -2px rgba(15, 127, 255, 0.45);
}
.ctrl-btn.primary.active {
  background: #d93636;
  border-color: #d93636;
  animation: micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(217, 54, 54, 0.55);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(217, 54, 54, 0);
  }
}
.ctrl-btn.icon-only {
  padding: 10px 12px;
}
.ctrl-btn.icon-only .btn-label {
  display: none;
}
.ctrl-btn.active {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

/* Pause button in active state = amber, to make "paused" visually obvious */
#pause-btn.active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
  animation: pausePulse 1.6s ease-in-out infinite;
}
@keyframes pausePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

/* Demo Mode active = filmic gold accent */
#demo-btn.active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
[data-theme='dark'] #demo-btn.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

/* Section navigation buttons grouped together */
.section-nav {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.section-nav .ctrl-btn {
  border: none;
  padding: 6px 10px;
  background: transparent;
}
.section-nav .ctrl-btn:hover {
  background: var(--bg);
  color: var(--brand-blue);
}

.ctrl-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ctrl-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ctrl-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   v5.6 — Custom sliders: filled brand-blue track + glowing thumb
   Uses a CSS gradient driven by the slider's actual value via a
   linear-gradient computed from --value (set inline by JS for the
   filled portion). Falls back gracefully if --value isn't set.
   ============================================================ */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 130px;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  /* Soft inner ring so the empty track has a touch of dimension */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.18s ease;
}
.slider:hover {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(15, 127, 255, 0.08);
}
.slider:focus-visible {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(15, 127, 255, 0.22);
}
/* WebKit thumb */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--brand-blue);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow:
    0 2px 6px rgba(15, 127, 255, 0.45),
    0 0 0 1px rgba(15, 127, 255, 0.2);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.slider:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow:
    0 4px 10px rgba(15, 127, 255, 0.55),
    0 0 0 6px rgba(15, 127, 255, 0.12);
}
.slider:active::-webkit-slider-thumb {
  transform: scale(1.06);
}
/* Firefox thumb */
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--brand-blue);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow:
    0 2px 6px rgba(15, 127, 255, 0.45),
    0 0 0 1px rgba(15, 127, 255, 0.2);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.slider:hover::-moz-range-thumb {
  transform: scale(1.12);
  box-shadow:
    0 4px 10px rgba(15, 127, 255, 0.55),
    0 0 0 6px rgba(15, 127, 255, 0.12);
}
/* Firefox progress fill — native to FF, no JS needed */
.slider::-moz-range-progress {
  background: linear-gradient(90deg, var(--brand-blue), #4ea6ff);
  height: 6px;
  border-radius: 999px;
}
/* Dark theme: lighter track for contrast */
[data-theme='dark'] .slider,
[data-theme='studio'] .slider {
  background: #2a2a2a;
}
[data-theme='dark'] .slider::-webkit-slider-thumb,
[data-theme='studio'] .slider::-webkit-slider-thumb {
  border-color: #0a0a0a;
}
[data-theme='dark'] .slider::-moz-range-thumb,
[data-theme='studio'] .slider::-moz-range-thumb {
  border-color: #0a0a0a;
}

/* Status row */
.status-row {
  display: flex;
  gap: 24px;
  padding: 8px 24px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
  flex-wrap: wrap;
}
.status-item {
  color: var(--text-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-item strong {
  color: var(--text);
  font-weight: 700;
}
.status-item .fa-circle {
  color: var(--text-mute);
  font-size: 8px;
}
.status-item.live .fa-circle {
  color: #d93636;
  animation: micPulse 1.4s ease-in-out infinite;
}
.status-heard {
  flex: 1;
  text-align: right;
  color: var(--brand-blue);
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

/* ============================================================
   Reading line indicator (horizontal blue line where you read)
   ============================================================ */
.reading-line {
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  top: 40%;
  height: 0;
  border-top: 2px dashed rgba(15, 127, 255, 0.45);
  pointer-events: none;
  z-index: 50;
  transition: left 0.2s ease;
}
.reading-line::before,
.reading-line::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.reading-line::before {
  left: 0;
  border-left: 14px solid var(--brand-blue);
}
.reading-line::after {
  right: 0;
  border-right: 14px solid var(--brand-blue);
}

/* ============================================================
   Big state banner (PAUSED / SECTION COMPLETE)
   Centered overlay you can read from across the room.
   ============================================================ */
.state-banner {
  position: fixed;
  left: 50%;
  top: calc(var(--toolbar-h) + 24px);
  transform: translateX(-50%);
  z-index: 90;
  background: #f59e0b;
  color: #fff;
  padding: 18px 36px;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  gap: 20px;
  animation: bannerIn 0.25s ease-out;
  max-width: 90vw;
}
.state-banner.hidden { display: none; }
@keyframes bannerIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.state-banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.state-icon {
  font-size: 36px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}
.state-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.state-sub {
  font-size: 14px;
  opacity: 0.92;
  font-weight: 500;
  margin-top: 2px;
  max-width: 60ch;
}

/* When the prompter receives a remote (Stream Deck) command, briefly
   flash the toolbar so you know it landed. */
body.remote-flash .tp-toolbar {
  box-shadow: 0 0 0 3px var(--brand-blue) inset;
  transition: box-shadow 0.05s ease-out;
}

/* ============================================================
   Stage (scrollable teleprompter body)
   ============================================================ */
.tp-stage {
  position: fixed;
  top: var(--toolbar-h);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  scroll-behavior: smooth;
  transition: left 0.2s ease;
}
.tp-stage::-webkit-scrollbar {
  width: 10px;
}
.tp-stage::-webkit-scrollbar-track {
  background: var(--bg-alt);
}
.tp-stage::-webkit-scrollbar-thumb {
  background: var(--brand-blue);
  border-radius: 999px;
  opacity: 0.4;
}

.tp-doc {
  max-width: 1400px;
  margin: 0 auto;
  /* Top padding pushes the first line down to the reading line */
  padding: 30vh 80px 60vh 80px;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

/* Mirroring */
.tp-doc.mirror-h {
  transform: scaleX(-1);
}
.tp-doc.mirror-v {
  transform: scaleY(-1);
}
.tp-doc.mirror-h.mirror-v {
  transform: scale(-1, -1);
}

/* ============================================================
   Hero block (matches source HTML)
   ============================================================ */
.hero-block {
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--border);
}
.hero-eyebrow {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  color: var(--text);
  line-height: 1.15;
}
.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--brand-blue);
  margin-bottom: 1rem;
}
.hero-meta {
  font-size: 1.1rem;
  color: var(--text-mute);
}

/* ============================================================
   Sections (matches source HTML)
   ============================================================ */
.tp-section {
  margin-bottom: 5rem;
}
.section-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.timestamp-pill {
  background: var(--brand-blue);
  color: #fff;
  font-size: 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.section-title {
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

.layout-note {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

/* ============================================================
   Spoken text — THE BIG READABLE BLOCK
   This is the only content that uses the dynamic font size.
   Everything else (cues, notes) stays smaller so the script
   visually matches the source but the spoken lines are huge.
   ============================================================ */
.spoken-text {
  font-size: var(--tp-font-size);
  line-height: var(--tp-line-height);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2rem;
  letter-spacing: -0.005em;
  word-spacing: 0.05em;
}

/* Individual word spans */
.w {
  transition: color 0.15s ease, background 0.15s ease;
  border-radius: 4px;
  padding: 0 1px;
}
.w.spoken {
  color: var(--text-mute);
  opacity: 0.55;
}
.w.current {
  color: var(--brand-blue);
  background: var(--brand-blue-bg);
  font-weight: 700;
}
.ws {
  /* whitespace / punctuation chunks */
  white-space: pre-wrap;
}

/* ============================================================
   Eyebrows, voice notes, slide cues, anim cues, code box
   (matches source HTML 1:1, just slightly enlarged)
   ============================================================ */
.eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.3rem;
}

.voice-note {
  background: var(--brand-blue-bg);
  border-left: 4px solid var(--brand-blue);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-mute);
  font-style: italic;
  font-size: 1.05rem;
}

.slide-cue {
  background: var(--brand-blue-soft);
  border: 1px solid var(--brand-blue);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: 4px;
}

.anim-cue {
  display: inline-block;
  background: var(--brand-blue);
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  margin-right: 0.5rem;
}

.code-box {
  background: var(--bg-code);
  font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text);
  display: block;
  border: 1px solid var(--border);
  font-size: 1rem;
  border-radius: 4px;
}

/* Beats inside Section 08 */
.beat {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}
.beat-header {
  margin-bottom: 1rem;
}
.beat-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}

/* End card */
.end-spacer {
  padding-top: 6rem;
  text-align: center;
}
.end-card {
  display: inline-block;
  background: var(--brand-blue);
  color: #fff;
  padding: 1.5rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.4rem;
}
.end-card .fa-circle-check {
  margin-right: 0.5rem;
}

/* ============================================================
   Help overlay
   ============================================================ */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.help-overlay.hidden {
  display: none;
}
.help-card {
  background: var(--bg);
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.help-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.help-head h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}
.help-head h2 .fa-microphone {
  color: var(--brand-blue);
  margin-right: 8px;
}
.help-close {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.help-close:hover {
  background: var(--border);
  color: var(--text);
}
.help-body {
  padding: 24px 28px 28px;
}
.help-body p {
  margin: 0 0 1.25rem;
  line-height: 1.6;
  color: var(--text);
}
.help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin-bottom: 1.5rem;
  font-size: 14px;
  color: var(--text-mute);
}
.help-h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.help-h3 .fas { color: var(--brand-blue); }
.help-p-tight { margin: 0 0 0.5rem !important; font-size: 14px; line-height: 1.55; }
.help-voice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1rem;
  font-size: 14px;
  color: var(--text-mute);
}
.vcmd {
  display: inline-block;
  background: var(--brand-blue-bg);
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  margin-right: 4px;
}
.help-endpoints {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0.5rem 0 1rem;
  font-size: 13px;
  color: var(--text);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.help-endpoints code {
  background: transparent;
  font-weight: 700;
  color: var(--brand-blue);
}
.help-body h2,
.help-body h3 { color: var(--text); }
.help-body code {
  background: var(--bg-code);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
}
.kbd {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-right: 6px;
  min-width: 26px;
  text-align: center;
}
.help-note {
  background: var(--brand-blue-bg);
  border-left: 4px solid var(--brand-blue);
  padding: 12px 16px;
  font-size: 13px !important;
  color: var(--text) !important;
}
.help-note .fa-info-circle {
  color: var(--brand-blue);
  margin-right: 6px;
}
.help-cta {
  display: block;
  width: 100%;
  background: var(--brand-blue);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.help-cta:hover {
  background: #0a6ce0;
}

/* ============================================================
   Sidebar — script library, expert, skills, knowledge, resources
   ============================================================ */
.tp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-alt);
  border-right: 2px solid var(--border);
  z-index: 110;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease, transform 0.2s ease;
}
body.sidebar-collapsed .tp-sidebar {
  transform: translateX(-100%);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-brand {
  padding-right: 0;
  border-right: none;
  margin-right: 0;
}
.sidebar-collapse {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.sidebar-collapse:hover {
  background: var(--bg);
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.sidebar-reopen {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 109;
  background: var(--brand-blue);
  color: #fff;
  border: none;
  padding: 14px 8px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
  display: none;
  transition: background 0.15s ease;
}
.sidebar-reopen:hover {
  background: #0a6ce0;
}
body.sidebar-collapsed .sidebar-reopen {
  display: block;
}

.sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-tabs.sidebar-tabs-6 {
  grid-template-columns: repeat(6, 1fr);
}
.sidebar-tabs.sidebar-tabs-7 {
  grid-template-columns: repeat(7, 1fr);
}
.sidebar-tabs.sidebar-tabs-7 .side-tab {
  padding: 8px 2px;
  font-size: 9px;
}
.sidebar-tabs.sidebar-tabs-7 .side-tab i {
  font-size: 14px;
}
.side-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.side-tab i {
  font-size: 16px;
}
.side-tab:hover {
  color: var(--text);
  background: var(--bg-alt);
}
.side-tab.active {
  background: var(--brand-blue-bg);
  color: var(--brand-blue);
  border-color: var(--brand-blue-soft);
}

.sidebar-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.side-pane {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.side-pane.active {
  display: flex;
}

.pane-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pane-head-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pane-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}
.pane-search:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px var(--brand-blue-bg);
}
.pane-btn {
  flex: 1;
  min-width: 60px;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.pane-btn:hover {
  background: var(--bg);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.pane-btn.primary {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.pane-btn.primary:hover {
  background: #0a6ce0;
}

.pane-section {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pane-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.pane-help {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.pane-help.small {
  font-size: 12px;
  color: var(--text-mute);
}
.pane-help code {
  background: var(--bg-code);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.big-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: var(--brand-blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.big-action:hover {
  background: #0a6ce0;
}
.big-action.secondary {
  background: var(--bg);
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
}
.big-action.secondary:hover {
  background: var(--brand-blue-bg);
}

/* ----- Script list ----- */
.script-list,
.skills-list,
.kn-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.script-item,
.skill-item,
.kn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.script-item:hover,
.skill-item:hover,
.kn-item:hover {
  border-color: var(--brand-blue);
  background: var(--brand-blue-bg);
}
.script-item.active {
  border-color: var(--brand-blue);
  background: var(--brand-blue-bg);
  box-shadow: 0 0 0 2px var(--brand-blue-soft);
}
.script-item-main,
.skill-item-main,
.kn-item-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.script-item-title,
.skill-item-name,
.kn-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.script-item-meta,
.kn-item-meta,
.skill-item-desc {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.script-item-actions,
.skill-item-actions,
.kn-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.ic-btn {
  background: transparent;
  border: none;
  color: var(--text-mute);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.15s ease;
}
.ic-btn:hover {
  background: var(--bg-alt);
  color: var(--brand-blue);
}
.ic-btn.danger:hover {
  color: #e02929;
  background: rgba(224, 41, 41, 0.08);
}

.empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1.6;
}
.empty-state i {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
  color: var(--border);
}

/* ============================================================
   Active script header (in toolbar)
   ============================================================ */
.active-script {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
  max-width: 320px;
}
.active-script > i {
  color: var(--brand-blue);
  font-size: 14px;
}
.active-script-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.link-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.link-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--brand-blue-bg);
}

/* ============================================================
   Loading state inside tp-doc
   ============================================================ */
.tp-loading {
  text-align: center;
  padding: 40vh 20px;
  font-size: 18px;
  color: var(--text-mute);
}
.tp-loading i {
  margin-right: 8px;
  color: var(--brand-blue);
}

.loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mute);
  font-size: 13px;
}
.loading i {
  color: var(--brand-blue);
}

/* ============================================================
   Modal overlays (editor, skills, knowledge, paste, resources)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
.modal-overlay.hidden {
  display: none;
}
.modal {
  background: var(--bg);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.modal-wide {
  max-width: 980px;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  flex-shrink: 0;
}
.modal-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-head h2 i {
  color: var(--brand-blue);
}
.modal-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.15s ease;
  margin-left: 6px;
}
.modal-close:hover {
  background: var(--bg);
  color: #e02929;
  border-color: #e02929;
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.modal-help {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ============================================================
   Form rows (used in modals)
   ============================================================ */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-row > label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.form-row input[type='text'],
.form-row input[type='search'],
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
.form-row textarea {
  min-height: 80px;
  font-family: inherit;
  line-height: 1.55;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px var(--brand-blue-bg);
}
.inline-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.inline-row > .form-row {
  flex: 1;
  min-width: 140px;
  margin-bottom: 0;
}
.hint {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}

/* ============================================================
   Section editor (inside editor modal)
   ============================================================ */
.hero-edit {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 18px;
}
.edit-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.edit-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.edit-section-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.edit-section-title-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 0;
}
.edit-section-title-input:focus {
  outline: none;
  background: var(--bg);
  box-shadow: 0 0 0 2px var(--brand-blue-bg);
}
.edit-section-actions {
  display: flex;
  gap: 4px;
}
.edit-section-body {
  padding: 14px;
}
.edit-beats {
  margin-top: 8px;
  padding-left: 18px;
  border-left: 3px solid var(--brand-blue-soft);
}
.edit-beat {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.edit-foot {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* AI buttons row under each spoken text */
.ai-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.ai-btn {
  background: var(--brand-blue-bg);
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue-soft);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.ai-btn:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.ai-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.ai-btn i {
  font-size: 10px;
}

/* Code preview inside modal */
.code-preview {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
}

/* Mermaid rendering */
.mermaid {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
  text-align: center;
  overflow-x: auto;
}
.mermaid svg {
  max-width: 100%;
  height: auto;
}
.mermaid-source {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
  max-height: 220px;
  overflow-y: auto;
}

.error {
  color: #e02929;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(224, 41, 41, 0.08);
  border-radius: 6px;
  border-left: 3px solid #e02929;
}

/* ============================================================
   Voice commands hint list (inside help modal — used in modal-help)
   ============================================================ */
.vcmd {
  background: var(--bg-code);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  color: var(--brand-blue);
}

/* ============================================================
   v4 — Section runtime badges (in tp-doc section headers)
   ============================================================ */
.section-meta {
  display: inline-block;
  font-size: 0.42em;
  font-weight: 500;
  color: var(--text-mute);
  margin-left: 14px;
  padding: 4px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ============================================================
   v4 — Active script header runtime badge (toolbar)
   ============================================================ */
.active-script-runtime {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  margin-left: 4px;
  white-space: nowrap;
}

/* ============================================================
   v4 — Language selector (toolbar)
   ============================================================ */
.ctrl-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ctrl-select:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.ctrl-select:focus {
  outline: none;
  border-color: var(--brand-blue);
}

/* ============================================================
   v4 — Focal dot (eye-tracking marker on reading line)
   ============================================================ */
.focal-dot {
  position: absolute;
  top: -7px;
  left: 40%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(15, 127, 255, 0.2),
              0 0 12px rgba(15, 127, 255, 0.6);
  pointer-events: none;
  transform: translateX(-50%);
}

/* ============================================================
   v4 — Countdown overlay (3-2-1 before mic)
   ============================================================ */
.countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  pointer-events: none;
}
.countdown-overlay.hidden {
  display: none;
}
.countdown-number {
  font-size: 280px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-blue);
  text-shadow: 0 4px 40px rgba(15, 127, 255, 0.5);
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.countdown-number.pulse {
  animation: countdownPulse 0.8s ease-out;
}
@keyframes countdownPulse {
  0% { transform: scale(0.6); opacity: 0; }
  40% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.countdown-label {
  margin-top: 24px;
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.countdown-hint {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   v4 — Resume banner (top sticky, on script load if cursor saved)
   ============================================================ */
.resume-banner {
  position: fixed;
  top: calc(var(--toolbar-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--brand-blue);
  color: #fff;
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(15, 127, 255, 0.35);
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 90vw;
  animation: slideInTop 0.4s ease-out;
}
.resume-banner.hidden {
  display: none;
}
@keyframes slideInTop {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.resume-text {
  font-size: 14px;
  font-weight: 600;
}
.resume-actions {
  display: flex;
  gap: 8px;
}
.resume-actions button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.resume-actions button:hover {
  background: rgba(255, 255, 255, 0.32);
}
.resume-actions button.primary {
  background: #fff;
  color: var(--brand-blue);
}
.resume-actions button.primary:hover {
  background: #f0f8ff;
}

/* ============================================================
   v4 — Toast notifications (bottom center fade)
   ============================================================ */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: #1a1a1a;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  max-width: 80vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: toastIn 0.3s ease-out;
}
.toast.hidden {
  display: none;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   v4 — Takes pane (sidebar) — recording log
   ============================================================ */
.takes-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.takes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.takes-toggle.recording {
  background: #d93636;
  color: #fff;
  border-color: #d93636;
  animation: recordPulse 1.6s ease-in-out infinite;
}
@keyframes recordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 54, 54, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(217, 54, 54, 0); }
}
.recording-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: recordDotPulse 1s ease-in-out infinite;
}
@keyframes recordDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.takes-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.takes-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-mute);
  font-size: 13px;
}
.takes-empty i {
  display: block;
  font-size: 32px;
  margin-bottom: 10px;
  color: var(--border);
}
.takes-session {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.takes-session.active {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 1px var(--brand-blue-soft);
}
.takes-session-head {
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.takes-session-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.takes-session-meta {
  font-size: 11px;
  color: var(--text-mute);
}
.takes-session-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.takes-session-actions button {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.takes-session-actions button:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.take-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.take-item:first-child {
  border-top: none;
}
.take-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.take-main {
  flex: 1;
  min-width: 0;
}
.take-section {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.take-meta {
  font-size: 10px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   v4 — History modal (script version history)
   ============================================================ */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.history-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-mute);
  font-size: 13px;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.history-item:hover {
  border-color: var(--brand-blue-soft);
}
.history-item-main {
  flex: 1;
  min-width: 0;
}
.history-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.history-item-meta {
  font-size: 11px;
  color: var(--text-mute);
}
.history-item button {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.history-item button:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.history-current {
  border-color: var(--brand-blue);
  background: var(--brand-blue-bg);
}
.history-current .history-item-title::before {
  content: '● ';
  color: var(--brand-blue);
}

/* ============================================================
   v4 — Hotkey editor (inside help modal)
   ============================================================ */
.help-customize-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--brand-blue);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  vertical-align: middle;
  transition: all 0.15s ease;
}
.help-customize-btn:hover {
  background: var(--brand-blue-bg);
  border-color: var(--brand-blue);
}
.hotkey-editor {
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hotkey-editor.hidden {
  display: none;
}
.hotkey-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hotkey-editor-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.hotkey-editor-actions {
  display: flex;
  gap: 6px;
}
.hotkey-editor-actions button {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hotkey-editor-actions button:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.hotkey-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.hotkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.hotkey-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.hotkey-binding {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 4px 12px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  min-width: 56px;
  text-align: center;
  transition: all 0.15s ease;
}
.hotkey-binding:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.hotkey-binding.capturing {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  animation: capturePulse 1.2s ease-in-out infinite;
}
@keyframes capturePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 127, 255, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(15, 127, 255, 0); }
}

/* ============================================================
   v4 — Hotkeys help grid (auto-filled from state.hotkeys)
   ============================================================ */
.help-hotkeys-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
}
.help-hotkeys-grid > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}

/* ============================================================
   v4 — Print stylesheet (cue cards / printable script)
   ============================================================ */
@media print {
  body.printing .tp-toolbar,
  body.printing .tp-sidebar,
  body.printing .sidebar-reopen,
  body.printing .reading-line,
  body.printing .focal-dot,
  body.printing .state-banner,
  body.printing .resume-banner,
  body.printing .countdown-overlay,
  body.printing .toast,
  body.printing .modal-overlay {
    display: none !important;
  }
  body.printing {
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
  }
  body.printing .tp-stage {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #fff !important;
  }
  body.printing .tp-doc {
    padding: 0.5in !important;
    color: #000 !important;
    font-size: 14pt !important;
    line-height: 1.45 !important;
    max-width: none !important;
  }
  body.printing .tp-doc h1,
  body.printing .tp-doc h2,
  body.printing .tp-doc h3 {
    page-break-after: avoid;
    color: #000 !important;
  }
  body.printing .tp-doc h2 {
    page-break-before: always;
    border-bottom: 2px solid #000;
    padding-bottom: 4pt;
  }
  body.printing .tp-doc h2:first-of-type {
    page-break-before: auto;
  }
  body.printing .section-meta {
    background: #f0f0f0 !important;
    color: #555 !important;
    border-color: #ccc !important;
  }
  body.printing .tp-doc .word.active,
  body.printing .tp-doc .word.spoken,
  body.printing .tp-doc .word {
    color: #000 !important;
    background: transparent !important;
  }
  body.printing .voice-note,
  body.printing .slide-cue {
    border: 1px solid #999 !important;
    background: #f7f7f7 !important;
    color: #000 !important;
    padding: 6pt 10pt !important;
    page-break-inside: avoid;
  }
  body.printing code,
  body.printing pre {
    background: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
  }
}

/* ============================================================
   v5 — Slides pane (sidebar)
   ============================================================ */
.slides-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slides-loading {
  padding: 12px;
  text-align: center;
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-blue-bg);
  border-radius: 6px;
  margin-bottom: 8px;
}
.slides-footer {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--bg);
  flex-shrink: 0;
}
.slide-card {
  display: flex;
  gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  transition: all 0.15s ease;
}
.slide-card:hover {
  border-color: var(--brand-blue-soft);
}
.slide-card.excluded {
  opacity: 0.45;
}
.slide-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 45px; /* 16:9 */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
}
.slide-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-thumb.placeholder {
  background: var(--bg);
  color: var(--text-mute);
  font-size: 16px;
}
.slide-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slide-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-mute);
}
.slide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.slide-type {
  text-transform: capitalize;
  font-weight: 600;
}
.slide-type i {
  margin-right: 3px;
}
.slide-status {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.slide-status.enriched {
  color: var(--brand-blue);
  border-color: var(--brand-blue-soft);
  background: var(--brand-blue-bg);
}
.slide-status.rendered {
  color: #0a7c3a;
  border-color: rgba(10, 124, 58, 0.3);
  background: rgba(10, 124, 58, 0.08);
}
.slide-status.rendering {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.3);
  background: rgba(217, 119, 6, 0.08);
}
.slide-status.skipped {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(180, 83, 9, 0.06);
  border-style: dashed;
}
/* Per-slide queue-position chip — shown on the slide card when a Genspark
   queue is active and this slide is in it. */
.slide-queue-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--brand-blue-bg);
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.slide-queue-chip i {
  font-size: 9px;
}
.slide-queue-chip.current {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 0 0 2px var(--brand-blue-soft);
}
.slide-card.queue-current {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 1px var(--brand-blue), 0 2px 8px var(--brand-blue-soft);
}
.slide-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.slide-subtitle {
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.3;
}
.slide-bullets {
  margin: 2px 0 0 0;
  padding-left: 16px;
  font-size: 10px;
  color: var(--text-mute);
  line-height: 1.4;
}
.slide-bullets li {
  margin: 0;
}
.slide-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.slide-act {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 26px;
  height: 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.slide-act:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-mute);
}
.empty-state i {
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--border);
}
.empty-state > div {
  font-size: 13px;
  margin-bottom: 4px;
}
.empty-hint {
  font-size: 11px !important;
  color: var(--text-mute);
}

/* ============================================================
   v5 — Slide settings modal
   ============================================================ */
.settings-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.settings-field input[type='text'],
.settings-field input[type='password'],
.settings-field select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
}
.settings-field input:focus,
.settings-field select:focus {
  outline: none;
  border-color: var(--brand-blue);
}
.settings-hint {
  font-size: 11px;
  color: var(--text-mute);
  margin: 4px 0 0 0;
  line-height: 1.4;
}
.settings-hint code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
}
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.settings-row .settings-field {
  margin-bottom: 0;
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.settings-test-result {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text);
  min-height: 18px;
}

/* ============================================================
   v5 — Slide edit modal
   ============================================================ */
.slide-preview {
  width: 100%;
  background: #f0f0f0;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.slide-preview.placeholder {
  flex-direction: column;
  color: var(--text-mute);
  gap: 8px;
}
.slide-preview.placeholder i {
  font-size: 40px;
}
.slide-preview.loading {
  opacity: 0.5;
}
.slide-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slide-edit-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-top: 8px;
}
.slide-edit-form input[type='text'],
.slide-edit-form textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.slide-edit-form input:focus,
.slide-edit-form textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
}
.slide-edit-meta {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-mute);
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
#se-save {
  align-self: flex-end;
  margin-top: 8px;
}

/* ============================================================
   v5.1 — Per-slide Genspark handoff modal
   ============================================================ */
.slide-act.slide-act-genspark {
  color: #b54a00;
  border-color: rgba(217, 119, 6, 0.3);
}
.slide-act.slide-act-genspark:hover {
  color: #fff;
  background: #f59e0b;
  border-color: #f59e0b;
}
.handoff-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.handoff-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.handoff-preview .placeholder {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-mute);
}
.handoff-preview .placeholder i {
  font-size: 32px;
}
.handoff-row {
  margin-bottom: 14px;
}
.handoff-row > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.handoff-model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--brand-blue-bg);
  border: 1px solid var(--brand-blue-soft);
  border-radius: 8px;
}
.handoff-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
}
.handoff-model {
  display: inline-block;
  padding: 3px 10px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: 999px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}
.handoff-model-why {
  flex: 1;
  font-size: 11px;
  color: var(--text-mute);
  font-style: italic;
}
#genspark-handoff-prompt {
  width: 100%;
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
}
.handoff-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.handoff-divider {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  padding: 12px 0;
  border-top: 1px dashed var(--border);
  margin-bottom: 12px;
}
.handoff-attach-row {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  gap: 10px;
  align-items: center;
}
.handoff-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s ease;
}
.handoff-file-label:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.handoff-file-label input[type='file'] {
  display: none;
}
.handoff-or {
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}
.handoff-url-group {
  display: flex;
  gap: 6px;
}
.handoff-url-group input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
}
.handoff-url-group input:focus {
  outline: none;
  border-color: var(--brand-blue);
}
.handoff-status {
  margin-top: 10px;
  min-height: 18px;
  font-size: 12px;
  color: var(--text);
}

@media (max-width: 720px) {
  .handoff-attach-row {
    grid-template-columns: 1fr;
  }
  .handoff-or {
    text-align: center;
  }
}

/* ============================================================
   v5.2 — Genspark handoff queue
   ============================================================ */
.handoff-queue {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.handoff-queue.hidden {
  display: none;
}
.handoff-queue-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 10px;
}
.handoff-queue-divider::before {
  content: "Queue · ";
  color: var(--brand-blue);
}
.handoff-queue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.handoff-queue-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.handoff-queue-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-mute);
  cursor: pointer;
  user-select: none;
}
.handoff-queue-auto input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.handoff-queue-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 32px;
}
.handoff-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  position: relative;
}
.handoff-dot:hover {
  transform: scale(1.18);
}
.handoff-dot.pending {
  background: var(--bg);
  border-color: var(--border);
}
.handoff-dot.done {
  background: #22c55e;
  border-color: #16a34a;
}
.handoff-dot.active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-soft);
  transform: scale(1.15);
}
.handoff-dot.active.done {
  background: #22c55e;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.handoff-queue-nav {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.handoff-queue-nav .ctrl-btn {
  flex: 1;
  justify-content: center;
}
.handoff-queue-nav .ctrl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.handoff-queue-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--brand-blue-bg);
  color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .handoff-queue-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .handoff-queue-nav {
    flex-wrap: wrap;
  }
  .handoff-queue-nav .ctrl-btn {
    min-width: calc(50% - 4px);
  }
}

/* Resume banner — shown on boot when a saved Genspark queue exists */
.queue-resume-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 10px 0;
  background: var(--brand-blue-bg);
  border: 1px solid var(--brand-blue);
  border-radius: 10px;
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 500;
  animation: queueResumeFadeIn 0.3s ease-out;
}
.queue-resume-banner.hidden {
  display: none;
}
.queue-resume-banner > i {
  font-size: 16px;
  flex-shrink: 0;
}
.queue-resume-banner .resume-text {
  flex: 1;
  color: var(--text);
}
.queue-resume-banner .resume-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.queue-resume-banner .ctrl-btn {
  padding: 5px 12px;
  font-size: 12px;
}
@keyframes queueResumeFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .queue-resume-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .queue-resume-banner .resume-actions {
    justify-content: center;
  }
}

/* ============================================================
   v5.3 — Genspark AI Slides handoff modal
   ============================================================ */
.aislides-modal {
  max-width: 720px;
}
.aislides-summary {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.aislides-summary-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.aislides-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.aislides-stat .stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.aislides-stat .stat-label {
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.aislides-stat.has-rendered .stat-num {
  color: #16a34a;
}
.aislides-deck-title {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.handoff-label-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-mute);
  margin-left: 6px;
}
#aislides-handoff-brief {
  font-family: 'SF Mono', Monaco, Menlo, Consolas, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.aislides-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: var(--brand-blue-bg);
  border: 1px solid var(--brand-blue-soft);
  border-radius: 6px;
}
.aislides-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
.aislides-opt input[type="checkbox"] {
  margin: 2px 0 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.aislides-opt strong {
  color: var(--brand-blue);
}
.aislides-steps {
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
}
.aislides-steps li {
  margin-bottom: 4px;
}
.aislides-steps strong {
  color: var(--brand-blue);
}
@media (max-width: 600px) {
  .aislides-summary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .aislides-deck-title {
    margin-left: 0;
    max-width: 100%;
  }
}

/* ============================================================
   v5.4 — Cost meter, Render-All confirmation, Variants
   ============================================================ */

/* ---------- Cost meter (inline in slides pane) ---------- */
.cost-meter {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.cost-meter .cost-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cost-meter .cost-row + .cost-row {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.cost-meter .cost-row.hidden {
  display: none;
}
.cost-meter > .cost-row > i {
  color: var(--text-mute);
  font-size: 13px;
  width: 14px;
  text-align: center;
}
.cost-meter .cost-label {
  color: var(--text-mute);
  font-weight: 500;
}
.cost-meter .cost-value {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cost-meter .session-row .cost-value {
  color: #0a7c3a;
}
.cost-meter .cost-detail {
  color: var(--text-mute);
  font-size: 11px;
  flex: 1;
  min-width: 0;
  text-align: right;
}
.cost-reset {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.cost-reset:hover {
  background: var(--bg);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

/* ---------- Render-All confirmation modal ---------- */
.render-confirm-modal {
  max-width: 480px;
}
.render-confirm-summary {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.render-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
.render-confirm-row + .render-confirm-row {
  border-top: 1px dashed var(--border);
}
.render-confirm-row > span {
  color: var(--text-mute);
}
.render-confirm-row > strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.render-confirm-cost {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--brand-blue-bg);
  border: 2px solid var(--brand-blue);
  border-radius: 8px;
}
.cost-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cost-total-label {
  font-size: 13px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.cost-total-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--brand-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cost-total.expensive {
  /* total > $1.00 — escalate to red */
}
.cost-total.expensive .cost-total-value {
  color: #dc2626;
}
.cost-total.expensive {
  background: rgba(220, 38, 38, 0.06);
  border-color: #dc2626;
  margin: -14px -16px 14px;
  padding: 14px 16px;
  border-radius: 8px 8px 0 0;
}
.cost-breakdown {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-mute);
  text-align: right;
}
.render-confirm-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(217, 119, 6, 0.05);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.4;
}
.render-confirm-disclaimer > i {
  color: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}
.render-confirm-disclaimer a {
  color: var(--brand-blue);
  text-decoration: none;
}
.render-confirm-disclaimer a:hover {
  text-decoration: underline;
}
.render-confirm-ack {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.render-confirm-ack input[type="checkbox"] {
  margin: 2px 0 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

/* ---------- Variants strip (under slide thumb) ---------- */
.slide-thumb-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.slide-variants {
  display: flex;
  gap: 3px;
  margin-top: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
}
.slide-variant {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-alt);
  flex-shrink: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.slide-variant:hover {
  transform: scale(1.08);
  border-color: var(--brand-blue);
  z-index: 1;
}
.slide-variant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slide-variant-del {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-mute);
  font-size: 8px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.slide-variant:hover .slide-variant-del {
  display: inline-flex;
}
.slide-variant-del:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.slide-variant-src {
  position: absolute;
  bottom: 1px;
  left: 1px;
  font-size: 7px;
  color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,0.7);
  pointer-events: none;
}

@media (max-width: 600px) {
  .slide-variants {
    max-width: 100%;
  }
  .render-confirm-modal {
    max-width: 95vw;
  }
  .cost-total-value {
    font-size: 26px;
  }
}

/* ============================================================
   Responsive — tablets / phones
   ============================================================ */
@media (max-width: 1100px) {
  :root {
    --sidebar-w: 240px;
  }
}
@media (max-width: 900px) {
  .tp-doc {
    padding: 25vh 32px 50vh 32px;
  }
  .ctrl-group {
    padding: 4px 8px;
  }
  .slider {
    width: 80px;
  }
  .btn-label {
    display: none;
  }
  .ctrl-btn {
    padding: 10px 12px;
  }
  :root {
    --toolbar-h: 140px;
    --sidebar-w: 0px;
  }
  .tp-sidebar {
    width: 280px;
    transform: translateX(-100%);
  }
  body:not(.sidebar-collapsed) .tp-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
  .sidebar-reopen {
    display: block;
  }
  body:not(.sidebar-collapsed) .sidebar-reopen {
    display: none;
  }
  .active-script {
    max-width: 200px;
  }
  .active-script-title {
    max-width: 120px;
  }
}

/* ============================================================
   v5.5 — Overlay mode (translucent app for picture-in-picture)

   When `body.overlay-mode` is on, everything except the opacity
   control panel itself fades to `--overlay-opacity`. The panel
   stays fully opaque so the user can always find the controls
   and turn it back off.
   ============================================================ */
:root {
  --overlay-opacity: 0.5;
}
body.overlay-mode > *:not(.opacity-panel):not(#toast) {
  opacity: var(--overlay-opacity);
  transition: opacity 0.18s ease;
}
body.overlay-mode {
  /* Make the page background transparent so whatever is in the
     window behind shows through — works in most browsers when
     used inside an OBS browser-source / Stage Manager / split view. */
  background: transparent !important;
}
body.overlay-mode .tp-stage,
body.overlay-mode .tp-doc,
body.overlay-mode .tp-toolbar,
body.overlay-mode .tp-sidebar {
  background: transparent !important;
}

/* Floating overlay-mode control panel — always 100% opaque. */
.opacity-panel {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  width: 280px;
  background: #ffffff;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 127, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 14px 16px 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  opacity: 1 !important; /* defeat the overlay-mode fade */
}
.opacity-panel.hidden { display: none; }

.opacity-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft, #f0f0f0);
  margin-bottom: 12px;
}
.opacity-panel-head i.fa-droplet {
  color: var(--brand, #0f7fff);
  font-size: 14px;
}
.opacity-panel-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex: 1;
  color: #000;
}
.opacity-panel-close {
  background: transparent;
  border: 0;
  color: #888;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
}
.opacity-panel-close:hover {
  background: #f5f5f5;
  color: #000;
}

.opacity-panel-row {
  margin-bottom: 12px;
}
.opacity-panel-row:last-of-type {
  margin-bottom: 0;
}
.opacity-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}
.opacity-value {
  font-variant-numeric: tabular-nums;
  color: var(--brand, #0f7fff);
  font-weight: 700;
}
#opacity-slider {
  width: 100%;
  accent-color: var(--brand, #0f7fff);
}

.opacity-panel-row.presets {
  display: flex;
  gap: 6px;
}
.opacity-preset {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--line, #e5e5e5);
  background: #fafafa;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: #333;
}
.opacity-preset:hover {
  background: var(--blue-tint, #e8f2ff);
  border-color: var(--brand, #0f7fff);
  color: var(--brand, #0f7fff);
}

.opacity-panel-hint {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft, #f0f0f0);
  font-size: 11px;
  line-height: 1.4;
  color: #777;
}
.opacity-panel-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: #333;
}

/* Opacity button in toolbar gets a blue pulse when overlay is active */
body.overlay-mode #opacity-btn {
  background: var(--brand, #0f7fff) !important;
  color: #fff !important;
  border-color: var(--brand, #0f7fff) !important;
}

@media (max-width: 600px) {
  .opacity-panel {
    width: calc(100vw - 28px);
    right: 14px;
    left: 14px;
  }
}

/* ============================================================
   v5.6 — Polish pass (Tier 2 + Tier 4)
   ============================================================ */

/* ----- Tier 2: Sidebar refinement -----
   Lighter row padding, brand-blue left-rail on the active row,
   and a soft slide-in on hover (chevron-style affordance). */
.script-item,
.skill-item,
.kn-item {
  padding: 8px 10px;
  border-radius: 10px;
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.2s ease;
}
.script-item::before,
.skill-item::before,
.kn-item::before {
  /* The blue left-rail (Studio Bible signature). Hidden by default,
     animates in on hover and stays solid for the active row. */
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--brand-blue);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.script-item:hover,
.skill-item:hover,
.kn-item:hover {
  background: var(--bg);
  border-color: var(--border);
  transform: translateX(2px);
  box-shadow: 0 2px 8px -4px rgba(15, 127, 255, 0.18);
}
.script-item:hover::before,
.skill-item:hover::before,
.kn-item:hover::before {
  opacity: 0.55;
  transform: scaleY(1);
}
.script-item.active {
  background: var(--brand-blue-bg);
  border-color: var(--brand-blue-soft);
  box-shadow: none;
  transform: translateX(2px);
}
.script-item.active::before {
  opacity: 1;
  transform: scaleY(1);
  /* Active rail gets a faint glow */
  box-shadow: 0 0 8px rgba(15, 127, 255, 0.4);
}
.script-item-title,
.skill-item-name,
.kn-item-title {
  font-size: 13px;
  font-weight: 600;
}
.script-item-meta,
.kn-item-meta,
.skill-item-desc {
  font-size: 10.5px;
  letter-spacing: 0.01em;
}
/* Smaller chevron-style icon buttons inside the row */
.ic-btn {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* ----- Tier 2: Status row state dots -----
   Each dot is a colored circle whose color is driven by the parent
   .state-* class. Green pulses when voice is on, blue when scrolling,
   red on take (mic active), amber on paused. */
.status-row {
  /* Lift the row slightly and use a translucent base so the dots pop */
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-top: 1px solid var(--border);
  padding: 10px 24px;
  gap: 20px;
}
.status-item {
  gap: 8px;
  font-size: 12.5px;
}
.status-label {
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-item strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-mute);
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
/* Mic dot — red pulsing when voice is on */
.status-mic-item.live .status-dot {
  background: #e02929;
  box-shadow: 0 0 0 0 rgba(224, 41, 41, 0.7);
  animation: statusDotPulseRed 1.5s ease-in-out infinite;
}
@keyframes statusDotPulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 41, 41, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(224, 41, 41, 0); }
}
/* State dot — colored by current state */
.status-state-item.state-idle .status-dot {
  background: var(--text-mute);
}
.status-state-item.state-live .status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: statusDotPulseGreen 1.5s ease-in-out infinite;
}
@keyframes statusDotPulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}
.status-state-item.state-scrolling .status-dot {
  background: var(--brand-blue);
  box-shadow: 0 0 8px rgba(15, 127, 255, 0.55);
}
.status-state-item.state-paused .status-dot {
  background: #f59e0b;
  animation: statusDotPulseAmber 1.6s ease-in-out infinite;
}
@keyframes statusDotPulseAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}

/* ----- Tier 2: Modal restyling -----
   Heavier backdrop blur, softer/wider drop shadow, larger close button,
   subtle bounce-in animation. */
.modal-overlay {
  background: rgba(10, 16, 28, 0.45);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.modal {
  border-radius: 16px;
  border: 1px solid rgba(15, 127, 255, 0.10);
  box-shadow:
    0 30px 80px -20px rgba(15, 30, 60, 0.45),
    0 12px 30px -10px rgba(15, 127, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: modalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.modal-head {
  padding: 20px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  font-size: 17px;
  letter-spacing: -0.005em;
}
.modal-close {
  width: 40px;
  height: 40px;
  font-size: 16px;
  border-radius: 10px;
}
.modal-close:hover {
  transform: rotate(90deg) scale(1.05);
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
[data-theme='dark'] .modal,
[data-theme='studio'] .modal {
  border-color: rgba(15, 127, 255, 0.18);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 12px 30px -10px rgba(15, 127, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* ----- Tier 2: Toast restyling -----
   Pill shape, brand-blue background, slide-up entrance, soft glow. */
.toast {
  bottom: 36px;
  background: linear-gradient(180deg, var(--brand-blue), #0a6ce0);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.005em;
  box-shadow:
    0 12px 32px -8px rgba(15, 127, 255, 0.5),
    0 4px 10px -2px rgba(15, 127, 255, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  /* Override the old fade-only animation with a real slide-up */
  transform: translate(-50%, 16px);
}
.toast.show {
  animation: toastSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastSlideUp {
  0%   { opacity: 0; transform: translate(-50%, 24px) scale(0.92); }
  60%  { opacity: 1; transform: translate(-50%, -4px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%,  0)   scale(1); }
}

/* ============================================================
   v5.6 — Tier 4 swings
   ============================================================ */

/* ----- Tier 4a: Glassmorphic toolbar -----
   When the user has scrolled the stage past the top, the toolbar
   becomes a frosted-glass surface so the script peeks through. We
   key on a class added by JS once stage.scrollTop > 8. */
body.toolbar-glass .tp-toolbar {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom-color: rgba(15, 127, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(15, 127, 255, 0.05),
    0 12px 32px -16px rgba(15, 30, 60, 0.12);
}
[data-theme='dark'] body.toolbar-glass .tp-toolbar {
  background: rgba(10, 10, 10, 0.65);
}
[data-theme='studio'] body.toolbar-glass .tp-toolbar {
  background: rgba(0, 0, 0, 0.55);
  border-bottom-color: rgba(15, 127, 255, 0.16);
}
/* Also frost the status row sub-band so it doesn't read as opaque */
body.toolbar-glass .status-row {
  background: linear-gradient(180deg,
    rgba(248, 249, 250, 0.6) 0%,
    rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}
[data-theme='dark'] body.toolbar-glass .status-row,
[data-theme='studio'] body.toolbar-glass .status-row {
  background: linear-gradient(180deg,
    rgba(20, 20, 20, 0.6) 0%,
    rgba(10, 10, 10, 0.6) 100%);
}
/* Same treatment for the sidebar so the whole chrome reads cohesive */
body.toolbar-glass .tp-sidebar {
  background: rgba(248, 249, 250, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-right-color: rgba(15, 127, 255, 0.08);
}
[data-theme='dark'] body.toolbar-glass .tp-sidebar {
  background: rgba(20, 20, 20, 0.68);
}
[data-theme='studio'] body.toolbar-glass .tp-sidebar {
  background: rgba(6, 6, 6, 0.65);
}
/* Don't glass in overlay-mode — the user wants the underlying call visible,
   not a frosted version of the studio. */
body.overlay-mode.toolbar-glass .tp-toolbar,
body.overlay-mode.toolbar-glass .tp-sidebar,
body.overlay-mode.toolbar-glass .status-row {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Print never glasses */
body.printing .tp-toolbar,
body.printing .tp-sidebar,
body.printing .status-row {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ----- Tier 4b: Animated brand-star pulses when voice is on -----
   The ✦ in the sidebar lockup gently scales + glows whenever the mic
   is live. Hooked from JS via body.voice-live (set/cleared with the
   existing start/stop functions). */
.brand-star {
  display: inline-block;
  transition: text-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease;
  will-change: transform, text-shadow;
}
body.voice-live .brand-star {
  color: var(--brand-blue);
  text-shadow: 0 0 12px rgba(15, 127, 255, 0.7);
  animation: brandStarPulse 1.8s ease-in-out infinite;
}
@keyframes brandStarPulse {
  0%, 100% {
    transform: translateY(-1px) scale(1);
    text-shadow: 0 0 10px rgba(15, 127, 255, 0.55);
  }
  50% {
    transform: translateY(-1px) scale(1.18) rotate(8deg);
    text-shadow: 0 0 18px rgba(15, 127, 255, 0.95), 0 0 32px rgba(15, 127, 255, 0.45);
  }
}
/* Reduce motion: still color the star, but skip the animation. */
@media (prefers-reduced-motion: reduce) {
  body.voice-live .brand-star { animation: none; }
}

/* ----- Tier 4c: Subtle film-grain texture for Studio mode -----
   A soft monochrome noise overlay placed via ::after on the body when
   data-theme='studio'. Uses a tiny inline SVG (no extra network fetch)
   for crisp, scale-independent grain. Slowly drifts so it doesn't feel
   "stuck" like a single static texture. */
[data-theme='studio']::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: filmGrainDrift 8s steps(8) infinite;
}
@keyframes filmGrainDrift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 2%); }
  40%  { transform: translate(3%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(2%, 3%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme='studio']::after { animation: none; }
}
/* Don't grain when printing or in overlay mode */
body.printing [data-theme='studio']::after,
body.overlay-mode[data-theme='studio']::after {
  display: none;
}

/* ============================================================
   v5.7 — Room chip + Connect modal (multi-screen sync)
   ============================================================ */

/* ---- Toolbar chip (between sliders and utility zone) ---- */
.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: transform 0.12s ease, box-shadow 0.2s ease,
              border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(15, 127, 255, 0.02);
}
.room-chip:hover {
  border-color: var(--brand-blue);
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px -4px rgba(15, 127, 255, 0.22),
    0 1px 0 rgba(15, 127, 255, 0.04);
}
.room-chip:active { transform: translateY(0); }

.room-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-mute);
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.room-chip.status-connecting .room-chip-dot {
  background: #f59e0b;
  animation: roomChipPulse 1.4s ease-in-out infinite;
}
.room-chip.status-connected .room-chip-dot {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: roomChipGlow 2s ease-in-out infinite;
}
@keyframes roomChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
@keyframes roomChipGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

.room-chip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  gap: 1px;
}
.room-chip-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}
.room-chip-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* When in a room, the label gets the brand-blue tint */
.room-chip.status-connected .room-chip-label {
  color: var(--brand-blue);
}

/* ---- Connect modal ---- */
.connect-modal {
  max-width: 720px;
}
.connect-intro {
  background: var(--brand-blue-bg);
  border-left: 3px solid var(--brand-blue);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 18px;
  color: var(--text);
}
.connect-intro p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.connect-row {
  margin-bottom: 16px;
}
.connect-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.connect-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.connect-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.connect-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-bg);
}
.connect-hint {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 6px;
  line-height: 1.4;
}

/* ---- Share area (QR + status + participants) ---- */
.connect-share {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0 16px;
}
.connect-share-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: start;
}
.connect-share-qr {
  display: flex;
  justify-content: center;
  align-items: start;
}
.connect-qr-frame {
  width: 180px;
  height: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.1);
}
.connect-qr-frame img,
.connect-qr-frame canvas,
.connect-qr-frame svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.connect-qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-mute);
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  padding: 16px;
}
.connect-qr-placeholder i {
  font-size: 36px;
  color: var(--border);
}
.connect-share-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.connect-share-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.connect-share-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.connect-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.connect-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-mute);
}
.connect-status.connecting .connect-status-dot {
  background: #f59e0b;
  animation: roomChipPulse 1.4s ease-in-out infinite;
}
.connect-status.connected .connect-status-dot {
  background: #22c55e;
  animation: roomChipGlow 2s ease-in-out infinite;
}
.connect-status.connecting .connect-status-text { color: #f59e0b; }
.connect-status.connected .connect-status-text { color: #22c55e; }
.connect-link-row {
  display: flex;
  gap: 6px;
}
.connect-link {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.connect-link:focus { outline: none; border-color: var(--brand-blue); }
.connect-participants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.connect-participant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
}
.connect-participant.is-me {
  background: var(--brand-blue-bg);
  border-color: var(--brand-blue-soft);
  font-weight: 600;
}
.connect-participant-icon {
  color: var(--brand-blue);
  font-size: 11px;
}
.connect-voice-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #22c55e;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}
.connect-participant-empty {
  font-size: 12px;
  color: var(--text-mute);
  font-style: italic;
  padding: 6px 10px;
}
.connect-leave-btn {
  align-self: flex-start;
  font-size: 12px;
  padding: 7px 12px;
}
.connect-leave-btn:hover {
  border-color: #e02929;
  color: #e02929;
}

.connect-help {
  display: flex;
  gap: 10px;
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}
.connect-help i {
  color: var(--brand-blue);
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Responsive: stack QR + info on narrow screens */
@media (max-width: 580px) {
  .connect-share-grid {
    grid-template-columns: 1fr;
  }
  .connect-share-qr {
    justify-content: center;
  }
}