/* Feuille de style de l'agent CarréPOS.
   Les couleurs viennent de la palette MudBlazor (--mud-palette-*) : le thème clair/sombre de la
   CarréWebApp s'applique donc sans doublon. Les jetons --ag-* ci-dessous sont les seuls utilisés. */
:root {
    --ag-font: "Segoe UI", Roboto, system-ui, sans-serif;
    --ag-mono: Consolas, "Cascadia Mono", monospace;
    --ag-width: 64rem;
    --ag-radius: 12px;
    --ag-accent: var(--mud-palette-primary, #2270c8);
    --ag-accent-dark: var(--mud-palette-primary-darken, #1a58a0);
    /* Texte posé sur l'accent : blanc en clair, noir en sombre (l'accent y est un gris perle). */
    --ag-on-accent: var(--mud-palette-primary-text, #ffffff);
    --ag-accent-soft: rgba(34, 112, 200, 0.10);
    --ag-bg: var(--mud-palette-background, #fbfcfe);
    --ag-card: var(--mud-palette-surface, #ffffff);
    --ag-border: var(--mud-palette-lines-default, #dfe3ea);
    --ag-ink: var(--mud-palette-text-primary, #1c2430);
    --ag-ink-soft: var(--mud-palette-text-secondary, #5b6472);
    --ag-shadow: 0 1px 2px rgba(20, 22, 30, 0.06), 0 6px 18px rgba(20, 22, 30, 0.06);
    --ag-up: #1baf7a;
    --ag-down: #eb6834;
    --ag-mark: var(--mud-palette-text-primary, #2f3a4a);
    --ag-mark-soft: var(--mud-palette-action-default-hover, #eceef1);
    --ag-warn-border: #d9c48a;
    --ag-warn-strong: #c99a2e;
    --ag-warn-bg: rgba(255, 250, 240, 0.9);
    --ag-warn-ink: #8a6a12;
    --ag-warn-text: #3c3520;
    --ag-switch: #cdd6e0;
    --ag-accent-glow: rgba(34, 112, 200, 0.28);
    --ag-ok-bg: #eaf8f1; --ag-ok-border: #b7e2cd; --ag-ok-ink: #10603f;
    --ag-ko-bg: #fdeeec; --ag-ko-border: #f2c3bc; --ag-ko-ink: #8c2c1e;
}

/* ============ Taille du texte ============
   Toute cette feuille est écrite en rem : la taille de base de la page suffit donc à agrandir
   l'interface ENTIÈRE — texte, boutons, hauteurs de champ, espacements — sans qu'aucune règle
   ci-dessous ait à le savoir. C'est le seul endroit à toucher pour l'accessibilité.
   L'attribut est posé par le script de App.razor, avant le premier rendu. */
html { font-size: 100%; }
html[data-ag-text="grand"] { font-size: 118%; }
html[data-ag-text="tresgrand"] { font-size: 138%; }

/* ============ Écran d'appel (mode conversation) ============
   Conçu pour être compris sans être lu, et manœuvré sans être visé : une pastille qui dit l'état,
   trois mots, et un bouton de raccroché large. Rien d'autre — au volant, tout le reste est du bruit. */
.call {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: var(--ag-bg);
    text-align: center;
}

.call-orb {
    display: grid;
    place-items: center;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: var(--ag-accent-soft);
}

.call-orb > span {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--ag-accent);
}

/* Trois états, trois rythmes : le battement lent de l'écoute, la rotation du travail, l'onde de la
   parole. Reconnaissables du coin de l'œil, sans lire l'état écrit dessous. */
.call-orb.ecoute > span { animation: ag-call-listen 2s ease-in-out infinite; }
.call-orb.cherche > span { animation: ag-call-work 1.1s linear infinite; }
.call-orb.parle > span { animation: ag-call-talk 0.9s ease-in-out infinite; }

@keyframes ag-call-listen { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ag-call-work { 0% { transform: scale(0.86); } 50% { transform: scale(1); } 100% { transform: scale(0.86); } }
@keyframes ag-call-talk { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.16); } 60% { transform: scale(0.94); } }

.call-who { margin: 0; font-size: 1.05rem; color: var(--ag-ink-soft); }
.call-state { margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--ag-ink); }
.call-heard { margin: 0; max-width: 34rem; font-size: 1.05rem; color: var(--ag-ink-soft); font-style: italic; }
.call-trouble { margin: 0; max-width: 34rem; font-size: 1rem; color: var(--ag-warn-ink); }

.call-hangup {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    margin-top: 1rem;
    border: 0;
    border-radius: 50%;
    background: #d93025;
    color: #fff;
    cursor: pointer;
}

.call-hangup:hover { background: #b5271d; }
.call-hint { margin: 0; font-size: 0.9rem; color: var(--ag-ink-soft); }

.call-show {
    border: 1px solid var(--ag-border);
    border-radius: 999px;
    background: transparent;
    color: var(--ag-ink-soft);
    font: inherit;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
}

/* Rappel d'appel en cours, quand l'écran d'appel est replié. */
.call-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--ag-border);
    background: var(--ag-accent-soft);
    color: var(--ag-accent);
    font: inherit;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.call-back-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--ag-accent);
    animation: ag-presence-beat 1.4s ease-in-out infinite;
}

@keyframes ag-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ag-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 112, 200, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(34, 112, 200, 0); } }
@keyframes ag-presence-beat { 50% { opacity: 0.35; } }

/* ============ En-tête ============ */
/* Le titre voyage dans la zone gauche de PageHeader, contre le bouton de retour (voir
   AgentHeader.razor). Même graisse et même casse que le titre centré de la RCL, pour que
   l'agent ne détonne pas à côté des autres CarréWebApps. */
.agent-titre { margin-left: 0.5rem; font-family: var(--ag-font); font-weight: 700; text-transform: uppercase;
               letter-spacing: 2px; font-size: clamp(14px, 2.5vw, 24px); white-space: nowrap; }
/* Le titre AGENT repart à zéro quand on le presse : la marque dit qu’il se presse. */
.agent-titre-marque { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em;
                      margin-left: 0.45rem; border: 1px solid currentColor; border-radius: 50%; opacity: 0.7;
                      font-size: 0.62em; font-weight: 400; letter-spacing: 0; vertical-align: 0.15em; }

/* ============ Corps de page ============ */
.agent-page {
    flex: 1;
    overflow: auto;
    padding: 0.8rem 1.2rem 1rem;
    font-family: var(--ag-font);
    color: var(--ag-ink);
    background: var(--ag-bg);
}

/* Bandeau d'identité du commerçant, entre l'en-tête de page et le fil. */
.merchant-strip { margin: 0; padding: 0.2rem 1.2rem 0; font-family: var(--ag-font); font-size: 0.8rem; text-align: center; color: var(--ag-ink-soft); background: var(--ag-bg); }
.merchant-strip strong { color: var(--ag-ink); text-transform: uppercase; letter-spacing: 0.04em; }

.agent-page.agent-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.agent-page h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
/* Le routeur donne le focus au titre à chaque navigation (FocusOnNavigate) : utile aux lecteurs
   d'écran, mais le cadre de focus n'a rien à faire autour d'un titre. */
.agent-page h1:focus, .agent-page h1:focus-visible { outline: none; }
/* :where() n'est pas décoratif : il ramène ce sélecteur à la spécificité d'un simple « button »
   (0,0,1). Sans lui, « .agent-page button » (0,1,1) battait toutes les classes de boutons (0,1,0)
   et son color: inherit rendait le texte sombre sur les fonds sombres — .btn-ia, .speak-stop,
   .voice-btn… illisibles partout. */
:where(.agent-page) button, :where(.agent-page) select, :where(.agent-page) input, :where(.agent-page) textarea { font-family: var(--ag-font); color: inherit; }
.agent-page a { color: var(--ag-accent-dark); }

.btn-classic, .btn-ia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 0.45rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-classic { border: 1px solid var(--ag-border); background: var(--ag-card); color: var(--ag-ink); box-shadow: var(--ag-shadow); }
.btn-classic:hover { transform: translateY(-1px); border-color: var(--ag-accent); color: var(--ag-accent-dark); }
.btn-ia { border: none; background: linear-gradient(135deg, var(--ag-accent) 0%, var(--ag-accent-dark) 100%); color: var(--ag-on-accent); box-shadow: 0 6px 16px rgba(34, 112, 200, 0.35); }
.btn-ia:hover { transform: translateY(-1px); }
.btn-classic:disabled, .btn-ia:disabled { opacity: 0.55; transform: none; cursor: default; }

/* ============ Chat ============ */
.home-search { width: 100%; max-width: var(--ag-width); min-height: 100%; display: flex; flex-direction: column; align-items: center; }
.home-search.chatting { padding-top: 0.6rem; }

.home-greeting {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin: 2.5rem 0 1.4rem;
    line-height: 1.25;
}

.home-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    max-width: var(--ag-width);
    margin: 0 0 1.1rem;
}

.chip {
    padding: 0.5rem 1rem;
    text-align: left;
    border: 1px solid var(--ag-border);
    border-radius: 999px;
    background: var(--ag-card);
    color: var(--ag-ink-soft);
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.chip:hover { border-color: var(--ag-accent); color: var(--ag-accent); box-shadow: 0 2px 8px rgba(34, 112, 200, 0.12); }
.chip-action { display: inline-flex; align-items: center; gap: 0.35rem; border-color: var(--ag-accent); color: var(--ag-accent); background: var(--ag-accent-soft); }
.chip-action:disabled { opacity: 0.5; cursor: default; }
.chip-autres { border-style: dashed; font-size: 0.8rem; padding: 0.35rem 0.85rem; }
.chip-suivi { border-color: var(--ag-accent); color: var(--ag-accent); font-weight: 600; }
.choix-chips { flex-direction: row; flex-wrap: wrap; margin: -0.4rem 0 0.2rem 0.3rem; }

.home-status { font-size: 0.8rem; line-height: 1.35; color: var(--ag-ink-soft); margin: 0.3rem 0 0.4rem; text-align: center; }
.status-ko { color: #d93a2b; font-size: 0.7rem; vertical-align: 1px; }
.home-busy { color: var(--ag-accent-dark); font-weight: 600; animation: ag-fade-up 0.3s ease; }

.chat-flow {
    width: 100%;
    max-width: var(--ag-width);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0.4rem 0 1.5rem;
    text-align: left;
}

.chat-user {
    background: linear-gradient(135deg, var(--ag-accent) 0%, var(--ag-accent-dark) 100%);
    color: var(--ag-on-accent);
    border-radius: 16px 16px 5px 16px;
    padding: 0.7rem 1.15rem;
    margin: 0.4rem 0 0.4rem auto;
    max-width: 80%;
    width: fit-content;
    white-space: pre-wrap;
    box-shadow: 0 6px 16px var(--ag-accent-glow);
}

.chat-assistant {
    background: var(--ag-card);
    border: 1px solid var(--ag-border);
    border-radius: 16px 16px 16px 5px;
    padding: 0.7rem 1.15rem;
    margin: 0.4rem auto 0.4rem 0;
    max-width: 90%;
    width: fit-content;
    box-shadow: var(--ag-shadow);
}

.chat-assistant .markdown { max-width: 100%; }
.chat-busy { color: var(--ag-ink-soft); font-style: italic; }
.chat-tools { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.5rem; }
.chat-image { display: block; max-height: 180px; max-width: 280px; border-radius: 10px; margin-bottom: 0.4rem; }
.chat-image-gone { display: block; font-size: 0.78rem; font-style: italic; opacity: 0.7; margin-bottom: 0.3rem; }
.answer-cached { font-size: 0.82rem; color: var(--ag-ink-soft); margin: 0; }
.answer-model { font-size: 0.74rem; color: var(--ag-ink-soft); margin: -0.25rem auto 0.5rem 0.6rem; letter-spacing: 0.02em; }
.key-btn.missing { border-color: var(--ag-down); color: var(--ag-down); }

.listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--ag-border);
    border-radius: 999px;
    background: transparent;
    color: var(--ag-accent);
    font-size: 0.82rem;
    cursor: pointer;
}

.listen-btn:hover { background: var(--ag-accent-soft); }
.listen-btn.speaking { color: var(--ag-on-accent); background: var(--ag-accent); border-color: var(--ag-accent); }

/* Barre de saisie collée en bas de la zone de défilement. */
.composer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: auto;
    padding-top: 0.5rem;
    background: linear-gradient(to top, var(--ag-bg) 0%, var(--ag-bg) 86%, transparent 100%);
}

.chat-card {
    width: 100%;
    max-width: var(--ag-width);
    background: var(--ag-card);
    border: 1px solid var(--ag-border);
    border-radius: 22px;
    padding: 0.6rem 0.9rem 0.5rem;
    box-shadow: var(--ag-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-card:focus-within, .chat-card.drop-target { border-color: var(--ag-accent); box-shadow: 0 0 0 4px rgba(34, 112, 200, 0.14); }

.chat-card textarea {
    width: 100%;
    border: none;
    resize: none;
    overflow-y: auto;
    max-height: 200px;
    font-size: 1.02rem;
    line-height: 1.45;
    background: transparent;
    padding: 0.15rem 0.2rem 0.5rem;
}

.chat-card textarea:focus { outline: none; }
.chat-card-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.chat-card-spacer { flex: 1; }

.round-btn {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid var(--ag-border);
    border-radius: 50%;
    background: transparent;
    color: var(--ag-ink-soft);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.round-btn:hover { border-color: var(--ag-accent); color: var(--ag-accent); }
/* Cible cochée dans une liste de choix (caisses d'un message) : même bouton, état marqué. */
.action-resultats button.coche { border-color: var(--ag-accent); color: var(--ag-accent); background: var(--ag-accent-soft); }

/* « A / A+ / A++ » : la marque doit tenir dans le rond, les deux plus dans le palier le plus large. */
.text-btn { font-size: 0.82rem; font-weight: 700; letter-spacing: -0.03em; }
.photo-btn { display: none; }
@media (pointer: coarse) { .photo-btn { display: grid; } }

.model-select {
    border: 1px solid var(--ag-border);
    border-radius: 999px;
    background: var(--ag-card);
    color: var(--ag-ink-soft);
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
}

.voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ag-accent);
    cursor: pointer;
}

.voice-btn:hover { background: var(--ag-accent-soft); }
.voice-btn.active, .voice-btn.listening { color: var(--ag-on-accent); background: var(--ag-accent); animation: ag-mic-pulse 1.4s ease-out infinite; }

.voice-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; font-size: 0.88rem; color: var(--ag-ink-soft); }
.voice-switch input { display: none; }
.voice-switch .track { width: 34px; height: 19px; border-radius: 999px; background: var(--ag-switch); position: relative; flex: none; transition: background 0.15s ease; }
.voice-switch .thumb { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 22, 30, 0.25); transition: left 0.15s ease; }
.voice-switch input:checked + .track { background: var(--ag-accent); }
.voice-switch input:checked + .track .thumb { left: 17px; }
.voice-switch .voice-label { display: inline-flex; align-items: center; gap: 0.3rem; }

