/* ============================================================================
   ecran-chat.css - Complément de l'écran Chat (template CONVERSATION).
   Complément d'app.css, jamais un doublon : toutes les classes sont préfixées
   « ecran-chat__ », et aucune valeur n'est écrite hors token.
   Mobile-first (référence 375 px), garde-fou 320 px, desktop >= 840 px.
   ========================================================================== */

/* --- 1. Colonne de conversation -------------------------------------------- */

.ecran-chat {
  display: block;
  /* réserve la hauteur du champ de saisie, fixé au-dessus de la barre basse */
  padding-bottom: calc(var(--cible) + var(--sp-6));
}

.ecran-chat__journal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* --- 1 bis. Page d'accueil (tant que rien n'a été dit) ---------------------
   Avant le premier message, l'écran n'est pas un fil : c'est une adresse.
   Titre, saisie et exemples sont un seul bloc centré dans la page - la
   saisie n'est donc pas fixée en bas comme dans la conversation. */

/* Le gabarit `accueil` (retourné par l'écran) libère la colonne : le bloc se
   centre dans toute la largeur utile, pas dans les 640 px de la file. */
.colonne--accueil { max-width: none; }

/* Le gabarit `chat` recentre la file : les autres écrans sont des LISTES,
   calées à gauche sous le menu (app.css §13) ; la conversation, elle, tient
   la même place que la page d'accueil - sinon tout saute vers la gauche au
   premier message. Classe doublée : `.colonne` se cale à gauche plus bas
   dans app.css. */
.colonne.colonne--chat { margin-left: auto; margin-right: auto; }

.ecran-chat.ecran-chat--accueil {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  min-height: calc(100vh - var(--barre-haute) - var(--barre-basse) - var(--sp-12));
  min-height: calc(100dvh - var(--barre-haute) - var(--barre-basse) - var(--sp-12));
}

.ecran-chat__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  max-width: var(--colonne-max);
  text-align: center;
}

/* Trait FIN, à l'image du logo ATRIUM : à cette taille, le gras des titres
   de carte pèserait. La taille fait la hiérarchie, pas la graisse. */
.ecran-chat__salut {
  margin: 0;
  font-size: var(--fs-accueil);
  line-height: var(--lh-accueil);
  font-weight: var(--gras-fin);
  letter-spacing: -.005em;
  color: var(--encre);
  text-wrap: balance;
}

/* Doublement de classe volontaire : la règle générale (§8) et sa variante
   desktop (§9) viennent plus bas dans le fichier - à spécificité égale,
   elles gagneraient. */
.ecran-chat__saisie.ecran-chat__saisie--accueil {
  position: static;
  width: 100%;
  padding: 0;
  background: none;
  border-top: 0;
}
/* Plus spécifique que la règle desktop qui cale la saisie à gauche (§9) :
   sur l'accueil, elle reste centrée sous le titre. */
.ecran-chat__saisie.ecran-chat__saisie--accueil .ecran-chat__saisie-corps {
  max-width: 100%;
  margin: 0 auto;
}

.ecran-chat--accueil .ecran-chat__chips { justify-content: center; }

/* Un tour = une prise de parole : bulle + éventuels blocs (cartes, citation). */
.ecran-chat__tour {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  min-width: 0;
}
.ecran-chat__tour--moi { align-items: flex-end; }

/* Les briques partagées portent leur propre marge dans app.css : dans le fil,
   c'est le `gap` du tour qui commande. */
.ecran-chat__tour > .citation,
.ecran-chat__tour > .reserve,
.ecran-chat__bloc .citation,
.ecran-chat__bloc .reserve { margin-top: 0; }

/* --- 2. Bulles -------------------------------------------------------------- */

.ecran-chat__bulle {
  max-width: 100%;
  padding: var(--sp-3) var(--carte-pad);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2) var(--r-2) var(--r-2) var(--r-1);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  color: var(--encre);
}
.ecran-chat__bulle strong { font-weight: var(--gras-titre); }

.ecran-chat__tour--moi .ecran-chat__bulle {
  max-width: 88%;
  background: var(--surface-appui);
  border-color: var(--surface-appui);
  border-radius: var(--r-2) var(--r-2) var(--r-1) var(--r-2);
}

/* Accueil : la première bulle est le cold open de la démo (spec §9). */
.ecran-chat__accueil {
  font-size: var(--fs-titre);
  line-height: var(--lh-titre);
  letter-spacing: -.01em;
  padding: var(--sp-4) var(--carte-pad);
}

.ecran-chat__meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}
.ecran-chat__tour--moi .ecran-chat__meta { text-align: right; }

