#ai-fab-root {
  /* Valeurs par défaut — surchargées par le <style> inline injecté par
     _ai_fab.html (réglages utilisateur). */
  --aif-primary: #0284c7;
  --aif-primary-hover: #0369a1;
  --aif-bg: #ffffff;
  --aif-text: #1a1a1a;
  --aif-text-inverse: #ffffff;
  --aif-border: rgba(0,0,0,.10);
  --aif-shadow:
    0 1px 3px rgba(0,0,0,.10),
    0 4px 14px rgba(0,0,0,.08),
    0 0 0 1px rgba(2,132,199,.15);
  --aif-fab-radius: 999px;
  --aif-panel-radius: 14px;
  --aif-opacity-fab: 1;
  --aif-opacity-panel: 1;
  --aif-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aif-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: system-ui, -apple-system, sans-serif;
}

/* FAB pilule */
.ai-fab {
  position: fixed; z-index: 9990;
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: 6px 8px;
  background: var(--aif-bg);
  border-radius: var(--aif-fab-radius);
  box-shadow: var(--aif-shadow);
  opacity: var(--aif-opacity-fab);
  user-select: none;
  touch-action: none;
  transition: transform .18s var(--aif-ease), box-shadow .18s var(--aif-ease);
}
/* Drag ultra-fluide via GPU compositing : pas de transition pendant le
   move, et `will-change: transform` pour signaler au navigateur de
   promouvoir le FAB sur sa propre couche. */
.ai-fab.is-dragging,
.ai-fab.is-dragging * {
  transition: none !important;
  cursor: grabbing;
}
.ai-fab.is-dragging { will-change: transform; }
.ai-fab.is-snapping { transition: top .45s var(--aif-spring), left .45s var(--aif-spring); }

/* Idem pour le panneau pendant son drag. Désactive aussi la transition
   d'animation d'ouverture/fermeture (.is-visible) pendant le mouvement. */
.ai-panel.is-dragging-panel,
.ai-panel.is-dragging-panel * {
  transition: none !important;
}
.ai-panel.is-dragging-panel { will-change: transform; cursor: grabbing; }

/* Hover : léger lift + ombre renforcée */
.ai-fab:not(.is-dragging):hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 6px rgba(0,0,0,.14),
    0 10px 26px rgba(0,0,0,.10),
    0 0 0 1px rgba(2,132,199,.20);
}

/* Animation d'entrée au premier chargement (apparaît une fois) */
.ai-fab.is-entering {
  animation: aifab-enter .4s var(--aif-spring) forwards;
}
@keyframes aifab-enter {
  from { opacity: 0; transform: scale(0.9) translateY(6px); }
  to   { opacity: var(--aif-opacity-fab); transform: scale(1) translateY(0); }
}

/* Grip */
.ai-fab-grip {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 36px;
  color: rgba(0,0,0,.35);
  cursor: grab;
  border-radius: 6px;
}
.ai-fab-grip:hover { color: rgba(0,0,0,.6); background: rgba(0,0,0,.04); }
.ai-fab-grip:active { cursor: grabbing; }
.ai-fab-grip svg { width: 4px; height: 14px; }

/* Boutons */
.ai-fab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: none; border-radius: var(--aif-fab-radius);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ai-fab-btn:hover { transform: translateY(-1px); }
.ai-fab-primary {
  background: var(--aif-primary); color: var(--aif-text-inverse);
}
.ai-fab-primary:hover { background: var(--aif-primary-hover); }
.ai-fab-secondary {
  background: rgba(0,0,0,.04); color: var(--aif-text);
}
.ai-fab-secondary:hover { background: rgba(0,0,0,.08); }
.ai-fab-icon { display: inline-flex; }
.ai-fab-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
.ai-fab-label { line-height: 1; white-space: nowrap; }

/* Mode compact : icônes seules */
.ai-fab[data-state="compact"] .ai-fab-label { display: none; }
.ai-fab[data-state="compact"] .ai-fab-btn { padding: 8px 10px; }

