/* ═══════════════════════════════════════════════════════════════════════════════
   AI ASSISTANT — Full Stylesheet
   Pixel-perfect match to Linkooc design system.
   Uses CSS custom properties from linkooc-theme.css
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS (local overrides) ────────────────────────────────────────── */
:root {
    --aia-sidebar-w: 380px;
    --aia-green: var(--linkooc-button-primary, #08781B);
    /* Issue 275 — le vert jouait DEUX rôles avec un seul jeton : l'ENCRE posée
       sur une surface (33 règles `color:`) et le REMPLISSAGE plein sous du blanc
       (21 règles `background:`). Un seul vert peut tenir les deux tant que le
       tiroir est blanc ; dès qu'il suit le thème, l'un ou l'autre casse — le
       #1a8a30 du sombre donne 4,03:1 en encre sur #171717, et l'éclaircir
       ferait tomber le blanc du bouton plein à 3,05:1. Le thème connaît déjà ce
       partage (`--linkooc-button-primary` contre `--linkooc-text-display-second`,
       cf. `--kendo-color-primary-on-subtle`). Même valeur qu'avant en clair. */
    --aia-green-solid: var(--linkooc-button-primary, #08781B);
    --aia-green-light: var(--linkooc-success-light, #e7f5e9);
    --aia-green-hover: var(--linkooc-green-var-2, #11671E);
    /* Issue 314 — le survol du REMPLISSAGE, qui n'est pas celui de l'ENCRE. Le même
       partage que `--aia-green` / `--aia-green-solid` (#275) : `--aia-green-hover`
       reste l'encre du picto de la barre du haut (`.topbar-btn-ai:hover svg`), qui
       doit s'ÉCLAIRCIR sur une surface sombre ; le fond d'un bouton plein, lui,
       s'assombrit. En thème clair les deux valent le même vert. */
    --aia-green-solid-hover: var(--linkooc-button-primary-hover, #11671E);
    --aia-green-dark: var(--linkooc-button-secondary, #054810);
    /* Issue 281 — l'orange et le rouge jouaient le MÊME double rôle que le vert
       ci-dessus, et personne ne l'avait vu parce qu'ils ne lisaient aucun jeton :
       #E67E22 et #FEF2F2 étaient une SECONDE palette écrite en dur, que le pont
       du thème ne pouvait pas voir. D'où quatre pastilles restées CLAIRES au
       milieu de la carte sombre après #275 (4 111 px², mesurés au banc).
       Même partage que le vert : `--aia-*` est l'ENCRE posée sur la pastille
       pâle, `--aia-*-solid` le REMPLISSAGE plein (ou le liseré vif) — on ne peut
       pas éclaircir l'un sans noircir l'autre.
       L'ENCRE orange change AUSSI en clair : #E67E22 sur #FFF4E6 ne mesurait que
       2,62:1, sous le seuil AA, thème clair compris. `--linkooc-warning-strong`
       est le jeton que le thème tient déjà à ≥ 4,5:1 sur une surface pâle
       (#8a5c00, cf. la note « gate 413 » de linkooc-theme.css) : 5,39:1. */
    --aia-orange: var(--linkooc-warning-strong, #8a5c00);
    --aia-orange-solid: #E67E22;
    --aia-orange-light: #FFF4E6;
    --aia-red: var(--linkooc-danger, #BA1919);
    --aia-red-solid: var(--linkooc-danger-solid, #BA1919);
    --aia-red-light: #FEF2F2;
    /* Issue 285 — la pastille « lecture seule » était la TROISIÈME palette en dur
       (#EBF5FB / #2980B9), la seule que #281 n'ait pas reprise : 1 109 px² d'îlot
       CLAIR au milieu du tiroir sombre, et déjà 3,89:1 en thème CLAIR — sous le
       seuil AA, comme le « ✏ 1 modif » de #281.
       Deux rôles seulement ici : `--aia-blue` est l'ENCRE, `--aia-blue-light` la
       surface pâle. Pas de jumeau `-solid` : ce bleu ne remplit rien et ne dessine
       aucun liseré, et on ne déclare pas un jeton que personne ne lit (#281).
       L'ENCRE change AUSSI en clair. Le thème n'a pas d'équivalent bleu de
       `--linkooc-warning-strong`, mais il a la rampe dont `--linkooc-info` est le
       premier cran : le deuxième, `--linkooc-blue-var-2` (#1167A1), donne 5,46:1
       sur la pastille pâle là où `--linkooc-info` (#197CBA) reste à 4,10:1. */
    --aia-blue: var(--linkooc-blue-var-2, #1167A1);
    --aia-blue-light: #EBF5FB;
    --aia-purple: #7c3aed;
    --aia-text: var(--linkooc-text-display, #000601);
    --aia-text-muted: var(--linkooc-text-muted, #6d6d6d);
    --aia-text-secondary: var(--linkooc-text-display-second, #22AD01);
    --aia-bg: var(--linkooc-bg, #FFFFFF);
    --aia-bg-surface: var(--linkooc-hover-bg, #F7F7F8);
    --aia-border: var(--linkooc-border-color, #dee2e6bf);
    --aia-radius: 12px;
    --aia-radius-sm: 8px;
    --aia-radius-bubble: 18px;
    --aia-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    --aia-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --aia-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --aia-font: var(--linkooc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LE TIROIR SUIT LE THÈME (issue 275)

   Le tiroir s'ouvrait BLANC par-dessus un écran sombre : 418 000 px² de #fff,
   son titre en #000601 et « En ligne » en #6d6d6d — le thème clair au complet,
   mesuré le 2026-09-11 au banc sur La Cantine (340). Pourtant pas un seul #fff
   n'est écrit dans `.aia-sidebar` : elle lit `var(--aia-bg)`.

   C'est le piège que l'issue #251 a documenté dans `linkooc-theme.css` : une
   propriété personnalisée est substituée LÀ OÙ ELLE EST DÉCLARÉE, pas là où
   elle est lue. Les quinze alias `--aia-*` ci-dessus sont déclarés au seul
   `:root`, donc `var(--linkooc-bg)` y vaut #FFFFFF — la valeur CLAIRE — et
   cette valeur hérite telle quelle jusque dans `main.dark-theme`, où le tiroir
   est pourtant rendu (`BackOfficeLayout.razor` : `<main class="@ThemeMode">`).
   Aucun pont posé dans le thème ne peut le voir : ce fichier-ci est une SECONDE
   liste d'alias, et c'est ici qu'il faut la reprendre.

   RÈGLE, la même qu'au thème et tenue par un test
   (`LinkoocBackOffice.Tests/Unit/Shared/DarkThemeSurfaceTests.cs`) : tout alias
   `--aia-*` du `:root` qui lit un jeton redéclaré en sombre a sa ligne jumelle
   ici. Rien d'autre ne change — les surfaces et les encres du tiroir passent
   déjà toutes par ces quinze jetons.

   Bloc réservé au thème sombre : le clair ne bouge pas d'un pixel.
   ═══════════════════════════════════════════════════════════════════════════════ */
main.dark-theme {
    /* Le tiroir est une SURFACE posée sur la page, comme les cartes du
       BackOffice : #171717 sur le #0f0f0f du fond, et non le fond lui-même —
       sans quoi seul le liseré de gauche le séparerait de l'écran. */
    --aia-bg: var(--linkooc-surface);
    --aia-bg-surface: var(--linkooc-hover-bg);
    --aia-border: var(--linkooc-border-color);

    --aia-text: var(--linkooc-text-display);
    --aia-text-muted: var(--linkooc-text-muted);
    --aia-text-secondary: var(--linkooc-text-display-second);

    /* Le vert, dans ses deux rôles (cf. le commentaire du `:root`) :
       l'ENCRE s'éclaircit pour rester lisible sur une surface sombre (5,02:1 sur
       #171717 contre 4,03:1 pour le vert plein), le REMPLISSAGE prend le vert
       primaire du BackOffice sombre — celui de tous les boutons pleins. */
    --aia-green: var(--linkooc-text-display-second);
    --aia-green-solid: var(--linkooc-button-primary);
    --aia-green-hover: var(--linkooc-green-var-2);
    /* Issue 314 : en sombre les deux survols divergent — l'encre du picto s'éclaircit
       (#2d9249), le fond du bouton plein s'assombrit (#14712a) pour porter du blanc. */
    --aia-green-solid-hover: var(--linkooc-button-primary-hover);
    --aia-green-dark: var(--linkooc-text-display-second);
    --aia-green-light: var(--linkooc-success-light);

    /* Issue 281 — l'orange et le rouge, dans les deux rôles. Les pastilles pâles
       deviennent une TEINTE de leur couleur sur le tiroir (même forme que le vert
       juste au-dessus), et l'encre s'éclaircit pour rester lisible dessus :
         « ✏ 1 modif »        #e3b341 sur la teinte orange  7,63:1
         « 🗑 1 suppression »  #ef7d75 sur la teinte rouge   5,95:1
       Le rouge d'encre est écrit ici, comme le violet de #275 : le thème n'a pas
       de rouge plus clair que `--linkooc-danger` (#e5534b), qui ne monte qu'à
       4,28:1 sur sa propre teinte — sous le seuil. Le rouge PLEIN, lui, porte du
       blanc : il prend `--linkooc-danger-solid` (#C62828, 5,62:1), le rouge que
       le plan 530 a déjà taillé pour ça. */
    --aia-orange: var(--linkooc-warning-strong);
    --aia-orange-solid: var(--linkooc-warning);
    --aia-orange-light: var(--linkooc-warning-light);
    --aia-red: #ef7d75;
    --aia-red-solid: var(--linkooc-danger-solid);
    --aia-red-light: var(--linkooc-danger-light);

    /* Issue 285 — le bleu de la pastille « lecture seule », même forme que ses
       trois sœurs : la surface pâle devient une TEINTE bleue du tiroir, l'encre
       s'éclaircit pour rester lisible dessus. Ici le thème suffit — `--linkooc-info`
       (#58a6ff) donne 5,90:1 sur sa propre teinte, contre 4,28:1 pour le rouge qui
       avait forcé #281 à écrire une valeur en dur. */
    --aia-blue: var(--linkooc-info);
    --aia-blue-light: var(--linkooc-info-light);
}

/* La pilule de saisie lit `--aia-bg`, donc elle vaudrait exactement la surface
   du tiroir : le champ disparaîtrait dans le panneau, son liseré à 8 % de blanc
   ne suffisant pas à le dessiner. En sombre, un champ est un CREUX — c'est la
   convention posée par l'issue #267 pour tous les `.form-control` du produit,
   et `--linkooc-bg-muted` est le jeton qu'elle emploie. */
main.dark-theme .aia-input-wrapper {
    background: var(--linkooc-bg-muted);
}

/* Le grille-pain « Annuler » écrit son fond avec l'ENCRE du thème
   (`background: var(--aia-text)`) et son texte en blanc : c'est un bandeau
   inversé, le seul du tiroir. Avec les jumelles ci-dessus l'encre devient
   blanche, donc le bandeau serait blanc sur blanc. Il redevient une surface du
   thème, avec son encre de lecture et un liseré pour le détacher du fond. */
main.dark-theme .aia-undo-toast {
    background: var(--linkooc-second-bg);
    color: var(--linkooc-text);
    border: 1px solid var(--linkooc-border-color);
}

/* Le violet des pastilles « nouvelle catégorie » est posé sur une TEINTE
   (`rgba(124, 58, 237, 0.1)`), qui suit donc le tiroir dans le sombre : le
   #7c3aed d'origine y tomberait à 3,25:1. Il s'éclaircit, comme les verts.
   Le violet PLEIN de `.aia-plan-cat__type-badge--new` ne bouge pas : son texte
   est blanc, et l'éclaircir le ferait chuter à 2,72:1. */
main.dark-theme .aia-plan-badge--new-cat {
    color: #a78bfa;
}

/* ── SIDEBAR PANEL (push layout) ────────────────────────────────────────────── */
.aia-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: var(--aia-sidebar-w);
    max-width: 100vw;
    background: var(--aia-bg);
    border-left: 1px solid var(--aia-border);
    display: flex;
    flex-direction: column;
    font-family: var(--aia-font);
    transform: translateX(100%);
    transition: transform var(--aia-transition);
}

.aia-sidebar--open {
    transform: translateX(0);
}

/* ── EMBEDDED MODE (inline in page, not fixed sidebar) ──────────────────────── */
.aia-sidebar--embedded {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-radius: var(--aia-radius);
    border: 1px solid var(--aia-border);
    transform: none;
    transition: none;
    height: 100%;
    min-height: 0;
}

/* ── DRAG & DROP OVERLAY ────────────────────────────────────────────────────── */
.aia-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: rgba(8, 120, 27, 0.08);
    border: 2px dashed var(--aia-green);
    border-radius: var(--aia-radius);
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.aia-sidebar--drag-active .aia-drop-overlay {
    display: flex;
    animation: aia-drop-fade-in 0.15s ease;
}

.aia-drop-overlay__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--aia-green);
    font-size: 15px;
    font-weight: 500;
}

.aia-drop-overlay__content svg {
    opacity: 0.7;
    animation: aia-drop-bounce 0.6s ease infinite alternate;
}

@keyframes aia-drop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes aia-drop-bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
}

/* Push layout: shrink the BackOffice .main area when sidebar is open */
.main {
    transition: margin-right var(--aia-transition);
}

body:has(.aia-sidebar--open) .main {
    margin-right: var(--aia-sidebar-w);
}

body:has(.aia-sidebar--open) .aia-fab {
    right: calc(var(--aia-sidebar-w) + 20px);
}

/* ── EXPANDED (full-page) MODE ──────────────────────────────────────────────── */
.aia-sidebar--expanded {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
    z-index: 1200;
}

.aia-sidebar--expanded .aia-header {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 16px 24px;
}

.aia-sidebar--expanded .aia-messages {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

.aia-sidebar--expanded .aia-input-bar {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.aia-sidebar--expanded .aia-context-pills {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

/* When expanded, hide the main content entirely and the FAB */
body:has(.aia-sidebar--expanded) .main {
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
}

body:has(.aia-sidebar--expanded) .aia-fab {
    opacity: 0;
    pointer-events: none;
}

/* ── HEADER ─────────────────────────────────────────────────────────────────── */
.aia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aia-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aia-header__info {
    display: flex;
    flex-direction: column;
}

.aia-header__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--aia-text);
    line-height: 1.2;
}

.aia-header__status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--aia-text-muted);
    line-height: 1.2;
}

.aia-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aia-green-solid);
    display: inline-block;
}

/* ── Header action buttons (expand + close) ─────────────────────────────────── */
.aia-header__actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.aia-header__expand,
.aia-header__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--aia-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.aia-header__expand:hover,
.aia-header__close:hover {
    background: var(--aia-bg-surface);
    color: var(--aia-text);
}

/* ── AVATAR ─────────────────────────────────────────────────────────────────── */
.aia-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--aia-green-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aia-avatar--sm {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--aia-green-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── CONVERSATIONS PRÉCÉDENTES (issue #180) ──────────────────────── */
.aia-history {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.aia-history__note {
    margin: 0;
    padding: 20px 16px;
    font-size: 13px;
    color: var(--aia-text-muted);
}

.aia-history__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--aia-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.aia-history__item:hover,
.aia-history__item:focus-visible {
    background: var(--aia-bg-surface);
}

.aia-history__when {
    font-size: 12px;
    color: var(--aia-text-muted);
}

.aia-history__first {
    font-size: 14px;
    color: var(--aia-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-header__expand--on {
    background: var(--aia-bg-surface);
    color: var(--aia-text);
}

/* ── MESSAGES AREA ──────────────────────────────────────────────────────────── */
.aia-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

.aia-messages::-webkit-scrollbar {
    width: 4px;
}

.aia-messages::-webkit-scrollbar-track {
    background: transparent;
}

.aia-messages::-webkit-scrollbar-thumb {
    background: var(--aia-border);
    border-radius: 2px;
}

/* ── MESSAGE ROW ────────────────────────────────────────────────────────────── */
.aia-msg {
    display: flex;
    gap: 10px;
    max-width: 100%;
    animation: aiaFadeIn 0.2s ease-out;
}

.aia-msg--user {
    justify-content: flex-end;
}

.aia-msg--assistant {
    justify-content: flex-start;
    align-items: flex-start;
}

/* ── BUBBLES ────────────────────────────────────────────────────────────────── */
.aia-bubble {
    max-width: 85%;
    line-height: 1.5;
    font-size: 14px;
}

.aia-bubble--user {
    background: var(--aia-green-solid);
    color: white;
    padding: 10px 16px;
    border-radius: var(--aia-radius-bubble) var(--aia-radius-bubble) 4px var(--aia-radius-bubble);
    font-weight: 450;
    word-break: break-word;
}

.aia-bubble--assistant {
    color: var(--aia-text);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aia-bubble__text {
    font-size: 14px;
    color: var(--aia-text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ── TYPING INDICATOR ───────────────────────────────────────────────────────── */
.aia-processing-card {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(8, 120, 27, 0.16);
    border-radius: var(--aia-radius-sm);
    background: color-mix(in srgb, var(--aia-green-light) 46%, var(--aia-bg) 54%);
}

.aia-processing-card__pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--aia-green-solid);
    box-shadow: 0 0 0 0 rgba(8, 120, 27, 0.28);
    animation: aiaProcessingPulse 1.8s ease-out infinite;
}

.aia-processing-card__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.aia-processing-card__title {
    color: var(--aia-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
}

.aia-processing-card__detail {
    color: var(--aia-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.aia-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.aia-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aia-green-solid);
    opacity: 0.4;
    animation: aiaTyping 1.4s ease-in-out infinite;
}

.aia-typing span:nth-child(2) { animation-delay: 0.2s; }
.aia-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiaTyping {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

@keyframes aiaProcessingPulse {
    0% { box-shadow: 0 0 0 0 rgba(8, 120, 27, 0.28); }
    70% { box-shadow: 0 0 0 8px rgba(8, 120, 27, 0); }
    100% { box-shadow: 0 0 0 0 rgba(8, 120, 27, 0); }
}

@keyframes aiaFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARDS — Shared base styles
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-card {
    background: var(--aia-bg);
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    padding: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aia-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aia-card__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aia-card__icon {
    color: var(--aia-text);
    flex-shrink: 0;
}

.aia-card__icon--warn { color: var(--aia-orange); }
.aia-card__icon--error { color: var(--aia-red); }
.aia-card__icon--success { color: var(--aia-green); }
.aia-card__icon--question { color: var(--aia-text-muted); }

.aia-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--aia-text);
}

.aia-card__body {
    font-size: 13.5px;
    color: var(--aia-text);
    line-height: 1.55;
    margin: 0;
}

.aia-card__body--error {
    color: var(--aia-red);
}

.aia-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--aia-border);
}

.aia-card__detail-line {
    font-size: 13px;
    color: var(--aia-text-muted);
    line-height: 1.4;
}

.aia-card__detail-more {
    font-style: italic;
}

.aia-suggestion-reuse {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--aia-border);
}

/* Le nom vient du restaurateur : il se lit tel qu'il l'a ecrit, pas en capitales. */
.aia-suggestion-reuse__label {
    color: var(--aia-text-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.aia-suggestion-reuse__options {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.aia-suggestion-reuse__choice {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--aia-border);
    border-radius: 8px;
    background: var(--aia-bg);
    color: var(--aia-text);
    cursor: pointer;
    transition: background var(--aia-transition), border-color var(--aia-transition), box-shadow var(--aia-transition);
}

.aia-suggestion-reuse__choice:hover {
    border-color: color-mix(in srgb, var(--aia-green) 34%, var(--aia-border));
    background: color-mix(in srgb, var(--aia-bg) 92%, var(--aia-green-light));
}

.aia-suggestion-reuse__choice--selected {
    border-color: color-mix(in srgb, var(--aia-green) 58%, var(--aia-border));
    background: color-mix(in srgb, var(--aia-green-light) 72%, var(--aia-bg));
    box-shadow: inset 3px 0 0 var(--aia-green);
}

.aia-suggestion-reuse__choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.aia-suggestion-reuse__choice-mark {
    width: 13px;
    height: 13px;
    border: 1.5px solid color-mix(in srgb, var(--aia-text-muted) 55%, var(--aia-border));
    border-radius: 50%;
    background: var(--aia-bg);
}

.aia-suggestion-reuse__choice--selected .aia-suggestion-reuse__choice-mark {
    border: 4px solid var(--aia-green);
}

.aia-suggestion-reuse__choice-input:focus-visible + .aia-suggestion-reuse__choice-mark {
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.18);
}

.aia-suggestion-reuse__choice-input:disabled ~ .aia-suggestion-reuse__choice-main,
.aia-suggestion-reuse__choice-input:disabled + .aia-suggestion-reuse__choice-mark {
    opacity: 0.62;
}

.aia-suggestion-reuse__choice-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.aia-suggestion-reuse__choice-title {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    color: var(--aia-text);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-suggestion-reuse__choice-meta {
    /* Plan 792 : une ligne « ancien → nouveau » se lit jusqu'au bout — elle passe à la ligne, jamais coupée. */
    min-width: 0;
    color: var(--aia-text-muted);
    font-size: 10.5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.aia-card__warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--aia-orange-light);
    border-radius: var(--aia-radius-sm);
    font-size: 13px;
    color: var(--aia-orange);
    font-weight: 500;
}

/* ── BADGES ─────────────────────────────────────────────────────────────────── */
.aia-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.aia-badge--safe {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-badge--warn {
    background: var(--aia-orange-light);
    color: var(--aia-orange);
}

.aia-badge--info {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.aia-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.aia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--aia-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    font-family: var(--aia-font);
    white-space: nowrap;
}

.aia-btn--primary {
    background: var(--aia-green-solid);
    color: white;
}

.aia-btn--primary:hover:not(:disabled) {
    background: var(--aia-green-solid-hover);
}

.aia-btn--outline {
    background: var(--aia-bg);
    color: var(--aia-text);
    border: 1px solid var(--aia-border);
}

.aia-btn--outline:hover:not(:disabled) {
    background: var(--aia-bg-surface);
    border-color: var(--aia-text-muted);
}

.aia-btn--text {
    background: transparent;
    color: var(--aia-text-muted);
    padding: 8px 12px;
}

.aia-btn--text:hover {
    color: var(--aia-text);
}

.aia-btn--disabled,
.aia-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── LINKS (reject, undo) ──────────────────────────────────────────────────── */
.aia-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--aia-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    padding: 2px 0;
    font-family: var(--aia-font);
    transition: color 0.15s ease;
}

.aia-link:hover {
    color: var(--aia-text);
}

.aia-link--reject { color: var(--aia-text-muted); }
.aia-link--undo { color: var(--aia-green); }
.aia-link--open {
    color: var(--aia-green);
    text-decoration: none;
}

.aia-link--plan-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--aia-text-muted);
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font-family: var(--aia-font);
    transition: color 0.15s ease;
}
.aia-link--plan-toggle:hover {
    color: var(--aia-text);
}

.aia-undone-label {
    font-size: 12px;
    color: var(--aia-text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD VARIANTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Suggestion card */
.aia-card--suggestion {
    border-color: var(--aia-border);
}

/* Confirmation card (destructive) */
.aia-card--confirmation {
    border-color: var(--aia-orange-solid);
    border-left: 3px solid var(--aia-orange-solid);
}

/* Question card */
.aia-card--question {
    border-color: var(--aia-border);
}

/* Plan card */
.aia-card--plan {
    border-color: var(--aia-border);
}

/* Success card */
.aia-card--success {
    background: var(--aia-green-light);
    border-color: transparent;
}

.aia-card--success .aia-card__title {
    color: var(--aia-green-dark);
}

/* Failed card */
.aia-card--failed {
    background: var(--aia-red-light);
    border-color: transparent;
}

/* Partial card (some succeeded, some failed) */
/* Issue 281 — trois hexadécimaux clairs de plus, de la même famille orange :
   la carte « partiellement appliqué » restait un rectangle #FFFBEB sur le
   tiroir sombre. Elle lit les mêmes jetons que les pastilles. */
.aia-card--partial {
    background: var(--aia-orange-light);
    border-color: transparent;
}
.aia-card--partial .aia-card__title {
    color: var(--aia-orange);
}
.aia-card__icon--partial {
    color: var(--aia-orange);
}

/* ── Failure detail lines (red X list) ── */
.aia-failure-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.aia-failure-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--aia-red);
    line-height: 1.45;
}

.aia-failure-detail svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── CHECKBOX ───────────────────────────────────────────────────────────────── */
.aia-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--aia-bg-surface);
    border-radius: var(--aia-radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--aia-text);
    line-height: 1.4;
}

.aia-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--aia-green);
    flex-shrink: 0;
    cursor: pointer;
}

.aia-checkbox__label {
    cursor: pointer;
}

/* ── RADIO GROUP (questions) ────────────────────────────────────────────────── */
.aia-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.aia-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--aia-border);
    border-bottom: none;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--aia-text);
    background: var(--aia-bg);
    transition: background 0.15s ease;
}

.aia-radio:first-child {
    border-radius: var(--aia-radius-sm) var(--aia-radius-sm) 0 0;
}

.aia-radio:last-child {
    border-bottom: 1px solid var(--aia-border);
    border-radius: 0 0 var(--aia-radius-sm) var(--aia-radius-sm);
}

.aia-radio:hover {
    background: var(--aia-bg-surface);
}

.aia-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--aia-border);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.aia-radio input[type="radio"]:checked {
    border-color: var(--aia-green);
}

.aia-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--aia-green-solid);
}

.aia-radio__circle { display: none; }
.aia-radio__label { cursor: pointer; }

/* ── CHOICE POLL (questions) ───────────────────────────────────────────────── */
.aia-choice-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aia-choice {
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius-sm);
    background: var(--aia-bg);
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.aia-choice:hover {
    background: var(--aia-bg-surface);
}

.aia-choice--selected {
    border-color: var(--aia-green);
    background: var(--aia-green-light);
}

.aia-choice__main {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    cursor: pointer;
}

.aia-choice__main input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    border: 2px solid var(--aia-border);
    border-radius: 50%;
    background: var(--aia-bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.aia-choice__main input[type="radio"]:checked {
    border-color: var(--aia-green);
    background: var(--aia-bg);
}

.aia-choice__main input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--aia-green-solid);
}

.aia-choice__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.aia-choice__label {
    color: var(--aia-text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

.aia-choice__description {
    color: var(--aia-text-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

.aia-choice__input-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px 14px 42px;
}

.aia-choice__input-label {
    color: var(--aia-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.aia-choice__input,
.aia-choice__select {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius-sm);
    background: var(--aia-bg);
    color: var(--aia-text);
    font-family: var(--aia-font);
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aia-choice__select {
    cursor: pointer;
}

.aia-choice__input:focus,
.aia-choice__select:focus {
    border-color: var(--aia-green);
    box-shadow: 0 0 0 3px var(--aia-green-light);
}

@media (max-width: 640px) {
    .aia-choice__main {
        padding: 11px 12px;
    }

    .aia-choice__input-wrap {
        padding: 0 12px 12px 40px;
    }
}

/* ── PLAN STEPS ─────────────────────────────────────────────────────────────── */
.aia-plan-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aia-plan-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}

.aia-plan-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aia-green-light);
    color: var(--aia-green);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aia-plan-step__content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.aia-plan-step__tool {
    font-size: 12px;
    font-weight: 600;
    color: var(--aia-text);
    font-family: monospace;
}

.aia-plan-step__desc {
    font-size: 12.5px;
    color: var(--aia-text-muted);
}

.aia-plan-step--rejected {
    opacity: 0.5;
    text-decoration: line-through;
}

/* ── PLAN PREVIEW (bulk import) ─────────────────────────────────────────────── */
.aia-plan__summary {
    font-size: 13px;
    color: var(--aia-text);
    margin: 0 0 8px;
    line-height: 1.4;
}

.aia-plan__badges {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.aia-plan-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.aia-plan-context__badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 6px;
    border: 1px solid var(--aia-border);
    border-radius: 10px;
    background: var(--aia-bg-surface);
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.25;
}

.aia-plan-context__label {
    flex: 0 0 auto;
    color: var(--aia-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9.5px;
}

.aia-plan-context__value {
    min-width: 0;
    color: var(--aia-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-plan-context__badge--menu {
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.08);
}

.aia-plan-context__badge--tariff {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.09);
}

/* ── Plan 796 : le tarif du plan, un choix dans la carte ── */
.aia-plan-tariff {
    position: relative;
    display: inline-flex;
    max-width: 100%;
}

.aia-plan-tariff__toggle {
    font-family: var(--aia-font);
    color: var(--aia-text);
    cursor: pointer;
}

/* Liste ouverte : le bouton reste au-dessus du fond qui referme la liste (un second clic la referme). */
.aia-plan-tariff__toggle[aria-expanded="true"] {
    position: relative;
    z-index: 32;
}

.aia-plan-tariff__toggle:hover:not(:disabled) {
    border-color: rgba(16, 185, 129, 0.55);
}

.aia-plan-tariff__toggle:disabled {
    cursor: progress;
    opacity: 0.7;
}

.aia-plan-tariff__chevron {
    flex: 0 0 auto;
    color: var(--aia-text-muted);
    transition: transform 0.15s ease;
}

.aia-plan-tariff__chevron--open {
    transform: rotate(180deg);
}

.aia-plan-tariff__backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.aia-plan-tariff__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 31;
    min-width: 260px;
    max-width: 340px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--aia-bg);
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius-sm);
    box-shadow: var(--aia-shadow);
}

.aia-plan-tariff__option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--aia-font);
    font-size: 13px;
    color: var(--aia-text);
    text-align: left;
    transition: background 0.1s ease;
}

.aia-plan-tariff__option:hover,
.aia-plan-tariff__option:focus-visible {
    background: var(--aia-bg-surface);
    outline: none;
}

.aia-plan-tariff__option--selected {
    background: var(--aia-green-light);
    font-weight: 600;
}

.aia-plan-tariff__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-plan-tariff__usage {
    flex: 0 0 auto;
    color: var(--aia-text-muted);
    font-size: 12px;
    font-weight: 400;
}

.aia-plan-tariff__create {
    border-top: 1px solid var(--aia-border);
    margin-top: 4px;
    padding-top: 9px;
    color: var(--aia-green);
    font-weight: 600;
}

.aia-plan-tariff__new {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 10px;
}

.aia-plan-tariff__new-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aia-plan-tariff__input {
    flex: 1 1 auto;
    min-width: 0;
}

.aia-plan-tariff__confirm {
    flex: 0 0 auto;
}

.aia-plan-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.aia-plan-badge--add {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-plan-badge--modify {
    background: var(--aia-orange-light);
    color: var(--aia-orange);
}

.aia-plan-badge--delete {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

/* Issue 281 — l'encadré qualité, même famille : #fff8eb / #7a4a05 en dur. Le
   liseré est déjà une TEINTE translucide, donc il suit le fond tout seul. */
.aia-plan-quality {
    border: 1px solid rgba(245, 158, 11, 0.32);
    background: var(--aia-orange-light);
    color: var(--aia-orange);
    border-radius: var(--aia-radius);
    padding: 9px 10px;
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.35;
}

.aia-plan-quality__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 3px;
}

.aia-plan-quality__summary {
    color: #8a5a12;
    margin-bottom: 6px;
}

.aia-plan-quality__section {
    margin-top: 6px;
}

.aia-plan-quality__label {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.aia-plan-quality__hint {
    display: block;
    margin-bottom: 3px;
    color: #8a5a12;
    font-size: 11px;
    line-height: 1.3;
}

.aia-plan-quality ul {
    margin: 0;
    padding-left: 16px;
}

.aia-plan-quality li {
    margin: 2px 0;
}

.aia-plan-quality__more {
    display: inline-block;
    margin-top: 3px;
    color: #8a5a12;
    font-weight: 600;
}

/* Plan 783 — sous le résultat d'un import PDF : le juge qui relit les pages contre
   le menu créé. Une ligne discrète tant qu'il n'y a rien à corriger ; les écarts
   reprennent l'encadré de la vérification (même famille, pas un nouveau style). */
.aia-import-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--aia-text-muted);
}

.aia-import-check__spinner {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    border: 2px solid var(--aia-border);
    border-top-color: var(--aia-green);
    border-radius: 50%;
    animation: aia-spin 0.8s linear infinite;
}

.aia-plan-quality.aia-import-check__findings {
    margin: 8px 0 0;
}

/* Issue 706 — « Corriger les N écarts » sous la liste du juge */
.aia-import-check__findings .aia-card__actions {
    padding-top: 10px;
}

/* Allergen-automation notice (compact, informational) */
.aia-plan__automation-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--aia-text-muted);
    margin: 2px 0 0;
}

