/* ===== VoiceBridge tokens ===== */
:root{
  --ink-950:#071129;
  --ink-900:#0B1B3A;
  --ink-800:#122A54;
  --line:rgba(148,178,255,.14);
  --text:#EAF1FF;
  --muted:#8FA3CC;
  --orange:#FF7A1A;      /* Speaker 1 */
  --orange-soft:rgba(255,122,26,.38);
  --blue:#4C8DFF;        /* Speaker 2 */
  --blue-soft:rgba(76,141,255,.38);
  --green:#38E07B;
  --radius:16px;
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --prompt:'Sora','Space Grotesk',ui-sans-serif,system-ui,'Segoe UI','Noto Sans','Noto Sans Arabic','Noto Sans Devanagari','Noto Sans SC',sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(76,141,255,.10), transparent 60%),
    radial-gradient(1000px 520px at 92% 110%, rgba(255,122,26,.08), transparent 60%),
    var(--ink-950);
  color:var(--text);
  font-family:var(--display);
  display:grid;
  grid-template-rows:auto auto 1fr;
  height:100vh; /* fallback for older mobile browsers */
  height:100dvh;
  overflow:hidden;
}

/* ===== Top bar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:
    linear-gradient(var(--ink-950),var(--ink-950)) padding-box,
    linear-gradient(120deg,var(--orange),var(--blue)) border-box;
  border:2px solid transparent;
  position:relative;
}
.logo::after{content:'';position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.brand-name{font-weight:700;font-size:17px;letter-spacing:.02em}
.brand-sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.mic-mode{margin-left:12px;font-size:11px;letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.mic-mode.cloud{color:#7fd7a4;border-color:#2f6b48;background:rgba(60,140,90,.12)}
.mic-mode.device{color:#e0a86b;border-color:#7a5320;background:rgba(160,110,40,.12)}
.diag{margin:0 16px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.28);overflow:hidden}
.diag-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.diag-head b{color:#7fd7a4;font-weight:600}
.diag-actions{display:flex;gap:6px}
.diag-log{margin:0;padding:10px 12px;max-height:240px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;line-height:1.5;color:#cfe;white-space:pre-wrap;word-break:break-word}
.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.btn{
  font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text);
  background:var(--ink-800);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;cursor:pointer;transition:transform .08s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{border-color:rgba(148,178,255,.35)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#1A0C00;font-weight:700;padding:9px 20px}
.btn.primary:hover{background:#FF8B3D}
.btn.primary.stop{background:#E24A4A;border-color:#E24A4A;color:#fff}
.btn.ghost{background:transparent}

.toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--muted)}
.mode-switch{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px;background:rgba(0,0,0,.2)}
.mode-btn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.mode-btn.active{background:var(--accent1,#FF7A1A);color:#1a1006}
.mode-btn:not(.active):hover{color:#fff}
.more-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:16px;flex:none}
.controls-more{display:none;width:100%;align-items:center;gap:10px;flex-wrap:wrap;padding-top:10px;margin-top:4px;border-top:1px solid var(--line)}
.controls-more.open{display:flex}
.anchor-badge{display:none;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid #7a5320;color:#e0a86b;background:rgba(160,110,40,.14);margin-left:8px}
body.speech-mode .anchor-badge{display:inline-block}
.type-row{display:none;gap:8px;align-items:flex-end;padding:10px 14px 14px}
body.typing-enabled .type-row{display:flex}
.type-input{flex:1;min-height:40px;max-height:130px;resize:vertical;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:9px 12px;font:inherit;font-size:14.5px;line-height:1.4}
.type-input:focus{outline:2px solid var(--orange-soft);outline-offset:1px}
.type-send{flex:0 0 auto}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .track{
  width:36px;height:20px;border-radius:999px;background:var(--ink-800);
  border:1px solid var(--line);position:relative;transition:background .15s ease;flex:none;
}
.toggle .track::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--muted);transition:transform .15s ease,background .15s ease;
}
.toggle input:checked + .track{background:rgba(56,224,123,.25);border-color:rgba(56,224,123,.5)}
.toggle input:checked + .track::after{transform:translateX(16px);background:var(--green)}
.toggle input:focus-visible + .track{outline:2px solid var(--blue);outline-offset:2px}

.range{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.range input{accent-color:var(--orange);width:110px}
.range b{color:var(--text);font-size:12.5px;min-width:24px;text-align:right}

/* ===== Banner ===== */
.banner{
  margin:8px 16px 0;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.45;
  background:rgba(76,141,255,.12);border:1px solid rgba(76,141,255,.35);
}
.banner.warn{background:rgba(255,122,26,.12);border-color:rgba(255,122,26,.45)}

