:root { --bg:#0f1115; --panel:#181b22; --line:#262a33; --text:#e7e9ee; --muted:#8b91a0; --accent:#6c8cff; --user:#2b3550; --err:#ff6b6b; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display:flex; flex-direction:column; height:100dvh; }
header { display:flex; gap:8px; align-items:center; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--panel); border-bottom:1px solid var(--line); }
select, button, textarea, input { font:inherit; color:var(--text); }
select { flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.iconbtn { background:none; border:1px solid var(--line); border-radius:10px; padding:8px 11px; cursor:pointer; }
#chat { flex:1; overflow-y:auto; padding:14px 12px 4px; -webkit-overflow-scrolling:touch; }
.msg { max-width:92%; margin:0 0 12px; padding:10px 13px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.user { margin-left:auto; background:var(--user); border-bottom-right-radius:4px; }
.assistant { background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px; }
.assistant.error { border-color:var(--err); color:var(--err); }
.meta { font-size:12px; color:var(--muted); margin-bottom:4px; }
details.think { font-size:13px; color:var(--muted); margin-bottom:6px; }
details.think summary { cursor:pointer; }
pre { background:#0b0d11; border:1px solid var(--line); border-radius:8px; padding:10px; overflow-x:auto; white-space:pre; font-size:13px; }
code { font-family: ui-monospace, Consolas, monospace; font-size:.92em; }
:not(pre) > code { background:#0b0d11; padding:1px 5px; border-radius:5px; }
.empty { color:var(--muted); text-align:center; margin-top:30vh; padding:0 20px; }
form { display:flex; gap:8px; align-items:flex-end; padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); }
textarea { flex:1; resize:none; max-height:40vh; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
#send { background:var(--accent); border:0; border-radius:12px; padding:10px 16px; font-weight:600; cursor:pointer; color:#fff; }
#send.stop { background:var(--err); }
#login { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; }
#login .title { font-size:22px; font-weight:600; }
#login .col { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:300px; }
#login input { width:100%; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px; }
#setupCode { font-size:20px; letter-spacing:2px; font-family: ui-monospace, Consolas, monospace; }
.primary { width:100%; background:var(--accent); color:#fff; border:0; border-radius:12px; padding:12px 20px; font-weight:600; cursor:pointer; }
.primary:disabled { opacity:.6; }
.link { background:none; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; }
.muted { color:var(--muted); font-size:14px; }
.center { text-align:center; }
#loginMsg { min-height:1.5em; text-align:center; max-width:320px; }
#loginMsg.err { color:var(--err); }
.hidden { display:none !important; }