/* --- 3. Chips de suggestion ------------------------------------------------- */

.ecran-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ecran-chat__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  min-height: var(--cible);
  padding: 0 var(--sp-4);
  background: var(--surface);
  color: var(--encre);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-pill);
  font-size: var(--fs-corps);
  font-weight: var(--gras-appui);
  letter-spacing: -.005em;
  text-align: left;
  transition: background var(--duree-1) var(--courbe);
}
.ecran-chat__chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecran-chat__chip .icone { color: var(--encre-douce); flex: none; }
.ecran-chat__chip:hover { background: var(--surface-appui); }
.ecran-chat__chip:hover .icone { color: var(--encre); }
.ecran-chat__chip:active { background: var(--ligne); }

/* --- 3 bis. Mention d'agent ------------------------------------------------
   « Agent Matchs : j'ai... » : la réponse est SIGNÉE par l'écran qui a fait
   le travail, et le nom renvoie à cet écran - donc souligné. */

.ecran-chat__agent { color: var(--encre-douce); }
/* Sans phrase à annoncer, la mention coiffe le bloc : ligne à part, en méta. */
.ecran-chat__agent--bloc {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}

.ecran-chat__agent-lien {
  color: var(--encre);
  font-weight: var(--gras-appui);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ligne-forte);
}
.ecran-chat__agent-lien:hover { text-decoration-color: var(--encre); }

/* --- 4. Indicateur de frappe ------------------------------------------------ */

.ecran-chat__frappe {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--cible);
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2) var(--r-2) var(--r-2) var(--r-1);
  color: var(--encre-douce);
  align-self: flex-start;
}
/* Appel d'un autre agent : même coquille que la frappe, mais l'attente est
   NOMMÉE - la marque du chatbot, la phrase, puis les points qui tournent.
   C'est la place que prendra le vrai aller-retour avec l'agent. */
.ecran-chat__appel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  max-width: 100%;
  min-height: var(--cible);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2) var(--r-2) var(--r-2) var(--r-1);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  color: var(--encre-douce);
}
.ecran-chat__appel strong { color: var(--encre); font-weight: var(--gras-titre); }
.ecran-chat__appel-marque { color: var(--encre); }
.ecran-chat__appel-points {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}

/* .puce__point vient d'app.css : 6 px, currentColor. Rien n'est redéfini. */
.ecran-chat__frappe .puce__point,
.ecran-chat__appel .puce__point {
  animation: ecran-chat-frappe calc(var(--duree-3) * 3) var(--courbe) infinite;
}
.ecran-chat__frappe .puce__point:nth-child(2),
.ecran-chat__appel .puce__point:nth-child(2) { animation-delay: var(--duree-2); }
.ecran-chat__frappe .puce__point:nth-child(3),
.ecran-chat__appel .puce__point:nth-child(3) { animation-delay: var(--duree-3); }

@keyframes ecran-chat-frappe {
  0%, 60%, 100% { opacity: .35; }
  30%           { opacity: 1; }
}

/* --- 5. Blocs de réponse (synthèse de dictée, fiche contact) ---------------- */

.ecran-chat__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--carte-pad);
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  box-shadow: var(--ombre-1);
}

.ecran-chat__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ecran-chat__section .section-titre { margin: 0; }

/* Dans un bloc, une valeur de champ peut passer à la ligne : le fil de
   conversation n'a pas la contrainte de densité d'une carte de file. */
.ecran-chat__bloc .champ__valeur { white-space: normal; }

/* La cible de 44 px du lien de source est posée une fois pour toutes dans
   app.css. Dans le fil, la densité ne compte pas : on annule la compensation
   verticale pour que la ligne respire. */
.ecran-chat .citation__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-1);
}
.ecran-chat .citation__lien {
  margin: 0 calc(var(--sp-2) * -1);
}

/* --- 6. Diff « ce qui va changer sur la fiche » ----------------------------- */

.ecran-chat__diff {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ecran-chat__diff-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-creuse);
  border-radius: var(--r-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.ecran-chat__diff-label {
  flex: 1 0 100%;
  color: var(--encre-douce);
}
/* Même convention que les biens qui entrent/sortent d'un rapprochement :
   rouge = ce qui sort, vert = ce qui entre. */
.ecran-chat__diff-avant  { color: var(--danger-encre); }
.ecran-chat__diff-fleche { color: var(--encre-douce); flex: none; }
.ecran-chat__diff-apres  { color: var(--succes-encre); font-weight: var(--gras-titre); }

/* --- 7. Pied d'un bloc : action primaire puis état validé ------------------- */

.ecran-chat__pied {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ecran-chat__valide {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
  background: var(--succes-fond);
  border-radius: var(--r-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--succes-encre);
}
.ecran-chat__valide-marque { font-weight: var(--gras-titre); flex: none; }
.ecran-chat__valide-texte  { flex: 1 1 auto; min-width: 0; }

.ecran-chat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ecran-chat__actions .btn { flex: 1 1 auto; }

/* --- 8. Champ de saisie ----------------------------------------------------- */

.ecran-chat__saisie {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom, 0px));
  padding: var(--sp-2) var(--gouttiere);
  background: var(--surface);
}

