/* ============================================================================
 * restyle_chat.css — Tom 聊天页（chat.html）呈现层重构样式
 * 重构线 r14 · 2026-08-31 · CSS 施工 A 组
 * ----------------------------------------------------------------------------
 * 作用域：全部规则以 body.page-chat 前缀隔离，仅 Tom 聊天页生效，不污染其他页面。
 * 红线：纯 CSS，零 JS；未改任何 HTML 结构与功能逻辑（挂载方式见 挂载说明_chat.md）。
 *
 * 主色（≤3 种，按 60-30-10）：
 *   Tom 蓝紫 #5b6cff → #4A5BD8（Tom 气泡 / 主 CTA / AI 标识 / 选中态）
 *   主  橙  #FF8C42 → #FF6B35（发送按钮 / 高危暖色带，10% 强调）
 *   微信绿 #95EC69（用户气泡，保留既有微信习惯，style.css 中带 !important 不覆盖）
 *   暖色安抚系（橙的衍生色，不计主色）：施救卡 #FFF6E8 底 / #F0B45C 边
 * 无红色否定态：原录音取消 #FF4444 → 暖棕 #6D4C41；原失败提示 #e2574c → 暖橙棕 #B3541E
 *
 * 硬指标：主操作热区 ≥56px、一般可点 ≥48px、正文 ≥16px、学习词 ≥24px、
 *         行高 ≥1.5、动画频率 ≤3Hz、兼容 375px 视口与 safe-area-inset。
 *
 * 覆盖策略：hotfix JS 注入样式（.tom-modal-*/.tom-silent-*/.tom-opt-btn/.tom-quick-opt）
 *   均为单 class 无 !important，本文件 body.page-chat 前缀特异性更高，源顺序也在后，
 *   因此绝大多数规则无需 !important；仅对「JS 内联样式」使用 3 处 !important（见注释）。
 * ========================================================================== */

body.page-chat {
  --tom-blue: #5b6cff;
  --tom-blue-deep: #4A5BD8;   /* 白字对比 4.7:1，正文达 WCAG AA */
  --tom-blue-ink: #3a46b8;
  --tom-blue-soft: #EEF2FF;
  --tom-orange: #FF8C42;
  --tom-orange-deep: #FF6B35;
  --tom-warm-bg: #FFF6E8;
  --tom-warm-border: #F0B45C;
  --tom-warm-ink: #6B4413;
  --tom-text: #2B2F45;
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* ############################################################################
 * 任务 1（P0 合规）：安全卡 .tom-safety-card（class 预留，JS 侧后续挂载）
 * 预期 DOM（必须是 #chatMessages 的直接子元素，position:sticky 才生效）：
 *   <div class="tom-safety-card level-HIGH">       ← level-HIGH / level-MEDIUM 可选
 *     <div class="tom-safety-head">
 *       <span class="tom-safety-ico">🛡️</span>
 *       <span class="tom-safety-title">安全守护</span>
 *       <span class="tom-safety-level">需要家长关注</span>
 *     </div>
 *     <div class="tom-safety-en">…英文给孩子…</div>
 *     <div class="tom-safety-cn">…中文给家长…</div>
 *     <a class="tom-safety-call" href="tel:12355">📞 拨打 12355 青少年热线</a>
 *     <a class="tom-safety-call secondary" href="tel:110">📞 拨打 110</a>
 *     <div class="tom-safety-note">Tom 已经悄悄告诉爸爸妈妈啦</div>
 *   </div>
 * ########################################################################## */
body.page-chat .tom-safety-card {
  position: sticky;
  top: 78px;                 /* 置顶不被消息冲走：吸在固定 topbar（约64px）下方 */
  z-index: 60;
  align-self: stretch;       /* flex 消息流中占满整行，区别于窄气泡 */
  margin: 0 2px 10px;
  background: linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 100%);
  border: 2px solid #FFC59A; /* 暖色边框，温和不吓人 */
  border-left: 6px solid var(--tom-blue);  /* 守护蓝竖带 */
  border-radius: 20px;
  padding: 14px 16px 16px;
  box-sizing: border-box;
  box-shadow: 0 10px 28px rgba(40, 50, 120, .18);
  animation: tomSafetyIn .35s ease-out;
}
/* HIGH 级：醒目但温和的暖橙带（不用红色） */
body.page-chat .tom-safety-card.level-HIGH {
  border-color: var(--tom-orange);
  border-left-color: var(--tom-orange);
  background: linear-gradient(180deg, #FFF4E8 0%, #FFF9F2 55%, #F6F9FF 100%);
}
body.page-chat .tom-safety-card.level-MEDIUM {
  border-left-color: var(--tom-blue);
}
@keyframes tomSafetyIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-chat .tom-safety-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
body.page-chat .tom-safety-ico {
  font-size: 24px;
  line-height: 1;
}
body.page-chat .tom-safety-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--tom-blue-ink);
}
body.page-chat .tom-safety-level {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: #E7ECFF;
  color: var(--tom-blue-ink);
  white-space: nowrap;
}
body.page-chat .tom-safety-card.level-HIGH .tom-safety-level {
  background: #FFE3CC;
  color: #B3541E;
}
/* 英文区：给孩子看，正文 ≥16px */
body.page-chat .tom-safety-en {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--tom-text);
}
/* 中文区：给家长看，浅底分区 */
body.page-chat .tom-safety-cn {
  margin-top: 8px;
  background: rgba(91, 108, 255, .06);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.7;
  color: #555B75;
}
body.page-chat .tom-safety-card.level-HIGH .tom-safety-cn {
  background: rgba(255, 140, 66, .08);
}
/* 热线拨号按钮：大号可点，热区 ≥56px；tel: 链接由 JS 挂载 */
body.page-chat a.tom-safety-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  margin-top: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--tom-blue), var(--tom-blue-deep));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(74, 91, 216, .30);
  transition: transform .12s ease;
}
body.page-chat a.tom-safety-call:active {
  transform: scale(.97);
}
body.page-chat a.tom-safety-call.secondary {
  background: #fff;
  color: var(--tom-blue-ink);
  border: 2px solid #C4CBFF;
  box-shadow: none;
  min-height: 52px;
  font-size: 16px;
}
body.page-chat .tom-safety-note {
  margin-top: 10px;
  font-size: 13px;            /* 家长向温和反馈，非儿童阅读内容 */
  line-height: 1.5;
  color: #8A90A8;
  text-align: center;
}

