:root {
    /* Backgrounds */
    --color-bg: #05010f;
    --color-bg-2: #10071f;
    --color-bg-3: #1f0f47;

    /* Surfaces (panels/cards), low to high elevation */
    --color-surface-1: rgba(25, 14, 52, 0.68);
    --color-surface-2: rgba(14, 8, 32, 0.78);
    --color-surface-3: rgba(9, 4, 24, 0.9);

    /* Borders */
    --color-border: rgba(183, 123, 255, 0.16);
    --color-border-strong: rgba(249, 96, 255, 0.32);

    /* Text */
    --color-text: #f6efff;
    --color-text-soft: #ddd0ff;
    --color-text-muted: #a999d6;

    /* Brand accents: violet/magenta = Amelia/user (primary); cyan = technical state, focus, live (secondary) */
    --color-primary: #d86bff;
    --color-primary-soft: #f0b3ff;
    --color-primary-translucent: rgba(216, 107, 255, 0.6);
    --color-secondary: #7fe2ff;
    --color-secondary-soft: #c6f2ff;

    /* Status */
    --color-danger: #ff86be;
    --color-success: #8ff5d2;
    --color-warning: #ffd27a;

    /* Spacing scale */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 18px;

    /* Radius scale */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;

    /* Shadows */
    --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-md: 0 28px 72px rgba(2, 0, 10, 0.48), 0 0 0 1px rgba(190, 128, 255, 0.05), 0 0 42px rgba(118, 67, 255, 0.12);

    --font-mono: "Cascadia Code", "JetBrains Mono", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }
/* Author-origin rules (e.g. the base `button { display: inline-flex }` below)
   beat the user-agent [hidden] default REGARDLESS of specificity -- CSS origin
   ordering, not a specificity fight. Found live: #chat-stop rendered visible
   despite hidden="" because of exactly this. Restore the guarantee globally,
   for every current and future hidden element, not just the one found. */
[hidden] { display: none !important; }
/* Réactivité tactile globale : sans ceci, certains navigateurs mobiles retardent
   le tap (attente anti-double-tap-zoom) et affichent un flash gris/bleu par-dessus
   le retour visuel personnalisé (transform au :active plus bas) -- ça se sent comme
   un bouton "mou" ou qui ne répond pas du premier coup. */
button, a, summary, input, textarea, select {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* Filet responsive : tout média/bloc sans classe reste dans son conteneur (pas de
   débordement horizontal sur mobile). Les règles spécifiques (avatar, galerie,
   chat-asset…) l'emportent par spécificité — ceci ne fait que rattraper l'inline. */
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: var(--app-height, 100dvh);
    overflow-x: hidden;
    color: var(--color-text);
    font-family: "Bahnschrift SemiCondensed", "Aptos", "Trebuchet MS", sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at top left, rgba(216, 107, 255, 0.22), transparent 30%),
        radial-gradient(circle at top right, rgba(127, 226, 255, 0.16), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(82, 41, 186, 0.34), transparent 38%),
        linear-gradient(145deg, var(--color-bg), var(--color-bg-2) 52%, var(--color-bg-3));
}
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
body::before {
    background:
        radial-gradient(circle at 16% 18%, rgba(249, 96, 255, 0.12), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(127, 226, 255, 0.12), transparent 22%),
        radial-gradient(circle at 52% 100%, rgba(216, 107, 255, 0.12), transparent 34%);
    filter: blur(10px);
}
body::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 143, 255, 0.06) 1px, transparent 1px);
    background-size: 54px 54px;
    opacity: 0.18;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 88%);
}

::selection {
    background: rgba(216, 107, 255, 0.36);
    color: #fff7ff;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: "Aptos Display", "Bahnschrift", "Segoe UI Variable Display", sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

a {
    color: var(--color-primary-soft);
    text-decoration: none;
    transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
a:hover {
    color: #fff6ff;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(216, 107, 255, 0.28);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    padding: 18px 28px 16px;
    background: rgba(8, 4, 22, 0.82);
    border-bottom: 1px solid rgba(173, 111, 255, 0.22);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}
.brand-lockup {
    display: grid;
    gap: 4px;
}
.brand-lockup strong {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary-soft);
}
.brand-lockup h1 {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 2rem);
    color: #fff7ff;
}
.brand-lockup p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
}
.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(216, 107, 255, 0.22);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.14), rgba(127, 226, 255, 0.05));
    color: var(--color-text-soft);
}
.site-nav a:hover {
    color: #fff7ff;
    border-color: rgba(216, 107, 255, 0.44);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.24), rgba(127, 226, 255, 0.08));
    transform: translateY(-1px);
}
/* Page active : jamais indiquée par la couleur seule -- soulignement +
   contraste de fond, en plus de aria-current pour les lecteurs d'écran. */
.site-nav a[aria-current="page"],
.nav-more__panel a[aria-current="page"] {
    color: #fff7ff;
    border-color: var(--color-secondary);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.26), rgba(127, 226, 255, 0.14));
    box-shadow: inset 0 -2px 0 var(--color-secondary);
}

/* Lien d'évitement clavier : invisible tant qu'il n'a pas le focus. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-3);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 8px;
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Barre de navigation basse (mobile) : cachée par défaut, montrée à la place
   du header nav sous 720px (voir media query plus bas). */
.bottom-nav { display: none; }
.nav-more { position: relative; }
.nav-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(216, 107, 255, 0.22);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.14), rgba(127, 226, 255, 0.05));
    color: var(--color-text-soft);
    cursor: pointer;
    list-style: none;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more[open] > summary {
    color: #fff7ff;
    border-color: rgba(216, 107, 255, 0.44);
}
.nav-more__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-1);
    border-radius: 14px;
    border: 1px solid rgba(216, 107, 255, 0.28);
    background: var(--color-surface-3);
    box-shadow: 0 18px 40px rgba(6, 2, 18, 0.55);
    min-width: 180px;
}
.nav-more__panel a { width: 100%; }
@media (max-width: 720px) {
    .nav-more, .nav-more__panel { position: static; }
    .nav-more__panel { box-shadow: none; min-width: 0; }
}

main.page-shell {
    width: min(1240px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 30px 0 42px;
}

.chat-page main.page-shell {
    width: min(1320px, calc(100vw - 28px));
    height: calc(var(--app-height, 100dvh) - 102px);
    padding: 22px 0 20px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-3);
}

.chat-page .page-lead {
    margin-bottom: 0;
}

/* Bandeau HUD compact (style Jarvis) : on récupère la hauteur verticale pour
   la conversation au lieu d'un grand bloc marketing. La prose longue est
   masquée sur la page chat ; on garde le kicker, un titre court et le bouton
   profil. */
.chat-page .page-lead.compact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}
.chat-page .page-lead.compact > div { padding: 14px 20px; }
.chat-page .page-lead.compact .hero-card { padding: 14px 18px; }
.chat-page .page-lead.compact h2 {
    font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.6rem);
    margin: 2px 0 0;
}
.chat-page .page-lead.compact .lead-copy,
.chat-page .page-lead.compact .hero-card p,
.chat-page .page-lead.compact .hero-card .pill {
    display: none;
}
.chat-page .page-lead.compact .hero-kicker { margin-bottom: 4px; }
.chat-page .page-lead.compact .button-row { margin-top: 0; }

.page-lead,
.section-grid,
.feature-grid,
.memory-grid,
.stats-grid,
.auth-scene {
    display: grid;
    gap: var(--space-3);
}
.page-lead,
.auth-scene {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    align-items: stretch;
}
.page-lead {
    margin-bottom: 22px;
}
.page-lead.compact {
    align-items: center;
}
.page-lead > div,
.page-lead > aside,
.hero-card,
.panel,
.auth-intro,
.auth-panel,
.metric,
.amelia-core,
.chat-console {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), var(--color-surface-2);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px);
}
.page-lead > div,
.hero-card,
.auth-intro,
.auth-panel,
.panel {
    padding: 20px;
}
/* Titres de panneau : un cran HUD (mono léger, liséré sous le titre, point d'état). */
.panel > h3 {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.panel > h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 8px var(--color-secondary);
    vertical-align: middle;
    animation: hudBlink 2.2s ease-in-out infinite;
}
@keyframes hudBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--color-secondary); }
    50% { opacity: 0.35; box-shadow: 0 0 2px var(--color-secondary); }
}
.page-lead::after,
.hero-card::after,
.auth-intro::after,
.auth-panel::after,
.panel::after,
.amelia-core::after,
.chat-console::after {
    /* Cadre HUD : 4 coins en équerre (style Jarvis), dessinés en multi-gradients.
       Remplace l'ancien liseré bas par un encadrement holographique cohérent. */
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent)), linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent)),
        linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent)), linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent)),
        linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent)), linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent)),
        linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent)), linear-gradient(var(--color-primary-translucent), var(--color-primary-translucent));
    background-repeat: no-repeat;
    background-size:
        16px 2px, 2px 16px,
        16px 2px, 2px 16px,
        16px 2px, 2px 16px,
        16px 2px, 2px 16px;
    background-position:
        top left, top left,
        top right, top right,
        bottom left, bottom left,
        bottom right, bottom right;
    opacity: 0.55;
    animation: hudCornerPulse 3.4s ease-in-out infinite;
}
/* Survol : coins plus francs (sensation d'interface réactive). */
.panel:hover::after,
.hero-card:hover::after,
.amelia-core:hover::after,
.chat-console:hover::after {
    background-size:
        22px 2px, 2px 22px, 22px 2px, 2px 22px,
        22px 2px, 2px 22px, 22px 2px, 2px 22px;
    opacity: 0.9;
}
@keyframes hudCornerPulse {
    0%, 100% { opacity: 0.42; filter: drop-shadow(0 0 0 rgba(216, 107, 255, 0)); }
    50% { opacity: 0.82; filter: drop-shadow(0 0 6px rgba(216, 107, 255, 0.45)); }
}

