/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Warm, intimate palette — soft coral on deep warm black */
  --bg: #0a0606;
  --bg-glow-1: rgba(237, 119, 101, 0.08);
  --bg-glow-2: rgba(244, 160, 124, 0.04);
  --surface: rgba(40, 22, 18, 0.55);
  --surface-strong: rgba(48, 28, 22, 0.85);
  --border: rgba(244, 232, 224, 0.08);
  --border-strong: rgba(244, 232, 224, 0.16);

  --text: #f4e8e0;
  --text-dim: rgba(244, 232, 224, 0.55);
  --text-muted: rgba(244, 232, 224, 0.28);
  --text-faint: rgba(244, 232, 224, 0.14);

  --accent: #ed7765;
  --accent-warm: #f4a07c;
  --accent-deep: #d65a3f;
  --accent-glow: rgba(237, 119, 101, 0.35);
  --accent-glow-soft: rgba(237, 119, 101, 0.18);

  --card-bg: rgba(30, 16, 12, 0.82);
  --card-border: rgba(244, 232, 224, 0.07);

  --question: #ed7765;
  --keyword:  #f4a07c;
  --wrap_up:  #d65a3f;
  --closing:  #f0b87a;
  --breathe:  #c89889;
  --samantha: #f4e8e0;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  --radius: 1.125rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout breakpoints used in @media queries below — kept here as docs:
     - base (≤30em): phone column
     - tablet (≥640px): wider padding, centered content max-width
     - desktop (≥960px): max-width content + room for the orb beside chat */
}

/* Bump root font-size so every rem in the file resolves to a larger value.
   150% of the browser default (16) gives 24 — XXL. Change this single value
   to scale the whole UI up or down. */
html { font-size: 150%; }

html, body {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  --mic-level: 0;
}

/* Soft warm glow */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--bg-glow-1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--bg-glow-2), transparent 70%);
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%,
      rgba(237, 119, 101, calc(var(--mic-level) * 0.28)),
      transparent 65%);
  z-index: 0;
  transition: background 0.08s linear;
}

/* ── App shell — flex column, full viewport ─────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
}

/* ── Mode-based visibility ─────────────────────────────────────────────────
   body[data-mode="home"|"active"|"review"] gates which regions render.
   Keeps JS branching simple — set body.dataset.mode and CSS does the rest. */

/* Home — only the home section + header visible; orb/stage/pills/ask-bar hidden. */
body[data-mode="home"] #action-bar,
body[data-mode="home"] #stage,
body[data-mode="home"] #transcript-wrap,
body[data-mode="home"] #card-tray,
body[data-mode="home"] #bottom-bar,
body[data-mode="home"] #timer,
body[data-mode="home"] #metrics {
  display: none !important;
}

/* Active — full session UI; home hidden. */
body[data-mode="active"] #home,
body[data-mode="active"] #continue-btn {
  display: none !important;
}

/* Review — read-only past session. No live ask, no orb mic, but show transcript
   + a Continue button at the bottom. The orb still shows (dimmed) as the brand
   anchor, but mic viz is hidden. */
body[data-mode="review"] #home,
body[data-mode="review"] #ask-toggle,
body[data-mode="review"] #ask-form,
body[data-mode="review"] #mode-chip,
body[data-mode="review"] #mute-btn,
body[data-mode="review"] #pause-btn,
body[data-mode="review"] #stop-btn,
body[data-mode="review"] #audio-viz,
body[data-mode="review"] #live-caption {
  display: none !important;
}
body[data-mode="review"] #orb { opacity: 0.45; pointer-events: none; }
body[data-mode="review"] #orb-ring { display: none; }
body[data-mode="review"] #orb-label::after {
  content: ' · review';
  color: var(--accent-warm);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
#header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  gap: 0.625rem;
  padding: max(env(safe-area-inset-top), 0.625rem) 0.875rem 0.5rem;
  z-index: 10;
}

.icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 22, 18, 0.45);
  border: 0.0625rem solid var(--border);
  border-radius: 0.875rem;
  color: var(--text-dim);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  padding: 0;
}
.icon-btn:hover, .icon-btn:active {
  border-color: var(--border-strong);
  color: var(--text);
  background: rgba(48, 28, 22, 0.7);
}

.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  width: 1.125rem;
}
.hamburger-lines span {
  display: block;
  height: 0.1875rem;
  background: currentColor;
  border-radius: 0.0625rem;
}

#header-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  /* Containing block for the absolutely-positioned audio-viz canvas */
  position: relative;
}
#header-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}
#brand-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

#status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
}

#status-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--text-faint);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  flex-shrink: 0;
}
#status-dot.listening {
  background: var(--accent);
  box-shadow: 0 0 0.5rem var(--accent-glow), 0 0 1rem var(--accent-glow-soft);
}
#status-dot.processing {
  background: var(--accent-warm);
  box-shadow: 0 0 0.5rem rgba(244, 160, 124, 0.5);
}

#status-text {
  font-size: 0.8125rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#timer {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  font-weight: 400;
  white-space: nowrap;
}

#metrics {
  font-size: 0.6875rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-weight: 400;
  white-space: nowrap;
}
#metrics.warm { color: var(--accent-warm); }

/* ── Action bar ───────────────────────────────────────────────────────────── */
#action-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0.875rem 0.625rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 12;
}
#action-bar::-webkit-scrollbar { display: none; }

.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  min-height: 2.75rem;
  border-radius: 62.4375rem;
  background: rgba(40, 22, 18, 0.45);
  border: 0.0625rem solid var(--border);
  color: var(--text-dim);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.ab-btn:hover, .ab-btn:active {
  border-color: var(--border-strong);
  color: var(--text);
  background: rgba(48, 28, 22, 0.7);
}
/* Icons scale with the button's font-size — bump font, icon grows too. The
   width is generous enough to give emojis (🎙, 🔇, 🌐) the room they want
   while still keeping smaller text-glyph icons (○, ●) optically centred. */
.ab-btn .ab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125em;
  line-height: 1;
  width: 1.25em;
  height: 1.25em;
}
.ab-btn .ab-flag { font-size: 1.25em; line-height: 1; }
.ab-btn .ab-label { font-size: inherit; }

/* Mode-chip silent/voice icons. Using ○/● keeps the minimalist on-brand dots
   (rather than emojis like 💬/🔊) but at a larger size so the silent state
   isn't a barely-visible placeholder next to the chunky 🎙 emoji on the mic
   button. The pseudo-element gets its own font-size bump so it reads as a
   peer-weight icon. */
