/* Salon à 4 (P030) — styles sobres, zéro framework, zéro CDN.
   Distinction visuelle humains / agents / système, mentions surlignées,
   indicateur de connexion. */

:root {
  --fond: #f4f5f7;
  --fond-carte: #ffffff;
  --texte: #1f2430;
  --texte-attenue: #6b7280;
  --bordure: #e2e5ea;
  --accent: #3457d5;
  --humain: #1f7a4d;
  --humain-fond: #eaf7ef;
  --agent: #7a4dd6;
  --agent-fond: #f1eaf9;
  --systeme: #a15c00;
  --systeme-fond: #fdf1de;
  --confirmation: #b3480b;
  --confirmation-fond: #fdece0;
  --erreur: #b3261e;
  --vert: #1f9d55;
  --orange: #d98c00;
  --rouge: #d3402e;
  --gris-pastille: #b7bcc6;

  /* Mapping 4 sièges (précision de Loïc, 2026-07-20, PILOTAGE.md §7nonies-A) —
     chaque binôme humain+agent partage une teinte, l'agent en version foncée.
     Appliqué partout où un siège est représenté : colonne de présence ET
     bulles du fil. Les variables --humain/--agent ci-dessus sont conservées
     telles quelles (repli défensif pour un siège inconnu, jamais retirées). */
  --siege-loic: #2f9e63;              /* Loïc — vert clair */
  --siege-loic-fond: #e6f7ee;
  --siege-jarvis-loic: #155c37;       /* Jarvis (Loïc) — vert foncé */
  --siege-jarvis-loic-fond: #dcefe3;
  --siege-corentin: #8a63d2;          /* Corentin — violet clair */
  --siege-corentin-fond: #f0e9fb;
  --siege-jarvis-corentin: #5b32a3;   /* Jarvis (Corentin) — violet foncé */
  --siege-jarvis-corentin-fond: #e6dbf7;
}

/* Garde-fou générique (hotfix v1.5.1) : l'attribut HTML `hidden` doit TOUJOURS
   masquer l'élément, quelle que soit la règle `display` déclarée ailleurs dans
   ce fichier. Sans cette règle, une classe qui pose `display: flex/block/...`
   (spécificité >= celle de `[hidden]`) écrase le `display:none` de la feuille
   de style user-agent — une règle "author" prime toujours sur une règle
   "user-agent" dans la cascade CSS, quelle que soit la spécificité comparée.
   Bug constaté à DEUX endroits dans ce fichier : `.modale-overlay` (plus bas)
   ET `.ecran` (partagée par #ecran-connexion / #ecran-salon) définissent
   toutes deux un `display` qui produit cet effet. Règle générique choisie
   plutôt qu'un correctif ciblé par classe : elle couvre ces deux cas d'un
   coup et protège aussi tout futur élément masqué via `hidden`. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  height: 100vh;
  overflow: hidden;
}

.ecran {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -- Écran de connexion --------------------------------------------- */

#ecran-connexion {
  align-items: center;
  justify-content: center;
}

.carte-connexion {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.carte-connexion h1 {
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.sous-titre {
  margin: 0 0 20px;
  color: var(--texte-attenue);
  font-size: 0.9rem;
}

#formulaire-connexion label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--texte-attenue);
}

#formulaire-connexion input,
#formulaire-connexion select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--texte);
}

#formulaire-connexion button,
.zone-saisie button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
}

#formulaire-connexion button:hover,
.zone-saisie button:hover {
  filter: brightness(1.08);
}

.texte-erreur {
  color: var(--erreur);
  font-size: 0.85rem;
  margin-top: 12px;
}

/* -- Écran du salon --------------------------------------------------- */

.barre-entete {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bordure);
  flex-shrink: 0;
}

.barre-entete h1 {
  font-size: 1.1rem;
  margin: 0;
}

.statut {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

.statut-puce {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--texte-attenue);
  display: inline-block;
}

.statut.statut--connecte .statut-puce { background: var(--vert); }
.statut.statut--connexion .statut-puce { background: var(--orange); }
.statut.statut--erreur .statut-puce { background: var(--rouge); }

.bouton-discret {
  margin-left: auto;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--texte-attenue);
  cursor: pointer;
}

.bouton-discret:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* -- Numéro de version + changelog (build v1.4) -------------------------- */

/* Placé après .statut dans le markup : .bouton-deconnexion (margin-left:auto)
   reste poussé à droite, ce badge suit .statut sans perturber la mise en page. */
.badge-version {
  background: none;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texte-attenue);
  cursor: pointer;
}

