:root {
  /* 品牌（sage 晨茶绿 · 默认主题 · 清淡化：降饱和、提亮、减大色块浓度） */
  --app-primary: #5c8a7c;
  --app-primary2: #4a7a6e;
  --app-brand-grad: linear-gradient(135deg, #6fa393, #4a7a6e);
  --app-primary-soft: rgba(92,138,124,.12);
  --app-on-brand: #ffffff;
  --app-on-brand-soft: rgba(255,255,255,.92);
  --app-glass: rgba(255,255,255,.2);
  --app-glass-soft: rgba(255,255,255,.16);
  --app-white: #ffffff;
  /* 背景（更干净的暖白纸感） */
  --app-bg: #faf9f5;
  --app-bg-soft: #f1efe9;
  --app-bg-input-dis: #f5f3ed;
  --app-bg-note: #fcfbf8;
  --app-bg-danger: #fdf3f1;
  /* 边框（暖灰） */
  --app-border: #e9e6de;
  --app-border-soft: #f0ede6;
  --app-border-strong: #d9d4c8;
  --app-danger-border: #e0aaa6;
  /* 文字（暖墨） */
  --app-text: #2e2a25;
  --app-text-2: #6e6559;
  --app-text-3: #978e80;
  --app-muted: #a8a090;
  --app-danger: #c75b56;
  /* 语义色（全站统一，不随主题漂移） */
  --sem-ok: #2fa878;
  --sem-danger: #c75b56;
  /* 页面外底（html/body 画布）：浅暖纸感；白卡浮起由卡片边框+双层阴影承担 */
  --page-bg: #ffffff;
  /* 卡片描边与投影（浮起感）：浅底方案下比 app-border-soft / shadow-soft 更明显 */
  --panel-border: #dbd5c6;
  --panel-shadow: 0 1px 3px rgba(15,23,42,.07), 0 18px 38px rgba(15,23,42,.12);
  /* 图谱画布底色：白掺气泡色（--app-bg-soft）——白占比高则贴近左侧对话区；
     --graph-bg-keep = 白色占比：100%=同左消息区纯白；70~80 近白仍保留雾感与光晕依托；越低雾越重 */
  --graph-bg-keep: 70%;
  --graph-bg: color-mix(in srgb, var(--app-white) var(--graph-bg-keep), var(--app-bg-soft));
  /* 状态（连接/用量） */
  --app-ok: rgba(47,168,120,.30);
  --app-warn: rgba(217,145,52,.30);
  --app-err: rgba(199,91,86,.35);
  --app-warn-mid: rgba(217,145,52,.16);
  --app-warn-high: rgba(217,145,52,.30);
  --app-err-full: rgba(199,91,86,.22);
  /* 阴影 / 代码块 */
  --app-shadow-card: 0 12px 40px rgba(0,0,0,.18);
  --app-shadow-header: 0 2px 8px rgba(0,0,0,.12);
  --shadow-soft: 0 8px 26px rgba(15,23,42,.06);
  --shadow-lift: 0 18px 46px rgba(15,23,42,.10);
  --app-code-bg: rgba(0,0,0,.06);
  /* 圆角 / 间距 */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  /* 字体 / 字号阶梯 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14.5px;
  --fs-lg: 15px;
  --fs-xl: 16px;
  --fs-2xl: 22px;
}

/* mist（沉雾蓝）主题覆盖：清淡化（去冷硬、降饱和回温），结构与 sage 共用 */
html[data-theme="mist"] {
  --app-primary: #52669b;
  --app-primary2: #3c4f80;
  --app-brand-grad: linear-gradient(135deg, #6e80b8, #3c4f80);
  --app-primary-soft: rgba(82,102,155,.12);
  --app-bg: #f6f7f9;
  --app-bg-soft: #eceef2;
  --app-bg-input-dis: #f1f2f5;
  --app-bg-note: #fafbfd;
  --app-bg-danger: #fdf3f1;
  /* mist 页面外底：浅冷纸感；卡片浮起由边框+阴影承担 */
  --page-bg: #f4f5f8;
  --panel-border: #e0e3ea;
  --panel-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 32px rgba(15,23,42,.10);
  /* mist 图谱画布底色：白 70% 掺冷雾 soft，贴近左侧消息白并保留雾感 */
  --graph-bg-keep: 70%;
  --graph-bg: color-mix(in srgb, var(--app-white) var(--graph-bg-keep), var(--app-bg-soft));
  --app-border: #e0e3e9;
  --app-border-soft: #e9ebf0;
  --app-border-strong: #cfd4dd;
  --app-danger-border: #e0aaa4;
  --app-text: #232b35;
  --app-text-2: #5b6572;
  --app-text-3: #87909e;
  --app-muted: #9ca4b0;
  --app-danger: #c04a45;
  --app-ok: rgba(59,166,127,.30);
  --app-warn: rgba(217,145,52,.30);
  --app-err: rgba(199,91,86,.35);
  --app-warn-mid: rgba(217,145,52,.16);
  --app-warn-high: rgba(217,145,52,.30);
  --app-err-full: rgba(199,91,86,.22);
}

/* ===== 漫萤健康助手 · 原生单页样式（薄前端 + 厚后端） ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* HTML hidden 属性优先于作者 display（防 flex/block 覆盖 hidden 导致元素泄漏，
   例如 guest-banner 引导条在登录态 / sim 模拟页意外可见） */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  background: var(--page-bg, var(--app-bg));
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: relative; }

/* ---------- 登录遮罩（半透明毛玻璃：产品页面轮廓可见；访客可点背景关闭）
   默认隐藏：访客直接浏览完整示例页，需要登录引导时才 showLogin() 弹出 ---------- */
#login-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center;
  background: rgba(18, 28, 42, 0.32);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.login-card {
  width: 360px; max-width: 90%;
  background: var(--app-white); border-radius: 20px;
  padding: 34px 30px 28px;
  box-shadow: var(--app-shadow-card);
  text-align: center;
}
.login-brand {
  width: 54px; height: 54px; border-radius: 16px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--app-brand-grad);
  color: var(--app-white); font-size: 26px; font-weight: 700;
  box-shadow: var(--app-shadow-header);
}
.login-card h2 { font-size: var(--fs-2xl); margin-bottom: 8px; letter-spacing: .3px; }
/* 首屏短版的价值句：陌生人第一眼要读到的那句（比副标题重、比品牌名轻） */
.login-lead {
  margin: 0 0 10px;
  font-size: var(--fs-sm); line-height: 1.7;
  color: var(--app-text-3); text-align: left;
}
/* 成长日记：登录卡上的最近两条（浅色小字、每条一行；无标题无引导语，靠日期戳认出来） */
.login-diary {
  margin: 2px 0 14px;
  font-size: 12px; line-height: 1.8;
  color: var(--app-muted); text-align: left;
  white-space: pre-line;
}
.login-sub { color: var(--app-text-3); font-size: var(--fs-sm); margin-bottom: 16px; line-height: 1.7; }
.login-hint {
  margin: -6px 0 12px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #8a5a17;
  background: var(--app-warn-mid);
  border-radius: var(--radius-sm);
}
.login-card input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--app-border-strong); border-radius: var(--radius-md);
  font-size: 15px; text-align: center; outline: none;
  margin-bottom: 12px;
}
.login-card input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px var(--app-primary-soft); }
.login-card button {
  width: 100%; padding: 12px; border: none; border-radius: var(--radius-md);
  background: var(--app-primary); color: var(--app-white); font-size: 15px; cursor: pointer;
}
.login-err { color: var(--app-danger); font-size: 13px; margin-top: 10px; min-height: 18px; }
.disclaimer {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--app-border-soft);
  font-size: 11px; color: var(--app-muted); line-height: 1.6; text-align: left;
}
.disclaimer a { color: var(--app-primary); text-decoration: none; }