#mode-chip .ab-icon::before {
  font-size: 1.125em;
  line-height: 1;
}
#mode-chip[data-mode="silent"] .ab-icon::before { content: '○'; color: var(--text-dim); }
#mode-chip[data-mode="voice"] .ab-icon::before {
  content: '●';
  color: var(--accent);
  text-shadow: 0 0 0.375rem var(--accent-glow);
  animation: chip-breathe 2.4s ease-in-out infinite;
}
#mode-chip[data-mode="voice"] {
  background: rgba(237, 119, 101, 0.12);
  border-color: rgba(237, 119, 101, 0.45);
  color: var(--accent-warm);
  box-shadow: 0 0 0.875rem rgba(237, 119, 101, 0.18);
}
#mute-btn[data-muted="false"] .ab-icon::before { content: '🎙'; }
#mute-btn[data-muted="true"]  .ab-icon::before { content: '🔇'; }
#mute-btn[data-muted="true"] {
  background: rgba(214, 90, 63, 0.14);
  border-color: rgba(214, 90, 63, 0.5);
  color: var(--accent-deep);
}
#pause-btn[data-paused="true"] {
  background: rgba(237, 119, 101, 0.14);
  border-color: rgba(237, 119, 101, 0.5);
  color: var(--accent-warm);
}
.ab-btn.danger {
  background: rgba(214, 90, 63, 0.14);
  border-color: rgba(214, 90, 63, 0.5);
  color: var(--accent-deep);
}
.ab-btn.danger:hover, .ab-btn.danger:active {
  background: rgba(214, 90, 63, 0.22);
  border-color: rgba(214, 90, 63, 0.7);
  color: var(--accent-deep);
}
body.paused #orb {
  opacity: 0.35;
  filter: saturate(0.4);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
body.paused #orb-ring { opacity: 0; }
#lang-btn[data-lang="auto"] { color: var(--text-dim); }
#lang-btn[data-lang]:not([data-lang="auto"]):not([data-lang="en"]) {
  background: rgba(237, 119, 101, 0.1);
  border-color: rgba(237, 119, 101, 0.4);
  color: var(--accent-warm);
}

@keyframes chip-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Main scroll region ───────────────────────────────────────────────────── */
#main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Home (no active session) ─────────────────────────────────────────────── */
#home {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  text-align: center;
}
#home > * { width: 100%; max-width: min(32.5rem, 92vw); }

.home-hero {
  margin-top: 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.home-hero h1 {
  font-size: 2.125rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--text), var(--accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero p {
  font-size: 0.9375rem;
  color: var(--text-dim);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.big-cta {
  background: linear-gradient(135deg, var(--accent-warm), var(--accent));
  border: none;
  border-radius: 1.125rem;
  padding: 1rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #2a0e08;
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: 0.04em;
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 0.5rem 2rem rgba(237, 119, 101, 0.4);
  -webkit-tap-highlight-color: transparent;
}
.big-cta:active { transform: scale(0.98); }
.big-cta:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pre-start option stack. All three controls (start-muted toggle, model picker,
   language picker) are normalised to the same width, height, radius, and label
   typography so they read as one tidy column under the CTA. Without this, the
   model select's longer text creates a pill that's noticeably wider than the
   other two, breaking the centred layout. The container width is governed by
   the existing `#home > *` cap so both the CTA above and the option stack
   below resolve to the same width at every breakpoint. */
#overlay-options {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

#overlay-options > .ab-btn,
#overlay-options > .overlay-select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  border-radius: 0.875rem;
  justify-content: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.overlay-select {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  min-height: 2.75rem;
  border-radius: 0.875rem;
  background: rgba(40, 22, 18, 0.45);
  border: 0.0625rem solid var(--border);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.overlay-select select {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  outline: none;
  cursor: pointer;
  padding-right: 0.25rem;
  text-align-last: left;
}
.overlay-select select option {
  background: #1a0e0a;
  color: var(--text);
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
}

/* The emoji icons (brain, globe, mic) render at different visual sizes by
   default. Give them a fixed-width container so the labels in all three rows
   line up at the same X. */
#overlay-options .ab-icon,
#overlay-options .overlay-select > .ab-icon {
  width: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 20rem;
  font-weight: 300;
}

#home-sessions {
  margin-top: 0.75rem;
  text-align: left;
}
.section-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.625rem;
  padding-left: 0.25rem;
}
#home-session-list { display: flex; flex-direction: column; gap: 0.5rem; }

.session-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: rgba(40, 22, 18, 0.45);
  border: 0.0625rem solid var(--border);
  border-radius: 0.875rem;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  color: var(--text);
  text-align: left;
  width: 100%;
}
.session-row:hover, .session-row:active {
  border-color: var(--border-strong);
  background: rgba(48, 28, 22, 0.7);
}
.session-row.is-active {
  border-color: rgba(237, 119, 101, 0.5);
  background: rgba(237, 119, 101, 0.1);
}
.session-row .sr-glyph {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f4a07c 0%, #ed7765 22%, #b54a36 55%, #2a0e08 100%);
  box-shadow: inset 0 -0.25rem 0.5rem rgba(0,0,0,0.4);
}
.session-row .sr-body { flex: 1; min-width: 0; }
.session-row .sr-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-row .sr-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 0.125rem;
  font-variant-numeric: tabular-nums;
}
.session-row .sr-delete {
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 1.125rem;
  cursor: pointer;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.session-row .sr-delete:hover { color: var(--accent-deep); background: rgba(214, 90, 63, 0.12); }

.empty-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.75rem 0.25rem;
  text-align: center;
}
#home-empty.hidden, #drawer-empty.hidden { display: none; }

/* ── Transcript ───────────────────────────────────────────────────────────── */
#transcript-wrap {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.25rem 0.875rem 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#transcript-wrap.collapsed { display: none; }

#transcript {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 0.125rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  mask-image: linear-gradient(to bottom, transparent, black 1.125rem, black calc(100% - 1.125rem), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 1.125rem, black calc(100% - 1.125rem), transparent);
}
#transcript::-webkit-scrollbar { width: 0.25rem; }
#transcript::-webkit-scrollbar-thumb { background: rgba(237, 119, 101, 0.25); border-radius: 0.125rem; }

