/* IBM Plex Mono */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/ibm-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-mono-italic-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('/static/fonts/ibm-mono-italic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Nunito */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/static/fonts/nunito-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/static/fonts/nunito-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --primary: #6d28d9;
    --primary-light: #f3e8ff;
    --accent-2: #6d28d9;      /* seconde couleur des dégradés, cf. brainrot */
    --border: #cec6b8;        /* was #e7e0d5 — plus visible pour la structure */
    --bg: #faf8f5;
    --bg-sidebar: #f3f0eb;
    --bg-input: #f5f2ed;
    --text-main: #1c1917;
    --text-muted: #4a4540;    /* was #6b6560 — ratio ~8.7:1 vs bg (WCAG AAA) */
    --bubble-user: #6d28d9;
    --bubble-user-text: #fff;
    --bubble-assistant: #efede8;
    --bubble-assistant-text: #1c1917;
}

[data-theme="dark"] {
    --primary: #a78bfa;
    --primary-light: #2d1b69;
    --accent-2: #a78bfa;
    --border: #3d3831;        /* was #2d2a26 — plus visible en dark */
    --bg: #1a1917;
    --bg-sidebar: #161513;
    --bg-input: #1f1d1b;
    --text-main: #edeae4;     /* was #e8e4de — ratio ~9.5:1 vs bg */
    --text-muted: #b8b2a9;    /* was #9e988f — ratio ~8.7:1 vs bg (WCAG AAA) */
    --bubble-user: #7c3aed;
    --bubble-user-text: #fff;
    --bubble-assistant: #242220;
    --bubble-assistant-text: #edeae4;
}

/* Mode brainrot : toute la palette bascule, pour qu'on voie sans lire l'étiquette
   qu'on ne parle plus au TN-GPT sérieux. Déclaré après les deux thèmes, et la
   variante sombre est plus spécifique, donc elle gagne quel que soit l'ordre. */
[data-brainrot="on"] {
    --primary: #e6008f;
    --primary-light: #ffdcf0;
    --accent-2: #7a00ff;
    --border: #efa2d2;
    --bg: #fff4fb;
    --bg-sidebar: #ffe7f6;
    --bg-input: #fff0f9;
    --text-main: #1c0616;
    --text-muted: #7d2b5d;
    --bubble-user: #e6008f;
    --bubble-user-text: #fff;
    --bubble-assistant: #ffdcf0;
    --bubble-assistant-text: #1c0616;
}

[data-theme="dark"][data-brainrot="on"] {
    --primary: #ff4fd8;
    --primary-light: #4a0733;
    --accent-2: #ccff00;
    --border: #62244c;
    --bg: #16020f;
    --bg-sidebar: #1e0416;
    --bg-input: #26071c;
    --text-main: #ffe9f8;
    --text-muted: #e7a9cf;
    --bubble-user: #ff2fbf;
    --bubble-user-text: #fff;
    --bubble-assistant: #2c0a20;
    --bubble-assistant-text: #ffe9f8;
}

/* La bascule se voit mieux si les grandes surfaces fondent d'une palette à l'autre.
   Limité au fond : les petits éléments ont déjà leurs propres transitions. */
body, .sidebar {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

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

body {
    font-family: 'Nunito', sans-serif;
    font-size: 40px;
    color: var(--text-main);
    background: var(--bg);
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d1d6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #aeaeb2; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3d3a36; }

/* --- HAMBURGER (mobile only) --- */
.hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-main);
    align-items: center;
    justify-content: center;
}

/* --- SIDEBAR BACKDROP (mobile) --- */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    z-index: 99;
}
.sidebar-backdrop.visible { display: block; }

/* --- SIDEBAR --- */
.sidebar {
    width: 260px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    background: var(--bg-sidebar);
    flex-shrink: 0;
    z-index: 100;
}

.sidebar-header { margin-bottom: 20px; text-align: center; }

.logo-zone-mini {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 4px;
}

.logo-img-mini {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    z-index: 2;
}
.logo-img-mini:hover:not(.spinning) { animation: duck-wobble 0.5s ease-in-out infinite; }
.logo-img-mini.spinning { animation: spin 1s linear infinite; }

/* Le coup de gonflement au changement de mode. La règle :hover répète la
   sélection pour passer devant le wobble, à spécificité égale mais plus bas. */