/* ---------- 顶栏 ---------- */
header {
  display: flex; justify-content: space-between; align-items: center;
  flex: none;
  padding: 0 20px;
  height: 58px;
  background: var(--app-white);
  border-bottom: 1px solid var(--app-border-soft);
  color: var(--app-text);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); font-weight: 600; letter-spacing: .2px; }
.brand-badge {
  flex: none;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--app-brand-grad);
  color: var(--app-white); font-size: 16px; font-weight: 700;
  box-shadow: var(--app-shadow-header);
}
.status {
  font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--app-bg-soft); color: var(--app-text-2);
  border: 1px solid var(--app-border-soft);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ---------- 右上角用户徽标：自动生成头像 + 用量满环（绿=剩余可用，红=已用） ---------- */
.user-chip {
  border: none; background: none; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.user-badge {
  width: 34px; height: 34px; padding: 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
  /* 满环双色：红(已用 pct) 自顶部顺时针起，其余为绿(剩余)。--ring-used 由 JS 更新 */
  background: conic-gradient(var(--ring-used-color, var(--sem-danger, #c75b56)) calc(var(--ring-used, 0) * 1%), var(--ring-free-color, var(--sem-ok, #2fa878)) 0);
}
.user-avatar {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,.96);
  overflow: hidden;
}
.user-chip:hover .user-badge { box-shadow: 0 0 0 3px var(--app-primary-soft); }

/* ---------- 用量浮标（点击用户徽标展开） ---------- */
.user-pop {
  position: fixed; top: 62px; right: 18px; z-index: 95;
  width: 262px;
}
.user-pop[hidden] { display: none; }
.user-pop-card {
  background: var(--app-white);
  border: 1px solid var(--app-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 16px 18px 14px;
}
.user-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-base); font-weight: 600; color: var(--app-text);
}
.user-pop-uid {
  margin: 4px 0 12px;
  font-size: 11px; color: var(--app-muted);
  word-break: break-all;
}
.user-pop-main {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 20px; font-weight: 700; color: var(--app-text);
  font-variant-numeric: tabular-nums;
}
.user-pop-limit { font-size: 12px; font-weight: 400; color: var(--app-text-3); }
.user-pop-track {
  margin-top: 10px; height: 6px; border-radius: var(--radius-pill);
  background: var(--app-border-soft); overflow: hidden;
}
.user-pop-track span {
  display: block; height: 100%; width: 0%;
  background: var(--app-primary); border-radius: var(--radius-pill);
  transition: width .3s ease;
}
.user-pop-msg {
  margin-top: 12px; padding: 7px 10px;
  border-radius: 8px;
  font-size: var(--fs-xs);
  background: var(--app-bg-soft); color: var(--app-text-2);
}
.user-pop-msg.warn  { background: var(--app-warn-mid); color: #92400e; }
.user-pop-msg.full  { background: var(--app-err-full); color: #b91c1c; }

.status.connected { background: var(--app-ok); border-color: transparent; color: #166534; }
.status.connecting { background: var(--app-warn); border-color: transparent; color: #92400e; }
.status.error { background: var(--app-err); border-color: transparent; color: #b91c1c; }

/* 内测反馈按钮（正常对比度：普通文字色 + 实描边） */
.feedback-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-white);
  color: var(--app-text-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.feedback-btn svg { flex: none; }
.feedback-btn:hover {
  border-color: var(--app-primary);
  color: var(--app-primary);
  background: var(--app-white);
}

/* ---------- 内测反馈浮层（右上角小卡片） ---------- */
.feedback-pop {
  position: fixed; top: 64px; right: 18px; z-index: 95;
  width: 236px;
}
.feedback-pop[hidden] { display: none; }
.feedback-card {
  background: var(--app-white);
  border: 1px solid var(--app-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 16px 18px 14px;
}
.feedback-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-base); font-weight: 600; color: var(--app-text);
  margin-bottom: 10px;
}
.feedback-close {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--app-muted); width: 22px; height: 22px;
  border-radius: 6px;
}
.feedback-close:hover { background: var(--app-bg-soft); color: var(--app-text); }
.feedback-text { font-size: var(--fs-sm); color: var(--app-text-2); line-height: 1.7; margin-bottom: 12px; }
.feedback-qr {
  display: block; width: 100%;
  border: 1px solid var(--app-border-soft);
  border-radius: var(--radius-sm);
}
.feedback-tip { font-size: var(--fs-xs); color: var(--app-text-3); text-align: center; margin-top: 10px; }

/* ---------- 主体：左对话 + 右图谱（画布式双卡片） ---------- */
main {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  min-height: 0;
}

#chat-panel {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--app-white);
  border: 1px solid var(--panel-border, var(--app-border-soft));
  border-radius: var(--radius-lg);
  box-shadow: var(--panel-shadow, var(--shadow-soft));
  overflow: hidden;
}

/* ---------- 消息流 ---------- */
#messages { flex: 1; overflow-y: auto; padding: 22px 22px 6px; scroll-behavior: smooth; }
.welcome { text-align: center; padding: 52px 24px 20px; }
.welcome-title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: .3px; color: var(--app-text); margin-bottom: 12px; }
.welcome-sub { font-size: var(--fs-base); line-height: 1.8; color: var(--app-text-3); }

/* ---------- 消息气泡 ---------- */
.msg { display: flex; margin-bottom: 16px; }
.msg.user { justify-content: flex-end; }
.msg.agent { justify-content: flex-start; }

.bubble {
  max-width: 82%;
  padding: 10px 15px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.7;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.msg.user .bubble {
  background: var(--app-primary); color: var(--app-white);
  border-bottom-right-radius: 6px;
}
.msg.agent .bubble {
  background: var(--app-bg-soft);
  border: 1px solid var(--app-border-soft);
  color: var(--app-text);
  border-bottom-left-radius: 6px;
}
.bubble p { margin: 4px 0; }
.bubble ul, .bubble ol { margin: 4px 0; padding-left: 22px; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4 { margin: 8px 0 4px; }
.bubble strong { font-weight: 600; }
.bubble code { background: var(--app-code-bg); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

#composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--app-border-soft);
  background: var(--app-white);
}
.footnote {
  padding: 5px 16px;
  font-size: var(--fs-2xs); color: var(--app-muted); text-align: center;
  background: var(--app-bg-note); border-top: 1px solid var(--app-border-soft);
}
/* 备案号（页脚第二行，与免责句同一个页脚块；真源 company 交付 #2） */
.filing { margin-top: 3px; }
.filing a { color: var(--app-muted); text-decoration: none; }
.filing a:hover { color: var(--app-primary); text-decoration: underline; }
#input {
  flex: 1;
  resize: none;
  padding: 12px 14px;
  border: 1px solid var(--app-border-strong);
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
  max-height: 140px;
}
#input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px var(--app-primary-soft); }
#send {
  height: 46px; padding: 0 22px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--app-primary);
  color: var(--app-white);
  font-size: 14.5px;
  cursor: pointer;
  transition: filter .15s ease;
}
#send:hover:not(:disabled) { filter: brightness(1.06); }
#send:disabled { background: var(--app-muted); cursor: not-allowed; }
#input:disabled { background: var(--app-bg-input-dis); color: var(--app-muted); cursor: not-allowed; }

/* ---------- 输入区右侧动作列（停止 / 发送） ---------- */
.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
#stop {
  height: 46px; padding: 0 14px;
  border: 1px solid var(--app-danger-border);
  border-radius: var(--radius-md);
  background: var(--app-white);
  color: var(--app-danger);
  font-size: 13px;
  cursor: pointer;
}
#stop:hover { background: #fff5f5; }
#stop:disabled { background: var(--app-muted); border-color: var(--app-muted); color: var(--app-white); cursor: not-allowed; }

/* ---------- 模拟演示控制条 ---------- */
#sim-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 0;
}
#sim-controls button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-border);
  background: var(--app-bg-soft);
  color: var(--app-text-2);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