.transcript-line {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  max-width: 86%;
  font-size: 0.84375rem;
  line-height: 1.45;
  letter-spacing: 0.005em;
}
.transcript-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 0.25rem;
}
.transcript-label { font-weight: 600; }
.transcript-time  { opacity: 0.55; }

.transcript-bubble {
  padding: 0.5625rem 0.8125rem;
  border-radius: 0.875rem;
  background: rgba(40, 22, 18, 0.55);
  border: 0.0625rem solid var(--border);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.transcript-line.speaker-candidate,
.transcript-line.speaker-candidate-ask {
  align-self: flex-end;
  align-items: flex-end;
}
.transcript-line.speaker-candidate .transcript-bubble,
.transcript-line.speaker-candidate-ask .transcript-bubble {
  background: rgba(237, 119, 101, 0.16);
  border-color: rgba(237, 119, 101, 0.4);
  color: var(--accent-warm);
  border-bottom-right-radius: 0.25rem;
}
.transcript-line.speaker-candidate-ask .transcript-bubble {
  box-shadow: 0 0 1rem rgba(237, 119, 101, 0.18);
}
.transcript-line.speaker-samantha {
  align-self: flex-start;
  align-items: flex-start;
}
.transcript-line.speaker-samantha .transcript-bubble {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 0.25rem;
  /* Per-agent colour set inline by addTranscript() as --agent-color. The 3px
     accent on the leading edge gives each agent a recognisable badge without
     overwhelming the dark bubble. Falls back to a neutral tint when no agent
     colour is provided (e.g. interviewer rows reuse this rule). */
  border-left: 0.1875rem solid var(--agent-color, rgba(255, 255, 255, 0.18));
}
.transcript-line.speaker-samantha .transcript-label {
  color: var(--agent-color, var(--text-dim));
}
.transcript-line.speaker-interviewer {
  align-self: flex-start;
  align-items: flex-start;
}
.transcript-line.speaker-interviewer .transcript-bubble {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.25rem 0.25rem;
}

/* Tool-call + system rows. Rendered as muted centred system messages so the
   chat reads as "agent did X" between the back-and-forth, without competing
   with the candidate's and agent's own bubbles. The meta block (name + time)
   is hidden — the row IS the system note. */
.transcript-line.speaker-tool,
.transcript-line.speaker-system {
  align-self: center;
  align-items: center;
  max-width: 92%;
  margin: 0.125rem 0;
}
.transcript-line.speaker-tool .transcript-meta,
.transcript-line.speaker-system .transcript-meta {
  display: none;
}
.transcript-line.speaker-tool .transcript-bubble,
.transcript-line.speaker-system .transcript-bubble {
  background: transparent;
  border: 0.0625rem dashed var(--border);
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 0.625rem;
  text-align: center;
  font-style: italic;
  letter-spacing: 0.02em;
}
.transcript-line.speaker-system .transcript-bubble {
  /* Agent-switch banners get a solid outline in the active agent's colour
     so the "scene change" reads as a coloured handoff. */
  border-style: solid;
  border-color: var(--agent-color, rgba(237, 119, 101, 0.35));
  color: var(--agent-color, var(--accent-warm));
  font-style: normal;
}
.transcript-line.speaker-tool .transcript-bubble {
  border-color: color-mix(in srgb, var(--agent-color, var(--border)) 60%, transparent);
}

/* Agent-save inline name input. Stretches to fill the subrow alongside the
   confirm/cancel buttons; matches the same dark-pill aesthetic as the other
   .settings-* inputs. */
#agent-save-row { align-items: stretch; }
#agent-save-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.8125rem;
  background: rgba(40, 22, 18, 0.6);
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  padding: 0.375rem 0.625rem;
  outline: none;
}
#agent-save-row input:focus {
  border-color: var(--accent-warm);
}

/* Avatar prefix in the chat speaker meta. The meta block uses 0.625rem / 10px
   font and a faint colour for the timestamp; we override both here so the
   emoji renders at a usable size with full opacity (some emoji presentations
   alpha-blend with the parent colour and would otherwise look washed out). */
.transcript-meta .transcript-avatar {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  margin-right: 0.125rem;
  color: var(--text);
  opacity: 1;
  filter: saturate(1.15);
}

/* Agent edit row — a multi-field block that drops below the prompt textarea
   when the user clicks "save as new" or "edit agent". Stacked rows for the
   avatar/name/color fields plus a row of picker buttons, capped by an actions
   row (save / cancel). */
.agent-edit-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem 0;
  border-top: 0.0625rem dashed var(--border);
}
.agent-edit-field {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.agent-edit-field > label {
  flex: 0 0 4.5rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agent-edit-field > input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.875rem;
  background: rgba(40, 22, 18, 0.6);
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  padding: 0.375rem 0.625rem;
  outline: none;
}
.agent-edit-field > input:focus { border-color: var(--accent-warm); }
#agent-edit-avatar { flex: 0 0 3.5rem; text-align: center; font-size: 1.125rem; }

/* Voice picker — select + preview button on the same row */
#agent-edit-voice {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.875rem;
  background: rgba(40, 22, 18, 0.6);
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  padding: 0.375rem 0.625rem;
  outline: none;
}
#agent-edit-voice:focus { border-color: var(--accent-warm); }

/* Emoji picker — wraps to multiple rows on narrow viewports. Each button is
   a square tile with a thin border that goes solid + warm when selected. */
.agent-avatar-picker,
.agent-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 1 1 100%;
  padding-left: 4.5rem;   /* aligns under the input column */
  margin-top: 0.125rem;
}
.agent-avatar-option,
.agent-color-option {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--border);
  background: rgba(40, 22, 18, 0.5);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s var(--ease);
}
.agent-avatar-option:hover,
.agent-color-option:hover { border-color: var(--accent-warm); }
.agent-avatar-option.selected,
.agent-color-option.selected {
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 0.125rem rgba(237, 119, 101, 0.35);
}
.agent-color-option { font-size: 0; }

.agent-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.375rem;
  padding-top: 0.25rem;
}

