/**
 * fullscreen-styles.css - 强制全屏模式样式
 *
 * 功能：
 * 1. iOS Safari全屏模式的CSS模拟
 * 2. 隐藏浏览器UI元素
 * 3. 优化全屏下的布局和显示
 * 4. 适配安全区域（刘海屏、药丸屏）
 *
 * v1.5.1 (2026-05-22) 重点修复（用户反馈 OPPO Chrome 强制全屏微信聊天发消息闪屏 / 短暂全黑屏）：
 *   - :fullscreen #chat-page 显式锁定不透明 #f2f2f2 背景 + isolation: isolate，
 *     形成独立层叠上下文，阻断 OPPO ColorOS Chromium 合成层重建时透出 ::backdrop 黑色；
 *   - :fullscreen #app 显式 background-color: #ffffff !important 兜底，
 *     防止 transform: translateZ(0) 让 #app 背景走 alpha 通道；
 *   - :fullscreen #chat-page.active .chat-content 用 will-change: scroll-position +
 *     scrollbar-gutter: stable，让滚动容器保持稳定合成层。
 *
 * v1.5.0 (2026-05-22) 重点修复（用户反馈 OPPO PKV100 / OPPO Find X9 Pro Chrome/Edge 全屏底部留空）：
 *   - :fullscreen #app 显式补全 width/height/max-width/min-height/max-height/margin/
 *     border-radius/box-shadow 重置，让 #app 真正铺满 fullscreen 元素；
 *   - body.ios-fullscreen-mode #app 同步补 max-width/min-width/margin/border-radius/box-shadow，
 *     双路径一致；
 *   - 用 100% × 100% 替代 100vh / 100dvh，绕过 Chromium 在 fullscreen 下 vh 单位偶发偏差。
 *
 * v1.1.0 (2026-05-21) 修复要点：
 *   - 解决「强制全屏」下发消息/收消息/选表情/打开更多面板时一闪黑色全屏遮罩问题
 *   - 移除全局通配符 transform: translateZ(0)（原会给所有后代强制提升 GPU 层，
 *     导致 DOM 改动时浏览器频繁重建合成层，瞬间露出全屏 ::backdrop 的黑色）
 *   - 显式覆盖 :fullscreen ::backdrop / ::-webkit-full-screen-backdrop 为白色
 *   - 收紧 transition，避免 `transition: all` 引发非预期属性动画
 *   - 关键聊天容器锁定不透明背景，杜绝层栈刷新时透出黑色
 *
 * v1.2.0/v1.3.0 (2026-05-21)：
 *   - iOS Safari 强制全屏下底部功能栏「整块空白」修复（chat-input-area
 *     backdrop-filter 失效 / cqw 容器查询失效兜底）
 *
 * v1.4.0 (2026-05-22) 重点修复（用户反馈 iPhone Safari 强制全屏后）：
 *   - 微信列表头像被「重置」（背景图丢失退化为首字母占位）
 *   - 进入聊天历史不显示（chat-content 空白）
 *   - 新发新收消息不上屏，仅心跳监控正常
 *
 *   修复手段：
 *   1) iOS CSS 模拟全屏（body.ios-fullscreen-mode）下把 chat-content 与
 *      #chat-page 的 `contain: layout paint` 收紧为 `contain: layout`，
 *      避免 iOS Safari 合成层失效时把子节点（气泡 / 头像）误判为「无需绘制」；
 *   2) 标准全屏（:fullscreen / :-webkit-full-screen，安卓 + 桌面）仍保留
 *      原 `contain: layout paint` 抗黑色闪屏，不引入回归；
 *   3) 全屏下显式锁定 .wechat-chat-avatar / .chat-message-avatar / .chat-avatar-img
 *      的尺寸、圆形、不透明兜底底色，避免 background-image 失效后整个头像看不见；
 *   4) chat-content / chat-message / chat-message-bubble 全屏下显式
 *      visibility:visible，配合 ios-safari-chat-recovery.js 的恢复逻辑兜底；
 *   5) body[data-ios-chat-recovery="1"] 临时态属性：JS 恢复期间触发的
 *      contain:none + transform:none，让 Safari 重新做一次完整布局。
 *
 * 兼容浏览器：Chrome / Edge / iOS Safari / Via / 雨见 / 搜狗 / 夸克
 *           （及小米/华为/魅族/三星/vivo 系自带浏览器内核）
 */

/* ================================================================== */
/* 0) 全屏 ::backdrop 必须强制为白色（默认是黑色）                     */
/*    所有支持原生 Fullscreen API 的浏览器都会在全屏元素后绘制一层    */
/*    ::backdrop 伪元素。任何 reflow / 合成层重建瞬间都会透出该层；   */
/*    将它改成白色即可彻底消除「黑色闪屏」根因。                       */
/* ================================================================== */
:fullscreen::backdrop,
:-webkit-full-screen::backdrop,
:-moz-full-screen::backdrop,
:-ms-fullscreen::backdrop {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 部分老 WebKit 走的是独立的 ::-webkit-full-screen-backdrop 选择器 */
::-webkit-full-screen-backdrop {
    background-color: #ffffff !important;
}

/* ========== iOS全屏模式样式 ========== */
html.ios-fullscreen-mode,
body.ios-fullscreen-mode {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* iOS Safari 模拟全屏：根元素必须不透明白底，否则布局变化时露出系统黑底 */
    background-color: #ffffff !important;
}

body.ios-fullscreen-mode {
    /* 使用100vh而不是100dvh，确保覆盖整个视口 */
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100vh !important;
}

/* iOS全屏模式下的主容器：补一层不透明白色，防止任何透明子层透出 */
body.ios-fullscreen-mode #app {
    width: 100%;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff !important;
}

/* ========== 标准全屏API样式 ========== */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* 注意：必须是单色，不要用 linear-gradient，
       否则浏览器对全屏元素 + ::backdrop 的合成处理在部分机型上仍会瞬间透出黑色 */
    background-color: #ffffff;
    background-image: none;
}

/* 全屏模式下的body */
:fullscreen body,
:-webkit-full-screen body,
:-moz-full-screen body,
:-ms-fullscreen body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

