/* ------------------------------------------------------------------
   Feuille de styles du client web ARNrc.

   Sortie de index.html pour que le balisage reste lisible. La passerelle
   sert ce fichier comme le reste de frontend/ ; le Dockerfile copie tout
   le dossier, il n'y a donc rien à déclarer ailleurs.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Jetons du design system « nocturne ».

   La feuille de styles du design system n'était pas fournie avec la
   maquette : ces valeurs sont une reconstruction. Seul le #1d2033 de
   --color-neutral-900 provient de la maquette elle-même.
   Pour retrouver les teintes exactes, il suffit de remplacer ce bloc :
   rien d'autre dans la page n'est codé en dur.
   ------------------------------------------------------------------ */
:root {
  --color-bg: #0f111a;
  --color-surface: #171a28;
  --color-neutral-900: #1d2033;
  --color-neutral-800: #262b40;
  --color-neutral-700: #333a55;
  --color-neutral-400: #7f88a3;
  --color-neutral-300: #a3abc2;
  --color-text: #e7eaf3;

  --color-accent: #6c8cff;
  --color-accent-200: #c2ccff;
  --color-accent-300: #9fb0ff;
  --color-accent-400: #7d93ff;
  --color-accent-600: #4f68d8;
  --color-accent-700: #3c50ad;
  --color-accent-2-400: #5ec8c0;
  --color-danger: #ff7a7a;

  --font-body: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-6: 20px;
  --space-8: 28px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-md: 0 18px 40px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}

@keyframes noct-fade  { from { opacity: 0; transform: translateY(3px) } }
@keyframes noct-leave { to { opacity: 0; transform: translateX(10px) } }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font: 14px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

.mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}

/* ------------------------------------------------------- 01 Connexion */

#login {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
  background: radial-gradient(110% 70% at 8% 0%, #1d2033 0%, var(--color-bg) 62%);
}

.card {
  width: min(420px, 100%);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.rule i { width: 24px; height: 1px; background: var(--color-accent); }

.lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.lockup .mark {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
}

.card h1 { margin: 0; font-size: 32px; font-weight: 500; letter-spacing: -.01em; }

.field { margin-bottom: var(--space-4); }

.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 34%, transparent);
}

.field input {
  width: 100%;
  padding: 11px var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-sm);
  outline: none;
  font-family: var(--font-mono);
  transition: border-color .15s, box-shadow .15s;
}

.field input:focus {
  border-color: var(--color-accent-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.btn-primary {
  width: 100%;
  margin-top: var(--space-3);
  padding: 11px var(--space-6);
  background: var(--color-accent);
  color: #0b0e18;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .15s;
}

.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .5; cursor: default; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

.tag {
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
}

.tag-outline {
  border: 1px solid var(--color-neutral-800);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.tag-accent {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-accent-200);
}

.fieldnote {
  margin: var(--space-2) 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
}

/* -- remise de la clé, une seule fois */

.keyveil {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(3px);
}

.keyveil.on { display: grid; }

.keycard {
  width: min(520px, 100%);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-accent-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.keycard h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 500;
}

.keycard p { margin: 0 0 var(--space-4); font-size: 12.5px; line-height: 1.7;
             color: color-mix(in srgb, var(--color-text) 62%, transparent); }

.keycard .key {
  display: block;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: #0a0c14;
  border: 1px dashed var(--color-accent-600);
  border-radius: var(--radius-sm);
  color: var(--color-accent-200);
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: .06em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;          /* un clic sélectionne la clé entière */
}

.keycard .row2 { display: flex; gap: var(--space-3); }
.keycard .row2 button { flex: 1; }

.error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  font-size: 13px;
}

.error:empty { display: none; }

/* ----------------------------------------------- 02 Fenêtre principale */

#app { display: none; height: 100%; flex-direction: column; }
#app.on { display: flex; }

/* -- en-tête */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-neutral-800);
  font-family: var(--font-mono);
  font-size: 13px;
}

