/* ============================================================
   mobile-perf.css — 移动端通用性能兜底（2026-06-06）
   ============================================================
   背景：用户反馈打字卡顿、聊天界面按钮（返回、聊天设置）点击卡顿。
   ios-perf.css 仅 html.is-ios 生效，apk-perf.css 仅 .is-apk 生效，
   而部分 Android Chrome、华为浏览器、Edge 等"非 iOS 非 APK"设备
   走的是 web-perf.css 但仍可能卡顿。本文件作为通用移动兜底层，
   通过 @media (hover: none) 和 (max-width: 768px) 命中所有触屏设备。

   核心策略：
   1. 聊天输入栏 / 底部导航 / 顶部导航等高频元素禁用 backdrop-filter
      backdrop-filter:blur() 是 GPU 头号杀手，输入框高度变化会触发
      底层像素重采样，每次打字都加剧卡顿
   2. 输入栏 contain:layout style，把 layout 影响隔离在输入栏内，
      避免聊天历史长列表参与 reflow
   3. 将底导航栏 will-change 替换为 contain，减少 GPU 合成层
   ============================================================ */

@media (hover: none), (max-width: 768px) {

    /* ========== 1. 聊天输入栏：禁用 blur + contain 隔离 ========== */
    /* [FIX-iOS输入法-2026-06-12] contain:layout 在 iOS Safari 上会干扰输入法
       弹出时的 viewport resize 事件传播，导致键盘弹出后布局计算延迟。
       改为仅 contain:style（仍能隔离样式计算），不限制 layout。
       Android WebView 不受此影响，但统一用 style 也无坏处。 */
    #chat-input-bar,
    #layer-chat .input-bar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        contain: style;
    }

    /* textarea 本身不加 contain，让输入法自由调整布局 */
    #chat-input,
    #layer-chat .input-field {
        contain: none;
    }

    /* ========== 2. 顶部导航栏：禁用 blur ========== */
    /* nav-bar 处于固定位置，每次 layer 切换都要 GPU 重绘大块模糊纹理 */
    #chat-nav-bar,
    #layer-chat > .nav-bar,
    .layer .nav-bar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ========== 3. 底部胶囊导航：禁用 blur ========== */
    .bottom-nav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ========== 4. 聊天工具栏 / 表情面板 / 弹出菜单 ========== */
    #layer-chat .toolbar,
    #layer-chat .pop-opt,
    .sticker-panel,
    .add-menu,
    .pop-menu,
    .contact-menu {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ========== 5. 模态遮罩：禁用 blur ========== */
    .modal-mask,
    .ff-cmenu-bg {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ========== 6. 聊天设置 / 个人主页 / 设置页面顶栏 ========== */
    /* 用户反馈"聊天设置"按钮点击很卡，根因之一是这些 layer 中
       多个 backdrop-filter 元素一起入场触发 GPU 巨大合成开销 */
    #layer-chat-settings .nav-bar,
    #layer-contact-profile .nav-bar,
    #layer-settings .nav-bar,
    #layer-beauty .nav-bar,
    #layer-chat-settings .form-block,
    #layer-chat-settings .group-box {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ========== 7. 浮窗 / 弹层 / 通话面板 ========== */
    /* [FIX-一起听背景压缩v8] ★ #listen-player-modal 是漏网之鱼：它的 backdrop-filter:blur(12px)
       从未被本兜底层覆盖。文件选择器弹出触发祖先重排时，该毛玻璃层以坍缩尺寸错误渲染，
       把整个 #device 拖成左侧窄条 → 这就是"修改弹窗背景时背景被压缩/漂移"的真正根因。
       这里把它一并禁用 blur（失去的毛玻璃感由 styles-part1.css 里更不透明的实色背景弥补）。 */
    #listen-player-modal,
    .vc-status-bar,
    .listen-controls,
    .unified-panel,
    .chat-search-overlay,
    .moment-detail-panel,
    .lock-screen-content,
    .gwp-toolbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ========== 8. 主流主题强补丁（韩系 / 萌系 / 复古） ========== */
    /* 主题里大量 backdrop-filter 是已知性能瓶颈，这里再次兜底 */
    body.theme-korean #chat-input-bar,
    body.theme-korean #layer-chat .input-bar,
    body.theme-korean #layer-chat .toolbar,
    body.theme-cute #chat-input-bar,
    body.theme-cute #layer-chat .input-bar,
    body.theme-cute #layer-chat .toolbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* [FIX-嵌套语法修复-2026-06-06] 以下两段原来嵌套在上方主题块内部，
       依赖 CSS Nesting（Chrome 112+），在老安卓 WebView / 华为浏览器上整段丢弃，
       导致 touch-action:manipulation 不生效、按钮有 ~300ms 点击延迟。
       现提取到顶层，兼容所有 WebView。 */

    /* [FIX-保存按钮穿透] 防止按钮触摸时触发浏览器默认手势（如侧边返回） */
    .beauty-action-btn,
    .settings-subpage button,
    .beauty-subpage button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* [FIX-头像穿透] 防止聊天头像点击被系统手势拦截 */
    .msg-row .avatar,
    [data-profile-id] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* ========== 8.1 全局按钮/可点击元素消除 300ms 延迟 ========== */
    /* [PERF-按钮卡顿-2026-06-06] 部分国产 WebView（华为、OPPO等）即使设了
       user-scalable=no 仍有点击延迟。touch-action:manipulation 是公认的
       低风险提速手段，配合 -webkit-tap-highlight-color 消除闪烁 */
    button,
    .btn,
    .btn-send,
    .tab-btn,
    .nav-icon,
    .app-item,
    [onclick] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* ========== 9. 关闭过度 will-change ========== */
    /* will-change 在已禁用 backdrop-filter 的元素上会创建无意义的
       GPU 合成层，反而增加内存。仅保留 transform 的 will-change */
    #chat-input-bar,
    .bottom-nav,
    .nav-bar {
        will-change: auto;
    }

    /* ========== 10. layer 切换期间的额外保护 ========== */
    /* closeLayer/openLayer 动画期间，被切换的 layer 内所有 blur
       元素都要 GPU 实时重算。这里用 body class 做硬开关，
       JS 在 closeLayer 时 add，transitionend 时 remove */
    body.layer-anim-running #layer-chat *,
    body.layer-anim-running #layer-chat-settings *,
    body.layer-anim-running #layer-contact-profile *,
    body.layer-anim-running #layer-settings *,
    body.layer-anim-running #layer-beauty * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ========== 11. [PERF-卡顿修复-2026-07-10] content-visibility 渲染裁剪 ========== */
    /* 隐藏的 layer 仍参与布局计算和样式匹配，白白浪费 CPU。
       content-visibility:auto 让浏览器跳过屏幕外/不可见内容的渲染，
       仅在滚入可视区域时才渲染（与 content-visibility:hidden 不同，auto 是渐进式的）。
       注意：只对非 .show 状态的 layer 生效，.show 时自动恢复完整渲染。 */
    .layer:not(.show):not(.active) {
        content-visibility: auto;
        contain-intrinsic-size: 0 100vh;
    }

    /* ========== 12. [PERF-卡顿修复-2026-07-10] 滚动容器优化 ========== */
    /* 主要滚动容器添加 will-change:scroll-position 提示浏览器提前准备合成层，
       减少滚动时的掉帧。配合 overscroll-behavior:contain 防止过度滚动穿透。 */
    #chat-history,
    #offline-chat-history,
    #contact-list,
    .settings-menu,
    .scroll-y {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* ========== 13. [PERF-卡顿修复-2026-07-10] 扩大 touch-action 覆盖 ========== */
    /* 此前遗漏的高频可点击元素，仍有 ~300ms 点击延迟。
       touch-action:manipulation 消除双击缩放检测延迟。 */
    .list-item,
    .contact-item,
    .chat-item,
    .msg-row,
    .bubble,
    .app-item,
    .spirit-card,
    .beauty-card,
    .sticker-item,
    .modal-box .btn,
    .modal-box button,
    .pop-menu-item,
    .ff-cmenu-item,
    .settings-item,
    .form-block,
    .sw-track,
    input[type="range"],
    select {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* ========== 14. [PERF-卡顿修复-2026-07-10] 快速滚动时降级（配合 JS 重构） ========== */
    /* 旧版 CSS 用 body.ios-fast-scroll 选择器，每次变动触发全文档样式重算。
       新版 JS 只把 .ios-fast-scroll 加在正在滚动的容器上（如 #chat-history），
       CSS 选择器只匹配该容器内部的后代，影响范围大幅缩小。 */
    .ios-fast-scroll .bubble {
        box-shadow: none !important;
        transition: none !important;
    }
    .ios-fast-scroll .avatar {
        filter: none !important;
        transition: none !important;
    }
    .ios-fast-scroll .msg-row {
        transition: none !important;
    }

    /* ========== 15. [PERF-卡顿修复-2026-07-10] layer 过渡动画加速 ========== */
    /* 确保 layer 切换只触发 transform（GPU 合成），不触发 layout/paint */
    .layer {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* ========== 16. [FIX-白屏v4-2026-07-15] 回前台恢复保护期 ========== */
    /* 临时禁用 content-visibility:auto，防止 WebView 回前台后因
       可见性判断滞后而跳过 layer 的 GPU 纹理重建 → 白屏 */
    body.yan-resuming .layer {
        content-visibility: visible !important;
        contain: none !important;
    }
    body.yan-resuming .layer.show {
        content-visibility: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}