/* Styles pour le chat OpenAI */
.mabible-chat-single-container,
.mabible-chat-single-container * {
  font-family: "Poppins","Poppins Fallback", sans-serif !important;
}

/* ===================================
   ONGLET LATÉRAL D'HISTORIQUE
   =================================== */

/* Sidebar d'historique */
.mabible-history-sidebar {
  position: fixed;
  top: 0;
  left: -400px;
  width: 400px;
  height: 100vh;
  background: #ffffff;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

.mabible-history-sidebar.open {
  left: 0;
  margin-top: 5%;
}

/* Header de la sidebar */
.history-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #006738 0%, #94c11f 100%);
  color: white;
  border-bottom: 2px solid #f16521;
}

.history-sidebar-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

/* Conteneur des boutons du header */
.history-header-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Bouton supprimer tout l'historique */
.history-delete-all-btn {
  background: rgba(241, 101, 33, 0.3);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.history-delete-all-btn:hover {
  background: rgba(241, 101, 33, 0.5);
  transform: scale(1.1);
}

.history-delete-all-btn svg {
  width: 16px;
  height: 16px;
  stroke: white;
}

/* Bouton fermer */
.history-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.history-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.history-close-btn svg {
  width: 18px;
  height: 18px;
  stroke: white;
}

/* Contenu de la sidebar */
.history-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f9f9f9;
  /* Ascenseur masqué comme partout ailleurs dans le chat.
     Sans cette règle, la sidebar héritait en plus du vert défini sur body
     (`scrollbar-color` est une propriété héritée). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.history-sidebar-content::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* Loading state */
.history-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #006738;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Question item dans l'historique (conversations) */
.history-conversation-item {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid #94c11f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.history-conversation-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-left-color: #f16521;
}

.history-question-text {
  font-size: 14px;
  color: #2c3e50;
  margin: 0 0 8px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* NB : .history-question-meta, .history-question-source et les variantes
   .source-chat / -reading / -verset / -Dictionnaire ont été retirées.
   Elles correspondaient à un ancien balisage d'historique remplacé par
   .history-conversation-item ; plus rien ne les produisait. */

/* Ligne de métadonnées d'une conversation (nombre de messages + date) */
.history-conversation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.history-message-count {
  color: #999;
  font-size: 11px;
}

.history-question-date {
  color: #999;
  font-size: 11px;
}

.history-message-count {
  color: #666;
  font-size: 11px;
  font-weight: 500;
}

/* État vide */
.history-empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.history-empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.history-empty-text {
  font-size: 14px;
  line-height: 1.6;
}

/* Bouton toggle flottant */
.history-toggle-btn {
  position: fixed;
  left: 20px;
  top: 150px;
  background: linear-gradient(135deg, #006738 0%, #94c11f 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 103, 56, 0.3);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: "Poppins","Poppins Fallback", sans-serif;
}

.history-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 103, 56, 0.4);
}

.history-toggle-btn svg {
  width: 20px;
  height: 20px;
  stroke: white;
}

.history-toggle-btn.hidden {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .mabible-history-sidebar {
    width: 85%;
    left: -85%;
  }

  .history-toggle-btn {
    left: 10px;
    top: 80px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .history-toggle-btn span {
    display: none;
  }
}

.disclaimer-single-message {
  font-size: 11px;
  color: #666;
  margin: 0;
  text-align: center;
  font-family: "Poppins","Poppins Fallback", sans-serif;
  font-weight: 400;
}
/* NB : .mabible-model-selector, .model-options, .model-option et .model-name
   habillaient un sélecteur de modèle d'IA côté visiteur. Le modèle est décidé
   dans les réglages d'administration : ce bloc a été retiré du balisage, son
   habillage n'avait plus d'objet. */

.conversation-header {
  margin-bottom: 20px;
}

.conversation-header h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 18px;
}

.disclaimer {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.message {
  margin-bottom: 20px;
  padding: 15px 20px;
  border-radius: 12px;
  max-width: 90%;
  animation: fadeInUp 0.3s ease;
  position: relative;
}

.message:last-child {
  margin-bottom: 0;
}

.message.user {
  background: #dcc7b2;
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(139, 198, 63, 0.322) 0%,
    rgba(147, 193, 31, 0.512) 50%,
    rgb(140, 198, 62) 100%
  );
}

.message.assistant {
  background: #f5f5f5;
  margin-right: auto;
  border-bottom-left-radius: 4px;
  margin-bottom: 20px;
}

/* Les règles qui ajoutaient 350px (desktop) et 280px (mobile) sous le dernier
   message de l'IA ont été supprimées : elles servaient à contourner le champ
   de saisie en position fixe. Elles produisaient un vide énorme après la
   réponse quand l'estimation était trop large, et laissaient malgré tout le
   lecteur audio sous le champ quand elle était trop courte. */

/* ===================================
   MISE EN FORME MARKDOWN DANS LES RÉPONSES
   ===================================
   Le convertisseur produit désormais de vrais titres, listes et citations :
   il faut les habiller, sinon le thème applique ses propres tailles (un h3 de
   thème dans une bulle de chat est énorme). */
.ai-response h3,
.ai-response h4,
.ai-response h5,
.ai-response h6 {
  margin: 18px 0 8px;
  line-height: 1.35;
  color: #006738;
  font-family: "Poppins","Poppins Fallback", sans-serif;
  font-weight: 600;
}

.ai-response h3 {
  font-size: 17px;
}
.ai-response h4 {
  font-size: 16px;
}
.ai-response h5,
.ai-response h6 {
  font-size: 15px;
}

/* Pas d'espace superflu au tout début d'une réponse */
.ai-response > h3:first-child,
.ai-response > h4:first-child,
.ai-response > h5:first-child,
.ai-response > h6:first-child,
.ai-response > p:first-child {
  margin-top: 0;
}

.ai-response p {
  margin: 0 0 12px;
  line-height: 1.6;
}

.ai-response ul,
.ai-response ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.ai-response li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.ai-response blockquote {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-left: 3px solid #94c11f;
  background: rgba(148, 193, 31, 0.08);
  font-style: italic;
}

.ai-response blockquote p {
  margin: 0;
}

.ai-response code {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 0.92em;
}

.ai-response pre {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f3f4f6;
  overflow-x: auto;
}

.ai-response pre code {
  padding: 0;
  background: none;
}

.ai-response hr {
  margin: 16px 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ai-response strong {
  font-weight: 600;
}

/* Barre d'actions d'un message (copier + écouter)
   Regroupée sous le texte : le bouton copier était dans l'en-tête du message
   et le bouton audio tout en bas, ce qui allongeait inutilement la « queue »
   du message — précisément la partie qui se retrouvait masquée. */
.message-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Le bouton d'écoute était auparavant seul dans une colonne flex, d'où son
   `align-self: flex-start`. Dans la barre d'actions il doit s'aligner sur les
   autres boutons. */
.message-actions .play-tts-btn-bottom {
  align-self: auto;
}

/* NB : .message-header a été retirée du chat public. Le bouton copier a
   rejoint .message-actions sous le texte du message. La classe subsiste dans
   admin/chat-questions.php, mais cette page a sa propre feuille de style
   intégrée et ne charge pas mabible-chat.css. */

.copy-response-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #666;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-response-btn:hover {
  background: #e0e0e0;
  color: #51483f;
  transform: scale(1.1);
}

.copy-response-btn:active {
  transform: scale(0.95);
}

.copy-response-btn svg {
  width: 16px;
  height: 16px;
}

/* Styles pour le bouton play TTS */
.play-tts-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #666;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-tts-btn:hover {
  background: #e0e0e0;
  color: #51483f;
  transform: scale(1.1);
}

