/* ══════════════════════════════════════════════════════════════════
   widget.css — apparence de l'assistant.

   Reprend le système du site : Figtree, bleu #1E39D2, gris #F5F5F5,
   arrondis discrets. Rien d'inventé ici, pour que la bulle n'ait pas
   l'air d'un service tiers posé par-dessus.
   ══════════════════════════════════════════════════════════════════ */

.cb {
  --cb-bleu: #1E39D2;
  --cb-gris: #F5F5F5;
  position: fixed;
  right: 22px;
  /* Un peu plus haut que le bord : colle en bas, la bulle passait pour
     un element de la page plutot qu un bouton flottant. */
  bottom: 38px;
  z-index: 3500;
  font-family: 'Figtree', -apple-system, sans-serif;
}

/* Une couche plein ecran est ouverte — menu burger, fenetre de connexion.
   La bulle flottante passerait par-dessus et se melerait a son contenu :
   elle s efface, et revient a la fermeture. Le panneau ouvert, lui, reste
   affiche : c est alors lui la couche du dessus. */
html[data-mnr-couche] .cb:not(.cb--ouvert) { display: none; }

.cb-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Bulle flottante ───────────────────────────────────────────── */
.cb-bulle-flottante {
  /* Pas de fond : c'est la bulle dessinee qui fait la forme. Un aplat
     rond derriere un contour de bulle donnait deux formes concentriques
     qui disaient deux fois la meme chose. */
  width: 58px; height: 58px; padding: 0;
  display: block; background: none; border: 0; cursor: pointer;
  color: var(--cb-bleu);
  /* Aucune ombre : la bulle est un aplat plein sur fond clair, elle se
     detache d elle-meme. L ombre n ajoutait qu un halo. */
  transition: transform .18s;
}
.cb-bulle-flottante svg { width: 100%; height: 100%; display: block; }
.cb-bulle-flottante:hover {
  transform: translateY(-2px) scale(1.03);
}
.cb-bulle-flottante:active { transform: translateY(0) scale(.98); }
.cb-bulle-flottante:focus-visible { outline: 3px solid #0f0f0f; outline-offset: 4px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .cb-bulle-flottante { transition: none; } }

/* ── Le visage de la bulle ─────────────────────────────────────────
   Au repos : un sourire seul, centre. Pendant un appel : le sourire
   descend pour laisser la place, deux yeux apparaissent et clignent.

   Le clignement anime la HAUTEUR du batonnet, pas une mise a l echelle :
   `transform: scaleY` ecraserait aussi l arrondi et la largeur, et l oeil
   ferme aurait l air d une fente aplatie. En reduisant la hauteur jusqu a
   la largeur, l arrondi de 1.3 fait exactement un cercle. */
.cb-oeil {
  opacity: 0;
  transition: opacity .18s;
}
.cb-sourire {
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}

.cb--appel .cb-oeil { opacity: 1; }
.cb--appel .cb-oeil:nth-of-type(1) { animation: cbCligne 3.2s .6s infinite; }
.cb--appel .cb-oeil:nth-of-type(2) { animation: cbCligne 3.2s .6s infinite; }
.cb--appel .cb-sourire { transform: translateY(2.6px); }

/* Le meme visage au survol : la bulle repond au geste avant meme le clic.
   `hover: hover` exclut le tactile, ou le survol reste colle apres un
   appui — le visage serait fige les yeux ouverts jusqu au prochain
   toucher ailleurs. */
@media (hover: hover) {
  .cb-bulle-flottante:hover .cb-oeil { opacity: 1; }
  .cb-bulle-flottante:hover .cb-oeil:nth-of-type(1),
  .cb-bulle-flottante:hover .cb-oeil:nth-of-type(2) {
    /* Delai plus court qu a l appel : au survol on regarde deja la bulle,
       attendre six dixiemes de seconde donnerait un temps mort. */
    animation: cbCligne 2.6s .15s infinite;
  }
  .cb-bulle-flottante:hover .cb-sourire { transform: translateY(2.6px); }
}

@keyframes cbCligne {
  /* Le `y` de l etat ferme n est pas arbitraire : il garde le CENTRE de
     l oeil immobile (10.9). Sans cela, l oeil semblerait glisser vers le
     haut a chaque clignement au lieu de se fermer sur place. */
  0%, 88%, 100% { height: 5px;   y: 8.4px; }
  93%           { height: 2.6px; y: 9.6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb--appel .cb-oeil { animation: none; }
  .cb-sourire { transition: none; }
}

/* ── Bulle d'appel ─────────────────────────────────────────────────
   Posee a gauche du bouton, jamais dessus : elle doit attirer l'oeil
   sans masquer ce sur quoi il faut cliquer. */
.cb-appel {
  position: absolute; right: 70px; bottom: 6px;
  display: flex; align-items: center; gap: 2px;
  /* `max-content` est indispensable : le conteneur ne fait que la
     largeur du bouton, 58 px, et sans cela la phrase s y repliait sur
     quatre lignes. */
  width: max-content;
  max-width: min(260px, calc(100vw - 110px));
  background: #fff; border: 1px solid #e6e6e6;
  border-radius: 14px 14px 4px 14px;
  padding: 4px 4px 4px 12px;
  box-shadow: 0 6px 18px rgba(15, 15, 15, .10);
  animation: cbAppel .32s cubic-bezier(.2, .8, .3, 1);
}
.cb-appel[hidden] { display: none; }
@keyframes cbAppel {
  from { opacity: 0; transform: translateX(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cb-appel { animation: none; } }

.cb-appel__t {
  flex: 1; min-width: 0; text-align: left;
  background: none; border: 0; padding: 8px 0;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: #0f0f0f; cursor: pointer;
}
.cb-appel__x {
  flex-shrink: 0; width: 26px; height: 26px; align-self: flex-start;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: #b0b0b0; cursor: pointer; transition: background .15s, color .15s;
}
.cb-appel__x svg { width: 11px; height: 11px; }
.cb-appel__x:hover { background: rgba(0, 0, 0, .06); color: #0f0f0f; }

/* ── Panneau ───────────────────────────────────────────────────── */
.cb-panneau {
  position: absolute; right: 0; bottom: 70px;
  width: 372px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100dvh - 120px);
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e6e6e6; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
  overflow: hidden;
  /* Fermé, le panneau reste dans le document mais hors d'atteinte —
     `visibility` le retire aussi du parcours au clavier, ce que
     `opacity` seul ne fait pas. */
  opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(.985);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.cb--ouvert {
  /* Au-dessus du bandeau cookies (9999) : plein ecran sur telephone, il
     recouvrait la zone de saisie. Le bandeau reapparait a la fermeture,
     il n'est pas escamote. */
  z-index: 10000;
}
.cb--ouvert .cb-panneau {
  opacity: 1; visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cb-panneau { transition: opacity .01s, visibility .01s; transform: none; }
}

/* ── En-tête ───────────────────────────────────────────────────── */
.cb-tete {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 14px 18px;
  border-bottom: 1px solid #f0f0f0;
}
.cb-tete > div { flex: 1; min-width: 0; }
.cb-tete h2 span { color: #b8b8b8; font-weight: 600; }
.cb-tete h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #0f0f0f; }
.cb-tete p { margin: 2px 0 0; font-size: 11.5px; color: #8a8a8a; }
.cb-icone {
  flex-shrink: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: #8a8a8a; cursor: pointer; transition: background .15s, color .15s;
}
.cb-icone svg { width: 16px; height: 16px; }
.cb-icone:hover { background: rgba(0, 0, 0, .06); color: #0f0f0f; }

/* ── Fil ───────────────────────────────────────────────────────── */
.cb-fil {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px; background: #fafafa;
  display: flex; flex-direction: column; align-items: flex-start;
}
.cb-bulle {
  flex: 0 0 auto;
  max-width: 86%; margin-bottom: 9px;
  padding: 10px 13px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55;
}
.cb-bulle--bot { background: #fff; border: 1px solid #e6e6e6; color: #0f0f0f; border-bottom-left-radius: 3px; }
.cb-bulle--client { background: var(--cb-bleu); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.cb-bulle__t a { color: inherit; font-weight: 700; }
.cb-bulle--bot .cb-bulle__t a { color: var(--cb-bleu); }
.cb-bulle__h { display: block; margin-top: 5px; font-size: 10.5px; opacity: .55; }

/* ── Indicateur d'écriture ─────────────────────────────────────── */
.cb-ecrit {
  display: flex; gap: 4px; align-items: center;
  margin: 0; padding: 0 18px 10px; background: #fafafa;
}
.cb-ecrit[hidden] { display: none; }
.cb-ecrit span {
  width: 6px; height: 6px; border-radius: 50%; background: #b0b0b0;
  animation: cbPoint 1.1s infinite ease-in-out;
}
.cb-ecrit span:nth-child(2) { animation-delay: .16s; }
.cb-ecrit span:nth-child(3) { animation-delay: .32s; }
@keyframes cbPoint {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .cb-ecrit span { animation: none; } }

/* ── Suggestions ───────────────────────────────────────────────── */
.cb-sugg-zone {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 10px; background: #fafafa;
}
.cb-sugg-zone:empty { display: none; }
.cb-sugg {
  background: #fff; border: 1px solid #d8dcf5; border-radius: 100px;
  padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--cb-bleu); cursor: pointer; transition: background .15s;
}
.cb-sugg:hover { background: #eef1fd; }

/* ── Saisie ────────────────────────────────────────────────────── */
.cb-saisie {
  display: flex; gap: 8px; align-items: center;
  padding: 11px 12px; border-top: 1px solid #f0f0f0;
}
.cb-saisie input {
  flex: 1; min-width: 0; padding: 11px 13px;
  font: inherit; font-size: 14px;
  border: 1.5px solid #e0e0e0; border-radius: 9px; outline: none;
  transition: border-color .15s;
}
.cb-saisie input:focus { border-color: var(--cb-bleu); }
.cb-envoyer {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cb-bleu); color: #fff;
  border: 0; border-radius: 9px; cursor: pointer;
}
.cb-envoyer svg { width: 17px; height: 17px; }
.cb-envoyer:hover { background: #1730AE; }

/* ── Pied ──────────────────────────────────────────────────────── */
.cb-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 14px 12px;
}
.cb-mention {
  margin: 0; font-size: 11px; color: #a0a0a0; white-space: nowrap;
}
.cb-lien {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600;
  color: #8a8a8a; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.cb-lien:hover { color: #0f0f0f; }

/* ── Téléphone : plein écran ───────────────────────────────────── */
@media (max-width: 560px) {
  /* La bulle respecte la barre d'accueil des iPhone : posee a 16 px du
     bord, elle tombait dessus. */
  .cb {
    right: 16px;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }

  .cb-panneau {
    position: fixed; inset: 0;
    width: 100%; max-width: none;
    /* `dvh` et non `vh` : la barre d'adresse se retracte, et `vh` fige la
       hauteur du plein ecran — la saisie passait sous le bord bas. */
    height: 100dvh; max-height: none;
    border: 0; border-radius: 0;
  }
  .cb--ouvert .cb-bulle-flottante { opacity: 0; pointer-events: none; }

  .cb-tete { padding: calc(12px + env(safe-area-inset-top, 0px)) 10px 12px 16px; }
  .cb-fil { padding: 14px 16px; }
  .cb-bulle { max-width: 90%; font-size: 15px; }
  .cb-sugg-zone { padding: 0 14px 10px; }
  .cb-sugg { font-size: 13.5px; padding: 9px 14px; }

  .cb-saisie { padding: 10px 12px; }
  .cb-envoyer { width: 46px; height: 46px; }
  .cb-pied { padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cb-mention { font-size: 10.5px; }

  .cb-appel {
    right: 0; bottom: 70px;
    max-width: calc(100vw - 32px);
    border-radius: 14px 14px 14px 4px;
  }

  /* Cible confortable au doigt : 30 px de cote, la croix se rate une fois
     sur trois. */
  .cb-icone { width: 42px; height: 42px; }
  .cb-icone svg { width: 19px; height: 19px; }
  /* Le lien du pied est un texte de 15 px de haut : on lui donne de la
     hauteur au doigt sans changer son apparence. */
  .cb-lien { padding: 10px 2px; }
}

/* Le champ ne descend jamais sous 16 px sur tactile : en dessous, iOS
   agrandit la page tout entière a la mise au point, et le visiteur se
   retrouve zoome sans l'avoir demande — avec aucun moyen evident de
   revenir en arriere. */
@media (pointer: coarse), (max-width: 768px) {
  .cb-saisie input { font-size: 16px; }
}