/* ============================================================
   MUSOCI — Chatbot v3 : composants riches + anti-débordement
   Chargé APRÈS style.css et enhancements.css → ce fichier peut
   surcharger les règles de base du chatbot (.chat-msg, etc.).
   Palette : --navy #0C3B66 / --orange #F2921D / --blue #378ADD
             --grey #F1EFE8 / --border #E7E3D8
   ============================================================ */

/* ------------------------------------------------------------
   1. ANTI-DÉBORDEMENT (priorité absolue)
   Aucun contenu (URL longue, tableau, liste, question liée)
   ne doit sortir de sa bulle : tout casse ou scrolle proprement.
   ------------------------------------------------------------ */

.chat-msg {
  overflow-wrap: break-word;   /* les mots trop longs se coupent */
  word-break: break-word;
  min-width: 0;                /* autorise le rétrécissement en flex */
  box-sizing: border-box;
}

/* Les URL longues se cassent n'importe où plutôt que de déborder */
.chat-msg a { overflow-wrap: anywhere; }

/* Listes compactes et bien contenues dans la bulle */
.chat-msg ul { margin: 6px 0; padding-left: 18px; }
.chat-msg li { margin: 3px 0; }

/* Paragraphes aérés sans marge parasite en fin de bulle */
.chat-msg p { margin: 0 0 8px; }
.chat-msg p:last-child { margin-bottom: 0; }

/* Les réponses riches du bot ont besoin de place (85 % → 94 %) */
.chat-msg--bot { max-width: 94%; }

/* Messages contenant un tableau : pleine largeur (classe posée par le JS) */
.chat-msg--wide {
  max-width: 100%;
  width: 100%;
}

/* Conteneur défilant posé par le JS autour des tableaux :
   le tableau scrolle horizontalement AU LIEU de déborder */
.chat-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 8px 0;
  -webkit-overflow-scrolling: touch; /* inertie douce sur iOS */
}
/* Scrollbar horizontale fine (WebKit) */
.chat-scroll::-webkit-scrollbar { height: 6px; }
.chat-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 100px;
}
.chat-scroll::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ------------------------------------------------------------
   2. Tableaux compacts (.chat-table) — scrollent dans .chat-scroll
   ------------------------------------------------------------ */

.chat-table {
  width: 100%;
  min-width: 240px;          /* garde le tableau lisible : au-delà, il scrolle */
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.45;
}
.chat-table th {
  background: var(--navy);
  color: var(--white);
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
}
/* Coins hauts arrondis sur l'en-tête */
.chat-table th:first-child { border-top-left-radius: 8px; }
.chat-table th:last-child { border-top-right-radius: 8px; }
.chat-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--grey);
  vertical-align: top;
}
/* Première colonne (libellés) mise en valeur */
.chat-table td:first-child { font-weight: 600; }
.chat-table tbody tr { transition: background 0.2s ease; }
.chat-table tbody tr:hover { background: #FAF9F5; }

/* ------------------------------------------------------------
   3. Questions liées (.chat-related) — liste épurée, sans boîtes
   Les items peuvent être des <button> : styles natifs neutralisés.
   Le texte long passe à la ligne au lieu de déborder.
   ------------------------------------------------------------ */

.chat-related {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.chat-related-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.chat-related-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--blue);
  padding: 5px 0;
  cursor: pointer;
  line-height: 1.45;
  /* Neutralisation des styles natifs de <button> */
  background: none;
  border: 0;
  text-align: left;
  width: 100%;
  white-space: normal;       /* un bouton ne wrappe pas par défaut */
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color 0.2s ease;
}
/* Petite flèche décorative — dans le flux flex, ne déborde jamais */
.chat-related-item::before {
  content: "\2192"; /* → */
  color: var(--orange);
  flex-shrink: 0;
  font-size: 12px;
  line-height: inherit;
}
/* Hover : simple changement de couleur, AUCUNE translation */
.chat-related-item:hover,
.chat-related-item:focus-visible {
  color: var(--navy);
}

/* ------------------------------------------------------------
   4. Autocomplétion (.chat-suggest) — dropdown ancré à l'input
   ------------------------------------------------------------ */

.chatbot-input { position: relative; }

.chat-suggest {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(12, 59, 102, 0.16);
  max-height: min(190px, 38vh);
  overflow-y: auto;
  z-index: 10;
}
/* IMPORTANT : les suggestions sont des <button> situés DANS le formulaire de
   saisie. Sans ce sélecteur plus spécifique (2 classes), elles héritaient du
   style du bouton d'envoi défini dans style.css (`.chatbot-input button` :
   carré 44x44, fond orange, texte blanc) — le texte devenait invisible et la
   ligne se réduisait à un carré. On neutralise donc ces styles explicitement. */
.chatbot-input .chat-suggest-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 10px 14px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  place-items: initial;
  cursor: pointer;
  white-space: normal;        /* les suggestions longues passent à la ligne */
  overflow-wrap: break-word;
  word-break: break-word;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