/* 全屏元素的直接子节点（body / #app）也需要不透明背景兜底 */
:fullscreen #app,
:-webkit-full-screen #app,
:-moz-full-screen #app,
:-ms-fullscreen #app {
    background-color: #ffffff;
}

/* ================================================================== */
/* v1.5.0 (2026-05-22) 重点修复                                        */
/*                                                                    */
/* 用户反馈：OPPO PKV100 / OPPO Find X9 Pro 等 ColorOS 系机型，使用    */
/* Chrome / Edge 浏览器开启 love咪 强制全屏后，底部仍露出 body 的渐变 */
/* 绿色背景（约 80~160px 高的空白），未真正铺满。                      */
/*                                                                    */
/* 根因：style.css 默认 `#app { max-width: 480px; margin: 0 auto;     */
/* border-radius: 24px; box-shadow: ...; min-height: 100dvh; height:  */
/* 100%; max-height: 100dvh; }`；在 :fullscreen 状态下，               */
/*   - 部分国产 Chromium（ColorOS）上 `100dvh` / `100vh` 不一定等于    */
/*     fullscreen 元素的实际可用高度（系统状态栏 / 导航条参与计算时    */
/*     可能偏小），#app 的 max-height 限制让它矮于 body；             */
/*   - 桌面响应式（@media min-width: 481px）下 #app 还有 margin-top/   */
/*     margin-bottom: 20px + max-height: calc(100vh - 40px)，全屏下    */
/*     这些边距也应该归零。                                            */
/*                                                                    */
/* 修复：在 :fullscreen 状态下显式让 #app 等宽等高于 body，去掉桌面   */
/* 边距 / 圆角 / 阴影 / 480px 最大宽度限制，真正"沉浸式撑满"。         */
/* 用 100% × 100% 替代 100vh / 100dvh，绕开 Chromium 在 fullscreen    */
/* 下对 vh 单位计算偶发偏差的内核 bug。                                */
/*                                                                    */
/* 兼容矩阵：                                                           */
/*   iOS Safari / Chrome iOS：走 ios-fullscreen-mode 路径（下文专项）； */
/*   三星 Galaxy Chrome：走 :fullscreen，本规则保障                    */
/*   OPPO Chrome / Edge：走 :fullscreen，本规则修复用户问题             */
/*   华为 / 小米 / vivo / 魅族（含 Via）：走 :fullscreen                */
/*   桌面 Chrome / Edge / Firefox：走 :fullscreen                       */
/* ================================================================== */
:fullscreen #app,
:-webkit-full-screen #app,
:-moz-full-screen #app,
:-ms-fullscreen #app {
    /* 完全撑满 fullscreen 元素，清掉桌面 / 移动默认的 max-width / 边距 / 圆角 / 阴影 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* 注意：不显式加 padding-top/bottom = env(safe-area-inset-*)。
       全屏路径下用户期望的是"沉浸式"——内容延伸到状态栏 / 手势条背后；
       内部需要安全区适配的组件（顶部状态条 / 底部导航）各自已用 env() 自行处理。
       仅保留左右安全区（与 style.css 原 #app 规则一致）。 */
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
}

/* iOS Safari CSS 模拟全屏路径：同步铺满，避免 480px / margin 残留 */
body.ios-fullscreen-mode #app {
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ========== 全屏模式下的页面容器优化 ========== */
body.ios-fullscreen-mode .phone-container,
:fullscreen .phone-container,
:-webkit-full-screen .phone-container,
:-moz-full-screen .phone-container,
:-ms-fullscreen .phone-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ========== 全屏模式下隐藏不必要的元素 ========== */
body.ios-fullscreen-mode .decorative-element,
:fullscreen .decorative-element,
:-webkit-full-screen .decorative-element,
:-moz-full-screen .decorative-element,
:-ms-fullscreen .decorative-element {
    display: none;
}

