/* ───────────────────────────────────────────────────────────────────────────
   Librairie Speyy, zone « chat » (lot « tout de la maquette », 22/10/2026).

   Ce fichier porte les éléments propres à le fil d'une conversation et le compositeur (maquette 01) : en-tête de conversation, séparateurs de date, « Travail effectué », tableaux, fichiers, agents en parallèle, carte de mail, compositeur sur deux lignes.

   Règles de la librairie (`v3/docs/LIBRAIRIE-SPEYY.md`) : AUCUNE valeur ici. Une
   couleur, une police, un rayon ou une ombre se lit dans un jeton (`var(--sp-…)`).
   Une valeur vraiment nouvelle va dans le thème (`themes/`). Chargé après
   `elements.css`, sur toutes les pages, par `bridge.speyy_ui_head`.

   🔴 Ordre de chargement : cette zone passe AVANT `access-chat.css` et
   `speyy-v3.css`. Une règle qui redessine une classe du chat porte donc un
   préfixe plus précis (`.chat-column`, `#composer-group`, `.app-header`) ; le
   compositeur est préfixé par `#composer-group`, qui voyage avec lui jusqu'à
   l'accueil (maquette 02).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── En-tête de la conversation (mission M2) ─────────────────────────────────
   Titre en EB Garamond, pastille de visibilité, propriétaire et heure de début ;
   à droite « Partager », les participants (avatars ronds) et « ⋯ ». */
.chat-column .app-header {
  border-bottom: 1px solid var(--sp-line);
  background: var(--sp-bg);
  backdrop-filter: none;
}
.chat-column .app-header .header-inner {
  width: auto;
  margin: 0;
  padding: 12px 28px;
  min-height: 64px;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 12px;
}
.chat-column .app-header .header-right { flex-wrap: nowrap; gap: 8px; margin-left: auto; }
.v3-conv-head { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.v3-conv-head[hidden] { display: none; }
.v3-conv-head-title {
  margin: 0;
  font: 400 22px/1.2 var(--sp-title-font);
  color: var(--sp-title-fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3-conv-head-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 12.5px; color: var(--sp-text-soft); }
.v3-conv-head-pill {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--sp-chip-line); border-radius: var(--sp-chip-radius); background: var(--sp-chip-bg);
  color: var(--sp-chip-fg); font-size: 12px; white-space: nowrap;
}
.v3-conv-head-pill svg { width: 12px; height: 12px; flex: none; }
.v3-conv-head-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-conv-share {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--sp-btn-line); border-radius: var(--sp-btn-radius); background: var(--sp-btn-bg);
  color: var(--sp-btn-fg); font: 500 13px var(--sp-font-sans); cursor: pointer; white-space: nowrap;
}
.v3-conv-share:hover { background: var(--sp-btn-hover); }
.v3-conv-share:focus-visible { outline: none; box-shadow: var(--sp-btn-focus); }
.v3-conv-share svg { width: 16px; height: 16px; flex: none; }
.v3-conv-share[hidden] { display: none; }
/* Menu replié : le bouton du rail se pose en haut à gauche, le titre lui laisse sa place. */
.app-shell.sidebar-collapsed .chat-column .app-header .header-inner { padding-left: 72px; }
/* La pile parle d'elle-même (maquette) : le mot « Participants » reste dans l'infobulle. */
.app-header #v3-presence .v3-presence-label { display: none; }

/* ── Le fil : largeur, séparateurs de date, heures, ligne d'auteur ─────────── */
.chat-column .messages-inner { width: min(calc(100% - 56px), 764px); }
.chat-column .app-footer .footer-inner { width: min(calc(100% - 56px), 820px); }
.message-day {
  justify-self: center;
  align-self: center;
  margin: 4px 0 -4px;
  font: 500 11px/1 var(--sp-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-text-soft);
}
.chat-column .message-time { font-size: 11.5px; color: var(--sp-text-soft); font-variant-numeric: tabular-nums; }
.chat-column .message--user .message-time { align-self: flex-end; }
.chat-column .message--other .message-time { align-self: flex-start; }
.message-who { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; color: var(--sp-text-soft); }
.message-who-mark { width: 18px; height: 18px; object-fit: contain; flex: none; }

/* Le texte du fil à la taille de la maquette : 14,5 px. */
.chat-column .message--assistant .message-card { font-size: 14.5px; line-height: 1.6; }
.chat-column .message--user .message-card { font-size: 14.5px; line-height: 1.55; }