.hero-kicker,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-secondary-soft);
}
.hero-kicker::before,
.eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}

.page-lead h2,
.auth-intro h2,
.auth-panel h3,
.console-top h3 {
    font-size: clamp(1.85rem, 1.35rem + 1vw, 2.9rem);
    line-height: 1.08;
    color: #fff6ea;
}
.page-lead p,
.auth-intro p,
.auth-panel p,
.hero-card p,
.console-top p,
.lead-copy {
    margin: 0;
    color: var(--color-text-soft);
}
.lead-copy {
    max-width: 62ch;
    font-size: 1.02rem;
}

.button-row,
.admin-actions,
.auth-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(216, 107, 255, 0.36);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.28), rgba(84, 54, 194, 0.18) 52%, rgba(127, 226, 255, 0.12));
    color: #fff6ff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(3, 0, 12, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
button:hover,
a.button:hover {
    transform: translateY(-1px);
    border-color: rgba(240, 179, 255, 0.52);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.4), rgba(103, 62, 218, 0.24) 52%, rgba(127, 226, 255, 0.18));
    box-shadow: 0 18px 38px rgba(3, 0, 12, 0.36), 0 0 24px rgba(216, 107, 255, 0.18);
}
button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
button.active {
    border-color: rgba(127, 226, 255, 0.56);
    background: linear-gradient(135deg, rgba(127, 226, 255, 0.24), rgba(216, 107, 255, 0.28));
}
.button.secondary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(216, 107, 255, 0.18);
    color: var(--color-text-soft);
}
.button.secondary:hover {
    border-color: rgba(127, 226, 255, 0.34);
    color: #fff7ff;
}

.brand-lockup strong,
.hero-kicker,
.eyebrow,
.pill,
.tag,
th,
.chat-meta,
.signal-readout {
    font-family: "Cascadia Code", "Consolas", monospace;
}

.feature-grid,
.memory-grid,
.stats-grid,
.section-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.feature-card,
.hero-card,
.info-card,
.kpi .card,
.metric {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), var(--color-surface-1);
}
.feature-card,
.info-card,
.kpi .card {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.feature-card b,
.info-card b,
.kpi .card b,
.metric b {
    display: block;
    margin-bottom: 6px;
    color: #fff7eb;
    font-size: 1.06rem;
}
.feature-card span,
.info-card span,
.kpi .card small,
.metric small,
.metric p {
    color: var(--color-text-muted);
}
.feature-card { grid-column: span 4; min-height: 150px; }

.stack-list {
    display: grid;
    gap: var(--space-2);
}
.stack-list > div,
ul.stack-list li {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
}
ul.stack-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.stack-list li { color: var(--color-text-soft); }

.agent-stream {
    display: grid;
    gap: var(--space-2);
}

.agent-entry {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
}

.agent-entry b,
.agent-entry strong {
    display: block;
    color: #fff7eb;
    font-size: 1rem;
}

.agent-entry span,
.agent-entry small {
    display: block;
}

.agent-entry span { color: var(--color-text-soft); }

.agent-entry small {
    margin-top: 6px;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: 10px;
}

.drives-panel { display: grid; gap: var(--space-1); padding: 4px 0; }
.drive-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.drive-label { width: 110px; flex-shrink: 0; color: var(--color-text-soft); }
.drive-bar { position: relative; flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: visible; }
.drive-bar-fill { height: 100%; background: rgba(130,170,255,0.45); border-radius: 4px; transition: width 0.6s ease; }
.drive-bar-fill.drive-dominant { background: rgba(90,210,140,0.75); }
.drive-base-marker { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,0.35); pointer-events: none; }
.drive-val { width: 38px; text-align: right; font-size: 0.78rem; color: var(--color-text-muted); flex-shrink: 0; }

form.inline-form {
    display: inline-flex;
    margin: 10px 0 0;
}

