/* Rufus — banc d'essai.

   L'écran est un instrument, pas une messagerie. D'où trois partis pris :

   1. LE TEMPS EST UN AXE, pas une décoration. La conversation est posée le long
      d'une règle graduée : c'est le tempo qui est le sujet du travail (délai de
      lecture, de frappe, respiration entre deux envois), et une pile de bulles
      le rendrait invisible.
   2. LE ROSE EST RÉSERVÉ À CE QUI VIT. Une valeur en cours de mesure est rose ;
      la même valeur au repos est encre. La couleur porte donc une information,
      et si tout devenait rose elle n'en porterait plus aucune.
   3. LES ENVOIS SONT SÉPARÉS VISUELLEMENT. Une réponse en trois bouffées
      s'affiche en trois blocs. On voit du premier coup d'œil si le modèle a
      écrit une conversation ou un communiqué. */

@font-face { font-family: 'Plex'; src: url('../fonts/plex-sans-400.woff2') format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('../fonts/plex-sans-500.woff2') format('woff2');
  font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('../fonts/plex-sans-600.woff2') format('woff2');
  font-weight: 600; font-display: swap; }
@font-face { font-family: 'PlexMono'; src: url('../fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap; }
@font-face { font-family: 'PlexMono'; src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-display: swap; }
@font-face { font-family: 'PlexMono'; src: url('../fonts/plex-mono-600.woff2') format('woff2');
  font-weight: 600; font-display: swap; }
@font-face { font-family: 'PlexCond'; src: url('../fonts/plex-cond-600.woff2') format('woff2');
  font-weight: 600; font-display: swap; }

:root {
  --nuit: #101725;
  --nuit-2: #46536E;
  --nuit-3: #5A6580;
  --brume: #E7EBF2;
  --voile: #FFFFFF;
  --rail: #C6CEDD;
  --rail-2: #DFE4EE;
  --vif: #C8145C;
  --vif-pale: #FCEAF1;
  --alerte: #A62018;
  --calme: #10685C;

  --sans: 'Plex', ui-sans-serif, system-ui, sans-serif;
  --mono: 'PlexMono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --cond: 'PlexCond', 'Plex', ui-sans-serif, sans-serif;

  --gauche: 15.5rem;
  --droite: 24rem;
  --regle: 4.25rem;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--brume); color: var(--nuit);
  font: 400 0.875rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vif); outline-offset: 2px; border-radius: 2px; }

/* --------------------------------------------------------- vocabulaire --- */

/* L'étiquette de rail : condensée, capitales, très espacée. C'est le mot du
   panneau d'instrument — il nomme une mesure, il ne se lit pas comme du texte. */
