/* =========================================================
   myLLM — Design system inspiré ChatGPT
   ========================================================= */

/* ---------------------------------------------------------
   Typographie — polices AUTO-HÉBERGÉES (`public/assets/fonts/`)
   Aucun appel à fonts.googleapis.com : l'app est installable en PWA et
   tourne derrière des réseaux fermés (le compose de prod met `myllm` en
   `internal: true`) — une police servie par un CDN tiers y resterait
   muette, et fuiterait l'IP de chaque visiteur au passage.

   Deux rôles, deux jetons (cf. `--font` / `--font-title` ci-dessous) :
   Lexend pour TOUTE l'interface, Congenial pour le nom du produit.
   --------------------------------------------------------- */

/* Lexend — variable (100→900), SIL OFL, cf. fonts/LEXEND-OFL.txt.
   Un fichier par sous-ensemble : `unicode-range` fait que le navigateur
   ne télécharge latin-ext que s'il rencontre un caractère qui l'exige. */
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/lexend-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/lexend-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Congenial (Laura Worthington) — police SOUS LICENCE, donc NON versionnée :
   les deux fichiers sont absents du dépôt. Déposer les webfonts achetées
   dans `public/assets/fonts/` sous ces noms exacts suffit à les activer,
   sans toucher au CSS. Tant qu'ils manquent, la requête échoue et le nom
   du produit retombe sur Lexend (`--font-title` liste les deux) : jamais
   de texte invisible, `font-display: swap` ne bloque aucun rendu.
   `local(...)` sert d'abord la police si elle est installée sur le poste
   — un designer la voit alors sans rien déposer. */
@font-face {
    font-family: 'Congenial';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Congenial'), url('/assets/fonts/congenial-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Congenial';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Congenial Bold'), url('/assets/fonts/congenial-bold.woff2') format('woff2');
}

:root {
    --bg:          #212121;
    --bg-sidebar:  #171717;
    --bg-surface:  #2f2f2f;
    --bg-input:    #2f2f2f;
    --accent:      #10a37f;
    --accent-dark: #0d8a6b;
    --accent-dark: color-mix(in srgb, var(--accent) 82%, black);
    --text:        #ececec;
    --text-muted:  #8e8ea0;
    --border:      #3d3d3d;
    --radius:      12px;
    --radius-sm:   8px;
    /* Interface entière. Source unique : tout ce qui n'est pas du code
       monospace s'y réfère (`body`, champs de saisie, boutons…). */
    --font:        'Lexend', ui-sans-serif, system-ui, -apple-system, sans-serif;
    /* Nom du produit uniquement (logo de barre latérale, en-tête mobile,
       titre de la page de connexion) — cf. `.logo-text` & co. */
    --font-title:  'Congenial', 'Lexend', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --viewer-width: min(680px, 48vw);

    /* ---- Zones sûres de l'écran (barre d'état, encoche, barre home) ----
       Toutes les pages portent `viewport-fit=cover` : hors navigateur (PWA
       installée, wrapper Capacitor, Android 15 edge-to-edge), la page occupe
       l'écran ENTIER et passe sous la barre d'état. Ces deux jetons sont la
       SOURCE UNIQUE de la réserve à laisser : toute surface ancrée en haut
       (header, tiroir, volet, modale, calque) s'y réfère au lieu de rappeler
       `env(...)` dans son coin — un oubli est invisible depuis l'onglet de
       navigateur où l'on teste, puisque les insets y valent 0.
       En navigateur classique et sur desktop ils valent 0 : les règles qui les
       utilisent sont donc sans effet visible hors de ce contexte. */
    --safe-top:    0px;
    --safe-bottom: 0px;
}

/* Valeurs réelles quand le moteur connaît `env()`. Le repli à 0 ci-dessus reste
   la valeur des très vieux moteurs : sans lui, `calc(12px + var(--safe-bottom))`
   deviendrait invalide et le padding retomberait à 0 au lieu de 12px. */
@supports (padding-top: env(safe-area-inset-top)) {
    :root {
        --safe-top:    env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* Light theme */
[data-theme="light"] {
    --bg:          #f5f5f5;
    --bg-sidebar:  #e8e8e8;
    --bg-surface:  #ffffff;
    --bg-input:    #ffffff;
    --text:        #1a1a1a;
    --text-muted:  #6b7280;
    --border:      #d1d5db;
    --bg-base:     #f5f5f5;
}
[data-theme="light"] .message-user .msg-content { background: #e8f4ef; }
[data-theme="light"] .msg-content pre        { background: #f0f0f0; border-color: #d1d5db; }
/* Lisibilité du code en mode clair : sans ces overrides, le texte
   héritait de la couleur dark (#e2e8f0 ≈ blanc) sur fond #f0f0f0 et
   devenait illisible. */
[data-theme="light"] .msg-content pre code   { color: #1f2937; }
[data-theme="light"] .msg-content code       { background: #f3f4f6; color: #9a3412; border: 1px solid #e5e7eb; }
[data-theme="light"] .msg-content pre code   { background: none; border: none; }
[data-theme="light"] .modal-box              { background: #ffffff; }
[data-theme="light"] .llm-picker-list        { background: #ffffff; border-color: #d1d5db; }
[data-theme="light"] .conv-item:hover        { background: rgba(0,0,0,.06); }
[data-theme="light"] .conv-item.active       { background: rgba(0,0,0,.1); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}

/* ---- LAYOUT APP ---- */
body.app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: width .2s ease, min-width .2s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px 12px;
}

/* ---- Repli du volet : icône aux couleurs primaires ---- */
.sidebar-collapse-btn,
.sidebar-reopen-btn {
    background: none;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.sidebar-collapse-btn { margin-left: auto; }
.sidebar-collapse-btn:hover,
.sidebar-reopen-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Volet replié (desktop) : largeur nulle, le contenu est clippé par overflow:hidden */
body.sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    border-right-width: 0;
}

/* Bouton flottant de réouverture — visible uniquement volet replié */
.sidebar-reopen-btn {
    display: none;
    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 60;
    background: var(--bg-surface);
    border: 1px solid var(--border);
}
body.sidebar-collapsed .sidebar-reopen-btn { display: inline-flex; }
/* La toolbar dégage la place du bouton flottant */
body.sidebar-collapsed .chat-toolbar { padding-left: 48px; }

/* ---- Bloc fusionné : recherche + nouvelle conversation ---- */
.sidebar-newsearch {
    margin: 0 12px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-surface);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .15s;
}
.sidebar-newsearch:focus-within { border-color: var(--accent); }

.sidebar-new-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface));
    color: var(--accent);
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.sidebar-new-btn:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg-surface)); }
.sidebar-new-btn__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}
.sidebar-new-btn__icon svg { display: block; }

/* ---- Recherche dans l'historique (partie haute du bloc fusionné) ---- */
.conv-search {
    position: relative;
    flex-shrink: 0;
}
.conv-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.conv-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 26px 9px 32px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text);
    font-size: 13px;
    outline: none;
}
.conv-search-input::placeholder { color: var(--text-muted); }
.conv-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.conv-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.conv-search-clear:hover { color: var(--text); background: var(--border); }
.conv-search-clear[hidden] { display: none; }

/* Bascule liste normale / résultats (le bloc [hidden] doit gagner sur .conv-list) */
.conv-list[hidden] { display: none; }

.conv-search-item { align-items: flex-start; }
.conv-search-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.conv-search-item .conv-title { flex: none; }
.conv-search-snippet {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-search-item .conv-color-bar { align-self: stretch; height: auto; }
.conv-search-results mark {
    background: var(--accent);
    color: #fff;
    border-radius: 2px;
    padding: 0 1px;
}

/* Le logo ramène à l'accueil */
.sidebar-logo-link {
    display: flex;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.sidebar-logo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sidebar-logo-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.sidebar-logo {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    display: block;
}

.sidebar-logo-hover {
    position: absolute;
    inset: 0;
    width: 70px;
    height: 70px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.sidebar-logo-wrap.has-hover-logo:hover .sidebar-logo { opacity: 0; }
.sidebar-logo-wrap.has-hover-logo:hover .sidebar-logo-hover { opacity: 1; }

/* Les trois surfaces qui portent le NOM DU PRODUIT (`Settings::get('app_name')`)
   — et elles seules — passent en `--font-title`. Le reste de l'interface,
   titres de section compris, reste en `--font` : la police de marque
   signale le produit, elle ne hiérarchise pas le contenu.

   Graisse et approche viennent de la spec du wordmark MyAlfred, alignée sur
   MyBrief (`style.css`, `.app-logo-text` / `.sb-wordmark`) : Congenial
   **Medium**, jamais Bold — la police est déjà pleine, la passer en 700
   l'épaissit au point de la faire diverger de l'autre produit. La TAILLE,
   elle, reste propre à chaque surface (barre latérale, en-tête mobile,
   écran de connexion n'ont pas la même place). */
.logo-text,
.mobile-header-title,
.login-box h1 {
    font-family: var(--font-title);
    font-weight: 500;
    letter-spacing: -0.3px;
}

.logo-text {
    font-size: 16px;
    color: var(--text);
}

.logo-brand {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-tagline {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Libellé de groupe de dates dans l'historique */
.conv-group-label {
    padding: 7px 10px 2px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    user-select: none;
}
.conv-group-label:first-child { padding-top: 2px; }

.conv-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    transition: background .15s;
    position: relative;
    cursor: pointer;
}
.conv-item:hover { background: var(--bg-surface); }
.conv-item.active { background: var(--bg-surface); }

.conv-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-color-bar {
    display: inline-block;
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--conv-color, var(--accent));
    flex-shrink: 0;
    align-self: center;
}

/* Icône épingle devant le titre (conversations épinglées) */
.conv-pin-icon {
    color: var(--accent);
    flex-shrink: 0;
    opacity: .85;
}

/* Bouton 3 points "…" — visible au hover desktop, toujours visible mobile */
.conv-menu-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    margin: -4px -2px -4px 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}
.conv-item:hover .conv-menu-btn,
.conv-item .conv-menu-btn[aria-expanded="true"] { opacity: 1; }
.conv-menu-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }
[data-theme="light"] .conv-menu-btn:hover { background: rgba(0,0,0,.06); }

/* Popover du menu d'actions — partagé avec le menu compte (#userMenu) */
.conv-menu,
.user-menu {
    position: fixed;
    z-index: 300;
    min-width: 240px;
    max-width: 300px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
[data-theme="light"] .conv-menu,
[data-theme="light"] .user-menu {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.conv-menu[hidden],
.user-menu[hidden] { display: none; }
.conv-menu-item,
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: none;
    border: 0;
    color: var(--text);
    font-size: 13.5px;
    text-align: left;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}
.conv-menu-item:hover,
.user-menu-item:hover { background: var(--bg-base); }
.conv-menu-item svg,
.user-menu-item svg { flex-shrink: 0; color: var(--text-muted); }
.conv-menu-item:hover svg,
.user-menu-item:hover svg { color: var(--text); }
.conv-menu-item-danger,
.user-menu-item-danger { color: #ef4444; }
.conv-menu-item-danger svg,
.user-menu-item-danger svg { color: #ef4444; }
.conv-menu-item-danger:hover,
.user-menu-item-danger:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.conv-menu-item-danger:hover svg,
.user-menu-item-danger:hover svg { color: #ef4444; }
.conv-menu-sep,
.user-menu-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 2px;
}

/* En-tête identité du menu compte (avatar + nom + email + type de profil) */
.user-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 6px;
}
.user-menu-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.user-menu-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu-email {
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-role-badge {
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--bg-base);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.user-role-badge-admin   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.35);  color: #ef4444; }
.user-role-badge-creator { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #f59e0b; }

/* Édition inline du titre (renommer) */
.conv-title-edit {
    flex: 1;
    min-width: 0;
    background: var(--bg-base);
    border: 1px solid var(--accent);
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
    padding: 2px 6px;
    border-radius: 4px;
    outline: none;
}

/* ---- Indicateur de génération en arrière-plan ---- */
.conv-item.conv-streaming .conv-title::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 7px;
    vertical-align: middle;
    animation: conv-pulse 1.2s ease-in-out infinite;
}
@keyframes conv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.7); }
}

/* ---- Spinner inline (chargement SPA) ---- */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Toasts de notification ---- */
.toast {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #fff;
    background: #374151;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s, transform .25s;
    max-width: 320px;
}
.toast-visible { opacity: 1; transform: translateY(0); }
.toast-error   { background: #ef4444; }
.toast-warning { background: #b45309; }
.toast-success { background: var(--accent); }

/* ---- Bloc d'erreur API en conversation (réponse assistant en échec) ---- */
.msg-error {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: color-mix(in srgb, #ef4444 10%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, #ef4444 32%, transparent);
    border-left: 3px solid #ef4444;
    color: var(--text);
    line-height: 1.5;
    max-width: 640px;
}
.msg-error-icon {
    flex: 0 0 20px;
    margin-top: 1px;
    color: #ef4444;
}
.msg-error-body { min-width: 0; }
.msg-error-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
    color: color-mix(in srgb, #ef4444 78%, var(--text));
}
.msg-error-text {
    font-size: 13.5px;
    color: var(--text-muted);
    white-space: normal;
    word-break: break-word;
}
/* Variantes plus douces selon la nature de l'erreur (config / réseau / saturation) */
.msg-error[data-kind="missing_key"],
.msg-error[data-kind="auth"],
.msg-error[data-kind="bad_request"] {
    background: color-mix(in srgb, #f59e0b 10%, var(--bg-surface));
    border-color: color-mix(in srgb, #f59e0b 32%, transparent);
    border-left-color: #f59e0b;
}
.msg-error[data-kind="missing_key"] .msg-error-icon,
.msg-error[data-kind="auth"] .msg-error-icon,
.msg-error[data-kind="bad_request"] .msg-error-icon { color: #f59e0b; }
.msg-error[data-kind="missing_key"] .msg-error-title,
.msg-error[data-kind="auth"] .msg-error-title,
.msg-error[data-kind="bad_request"] .msg-error-title { color: color-mix(in srgb, #f59e0b 82%, var(--text)); }

/* ---- Bannière de suggestion automatique d'outil (au-dessus du composer) ---- */
.tool-suggest-banner {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.4;
}
.tool-suggest-banner[hidden] { display: none !important; }
.tool-suggest-icon {
    flex: 0 0 18px;
    color: var(--accent);
}
.tool-suggest-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.tool-suggest-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.tool-suggest-accept,
.tool-suggest-decline {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.tool-suggest-accept {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
.tool-suggest-accept:hover { filter: brightness(1.08); }
.tool-suggest-decline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.tool-suggest-decline:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text-muted) 50%, transparent);
}
@media (max-width: 768px) {
    .tool-suggest-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .tool-suggest-icon { display: none; }
    .tool-suggest-actions { flex-direction: column; }
    .tool-suggest-accept,
    .tool-suggest-decline { width: 100%; }
}

.conv-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Bloc utilisateur (bas de sidebar) : bouton entier cliquable → ouvre le menu du compte */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 10px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.user-info:hover,
.user-info[aria-expanded="true"] { background: rgba(255,255,255,.06); }
[data-theme="light"] .user-info:hover,
[data-theme="light"] .user-info[aria-expanded="true"] { background: rgba(0,0,0,.05); }

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Avatar de secours : initiales de l'utilisateur */
.user-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-muted);
    flex-shrink: 0;
}

.user-name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   CHAT MAIN
   ========================================================= */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: margin-right .25s ease, box-shadow .2s ease;
    overflow: hidden;
    position: relative;
}

.chat-main::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid rgba(var(--profile-accent-rgb), 0.92);
    box-shadow: inset 0 0 28px rgba(var(--profile-accent-rgb), 0.16);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 20;
}

.chat-main.profile-accent-active::after {
    opacity: 1;
}

/* Toolbar */
.chat-toolbar {
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--bg);
}

/* Bouton repli/déploiement du bandeau d'infos — toujours ancré à droite */
.toolbar-collapse-btn {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.toolbar-collapse-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.toolbar-collapse-btn svg { transition: transform .2s; }
#chatToolbar.is-collapsed .toolbar-collapse-btn svg { transform: rotate(180deg); }

/* Replié : ne montrer que le nom de l'assistant (ou du modèle) */
#chatToolbar.is-collapsed .profile-lock-avatar,
#chatToolbar.is-collapsed .profile-lock-badge,
#chatToolbar.is-collapsed .profile-lock-content p,
#chatToolbar.is-collapsed .profile-lock-llm,
#chatToolbar.is-collapsed .profile-lock-tools,
#chatToolbar.is-collapsed .toolbar-model-logo-wrap,
#chatToolbar.is-collapsed .llm-caps-bar,
#chatToolbar.is-collapsed .toolbar-meta-cost,
#chatToolbar.is-collapsed .toolbar-meta-history,
#chatToolbar.is-collapsed .toolbar-disclaimer { display: none !important; }
#chatToolbar.is-collapsed .profile-lock-header { padding: 3px 12px; }

.toolbar-selectors {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.toolbar-model-logo-wrap {
    width: 64px;
    min-width: 64px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    overflow: hidden;
}

.toolbar-model-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 6px;
}

.profile-lock-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
}

/* Raccourci « Modifier l'assistant » — bout de bandeau, côté droit */
.profile-lock-edit {
    margin-left: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.profile-lock-edit:hover {
    color: var(--text);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface));
}
.profile-lock-edit[hidden] { display: none; }
/* Bandeau replié : la ligne est compacte, l'icône seule suffit. */
#chatToolbar.is-collapsed .profile-lock-edit { align-self: center; padding: 4px 6px; }
#chatToolbar.is-collapsed .profile-lock-edit span { display: none; }

.profile-lock-avatar {
    width: 70px;
    height: 70px;
    border-radius: 10%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.profile-lock-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.profile-lock-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-lock-title-row h2 {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.profile-lock-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.profile-lock-content p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}

.profile-lock-llm {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
}

.profile-lock-llm code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
}

.profile-lock-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.profile-lock-tool-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    white-space: nowrap;
}

/* Colonne verticale des sélecteurs à droite de l'avatar */
.toolbar-selectors-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Ligne couleur + sélecteur de profil */
.toolbar-profile-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.toolbar-row-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.toolbar-profile-row .selector {
    flex: 1;
    min-width: 180px;
    width: 100%;
}
.toolbar-profile-empty {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}
.toolbar-disclaimer {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
}
.toolbar-meta-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.toolbar-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
}
.toolbar-meta-chip strong {
    color: var(--text-primary);
    font-weight: 600;
}
.toolbar-meta-model {
    min-width: 0;
    max-width: min(460px, 100%);
}
#topActiveModelLabel {
    display: inline-block;
    min-width: 0;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.toolbar-meta-cost {
    color: #f59e0b;
    letter-spacing: -0.5px;
    font-weight: 700;
}

.selector {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
}
.selector:focus { border-color: var(--accent); }