.play-tts-btn:active {
  transform: scale(0.95);
}

.play-tts-btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 980px) {
  .et_pb_section {
    padding: 5px 0 !important;
  }
}
@media (max-width: 768px) {
  .copy-response-btn,
  .play-tts-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: #333;
  }
}

/* ===================================
   SECTION AUDIO COMPLÈTE (BOUTON + STATUT + LECTEUR)
   =================================== */

/* Section audio complète en dessous de chaque message */
.message-audio-section {
  margin-top: 10px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeInSection 0.3s ease;
}

@keyframes fadeInSection {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bouton "Écouter la réponse" en dessous du message */
.play-tts-btn-bottom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #006738 0%, #94c11f 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 103, 56, 0.2);
  align-self: flex-start;
}

.play-tts-btn-bottom:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 103, 56, 0.3);
  background: linear-gradient(135deg, #007840 0%, #a0d020 100%);
}

.play-tts-btn-bottom:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 103, 56, 0.2);
}

.play-tts-btn-bottom svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.play-tts-btn-bottom span {
  font-family: "Poppins","Poppins Fallback", sans-serif;
}

/* Messages de statut (génération en cours, prêt, erreur) */
.voice-status-message {
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  animation: fadeInMessage 0.3s ease;
}

@keyframes fadeInMessage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.voice-status-message.voice-status-info {
  background: #c3e6cb;
  color: #006738;
  border-left: 3px solid #c3e6cb;
}

