/* ═══════════════════════════════════════════════════════════
   心晴 · 青少年心理状态陪伴
   ───────────────────────────────────────────────────────────
   设计基调：暖纸 / 青绿 / 金橙
   配色**对齐《枣未之光心理关爱手册》**（官网 /zaowei/）——
   2026-10-13 从「暖纸+墨绿」改为手册色系，因为心晴要作为
   手册的一个功能入口出现，两处放一起不打架。
   仍有意避开医疗机构常见的冷蓝白 —— 目的是让人愿意坐下来
   ═══════════════════════════════════════════════════════════ */

:root {
  /* 纸与墨（手册同名变量，值一致） */
  --paper:      #FFFBF3;
  --paper-deep: #F7EFE1;
  --card:       #FFFFFF;
  --ink:        #382E24;
  --ink-soft:   #6B5D4F;
  --ink-faint:  #8C7F6E;   /* 4.6:1，小字说明也读得清（实测达标） */
  --rule:       #EFE2CD;
  --rule-soft:  #F5EBD9;

  /* 强调 —— 手册同源 */
  --sage:       #2E8B84;   /* teal主色 */
  --sage-deep:  #23706A;
  --sage-wash:  #D9EDEA;
  --terra:      #E2703A;   /* orange 警示 */
  --terra-wash: #FCEDE2;
  --gold:       #EFAF3E;   /* gold 强调 */
  --leaf:       #8FBF4A;

  /* 危机 */
  --crisis:     #C0392B;
  --crisis-2:   #D9534F;

  /* 尺度 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 110px;

  --radius:    4px;
  --radius-lg: 10px;

  /* 阴影带暖调（手册同款） */
  --shadow-sm: 0 2px 10px rgba(160,120,60,.07), 0 10px 30px rgba(160,120,60,.06);
  --shadow-md: 0 4px 14px rgba(160,120,60,.09), 0 18px 44px rgba(160,120,60,.08);
  --shadow-lg: 0 8px 22px rgba(160,120,60,.12), 0 30px 70px rgba(160,120,60,.12);

  --serif: "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --sans:  "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
          "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ── 底噪：让纸有纤维感，而不是一块死板的纯色 ── */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* ── 纸面渐晕：把视线收拢到中央 ── */
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink);
  background:
    radial-gradient(120% 78% at 50% -12%, #FFFCF5 0%, rgba(255,252,245,0) 62%),
    radial-gradient(90% 60% at 88% 8%, rgba(46,139,132,.055) 0%, rgba(46,139,132,0) 60%),
    radial-gradient(70% 50% at 8% 92%, rgba(188,90,52,.05) 0%, rgba(188,90,52,0) 62%),
    var(--paper);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ═══ 页眉 ═══ */
.masthead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: rgba(246,241,231,.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.masthead__brand { display: flex; align-items: baseline; gap: var(--s-3); }
.masthead__mark {
  color: var(--sage); align-self: center;
  display: inline-flex; transition: transform .5s var(--ease);
}
.masthead__brand:hover .masthead__mark { transform: rotate(-8deg) scale(1.06); }
.masthead__name {
  font-family: var(--serif); font-weight: 700; font-size: 1.32rem;
  letter-spacing: .16em; color: var(--ink);
}
.masthead__sub {
  font-size: .74rem; color: var(--ink-faint); letter-spacing: .22em;
  padding-left: var(--s-3); border-left: 1px solid var(--rule);
}
.masthead__nav { display: flex; align-items: center; gap: var(--s-2); }
/* ⚠️ 2026-10-15 删掉了这里的 :nth-child(n)::before { content: '◐' / 'ⓘ' / '⚙' }。
   原因：按钮里的图标现在是**内联 SVG**，样式里再加一份 ::before 就会**重复显示两个图标**
   （宽屏实测 ◐◐ ⓘⓘ）。图标只保留一处来源 —— 交给 HTML 里的 SVG。 */
.nav-ico { width: 17px; height: 17px; display: block; flex: none; }
.masthead__nav .btn { padding: 9px 12px; }

/* ═══ 通用按钮 ═══ */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 11px 22px;
  font: inherit; font-size: .9rem; font-weight: 500; letter-spacing: .04em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover { transform: translateY(-1.5px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.btn[disabled] { opacity: .38; pointer-events: none; }

.btn--primary { --btn-bg: var(--sage); --btn-fg: #F8F5EC; --btn-bd: var(--sage-deep); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset; }
.btn--primary:hover { --btn-bg: var(--sage-deep); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--sage); --btn-bd: var(--sage); }
.btn--outline:hover { --btn-bg: var(--sage-wash); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-soft); --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: rgba(56,46,36,.05); --btn-fg: var(--ink); box-shadow: none; }
.btn--danger { --btn-bg: transparent; --btn-fg: var(--crisis); --btn-bd: rgba(122,36,24,.35); }
.btn--danger:hover { --btn-bg: rgba(122,36,24,.08); }
.btn--cream { --btn-bg: var(--crisis-2); --btn-fg: #FFF6F0; --btn-bd: #5E1A10; }
.btn--cream:hover { --btn-bg: #8E2D18; }
.btn--lg { padding: 14px 34px; font-size: .98rem; }
.btn--sm { padding: 6px 13px; font-size: .8rem; }
.btn--voice { --btn-bg: var(--sage-wash); --btn-fg: var(--sage-deep); --btn-bd: rgba(46,139,132,.3); }

/* 引擎状态点 */
.dot-status { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.dot-status[data-state="on"] { background: var(--sage); box-shadow: 0 0 0 3px rgba(46,139,132,.16); }
.dot-status[data-state="busy"] { background: var(--gold); animation: pulse 1.1s infinite; }
.dot-status[data-state="err"] { background: var(--crisis); }

/* ═══ 屏幕切换 ═══ */
.screen { display: none; position: relative; z-index: 2; }
.screen.is-active { display: block; animation: screenIn .5s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wrap { max-width: 1080px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-9); }
.wrap--hero { max-width: 940px; padding-top: var(--s-9); }
.wrap--narrow { max-width: 680px; }
.wrap--wide { max-width: 1240px; }

.reveal { animation: rise .62s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ═══ 排版原子 ═══ */
.eyebrow {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--sage); margin: 0 0 var(--s-4); font-weight: 500;
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); max-width: 120px; }

.screen__head { margin-bottom: var(--s-7); }
.screen__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.28;
  margin: 0 0 var(--s-3); letter-spacing: .02em;
}
.screen__desc { color: var(--ink-soft); margin: 0; max-width: 46ch; }

/* ═══ 卡片 ═══ */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.card::before {
  content: ""; position: absolute; left: 0; top: var(--s-5); bottom: var(--s-5);
  width: 2px; background: var(--sage); opacity: 0;
  transition: opacity .3s var(--ease);
}
.card:hover::before { opacity: .5; }

/* ═══ 开场 ═══ */
.hero__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.1rem, 6.2vw, 4rem); line-height: 1.22;
  margin: 0 0 var(--s-8); letter-spacing: .01em;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal; color: var(--sage);
  position: relative; display: inline-block;
}
.hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: .3em;
  background: rgba(46,139,132,.13); z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: swipe .9s .5s var(--ease) forwards;
}
@keyframes swipe { to { transform: scaleX(1); } }

.hero__grid { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
@media (min-width: 760px) { .hero__grid { grid-template-columns: repeat(3, 1fr); } }

.card--promise { padding-top: var(--s-6); }
.promise__num {
  font-family: var(--serif); font-size: .8rem; color: var(--terra);
  letter-spacing: .2em; display: block; margin-bottom: var(--s-3);
}
.card--promise h3 {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
  margin: 0 0 var(--s-3); line-height: 1.5;
}
.card--promise p { margin: 0; font-size: .89rem; color: var(--ink-soft); line-height: 1.8; }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.hero__foot { margin: 0; font-size: .84rem; color: var(--ink-faint); }
.hero__warn {
  margin: var(--s-7) 0 0; padding: var(--s-4) var(--s-5);
  font-size: .84rem; color: var(--ink-soft); line-height: 1.8;
  border-left: 2px solid var(--terra); background: rgba(188,90,52,.045);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.hero__warn strong { color: var(--ink); font-weight: 500; }
.hero__warn a { color: var(--terra); font-weight: 500; }

/* ═══ 模式选择 ═══ */
.mode-grid { display: grid; gap: var(--s-5); }
@media (min-width: 880px) { .mode-grid { grid-template-columns: 1fr 1fr; } }

.mode-card { display: flex; flex-direction: column; padding: var(--s-7) var(--s-6); }
.mode-card__head { margin-bottom: var(--s-4); }
.mode-card__badge {
  display: inline-block; font-size: .7rem; letter-spacing: .18em;
  color: var(--sage-deep); background: var(--sage-wash);
  padding: 4px 11px; border-radius: 100px; margin-bottom: var(--s-4);
}
.mode-card__badge--alt { color: var(--terra); background: var(--terra-wash); }
.mode-card h3 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  margin: 0; line-height: 1.4;
}
.mode-card__desc { color: var(--ink-soft); font-size: .92rem; margin: 0 0 var(--s-5); }
.mode-card__list {
  list-style: none; padding: 0; margin: 0 0 var(--s-6);
  flex: 1; border-top: 1px solid var(--rule-soft); padding-top: var(--s-5);
}
.mode-card__list li {
  position: relative; padding-left: var(--s-5); margin-bottom: var(--s-3);
  font-size: .86rem; color: var(--ink-soft); line-height: 1.72;
}
.mode-card__list li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sage); opacity: .55;
}
.mode-card .btn { align-self: flex-start; }

/* ═══ 量表 ═══ */
.progress { margin-bottom: var(--s-6); }
.progress__bar {
  height: 2px; background: var(--rule); border-radius: 2px; overflow: hidden;
}
.progress__bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--sage), var(--sage-deep));
  transition: width .55s var(--ease);
}
.progress__text {
  margin: var(--s-3) 0 0; font-size: .78rem; color: var(--ink-faint);
  letter-spacing: .1em; font-variant-numeric: tabular-nums;
}

