/* 小热 2.0 · 通话界面风格：深色背景 + 毛玻璃 + 底部字幕 */
:root {
  --ink-bg-1: #241215;
  --ink-bg-2: #3a1d1a;
  --ink-bg-3: #17100e;
  --text: #f6efe2;
  --text-dim: rgba(246, 239, 226, 0.62);
  --gold: #d9a441;
  --gold-soft: rgba(217, 164, 65, 0.28);
  --red: #a32a2a;
  --red-deep: #7d1a1a;
  --glass: rgba(255, 255, 255, 0.10);
  --glass-strong: rgba(255, 255, 255, 0.16);
  --glass-line: rgba(255, 255, 255, 0.22);
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100dvh; overflow: hidden;
  font-family: var(--font-sans); font-size: 16px; color: var(--text);
  background: linear-gradient(175deg, var(--ink-bg-2) 0%, var(--ink-bg-1) 45%, var(--ink-bg-3) 100%);
}
button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-line);
}
.glass-dark {
  background: rgba(28, 16, 14, 0.72);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- 手机竖屏画布 ---------- */
.phone {
  position: relative; height: 100dvh; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
  overflow: hidden;
}
.bg-glow {
  position: absolute; left: 50%; top: 30%; width: 130vw; height: 130vw; max-width: 640px; max-height: 640px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.20) 0%, rgba(163, 42, 42, 0.10) 45%, transparent 70%);
}

/* ---------- 顶部 ---------- */
.call-top { position: relative; text-align: center; z-index: 3; }
.call-name { font-family: var(--font-serif); font-size: 27px; font-weight: 700; letter-spacing: .12em; }
.call-sub { font-size: 12px; color: var(--text-dim); letter-spacing: .18em; margin-top: 2px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  font-size: 12.5px; color: var(--text-dim);
  padding: 4px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #7fbf8e; }
.phone[data-busy] .status-pill .dot { background: var(--gold); }
[data-state="thinking"] ~ * .dot, .status-pill.thinking .dot { background: var(--gold); animation: pulse 1s infinite alternate; }
.status-pill.talking .dot { background: #e0837a; animation: pulse .5s infinite alternate; }
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }

/* ---------- 立绘 ---------- */
.avatar-area {
  position: relative; flex: 1 1 auto; min-height: 120px; margin: 4px 0 6px; z-index: 1;
}
.avatar-area img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center top; transition: opacity .15s;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}
/* 背景板：铺满立绘区域、位于人物之下，切换时淡入淡出 */
.avatar-area .scene {
  object-fit: cover; object-position: center center;
  border-radius: 18px; filter: none; opacity: 0;
  transition: opacity .5s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.25) 100%);
}
.avatar-area .scene.on { opacity: 1; }
.avatar-area .heritage-overlay {
  z-index: 2; object-fit: cover; object-position: center center;
  filter: none; opacity: .72; pointer-events: none;
  animation: heritage-drift 7s ease-in-out infinite alternate;
}
@keyframes heritage-drift {
  from { transform: translateY(0); opacity: .58; }
  to { transform: translateY(-3px); opacity: .78; }
}

/* 贴纸演员层：全身的位移 / 缩放 / 旋转只写在这一层。
   待机帧与说话帧共用同一个 transform，绝不会错位；内部只负责两张图的透明度切换。
   transform-origin 取胯部 76%：旋转像重心摆动；放大到 1.23 时头顶仍压在立绘区顶边内。 */
.avatar-actor {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 1; transform-origin: 50% 74%;
  will-change: transform;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.avatar-actor picture { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: block; }
.avatar-area .talking { opacity: 0; }
/* 说话：透明底动图（<img>，微信/iOS 均可动，且背景场景能透出） */
.avatar-area[data-state="talking"].speak-ready .idle { opacity: 0; }
.avatar-area[data-state="talking"].speak-ready .talking { opacity: 1; }

/* ---------- 真实姿态层（motion v4） ----------
   6 张同角色透明 WebP（720×960）：人物身高统一占画布高 88%、脚底压在 99.8%、头心在宽 51.1%，
   与待机立绘 avatar-t-idle.webp 的实测framing 完全一致。
   这里用 height:100% / width:auto 定高显示——和待机图一样"由高度决定尺寸"，
   所以姿态切换时身高一致、脚底同线、头顶不跳。
   交叉淡化 190ms（任务书要求 150—220ms）；姿态自身只做 1%—3% 的克制过渡。 */
.avatar-actor .pose {
  top: 0; bottom: auto; left: 50%; right: auto;
  width: auto; height: 100%;
  transform: translateX(-50%);
  opacity: 0;
}
.avatar-actor .idle,
.avatar-actor .talking,
.avatar-actor .pose { transition: opacity .19s ease; }
/* 姿态就位后才压暗说话/待机层；JS 只在 img.decode() 成功后才加 .pose-on，
   所以"姿态没加载出来"的情况下这条规则根本不会生效，说话动图照常可见。 */
.avatar-area.pose-on .pose { opacity: 1; }
.avatar-area.pose-on .idle,
.avatar-area.pose-on .talking,
.avatar-area.pose-on[data-state="talking"].speak-ready .idle,
.avatar-area.pose-on[data-state="talking"].speak-ready .talking { opacity: 0; }
/* 姿态在场时，说话动图未就绪的"口型兜底"起伏没有意义，停掉省一次合成 */
.avatar-area.pose-on[data-state="talking"]:not(.speak-ready) .idle { animation: none; }
/* 动图还没加载好时，用静态立绘 + 克制起伏顶住，绝不出现空白。
   这是"口型兜底"，不是全身动作，所以留在 .idle 上，且只动 transform、不动 filter。 */
.avatar-area[data-state="talking"]:not(.speak-ready) .idle {
  animation: xiaore-speak-fallback .82s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
@keyframes xiaore-speak-fallback {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.012); }
}

