/* « Discuter » comme une messagerie professionnelle (P109, P110 ; D105, D119), dans les deux styles.
   Repères : Slack, Intercom, Front et les applications de chat des IA. Une colonne étroite des agents (portrait de 32 px,
   rôle, état), un en-tête compact, le fil sur toute la hauteur avec une largeur de lecture de 760 px au plus, les messages
   d'un même auteur groupés, des heures discrètes et la saisie toujours visible en bas. Au téléphone, la liste des agents
   passe dans un menu et la saisie tient dans le premier écran. Le style Archipel reprend les jetons de style-site.css. */

.cache-visuel { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- cadre : dans l'espace du titulaire, une carte qui prend la hauteur de l'écran ; en page seule, tout l'écran */
.page-discuter { margin-bottom: -18px; }
.messagerie { display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100vh - 44px); height: calc(100dvh - 44px);
  min-height: 460px; overflow: hidden; background: var(--blanc); border: 1px solid var(--oat); border-radius: 12px; }
.messagerie.avec-agents { grid-template-columns: 232px minmax(0, 1fr); }
.messagerie.pleine { grid-template-columns: 256px minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 0; border: 0;
  border-radius: 0; }
body.page-chat { background: var(--blanc); }
/* P113 : chez le titulaire aussi, la messagerie prend toute la place à droite du menu, sans carte ni marge ; le menu de
   l'espace reste en place quand on lit le fil */
.contenu.pleine { padding: 0; max-width: none; }
.contenu.pleine .page-discuter { margin: 0; }
.contenu.pleine .messagerie { height: 100vh; height: 100dvh; min-height: 420px; border: 0; border-radius: 0; }
body.page-pleine .cote { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }

/* ---------- colonne des agents */
.msg-agents { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 14px 10px;
  background: var(--cream); border-right: 1px solid var(--oat); }
.messagerie.pleine .msg-agents { padding: 16px 12px 12px; }
.msg-agents .marque { padding: 2px 6px 2px; }
.msg-entreprise { margin: 0 6px 16px; font-size: 12.5px; line-height: 1.35; color: var(--pale); }
.msg-sur-titre { margin: 2px 8px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pale); }
.msg-liste { display: grid; gap: 2px; }
.msg-agent { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 8px; border-radius: 8px;
  color: var(--noir); }