.aia-plan__automation-note .bi {
    flex-shrink: 0;
    font-size: 12px;
    line-height: inherit;
}

/* Review mode counter */
.aia-plan__review-counter {
    font-size: 12px;
    color: var(--aia-text-muted);
    margin-bottom: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.aia-plan__counter-accepted { color: var(--aia-green); font-weight: 600; }
.aia-plan__counter-rejected { color: var(--aia-red); font-weight: 600; }
.aia-plan__counter-sep { color: var(--aia-border); }

/* Category groups */
.aia-plan__categories {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aia-plan-cat {
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    overflow: hidden;
    background: var(--aia-bg);
}

.aia-plan-cat__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--aia-bg-surface);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--aia-text);
    text-align: left;
    font-family: var(--aia-font);
    transition: background var(--aia-transition);
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.aia-plan-cat__header:hover {
    background: var(--aia-border);
}

.aia-plan-cat__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--aia-text-muted);
}

.aia-plan-cat__chevron--open {
    transform: rotate(90deg);
}

.aia-plan-cat__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.aia-plan-cat__counts {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    padding-right: 6px;
}

.aia-cat-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
}

.aia-cat-count--add { background: var(--aia-green-light); color: var(--aia-green); }
.aia-cat-count--modify { background: var(--aia-orange-light); color: var(--aia-orange); }
.aia-cat-count--delete { background: var(--aia-red-light); color: var(--aia-red); }