/* Panel section header — "panel" label on the left, "+ add agent" button on the right. */
.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.panel-section-header > label {
  font-size: 0.8125rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.panel-section-actions {
  display: flex;
  gap: 0.375rem;
}

/* Roster list. Each row is a clickable card showing the agent's avatar, name,
   a built-in/custom tag, and inline edit/remove actions. The active agent
   gets a colored left border + glow so it's obvious who's speaking. */
#agent-list {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin-top: 0.25rem;
}
.agent-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.625rem;
  background: rgba(40, 22, 18, 0.45);
  border: 0.0625rem solid var(--border);
  border-left-width: 0.1875rem;
  border-left-color: var(--agent-color, var(--border));
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.agent-row:hover { background: rgba(48, 28, 22, 0.6); }
.agent-row.active {
  background: color-mix(in srgb, var(--agent-color, var(--accent-warm)) 10%, rgba(40, 22, 18, 0.6));
  box-shadow: 0 0 0 0.0625rem var(--agent-color, var(--accent-warm)),
              0 0 0.625rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 30%, transparent);
}
.agent-row-avatar {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(20, 12, 10, 0.7);
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.agent-row-name {
  flex: 1 1 auto;
  font-size: 0.8125rem;
  color: var(--text);
}
.agent-row-tag {
  font-size: 0.6875rem;
  color: var(--text-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agent-row-actions {
  display: flex;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.agent-row-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4375rem;
  background: rgba(20, 12, 10, 0.6);
  border: 0.0625rem solid var(--border);
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.agent-row-btn:hover { color: var(--text); border-color: var(--border-strong); }
.agent-row-btn.danger:hover {
  color: var(--accent-deep);
  border-color: rgba(214, 90, 63, 0.55);
  background: rgba(214, 90, 63, 0.12);
}

/* "+ add agent" picker — vertical list of out-of-panel options + a create-new
   row at the bottom. Hidden by default; toggled by the button. */
.agent-add-picker {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem;
  border: 0.0625rem dashed var(--border);
  border-radius: 0.625rem;
}
.agent-add-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(40, 22, 18, 0.4);
  border: 0.0625rem solid transparent;
  border-left: 0.1875rem solid var(--agent-color, var(--border));
  color: var(--text);
  font-family: var(--font);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.agent-add-option:hover { background: rgba(48, 28, 22, 0.65); border-color: var(--border-strong); }
.agent-add-option.create {
  border-left-color: var(--accent-warm);
  color: var(--accent-warm);
}

/* Sources panel — list of grounding material loaded for this room. Same
   visual language as the agent list above: rounded cards with the source
   kind on the left and a remove button on the right. */
#sources-list {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  margin-top: 0.25rem;
}
.source-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.625rem;
  background: rgba(40, 22, 18, 0.45);
  border: 0.0625rem solid var(--border);
  border-left-width: 0.1875rem;
  border-left-color: var(--source-color, var(--accent-warm));
}
.source-row .source-icon {
  display: inline-flex;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: rgba(20, 12, 10, 0.7);
  align-items: center; justify-content: center;
  font-size: 0.9rem; line-height: 1;
  flex: 0 0 auto;
}
.source-row .source-name { flex: 1 1 auto; font-size: 0.8125rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-row .source-meta { font-size: 0.6875rem; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; flex: 0 0 auto; }
.source-row .source-remove {
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.4375rem;
  background: rgba(20, 12, 10, 0.6);
  border: 0.0625rem solid var(--border);
  color: var(--text-dim);
  cursor: pointer; padding: 0; font-size: 0.9375rem; line-height: 1;
  flex: 0 0 auto;
}
.source-row .source-remove:hover { color: var(--accent-deep); border-color: rgba(214, 90, 63, 0.55); background: rgba(214, 90, 63, 0.12); }
.source-row.empty {
  border-style: dashed;
  color: var(--text-faint);
  justify-content: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Brief flash when a citation chip scrolls a source into view — pulses the
   row's accent so the user can see which source the chip pointed at. */
.source-row.flash {
  animation: source-flash 1.4s ease-out;
}
@keyframes source-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20%      { box-shadow: 0 0 0 0.125rem var(--accent-warm), 0 0 0.875rem rgba(237, 119, 101, 0.45); }
}

/* Inline citation chip rendered inside agent reply bubbles. Looks like a
   superscript pill of the source number — tappable, hover shows the source
   name via title attribute, click scrolls to it in the sources panel. */
.citation-chip {
  display: inline-block;
  margin: 0 0.125rem;
  padding: 0 0.3125rem;
  border-radius: 0.5rem;
  background: rgba(237, 119, 101, 0.15);
  border: 0.0625rem solid rgba(237, 119, 101, 0.4);
  color: var(--accent-warm);
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: baseline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.citation-chip:hover {
  background: rgba(237, 119, 101, 0.3);
  border-color: var(--accent-warm);
}

/* "grounded" checkbox on the panel header — left-aligned beside the section
   title. Uses the platform checkbox accent to stay consistent with the
   translation/transcript toggles in the same popover. */
.grounding-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.grounding-toggle input { accent-color: var(--accent); }

/* Inline URL/text input row + the hidden file picker trigger. */
#sources-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 0.8125rem;
  background: rgba(40, 22, 18, 0.6);
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  padding: 0.4375rem 0.625rem;
  outline: none;
}
#sources-input:focus { border-color: var(--accent-warm); }

.settings-tiny-hint {
  font-size: 0.6875rem;
  color: var(--text-faint);
  margin: 0.125rem 0 0;
  letter-spacing: 0.02em;
}

/* Drag-drop overlay — full-screen target that appears while a drag is in
   progress so the user has an unambiguous landing zone. Pointer events on
   so the drop fires here even when the drag started over a child element. */
#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 4, 3, 0.78);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}
#drop-overlay[hidden] { display: none; }
.drop-overlay-inner {
  border: 0.1875rem dashed var(--accent-warm);
  border-radius: 1.25rem;
  padding: 2.5rem 3rem;
  color: var(--accent-warm);
  text-align: center;
}
.drop-icon { font-size: 3rem; line-height: 1; margin-bottom: 0.5rem; }
.drop-text { font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Agent panel strip — fixed-height row of chips above the chat. Visible only
   in active mode (see body[data-mode] rules below). Horizontal scroll on
   narrow viewports so a panel of 6+ experts still fits. */
#agent-strip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
#agent-strip::-webkit-scrollbar { display: none; }

.agent-chip {
  /* Uniform-width chips so the panel reads as a tidy row regardless of how
     long each agent's name is. Long names truncate via text-overflow on the
     label, not by stretching the chip — keeps the visual rhythm. */
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  width: 9rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: 62.4375rem;
  background: rgba(40, 22, 18, 0.45);
  border: 0.0625rem solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.agent-chip .agent-chip-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-chip:hover { border-color: var(--border-strong); color: var(--text); }
.agent-chip.muted {
  /* Click-to-mute drops the chip's opacity, drops the agent's colour to
     grey, and adds a strike-through-style faint dot pattern so the muted
     state is unmistakable even on small screens. */
  opacity: 0.45;
  filter: saturate(0.4);
  border-color: var(--border) !important;
}
/* Speaking pulse — added to a chip / row while its agent's TTS audio is
   playing (chime-in or consult reply). Quick rhythmic ring so the user can
   see who's talking in a multi-voice panel. */
.agent-chip.speaking,
.agent-row.speaking {
  animation: speaking-pulse 1.1s ease-in-out infinite;
}
@keyframes speaking-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 60%, transparent),
                0 0 0.5rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 0.1875rem var(--agent-color, var(--accent-warm)),
                0 0 1.125rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 70%, transparent);
  }
}
.agent-chip.muted .agent-chip-avatar { background: rgba(20, 12, 10, 0.4); }
.agent-chip.muted:hover { opacity: 0.8; }
.agent-chip.active {
  /* The active agent's chip glows in their own colour — same swatch used for
     their chat bubble border-left, so the user can match speaker to chip. */
  border-color: var(--agent-color, var(--accent-warm));
  color: var(--agent-color, var(--text));
  background: color-mix(in srgb, var(--agent-color, var(--accent-warm)) 12%, rgba(40, 22, 18, 0.6));
  box-shadow: 0 0 0 0.0625rem var(--agent-color, var(--accent-warm)),
              0 0 0.875rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 35%, transparent);
  transform: translateY(-0.0625rem);
}
.agent-chip .agent-chip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(20, 12, 10, 0.6);
  font-size: 0.9rem;
  line-height: 1;
}
.agent-chip.active .agent-chip-avatar {
  background: color-mix(in srgb, var(--agent-color, var(--accent-warm)) 20%, rgba(20, 12, 10, 0.6));
}

