/* =============================================================================
 * widget-skin.css — Storefront AI voice/chat widget reskin (Devaito)
 * -----------------------------------------------------------------------------
 * ADDITIVE overlay loaded AFTER the widget's own hashed CSS. It never edits the
 * compiled bundle; it only overrides the widget's (Vue-scoped) class names to
 * give an ElevenLabs-class look: a living gradient "orb" launcher, a clean
 * theme-adaptive card, brand-violet accents. Injected at request time only for
 * stores in features.voice_widget_skin_tenants (canary), so it is inert/absent
 * everywhere else (fleet stays byte-identical).
 *
 * Specificity note: the bundle uses `.x[data-v-####]` (0,2,0). To win reliably
 * from an unscoped sheet we use `!important` on the overridden values. We only
 * touch colours / surfaces / shape / shadow — never layout or animation timing.
 *
 * Brand: violet #472af2 → #7c3aed, halo #a78bfa. Orb blends violet→blue→teal→amber.
 * =========================================================================== */

:root {
  --dvx-violet: #5a3ff0;
  --dvx-violet-2: #7c3aed;
  --dvx-halo: #a78bfa;
  --dvx-ink: #101322;
  --dvx-muted: #5b6478;
  --dvx-card: rgba(255, 255, 255, 0.94);
  --dvx-card-border: rgba(17, 19, 34, 0.08);
  --dvx-card-shadow: 0 18px 60px rgba(24, 18, 60, 0.22), 0 2px 8px rgba(24, 18, 60, 0.10);
}

/* The signature living orb — reused by launcher, avatar and send button. */
@keyframes dvxOrbShimmer {
  0%, 100% { filter: hue-rotate(0deg) saturate(1.05) brightness(1); }
  50%      { filter: hue-rotate(-12deg) saturate(1.15) brightness(1.06); }
}
@keyframes dvxHalo {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.7); opacity: 0;   }
  100% { transform: scale(1.7); opacity: 0;   }
}

/* ###########################################################################
 * PART A — NATIVE Q&A widget  (#dvai-* from buildAssistantWidget)
 * This is the widget live on storefronts today (violet button + white card).
 * We give it the ElevenLabs-class look: a living gradient-orb launcher, a clean
 * white/dark card, an orb avatar header, brand-violet bubbles. IDs → we match
 * with `!important` and rely on being loaded after the widget's inline <style>.
 * ######################################################################### */

/* Launcher → living gradient orb */
#dvai-b {
  width: 64px !important;
  height: 64px !important;
  background:
    radial-gradient(120% 120% at 28% 22%, var(--dvx-halo) 0%, rgba(167,139,250,0) 42%),
    radial-gradient(120% 120% at 78% 26%, #5b8cff 0%, rgba(91,140,255,0) 46%),
    radial-gradient(120% 120% at 72% 80%, #22d3ee 0%, rgba(34,211,238,0) 45%),
    radial-gradient(120% 120% at 26% 82%, #f5c451 0%, rgba(245,196,81,0) 50%),
    linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  box-shadow:
    0 10px 30px rgba(90, 63, 240, 0.42),
    0 2px 6px rgba(24, 18, 60, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  animation: dvxOrbShimmer 8s ease-in-out infinite !important;
  overflow: visible !important;
}
#dvai-b svg { filter: drop-shadow(0 1px 2px rgba(20,12,50,0.45)) !important; transform: scale(1.02); }
#dvai-b::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--dvx-halo) 0%, rgba(124,58,237,0.35) 60%, transparent 72%) !important;
  animation: dvxHalo 2.6s ease-out infinite !important;
  z-index: -1 !important;
}
#dvai-b:hover {
  box-shadow: 0 14px 40px rgba(90,63,240,0.5), 0 3px 10px rgba(24,18,60,0.3) !important;
}

/* Card */
#dvai-p {
  background: var(--dvx-card) !important;
  border: 1px solid var(--dvx-card-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--dvx-card-shadow) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* Header → clean, orb avatar */
#dvai-h {
  background: transparent !important;
  color: var(--dvx-ink) !important;
  border-bottom: 1px solid var(--dvx-card-border) !important;
  padding: 14px 16px !important;
}
#dvai-h .nm { color: var(--dvx-ink) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
#dvai-h .x { color: var(--dvx-muted) !important; }
#dvai-h .d {
  width: 30px !important;
  height: 30px !important;
  background:
    radial-gradient(120% 120% at 30% 22%, var(--dvx-halo) 0%, rgba(167,139,250,0) 45%),
    radial-gradient(120% 120% at 75% 80%, #22d3ee 0%, rgba(34,211,238,0) 48%),
    linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  box-shadow: 0 4px 12px rgba(90,63,240,0.35) !important;
}

