/* 企业 AI 诊断体检 · 手机优先
   视觉定位：米色温馨基调 + 克制的科技质感（细发丝线 / 暖金渐变 / 玻璃拟态只用于固定区）
   结构：场景选择 → 开始体验 → 基础信息 → 对话（上固定头像 / 下滚屏）→ 留资
   设计体系：8pt 网格 · 三级暖色阴影 · 收敛字号 · 全状态覆盖（WCAG AA） */

/* ============ 1. 设计令牌 ============ */
:root {
  /* 暖中性色阶（米色基底） */
  --n-950: #1c1813;
  --n-900: #241f18;
  --n-800: #33291f;
  --n-700: #483d31;
  --n-600: #5c5346;
  --n-500: #6e6455;
  --n-400: #9a8f7d;
  --n-300: #c3b7a2;
  --n-200: #e6dcc9;
  --n-100: #f0e8da;
  --n-50:  #f8f3e9;

  /* 暖金 / 陶土主色 */
  --a-700: #7d3c19;
  --a-600: #8e4520;
  --a-500: #a9521f;
  --a-400: #b8622e;
  --a-300: #d08b58;
  --a-200: #ecc9ad;
  --a-100: #f7e7d8;
  --a-50:  #fbf1e7;

  /* 科技感辅助（深松绿，仅用于 AI 状态与数据） */
  --t-600: #2c5f5a;
  --t-100: #dcebe7;

  /* 语义色 */
  --ok-600: #2f6b46;
  --ok-50:  #e6f2ea;
  --warn-600: #96570f;
  --warn-50: #fbf0dc;
  --err-600: #a5342c;
  --err-50:  #fbe9e6;

  /* 表面 */
  --bg: #f4eee2;
  --card: #fffcf6;
  --card-2: #fbf6ec;
  --border: #ece1cf;
  --border-strong: #ddcfb7;

  /* 文字 */
  --text: var(--n-900);
  --text-2: var(--n-600);
  --text-3: var(--n-500);
  --text-4: var(--n-500); /* 合规小字也需 ≥4.5:1 */

  /* 间距 · 8pt 网格 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* 圆角 */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;

  /* 阴影 · 暖褐色调，避免灰脏 */
  --sh-xs: 0 1px 2px rgba(72, 48, 24, .05);
  --sh-sm: 0 1px 2px rgba(72, 48, 24, .06), 0 8px 20px -12px rgba(72, 48, 24, .18);
  --sh-md: 0 2px 6px rgba(72, 48, 24, .07), 0 18px 40px -18px rgba(72, 48, 24, .26);
  --sh-a:  0 1px 2px rgba(125, 60, 25, .22), 0 10px 24px -10px rgba(169, 82, 31, .45);

  /* 动效 */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in-out: cubic-bezier(.4, 0, .2, 1);
  --d-fast: .16s;
  --d-base: .26s;
  --d-slow: .45s;

  /* 兼容旧变量名 */
  --muted: var(--text-3);
  --soft: var(--a-50);
  --primary: var(--a-500);
  --primary-dark: var(--a-700);
  --ok: var(--ok-600);
  --warn: var(--warn-600);
  --radius: var(--r-lg);
  --shadow: var(--sh-sm);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  max-width: 480px; margin: 0 auto; min-height: 100vh;
  padding: 0 var(--s-5) var(--s-8);
  display: flex; flex-direction: column;
}

/* 对话态：整屏锁高，上半头像固定、下半滚屏（页脚已整体移除） */
body.mode-talk { overflow: hidden; }
body.mode-talk .app { height: 100dvh; min-height: 0; padding-bottom: 0; }