/* Titres des réponses : EB Garamond, poids de la maquette (h3 : 19 px, 500). */
.chat-column .message-markdown h1,
.chat-column .message-markdown h2,
.chat-column .message-markdown h3,
.chat-column .message-markdown h4 { font-family: var(--sp-title-font); font-weight: 500; color: var(--sp-title-fg); letter-spacing: -0.005em; }
.chat-column .message-markdown h1 { font-size: 26px; line-height: 1.2; }
.chat-column .message-markdown h2 { font-size: 22px; line-height: 1.22; }
.chat-column .message-markdown h3 { font-size: 19px; line-height: 1.25; margin: 0.7em 0 0.45em; }
.chat-column .message-markdown h4 { font-size: 17px; line-height: 1.3; }

/* ── Tableaux : sans filets verticaux, en-têtes en chasse fixe, note de source ─ */
.chat-column .message-markdown .md-table-wrap { background: var(--sp-table-bg); }
.chat-column .message-markdown .md-table th,
.chat-column .message-markdown .md-table td { padding: 10px 12px; border-right: 0; vertical-align: middle; }
.chat-column .message-markdown .md-table thead th { background: var(--sp-table-bg); font-size: 11px; }
.chat-column .message-markdown .md-table tbody tr:nth-child(even) td { background: var(--sp-table-bg); }
.chat-column .message-markdown .md-table caption {
  caption-side: bottom; text-align: left; padding: 8px 12px; font-size: 12px; color: var(--sp-text-soft);
  border-top: 1px solid var(--sp-table-line);
}
.chat-column .message-markdown .md-table .sp-st { font-weight: 500; }

/* ── « Travail effectué » : replié (étapes et durée), déplié en frise ─────── */
.chat-column .activity-timeline { border: 1px solid var(--sp-think-line); border-radius: var(--sp-think-radius); background: var(--sp-think-bg); }
.chat-column .activity-timeline-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 0; }
.chat-column .activity-summary-icon {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: var(--sp-radius-sm); background: var(--sp-think-icon-bg); color: var(--sp-text-soft);
}
.chat-column .activity-summary-icon svg { width: 15px; height: 15px; }
.chat-column .activity-summary-main { display: flex; flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; }
.chat-column .activity-timeline .activity-title { font-size: 13.5px; font-weight: 500; color: var(--sp-text); white-space: nowrap; }
.chat-column .activity-timeline .activity-sub { font-size: 12.5px; color: var(--sp-text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-column .activity-timeline-list--grouped { padding: 4px 14px 12px 50px; }
/* Une étape = un point coché, son titre et ses outils, son heure à droite. */
.chat-column .reflection .reflection-dot {
  display: grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box;
  border-radius: var(--sp-status-dot-radius); background: var(--sp-surface); border: 1px solid var(--sp-line-strong);
  color: var(--sp-ok);
}
.chat-column .reflection--done .reflection-dot { border-color: var(--sp-ok-line); background: var(--sp-surface); }
.chat-column .reflection .reflection-dot svg { width: 11px; height: 11px; }
.chat-column .reflection--running .reflection-dot { border-color: var(--sp-info); }
.chat-column .reflection--running .reflection-dot::after {
  content: ""; width: 6px; height: 6px; border-radius: var(--sp-status-dot-radius); background: var(--sp-info);
  animation: sp-pulse 1.2s ease-in-out infinite;
}
.chat-column .reflection .reflection-title { font-size: 13px; font-weight: 500; color: var(--sp-text); }
.chat-column .reflection-aside .activity-step-status { display: none; }
.reflection-time { font: 11px var(--sp-font-mono); color: var(--sp-text-soft); white-space: nowrap; }

/* ── Agents en parallèle ──────────────────────────────────────────────────── */
.chat-column .subagents-box { border: 1px solid var(--sp-block-line); border-radius: var(--sp-block-radius); background: var(--sp-block-bg); padding: 0; overflow: hidden; }
.chat-column .subagents-box-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--sp-block-line); font-size: 13.5px; }
.subagents-box-icon { display: inline-flex; color: var(--sp-text-soft); }
.subagents-box-icon svg { width: 16px; height: 16px; }
.chat-column .subagents-box-title { font-weight: 500; color: var(--sp-text); }
.chat-column .subagents-box-count { font-size: 12.5px; font-weight: 400; color: var(--sp-text-soft); background: transparent; border: 0; padding: 0; }
.chat-column .subagents-box-count.is-live { color: var(--sp-text-soft); background: transparent; border-color: transparent; }
/* L'état est dans la pastille : plus de frise de points à gauche des lignes. */
.chat-column .subagent-row { padding-left: 0; border-top: 0; }
.chat-column .subagent-row::before,
.chat-column .subagent-row-dot { display: none; }
.chat-column .subagent-row + .subagent-row { border-top: 1px dashed var(--sp-block-line); }
.chat-column .subagent-row-head { padding: 10px 14px; gap: 10px; }
.chat-column .subagent-row-name { font-size: 13px; font-weight: 400; color: var(--sp-text); }
.chat-column .subagent-row-sub { font-size: 12px; color: var(--sp-text-soft); }
.chat-column .subagent-row-aside .sp-st { font-weight: 500; }

