/*
 * Zen modal shell — comportement mobile canonique.
 *
 * Desktop : la fenêtre modale garde son comportement historique
 * (taille métier, drag, resize lorsque le module l'autorise).
 *
 * Mobile : toute modale TypeVue=1 devient une bottom-sheet :
 * - ancrée en bas ;
 * - presque pleine hauteur ;
 * - pleine largeur tactile ;
 * - scroll interne ;
 * - aucun module métier n'a à imposer sa propre géométrie mobile.
 */
@media (max-width: 768px) {
    modalzone .modal-overlay {
        box-sizing: border-box;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    /*
     * La spécificité est volontairement supérieure à une taille métier du type
     * `.modal-window.xxx-modal`. Sur mobile, le shell Zen possède la géométrie
     * de la modale ; la vue métier possède uniquement son contenu.
     */
    modalzone .modal-overlay .modal-window {
        --zen-mobile-modal-height: 92vh;

        width: 100vw;
        height: var(--zen-mobile-modal-height);
        min-width: 0;
        min-height: 0;
        max-width: 100vw;
        max-height: var(--zen-mobile-modal-height);
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
        overflow: hidden;
        transform: translate3d(0, 0, 0);
    }

    @supports (height: 100dvh) {
        modalzone .modal-overlay .modal-window {
            --zen-mobile-modal-height: 92dvh;
        }
    }

    /*
     * Sur desktop, modal-auto laisse naturellement le contenu décider de la
     * hauteur. Sur mobile, la bottom-sheet est au contraire une vraie surface
     * flex : le contenu reçoit l'espace disponible et gère son scroll interne.
     */
    modalzone .modal-overlay .modal-window .modal-body,
    modalzone .modal-overlay .modal-window.modal-auto .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    modalzone .modal-overlay .modal-window contentmodule,
    modalzone .modal-overlay .modal-window.modal-auto contentmodule {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    modalzone .modal-overlay .modal-window .myModalModule {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    modalzone .modal-overlay .modal-window modalcaption {
        flex: 0 0 auto;
        min-height: 48px;
        border-radius: 14px 14px 0 0;
        cursor: default;
        touch-action: auto;
    }

    /* Le doigt commande et voit tout. */
    modalzone .modal-overlay .modal-window .close {
        width: 40px;
        height: 40px;
        margin: 4px 6px 4px auto;
        font-size: 24px;
    }


    /*
     * Les MessageBox utilisent le même langage visuel mobile, mais restent
     * volontairement compactes : une confirmation courte n'a pas à occuper
     * 92 % de l'écran.
     */
    modalzone .modal-overlay.zen-messagebox-modal .modal-window {
        width: 100vw;
        height: auto;
        min-height: 0;
        max-height: 70vh;
        max-width: 100vw;
    }

    @supports (height: 100dvh) {
        modalzone .modal-overlay.zen-messagebox-modal .modal-window {
            max-height: 70dvh;
        }
    }

    /*
     * MessageBox : le contenu textuel peut défiler, jamais les actions.
     * La chaîne flex doit rester contrainte jusqu'au contenu de la vue ;
     * sinon un message long pousse les boutons sous la zone visible du navigateur.
     */
    modalzone .modal-overlay.zen-messagebox-modal .modal-body,
    modalzone .modal-overlay.zen-messagebox-modal contentmodule {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    modalzone .modal-overlay.zen-messagebox-modal contentmodule > div {
        flex: 1 1 auto !important;
        min-height: 0;
        overflow: hidden;
    }

    modalzone .modal-overlay.zen-messagebox-modal .myModalModule {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    modalzone .modal-overlay.zen-messagebox-modal .message {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        width: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    modalzone .modal-overlay.zen-messagebox-modal .informationMessage {
        box-sizing: border-box;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 !important;
        padding: 18px 16px !important;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        text-align: left !important;
        font-size: 16px !important;
        line-height: 1.45;
    }

    modalzone .modal-overlay.zen-messagebox-modal .myMessageActions {
        box-sizing: border-box;
        flex: 0 0 auto;
        justify-content: stretch !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        background: inherit;
        border-top: 1px solid var(--zen-theme-border, rgba(0, 0, 0, .08));
    }

    modalzone .modal-overlay.zen-messagebox-modal .myMessageActions > * {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        justify-content: center;
        padding: 10px 14px !important;
    }

    /*
     * Login est un module modal, mais une connexion simple doit rester une
     * bottom-sheet compacte. Son contenu devient fluide ; le changement de
     * mot de passe peut naturellement agrandir la feuille jusqu'à la limite.
     */
    modalzone .modal-overlay[data-module="Login"] .modal-window {
        height: auto;
        min-height: 0;
        max-height: 92vh;
    }

    @supports (height: 100dvh) {
        modalzone .modal-overlay[data-module="Login"] .modal-window {
            max-height: 92dvh;
        }
    }

    modalzone .modal-overlay[data-module="Login"] .modal-body,
    modalzone .modal-overlay[data-module="Login"] contentmodule {
        flex: 0 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    modalzone .modal-overlay[data-module="Login"] .myModalModule {
        flex: 0 1 auto;
        min-height: 0;
        overflow: auto;
    }

    modalzone .modal-overlay.is-open .modal-window {
        animation: zen-mobile-modal-sheet-in 180ms ease-out both;
    }
}

@keyframes zen-mobile-modal-sheet-in {
    from {
        transform: translate3d(0, 24px, 0);
        opacity: .96;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    modalzone .modal-overlay.is-open .modal-window {
        animation: none;
    }
}