/* ========== 安全区域适配 ========== */
body.ios-fullscreen-mode {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ========== 全屏模式下的状态栏优化 ========== */
body.ios-fullscreen-mode .status-bar,
:fullscreen .status-bar,
:-webkit-full-screen .status-bar,
:-moz-full-screen .status-bar,
:-ms-fullscreen .status-bar {
    top: env(safe-area-inset-top, 0);
}

/* ========== 全屏模式下的底部导航优化 ========== */
body.ios-fullscreen-mode .bottom-nav,
body.ios-fullscreen-mode .wechat-tabbar,
body.ios-fullscreen-mode .wechat-bottom-nav,
:fullscreen .bottom-nav,
:fullscreen .wechat-tabbar,
:fullscreen .wechat-bottom-nav,
:-webkit-full-screen .bottom-nav,
:-webkit-full-screen .wechat-tabbar,
:-webkit-full-screen .wechat-bottom-nav {
    bottom: env(safe-area-inset-bottom, 0);
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}

/* ========== 全屏模式下的滚动优化 ========== */
body.ios-fullscreen-mode {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* ========== 全屏模式指示器（短暂显示后淡出） ========== */
body.ios-fullscreen-mode::after,
:fullscreen body::after,
:-webkit-full-screen body::after,
:-moz-full-screen body::after,
:-ms-fullscreen body::after {
    content: '';
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.ios-fullscreen-mode.fullscreen-just-entered::after,
:fullscreen body.fullscreen-just-entered::after,
:-webkit-full-screen body.fullscreen-just-entered::after,
:-moz-full-screen body.fullscreen-just-entered::after,
:-ms-fullscreen body.fullscreen-just-entered::after {
    opacity: 1;
    animation: fullscreenIndicatorFade 2s ease forwards;
}

@keyframes fullscreenIndicatorFade {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ========== 横屏模式优化 ========== */
@media (orientation: landscape) {
    body.ios-fullscreen-mode,
    :fullscreen body,
    :-webkit-full-screen body,
    :-moz-full-screen body,
    :-ms-fullscreen body {
        /* 保留扩展点 */
    }
}

/* ========== 全屏模式下的弹窗和模态框优化 ========== */
body.ios-fullscreen-mode .modal,
body.ios-fullscreen-mode .dialog,
:fullscreen .modal,
:fullscreen .dialog,
:-webkit-full-screen .modal,
:-webkit-full-screen .dialog {
    position: fixed;
    z-index: 10000;
}

/* ========== 全屏模式下的输入框优化（防止iOS输入框聚焦时页面缩放） ========== */
body.ios-fullscreen-mode input,
body.ios-fullscreen-mode textarea,
:fullscreen input,
:fullscreen textarea,
:-webkit-full-screen input,
:-webkit-full-screen textarea {
    font-size: 16px;
}

/* ========== PWA模式下的全屏优化 ========== */
@media (display-mode: standalone) {
    body {
        overscroll-behavior-y: contain;
    }
}

/* ================================================================== */
/* 关键修复：移除原 `body.ios-fullscreen-mode *` / `:fullscreen *`     */
/* 通配符 translateZ(0)。                                              */
/*                                                                    */
/* 原规则会给上万个后代节点强制提升独立 GPU 合成层，每次发消息/收消息/ */
/* 表情/更多面板 display 切换时浏览器要重建大量合成层；这个过程在     */
/* 部分国产浏览器内核（vivo / 雨见 / 搜狗 / 夸克 / 小米浏览器）和    */
/* iOS Safari 上会瞬间露出 fullscreen 的黑色 ::backdrop，肉眼即「闪屏」。 */
/*                                                                    */
/* 改为「仅在用户实际滑动/动画的关键容器」上做层提升，避免广义层爆炸。 */
/*                                                                    */
/* v1.4.0 (2026-05-22) 进一步修复（用户反馈 iPhone Safari 全屏后聊天   */
/* 列表头像被「重置」、聊天历史不显示、新发新收消息不上屏）：           */
/*   - 仅对 iOS CSS 模拟全屏（body.ios-fullscreen-mode）放宽 contain，*/
/*     从原 `layout paint` 改为 `layout` 单项。`contain: paint` 在     */
/*     iOS Safari 合成层失效时会把整个 chat-content 当成「不再需要     */
/*     绘制」，新插入的气泡画到看不见的虚拟区域。                     */
/*   - 安卓 / 桌面浏览器走标准 :fullscreen 路径，仍保留原                */
/*     `contain: layout paint` 不变，避免之前的「黑色一闪」问题回归。   */
/* ================================================================== */

/* (1) iOS Safari 模拟全屏专用：放宽 contain，确保 chat-content 子节点可见 */
body.ios-fullscreen-mode #app {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* iOS Safari 全屏下用 contain:layout（不加 paint） */
    contain: layout;
}

body.ios-fullscreen-mode #chat-page {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 显式锁定不透明背景，避免合成层重建瞬间穿透到下层 */
    background-color: #f2f2f2;
    min-height: 100% !important;
    /* iOS Safari 模拟全屏下不加 contain，让 chat-content 子节点参与正常布局 */
}

/* (2) 安卓 / 桌面浏览器标准全屏：保留原 `contain: layout paint`，
       防止之前修复过的「发消息/收消息/选表情/打开更多面板时一闪黑色」回归 */
:fullscreen #app,
:fullscreen #chat-page,
:-webkit-full-screen #app,
:-webkit-full-screen #chat-page,
:-moz-full-screen #app,
:-moz-full-screen #chat-page,
:-ms-fullscreen #app,
:-ms-fullscreen #chat-page {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout paint;
}

/* (3) v1.5.1 OPPO ColorOS Chrome 闪屏加固：
   用户反馈："每发出一条消息，全屏界面闪屏，有时短暂全黑屏"。
   根因：OPPO Chromium 内核在 chat-content 自动滚到底（appendPersistedLiveMessage 末尾会
   触发 scrollIntoView/scrollTop 写入）瞬间，会重建 #chat-page 的合成层；如果父层 #app
   仍有微小的透明合成（rgba α<1），瞬间会透出浏览器 fullscreen ::backdrop 的黑色。
   修复：
   1) 显式锁定 #chat-page 不透明背景（与 ios-fullscreen-mode 一致用 #f2f2f2 兜底）；
   2) 让 #chat-page 形成独立层叠上下文（isolation:isolate），阻断 backdrop 透出；
   3) 仅在全屏 + chat-page 当前 active 时把滚动容器 chat-content 提示为
      will-change:scroll-position，让浏览器把滚动绘制保留在一个稳定合成层里。
   全部依赖 :fullscreen 状态选择器，普通模式 / 非聊天页 / 非全屏完全零开销。 */
:fullscreen #chat-page,
:-webkit-full-screen #chat-page,
:-moz-full-screen #chat-page,
:-ms-fullscreen #chat-page {
    background-color: #f2f2f2 !important;
    isolation: isolate;
}

:fullscreen #chat-page.active .chat-content,
:-webkit-full-screen #chat-page.active .chat-content,
:-moz-full-screen #chat-page.active .chat-content,
:-ms-fullscreen #chat-page.active .chat-content {
    /* 让浏览器为滚动容器预先准备一个稳定合成层（OPPO/三星/小米 实测闪屏概率显著降低）。
       不在非全屏 / 非聊天页生效，避免常驻 GPU 内存开销。 */
    will-change: scroll-position;
    /* 滚动条不显示时不要让 scrollbar gutter 残留 reflow */
    scrollbar-gutter: stable both-edges;
}

/* (4) 标准全屏 + 聊天页 active 时，#app 显式不透明背景兜底（与 :fullscreen #app 撑满规则配合）。
   #app 默认有 background-color: #fff，但在某些 ColorOS Chrome 版本上 transform: translateZ(0)
   会让 background 渲染走 alpha 通道，瞬间露出 backdrop 黑色。显式 !important 锁死。 */
:fullscreen #app,
:-webkit-full-screen #app,
:-moz-full-screen #app,
:-ms-fullscreen #app {
    background-color: #ffffff !important;
}

