/* ═══════════════════════════════════════════════════════════════════
   assistant-bubble.css — J.art Photographe V7
   Mode "magique" : sphère noire/violette à anneau doré (bouton)
   + bulle flottante centrale (panneau) + burst de particules à l'ouverture.
   Inspiré d'une référence visuelle : sphère cosmique noir/or/violet.
   Couche posée par-dessus chatbot.js sans modifier sa logique.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --jart-violet:        #7c3aed;
  --jart-violet-deep:   #4a1d96;
  --jart-violet-soft:   rgba(124, 58, 237, 0.32);
  --jart-or-soft:       #e6c891;
  --jart-or-warm:       #f0d18e;
  --jart-or-glow:       rgba(201, 169, 110, 0.6);
  --jart-or-glow-2:     rgba(240, 209, 142, 0.95);
}

/* ════════════════════════════════════════════════════════════════
   1. SPHÈRE MAGIQUE — bouton bas droite (remplace .chat-bulle)
   ════════════════════════════════════════════════════════════════ */
.chat-bulle {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  /* Sphère sombre avec lueur intérieure violet/or */
  background:
    radial-gradient(circle at 35% 30%, rgba(240, 209, 142, 0.35) 0%, transparent 35%),
    radial-gradient(circle at 70% 75%, rgba(124, 58, 237, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #1a0d2e 0%, #060410 75%) !important;
  border: 1px solid rgba(240, 209, 142, 0.35) !important;
  box-shadow:
    inset 0 0 18px rgba(124, 58, 237, 0.4),
    inset 0 -4px 12px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--jart-or-soft),
    0 8px 30px var(--jart-or-glow),
    0 0 60px var(--jart-violet-soft) !important;
  overflow: visible !important;
  animation: jartOrbBreath 5s ease-in-out infinite;
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 800 !important;
}

/* Anneau doré tournant — l'élément signature de la référence */
.chat-bulle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      var(--jart-or-warm) 30deg,
      transparent 90deg,
      transparent 180deg,
      rgba(124, 58, 237, 0.6) 220deg,
      var(--jart-or-warm) 280deg,
      transparent 340deg,
      transparent 360deg
    );
  filter: blur(0.5px);
  z-index: -1;
  opacity: 0.85;
  animation: jartOrbRing 8s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 60%, black 62%, black 70%, transparent 72%);
          mask: radial-gradient(circle, transparent 60%, black 62%, black 70%, transparent 72%);
}

/* Halo doré flou pulsant autour */
.chat-bulle::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--jart-or-glow) 0%, transparent 60%);
  z-index: -2;
  opacity: 0.55;
  animation: jartOrbHalo 3.5s ease-in-out infinite;
  pointer-events: none;
}

.chat-bulle:hover {
  transform: scale(1.06);
  box-shadow:
    inset 0 0 22px rgba(124, 58, 237, 0.55),
    inset 0 -4px 12px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--jart-or-warm),
    0 12px 40px var(--jart-or-glow-2),
    0 0 80px var(--jart-violet-soft) !important;
}
.chat-bulle:hover::after { opacity: 0.9; }

/* Icône message visible mais discrète sur fond sombre */
.chat-bulle svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--jart-or-warm) !important;
  filter: drop-shadow(0 0 4px rgba(240, 209, 142, 0.7));
  position: relative;
  z-index: 2;
}

/* Particules dorées flottantes autour de la sphère */
.chat-bulle-particules {
  position: absolute;
  inset: -28px;
  pointer-events: none;
  z-index: -1;
}
.chat-bulle-particules span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--jart-or-warm);
  box-shadow: 0 0 8px var(--jart-or-glow-2);
  opacity: 0;
  animation: jartParticule 3.6s ease-in-out infinite;
}
.chat-bulle-particules span:nth-child(1) { top: 5%;   left: 80%; animation-delay: 0s;   }
.chat-bulle-particules span:nth-child(2) { top: 75%;  left: 8%;  animation-delay: 1.2s; }
.chat-bulle-particules span:nth-child(3) { top: 90%;  left: 75%; animation-delay: 2.4s; width: 3px; height: 3px; }

