/* ============================================================
   心理 RAG · 对话界面样式
   ------------------------------------------------------------
   2026-09-15 结构整理：此前文件是「底座 + 三段补丁」的叠加形态
   （:root 定义 2 次、.auth-* 2 次、.topbar 3 次，1257 行之后几乎全是
   override），旧紫罗兰配色因此残留（.primary-btn 紫色光晕、顶栏蓝白渐变）。
   本次把 override 全部折回主区块，只保留：
     1) 一套设计令牌（浅色 + html[data-theme="dark"] 深色）
     2) 组件区块按「框架 → 组件 → 响应式 → 无障碍」排列
   新增组件：主题开关 / 会话搜索 / 骨架屏 / 代码块 / 编号列表 /
             消息头像与时间 / 复制按钮 / 导出下拉 / 字数控 / 风险 chip
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
  color-scheme: light;

  /* 底色与文字 */
  --bg: #f6f5f1;
  --surface: #fffefa;
  --surface-hover: #f0f3eb;
  --border: #dfe5da;
  --border-strong: #bdcdbc;
  --text: #243b32;
  --text-secondary: #596c62;
  --text-muted: #6c7d72;

  /* 主色（鼠尾草绿，与主站 --green:#315b48 同一支） */
  --accent: #376b54;
  --accent-hover: #295640;
  --accent-soft: #e7efe1;
  --accent-ghost: rgba(55, 107, 84, 0.09);
  --teal: #68967b;
  --teal-dark: #376b54;
  /* 主色底上的前景色：深色模式主色变浅，白字会看不清 */
  --on-accent: #ffffff;
  --spinner-track: rgba(255, 255, 255, 0.4);
  --spinner-head: #ffffff;

  /* 语义色 */
  --danger: #ef4444;
  --danger-soft: #fee2e2;
  --danger-text: #8c3a3a;
  --danger-outline: #e9c3c3;
  --success: #22c55e;
  --risk-soft: #fdf3e0;
  --risk-text: #7a5b1e;
  --risk-border: #f2d9a8;

  /* 分区底色（原先是散落的硬编码，深色模式需要整组替换） */
  --sidebar-bg: #edf1e8;
  --session-active: #dde8d7;
  --bubble-user: #e0ebd9;
  --bubble-user-border: #cfdfc4;
  --note-bg: #fff7e6;
  --note-border: #f2d9a8;
  --note-text: #7a5b1e;
  --state-bg: #fff8e6;
  --state-border: #e6cf9a;
  --state-text: #8a6d1f;
  --input-bg: rgba(255, 255, 255, 0.7);
  --input-bg-focus: #ffffff;
  --input-bg-invalid: #fff5f5;
  --code-bg: #eef2ea;
  --code-border: #dfe5da;
  --code-text: #28503e;
  --overlay: rgba(26, 26, 46, 0.4);
  --plant-1: #bed0af;
  --plant-2: #7fa386;
  --plant-3: #d8dfb8;

  /* 阴影与尺寸 */
  --shadow-sm: 0 1px 2px rgba(36, 59, 50, 0.05);
  --shadow: 0 5px 22px rgba(36, 59, 50, 0.06);
  --shadow-lg: 0 20px 55px rgba(36, 59, 50, 0.1);
  --radius: 14px;
  --radius-sm: 10px;
  --topbar-h: 64px;
}

