/* L'éditeur riche du chat — Lexxy (#597).
 *
 * Deux choses ici, et rien d'autre :
 *   1. HABILLER Lexxy avec NOS tokens. Leur barre est un filet d'un pixel
 *      `rgb(233,182,15)` sur fond `rgb(252,249,231)` — c'est LEUR jaune, relevé
 *      sur leur salon le 2026-08-03. On reprend la géométrie (gap 2, padding 2,
 *      filet d'un pixel), jamais la couleur : le filet et le fond viennent de
 *      `--color-loam-*`, comme partout ailleurs dans l'app.
 *   2. RENDRE le corps riche d'une ligne dans la bulle, au registre mesuré du
 *      chat : 16 px / 24 px, et un `blockquote` à filet de 3 px, en retrait et
 *      NON italique (VISUAL-SPEC §3 — « un filet de 3 px et un retrait
 *      suffisent »).
 *
 * Hors de toute `@layer`, à dessein : en Tailwind v4 une règle posée dans une
 * couche est écrasée par les utilitaires (mémoire projet « Tailwind v4 layer
 * beats specificity »), et la feuille de Lexxy écrit tout en `:where(...)`, donc
 * à spécificité nulle — n'importe quelle règle d'auteur la bat. Les deux
 * contraintes tirent dans le même sens : on écrit ici, à plat.
 *
 * Ce fichier est servi APP-WIDE par `stylesheet_link_tag :app` (Propshaft prend
 * tout `app/assets/stylesheets`) ; la feuille de Lexxy elle-même, 40 Ko, n'est
 * liée QUE sur l'écran de chat, par un `content_for :head`. */

/* ── La barre, repliée ────────────────────────────────────────────────────────
 *
 * `hidden` ne suffit pas : `:where(lexxy-toolbar) { display: flex }` est une
 * règle d'AUTEUR, et une règle d'auteur bat le `[hidden] { display: none }` de
 * la feuille du navigateur quelle que soit la spécificité. Sans cette ligne, la
 * barre s'affiche dépliée dès le chargement — exactement ce que l'issue interdit. */
lexxy-toolbar[hidden] {
  display: none;
}

/* ── Le champ ──────────────────────────────────────────────────────────────── */

/* Les variables de Lexxy, remappées sur nos tokens — posées sur les DEUX
 * éléments, parce que la barre n'est plus un enfant de l'éditeur (elle est son
 * frère, pour être promue avant lui — voir `campfires/show.html.erb`) et n'hérite
 * donc plus de rien. Mesuré au navigateur après le déplacement : la barre était
 * repassée à `gap: normal`, `padding: 0` et des boutons de 48 px, son défaut
 * `2lh`. Deux sélecteurs, une seule liste. */
lexxy-editor.tn-chat-editor,
lexxy-toolbar.tn-chat-format-bar {
  --lexxy-color-ink: var(--color-loam-800);
  --lexxy-color-ink-medium: var(--color-loam-500);
  --lexxy-color-ink-light: var(--color-loam-400);
  --lexxy-color-ink-lighter: var(--color-loam-200);
  --lexxy-color-ink-lightest: var(--color-loam-100);
  --lexxy-color-canvas: transparent;
  --lexxy-color-text: var(--color-loam-800);
  --lexxy-color-text-subtle: var(--color-loam-400);
  --lexxy-color-link: var(--color-brand-700);
  --lexxy-color-selected: var(--color-loam-100);
  --lexxy-color-selected-hover: var(--color-loam-200);
  --lexxy-color-selected-dark: var(--color-brand-600);
  --lexxy-color-code-bg: var(--color-loam-100);
  --lexxy-color-accent-dark: var(--color-brand-600);
  --lexxy-focus-ring-color: transparent;
  --lexxy-font-base: var(--font-sans);
  --lexxy-radius: 0.25rem;

  /* L'écart entre deux blocs. Le défaut de Lexxy est `1rem` — l'interligne d'un
   * document, pas d'un message de chat : mesuré dans la page, il faisait un
   * composer de 68 px là où le nôtre en faisait 52 avant #597 et le leur 48
   * (VISUAL-SPEC §5). 8 px, c'est le `margin: 8px 0` relevé sur leur
   * `blockquote` — le rythme de la bulle. */
  --lexxy-content-margin: 0.5rem;

  /* Relevé sur LEUR barre le 2026-08-03 : `gap: 2px`, `padding: 2px`, un filet
   * du bas d'un pixel. Et les contrôles du composer font 32 px (VISUAL-SPEC §5),
   * l'échelle du registre — le défaut de Lexxy est `2lh`, soit 48 px avec notre
   * corps de 16/24 : un cinquième traitement dans une rangée qui n'en veut
   * qu'un. */
  --lexxy-toolbar-button-size: 2rem;
  --lexxy-toolbar-gap: 2px;
  --lexxy-toolbar-padding: 2px;
  --lexxy-toolbar-border-size: 1px;
  --lexxy-toolbar-spacing: 0.5rem;
}