.image-preview { position: relative; margin-bottom: 0.7rem; width: fit-content; }
.image-preview img { max-height: 110px; max-width: 220px; border-radius: 10px; border: 1px solid var(--ag-border); }
.image-preview button { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--ag-accent-dark); color: var(--ag-on-accent); font-size: 0.7rem; cursor: pointer; }

.key-panel { width: 100%; max-width: var(--ag-width); margin-top: 0.8rem; padding: 0.9rem 1rem; border: 1px solid var(--ag-border); border-radius: 14px; background: var(--ag-card); text-align: left; }
.key-panel p { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--ag-ink-soft); }
.key-panel input { width: 100%; padding: 0.55rem 0.9rem; border: 1px solid var(--ag-border); border-radius: 10px; background: transparent; margin-bottom: 0.55rem; }
.key-panel > div { display: flex; gap: 0.6rem; }
.key-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; }
.key-row .key-name { min-width: 6rem; font-size: 0.85rem; }
.key-row input { flex: 1; margin: 0; }
.key-panel .key-message { color: var(--ag-down); font-weight: 600; }
.status-off { color: var(--ag-ink-soft); opacity: 0.6; }

/* ============ Geste, validation ============ */
.geste-bande {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    border: 1px solid var(--ag-warn-border);
    border-left: 3px solid var(--ag-warn-strong);
    border-radius: var(--ag-radius);
    background: var(--ag-warn-bg);
    color: var(--ag-warn-text);
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
}