/* 全局焦点环 —— 键盘可达性 */
:focus-visible {
  outline: 2px solid var(--a-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============ 2. 顶栏 ============ */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-4) 0 var(--s-2);
  flex: 0 0 auto;
}
.top-meta { display: inline-flex; align-items: center; gap: var(--s-2); }
.stage-label {
  font-size: 11.5px; color: var(--text-3); letter-spacing: .03em;
  white-space: nowrap;
}
.ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--a-700); background: var(--a-50);
  border: 1px solid var(--a-100); border-radius: var(--r-full);
  padding: 5px 10px;
}
.ai-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--t-600); box-shadow: 0 0 0 3px rgba(44, 95, 90, .14);
}
.timer {
  font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: .04em;
  color: var(--text-3);
  padding: 4px 9px; border-radius: var(--r-full);
  background: rgba(255, 252, 246, .7); border: 1px solid var(--border);
}
.timer.warn { color: var(--warn-600); border-color: #eddcc0; background: var(--warn-50); font-weight: 600; }

/* 全局进度条 */
.progress-track {
  height: 3px; border-radius: var(--r-full);
  background: rgba(221, 207, 183, .6);
  overflow: hidden;
  margin: var(--s-1) 0 0;
  flex: 0 0 auto;
  opacity: 0; transform: scaleY(.6);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.progress-track.on { opacity: 1; transform: none; }
.progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--a-400), var(--a-300) 60%, #d9b27c);
  border-radius: inherit;
  transition: width .55s var(--e-out);
}

/* ============ 3. 屏幕与入场 ============ */
.screen { display: none; flex: 1; flex-direction: column; padding-top: var(--s-3); }
.screen.active { display: flex; animation: rise var(--d-base) var(--e-out); }
#screen-talk.active { min-height: 0; overflow: hidden; padding-top: 0; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============ 4. 文本层级 ============ */
.eyebrow {
  margin: 0 0 var(--s-2); font-size: 11.5px; letter-spacing: .14em;
  color: var(--a-600); font-weight: 600;
}
.headline {
  font-size: 26px; line-height: 1.34; margin: 0 0 var(--s-3);
  letter-spacing: -0.02em; font-weight: 600; color: var(--n-950);
}
.sub { color: var(--text-3); font-size: 14px; line-height: 1.66; margin: 0 0 var(--s-4); }
.title {
  font-size: 22px; line-height: 1.32; font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 var(--s-2);
}
.hint {
  font-size: 12px; color: var(--text-3); line-height: 1.55;
  margin: var(--s-3) 0 0; text-align: center;
}
.legal { font-size: 12px; color: var(--text-4); line-height: 1.62; margin: var(--s-3) 0 0; }
.muted { color: var(--text-3); font-size: 13px; }

.link-btn {
  appearance: none; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 12.5px; color: var(--text-3);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(110, 100, 85, .35);
  transition: color var(--d-fast);
}
.link-btn:hover { color: var(--a-600); }
.link-btn.back { align-self: flex-start; margin-bottom: var(--s-4); font-size: 13px; }

/* ============ 5. 场景选择（第一屏） ============ */
.scene-brand {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-5);
}
.brand-avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid #fff; box-shadow: var(--sh-xs); background: var(--n-100);
}
.brand-meta { display: flex; flex-direction: column; line-height: 1.4; }
.brand-meta strong { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; }
.brand-meta span { font-size: 12px; color: var(--text-3); letter-spacing: .04em; }

.pain-list { display: flex; flex-direction: column; gap: 10px; }
.pain {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: var(--s-3);
  text-align: left; padding: 15px 14px;
  border: 1px solid var(--border-strong); background: var(--card);
  border-radius: var(--r-md); font-family: inherit;
  color: var(--n-800); cursor: pointer; line-height: 1.5;
  box-shadow: var(--sh-xs);
  transition: transform var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.pain:hover {
  border-color: var(--a-200); background: #fffdf9;
  box-shadow: var(--sh-sm); transform: translateY(-1px);
}
.pain:active { transform: scale(.994); }
.pain-body { flex: 1; min-width: 0; }
.pain-t { display: block; font-size: 15px; font-weight: 500; letter-spacing: .005em; }
.pain .tag {
  display: block; font-size: 11.5px; color: var(--text-3);
  margin-top: 3px; letter-spacing: .01em;
}
.pick-mark {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--n-300); position: relative;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.pick-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; transform: scale(0); transition: transform var(--d-fast) var(--e-out);
}
.pain.on {
  border-color: var(--a-500); background: var(--a-50);
  box-shadow: 0 0 0 3px rgba(169, 82, 31, .10), var(--sh-sm);
}
.pain.on .pick-mark { border-color: var(--a-500); background: var(--a-500); }
.pain.on .pick-mark::after { transform: scale(1); }
.pain.on .pain-t { color: var(--a-700); font-weight: 600; }