/* ================================================================== */
/* 抗闪屏：聊天底栏 + 表情面板 + 更多功能面板 + 聊天内容             */
/*                                                                    */
/* 表情/更多面板的 display: none ↔ display: block 切换会触发回流，     */
/* 之前因父链上的合成层很多，回流瞬间会露出黑色 backdrop。            */
/* 现在通过：                                                         */
/*   1) 为这些容器锁定不透明背景；                                    */
/*   2) 用 contain:paint 圈住，使切换时不影响外层；                  */
/*   3) 用 transform/opacity 而非 display 进行平滑过渡（show 时仍走  */
/*      原 display 切换，但加 contain 防止外溢回流）。                */
/* 一并解决发消息 / 收消息插入新气泡时的闪屏。                        */
/* ================================================================== */
body.ios-fullscreen-mode #chat-page .chat-bottom-composer,
:fullscreen #chat-page .chat-bottom-composer,
:-webkit-full-screen #chat-page .chat-bottom-composer,
:-moz-full-screen #chat-page .chat-bottom-composer,
:-ms-fullscreen #chat-page .chat-bottom-composer {
    contain: layout paint;
    background-color: rgba(255, 255, 255, 0.001); /* 极弱不透明色：阻止透明合成 */
    /* 关键修复：确保在全屏模式下聊天底部组件始终可见且可操作 */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    position: relative !important;
    z-index: 100 !important;
}

/* (a) iOS Safari 模拟全屏：放宽 contain，仅用 layout 单项 */
body.ios-fullscreen-mode #chat-page .chat-content {
    /* v1.4.0：iOS Safari 模拟全屏下把原 `contain: layout paint` 收紧为
       `contain: layout`。原 `contain: paint` 会让 iOS Safari 在合成层
       重建瞬间把 chat-content 内的所有子节点（消息气泡）当成「无须绘制」，
       新插入的气泡被画到看不见的虚拟区域。仅用 `contain: layout` 即可达到
       「不影响外层回流」的目的，气泡可见性恢复。 */
    contain: layout;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent;
}

/* (b) 安卓 / 桌面浏览器标准全屏：保留原 `contain: layout paint` 抗闪屏 */
:fullscreen #chat-page .chat-content,
:-webkit-full-screen #chat-page .chat-content,
:-moz-full-screen #chat-page .chat-content,
:-ms-fullscreen #chat-page .chat-content {
    contain: layout paint;
}

/* 确保聊天输入区域在全屏模式下可见且可操作 */
body.ios-fullscreen-mode #chat-page .chat-input-area,
:fullscreen #chat-page .chat-input-area,
:-webkit-full-screen #chat-page .chat-input-area,
:-moz-full-screen #chat-page .chat-input-area,
:-ms-fullscreen #chat-page .chat-input-area {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    position: relative !important;
    z-index: 101 !important;
}

/* 确保所有聊天功能按钮在全屏模式下可见且可点击 */
body.ios-fullscreen-mode #chat-page .chat-function-btn,
body.ios-fullscreen-mode #chat-page .emoji-btn,
body.ios-fullscreen-mode #chat-page .more-btn,
body.ios-fullscreen-mode #chat-page .send-btn,
body.ios-fullscreen-mode #chat-page .receive-btn,
:fullscreen #chat-page .chat-function-btn,
:fullscreen #chat-page .emoji-btn,
:fullscreen #chat-page .more-btn,
:fullscreen #chat-page .send-btn,
:fullscreen #chat-page .receive-btn,
:-webkit-full-screen #chat-page .chat-function-btn,
:-webkit-full-screen #chat-page .emoji-btn,
:-webkit-full-screen #chat-page .more-btn,
:-webkit-full-screen #chat-page .send-btn,
:-webkit-full-screen #chat-page .receive-btn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
}

/* 确保聊天输入框在全屏模式下可见且可用 */
body.ios-fullscreen-mode #chat-page .chat-input,
:fullscreen #chat-page .chat-input,
:-webkit-full-screen #chat-page .chat-input,
:-moz-full-screen #chat-page .chat-input,
:-ms-fullscreen #chat-page .chat-input {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
}

/* 表情面板（display:none ↔ display:block 切换）：圈住自身绘制范围 */
body.ios-fullscreen-mode #chat-page .emoji-panel,
:fullscreen #chat-page .emoji-panel,
:-webkit-full-screen #chat-page .emoji-panel,
:-moz-full-screen #chat-page .emoji-panel,
:-ms-fullscreen #chat-page .emoji-panel {
    contain: layout paint;
    background-color: #ffffff;
}

/* 更多功能面板（位置 absolute + display 切换）：同样圈住 */
body.ios-fullscreen-mode #chat-page .chat-more-panel,
:fullscreen #chat-page .chat-more-panel,
:-webkit-full-screen #chat-page .chat-more-panel,
:-moz-full-screen #chat-page .chat-more-panel,
:-ms-fullscreen #chat-page .chat-more-panel {
    contain: layout paint;
    /* 原是 rgba(255,255,255,0.5) + backdrop-filter，全屏下 backdrop-filter 在
       部分国产浏览器中触发合成层失效→透出黑色；提高不透明度并兜底 background-color */
    background-color: rgba(255, 255, 255, 0.92) !important;
}

/* 好友手机里的聊天容器同样处理（避免「好友手机」侧的微信也闪屏） */
body.ios-fullscreen-mode .friend-phone-char-chat-root,
body.ios-fullscreen-mode .friend-phone-char-composer-wrap,
body.ios-fullscreen-mode .phone-wx-chat-screen,
:fullscreen .friend-phone-char-chat-root,
:fullscreen .friend-phone-char-composer-wrap,
:fullscreen .phone-wx-chat-screen,
:-webkit-full-screen .friend-phone-char-chat-root,
:-webkit-full-screen .friend-phone-char-composer-wrap,
:-webkit-full-screen .phone-wx-chat-screen {
    contain: layout paint;
    background-color: rgba(255, 255, 255, 0.001);
}

/* ================================================================== */
/* 全屏切换瞬间的「闪屏锁」                                            */
/* 由 fullscreen-manager.js 在 enter/exit 时临时挂上 body 类           */
/* 此期间冻结所有过渡，避免「transition」属性意外引入半透明动画         */
/* ================================================================== */
body.lovemi-fullscreen-transitioning,
body.lovemi-fullscreen-transitioning * {
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

/* ================================================================== */
/* 兼容性修复：把全屏元素背景兜底为白色                                */
/* ================================================================== */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
    background-color: #fff;
}