.risk-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 999px;
    margin: 0 0 6px;
    border: 1px solid transparent;
}
.risk-pill.risk-vert { color: #2e7d32; background: rgba(76,175,80,0.14); border-color: rgba(76,175,80,0.4); }
.risk-pill.risk-orange { color: #c77700; background: rgba(255,167,38,0.16); border-color: rgba(255,167,38,0.45); }
.risk-pill.risk-rouge { color: #c62828; background: rgba(239,83,80,0.16); border-color: rgba(239,83,80,0.5); }

.reinf-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 7px;
    margin: 0 0 6px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.reinf-badge.reinf-up { color: #2e7d32; background: rgba(76,175,80,0.14); border-color: rgba(76,175,80,0.4); }
.reinf-badge.reinf-down { color: #c62828; background: rgba(239,83,80,0.14); border-color: rgba(239,83,80,0.45); }
.reinf-badge.reinf-flat { color: var(--color-text-muted); background: rgba(127,127,127,0.12); border-color: rgba(127,127,127,0.3); }

.goals-view { display: flex; flex-direction: column; gap: var(--space-1); }
.goal-item { padding: 6px 0; }
.goal-item.goal-child { margin-left: 18px; padding: 4px 0 4px 12px; border-left: 2px solid rgba(127,127,127,0.25); }
.goal-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.goal-bar { display: inline-block; width: 70px; height: 7px; border-radius: 999px; background: rgba(127,127,127,0.2); overflow: hidden; }
.goal-bar-fill { display: block; height: 100%; background: var(--color-success, #4caf50); border-radius: 999px; }
.goal-pct { font-size: 0.72rem; color: var(--color-text-muted); min-width: 30px; }
.goal-stale { font-size: 0.72rem; font-weight: 600; color: #c77700; background: rgba(255,167,38,0.16); border: 1px solid rgba(255,167,38,0.45); border-radius: 999px; padding: 1px 7px; }
.goal-sub-count { font-size: 0.72rem; color: var(--color-text-muted); }
.goal-auto { font-size: 0.72rem; font-weight: 600; color: #4a8fe0; background: rgba(74,143,224,0.16); border: 1px solid rgba(74,143,224,0.45); border-radius: 999px; padding: 1px 7px; }

.muted { color: var(--color-text-muted); }
.ok { color: var(--color-success); }
.bad { color: var(--color-danger); }

.flash {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}
.flash.ok { color: var(--color-success); border-color: rgba(150, 224, 175, 0.28); }
.flash.bad { color: var(--color-danger); border-color: rgba(255, 141, 146, 0.24); }
.flash.warn { color: var(--color-warning); border-color: rgba(255, 210, 122, 0.24); }

.kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 0;
}
.kpi .card b {
    margin-bottom: 0;
    font-size: clamp(1.25rem, 1rem + 0.8vw, 2rem);
}

.pill,
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-soft);
    font-size: 12px;
}
.pill.ok { color: var(--color-success); border-color: rgba(150, 224, 175, 0.26); }
.pill.bad { color: var(--color-danger); border-color: rgba(255, 141, 146, 0.24); }
.pill.warn { color: var(--color-warning); border-color: rgba(255, 210, 122, 0.24); }
.tag.mp { color: var(--color-primary-soft); }
.tag.salon { color: var(--color-secondary-soft); }

.panel {
    padding: 22px;
}
.panel h3 {
    margin-bottom: var(--space-2);
    font-size: 1.22rem;
    color: #fff6ea;
}

.table-wrap {
    overflow-x: auto;
    margin-top: 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
th,
td {
    padding: 11px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
th {
    color: var(--color-text-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 11px;
}
tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.msg {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}
.msg .who {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: 11px;
}
.msg.bot {
    background: rgba(216, 107, 255, 0.08);
}

.tabs { display: flex; gap: 6px; margin-top: 14px; }
.tab {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-muted);
    cursor: pointer;
}
.tab.active {
    color: #fff7ff;
    border-color: rgba(216, 107, 255, 0.34);
    background: rgba(216, 107, 255, 0.12);
}

.admin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.admin-col-3 { grid-column: span 3; }
.admin-col-4 { grid-column: span 4; }
.admin-col-6 { grid-column: span 6; }
.admin-col-8 { grid-column: span 8; }
.admin-col-12 { grid-column: span 12; }
.metric {
    min-height: 140px;
    padding: var(--space-3);
    display: grid;
    align-content: space-between;
    gap: 10px;
}
.metric b {
    font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.35rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
}
.meter {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}
.meter span {
    display: block;
    height: 100%;
    width: var(--value, 0%);
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
}
.metric.warn .meter span { background: linear-gradient(90deg, #ffe19c, #ffb66d); }
.metric.bad .meter span { background: linear-gradient(90deg, #ff8d92, #ffbf84); }
.kv { display: grid; grid-template-columns: minmax(140px, 0.45fr) 1fr; gap: 8px 14px; font-size: 13px; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; color: var(--color-text-soft); overflow-wrap: anywhere; }

.auth-scene {
    min-height: calc(var(--app-height, 100dvh) - 180px);
    align-items: center;
}
.auth-intro {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: 28px;
}
.auth-panel {
    padding: 26px;
}
.auth-panel .section-head {
    display: grid;
    gap: 10px;
    margin-bottom: var(--space-3);
}
.auth-form,
.profile-form {
    display: grid;
    gap: 16px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.field {
    display: grid;
    gap: 7px;
}
.field.field-wide {
    grid-column: 1 / -1;
}
.field span {
    color: #f7dbff;
    font-size: 13px;
    font-weight: 600;
}
.field small {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
input,
textarea,
select {
    width: 100%;
    border: 1px solid rgba(216, 107, 255, 0.16);
    border-radius: var(--radius-sm);
    background: rgba(7, 3, 20, 0.62);
    color: #fff7ff;
    font: inherit;
    padding: 12px 13px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
textarea {
    min-height: 120px;
    resize: vertical;
}
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(216, 107, 255, 0.56);
    box-shadow: 0 0 0 3px rgba(216, 107, 255, 0.12);
    background: rgba(8, 3, 24, 0.8);
}
.auth-error {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 14px 16px;
    color: #ffe7f3;
    border: 1px solid rgba(255, 134, 190, 0.34);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(94, 18, 54, 0.86), rgba(36, 8, 34, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.18);
}
.auth-error strong {
    color: #fff5fb;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.auth-error span {
    color: #ffd5eb;
}
.auth-note,
.auth-disabled,
.form-footnote {
    color: var(--color-text-muted);
    font-size: 12px;
}
.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 13px;
}

.chat-shell {
    --halo-color: #a85cff;
    --halo-rgb: 168, 92, 255;
    --halo-accent: #7fe2ff;
    /* La page chat est une grille pleine hauteur (main.page-shell =
       100dvh - header) : la coque doit REMPLIR sa rangée et pouvoir rétrécir,
       jamais imposer un min-height qui déborde et pousse la zone de saisie
       hors écran sur les laptops. La hauteur mini est garantie côté mobile
       (media query) où la grille passe en une colonne. */
    min-height: 0;
    height: 100%;
    display: grid;
    /* Colonne Amélia volontairement compacte (260-320px) : une présence, pas
       la moitié de l'écran -- le chat est la priorité visuelle. */
    grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr);
    gap: 20px;
    align-items: stretch;
}
.amelia-core,
.chat-console {
    min-height: 0;
    min-width: 0;
    height: 100%;
}
.amelia-core::before,
.chat-console::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(0deg, rgba(217,143,255,0.05) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: 0.24;
}
/* Barre de statut compacte : desktop ne l'affiche jamais (la scène complète
   est toujours visible) -- seule la media query <980px l'active. */
.amelia-status-bar { display: none; }
.amelia-core {
    display: grid;
    place-items: center;
    isolation: isolate;
}
.halo-scene { position: absolute; inset: 0; z-index: 0; }
#halo-canvas { width: 100%; height: 100%; display: block; }
.avatar-orbit {
    position: relative;
    z-index: 1;
    width: min(84%, 430px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.avatar-frame {
    position: relative;
    z-index: 1;
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(240, 179, 255, 0.34);
    background: radial-gradient(circle, rgba(74, 34, 130, 0.9), rgba(5, 2, 16, 0.98));
    box-shadow: 0 0 52px rgba(var(--halo-rgb), 0.48), 0 0 120px rgba(86, 40, 176, 0.28), inset 0 0 58px rgba(0,0,0,0.74);
}
.avatar-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 34%;
    filter: contrast(1.06) saturate(1.12) brightness(1.02);
}
.avatar-frame.missing img { display: none; }
.avatar-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 239, 221, 0.48);
    font-size: 54px;
    background: radial-gradient(circle, rgba(216, 107, 255, 0.32), rgba(0,0,0,0.82));
}
.avatar-frame:not(.missing) .avatar-fallback { display: none; }
.avatar-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 6px);
    opacity: 0.06;
}
.holo-lines {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(transparent 49%, rgba(255,255,255,0.22) 50%, transparent 51%),
        linear-gradient(90deg, transparent 49%, rgba(216,107,255,0.2) 50%, transparent 51%);
    filter: drop-shadow(0 0 12px rgba(var(--halo-rgb), 0.35));
    opacity: 0.26;
    animation: holoDrift 12s linear infinite;
}
.signal-readout {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: grid;
    gap: var(--space-1);
    color: #f7eeff;
    font-size: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(216, 107, 255, 0.18);
    background: linear-gradient(135deg, rgba(12, 8, 30, 0.72), rgba(28, 16, 63, 0.28));
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
}
.signal-row { display: flex; justify-content: space-between; gap: 10px; }
.signal-bar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    border-radius: 999px;
}
.signal-bar span {
    display: block;
    width: 46%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--halo-color), var(--halo-accent));
    box-shadow: 0 0 18px rgba(var(--halo-rgb), 0.6);
    animation: signalSweep 2.7s ease-in-out infinite;
}
.core-copy {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    z-index: 2;
    display: grid;
    gap: 10px;
}
.core-copy p {
    max-width: 30ch;
    color: #f8efff;
    font-size: 13px;
}

.chat-console {
    /* Flex-column (et non grid à lignes explicites) : la zone scrollable prend
       tout l'espace restant et RIEN ne peut chevaucher, quel que soit l'état du
       bandeau questions ou de l'indicateur de réponse. */
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--space-3);
    overflow: hidden;
    border-color: rgba(var(--halo-rgb), 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(116, 67, 255, 0.05)), var(--color-surface-2);
}
.console-top { flex: 0 0 auto; }
.chat-questions { flex: 0 0 auto; }
.chat-log { flex: 1 1 auto; }
.chat-form { flex: 0 0 auto; }
.console-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 4px;
}
.console-top h3 {
    font-size: clamp(1.5rem, 1.2rem + 0.7vw, 2rem);
}
.chat-log {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    border: 1px solid rgba(var(--halo-rgb), 0.28);
    background: linear-gradient(180deg, rgba(17, 8, 35, 0.94), rgba(7, 4, 20, 0.92));
    border-radius: calc(var(--radius-md) + 2px);
    padding: var(--space-3);
    min-height: 0;
    height: 100%;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 107, 255, 0.88) rgba(8, 5, 22, 0.75);
    scrollbar-gutter: stable both-edges;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), inset 0 18px 42px rgba(67, 27, 150, 0.14);
}
.chat-log::-webkit-scrollbar {
    width: 12px;
}
.chat-log::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(8, 5, 22, 0.92), rgba(15, 8, 38, 0.88));
    border-left: 1px solid rgba(216, 107, 255, 0.12);
}
.chat-log::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(216, 107, 255, 0.92), rgba(127, 226, 255, 0.7));
    border-radius: 999px;
    border: 2px solid rgba(8, 5, 22, 0.85);
    box-shadow: 0 0 18px rgba(216, 107, 255, 0.34);
}
.chat-log::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(240, 179, 255, 0.96), rgba(127, 226, 255, 0.82));
}
.chat-msg {
    max-width: min(86%, 760px);
    padding: 12px 14px;
    margin: 10px 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    white-space: pre-wrap;
    box-shadow: 0 18px 30px rgba(0,0,0,0.18);
    backdrop-filter: blur(10px);
}
.chat-msg.user {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(142, 59, 255, 0.34), rgba(216, 107, 255, 0.16));
    color: #fbf4ff;
    border-color: rgba(216, 107, 255, 0.42);
}
.chat-msg.assistant {
    margin-right: auto;
    background: linear-gradient(135deg, rgba(32, 18, 68, 0.92), rgba(78, 32, 124, 0.44));
    color: #f9f0ff;
    border-color: rgba(127, 226, 255, 0.24);
}
.chat-meta {
    display: block;
    color: var(--color-text-muted);
    font-size: 11px;
    margin-bottom: 5px;
}
.chat-assets { display: grid; gap: var(--space-1); margin-top: 10px; }
.chat-asset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: fit-content;
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(var(--halo-rgb), 0.22);
    background: rgba(255, 255, 255, 0.05);
    color: #fff8ef;
    overflow-wrap: anywhere;
}
.chat-asset:hover { background: rgba(255, 255, 255, 0.08); }
.chat-asset img { max-width: 360px; height: auto; border-radius: 10px; display: block; }
.chat-asset audio { max-width: 420px; display: block; }
.chat-actions .gen {
    background: linear-gradient(135deg, rgba(127, 226, 255, 0.16), rgba(216, 107, 255, 0.18));
    border-color: rgba(127, 226, 255, 0.34);
}
.chat-form {
    /* Colonne : la zone de texte occupe TOUTE la largeur, en dessous viennent
       les boutons. Plus de textarea tassé à côté des boutons. */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    border: 1px solid rgba(var(--halo-rgb), 0.24);
    background: linear-gradient(135deg, rgba(13, 8, 32, 0.92), rgba(26, 14, 54, 0.78));
    border-radius: 22px;
    padding: var(--space-2);
    box-shadow: var(--shadow-sm);
}
.chat-form textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    max-height: 320px;
    background: rgba(5, 2, 18, 0.82);
    font-size: 1.02rem;
    line-height: 1.5;
    padding: 14px 16px;
    border-radius: 16px;
    resize: vertical;
}
/* Conteneur des contrôles, sous la zone de texte. */
.chat-form > div { width: 100%; }
.chat-actions {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Menu "Ajouter" : regroupe créations (image/musique/écran) + réglages de
   réponse (voix, mode analyse) derrière un seul bouton plutôt que jusqu'à
   six pastilles à plat dans la barre -- la barre visible reste Ajouter /
   Micro / Envoyer (+ Arrêter pendant une réponse). */
.chat-add { position: relative; }
.chat-add > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(216, 107, 255, 0.36);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.28), rgba(84, 54, 194, 0.18) 52%, rgba(127, 226, 255, 0.12));
    color: #fff6ff;
    font-weight: 600;
}
.chat-add > summary::-webkit-details-marker { display: none; }
.chat-add[open] > summary {
    border-color: var(--color-secondary);
    box-shadow: 0 0 16px rgba(127, 226, 255, 0.32);
}
.chat-add-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-3);
    box-shadow: var(--shadow-md);
    min-width: 220px;
}
.chat-add-menu button {
    width: 100%;
    justify-content: flex-start !important;
    min-height: 42px;
}
.chat-status {
    min-height: 20px;
    color: #d6c9ff;
    font-size: 12px;
    text-align: right;
}
/* Bouton d'envoi = action primaire néon violet (look Jarvis), distinct des
   boutons secondaires/outils. */