/* Category header row (wraps header button + category-level actions) */
.aia-plan-cat__header-row {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.aia-plan-cat__header-row .aia-plan-cat__header {
    flex: 1 1 0;
    min-width: 0;
}

.aia-plan-cat__folder {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

/* Category type badges (existante / NOUVELLE) */
.aia-plan-cat__type-badge {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0px 4px;
    border-radius: 4px;
    line-height: 1.6;
}

.aia-plan-cat__type-badge--existing {
    background: var(--aia-bg-surface);
    color: var(--aia-text-muted);
    border: 1px solid var(--aia-border);
}

.aia-plan-cat__type-badge--new {
    background: var(--aia-purple, #7c3aed);
    color: #fff;
}

/* Category-level accept/reject actions */
.aia-plan-cat__actions {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px 4px 0;
    flex-shrink: 0;
}

/* New category variant (subtle left accent) */
.aia-plan-cat--new {
    border-left: 3px solid var(--aia-purple, #7c3aed);
}

/* New categories badge in summary */
.aia-plan-badge--new-cat {
    background: rgba(124, 58, 237, 0.1);
    color: var(--aia-purple, #7c3aed);
}

/* Items container */
.aia-plan-cat__items {
    display: flex;
    flex-direction: column;
}

/* Category with children indicator */
.aia-plan-cat--has-children > .aia-plan-cat__header-row .aia-plan-cat__folder::after {
    content: "▸";
    font-size: 8px;
    margin-left: -2px;
    opacity: 0.5;
}

/* Drag handle (grip dots) */
.aia-plan-cat__drag-handle {
    display: flex;
    align-items: center;
    padding: 4px 2px;
    cursor: grab;
    flex-shrink: 0;
}

.aia-plan-cat__drag-handle:active {
    cursor: grabbing;
}

/* Drop target highlight */
.aia-plan-cat--drop-target {
    outline: 2px dashed var(--aia-purple, #7c3aed);
    outline-offset: -2px;
    background: rgba(124, 58, 237, 0.05);
}

/* Category rename inline input */
.aia-plan-cat__rename-input {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--aia-font);
    color: var(--aia-text);
    background: var(--aia-bg);
    border: 1px solid var(--aia-purple, #7c3aed);
    border-radius: var(--aia-radius-sm);
    padding: 2px 6px;
    outline: none;
    min-width: 0;
}

.aia-plan-cat__rename-input:focus {
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

/* Item dragging state */
.aia-plan-item--dragging {
    opacity: 0.4;
}

.aia-plan-item[draggable="true"] {
    cursor: grab;
}

.aia-plan-item[draggable="true"]:active {
    cursor: grabbing;
}

/* Edit button for category rename */
.aia-plan-item__btn--edit {
    color: var(--aia-text-muted);
}

.aia-plan-item__btn--edit:hover {
    color: var(--aia-purple, #7c3aed);
    background: rgba(124, 58, 237, 0.1);
}

/* Individual item row */
.aia-plan-item {
    padding: 8px 12px 8px 14px;
    border-top: 1px solid color-mix(in srgb, var(--aia-border) 50%, transparent);
    transition: background var(--aia-transition), opacity var(--aia-transition);
}

.aia-plan-item:first-child {
    border-top: none;
}

.aia-plan-item--accepted {
    background: var(--aia-green-light);
}

.aia-plan-item--rejected {
    background: var(--aia-red-light);
    opacity: 0.6;
}

.aia-plan-item__main {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Change type icons */
.aia-plan-item__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aia-plan-item__icon--add {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-plan-item__icon--modify {
    background: var(--aia-orange-light);
    color: var(--aia-orange);
}

.aia-plan-item__icon--delete {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

.aia-plan-item__info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.aia-plan-item__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--aia-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-plan-item__name--strike {
    text-decoration: line-through;
    color: var(--aia-red);
}

.aia-plan-item__price {
    font-size: 12px;
    font-weight: 600;
    color: var(--aia-text-muted);
    white-space: nowrap;
}

.aia-plan-item__reuse {
    margin-top: 5px;
    padding-left: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}

/* Le nom vient du restaurateur : il se lit tel qu'il l'a ecrit, pas en capitales. */
.aia-plan-item__reuse-label {
    color: var(--aia-text-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.aia-plan-item__reuse-options {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.aia-plan-item__reuse-choice {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--aia-border);
    border-radius: 8px;
    background: var(--aia-bg);
    color: var(--aia-text);
    cursor: pointer;
    transition: background var(--aia-transition), border-color var(--aia-transition), box-shadow var(--aia-transition);
}

.aia-plan-item__reuse-choice:hover {
    border-color: color-mix(in srgb, var(--aia-green) 34%, var(--aia-border));
    background: color-mix(in srgb, var(--aia-bg) 92%, var(--aia-green-light));
}

.aia-plan-item__reuse-choice--selected {
    border-color: color-mix(in srgb, var(--aia-green) 58%, var(--aia-border));
    background: color-mix(in srgb, var(--aia-green-light) 72%, var(--aia-bg));
    box-shadow: inset 3px 0 0 var(--aia-green);
}

.aia-plan-item__reuse-choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.aia-plan-item__reuse-choice-mark {
    width: 13px;
    height: 13px;
    border: 1.5px solid color-mix(in srgb, var(--aia-text-muted) 55%, var(--aia-border));
    border-radius: 50%;
    background: var(--aia-bg);
}

.aia-plan-item__reuse-choice--selected .aia-plan-item__reuse-choice-mark {
    border: 4px solid var(--aia-green);
}

.aia-plan-item__reuse-choice-input:focus-visible + .aia-plan-item__reuse-choice-mark {
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.18);
}

.aia-plan-item__reuse-choice-input:disabled ~ .aia-plan-item__reuse-choice-main,
.aia-plan-item__reuse-choice-input:disabled + .aia-plan-item__reuse-choice-mark {
    opacity: 0.62;
}

.aia-plan-item__reuse-choice-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.aia-plan-item__reuse-choice-title {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    color: var(--aia-text);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-plan-item__reuse-choice-meta {
    /* Plan 792 : une ligne « ancien → nouveau » se lit jusqu'au bout — elle passe à la ligne, jamais coupée. */
    min-width: 0;
    color: var(--aia-text-muted);
    font-size: 10.5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Item toolbar (edit fields + review actions on own row) */
.aia-plan-item__toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-left: 28px;
}

.aia-plan-item__edit-btns {
    display: flex;
    gap: 3px;
}

.aia-plan-item__review-btns {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.aia-plan-item__btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--aia-border);
    background: var(--aia-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
    color: var(--aia-text-muted);
}

.aia-plan-item__btn:hover {
    border-color: var(--aia-text-muted);
}

.aia-plan-item__btn--accept.aia-plan-item__btn--active {
    background: var(--aia-green-solid);
    border-color: var(--aia-green);
    color: white;
}

.aia-plan-item__btn--reject.aia-plan-item__btn--active {
    background: var(--aia-red-solid);
    border-color: var(--aia-red-solid);
    color: white;
}

/* Change details (old → new) */
.aia-plan-item__details {
    margin-top: 4px;
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aia-plan-item__detail {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11.5px;
    flex-wrap: wrap;
    line-height: 1.6;
}

.aia-plan-item__detail-label {
    color: var(--aia-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.aia-plan-item__detail-old {
    color: var(--aia-red);
    text-decoration: line-through;
}

.aia-plan-item__detail-arrow {
    color: var(--aia-text-muted);
    font-size: 10px;
}

.aia-plan-item__detail-new {
    color: var(--aia-green);
    font-weight: 500;
}

/* Plan 782 : une description importée garde ses lignes (une ligne de la carte = un paragraphe). */
.aia-plan-item__detail-new--lines {
    white-space: pre-line;
}

/* Inline edit inputs */
.aia-plan-item__input {
    font-family: var(--aia-font);
    font-size: 12px;
    padding: 3px 6px;
    border: 1.5px solid var(--aia-green);
    border-radius: 4px;
    outline: none;
    background: var(--aia-bg);
    color: var(--aia-text);
    transition: border-color 0.15s ease;
}

.aia-plan-item__input:focus {
    border-color: var(--aia-green);
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.15);
}

.aia-plan-item__input--text {
    flex: 1;
    min-width: 80px;
}

.aia-plan-item__input--price {
    width: 70px;
    text-align: right;
}

/* Edit trigger button on details */
.aia-plan-item__edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-text-muted);
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.aia-plan-item__detail:hover .aia-plan-item__edit-btn {
    opacity: 1;
}

.aia-plan-item__edit-btn:hover {
    color: var(--aia-green);
}

/* Edit cancel button */
.aia-plan-item__edit-cancel {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-red);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    display: flex;
    align-items: center;
}

.aia-plan-item__edit-cancel:hover {
    background: var(--aia-red-light);
}

/* Edit row — legacy class, now inside toolbar */
.aia-plan-item__edit-row {
    margin-top: 4px;
    padding-left: 28px;
    display: flex;
    gap: 4px;
}

.aia-plan-item__edit-field-btn {
    font-family: var(--aia-font);
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--aia-border);
    border-radius: 10px;
    background: var(--aia-bg);
    color: var(--aia-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;
    transition: all 0.15s ease;
    line-height: 1.4;
    white-space: nowrap;
}

.aia-plan-item__edit-field-btn:hover {
    border-color: var(--aia-green);
    color: var(--aia-green);
    background: var(--aia-green-light);
}

/* Inline edit section under item */
.aia-plan-item__inline-edit {
    margin-top: 4px;
    padding-left: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Confirm small button in header */
.aia-btn--confirm-sm {
    font-family: var(--aia-font);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    border: none;
    background: var(--aia-green-solid);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease;
}

.aia-btn--confirm-sm:hover {
    background: var(--aia-green-solid-hover);
}

/* Disabled primary button */
.aia-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── MULTI-PRICE DISPLAY ────────────────────────────────────────────────────── */
.aia-plan-item__prices {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.aia-plan-item__price-entry {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.aia-plan-item__price-unit {
    font-size: 10px;
    color: var(--aia-text-muted);
    font-weight: 400;
    opacity: 0.8;
}

.aia-plan-item__price-entry + .aia-plan-item__price-entry::before {
    content: "·";
    color: var(--aia-text-muted);
    margin-right: 2px;
    opacity: 0.5;
}

/* ── MULTI-PRICE EDITOR ─────────────────────────────────────────────────────── */
.aia-plan-item__prices-editor {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Issue 281 — `--vscode-editor-background` n'existe pas dans ce produit :
       le repli #f9fafb gagnait dans les deux thèmes. */
    background: var(--aia-bg-surface);
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    padding: 8px 10px;
}

.aia-plan-item__price-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aia-plan-item__price-row--header {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--aia-border);
    margin-bottom: 2px;
}

.aia-plan-item__price-col-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--aia-text-muted);
}

.aia-plan-item__price-col-label--unit {
    flex: 1 1 100px;
    min-width: 0;
}

.aia-plan-item__price-col-label--price {
    width: 72px;
    flex: 0 0 72px;
    text-align: right;
}

.aia-plan-item__input--unit {
    flex: 1 1 100px;
    min-width: 0;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--aia-border);
    border-radius: 4px;
    /* Issue 281 — `--aia-surface` n'est déclaré nulle part : le repli #fff
       gagnait dans les deux thèmes. Un champ lit le fond du tiroir. */
    background: var(--aia-bg);
    color: var(--aia-text);
}

.aia-plan-item__input--price-num {
    width: 72px;
    flex: 0 0 72px;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--aia-border);
    border-radius: 4px;
    background: var(--aia-bg);
    color: var(--aia-text);
    text-align: right;
}

.aia-plan-item__price-currency {
    font-size: 12px;
    color: var(--aia-text-muted);
    flex-shrink: 0;
}

.aia-plan-item__price-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-text-muted);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
}

.aia-plan-item__price-remove:hover {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

.aia-plan-item__price-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid var(--aia-border);
}

.aia-plan-item__price-add {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-green);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.aia-plan-item__price-add:hover {
    background: var(--aia-green-light, rgba(34, 197, 94, 0.08));
}

.aia-plan-item__price-done {
    background: none;
    border: 1px solid var(--aia-green);
    cursor: pointer;
    color: var(--aia-green);
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    margin-left: auto;
}

.aia-plan-item__price-done:hover {
    background: var(--aia-green-solid);
    color: white;
}

.aia-plan-item__edit-multi-btn {
    background: none;
    border: 1px dashed var(--aia-border);
    cursor: pointer;
    color: var(--aia-text-muted);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

.aia-plan-item__edit-multi-btn:hover {
    border-color: var(--aia-green);
    color: var(--aia-green);
    background: var(--aia-green-light, rgba(34, 197, 94, 0.08));
}

/* ── DÉPLACER BUTTON ────────────────────────────────────────────────────────── */
.aia-plan-item__btn--move {
    color: var(--aia-text-muted);
    border-color: transparent;
    background: transparent;
}

.aia-plan-item__btn--move:hover {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
}

/* ── REORDER BUTTONS ────────────────────────────────────────────────────────── */
.aia-plan-item__btn--reorder {
    color: var(--aia-text-muted);
    border-color: transparent;
    background: transparent;
}

.aia-plan-item__btn--reorder:hover:not(:disabled) {
    color: var(--aia-text);
    background: rgba(0, 0, 0, 0.06);
    border-color: var(--aia-border);
}

.aia-plan-item__btn--reorder:disabled {
    opacity: 0.2;
    cursor: default;
}

/* ── MOVE DIALOG (Déplacer vers...) ─────────────────────────────────────────── */
.aia-move-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.aia-move-dialog {
    background: var(--aia-bg);
    border: 1px solid var(--aia-border);
    border-radius: var(--aia-radius);
    box-shadow: var(--aia-shadow-lg);
    min-width: 260px;
    max-width: 340px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.aia-move-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--aia-border);
}

.aia-move-dialog__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--aia-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-move-dialog__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--aia-text-muted);
    font-size: 14px;
    padding: 2px;
    border-radius: 4px;
}

.aia-move-dialog__close:hover {
    background: var(--aia-red-light);
    color: var(--aia-red);
}

.aia-move-dialog__list {
    overflow-y: auto;
    padding: 6px 0;
}

.aia-move-dialog__option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--aia-font);
    font-size: 13px;
    color: var(--aia-text);
    text-align: left;
    transition: background 0.1s ease;
}

.aia-move-dialog__option:hover {
    background: rgba(124, 58, 237, 0.08);
}

.aia-move-dialog__folder {
    font-size: 14px;
}

.aia-move-dialog__empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--aia-text-muted);
}

/* ── SUCCESS DETAILS ────────────────────────────────────────────────────────── */
.aia-success-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aia-success-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--aia-text);
    line-height: 1.45;
}

.aia-success-detail svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.aia-success-meta {
    font-size: 11.5px;
    color: var(--aia-text-muted);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTEXT PILLS
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-context-pills {
    display: flex;
    gap: 6px;
    padding: 6px 16px;
    border-top: 1px solid var(--aia-border);
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

.aia-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--aia-green-light);
    color: var(--aia-green);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}

.aia-pill__label {
    color: var(--aia-text-muted);
    font-weight: 400;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.aia-pill__value {
    color: var(--aia-green);
    font-weight: 600;
}

.aia-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--aia-text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    margin-left: 1px;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.aia-pill__remove:hover {
    background: rgba(8, 120, 27, 0.15);
    color: var(--aia-green);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INPUT BAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-input-bar {
    padding: 12px 16px 10px;
    border-top: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aia-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--aia-border);
    border-radius: 24px;
    background: var(--aia-bg);
    transition: border-color 0.15s ease;
}

.aia-input-wrapper:focus-within {
    border-color: var(--aia-green);
    box-shadow: 0 0 0 3px rgba(8, 120, 27, 0.08);
}

.aia-input-icon {
    color: var(--aia-text-muted);
    flex-shrink: 0;
}

.aia-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-family: var(--aia-font);
    color: var(--aia-text);
    padding: 2px 0;
}

.aia-input::placeholder {
    color: var(--aia-text-muted);
}

.aia-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--aia-green-solid);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.aia-send-btn:hover:not(:disabled) {
    background: var(--aia-green-solid-hover);
}