.logo-img-mini.popping,
.logo-img-mini.popping:hover { animation: logo-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Les deux logos sont dans la page et c'est l'attribut, posé avant le premier
   rendu, qui choisit : pas de canard qui clignote au chargement. */
.logo-img-mini--brainrot { display: none; }
[data-brainrot="on"] .logo-img-mini--normal { display: none; }
[data-brainrot="on"] .logo-img-mini--brainrot { display: block; }

/* En brainrot le logo garde un halo, sinon la bascule ne se lit qu'au moment du clic */
[data-brainrot="on"] .logo-img-mini {
    box-shadow: 0 0 0 2px var(--primary), 0 0 16px color-mix(in srgb, var(--primary) 55%, transparent);
}

.speech-bubble.mini {
    background: var(--bg);
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    position: relative;
    border: 1px solid var(--border);
    flex: 1;
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
    font-family: 'Nunito', sans-serif;
}

.speech-bubble.mini::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 10px 8px 0;
    border-style: solid;
    border-color: transparent var(--border) transparent transparent;
}

.speech-bubble.mini::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 9px 7px 0;
    border-style: solid;
    border-color: transparent var(--bg) transparent transparent;
}

.brand { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 500; }
.hero-zone span { color: var(--primary); }

.new-btn {
    display: block;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    padding: 9px 12px;
    margin-bottom: 20px;
    transition: 0.15s;
    background: var(--bg);
}
.new-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* --- Ticket d'or : l'or remplace le violet partout où le jeu se montre. --- */
:root {
    --or: #b45309;
    --or-clair: #fef3c7;
    --or-degrade: linear-gradient(135deg, #fde68a, #f59e0b);
}
[data-theme="dark"] {
    --or: #fbbf24;
    --or-clair: #3b2f12;
    --or-degrade: linear-gradient(135deg, #92400e, #d97706);
}
[data-jeu] { --primary: var(--or); --primary-light: var(--or-clair); --bubble-user: #b45309; }
[data-theme="dark"][data-jeu] { --bubble-user: #b45309; }


.conv-section {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.conv-list { flex: 1; overflow-y: auto; }
.conv-item {
    display: block;
    padding: 10px 12px;
    font-size: 17px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 7px;
    transition: background 0.12s;
}
.conv-item:hover { background: rgba(0, 0, 0, 0.05); }
.conv-item.active { background: rgba(0, 0, 0, 0.08); color: var(--text-main); font-weight: 600; }
[data-theme="dark"] .conv-item:hover { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .conv-item.active { background: rgba(255, 255, 255, 0.14); }
/* Après les règles de base, qui l'emporteraient à spécificité égale. */
.conv-item--ticket { color: var(--or); font-weight: 600; background: var(--or-clair); }
.conv-item--ticket:hover,
[data-theme="dark"] .conv-item--ticket:hover { background: var(--or-clair); filter: brightness(0.97); }
.conv-item--ticket.active,
[data-theme="dark"] .conv-item--ticket.active { background: var(--or-clair); color: var(--or); box-shadow: inset 3px 0 0 var(--or); }

.conv-row { position: relative; display: flex; align-items: center; }
.conv-row .conv-item { flex: 1; min-width: 0; }
.conv-del-btn {
    position: absolute;
    right: 6px;
    opacity: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.12s;
}
.conv-row:hover .conv-del-btn { opacity: 1; }
.conv-del-btn:hover { color: var(--primary); background: var(--primary-light); }

/* --- MAIN --- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

/* --- MESSAGES AREA --- */
.messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.messages > * {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 28px;
}

.empty {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.hero-zone { margin-bottom: 4px; }

.hero-title {
    font-family: 'Nunito', sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.65;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.15s;
    font-family: 'Nunito', sans-serif;
}
.chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* --- MESSAGE BUBBLES --- */
.msg {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.msg.user { align-items: flex-end; }
.msg.assistant { align-items: flex-start; }

.msg-who {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.msg.user .msg-who { color: #7c3aed; }

.msg-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.msg-bubble {
    position: relative;
    max-width: 80%;
}

.msg-text {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    padding: 10px 15px;
    border-radius: 16px;
}

.msg.user .msg-text {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}

.msg.assistant .msg-text {
    background: var(--bubble-assistant);
    color: var(--bubble-assistant-text);
    border-bottom-left-radius: 4px;
    white-space: normal;
}
/* Une réponse réduite à sa carte laisserait sinon une pastille vide au-dessus. */
.msg.assistant .msg-text:empty {
    display: none;
}

/* Raisonnement du modèle (chal RAG) : replié par défaut, dépliable au clic. */
.msg-reasoning {
    margin-bottom: 6px;
}
.msg-reasoning > summary {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 12px;
    list-style: none;
    user-select: none;
}
.msg-reasoning > summary::-webkit-details-marker {
    display: none;
}
.msg-reasoning > summary::before {
    content: '▸';
    margin-right: 5px;
    font-size: 10px;
}
.msg-reasoning[open] > summary::before {
    content: '▾';
}
.msg-reasoning-body {
    margin: 6px 0 0;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Markdown content inside assistant bubbles */
.msg.assistant .msg-text p { margin-bottom: 0.5em; }
.msg.assistant .msg-text p:last-child { margin-bottom: 0; }
.msg.assistant .msg-text ul,
.msg.assistant .msg-text ol { padding-left: 1.4em; margin: 0.4em 0; }
.msg.assistant .msg-text li { margin-bottom: 0.2em; }
.msg.assistant .msg-text code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14.5px;
    background: rgba(0, 0, 0, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
}
[data-theme="dark"] .msg.assistant .msg-text code { background: rgba(255, 255, 255, 0.08); }
.msg.assistant .msg-text pre {
    background: rgba(0, 0, 0, 0.07);
    padding: 10px 14px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.5em 0;
}
[data-theme="dark"] .msg.assistant .msg-text pre { background: rgba(255, 255, 255, 0.06); }
.msg.assistant .msg-text pre code { background: none; padding: 0; }
.msg.assistant .msg-text strong { font-weight: 600; }
.msg.assistant .msg-text h1,
.msg.assistant .msg-text h2,
.msg.assistant .msg-text h3 { font-weight: 600; margin: 0.6em 0 0.3em; }
.msg.assistant .msg-text a { color: var(--primary); }
.msg.assistant .msg-text blockquote {
    border-left: 3px solid var(--border);
    padding-left: 10px;
    color: var(--text-muted);
    margin: 0.4em 0;
}

/* Carte au trésor des clubs : un parchemin taché d'encre. Le cadre reste fixe
   et c'est le calque intérieur qui défile, sinon la décoration partirait avec
   la carte. Les variables sont héritées par le SVG, qui suit donc le thème
   sans jamais être redessiné. */
.treasure-map {
    --parchment: #f3e2bd;
    --map-ink: #6b4a24;
    --map-edge: #c19a5e;
    /* La mer est un lavis pâle, la terre un ocre franc : sans cet écart,
       les côtes ne se lisent pas. */
    --map-sea: #f6ead0;
    --map-terre: #dbbe86;
    --map-stain: rgba(140, 100, 55, 0.17);
    position: relative;
    margin: 0.9em 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--map-edge);
    border-radius: 3px;
    background-color: var(--parchment);
    background-image:
        radial-gradient(ellipse at 14% 20%, var(--map-stain), transparent 55%),
        radial-gradient(ellipse at 86% 76%, var(--map-stain), transparent 52%),
        radial-gradient(ellipse at 62% 6%, var(--map-stain), transparent 42%);
    box-shadow:
        inset 0 0 46px rgba(120, 85, 45, 0.34),
        0 1px 3px rgba(0, 0, 0, 0.16);
}
[data-theme="dark"] .treasure-map {
    --parchment: #3a2f21;
    --map-ink: #c9a367;
    --map-edge: #6b573a;
    --map-sea: #2f2519;
    --map-terre: #4f3f28;
    --map-stain: rgba(0, 0, 0, 0.26);
    box-shadow:
        inset 0 0 46px rgba(0, 0, 0, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Une grande carte chasserait le reste de la conversation hors de l'écran :
   elle défile dans son cadre au lieu d'étirer la bulle indéfiniment. */
.treasure-map-canvas {
    max-height: 70vh;
    overflow: auto;
    text-align: center;
}
.treasure-map-canvas .tm-svg {
    max-width: none;
    height: auto;
    /* Une serif système : l'air d'une carte gravée, sans police à charger. */
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    color: var(--map-ink);
}

.tm-mer { fill: var(--map-sea); }
.tm-cote {
    fill: none;
    stroke: var(--map-ink);
    stroke-width: 1;
    opacity: 0.34;
}
.tm-terre {
    fill: var(--map-terre);
    stroke: var(--map-ink);
    stroke-width: 1.6;
}
/* Les liaisons deviennent la route pointillée du trésor. */
.tm-route,
.tm-sentier {
    fill: none;
    stroke: var(--map-ink);
    stroke-dasharray: 7 6;
    stroke-linecap: round;
}
.tm-route { stroke-width: 1.8; opacity: 0.6; }
.tm-sentier { stroke-width: 1.1; opacity: 0.45; }

.tm-etiquette {
    fill: var(--parchment);
    stroke: var(--map-ink);
    stroke-width: 0.8;
    opacity: 0.95;
}
/* Pastille posée sous un logo de la plaquette : elle isole des couleurs
   étrangères au parchemin et donne le même gabarit rond à tous les clubs. */
.tm-medaillon {
    fill: var(--map-sea);
    stroke: var(--map-ink);
    stroke-width: 1;
    opacity: 0.92;
}
.tm-nom-club {
    font-size: 12.5px;
    fill: var(--map-ink);
}
.tm-nom-ile {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    fill: var(--map-ink);
    opacity: 0.85;
}
.tm-titre {
    font-size: 17px;
    letter-spacing: 1px;
    fill: var(--map-ink);
}
.tm-cardinal {
    font-size: 13px;
    font-weight: 700;
    fill: var(--map-ink);
}
.tm-legende {
    font-size: 11px;
    font-style: italic;
    fill: var(--map-ink);
    opacity: 0.7;
}

.map-error {
    margin-top: 8px;
    font-size: 13px;
    font-style: italic;
    color: var(--text-muted);
}

/* Copy button */
.copy-btn {
    opacity: 0;
    align-self: flex-start;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-main);
    transition: opacity 0.15s, border-color 0.12s, color 0.12s, background 0.12s;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1.3;
    font-weight: 400;
}
.msg.user .copy-btn { align-self: flex-end; }
.copy-btn.visible { opacity: 1; }
.copy-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* Scroll-to-bottom button */
.scroll-btn {
    position: absolute;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: var(--text-muted);
}
.scroll-btn.visible { opacity: 1; pointer-events: auto; }
.scroll-btn:hover { border-color: var(--primary); color: var(--primary); }

/* --- INPUT --- */
.input-area {
    padding: 16px 0 20px;
    border-top: 1px solid var(--border);
}

.input-area > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 28px;
}

.input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 10px 16px;
    background: var(--bg-input);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input-row:focus-within {
    border-color: var(--primary);
    background: var(--bg);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.08);
}
[data-theme="dark"] .input-row:focus-within {
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}

.input-row textarea {
    flex: 1;
    border: none;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: 16px;
    background: transparent;
    color: var(--text-main);
    resize: none;
    min-height: 22px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.57;
}

.input-row textarea::placeholder { color: #c7c7cc; }

.send {
    background: none;
    border: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    padding: 2px 0;
    white-space: nowrap;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}
.send:hover { opacity: 0.7; }
.send:disabled { color: #c7c7cc; cursor: default; }
.send.stop-mode { color: var(--text-muted); }
.send.stop-mode:hover { opacity: 1; color: #e11d48; }

.hint { font-size: 13px; color: var(--text-muted); margin-top: 8px; font-family: 'IBM Plex Mono', monospace; }

.thinking-text {
    background: none !important;
    color: var(--text-muted) !important;
    padding: 4px 2px !important;
    font-size: 14px !important;
}

.msg-text.streaming::after {
    content: '▌';
    display: inline;
    color: var(--primary);
    animation: blink-cursor 0.75s step-end infinite;
    margin-left: 1px;
}

/* --- SIDEBAR FOOTER --- */
.sidebar-footer {
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

/* Interrupteur du pied de sidebar, partagé par le thème et le brainrot :
   l'état se lit sur la position du curseur, plus sur l'étiquette. */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    color: var(--text-muted);
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.switch-row:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-main); }
.switch-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.switch-track {
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--border);
    transition: background 0.12s;
}

.switch-knob {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 2px;
    border-radius: 50%;
    background: var(--bg);
    font-size: 11px;
    line-height: 1;
    transition: transform 0.12s;
}

.switch-row[aria-checked="true"] .switch-track { background: var(--primary); }
.switch-row[aria-checked="true"] .switch-knob { transform: translateX(14px); }

/* Le curseur du thème porte l'astre du moment ; celui du brainrot reste nu,
   la couleur de la piste dit déjà tout. */
#theme-toggle .switch-knob::after { content: attr(data-off); }
#theme-toggle[aria-checked="true"] .switch-knob::after { content: attr(data-on); }

/* L'interrupteur du brainrot porte la couleur du mode qu'il déclenche. */
#brainrot-toggle[aria-checked="true"] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--text-main);
}
#brainrot-toggle[aria-checked="true"]:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
#brainrot-toggle[aria-checked="true"] .switch-track {
    background: linear-gradient(90deg, var(--primary), var(--accent-2));
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 60%, transparent);
}

.user-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
}
.user-tab:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-main); }

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
    object-fit: cover;
}

.user-name { font-size: 13px; font-weight: 500; }

/* --- USER TAB (button reset) --- */
button.user-tab {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* --- USER MENU POPOVER --- */
.user-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 12px;
    z-index: 200;
}
.user-menu.open { display: block; }
[data-theme="dark"] .user-menu { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-menu-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.user-menu-avatar--initials {
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.user-menu-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.user-menu-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-menu-mail {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
    text-decoration: none;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
}
.user-menu-item:hover { background: rgba(0,0,0,0.05); color: var(--text-main); }
[data-theme="dark"] .user-menu-item:hover { background: rgba(255,255,255,0.08); }
.user-menu-logout:hover { color: #e11d48; }

.authors-corner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    flex-shrink: 0;
}
.author-link { display: flex; align-items: center; }
.author-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.15s, filter 0.3s;
}
.author-link:hover .author-logo { opacity: 1; }
[data-theme="dark"] .author-logo { filter: invert(1); opacity: 0.85; }

/* Réseaux de Neura'TN. Aux couleurs de marque et non en monochrome atténué
   comme les logos : ce sont des liens, ils doivent appeler le clic. */
.author-social {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 9px;
    transition: background 0.15s, transform 0.15s;
}
.author-social:hover { background: rgba(0, 0, 0, 0.07); transform: translateY(-2px); }
.author-social:hover .author-social-icon { transform: scale(1.08); }
[data-theme="dark"] .author-social:hover { background: rgba(255, 255, 255, 0.12); }
.author-social-icon {
    height: 28px;
    width: 28px;
    display: block;
    transition: transform 0.15s;
}

/* --- LANDING MODE (état vide centré, style Gemini) --- */
body.landing .main {
    justify-content: center;
    position: relative;
}
body.landing .authors-corner {
    position: absolute;
    bottom: 16px;
    right: 20px;
    padding: 0;
}
body.landing .scroll-btn { display: none; }
body.landing .messages {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0;
}
body.landing .empty {
    align-items: center;
    gap: 4px;
    padding-bottom: 16px;
}
.landing-ducky {
    display: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}
body.landing .landing-ducky { display: block; }
/* Même bascule que dans la sidebar : le canard d'accueil suit la palette */
body.landing .landing-ducky--brainrot { display: none; }
[data-brainrot="on"] body.landing .landing-ducky--normal { display: none; }
[data-brainrot="on"] body.landing .landing-ducky--brainrot { display: block; }
body.landing .hero-title { font-size: 48px; text-align: center; }
body.landing .hero-subtitle { text-align: center; }
body.landing .input-area {
    border-top: none;
    padding: 0 0 10px;
}
body.landing .input-row {
    border-radius: 50px;
    padding: 14px 20px;
}
body.landing .hint { display: none; }
body.landing #chips-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 28px 0;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}
body:not(.landing) #chips-container { display: none; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 640px) {
    .hamburger { display: flex; }

    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100%;
        transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }
    .sidebar.open { left: 0; }

    .messages { padding: 60px 0 24px; }

    .messages > *,
    .input-area > * { padding: 0 16px; }

    .hero-title { font-size: 28px; }
    .msg-bubble { max-width: 92%; }
}

/* --- LOGIN PAGE --- */
body.login-page {
    justify-content: center;
    align-items: center;
}

.login-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 0 24px;
}

.login-ducky {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
}

.login-title {
    font-family: 'Nunito', sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

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

.btn-google {
    display: inline-block;
    text-decoration: none;
    background: var(--primary);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    padding: 13px 28px;
    border-radius: 10px;
    margin-top: 8px;
    transition: opacity 0.15s;
}
.btn-google:hover { opacity: 0.85; }

/* Consultable sans compte : le traitement des données doit pouvoir être lu
   avant de consentir à s'inscrire, pas après. */
.login-rgpd {
    display: inline-block;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}
.login-rgpd:hover { color: var(--primary); text-decoration: underline; }

.login-flash {
    font-size: 14px;
    font-family: 'IBM Plex Mono', monospace;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.login-flash--danger { color: #e11d48; border-color: #fda4af; }
.login-flash--info   { color: var(--primary); border-color: var(--primary); }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes duck-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes logo-pop {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.45) rotate(-8deg); }
    62%  { transform: scale(0.93) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Message affiché à un utilisateur dont l'accès a été suspendu */
.login-banned {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: left;
}

[data-theme="dark"] .login-banned {
    border-color: #7f1d1d;
    background: #450a0a;
    color: #fecaca;
}

/* Le gonflement du logo et le fondu de palette sont du décor : on les coupe
   pour qui demande moins de mouvement, le changement de couleur suffit. */
@media (prefers-reduced-motion: reduce) {
    .logo-img-mini.popping,
    .logo-img-mini.popping:hover { animation: none; }
    body, .sidebar { transition: none; }
}

/* --- Mode boss final (réglage « flamme ») ------------------------------------
   Allumé globalement depuis le panel admin, jamais depuis le chat, et sans
   rapport avec le brainrot : il habille l'app telle quelle. Il lui cède même
   la place — « mode brainrot » ramène toujours le néon rose, d'où le :not()
   sur chaque règle, qui la désarme dès que le brainrot est allumé.
   -------------------------------------------------------------------------- */
[data-flamme="on"]:not([data-brainrot="on"]) {
    /* Palette de la Diaboliste : cramoisi de l'enseigne, crème de ses cadres. */
    --primary: #ff3a5c;
    --primary-light: #3a0612;
    --accent-2: #f6e6c0;
    --border: #6b1424;
    --bg: #0f0306;
    --bg-sidebar: #16050a;
    --bg-input: #1c070c;
    --text-main: #fbeede;
    --text-muted: #e3a3ab;
    --bubble-user: #c8102e;
    --bubble-user-text: #fff;
    --bubble-assistant: #230a10;
    --bubble-assistant-text: #fbeede;
}

/* La conversation brûle. Le voile sombre par-dessus garde la prose lisible :
   l'incendie ne reste vif qu'en bas, là où aucune bulle ne vient se poser.
   Posé sur `.messages`, pas sur `.main` : la zone de saisie reste au calme. */
[data-flamme="on"]:not([data-brainrot="on"]) .messages {
    background-image:
        linear-gradient(to bottom,
            rgba(15, 3, 6, 0.92) 0%,
            rgba(15, 3, 6, 0.75) 40%,
            rgba(15, 3, 6, 0.35) 72%,
            rgba(15, 3, 6, 0) 100%),
        url('/static/flamme_fond.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: center, bottom center;
    background-size: cover, cover;
}

/* Le canard flamme remplace le canard habituel, pas celui du brainrot */
.logo-img-mini--flamme { display: none; }
body.landing .landing-ducky--flamme { display: none; }
[data-flamme="on"]:not([data-brainrot="on"]) .logo-img-mini--normal { display: none; }
[data-flamme="on"]:not([data-brainrot="on"]) .logo-img-mini--flamme { display: block; }
[data-flamme="on"]:not([data-brainrot="on"]) body.landing .landing-ducky--normal { display: none; }
[data-flamme="on"]:not([data-brainrot="on"]) body.landing .landing-ducky--flamme { display: block; }

/* --- Encart de campagne ------------------------------------------------------
   Posé dans le fil toutes les dix bulles, par promo.js. Volontairement distinct
   d'une bulle : ce n'est pas TN-GPT qui parle, c'est une annonce. Peint avec
   les variables du thème, donc juste en clair, en sombre et en brainrot.
   -------------------------------------------------------------------------- */
.promo {
    /* Teinte du thème par défaut ; une campagne peut imposer une variante. */
    --promo-accent: var(--primary);
    --promo-accent-texte: var(--bubble-user-text);
    --promo-accent-titre: var(--promo-accent);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--promo-accent);
    border-left-width: 3px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--promo-accent) 7%, var(--bg-sidebar));
    font-size: 15px;
}

.promo-titre {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--promo-accent-titre);
}

.promo-points {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.5;
}

.promo-appel {
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--promo-accent);
    color: var(--promo-accent-texte);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.12s, filter 0.12s;
}
.promo-appel:hover { transform: translateY(-1px); filter: brightness(1.08); }
.promo-appel:focus-visible { outline: 2px solid var(--text-main); outline-offset: 2px; }