/* 修复某些浏览器全屏时的滚动条问题 */
body.ios-fullscreen-mode::-webkit-scrollbar,
:fullscreen::-webkit-scrollbar,
:-webkit-full-screen::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ================================================================== */
/* Safari全屏模式专项修复：确保聊天页面底部组件始终可见可用           */
/* 问题：在iOS Safari全屏后，chat-bottom-composer可能被隐藏或定位异常 */
/* 解决：强制设置可见性、显示状态和定位，覆盖可能的冲突规则           */
/* v1.2.0 (2026-05-21) 针对iOS Safari底部功能栏空白问题的增强修复     */
/* ================================================================== */

/* 确保聊天页面本身在全屏模式下正确显示 */
body.ios-fullscreen-mode #chat-page,
:fullscreen #chat-page,
:-webkit-full-screen #chat-page,
:-moz-full-screen #chat-page,
:-ms-fullscreen #chat-page {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* 确保聊天内容区域不会占满整个空间，为底部组件留出空间 */
body.ios-fullscreen-mode #chat-page .chat-content,
:fullscreen #chat-page .chat-content,
:-webkit-full-screen #chat-page .chat-content,
:-moz-full-screen #chat-page .chat-content,
:-ms-fullscreen #chat-page .chat-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* 为底部功能栏预留足够空间，避免内容被遮挡 */
    padding-bottom: max(80px, env(safe-area-inset-bottom, 0px)) !important;
}

/* 强制聊天底部组件在全屏模式下可见且固定在底部 */
body.ios-fullscreen-mode #chat-page .chat-bottom-composer,
:fullscreen #chat-page .chat-bottom-composer,
:-webkit-full-screen #chat-page .chat-bottom-composer,
:-moz-full-screen #chat-page .chat-bottom-composer,
:-ms-fullscreen #chat-page .chat-bottom-composer {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 60px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    z-index: 100 !important;
    /* 关键修复：确保背景不透明，避免iOS Safari渲染问题 */
    background-color: #f7f7f7 !important;
    /* 添加底部安全区域适配 */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

/* 确保输入区域在全屏模式下完全可见可用 */
body.ios-fullscreen-mode #chat-page .chat-input-area,
:fullscreen #chat-page .chat-input-area,
:-webkit-full-screen #chat-page .chat-input-area,
:-moz-full-screen #chat-page .chat-input-area,
:-ms-fullscreen #chat-page .chat-input-area {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
}

/* 确保所有功能按钮在全屏模式下可见可点击 */
body.ios-fullscreen-mode #chat-page .chat-function-btn,
body.ios-fullscreen-mode #chat-page .emoji-btn,
body.ios-fullscreen-mode #chat-page .more-btn,
body.ios-fullscreen-mode #chat-page .send-btn,
body.ios-fullscreen-mode #chat-page .receive-btn,
:fullscreen #chat-page .chat-function-btn,
:fullscreen #chat-page .emoji-btn,
:fullscreen #chat-page .more-btn,
:fullscreen #chat-page .send-btn,
:fullscreen #chat-page .receive-btn,
:-webkit-full-screen #chat-page .chat-function-btn,
:-webkit-full-screen #chat-page .emoji-btn,
:-webkit-full-screen #chat-page .more-btn,
:-webkit-full-screen #chat-page .send-btn,
:-webkit-full-screen #chat-page .receive-btn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    min-width: 32px !important;
    min-height: 32px !important;
    /* 确保按钮在iOS Safari上可点击 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    touch-action: manipulation !important;
}

body.ios-fullscreen-mode #chat-page:not(.chat-page--mention-enabled) #chat-mention-btn,
:fullscreen #chat-page:not(.chat-page--mention-enabled) #chat-mention-btn,
:-webkit-full-screen #chat-page:not(.chat-page--mention-enabled) #chat-mention-btn,
:-moz-full-screen #chat-page:not(.chat-page--mention-enabled) #chat-mention-btn,
:-ms-fullscreen #chat-page:not(.chat-page--mention-enabled) #chat-mention-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 确保输入框本身可见可用 */
body.ios-fullscreen-mode #chat-page .chat-input,
body.ios-fullscreen-mode #chat-page #chat-input,
:fullscreen #chat-page .chat-input,
:fullscreen #chat-page #chat-input,
:-webkit-full-screen #chat-page .chat-input,
:-webkit-full-screen #chat-page #chat-input,
:-moz-full-screen #chat-page .chat-input,
:-moz-full-screen #chat-page #chat-input,
:-ms-fullscreen #chat-page .chat-input,
:-ms-fullscreen #chat-page #chat-input {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    min-height: 36px !important;
    flex: 1 1 auto !important;
}

/* 确保表情面板和更多功能面板在全屏模式下能正常显示 */
body.ios-fullscreen-mode #chat-page .emoji-panel,
body.ios-fullscreen-mode #chat-page .chat-more-panel,
:fullscreen #chat-page .emoji-panel,
:fullscreen #chat-page .chat-more-panel,
:-webkit-full-screen #chat-page .emoji-panel,
:-webkit-full-screen #chat-page .chat-more-panel,
:-moz-full-screen #chat-page .emoji-panel,
:-moz-full-screen #chat-page .chat-more-panel,
:-ms-fullscreen #chat-page .emoji-panel,
:-ms-fullscreen #chat-page .chat-more-panel {
    pointer-events: auto !important;
}

/* 当表情面板显示时，确保它可见 */
body.ios-fullscreen-mode #chat-page .emoji-panel.show,
:fullscreen #chat-page .emoji-panel.show,
:-webkit-full-screen #chat-page .emoji-panel.show,
:-moz-full-screen #chat-page .emoji-panel.show,
:-ms-fullscreen #chat-page .emoji-panel.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 当更多功能面板显示时，确保它可见 */
body.ios-fullscreen-mode #chat-page .chat-more-panel.show,
:fullscreen #chat-page .chat-more-panel.show,
:-webkit-full-screen #chat-page .chat-more-panel.show,
:-moz-full-screen #chat-page .chat-more-panel.show,
:-ms-fullscreen #chat-page .chat-more-panel.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ================================================================== */
/* 注意：原文件中存在 `body.ios-fullscreen-mode, html.ios-fullscreen-mode { transition: all 0.3s ease; }` */
/* 已删除。`transition: all` 会让 background / color / transform 等属性都跟随动画， */
/* 在某些机型上结合 DOM 改动会触发短暂淡入淡出，肉眼表现为「灰一闪 + 黑一闪」。 */
/* 全屏切换的视觉过渡改为只在容器上做 background-color 过渡（如有需要）。 */
/* ================================================================== */

