/* Animations d'ABC Chat IA. Chaque animation traduit un état (envoi, attente,
   ouverture) ; rien de décoratif en continu. Le réglage système « réduire les
   animations » coupe tout (dernier bloc). */

/* Nouveau message : apparition douce (appliquée seulement au dernier ajouté). */
@keyframes message-entre {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.tour.nouveau,
.message.nouveau { animation: message-entre 0.28s cubic-bezier(0.16, 1, 0.3, 1); }

/* Écran vide : les quatre morceaux arrivent l'un après l'autre (70 ms d'écart) au lieu
   du bloc entier d'un seul tenant. C'est le même mouvement, mais il raconte un ordre de
   lecture : le motif, la question, l'explication, puis les idées à cliquer. */
@keyframes bloc-entre {
  from { opacity: 0; translate: 0 10px; filter: blur(4px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
.ecran-vide > * {
  opacity: 0;
  animation: bloc-entre 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ecran-vide > :nth-child(2) { animation-delay: 0.07s; }
.ecran-vide > :nth-child(3) { animation-delay: 0.14s; }
.ecran-vide > :nth-child(4) { animation-delay: 0.21s; }

/* « L'IA réfléchit » : trois points tricolores qui pulsent tour à tour. */
@keyframes point-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
.points-reflexion span { animation: point-pulse 1.1s ease-in-out infinite; }
.points-reflexion span:nth-child(2) { animation-delay: 0.18s; }
.points-reflexion span:nth-child(3) { animation-delay: 0.36s; }

/* Dialogues : fondu + léger zoom, en TRANSITIONS et non en animation, pour que la
   fermeture s'anime elle aussi (une fenêtre qui disparaît d'un coup surprend, surtout
   sur téléphone où c'est une feuille pleine largeur).
   Les trois ingrédients : l'état de départ (`@starting-style`), l'état ouvert, et
   `transition-behavior: allow-discrete` qui retient `display` et `overlay` le temps que
   le mouvement finisse. Un navigateur qui ne connaît pas tout ça ouvre et ferme
   d'un coup, comme avant : rien ne casse.
   La sortie est plus courte que l'entrée (0.15 s contre 0.22) : on regarde déjà ailleurs. */
dialog {
  opacity: 0;
  translate: 0 10px;
  scale: 0.97;
  transition-property: opacity, translate, scale, display, overlay;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
}
dialog[open] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition-duration: 0.22s;
}
@starting-style {
  dialog[open] { opacity: 0; translate: 0 10px; scale: 0.97; }
}

dialog::backdrop {
  opacity: 0;
  transition-property: opacity, display, overlay;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}
dialog[open]::backdrop { opacity: 1; transition-duration: 0.2s; }
@starting-style {
  dialog[open]::backdrop { opacity: 0; }
}

/* Téléphone : la fenêtre est une feuille, elle monte donc du bas — et redescend. */
@media (max-width: 760px), (max-height: 500px) and (max-width: 950px) and (pointer: coarse) {
  dialog { translate: 0 26px; scale: 1; }
  @starting-style {
    dialog[open] { translate: 0 26px; scale: 1; }
  }
}

@keyframes voile-entre {
  from { opacity: 0; }
}
body.panneau-ouvert #voile { animation: voile-entre 0.2s ease-out; }

/* Accueil : transition douce entre les étapes. */
@keyframes etape-entre {
  from { opacity: 0; translate: 0 6px; }
}
.etape-anim { animation: etape-entre 0.18s ease-out; }

/* Bouton étincelle (améliorer) pendant la reformulation. */
@keyframes pulse-douce {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
#btnAmeliorer.chargement .icone { animation: pulse-douce 0.9s ease-in-out infinite; }

/* Respect du réglage système « réduire les animations ». Les DÉLAIS tombent eux aussi :
   sans ça, la cascade de l'écran vide laisserait le contenu invisible un cinquième de
   seconde chez quelqu'un qui a justement demandé qu'il ne se passe rien. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, *::backdrop {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}