/* =====================================================================
   Assistant IA — mascotte animée
   États (sur #ai) : is-wave · is-thinking · is-talking · is-happy · is-sorry
   ===================================================================== */
.mascot{width:var(--m-size,72px);height:calc(var(--m-size,72px) * 1.17);display:block;overflow:visible}
.mascot *{transform-box:fill-box}
.m-shadow{fill:rgba(0,0,0,.18)}
.m-root{animation:m-float 3.2s ease-in-out infinite;transform-origin:center bottom}
.m-lids{transform-origin:center top;transform:scaleY(0);animation:m-blink 5s infinite}
.m-crown{transform-origin:center bottom;animation:m-sway 4s ease-in-out infinite}
.m-arm-l{transform-origin:100% 0}.m-arm-r{transform-origin:0 0}
.m-mouth-open,.m-mouth-sad,.m-think,.m-confetti{opacity:0}
.m-pupils{transition:transform .3s ease}

@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes m-blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
@keyframes m-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes m-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-40deg)}50%{transform:rotate(-15deg)}75%{transform:rotate(-40deg)}}
@keyframes m-talk{0%,100%{opacity:1}50%{opacity:0}}
@keyframes m-talk2{0%,100%{opacity:0}50%{opacity:1}}
@keyframes m-dots{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes m-jump{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px) scale(1.03)}60%{transform:translateY(0) scale(.98,1.02)}}
@keyframes m-confetti{0%{opacity:0;transform:translateY(6px)}30%{opacity:1}100%{opacity:0;transform:translateY(-14px) rotate(90deg)}}
@keyframes m-sad{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(2px) rotate(-3deg)}}

.ai.is-wave .m-arm-r{animation:m-wave 1.2s ease-in-out 2}
.ai.is-thinking .m-pupils{transform:translate(2px,-3px)}
.ai.is-thinking .m-think{opacity:1}
.ai.is-thinking .m-think circle{fill:#fff;stroke:#0b2a1e;stroke-width:1.2;animation:m-dots 1s infinite}
.ai.is-thinking .m-think circle:nth-child(2){animation-delay:.2s}.ai.is-thinking .m-think circle:nth-child(3){animation-delay:.4s}
.ai.is-thinking .m-arm-l{transform:rotate(55deg) translate(6px,-6px)}
.ai.is-talking .m-mouth-closed{animation:m-talk .28s infinite}
.ai.is-talking .m-mouth-open{animation:m-talk2 .28s infinite}
.ai.is-talking .m-arm-l{animation:m-wave 2.4s ease-in-out infinite;animation-delay:.3s}
.ai.is-happy .m-root{animation:m-jump .7s ease-out 3}
.ai.is-happy .m-confetti rect{animation:m-confetti .9s ease-out 3}
.ai.is-happy .m-arm-l,.ai.is-happy .m-arm-r{animation:m-wave .7s ease-in-out 3}
.ai.is-sorry .m-mouth-closed{opacity:0}.ai.is-sorry .m-mouth-sad{opacity:1}
.ai.is-sorry .m-root{animation:m-sad 1.6s ease-in-out 2}

/* ---------- Visuel fourni (image/GIF/vidéo) ----------
   --m-size = hauteur ; la largeur suit les proportions de l'image. */
.mascot-asset{position:relative;display:inline-block;height:var(--m-size);width:auto}
.ma-body{display:block;height:100%;transform-origin:50% 100%;animation:ma-idle 3.4s ease-in-out infinite}
.ma-body img,.ma-body video{height:100%;width:auto;display:block;user-select:none;pointer-events:none}
.ma-shadow{position:absolute;left:18%;right:18%;bottom:-3px;height:7px;border-radius:50%;background:rgba(0,0,0,.18);
  z-index:-1;animation:ma-shadow 3.4s ease-in-out infinite}
.ma-think,.ma-confetti{position:absolute;inset:0;pointer-events:none;opacity:0}
.ma-think i{position:absolute;border-radius:50%;background:#fff;border:1.5px solid #0b2a1e;animation:m-dots 1s infinite}
.ma-think i:nth-child(1){width:8%;aspect-ratio:1;right:2%;top:16%}
.ma-think i:nth-child(2){width:12%;aspect-ratio:1;right:-8%;top:6%;animation-delay:.2s}
.ma-think i:nth-child(3){width:17%;aspect-ratio:1;right:-22%;top:-6%;animation-delay:.4s}
.ma-confetti i{position:absolute;width:7%;aspect-ratio:1;top:30%}
.ma-confetti i:nth-child(1){left:2%;background:#0a8a4a}.ma-confetti i:nth-child(2){left:18%;background:#f5c518;animation-delay:.1s!important}
.ma-confetti i:nth-child(3){left:40%;background:#d6312b;animation-delay:.25s!important}.ma-confetti i:nth-child(4){right:30%;background:#0a8a4a;animation-delay:.05s!important}
.ma-confetti i:nth-child(5){right:12%;background:#f5c518;animation-delay:.2s!important}.ma-confetti i:nth-child(6){right:0;background:#d6312b;animation-delay:.3s!important}

/* respiration + léger flottement au repos */
@keyframes ma-idle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-4%) scale(1.01,.99)}}
@keyframes ma-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.85);opacity:.6}}
/* salut : balancement */
@keyframes ma-wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
/* réflexion : tête penchée, oscillation lente */
@keyframes ma-think{0%,100%{transform:rotate(-6deg) translateY(-1%)}50%{transform:rotate(-3deg) translateY(-3%)}}
/* parole : petits rebonds rythmés (squash & stretch) */
@keyframes ma-talk{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-3%) scale(.985,1.02)}50%{transform:translateY(0) scale(1.02,.975)}75%{transform:translateY(-2%) scale(.99,1.015) rotate(1.5deg)}}
/* joie : grand saut */
@keyframes ma-jump{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.06,.92)}45%{transform:translateY(-22%) scale(.96,1.06) rotate(-4deg)}75%{transform:translateY(0) scale(1.05,.94)}}
@keyframes ma-confetti{0%{opacity:0;transform:translateY(0) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-160%) rotate(220deg)}}
/* déception : s'affaisse */
@keyframes ma-sad{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(3%) scale(1.03,.96) rotate(-2deg)}}

