:root{
  --bg:#0f1115; --bg2:#151922; --fg:#e6e6e6; --dim:#8b93a1;
  --line:#232936; --acc:#4c8dff; --user:#1b2432; --ai:#151922;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--fg);
  font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  overflow:hidden;
}
#app{display:grid;grid-template-rows:44px 1fr auto;height:100%}

/* header */
#bar{
  display:flex;align-items:center;gap:6px;padding:0 8px;
  background:var(--bg2);border-bottom:1px solid var(--line);
}
#title{font-weight:600;white-space:nowrap}
#up,#model{
  max-width:132px;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:12px;
}
#up{margin-left:auto}
#model{margin-left:4px}
.icon{
  background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer;
  width:28px;height:28px;border-radius:6px;line-height:1;
}
.icon:hover{background:var(--bg);color:var(--fg)}

/* side */
#side{
  position:fixed;left:0;top:44px;bottom:0;width:220px;z-index:5;
  background:var(--bg2);border-right:1px solid var(--line);overflow:auto;
}
.side-head{padding:8px 10px;color:var(--dim);font-size:12px}
.sitem{
  padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;
}
.sitem:hover{background:var(--bg)}
.sitem.on{background:var(--user)}
.sdel{float:right;color:var(--dim);padding:0 4px}
.hidden{display:none !important}

/* chat */
#chat{overflow-y:auto;padding:12px 12px 4px}
#empty{text-align:center;color:var(--dim);margin-top:22vh}
#empty .dim{font-size:12px}
.msg{margin:0 0 14px;display:flex}
.msg .body{max-width:min(820px,92%);padding:8px 11px;border-radius:10px;overflow-wrap:anywhere}
.msg.user{justify-content:flex-end}
.msg.user .body{background:var(--user)}
.msg.ai .body{background:var(--ai);border:1px solid var(--line)}
.msg.err .body{background:#3a1d1d;border:1px solid #6b2b2b}
.role{font-size:11px;color:var(--dim);margin-bottom:3px}
.cursor{display:inline-block;width:7px;height:14px;background:var(--acc);vertical-align:-2px;animation:bk .9s steps(1) infinite}
@keyframes bk{50%{opacity:0}}
/* 推理模型的思维链：灰色、可滚动，正文到达前给用户反馈 */
.think{
  color:var(--dim);font-size:12px;line-height:1.5;border-left:2px solid var(--line);
  padding:0 0 0 7px;margin:0 0 7px;max-height:150px;overflow:auto;white-space:pre-wrap;
}

/* 服务端渲染好的 HTML（客户端不做 Markdown 解析） */
.body p{margin:0 0 8px}
.body p:last-child{margin-bottom:0}
.body .sp{height:8px}
.body pre{
  background:#0b0d12;border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;overflow:auto;margin:6px 0;
}
.body code{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.body :not(pre)>code{background:#0b0d12;padding:1px 4px;border-radius:4px}
.body .li{margin:0 0 3px}
.body blockquote{border-left:3px solid var(--line);padding-left:8px;color:var(--dim);margin:6px 0}
.body h3{font-size:15px;margin:8px 0 6px}
.body hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.body a{color:var(--acc)}
.chd{color:var(--dim);font-size:11px;margin-bottom:2px}

/* input */
#inputBar{
  display:flex;gap:6px;align-items:flex-end;padding:8px;
  background:var(--bg2);border-top:1px solid var(--line);
}
#input{
  flex:1;resize:none;max-height:140px;min-height:36px;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font:inherit;outline:none;
}
#input:focus{border-color:var(--acc)}
#btnSend,#btnStop{
  height:36px;padding:0 14px;border:0;border-radius:8px;cursor:pointer;
  background:var(--acc);color:#fff;font-size:13px;
}
#btnStop{background:#5a6472}
#btnSend:disabled{background:#2b3340;opacity:.6}

/* settings */
#mask{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10;
  display:flex;align-items:center;justify-content:center;
}
#settings{
  width:min(420px,92vw);max-height:86vh;overflow:auto;padding:16px;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
}
#settings h3{margin-bottom:10px;font-size:15px}
#settings label{display:block;margin-bottom:8px;font-size:12px;color:var(--dim)}
#settings input,#settings textarea,#settings select{
  width:100%;margin-top:3px;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;
}
.row{display:flex;gap:8px;margin-top:4px}
.row button{flex:1;padding:7px;border:0;border-radius:8px;cursor:pointer;background:var(--acc);color:#fff}
#cfgClose{background:#5a6472}
.dim{color:var(--dim)}
.tiny{font-size:11px;margin-top:8px}