/* 全站页脚版权已隐藏；移动端导航固定在可视窗口底部，不随内容滚动。 */
.footer { display: none !important; }
.global-mobile-nav { display: none; }

@media (max-width: 1023px) {
    /* 头部模板为桌面翻页效果给 body 加了 perspective；它会让 fixed
       子元素相对文档而非视口定位。移动端关闭该效果，底栏才会始终贴在屏幕底部。 */
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        perspective: none !important;
        transform: none !important;
    }

    .page-container {
        animation: none !important;
        transform: none !important;
    }

    /* 公共头部页面采用应用式滚动：浏览器视口不滚动，只有中间内容区滚动。
       因而无论向上还是向下浏览，固定底栏都不会被带离屏幕。 */
    html:has(body > .page-container) {
        height: 100%;
        overflow: hidden;
    }

    body:has(> .page-container) {
        box-sizing: border-box;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    body:has(> .page-container) .page-container {
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .global-mobile-nav {
        align-items: center;
        background: rgba(250, 251, 247, .98);
        border-top: 1px solid rgba(16, 39, 28, .14);
        bottom: 0;
        display: flex;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        left: 0;
        padding: 5px 12px calc(7px + env(safe-area-inset-bottom, 0px));
        position: fixed !important;
        right: 0;
        z-index: 1200;
    }

    .global-mobile-nav a {
        align-items: center;
        color: rgba(16, 39, 28, .76);
        display: flex;
        flex: 1;
        flex-direction: column;
        font-size: 10px;
        gap: 3px;
        justify-content: center;
        text-decoration: none;
    }

    .global-mobile-nav a i { font-size: 18px; }

    .global-mobile-nav__create {
        background: #2e7d32;
        border: 4px solid #f3f5ed;
        border-radius: 50%;
        color: #fff !important;
        flex: 0 0 auto !important;
        height: 54px;
        margin-top: -28px;
        width: 54px;
    }

    .global-mobile-nav__create i { font-size: 23px !important; }

}

@media (max-width: 767px) {
    /* 首页和分类页的旧底栏位于动画容器内，固定定位会随页面滚动。
       统一改用容器外的公共底栏，确保始终固定在浏览器视口底部。 */
    body:has(.forum-home) .forum-mobile-tabs,
    body:has(.category-page) .forum-mobile-tabs { display: none !important; }
    body:has(.forum-home) .global-mobile-nav,
    body:has(.category-page) .global-mobile-nav { display: flex !important; position: fixed !important; }
}

/* 某些手机浏览器开启“桌面版网页”后，CSS 宽度会大于手机断点。
   仍以触控设备为准，强制提供固定底栏，不让导航落入文档底部。 */
@media (pointer: coarse) and (min-width: 768px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        perspective: none !important;
        transform: none !important;
    }
    .page-container { animation: none !important; transform: none !important; }
    html:has(body > .page-container) { height: 100%; overflow: hidden; }
    body:has(> .page-container) { box-sizing: border-box; height: 100dvh; min-height: 0; overflow: hidden; padding-bottom: 0; }
    body:has(> .page-container) .page-container { -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .global-mobile-nav { display: flex !important; position: fixed !important; }
    body:has(.forum-home) .forum-mobile-tabs,
    body:has(.category-page) .forum-mobile-tabs { display: none !important; }
}

/* 真实触控设备的最终兜底：包括开启“桌面版网页”的手机浏览器。 */
html.touch-device body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    perspective: none !important;
    transform: none !important;
}
html.touch-device .page-container { animation: none !important; transform: none !important; }
html.touch-device:has(body > .page-container) { height: 100%; overflow: hidden; }
html.touch-device body:has(> .page-container) { box-sizing: border-box; height: 100dvh; min-height: 0; overflow: hidden; padding-bottom: 0; }
html.touch-device body:has(> .page-container) .page-container { -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
html.touch-device .global-mobile-nav { display: flex !important; position: fixed !important; }
html.touch-device body:has(.forum-home) .forum-mobile-tabs,
html.touch-device body:has(.category-page) .forum-mobile-tabs { display: none !important; }