.aia-send-btn--disabled,
.aia-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.aia-disclaimer {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--aia-text-muted);
    text-align: center;
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ATTACHMENT BUTTON & STRIP
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--aia-text-muted);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}

.aia-attach-btn:hover {
    color: var(--aia-green);
    background: rgba(8, 120, 27, 0.08);
}

.aia-attachments-strip {
    display: flex;
    gap: 8px;
    padding: 0 4px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.aia-attachment-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aia-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aia-msg-attachments-strip {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.aia-msg-attachments-strip .aia-attachment-thumb {
    width: 72px;
    height: 72px;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.aia-msg-attachments-strip .aia-attachment-file-icon {
    background: rgba(255, 255, 255, 0.96);
}

.aia-msg-attachments-strip .aia-attachment-file-name {
    max-width: 62px;
    color: var(--aia-text);
}

/* Hover overlay with action buttons (same pattern as Image.razor) */
.aia-attachment-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 1;
}

.aia-attachment-thumb:hover .aia-attachment-overlay {
    opacity: 1;
}

.aia-attachment-thumb:focus-within .aia-attachment-overlay {
    opacity: 1;
}

.aia-attachment-action {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--aia-text, #1e1e1e);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.7rem;
    padding: 0;
    text-decoration: none;
}

.aia-attachment-action:hover {
    background: var(--aia-green-solid);
    color: #fff;
}

.aia-attachment-action--danger:hover {
    /* Issue 281 — remplissage plein sous du blanc : le jumeau `-solid`. */
    background: var(--aia-red-solid);
    color: #fff;
}

/* Attachment error toast */
.aia-attachment-error {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 6px;
    font-size: 0.78rem;
    /* Issue 281 — `--aia-danger` est un jeton fantôme de plus : son repli
       #dc3545 tombait à ~3,9:1 sur le tiroir sombre. */
    color: var(--aia-red);
    margin-bottom: 4px;
}

.aia-attachment-error__dismiss {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--aia-red);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}

/* PDF conversion indicator */
.aia-attachment-converting {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--aia-text-muted);
    font-size: 0.8rem;
    animation: aia-pulse 1.5s ease-in-out infinite;
}