#chat-send {
    background: linear-gradient(135deg, var(--color-primary), #8e3bff);
    border-color: rgba(240, 179, 255, 0.6);
    color: #faf3ff;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 0 18px rgba(216, 107, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#chat-send:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 28px rgba(216, 107, 255, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* Sur la page chat, on retire la consigne du bandeau titre : HUD épuré, plus
   de place pour la conversation. */
.chat-page .console-top p { display: none; }
.chat-page .console-top h3 { margin: 2px 0 0; }

/* Toggle « Mode analyse » actif : néon cyan pour le distinguer du violet d'envoi. */
#chat-reason.active {
    background: linear-gradient(135deg, rgba(127, 226, 255, 0.28), rgba(216, 107, 255, 0.18));
    border-color: rgba(127, 226, 255, 0.6);
    color: #eafaff;
    box-shadow: 0 0 16px rgba(127, 226, 255, 0.4);
}
/* Volet « Analyse » repliable, inséré au-dessus de la réponse d'Amélia.
   Look HUD : monospace, liseré cyan, fond verre sombre. */
.chat-reason {
    margin: 2px 0 10px;
    border: 1px solid rgba(127, 226, 255, 0.3);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(10, 18, 32, 0.7), rgba(20, 12, 44, 0.55));
    overflow: hidden;
}
.chat-reason > summary {
    cursor: pointer;
    list-style: none;
    padding: 7px 12px;
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary-soft);
    user-select: none;
}
.chat-reason > summary::-webkit-details-marker { display: none; }
.chat-reason > summary::before {
    content: "▸ ";
    color: var(--color-secondary);
}
.chat-reason[open] > summary::before { content: "▾ "; }
.chat-reason-body {
    padding: 4px 14px 12px;
    border-top: 1px solid rgba(127, 226, 255, 0.14);
    color: #cfd9ff;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    font-family: "Cascadia Code", "Consolas", monospace;
}
/* Volet « Contexte de cette réponse » : mêmes proportions que .chat-reason
   mais en violet/primaire (données personnelles/mémoire), pas cyan (réservé
   au technique/live) -- distinguable au coup d'oeil du volet Analyse. */
.chat-context {
    margin: 2px 0 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    overflow: hidden;
}
.chat-context > summary {
    cursor: pointer;
    list-style: none;
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary-soft);
    user-select: none;
}
.chat-context > summary::-webkit-details-marker { display: none; }
.chat-context > summary::before {
    content: "▸ ";
    color: var(--color-primary);
}
.chat-context[open] > summary::before { content: "▾ "; }
.chat-context-label {
    padding: 6px 14px 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.chat-context-list {
    margin: 2px 0 0;
    padding: 0 14px 10px 28px;
    color: var(--color-text-soft);
    font-size: 13px;
    line-height: 1.5;
}
.chat-context-list li { margin: 2px 0; }

/* Page Vie sociale : grille de panneaux + petites cartes de stats. */
.social-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}
.social-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.social-cards .card {
    display: grid;
    gap: 4px;
    padding: var(--space-2);
    border-radius: 14px;
    border: 1px solid rgba(var(--halo-rgb, 168, 92, 255), 0.22);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.12), rgba(127, 226, 255, 0.05));
}
.social-cards .card small { color: var(--color-text-muted); font-size: 11px; }
.social-cards .card b { font-size: 1.5rem; color: #fbf4ff; font-variant-numeric: tabular-nums; }

/* Timeline émotionnelle : barres jour-par-jour (hauteur = humeur moyenne). */
.mood-timeline {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 140px;
    margin-top: 14px;
    padding: 10px 6px 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(17, 8, 35, 0.6), rgba(7, 4, 20, 0.5));
    border: 1px solid rgba(216, 107, 255, 0.16);
    overflow-x: auto;
}
.mt-col {
    flex: 1 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
    min-width: 14px;
}
.mt-bar {
    width: 70%;
    min-height: 2px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--color-primary-soft), var(--color-primary));
    box-shadow: 0 0 10px rgba(216, 107, 255, 0.4);
    transition: height 0.3s ease;
}
.mt-col.mt-empty .mt-bar {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.mt-day {
    font-size: 9px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    transform: rotate(-45deg);
    white-space: nowrap;
}

/* Recherche mémoire (/me) : barre + résultats. */
.mem-search {
    display: flex;
    gap: 10px;
    margin: 10px 0 4px;
}
.mem-search input {
    flex: 1 1 auto;
    min-width: 0;
}
.mem-results { margin-top: 8px; }
.mem-results .stack-list li {
    border-left: 2px solid rgba(216, 107, 255, 0.45);
    padding-left: 10px;
}

/* ===================================================================
   MODE INFORMATIQUE / JARVIS (page chat) — couche cyberpunk animée.
   Piloté par root.dataset.state (calm/thinking/speaking/listening) :
   les effets « quand on lui parle » sont surtout en CSS, sans JS.
   Tout le mouvement est coupé par la règle prefers-reduced-motion.
   =================================================================== */
.chat-shell { position: relative; }

/* -- Séquence d'allumage au chargement -- */
.boot-overlay {
    position: absolute; inset: 0; z-index: 30;
    display: grid; place-items: center;
    background: radial-gradient(circle at 50% 45%, rgba(28, 16, 63, 0.96), rgba(5, 2, 16, 0.99));
    backdrop-filter: blur(6px);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.boot-overlay.boot-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { display: grid; justify-items: center; gap: 14px; text-align: center; }
.boot-logo {
    width: 74px; height: 74px; border-radius: 50%;
    display: grid; place-items: center; font-size: 34px; font-weight: 700; color: #faf3ff;
    border: 1px solid rgba(216, 107, 255, 0.5);
    background: radial-gradient(circle, rgba(216, 107, 255, 0.3), rgba(5, 2, 16, 0.9));
    box-shadow: 0 0 40px rgba(216, 107, 255, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.6);
    animation: bootPulse 1.4s ease-in-out infinite;
}
.boot-title { font-family: var(--font-mono); letter-spacing: 0.4em; font-size: 1.05rem; color: var(--color-primary-soft); }
.boot-lines { font-family: var(--font-mono); font-size: 11px; color: var(--color-secondary-soft); display: grid; gap: 4px; }
.boot-lines span { opacity: 0; animation: bootLine 0.4s ease forwards; }
.boot-lines span:nth-child(1) { animation-delay: 0.2s; }
.boot-lines span:nth-child(2) { animation-delay: 0.6s; }
.boot-lines span:nth-child(3) { animation-delay: 1.0s; }
.boot-bar { width: 200px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); box-shadow: 0 0 14px var(--color-primary); animation: bootFill 1.5s ease forwards; }
@keyframes bootPulse { 0%, 100% { box-shadow: 0 0 30px rgba(216,107,255,0.4), inset 0 0 30px rgba(0,0,0,0.6); } 50% { box-shadow: 0 0 56px rgba(216,107,255,0.75), inset 0 0 30px rgba(0,0,0,0.6); } }
@keyframes bootLine { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.9; transform: none; } }
@keyframes bootFill { from { width: 0; } to { width: 100%; } }

/* -- Grille circuit + scanlines ambiantes -- */
.core-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55;
    background-image:
        linear-gradient(rgba(127, 226, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216, 107, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 28%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 45%, #000 28%, transparent 78%);
    animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 40px 40px, 40px 40px; } }
.core-scan, .console-scan {
    position: absolute; left: 0; right: 0; top: 0; height: 130px; z-index: 1; pointer-events: none;
    background: linear-gradient(rgba(127, 226, 255, 0) 0, rgba(127, 226, 255, 0.06) 50%, rgba(127, 226, 255, 0) 100%);
    mix-blend-mode: screen; opacity: 0.6; animation: scanMove 7s linear infinite;
}
.console-scan { z-index: 0; animation-duration: 9s; }
@keyframes scanMove { from { transform: translateY(-160px); } to { transform: translateY(900px); } }