.rail {
  font: 600 0.625rem/1 var(--cond);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--nuit-3);
}
.num { font: 500 0.75rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.vif { color: var(--vif); }
.faible { color: var(--nuit-3); }

.bouton {
  border: 1px solid var(--rail); background: var(--voile); color: var(--nuit);
  border-radius: 3px; padding: 0.4rem 0.7rem; cursor: pointer;
  font: 500 0.8125rem/1.2 var(--sans); transition: border-color .12s, background .12s;
}
.bouton:hover { border-color: var(--nuit-2); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton.primaire { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.bouton.primaire:hover { background: #1E2942; }
.bouton.danger { color: var(--alerte); border-color: #E7C4C1; }
.bouton.danger:hover { background: #FCF0EF; border-color: var(--alerte); }
.bouton.nu { border-color: transparent; background: transparent; padding: 0.3rem 0.4rem; }
.bouton.nu:hover { background: var(--rail-2); border-color: transparent; }

.champ {
  width: 100%; border: 1px solid var(--rail); border-radius: 3px;
  background: var(--voile); padding: 0.45rem 0.6rem;
}
.champ:focus { border-color: var(--nuit-2); outline: none; }
label.bloc { display: block; margin-bottom: 0.9rem; }
label.bloc > .rail { display: block; margin-bottom: 0.3rem; }

/* ------------------------------------------------------------- charpente --- */

#banc {
  display: grid; height: 100%;
  grid-template-columns: var(--gauche) minmax(0, 1fr) var(--droite);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'tete tete tete' 'chats fil consigne' 'pied pied pied';
}

/* ---- en-tête ---- */
#tete {
  grid-area: tete; display: flex; align-items: center; gap: 1rem;
  padding: 0 0.9rem; height: 3.25rem;
  background: var(--voile); border-bottom: 1px solid var(--rail);
}
.marque { font: 600 0.9375rem/1 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; }
.marque span { color: var(--vif); }
#tete .titre {
  font: 600 0.9375rem/1.2 var(--sans); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jeton {
  font: 500 0.6875rem/1 var(--mono); padding: 0.28rem 0.45rem;
  border: 1px solid var(--rail); border-radius: 3px; color: var(--nuit-2);
  white-space: nowrap;
}
#tete .pousse { margin-left: auto; }
#tete { overflow: hidden; }

/* ---- colonne des chats ---- */
#chats {
  grid-area: chats; background: var(--voile); border-right: 1px solid var(--rail);
  display: flex; flex-direction: column; min-height: 0;
}
.entete-colonne {
  display: flex; align-items: center; gap: .5rem;
  padding: 0.7rem 0.9rem 0.55rem; border-bottom: 1px solid var(--rail-2);
}
.entete-colonne .rail { flex: 1; }
#liste-chats { flex: 1; overflow-y: auto; padding: 0.35rem; }

.puce {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  padding: 0.5rem 0.55rem; margin-bottom: 0.15rem;
}
.puce:hover { background: var(--brume); }
.puce[aria-current='true'] { background: var(--vif-pale); border-color: #F0C3D5; }
.puce .nom {
  font: 500 0.8125rem/1.3 var(--sans); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.puce .mesure {
  display: flex; gap: 0.45rem; margin-top: 0.2rem;
  font: 400 0.6875rem/1 var(--mono); color: var(--nuit-3);
  font-variant-numeric: tabular-nums;
}
.puce[aria-current='true'] .mesure { color: #9C3567; }
.puce .modele {
  font: 400 0.625rem/1 var(--mono); color: var(--nuit-3);
  display: block; margin-top: 0.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- le fil : la règle graduée ---- */
#fil { grid-area: fil; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#tracé { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem 2rem; position: relative; }

/* la règle elle-même : un filet continu derrière tous les messages */
#tracé::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(1.4rem + var(--regle)); width: 1px; background: var(--rail);
}

.tour { position: relative; padding-left: calc(var(--regle) + 1rem); margin-bottom: 1.15rem; }
/* la graduation : un trait court qui coupe la règle à la hauteur du message */
.tour::before {
  content: ''; position: absolute; left: calc(var(--regle) - 0.375rem); top: 0.5rem;
  width: 0.75rem; height: 1px; background: var(--rail);
}
.tour .horodate {
  position: absolute; left: 0; top: 0.1rem; width: calc(var(--regle) - 0.75rem);
  text-align: right; font: 400 0.6875rem/1.4 var(--mono); color: var(--nuit-3);
  font-variant-numeric: tabular-nums;
}
/* le délai depuis le message précédent : la respiration de la conversation,
   posée sur la règle là où elle a eu lieu */
.tour .ecart {
  display: block; font: 400 0.625rem/1.3 var(--mono); color: var(--nuit-3);
}
.tour .qui { font: 600 0.6875rem/1 var(--cond); letter-spacing: .12em;
  text-transform: uppercase; color: var(--nuit-3); margin-bottom: 0.3rem; }
.tour.moi .qui { color: var(--nuit-2); }
.tour.ia .qui { color: var(--vif); }
.tour.ia::before { background: var(--vif); }

.bulle {
  background: var(--voile); border: 1px solid var(--rail-2); border-radius: 3px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.28rem; white-space: pre-wrap;
  overflow-wrap: anywhere; max-width: 44rem;
}
.tour.moi .bulle { background: transparent; border-style: dashed; border-color: var(--rail); }
.bulle:last-of-type { margin-bottom: 0; }
/* le rang d'envoi : dit « ceci est le 2e message d'affilée », pas un ornement */
.bulle[data-rang]::after {
  content: attr(data-rang); float: right; margin: 0 0 0 .6rem;
  font: 500 0.625rem/1.6 var(--mono); color: var(--nuit-3);
}

.echec {
  border-color: #E7C4C1; background: #FCF3F2; color: var(--alerte);
  border-radius: 3px; padding: 0.5rem 0.7rem; max-width: 44rem;
  font-size: 0.8125rem;
}

/* ---- le ruban de mesure ---- */
/* Sous chaque réponse : les chiffres de CETTE réponse. Pendant qu'elle
   s'écrit, ils bougent et passent au rose ; une fois posée, ils retournent à
   l'encre. C'est la signature de l'écran. */
.ruban {
  display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 0.4rem;
  border: 1px solid var(--rail-2); border-radius: 3px; background: var(--voile);
  max-width: 44rem; cursor: pointer; overflow: hidden;
}
.ruban:hover { border-color: var(--rail); }
.ruban.direct { border-color: #F0C3D5; background: var(--vif-pale); }
.ruban .cellule {
  display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem 0.6rem;
  border-right: 1px solid var(--rail-2); min-width: 4.2rem;
}
.ruban.direct .cellule { border-right-color: #F0C3D5; }
.ruban .cellule:last-child { border-right: none; }
.ruban .cellule .rail { font-size: 0.5625rem; }
.ruban .cellule .num { color: var(--nuit); }
.ruban.direct .cellule .num { color: var(--vif); }
.ruban .cellule.alerte .num { color: var(--alerte); }

/* le détail brut, replié sous le ruban */
.brut {
  margin-top: 0.3rem; max-width: 44rem; border: 1px solid var(--rail-2);
  border-radius: 3px; background: var(--voile); overflow: hidden;
}
.brut .onglets { display: flex; border-bottom: 1px solid var(--rail-2); }
.brut .onglets button {
  border: none; background: none; cursor: pointer; padding: 0.4rem 0.7rem;
  font: 600 0.625rem/1 var(--cond); letter-spacing: .12em; text-transform: uppercase;
  color: var(--nuit-3); border-bottom: 2px solid transparent;
}
.brut .onglets button[aria-selected='true'] { color: var(--nuit); border-bottom-color: var(--vif); }
.brut pre {
  margin: 0; padding: 0.6rem 0.75rem; max-height: 22rem; overflow: auto;
  font: 400 0.6875rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.brut dl { margin: 0; padding: 0.6rem 0.75rem; display: grid;
  grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; }
.brut dt { font: 600 0.625rem/1.5 var(--cond); letter-spacing: .1em;
  text-transform: uppercase; color: var(--nuit-3); }
.brut dd { margin: 0; font: 400 0.6875rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums; }

/* ---- la barre d'envoi ---- */
#envoi {
  border-top: 1px solid var(--rail); background: var(--voile);
  padding: 0.7rem 1.4rem 0.8rem;
}
#envoi .ligne { display: flex; gap: 0.6rem; align-items: flex-end; }
#texte {
  flex: 1; resize: none; min-height: 2.5rem; max-height: 11rem;
  border: 1px solid var(--rail); border-radius: 3px; padding: 0.5rem 0.65rem;
  background: var(--voile); font-family: var(--sans);
}
#texte:focus { border-color: var(--nuit-2); outline: none; }
#envoi .sous {
  display: flex; gap: 0.9rem; align-items: center; margin-top: 0.45rem;
  font: 400 0.6875rem/1 var(--mono); color: var(--nuit-3);
}

/* ---- colonne de l'instruction racine ---- */
#consigne {
  grid-area: consigne; background: var(--voile); border-left: 1px solid var(--rail);
  display: flex; flex-direction: column; min-height: 0;
}
#instruction {
  flex: 1; min-height: 8rem; resize: none; border: none; outline: none;
  padding: 0.8rem 0.9rem; background: var(--voile);
  font: 400 0.75rem/1.65 var(--mono); tab-size: 2;
}
#consigne .pied-consigne {
  border-top: 1px solid var(--rail-2); padding: 0.6rem 0.9rem;
  display: flex; align-items: center; gap: 0.6rem;
}
#consigne .pied-consigne .num { color: var(--nuit-3); }
#versions { max-height: 12rem; overflow-y: auto; border-top: 1px solid var(--rail-2); }
#versions .v {
  display: flex; align-items: baseline; gap: 0.5rem; width: 100%;
  padding: 0.4rem 0.9rem; border: none; background: none; cursor: pointer;
  text-align: left; border-bottom: 1px solid var(--rail-2);
}
#versions .v:hover { background: var(--brume); }
#versions .v .n { font: 600 0.6875rem/1 var(--mono); color: var(--vif); min-width: 1.8rem; }
#versions .v .q { flex: 1; font-size: 0.75rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--nuit-2); }
#versions .v .d { font: 400 0.625rem/1 var(--mono); color: var(--nuit-3); }

/* le panneau de mesures cumulées du chat */
#mesures { border-top: 1px solid var(--rail-2); padding: 0.65rem 0.9rem 0.8rem; }
.grille-mesures {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem 0.5rem;
  margin-top: 0.5rem;
}
.grille-mesures .m { display: flex; flex-direction: column; gap: 0.15rem; }
.grille-mesures .m .num { font-size: 0.8125rem; }
.grille-mesures .m .rail { font-size: 0.5625rem; }

/* ---- barre d'état ---- */
#pied {
  grid-area: pied; height: 1.85rem; background: var(--nuit); color: #B9C2D6;
  display: flex; align-items: center; gap: 1.1rem; padding: 0 0.9rem;
  font: 400 0.6875rem/1 var(--mono); font-variant-numeric: tabular-nums;
}
#pied .sep { width: 1px; height: 0.9rem; background: #2C3752; }
#pied b { color: #fff; font-weight: 500; }
#pied .etat { display: flex; align-items: center; gap: 0.4rem; }
#pied .diode {
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--calme);
}
#pied .diode.occupe { background: var(--vif); animation: pouls 1s ease-in-out infinite; }
#pied .diode.rompu { background: var(--alerte); }
#pied .pousse { margin-left: auto; }
/* sur fond nuit, le gris de texte secondaire tombe à 4,05 : il lui faut sa
   propre valeur, claire, au lieu d'hériter de celle des fonds blancs. */