.voice-status-message.voice-status-success {
  background: #c3e6cb;
  color: #006738;
  border-left: 3px solid #c3e6cb;
}

.voice-status-message.voice-status-error {
  background: #ffebee;
  color: #c62828;
  border-left: 3px solid #f44336;
}

/* Container du lecteur audio dans chaque message */
.message-audio-player {
  margin-top: 5px;
  animation: fadeInPlayer 0.4s ease;
}

@keyframes fadeInPlayer {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Styles pour les lecteurs Essential Audio */
.message-audio-player .essential_audio {
  height: 35px;
  margin-top: 10px;
}

/* Assurer que les sections s'affichent correctement sur mobile */
@media (max-width: 768px) {
  .message-audio-section {
    margin-top: 12px;
    margin-bottom: 20px;
    padding-top: 12px;
  }

  .play-tts-btn-bottom {
    padding: 8px 14px;
    font-size: 13px;
  }

  .voice-status-message {
    padding: 8px 12px;
    font-size: 12px;
  }

  .message-audio-player {
    margin-top: 12px;
    padding-top: 12px;
  }
}

.message-content {
  font-size: 14px;
  line-height: 1.6;
  color: #2c3e50;
  font-family: "Poppins","Poppins Fallback", sans-serif !important;
}

.quick-question {
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 13px;
  color: #2c3e50;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-question:hover {
  background: #f5ece3;
  border-color: #51483f;
  color: #51483f;
}

/* NB : les règles .mabible-ai-input (sans suffixe) ont été retirées. Cette
   classe n'existait dans aucun balisage — à ne pas confondre avec
   .mabible-single-ai-input (page de chat) ni .mabible-ai-input-drawer (tiroir
   de la page de lecture, habillé dans mabible-reading.css). C'est elle qui
   portait le dernier halo bleu `rgba(33, 150, 243, .1)` du fichier. */

/*** CHAT SINGLE ***/

/* ===================================
   DOCK BAS (navigation + compteur + saisie)
   ===================================
   `sticky` et non `fixed` : l'élément reste dans le flux, réserve donc sa
   propre hauteur — variable selon la taille de la textarea, la présence du
   compteur d'essai ou le clavier virtuel. Le contenu ne peut plus passer
   dessous, et aucune marge de compensation en dur n'est nécessaire. */
.mabible-chat-dock {
  /* Voisin de la liste, plus superposé à elle : il ne défile pas, ne recouvre
     rien, et conserve sa hauteur propre quelle que soit la taille de la
     textarea ou la présence du compteur d'essai. */
  flex: 0 0 auto;
  padding: 10px 0;
  background: #fff;
  /*border-top: 1px solid #e8e8e8;*/
}

.mabible-chat-dock-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  /* Réserve la hauteur des boutons même quand ils sont masqués, pour que le
     dock ne change pas de taille en cours de défilement. */
  min-height: 32px;
  margin-bottom: 6px;
}

/* Boîte de saisie — inspirée de ChatGPT / Gemini
   Bordure d'un seul pixel très claire, grand rayon, ombre douce, et surtout
   beaucoup d'air : la sobriété vient du retrait des traits, pas de leur ajout.
   L'ancienne bordure de 2px gris moyen et le rayon de 8px donnaient un aspect
   « champ de formulaire » plutôt que « zone de conversation ». */
