/* =============================================================================
   chat.css - Skin de la zone Chat LLM émulé (Prompt 4)
   Niveau de lecture 1/3 : grand public. Rend le fil de conversation piloté par
   le bus de engine.js. SKINNABLE par persona : seules l'accentuation, l'avatar
   et le nom changent : la structure et le moteur restent identiques.

   Le persona pose deux variables sur #chat (via chat.js) :
     --chat-accent     : couleur d'accent (bulle user, avatar, curseur)
     --chat-accent-ink : couleur de texte lisible sur l'accent
   + un attribut data-persona pour les skins riches (dégradé Gemini, etc.).
   Repli : géré par .chat-collapsed sur #app (design-system / app.js).
   ========================================================================== */

/* La fenêtre agent adopte un skin CLAIR et épuré (façon Google Gemini) : fond
   blanc, barre sobre, champ de recherche arrondi. Elle reste une « fenêtre »
   distincte du site marchand grâce à son chrome (pastilles, ombre, coins
   arrondis) et à l'espace qui l'en sépare. Le persona ne change QUE l'accent
   + l'avatar ; aucune redéfinition de palette n'est nécessaire (on hérite des
   tokens clairs du design-system). */
#chat {
  --chat-accent: var(--rs-main);
  --chat-accent-ink: #fff;
  --chat-accent-soft: var(--rs-main-100);

  background: var(--rs-surface);   /* blanc, épuré */
  color: var(--rs-ink);
}

/* Barre de titre : sobre, fondue dans la fenêtre claire */
#chat .chat-bar { background: var(--rs-surface); }

/* Composer (bibliothèque de prompts) ancré en bas, sur fond clair */
#chat #prompt-library { background: var(--rs-surface); border-top-color: var(--rs-line); }

/* Titre d'accueil : explique où l'on se trouve (LLM émulé) et invite à lancer
   une démo. Remplacé par la conversation dès qu'un scénario démarre. */
.chat-intro {
  margin: 0; padding: var(--rs-sp-2) var(--rs-sp-2) var(--rs-sp-3);
  font-size: var(--rs-fs-md); line-height: 1.5; font-weight: 600;
  color: var(--rs-ink-soft); text-align: center; max-width: 52ch;
  margin-inline: auto;
}

/* --- Barre d'identité (avatar + nom de persona + mention honnêteté) --------- */
.chat-bar__avatar { width: 26px; height: 26px; font-size: 12px; }
.chat-bar__identity { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.chat-bar__title { font-weight: 700; font-size: var(--rs-fs-sm); color: var(--rs-secondary); }
.chat-bar__persona { font-size: var(--rs-fs-xs); color: var(--rs-muted); }

/* --- Avatar générique (barre + bulles agent) ------------------------------- */
.chat-avatar {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--chat-accent);
  color: var(--chat-accent-ink);
  font-weight: 800; font-size: 13px; line-height: 1;
  box-shadow: var(--rs-shadow-sm);
}
/* Skins riches par persona : avatar en dégradé (icône NEUTRE, jamais le logo
   officiel, marque évoquée par le nom + une initiale). Seul le SKIN change ;
   le moteur reste identique (cf. setPersona dans chat.js). */
#chat[data-persona="gemini"]  .chat-avatar { background: linear-gradient(135deg, #4285f4, #9b72f2); }
#chat[data-persona="claude"]  .chat-avatar { background: linear-gradient(135deg, #d97757, #b85c3c); }
#chat[data-persona="chatgpt"] .chat-avatar { background: linear-gradient(135deg, #10a37f, #0d8268); }

/* --- Fil de conversation ---------------------------------------------------- */
.chat-log {
  display: flex; flex-direction: column; gap: var(--rs-sp-3);
  scroll-behavior: smooth;
}

.chat-msg {
  max-width: 88%;
  animation: chat-msg-in var(--rs-dur) var(--rs-ease);
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.chat-msg__bubble {
  padding: 9px 13px;
  border-radius: var(--rs-radius-lg);
  font-size: var(--rs-fs-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Bulle utilisateur (droite, accent persona) */
.chat-msg--user { align-self: flex-end; }
.chat-msg--user .chat-msg__bubble {
  background: var(--chat-accent);
  color: var(--chat-accent-ink);
  border-bottom-right-radius: var(--rs-radius-sm);
}

/* Bulle agent (gauche, avatar) */
.chat-msg--agent {
  align-self: flex-start;
  display: flex; gap: var(--rs-sp-2); align-items: flex-end;
}
.chat-msg--agent .chat-msg__bubble {
  background: var(--rs-surface-2);
  color: var(--rs-ink);
  border-bottom-left-radius: var(--rs-radius-sm);
}

/* Bulle raisonnement (atténuée / italique, montre la sélection du tool) */
.chat-msg--thinking {
  align-self: flex-start;
  display: flex; gap: var(--rs-sp-2); align-items: flex-start;
  opacity: 0.92;
}
.chat-msg--thinking .chat-msg__bubble {
  background: transparent;
  border: 1px dashed var(--rs-line);
  color: var(--rs-ink-soft);
  font-style: italic;
  display: flex; flex-direction: column; gap: 3px;
}
.chat-think-label {
  font-style: normal; font-weight: 700; font-size: var(--rs-fs-xs);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--rs-muted);
  display: inline-flex; align-items: center; gap: 5px;
}

/* Chip d'appel de tool (cliquable → met l'inspecteur au premier plan) */
.chat-tool-chip {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-radius-pill);
  background: var(--rs-surface);
  box-shadow: var(--rs-shadow-sm);
  font-size: var(--rs-fs-xs); font-weight: 600; color: var(--rs-ink-soft);
  cursor: pointer;
  transition: transform var(--rs-dur-fast) var(--rs-ease),
              box-shadow var(--rs-dur-fast) var(--rs-ease),
              border-color var(--rs-dur-fast) var(--rs-ease);
}
.chat-tool-chip:hover { transform: translateY(-1px); box-shadow: var(--rs-shadow); border-color: var(--rs-main); }
.chat-tool-chip__icon { font-size: 0.95em; }
.chat-tool-chip__label { color: var(--rs-muted); }
.chat-tool-chip__name {
  font-family: var(--rs-mono); font-weight: 700; color: var(--rs-secondary);
  background: var(--rs-surface-2); padding: 1px 7px; border-radius: var(--rs-radius-sm);
}

/* Curseur de streaming (réponse agent qui s'écrit) */
.chat-cursor {
  display: inline-block;
  width: 6px; height: 1.05em;
  vertical-align: text-bottom;
  margin-left: 1px;
  background: var(--chat-accent);
  border-radius: 1px;
  animation: chat-blink 1s steps(2, start) infinite;
}
@keyframes chat-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Repli : la barre reste visible, le fil disparaît (cf. design-system) */
#app.chat-collapsed .chat-tool-chip,
#app.chat-collapsed .chat-cursor { display: none; }

@media (prefers-reduced-motion: reduce) {
  .chat-cursor { animation: none; }
}