/* Assistant de la page de vente — bulle flottante et panneau de discussion.
   Feuille autonome : elle est chargée par la page de vente construite par
   Vite, qui ne connaît pas ses classes. Toutes les couleurs reprennent les
   variables de vente/src/styles.css, avec une valeur de repli — la feuille
   doit tenir debout même servie sur une page qui ne les définit pas. */

.toron-assistant {
  --ta-encre:   var(--encre, #0f1620);
  --ta-ardoise: var(--ardoise, #1b2430);
  --ta-fonce:   var(--ardoise-2, #26323f);
  --ta-verre:   var(--verre, #f2f5f7);
  --ta-gris:    var(--gris, #7d8fa1);
  --ta-bleu:    var(--fibre-1, #1f6feb);
  --ta-orange:  var(--fibre-2, #e8630a);
  --ta-trait:   rgba(255, 255, 255, .12);
  --ta-ui: var(--ui, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  font-family: var(--ta-ui);
  /* Le conteneur ne doit pas manger les clics de la page autour du panneau. */
  pointer-events: none;
}
.toron-assistant > * { pointer-events: auto; }

/* --------------------------------------------------------------- La bulle */
.toron-bulle {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;
  padding: 0 18px 0 15px; height: 54px;
  border: 0; border-radius: 27px;
  background: var(--ta-bleu); color: #fff;
  font: 600 15px/1 var(--ta-ui); cursor: pointer;
  box-shadow: 0 10px 30px rgba(31, 111, 235, .35), 0 2px 8px rgba(0, 0, 0, .3);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.toron-bulle:hover { transform: translateY(-2px); background: #2b7bf5; }
.toron-bulle:active { transform: translateY(0); }
.toron-bulle svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* Pastille orange : elle dit qu'il y a quelqu'un, sans clignoter. */
.toron-bulle::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ta-orange); flex: 0 0 auto;
}
.toron-assistant[data-ouvert] .toron-bulle { display: none; }

/* ------------------------------------------------------------- Le panneau */
.toron-panneau {
  width: min(400px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--ta-ardoise); color: var(--ta-verre);
  border: 1px solid var(--ta-trait); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  overflow: hidden;
  transform-origin: bottom right;
  animation: toron-entree .22s cubic-bezier(.2, .9, .3, 1) both;
}
.toron-panneau[hidden] { display: none; }

@keyframes toron-entree {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.toron-tete {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 18px;
  background: var(--ta-encre);
  border-bottom: 1px solid var(--ta-trait);
}
.toron-tete h2 { margin: 0; font: 600 16px/1.2 var(--ta-ui); letter-spacing: -.01em; }
.toron-tete p { margin: 3px 0 0; font-size: 12px; color: var(--ta-gris); }
.toron-tete .toron-titres { flex: 1; min-width: 0; }
.toron-fermer {
  flex: 0 0 auto; width: 34px; height: 34px;
  border: 1px solid var(--ta-trait); border-radius: 10px;
  background: transparent; color: var(--ta-verre);
  font: 400 18px/1 var(--ta-ui); cursor: pointer;
  transition: background .15s ease;
}
.toron-fermer:hover { background: var(--ta-fonce); }

/* ----------------------------------------------------------------- Le fil */
.toron-fil {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}
.toron-msg {
  max-width: 88%; padding: 11px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.55; word-wrap: break-word;
  animation: toron-message .2s ease both;
}
@keyframes toron-message { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.toron-msg.moi {
  align-self: flex-end; background: var(--ta-bleu); color: #fff;
  border-bottom-right-radius: 5px;
}
.toron-msg.lui {
  align-self: flex-start; background: var(--ta-fonce);
  border-bottom-left-radius: 5px;
}
.toron-msg.lui.doute { border-left: 3px solid var(--ta-orange); }
.toron-msg b { font-weight: 600; }
.toron-msg ul { margin: 8px 0 0; padding-left: 18px; }
.toron-msg li { margin: 3px 0; }
.toron-msg a { color: #7fb2ff; text-decoration: underline; }
.toron-msg.moi a { color: #fff; }

/* Les trois points pendant l'appel : honnêtes, ils durent ce que dure l'appel. */
.toron-attente { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.toron-attente i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ta-gris);
  animation: toron-point 1s infinite ease-in-out;
}
.toron-attente i:nth-child(2) { animation-delay: .15s; }
.toron-attente i:nth-child(3) { animation-delay: .3s; }
@keyframes toron-point { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* --------------------------------------------------- Questions et liens */
.toron-choix { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 100%; }
.toron-choix-titre {
  width: 100%; margin: 2px 0 0; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ta-gris);
}
.toron-puce {
  padding: 8px 13px; border: 1px solid var(--ta-trait); border-radius: 20px;
  background: transparent; color: var(--ta-verre);
  font: 500 13.5px/1.3 var(--ta-ui); text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.toron-puce:hover { background: var(--ta-fonce); border-color: var(--ta-bleu); transform: translateY(-1px); }
.toron-lien {
  display: inline-block; padding: 8px 13px; border-radius: 20px;
  background: rgba(31, 111, 235, .16); border: 1px solid rgba(31, 111, 235, .5);
  color: var(--ta-verre); font: 600 13.5px/1.3 var(--ta-ui); text-decoration: none;
}
.toron-lien:hover { background: rgba(31, 111, 235, .3); }

/* -------------------------------------------------------------- La saisie */
.toron-saisie {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--ta-trait); background: var(--ta-encre);
}
.toron-saisie input {
  flex: 1; min-width: 0; padding: 12px 14px;
  border: 1px solid var(--ta-trait); border-radius: 12px;
  background: var(--ta-ardoise); color: var(--ta-verre);
  font: 400 14.5px/1.2 var(--ta-ui);
}
.toron-saisie input::placeholder { color: var(--ta-gris); }
.toron-saisie input:focus { outline: 2px solid var(--ta-bleu); outline-offset: 1px; }
.toron-envoyer {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--ta-bleu); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.toron-envoyer:hover { background: #2b7bf5; }
.toron-envoyer:disabled { opacity: .5; cursor: default; }
.toron-envoyer svg { width: 19px; height: 19px; }

.toron-pied {
  padding: 0 14px 11px; background: var(--ta-encre);
  font-size: 11px; line-height: 1.45; color: var(--ta-gris);
}
.toron-pied a { color: var(--ta-gris); }

.toron-assistant :focus-visible { outline: 2px solid var(--ta-bleu); outline-offset: 2px; border-radius: 6px; }

/* Le lecteur d'écran doit entendre le libellé, l'œil ne doit pas le voir. */
.toron-invisible {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- Téléphone */
@media (max-width: 520px) {
  .toron-assistant { right: 12px; bottom: 12px; left: 12px; }
  .toron-panneau {
    width: 100%;
    height: min(76vh, calc(100dvh - 90px));
  }
  .toron-bulle { padding: 0 16px 0 14px; height: 50px; font-size: 14px; }
}

/* Quelqu'un qui a demandé moins d'animation en a une vraie raison. */
@media (prefers-reduced-motion: reduce) {
  .toron-panneau, .toron-msg { animation: none; }
  .toron-bulle, .toron-puce { transition: none; }
  .toron-bulle:hover, .toron-puce:hover { transform: none; }
  .toron-attente i { animation: none; opacity: .6; }
}