/* LLM Picker */
.llm-picker { position: relative; }
.llm-picker-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s;
}
.llm-picker-btn:hover { border-color: var(--accent); }
.llm-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.llm-picker-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    list-style: none;
    margin: 0;
}
/* Chip modèle (à droite, sous la pilule de saisie) */
.llm-inline-picker .llm-picker-btn {
    padding: 5px 10px;
    font-size: 12.5px;
    gap: 6px;
    border-radius: 999px;
    color: var(--text-muted);
}
.llm-inline-picker .llm-picker-btn:hover { color: var(--text); }
.llm-inline-picker .llm-picker-btn span {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.llm-inline-picker .llm-picker-list {
    top: auto;
    bottom: calc(100% + 8px);
    left: auto;
    right: 0;
    max-width: min(92vw, 420px);
    max-height: min(48vh, 380px);
    overflow-y: auto;
}
/* Liste de modèles dans la modale « connecteur / modèle incompatible » :
   même item que le picker, mais dans le flux de la modale (pas en popover). */
/* Au-dessus du menu « + » (z-index 200), d'où la modale est ouverte */
#connectorLlmModal { z-index: 300; }
.connector-llm-list {
    position: static;
    box-shadow: none;
    min-width: 0;
    max-height: min(38vh, 300px);
    overflow-y: auto;
    margin: 0 0 4px;
}
.connector-llm-list[hidden] { display: none; }
/* .btn-primary force display:inline-flex — l'attribut hidden doit primer */
#connectorLlmConfirm[hidden] { display: none; }
#connectorLlmConfirm:disabled { opacity: .5; cursor: not-allowed; }
.connector-llm-list .llm-picker-item.active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.llm-picker-list-header {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
    pointer-events: none;
}
.llm-picker-group {
    margin-top: 4px;
    color: var(--text);
    font-weight: 600;
    opacity: .9;
}
.llm-picker-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: background .1s;
}
.llm-picker-item:hover { background: var(--bg-hover); }
.llm-picker-item.active { background: var(--bg-active); }
.llm-picker-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.llm-cost-stars {
    font-size: 10px;
    color: #f59e0b;
    margin-left: auto;
    letter-spacing: -1px;
    flex-shrink: 0;
}
.llm-cost-legend {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

/* Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
    scroll-behavior: smooth;
}

.resume-follow-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.resume-follow-btn:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}
.resume-follow-btn:hover {
    transform: translateX(-50%) translateY(-2px);
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    text-align: center;
    padding: 40px;
}

.welcome-icon { margin-bottom: 4px; }
.welcome-icon img {
    filter: drop-shadow(0 16px 34px color-mix(in srgb, var(--accent) 24%, transparent));
}

.chat-welcome h2 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
    margin-bottom: 6px;
}

/* Accueil épuré : héro (logo + salutation) + composer regroupés,
   centrés verticalement entre header et footer. */
.chat-main.is-home .chat-messages {
    flex: 0 1 auto;
    overflow: visible;
    margin-top: auto;
    padding: 24px 16px 4px;
}
.chat-main.is-home .chat-welcome { height: auto; padding: 0 0 10px; }
.chat-main.is-home .chat-input-wrap { margin-bottom: auto; }

.welcome-empty-note {
    width: 100%;
    max-width: 480px;
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* Message bubbles — colonne élargie pour mieux remplir le volet principal */
.message {
    display: flex;
    gap: 16px;
    padding: 8px 36px;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.message-user {
    flex-direction: row-reverse;
}

.message-user .msg-body {
    align-items: flex-end;
}

.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
}

.assistant-avatar {
    background: transparent;
    width: 50px;
    height: 50px;
}
.user-avatar-icon {
    background: var(--accent);
    color: white;
}

.msg-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.message-user .msg-body {
    max-width: 70%;
    flex: 0 1 auto;
}

.msg-content {
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-user .msg-content {
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: 8px 14px;
}

.msg-image-wrap {
    margin-bottom: 6px;
}
.msg-image {
    max-width: 320px;
    max-height: 240px;
    border-radius: var(--radius-sm);
    display: block;
    object-fit: contain;
    border: 1px solid var(--border);
}
.msg-image-generated .msg-image {
    max-width: min(480px, 100%);
    max-height: 480px;
}
.msg-image-name {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.msg-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-surface);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
}

/* Images générées dans les messages */
.md-render img {
    max-width: min(100%, 480px);
    border-radius: 10px;
    display: block;
    margin-top: 8px;
    border: 1px solid var(--border);
    cursor: zoom-in;
    transition: opacity .2s;
}
.md-render img:hover { opacity: .92; }

/* Image cliquable (jointe ou générée) → zoom */
.msg-image { cursor: zoom-in; transition: opacity .2s; }
.msg-image:hover { opacity: .92; }

/* Lightbox image plein écran */
.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 32px;
    cursor: zoom-out;
}
.image-lightbox-img {
    max-width: 95vw;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0,0,0,.55);
    object-fit: contain;
}
.image-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.image-lightbox-close:hover { background: rgba(0,0,0,.75); }
body.lightbox-open { overflow: hidden; }

/* Streaming cursor */
.msg-content.streaming::after {
    content: '▌';
    animation: blink .7s steps(1) infinite;
    color: var(--accent);
}

@keyframes blink { 50% { opacity: 0; } }

/* Indicateur de phase pendant le streaming */
.stream-phase {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}
.msg-content.streaming .stream-phase { display: inline-flex; }
.stream-phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: stream-phase-pulse 1.2s ease-in-out infinite;
}
@keyframes stream-phase-pulse {
    0%, 100% { opacity: .3; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.35); }
}

/* Badge LLM ayant généré la réponse (sous le message assistant) */
.msg-llm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 8px 3px 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1;
    user-select: none;
    width: fit-content;
}
.msg-llm-badge-logo {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: contain;
    flex: 0 0 16px;
}
.msg-llm-badge-text {
    font-weight: 500;
    letter-spacing: .1px;
}
.msg-llm-badge-credits {
    color: #f59e0b;
    font-weight: 600;
    white-space: nowrap;
}
.msg-llm-badge-credits[hidden] { display: none; }
.msg-llm-badge-time {
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.msg-llm-badge-time[hidden] { display: none; }

/* Message action buttons */
.msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.message:hover .msg-actions { opacity: 1; }
.msg-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.msg-action-btn:hover { background: var(--bg-surface); color: var(--text); }
.msg-action-btn.copied { color: var(--accent); }

/* Bouton Copier des messages utilisateur : révélé au CLIC sur le texte
   (pas au survol — on neutralise la règle .message:hover ci-dessus),
   aligné à droite comme la bulle. */
.message-user .msg-content { cursor: pointer; }
.message-user .msg-actions {
    justify-content: flex-end;
    margin-top: 4px;
}
.message-user:not(.show-actions) .msg-actions,
.message-user:not(.show-actions):hover .msg-actions {
    opacity: 0;
    pointer-events: none;
}
.message-user.show-actions .msg-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Markdown content */
.msg-content { white-space: normal; }
.message-user .msg-content { white-space: pre-wrap; }

.msg-content h1, .msg-content h2, .msg-content h3,
.msg-content h4, .msg-content h5, .msg-content h6 {
    margin: .8em 0 .35em;
    line-height: 1.3;
    font-weight: 600;
}
.msg-content h1 { font-size: 1.4em; }
.msg-content h2 { font-size: 1.2em; }
.msg-content h3 { font-size: 1.05em; }
.msg-content p { margin: .45em 0; }
.msg-content p:first-child { margin-top: 0; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content ul, .msg-content ol {
    padding-left: 1.25em;
    margin: .35em 0;
}
.msg-content li { margin: .12em 0; }
.msg-content li > ul, .msg-content li > ol { margin: .12em 0; }
.msg-content blockquote {
    border-left: 3px solid var(--accent);
    margin: .5em 0;
    padding: .4em .8em;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-radius: 0 6px 6px 0;
}
.msg-content a { color: var(--accent); text-decoration: underline; }
.msg-content a.citation-link {
    text-decoration: none;
    margin-left: 1px;
}
.msg-content a.citation-link sup {
    font-size: 0.72em;
    line-height: 0;
    vertical-align: super;
    font-weight: 600;
}
.msg-content a.citation-link:hover,
.msg-content a.citation-link:focus-visible {
    text-decoration: underline;
}
.msg-content hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.msg-content strong { font-weight: 600; }
.msg-content em { font-style: italic; }
.msg-content table {
    border-collapse: collapse;
    width: 100%;
    margin: .6em 0;
    font-size: 13px;
}
.msg-content th, .msg-content td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
}
.msg-content th { background: var(--bg-surface); font-weight: 600; }
.msg-content tr:nth-child(even) td { background: rgba(255,255,255,.02); }

/* Code blocks */
.msg-content code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: .88em;
    background: var(--bg-surface);
    border-radius: 4px;
    padding: 2px 5px;
    color: #e2b714;
}
.msg-content pre {
    background: #1a1a1a;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: .6em 0;
    overflow-x: auto;
    position: relative;
    tab-size: 4; /* tabulations code : 8 colonnes par défaut, trop larges */
}
.msg-content pre code {
    background: none;
    padding: 14px 16px;
    display: block;
    color: #e2e8f0;
    font-size: .85em;
    line-height: 1.6;
    border-radius: 0;
}
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #111;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 11px;
    color: var(--text-muted);
}
.btn-copy-code {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background .1s, color .1s;
    display: flex; align-items: center; gap: 4px;
}
.btn-copy-code:hover { background: var(--bg-surface); color: var(--text); }
.btn-copy-code.copied { color: var(--accent); }

/* ---- Schémas Mermaid ---- */
.mermaid-diagram {
    margin: 0.8em 0;
    /* Suit le thème : blanc en light, surface sombre en dark. Le rendu Mermaid
       (theme base + variables dérivées de --accent) est calé sur cette couleur,
       et les exports PNG/SVG l'embarquent comme fond. */
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}
.mermaid-svg {
    overflow-x: auto;
    padding: 16px;
    text-align: center;
}
.mermaid-svg svg {
    max-width: 100%;
    height: auto;
}
.mermaid-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .12s;
}
.mermaid-diagram:hover .mermaid-actions { opacity: 1; }
.btn-mermaid-dl {
    background: rgba(17, 17, 17, .78);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    padding: 4px 9px;
    border-radius: 4px;
    transition: background .1s;
}
.btn-mermaid-dl:hover { background: var(--accent); }
.mermaid-error {
    margin: 0.4em 0 0.8em;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
@media (max-width: 768px) {
    .mermaid-actions { opacity: 1; }
}

/* =========================================================
   INPUT
   ========================================================= */
.chat-input-wrap {
    padding: 16px 24px 12px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.chat-input-form {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Accueil : le composer reste compact, pièce maîtresse centrée */
.chat-main.is-home .chat-input-form { max-width: 760px; }

.conversation-credits-note {
    width: 100%;
    max-width: 900px;
    margin: 0;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.3;
    color: #f59e0b;
    text-align: left;
}
.conversation-credits-note strong {
    font-size: 14px;
    color: #f59e0b;
}

/* Pilule de saisie : coins très arrondis + halo dégradé discret de la
   couleur d'accent (la lueur autour de la fenêtre de prompt). */
.input-box {
    background: var(--bg-input);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 28px;
    padding: 6px 8px 6px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 4px 22px color-mix(in srgb, var(--accent) 9%, transparent),
        0 0 52px color-mix(in srgb, var(--accent) 7%, transparent);
}
.input-box:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 6px 26px color-mix(in srgb, var(--accent) 14%, transparent),
        0 0 64px color-mix(in srgb, var(--accent) 11%, transparent);
}
/* Accueil : halo légèrement plus présent (pièce maîtresse de la page) */
.chat-main.is-home .input-box {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 6px 30px color-mix(in srgb, var(--accent) 13%, transparent),
        0 0 76px color-mix(in srgb, var(--accent) 10%, transparent);
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}
.input-row .btn-icon {
    width: 38px;
    height: 38px;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.file-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.file-preview span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#removeFile {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
#removeFile:hover { color: #ef4444; }

.msg-textarea {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    resize: none;
    outline: none;
    width: 100%;
    min-height: 2.1em; /* +30% environ par rapport a la hauteur de base */
    max-height: 260px;
    overflow-y: auto;
    line-height: 1.6;
    padding: 6px 0;
    align-self: center;
}

.msg-textarea::placeholder { color: var(--text-muted); }

/* Rangée d'actions SOUS la pilule : icônes à gauche, modèle à droite */
.input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
}

.input-actions-left {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}
.input-actions-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Boutons icône du composer (menu « + », assistants) */
.composer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
    transition: color .15s, background .15s;
}
.composer-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.composer-btn.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Menu « + » du composer : regroupe fichiers/photos, options (Internet) et outils */
.plus-menu { position: relative; }
.plus-menu-btn { position: relative; }
.plus-menu-btn svg { transition: transform .18s ease; }
.plus-menu-btn[aria-expanded="true"] svg { transform: rotate(45deg); } /* le + devient × */
.plus-menu-dot {
    /* Témoin « Recherche Internet désactivée » (écart au défaut) */
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
}
.plus-menu-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 200;
    min-width: 300px;
    max-width: min(88vw, 340px);
    max-height: min(60vh, 480px);
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    animation: plusMenuIn .14s ease-out;
}
@keyframes plusMenuIn {
    from { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .plus-menu-panel { animation: none; }
}
.plus-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.plus-menu-item.plus-menu-item-mobile { display: none; } /* visible seulement ≤768px */

/* Tuile d'icône + libellé deux lignes (nom + hint), communs à tous les items */
.plus-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text-muted);
    transition: background .15s, color .15s;
}
.plus-menu-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.plus-menu-info strong {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plus-menu-hint {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plus-menu-check {
    display: none;
    color: var(--accent);
    flex-shrink: 0;
}
.plus-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.plus-menu-row .ios-switch { margin-left: auto; }
.plus-menu-row:hover { background: var(--bg-hover, rgba(255, 255, 255, .06)); }
/* Connecteur activé : tuile d'icône teintée accent */
.plus-menu-row:has(input:checked) .plus-menu-icon {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.plus-menu-row.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}
.plus-menu-row.is-disabled:hover { background: transparent; }
.plus-menu-row.is-disabled .ios-switch { cursor: not-allowed; }

/* Chip outil actif dans la barre (témoin amovible, menu fermé) */
.composer-tool-chip[hidden] { display: none; }
.composer-tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    padding: 0 4px 0 10px;
    border-radius: 999px;
    font-size: 12.5px;
    max-width: 180px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.composer-tool-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.composer-tool-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    border-radius: 50%;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.composer-tool-chip-remove:hover {
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

/* Sélecteur d'assistants (icône personnes sous la pilule) */
.assistant-picker { position: relative; }
.assistant-picker-list {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 200;
    min-width: 280px;
    max-width: min(88vw, 360px);
    max-height: min(52vh, 420px);
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.assistant-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .1s;
}
.assistant-picker-item:hover,
.assistant-picker-item:focus-visible {
    background: var(--bg-hover, rgba(255, 255, 255, .06));
    outline: none;
}
/* Ligne sous le curseur en mode mention « @ » : le focus reste dans le
   composer (on continue de taper), le surlignage doit donc être porté par la
   liste elle-même et se distinguer d'un simple survol souris. */
.assistant-picker-item.is-active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 2px 0 0 var(--accent);
}
.assistant-picker-empty {
    padding: 10px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}
.assistant-picker-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.assistant-picker-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 10px;
}
.assistant-picker-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.assistant-picker-info strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-picker-info span   { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant-picker-badge { font-size: 9px; flex-shrink: 0; }

/* Libellés de section dans les popovers (Images, Assistants perso…) */
.picker-section-label {
    padding: 8px 10px 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    pointer-events: none;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.picker-section-label.picker-section-first,
.picker-section-label:first-child {
    border-top: none;
    margin-top: 0;
}

[data-theme="light"] .plus-menu-panel,
[data-theme="light"] .assistant-picker-list {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}

/* Interrupteur iOS (réutilisable) — ex: partage d'assistant */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
.ios-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ios-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background .2s ease;
}
.ios-switch-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: transform .2s ease;
}
.ios-switch input:checked + .ios-switch-slider {
    background: var(--accent);
}
.ios-switch input:checked + .ios-switch-slider::before {
    transform: translateX(18px);
}
.ios-switch input:focus-visible + .ios-switch-slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Indication « à autoriser dans les groupes » pour un assistant partagé */
.share-group-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.25;
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 38%, transparent);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
[data-theme="dark"] .share-group-hint { color: #fbbf24; }
.share-group-hint a { color: inherit; text-decoration: none; font-weight: 600; }
.share-group-hint a:hover { text-decoration: underline; }
.img-tool-item:hover,
.tool-picker-item:hover,
.plus-menu-item:hover,
.plus-menu-item:focus-visible {
    background: var(--bg-hover, rgba(255,255,255,.06));
    outline: none;
}
.tool-picker-item,
.plus-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background .1s;
}
.tool-picker-item.is-selected .plus-menu-check { display: block; }
.tool-picker-item.is-selected .plus-menu-icon {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.tool-picker-item.is-selected .plus-menu-info strong {
    color: var(--accent);
    font-weight: 600;
}
.tool-cost-stars {
    margin-left: auto;
    flex-shrink: 0;
}
.tool-picker-item.is-disabled {
    opacity: .45;
    color: var(--text-muted);
    cursor: not-allowed !important;
}
.tool-picker-item.is-disabled:hover {
    background: transparent;
}

/* =========================================================
   MSG HTML CARD
   ========================================================= */
.msg-html-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.msg-html-card-icon { color: var(--accent); flex-shrink: 0; }
.msg-html-card-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 80px; }
.msg-html-card-name { font-size: 13px; font-weight: 500; }
.msg-html-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.msg-video-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.msg-video-card-icon { color: #f87171; flex-shrink: 0; }
.msg-video-card-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 80px; }
.msg-video-card-name { font-size: 13px; font-weight: 500; }
.msg-video-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* =========================================================
   HTML VIEWER PANEL
   ========================================================= */
.html-viewer {
    position: fixed;
    top: 0; right: 0;
    width: var(--viewer-width);
    height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    z-index: 400;
    display: none;
    flex-direction: column;
    box-shadow: -6px 0 28px rgba(0, 0, 0, .35);
    isolation: isolate;
    contain: layout paint style;
    overscroll-behavior: contain;
}
.html-viewer.open { display: flex; }
.viewer-open .chat-main { margin-right: var(--viewer-width); }

