/*
================================================================================
  ◎ CHROMATIC DESIGN SYSTEM v1.8 — GLASS CONVERSATION COMPONENT
  Fichier : /opt/cortex/app/css/components/conversation.css
  Sémantique : Boîtiers de discussion asymétriques & Flux anti-déformation
  Architecture : Sceau de dimensions verrouillées, scrolling organique étanche
================================================================================
*/

:root {
  --glass-bubble-prospect: oklch(1 0 0 / 0.55);
  --glass-bubble-agent: oklch(0.48 0.12 75 / 0.08);
}

/* 
   Verrouillage dimensionnel absolu de la zone de défilement.
   La hauteur de 260px garantit que la carte ne s'allonge ni ne se contracte jamais.
*/
.bubble-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-z1);
  height: 260px; 
  overflow-y: scroll;
  scroll-behavior: smooth;
  padding: 0.2rem;
  contain: layout style;
  
  /* Masquage des barres de défilement pour conserver l'aspect d'ébénisterie */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bubble-stream::-webkit-scrollbar {
  display: none;
}

.bubble {
  padding: 0.85rem 1.25rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 88%;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInSpectral var(--duration-z2) forwards cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.02);
  word-wrap: break-word;
}

/* Bulle du Prospect (Réfraction de Verre Pur) */
.bubble.prospect {
  background-color: var(--glass-bubble-prospect);
  color: var(--text-primary);
  border: 1px solid oklch(0.20 0.03 70 / 0.08);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Bulle de l'Agent (Réfraction de Verre Ambré) */
.bubble.agent {
  background-color: var(--glass-bubble-agent);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Indicateur de saisie dynamique (Bouncing Dots) */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.85rem 1.25rem;
  background-color: var(--glass-bubble-agent);
  border: 1px solid var(--border-hover);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  width: fit-content;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.typing-dot {
  width: 6px;
  height: 6px;
  background-color: var(--gold-prime);
  border-radius: 50%;
  animation: typingBounce var(--duration-z1) infinite ease-in-out;
}

.typing-dot:nth-child(2) {
  animation-delay: calc(var(--duration-z1) / 4);
}

.typing-dot:nth-child(3) {
  animation-delay: calc(var(--duration-z1) / 2);
}

@keyframes typingBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes fadeInSpectral {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
================================================================================
  ◎ FENÊTRE DE CONVERSATION COGNITIVE (namespace .cc-) — extension réutilisable
  Composant premium piloté par app/js/conversation.js. N'ALTÈRE PAS les classes
  .bubble / .typing-* historiques (section POC index.html) : il les ÉLÈVE en
  réutilisant le même langage de verre (--glass-bubble-*) et le rythme spectral
  (--duration-z*, --space-z*) pour une parfaite continuité graphique.
================================================================================
*/

/* ── COQUILLE DE LA FENÊTRE ──────────────────────────────────────────────── */
.cc-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow:
    0 1px 1px oklch(1 0 0 / 0.6) inset,
    0 24px 60px oklch(0.20 0.03 70 / 0.08);
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}

/* ── EN-TÊTE : identité agent + statut respirant ─────────────────────────── */
.cc-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-z1) 1.4rem;
  border-bottom: 1px solid var(--border);
  background-color: oklch(1 0 0 / 0.35);
}

.cc-head-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold-prime);
  background-color: var(--gold-dim);
  border: 1px solid var(--border-hover);
}
.cc-head-avatar svg { width: 18px; height: 18px; }

.cc-head-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cc-head-name { font-weight: 700; color: var(--text-primary); font-size: 0.92rem; }
.cc-head-sub { font-size: 0.74rem; color: var(--text-muted); }

.cc-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--forge-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background-color: var(--forge-green);
  box-shadow: 0 0 8px var(--forge-green);
  animation: pulseSpectral var(--duration-z1) infinite ease-in-out;
}

/* ── FLUX DE MESSAGES (canal étanche, hauteur réservée, scroll interne) ───── */
.cc-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-z1);
  height: 340px;
  padding: var(--space-z2) 1.4rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  contain: layout style;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cc-flow::-webkit-scrollbar { display: none; }

/* ── BULLES (même verre que .bubble, élevé) ──────────────────────────────── */
.cc-bubble {
  position: relative;
  max-width: 84%;
  padding: 0.85rem 1.2rem;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  word-wrap: break-word;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInSpectral var(--duration-z2) forwards cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px oklch(0.20 0.03 70 / 0.03);
}

