/**
 * 真机适配修复（mobile-real-device-fix.css）
 *
 * 目标：
 * 1) 在 iOS / 安卓真机的窄屏 / 矮屏上让「快捷功能按钮」「微信朋友圈顶部卡片三按钮」等元素按比例自动缩小，
 *    避免重叠或遮挡昵称/头像。
 * 2) 快捷按钮内图标尽量占满 70×70 按钮区域（与 style.css 统一尺寸一致）。
 * 3) 在 vivo / Opera 等浏览器上强化中英文自动换行，避免长消息被截断。
 * 4) 弹起虚拟键盘时，避免微信底部导航栏 / 聊天底栏跟着上拱挤压可视区域。
 * 5) v1.0.12：弹窗 + 键盘态用 visualViewport 变量贴合可视区，修复 Chromium 强制全屏下
 *    Chrome autofill 条（钥匙/银行卡/地址）悬浮错位（小米/华为/OPPO/三星等）。
 *
 * 加载顺序：在 style.css 之后；本文件只 *覆盖* 既有规则，不引入新的布局结构。
 */

/* ------------------------------------------------------------------ */
/* 1) 快捷功能按钮：图标区占满按钮，文字保持在下方                     */
/* ------------------------------------------------------------------ */
.function-icon {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(var(--home-quick-btn-size, 70px) - 24px) !important;
}

.function-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 8px;
}

.function-icon img.theme-icon-img--custom,
.nav-icon img.theme-icon-img--custom,
.sub-screen-action-icon-img.theme-icon-img--custom {
    object-fit: cover !important;
    transform: none !important;
}

.function-icon.theme-icon-wrap--custom,
.nav-icon.theme-icon-wrap--custom,
.sub-screen-action-icon.theme-icon-wrap--custom {
    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.sub-screen-split .sub-screen-actions .sub-screen-action-icon {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(var(--home-quick-btn-size, 70px) - 24px) !important;
}

.sub-screen-action-icon-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.nav-icon {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(var(--home-quick-btn-size, 70px) - 24px) !important;
}

.nav-icon img {
    object-fit: contain !important;
}

/* ------------------------------------------------------------------ */
/* 2) 极窄屏：略缩小间距，按钮仍保持 70×70（与主屏规范一致）          */
/* ------------------------------------------------------------------ */
@media (max-width: 360px), (max-height: 640px) {
    .function-name {
        font-size: 9px !important;
    }
    .quick-functions {
        gap: 10px !important;
    }
    .bottom-nav {
        width: min(330px, calc(100% - 18px)) !important;
        padding: 6px 6px !important;
        gap: 8px !important;
    }
    .nav-name {
        font-size: 9px !important;
    }
}

/* 极小屏（iPhone SE 1 等 320px 宽） */
@media (max-width: 340px) {
    .quick-functions {
        gap: 8px !important;
    }
    .function-name {
        font-size: 9px !important;
    }
}

/* ------------------------------------------------------------------ */
/* 3) 微信朋友圈顶部「返回 / 刷新 / 发布」三按钮：上移并按屏宽缩放    */
/*    旧规则：top = max(12, safe-area) + 12 + 22 + 10 - 8  ≈ 48-62px  */
/*    现规则：上移约 14-18px，并把 40x40 改成可随屏缩放的 clamp 尺寸 */
/* ------------------------------------------------------------------ */
.moments-floating-toolbar {
    /* 顶移 14px，让按钮整体上抬，避免遮挡封面下方的头像/昵称 */
    top: calc(max(12px, env(safe-area-inset-top, 0px)) + 12px + 22px - 4px) !important;
    padding: 10px 12px 12px !important;
}

.moments-toolbar-back,
.moments-toolbar-icon-btn {
    /* 40x40 在 < 360px 宽的真机会和返回按钮共占太多横向；按屏宽自适应缩到 32px 起 */
    width: clamp(32px, 9.5vw, 40px) !important;
    height: clamp(32px, 9.5vw, 40px) !important;
    border-radius: clamp(9px, 2.6vw, 12px) !important;
}

.moments-toolbar-right {
    /* 按钮间距按屏宽自适应；窄屏从 14px 收到 10px，避免压住昵称 */
    gap: clamp(8px, 2.8vw, 14px) !important;
}

.moments-line-icon {
    width: clamp(18px, 5.6vw, 24px) !important;
    height: clamp(18px, 5.6vw, 24px) !important;
}
.moments-line-icon--md {
    width: clamp(22px, 6.6vw, 28px) !important;
    height: clamp(22px, 6.6vw, 28px) !important;
}

/* 窄屏 (< 360px) 下进一步收缩；并把封面下沿的头像 + 昵称的水平空间预留出来 */
@media (max-width: 360px) {
    .moments-floating-toolbar {
        padding: 8px 10px 10px !important;
        top: calc(max(8px, env(safe-area-inset-top, 0px)) + 10px + 22px - 6px) !important;
    }
    .moments-toolbar-back,
    .moments-toolbar-icon-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }
    .moments-toolbar-right {
        gap: 8px !important;
    }
    /* 封面右下角的「昵称 + 头像」整体下移一点点，确保即使按钮再下移也不会被压住 */
    .moments-cover-bottom-meta {
        gap: 8px !important;
    }
}

