/* ---------------------------------------------------------------------------
 * LUNEA Portal — custom overrides on top of the Inspinia theme.
 * ------------------------------------------------------------------------- */

/* DataTables: keep the export-buttons / length / search toolbar clearly BELOW
 * the card-header divider (its top was being clipped/overlapped by the line).
 * This build ships DataTables 2.x whose wrapper is `.dt-container` (the legacy
 * `.dataTables_wrapper` does NOT exist here). The toolbar row produced by the
 * dom option carries the `.mb-2` class, so we push that row down. Both wrapper
 * names are targeted for safety; the rule stays scoped to DataTables so other
 * `.mb-2` elements across the app are untouched. */
.dt-container .row.mb-2,
.dt-container .mb-2,
.dataTables_wrapper .row.mb-2 {
    margin-top: 15px;
    margin-bottom: .625rem !important;
    row-gap: .5rem;
    align-items: center;
}
.dt-container .dt-buttons,
.dataTables_wrapper .dt-buttons { margin-bottom: .5rem; }
.dt-container .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn { margin: 0 .25rem .35rem 0; }
.dt-container .dt-search,
.dataTables_wrapper .dataTables_filter { margin-bottom: .5rem; }

/* Give the table a little breathing room from the toolbar above it. */
.card-body > .table-responsive > table.dataTable,
table.dataTable, table.datatable { margin-top: 5px !important; }

/* TodoList calendar: make sure events are readable. */
#todoCalendar .fc-event, .fc .fc-daygrid-event { white-space: normal; cursor: pointer; }
#todoCalendar { min-height: 600px; }

/* Gantt rows. */
.lna-gantt-row { height: 34px; }
.lna-gantt-bar { position: absolute; height: 22px; top: 6px; border-radius: 4px; color: #fff;
    font-size: 11px; line-height: 22px; padding: 0 6px; overflow: hidden; white-space: nowrap; }
.lna-gantt-grid { position: relative; border-left: 1px solid var(--bs-border-color); }
.lna-gantt-daycol { border-right: 1px solid var(--bs-border-color); }

/* ---------------------------------------------------------------------------
 * Module CRM (fiches / leads) — reprise visuelle de la page détail du CRM
 * d'origine (crm-moncompte-full-modules), adaptée au thème Bootstrap 5 du
 * portail.
 * ------------------------------------------------------------------------- */

/* Cartes de la vue d'ensemble : hauteur homogène sur une même ligne, contenu
 * défilant à l'intérieur plutôt qu'une ligne de cartes en escalier.
 *
 * `height: 100%` se résout sur la hauteur de la colonne Bootstrap, laquelle
 * vaut la hauteur de la plus haute colonne de la ligne. La règle n'a donc de
 * sens que si la carte est SEULE dans sa colonne : empilez-en deux et chacune
 * réclame toute la hauteur de la colonne, l'empilement débordant alors sous le
 * footer (cas de la page proposition commerciale). D'où le `:only-child`, qui
 * laisse les cartes empilées se dimensionner sur leur contenu. */
.lna-crm-panel { display: flex; flex-direction: column; }
.lna-crm-panel:only-child { height: 100%; }
.lna-crm-panel:only-child .card-body { overflow-y: auto; }
.lna-crm-panel--fixed .card-body { max-height: 20rem; overflow-y: auto; }

/* Bloc « clé : valeur » des cartes d'information. */
.lna-kv { display: grid; grid-template-columns: minmax(7.5rem, 40%) 1fr; gap: .35rem .75rem; margin: 0; }
.lna-kv dt { font-weight: 500; color: var(--bs-secondary-color); }
.lna-kv dd { margin: 0; overflow-wrap: anywhere; }

/* Frise verticale des notes de lead (équivalent de #vertical-timeline). */
.lna-timeline { position: relative; padding-left: 2.75rem; }
.lna-timeline::before { content: ""; position: absolute; left: 1.05rem; top: .35rem; bottom: .35rem;
    width: 2px; background: var(--bs-border-color); }