/* Messages */
#dvai-m { background: transparent !important; }
.dvai-msg.usr {
  background: linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(90,63,240,0.28) !important;
}
.dvai-msg.bot {
  background: #fff !important;
  color: var(--dvx-ink) !important;
  border: 1px solid var(--dvx-card-border) !important;
}

/* Input row */
#dvai-f { background: transparent !important; border-top: 1px solid var(--dvx-card-border) !important; }
#dvai-i {
  background: rgba(17,19,34,0.035) !important;
  border: 1px solid var(--dvx-card-border) !important;
  color: var(--dvx-ink) !important;
}
#dvai-i:focus {
  border-color: var(--dvx-violet) !important;
  box-shadow: 0 0 0 3px rgba(90,63,240,0.18) !important;
  background: #fff !important;
}
#dvai-s {
  background: linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  box-shadow: 0 6px 16px rgba(90,63,240,0.4) !important;
}

/* Native widget — dark storefront adaptation */
@media (prefers-color-scheme: dark) {
  .dvai-msg.bot {
    background: rgba(255,255,255,0.06) !important;
    color: var(--dvx-ink) !important;
    border-color: var(--dvx-card-border) !important;
  }
  #dvai-i { background: rgba(255,255,255,0.06) !important; color: var(--dvx-ink) !important; }
  #dvai-i:focus { background: rgba(255,255,255,0.10) !important; }
}

/* ###########################################################################
 * PART B — LiveKit bundle widget  (.chatbot-* / .chatbot-mode-bubble)
 * Applies on stores that run the compiled voice bundle instead of the native
 * widget. Same brand language, so both widget types look consistent.
 * ######################################################################### */

/* ---------------------------------------------------------------------------
 * 1. Round FAB launcher  (.chatbot-widget-button)  →  living gradient orb
 * ------------------------------------------------------------------------- */
