/* ================================================================
   移动端基础适配 CSS
   文件：css/base-mobile.css
   ================================================================ */

/* ---------- 安全区域CSS变量 ----------
   用于适配iPhone刘海屏、灵动岛、底部小黑条
*/
:root {
    --sat: env(safe-area-inset-top, 0px);    /* 顶部安全区（刘海/灵动岛） */
    --sar: env(safe-area-inset-right, 0px);  /* 右侧安全区 */
    --sab: env(safe-area-inset-bottom, 0px); /* 底部安全区（小黑条） */
    --sal: env(safe-area-inset-left, 0px);   /* 左侧安全区 */
}

/* ---------- 现代CSS Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ---------- 根元素设置 ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* ---------- Body基础设置 ---------- */
body {
    min-height: auto;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;

    padding-top: var(--sat);
}

/* ---------- 触摸优化 ---------- */
a, button, input, select, textarea, [role="button"] {
    touch-action: manipulation;
}

img, a, button {
    -webkit-touch-callout: none;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* ---------- 禁止文本选择（按钮等） ---------- */
button,
nav,
.no-select,
[role="button"] {
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- 底部导航栏安全区适配 ---------- */
.safe-bottom {
    padding-bottom: var(--sab);
}

.safe-bottom-margin {
    margin-bottom: var(--sab);
}

/* ---------- 顶部安全区适配 ---------- */
.safe-top {
    padding-top: var(--sat);
}

/* ---------- 图片优化 ---------- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- 深色模式适配 ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-dark-mode: #0a0a0a;
        --text-dark-mode: #ffffff;
    }
}
/* 修复移动端全屏适配 */
html {
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

body {
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

.phone-container {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}


/* ================================================================
   全局顶部状态栏遮挡修复 (刘海屏/状态栏适配)
   插入位置：可以直接添加到现有 css 的末尾或者 root 声明之后
   ================================================================ */

/* 1. 确保全局有正确的安全高度回退变量 (针对不支持env的旧设备) */
:root {
    /* 假设默认状态栏高度通常在 44px 左右如果有刘海则为 safe-area-inset-top */
    --sys-status-bar-height: max(env(safe-area-inset-top, 44px), 20px);
}

/* 2. 修正虚拟状态栏自身的尺寸和点击穿透 */
.status-bar {
    /* 让虚拟状态栏不阻挡下方的点击事件（以防万一） */
    pointer-events: none;
    height: var(--sys-status-bar-height) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
}

/* 3. 为所有的 App 顶层容器 / 页面顶部留出状态栏的位置 */
/* 涵盖常见的全局容器：如 QQ, Twitter, Instagram, 论坛, 同人墙, Worldbook 等 */
.app-container,
#qqApp,
#twitterApp,
#instagramApp,
#worldbookApp,
#forumApp,
#fanficApp,
#pomodoroApp,
#coupleApp,
.pc-app {
    /* 第一道防线：整体下压 */
    padding-top: var(--sys-status-bar-height) !important;
    box-sizing: border-box;
}

/* 4. 如果 App 内自带固定的 Header，需要把它们内部也顶下来以防内容被截断 */
.qq-header,
.t-header,
.ig-header,
.ig-sub-header,
.wb-header,
.forum-header,
.ff-header,
.pc-header,
.pomo-header,
.cp-nav,
.sub-header {
    /* 配合容器的 padding-top，修复绝对/固定定位时的对齐 */
    /* 因为父容器可能被 padding-top 顶下来了所以 top 设置为 0 或者是基于父容器 */
    top: 0;
    /* 有些头本身自带 padding-top，这需要结合具体情况。但统一保险做法是重置内部或容器 padding */
}

/* 针对部分使用 fixed 定位导致无视父容器 padding-top 的 Header 特殊处理： */
#twitterApp .t-header,
#instagramApp .ig-header,
#instagramApp .ig-sub-header,
#forumApp .forum-header,
#coupleApp .cp-nav,
#qqApp .qq-header,
#pomodoroApp .pomo-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(50px + env(safe-area-inset-top, 0px)); /* 自适应高度 */
}

/* 5. 修正主屏幕（桌面）本身的距离防止顶部 APP 图标被挡 */
.home-screen {
    padding-top: calc(20px + var(--sys-status-bar-height)) !important;
}