/* ==========================================================================
   移动端底部 Tab Bar（仅 ≤768px 显示）
   桌面端隐藏，保持完整首页
   ========================================================================== */

.mobile-tab-bar {
    display: none;
}

@media (max-width: 768px) {

    /* 防止页面内容被固定 Tab Bar 遮挡（仅在加载本组件的页面生效）。
       避让高度必须与 .mobile-tab-bar 实际占位一致：60px + iPhone 底部安全区。
       constant() 为 iOS < 11.2 回退；未启用 viewport-fit=cover 时 env() 解析为 0，不影响普通机型。 */
    body {
        padding-bottom: calc(60px + constant(safe-area-inset-bottom));
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }

    /* 5 个主 Tab 页面：隐藏顶部导航链接（导航由底部 Tab Bar 承担），显示搜索框 */
    body.has-mobile-tabbar .mobile-nav-links {
        display: none;
    }

    /* 移动端页脚内容（PC 四栏 + 备案条）均已隐藏，只剩 footer 自身 2rem 内边距形成的空深色带，
       紧贴 Tab Bar 上方影响观感，此处压平（仅作用于接入本组件的页面） */
    body footer {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.has-mobile-tabbar .mobile-header-search {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 12px;
        background: var(--color-bg, #F8F9FA);
        border-radius: var(--radius, 8px);
        margin: 4px 0;
    }

    .mobile-search-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: var(--color-text-secondary, #6C757D);
    }

    body.has-mobile-tabbar .mobile-header-search input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        outline: none;
        font-size: 14px;
        color: var(--color-text, #1A1A1A);
    }

    body.has-mobile-tabbar .mobile-header-search input::placeholder {
        color: var(--color-text-muted, #999);
    }

    .mobile-tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        height: 60px;
        background: #FFFFFF;
        border-top: 1px solid var(--color-border, #E9ECEF);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
        /* 适配 iPhone 底部安全区（constant 为旧 iOS 回退） */
        padding-bottom: constant(safe-area-inset-bottom, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mobile-tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 44px;
        color: var(--color-text-secondary, #6C757D);
        text-decoration: none;
        font-size: 11px;
        transition: color 0.2s ease;
    }

    .mobile-tab-icon {
        width: 22px;
        height: 22px;
    }

    .mobile-tab-label {
        line-height: 1.2;
    }

    .mobile-tab-item.active {
        color: var(--color-primary, #FF6B35);
    }

    .mobile-tab-item:active {
        opacity: 0.7;
    }
}