.aia-attachment-converting i {
    font-size: 1.2rem;
    color: var(--aia-green);
}

@keyframes aia-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* File icon for text attachments in the attachment strip */
.aia-attachment-file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* Issue 281 — `var(--aia-surface)` sans repli : le jeton n'existe pas, la
       déclaration était invalide et le fond restait transparent. Écrit tel quel,
       le rendu ne bouge dans aucun des deux thèmes, et le fantôme disparaît. */
    background: transparent;
    gap: 2px;
}

.aia-attachment-file-icon i {
    font-size: 1.3rem;
    color: var(--aia-green);
}

.aia-attachment-file-name {
    font-size: 0.55rem;
    color: var(--aia-text-muted);
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 56px;
    padding: 0 2px;
}

/* Text file badge in message history */
.aia-msg-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(8, 120, 27, 0.1);
    border: 1px solid rgba(8, 120, 27, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--aia-text);
}

.aia-msg-file-badge i {
    color: var(--aia-green);
}

/* Images in sent user messages — clickable */
.aia-msg-image {
    transition: opacity 0.15s ease;
}

.aia-msg-image:hover {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   IMAGE PREVIEW LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aia-lightbox-in 0.2s ease;
    cursor: pointer;
}

@keyframes aia-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.aia-lightbox__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