/* -- Anneaux orbitaux autour de l'avatar -- */
.orbit-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-ring-1 { inset: -7%; border: 1px dashed rgba(127, 226, 255, 0.22); animation: spin 22s linear infinite; }
.orbit-ring-2 { inset: 5%; border: 1px dotted rgba(216, 107, 255, 0.25); animation: spin 16s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -- Équaliseur "voix" : réagit à l'état parlé -- */
.voice-wave { position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 2; display: flex; align-items: flex-end; gap: 4px; height: 28px; opacity: 0.45; transition: opacity 0.3s ease; }
.voice-wave i { width: 4px; height: 6px; border-radius: 2px; background: linear-gradient(180deg, var(--color-primary-soft), var(--color-primary)); box-shadow: 0 0 8px rgba(216, 107, 255, 0.5); animation: wave 1.1s ease-in-out infinite; }
.voice-wave i:nth-child(2) { animation-delay: 0.12s; } .voice-wave i:nth-child(3) { animation-delay: 0.24s; }
.voice-wave i:nth-child(4) { animation-delay: 0.36s; } .voice-wave i:nth-child(5) { animation-delay: 0.10s; }
.voice-wave i:nth-child(6) { animation-delay: 0.30s; } .voice-wave i:nth-child(7) { animation-delay: 0.18s; }
.voice-wave i:nth-child(8) { animation-delay: 0.40s; } .voice-wave i:nth-child(9) { animation-delay: 0.06s; }
@keyframes wave { 0%, 100% { height: 6px; opacity: 0.5; } 50% { height: 22px; opacity: 1; } }
.chat-shell[data-state="speaking"] .voice-wave { opacity: 1; }
.chat-shell[data-state="speaking"] .voice-wave i { animation-duration: 0.5s; }
.chat-shell[data-state="calm"] .voice-wave i { animation-play-state: paused; height: 5px; }
.chat-shell[data-state="speaking"] .avatar-frame { animation: avatarPulse 0.8s ease-in-out infinite; }
@keyframes avatarPulse {
    0%, 100% { box-shadow: 0 0 52px rgba(var(--halo-rgb), 0.5), 0 0 120px rgba(86, 40, 176, 0.3), inset 0 0 58px rgba(0,0,0,0.74); }
    50% { box-shadow: 0 0 86px rgba(var(--halo-rgb), 0.85), 0 0 150px rgba(86, 40, 176, 0.45), inset 0 0 58px rgba(0,0,0,0.6); }
}

/* -- Bandeau "analyse" : visible quand elle réfléchit -- */
.thinking-strip {
    display: none; align-items: center; gap: 10px; flex: 0 0 auto; margin-bottom: 2px;
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid rgba(127, 226, 255, 0.3);
    background: linear-gradient(135deg, rgba(127, 226, 255, 0.1), rgba(216, 107, 255, 0.06));
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-secondary-soft);
}
.chat-shell[data-state="thinking"] .thinking-strip { display: flex; }
.ts-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 10px var(--color-secondary); animation: hudBlink 1s ease-in-out infinite; }
.ts-bars { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; margin-left: auto; }
.ts-bars i { width: 3px; height: 4px; background: var(--color-secondary); border-radius: 2px; animation: wave 0.7s ease-in-out infinite; }
.ts-bars i:nth-child(2) { animation-delay: 0.12s; } .ts-bars i:nth-child(3) { animation-delay: 0.24s; }
.ts-bars i:nth-child(4) { animation-delay: 0.08s; } .ts-bars i:nth-child(5) { animation-delay: 0.30s; }

/* -- Bandeau « fil en cours » (suivi de discussion) -- */
.discussion-strip {
    display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; margin-bottom: 2px;
    padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(var(--halo-rgb, 168,92,255), 0.28);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.1), rgba(127, 226, 255, 0.05));
    font-size: 12px; color: var(--color-text-soft); min-width: 0;
}
.discussion-strip[hidden] { display: none; }
.discussion-strip .ds-icon { color: var(--color-primary-soft); }
.discussion-strip .ds-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--color-secondary-soft); }
.discussion-strip .ds-current { color: #fbf4ff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.discussion-strip .ds-paused { flex: 0 0 auto; color: var(--color-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* -- Glitch discret du titre quand elle parle -- */
.glitch { position: relative; }
.chat-shell[data-state="speaking"] .glitch::before,
.chat-shell[data-state="speaking"] .glitch::after {
    content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none;
}
.chat-shell[data-state="speaking"] .glitch::before { color: var(--color-secondary); opacity: 0.45; transform: translate(-1.5px, 0); animation: glitchA 0.5s steps(2) infinite; }
.chat-shell[data-state="speaking"] .glitch::after { color: var(--color-primary); opacity: 0.45; transform: translate(1.5px, 0); animation: glitchB 0.5s steps(2) infinite; }
@keyframes glitchA { 0%, 100% { clip-path: inset(0 0 82% 0); } 50% { clip-path: inset(44% 0 22% 0); } }
@keyframes glitchB { 0%, 100% { clip-path: inset(72% 0 0 0); } 50% { clip-path: inset(12% 0 52% 0); } }
.signal-row .sig-ok { color: var(--color-success); }

/* Questions d'Amélia : bandeau dans le chat + indicateur de réponse.
   Même langage cyberpunk (violet/cyan, verre, néon discret). */
.chat-questions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    /* Plafonnée + scrollable : même avec beaucoup de questions, elle ne mange
       jamais la zone de conversation. */
    max-height: 34%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 1px solid rgba(var(--halo-rgb), 0.32);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(216, 107, 255, 0.14), rgba(127, 226, 255, 0.06)), rgba(8, 5, 22, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 22px rgba(118, 67, 255, 0.12);
}
.chat-questions[hidden] { display: none; }
.chat-questions-head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-secondary-soft);
}
.chat-questions-head .qh-label { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; }
.chat-questions-head .qh-label::before {
    content: "";
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}
.chat-questions-dismiss {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 2px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
    border-radius: 999px;
    color: var(--color-text-muted);
    border-color: rgba(255, 255, 255, 0.16);
    background: transparent;
}
.chat-questions-dismiss:hover { color: #fff7ff; border-color: rgba(127, 226, 255, 0.5); }
.chat-questions-list { display: flex; flex-direction: column; gap: var(--space-1); }
.question-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: 9px 9px 9px 14px;
    border: 1px solid rgba(216, 107, 255, 0.24);
    border-radius: 14px;
    background: rgba(8, 5, 22, 0.55);
    transition: border-color var(--t-fast, 180ms) ease, transform var(--t-fast, 180ms) ease;
}
.question-chip:hover { border-color: rgba(127, 226, 255, 0.5); transform: translateY(-1px); }
.question-chip-text {
    color: var(--color-text-soft);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.q-pick {
    min-height: 32px;
    flex: none;
    padding: 0 14px;
    font-size: 12px;
    border-color: rgba(127, 226, 255, 0.4);
    background: linear-gradient(135deg, rgba(127, 226, 255, 0.2), rgba(216, 107, 255, 0.24));
}
.answer-indicator {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px 7px 14px;
    margin-bottom: 2px;
    border: 1px solid rgba(127, 226, 255, 0.36);
    border-radius: 14px;
    background: rgba(127, 226, 255, 0.08);
    color: var(--color-secondary-soft);
    font-size: 12px;
}
.answer-indicator[hidden] { display: none; }
.answer-indicator span { overflow-wrap: anywhere; }
.answer-indicator button {
    min-height: 28px;
    width: 28px;
    flex: none;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    color: var(--color-text-soft);
    border-color: rgba(255, 255, 255, 0.18);
    background: transparent;
}
.answer-indicator button:hover { color: #fff7ff; border-color: rgba(255, 134, 190, 0.5); }

/* /me : formulaire de réponse sous chaque question */
.question-entry .question-answer { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.question-entry .question-answer textarea {
    min-height: 54px;
    resize: vertical;
    background: rgba(5, 2, 18, 0.7);
}
.question-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.q-answer { min-height: 38px; }
.q-skip {
    min-height: 38px;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--color-text-muted);
}
.q-skip:hover { color: var(--color-danger); border-color: var(--color-danger); }

/* Jauges de la page Conscience (humeur / énergie / intérêt / tendance) */
.gauge { margin: 10px 0; }
.gauge-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--color-text-soft);
    margin-bottom: 5px;
}
.gauge-head b { color: var(--color-secondary-soft); font-variant-numeric: tabular-nums; }
.gauge-track {
    height: 9px;
    border-radius: 999px;
    background: rgba(8, 5, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.gauge-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(168, 92, 255, 0.9), rgba(216, 107, 255, 0.7));
    box-shadow: 0 0 14px rgba(168, 92, 255, 0.4);
    transition: width var(--t-med, 320ms) var(--ease-out, ease);
}

@keyframes holoDrift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes signalSweep {
    0%, 100% { transform: translateX(-25%); opacity: 0.55; }
    50% { transform: translateX(140%); opacity: 1; }
}

