/*
 * 问盼答 · 编辑排版体系（2026-10-24）
 *
 * 参考 ai-2040.com 的纸质报告语言：暖白纸底、衬线、单一深红强调、细黑线分层、
 * 直角按钮、网点图表。放在 app.css 之后加载，只覆盖视觉层，不动布局与交互。
 *
 * 字体分工（推荐方案）：
 *   标题 / 正文 / 小盼说的话 → 衬线（宋体系）
 *   按钮 / 标签 / 数字小单位   → 无衬线（小字更清楚）
 */

:root {
  --paper:       #FFFDF6;   /* 暖白纸，不是纯白 */
  --paper-raise: #FFFDF6;
  --paper-sink:  #FBF8EE;
  --ink:         #14202E;   /* 墨蓝，比纯黑柔和 */
  --ink-soft:    #4A5260;
  --ink-faint:   #8A8578;
  --line:        rgba(20, 32, 46, .18);
  --line-soft:   rgba(20, 32, 46, .10);

  --brand:       #8B0000;   /* 唯一强调色：深红 */
  --bamboo:      #7A6E4F;   /* 原来竹青 → 暖褐（对勾/进度） */
  --seal:        #8B0000;
  --seal-press:  #690000;

  /* 胶囊与圆角全部收成印刷品：2px 直角 */
  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 2px;
  --r-pill: 2px;

  --shadow-seal: none;

  --serif: "Noto Serif CJK SC", "Songti SC", "STSong", Georgia, "Times New Roman", serif;
  --sans:  "Noto Sans CJK SC", "PingFang SC", -apple-system, system-ui, sans-serif;
}

/* ── 基础：纸感与字体分工 ────────────────────────────── */
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
body { letter-spacing: .01em; }

h1, h2, h3, .lede, .panel-hint, .bubble, .session-tip-text, .achv-tip {
  font-family: var(--serif);
}
button, input, .chip, .tab-btn, .meta-line, .wallet-label, .account-id, label {
  font-family: var(--sans);
}

/* ── 顶栏：去掉卡片感，改成一条细线 ──────────────────── */
.topbar {
  background: transparent;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  padding: 14px 20px 12px;
}
.topbar-left { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--ink-soft); }
.topbar .dot { width: 7px; height: 7px; }

/* 余额：从胶囊降级成一行小字，红色圆点做状态 */
#wallet-chip.chip, .chip {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
#wallet-chip::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: 1px;
}