/* Le bloc composer porte DÉJÀ son rayon, sa bordure de 2 px et son fond blanc
 * (`rounded-lg border-2 border-loam-200 bg-white`) : l'éditeur ne doit rien y
 * ajouter, sinon c'est un cadre dans un cadre. */
lexxy-editor.tn-chat-editor {
  border: 0;
  border-radius: inherit;
  background-color: transparent;
  color: var(--color-loam-800);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  min-block-size: 0;
}

/* Le contenu éditable. Le padding reprend celui de la zone de texte d'avant
 * (`py-3 pl-4 pr-44`, puis `sm:pr-36`) : la réserve de droite est ce qui empêche
 * le texte de passer SOUS les quatre contrôles qui flottent par-dessus
 * l'extrémité du champ. Le plafond de hauteur remplace `max-h-40`. */
lexxy-editor.tn-chat-editor .lexxy-editor__content {
  padding: 0.75rem 11rem 0.75rem 1rem;
  max-block-size: 10rem;
  min-block-size: 1.5rem;
  overflow-y: auto;
}

/* Le DERNIER bloc ne pousse pas sous lui : sans cette remise à zéro, un composer
 * vide mesure 68 px au lieu de 52 — un paragraphe unique y traîne la marge
 * destinée à séparer deux paragraphes. Mesuré dans la page, pas déduit. */
lexxy-editor.tn-chat-editor .lexxy-editor__content > :last-child {
  margin-block-end: 0;
}

@media (width >= 40rem) {
  lexxy-editor.tn-chat-editor .lexxy-editor__content {
    padding-inline-end: 9rem;
  }
}

/* Le formulaire d'édition d'une ligne (menu ···) n'a aucun contrôle flottant :
 * il n'a donc pas de réserve à droite, et il s'encadre lui-même comme un
 * `.input-sm`. */
lexxy-editor.tn-chat-editor--inline {
  border: 1px solid var(--color-loam-200);
  border-radius: 0.5rem;
  background-color: var(--color-white);
}

lexxy-editor.tn-chat-editor--inline .lexxy-editor__content {
  padding: 0.5rem 0.75rem;
  max-block-size: 12rem;
}

/* Le texte d'invite, au ton de nos `placeholder:text-loam-400`.
 *
 * Et BORNÉ. Le placeholder d'une zone de texte respecte le `padding-right` du
 * champ ; celui de Lexxy est un `::before` en `position: absolute`, qui ne
 * respecte rien. Mesuré à 390 px : « Envoie un message à l'équipe… » passait
 * SOUS l'emoji, le micro et le trombone. La borne rend la réserve de droite, et
 * l'ellipse coupe proprement plutôt que d'enrouler sur une ligne qui n'existe
 * pas encore. */