/* ---------- 逐帧贴纸动作系统 ----------
   "帧"= CSS 关键姿态帧，帧间由浏览器插值；贴纸感来自短停顿、轻回弹与动作弧线。
   全部只用 transform / opacity，不改 top/left/width/height，不触发布局重排。 */

/* 无动作类时的底噪：待机轻呼吸 / 思考歪头。用 :not([data-motion]) 让位给动作类。 */
.avatar-area[data-state="idle"]:not([data-motion]) .avatar-actor,
.avatar-area[data-state="talking"]:not([data-motion]) .avatar-actor {
  animation: xr-idle-breath 5.6s ease-in-out infinite;
}
.avatar-area[data-state="thinking"]:not([data-motion]) .avatar-actor {
  animation: xr-think 2.4s ease-in-out infinite;
}
@keyframes xr-idle-breath {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,-.35%,0) scale(1.004); }
}
/* think-loop（v5 收敛）：思考的"动"由托腮三帧翻页承担，这里只剩 ±0.4% 的竖向呼吸，
   不再歪头——整张立绘绕中心旋转在视觉上就是左右平移，纸片感最重的一处。 */
@keyframes xr-think {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,-.4%,0) scale(1.003); }
}

/* 动作 A · soft-enter 轻快入场 1.20s（开场白 / 久未互动后的首次回答）
   v4 起入场的"动作"由真实挥手姿态承担，这一层只留一点点落位的弧线（≤6%），
   不再让同一张立绘从画外大幅滑进来。 */
.avatar-area.motion-soft-enter .avatar-actor { animation: xr-soft-enter 1.2s cubic-bezier(.22,.68,.28,1) both; }
@keyframes xr-soft-enter {
  0%     { transform: translate3d(6%,2.5%,0) scale(.94) rotate(1.4deg);   opacity: .55; }
  20%    { transform: translate3d(3.5%,.6%,0) scale(.97) rotate(.6deg);   opacity: 1; }
  41.67% { transform: translate3d(1%,-1.2%,0) scale(1.02) rotate(-.6deg); opacity: 1; }
  56.67% { transform: translate3d(-.8%,0,0) scale(1.014) rotate(0deg);    opacity: 1; }
  71.67% { transform: translate3d(.4%,-.4%,0) scale(1.006) rotate(.2deg); opacity: 1; }
  100%   { transform: translate3d(0,0,0) scale(1) rotate(0deg);           opacity: 1; }
}

/* 动作 R · run 奔跑：整身不做位移，入场轨迹全部交给真实跑姿层（见 .pose-run） */
.avatar-area.motion-run .avatar-actor { animation: none; }

