/* wini-assistant-widget.css — bulle + panneau, autonome (aucune dépendance aux styles de la
   page hôte : un vrai site client n'aura pas les variables CSS de Wini). Préfixe wini-widget-*
   partout pour ne jamais entrer en collision avec le CSS du site qui l'embarque. */

.wini-widget-root {
  --ww-accent: #3b82f6;
  --ww-accent-2: #2563eb;
  --ww-bg: #0b1728;
  --ww-panel: #101e32;
  --ww-border: #1d3049;
  --ww-text: #f5f7fa;
  --ww-text-2: #9fb0c3;
  --ww-radius: 16px;
  all: initial;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ww-text);
}
.wini-widget-root, .wini-widget-root *, .wini-widget-root *::before, .wini-widget-root *::after {
  box-sizing: border-box;
}
/* Root cause du BUG RÉEL "texte vertical / panneau écrasé" (mission widget §1-3) : le widget
   utilise des balises sémantiques ordinaires (<section> pour le panneau, <header>, <footer>,
   <button>, <input>...) pour rester un simple <script src="…"> sans bundler. Un site hôte réel
   a presque toujours des règles globales sur ces mêmes balises (ex. démo ENTREPRISE A :
   `section{padding:50px 6vw}` pensé pour SES propres sections de page) — comme
   `.wini-widget-panel` ne déclarait aucun padding propre, cette règle hôte gagnait par défaut
   (aucune règle du widget ne la concurrençait) et mangeait ~230px de large sur 380px à 1920px de
   large, écrasant tous les enfants flex (stretch) à ~147px -> retour à la ligne quasi lettre par
   lettre. Vérifié en mesurant le DOM rendu (getBoundingClientRect/getComputedStyle réels, pas une
   lecture de CSS statique) : ROOT_CAUSE confirmé par calcul exact (378 - 2*115.2px = 147.6px).
   Correction structurelle (pas un simple padding:0 sur .wini-widget-panel) : neutraliser d'office,
   pour TOUT descendant du widget, les propriétés qui servent le plus souvent de vecteur de
   collision avec le CSS globale d'un site hôte (padding/margin/border/font/line-height/
   text-align/list-style/text-decoration) — jamais display/position, qui restent déclarés
   explicitement par chaque règle .wini-widget-* ci-dessous et qui casseraient la mise en page
   du widget lui-même si réinitialisés en aveugle (ex. plusieurs <div> internes comptent sur le
   display:block/inline implicite). Chaque règle .wini-widget-* plus bas dans ce même fichier
   redéclare explicitement ce dont elle a besoin ; l'ordre de cascade (même spécificité de classe,
   déclarée après) suffit à reprendre la main sur ce reset. */
.wini-widget-root *, .wini-widget-root *::before, .wini-widget-root *::after {
  margin: 0;
  padding: 0;
  border: 0 none;
  font: inherit;
  line-height: normal;
  text-align: left;
  list-style: none;
  text-decoration: none;
  letter-spacing: normal;
  border-radius: 0;
  background: none;
}
.wini-widget-theme-light {
  --ww-bg: #ffffff; --ww-panel: #f5f7fb; --ww-border: #e2e8f0; --ww-text: #101828; --ww-text-2: #5b6472;
}

