/* ============================================================
   Ask EYYAW v255 — Fix overlay, position, animations
   Chargé APRÈS v246 → override total
   ============================================================ */

/* ============================================================
   1. Z-INDEX — Panel AU-DESSUS de l'overlay
   ============================================================ */
.ae-root {
  --ae-z-trigger: 9990 !important;
  --ae-z-overlay: 9991 !important;
  --ae-z-panel: 9993 !important;
}

.ae-root .ae-trigger { z-index: 9990 !important; }
.ae-root .ae-overlay { z-index: 9991 !important; }
.ae-root .ae-panel   { z-index: 9993 !important; }
.ae-root .ae-toast   { z-index: 9999 !important; }

/* ============================================================
   2. OVERLAY — Uniquement sur mobile, et seulement quand ouvert
   ============================================================ */
@media (min-width: 768px) {
  .ae-root .ae-overlay {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .ae-root .ae-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(26,26,26,0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .3s cubic-bezier(0.19,1,0.22,1) !important;
  }
  .ae-root .ae-overlay.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   3. BOUTON — Déplacé à GAUCHE
   ============================================================ */
.ae-root .ae-trigger {
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
}

@media (max-width: 767px) {
  .ae-root .ae-trigger {
    left: 16px !important;
    right: auto !important;
    bottom: 16px !important;
  }
}

/* ============================================================
   4. S'assurer que le panel est bien cliquable
   ============================================================ */
.ae-root .ae-panel {
  pointer-events: auto !important;
}

.ae-root .ae-panel[hidden] {
  display: none !important;
}

/* Sur desktop, le panel est toujours cliquable quand ouvert */
@media (min-width: 768px) {
  .ae-root .ae-panel.is-open {
    pointer-events: auto !important;
  }
  .ae-root .ae-panel:not(.is-open) {
    pointer-events: none !important;
  }
}

/* ============================================================
   5. ARRÊT DES ANIMATIONS au premier clic
   body.ae-has-clicked est ajouté par le JS v255
   ============================================================ */
body.ae-has-clicked .ae-root .ae-trigger,
body.ae-has-clicked .ae-root .ae-trigger-badge,
body.ae-has-clicked .ae-root .ae-suggestion,
body.ae-has-clicked .ae-root .ae-typing-dot,
body.ae-has-clicked .ae-root .ae-message,
body.ae-has-clicked .ae-root .ae-welcome,
body.ae-has-clicked .ae-root .ae-answer-more,
body.ae-has-clicked .ae-root *,
body.ae-has-clicked .ae-root *::before,
body.ae-has-clicked .ae-root *::after {
  animation: none !important;
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
}

/* Mais on GARDE les transitions (utiles pour l'UX) */
body.ae-has-clicked .ae-root .ae-panel,
body.ae-has-clicked .ae-root .ae-overlay,
body.ae-has-clicked .ae-root .ae-answer-toggle-icon,
body.ae-has-clicked .ae-root .ae-send {
  transition-property: transform, opacity, background-color, color, border-color, box-shadow, gap;
  transition-duration: .25s;
  transition-timing-function: cubic-bezier(0.19,1,0.22,1);
}

/* ============================================================
   6. Supprimer les animations infinies à la source
   ============================================================ */
.ae-root .ae-trigger,
.ae-root .ae-trigger-badge {
  animation: none !important;
}

/* Petite pulsation UNIQUEMENT avant le premier clic */
body:not(.ae-has-clicked) .ae-root .ae-trigger {
  animation: ae-v255-pulse 2.4s ease-in-out 3 !important;
}

@keyframes ae-v255-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(26,26,26,0.25), 0 0 0 0 rgba(184,92,56,0.4);
  }
  50% {
    box-shadow: 0 8px 24px rgba(26,26,26,0.25), 0 0 0 12px rgba(184,92,56,0);
  }
}

/* ============================================================
   7. HEADER / BODY / INPUT — Z-index cohérents
   ============================================================ */
.ae-root .ae-header    { position: relative !important; z-index: 3 !important; }
.ae-root .ae-body      { position: relative !important; z-index: 2 !important; }
.ae-root .ae-input-wrap{ position: relative !important; z-index: 3 !important; }

/* ============================================================
   8. Sécurité : le body ne se bloque QUE sur mobile
   ============================================================ */
body.ae-body-locked {
  overflow: hidden !important;
}

@media (min-width: 768px) {
  body.ae-body-locked {
    overflow: auto !important;
  }
}