/* Badge notification — repositionné sur la sphère */
.chat-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0c994, #c9a96e);
  font-size: 0.65rem;
  font-weight: 700;
  color: #1a0d2e !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #060410;
  box-shadow: 0 0 10px var(--jart-or-glow-2);
  z-index: 3;
}

/* ════════════════════════════════════════════════════════════════
   2. BURST de particules au clic d'ouverture
   ════════════════════════════════════════════════════════════════ */
.jart-burst {
  position: fixed;
  width: 1px; height: 1px;
  pointer-events: none;
  z-index: 900;
}
.jart-burst.active span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--jart-or-warm);
  box-shadow: 0 0 10px var(--jart-or-glow-2), 0 0 20px var(--jart-or-glow);
  top: 0; left: 0;
  animation: jartBurst 1.1s cubic-bezier(.19,.86,.3,1) forwards;
}
/* 12 particules dispersées dans 12 directions */
.jart-burst.active span:nth-child(1)  { --ang:   0deg; --dist: 90px; }
.jart-burst.active span:nth-child(2)  { --ang:  30deg; --dist:130px; }
.jart-burst.active span:nth-child(3)  { --ang:  60deg; --dist:100px; }
.jart-burst.active span:nth-child(4)  { --ang:  90deg; --dist:140px; }
.jart-burst.active span:nth-child(5)  { --ang: 120deg; --dist:110px; }
.jart-burst.active span:nth-child(6)  { --ang: 150deg; --dist: 95px; }
.jart-burst.active span:nth-child(7)  { --ang: 180deg; --dist:135px; }
.jart-burst.active span:nth-child(8)  { --ang: 210deg; --dist:105px; }
.jart-burst.active span:nth-child(9)  { --ang: 240deg; --dist:120px; }
.jart-burst.active span:nth-child(10) { --ang: 270deg; --dist: 85px; }
.jart-burst.active span:nth-child(11) { --ang: 300deg; --dist:145px; }
.jart-burst.active span:nth-child(12) { --ang: 330deg; --dist:115px; }

/* ════════════════════════════════════════════════════════════════
   3. MISE EN SCÈNE PLEIN ÉCRAN — sphère monumentale au centre
   ════════════════════════════════════════════════════════════════ */
.chat-fenetre {
  /* Plein écran : pas un modal, une mise en scène théâtrale */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 850 !important;
  /* Layout vertical : sphère centrée, zone fonctionnelle dessous */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  /* Padding-top important pour laisser respirer le menu en haut */
  padding: clamp(5rem, 12vh, 7rem) 1rem 1.5rem !important;
  gap: 1.2rem;
  /* Animation d'apparition */
  opacity: 0 !important;
  transform: scale(0.95) !important;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.19,1,.22,1) !important;
  pointer-events: none !important;
}
.chat-fenetre.ouvert {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: all !important;
}

/* La sphère devient une VRAIE bulle de verre magique :
   centre quasi-transparent, reflets, profondeur 3D, halo violet/or. */
