/**
 * safe-area-compat.css —— 真机顶部安全区（状态栏 / 灵动岛 / 刘海）适配
 *
 * 背景（用户反馈）：
 *   iPhone（含 15 Pro Max / 17 Pro Max 等）在 Safari 标签页或「添加到主屏幕」
 *   独立启动时，配合 index.html 的
 *     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 *     <meta name="viewport" ... viewport-fit=cover>
 *   网页内容会延伸到真机状态栏 / 灵动岛背后，env(safe-area-inset-top)
 *   变为约 47~62px（无安全区时 env 回退 0px，样式与改动前一致）。
 *
 * 问题：
 *   主页面（#chat-page / #wechat-page / #phone-page / #twitter-page / #settings-page …）
 *   顶部都有一个 .status-bar，已用 max(12px, env(safe-area-inset-top)) 预留安全区，
 *   所以不受影响。但「铺满 #app 的全屏浮层 / 子屏」(AO3、游乐场、一起听歌、一起看书、
 *   电影院、情侣空间各子页、推特详情/私信浮层、日历全屏面板等) 自身没有 .status-bar，
 *   它们的顶部功能栏 / 返回按钮直接贴在 top:0，会被真机状态栏 / 灵动岛盖住、无法点击。
 *
 * 方案：
 *   无条件给这些全屏浮层的顶部栏补上 env(safe-area-inset-top) 的顶部内边距（或 top 偏移），
 *   让它们整体下移到真机状态栏之下。不依赖 lovemi-standalone / 独立启动判定——
 *   普通 Safari 标签页在地址栏收起、页面铺满视口时同样可能触发重叠。
 *
 * 安全性：
 *   - env(safe-area-inset-*, 0px) 为标准 CSS；无刘海/无延伸的机型与浏览器恒为 0，零副作用；
 *   - 仅作用于「确实贴在屏幕最顶部、且无 .status-bar 兜底」的全屏浮层顶栏，
 *     不动主页面、居中弹窗、底部上拉面板、好友手机内部页（它们各自已被 .status-bar
 *     或父壳的 env() 安全区覆盖），避免把不在顶部的元素错误下移；
 *   - 兼容 Safari / Via / Chrome / Edge / 搜狗 / 雨见 / 夸克 及华为/小米/OPPO/魅族/vivo/三星等。
 *
 * 加载顺序：本文件在所有模块样式之后；规则统一带 !important，即使个别浮层样式
 *   是按需(懒)加载、晚于本文件注入，也能稳定覆盖其顶栏内边距。
 */

/* ------------------------------------------------------------------ */
/* 全屏浮层顶栏：env(safe-area-inset-top) 兜底（无安全区时为 0）        */
/* ------------------------------------------------------------------ */

/* AO3 专区（.ao3-root 铺满 #app，无 status-bar） */
.ao3-root .ao3-root__header {
    padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
}

/* 一起听歌（.lt-overlay 铺满 #app） */
.lt-overlay .lt-topbar {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 一起看书（#rt-overlay-root 铺满 #app）
   ⚠ 2026-07-04 用户实测反馈（iPhone 14 Pro / Safari）：此前只处理了「阅读器」
   顶栏 .rt-topbar，漏掉了「书架」视图的顶栏 .rt-shelf-head（标题 + 右上角 ×
   关闭键），被灵动岛盖住无法点击。一并补齐同结构的贴顶元素：
   - .rt-invite-head：「邀请共读」面板铺满阅读器（inset:0），自带返回键贴顶；
   - .rt-toc-panel / .rt-theme-picker：目录、配色下拉面板挂在 .rt-topbar
     （position:relative）内、按旧顶栏高度定位 top:52px，顶栏补安全区增高后
     需同步下移，否则面板顶部会被加高的顶栏压住。 */
#rt-overlay-root .rt-topbar {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}
#rt-overlay-root .rt-shelf-head {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}
#rt-overlay-root .rt-invite-head {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}
#rt-overlay-root .rt-toc-panel,
#rt-overlay-root .rt-theme-picker {
    top: calc(52px + env(safe-area-inset-top, 0px)) !important;
}