/* ── 按钮：直角细线 ───────────────────────────────── */
.btn, .btn-primary, .btn-ghost {
  border-radius: 2px;
  font-family: var(--sans);
  letter-spacing: .06em;
  box-shadow: none;
  transition: none;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.btn-primary:active { background: #0B141E; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:active { background: var(--paper-sink); }
.btn-compact { border-radius: 2px; }

/* ── 面板：取消卡片，靠细线分层 ───────────────────── */
.panel-block, .wallet-card, .chart-card, .achv {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.panel-block + .panel-block,
.chart-card + .chart-card { border-top: 1px solid var(--line); }

.panel-block h2 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .02em;
}
.panel-hint { font-size: 13px; line-height: 1.85; color: var(--ink-soft); }

/* ── 输入框 ──────────────────────────────────────── */
input[type="text"], input[type="tel"], input:not([type]) {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--serif);
  color: var(--ink);
}
input::placeholder { color: var(--ink-faint); }

/* ── 对话气泡：孩子=纸片；小盼=红色边注 ───────────── */
.captions { gap: 14px; padding-top: 6px; }
.bubble {
  border-radius: 2px;
  font-size: 14.5px;
  line-height: 1.78;
  box-shadow: none;
}
.bubble.b-kid {
  background: var(--paper-sink);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.bubble.b-buddy {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-left: 3px solid var(--brand);
  border-radius: 0;
  padding: 2px 0 2px 12px;
}
.bubble.b-buddy::before {
  content: "小 盼";
  display: block;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--brand);
  margin-bottom: 3px;
}

/* ── 模式切换：下划线标签，不是胶囊 ───────────────── */
.modes, .mode-row { border-radius: 0; }
.mode-btn, .seg, .seg-btn { border-radius: 2px; }
.mode-btn.active, .seg-btn.active {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  border-bottom: 2px solid var(--brand);
  border-radius: 0;
}

/* ── 底部导航 ────────────────────────────────────── */
.tabbar {
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.tab-btn {
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.tab-btn.active { color: var(--ink); }

/* ── 预设主题、进度条等小件 ───────────────────────── */
.preset-chip {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12.5px;
}
.preset-chip:active { border-color: var(--brand); color: var(--brand); background: transparent; }

.session-tip {
  border: 0;
  border-left: 3px solid var(--brand);
  border-radius: 0;
  background: var(--paper-sink);
}
.session-tip-head { color: var(--brand); letter-spacing: .12em; }

/* ── 成就卡：细线框，像一张卡纸 ───────────────────── */
.achv { border: 1px solid var(--ink); padding: 18px 16px 14px; }
.achv-chip { background: transparent; border: 1px solid var(--line); border-radius: 2px; color: var(--brand); }
.achv-tip { border-left-color: var(--brand); background: var(--paper-sink); }

/* ── 报告图表：网点填充（致敬参考站）───────────────── */
.chart-card { border: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
.chart-title, .chart-foot, .figcap { font-family: var(--sans); }
.bar { fill: rgba(20,32,46,.18); }
.donut-bg { stroke: rgba(20,32,46,.12); }
.donut-fg { stroke: var(--brand); }
.donut-text { font-family: var(--serif); font-weight: 400; }
.cov-bar { background: rgba(20,32,46,.08); border-radius: 0; }
.cov-bar i { background: var(--bamboo); border-radius: 0; }

/* ── 钱包卡：从大黑块变成报表数字 ─────────────────── */
.wallet-card {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 18px 0 16px;
  /* app.css 原本是「深底 + white 字」，这里把底改成透明后
     必须同步改字色，否则白字印在纸上 = 整块看不见 */
  color: var(--ink);
}
.wallet-value { font-family: var(--serif); font-weight: 400; font-size: 40px; letter-spacing: -.01em; }
.wallet-label { letter-spacing: .16em; font-size: 10.5px; text-transform: uppercase; }

/* ── Toast：墨底纸字 ────────────────────────────── */
.toast, .toast.show { border-radius: 2px; font-family: var(--sans); }

/* ── 入口页 ──────────────────────────────────────── */
.entry h1 { font-size: 44px; font-weight: 400; letter-spacing: .04em; }
.entry .lede { font-size: 15px; line-height: 1.95; color: var(--ink-soft); }
.entry .mark { filter: grayscale(1) contrast(1.1); }

/* ── 熊猫（2D 兜底）：纸白脸 + 墨线 + 网点腮红 ────── */
.panda .face { background: var(--paper); border-width: 2.5px; }
.panda .ear::after { background: #554A78; opacity: .18; }
.panda .blush {
  background: var(--brand);
  -webkit-mask-image: radial-gradient(var(--ink) 1px, transparent 1.2px);
  mask-image: radial-gradient(var(--ink) 1px, transparent 1.2px);
  -webkit-mask-size: 4px 4px;
  mask-size: 4px 4px;
  filter: none;
  opacity: .55;
}

/* ── 对话控制区：主按钮改墨色，模式改下划线标签 ─────── */
.talk-btn {
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .14em;
  min-height: 58px;
  box-shadow: none;
  transition: none;
}
.talk-btn:active { transform: none; box-shadow: none; background: #0B141E; }
/* 正在说话：唯一用到整块红色的地方，表示"正在录音" */
.talk-btn[aria-pressed="true"] {
  background: var(--brand);
  color: var(--paper);
  box-shadow: none;
}

.mode-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0 10px;
  gap: 22px;
  justify-content: flex-start;
}
.mode-btn {
  flex: 0 0 auto;
  border-radius: 0;
  padding: 2px 0 8px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  background: none;
}
.mode-btn[aria-pressed="true"] {
  background: none;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--brand);
  margin-bottom: -11px;
  padding-bottom: 9px;
}

.talk-meta, .balance-hint { font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint); }
.talk-status { font-family: var(--serif); font-size: 14px; color: var(--ink-soft); }


/* 对话页背景统一成纸白：3D 画布的 clearColor 是 #FFFDF6，
   如果这里还是冷紫渐变，画布会显出一个明显的浅色方块 */
#tab-talk { background: var(--paper); }


/* 入口：用 3D 渲染的头像图代替原来的 CSS 剪影（剪影在纸底上就是一坨黑） */
.mark-img {
  display: block;
  margin: 0 auto;
  width: 132px;
  height: 132px;
}
/* 次要链接不要抢红色：红只留给「动作」与「小盼」 */
.entry .link-btn { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.entry .link-btn::after { display: none; }

/* 报告柱状图：网点填充 + 语义色统一（复合选择器，避免被 .bar 覆盖） */
.bar { fill: rgba(20, 32, 46, .16); }
.bar.bar-on { fill: url(#apDots); }
/* 报告标题用墨色，红色只留作强调线 */
#tab-growth h2 { color: var(--ink); font-weight: 400; font-size: 22px; }

/* ── 连接状态灯 ────────────────────────────────── */
.talk-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: transparent;
  border: 1.5px solid var(--ink-faint);
}
.talk-status[data-state="connecting"] .status-dot {
  background: #8B6A00; border-color: #8B6A00;
  animation: connPulse 1s ease-in-out infinite;
}
.talk-status[data-state="ready"] .status-dot { background: var(--ink); border-color: var(--ink); }
.talk-status[data-state="listening"] .status-dot { background: var(--bamboo); border-color: var(--bamboo); }
.talk-status[data-state="speaking"] .status-dot {
  background: var(--brand); border-color: var(--brand);
  animation: connPulse .8s ease-in-out infinite;
}
.talk-status[data-state="error"] { color: var(--brand); }
.talk-status[data-state="error"] .status-dot { background: var(--brand); border-color: var(--brand); }
@keyframes connPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── 积分明细 ──────────────────────────────────── */
.ledger-list { margin-top: 6px; }
.ledger-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ledger-kind { font-family: var(--serif); font-size: 14px; color: var(--ink); }
.ledger-note { font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint); }
.ledger-right { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; flex: none; }
.ledger-amount { font-family: var(--serif); font-size: 15px; font-variant-numeric: tabular-nums; }
.ledger-amount.minus { color: var(--brand); }
.ledger-amount.plus { color: var(--bamboo); }
.ledger-meta { font-family: var(--sans); font-size: 10px; color: var(--ink-faint); }

/* 区块标题统一墨色：红色只留给「动作」和「小盼」，不然满屏红会失焦 */
.panel-block h2, .wallet-card h2 { color: var(--ink); }

/* ── 主题库 ────────────────────────────────────── */
.current-topic { margin: 10px 0 4px; }
.current-topic-card {
  padding: 14px 16px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--paper-sink);
}
.current-topic-title { font-family: var(--serif); font-size: 18px; }
.current-topic-meta { font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }
/* 一天可以准备多个主题：第一条是「当前在聊」，其余弱化显示 */
.current-topic-card + .current-topic-card { margin-top: 8px; }
.current-topic-card.is-backup { border-color: var(--line); background: transparent; }
.current-topic-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.current-topic-badge {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .08em;
}

.topic-actions { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; }
.topic-actions .btn { width: auto; padding: 8px 14px; font-size: 12.5px; }

.form-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.form-actions .btn { width: auto; padding: 10px 16px; }

.topic-library { margin-top: 6px; }
.topic-library-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
.topic-library-head .meta { letter-spacing: .16em; font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; }
.topic-library-head input {
  flex: 1; max-width: 190px; padding: 7px 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
}
.topic-list { margin-top: 4px; }
.topic-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.topic-main { min-width: 0; flex: 1; }
.topic-title { font-family: var(--serif); font-size: 15px; }
.topic-meta { font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }
.topic-ops { display: flex; align-items: center; gap: 6px; flex: none; }
.topic-ops .btn { width: auto; padding: 6px 10px; font-size: 11.5px; }
.topic-used { font-family: var(--sans); font-size: 11px; color: var(--brand); }

/* ── 主题分享 ──────────────────────────────────── */
/* 当前主题卡上的「分享」：和右上角的 × 并排，但不抢视觉 */
.current-topic-share {
  flex: none;
  margin-top: 1px;
  padding: 2px 6px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
}
.current-topic-share:hover,
.current-topic-share:focus-visible { color: var(--brand); }

/* 入口页：从分享链接进来但还没登录 */
.entry-share {
  margin: 18px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--brand);
  background: var(--paper-sink);
  text-align: left;
}
.entry-share-title { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.entry-share-hint {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

.share-sheet { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
.share-kicker {
  margin: 2px 0 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--ink-faint);
}
.share-title { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.35; color: var(--ink); }
.share-meta { margin: 6px 0 0; font-family: var(--sans); font-size: 12px; line-height: 1.7; color: var(--ink-soft); }
.share-notes {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--line);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  white-space: pre-wrap;
}
.share-status {
  margin: 14px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--bamboo);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
}
.share-count { margin: 8px 0 0; font-family: var(--sans); font-size: 11.5px; color: var(--ink-faint); }
.share-hint {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-faint);
}
.share-link-row { display: flex; gap: 8px; margin-top: 14px; }
.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink);
}
.share-link-row .btn { flex: none; width: auto; }
.share-poster-wrap { margin-top: 18px; text-align: center; }
.share-poster-link { display: block; text-decoration: none; }
.share-poster {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: var(--paper);
}
.share-poster-wrap .share-hint { text-align: center; }
.share-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.share-actions .btn { text-decoration: none; }
.share-actions .btn { width: auto; }
.share-actions .btn-primary { flex: 1; min-width: 140px; }