/* Panneau de chat (ouvert) */
.ai-panel {
  position: fixed; z-index: 9991;
  width: 360px; height: 440px;
  background: var(--aif-bg);
  border-radius: var(--aif-panel-radius);
  box-shadow: var(--aif-shadow);
  opacity: var(--aif-opacity-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: top left;
  transition: opacity .2s var(--aif-ease),
              transform .25s var(--aif-spring);
}
.ai-panel[hidden] { display: none; }

/* États d'animation ouverture / fermeture (AI-PANEL-4) */
.ai-panel.is-entering {
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
}
.ai-panel.is-visible {
  opacity: var(--aif-opacity-panel);
  transform: scale(1) translateY(0);
}
.ai-panel.is-leaving {
  opacity: 0;
  transform: scale(0.97) translateY(-2px);
  transition-duration: .12s;
}

/* Zones de resize invisibles sur les 4 bords + 4 coins du panneau.
   Posées en `position: absolute` par rapport à `.ai-panel` (qui est en
   `position: fixed`). Curseurs adaptés selon l'axe / la diagonale. */
.ai-panel-edge {
  position: absolute;
  z-index: 10;
}
.ai-panel-edge-n  { top:    -4px; left:  8px; right: 8px; height:  8px; cursor: ns-resize; }
.ai-panel-edge-s  { bottom: -4px; left:  8px; right: 8px; height:  8px; cursor: ns-resize; }
.ai-panel-edge-e  { top:     8px; right: -4px; bottom: 8px; width:  8px; cursor: ew-resize; }
.ai-panel-edge-w  { top:     8px; left:  -4px; bottom: 8px; width:  8px; cursor: ew-resize; }
.ai-panel-edge-ne { top:    -4px; right: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.ai-panel-edge-nw { top:    -4px; left:  -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.ai-panel-edge-se { bottom: -4px; right: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.ai-panel-edge-sw { bottom: -4px; left:  -4px; width: 12px; height: 12px; cursor: nesw-resize; }

/* Pendant le resize : pas de transition, pointer-events désactivés sur
   le contenu pour éviter les interactions parasites. */
.ai-panel.is-resizing {
  transition: none !important;
  will-change: width, height;
}
.ai-panel.is-resizing * { pointer-events: none; }
.ai-panel.is-resizing .ai-panel-edge { pointer-events: auto; }

/* Indicateur de réflexion IA (animation 3 dots pulsants) */
.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-thinking-label {
  font-size: 12px;
  opacity: .6;
  font-style: italic;
}
.ai-thinking-dots {
  display: inline-flex;
  gap: 3px;
}
.ai-thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aif-primary);
  opacity: .3;
  animation: aif-dot-pulse 1.2s ease-in-out infinite;
}
.ai-thinking-dots span:nth-child(2) { animation-delay: .2s; }
.ai-thinking-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aif-dot-pulse {
  0%, 80%, 100% { opacity: .3; transform: scale(0.8); }
  40%           { opacity:  1; transform: scale(1);   }
}
.ai-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--aif-border);
  cursor: grab;
  background: rgba(0,0,0,.02);
}
.ai-panel-header:active { cursor: grabbing; }
.ai-panel-title { font-weight: 500; font-size: 13px; color: var(--aif-text); }
.ai-panel-close {
  background: none; border: none; cursor: pointer;
  padding: 4px; border-radius: 6px; opacity: .55;
  color: var(--aif-text);
}
.ai-panel-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.ai-panel-close svg { width: 14px; height: 14px; }

.ai-panel-msgs {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-msg {
  max-width: 88%; font-size: 12.5px; line-height: 1.5;
  padding: 8px 11px; border-radius: 10px;
}
.ai-msg-bot { background: rgba(0,0,0,.04); align-self: flex-start; border-radius: 4px 10px 10px 10px; color: var(--aif-text); }
.ai-msg-user { background: rgba(2,132,199,.12); color: var(--aif-primary-hover); align-self: flex-end; border-radius: 10px 4px 10px 10px; }
.ai-msg-label { font-size: 10px; opacity: .45; margin-bottom: 2px; }

.ai-panel-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--aif-border);
}
#ai-panel-input {
  flex: 1; background: rgba(0,0,0,.04); border: 1px solid var(--aif-border);
  border-radius: 20px; padding: 7px 12px; font-size: 12.5px; outline: none;
  height: 32px; color: var(--aif-text);
}
#ai-panel-send {
  background: rgba(2,132,199,.15); border: none; border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--aif-primary);
}
#ai-panel-send svg { width: 14px; height: 14px; }

/* Désactivation instantanée des animations — pilotée par le live-preview
   (AI-PANEL-3) quand l'utilisateur décoche « Animations » dans le formulaire,
   ou en complément du <style> serveur quand animations_enabled=False. */
#ai-fab-root.no-animations,
#ai-fab-root.no-animations * {
  transition: none !important;
  animation: none !important;
}

/* Respect prefers-reduced-motion : couvre transitions ET animations
   (keyframes d'entrée FAB, dots thinking, transitions du panneau / resize). */
@media (prefers-reduced-motion: reduce) {
  .ai-fab, .ai-fab-btn, .ai-panel,
  .ai-panel-close, #ai-panel-send,
  .ai-fab.is-snapping, .ai-fab.is-entering,
  .ai-thinking-dots span {
    transition: none !important;
    animation: none !important;
  }
}