.msg-agent:hover { background: rgba(17, 17, 17, .05); }
.msg-agent.sel { background: var(--blanc); box-shadow: inset 2px 0 0 var(--orange-texte), 0 1px 2px rgba(17, 17, 17, .06); }
.msg-agent .rond.portrait { width: 32px; height: 32px; flex: none; }
.msg-agent-texte { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.msg-agent-texte b { font-size: 14px; font-weight: 600; }
/* Le rôle tient sur deux lignes avant d'être coupé (recette du 03/10 : coupé à une ligne à 1366 px) ; le texte entier
   reste dans l'infobulle. */
.msg-agent-texte span { overflow: hidden; font-size: 12.5px; color: var(--pale); display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.msg-aide { margin: 10px 8px 0; font-size: 12.5px; line-height: 1.45; color: var(--pale); }
.msg-etat { flex: none; align-self: flex-start; margin-top: 2px; font-size: 11.5px; color: var(--pale); }
.msg-etat .points i { width: 5px; height: 5px; }
.msg-moi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 8px; margin-top: auto;
  padding: 12px 6px 0; border-top: 1px solid var(--oat); font-size: 13.5px; }
.msg-agents .msg-liste + .msg-moi { margin-top: auto; }
.msg-moi b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-moi-liens { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.msg-moi-liens form { display: inline; }
.msg-moi .bascule-style { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.msg-plus-compte .bascule-style { justify-self: start; }
.msg-moi-liens a, .msg-plus-panneau a, .lien-menu { padding: 0; border: 0; background: none; font: inherit; color: var(--doux);
  text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 2px; cursor: pointer; text-align: left; }
.msg-moi-liens a:hover, .msg-plus-panneau a:hover, .lien-menu:hover { color: var(--orange-texte); }

/* ---------- en-tête compact : portrait, prénom et rôle, recherche, style, menu « ⋯ » */
.msg-panneau { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--blanc); }
.msg-tete { flex: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px 10px 20px;
  border-bottom: 1px solid var(--oat); }
.msg-ident { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.msg-ident .rond.portrait { width: 36px; height: 36px; flex: none; }
.msg-ident-texte { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; min-width: 0;
  line-height: 1.25; }
.msg-ident h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.msg-ident-texte > span { grid-column: 1 / -1; overflow: hidden; font-size: 12.5px; color: var(--pale); white-space: nowrap;
  text-overflow: ellipsis; }
.msg-ident .point-aide > summary { width: 20px; height: 20px; }
.msg-recherche { flex: none; }
.msg-recherche input[type=search] { width: 220px; max-width: none; height: 34px; padding: 6px 12px; border: 1px solid var(--oat);
  border-radius: 8px; background: var(--cream); font: inherit; font-size: 13.5px; color: var(--noir); }
.msg-recherche input[type=search]:focus { background: var(--blanc); }
.msg-plus-panneau .msg-recherche input[type=search] { width: 100%; }
.msg-bouton { display: grid; place-items: center; width: 34px; height: 34px; list-style: none; cursor: pointer;
  border: 1px solid var(--oat); border-radius: 8px; background: var(--blanc); color: var(--doux); font-size: 18px; line-height: 1; }
.msg-bouton::-webkit-details-marker { display: none; }
.msg-bouton:hover { border-color: var(--sand); color: var(--noir); }
.msg-plus, .msg-choix { position: relative; flex: none; }
.msg-plus-panneau, .msg-choix-panneau { position: absolute; top: calc(100% + 6px); z-index: 30; display: grid; gap: 10px;
  width: min(320px, calc(100vw - 24px)); padding: 14px; background: var(--blanc); border: 1px solid var(--oat);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(17, 17, 17, .14); }
.msg-plus-panneau { right: 0; font-size: 14px; }
.msg-plus-panneau .sous { margin: 0; font-size: 12.5px; }
.msg-plus-compte { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--oat); }
.msg-choix, .msg-espace { display: none; }
.msg-choix-panneau { left: 0; gap: 2px; padding: 8px; }
.msg-panneau > .visite { flex: none; margin: 12px 20px 0; }

/* ---------- fil : toute la hauteur, lecture de 760 px au plus, centrée */
.msg-fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px max(20px, calc((100% - 760px) / 2)) 20px; }
.msg-fil.fil-conv { display: block; }
.msg-fil:focus { outline: none; }
.messagerie .jour { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; font-family: inherit; font-size: 12px;
  font-weight: 600; letter-spacing: 0; color: var(--pale); text-align: center; }
.messagerie .jour::before, .messagerie .jour::after { content: ""; flex: 1; height: 1px; background: var(--oat); }
.messagerie .note { margin: 14px 0 0; }

/* l'agent : portrait dans la marge, prénom et heure sur une ligne, puis le texte ; la suite d'un groupe sans en-tête */
.messagerie .lui { position: relative; display: grid; grid-template-columns: 32px auto minmax(0, 1fr);
  grid-template-areas: "av qui quand" "av texte texte"; align-items: baseline; gap: 2px 12px; max-width: none;
  margin: 16px 0 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 15px; line-height: 1.55;
  white-space: normal; }
.messagerie .lui > .av { grid-area: av; align-self: start; margin-top: 2px; }
.messagerie .lui > .av .rond.portrait { width: 32px; height: 32px; }
.messagerie .lui > .qui, .messagerie .delegation .qui { display: inline; margin: 0; font-family: inherit; font-size: 14px;
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--noir); }
.messagerie .lui > .quand, .messagerie .delegation .quand { display: inline; margin: 0; font-family: inherit; font-size: 12px;
  font-style: normal; color: var(--pale); }