/* Hide the strip on home and review modes — only relevant during a live
   session where switching agents has real effect. */
body[data-mode="home"]   #agent-strip,
body[data-mode="review"] #agent-strip {
  display: none;
}

/* Empty transcript hint (active mode with no lines yet) */
#transcript:empty::before {
  content: 'Mic is live. Your first transcript will appear here.';
  display: block;
  margin: auto;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-style: italic;
  text-align: center;
  padding: 1.5rem;
  letter-spacing: 0.02em;
}
body[data-mode="review"] #transcript:empty::before {
  content: 'No transcript saved for this session.';
}

/* Live caption */
#live-caption {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--accent-warm);
  letter-spacing: 0.01em;
  min-height: 1.375rem;
  padding: 0.125rem 0.875rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
  text-shadow: 0 0 1.125rem rgba(237, 119, 101, 0.35);
  transition: opacity 0.4s var(--ease);
  text-align: center;
  justify-content: center;
}
#live-caption:empty,
#live-caption.idle {
  opacity: 0.35;
}
#live-text { white-space: pre-wrap; }
#live-cursor {
  display: inline-block;
  width: 0.4375rem;
  height: 1em;
  margin-left: 0.125rem;
  background: var(--accent);
  border-radius: 0.0625rem;
  opacity: 0;
  transform: translateY(0.125rem);
}
#live-caption.active #live-cursor {
  opacity: 0.8;
  animation: caret-blink 1s steps(2, end) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ── Stage (live caption only — orb lives in the header now) ─────────────── */
#stage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.25rem 0 0.5rem;
  position: relative;
  z-index: 2;
}

#orb-area {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

/* Mic visualization is gigantic (280px) — keep it out of the header layout.
   The body background pulse + the orb's own breathing animation cover us. */
#audio-viz { display: none !important; }

/* Panel "talking heads" — compact row of agent avatars that replaces the
   single orb. Each head is a circle in the agent's brand colour. The active
   speaker scales up and breathes, so at a glance you see who's driving the
   conversation without scanning the bigger chip strip below the action bar. */
#heads-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3125rem;
  flex-wrap: wrap;
  max-width: 14rem;
}
.head {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: rgba(20, 12, 10, 0.6);
  border: 0.125rem solid color-mix(in srgb, var(--agent-color, var(--border)) 70%, transparent);
  font-size: 1.0625rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
  padding: 0;
  flex: 0 0 auto;
  opacity: 0.75;
  -webkit-tap-highlight-color: transparent;
}
.head:hover { border-color: var(--agent-color, var(--accent-warm)); opacity: 1; }
.head.active {
  border-color: var(--agent-color, var(--accent-warm));
  opacity: 1;
  transform: scale(1.18);
  animation: head-breathe 2.6s ease-in-out infinite;
}
@keyframes head-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0.0625rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 70%, transparent),
                0 0 0.625rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 0 0.125rem var(--agent-color, var(--accent-warm)),
                0 0 1.25rem color-mix(in srgb, var(--agent-color, var(--accent-warm)) 65%, transparent);
  }
}
/* Review mode is read-only — heads aren't tappable anyway, so hide them.
   On home we KEEP heads so the user sees their panel preview / can switch
   the default active agent before tapping Start. */
body[data-mode="review"] #heads-row { display: none; }

#orb-wrap {
  position: relative;
  width: 2.75rem; height: 2.75rem;
  flex-shrink: 0;
}
#orb-ring {
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow-soft) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
#orb-ring.visible { opacity: 1; animation: ring-breathe 3.2s ease-in-out infinite; }
@keyframes ring-breathe {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.12); opacity: 0.9; }
}