/* 动作 B · explain-loop 站立讲解 3.60s 循环（默认主体动作） */
.avatar-area.motion-explain .avatar-actor { animation: xr-explain 3.6s ease-in-out infinite; }
@keyframes xr-explain {
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  10%  { transform: translate3d(-.8%,-.7%,0) scale(1.008) rotate(-.4deg); }
  20%  { transform: translate3d(-1.8%,-1.2%,0) scale(1.018) rotate(-.9deg); }
  30%  { transform: translate3d(-.8%,-.4%,0) scale(1.01) rotate(-.3deg); }
  40%  { transform: translate3d(.4%,0,0) scale(1.002) rotate(.2deg); }
  50%  { transform: translate3d(1.6%,-.8%,0) scale(1.015) rotate(.8deg); }
  60%  { transform: translate3d(2.1%,-1.1%,0) scale(1.02) rotate(1deg); }
  70%  { transform: translate3d(.8%,-.4%,0) scale(1.008) rotate(.3deg); }
  80%  { transform: translate3d(0,.2%,0) scale(.998) rotate(0deg); }
  90%  { transform: translate3d(-.3%,-.3%,0) scale(1.004) rotate(-.2deg); }
  100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

/* 动作 C · pace-loop 左右重心转移 4.80s 循环（长回答中段）
   v4 起幅度收到 ±2.5%：这是"讲到兴头上重心换脚"的体态，不是靠滑动冒充走路。 */
.avatar-area.motion-pace .avatar-actor { animation: xr-pace 4.8s ease-in-out infinite; }
@keyframes xr-pace {
  0%     { transform: translate3d(-2.5%,0,0) scale(.997) rotate(-.5deg); }
  8.33%  { transform: translate3d(-1.8%,-.7%,0) scale(1.005) rotate(-.3deg); }
  16.67% { transform: translate3d(-1%,0,0) scale(1) rotate(0deg); }
  25%    { transform: translate3d(0,-.9%,0) scale(1.008) rotate(.2deg); }
  33.33% { transform: translate3d(1%,0,0) scale(1) rotate(.3deg); }
  41.67% { transform: translate3d(2%,-.7%,0) scale(1.006) rotate(.5deg); }
  50%    { transform: translate3d(2.5%,0,0) scale(.997) rotate(.6deg); }
  58.33% { transform: translate3d(1.8%,-.7%,0) scale(1.005) rotate(.3deg); }
  66.67% { transform: translate3d(1%,0,0) scale(1) rotate(0deg); }
  75%    { transform: translate3d(0,-.9%,0) scale(1.008) rotate(-.2deg); }
  83.33% { transform: translate3d(-1%,0,0) scale(1) rotate(-.3deg); }
  91.67% { transform: translate3d(-2%,-.7%,0) scale(1.006) rotate(-.5deg); }
  100%   { transform: translate3d(-2.5%,0,0) scale(.997) rotate(-.5deg); }
}

/* 动作 D · close-emphasis 靠近强调 2.40s 一次性（不拉伸五官，用整体靠近＋闪光模拟"眼前一亮"） */
/* v4 起改由真实 present/point 姿态承担"强调"本身，这一层只做 ≤5% 的近景推进（桌面 1.05），
   绝不再把单张脸放大到失真。双侧闪光贴纸保留。 */
.avatar-area.motion-close .avatar-actor { animation: xr-close 2.4s cubic-bezier(.24,.72,.3,1) both; }
@keyframes xr-close {
  0%     { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  10%    { transform: translate3d(0,.4%,0) scale(1.018) rotate(-.3deg); }
  21.67% { transform: translate3d(-.4%,.8%,0) scale(1.036) rotate(-.6deg); }
  31.67% { transform: translate3d(0,1%,0) scale(1.05) rotate(0deg); }
  43.33% { transform: translate3d(.4%,.8%,0) scale(1.04) rotate(.5deg); }
  56.67% { transform: translate3d(0,.5%,0) scale(1.03) rotate(0deg); }
  73.33% { transform: translate3d(0,.2%,0) scale(1.016) rotate(-.2deg); }
  90%    { transform: translate3d(0,-.2%,0) scale(1.006) rotate(0deg); }
  100%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

/* 动作 E · curious-question 好奇提问 2.80s 一次性 */
.avatar-area.motion-curious .avatar-actor { animation: xr-curious 2.8s ease-in-out both; }
@keyframes xr-curious {
  0%     { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  11.43% { transform: translate3d(-.6%,.3%,0) scale(1.012) rotate(-1deg); }
  22.86% { transform: translate3d(-1.2%,.6%,0) scale(1.026) rotate(-1.6deg); }
  34.29% { transform: translate3d(-.9%,0,0) scale(1.03) rotate(-1.2deg); }
  48.57% { transform: translate3d(.3%,-.5%,0) scale(1.018) rotate(.5deg); }
  62.86% { transform: translate3d(.6%,0,0) scale(1.01) rotate(.7deg); }
  80%    { transform: translate3d(0,-.3%,0) scale(1.004) rotate(0deg); }
  100%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

/* 动作 F · point-location 指向地点 2.60s 一次性（不伪造手臂，人物让位 + 右上角弹地点针） */
.avatar-area.motion-point .avatar-actor { animation: xr-point 2.6s ease-in-out both; }
@keyframes xr-point {
  0%     { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  13.85% { transform: translate3d(-2%,-.5%,0) scale(1.015) rotate(-.6deg); }
  27.69% { transform: translate3d(-4%,-1%,0) scale(1.025) rotate(-1deg); }
  40%    { transform: translate3d(-4%,-1%,0) scale(1.025) rotate(-1deg); }
  58.46% { transform: translate3d(-2%,-.4%,0) scale(1.012) rotate(-.4deg); }
  78.46% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  100%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

/* 动作 G · settle-out 回答收束 0.90s 一次性 */
.avatar-area.motion-settle .avatar-actor { animation: xr-settle .9s ease-out both; }
@keyframes xr-settle {
  0%     { transform: translate3d(0,-.5%,0) scale(1.012); }
  24.44% { transform: translate3d(0,.5%,0) scale(.995); }
  51.11% { transform: translate3d(0,-.6%,0) scale(1.008); }
  77.78% { transform: translate3d(0,0,0) scale(1.002); }
  100%   { transform: translate3d(0,0,0) scale(1); }
}

/* ---------- 姿态内部的轻微过渡（1%—3%，只做衔接，不冒充动作） ----------
   真正的"动作"由 6 张不同肢体姿态承担；这里的关键帧只负责让姿态落位时有一点弹性和呼吸，
   每一条都带 translateX(-50%) 基准位移（姿态层是定高居中的）。 */
.avatar-area.pose-wave    .pose { animation: xr-pose-wave 1.4s ease-in-out both; }
.avatar-area.pose-present .pose { animation: xr-pose-present 2.6s ease-in-out both; }
.avatar-area.pose-point   .pose { animation: xr-pose-point 2.4s ease-in-out both; }
.avatar-area.pose-think   .pose { animation: none; transform: translateX(-50%); }   /* v5：托腮只翻帧，不平移不歪头 */
.avatar-area.pose-close   .pose { animation: xr-pose-close 1.2s ease-out both; }
/* 奔跑：从画面左下快速进入中心（1.0s），这是"入场轨迹"，姿态本身就是真实跑姿 */
.avatar-area.pose-run     .pose { animation: xr-pose-run 1.0s cubic-bezier(.2,.72,.3,1) both; }
/* motion v5 新姿态：鞠躬复用收束回弹，惊讶复用摊手节奏；待机眨眼与口型兜底不叠加位移，只翻帧 */
.avatar-area.pose-bow      .pose { animation: xr-pose-close 1.3s ease-out both; }
.avatar-area.pose-surprise .pose { animation: xr-pose-present 1.6s ease-in-out both; }
.avatar-area.pose-idle     .pose,
.avatar-area.pose-talk     .pose { animation: none; transform: translateX(-50%); }

@keyframes xr-pose-wave {
  0%   { transform: translateX(-50%) translate3d(0,1.6%,0) scale(.988) rotate(-.6deg); }
  30%  { transform: translateX(-50%) translate3d(.8%,-.6%,0) scale(1.008) rotate(.7deg); }
  55%  { transform: translateX(-50%) translate3d(-.6%,.2%,0) scale(1) rotate(-.5deg); }
  78%  { transform: translateX(-50%) translate3d(.4%,-.3%,0) scale(1.004) rotate(.3deg); }
  100% { transform: translateX(-50%) translate3d(0,0,0) scale(1) rotate(0deg); }
}
@keyframes xr-pose-present {
  0%   { transform: translateX(-50%) translate3d(0,1%,0) scale(.992); }
  22%  { transform: translateX(-50%) translate3d(-1%,-.6%,0) scale(1.008) rotate(-.4deg); }
  50%  { transform: translateX(-50%) translate3d(0,0,0) scale(1.002) rotate(0deg); }
  76%  { transform: translateX(-50%) translate3d(1%,-.5%,0) scale(1.008) rotate(.4deg); }
  100% { transform: translateX(-50%) translate3d(0,0,0) scale(1) rotate(0deg); }
}
@keyframes xr-pose-point {
  0%   { transform: translateX(-50%) translate3d(1.4%,.8%,0) scale(.99); }
  28%  { transform: translateX(-50%) translate3d(-1.6%,-.4%,0) scale(1.012) rotate(-.5deg); }
  62%  { transform: translateX(-50%) translate3d(-1.8%,-.6%,0) scale(1.014) rotate(-.6deg); }
  100% { transform: translateX(-50%) translate3d(0,0,0) scale(1) rotate(0deg); }
}
/* 托腮思考：±1.2% 呼吸 + ±0.8° 歪头，2.40s 循环 */
@keyframes xr-pose-think {
  0%, 100% { transform: translateX(-50%) translate3d(0,0,0) scale(1) rotate(0deg); }
  25%      { transform: translateX(-50%) translate3d(0,-1.2%,0) scale(1.008) rotate(-.8deg); }
  50%      { transform: translateX(-50%) translate3d(0,0,0) scale(1) rotate(0deg); }
  75%      { transform: translateX(-50%) translate3d(0,1.2%,0) scale(.994) rotate(.8deg); }
}
/* 收束：手放心口，微躬一次点头（真姿态在图上，这里只给一点点头的弧线） */
@keyframes xr-pose-close {
  0%   { transform: translateX(-50%) translate3d(0,-.6%,0) scale(1.006) rotate(0deg); }
  38%  { transform: translateX(-50%) translate3d(0,1.6%,0) scale(.994) rotate(1.2deg); }
  70%  { transform: translateX(-50%) translate3d(0,.4%,0) scale(1.002) rotate(.3deg); }
  100% { transform: translateX(-50%) translate3d(0,0,0) scale(1) rotate(0deg); }
}
@keyframes xr-pose-run {
  0%   { transform: translateX(-50%) translate3d(-46%,7%,0) scale(.86) rotate(-4deg); }
  55%  { transform: translateX(-50%) translate3d(-12%,1.5%,0) scale(.97) rotate(-1.6deg); }
  80%  { transform: translateX(-50%) translate3d(2.5%,-1%,0) scale(1.02) rotate(.8deg); }
  100% { transform: translateX(-50%) translate3d(0,0,0) scale(1) rotate(0deg); }
}

/* ?motion=off：连待机呼吸也一起停掉，便于对比"完全静止"的基线 */
.avatar-area.motion-none .avatar-actor,
.avatar-area.motion-none .idle,
.avatar-area.motion-none .pose,
.avatar-area.motion-none .fx,
.avatar-area.motion-none .fx b { animation: none !important; }
.avatar-area.motion-none .fx { opacity: 0 !important; }
/* 动作停掉了，姿态层的定高居中基准仍要保留，否则人物会偏出中轴 */
.avatar-area.motion-none .pose { transform: translateX(-50%); }

/* 页面切到后台：冻结动作，回到前台由 JS 决定接哪个循环，不补播过期大动作 */
.avatar-area.motion-paused .avatar-actor,
.avatar-area.motion-paused .pose,
.avatar-area.motion-paused .fx,
.avatar-area.motion-paused .fx b { animation-play-state: paused; }

/* ---------- 装饰贴纸层（本地 SVG 雪碧图，4 格 64×64） ---------- */
.motion-fx {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 3; pointer-events: none;
}
.motion-fx .fx {
  position: absolute; display: block; opacity: 0;
  background-image: url("/static/assets/motion-stickers.svg");
  background-repeat: no-repeat; background-size: 400% 100%;
}
.motion-fx .fx-spark    { width: 18px; height: 18px; background-position: 0 50%; }
.motion-fx .fx-question { width: 30px; height: 30px; background-position: 33.333% 50%; }
.motion-fx .fx-pin      { width: 34px; height: 34px; background-position: 66.667% 50%; }
.motion-fx .fx-dust     { width: 12px; height: 12px; background-position: 100% 50%; }
/* 锚点：以立绘中轴为基准做 px 偏移，立绘区高度变化时贴纸仍贴着人物，不遮脸、不遮字幕 */
.motion-fx .fx-spark-l  { left: 50%; top: 56%; margin-left: -96px; }
.motion-fx .fx-spark-r  { left: 50%; top: 56%; margin-left: 78px; }
.motion-fx .fx-question { left: 50%; top: 7%; margin-left: 30px; }
.motion-fx .fx-pin      { right: 7%; top: 9%; }
.motion-fx .fx-dust-1   { left: 50%; bottom: 3%; margin-left: -34px; }
.motion-fx .fx-dust-2   { left: 50%; bottom: 1%; margin-left: 4px; }
.motion-fx .fx-dust-3   { left: 50%; bottom: 5%; margin-left: 28px; }

/* soft-enter：脚边 3 颗尘点，落地时出现，450ms 内淡出 */
.avatar-area.motion-soft-enter .fx-dust   { animation: xr-dust .45s ease-out both; animation-delay: .30s; }
.avatar-area.motion-soft-enter .fx-dust-2 { animation-delay: .38s; }
.avatar-area.motion-soft-enter .fx-dust-3 { animation-delay: .46s; }
@keyframes xr-dust {
  0%   { opacity: 0;   transform: translate3d(0,0,0) scale(.5); }
  35%  { opacity: .85; transform: translate3d(0,-4px,0) scale(1); }
  100% { opacity: 0;   transform: translate3d(0,-9px,0) scale(1.3); }
}

/* explain-loop：每两轮（7.2s）最多一次金色小闪光，落在摊手方向外侧 */
.avatar-area.motion-explain .fx-spark-r { animation: xr-spark 7.2s ease-in-out infinite; }
@keyframes xr-spark {
  0%, 26%    { opacity: 0; transform: scale(.35) rotate(0deg); }
  30%        { opacity: 1; transform: scale(1) rotate(35deg); }
  34%        { opacity: .85; transform: scale(1.12) rotate(58deg); }
  40%, 100%  { opacity: 0; transform: scale(.5) rotate(80deg); }
}

/* close-emphasis：最近点（760ms ≈ 31.7%）双侧闪光 */
.avatar-area.motion-close .fx-spark   { animation: xr-spark-pop 2.4s ease-out both; }
.avatar-area.motion-close .fx-spark-r { animation-delay: .06s; }
@keyframes xr-spark-pop {
  0%, 26%   { opacity: 0; transform: scale(.3) rotate(-20deg); }
  34%       { opacity: 1; transform: scale(1.1) rotate(15deg); }
  45%       { opacity: .9; transform: scale(.95) rotate(40deg); }
  62%, 100% { opacity: 0; transform: scale(.7) rotate(60deg); }
}

/* curious-question：问号淡入 → 上跳 → 停顿 → 淡出 */
.avatar-area.motion-curious .fx-question { animation: xr-question 2.8s ease-in-out both; }
@keyframes xr-question {
  0%, 8%     { opacity: 0; transform: translate3d(0,6px,0) scale(.6) rotate(-8deg); }
  11.43%     { opacity: .9; transform: translate3d(0,2px,0) scale(.9) rotate(-4deg); }
  22.86%     { opacity: 1; transform: translate3d(0,-8px,0) scale(1.08) rotate(6deg); }
  34.29%     { opacity: 1; transform: translate3d(0,-4px,0) scale(1) rotate(2deg); }
  48.57%     { opacity: 1; transform: translate3d(0,-6px,0) scale(1.02) rotate(-2deg); }
  62.86%     { opacity: 0; transform: translate3d(0,-13px,0) scale(.8) rotate(4deg); }
  100%       { opacity: 0; transform: translate3d(0,-13px,0) scale(.8) rotate(4deg); }
}

/* point-location：地点针 50% 淡入 → 112% 回弹 → 100% 停留 → 淡出（不带任何自动生成文字） */
.avatar-area.motion-point .fx-pin { animation: xr-pin 2.6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes xr-pin {
  0%     { opacity: 0; transform: translate3d(0,10px,0) scale(0); }
  13.85% { opacity: .75; transform: translate3d(0,4px,0) scale(.5); }
  27.69% { opacity: 1; transform: translate3d(0,-2px,0) scale(1.12); }
  40%    { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  58.46% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  78.46% { opacity: 0; transform: translate3d(0,-6px,0) scale(.86); }
  100%   { opacity: 0; transform: translate3d(0,-6px,0) scale(.86); }
}

/* thinking：右上角三个小圆点依次亮起（纯 CSS，不用雪碧图） */
.motion-fx .fx-think { right: 8%; top: 10%; width: 34px; height: 10px; background: none; }
.motion-fx .fx-think b { position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: .22; }
.motion-fx .fx-think b:nth-child(1) { left: 0; }
.motion-fx .fx-think b:nth-child(2) { left: 13px; }
.motion-fx .fx-think b:nth-child(3) { left: 26px; }
.avatar-area[data-state="thinking"] .fx-think { opacity: 1; }
.avatar-area[data-state="thinking"] .fx-think b { animation: xr-dot 1.2s ease-in-out infinite; }
.avatar-area[data-state="thinking"] .fx-think b:nth-child(2) { animation-delay: .2s; }
.avatar-area[data-state="thinking"] .fx-think b:nth-child(3) { animation-delay: .4s; }
@keyframes xr-dot {
  0%, 70%, 100% { opacity: .22; transform: translate3d(0,0,0); }
  35%           { opacity: 1; transform: translate3d(0,-3px,0); }
}

/* ---------- 手机端：入场位移与靠近倍率收窄，避免裁切与压顶栏 ---------- */
@media (max-width: 519px) {
  .avatar-area.motion-soft-enter .avatar-actor { animation-name: xr-soft-enter-m; }
  .avatar-area.motion-close .avatar-actor { animation-name: xr-close-m; }
  .motion-fx .fx-spark    { width: 16px; height: 16px; }
  .motion-fx .fx-question { width: 26px; height: 26px; margin-left: 24px; }
  .motion-fx .fx-pin      { width: 30px; height: 30px; }
  .motion-fx .fx-spark-l  { margin-left: -84px; }
  .motion-fx .fx-spark-r  { margin-left: 68px; }
}
@media (max-width: 360px) {
  .motion-fx .fx-spark-l { margin-left: -74px; }
  .motion-fx .fx-spark-r { margin-left: 58px; }
  .motion-fx .fx-question { margin-left: 20px; }
  .motion-fx .fx-dust-1 { margin-left: -26px; }
  .motion-fx .fx-dust-3 { margin-left: 22px; }
}
/* 入场 X 位移封顶 4%（桌面 6%），其余关键帧不变 */
@keyframes xr-soft-enter-m {
  0%     { transform: translate3d(4%,2.5%,0) scale(.94) rotate(1.2deg);   opacity: .55; }
  20%    { transform: translate3d(2.4%,.6%,0) scale(.97) rotate(.5deg);   opacity: 1; }
  41.67% { transform: translate3d(.8%,-1.2%,0) scale(1.018) rotate(-.5deg); opacity: 1; }
  56.67% { transform: translate3d(-.6%,0,0) scale(1.012) rotate(0deg);    opacity: 1; }
  71.67% { transform: translate3d(.3%,-.4%,0) scale(1.005) rotate(.2deg); opacity: 1; }
  100%   { transform: translate3d(0,0,0) scale(1) rotate(0deg);           opacity: 1; }
}
/* 靠近倍率封顶 1.04（桌面 1.05） */
@keyframes xr-close-m {
  0%     { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  10%    { transform: translate3d(0,.4%,0) scale(1.015) rotate(-.3deg); }
  21.67% { transform: translate3d(-.4%,.8%,0) scale(1.03) rotate(-.6deg); }
  31.67% { transform: translate3d(0,1%,0) scale(1.04) rotate(0deg); }
  43.33% { transform: translate3d(.4%,.8%,0) scale(1.032) rotate(.5deg); }
  56.67% { transform: translate3d(0,.5%,0) scale(1.024) rotate(0deg); }
  73.33% { transform: translate3d(0,.2%,0) scale(1.013) rotate(-.2deg); }
  90%    { transform: translate3d(0,-.2%,0) scale(1.005) rotate(0deg); }
  100%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
}

/* ---------- 降级：系统开启"减少动态效果" ---------- */
@media (prefers-reduced-motion: reduce) {
  .avatar-area .heritage-overlay { animation: none; }
  /* 跑动 / 靠近 / 踱步一律停用，只保留 ≤1% 的呼吸与待机/说话图切换 */
  .avatar-area .avatar-actor { animation: xr-breathe-min 4.4s ease-in-out infinite !important; }
  .avatar-area[data-state="talking"]:not(.speak-ready) .idle { animation: none; }
  /* 姿态层：只允许静态换图（JS 侧也只保留 think），一切位移/旋转/入场轨迹全停 */
  .avatar-area .pose { animation: none !important; transform: translateX(-50%) !important; }
  .motion-fx .fx { animation: none !important; opacity: 0 !important; }
  .avatar-area[data-state="thinking"] .fx-think { opacity: 1 !important; }
  .motion-fx .fx-think b { animation: none !important; opacity: .8; }
}
@keyframes xr-breathe-min {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,0,0) scale(1.008); }
}

/* ---------- 动作调试面板（仅 ?motionDebug=1 时由 JS 创建） ---------- */
.motion-debug {
  position: fixed; right: 8px; bottom: 8px; z-index: 60; width: 178px;
  font: 11px/1.55 var(--font-sans); color: #f6efe2;
  background: rgba(18, 10, 9, .88); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px; padding: 8px 9px;
}
.motion-debug .md-row { display: flex; justify-content: space-between; gap: 6px; }
.motion-debug .md-row b { font-weight: 600; color: rgba(246, 239, 226, .55); flex: none; }
.motion-debug .md-row span { text-align: right; word-break: break-all; }
.motion-debug .md-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.motion-debug .md-btns button {
  font-size: 10.5px; padding: 2px 6px; border-radius: 7px; color: #f6efe2;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1);
}

/* ---------- 字幕（左下） ---------- */
.subtitle {
  position: relative; z-index: 4; border-radius: 18px; padding: 12px 14px 10px;
  margin-bottom: 8px; max-height: 23dvh; overflow-y: auto; overscroll-behavior: contain;
  text-align: left; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.sub-q { font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.sub-text { font-size: 15.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.sub-text .cursor { display: inline-block; width: 2px; height: 1em; background: var(--gold); vertical-align: -2px; margin-left: 1px; animation: pulse .6s infinite alternate; }
.sub-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.sub-badges { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.badge {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text-dim);
}
.badge.high { color: #a8d8b0; border-color: rgba(127, 191, 142, 0.5); }
.badge.medium { color: #f4d492; border-color: rgba(217, 164, 65, 0.5); }
.badge.low, .badge.none { color: #e8a79e; border-color: rgba(224, 131, 122, 0.5); }
.badge.cache { color: #f4d492; background: rgba(217, 164, 65, 0.18); border-color: var(--gold); font-weight: 700; }
.badge.ai { color: #f6efe2; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.45); font-weight: 700; }
.badge.fallback { color: #e8a79e; background: rgba(163, 42, 42, 0.25); border-color: rgba(224, 131, 122, 0.6); }
.sub-actions { display: flex; gap: 6px; flex: none; }
.mini-btn {
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08);
  color: var(--text); border-radius: 999px; font-size: 13px; padding: 3px 10px; line-height: 1.5;
}
.mini-btn.text { font-size: 12px; color: var(--text-dim); }
.mini-btn.on-up { border-color: #7fbf8e; color: #a8d8b0; background: rgba(127, 191, 142, 0.15); }
.mini-btn.on-down { border-color: #e0837a; color: #e8a79e; background: rgba(224, 131, 122, 0.15); }
.fb-more { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.fb-more input[type="text"] {
  flex: 1; min-width: 140px; font-size: 13px; padding: 7px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.25); color: var(--text);
}
.fb-more input[type="text"]::placeholder { color: var(--text-dim); }
.fb-check { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
.fb-thanks { font-size: 12px; color: #a8d8b0; margin-top: 6px; }

/* ---------- 推荐问题 ---------- */
.chips {
  position: relative; z-index: 4; display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
  margin-bottom: 8px; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-size: 12.5px; color: var(--text); line-height: 1.4;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; padding: 7px 13px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.chip:active { background: rgba(255, 255, 255, 0.16); }

/* ---------- 专题入口按钮（承德博物馆） ----------
   与推荐问题同一视觉家族，但用金色描边区分"专题"与"问题"；按下态金底，表示当前处于专题模式。 */
.topic-row { position: relative; z-index: 4; display: flex; margin-bottom: 7px; }
.topic-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--gold); line-height: 1.4;
  background: rgba(217, 164, 65, 0.10); border: 1px solid rgba(217, 164, 65, 0.55);
  border-radius: 999px; padding: 7px 13px 7px 11px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.topic-btn:active { background: rgba(217, 164, 65, 0.22); }
.topic-btn[aria-pressed="true"] { color: #221214; background: var(--gold); border-color: var(--gold); }
.topic-btn[aria-pressed="true"] svg { stroke: #221214; }

/* ---------- 输入 ---------- */
.ask {
  position: relative; z-index: 4; display: flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 5px 5px 5px 16px; margin-bottom: 10px;
}
.ask input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-size: 16px; color: var(--text); padding: 8px 0;
}
.ask input::placeholder { color: var(--text-dim); }
.mic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim); display: grid; place-items: center; position: relative;
}
.mic .ic-stop { display: none; }
.mic.listening .ic-mic { display: none; }
.mic.listening .ic-stop { display: block; }
.mic-label {
  flex: none; font-size: 12px; line-height: 1; color: #f4d492; white-space: nowrap;
  padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(217, 164, 65, 0.55); background: rgba(217, 164, 65, 0.16);
  animation: miclabel .9s ease-in-out infinite alternate;
}
@keyframes miclabel { from { opacity: .7; } to { opacity: 1; } }
.mic-tip {
  position: relative; z-index: 4; margin: 0 6px 8px auto; max-width: 100%;
  font-size: 12.5px; line-height: 1.5; color: #2b1c17; font-weight: 600;
  background: linear-gradient(160deg, #f6dfa6, #d9a441); border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  animation: tipin .35s ease-out;
}
.mic-tip::after {
  content: ""; position: absolute; right: 24px; bottom: -7px; width: 14px; height: 14px;
  background: #d9a441; transform: rotate(45deg); border-radius: 2px;
}
@keyframes tipin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mic.listening { color: #fff; background: var(--red); border-color: transparent; }
.mic.listening::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(224, 131, 122, 0.7); animation: micpulse 1.1s ease-out infinite;
}
@keyframes micpulse { 0% { transform: scale(0.85); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.send {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: linear-gradient(160deg, var(--red) 0%, var(--red-deep) 100%);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(163, 42, 42, 0.45);
}

/* ---------- 通话键位 ---------- */
.callbar { position: relative; z-index: 4; display: flex; justify-content: space-evenly; }
.round {
  width: 58px; border: none; background: none; color: var(--text-dim);
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px;
}
.round svg {
  width: 48px; height: 48px; padding: 13px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.round[aria-pressed="true"] { color: var(--gold); }
.round[aria-pressed="true"] svg { background: var(--gold-soft); border-color: rgba(217, 164, 65, 0.55); }
.round:active svg { background: rgba(255, 255, 255, 0.2); }

/* ---------- 版权声明（页面最底部小字） ---------- */
.legal {
  position: relative; z-index: 4; text-align: center;
  font-size: 10px; line-height: 1.5; letter-spacing: .04em;
  color: rgba(246, 239, 226, 0.38);
  margin: 7px 0 2px; padding: 0 8px;
}

/* ---------- 提示 ---------- */
.toast-btn {
  display: inline-block; margin-left: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--gold); color: #2b1a10; font-weight: 700; font-size: 13.5px;
}
.toast {
  position: absolute; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 9;
  background: rgba(80, 22, 18, 0.9); border: 1px solid rgba(224, 131, 122, 0.5); color: #f3d9d4;
  border-radius: 14px; padding: 10px 14px; font-size: 13.5px; line-height: 1.6;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ---------- 上滑面板 ---------- */
.sheet-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 20; }
.sheet {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 21;
  width: 100%; max-width: 480px; max-height: 76dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 22px 22px 0 0; padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translate(-50%, 30px); opacity: .5; } to { transform: translate(-50%, 0); opacity: 1; } }
.sheet-bar { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); margin: 4px auto 12px; }
.sheet h2 { font-family: var(--font-serif); font-size: 17px; margin: 0 0 10px; letter-spacing: .06em; }
.about-lead { font-size: 13px; color: var(--text-dim); margin: -4px 0 12px; }

.source-card {
  display: block; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 8px;
}
.source-card.cited { border-color: rgba(217, 164, 65, 0.55); background: rgba(217, 164, 65, 0.10); }
.source-card.flash { box-shadow: 0 0 0 2px var(--gold); }
.source-card .num {
  display: inline-block; min-width: 22px; text-align: center; background: var(--red);
  color: #fff; border-radius: 6px; font-size: 11px; padding: 1px 6px; margin-right: 6px;
}
.source-card .lvl { font-size: 10.5px; border: 1px solid; border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.lvl.A { color: #a8d8b0; border-color: rgba(127, 191, 142, 0.6); }
.lvl.B { color: #f4d492; border-color: rgba(217, 164, 65, 0.6); }
.lvl.C { color: var(--text-dim); border-color: rgba(255, 255, 255, 0.25); }
.lvl.W { color: #e8a79e; border-color: rgba(224, 131, 122, 0.6); }
.source-card .title { font-weight: 600; font-size: 13.5px; line-height: 1.5; }
.source-card .meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.source-card .excerpt { font-size: 12px; color: var(--text-dim); margin-top: 5px; line-height: 1.6; }
.source-card .link { font-size: 11.5px; color: #f4d492; margin-top: 5px; }

.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 6px 0 14px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); min-width: 0; text-align: center; }
.step .zi {
  width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%;
  background: var(--red); color: #fff; font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  border: 2px solid rgba(217, 164, 65, 0.8);
}
.vol { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); margin: 4px 0 10px; }
.vol input { flex: 1; accent-color: var(--gold); }
.about-note { font-size: 12px; color: var(--text-dim); line-height: 1.7; margin: 8px 0; }
.about-note a { color: #f4d492; }

/* 桌面演示：居中手机画布 */
@media (min-width: 520px) {
  body { background: #120b0a; }
  .phone {
    height: min(100dvh, 900px); margin-top: max(0px, calc((100dvh - 900px) / 2));
    border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(175deg, var(--ink-bg-2) 0%, var(--ink-bg-1) 45%, var(--ink-bg-3) 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  }
}