/* ------------------------------------------------------------------ */
/* 4) 微信聊天消息：真机 WebKit 换行优化                                      */
/*    线上纯文本：normal 空白 + 中文自然折行（避免 pre-wrap 把 AI 单换行渲染成硬断行） */
/*    线下叙事 / 富文本 / 语音：保留各自原有换行策略                              */
/* ------------------------------------------------------------------ */
#chat-page .chat-message-bubble:not(.chat-message-bubble--offline):not(.chat-message-bubble--offline-rich):not(.chat-message-bubble--voice):not(.chat-message-bubble--polaroid):not(.chat-message-bubble--gift-bundle):not(.chat-message-bubble--rich-html):not(:has(.chat-transfer-bubble)):not(:has(.chat-location-bubble)):not(:has(.chat-photo-flip-root)):not(:has(.wechat-polaroid-wrap)):not(:has(.art-vibe)) {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    line-break: auto;
}

#chat-page .chat-message-bubble--offline .chat-message-segment,
#chat-page .chat-message-bubble--offline-rich .chat-message-segment--offline-rich {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
}

#chat-page .chat-message-bubble--rich-html,
#chat-page .chat-message-bubble--rich-html * {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

#chat-page .chat-message-bubble--voice .chat-voice-transcript {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
}

/* 极窄屏（<=360px）下普通线上文本气泡稍微收紧 max-width；
   线下叙事气泡（offline / offline-longform / offline-rich）一律排除 — 它们要铺满屏幕，
   否则在 vivo / OPPO Via / 三星 / 华为 / 小米 Chrome 上会被压成"居中窄柱"，阅读体验极差。 */
@media (max-width: 360px) {
    #chat-page .chat-message-bubble:not(.chat-message-bubble--offline):not(.chat-message-bubble--offline-longform):not(.chat-message-bubble--offline-rich) {
        max-width: 74% !important;
    }
}

/* ------------------------------------------------------------------ */
/* 5) 微信输入框聚焦弹键盘时隐藏底栏并调整输入区位置                     */
/*    核心策略：让输入框容器 fixed 定位到 bottom: 0，浏览器会自动将其     */
/*    放置在键盘顶部，消除悬空间隙                                        */
/*                                                                      */
/*    v1.0.5 (2026-05-23) 关键修复：                                     */
/*    - 三星 Galaxy S23 Ultra / Chrome Android 报告：发送完消息后        */
/*      data-mobile-keyboard-open 标记残留 "1"（焦点已失但事件链路       */
/*      在 Chromium 边缘场景下没把它清掉），导致 composer 永久卡在       */
/*      position:fixed 中段，chat-header 看似消失、composer 下方一段     */
/*      白色空白、用户无法点返回。                                        */
/*    - 现在所有「fixed 定位 / chat-content padding 兜底」规则都额外      */
/*      要求 `:focus-within`（即真的有输入框在焦点）。这样即使            */
/*      data-mobile-keyboard-open 残留，只要焦点离开输入框，CSS 自动      */
/*      回到正常文档流，不会再卡死。                                      */
/*    - 仅「隐藏底栏 / 悬浮球」这种 视觉副作用 仍只看 attribute，          */
/*      不会因为短暂失焦就闪烁。                                          */
/* ------------------------------------------------------------------ */
body[data-mobile-keyboard-open="1"] .bottom-nav,
body[data-mobile-keyboard-open="1"] .wechat-tabbar,
body[data-mobile-keyboard-open="1"] .wechat-bottom-nav,
body[data-mobile-keyboard-open="1"] .wechat-me-bottom-nav,
body[data-mobile-keyboard-open="1"] #wechat-page .wechat-bottom,
body[data-mobile-keyboard-open="1"] .friend-phone-bottom-nav,
body[data-mobile-keyboard-open="1"] .friend-phone-wechat-tabbar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
    transition: transform 0.18s ease, opacity 0.18s ease !important;
}

