/* ai.css —— 站内 AI 问答页样式（V19.5）
 * 只依赖 base.css 的令牌（--brand / --ink-* / --bg-* / --fs-* / --sp-* / --r-*）；
 * 不引入外链字体，不覆盖首页样式。夜间模式跟随 [data-theme=night]。
 */

.ai-page {
  /* V20-11：iOS/Android 的 100vh 含地址栏，键盘弹出后底部会被裁掉一截；
     支持 dvh 的浏览器用可视高度，不支持的仍退回 100vh。 */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-black);
  color: var(--ink-primary);
  padding-bottom:96px;
}

/* ── 顶栏 ───────────────────────────────────────────── */
.ai-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 14px calc(var(--gutter, 20px) + var(--sar, 0px)) 14px calc(var(--gutter, 20px) + var(--sal, 0px));
  background: var(--header-bg, rgba(255, 255, 255, 0.72));
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--divider);
}

.ai-top__back {
  display: inline-flex;
  align-items: center;
  gap:8px;
  min-height: 44px;
  padding:0 16px;
  /* v19.9：375px 下「‹ 返回首页」会折成两行，顶栏高度跳动；禁止换行后单行稳定 */
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid var(--divider);
  color: var(--ink-primary);
  font-size: var(--fs-sm);
  text-decoration: none;
  background: var(--bg-elevated);
}

.ai-top__title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ai-top__title small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-secondary);
}

/* ── 状态徽章 ───────────────────────────────────────── */
.ai-status {
  display: flex;
  gap:8px;
  flex-wrap: wrap;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap:8px;
  padding:8px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--divider);
  font-size: var(--fs-xs);
  color: var(--ink-secondary);
  background: var(--bg-elevated);
  white-space: nowrap;
}

.ai-badge__dot {
  width: 7px;
  height: 7px;
  border-radius:50%;
  background: var(--divider);
}

.ai-badge[data-state="on"] .ai-badge__dot { background: var(--success); }
.ai-badge[data-state="off"] .ai-badge__dot { background: var(--price); }
.ai-badge[data-state="unknown"] .ai-badge__dot { background: var(--ink-secondary); }

/* ── 主体 ───────────────────────────────────────────── */
.ai-wrap {
  width: min(var(--measure, 960px), 100% - 2 * var(--gutter, 20px));
  margin:0 auto;
  padding-top: var(--sp-7);
}

.ai-hero h1 {
  /* v19.10：与隐私页同为「工具/法务页」档位（--fs-3xl），字重与字距对齐首页 H1 */
  font-size: var(--fs-3xl);
  line-height: 1.25;
  margin: 0 0 var(--sp-3);
  letter-spacing: var(--heading-ls);
  font-weight: 700;
}

.ai-hero p {
  /* V9-06：限宽到 600px（--measure-sm，全站既有令牌，不新增值）。
     1440×900 实测此段宽 960px / 字号 15px ≈ 64 字每行，而 WCAG 2.2 SC 1.4.8
     对 CJK 的行宽上限是 **40 字**（S04，AAA 级）。1.4.8 是 AAA 不作强制合规判定，
     但 64 字/行已明显超出中文长文的可读区间，故按质量参照处理：只限宽，不改字号。 */
  max-width: var(--measure-sm);
  margin: 0 0 var(--sp-6);
  color: var(--ink-secondary);
  font-size: var(--fs-md);
  line-height: 1.7;
}

.ai-hero strong { color: var(--brand); }

/* ── 输入区 ─────────────────────────────────────────── */
.ai-form {
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}

.ai-field {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
}

.ai-input {
  flex: 1;
  min-height: 48px;
  padding:12px 16px;
  /* V20-11：iOS Safari 在输入框字号 < 16px 时，聚焦会自动放大页面（用户还得手动缩回）。
     全站正文是 15px，但输入控件必须 ≥16px —— 这是移动端唯一必须偏离字号体系的地方。 */
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-primary);
  background: var(--bg-black);
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  resize: vertical;
}

.ai-input:focus-visible,
.ai-submit:focus-visible,
.ai-mode:focus-visible,
.ai-chip:focus-visible,
.ai-cite__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ai-submit {
  min-width: 108px;
  min-height: var(--control-h);
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-pill);   /* 胶囊主按钮，与首页 .btn-primary 同一形态 */
  background: var(--accent-text-bg);  /* 白字载体令牌：昼夜均达 AA，替代原来的橙色渐变 */
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}