/* 游乐场（#sub-screen-game-hub）右上角关闭按钮：绝对定位 top，需整体下移 */
#sub-screen-game-hub .sub-screen-game-hub__close {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* love咪放映厅（.lmc-cinema 铺满 #app） */
.lmc-cinema-topbar {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 购物·商品详情全屏面板（盖住 #shopping-page 的 status-bar） */
#shopping-page .shopping-product-detail-panel .shopping-detail-toolbar {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}

/* ------------------------------------------------------------------ */
/* 推特（#twitter-page 内的全屏浮层；列表态头栏在 .status-bar 之下，无需处理） */
/* ------------------------------------------------------------------ */

/* 推文详情页（.twitter-detail-page: position:absolute; inset:0; 盖住状态栏） */
#twitter-page .twitter-detail-page .twitter-detail-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 私信会话浮层（.twitter-dm-root: position:absolute; inset:0 铺满 #twitter-page）。
   会话头 .twitter-dm-chat-header / 多选顶栏 .twitter-dm-multiselect-topbar 二者
   择一可见，都贴在浮层物理顶部，需补安全区。
   ⚠ 上一版只挂 [data-dm-chat-overlay="on"] 单一 hook：该属性由 setChatOverlayActive()
   设置，但 renderChatView() 重入（切到别的 Tab 再切回消息）时不会恢复，导致属性可能
   为 off / 缺失而规则不命中。改用 [data-dm-page="chat"] 作主 hook（openConversation 设置后
   一直保留、只在回列表时清除，最稳定），并叠加页面 class 与原 overlay 属性作三重保险。
   （已同步在 twitter-dm.js 的 renderChatView 开头补 setChatOverlayActive(true) 兜底。） */
.twitter-dm-root[data-dm-page="chat"] .twitter-dm-chat-header,
.twitter-dm-root[data-dm-page="chat"] .twitter-dm-multiselect-topbar,
.twitter-dm-root[data-dm-chat-overlay="on"] .twitter-dm-chat-header,
.twitter-dm-root[data-dm-chat-overlay="on"] .twitter-dm-multiselect-topbar,
#twitter-page.twitter-page--dm-chat-overlay .twitter-dm-chat-header,
#twitter-page.twitter-page--dm-chat-overlay .twitter-dm-multiselect-topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* ------------------------------------------------------------------ */
/* 情侣空间（各子浮层均铺满 #app，无 status-bar）                       */
/* ------------------------------------------------------------------ */

/* 情侣空间主页（排除已自带安全区的 --private 私密态头栏） */
.couple-space-overlay .couple-space-header:not(.couple-space-header--private) {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* 情侣空间·票务须知浮层 */
.couple-ticketing-notice-overlay .couple-ticketing-notice-header {
    padding-top: calc(22px + env(safe-area-inset-top, 0px)) !important;
}

/* 情侣空间·纪念日 */
.cs-anniv-overlay .cs-anniv-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* 情侣空间·恋爱日记（普通头栏 + 封面上悬浮头栏） */
.cs-lj-overlay .cs-lj-header {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}
.cs-lj-overlay .cs-lj-header--over-cover {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}

/* 情侣空间·经期记录 */
.couple-period-overlay .couple-period-topbar {
    padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
}

/* 情侣空间·甜蜜日记（封面态绝对顶栏 + 内页头栏） */
.cs-sd-overlay .cs-sd-topbar {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}
.cs-sd-overlay .cs-sd-page-topbar {
    padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
}

/* ------------------------------------------------------------------ */
/* 子屏日历：仅「全屏型」面板（闹钟编辑 / 来电）；普通底部上拉面板不处理   */
/* ------------------------------------------------------------------ */
.ssc-overlay.ssc-overlay--full .ssc-sheet-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}

/* ------------------------------------------------------------------ */
/* IF 线板块（#love-mi-if-line-root.if-line-root 铺满 #app，无 status-bar） */
/*                                                                    */
/* .if-line-topbar 由 sub-screen-if-line.js 通过 <style> 注入（非 inline，*/
/* 故可用 !important + 后加载稳定覆盖），覆盖：IF线 Hub（世界线列表）、    */
/* 当前世界（地图）、回到过去(Past AVG)、以及未来可能启用的 timeline 页。  */
/*                                                                    */
/* 注意：原样式写死 height:64px（矮屏 56px），若只加 padding-top 会把       */
/* 返回/关闭按钮与标题挤压；这里改用 min-height 并放开 height，让顶栏       */
/* 随安全区自然增高。                                                    */
/* ------------------------------------------------------------------ */
.if-line-topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    height: auto !important;
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
}