.lna-timeline-item { position: relative; margin-bottom: 1rem; }
.lna-timeline-badge { position: absolute; left: -2.75rem; top: .15rem; width: 2.2rem; height: 2.2rem;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .9rem; background: var(--bs-primary); box-shadow: 0 0 0 3px var(--bs-body-bg); }
.lna-timeline-card { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem 1rem;
    background: var(--bs-card-bg, var(--bs-body-bg)); }
.lna-timeline-note { white-space: pre-line; overflow-wrap: anywhere; }

/* Sélecteur « forecast » : les 5 émojis de scoring du CRM d'origine. */
.lna-scoring { font-size: 1.35rem; line-height: 1; letter-spacing: .15rem; }
.lna-scoring .lna-scoring-off { opacity: .25; filter: grayscale(1); }

/* TO DO : une tâche cochée reste lisible mais visiblement terminée. */
.lna-todo-done .lna-todo-text { text-decoration: line-through; color: var(--bs-secondary-color); }

/* ---------------------------------------------------------------------------
 * Explorateur de fichiers embarquable (App\Controller\FileExplorerController) :
 * un bloc autonome qui doit rester lisible aussi bien dans un onglet de fiche
 * que sur sa page plein écran.
 * ------------------------------------------------------------------------- */
.lna-fx-table a { text-decoration: none; overflow-wrap: anywhere; }
.lna-fx-table a:hover { text-decoration: underline; }
.lna-fx-table thead th { white-space: nowrap; }

/* Pendant le rechargement d'un dossier : le contenu reste visible mais
 * n'accepte plus de clic, ce qui évite d'empiler deux navigations. */
.lna-fx-content[aria-busy="true"] { opacity: .55; pointer-events: none; }

.lna-fx-toolbar .breadcrumb { flex-wrap: wrap; }
.lna-fx-frame { height: 75vh; }
.lna-fx-preview img { max-height: 75vh; object-fit: contain; }

/* ---------------------------------------------------------------------------
 * Module tickets — liste et fil de conversation.
 *
 * Tout ici est de la présentation : les couleurs passent par les variables
 * du thème plutôt que par des valeurs en dur, pour que le thème clair et le
 * thème sombre du portail (`data-bs-theme`) restent tous les deux lisibles
 * sans règle dupliquée.
 *
 * ATTENTION au préfixe : ce build Bootstrap est compilé avec `$prefix:
 * theme-`, ses variables s'appellent donc `--theme-border-color` &c. Un
 * `var(--bs-border-color)` ne résout RIEN ici — la propriété devient invalide
 * et retombe silencieusement sur sa valeur initiale (une bordure disparaît,
 * un fond redevient transparent) sans le moindre avertissement.
 * ------------------------------------------------------------------------- */

/* ***** Liste des tickets ***** */

/* Ligne cliquable : le curseur doit l'annoncer, sinon rien ne distingue la
 * ligne d'un simple tableau de données. */
.lna-tk-table tbody tr[data-href] { cursor: pointer; }
.lna-tk-table thead th { white-space: nowrap; font-size: .75rem; text-transform: uppercase;
    letter-spacing: .02em; color: var(--theme-secondary-color); }
.lna-tk-table .lna-tk-subject { text-decoration: none; overflow-wrap: anywhere; }
.lna-tk-table tbody tr:hover .lna-tk-subject { text-decoration: underline; }
/* Colonne du chevron : juste assez large pour l'icône. */
.lna-tk-table .lna-tk-col-action { width: 1%; }

/* Champ de recherche avec icône à l'intérieur. */
.lna-tk-search { position: relative; }
.lna-tk-search .ti { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
    color: var(--theme-secondary-color); pointer-events: none; }
.lna-tk-search .form-control { padding-left: 2rem; min-width: 15rem; }

/* ***** Fil de conversation ***** */

.lna-tk-thread { display: flex; flex-direction: column; gap: 1.25rem; }

/* Une entrée = un avatar + une bulle. Le sens de la ligne porte à lui seul
 * l'interlocuteur : support à gauche, client à droite. */