/* ── Fichier livré : « Aperçu » et « Télécharger » ────────────────────────── */
.chat-column .msg-download-btn {
  border: 1px solid var(--sp-file-line); border-radius: var(--sp-file-radius); background: var(--sp-file-bg);
  padding: 8px 10px 8px 8px; gap: 10px; box-shadow: var(--sp-shadow-none);
}
.chat-column .msg-download-btn .msg-download-icon { border-radius: var(--sp-file-icon-radius); background: var(--sp-file-icon-bg); color: var(--sp-text-soft); }
.chat-column .msg-download-btn .msg-download-name { font-weight: 500; }
.chat-column .msg-download-btn .msg-download-cta {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--sp-btn-line); border-radius: var(--sp-btn-radius); background: var(--sp-btn-bg);
  color: var(--sp-btn-fg); font: 500 12.5px var(--sp-font-sans); text-decoration: none; white-space: nowrap;
}
.chat-column .msg-download-btn .msg-download-cta:hover { background: var(--sp-btn-hover); }
.chat-column .msg-download-btn .msg-download-cta svg { width: 13px; height: 13px; }
.chat-column .msg-download-btn .msg-download-cta--preview { margin-left: 6px; }

/* ── Carte de mail : « RÉPONSE · depuis <boîte> », corps encadré, pied ─────── */
.chat-column .email-editor { border: 1px solid var(--sp-mail-line); border-radius: var(--sp-mail-radius); background: var(--sp-mail-bg); box-shadow: var(--sp-mail-shadow); }
.chat-column .email-editor-header { background: var(--sp-mail-head-bg); border-bottom: 1px solid var(--sp-mail-line); padding: 11px 16px; gap: 10px; }
.chat-column .email-editor-action { font: 500 11px/1 var(--sp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-text); }
.email-editor-from { margin-left: auto; font-size: 12.5px; color: var(--sp-text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-column .email-editor-fields { padding: 8px 16px 0; gap: 0; }
.chat-column .email-editor-row { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 6px 0; align-items: center; }
.chat-column .email-editor-label { font: 500 11px/1 var(--sp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-text-soft); }
.chat-column .email-editor-input {
  height: 36px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--sp-field-line);
  border-radius: var(--sp-field-radius); background: var(--sp-field-bg); font: 14px var(--sp-font-sans); color: var(--sp-field-fg);
}
/* Le corps du mail : encadré, sans libellé visible (la maquette le montre seul ; le libellé reste lu). */
.chat-column .email-editor-row--body { display: block; padding: 8px 0 0; }
.chat-column .email-editor-row--body > .email-editor-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.chat-column .email-editor-textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--sp-mail-body-line);
  border-radius: var(--sp-mail-body-radius); background: var(--sp-mail-bg); font: 14px/1.6 var(--sp-font-sans); color: var(--sp-text);
}
.chat-column .email-editor-actions {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px;
  margin-top: 14px; padding: 14px 16px; border-top: 1px solid var(--sp-mail-line);
}
.email-editor-safe { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; color: var(--sp-text-soft); }
.email-editor-safe svg { width: 14px; height: 14px; flex: none; }

/* ── Compositeur sur deux lignes (maquettes 01 et 02) ────────────────────────
   La saisie en haut ; en bas pièce jointe, micro, mode (nom et chevron), puis
   l'envoi rond. Préfixé par `#composer-group` : il vaut au fil ET à l'accueil. */