/* ================================================================== */
/* v1.3.0 (2026-05-21) 重点修复                                        */
/*                                                                    */
/* 用户反馈：iPhone Safari 强制全屏后，微信聊天底部「↓/☺/@/+/▶」一整 */
/* 排功能按钮看上去整块空白，只能看见输入框 placeholder。              */
/*                                                                    */
/* 根因（综合排查）：                                                   */
/*   1. `.chat-input-area` 用 `backdrop-filter: blur(10px)` + 灰紫色   */
/*      半透明背景；iOS Safari CSS 模拟全屏（body position:fixed）下  */
/*      合成层布局变化，backdrop-filter 在部分机型上会渲染失效，背景 */
/*      退化为完全透明。                                              */
/*   2. 按钮自身是白色半透明 + 浅色边框，背景一旦透明就在白色页面上  */
/*      "隐身"。                                                       */
/*   3. 按钮尺寸用 `clamp(26px, 9cqw, 36px)` 容器查询单位；iOS Safari */
/*      在 body.position:fixed + viewport-fit:cover 的瞬间，容器查询  */
/*      重算窗口可能短暂返回 0，按钮被压缩到不可见。                  */
/*                                                                    */
/* 修复策略（不影响安卓/Chromium 主流浏览器、不破坏普通模式视觉）：    */
/*   A. 全屏模式下 `.chat-input-area` 改用纯渐变背景，不依赖           */
/*      backdrop-filter；保持原视觉风格（毛玻璃灰紫感）。              */
/*   B. 全屏模式下 `.chat-function-btn` 强制 36px 像素尺寸、深色 1px  */
/*      边框、底色 #ffffff，确保在任意背景下高对比度可见。            */
/*   C. 全屏模式下 SVG `.chat-function-icon` 强制 18px / 深色 stroke。 */
/*   D. 通过 `@supports not (backdrop-filter)` 对老内核（部分国产浏  */
/*      览器、Via、低版本 Safari）做无前缀兜底，全设备一致。          */
/*   E. 通过 `@supports not (width: 1cqw)` 对不支持容器查询单位的    */
/*      浏览器把 cqw → px 兜底（与 v1.1 已有 vw 兜底并存）。          */
/*                                                                    */
/* 覆盖矩阵：                                                          */
/*   iPhone Safari / Chrome iOS / Edge iOS                            */
/*   华为(HarmonyOS) / 小米 / OPPO / 魅族 / vivo / 三星 自带浏览器    */
/*   Via / 谷歌 Chrome / Edge / 搜狗 / 雨见 / 夸克                    */
/* ================================================================== */

/* A) 全屏（含 iOS 模拟全屏 + 标准 :fullscreen + 任何浏览器自身全屏 API） */
/*    下，把 chat-input-area 的灰紫毛玻璃换成纯渐变，不依赖 backdrop-filter */
body.ios-fullscreen-mode #chat-page .chat-input-area,
:fullscreen #chat-page .chat-input-area,
:-webkit-full-screen #chat-page .chat-input-area,
:-moz-full-screen #chat-page .chat-input-area,
:-ms-fullscreen #chat-page .chat-input-area {
    /* 用线性渐变模拟原毛玻璃的灰紫底色，避免 backdrop-filter 渲染失效后变透明 */
    background: linear-gradient(180deg, rgba(232, 230, 238, 0.97), rgba(218, 215, 226, 0.97)) !important;
    /* 即使浏览器仍支持 backdrop-filter，全屏下也建议关闭，避免重叠合成 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* 兜底：cqw 计算异常时用 px 锁定尺寸 */
    --chat-tool-btn: 36px !important;
    --chat-tool-icon: 18px !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    min-height: 56px !important;
    align-items: center !important;
    border-radius: 20px 20px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* B) 全屏模式下，强制功能按钮像素尺寸 + 深色边框 + 不透明白色底，确保肉眼可见 */
body.ios-fullscreen-mode #chat-page .chat-function-btn,
:fullscreen #chat-page .chat-function-btn,
:-webkit-full-screen #chat-page .chat-function-btn,
:-moz-full-screen #chat-page .chat-function-btn,
:-ms-fullscreen #chat-page .chat-function-btn {
    /* px 兜底；同时保留 inline-flex 防止被全局 reset 误置 display */
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    /* 不透明白底 + 灰紫深边框，保证在任何底色上都看得清 */
    background: #ffffff !important;
    border: 1px solid rgba(120, 124, 138, 0.55) !important;
    color: #1a1a1a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    /* 触摸反馈：iOS Safari/各国产浏览器都生效 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* B.1) 接收按钮 / 发送按钮品牌色高亮（保持原"接收/发送"识别度） */
body.ios-fullscreen-mode #chat-page .chat-function-btn.receive-btn,
:fullscreen #chat-page .chat-function-btn.receive-btn,
:-webkit-full-screen #chat-page .chat-function-btn.receive-btn {
    background: linear-gradient(135deg, #ffffff, #f3f1f8) !important;
    border-color: rgba(123, 134, 166, 0.6) !important;
    color: #4a5572 !important;
}
body.ios-fullscreen-mode #chat-page .chat-function-btn.send-btn,
:fullscreen #chat-page .chat-function-btn.send-btn,
:-webkit-full-screen #chat-page .chat-function-btn.send-btn {
    background: linear-gradient(135deg, #667a96, #7e6f97) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

/* B.2) "@" 文字按钮在全屏下保持文字粗细可读 */
body.ios-fullscreen-mode #chat-page .chat-function-btn.chat-mention-btn,
:fullscreen #chat-page .chat-function-btn.chat-mention-btn,
:-webkit-full-screen #chat-page .chat-function-btn.chat-mention-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #1a1a1a !important;
}

