/* ECL-55 — l'assistant écl[AI]re : la bulle et son panneau.
 *
 * Rien que des jetons du design system (dashboard.css) : ni couleur en dur, ni
 * `!important`, ni jaune de la marque — il est réservé au [AI] du logo. Le thème
 * sombre suit tout seul, puisque tout passe par les jetons.
 *
 * La bulle se pose SOUS le panneau du tuteur de module (z-index 30) : quand
 * les deux sont ouverts sur un module, c'est le tuteur, plus précis, qui est
 * devant.
 */

/* `display` explicite l'emporte sur le `hidden` de la feuille du navigateur :
 * sans ces deux lignes, la bulle « cachée » resterait visible sur l'écran de
 * connexion, et le panneau refermé ne se refermerait pas. */
.assistant[hidden],
.assistant-panel[hidden] { display: none; }

.assistant {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  /* Le conteneur ne PREND pas le clic : seuls le bouton et le panneau le
   * prennent. Sans ça, la bande vide au-dessus du bouton (et, sous 480 px,
   * toute la largeur) volerait les taps de la page — la Quest au doigt
   * n'arrivait plus à valider son choix. */
  pointer-events: none;
}

.assistant-fab,
.assistant-panel { pointer-events: auto; }

/* ------------------------------------------------------------- le bouton */

.assistant-fab {
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: var(--space-3) var(--space-5);
}

/* REPLIÉE, pas absente (la Quest) : le bouton s'efface jusqu'à ce qu'on le
 * regarde. Il reste à un clic, il ne mange plus la partie. */
.assistant[data-folded='true'] .assistant-fab {
  opacity: 0.45;
  padding: var(--space-2) var(--space-4);
  transition: opacity 120ms ease-in;
}

.assistant[data-folded='true'] .assistant-fab:hover,
.assistant[data-folded='true'] .assistant-fab:focus-visible {
  opacity: 1;
}

/* -------------------------------------------------------------- le panneau */

.assistant-panel {
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - var(--space-4) * 2));
  max-height: min(640px, calc(100vh - var(--space-6) * 2));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.assistant-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}

.assistant-title {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.assistant-lead {
  grid-column: 1;
  margin: 0;
}

.assistant-close { grid-column: 2; grid-row: 1 / span 2; }

.assistant-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow-y: auto;
}

/* ------------------------------------------------------------------ le fil */

.assistant-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.assistant-turn {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assistant-bubble {
  border-radius: var(--radius);
  padding: var(--space-3);
}

.assistant-asked {
  align-self: flex-end;
  max-width: 90%;
  background: var(--primary-soft);
}

.assistant-said {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}

.assistant-text {
  margin: 0;
  /* La réponse est du TEXTE : les retours à la ligne du modèle se voient. */
  white-space: pre-wrap;
}

.assistant-source,
.assistant-offtopic {
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
}

.assistant-source-label {
  color: var(--text-muted);
  margin-right: var(--space-1);
}

/* La citation est un BOUTON : elle ouvre le module. Elle en a l'air. */
.assistant-source-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

.assistant-source-link:hover { color: var(--primary-hover); }

/* Un état, pas une décoration : la réponse ne tient sur rien. */
.assistant-offtopic {
  color: var(--warning);
}

.assistant-mentions,
.assistant-cap {
  margin: 0;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- la saisie */

.assistant-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.assistant-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.assistant-input { width: 100%; resize: vertical; }

/* ------------------------------------------------------------------ 390 px */

@media (max-width: 480px) {
  .assistant {
    right: var(--space-2);
    bottom: var(--space-2);
    left: var(--space-2);
    align-items: stretch;
  }

  .assistant-fab { align-self: flex-end; }

  .assistant-panel {
    width: 100%;
    max-height: calc(100vh - var(--space-6) * 2);
  }
}

/* Une invitation ne dépend pas du mouvement : la transition tombe, l'état
 * reste (le bouton replié redevient net au survol et au focus). */
@media (prefers-reduced-motion: reduce) {
  .assistant[data-folded='true'] .assistant-fab { transition: none; }
}