/* ==========================================================================
   H3 MAIL — PATCH 21 / ACABAMENTO MOBILE
   ==========================================================================

   Este arquivo é carregado por último e contém somente ajustes mobile.
   Desktop permanece intacto.
   ========================================================================== */


/* ==========================================================================
   1. Botão "Saiba mais" do aviso da tela de login
   ========================================================================== */

@media (max-width: 720px) {

    .auth-page .login-launch-notice {
        display: grid !important;

        grid-template-columns:
            1fr !important;

        justify-items: center !important;

        gap: 14px !important;

        text-align: center !important;
    }

    .auth-page .login-launch-copy {
        justify-items: center !important;

        text-align: center !important;
    }

    .auth-page .login-launch-more {
        justify-self: center !important;

        min-width: 112px !important;

        margin:
            0
            auto !important;
    }
}


/* ==========================================================================
   2. Modal de novidades no celular
   ==========================================================================

   A estrutura antiga usava overflow:hidden no card. Em telas baixas o
   conteúdo ultrapassava a altura disponível e a parte inferior era cortada.

   Agora:
   - o card respeita a altura REAL do aparelho (100dvh);
   - hero permanece no topo;
   - corpo possui rolagem própria;
   - botão principal fica sticky no final da área visível.
   ========================================================================== */

@media (max-width: 760px) {

    body.launch-modal-open {
        overflow: hidden !important;
    }

    .launch-modal {
        align-items: center !important;

        padding:
            10px !important;
    }

    .launch-modal-card {
        width:
            calc(
                100vw
                - 20px
            ) !important;

        max-width: 430px !important;

        height: auto !important;

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

        display: flex !important;

        flex-direction:
            column !important;

        border-radius: 18px !important;

        overflow: hidden !important;
    }

    /*
    | Cabeçalho da modal mais compacto.
    */

    .launch-modal-hero {
        flex:
            0
            0
            auto !important;

        padding:
            22px
            20px
            18px !important;
    }

    .launch-modal-hero .launch-modal-kicker {
        margin-bottom: 8px !important;

        font-size: 8px !important;
    }

    .launch-modal-hero h2 {
        max-width: none !important;

        margin:
            0
            34px
            10px
            0 !important;

        font-size: 25px !important;

        line-height: 1.08 !important;
    }

    .launch-modal-lead {
        max-width: none !important;

        font-size: 11px !important;

        line-height: 1.55 !important;
    }

    .launch-modal-close {
        top: 10px !important;
        right: 10px !important;

        width: 34px !important;
        height: 34px !important;
    }

    /*
    | O corpo passa a ser a área rolável da modal.
    */

    .launch-modal-body {
        min-height: 0 !important;

        flex:
            1
            1
            auto !important;

        overflow-y: auto !important;

        overscroll-behavior: contain !important;

        -webkit-overflow-scrolling: touch !important;

        padding:
            17px
            20px
            20px !important;
    }

    .launch-modal-section-label {
        margin-bottom: 10px !important;
    }

    .launch-modal-highlights {
        grid-template-columns:
            1fr !important;

        gap: 9px !important;

        margin-bottom: 14px !important;
    }

    .launch-modal-highlights > div {
        min-height: 0 !important;

        gap: 6px !important;

        border-radius: 13px !important;

        padding: 13px 14px !important;
    }

    .launch-modal-highlight-icon {
        width: 34px !important;
        height: 34px !important;

        margin-bottom: 0 !important;

        border-radius: 10px !important;

        font-size: 11px !important;
    }

    .launch-modal-highlights strong {
        font-size: 12px !important;

        line-height: 1.3 !important;
    }

    .launch-modal-highlights span:not(
        .launch-modal-highlight-icon
    ) {
        font-size: 10px !important;

        line-height: 1.5 !important;
    }

    .launch-modal-note {
        padding:
            11px
            12px !important;

        font-size: 10px !important;

        line-height: 1.5 !important;
    }

    /*
    | Checkbox da modal automática.
    */

    .launch-modal-dont-show {
        margin:
            13px
            0
            10px !important;

        font-size: 10px !important;
    }

    /*
    | O botão não some mais no fim de uma modal enorme.
    | Ele permanece visível na parte inferior da área rolável.
    */

    .launch-modal-primary {
        position: sticky !important;

        z-index: 3 !important;

        bottom: 0 !important;

        height: 44px !important;

        margin-top: 14px !important;

        border-radius: 11px !important;

        box-shadow:
            0
            -8px
            18px
            var(--surface) !important;
    }
}