/* ── 主题共创面板 ──────────────────────────────── */
.coach-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 32, 46, .38);
  display: flex; align-items: flex-end; justify-content: center;
}
.coach-panel {
  width: 100%; max-width: 460px; max-height: 82vh;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
}
.coach-head { display: flex; align-items: baseline; justify-content: space-between; }
.coach-title { font-family: var(--serif); font-size: 16px; }
.coach-close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-soft); }
.coach-hint { font-family: var(--sans); font-size: 11px; color: var(--ink-faint); margin: 6px 0 10px; line-height: 1.7; }

.coach-messages {
  flex: 1; min-height: 120px; max-height: 38vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 4px 0;
}
.coach-msg {
  max-width: 85%; padding: 9px 12px; font-size: 14px; line-height: 1.7;
  border-radius: 2px;
}
.coach-msg.from-user { align-self: flex-end; background: var(--paper-sink); border: 1px solid var(--line); }
.coach-msg.from-ai { align-self: flex-start; border-left: 3px solid var(--brand); padding-left: 10px; }

.coach-draft {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--ink); background: var(--paper-sink);
}
.coach-draft-title { font-family: var(--serif); font-size: 17px; }
.coach-draft-meta { font-family: var(--sans); font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
.coach-draft-actions { display: flex; gap: 8px; margin-top: 10px; }
.coach-draft-actions .btn { width: auto; padding: 8px 14px; }

.coach-input-row { display: flex; gap: 8px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.coach-input-row input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px; }
.coach-input-row .btn { width: auto; padding: 10px 16px; flex: none; }

/* ── 小盼（SVG · 巧虎式粗描边平涂）────────────────────
   动画全部走 CSS：眨眼、竹芽摇摆、说话张嘴、挥爪。
   JS 只负责切 data-state 和写 --vocal（音量 0~1），不做逐帧绘制。 */
.panda {
  width: 168px;
  height: 168px;
  flex: none;
  display: block;
  overflow: visible;
}
.panda .p-eyes {
  transform-box: view-box;
  transform-origin: 100px 90px;
  animation: pandaBlink 4.6s infinite;
}
@keyframes pandaBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 96%      { transform: scaleY(0.08); }
}
.panda .p-sprout {
  transform-box: view-box;
  transform-origin: 104px 30px;
  animation: pandaSway 3.6s ease-in-out infinite;
}
@keyframes pandaSway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
/* 嘴：闭是 ω，说话换成张开 + 小舌头，开口大小跟音量 */
.panda .p-mouth-open {
  display: none;
  transform-box: view-box;
  transform-origin: 100px 110px;
}
.panda[data-state="speaking"] .p-mouth-closed { display: none; }
.panda[data-state="speaking"] .p-mouth-open {
  display: block;
  transform: scaleY(calc(0.45 + var(--vocal, 0) * 1.1));
}
/* 听：歪头 + 睁大眼 */
.panda[data-state="listening"] .p-head {
  transform-box: view-box;
  transform-origin: 100px 150px;
  transform: rotate(-4deg);
}
.panda[data-state="listening"] .p-eyes {
  transform: scale(1.06);
}
/* 说：点头 + 挥爪 */
.panda[data-state="speaking"] {
  animation: pandaBob 0.6s ease-in-out infinite alternate;
}
@keyframes pandaBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}
.panda[data-state="speaking"] .p-paw-l,
.panda[data-state="speaking"] .p-paw-r {
  transform-box: view-box;
  animation: pandaWave 0.8s ease-in-out infinite alternate;
}
.panda[data-state="speaking"] .p-paw-l { transform-origin: 52px 176px; }
.panda[data-state="speaking"] .p-paw-r { transform-origin: 148px 176px; animation-name: pandaWaveR; }
@keyframes pandaWave  { from { transform: rotate(0deg); } to { transform: rotate(-14deg); } }
@keyframes pandaWaveR { from { transform: rotate(0deg); } to { transform: rotate(14deg); } }
/* 思考气泡 */
.panda .p-think { opacity: 0; }
.panda[data-state="thinking"] .p-think {
  opacity: 1;
  animation: thinkFade 1.2s ease-in-out infinite;
}
@keyframes thinkFade {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .panda, .panda .p-eyes, .panda .p-sprout,
  .panda[data-state="speaking"] .p-paw-l,
  .panda[data-state="speaking"] .p-paw-r { animation: none !important; }
}