/* 深色令牌：与主站 111/html/index.html 的暗色取值同源（--green:#8fd0b0） */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121815;
  --surface: #1a211d;
  --surface-hover: #212a25;
  --border: #2b352f;
  --border-strong: #3c4a42;
  --text: #e6ece7;
  --text-secondary: #a9b8ad;
  --text-muted: #8b9a90;
  --accent: #8fd0b0;
  --accent-hover: #a6ddc2;
  --accent-soft: #243029;
  --accent-ghost: rgba(143, 208, 176, 0.14);
  --teal: #8fd0b0;
  --teal-dark: #6aa888;
  --on-accent: #0f1c16;
  --spinner-track: rgba(15, 28, 22, 0.35);
  --spinner-head: #0f1c16;
  --danger: #f09595;
  --danger-soft: #3a2426;
  --danger-text: #f3b0b0;
  --danger-outline: #5a3434;
  --success: #78d39a;
  --risk-soft: #332a17;
  --risk-text: #e8cf9a;
  --risk-border: #5c4a22;
  --sidebar-bg: #161d19;
  --session-active: #243029;
  --bubble-user: #26332c;
  --bubble-user-border: #33443a;
  --note-bg: #332a17;
  --note-border: #5c4a22;
  --note-text: #e8cf9a;
  --state-bg: #332a17;
  --state-border: #5c4a22;
  --state-text: #e8cf9a;
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-bg-focus: #1f2823;
  --input-bg-invalid: #2a1d1d;
  --code-bg: #141b17;
  --code-border: #2b352f;
  --code-text: #a8dcc2;
  --overlay: rgba(6, 10, 8, 0.62);
  --plant-1: #3d5245;
  --plant-2: #315a45;
  --plant-3: #4a5a3c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 5px 22px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 55px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   2. 基础
   ============================================================ */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select {
  font: inherit;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-hover);
}
html[data-theme="dark"] ::selection {
  background: var(--accent-ghost);
  color: var(--text);
}

/* 「返回上一级」：次级导航（按 URL 层级回退，见 app.js 的 parentHref）。
   原来是裸文本 + hover 下划线，在一排胶囊/按钮控件里显得没有载体；现在做成
   与顶栏其他控件同语言的轻量 chip：无边框、hover 才浮出底与描边，不用下划线。 */
a.home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
a.home-link svg {
  flex-shrink: 0;
  pointer-events: none;   /* 命中判断始终落在 <a> 上，bindHomeGuard 靠 closest(".home-link") */
}
a.home-link:hover {
  color: var(--accent);
  background: var(--surface-hover);
  border-color: var(--border);
}
a.home-link:active {
  transform: scale(0.98);
}
/* 窄屏顶栏要放下三个 chip，「返回上一级」退化为「上一级」 */
.hl-short { display: none; }

/* 滚动条（Firefox + WebKit 各自一套） */
.message-list, .session-list, .inspector-body, .prompt-preview, .code-block {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.message-list::-webkit-scrollbar, .session-list::-webkit-scrollbar,
.inspector-body::-webkit-scrollbar, .prompt-preview::-webkit-scrollbar,
.code-block::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.message-list::-webkit-scrollbar-thumb, .session-list::-webkit-scrollbar-thumb,
.inspector-body::-webkit-scrollbar-thumb, .prompt-preview::-webkit-scrollbar-thumb,
.code-block::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
}
.message-list::-webkit-scrollbar-thumb:hover, .session-list::-webkit-scrollbar-thumb:hover,
.inspector-body::-webkit-scrollbar-thumb:hover, .prompt-preview::-webkit-scrollbar-thumb:hover,
.code-block::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.message-list::-webkit-scrollbar-track, .session-list::-webkit-scrollbar-track,
.inspector-body::-webkit-scrollbar-track, .prompt-preview::-webkit-scrollbar-track,
.code-block::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   3. 顶栏
   ============================================================ */
/* 底色统一到 --surface（暖白）：此前是 #ffffff → #fbfbff 的蓝白渐变，
   与暖白卡面并排时能看到一条冷色调 */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
  box-shadow: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: none;
}

.brand-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.brand-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-chip {
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: 4px;
  padding: 4px 10px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* 连接状态：可点击重新检测 */
button.conn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  border: none;
  background: transparent;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
button.conn:hover {
  background: var(--surface-hover);
}
.conn .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.conn.online .dot { background: var(--success); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); }
.conn.offline .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.15s;
}
.icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-hover);
}

/* ============================================================
   4. 页面框架
   ============================================================ */
.workspace {
  padding-top: var(--topbar-h);
  /* 移动端地址栏/软键盘：优先用动态视口高度，避免 100vh 造成的底部遮挡 */
  height: 100vh;
  height: 100dvh;
}

.page {
  display: none;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
}

.page.active {
  display: flex;
  animation: pageFade 0.25s ease;
}

