/* ============================================================================
 * restyle_chat.css — Tom 聊天页（/chat.html, body.page-chat）全屏化热修
 * P2深度沉浸·3h并行批（风V1.1施工单）· 清 · 2026-09-03
 * ----------------------------------------------------------------------------
 * 作用域：每条规则均以 body.page-chat 前缀隔离，仅 Tom 聊天页生效，
 *         不串 game/pet/parent/town_map/pet_home 五页，不污染任何其他页面。
 * 红线：纯 CSS、零 JS、零新图、零功能变更；不碰 page_chat.js 业务逻辑、
 *       不碰 Tom r15.5 六件热修（tom_modal / hotfix_tom_modal_r155 /
 *       tom_vip_switch / hotfix_tom_sayhi_button / tom_silent / tom_sanitize）、
 *       不改正文件 style.css（只叠加）。撤引用 30 秒回滚。
 * 挂载：/chat.html head 加 1 行（大白操作）：
 *       <link rel="stylesheet" href="/hotfix/restyle_chat.css?v=20260903a">
 *
 * 全屏五铁律对照：零白边 / 禁限宽（内容栏居中+背景铺满）/ 热区≥44px /
 *                 100dvh+safe-area 双声明 / 横屏纯色渐变兜底。
 * ========================================================================== */

/* ############################################################################
 * ① 最高优先 · dvh 补缺（修 iOS Safari 工具栏收缩时「按住说话」栏被遮）
 *    vh 在前 dvh 在后双声明：旧浏览器回退 vh，新浏览器取 dvh。
 * ############################################################################ */