.topbar .chan { color: var(--color-accent-300); }

.topbar .topic {
  flex: 1;
  overflow: hidden;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ghost {
  padding: 3px 9px;
  background: none;
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.ghost:hover { color: var(--color-text); border-color: var(--color-neutral-700); }
.ghost.on { color: var(--color-accent-200); border-color: var(--color-accent-600); }

/* -- grille à trois colonnes */

.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) 188px;
}

/* -- colonne de gauche */

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-3);
  border-right: 1px solid var(--color-neutral-900);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.group { display: flex; flex-direction: column; gap: 2px; }

.group h4 {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 34%, transparent);
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.item:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

/* Trois niveaux de lecture, du plus lointain au plus proche : un salon qui
   existe (terne), un salon où l'on est (texte plein), celui qu'on regarde
   (fond teinté, barre d'accent). Le clic ne fait pas la même chose dans les
   deux premiers cas — l'un rejoint, l'autre bascule — autant que ça se voie. */
.item.joined { color: var(--color-text); }

.item.active {
  position: relative;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-accent-200);
  font-weight: 500;
}

/* Barre d'accent posée en absolu : elle ne décale pas le libellé, et repère la
   ligne active en vision périphérique, sans compter sur la seule couleur. */
.item.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 60%;
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
  background: var(--color-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.item .label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.item .lock { width: 11px; height: 11px; flex: none; opacity: .8; }

.item .count { font-size: 10px; color: color-mix(in srgb, var(--color-text) 34%, transparent); }
.item.joined .count { color: var(--color-accent-300); }
.item.active .count { color: var(--color-accent-200); }

.item .unread {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent-200);
  font-size: 10px;
}

.item.hint { color: color-mix(in srgb, var(--color-text) 30%, transparent); cursor: default; }

.self {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.self b { color: var(--color-text); font-weight: 500; }
#me-version { color: color-mix(in srgb, var(--color-text) 25%, transparent); }

/* -- transcript */

.center { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

#feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-700) transparent;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Les messages collent au bas du fil quand il y en a peu. C'est ce que
   faisait « justify-content: flex-end » — mais au prix du haut du fil :
   l'excédent débordait par le haut, là où aucun scrollTop ne va le
   chercher, et remonter devenait impossible. Une marge auto sur le premier
   message donne le même rendu et se laisse, elle, absorber par le
   défilement. */
#feed > :first-child { margin-top: auto; }

/* Chrome 121+, Firefox et Safari 18.2+ suivent scrollbar-width ci-dessus et
   ignorent ce qui suit ; les WebKit plus anciens font l'inverse. */
#feed::-webkit-scrollbar { width: 10px; }
#feed::-webkit-scrollbar-track { background: transparent; }
#feed::-webkit-scrollbar-thumb {
  background: var(--color-neutral-700);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 5px;
}
#feed::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-400);
  background-clip: padding-box;
}

.row {
  display: grid;
  grid-template-columns: 52px 108px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  animation: noct-fade .2s ease-out;
  transition: opacity .6s linear;
}

