/* =========================================================================
   EPICVIEW — Assistant IA : bouton flottant, voile givré, noyau animé
   et barre de saisie centrée en bas.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Bouton flottant, en bas à gauche
   ---------------------------------------------------------------------- */
.ev-ai-fab {
  position: fixed; z-index: 9200;
  left: clamp(.9rem, 2.5vw, 1.6rem);
  bottom: -20px;
  bottom: calc(-20px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: 200px; height: 150px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: scale(0.8);
  transition: transform .3s var(--ev-ease), opacity .4s var(--ev-ease), visibility .4s var(--ev-ease);
  -webkit-tap-highlight-color: transparent;
}
.ev-ai-fab.ev-ai-fab--visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: scale(1);
}
.ev-ai-fab.ev-ai-fab--visible:hover {
  transform: scale(1.12);
}
.ev-ai-fab:focus-visible { outline: 2px solid var(--ev-red-lite); outline-offset: 3px; }

.ev-ai-fab__img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 560px) {
  .ev-ai-fab {
    width: 100px;
    height: 50px;
    bottom: 5px;
    bottom: max(5px, env(safe-area-inset-bottom));
  }
}

/* Quand l'assistant est ouvert, le bouton s'efface. */
body.ev-ai-open .ev-ai-fab { opacity: 0; pointer-events: none; transform: scale(.85); }

/* -------------------------------------------------------------------------
   2. Le panneau
   ---------------------------------------------------------------------- */
.ev-ai {
  position: fixed; inset: 0; z-index: 9300;
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; transition: opacity .3s var(--ev-ease);
}
/* Sans cette règle, `display: grid` l'emporte sur le style navigateur de
   [hidden] et le panneau fermé continuerait d'intercepter les clics. */
.ev-ai[hidden] { display: none; }
.ev-ai:not(.is-open) { pointer-events: none; }
.ev-ai.is-open { opacity: 1; }

/* Voile givré : le site reste lisible derrière, juste adouci. */
.ev-ai__scrim {
  position: absolute; inset: 0;
  /* Assez sombre pour que la page derrière ne concurrence plus le panneau,
     assez transparent pour qu'on sache qu'on est resté sur le site.
     Le fond opaque fait le gros du travail : le flou peut donc rester
     modeste, et son coût de calcul avec lui. */
  background: rgba(4, 4, 7, .80);
  -webkit-backdrop-filter: blur(var(--ev-ai-flou, 10px)) brightness(.7);
  backdrop-filter: blur(var(--ev-ai-flou, 10px)) brightness(.7);
  /* Sa propre couche : sans cela, chaque image du canvas au-dessus invalide
     la zone et force le navigateur à reflouter toute la page derrière. */
  transform: translateZ(0);
  will-change: opacity;
  contain: strict;
}

.ev-ai__close {
  position: absolute; z-index: 3;
  top: clamp(.9rem, 2.5vw, 1.5rem); right: clamp(.9rem, 2.5vw, 1.5rem);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #fff;
  transition: background .25s var(--ev-ease), transform .25s var(--ev-ease);
}
.ev-ai__close:hover { background: rgba(255, 255, 255, .15); transform: rotate(90deg); }
.ev-ai__close svg { width: 19px; height: 19px; }

/* -------------------------------------------------------------------------
   3. Le noyau animé, au centre
   ---------------------------------------------------------------------- */
.ev-ai__core {
  position: relative; grid-row: 1;
  display: grid; place-items: center;
  min-height: 0; pointer-events: none;
  overflow: hidden;
}
/* Le noyau n'occupe qu'un disque au centre : inutile de peindre et de
   transférer tout l'écran à chaque image. Un carré centré suffit, et divise
   la surface à composer par cinq environ. */