/* C) SVG 图标在全屏下强制 px 尺寸 + 高对比 currentColor */
body.ios-fullscreen-mode #chat-page .chat-function-icon,
:fullscreen #chat-page .chat-function-icon,
:-webkit-full-screen #chat-page .chat-function-icon,
:-moz-full-screen #chat-page .chat-function-icon,
:-ms-fullscreen #chat-page .chat-function-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0 !important;
    display: block !important;
    pointer-events: none !important;
    color: currentColor !important;
    overflow: visible !important;
}

/* C.1) 发送按钮内的 SVG 用白色（适配品牌色底） */
body.ios-fullscreen-mode #chat-page .chat-function-btn.send-btn .chat-function-icon,
:fullscreen #chat-page .chat-function-btn.send-btn .chat-function-icon,
:-webkit-full-screen #chat-page .chat-function-btn.send-btn .chat-function-icon {
    color: #ffffff !important;
}

/* D) 输入框 textarea 在全屏下：白底 + 灰边、占据剩余空间，确保"输入"始终可用 */
body.ios-fullscreen-mode #chat-page textarea.chat-input,
body.ios-fullscreen-mode #chat-page .chat-input,
:fullscreen #chat-page textarea.chat-input,
:fullscreen #chat-page .chat-input,
:-webkit-full-screen #chat-page textarea.chat-input,
:-webkit-full-screen #chat-page .chat-input,
:-moz-full-screen #chat-page textarea.chat-input,
:-ms-fullscreen #chat-page textarea.chat-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    max-height: 120px !important;
    padding: 8px 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(120, 124, 138, 0.35) !important;
    border-radius: 18px !important;
    /* iOS 防止聚焦时页面缩放：>=16px 才能避免缩放 */
    font-size: 16px !important;
    line-height: 1.45 !important;
    color: #1a1a1a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    /* 关闭 backdrop-filter 避免渲染失效后变透明 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ================================================================== */
/* E) 全设备 backdrop-filter 不支持时的兜底（不限全屏）：              */
/*    部分 Via / 老版 Edge / 部分国产浏览器低版本内核无 backdrop-filter， */
/*    会让 chat-input-area 直接透明；这里全局做无前缀的纯色兜底。     */
/* ================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #chat-page .chat-input-area {
        background: linear-gradient(180deg, #e8e6ee, #d8d6e0) !important;
    }
    #chat-page .chat-function-btn {
        background: #ffffff !important;
        border: 1px solid rgba(120, 124, 138, 0.4) !important;
        color: #1a1a1a !important;
    }
    #chat-page .chat-function-btn.send-btn {
        background: linear-gradient(135deg, #667a96, #7e6f97) !important;
        color: #ffffff !important;
    }
    #chat-page textarea.chat-input,
    #chat-page .chat-input {
        background: #ffffff !important;
    }
}

/* ================================================================== */
/* F) 容器查询单位 cqw 不支持/计算异常时的兜底（与 style.css 中的 vw  */
/*    兜底并存；这里专门把按钮尺寸锁回 px，避免按钮被压成 0 宽）       */
/* ================================================================== */
@supports not (width: 1cqw) {
    #chat-page .chat-input-area {
        --chat-tool-btn: 32px;
        --chat-tool-icon: 16px;
        padding: 8px 12px;
        gap: 8px;
    }
    #chat-page .chat-function-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
    #chat-page .chat-function-icon {
        width: 16px;
        height: 16px;
    }
}

/* ================================================================== */
/* G) 由 JS（ios-chat-composer-fix.js）在检测到 iOS Safari 全屏 + 风险*/
/*    环境时给 <body> 加 `data-ios-composer-guard="1"` 标记。一旦标记 */
/*    出现，强制按钮 + 输入框可见性，作为 CSS 兜底之外的最后一道防线。 */
/* ================================================================== */
body[data-ios-composer-guard="1"] #chat-page .chat-bottom-composer,
body[data-ios-composer-guard="1"] #chat-page .chat-input-area {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
}

body[data-ios-composer-guard="1"] #chat-page .chat-input-area {
    background: linear-gradient(180deg, rgba(232, 230, 238, 0.97), rgba(218, 215, 226, 0.97)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    --chat-tool-btn: 36px !important;
    --chat-tool-icon: 18px !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    min-height: 56px !important;
}

body[data-ios-composer-guard="1"] #chat-page .chat-function-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background: #ffffff !important;
    border: 1px solid rgba(120, 124, 138, 0.55) !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body[data-ios-composer-guard="1"] #chat-page .chat-function-btn.send-btn {
    background: linear-gradient(135deg, #667a96, #7e6f97) !important;
    color: #ffffff !important;
}

body[data-ios-composer-guard="1"] #chat-page .chat-function-icon {
    width: 18px !important;
    height: 18px !important;
    color: currentColor !important;
}

body[data-ios-composer-guard="1"] #chat-page .chat-function-btn.send-btn .chat-function-icon {
    color: #ffffff !important;
}

body[data-ios-composer-guard="1"] #chat-page textarea.chat-input,
body[data-ios-composer-guard="1"] #chat-page .chat-input {
    background: #ffffff !important;
    border: 1px solid rgba(120, 124, 138, 0.35) !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ================================================================== */
/* H) 横屏 + 全屏时进一步收紧间距，避免按钮挤压输入框                  */
/* ================================================================== */
@media (orientation: landscape) and (max-height: 480px) {
    body.ios-fullscreen-mode #chat-page .chat-input-area,
    :fullscreen #chat-page .chat-input-area,
    body[data-ios-composer-guard="1"] #chat-page .chat-input-area {
        padding: 6px 10px !important;
        gap: 6px !important;
        min-height: 48px !important;
        --chat-tool-btn: 32px !important;
        --chat-tool-icon: 16px !important;
    }
    body.ios-fullscreen-mode #chat-page .chat-function-btn,
    :fullscreen #chat-page .chat-function-btn,
    body[data-ios-composer-guard="1"] #chat-page .chat-function-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    body.ios-fullscreen-mode #chat-page .chat-function-icon,
    :fullscreen #chat-page .chat-function-icon,
    body[data-ios-composer-guard="1"] #chat-page .chat-function-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ================================================================== */