.cc-bubble.cc--prospect {
  align-self: flex-start;
  background-color: var(--glass-bubble-prospect);
  color: var(--text-primary);
  border: 1px solid oklch(0.20 0.03 70 / 0.08);
  border-bottom-left-radius: 5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cc-bubble.cc--agent {
  align-self: flex-end;
  background-color: var(--glass-bubble-agent);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
  border-bottom-right-radius: 5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Caret de frappe — accompagne le dactylo puis disparaît */
.cc-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background-color: var(--gold-prime);
  animation: cc-caret-blink calc(var(--duration-z1) * 1.5) step-end infinite;
}

/* ── CAPSULE DE RÉFLEXION (le cœur : cognition visible) ───────────────────── */
.cc-think {
  position: relative;
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 84%;
  padding: 0.7rem 1.1rem;
  border-radius: 18px;
  border-bottom-right-radius: 5px;
  background-color: var(--glass-bubble-agent);
  border: 1px solid var(--border-hover);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInSpectral var(--duration-z2) forwards cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
/* Halo spectral qui respire derrière la capsule */
.cc-think::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 50%, var(--gold-glow), transparent 60%);
  opacity: 0.5;
  animation: cc-aura-pulse calc(var(--duration-z1) * 2) ease-in-out infinite;
  pointer-events: none;
}
.cc-think.is-leaving {
  animation: cc-capsule-out var(--duration-z3) forwards cubic-bezier(0.4, 0, 1, 1);
}

/* Onde SVG non-périodique */
.cc-think-wave {
  position: relative;
  width: 30px; height: 14px;
  flex-shrink: 0;
  color: var(--gold-prime);
}
.cc-think-wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 10 8;
  animation: cc-wave-flow calc(var(--duration-z1) * 2.4) linear infinite;
}

/* Micro-libellé de raisonnement (crossfade piloté par JS) */
.cc-think-label {
  position: relative;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
  transition: opacity var(--duration-z3) ease;
}
.cc-think-label.is-swapping { opacity: 0; }

/* ── BARRE VERDICT (intention · urgence · score · chaleur) ────────────────── */
.cc-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: var(--space-z1) 1.4rem;
  border-top: 1px solid var(--border);
  background-color: oklch(1 0 0 / 0.35);
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity var(--duration-z2) ease,
    max-height var(--duration-z2) ease,
    padding var(--duration-z2) ease;
}
.cc-verdict.is-visible { opacity: 1; max-height: 120px; }
.cc-verdict-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.cc-verdict-item strong { color: var(--text-primary); font-weight: 700; }

.cc-heat {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--heat-color, var(--text-primary));
  background-color: color-mix(in oklab, var(--heat-color, var(--gold-prime)) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--heat-color, var(--gold-prime)) 30%, transparent);
}
.cc-heat::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background-color: var(--heat-color, var(--gold-prime));
}
.cc-heat[data-level="FROID"]   { --heat-color: oklch(0.55 0.11 240); }
.cc-heat[data-level="TIÈDE"]   { --heat-color: oklch(0.58 0.12 75); }
.cc-heat[data-level="CHAUD"]   { --heat-color: oklch(0.55 0.16 47); }
.cc-heat[data-level="BRÛLANT"] { --heat-color: oklch(0.52 0.19 25); }

/* ── KEYFRAMES (namespace cc-) ───────────────────────────────────────────── */
@keyframes cc-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cc-aura-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50%      { opacity: 0.6;  transform: scale(1.04); }
}
@keyframes cc-wave-flow { to { stroke-dashoffset: -36; } }
@keyframes cc-capsule-out {
  to { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .cc-flow { height: 300px; padding: var(--space-z1) 1rem; }
  .cc-head, .cc-verdict { padding-inline: 1rem; }
  .cc-bubble, .cc-think { max-width: 90%; }
}

/* ── ACCESSIBILITÉ : mouvement réduit ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cc-bubble, .cc-think { animation: none; opacity: 1; transform: none; }
  .cc-status::before,
  .cc-think::before,
  .cc-think-wave path,
  .cc-caret { animation: none; }
  .cc-think::before { opacity: 0.4; }
  .cc-flow { scroll-behavior: auto; }
}