/*
 * Message Story — direction artistique « Capture d'écran », v3.
 *
 * Le langage graphique vient du téléphone : notifications, accusés de lecture,
 * pastilles, bulles. Fond papier, encre neutre, un seul accent : le bleu d'un
 * message envoyé. Titres en Newsreader (serif de presse, droit et solide), texte en
 * Geist, métadonnées en Geist Mono. Ton « lecteur », pour tout le monde.
 * Les écrans montrés sont de vrais rendus de l'application.
 */

:root {
  /* Couleurs */
  --paper: #f5f2ec;        /* papier : fond principal */
  --paper-2: #ece8e0;
  --ink: #121417;          /* encre : texte, sections sombres */
  --ink-2: #1b1e23;
  --ink-3: #272b31;
  --grey: #666a72;
  --grey-light: #a2a6ad;
  --line: #dfdad1;
  --line-dark: #2a2e35;
  --accent: #1d56f0;       /* bleu message : l'unique accent (5:1 sur le papier) */
  --accent-dark: #7fa6ff;  /* bleu clair, sur fond encre */
  --blue: var(--accent);   /* bulle envoyée */
  --bubble-in: #e8e4dc;
  /* Anciens noms, gardés pour les pages existantes */
  --red: var(--accent);
  --red-ink: var(--accent);

  /* Typographie */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Rythme */
  --radius: 18px;
  --radius-s: 10px;
  --gutter: 16px;
}

/* ---------- Titres ---------- */
.ms-display {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
/* Le passage qui fait basculer le titre : même lettre, en bleu message. */
.ms-display em, .ms-mark {
  font-style: normal;
  color: var(--accent);
}
.ms-dark .ms-display em, .ms-dark .ms-mark { color: var(--accent-dark); }
.ms-label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Pastille (compteur rouge) ---------- */
.ms-badge {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: var(--red);
  color: #fff;
  font: 700 14px/1 var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Notification d'écran verrouillé ---------- */
.ms-notif {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 4px 12px;
  align-items: start;
  padding: 12px 14px 13px;
  border-radius: 20px;
  background: rgba(250, 248, 244, .86);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -18px rgba(0, 0, 0, .45);
  color: var(--ink);
  font-family: var(--text);
}
.ms-notif img, .ms-notif .ms-notif-icon { grid-row: span 2; width: 38px; height: 38px; border-radius: 9px; }
.ms-notif-app { font: 500 11.5px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.ms-notif-time { font: 400 12px/1.2 var(--text); color: var(--grey); }
.ms-notif-body { grid-column: 2 / 4; font-size: 15px; line-height: 1.3; }
.ms-notif-body b { font-weight: 700; display: block; }

/* ---------- Bulles ---------- */
.ms-bubble {
  display: inline-block;
  max-width: 30ch;
  padding: 9px 14px;
  border-radius: 20px;
  font: 400 16px/1.3 var(--text);
}
.ms-bubble.in { background: var(--bubble-in); color: var(--ink); border-bottom-left-radius: 6px; }
.ms-bubble.out { background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }

/* ---------- Accusé de lecture / horodatage ---------- */
.ms-receipt { font: 400 12px/1 var(--mono); color: var(--grey); letter-spacing: .02em; }
.ms-receipt b { font-weight: 500; color: var(--ink); }

/* ---------- Indicateur « en train d'écrire » ---------- */
.ms-typing { display: inline-flex; gap: 5px; padding: 12px 15px; border-radius: 20px; background: var(--bubble-in); }
.ms-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); animation: ms-typing 1.2s infinite; }
.ms-typing i:nth-child(2) { animation-delay: .15s; }
.ms-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ms-typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ---------- Tampon ---------- */
.ms-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 6px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ms-stamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* ---------- Écran (vrai rendu de l'application) ---------- */
.ms-screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 1138;
  border-radius: 28px;
  border: 7px solid #0d0d0d;
  background: #0d0d0d;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .ms-typing i { animation: none; opacity: .6; }
}