#sim-controls button svg { flex: none; }
#sim-controls button:hover:not(:disabled) { background: var(--app-border); }
#sim-controls button:disabled { opacity: .55; cursor: not-allowed; }
#sim-controls #sim-start { background: var(--app-primary); border-color: var(--app-primary); color: var(--app-white); }
#sim-controls #sim-restart { background: var(--app-white); border-color: var(--app-danger-border); color: var(--app-danger); }
.sim-state {
  margin-left: auto;
  font-size: 12px;
  color: var(--app-muted);
}
.sim-state.running { color: var(--app-primary); }

/* ---------- 推理进展（图谱下方独立卡片；有进展时由 GraphView 显示） ---------- */
.timeline-box {
  flex: none;
  margin: 12px 12px 10px;
  border: 1px solid var(--app-border-soft);
  border-radius: 12px;
  background: var(--app-bg-note);
  overflow: hidden;
}
.timeline-box summary {
  display: flex; align-items: center;
  padding: 8px 12px 2px;
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .3px;
  color: var(--app-text-3);
  cursor: pointer; user-select: none;
  list-style: none;
}
.timeline-box summary::-webkit-details-marker { display: none; }
.timeline-box[open] summary { padding-bottom: 2px; }
#graph-changes {
  max-height: 88px;
  overflow-y: auto;
  padding: 2px 12px 8px;
}