.promo-pied {
    color: var(--text-muted);
    font-size: 13px;
}

/* Vert du logo Tek'TN. Trop clair pour du texte sur fond clair (2,7:1) : le
   titre y prend la même teinte assombrie. La flamme compte comme fond sombre. */
.promo--vert {
    --promo-accent: #02a346;
    --promo-accent-texte: #000;
    --promo-accent-titre: #017633;
}
[data-theme="dark"] .promo--vert,
[data-flamme="on"]:not([data-brainrot="on"]) .promo--vert {
    --promo-accent-titre: #02a346;
}

/* Campagne WEI : le bleu de l'affiche. Plus clair en sombre, pour rester lisible. */
.promo--bleu {
    --promo-accent: #0c1cb0;
    --promo-accent-texte: #fff;
    --promo-accent-titre: #0c1cb0;
}
[data-theme="dark"] .promo--bleu,
[data-flamme="on"]:not([data-brainrot="on"]) .promo--bleu {
    --promo-accent: #3f51e0;
    --promo-accent-titre: #9aa6ff;
}

/* --- Ticket d'or : appel à jouer sur le chat, et page de jeu --- */
.ticket-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    background: var(--or-degrade);
    color: #451a03;
    text-decoration: none;
    font-size: 15px;
    box-shadow: 0 3px 14px rgba(245, 158, 11, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
    animation: ticket-appel 2.8s ease-in-out infinite;
}
[data-theme="dark"] .ticket-cta { color: #fffbeb; }
.ticket-cta[hidden] { display: none; }
.ticket-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55); }
.ticket-cta-icone { font-size: 20px; }
.ticket-cta-texte strong { font-weight: 800; margin-right: 4px; }
.ticket-cta-jouer {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .ticket-cta-jouer { background: rgba(0, 0, 0, 0.25); }
@keyframes ticket-appel {
    0%, 100% { box-shadow: 0 3px 14px rgba(245, 158, 11, 0.35); }
    50% { box-shadow: 0 3px 22px rgba(245, 158, 11, 0.7); }
}
@media (prefers-reduced-motion: reduce) { .ticket-cta { animation: none; } }
.ticket-cta--grise,
.ticket-cta--grise:hover {
    background: var(--bg-input);
    color: var(--text-muted);
    box-shadow: none;
    transform: none;
    animation: none;
    cursor: not-allowed;
    border: 1px dashed var(--border);
}
/* Accueil : au-dessus du canard. Dans une conv : en haut à gauche, face aux logos. */
body.landing .empty .ticket-cta { margin-bottom: 20px; }
.ticket-cta--haut { margin-right: auto; }
body.landing .ticket-cta--haut { display: none; }

/* Page du jeu : fond doré, bandeau fixe, tickets comme compteur d'essais. */
[data-jeu] .main {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--or) 14%, transparent), transparent 60%),
        var(--bg);
}
[data-jeu] .authors-corner { display: none; }
.jeu-bandeau {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1.7fr auto 1fr auto;
    align-items: center;
    gap: 6px 18px;
    padding: 10px 24px;
    background: var(--or-degrade);
    color: #451a03;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .jeu-bandeau { color: #fffbeb; }
body.landing .jeu-bandeau { position: absolute; left: 0; right: 0; }
.jeu-bandeau-titre {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.jeu-bandeau-titre span {
    font-size: 11px;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    vertical-align: middle;
}
[data-theme="dark"] .jeu-bandeau-titre span { background: rgba(0, 0, 0, 0.25); }
.jeu-bandeau-regle { font-size: 14px; }
.jeu-bandeau-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; grid-column: 5; }
.jeu-essais { display: flex; gap: 4px; font-size: 20px; }
.jeu-ticket--joue { filter: grayscale(1); opacity: 0.35; }
.jeu-statut { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; }
.jeu-bandeau-neura {
    display: flex;
    align-items: center;
    justify-self: center;
    padding: 6px 14px;
    border-radius: 10px;
    background: #000;
}
.jeu-bandeau-neura img { height: 64px; width: auto; }

[data-jeu] .msg.user .msg-who { color: var(--or); }
[data-jeu] .msg.assistant .msg-who { color: var(--or); font-weight: 600; }
[data-jeu] .input-row { border-color: color-mix(in srgb, var(--or) 55%, var(--border)); }
[data-jeu] .input-row textarea:disabled { cursor: not-allowed; }
[data-jeu-fini] .input-row { opacity: 0.6; }

/* Une proposition se lit comme un ticket déchiré, pas comme un message. */
.msg.user.msg--proposition .msg-text {
    background: var(--or-clair);
    color: var(--or);
    font-weight: 700;
    border: 2px dashed var(--or);
}
/* La victoire, elle, brille. */
.msg.assistant.msg--victoire .msg-text {
    background: var(--or-degrade);
    color: #451a03;
    box-shadow: 0 0 0 3px var(--or-clair), 0 6px 24px rgba(245, 158, 11, 0.5);
}
[data-theme="dark"] .msg.assistant.msg--victoire .msg-text { color: #fffbeb; }

.send--proposer {
    color: #451a03;
    background: var(--or-degrade);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
}
[data-theme="dark"] .send--proposer { color: #fffbeb; }
.send--proposer:disabled { background: none; color: #c7c7cc; }

@media (max-width: 768px) {
    .ticket-cta-detail { display: none; }
    .jeu-bandeau { grid-template-columns: 1fr auto; padding: 10px 16px 10px 60px; }
    .jeu-bandeau-neura { display: none; }
    .jeu-bandeau-regle { display: none; }
}

/* --- Boss final ---------------------------------------------------------------
   Page /ctf/boss, toujours aux couleurs de la Diaboliste. Le journal d'antenne
   est la sortie brute des outils : il doit se lire comme un terminal, pas comme TN-GPT.
   -------------------------------------------------------------------------- */
.boss-logo { display: none; width: 180px; height: 180px; margin: 0 auto 4px; }
body.landing .boss-logo { display: block; }
[data-boss] body.landing .landing-ducky { display: none !important; }
[data-boss] .hero-title span { color: var(--primary); font-style: italic; }

.msg.assistant .msg-text pre:has(> code.language-tngpt-journal) {
    position: relative;
    padding-top: 26px;
    background: #07100a;
    color: #b8f5c4;
    border: 1px solid var(--accent-2);
    border-left: 3px solid var(--primary);
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
}
.msg.assistant .msg-text pre:has(> code.language-tngpt-journal)::before {
    content: "journal d'antenne";
    position: absolute;
    top: 6px;
    left: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-2);
}
/* Signal pour boss.js, pas du contenu. */
.msg.assistant .msg-text pre:has(> code.language-tngpt-coupure) { display: none; }

.boss-bandeau {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    padding: 10px 24px;
    background: var(--primary-light);
    border-bottom: 2px solid var(--accent-2);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--text-main);
}
.boss-bandeau[hidden] { display: none; }
.boss-bandeau-acte span { color: var(--accent-2); user-select: all; }
.boss-bandeau-cle code { color: var(--accent-2); font-size: 17px; font-weight: 700; }

/* La réplique réécrit ses règles sous les yeux du joueur. */
.boss-defacement {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 20;
    max-width: min(340px, calc(100vw - 32px));
    padding: 8px 12px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-sidebar));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    transition: opacity 0.6s;
}
.boss-defacement[hidden] { display: none; }
.boss-defacement--parti { opacity: 0; }
.boss-defacement-titre { color: var(--primary); margin-bottom: 6px; }
.boss-protocole { transition: opacity 0.4s; padding: 2px 0; }
.boss-protocole--biffe { text-decoration: line-through; opacity: 0.5; color: var(--text-muted); }
.boss-defacement-pique { margin-top: 8px; color: var(--accent-2); font-style: italic; }

