/* DEX VOICE — dark, clean, big touch targets. Vertical scroll only. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:#0b1220;color:#e8eef7;
  overscroll-behavior-y:none;
}
#app{min-height:100dvh;display:flex;flex-direction:column}
.screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}

/* ---------- auth ---------- */
.auth-card{width:100%;max-width:380px;background:#111c33;border:1px solid #1e2c4d;
  border-radius:20px;padding:32px 24px;text-align:center}
.logo{font-size:52px;font-weight:900;letter-spacing:6px;
  background:linear-gradient(135deg,#d69e2e,#f6d365);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.tagline{color:#94a3b8;margin:6px 0 22px;font-size:15px}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{flex:1;padding:12px;border:none;border-radius:12px;background:#0b1220;color:#94a3b8;
  font-size:16px;font-weight:600}
.tab.on{background:#1a365d;color:#fff}
.inp{width:100%;padding:15px 16px;margin-bottom:12px;border:1px solid #24365c;border-radius:12px;
  background:#0b1220;color:#fff;font-size:17px}
.inp:focus{outline:none;border-color:#d69e2e}
.btn-primary{width:100%;padding:16px;border:none;border-radius:14px;background:#d69e2e;color:#0b1220;
  font-size:18px;font-weight:800;min-height:56px}
.btn-primary:active{transform:scale(.98)}
.err{color:#f87171;margin-top:12px;min-height:20px;font-size:14px}

/* ---------- voice ---------- */
#voice-screen{justify-content:flex-start;padding-top:max(24px,env(safe-area-inset-top))}
.topbar{width:100%;max-width:520px;display:flex;justify-content:space-between;align-items:center;
  padding:8px 4px 16px}
.brand{font-size:22px;font-weight:900;letter-spacing:3px}
.brand span{color:#d69e2e}
.icon-btn{background:none;border:1px solid #24365c;color:#94a3b8;border-radius:10px;
  width:44px;height:44px;font-size:18px}
.status{align-self:center;margin:8px 0 4px;padding:10px 22px;border-radius:999px;
  background:#111c33;border:1px solid #1e2c4d;font-size:16px;font-weight:600;color:#cbd5e1;
  min-height:44px;display:flex;align-items:center}
.status.listening{border-color:#f87171;color:#fca5a5}
.status.speaking{border-color:#4ade80;color:#86efac}
.status.err{border-color:#f87171;color:#f87171}
.mode-toggle{display:flex;background:#111c33;border:1px solid #1e2c4d;border-radius:999px;
  padding:4px;margin:6px 0 2px;gap:4px}
.mode-btn{flex:1;min-width:120px;padding:10px 18px;border:none;border-radius:999px;
  background:transparent;color:#94a3b8;font-size:15px;font-weight:700;min-height:44px;cursor:pointer}
.mode-btn.on{background:#1a365d;color:#fff}
.talk-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:26px 0 10px;width:100%}
#talk-btn{position:relative;width:220px;height:220px;border:none;background:none;margin:0;
  cursor:pointer;min-width:220px;min-height:220px}
#photo-btn{width:64px;height:64px;min-width:64px;border-radius:50%;border:2px solid #1e2c4d;
  background:#111c33;font-size:28px;cursor:pointer;color:#e8eef7;padding:0}
#photo-btn:active{transform:scale(.94)}
#photo-btn.busy{opacity:.45;pointer-events:none}
.bubble.photo{padding:6px}
.bubble.photo img{max-width:180px;width:100%;border-radius:10px;display:block}
.ring{position:absolute;inset:0;border-radius:50%;
  border:4px solid #1e2c4d;background:radial-gradient(circle at 50% 35%,#1a365d,#0b1220 75%);
  transition:border-color .25s, box-shadow .25s}
.ring.listening{border-color:#f87171;box-shadow:0 0 44px rgba(248,113,113,.45);
  animation:pulse 1.4s ease-in-out infinite}
.ring.speaking{border-color:#4ade80;box-shadow:0 0 44px rgba(74,222,128,.45);
  animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.mic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:72px}
.pipeline{min-height:26px;font-size:14px;letter-spacing:1px;margin-bottom:8px}
.pipeline .ms{font-size:11px;opacity:.75}
.transcript{width:100%;max-width:520px;flex:1;overflow-y:auto;display:flex;flex-direction:column;
  gap:10px;padding:6px 2px 12px;max-height:38dvh}
.bubble{padding:13px 16px;border-radius:16px;font-size:16px;line-height:1.45;max-width:88%}
.bubble.you{align-self:flex-end;background:#1a365d;color:#fff;border-bottom-right-radius:6px}
.bubble.dex{align-self:flex-start;background:#111c33;border:1px solid #1e2c4d;color:#e8eef7;
  border-bottom-left-radius:6px}
.hint{text-align:center;color:#64748b;font-size:13px;line-height:1.6;padding-bottom:max(16px,env(safe-area-inset-bottom))}