.geste-titre { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--ag-warn-ink); }
.geste-aide { flex: 1; min-width: 12rem; }
.geste-quitter { border: 1px solid var(--ag-warn-border); background: var(--ag-card); color: var(--ag-warn-text); border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.8rem; cursor: pointer; }
.geste-quitter:hover { border-color: var(--ag-warn-strong); }

.validation {
    align-self: stretch;
    border: 1px solid var(--ag-warn-border);
    border-left: 3px solid var(--ag-warn-strong);
    border-radius: var(--ag-radius);
    background: var(--ag-warn-bg);
    color: var(--ag-warn-text);
    padding: 0.9rem 1.1rem 1rem;
}

.validation-titre { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ag-warn-ink); }
.validation-recap { margin: 0.45rem 0 0.3rem; font-size: 0.95rem; }
.validation-diff { margin: 0 0 0.8rem; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.validation-diff .avant { opacity: 0.7; text-decoration: line-through; }
.validation-diff .apres { font-weight: 700; }
.validation-boutons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.validation-boutons .btn-ia, .validation-boutons .btn-classic { padding: 0.45rem 1.2rem; font-size: 0.88rem; }
.validation-resultat { align-self: stretch; border-radius: var(--ag-radius); padding: 0.65rem 1rem; font-size: 0.9rem; }
.validation-resultat.ok { background: var(--ag-ok-bg); border: 1px solid var(--ag-ok-border); color: var(--ag-ok-ink); }
.validation-resultat.echec, .action-horsligne { background: var(--ag-ko-bg); border: 1px solid var(--ag-ko-border); color: var(--ag-ko-ink); }
.action-horsligne { margin: 0 0 1rem; padding: 0.7rem 0.95rem; border-radius: 0.6rem; font-size: 0.92rem; }

/* ============ Markdown ============ */
.markdown { max-width: 52rem; line-height: 1.55; }
.markdown h1 { font-size: 1.5rem; margin-top: 0; }
.markdown h2 { font-size: 1.22rem; font-weight: 700; border-bottom: 1px solid var(--ag-border); padding-bottom: 0.45rem; margin-top: 2rem; }
.markdown h3 { font-size: 1.02rem; font-weight: 700; margin-top: 1.5rem; }
.markdown a { color: var(--ag-accent-dark); text-decoration: none; border-bottom: 1px solid rgba(34, 112, 200, 0.3); }
.markdown a:hover { border-bottom-color: var(--ag-accent-dark); }
.markdown img { max-width: 100%; border-radius: var(--ag-radius); box-shadow: var(--ag-shadow); }
.markdown code { background: var(--ag-accent-soft); color: var(--ag-accent-dark); padding: 0.12rem 0.42rem; border-radius: 6px; font-family: var(--ag-mono); font-size: 0.84em; }
.markdown pre { background: #14314f; color: #e6edf5; border-radius: var(--ag-radius); padding: 1.05rem 1.25rem; overflow-x: auto; }
.markdown pre code { background: none; color: inherit; padding: 0; }
.markdown pre.mermaid { background: var(--ag-card); border: 1px solid var(--ag-border); color: inherit; }
.markdown blockquote { margin: 1.3rem 0; padding: 0.75rem 1.2rem; border-left: 3px solid var(--ag-accent); background: var(--ag-accent-soft); border-radius: 0 var(--ag-radius) var(--ag-radius) 0; }
.markdown blockquote p { margin: 0.3rem 0; }
.markdown table { border-collapse: separate; border-spacing: 0; margin: 1.2rem 0; display: block; overflow-x: auto; max-width: 100%; }
.markdown th, .markdown td { border-bottom: 1px solid var(--ag-border); padding: 0.55rem 0.95rem; text-align: left; }
.markdown thead th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ag-ink-soft); border-bottom: 2px solid var(--ag-border); }
.markdown tbody tr:last-child td { border-bottom: none; }
.markdown hr { border: none; border-top: 1px solid var(--ag-border); margin: 2rem 0; }