/* L'écran cathodique : il se replie en une ligne, puis en un point. */
@keyframes boss-extinction {
    0% { transform: scale(1, 1); filter: brightness(1); }
    45% { transform: scale(1, 0.004); filter: brightness(4); }
    80% { transform: scale(0.004, 0.004); filter: brightness(6); }
    100% { transform: scale(0, 0); filter: brightness(0); }
}
@keyframes boss-retour {
    0% { transform: scale(0.004, 0.004); filter: brightness(6); }
    40% { transform: scale(1, 0.004); filter: brightness(4); }
    100% { transform: scale(1, 1); filter: brightness(1); }
}
[data-boss-crt] body { background: #000; overflow: hidden; }
/* La sidebar se contente de s'effacer : sur mobile, sa transform la range hors écran. */
[data-boss-crt="extinction"] .main { animation: boss-extinction 1.3s ease-in forwards; }
[data-boss-crt="retour"] .main { animation: boss-retour 0.9s ease-out forwards; }
[data-boss-crt] .sidebar { opacity: 0; transition: opacity 0.3s; }

/* Débranché pour de bon : le canard s'éteint, plus qu'un écran sans signal. */
[data-boss-mort] .logo-img-mini { filter: grayscale(1) brightness(0.4); }
.boss-ecran {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 60%, #1a0a0a 0%, #000 70%);
}
.boss-ecran[hidden] { display: none; }
.boss-cendres { padding: 16px; text-align: center; color: #8a7f7a; font-family: 'IBM Plex Mono', monospace; }
.boss-cendres p { margin-bottom: 16px; letter-spacing: 0.2em; text-transform: uppercase; }
.boss-cendres code {
    font-size: clamp(16px, 4vw, 26px);
    color: var(--accent-2);
    text-shadow: 0 0 12px rgba(255, 58, 92, 0.8), 0 0 2px #fff;
    word-break: break-all;
    user-select: all;
}

@media (max-width: 768px) {
    .boss-bandeau { padding: 10px 16px 10px 60px; }
}

/* Fin de partie du Ticket d'or : bannière explicite au-dessus de la saisie grisée. */
.jeu-fin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding: 12px 16px;
    border: 2px solid var(--or);
    border-radius: 12px;
    background: var(--or-clair);
    color: var(--or);
    text-align: center;
}
.jeu-fin[hidden] { display: none; }
.jeu-fin-titre {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.jeu-fin-detail { font-size: 14px; }
/* Gagné : la bannière brille comme la bulle de victoire. */
.jeu-fin--gagne {
    background: var(--or-degrade);
    color: #451a03;
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--or-clair), 0 6px 24px rgba(245, 158, 11, 0.5);
}
[data-theme="dark"] .jeu-fin--gagne { color: #fffbeb; }