.more-pains {
  width: 100%; min-height: 44px; margin-top: var(--s-2);
  border: 0; background: transparent; color: var(--a-700);
  font: 500 13px/1.4 inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(125, 60, 25, .3);
}
.more-pains:hover { color: var(--a-500); }

.scene-foot {
  position: sticky; bottom: 0; z-index: 3;
  margin-top: var(--s-3);
  padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(244, 238, 226, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(221, 207, 183, .5);
}
.scene-foot .btn { width: 100%; }
.scene-foot .hint { margin: var(--s-2) 0 0; }

/* ============ 6. 开始体验 ============ */
.chosen-pill {
  appearance: none; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%;
  margin: 0 0 var(--s-6);
  padding: 6px 10px 6px 8px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--r-full); font-family: inherit; cursor: pointer;
  box-shadow: var(--sh-xs);
  transition: border-color var(--d-fast), background var(--d-fast);
}
.chosen-pill:hover { border-color: var(--a-200); background: #fffdf9; }
.chosen-k {
  font-size: 10.5px; letter-spacing: .08em; color: var(--a-600);
  background: var(--a-50); border-radius: var(--r-full); padding: 2px 7px;
}
.chosen-v {
  font-size: 12.5px; color: var(--n-700); max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chosen-x { font-size: 11.5px; color: var(--text-3); text-decoration: underline; }

.portrait-wrap {
  display: flex; justify-content: center;
  margin: 0 0 var(--s-4); position: relative;
}
.portrait-wrap::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 166px; height: 166px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(236, 201, 173, .55), rgba(247, 231, 216, 0) 70%);
  border: 1px solid rgba(236, 201, 173, .55);
}
.portrait {
  position: relative;
  width: 124px; height: 124px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: var(--sh-md);
  background: var(--n-100);
}
.operator-name {
  margin: 0; text-align: center;
  font-size: 20px; font-weight: 600; letter-spacing: .01em;
}
.operator-title {
  margin: 4px 0 var(--s-8); text-align: center;
  font-size: 13px; color: var(--text-3); letter-spacing: .02em;
}

#screen-landing > .sub { margin-bottom: var(--s-6); }

/* 资历列表：细分割线，名片质感 */
.creds {
  list-style: none; margin: 0 0 var(--s-6); padding: var(--s-2) var(--s-4);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-xs);
  display: grid;
}
.creds li {
  position: relative; padding: 12px 0 12px var(--s-3);
  font-size: 13px; line-height: 1.6; color: var(--n-600);
}
.creds li + li { border-top: 1px solid var(--n-100); }
.creds li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--a-400); opacity: .9;
}