.ai-submit[disabled] { opacity: 0.6; cursor: progress; }

/* 模式切换 */
.ai-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.ai-mode {
  display: block;
  text-align: left;
  min-height: 44px;
  padding:8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--divider);
  background: var(--bg-black);
  color: var(--ink-primary);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ai-mode small {
  display: block;
  margin-top:2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.ai-mode[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--brand-bg-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* 不可选的那张（本地模型没部署时的「仅站内原文」）。
 * 不用 opacity 压暗：那句「暂不可选」正是要顾客读到的，压到 0.5 就没法读了。
 * 改虚线边框 + not-allowed，形状上就能看出「这个不能点」。 */
.ai-mode[aria-disabled="true"] {
  cursor: not-allowed;
  border-style: dashed;
  color: var(--ink-secondary);
  background: transparent;
  box-shadow: none;
}

.ai-modes__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-secondary);
  line-height: 1.6;
}

/* 快捷问题 */
.ai-hot {
  display: flex;
  flex-wrap: wrap;
  gap:8px;
  margin: var(--sp-4) 0 0;
}

.ai-chip {
  min-height: 44px;
  padding:0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--divider);
  background: var(--bg-black);
  color: var(--ink-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.ai-chip:hover { border-color: var(--brand-border); background: var(--brand-bg-soft); }

/* ── 结果 ───────────────────────────────────────────── */
.ai-result {
  margin-top: var(--sp-6);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  padding: var(--sp-5);
}

.ai-result[hidden] { display: none; }

.ai-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:8px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px dashed var(--divider);
  font-size: var(--fs-xs);
  color: var(--ink-secondary);
}

.ai-route__tag {
  display: inline-flex;
  align-items: center;
  gap:8px;
  padding:4px 8px;
  border-radius: var(--r-pill);
  background: var(--brand-bg-soft);
  color: var(--brand-strong);
  border: 1px solid var(--brand-border);
  font-weight: 600;
}

.ai-route__tag[data-degraded="true"] {
  background: #FFF7E6;
  border-color: #FFE0A3;
  color: #8A5B00;
}

.ai-route__meta { font-variant-numeric: tabular-nums; }

.ai-answer { margin: var(--sp-4) 0 0; }

.ai-seg {
  display: block;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: var(--ink-primary);
}

/* 引用角标：可点击，跳到实据卡 */
.ai-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin:0 2px;
  padding:0 4px;
  border-radius:var(--r-sm);
  border: 1px solid var(--brand-border);
  background: var(--brand-bg-soft);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  cursor: pointer;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.ai-cite:hover { background: #FFE8D6; }

/* 拒答卡 */
.ai-refuse {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--brand-border);
  background: var(--brand-bg-soft);
}

.ai-refuse h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
}

.ai-refuse p { margin: 0 0 var(--sp-4); color: var(--ink-secondary); line-height: 1.7; }

.ai-refuse__actions { display: flex; flex-wrap: wrap; gap:8px; }

.ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  min-height: 44px;
  padding:0 16px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--divider);
  color: var(--ink-primary);
  background: var(--bg-black);
}

.ai-btn--primary {
  border-color: transparent;
  /* V24-q1：原 var(--brand-grad, linear-gradient(135deg,#FF6B1A,#C24A08))。
     昼间浅端 #FF6B1A / #FF8A3D 上的白字实测 2.34–2.63:1，不达 AA。
     改用「白字载体」令牌两端：昼 #C2410C(5.18)→#A83A06、夜 #0071e3(4.70)→#005bb8(6.59)。 */
  background: linear-gradient(135deg, var(--accent-text-bg), var(--accent-hover));
  color: #fff;
}

/* 「再试一次」是 <button> 而不是 <a>：按钮默认不继承页面字体、也不给手型光标，
 * 不显式补会和旁边几个 <a> 按钮长得不一样（字体变成系统 UI 字体）。 */
button.ai-btn {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ── 实据卡 ─────────────────────────────────────────── */
.ai-evidence { margin-top: var(--sp-6); }

.ai-evidence h2 {
  display: flex;
  align-items: baseline;
  gap:8px;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
}

.ai-evidence h2 span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-secondary);
}

