/* OpenCode ChatUI — thème sombre façon WhatsApp (jetons à affiner, étape 8) */
:root {
  --fond: #0b141a;
  --fond-2: #111b21;
  --carte: #1a2733;
  --bord: #2a3942;
  --accent: #00a884;
  --accent-texte: #04261c;
  --texte: #e9edef;
  --discret: #8696a0;
  --erreur: #ff6b6b;
  --erreur-fond: #3b1d1d;

  /* Jetons de design (ui-design-systems) — valeurs réutilisées, plus de
     magie dispersée dans les composants */
  --rayon-s: 8px;
  --rayon-m: 10px;
  --rayon-l: 12px;
  --touche: 44px;      /* cible tactile minimale (WCAG 2.5.5) */
  --vert-bulle: #005c4b;  /* bulle « moi » */
  --bleu-action: #1f4b8f; /* bouton « Toujours » */
  --jaune: #ffc14d;       /* badge « en cours », geste */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* safe-areas : rien sous le barre d'accueil iOS ni sous la chape Android */
  padding: max(1rem, env(safe-area-inset-top)) 1rem
           max(1rem, env(safe-area-inset-bottom));
}

.page { width: 100%; max-width: 26rem; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-l);
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}

.entete { text-align: center; margin-bottom: 1.25rem; }
.entete h1 { font-size: 1.25rem; margin: .35rem 0 .15rem; }
.logo { font-size: 2rem; }
.discret { color: var(--discret); font-size: .9rem; margin: 0; }

label { display: block; margin: .75rem 0 .25rem; font-size: .85rem; color: var(--discret); }

input {
  width: 100%;
  padding: .6rem .7rem;
  border-radius: var(--rayon-s);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte);
  font-size: 1rem;
}

input:focus { outline: 2px solid var(--accent); border-color: transparent; }

button {
  margin-top: 1rem;
  width: 100%;
  padding: .7rem;
  border: 0;
  border-radius: var(--rayon-s);
  background: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

button:active { filter: brightness(.9); }
button.secondaire { background: var(--bord); color: var(--texte); }

.erreur {
  background: var(--erreur-fond);
  color: var(--erreur);
  padding: .6rem .8rem;
  border-radius: var(--rayon-s);
  margin-bottom: 1rem;
  font-size: .9rem;
}

.erreur a, .lien { color: var(--accent); }

/* --- Liste des discussions (F1) -------------------------------------- */

.barre {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-l) 12px 0 0;
  padding: .9rem 1rem .7rem;
  position: sticky;
  top: 0;
  z-index: 2;
}

.barre-haut { display: flex; justify-content: space-between; align-items: baseline; }
.barre-haut h1 { font-size: 1.1rem; margin: 0; }

.recherche input {
  margin-top: .6rem;
  width: 100%;
  padding: .5rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte);
  font-size: .95rem;
}

.nouvelle { border-radius: 0; border-top: 0; margin-bottom: .75rem; }
.nouvelle summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.nouvelle form { margin-top: .75rem; }

select {
  width: 100%;
  padding: .6rem .7rem;
  border-radius: var(--rayon-s);
  border: 1px solid var(--bord);
  background: var(--fond-2);
  color: var(--texte);
  font-size: .95rem;
}

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.ligne {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .7rem .9rem;
  border-top: 1px solid var(--bord);
}

.ligne:first-child { border-top: 0; }

.avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-texte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.corps-ligne { min-width: 0; flex: 1; }
.haut-ligne, .bas-ligne { display: flex; justify-content: space-between; gap: .5rem; }
.titre-ligne { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quand { color: var(--discret); font-size: .75rem; flex: none; }
.bas-ligne { margin-top: .15rem; align-items: center; }
.repertoire {
  color: var(--discret);
  font-size: .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.badge {
  flex: none;
  font-size: .7rem;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.badge.ok { background: #0b3d31; color: #26d07c; }
.badge.ko { background: var(--erreur-fond); color: var(--erreur); }
.badge.actif { background: #3d2f0b; color: var(--jaune); }
.badge.neutre { background: var(--bord); color: var(--discret); }

.etat { text-align: center; color: var(--discret); }
.etat p { margin: 0 0 .5rem; }

a.ligne { text-decoration: none; color: inherit; display: flex; gap: .75rem;
          align-items: center; }

/* --- Vue discussion (F3 / F4) ----------------------------------------- */

.retour { color: var(--texte); text-decoration: none; font-size: 1.25rem;
          padding: .1rem .5rem; flex: none; min-width: var(--touche);
          min-height: var(--touche); display: inline-flex;
          align-items: center; justify-content: center; }

.titre-discussion { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.interrompre button {
  background: transparent; border: 0; color: var(--erreur);
  font-size: 1.05rem; width: auto; margin: 0; padding: .3rem .5rem; flex: none;
}

.fil {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-top: 0;
  padding: .9rem .7rem;
  min-height: 45vh;
  /* dvh : hauteur dynamique — la barre d'URL qui rétrécit ne fait pas
     sauter le fil sur mobile (responsive-design) */
  max-height: calc(100dvh - 14rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.bulle {
  max-width: 85%;
  padding: .5rem .7rem;
  border-radius: var(--rayon-m);
  font-size: .95rem;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.bulle p { margin: 0; }
.bulle-moi { align-self: flex-end; background: var(--vert-bulle); }
.bulle-agent { align-self: flex-start; background: var(--carte); border: 1px solid var(--bord); }
.bulle pre {
  background: var(--fond); padding: .5rem; border-radius: 6px;
  overflow-x: auto; margin: .4rem 0 0; font-size: .8rem;
}
.bulle code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.bulle a { color: #53bdeb; }
.md-titre { font-weight: 700; margin: .2rem 0; }

.outil, .raisonnement {
  align-self: flex-start; max-width: 90%;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon-s); font-size: .8rem; color: var(--discret);
  padding: .3rem .6rem;
}
.outil summary, .raisonnement summary { cursor: pointer; }
.outil pre { margin: .4rem 0 0; max-height: 12rem; overflow: auto; white-space: pre-wrap; }

.centree { align-self: center; font-size: .78rem; text-align: center; }

.saisie {
  display: flex; gap: .5rem; align-items: flex-end;
  background: var(--carte); border: 1px solid var(--bord);
  border-top: 0; border-radius: 0 0 12px 12px; padding: .55rem .6rem;
}
.saisie textarea {
  flex: 1; resize: none; border-radius: var(--rayon-m); border: 1px solid var(--bord);
  background: var(--fond-2); color: var(--texte); padding: .55rem .7rem;
  font: inherit; max-height: 8rem; min-height: 2.4rem;
}
.saisie textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.saisie button {
  width: var(--touche); height: var(--touche);
  border-radius: 50%; margin: 0; padding: 0;
  font-size: 1rem; flex: none;
}

.vivante { opacity: .9; }
.vivante::after {
  content: "▍";
  animation: clignote 1s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }

.actions { display: flex; flex-direction: column; gap: .5rem; }
.carte-action {
  align-self: stretch;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-left: 4px solid #53bdeb;
  border-radius: var(--rayon-m);
  padding: .7rem .8rem;
}
.carte-action.permission { border-left-color: var(--jaune); }
.carte-action.formulaire { border-left-color: #53bdeb; }
.carte-action.faite { opacity: .7; }
.action-titre { font-weight: 600; margin-bottom: .25rem; }
.action-detail { color: var(--discret); font-size: .9rem; margin-bottom: .6rem; overflow-wrap: anywhere; }
.action-boutons { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-action {
  width: auto; margin: 0; padding: .45rem .7rem; font-size: .9rem;
  border-radius: var(--rayon-s);
  min-height: var(--touche);   /* cible tactile WCAG 2.5.5 */
}
.btn-action.once { background: var(--accent); color: var(--accent-texte); }
.btn-action.always { background: var(--bord); color: var(--texte); }
.btn-action.reject { background: var(--erreur-fond); color: var(--erreur); }
.champ-form { display: block; margin-bottom: .45rem; }
.champ-form span { display: block; font-size: .85rem; color: var(--discret); margin-bottom: .2rem; }
.champ-form input, .champ-form select { margin: 0; }

/* --- Verrou TOTP (F10) ----------------------------------------------- */

.verrou { text-align: center; }
.verrou h1 { font-size: 1.15rem; }
.verrou .lien { display: inline-block; margin-top: .9rem; font-size: .85rem; }

.lien-cadenas { text-decoration: none; font-size: 1rem; padding: .1rem .3rem; }

.cloche {
  background: transparent; border: 0; width: auto; margin: 0;
  min-width: var(--touche); min-height: var(--touche);
  padding: .1rem .3rem; font-size: 1rem; cursor: pointer;
  color: var(--discret);
}
.cloche.actif { color: var(--accent); }
.cloche:disabled { opacity: .5; cursor: default; }

.succes {
  background: #0b3d31; color: #26d07c; padding: .6rem .8rem;
  border-radius: var(--rayon-s); margin-bottom: 1rem; font-size: .9rem;
}

.bloc-setup h2 { font-size: .95rem; margin: 1rem 0 .3rem; }
.otpauth {
  display: inline-block; margin: .5rem 0; padding: .55rem .9rem;
  background: var(--accent); color: var(--accent-texte);
  border-radius: var(--rayon-s); text-decoration: none; font-weight: 600;
}
.secret {
  background: var(--fond); border: 1px dashed var(--bord);
  border-radius: var(--rayon-s); padding: .6rem; word-break: break-all;
}
.secret code { font-size: .8rem; }
.copier {
  background: var(--bord); color: var(--texte); width: auto;
  padding: .45rem .9rem; font-size: .85rem; margin-top: 0;
}
.ligne-action { border-top: 1px solid var(--bord); margin-top: .9rem;
                padding-top: .7rem; }
.danger { background: var(--erreur-fond); color: var(--erreur); }
.note { font-size: .78rem; margin-top: 1rem; }

.voile-totp {
  position: fixed; inset: 0; background: rgb(0 0 0 / 65%);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 1rem;
}
.voile-totp .carte { max-width: 20rem; width: 100%; text-align: center; }
.voile-totp input {
  text-align: center; font-size: 1.3rem; letter-spacing: .4em;
  font-variant-numeric: tabular-nums;
}
.pave-boutons { display: flex; gap: .6rem; margin-top: .8rem; }
.pave-boutons button { margin: 0; flex: 1; }
.pave-boutons .annuler { background: var(--bord); color: var(--texte); }

/* --- Accessibilité & mobile (responsive-design) ----------------------- */

/* Focus visible au clavier (jamais supprimé, jamais décalé hors écran) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* L'utilisateur qui demande moins d'animations n'obtient pas le curseur
   clignotant du streaming */
@media (prefers-reduced-motion: reduce) {
  .vivante::after { animation: none; }
}

/* Paysage de téléphone : le chrome mange la hauteur, on le resserre */
@media (max-height: 500px) and (orientation: landscape) {
  .barre { padding: .4rem .8rem; }
  .fil { max-height: calc(100dvh - 9.5rem); min-height: 30vh; }
  .entete { margin-bottom: .5rem; }
}

@media (max-width: 480px) {
  .page { padding: .5rem; }
  .bulle { max-width: 92%; }
}