/* ============ 7. 按钮系统 ============ */
.btn {
  appearance: none;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 46px; padding: 0 var(--s-5);
  border: 1px solid var(--border-strong); background: var(--card); color: var(--text);
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 500; font-family: inherit; letter-spacing: .01em;
  cursor: pointer;
  transition: transform var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.btn:hover { border-color: var(--a-200); background: var(--n-50); }
.btn:active { transform: scale(.98); }

/* 加载态：文字透明但保留宽度，避免布局跳动 */
.btn.loading,
.btn.loading:disabled {
  color: transparent !important;
  opacity: 1;
  pointer-events: none;
  cursor: default;
}
.btn.loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(169, 82, 31, .28);
  border-top-color: var(--a-500);
  border-radius: 50%;
  animation: spin .68s linear infinite;
}
.btn.primary.loading::after,
.btn.mic.loading::after {
  border-color: rgba(255, 255, 255, .38);
  border-top-color: #fff;
}
.btn.primary.loading,
.btn.primary.loading:disabled {
  background: var(--a-700);
  border-color: var(--a-700);
  box-shadow: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn.primary {
  background: linear-gradient(180deg, var(--a-400), var(--a-500));
  border-color: var(--a-500); color: #fff;
  font-weight: 600; letter-spacing: .03em;
  box-shadow: var(--sh-a);
}
.btn.primary:hover {
  background: linear-gradient(180deg, var(--a-500), var(--a-600));
  border-color: var(--a-600);
  box-shadow: 0 1px 2px rgba(125, 60, 25, .26), 0 12px 26px -10px rgba(169, 82, 31, .55);
}
.btn.primary:active { transform: scale(.98); }
.btn.primary:disabled {
  background: #d8c8b4; border-color: #d8c8b4; color: #fffdf8;
  box-shadow: none; cursor: not-allowed;
}

.btn.ghost {
  background: transparent; border-color: transparent; color: var(--text-3);
  font-weight: 400; min-height: 44px;
}
.btn.ghost:hover { background: rgba(72, 48, 24, .05); color: var(--n-700); }

.btn.mic {
  background: var(--a-50); border-color: var(--a-100); color: var(--a-700);
  white-space: nowrap; font-size: 13.5px; padding: 0 var(--s-3);
  min-height: 46px; font-weight: 500; letter-spacing: .02em;
}
.btn.mic:hover { background: var(--a-100); border-color: var(--a-200); }
.btn.mic.recording {
  background: var(--err-50); border-color: #eec4bf; color: var(--err-600);
  animation: recPulse 1.6s var(--e-in-out) infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(165, 52, 44, .20); }
  50%      { box-shadow: 0 0 0 7px rgba(165, 52, 44, 0); }
}
.btn.send { padding: 0 var(--s-4); font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.stack { display: flex; flex-direction: column; gap: var(--s-2); }

/* ============ 8. 表单 ============ */
.field { display: block; margin-bottom: var(--s-5); }
.field > span {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--n-700); margin-bottom: var(--s-2); letter-spacing: .06em;
}
/* 字段下方的轻提示（如「行业细分」说明为什么要填） */
.field-hint {
  margin: 0 0 var(--s-3); font-size: 12.5px; line-height: 1.6; color: var(--text-3);
}
/* 「还差这一项」：按钮上已经写明缺什么，这里再把对应字段提亮一次，
   客户不用在页面上来回找（原来细分没选时按钮一直是灰的，没有任何提示） */
.field.need > span { color: var(--a-600); }
.field.need .chips { outline: 2px solid rgba(169, 82, 31, .22); outline-offset: 5px; border-radius: 14px; }
#btn-profile-next { margin-top: auto; }
input[type="text"], input[type="tel"] {
  width: 100%; min-height: 50px; padding: 0 var(--s-4);
  font-size: 16px; font-family: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); outline: none;
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}
input::placeholder { color: var(--n-400); }
input:hover { border-color: var(--a-200); }
input:focus {
  border-color: var(--a-500); background: #fffdf9;
  box-shadow: 0 0 0 3px rgba(169, 82, 31, .13);
}

/* 胶囊选项 */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--border-strong); background: var(--card);
  border-radius: var(--r-full);
  font-size: 13.5px; font-family: inherit; cursor: pointer; color: var(--n-700);
  transition: all var(--d-fast) var(--e-out);
}
.chip:hover { border-color: var(--a-200); background: var(--a-50); }
.chip.on {
  border-color: var(--a-500); background: var(--a-50);
  color: var(--a-700); font-weight: 600;
  box-shadow: 0 0 0 3px rgba(169, 82, 31, .10);
}