.ev-ai__canvas {
  display: block;
  width: min(76vmin, 620px);
  height: min(76vmin, 620px);
  margin: auto;
  /* Couche dédiée : les images du noyau ne repeignent que ce calque. */
  transform: translateZ(0);
  will-change: transform;
  contain: strict;
}
/* Lueur douce sous le noyau : le canvas dessine les traits, le CSS l'ambiance. */
.ev-ai__coreglow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(60vmin, 520px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 91, 91, .20), rgba(164, 0, 0, .08) 42%, transparent 72%);
  transform: translate(-50%, -50%) translateZ(0);
  will-change: opacity, transform;
  animation: evAiBreath 6s ease-in-out infinite;
}
@keyframes evAiBreath {
  0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* -------------------------------------------------------------------------
   4. La barre de saisie, centrée en bas
   ---------------------------------------------------------------------- */
.ev-ai__dock {
  grid-row: 2; position: relative; z-index: 2;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 0 clamp(.8rem, 3vw, 1.4rem) clamp(1.1rem, 3vw, 2rem);
  padding-bottom: max(clamp(1.1rem, 3vw, 2rem), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .8rem;
  transform: translateY(18px); opacity: 0;
  transition: transform .4s var(--ev-ease) .05s, opacity .4s var(--ev-ease) .05s;
}
.ev-ai.is-open .ev-ai__dock { transform: none; opacity: 1; }

.ev-ai__hello {
  text-align: center; color: #fff;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 700;
}
/* En maintenance, la phrase est longue : elle se lit comme un message, pas
   comme un titre. */
.ev-ai__hello.is-maintenance {
  max-width: 46ch; margin-inline: auto;
  font-size: clamp(.94rem, 1.7vw, 1.02rem); font-weight: 500; line-height: 1.6;
  color: var(--ev-grey, #d6d6e0);
}

/* ---- Les 3 suggestions, au-dessus de la barre ---- */
.ev-ai__chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
/* La règle du navigateur pour [hidden] pose display:none sans classe : elle
   perd contre celle du dessus. On la repose ici. */
.ev-ai__chips[hidden], .ev-ai__note[hidden] { display: none; }
.ev-ai-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #e9e9f1; font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; text-align: left;
  transition: background .25s var(--ev-ease), border-color .25s var(--ev-ease), transform .25s var(--ev-ease), color .25s var(--ev-ease);
}
.ev-ai-chip:hover {
  background: rgba(255, 91, 91, .14);
  border-color: rgba(255, 91, 91, .5);
  color: #fff; transform: translateY(-2px);
}
.ev-ai-chip svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ev-red-lite); }

/* Parcours en cours : l'accueil et les puces laissent la place au fil.
   Le dock se réduit à la barre de saisie, comme après le premier message
   dans n'importe quelle messagerie. */
.ev-ai.is-flow .ev-ai__hello,
.ev-ai.is-flow .ev-ai__chips { display: none; }

/* Menu des trois points ouvert : les puces s'effacent (mêmes actions). */
.ev-ai__dock.is-menu .ev-ai__chips,
.ev-ai__dock.is-menu .ev-ai__hello {
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ev-ease);
}
.ev-ai__chips, .ev-ai__hello { transition: opacity .25s var(--ev-ease); }

