/* ===== Assistant MIST — panneau de conversation =====
   Reprend les variables du design system : aucune couleur inventée.
   ⚠️ Fichier de PREVIEW. Le thème en détient une copie octet pour octet
   (garde-fou n°5). Modifier ici d'abord. */

.mist-bot-panneau{
  position:fixed;z-index:1100;
  right:clamp(16px,3vw,26px);bottom:calc(clamp(16px,3vw,26px) + 74px);
  width:min(410px,calc(100vw - 32px));
  max-height:min(620px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg,#fff);border:1px solid var(--line,#E7E6F2);
  border-radius:var(--r-l,26px);
  box-shadow:0 28px 78px -26px rgba(15,20,54,.5);
  font-family:var(--body,Inter,Arial,sans-serif);
  /* L'ouverture part du bouton, pas du centre de l'écran. */
  transform-origin:100% 100%;
  animation:mistBotOuvre .22s cubic-bezier(.2,.7,.25,1)}
.mist-bot-panneau[hidden]{display:none}
@keyframes mistBotOuvre{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

.mist-bot-tete{
  display:flex;align-items:center;gap:10px;padding:15px 16px;
  background:var(--grad-brand,linear-gradient(120deg,#3E4982,#E94E1B));color:#fff}
.mist-bot-tete strong{font:900 16px/1.2 var(--display,Mulish,Inter,sans-serif);flex:1}
.mist-bot-fermer{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;cursor:pointer}
.mist-bot-fermer:hover{background:rgba(255,255,255,.3)}
.mist-bot-fermer svg{width:16px;height:16px}

.mist-bot-fil{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
  background:var(--bg-soft,#FAF7F2)}

.mist-bot-bulle{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.55}
.mist-bot-bulle p{margin:0 0 8px}
.mist-bot-bulle p:last-child{margin-bottom:0}
.mist-bot-bulle ul,.mist-bot-bulle ol{margin:0 0 8px;padding-left:18px}
.mist-bot-bulle li{margin-bottom:4px}
.mist-bot-bulle a{color:var(--orange,#E94E1B)}
.mist-bot-bulle strong{font-weight:700}
.mist-bot-bot{align-self:flex-start;background:#fff;color:var(--ink,#1F2444);
  border:1px solid var(--line,#E7E6F2);border-bottom-left-radius:6px}
.mist-bot-moi{align-self:flex-end;background:var(--blue,#3E4982);color:#fff;
  border-bottom-right-radius:6px}
.mist-bot-moi a{color:#fff;text-decoration:underline}

/* La question à laquelle on répond, rappelée au-dessus de la réponse : sans
   elle, une réponse mal appariée passe pour une réponse à la bonne question. */
.mist-bot-repondu{
  align-self:flex-start;max-width:88%;margin-bottom:-6px;
  font-size:11.5px;color:var(--ink-muted,#6B7194);
  font-family:var(--display,Mulish,Inter,sans-serif);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}

.mist-bot-liens{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.mist-bot-lien{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:999px;font-size:12.5px;text-decoration:none;
  background:var(--blue-mist,#F2F0F9);color:var(--blue,#3E4982);
  border:1px solid var(--line,#E7E6F2)}
.mist-bot-lien:hover{background:var(--blue-pale,#E4E1F2)}
.mist-bot-lien svg{width:13px;height:13px;flex:0 0 auto}

.mist-bot-choix{display:flex;flex-direction:column;gap:7px;align-self:flex-start;max-width:92%}
.mist-bot-choix button{
  text-align:left;padding:9px 13px;font:inherit;font-size:13.5px;cursor:pointer;
  background:#fff;color:var(--blue,#3E4982);
  border:1px solid var(--blue-pale,#E4E1F2);border-radius:14px}
.mist-bot-choix button:hover{border-color:var(--orange,#E94E1B);color:var(--orange,#E94E1B)}

.mist-bot-saisie{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line,#E7E6F2);background:#fff}
.mist-bot-saisie input{
  flex:1;min-width:0;font:inherit;font-size:14px;padding:10px 13px;
  color:var(--ink,#1F2444);background:var(--bg-soft,#FAF7F2);
  border:1px solid var(--line,#E7E6F2);border-radius:999px}
.mist-bot-saisie input:focus{outline:2px solid var(--blue-soft,#A69DCD);outline-offset:1px;border-color:transparent}
.mist-bot-saisie button{
  width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;background:var(--orange,#E94E1B);color:#fff;cursor:pointer}
.mist-bot-saisie button:disabled{opacity:.5;cursor:default}
.mist-bot-saisie svg{width:17px;height:17px}

.mist-bot-redige{border-left:3px solid var(--orange-soft,#EE6F5F)}
.mist-bot-redige::after{content:"Rédigé par l’IA à partir de notre FAQ";display:block;
  margin-top:8px;font-size:11px;color:var(--ink-muted,#6B7194);font-style:italic}
.mist-bot-mention{padding:0 14px 11px;font-size:11px;line-height:1.45;
  color:var(--ink-muted,#6B7194);background:#fff;text-align:center}

/* Trois points d'attente : le silence d'une requête réseau se lit comme une
   panne. */
.mist-bot-attente{display:inline-flex;gap:4px;align-items:center}
.mist-bot-attente span{width:6px;height:6px;border-radius:50%;background:var(--blue-soft,#A69DCD);
  animation:mistBotPoint 1.1s ease-in-out infinite}
.mist-bot-attente span:nth-child(2){animation-delay:.15s}
.mist-bot-attente span:nth-child(3){animation-delay:.3s}
@keyframes mistBotPoint{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

@media (max-width:600px){
  .mist-bot-panneau{
    right:8px;left:8px;width:auto;
    bottom:calc(clamp(16px,3vw,26px) + 66px);
    max-height:calc(100vh - 120px)}
}

@media (prefers-reduced-motion:reduce){
  .mist-bot-panneau{animation:none}
  .mist-bot-attente span{animation:none;opacity:.6}
}