.chat-header {
  width: clamp(220px, 44vmin, 380px) !important;
  height: clamp(220px, 44vmin, 380px) !important;
  border-radius: 50% !important;
  /* Couches superposées pour effet verre :
     - Reflet brillant haut-gauche (clarté)
     - Lueur violette en bas-droite (profondeur magique)
     - Lueur dorée subtile au pourtour
     - Centre quasi-transparent (verre) qui s'opacifie aux bords */
  background:
    /* Reflet lumineux supérieur-gauche (highlight de verre) */
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 14%, transparent 28%),
    /* Petit éclat secondaire */
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 8%),
    /* Lueur violette en bas-droite (profondeur magique) */
    radial-gradient(circle at 75% 78%, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0.18) 35%, transparent 60%),
    /* Lueur dorée diffuse */
    radial-gradient(circle at 50% 60%, rgba(240, 209, 142, 0.18) 0%, transparent 55%),
    /* Centre TRÈS noir (comme la référence) → bords plus sombres encore */
    radial-gradient(circle, rgba(5, 2, 14, 0.85) 0%, rgba(8, 4, 18, 0.92) 45%, rgba(12, 6, 22, 0.85) 80%, rgba(15, 8, 25, 0.7) 100%) !important;
  border: 1px solid rgba(240, 209, 142, 0.45) !important;
  /* Inner-shadows = épaisseur de la paroi de verre */
  box-shadow:
    /* Reflet annulaire interne haut (verre) */
    inset 0 8px 24px rgba(255, 255, 255, 0.15),
    /* Éclat violet interne sur le bas */
    inset 0 -40px 80px rgba(124, 58, 237, 0.32),
    /* Ombre interne au pourtour pour la profondeur */
    inset 0 0 60px rgba(0, 0, 0, 0.55),
    /* Anneau doré net */
    0 0 0 1px rgba(240, 209, 142, 0.35),
    /* Halo extérieur doré + violet */
    0 0 100px var(--jart-or-glow),
    0 0 220px var(--jart-violet-soft) !important;
  /* Effet verre : flou subtil de ce qu'il y a derrière */
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
  padding: 0 !important;
  position: relative;
  flex-shrink: 0;
  overflow: hidden !important;
  animation: jartOrbFloatBig 7s ease-in-out infinite;
}

/* ── Couche INTÉRIEURE de la bulle : brume + particules internes ── */
.chat-orb-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* Brume magique tournante (pseudo-element 1) */
.chat-orb-glass::before {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.25) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(240, 209, 142, 0.15) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 40%);
  filter: blur(18px);
  opacity: 0.85;
  animation: jartBrumeRotate 22s linear infinite;
}
/* Highlight de verre supérieur (pseudo-element 2) — brillance haut */
.chat-orb-glass::after {
  content: '';
  position: absolute;
  top: 4%;
  left: 18%;
  width: 60%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 60%, transparent 90%);
  filter: blur(2px);
  pointer-events: none;
}

/* Vidéo discrète qui anime l'intérieur de la bulle (boule de cristal vivante) */
.chat-orb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  opacity: 0.42;
  /* Mix-blend-mode : la vidéo se mélange avec le fond sombre/violet de la bulle
     au lieu de l'écraser. "screen" éclaircit, "lighten" garde les zones claires. */
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  filter: saturate(1.15);
}

/* SVG des filaments dorés/violets qui swirlent dans la bulle */
.chat-orb-filaments {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.7;
  border-radius: 50%;
  overflow: hidden;
}
.chat-orb-filaments .jart-fil {
  opacity: 0.55;
  transform-origin: center;
  animation: jartFilPulse 4s ease-in-out infinite;
}
.chat-orb-filaments .jart-fil-1 { animation-delay: 0s;   }
.chat-orb-filaments .jart-fil-2 { animation-delay: 0.7s; }
.chat-orb-filaments .jart-fil-3 { animation-delay: 1.4s; }
.chat-orb-filaments .jart-fil-4 { animation-delay: 0.4s; }
.chat-orb-filaments .jart-fil-5 { animation-delay: 1.8s; }

/* Particules brillantes flottant À L'INTÉRIEUR de la bulle */
.chat-orb-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7e0 0%, var(--jart-or-warm) 40%, transparent 75%);
  box-shadow: 0 0 8px rgba(240, 209, 142, 0.85), 0 0 14px rgba(240, 209, 142, 0.5);
  pointer-events: none;
  opacity: 0;
}
.chat-orb-particle:nth-child(1) { width: 5px;  height: 5px;  top: 28%; left: 24%; animation: jartParticuleInt 6s ease-in-out infinite 0s;   }
.chat-orb-particle:nth-child(2) { width: 4px;  height: 4px;  top: 52%; left: 18%; animation: jartParticuleInt 7s ease-in-out infinite 0.7s; }
.chat-orb-particle:nth-child(3) { width: 6px;  height: 6px;  top: 70%; left: 30%; animation: jartParticuleInt 5.5s ease-in-out infinite 1.5s;}
.chat-orb-particle:nth-child(4) { width: 3px;  height: 3px;  top: 38%; left: 65%; animation: jartParticuleInt 6.5s ease-in-out infinite 2.1s;}
.chat-orb-particle:nth-child(5) { width: 5px;  height: 5px;  top: 60%; left: 75%; animation: jartParticuleInt 8s ease-in-out infinite 2.8s; }
.chat-orb-particle:nth-child(6) { width: 4px;  height: 4px;  top: 78%; left: 60%; animation: jartParticuleInt 6.2s ease-in-out infinite 1.2s;}
.chat-orb-particle:nth-child(7) { width: 3px;  height: 3px;  top: 22%; left: 50%; animation: jartParticuleInt 5.8s ease-in-out infinite 3.3s;}
.chat-orb-particle:nth-child(8) { width: 7px;  height: 7px;  top: 48%; left: 48%; animation: jartParticuleInt 9s ease-in-out infinite 0.4s; }
.chat-orb-particle:nth-child(9) { width: 4px;  height: 4px;  top: 32%; left: 78%; animation: jartParticuleInt 6.8s ease-in-out infinite 2.5s;}
.chat-orb-particle:nth-child(10){ width: 3px;  height: 3px;  top: 82%; left: 42%; animation: jartParticuleInt 7.5s ease-in-out infinite 1.8s;}