.messagerie .lui > .qui { grid-area: qui; }
.messagerie .lui > .quand { grid-area: quand; }
.messagerie .lui > .texte { grid-area: texte; }
.messagerie .lui > .note-reponse { grid-column: 2 / -1; }
.messagerie .lui.suite { margin-top: 4px; }
.messagerie .lui.suite > .av { visibility: hidden; height: 0; }
.messagerie .lui.suite > .qui { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.messagerie .lui.suite > .quand { position: absolute; left: 0; top: 4px; width: 32px; font-size: 10.5px; text-align: right;
  opacity: 0; }
.messagerie .lui.suite:hover > .quand, .messagerie .lui.suite:focus-within > .quand { opacity: 1; }

/* vous : à droite, dans une bulle, l'heure en petit dessous */
.messagerie .moi { display: block; width: fit-content; max-width: min(78%, 600px); margin: 16px 0 0 auto;
  padding: 9px 14px 7px; background: var(--moi); border: 0; border-radius: 16px 16px 4px 16px; font-size: 15px;
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.messagerie .moi.suite { margin-top: 4px; border-top-right-radius: 4px; }
.messagerie .moi > .qui { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.messagerie .moi > .quand { display: block; margin: 2px 0 0; font-family: inherit; font-size: 11px; color: var(--pale);
  text-align: right; }
.messagerie .quand, .msg-etat { white-space: nowrap; }   /* P114 : « 8 h 51 » jamais coupé */

/* D105 : les délégations, en retrait sous l'agent qui confie ; la réponse signée par l'agent qui a cherché */
.messagerie .delegation { display: block; max-width: none; margin: 8px 0 0 44px; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--orange-texte); font-size: 13.5px; font-style: normal; color: var(--doux); }
.messagerie .delegation .qui { font-size: 13.5px; margin-right: 4px; }
.messagerie .delegation .quand { margin-left: 8px; }
.messagerie .delegation.attente, .messagerie .delegation.echec { border-left-color: var(--sand); }
.messagerie .delegation.travail { display: flex; align-items: center; gap: 8px; }
.messagerie .lui.delegue { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "qui quand" "texte texte";
  margin: 6px 0 0 44px; padding: 6px 0 6px 14px; border: 0; border-left: 2px solid var(--lui-bord); border-radius: 0;
  background: none; }
.messagerie .lui.delegue > .qui { display: inline-flex; align-items: center; gap: 6px; }
.messagerie .lui.delegue > .qui .rond.mini { width: 20px; height: 20px; margin: 0; vertical-align: 0; }

/* fil vide : un accueil court, sans grand portrait */
.msg-vide { display: grid; justify-items: center; gap: 6px; padding: 12vh 16px 0; text-align: center; }
.msg-vide .rond.portrait.enorme { width: 56px; height: 56px; }
.msg-vide-nom { display: grid; margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.msg-vide-nom span { font-size: 13px; font-weight: 400; color: var(--pale); }
.msg-vide .note { max-width: 420px; margin: 4px 0 0; font-size: 14px; color: var(--doux); }

/* ---------- saisie fixée en bas, alignée sur le fil */
.msg-saisie { flex: none; padding: 8px max(20px, calc((100% - 760px) / 2)) 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom)); background: var(--blanc); }
.msg-saisie .saisie { position: static; padding: 0; border: 0; background: none; }
.messagerie .champ { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; background: var(--blanc);
  border: 1px solid var(--sand); border-radius: 12px; box-shadow: 0 1px 2px rgba(17, 17, 17, .05); }
.messagerie .champ:focus-within { border-color: var(--noir); box-shadow: 0 0 0 1px var(--noir); }
.messagerie .champ textarea { flex: 1; min-height: 26px; max-height: 180px; max-width: none; padding: 4px 0; border: 0;
  outline: 0; resize: none; background: transparent; font: inherit; font-size: 15px; line-height: 1.5; color: var(--noir); }
.messagerie .champ textarea:focus-visible { outline: none; }   /* le bord de la zone de saisie montre le focus */
.messagerie .ico { align-self: center; padding: 2px 4px; font-size: 18px; color: var(--pale); cursor: pointer; }
.messagerie .ico:hover { color: var(--orange-texte); }
.messagerie .env { flex: none; min-height: 36px; padding: 7px 16px; border: 0; border-radius: 8px; background: var(--orange-texte);
  color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.messagerie .env[disabled] { opacity: .6; cursor: wait; }
.messagerie .env.second { background: var(--blanc); color: var(--doux); border: 1px solid var(--oat); }
.messagerie .pieces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.messagerie .pieces:empty { display: none; }
.messagerie .pieces .badge button { padding: 0 0 0 4px; border: 0; background: none; font: inherit; color: var(--pale); cursor: pointer; }
.messagerie .etat-envoi { min-height: 18px; margin-top: 4px; font-size: 12.5px; line-height: 18px; color: var(--orange-texte); }
/* P114 : hauteur fixe : la saisie ne grandit pas à l'envoi et ne cache pas « Maiwenn réfléchit » */
.messagerie .aide-saisie { margin: 6px 0 0; font-size: 11.5px; color: var(--pale); text-align: center; }
.note-reponse { display: block; margin-top: 6px; font-size: 12px; font-style: italic; color: var(--pale); }
.lui[aria-busy="true"] .texte:empty::after { content: "…"; color: var(--pale); }

@media (min-width: 821px) { .msg-plus-compte, .msg-recherche.tel { display: none; } }
/* P121 (D151) : un seul agent, pas de colonne ; le compte et le style restent dans « ⋯ », sur ordinateur aussi */
.messagerie.pleine.sans-colonne { grid-template-columns: minmax(0, 1fr); }
.messagerie.sans-colonne .msg-plus-compte { display: grid; }

/* ---------- P110 : au téléphone, la saisie au premier écran, les agents dans un menu */
@media (max-width: 820px) {
  .messagerie.avec-agents, .messagerie.pleine { grid-template-columns: minmax(0, 1fr); }
  .messagerie .msg-agents { display: none; }
  .msg-choix { display: block; }
  .msg-espace { display: grid; font-size: 17px; }   /* P137 : l'espace en un geste, pour le titulaire */
  body.page-pleine .cote { display: none; }   /* P113 : un seul bandeau, celui de la messagerie */
  .msg-tete { gap: 8px; min-height: 54px; padding: 8px 10px; }
  .msg-tete > .msg-recherche { display: none; }
  .msg-ident { gap: 8px; }
  .msg-ident .rond.portrait { width: 32px; height: 32px; }
  .msg-ident h1 { font-size: 15px; }
  .msg-fil { padding: 4px 12px 12px; }
  .msg-saisie { padding: 6px 10px 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .messagerie .aide-saisie { display: none; }
  .messagerie .lui { grid-template-columns: 28px auto minmax(0, 1fr); column-gap: 10px; }
  .messagerie .lui > .av .rond.portrait { width: 28px; height: 28px; }
  .messagerie .lui.suite > .quand { width: 28px; }
  .messagerie .delegation, .messagerie .lui.delegue { margin-left: 38px; }
  .messagerie .moi { max-width: 86%; }
  .msg-panneau > .visite { margin: 10px 10px 0; }
  .msg-vide { padding-top: 6vh; }
}
@media (max-width: 380px) { .msg-ident-texte > span { display: none; } }

/* ---------- style Archipel : fond marine, surfaces du site, corail pour l'accent */
html[data-style="site"] body.page-chat { background: var(--fond); }
html[data-style="site"] .messagerie { background: var(--fond-bande); border-color: var(--bordure);
  border-radius: var(--arrondi-carte); box-shadow: var(--ombre-carte); }
html[data-style="site"] .messagerie.pleine { border-radius: 0; box-shadow: none; }
html[data-style="site"] .msg-agents { background: var(--fond); border-right-color: var(--bordure); }
html[data-style="site"] .msg-agent { color: var(--texte-2); border-radius: 12px; }
html[data-style="site"] .msg-agent:hover { background: rgba(255, 255, 255, 0.05); }
html[data-style="site"] .msg-agent.sel { background: rgba(255, 255, 255, 0.07); box-shadow: inset 2px 0 0 var(--corail); }
html[data-style="site"] .msg-agent-texte b, html[data-style="site"] .msg-moi b { color: var(--texte); }
html[data-style="site"] .msg-agent-texte span, html[data-style="site"] .msg-entreprise, html[data-style="site"] .msg-etat,
html[data-style="site"] .msg-aide,
html[data-style="site"] .msg-sur-titre { color: var(--mention); }
html[data-style="site"] .msg-sur-titre { letter-spacing: var(--ecart-badge); font-weight: var(--graisse-forte); }
html[data-style="site"] .msg-moi { border-top-color: var(--bordure); }
html[data-style="site"] .msg-moi-liens a, html[data-style="site"] .msg-plus-panneau a, html[data-style="site"] .lien-menu {
  color: var(--texte-2); text-decoration-color: var(--bordure-forte); }
html[data-style="site"] .msg-moi-liens a:hover, html[data-style="site"] .msg-plus-panneau a:hover,
html[data-style="site"] .lien-menu:hover { color: var(--corail); }
html[data-style="site"] .msg-panneau, html[data-style="site"] .msg-saisie { background: var(--fond-bande); }
html[data-style="site"] .msg-tete { border-bottom-color: var(--bordure); }
html[data-style="site"] .msg-ident h1 { font-family: var(--police-titres); font-size: 17px; font-weight: var(--graisse-titre); }
html[data-style="site"] .msg-ident-texte > span { color: var(--corail); font-weight: var(--graisse-demi); }
html[data-style="site"] .msg-ident .rond.portrait, html[data-style="site"] .msg-vide .rond.portrait {
  box-shadow: 0 0 22px var(--lueur); }
html[data-style="site"] .msg-recherche input[type=search] { background: rgba(255, 255, 255, 0.05); border-color: var(--bordure-forte);
  color: var(--texte); }
html[data-style="site"] .msg-recherche input[type=search]::placeholder { color: var(--mention); }
html[data-style="site"] .msg-bouton { background: transparent; border-color: var(--bordure-forte); color: var(--texte-2); }
html[data-style="site"] .msg-bouton:hover { border-color: var(--corail); color: var(--corail); }
html[data-style="site"] .msg-plus-panneau, html[data-style="site"] .msg-choix-panneau { background: var(--surface-2);
  border-color: var(--bordure); border-radius: 16px; box-shadow: var(--ombre-carte); }
html[data-style="site"] .msg-plus-compte { border-top-color: var(--bordure); }
html[data-style="site"] .messagerie .jour { justify-self: auto; margin: 20px 0 4px; padding: 0; border: 0; border-radius: 0;
  background: none; font-family: var(--police-texte); color: var(--mention); }
html[data-style="site"] .messagerie .jour::before, html[data-style="site"] .messagerie .jour::after { background: var(--bordure); }
html[data-style="site"] .messagerie .lui { padding: 0; border: 0; border-radius: 0; background: none; font-size: 15px;
  line-height: 1.6; color: var(--texte-2); }
html[data-style="site"] .messagerie .lui > .qui, html[data-style="site"] .messagerie .delegation .qui {
  font-family: var(--police-texte); font-size: 14px; font-weight: var(--graisse-forte); letter-spacing: 0; color: var(--texte); }
html[data-style="site"] .messagerie .delegation .qui { font-size: 13.5px; }
html[data-style="site"] .messagerie .quand { color: var(--mention); }
html[data-style="site"] .messagerie .moi { padding: 9px 14px 7px; background: var(--surface); border: 1px solid var(--bordure-forte);
  border-radius: 16px 16px 4px 16px; color: var(--texte); }
html[data-style="site"] .messagerie .moi.suite { border-top-right-radius: 4px; }
html[data-style="site"] .messagerie .lui.delegue { padding: 6px 0 6px 14px; border: 0; border-left: 2px solid rgba(255, 138, 107, 0.4);
  border-radius: 0; background: none; }
html[data-style="site"] .messagerie .delegation { color: var(--texte-2); border-left-color: var(--corail); }
html[data-style="site"] .messagerie .delegation.attente, html[data-style="site"] .messagerie .delegation.echec {
  border-left-color: var(--bordure-forte); }
html[data-style="site"] .msg-vide-nom { font-family: var(--police-titres); color: var(--texte); }
html[data-style="site"] .msg-vide-nom span { font-family: var(--police-texte); color: var(--corail); font-weight: var(--graisse-demi); }
html[data-style="site"] .msg-vide .note { color: var(--texte-2); }
html[data-style="site"] .messagerie .champ { background: var(--surface); border-color: var(--bordure-forte); border-radius: 14px;
  box-shadow: none; }
html[data-style="site"] .messagerie .champ:focus-within { border-color: var(--corail); box-shadow: 0 0 0 1px var(--corail); }
html[data-style="site"] .messagerie .champ textarea { color: var(--texte); }
html[data-style="site"] .messagerie .champ textarea::placeholder { color: var(--mention); }
html[data-style="site"] .messagerie .ico { color: var(--mention); }
html[data-style="site"] .messagerie .ico:hover { color: var(--corail); }
html[data-style="site"] .messagerie .env { border-radius: var(--arrondi-bouton); background: var(--degrade-bouton);
  box-shadow: 0 6px 18px rgba(224, 103, 79, 0.28); }
html[data-style="site"] .messagerie .env.second { background: transparent; color: var(--texte-2); border: 1px solid var(--bordure-forte);
  box-shadow: none; }
html[data-style="site"] .messagerie .etat-envoi { color: var(--corail); }
html[data-style="site"] .messagerie .aide-saisie, html[data-style="site"] .note-reponse { color: var(--mention); }
html[data-style="site"] .contenu.pleine .messagerie { border-radius: 0; box-shadow: none; }