lexxy-editor.tn-chat-editor.lexxy-editor--empty .lexxy-editor__content::before {
  color: var(--color-loam-400);
  opacity: 1;
  max-inline-size: calc(100% - 12rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (width >= 40rem) {
  lexxy-editor.tn-chat-editor.lexxy-editor--empty .lexxy-editor__content::before {
    max-inline-size: calc(100% - 10rem);
  }
}

/* ── Les boutons de la barre ─────────────────────────────────────────────────
 *
 * UN seul traitement : 32 px, rayon 4, sans fond ni bordure au repos — le même
 * registre que les quatre contrôles du composer. La porte C compte les
 * traitements distincts d'une grappe de contrôles pairs ; deux dessins pour dix
 * boutons voisins, c'est ce qui se lit « pas fini ». */
lexxy-toolbar.tn-chat-format-bar {
  border-block-end: 1px solid var(--color-loam-100);
  background-color: var(--color-loam-50);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  flex-wrap: nowrap;
  color: var(--color-loam-500);
}

.tn-chat-format-button {
  background-color: transparent;
  border: 0;
  border-radius: 0.25rem;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.tn-chat-format-button:hover {
  background-color: var(--color-loam-100);
  color: var(--color-loam-700);
}

.tn-chat-format-button[aria-pressed="true"] {
  background-color: var(--color-brand-50);
  color: var(--color-brand-700);
}

/* Nos icônes sont au TRAIT (`fill="none"`, `stroke="currentColor"`), comme
 * `nav_icon`. La feuille de Lexxy pose `svg { fill: currentColor }` pour les
 * siennes, qui sont pleines : sans cette remise à zéro, chaque icône se remplit
 * et devient une tache. */
.tn-chat-format-button svg {
  fill: none;
  stroke: currentColor;
  block-size: 1.125rem;
  inline-size: 1.125rem;
}

/* ── Les panneaux déroulants de la barre ─────────────────────────────────────
 *
 * Objets FLOTTANTS : détachés de la page, ils ont droit au cumul fond + bordure
 * + ombre que la règle du trait unique interdit à un bloc DANS le flux (#584). */
.tn-chat-format-dropdown {
  position: relative;
  display: inline-flex;
}

.tn-chat-format-panel {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-start: 0;
  z-index: 20;
  min-inline-size: 13rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.25rem;
  border: 1px solid var(--color-loam-200);
  border-radius: 0.75rem;
  background-color: var(--color-white);
  box-shadow: var(--shadow-modal);
}

.tn-chat-format-panel[hidden] {
  display: none;
}

.tn-chat-format-panel--link {
  min-inline-size: 17rem;
  gap: 0.5rem;
  padding: 0.5rem;
}

.tn-chat-format-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.tn-chat-format-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--color-loam-700);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: start;
}

.tn-chat-format-menu-item:hover {
  background-color: var(--color-loam-100);
}

.tn-chat-format-menu-item svg {
  fill: none;
  stroke: currentColor;
  flex: none;
}

/* Le panneau de débordement empile des boutons d'icône : Lexxy y DÉPLACE les
 * boutons qui ne tiennent plus dans la barre (`role="menuitem"`), il ne les
 * recompose pas. Ils y gardent donc leur traitement de barre. */
.lexxy-editor__toolbar-overflow .tn-chat-format-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-inline-size: 0;
  flex-direction: row;
  flex-wrap: wrap;
  max-inline-size: 14rem;
}

/* ── Le corps riche d'une ligne, dans la bulle ───────────────────────────────
 *
 * Le rendu ActionText s'enveloppe dans `.trix-content` (le layout du projet), et
 * `actiontext.css` y remet toutes les marges à zéro. On repose donc le rythme
 * vertical à la main, au cran du chat : 16 px / 24 px, blocs séparés de 8 px —
 * exactement le `margin: 8px 0` mesuré sur leur `blockquote`. */
.tn-chat-rich .trix-content {
  font-size: 1rem;
  line-height: 1.5rem;
}

.tn-chat-rich .trix-content > * + * {
  margin-block-start: 0.5rem;
}

/* Le blockquote, mesuré chez eux le 2026-08-02 : `border-left: 3px solid`,
 * `padding: 4px 16px`, `margin: 8px 0`, et le texte AU MÊME TON que le corps.
 * `font-style: normal` est explicite parce que c'est la décision : un filet de
 * 3 px et un retrait suffisent à dire « ceci est cité ». L'italique, lui, rend
 * la citation moins lisible que le message qui la porte. */
.tn-chat-rich .trix-content blockquote {
  border: 0;
  border-inline-start: 3px solid var(--color-loam-300);
  margin: 0.5rem 0;
  padding: 0.25rem 1rem;
  font-style: normal;
  color: inherit;
}

/* Un titre dans une bulle de chat reste un titre de BULLE. Les trois niveaux se
 * distinguent sans jamais atteindre l'échelle d'un titre d'écran (24 px / 800) :
 * une ligne de conversation ne concurrence pas le nom de l'écran. */
.tn-chat-rich .trix-content h1 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.tn-chat-rich .trix-content h2 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 700; }
.tn-chat-rich .trix-content h3,
.tn-chat-rich .trix-content h4 { font-size: 1rem; line-height: 1.5rem; font-weight: 700; }

.tn-chat-rich .trix-content ul,
.tn-chat-rich .trix-content ol {
  padding-inline-start: 1.25rem;
}

.tn-chat-rich .trix-content ul { list-style: disc; }
.tn-chat-rich .trix-content ol { list-style: decimal; }
.tn-chat-rich .trix-content li { margin-inline-start: 0; }

.tn-chat-rich .trix-content a {
  text-decoration: underline;
  text-decoration-color: var(--color-loam-300);
  text-underline-offset: 2px;
}

.tn-chat-rich .trix-content a:hover {
  color: var(--color-brand-700);
}

/* Le code garde le dessin de `chat_body` — même pastille, mêmes tokens : deux
 * rendus, un seul vocabulaire. */
.tn-chat-rich .trix-content code {
  border-radius: 0.25rem;
  background-color: var(--color-loam-100);
  padding: 0.125rem 0.25rem;
  font-size: var(--text-xs);
}

.tn-chat-rich .trix-content pre {
  display: block;
  border-radius: 0.5rem;
  background-color: var(--color-loam-100);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-xs);
  white-space: pre-wrap;
}