/*
| Celulares pequenos / pouca altura.
*/

@media (max-width: 430px) {

    .launch-modal {
        padding: 8px !important;
    }

    .launch-modal-card {
        width:
            calc(
                100vw
                - 16px
            ) !important;

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

        border-radius: 16px !important;
    }

    .launch-modal-hero {
        padding:
            19px
            17px
            15px !important;
    }

    .launch-modal-hero h2 {
        font-size: 23px !important;
    }

    .launch-modal-body {
        padding:
            14px
            17px
            17px !important;
    }
}


/* ==========================================================================
   3. NOVO E-MAIL MOBILE — IMPLEMENTAÇÃO CORRIGIDA
   ========================================================================== */

.mobile-compose-shortcut {
    display: none;
}

@media (max-width: 880px) {

    /*
    | IMPORTANTE:
    | .mail-list-header continua sendo position:sticky como no app.css.
    | Não alteramos position/top, evitando o espaço vazio de 64px.
    */

    .mail-list-header {
        gap: 6px !important;
    }

    .mail-list-heading-block {
        min-width: 0 !important;

        flex:
            1
            1
            auto !important;
    }

    .mail-list-title {
        min-width: 0 !important;
    }

    .mail-list-title span {
        overflow: hidden !important;

        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .list-header-actions {
        flex:
            0
            0
            auto !important;

        gap: 3px !important;
    }

    /*
    | Atalho compacto.
    |
    | A barra sticky já é um elemento posicionado, então o botão absoluto
    | usa a própria barra como referência sem deslocá-la.
    */
    .mobile-compose-shortcut {
        position: absolute !important;
        z-index: 4 !important;

        top: 50% !important;

        /*
        | Centro do espaço livre entre "Caixa de Entrada"
        | e filtro/atualizar.
        */
        left:
            calc(
                50%
                + 30px
            ) !important;

        width: auto !important;
        min-width: 82px !important;
        height: 30px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 9px !important;

        /*
        | EXATAMENTE a mesma identidade do botão da sidebar.
        | --button = #b254ff
        */
        background: var(--button) !important;
        color: #fff !important;

        box-shadow:
            0
            7px
            18px
            rgba(
                178,
                84,
                255,
                .18
            ) !important;

        margin: 0 !important;

        padding:
            0
            10px !important;

        cursor: pointer !important;

        font-size: 9px !important;
        font-weight: 850 !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        transform:
            translate(
                -50%,
                -50%
            ) !important;
    }

    .mobile-compose-shortcut:hover,
    .mobile-compose-shortcut:focus-visible {
        background: var(--button-hover) !important;
        color: #fff !important;
    }

    .mobile-compose-shortcut:active {
        background: var(--button-hover) !important;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(.97)
            !important;
    }
}


/*
| Em telas estreitas ainda mantemos "Novo e-mail".
| Só reduzimos alguns pixels, sem transformar em "+".
*/

@media (max-width: 390px) {

    .mobile-compose-shortcut {
        left:
            calc(
                50%
                + 25px
            ) !important;

        min-width: 75px !important;

        padding:
            0
            8px !important;

        font-size: 8px !important;
    }
}


/* ==========================================================================
   H3 MAIL — PATCH 24 / MODAL MAIS LEVE
   ========================================================================== */

/*
| A modal agora possui somente:
| - título;
| - cards 01 e 02;
| - observação final;
| - botão.
*/

.launch-modal-hero {
    padding:
        28px
        38px
        24px !important;
}

.launch-modal-hero h2 {
    margin-bottom: 0 !important;
}

.launch-modal-highlights {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;
}

.launch-modal-highlights > div {
    min-height: 138px !important;
}

@media (max-width: 760px) {

    .launch-modal-hero {
        padding:
            20px
            20px
            17px !important;
    }

    .launch-modal-hero h2 {
        margin-bottom: 0 !important;
    }

    /*
    | No celular os dois cards continuam empilhados.
    */
    .launch-modal-highlights {
        grid-template-columns:
            1fr !important;
    }
}

@media (max-width: 430px) {

    .launch-modal-hero {
        padding:
            18px
            17px
            15px !important;
    }
}