#pied .faible { color: #B9C2D6; }
/* garde-fou : le pied porte de longues suites en chasse fixe qui ne se
   coupent pas. Sans cette ligne, c'est LUI qui fixe la largeur de la page
   et tout l'écran défile de côté. */
#pied > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pied { overflow: hidden; }
@keyframes pouls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- fenêtre des réglages ---- */
dialog {
  border: 1px solid var(--rail); border-radius: 4px; padding: 0;
  background: var(--voile); color: var(--nuit); max-width: 34rem; width: calc(100% - 2rem);
  box-shadow: 0 1.5rem 3rem rgba(16, 23, 37, .22);
}
dialog::backdrop { background: rgba(16, 23, 37, .38); }
dialog .tete-modale {
  display: flex; align-items: center; gap: .6rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--rail-2);
}
dialog .tete-modale h2 { margin: 0; font: 600 0.9375rem/1.2 var(--sans); flex: 1; }
dialog .corps { padding: 1rem; max-height: 68vh; overflow-y: auto; }
dialog .pied-modale {
  display: flex; gap: 0.5rem; align-items: center;
  padding: 0.75rem 1rem; border-top: 1px solid var(--rail-2); background: #FAFBFD;
}
dialog .pied-modale .pousse { margin-left: auto; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.aide { margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--nuit-3); }
.aide.attention { color: var(--alerte); }
fieldset.groupe {
  border: 1px solid var(--rail-2); border-radius: 3px; padding: 0.8rem;
  margin: 0 0 1rem;
}
fieldset.groupe legend { padding: 0 0.35rem; }

