/* ============================================================================
   Ollang Live Translate — operator console
   Dark, deeply tinted ground. Single purple brand accent. Emerald live signal.
   Geist for everything except the latency readout (JetBrains Mono, tnum).
   ========================================================================= */

@layer reset, tokens, base, layout, components, motion, a11y;

/* -------- reset -------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { min-height: 100vh; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: oklch(0.62 0.22 282 / 0.45); color: white; }
}

/* -------- tokens -------- */
@layer tokens {
  :root {
    /* ---- Dark theme (default) ---- */
    /* Tinted neutrals (subtle violet bias toward Ollang #6148F9 ≈ hue 282) */
    --bg-0: oklch(0.14 0.018 280);          /* canvas */
    --bg-1: oklch(0.18 0.020 280);          /* panel */
    --bg-2: oklch(0.22 0.022 280);          /* raised */
    --bg-3: oklch(0.27 0.024 280);          /* control rest */

    --line-1: oklch(0.30 0.020 280 / 0.55); /* hairline */
    --line-2: oklch(0.40 0.020 280 / 0.55); /* divider */

    --text:        oklch(0.96 0.012 280);
    --text-strong: oklch(0.99 0.010 280);
    --text-muted:  oklch(0.70 0.020 280);
    --text-dim:    oklch(0.55 0.020 280);

    /* Theme-tunable layers used by body + topbar so we can recolor cleanly. */
    --canvas-glow-1: oklch(0.42 0.18 282 / 0.18);
    --canvas-glow-2: oklch(0.42 0.16 282 / 0.10);
    --topbar-from:   oklch(0.14 0.018 280 / 0.92);
    --topbar-to:     oklch(0.14 0.018 280 / 0.65);
    --tile-video-bg: oklch(0.10 0.018 280);
    --pill-text-on-tile: oklch(0.99 0 0);

    /* Single brand accent — Ollang purple */
    --accent:        oklch(0.62 0.22 282);
    --accent-soft:   oklch(0.62 0.22 282 / 0.18);
    --accent-line:   oklch(0.62 0.22 282 / 0.45);
    --accent-on:     oklch(0.99 0 0);

    /* Functional */
    --signal-live:  oklch(0.78 0.18 152);     /* emerald — "live", good latency */
    --signal-warn:  oklch(0.80 0.16 75);      /* amber */
    --signal-danger:oklch(0.65 0.20 25);      /* rose */

    /* Type */
    --font-ui:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --t-xs:  0.8125rem;   /* 13 — was 11 */
    --t-sm:  0.9375rem;   /* 15 — was 13 */
    --t-md:  1.0625rem;   /* 17 — was 15 */
    --t-lg:  1.1875rem;   /* 19 — was 17 */
    --t-xl:  clamp(1.5rem, 1.2rem + 1vw, 1.875rem);

    /* Space (4-px scale) */
    --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
    --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;  --s-9: 56px;

    /* Radii */
    --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;

    /* Easing — exponential, never bouncy */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);

    --shadow-1: 0 1px 0 oklch(1 0 0 / 0.04) inset;
    --shadow-2: 0 0 0 1px var(--line-1) inset;
    --ring:     0 0 0 2px var(--accent), 0 0 0 4px oklch(0.62 0.22 282 / 0.25);
  }

  /* ---- Light theme ---- */
  :root[data-theme="light"] {
    --bg-0: oklch(0.985 0.005 280);
    --bg-1: oklch(1 0 0);
    --bg-2: oklch(0.965 0.008 280);
    --bg-3: oklch(0.925 0.012 280);

    --line-1: oklch(0.82 0.015 280 / 0.85);
    --line-2: oklch(0.70 0.020 280 / 0.70);

    --text:        oklch(0.22 0.020 280);
    --text-strong: oklch(0.12 0.020 280);
    --text-muted:  oklch(0.42 0.025 280);
    --text-dim:    oklch(0.58 0.025 280);

    --canvas-glow-1: oklch(0.78 0.16 282 / 0.20);
    --canvas-glow-2: oklch(0.85 0.10 282 / 0.14);
    --topbar-from:   oklch(0.99 0.005 280 / 0.92);
    --topbar-to:     oklch(0.99 0.005 280 / 0.65);
    --tile-video-bg: oklch(0.92 0.012 280);

    --accent-soft: oklch(0.62 0.22 282 / 0.12);

    --shadow-1: 0 1px 0 oklch(1 0 0 / 0.6) inset;
  }
}

