/* ============================================================
   SAMA — fenêtre de discussion. Palette du site (css/styles.css).
   Chargée sur toutes les pages, mais rien ne s'affiche tant que
   js/sama.js n'a pas construit le lanceur : c'est lui qui décide,
   après avoir vérifié que le service répond.
   ============================================================ */

.sama-lanceur {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border: none; border-radius: 999px;
  background: var(--accent); color: #06251e;
  font-family: inherit; font-size: 0.97rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 10px 30px rgba(0, 212, 170, 0.28);
  transition: transform .18s ease, background .18s ease;
}
.sama-lanceur:hover { background: #00e8bb; transform: translateY(-2px); }
.sama-lanceur:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sama-lanceur-icone { font-size: 1.15rem; }

/* Le lanceur s'efface quand la fenêtre est ouverte : sur un téléphone, elle
   occupe l'écran et le bouton flotterait par-dessus son propre contenu. */
.sama-ouvert .sama-lanceur { display: none; }

.sama-panneau {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column;
  /* La fenêtre est un <section>, et `styles.css` donne 88 px de remplissage
     vertical à toutes les sections du site : sans cette remise à zéro, le
     contenu se retrouve centré dans le panneau, avec 88 px de vide en haut et
     en bas. Un composant posé dans une page hôte hérite de ses styles. */
  padding: 0; margin: 0;
  width: 380px; max-width: calc(100vw - 40px);
  height: 560px; max-height: calc(100vh - 40px);
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* `display:flex` ci-dessus l'emporte sur la règle `[hidden] { display:none }`
   du navigateur : sans cette ligne, la fenêtre s'ouvre d'elle-même au
   chargement de la page, avant que le visiteur n'ait rien demandé. */
.sama-panneau[hidden] { display: none; }

.sama-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.sama-entete strong { font-size: 1rem; }
.sama-sous { display: block; font-size: 0.76rem; color: var(--text-dim); }
.sama-fermer {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 6px 8px;
  border-radius: 8px;
}
.sama-fermer:hover { color: var(--text); background: rgba(148, 163, 184, .12); }
.sama-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sama-fil {
  /* `min-height:0` : sans lui, un enfant de colonne flex refuse de descendre
     sous la hauteur de son contenu, et le fil pousse la zone de saisie hors
     de la fenêtre dès que la conversation s'allonge. */
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.sama-bulle {
  max-width: 88%; padding: 10px 13px; border-radius: 12px;
  font-size: 0.93rem; line-height: 1.55;
  /* La mise en forme du texte du modèle vient d'ici, pas d'une injection
     HTML : les retours à la ligne sont conservés tels qu'il les écrit. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.sama-assistant {
  align-self: flex-start; background: var(--bg-soft);
  border: 1px solid var(--border);
}
.sama-visiteur {
  align-self: flex-end; background: var(--accent-soft);
  border: 1px solid rgba(0, 212, 170, 0.28);
}

.sama-note {
  align-self: center; font-size: 0.8rem; color: var(--text-dim);
  text-align: center; padding: 2px 8px;
}
.sama-note-erreur {
  align-self: stretch; color: #fca5a5; text-align: left;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px; padding: 9px 12px; line-height: 1.5;
}
.sama-note-attente::after {
  content: ''; display: inline-block; width: 4px; height: 4px;
  margin-left: 5px; border-radius: 50%; background: var(--accent);
  animation: sama-battement 1.1s ease-in-out infinite;
}
@keyframes sama-battement { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.sama-saisie {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 11px 12px; border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
/* L'étiquette existe pour les lecteurs d'écran : un champ dont le seul repère
   est un texte d'exemple n'est pas nommé une fois qu'on y écrit. */
.sama-etiquette {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sama-saisie textarea {
  flex: 1; resize: none; max-height: 120px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-family: inherit; font-size: 0.93rem;
  line-height: 1.5;
}
.sama-saisie textarea:focus {
  outline: none; border-color: var(--accent);
}
.sama-saisie textarea:disabled { opacity: .55; cursor: not-allowed; }
.sama-saisie button {
  flex: none; width: 40px; height: 40px; border: none; border-radius: 10px;
  background: var(--accent); color: #06251e;
  font-size: 1.15rem; font-weight: 700; cursor: pointer;
}
.sama-saisie button:hover:not(:disabled) { background: #00e8bb; }
.sama-saisie button:disabled { opacity: .45; cursor: not-allowed; }
.sama-saisie button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.sama-mention {
  padding: 0 14px 11px; margin: 0;
  font-size: 0.73rem; line-height: 1.45; color: var(--text-dim);
  background: var(--bg-soft);
}

/* Sur téléphone, la fenêtre prend l'écran : une bulle de 380 px y serait
   illisible, et le clavier virtuel mange déjà la moitié de la hauteur. */
@media (max-width: 560px) {
  .sama-panneau {
    right: 0; bottom: 0; width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh; border-radius: 0; border: none;
  }
  .sama-lanceur { right: 14px; bottom: 14px; padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sama-lanceur, .sama-note-attente::after { transition: none; animation: none; }
}