/* Le contenu (J.art + sous-titre) reste au-dessus des effets */
.chat-header > .chat-header-info,
.chat-header > .chat-avatar {
  position: relative;
  z-index: 2;
}
/* Anneau doré BRILLANT sur le pourtour — comme la référence */
.chat-fenetre.ouvert .chat-header::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(240, 209, 142, 0.95) 0deg,
      #fff7e0 60deg,
      rgba(240, 209, 142, 0.9) 120deg,
      rgba(124, 58, 237, 0.7) 200deg,
      rgba(240, 209, 142, 0.95) 280deg,
      #fff7e0 340deg,
      rgba(240, 209, 142, 0.95) 360deg
    );
  filter: blur(1px) drop-shadow(0 0 8px rgba(240, 209, 142, 0.7));
  z-index: 1;
  opacity: 0.9;
  animation: jartOrbRing 18s linear infinite;
  /* Anneau plus épais : entre 47% et 50% de rayon */
  -webkit-mask: radial-gradient(circle, transparent 47.5%, black 48.5%, black 50.5%, transparent 51.5%);
          mask: radial-gradient(circle, transparent 47.5%, black 48.5%, black 50.5%, transparent 51.5%);
  pointer-events: none;
}
/* Halo extérieur diffus géant */
.chat-fenetre.ouvert .chat-header::after {
  content: '';
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--jart-or-glow) 0%, transparent 55%);
  opacity: 0.5;
  z-index: -2;
  pointer-events: none;
  animation: jartOrbHalo 5s ease-in-out infinite;
}

/* Backdrop ENVELOPPANT le site (semi-transparent) */
.jart-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(20, 8, 40, 0.6) 0%, rgba(0, 0, 0, 0.92) 80%);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 845;
}
.jart-backdrop.visible {
  opacity: 1;
  pointer-events: all;
}

/* Backdrop sombre derrière la bulle centrale */
.jart-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10, 5, 20, 0.7) 0%, rgba(0, 0, 0, 0.92) 80%);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 840;
}
.jart-backdrop.visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Contenu interne de la sphère : J.art + ornement ──────────── */
.chat-header .chat-avatar {
  display: none !important;
}
.chat-header-info {
  text-align: center;
  position: relative;
}
.chat-header-info strong {
  font-family: var(--serif, 'Cormorant Garamond', serif) !important;
  font-style: italic !important;
  font-size: clamp(2.6rem, 7vmin, 4.5rem) !important;
  font-weight: 400 !important;
  background: linear-gradient(135deg, #f5dca0, var(--jart-or-warm), #c9a96e);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em !important;
  display: block !important;
  line-height: 1;
  text-shadow: 0 0 40px var(--jart-or-glow-2);
}
.chat-header-info .chat-header-etat {
  display: block !important;
  margin-top: 0.6rem;
  font-size: 0.62rem !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jart-or-soft) !important;
  opacity: 0.55;
}
/* Ornement décoratif sous "J.art" — fleuron doré */
.chat-header-info::after {
  content: '┄ ✦ ┄';
  display: block;
  margin-top: 0.7rem;
  color: var(--jart-or-warm);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  opacity: 0.75;
  text-shadow: 0 0 10px var(--jart-or-glow-2);
}
/* Bouton fermer : flottant en haut-droite de l'écran */
.chat-fermer {
  position: fixed !important;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(13, 8, 20, 0.85) !important;
  border: 1px solid rgba(240, 209, 142, 0.35);
  color: var(--jart-or-soft) !important;
  margin-left: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem !important;
  transition: all 0.25s ease !important;
  z-index: 860;
  backdrop-filter: blur(8px);
}
.chat-fermer:hover {
  background: rgba(124, 58, 237, 0.3) !important;
  color: var(--jart-or-warm) !important;
  border-color: var(--jart-or-warm);
}