/* -------- base -------- */
@layer base {
  body {
    font-family: var(--font-ui);
    font-feature-settings: 'ss01', 'cv11', 'kern';
    color: var(--text);
    background:
      /* faint corner glow from the brand accent — barely there */
      radial-gradient(900px 500px at 100% -10%, var(--canvas-glow-1), transparent 60%),
      radial-gradient(700px 600px at -10% 110%, var(--canvas-glow-2), transparent 60%),
      var(--bg-0);
    background-attachment: fixed;
    transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out);
    /* Ambient grain to break up flat dark panels — pure CSS, no asset. */
    background-blend-mode: normal;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Custom scrollbars in the transcript panes only — body scroll stays default */
  .transcript {
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .transcript::-webkit-scrollbar { width: 8px; }
  .transcript::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 999px;
  }
  .transcript::-webkit-scrollbar-thumb:hover { background: oklch(0.50 0.04 280); }

  ::placeholder { color: var(--text-dim); }
}

/* -------- layout -------- */
@layer layout {
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-6);
    border-bottom: 1px solid var(--line-1);
    background: linear-gradient(180deg, var(--topbar-from), var(--topbar-to));
    backdrop-filter: saturate(140%) blur(8px);
    position: sticky; top: 0; z-index: 10;
  }

  .grid {
    display: grid; gap: var(--s-4);
    padding: var(--s-4) var(--s-6) var(--s-6);
    grid-template-columns: minmax(0, 1fr) 380px;
    height: calc(100vh - 65px);
    min-height: 0;
  }
  @media (max-width: 1024px) {
    .grid { grid-template-columns: 1fr; height: auto; }
  }

  .stage {
    display: grid;
    /* Asymmetric — self tile dominates, sims are a quieter strip. */
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--s-3);
    min-height: 0;
  }
  .stage .self { grid-row: 1 / 3; grid-column: 1 / 2; }
  @media (max-width: 1280px) {
    .stage { grid-template-columns: repeat(2, 1fr); }
    .stage .self { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 16 / 9; }
  }

  .side {
    display: flex; flex-direction: column; gap: var(--s-4);
    min-height: 0;
  }
}