/* ===== Stage: two panels + bridge ===== */
.stage{
  display:grid;grid-template-columns:1fr 22px 1fr;gap:0;
  padding:12px 16px 16px;min-height:0;
}
.panel{
  min-height:0;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--ink-900),rgba(11,27,58,.72));
  transition:box-shadow .25s ease,border-color .25s ease;
  position:relative;overflow:hidden;
}
.panel-inner{height:100%;display:flex;flex-direction:column;min-height:0}
.panel.flipped .panel-inner{transform:rotate(180deg)}

.panel[data-speaker="1"].active{border-color:var(--orange-soft);box-shadow:0 0 0 1px var(--orange-soft),0 18px 50px -24px var(--orange-soft)}
.panel[data-speaker="2"].active{border-color:var(--blue-soft);box-shadow:0 0 0 1px var(--blue-soft),0 18px 50px -24px var(--blue-soft)}

.panel-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--line);flex:none;
}
.speaker-tag{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.tagdot{width:8px;height:8px;border-radius:50%;flex:none}
.panel[data-speaker="1"] .tagdot{background:var(--orange)}
.panel[data-speaker="2"] .tagdot{background:var(--blue)}

.lang-select,.voice-select{
  flex:1;min-width:0;
  font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--text);
  background:var(--ink-800);border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;cursor:pointer;
}
.voice-select{flex-basis:100%;font-weight:500;font-size:12.5px;color:var(--muted)}
.lang-select:focus-visible,.voice-select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.status{display:flex;align-items:center;gap:6px;white-space:nowrap}
.status-text{font-style:normal;font-size:11.5px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:#5B6B8F}
.dot.listening{background:var(--green);animation:pulse 1.2s ease infinite}
.dot.speaking{background:var(--orange);animation:pulse 1.2s ease infinite}
.dot.waiting{background:var(--blue)}
.dot.idle{background:#5B6B8F}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.0)}50%{box-shadow:0 0 0 5px rgba(255,255,255,.08)}}

/* ===== Teleprompter ===== */
.prompter{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 18px 10px;scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
}
.placeholder{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:34ch;margin:6px 2px}

.line{
  margin:0 0 16px;padding-left:14px;border-left:3px solid transparent;
  font-family:var(--prompt);font-weight:600;
  font-size:clamp(19px,2.5vw,29px);line-height:1.38;letter-spacing:.1px;
  animation:rise .18s ease;overflow-wrap:anywhere;
}
.line.spk1{border-left-color:var(--orange)}
.line.spk2{border-left-color:var(--blue)}
.line .txt{color:#fff}
.line.live .txt{color:#F2F7FF}
.line .meta{
  display:block;margin-top:5px;
  font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.line.incoming .txt{font-weight:500}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.caret{
  display:inline-block;width:3px;height:1.05em;margin-left:4px;vertical-align:-.14em;
  background:currentColor;color:#fff;animation:blink .9s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ===== Countdown chip ===== */
.countdown{
  position:absolute;left:50%;bottom:74px;transform:translateX(-50%);
  background:rgba(7,17,41,.92);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:12.5px;color:var(--text);white-space:nowrap;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);z-index:2;
}
.countdown b{color:var(--orange);font-size:13.5px}
.panel.flipped .countdown{transform:translateX(-50%) rotate(180deg)}

/* ===== Panel footer ===== */
.panel-foot{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-top:1px solid var(--line);flex:none;
}
.mic-btn{
  flex:1;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text);
  background:var(--ink-800);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.panel[data-speaker="1"] .mic-btn.on{background:var(--orange);border-color:var(--orange);color:#1A0C00}
.panel[data-speaker="2"] .mic-btn.on{background:var(--blue);border-color:var(--blue);color:#041027}
.icon-btn{
  flex:none;width:42px;height:42px;font-size:16px;
  background:var(--ink-800);border:1px solid var(--line);border-radius:12px;
  color:var(--text);cursor:pointer;
}
.icon-btn:hover,.mic-btn:hover{border-color:rgba(148,178,255,.35)}
button:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ===== Bridge (signature divider) ===== */
.bridge{position:relative;display:flex;align-items:center;justify-content:center}
.bridge::before{content:'';position:absolute;inset:14% auto 14% 50%;width:1px;background:var(--line)}
.flow{display:flex;flex-direction:column;gap:7px;position:relative;background:var(--ink-950);padding:10px 0}
.flow i{
  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:7px solid currentColor;opacity:.15;
}
.flow.idle{color:#5B6B8F}
.flow.d12{color:var(--orange);transform:rotate(0deg)}
.flow.d21{color:var(--blue);transform:rotate(180deg)}
.flow.d12 i,.flow.d21 i{animation:march 1.05s linear infinite}
.flow i:nth-child(2){animation-delay:.17s}
.flow i:nth-child(3){animation-delay:.34s}
@keyframes march{0%{opacity:.12}30%{opacity:1}100%{opacity:.12}}

/* ===== Portrait / narrow: stack panels ===== */
@media (max-width:840px), (orientation:portrait) and (max-width:1024px){
  body{overflow:auto}
  .stage{grid-template-columns:1fr;grid-template-rows:1fr 22px 1fr;padding:10px 10px 12px}
  .bridge::before{inset:50% 14% auto 14%;width:auto;height:1px}
  .flow{flex-direction:row;padding:0 10px}
  .flow.d12{transform:rotate(90deg)}
  .flow.d21{transform:rotate(270deg)}
  .line{font-size:clamp(18px,4.6vw,24px)}
  .topbar{padding:10px 12px}
  .range span{display:none}
  .countdown{bottom:72px}
  .mic-btn{min-height:48px;font-size:14.5px}
  .icon-btn{width:48px;height:48px}
}

/* ===== Phone: collapse secondary controls, and let whichever panel is
   actually in use (listening or speaking) take most of the screen instead
   of splitting it evenly with the other side. Tablets stay on the layout
   above; this only narrows further for phone-width screens. ===== */
@media (max-width:600px){
  .brand-sub{display:none}
  .controls-more.open{flex-direction:column;align-items:stretch;gap:12px}
  .controls-more .toggle{justify-content:space-between}
  .controls-more .range{width:100%}
  .controls-more .range input{flex:1;width:auto}
  .controls-more .btn{width:100%;text-align:center}

  .stage{display:flex;flex-direction:column;padding:8px 8px 10px;gap:0}
  .panel{flex:1;min-height:110px;transition:flex-grow .35s ease}
  .panel.active,.panel.speaking{flex-grow:2.6}
  .bridge{flex:none;padding:0}
  .bridge::before{inset:50% 18% auto 18%}
  .flow{padding:4px 10px}

  .panel-head{padding:9px 10px;gap:7px}
  .speaker-tag{font-size:10px}
  .voice-select{font-size:11.5px}
  .countdown{bottom:64px}
  .diag-log{max-height:170px}

  /* 16px+ stops iOS Safari from zooming the page in when a text field is
     tapped. Selects open their own native picker instead, so they don't
     need this, and keeping them smaller is what makes the header compact. */
  .type-input{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .prompter{scroll-behavior:auto}
}


/* ---------- Mobile input polish ---------- */
button,select,input[type=range],.toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}