/* ── Boutons rapides : pilules dorées en rangée sous la sphère ── */
.chat-rapides {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 1rem !important;
  border-bottom: none !important;
  background: transparent !important;
  flex-shrink: 0;
  max-width: 720px;
}
.chat-rapides-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: rgba(13, 8, 20, 0.8);
  border: 1px solid rgba(240, 209, 142, 0.35);
  border-radius: 100px;
  color: var(--jart-or-soft);
  font-family: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.chat-rapides-btn:hover {
  background: rgba(124, 58, 237, 0.25);
  border-color: var(--jart-or-warm);
  color: var(--jart-or-warm);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--jart-or-glow);
}
.chat-rapides-btn .chat-rapides-ico {
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ── Zone messages : largeur cohérente avec saisie/boutons rapides ── */
.chat-messages {
  padding: 0.6rem 0.8rem !important;
  width: min(900px, 92vw);
  max-height: clamp(140px, 24vh, 240px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 209, 142, 0.4) transparent;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(240, 209, 142, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 0.6rem !important;
}
.chat-messages:empty {
  display: none !important;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(240, 209, 142, 0.35); border-radius: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }

.msg {
  font-size: 0.86rem !important;
  padding: 0.65rem 0.95rem !important;
  line-height: 1.55 !important;
  max-width: 86% !important;
  backdrop-filter: blur(4px);
  word-wrap: break-word;
}
/* Bulle ASSISTANT : violet sombre, alignée à gauche, coin bas-gauche pointu */
.msg-bot {
  background: linear-gradient(135deg, rgba(40, 20, 70, 0.92), rgba(20, 12, 35, 0.88)) !important;
  border: 1px solid rgba(124, 58, 237, 0.4) !important;
  border-radius: 16px 16px 16px 4px !important;
  color: #f5e9d4 !important;
  align-self: flex-start;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.18);
}
/* Bulle CLIENT : doré, alignée à droite, coin bas-droit pointu */
.msg-user {
  background: linear-gradient(135deg, rgba(240, 209, 142, 0.28), rgba(201, 169, 110, 0.15)) !important;
  border: 1px solid rgba(240, 209, 142, 0.55) !important;
  border-radius: 16px 16px 4px 16px !important;
  color: var(--jart-or-warm) !important;
  align-self: flex-end;
  box-shadow: 0 2px 12px rgba(240, 209, 142, 0.15);
}
.chat-btn {
  font-size: 0.74rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 100px !important;
  background: rgba(13, 8, 20, 0.7) !important;
  border: 1px solid rgba(240, 209, 142, 0.3) !important;
}
.chat-choix {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem;
}
.msg-bot {
  background: rgba(124, 58, 237, 0.1) !important;
  border: 1px solid rgba(240, 209, 142, 0.15);
  color: var(--blanc-chaud, #f5e9d4) !important;
}
.msg-user {
  background: linear-gradient(135deg, rgba(240, 209, 142, 0.18), rgba(201, 169, 110, 0.1)) !important;
  border: 1px solid rgba(240, 209, 142, 0.35) !important;
  color: var(--jart-or-warm) !important;
}
.chat-btn {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(240, 209, 142, 0.25) !important;
  color: var(--jart-or-soft) !important;
}
.chat-btn:hover {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: var(--jart-or-warm) !important;
  color: var(--jart-or-warm) !important;
}

/* ── Zone de saisie : grande pilule sous la sphère ──────────── */
.chat-saisie {
  background: transparent !important;
  border-top: none !important;
  padding: 0 1rem !important;
  flex-shrink: 0;
  gap: 0.6rem !important;
  width: min(640px, 92vw);
}
.chat-input {
  background: rgba(13, 8, 20, 0.85) !important;
  border: 1px solid rgba(240, 209, 142, 0.4) !important;
  border-radius: 100px !important;
  color: var(--jart-or-soft) !important;
  font-size: 0.92rem !important;
  padding: 0.85rem 1.4rem !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.18);
}
.chat-input:focus {
  border-color: var(--jart-or-warm) !important;
  box-shadow: 0 0 20px rgba(240, 209, 142, 0.35), 0 4px 24px rgba(124, 58, 237, 0.25);
}
.chat-input::placeholder {
  color: rgba(240, 209, 142, 0.45) !important;
  font-style: italic;
}
.chat-envoyer {
  background: linear-gradient(135deg, var(--jart-or-warm), #c9a96e) !important;
  border: 1px solid var(--jart-or-soft);
  box-shadow: 0 0 16px var(--jart-or-glow), 0 4px 12px rgba(0, 0, 0, 0.4);
  width: 44px !important;
  height: 44px !important;
}
.chat-envoyer svg {
  color: #1a0d2e !important;
  width: 18px !important;
  height: 18px !important;
}

/* ── Texte d'accueil + citation autour de la zone fonctionnelle ── */
.chat-accueil-texte {
  text-align: center;
  max-width: 540px;
  margin-top: 0.5rem;
  flex-shrink: 0;
}
.chat-accueil-titre {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(1rem, 2.4vmin, 1.3rem);
  color: var(--jart-or-soft);
  margin: 0 0 0.3rem;
  letter-spacing: 0.02em;
}
.chat-accueil-sub {
  font-size: 0.78rem;
  color: var(--jart-or-soft);
  opacity: 0.65;
  letter-spacing: 0.02em;
  font-style: italic;
  margin: 0;
}
.chat-citation {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(240, 209, 142, 0.55);
  margin: 0.6rem 0 0;
  text-align: center;
}
.chat-citation::before, .chat-citation::after {
  content: '✦';
  margin: 0 0.5rem;
  font-size: 0.7rem;
  opacity: 0.7;
}

/* ── Petites bulles iridescentes flottantes autour de la sphère ── */
.chat-bulles-flottantes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.chat-bulles-flottantes span {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(240, 209, 142, 0.2) 0%, transparent 70%);
  border: 1px solid rgba(240, 209, 142, 0.25);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.3),
    0 0 8px rgba(240, 209, 142, 0.3);
  opacity: 0;
}
.chat-bulles-flottantes span:nth-child(1)  { width: 14px; height: 14px; top: 22%; left: 14%; animation: jartBulle 7s ease-in-out infinite 0.0s; }
.chat-bulles-flottantes span:nth-child(2)  { width: 22px; height: 22px; top: 38%; left: 8%;  animation: jartBulle 8s ease-in-out infinite 1.2s; }
.chat-bulles-flottantes span:nth-child(3)  { width: 10px; height: 10px; top: 60%; left: 18%; animation: jartBulle 6s ease-in-out infinite 2.4s; }
.chat-bulles-flottantes span:nth-child(4)  { width: 16px; height: 16px; top: 18%; left: 78%; animation: jartBulle 7.5s ease-in-out infinite 0.6s; }
.chat-bulles-flottantes span:nth-child(5)  { width: 24px; height: 24px; top: 42%; left: 88%; animation: jartBulle 9s ease-in-out infinite 1.8s; }
.chat-bulles-flottantes span:nth-child(6)  { width: 12px; height: 12px; top: 65%; left: 82%; animation: jartBulle 7s ease-in-out infinite 3.0s; }
.chat-bulles-flottantes span:nth-child(7)  { width: 8px;  height: 8px;  top: 30%; left: 50%; animation: jartBulle 6.5s ease-in-out infinite 0.9s; }
.chat-bulles-flottantes span:nth-child(8)  { width: 18px; height: 18px; top: 75%; left: 30%; animation: jartBulle 8.5s ease-in-out infinite 2.1s; }
.chat-bulles-flottantes span:nth-child(9)  { width: 11px; height: 11px; top: 75%; left: 65%; animation: jartBulle 7s ease-in-out infinite 1.5s; }
.chat-bulles-flottantes span:nth-child(10) { width: 26px; height: 26px; top: 12%; left: 38%; animation: jartBulle 10s ease-in-out infinite 2.7s; }
.chat-bulles-flottantes span:nth-child(11) { width: 9px;  height: 9px;  top: 8%;  left: 24%; animation: jartBulle 6.2s ease-in-out infinite 0.4s; }
.chat-bulles-flottantes span:nth-child(12) { width: 13px; height: 13px; top: 50%; left: 4%;  animation: jartBulle 7.8s ease-in-out infinite 1.7s; }
.chat-bulles-flottantes span:nth-child(13) { width: 20px; height: 20px; top: 88%; left: 12%; animation: jartBulle 9.5s ease-in-out infinite 2.9s; }
.chat-bulles-flottantes span:nth-child(14) { width: 7px;  height: 7px;  top: 28%; left: 32%; animation: jartBulle 5.8s ease-in-out infinite 1.0s; }
.chat-bulles-flottantes span:nth-child(15) { width: 15px; height: 15px; top: 55%; left: 28%; animation: jartBulle 8.2s ease-in-out infinite 2.3s; }
.chat-bulles-flottantes span:nth-child(16) { width: 6px;  height: 6px;  top: 5%;  left: 60%; animation: jartBulle 5.5s ease-in-out infinite 3.4s; }
.chat-bulles-flottantes span:nth-child(17) { width: 17px; height: 17px; top: 25%; left: 92%; animation: jartBulle 8s ease-in-out infinite 0.3s; }
.chat-bulles-flottantes span:nth-child(18) { width: 19px; height: 19px; top: 56%; left: 72%; animation: jartBulle 9.2s ease-in-out infinite 1.4s; }
.chat-bulles-flottantes span:nth-child(19) { width: 10px; height: 10px; top: 88%; left: 78%; animation: jartBulle 7.3s ease-in-out infinite 2.6s; }
.chat-bulles-flottantes span:nth-child(20) { width: 21px; height: 21px; top: 35%; left: 22%; animation: jartBulle 8.7s ease-in-out infinite 3.1s; }
.chat-bulles-flottantes span:nth-child(21) { width: 8px;  height: 8px;  top: 92%; left: 48%; animation: jartBulle 6s ease-in-out infinite 0.7s; }
.chat-bulles-flottantes span:nth-child(22) { width: 14px; height: 14px; top: 16%; left: 66%; animation: jartBulle 7.6s ease-in-out infinite 2.0s; }
.chat-bulles-flottantes span:nth-child(23) { width: 12px; height: 12px; top: 48%; left: 56%; animation: jartBulle 8.4s ease-in-out infinite 3.5s; }
.chat-bulles-flottantes span:nth-child(24) { width: 23px; height: 23px; top: 70%; left: 95%; animation: jartBulle 9.8s ease-in-out infinite 1.1s; }

