/* ==========================================================================
   SiamBot — bulle de discussion du site public.

   Réutilise les jetons de tokens.css (couleurs, rayons, typographie) : le
   widget doit avoir l'air d'appartenir au site, pas d'un module tiers collé
   dessus. Aucune dépendance, aucun framework.

   Trois contraintes qui expliquent la plupart des choix ci-dessous :

   1. SUR MOBILE, LE PANNEAU OCCUPE TOUT L'ÉCRAN. Un panneau de 380 px posé
      dans un coin sur un écran de 360 px ne laisse rien voir ni du site ni de
      la conversation. En dessous de 600 px, il devient donc plein cadre.

   2. LE PANNEAU EST BORNÉ EN HAUTEUR PAR LA FENÊTRE (dvh, pas vh) : sur
      mobile, la barre d'adresse de Safari fait rétrécir la zone visible, et
      vh — qui l'ignore — fait passer le champ de saisie sous le pli, juste au
      moment où l'utilisateur veut écrire.

   3. L'ARABE S'AFFICHE DE DROITE À GAUCHE. Le JavaScript pose `dir="rtl"` sur
      la bulle concernée, et c'est la police Vazirmatn (déjà chargée par le
      layout) qui la rend.
   ========================================================================== */

.siambot {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  font-family: var(--font-ui, 'Montserrat', system-ui, sans-serif);
}

/* --- Bouton d'appel ------------------------------------------------------ */

.siambot-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 16px;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--green-deep, #046028);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(4, 96, 40, .28);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.siambot-launcher:hover,
.siambot-launcher:focus-visible {
  background: var(--ink-700, #1C2A21);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(4, 96, 40, .34);
}

.siambot-launcher-icon { display: inline-flex; }

/* Le panneau ouvert cache le bouton : sur mobile ils se superposeraient. */
.siambot[data-open="true"] .siambot-launcher { display: none; }

/* --- Panneau ------------------------------------------------------------ */

.siambot-panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  /* dvh et non vh : voir la contrainte 2 en tête de fichier. */
  max-height: min(620px, calc(100dvh - 40px));
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E6E3DA);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(11, 18, 14, .22);
}

.siambot-panel[hidden] { display: none; }

.siambot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--green-deep, #046028);
  color: #fff;
}

.siambot-title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
}

.siambot-subtitle {
  margin: 2px 0 0;
  font-size: .76rem;
  opacity: .82;
  line-height: 1.35;
}

.siambot-close {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.siambot-close:hover,
.siambot-close:focus-visible { background: rgba(255, 255, 255, .16); }

/* --- Fil de discussion -------------------------------------------------- */

.siambot-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain; /* le défilement ne « passe » pas à la page */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper, #FAFAF7);
}

.siambot-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.6;
  /* Une URL ou une référence de stand ne doit pas élargir la bulle. */
  overflow-wrap: anywhere;
}

.siambot-msg p { margin: 0 0 .5em; }
.siambot-msg p:last-child { margin-bottom: 0; }

.siambot-msg-bot {
  align-self: flex-start;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E6E3DA);
  color: var(--ink, #181A17);
  border-bottom-left-radius: 5px;
}

.siambot-msg-user {
  align-self: flex-end;
  background: var(--green-deep, #046028);
  color: #fff;
  border-bottom-right-radius: 5px;
}

.siambot-msg-error {
  align-self: flex-start;
  background: #FDF1EC;
  border: 1px solid #F3C9B9;
  color: #7A2A10;
  border-bottom-left-radius: 5px;
}

/* Les messages en arabe passent en RTL et changent de police : le JS pose
   dir="rtl" sur la bulle, le sélecteur d'attribut fait le reste. */
.siambot-msg[dir="rtl"] {
  font-family: var(--font-ar, 'Vazirmatn', sans-serif);
  text-align: right;
}

/* --- Markdown rendu dans la bulle ---------------------------------------
   Le widget interprète le gras, l'italique, le code en ligne et les listes
   (public/assets/js/siambot.js). Les marges restent serrées : une bulle de
   chat n'est pas une page de contenu. */

.siambot-msg strong { font-weight: 700; }
.siambot-msg em { font-style: italic; }

.siambot-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  padding: .1em .35em;
  border-radius: 4px;
  background: rgba(0, 0, 0, .06);
}

.siambot-msg ul,
.siambot-msg ol {
  margin: 0 0 .5em;
  /* Les puces restent DANS la bulle : en retrait extérieur, elles
     déborderaient du fond sur mobile, où la bulle occupe presque la largeur. */
  padding-inline-start: 1.25em;
}

.siambot-msg ul:last-child,
.siambot-msg ol:last-child { margin-bottom: 0; }

.siambot-msg li { margin: 0 0 .2em; }
.siambot-msg li:last-child { margin-bottom: 0; }

.siambot-msg-user code { background: rgba(255, 255, 255, .18); }

.siambot-msg a { color: inherit; text-decoration: underline; }
.siambot-msg-bot a { color: var(--orange-cta, #CC3A10); }

/* --- Attente ------------------------------------------------------------ */

.siambot-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.siambot-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft, #4B4F49);
  animation: siambot-bounce 1.1s infinite ease-in-out;
}

.siambot-typing span:nth-child(2) { animation-delay: .15s; }
.siambot-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes siambot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Respecter le réglage système : une animation en boucle peut déclencher un
   malaise chez les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  .siambot-typing span { animation: none; opacity: .7; }
  .siambot-launcher { transition: none; }
}

/* --- Suggestions -------------------------------------------------------- */

.siambot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.siambot-chip {
  padding: 7px 13px;
  border: 1px solid var(--line-strong, #D2CCBB);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface, #fff);
  color: var(--ink-soft, #4B4F49);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  text-align: left;
}

.siambot-chip:hover,
.siambot-chip:focus-visible {
  border-color: var(--green-deep, #046028);
  color: var(--green-deep, #046028);
}

/* --- Saisie ------------------------------------------------------------- */

.siambot-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--line, #E6E3DA);
  background: var(--surface, #fff);
}

.siambot-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line-strong, #D2CCBB);
  border-radius: var(--radius-pill, 999px);
  font: inherit;
  /* 16px minimum : en dessous, iOS zoome sur le champ à la mise au point et
     décale toute la mise en page. */
  font-size: 16px;
  color: var(--ink, #181A17);
  background: var(--paper, #FAFAF7);
}

.siambot-form input:focus-visible {
  outline: 2px solid var(--green-deep, #046028);
  outline-offset: 1px;
}

.siambot-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--orange-cta, #CC3A10);
  color: #fff;
  cursor: pointer;
}

.siambot-send:hover,
.siambot-send:focus-visible { background: var(--orange, #E84818); }

.siambot-send[disabled] { opacity: .45; cursor: default; }

.siambot-note {
  margin: 0;
  padding: 0 14px 12px;
  background: var(--surface, #fff);
  color: var(--ink-soft, #4B4F49);
  font-size: .72rem;
  line-height: 1.5;
}

.siambot-note a { color: var(--orange-cta, #CC3A10); }

/* Libellé réservé aux lecteurs d'écran. */
.siambot-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Mobile : plein cadre ----------------------------------------------- */

@media (max-width: 600px) {
  .siambot {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .siambot-launcher { width: 100%; justify-content: center; }

  .siambot[data-open="true"] {
    inset: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .siambot-panel {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .siambot-msg { max-width: 92%; }
}