/* ============================================================
   ai-widget.css — Assistant Al Ala · IA (bouton flottant + panneau de chat)
   Scopé sous le préfixe .ai-widget-* pour ne rien casser sur le reste du site.
   Réutilise la palette de marque (voir espace/espace.css :root).
   ============================================================ */

.ai-widget-root {
  --aiw-vert: #0B5C45;
  --aiw-vert-profond: #073E2E;
  --aiw-terracotta: #890001;
  --aiw-or: #A81719;
  --aiw-creme: #E7E0E0;
  --aiw-olive: #201C1C;
  --aiw-blanc: #F5F1F1;
  --aiw-serif: 'Cormorant Garamond', Georgia, serif;
  --aiw-sans: 'Lato', system-ui, sans-serif;
  --aiw-r: 14px;
  --aiw-shadow: 0 14px 40px rgba(7,62,46,.22);
  --aiw-shadow-sm: 0 6px 18px rgba(7,62,46,.16);

  position: fixed;
  z-index: 2147483000;
  bottom: 20px;
  right: 20px;
  font-family: var(--aiw-sans);
}
html[dir="rtl"] .ai-widget-root { right: auto; left: 20px; }

/* --- Bouton flottant ---------------------------------------------------- */
.ai-widget-fab {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--aiw-vert-profond);
  box-shadow: var(--aiw-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  animation: ai-widget-pop .5s cubic-bezier(.34,1.56,.64,1) both;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ai-widget-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 44px rgba(7,62,46,.3); }
.ai-widget-fab:active { transform: scale(.96); }
.ai-widget-fab img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.ai-widget-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--aiw-terracotta);
  color: var(--aiw-blanc);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .18rem .38rem;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-family: var(--aiw-sans);
}
html[dir="rtl"] .ai-widget-fab-badge { right: auto; left: -4px; }

@keyframes ai-widget-pop {
  0% { opacity: 0; transform: scale(.4) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Panneau de chat ------------------------------------------------------ */
.ai-widget-panel {
  position: fixed;
  bottom: 92px;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 24px);
  height: min(600px, calc(100vh - 120px));
  background: var(--aiw-blanc);
  border-radius: 18px;
  box-shadow: var(--aiw-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2147483000;
}
html[dir="rtl"] .ai-widget-panel { right: auto; left: 20px; }
.ai-widget-panel.ai-widget-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Sur téléphone, le panneau devient une feuille plein écran qui monte
   depuis le bas — comme les applications de messagerie. 100dvh suit le
   clavier : la barre de saisie reste toujours visible. */
@media (max-width: 480px) {
  .ai-widget-panel {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    transform: translateY(100%);
    transition: opacity .25s ease, transform .28s cubic-bezier(.32,.72,.28,1);
  }
  .ai-widget-panel.ai-widget-open { transform: translateY(0); }
  html[dir="rtl"] .ai-widget-panel { right: 0; left: 0; }

  /* L'encoche de l'iPhone ne mange pas l'en-tête, la barre d'accueil
     ne recouvre pas la zone de saisie. */
  .ai-widget-header { padding-top: max(.9rem, env(safe-area-inset-top)); }
  .ai-widget-footer { padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }

  /* Fermer d'un doigt : la croix fait la taille recommandée de 44 px. */
  .ai-widget-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }

  /* 16 px dans le champ : Safari iOS ne zoome plus la page au premier
     caractère tapé (même parade que les formulaires du site). */
  .ai-widget-input { font-size: 16px; }
  .ai-widget-send { width: 46px; height: 46px; }

  /* Bulles un peu plus larges et lisibles sur petit écran. */
  .ai-widget-messages { padding: .9rem .8rem; }
  .ai-widget-msg { max-width: 88%; font-size: .95rem; }

  /* La page derrière la conversation ne défile plus en même temps. */
  body.ai-widget-ouvert { overflow: hidden; }
}

.ai-widget-header {
  background: var(--aiw-vert-profond);
  color: var(--aiw-blanc);
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.ai-widget-header img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
}
.ai-widget-header-text { flex: 1; min-width: 0; }
.ai-widget-header-title {
  font-family: var(--aiw-serif);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}
.ai-widget-header-sub {
  font-size: .72rem;
  opacity: .85;
  margin-top: .1rem;
}
.ai-widget-close {
  background: transparent;
  border: none;
  color: var(--aiw-blanc);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: .3rem .4rem;
  opacity: .85;
  border-radius: 8px;
}
.ai-widget-close:hover { opacity: 1; background: rgba(255,255,255,.12); }

/* --- Zone de messages ------------------------------------------------------ */
.ai-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--aiw-blanc);
}