@media (max-height: 700px) {
.if-line-topbar {
        padding-top: calc(7px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* Past AVG 背景网格层写死 inset-top:64px（对齐原顶栏高度）；顶栏随安全区
   增高后，把网格起点同步下移，避免网格顶端被加高的顶栏盖住而错位。 */
.past-avg-screen::before {
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
}

/* ------------------------------------------------------------------ */
/* 游戏板块·双保险                                                      */
/*                                                                    */
/* 游乐场各全屏游戏（你画我猜 / 真心话大冒险 / 好友助手）的顶栏在各自源      */
/* CSS 里已用 calc(基数 + env(safe-area-inset-top)) 预留安全区。这里再用同等基数 */
/* + !important 兜底，防止个别机型/浏览器内核因样式加载时序或 env 计算时序问题   */
/* 因样式加载时序或 env 计算时序问题导致源规则一时未生效时顶栏被状态栏盖住。 */
/* 基数与源 CSS 保持一致（你画我猜 8 / 真心话 10 / 好友助手 8），故正常态     */
/* 视觉零变化。                                                          */
/* ------------------------------------------------------------------ */
.draw-guess-game .dg-header {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}
.truth-or-dare-game .tod-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}
.sgh-friend-assistant .sgh-fa-header {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}

/* ================================================================== */
/* 微信模块·全屏覆盖式子页面 / 浮层顶栏统一安全区适配                    */
/*                                                                    */
/* 背景：#wechat-page / #wechat-me-page / #wechat-discover-page /      */
/* #chat-page 这些主页面首子元素是 .status-bar，已预留安全区；但它们    */
/* 之上还会弹出大量「position:absolute; inset:0 铺满、且自己没有        */
/* .status-bar」的子页面 / 浮层（聊天设置、好友设置、专属美化、钱包、   */
/* 收藏、亲属卡、添加好友、查找聊天记录、长期记忆、线下模式各页等）。   */
/* 它们的顶栏直接贴 top:0，真机有安全区时会被状态栏 / 灵动岛盖住。     */
/*                                                                    */
/* 处理分两类：                                                        */
/*  (一) 贴顶全宽顶栏（有 border-bottom、无 margin 偏移）→ 加 padding-top， */
/*       顶栏背景延伸到状态栏背后，文字下移，观感最佳；                  */
/*  (二) 从聊天页打开 / 心动记录页里被改成「margin 定位的悬浮圆角卡片」  */
/*       的顶栏 → 必须加 margin-top 把整张卡片下移（并把 padding-top    */
/*       还原，避免卡片被撑高）。                                       */
/*                                                                    */
/* 特异性：部分源规则带 #id + !important（如 #wechat-me-page            */
/* .wechat-settings-header / #chat-page .chat-fullscreen-glass …），   */
/* 故覆盖规则按需带 #id + !important，确保稳定生效。                      */
/* ================================================================== */

/* ---------------- (一) 贴顶全宽顶栏：加 padding-top ---------------- */

/* 微信「设置」/「聊天美化」页（#wechat-me-page / #wechat-discover-page 内
   全屏子页，header 规则带 #id + padding !important，需同级 #id 覆盖） */
#wechat-me-page .wechat-settings-header,
#wechat-discover-page .wechat-settings-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 钱包 / 我的余额 / 银行卡 / 账单（通用贴顶；#chat-page 悬浮态在下方还原） */
.wallet-page-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 亲属卡 */
.kinship-page-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 收藏页 + 收藏详情（通用贴顶；#chat-page / 心动记录悬浮态在下方还原） */
.favorites-page-header {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}

/* 添加好友（手机端为 top:0 全屏壳） */
#add-friend-modal.add-friend-page-shell .add-friend-page-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* 聊天页内 chat-fullscreen-glass 全屏层（聊天设置 / 好友设置 / 群设置 /
   专属美化 / AI时间感知 / 群专属气泡成员等，共用 .modal-header，
   源规则 #chat-page .chat-fullscreen-glass .modal-content.xxx > .modal-header
   带 !important，本规则特异性更高且后加载） */
#chat-page .chat-fullscreen-glass .modal-content > .modal-header,
.offline-script-chat-page .chat-fullscreen-glass .modal-content > .modal-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* style.css 水彩美化块对聊天设置 / 好友设置 / 群设置 / 专属美化 / AI时间感知等
   写了 padding: 12px 16px !important（特异性 1,4,1），会压过上方通用规则（1,3,1）。
   此处用同等或更高特异性只改 padding-top，确保返回键不被灵动岛盖住。 */
#chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal > .modal-header,
#chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal > .modal-header,
#wechat-me-page .chat-fullscreen-glass .modal-content.chat-settings-modal > .modal-header,
#wechat-me-page .chat-fullscreen-glass .modal-content.friend-settings-modal > .modal-header,
.offline-script-chat-page .chat-fullscreen-glass .modal-content.chat-settings-modal > .modal-header,
.offline-script-chat-page .chat-fullscreen-glass .modal-content.friend-settings-modal > .modal-header,
.offline-script-chat-page #chat-settings-modal .modal-header,
.offline-script-chat-page #friend-settings-modal .modal-header,
.offline-script-chat-page #group-settings-modal .modal-header,
.offline-script-chat-page #chat-exclusive-beautify-modal .modal-header,
.offline-script-chat-page #ai-time-perception-modal .modal-header,
.offline-script-chat-page #group-private-bubble-members-modal .modal-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 查找聊天记录全屏（含线下剧本页同源） */
#chat-page #search-chat-modal.search-chat-fullscreen .modal-content > .modal-header,
#offline-script-chat-page #search-chat-modal.search-chat-fullscreen .modal-content > .modal-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* 长期记忆全屏（含旅行长记忆，复用 .chat-long-memory-header） */
.chat-long-memory-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* 线下模式全屏层各顶栏（线下模式 / 文风选择 / 新建文风 / 剧本大纲）；
   #chat-page 下「线下模式」头是悬浮卡片，在下方单独还原 + margin */
.offline-mode-header,
.offline-style-picker-header,
.offline-style-new-header,
.offline-script-outline-header {
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
}

/* ---------------- (二) 悬浮圆角卡片顶栏：加 margin-top ---------------- */
/* 这些顶栏用 margin 定位、离屏幕顶部有圆角间距，必须整张卡片下移；
   同时把 padding-top 还原为原值，避免被上面的通用规则撑高。 */

/* 从聊天页打开的：收藏 / 钱包（及账单）/ 线下模式 头栏（margin:10px） */
#chat-page .favorites-page-header {
    padding-top: 8px !important;
    margin-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}
#chat-page .wallet-page-header {
    padding-top: 12px !important;
    margin-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}