.lna-tk-msg { display: flex; align-items: flex-start; gap: .75rem; }
.lna-tk-msg--customer { flex-direction: row-reverse; }

/* Avatar. Le côté client reste neutre (bordure indispensable : sans elle, le
 * fond gris très clair du thème est invisible sur la carte blanche), le côté
 * support porte la couleur de marque. */
.lna-tk-avatar { flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background-color: var(--theme-tertiary-bg); color: var(--theme-secondary-color);
    border: 1px solid var(--theme-border-color); }
.lna-tk-msg--support .lna-tk-avatar,
.lna-tk-avatar--support { background-color: rgba(var(--theme-primary-rgb), .12);
    color: var(--theme-primary); border-color: rgba(var(--theme-primary-rgb), .25); }

/* Bulle. `--lna-tk-bg` / `--lna-tk-bd` sont redéfinies par côté : la petite
 * pointe (::before) les réutilise et suit donc automatiquement. */
.lna-tk-bubble { --lna-tk-bg: var(--theme-tertiary-bg); --lna-tk-bd: var(--theme-border-color);
    position: relative; max-width: 82%; padding: .7rem .95rem; border-radius: .85rem;
    background-color: var(--lna-tk-bg); border: 1px solid var(--lna-tk-bd); }
.lna-tk-msg--customer .lna-tk-bubble { --lna-tk-bg: rgba(var(--theme-primary-rgb), .07);
    --lna-tk-bd: rgba(var(--theme-primary-rgb), .22); }

/* Pointe de bulle : un carré tourné à 45°, dont seules deux bordures sont
 * visibles, posé à cheval sur le bord de la bulle. */
.lna-tk-bubble::before { content: ""; position: absolute; top: .95rem; width: .55rem; height: .55rem;
    background-color: var(--lna-tk-bg); border-left: 1px solid var(--lna-tk-bd);
    border-bottom: 1px solid var(--lna-tk-bd); }
.lna-tk-msg--support .lna-tk-bubble::before { left: -.3rem; transform: rotate(45deg); }
.lna-tk-msg--customer .lna-tk-bubble::before { right: -.3rem; transform: rotate(-135deg); }

.lna-tk-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-bottom: .35rem; font-size: .8125rem; }
.lna-tk-author { font-weight: 600; color: var(--theme-emphasis-color); }
/* L'horodatage est repoussé au bout de la ligne d'en-tête, et passe seul à la
 * ligne suivante sur mobile grâce au `flex-wrap` ci-dessus. */
.lna-tk-time { margin-left: auto; color: var(--theme-secondary-color); white-space: nowrap; }

/* Corps rendu depuis du Markdown : on ne connaît pas les balises à l'avance,
 * d'où ces règles génériques (dernier bloc sans marge, contenus larges qui ne
 * débordent pas de la bulle). */
.lna-tk-body { overflow-wrap: anywhere; }
.lna-tk-body > :last-child { margin-bottom: 0; }
.lna-tk-body img { max-width: 100%; height: auto; }
.lna-tk-body pre { background-color: var(--theme-secondary-bg); padding: .6rem .75rem;
    border-radius: .375rem; overflow-x: auto; }
.lna-tk-body :not(pre) > code { background-color: var(--theme-secondary-bg); padding: .1rem .3rem;
    border-radius: .25rem; }
.lna-tk-body blockquote { margin: .5rem 0; padding-left: .75rem;
    border-left: 3px solid var(--theme-border-color); color: var(--theme-secondary-color); }
.lna-tk-body table { width: 100%; margin-bottom: .5rem; }
.lna-tk-body table th, .lna-tk-body table td { padding: .25rem .5rem;
    border: 1px solid var(--theme-border-color); }

@media (max-width: 575.98px) {
    .lna-tk-bubble { max-width: 100%; }
    .lna-tk-avatar { width: 1.85rem; height: 1.85rem; font-size: .9rem; }
}

/* ***** Zone de réponse ***** */

