/* ════════════════════════════════════════════════════════════════════════
   Liseuse v2 — rag.css : modale « Demander à la bibliothèque » (assistant IA)
   ─────────────────────────────────────────────────────────────────────────
   S'appuie EXCLUSIVEMENT sur les tokens :root de v2.css (verre profond violet).
   Réutilise .modal / .modal__head / .modal__body / .chip / .btn / .iconbtn.
   Ce fichier n'ajoute QUE : bandeau de scope, fil de conversation, chips de
   suggestions, pastille d'état, sous-vue « livres indexés ».
   ════════════════════════════════════════════════════════════════════════ */

/* La modale RAG est un peu plus large qu'une modale standard (fil de discussion) */
.rag-modal { width: min(720px, 100%); }

/* structure verticale : bandeau · fil · zone de saisie · pied */
.rag-modal .modal__body {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  min-height: 0; /* autorise le fil interne à scroller */
}

/* ───────────── bandeau de scope (« Vous interrogez : … ») ───────────── */
.rag-scope {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 14px 22px 0; padding: 10px 14px;
  background: var(--acc-soft); border: 1px solid rgba(139, 92, 246, .32);
  border-radius: var(--r-m); font-size: 13.5px; color: var(--text-2);
}
.rag-scope__icon {
  display: inline-flex; flex-shrink: 0; color: var(--acc);
}
.rag-scope__icon svg { width: 18px; height: 18px; }
.rag-scope__label { min-width: 0; }
.rag-scope__label b {
  color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; display: inline-block; vertical-align: bottom;
}
.rag-scope__widen {
  margin-left: auto; min-height: 34px; padding: 0 12px; font-size: 12.5px;
}

/* ───────────── suggestions (chips cliquables, scope livre) ───────────── */
.rag-suggests {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 22px 0;
}
.rag-suggests[hidden] { display: none; }
.rag-suggests__hint {
  flex-basis: 100%; margin: 0 0 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.rag-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--glass-1); border: 1px solid var(--stroke);
  color: var(--text-2); font-weight: 500; font-size: 13px;
  text-align: left; transition: all .18s var(--ease);
}
.rag-chip:hover { color: var(--text); border-color: var(--stroke-lit); transform: translateY(-1px); }
.rag-chip__spark { flex-shrink: 0; color: var(--acc-3); opacity: .8; }
.rag-chip__spark svg { width: 15px; height: 15px; }

/* ───────────── fil de conversation ───────────── */
.rag-thread {
  flex: 1; min-height: 120px; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 16px;
  margin: 14px 0 0; padding: 4px 22px 6px;
}
/* état vide accueillant */
.rag-thread__empty {
  margin: auto; text-align: center; color: var(--text-3);
  padding: 28px 16px; max-width: 340px;
}
.rag-thread__empty .rag-emptymark {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--acc-soft); border: 1px solid rgba(139, 92, 246, .3);
  color: var(--acc);
}
.rag-thread__empty .rag-emptymark svg { width: 26px; height: 26px; }
.rag-thread__empty p { margin: 0; font-size: 14px; line-height: 1.55; }

/* bulle générique */
.rag-turn { display: flex; flex-direction: column; gap: 6px; }
.rag-turn__who {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.rag-turn__who svg { width: 14px; height: 14px; }

/* question de l'utilisateur : verre clair, alignée à droite */
.rag-turn--q { align-items: flex-end; }
.rag-turn--q .rag-turn__who { color: var(--acc-3); }
.rag-bubble-q {
  max-width: 86%; padding: 11px 15px; border-radius: 16px 16px 4px 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(99, 102, 241, .16));
  border: 1px solid rgba(139, 92, 246, .34);
  color: var(--text); font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

/* réponse de l'assistant : sur PAPIER crème (cohérence « pages de papier ») */
.rag-turn--a .rag-turn__who { color: var(--acc); }
.rag-answer {
  max-width: 100%; padding: 16px 18px; border-radius: 4px 16px 16px 16px;
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--r-m);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), var(--shadow-2);
  font-family: var(--serif); font-size: 15.5px; line-height: 1.66;
}
.rag-answer p { margin: 0 0 .8em; }
.rag-answer p:last-child { margin-bottom: 0; }
.rag-answer strong { font-weight: 700; }
.rag-answer em { font-style: italic; }