@media (max-width: 980px) {
    .site-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px;
    }
    .site-nav { justify-content: flex-start; }
    main.page-shell {
        width: min(100vw - 20px, 1240px);
        padding-top: 18px;
    }
    /* Chat mobile : body devient une colonne flex (header auto, page-shell
       flex:1) au lieu de deviner la hauteur du header en dur -- il n'a pas
       la même hauteur rendue partout (retour à la ligne du nav, etc). C'est
       ce qui manquait pour que grid-template-rows: auto minmax(0,1fr) (déjà
       en place, cf. règle de base) sache réellement quoi remplir : un
       conteneur grid à hauteur auto ne peut rien distribuer à sa piste 1fr. */
    body.chat-page {
        /* min-height alone (already set above, unconditionally) isn't
           enough here either: a flex container with only a MINIMUM just
           grows to fit whatever its children naturally want, same trap as
           chat-console before. An actual height is what forces flex-grow to
           truly cap main.page-shell at "viewport minus header" instead of
           letting it (and everything under it) expand past the screen. */
        height: var(--app-height, 100dvh);
        display: flex;
        flex-direction: column;
    }
    /* On a genuinely too-short viewport, the squeeze should land on the
       chat area (which already scrolls internally), never on the header
       shrinking into illegibility -- flex-shrink defaults to 1 for both. */
    body.chat-page > .site-header {
        flex-shrink: 0;
    }
    .chat-page main.page-shell {
        width: min(100vw - 20px, 1320px);
        flex: 1 1 auto;
        min-height: 0;
        padding-top: 18px;
    }
    .page-lead,
    .auth-scene,
    .chat-shell {
        grid-template-columns: 1fr;
    }
    /* Le bandeau "Liaison établie / Amélia - canal privé" et l'en-tête
       "Dialogue / PARLE AVEC AMÉLIA" du panneau chat redisent tous les deux
       ce que dit déjà la barre de statut compacte -- trois couches de
       "tu parles à Amélia" avant le premier message. Mesuré en direct :
       même une fois .chat-console correctement borné (piste 1fr), son seul
       en-tête interne (141px) plus la zone de saisie (252px) dépassaient
       déjà le budget disponible, avant même que l'historique n'ait quoi que
       ce soit. Repliés sur mobile, conformément à la consigne du produit :
       barre compacte, PUIS directement historique + saisie. */
    .chat-page .page-lead {
        display: none;
    }
    .console-top {
        display: none;
    }
    .chat-shell {
        min-height: 0;
        height: auto;
        /* Doit rester sur la piste 1fr explicitement : avec .page-lead
           replié ci-dessus, l'auto-placement grid le ferait sinon glisser
           dans la 1re piste "auto" (celle libérée par .page-lead) au lieu
           de la 2e -- mesuré en direct : .chat-shell tombait à 438px de
           haut avec ~250px d'espace disponible non utilisé au-dessus de la
           nav basse, jusqu'à l'ajout de ce placement explicite. */
        grid-row: 2;
        /* 3 pistes explicites (statut, cœur détaillé, console) : sans ça,
           l'auto-placement grid donnerait à .chat-console la 2e piste "auto"
           dès que .amelia-core est display:none (état par défaut, replié),
           pas la 3e piste "1fr" -- le placement explicite ci-dessous rend ça
           indépendant du nombre d'éléments réellement visibles. */
        grid-template-rows: auto auto 1fr;
    }
    .amelia-status-bar { grid-row: 1; }
    .amelia-core.expanded { grid-row: 2; }
    /* Scène Amélia détaillée repliée par défaut sous 980px, derrière une
       barre de statut compacte -- elle ne doit jamais retarder l'accès au
       chat. display:none (pas max-height) : simple, pas de conflit de
       spécificité avec les autres règles .amelia-core de ce fichier. */
    .amelia-status-bar {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        min-height: 44px;
        padding: 8px 14px;
        margin-bottom: var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface-2);
        color: var(--color-text-soft);
        cursor: pointer;
        text-align: left;
        font: inherit;
    }
    .status-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .status-text { flex: 1; font-size: 13px; }
    .status-chevron {
        color: var(--color-text-muted);
        transition: transform 0.15s ease;
    }
    .amelia-status-bar[aria-expanded="true"] .status-chevron {
        transform: rotate(180deg);
    }
    .amelia-core {
        display: none;
    }
    .amelia-core.expanded {
        display: grid;
        min-height: 420px;
        margin-bottom: var(--space-2);
    }
    .chat-console {
        /* Fixed vh guesses (tried first: 62vh/68vh) kept overshooting the
           real remaining space once header + banner + status bar were all
           accounted for -- confirmed live: input form measured starting at
           y=908 on a 901px-tall viewport, already off-screen. grid-row: 3
           against the explicit 1fr track above is exact by construction
           instead of a guess: whatever's actually left after the other two
           rows, however tall they render on a given device/font/content. */
        grid-row: 3;
        min-height: 0;
        height: auto;
    }
    .chat-log {
        /* flex: 1 1 auto + height: 100% (desktop) fight each other once the
           child is a scrolling element with far more content than fits:
           auto-basis-from-height interacts with flex's content-based
           minimum sizing and starves the item instead of growing it --
           confirmed live, repeatedly, across several attempts. flex-basis:
           0 sidesteps the ambiguity entirely: start from nothing, grow to
           fill whatever chat-form and the other siblings don't need. */
        flex: 1 1 0;
        height: auto;
        min-height: 0;
    }
    .chat-form textarea {
        /* 150px (desktop default) plus the action row plus console padding
           routinely didn't fit in the space actually left on a real phone.
           Still comfortably larger than the 44px minimum touch target. */
        min-height: 60px;
    }
    .feature-card { grid-column: span 6; }
    .admin-col-3, .admin-col-4, .admin-col-6, .admin-col-8 { grid-column: span 6; }
}

@media (max-width: 720px) {
    body { min-height: var(--app-height, 100dvh); }
    main.page-shell {
        width: min(100vw - 14px, 1240px);
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .chat-page main.page-shell {
        width: min(100vw - 14px, 1320px);
        gap: 14px;
    }
    .page-lead > div,
    .hero-card,
    .auth-intro,
    .auth-panel,
    .panel,
    .chat-console {
        padding: var(--space-3);
    }
    .page-lead h2,
    .auth-intro h2,
    .auth-panel h3,
    .console-top h3 {
        font-size: clamp(1.65rem, 1.25rem + 1vw, 2.3rem);
    }
    .feature-grid,
    .memory-grid,
    .stats-grid,
    .section-grid,
    .admin-grid {
        grid-template-columns: 1fr;
    }
    /* Dozens of panels across /me, /agent, /users/{id}, /social set their
       column span via an INLINE style="grid-column: span N" (never a class),
       so the class-based reset just below never touches them -- confirmed
       live on a real phone: "Profil durable" rendered crushed under "Faits
       appris" because both still tried to occupy half of a grid that only
       has one column here. Inline styles beat non-important author rules
       regardless of selector, so this needs !important; the attribute
       selector catches every such panel on every page in one place instead
       of hunting down each container. */
    [style*="grid-column: span"] {
        grid-column: 1 / -1 !important;
    }
    .feature-card,
    .admin-col-3,
    .admin-col-4,
    .admin-col-6,
    .admin-col-8,
    .admin-col-12 {
        grid-column: 1;
    }
    .form-grid,
    .chat-form {
        grid-template-columns: 1fr;
    }
    .console-top {
        flex-direction: column;
    }
    .chat-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .chat-actions button,
    .chat-add {
        width: 100%;
    }
    .chat-add > summary {
        width: 100%;
    }
    .chat-status { text-align: left; }
    .chat-msg { max-width: 100%; }
    .kv { grid-template-columns: 1fr; }
    /* No min-height override here anymore -- see the 980px tier's .chat-log
       rule (flex: 1 1 0) for why a vh floor kept reintroducing the same
       "input pushed off-screen" bug this fixes. */

    /* Barre basse mobile remplace le nav du header : évite la grille de
       boutons tassés en haut d'écran. */
    .site-header .site-nav { display: none; }
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        gap: 4px;
        padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom))
            max(6px, env(safe-area-inset-left));
        background: rgba(8, 4, 22, 0.94);
        border-top: 1px solid var(--color-border);
        backdrop-filter: blur(18px);
    }
    .bottom-nav > a,
    .bottom-nav-more > summary {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 48px;
        padding: 4px;
        border-radius: var(--radius-sm);
        color: var(--color-text-muted);
        font-size: 11px;
        text-align: center;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }
    .bottom-nav-more { position: relative; flex: 1; }
    .bottom-nav-more > summary::-webkit-details-marker { display: none; }
    .bottom-nav > a[aria-current="page"],
    .bottom-nav-more[open] > summary,
    .bottom-nav-more:has(a[aria-current="page"]) > summary {
        color: #fff7ff;
        background: linear-gradient(135deg, rgba(216, 107, 255, 0.24), rgba(127, 226, 255, 0.1));
        box-shadow: inset 0 2px 0 var(--color-secondary);
    }
    .bottom-nav-more__panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        z-index: 40;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: var(--space-1);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-border-strong);
        background: var(--color-surface-3);
        box-shadow: var(--shadow-md);
        min-width: 200px;
    }
    .bottom-nav-more__panel a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 var(--space-2);
        border-radius: var(--radius-sm);
        color: var(--color-text-soft);
    }
    .bottom-nav-more__panel a[aria-current="page"] {
        color: #fff7ff;
        background: rgba(216, 107, 255, 0.16);
    }
    /* Place pour la barre fixe : sinon le dernier contenu (ou la zone de
       saisie du chat) se retrouve masqué derrière. */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
    .chat-page main.page-shell,
    .chat-page body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 460px) {
    .site-header {
        padding: max(12px, env(safe-area-inset-top)) 12px 12px;
    }
    /* .site-nav is display:none from 720px down (see .bottom-nav below) --
       no grid override needed here anymore, the bottom nav replaces it. */
    .chat-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .signal-readout {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }
}

/* Rendu Markdown des réponses d'Amélia dans le chat */
.chat-text code {
    background: rgba(127, 226, 255, 0.12);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.92em;
}
.chat-text pre.chat-code {
    background: var(--color-surface-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: var(--space-1) 0;
    overflow-x: auto;
}
.chat-text pre.chat-code code {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-secondary-soft);
    white-space: pre;
}
.chat-text a { color: var(--color-secondary); }
.chat-text strong { color: var(--color-text); }

/* Mémoire éditable & validations */
.mem-edit h4 { margin: 14px 0 6px; color: var(--color-primary-soft); font-size: 0.95rem; }
.mem-edit-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; margin: 5px 0;
    background: var(--color-surface-1); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.mem-edit-text { flex: 1; min-width: 0; word-break: break-word; }