.row .t { color: color-mix(in srgb, var(--color-text) 32%, transparent); }
.row .n { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .m { overflow-wrap: anywhere; white-space: pre-wrap; }

/* Rotation de teintes reprise de la maquette, au lieu d'un arc-en-ciel. */
.n0 { color: var(--color-neutral-300); }
.n1 { color: var(--color-neutral-400); }
.n2 { color: var(--color-accent-2-400); }
.n3 { color: var(--color-accent-300); }
.nme { color: var(--color-accent); }

.row.system { color: color-mix(in srgb, var(--color-text) 32%, transparent); }
.row.system .n { text-align: right; }
.row.leaving { animation: noct-leave .45s ease-in forwards; }

.row .left {
  margin-left: var(--space-3);
  color: var(--color-danger);
  font-size: 11px;
  white-space: nowrap;
}

.replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 1px 8px;
  margin-left: var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  color: color-mix(in srgb, var(--color-accent-200) 60%, transparent);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status {
  padding: 0 var(--space-6) var(--space-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 38%, transparent);
  min-height: 18px;
}

/* -- message scellé : base64 affiché, texte révélé tant qu'on appuie */

.seal {
  padding: 1px 6px;
  border: 1px dashed var(--color-neutral-700);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-400);
  overflow-wrap: anywhere;
  cursor: pointer;
  /* Un appui maintenu sur du texte démarre une sélection : on la coupe, sinon
     le scellé se surligne en bleu à chaque lecture. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: color .12s, border-color .12s, background .12s;
}

.seal::before { content: '\2298\00a0'; color: var(--color-accent-2-400); }
.seal .clear { display: none; }

/* Le survol et le focus signalent seulement que c'est lisible : ils n'ouvrent
   rien. Seul .open, posé le temps de l'appui, révèle le texte. */
.seal:hover, .seal:focus-visible {
  border-color: var(--color-neutral-400);
  color: var(--color-neutral-300);
}

.seal:focus-visible { outline: 1px solid var(--color-accent-600); outline-offset: 1px; }

.seal.open {
  border-style: solid;
  border-color: var(--color-accent-600);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-text);
}

.seal.open::before { content: '\229b\00a0'; }
.seal.open .cipher { display: none; }
.seal.open .clear { display: inline; }

/* -- palette de commandes */

.palette {
  position: absolute;
  left: var(--space-6);
  bottom: 58px;
  width: 296px;
  padding: var(--space-2) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-mono);
  font-size: 12px;
  display: none;
}

.palette.on { display: block; }

.palette div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  cursor: pointer;
}

.palette div span:last-child { color: color-mix(in srgb, var(--color-text) 38%, transparent); }

.palette div.sel {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent-200);
}

.palette div.sel span:last-child { color: color-mix(in srgb, var(--color-accent-200) 65%, transparent); }

/* -- barre de saisie */

.composer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--color-neutral-900);
  font-family: var(--font-mono);
  font-size: 13px;
}

.composer .where { color: var(--color-accent-300); white-space: nowrap; }

.composer input {
  flex: 1;
  padding: 0;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--font-mono);
  caret-color: var(--color-accent);
}

.composer input::placeholder { color: color-mix(in srgb, var(--color-text) 26%, transparent); }
.composer .hintkey { font-size: 11px; color: color-mix(in srgb, var(--color-text) 34%, transparent); }

/* -- colonne de droite */

.members {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border-left: 1px solid var(--color-neutral-900);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.members h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 34%, transparent);
}

.members .list { display: flex; flex-direction: column; gap: var(--space-3); }

.member { display: flex; align-items: center; gap: var(--space-2); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.member.me { color: var(--color-text); }
.member .sigil { width: 7px; color: var(--color-accent); }
.member .tail { margin-left: auto; font-size: 10px; color: color-mix(in srgb, var(--color-text) 32%, transparent); }

/* -- console protocole */

#wire {
  display: none;
  max-height: 32vh;
  overflow-y: auto;
  padding: var(--space-3) var(--space-6);
  background: #0a0c14;
  border-top: 1px solid var(--color-neutral-900);
  font: 11.5px/1.65 var(--font-mono);
}

#wire.on { display: block; }
#wire div { white-space: pre-wrap; overflow-wrap: anywhere; }
#wire .out { color: var(--color-accent-300); }
#wire .in  { color: color-mix(in srgb, var(--color-text) 42%, transparent); }
#wire .num { color: var(--color-accent-2-400); }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail { flex-direction: row; gap: var(--space-4); align-items: center; padding: var(--space-2); border-right: 0; border-bottom: 1px solid var(--color-neutral-900); overflow-x: auto; }
  .rail .group { flex-direction: row; }
  .rail h4, .self, .members { display: none; }
  .row { grid-template-columns: 44px minmax(0, 1fr); }
  .row .n { grid-column: 2; text-align: left; }
  .row .m { grid-column: 2; }
}