@keyframes pageFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   5. 通用按钮
   ============================================================ */
.primary-btn {
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  /* 原为 rgba(99,91,255,.25)（旧紫罗兰）→ 与新主色一致 */
  box-shadow: 0 2px 8px var(--accent-ghost);
}
.primary-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.primary-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.ghost-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.ghost-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-hover);
}
.ghost-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.danger-btn {
  border: none;
  background: var(--danger-soft);
  color: var(--danger);
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
}
.danger-btn:hover {
  background: var(--danger-soft);
  filter: brightness(0.95);
}

/* 触觉反馈：按压轻缩，提升点按手感（鼠标/触屏通用） */
.primary-btn:active, .ghost-btn:active, .danger-btn:active,
.send-btn:active, .stop-btn:active, .suggestion:active, .session:active {
  transform: scale(0.97);
}

/* 主题开关：桌面/移动都在顶栏，登录页固定在右上角 */
.theme-toggle {
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 13px;
}
.auth-theme {
  position: absolute;
  top: 24px;
  right: 40px;
  z-index: 2;
}

/* ============================================================
   6. 侧栏通用
   ============================================================ */
.sidebar {
  width: 245px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  font-weight: 600;
  font-size: 14px;
}
.section-title span {
  color: var(--text);
}

/* ============================================================
   7. 对话布局
   ============================================================ */
.chat-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

.chat-main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-ghost), transparent 60%),
    var(--bg);
}

.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  min-height: 65px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.chat-toolbar strong {
  flex: 0 1 auto;
  /* min-width:0 必须写：flex item 默认 min-width:auto，配 nowrap 会让标题
     拒绝收缩，窄屏下把右侧的「重命名 / 导出」挤出工具栏 */
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}
.model-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.heading-spacer {
  flex: 1;
}

.history-toggle { display: none; }

/* 导出下拉：<details> 原生可键盘操作，只需清掉默认三角 */
.export-menu { position: relative; }
.export-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
/* <details> 自带的三角要清三遍：WebKit 的 ::-webkit-details-marker、Firefox 的
   ::marker、以及 list-style。清完只留「导出」两个字，与旁边的「重命名」等宽一致。 */
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu > summary::marker { content: ""; }
.export-menu > summary::-moz-list-bullet { list-style-type: none; }
.export-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 172px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.export-pop .ghost-btn {
  display: block;
  width: 100%;
  text-align: left;
}

/* ============================================================
   8. 消息列表
   ============================================================ */
.message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px clamp(20px, 3vw, 48px);
}

/* 长历史：跳过离屏消息的布局计算。未上屏项高度是估算值，
   渲染后由 JS 在下一帧再校正一次滚动位置 */
@supports (content-visibility: auto) {
  .message-list .message {
    content-visibility: auto;
    contain-intrinsic-size: auto 140px;
  }
}

/* --- 欢迎页 --- */
.welcome {
  max-width: 650px;
  margin: clamp(24px, 6vh, 70px) auto 30px;
  text-align: center;
}
.welcome .bot-avatar {
  width: 56px;
  height: 56px;
  border-radius: 21px 21px 8px 21px;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin: 0 auto 18px;
  box-shadow: none;
}
.welcome-kicker {
  display: block;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.welcome h2 {
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
.welcome p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 27px auto 0;
  width: 100%;
}
.suggestion {
  text-align: left;
  padding: 17px 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: none;
  white-space: normal;
  cursor: pointer;
}
.suggestion:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- 消息 --- */
.message {
  display: flex;
  margin-bottom: 20px;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message.user {
  justify-content: flex-end;
}

/* 层级：AI 侧有头像锚点，正文列自适应；用户侧无头像、整体右对齐 */
.message-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.message-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}
.message.user .message-body {
  align-items: flex-end;
}

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex-shrink: 0;
  /* 与气泡（而非「心理问答」标签）对齐：meta 行高 + 下边距 ≈ 25px */
  margin-top: 25px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: var(--accent);
  color: var(--on-accent);
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 6px;
}
.message.user .message-meta {
  justify-content: flex-end;
}
.message-time {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
}