.aia-lightbox__content img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.aia-lightbox__caption {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    text-align: center;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.aia-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Images in sent user messages */
.aia-msg-images {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.aia-msg-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1098;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: var(--aia-green-solid);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(8, 120, 27, 0.35);
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, right var(--aia-transition);
}

.aia-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(8, 120, 27, 0.45);
}

.aia-fab:active {
    transform: scale(0.97);
}

.aia-fab--hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root {
        --aia-sidebar-w: 100vw;
    }

    .aia-fab {
        top: auto;
        bottom: 16px;
        right: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .aia-sidebar,
    .aia-fab,
    .aia-msg,
    .aia-typing span {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD SHELL — Header Right Slot
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-card__header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RISK BADGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-risk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.aia-risk svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.aia-risk--readonly {
    background: var(--aia-blue-light);
    color: var(--aia-blue);
}

.aia-risk--safe {
    background: var(--aia-green-light);
    color: var(--aia-green);
}

.aia-risk--reversible {
    background: var(--aia-green-light);
    color: var(--aia-green-dark);
    border: 1px solid var(--aia-green);
}

.aia-risk--destructive {
    background: var(--aia-orange-light);
    color: var(--aia-red);
    border: 1px solid var(--aia-orange-solid);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXECUTION CARD — Executing Spinner State
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-card--executing {
    border-color: var(--aia-border);
    background: var(--aia-bg-surface);
}

.aia-exec-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aia-exec-spinner__ring {
    width: 22px;
    height: 22px;
    border: 3px solid var(--aia-border);
    border-top-color: var(--aia-green);
    border-radius: 50%;
    animation: aia-spin 0.8s linear infinite;
}

@keyframes aia-spin {
    to { transform: rotate(360deg); }
}

.aia-exec-spinner__label {
    font-size: 0.85rem;
    color: var(--aia-text-muted);
}

.aia-exec-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.aia-exec-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 2px 0 10px;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--aia-text-muted);
}

.aia-exec-meter__track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--aia-bg-muted);
    border: 1px solid var(--aia-border);
}