#orb {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f4a07c 0%, #ed7765 22%, #b54a36 55%, #2a0e08 100%);
  border: 0.0625rem solid rgba(237, 119, 101, 0.25);
  cursor: pointer;
  transition: all 0.5s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 2.5rem rgba(237, 119, 101, 0.15),
    inset 0 -1rem 2rem rgba(0, 0, 0, 0.5),
    inset 0 0.625rem 1.25rem rgba(244, 160, 124, 0.2);
}
#orb::before {
  content: '';
  position: absolute;
  top: 12%; left: 22%;
  width: 36%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 220, 200, 0.45), transparent 70%);
  filter: blur(0.25rem);
  pointer-events: none;
  z-index: 3;
}
#orb-soul {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}
#orb-iris {
  position: absolute;
  top: 50%; left: 50%;
  width: 18%; height: 18%;
  margin: -9% 0 0 -9%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 235, 215, 0.95) 0%,
    rgba(255, 200, 165, 0.55) 30%,
    rgba(237, 119, 101, 0) 70%);
  filter: blur(0.125rem);
  pointer-events: none;
  z-index: 4;
  transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.6s var(--ease), height 0.6s var(--ease), margin 0.6s var(--ease),
              opacity 0.5s var(--ease);
  will-change: transform;
}
#orb.listening #orb-iris { width: 22%; height: 22%; margin: -11% 0 0 -11%; }
#orb.thinking #orb-iris {
  opacity: 0.6;
  animation: iris-swirl 1.4s ease-in-out infinite;
}
@keyframes iris-swirl {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(8%, -6%); }
  50%      { transform: translate(-4%, 8%); }
  75%      { transform: translate(-8%, -4%); }
}
#orb.listening {
  border-color: rgba(244, 160, 124, 0.45);
  box-shadow:
    0 0 3.125rem rgba(237, 119, 101, 0.45),
    0 0 5.625rem rgba(237, 119, 101, 0.15),
    inset 0 -1rem 2rem rgba(0, 0, 0, 0.4),
    inset 0 0.625rem 1.25rem rgba(244, 200, 170, 0.35);
  animation: orb-pulse 4s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
#orb.voice {
  box-shadow:
    0 0 4.375rem rgba(237, 119, 101, 0.55),
    0 0 7.5rem rgba(237, 119, 101, 0.2),
    inset 0 -1rem 2rem rgba(0, 0, 0, 0.35),
    inset 0 0.625rem 1.5rem rgba(255, 220, 200, 0.45);
}

#orb-label {
  font-size: 0.6875rem;
  color: var(--text);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Card tray ────────────────────────────────────────────────────────────── */
#card-tray {
  position: absolute;
  bottom: 5rem;
  left: 0; right: 0;
  padding: 0 0.875rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.625rem;
  pointer-events: none;
  z-index: 20;
}

.card {
  background: var(--card-bg);
  border: 0.0625rem solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem 1rem 1.25rem;
  pointer-events: all;
  backdrop-filter: blur(1.5rem) saturate(1.2);
  -webkit-backdrop-filter: blur(1.5rem) saturate(1.2);
  transform: translateY(1.75rem) scale(0.94);
  opacity: 0;
  animation: card-in 0.5s var(--ease) forwards;
  position: relative;
  overflow: hidden;
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
  box-shadow: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.45);
}
.card:not(.fresh) {
  opacity: 0.72;
  filter: saturate(0.85);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0.1875rem; height: 100%;
  border-radius: 0.1875rem 0 0 0.1875rem;
  transition: width 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card.fresh::before {
  width: 0.25rem;
  box-shadow: 0 0 0.875rem currentColor;
}
.card.type-question::before  { background: var(--question);  color: var(--question); }
.card.type-keyword::before   { background: var(--keyword);   color: var(--keyword); }
.card.type-wrap_up::before   { background: var(--wrap_up);   color: var(--wrap_up); }
.card.type-closing::before   { background: var(--closing);   color: var(--closing); }
.card.type-breathe::before   { background: var(--breathe);   color: var(--breathe); }
.card.type-samantha::before  { background: var(--samantha);  color: var(--samantha); }
@keyframes card-in {
  0%   { transform: translateY(1.75rem) scale(0.94); opacity: 0; }
  55%  { transform: translateY(-0.1875rem) scale(1.012); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.card.fresh {
  border-color: rgba(237, 119, 101, 0.45);
  box-shadow:
    0 0 0 0.0625rem rgba(237, 119, 101, 0.3),
    0 0.75rem 2.25rem rgba(237, 119, 101, 0.22),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.4);
  animation:
    card-in 0.5s var(--ease) forwards,
    card-fresh-fade 2.4s ease-out 0.5s forwards;
}
@keyframes card-fresh-fade {
  0%   { border-color: rgba(237, 119, 101, 0.45);
         box-shadow: 0 0 0 0.0625rem rgba(237,119,101,0.3), 0 0.75rem 2.25rem rgba(237,119,101,0.22), 0 0.25rem 0.75rem rgba(0,0,0,0.4); }
  100% { border-color: var(--card-border);
         box-shadow: 0 0 0 0.0625rem transparent, 0 0 0 transparent, 0 0.5rem 1.875rem rgba(0,0,0,0.45); }
}
.card.fresh::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(244, 160, 124, 0.14), transparent);
  animation: shimmer 1.3s ease-out 0.2s 1;
  pointer-events: none;
}
@keyframes shimmer { to { left: 120%; } }
.card.dismissing { animation: card-out 0.24s var(--ease) forwards; }
@keyframes card-out { to { transform: translateY(0.25rem) scale(0.97); opacity: 0; } }

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--text);
  letter-spacing: 0.01em;
}
.card-body {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.55;
  white-space: pre-wrap;
  font-weight: 300;
}
.card-dismiss {
  position: absolute;
  top: 0.625rem; right: 0.75rem;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 1.375rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  font-family: var(--font);
}
.card-dismiss:hover { color: var(--text-dim); }
.card-timer-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 0.125rem;
  background: linear-gradient(to right, var(--accent), var(--accent-warm));
  width: 100%;
  transform-origin: left;
  opacity: 0.6;
}

/* ── Bottom bar ───────────────────────────────────────────────────────────── */
#bottom-bar {
  flex: 0 0 auto;
  padding: 0.75rem 0.875rem calc(0.875rem + env(safe-area-inset-bottom, 0rem));
  background: linear-gradient(to top, rgba(10, 6, 6, 0.98) 65%, rgba(10, 6, 6, 0.85) 90%, transparent);
  z-index: 30;
  position: relative;
}

#ask-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 1.125rem;
  background: rgba(30, 16, 12, 0.95);
  border: 0.0625rem solid rgba(237, 119, 101, 0.35);
  border-radius: 1.375rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow:
    0 0.5rem 1.5rem rgba(0, 0, 0, 0.45),
    inset 0 0 0 0.0625rem rgba(244, 232, 224, 0.02);
}
#ask-form:focus-within {
  border-color: var(--accent-warm);
  box-shadow:
    0 0.5rem 1.75rem rgba(237, 119, 101, 0.28),
    inset 0 0 0 0.0625rem rgba(237, 119, 101, 0.18);
}