/* ============ 9. 对话页 · 固定上半 ============ */
.talk-stage {
  flex: 0 0 auto;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 174px;
  padding: 2px 0 10px;
}
/* 暖光晕，托住头像 */
.talk-stage::before {
  content: ""; position: absolute; top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 220px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(208, 139, 88, .16), rgba(208, 139, 88, 0) 68%);
}
/* 头底下一条渐隐发丝线，区分固定区与滚屏区 */
.talk-stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(221, 207, 183, 0), rgba(221, 207, 183, .9) 22%, rgba(221, 207, 183, .9) 78%, rgba(221, 207, 183, 0));
}

.stage-avatar {
  appearance: none; border: 0; padding: 0; background: transparent;
  position: relative; width: 94px; height: 94px;
  display: grid; place-items: center;
  cursor: pointer;
}
.stage-img {
  position: relative; z-index: 2;
  width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
  border: 2.5px solid #fff;
  background: var(--n-100);
  box-shadow: 0 2px 6px rgba(72, 48, 24, .10), 0 12px 28px -12px rgba(72, 48, 24, .38);
}
/* 缓慢旋转的渐变光环：科技质感来源，不抢注意力 */
.halo {
  position: absolute; inset: -5px; border-radius: 50%; z-index: 1;
  background: conic-gradient(from 0deg,
    rgba(184, 98, 46, .75), rgba(217, 178, 124, .18) 30%,
    rgba(44, 95, 90, .55) 55%, rgba(217, 178, 124, .18) 80%,
    rgba(184, 98, 46, .75));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: spin 9s linear infinite;
  opacity: .85;
}
.pulse {
  position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  border: 1px solid rgba(184, 98, 46, .5);
  opacity: 0; transform: scale(.92);
}
.talk-stage.speaking .pulse { animation: ripple 2.4s var(--e-out) infinite; }
.talk-stage.speaking .pulse.p2 { animation-delay: 1.2s; }
.talk-stage.listening .pulse { border-color: rgba(47, 107, 70, .5); animation: ripple 2.8s var(--e-out) infinite; }
.talk-stage.listening .pulse.p2 { animation-delay: 1.4s; }
@keyframes ripple {
  0%   { opacity: .55; transform: scale(.92); }
  100% { opacity: 0;   transform: scale(1.6); }
}

.stage-name {
  margin: var(--s-2) 0 2px; font-size: 14.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--n-800);
}