.aia-exec-meter__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--aia-green-solid);
    transition: width 160ms ease;
}

.aia-exec-progress__step {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 20px;
    font-size: 0.8rem;
    color: var(--aia-text-muted);
}

.aia-exec-progress__step span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aia-exec-progress__step--done {
    color: var(--aia-green);
}

.aia-exec-progress__dot {
    width: 7px;
    height: 7px;
    margin-left: 3px;
    border-radius: 999px;
    background: var(--aia-border-strong, var(--aia-border));
}

.aia-exec-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--aia-text-muted);
}

.aia-exec-step svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.aia-exec-step--done {
    color: var(--aia-green);
}

.aia-exec-step--pending {
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNDO TOAST
   ═══════════════════════════════════════════════════════════════════════════════ */
.aia-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--aia-text, #1a1a1a);
    color: #fff;
    border-radius: var(--aia-radius-sm);
    box-shadow: var(--aia-shadow);
    font-size: 0.85rem;
    animation: aia-toast-in 0.25s ease-out;
    overflow: hidden;
}

.aia-undo-toast--exit {
    animation: aia-toast-out 0.2s ease-in forwards;
}

@keyframes aia-toast-in {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes aia-toast-out {
    from { transform: translateX(-50%) translateY(0); opacity: 1; }
    to   { transform: translateX(-50%) translateY(20px); opacity: 0; }
}

.aia-undo-toast__message {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aia-undo-toast__undo-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--aia-green-light);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.aia-undo-toast__undo-btn:hover {
    background: rgba(255,255,255,0.1);
}

.aia-undo-toast__close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.aia-undo-toast__close:hover {
    color: #fff;
}

.aia-undo-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--aia-green-solid);
    animation: aia-toast-progress var(--toast-duration, 5s) linear forwards;
}

@keyframes aia-toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI EXPANDED PANEL — Full-screen overlay with sessions sidebar + chat replay
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Navbar button accent ────────────────────────────────────────────────────── */
.topbar-btn-ai svg {
    color: var(--aia-green);
}
.topbar-btn-ai:hover svg {
    color: var(--aia-green-hover);
}

/* ── Overlay backdrop ────────────────────────────────────────────────────────── */
.aix-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 24px;
    animation: aix-fade-in 0.2s ease-out;
}

@keyframes aix-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Container (sessions + chat) ─────────────────────────────────────────────── */
.aix-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background: var(--aia-bg);
    border-radius: var(--aia-radius);
    box-shadow: var(--aia-shadow);
    overflow: hidden;
    animation: aix-scale-in 0.2s ease-out;
}

@keyframes aix-scale-in {
    from { transform: scale(0.97); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Sessions sidebar ────────────────────────────────────────────────────────── */
.aix-sessions {
    width: 280px;
    min-width: 280px;
    background: var(--aia-bg-surface);
    border-right: 1px solid var(--aia-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aix-sessions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--aia-border);
}

.aix-sessions__title {
    font-family: var(--aia-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aia-text);
    margin: 0;
}

.aix-sessions__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--aia-radius-sm);
    background: transparent;
    color: var(--aia-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.aix-sessions__close:hover {
    background: var(--aia-border);
    color: var(--aia-text);
}

/* ── New session button ──────────────────────────────────────────────────────── */
.aix-session-new {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 12px 8px;
    padding: 10px 14px;
    border: 1px dashed var(--aia-border);
    border-radius: var(--aia-radius-sm);
    background: var(--aia-bg);
    color: var(--aia-green);
    font-family: var(--aia-font);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.aix-session-new:hover {
    border-color: var(--aia-green);
    background: var(--aia-green-light);
}

/* ── Session list ────────────────────────────────────────────────────────────── */
.aix-sessions__list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.aix-sessions__group-label {
    padding: 10px 16px 4px;
    font-family: var(--aia-font);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aia-text-muted);
}

.aix-session-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--aia-font);
}

.aix-session-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.aix-session-item--active {
    background: var(--aia-green-light);
}

.aix-session-item--active:hover {
    background: var(--aia-green-light);
}

.aix-session-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--aia-radius-sm);
    background: var(--aia-bg);
    border: 1px solid var(--aia-border);
    flex-shrink: 0;
}

.aix-session-item--active .aix-session-item__icon {
    background: var(--aia-green-solid);
    border-color: var(--aia-green);
    color: #fff;
}

.aix-session-item__info {
    flex: 1;
    min-width: 0;
}

.aix-session-item__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--aia-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aix-session-item__meta {
    font-size: 0.75rem;
    color: var(--aia-text-muted);
    margin-top: 1px;
}

/* ── Chat replay area ────────────────────────────────────────────────────────── */
.aix-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--aia-bg);
}

.aix-chat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aia-border);
}

.aix-chat__header-title {
    font-family: var(--aia-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--aia-text);
}

.aix-chat__header-date {
    font-family: var(--aia-font);
    font-size: 0.8rem;
    color: var(--aia-text-muted);
}

/* ── Chat messages ───────────────────────────────────────────────────────────── */
.aix-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aix-chat__msg {
    display: flex;
    gap: 10px;
    max-width: 80%;
}

.aix-chat__msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.aix-chat__msg--assistant {
    align-self: flex-start;
}

.aix-chat__msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aix-chat__msg--user .aix-chat__msg-avatar {
    background: var(--aia-green-solid);
    color: #fff;
}

.aix-chat__msg--assistant .aix-chat__msg-avatar {
    background: var(--aia-bg-surface);
    border: 1px solid var(--aia-border);
    color: var(--aia-green);
}

.aix-chat__msg-bubble {
    padding: 10px 14px;
    border-radius: var(--aia-radius-bubble);
    font-family: var(--aia-font);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--aia-text);
    word-wrap: break-word;
}

.aix-chat__msg--user .aix-chat__msg-bubble {
    background: var(--aia-green-solid);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.aix-chat__msg--assistant .aix-chat__msg-bubble {
    background: var(--aia-bg-surface);
    border: 1px solid var(--aia-border);
    border-bottom-left-radius: 4px;
}

.aix-chat__msg-time {
    font-size: 0.7rem;
    color: var(--aia-text-muted);
    margin-top: 4px;
    text-align: right;
}

.aix-chat__msg--assistant .aix-chat__msg-time {
    text-align: left;
}

/* ── Empty & loading states ──────────────────────────────────────────────────── */
.aix-chat__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--aia-text-muted);
    font-family: var(--aia-font);
}

.aix-chat__empty svg {
    color: var(--aia-green);
    opacity: 0.4;
}

.aix-chat__empty-text {
    font-size: 0.9rem;
}

.aix-chat__empty-hint {
    font-size: 0.8rem;
    opacity: 0.7;
}

.aix-chat__loading,
.aix-sessions__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--aia-text-muted);
    font-family: var(--aia-font);
    font-size: 0.85rem;
}