.html-viewer-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 46px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.html-viewer-title {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.html-viewer-tabs {
    display: flex;
    gap: 3px;
    background: var(--bg-input);
    border-radius: 6px;
    padding: 2px;
}
.html-viewer-tab {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    border: none;
    display: inline-flex;
    align-items: center;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.html-viewer-tab.active {
    background: var(--bg-card);
    color: var(--text);
}

.html-viewer-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.html-viewer-btn:hover { background: var(--bg-hover, rgba(255,255,255,.07)); color: var(--text); }
.html-viewer-btn.edit-active { background: var(--accent); color: #fff; }
.html-viewer-btn.edit-active:hover { background: var(--accent-dark, var(--accent)); color: #fff; }

/* Indicateur de sauvegarde du mode édition */
.html-save-state {
    font-size: 11px;
    white-space: nowrap;
    padding: 0 4px;
    color: var(--text-muted);
}
.html-save-state.saved { color: var(--success, #22c55e); }
.html-save-state.error { color: var(--danger, #ef4444); }

/* Sélecteur d'image du mode édition (overlay dans le panneau d'aperçu) */
.html-img-picker {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
}
.html-img-picker-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px;
    width: min(340px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.html-img-picker-box h4 { margin: 0; font-size: 14px; color: var(--text); }
.html-img-picker-file { text-align: center; cursor: pointer; }
.html-img-picker-or { font-size: 11px; color: var(--text-muted); text-align: center; }
.html-img-picker-box input[type="url"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    padding: 7px 9px;
    font-size: 13px;
}
.html-img-picker-actions { display: flex; gap: 8px; justify-content: flex-end; }

.html-viewer-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
}
.html-viewer-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.html-viewer-code {
    flex: 1;
    overflow: auto;
    padding: 14px;
    background: var(--bg-input);
}
.html-viewer-code pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text);
    line-height: 1.55;
}

.html-viewer-iframe {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: block;
    border: none;
    background: #fff;
}

/* Poignée de redimensionnement (bord gauche du panneau) */
.html-viewer-resizer {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 3;
    background: transparent;
    transition: background .15s;
    touch-action: none;
}
.html-viewer-resizer:hover,
.html-viewer-resizer.dragging { background: var(--accent); }

/* Segmented control Bureau / Mobile */
.html-viewer-device {
    display: flex;
    gap: 2px;
    background: var(--bg-input);
    border-radius: 6px;
    padding: 2px;
    margin-right: 4px;
}
.html-viewer-device-btn {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    transition: background .15s, color .15s;
}
.html-viewer-device-btn.active {
    background: var(--bg-card);
    color: var(--text);
}

/* Aperçu mobile : gabarit téléphone centré sur une scène contrastée */
.html-viewer.preview-mobile { background: var(--bg); }
.html-viewer.preview-mobile .html-viewer-iframe {
    flex: none;
    align-self: center;
    width: 390px;
    max-width: calc(100% - 24px);
    height: calc(100% - 28px);
    margin: 14px auto;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--border), 0 14px 44px rgba(0, 0, 0, .45);
}

@media (max-width: 768px) {
    .html-viewer.open { width: 100%; }
    .video-viewer.open { width: 100%; }
    .sources-viewer.open { width: 100%; }
    .viewer-open .chat-main { margin-right: 0; }
}

/* =========================================================
   MAP VIEWER PANEL (outil Carte / Itinéraire — Leaflet)
   Réutilise la coque .html-viewer ; ici uniquement le corps carte + notes.
   ========================================================= */
.map-viewer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.map-canvas {
    flex: 1;
    min-height: 0;
    background: var(--bg);
}
.map-canvas .leaflet-container { font: inherit; }

/* Marqueur numéroté */
.map-marker-wrap { background: none; border: none; }
.map-marker {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(0deg);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.map-popup-note {
    margin-top: 4px;
    font-size: 12px;
    color: #444;
    max-width: 220px;
}

/* Volet notes sous la carte */
.map-notes {
    flex-shrink: 0;
    max-height: 45%;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
}
.map-notes.collapsed { display: none; }
.map-notes-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.map-notes-head strong { font-size: 13px; }
.map-notes-stats {
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.map-notes-summary {
    margin: 0 0 8px;
    color: var(--text-muted);
}
.map-notes-warnings {
    margin: 0 0 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    background: rgba(245, 158, 11, .12);
    color: #f59e0b;
}
.map-notes-steps {
    margin: 0 0 8px;
    padding-left: 20px;
}
.map-notes-steps li { margin-bottom: 3px; }
.map-step-note {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}
.map-step-lost {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, .15);
    color: #f59e0b;
    vertical-align: 1px;
}
.map-notes-general {
    margin: 0;
    padding-left: 18px;
    color: var(--text-muted);
}
.map-notes-general li { margin-bottom: 2px; }

/* Attribution OSM lisible sur les deux thèmes */
.map-canvas .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, .8);
}

/* =========================================================
   VIDEO VIEWER PANEL
   ========================================================= */
.video-viewer {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--viewer-width);
    height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    z-index: 400;
    display: none;
    flex-direction: column;
    box-shadow: -6px 0 28px rgba(0, 0, 0, .35);
    isolation: isolate;
    contain: layout paint style;
    overscroll-behavior: contain;
}
.video-viewer.open { display: flex; }

.video-viewer-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 46px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.video-viewer-title {
    font-size: 13px;
    font-weight: 600;
}
.video-viewer-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.video-viewer-btn:hover { background: var(--bg-hover, rgba(255,255,255,.07)); color: var(--text); }

.video-viewer-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px;
    text-align: center;
}
.video-viewer-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: #f87171;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.video-viewer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px;
    gap: 10px;
}
.video-viewer-player {
    width: 100%;
    height: 100%;
    min-height: 220px;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.video-viewer-meta {
    color: var(--text-muted);
    font-size: 12px;
}

/* =========================================================
   SOURCES VIEWER PANEL (SONAR PRO)
   ========================================================= */
.sources-viewer {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--viewer-width);
    height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    z-index: 400;
    display: none;
    flex-direction: column;
    box-shadow: -6px 0 28px rgba(0, 0, 0, .35);
    isolation: isolate;
    contain: layout paint style;
    overscroll-behavior: contain;
}
.sources-viewer.open { display: flex; }

.sources-viewer-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 46px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.sources-viewer-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.sources-viewer-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1.2;
}
.sources-viewer-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, opacity .15s;
}
.sources-viewer-btn:hover { background: var(--bg-hover, rgba(255,255,255,.07)); color: var(--text); }
.sources-viewer-btn:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.sources-viewer-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.sources-viewer-list {
    flex: 1;
    overflow: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sources-viewer-item {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    border-radius: 10px;
    padding: 9px 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sources-viewer-item:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.sources-viewer-item.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-input));
}
.sources-viewer-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sources-viewer-index {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    min-width: 24px;
}
.sources-viewer-domain {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sources-viewer-url {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color .15s, background .15s;
}
.btn-icon:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* Envoi : avion en papier discret dans la pilule (accent quand actif) */
.btn-send {
    background: transparent;
    border: none;
    color: var(--accent);
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, opacity .15s;
}
.btn-send:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn-send:disabled { background: transparent; color: var(--text-muted); opacity: .5; cursor: not-allowed; }

.btn-send.btn-stop {
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-send.btn-stop:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* Bouton micro — dictée Realtime Whisper */
.btn-mic.mic-recording {
    color: #ef4444;
    background: rgba(239, 68, 68, .12);
    animation: micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);  }
}
.btn-mic:disabled { opacity: .5; cursor: wait; }
/* Connexion en cours (clic → enregistrement réellement actif) : spinner */
.btn-mic.mic-loading {
    position: relative;
    color: var(--accent);
    pointer-events: none;
    cursor: wait;
}
.btn-mic.mic-loading svg { opacity: .2; }
.btn-mic.mic-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.msg-textarea.mic-transcribed {
    font-style: italic;
    color: #6b7280;
}

.input-disclaimer {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Footer discret en bas du chat */
.chat-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 4px 16px 6px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: var(--bg);
    opacity: 0.7;
    letter-spacing: 0.2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-footer-link {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.chat-footer-link:hover {
    color: var(--text);
}

/* ---- Page à propos ---- */
body.about-page {
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 85% -5%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
        radial-gradient(1100px 600px at 10% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
        var(--bg);
    color: var(--text);
    overflow: auto;
}
.about-wrap {
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: 32px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Hero */
.about-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px 24px 32px;
}
.about-hero-glow {
    position: absolute;
    inset: -40% 30% auto;
    height: 320px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.about-hero > *:not(.about-hero-glow) { position: relative; z-index: 1; }
.about-logo {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--bg);
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 50%, transparent);
    margin-bottom: 14px;
}
.about-kicker {
    color: var(--accent);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    margin-bottom: 6px;
}
.about-title {
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.15;
    margin: 0 0 12px;
}
.about-title span { color: var(--accent); }
.about-lead {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}
.about-hero-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
.about-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.about-version-badge:hover { border-color: var(--accent); transform: translateY(-1px); }
.about-version-badge .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10a37f;
    box-shadow: 0 0 0 3px color-mix(in srgb, #10a37f 25%, transparent);
}
.about-version-badge-cta {
    color: var(--accent);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-left: 1px solid var(--border);
    padding-left: 8px;
}
.about-cta { text-decoration: none; }

/* Sections */
.about-section-title {
    font-size: 20px;
    margin: 0 0 16px;
    text-align: center;
}
.about-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.about-feature {
    background: color-mix(in srgb, var(--bg-surface) 75%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    transition: border-color .15s, transform .15s;
}
.about-feature:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); }
.about-feature-icon {
    font-size: 24px;
    display: inline-block;
    margin-bottom: 8px;
}
.about-feature h3 { font-size: 15px; margin: 0 0 4px; }
.about-feature p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Feedback CTA */
.about-feedback {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--bg-surface)), var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 16px;
    padding: 22px 24px;
}
.about-feedback h2 { font-size: 18px; margin: 0 0 4px; }
.about-feedback p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Grid société */
.about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.about-block {
    background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}
.about-block h2 { font-size: 16px; margin-bottom: 10px; }
.about-block p { font-size: 14px; line-height: 1.6; }
.about-list {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
}
.about-link { color: var(--accent); word-break: break-word; }
.about-actions {
    display: flex;
    justify-content: center;
}

@media (max-width: 860px) {
    .about-features, .about-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .about-features, .about-grid { grid-template-columns: 1fr; }
    .about-feedback { flex-direction: column; align-items: flex-start; }
}

/* ---- Indicateurs de capacités LLM ---- */
.llm-info-bar,
.llm-caps-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 3px 0;
    min-height: 20px;
}
.llm-info-bar { padding: 5px 4px 2px; }

.llm-cap {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: .01em;
}
.llm-cap-ok { color: var(--accent); }
.llm-cap-no { color: #ef4444; }

/* =========================================================
   MODAL
   ========================================================= */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-box {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    width: 400px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Champ mot de passe avec bouton œil intégré */
.password-field {
    position: relative;
}
.password-field > input {
    width: 100%;
    padding-right: 38px;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 0;
}
.password-toggle:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--border) 35%, transparent);
}
.password-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Modale "Session expirée" — affichée quand une requête AJAX / SSE rencontre un 401.
   Même langage visuel que .modal-box (fond sidebar, bordure, radius) + accent ambre
   des erreurs d'authentification (.msg-error[data-kind="auth"]). */
.session-expired-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    animation: session-expired-fade-in .2s ease-out;
}
.session-expired-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-sidebar);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px 22px;
    width: min(92vw, 400px);
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    animation: session-expired-pop .28s cubic-bezier(.18, .89, .32, 1.18);
}
.session-expired-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
    color: #f59e0b;
    margin-bottom: 16px;
}
.session-expired-box h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
}
.session-expired-box p {
    margin: 0 0 20px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
}
.session-expired-box .session-expired-btn {
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
}
.session-expired-countdown {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.session-expired-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}
@keyframes session-expired-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes session-expired-pop {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-box-compact {
    width: min(92vw, 380px);
    gap: 12px;
}

.modal-box h3 {
    font-size: 18px;
    font-weight: 600;
}

.modal-box label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.modal-subtitle {
    margin: -8px 0 2px;
    font-size: 13px;
    color: var(--text-muted);
}

/* =========================================================
   MODALE « SITE ILLUSTRÉ » (choix outil image + style)
   Classes dédiées : n'hérite pas de .modal-box label (qui force flex-direction:column).
   ========================================================= */
.illus-modal-box {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    width: 440px;
    max-width: 92vw;
    max-height: 86vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.illus-modal-box h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); }