/* 语音状态 */
.voice-state {
  appearance: none; border: 0; padding: 0; background: transparent;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-3); letter-spacing: .02em;
  min-height: 28px; cursor: pointer; font-family: inherit;
}
.voice-state .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--n-400); flex: 0 0 auto;
  transition: background var(--d-fast);
}
.voice-state.analyzing .dot { background: var(--t-600); animation: pulse 1.1s var(--e-in-out) infinite; }
.voice-state.speaking .dot { background: var(--a-500); animation: pulse .9s var(--e-in-out) infinite; }
.voice-state.listening .dot { background: var(--ok-600); animation: pulse 1.2s var(--e-in-out) infinite; }
.voice-state.error .dot { background: var(--err-600); }
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* 声波：基高不同 + scaleY 变形，任何一帧都有起伏（不会变成"一排等号"） */
.wave {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 26px; margin: 6px 0 0; opacity: .38;
  transition: opacity var(--d-base) var(--e-out);
}
.wave i {
  display: block; width: 3px; height: var(--h, 10px);
  border-radius: var(--r-full);
  transform: scaleY(.7); transform-origin: center;
  background: linear-gradient(180deg, var(--a-300), var(--a-500));
}
.wave i:nth-child(1) { --h: 8px; }
.wave i:nth-child(2) { --h: 14px; }
.wave i:nth-child(3) { --h: 10px; }
.wave i:nth-child(4) { --h: 20px; }
.wave i:nth-child(5) { --h: 12px; }
.wave i:nth-child(6) { --h: 22px; }
.wave i:nth-child(7) { --h: 11px; }
.wave i:nth-child(8) { --h: 17px; }
.wave i:nth-child(9) { --h: 9px; }
.wave.on { opacity: 1; }
.wave.on i { animation: bar 1.05s var(--e-in-out) infinite; }
.wave.on i:nth-child(1) { animation-delay: 0s; }
.wave.on i:nth-child(2) { animation-delay: .11s; }
.wave.on i:nth-child(3) { animation-delay: .22s; }
.wave.on i:nth-child(4) { animation-delay: .33s; }
.wave.on i:nth-child(5) { animation-delay: .16s; }
.wave.on i:nth-child(6) { animation-delay: .27s; }
.wave.on i:nth-child(7) { animation-delay: .06s; }
.wave.on i:nth-child(8) { animation-delay: .19s; }
.wave.on i:nth-child(9) { animation-delay: .3s; }
@keyframes bar {
  0%, 100% { transform: scaleY(.38); opacity: .55; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* ============ 10. 对话页 · 滚屏区 ============ */
.talk-stream {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--s-3) 2px var(--s-3);
  /* 顶部渐隐，避免滚出边界的消息被硬切一刀 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 100%);
}
.talk-stream::before { content: ""; flex: 1 1 auto; min-height: 0; }
.talk-stream::-webkit-scrollbar { display: none; }

.talk-stream .row { display: flex; animation: msgIn .3s var(--e-out); }
.talk-stream .row.user { justify-content: flex-end; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(7px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.talk-stream .msg {
  max-width: 88%; padding: 11px 14px;
  border-radius: var(--r-lg); font-size: 14.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.talk-stream .row.ai .msg {
  background: var(--card); border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
  color: var(--n-700); box-shadow: var(--sh-xs);
}
.talk-stream .row.user .msg {
  background: linear-gradient(180deg, var(--a-400), var(--a-500));
  color: #fff; border-bottom-right-radius: 6px;
  box-shadow: 0 1px 2px rgba(125, 60, 25, .18), 0 8px 18px -10px rgba(169, 82, 31, .6);
}
.msg-tag {
  display: block; font-size: 10.5px; letter-spacing: .1em;
  color: var(--a-600); margin-bottom: 5px; font-weight: 600;
}

/* 建议卡（出现在滚屏里，不新开页面） */
.advice-wrap { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-1); animation: msgIn .34s var(--e-out); }
.advice-eyebrow {
  font-size: 10.5px; letter-spacing: .14em; font-weight: 600; color: var(--a-600);
}
.advice-card {
  position: relative;
  background: linear-gradient(180deg, #fffdf9, var(--card-2));
  border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-4) var(--s-5) var(--s-5);
  font-size: 14.5px; line-height: 1.85; color: var(--n-700);
  box-shadow: var(--sh-sm); white-space: pre-wrap;
  overflow: hidden;
}
.advice-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--a-300), var(--a-600));
}
.stream-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.stream-actions .btn { width: 100%; }

