/*
 * Corps du journal (§2.4, §8).
 * Fond --color-bg-primary. Zone scrollable + fade-out CSS 48px en bas.
 * Apparition WebSocket : fade-in par paragraphe (opacity 0->1, 400ms ease).
 * Separateurs de scenes + metadonnees --font-mono --color-cyan.
 */
/* Conteneur du flux scrollable (au-dessus du prompteur sticky). */
.journal-stream {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.journal-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  /* Espace bas pour que le fade-out ne masque pas le dernier paragraphe. */
  padding-bottom: var(--journal-fadeout-height);
}

/* Fade-out CSS en bas de la zone scrollable (transparent -> bg-primary, 48px). */
.journal-stream::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--journal-fadeout-height);
  background: linear-gradient(to bottom, rgba(28, 32, 30, 0), var(--color-bg-primary));
  pointer-events: none;
}

/* Entete de scene : metadonnees (lieu, date fictive). */
.scene {
  margin-bottom: var(--space-6);
}

.scene__meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-meta);
  color: var(--color-cyan);
  margin-bottom: var(--space-3);
}

/* Separateur de scenes : ligne 1px + label mono centre muted. */
.scene__separator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
  color: var(--color-ink-muted);
}
.scene__separator::before,
.scene__separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-bg-elevated);
}
.scene__separator-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-meta);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* Paragraphe narratif : fade-in a l'arrivee WebSocket. */
.journal-paragraph {
  color: var(--color-ink-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-narrative);
  line-height: var(--line-height-narrative);
  margin-bottom: var(--space-4);
  opacity: 1;
}

/* Etat initial d'apparition : opacity 0 -> 1 sur 400ms ease. */
.journal-paragraph--enter {
  opacity: 0;
}
.journal-paragraph--visible {
  opacity: 1;
  transition: var(--transition-fade);
}

/* Entrees d'historique (actions, messages, jets de des). */
.journal-entry {
  color: var(--color-ink-secondary);
  font-size: var(--font-size-label);
  margin-bottom: var(--space-3);
}
.journal-entry__meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-meta);
  color: var(--color-cyan);
  margin-right: var(--space-2);
}