.badge-version:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modale-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 26, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}

.modale-panneau {
  background: var(--fond-carte);
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.modale-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bordure);
  flex-shrink: 0;
}

.modale-entete h2 {
  margin: 0;
  font-size: 1.05rem;
}

.modale-entete .bouton-discret {
  margin-left: 0;
}

.modale-contenu {
  overflow-y: auto;
  padding: 16px 20px 20px;
}

.changelog-section {
  margin-bottom: 20px;
}

.changelog-section:last-child {
  margin-bottom: 0;
}

.changelog-section h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}

.changelog-section--courante h3 {
  color: var(--accent);
}

.changelog-section ul {
  margin: 0;
  padding-left: 20px;
}

.changelog-section li {
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 4px;
}

.changelog-section p {
  font-size: 0.85rem;
  color: var(--texte-attenue);
  margin: 0;
  white-space: pre-wrap;
}

.changelog-message-etat {
  font-size: 0.85rem;
  color: var(--texte-attenue);
}

/* -- Corps du salon : colonne de présence + zone droite (fil + saisie) -- */

.corps-salon {
  flex: 1;
  display: flex;
  min-height: 0; /* permet aux enfants scrollables de ne pas déborder du flex parent */
  overflow: hidden;
}

.zone-droite {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* -- Colonne de présence (feature 1) ------------------------------------ */

.colonne-presence {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--bordure);
  background: #fafbfc;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.label-section {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-attenue);
  margin: 0 0 12px;
}

.liste-sieges {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}

.siege-presence {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-siege {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid transparent;
}

/* Forme = rôle (cercle = humain, carré arrondi = agent) — jamais la présence. */
.avatar-siege.humain { border-radius: 50%; }
.avatar-siege.agent  { border-radius: 30%; }

/* Couleur = siège (mapping 4 teintes, §7nonies-A) — appliquée en plus de la forme ci-dessus. */
.avatar-siege--loic            { background: var(--siege-loic-fond);            color: var(--siege-loic);            border-color: var(--siege-loic); }
.avatar-siege--jarvis-loic     { background: var(--siege-jarvis-loic-fond);     color: var(--siege-jarvis-loic);     border-color: var(--siege-jarvis-loic); }
.avatar-siege--corentin        { background: var(--siege-corentin-fond);        color: var(--siege-corentin);        border-color: var(--siege-corentin); }
.avatar-siege--jarvis-corentin { background: var(--siege-jarvis-corentin-fond); color: var(--siege-jarvis-corentin); border-color: var(--siege-jarvis-corentin); }

.pastille-presence {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--fond-carte);
  background: var(--gris-pastille);
}
.pastille-presence.en-ligne { background: var(--vert); }
.pastille-presence.hors-ligne { background: var(--gris-pastille); }

.siege-texte { display: flex; flex-direction: column; line-height: 1.25; }
.siege-nom { font-size: 0.86rem; font-weight: 600; color: var(--texte); }
.siege-statut { font-size: 0.72rem; color: var(--texte-attenue); }
.siege-statut.en-ligne { color: var(--vert); font-weight: 600; }

.separateur-colonne { border: none; border-top: 1px solid var(--bordure); margin: 16px 0; }

/* -- Zone "Mon Jarvis" (feature 2) --------------------------------------- */

.zone-mon-jarvis { display: flex; flex-direction: column; gap: 8px; }

.ligne-toggle { display: flex; align-items: center; gap: 10px; }

.toggle-jarvis {
  position: relative;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--gris-pastille);
  border: none;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}
.toggle-jarvis::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: left .15s ease;
}
.toggle-jarvis.actif { background: var(--accent); }
.toggle-jarvis.actif::after { left: 19px; }

.libelle-toggle { font-size: 0.84rem; font-weight: 600; }