#chat-page .offline-mode-header {
    padding-top: 14px !important;
    margin-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* ================================================================== */
/* 2026-07-04 用户实测反馈：微信聊天页进入「线下模式」后 #chat-page 隐藏
   .status-bar，.chat-header 改为悬浮卡片且仅 margin-top:10px，与真机状态栏 /
   灵动岛重叠导致返回键、设置键无法点击。覆盖 1v1 私聊（折叠+展开）、多人群组
   常规线下（重置态）、多人群组水彩美化态封面卡。                              */
/* ================================================================== */
#chat-page.chat-page--offline-mode:not(.chat-page--offline-group) .chat-header,
#chat-page.chat-page--offline-mode:not(.chat-page--offline-group) .chat-header.chat-header--expanded {
    margin-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

#chat-page.chat-page--offline-mode.chat-page--offline-group:not(.chat-page--offline-beautified) .chat-header,
#chat-page.chat-page--offline-mode.chat-page--offline-group:not(.chat-page--offline-beautified) .chat-header.chat-header--expanded {
    margin-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

#chat-page.chat-page--offline-mode.chat-page--offline-group.chat-page--offline-beautified .chat-header,
#chat-page.chat-page--offline-mode.chat-page--offline-group.chat-page--offline-beautified .chat-header.chat-header--expanded {
    margin-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* 心动记录收藏页 / 详情页头栏（margin:8px 悬浮卡片） */
