:root { color-scheme: dark; --bg:#0f1419; --panel:#182028; --line:#2a3642; --text:#e8eef4; --muted:#93a1af; --accent:#4c9aff; --ok:#3ecf8e; --warn:#f5b342; --danger:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%; }
body { min-height:100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 4px; }
h1 { font-size:1.15rem; margin:0; }
h2 { font-size:1.05rem; margin:0 0 8px; }
main { max-width:640px; margin:0 auto; padding:8px 16px 28px; display:grid; gap:14px; }
.muted { color:var(--muted); margin:0; }
.small { font-size:.85rem; }
button { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; min-height:48px; cursor:pointer; touch-action:manipulation; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--accent); border-color:var(--accent); color:#06121f; font-weight:600; }
button.danger { background:transparent; border-color:var(--danger); color:var(--danger); }
button.big { width:100%; min-height:72px; font-size:1.2rem; border-radius:18px; }
button.link { background:none; border:none; color:var(--muted); min-height:auto; padding:6px; text-decoration:underline; }
.row { display:flex; gap:10px; }
.row > button { flex:1; }
.modes { display:flex; gap:8px; }
.modes button { flex:1; }
.modes button[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.mode-note { margin:8px 0 0; padding:10px 12px; border-radius:10px; background:var(--panel); border-left:4px solid var(--accent); font-size:.92rem; }
.mode-note[data-mode="test-repo"] { border-left-color:var(--warn); }
.status { display:flex; align-items:center; gap:12px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.status-text { font-size:1.15rem; font-weight:600; }
.dot { width:16px; height:16px; border-radius:50%; background:var(--muted); flex:none; }
body[data-phase="listening"] .dot { background:var(--ok); animation:pulse 1.6s ease-in-out infinite; }
body[data-phase="speaking"] .dot { background:var(--accent); animation:pulse .8s ease-in-out infinite; }
body[data-phase="thinking"] .dot, body[data-phase="connecting"] .dot { background:var(--warn); animation:pulse 1.1s ease-in-out infinite; }
body[data-phase="awaiting_approval"] .dot { background:var(--warn); }
body[data-phase="error"] .dot, body[data-phase="disconnected"] .dot { background:var(--danger); }
@keyframes pulse { 50% { transform:scale(1.35); opacity:.6; } }
@media (prefers-reduced-motion: reduce) { .dot { animation:none !important; } }
.banner { margin:0; padding:10px 12px; border-radius:10px; background:var(--panel); border:1px solid var(--line); }
.banner[data-kind="warn"] { border-color:var(--warn); color:var(--warn); }
.banner[data-kind="error"] { border-color:var(--danger); color:var(--danger); }
.approval { padding:16px; border-radius:16px; background:#2a2110; border:2px solid var(--warn); }
.approval dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 10px; }
.approval dt { color:var(--muted); }
.approval dd { margin:0; overflow-wrap:anywhere; }
.approval .target { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem; }
.transcript { min-height:120px; max-height:42dvh; overflow-y:auto; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:14px; display:grid; gap:8px; align-content:start; }
.line { display:grid; grid-template-columns:56px 1fr; gap:8px; overflow-wrap:anywhere; }
.line .who { color:var(--muted); font-size:.85rem; padding-top:2px; }
.line.user { color:#cfe3ff; }
.line.system { color:var(--muted); font-size:.88rem; font-style:italic; }
[hidden] { display:none !important; }
body.login { display:grid; place-items:center; }
.card { width:min(420px, 92vw); padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:18px; display:grid; gap:12px; }
.card form { display:grid; gap:10px; }
.card input { font:inherit; padding:14px; min-height:52px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); }
.message { min-height:1.4em; margin:0; color:var(--danger); }