/* v1.4.0 (2026-05-22) iPhone Safari 全屏聊天/列表渲染保障             */
/*                                                                    */
/* 用户反馈：iPhone Safari 强制全屏后，                                */
/*   - 微信好友列表头像被「重置」（背景图丢失，回退到首字母）；        */
/*   - 进入聊天历史不显示，                                            */
/*   - 新发新收消息不上屏。                                            */
/*                                                                    */
/* 根因综合：                                                          */
/*   1) 合成层（compositor layer）失效：iOS Safari 在 CSS 模拟全屏的   */
/*      body.position:fixed 切换瞬间，会把已有的合成层缓存判定为       */
/*      「需要重新生成」。配合先前的 `contain: layout paint`，         */
/*      chat-content 内的所有气泡 + chat-list 内的头像 background-     */
/*      image 都会进入「已绘制但不可见」的奇异状态。                   */
/*   2) iOS WebKit 对内联 `background-image: url(data:...)` 在内存压力 */
/*      下有去重/失效行为，全屏切换瞬间会触发该路径，列表里多张头像   */
/*      集体「丢图」。                                                 */
/*                                                                    */
/* 修复手段：                                                          */
/*   A) 全屏下显式声明 .wechat-chat-avatar / .chat-message-avatar 的   */
/*      宽高、圆形、不透明灰色兜底背景，避免 background-image 失效后   */
/*      整个头像变成 0×0 看不见；                                     */
/*   B) 配合 ios-chat-avatar-fix.js 的 <img> 替换路径（仅 iOS 启用），  */
/*      在全屏下额外锁定 .chat-avatar-img 宽高，避免被合成层失效拉伸；  */
/*   C) chat-content 与 chat-message 节点显式 visibility:visible，     */
/*      防止 Safari 的 layer 失效把已渲染气泡误隐藏。                  */
/* ================================================================== */

/* A) 聊天列表头像：全屏下显式锁定尺寸 + 圆形 + 灰色兜底背景 */
body.ios-fullscreen-mode .wechat-chat-list .wechat-chat-avatar,
:fullscreen .wechat-chat-list .wechat-chat-avatar,
:-webkit-full-screen .wechat-chat-list .wechat-chat-avatar {
    /* 显式锁尺寸：避免容器查询失效导致头像被压缩到 0 */
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    /* 兜底底色 + 居中文本（首字母回退）：即使 background-image 失效也至少能看到一个圆形 */
    background-color: rgba(157, 78, 221, 0.16);
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(99, 73, 158, 0.85);
    font-weight: 600;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* 强制合成层独立但不影响布局 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* B) 聊天消息头像：用 background-image（安卓默认路径）和 <img>（iOS 路径）都兜底 */
body.ios-fullscreen-mode #chat-page .chat-message-avatar,
:fullscreen #chat-page .chat-message-avatar,
:-webkit-full-screen #chat-page .chat-message-avatar {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: rgba(157, 78, 221, 0.12);
    border-radius: 50% !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

body.ios-fullscreen-mode #chat-page .chat-message-avatar .chat-avatar-img,
:fullscreen #chat-page .chat-message-avatar .chat-avatar-img,
:-webkit-full-screen #chat-page .chat-message-avatar .chat-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* C) 聊天消息气泡：显式可见，避免 Safari 合成层失效后被误判隐藏 */
body.ios-fullscreen-mode #chat-page .chat-content .chat-message,
body.ios-fullscreen-mode #chat-page .chat-content .chat-system-message,
body.ios-fullscreen-mode #chat-page .chat-content .chat-message-bubble,
:fullscreen #chat-page .chat-content .chat-message,
:fullscreen #chat-page .chat-content .chat-system-message,
:fullscreen #chat-page .chat-content .chat-message-bubble,
:-webkit-full-screen #chat-page .chat-content .chat-message,
:-webkit-full-screen #chat-page .chat-content .chat-system-message,
:-webkit-full-screen #chat-page .chat-content .chat-message-bubble {
    visibility: visible !important;
    opacity: 1 !important;
}

/* D) chat-content 自身：iOS 全屏下显式撑满父容器、可滚动、可见 */
body.ios-fullscreen-mode #chat-page > .chat-content,
:fullscreen #chat-page > .chat-content,
:-webkit-full-screen #chat-page > .chat-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* iOS Safari 偶发 contain 失效会把 transform 缓存粘住；显式重置一次 */
    transform: none;
    -webkit-transform: none;
}

/* E) 微信主面板 + 聊天列表容器：避免合成层失效后整块隐藏 */
body.ios-fullscreen-mode .wechat-chat-list,
:fullscreen .wechat-chat-list,
:-webkit-full-screen .wechat-chat-list {
    visibility: visible !important;
    opacity: 1 !important;
    /* 锁定最小高度避免 0 高度导致看不到任何列表项 */
    min-height: 60vh;
}

body.ios-fullscreen-mode .wechat-chat-list .wechat-chat-item,
:fullscreen .wechat-chat-list .wechat-chat-item,
:-webkit-full-screen .wechat-chat-list .wechat-chat-item {
    visibility: visible !important;
    opacity: 1 !important;
}

/* F) 配合 JS recovery 模块：在 body[data-ios-chat-recovery="1"] 时额外加固 */
body[data-ios-chat-recovery="1"] #chat-page .chat-content,
body[data-ios-chat-recovery="1"] .wechat-chat-list {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    /* 临时关闭 contain，让 Safari 重新做一次完整布局 */
    contain: none !important;
}

body[data-ios-chat-recovery="1"] #chat-page .chat-content .chat-message,
body[data-ios-chat-recovery="1"] #chat-page .chat-content .chat-message-bubble {
    visibility: visible !important;
    opacity: 1 !important;
}

body[data-ios-chat-recovery="1"] #chat-page .chat-content {
    display: flex !important;
    flex-direction: column !important;
}

body[data-ios-chat-recovery="1"] #chat-page .chat-content .chat-message:not(.chat-message--offline-archived-hidden) {
    display: flex !important;
    min-height: 1px;
}

body[data-ios-chat-recovery="1"] #chat-page .chat-content .chat-message-content {
    display: flex !important;
}