/* Le champ message porte son propre libellé dans l'en-tête de la zone : on
 * masque celui du fichier joint uniquement s'il est vide, et on garde la ligne
 * d'action compacte. */
.lna-tk-composer .EasyMDEContainer { background-color: var(--theme-body-bg); border-radius: .375rem; }
.lna-tk-composer .editor-toolbar { border-top-left-radius: .375rem; border-top-right-radius: .375rem; }
.lna-tk-attach { max-width: 22rem; }
.lna-tk-attach .form-label { font-size: .8125rem; margin-bottom: .25rem;
    color: var(--theme-secondary-color); }
.lna-tk-attach .mb-3 { margin-bottom: 0 !important; }

/* ***** Pièces jointes ***** */

.lna-tk-files { display: flex; flex-direction: column; gap: .4rem; }
.lna-tk-file { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem;
    border: 1px solid var(--theme-border-color); border-radius: .5rem; text-decoration: none;
    color: var(--theme-body-color); transition: background-color .15s ease, border-color .15s ease; }
.lna-tk-file:hover { background-color: var(--theme-tertiary-bg); border-color: var(--theme-primary);
    color: var(--theme-body-color); }
.lna-tk-file > .ti:first-child { font-size: 1.15rem; color: var(--theme-primary); flex: 0 0 auto; }
.lna-tk-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.lna-tk-file-size { flex: 0 0 auto; font-size: .75rem; color: var(--theme-secondary-color); }
.lna-tk-file-dl { flex: 0 0 auto; color: var(--theme-secondary-color); }
.lna-tk-file:hover .lna-tk-file-dl { color: var(--theme-primary); }

/* ******************** IDENTITÉ DE MARQUE ********************
   Voir templates/partials/_brand.html.twig. Les logos d'entité sont des
   balises <img> complètes stockées en base, dimensionnées par la source :
   seule une contrainte posée sur leur conteneur peut les réduire, d'où les
   règles `... img` ci-dessous plutôt qu'un style sur la balise elle-même.
   Même besoin pour les logos de marque, fichiers déposés par un
   administrateur sans redimensionnement. */

/* Topbar : le logo est aligné sur une seule ligne, la hauteur de la barre
   étant fixée par le thème (`line-height: var(--theme-topbar-height)` sur
   `.logo-topbar`) — un bloc sur deux lignes la déformerait. */
/* Le logo est placé après le bouton d'ouverture du menu : le retrait de
   gauche hérité du thème (`.logo-topbar { padding: 0 .625rem }`) ferait
   doublon avec l'espacement du conteneur flex. */
.lna-brand-topbar { display: flex; align-items: center; gap: .6rem; line-height: 1;
    padding-inline-start: 0; }
.lna-brand-topbar > a { display: inline-flex; align-items: center; }
.lna-brand-topbar .logo-lg img { max-height: var(--theme-logo-lg-height, 24px);
    width: auto; max-width: 12rem; object-fit: contain; }

/* Pages de connexion : le logo domine le haut de la carte. */
.lna-brand-auth img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; }

/* Tableau de bord : même gabarit que le logo d'entité rendu jusqu'ici. */
.lna-brand-dashboard img { max-height: 48px; max-width: 10rem; width: auto; object-fit: contain; }

/* ******************** BOUTON DE PERSONNALISATION ********************
   Le thème colle une pastille clignotante rouge sur `.btn-theme-setting`
   (`::before` avec `background-color: var(--theme-danger)`) pour attirer l'œil
   sur ses réglages d'apparence. Le portail ne veut pas de cette alerte : le
   pseudo-élément n'existant que pour cette couleur, on le supprime entièrement
   plutôt que de laisser une pastille transparente s'animer dans le vide. */

.btn-theme-setting::before { content: none; }