.mem-forget, .v-approve, .v-reject {
    flex: none; cursor: pointer; border-radius: 10px;
    padding: 5px 12px; font-size: 0.82rem; border: 1px solid var(--color-border-strong);
    background: transparent; color: var(--color-text-muted); transition: all .15s ease;
}
.mem-forget:hover { color: var(--color-danger); border-color: var(--color-danger); }
.validation-row {
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    padding: 8px 10px; margin: 6px 0;
    background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.validation-text { flex: 1; min-width: 0; }
.validation-actions { display: flex; gap: 6px; flex: none; }
.v-approve { color: var(--color-success); border-color: var(--color-success); }
.v-approve:hover { background: var(--color-success); color: var(--color-bg); }
.v-reject:hover { color: var(--color-danger); border-color: var(--color-danger); }

/* Galerie créative */
.gallery-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.gallery-card { margin: 0; border-radius: var(--radius-md); overflow: hidden;
    background: var(--color-surface-1); border: 1px solid var(--color-border); }
.gallery-card img { width: 100%; height: 100%; aspect-ratio: 1 / 1;
    object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-card img:hover { transform: scale(1.04); }
.gallery-card figcaption { padding: 6px 9px; font-size: 0.74rem; color: var(--color-text-muted); }
.gallery-list { display: flex; flex-direction: column; gap: 10px; }
.gallery-card.music { display: flex; align-items: center; gap: var(--space-2);
    padding: 10px 12px; }
.gallery-card.music audio { flex: 1; max-width: 320px; }
.gallery-card.music figcaption { padding: 0; flex: 1; }

/* Écran de jeu d'Amélia (POV Luanti en direct) */
.luanti-screen { margin: 0 0 14px; border-radius: var(--radius-md); overflow: hidden;
    background: #000; border: 1px solid var(--color-border); position: relative; }
.luanti-screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: contain; image-rendering: auto; background: #000; }
.luanti-screen figcaption { padding: 6px 10px; font-size: 0.74rem; }
.luanti-screen figcaption.live { color: var(--color-primary); font-weight: 600;
    text-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.luanti-screen figcaption.live::before { content: '';
    display: inline-block; width: 8px; height: 8px; margin-right: 6px;
    border-radius: 50%; background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary); animation: luantiPulse 1.4s ease-in-out infinite; }
@keyframes luantiPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
    .luanti-screen figcaption.live::before { animation: none; }
}

/* ============================================================
   FLUID REFRESH (v1.16) — mouvement doux, verre plus profond,
   MÊMES couleurs cyberpunk (on réutilise les variables). Couche
   purement additive : n'altère pas les structures, elle adoucit
   et anime. Respecte prefers-reduced-motion.
   ============================================================ */
:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 180ms;
    --t-med: 320ms;
    --t-slow: 580ms;
}

/* Transitions homogènes et fluides sur tout l'interactif */
a, button, a.button, .site-nav a, .pill, .tag,
.feature-card, .info-card, .kpi .card, .metric,
.panel, .hero-card, .chat-console, .amelia-core,
.gallery-card, .gallery-card img, .chat-asset,
textarea, input, select, .mem-edit-row, .validation-row {
    transition:
        transform var(--t-med) var(--ease-out),
        box-shadow var(--t-med) var(--ease-out),
        border-color var(--t-fast) var(--ease-soft),
        background var(--t-med) var(--ease-soft),
        color var(--t-fast) var(--ease-soft),
        opacity var(--t-fast) var(--ease-soft);
}

/* Verre plus profond + léger soulèvement au survol des surfaces */
.panel, .hero-card, .feature-card, .info-card, .metric,
.chat-console, .amelia-core, .auth-panel, .auth-intro {
    backdrop-filter: blur(22px) saturate(1.16);
    -webkit-backdrop-filter: blur(22px) saturate(1.16);
}
.feature-card:hover, .info-card:hover, .metric:hover, .gallery-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-strong);
    box-shadow: 0 30px 60px rgba(2, 0, 10, 0.5), 0 0 34px rgba(216, 107, 255, 0.16);
}
/* Panneaux de contenu : léger soulèvement + halo au survol (pas les colonnes
   du chat, qui doivent rester stables). */
.panel:hover, .hero-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-strong);
    box-shadow: 0 32px 64px rgba(2, 0, 10, 0.52), 0 0 36px rgba(216, 107, 255, 0.18);
}
/* Entrée « boot » : les panneaux montent en fondu au chargement (effet HUD qui
   s'allume). Léger décalage en cascade sur les grilles. */
.panel, .hero-card, .auth-panel, .auth-intro {
    animation: panelRise var(--t-slow, 480ms) var(--ease-out, ease) both;
}
.section-grid > *:nth-child(2), .memory-grid > *:nth-child(2), .admin-grid > *:nth-child(2) { animation-delay: 60ms; }
.section-grid > *:nth-child(3), .memory-grid > *:nth-child(3), .admin-grid > *:nth-child(3) { animation-delay: 120ms; }
.section-grid > *:nth-child(4), .memory-grid > *:nth-child(4), .admin-grid > *:nth-child(4) { animation-delay: 180ms; }
.section-grid > *:nth-child(n+5), .memory-grid > *:nth-child(n+5), .admin-grid > *:nth-child(n+5) { animation-delay: 240ms; }
@keyframes panelRise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* L'ambiance respire très lentement (le fond dérive à peine) */
body::before { animation: auroraDrift 26s var(--ease-soft) infinite alternate; }
@keyframes auroraDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: 0.85; }
    50%  { transform: translate3d(0, -2%, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(0, 1%, 0) scale(1.02);  opacity: 0.9; }
}

/* Boutons : un éclat fluide balaie la surface au survol */
button, a.button { position: relative; overflow: hidden; }
button::after, a.button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 32%, rgba(255, 255, 255, 0.18) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform var(--t-slow) var(--ease-out);
    pointer-events: none;
}
button:hover::after, a.button:hover::after { transform: translateX(130%); }
button:active, a.button:active { transform: translateY(0) scale(0.97); }

/* Nav : halo doux sous la pastille au survol */
.site-nav a:hover { box-shadow: 0 8px 22px rgba(216, 107, 255, 0.22); }

/* Champs : focus fluide avec anneau néon cyan */
textarea:focus, input:focus, select:focus {
    outline: none;
    border-color: rgba(127, 226, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(127, 226, 255, 0.14), 0 0 22px rgba(216, 107, 255, 0.12);
}

/* Composer : l'encadré s'illumine quand on écrit */
.chat-form { transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-med) var(--ease-out); }
.chat-form:focus-within {
    border-color: rgba(var(--halo-rgb), 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 30px rgba(var(--halo-rgb), 0.22);
}

/* Bulles de chat : entrée douce + survol vivant */
.chat-msg {
    animation: bubbleIn var(--t-med) var(--ease-out) both;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.chat-msg:hover { transform: translateY(-1px); }
@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Avatar : le halo respire (en plus des lignes holo qui tournent déjà) */
.avatar-frame { animation: corePulse 6.5s var(--ease-soft) infinite; }
@keyframes corePulse {
    0%, 100% { box-shadow: 0 0 52px rgba(var(--halo-rgb), 0.42), 0 0 120px rgba(86, 40, 176, 0.26), inset 0 0 58px rgba(0, 0, 0, 0.74); }
    50%      { box-shadow: 0 0 72px rgba(var(--halo-rgb), 0.6), 0 0 150px rgba(86, 40, 176, 0.34), inset 0 0 58px rgba(0, 0, 0, 0.74); }
}

/* Défilement de page plus doux (le chat garde son auto-scroll natif) */
html { scroll-behavior: smooth; }

/* Accessibilité : on coupe tout le mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   ERGONOMIE v2.243 — Titres, listes, espacement, focus, forms
   ============================================================ */

/* 1. H2 dans la zone contenu : lisible, pas criard */
main.page-shell h2 {
    margin: 32px 0 10px;
    font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
    font-weight: 700;
    font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
    text-transform: none;
    letter-spacing: 0.08em;
    color: var(--color-secondary-soft);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}
main.page-shell h2:first-child { margin-top: 0; }
main.page-shell h2 + p,
main.page-shell h2 + .table-wrap,
main.page-shell h2 + ul,
main.page-shell h2 + section { margin-top: 0; }

/* Page-lead h2 garde le look hero (grande typo, pas monospace) */
.page-lead h2 {
    font-family: "Aptos Display", "Bahnschrift", "Segoe UI Variable Display", sans-serif !important;
    font-size: clamp(1.85rem, 1.35rem + 1vw, 2.9rem) !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    margin: 0 !important;
    border: none !important;
    padding-bottom: 0 !important;
    color: #fff6ea !important;
}

/* 2. Sections panel qui se suivent : respiration */
section.panel + section.panel,
.panel ~ section.panel {
    margin-top: var(--space-3);
}
.admin-actions + section.panel { margin-top: var(--space-3); }

/* 3. Listes dans la zone contenu */
main.page-shell ul:not([class]):not(.site-nav),
main.page-shell ul.stack-list + ul,
main.page-shell ol:not([class]) {
    padding-left: 0;
    margin: 6px 0 16px;
    list-style: none;
    display: grid;
    gap: 5px;
}
main.page-shell ul:not([class]) li,
main.page-shell ol:not([class]) li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--color-text-soft);
    line-height: 1.55;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.02);
    transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
main.page-shell ul:not([class]) li::before {
    content: "·";
    color: var(--color-secondary);
    flex-shrink: 0;
    font-size: 1.2em;
}
main.page-shell ul:not([class]) li:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--color-border-strong);
}

/* 4. Paragraphes de contenu */
main.page-shell > p:not(.muted),
.panel > p:not(.muted) { margin: var(--space-1) 0; line-height: 1.62; }
main.page-shell > p.muted,
.panel > p.muted { margin: 6px 0; }