/* -------- components -------- */
@layer components {
  /* ----- Brand ----- */
  .brand {
    display: inline-flex; align-items: center; gap: var(--s-3);
    color: var(--text);
    transition: opacity 200ms var(--ease-out);
  }
  .brand:hover { opacity: 0.86; }
  .brand:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-md); }
  .brand-mark {
    height: 22px; width: auto;
    color: var(--text-strong);
    /* The accent path keeps its own #6148F9 fill; only the wordmark inherits. */
  }
  .brand-sep {
    width: 1px; height: 18px;
    background: var(--line-2);
    margin: 0 var(--s-1);
  }
  .brand-product {
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
  }

  /* ----- Topbar meta ----- */
  .topbar-meta { display: flex; align-items: center; gap: var(--s-3); }

  .route {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 6px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-2);
    border: 1px solid var(--line-1);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .route-lang { font-weight: 600; color: var(--text); }
  .route-lang.accent { color: var(--accent); }
  .route-arrow { color: var(--text-dim); }

  .latency {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-2);
    border: 1px solid var(--line-1);
    font-family: var(--font-mono);
    font-feature-settings: 'tnum';
    font-size: var(--t-xs);
    color: var(--text-muted);
    transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  }
  .latency-label { text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .latency .icon { width: 13px; height: 13px; opacity: 0.85; }
  .latency-value { font-size: var(--t-sm); color: var(--text); }
  .latency-unit  { color: var(--text-dim); }
  .latency[data-state="good"]   { color: var(--signal-live);   border-color: oklch(0.78 0.18 152 / 0.40); }
  .latency[data-state="good"] .latency-value { color: var(--signal-live); }
  .latency[data-state="warn"]   { color: var(--signal-warn);   border-color: oklch(0.80 0.16 75 / 0.40); }
  .latency[data-state="warn"] .latency-value { color: var(--signal-warn); }
  .latency[data-state="bad"]    { color: var(--signal-danger); border-color: oklch(0.65 0.20 25 / 0.45); }
  .latency[data-state="bad"]  .latency-value { color: var(--signal-danger); }

  /* ----- Tiles (video / participant) ----- */
  .tile {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-1);
    border: 1px solid var(--line-1);
    isolation: isolate;
    min-height: 160px;
  }
  .tile video {
    width: 100%; height: 100%; object-fit: cover;
    transform: scaleX(-1); /* mirror selfie */
    background: var(--tile-video-bg);
  }
  .tile.self { border-color: var(--accent-line); }
  .tile.self .tile-frame {
    position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    box-shadow: 0 0 0 1px oklch(0.62 0.22 282 / 0.25) inset,
                0 24px 60px -28px oklch(0.62 0.22 282 / 0.45);
  }

  .tile-overlay {
    position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
    display: flex; align-items: end; justify-content: space-between;
    gap: var(--s-3);
    pointer-events: none;
    text-shadow: 0 1px 2px oklch(0 0 0 / 0.6);
  }
  .tile-meta { display: inline-flex; align-items: center; gap: var(--s-2); }
  .who {
    font-weight: 600; font-size: var(--t-md);
    color: oklch(0.99 0 0);
  }
  .lang-pill {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum';
    font-size: 12px; letter-spacing: 0.08em;
    padding: 4px 8px;
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: var(--r-pill);
    background: oklch(0.99 0 0 / 0.10);
    border: 1px solid oklch(0.99 0 0 / 0.18);
    color: oklch(0.99 0 0 / 0.92);
    text-transform: uppercase;
  }

  /* Mic state badge */
  .mic-state {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px 4px 7px;
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
    pointer-events: none;
    border: 1px solid transparent;
    background: oklch(0 0 0 / 0.55);
    backdrop-filter: blur(4px);
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
  }
  .mic-icon {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--signal-danger);
    box-shadow: 0 0 0 0 oklch(0.65 0.20 25 / 0.4);
  }
  .mic-state[data-state="muted"] { color: oklch(0.92 0.04 25); border-color: oklch(0.65 0.20 25 / 0.35); }
  .mic-state[data-state="live"]  {
    color: oklch(0.95 0.10 152);
    border-color: oklch(0.78 0.18 152 / 0.45);
  }
  .mic-state[data-state="live"] .mic-icon {
    background: var(--signal-live);
    animation: pulse-dot 1.6s var(--ease-out) infinite;
  }
  @keyframes pulse-dot {
    0%, 60%, 100% { box-shadow: 0 0 0 0 oklch(0.78 0.18 152 / 0.6); }
    30% { box-shadow: 0 0 0 6px oklch(0.78 0.18 152 / 0); }
  }

  .vu {
    position: absolute; left: var(--s-3); top: var(--s-3);
    width: 96px; height: 14px;
    background: oklch(0 0 0 / 0.45);
    border: 1px solid oklch(0.99 0 0 / 0.10);
    border-radius: var(--r-sm);
    backdrop-filter: blur(4px);
  }

  /* Sim participant avatars — restrained, not gradient circles */
  .tile.sim {
    display: grid;
    place-items: center;
    background:
      radial-gradient(60% 80% at 50% 30%, oklch(0.32 0.04 var(--avatar-hue, 280) / 0.55), transparent 70%),
      var(--bg-1);
  }
  .avatar {
    --avatar-hue: 280;
    width: 84px; height: 84px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.02em;
    color: oklch(0.96 0.02 var(--avatar-hue));
    background:
      conic-gradient(from 220deg, oklch(0.32 0.06 var(--avatar-hue)), oklch(0.22 0.04 var(--avatar-hue)) 60%, oklch(0.32 0.06 var(--avatar-hue)));
    box-shadow:
      0 0 0 1px oklch(0.99 0 0 / 0.06) inset,
      0 12px 32px -16px oklch(0.10 0.04 var(--avatar-hue));
  }

  /* ----- Panels ----- */
  .panel {
    background: var(--bg-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-4);
    min-height: 0;
    box-shadow: var(--shadow-1);
  }
  .panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
  }
  .section-label {
    margin: 0;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  /* ----- Status pill ----- */
  .status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--r-pill);
    background: var(--bg-2);
    border: 1px solid var(--line-1);
    font-size: var(--t-xs);
    color: var(--text-muted);
    transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out), background 240ms var(--ease-out);
  }
  .status-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-dim);
    transition: background 240ms var(--ease-out);
  }
  .status[data-kind="connecting"] { color: oklch(0.85 0.10 75); border-color: oklch(0.80 0.16 75 / 0.35); }
  .status[data-kind="connecting"] .status-pulse { background: var(--signal-warn); animation: pulse-dot 1.4s var(--ease-out) infinite; }
  .status[data-kind="live"]       { color: oklch(0.92 0.10 152); border-color: oklch(0.78 0.18 152 / 0.40); }
  .status[data-kind="live"] .status-pulse { background: var(--signal-live); animation: pulse-dot 1.6s var(--ease-out) infinite; }
  .status[data-kind="error"]      { color: oklch(0.88 0.12 25); border-color: oklch(0.65 0.20 25 / 0.45); }
  .status[data-kind="error"] .status-pulse { background: var(--signal-danger); }

  /* ----- Form fields ----- */
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label {
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  select {
    appearance: none; -webkit-appearance: none;
    padding: 9px 32px 9px 12px;
    background:
      linear-gradient(45deg, transparent 50%, var(--text-muted) 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) calc(100% - 10px) 50% / 6px 6px no-repeat,
      var(--bg-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: var(--t-sm);
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
  }
  select:hover { border-color: var(--line-2); }
  select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
  select option { background: var(--bg-2); color: var(--text); }
  select optgroup { color: var(--text-dim); font-style: normal; font-weight: 600; }

  /* ----- Buttons ----- */
  .row { display: flex; gap: var(--s-2); }
  .btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.005em;
    transition:
      background-color 160ms var(--ease-out),
      border-color 160ms var(--ease-out),
      color 160ms var(--ease-out),
      transform 160ms var(--ease-out);
    will-change: transform;
  }
  .btn:focus-visible { outline: none; box-shadow: var(--ring); }
  .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
  .btn:active:not(:disabled) { transform: translateY(1px); }

  .btn.primary {
    background: var(--accent);
    color: var(--accent-on);
    border-color: oklch(0.55 0.22 282);
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.16) inset, 0 8px 24px -12px oklch(0.55 0.22 282 / 0.6);
  }
  .btn.primary:hover:not(:disabled)   { background: oklch(0.66 0.22 282); }
  .btn.primary:active:not(:disabled)  { background: oklch(0.58 0.22 282); }

  .btn.secondary {
    background: var(--bg-2);
    color: var(--text);
    border-color: var(--line-1);
  }
  .btn.secondary:hover:not(:disabled) { background: var(--bg-3); border-color: var(--line-2); }
  .btn.secondary[aria-pressed="false"] { color: var(--text); }

  .btn.ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--line-1);
  }
  .btn.ghost:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }

  .primary-row .btn.primary { flex: 2; }

  /* ----- Transcripts ----- */
  .transcripts { flex: 1; min-height: 0; gap: var(--s-3); }
  .transcript-block {
    display: flex; flex-direction: column; gap: 6px;
    min-height: 0;
    flex: 1;
  }
  .transcript-head {
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .transcript-title {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .transcript-tag {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.08em;
    color: var(--text-dim);
    padding: 2px 6px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-1);
  }
  .transcript-tag.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

  .transcript {
    flex: 1; min-height: 80px;
    overflow: auto;
    background: var(--bg-2);
    border: 1px solid var(--line-1);
    border-radius: var(--r-md);
    padding: var(--s-4);
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--text);
    /* Subtle internal rule between turns instead of hard borders. */
  }
  .transcript .hint {
    margin: 0;
    color: var(--text-dim);
    font-style: normal;
  }
  .transcript .commit {
    margin: 0;
    padding: 6px 0;
    border-top: 1px dashed oklch(0.40 0.02 280 / 0.35);
    animation: commit-in 280ms var(--ease-out) both;
  }
  .transcript .commit:first-child { border-top: 0; padding-top: 0; }
  .transcript.tgt .commit { color: oklch(0.97 0.04 282); }

  .transcript .partial.live {
    margin: 6px 0 0;
    color: var(--text-muted);
  }
  .transcript .partial.live::after {
    content: '';
    display: inline-block;
    width: 2px; height: 1.05em;
    margin-left: 3px;
    vertical-align: -0.18em;
    background: currentColor;
    animation: caret 1.06s steps(1, end) infinite;
  }
  @keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
  @keyframes commit-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
  }
}

  /* ----- Theme toggle button ----- */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    border-radius: var(--r-pill);
    background: var(--bg-2);
    border: 1px solid var(--line-1);
    color: var(--text-muted);
    transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
  }
  .theme-toggle:hover { color: var(--text); border-color: var(--line-2); background: var(--bg-3); }
  .theme-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
  .theme-toggle .icon { width: 16px; height: 16px; }
  .theme-toggle .icon-sun { display: none; }
  .theme-toggle .icon-moon { display: block; }
  :root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
  :root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

  /* ----- Sim participant state badge + speaking bars ----- */
  .sim-state {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px 4px 7px;
    border-radius: var(--r-pill);
    font-size: var(--t-xs);
    pointer-events: none;
    border: 1px solid oklch(0.99 0 0 / 0.14);
    background: oklch(0 0 0 / 0.45);
    backdrop-filter: blur(4px);
    color: oklch(0.92 0.02 280);
    transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out);
  }
  .sim-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-dim);
  }
  .sim-state[data-state="listening"] { color: oklch(0.85 0.04 280); }
  .sim-state[data-state="speaking"]  {
    color: oklch(0.95 0.10 152);
    border-color: oklch(0.78 0.18 152 / 0.45);
  }
  .sim-state[data-state="speaking"] .sim-dot {
    background: var(--signal-live);
    animation: pulse-dot 1.4s var(--ease-out) infinite;
  }

  .speaking-bars {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) translateY(56px);
    display: flex; align-items: end; gap: 4px;
    height: 22px;
    opacity: 0;
    transition: opacity 280ms var(--ease-out);
    pointer-events: none;
  }
  .speaking-bars span {
    display: block;
    width: 4px; height: 6px;
    border-radius: 2px;
    background: var(--signal-live);
    box-shadow: 0 0 12px oklch(0.78 0.18 152 / 0.5);
  }
  .tile.sim[data-speaking="true"] .speaking-bars { opacity: 1; }
  .tile.sim[data-speaking="true"] .speaking-bars span { animation: bars 900ms var(--ease-out) infinite; }
  .tile.sim[data-speaking="true"] .speaking-bars span:nth-child(1) { animation-delay: 0ms;   }
  .tile.sim[data-speaking="true"] .speaking-bars span:nth-child(2) { animation-delay: 120ms; }
  .tile.sim[data-speaking="true"] .speaking-bars span:nth-child(3) { animation-delay: 240ms; }
  .tile.sim[data-speaking="true"] .speaking-bars span:nth-child(4) { animation-delay: 360ms; }
  @keyframes bars {
    0%, 100% { height: 6px; }
    50%      { height: 22px; }
  }

  .tile.sim {
    transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
  }
  .tile.sim[data-speaking="true"] {
    border-color: oklch(0.78 0.18 152 / 0.45);
    box-shadow: 0 0 0 1px oklch(0.78 0.18 152 / 0.25) inset,
                0 18px 48px -22px oklch(0.78 0.18 152 / 0.45);
  }
  .tile.sim[data-speaking="true"] .avatar {
    box-shadow:
      0 0 0 2px oklch(0.78 0.18 152 / 0.45) inset,
      0 0 0 4px oklch(0.78 0.18 152 / 0.18),
      0 12px 32px -16px oklch(0.10 0.04 var(--avatar-hue));
  }

  /* ----- Subgroups inside Session panel ----- */
  .subgroup { display: flex; flex-direction: column; gap: var(--s-3); }
  .subgroup + .subgroup {
    padding-top: var(--s-4);
    border-top: 1px dashed oklch(0.40 0.02 280 / 0.45);
  }
  .subgroup-label {
    margin: 0;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .subgroup-label .icon { width: 14px; height: 14px; opacity: 0.85; }

  /* Boost section label contrast — they were nearly invisible at --text-dim. */
  .section-label { color: var(--text-muted); }
  .field label   { color: var(--text-muted); }

  /* Light-theme nudges: tile overlays still need contrast against bright video. */
  :root[data-theme="light"] .tile.sim {
    background:
      radial-gradient(60% 80% at 50% 30%, oklch(0.85 0.04 var(--avatar-hue, 280) / 0.55), transparent 70%),
      var(--bg-1);
  }
  :root[data-theme="light"] .avatar {
    color: oklch(0.30 0.06 var(--avatar-hue));
    background:
      conic-gradient(from 220deg, oklch(0.88 0.05 var(--avatar-hue)), oklch(0.78 0.04 var(--avatar-hue)) 60%, oklch(0.88 0.05 var(--avatar-hue)));
    box-shadow:
      0 0 0 1px oklch(0 0 0 / 0.05) inset,
      0 12px 32px -16px oklch(0.40 0.04 var(--avatar-hue) / 0.4);
  }
  :root[data-theme="light"] .topbar { box-shadow: 0 1px 0 oklch(1 0 0 / 0.4) inset; }
  :root[data-theme="light"] .panel { box-shadow: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 1px 2px oklch(0.40 0.04 280 / 0.06); }
  :root[data-theme="light"] .btn.primary {
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.20) inset, 0 8px 20px -10px oklch(0.55 0.22 282 / 0.45);
  }
  :root[data-theme="light"] select option { background: var(--bg-1); }

  /* ----- Inline icons (24x24 stroke) ----- */
  .icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .section-label .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; opacity: 0.85; }
  .field label .icon  { width: 12px; height: 12px; vertical-align: -1px; margin-right: 5px; opacity: 0.8; }
  .flag { font-size: 1.05em; line-height: 1; }
  select option .flag { font-size: 1em; }

  /* ----- Email gate modal (glassmorphism) ----- */
  .gate {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
    padding: var(--s-5);
    background:
      radial-gradient(900px 600px at 20% 10%, oklch(0.55 0.22 282 / 0.22), transparent 60%),
      radial-gradient(700px 500px at 90% 90%, oklch(0.62 0.22 282 / 0.16), transparent 60%),
      var(--gate-veil, oklch(0.10 0.018 280 / 0.40));
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    animation: gate-in 320ms var(--ease-out) both;
  }
  :root[data-theme="light"] .gate { --gate-veil: oklch(0.99 0.005 280 / 0.45); }
  .gate[hidden] { display: none; }
  .gate-card {
    width: min(440px, 100%);
    padding: var(--s-7) var(--s-6) var(--s-6);
    border-radius: var(--r-xl);
    background: linear-gradient(160deg,
      oklch(0.99 0 0 / 0.10),
      oklch(0.99 0 0 / 0.04));
    border: 1px solid oklch(0.99 0 0 / 0.16);
    box-shadow:
      0 1px 0 oklch(1 0 0 / 0.10) inset,
      0 30px 80px -20px oklch(0.05 0.02 280 / 0.7),
      0 0 0 1px oklch(0.62 0.22 282 / 0.14);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    display: flex; flex-direction: column; gap: var(--s-5);
  }
  :root[data-theme="light"] .gate-card {
    background: linear-gradient(160deg,
      oklch(1 0 0 / 0.85),
      oklch(1 0 0 / 0.70));
    border-color: oklch(0.85 0.015 280 / 0.9);
    box-shadow:
      0 1px 0 oklch(1 0 0 / 0.9) inset,
      0 30px 80px -20px oklch(0.40 0.10 282 / 0.25),
      0 0 0 1px oklch(0.62 0.22 282 / 0.10);
  }
  .gate-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .gate-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--signal-live);
    box-shadow: 0 0 0 0 oklch(0.78 0.18 152 / 0.6);
    animation: pulse-dot 1.6s var(--ease-out) infinite;
  }
  .gate h1 {
    margin: 0;
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-strong);
    line-height: 1.2;
  }
  .gate p.lede {
    margin: 0;
    font-size: var(--t-md);
    line-height: 1.5;
    color: var(--text-muted);
  }
  .gate form { display: flex; flex-direction: column; gap: var(--s-3); }
  .gate-input-wrap {
    position: relative;
    display: flex; align-items: center;
  }
  .gate-input-wrap .icon {
    position: absolute; left: 14px;
    color: var(--text-muted);
    pointer-events: none;
  }
  .gate input[type="email"] {
    width: 100%;
    padding: 14px 14px 14px 44px;
    background: oklch(0.99 0 0 / 0.06);
    border: 1px solid oklch(0.99 0 0 / 0.18);
    border-radius: var(--r-md);
    color: var(--text-strong);
    font-size: var(--t-md);
    transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  }
  .gate input[type="email"]::placeholder { color: var(--text-dim); }
  .gate input[type="email"]:focus { outline: none; border-color: var(--accent); background: oklch(0.99 0 0 / 0.10); box-shadow: var(--ring); }
  .gate .btn.primary { width: 100%; padding: 14px 16px; font-size: var(--t-md); }
  .gate .gate-foot {
    font-size: var(--t-xs);
    color: var(--text-dim);
    text-align: center;
  }
  .gate-error {
    color: oklch(0.88 0.12 25);
    font-size: var(--t-sm);
    min-height: 1em;
  }
  @keyframes gate-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .gate-card { animation: gate-card-in 420ms var(--ease-out) both; }
  @keyframes gate-card-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }

/* -------- motion / a11y -------- */
@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
}

@layer a11y {
  :focus-visible { outline: none; }
  button:focus-visible, select:focus-visible, a:focus-visible {
    box-shadow: var(--ring);
  }
  /* Ensure 44px minimum touch target on small screens */
  @media (pointer: coarse) {
    .btn { min-height: 44px; }
    select { min-height: 44px; }
  }
}