/* ── 小盼（AI 毛绒写实图）───────────────────────────
   纸色底 + 两帧交叉淡入：静立微笑 ↔ 开口说话。
   动画只在 transform/opacity，不触发重排。 */
.panda {
  position: relative;
  width: 196px;
  height: 196px;
  flex: none;
  animation: pandaBreathe 4.2s ease-in-out infinite;
}
@keyframes pandaBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
.panda-inner {
  position: absolute;
  inset: 0;
  transition: transform .28s ease;
}
.panda[data-state="listening"] .panda-inner { transform: rotate(-3deg) scale(1.02); }
.panda[data-state="speaking"] .panda-inner  { animation: pandaBob 0.7s ease-in-out infinite alternate; }
@keyframes pandaBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}
.panda-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  transition: opacity .12s linear;
}
.panda-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.panda-say { opacity: 0; }
.panda[data-state="speaking"] .panda-say  { opacity: 1; }
.panda[data-state="speaking"] .panda-idle { opacity: 0; }
/* 思考态：轻轻缩一下，像在等你说话 */
.panda[data-state="thinking"] .panda-inner { transform: scale(0.985); }


@media (prefers-reduced-motion: reduce) {
  .panda, .panda[data-state="speaking"] .panda-inner { animation: none !important; }
}