/* Le champ suit exactement la colonne de conversation : même largeur utile,
   même alignement. Sur mobile la colonne est centrée, sur desktop elle est
   calée à gauche du menu vertical (voir app.css §13). */
.ecran-chat__saisie-corps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: calc(var(--colonne-max) - var(--gouttiere) * 2);
  margin: 0 auto;
}

/* La boîte blanche : c'est elle qui porte le bord, le fond et le focus ; le
   champ et le micro (§8 bis) vivent dedans. Un cran au-dessus de --cible
   (44px) : la case elle-même se voit plus grande, pas seulement le texte
   qu'elle porte. */
.ecran-chat__boite {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0 var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-pill);
}
/* La boîte se clique pour écrire, pas au clavier depuis un autre contrôle :
   un anneau de focus serait un bord saillant autour d'un champ déjà évident.
   Le bord plus sombre (celui de `.champ-saisie:focus-visible`, app.css) est
   le seul repère. */
.ecran-chat__boite:focus-within { border-color: var(--encre); }
/* Pendant la dictée, la boîte se creuse : on n'y écrit pas, on y parle. */
.ecran-chat__boite.est-occupee { background: var(--surface-creuse); }

.ecran-chat__champ {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  /* Volontairement hors de l'échelle à 3 tailles (même exception que
     --fs-accueil, tokens.css) : le texte saisi ET le placeholder se lisent
     nettement plus grand que le reste du texte courant. */
  font-size: 18px;
  line-height: 1.3;
  color: var(--encre);
}
.ecran-chat__champ::placeholder { color: var(--encre-douce); opacity: 1; }
.ecran-chat__champ:focus-visible { outline: none; }

/* Le « + » : même gabarit que le micro (§8 bis), en discret - c'est une
   porte vers d'autres actions, pas l'action du champ. Posé en premier dans
   la boîte, à gauche du champ ; `.ecran-chat__plus-zone` porte le menu qui
   s'ancre à lui. */
.ecran-chat__plus-zone { position: relative; flex: none; }
.ecran-chat__plus {
  width: var(--cible);
  min-width: var(--cible);
  flex: none;
  padding: 0;
  border-radius: var(--r-pill);
}

/* Petit menu ancré au bouton - pas la feuille plein écran (§8), réservée
   aux choix qui méritent un vrai panneau. Il s'ouvre vers le haut : la
   boîte vit au ras du bas de l'écran (barre fixe), en dessous il n'y a
   rien de disponible. */
.ecran-chat__menu {
  position: absolute;
  z-index: 31;
  left: 0;
  bottom: calc(100% + var(--sp-1));
  width: max-content;
  padding: var(--sp-1);
  background: var(--surface);
  border-radius: var(--r-2);
  box-shadow: var(--ombre-2);
}
.ecran-chat__menu[hidden] { display: none; }

.ecran-chat__menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 0;
  border-radius: var(--r-1);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  color: var(--encre);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.ecran-chat__menu__item:hover,
.ecran-chat__menu__item:focus-visible { background: var(--surface-creuse); }
.ecran-chat__menu__item .icone { flex: none; color: var(--encre-douce); }

.ecran-chat__envoi {
  width: var(--cible);
  min-width: var(--cible);
  flex: none;
  padding: 0;
  border-radius: var(--r-pill);
}
/* Même icône `fleche` que partout ailleurs (diff, « Rejouer »), tournée
   pour ce bouton-ci : « envoyer » se lit vers le haut, pas vers la droite. */
.ecran-chat__envoi .icone { transform: rotate(-90deg); }
/* `.btn` fixe déjà `display` : sans cette règle, l'attribut `hidden` seul ne
   suffit pas à cacher le bouton (même convention que `.barre-haute[hidden]`,
   `.pastille[hidden]` dans app.css). */
.ecran-chat__envoi[hidden] { display: none; }

/* --- 8 bis. Dictée : le micro dans la boîte, et la ligne d'état qui y
   remplace le champ ---------------------------------------------------- */