.message-bubble {
  max-width: min(100%, 960px);
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 16px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.user .message-bubble {
  background: var(--bubble-user);
  color: var(--text);
  border-color: var(--bubble-user-border);
}

/* 危机拦截：气泡浅红描边，视觉上与普通回答区分 */
.message.crisis .message-bubble {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* 中/低危关怀提示（safety_note）：浅琥珀附注，保留换行 */
.message .safety-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  color: var(--note-text);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 回答内的代码与编号列表（renderAnswer 输出） */
.message-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 1px 5px;
  color: var(--code-text);
}
.message-bubble .code-block {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 10px;
  overflow-x: auto;
  white-space: pre;
}
.message-bubble .code-block code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
}
.message-bubble .li-num {
  display: inline-block;
  min-width: 20px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* --- 来源 chip --- */
.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.source-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 500;
}
.source-chip.has-risk {
  background: var(--risk-soft);
  color: var(--risk-text);
  border-color: var(--risk-border);
}
.source-chip.risk-high {
  background: var(--danger-soft);
  color: var(--danger-text);
  border-color: var(--danger-outline);
}
.risk-tag { margin-left: 6px; font-weight: 700; }

/* --- 回答状态 / 重试 / 复制 --- */
.message-state {
  margin-top: 10px;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.7;
  border-radius: 9px;
  background: var(--state-bg);
  border: 1px dashed var(--state-border);
  color: var(--state-text);
}
.message-state.error {
  background: var(--danger-soft);
  border-color: var(--danger-outline);
  color: var(--danger-text);
}
.message.incomplete .message-bubble { border-style: dashed; }
.message-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.retry-btn { font-size: 12px; padding: 6px 12px; }

/* 复制：常驻但低存在感的图标按钮。
   位置在 meta 行（名称/时间右侧），不额外占一行；桌面端悬停或键盘聚焦才显形，
   触屏没有 hover，用 @media (hover:none) 让它常显。 */
.msg-action {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.msg-action svg { display: block; }
/* 22px 图标对触屏偏小：用不可见的伪元素把命中区扩到 ~34px，不影响布局 */
.msg-action::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 8px;
}
.message:hover .msg-action,
.message:focus-within .msg-action { opacity: 1; }
.msg-action:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.msg-action:active { transform: scale(0.94); }
@media (hover: none) {
  .msg-action { opacity: 1; }
}

/* --- 技术耗时：默认收起 --- */
.timing-details { margin-top: 12px; }
.timing-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
}
.timing-details > summary::-webkit-details-marker { display: none; }
.timing-details > summary::before { content: "▸"; font-size: 10px; }
.timing-details[open] > summary::before { content: "▾"; }
.timing-details[open] > summary { margin-bottom: 8px; }

.timing-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  white-space: normal;
}
.message-bubble > .timing-bar { margin-top: 12px; }
.timing-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-weight: 500;
}

/* --- 回到最新 --- */
.jump-latest {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 136px;
  z-index: 6;
  padding: 7px 14px;
  font-size: 12px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.jump-latest:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ============================================================
   9. 输入区
   ============================================================ */
.composer {
  display: flex;
  gap: 10px;
  margin: 0 24px;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 14px;
  padding: 8px;
  resize: none;
  min-height: 52px;
  max-height: 160px;
  font-size: 16px;
  color: var(--text);
}
.composer textarea:focus {
  outline: none;
  box-shadow: none;
}
.composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ghost);
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.char-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.char-count.warn {
  color: var(--danger);
  font-weight: 600;
}

.send-btn {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.15s;
  box-shadow: none;
}
.send-btn:hover:not(:disabled) { background: var(--accent-hover); }
.send-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.stop-btn {
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.stop-btn:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.stop-btn:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.composer-note {
  margin: 9px 24px 15px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.composer-note span { margin-left: 14px; }

/* 流式气泡内的排队状态行（放行前展示，started/token 后隐藏） */
.queue-status {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--accent-soft);
  border: 1px solid var(--accent-ghost);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 6px;
  width: fit-content;
  max-width: 100%;
}

/* 加载指示：旋转环 */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--spinner-head);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   10. 右侧栏
   ============================================================ */