.illus-modal-sub { margin: 0; font-size: 12px; color: var(--text-muted); }
.illus-modal-note { margin: 0; font-size: 12px; color: var(--text-muted); }
.illus-tool-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 34vh;
    overflow: auto;
}
.illus-tool-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.illus-tool-row.is-disabled { opacity: .5; cursor: not-allowed; }
.illus-tool-row > input { margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.illus-tool-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.illus-tool-name { font-size: 13px; color: var(--text); }
.illus-tool-sub { font-size: 11px; color: var(--text-muted); }
.illus-style-current { color: var(--text); font-weight: 600; }
.illus-style-toggle {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.illus-style-toggle:hover { opacity: .8; }
.illus-style-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.illus-style-chip {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    user-select: none;
}
.illus-style-chip > input { margin: 0; accent-color: var(--accent); }
.illus-style-chip:has(> input:checked) { border-color: var(--accent); }
.illus-style-free {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input, transparent);
    color: var(--text);
    font-size: 13px;
}
.illus-modal-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.illus-btn-cancel {
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}
.illus-btn-cancel:hover { background: var(--bg-hover, rgba(255,255,255,.06)); }

.new-chat-form-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.new-chat-divider {
    position: relative;
    text-align: center;
    margin: 2px 0;
}
.new-chat-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid var(--border);
}
.new-chat-divider span {
    position: relative;
    z-index: 1;
    padding: 0 8px;
    background: var(--bg-sidebar);
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.w-full { width: 100%; }

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
.app-info-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}
.app-info-list {
    margin: 0 0 2px 18px;
    font-size: 13px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.app-info-list li {
    line-height: 1.5;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .15s;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-secondary {
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s;
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-danger {
    background: rgba(239,68,68,.12);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.4);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-danger:hover {
    background: rgba(239,68,68,.2);
    border-color: rgba(239,68,68,.55);
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}

.login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 40px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 380px;
    max-width: 90vw;
}

.login-logo { margin-bottom: 4px; }

/* Graisse et approche : cf. le bloc `--font-title` en tête de fichier. Les
   redéclarer ici les emporterait (même spécificité, règle plus tardive) et
   ferait diverger l'écran de connexion des deux autres wordmarks. */
.login-box h1 {
    font-size: 24px;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

/* Bouton de connexion externe. `.btn-google` reste l'alias historique : la
   page de connexion pose les deux classes, aucun style à réécrire quand un
   fournisseur s'ajoute. */
.btn-sso,
.btn-google {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: white;
    color: #1f1f1f;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .15s;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}
.btn-sso:hover,
.btn-google:hover { box-shadow: 0 2px 12px rgba(0,0,0,.3); }

.login-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* =========================================================
   ADMIN
   ========================================================= */
body.admin-page {
    display: flex;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Overlay sidebar mobile admin */
.admin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;
}
.admin-overlay.active { display: block; }

/* Header mobile admin (caché sur desktop) */
.admin-mobile-header {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}
.admin-burger {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
}
.admin-burger:hover { color: var(--text); background: var(--bg-surface); }

.admin-sidebar {
    width: 220px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.admin-sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.admin-sidebar .logo-text {
    padding: 0;
    border: 0;
    margin: 0;
    display: block;
}

.admin-nav-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 8px;
}

.admin-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    background: var(--bg-sidebar);
}

.admin-nav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 10px 14px 4px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13.5px;
    transition: background .15s, color .15s;
}
.admin-nav-link:hover, .admin-nav-link.active {
    background: var(--bg-surface);
    color: var(--text);
}
/* Sortie de l'administration : détaché des sections, jamais « actif ». */
.admin-nav-back {
    margin-bottom: 4px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
.admin-nav-back:hover { color: var(--accent); }

/* Sous-menu rétractable (« Bases de connaissances ») */
.admin-nav-group-toggle {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.admin-nav-group-label { flex: 1; min-width: 0; }
.admin-nav-chevron { flex-shrink: 0; transition: transform .15s; }
.admin-nav-group.open .admin-nav-chevron { transform: rotate(180deg); }
.admin-nav-sub { display: none; }
.admin-nav-group.open .admin-nav-sub { display: block; }
/* Décalage aligné sur l'icône du parent (15 px + gap 10 px), filet de rattachement. */
.admin-nav-sublink {
    margin-left: 18px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
}
.admin-nav-sublink.active { border-left-color: var(--accent); }

.admin-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

body.admin-page .admin-content > * {
    max-width: 100%;
    min-width: 0;
}

body.admin-page .admin-content a,
body.admin-page .admin-content code {
    overflow-wrap: anywhere;
}

body.admin-page .admin-content img,
body.admin-page .admin-content video,
body.admin-page .admin-content canvas,
body.admin-page .admin-content iframe {
    max-width: 100%;
    height: auto;
}

.admin-content h1 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 24px;
}

.card {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
body.admin-page .card { box-shadow: 0 6px 20px rgba(0,0,0,.14); }
[data-theme="light"] body.admin-page .card { box-shadow: 0 4px 14px rgba(15,23,42,.06); }

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: calc(var(--radius) - 2px);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(61,61,61,.5);
    vertical-align: middle;
}
body.admin-page td { word-break: break-word; }

tr:last-child td { border-bottom: none; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}
.badge-green  { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.badge-yellow { background: rgba(234,179,8,.15);  color: #ca8a04; }
.badge-red    { background: rgba(239,68,68,.15);  color: #ef4444; }
.badge-gray   { background: rgba(100,100,100,.2); color: var(--text-muted); }
/* Assistant personnel (créé par un "creator", visible par lui seul) */
.badge-personal { background: rgba(139,92,246,.16); color: #8b5cf6; font-weight: 600; }
/* Assistant organisation (créé par un admin, distribué via les groupes) */
.badge-org    { background: rgba(59,130,246,.14);  color: #3b82f6; }
/* Assistant global (visible par TOUS, hors filtrage de groupe — ex. aide MIA) */
.badge-global { background: rgba(20,184,166,.14);  color: #14b8a6; }

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-group label {
    font-size: 13px;
    color: var(--text-muted);
}

.form-input, .form-select, .form-textarea {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    transition: border-color .15s;
    width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--accent);
}
.form-textarea { resize: vertical; min-height: 80px; }

/* Alerts */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    width: 100%;
}
.alert-error   { background: rgba(239,68,68,.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }
.alert-success { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

/* Error pages */
body.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.error-box { text-align: center; }
.error-box h1 { font-size: 80px; font-weight: 700; color: var(--text-muted); }
.error-box p { color: var(--text-muted); margin: 8px 0 20px; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

/* Fix 100vh iOS (barre d'adresse dynamique) */
body.app {
    height: 100dvh;
}

/* Header mobile — caché sur desktop */
.mobile-header {
    display: none;
}
/* Graisse et approche : cf. le bloc `--font-title` en tête de fichier. */
.mobile-header-title {
    font-size: 15px;
}

/* Hamburger — caché sur desktop */
.btn-sidebar-toggle {
    display: none;
}

/* Bouton « + » (nouvelle conversation) et avatar du header mobile —
   affichés uniquement dans le @media mobile */
.mobile-header-newchat,
.header-avatar-btn {
    display: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 40px;
    height: 40px;
    color: var(--text-muted);
}
.mobile-header-newchat:hover,
.header-avatar-btn:hover { background: var(--bg-surface); color: var(--text); }
.header-avatar-btn .user-avatar,
.header-avatar-btn .user-avatar-fallback {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

/* Verrou de scroll quand un drawer ou le bottom sheet est ouvert */
body.drawer-open,
body.sheet-open { overflow: hidden; }

/* Backdrop du bottom sheet (menu compte mobile) — au-dessus des drawers
   (chat 100, admin 200), sous le menu (300) */
.user-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 299;
}
.user-menu-backdrop[hidden] { display: none; }

/* Poignée du bottom sheet — visible uniquement en mode sheet (mobile) */
.user-menu-grip { display: none; }

@keyframes userSheetUp {
    from { transform: translateY(24px); opacity: .6; }
    to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .user-menu.is-sheet { animation: none; }
}

.mobile-header-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

/* Overlay sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99;
}
.sidebar-overlay.active { display: block; }

@media (max-width: 768px) {

    /* Sidebar en drawer overlay */
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: 280px;
        min-width: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,.5);
    }

    /* Le repli desktop ne s'applique pas au drawer : il s'ouvre/ferme au burger,
       et le bouton du header le referme (cf. sidebarCollapseBtn dans chat.js). */
    body.sidebar-collapsed .sidebar { width: 280px; min-width: 0; }
    body.sidebar-collapsed .sidebar-reopen-btn { display: none; }
    body.sidebar-collapsed .chat-toolbar { padding-left: 10px; }

    /* Le chat prend toute la largeur */
    .chat-main { width: 100%; }

    /* Header mobile : ☰ à gauche, logo + nom, puis « + » et avatar à droite */
    .mobile-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-base);
        flex-shrink: 0;
    }
    .mobile-header-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-header-newchat,
    .header-avatar-btn { display: flex; }

    /* Bouton hamburger visible dans la toolbar */
    .btn-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 6px;
        border-radius: 6px;
        flex-shrink: 0;
    }
    .btn-sidebar-toggle:hover { background: var(--bg-surface); }

    /* Sur mobile, le menu 3-points reste toujours visible (pas de hover) */
    .conv-menu-btn { opacity: .65; padding: 6px; margin: -6px -4px -6px 0; }
    .conv-menu { min-width: 180px; }
    .conv-menu-item,
    .user-menu-item { padding: 10px 12px; font-size: 14px; }

    /* Menu du compte en bottom sheet (user-menu.js pose .is-sheet et vide
       les left/top inline du mode popover desktop) */
    .user-menu.is-sheet {
        left: 0; right: 0; top: auto; bottom: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: min(75dvh, 560px);
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        padding: 8px 12px calc(12px + var(--safe-bottom));
        animation: userSheetUp .22s ease;
    }
    .user-menu.is-sheet .user-menu-grip {
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 2px auto 8px;
    }

    /* Cibles tactiles confortables au pouce */
    .sidebar-collapse-btn,
    .sidebar-reopen-btn { padding: 9px; }

    /* Sur mobile, le header global (logo à gauche, burger à droite) reste visible. */
    #mobileHeader {
        display: flex;
    }

    /* Le burger de la toolbar n'est plus utilisé en mobile. */
    .chat-toolbar .btn-sidebar-toggle {
        display: none;
    }

    /* Toolbar : selectors empilés */
    .chat-toolbar { padding: 4px 10px; }
    .toolbar-selectors { flex-wrap: wrap; gap: 4px; }
    .toolbar-selectors-stack { gap: 3px; }
    .toolbar-disclaimer { display: none; }
    .llm-picker-btn { font-size: 12px; }
    .toolbar-profile-row .selector { min-width: 0; }
    #profileSelect { font-size: 12px; }
    .profile-lock-header {
        gap: 10px;
        padding: 8px 10px;
        align-items: flex-start;
    }
    .profile-lock-avatar {
        width: 64px;
        height: 64px;
    }
    .profile-lock-title-row h2 { font-size: 15px; }
    .profile-lock-content p { font-size: 12px; }
    .profile-lock-llm { font-size: 11px; gap: 8px; }

    /* Messages */
    .chat-messages { padding: 12px 0; }
    .message { padding: 7px 10px; gap: 8px; }
    .message-user .msg-body { max-width: 85%; }
    .msg-avatar { width: 28px; height: 28px; font-size: 11px; }
    .msg-avatar.assistant-avatar { width: 50px; height: 50px; }
    .msg-image { max-width: 100%; }
    /* Indentation des listes réduite : l'espace horizontal est compté */
    .msg-content ul, .msg-content ol { padding-left: 1.1em; }
    .msg-content pre { tab-size: 3; }

    /* Input */
    .chat-input-wrap {
        padding: 8px 10px max(10px, var(--safe-bottom));
    }
    .conversation-credits-note { max-width: 100%; font-size: 11px; padding-inline: 2px; }
    .conversation-credits-note strong { font-size: 13px; }
    .msg-textarea {
        font-size: 16px; /* Empêche le zoom iOS */
        min-height: 2.4em;
        max-height: 320px;
        padding: 8px 0;
    }
    .input-actions {
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;        /* une seule ligne : icônes à gauche, modèle à droite */
        padding: 0 4px;
    }
    .input-actions-left {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        column-gap: 2px;
        overflow-x: auto;         /* fallback : scroll horizontal si vraiment trop large */
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .input-actions-left::-webkit-scrollbar { display: none; }
    .input-actions-left > * { flex-shrink: 0; }
    .composer-btn { min-width: 36px; height: 36px; }
    .btn-icon {
        min-width: 36px;
        min-height: 36px;
        padding: 6px;
        justify-content: center;
    }
    .btn-send {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
        flex-shrink: 0;
    }
    .llm-inline-picker .llm-picker-btn { max-width: 190px; min-height: 32px; }
    .llm-inline-picker .llm-picker-btn span { max-width: 110px; }
    .llm-inline-picker .llm-picker-list {
        /* Drawer plein-écran ancré au-dessus du composer plutôt qu'un
           dropdown qui débordait du viewport sur mobile (le bouton est tout
           à gauche, le panneau positionné right:0 partait vers la gauche
           et était tronqué). */
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(var(--safe-bottom) + 118px);
        top: auto;
        max-width: none;
        max-height: min(60vh, 420px);
        overflow-y: auto;
    }
    /* Menu « + » + assistants : drawer plein-écran (cf. picker LLM) pour ne
       jamais déborder du viewport, et tap targets confortables. */
    #plusMenuPanel,
    #assistantPickerList {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(var(--safe-bottom) + 118px) !important;
        top: auto !important;
        max-width: none !important;
        max-height: min(62vh, 460px) !important;
        overflow-y: auto;
        min-width: 0 !important;
    }
    #plusMenuPanel { border-radius: 16px; }
    .plus-menu-item,
    .plus-menu-row,
    #plusMenuPanel .tool-picker-item { padding: 11px 12px; } /* tap targets */
    .plus-menu-item.plus-menu-item-mobile { display: flex; }
    .composer-tool-chip { max-width: 130px; }
    .toolbar-meta-bar { gap: 6px; }
    .toolbar-meta-chip { font-size: 10px; padding: 2px 7px; }
    #topActiveModelLabel { max-width: 150px; }
    .toolbar-model-logo-wrap { width: 70px; min-width: 70px; }
    .toolbar-model-logo { padding: 6px; }

    /* Welcome */
    .chat-welcome { padding: 24px 16px; }
    .chat-welcome h2 { font-size: 22px; }
    .welcome-icon img { width: 88px; height: 88px; }
    .llm-file-hint, .llm-info-bar, .input-disclaimer { display: none; }

    /* Admin — sidebar drawer */
    .admin-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: min(86vw, 320px);
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow: hidden;
        height: 100dvh;
        padding: max(16px, var(--safe-top)) 12px calc(8px + var(--safe-bottom));
    }
    .admin-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,.5);
    }

    /* Admin layout — colonne sur mobile (sidebar hors flux) */
    body.admin-page {
        flex-direction: column;
        height: 100vh; /* fallback navigateurs sans dvh */
        height: 100dvh;
        overflow: hidden;
    }
    .admin-mobile-header {
        display: flex;
        gap: 8px;
        padding: 8px 10px;
        backdrop-filter: blur(8px);
    }
    .admin-mobile-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        font-weight: 600;
    }
    .admin-mobile-header .mobile-header-logo { width: 28px; height: 28px; }
    .admin-content {
        padding: 12px 12px calc(16px + var(--safe-bottom));
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    body.admin-page .admin-content > *,
    body.admin-page .admin-content .card,
    body.admin-page .admin-content form,
    body.admin-page .admin-content table,
    body.admin-page .admin-content .table-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .admin-content h1 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 14px;
    }
    body.admin-page .card {
        padding: 14px;
        border-radius: 10px;
    }

    /* Formulaires admin: colonnes -> pile verticale */
    body.admin-page .admin-content form div[style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    body.admin-page .admin-content form div[style*="display:flex"][style*="align-items:flex-end"] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
    }
    body.admin-page .admin-content form .form-group {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body.admin-page .admin-content form [style*="min-width"] {
        min-width: 0 !important;
    }
    body.admin-page .admin-content input,
    body.admin-page .admin-content select,
    body.admin-page .admin-content textarea {
        max-width: 100%;
        min-width: 0 !important;
    }
    body.admin-page .admin-content .card > form .btn-primary,
    body.admin-page .admin-content .card > form .btn-secondary,
    body.admin-page .admin-content .card > form .btn-danger {
        width: 100%;
        justify-content: center;
    }

    /* Bouton d'action final d'un formulaire pleine page (Paramètres :
       « Enregistrer » hors card) : pleine largeur et collé en bas de
       l'écran (sticky) — toujours visible pendant le défilement, jamais
       masqué par la barre d'outils du navigateur mobile. */
    body.admin-page .admin-content > form > .btn-primary {
        position: sticky;
        bottom: calc(6px + var(--safe-bottom));
        width: 100%;
        justify-content: center;
        min-height: 44px;
        z-index: 5;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    }
    [data-theme="light"] body.admin-page .admin-content > form > .btn-primary {
        box-shadow: 0 4px 16px rgba(15, 23, 42, .22);
    }

    /* Tableaux scrollables dans les cards */
    body.admin-page .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.admin-page .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    body.admin-page .admin-content .table-wrap > table,
    body.admin-page .admin-content .card > table,
    body.admin-page .admin-content .card > div > table {
        min-width: 100%;
        table-layout: auto;
    }
    body.admin-page .admin-content th {
        padding: 8px 10px;
        font-size: 12px;
        white-space: normal;
    }
    body.admin-page .admin-content td {
        padding: 8px 10px;
        font-size: 12px;
        vertical-align: top;
        overflow-wrap: anywhere;
    }
    body.admin-page .admin-content .card > div[style*="display:flex"] { flex-wrap: wrap; }

    /* Admin users table: cartes lisibles sur mobile */
    .users-table thead {
        display: none;
    }
    .users-table tbody {
        display: block;
    }
    .users-table tbody tr {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: color-mix(in srgb, var(--bg-surface) 75%, transparent);
    }
    .users-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .users-table td {
        display: grid;
        grid-template-columns: minmax(84px, 38%) 1fr;
        gap: 8px;
        align-items: start;
        padding: 7px 0 !important;
        border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
        min-width: 0 !important;
    }
    .users-table td:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
    }
    .users-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.35;
        padding-top: 2px;
    }
    .users-table td > * {
        min-width: 0;
    }
    .users-table td[data-label="Actions"] > div,
    .users-table td[data-label="Actions"] form {
        width: 100%;
    }
    .users-table td[data-label="Actions"] form[style*="display:flex"] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .users-table td[data-label="Actions"] button,
    .users-table td[data-label="Actions"] select,
    .users-table td[data-label="Actions"] input[type="number"] {
        width: 100%;
    }
    .users-table td[data-label="Actions"] div[style*="align-items:center"] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .users-table td[data-label="Actions"] span[style*="k créd/mois"] {
        font-size: 11px !important;
        text-align: left;
    }
    .users-table .badge {
        width: fit-content;
        max-width: 100%;
    }

    /* Tables admin génériques en cartes mobile (api-keys, catalogue LLM, outils, usage) */
    .api-keys-table thead,
    .llm-catalog-table thead,
    .tools-table thead,
    .usage-byuser-table thead,
    .usage-detail-table thead {
        display: none;
    }
    .api-keys-table tbody,
    .llm-catalog-table tbody,
    .tools-table tbody,
    .usage-byuser-table tbody,
    .usage-detail-table tbody {
        display: block;
    }
    .api-keys-table tbody tr,
    .llm-catalog-table tbody tr,
    .tools-table tbody tr,
    .usage-byuser-table tbody tr,
    .usage-detail-table tbody tr {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: color-mix(in srgb, var(--bg-surface) 75%, transparent);
    }
    .api-keys-table tbody tr:last-child,
    .llm-catalog-table tbody tr:last-child,
    .tools-table tbody tr:last-child,
    .usage-byuser-table tbody tr:last-child,
    .usage-detail-table tbody tr:last-child {
        margin-bottom: 0;
    }
    .api-keys-table td,
    .llm-catalog-table td,
    .tools-table td,
    .usage-byuser-table td,
    .usage-detail-table td {
        display: grid;
        grid-template-columns: minmax(84px, 36%) 1fr;
        gap: 8px;
        align-items: start;
        padding: 7px 0 !important;
        border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .api-keys-table td:last-child,
    .llm-catalog-table td:last-child,
    .tools-table td:last-child,
    .usage-byuser-table td:last-child,
    .usage-detail-table td:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
    }
    .api-keys-table td::before,
    .llm-catalog-table td::before,
    .tools-table td::before,
    .usage-byuser-table td::before,
    .usage-detail-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.35;
        padding-top: 2px;
    }
    .api-keys-table td > *,
    .llm-catalog-table td > *,
    .tools-table td > *,
    .usage-byuser-table td > *,
    .usage-detail-table td > * {
        min-width: 0;
    }

    /* En-tête groupé du catalogue LLM (un seul td colspan=6) : on l'affiche en bandeau */
    .llm-catalog-table tr.llm-catalog-group {
        padding: 6px 10px;
        background: var(--bg-surface);
        margin-bottom: 6px;
    }
    .llm-catalog-table tr.llm-catalog-group td {
        display: block !important;
        border: 0 !important;
        padding: 0 !important;
    }
    .llm-catalog-table tr.llm-catalog-group td::before {
        content: none;
    }

    /* Actions admin : bouton inline → empilés, pleine largeur */
    .api-keys-actions .api-keys-actions-row,
    .tools-actions .tools-actions-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }
    .api-keys-actions .api-keys-actions-row > *,
    .tools-actions .tools-actions-row > *,
    .api-keys-actions .api-keys-actions-row form,
    .tools-actions .tools-actions-row form {
        width: 100%;
    }
    .api-keys-actions .api-keys-actions-row button,
    .tools-actions .tools-actions-row button {
        width: 100%;
        justify-content: center;
    }

    /* Usage — détail : breakdown en colonne pour libérer la largeur */
    .usage-detail-table .usage-breakdown-line {
        flex-direction: column;
        gap: 4px;
    }
    .usage-detail-table .usage-breakdown-label {
        width: auto;
    }

    /* Assistants : modale édition — documents de référence */
    #mpDocumentsList > div {
        flex-wrap: wrap;
    }
    #mpDocumentsList > div > div:first-child {
        flex: 1 1 100%;
    }
    #mpDocumentsList > div > button {
        width: 100%;
    }
    #uploadProfileDocForm {
        flex-direction: column;
        align-items: stretch !important;
    }
    #uploadProfileDocForm .btn-primary {
        width: 100%;
    }

    /* Admin — tests page */
    .test-card table { min-width: 100%; }
    #llm-pie { width: 160px; height: 160px; }
    .usage-tab {
        flex: 1;
        text-align: center;
    }
    .admin-nav-link {
        padding: 11px 12px;
        font-size: 14px;
    }
    /* Dashboard + blocs KPI */
    body.admin-page .admin-content div[style*="grid-template-columns:repeat(auto-fit"] {
        gap: 10px !important;
    }
    body.admin-page .admin-content div[style*="font-size:32px"],
    body.admin-page .admin-content div[style*="font-size:28px"] {
        font-size: 24px !important;
        line-height: 1.2;
    }

    /* Usage (donut + légende) */
    body.admin-page .card:has(#llm-pie) {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 14px !important;
    }
    #llm-legend {
        width: 100%;
        gap: 6px !important;
    }
    #llm-legend > div {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Tests LLM */
    body.admin-page .admin-content div[style*="justify-content:space-between"]:has(#runAllBtn) {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }
    #runAllBtn {
        width: 100%;
        justify-content: center;
    }
    #globalScore {
        display: inline-block;
        min-height: 18px;
    }

    /* Logs */
    body.admin-page .card > div[style*="font-family:monospace"] {
        font-size: 11px !important;
        line-height: 1.55 !important;
        padding: 12px !important;
    }

    /* Profils */
    .avatar-picker {
        gap: 10px 8px;
    }
    .avatar-img-wrap {
        width: 52px;
        height: 52px;
    }
    .avatar-none-symbol {
        line-height: 48px;
    }
    .avatar-label {
        max-width: 66px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Modal */
    /* Bottom sheet : la boîte monte jusqu'au bord haut de l'écran. La réserve
       se met en padding ET en hauteur max — sans la seconde, ce qu'on gagne en
       haut se perd en bas. */
    body.admin-page .modal {
        padding: calc(12px + var(--safe-top)) 12px 12px;
        align-items: flex-end;
    }
    body.admin-page .modal-box {
        padding: 20px 16px;
        width: min(100%, 720px);
        max-height: calc(100dvh - 24px - var(--safe-top));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.admin-page .modal-actions {
        display: flex;
        flex-direction: column-reverse;
    }
    body.admin-page .modal-actions .btn-primary,
    body.admin-page .modal-actions .btn-secondary,
    body.admin-page .modal-actions .btn-danger {
        width: 100%;
        justify-content: center;
    }
    body.admin-page .card > div[style*="max-height:700px"] {
        max-height: min(58dvh, 520px) !important;
    }

    /* Markdown : code blocks scrollables */
    .msg-content pre { max-width: calc(100vw - 80px); }

    /* Groupes utilisateurs — drag & drop / cartes : pile verticale */
    body.admin-page .admin-content div[style*="grid-template-columns:minmax(220px,260px) 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .group-dropzone {
        cursor: default !important;
    }
    .catalog-user,
    .group-member {
        cursor: pointer !important;
    }
    #userCatalogList {
        max-height: 220px !important;
    }
    /* Sous-grilles 260px → 1fr */
    body.admin-page .admin-content details > div > form div[style*="grid-template-columns:repeat(auto-fit,minmax(260px"],
    body.admin-page .admin-content .card > form > div[style*="grid-template-columns:repeat(auto-fit,minmax(260px"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Listes checkboxes (assistants / outils / LLMs autorisés) : hauteur raisonnable */
    body.admin-page .admin-content div[style*="max-height:180px"] {
        max-height: 200px !important;
    }
    /* Détails groupes : summary cartes lisibles */
    body.admin-page .admin-content details > summary {
        padding: 12px !important;
        gap: 6px !important;
    }
    body.admin-page .admin-content details > summary strong {
        flex-basis: 100%;
        margin-bottom: 4px;
    }

    /* Crédits — table services : trop large pour cartes, on garde scroll horizontal */
    .credits-table {
        min-width: 900px;
    }
    body.admin-page .admin-content .credits-actions {
        gap: 8px !important;
    }
    body.admin-page .admin-content .credits-actions-left,
    body.admin-page .admin-content .credits-actions-right {
        width: 100%;
        justify-content: flex-start;
    }
    body.admin-page .admin-content .credits-actions-right button {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
    body.admin-page .admin-content .credits-actions-right .btn-primary {
        flex: 1 1 100%;
    }
    .credits-modal-dialog {
        padding: 12px;
        max-height: calc(100dvh - 24px - var(--safe-top));
    }
    .credits-kpis,
    .credits-sim-grid {
        grid-template-columns: 1fr;
    }
    .view-toggle-bar {
        flex-wrap: wrap;
    }
    .btn-view-toggle {
        flex: 1;
        text-align: center;
        font-size: 12px;
        padding: 7px 8px;
    }
    .model-view-table,
    .tool-view-table {
        min-width: 720px;
    }

    /* Paramètres — grille thème/accent : 1 col */
    body.admin-page .admin-content form div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Logo preview : centré et empilé */
    body.admin-page .admin-content .form-group > div[style*="display:flex"][style*="align-items:center"][style*="gap:16px"] {
        flex-wrap: wrap;
    }
    /* Outils — formulaire ajout : selects passent en pile, comme le générique */
    body.admin-page .admin-content #createForm > div[style*="display:flex"][style*="flex-wrap:wrap"][style*="align-items:flex-end"] .form-group {
        flex: 1 1 100% !important;
    }
    body.admin-page .admin-content #createForm .btn-primary,
    body.admin-page .admin-content #editForm .btn-primary,
    body.admin-page .admin-content #editForm .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Logs — filtres : un seul bouton "Filtrer / Réinitialiser" full-width sur petit écran */
    body.admin-page .admin-content form div[style*="grid-template-columns:repeat(auto-fit,minmax(180px"] > div[style*="display:flex"][style*="gap:8px"] {
        grid-column: 1 / -1;
    }
    body.admin-page .admin-content form div[style*="grid-template-columns:repeat(auto-fit,minmax(180px"] > div[style*="display:flex"][style*="gap:8px"] > .btn-primary,
    body.admin-page .admin-content form div[style*="grid-template-columns:repeat(auto-fit,minmax(180px"] > div[style*="display:flex"][style*="gap:8px"] > .btn-secondary {
        flex: 1;
    }

    /* Modale "modal-box-compact" (delete avatar) : ne pas déborder */
    body.admin-page .modal-box-compact {
        width: min(100%, 420px);
    }
}

@media (max-width: 420px) {
    /* JAMAIS le raccourci `padding` ici : sa spécificité (0,2,1) écrasait le
       `padding-top: max(8px, var(--safe-top))` de la section safe-area
       (0,1,0 / 0,2,0), et TOUS les téléphones sont sous 420 px — le header de
       l'administration passait donc sous la barre d'état, en app installée
       comme dans le wrapper natif, alors que la réserve existait bien. */
    body.admin-page .admin-mobile-header {
        gap: 6px;
        padding-inline: 8px;
    }
    body.admin-page .admin-mobile-title {
        font-size: 14px;
    }
    body.admin-page .admin-content {
        padding: 10px 8px calc(14px + var(--safe-bottom));
    }
    body.admin-page .admin-content h1 {
        font-size: 17px;
    }
    body.admin-page .admin-content .card,
    body.admin-page .modal-box {
        padding: 12px;
    }
    body.admin-page .admin-content .table-wrap > table,
    body.admin-page .admin-content .card > table,
    body.admin-page .admin-content .card > div > table,
    body.admin-page .test-card table {
        min-width: 100%;
    }
    body.admin-page .admin-content .btn-primary,
    body.admin-page .admin-content .btn-secondary,
    body.admin-page .admin-content .btn-danger,
    body.admin-page .admin-content .btn-test,
    body.admin-page .admin-content .btn-activate,
    body.admin-page .admin-content .btn-deactivate {
        min-height: 38px;
    }

    /* Composer du chat : très petits écrans (< 420px) — icônes compactes
       pour garder la rangée d'actions sur UNE seule ligne, sans débordement. */
    .chat-input-wrap { padding: 6px 8px max(8px, var(--safe-bottom)); }
    .input-box { padding: 4px 4px 4px 14px; }
    .input-actions { padding: 0 2px; }
    .input-actions-left { column-gap: 0; }
    .composer-btn { min-width: 34px; height: 34px; padding: 0 6px; }
    .llm-inline-picker .llm-picker-btn {
        max-width: 160px;
        padding: 5px 8px;
        min-height: 34px;
    }
    .llm-inline-picker .llm-picker-btn span { max-width: 88px; font-size: 11.5px; }
    .conversation-credits-note { font-size: 10.5px; }
    .conversation-credits-note strong { font-size: 12.5px; }
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Avatar picker (admin profiles) ---- */
.admin-collapse {
    margin: 0;
}

.admin-collapse summary {
    list-style: none;
}

.admin-collapse summary::-webkit-details-marker {
    display: none;
}

.admin-collapse-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
}

.admin-collapse-caret {
    display: inline-block;
    transition: transform .2s;
}

.admin-collapse[open] .admin-collapse-caret {
    transform: rotate(90deg);
}

.admin-collapse-content {
    margin-top: 16px;
}

.avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin-top: 4px;
    /* ~2 rangées visibles : la bibliothèque peut être longue, la modale non. */
    max-height: 184px;
    overflow-y: auto;
    padding: 3px;
}
.avatar-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    position: relative;
}
.avatar-opt input[type=radio] { display: none; }
.avatar-img-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--border);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    background: var(--bg-surface);
}
.avatar-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.avatar-opt input[type=radio]:checked + .avatar-img-wrap {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.avatar-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tuile « + » du picker : révèle le formulaire d'upload d'un nouvel avatar. */
.avatar-opt-add {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}
.avatar-opt-add .avatar-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
}
.avatar-opt-add:hover .avatar-img-wrap,
.avatar-opt-add[aria-expanded="true"] .avatar-img-wrap {
    border-color: var(--accent);
    color: var(--accent);
}
.avatar-upload-inline[hidden] { display: none; }