/* ============ Tableau de bord ============ */
.tdb { width: 100%; max-width: 74rem; margin: 0 auto; }
.tdb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ag-border); }
.tdb-head h1 { margin: 0; }
.tdb-caisse { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ag-ink-soft); }
.tdb-periodes { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding: 0.9rem 0 0.2rem; border-bottom: 1px solid var(--ag-border); margin-bottom: 1.6rem; }
/* Navigation d'une période à l'autre : deux flèches encadrant le nom de la période. */
.tdb-navigation { display: inline-flex; align-items: center; gap: 0.35rem; padding-bottom: 0.6rem; }
.tdb-fleche { width: 1.6rem; height: 1.6rem; border: 1px solid var(--ag-border); border-radius: 6px;
              background: var(--ag-card); color: var(--ag-accent); font-size: 1rem; line-height: 1; cursor: pointer; }
.tdb-fleche:hover:not(:disabled) { border-color: var(--ag-accent); }
.tdb-fleche:disabled { opacity: 0.35; cursor: default; }
.tdb-periode-titre { min-width: 11rem; text-align: center; font-size: 0.9rem; font-weight: 600; }
.tdb-periode { padding: 0 0 0.7rem; border: none; border-bottom: 2px solid transparent; background: none; color: var(--ag-ink-soft); font-size: 0.88rem; font-weight: 500; cursor: pointer; }
.tdb-periode:hover { color: var(--ag-ink); }
.tdb-periode.active { color: var(--ag-ink); font-weight: 600; border-bottom-color: var(--ag-ink); }
.tdb-periode:disabled { opacity: 0.45; cursor: default; }
.tdb-bornes { margin-left: auto; padding-bottom: 0.7rem; font-size: 0.8rem; color: var(--ag-ink-soft); font-variant-numeric: tabular-nums; }
.tdb-actualiser { padding: 0 0 0.7rem; border: none; background: none; color: var(--ag-ink-soft); font-size: 0.8rem; cursor: pointer; }
.tdb-actualiser:hover { color: var(--ag-ink); }
.tdb-actualiser:disabled { opacity: 0.45; cursor: default; }
.tdb-attente { color: var(--ag-ink-soft); font-size: 0.9rem; }
.tdb-limite { font-size: 0.8rem; color: var(--ag-ink-soft); margin: 0 0 1.4rem; }
.tdb-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--ag-border); font-size: 0.78rem; color: var(--ag-ink-soft); }
.tdb-fraicheur { margin-left: 0.35rem; }
.tdb-auto { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 1rem; }
.tdb-pastille { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #b9bec7; }
.tdb-pastille.vive { background: var(--ag-up); animation: ag-presence-beat 1.6s ease-in-out infinite; }

.tdb-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0; margin-bottom: 2.2rem; border: 1px solid var(--ag-border); border-radius: 10px; background: var(--ag-card); overflow: hidden; }
.tdb-tuile { padding: 1.1rem 1.2rem 1.2rem; border-right: 1px solid var(--ag-border); }
.tdb-tuile:last-child { border-right: none; }
.tdb-tuile-titre, .chart-titre > span:first-child, .tdb-tableau-titre, .analyse-controles label > span, .actions-categorie, .action-formulaire label > span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ag-ink-soft);
}
.tdb-tuile-valeur { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0.45rem 0 0.35rem; }
.tdb-compare { font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.tdb-compare.hausse { color: var(--ag-up); }
.tdb-compare.baisse { color: var(--ag-down); }

/* L'écart contre la période comparée, DANS la cellule, sous le chiffre : une colonne de plus
   obligeait à faire la soustraction de tête, ligne après ligne. */
.tdb-ecart { display: block; font-size: 0.72rem; font-weight: 400; white-space: nowrap; }
.tdb-ecart.hausse { color: var(--ag-up); }
.tdb-ecart.baisse { color: var(--ag-down); }
.tdb-compare.neutre { color: var(--ag-ink-soft); }
.tdb-precedent { color: var(--ag-ink-soft); margin-left: 0.35rem; }
.tdb-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1rem; }
@media (max-width: 60rem) { .tdb-tuile { border-right: none; border-bottom: 1px solid var(--ag-border); } }