/* ******************** PAGE D'AIDE PUBLIQUE ********************
   Voir templates/support/contact.html.twig et App\Controller\SupportController.

   `.lna-hp` sort le champ piège du flux sans le retirer du DOM : c'est
   précisément sa présence dans le HTML qui fait qu'un robot le remplit.
   `display: none` ferait aussi bien pour l'œil, mais les robots les plus
   grossiers l'ignorent — un décalage hors écran ressemble davantage à un
   champ normal. `aria-hidden` (posé par le formulaire) l'écarte des lecteurs
   d'écran, et `tabindex="-1"` de la navigation au clavier : personne
   d'authentique ne peut le remplir par accident. */

.lna-hp { position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden; }

/* Le captcha est une image de taille fixe (190×60) : le conteneur la borne
   pour qu'elle ne déborde jamais d'une colonne étroite, et le bouton de
   renouvellement se colle à son bord. */
.lna-captcha { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.lna-captcha img { max-width: 100%; height: auto; border: 1px solid var(--theme-border-color);
    border-radius: .375rem; background-color: #fcfcfd; }

/* Étiquette rendue obligatoire par le motif choisi (société et téléphone pour
   une demande d'accès) : l'astérisque suit la règle de validation du serveur,
   posée par le script de la page. */
.lna-required::after { content: " *"; color: var(--theme-danger); font-weight: 600; }

/* Les deux motifs sont des cartes cliquables : la bordure suit l'option
   retenue, sinon rien ne distingue le choix actif d'un simple libellé. Le
   sélecteur est borné à ces cartes-là (`.lna-reason`) : `.form-check:has(...)`
   seul repeindrait toutes les cases à cocher de l'application. */
.lna-reason { cursor: pointer; }
.lna-reason:has(input:checked) { border-color: var(--theme-primary) !important;
    background-color: var(--theme-primary-bg-subtle); }

/* Pages d'erreur (404, 403, 500…) — voir templates/error/layout.html.twig.
 * Le thème fixe `.error-wave-container` à 120px, ce qui déborde sur un
 * téléphone dès que le code tient sur trois chiffres. On le ramène à une
 * unité relative au viewport, bornée haut et bas, plutôt que d'empiler des
 * media queries. `line-height` serré : à cette taille, l'interligne par
 * défaut creuse un vide visible sous le chiffre. */
.lna-error-code { font-size: clamp(4.5rem, 18vw, 7.5rem) !important; line-height: 1.05; }

/* Le paragraphe reste lisible : au-delà d'une soixantaine de caractères par
 * ligne, un texte centré devient pénible à suivre. */
.lna-error-message { max-width: 34rem; }

/* `.auth-box` réserve 50px de marge sur ses quatre côtés, taillés pour un
 * formulaire de connexion étroit. Sur un téléphone, ces 100px horizontaux
 * suffisent à faire passer « Retour au tableau de bord » sur deux lignes. La
 * règle est bornée aux pages d'erreur : la page de connexion garde sa marge. */
@media (max-width: 575.98px) {
    .lna-error-page { padding: 1.5rem 0.75rem; }
}

/* L'animation « wave » du thème fait sautiller les chiffres en boucle. Pour
 * qui a demandé moins de mouvement, une page d'erreur est le dernier endroit
 * où insister. */
@media (prefers-reduced-motion: reduce) {
    .lna-error-code .error-wave-char { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Recherche globale (palette ⌘K). Markup dans _topbar.html.twig, logique dans
 * /js/global-search.js.
 *
 * Bâti sur les variables `--theme-*` du thème, et NON sur les `--bs-*` de
 * Bootstrap : ce build ne définit aucune variable `--bs-*` (il a remplacé le
 * jeu Bootstrap par le sien). Un `var(--bs-body-bg)` y est donc invalide et
 * rend la propriété transparente — c'est ce qui laissait le fond gris du
 * backdrop transparaître à travers le panneau. `--theme-secondary-bg` est la
 * surface des cartes/menus (var(--theme-card-bg) y renvoie), et suit
 * automatiquement le thème clair/sombre.
 * ------------------------------------------------------------------------- */

/* Déclencheur façon champ de recherche, centré dans la topbar. */
.global-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    max-width: 420px;
    padding: .4rem .75rem;
    border: 1px solid var(--theme-border-color);
    border-radius: .5rem;
    line-height: 1.2;
    background: var(--theme-tertiary-bg);
    color: var(--theme-secondary-color);
    font-size: .875rem;
    text-align: left;
    transition: border-color .15s ease, background-color .15s ease;
}
.global-search-trigger:hover {
    border-color: var(--theme-primary);
    background: var(--theme-secondary-bg);
}
.global-search-trigger-label { flex-grow: 1; }
.global-search-kbd {
    font-size: .7rem;
    padding: .1rem .35rem;
    border: 1px solid var(--theme-border-color);
    border-radius: .25rem;
    background: var(--theme-secondary-bg);
    color: var(--theme-secondary-color);
}

/* Overlay plein écran. Le `:not([hidden])` est indispensable : une règle
 * `display` d'auteur l'emporterait sinon sur le `display:none` porté par
 * l'attribut `hidden`, et la palette resterait affichée en permanence. */
.global-search-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1080; /* au-dessus de la topbar (1002) et de l'offcanvas menu */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.global-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}
.global-search-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 10vh 1rem 0;
    background: var(--theme-secondary-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: .75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

/* Ligne de saisie. */
.global-search-input-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--theme-border-color);
}
.global-search-input-icon { font-size: 1.25rem; color: var(--theme-secondary-color); }
.global-search-input {
    flex-grow: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--theme-body-color);
    font-size: 1.05rem;
}
.global-search-close {
    border: 0;
    background: transparent;
    padding: 0;
}
.global-search-close kbd,
.global-search-footer kbd {
    font-size: .7rem;
    padding: .1rem .35rem;
    border: 1px solid var(--theme-border-color);
    border-radius: .25rem;
    background: var(--theme-tertiary-bg);
    color: var(--theme-secondary-color);
}