/* ############################################################################
 * 任务 2（P0 合规）：AI 标识角标 .tom-ai-badge
 * 预期 DOM（JS 挂载两处）：
 *   ① 头部：topbar h1 中「Tom」文字后 → <span class="tom-ai-badge">AI</span>
 *   ② 头像：.msg-row-bot 内 → <span class="tom-ai-badge tom-ai-badge-avatar">AI</span>
 * ########################################################################## */
body.page-chat .tom-ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
}
/* 头部名称旁：白底透胶囊，朋友感不破坏 */
body.page-chat .topbar .tom-ai-badge,
body.page-chat .topbar h1 .tom-ai-badge {
  background: rgba(255, 255, 255, .22);
  border: 1.5px solid rgba(255, 255, 255, .85);
  color: #fff;
  font-size: 11px;
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: middle;
}
/* 头像右下角小角标 */
body.page-chat .msg-row-bot { position: relative; }
body.page-chat .msg-row-bot .tom-ai-badge-avatar {
  position: absolute;
  left: 28px;
  top: 28px;
  width: 20px;
  height: 20px;
  background: var(--tom-blue);
  color: #fff;
  font-size: 10px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(40, 50, 120, .3);
  z-index: 3;
}

/* ############################################################################
 * 任务 3：聊天气泡体系
 *   Tom 气泡 .msg.bot：蓝紫渐变大气泡；用户气泡 .msg.user：微信绿（保留 !important 底色）
 *   .cn-hint 中文释义小字辅助；.tom-rescue-card 中文施救/安抚卡（暖色，区别英文蓝）
 * ########################################################################## */