/* ---- la porte ---- */
#porte {
  min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem;
  background:
    linear-gradient(var(--rail-2) 1px, transparent 1px) 0 0 / 100% 2.25rem,
    var(--brume);
}
#porte .carte {
  width: min(23rem, 100%); background: var(--voile);
  border: 1px solid var(--rail); border-radius: 4px; padding: 1.6rem 1.5rem;
}
#porte h1 { margin: 0 0 0.2rem; font: 600 1.25rem/1 var(--cond);
  letter-spacing: .1em; text-transform: uppercase; }
#porte h1 span { color: var(--vif); }
#porte .sous-titre { margin: 0 0 1.4rem; color: var(--nuit-3); font-size: 0.8125rem; }
#porte .bouton { width: 100%; margin-top: 0.4rem; }
#porte .message {
  margin-top: 0.9rem; padding: 0.5rem 0.65rem; border-radius: 3px;
  background: #FCF3F2; border: 1px solid #E7C4C1; color: var(--alerte);
  font-size: 0.8125rem;
}
#porte .message:empty { display: none; }

/* ---- vide ---- */
.vide { padding: 2.5rem 1.4rem; color: var(--nuit-3); max-width: 30rem; }
.vide h3 { margin: 0 0 0.35rem; font: 600 0.9375rem/1.3 var(--sans); color: var(--nuit); }
.vide p { margin: 0 0 0.8rem; font-size: 0.8125rem; }

/* ---- écrans étroits ---- */
@media (max-width: 68rem) {
  :root { --gauche: 13rem; --droite: 19rem; }
}
@media (max-width: 54rem) {
  #banc { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0,1fr) auto;
    grid-template-areas: 'tete' 'chats' 'fil' 'pied'; }
  #chats { border-right: none; border-bottom: 1px solid var(--rail); max-height: 11rem; }
  #consigne { display: none; }
  #consigne.ouvert {
    display: flex; position: fixed; inset: 3.25rem 0 1.85rem; z-index: 20;
    border-left: none; border-top: 1px solid var(--rail);
  }
  #tracé { padding: 0.9rem 0.8rem 1.5rem; }
  #tracé::before { left: calc(0.8rem + var(--regle)); }
  /* Le bilan du banc entier et l'adresse du compte sortent du pied : sur
     420 px ils ne tiennent pas, et les chiffres du chat OUVERT priment. */
  #pied-global, #pied-compte, #jeton-version { display: none; }
  #envoi .sous .faible { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}