.ai-widget-msg {
  max-width: 84%;
  padding: .55rem .8rem;
  border-radius: var(--aiw-r);
  font-size: .92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-widget-msg-user {
  align-self: flex-end;
  background: var(--aiw-vert);
  color: var(--aiw-blanc);
  border-bottom-right-radius: 4px;
}
html[dir="rtl"] .ai-widget-msg-user { border-bottom-right-radius: var(--aiw-r); border-bottom-left-radius: 4px; }
.ai-widget-msg-ai {
  align-self: flex-start;
  background: var(--aiw-creme);
  color: var(--aiw-olive);
  border-bottom-left-radius: 4px;
}
html[dir="rtl"] .ai-widget-msg-ai { border-bottom-left-radius: var(--aiw-r); border-bottom-right-radius: 4px; }
.ai-widget-msg-system {
  align-self: center;
  background: transparent;
  color: var(--aiw-olive);
  opacity: .7;
  font-size: .8rem;
  text-align: center;
  max-width: 95%;
}
.ai-widget-msg-error {
  align-self: flex-start;
  background: #fbdede;
  color: var(--aiw-terracotta);
  border-bottom-left-radius: 4px;
}
.ai-widget-msg a { color: inherit; text-decoration: underline; }

/* Bouton de reprise proposé quand, après deux réessais automatiques, le service
   IA n'a toujours pas répondu : la question du visiteur n'est jamais perdue. */
.ai-widget-reessai {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 12px;
  font: inherit;
  font-size: .88em;
  line-height: 1.2;
  color: #fff;
  background: var(--aiw-terracotta);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.ai-widget-reessai:hover { filter: brightness(1.08); }
.ai-widget-reessai:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- Messages en arabe ------------------------------------------------------
   Le sens du message est décidé en JavaScript (voir directionDuTexte) et non par
   la langue de la page : dans une même conversation on peut passer du français à
   l'arabe. Une bulle arabe s'écrit de droite à gauche, s'aligne à droite, et ses
   listes numérotées comme sa ponctuation suivent le même sens. */
.ai-widget-msg-rtl {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
  font-size: 1rem;
  line-height: 1.75;
}
.ai-widget-msg-rtl.ai-widget-msg-ai,
.ai-widget-msg-rtl.ai-widget-msg-error {
  border-bottom-left-radius: var(--aiw-r);
  border-bottom-right-radius: 4px;
}
.ai-widget-msg-rtl.ai-widget-msg-user {
  border-bottom-right-radius: var(--aiw-r);
  border-bottom-left-radius: 4px;
}

/* --- Vers d'une sana'a ------------------------------------------------------
   Deux hémistiches par vers : le sadr occupe la colonne de droite, le 'ajuz celle
   de gauche, comme dans les recueils. La grille est en rtl, donc la première
   cellule fournie par le JavaScript se place bien à droite. */
.ai-widget-poeme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem 1.4rem;
  direction: rtl;
  text-align: center;
  margin: .55rem 0;
  padding: .5rem .2rem;
  font-size: 1.02rem;
  line-height: 2;
  white-space: normal;
  border-top: 1px solid rgba(7,62,46,.14);
  border-bottom: 1px solid rgba(7,62,46,.14);
}
@media (max-width: 460px) {
  .ai-widget-poeme {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: right;
    line-height: 1.9;
  }
  .ai-widget-poeme span:nth-child(even) { padding-inline-start: 1.6rem; }
}

.ai-widget-typing {
  align-self: flex-start;
  display: flex;
  gap: .28rem;
  padding: .6rem .8rem;
  background: var(--aiw-creme);
  border-radius: var(--aiw-r);
  border-bottom-left-radius: 4px;
}
.ai-widget-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aiw-vert-profond);
  opacity: .5;
  animation: ai-widget-bounce 1.1s infinite ease-in-out;
}
.ai-widget-typing span:nth-child(2) { animation-delay: .15s; }
.ai-widget-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-widget-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* --- Zone de saisie --------------------------------------------------------- */
.ai-widget-footer {
  border-top: 1px solid rgba(7,62,46,.12);
  background: var(--aiw-blanc);
  padding: .7rem .8rem .6rem;
}
.ai-widget-form {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}
.ai-widget-input {
  flex: 1;
  resize: none;
  border: 1px solid rgba(7,62,46,.22);
  border-radius: 999px;
  padding: .55rem 1rem;
  font-family: var(--aiw-sans);
  font-size: .9rem;
  max-height: 90px;
  min-height: 40px;
  line-height: 1.35;
  color: var(--aiw-olive);
  background: #fff;
  overflow-y: auto;
}
/* Le texte d'invite reste sur une seule ligne : s'il devenait trop long pour la
   largeur du panneau, il se termine par des points de suspension au lieu de
   passer à la ligne et de déborder de la pastille arrondie. */