/* Fin séparateur entre deux suggestions */
.chatbot-input .chat-suggest-item + .chat-suggest-item {
  border-top: 1px solid var(--grey);
}
/* Loupe éventuellement injectée par le JS */
.chatbot-input .chat-suggest-item svg {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 3px;
  color: var(--blue);
}
/* Survol / navigation clavier : fond grège + liseré gauche orange
   en box-shadow inset pour ne pas décaler le texte */
.chatbot-input .chat-suggest-item:hover,
.chatbot-input .chat-suggest-item.is-active {
  background: var(--grey);
  box-shadow: inset 3px 0 0 var(--orange);
  color: var(--navy);
}

/* ------------------------------------------------------------
   5. Fluidité générale
   ------------------------------------------------------------ */

.chatbot-messages {
  scroll-behavior: smooth;      /* défilement doux vers le bas */
  overscroll-behavior: contain; /* le scroll ne « fuit » pas vers la page */
}
/* L'apparition des messages (chatIn) est gérée par style.css. */

/* Les chips nombreuses défilent au lieu de pousser l'input hors écran */
.chatbot-chips {
  max-height: 92px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chatbot-chips::-webkit-scrollbar { width: 6px; }
.chatbot-chips::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 100px;
}

/* ------------------------------------------------------------
   6. Retour utilisateur (.chat-feedback)
   ------------------------------------------------------------ */

.chat-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.chat-feedback:hover { opacity: 1; }

.chat-fb-btn {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.chat-fb-btn svg {
  width: 12px;
  height: 12px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.chat-fb-btn:hover { border-color: var(--blue); }
.chat-fb-btn:hover svg { color: var(--blue); }
/* Vote enregistré */
.chat-fb-btn.is-voted {
  background: var(--navy);
  border-color: var(--navy);
}
.chat-fb-btn.is-voted svg { color: var(--white); }
/* Boutons désactivés après le vote */
.chat-fb-btn[disabled] {
  cursor: default;
  opacity: 0.5;
}
/* Petit merci après le vote */
.chat-fb-thanks {
  font-size: 11px;
  color: var(--muted);
}

/* ------------------------------------------------------------
   7. Attente d'un agent (.chat-wait)
   ------------------------------------------------------------ */

.chat-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  align-self: flex-start;
  max-width: 94%;
}
/* Trois points pulsés, dans l'esprit de .chat-typing (sans le redéfinir) */
.chat-wait span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.4;
  flex: none;
  animation: chatWaitPulse 1.2s infinite;
}
.chat-wait span:nth-child(2) { animation-delay: 0.2s; }
.chat-wait span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatWaitPulse {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ------------------------------------------------------------
   8. Carte conseiller (.chat-handoff)
   ------------------------------------------------------------ */

.chat-handoff {
  background: var(--grey);
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  box-sizing: border-box;
}
.chat-hbtn {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;         /* numéros / emails longs : retour à la ligne */
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--navy);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;  /* un email ne déborde jamais du bouton */
  overflow-wrap: anywhere;
  min-width: 0;
  transition: background 0.2s ease;
}
.chat-hbtn:hover { background: var(--orange); }
.chat-hbtn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   9. Horodatage (.chat-time)
   ------------------------------------------------------------ */

.chat-time {
  display: block;
  font-size: 10.5px;
  opacity: 0.5;
  margin-top: 6px;
}
.chat-msg--user .chat-time { text-align: right; }

/* ------------------------------------------------------------
   10. Peaufinage global
   ------------------------------------------------------------ */

/* Liens plus lisibles dans les réponses du bot */
.chat-msg--bot a { font-weight: 600; }

/* Scrollbar fine (WebKit) dans la liste des messages et le dropdown */
.chatbot-messages::-webkit-scrollbar,
.chat-suggest::-webkit-scrollbar {
  width: 6px;
}
.chatbot-messages::-webkit-scrollbar-thumb,
.chat-suggest::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 100px;
}
.chatbot-messages::-webkit-scrollbar-thumb:hover,
.chat-suggest::-webkit-scrollbar-thumb:hover {
  background: var(--blue);
}

/* ------------------------------------------------------------
   11. Mobile ≤ 480 px
   ------------------------------------------------------------ */

@media (max-width: 480px) {
  /* Un peu plus de place pour les bulles du bot sur petit écran */
  .chat-msg--bot { max-width: 96%; }

  /* Le dropdown reste bien à l'intérieur du panneau */
  .chat-suggest {
    left: 8px;
    right: 8px;
  }

  /* Tableaux légèrement plus compacts */
  .chat-table { font-size: 11px; }
}

/* ------------------------------------------------------------
   12. Mouvement réduit — neutralise les animations de CE fichier
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .chatbot-messages { scroll-behavior: auto; }
  .chat-wait span { animation: none; opacity: 0.7; }
  .chatbot-input .chat-suggest-item,
  .chat-related-item,
  .chat-feedback,
  .chat-fb-btn,
  .chat-fb-btn svg,
  .chat-hbtn,
  .chat-table tbody tr {
    transition: none;
  }
}