/* Liste des résultats. */
.global-search-results { overflow-y: auto; padding: .35rem 0; }
.global-search-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--theme-secondary-color);
}
.global-search-group {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem .25rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--theme-secondary-color);
}
.global-search-hit {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1rem;
    text-decoration: none;
    color: var(--theme-body-color);
}
.global-search-hit:hover,
.global-search-hit.active {
    background: var(--theme-primary-bg-subtle);
    color: var(--theme-body-color);
}
.global-search-hit-body { min-width: 0; flex-grow: 1; }
.global-search-hit-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-search-hit-subtitle {
    font-size: .8rem;
    color: var(--theme-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.global-search-hit-badge {
    flex-shrink: 0;
    font-size: .7rem;
    padding: .1rem .45rem;
    border-radius: 1rem;
    background: var(--theme-tertiary-bg);
    color: var(--theme-secondary-color);
}

/* Pied d'aide au clavier. */
.global-search-footer {
    display: flex;
    gap: 1rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--theme-border-color);
    font-size: .75rem;
    color: var(--theme-secondary-color);
}

/* Empêche le défilement du fond quand la palette est ouverte. */
body.global-search-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Assistant IA « Mr Brain » (⌘B). Markup dans partials/_brain.html.twig,
 * logique dans /js/brain.js.
 *
 * Même socle que la palette de recherche ci-dessus, et pour la même raison :
 * les variables `--theme-*` du thème, jamais les `--bs-*` de Bootstrap — ce
 * build ne les définit pas, un `var(--bs-body-bg)` y rend la propriété
 * transparente et laisse le backdrop transparaître à travers le panneau.
 * ------------------------------------------------------------------------- */

.brain-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1081; /* juste au-dessus de la palette de recherche (1080) */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.brain-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}
.brain-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 6vh 1rem 0;
    background: var(--theme-secondary-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: .75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
}

/* En-tête. */
.brain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--theme-border-color);
}
.brain-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}
.brain-model {
    font-size: .7rem;
    font-weight: 400;
    padding: .1rem .45rem;
    border-radius: 1rem;
    background: var(--theme-tertiary-bg);
    color: var(--theme-secondary-color);
}
.brain-head-actions { display: flex; gap: .25rem; }
.brain-icon-button {
    border: 0;
    background: transparent;
    color: var(--theme-secondary-color);
    padding: .2rem .35rem;
    border-radius: .35rem;
    line-height: 1;
}
.brain-icon-button:hover {
    background: var(--theme-tertiary-bg);
    color: var(--theme-body-color);
}