#ask-prefix {
  color: var(--accent);
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0.85;
  flex-shrink: 0;
  user-select: none;
}

#ask-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.625rem 0.25rem;
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font);
  font-weight: 400;
  outline: none;
  caret-color: var(--accent);
  min-width: 0;
}
#ask-input::placeholder { color: rgba(244, 232, 224, 0.4); }

#ask-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent));
  border: none;
  border-radius: 999px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: #2a0e08;
  cursor: pointer;
  font-family: var(--font);
  flex-shrink: 0;
  box-shadow: 0 0.25rem 0.875rem rgba(237, 119, 101, 0.45);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
#ask-send svg { display: block; }
#ask-send:hover { box-shadow: 0 0.375rem 1.375rem rgba(237, 119, 101, 0.6); }
#ask-send:active { transform: scale(0.94); }
#ask-send:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

#continue-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--accent-warm), var(--accent));
  border: none;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  color: #2a0e08;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: 0.03em;
  box-shadow: 0 0.5rem 1.75rem rgba(237, 119, 101, 0.4);
  -webkit-tap-highlight-color: transparent;
}
#continue-btn:active { transform: scale(0.98); }

/* ── Drawer (session list) ────────────────────────────────────────────────── */
#drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
#drawer-scrim.open {
  opacity: 1;
  pointer-events: all;
}
#drawer-scrim[hidden] { display: none; }

#drawer {
  position: fixed;
  top: 0; bottom: 0;
  left: 0;
  width: min(86vw, 21.25rem);
  background: rgba(16, 9, 8, 0.98);
  backdrop-filter: blur(1.5rem) saturate(1.4);
  -webkit-backdrop-filter: blur(1.5rem) saturate(1.4);
  border-right: 0.0625rem solid rgba(237, 119, 101, 0.18);
  z-index: 95;
  padding: max(env(safe-area-inset-top), 0.875rem) 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateX(-105%);
  transition: transform 0.28s var(--ease);
  box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.6);
}
#drawer.open { transform: translateX(0); }
#drawer[hidden] { display: none; }

#drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.125rem 0.25rem 0.25rem;
}
#drawer-header h2 {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
}

.big-cta-secondary {
  background: rgba(237, 119, 101, 0.12);
  border: 0.0625rem solid rgba(237, 119, 101, 0.45);
  border-radius: 0.875rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-warm);
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: 0.04em;
  transition: all 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.big-cta-secondary:hover { background: rgba(237, 119, 101, 0.2); color: var(--text); }

#drawer-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-right: 0.125rem;
}
#drawer-list::-webkit-scrollbar { width: 0.25rem; }
#drawer-list::-webkit-scrollbar-thumb { background: rgba(237, 119, 101, 0.25); border-radius: 0.125rem; }

/* ── Popovers ─────────────────────────────────────────────────────────────── */
.popover {
  position: fixed;
  top: 5.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-0.375rem);
  min-width: 13.75rem;
  max-height: calc(100dvh - 6.875rem);
  overflow-y: auto;
  background: rgba(22, 12, 10, 0.96);
  backdrop-filter: blur(1.75rem) saturate(1.4);
  -webkit-backdrop-filter: blur(1.75rem) saturate(1.4);
  border: 0.0625rem solid rgba(237, 119, 101, 0.22);
  border-radius: 1.125rem;
  padding: 0.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6), 0 0 0 0.0625rem rgba(244, 232, 224, 0.04);
}
.popover:not(.hidden) {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

#lang-menu {
  left: auto;
  right: 0.75rem;
  transform: translateY(-0.375rem);
  min-width: 12.5rem;
}
#lang-menu:not(.hidden) { transform: translateY(0); }

#settings-menu {
  left: auto;
  right: 0.75rem;
  transform: translateY(-0.375rem);
  min-width: 18.75rem;
  max-width: min(27.5rem, 92vw);
  padding: 0.75rem;
}
#settings-menu:not(.hidden) { transform: translateY(0); }

.lang-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: none;
  border-radius: 0.75rem;
  color: var(--text);
  font-size: 0.9375rem;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.lang-opt:hover, .lang-opt:active { background: rgba(237, 119, 101, 0.1); }
.lang-opt > span:first-child { font-size: 1.125rem; }
.lang-opt.selected {
  background: rgba(237, 119, 101, 0.15);
  color: var(--accent-warm);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.375rem;
  border-bottom: 0.0625rem solid var(--border);
}
.settings-row:last-of-type { border-bottom: none; }
.settings-row label {
  font-size: 0.8125rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  /* Fixed-width label slot so every row's control starts at the same X — the
   * row reads as a clean two-column form instead of selects with mismatched
   * widths driven by their own content. */
  flex: 0 0 6.5rem;
}
.settings-row select, .settings-row input[type="checkbox"] {
  font-family: var(--font);
  font-size: 0.875rem;
  background: rgba(40, 22, 18, 0.6);
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  padding: 0.375rem 0.625rem;
  cursor: pointer;
}
/* All selects fill the row's remaining width so every row's right edge aligns
   and the chevron is always at the same position. min-width:0 lets the select
   shrink below its widest-option natural width — without it, the mic/speaker
   pickers blow the row out (their option labels can be 40+ characters). */
.settings-row select {
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
}
.settings-row input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  accent-color: var(--accent);
}
.settings-row.stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.settings-row textarea {
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.4;
  background: rgba(40, 22, 18, 0.6);
  border: 0.0625rem solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  padding: 0.5rem 0.625rem;
  resize: vertical;
  min-height: 5.625rem;
  width: 100%;
  box-sizing: border-box;
}
.settings-row textarea::placeholder { color: var(--text-dim); opacity: 0.6; }
.settings-subrow {
  display: flex;
  gap: 0.375rem;
  justify-content: flex-end;
}
.settings-action.small {
  margin-top: 0;
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
}
.settings-action {
  margin-top: 0.375rem;
  background: rgba(237, 119, 101, 0.08);
  border: 0.0625rem solid rgba(237, 119, 101, 0.3);
  color: var(--accent-warm);
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
}
.settings-action:hover { background: rgba(237, 119, 101, 0.15); }
.settings-action.subtle {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}
.settings-action.subtle:hover { background: rgba(40, 22, 18, 0.5); color: var(--text); }
.settings-action.danger {
  background: rgba(214, 90, 63, 0.10);
  border-color: rgba(214, 90, 63, 0.45);
  color: var(--accent-deep);
}
.settings-action.danger:hover { background: rgba(214, 90, 63, 0.22); }