.mabible-single-ai-input {
  flex-shrink: 0;
  width: 92%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 8px 6px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 26px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* État actif : anneau discret aux couleurs du site, sans outline système */
.mabible-single-ai-input:focus-within {
  border-color: rgba(0, 103, 56, 0.35);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(148, 193, 31, 0.16);
}

.mabible-single-ai-input textarea {
  display: block;
  width: 100%;
  min-height: 26px;
  max-height: 160px;
  padding: 11px 0 7px;
  border: none !important;
  background: transparent;
  /* 16px est la taille minimale sous laquelle iOS Safari zoome automatiquement
     sur le champ à la prise de focus, ce qui décale toute la mise en page. */
  font-size: 16px;
  line-height: 1.55;
  color: #181818;
  font-family: "Poppins","Poppins Fallback", sans-serif;
  /* `resize: vertical` permettait à l'utilisateur d'agrandir la zone sans
     limite et de casser la mise en page. La hauteur s'ajuste désormais toute
     seule au contenu (voir autoGrowTextarea dans js/mabible-chat.js), plafonnée
     par max-height. */
  resize: none;
  margin-bottom: 0px;
  box-sizing: border-box;

  /* La zone défile au-delà de 160px, mais sans barre visible : même parti pris
     que la liste des messages. */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mabible-single-ai-input textarea::-webkit-scrollbar {
  width: 0;
  display: none;
}

.mabible-single-ai-input textarea:focus {
  outline: none;
  box-shadow: none;
}

.mabible-single-ai-input textarea::placeholder {
  color: #9aa0a6;
  font-size: 16px;
}

/* L'ancienne règle posait ici `box-shadow: 0 0 0 2px rgba(33, 150, 243, .1)` —
   un halo BLEU, hérité d'un thème par défaut et étranger à la charte du site.
   Comme elle était déclarée après la nouvelle règle avec la même spécificité,
   c'est elle qui l'emportait : d'où le contour bleuté visible sur le textarea.
   Le retour visuel de la saisie active est désormais porté par le conteneur
   (.mabible-single-ai-input:focus-within), pas par le textarea lui-même. */
.mabible-single-ai-input textarea:focus,
.mabible-single-ai-input textarea:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.mabible-single-ai-input textarea:disabled {
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.7;
}

.user-welcome-message {
  font-size: 1.8em;
  text-align: center;
  font-weight: bold;
  color: #ea5b0c;
  margin: 0 0 10px 0;
  padding: 10px;
}

.welcome-single-message {
  font-size: 32px;
  text-align: center;
  font-weight: bold;
  margin: 20px 0;
}

/* ===================================
   COQUILLE D'APPLICATION (façon ChatGPT / Gemini)
   ===================================
   La page ne défile plus : le chat occupe la hauteur visible restante sous
   l'en-tête du thème, et seule la liste des messages défile à l'intérieur.
   La zone de saisie est un simple voisin de la liste — elle ne recouvre donc
   jamais le texte, contrairement à `fixed` (qui flottait par-dessus) comme à
   `sticky` (qui flottait aussi par-dessus tant qu'on n'était pas tout en bas).

   La hauteur est posée en JS par resizeChatShell() : elle dépend de l'en-tête
   du thème et de la barre d'administration, qu'aucune valeur CSS figée ne peut
   deviner. La règle ci-dessous n'est qu'un repli avant exécution du script. */
.mabible-chat-single-container {
  width: 95%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  background: white;
  height: 85vh;
  height: 85dvh;
  display: flex;
  flex-direction: column;
  /* Indispensable pour qu'un enfant flex puisse défiler */
  min-height: 0;
  overflow: hidden;
}

/* NB : .single-disclaimer retirée (à ne pas confondre avec
   .disclaimer-single-message, bien utilisée). Elle portait au passage une
   marge basse de 200px, dernier vestige des compensations du champ fixe. */

.mabible-single-conversation-header {
  margin-bottom: 20px;
  background-color: white;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Messages d'essai gratuit */
.free-trial-notice {
  margin: 20px auto;
  max-width: 600px;
  padding: 15px 20px;
  background: #fff3cd;
  border: 2px solid #f16521;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(241, 101, 33, 0.2);
}

.trial-message {
  margin: 0;
  font-size: 15px;
  color: #2c3e50;
  line-height: 1.6;
}

.trial-message strong {
  color: #f16521;
  font-weight: 600;
}

#questions-remaining {
  font-size: 18px;
  font-weight: bold;
  color: #006738;
}

.trial-link {
  color: #006738;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #94c11f;
  transition: all 0.2s ease;
}

.trial-link:hover {
  color: #f16521;
  border-bottom-color: #f16521;
}

/* Message d'essai gratuit expiré */
.free-trial-expired {
  margin: 30px auto;
  max-width: 500px;
  padding: 30px;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.free-trial-expired .mabible-ai-avatar {
  margin-bottom: 15px;
}

.expired-message {
  font-size: 16px;
  color: #2c3e50;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.trial-link-primary {
  display: inline-block;
  padding: 12px 30px;
  background: #f16521;
  color: white;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(241, 101, 33, 0.3);
}

.trial-link-primary:hover {
  background: #d65a1e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(241, 101, 33, 0.4);
}

.login-alternative {
  margin: 15px 0 0 0;
  font-size: 14px;
  color: #666;
}

/* Champ de saisie désactivé */
.mabible-single-ai-input.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* NB : .global-audio-sticky, .audio-player-simple et .audio-close-btn
   habillaient l'ancien lecteur audio global unique, remplacé par un lecteur
   Essential Audio propre à chaque message. Ce balisage n'est plus produit ni
   par le PHP ni par le JS. Ces règles portaient les deux dernières positions
   fixes en dur du fichier (bottom: 202px et 125px). */

/* Compteur d'essai gratuit (dans le dock, plus en position fixe) */
.free-trial-counter-sticky {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
  max-width: 1000px;
  padding: 10px 20px;
  background: #fff3cd;
  border: 2px solid #f16521;
  border-radius: 8px;
  box-shadow: 0 -2px 8px rgba(241, 101, 33, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  z-index: 998;
  animation: slideInUp 0.3s ease;
  transition: bottom 0.3s ease;
}

.free-trial-counter-sticky.expired {
  background: #ffe0e0;
  border-color: #dc3545;
}

.counter-icon {
  font-size: 20px;
}

.counter-text {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
}

.counter-text strong {
  font-size: 16px;
  color: #f16521;
  font-weight: 700;
}

.counter-link {
  padding: 6px 15px;
  background: #006738;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.counter-link:hover {
  background: #94c11f;
  transform: translateY(-1px);
}

.counter-link-cta {
  padding: 8px 20px;
  background: #f16521;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(241, 101, 33, 0.3);
}

.counter-link-cta:hover {
  background: #d65a1e;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(241, 101, 33, 0.4);
}

/* Animation d'apparition */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Conteneur de conseils */
.mabible-tips-container {
  margin: 30px auto;
  max-width: 800px;
  padding: 25px 30px;
  background: #e8f5e9;
  border: 2px solid #94c11f;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 103, 56, 0.1);
}

.tips-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #006738;
  text-align: center;
}

.tips-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.tips-column h5 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #006738;
  padding-bottom: 8px;
  border-bottom: 2px solid #94c11f;
}

.tips-column ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: none;
}

.tips-column li {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: #2c3e50;
  position: relative;
  text-align: left;
}

.tips-column li:before {
  content: "✓";
  position: absolute;
  left: -15px;
  color: #94c11f;
  font-weight: bold;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .mabible-tips-container {
    padding: 20px;
    margin: 20px 15px;
  }

  .tips-title {
    font-size: 16px;
  }

  .tips-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tips-column h5 {
    font-size: 14px;
  }

  .tips-column li {
    font-size: 13px;
  }

  /* Ajustements pour le compteur d'essai sur mobile */
  .free-trial-counter-sticky {
    width: 90%;
    padding: 8px 15px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .counter-icon {
    font-size: 18px;
  }

  .counter-text {
    font-size: 12px;
  }

  .counter-text strong {
    font-size: 14px;
  }

  .counter-link,
  .counter-link-cta {
    font-size: 12px;
    padding: 6px 12px;
  }
}

.mabible-single-ai-container {
  background-color: white !important;
  display: flex;
  flex-direction: column;
  /* Occupe toute la coquille et transmet la contrainte de hauteur à la liste
     des messages. `min-height: 0` lève le comportement par défaut des enfants
     flex, qui refusent de rétrécir sous leur contenu et empêchent donc tout
     défilement interne. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Styles pour les exemples de questions (style Gemini) */
.conversation-examples {
  margin-top: 30px;
}

.examples-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
  font-weight: 500;
}

.example-questions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
  justify-content: center;
}

.example-question {
  padding: 10px 20px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 12px;
  color: #2c3e50;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: "Poppins","Poppins Fallback", sans-serif;
  font-weight: 400;
  flex: 1;
  min-width: 200px;
  max-width: 250px;
}

.example-question:hover {
  background: #8cc63e73;
  border-color: #8cc63e;
  color: #006738;
  transform: translateY(-1px);
}

.example-question:active {
  transform: translateY(0);
}

/* Zone de conversation : c'est elle qui défile désormais.
   Toutes les compensations en dur (padding-bottom de 250px, marges de 350px
   sous le dernier message...) ont disparu : la saisie n'étant plus superposée,
   il n'y a plus rien à contourner. */
.mabible-conversation {
  padding: 20px;
  background: white;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* Évite d'entraîner la page en fin de liste */
  scroll-behavior: smooth;

  /* Barre de défilement entièrement masquée.
     Le défilement reste bien sûr fonctionnel (molette, tactile, clavier,
     boutons de navigation du dock) : seule l'indication visuelle disparaît.
     `scrollbar-width` couvre Firefox et Chromium 121+, `-ms-overflow-style`
     les anciens Edge, le pseudo-élément WebKit couvre Chrome et Safari. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mabible-conversation::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* En-tête d'accueil : défile aussi, pour rester lisible sur petit écran */
.mabible-single-conversation-header {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mabible-single-conversation-header::-webkit-scrollbar {
  width: 0;
  display: none;
}

.conversation-history {
  overflow: visible;
  max-height: none;
  height: auto;
}

/* Personnalisation de la scrollbar pour la page entière */
html:has(.mabible-chat-single-container) {
  scroll-behavior: smooth;
}

/* Défilement de la PAGE verrouillé sur les pages de chat.
   Le pied de page n'y est pas affiché : il n'y a donc rien à atteindre sous le
   chat, et laisser la page défiler ne produisait qu'un déplacement parasite de
   quelques pixels. Seule la liste des messages défile désormais — le modèle
   exact de ChatGPT et Gemini.

   La portée est limitée par `:has()` : les autres pages du site conservent leur
   défilement et leur ascenseur normaux. */
/* Masquage de l'ascenseur : toujours actif sur une page de chat */
html:has(.mabible-chat-single-container),
body:has(.mabible-chat-single-container) {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html:has(.mabible-chat-single-container)::-webkit-scrollbar,
body:has(.mabible-chat-single-container)::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Verrouillage du défilement : piloté par JS via la classe posée sur <html>.
   Il n'est appliqué que si le chat tient réellement dans la hauteur visible.
   Sur un écran trop bas — mobile en paysage, en-tête de thème imposant — le
   verrou couperait le bas de l'interface sans aucun moyen d'y accéder : dans
   ce cas la page reste défilante. */
html.mabible-chat-locked,
html.mabible-chat-locked body {
  overflow: hidden;
  /* Empêche le rebond élastique iOS et le « tirer pour rafraîchir » Android,
     déclenchables même défilement verrouillé. */
  overscroll-behavior: none;
}

/* Boutons de navigation - positionnés dans le dock, plus en position fixe.
   Les six valeurs `bottom:` en dur (115px, 125px, 135px, 145px, 202px, 210px)
   qui tentaient de les caler au-dessus de la saisie ont disparu : ils suivent
   maintenant naturellement la hauteur du dock.
   Taille portée de 16px à 32px : en dessous de 24px la cible est trop petite
   pour un usage tactile (WCAG 2.2, critère Target Size). */
.scroll-to-bottom,
.scroll-to-top {
  width: 32px;
  height: 32px;
  background: #f16521;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(241, 101, 33, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.3s ease;
  padding: 0;
  line-height: 1;
}

.scroll-to-bottom.visible,
.scroll-to-top.visible {
  opacity: 0.85;
  visibility: visible;
  transform: scale(1);
}

.scroll-to-bottom:hover,
.scroll-to-top:hover {
  opacity: 1;
  background: #d65418;
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(241, 101, 33, 0.4);
}

.scroll-to-bottom:active,
.scroll-to-top:active {
  transform: scale(0.9);
}

.scroll-to-bottom svg,
.scroll-to-top svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
  fill: none;
}

/* Animation d'apparition */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Indication pour la touche Entrée */
.enter-hint {
  font-size: 12px;
  color: #666;
  font-style: italic;
  display: flex;
  align-items: center;
}

.enter-hint::before {
  content: "⏎";
  margin-right: 5px;
  font-size: 14px;
  color: #51483f;
}

/* Styles pour l'état de chargement */
.loading-message {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  font-style: italic;
}

.loading-dots {
  display: inline-flex;
  gap: 2px;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: #666;
  border-radius: 50%;
  animation: loadingDots 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loadingDots {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .user-welcome-message {
    font-size: 1em;
    padding: 8px;
  }

  .welcome-single-message {
    font-size: 4vw;
    margin: 15px 0;
  }

  .mabible-single-ai-input {
    width: 94%;
    max-width: none;
    padding-left: 14px;
  }

  .free-trial-counter-sticky {
    width: 90%;
  }

  .mabible-conversation {
    padding-bottom: 16px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .example-questions {
    max-width: 100%;
    flex-direction: column;
  }

  .example-question {
    padding: 12px 15px;
    font-size: 13px;
    min-width: auto;
    max-width: none;
    flex: none;
  }

  .message {
    max-width: 95%;
    padding: 12px 15px;
  }

  .mabible-single-conversation-header {
    padding: 15px;
  }
  .conversation-history {
    margin: 0 auto;
    max-width: 100%;
    overflow: visible; /* Pas de scroll sur mobile non plus */
    max-height: none;
  }

  .copy-notification {
    top: 30px;
    right: 10px;
    font-size: 13px;
    padding: 10px 16px;
  }

  /* Les boutons de défilement gardent leur taille tactile sur mobile :
     14px était bien en dessous du minimum utilisable au doigt. */
}

/* Style pour la notice de connexion */
.mabible-login-notice-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.mabible-login-notice {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mabible-ai-avatar {
  margin-bottom: 15px;
}

.mabible-login-link,
.mabible-register-link {
  color: #51483f;
  text-decoration: none;
  font-weight: 500;
}

.mabible-login-link:hover,
.mabible-register-link:hover {
  text-decoration: underline;
}

/*** END CHAT SINGLE ***/

.footer-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Compteur de caractères : masqué au repos, révélé pendant la saisie.
   Il occupe malgré tout sa place (opacity et non display) pour que la barre de
   boutons ne se décale pas à la prise de focus. */
.char-count {
  font-size: 11px;
  color: #b0b4b8;
  margin-right: auto;
  padding-left: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mabible-single-ai-input:focus-within .char-count {
  opacity: 1;
}
/* Conteneur parent pour les boutons voice et send */
.input-buttons-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-bottom: 0px;
  padding-bottom: 2px;
}

/* Conteneur du bouton send du textarea */
.send-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 0;
}

/* Bouton d'envoi : pastille pleine, seul élément coloré de la boîte.
   Il concentre l'attention sur l'action principale, les autres commandes
   restant volontairement en retrait. */
.send-input-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #006738 0%, #94c11f 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-input-btn:hover {
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 2px 10px rgba(0, 103, 56, 0.3);
}

.send-input-btn:active {
  transform: scale(0.95);
}

.send-input-btn svg {
  width: 16px;
  height: 16px;
  /* L'icône « avion » penche : léger recentrage optique dans la pastille */
  margin-left: -2px;
}

/* Tant que le champ est vide, l'envoi est estompé.
   `:has()` n'est pas supporté par tous les navigateurs ; là où il manque, le
   bouton reste simplement pleinement visible — rien n'en dépend. */
.mabible-single-ai-input:has(textarea:placeholder-shown) .send-input-btn {
  opacity: 0.35;
}

.mabible-single-ai-input:has(textarea:placeholder-shown) .send-input-btn:hover {
  transform: none;
  box-shadow: none;
}
/* Conteneur du bouton vocal */
.voice-input-container {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 0;
}

/* Bouton de reconnaissance vocale */
/* Bouton micro : « fantôme », il ne doit pas concurrencer l'envoi */
.voice-input-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #5f6368;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-input-btn:hover {
  color: #006738;
  background: rgba(0, 0, 0, 0.05);
}

.voice-input-btn svg {
  width: 18px;
  height: 18px;
}

.voice-input-btn:active {
  transform: scale(0.95);
}

/* État d'écoute du bouton vocal */
.voice-input-btn.listening {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
  animation: voicePulse 1.5s infinite;
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.5);
}

.voice-input-btn.listening:hover {
  background: #c82333;
  border-color: #c82333;
}

@keyframes voicePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Statuts de la reconnaissance vocale */
.voice-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Poppins","Poppins Fallback", sans-serif !important;
  animation: slideInDown 0.3s ease;
  line-height: 1.4;
}

/* Bouton d'annulation dans le statut vocal */
.voice-status #cancel-auto-send {
  background: #dc3545 !important;
  color: white !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  cursor: pointer !important;
  font-size: 11px !important;
  margin-left: 10px !important;
  transition: background-color 0.2s ease !important;
}