.question-card {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.question-card::after {
  content: attr(data-zone);
  position: absolute; right: -14px; top: var(--s-5);
  font-family: var(--serif); font-size: 5.2rem; font-weight: 700;
  color: rgba(46,139,132,.045); letter-spacing: .06em;
  pointer-events: none; user-select: none; line-height: 1;
}
.question-card__zone {
  font-size: .72rem; letter-spacing: .24em; color: var(--sage);
  margin: 0 0 var(--s-4); font-weight: 500;
}
.question-card__text {
  font-family: var(--serif); font-size: clamp(1.28rem, 3.4vw, 1.72rem);
  font-weight: 600; line-height: 1.52; margin: 0 0 var(--s-3);
  max-width: 30ch; text-wrap: pretty;
}
.question-card__hint { margin: 0 0 var(--s-6); font-size: .86rem; color: var(--ink-faint); }
.question-card__hint.is-crisis { color: var(--crisis); font-weight: 500; }

.options { display: grid; gap: var(--s-2); }
@media (min-width: 620px) { .options { grid-template-columns: 1fr 1fr; } }

.opt {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 14px var(--s-5); cursor: pointer;
  background: rgba(246,241,231,.42); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); text-align: left;
  font: inherit; font-size: .92rem; color: var(--ink);
  transition: all .2s var(--ease);
}
.opt:hover { background: var(--sage-wash); border-color: rgba(46,139,132,.35); transform: translateX(3px); }
.opt__key {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--rule);
  font-size: .78rem; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; transition: all .2s var(--ease);
}
.opt:hover .opt__key { border-color: var(--sage); color: var(--sage); }
.opt.is-picked { background: var(--sage); border-color: var(--sage-deep); color: #F8F5EC; }
.opt.is-picked .opt__key { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #F8F5EC; }
.opt--crisis:hover { background: rgba(122,36,24,.07); border-color: rgba(122,36,24,.4); }
.opt--crisis.is-picked { background: var(--crisis); border-color: #5E1A10; }

.voice-row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.heard {
  margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4);
  background: var(--paper-deep); border-radius: var(--radius);
  font-size: .87rem; color: var(--ink-soft); line-height: 1.7;
}
.heard__tag {
  display: inline-block; font-size: .66rem; letter-spacing: .16em;
  color: var(--sage); margin-right: var(--s-3); vertical-align: 1px;
}

.mic-bars { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.mic-bars i {
  display: block; width: 2.5px; height: 4px; border-radius: 2px;
  background: currentColor; opacity: .55;
  transition: height .18s ease, opacity .18s ease;
}
.mic-bars.is-live i { animation: bar .82s ease-in-out infinite; opacity: 1; }
.mic-bars.is-live i:nth-child(2) { animation-delay: .11s; }
.mic-bars.is-live i:nth-child(3) { animation-delay: .22s; }
.mic-bars.is-live i:nth-child(4) { animation-delay: .33s; }
.mic-bars.is-live i:nth-child(5) { animation-delay: .44s; }
@keyframes bar { 0%,100% { height: 4px; } 50% { height: 15px; } }

.qnav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--s-5); gap: var(--s-3);
}

/* ═══ 倾诉 ═══ */
.talk__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.talk__title {
  font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700; margin: 0;
}
.talk__actions { display: flex; gap: var(--s-2); }
/* ═══ 一键声音开关 ═══ */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 500;
  color: var(--ink-soft); background: rgba(246,241,231,.7);
  border: 1px solid var(--rule); border-radius: 100px;
  transition: all .22s var(--ease); white-space: nowrap;
}
.sound-toggle:hover { border-color: var(--sage); color: var(--sage); transform: translateY(-1px); }
.sound-toggle__icon { display: inline-flex; }
.sound-toggle .st-wave { opacity: .3; transition: opacity .25s var(--ease); }
.sound-toggle.is-on {
  background: var(--sage); border-color: var(--sage-deep); color: #F6F4EE;
}
.sound-toggle.is-on .st-wave { opacity: 1; animation: stWave 1.8s var(--ease) infinite; }
@keyframes stWave { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ═══ 呼吸灯：AI 在想的时候 ═══ */
.msg__bubble--thinking {
  background: linear-gradient(180deg, rgba(46,139,132,.1), rgba(46,139,132,.04)) !important;
  border-color: rgba(46,139,132,.35) !important;
  min-width: 62px;
  animation: breathe 3.2s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,139,132,.28); transform: scale(1); }
  50%      { box-shadow: 0 0 0 9px rgba(46,139,132,0); transform: scale(1.035); }
}
.msg__bubble--thinking .typing i { animation: typBreathe 1.4s infinite; }
@keyframes typBreathe { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }

.msg { position: relative; }

/* ═══ 微信式气泡：尾巴 ═══ */
.msg--me { flex-direction: row-reverse; }
.msg--me .msg__bubble { position: relative; border-top-right-radius: 2px; }
.msg--me .msg__bubble::after {
  content: ""; position: absolute; top: 11px; right: -6px;
  border: 6px solid transparent; border-right-color: var(--sage);
  border-left-width: 0;
}
.msg--ai .msg__bubble { position: relative; border-top-left-radius: 2px; }
.msg--ai .msg__bubble::after {
  content: ""; position: absolute; top: 11px; left: -6px;
  border: 6px solid transparent; border-left-color: var(--paper-deep);
  border-right-width: 0;
}

/* ═══ 聊天区：微信式布局 ═══
   核心：对话占满可用高度，输入框固定底部，侧栏收进抽屉。
   之前 max-height:58vh 把对话压成半屏，下半屏被侧栏占了 —— 就没有聊天感。 */
.screen--talk { padding-bottom: 0; min-height: 0; }
.talk__head { flex: none; }
/* ═══ 倾诉页：微信式固定视口 ═══
   核心：**页面本身不滚，只有对话区滚**。
   之前 .wrap--wide 的 padding-bottom:110px 让整页高于视口，
   于是滑动时滚的是整个网页（聊天框不动）——正是田老师反馈的问题。
   做法：倾诉页锁高100dvh，内部 flex 分三段：头部（固定）/ 对话区（唯一可滚）/ 输入区（固定）。 */
   ⚠️ 下面这条**必须带 .is-active** —— 不带的话对话页会一直显示，
      首页底下永远挂着它（2026-10-14 田老师反复说"首页难看了"，就是这个）。
      样式主体统一在文件末尾，这里只留最小必要。 */
.screen--talk.is-active {
  display: flex; flex-direction: column;
  height: calc(100dvh - 62px);
  min-height: 0; overflow: hidden; padding-bottom: 0;
}
.screen--talk > .wrap {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding-bottom: var(--s-3);
}
/* wrap 默认 padding-top 是 s-8(72px)，倾诉页要的是紧凑头部。
   宽屏下 72+44+12 会让总高超出视口几像素 → 整页又能滚了（田老师反馈过）。 */
.screen--talk > .wrap { padding-top: var(--s-5); }
@media (min-width: 1000px) {
  .screen--talk > .wrap { padding-top: var(--s-6); }
}
.talk__head { flex: none; }
.talk__body { flex: 1; min-height: 0; gap: 0; }
.talk__stream {
  flex: 1; min-height: 0;
  background: var(--card);
  border: 1px solid var(--rule-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sm);
  padding: var(--s-5) var(--s-5) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-4);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.composer { flex: none; background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); margin: 0; padding: var(--s-3); }
.composer textarea { flex: 1; min-height: 44px; max-height: 110px; }
.composer__side { flex: none; width: 44px; height: 44px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.composer__side:hover { border-color: var(--sage); color: var(--sage); }
@media (min-width: 1000px) { .composer__side { display: none; } }

/* 打开倾诉页时隐藏页脚和页头多余留白（避免多出可滚动区域） */
body[data-screen="talk"] .foot { display: none; }

/* 危机题的轻提示：不遮挡，只提示"我们会看" */
.crisissoft {
  margin: 0 0 var(--s-4); padding: 10px var(--s-4);
  background: var(--terra-wash); border: 1px solid rgba(226,112,58,.3);
  border-radius: var(--radius); font-size: .84rem; line-height: 1.7; color: var(--ink);
  animation: rise .3s var(--ease) both;
}

/* 结果页顶部的危机提示：醒目但不吓人 */
.reportflag {
  margin: 0 0 var(--s-5); padding: var(--s-5);
  background: var(--terra-wash); border: 1px solid rgba(193,57,43,.32);
  border-left: 3px solid var(--crisis); border-radius: var(--radius-lg);
}
.reportflag__t { margin: 0 0 var(--s-2); font-family: var(--serif);
  font-size: 1.08rem; font-weight: 700; color: var(--crisis); }
.reportflag__d { margin: 0 0 var(--s-3); font-size: .88rem; line-height: 1.85; color: var(--ink-soft); }
.reportflag__d b { color: var(--ink); }
.reportflag__acts { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }

:root:not([data-force-light]) .crisissoft,
  :root:not([data-force-light]) .reportflag { background: var(--terra-wash); }

/* ═══ 入口页：先问一句，不铺卡片 ═══
   2026-10-14：原来铺三张大卡片，手机要下滑很久才看到入口，
   而且「主功能是聊天」被淹没了。现在改成一句提问 + 三个按钮。 */
.pickchat { padding: var(--s-6) 0 var(--s-8); }
.pickchat__eyebrow {
  margin: 0 0 var(--s-5); font-size: .68rem; letter-spacing: .22em;
  color: var(--sage); text-transform: uppercase;
}
.pickchat__q {
  margin: 0 0 var(--s-3); font-family: var(--serif); font-size: 1.9rem;
  font-weight: 700; line-height: 1.3;
}
.pickchat__lead { margin: 0 0 var(--s-6); font-size: .95rem; color: var(--ink-soft); line-height: 1.8; }
.pickchat__or {
  margin: var(--s-6) 0 var(--s-3); font-size: .76rem; letter-spacing: .16em;
  color: var(--ink-faint); text-align: center;
}
.pickchat__fine {
  margin: var(--s-6) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--rule-soft);
  font-size: .74rem; color: var(--ink-faint); line-height: 1.7; text-align: center;
}

.pick {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: all .2s var(--ease);
}
.pick:hover { border-color: var(--sage); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pick:active { transform: translateY(0); }
.pick__t { display: block; font-size: 1.02rem; font-weight: 600; margin-bottom: 4px; }
.pick__d { display: block; font-size: .82rem; color: var(--ink-faint); line-height: 1.65; }
.pick__d b { color: var(--ink-soft); font-weight: 600; }

/* 聊天是主功能 —— 给它最明显的视觉权重 */
.pick--talk {
  background: linear-gradient(135deg, var(--sage), #3AA79E);
  border-color: transparent; color: #fff; padding: var(--s-5);
  box-shadow: 0 8px 24px rgba(46,139,132,.28);
}
.pick--talk .pick__t { font-size: 1.2rem; font-weight: 700; }
.pick--talk .pick__d { color: rgba(255,255,255,.9); font-size: .86rem; }
.pick--talk:hover { box-shadow: 0 12px 32px rgba(46,139,132,.36); }

.pick__more { margin-top: var(--s-4); }
.pick__more > summary {
  cursor: pointer; font-size: .82rem; color: var(--ink-faint);
  padding: 8px 0; list-style: none;
}
.pick__more > summary::-webkit-details-marker { display: none; }
.pick__more > summary::before { content: '＋ '; color: var(--sage); }
.pick__more[open] > summary::before { content: '－ '; }
.pick__diff {
  padding: var(--s-4) var(--s-5); margin-top: 8px;
  background: var(--paper-deep); border-radius: var(--radius);
  font-size: .82rem; color: var(--ink-soft); line-height: 1.85;
}
.pick__diff p { margin: 0 0 var(--s-3); }
.pick__diff p:last-child { margin: 0; }
.pick__diff b { color: var(--ink); }

@media (min-width: 760px) {
  .pickchat__q { font-size: 2.15rem; }
  .pick--talk { padding: var(--s-6) var(--s-5); }
}

/* 兜底：任何元素加了 hidden 都必须真的不显示。
   ⚠️ 本项目多处给元素写了 display:grid/flex，
      同优先级下会**覆盖 [hidden] 自带的 display:none**，
      于是「明明加了 hidden 却还显示」（2026-10-14 悬浮面板踩到）。
      这条放在最后，优先级最低但靠源码顺序压过前面的同优先级规则。 */
[hidden] { display: none !important; }

/* ═══ 语音面板：悬浮，不占布局 ═══
   2026-10-14 修：原来 .talk__side 是 .talk__body 的 flex 子项（占位），
   把输入框挤到页面最底部、还被页脚压住。
   现在改成 absolute —— 对话区拿到全部空间，输入框紧贴其下。 */
.talk__body { position: relative; }
.talk__float {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  z-index: 20; display: grid; gap: var(--s-2); justify-items: start;
}
.float__toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 15px; font: inherit; font-size: .84rem; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; box-shadow: var(--shadow-md);
  transition: all .2s var(--ease);
}
.float__toggle:hover { border-color: var(--sage); color: var(--sage); }
.float__panel[hidden] { display: none; }
.float__panel {
  display: grid; gap: var(--s-3); width: min(300px, 74vw);
  max-height: min(62vh, 520px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-4);
}
.float__row { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* 打开面板时，对话区内容让出一点空间，避免被盖住 */
.talk__float.is-open ~ * .composer,
body:has(.float__panel:not([hidden])) .talk__stream { padding-bottom: 0; }

/* 手机上：面板占满宽度、更靠底部，像微信那样 */
@media (max-width: 720px) {
  .talk__float { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); justify-items: stretch; }
  .float__toggle { justify-content: center; }
  .float__panel { width: 100%; max-height: 58vh; }
}

/* ═══ 三折页引导式测评 ═══ */
.foldtop { margin-bottom: var(--s-4); }
.fold { background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: var(--s-6) var(--s-5); box-shadow: var(--shadow-md); }
.fold__eyebrow { margin: 0 0 var(--s-3); font-size: .68rem; letter-spacing: .22em;
  color: var(--sage); text-transform: uppercase; }
.fold__title { margin: 0 0 var(--s-3); font-family: var(--serif); font-size: 1.5rem;
  font-weight: 700; line-height: 1.35; }
.fold__sub { margin: 0 0 var(--s-5); font-size: .9rem; color: var(--ink-soft); line-height: 1.8; }
.fold__q { margin: 0 0 var(--s-5); font-family: var(--serif); font-size: 1.22rem;
  font-weight: 600; line-height: 1.55; }
.fold__hint { margin: 0 0 var(--s-4); font-size: .85rem; line-height: 1.75; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); background: var(--sage-wash); color: var(--ink-soft); }
.fold__hint--warm { background: var(--terra-wash); color: var(--ink); }