.ai-widget-input::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-widget-input:focus { outline: 2px solid var(--aiw-vert); outline-offset: 1px; }
.ai-widget-send {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--aiw-vert-profond);
  color: var(--aiw-blanc);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .1s ease;
}
.ai-widget-send:hover { background: var(--aiw-vert); }
.ai-widget-send:active { transform: scale(.94); }
.ai-widget-send:disabled { opacity: .5; cursor: not-allowed; }
.ai-widget-send svg { width: 18px; height: 18px; }

.ai-widget-meta {
  margin-top: .4rem;
  font-size: .72rem;
  color: var(--aiw-vert-profond);
  opacity: .75;
  text-align: center;
}
.ai-widget-meta a { color: var(--aiw-terracotta); font-weight: 700; text-decoration: none; }
.ai-widget-meta a:hover { text-decoration: underline; }

.ai-widget-messages::-webkit-scrollbar { width: 6px; }
.ai-widget-messages::-webkit-scrollbar-thumb { background: rgba(7,62,46,.25); border-radius: 999px; }

/* Le défilement de la conversation ne se propage pas à la page derrière. */
.ai-widget-messages { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* --- Effet d'écriture -------------------------------------------------------
   Pendant que la réponse s'écrit (voir ecrireProgressivement dans le JS),
   un petit curseur clignote en fin de texte, comme une plume qui avance. */
.ai-widget-msg-ecrit::after {
  content: "▍";
  display: inline-block;
  margin-inline-start: .06em;
  color: var(--aiw-vert);
  animation: ai-widget-caret .7s steps(1) infinite;
}
@keyframes ai-widget-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ai-widget-panel, .ai-widget-fab { transition: none; animation: none; }
  .ai-widget-msg-ecrit::after { animation: none; }
}

/* --- Passerelle vers le Corpus : pastilles sous une réponse qui cite des sanaa --- */
.ai-widget-corpus{align-self:flex-start;max-width:88%;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px;margin:-4px 0 2px}
.ai-widget-corpus-t{font-size:.72rem;font-weight:600;color:#0B5C45;opacity:.85}
.ai-widget-corpus-l{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-decoration:none;font-size:.82rem;color:#0B5C45;
  background:rgba(11,92,69,.08);border:1px solid rgba(11,92,69,.22);border-radius:999px;
  padding:4px 11px;transition:background .18s ease,color .18s ease}
.ai-widget-corpus-l:hover{background:#0B5C45;color:#fff}