/* ---------- 右侧图谱面板（卡片） ---------- */
#graph-panel {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 320px;
  background: var(--app-white);
  border: 1px solid var(--panel-border, var(--app-border-soft));
  border-radius: var(--radius-lg);
  box-shadow: var(--panel-shadow, var(--shadow-soft));
  overflow: hidden;
}
#graph-panel .panel-bar {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex; align-items: center;
  padding: 8px 10px;
  pointer-events: none;
  white-space: nowrap;
}
.graph-meta {
  font-size: var(--fs-xs); color: var(--app-text-3); font-weight: 400;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--app-border-soft);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  max-width: 46%;
  overflow: hidden; text-overflow: ellipsis;
}
.graph-meta:empty { display: none; }
/* 面板头操作按钮（全屏）：SVG 图标 + 文字（悬浮于图谱右上） */
.panel-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--app-border-strong);
  background: rgba(255,255,255,.9);
  color: var(--app-text-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  padding: 5px 12px;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .15s, color .15s, background .15s;
}
.panel-btn .ico { flex: none; }
.panel-btn:hover { border-color: var(--app-primary); color: var(--app-primary); background: var(--app-white); }
/* 全屏/还原图标按状态互斥显示 */
.ico-compress { display: none; }
#graph-panel.fullscreen .ico-expand { display: none; }
#graph-panel.fullscreen .ico-compress { display: inline; }
/* 全屏态：右栏整体铺满视口，专注查看图谱 / 推理进展 / 报告 */
#graph-panel.fullscreen {
  position: fixed; inset: 0; z-index: 90;
  border-radius: 0; border: none; box-shadow: none;
}
#graph-panel.fullscreen #graph-changes { max-height: 220px; }
#graph-panel.fullscreen .report-blocks { max-height: 40vh; }
#graph-container { flex: 1 1 auto; min-height: 150px; }
/* 未初始化图谱（无子节点）时不占空间，避免空态上下分裂 */
#graph-container:empty { flex: none; }
.graph-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
  padding: 24px 32px;
}
.graph-empty-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .3px; color: var(--app-text-3); }
.graph-empty-sub { font-size: var(--fs-sm); line-height: 1.8; color: var(--app-muted); }