.voice-status #cancel-auto-send:hover {
  background: #c82333 !important;
  transform: scale(1.05);
}

.voice-status-info {
  background: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}

.voice-status-listening {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.voice-status-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.voice-status-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive pour la reconnaissance vocale */
@media (max-width: 768px) {
  .footer-controls {
    gap: 8px;
  }

  .voice-input-container {
    margin-bottom: 0;
  }

  /* Cibles tactiles un peu plus larges sur mobile */
  .voice-input-btn,
  .send-input-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .voice-input-btn svg {
    width: 18px;
    height: 18px;
  }

  .voice-status {
    font-size: 12px;
    padding: 6px 10px;
  }

  .enter-hint {
    font-size: 11px;
  }
}

/* Styles pour le bouton Envoyer (gardé pour compatibilité avec l'autre shortcode) */
#ask-ai {
  padding: 8px 20px;
  background: #51483f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

#ask-ai:hover {
  background: #3d342e;
}

#ask-ai:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.ai-response {
  line-height: 1.6;
  font-family: "Poppins","Poppins Fallback", sans-serif !important;
}

.ai-response p {
  margin-bottom: 10px;
  font-family: "Poppins","Poppins Fallback", sans-serif !important;
}

.ai-response p:last-child {
  margin-bottom: 0;
}