.inspector {
  width: 230px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.inspector-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.info-block {
  padding: 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.info-block:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.info-block h3 {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--text);
}
.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-row span { color: var(--text-secondary); }
.info-row strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.prompt-preview {
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-secondary);
  background: var(--surface-hover);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.info-retry { margin-top: 8px; font-size: 12px; padding: 6px 10px; }

/* ============================================================
   11. 会话列表
   ============================================================ */
.session-search {
  padding: 0 14px 10px;
}
.session-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.session-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ghost);
}

.session-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}
.session-empty {
  margin: 0;
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* 会话项：选择与删除是两个同级原生按钮，底色由 .session-row 承担。
   同时给 .session.active 上底色 —— 不支持 :has() 的浏览器（Firefox<121、
   Safari<15.4）会退化成「内层绿块」，功能与辨识度都还在，不会整行失色 */
.session-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.session {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 11px 8px 11px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  transition: all 0.12s;
}
.session:hover { color: var(--text); }
.session-row .session:hover { background: transparent; }
.session.active {
  background: var(--session-active);
  color: var(--accent);
}
.session-row:hover,
.session-row:focus-within { background: var(--bg); }
.session-row:has(.session.active) { background: var(--session-active); }
.session-row:has(.session.active):hover,
.session-row:has(.session.active):focus-within { background: var(--session-active); }

.session-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.session-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-time {
  font-size: 11px;
  opacity: 0.8;
}

.session-delete {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  /* 真实 <button> 需要的复位：padding 必须为 0（UA 默认 1px 6px 会把 × 挤偏），
     color 不用 inherit 的默认值，由下面的行状态显式指定 */
  border: none;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-right: 12px;
  font-size: 15px;
  line-height: 1;
  opacity: 1;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.session-row:hover .session-delete,
.session-row:focus-within .session-delete { color: var(--text); }
.session-row:has(.session.active) .session-delete,
.session-row:has(.session.active):hover .session-delete { color: var(--accent); }
.session-delete:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* 历史列表范围说明（后端上限 200 条） */
.session-scope {
  margin: 0;
  padding: 8px 20px 14px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================
   12. 弹窗（确认 / 输入）
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: grid;
  place-items: center;
  z-index: 300;
  animation: fadeIn 0.15s ease;
}
.modal-card {
  width: min(420px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  animation: modalIn 0.18s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.modal-message {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}
.modal-label { margin-top: 2px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.modal-error { margin-top: 8px; }

/* ============================================================
   13. Toast
   ============================================================ */
/* 用 text/surface 互换：浅色下是深底白字，深色下自动变成浅底深字 */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--text);
  color: var(--surface);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-width: min(420px, calc(100vw - 32px));
  transition: opacity 0.2s, transform 0.2s;
}
.toast.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* ============================================================
   14. 加载 / 空态骨架
   ============================================================ */
.state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
  color: var(--text-secondary);
}
.state-panel.inline { padding: 40px 20px; }
.state-panel .state-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.state-panel .state-detail {
  margin: 0;
  max-width: 520px;
  font-size: 13px;
  color: var(--text-muted);
  word-break: break-word;
}
.state-panel.error .state-title { color: var(--danger); }
.state-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
}
.state-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.skeleton {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 10px 2px;
}
.skeleton-msg {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(100%, 620px);
}
.skeleton-msg.user {
  align-self: flex-end;
  align-items: flex-end;
}
.skeleton-line {
  height: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--border) 25%, var(--surface-hover) 37%, var(--border) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w70 { width: 70%; }
.skeleton-line.w90 { width: 90%; }
@keyframes skeletonShimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* ============================================================
   15. 登录 / 注册（认证门禁）
   ============================================================ */
.auth-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(45px, 8vw, 130px);
  background: var(--bg);
  padding: 88px 40px 50px;
  overflow: auto;
}
/* 位置补偿：chip 自带 12px 横向内边距，left/top 相应回退，
   让「箭头 + 文字」的视觉起点与原来基本一致 */
.auth-home {
  position: absolute;
  left: 26px;
  top: 16px;
}