/* 确保在非键盘状态下，底栏始终可见（修复导入后底栏消失问题） */
body:not([data-mobile-keyboard-open="1"]) .bottom-nav,
body:not([data-mobile-keyboard-open="1"]) .wechat-tabbar,
body:not([data-mobile-keyboard-open="1"]) .wechat-bottom-nav,
body:not([data-mobile-keyboard-open="1"]) .wechat-me-bottom-nav,
body:not([data-mobile-keyboard-open="1"]) #wechat-page .wechat-bottom,
body:not([data-mobile-keyboard-open="1"]) .friend-phone-bottom-nav,
body:not([data-mobile-keyboard-open="1"]) .friend-phone-wechat-tabbar {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* 关键修复：确保聊天底部输入区在非键盘状态下始终可见 */
body:not([data-mobile-keyboard-open="1"]) #chat-page .chat-bottom-composer,
body:not([data-mobile-keyboard-open="1"]) #chat-page .chat-input-area,
body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-composer-wrap {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
}

/* 全屏模式下的聊天底部组件强制可见（即使在非键盘状态） */
body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page .chat-bottom-composer,
body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page .chat-input-area {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    position: relative !important;
}

body[data-mobile-keyboard-open="1"] #love-mi-main-floating-ball,
body[data-mobile-keyboard-open="1"] .main-floating-ball {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 确保在非键盘状态下，悬浮球始终可见（修复导入后悬浮球消失问题） */
body:not([data-mobile-keyboard-open="1"]) #love-mi-main-floating-ball,
body:not([data-mobile-keyboard-open="1"]) .main-floating-ball {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 主微信聊天输入区：固定到底部，让浏览器自动将其放在键盘顶部
   v1.0.5：额外要求 :focus-within，避免在 Samsung Galaxy / Chrome Android
   等 Chromium 边缘场景下 data-mobile-keyboard-open 残留 "1" 时把 composer
   永久卡在 fixed 状态，导致用户看到中段输入栏 + 下方一段白色空白。
   只要输入框确实有焦点，:focus-within 命中；焦点一离开，规则失效，
   composer 立即回到 #chat-page 的正常 flex 列布局（贴合 #app 底部）。 */
body[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    z-index: 1000 !important;
    /* 使用 env(safe-area-inset-bottom) 确保在有虚拟 Home 键的设备上也能正确显示 */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
}

/* 微信聊天页自己的 mobile-chat-keyboard-guard 会冻结 #app 高度并用
   data-chat-keyboard-open 压缩消息区。此时继续 fixed 到浏览器窗口底部，
   Android Chrome / 小米 / 华为等机型会触发页面自动滚动，导致顶部栏被挤出。 */
body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"] .chat-bottom-composer:focus-within {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    transform: none !important;
    padding-bottom: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 500 !important;
}

body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"] .chat-input-area {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"] .chat-main-stack {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 聊天内容区域添加底部内边距：同样改为只在确实 focus-within 时才生效。
   这样发送完消息只要焦点离开，padding 立刻回收，chat-content 自动撑满，
   chat-header / chat-bottom-composer 都会自然回到 #chat-page flex 列的
   正确位置，下方不会再出现白色空白。 */
body[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within ~ .chat-content,
body[data-mobile-keyboard-open="1"] #chat-page.active:has(.chat-bottom-composer:focus-within) .chat-content {
    padding-bottom: 160px !important;
}

body[data-mobile-keyboard-open="1"] #chat-page.active[data-chat-keyboard-open="1"]:has(.chat-bottom-composer:focus-within) .chat-content {
    padding-bottom: 16px !important;
}

/* 兜底：若浏览器不支持 :has() / 选择器顺序匹配失败，至少保证 composer 自带 focus-within 时
   chat-content 有 padding；不强制 #chat-page 整体匹配。 */
body[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within {
    /* 自带额外底部空间，让最后一条消息不被输入框遮挡，无需依赖 chat-content padding */
    margin-bottom: 0 !important;
}

/* 好友手机微信输入区：同样改为 :focus-within 兜底 */
body[data-mobile-keyboard-open="1"] .friend-phone-char-composer-wrap:focus-within {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    z-index: 1000 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
}

/* 好友手机微信聊天屏幕区域调整：依赖 :has() 嗅探焦点；不支持 :has() 的旧 WebKit 仅
   会失去额外的 padding-bottom，不会造成布局错乱（composer 仍正常处理）。 */
body[data-mobile-keyboard-open="1"] .friend-phone-char-chat-root:has(.friend-phone-char-composer-wrap:focus-within) .phone-wx-chat-screen,
body[data-mobile-keyboard-open="1"] .friend-phone-wechat-body--messages.phone-app-content--wx-chat:has(.friend-phone-char-composer-wrap:focus-within) .phone-wx-chat-screen {
    padding-bottom: 160px !important;
}

/* 好友手机微信输入行 */
body[data-mobile-keyboard-open="1"] .friend-phone-char-input-row:focus-within {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

/* 全屏模式下的额外优化（同样要求 :focus-within） */
body.ios-fullscreen-mode[data-mobile-keyboard-open="1"] #chat-page.active .chat-bottom-composer:focus-within,
body.ios-fullscreen-mode[data-mobile-keyboard-open="1"] .friend-phone-char-composer-wrap:focus-within {
    /* 在全屏模式下，确保输入框完全贴合键盘 */
    bottom: 0 !important;
    position: fixed !important;
}

/* v1.0.5 关键兜底（最高优先级）：当 body 没有 data-mobile-keyboard-open 时
   （键盘真的不在），composer / friend-phone composer wrap 一律以 normal flow
   渲染。即使 JS 一时没把 attribute 清掉、或某个 inline style 残留，本规则
   也能把它们拽回正常 flex 列布局，从而保证：
     - chat-header（在 #chat-page 顶部）依旧可见、返回按钮可点；
     - chat-bottom-composer 贴合 #app 底部，不会出现下方一段白色空白；
     - 用户能正常返回上级页面。
   注意：保留 z-index 不动（chat-input-area / composer 自身的 z-index 由
   style.css 主规则维护，我们不强行改）。
*/
body:not([data-mobile-keyboard-open="1"]) #chat-page.active .chat-bottom-composer,
body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-composer-wrap {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

body:not([data-mobile-keyboard-open="1"]) #chat-page.active .chat-content,
body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-chat-root .phone-wx-chat-screen,
body:not([data-mobile-keyboard-open="1"]) .friend-phone-wechat-body--messages.phone-app-content--wx-chat .phone-wx-chat-screen {
    /* revert 让 padding-bottom 回到原始 cascading 值（即 style.css 中
       .chat-content 的 16px）；如果浏览器不支持 revert 关键字，回退到
       initial 也不会出错（initial 是 0，初始边距）。 */
    padding-bottom: revert !important;
}

/* 浏览器不支持 revert 的兜底（极少数旧版国产 WebView） */
@supports not (padding-bottom: revert) {
    body:not([data-mobile-keyboard-open="1"]) #chat-page.active .chat-content {
        padding-bottom: 16px !important;
    }
    body:not([data-mobile-keyboard-open="1"]) .friend-phone-char-chat-root .phone-wx-chat-screen,
    body:not([data-mobile-keyboard-open="1"]) .friend-phone-wechat-body--messages.phone-app-content--wx-chat .phone-wx-chat-screen {
        padding-bottom: 0 !important;
    }
}

/* ------------------------------------------------------------------ */
/* 6) 微信表情面板                                                       */
/* ------------------------------------------------------------------ */
.wechat-emoji-panel:focus-within,
.chat-emoji-panel:focus-within,
.wechat-stickers-panel:focus-within {
    display: block !important;
}

/* ------------------------------------------------------------------ */
/* 7) 通用输入框容器优化：确保所有带输入框的底部容器都能正确响应键盘
   v1.0.5：同样追加 :focus-within，避免在 data-mobile-keyboard-open
   残留时这些容器永久卡在 fixed 状态。 */
/* ------------------------------------------------------------------ */
body[data-mobile-keyboard-open="1"] .chat-input-wrapper:focus-within,
body[data-mobile-keyboard-open="1"] .wechat-composer:focus-within {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* 键盘真的不在时强制还原（同样不动 z-index，避免影响 stacking） */
body:not([data-mobile-keyboard-open="1"]) .chat-input-wrapper,
body:not([data-mobile-keyboard-open="1"]) .wechat-composer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* 确保输入框在键盘弹出时可见且可操作 */
body[data-mobile-keyboard-open="1"] input[type="text"]:focus,
body[data-mobile-keyboard-open="1"] input[type="search"]:focus,
body[data-mobile-keyboard-open="1"] input[type="email"]:focus,
body[data-mobile-keyboard-open="1"] input[type="tel"]:focus,
body[data-mobile-keyboard-open="1"] input[type="url"]:focus,
body[data-mobile-keyboard-open="1"] input[type="number"]:focus,
body[data-mobile-keyboard-open="1"] textarea:focus {
    /* 确保聚焦的输入框不会被键盘遮挡 */
    scroll-margin-bottom: 20px !important;
}

/* iOS Safari 特定优化：防止页面缩放 */
@supports (-webkit-touch-callout: none) {
    body[data-mobile-keyboard-open="1"] input,
    body[data-mobile-keyboard-open="1"] textarea {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------------ */
/* 8) 安卓浏览器兼容性增强（OPPO、vivo、小米等）                        */
/*    修复导入数据后图标UI丢失、按钮不可见、点触无反应等问题              */
/* ------------------------------------------------------------------ */

/* 确保所有功能按钮在安卓设备上可见且可点击 */
.quick-functions,
.bottom-nav,
.function-btn,
.nav-btn,
.sub-screen-actions {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* 修复安卓Chrome中图标可能不显示的问题 */
.function-icon img,
.nav-icon img,
.sub-screen-action-icon-img {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
}

/* 非加载态工具栏图标仍走 GPU 合成；加载态由外层 spin 容器负责 rotate，避免与 translateZ 冲突 */
.moments-toolbar-icon-btn:not(.is-loading):not(.is-moments-refresh-loading) .moments-line-icon {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
}

.moments-toolbar-icon-btn.is-loading .moments-refresh-icon-spin,
.moments-toolbar-icon-btn.is-moments-refresh-loading .moments-refresh-icon-spin {
    will-change: transform !important;
    -webkit-animation: moments-refresh-spin 0.75s linear infinite !important;
    animation: moments-refresh-spin 0.75s linear infinite !important;
    -webkit-transform-origin: 50% 50% !important;
    transform-origin: 50% 50% !important;
}

/* 确保按钮文字在所有安卓浏览器中可见 */
.function-name,
.nav-name,
.sub-screen-action-label {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* 修复OPPO/vivo浏览器中可能出现的层叠上下文问题（底栏用 margin 居中，勿覆盖 transform 以免 translateY 键盘动画失效） */
#app,
.phone-container,
.home-screen,
.quick-functions {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* 小米/Chrome Android 输入法弹起时，fixed 输入栏 + translateZ 合成层容易触发整屏闪烁/黑屏。
   键盘态短暂关闭主容器 GPU 提升，键盘收起后仍沿用上面的常规优化。 */
body[data-mobile-keyboard-open="1"] #app,
body[data-mobile-keyboard-open="1"] .phone-container,
body[data-mobile-keyboard-open="1"] .home-screen,
body[data-mobile-keyboard-open="1"] .sub-screen-split {
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

/* 确保主屏和子屏的所有交互元素都能响应点击 */
.function-btn,
.nav-btn,
.sub-screen-action-btn,
.moments-toolbar-back,
.moments-toolbar-icon-btn {
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    touch-action: manipulation !important;
}

/* 修复安卓设备上可能出现的透明度问题 */
body:not([data-mobile-keyboard-open="1"]) .function-btn,
body:not([data-mobile-keyboard-open="1"]) .nav-btn,
body:not([data-mobile-keyboard-open="1"]) .quick-functions,
body:not([data-mobile-keyboard-open="1"]) .bottom-nav {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 针对OPPO ColorOS浏览器的特殊优化 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .function-icon img,
    .nav-icon img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* 修复Via浏览器和Edge移动版的兼容性 */
@supports (not (-webkit-touch-callout: none)) {
    /* 非iOS设备（主要是安卓） */
    .function-btn,
    .nav-btn {
        -webkit-user-drag: none !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
}

/* 确保在页面加载完成后所有元素都正确显示 */
body.loaded .quick-functions,
body.loaded .bottom-nav,
body.loaded #love-mi-main-floating-ball {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 修复雨见浏览器可能出现的渲染问题 */
.phone-container,
.home-screen,
.sub-screen-split {
    contain: layout style !important;
}

/* ------------------------------------------------------------------ */
/* 9) Android Chromium 系（特别是 三星 Galaxy S 系列 Chrome）          */
/*    `100dvh` / `100vh` 单位 stale bug 兜底                          */
/*                                                                    */
/*    场景：开启 lovemi 强制全屏（requestFullscreen API）→ 退出后，   */
/*    Chromium 的 dvh / vh 单位在某些机型/版本上会保留为进入全屏时    */
/*    的状态，导致 #app 和 body 实际高度小于浏览器可视区，输入框      */
/*    下方露出 html 的默认白色背景。                                  */
/*                                                                    */
/*    触发条件（由 mobile-real-device-fix.js 控制）：                  */
/*    - 仅 Android Chromium 浏览器                                    */
/*    - 当 JS 实测视口高度与 `100dvh` 像素值差异 > 32px 时             */
/*    - 非键盘弹起、非浏览器原生全屏中                                */
/*                                                                    */
/*    兜底机制：                                                       */
/*    - 用 `--lovemi-app-height` CSS 变量（JS 写入像素值）替代          */
/*      `100dvh` / `100vh` 表达式                                      */
/*    - 仅在 body[data-lovemi-vp-fix="1"] 时生效，对其他设备/浏览器    */
/*      （iOS Safari / 华为 / 小米 / OPPO / vivo / 桌面）零影响        */
/* ------------------------------------------------------------------ */
body[data-lovemi-vp-fix="1"] {
    min-height: var(--lovemi-app-height, 100dvh) !important;
    height: var(--lovemi-app-height, 100dvh) !important;
}

body[data-lovemi-vp-fix="1"] #app {
    min-height: var(--lovemi-app-height, 100dvh) !important;
    max-height: var(--lovemi-app-height, 100dvh) !important;
    height: var(--lovemi-app-height, 100dvh) !important;
}

/* 桌面尺寸（>= 481px）保留上下 20px 间距，与 style.css 原规则保持一致 */
@media (min-width: 481px) {
    body[data-lovemi-vp-fix="1"] #app {
        min-height: calc(var(--lovemi-app-height, 100dvh) - 40px) !important;
        max-height: calc(var(--lovemi-app-height, 100dvh) - 40px) !important;
        height: calc(var(--lovemi-app-height, 100dvh) - 40px) !important;
    }
}

/* ------------------------------------------------------------------ */
/* 6) 微信转账卡片：WebKit / 部分国产浏览器真机渲染修复                      */
/*    - 避免装饰边框层叠到金额文字上                                        */
/*    - 状态文案勿被误渲染成带边框的「按钮块」                              */
/*    - 不依赖 :has()，仅用 --transfer 类名，兼容 Via / 旧版 Safari         */
/* ------------------------------------------------------------------ */
#chat-page .chat-message-bubble.chat-message-bubble--transfer {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#chat-page .chat-message-bubble.chat-message-bubble--transfer::before,
#chat-page .chat-message-bubble.chat-message-bubble--transfer::after {
    content: none !important;
    display: none !important;
}

.chat-transfer-bubble {
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.chat-transfer-bubble::after {
    z-index: 0 !important;
}

.chat-transfer-card-head,
.chat-transfer-body,
.chat-transfer-note,
.chat-transfer-actions {
    z-index: 1;
}

.chat-transfer-amount {
    position: relative;
    z-index: 2;
    text-shadow: none !important;
    -webkit-text-stroke: 0 transparent;
}

.chat-transfer-status {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-decoration: none !important;
}

/* 旧 WebKit 不支持 :has() 时，普通气泡换行规则可能因选择器无效而整体失效；
   此处用显式类名兜底，确保转账卡片内部排版不被外层 flex/inline-block 干扰。 */
@supports not selector(:has(*)) {
    #chat-page .chat-message-bubble.chat-message-bubble--transfer,
    #chat-page .chat-message-bubble.chat-message-bubble--transfer .chat-transfer-bubble {
        display: block !important;
    }
}

/* ------------------------------------------------------------------ */
/* 10) 线下聊天模式（私聊：消息模式 / 长文模式）真机阅读优化            */
/*                                                                    */
/*    用户反馈（2026-05-23）：                                        */
/*    - vivo X200 + Chrome、OPPO + Via 等机型上，线下聊天模式下      */
/*      Char/User 的气泡内容没有铺满屏幕，反而出现两侧大量空白、     */
/*      文本看似居中对齐；                                            */
/*    - 长文模式没有长短段落区分，阅读体验差。                       */
/*                                                                    */
/*    根因（综合排查）：                                              */
/*    - style.css 基础 .chat-message-bubble 是 display:inline-flex +  */
/*      width:fit-content + max-width:80%；                            */
/*      在偏好"自适应内容"的 Chromium 内核（vivo / OPPO Via /         */
/*      三星 / 华为 / 小米 Chrome）上，即使 #chat-page.offline-mode  */
/*      下用 width:100% / max-width:100% 覆盖，inline-flex 也会按内容 */
/*      宽度计算，最终把气泡压成 60-75% 的窄柱、文字落到屏幕中段；   */
/*    - mobile-real-device-fix.css 原来的 @media(max-width:360px)    */
/*      `#chat-page .chat-message-bubble { max-width:74% !important }`*/
/*      在窄屏会进一步压制线下气泡（已在上方第 4 节做了 :not() 排除）。*/
/*                                                                    */
/*    作用范围：仅「私聊」线下分支（chat-page--offline-single / 私聊  */
/*    归档），不影响多人群组线下（chat-page--offline-group 有它自己   */
/*    的"独立小气泡"样式，需要保持窄气泡以模拟群聊里每个成员的发言）。*/
/*    适配机型/浏览器：iPhone Safari、华为/小米/OPPO/魅族/vivo/三星  */
/*    主流移动浏览器（Chrome / Via / Edge / 搜狗 / 雨见 / 夸克 / QQ /UC 等）。*/
/* ------------------------------------------------------------------ */

/* 1) 私聊线下：chat-message-content 100% 宽，对抗某些 Chromium
   把 flex:1 1 0% 算成 0、再加上 align-items:stretch 失效的情况 */
#chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-content,
#chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-content {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
}

/* 2) 私聊线下：所有线下气泡变体强制 block + 100% 宽 + 左对齐 */
#chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline,
#chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline-longform,
#chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline-rich,
#chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline,
#chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline-longform,
#chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline-rich {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3) 私聊线下：气泡内的段落容器（叙事 / 对白 / 旁白）也强制 block 100% */
#chat-page.chat-page--offline-single .chat-message-bubble--offline .chat-message-segment,
#chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message-bubble--offline .chat-message-segment {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* 4) 极窄屏（<=380px，覆盖 iPhone SE2 / 安卓 360-380dp 主流尺寸）：
   私聊线下 chat-content 把两侧 padding 从 14px 收到 8px，给阅读多挤 12px； */
@media (max-width: 380px) {
    #chat-page.chat-page--offline-single .chat-content,
    #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* 同样把私聊线下气泡自身的 padding 从 8px 6px 收到 6px 4px，进一步给文字让位 */
    #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble,
    #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* 5) 中等屏（381-420px，主流 6.1"-6.7" 手机如 iPhone 14/15、vivo X200、
   华为 Mate 60、OPPO Find、小米 14、三星 S24 等）：保留默认 padding，
   仅再次显式宣告气泡 100% 宽，对抗个别浏览器把 flex 算成 fit-content */
@media (min-width: 361px) and (max-width: 420px) {
    #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline,
    #chat-page.chat-page--offline-single .chat-message--offline-flow .chat-message-bubble--offline-longform,
    #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline,
    #chat-page.chat-page--offline-archive:not(.chat-page--offline-group) .chat-message--offline-flow .chat-message-bubble--offline-longform {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 6) 老 WebKit / 不支持 :has() 的 UA（雨见 / 旧 Via / 部分国产 WebView）兜底：
   单独列出私聊线下，display:block 兜底确保不会回退到 inline 行为。
   注：不包含群组线下分支（保留群组自有的窄气泡样式）。 */
@supports not selector(:has(*)) {
    #chat-page.chat-page--offline-single .chat-message-bubble.chat-message-bubble--offline,
    #chat-page.chat-page--offline-single .chat-message-bubble.chat-message-bubble--offline-longform,
    #chat-page.chat-page--offline-single .chat-message-bubble.chat-message-bubble--offline-rich {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
}

/* ------------------------------------------------------------------ */
/* 11) 线下模式美化弹窗：移动端真实视口 + 可触摸滚动                   */
/*                                                                    */
/*    三星 / vivo 等 Android Chrome 以及部分国产浏览器在地址栏显示、   */
/*    textarea 自动聚焦或视口高度变化时，容易把弹窗正文压到可视区外。 */
/*    这里让正文成为唯一纵向滚动区，并限制 JSON 输入框高度，确保       */
/*    聊天背景、气泡调色、导入/方案/清空、保存按钮都能触达。           */
/* ------------------------------------------------------------------ */
#chat-page .chat-offline-modals-layer .offline-beautify-content {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
}

#chat-page .chat-offline-modals-layer .offline-beautify-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
}

#chat-page .chat-offline-modals-layer .offline-beautify-textarea {
    flex: 0 0 auto !important;
    height: clamp(132px, 30svh, 270px) !important;
    min-height: 132px !important;
    max-height: 270px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

@supports not (height: 1svh) {
    #chat-page .chat-offline-modals-layer .offline-beautify-textarea {
        height: clamp(132px, 30vh, 270px) !important;
    }
}

@media (max-height: 720px), (max-width: 380px) {
    #chat-page .chat-offline-modals-layer .offline-beautify-body {
        padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }

    #chat-page .chat-offline-modals-layer .offline-beautify-hint {
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    #chat-page .chat-offline-modals-layer .offline-beautify-bg-card {
        grid-template-columns: minmax(0, 1fr) auto 46px !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    #chat-page .chat-offline-modals-layer .offline-beautify-bg-main,
    #chat-page .chat-offline-modals-layer .offline-beautify-bg-clear,
    #chat-page .chat-offline-modals-layer .offline-beautify-bg-thumb {
        min-height: 42px !important;
        height: 42px !important;
    }

    #chat-page .chat-offline-modals-layer .offline-beautify-bg-thumb {
        width: 46px !important;
    }

    #chat-page .chat-offline-modals-layer .offline-bubble-tone-card {
        padding: 8px !important;
    }

    #chat-page .chat-offline-modals-layer .offline-bubble-tone-grid {
        gap: 6px !important;
    }

    #chat-page .chat-offline-modals-layer .offline-bubble-tone-option {
        gap: 5px !important;
        padding: 7px !important;
    }

    #chat-page .chat-offline-modals-layer .offline-beautify-textarea {
        height: clamp(120px, 26svh, 210px) !important;
        min-height: 120px !important;
    }

    #chat-page .chat-offline-modals-layer .offline-beautify-actions {
        gap: 6px !important;
        margin-top: 8px !important;
    }
}