/* ---- La barre ---- */
.ev-ai__bar {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .5rem .55rem .5rem .5rem;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(20, 20, 25, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  transition: border-color .25s var(--ev-ease), box-shadow .25s var(--ev-ease);
}
.ev-ai__bar:focus-within {
  border-color: rgba(255, 91, 91, .55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 0 3px rgba(164, 0, 0, .18);
}

.ev-ai__menu { position: relative; flex: 0 0 auto; }
.ev-ai__more, .ev-ai__send {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; background: rgba(255, 255, 255, .07); color: #d6d6e0;
  transition: background .22s var(--ev-ease), color .22s var(--ev-ease), border-color .22s var(--ev-ease);
}
.ev-ai__more:hover, .ev-ai__send:not([disabled]):hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ev-ai__more[aria-expanded="true"] { background: rgba(255, 91, 91, .18); color: #fff; border-color: rgba(255, 91, 91, .45); }
.ev-ai__more svg { width: 20px; height: 20px; }
.ev-ai__send svg { width: 19px; height: 19px; }
.ev-ai__send:not([disabled]) {
  background: linear-gradient(140deg, var(--ev-red-lite), var(--ev-red));
  background-origin: padding-box; color: #fff;
}
.ev-ai__send[disabled] { opacity: .45; cursor: not-allowed; }

.ev-ai__input {
  flex: 1; min-width: 0;
  max-height: 140px; padding: .6rem .2rem;
  border: 0; background: none; resize: none;
  color: #fff; font: inherit; font-size: .96rem; line-height: 1.45;
}
.ev-ai__input:focus { outline: none; }
.ev-ai__input::placeholder { color: #7a7a88; }

/* ---- Le menu des 3 points ---- */
.ev-ai__pop {
  position: absolute; bottom: calc(100% + .6rem); left: 0;
  min-width: 268px; padding: .4rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(24, 24, 30, .96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: .1rem;
  animation: evAiPop .2s var(--ev-ease) both;
}
.ev-ai__pop[hidden] { display: none; }
@keyframes evAiPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ev-ai__popitem {
  display: flex; align-items: center; gap: .6rem;
  padding: .62rem .7rem; border: 0; border-radius: 11px;
  background: none; color: #dcdce6; font: inherit; font-size: .87rem;
  text-align: left; cursor: pointer;
  transition: background .18s var(--ev-ease), color .18s var(--ev-ease);
}
.ev-ai__popitem:hover { background: rgba(255, 91, 91, .14); color: #fff; }
.ev-ai__popitem svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ev-red-lite); }

.ev-ai__note { text-align: center; font-size: .76rem; color: var(--ev-grey-dim); }

@media (max-width: 560px) {
  .ev-ai__chips { flex-direction: column; }
  .ev-ai-chip { justify-content: flex-start; }
  .ev-ai__pop { min-width: min(300px, calc(100vw - 3rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .ev-ai, .ev-ai__dock, .ev-ai-fab, .ev-ai-chip { transition: none; }
  .ev-ai-fab__ring, .ev-ai__coreglow, .ev-ai__pop { animation: none; }
  .ev-ai__close:hover { transform: none; }
}

/* =========================================================================
   PARCOURS GUIDÉ — fil de conversation, choix, récapitulatif
   ========================================================================= */
.ev-ai__stage { position: relative; grid-row: 1; min-height: 0; display: grid; }
.ev-ai__core { grid-area: 1 / 1; }

/* L'échelle et l'opacité du noyau sont animées dans le canvas (voir
   noyau.cadrer) : un transform CSS sur un canvas étire la bitmap et rend le
   tracé flou, alors qu'un redessin reste net. Ici on ne touche qu'au halo. */
.ev-ai__coreglow { transition: opacity .5s var(--ev-ease); }
.ev-ai.is-flow .ev-ai__coreglow { opacity: .55; }
.ev-ai.is-flow.is-success .ev-ai__coreglow { opacity: 1; }
.ev-ai.is-success .ev-ai__coreglow {
  background: radial-gradient(circle, rgba(76, 224, 164, .2), rgba(76, 224, 164, .08) 45%, transparent 70%);
}

.ev-ai__thread {
  grid-area: 1 / 1; position: relative; z-index: 1;
  width: min(760px, 100%); margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(.9rem, 3vw, 1.4rem) 1rem;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .7rem;
  scrollbar-width: thin;
}
.ev-ai__thread[hidden] { display: none; }
.ev-ai__thread::-webkit-scrollbar { width: 6px; }
.ev-ai__thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }

/* ---- Bulles ---- */
.ev-ai-msg {
  max-width: 88%; padding: .7rem .95rem;
  border-radius: 16px; font-size: .92rem; line-height: 1.55;
  animation: evAiMsg .28s var(--ev-ease) both;
}
.ev-ai-msg p { white-space: pre-line; }
@keyframes evAiMsg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ev-ai-msg--bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e9e9f1;
  border-bottom-left-radius: 6px;
}
.ev-ai-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(255, 91, 91, .28), rgba(164, 0, 0, .34));
  background-origin: padding-box;
  border: 1px solid rgba(255, 91, 91, .38);
  color: #fff; font-weight: 600;
  border-bottom-right-radius: 6px;
}
.ev-ai-msg.is-pending { opacity: .75; font-style: italic; }
.ev-ai-msg.is-ok { border-color: rgba(76, 224, 164, .45); background: rgba(76, 224, 164, .12); color: #d8fff0; }
.ev-ai-msg.is-error { border-color: rgba(255, 155, 155, .45); background: rgba(255, 91, 91, .12); color: #ffd9d9; }

/* ---- Grille de choix ---- */
.ev-ai-choices {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .2rem 0 .5rem;
  animation: evAiMsg .3s var(--ev-ease) both;
}
.ev-ai-opt {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .58rem .9rem;
  border-radius: var(--ev-radius-btn, 10px);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #e4e4ee; font: inherit; font-size: .87rem; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background .2s var(--ev-ease), border-color .2s var(--ev-ease), color .2s var(--ev-ease), transform .2s var(--ev-ease);
}

/* L'icône, posée dans le flux à gauche, décalait le libellé vers la droite :
   le texte se retrouvait à 40 px du bord gauche pour 15 px du bord droit. On
   la sort donc du flux et on réserve la même place des deux côtés, ce qui
   recentre le libellé sans déplacer l'icône.

   Les deux règles vont ensemble : sans :has(), l'icône positionnée en absolu
   passerait sous le texte. On les tient donc dans le même garde-fou. */
@supports selector(:has(*)) {
  .ev-ai-opt:has(.ev-ai-opt__ic) { padding-inline: 2.15rem; }
  .ev-ai-opt:has(.ev-ai-opt__ic) .ev-ai-opt__ic {
    position: absolute; left: .78rem; top: 50%; transform: translateY(-50%);
  }
}
.ev-ai-opt:hover:not([disabled]) {
  background: rgba(255, 91, 91, .14); border-color: rgba(255, 91, 91, .5);
  color: #fff; transform: translateY(-2px);
}
.ev-ai-opt.is-on {
  background: rgba(255, 91, 91, .2); border-color: var(--ev-red-lite); color: #fff;
}
.ev-ai-opt[disabled] { opacity: .4; cursor: not-allowed; }
.ev-ai-opt__ic { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ev-red-lite); display: inline-grid; place-items: center; }
.ev-ai-opt__ic svg { width: 100%; height: 100%; }
.ev-ai-opt.is-on .ev-ai-opt__ic { color: #fff; }

/* Le bouton qui fait avancer se distingue des choix. */
.ev-ai-opt--go {
  border-color: transparent; color: #fff;
  background: linear-gradient(120deg, var(--ev-red-lite), var(--ev-red));
  background-origin: padding-box;
  box-shadow: 0 8px 22px rgba(164, 0, 0, .35);
}
.ev-ai-opt--go:hover:not([disabled]) { background: linear-gradient(120deg, var(--ev-red-lite), var(--ev-red)); }
.ev-ai-opt--go[disabled] { box-shadow: none; }
.ev-ai-opt--go .ev-ai-opt__ic { color: #fff; }

/* ---- Champs ---- */
.ev-ai-form {
  width: 100%; display: flex; flex-wrap: wrap; gap: .7rem;
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
}
.ev-ai-form--texte { flex-direction: column; gap: .4rem; }
.ev-ai-field { flex: 1 1 190px; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ev-ai-field > span { font-size: .74rem; font-weight: 700; letter-spacing: .05em; color: var(--ev-grey-dim); text-transform: uppercase; }
.ev-ai-field input, .ev-ai-ta {
  width: 100%; padding: .55rem .7rem;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .3); color: #fff; font: inherit; font-size: .9rem;
}
.ev-ai-ta { resize: vertical; min-height: 76px; line-height: 1.5; }
.ev-ai-field input:focus, .ev-ai-ta:focus { outline: none; border-color: rgba(255, 91, 91, .6); }
.ev-ai-field--radio { flex: 1 1 100%; }
.ev-ai-radio { display: flex; flex-wrap: wrap; gap: .4rem; }
.ev-ai-radio .ev-ai-opt { padding: .4rem .8rem; font-size: .82rem; }

.ev-ai-count { align-self: flex-end; font-size: .74rem; color: var(--ev-grey-dim); }
.ev-ai-count.is-max { color: #ff9b9b; font-weight: 700; }
.ev-ai-err { width: 100%; font-size: .82rem; color: #ff9b9b; font-weight: 600; }
.ev-ai-err:empty { display: none; }

/* ---- Récapitulatif ---- */
.ev-ai-recap {
  align-self: stretch;
  border: 1px solid rgba(255, 91, 91, .28);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(28, 18, 20, .9), rgba(12, 10, 12, .9));
  background-origin: padding-box;
  padding: 1rem 1.1rem;
  animation: evAiMsg .32s var(--ev-ease) both;
}
.ev-ai-recap__h { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; }
.ev-ai-recap__h b { font-size: 1rem; color: #fff; }
.ev-ai-recap__ic { width: 22px; height: 22px; color: var(--ev-red-lite); display: inline-grid; place-items: center; }
.ev-ai-recap__ic svg { width: 100%; height: 100%; }
.ev-ai-recap__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .42rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: .86rem;
}
.ev-ai-recap__row:last-child { border-bottom: 0; }
.ev-ai-recap__row span { color: var(--ev-grey-dim); }
.ev-ai-recap__row b { color: #fff; text-align: right; }
.ev-ai-recap__note { margin-top: .8rem; font-size: .76rem; color: var(--ev-grey-dim); line-height: 1.5; }

@media (max-width: 560px) {
  .ev-ai-msg { max-width: 94%; }
  .ev-ai-choices .ev-ai-opt { flex: 1 1 100%; }
  .ev-ai-recap__row { flex-direction: column; gap: .1rem; }
  .ev-ai-recap__row b { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-ai-msg, .ev-ai-choices, .ev-ai-recap { animation: none; }
  .ev-ai__core, .ev-ai-opt { transition: none; }
}

/* =========================================================================
   VOIX, JETON ABSORBÉ ET PULSATION
   ========================================================================= */
.ev-ai__voice {
  position: absolute; z-index: 3;
  top: clamp(.9rem, 2.5vw, 1.5rem);
  right: calc(clamp(.9rem, 2.5vw, 1.5rem) + 54px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #fff;
  transition: background .25s var(--ev-ease), color .25s var(--ev-ease);
}
.ev-ai__voice:hover { background: rgba(255, 255, 255, .15); }
.ev-ai__voice svg { width: 19px; height: 19px; }
.ev-ai__voice .ev-ai__voice-off { display: none; }
.ev-ai__voice.is-off { color: var(--ev-grey-dim); }
.ev-ai__voice.is-off .ev-ai__voice-on { display: none; }
.ev-ai__voice.is-off .ev-ai__voice-off { display: block; }

/* Le halo du noyau suit la parole : le canvas dessine la pulsation fine,
   le CSS accompagne l'ambiance générale. */
.ev-ai.is-speaking .ev-ai__coreglow {
  animation: evAiVoix 1.1s ease-in-out infinite;
}
@keyframes evAiVoix {
  0%, 100% { opacity: .8;  transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* ---- Jeton qui rejoint le noyau ---- */
.ev-ai-jeton {
  position: fixed; z-index: 9400; pointer-events: none;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--tint, #4fd8ff);
  border: 1.5px solid currentColor;
  background: radial-gradient(circle, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2));
  box-shadow: 0 0 22px currentColor, inset 0 0 14px rgba(255, 255, 255, .18);
  will-change: transform, opacity;
}
.ev-ai-jeton svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px currentColor); }

@media (max-width: 560px) {
  .ev-ai__voice { right: calc(clamp(.9rem, 2.5vw, 1.5rem) + 50px); }
}

@media (prefers-reduced-motion: reduce) {
  .ev-ai.is-speaking .ev-ai__coreglow { animation: none; }
  .ev-ai__voice { transition: none; }
}

/* =========================================================================
   DICTÉE, CORRECTIONS ET CHAMP LEURRE
   ========================================================================= */
.ev-ai__mic {
  position: relative; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid transparent; background: rgba(255, 255, 255, .07); color: #d6d6e0;
  transition: background .22s var(--ev-ease), color .22s var(--ev-ease), border-color .22s var(--ev-ease);
}
.ev-ai__mic:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ev-ai__mic svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.ev-ai__mic[hidden] { display: none; }

/* À l'écoute : le bouton s'allume et une onde en sort. */
.ev-ai__mic.is-on {
  background: linear-gradient(140deg, var(--ev-red-lite), var(--ev-red));
  background-origin: padding-box; color: #fff; border-color: transparent;
}
.ev-ai__mic-onde {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--ev-red-lite); opacity: 0;
}
.ev-ai__mic.is-on .ev-ai__mic-onde { animation: evAiOnde 1.6s ease-out infinite; }
@keyframes evAiOnde {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.9); }
}

/* Proposition de correction d'adresse */
.ev-ai-fix {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07); color: #fff;
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 8px; cursor: pointer;
  margin-left: .2rem;
  transition: background .2s var(--ev-ease);
}
.ev-ai-fix:hover { background: rgba(255, 255, 255, .18); }
.ev-ai-fix--non { opacity: .75; }
.ev-ai-err b { color: #fff; }

/* Champ leurre : hors de l'écran, hors du parcours clavier. */
.ev-ai-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ev-ai__mic.is-on .ev-ai__mic-onde { animation: none; }
  .ev-ai__mic, .ev-ai-fix { transition: none; }
}

/* ---- Bulle d'attente pendant que le modèle réfléchit ---- */
.ev-ai-msg--think { padding: .85rem 1rem; }
.ev-ai-dots { display: inline-flex; gap: .32rem; align-items: center; }
.ev-ai-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ev-red-lite);
  animation: evAiDot 1.15s ease-in-out infinite;
}
.ev-ai-dots i:nth-child(2) { animation-delay: .16s; }
.ev-ai-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes evAiDot {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35%           { opacity: 1;  transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-ai-dots i { animation: none; opacity: .7; }
}

/* Page proposée par l'assistant : c'est un lien, il en a l'apparence. */
.ev-ai-opt--lien {
  text-decoration: none;
  border-color: rgba(255, 91, 91, .38);
  background: rgba(255, 91, 91, .1);
  color: #fff;
}
.ev-ai-opt--lien:hover { border-color: var(--ev-red-lite); background: rgba(255, 91, 91, .18); }