/* 5. Table-wrap — coins arrondis + défilement propre */
.table-wrap {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 107, 255, 0.4) transparent;
}
.table-wrap table { margin: 0; }
.table-wrap table tr:last-child td { border-bottom: none; }
.table-wrap table thead th { background: rgba(255,255,255,0.025); }
.table-wrap + .table-wrap { margin-top: var(--space-2); }

/* 6. Focus clavier visible */
:focus-visible {
    outline: 2px solid rgba(127, 226, 255, 0.7);
    outline-offset: 3px;
    border-radius: 4px;
}
button:focus-visible, a.button:focus-visible { border-radius: 999px; outline-offset: 2px; }
a:focus-visible { border-radius: 3px; }

/* 7. Select — flèche personnalisée cohérente */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 4.5L11 1' stroke='%23a999d6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 38px;
    cursor: pointer;
}

/* 8. Code inline hors chat */
:not(.chat-text) > code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: rgba(127, 226, 255, 0.10);
    border: 1px solid rgba(127, 226, 255, 0.18);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--color-secondary-soft);
    word-break: break-all;
}

/* 9. Métrique : indication visuelle quand warn/bad */
.metric.bad { border-color: rgba(255, 134, 190, 0.32); }
.metric.warn { border-color: rgba(255, 210, 122, 0.26); }
.metric.bad small, .metric.bad p { color: rgba(255, 134, 190, 0.85); }
.metric.warn small, .metric.warn p { color: rgba(255, 210, 122, 0.85); }

/* 10. HR */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 22px 0;
}

/* 11. Tooltip title natif — curseur help */
[title]:not(td):not(th) { cursor: help; }
a[title], button[title] { cursor: pointer; }

/* 12. Details / summary harmonisé (hors nav-more, chat-add, bottom-nav-more :
   ces trois-là ont leur propre style ET un panneau en position:absolute qui
   déborde volontairement de la boîte du <details> -- l'overflow:hidden générique
   ci-dessous le découperait à l'invisible tout en laissant [open] bien à true,
   ce qui ressemble exactement à "le bouton ne répond pas" côté utilisateur). */
details:not(.nav-more):not(.chat-add):not(.bottom-nav-more) {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
details:not(.nav-more):not(.chat-add):not(.bottom-nav-more) > summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 10px 14px;
    background: rgba(255,255,255,0.025);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary-soft);
    transition: background var(--t-fast) ease;
}
details:not(.nav-more):not(.chat-add):not(.bottom-nav-more) > summary::-webkit-details-marker { display: none; }
details:not(.nav-more):not(.chat-add):not(.bottom-nav-more) > summary::before { content: "▸  "; color: var(--color-secondary); }
details:not(.nav-more):not(.chat-add):not(.bottom-nav-more)[open] > summary::before { content: "▾  "; }
details:not(.nav-more):not(.chat-add):not(.bottom-nav-more) > summary:hover { background: rgba(255,255,255,0.04); }
details:not(.nav-more):not(.chat-add):not(.bottom-nav-more)[open] > *:not(summary) {
    padding: 12px 14px;
    border-top: 1px solid var(--color-border);
}
.admin-detail { margin-bottom: var(--space-2); }

/* État admin niveau 1/2 : jamais le même poids visuel qu'une carte d'info
   -- l'alerte a une bordure de couleur, un badge texte, jamais la couleur
   seule pour porter l'état. */
.state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2);
}
.state-card {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-1);
}
.state-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    margin-bottom: 4px;
}
.state-label { font-weight: 600; font-size: 13px; }
.state-detail { display: block; color: var(--color-text-muted); font-size: 12px; }
.state-card.state-bad { border-color: var(--color-danger); }
.state-card.state-warn { border-color: var(--color-warning); }

.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface-1);
}
.alert-item.alert-bad { border-color: var(--color-danger); background: rgba(255, 134, 190, 0.08); }
.alert-item.alert-warn { border-color: var(--color-warning); background: rgba(255, 210, 122, 0.08); }
.alert-item div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.alert-item div span { color: var(--color-text-muted); font-size: 12px; }
.alert-empty { color: var(--color-text-muted); font-size: 13px; }

.admin-tier-3-heading {
    margin: var(--space-3) 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* 13. Séparateur visuel autour des sections de la console admin */
.admin-actions {
    margin-bottom: var(--space-3);
}

/* 14. Pill/tag — survol léger */
.pill, .tag {
    cursor: default;
    transition: background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-out);
}
.pill:hover, .tag:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.22); }

/* 15. Scrollbar fine sur les panels */
.panel, .agent-stream {
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 107, 255, 0.35) transparent;
}

/* 16. KPI min plus petit sur mobile */
@media (max-width: 460px) {
    .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi .card b { font-size: 1.1rem; }
}

/* 17. Table standalone (hors table-wrap) — arrondi + bord */
main.page-shell > table,
.panel > table {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    width: 100%;
    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 107, 255, 0.4) transparent;
}

/* 18. Section spacing dans la page agent/social */
.memory-grid, .section-grid { margin-top: var(--space-3); }
.memory-grid + .memory-grid, .section-grid + .section-grid { margin-top: 0; }

/* 19. Texte sélectionné dans les listes */
main.page-shell ul:not([class]) li::selection,
main.page-shell ol:not([class]) li::selection {
    background: rgba(216, 107, 255, 0.36);
    color: #fff7ff;
}

/* 20. Admin dashboard — premier h2 est le titre principal */
main.page-shell h2:first-of-type {
    font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.3rem);
    color: var(--color-text);
    letter-spacing: 0.06em;
}

/* =========================================================================
   RESTYLE « FLAT PERF » (2026-07-26) — mêmes tons violet/magenta/cyan, mais on
   RETIRE ce qui saturait le GPU (le chat montait à ~100 % sur TOUS les appareils) :
   - toutes les animations décoratives PERMANENTES (fond aurora plein écran,
     grille dérivante, scanline, orbites, pulses HUD…) — les transitions au survol
     restent (elles ne coûtent rien au repos) ;
   - tous les backdrop-filter (flou d'arrière-plan = le pire coût GPU, surtout mobile).
   Résultat : interface PLATE, calme et nette, dans les mêmes couleurs.
   ========================================================================= */
*, *::before, *::after {
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Panneaux OPAQUES : sans le flou, on veut des surfaces pleines et lisibles. */
:root {
    --color-surface-2: #150b2a;
    --color-surface-3: #0d0620;
    --color-surface-1: #1c1140;
}
/* Ombres légères et STATIQUES (fini les glows animés lourds). */
.panel, .hero-card, .chat-console, .feature-card, .auth-panel, .auth-intro,
.nav-more__panel, .amelia-core {
    box-shadow: 0 8px 26px rgba(2, 0, 12, 0.42) !important;
}
/* mix-blend-mode (scanline) = compositing coûteux → neutralisé. */
[class*="scan"] { mix-blend-mode: normal !important; }

/* =========================================================================
   CHAT — style « dashboard » épuré (Linear/Vercel-like, mêmes tons). Surfaces
   PLEINES, bordures fines nettes, 1 accent (magenta) pour l'utilisateur, surface
   neutre pour Amélia. Zéro ombre/blur/gradient lourd → lisible et léger.
   ========================================================================= */
.chat-console {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
.chat-msg {
    max-width: min(82%, 720px);
    padding: 11px 14px;
    margin: var(--space-1) 0;
    border-radius: 14px !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
    line-height: 1.5;
}
.chat-msg.assistant {
    background: #170d30 !important;                     /* surface neutre lisible */
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}
.chat-msg.user {
    background: rgba(216, 107, 255, 0.16) !important;   /* accent magenta discret */
    border-color: rgba(216, 107, 255, 0.42) !important;
    color: #fbf4ff !important;
}
.chat-form {
    background: var(--color-surface-3) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
.chat-form textarea {
    background: #0b0620 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
}
.chat-form textarea:focus {
    outline: none;
    border-color: var(--color-primary) !important;
}
.chat-actions button { border-radius: 12px !important; }

/* Danse musicale autonome (prototype V1) */
.dance-upload { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.dance-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; font-size: 0.9rem; color: var(--color-text-muted); }
.dance-mode-badge { padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; border: 1px solid var(--color-border); }
.dance-mode-badge.dance-mode-llm { color: var(--color-success); border-color: var(--color-success); }
.dance-mode-badge.dance-mode-fallback { color: var(--color-warning); border-color: var(--color-warning); }
.dance-explanation { font-style: italic; color: var(--color-text-muted); max-width: 60ch; }
.dance-timeline {
    display: flex; height: 34px; border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--color-border); margin: 12px 0;
}
.dance-timeline-seg {
    background: var(--color-primary); border-right: 1px solid var(--color-bg);
    cursor: pointer; transition: filter .15s ease;
}
.dance-timeline-seg:last-child { border-right: none; }
.dance-timeline-seg:hover { filter: brightness(1.2); }
.dance-timeline-seg.active { outline: 2px solid var(--color-success); outline-offset: -2px; }
.dance-segment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dance-segment-list li {
    padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer;
    font-size: 0.85rem; color: var(--color-text-muted);
}
.dance-segment-list li:hover { background: var(--color-surface-1); }
.dance-segment-list li.active { background: var(--color-surface-1); color: var(--color-text); font-weight: 600; }
.dance-avatar {
    width: 100%; max-width: 420px; height: 420px; margin-top: 14px;
    border-radius: var(--radius-md); overflow: hidden;
    background: radial-gradient(circle at 50% 30%, rgba(216,107,255,0.12), transparent 70%);
    border: 1px solid var(--color-border);
}
.dance-avatar canvas { display: block; width: 100% !important; height: 100% !important; }