body.page-chat .msg-row {
  gap: 10px;
  max-width: 88%;
}
body.page-chat .msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
body.page-chat .msg {
  max-width: 78%;
  padding: 12px 16px;
  font-size: 17px;            /* 正文 ≥16px */
  line-height: 1.55;
  word-break: break-word;
}
/* Tom 气泡：蓝紫渐变 + 大圆角 + 左下小尾巴 */
body.page-chat .msg.bot {
  background: linear-gradient(135deg, #5b6cff 0%, #4A5BD8 100%);
  color: #fff;
  border-radius: 20px 20px 20px 5px;
  box-shadow: 0 6px 16px rgba(74, 91, 216, .28);
}
/* 用户气泡：沿用 style.css 的 #95EC69 !important 微信绿（不覆盖底色），只升级圆角/阴影/字号 */
body.page-chat .msg.user {
  border-radius: 20px 20px 5px 20px;
  box-shadow: 0 4px 12px rgba(60, 180, 80, .18);
}
body.page-chat .msg .bot-text {
  font-size: 17px;
  line-height: 1.55;
  font-weight: 600;
}
body.page-chat .msg.bot .bot-text { color: #fff; }
body.page-chat .msg.user .bot-text { color: #1A1A1A; }
/* 中文释义：14px 辅助、非斜体（斜体对儿童不友好），蓝气泡上白 88% / 绿气泡上黑 60% */
body.page-chat .msg .cn-hint {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  font-style: normal;
  margin-top: 5px;
  opacity: 1;
}
body.page-chat .msg.bot .cn-hint  { color: rgba(255, 255, 255, .88); }
body.page-chat .msg.user .cn-hint { color: rgba(26, 26, 26, .60); }

/* —— Tom 语音消息条（气泡内白色卡片）—— */
body.page-chat .msg.bot.tom-voice-msg { padding: 10px; }
body.page-chat .tom-voice-bar {
  /* !important：压过 page_chat.js 渲染时写的内联 style="width:100px" */
  width: auto !important;
  min-width: 150px;
  max-width: 100%;
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(30, 40, 120, .15);
  color: var(--tom-blue-ink);
}
body.page-chat .tom-voice-bar .voice-icon {
  color: var(--tom-blue-deep);
  font-size: 20px;
  min-width: 22px;
}
body.page-chat .tom-voice-bar .voice-waves i { background: var(--tom-blue-deep); }
body.page-chat .tom-voice-bar.playing .voice-waves i { opacity: 1; }
body.page-chat .tom-voice-bar .voice-dur {
  color: #8A90A8;
  font-size: 14px;
}
body.page-chat .tom-voice-text { margin-top: 8px; }
body.page-chat .tom-voice-text .bot-text { font-size: 17px; }
body.page-chat .tom-voice-text .cn-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}
body.page-chat .msg.user .voice-bar { background: rgba(255, 255, 255, .55); }
body.page-chat .voice-text { font-size: 14px; }
body.page-chat .voice-dur  { font-size: 14px; }

/* —— 任务 3 预留：中文施救/安抚卡 .tom-rescue-card（暖色，区别英文蓝气泡）——
 * 预期挂载：施救态气泡 div 上加 class，即 class="msg bot tom-rescue-card"；
 * 内部 .bot-text / .cn-hint / .tom-quick-opt 结构复用。 */
body.page-chat .tom-rescue-card {
  background: linear-gradient(135deg, #FFF3DF 0%, #FFE7C2 100%);
  border: 2px solid var(--tom-warm-border);
  border-radius: 20px 20px 20px 5px;
  padding: 12px 16px;
  color: var(--tom-warm-ink);
  box-shadow: 0 6px 16px rgba(214, 150, 60, .22);
  max-width: 78%;
}
body.page-chat .tom-rescue-card .bot-text {
  color: var(--tom-warm-ink);
  font-size: 17px;
}
body.page-chat .tom-rescue-card .cn-hint { color: #967038; }
body.page-chat .tom-rescue-card .tom-quick-opt,
body.page-chat .tom-rescue-card .tom-opt-btn {
  background: #fff;
  color: #B36A1B;
  border: 2px solid var(--tom-warm-border);
  box-shadow: 0 3px 10px rgba(180, 120, 40, .18);
}
body.page-chat .tom-rescue-card .tom-quick-opt:active,
body.page-chat .tom-rescue-card .tom-opt-btn:active {
  background: #FFE7C2;
  color: #8A4E0F;
}

/* 发送失败提示：去红色，改暖橙棕（无打击性 + 白字底对比达标） */
body.page-chat .tom-send-fail {
  color: #B3541E;
  font-size: 14px;
}

/* ############################################################################
 * 任务 4：欢迎卡 + 二选一按钮
 *   .tom-quick-options/.tom-quick-opt（欢迎卡气泡内，page_chat.js 注入）
 *   .tom-options-row/.tom-opt-btn（SSE options 下发的独立按钮行，tom_sanitize.js 注入）
 * ########################################################################## */
body.page-chat .tom-quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;                 /* 间距 ≥8px */
  margin-top: 12px;
}
body.page-chat .tom-quick-opt {
  flex: 1 1 30%;
  min-height: 56px;          /* 热区 ≥56px */
  padding: 8px 14px;
  border: none;
  border-radius: 16px;
  background: #fff;
  color: var(--tom-blue-ink);
  font-size: 24px;           /* 学习词 ≥24px */
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(20, 30, 100, .22);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
body.page-chat .tom-quick-opt:active {
  transform: scale(.97);     /* 按压反馈 */
  background: #DCE3FF;
}
body.page-chat .tom-quick-opt:disabled { opacity: .55; }

/* 独立 options 按钮行（Yes/No、Cats/Dogs 等）：与 Tom 气泡左缘对齐 */
body.page-chat .tom-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: flex-start;
  margin: 8px 0 4px 50px;     /* 头像40 + gap10 */
  max-width: 86%;
}
body.page-chat .tom-opt-btn {
  min-height: 56px;          /* 热区 ≥56px */
  padding: 8px 20px;
  border: 2px solid #8B9CF8;
  border-radius: 16px;
  background: #fff;
  color: var(--tom-blue-ink);
  font-size: 24px;           /* 学习词 ≥24px，长文案自动换行撑高 */
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 3px 10px rgba(74, 91, 216, .12);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
body.page-chat .tom-opt-btn:active {
  transform: scale(.97);
  background: var(--tom-blue);
  border-color: var(--tom-blue);
  color: #fff;
}
body.page-chat .tom-opt-btn[disabled] { opacity: .55; }

/* —— 沉默提示卡（tom_silent.js 注入）：15s 纯文字 / 30s 二选一按钮 —— */
body.page-chat .tom-silent-row .tom-silent-hint {
  background: var(--tom-blue-soft);
  color: var(--tom-blue-ink);
  border: 1.5px solid #D4DBFF;
  border-radius: 18px 18px 18px 5px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 80%;
  box-shadow: 0 4px 12px rgba(74, 91, 216, .12);
}
body.page-chat .tom-silent-row .tom-silent-actions {
  gap: 10px;
  margin-top: 10px;
}
body.page-chat .tom-silent-row .tom-silent-btn {
  min-height: 56px;
  padding: 10px 20px;
  border-radius: 28px;
  font-size: 16px;
  font-weight: 800;
  transition: transform .12s ease;
}
body.page-chat .tom-silent-row .tom-silent-btn-primary {
  background: linear-gradient(135deg, var(--tom-blue), var(--tom-blue-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(74, 91, 216, .28);
}
body.page-chat .tom-silent-row .tom-silent-btn-primary:active { transform: scale(.97); }
body.page-chat .tom-silent-row .tom-silent-btn-ghost {
  background: #fff;
  color: var(--tom-blue-ink);
  border: 2px solid #C4CBFF;
}
body.page-chat .tom-silent-row .tom-silent-btn-ghost:active { background: var(--tom-blue-soft); }

/* ############################################################################
 * 任务 5：等待体验（打字动效）
 *   #typingIndicator / .thinking-text / .loading-dots / .stream-cursor
 * ########################################################################## */
body.page-chat .msg.bot.streaming {
  color: #fff;               /* 覆盖原灰色斜体（蓝气泡上会发虚） */
  font-style: normal;
}
body.page-chat .thinking-text {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  color: #fff;
}
/* 三个跳动圆点：纯 CSS（元素本体 + ::before + ::after），1.4s 一轮 ≈ 0.7Hz，远低于 3Hz */
body.page-chat .loading-dots {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 5px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  vertical-align: middle;
  animation: tomDotBounce 1.4s ease-in-out infinite;
}
body.page-chat .loading-dots::before,
body.page-chat .loading-dots::after {
  content: '';
  position: absolute;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: tomDotBounce 1.4s ease-in-out infinite;
}
body.page-chat .loading-dots::before { left: -11px; animation-delay: .18s; }
body.page-chat .loading-dots::after  { left: 11px;  animation-delay: .36s; }
/* 覆盖 style.css 旧的 .loading-dots::after 省略号文字动画（content 动画） */
@keyframes tomDotBounce {
  0%, 80%, 100% { transform: translateY(0);     opacity: .45; }
  40%           { transform: translateY(-5px);  opacity: 1;  }
}
/* 流式光标：蓝气泡上改白色（blink 动画沿用 style.css，0.8s ≈ 1.25Hz 达标） */
body.page-chat .stream-cursor {
  color: #fff;
  font-weight: 700;
}

/* ############################################################################
 * 任务 6：输入栏 .chat-input-bar
 * ########################################################################## */
body.page-chat .chat-input-bar {
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #EEF0F5;
  box-shadow: 0 -4px 16px rgba(40, 50, 120, .06);
}
/* 键盘/语音切换：热区 48px */
body.page-chat .input-toggle {
  width: 48px;
  height: 48px;
  color: var(--tom-blue-deep);
}
body.page-chat .input-toggle svg { width: 26px; height: 26px; }
body.page-chat .input-toggle:active { transform: scale(.92); }
/* 按住说话：主操作热区 56px */
body.page-chat .voice-btn {
  min-height: 56px;
  height: 56px;
  border-radius: 28px;
  border: 2px solid #D4DBFF;
  background: #F7F9FF;
  color: var(--tom-blue-ink);
  font-size: 16px;
  font-weight: 700;
  transition: background .15s ease;
}
body.page-chat .voice-btn:active,
body.page-chat .voice-btn.pressing { background: #E7ECFF; }
/* 上滑取消态：原 #FF4444 红色 → 暖棕（无红色否定态红线） */
body.page-chat .voice-btn.cancel {
  background: #6D4C41;
  border-color: #6D4C41;
  color: #fff;
}
body.page-chat .voice-btn.locked { opacity: .5; }
/* 文本输入框：16px 防 iOS 聚焦缩放 */
body.page-chat .chat-input-bar .text-input-wrap input {
  height: 52px;
  border-radius: 26px;
  border: 2px solid #D4DBFF;
  background: #F7F9FF;
  padding: 0 18px;
  font-size: 16px;
  color: var(--tom-text);
}
body.page-chat .chat-input-bar .text-input-wrap input:focus {
  border-color: var(--tom-blue);
  background: #fff;
  outline: none;
}
/* 发送按钮：主操作 56px，图标 + CSS 补「发送」文字（不改 HTML） */
body.page-chat .chat-send {
  width: auto;
  min-width: 80px;
  height: 56px;
  padding: 0 18px;
  border: none;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--tom-orange), var(--tom-orange-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(255, 107, 53, .35);
  cursor: pointer;
  transition: transform .12s ease;
}
body.page-chat .chat-send svg { width: 22px; height: 22px; flex: none; }
body.page-chat .chat-send::after {
  content: "发送";
  font-size: 16px;
  font-weight: 800;
}
body.page-chat .chat-send:active { transform: scale(.96); }
/* 录音浮层 */
body.page-chat .recording-overlay {
  border-radius: 24px;
  padding: 32px 40px;
}
body.page-chat .rec-hint {
  font-size: 16px;
  font-weight: 600;
}

/* ############################################################################
 * 任务 7：同意弹窗 #tomConsentMask / .tom-modal-card / #tomAgreeChk /
 *         #tomBtnYes / #tomBtnNo（+ 每次访问轻提醒 .tom-remind-card）
 *         样式来源 tom_modal.js 注入，本文件以更高特异性覆盖
 * ########################################################################## */
body.page-chat .tom-modal-mask { padding: 16px; }
body.page-chat .tom-modal-card {
  border-radius: 24px;
  padding: 24px 20px 20px;
  max-height: 90vh;          /* 协议长文区域整卡可滚动 */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.page-chat .tom-modal-card::-webkit-scrollbar { width: 4px; }
body.page-chat .tom-modal-card::-webkit-scrollbar-thumb { background: #C4CBFF; border-radius: 2px; }
body.page-chat .tom-modal-card h3 {
  font-size: 21px;
  line-height: 1.4;
  margin-bottom: 8px;
}
body.page-chat .tom-modal-sub {
  font-size: 14px;
  line-height: 1.6;
}
body.page-chat .tom-ai-note {
  font-size: 14px;
  line-height: 1.7;
  padding: 12px 14px;
  border-radius: 14px;
}
body.page-chat .tom-four li {
  font-size: 14px;
  line-height: 1.7;
  padding: 8px 0 8px 30px;
}
body.page-chat .tom-four li .n {
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 13px;
  left: 2px;
  top: 9px;
}
body.page-chat .tom-stage-label { font-size: 15px; }
body.page-chat .tom-stage-label small { font-size: 13px; }  /* 家长向辅助说明 */
body.page-chat .tom-stages { gap: 10px; }
body.page-chat .tom-stage-opt {
  min-height: 56px;          /* 学段选择热区 ≥56px */
  padding: 12px 8px;
  border-radius: 14px;
  border-width: 2px;
  font-size: 14.5px;
  font-weight: 700;
}
body.page-chat .tom-stage-opt small { font-size: 12.5px; }  /* 家长向辅助说明 */
/* 勾选行：整行大热区；checkbox 视觉 22px */
body.page-chat .tom-agree-row {
  font-size: 14px;
  line-height: 1.7;
  min-height: 48px;
  align-items: center;
}
body.page-chat #tomAgreeChk {
  /* !important：压过 tom_modal.js 写在 input 上的内联 width/height:16px */
  width: 22px !important;
  height: 22px !important;
  margin-top: 0 !important;
  accent-color: var(--tom-blue);
}
body.page-chat #tomAgreementLink {
  /* !important：压过 tom_modal.js 内联 font-size:12.5px 继承链 */
  font-size: 14px !important;
  line-height: 1.6;
}
body.page-chat .tom-btns { gap: 12px; }
body.page-chat .tom-btn {
  min-height: 56px;          /* 主按钮热区 ≥56px */
  padding: 0 16px;
  border-radius: 28px;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}
body.page-chat .tom-btn-primary {
  background: linear-gradient(135deg, var(--tom-blue), var(--tom-blue-deep));
  box-shadow: 0 6px 14px rgba(74, 91, 216, .30);
}
body.page-chat .tom-btn-primary:active { transform: scale(.97); }
body.page-chat .tom-btn-primary:disabled {
  background: #C4C9E8;
  box-shadow: none;
}
body.page-chat .tom-btn-ghost {
  background: #F2F3F8;
  color: #5A607A;
  font-size: 16px;
}
/* 每次访问轻提醒 */
body.page-chat .tom-remind-card {
  border-radius: 24px;
  padding: 36px 24px;
}
body.page-chat .tom-remind-card .emoji { font-size: 48px; }
body.page-chat .tom-remind-card .txt {
  font-size: 19px;
  line-height: 1.6;
}
body.page-chat .tom-remind-card .hint {
  font-size: 14px;
  line-height: 1.6;
}

/* ############################################################################
 * 任务 8：全局硬指标（热区 / 字号 / 对比度 / 小屏 / 安全区）
 * ########################################################################## */
/* 顶部栏控件：清空键视觉 40px + 伪元素热区扩到 48px */
body.page-chat .clear-chat-btn {
  width: 40px;
  height: 40px;
  position: relative;
}
body.page-chat .clear-chat-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
body.page-chat .mode-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
}
/* 场景提示栏按钮：热区 ≥48px（伪元素外扩，不改变视觉布局） */
body.page-chat .hint-btn,
body.page-chat .exit-scene-btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 20px;
  position: relative;
}
body.page-chat .hint-btn::after,
body.page-chat .exit-scene-btn::after {
  content: '';
  position: absolute;
  inset: -6px;
}
/* 提示按钮原 #FFB800 黄底白字对比不足 → 改 Tom 蓝（白字 4.7:1） */
body.page-chat .hint-btn {
  background: linear-gradient(135deg, var(--tom-blue), var(--tom-blue-deep));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(74, 91, 216, .25);
}
body.page-chat .exit-scene-btn {
  background: rgba(0, 0, 0, .08);
  color: #5A607A;
  font-weight: 700;
}
/* 场景卡文字地板（消灭 11-12px 儿童可见小字） */
body.page-chat .scene-grade-title { font-size: 16px; }
body.page-chat .scene-card .sc-icon { font-size: 30px; }
body.page-chat .scene-card .sc-name { font-size: 16px; }
body.page-chat .scene-card .sc-name-cn { font-size: 14px; }
body.page-chat .scene-card .sc-desc {
  font-size: 14px;
  line-height: 1.5;
}
body.page-chat .scene-card .sc-stars { font-size: 13px; }
body.page-chat .scene-hint-bar .scene-name { font-size: 15px; }
body.page-chat .hint-bubble { font-size: 15px; }
/* 场景完成弹层按钮热区 */
body.page-chat .scene-complete-card .scc-btn {
  min-height: 52px;
  border-radius: 26px;
  font-size: 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

/* —— 375px 小屏适配 —— */
@media (max-width: 380px) {
  body.page-chat .msg { max-width: 82%; }
  body.page-chat .tom-options-row { margin-left: 44px; }
  body.page-chat .chat-send { min-width: 72px; padding: 0 14px; }
  body.page-chat .chat-send::after { font-size: 15px; }
  body.page-chat .tom-safety-card { padding: 12px 14px 14px; }
  body.page-chat a.tom-safety-call { font-size: 16px; }
}

/* —— 动效无障碍：系统开启“减弱动态效果”时停用动画 —— */
@media (prefers-reduced-motion: reduce) {
  body.page-chat *,
  body.page-chat *::before,
  body.page-chat *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}