:root {
  --bg: #eef2f7;
  --panel: #ffffff;
  --panel-2: #f7fafd;
  --line: #e3eaf3;
  --line-2: #eef2f7;
  --text: #16223a;
  --text-2: #5b6b82;
  --text-3: #8b9bb0;
  --brand: #1f6feb;
  --brand-weak: #e8f1ff;
  --ok: #17936a;
  --warn: #b7791f;
  --err: #d64545;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(22, 34, 58, .05), 0 6px 18px rgba(22, 34, 58, .05);
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--brand); text-decoration: none; }

/* ---------------------------------------------------------------- 布局 */

.topbar {
  height: 56px; display: flex; align-items: center; gap: 24px;
  padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
/* 顶栏里的文字一律不换行。中文的 min-content 宽度只有**一个字**，flex 子项被
   压缩时会逐字竖排（手机上「问答」变成「问」在上、「答」在下，「修改密码」变成
   一列四个字），看起来像布局崩了。宁可溢出，再由下面的断点决定该砍掉谁。 */
.topbar .brand, .topbar nav a, .topbar .btn, .topbar .muted, .topbar .pill {
  white-space: nowrap;
}
.topbar .brand { font-weight: 700; font-size: 16px; letter-spacing: .3px; }
.topbar .brand small { font-weight: 400; color: var(--text-3); margin-left: 8px; font-size: 12px; }
/* 「修改密码」在窄屏上缩成「密码」，由 .lbl-lg / .lbl-sm 二选一显示 */
.topbar .lbl-sm { display: none; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a {
  padding: 6px 14px; border-radius: 8px; color: var(--text-2); font-size: 13px;
}
.topbar nav a:hover { background: var(--panel-2); }
.topbar nav a.active { background: var(--brand-weak); color: var(--brand); font-weight: 600; }
.topbar .spacer { flex: 1; }

.page { max-width: 1240px; margin: 0 auto; padding: 28px 24px 60px; }
.page.wide { max-width: none; }
/* 管理页是数据密集型的，放宽上限；但也不无限拉（超宽屏上表格会散掉） */
.page.admin { max-width: 1560px; }

h1.page-title { font-size: 28px; margin: 0 0 8px; letter-spacing: .5px; }
p.page-sub { margin: 0 0 24px; color: var(--text-2); font-size: 14px; }

/* ---------------------------------------------------------------- 卡片 */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }
.card-hd {
  padding: 14px 20px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
}
.card-hd h3 { margin: 0; font-size: 15px; }
.card-hd .spacer { flex: 1; }
.card-bd { padding: 18px 20px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow);
}
.stat .k { color: var(--text-2); font-size: 14px; margin-bottom: 10px; }
.stat .v { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.stat .v small { font-size: 14px; font-weight: 400; color: var(--text-3); margin-left: 6px; }

/* ---------------------------------------------------------------- 表格 */

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th {
  background: #eaf2fd; color: #3c5473; font-weight: 600; text-align: left;
  padding: 12px 16px; white-space: nowrap;
}
.tbl th:first-child { border-radius: 10px 0 0 10px; }
.tbl th:last-child { border-radius: 0 10px 10px 0; }
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:hover { background: #fafcff; }
.tbl .muted { color: var(--text-3); font-size: 12px; }
.tbl .mono { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.tbl .actions { display: flex; gap: 8px; white-space: nowrap; }

/* 列多的表格（用户管理）保持最小宽度、由外层横向滚动，别让浏览器压缩列宽。
   压缩时中文的 min-content 只有**一个字**宽，按钮会逐字竖排。 */
.tbl-wrap { overflow-x: auto; }
.tbl.users { min-width: 1080px; }

/* ---------------------------------------------------------------- 行内操作菜单 */

/* 一行十几个动作不能再平铺：单元格一被压缩，flex-wrap 就把按钮叠成竖排
   （用户管理页实测整行撑到上千像素）。改成「主操作留在行内 + 其余进菜单」。
   .row-act 的 nowrap 是底线——菜单化之后这里只剩一两个按钮，不该再换行。 */
.row-act { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.menu-wrap { position: relative; }
.menu-wrap .caret { font-size: 9px; color: var(--text-3); }
/* fixed 定位：表格外层是 overflow:auto，absolute 会被裁掉；坐标由 JS 按按钮位置算 */
.menu {
  position: fixed; z-index: 60; min-width: 178px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(18, 28, 45, .16);
}
/* 这条必须写：上面 display:flex 的优先级高于浏览器默认的 [hidden]{display:none}，
   漏了菜单就一直挂在屏幕上（chat-backdrop 踩过同一个坑）。 */
.menu[hidden] { display: none; }
.menu-sec {
  padding: 8px 10px 3px; font-size: 11px; color: var(--text-3); letter-spacing: .3px;
}
.menu-sec:first-child { padding-top: 4px; }
.menu-item {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text-2); white-space: nowrap;
}
.menu-item:hover { background: var(--panel-2); color: var(--text); }
.menu-item.warn { color: var(--warn); }
.menu-item.danger { color: var(--err); }
.menu-item.danger:hover { background: #fdecec; }

/* ---------------------------------------------------------------- 元素 */

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text-2); font-size: 12px; line-height: 1.5; white-space: nowrap;
}
.pill.brand { background: var(--brand-weak); border-color: #cfe1ff; color: var(--brand); }
.pill.ok { background: #e7f7f0; border-color: #c7ecdc; color: var(--ok); }
.pill.warn { background: #fdf5e6; border-color: #f5e3bf; color: var(--warn); }
.pill.err { background: #fdecec; border-color: #f7d3d3; color: var(--err); }
.pill.mono { font-family: var(--mono); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--text-2);
  font-size: 13px; font-family: inherit; line-height: 1.6;
  /* 中文按钮被压缩时 min-content 只有一个字宽，会变成一列竖排的字。
     按钮文字一律不换行（顶栏那条注释是同一个坑）。 */
  white-space: nowrap;
}
.btn:hover { background: var(--panel-2); border-color: #d5e0ee; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #1a60d0; }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: #fdecec; border-color: #f7d3d3; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.link { border: none; background: none; padding: 4px 6px; color: var(--brand); }

.input, .select, textarea.input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 13px; background: var(--panel); color: var(--text); outline: none;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: #a9c9f8; box-shadow: 0 0 0 3px rgba(31, 111, 235, .1);
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }
.search-box { width: 320px; }

/* 自选股页的搜索框 + 候选下拉。下拉绝对定位在输入框正下方。
   .wl-search 自己当宽度宿主，里面的 input 一律 100% —— 否则 .search-box 的
   320px 与媒体查询里的 100% 会在「外层没宽度、内层按百分比」之间打架。 */
.wl-search { position: relative; flex: 0 1 320px; min-width: 0; }
.wl-search .search-box { width: 100%; }
.wl-sug {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); max-height: 280px; overflow-y: auto;
}
.wl-sug-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line-2);
}
.wl-sug-row:last-child { border-bottom: 0; }
.wl-sug-row:hover { background: var(--brand-weak); }
.wl-sug-name {
  color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-sug-add { color: var(--brand); font-weight: 600; }

.empty { padding: 40px; text-align: center; color: var(--text-3); font-size: 13px; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- 弹窗 */

.modal-mask {
  position: fixed; inset: 0; background: rgba(18, 28, 45, .42);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.modal {
  background: var(--panel); border-radius: 14px; width: 560px; max-width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: 0 18px 50px rgba(18, 28, 45, .24);
}
.modal-hd { padding: 18px 22px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.modal-bd { padding: 20px 22px; }
.modal-ft {
  padding: 14px 22px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ---------------------------------------------------------------- 聊天 */

.chat-shell { display: flex; height: calc(100vh - 56px); }
.sidebar {
  width: 250px; flex: 0 0 250px; background: var(--panel);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
}
.sidebar .hd { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.sidebar .list { flex: 1; overflow: auto; padding: 8px; }
.sidebar .item {
  padding: 10px 12px; border-radius: 9px; cursor: pointer; font-size: 13px;
  color: var(--text-2); display: flex; align-items: center; gap: 8px;
}
.sidebar .item:hover { background: var(--panel-2); }
.sidebar .item.active { background: var(--brand-weak); color: var(--brand); font-weight: 600; }
.sidebar .item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .item .x { opacity: 0; font-size: 15px; color: var(--text-3); }
.sidebar .item:hover .x { opacity: 1; }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-hd {
  height: 52px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--panel);
}
/* 默认把包裹打散：子元素直接参与 .chat-hd 的 flex 布局，宽屏与不包裹时完全一致。
   手机 ≤640 再把它变成真正的两行（见下方媒体块）。 */
.chat-hd .hd-row { display: contents; }

/* 抽屉遮罩：桌面没有抽屉，直接不渲染。这条必须排在 ≤900 媒体块**之前**——
   以前它写在媒体块后面，display:none 把手机块里的样式全压掉了，遮罩从来没
   显示过（抽屉开着没有暗化、点抽屉外也关不掉）。 */
.chat-backdrop { display: none; }
.chat-hd .spacer { flex: 1; }
.chat-scroll { flex: 1; overflow: auto; padding: 24px 0; }
.chat-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.msg { margin-bottom: 26px; }
.msg .role {
  font-size: 12px; color: var(--text-3); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.msg .bubble {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; box-shadow: var(--shadow);
}
.msg.user .bubble { background: var(--brand-weak); border-color: #d5e5ff; }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; }
.msg.user .bubble { max-width: 78%; }

/* 查询过程：整体折叠，默认只露一行"查询过程 · N 步"。
   之前每次工具调用都平铺几行原始 JSON，一次归因问答能铺满好几屏。 */
.tool-trace {
  margin: 8px 0 10px; font-size: 12px; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2);
}
.tool-trace > summary {
  cursor: pointer; padding: 6px 11px; color: var(--text-3); font-size: 12px;
  list-style: none; user-select: none;
}
.tool-trace > summary::-webkit-details-marker { display: none; }
.tool-trace > summary::before { content: '▸ '; color: var(--text-3); }
.tool-trace[open] > summary::before { content: '▾ '; }
.tool-trace .trace-lines {
  padding: 2px 12px 8px; border-top: 1px solid var(--line);
  max-height: 320px; overflow: auto;
}
.tool-trace .line { padding: 3px 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tool-trace .line b { color: var(--brand); font-weight: 600; }
.tool-trace .line.err { color: var(--err); }
/* 「正在抓取」不是错误，用中性色（红色会让用户以为查询失败了） */
.tool-trace .line.wait { color: var(--text-3); }
.tool-trace .brief { color: var(--text-3); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.tool-trace .trace-detail {
  flex: 1 1 100%; color: var(--text-3); font-size: 11.5px;
}
.tool-trace .trace-detail summary { cursor: pointer; }
.tool-trace pre {
  margin: 4px 0; background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 7px; padding: 8px 10px; font-family: var(--mono); font-size: 11.5px;
  max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}
details.think { margin: 8px 0; font-size: 12.5px; color: var(--text-2); }
details.think summary { cursor: pointer; color: var(--text-3); }

.composer { border-top: 1px solid var(--line); background: var(--panel); padding: 14px 24px 18px; }
.composer .inner { max-width: 900px; margin: 0 auto; }
.composer textarea {
  width: 100%; min-height: 64px; max-height: 220px; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font: inherit; font-size: 14px; outline: none;
}
.composer textarea:focus { border-color: #a9c9f8; box-shadow: 0 0 0 3px rgba(31,111,235,.1); }
.composer .row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.composer .row .spacer { flex: 1; }
.composer .tip { font-size: 12px; color: var(--text-3); }

/* ---------------------------------------------------------------- Markdown */

.md { font-size: 14px; line-height: 1.75; word-wrap: break-word; }
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md h1 { font-size: 20px; margin: 20px 0 12px; }
.md h2 { font-size: 17px; margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.md h3 { font-size: 15px; margin: 16px 0 8px; }
.md h4 { font-size: 14px; margin: 14px 0 6px; color: var(--text-2); }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 4px 0; }
.md blockquote {
  margin: 10px 0; padding: 8px 14px; border-left: 3px solid #cfe1ff;
  background: var(--panel-2); color: var(--text-2); border-radius: 0 8px 8px 0;
}
.md code {
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 5px;
  padding: 1px 5px; font-family: var(--mono); font-size: 12.5px;
}
.md pre {
  background: #f6f9fd; border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 14px; overflow: auto;
}
.md pre code { background: none; border: none; padding: 0; }
.md table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 12px 0; font-size: 13px; }
.md th { background: #eaf2fd; color: #3c5473; text-align: left; padding: 9px 12px; }
.md th:first-child { border-radius: 8px 0 0 8px; }
.md th:last-child { border-radius: 0 8px 8px 0; }
.md td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.md hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.md img { max-width: 100%; }
.md .mermaid { text-align: center; margin: 14px 0; }
.md .ec-chart { width: 100%; height: 360px; margin: 14px 0; }
.md a { border-bottom: 1px solid #cfe1ff; }

.cite-list { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.cite-list .hd { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.cite-list .c {
  font-size: 12.5px; color: var(--text-2); padding: 3px 0;
  display: flex; gap: 8px; align-items: baseline;
}
.cite-list .c .n {
  flex: 0 0 auto; color: var(--brand); font-family: var(--mono); font-size: 11px;
}

/* 答案反馈条：跟在引用列表后面，默认很淡，hover 才显眼 */
.vote-bar { margin-top: 10px; display: flex; gap: 4px; align-items: center; }
.vote-btn {
  border: none; background: none; cursor: pointer; padding: 3px 8px;
  font-size: 14px; line-height: 1; color: var(--text-3);
  border-radius: 6px; opacity: .55; transition: opacity .15s;
}
.vote-btn:hover { opacity: 1; background: rgba(31,111,235,.08); }
.vote-btn.on { opacity: 1; background: rgba(31,111,235,.14); color: var(--brand); }
.vote-btn.on[data-vote="-1"] { background: rgba(169,47,47,.12); color: var(--err); }
.vote-note { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.vote-note .input { flex: 1; font-size: 13px; padding: 6px 10px; }
.vote-note .btn { padding: 6px 12px; font-size: 12.5px; }


.typing::after {
  content: "▋"; color: var(--brand); animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  background: #16223a; color: #fff; padding: 11px 16px; border-radius: 9px;
  font-size: 13px; box-shadow: 0 10px 30px rgba(18,28,45,.3); max-width: 420px;
}
.toast.err { background: #a92f2f; }
.toast.ok { background: #14785a; }

@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* ---------------------------------------------------------------- 欢迎区 */
.welcome { max-width: 760px; margin: 6vh auto 40px; }
.welcome h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: .3px; }
.welcome .lead { color: var(--text-2); font-size: 14px; line-height: 1.8; margin: 0 0 20px; }
.welcome .examples { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.welcome .ex {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  background: var(--panel); font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.welcome .ex:hover { border-color: var(--brand); color: var(--brand); }
.welcome .caps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.welcome .tips { color: var(--text-3); font-size: 12px; line-height: 1.8; }
@media (max-width: 900px) {
  .welcome .examples { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 热点列表 */
/* 介绍页与登录后欢迎区共用。行结构：.hot-rank / .hot-main / .hot-bar */
.hot-list { display: grid; gap: 2px; }
.hot-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--line-2);
  color: inherit; text-decoration: none; position: relative;
}
.hot-item:last-child { border-bottom: 0; }
a.hot-item:hover { color: var(--brand); }
.hot-item:hover .hot-title { color: var(--brand); }
.hot-rank {
  flex: 0 0 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand), #4f8ff7);
  opacity: .9;
}
.hot-item:nth-child(n+4) .hot-rank {
  background: var(--panel-2); color: var(--text-3); border: 1px solid var(--line);
}
.hot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hot-title { font-size: 14px; line-height: 1.55; }
.hot-meta { font-size: 12px; color: var(--text-3); }
.hot-bar {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; background: transparent; overflow: hidden;
}
.hot-bar-fill { height: 100%; background: var(--brand); opacity: .35; }
.hot-skel .hot-title {
  display: inline-block; width: 60%; height: 12px; border-radius: 4px;
  background: var(--panel-2);
}
.hot-skel .hot-rank { background: var(--panel-2); }

/* 登录后欢迎区里的热点：更紧凑，整行可点填输入框 */
.welcome .hot { margin: 18px 0 4px; }
.welcome .hot-hd {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.welcome .hot-hd h3 { margin: 0; font-size: 14px; }
.welcome .hot-hd .spacer { flex: 1; }
.welcome .hot .hot-item { cursor: pointer; }
.welcome .quota-line { font-size: 12px; color: var(--text-3); }

/* 顶栏额度徽标 */
.quota-badge { font-size: 12px; }
.quota-badge.warn { background: #fff6e5; border-color: #f5d9a8; color: var(--warn); }
.quota-badge.err { background: #fdecec; border-color: #f6c6c6; color: var(--err); }

/* ================================================================
   视觉打磨：logo 接入 + 细节（导航、按钮、卡片、热点、登录页）
   ================================================================ */

/* 品牌区现在是 <a>，别继承链接的蓝色下划线 */
.topbar .brand, .lp-top .brand { text-decoration: none; color: var(--text); display: flex; align-items: center; }
.brand .logo { width: 24px; height: 24px; margin-right: 9px; border-radius: 7px; display: block;
  box-shadow: 0 1px 3px rgba(31, 111, 235, .28); }
.logo-lg { width: 46px; height: 46px; border-radius: 13px; display: block; margin: 0 auto 12px;
  box-shadow: 0 4px 14px rgba(31, 111, 235, .25); }

/* 顶栏：半透明 + 毛玻璃，滚动时内容从下面透过去不刺眼 */
.topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar nav a { border-radius: 8px; padding: 6px 12px; transition: background .15s, color .15s; }
.topbar nav a.active { box-shadow: inset 0 -2px 0 var(--brand); }

/* 按钮：过渡更顺，hover 轻微抬起 */
.btn { transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(22, 34, 58, .09); }
.btn:active { transform: translateY(0); }
.btn.primary:hover { box-shadow: 0 4px 14px rgba(31, 111, 235, .28); }

/* 卡片：hover 时阴影略微加深，暗示"可点/可读" */
.card { transition: box-shadow .18s, border-color .18s; }
.card:hover { box-shadow: 0 2px 4px rgba(22, 34, 58, .06), 0 10px 26px rgba(22, 34, 58, .07); }

/* 热点行：hover 给一层浅底，点起来更有反馈 */
.hot-item { border-radius: 8px; transition: background .15s; }
.hot-item:hover { background: var(--panel-2); }
.hot-rank { box-shadow: 0 1px 3px rgba(31, 111, 235, .25); }

/* 输入框聚焦时更明显一点 */
.input:focus, .select:focus, textarea.input:focus { box-shadow: 0 0 0 3px var(--brand-weak); }

/* 表格：行 hover 已有，加个表头更清楚的边界 */
.tbl thead th { letter-spacing: .2px; }

/* 空态图标位（纯 CSS，不用图片） */
.empty::before { content: "◎"; display: block; font-size: 22px; color: var(--line); margin-bottom: 6px; }

/* 版本提示条：服务端已更新、当前页面还是旧 JS 时出现 */
.build-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: #1f6feb; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; box-shadow: 0 8px 24px rgba(31,111,235,.35); z-index: 999;
}
.build-banner a { color: #fff; text-decoration: underline; font-weight: 600; }

/* ================================================================
   移动端适配
   手机上撑破页面的原因几乎都是「固定像素宽度」：顶栏一行塞不下、
   登录卡片写死 380px、数据页宽表格——表现为右侧被切掉 + 整页横向滚动。
   ================================================================ */
@media (max-width: 900px) {
  /* 顶栏：手机没空间放「N 个可用模型」这类次要信息，直接收起 */
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar .brand small { display: none; }
  #nav-model { display: none !important; }
  .topbar nav a { padding: 6px 9px; font-size: 12.5px; }
  .topbar .btn { padding: 4px 9px !important; font-size: 12px !important; }
  .quota-badge { display: none !important; }

  /* 会话列表从"直接隐藏"改成抽屉：手机上要能切会话 */
  .sidebar {
    display: flex; position: fixed; top: 56px; bottom: 0; left: 0; z-index: 40;
    width: 78vw; max-width: 320px; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 0 8px 30px rgba(15,27,48,.18);
  }
  .sidebar.open { transform: none; }
  /* 遮罩用 opacity 过渡而不是 display 切换：JS 只加 .open 类。
     pointer-events 兜底——没开时即使 opacity=0 也不挡点击。 */
  .chat-backdrop {
    display: block; position: fixed; inset: 56px 0 0 0;
    background: rgba(15,27,48,.35); z-index: 39;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .chat-backdrop.open { opacity: 1; pointer-events: auto; }
  .btn-sessions { display: inline-block !important; }
  /* 聊天头部一行放不下：允许换行，模型下拉自适应宽度 */
  .chat-hd { flex-wrap: wrap; row-gap: 8px; }
  /* min-width:0 必须有：flex 项的 min-width:auto 对 select 是「最长选项文本」的
     固有宽度（"DeepSeek-V4.1-Flash" ≈ 277px），不放行的话 393px 视口第二行
     内容 431px 直接挤出屏幕（layout viewport 被撑到 442px）。 */
  #model-pick { width: auto !important; flex: 1 1 150px; min-width: 0; }
  .chat-hd .muted { white-space: nowrap; }   /* hd-row 包裹后不再是直接子元素 */
  /* 宽表格（模型管理 / 用户管理）改为卡片内横向滚动。原先这条只写在 ≤640 块里，
     641–900px 这段是漏的——768px（iPad 竖屏）下 /models 整页横向滚动 324px、
     /admin 247px，右侧直接被切掉。 */
  .card { overflow-x: auto; }
}

@media (max-width: 640px) {
  /* 手机顶栏只有 56px 一行可用——.chat-shell / .sidebar / .chat-backdrop 三处
     都按 56px 算高度，加高会连锁改三处，所以只能砍内容：用户名、模型数、
     额度徽标全收起，只留品牌 + 导航 + 两个操作。 */
  .topbar { gap: 6px; padding: 0 10px; }
  /* 品牌文字让位给导航。管理员顶栏有 4 个导航链接，实测 393px 溢出 9px、
     360px 溢出 42px——「一财府」三个字在这里没有信息量（logo 就是品牌），
     font-size:0 让它占 0 宽，省出约 46px。别改成 display:none，
     那会把 logo 一起藏掉（logo 是 .brand 的子元素）。 */
  .topbar .brand { font-size: 0; }
  .brand .logo { width: 22px; height: 22px; margin-right: 0; }
  .topbar nav { gap: 2px; }
  .topbar nav a { padding: 6px 6px; font-size: 12px; }
  .topbar .btn { padding: 5px 9px !important; font-size: 12px !important; }
  .topbar .uname { display: none !important; }
  /* 「修改密码」四个字是压垮顶栏的最后一根稻草，缩成「密码」 */
  .topbar .lbl-lg { display: none; }
  .topbar .lbl-sm { display: inline; }
  /* 聊天头部的「模型」标签也会被压成竖排；手机上这个下拉本身自解释，收起 */
  .chat-hd .muted { display: none; }   /* hd-row 包裹后不再是直接子元素 */
}

@media (max-width: 640px) {
  .page { padding: 18px 14px 48px; }
  .card-hd { flex-wrap: wrap; row-gap: 8px; }
  h1.page-title { font-size: 22px; }
  .search-box { width: 100%; }
  /* 窄屏让搜索框独占一行（.toolbar 在这里是 flex-wrap），候选下拉跟着铺满。
     不设的话它会跟右侧的计数/按钮挤在同一行，下拉只有 200px 出头。 */
  .wl-search { flex: 1 1 100%; }
  .modal { width: calc(100vw - 28px) !important; }
  .toolbar { flex-wrap: wrap; }
}

/* 会话抽屉的开关按钮：宽屏不显示（遮罩的 display:none 已前移到 .chat-hd 附近） */
.btn-sessions { display: none; }

/* ---------------------------------------------------------------- 手机上的聊天输入区 */
@media (max-width: 640px) {
  /* 100vh 在手机浏览器里是「地址栏收起」时的高度，比实际可视区高，
     于是底部输入框被顶到屏幕外——看起来就是"输入框太靠下/被挡住"。
     dvh 跟随真实可视高度；老浏览器保留 vh 那行作为回退。 */
  .chat-shell { height: calc(100vh - 56px); height: calc(100dvh - 56px); }

  /* 输入区：贴底但不至于顶到屏幕边缘，并给 iPhone 底部横条留位 */
  .composer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .composer textarea {
    min-height: 84px;                 /* 手机上默认 64px 太矮，写两行就看不全 */
    font-size: 16px;                  /* <16px 时 iOS 聚焦会自动放大整页 */
    padding: 12px;
  }
  .composer .row { margin-top: 8px; }
  .composer .row .btn { padding: 8px 18px; }

  /* 头部与消息区收窄内边距，把垂直空间留给正文和输入框 */
  /* 头部固定高 52px 是重叠事故的根源：flex-wrap 换行后第二行直接叠画在
     欢迎区「一财府」标题上（wrap 只管换行，撑不开固定高度）。
     手机上改 auto 让它真正长高——.chat-main 是 flex 列，多出的高度由
     .chat-scroll(flex:1) 让出，不牵连 .topbar 那套 56px 计算。 */
  .chat-hd { height: auto; min-height: 52px; padding: 8px 12px; gap: 8px; }
  /* 两个 hd-row 各占一行：第一行 ☰+标题，第二行 模型+工具+思考。
     flex-basis:100% 是强制换行点，任何屏宽下行结构都稳定（393/360 都不会
     出现「思考」孤行）。第二行可用 ~353px，需求 150+64+64+gap16 ≈ 294，放得下。 */
  .chat-hd .hd-row { display: flex; flex: 0 0 100%; min-width: 0; align-items: center; gap: 8px; }
  .chat-inner { padding: 0 12px; }
  .chat-scroll { padding: 14px 0; }
  .welcome { margin: 2vh auto 20px; }
  .welcome h2 { font-size: 19px; }
}


/* 手机上适度删减：装饰性、说明性、运维用的内容先收起来，
   把垂直空间让给正文与输入框。桌面端不受影响。 */
@media (max-width: 640px) {
  .welcome .caps { display: none; }        /* 能力标签：纯装饰，热点列表已说明问题 */
  .welcome .tips { display: none; }        /* 使用说明长文：开关本身有 title 提示 */
  #card-jobs { display: none; }            /* 任务流水：运维信息，手机上看不动 */
  .lp-qs .lp-q:nth-child(n+3) { display: none; }   /* 介绍页示例问题 4 → 2 */
}