/* 入口 logo：picture 包裹后需要自己撑起尺寸 */
/* 小盼趴在墙沿上探头：无边框，图片四边已柔化融进纸色 */
.mark-img {
  display: block;
  margin: 0 auto 2px;
  width: 244px;
  height: auto;
}
.mark-img img { width: 100%; height: auto; display: block; }

/* 头像：四边轻微羽化。
   图片背景经过白点校正确实接近纸色，但生成图自带柔和渐晕，差 1~3 级；
   硬边会把这个差值显成一个方框，羽化后读作环境阴影。
   底部多 fade 一些，因为那里穿过黑色肩膀。 */
.panda-frame img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 74%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 74%, transparent 97%);
  mask-composite: intersect;
}

/* ── 小盼头部三帧 ───────────────────────────────
   静（闭嘴）/ 说（张嘴）/ 眨（闭眼）。
   说话时 .is-open 按音量高频切换 = 嘴在动；眨眼由 JS 定时触发。 */
.panda { width: 216px; height: 216px; }
.panda-say, .panda-blink { opacity: 0; }
.panda.is-open .panda-idle { opacity: 0; }
.panda.is-open .panda-say  { opacity: 1; }
.panda.is-blink .panda-idle { opacity: 0; }
.panda.is-blink .panda-blink { opacity: 1; }
/* 张嘴帧切换要快，眨眼也要快，静帧回到慢过渡 */
.panda-frame { transition: opacity .09s linear; }

/* 麦克风律动圈：挂在 #buddy 内部，inset 相对熊猫尺寸（216px），不再撑成椭圆 */
.panda .level-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 3px solid var(--bamboo);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity .18s ease;
  pointer-events: none;
}

/* 今日主题卡：标题行 + 右上角移除按钮 */
.current-topic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.current-topic-del {
  flex: none;
  width: 26px;
  height: 26px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.current-topic-del:hover,
.current-topic-del:focus-visible {
  color: var(--brand);
  background: rgba(20, 32, 46, .06);
}

/* 微信自动卡片的缩略图：真实尺寸保留在 DOM 里，但移出可视区 */
.wx-share-thumb {
  position: fixed;
  left: -400px;
  top: 0;
  width: 300px;
  height: 300px;
  pointer-events: none;
}

/* 积分明细：默认收起，页面太长家长要滑很久 */
.ledger-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.ledger-toggle-hint {
  font-size: 12px;
  color: var(--ink-3, #8A8578);
  letter-spacing: .04em;
}

/* 对话页的当前主题条 */
.talk-topic {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 7px 12px;
  background: rgba(20, 32, 46, .05);
  border: 1px solid var(--line);
  border-radius: 2px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.talk-topic-switch {
  color: #8B0000;
  letter-spacing: .02em;
}


/* 换主题弹层 */
.picker-mask {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(20, 32, 46, .38);
  display: flex;
  align-items: flex-end;
}
.picker-sheet {
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--paper, #FFFDF6);
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
}
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
}
.picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 2px;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.picker-item small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #8A8578;
}
.picker-current {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--brand);
  color: var(--brand);
  font-size: 10.5px;
  font-style: normal;
  vertical-align: 1px;
}