.statut-mon-jarvis { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; padding-left: 48px; }
.statut-mon-jarvis .pastille-inline { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.statut-mon-jarvis.absent .pastille-inline { background: var(--gris-pastille); }
.statut-mon-jarvis.absent { color: var(--texte-attenue); }
.statut-mon-jarvis.connexion .pastille-inline { background: var(--orange); animation: pulse-presence 1.4s infinite; }
.statut-mon-jarvis.connexion { color: var(--orange); }
.statut-mon-jarvis.connecte .pastille-inline { background: var(--vert); }
.statut-mon-jarvis.connecte { color: var(--vert); font-weight: 600; }
.statut-mon-jarvis.erreur .pastille-inline { background: var(--rouge); }
.statut-mon-jarvis.erreur { color: var(--rouge); }

@keyframes pulse-presence { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.bouton-copier-commande {
  width: 100%;
  text-align: center;
  margin-left: 0;
}

.texte-aide-bouton {
  font-size: 0.7rem;
  color: var(--texte-attenue);
  margin: 0;
  line-height: 1.3;
}

.texte-confirmation {
  font-size: 0.72rem;
  color: var(--vert);
  margin: 0;
  word-break: break-word;
  white-space: pre-wrap;
}

/* -- Vue étroite (mobile) : colonne de présence devient une bande horizontale -- */

@media (max-width: 720px) {
  .corps-salon { flex-direction: column; }

  .colonne-presence {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--bordure);
    padding: 10px 14px;
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
  }
  .label-section { display: none; }
  .liste-sieges { flex-direction: row; gap: 10px; margin-bottom: 0; }
  .siege-texte { display: none; } /* nom/statut textuels masqués, la pastille reste porteuse de l'info */
  .separateur-colonne { display: none; }
  .avatar-siege { width: 28px; height: 28px; font-size: 0.62rem; }
  .zone-mon-jarvis { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: 6px; }
  .zone-mon-jarvis .ligne-toggle,
  .zone-mon-jarvis .statut-mon-jarvis,
  .zone-mon-jarvis .bouton-copier-commande { flex-shrink: 0; }
  .statut-mon-jarvis { padding-left: 0; }
  .bouton-copier-commande { width: auto; }
}

/* -- Fil de messages --------------------------------------------------- */

.fil-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message {
  max-width: 640px;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid var(--bordure);
  background: var(--fond-carte);
}

.message--humain {
  border-color: var(--humain);
  background: var(--humain-fond);
}

.message--agent {
  border-color: var(--agent);
  background: var(--agent-fond);
}

/* Couleur par siège (mapping 4 teintes, §7nonies-A) — remplace la couleur
   générique ci-dessus quand le siège émetteur est l'un des 4 connus (ordre
   CSS : ces règles suivent .message--humain/.message--agent pour primer en
   cas d'égalité de spécificité). Le repli générique reste actif pour tout
   siège inconnu (5e siège futur, YAGNI). */
.message--loic            { border-color: var(--siege-loic);            background: var(--siege-loic-fond); }
.message--jarvis-loic     { border-color: var(--siege-jarvis-loic);     background: var(--siege-jarvis-loic-fond); }
.message--corentin        { border-color: var(--siege-corentin);        background: var(--siege-corentin-fond); }
.message--jarvis-corentin { border-color: var(--siege-jarvis-corentin); background: var(--siege-jarvis-corentin-fond); }

.message--systeme {
  border-color: var(--systeme);
  background: var(--systeme-fond);
  align-self: center;
  font-style: italic;
  font-size: 0.85rem;
  max-width: 480px;
  text-align: center;
}

.message--confirmation {
  border-color: var(--confirmation);
  background: var(--confirmation-fond);
}

.message-entete {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.8rem;
  margin-bottom: 3px;
}

.message-nom {
  font-weight: 600;
}

.message-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--texte-attenue);
  letter-spacing: 0.03em;
}

.message-heure {
  color: var(--texte-attenue);
}

.message-corps {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.4;
}

.mention {
  background: rgba(52, 87, 213, 0.15);
  color: var(--accent);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
}

/* -- Liste de complétion des mentions "@" (feature v1.3, §7undecies-F) --
   Réutilise .avatar-siege/.avatar-siege--<id>/.pastille-presence déjà
   établies pour la colonne de présence (§F pt5) — seule la taille de
   l'avatar est réduite pour ce contexte compact, aucune nouvelle couleur. */

.liste-mentions {
  position: fixed;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  max-height: 200px;
  overflow-y: auto;
}

.option-mention {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.option-mention.active,
.option-mention:hover {
  background: var(--fond);
}

.option-mention .avatar-siege {
  width: 22px;
  height: 22px;
  font-size: 0.6rem;
  flex-shrink: 0;
}

.option-mention-nom {
  font-size: 0.85rem;
  color: var(--texte);
}

/* -- Zone de saisie ----------------------------------------------------- */

.zone-saisie {
  flex-shrink: 0;
  padding: 12px 20px 16px;
  background: var(--fond-carte);
  border-top: 1px solid var(--bordure);
}

#formulaire-envoi {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

#champ-corps {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  min-height: 42px;
}

.zone-saisie .texte-erreur {
  margin-top: 8px;
  margin-bottom: 0;
}