.settings-hint {
  font-size: 0.6875rem;
  color: var(--accent-warm);
  letter-spacing: 0.03em;
  padding: 0.25rem 0.375rem 0.375rem;
  text-align: center;
}
.settings-hint.hidden { display: none; }
/* Prompt-editor status — sits in the subrow next to the apply button, so we
   left-align it instead of centring like the standalone hint. Tones drive the
   colour: pending = dim text-warm, done = accent green-ish (kept warm here
   to stay on-brand). Empty string clears the line. */
.settings-subrow .settings-hint {
  flex: 1;
  text-align: left;
  padding: 0;
  color: var(--text-dim);
}
.settings-subrow .settings-hint[data-tone="pending"] { color: var(--accent-warm); }
.settings-subrow .settings-hint[data-tone="done"]    { color: var(--accent); }

/* ── Tablet (≥640px) — more breathing room ───────────────────────────────── */
@media (min-width: 40em) {
  #header { padding: max(env(safe-area-inset-top), 0.875rem) 1.25rem 0.625rem; }
  #status-text, #timer { font-size: 0.875rem; }
  #metrics { font-size: 0.75rem; }

  #orb-wrap, #orb { width: 3rem; height: 3rem; }
  #orb-label { font-size: 0.75rem; }

  #action-bar { padding: 0.375rem 1.25rem 0.75rem; gap: 0.625rem; }
  .ab-btn { padding: 0.6875rem 1.125rem; min-height: 3rem; font-size: 0.875rem; }
  #agent-strip { padding: 0.25rem 1.25rem 0.5rem; gap: 0.4375rem; }

  #home { padding: 2rem 1.5rem 2rem; gap: 1.375rem; }
  .home-hero { margin-top: 6vh; }
  .home-hero h1 { font-size: 2.5rem; }
  .home-hero p { font-size: 1.0625rem; }

  #transcript-wrap { padding: 0.375rem 1.375rem 0; }
  .transcript-line { font-size: 0.90625rem; }

  #live-caption { font-size: 1.125rem; padding: 0.25rem 1.375rem 0; }

  #bottom-bar { padding: 0.875rem 1.375rem calc(1rem + env(safe-area-inset-bottom, 0rem)); }
  #ask-form { padding: 0.5rem 0.5rem 0.5rem 1.25rem; border-radius: 1.5rem; }
  #ask-input { font-size: 1.0625rem; padding: 0.6875rem 0.25rem; }
  #ask-send { width: 3rem; height: 3rem; }
  #card-tray { padding: 0 1.375rem; bottom: 5.75rem; }
}

/* ── Desktop (≥960px) — bigger chat area, max-width content ──────────────── */
@media (min-width: 60em) {
  #header { padding: 1.125rem 1.75rem 0.75rem; }
  #status-text, #timer { font-size: 0.9375rem; }
  #metrics { font-size: 0.75rem; }

  #orb-wrap, #orb { width: 3.25rem; height: 3.25rem; }
  #orb-label { font-size: 0.8125rem; letter-spacing: 0.3em; }

  #action-bar {
    padding: 0.375rem 1.75rem 0.875rem;
    gap: 0.75rem;
    justify-content: center;
  }
  .ab-btn { padding: 0.75rem 1.25rem; min-height: 3rem; font-size: 0.875rem; }

  /* Match action-bar centring on desktop so the panel strip doesn't bunch at
     the left edge while the action bar above it is centred (one of the early
     bug reports). Same horizontal padding so both rows align edge-to-edge. */
  #agent-strip {
    padding: 0.25rem 1.75rem 0.625rem;
    gap: 0.5rem;
    justify-content: center;
  }

  /* Center home + transcript at a comfortable reading width. */
  #home { padding: 3rem 1.75rem 2.5rem; gap: 1.75rem; }
  #home > * { max-width: min(40rem, 92vw); }
  .home-hero { margin-top: 8vh; }
  .home-hero h1 { font-size: 3rem; }
  .home-hero p { font-size: 1.1875rem; }
  .big-cta { padding: 1.125rem 2.25rem; font-size: 1.0625rem; }

  #transcript-wrap {
    padding: 0.5rem 0 0;
    align-items: center;
  }
  #transcript {
    width: 100%;
    max-width: min(47.5rem, 92vw);
    padding: 0.75rem 1.5rem 1rem;
  }
  .transcript-line { font-size: 0.9375rem; max-width: 78%; }
  .transcript-bubble { padding: 0.625rem 0.875rem; border-radius: 1rem; }

  #live-caption { font-size: 1.1875rem; }

  #stage { padding: 0.5rem 0 0.75rem; gap: 0.625rem; }

  #bottom-bar { padding: 0.875rem 1.75rem calc(1.25rem + env(safe-area-inset-bottom, 0rem)); }
  #bottom-bar > * {
    max-width: min(47.5rem, 92vw);
    margin: 0 auto;
  }
  #ask-form { padding: 0.5rem 0.5rem 0.5rem 1.375rem; }
  #ask-input { font-size: 1.0625rem; }
  #card-tray { padding: 0; bottom: 6.25rem; left: 50%; transform: translateX(-50%); width: 100%; max-width: min(47.5rem, 92vw); }
}

/* ── Extra-wide (≥1280px) — keep content centered, don't sprawl ───────── */
@media (min-width: 80em) {
  #home > * { max-width: min(45rem, 92vw); }
  #transcript { max-width: min(51.25rem, 92vw); }
  #bottom-bar > * { max-width: min(51.25rem, 92vw); }
  #card-tray { max-width: min(51.25rem, 92vw); }
}

/* ── Mobile fine-tune (≤380px) ────────────────────────────────────────────── */
@media (max-width: 23.75em) {
  .home-hero h1 { font-size: 1.75rem; }
  .home-hero p { font-size: 0.8125rem; }
  .big-cta { padding: 0.875rem 1.25rem; font-size: 0.9375rem; }
  #orb-wrap, #orb { width: 2.375rem; height: 2.375rem; }
  #orb-label { font-size: 0.625rem; letter-spacing: 0.22em; }
  .ab-btn { padding: 0.5rem 0.75rem; min-height: 2.5rem; font-size: 0.75rem; }
  #pause-btn .ab-label { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}