/* ============ 11. 对话页 · 底部输入区 ============ */
.talk-compose {
  flex: 0 0 auto;
  padding: var(--s-2) 0 calc(var(--s-2) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(221, 207, 183, .7);
  background: rgba(244, 238, 226, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.turn-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.turn-meta { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
.turn-meta b {
  font-size: 11.5px; font-weight: 600; color: var(--a-700);
  letter-spacing: .06em; white-space: nowrap;
}
.turn-meta span {
  font-size: 11.5px; color: var(--text-3); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.options {
  display: flex; flex-direction: column; gap: var(--s-2);
  max-height: 32vh; overflow-y: auto; scrollbar-width: none;
  margin-bottom: var(--s-2);
}
.options::-webkit-scrollbar { display: none; }
.options:empty { display: none; }
.option {
  text-align: left; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--border-strong); background: var(--card);
  border-radius: var(--r-md); font-size: 14.5px; font-family: inherit;
  color: var(--n-800); cursor: pointer; line-height: 1.45;
  box-shadow: var(--sh-xs);
  transition: all var(--d-fast) var(--e-out);
}
.option:hover { border-color: var(--a-200); background: #fffdf9; }
.option:active { transform: scale(.99); }
/* 请求进行中锁住选项，防止连点重复提交 */
.options.locked .option { pointer-events: none; opacity: .5; }

.input-row { display: flex; gap: var(--s-2); align-items: center; min-width: 0; }
.input-row input { flex: 1 1 0; min-width: 0; width: 100%; min-height: 46px; }
.input-row .btn {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  padding: 0 var(--s-3); font-size: 13.5px;
}
.compose-note {
  margin: 6px 0 0; font-size: 11px; color: var(--text-3);
  letter-spacing: .02em; text-align: center;
}
.voice-privacy-row {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px;
}
.voice-consent { display: flex; align-items: center; gap: 7px; text-align: left; line-height: 1.45; }
.voice-consent {
  flex: 1 1 auto; min-height: 44px; padding: 0 2px; margin: 0;
  font-size: 12px; line-height: 1.45;
}
.voice-consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--a-500); }
.voice-details-toggle {
  appearance: none; flex: 0 0 auto; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--a-700);
  font: 500 11.5px/1.4 inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.voice-details {
  margin: 0 2px var(--s-2); padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: rgba(255, 252, 246, .82); color: var(--text-3);
  font-size: 11.5px; line-height: 1.55;
}

/* ============ 12. 卡片 / 留资 ============ */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  margin-bottom: var(--s-4); box-shadow: var(--sh-sm);
}
.card .btn { width: 100%; }
.qr-card { padding: 0; overflow: hidden; text-align: center; }
/* 留资页名片：通栏满铺，去掉内边距与居中限宽，避免大片留白；
   源图 600×900 即 2:3，aspect-ratio 保证任何屏宽都不变形 */
.namecard {
  width: 100%; max-width: none; height: auto; aspect-ratio: 2 / 3;
  margin: 0; display: block;
  border-radius: 0; border: none; background: #fff;
  box-shadow: none; object-fit: cover;
}
/* 保存按钮：贴在图片下方，左右留出呼吸位 */
.qr-card .btn {
  width: calc(100% - 2 * var(--s-4));
  margin: var(--s-3) var(--s-4) var(--s-4);
}
/* 页面底部备注（已从卡片内移至整页底部） */
.contact-hint { text-align: center; margin: var(--s-1) 0 0; }
.ok {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--ok-600); font-size: 13.5px; font-weight: 500; margin: var(--s-3) 0 0;
}

/* ============ 13. 页脚 / 提示 ============ */
/* 页脚（含「录音保存 N 天」与深度合成文案）已按产品要求整块移除，见 index.html */
.toast {
  position: fixed; left: 50%; bottom: var(--s-8); transform: translateX(-50%);
  background: rgba(36, 31, 24, .95); color: #fdf8ef;
  padding: 11px var(--s-4); border-radius: var(--r-md);
  font-size: 13px; max-width: 80vw; z-index: 99;
  box-shadow: var(--sh-md);
  animation: toastIn .26s var(--e-out);
  backdrop-filter: blur(8px);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============ 14. 桌面预览（仅放大留白，不改手机布局） ============ */
@media (min-width: 560px) {
  body {
    background:
      radial-gradient(1000px 600px at 50% -10%, #faf5ea 0%, rgba(250, 245, 234, 0) 60%),
      var(--bg);
  }
  .app {
    box-shadow: 0 0 0 1px rgba(221, 207, 183, .55), 0 30px 80px -40px rgba(72, 48, 24, .35);
    border-radius: 0;
  }
}

/* ============ 15. 无障碍与降级 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .halo { animation: none !important; }
}

/* 触控设备去掉 hover 残留 */
@media (hover: none) {
  .btn:hover, .pain:hover, .option:hover, .chip:hover, input:hover,
  .chosen-pill:hover, .link-btn:hover {
    background: revert; border-color: revert; box-shadow: revert; transform: none;
  }
}