/*
 * Mobile scroll hardening.
 * Keeps one reliable vertical scroll path on phones and prevents modal/form
 * submit buttons from being clipped below the visual viewport.
 */
:root {
    --app-viewport-height: 100dvh;
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@supports not (height: 100dvh) {
    :root { --app-viewport-height: 100vh; }
}

@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 100%;
        overflow-x: clip;
        overflow-y: auto;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    body {
        position: static;
        padding-bottom: var(--app-safe-bottom);
    }

    body > .container,
    #pageContent,
    .page-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        max-height: none;
        overflow-x: clip;
        overflow-y: visible;
        touch-action: pan-y;
    }

    main,
    section,
    article,
    form,
    fieldset {
        min-width: 0;
    }

    input,
    textarea,
    select,
    [contenteditable="true"] {
        scroll-margin-top: 22vh;
        scroll-margin-bottom: 28vh;
    }

    button[type="submit"],
    input[type="submit"],
    .btn[type="submit"] {
        scroll-margin-bottom: calc(5rem + var(--app-safe-bottom));
    }

    /* The navigation overlay is the only intentional document scroll lock. */
    html.mobile-nav-open,
    html.mobile-nav-open body {
        overflow: hidden;
        touch-action: none;
    }

    .mobile-menu {
        height: var(--app-viewport-height);
        max-height: var(--app-viewport-height);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Let the overlay own scrolling on mobile. Nested fixed-height modal
     * scrollers are unreliable when the browser bar or keyboard changes size.
     */
    .modal-overlay.open {
        display: flex;
        align-items: flex-start !important;
        justify-content: center;
        width: 100%;
        height: var(--app-viewport-height);
        min-height: var(--app-viewport-height);
        max-height: none;
        padding:
            max(.35rem, env(safe-area-inset-top, 0px))
            max(.35rem, env(safe-area-inset-right, 0px))
            max(calc(.9rem + var(--app-safe-bottom)), .9rem)
            max(.35rem, env(safe-area-inset-left, 0px));
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .modal-overlay.open > .modal {
        flex: 0 0 auto;
        width: min(100%, 700px);
        height: auto !important;
        min-height: 0;
        max-height: none !important;
        margin: auto 0;
        overflow: visible !important;
        transform: translateZ(0);
    }

    .modal-overlay.open .modal-header {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .modal-overlay.open .modal-body {
        height: auto !important;
        min-height: 0;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto;
        padding-bottom: calc(1rem + var(--app-safe-bottom));
    }

    .wallet-modal,
    .support-ticket-modal {
        display: flex !important;
        flex-direction: column;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .wallet-modal__body,
    .support-ticket-modal .modal-body {
        flex: 0 0 auto;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .wallet-modal__actions {
        position: static !important;
        inset: auto !important;
        margin: .8rem 0 0 !important;
        padding: .8rem 0 0 !important;
        background: none !important;
    }
}

/* Support: use document scrolling on phones instead of nested 72–76vh traps. */
@media (max-width: 760px) {
    .support-page-user,
    .support-admin-page,
    .support-ticket-layout,
    .support-ticket-sidebar,
    .support-ticket-thread,
    .support-thread-shell {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
    }

    .support-ticket-layout {
        display: block !important;
    }

    .support-ticket-layout.ticket-open .support-ticket-sidebar {
        display: none !important;
    }

    .support-ticket-layout:not(.ticket-open) .support-ticket-thread {
        display: none !important;
    }

    .support-ticket-layout.ticket-open .support-ticket-thread {
        display: flex !important;
    }

    .support-ticket-list,
    .support-chat-messages {
        flex: 0 0 auto;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
        scrollbar-gutter: auto;
    }

    .support-ticket-list {
        padding-bottom: calc(1rem + var(--app-safe-bottom));
    }

    .support-chat-messages {
        min-height: 240px !important;
        padding-bottom: 1rem;
    }

    .support-composer {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding-bottom: calc(.55rem + var(--app-safe-bottom));
        background: rgba(5, 8, 17, .96);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .support-create-submit,
    .support-send-button {
        position: relative;
        z-index: 1;
    }

    .support-ticket-modal {
        width: min(100%, 620px) !important;
        border-radius: 18px !important;
    }

    .support-ticket-modal .modal-header {
        flex: 0 0 auto;
    }

    .support-ticket-modal .modal-body {
        flex: 0 0 auto;
        padding-bottom: calc(1rem + var(--app-safe-bottom)) !important;
    }
}

@media(max-width:760px){.pf-customization,.pf-customization-block,.pf-customization-dashboard{max-width:100%;overflow:hidden}.pf-cursor-card,.pf-background-card,.pf-avatar-decor-card{min-width:0}.contact-hub-grid{grid-template-columns:1fr!important}}