:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#667085; --card:#fff; --line:#e3e6ec; --accent:#2f6fed; --warn:#b54708; --err:#b42318; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171d; --fg:#e8ebf1; --muted:#9aa3b2; --card:#1d222b; --line:#2d3441; --accent:#6c9bff; --warn:#f5a54a; --err:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--fg); }
[hidden] { display:none !important; }
#login { max-width:360px; margin:15vh auto; padding:0 16px; text-align:center; }
.btn { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:8px 16px; font:inherit; cursor:pointer; text-decoration:none; }
.btn:disabled { opacity:.5; cursor:default; }
.link { background:none; border:0; color:var(--accent); font:inherit; cursor:pointer; padding:4px 8px; }
#app { display:grid; grid-template-columns:260px 1fr; height:100vh; }
aside { border-right:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; min-height:0; }
aside header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
.new { display:flex; gap:8px; padding:12px 16px; }
.new select { flex:1; min-width:0; padding:6px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
#convs { list-style:none; margin:0; padding:0 8px 16px; overflow:auto; }
#convs li { padding:8px; border-radius:8px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#convs li:hover, #convs li.on { background:var(--bg); }
#convs small { color:var(--muted); display:block; }
main { display:flex; flex-direction:column; min-height:0; }
#banner { padding:8px 16px; background:var(--card); border-bottom:1px solid var(--line); color:var(--warn); }
#msgs { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.m { max-width:min(760px,92%); padding:10px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); white-space:pre-wrap; word-break:break-word; }
.m.user { align-self:flex-end; background:var(--accent); color:#fff; border-color:transparent; }
.m.status { align-self:center; background:none; border:0; color:var(--muted); font-size:13px; padding:0; }
.m.err { color:var(--err); }
.m.ask { border-color:var(--warn); }
form { border-top:1px solid var(--line); background:var(--card); padding:12px 16px; }
textarea { width:100%; resize:vertical; max-height:40vh; border:1px solid var(--line); border-radius:8px; padding:8px; font:inherit; background:var(--bg); color:var(--fg); }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
@media (max-width:720px) { #app { grid-template-columns:1fr; grid-template-rows:auto 1fr; } aside { max-height:40vh; border-right:0; border-bottom:1px solid var(--line); } }

#chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border:1px solid var(--line); border-radius:999px; background:var(--bg); font-size:13px; }
.chip.bad { border-color:var(--err); color:var(--err); }
.chip button { background:none; border:0; color:var(--muted); cursor:pointer; padding:0; font:inherit; }
.m a.dl { color:var(--accent); font-weight:600; }
.m.user .atts { font-size:12px; opacity:.85; margin-top:4px; }