/* 创建聊天三步弹层 */
.cf-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 14px;
}
.cf-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  font-size: 12px;
}
.cf-name-block { margin: 0 0 10px; }
.cf-name-block label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cf-name-block .panel-hint { margin: 2px 0 0; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.cf-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: rgba(20, 32, 46, .06);
}
/* 年龄：3–12 岁 + 先不填，11 个 chip。设置页与创建流程共用同一套样式，
   数字宽度一致，点起来不容易点错。 */
.age-chips { margin-top: 8px; }
.age-chips .cf-chip { min-width: 46px; padding: 7px 8px; text-align: center; }
.age-chips .cf-chip[data-age="0"] { color: var(--ink-soft); }
.cf-age-row { margin-top: 10px; }
.cf-age-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cf-age-row .cf-chips { margin-bottom: 2px; }
.cf-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.cf-start-btn { width: 100%; margin-top: 4px; }

.picker-new { width: 100%; margin-top: 14px; }

.qr-sheet { text-align: center; }
.qr-img {
  width: min(72vw, 280px);
  height: auto;
  /* 加载中/失败也保留一块位置：否则弹层会塌成一条，家长以为「没反应」 */
  min-height: 180px;
  margin: 6px auto 10px;
  display: block;
  background: #FFFDF6;
  object-fit: contain;
  transition: opacity .15s ease;
}
.qr-img:not(.is-ready) { opacity: .35; }

.memory-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.memory-tag {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--line);
  font-size: 11px;
  color: #8A8578;
}
.memory-text { flex: 1; line-height: 1.5; }
.memory-times {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #8A8578;
}

/* 限时活动价：用品牌红，和普通说明区分开 */
.promo-hint { color: var(--brand); font-weight: 500; }

/* 「和 AI 一起定主题」入口：做成明确的按钮，不要像一行标题 */
.cf-coach {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 11px 13px;
  border: 1px solid rgba(139, 0, 0, .32);
  border-radius: 2px;
  background: rgba(139, 0, 0, .045);
  color: var(--brand);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.cf-coach:hover {
  border-color: var(--brand);
  background: rgba(139, 0, 0, .08);
}
.cf-coach:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.cf-coach-mark { font-size: 16px; line-height: 1; }
.cf-coach-go { margin-left: auto; opacity: .55; }

/* AI 星芒图标：不依赖 emoji 字体，桌面/安卓不会变成方框 */
.ai-mark, .cf-coach-mark {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--brand);
  vertical-align: -3px;
}

/* 会话结束提示：实心卡片 + 提升层级。
   iOS WebView 在滚动容器里偶发把下层字幕透过来，这里用硬色/独立层兜底。 */
.session-tip {
  position: relative;
  z-index: 10;
  isolation: isolate;
  margin: 8px 0 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  background: #FBF8EE;
  background-color: #FBF8EE;
  opacity: 1;
  box-shadow: 0 1px 0 rgba(20, 32, 46, .03);
}

/* 小盼的消息是"左边注"版式：让它占满内容宽度，
   否则短句会缩成一条很窄的竖条，正文阅读区显得很窄。 */
.bubble.b-buddy {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}
.bubble.b-kid { max-width: 90%; }

/* 手机屏幕给对话正文多留一点高度：熊猫略收，间距收紧 */
@media (max-width: 430px) {
  .panda { width: 184px; height: 184px; }
  .talk-stage { gap: 8px; }
  .captions { padding-top: 2px; }
}

/* 摄像头入口并进「本次可用」这一行：
   单独占一行会挤压对话字幕；手机只保留紧凑按钮，说明收进 title/aria-label。 */
.talk-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.talk-meta-row .talk-meta { min-height: 0; }
.talk-meta-row .camera-btn {
  flex: none;
  margin: 0;
  padding: 6px 11px;
  font-size: 12.5px;
  gap: 5px;
}
.talk-meta-row .camera-note { display: none; }
@media (min-width: 560px) {
  .talk-meta-row .camera-note { display: inline; }
}
.camera-ico { width: 16px; height: 16px; flex: none; }