body.page-chat {
  height: 100vh;
  height: 100dvh;
}
/* style.css:502 旧 .chat-window（当前页未使用，保留兼容双声明） */
body.page-chat .chat-window {
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
}
/* 消息区底部留白：输入栏(约74px) + tabbar(约60px) + 安全区，末条消息不被遮 */
body.page-chat .chat-messages,
body.page-chat .scene-panel {
  padding-top: 80px;
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

/* ############################################################################
 * ② 420 帽满铺：body / topbar / tabbar / 输入栏
 *    骨架去限宽满铺，背景左右贯通（白色边根因消除）。
 * ############################################################################ */
body.page-chat {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* 底部 60px tabbar + 安全区由内部 fixed 栏自理；body 不再压 80px 死白 */
  padding-bottom: 0 !important;
  background: var(--bg);
  overflow-x: hidden;
}
/* 顶栏（含 chat 专属 style.css:2386 与全局 .topbar :47 两处帽） */
body.page-chat .topbar {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  border-radius: 0 0 28px 28px;
}
/* 底栏 tabbar（common.js 注入；.page-chat 前缀覆盖，不串三页外的他页） */
body.page-chat .tabbar {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  z-index: 200 !important;
}
/* 输入栏 */
body.page-chat .chat-input-bar {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  /* 满铺后下沿与 tabbar 之间不留白缝：栏底压到 tabbar 顶（tabbar z200 盖在上层） */
  bottom: 0 !important;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 150;
}

/* 内容阅读栏：消息流/场景面板自身满铺做背景，内部气泡行限宽居中
   —— 背景贯通零白边，阅读宽度不无限拉伸 */
body.page-chat .chat-messages,
body.page-chat .scene-panel {
  width: 100%;
  max-width: none;
  align-self: stretch;
}
body.page-chat .chat-messages {
  padding-left: 0;
  padding-right: 0;
  align-items: center;          /* flex 列布局：消息行整体居中 */
}
/* 消息行 / 独立气泡 / 提示气泡：居中限宽阅读栏（手机 375 下 720>屏宽，自然满宽） */
body.page-chat .chat-messages .msg-row,
body.page-chat .chat-messages > .msg,
body.page-chat .chat-messages .hint-bubble {
  width: 100%;
  max-width: 720px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
/* bot/user 行内左右对齐保持（头像+气泡贴左/贴右），不被居中拉伸 */
body.page-chat .chat-messages .msg-row.msg-row-bot { align-self: center; justify-content: flex-start; }
body.page-chat .chat-messages .msg-row.msg-row-user { align-self: center; justify-content: flex-end; }
/* 气泡本身仍保持原 max-width 口径（消息行内的 .msg 不被拉满） */
body.page-chat .msg-row .msg { max-width: 100%; }

/* ############################################################################
 * ③ 热区 40→44px：切换键 / 发送键 / 键盘麦克风切换图标键
 *    透明扩触达，视觉尺寸不动（伪元素+padding，不挪布局）。
 * ############################################################################ */
/* 键盘⇄语音 切换图标键（原 40×40） */
body.page-chat .input-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
}
/* 发送键（new input bar 版 40×40） */
body.page-chat .chat-send {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
}
/* 顶栏模式切换两键（自由聊/场景，padding 偏小）→ 透明扩 44 高 */
body.page-chat .mode-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 清空聊天图标键（原 32×32）→ 透明伪元素扩 44，视觉仍 32 */
body.page-chat .clear-chat-btn {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
body.page-chat .clear-chat-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
/* 场景提示栏两键（提示/退出）热区补 44 */
body.page-chat .hint-btn,
body.page-chat .exit-scene-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ############################################################################
 * ④ 完成弹层 scene-complete：帽 320→min(92vw,360px)，遮罩满铺，关闭/按钮热区
 *    r15.5 的 .tom-modal-* 弹层本文件一律不碰（见 ⑦）。
 * ############################################################################ */
body.page-chat .scene-complete-overlay {
  position: fixed;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
}
body.page-chat .scene-complete-card {
  width: min(92vw, 360px) !important;
  max-width: min(92vw, 360px) !important;
  max-height: 85vh;
  max-height: 85dvh;
  margin: 0 auto;
  box-sizing: border-box;
}
body.page-chat .scene-complete-card .scc-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 大白wave29 录音状态提示（老板2026-09-04反馈：大黑影压抑）
 * 修复：原v2热修把遮罩改inset:0全屏，但.recording-overlay在
 * .chat-input-bar(position:fixed+transform:translateX(-50%))内部，
 * fixed包含块变成输入栏；叠加基础style.css未被覆盖的
 * transform:translate(-50%,-50%)，大黑块被甩到屏幕左上象限（老板真机红圈）。
 * 方案：改成录音栏正上方的轻量小黑胶囊（微信风格），
 * transform必须显式置none清掉基础样式的位移，小体积不遮内容不压抑。 */
body.page-chat .recording-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(145px + env(safe-area-inset-bottom, 0px)); /* 大白wave32: 风复核P2,124px时胶囊底边压进输入栏上缘13px,提至145完全分离(栏顶距底约137px) */
  transform: none !important;
  margin: 0 auto;
  width: max-content;
  min-width: 190px;
  max-width: calc(100vw - 32px);
  padding: 14px 22px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.72);
  z-index: 9999;
  pointer-events: none;
}
@keyframes ldRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.18); }
}
body.page-chat .recording-overlay .rec-mic-icon {
  color: #fff;
  animation: ldRecPulse 1.1s ease-in-out infinite;
}
body.page-chat .recording-overlay .rec-hint {
  color: #fff;
}

/* ############################################################################
 * ⑥ seg3 开场片（Tom 首点弹，common.js 注入 .pet-video-overlay）
 *    该遮罩 z-index:99999 本就全屏；此处仅在 chat 页保险：
 *    满铺 dvh、关闭✕热区 36→44、跳过提示不被任何 chat 元素遮挡。
 *    不碰 common.js、不碰视频逻辑。
 * ############################################################################ */
body.page-chat .pet-video-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
}
body.page-chat .pet-video-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  top: calc(8px + env(safe-area-inset-top));
  right: 8px;
}

/* ############################################################################
 * ⑤ 768 平板 / 大屏断点：消息内容栏居中限宽 + 背景铺满；场景卡多列
 * ############################################################################ */