.ai-cite-list {
  list-style: none;
  margin:0;
  padding:0;
  display: grid;
  gap: var(--sp-3);
}

.ai-cite-card {
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  background: var(--bg-black);
  padding: var(--sp-4);
  transition:border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

.ai-cite-card.is-target {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(232, 90, 12, 0.18);
}

.ai-cite-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:8px;
  margin-bottom:8px;
  font-size: var(--fs-xs);
  color: var(--ink-secondary);
}

.ai-cite-card__idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius:var(--r-sm);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.ai-cite-card__link {
  color: var(--brand-strong);
  text-decoration: none;
  font-weight: 600;
}

.ai-cite-card__link:hover { text-decoration: underline; }

.ai-cite-card__quote {
  margin:0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-primary);
  word-break: break-word;
}

.ai-cite-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap:8px;
  margin-top:8px;
  font-size:12px;
  color: var(--ink-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ai-cite-card__foot button {
  border: 0;
  background: none;
  padding:0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
}

/* 校验/耗时详情 */
.ai-trace {
  margin-top: var(--sp-5);
  border-top: 1px dashed var(--divider);
  padding-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
}

.ai-trace summary {
  cursor: pointer;
  min-height: 32px;
  font-weight: 600;
  color: var(--ink-primary);
}

.ai-trace dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap:8px 16px;
  margin: var(--sp-3) 0 0;
}

.ai-trace dt { color: var(--ink-secondary); }
.ai-trace dd { margin:0; color: var(--ink-primary); word-break: break-word; }

/* AI 生成提示：放在回答正上方，顾客第一眼能看到（不靠页脚免责） */
.ai-aihint {
  margin: 0 0 var(--sp-3);
  padding:8px 12px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: #8a5a00;
  background: #fff7e6;
  border: 1px solid #ffe1a8;
  border-radius:var(--r-sm);
}

/* 深色皮肤只认 :root[data-theme="night"]，不用 prefers-color-scheme。
 * 站点主题的唯一来源是 data-theme（theme-manager.js:109-118 一定写入 day 或 night：
 * 手动 > 系统深色 > 日出日落），所以「系统深色但用户手动选了白天」是常态组合。
 * 原来这条是 @media (prefers-color-scheme: dark)，在这种组合下会把 #ffd08a 画在 #fff7e6 上，
 * 对比度约 1.4:1 —— 等于看不见。改成跟随 data-theme 后，同一组合下走的是白底深琥珀。 */
:root[data-theme="night"] .ai-aihint {
  color: #ffd08a;
  background: rgba(255, 190, 80, .12);
  border-color: rgba(255, 190, 80, .35);
}

/* 显式兜住 hidden：本文件里 .ai-loading 自己声明了 display，害得 [hidden] 失效过一次，
 * 同一个坑不踩第二次 —— 光靠 UA 的 [hidden]{display:none} 只在作者样式没写 display 时有效。 */
.ai-aihint[hidden] { display: none !important; }

/* 降级说明（后端超时后改给站内原文摘录）。
 * 不能沿用 .ai-aihint 的琥珀色：那条是「AI 生成请核实」的固定免责，两条同样式连着显示，
 * 顾客会以为是重复渲染或者页面出错（1280 下实测就是这样）。这里改用信息色，
 * 因为它描述的是「换了取答案的方式」，不是警告也不是失败。
 * 用 :root[data-theme="night"] 而不是 media 查询，理由见上面那段注释。 */
.ai-degraded {
  color: #0a4f9e;
  background: rgba(10, 132, 255, .10);
  border: 1px solid rgba(10, 132, 255, .30);
  border-left: 3px solid var(--brand, #0a84ff);
  padding-left: 10px;
}

:root[data-theme="night"] .ai-degraded {
  color: #a8ccff;
  background: rgba(10, 132, 255, .16);
  border-color: rgba(122, 178, 255, .35);
  border-left-color: #4a9eff;
}

.ai-disclaimer {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-secondary);
}

/* 加载态 */
.ai-loading {
  display: flex;
  align-items: center;
  gap:8px;
  margin-top: var(--sp-5);
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
}

.ai-loading[hidden] { display: none; }

.ai-loading__bar {
  width: 34px;
  height: 4px;
  border-radius:var(--r-sm);
  background: var(--brand-border);
  overflow: hidden;
  position: relative;
}