.fold__prog { height: 3px; background: var(--rule-soft); border-radius: 3px;
  overflow: hidden; margin-bottom: var(--s-5); }
.fold__prog span { display: block; height: 100%; background: var(--sage);
  border-radius: 3px; transition: width .4s var(--ease); }

.fold__opts { display: grid; gap: var(--s-3); }
.foldopt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 15px var(--s-4); cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); background: rgba(255,251,243,.6);
  border: 1px solid var(--rule); border-radius: var(--radius);
  transition: all .2s var(--ease); min-height: 56px; width: 100%;
}
.foldopt:hover { border-color: var(--sage); background: var(--sage-wash); transform: translateX(3px); }
.foldopt__t { font-size: .98rem; }
.foldopt__y { font-size: .76rem; color: var(--ink-faint); flex: none; }
.foldopt--no .foldopt__t { color: var(--ink-soft); }

.fold__note { margin: 0 0 var(--s-5); padding: var(--s-4); background: var(--paper-deep);
  border-radius: var(--radius); font-size: .84rem; color: var(--ink-soft); line-height: 1.8; }
.fold__note ul { margin: 0 0 var(--s-2); padding-left: 1.1em; }
.fold__note li { margin-bottom: 4px; }
.fold__acts { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; }
.fold__back { margin: var(--s-4) 0 0; }

/* 心情晴雨表 */
.fold__weather { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.wx { display: grid; gap: 4px; justify-items: center; padding: var(--s-4) var(--s-3);
  cursor: pointer; background: rgba(255,251,243,.6); border: 1px solid var(--rule);
  border-radius: var(--radius); transition: all .2s var(--ease); font: inherit; color: var(--ink); }
.wx:hover { border-color: var(--sage); background: var(--sage-wash); }
.wx__ico { font-size: 1.8rem; line-height: 1; }
.wx__k { font-weight: 600; font-size: .95rem; }
.wx__t { font-size: .74rem; color: var(--ink-faint); }
.wx--雷暴 .wx__ico { filter: saturate(.4); }

/* 四色结果 */
.foldcolor { display: grid; gap: 4px; justify-items: center; padding: var(--s-5) var(--s-4);
  margin-bottom: var(--s-4); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); }
.foldcolor__tag { font-size: .74rem; letter-spacing: .2em; color: var(--cc); }
.foldcolor__word { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--cc); }
.foldcolor__score { font-size: .82rem; color: var(--ink-faint); }

.foldcard { padding: var(--s-4) var(--s-5); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); margin-bottom: var(--s-3); background: rgba(255,251,243,.6); }
.foldcard__lb { margin: 0 0 6px; font-size: .7rem; letter-spacing: .18em;
  color: var(--ink-faint); text-transform: uppercase; }
.foldcard__tx { margin: 0; font-size: .9rem; line-height: 1.85; color: var(--ink-soft); }
.foldcard--duty { background: var(--terra-wash); border-color: rgba(226,112,58,.3); }
.foldcard--duty .foldcard__tx { color: var(--ink); font-weight: 500; }
.foldcard__note { margin: var(--s-3) 0 0; font-size: .78rem; color: var(--ink-faint); line-height: 1.7; }
.foldtag { margin: 0 0 5px; font-size: .86rem; color: var(--ink-soft); }
.foldtag b { color: var(--ink); font-weight: 500; }

/* ═══ 互起名字 ═══ */
/* ⚠️ z-index 从 120 降到 39 —— 刻意**低于顶栏**（.masthead 是 40）。
   根因（2026-10-15 真机实测）：起名浮层是全屏 fixed 的，原来 120 会连顶栏一起盖住，
   于是「进入聊天 → 2.4 秒后弹出起名层 → 点左上角心晴」**点不动**
   （Playwright 报 `div.nicklayer intercepts pointer events`，真人就是"点了没反应"）。
   而田老师的要求正是"左上角心晴点击后应该回首页"，那这一步必须随时可用。
   放在顶栏之下还有个好处：遮罩只压内容区，顶栏保持清晰可见，
   孩子一眼看到"我到心晴了"，也知道退路在哪。
   为什么不是把顶栏提到 120 以上：那样会盖住抽屉（70）和危机浮层（100），
   得不偿失 —— 让需要"低"的那个降下去，比让所有人都升上来安全。 */
.nicklayer {
  position: fixed; inset: 0; z-index: 39;
  display: grid; place-items: center; padding: var(--s-4);
  background: rgba(56,46,36,.55); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .3s var(--ease) both;
}
.nickcard {
  width: min(440px, 100%);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-6); animation: rise .45s var(--ease) both;
}
.nickcard__eyebrow {
  margin: 0 0 var(--s-2); font-size: .68rem; letter-spacing: .24em;
  color: var(--sage); text-transform: uppercase;
}
.nickcard__title {
  margin: 0 0 var(--s-3); font-family: var(--serif);
  font-size: 1.55rem; font-weight: 700; line-height: 1.35;
}
.nickcard__lead { margin: 0 0 var(--s-5); font-size: .9rem; color: var(--ink-soft); line-height: 1.8; }
.nickfield { display: block; margin-bottom: var(--s-4); }
.nickfield__lb { display: block; font-size: .8rem; margin-bottom: 7px; color: var(--ink-soft); }
.nickfield input {
  width: 100%; font: inherit; font-size: 1rem; padding: 12px var(--s-4);
  color: var(--ink); background: rgba(255,251,243,.7);
  border: 1px solid var(--rule); border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.nickfield input:focus { outline: none; border-color: var(--sage); background: var(--paper); }
.nickcard__note {
  margin: var(--s-4) 0 var(--s-5); padding: var(--s-3) var(--s-4);
  background: var(--sage-wash); border-radius: var(--radius);
  font-size: .78rem; color: var(--ink-soft); line-height: 1.75;
}
.nickcard__acts { display: flex; gap: var(--s-3); justify-content: flex-end; }

/* 头像放大以容纳名字首字 */
.msg__av { width: 34px; height: 34px; font-size: .84rem; }

/* ═══ 页脚：机构署名 ═══ */
.foot { display: grid; gap: var(--s-3); justify-items: center; }
.foot__brand {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0; font-size: .9rem; line-height: 1.5;
}
.foot__logo { display: inline-flex; flex: none; }
.foot__brand strong { font-weight: 600; letter-spacing: .02em; }
.foot__sub { font-size: .76rem; color: var(--ink-faint); }
.foot p { margin: 0; max-width: 56ch; }
.foot a { color: var(--terra); font-weight: 500; }
.foot__fine { font-size: .72rem; color: var(--ink-faint); opacity: .85; }

/* 聊天区滚动条：细，不打扰 */
.talk__stream::-webkit-scrollbar { width: 6px; }
.talk__stream::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.talk__stream::-webkit-scrollbar-track { background: transparent; }

/* 侧栏在桌面端是右侧栏，手机端变成抽屉（由 body 高度决定） */
.talk__side { display: grid; gap: var(--s-4); }
/* 侧栏已改成悬浮（.talk__float），这里**必须保持纵向**。
   ⚠️ 原来这条是 `flex-direction: row`（为右侧栏准备），
      侧栏改成浮���后它没跟着改 →
      宽屏下对话区变横排、`talk__side` 又不存在 → 布局全乱（2026-10-14 田老师截图）。*/
@media (min-width: 1000px) {
  .talk__body { flex-direction: column; }
  .talk__stream { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}
.msg { display: flex; gap: var(--s-3); max-width: 88%; animation: rise .4s var(--ease) both; }
.msg--me { margin-left: auto; flex-direction: row-reverse; }
.msg__av {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif);
  font-size: .78rem; font-weight: 700; margin-top: 3px;
}
.msg--ai .msg__av { background: var(--sage-wash); color: var(--sage-deep); }
.msg--me .msg__av { background: var(--paper-deep); color: var(--ink-soft); }
.msg__bubble {
  padding: 13px var(--s-5); border-radius: var(--radius-lg);
  font-size: .93rem; line-height: 1.8; white-space: pre-wrap; word-break: break-word;
}
.msg--ai .msg__bubble { background: rgba(246,241,231,.7); border: 1px solid var(--rule-soft); border-top-left-radius: var(--radius); }
.msg--me .msg__bubble { background: var(--sage); color: #F6F4EE; border-top-right-radius: var(--radius); }
.msg--sys .msg__bubble {
  background: transparent; border: 1px dashed var(--rule);
  color: var(--ink-faint); font-size: .84rem; text-align: center; width: 100%;
}
.msg__tag {
  display: block; font-size: .68rem; letter-spacing: .14em;
  color: var(--ink-faint); margin-bottom: 5px;
}
.msg--signal .msg__bubble { background: rgba(122,36,24,.05); border-color: rgba(122,36,24,.2); }
/* 危机时刻的回应：加重边框，和普通气泡明显区分 */
.msg--crisis .msg__bubble {
  background: linear-gradient(180deg, rgba(122,36,24,.07), rgba(122,36,24,.03));
  border-color: rgba(122,36,24,.45); border-left: 3px solid var(--crisis);
}
.msg--crisis .msg__av { background: var(--crisis); color: #FFF3EC; }

.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: typ 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes typ { 0%,60%,100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.talk__side { display: grid; gap: var(--s-4); position: sticky; top: 92px; }
.panel {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: var(--shadow-sm);
}
.panel__label {
  font-size: .68rem; letter-spacing: .22em; color: var(--ink-faint);
  margin: 0 0 var(--s-3); text-transform: uppercase;
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
}
.panel__why {
  font-size: .66rem; letter-spacing: .06em; text-transform: none;
  color: var(--sage); background: var(--sage-wash);
  padding: 2px 8px; border-radius: 100px; font-weight: 500;
}
.panel__hint { margin: 0 0 var(--s-3); font-size: .8rem; line-height: 1.7; }
.panel__status { margin: var(--s-3) 0 0; font-size: .8rem; color: var(--ink-faint); text-align: center; min-height: 1.4em; }
.panel__note { margin: var(--s-3) 0 0; font-size: .74rem; color: var(--ink-faint); line-height: 1.7; }

.chan-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); background: var(--paper-deep); padding: 3px; border-radius: var(--radius); margin-bottom: var(--s-5); }
.chan {
  font: inherit; font-size: .8rem; padding: 8px 6px; cursor: pointer;
  background: transparent; border: none; border-radius: 3px;
  color: var(--ink-soft); display: grid; gap: 1px; transition: all .2s var(--ease);
}
.chan.is-on { background: var(--card); color: var(--sage-deep); font-weight: 500; box-shadow: var(--shadow-sm); }
.chan__note { font-size: .66rem; color: var(--ink-faint); font-weight: 300; }

.visualizer { height: 44px; margin-bottom: var(--s-4); display: grid; place-items: center; }
.visualizer canvas { width: 100%; height: 44px; display: block; }

.mic {
  position: relative; width: 100%;
  display: grid; place-items: center; gap: 6px; padding: var(--s-5);
  background: var(--sage-wash); color: var(--sage-deep);
  border: 1px solid rgba(46,139,132,.3); border-radius: var(--radius-lg);
  cursor: pointer; font: inherit; transition: all .24s var(--ease);
}
.mic:hover { background: var(--sage); color: #F6F4EE; transform: translateY(-2px); }
.mic.is-live { background: var(--sage); color: #F6F4EE; border-color: var(--sage-deep); }
.mic__pulse {
  position: absolute; inset: -1px; border-radius: var(--radius-lg);
  border: 2px solid var(--sage); opacity: 0; pointer-events: none;
}
.mic.is-live .mic__pulse { animation: ring 1.7s infinite; }
@keyframes ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.09); } }

.replay { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px dashed var(--rule); }
.replay audio { width: 100%; height: 34px; margin-bottom: var(--s-3); }
.replay__row { display: flex; gap: var(--s-2); }

#trustedAdult, #composerInput, .sheet input, .sheet textarea {
  width: 100%; font: inherit; font-size: .88rem; color: var(--ink);
  background: rgba(246,241,231,.5); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 10px var(--s-4);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
/* ⚠️ 2026-10-15 修（田老师截图：输入框右下角多一个拖拽三角）：
   原来这条把 `resize: vertical` 写在**带 #composerInput 的 ID 选择器**里，
   优先级 (1,0,0) 压过了后面 `.composer textarea { resize: none }` 的 (0,1,1)，
   于是手柄一直露着。所以 resize 必须单独拎出来、且**不带 #composerInput**。 */
#trustedAdult, .sheet input, .sheet textarea { resize: vertical; }
#trustedAdult:focus, #composerInput:focus, .sheet input:focus, .sheet textarea:focus {
  outline: none; border-color: var(--sage); background: var(--card);
}