.ai-response strong {
  color: #2c3e50;
  font-weight: 600;
  font-family: "Poppins","Poppins Fallback", sans-serif !important;
}

.ai-response br {
  display: block;
  margin: 5px 0;
  content: "";
}

.ai-response strong:contains(":") {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  color: #51483f;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 3px;
}

.ai-response p:has-text("1. "),
.ai-response p:has-text("2. "),
.ai-response p:has-text("3. "),
.ai-response p:has-text("4. "),
.ai-response p:has-text("5. ") {
  margin-left: 15px;
  padding-left: 10px;
  border-left: 2px solid #e3f2fd;
}

/* Liens vers les références bibliques dans les réponses de l'IA */
.ai-response .bible-reference-link {
  color: #006738 !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted #006738;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ai-response .bible-reference-link:hover {
  color: #004d28 !important;
  border-bottom-color: #004d28;
  background-color: rgba(0, 103, 56, 0.05);
  padding: 2px 4px;
  border-radius: 3px;
}

.ai-response .bible-reference-link:active {
  transform: scale(0.98);
}

/* Style pour l'icône de livre dans le lien */
.ai-response .bible-reference-link::after {
  font-size: 0.9em;
  opacity: 0.7;
}

/* Amélioration visuelle au survol */
.ai-response .bible-reference-link:hover::after {
  opacity: 1;
}

.message.assistant .message-content {
  color: #2c3e50;
}

.message.assistant .ai-response p + p {
  margin-top: 8px;
}

/* Notification de copie */
.copy-notification {
  position: fixed;
  top: 120px;
  right: 20px;
  background: #51483f;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Poppins","Poppins Fallback", sans-serif;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
}

.copy-notification::before {
  content: "✓";
  margin-right: 8px;
  font-weight: bold;
}