/* Même gabarit que la flèche d'envoi, en discret : dicter est une option,
   envoyer est l'action. Posé dans la boîte, à droite du champ. */
.ecran-chat__micro {
  width: var(--cible);
  min-width: var(--cible);
  flex: none;
  padding: 0;
  border-radius: var(--r-pill);
}
/* Pendant l'écoute, le bouton devient l'arrêt : rouge, comme le point qui
   bat dans la ligne d'état - la seule couleur de danger de la barre. */
.ecran-chat__micro.est-actif,
.ecran-chat__micro.est-actif:hover {
  background: var(--danger-fond);
  border-color: var(--danger-fond);
  color: var(--danger-encre);
}
/* Transcription en cours : le micro attend, il ne se represse pas. */
.ecran-chat__micro:disabled,
.ecran-chat__micro:disabled:hover {
  background: none;
  color: var(--encre-douce);
  opacity: .5;
  cursor: default;
}

/* `.ecran-chat__ecoute` fixe `display` : l'attribut `hidden` seul ne
   suffirait pas (même convention que `.ecran-chat__envoi[hidden]`). */
.ecran-chat__champ[hidden],
.ecran-chat__ecoute[hidden] { display: none; }

/* La ligne d'état prend la place du champ dans la boîte, avec les mêmes
   marges : la barre ne bouge pas d'un pixel quand on dicte. */
.ecran-chat__ecoute {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  font-size: var(--fs-corps);
  line-height: var(--lh-corps);
  color: var(--encre-douce);
}
.ecran-chat__ecoute-texte {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ecran-chat__ecoute-chrono {
  margin-left: auto;
  flex: none;
  font-family: var(--police-chiffres);
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
/* Le point qui bat : l'enregistrement est en cours. */
.ecran-chat__ecoute-point {
  width: var(--sp-2);
  height: var(--sp-2);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--danger-encre);
  animation: ecran-chat-ecoute calc(var(--duree-3) * 4) var(--courbe) infinite;
}
@keyframes ecran-chat-ecoute {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* --- 9. Desktop (>= 840 px) : la saisie suit la colonne, pas la barre basse - */

@media (min-width: 840px) {
  .ecran-chat { padding-bottom: calc(var(--cible) + var(--sp-8)); }

  /* Pas de barre basse en desktop : la page d'accueil récupère sa hauteur. */
  .ecran-chat.ecran-chat--accueil {
    min-height: calc(100vh - var(--barre-haute) - var(--sp-12) * 2);
    min-height: calc(100dvh - var(--barre-haute) - var(--sp-12) * 2);
  }

  .ecran-chat__saisie {
    left: var(--nav-large);
    bottom: 0;
    padding: var(--sp-3) var(--sp-6) var(--sp-4);
    background: var(--papier);
  }
  /* Centrée comme la colonne qu'elle prolonge : la barre fixe couvre
     exactement la zone de contenu (left: --nav-large), les deux boîtes se
     centrent donc sur le même axe. */
  .ecran-chat__saisie-corps {
    max-width: calc(var(--colonne-max) - var(--sp-6) * 2);
    margin: 0 auto;
  }
}

/* --- 9. Mail rédigé par le chatbot -------------------------------------------- */

.ecran-chat__mail-entete {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.ecran-chat__mail-label { color: var(--encre-douce); flex: none; }
.ecran-chat__mail-objet { color: var(--encre); font-weight: var(--gras-titre); }

/* Le corps garde ses retours à la ligne : c'est le texte tel qu'il partira. */
.ecran-chat__mail-corps {
  margin: 0;
  padding: var(--sp-3);
  background: var(--surface-creuse);
  border-radius: var(--r-1);
  font: inherit;
  font-size: var(--fs-meta);
  line-height: var(--lh-corps);
  color: var(--encre);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- 10. Biens qui entrent (vert) et sortent (rouge) d'un rapprochement ---- */

.ecran-chat__biens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ecran-chat__bien-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.ecran-chat__bien-legende {
  margin: 0;
  padding: 0 var(--sp-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--encre-douce);
}

.ecran-chat__bien {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-1);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}
.ecran-chat__bien--ajoute { background: var(--succes-fond); color: var(--succes-encre); }
.ecran-chat__bien--retire { background: var(--danger-fond); color: var(--danger-encre); }

.ecran-chat__bien-marque { font-weight: var(--gras-titre); flex: none; }
.ecran-chat__bien-corps  { display: flex; flex-direction: column; min-width: 0; }
.ecran-chat__bien-titre  { font-weight: var(--gras-titre); }
.ecran-chat__bien-detail { opacity: .9; }