.composer {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; gap: var(--s-2); align-items: flex-end;
  padding: var(--s-3) 0 var(--s-2);
  background: linear-gradient(to top, var(--paper) 70%, rgba(246,241,231,0));
  margin-top: var(--s-3);
}
.composer textarea { flex: 1; min-height: 46px; max-height: 140px; }
.composer__side {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: all .2s var(--ease);
}
.composer__side:hover { border-color: var(--sage); color: var(--sage); }
@media (min-width: 1000px) { .composer__side { display: none; } }

/* ═══ 报告 ═══ */
.verdict {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6);
  box-shadow: var(--shadow-md); margin-bottom: var(--s-5);
  position: relative; overflow: hidden;
}
.verdict__level {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--serif); font-weight: 700; font-size: 1.7rem;
  margin-bottom: var(--s-2); letter-spacing: .04em;
}
.verdict__level[data-lv="ok"]      { color: var(--sage); }
.verdict__level[data-lv="mild"]    { color: var(--gold); }
.verdict__level[data-lv="moderate"]{ color: var(--terra); }
.verdict__level[data-lv="high"],
.verdict__level[data-lv="urgent"]  { color: var(--crisis); }
.verdict__verdict {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  line-height: 1.66; margin: 0 0 var(--s-4); max-width: 34ch;
}
.verdict__desc { color: var(--ink-soft); font-size: .92rem; margin: 0; line-height: 1.85; }
.verdict__stamp {
  position: absolute; right: var(--s-6); top: var(--s-6);
  font-family: var(--serif); font-size: .68rem; letter-spacing: .18em;
  color: var(--ink-faint); border: 1px solid var(--rule);
  padding: 5px 11px; border-radius: 100px; transform: rotate(3deg);
}

.metrics { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
@media (min-width: 620px) { .metrics { grid-template-columns: 1fr 1fr; } }
.metric {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5);
}
.metric__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.metric__name { font-size: .86rem; color: var(--ink-soft); }
.metric__score { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.metric__score[data-flag="pos"] { color: var(--terra); }
.metric__bar { height: 3px; background: var(--rule-soft); border-radius: 3px; overflow: hidden; }
.metric__bar span { display: block; height: 100%; background: var(--sage); border-radius: 3px; transition: width .7s var(--ease); }
.metric__bar span[data-flag="pos"] { background: var(--terra); }
.metric__note { font-size: .72rem; color: var(--ink-faint); margin: 6px 0 0; }

.report-block { margin-bottom: var(--s-5); }
.report-block > h3 {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: var(--s-3);
}
.report-block > h3::before {
  content: ""; width: 3px; height: 1em; background: var(--sage); border-radius: 2px;
}
.advice-list { list-style: none; padding: 0; margin: 0; }
.advice-list li {
  position: relative; padding: var(--s-4) 0 var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--rule-soft);
  font-size: .9rem; color: var(--ink-soft); line-height: 1.8;
}
.advice-list li:last-child { border-bottom: none; }
.advice-list li::before {
  content: attr(data-n); position: absolute; left: 0; top: var(--s-4);
  font-family: var(--serif); font-size: .78rem; font-weight: 700;
  color: var(--sage); font-variant-numeric: tabular-nums;
}
.advice-list strong { color: var(--ink); font-weight: 500; }

.signal-note {
  padding: var(--s-4) var(--s-5); border-radius: var(--radius);
  background: rgba(122,36,24,.05); border: 1px solid rgba(122,36,24,.2);
  font-size: .87rem; color: var(--ink); line-height: 1.8;
}
.refer {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: var(--s-5) var(--s-6);
}
.refer a { color: var(--crisis); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }

.report-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.report-meta { font-size: .76rem; color: var(--ink-faint); line-height: 1.8; }

/* ═══ 危机浮层 ═══ */
.crisis {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--s-5);
  background: rgba(30,14,10,.62);
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  overflow-y: auto;
}
.crisis[hidden] { display: none; }
.crisis__inner {
  max-width: 620px; width: 100%;
  background: #FBF4EE;
  border: 1px solid rgba(122,36,24,.24); border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-6);
  box-shadow: var(--shadow-lg);
  animation: crisisIn .55s var(--ease) both;
  position: relative; overflow: hidden;
  margin: auto;
}
.crisis__inner::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--crisis), var(--crisis-2), var(--gold));
}
@keyframes crisisIn { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }

.crisis__flag {
  display: inline-block; font-size: .68rem; letter-spacing: .22em;
  color: #FFF1EA; background: var(--crisis);
  padding: 5px 13px; border-radius: 100px; margin: 0 0 var(--s-5);
}
.crisis__title {
  font-family: var(--serif); font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 700; margin: 0 0 var(--s-4); color: #3B0F08; line-height: 1.34;
}
.crisis__body { color: #5B3A33; font-size: .94rem; margin: 0 0 var(--s-6); line-height: 1.85; }

.crisis__first {
  padding: var(--s-5); border-radius: var(--radius);
  background: rgba(122,36,24,.07); border: 1px solid rgba(122,36,24,.2);
  margin-bottom: var(--s-5);
}
.crisis__step {
  font-size: .68rem; letter-spacing: .2em; color: var(--crisis);
  margin: 0 0 var(--s-3); text-transform: uppercase;
}
.crisis__who {
  margin: 0 0 var(--s-2); font-size: .92rem; font-weight: 500; color: var(--ink);
}
.crisis__noadult {
  margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4);
  font-size: .8rem; line-height: 1.75; color: var(--ink-soft);
  background: rgba(255,255,255,.5); border-radius: var(--radius);
  border-left: 2px solid var(--terra);
}
.crisis__aid--empty { display: none; }
.crisis__aid { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: #3B0F08; line-height: 1.6; }
.crisis__aid:empty::before { content: "（去设置里填一个信任的人的名字）"; color: var(--ink-faint); font-weight: 300; font-size: .95rem; font-family: var(--sans); }
.crisis__nudge { margin: var(--s-3) 0 0; font-size: .85rem; color: #6B4A42; line-height: 1.75; }

.crisis__calls { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.callbtn {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-4) var(--s-5); text-decoration: none;
  background: var(--card); border: 1px solid rgba(122,36,24,.22);
  border-radius: var(--radius); transition: all .2s var(--ease);
}
.callbtn:hover { transform: translateX(4px); border-color: var(--crisis); background: #fff; }
.callbtn__num {
  font-family: var(--serif); font-weight: 700; font-size: 1.28rem;
  color: var(--crisis); font-variant-numeric: tabular-nums; letter-spacing: .01em; flex: none;
}
.callbtn__txt { font-size: .84rem; color: var(--ink-soft); display: grid; gap: 1px; }
.callbtn__txt em { font-style: normal; font-size: .74rem; color: var(--ink-faint); }
.callbtn--hot { background: var(--crisis-2); border-color: #5E1A10; }
.callbtn--hot .callbtn__num { color: #FFF3EC; font-size: 1.6rem; }
.callbtn--hot .callbtn__txt { color: #FDE4D9; }
.callbtn--hot .callbtn__txt em { color: rgba(255,240,232,.72); }

.crisis__acts { text-align: center; }
.crisis__foot { margin: var(--s-4) 0 0; font-size: .76rem; color: var(--ink-faint); line-height: 1.8; }

/* ═══ 抽屉（设置 / 隐私） ═══ */
.sheet {
  border: none; padding: 0; max-width: 580px; width: calc(100% - 32px);
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); color: var(--ink);
}
.sheet::backdrop { background: rgba(56,46,36,.5); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheetIn .4s var(--ease) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.sheet__form { padding: var(--s-6); max-height: 84vh; overflow-y: auto; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); }
.sheet__head h2 { font-family: var(--serif); font-size: 1.32rem; font-weight: 700; margin: 0; }
.sheet__lead { font-size: .86rem; color: var(--ink-soft); margin: 0 0 var(--s-5); line-height: 1.8; }

.field { display: block; margin-bottom: var(--s-4); }
.field__label {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  font-size: .8rem; font-weight: 500; margin-bottom: 7px;
}
.field__label em {
  font-style: normal; font-size: .7rem; color: var(--ink-faint); font-weight: 300;
}
.sheet__row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.sheet__row--end { justify-content: flex-end; padding-top: var(--s-4); border-top: 1px solid var(--rule-soft); }
.sheet__test { font-size: .78rem; color: var(--ink-faint); }
.sheet__test[data-state="ok"] { color: var(--sage); }
.sheet__test[data-state="err"] { color: var(--crisis); }

.advcfg { margin: 0 0 var(--s-4); }
.advcfg > summary {
  cursor: pointer; font-size: .84rem; color: var(--sage); font-weight: 500;
  padding: 9px 13px; background: var(--sage-wash); border-radius: var(--radius);
  list-style: none; user-select: none; transition: background .2s var(--ease);
}
.advcfg > summary::-webkit-details-marker { display: none; }
.advcfg > summary::before { content: '＋ '; opacity: .6; }
.advcfg[open] > summary { background: rgba(46,139,132,.18); }
.advcfg[open] > summary::before { content: '－ '; }
.advcfg > summary:hover { background: rgba(46,139,132,.16); }
.advcfg__note { font-size: .76rem; color: var(--ink-faint); margin: var(--s-4) 0 0; line-height: 1.7; }

/* ═══ TTS 配置区 ═══ */
.ttsbar {
  margin: var(--s-4) 0; padding: var(--s-5);
  background: linear-gradient(180deg, rgba(46,139,132,.06), rgba(46,139,132,.02));
  border: 1px solid rgba(46,139,132,.22); border-radius: var(--radius-lg);
}
.ttsbar__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.ttsbar__hd strong { font-size: .95rem; font-weight: 500; }
.ttsbar__desc {
  margin: 0 0 var(--s-4); font-size: .8rem; color: var(--ink-soft); line-height: 1.8;
}
.badge-off, .badge-on {
  font-size: .68rem; letter-spacing: .1em; padding: 3px 10px; border-radius: 100px;
  flex: none;
}
.badge-off { background: rgba(122,36,24,.12); color: var(--crisis); }
.badge-on  { background: var(--sage); color: #F6F4EE; }

select {
  width: 100%; font: inherit; font-size: .88rem; color: var(--ink);
  background: rgba(246,241,231,.5); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 10px var(--s-4); cursor: pointer;
}
select:focus { outline: none; border-color: var(--sage); background: var(--card); }

/* ═══ 嗓音选择 ═══ */
.voicelist { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.voiceitem {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 11px var(--s-4); cursor: pointer; text-align: left;
  font: inherit; font-size: .88rem; color: var(--ink);
  background: rgba(246,241,231,.5); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); transition: all .18s var(--ease); width: 100%;
}
.voiceitem:hover { background: var(--sage-wash); border-color: rgba(46,139,132,.35); }
.voiceitem.is-on { background: var(--sage); border-color: var(--sage-deep); color: #F6F4EE; }
.voiceitem.is-on .vt { background: rgba(255,255,255,.22); color: #F6F4EE; border-color: transparent; }
.voiceitem__nm { flex: 1; font-weight: 500; }
.voiceitem__tags { display: flex; gap: 5px; flex: none; }
.voiceitem__ck { flex: none; font-weight: 700; }
.vt {
  font-style: normal; font-size: .68rem; padding: 2px 7px; border-radius: 100px;
  background: rgba(56,46,36,.07); color: var(--ink-soft);
}
.vt--f { background: rgba(188,90,52,.16); color: var(--terra); }

input[type="range"] {
  width: 100%; accent-color: var(--sage); height: 22px; cursor: pointer;
}

.sheet__note {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--paper-deep); border-radius: var(--radius);
  font-size: .78rem; color: var(--ink-soft); line-height: 1.85;
}
.sheet__note p { margin: 0 0 var(--s-3); }
.sheet__note p:last-child { margin: 0; }
.sheet__note strong { color: var(--ink); font-weight: 500; }

.sheet__privacy { display: grid; gap: var(--s-4); }
.priv-row { display: flex; gap: var(--s-4); align-items: flex-start; }
.priv-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: .62em; }
.priv-dot--stay { background: var(--sage); }
.priv-dot--cond { background: var(--gold); }
.priv-dot--none { background: var(--ink-faint); }
.priv-row strong { font-size: .9rem; font-weight: 500; display: block; margin-bottom: 3px; }
.priv-row p { margin: 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.8; }

/* ═══ 页脚 / Toast ═══ */
.foot {
  position: relative; z-index: 2;
  padding: var(--s-6); text-align: center;
  border-top: 1px solid var(--rule-soft);
  font-size: .76rem; color: var(--ink-faint); line-height: 1.8;
}
.foot p { max-width: 62ch; margin: 0 auto; }

.toast {
  position: fixed; left: 50%; top: 14px;
  transform: translateX(-50%) translateY(-14px);
  z-index: 200;
  /* 固定用深墨底+浅字，不跟随主题反转 —— 否则深色模式下会变成浅底深字，
     在深色页面上几乎看不见（v10 实测踩过）。 */
  background: #2B2620; color: #F6EFE4;
  border: 1px solid rgba(255,255,255,.14);
  padding: 11px var(--s-5); border-radius: 100px; font-size: .84rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.28); opacity: 0;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
  pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
}
.toast[hidden] { display: none; }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ═══ 手机端 ═══
   三个真问题：
   ① 侧栏在手机上跑到很下面，输入框还被 fixed 挡住 → 改成单列 + 输入框贴底
   ② 按钮 44px 以下点不准（青少年手指偏小）→ 全部放大
   ③ 输入框在 iOS 上聚焦会跳版 → 提高行高防缩放 */
@media (max-width: 760px) {
  /* 单列：对话占满，侧栏收进底部抽屉（由「设置」按钮唤出） */
  .talk__body { display: flex; flex-direction: column; }
  .talk__stream { order: 1; min-height: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--s-4) var(--s-3) var(--s-3); }
  .talk__side  { order: 2; width: 100%; }

  /* 侧栏在手机上默认折叠，不占对话空间 */
  .talk__side { display: none; }
  body.side-open .talk__side {
    display: grid; position: fixed; z-index: 70;
    left: 0; right: 0; bottom: 0;
    max-height: 76dvh; overflow-y: auto;
    padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.2);
    animation: sheetUp .3s var(--ease) both;
  }
  /* 遮罩用真实元素（伪元素不接收点击事件，关不掉），
     z-index 必须低于抽屉（70），否则会盖住抽屉里的控件点不动。 */
  .side-scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(56,46,36,.5);
    animation: fadeIn .25s var(--ease) both;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

  /* 顶部操作按钮：声音开关占位、其余收成图标 */
  .talk__head { align-items: center; gap: var(--s-2); }
  .talk__actions { gap: 4px; }
  .talk__actions .btn { padding: 8px 12px; min-height: 40px; font-size: .8rem; }
  .sound-toggle { padding: 8px 12px; min-height: 40px; }
  .sound-toggle__label { font-size: .75rem; }

  /* 触控目标放大到 44px 起 */
  .btn { padding: 12px 18px; font-size: .92rem; min-height: 44px; }
  .btn--sm { padding: 9px 14px; min-height: 38px; }
  .mic { padding: var(--s-5) var(--s-4); }
  .opt { padding: 15px var(--s-4); min-height: 52px; }
  .voiceitem { padding: 14px var(--s-4); min-height: 48px; }

  /* 输入框：iOS 聚焦不缩放（<16px 会缩），行高留足 */
  #composerInput, #trustedAdult, .sheet input, .sheet textarea, select {
    font-size: 16px; padding: 12px var(--s-4); min-height: 48px;
  }
  #composerInput { min-height: 52px; }

  /* 输入框已是 sticky 贴底，不再需要额外留白 */
  .composer { padding: var(--s-2) var(--s-4) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); }
  .composer textarea { min-height: 52px; }
  #composerSend { min-height: 52px; padding-inline: var(--s-5); }

  /* 危机浮层全屏可滚，别截断 */
  .crisis { align-items: flex-start; padding: var(--s-4) var(--s-3); }
  .crisis__inner { padding: var(--s-5) var(--s-4); border-radius: var(--radius); }
  .callbtn__num { font-size: 1.15rem; }
  .callbtn--hot .callbtn__num { font-size: 1.45rem; }

  /* 语音面板的两个按钮并排更好点 */
  #btnVoicePick, #btnRepeat { width: 100%; }

  /* 顶栏在手机上只留图标。
     图标已经是 SVG，所以这里**不需要再靠 font-size:0 藏文字**了
     （那招会把 svg 之外的文字一起干掉，而且和 ::before 重复时会出现"半个图标"）。 */
  .masthead { gap: var(--s-2); padding: var(--s-3) var(--s-3); }
  .masthead__nav { gap: 2px; }
  .masthead__nav .btn {
    padding: 9px 11px; min-width: 40px; min-height: 40px; justify-content: center;
  }
  .nav-ico { width: 18px; height: 18px; }
  .masthead__nav .btn .dot-status { width: 7px; height: 7px; }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .hero__actions { gap: var(--s-3); }
  .hero__actions .btn { width: 100%; }
}

/* 手机横屏 / 矮屏：对话区别把内容挤没 */
@media (max-height: 480px) and (orientation: landscape) {
  .talk__stream { min-height: 0; }
}

/* 触摸设备不需要 hover 效果 */
@media (hover: none) {
  .opt:hover, .voiceitem:hover, .callbtn:hover, .btn:hover { transform: none; }
  .card:hover::before { opacity: 0; }
}

/* ═══ 深色模式 ═══
   不是简单反色。深色下要「降对比、提亮度」：
   纯黑纯白在 OLED 上很刺眼，用带一点暖调的深色更像纸的暗面。
   正文对比度保持 ≥ 7:1（AAA），因为这是给情绪低落的人看的。 */
@media (prefers-color-scheme: dark) {
  /* 深色变量必须在这里定义一次。
     v11 教训：我批量加data-force-light 守卫时把整个 :root{变量} 删了，
     以为「由 html[data-theme] 负责」—— 但那只覆盖手动选深色的情況，
     跟随系统时变量仍是浅色值，结果黑字白底、文字全糊。 */
  :root:not([data-force-light]) {
    --paper:      #221E19;
    --paper-deep: #2E2823;
    --card:       #2A2521;
    --ink:        #F2E9DC;
    --ink-soft:   #C0B5A6;
    --ink-faint:  #A2978A;   /* 4.9:1，小字说明也能读清 */
    --rule:       #443D35;
    --rule-soft:  #38322C;

    --sage:       #5FB5AC;   /* teal 提亮，深底上仍够对比 */
    --sage-deep:  #86CEC5;
    --sage-wash:  #1E3A37;
    --terra:      #EFA06B;
    --terra-wash: #3D2C21;
    --gold:       #F5C46A;

    --crisis:     #F2857A;
    --crisis-2:   #E8705F;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 28px 64px rgba(0,0,0,.5);
  }

  :root:not([data-force-light]) body {
    background:
      radial-gradient(120% 78% at 50% -12%, #2F2A24 0%, rgba(47,42,36,0) 62%),
      radial-gradient(90% 60% at 88% 8%, rgba(95,181,172,.07) 0%, rgba(95,181,172,0) 60%),
      radial-gradient(70% 50% at 8% 92%, rgba(239,160,107,.06) 0%, rgba(239,160,107,0) 62%),
      var(--paper);
  }

  /* 深色下颗粒要更轻，否则糊成一片噪点 */
  :root:not([data-force-light]) .grain { opacity: .22; mix-blend-mode: screen; }

  :root:not([data-force-light]) .masthead { background: rgba(34,30,25,.85); border-bottom-color: var(--rule-soft); }
  :root:not([data-force-light]) .btn--primary { --btn-bg: var(--sage); --btn-fg: #16211C; --btn-bd: var(--sage); }
  :root:not([data-force-light]) .btn--primary:hover { --btn-bg: var(--sage-deep); }
  :root:not([data-force-light]) .btn--cream { --btn-bg: var(--crisis-2); --btn-fg: #2A0E08; --btn-bd: var(--crisis-2); }
  :root:not([data-force-light]) .btn--cream:hover { --btn-bg: #F0A288; }
  :root:not([data-force-light]) .btn--danger { --btn-fg: var(--crisis); --btn-bd: rgba(242,133,122,.4); }

  :root:not([data-force-light]) .msg--me .msg__bubble { background: var(--sage-deep); color: #14201B; }
  :root:not([data-force-light]) .msg--me .msg__av { background: var(--paper-deep); color: var(--ink-soft); }
  :root:not([data-force-light]) .msg--ai .msg__bubble { background: rgba(42,38,34,.7); }

  :root:not([data-force-light]) .opt, :root:not([data-force-light]) .voiceitem, :root:not([data-force-light]) #composerInput, :root:not([data-force-light]) #trustedAdult, :root:not([data-force-light]) .sheet input, :root:not([data-force-light]) .sheet textarea, :root:not([data-force-light]) select {
    background: rgba(42,38,34,.7);
  }
  :root:not([data-force-light]) .opt.is-picked { background: var(--sage); border-color: var(--sage); color: #14201B; }
  :root:not([data-force-light]) .opt.is-picked .opt__key { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.2); color: #14201B; }
  :root:not([data-force-light]) .opt--crisis.is-picked { background: var(--crisis-2); border-color: var(--crisis-2); color: #2A0E08; }

  :root:not([data-force-light]) .crisis { background: rgba(8,6,5,.8); }
  :root:not([data-force-light]) .crisis__inner { background: #2A2420; border-color: rgba(242,133,122,.3); }
  :root:not([data-force-light]) .crisis__title, :root:not([data-force-light]) .crisis__aid { color: #FBEFE9; }
  :root:not([data-force-light]) .crisis__body { color: #D6C4BC; }
  :root:not([data-force-light]) .crisis__first { background: rgba(242,133,122,.09); border-color: rgba(242,133,122,.28); }
  :root:not([data-force-light]) .crisis__nudge { color: #C4B2AB; }
  :root:not([data-force-light]) .crisis__noadult { background: rgba(0,0,0,.22); color: var(--ink-soft); }
  :root:not([data-force-light]) .callbtn { background: var(--card); border-color: rgba(242,133,122,.25); }
  :root:not([data-force-light]) .callbtn:hover { background: #2E2823; }
  :root:not([data-force-light]) .callbtn--hot { background: var(--crisis-2); }
  :root:not([data-force-light]) .callbtn--hot .callbtn__num { color: #2A0E08; }
  :root:not([data-force-light]) .callbtn--hot .callbtn__txt { color: #2A0E08; }
  :root:not([data-force-light]) .callbtn--hot .callbtn__txt em { color: rgba(42,14,8,.7); }

  :root:not([data-force-light]) .sheet::backdrop { background: rgba(0,0,0,.68); }
  :root:not([data-force-light]) .advcfg > summary { background: var(--sage-wash); }
  :root:not([data-force-light]) .voiceitem.is-on { background: var(--sage); color: #14201B; }
  :root:not([data-force-light]) .ttsbar { background: linear-gradient(180deg, rgba(95,181,172,.09), rgba(95,181,172,.03)); }
  :root:not([data-force-light]) .badge-on { color: #14201B; }
  :root:not([data-force-light]) .vt--f { background: rgba(239,160,107,.2); color: var(--terra); }
  :root:not([data-force-light]) .pick { background: var(--card); border-color: var(--rule); }
  :root:not([data-force-light]) .pick__diff { background: var(--paper-deep); }
  :root:not([data-force-light]) .pick--talk { background: linear-gradient(135deg, #2A7D76, #35877F); }

  :root:not([data-force-light]) .fold { background: var(--card); }
  :root:not([data-force-light]) .foldopt,
  :root:not([data-force-light]) .wx,
  :root:not([data-force-light]) .foldcard { background: rgba(42,38,34,.6); }
  :root:not([data-force-light]) .fold__note { background: var(--paper-deep); }
  :root:not([data-force-light]) .foldcard--duty { background: var(--terra-wash); }
  :root:not([data-force-light]) .fold__hint--warm { background: var(--terra-wash); }

  :root:not([data-force-light]) .msg--ai .msg__bubble::after { border-left-color: #2E2823; }
  :root:not([data-force-light]) .msg--crisis .msg__bubble::after { border-left-color: #2E2823; }
  :root:not([data-force-light]) .composer { background: linear-gradient(to top, var(--paper) 62%, rgba(34,30,25,0)); }
  :root:not([data-force-light]) code { background: rgba(42,38,34,.8) !important; }
}

/* 用户手动强制亮/暗时也尊重 —— 注意必须把深色变量**覆盖回浅色值**，
   只设 color-scheme 不够（那样页面还是黑的）。 */
html[data-theme="light"] {
  color-scheme: light;
  --paper: #FFFBF3; --paper-deep: #F7EFE1; --card: #FFFFFF;
  --ink: #382E24; --ink-soft: #6B5D4F; --ink-faint: #8C7F6E;
  --rule: #EFE2CD; --rule-soft: #F5EBD9;
  --sage: #2E8B84; --sage-deep: #23706A; --sage-wash: #D9EDEA;
  --terra: #E2703A; --terra-wash: #FCEDE2; --gold: #EFAF3E;
  --crisis: #C0392B; --crisis-2: #D9534F;
  --shadow-sm: 0 1px 2px rgba(56,46,36,.05), 0 2px 8px rgba(56,46,36,.04);
  --shadow-md: 0 2px 4px rgba(56,46,36,.05), 0 12px 32px rgba(56,46,36,.08);
  --shadow-lg: 0 4px 8px rgba(56,46,36,.06), 0 28px 64px rgba(56,46,36,.13);
}

/* 手动暗色时，即使系统是亮色也要能切到深色 —— 所以需要一个不依赖
   媒体查询的暗色入口。用 CSS 变量无法复用媒体查询里的整块规则，
   这里改用「跟随系统」的中间层：默认 light，媒体查询改 dark，
   手动选择用 data-theme 覆盖（优先级高于媒体查询）。 */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #221E19; --paper-deep: #2E2823; --card: #2A2521;
  --ink: #F2E9DC; --ink-soft: #C0B5A6; --ink-faint: #A2978A;
  --rule: #443D35; --rule-soft: #38322C;
  --sage: #5FB5AC; --sage-deep: #86CEC5; --sage-wash: #1E3A37;
  --terra: #E08A63; --terra-wash: #3A2C24; --gold: #D9AE55;
  --crisis: #F0937C; --crisis-2: #E97F63;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 28px 64px rgba(0,0,0,.5);
}

/* ═══ 响应式 ═══ */
@media (max-width: 720px) {
  .masthead { padding: var(--s-3) var(--s-4); }
  .masthead__sub { display: none; }
  .wrap { padding: var(--s-6) var(--s-4) var(--s-8); }
  .wrap--hero { padding-top: var(--s-7); }
  .card, .question-card, .verdict { padding: var(--s-5); }
  .mode-card { padding: var(--s-5); }
  .talk__side { position: static; }
  .composer { padding: var(--s-3) var(--s-4); }
  .crisis__inner { padding: var(--s-6) var(--s-5); }
  .verdict__stamp { display: none; }
}

/* ═══ 减少动态 ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══ 打印 ═══ */
@media print {
  .masthead, .foot, .report-acts, .composer, .talk__side, .grain { display: none !important; }
  body { background: #fff; }
  .verdict, .metric, .advice-list li, .refer { break-inside: avoid; border-color: #ccc; }
  .screen { display: none !important; }
  .screen[data-screen="report"] { display: block !important; }
}
/* ═══════════════════════════════════════════════════════════
   倾诉页布局 —— 集中放在文件末尾，**必须最后赢**
   ───────────────────────────────────────────────────────────
   为什么集中在这里：这个文件里 .composer / .talk__body / .talk__stream
   各有两三处定义，散落在中间会被后面的覆盖（实测被 `position:sticky`
   + `margin-top` 的 .composer 顶掉，间距多出 500+ px）。
   同优先级下靠源码顺序决定胜负 → 布局相关的全部收在末尾，一次覆盖干净。

   目标结构（桌面/手机一致）：
     .screen--talk  锁高视口，自身不滚
       └ .wrap      flex:1 占满
           ├ .talk__head    固定
           ├ .talk__body    flex:1  ← 唯一可滚区
           └ .composer      固定在底部
   ═══════════════════════════════════════════════════════════ */
/* 视口高 = 100dvh - 顶栏高（62px，顶栏 fixed）。
   ⚠️ 用「减高度」而不是「margin-top 让位」——
      同时加 margin 和减高度会重复扣一次（实测多出 62px 又能滚）。
   页面不滚：靠 overflow:hidden + .wrap 的 flex:1 精确吃满剩余空间。 */
/* ⚠️⚠️ 只能写 .screen--talk.is-active，**不能**单独写 .screen--talk！
   上一轮我为了压过 .screen.is-active 的 display:block，写成了
     .screen--talk, .screen--talk.is-active { display:flex; ... }
    —— 那条裸选择器让对话页**无论是否激活都显示**，
   于是首页下面永远挂着一个空的对话页（田老师："难看了"、"对话框删了没"，就是这个）。
   正确做法：只用 .is-active 限定，靠源码顺序压过后面的同优先级规则。 */
.screen--talk.is-active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 62px);
  max-height: calc(100dvh - 62px);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
}
.screen--talk > .wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--s-5);
  padding-bottom: 0;   /* 之前是 s-3(12px) → 整页多出 7~12px 又能滚 */
}
@media (min-width: 1000px) {
  .screen--talk > .wrap { padding-top: var(--s-6); }
}

.talk__head { flex: none; }

/* 对话区：纵向、占满、唯一滚动的地方 */
.talk__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;   /* ← 原来是 row（为已不存在的右侧栏准备）*/
  gap: 0;
  position: relative;
}
.talk__stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sm);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
@media (min-width: 1000px) {
  .talk__stream { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* 输入框：普通流内固定，不要 sticky / margin-top（那两行正是间距过大的元凶） */
.composer {
  flex: none;
  position: static;
  bottom: auto;
  margin-top: var(--s-3);
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
  padding: var(--s-3);
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.composer textarea { flex: 1; min-height: 46px; max-height: 140px; }

/* 悬浮语音面板：收起时不占任何空间 */
.talk__float {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 20;
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.float__panel[hidden] { display: none; }

/* 打印样式里 .screen 被 !important 藏了，这里把倾诉页排除在打印之外即可 */

/* ═══ 倾诉页控制区（2026-10-14 简化版）═══
   说话按钮直接放进输入行；设置项收进右上角「设置」。
   原来的悬浮面板（通道选择/音色选择）已删除。 */
.talk__ctl {
  flex: none;
  display: none;                 /* 默认收起，由右上角设置打开 */
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.talk__ctl.is-open { display: grid; }
@media (min-width: 760px) {
  .talk__ctl.is-open { grid-template-columns: 1fr 1fr; }
}

/* 话筒按钮：和输入框并排，视觉上属于输入区 */
.micbtn {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--sage-deep);
  background: var(--sage-wash);
  border: 1px solid rgba(46,139,132,.28);
  border-radius: var(--radius);
  transition: all .2s var(--ease);
}
.micbtn:hover { background: var(--sage); color: #fff; border-color: var(--sage); }
.micbtn.is-live {
  background: var(--terra); color: #fff; border-color: var(--terra);
  animation: micPulse 1.4s var(--ease) infinite;
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(226,112,58,.45); }
  50%     { box-shadow: 0 0 0 8px rgba(226,112,58,0); }
}
.composer__hint {
  margin: var(--s-2) 0 0; font-size: .72rem; color: var(--ink-faint); text-align: center;
}
.composer__hint.is-live { color: var(--terra); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   2026-10-14 核心重构：一个开始 · 一个对话框
   ═══════════════════════════════════════════════════════════ */

/* ── 首页：只有标题和一个按钮 ── */
.startpad {
  min-height: calc(100dvh - 62px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-4); padding: var(--s-8) var(--s-5);
  text-align: center;
}
.startpad__brand {
  margin: 0; font-size: .7rem; letter-spacing: .26em;
  color: var(--ink-faint); text-transform: uppercase;
}
.startpad__logo {
  margin: 0; font-family: var(--serif);
  font-size: clamp(3rem, 13vw, 4.6rem); font-weight: 700;
  letter-spacing: .14em; line-height: 1.1;
  color: var(--sage);
}
.startpad__sub {
  margin: 0 0 var(--s-5);
  font-size: clamp(.95rem, 3.6vw, 1.1rem);
  color: var(--ink-soft); letter-spacing: .06em;
}
.startpad__go {
  min-width: 190px; padding: 15px 40px;
  font-size: 1.05rem; letter-spacing: .22em;
}
.startpad__fine {
  margin: var(--s-6) 0 0; max-width: 30ch;
  font-size: .74rem; line-height: 1.8; color: var(--ink-faint);
}
.startpad__fine a { color: var(--terra); font-weight: 500; }

/* ── 语音 / 文字 模式切换 ── */
.modesw {
  display: inline-flex; flex: none;
  background: var(--paper-deep); border-radius: 999px; padding: 3px;
  border: 1px solid var(--rule-soft);
}
.modesw__b {
  font: inherit; font-size: .78rem; cursor: pointer;
  padding: 6px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-faint);
  transition: all .18s var(--ease);
}
.modesw__b.is-on { background: var(--card); color: var(--sage); font-weight: 600; box-shadow: var(--shadow-sm); }

/* 语音模式：突出话筒、自动连续对话；**输入框保留**（不方便说话时还能打字）
   —— 2026-10-14：一开始把输入框 display:none 了，结果测评到一半想打字没入口。 */
body[data-chatmode="voice"] .micbtn {
  width: 58px; height: 58px; border-radius: 999px;
  background: var(--sage); color: #fff; border-color: var(--sage);
  box-shadow: 0 6px 20px rgba(46,139,132,.32);
}
body[data-chatmode="voice"] .composer textarea { opacity: .55; }
body[data-chatmode="voice"] .composer textarea:focus { opacity: 1; }
body[data-chatmode="voice"] .composer__hint { color: var(--sage); }

/* ── 对话里冒出的提示 ── */
.prompts {
  display: grid; gap: var(--s-2);
  padding: var(--s-4); margin-top: var(--s-2);
  background: var(--paper-deep); border-radius: var(--radius-lg);
  animation: rise .4s var(--ease) both;
}
.prompts__q { margin: 0 0 var(--s-2); font-size: .84rem; color: var(--ink-soft); text-align: center; }
.prompt {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 12px var(--s-4);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink);
  transition: all .18s var(--ease);
}
.prompt:hover { border-color: var(--sage); transform: translateX(3px); }
.prompt__t { font-weight: 600; font-size: .94rem; }
.prompt__d { font-size: .76rem; color: var(--ink-faint); flex: none; }

/* ── 底部两个按钮（2026-10-14 简化）──
   田老师："这个部分你简化成2个按钮，发送和语音聊天"
   顶部那组语音/文字切换已删除（与底部重复）。 */
.micbtn {
  width: auto; min-width: 74px; height: 46px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font: inherit; font-size: .84rem; white-space: nowrap;
}
.micbtn__t { font-size: .84rem; }
@media (max-width: 360px) { .micbtn__t { display: none; } .micbtn { min-width: 52px; } }

/* 语音模式相关规则已废弃（模式切换删了） */
body[data-chatmode="voice"] .micbtn { width: auto; height: 46px; border-radius: var(--radius); }
body[data-chatmode="voice"] .composer textarea { opacity: 1; }

/* ── 底部重排（2026-10-14 田老师）──
   "按钮大小不一样，应该放在发送按钮下面，这样文字框会大一些"
   结构：输入框独占一行 → 两个等宽按钮在下一行。 */
.composer {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--s-3);
}
.composer textarea {
  width: 100%; min-height: 52px; max-height: 130px;
  padding: 12px var(--s-4);
  font: inherit; font-size: .95rem; line-height: 1.7;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius);
  resize: none;
}
.composer textarea:focus { outline: none; border-color: var(--sage); }
.composer__row { display: flex; gap: var(--s-3); }
.composer__row .btn {
  flex: 1 1 0; justify-content: center;
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  font-size: .92rem;
}
/* 语音进行中的状态 */
#talkMic.is-live {
  background: var(--terra); color: #fff; border-color: var(--terra);
  animation: micPulse 1.4s var(--ease) infinite;
}
/* 文案统一由 JS 给，这里不要再拼后缀（否则会变成"（点此发送）（点此结束）"） */
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(226,112,58,.4); }
  50%     { box-shadow: 0 0 0 8px rgba(226,112,58,0); }
}
.composer__hint { text-align: center; }
.composer__hint.is-live { color: var(--terra); font-weight: 500; }

/* ── 首页主按钮加大、居中（2026-10-14 田老师要求）──
   "首页原来的开始，改成随便聊一聊，居中，大一点" */
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.btn--xl {
  min-width: min(280px, 78vw);
  padding: 18px 52px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .1em;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(46,139,132,.28);
}
.btn--xl:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(46,139,132,.34); }
.btn--xl:active { transform: translateY(0); }
@media (min-width: 760px) {
  .btn--xl { min-width: 320px; padding: 20px 60px; font-size: 1.22rem; }
}

/* 手机端原有一条 .hero__actions .btn{width:100%}（2 个类，特异性更高）
   会吃掉 .btn--xl 的宽度设置 → 这里用同等特异性覆盖，保持「居中、不满屏」 */
.hero__actions .btn--xl {
  width: auto;
  min-width: min(270px, 76vw);
  max-width: 90vw;
}
@media (max-width: 760px) {
  .hero__actions .btn--xl { width: auto; }
  .hero__actions { gap: var(--s-4); }
}

/* ── 测评选项按钮（田老师："下面应该给选项"）──
   画在对话流里，点一下就等于回答；也可以继续说话/打字。 */
.qopts {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-3) 0 var(--s-1) 42px;   /* 左侧留出头像的宽度，视觉上跟着 AI 的气泡 */
  animation: rise .3s var(--ease) both;
}
.qopt {
  font: inherit; font-size: .88rem; cursor: pointer;
  padding: 10px 18px; border-radius: 999px;
  color: var(--sage-deep); background: var(--sage-wash);
  border: 1px solid rgba(46,139,132,.3);
  transition: all .16s var(--ease);
}
.qopt:hover { background: var(--sage); color: #fff; border-color: var(--sage); }
.qopt:active { transform: scale(.97); }
@media (max-width: 480px) { .qopts { padding-left: 0; } .qopt { flex: 1 1 40%; text-align: center; } }

/* ── 底部按钮防溢出（2026-10-14：田老师反馈"页面会变宽"）──
   按钮文案最长到「语音输入 · 点此发送」，两个按钮各占一半时
   在 375px 屏上会撑破容器 → 出现横向滚动条。
   min-width:0 是关键：flex 子项默认 min-width:auto 不肯收缩。 */
.composer__row .btn {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 400px) {
  .composer__row .btn { font-size: .84rem; padding-left: 10px; padding-right: 10px; }
  .composer__row .btn svg { display: none; }   /* 窄屏去掉图标，只留文字 */
}

/* 语音不可用时的状态（微信内置浏览器） */
.composer__hint.is-warn {
  color: var(--terra); font-weight: 500; line-height: 1.7;
  text-align: left; padding: 0 4px;
}
.composer__hint.is-warn b { color: var(--crisis); }
#talkMic.is-dead {
  opacity: .5; cursor: not-allowed;
  background: var(--paper-deep); color: var(--ink-faint); border-color: var(--rule);
}

/* ── 消息间距兜底（2026-10-14 田老师截图：AI 消息和「又见面了」贴在一起像重叠）──
   对话流本身有 gap，但 sys 消息带整宽虚线框，视觉上会贴着上一条，
   再加一点上边距把它们分开。 */
.talk__stream .msg + .msg { margin-top: 2px; }
.talk__stream .msg--sys { margin-top: var(--s-2); }
.talk__stream .msg--sys + .msg { margin-top: var(--s-2); }
.talk__stream .msg--ai + .msg--me,
.talk__stream .msg--me + .msg--ai { margin-top: 4px; }

/* ── 消息间距兜底（2026-10-14 田老师截图：AI 消息和「又见面了」贴在一起像重叠）──
   对话流本身有 gap，但 sys 消息带整宽虚线框，视觉上会贴着上一条，
   再加一点上边距把它们分开。 */
.talk__stream .msg + .msg { margin-top: 2px; }
.talk__stream .msg--sys { margin-top: var(--s-2); }
.talk__stream .msg--sys + .msg { margin-top: var(--s-2); }
.talk__stream .msg--ai + .msg--me,
.talk__stream .msg--me + .msg--ai { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   报告 · 雷达图 / 求助电话 / 联系方式（2026-10-14）
   ⚠️ 一律用 CSS 变量着色，深浅色主题都跟着走，不要写死颜色
   ═══════════════════════════════════════════════════════════ */

/* 总分 */
.verdict__score {
  font-family: var(--serif); font-weight: 700; line-height: 1;
  margin: 0 0 var(--s-3); display: flex; align-items: baseline; gap: 6px;
}
.verdict__score b { font-size: 3.1rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.verdict__score small { font-size: .9rem; color: var(--ink-faint); font-weight: 400; }

.verdict__duty {
  margin: var(--s-4) 0 0; padding: 10px 14px;
  background: var(--paper-deep); border-left: 3px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .84rem; color: var(--ink-soft); line-height: 1.75;
}
.verdict__duty span {
  display: inline-block; margin-right: 8px; font-size: .68rem; letter-spacing: .1em;
  color: var(--sage); border: 1px solid var(--sage); border-radius: 100px; padding: 1px 8px;
}

/* 雷达图 */
.radars { display: grid; gap: var(--s-4); }
@media (min-width: 620px) { .radars { grid-template-columns: 1fr 1fr; } }
.radar-card {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg); padding: var(--s-4) var(--s-4) var(--s-3);
  margin: 0; text-align: center;
}
.radar-card figcaption {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  margin-bottom: 2px;
}
.radar-card figcaption b { font-family: var(--serif); font-size: .95rem; }
.radar-card figcaption span { font-size: .72rem; color: var(--ink-faint); }
.radar { width: 100%; height: auto; display: block; max-width: 288px; margin: 0 auto; }
.radar__note { font-size: .74rem; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.7; }

/* 命中项 */
.hitlist { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.hitlist li {
  display: flex; align-items: baseline; gap: var(--s-3);
  background: var(--card); border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
}
.hitlist li.is-crisis { border-left-color: var(--crisis); }
.hitlist li b { font-family: var(--serif); font-size: .95rem; flex: none; }
.hitlist li span { font-size: .78rem; color: var(--ink-faint); }
.hitlist li.is-crisis span { color: var(--crisis); }

/* 求助电话（可点拨打） */
/* 两行式：号码独占一行（「010-8295 1332」这种长号不会再被挤断），
   「拨打」药丸跨两行垂直居中。 */
.hotline { display: grid; gap: var(--s-2); }
.hotline__row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; column-gap: var(--s-3); row-gap: 3px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 12px 16px;
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.hotline__row:hover, .hotline__row:focus-visible { border-color: var(--sage); background: var(--sage-wash); }
.hotline__n {
  grid-column: 1; min-width: 0;
  font-family: var(--serif); font-weight: 700; font-size: 1.28rem; line-height: 1.25;
  color: var(--sage-deep); font-variant-numeric: tabular-nums;
}
.hotline__t {
  grid-column: 1; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 8px; row-gap: 1px; font-size: .84rem; color: var(--ink-soft);
}
.hotline__t small { font-size: .72rem; color: var(--ink-faint); }
.hotline__go {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end;
  font-size: .74rem; letter-spacing: .08em; white-space: nowrap;
  color: var(--sage); border: 1px solid var(--sage); border-radius: 100px; padding: 4px 12px;
}
.hotline__more { font-size: .78rem; color: var(--ink-faint); line-height: 1.8; margin: var(--s-2) 0 0; }

/* 危机时置顶的那一个电话 */
.sos {
  background: var(--crisis); color: #fff;
  border-radius: var(--radius-lg); padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-5); text-align: center;
  box-shadow: var(--shadow-md);
}
.sos__t { margin: 0; font-size: .8rem; letter-spacing: .12em; opacity: .9; }
.sos__tel {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 2.6rem; line-height: 1.25; color: #fff; text-decoration: none;
  letter-spacing: .04em; margin: 4px 0 6px;
}
.sos__d { margin: 0; font-size: .78rem; opacity: .92; line-height: 1.7; }

/* 联系方式（可填可不填） */
.contact-card {
  background: var(--paper-deep); border: 1px dashed var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
.contact-card__d { margin: 0 0 var(--s-4); font-size: .84rem; color: var(--ink-soft); line-height: 1.8; }
.contact-card__row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.contact-card__row input {
  flex: 1 1 200px; min-width: 0;
  font: inherit; font-size: .9rem; padding: 10px 13px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.contact-card__row input::placeholder { color: var(--ink-faint); }
.contact-card__row .btn { flex: none; }
.contact-card__n { margin: var(--s-3) 0 0; font-size: .78rem; color: var(--sage); min-height: 1.2em; }

/* 报告页脚的小链接按钮 */
.linkbtn {
  background: none; border: 0; padding: 0; margin-left: 6px;
  font: inherit; font-size: inherit; color: var(--sage);
  text-decoration: underline; cursor: pointer;
}

@media print {
  .radar-card, .hitlist li, .hotline__row, .contact-card { break-inside: avoid; }
  .sos { background: #fff; color: #000; border: 2px solid #000; }
  .sos__tel { color: #000; }
}

/* 倾诉页顶部「做个测评 / 结束测评」：正在测评时高亮，让人知道现在在哪个模式 */
.talk__actions .btn.is-on {
  background: var(--sage); border-color: var(--sage-deep); color: #fff;
}
.talk__actions .btn.is-on:hover { background: var(--sage-deep); }
@media (max-width: 420px) {
  /* 三个按钮挤在 390px 上，「做个测评」是最长的那个，缩一点字距 */
  .talk__actions .btn { padding: 8px 10px; }
  #talkToScale { letter-spacing: -.01em; }
}

/* ═══════════════════════════════════════════════════════════
   2026-10-15 田老师报的界面 bug
   ═══════════════════════════════════════════════════════════ */

/* ① 输入框右边缘溢出（他截图圈的就是这个，不是 resize 三角）
   根因：全站**从来没有 box-sizing: border-box**，
   而 `.composer textarea { width: 100% }` + `padding: 12px 16px` + `border: 1px`
   在 content-box 下 = 「容器宽 + 34px」→ 右边一定会顶出卡片。
   （手机屏窄、看着不明显，一到宽屏就很扎眼。）
   只给表单控件加，不动全局 —— 全局改会牵动已经调好的其它版式。 */
input, textarea, select, button { box-sizing: border-box; }

/* ② 左上角「心晴」改成可点回首页的按钮：去掉浏览器默认按钮外观 */
.masthead__brand {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.masthead__brand:hover { opacity: .78; }
.masthead__brand:active { transform: translateY(1px); }
.masthead__brand:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }

/* ③ 页脚：机构 logo + 全名，整块可点进官网。
   田老师：「这种形式，不要写官网」→ 不挂「官网 ↗」标签，
   入口就是这一行本身，hover 时靠底纹+轻微上浮提示"这里能点"。 */
.foot__org {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 8px 16px 8px 10px; margin: 0;
  border: 1px solid transparent; border-radius: 100px;
  text-decoration: none; color: inherit;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.foot__org:hover { background: var(--card); border-color: var(--rule); transform: translateY(-1px); }
.foot__org:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.foot__orglogo { display: block; height: 30px; width: auto; flex: none; }
.foot__orgname { font-size: .86rem; font-weight: 600; letter-spacing: .01em; }

/* ④ 合规一句话（不是"啰嗦文案"，删不得）：说清工具性质与边界。
   刻意做小做淡 —— 让它"在，但不抢眼"，跟上面那句"不啰嗦"并不矛盾。 */
/* ⚠️ 必须写成 `.foot p.foot__note`：站内已有 `.foot p { max-width:62ch; margin:0 auto }`
   （特异性 0,1,1），比我单写 `.foot__note`（0,1,0）高 —— 光写类名会被它盖掉，
   表现就是"间距设了没生效"。 */
.foot p.foot__note {
  margin: 12px 0 0; max-width: 46ch;
  font-size: .74rem; line-height: 1.75;
  color: var(--ink-faint); text-align: center; text-wrap: balance;
}
@media (max-width: 480px) {
  /* 窄屏：换成竖排，避免机构名被挤成两行半 */
  .foot__org { flex-direction: column; gap: 6px; text-align: center; }
  .foot__orglogo { height: 26px; }
  .foot__orgname { font-size: .8rem; }
  .foot p.foot__note { font-size: .72rem; max-width: 30ch; }
}

/* ═══ ⑤ 确认浮层（"回首页 / 退出测评"用）2026-10-15 ═══
   z-index 130 刻意**高于顶栏(40)、抽屉(70)、危机浮层(100)** ——
   跟"起名字"浮层（39，在顶栏之下）刚好相反：
   起名层是"顺便认识一下"，不该拦住退路；确认层是**真的要拦住你一下**，
   必须盖住一切、等一个答复。同一套卡片，两种意图，层级就按意图定。 */
.cfmlayer {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: var(--s-4);
  background: rgba(56,46,36,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .22s var(--ease) both;
}
.cfmcard {
  width: min(400px, 100%);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-6); text-align: center;
  animation: rise .32s var(--ease) both;
}
.cfmcard__title { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: .01em; }
.cfmcard__body {
  margin: var(--s-3) 0 0; font-size: .88rem; line-height: 1.75;
  color: var(--ink-soft); text-wrap: pretty;
}
.cfmcard__body b { color: var(--ink); font-weight: 600; }
.cfmcard__acts {
  display: flex; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-5); flex-wrap: wrap;
}
.cfmcard__acts .btn { min-width: 108px; justify-content: center; }
@media (max-width: 400px) {
  .cfmcard { padding: var(--s-5) var(--s-4); }
  .cfmcard__acts .btn { min-width: 0; flex: 1; }
}

/* ⚠️ 顺手补的漏（2026-10-15）：
   站内原来的 `@keyframes fadeIn` 是写在**窄屏 media query 里面**的（见 .side-scrim 附近），
   而 `@keyframes` 写在 media 里 = 只在那个断点才注册 → **桌面端引用它的淡入动画一直没生效**
   （起名浮层、抽屉遮罩在电脑上看都是"啪"地出现）。
   这里在全局再声明一次，内容与原来完全一致，桌面上就能正常淡入了。 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══ ⑥ 声音自检清单（设置面板里）═══ */
.diag { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.diag li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--rule-soft); border-radius: 8px;
  font-size: .8rem; line-height: 1.6; background: rgba(35,32,28,.02);
}
.diag__k { color: var(--ink-soft); }
.diag__v { font-weight: 600; white-space: nowrap; }
.diag li.is-bad { background: rgba(122,36,24,.07); border-color: rgba(122,36,24,.24); }
.diag li.is-bad .diag__v { color: var(--crisis); }
.diag li.is-ok .diag__v { color: var(--sage); }

/* ═══════════════════════════════════════════════════════════
   ⑦ 留言板 / 小纸条（2026-10-20）
   ---------------------------------------------------------------
   留言板是**滚动列表**（田老师明确要滚动），小纸条是**时间线**。
   两者共用 .board-list/.slip-list 的外框，只是条目长相不同：
   留言板是"别人说的话"，所以用卡片 + 代号；
   小纸条是"我和一个人之间的来回"，所以用气泡 + 连接线。
   ═══════════════════════════════════════════════════════════ */

.sheet--board { width: min(560px, 94vw); }

/* 顶部按钮上的小红点（有未读回复时亮） */
.dot-new {
  display: inline-block; width: 6px; height: 6px; margin-left: 3px;
  border-radius: 50%; background: var(--crisis, #b2463a); vertical-align: middle;
}

/* ── 滚动列表外框 ── */
.board-list, .slip-list {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;      /* 滚到头不要带着整页一起滚（手机上很烦） */
  display: grid; gap: 10px;
  margin: 4px 0 16px;
  padding: 2px 4px 2px 2px;
  /* 上下一层淡淡的白，暗示"这里可以滚" */
  mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
}
.board-list::-webkit-scrollbar, .slip-list::-webkit-scrollbar { width: 6px; }
.board-list::-webkit-scrollbar-thumb, .slip-list::-webkit-scrollbar-thumb {
  background: rgba(90,80,66,.22); border-radius: 99px;
}

.board-empty {
  margin: 18px 0; text-align: center; font-size: .8rem; color: var(--ink-faint);
  line-height: 1.7;
}

/* ── 留言板条目 ── */
.note {
  border: 1px solid var(--rule-soft); border-radius: 10px;
  padding: 10px 13px; background: rgba(255,255,255,.5);
}
.note__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.note__nick { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.note__when { font-size: .7rem; color: var(--ink-faint); white-space: nowrap; }
.note__text {
  margin: 0; font-size: .87rem; line-height: 1.75; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
/* 社工回复：左侧一条竖线，跟原留言区分开 */
.note__reply {
  margin: 9px 0 0; padding: 7px 0 0 11px;
  border-left: 2px solid var(--sage, #7d9471);
  font-size: .82rem; line-height: 1.7; color: var(--ink-soft);
}
.note__reply b { color: var(--sage, #7d9471); font-weight: 700; }

/* ── 小纸条时间线 ── */
.slip { border-bottom: 1px dashed var(--rule-soft); padding: 4px 0 14px; }
.slip:last-child { border-bottom: 0; }
.slip__when { font-size: .7rem; color: var(--ink-faint); margin-bottom: 6px; }

.slip__me {
  margin: 0 0 0 auto; max-width: 88%;
  background: rgba(125,148,113,.13); border: 1px solid rgba(125,148,113,.26);
  border-radius: 12px 12px 3px 12px;
  padding: 9px 13px; font-size: .87rem; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}
.slip__them {
  margin: 9px auto 0 0; max-width: 88%;
  background: rgba(255,255,255,.72); border: 1px solid var(--rule-soft);
  border-radius: 12px 12px 12px 3px;
  padding: 9px 13px; font-size: .85rem; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}
.slip__them::before {
  content: "社工回复"; display: block; margin-bottom: 4px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: var(--sage, #7d9471);
}
.slip__wait {
  margin: 8px 0 0; font-size: .74rem; color: var(--ink-faint);
}

/* ── 写留言区 ── */
.board-write { border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.board-write textarea { width: 100%; resize: vertical; }
.board-warn {
  margin: 8px 0 12px; font-size: .76rem; line-height: 1.7; color: var(--ink-faint);
}
.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: inherit; color: var(--sage, #6f8a63);
  text-decoration: underline; text-underline-offset: 3px;
}