@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-var-latin.woff2') format('woff2');
}

:root {
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  --bg: #f9f8f6;                              /* background_neutral_secondary */
  --bg-surface: #ffffff;                      /* background_neutral_primary */
  --bg-inset: #e8e6e1;                        /* background_neutral_tertiary */

  --text-primary: #232e2e;                    /* text_neutral_primary_default */
  --text-secondary: #545e5e;                  /* text_neutral_secondary_default */
  --text-muted: #6d7574;                      /* text_neutral_tertiary_default */
  --text-on-accent: #ffffff;                  /* text_neutralReverse_primary_default */

  --accent: #007b34;                          /* fill_brand_primary_default */
  --accent-deep: #00491f;                     /* fill_brand_secondary_default */
  --accent-tint: #bfe9d1;                     /* fill_brand_tertiary_default */
  --accent-border: #00bd4f;                   /* border_brand_tertiary_default */
  --accent-border-strong: #007b34;            /* border_brand_primary_default */
  --accent-ring: rgba(0, 123, 52, 0.3);       /* derived from fill_brand_primary_default */
  --accent-ring-strong: rgba(0, 123, 52, 0.6);

  --info-fill: #c9eeac;                       /* fill_info_secondary_default */
  --info-fill-strong: #9be58a;                /* fill_info_secondary_hover */
  --info-border: #306e68;                     /* border_info_primary_default */

  --positive: #306e68;                        /* fill_info_primary_default */
  --positive-tint: rgba(48, 110, 104, 0.12);  /* derived from fill_info_primary_default */
  --positive-ring-fade: rgba(48, 110, 104, 0.06);

  --warning: #8e5f4d;                         /* fill_warning_secondary_default */
  --warning-fill: #ffe280;                    /* fill_warning_primary_default */
  --warning-border: #b57d5c;                  /* border_warning_primary_default */

  --negative: #ab2722;                        /* text_negative_primary_default */
  --negative-hover: #851f1c;                  /* text_negative_primary_hover */
  --negative-fill: #fac3c1;                   /* fill_negative_secondary_default */
  --negative-border: #fac3c1;                 /* fill_negative_secondary_default */
  --negative-border-strong: #ab2722;          /* border_negative_primary_default */

  --border: #c8c9c5;                          /* border_neutral_secondary_default */
  --border-strong: #a2a6a4;                   /* border_neutral_secondary_hover */
  --border-stronger: #545e5e;                 /* border_neutral_primary_hover */
  --input-border: #6d7574;                    /* component_input_border_neutral_primary_default */
  --fill-hover: rgba(35, 46, 46, 0.1);        /* fill_darkOpacity_secondary_default */
  --fill-active: rgba(35, 46, 46, 0.2);       /* fill_darkOpacity_tertiary_default */

  --radius-sm: 4px;                           /* radius.sm */
  --radius-md: 6px;                           /* radius.md */
  --radius-lg: 16px;                          /* radius.lg */
  --radius-pill: 999px;                       /* radius.pill */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}

/* ── Screens ── */
.screen {
  display: none;
  position: fixed;
  inset: 0;
}
.screen.active {
  display: flex;
}

/* ── Card screens (gate, consent, setup, complete) ── */
/* No justify-content here: on an overflowing column flex container it strands
   the top of the card, because browsers will not scroll into start-side
   overflow. The cards center with margin-block: auto, which collapses to 0
   once content overflows. */
#screen-gate,
#screen-consent,
#screen-setup,
#screen-complete {
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  overflow-y: auto;
}

/* ── Setup Screen ── */
.setup-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  width: 100%;
  max-width: 560px;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.setup-logo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setup-logo h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.setup-logo p {
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.setup-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field input,
.field textarea {
  background: var(--bg-surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 16px;
  outline: none;
  resize: none;
  transition: border-color 0.2s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent-border-strong);
}

.field textarea {
  min-height: 80px;
  line-height: 1.5;
}

.field-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.field-note strong {
  color: var(--text-secondary);
}

/* Session preview block on setup screen */
.session-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.preview-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.preview-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.btn-primary {
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text-on-accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.1px;
  font-weight: 600;
  padding: 14px 24px;
  transition: opacity 0.2s, transform 0.1s;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-primary:active {
  transform: scale(0.98);
}

/* ── Consent Screen ── */
.consent-card {
  max-width: 600px;
}

.consent-card.gate-card {
  max-width: 480px;
  text-align: center;
}

#gate-loading {
  color: var(--text-muted);
  margin-top: 24px;
  font-size: 16px;
}

#gate-error {
  display: none;
  color: var(--negative);
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.6;
}