/* ════════════════════════════════════════════════════════════════
   4. CHIP D'ÉTAT (flottant à gauche de la bulle bouton)
   ════════════════════════════════════════════════════════════════ */
.chat-etat {
  position: fixed;
  bottom: calc(2rem + 18px);
  right: calc(2rem + 64px + 16px);
  padding: 0.45rem 0.95rem;
  background: rgba(13, 8, 20, 0.92);
  border: 1px solid rgba(240, 209, 142, 0.45);
  border-radius: 100px;
  color: var(--jart-or-soft);
  font-family: var(--sans, system-ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  z-index: 799;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 18px var(--jart-or-glow);
}
.chat-etat.visible {
  opacity: 1;
  transform: translateX(0);
}
.chat-etat .chat-etat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jart-or-warm);
  box-shadow: 0 0 8px var(--jart-or-glow-2);
}
.chat-etat[data-etat="ecoute"]   .chat-etat-dot { background: var(--jart-or-warm); }
.chat-etat[data-etat="analyse"]  .chat-etat-dot { background: var(--jart-violet); box-shadow: 0 0 10px rgba(124,58,237,.7); animation: jartDotPulse 1s ease-in-out infinite; }
.chat-etat[data-etat="reponse"]  .chat-etat-dot { background: #2bd06a; box-shadow: 0 0 8px rgba(43,208,106,.6); }
.chat-etat[data-etat="devis"]    .chat-etat-dot { background: #f0c994; }
.chat-etat[data-etat="date"]     .chat-etat-dot { background: #ff9f3a; }
.chat-etat[data-etat="envoye"]   .chat-etat-dot { background: #2bd06a; }

/* ════════════════════════════════════════════════════════════════
   5. RESPONSIVE — mobile : bulle centrale plein écran adapté
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .chat-etat { display: none; }

  .chat-bulle {
    width: 56px !important;
    height: 56px !important;
    bottom: 1.2rem !important;
    right: 1.2rem !important;
  }
  .chat-bulle svg { width: 20px !important; height: 20px !important; }

  .chat-fenetre {
    /* Garder la sphère ronde sur mobile, juste plus petite */
    width: min(94vw, 92vh) !important;
    height: min(94vw, 92vh) !important;
    border-radius: 50% !important;
    padding: 7% !important;
  }
  .chat-fenetre.ouvert::after {
    inset: -25px;
  }

  .chat-header-info strong { font-size: 1.4rem !important; }
  .chat-rapides { padding: 0.8rem 0.9rem 0.5rem; }
  .chat-rapides-btn { font-size: 0.72rem; padding: 0.5rem 0.6rem; }
}

/* ════════════════════════════════════════════════════════════════
   6. ANIMATIONS — une keyframe par effet
   ════════════════════════════════════════════════════════════════ */
@keyframes jartOrbBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

@keyframes jartOrbRing {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes jartOrbHalo {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.12); }
}

@keyframes jartOrbFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0); }
  50%      { transform: translate(-50%, -50%) scale(1) translateY(-8px); }
}