.ai.is-wave .ma-body{animation:ma-wave 1.1s ease-in-out 2}
.ai.is-thinking .ma-body{animation:ma-think 1.6s ease-in-out infinite}
.ai.is-thinking .ma-think{opacity:1}
.ai.is-talking .ma-body{animation:ma-talk .55s ease-in-out infinite}
.ai.is-happy .ma-body{animation:ma-jump .75s ease-out 3}
.ai.is-happy .ma-confetti{opacity:1}
.ai.is-happy .ma-confetti i{animation:ma-confetti 1s ease-out 3 both}
.ai.is-sorry .ma-body{animation:ma-sad 1.4s ease-in-out 2;filter:saturate(.75)}
.ai-launcher:hover .ma-body{animation:ma-wave 1.1s ease-in-out}

@media (prefers-reduced-motion:reduce){
  .mascot *,.mascot-asset *{animation:none!important}
  .m-lids{transform:scaleY(0)}
}

/* ---------- Bouton flottant ---------- */
.ai-launcher{position:fixed;right:18px;bottom:18px;z-index:80;background:none;border:0;padding:0;cursor:pointer;
  filter:drop-shadow(0 8px 18px rgba(11,42,30,.35))}
.ai-launcher:hover .mascot{transform:scale(1.05)}
.ai-hint{position:absolute;right:84px;bottom:46px;background:var(--paper);color:var(--ink);border:1px solid var(--line);
  padding:8px 12px;border-radius:14px 14px 4px 14px;font-size:.85rem;font-weight:600;white-space:nowrap;box-shadow:var(--shadow);
  animation:ai-pop .35s ease-out}
@keyframes ai-pop{from{opacity:0;transform:translateY(6px) scale(.95)}to{opacity:1;transform:none}}
.ai.open .ai-launcher{display:none}

/* ---------- Panneau ---------- */
.ai-panel{position:fixed;right:18px;bottom:18px;z-index:81;width:min(380px,calc(100vw - 24px));height:min(600px,calc(100vh - 100px));
  background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 60px rgba(11,42,30,.28);
  display:flex;flex-direction:column;overflow:hidden;animation:ai-pop .25s ease-out}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 8px;color:#fff;
  background:linear-gradient(120deg,#0b2a1e 0%,#0a8a4a 100%);position:relative}
.ai-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#0a8a4a 0 33%,#f5c518 0 66%,#d6312b 0)}
.ai-avatar{margin-top:-4px}
.ai-who{flex:1;display:grid;line-height:1.2}
.ai-who strong{font-family:var(--display);font-size:1.15rem;font-weight:900}
.ai-status{font-size:.75rem;color:#cfe8d8;display:flex;align-items:center;gap:6px}
.ai-status i{width:7px;height:7px;border-radius:50%;background:#5ee39a;display:inline-block}
.ai-btn{background:rgba(255,255,255,.14);border:0;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:.95rem}
.ai-btn:hover{background:rgba(255,255,255,.26)}
.ai-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--sand)}
.ai-msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:.93rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.ai-msg.bot{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
.ai-msg.me{background:var(--green);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.ai-msg.typing{display:flex;gap:4px;align-items:center}
.ai-msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:m-dots 1s infinite}
.ai-msg.typing i:nth-child(2){animation-delay:.15s}.ai-msg.typing i:nth-child(3){animation-delay:.3s}
.ai-chips{display:flex;gap:6px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none;background:var(--paper)}
.ai-chips::-webkit-scrollbar{display:none}
.ai-chip{flex:0 0 auto;border:1px solid var(--line);background:var(--sand);color:var(--ink);border-radius:999px;padding:6px 11px;font:inherit;font-size:.8rem;cursor:pointer}
.ai-chip:hover{border-color:var(--green);color:var(--green)}
.ai-form{display:flex;gap:6px;padding:10px 12px;background:var(--paper);align-items:center}
.ai-form input{flex:1;min-width:0;border-radius:999px;padding:10px 14px}
.ai-form .ai-mic{background:var(--sand);color:var(--ink);flex:0 0 34px}
.ai-form .ai-mic.rec{background:var(--red);color:#fff;animation:m-dots 1s infinite}
.ai-send{flex:0 0 40px;height:40px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:1rem;cursor:pointer}
.ai-send:disabled{opacity:.5}
.ai-foot{margin:0;padding:0 12px 10px;font-size:.7rem;color:var(--muted);background:var(--paper)}
@media (max-width:520px){
  .ai-panel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}
  .ai-launcher{right:10px;bottom:10px}
}
.ai-avatar.has-asset{width:62px;height:62px;flex:0 0 62px;margin-left:4px;border-radius:50%;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 40%,#fff6d6,#f5c518);border:3px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.ai-avatar.has-asset .mascot-asset{position:absolute;left:50%;top:2px;transform:translateX(-50%)}
.ai-avatar.has-asset .ma-shadow,.ai-avatar.has-asset .ma-think,.ai-avatar.has-asset .ma-confetti{display:none}
.ai-avatar.has-asset .ma-body{transform-origin:50% 25%}
.ai-launcher .mascot-asset+.ai-hint,.ai-launcher .ai-hint{bottom:70px}
@media (max-width:520px){.ai-launcher .mascot-asset{height:96px}}