/* ---------- 图谱下方报告卡区（诊断/调理报告块：衬底内独立折叠卡片） ---------- */
.report-blocks {
  flex: 0 1 auto;
  max-height: 46vh;
  overflow-y: auto;
  border-top: 1px solid var(--app-border-soft);
  background: var(--app-bg-note);
  padding: 10px 12px 12px;
}
.report-card {
  margin-bottom: 10px;
  border: 1px solid var(--app-border-soft);
  border-radius: var(--radius-md);
  background: var(--app-white);
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}
.report-card:last-child { margin-bottom: 0; }
.report-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 12px 14px; cursor: pointer; user-select: none;
}
.report-head:hover .report-toggle { border-color: var(--app-primary); color: var(--app-primary); }
.report-label { font-size: var(--fs-base); font-weight: 600; color: var(--app-text); }
.report-headline { font-size: 13px; color: var(--app-text-3); }
.report-updated { font-size: 11px; color: var(--app-muted); margin-left: auto; }
.report-toggle {
  border: 1px solid var(--app-border); background: var(--app-white);
  color: var(--app-text-3); border-radius: 12px; padding: 2px 10px;
  font-size: 12px; cursor: pointer;
}
.report-card .report-body {
  padding: 2px 16px 14px;
  max-height: 52vh; overflow-y: auto;
}
.report-card.collapsed .report-body { display: none; }
.report-card.fresh { animation: reportFresh 1.2s ease-out; }
@keyframes reportFresh {
  0% { background: var(--app-primary-soft); }
  100% { background: var(--app-white); }
}
.report-md { line-height: 1.75; font-size: var(--fs-md); color: var(--app-text-2); word-break: break-word; }
.report-md h1, .report-md h2, .report-md h3, .report-md h4 {
  font-size: 15px; margin: 12px 0 4px; color: var(--app-text);
}
.report-md p { margin: 6px 0; }
.report-md ul, .report-md ol { padding-left: 18px; margin: 6px 0; }
.report-md blockquote {
  border-left: 3px solid var(--app-primary); background: var(--app-bg-note);
  padding: 6px 10px; margin: 8px 0; color: var(--app-text-3); border-radius: 4px;
}
.report-md table { border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; }
.report-md th, .report-md td { border: 1px solid var(--app-border); padding: 4px 8px; font-size: 13px; }
.report-media { margin: 10px 0; text-align: center; }
.report-media img, .report-media video { max-width: 100%; border-radius: 8px; }
.report-media-caption { font-size: 12px; color: var(--app-muted); margin-top: 4px; }