.aix-sessions__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--aia-text-muted);
    font-family: var(--aia-font);
    font-size: 0.85rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .aix-overlay {
        padding: 0;
    }
    .aix-container {
        border-radius: 0;
        flex-direction: column;
    }
    .aix-sessions {
        width: 100%;
        min-width: unset;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--aia-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AI SESSIONS PAGE — /ai-sessions
   Uses linkooc-master-detail layout. Only page-specific overrides below.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Session group date labels ───────────────────────────────────────────────── */
.linkooc-list-group-label {
    padding: 10px var(--linkooc-spacing-md, 1rem) 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--linkooc-text-muted, #6d6d6d);
}

/* ── Chat messages scroll area (inside linkooc-detail-content) ───────────────── */
.linkooc-detail-panel .aip-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* (Search styles removed — page now uses linkooc-search-box pattern) */

/* ═══════════════════════════════════════════════════════════════════════════════
   USAGE PANEL — Copilot-style usage quota dropdown
   ═══════════════════════════════════════════════════════════════════════════════ */

.aia-header__expand--active {
    color: var(--aia-green);
}

.aia-usage-panel {
    border-bottom: 1px solid var(--linkooc-border-subtle, #e5e5e5);
    background: var(--linkooc-bg-secondary, #fafafa);
    padding: 14px 16px;
    font-size: 13px;
    animation: aia-slide-down .15s ease-out;
}

@keyframes aia-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aia-usage-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.aia-usage-panel__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--linkooc-text-primary, #1a1a1a);
}

.aia-usage-panel__settings {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--linkooc-text-secondary, #666);
    border-radius: 4px;
    transition: background .15s;
}

.aia-usage-panel__settings:hover {
    background: var(--linkooc-hover-bg, rgba(0,0,0,.05));
}

.aia-usage-panel__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aia-usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--linkooc-border-subtle, #e9e9e9);
}

.aia-usage-row:last-of-type {
    border-bottom: none;
}

.aia-usage-row__label {
    color: var(--linkooc-text-primary, #1a1a1a);
    font-weight: 500;
}

.aia-usage-row__value {
    color: var(--linkooc-text-secondary, #666);
    font-weight: 600;
}

.aia-usage-bar {
    padding: 2px 0;
}

.aia-usage-bar__track {
    height: 6px;
    background: var(--linkooc-border-subtle, #e5e5e5);
    border-radius: 3px;
    overflow: hidden;
}

.aia-usage-bar__fill {
    height: 100%;
    background: var(--aia-green-solid);
    border-radius: 3px;
    transition: width .3s ease;
}

.aia-usage-bar__fill--warning {
    background: #e6a700;
}

.aia-usage-bar__fill--danger {
    background: #d93025;
}

.aia-usage-panel__detail {
    font-size: 12px;
    color: var(--linkooc-text-secondary, #888);
    text-align: center;
}

.aia-usage-panel__note {
    font-size: 12px;
    color: var(--linkooc-text-secondary, #888);
    margin-top: 4px;
    line-height: 1.4;
}

.aia-usage-panel__note--warning {
    color: #d93025;
    font-weight: 500;
}

.aia-usage-panel__loading {
    text-align: center;
    color: var(--linkooc-text-secondary, #888);
    padding: 8px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   R12G CIBLES TACTILES — la barre latérale de l'assistant (plan 436)

   Mesuré à 390x844, barre ouverte, le 2026-08-10 :

     .aia-pill__remove   « x »                      14 x 14   ← la plus petite
     .aia-header__expand « Nouvelle session »       32 x 32       cible mesurée
     .aia-header__expand « [DEV] Inject mock plan » 32 x 32       de tout le
     .aia-header__expand « Historique des sessions »32 x 32       back-office
     .aia-header__expand « Ouvrir en pleine page »  32 x 32
     .aia-header__close  « Fermer »                 32 x 32
     .aia-send-btn       « Envoyer »                32 x 32
     .aia-attach-btn     « Joindre un fichier »     32 x 32

   Les passes 399, 402 et 420 ne l'ont jamais couverte : les audits la notaient
   « chrome partagé, hors périmètre » sans jamais ouvrir de plan.

   L'<input type="file"> de 1x1 caché DANS `.aia-attach-btn` n'est pas un défaut
   mais le motif habituel de l'entrée fichier masquée derrière un bouton stylé.
   C'est le bouton visible qui est floorée ici — l'input est laissé tel quel.

   Seule la SURFACE grandit. Aucun `font-size`, aucune taille de <svg> ni de
   glyphe `bi-*` n'est touchée : le constat porte sur la zone de tap.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Les boutons carrés à 32x32 ───────────────────────────────────────
       `width`/`height` sont déclarés en dur à 32 dans les règles de base, donc
       un `min-*` seul ne suffirait pas : il faut redéclarer les deux axes.
       `flex-shrink: 0` empêche l'en-tête, qui est un flex, de les recomprimer
       sous 44 quand le titre est long.
       Les variantes `:hover` sont listées parce qu'un tap fige `:hover` sur
       écran tactile ; elles ne redéclarent que des couleurs, mais l'oubli est
       exactement le piège que le plan 420 a documenté. */
    .aia-header__expand,
    .aia-header__expand:hover,
    .aia-header__close,
    .aia-header__close:hover,
    .aia-send-btn,
    .aia-send-btn:hover:not(:disabled),
    .aia-attach-btn,
    .aia-attach-btn:hover {
        box-sizing: border-box;
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        flex-shrink: 0;
    }

    /* ── L'en-tête doit tenir dans 390 avec tous ses boutons ──────────────
       Sous 480px `--aia-sidebar-w` vaut 100vw, soit 390 : moins les 2 x 20px de
       padding de `.aia-header`, il reste 350 de large utile.

       En production l'en-tête porte 4 boutons (Nouvelle session, Historique,
       Plein écran, Fermer) : 4 x 44 + 3 x 2 de gouttière = 182. Le bloc de
       gauche (pastille 36 + gouttière 12 + titre et statut) prend le reste.
       En développement un 5e bouton apparaît ([DEV] Inject mock plan) et la
       somme passe à 226 : c'est le cas qui débordait.

       La réponse N'EST PAS de replier des boutons dans un ⋮ — aucun ne doit
       disparaître, et un ⋮ serait un 5e bouton de plus. C'est de rendre le
       bloc de GAUCHE compressible : `min-width: 0` débloque le rétrécissement
       d'un enfant flex (sa valeur initiale `auto` le fige à la largeur du
       texte), le titre s'ellipse, et la rangée de boutons — `flex-shrink: 0` —
       garde ses 5 x 44. Aucune commande n'est retirée, masquée ni déplacée. */
    .aia-header__left {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .aia-header__info {
        min-width: 0;
    }

    .aia-header__title,
    .aia-header__status {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .aia-header__actions {
        flex-shrink: 0;
    }

    /* ── La croix d'une pastille de contexte ──────────────────────────────
       14x14 DANS une pastille de 20 de haut : la grossir à 44 ferait éclater la
       rangée de pastilles. Même discipline que `.k-input .k-clear-value`
       (mobile.css:1502-1515) : une surcouche transparente étend la zone de tap,
       la pastille et le glyphe ne bougent pas d'un pixel.

       `position: relative` doit être posé ici — la règle de base ne le déclare
       pas — et la surcouche fait 2.75rem POSÉS, centrés par translation, plutôt
       qu'un `inset` négatif : le bloc conteneur d'un enfant absolu est la boîte
       de PADDING, donc un `inset` calculé à la main se trompe dès que le thème
       ajoute une bordure. C'est exactement le piège qui a donné 42 au lieu de
       44 sur `.k-checkbox` (mobile.css, plan 436).

       La surcouche déborde de la pastille : `.aia-context-pills` a 6px de
       padding vertical et `flex-wrap`, donc deux croix de deux pastilles
       voisines sur la même ligne restent séparées par le libellé de la
       pastille suivante (les pastilles font au minimum 60 de large). Deux
       lignes de pastilles sont espacées de la hauteur de pastille + gouttière ;
       si un chevauchement apparaissait, c'est la dernière croix touchée qui
       gagne — jamais une commande inaccessible. */
    .aia-pill__remove {
        position: relative;
    }

    .aia-pill__remove::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
        display: block;
        background: transparent;
        /* Coins CARRÉS : le test de pointage respecte le border-radius, donc un
           cercle de 44 ne ferait 44 que sur les deux axes et rognerait les
           coins. La surcouche est transparente — le rayon n'a aucun effet
           visible, seulement un effet sur la cible. */
        border-radius: 0;
    }

    /* ── Le lien « Ouvrir le menu » d'une carte « Action effectuée » ───────
       Mesuré 136 x 23 (plan 487, constat F9) : la seule cible sous le plancher
       de toute la vue détail de `/admin/ai-assistant-logs`.

       Le lien est EN LIGNE dans le pied d'une carte compacte, à côté de
       « Annuler » : lui poser un `min-height: 2.75rem` grandirait la carte et
       décalerait tout le rejeu de conversation. Même surcouche transparente que
       `.aia-pill__remove` ci-dessus — la zone de tap fait 44 de haut, le texte,
       le picto SVG et la hauteur de la carte ne bougent pas d'un pixel.

       Le lien fait déjà 136 de large : seul l'axe vertical manquait, d'où
       `left: 0; right: 0` plutôt qu'une largeur posée. La surcouche déborde de
       6 px au-dessus et au-dessous du lien, sur le corps de la carte — du texte
       non interactif : aucune commande n'est recouverte. */
    .aia-link--open {
        position: relative;
    }

    .aia-link--open::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2.75rem;
        transform: translateY(-50%);
        display: block;
        background: transparent;
        border-radius: 0;
    }
}

/* Plan 970 — la carte « titre, phrase, Appliquer / Annuler » (ProposalCard). Plusieurs plats : un bloc chacun. */
.aia-proposal__step {
    display: flex;
    flex-direction: column;
    gap: 4px;
}