/* =========================================================
   GS_APP_LIKE_CENTRAL_V1
   Controle mobile de viewport e rolagem do GS Central.
   ========================================================= */

:root {
    --gs-visual-viewport-height: 100dvh;
    --gs-visual-viewport-offset-top: 0px;
}

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

/*
 * Os wrappers adicionais não alteram o comportamento no desktop.
 */
@media (min-width: 769px) {
    .gs-app-like-portal-scroll,
    .gs-app-like-billing-scroll {
        display: contents;
    }
}

@media (max-width: 768px) {
    html.gs-app-like-enabled {
        width: 100%;
        height: var(--gs-visual-viewport-height);
        min-height: 0;
        overflow: hidden !important;
        overscroll-behavior: none;
        background: var(--bg, #06101d);
    }

    html.gs-app-like-enabled body.gs-app-like-body {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: var(--gs-visual-viewport-height);
        min-height: 0 !important;
        max-height: var(--gs-visual-viewport-height);
        margin: 0;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.gs-app-like-body .ambient {
        max-width: 100vw;
        pointer-events: none !important;
    }

    body.gs-app-like-body .gs-app-like-scroll {
        min-width: 0;
        min-height: 0 !important;
        max-width: 100%;
        max-height: none;

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

        overscroll-behavior-x: none;
        overscroll-behavior-y: contain;

        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* =====================================================
       PAINEL ADMINISTRATIVO
       ===================================================== */

    body.gs-app-like-admin .app-shell {
        width: 100%;
        height: var(--gs-visual-viewport-height);
        min-height: 0 !important;
        max-height: var(--gs-visual-viewport-height);
        overflow: hidden !important;
    }

    body.gs-app-like-admin .main-area {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;

        overflow: hidden !important;
    }

    body.gs-app-like-admin .topbar {
        flex: 0 0 auto;
    }

    body.gs-app-like-admin .central-content-area {
        flex: 1 1 auto;

        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0;

        padding-bottom: calc(
            var(--mobile-bottom-nav-height, 64px)
            + 18px
            + env(safe-area-inset-bottom)
        ) !important;
    }

    body.gs-app-like-admin .sidebar {
        height: var(--gs-visual-viewport-height) !important;
        max-height: var(--gs-visual-viewport-height) !important;
    }

    /* =====================================================
       LOGIN, CADASTRO, RECUPERAÇÃO E RECEPÇÃO
       ===================================================== */

    body.gs-app-like-guest {
        display: flex !important;
        flex-direction: column;

        align-items: stretch !important;
        justify-content: flex-start !important;

        padding: 0 !important;
    }

    body.gs-app-like-guest > .gs-app-like-guest-scroll {
        flex: 1 1 auto;

        width: 100%;
        min-height: 0 !important;
    }

    /*
     * O padding é adicionado apenas ao guest-shell padrão.
     * Recepção e onboarding continuam usando o próprio CSS.
     */
    body.gs-app-like-guest
    > .guest-shell.gs-app-like-guest-scroll {
        padding:
            max(14px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(14px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
    }

    /* =====================================================
       SOLUÇÕES E MINHA CONTA
       ===================================================== */

    body.gs-app-like-portal,
    body.gs-app-like-billing {
        display: flex !important;
        flex-direction: column;

        align-items: stretch !important;
        justify-content: flex-start !important;

        padding: 0 !important;
    }

    body.gs-app-like-portal > .portal-topbar,
    body.gs-app-like-billing > .billing-public-topbar {
        flex: 0 0 auto;
    }

    .gs-app-like-portal-scroll,
    .gs-app-like-billing-scroll {
        display: block;
        flex: 1 1 auto;

        width: 100%;
        min-height: 0 !important;
    }

    .gs-app-like-portal-scroll > .gs-portal-shell,
    .gs-app-like-billing-scroll > .billing-public-shell {
        min-height: 0 !important;
    }

    .gs-app-like-portal-scroll > .portal-footer,
    .gs-app-like-billing-scroll > .billing-public-footer {
        margin-bottom: max(
            0px,
            env(safe-area-inset-bottom)
        );
    }

    /*
     * Modais e menus continuam com rolagem própria.
     */
    .modal,
    .beauty-modal,
    [role="dialog"],
    [popover] {
        overscroll-behavior: contain;
    }
}