.chart-card { background: var(--ag-card); border: 1px solid var(--ag-border); border-radius: 10px; padding: 1.1rem 1.2rem 1.2rem; }
.chart-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; margin-bottom: 1.1rem; }
.chart-total { font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-colonnes { display: flex; align-items: flex-end; gap: 3px; height: 9rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ag-border); overflow-x: auto; }
.chart-colonne { flex: 1; min-width: 1.1rem; display: flex; flex-direction: column; align-items: center; height: 100%; }
/* Une colonne porte une barre, ou deux quand une période de comparaison est fournie : la pleine
   pour la période lue, la creuse pour celle d'avant. Elles partagent la même échelle. */
.chart-futs { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; margin-top: auto; }
.chart-fut { width: 100%; max-width: 1.6rem; margin-top: auto; border-radius: 3px 3px 0 0; background: var(--ag-mark); }
.chart-colonne:hover .chart-fut { background: var(--ag-accent); }
.chart-fut-passe { background: transparent; border: 1px solid var(--ag-mark); border-bottom: none; opacity: 0.7; }
.chart-colonne:hover .chart-fut-passe { background: transparent; border-color: var(--ag-accent); }
.chart-abscisse { font-size: 0.66rem; color: var(--ag-ink-soft); margin-top: 0.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-echelle { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--ag-ink-soft); margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.chart-barres { display: flex; flex-direction: column; gap: 0.55rem; }
.chart-ligne { display: grid; grid-template-columns: 9rem 1fr 6rem; align-items: center; gap: 0.7rem; }
.chart-barres.compte .chart-ligne { grid-template-columns: 9rem 1fr 3.6rem 6rem; }
.chart-libelle { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-piste { height: 0.4rem; border-radius: 2px; background: var(--ag-mark-soft); overflow: hidden; }
.chart-remplissage { display: block; height: 100%; border-radius: 2px; background: var(--ag-mark); }
.chart-valeur { font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.chart-quantite { font-size: 0.75rem; text-align: right; color: var(--ag-ink-soft); font-variant-numeric: tabular-nums; }

.repart { margin-top: 0.55rem; }
.repart-piste { display: flex; height: 0.35rem; border-radius: 2px; overflow: hidden; background: var(--ag-mark-soft); gap: 2px; }
.repart-encaisse { background: var(--ag-up); }
.repart-ouvert { background: var(--ag-down); }
.repart-legende { display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; margin-top: 0.4rem; font-size: 0.72rem; color: var(--ag-ink-soft); font-variant-numeric: tabular-nums; }
.repart-puce { display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 1px; margin-right: 0.35rem; }
.repart-puce.encaisse { background: var(--ag-up); }
.repart-puce.ouvert { background: var(--ag-down); }

.tdb-tableau { margin-top: 1rem; background: var(--ag-card); border: 1px solid var(--ag-border); border-radius: 10px; padding: 1.1rem 1.2rem 0.6rem; overflow-x: auto; }
.tdb-tableau-titre { margin-bottom: 0.8rem; }
.tdb-tableau table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tdb-tableau th, .tdb-tableau td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--ag-border); }
.tdb-tableau th { font-size: 0.72rem; font-weight: 600; color: var(--ag-ink-soft); text-align: left; }
.tdb-tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tdb-tableau tbody tr:hover { background: var(--ag-mark-soft); }
.tdb-tableau tr.vide td { color: var(--ag-ink-soft); }
.tdb-tableau tfoot td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--ag-border); }
.tdb-tableau .tdb-actions { text-align: right; white-space: nowrap; }
.tdb-lien { padding: 0; margin-left: 1.1rem; border: none; background: none; color: var(--ag-ink-soft); font-size: 0.8rem; cursor: pointer; }
.tdb-lien:hover { color: var(--ag-ink); }
.tdb-lien:disabled { opacity: 0.45; cursor: default; }
/* La marge sépare deux liens ; devant le premier d'une cellule, elle décale la colonne pour rien. */
.tdb-actions .tdb-lien:first-child { margin-left: 0; }
/* Ce qui efface se lit avant d'être cliqué. */
.tdb-lien.danger { color: var(--ag-down); }
.tdb-lien.danger:hover { filter: brightness(1.2); }
/* Renommer sur place : le champ prend la place du nom, il ne doit pas déformer la ligne. La hauteur
   de cellule est posée ici, et ici seulement — les tableaux du tableau de bord n'ont pas de champ à
   loger et gardent leur rythme. « height » sur une cellule vaut minimum : une ligne qui déborde
   grandit encore. */
