/* =============================================================================
   Mobile bottom chrome (≤520px)

   Logged-in: fixed bottom nav only.
   Guest: no nav; sign-in banner at the bottom.

   Bottom sheets anchor to viewport bottom and stack above footer chrome. The
   sheet background covers the nav/banner — content only needs safe-area inset,
   not extra padding for chrome height (that caused the white gap).
============================================================================= */

@media (max-width: 520px) {

    body:not(.guest-mode) {
        --mobile-bottom-chrome-h: var(--mobile-bottom-nav-h);
    }

    body.guest-mode {
        --mobile-bottom-chrome-h: var(--guest-banner-h);
    }

    /* ── Footer chrome ── */

    .left-small-sidebar {
        z-index: var(--z-mobile-bottom-chrome);
    }

    .guest-banner {
        z-index: calc(var(--z-mobile-bottom-chrome) - 5);
    }

    /* ── Bottom sheet backdrops (full viewport) ── */

    /* Bottom sheet backdrops always below their panels (same DOM root). */
    :is(.overflow-backdrop, .chord-backdrop) {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-mobile-bottom-sheet-backdrop);
        pointer-events: auto;
    }

    :is(.overflow-backdrop, .chord-backdrop):not(.active) {
        pointer-events: none;
    }

    .overflow-menu.open,
    #chord-panel.open {
        z-index: var(--z-mobile-bottom-sheet);
    }

    /* ── Primary bottom sheets ── */

    .overflow-menu,
    #chord-panel {
        bottom: 0;
        z-index: var(--z-mobile-bottom-sheet);
        padding-bottom: max(var(--mobile-bottom-sheet-content-pad), var(--mobile-bottom-sheet-safe-pad));
        box-sizing: border-box;
    }

    #chord-panel {
        height: min(
            65dvh,
            calc(100dvh - var(--nav-height, 48px) - 12px)
        );
    }

    .overflow-menu {
        max-height: min(92dvh, calc(100dvh - var(--nav-height, 48px)));
    }

    /* ── Other bottom-up panels ── */

    .add-song-to-col-overlay.active {
        z-index: var(--z-mobile-bottom-sheet);
    }

    .add-song-to-col-modal {
        padding-bottom: var(--mobile-bottom-sheet-safe-pad);
    }

    #group-panel.active {
        z-index: var(--z-mobile-bottom-sheet);
    }

    #group-panel .group-dialog-box {
        padding-bottom: var(--mobile-bottom-sheet-safe-pad);
        box-sizing: border-box;
    }

    .pdf-fullpanel-settings.settings-open {
        z-index: calc(var(--z-mobile-bottom-sheet) + 5);
        padding-bottom: var(--mobile-bottom-sheet-safe-pad);
        box-sizing: border-box;
    }

    /* Confirm/prompt must stay above fullscreen side panels (edit song,
       settings, content editor). Do not reuse --z-mobile-bottom-sheet (300). */
    .cdialog-backdrop {
        z-index: 21000;
        align-items: stretch;
        padding: 0;
    }

    .cdialog-backdrop.active .cdialog-box {
        margin-top: auto;
        width: 100%;
        max-width: none;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        padding-bottom: var(--mobile-bottom-sheet-safe-pad);
        box-sizing: border-box;
    }
}