/* sources citées sous une réponse */
.rag-sources {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(38, 32, 25, .14);
}
.rag-sources__title {
  margin: 0 0 8px; font-family: var(--ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--paper-muted);
}
.rag-source {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 10px;
  background: rgba(38, 32, 25, .05); border: 1px solid rgba(38, 32, 25, .1);
  font-family: var(--ui); font-size: 12.5px; color: var(--paper-ink);
}
.rag-source:last-child { margin-bottom: 0; }
.rag-source__body { flex: 1; min-width: 0; }
.rag-source__title {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rag-source__excerpt {
  color: var(--paper-muted); font-size: 11.5px; line-height: 1.45; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rag-source__open {
  flex-shrink: 0; min-height: 34px; padding: 0 12px; border-radius: 9px;
  background: var(--acc-soft); border: 1px solid rgba(139, 92, 246, .4);
  color: var(--acc); font-family: var(--ui); font-weight: 600; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px; transition: all .18s var(--ease);
}
.rag-source__open:hover { background: rgba(139, 92, 246, .2); }
.rag-source__open svg { width: 14px; height: 14px; }

/* état d'attente (spinner + message honnête) */
.rag-waiting {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: var(--r-m);
  background: var(--glass-2); border: 1px solid var(--stroke);
  color: var(--text-2); font-size: 14px;
}
.rag-waiting__spinner {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, .22); border-top-color: var(--acc);
  animation: spin .9s linear infinite;
}
.rag-waiting__sub { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* message d'erreur inline (503/504…) dans le fil */
.rag-error {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: var(--r-m);
  background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .28);
  color: var(--text); font-size: 13.5px; line-height: 1.5;
}
.rag-error__icon { flex-shrink: 0; color: var(--err); margin-top: 1px; }
.rag-error__icon svg { width: 19px; height: 19px; }
.rag-error b { color: var(--err); }

/* ───────────── zone de saisie ───────────── */
.rag-composer {
  flex-shrink: 0; display: flex; gap: 10px; align-items: flex-end;
  margin: 8px 22px 0; padding-top: 12px;
  border-top: 1px solid var(--stroke);
}
.rag-composer textarea {
  flex: 1; min-height: 50px; max-height: 160px; padding: 13px 15px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--stroke); border-radius: 14px;
  color: var(--text); font-family: var(--ui); font-size: 14.5px; line-height: 1.45;
  resize: none;
}
.rag-composer textarea:focus { border-color: var(--acc); outline: none; }
.rag-send {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-acc); border: 0; color: #fff;
  box-shadow: var(--shadow-acc); transition: all .2s var(--ease);
}
.rag-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.rag-send:active:not(:disabled) { transform: translateY(0) scale(.96); }
.rag-send:disabled { opacity: .45; box-shadow: none; cursor: default; }
.rag-send svg { width: 21px; height: 21px; }

/* ───────────── pied de modale (état service + livres indexés) ───────────── */
.rag-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 22px 0; padding: 12px 0 4px;
  border-top: 1px solid var(--stroke);
  font-size: 12.5px; color: var(--text-3);
}
.rag-health {
  display: inline-flex; align-items: center; gap: 8px;
}
.rag-health__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-3); box-shadow: 0 0 0 3px transparent;
  transition: all .25s var(--ease);
}
.rag-health--ok .rag-health__dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
.rag-health--down .rag-health__dot { background: var(--err); box-shadow: 0 0 0 3px rgba(248, 113, 113, .16); }
.rag-health--wait .rag-health__dot { background: var(--warn); animation: ragPulse 1.1s ease-in-out infinite; }
@keyframes ragPulse { 50% { opacity: .35; } }
.rag-foot__books {
  margin-left: auto; min-height: 40px; padding: 0 13px; border-radius: 10px;
  color: var(--text-2); font-weight: 600; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all .18s var(--ease);
}
.rag-foot__books:hover { color: var(--text); background: var(--glass-1); }
.rag-foot__books svg { width: 15px; height: 15px; }

/* ───────────── sous-vue « livres indexés » ───────────── */
.rag-idxview { display: flex; flex-direction: column; min-height: 0; }
.rag-idxview__head {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 22px 8px;
}
.rag-idxview__back {
  min-height: 40px; padding: 0 13px 0 10px; border-radius: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass-1); border: 1px solid var(--stroke); color: var(--text-2);
  font-weight: 600; font-size: 13px; transition: all .18s var(--ease);
}
.rag-idxview__back:hover { color: var(--text); border-color: var(--stroke-lit); }
.rag-idxview__back svg { width: 16px; height: 16px; }
.rag-idxview__title { font-family: var(--display); font-size: 17px; font-weight: 600; }
.rag-idxview__list {
  flex: 1; overflow-y: auto; scrollbar-width: thin;
  margin: 4px 0; padding: 4px 22px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.rag-idxbook {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-m);
  background: var(--glass-1); border: 1px solid var(--stroke);
}
.rag-idxbook__ok {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(52, 211, 153, .14); color: var(--ok);
}
.rag-idxbook__ok svg { width: 16px; height: 16px; }
.rag-idxbook__title {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rag-idxview__index {
  margin: 4px 22px 8px; align-self: flex-start;
}

/* ───────────── responsive ───────────── */
@media (max-width: 640px) {
  .rag-modal { max-height: 92vh; }
  .rag-scope, .rag-suggests, .rag-thread, .rag-composer,
  .rag-foot, .rag-idxview__head, .rag-idxview__list, .rag-idxview__index { margin-left: 14px; margin-right: 14px; }
  .rag-thread { padding-left: 14px; padding-right: 14px; }
  .rag-bubble-q { max-width: 92%; }
  .rag-foot { gap: 8px; }
  .rag-foot__books { margin-left: 0; }
}