/* .saisie : le même tableau qu'on remplit au clavier, hors du contexte des suivis (console
   d'administration). Un seul jeu de règles pour les deux plutôt qu'une copie. */
.tdb-tableau.suivis td, .tdb-tableau.saisie td { height: 2.4rem; }
.tdb-tableau.suivis input, .tdb-tableau.saisie input, .tdb-tableau.saisie select { width: 100%; padding: 0.15rem 0.45rem; border: 1px solid var(--ag-border); border-radius: 7px; background: var(--ag-bg); font: inherit; }
.tdb-tableau.saisie .key-row { margin-top: 0.9rem; }
.tdb-tableau.saisie .key-row input, .tdb-tableau.saisie .key-row select { width: auto; }

/* ============ Analyse ============ */
.analyse-controles { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.analyse-controles label { display: flex; flex-direction: column; gap: 0.25rem; }
.analyse-controles select, .analyse-controles input { min-width: 11rem; padding: 0.4rem 0.6rem; border: 1px solid var(--ag-border); border-radius: 7px; background: var(--ag-card); font-size: 0.86rem; }
.analyse-filtre input { min-width: 18rem; }
.analyse-compte { float: right; font-weight: 500; text-transform: none; letter-spacing: 0; }
.analyse-actions { margin-top: 0.8rem; }
.analyse-actions .tdb-actualiser { padding: 0.4rem 0; }

/* ============ Actions ============ */
.actions-intro { margin: 0 0 0.9rem; color: var(--ag-ink-soft); }
.actions-categorie { margin: 0.9rem 0 0.4rem; }
.actions-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 0.3rem; align-items: start; }

