/* ==========================================================================
   Rillr mobile drawer — site/legal links + iOS scrolling fix
   ========================================================================== */

.mobile-site-links {
    display: none;
}

@media (max-width: 900px) {

    /*
     * The base desktop sidebar sets a viewport height. Reset that on mobile.
     * iOS behaves much more reliably when the fixed drawer owns an explicit
     * dynamic-viewport height instead of mixing top/bottom with 100vh.
     */
    .sidebar {
        top: 58px !important;
        bottom: auto !important;

        height: calc(100dvh - 58px) !important;
        max-height: calc(100dvh - 58px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;

        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        touch-action: pan-y;
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

    /*
     * Keep the lower links in the drawer on mobile only.
     */
    .mobile-site-links {
        display: block;
        margin-top: 6px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }

    .mobile-site-links .side-label {
        margin-bottom: 5px;
    }

    .mobile-site-links .side-link {
        min-height: 40px;
    }

    /*
     * Do not let the copyright inherit larger sidebar/link typography.
     */
    .sidebar-copyright {
        display: block;

        margin-top: 14px !important;
        padding: 14px 8px 8px !important;

        border-top: 1px solid var(--border);

        color: var(--muted) !important;

        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
    }

    /*
     * iOS can rubber-band the page behind a fixed drawer. The drawer itself
     * remains the scrolling surface while this class is active.
     */
    body.mobile-menu-open {
        position: fixed;
        width: 100%;
        overflow: hidden !important;
    }
}

/*
 * Fallback for older iOS versions that do not support dvh.
 */
@supports not (height: 100dvh) {
    @media (max-width: 900px) {
        .sidebar {
            height: calc(100vh - 58px) !important;
            max-height: calc(100vh - 58px) !important;
        }
    }
}


/* Mobile header logout */

.mobile-header-logout {
    display: none;
}

@media (max-width: 700px) {

    .top-actions .header-logout-form {
        display: inline-flex !important;
        align-items: center;
        margin: 0;
    }

    .top-actions .desktop-logout-btn {
        display: none !important;
    }

    .top-actions .mobile-header-logout {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        padding: 0;

        border: 1px solid var(--border);
        border-radius: 12px;

        background: var(--surface);
        color: var(--text);
    }

    .top-actions .mobile-header-logout:hover {
        background: var(--surface2);
        color: var(--accent);
    }
}