.auth-intro {
  width: 390px;
  max-width: 100%;
}
.intro-kicker {
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.auth-intro h2 {
  font-size: clamp(32px, 4vw, 47px);
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -0.04em;
  margin: 23px 0;
}
.auth-intro p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.95;
  margin: 0 0 16px;
}
.auth-intro .intro-caption { font-size: 13px; }
.intro-plant {
  width: 200px;
  height: 115px;
  position: relative;
  margin: 30px 0 5px;
}
.intro-plant span {
  position: absolute;
  bottom: 0;
  left: 70px;
  width: 64px;
  height: 90px;
  background: var(--plant-1);
  border-radius: 70px 0 70px 0;
  transform: rotate(-35deg);
  transform-origin: bottom right;
}
.intro-plant span:nth-child(2) {
  background: var(--plant-2);
  transform: rotate(32deg);
  left: 74px;
}
.intro-plant span:nth-child(3) {
  background: var(--plant-3);
  left: 7px;
  width: 48px;
  height: 62px;
  transform: rotate(-55deg);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 430px;
  max-width: 100%;
  flex-shrink: 0;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  animation: cardEnter 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.auth-logo {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  margin: 0 auto 18px;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.auth-logo:hover { transform: scale(1.05) rotate(-3deg); }
.auth-logo svg { display: block; }

.auth-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: 0.5px;
}
.auth-sub {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 28px;
  line-height: 1.6;
}

/* 字段块（label + 输入 + 错误） */
.auth-field { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.form-label-hint {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s ease;
}
.input-icon-spark { color: #ba7517; }
.input-wrap input {
  width: 100%;
  padding: 11px 12px 11px 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  outline: none;
  font-family: inherit;
}
.input-wrap input::placeholder { color: var(--text-muted); }
.input-wrap input:hover { border-color: var(--border-strong); }
.input-wrap input:focus {
  border-color: var(--accent);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 4px var(--accent-ghost);
}
.input-wrap:focus-within .input-icon { color: var(--accent); }
.input-wrap input[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--input-bg-invalid);
  box-shadow: 0 0 0 4px var(--danger-soft);
  animation: shake 0.4s ease;
}
.input-wrap:has(input[aria-invalid="true"]) .input-icon { color: var(--danger); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* 密码可见性开关：贴在输入框右内侧（输入框已为它预留 padding-right）。
   用显式 class 而不是 :has()，避免又引入一处兼容性依赖。 */
.input-wrap.has-toggle input { padding-right: 42px; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.pw-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.pw-toggle:active {
  transform: translateY(-50%) scale(0.94);
}
/* 图标只有一个（由 JS 换 innerHTML），这里不需要任何显隐开关 */
.pw-icon { display: inline-flex; }
.pw-toggle.is-on { color: var(--accent); }

/* 隐藏浏览器自带的密码显示按钮：Edge / IE 会在输入框右侧再画一个眼睛，
   与自绘按钮重叠成「两个眼睛」。单独成规则，避免不认识的浏览器整条丢弃。
   （若用户装了密码管理器扩展并注入图标，那一个前端管不到。） */
.input-wrap input::-ms-reveal,
.input-wrap input::-ms-clear {
  display: none;
}

.form-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--danger);
  min-height: 16px;
  line-height: 1.4;
}
.form-error:empty { display: none; }
.form-error-block { margin: 0 0 12px; }

/* 密码强度条（注册模式） */
.pw-strength {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  height: 4px;
}
.pw-strength span {
  flex: 1;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.3s ease;
}
.pw-strength[data-level="1"] span:nth-child(-n+1) { background: #d85a30; }
.pw-strength[data-level="2"] span:nth-child(-n+2) { background: #ba7517; }
.pw-strength[data-level="3"] span:nth-child(-n+3) { background: #1d9e75; }
.pw-strength[data-level="4"] span                { background: #1d9e75; }

.auth-submit {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  margin-top: 4px;
  position: relative;
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  overflow: hidden;
}
.auth-submit:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 5px 15px var(--accent-ghost);
}
.auth-submit:active:not(:disabled) { transform: translateY(0); }
.auth-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.auth-submit:disabled { opacity: 0.72; cursor: not-allowed; }
.auth-submit[data-loading="true"] .btn-label { opacity: 0.55; }
.auth-submit .btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--spinner-track);
  border-top-color: var(--spinner-head);
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
.auth-submit[data-loading="true"] .btn-spinner { display: inline-block; }
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 18px 0 12px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-divider span { padding: 0 12px; }

.auth-toggle {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--accent);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.auth-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-ghost);
}
.auth-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-foot {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.8;
}

/* ============================================================
   16. 工具类与无障碍
   ============================================================ */
.is-hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 键盘聚焦可见（可访问性 + 视觉一致性） */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
}

/* 降低动效偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .auth-submit:hover:not(:disabled) { transform: none; }
  .auth-logo:hover { transform: none; }
  .info-block:hover { transform: none; }
}

/* ============================================================
   17. 响应式
   ============================================================ */
@media (max-width: 1200px) {
  .inspector { display: none; }
}

@media (max-width: 760px) {
  :root { --topbar-h: 64px; }

  .topbar { padding: 0 14px; }
  /* 顶栏要同时放下「主题 / 退出」（登录页还要多一个「上一级」）：
     标题允许收缩省略，右侧控件组固定宽度，避免窄屏被挤出边界 */
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand > div { min-width: 0; }
  .brand-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-sub { display: none; }
  .brand-mark { display: none; }
  .top-actions { flex-shrink: 0; gap: 9px; }
  .top-actions .ghost-btn, .top-actions .theme-toggle {
    padding: 7px 10px;
    font-size: 13px;
  }
  .user-chip, .conn { display: none; }

  /* 小屏历史浮层：sidebar 收进浮层，由「对话记录」开关控制 */
  .chat-layout { position: relative; flex-direction: row; }
  .sidebar { display: none; }
  .history-open .sidebar {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 20;
    top: 64px;
    left: 10px;
    width: min(310px, calc(100% - 20px));
    height: auto;
    max-height: 60vh;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    background: var(--surface);
    overflow: hidden;
  }
  .history-toggle { display: inline-flex; flex-shrink: 0; }

  .chat-toolbar { gap: 8px; padding: 10px 12px; }
  .chat-toolbar .model-chip { display: none; }
  .chat-toolbar .ghost-btn { font-size: 13px; padding: 8px; }

  .message-list { padding: 18px 14px; }
  .message { max-width: 100%; }
  .msg-avatar { width: 26px; height: 26px; font-size: 12px; }
  .message-bubble { font-size: 15px; }

  .welcome { margin: 25px auto; }
  .suggestions { gap: 9px; }
  .suggestion { padding: 12px; }

  .composer { margin: 0 12px; }
  .char-count { display: none; }
  .composer-note {
    margin: 8px 14px max(12px, env(safe-area-inset-bottom));
    font-size: 11px;
  }
  .composer-note span { display: none; }

  .jump-latest { bottom: 128px; }
  .session-scope { padding: 6px 14px 12px; }

  /* Toast 不再贴右下角：小屏会压住输入区，改为输入框上方的居中条 */
  .toast {
    left: 14px;
    right: 14px;
    bottom: max(104px, env(safe-area-inset-bottom));
    text-align: center;
    max-width: none;
  }

  .auth-shell {
    flex-direction: column;
    gap: 24px;
    padding: 78px 20px 30px;
    justify-content: flex-start;
  }
  .auth-home { left: 9px; top: 13px; }
  .auth-theme { right: 10px; top: 13px; }

  /* 窄屏：标签换短、内边距收紧 */
  a.home-link { padding: 6px 9px; font-size: 13px; gap: 4px; }
  .hl-full { display: none; }
  .hl-short { display: inline; }
  .auth-intro { width: 430px; }
  .auth-intro h2 { font-size: 29px; margin: 10px 0; }
  .auth-intro h2 br { display: none; }
  .auth-intro p, .intro-plant { display: none; }
  .auth-card { width: 430px; padding: 26px; }
}

@media (max-width: 480px) {
  .auth-card { padding: 26px 20px 20px; border-radius: 18px; }
  .auth-title { font-size: 22px; }
}