/* ---------- 响应式：窄屏图谱折叠到消息下方 ---------- */
@media (max-width: 900px) {
  main { flex-direction: column; padding: 8px; gap: 8px; }
  #chat-panel { flex: none; height: 52vh; border-radius: var(--radius-md); }
  #graph-panel { flex: 1; min-width: 0; border-radius: var(--radius-md); }
  header { padding: 0 12px; }
  .brand-badge { width: 30px; height: 30px; }
}

/* ---------- 访客引导（覆盖层）见下方 main/.guest-banner ---------- */


/* ---------- 访客引导（覆盖层，不拦截点击） ---------- */
header { position: relative; }
main { position: relative; }

/* ===== 访客引导条参数（调试：直接改值，刷新即生效） =====
   --guest-bar-alpha : 涂层透明度（0~1）
   --guest-bar-height: 覆盖高度（盖满 header 并延伸 main 上方）
   底色：三通道 R/G/B 分开定义（传统 rgba 逗号语法，全浏览器兼容）。
*/
:root {
  --guest-bar-alpha: 0.7;
  --guest-bar-height: 135px;
  /* --guest-bar-r: 255; --guest-bar-g: 255; --guest-bar-b: 255; */
  --guest-bar-r: 236; --guest-bar-g: 232; --guest-bar-b: 224;
}