#favorites-heartbeat-page .favorites-page-header,
#favorites-heartbeat-detail-page .favorites-page-header {
    padding-top: 8px !important;
    margin-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}

/* ------------------------------------------------------------------ */
/* 2026-07-04 补全：上轮遗漏的全屏子页顶栏 / 贴顶关闭按钮               */
/* ------------------------------------------------------------------ */

/* 微信「发现 → 游戏手札 / 游戏手札笔记」（inset:0 全屏，无 status-bar） */
#wechat-discover-page .game-handbook-page .game-handbook-head,
#wechat-discover-page .game-handbook-note-page .game-handbook-head,
.game-handbook-page .game-handbook-head,
.game-handbook-note-page .game-handbook-head {
    padding-top: calc(9px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
}

/* 微信「发现 → 记忆库 / 记忆空间」（无条件兜底；style.css 水彩块已有
   env 规则，此处保证任意主题/加载时序下均生效） */
#wechat-discover-page .wechat-memory-header,
.wechat-memory-library-page .wechat-memory-header,
.wechat-memory-space-page .wechat-memory-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* 角色日程 · 查看大地图浮层关闭按钮（绝对定位 top，需整体下移） */
.cs-large-map-close {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* ================================================================== */
/* 2026-07-04 用户实测反馈：②号子屏幕「闲置」→「背包」选择要转卖的宝贝    */
/* #idle-picker-panel / #idle-publish-panel / #idle-detail-panel       */
/* （.idle-panel position:absolute; inset:0 盖住 #idle-market-page 的  */
/*  .status-bar），三个面板共用 .idle-panel-toolbar，返回键贴在物理顶   */
/* 端被状态栏 / 灵动岛遮挡；发布闲置与选品面板同源顶栏，一并修复。     */
/* ================================================================== */
.idle-panel-toolbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
}

/* ================================================================== */
/* 2026-07-04 用户实测反馈：iPhone 14 Pro Max + Safari「添加到主屏幕」  */
/* 独立启动后，#app 底部与真机下边框之间出现一节空白。                  */
/*                                                                    */
/* 根因：#app 高度依赖 100dvh；WebKit 在独立（standalone）启动态下      */
/* dvh 计算值偶发停留在「带浏览器工具栏」的旧值（偏小），#app 撑不满    */
/* 全屏视口，下缘露出 body 背景。                                      */
/*                                                                    */
/* 修复：独立/全屏启动态（html.lovemi-standalone，由 index.html 头部    */
/* 同步脚本判定：navigator.standalone 或 display-mode 匹配）下没有      */
/* 地址栏/工具栏的动态收展，100vh 恒等于真实全屏高度，直接用 100vh      */
/* 锁定 #app / body，绕开 dvh 的时序缺陷。                              */
/*                                                                    */
/* 安全性：                                                            */
/*   - 仅命中独立启动态；普通浏览器标签页零影响；                       */
/*   - 仅命中 iOS WebKit（@supports -webkit-touch-callout）：iOS 键盘   */
/*     悬浮于视口之上、100vh 恒稳；安卓 standalone 键盘会压缩布局视口， */
/*     锁 100vh 反而可能顶掉输入栏，且安卓的 dvh 卡值已由               */
/*     mobile-real-device-fix.js 的实测兜底覆盖，无需本规则；           */
/*   - 刻意不加 !important：键盘冻结（--lovemi-chat-app-height）、      */
/*     JS 视口兜底（data-lovemi-vp-fix）、iOS 模拟全屏                  */
/*     （ios-fullscreen-mode）等既有 !important 规则仍按原优先级接管；  */
/*   - 限定 max-width:480px（手机布局）：桌面 PWA 窗口保留原有          */
/*     居中「小手机」外观与上下留白。                                   */
/* ================================================================== */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 480px) {
        html.lovemi-standalone,
        html.lovemi-standalone body {
            height: 100%;
            min-height: 100%;
        }

        html.lovemi-standalone body {
            min-height: 100vh;
        }

        html.lovemi-standalone #app {
            height: 100vh;
            min-height: 100vh;
            max-height: 100vh;
        }
    }
}