/* Mobile bottom nav — scoped; only ≤768px. Do not set global touch min-heights. */
.vd-mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .vd-mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--vd-z-mobile-bottom-nav, 1048);
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        margin: 0;
        background: var(--vd-surface-elevated, rgba(255, 255, 255, 0.92));
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    }

    .vd-mobile-bottom-nav__link {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding: 6px 2px;
        text-decoration: none;
        color: var(--vd-text-muted, #6c757d);
        font-size: 0.65rem;
        line-height: 1.1;
        border-radius: 0.5rem;
    }

    .vd-mobile-bottom-nav__link i {
        font-size: 1.25rem;
        line-height: 1;
    }

    .vd-mobile-bottom-nav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vd-mobile-bottom-nav__link.is-active {
        color: var(--bs-primary, #0d6efd);
        font-weight: 600;
    }

    body:has(.vd-mobile-bottom-nav) .main-wrapper > main#vd-main {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.vd-mobile-bottom-nav) .footer.footer--with-sidebar {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
}