#composer-group .composer-shell.is-two-line {
  display: grid;
  grid-template-areas: "text text" "left right";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 12px 12px 10px 16px;
}
#composer-group .composer-shell.is-two-line .composer-textarea {
  grid-area: text; width: 100%; padding: 2px 0 8px; font: 15px/1.5 var(--sp-font-sans); color: var(--sp-text); align-self: stretch;
}
#composer-group .composer-shell.is-two-line .composer-rec,
#composer-group .composer-shell.is-two-line .composer-transcribing { grid-area: text; }
#composer-group .composer-shell.is-two-line .composer-left-actions { grid-area: left; display: flex; align-items: center; gap: 2px; min-height: 0; margin-left: -6px; }
#composer-group .composer-shell.is-two-line .composer-actions { grid-area: right; min-height: 0; }
#composer-group .composer-shell.is-two-line .action-button { width: 36px; height: 36px; }
#composer-group .composer-shell.is-two-line .action-button svg { width: 18px; height: 18px; }
/* Pièce jointe, micro, mode, arrêt : boutons fantômes, comme la maquette. */
#composer-group .composer-shell.is-two-line :is(.action-button--upload, .action-button--stt, .action-button--toolbox, .mobile-plus-btn, .intelligence-trigger) {
  background: transparent; border-color: transparent; color: var(--sp-text-soft); box-shadow: var(--sp-shadow-none);
}
#composer-group .composer-shell.is-two-line :is(.action-button--upload, .action-button--stt, .action-button--toolbox, .mobile-plus-btn, .intelligence-trigger):hover:not(:disabled) {
  background: var(--sp-icon-btn-hover); color: var(--sp-text); transform: none;
}
#composer-group .composer-shell.is-two-line .action-button--stt.is-recording { background: var(--sp-danger-bg); color: var(--sp-danger); border-color: var(--sp-danger-line); }
#composer-group .composer-shell.is-two-line .intelligence-trigger { width: auto; gap: 6px; padding: 0 10px; font: 500 13px var(--sp-font-sans); }
#composer-group .composer-shell.is-two-line .intelligence-selector.is-open .intelligence-trigger { background: var(--sp-icon-btn-hover); color: var(--sp-text); }
#composer-group .composer-shell.is-two-line .intelligence-trigger-icon svg { width: 16px; height: 16px; }
.intelligence-trigger-label { white-space: nowrap; }
.intelligence-trigger-chev { display: inline-flex; color: var(--sp-text-soft); }
.intelligence-trigger-chev svg { width: 14px; height: 14px; }
#composer-group .composer-shell.is-two-line .action-button--send { box-shadow: var(--sp-shadow-none); border-radius: var(--sp-send-radius); }
#composer-group .composer-shell.is-two-line .action-button--send::before { display: none; }
#composer-group .composer-shell.is-two-line .action-button--send:hover:not(:disabled) { background: var(--sp-send-hover); border-color: var(--sp-send-hover); transform: none; }
/* « Entrée pour envoyer · Maj + Entrée pour un retour à la ligne », sous le compositeur. */
#composer-group .composer-home-hint.is-thread { margin-top: -4px; text-align: center; font-size: 11.5px; color: var(--sp-text-soft); }

/* ── Téléphone ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Le bouton du menu (rail, 40 px à 12 px du bord) reste à gauche du titre. */
  .chat-column .app-header .header-inner,
  .app-shell.sidebar-collapsed .chat-column .app-header .header-inner { padding: 10px 12px 10px 64px; min-height: 60px; }
  .v3-conv-head-title { font-size: 18px; }
  .v3-conv-head-by { display: none; }
  /* Comme la maquette au téléphone : ni « Partager » ni la pile dans l'en-tête ; les deux restent dans « ⋯ ». */
  .chat-column .app-header .v3-conv-share,
  .chat-column .app-header #v3-presence { display: none; }
  .chat-column .messages-inner { width: calc(100% - 32px); }
  .chat-column .app-footer .footer-inner { width: calc(100% - 24px); }
  #composer-group .composer-shell.is-two-line { padding: 10px 10px 8px 12px; }
  #composer-group .composer-shell.is-two-line .action-button { width: 40px; height: 40px; }
  #composer-group .composer-shell.is-two-line .intelligence-trigger { width: auto; padding: 0 8px; }
  #composer-group .composer-home-hint.is-thread { display: none; }
  /* Tableaux en lignes empilées : aucun défilement horizontal (maquette 01). */
  .chat-column .message-markdown .md-table thead { display: none; }
  .chat-column .message-markdown .md-table,
  .chat-column .message-markdown .md-table tbody,
  .chat-column .message-markdown .md-table tr,
  .chat-column .message-markdown .md-table td { display: block; width: 100%; box-sizing: border-box; }
  .chat-column .message-markdown .md-table tr { padding: 10px 12px; border-bottom: 1px solid var(--sp-table-line); }
  .chat-column .message-markdown .md-table tbody tr:last-child { border-bottom: 0; }
  .chat-column .message-markdown .md-table td { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border: 0; text-align: right; }
  .chat-column .message-markdown .md-table td::before {
    content: attr(data-l); flex: none; text-align: left; font: 500 10.5px/1.8 var(--sp-font-mono);
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--sp-text-soft);
  }
  .chat-column .message-markdown .md-table td:first-child { display: block; text-align: left; padding-bottom: 6px; font-weight: 500; }
  .chat-column .message-markdown .md-table td:first-child::before { display: none; }
  .chat-column .message-markdown .md-table caption { display: block; }
  .chat-column .email-editor-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .email-editor-safe { flex: 1 1 100%; }
  .chat-column .email-editor-actions .email-editor-btn { flex: 1; height: 40px; }
}