.avatar-delete-btn {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.2);
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.avatar-delete-btn:hover {
    background: #dc2626;
}

.avatar-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.avatar-library-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    background: var(--bg-base);
    text-align: center;
}

.avatar-library-image-wrap {
    position: relative;
    width: 90px;
    margin: 0 auto 8px;
}

.avatar-library-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.avatar-library-name {
    font-size: 11px;
    font-weight: 600;
    word-break: break-word;
}

.avatar-library-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}

.avatar-library-system {
    margin-top: 4px;
    font-size: 10px;
    color: var(--accent);
    font-weight: 600;
}

.avatar-none-symbol {
    font-size: 20px;
    line-height: 52px;
    display: block;
    text-align: center;
    color: var(--text-muted);
}

/* --- Avatars : upload (bibliothèque + inline création/édition) --- */
.avatar-upload-form,
.avatar-upload-inline {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.avatar-upload-form { margin-bottom: 14px; }
.avatar-upload-inline {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.avatar-upload-inline-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Renommage inline d'un avatar de la bibliothèque */
.avatar-rename-form {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 2px;
}
.avatar-name-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    transition: border-color .15s, background .15s;
}
.avatar-name-input:hover { border-color: var(--border); }
.avatar-name-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-surface);
    text-align: left;
}
.avatar-rename-btn {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.avatar-library-item:hover .avatar-rename-btn,
.avatar-name-input:focus + .avatar-rename-btn { opacity: 1; }
.avatar-rename-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* « Système » en puce inline dans la meta */
.avatar-library-meta .avatar-library-system {
    margin: 0 0 0 6px;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Mobile : avatars compacts, contrôles full-width, actions toujours visibles */
@media (max-width: 768px) {
    .avatar-img-wrap { width: 52px; height: 52px; }
    .avatar-none-symbol { font-size: 19px; line-height: 48px; }
    .avatar-library-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
    .avatar-library-image { width: 72px; height: 72px; }
    .avatar-library-image-wrap { width: 72px; }
    .avatar-upload-form .form-group,
    .avatar-upload-form .btn-primary { flex: 1 1 100%; }
    .avatar-rename-btn { opacity: 1; }
}

.modal-box-profile-edit {
    width: min(820px, 96vw);
    max-width: 820px;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-modal-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.profile-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.profile-modal-close {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.profile-modal-close:hover {
    background: var(--bg-surface);
    color: var(--text-color, inherit);
}

.profile-modal-body {
    padding: 18px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.profile-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-sidebar, transparent);
    flex-shrink: 0;
}
.profile-modal-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-danger-link {
    background: none;
    border: 0;
    color: #ef4444;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .15s;
}
.btn-danger-link:hover {
    background: rgba(239, 68, 68, 0.1);
}

.profile-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--bg-surface, transparent);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-section > h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-color, inherit);
    display: flex;
    align-items: center;
    gap: 7px;
}
.profile-section-ico {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: .75;
}
.profile-section-hint {
    margin: -6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
.profile-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 0;
    line-height: 1.4;
}
.profile-doc-error {
    font-size: 12px;
    color: #c92a2a;
    margin: 6px 0 0;
}

/* Listes à cocher de la modale assistant (bases de connaissances, outils).
   Rangées type carte : case à gauche, nom + sous-titre, badges à droite.
   Sélecteur label.mp-opt-row : spécificité (0,1,1) à égalité avec
   .modal-box label { flex-direction:column } — déclaré plus bas, il gagne. */
.mp-opt-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 210px;
    overflow-y: auto;
    margin-top: 6px;
    padding: 2px;
}
label.mp-opt-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: border-color .12s ease, background-color .12s ease;
}
label.mp-opt-row:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
label.mp-opt-row:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
label.mp-opt-row > input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
/* Icône « type de source » (mêmes visuels que la page Bases de connaissances) :
   logo Drive/SharePoint, ou flèche d'upload pour les fichiers manuels. */
.mp-opt-src {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.mp-opt-src img { width: 16px; height: 16px; object-fit: contain; }
.mp-opt-src svg { width: 15px; height: 15px; }
.mp-opt-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.mp-opt-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-opt-sub {
    font-size: 11px;
    color: var(--text-muted);
}
.mp-opt-tags {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.mp-opt-badge {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.mp-opt-badge-off {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-muted);
}
.mp-opt-badge-sys {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-dark, var(--accent));
}
/* Base système : liaison verrouillée, non modifiable ici. */
label.mp-opt-row.is-locked {
    cursor: not-allowed;
    background: color-mix(in srgb, var(--text-muted) 5%, transparent);
}
label.mp-opt-row.is-locked:hover {
    border-color: var(--border);
    background: color-mix(in srgb, var(--text-muted) 5%, transparent);
}
label.mp-opt-row.is-locked .mp-opt-name { color: var(--text-muted); }
label.mp-opt-row.is-locked > input[type="checkbox"] { cursor: not-allowed; }

/* Documents de référence (modale assistant) : rangées générées en JS. */
.mp-doc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-surface) 55%, transparent);
}
.mp-doc-info { flex: 1; min-width: 0; }
.mp-doc-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-doc-sub { font-size: 11px; color: var(--text-muted); }
.mp-doc-del {
    font-size: 12px;
    padding: 4px 10px;
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 45%, var(--border));
}
.mp-doc-del:hover { background: rgba(239, 68, 68, .08); }

/* Interrupteur « Actif » dans l'en-tête de la modale assistant :
   remplace l'ancienne section Statut (une section pour une case = du scroll). */
.mp-active-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.mp-active-toggle .ios-switch { width: 36px; height: 20px; }
.mp-active-toggle .ios-switch-slider::before { width: 16px; height: 16px; }
.mp-active-toggle .ios-switch input:checked + .ios-switch-slider::before { transform: translateX(16px); }
.mp-active-text.is-off { color: #ef4444; font-weight: 600; }

@media (max-width: 768px) {
    body.admin-page .modal-box-profile-edit {
        width: 100%;
        max-height: calc(100dvh - 16px - var(--safe-top));
        border-radius: 12px 12px 0 0;
    }
    body.admin-page .profile-modal-header,
    body.admin-page .profile-modal-body,
    body.admin-page .profile-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    body.admin-page .profile-section {
        padding: 14px;
    }
    body.admin-page .profile-modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    body.admin-page .profile-modal-footer-actions {
        width: 100%;
        justify-content: flex-end;
    }
    body.admin-page .profile-modal-footer-actions .btn-primary,
    body.admin-page .profile-modal-footer-actions .btn-secondary {
        flex: 1;
    }
}

/* ============================================================
   Liste des assistants (/admin/profiles) — composant "al-*"
   Card-rows groupées par nature (partagés / personnels) :
   identité | partage | méta compacte | actions.
   ============================================================ */

/* --- Toolbar : recherche, filtres, tri --- */
.al-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}
.al-toolbar .al-search { flex: 1 1 220px; min-width: 170px; }
.al-toolbar select.form-select { min-width: 130px; width: auto; }
.al-sort-wrap { display: inline-flex; gap: 0; }
.al-sort-wrap select.form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.al-sort-dir {
    border: 1px solid var(--border);
    border-left: none;
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 10px;
    font-size: 13px;
    line-height: 1;
}
.al-sort-dir:hover { color: var(--text); }
.al-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; margin-left: auto; }

/* --- Groupes (partagés / personnels) --- */
.al-group + .al-group { margin-top: 22px; }
.al-group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.al-group-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.al-group-count { font-size: 12px; color: var(--text-muted); }
.al-group-hint  { font-size: 12px; color: var(--text-muted); opacity: .65; margin-left: auto; }

/* --- Rows --- */
.al-rows { display: flex; flex-direction: column; gap: 8px; }
.al-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.45fr) 168px minmax(210px, 1fr) auto;
    grid-template-areas: "id share meta actions";
    gap: 10px 16px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* Mix opaque (pas de `transparent` : rendu incohérent selon moteur) */
    background: color-mix(in srgb, var(--bg-surface) 55%, var(--bg-sidebar));
    transition: border-color .15s ease, background .15s ease;
    /* Toute la ligne ouvre la fiche (même geste que les cartes des bases). */
    cursor: pointer;
}
.al-row:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: var(--bg-surface);
}

/* --- Zone identité : avatar + nom + description + auteur --- */
.al-id { grid-area: id; display: flex; align-items: center; gap: 12px; min-width: 0; }
.al-row[data-status="0"] .al-id { opacity: .55; }
.al-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
}
.al-color-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
}
.al-id-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-name {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}
.al-name .badge { font-size: 10px; padding: 1px 6px; }
.al-desc {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.al-owner { font-size: 11.5px; color: var(--text-muted); }
.al-owner strong { font-weight: 600; color: color-mix(in srgb, var(--text) 78%, var(--text-muted)); }

/* --- Zone partage : nature + bascule admin --- */
.al-share { grid-area: share; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.al-share .badge { font-size: 11px; }
.al-share-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
}
.al-share-toggle .ios-switch { width: 34px; height: 19px; }
.al-share-toggle .ios-switch-slider::before { width: 15px; height: 15px; }
.al-share-toggle .ios-switch input:checked + .ios-switch-slider::before { transform: translateX(15px); }

/* --- Zone méta : chips compacts (LLM, température, docs, RAG, outils) --- */
.al-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.al-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--bg-surface);
    white-space: nowrap;
    max-width: 220px;
}
.al-chip > span { overflow: hidden; text-overflow: ellipsis; }
.al-chip svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .7; }
.al-chip img { width: 13px; height: 13px; flex-shrink: 0; border-radius: 3px; object-fit: contain; }
.al-chip-llm { color: var(--text); font-weight: 500; }
.al-chip-llm.al-chip-muted { color: var(--text-muted); font-weight: 400; }

/* --- Zone actions --- */
.al-actions { grid-area: actions; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.al-actions .btn-primary,
.al-actions .btn-secondary { font-size: 12px; padding: 5px 11px; white-space: nowrap; }
.al-actions form { margin: 0; display: inline; }

/* --- États vides --- */
.al-empty, .al-empty-filtered {
    text-align: center;
    color: var(--text-muted);
    padding: 26px 12px;
    font-size: 13px;
}

/* --- Menu kebab (actions secondaires par row) --- */
.kebab { position: relative; display: inline-block; }
.kebab-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px 9px;
    color: var(--text);
}
.kebab-btn:hover { background: rgba(127,127,127,.12); }
.kebab-menu {
    position: fixed;
    z-index: 60;
    min-width: 230px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.20);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kebab-menu[hidden] { display: none; }
.kebab-menu form { margin: 0; }
.kebab-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
}
.kebab-row:hover { background: rgba(127,127,127,.10); }
.kebab-sep { height: 1px; background: var(--border); margin: 4px 0; }
.kebab-danger {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: #dc2626;
    font-size: 13px;
    padding: 7px 9px;
    border-radius: 6px;
}
.kebab-danger:hover { background: rgba(220,38,38,.12); }

/* --- Responsive : tablette (2 lignes), mobile (empilé) --- */
@media (max-width: 1140px) {
    .al-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "id    actions"
            "share share"
            "meta  meta";
        gap: 8px 12px;
    }
    .al-share { flex-direction: row; align-items: center; gap: 12px; }
}
@media (max-width: 768px) {
    .al-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "id"
            "share"
            "meta"
            "actions";
    }
    .al-actions { justify-content: stretch; flex-wrap: wrap; }
    .al-actions form { flex: 1; display: flex; }
    .al-actions .btn-primary,
    .al-actions .btn-secondary { flex: 1; width: 100%; }
    .al-group-hint { display: none; }
    .al-desc { white-space: normal; }
    .al-count { margin-left: 0; }
}

/* ---- File chips (multi-fichiers) ---- */
.file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 2px;
}
.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 8px 3px 5px;
    font-size: 12px;
    color: var(--text-muted);
    max-width: 180px;
}
.file-chip-loading { opacity: .6; }
.chip-thumb {
    width: 20px; height: 20px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}
.chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.chip-remove {
    background: none; border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px; line-height: 1;
    padding: 0; flex-shrink: 0;
    transition: color .15s;
}
.chip-remove:hover { color: #ef4444; }
@keyframes spin { to { transform: rotate(360deg); } }
.chip-spinner {
    display: inline-block;
    width: 10px; height: 10px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    flex-shrink: 0;
}

/* ---- Drag & Drop ---- */
.input-box.drag-over {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---- Hint compatibilité LLM ---- */
.llm-file-hint {
    font-size: 12px;
    color: #92400e;
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
[data-theme="dark"] .llm-file-hint { color: #fcd34d; }

/* Quota EUR (sidebar chat) */

/* Admin users — quota en euros */
.quota-eur-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Admin crédits — paramètres avancés */
details#advancedParams > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    padding: 6px 0;
    user-select: none;
    margin-top: 10px;
}
details#advancedParams > summary:hover { color: var(--text-primary); }
.advanced-params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding-top: 8px;
}

/* Admin crédits — toggle vue */
.view-toggle-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.btn-view-toggle { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-muted); cursor: pointer; font-size: 13px; }
.btn-view-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.model-view-provider { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.model-view-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.model-view-table th,
.model-view-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-view-table th:nth-child(1) { width: 28%; }
.model-view-table th:nth-child(2) { width: 10%; }
.model-view-table th:nth-child(3),
.model-view-table th:nth-child(5) { width: 18%; }
.model-view-table th:nth-child(4),
.model-view-table th:nth-child(6) { width: 13%; }
.model-stars { color: #f59e0b; letter-spacing: -1px; }
.tool-view-provider { font-size: 13px; font-weight: 600; margin: 16px 0 6px; }
.tool-view-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.tool-view-table th,
.tool-view-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-view-table th:nth-child(1) { width: 22%; }
.tool-view-table th:nth-child(2) { width: 11%; }
.tool-view-table th:nth-child(3) { width: 22%; }
.tool-view-table th:nth-child(4) { width: 31%; }
.tool-view-table th:nth-child(5) { width: 14%; }
.tool-view-table .tool-view-wrap { white-space: normal; }
.tool-stars { color: #f59e0b; letter-spacing: -1px; }

/* ============================================================= */
/* PAGE OUTILS DE GÉNÉRATION — refonte guidée + tooltips         */
/* ============================================================= */
.tools-intro { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: -6px 0 20px; max-width: 760px; }
.tools-intro strong { color: var(--text); font-weight: 600; }

/* En-tête de carte avec icône */
.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.card-head .card-ic {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.card-head h3 { margin: 0; font-size: 15px; }
.card-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* Étapes guidées (numéro + trait de liaison) */
.tool-step { position: relative; padding-left: 38px; margin-bottom: 22px; }
.tool-step:last-child { margin-bottom: 0; }
.tool-step::before {
    content: attr(data-step);
    position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent); font-size: 13px; font-weight: 700;
}
.tool-step::after {
    content: ''; position: absolute; left: 12.5px; top: 30px; bottom: -22px;
    width: 2px; background: var(--border);
}
.tool-step:last-child::after { display: none; }
.tool-step .step-title { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.tool-step .step-sub { font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; max-width: 640px; }

/* Accordéon création d'outil : bouton d'ouverture + étapes repliables */
.tool-add-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; }
#addToolCard .card-head { align-items: flex-start; }
.tool-step .step-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; padding: 3px 0; margin: 0;
    cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.tool-step .step-head:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 6px; }
.tool-step .step-summary {
    margin-left: auto; font-size: 12px; color: var(--text-muted);
    max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-step .step-chevron { flex: 0 0 auto; display: grid; place-items: center; color: var(--text-muted); transition: transform .2s; }
.tool-step.is-open .step-chevron { transform: rotate(180deg); }
.tool-step .step-body { display: none; padding-top: 10px; }
.tool-step.is-open .step-body { display: block; }
.tool-step.is-locked .step-head { cursor: default; opacity: .45; }
.tool-step.is-open::before { background: var(--accent); color: #fff; }
.tool-step.is-done::before { background: color-mix(in srgb, var(--accent) 80%, transparent); color: #fff; }
.tool-step.is-done .step-title { color: var(--text-muted); }

/* Sélecteur de type (grandes cartes radio) */
.type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.type-card {
    position: relative; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: 12px;
    padding: 15px 14px; background: var(--bg-surface);
    transition: border-color .15s, background .15s;
    display: flex; flex-direction: column; gap: 7px;
}
.type-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.type-card input { position: absolute; opacity: 0; pointer-events: none; }
.type-card .tc-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.type-card .tc-title { font-size: 14px; font-weight: 600; }
.type-card .tc-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.type-card .tc-check {
    position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border); display: grid; place-items: center; transition: .15s; color: #fff;
}
.type-card .tc-check svg { opacity: 0; }
.type-card.is-selected, .type-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
}
.type-card.is-selected .tc-check, .type-card:has(input:checked) .tc-check { border-color: var(--accent); background: var(--accent); }
.type-card.is-selected .tc-check svg, .type-card:has(input:checked) .tc-check svg { opacity: 1; }
.type-card:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.type-card[data-t="image"] .tc-ic { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.type-card[data-t="video"] .tc-ic { background: rgba(239,68,68,.14); color: #f87171; }
.type-card[data-t="html"] .tc-ic { background: rgba(99,102,241,.16); color: #818cf8; }
.type-card[data-t="html_illustrated"] .tc-ic { background: rgba(245,158,11,.15); color: #f59e0b; }

/* Tooltip d'aide (?) au survol / focus clavier */
.help-tip {
    display: inline-grid; place-items: center; position: relative;
    width: 16px; height: 16px; border-radius: 50%; margin-left: 5px;
    font-size: 11px; font-weight: 700; line-height: 1; cursor: help;
    background: color-mix(in srgb, var(--text-muted) 22%, transparent);
    color: var(--text); vertical-align: middle; flex: 0 0 auto; border: none; padding: 0;
}
.help-tip:hover, .help-tip:focus-visible { background: var(--accent); color: #fff; outline: none; }
.help-tip .help-bubble {
    position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 260px;
    background: var(--bg-sidebar); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 9px 11px; font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; z-index: 60;
    pointer-events: none; white-space: normal;
}
.help-tip .help-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--border);
}
.help-tip:hover .help-bubble, .help-tip:focus .help-bubble, .help-tip:focus-within .help-bubble {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.help-tip.tip-right .help-bubble { left: auto; right: -4px; transform: translateY(4px); }
.help-tip.tip-right .help-bubble::after { left: auto; right: 9px; transform: none; }
.help-tip.tip-right:hover .help-bubble, .help-tip.tip-right:focus .help-bubble, .help-tip.tip-right:focus-within .help-bubble { transform: translateY(0); }

/* Interrupteur réutilisable (formulaires création / édition) */
.switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background .2s; }
.switch .track::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::before { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

@media (max-width: 640px) {
    .type-picker { grid-template-columns: 1fr 1fr; }
    .help-tip .help-bubble { max-width: 200px; }
    .tool-step { padding-left: 32px; }
}

/* Modale d'édition d'outil — plus grande, en-tête / corps défilable / pied collant */
.modal-box.tool-modal { width: 760px; max-width: 94vw; max-height: 88vh; padding: 0; gap: 0; overflow: hidden; }
.tool-modal > #editForm { display: flex; flex-direction: column; max-height: 88vh; min-height: 0; width: 100%; }
.tool-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.tool-modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.tool-modal-x {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    display: grid; place-items: center; transition: background .15s, color .15s;
}
.tool-modal-x:hover { background: color-mix(in srgb, var(--border) 40%, transparent); color: var(--text); }
.tool-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.tool-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); }
.tool-modal-group { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: color-mix(in srgb, var(--bg-surface) 35%, transparent); }
.tool-modal-group .group-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
@media (max-width: 640px) {
    .modal-box.tool-modal { width: 96vw; }
    .tool-modal-head, .tool-modal-body, .tool-modal-foot { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================
   ADMIN — GROUPES UTILISATEURS (/admin/user-groups)
   Cards + modale 3 zones (réutilise .profile-modal-*)
   ========================================================= */
.ug-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ug-header h1 { margin-bottom: 4px; }
.ug-header-sub { font-size: 13px; color: var(--text-muted); }
.ug-create-btn { flex-shrink: 0; padding: 8px 14px; font-size: 13px; }

.ug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.ug-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    background: var(--bg-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ug-card:hover, .ug-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
    transform: translateY(-1px);
    outline: none;
}
.ug-card:hover .ug-manage-hint { color: var(--accent); }

/* Groupe par défaut : affiché en premier, style distinctif */
.ug-card-default {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 9%, var(--bg-surface)) 0%, var(--bg-surface) 65%);
}
.ug-star { color: var(--accent); margin-right: 2px; }

.ug-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.ug-card-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}
.ug-card-badges { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ug-card-tagline { font-size: 12px; color: var(--text-muted); margin: -4px 0 0; line-height: 1.4; }

.badge-default-group {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-weight: 600;
}

.ug-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.ug-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 4px;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-base) 55%, transparent);
    min-width: 0;
}
.ug-stat-n { font-size: 15px; font-weight: 700; line-height: 1.1; }
.ug-stat-l { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; }

.ug-card-meta { font-size: 12px; color: var(--text-muted); }
.ug-card-meta strong { color: var(--text); font-weight: 600; }

.ug-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.ug-manage-hint { font-size: 12px; font-weight: 600; color: var(--text-muted); transition: color .15s; white-space: nowrap; }

.ug-avatar-stack { display: flex; align-items: center; }
.ug-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input);
}
.ug-avatar-stack .ug-avatar {
    border: 2px solid var(--bg-surface);
    margin-left: -8px;
}
.ug-avatar-stack .ug-avatar:first-child { margin-left: 0; }
.ug-avatar-more { font-size: 10px; font-weight: 600; }

/* Tuile de création en fin de grille */
.ug-card-new {
    align-items: center;
    justify-content: center;
    border-style: dashed;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    min-height: 150px;
    font-family: inherit;
}
.ug-card-new:hover { color: var(--accent); }
.ug-card-new-plus { font-size: 26px; line-height: 1; font-weight: 400; }

/* ---- Modale groupe ---- */
.ug-modal-box { width: min(760px, 96vw); max-width: 760px; }
.ug-modal-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.ug-required { color: #ef4444; }

.ug-fields-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.ug-fields-row .form-group { margin: 0; }
.ug-field-name { flex: 1 1 220px; }
.ug-field-quota { flex: 0 1 200px; }
.ug-active-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-muted);
    padding-top: 26px;
    white-space: nowrap;
    cursor: pointer;
}

