:root { --bg:#14161a; --panel:#1d2026; --line:#2c3038; --text:#e8e9ec; --dim:#9aa0aa; --accent:#4f8cff; --me:#2a4f8f; --bad:#e5534b; --ok:#3fb950; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height:100vh; display:flex; flex-direction:column; padding-bottom: env(safe-area-inset-bottom); }
header { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding: calc(env(safe-area-inset-top) + 8px) 14px 8px; background:var(--panel); border-bottom:1px solid var(--line); }
header h1 { flex:1; font-size:17px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-btn { background:none; border:0; color:var(--accent); font-size:16px; padding:6px 4px; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--dim); flex:none; }
.dot.ok { background:var(--ok); } .dot.bad { background:var(--bad); }
main { flex:1; padding:14px; }
section h2 { font-size:20px; margin:4px 0 10px; }
label { display:block; margin:14px 0; color:var(--dim); font-size:14px; }
input, textarea { width:100%; margin-top:6px; padding:12px; font-size:17px; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:10px; }
button { font:inherit; border-radius:10px; padding:11px 16px; border:1px solid var(--line); color:var(--text); background:var(--panel); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.ghost { background:none; }
button.link { background:none; border:0; color:var(--accent); padding:8px 0; }
button.danger { color:var(--bad); }
button:disabled { opacity:.5; }
.row { display:flex; gap:10px; margin-bottom:12px; }
.small { color:var(--dim); font-size:13px; }
#chat-list { list-style:none; margin:0; padding:0; }
.chat-item { display:block; width:100%; text-align:left; margin:0 0 8px; padding:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item.running::after { content:" \2022 working"; color:var(--accent); font-size:13px; }
.settings { margin-top:28px; border-top:1px solid var(--line); padding-top:14px; }
#v-chat { padding-bottom:90px; }
#msgs { display:flex; flex-direction:column; gap:10px; }
.msg { max-width:92%; padding:10px 12px; border-radius:14px; background:var(--panel); overflow-wrap:anywhere; }
.msg.user { align-self:flex-end; background:var(--me); white-space:pre-wrap; }
.msg.assistant { align-self:flex-start; }
.msg.auto { border-left:3px solid var(--accent); }
.msg.pending { opacity:.6; }
.msg p { margin:.3em 0; } .msg pre { overflow-x:auto; background:#0e1013; padding:8px; border-radius:8px; font-size:13px; }
.msg code { font-size:13px; } .msg a { color:var(--accent); }
.msg table { border-collapse:collapse; display:block; overflow-x:auto; } .msg td, .msg th { border:1px solid var(--line); padding:4px 6px; }
#working { color:var(--dim); font-size:14px; margin-top:10px; }
.spin { display:inline-block; width:12px; height:12px; border:2px solid var(--dim); border-top-color:transparent; border-radius:50%; animation:spin 1s linear infinite; vertical-align:-1px; }
@keyframes spin { to { transform:rotate(360deg); } }
#composer { position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; align-items:flex-end; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); }
#composer textarea { margin:0; resize:none; max-height:160px; }
#toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(90px + env(safe-area-inset-bottom)); background:#000c; color:#fff; padding:10px 14px; border-radius:10px; font-size:14px; max-width:90%; z-index:5; }
[hidden] { display:none !important; }