.wini-widget-bubble {
  /* Bug utilisateur réel (capture Agent Workbench) : ce bouton et #wini-activity
     (app.js::mountActivityCenter) occupaient quasiment le même coin bas-droite (22px vs 14px),
     se chevauchant. Pile verticale coordonnée : .voice-fab (bas, 24px) < cette bulle (92px =
     24+56+12) < #wini-activity (164px, voir app.js) — 12px d'écart garanti entre chaque étage.
     Voir aussi .wini-widget-panel ci-dessous, qui s'ouvre au-dessus de CETTE bulle et doit
     donc suivre le même décalage. */
  position: fixed; right: 22px; bottom: 92px; z-index: 2147483000;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(145deg, var(--ww-accent), var(--ww-accent-2));
  box-shadow: 0 8px 24px rgba(37, 99, 235, .45), 0 0 0 6px rgba(59, 130, 246, .12);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.wini-widget-bubble:hover { transform: translateY(-2px) scale(1.04); }
.wini-widget-bubble:active { transform: scale(.96); }
.wini-widget-bubble img { width: 30px; height: 30px; border-radius: 50%; }
.wini-widget-bubble-glyph { font-size: 24px; color: #fff; line-height: 1; }
.wini-widget-bubble-dot {
  position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--ww-bg);
}
.wini-widget-open .wini-widget-bubble { transform: scale(0); opacity: 0; pointer-events: none; }

.wini-widget-panel {
  /* Doit rester au-dessus de .wini-widget-bubble : bubble-bottom(92) + bubble-height(60) + 14
     d'écart = 166 (voir pile coordonnée ci-dessus). */
  position: fixed; right: 22px; bottom: 166px; z-index: 2147483000;
  width: 380px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 140px);
  background: var(--ww-bg); border: 1px solid var(--ww-border); border-radius: var(--ww-radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; overflow: hidden;
  animation: wini-widget-pop .16s ease-out;
}
/* Spécificité : une règle de classe seule (0,1,0) ne bat jamais [hidden] de façon fiable —
   ce sélectateur combiné (0,2,0) garantit que l'attribut hidden masque réellement le panneau
   (bug constaté : panneau visible et vide dès le chargement, hidden sans effet). */
.wini-widget-panel[hidden] { display: none; }
@keyframes wini-widget-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.wini-widget-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 16px; background: var(--ww-panel); border-bottom: 1px solid var(--ww-border);
  flex: 0 0 auto;
}
.wini-widget-header-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wini-widget-header-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }
.wini-widget-header-name { font-weight: 700; font-size: 14px; }
.wini-widget-header-sub { font-size: 11px; color: var(--ww-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wini-widget-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.wini-widget-close {
  background: transparent; border: none; color: var(--ww-text-2); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.wini-widget-close:hover { background: var(--ww-border); color: var(--ww-text); }

.wini-widget-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: auto; overscroll-behavior: contain;
}
.wini-widget-msg { display: flex; flex-direction: column; max-width: 84%; }
.wini-widget-msg-user { align-self: flex-end; }
.wini-widget-msg-assistant, .wini-widget-msg-system { align-self: flex-start; }
.wini-widget-sender { font-size: 11px; font-weight: 600; color: var(--ww-text-2); margin: 0 0 3px 3px; }
.wini-widget-bubble-text {
  padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word;
}
.wini-widget-msg-user .wini-widget-bubble-text { background: var(--ww-accent); color: #fff; border-bottom-right-radius: 4px; }
.wini-widget-msg-assistant .wini-widget-bubble-text { background: var(--ww-panel); border: 1px solid var(--ww-border); border-bottom-left-radius: 4px; }
.wini-widget-msg-system .wini-widget-bubble-text { background: transparent; border: 1px dashed var(--ww-border); color: var(--ww-text-2); font-size: 12px; }

.wini-widget-typing .wini-widget-bubble-text,
.wini-widget-typing { background: transparent; border: none; padding: 0; }
.wini-widget-typing { display: flex; align-items: center; gap: 4px; padding: 9px 13px; background: var(--ww-panel); border: 1px solid var(--ww-border); border-radius: 14px; border-bottom-left-radius: 4px; width: fit-content; }
.wini-widget-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ww-text-2); display: inline-block;
  animation: wini-widget-bounce 1.1s infinite ease-in-out;
}
.wini-widget-typing span:nth-child(2) { animation-delay: .15s; }
.wini-widget-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wini-widget-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.wini-widget-jump {
  position: absolute; align-self: center; margin: 0 auto; bottom: 128px; left: 50%; transform: translateX(-50%);
  background: var(--ww-accent); color: #fff; border: none; border-radius: 999px; padding: 6px 14px;
  font-size: 12px; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); z-index: 2;
}

.wini-widget-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; flex: 0 0 auto;
}
.wini-widget-suggestions[hidden] { display: none; } /* même bug de spécificité que .wini-widget-panel */
.wini-widget-suggestion {
  background: var(--ww-panel); border: 1px solid var(--ww-border); color: var(--ww-text);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; transition: background .12s;
}
.wini-widget-suggestion:hover { background: var(--ww-accent); border-color: var(--ww-accent); color: #fff; }

.wini-widget-footer {
  display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid var(--ww-border);
  background: var(--ww-panel); flex: 0 0 auto;
}
.wini-widget-input {
  flex: 1; background: var(--ww-bg); border: 1px solid var(--ww-border); color: var(--ww-text);
  border-radius: 10px; padding: 9px 10px; font-size: 13px; outline: none; min-width: 0;
}
.wini-widget-input:focus { border-color: var(--ww-accent); }
.wini-widget-mic, .wini-widget-send {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.wini-widget-mic { background: transparent; color: var(--ww-text-2); border: 1px solid var(--ww-border); }
.wini-widget-mic:hover { color: var(--ww-text); }
.wini-widget-send { background: var(--ww-accent); color: #fff; }
.wini-widget-send:hover { background: var(--ww-accent-2); }

/* WINI VOICE — états explicites du bouton micro (mission §2 : PRÊT/ÉCOUTE/TRAITEMENT/WINI
   PARLE/ERREUR doivent être visuellement distincts, jamais un micro "toujours ouvert" muet). */
.wini-widget-mic-listening { background: #ef4444; color: #fff; border-color: #ef4444; animation: wini-widget-mic-pulse 1.1s infinite; }
.wini-widget-mic-processing { background: var(--ww-panel); color: #f59e0b; border-color: #f59e0b; opacity: .85; cursor: default; }
.wini-widget-mic-speaking { background: var(--ww-accent); color: #fff; border-color: var(--ww-accent); animation: wini-widget-mic-pulse 1.4s infinite; }
.wini-widget-mic-error { background: transparent; color: #ef4444; border-color: #ef4444; }
@keyframes wini-widget-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.wini-widget-mic-speaking.wini-widget-mic-speaking { animation-name: wini-widget-mic-pulse-accent; }
@keyframes wini-widget-mic-pulse-accent {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .35); }
  50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

.wini-widget-voice-status {
  padding: 0 14px 8px; font-size: 11.5px; color: var(--ww-text-2); flex: 0 0 auto;
}
.wini-widget-voice-status[hidden] { display: none; }
.wini-widget-voice-status-error { color: #ef4444; }

@media (max-width: 640px) {
  .wini-widget-panel {
    right: 10px; left: 10px; bottom: 10px; width: auto; max-width: none;
    height: calc(100vh - 96px); max-height: none; border-radius: 14px;
  }
  .wini-widget-bubble { right: 16px; bottom: 16px; }
  .wini-widget-jump { bottom: 168px; }
}