#gate-hint {
  display: none;
  color: var(--text-muted);
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
}

#voice-field {
  display: none;
}

.consent-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.consent-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.consent-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  padding-top: 1px;
}

.consent-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.consent-item p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

.consent-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.consent-actions .btn-ghost {
  text-align: center;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.1px;
  padding: 8px 16px;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.voice-test-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-test-row select {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
}

.demo-banner {
  background: var(--info-fill);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 14px;
  display: none;
}

.browser-warning {
  background: var(--warning-fill);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 14px;
  display: none;
}

/* ── Session Screen ── */
#screen-session {
  flex-direction: column;
}

.session-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.session-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.session-top-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.phase-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  transition: opacity 0.3s;
}

.session-pause-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.1px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.session-pause-btn:hover {
  background: var(--fill-hover);
  border-color: var(--border-stronger);
  color: var(--text-primary);
}

.session-pause-btn.active {
  background: var(--fill-active);
  border-color: var(--border-stronger);
  color: var(--text-primary);
}

.session-skip-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.1px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.session-skip-btn:hover {
  background: var(--fill-hover);
  border-color: var(--border-stronger);
  color: var(--text-primary);
}

.session-end-btn {
  background: transparent;
  border: 1px solid var(--negative-border);
  color: var(--negative);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.1px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.session-end-btn:hover {
  background: var(--negative-fill);
  border-color: var(--negative-border-strong);
  color: var(--negative-hover);
}

/* Session progress bar */
.session-progress {
  height: 2px;
  background: var(--bg-inset);
  flex-shrink: 0;
}

.session-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 1.2s ease;
}

/* Thinking indicator (shown while waiting for API response) */
.coach-thinking {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 40px 0 20px;
}

.coach-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: thinking-dot 1.2s ease-in-out infinite;
}

.coach-thinking span:nth-child(2) { animation-delay: 0.2s; }
.coach-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* Error state in coach messages */
.coach-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0;
}

.coach-error p {
  font-size: 14px;
  color: var(--text-secondary);
}

.coach-error button {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.1px;
  padding: 8px 20px;
  transition: border-color 0.2s, color 0.2s;
}

.coach-error button:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Your turn prompt */
.coach-your-turn {
  font-family: inherit;
  font-size: 14px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  letter-spacing: 0.3px;
  animation: sentence-in 0.4s ease forwards;
  opacity: 0;
}

/* Pause indicator (shown during intentional silences in script) */
.coach-pause {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text-secondary);
  letter-spacing: 8px;
  text-align: center;
  animation: pause-breathe 2.4s ease-in-out infinite;
  padding: 8px 0;
}

@keyframes pause-breathe {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

/* Coach messages — scrollable caption area */
.coach-messages {
  flex: 1;
  overflow-y: auto;
  padding: 48px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  scroll-behavior: smooth;
  /* Fade out top edge so older text recedes naturally */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 100%);
}

.coach-messages::-webkit-scrollbar { width: 4px; }
.coach-messages::-webkit-scrollbar-track { background: transparent; }
.coach-messages::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; }

.coach-sentence {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.8;
  color: var(--text-primary);
  text-align: center;
  max-width: 580px;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(10px);
  animation: sentence-in 0.25s ease forwards;
}

@keyframes sentence-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Coach orb */
.coach-orb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent), var(--accent-deep));
  position: relative;
  flex-shrink: 0;
}

.coach-orb::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-ring);
  animation: orb-pulse 3s ease-in-out infinite;
}

@keyframes orb-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.04); }
}

.coach-orb.speaking::after {
  animation: orb-speak 0.8s ease-in-out infinite;
  border-color: var(--accent-ring-strong);
}

@keyframes orb-speak {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 1; }
}

.coach-orb.listening::after {
  animation: orb-listen 1.4s ease-in-out infinite;
  border-color: var(--positive);
}

@keyframes orb-listen {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.06); opacity: 0.9; }
}

/* Status */
.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.3s;
}

.status-row.speaking .status-dot {
  background: var(--accent);
  animation: dot-pulse 0.8s ease-in-out infinite;
}

.status-row.listening .status-dot {
  background: var(--positive);
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.status-row.paused .status-dot {
  background: var(--text-muted);
}

.status-row.paused #status-label { color: var(--text-secondary); }

.status-row.processing .status-dot {
  background: var(--warning);
  animation: dot-pulse 0.6s ease-in-out infinite;
}

.status-row.error .status-dot {
  background: var(--negative);
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

#status-label {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  transition: color 0.3s;
}

.status-row.speaking #status-label { color: var(--accent); }
.status-row.listening #status-label { color: var(--positive); }
.status-row.processing #status-label { color: var(--warning); }

/* User text */
.user-text-wrap {
  max-width: 560px;
  width: 100%;
  text-align: center;
  min-height: 32px;
}

#user-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  opacity: 0.8;
}