.chatbot-widget-button {
  width: 64px !important;
  height: 64px !important;
  background:
    radial-gradient(120% 120% at 28% 22%, var(--dvx-halo) 0%, rgba(167,139,250,0) 42%),
    radial-gradient(120% 120% at 78% 26%, #5b8cff 0%, rgba(91,140,255,0) 46%),
    radial-gradient(120% 120% at 72% 80%, #22d3ee 0%, rgba(34,211,238,0) 45%),
    radial-gradient(120% 120% at 26% 82%, #f5c451 0%, rgba(245,196,81,0) 50%),
    linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  box-shadow:
    0 10px 30px rgba(90, 63, 240, 0.42),
    0 2px 6px rgba(24, 18, 60, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  animation: dvxOrbShimmer 8s ease-in-out infinite !important;
}
.chatbot-widget-button svg {
  color: #fff !important;
  filter: drop-shadow(0 1px 2px rgba(20, 12, 50, 0.45)) !important;
  transform: scale(1.05);
}
/* soft brand halo pulse (replaces the flat inherited pulse colour) */
.chatbot-widget-button:not(.active):not(.speaking)::before {
  background: radial-gradient(circle, var(--dvx-halo) 0%, rgba(124,58,237,0.35) 60%, transparent 72%) !important;
  animation: dvxHalo 2.6s ease-out infinite !important;
}
.chatbot-widget-button:hover {
  box-shadow:
    0 14px 40px rgba(90, 63, 240, 0.5),
    0 3px 10px rgba(24, 18, 60, 0.3) !important;
}

/* ---------------------------------------------------------------------------
 * 2. Pill launcher  (.chatbot-mode-bubble / restore)  →  frosted premium pill
 * ------------------------------------------------------------------------- */
.chatbot-mode-bubble,
.chatbot-mode-bubble-restore {
  background: var(--dvx-card) !important;
  border: 1px solid var(--dvx-card-border) !important;
  box-shadow: 0 12px 34px rgba(24, 18, 60, 0.18), 0 1px 3px rgba(24, 18, 60, 0.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  padding: 6px 8px !important;
}
.chatbot-mode-bubble .bubble-btn {
  color: var(--dvx-ink) !important;
}
/* Conserve comme REPLI seulement : si aucun bouton ne porte .active, le premier
   reste accentue plutot que d'avoir une pilule entierement neutre. Des qu'un
   bouton est actif, la regle .active ajoutee plus bas l'emporte (meme
   specificite, declaree APRES). */
.chatbot-mode-bubble .bubble-btn:first-child {
  background:
    radial-gradient(120% 120% at 30% 25%, var(--dvx-halo) 0%, rgba(167,139,250,0) 45%),
    radial-gradient(120% 120% at 75% 78%, #22d3ee 0%, rgba(34,211,238,0) 48%),
    linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(90, 63, 240, 0.4) !important;
}
.chatbot-mode-bubble .bubble-btn:not(:first-child):hover {
  background: rgba(17, 19, 34, 0.06) !important;
}
.chatbot-mode-bubble .close-btn { color: var(--dvx-muted) !important; }
.chatbot-mode-bubble-restore { color: var(--dvx-violet) !important; }

/* ---------------------------------------------------------------------------
 * 3. Open panel  (.chatbot-container / .chatbot-voice-container)  →  clean card
 * ------------------------------------------------------------------------- */
.chatbot-container,
.chatbot-voice-container {
  background: var(--dvx-card) !important;
  border: 1px solid var(--dvx-card-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--dvx-card-shadow) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* ---------------------------------------------------------------------------
 * 4. Header  (.chatbot-header)  →  blends into card, orb avatar
 * ------------------------------------------------------------------------- */
.chatbot-header {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--dvx-card-border) !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: none !important;
  color: var(--dvx-ink) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.chatbot-header h2 { color: var(--dvx-ink) !important; letter-spacing: -0.01em; }
.chatbot-header .status { color: var(--dvx-muted) !important; }
.chatbot-header .bot-avatar {
  background:
    radial-gradient(120% 120% at 30% 22%, var(--dvx-halo) 0%, rgba(167,139,250,0) 45%),
    radial-gradient(120% 120% at 75% 80%, #22d3ee 0%, rgba(34,211,238,0) 48%),
    linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  box-shadow: 0 6px 18px rgba(90, 63, 240, 0.35) !important;
}
.chatbot-header .bot-avatar svg { color: #fff !important; }
.chatbot-header .action-btn {
  background: rgba(17, 19, 34, 0.05) !important;
  color: var(--dvx-ink) !important;
}
.chatbot-header .action-btn:hover { background: rgba(17, 19, 34, 0.10) !important; }

/* ---------------------------------------------------------------------------
 * 5. Messages  →  brand user bubble, crisp bot bubble
 * ------------------------------------------------------------------------- */
.messages-container { background: transparent !important; }
.message.user-message .message-bubble {
  background: linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(90, 63, 240, 0.28) !important;
}
.message.bot-message .message-bubble {
  background: #fff !important;
  color: var(--dvx-ink) !important;
  border: 1px solid var(--dvx-card-border) !important;
}
.message .message-time { color: var(--dvx-muted) !important; }
.welcome-message h3 { color: var(--dvx-ink) !important; }
.welcome-message p, .welcome-message { color: var(--dvx-muted) !important; }

/* ---------------------------------------------------------------------------
 * 6. Input row  →  pill input, brand focus ring, orb send button
 * ------------------------------------------------------------------------- */
.input-container {
  background: transparent !important;
  border-top: 1px solid var(--dvx-card-border) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.text-input-wrapper .text-input {
  background: rgba(17, 19, 34, 0.035) !important;
  border: 1px solid var(--dvx-card-border) !important;
  color: var(--dvx-ink) !important;
}
.text-input-wrapper .text-input:focus {
  border-color: var(--dvx-violet) !important;
  box-shadow: 0 0 0 3px rgba(90, 63, 240, 0.18) !important;
  background: #fff !important;
}
.text-input-wrapper .text-input::placeholder { color: var(--dvx-muted) !important; }
.text-input-wrapper .send-button {
  background: linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  box-shadow: 0 6px 16px rgba(90, 63, 240, 0.4) !important;
}

/* ---------------------------------------------------------------------------
 * 7. Voice visualiser  →  brand-tinted halo (keeps white core for contrast)
 * ------------------------------------------------------------------------- */
.speaking-animation .center-dot {
  box-shadow: 0 0 15px rgba(167,139,250,0.9), 0 0 30px rgba(90,63,240,0.5) !important;
}
.chatbot-voice-container .vad-buttons-container .mute-mic {
  background-color: rgba(17, 19, 34, 0.06) !important;
  color: var(--dvx-ink) !important;
}

/* ---------------------------------------------------------------------------
 * 8. Dark storefronts  →  deep glass card, light ink
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --dvx-ink: #eef1f8;
    --dvx-muted: #9aa3b8;
    --dvx-card: rgba(18, 20, 30, 0.92);
    --dvx-card-border: rgba(255, 255, 255, 0.10);
    --dvx-card-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  }
  .chatbot-mode-bubble .bubble-btn:not(:first-child):hover,
  .chatbot-header .action-btn { background: rgba(255, 255, 255, 0.08) !important; }
  .chatbot-header .action-btn:hover { background: rgba(255, 255, 255, 0.14) !important; }
  .message.bot-message .message-bubble {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dvx-ink) !important;
    border-color: var(--dvx-card-border) !important;
  }
  .text-input-wrapper .text-input {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dvx-ink) !important;
  }
  .text-input-wrapper .text-input:focus { background: rgba(255, 255, 255, 0.10) !important; }
}


/* ==============================================================================
 * ICÔNES BLANCHES SUR SURFACE CLAIRE — le défaut le plus visible du reskin.
 *
 * Le bundle a été dessiné pour une pilule SOMBRE : `.chatbot-mode-bubble` est en
 * `#222` et `.bubble-btn` en `color:#fff`. Notre reskin éclaircit ces surfaces —
 * et les icônes deviennent blanc sur blanc.
 *
 * 🚨 `color:` NE SUFFIT PAS. Sur les 11 icônes du bundle, NEUF codent le blanc en
 * dur dans le SVG (`fill="#fff"` ou `stroke="#fff"`) ; une seule utilise
 * `currentColor`. Hériter d'une couleur de texte n'a donc aucun effet sur elles.
 *
 * On cible les attributs eux-mêmes. Deux propriétés distinctes parce que les
 * icônes sont de deux natures : repeindre en `fill` une icône dessinée au trait
 * la remplirait d'un aplat noir. Et on ne touche QUE ce qui était explicitement
 * blanc — une icône déjà colorée garde sa couleur.
 * ============================================================================ */
.chatbot-mode-bubble .bubble-btn [fill="#fff"],
.chatbot-mode-bubble .bubble-btn [fill="#fff"] *,
.chatbot-header .action-btn [fill="#fff"],
.chatbot-header .action-btn [fill="#fff"] * {
  fill: var(--dvx-ink) !important;
}
.chatbot-mode-bubble .bubble-btn [stroke="#fff"],
.chatbot-mode-bubble .bubble-btn [stroke="#fff"] *,
.chatbot-header .action-btn [stroke="#fff"],
.chatbot-header .action-btn [stroke="#fff"] * {
  stroke: var(--dvx-ink) !important;
}

/* Le bouton du mode ACTIF garde son aplat violet : son icône doit rester blanche. */
.chatbot-mode-bubble .bubble-btn.active [fill="#fff"],
.chatbot-mode-bubble .bubble-btn.active [fill="#fff"] * { fill: #fff !important; }
.chatbot-mode-bubble .bubble-btn.active [stroke="#fff"],
.chatbot-mode-bubble .bubble-btn.active [stroke="#fff"] * { stroke: #fff !important; }

/* ------------------------------------------------------------------------------
 * L'ACCENT SUIT LE MODE ACTIF, PAS LE PREMIER BOUTON.
 *
 * La règle d'origine peignait `:first-child` en violet. Or le premier bouton est
 * simplement le premier de `available_modes` : passer en vocal laissait donc le
 * bouton CHAT allumé et le micro éteint — l'inverse de l'état réel. Et le bundle
 * n'a AUCUNE règle `.active` : sans ça, changer de mode ne produit aucun retour
 * visuel. C'est corrigé ici.
 * ---------------------------------------------------------------------------- */
.chatbot-mode-bubble .bubble-btn.active {
  background:
    radial-gradient(120% 120% at 30% 25%, var(--dvx-halo) 0%, rgba(167,139,250,0) 45%),
    radial-gradient(120% 120% at 75% 78%, #22d3ee 0%, rgba(34,211,238,0) 48%),
    linear-gradient(135deg, var(--dvx-violet), var(--dvx-violet-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(90, 63, 240, 0.4) !important;
}

@media (prefers-color-scheme: dark) {
  /* Sur carte sombre les icônes blanches d'origine sont correctes : on les laisse. */
  .chatbot-mode-bubble .bubble-btn [fill="#fff"],
  .chatbot-mode-bubble .bubble-btn [fill="#fff"] *,
  .chatbot-header .action-btn [fill="#fff"],
  .chatbot-header .action-btn [fill="#fff"] * { fill: #eef1f8 !important; }
  .chatbot-mode-bubble .bubble-btn [stroke="#fff"],
  .chatbot-mode-bubble .bubble-btn [stroke="#fff"] *,
  .chatbot-header .action-btn [stroke="#fff"],
  .chatbot-header .action-btn [stroke="#fff"] * { stroke: #eef1f8 !important; }
}


/* ------------------------------------------------------------------------------
 * Le repli `:first-child` ne doit valoir QUE tant qu'aucun mode n'est actif.
 * Sans cette garde, passer en vocal allumerait le micro SANS éteindre le chat :
 * deux boutons violets, et plus aucune indication du mode réellement en cours.
 * `:has()` permet de dire exactement cela — « s'il existe un bouton actif, alors
 * le premier, s'il ne l'est pas, redevient neutre ».
 * ---------------------------------------------------------------------------- */
.chatbot-mode-bubble:has(.bubble-btn.active) .bubble-btn:first-child:not(.active) {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--dvx-ink) !important;
}
.chatbot-mode-bubble:has(.bubble-btn.active) .bubble-btn:first-child:not(.active) [fill="#fff"],
.chatbot-mode-bubble:has(.bubble-btn.active) .bubble-btn:first-child:not(.active) [fill="#fff"] * {
  fill: var(--dvx-ink) !important;
}
.chatbot-mode-bubble:has(.bubble-btn.active) .bubble-btn:first-child:not(.active) [stroke="#fff"],
.chatbot-mode-bubble:has(.bubble-btn.active) .bubble-btn:first-child:not(.active) [stroke="#fff"] * {
  stroke: var(--dvx-ink) !important;
}


/* ==============================================================================
 * ICÔNES BLANCHES — correctif de PROFONDEUR (vérifié dans le navigateur).
 *
 * Le premier essai ciblait `svg[fill="#fff"]`. Faux : sur ces icônes le `<svg>`
 * n'a aucun attribut de couleur (son fill calculé est noir) et c'est un `<g
 * fill="#fff"> ` À L'INTÉRIEUR qui peint les tracés en blanc. Le micro sortait donc
 * blanc sur la pilule blanche — invisible — pendant que l'inspection du `<svg>`
 * seul laissait croire à du noir.
 *
 * On cible désormais n'importe quel descendant porteur de l'attribut, et ses
 * propres enfants qui en héritent.
 * ============================================================================ */
.chatbot-mode-bubble .bubble-btn [fill="#fff"],
.chatbot-mode-bubble .bubble-btn [fill="#fff"] *,
.chatbot-header .action-btn [fill="#fff"],
.chatbot-header .action-btn [fill="#fff"] * { fill: var(--dvx-ink) !important; }

.chatbot-mode-bubble .bubble-btn [stroke="#fff"],
.chatbot-mode-bubble .bubble-btn [stroke="#fff"] *,
.chatbot-header .action-btn [stroke="#fff"],
.chatbot-header .action-btn [stroke="#fff"] * { stroke: var(--dvx-ink) !important; }

/* Le mode ACTIF garde son aplat violet : son icône DOIT rester blanche. */
.chatbot-mode-bubble .bubble-btn.active [fill="#fff"],
.chatbot-mode-bubble .bubble-btn.active [fill="#fff"] * { fill: #fff !important; }
.chatbot-mode-bubble .bubble-btn.active [stroke="#fff"],
.chatbot-mode-bubble .bubble-btn.active [stroke="#fff"] * { stroke: #fff !important; }

/* Repli `:first-child` éteint par `:has()` → son icône redevient sombre elle aussi. */
.chatbot-mode-bubble:has(.bubble-btn.active) .bubble-btn:first-child:not(.active) [fill="#fff"],
.chatbot-mode-bubble:has(.bubble-btn.active) .bubble-btn:first-child:not(.active) [fill="#fff"] * {
  fill: var(--dvx-ink) !important;
}

@media (prefers-color-scheme: dark) {
  .chatbot-mode-bubble .bubble-btn:not(.active) [fill="#fff"],
  .chatbot-mode-bubble .bubble-btn:not(.active) [fill="#fff"] *,
  .chatbot-header .action-btn [fill="#fff"],
  .chatbot-header .action-btn [fill="#fff"] * { fill: #eef1f8 !important; }
}


/* ==============================================================================
 * ICÔNES MINUSCULES SUR SAFARI iOS — taille en ATTRIBUT, jamais en CSS.
 *
 * Dans la feuille compilée du widget, quatre emplacements donnent une taille CSS
 * à leur SVG (`.action-btn svg`, `.bot-avatar svg`, `.mode-toggle svg`,
 * `.send-button svg`). DEUX ne le font pas :
 *
 *     .bubble-btn svg            → `pointer-events: none` uniquement
 *     .chatbot-widget-button svg → couleur et z-index uniquement
 *
 * Ces deux-là ne tiennent leur taille que des attributs `width="20"` / `="28"`.
 * Or ce sont des éléments flex (`.bubble-btn` est en `display:flex`), et WebKit
 * calcule la base flex d'un remplacé à partir de sa taille intrinsèque puis le
 * laisse RÉTRÉCIR (`flex-shrink:1` par défaut) — là où Blink et Gecko honorent
 * les attributs. D'où des icônes correctes sur Chrome et riquiqui sur Safari iOS.
 * Et c'est bien ces deux emplacements-là, pas les autres : cela colle exactement.
 *
 * Correctif canonique : taille en CSS **et** interdiction de rétrécir.
 * ============================================================================ */
.chatbot-mode-bubble .bubble-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  min-width: 20px !important;
  min-height: 20px !important;
}
.chatbot-mode-bubble-restore svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}
.chatbot-widget-button svg {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 auto !important;
  min-width: 28px !important;
  min-height: 28px !important;
}
/* Le bouton lui-même ne doit pas se comprimer non plus dans la pilule. */
.chatbot-mode-bubble .bubble-btn { flex: 0 0 auto !important; }