.ug-count-pill {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 11px;
    text-align: center;
    margin-left: 4px;
}

.ug-locked-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
    border-radius: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    line-height: 1.45;
}
.ug-locked-note strong { color: var(--text); }

.ug-search { margin-bottom: 8px; font-size: 13px; }

.ug-check-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 230px;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}
.ug-check-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text);
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
}
.ug-check-item:hover { background: color-mix(in srgb, var(--border) 30%, transparent); }
.ug-check-item:has(input:checked) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ug-check-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); }
.ug-member-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ug-member-name { font-weight: 500; }
.ug-member-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ug-member-item .badge { margin-left: auto; flex-shrink: 0; }
.ug-empty-search, .ug-empty-list { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

/* Partage d'une base de connaissances : « peut modifier » au bout de la ligne,
   estompé tant que la ligne n'est pas partagée. */
.kb-share-manage {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text-muted);
    opacity: .45;
    transition: opacity .12s;
}
.kb-share-item.is-shared-on .kb-share-manage { opacity: 1; }
.kb-share-manage input { cursor: pointer; }
.kb-share-manage input:disabled { cursor: default; }
.kb-share-item .badge { margin-left: 0; }

.ug-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: start;
}
.ug-access-col {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--bg-base) 45%, transparent);
    min-width: 0;
}
.ug-access-col .ug-check-list { max-height: 170px; }
.ug-access-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}
.ug-access-title { font-size: 12px; font-weight: 700; }
.ug-access-tools { display: flex; gap: 2px; }
.ug-mini-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 5px;
    transition: color .12s, background .12s;
}
.ug-mini-link:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ug-item-muted { color: var(--text-muted); }
.ug-item-warn { color: #ef4444; font-size: 11px; }

/* Bases de connaissances — bandeau taille totale (haut de page) */
.kb-total {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.kb-total-value { font-size: 18px; font-weight: 700; color: var(--text); }
.kb-total-label { font-size: 12px; color: var(--text-muted); }

/* Bases de connaissances — panneau de santé du moteur vectoriel (admins) */
.kb-vec { margin-bottom: 24px; }
.kb-vec.is-busy { opacity: .75; }
.kb-vec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kb-vec-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.kb-vec-title h2 { margin: 0; font-size: 16px; }
.kb-vec-sub { font-size: 12px; color: var(--text-muted); }
.kb-vec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kb-vec-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.kb-vec-dot[data-up="ok"]   { background: #22c55e; }
.kb-vec-dot[data-up="warn"] { background: #f59e0b; }
.kb-vec-dot[data-up="ko"]   { background: #ef4444; }
.kb-vec-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.kb-vec-hint code { font-size: 11.5px; }
.kb-vec-msg {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
}
.kb-vec-msg[data-kind="warn"]  { border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, .1); }
.kb-vec-msg[data-kind="error"] { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, .1); }
.kb-vec-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.kb-vec-empty { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
.kb-vec-row {
    /* Colonne de badge à largeur FIXE : sinon le nom de la base se décale
       d'une ligne à l'autre au gré de la longueur du verdict. */
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 13px;
}
.kb-vec-badge {
    justify-self: start;
    max-width: 100%;
    font-size: 11px;
    font-weight: 650;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(34, 197, 94, .15);
    color: #22c55e;
}
/* Verdicts appelant une action : ambre (dégradé) ou rouge (rien ne marche). */
.kb-vec-row[data-state="empty"]   .kb-vec-badge,
.kb-vec-row[data-state="partial"] .kb-vec-badge,
.kb-vec-row[data-state="failed"]  .kb-vec-badge,
.kb-vec-row[data-state="running"] .kb-vec-badge,
.kb-vec-row[data-state="orphan"]  .kb-vec-badge {
    background: rgba(245, 158, 11, .16);
    color: #f59e0b;
}
.kb-vec-row[data-state="down"]    .kb-vec-badge,
.kb-vec-row[data-state="missing"] .kb-vec-badge,
.kb-vec-row[data-state="dims"]    .kb-vec-badge {
    background: rgba(239, 68, 68, .15);
    color: #ef4444;
}
.kb-vec-row[data-state="void"] .kb-vec-badge { background: var(--bg-surface); color: var(--text-muted); }
.kb-vec-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-weight: 600;
}
.kb-vec-name > code {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
}
.kb-vec-nums { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.kb-vec-nums strong { color: var(--text); font-weight: 650; }
.kb-vec-act { display: flex; justify-content: flex-end; }
.kb-vec-act button { padding: 4px 10px; font-size: 12px; }

@media (max-width: 720px) {
    .kb-vec-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .kb-vec-name { grid-column: 1 / -1; order: -1; }
    .kb-vec-act { justify-content: flex-start; }
}

/* Bases de connaissances — sélection des assistants liés (modale) */
.kb-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.kb-linked-count { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.kb-linked-toolbar { display: flex; align-items: center; gap: 8px; }
.kb-linked-toolbar .ug-search { flex: 1; min-width: 0; margin-bottom: 0; }
#kbAssistantList .ug-check-item .badge { flex-shrink: 0; }

/* Bases de connaissances — sélecteur de source d'alimentation (3 cartes) */
.kb-source-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.kb-source-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.kb-source-card:hover:not(.kb-source-card-off) { border-color: var(--accent); }
.kb-source-card.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.kb-source-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.kb-source-card-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.kb-source-card-desc { font-size: 11px; color: var(--text-muted); }
.kb-source-card-hint { font-size: 11px; color: var(--text-muted); }
.kb-source-card-hint a { color: var(--accent); }
.kb-source-card-off { opacity: .6; cursor: default; }
.kb-source-card-off:hover { border-color: var(--border); }

/* ══════════════════════════════════════════════════════════════════
   Bases de connaissances — grille de cartes (liste principale)
   Chaque carte donne à voir d'un coup d'œil : identité + statut,
   source d'alimentation, volumétrie, assistants liés et partage.
   ══════════════════════════════════════════════════════════════════ */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}
.kb-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kb-card:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .5);
}
.kb-card.kb-card-clickable { cursor: pointer; }
.kb-card.kb-card-off { opacity: .72; }
.kb-card.kb-card-sys { border-color: color-mix(in srgb, #14b8a6 40%, var(--border)); }

/* Bandeau supérieur : icône + nom + pastilles de statut */
.kb-card-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px 8px;
}
.kb-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}
.kb-card-sys .kb-card-icon {
    background: rgba(20, 184, 166, .16);
    color: #14b8a6;
}
.kb-card-icon svg { width: 19px; height: 19px; display: block; }
.kb-card-headmain { flex: 1; min-width: 0; }

/* Type de base, en haut à droite : gros logo de la source d'alimentation
   (Google Drive / SharePoint / fichiers uploadés) */
.kb-card-src {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    color: var(--text-muted);
}
.kb-card-src img, .kb-card-src svg { width: 20px; height: 20px; display: block; }
.kb-card-src-err {
    border-color: color-mix(in srgb, #ef4444 55%, var(--border));
    background: rgba(239, 68, 68, .12);
}
.kb-card-title {
    font-size: 15px;
    font-weight: 650;
    color: var(--text);
    line-height: 1.3;
    word-break: break-word;
}
.kb-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.kb-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.5;
}
.kb-pill img { display: block; }
.kb-pill-sys      { background: rgba(20, 184, 166, .16);  color: #14b8a6; }
.kb-pill-shared   { background: rgba(59, 130, 246, .14);  color: #3b82f6; }
.kb-pill-inactive { background: rgba(239, 68, 68, .15);   color: #ef4444; }
.kb-pill-sync     { background: rgba(100, 100, 100, .2);  color: var(--text-muted); }
.kb-pill-sync-err { background: rgba(239, 68, 68, .15);   color: #ef4444; }

.kb-card-desc {
    padding: 0 14px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ligne méta compacte : source d'alimentation, volumétrie, embedding */
.kb-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 12px;
    padding: 9px 14px 11px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.kb-meta-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.kb-meta-item img { display: block; flex-shrink: 0; }
.kb-meta-item strong { color: var(--text); font-weight: 650; font-size: 12px; }
.kb-meta-emb { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; max-width: 100%; }
.kb-meta-emb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-meta-err { color: #ef4444; font-weight: 600; }

/* Page Diagnostic — bandeau, problèmes à traiter, contrôles au vert */
.diag-band {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 16px;
}
.diag-band-dot { font-size: 22px; line-height: 1; }
.diag-band-label { font-size: 14.5px; }
.diag-band-meta { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.diag-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.diag-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-muted);
}
.diag-chip-fail { background: rgba(251, 113, 133, .15); color: #fb7185; }
.diag-chip-warn { background: rgba(251, 191, 36, .15);  color: #fbbf24; }
.diag-h2 { font-size: 15px; margin: 20px 0 10px; }
.diag-issue { padding: 12px 16px; margin-bottom: 10px; }
.diag-issue[data-statut="fail"] { border-left: 3px solid #fb7185; }
.diag-issue[data-statut="warn"] { border-left: 3px solid #fbbf24; }
.diag-issue-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.diag-issue-head strong { font-size: 14px; }
.diag-issue-value { color: var(--text-muted); font-size: 13px; }
.diag-issue-cat {
    margin-left: auto;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.diag-issue-msg { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.diag-issue-fix { margin: 4px 0 0; font-size: 13px; }
.diag-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.diag-action { font-size: 12px; padding: 5px 11px; text-decoration: none; }
.diag-cmd { display: inline-flex; align-items: center; gap: 8px; }
.diag-cmd code {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--bg-surface);
    color: var(--text-muted);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.diag-ok-card { padding: 10px 16px 14px; }
.diag-ok-cat {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin: 10px 0 4px;
}
.diag-ok-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2px 24px;
}
.diag-ok-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    padding: 3px 0;
    min-width: 0;
}
.diag-ok-label { flex-shrink: 0; }
.diag-ok-value {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Choix de l'accès Drive (clé API vs connexion personnelle) dans la modale */
.kb-auth-options { display: flex; flex-direction: column; gap: 6px; }
.kb-auth-opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    cursor: pointer;
}
.kb-auth-opt input { margin-top: 2px; flex-shrink: 0; }
.kb-auth-opt:has(input:checked) { border-color: var(--accent); }
.kb-auth-opt.is-off { opacity: .6; cursor: default; }
.kb-auth-hint { display: block; font-style: normal; color: var(--text-muted); font-size: 11.5px; }

/* Motif d'échec de synchronisation, affiché en clair sur la carte */
.kb-sync-err {
    margin: 0 14px 11px;
    padding: 8px 10px;
    border: 1px solid #ef4444;
    border-radius: 8px;
    background: rgba(239, 68, 68, .1);
    font-size: 12px;
    line-height: 1.45;
}
.kb-sync-err-head { color: #ef4444; font-weight: 650; }
.kb-sync-err-msg  { color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }
.kb-sync-err-when { color: var(--text-muted); font-size: 11px; margin-top: 3px; }

/* Rangées Assistants / Accès : libellé à gauche, puces à droite */
.kb-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 11px;
    border-top: 1px solid var(--border);
}
.kb-row { display: flex; align-items: flex-start; gap: 10px; }
.kb-row-label {
    flex-shrink: 0;
    width: 72px;
    padding-top: 3px;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--text-muted);
}
.kb-row-label .kb-count {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
    padding: 0 5px;
    border-radius: 999px;
    font-size: 9.5px;
}
.kb-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.kb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 8px 2px 5px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text);
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border: 1px solid var(--border);
}
.kb-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-left: 3px; }
.kb-chip-av  { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-chip-ico { font-size: 12px; line-height: 1; opacity: .8; }
.kb-chip-more {
    color: var(--text-muted);
    background: transparent;
    border-style: dashed;
}
.kb-chip-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* Qui a accès : « Vous », personnes et groupes partagés */
.kb-chip-you   { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); font-weight: 600; }
.kb-chip-group { background: rgba(59, 130, 246, .12); border-color: color-mix(in srgb, #3b82f6 26%, transparent); }
.kb-chip-all   { background: rgba(20, 184, 166, .14); border-color: color-mix(in srgb, #14b8a6 30%, transparent); color: #14b8a6; font-weight: 600; }
.kb-chip-manage {
    display: inline-flex;
    align-items: center;
    margin-left: 1px;
    font-size: 10px;
    opacity: .85;
}
.kb-chip-manage::before { content: "✎"; }

/* Pied d'action */
.kb-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
    padding: 9px 14px;
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--text) 2.5%, transparent);
}
.kb-card-actions form { margin: 0; }
.kb-card-actions .btn-secondary { font-size: 12px; padding: 5px 11px; }
.kb-card-actions .kb-btn-del { color: #ef4444; border-color: color-mix(in srgb, #ef4444 55%, var(--border)); }

/* Filtre de la liste (visible dès que la grille compte plusieurs bases) */
.kb-filter { max-width: 240px; font-size: 13px; padding: 7px 11px; }

@media (max-width: 768px) {
    .kb-source-cards { grid-template-columns: 1fr; }
    .kb-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .ug-header { flex-direction: column; align-items: stretch; }
    .ug-create-btn { width: 100%; }
    .ug-grid { grid-template-columns: 1fr; }
    .ug-card-stats { grid-template-columns: repeat(4, 1fr); }
    .ug-fields-row { flex-direction: column; }
    .ug-field-name, .ug-field-quota { flex: 1 1 auto; width: 100%; }
    .ug-active-check { padding-top: 0; }
    .ug-access-grid { grid-template-columns: 1fr; }
}

/* ===== Admin — page Utilisateurs (refonte) ===== */
.um-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.um-header .btn-primary { flex-shrink: 0; }

/* Tuiles de synthèse cliquables */
.um-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.um-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    color: var(--text);
    text-align: left;
    transition: border-color .15s ease, background .15s ease;
}
.um-stat:hover { border-color: var(--accent); }
.um-stat.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.um-stat-value { font-size: 20px; font-weight: 700; line-height: 1.1; }
.um-stat-label { font-size: 11px; color: var(--text-muted); }

/* Barre recherche + filtres */
.um-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.um-search { flex: 1; min-width: 220px; margin: 0; }
.um-filter { width: auto; min-width: 130px; margin: 0; font-size: 13px; }
.um-count { font-size: 12px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.um-copy-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    padding: 7px 12px;
    white-space: nowrap;
}
.um-copy-btn svg { flex-shrink: 0; }
.um-copy-btn.is-copied { border-color: #22c55e; color: #22c55e; }

/* Table */
.um-table th { white-space: nowrap; }
.um-sortable { cursor: pointer; user-select: none; }
.um-sortable:hover { color: var(--text); }
.um-sort-arrow { font-size: 9px; color: var(--accent); }
.um-row-inactive td { opacity: .55; }
.um-row-inactive td:last-child { opacity: 1; }

.um-user-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.um-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.um-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 15px; font-weight: 600;
}
.um-user-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.um-user-name {
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.um-user-email {
    font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.um-role-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.um-auth { font-size: 11px; color: var(--text-muted); }
.um-groups { display: flex; flex-wrap: wrap; gap: 4px; }
.um-muted { font-size: 12px; color: var(--text-muted); }

.um-quota { min-width: 190px; }
.um-quota-line { font-size: 12px; margin-bottom: 4px; }
.um-quota-bar {
    height: 4px;
    background: var(--bg-surface);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.um-quota-bar > div { height: 100%; border-radius: 2px; transition: width .3s; }
.um-quota-meta { font-size: 11px; color: var(--text-muted); }
.um-activity { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.um-empty { padding: 18px 0; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Modale édition : identité + consommation */
.um-edit-identity {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.um-edit-identity .um-avatar { width: 42px; height: 42px; font-size: 18px; }
.um-edit-usage {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: 12px; color: var(--text-muted);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    margin-bottom: 16px;
}
.um-edit-danger { display: flex; gap: 10px; flex-wrap: wrap; }
.um-delete-btn {
    font-size: 13px;
    background: none;
    border: 1px solid #ef4444;
    border-radius: var(--radius-sm);
    color: #ef4444;
    padding: 6px 12px;
    cursor: pointer;
}
.um-delete-btn:hover { background: color-mix(in srgb, #ef4444 10%, transparent); }

@media (max-width: 900px) {
    .um-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .um-stats { grid-template-columns: repeat(2, 1fr); }
    .um-count { margin-left: 0; width: 100%; }
    .um-copy-btn { width: 100%; justify-content: center; }
    .um-quota { min-width: 0; }
    /* La table repasse en cartes (pattern .users-table data-label) : la
       cellule Actions ne contient qu'un bouton, en pleine largeur. */
    .um-table td[data-label="Actions"] .um-edit-btn { width: 100%; }
}

/* ===== Admin — page Logs (refonte) ===== */
.lg-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.lg-header-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.lg-header-actions .btn-secondary { text-decoration: none; }
.lg-file-meta { white-space: nowrap; }

/* Tuiles cliquables (liens) */
.lg-stats {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.lg-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s ease, background .15s ease;
}
.lg-stat:hover { border-color: var(--accent); }
.lg-stat.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.lg-stat-empty { opacity: .5; }
.lg-stat-value { font-size: 20px; font-weight: 700; line-height: 1.1; }
.lg-stat-label { font-size: 11px; color: var(--text-muted); }

/* Barre d'outils : plages rapides + filtres */
.lg-toolbar-card { margin-bottom: 16px; }
.lg-ranges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.lg-range {
    font: inherit;
    font-size: 12px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.lg-range:hover { border-color: var(--accent); color: var(--text); }
.lg-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
}
.lg-search-group { min-width: 240px; grid-column: span 2; }
.lg-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lg-filter-actions .btn-secondary { text-decoration: none; }

.lg-cap-note {
    font-size: 12px;
    color: var(--text-muted);
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.lg-cap-note a { color: var(--accent); }

/* Liste d'entrées */
.lg-listwrap { display: flex; flex-direction: column; gap: 6px; }
.lg-entry {
    border: 1px solid var(--border);
    border-left: 3px solid var(--lg-accent, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--lg-accent, var(--text-muted)) 5%, var(--surface));
    padding: 8px 12px;
}
.lg-entry-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.lg-entry-badge { min-width: 46px; justify-content: center; font-size: 10px; }
.lg-entry-time { font-size: 11px; color: var(--text-muted); }
.lg-copy {
    margin-left: auto;
    font-size: 13px;
    line-height: 1;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    padding: 3px 7px;
    cursor: pointer;
}
.lg-copy:hover { color: var(--text); border-color: var(--accent); }
.lg-entry-body {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}
.lg-entry.is-collapsible .lg-entry-body {
    max-height: 8.5em;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.lg-entry.is-collapsible.is-open .lg-entry-body {
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
}
.lg-entry-body mark {
    background: color-mix(in srgb, #f59e0b 55%, transparent);
    color: inherit;
    border-radius: 2px;
}
.lg-expand {
    margin-top: 6px;
    font: inherit;
    font-size: 11px;
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
}

@media (max-width: 1024px) {
    .lg-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .lg-stats { grid-template-columns: repeat(2, 1fr); }
    .lg-search-group { grid-column: span 1; }
}

/* ---- Carte d'approbation d'une écriture Google Drive (chat) ---- */
.drive-confirm-card {
    margin: 10px 0 4px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-left: 3px solid var(--accent);
    max-width: 640px;
    line-height: 1.5;
    font-size: 14px;
}
.drive-confirm-head { display: flex; gap: 10px; align-items: flex-start; }
.drive-confirm-head img { flex: 0 0 18px; margin-top: 2px; object-fit: contain; }
.drive-confirm-title { font-weight: 600; }
.drive-confirm-sub { font-size: 12.5px; color: var(--text-muted); }
.drive-confirm-file { margin-top: 8px; font-weight: 500; overflow-wrap: anywhere; }
.drive-confirm-file a { color: var(--accent); }
.drive-confirm-impacts { margin: 6px 0 0 0; padding-left: 22px; color: var(--text); }
.drive-confirm-impacts li { margin: 2px 0; }
.drive-confirm-apercu { margin-top: 8px; font-size: 13px; }
.drive-confirm-apercu summary { cursor: pointer; color: var(--text-muted); }
.drive-confirm-apercu pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 180px;
    overflow-y: auto;
}
.drive-confirm-actions { display: flex; gap: 8px; margin-top: 12px; }
.drive-confirm-btn {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .15s ease, background .15s ease;
}
.drive-confirm-btn:disabled { opacity: .55; cursor: default; }
.drive-confirm-approve { background: var(--accent); color: #fff; }
.drive-confirm-approve:not(:disabled):hover { filter: brightness(1.1); }
.drive-confirm-cancel {
    background: transparent;
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--text) 25%, transparent);
}
.drive-confirm-cancel:not(:disabled):hover { color: var(--text); }
.drive-confirm-status { margin-top: 10px; font-weight: 500; overflow-wrap: anywhere; }
.drive-confirm-status a { color: var(--accent); }
.drive-confirm-card.is-done {
    border-left-color: #22c55e;
    border-color: color-mix(in srgb, #22c55e 32%, transparent);
    background: color-mix(in srgb, #22c55e 7%, var(--bg-surface));
}
.drive-confirm-card.is-cancelled,
.drive-confirm-card.is-failed { opacity: .85; }
.drive-confirm-card.is-failed {
    border-left-color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 32%, transparent);
}
.drive-confirm-standalone { margin-top: 6px; }

/* ---- Pastille « MIA pour vous » : mémoire long terme mise à jour (chat) ---- */
.memory-chip {
    margin: 10px 0 4px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    max-width: 640px;
    font-size: 13px;
    line-height: 1.5;
}
.memory-chip-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--accent);
}
.memory-chip-list { margin: 6px 0 0; padding-left: 26px; color: var(--text); }
.memory-chip-list li { margin: 2px 0; overflow-wrap: anywhere; }
.memory-chip-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: underline;
}
.memory-chip-link:hover { color: var(--accent); }

/* ---- Trace des actions effectuées par MIA avant de répondre ----
   Pile discrète en tête de bulle assistant (hors .msg-content : jamais dans
   Copier ni les exports). Rendue par renderActionTrace (chat.js) au live et
   par templates/partials/message.php au chargement. */
.msg-trace {
    margin: 0 0 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.msg-trace-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 1px 0;
    max-width: 640px;
}
/* display:flex écrase le display:none induit par l'attribut hidden (repli
   au-delà de 5 lignes) — sans cette règle, rien ne serait jamais replié. */
.msg-trace-row[hidden] { display: none; }
.msg-trace-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    opacity: .65;
    transform: translateY(1px);
}
.msg-trace-label { flex: 0 0 auto; }
.msg-trace-detail {
    color: color-mix(in srgb, var(--text-muted) 72%, transparent);
    overflow-wrap: anywhere;
    font-style: italic;
}
.msg-trace-detail::before { content: '· '; font-style: normal; }
.msg-trace-row.is-failed,
.msg-trace-row.is-failed .msg-trace-detail { color: #b45309; }
.msg-trace-row.is-failed .msg-trace-icon { opacity: .9; }
.msg-trace-more {
    background: none;
    border: none;
    padding: 1px 0;
    font: inherit;
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}
.msg-trace-more:hover { color: var(--accent); }

/* =========================================================
   PARTAGE DE CRÉATIONS PAR LIEN UNIQUE (/share/{token})
   ========================================================= */

/* Bouton « Partager » des cartes de créations et des actions image-only */
.btn-share-creation.shared {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Menu flottant du bouton « Partagé » : Copier / Régénérer / Révoquer */
/* `.creation-popover` : menu flottant des formats de téléchargement de la
   galerie « Mes créations » — même chrome que le menu de partage. */
.share-popover,
.creation-popover {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.share-popover button,
.creation-popover button {
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.share-popover button:hover,
.creation-popover button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.share-popover button.danger { color: #ef4444; }

/* Page /share/{token} — standalone, sans navigation */
.share-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}
.share-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.share-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; display: block; }
.share-header-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.share-title { font-weight: 600; font-size: 15px; }
.share-meta  { color: var(--text-muted); font-size: 12px; }
.share-open-app { white-space: nowrap; text-decoration: none; font-size: 13px; padding: 7px 14px; }

.share-main { flex: 1; display: flex; min-height: 0; }

/* Page HTML : iframe pleine surface */
.share-html-frame { flex: 1; width: 100%; border: none; background: #fff; }

/* Carte / itinéraire : carte + panneau de notes */
.share-map-wrap { flex: 1; display: flex; min-height: 0; }
.share-map-canvas { flex: 1; min-height: 0; }
.share-map-notes {
    width: 320px;
    max-width: 40vw;
    padding: 16px;
    overflow-y: auto;
    border-left: 1px solid var(--border);
    background: var(--bg-surface);
    font-size: 13px;
}
.share-map-notes .map-notes-head { margin-bottom: 4px; font-size: 15px; }
.share-map-notes .map-notes-stats { color: var(--text-muted); margin-bottom: 10px; }
.share-map-notes .map-notes-summary { margin: 0 0 10px; }
.share-map-notes .map-notes-warnings { color: #b45309; margin-bottom: 10px; }
.share-map-notes .map-notes-steps { margin: 0 0 10px; padding-left: 20px; }
.share-map-notes .map-notes-steps li { margin-bottom: 4px; }
.share-map-notes .map-step-note { display: block; color: var(--text-muted); font-size: 12px; }
.share-map-notes .map-step-lost { color: #b45309; font-size: 11px; }
.share-map-notes .map-notes-general { margin: 0; padding-left: 20px; color: var(--text-muted); }

/* Image / vidéo : centrées, taille contenue */
.share-media-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
}
.share-image, .share-video {
    max-width: min(100%, 1100px);
    max-height: calc(100vh - 180px);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}
.share-media-name { color: var(--text-muted); font-size: 13px; margin: 0; }

@media (max-width: 768px) {
    .share-map-wrap { flex-direction: column; }
    .share-map-canvas { min-height: 55vh; }
    .share-map-notes { width: auto; max-width: none; border-left: none; border-top: 1px solid var(--border); }
    .share-open-app { display: none; }
}

/* ==========================================================================
   APP MOBILE NATIVE (wrapper Capacitor)
   Classe `in-native-app` posée sur <html> par head-meta.php (détection
   User-Agent `myLLM-App/…`). Ne s'applique JAMAIS en navigateur classique.
   ========================================================================== */

/* Réserve des zones sûres via les jetons `--safe-top` / `--safe-bottom`
   (définis en tête de feuille : insets réels hors navigateur, 0 sinon).
   Ce bloc-ci n'est PAS borné en largeur, contrairement à celui plus bas : il
   couvre le wrapper natif sur une tablette (> 768 px), où les headers mobiles
   existent quand même.
   `max()` obligatoire sur les éléments qui ont déjà un padding : avec un inset
   à 0 (Android sans edge-to-edge), un `padding-top: var(--safe-top)` seul
   ÉCRASE ce padding et colle le contenu au bord haut. */
.in-native-app .mobile-header,
.in-native-app .admin-mobile-header {
    padding-top: max(8px, var(--safe-top));
}
/* `.sidebar` n'a pas de padding propre (son en-tête en porte un) : le jeton seul suffit. */
.in-native-app .sidebar {
    padding-top: var(--safe-top);
}
.in-native-app .admin-sidebar {
    padding-top: max(16px, var(--safe-top));
}

.in-native-app .chat-input-wrap {
    padding-bottom: max(10px, var(--safe-bottom));
}
.in-native-app .login-box {
    margin-top: var(--safe-top);
    margin-bottom: var(--safe-bottom);
}

/* Réserve haute des headers mobiles — PWA installée, wrapper natif, navigateur
   en plein écran. `viewport-fit=cover` (posé sur toutes les pages) fait passer
   le document SOUS la barre d'état / l'encoche dès qu'aucune barre d'outils ne
   réserve le haut de l'écran : sans cette réserve, le header (burger, titre,
   avatar) de l'administration et des paramètres se mélange à l'heure et à la
   batterie.
   Volontairement PAS conditionné à `display-mode` : `max()` rend la règle
   inoffensive partout où l'inset vaut 0 (onglet de navigateur, Android), et
   une détection de contexte qui rate un cas (WebView tierce, Chrome Android
   bord-à-bord, plein écran après défilement) redonne un header amputé.
   Sélecteurs qualifiés par le `<body>` : les blocs responsive plus haut
   atteignent 0,2,1 de spécificité, un sélecteur de classe seule s'y ferait
   écraser. Borné à ≤ 768 px : au-delà, le header mobile n'existe pas et les
   paddings de la sidebar desktop ne doivent pas bouger. */
@media (max-width: 768px) {
    body.app .mobile-header,
    body.admin-page .admin-mobile-header {
        padding-top: max(8px, var(--safe-top));
    }
    /* Tiroirs de navigation : plein écran en hauteur, leur premier lien passerait
       lui aussi sous la barre d'état. */
    body.app .sidebar {
        padding-top: var(--safe-top);
    }
    body.admin-page .admin-sidebar {
        padding-top: max(16px, var(--safe-top));
    }
}

/* --------------------------------------------------------------------------
   Le reste de la bande haute : tout ce qui RECOUVRE les headers.
   Réserver la barre d'état sur les seuls headers ne suffit pas — dès qu'un
   volet plein écran, une modale ou un calque s'ouvre, c'est LUI qui occupe le
   haut de l'écran, et sa commande de fermeture (le retour vers les menus)
   repasse sous l'horloge. Ces surfaces sont ancrées en `top: 0` / `inset: 0`
   et ne sont donc jamais couvertes par les règles ci-dessus.
   -------------------------------------------------------------------------- */

/* Volets plein écran du chat — page HTML, carte, présentation (tous trois sur
   la coque `.html-viewer`), vidéo, sources. Sur mobile ils couvrent 100 % de la
   largeur : leur barre de titre porte le bouton « Fermer ». La hauteur DOIT
   croître avec la réserve, sinon le padding ne fait qu'écraser le contenu. */
.html-viewer-bar,
.video-viewer-bar,
.sources-viewer-bar {
    height: calc(46px + var(--safe-top));
    padding-top: var(--safe-top);
}

/* Calques centrés : sur mobile la boîte devient un bottom sheet (admin) ou
   occupe tout l'écran (visionneuse de créations) et atteint le bord haut. */
.modal,
.session-expired-modal {
    padding-top: var(--safe-top);
}
.image-lightbox {
    padding-top: max(32px, calc(var(--safe-top) + 8px));
}
.image-lightbox-close {
    top: calc(18px + var(--safe-top));
}

/* Boutons et en-têtes flottants ancrés en haut. */
.sidebar-reopen-btn {
    top: calc(10px + var(--safe-top));
}
.share-header {
    padding-top: calc(12px + var(--safe-top));
}

/* Overlay « hors ligne » injecté par native-bridge.js quand le réseau tombe. */
.native-offline-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(4px);
}
.native-offline-box {
    text-align: center;
    padding: 28px 32px;
    border-radius: var(--radius);
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    max-width: 300px;
}
.native-offline-box .native-offline-icon { font-size: 28px; margin-bottom: 8px; }
.native-offline-box p { font-weight: 600; margin: 0 0 4px; }
.native-offline-box span { font-size: 13px; color: var(--text-muted); }

/* Badge « STAGING » affiché quand l'app est basculée sur la recette
   (geste caché, cf. native-bridge.js). */
.native-env-badge {
    position: fixed;
    /* En BAS à gauche, et non plus centré en haut : la bande haute est occupée
       par le header (burger, titre, avatar) ou par la barre de titre d'un volet
       plein écran. Maintenant que ces deux-là descendent sous la barre d'état,
       le badge tombait pile sur leur titre — et, même en `pointer-events: none`,
       un libellé masqué se lit comme un menu inatteignable. Le coin bas droit
       est pris par la pastille d'enregistrement automatique. */
    bottom: calc(var(--safe-bottom) + 4px);
    left: 6px;
    z-index: 6000;
    opacity: .85;
    padding: 2px 8px;
    border-radius: 999px;
    background: #b45309;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    pointer-events: none;
}

/* ---- Tiroir des générations en cours (file de jobs) ---- */
.jobs-tray {
    margin: 0 12px 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elev, var(--bg-secondary, transparent));
    overflow: hidden;
}
.jobs-tray-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--text);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.jobs-tray-toggle:hover { background: var(--hover, rgba(127,127,127,.08)); }
.jobs-tray-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-tray-caret { flex: 0 0 auto; transition: transform .15s ease; }
.jobs-tray-toggle[aria-expanded="true"] .jobs-tray-caret { transform: rotate(180deg); }
.jobs-tray-dot {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: jobsTrayPulse 1.4s ease-in-out infinite;
}
@keyframes jobsTrayPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.jobs-tray-panel { border-top: 1px solid var(--border); padding: 6px; }
.jobs-tray-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jobs-tray-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--hover, rgba(127,127,127,.06));
    font-size: 12px;
}
.jobs-tray-item__text { flex: 1; min-width: 0; }
.jobs-tray-item__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-tray-item__meta { display: block; color: var(--text-muted); font-size: 11px; }
.jobs-tray-item__btn {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.jobs-tray-item__btn:hover { background: var(--border); color: var(--text); }
.jobs-tray-notify {
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    font-size: 11.5px;
    cursor: pointer;
}
.jobs-tray-notify:hover { color: var(--text); border-color: var(--accent); }

/* ============================================================
   Pages « Gestion LLMs » (templates/admin/llms/*) — styles extraits de
   l'ancien template unique (le bloc <style> inline est mort avec lui).
   ============================================================ */

/* Badges défaut / secours */
.badge-llm-default  { background: var(--accent); color: #fff; }
.badge-llm-fallback { background: rgba(234, 179, 8, .15); color: #ca8a04; }

/* Boutons clés API & catalogue */
.btn-test {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color .15s;
}
.btn-test:hover { border-color: var(--accent); }
.btn-test:disabled { opacity: .5; cursor: wait; }
.btn-activate {
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-activate:hover { opacity: .85; }
.btn-deactivate {
    background: none;
    border: 1px solid #ef4444;
    border-radius: var(--radius-sm);
    color: #ef4444;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .15s;
}
.btn-deactivate:hover { background: rgba(239, 68, 68, .08); }

/* Cartes de tests — desktop */
.test-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.test-card-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.test-card-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.test-card-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}
.test-card-label {
    font-size: 14px;
    font-weight: 600;
}
.test-card-slug {
    font-size: 11px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.test-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.card-score { font-size: 12px; color: var(--text-muted); }
.btn-run-llm {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-run-llm:hover { border-color: var(--accent) !important; }

.test-table { width: 100%; border-collapse: collapse; }
.test-table tr { border-top: 1px solid var(--border); }
.test-table tr:first-child { border-top: none; }
.test-table td { padding: 7px 4px; vertical-align: middle; }
.test-table .test-icon     { width: 28px; text-align: center; font-size: 16px; }
.test-table .test-label    { width: 200px; font-size: 13px; padding: 6px 8px; }
.test-table .test-duration { width: 70px; font-size: 11px; color: var(--text-muted); text-align: right; padding-right: 12px; }
.test-table .test-message  { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.test-pre-skip td { opacity: .5; }

/* Cartes de tests — mobile (≤ 640px) : chaque ligne devient un bloc 2-étages */
@media (max-width: 640px) {
    /* En-tête : nom + slug sur la 1ʳᵉ ligne, score + bouton sur la 2ᵉ */
    .test-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .test-card-name {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .test-card-slug {
        font-size: 10px;
        word-break: break-all;
    }
    .test-card-actions {
        justify-content: space-between;
    }
    .btn-run-llm {
        flex: 1;
        padding: 8px 12px;
        min-height: 36px;
    }

    /* Tables de tests : on passe chaque <tr> en grid 2 lignes */
    .test-table,
    .test-table tbody,
    .test-table tr {
        display: block;
        width: 100%;
    }
    .test-table .test-row {
        display: grid;
        grid-template-columns: 24px 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 2px;
        padding: 10px 2px;
        border-top: 1px solid var(--border);
    }
    .test-table tr:first-child.test-row { border-top: none; }
    .test-table .test-row td {
        display: block;
        padding: 0 !important;
        width: auto !important;
        text-align: left !important;
    }
    .test-table .test-row .test-icon {
        grid-column: 1;
        grid-row: 1;
        text-align: center !important;
    }
    .test-table .test-row .test-label {
        grid-column: 2;
        grid-row: 1;
        font-size: 13px !important;
        font-weight: 500;
    }
    .test-table .test-row .test-duration {
        grid-column: 3;
        grid-row: 1;
        text-align: right !important;
        padding-right: 0 !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    .test-table .test-row .test-message {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 12px !important;
        padding-left: 32px !important;
    }
}

/* ============================================================
   Pages « Assistants » (templates/admin/profiles/*) — la fiche de
   création/édition est une vraie page (ex-modale), la liste garde ses
   styles .al-* / .avatar-* existants.
   ============================================================ */
.pf-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pf-page-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-back-link {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
}
.pf-back-link:hover { color: var(--accent); }
.pf-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    bottom: 12px;
    z-index: 3;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.pf-actions-right { display: flex; align-items: center; gap: 10px; }
.pf-actions-right .btn-secondary { text-decoration: none; }
@media (max-width: 640px) {
    .pf-two-cols { grid-template-columns: 1fr !important; }
    .pf-actions-bar { position: static; box-shadow: none; }
    .pf-actions-right { width: 100%; }
    .pf-actions-right .btn-primary, .pf-actions-right .btn-secondary { flex: 1; text-align: center; }
}

/* ============================================================
   Page « Sauvegarde » (admin/backup.php)
   ============================================================ */
.backup-scope {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.backup-scope-col {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.backup-scope-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.backup-scope-col ul { margin: 0; padding-left: 16px; }
.backup-scope-col li { font-size: 12px; color: var(--text-muted); margin: 3px 0; }
.backup-danger {
    font-size: 12.5px;
    line-height: 1.5;
    border: 1px solid rgba(239, 68, 68, .45);
    background: rgba(239, 68, 68, .07);
    border-radius: 8px;
    padding: 10px 14px;
}

/* ===== Outil n8n (admin → Outils) ============================================
   Le mode d'emploi côté n8n vit dans le formulaire lui-même : sans lui,
   l'administrateur ne peut pas deviner que le tag est la liste blanche ni que
   les Notes du nœud Webhook sont la notice lue par l'assistant. */
.n8n-help {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.n8n-help strong { color: var(--text); }
.n8n-help ol { margin: 8px 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.n8n-help code,
.n8n-note code { font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: var(--bg-sidebar); }
.n8n-note { font-size: 12px; line-height: 1.55; color: var(--text-muted); margin: 10px 0 0; }
.n8n-inline-check {
    display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer;
    font-size: 12.5px; color: var(--text-muted);
}
.n8n-inline-check input { accent-color: var(--accent); }

/* ===== Connecteurs (admin) ===================================================
   Une carte par source branchable sur le menu « + » du chat, en grille pleine
   largeur (2-3 cartes de front selon l'écran). L'interrupteur et l'éditeur
   d'expressions enregistrent à la volée : la carte s'estompe quand le
   connecteur est masqué, sans jamais devenir illisible (l'administrateur doit
   pouvoir la relire). */
.connector-page  { width: 100%; }
.connector-intro { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; max-width: 900px; line-height: 1.6; }
.connector-grid {
    display: grid;
    /* min(420px, 100%) : sous 420 px de volet, la colonne unique ne déborde pas. */
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 16px;
    /* Étirement volontaire : à hauteur de rangée égale, le `margin-top:auto`
       de l'éditeur d'expressions aligne les blocs dépliants sur une même
       ligne — des cartes de hauteurs libres donnaient un bas de grille en
       dents de scie. */
    align-items: stretch;
}

.connector-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .15s, opacity .15s, box-shadow .15s;
    min-width: 0;
}
body.admin-page .connector-card { box-shadow: 0 6px 20px rgba(0,0,0,.14); }
[data-theme="light"] body.admin-page .connector-card { box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.connector-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.connector-card.is-off > :not(.connector-top),
.connector-card.is-off .connector-icon,
.connector-card.is-off .connector-title { opacity: .55; }
.connector-card.is-saving { opacity: .75; }

.connector-top { display: flex; align-items: flex-start; gap: 14px; }
.connector-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.connector-title { flex: 1; min-width: 0; }
.connector-title h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.connector-caps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.connector-summary {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}
.connector-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.connector-meta strong { font-weight: 700; }
.connector-dot { opacity: .5; }
.connector-warn,
.connector-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 8px;
    padding: 8px 10px;
}
.connector-warn {
    color: #b45309;
    border: 1px solid rgba(234, 179, 8, .35);
    background: rgba(234, 179, 8, .08);
}
.connector-note { color: var(--text-muted); background: var(--bg-surface); }
.connector-warn code, .connector-note code { font-size: 11.5px; }
/* Connecteur avec ses propres réglages (n8n) : le lien vers sa page. */
.connector-config { margin: 0; font-size: 12.5px; }
.connector-config a { color: var(--accent); text-decoration: none; font-weight: 600; }
.connector-config a:hover { text-decoration: underline; }

.connector-switch {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding-top: 2px;
}
.connector-state {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 52px;
    text-align: right;
    transition: color .2s;
}
.connector-state.is-flash { color: var(--accent); }

/* --- Expressions déclencheuses (suggestion automatique) --- */
/* Connecteur hors chat (OneDrive) : pas d'éditeur d'expressions, une note à sa
   place — même position dans la carte, pour que la grille reste alignée. */
.connector-no-trigger { margin-top: auto; }
.connector-triggers { margin-top: auto; border-top: 1px dashed var(--border); padding-top: 10px; }
.connector-triggers summary {
    display: flex; align-items: center; gap: 7px;
    cursor: pointer; list-style: none; user-select: none;
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    transition: color .15s;
}
.connector-triggers summary::-webkit-details-marker { display: none; }
.connector-triggers summary:hover, .connector-triggers[open] summary { color: var(--text); }
.connector-triggers-count {
    font-weight: 600; font-size: 11px;
    padding: 1px 7px; border-radius: 99px;
    background: var(--bg-surface); border: 1px solid var(--border);
}
.connector-triggers-badge {
    font-size: 10.5px; font-weight: 600;
    padding: 2px 7px; border-radius: 99px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.connector-triggers-chev { margin-left: auto; transition: transform .15s; }
.connector-triggers[open] .connector-triggers-chev { transform: rotate(180deg); }
.connector-triggers-hint { margin: 10px 0 8px; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.connector-triggers-input {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.7;
}
.connector-triggers-input:focus { outline: none; border-color: var(--accent); }
.connector-triggers-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.connector-triggers-actions .btn-secondary { font-size: 12.5px; padding: 6px 12px; }
.connector-triggers-status { font-size: 12px; color: var(--text-muted); }
.connector-triggers-status.is-ok  { color: #10a37f; }
.connector-triggers-status.is-err { color: #ef4444; }

@media (max-width: 640px) {
    .connector-card { padding: 16px; }
}

/* =====================================================================
   OUTILS DE GÉNÉRATION — cartes de la liste (/admin/tools)
   Même langage visuel que les connecteurs : la grille et la carte
   réutilisent .connector-grid / .connector-card, seuls les éléments
   propres aux outils (chip de type, ligne de test, barre d'actions,
   état explicite du toggle, carte fantôme d'ajout) sont définis ici.
   ===================================================================== */

/* En-tête de page : titre + intro à gauche, actions à droite. */
.tools-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px 28px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.tools-head h1 { margin: 0; }
.tools-head-text { flex: 1 1 420px; min-width: 0; }
.tools-head .tools-intro { margin: 8px 0 0; }
.tools-head-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 4px;
}
.tools-head-actions #toolsTestGlobal { font-size: 12px; color: var(--text-muted); }
.tools-head-actions .btn-secondary { font-size: 12.5px; padding: 8px 14px; }
.tools-head-actions .tool-add-btn { font-size: 13px; padding: 8px 16px; }

.tools-list-head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 26px 0 14px;
}
.tools-list-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.tools-list-count {
    font-size: 11.5px; font-weight: 600;
    padding: 2px 9px; border-radius: 99px;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border);
}
/* Rappel du sens de l'interrupteur, sous le titre de section. */
.tools-list-hint {
    flex-basis: 100%;
    margin: 2px 0 0; font-size: 12.5px; line-height: 1.5;
    color: var(--text-muted);
}
.tools-list-hint strong { color: var(--text); font-weight: 600; }

/* Chip de type : teintée par le `--tool-accent` de la carte (une seule
   source de couleur par type, plus aucun style inline). */
.tool-type-chip {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 99px;
    white-space: nowrap;
    color: var(--tool-accent, var(--accent));
    background: color-mix(in srgb, var(--tool-accent, var(--accent)) 14%, transparent);
}
/* Thème clair : les accents pastel (jaune, vert, rose) manquent de contraste
   sur fond blanc — texte assombri, fond légèrement renforcé. */
[data-theme="light"] .tool-type-chip {
    color: color-mix(in srgb, var(--tool-accent, var(--accent)) 58%, #1e293b);
    background: color-mix(in srgb, var(--tool-accent, var(--accent)) 18%, transparent);
}

/* Identité visuelle par type : chaque carte porte `--tool-accent` (inline,
   même teinte que sa chip de type) — liseré haut, léger voile dégradé,
   tuile d'icône teintée, survol accentué avec élévation. Les icônes img
   (n8n, gamma) gardent leur couleur de marque, la tuile teintée suffit. */
.tool-card {
    border-top: 3px solid var(--tool-accent, var(--accent));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tool-accent, var(--accent)) 6%, transparent), transparent 44%),
        var(--bg-sidebar);
    transition: border-color .15s, opacity .15s, box-shadow .2s, transform .15s;
}
.tool-card:hover {
    border-color: color-mix(in srgb, var(--tool-accent, var(--accent)) 45%, var(--border));
    border-top-color: var(--tool-accent, var(--accent));
    transform: translateY(-2px);
}
body.admin-page .tool-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.22); }
[data-theme="light"] body.admin-page .tool-card:hover { box-shadow: 0 10px 24px rgba(15,23,42,.10); }
@media (prefers-reduced-motion: reduce) {
    .tool-card, .tool-card:hover { transform: none; }
}
.tool-card .connector-icon {
    width: 46px; height: 46px; border-radius: 13px;
    color: var(--tool-accent, var(--accent));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tool-accent, var(--accent)) 20%, transparent), color-mix(in srgb, var(--tool-accent, var(--accent)) 6%, transparent)),
        var(--bg-surface);
    border-color: color-mix(in srgb, var(--tool-accent, var(--accent)) 35%, var(--border));
}
[data-theme="light"] .tool-card .connector-icon {
    color: color-mix(in srgb, var(--tool-accent, var(--accent)) 62%, #1e293b);
}

/* État explicite du toggle : « Actif / Utilisable par tous » sur deux
   lignes, à gauche de l'interrupteur. */
.tool-state {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 1px; line-height: 1.25; text-align: right;
}
.tool-state-label { font-size: 12px; font-weight: 700; color: var(--text); transition: color .2s; }
.tool-state-label.is-flash { color: var(--accent); }
.tool-state-sub { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

/* Bas de carte : le bloc dépliant des expressions (ou la note n8n/gamma/
   dictée vocale) porte le `margin-top:auto` d'alignement — la barre
   d'actions vient juste dessous, sans second séparateur. */
.tool-card .tool-no-trigger { margin-top: auto; }
.tool-card .tool-triggers .connector-triggers-input { min-height: 96px; }
.tool-card .connector-warn a { color: inherit; font-weight: 600; }

/* Résultat du dernier test : la couleur (ok / erreur / en cours) est posée
   inline par le PHP puis par le JS de test — ne pas la définir ici. */
.tool-test-line {
    font-size: 11.5px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    min-height: 0;
}
.tool-test-line:empty { display: none; }

/* Barre d'actions : tout en bas de carte, juste sous le bloc expressions
   (qui porte déjà le séparateur pointillé et le margin-top:auto d'alignement
   entre cartes d'une même rangée). Suppression = icône seule, à droite. */
.tool-card-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tool-card-actions .btn-secondary,
.tool-card-actions .btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; padding: 6px 12px;
}
.tool-card-actions form { display: inline-flex; margin-left: auto; }
.tool-card-actions .btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
.tool-card-actions .tool-del-btn { padding: 6px 9px; }

/* Carte fantôme « Ajouter un outil » : même gabarit que les cartes,
   en pointillés — second point d'entrée du formulaire d'ajout. */
.tool-add-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px; min-height: 220px; padding: 24px;
    border: 1.5px dashed var(--border); border-radius: var(--radius);
    background: transparent; color: var(--text-muted);
    cursor: pointer; font: inherit; text-align: center;
    transition: border-color .15s, color .15s, background .15s;
}
.tool-add-card:hover, .tool-add-card:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    outline: none;
}
.tool-add-card-ic {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 11%, transparent);
    color: var(--accent);
    transition: transform .15s;
}
.tool-add-card:hover .tool-add-card-ic { transform: scale(1.08); }
.tool-add-card-title { font-size: 14px; font-weight: 600; color: var(--text); }
.tool-add-card:hover .tool-add-card-title { color: var(--accent); }
.tool-add-card-desc { font-size: 12px; line-height: 1.5; max-width: 250px; }

@media (max-width: 640px) {
    .tools-head-actions { width: 100%; }
    .tools-head-actions .tool-add-btn { margin-left: auto; }
    .tool-card-actions { gap: 6px; }
    .tool-card-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }
    .tool-add-card { min-height: 150px; }
}
/* Le reset mobile générique `body.admin-page .admin-content form { width:100% }`
   étirerait le petit formulaire de suppression : icône seule à droite. */
@media (max-width: 768px) {
    body.admin-page .tool-card-actions form { width: auto; margin-left: auto; }
}

/* =========================================================
   PAGE « MES CRÉATIONS » (/settings/creations)
   Grille de cartes reprenant le langage visuel de /admin/tools :
   accent par type porté par --tool-accent (inline), liseré haut,
   survol élevé. La vignette est un vrai aperçu (image, poster vidéo,
   iframe blob: mise à l'échelle) ou une tuile teintée pour l'itinéraire.
   ========================================================= */
.creations-wrap { max-width: 1200px; }

.creations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}

.creation-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-top: 3px solid var(--tool-accent, var(--accent));
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tool-accent, var(--accent)) 6%, transparent), transparent 44%),
        var(--bg-sidebar);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .2s, transform .15s;
}
.creation-card:hover,
.creation-card:focus-visible {
    border-color: color-mix(in srgb, var(--tool-accent, var(--accent)) 45%, var(--border));
    border-top-color: var(--tool-accent, var(--accent));
    transform: translateY(-2px);
    outline: none;
}
body.admin-page .creation-card:hover,
body.admin-page .creation-card:focus-visible { box-shadow: 0 12px 30px rgba(0,0,0,.22); }
[data-theme="light"] body.admin-page .creation-card:hover,
[data-theme="light"] body.admin-page .creation-card:focus-visible { box-shadow: 0 10px 24px rgba(15,23,42,.10); }
@media (prefers-reduced-motion: reduce) {
    .creation-card, .creation-card:hover, .creation-card:focus-visible { transform: none; }
}

/* ---- Vignette ---- */
.creation-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bg-surface);
    overflow: hidden;
}
.creation-thumb img,
.creation-thumb video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Aperçu html/deck : le document est rendu à 1280×800 puis mis à l'échelle
   (transform posé par creations.js) — pointer-events coupés, la carte entière
   reste cliquable. */
/* Dimensions posées par creations.js (solidaires du facteur d'échelle). */
.creation-thumb-frame {
    position: absolute; top: 0; left: 0;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
    background: #fff;
}
/* Sélecteur volontairement long : `body.admin-page .admin-content iframe`
   (règle responsive générale) l'emporte sur une simple classe et ramenait la
   largeur de MISE EN PAGE de l'aperçu à celle de la vignette, sans toucher à
   sa hauteur — la page était rendue écrasée dans un cadre étroit puis réduite,
   d'où des aperçus illisibles. L'iframe doit garder la taille posée en JS ;
   c'est le `transform: scale()` qui la réduit, pas la mise en page. */
body.admin-page .admin-content .creation-thumb-frame {
    max-width: none;
    max-height: none;
}
.creation-thumb-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}
.creation-thumb-loading svg { color: color-mix(in srgb, var(--tool-accent, var(--accent)) 55%, var(--text-muted)); }

.creation-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: color-mix(in srgb, var(--tool-accent, var(--accent)) 22%, rgba(0,0,0,.5));
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.creation-map-tile {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    color: var(--tool-accent, var(--accent));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--tool-accent, var(--accent)) 16%, transparent),
        color-mix(in srgb, var(--tool-accent, var(--accent)) 4%, transparent));
}
.creation-map-tile span { font-size: 12px; color: var(--text-muted); }

/* Tracé de l'itinéraire (RouteThumbnail) : occupe toute la vignette, les
   extrémités du trajet sont nommées en bandeau bas. */
.creation-map-tile.has-route { gap: 0; padding: 0; }
.creation-route-svg { width: 100%; height: 100%; display: block; }
.creation-route-ends {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 5px 10px;
    font-size: 11px; line-height: 1.3;
    color: var(--text);
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    backdrop-filter: blur(3px);
    border-top: 1px solid color-mix(in srgb, var(--tool-accent, var(--accent)) 22%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creation-map-tile.has-route span.creation-route-ends { color: var(--text); }

/* ---- Corps de carte ---- */
.creation-info {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px 14px;
}
.creation-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.creation-chip {
    font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: 999px;
    color: var(--tool-accent, var(--accent));
    background: color-mix(in srgb, var(--tool-accent, var(--accent)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tool-accent, var(--accent)) 30%, transparent);
    white-space: nowrap;
}
[data-theme="light"] .creation-chip {
    color: color-mix(in srgb, var(--tool-accent, var(--accent)) 62%, #1e293b);
}
.creation-sub { font-size: 11px; color: var(--text-muted); }
.creation-title {
    margin: 0;
    font-size: 14px; font-weight: 600; line-height: 1.35;
    color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.creation-meta { font-size: 12px; color: var(--text-muted); }
.creation-meta a { color: inherit; text-decoration: none; }
.creation-meta a:hover { color: var(--tool-accent, var(--accent)); text-decoration: underline; }

/* Actions de la carte : mêmes boutons que les cartes de création du chat
   (btn-secondary compact). Le bouton de partage porte son état lui-même
   (.shared → accent + libellé « Partagé »), d'où l'absence de pastille. */
.creation-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
}
.creation-actions .btn-secondary {
    display: inline-flex; align-items: center;
    font-size: 12px; padding: 4px 10px;
}
.creation-actions .btn-secondary:disabled { opacity: .6; cursor: default; }

/* ---- Visionneuse plein écran ---- */
.creation-viewer-box {
    width: min(1100px, 94vw);
    max-height: 92vh;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.creation-viewer-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.creation-viewer-title {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creation-viewer-open { font-size: 12px; padding: 5px 11px; white-space: nowrap; }
.creation-viewer-close {
    background: none; border: none; padding: 6px;
    color: var(--text-muted); cursor: pointer;
    display: inline-flex; border-radius: var(--radius-sm);
}
.creation-viewer-close:hover { color: var(--text); background: var(--bg-surface); }
.creation-viewer-body {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: auto;
    background: var(--bg-surface);
}
.creation-viewer-body img,
.creation-viewer-body video { max-width: 100%; max-height: 80vh; object-fit: contain; display: block; }
.creation-viewer-frame {
    width: 100%; height: min(76vh, 800px);
    border: 0; background: #fff;
}

@media (max-width: 768px) {
    /* 240 px et pas moins : en dessous, « Télécharger » et « Partager »
       passent à la ligne et la carte se déséquilibre. */
    .creations-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
    /* Plein écran : la hauteur retranche la zone sûre réservée par `.modal`,
       sinon l'en-tête (titre + fermeture) descend bien mais le bas de la
       visionneuse sort de l'écran. */
    .creation-viewer-box {
        width: 100vw; max-width: 100vw;
        max-height: calc(100vh - var(--safe-top));
        height: calc(100vh - var(--safe-top));
        border-radius: 0;
    }
    .creation-viewer-frame { height: calc(100vh - 60px - var(--safe-top)); }
    .creation-viewer-open { display: none; }
}

/* =========================================================
   Enregistrement automatique (autosave.js)
   Les écrans de configuration n'ont plus de bouton « Enregistrer » :
   la pastille EST le retour d'information. Elle doit donc rester
   lisible au-dessus de tout, y compris d'une modale (z-index 100 à
   6000 ailleurs dans cette feuille).
   ========================================================= */
.autosave-pill {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 7000;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(420px, calc(100vw - 40px));
    padding: 10px 15px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
[data-theme="light"] .autosave-pill { box-shadow: 0 8px 24px rgba(15,23,42,.14); }
.autosave-pill.is-visible { opacity: 1; transform: translateY(0); }
/* Seule l'erreur porte une action ; les autres états ne doivent pas
   intercepter un clic sur ce qui se trouve dessous. */
.autosave-pill.is-error, .autosave-pill.is-invalid { pointer-events: auto; }

.autosave-pill-icon { display: flex; align-items: center; flex-shrink: 0; }
.autosave-pill-text { min-width: 0; }

.autosave-pill.is-saving  { color: var(--text-muted); }
.autosave-pill.is-saved   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.autosave-pill.is-error   { color: #ef4444; border-color: rgba(239,68,68,.45); }
.autosave-pill.is-invalid { color: #b45309; border-color: rgba(234,179,8,.45); }
[data-theme="light"] .autosave-pill.is-invalid { color: #92400e; }

.autosave-pill-retry {
    flex-shrink: 0;
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.autosave-pill-retry:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

.autosave-spinner {
    width: 13px; height: 13px;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: autosave-spin .7s linear infinite;
}
@keyframes autosave-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .autosave-pill { transition: none; }
    .autosave-spinner { animation-duration: 2s; }
}

/* Miroir en ligne — pied de modale, en-tête de carte. */
.autosave-inline {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    min-height: 18px;
}
.autosave-inline.is-saved   { color: var(--accent); }
.autosave-inline.is-error   { color: #ef4444; }
.autosave-inline.is-invalid { color: #b45309; }

/* Mention permanente remplaçant le bouton disparu : sans elle, un écran
   sans bouton ni pastille au repos laisse croire qu'il manque une action. */
.autosave-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.autosave-hint svg { flex-shrink: 0; opacity: .8; }

@media (max-width: 768px) {
    .autosave-pill {
        right: 12px;
        left: 12px;
        bottom: calc(12px + var(--safe-bottom));
        max-width: none;
        justify-content: center;
    }
}