@keyframes jartOrbFloatBig {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes jartBulle {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  20%      { opacity: 0.7; }
  50%      { opacity: 0.95; transform: translate(8px, -18px) scale(1); }
  80%      { opacity: 0.6; }
}

/* Brume magique tournante DANS la bulle */
@keyframes jartBrumeRotate {
  0%   { transform: rotate(0deg)   scale(1);   }
  50%  { transform: rotate(180deg) scale(1.05);}
  100% { transform: rotate(360deg) scale(1);   }
}

/* Particules brillantes flottant DANS la bulle (3D) */
@keyframes jartParticuleInt {
  0%, 100% { opacity: 0;    transform: translate(0, 0)       scale(0.6); }
  15%      { opacity: 0.9;  transform: translate(2px, -4px)  scale(1);   }
  50%      { opacity: 1;    transform: translate(-3px, -10px) scale(1.1);}
  85%      { opacity: 0.6;  transform: translate(4px, -16px) scale(0.9); }
}

/* Pulsation douce des filaments lumineux à l'intérieur de la bulle */
@keyframes jartFilPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}

@keyframes jartParticule {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20%      { opacity: 0.8; }
  50%      { opacity: 1; transform: translate(2px, -8px) scale(1); }
  80%      { opacity: 0.7; }
}

@keyframes jartDotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.5); }
}

@keyframes jartBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(cos(var(--ang)) * var(--dist)),
        calc(sin(var(--ang)) * var(--dist))
      )
      scale(0.2);
  }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chat-bulle,
  .chat-bulle::before,
  .chat-bulle::after,
  .chat-bulle-particules span,
  .chat-fenetre.ouvert,
  .chat-fenetre.ouvert::before,
  .chat-etat[data-etat="analyse"] .chat-etat-dot,
  .jart-burst.active span {
    animation: none !important;
  }
  .chat-fenetre {
    transition: opacity 0.3s ease !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .chat-fenetre:not(.ouvert) {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}