/* ======================== Mobile Bottom Tab Bar ======================== */

/* Hide old hamburger toggle */
#navPanelToggle {
    display: none !important;
}

/* Bottom Tab Bar — hidden on desktop, shown on mobile */
#navBottomBar {
    display: none;
}

@media (max-width: 980px) {
    #nav {
        display: none !important;
    }

    #navBottomBar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        justify-content: space-around;
        align-items: center;
        height: 58px;
        background: rgba(12, 16, 22, 0.65);
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        border-top: none;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35), 0 -1px 6px rgba(0, 0, 0, 0.2);
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /*
     * === VARIANT OPTIONS for mobile bottom bar separator ===
     *
     * VARIANT A (current/default) — No border, enhanced upward shadow only:
     *   border-top: none;
     *   box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35), 0 -1px 6px rgba(0, 0, 0, 0.2);
     *
     * VARIANT B — Very subtle 1px solid line (barely visible):
     *   border-top: 1px solid rgba(255, 255, 255, 0.05);
     *   box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3);
     *
     * VARIANT C — Gradient top edge (matching desktop nav style):
     *   border-top: none;
     *   box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
     *   + add #navBottomBar::before pseudo-element with:
     *     content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
     *     background: linear-gradient(90deg, transparent, rgba(126,207,240,0.25), transparent);
     */

    #navBottomBar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 600;
        padding: 8px 4px 6px;
        transition: color 0.2s;
        flex: 1;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        border-bottom: none !important;
    }

    #navBottomBar a .btb-icon {
        font-size: 1.1rem;
        line-height: 1;
    }

    #navBottomBar a .btb-label {
        font-size: 0.58rem;
        line-height: 1;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 68px;
    }

    #navBottomBar a.active {
        color: #7ecff0;
    }

    /* Bottom padding so page content isn't hidden behind tab bar */
    body {
        padding-bottom: 58px;
    }

    /* Push back-to-top button above the tab bar */
    .back-to-top-btn,
    #back-to-top,
    #global-back-to-top {
        bottom: 74px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    /* Hide old navPanel content (slide-out) since we use bottom bar now */
    #navPanel {
        display: none !important;
    }
}

/* Smaller screens — slightly compact */
@media (max-width: 480px) {
    #navBottomBar {
        height: 54px;
    }

    #navBottomBar a .btb-icon {
        font-size: 1rem;
    }

    #navBottomBar a .btb-label {
        font-size: 0.52rem;
    }

    body {
        padding-bottom: 54px;
    }

    .back-to-top-btn,
    #back-to-top,
    #global-back-to-top {
        bottom: 68px !important;
        width: 40px !important;
        height: 40px !important;
    }
}