@media (min-width: 768px) {
  /* 顶栏/底栏/输入栏满铺后，内部内容居中限宽，阅读不拉伸 */
  body.page-chat .topbar > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }
  body.page-chat .chat-input-bar {
    padding-left: max(16px, calc((100vw - 720px) / 2));
    padding-right: max(16px, calc((100vw - 720px) / 2));
  }
  body.page-chat .scene-panel {
    padding-left: max(12px, calc((100vw - 720px) / 2));
    padding-right: max(12px, calc((100vw - 720px) / 2));
  }
  body.page-chat .tabbar {
    padding-left: max(0px, calc((100vw - 720px) / 2));
    padding-right: max(0px, calc((100vw - 720px) / 2));
  }
  /* 场景卡：平板 3 列（参照 a4_shop 已验证断点口径） */
  body.page-chat .scene-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}
@media (min-width: 1024px) {
  body.page-chat .scene-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 横屏：纯色渐变铺满兜底（零素材风险），内容栏居中限宽防拉伸 */
@media (orientation: landscape) and (max-height: 500px) {
  body.page-chat {
    background: linear-gradient(160deg, #FFF8F0 0%, #FFEFD9 55%, #FFE3C2 100%);
  }
  body.page-chat .chat-messages {
    background: linear-gradient(160deg, rgba(237,237,237,0.0) 0%, rgba(237,237,237,0.35) 100%);
  }
  body.page-chat .topbar {
    border-radius: 0 0 18px 18px;
  }
}

/* ############################################################################
 * ⑦ r15.5 Tom 弹层（.tom-modal-mask / .tom-modal-card 等）：默认一行不碰。
 *    L0 若实测其遮罩在平板露白边，仅允许在下方追加「遮罩层满铺」覆写，
 *    弹层内部（卡片/按钮/文案）一律不动，红项报风定夺。
 *    —— 预留保险（仅遮罩容器，不涉内部）：默认注释，L0 确认白边后启用。
 * ############################################################################
 * body.page-chat .tom-modal-mask {
 *   position: fixed; inset: 0; width: 100%; max-width: none;
 *   height: 100vh; height: 100dvh;
 * }
 */

/* ############################################################################
 * ⑧ r15.5 求助FAB 让位（tom_sanitize.js 注入的 #tom-help-fab；六件JS一行不碰）
 *    背景：FAB 为 position:fixed;right:12px;bottom:84px;z-index:9999，宽约192px，
 *    03:21 elementFromPoint 实测（375/768/横屏三视口文本态）：发送钮中心点+输入框
 *    右半均命中 tom-help-fab = 功能阻断（R22原版存量，非本热修引入）。
 *    风03:16令：若发送钮被遮，纯CSS让位——FAB 只准让位、不准隐藏，保发送钮44热区，
 *    不碰 tom_sanitize.js 等六件。
 *    方案：FAB 上移，bottom:84px→132px，FAB底边落在发送钮顶上方约10px，
 *    发送钮/输入框44热区全部让出；探针实测文本态发送钮中心恢复命中按钮、
 *    语音态「按住说话」中心仍命中 chatVoiceBtn，FAB不隐藏。
 * ############################################################################ */
body.page-chat #tom-help-fab {
  bottom: 132px !important;
}

/* ############################################################################
 * ⑨ 发送钮热区 40→48（风04:42 P0令 / 雨04:30 生产双证）
 *    背景：锁死件 /hotfix/style.css .chat-send{width:40px;height:40px} 把
 *    button#chatSendBtn.chat-send 压成 40×40，违全屏铁律④热区≥44px
 *    （输入框 .input 高48px，发送钮反更小）。
 *    外部CSS覆盖，style.css 正件一字节不碰、JS零碰；48 与输入框齐高；
 *    box-sizing:border-box 防 border 撑破布局；语音态显 #chatVoiceBtn、
 *    发送钮 display:none 不受影响。
 * ############################################################################ */
body.page-chat .chat-send {
  min-width: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box;
}