/* ------------------------------------------------------------------ */
/* 12) 微信聊天多选栏：防止取消按钮点击穿透到底部「接收」按钮          */
/*                                                                    */
/*    mobile-real-device-fix.css 上方为了修复键盘残留，曾强制让       */
/*    .chat-bottom-composer / .chat-input-area 在非键盘态 display:flex。*/
/*    多选模式下这会覆盖 JS 的 display:none，导致 vivo Chrome 等手机   */
/*    点击「取消」时下层接收按钮仍在可点击区域，出现"没有可接收内容"。*/
/* ------------------------------------------------------------------ */
#chat-page.chat-page--multiselect-mode .chat-bottom-composer,
#chat-page.chat-page--multiselect-mode .chat-input-area,
body:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-bottom-composer,
body:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-input-area,
body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-bottom-composer,
body.ios-fullscreen-mode:not([data-mobile-keyboard-open="1"]) #chat-page.chat-page--multiselect-mode .chat-input-area {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#chat-page.chat-page--multiselect-mode .chat-multiselect-bar {
    z-index: 1200 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#chat-page.chat-page--multiselect-mode .chat-multiselect-bar .multiselect-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* ------------------------------------------------------------------ */
/* 13) 弹窗 + 虚拟键盘：防止 Chrome / Edge / 小米 / 华为 / OPPO 等      */
/*     Chromium 内核在强制全屏下 autofill 条（钥匙/银行卡/地址）悬浮错位 */
/*                                                                    */
/*     JS（mobile-real-device-fix.js v1.0.6）在键盘弹起时写入           */
/*     --lovemi-vv-offset-top / --lovemi-vv-height 等 visualViewport  */
/*     实测值；此处让 .modal.show 贴合真实可视区，内容区内部滚动。      */
/* ------------------------------------------------------------------ */
body[data-mobile-keyboard-open="1"] .modal.show {
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto;
    top: var(--lovemi-vv-offset-top, 0px) !important;
    left: var(--lovemi-vv-offset-left, 0px) !important;
    width: var(--lovemi-vv-width, 100%) !important;
    height: var(--lovemi-vv-height, 100%) !important;
    max-height: var(--lovemi-vv-height, 100%) !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

body[data-mobile-keyboard-open="1"] .modal.show .modal-content {
    flex: 0 1 auto;
    width: min(92vw, 400px) !important;
    max-width: min(92vw, 400px) !important;
    max-height: calc(
        var(--lovemi-vv-height, 100vh)
        - max(10px, env(safe-area-inset-top, 0px))
        - max(8px, env(safe-area-inset-bottom, 0px))
        - 16px
    ) !important;
    margin: 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 主卡片「编辑文字素材」：无键盘时也贴顶留白，避免与灵动岛 / 状态栏重叠 */
#edit-modal.modal.show {
    align-items: flex-start;
    justify-content: center;
    padding-top: max(48px, calc(env(safe-area-inset-top, 0px) + 20px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

#edit-modal.modal.show .edit-modal-content {
    max-height: min(
        78vh,
        calc(100% - max(48px, calc(env(safe-area-inset-top, 0px) + 20px)) - max(16px, env(safe-area-inset-bottom, 0px)) - 12px)
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#edit-modal.modal.show .edit-modal-content .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#edit-modal .edit-modal-form {
    display: block;
    margin: 0;
    padding: 0;
}

body[data-mobile-keyboard-open="1"] #edit-modal input:focus,
body[data-mobile-keyboard-open="1"] #edit-modal textarea:focus {
    scroll-margin-top: 12px;
    scroll-margin-bottom: 12px;
}

/* iOS 模拟全屏 + 标准 :fullscreen 双路径一致 */
body.ios-fullscreen-mode[data-mobile-keyboard-open="1"] .modal.show,
:fullscreen body[data-mobile-keyboard-open="1"] .modal.show,
:-webkit-full-screen body[data-mobile-keyboard-open="1"] .modal.show {
    z-index: 10050 !important;
}