/* Une action = une ligne : titre extensible, puis deux icônes. Ouverte, la carte reprend toute la
   largeur de la grille pour dérouler son formulaire. */
.action-carte { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 0.15rem;
                background: var(--ag-card); border: 1px solid var(--ag-border); border-radius: 8px; padding: 0.15rem 0.35rem; }
.action-carte.ouverte { border-color: var(--ag-accent); grid-column: 1 / -1; padding-bottom: 0.7rem; }
.action-titre { display: flex; align-items: center; gap: 0.4rem; min-width: 0; padding: 0.4rem 0.3rem; border: none;
                background: none; color: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: left; }
.action-titre > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-titre > svg { color: var(--ag-accent); flex-shrink: 0; }
.action-titre:hover:not(:disabled) { color: var(--ag-accent-dark); }
.action-icone { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
                border: none; background: none; color: var(--ag-accent); font-size: 0.8rem; cursor: pointer; border-radius: 6px; }
.action-icone:hover:not(:disabled) { background: var(--ag-border); }
.action-titre:disabled, .action-icone:disabled { opacity: 0.5; cursor: default; }
.action-chevron { color: var(--ag-accent); }
.action-aide { grid-column: 1 / -1; margin: 0.15rem 0.3rem 0; font-size: 0.8rem; color: var(--ag-ink-soft); }
.action-formulaire { grid-column: 1 / -1; margin-top: 0.7rem; padding: 0 0.3rem; display: flex; flex-direction: column; gap: 0.7rem; }
.action-formulaire label { display: flex; flex-direction: column; gap: 0.25rem; }
.action-formulaire input, .action-formulaire select { padding: 0.45rem 0.65rem; border: 1px solid var(--ag-border); border-radius: 7px; background: var(--ag-card); font-size: 0.88rem; }
.action-choisi { font-size: 0.82rem; font-weight: 600; color: var(--ag-accent-dark); text-transform: none; letter-spacing: 0; }
.action-resultats { display: flex; flex-direction: column; max-height: 12rem; overflow-y: auto; border: 1px solid var(--ag-border); border-radius: 7px; }
.action-resultats button { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; border: none; border-bottom: 1px solid var(--ag-border); background: none; font-size: 0.84rem; cursor: pointer; text-align: left; }
.action-resultats button:last-child { border-bottom: none; }
.action-resultats button:hover { background: var(--ag-accent-soft); }
.action-resultats button > span { color: var(--ag-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.action-boutons { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
.action-boutons .btn-ia, .action-boutons .btn-classic { padding: 0.4rem 1.1rem; font-size: 0.86rem; }

/* ============ Présence caisse ============ */
.presence { font-size: 0.7rem; line-height: 1; }
.presence.en-ligne { color: #1d9f5f; }
.presence.hors-ligne { color: #d93a2b; animation: ag-presence-beat 1.6s ease-in-out infinite; }
.presence.inconnue { color: #b5bccb; }

/* ============ Documentation (recherche, lecture) ============ */
.docs { width: 100%; max-width: var(--ag-width); margin: 0 auto; }
.docs-search-head { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.docs-search-head input { flex: 1 1 0; min-width: 0; padding: 0.6rem 1rem; border: 1px solid var(--ag-border); border-radius: 999px; background: var(--ag-card); font-size: 1rem; }
.docs-results { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.chat-flow .docs-results { max-width: 90%; margin: 0 auto 0.6rem 0; }
.docs-result { background: var(--ag-card); border: 1px solid var(--ag-border); border-radius: 10px; padding: 0.8rem 1rem; }
.docs-result a { font-weight: 600; text-decoration: none; }
.docs-result-path { display: block; font-size: 0.74rem; color: var(--ag-ink-soft); margin-bottom: 0.2rem; overflow-wrap: anywhere; }
.docs-result-excerpt { font-size: 0.86rem; color: var(--ag-ink-soft); margin: 0.3rem 0 0; }
.docs-result-excerpt mark { background: rgba(255, 213, 79, 0.45); color: inherit; padding: 0 0.1rem; }
.docs-tree ul { list-style: none; padding-left: 1rem; margin: 0.2rem 0; }
.docs-tree li { padding: 0.15rem 0; font-size: 0.9rem; }
.docs-tree .docs-folder { font-weight: 600; color: var(--ag-ink-soft); }
.docs-tree a { text-decoration: none; }
.docs-empty { color: var(--ag-ink-soft); font-style: italic; }
.docs-article { background: var(--ag-card); border: 1px solid var(--ag-border); border-radius: 10px; padding: 1.2rem 1.6rem; }

/* ============ Barre de saisie : champ + micro sur une ligne, réglages sur la seconde ============ */
.chat-card-main { display: flex; align-items: flex-end; gap: 0.4rem; }
.chat-card-main textarea { flex: 1; min-width: 0; }
.model-select { min-width: 0; }

/* ============ Sombre : les jetons changent, pas les règles ============ */
[data-theme="dark"] {
    --ag-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --ag-accent-soft: rgba(90, 160, 255, 0.16);
    --ag-accent-glow: rgba(34, 112, 200, 0.14);
    --ag-switch: #3a4250;
    --ag-warn-border: #6b5a2a;
    --ag-warn-strong: #d8b04a;
    --ag-warn-bg: rgba(60, 50, 20, 0.45);
    --ag-warn-ink: #e6c66a;
    --ag-warn-text: #e8dcb0;
    --ag-ok-bg: rgba(27, 175, 122, 0.14); --ag-ok-border: rgba(27, 175, 122, 0.4); --ag-ok-ink: #7fd8b0;
    --ag-ko-bg: rgba(235, 104, 52, 0.14); --ag-ko-border: rgba(235, 104, 52, 0.4); --ag-ko-ink: #f0a080;
}
[data-theme="dark"] .chat-card:focus-within, [data-theme="dark"] .chat-card.drop-target { box-shadow: 0 0 0 3px rgba(90, 160, 255, 0.18); }
[data-theme="dark"] .btn-ia { box-shadow: none; }
[data-theme="dark"] .markdown pre { background: #0f1a28; }

/* ============ Petit écran : dense, rien de perdu ============ */
@media (max-width: 40rem) {
    .agent-page { padding: 0.4rem 0.6rem 0.6rem; }
    .merchant-strip { font-size: 0.72rem; padding-top: 0.1rem; }
    .home-greeting { font-size: 1.4rem; margin: 1.2rem 0 0.9rem; }
    .home-chips { gap: 0.35rem; margin-bottom: 0.8rem; }
    .chip { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
    .chat-flow { gap: 0.5rem; margin: 0.3rem 0 0.9rem; }
    .chat-user, .chat-assistant { max-width: 92%; padding: 0.55rem 0.85rem; margin-top: 0.25rem; margin-bottom: 0.25rem; }
    .chat-card { padding: 0.45rem 0.6rem 0.4rem; border-radius: 18px; }
    .chat-card textarea { font-size: 0.98rem; padding-bottom: 0.3rem; }
    .chat-card-row { gap: 0.35rem; }
    .model-select { flex: 1 1 0; font-size: 0.78rem; padding: 0.3rem 0.5rem; }
    .round-btn { width: 1.9rem; height: 1.9rem; font-size: 1.1rem; }
    .voice-btn { width: 2.1rem; height: 2.1rem; }
    .home-status { font-size: 0.72rem; line-height: 1.2; margin: 0.15rem 0 0; }
    .home-status .status-note { display: none; }
    .docs-result-path { display: none; }
    .key-panel { padding: 0.7rem 0.75rem; }
    .key-row { flex-wrap: wrap; }
    .key-row .key-name { min-width: 5rem; }
}

/* Perte du circuit. Les classes sont posées par Blazor sur #components-reconnect-modal ; sans
   aucune d'elles, rien ne s'affiche. Dans la WebView de CarréBO, « perdue » ne dure qu'un instant :
   agentCircuit rend la main à l'accueil. Ce voile sert donc surtout au navigateur. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    place-content: center;
    text-align: center;
    background: rgba(20, 22, 30, 0.55);
    color: #fff;
    font: 1rem var(--ag-font);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: grid;
}

#components-reconnect-modal p { display: none; margin: 0; }

.components-reconnect-show .reconnect-trying,
.components-reconnect-retrying .reconnect-trying,
.components-reconnect-paused .reconnect-trying,
.components-reconnect-failed .reconnect-lost,
.components-reconnect-rejected .reconnect-lost,
.components-reconnect-resume-failed .reconnect-lost {
    display: block;
}

.reconnect-lost button {
    display: block;
    margin: 0.9rem auto 0;
    padding: 0.5rem 1.2rem;
    border: 0;
    border-radius: var(--ag-radius);
    background: var(--ag-accent);
    color: var(--ag-on-accent);
    font: inherit;
    cursor: pointer;
}

/* Un zero ou un N/A grise plutot qu'une cellule vide : la colonne reste lisible en diagonale,
   et le vide ne se confond pas avec une donnee manquante. */
.tdb-vide { color: var(--ag-ink-soft); }