/**
 * Kiara Modal Overlay
 * Overlay modal centré à 60% largeur/hauteur avec backdrop sombre
 * Remplace le comportement de petite fenêtre flottante par un modal immersif
 */

:root {
    /* Modal dimensions */
    --ka-modal-width: 60vw;
    --ka-modal-height: 60vh;
    --ka-modal-max-width: 1200px;
    --ka-modal-max-height: 800px;
    --ka-modal-min-width: 320px;
    --ka-modal-min-height: 400px;

    /* Backdrop */
    --ka-backdrop-bg: rgba(0, 0, 0, 0.6);

    /* Animation */
    --ka-modal-anim-duration: 300ms;
    --ka-modal-anim-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index layers */
    --ka-backdrop-z: 9998;
    --ka-modal-z: 9999;
}

/* ============================================
   Backdrop (fond sombre derrière le modal)
   ============================================ */

.ka-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ka-backdrop-bg);
    z-index: var(--ka-backdrop-z);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ka-modal-anim-duration) var(--ka-modal-anim-easing);
    backdrop-filter: blur(2px);
}

/* Backdrop visible quand modal ouvert */
.ka-root[data-open="true"] .ka-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   Modal Window - Mode Desktop/Tablet (>= 768px)
   Centré à 60% largeur/hauteur
   ============================================ */

@media (min-width: 768px) {
    .ka-window {
        /* Position et dimensions */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: var(--ka-modal-width) !important;
        height: var(--ka-modal-height) !important;
        max-width: var(--ka-modal-max-width) !important;
        max-height: var(--ka-modal-max-height) !important;
        min-width: var(--ka-modal-min-width) !important;
        min-height: var(--ka-modal-min-height) !important;

        /* Centrage */
        transform: translate(-50%, -50%) scale(0.9);

        /* Style */
        border-radius: 1rem !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
        z-index: var(--ka-modal-z);

        /* Animation */
        opacity: 0;
        pointer-events: none;
        transition:
            opacity var(--ka-modal-anim-duration) var(--ka-modal-anim-easing),
            transform var(--ka-modal-anim-duration) var(--ka-modal-anim-easing);
    }

    /* État ouvert - Animation fade-in + scale */
    .ka-root[data-open="true"] .ka-window {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
    }

    /* Body height ajusté pour modal */
    .ka-body {
        height: calc(var(--ka-modal-height) - 64px - 84px) !important;
        max-height: calc(var(--ka-modal-max-height) - 64px - 84px) !important;
        overflow-y: auto;
    }
}

/* ============================================
   Modal Window - Mode Mobile (< 768px)
   Fullscreen (comme actuellement)
   ============================================ */

@media (max-width: 767px) {
    /* Backdrop mobile */
    .ka-backdrop {
        display: none; /* Pas de backdrop en mobile fullscreen */
    }

    .ka-window {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        z-index: var(--ka-modal-z);

        /* Animation slide-up */
        transform: translateY(100%);
        pointer-events: none;
        transition: transform var(--ka-modal-anim-duration) var(--ka-modal-anim-easing);
    }

    /* État ouvert - Slide-up animation */
    .ka-root[data-open="true"] .ka-window {
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Safe area iOS (notch) */
    .ka-window {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Body messages scrollable avec safe-area */
    .ka-body {
        height: calc(100dvh - 64px - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   Optimisations Performance
   ============================================ */

/* GPU-accelerated animations */
.ka-window,
.ka-backdrop {
    will-change: transform, opacity;
}

/* Reduce motion pour accessibilité */
@media (prefers-reduced-motion: reduce) {
    .ka-window,
    .ka-backdrop {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   Ajustements spécifiques modal
   ============================================ */

/* Header dans modal - aucun changement nécessaire */
.ka-header {
    /* Le header reste identique */
}

/* Footer dans modal - aucun changement nécessaire */
.ka-footer {
    /* Le footer reste identique */
}

/* Launcher reste visible */
.ka-launcher {
    /* Le launcher garde son style actuel */
    /* Visible même quand modal ouvert */
}

/* ============================================
   Blocage scroll body quand modal ouvert
   ============================================ */

/* Classe ajoutée au body par le contrôleur Stimulus */
body.ka-modal-open {
    overflow: hidden !important;
    /* Éviter le jump de layout causé par la disparition de la scrollbar */
    padding-right: var(--scrollbar-width, 0px);
}

/* Mobile : pas de padding-right (pas de scrollbar visible) */
@media (max-width: 767px) {
    body.ka-modal-open {
        padding-right: 0 !important;
    }
}