.guest-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 90;                 /* 页面顶层（盖 header + main 上方；不拦截点击） */
  height: var(--guest-bar-height, 170px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  text-align: center;
  /* 浅灰涂层 + 底部细线/轻影 → 与产品页有明显区隔 */
  background: rgba(var(--guest-bar-r, 129), var(--guest-bar-g, 140),
              var(--guest-bar-b, 152), var(--guest-bar-alpha, 0.3));
  border-bottom: 1px solid rgba(80, 92, 108, 0.16);
  box-shadow: 0 10px 26px -18px rgba(30, 40, 55, 0.30);
  pointer-events: none;
}
.guest-banner-title {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 10px;
  font-size: 20px; font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.35;
  color: var(--app-text-1, #26303c);
  background: #ffffff;
}
.guest-banner-sub {
  display: inline-block;
  padding: 4px 15px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--app-text-2, #3f4a58);
  background: #ffffff;
}

/* 访客态头像置灰（点击=登录引导） */
.user-chip.is-guest {
  filter: grayscale(1);
  opacity: 0.55;
  cursor: pointer;
}
.user-chip.is-guest:hover { opacity: 0.85; }

/* 输入区登录遮罩：盖住输入框+发送，可点击弹登录 */
#composer { position: relative; }
.guest-lock {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;   /* 仅让出上方留白，其余铺满输入行与发送按钮 */
  z-index: 8;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 0;
  background: rgba(var(--guest-bar-r, 129), var(--guest-bar-g, 140),
              var(--guest-bar-b, 152), var(--guest-bar-alpha, 0.3));
  color: var(--app-text-2, #3f4a58);
  font-size: 13.5px;
  cursor: pointer;
}
.guest-lock:hover { color: var(--app-primary, #4c7fb8); }
.guest-lock-icon { font-size: 15px; }
/* 锁行文案分层：桌面显示单行提示；移动端改两行引导卡（slogan + 示例提示） */
.guest-lock-lines { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.guest-lock-slogan { display: none; }
.guest-lock-hint-m { display: none; }

/* ================= 图谱最小化/收起（P0）================= */
/* 收起按钮图标随状态切换 */
#graph-panel.is-collapsed .ico-collapse-down { display: none; }
#graph-panel:not(.is-collapsed) .ico-collapse-up { display: none; }
/* 收起按钮仅移动/触屏显示（桌面图谱常驻、无收起诉求） */
#graph-collapse { display: none; }
@media (max-width: 900px), (hover: none) {
  #graph-collapse { display: inline-flex; }
}
/* 收起时隐藏图谱本体 / 空态 / 推理时间线（标题栏与报告区保留） */
#graph-panel.is-collapsed #graph-container,
#graph-panel.is-collapsed #graph-empty,
#graph-panel.is-collapsed .timeline-box { display: none; }
#graph-panel.is-collapsed { height: auto; }
/* 收起态：标题栏由悬浮层改为占位行，面板给足高度并垂直居中（避免按钮被 overflow 裁切） */
#graph-panel.is-collapsed { display: flex; justify-content: center; min-height: 48px; }
#graph-panel.is-collapsed .panel-bar { position: static; width: 100%; pointer-events: auto; }
/* 空态：图谱容器折叠为 0，空态文案在面板内真正居中（而非靠下） */
#graph-container.gv-empty,
#graph-container:empty { flex: none; height: 0; min-height: 0; }
.report-blocks:empty { display: none; }
/* 收起按钮与全屏按钮的 bar 布局：按钮组整体贴右（不依赖 meta 是否存在） */
.panel-bar { display: flex; align-items: center; gap: 4px; }
.panel-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
#graph-panel .panel-bar .panel-btn { margin-left: 0; }

/* ================= 移动端（P1）：图谱置上 + 安全区 + 收起布局 ================= */
@media (max-width: 900px) {
  /* 图谱区置顶（消息+输入在下方，输入框贴屏幕底部——贴合主流对话产品习惯） */
  #graph-panel { order: -1; }
  /* 收起时图谱面板只留标题栏，对话区占满剩余高度 */
  #app.graph-collapsed #graph-panel { flex: 0 0 auto; }
  #app.graph-collapsed #chat-panel { height: auto; flex: 1 1 0; min-height: 0; }
  /* iPhone 底部安全区（刘海/横条机型） */
  #composer { padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 6px)); }
  .footnote { padding-bottom: max(5px, calc(env(safe-area-inset-bottom) + 2px)); }
  #messages { padding-bottom: 4px; }
  /* 图谱有数据：可视高度设上限（移动端图以氛围呈现，细节交给全屏）；全屏/收起态不受影响 */
  #graph-panel:not(.is-collapsed):not(.fullscreen) #graph-container { max-height: min(28vh, 230px); }
  /* 示例页（访客 guest-mode）非全屏：卡片本体按图谱高度收窄（不只压图、整体变矮），
     对话区承接剩余空间；推理过程隐藏，全屏态恢复完整（图谱+推理进展） */
  .guest-mode #graph-panel:not(.fullscreen):not(.is-collapsed) { flex: 0 0 auto; }
  .guest-mode #graph-panel:not(.fullscreen):not(.is-collapsed) #graph-container { flex: none; height: min(28vh, 230px); }
  .guest-mode #graph-panel:not(.fullscreen):not(.is-collapsed) .timeline-box { display: none !important; }
  .guest-mode #graph-panel:not(.fullscreen):not(.is-collapsed) .graph-empty { flex: none; min-height: 190px; }
  .guest-mode #chat-panel { height: auto; flex: 1 1 0; min-height: 0; }
  /* 移动端引导精简：隐藏顶部双行悬浮 banner；输入区锁行改为两行引导卡（slogan + 示例提示），
     把空间让给图谱/案例展示，引导文案只留在输入框处 */
  .guest-banner { display: none; }
  .guest-lock {
    inset: 8px;
    border-radius: 16px;
    background: var(--app-white);
    border: 1px solid var(--app-border);
    box-shadow: 0 8px 22px -12px rgba(30, 40, 55, 0.25);
    padding: 4px 14px;
    justify-content: center;
  }
  .guest-lock-lines { align-items: flex-start; gap: 2px; }
  .guest-lock-slogan { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--app-text); }
  .guest-lock-hint-m { display: inline; font-size: 12px; line-height: 1.4; color: var(--app-text-3); }
  .guest-lock-hint-desk { display: none; }
  .guest-lock-icon { font-size: 17px; }
}