/* Session bottom */
.session-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 28px;
  border-top: 1px solid var(--border);
}

.mic-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  position: relative;
  outline: none;
}

.mic-button:hover {
  border-color: var(--text-muted);
}

.mic-button.listening {
  border-color: var(--positive);
  background: var(--positive-tint);
  box-shadow: 0 0 0 8px var(--positive-tint);
  animation: mic-ring 1.6s ease-in-out infinite;
}

@keyframes mic-ring {
  0%, 100% { box-shadow: 0 0 0 8px var(--positive-tint); }
  50% { box-shadow: 0 0 0 14px var(--positive-ring-fade); }
}

.mic-button svg {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.mic-button.listening svg { color: var(--positive); }

/*
 * .off and .disabled render identically on purpose. They differ only in whether
 * a click lands, and the hint text is what tells the participant which one they
 * are looking at.
 *
 * .off is the participant's own mute, or a recognizer that failed and can be
 * restarted — both states they have to be able to leave, so NO pointer-events
 * rule here.
 *
 * .disabled is the coach's turn or a permanently blocked microphone. On the
 * coach's turn a click is not inert: it would reach setMuted and arm a mute that
 * survives to the next yield, because nothing clears the flag there. Withholding
 * that is deliberate — the mic is an invitation, and it must not read as one
 * while the coach holds the turn. The participant can still mute at the yield.
 */
.mic-button.off { opacity: 0.3; }
.mic-button.disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.mic-hint {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

/* Text input row in session */
.text-input-row {
  width: 100%;
  max-width: 520px;
  display: none;
}

#session-text-input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 18px;
  outline: none;
  transition: border-color 0.2s;
}

#session-text-input::placeholder {
  color: var(--text-muted);
}

#session-text-input:focus {
  border-color: var(--accent-border-strong);
}

/* ── Complete Screen ── */
.complete-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  width: 100%;
  max-width: 640px;
  margin-block: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.complete-icon {
  width: 52px;
  height: 52px;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.complete-card h2 {
  font-size: 22px;
  font-weight: 600;
}

.complete-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.complete-actions {
  display: flex;
  gap: 12px;
}

.complete-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--bg-inset);
  border-radius: var(--radius-md);
}

.complete-section h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.complete-section p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.complete-section p strong,
.complete-card p strong {
  color: var(--text-primary);
  font-weight: 600;
}

.complete-meta {
  font-style: italic;
}

.complete-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.complete-list li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Live mode (gpt-live-1): the operator console ── */
#live-status-label {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.status-row.speaking #live-status-label { color: var(--accent); }
.status-row.listening #live-status-label { color: var(--positive); }
.status-row.processing #live-status-label { color: var(--warning); }

.live-phase-marks {
  display: flex;
  gap: 4px;
}

.live-phase-marks button {
  width: 28px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

.live-phase-marks button:hover {
  background: var(--fill-hover);
  color: var(--text-primary);
}

.live-phase-marks button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.live-phase-cue {
  flex-shrink: 0;
  padding: 8px 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border-bottom: 1px solid var(--accent-border);
}

.live-checklist {
  flex-shrink: 0;
  padding: 6px 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  user-select: text;
}

.live-checklist summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
}

.live-checklist ol {
  margin: 6px 0 4px;
  padding-left: 22px;
  max-height: 32vh;
  overflow-y: auto;
}

.live-checklist code {
  font-size: 12px;
  color: var(--accent-deep);
}

.live-headline {
  flex-shrink: 0;
  padding: 8px 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}

.live-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.live-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
}

.live-pane:last-child {
  border-right: none;
}

.live-pane h3 {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.live-pane h3:first-child {
  border-top: none;
}

.live-transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  user-select: text;
}

.live-transcript.participant {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-secondary);
}

.live-log {
  flex: 2;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  user-select: text;
}

.live-log .mark { color: var(--accent-deep); font-weight: 600; }
.live-log .control { color: var(--warning); font-weight: 600; }
.live-log .guardrail { color: var(--negative); font-weight: 600; }
.live-log .error { color: var(--negative); }

.live-summary {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  user-select: text;
}

.complete-section .live-summary {
  max-height: 40vh;
  padding: 0;
}

.live-controls {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
}

.live-controls input {
  flex: 1;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  outline: none;
}

.live-controls input:focus {
  border-color: var(--accent-border-strong);
}