.ai-loading__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius:var(--r-sm);
  background: var(--brand);
  animation: ai-scan 1.1s ease-in-out infinite;
}

@keyframes ai-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-loading__bar::after { animation: none; }
}

/* ── 夜间 ───────────────────────────────────────────── */
:root[data-theme="night"] .ai-page { background: var(--bg-black); }
:root[data-theme="night"] .ai-top { border-bottom-color: #2a2a2e; }
:root[data-theme="night"] .ai-form,
:root[data-theme="night"] .ai-result,
:root[data-theme="night"] .ai-cite-card,
:root[data-theme="night"] .ai-btn,
:root[data-theme="night"] .ai-top__back { background: #161618; border-color: #323236; }
/* V20-12：上面这条 `[data-theme="night"] .ai-btn`（特异性 0,2,0）会盖掉
   `.ai-btn--primary`（0,1,0）的品牌渐变 —— 结果夜间「预约上门」变成一块深灰，
   最该被点的按钮反而最不显眼。夜间必须把主按钮的品牌色补回来。 */
:root[data-theme="night"] .ai-btn--primary {
  /* V24-q1：与上面 .ai-btn--primary 同步。夜间两端 4.70:1 / 6.59:1。 */
  background: linear-gradient(135deg, var(--accent-text-bg), var(--accent-hover));
  border-color: transparent;
  color: #fff;
}
:root[data-theme="night"] .ai-input,
:root[data-theme="night"] .ai-mode,
:root[data-theme="night"] .ai-chip { background: #0e0e10; border-color: #323236; color: #f5f5f7; }
:root[data-theme="night"] .ai-mode[aria-checked="true"] { background: #2a1a0e; border-color: var(--brand); }
:root[data-theme="night"] .ai-route__tag { background: #2a1a0e; color: #ffb27a; border-color: #4a2a12; }
:root[data-theme="night"] .ai-refuse { background: #2a1a0e; border-color: #4a2a12; }
:root[data-theme="night"] .ai-cite { background: #2a1a0e; border-color: #4a2a12; color: #ffb27a; }
:root[data-theme="night"] .ai-cite-card__quote,
:root[data-theme="night"] .ai-seg { color: #f5f5f7; }
:root[data-theme="night"] .ai-hero p,
:root[data-theme="night"] .ai-route,
:root[data-theme="night"] .ai-cite-card__head,
:root[data-theme="night"] .ai-note { color: #a1a1a6; }

@media (max-width: 767px) {
  .ai-modes { grid-template-columns: 1fr; }
  .ai-field { flex-direction: column; }
  .ai-submit { width: 100%; }
  .ai-hero h1 { font-size: var(--fs-xl); }
}

/* ── 错误与相关实据 ─────────────────────────────────── */
.ai-error {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--brand-border);
  background: var(--brand-bg-soft);
}

.ai-error h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.ai-error p { margin: 0 0 var(--sp-3); color: var(--ink-secondary); line-height: 1.7; }

.ai-error__detail {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  word-break: break-word;
}

.ai-related { margin-top: var(--sp-5); }

.ai-related summary {
  cursor: pointer;
  min-height: 32px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-primary);
}

.ai-related .ai-cite-list { margin-top: var(--sp-3); }

/* base.css 未提供 sr-only 时兜底（label 需要可读不可见） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding:0; margin:-1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root[data-theme="night"] .ai-error { background: #2a1a0e; border-color: #4a2a12; }

/* ── 静态种子问答（N6-06）───────────────────────────────
   作用：让 ask.html 在无 JS、无 AI 服务时也有可索引的实质内容；
   条目由 tools/build_seed_qa.py 从 data/evidence.json 生成，逐字取自页面。 */
.ai-seed { margin-top: var(--sp-7); }

.ai-seed__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
  color: var(--ink-primary);
}

.ai-seed__note {
  margin: 0 0 var(--sp-4);
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.ai-seed__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}

@media (min-width: 720px) {
  .ai-seed__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}

.ai-seed__item {
  border: 1px solid var(--divider);
  border-radius: var(--radius);   /* 卡片圆角全站统一 18px（原 12px，比首页卡片更方） */
  background: var(--bg-elevated);
  padding: 0 var(--sp-4);
  transition:border-color var(--dur-base) var(--ease-out, ease), background-color var(--dur-base) var(--ease-out, ease);
}

.ai-seed__item[open] { border-color: var(--brand-border); background: var(--brand-bg-soft); }

.ai-seed__item > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;               /* 触控热区（WCAG 2.2 SC 2.5.8 下限 24，这里取 44） */
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-primary);
}

.ai-seed__item > summary::-webkit-details-marker { display: none; }

.ai-seed__item > summary::after {
  content: "＋";
  margin-left:auto;
  font-weight: 400;
  color: var(--ink-secondary);
  transition:transform var(--dur-base) var(--ease-out, ease);
}

.ai-seed__item[open] > summary::after { content: "－"; }

.ai-seed__item > summary:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.ai-seed__a {
  margin: 0 0 var(--sp-2);
  padding: 0 0 0 var(--sp-3);
  border-left: 2px solid var(--brand-border);
  color: var(--ink-primary);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.ai-seed__src {
  margin: 0 0 var(--sp-3);
  color: var(--ink-secondary);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.ai-seed__src a { color: var(--accent-text); text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ai-seed__item,
  .ai-seed__item > summary::after { transition:none; }
}

:root[data-theme="night"] .ai-seed__item[open] { background: rgba(232, 90, 12, 0.12); }

/* v19.9：AI 未开放时，表单下方给一行状态说明；文案由 ask.html 静态提供，
   这里只管排版（宽度变化时随容器换行，不撑出横向滚动）。 */
.ai-form__note { margin:8px 0 0; font-size: var(--fs-sm); color: var(--ink-secondary); line-height: 1.6; }

/* v19.9：未开放时模式区整体置灰并阻断交互；同时 JS 会给每个按钮加 disabled，
   双保险确保键盘 Tab 不会停在无效控件上。 */
.ai-modes[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ── V20-09：回答之后的「下一步」 ─────────────────────────
   位置在答案正下方、实据索引之上：
   顾客先看到「还能去哪看」和「怎么找你」，再决定要不要核对原文。
   视觉上比实据区更轻（无边框、浅底），避免抢走答案本身的注意力。 */
.ai-next {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg-dark);
  border: 1px solid var(--divider);
}

.ai-next__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
}

.ai-next__pages {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding:0;
  display: grid;
  gap: var(--sp-2);
}

.ai-next__page {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-black);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ink-primary);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.ai-next__page:hover {
  border-color: var(--accent-text);
  transform: translateX(2px);
  text-decoration: none;
}

.ai-next__label {
  font-size: var(--fs-md);
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-next__where {
  font-size: var(--fs-xs);
  color: var(--ink-secondary);
  flex: none;
}

.ai-next__go {
  flex: none;
  color: var(--accent-text);
  font-size: var(--fs-lg);
  line-height: 1;
}

.ai-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ai-next__btn {
  display: inline-flex;
  align-items: center;
  gap:8px;
  min-height: 44px;      /* 拇指触达下限，与底栏按钮一致 */
  padding: 0 var(--sp-4);
  font-size: var(--fs-md);
  text-decoration: none;
}

.ai-next__btn:hover { text-decoration: none; }

@media (max-width: 767px) {
  .ai-next { padding: var(--sp-3); }
  .ai-next__btn { flex: 1 1 100%; justify-content: center; }
}

/* V20-10：`.ai-badge` 自己设了 display:inline-flex，会盖掉浏览器对 [hidden] 的 display:none，
   导致 JS 里 `el.hidden = true` 完全没效果（截图实测：徽章照样显示）。
   这是「hidden 不管用」最典型的一种成因，必须显式补回。 */
.ai-badge[hidden] { display: none !important; }

/* V20-13：375 下顶栏三块（返回 / 标题+索引统计 / 状态徽章）挤在一行，
   「实据索引：363 张卡 / 7 个页面」会被压成两行贴着徽章。窄屏收起统计，
   它本来也只是给好奇的人看的次要信息（实据条数每屏下方都有）。 */
@media (max-width: 479px) {
  #aiIndexMeta { display: none; }
}

/* ── V20-14：每日额度提示 ────────────────────────────────
   放在模式选择下方，一行小字。刻意做得不显眼：
   它不是主信息，但要在「还剩 1 次」时能被看见。 */
.ai-quota {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
}

.ai-quota[data-left="0"] { color: var(--red-text, #d70015); font-weight: 600; }

.ai-quota[hidden] { display: none !important; }