/* Contexte : la sélection de la page. */
.brain-context {
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--theme-border-color);
    background: var(--theme-tertiary-bg);
}
.brain-context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .75rem;
    color: var(--theme-secondary-color);
}
.brain-context-size { opacity: .75; }
.brain-context-body {
    margin: .4rem 0 .5rem;
    padding: .5rem .6rem;
    max-height: 7.5rem;
    overflow: auto;
    border-radius: .35rem;
    background: var(--theme-secondary-bg);
    border: 1px solid var(--theme-border-color);
    font-size: .78rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--theme-body-color);
}
.brain-quick { display: flex; flex-wrap: wrap; gap: .35rem; }
.brain-quick-button {
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 1rem;
    border: 1px solid var(--theme-border-color);
    background: var(--theme-secondary-bg);
    color: var(--theme-body-color);
}
.brain-quick-button:hover { border-color: var(--theme-primary); }

/* Conversation. */
.brain-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.brain-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--theme-secondary-color);
    font-size: .875rem;
}
.brain-message {
    padding: .6rem .75rem;
    border-radius: .5rem;
    border: 1px solid var(--theme-border-color);
}
.brain-message-assistant { background: var(--theme-tertiary-bg); }
.brain-message-who {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--theme-secondary-color);
    margin-bottom: .25rem;
}
.brain-message-body {
    font-size: .875rem;
    white-space: pre-wrap;   /* la question est rendue en texte brut */
    word-break: break-word;
}
/* La réponse est mise en forme (<br> posés par le formateur) : `pre-wrap` y
 * doublerait chaque saut de ligne. */
.brain-message-assistant .brain-message-body { white-space: normal; }
.brain-message-error {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--theme-danger, #d9534f);
}
.brain-code {
    margin: .5rem 0;
    padding: .6rem .7rem;
    border-radius: .35rem;
    background: #1e1e1e;
    color: #d4d4d4;
    font-size: .8rem;
    overflow-x: auto;
    white-space: pre;
}
.brain-message-body code {
    padding: .05rem .25rem;
    border-radius: .2rem;
    background: var(--theme-secondary-bg);
}
.brain-code code { background: transparent; padding: 0; }

/* Trois points d'attente, tant que le premier mot n'est pas arrivé. */
.brain-typing i {
    display: inline-block;
    width: .35rem;
    height: .35rem;
    margin-right: .2rem;
    border-radius: 50%;
    background: var(--theme-secondary-color);
    animation: brain-typing 1.2s infinite ease-in-out;
}
.brain-typing i:nth-child(2) { animation-delay: .2s; }
.brain-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes brain-typing {
    0%, 60%, 100% { opacity: .25; }
    30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .brain-typing i { animation: none; opacity: .6; }
}

/* Saisie. */
.brain-input-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--theme-border-color);
}
.brain-input {
    flex-grow: 1;
    resize: none;
    max-height: 160px;
    padding: .5rem .65rem;
    border: 1px solid var(--theme-border-color);
    border-radius: .5rem;
    background: var(--theme-tertiary-bg);
    color: var(--theme-body-color);
    font-size: .9rem;
}
.brain-input:focus { outline: 0; border-color: var(--theme-primary); }
.brain-send { flex-shrink: 0; }

.brain-footer {
    display: flex;
    gap: 1rem;
    padding: .4rem 1rem .6rem;
    font-size: .72rem;
    color: var(--theme-secondary-color);
}
.brain-footer kbd {
    font-size: .7rem;
    padding: .1rem .35rem;
    border: 1px solid var(--theme-border-color);
    border-radius: .25rem;
    background: var(--theme-tertiary-bg);
    color: var(--theme-secondary-color);
}

/* Empêche le défilement du fond quand la modale est ouverte. */
body.brain-open { overflow: hidden; }