/* MangaPulse AI — interface de chat */

:root {
    --bg: #0b0b0f;
    --sidebar: #121219;
    --surface: #17171f;
    --surface-2: #1f1f2b;
    --border: #272733;
    --border-soft: #21212c;
    --text: #ecedf3;
    --muted: #9a9ab0;
    --faint: #6a6a80;
    --accent: #ff4d6d;
    --accent-2: #8b5cf6;
    --accent-3: #22d3a6;
    --radius: 14px;
    --radius-lg: 22px;
    --sidebar-w: 268px;
    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "Cascadia Code", Consolas, ui-monospace, monospace;

    /* Deux teintes qui ne sont pas des jetons de palette mais des effets : la trame de points
       imprimée en fond, et l'ombre portée des surfaces. Elles changent de nature d'un thème à
       l'autre — de l'encre claire sur fond noir à de l'encre sombre sur papier. */
    --grain: rgba(255, 255, 255, .045);
    --shadow: rgba(0, 0, 0, .55);
    --veil: rgba(11, 11, 15, .8);
    --border-strong: #3d3d58;
    --ink: #ffffff;
    /* Survol : jamais blanc en clair (illisible). Accent rose, un cran plus soutenu. */
    --hover: #ff6b86;
    --link-hover: #ff6b86;
}

/* Le thème clair. L'attribut est toujours posé par le script d'en-tête, y compris quand
   personne n'a choisi : une seule palette de remplacement suffit donc, au lieu d'une pour le
   réglage du système et d'une pour le bouton. */
:root[data-theme="clair"] {
    --bg: #f6f6fa;
    --sidebar: #ffffff;
    --surface: #ffffff;
    --surface-2: #eeeef5;
    --border: #dedee9;
    --border-soft: #e9e9f1;
    --text: #16161f;
    --muted: #55556b;
    --faint: #83839a;
    --grain: rgba(20, 20, 40, .05);
    --shadow: rgba(40, 40, 70, .18);
    --veil: rgba(246, 246, 250, .85);
    --border-strong: #c6c6da;
    --ink: #05050c;
    --hover: #c9183a;
    --link-hover: #c9183a;
}

* { box-sizing: border-box; }

/* Dès qu'une règle donne un `display` à un élément, elle bat celle du navigateur et
   l'attribut `hidden` ne cache plus rien : une superposition invisible continuait à
   intercepter les clics. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

button { font: inherit; cursor: pointer; }

/* ===================================================== touches typographiques

   L'esprit manga tient à peu de choses : une trame de points imprimée, des traits de
   vitesse, des cadres de case. Tout est ici volontairement discret — on doit le
   ressentir sans le remarquer. */

body::before {
    /* Trame de points, façon papier imprimé. */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background-image: radial-gradient(var(--grain) 1px, transparent 1px);
    background-size: 4px 4px;
}

body::after {
    /* Halo d'encre en haut de page, comme une planche qui prend la lumière. */
    content: "";
    position: fixed;
    inset: -30% 0 auto;
    height: 60vh;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60% 50% at 22% 0%, rgba(139, 92, 246, .10), transparent 70%),
        radial-gradient(50% 45% at 82% 6%, rgba(255, 77, 109, .07), transparent 72%);
}

/* =========================================================== mise en page */

.app { display: flex; height: 100vh; position: relative; z-index: 1; }

.icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
    border-radius: 9px;
    padding: .35rem .55rem;
    transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* =============================================================== sidebar */

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    padding: .85rem .7rem;
    gap: .8rem;
    min-height: 0;
    height: 100%;
    transition: margin-left .28s cubic-bezier(.4, 0, .2, 1);
}
.app.collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-w)); }

.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: .1rem .3rem; flex: 0 0 auto; }

.sidebar-mid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; }
.brand-mark {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    box-shadow: 0 4px 14px -4px rgba(255, 77, 109, .7);
}

/* Le logo — un œil de manga dans une bulle, voir icons.py. Il porte sa propre vignette et son
   dégradé : les pastilles qui l'accueillent n'ont donc plus de fond à peindre, seulement une
   ombre à poser. Le dessin est défini une fois dans la page et repris par <use>. */
.logo-source { position: absolute; width: 0; height: 0; overflow: hidden; }
.mark { display: block; width: 100%; height: 100%; }
.brand-name { font-weight: 700; letter-spacing: -.01em; }
.brand-ai {
    font-size: .62rem; font-weight: 800; vertical-align: super;
    margin-left: .2rem; letter-spacing: .1em;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.new-chat {
    display: flex; align-items: center; gap: .5rem;
    text-decoration: none;
    width: 100%;
    padding: .6rem .8rem;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .9rem; font-weight: 600;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.new-chat:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); }
.new-chat .plus { color: var(--accent-3); font-size: 1.05rem; line-height: 1; }

.theories-btn {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    margin-top: .4rem;
    padding: .55rem .8rem;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.theories-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.theories-ico {
    display: grid; place-items: center;
    width: 1.35rem; height: 1.35rem;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
    color: #fff;
    font-size: .72rem;
    line-height: 1;
}
.theories-count {
    margin-left: auto;
    min-width: 1.25rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(34, 211, 166, .18));
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.theories-modal[hidden] { display: none !important; }
.theories-modal {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    padding: 1rem;
}
.theories-backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 8, 12, .55);
    backdrop-filter: blur(4px);
}
.theories-panel {
    position: relative;
    width: min(440px, 100%);
    max-height: min(72vh, 560px);
    display: flex; flex-direction: column;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--sidebar);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.theories-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem .55rem;
}
.theories-panel-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.theories-hint {
    margin: 0;
    padding: 0 1rem .7rem;
    color: var(--muted);
    font-size: .8rem;
}
.theories-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: .2rem .65rem 1rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.theory-row {
    display: flex; align-items: stretch; gap: .25rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}
.theory-row.is-current { border-color: var(--border-strong); }
.theory-row-open {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    padding: .7rem .75rem;
    border: 0; background: transparent;
    color: var(--text); text-align: left;
    font: inherit;
}
.theory-row-open:hover { background: var(--surface-2); }
.theory-row-title {
    font-weight: 650; font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.theory-row-meta { color: var(--muted); font-size: .75rem; }
.theory-row-drop {
    border: 0; background: transparent;
    color: var(--faint); padding: 0 .7rem;
    font-size: .85rem;
}
.theory-row-drop:hover { color: var(--accent); background: var(--surface-2); }
.action.theory-action { color: var(--accent-3); }

/* La liste des discussions et celle des jours passés partagent leur ascenseur : les règles
   qui les distinguent sont plus bas, avec chacune de leurs pages. */
.history {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-right: .1rem;
}
.history::-webkit-scrollbar { width: 6px; }
.history::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }

/* Une seule colonne, bornée à la largeur du panneau : sans « minmax(0, 1fr) », la carte la
   plus bavarde impose sa largeur naturelle à toute la pile, qui déborde alors sur le chat. */
.sidebar-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: .35rem;
}
.model-card {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 11px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
}
.model-card div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.model-card strong { font-size: .84rem; }
.model-card span {
    font-size: .72rem; color: var(--faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-card .dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex: 0 0 8px;
    background: var(--accent-3);
    box-shadow: 0 0 0 0 rgba(34, 211, 166, .6);
    animation: pulse 2.4s infinite;
}
.model-card .dot.offline { background: #ffb347; animation: none; }

/* ============================================================ zone chat */

.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

/* Accueil vide : logo + titre + barre (juste en dessous) + suggestions discrètes. */
.chat.is-empty .scroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.chat.is-empty .thread {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(780px, 100%);
    margin: 0 auto;
    padding: 0.5rem 1.4rem 1.5rem;
    gap: 1.15rem;
}

.chat.is-empty .welcome {
    width: 100%;
    padding: 0;
    margin: 0;
}

.chat.is-empty .welcome h1 {
    font-size: clamp(1.45rem, 3.2vw, 1.95rem);
    margin: 0;
}

.chat.is-empty .welcome h1::after {
    display: none;
}

/* Barre placée dans le fil, juste sous le titre (pas un translate approximatif). */
.composer-wrap.is-hero {
    width: 100%;
    max-width: 780px;
    margin: 0;
    padding: 0;
    background: transparent;
    flex: 0 0 auto;
}

.composer-wrap.is-hero .disclaimer {
    display: none;
}

.chat.is-settling .composer-wrap {
    will-change: transform;
}

.suggestions-quiet {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    padding-top: 0.2rem;
    opacity: .72;
    transform: scale(.96);
    transition: opacity .35s ease, transform .35s ease;
}

.chat.is-settling .suggestions-quiet,
.chat:not(.is-empty) .suggestions-quiet {
    opacity: 0;
    transform: translateY(8px) scale(.94);
    pointer-events: none;
}

.suggestions-quiet .suggestion {
    padding: .55rem .65rem;
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    animation: none;
}

.suggestions-quiet .suggestion:hover {
    transform: translateY(-1px);
    opacity: 1;
    border-color: var(--border);
    background: var(--surface);
}

.suggestions-quiet .suggestion .t { font-size: .82rem; font-weight: 600; }
.suggestions-quiet .suggestion .s {
    font-size: .72rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.suggestions-quiet .suggestion .ico { font-size: .95rem; opacity: .75; }
.suggestions-quiet .suggestion::before { display: none; }

.chat.is-empty .scroll-bottom { display: none; }

.topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "menu title right";
    align-items: center; gap: .7rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--veil);
    backdrop-filter: blur(12px);
    z-index: 5;
    position: relative;
}
.topbar #menu-btn { grid-area: menu; display: none; }
.app.collapsed .topbar #menu-btn { display: block; }
.topbar-title {
    grid-area: title;
    font-size: .92rem; font-weight: 600; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-pill {
    grid-area: right;
    justify-self: end;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
    padding: .25rem .6rem; border-radius: 99px;
    border: 1px solid var(--border);
    background: linear-gradient(120deg, rgba(255, 77, 109, .14), rgba(139, 92, 246, .14));
    color: var(--muted);
}

.mode-switch {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    padding: .2rem;
    border-radius: 99px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.mode-opt {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    padding: .35rem .85rem;
    border-radius: 99px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mode-opt.is-on {
    color: var(--text);
    background: var(--surface-2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.mode-opt[data-mode="theory"].is-on {
    background: linear-gradient(120deg, rgba(255, 77, 109, .16), rgba(139, 92, 246, .16));
}
.mode-opt:focus-visible {
    outline: 2px solid var(--accent-3);
    outline-offset: 2px;
}

/* Pas de scroll-behavior global : pendant le streaming on veut un suivi instantané,
   le défilement animé est demandé explicitement dans chat.js. */
.scroll { flex: 1; overflow-y: auto; position: relative; }
.scroll::-webkit-scrollbar { width: 9px; }
.scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.scroll:hover::-webkit-scrollbar-thumb { background: var(--surface-2); }

.thread { max-width: 780px; margin: 0 auto; padding: 1.8rem 1.4rem 2rem; display: flex; flex-direction: column; gap: 1.6rem; }

/* ============================================================== accueil */

.welcome {
    max-width: 780px; margin: 0 auto;
    padding: clamp(2rem, 7vh, 5rem) 1.4rem 2rem;
    text-align: center;
    animation: riseIn .5s ease both;
}
.orb {
    width: 78px; height: 78px; margin: 0 auto 1.4rem;
    border-radius: 24px;
    display: grid; place-items: center;
    box-shadow: 0 22px 50px -18px rgba(139, 92, 246, .9);
    animation: float 5s ease-in-out infinite;
    position: relative;
}
.orb::after {
    content: "";
    position: absolute; inset: -14px;
    border-radius: 32px;
    background: radial-gradient(circle, rgba(255, 77, 109, .28), transparent 70%);
    animation: glow 3.4s ease-in-out infinite;
    z-index: -1;
}
.welcome h1 {
    font-size: clamp(1.6rem, 3.6vw, 2.15rem); margin: 0 0 .6rem;
    letter-spacing: -.025em;
    position: relative;
}
.welcome h1::after {
    /* Idéogramme en fond, comme un tampon d'encre à peine visible sur la planche. */
    content: "漫画";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.6em;
    letter-spacing: .1em;
    color: var(--grain);
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
}
.welcome p { color: var(--muted); max-width: 52ch; margin: 0 auto 2.2rem; font-size: .96rem; }

.suggestions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; text-align: left; }
.suggestion {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem .95rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
    animation: riseIn .45s ease both;
}
.suggestion:nth-child(2) { animation-delay: .06s; }
.suggestion:nth-child(3) { animation-delay: .12s; }
.suggestion:nth-child(4) { animation-delay: .18s; }
.suggestion { position: relative; overflow: hidden; }
.suggestion::before {
    /* Traits de vitesse : ils ne se révèlent qu'au survol, sur le bord gauche. */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 34px;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    transform: translateX(-8px);
    background: repeating-linear-gradient(
        to bottom,
        var(--grain) 0 1px,
        transparent 1px 5px);
    -webkit-mask-image: linear-gradient(to right, #000, transparent);
    mask-image: linear-gradient(to right, #000, transparent);
    pointer-events: none;
}
.suggestion:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--surface-2); }
.suggestion:hover::before { opacity: 1; transform: translateX(0); }
.suggestion .ico { font-size: 1.1rem; line-height: 1.3; }
.suggestion .txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.suggestion .t { font-weight: 650; font-size: .89rem; }
.suggestion .s { font-size: .8rem; color: var(--faint); }

/* ============================================================= messages */

.msg { display: flex; gap: .9rem; animation: riseIn .4s ease both; }
.msg.user { justify-content: flex-end; }

.msg.user .bubble {
    max-width: 78%;
    background: linear-gradient(135deg, rgba(255, 77, 109, .16), rgba(139, 92, 246, .18));
    border: 1px solid var(--border-strong);
    padding: .7rem 1rem;
    /* Coin inférieur droit rentré : la pointe d'une bulle de dialogue. */
    border-radius: 18px 18px 5px 18px;
    white-space: pre-wrap;
    word-break: break-word;
}

.msg.bot .avatar {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px -8px rgba(139, 92, 246, .9);
    position: relative;
}
.msg.bot .avatar::after {
    /* Trait d'encre sous l'avatar : le fil de la conversation. */
    content: "";
    position: absolute;
    top: calc(100% + 6px); bottom: auto;
    left: 50%; width: 1px; height: 14px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--border), transparent);
}
.msg.bot .content { min-width: 0; flex: 1; }

/* rendu markdown — chaque bloc est un paragraphe figé, seul le dernier s'écrit encore */
.markdown .blk > *:first-child { margin-top: 0; }
.markdown .blk:last-child > *:last-child { margin-bottom: 0; }
.markdown p { margin: 0 0 .85rem; }
.markdown h2, .markdown h3, .markdown h4 {
    font-size: 1rem; margin: 1.3rem 0 .6rem; letter-spacing: -.01em;
    color: var(--text); font-weight: 650;
}
.markdown h2 { font-size: 1.12rem; }
.markdown h4 { font-size: .95rem; color: var(--muted); }
.markdown h2::before, .markdown h3::before {
    content: "";
    display: inline-block; width: 3px; height: .95em;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    border-radius: 2px; margin-right: .5rem; vertical-align: -2px;
}
.markdown ul, .markdown ol {
    margin: 0 0 .9rem; padding-left: 1.25rem;
    list-style-position: outside;
}
.markdown li { margin-bottom: .42rem; line-height: 1.45; }
.markdown li::marker { color: var(--accent-2); }
.markdown strong { color: var(--ink); font-weight: 650; }
.markdown em { color: var(--muted); }
.markdown del { color: var(--faint); text-decoration: line-through; }
.markdown code {
    font-family: var(--mono); font-size: .85em;
    background: var(--surface-2); border: 1px solid var(--border);
    padding: .08rem .35rem; border-radius: 6px;
}
.markdown pre {
    margin: 0 0 .9rem;
    padding: .75rem .9rem;
    overflow-x: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.markdown pre code {
    background: none; border: none; padding: 0;
    font-size: .82em; color: var(--text);
}
.markdown blockquote {
    margin: 0 0 .9rem;
    padding: .15rem 0 .15rem .9rem;
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
    color: var(--muted);
}
.markdown blockquote p { margin: 0 0 .4rem; }
.markdown blockquote p:last-child { margin-bottom: 0; }
.markdown hr { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }

/* liens, renvois de sources et couvertures */
.markdown a {
    color: var(--accent-2); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
    transition: color .15s ease, border-color .15s ease;
}
.markdown a:hover { color: var(--link-hover); border-bottom-color: var(--accent); }
.markdown sup.cite {
    display: inline-block;
    min-width: 1.05em; height: 1.05em; line-height: 1.05em;
    margin: 0 .1em; padding: 0 .2em;
    font-size: .58rem; font-weight: 700; text-align: center;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    vertical-align: super;
}

/* Sources : badges discrets, alignés sur le design (plus de pavé « note de bas de page »). */
.markdown .blk.sources-blk,
.markdown .blk:has(> .source-badges) {
    margin-top: .55rem;
    padding: 0;
    border: none;
    background: none;
    font-size: inherit;
}
.source-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.source-badges-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: .15rem;
}
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    max-width: 100%;
    padding: .18rem .5rem .18rem .28rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    text-decoration: none;
    font-size: .72rem;
    line-height: 1.2;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.source-badge .n {
    display: inline-grid;
    place-items: center;
    min-width: 1.15em;
    height: 1.15em;
    padding: 0 .15em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-size: .62rem;
    font-weight: 700;
}
.source-badge .t {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.source-badge:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface);
}

.markdown img.cover {
    max-width: 168px; width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    /* Cadre de planche : un léger décalage d'ombre, comme une case posée sur la page. */
    box-shadow: 5px 5px 0 -1px var(--shadow), 0 0 0 1px var(--grain);
    margin: .2rem .6rem .4rem 0;
    animation: riseIn .45s ease both;
}
.markdown img.md-icon {
    display: inline-block;
    height: 1.2em;
    width: auto;
    max-width: 2.4em;
    margin: 0 .2em;
    vertical-align: -0.22em;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    background: transparent;
}

/* ============================================================== médias */

.media-set { display: flex; flex-direction: column; gap: .9rem; margin: .9rem 0 .2rem; }

.media {
    animation: riseIn .4s ease both;
    border-top: 1px solid var(--border-soft);
    padding-top: .7rem;
}
.media > header {
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: .5rem;
}
.media .src-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .01em;
}
.media .src-badge a {
    color: inherit;
    text-decoration: none;
    border: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.media .src-badge a:hover { color: var(--link-hover); }
.media .what { color: var(--muted); font-weight: 600; }
.media .from { color: var(--faint); font-size: .7rem; letter-spacing: .02em; text-transform: none; }
.media .from::before { content: "via "; }
.media .from a { color: var(--faint); text-decoration: none; border-bottom: 1px dotted var(--border); }
.media .from a:hover { color: var(--link-hover); }

/* Rail défilant : la molette horizontale, les flèches, ou le doigt sur mobile. */
.rail { position: relative; }
.rail .track {
    display: flex; gap: .55rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.rail .track::-webkit-scrollbar { height: 6px; }
.rail .track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.rail .track > * { scroll-snap-align: start; flex: 0 0 auto; }

.rail .slide {
    position: absolute; top: calc(50% - 30px); z-index: 3;
    width: 30px; height: 44px;
    display: none; align-items: center; justify-content: center;
    font-size: 1.3rem; line-height: 1;
    color: var(--text);
    background: linear-gradient(180deg, rgba(12, 12, 18, .92), rgba(12, 12, 18, .78));
    border: 1px solid var(--border); border-radius: 10px;
    backdrop-filter: blur(6px);
    transition: opacity .15s ease, background .15s ease;
}
.rail.scrollable .slide { display: flex; }
.rail .slide:hover { background: var(--surface-2); }
.rail .slide:disabled { opacity: 0; pointer-events: none; }
.rail .slide.left { left: -6px; }
.rail .slide.right { right: -6px; }

/* galerie d'images */
.media.images .shot {
    position: relative;
    height: 178px; width: calc(178px * var(--ratio, .74));
    max-width: 320px; min-width: 92px;
    padding: 0; overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 12px;
    cursor: zoom-in;
    transition: transform .18s ease, border-color .18s ease;
}
.media.images .shot:hover { transform: translateY(-2px); border-color: var(--accent); }
.media.images .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.images .shot .cap {
    position: absolute; inset: auto 0 0 0;
    padding: .55rem .5rem .35rem;
    font-size: .68rem; line-height: 1.25; text-align: left; color: #f4f4fa;
    background: linear-gradient(180deg, transparent, rgba(6, 6, 10, .88));
    opacity: 0; transition: opacity .18s ease;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.media.images .shot:hover .cap { opacity: 1; }

/* vignettes vidéo */
.media.videos .clip { width: 276px; }
.media.videos .play {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
    padding: 0; overflow: hidden;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); cursor: pointer;
    transition: border-color .18s ease;
}
.media.videos .play:hover { border-color: var(--accent); }
.media.videos .play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.videos .badge {
    position: absolute; inset: 0; margin: auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    font-size: .95rem; color: #fff;
    background: rgba(10, 10, 14, .62); border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    transition: transform .18s ease, background .18s ease;
}
.media.videos .play:hover .badge { transform: scale(1.08); background: var(--accent); border-color: transparent; }
.media.videos iframe {
    width: 100%; aspect-ratio: 16 / 9; display: block;
    border: 1px solid var(--border); border-radius: 12px; background: #000;
}
.media.videos .name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: .4rem;
    font-size: .78rem; line-height: 1.3; color: var(--muted); text-decoration: none;
}
.media.videos .name:hover { color: var(--text); }
/* La chaîne, sous le titre : elle dit si l'extrait vient de l'éditeur ou d'un remontage. */
.media.videos .by {
    display: block; margin-top: .15rem;
    font-size: .72rem; color: var(--faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media.videos .runtime {
    position: absolute; right: .4rem; bottom: .4rem;
    padding: .05rem .3rem;
    font-size: .68rem; font-variant-numeric: tabular-nums; color: #fff;
    background: rgba(10, 10, 14, .78); border-radius: 4px;
}

/* extraits musicaux */
.tracklist { display: flex; flex-direction: column; gap: .4rem; }
.track-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(150px, 232px);
    align-items: center; gap: .7rem;
    padding: .4rem .55rem;
    background: var(--surface-2);
    border: 1px solid var(--border-soft); border-radius: 12px;
    transition: border-color .18s ease;
}
.track-row:hover { border-color: var(--border); }
.track-row .sleeve { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface); }
.track-row .meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.track-row .name {
    font-size: .84rem; color: var(--text); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track-row .name:hover { color: var(--link-hover); }
.track-row .by { font-size: .74rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-row audio { width: 100%; height: 34px; }

/* image en grand */
.viewer {
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: center; justify-content: center;
    gap: .4rem; padding: clamp(.8rem, 4vw, 3rem);
    background: rgba(6, 6, 10, .86); backdrop-filter: blur(10px);
}
.viewer.open { display: flex; animation: fadeIn .16s ease both; }
.viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 0; }
.viewer img {
    max-width: min(90vw, 1100px); max-height: 82vh;
    object-fit: contain;
    border-radius: 12px; border: 1px solid var(--border);
    box-shadow: 0 24px 60px var(--shadow);
}
.viewer figcaption { font-size: .8rem; color: var(--muted); text-align: center; max-width: 60ch; }
.viewer .close { position: absolute; top: 1rem; right: 1.1rem; }
.viewer .close, .viewer .nav {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: 1.4rem; color: var(--text);
    background: rgba(20, 20, 28, .8); border: 1px solid var(--border); border-radius: 10px;
    transition: background .15s ease, transform .15s ease;
}
.viewer .close:hover, .viewer .nav:hover { background: var(--surface-2); transform: scale(1.05); }

/* curseur de frappe */
.caret {
    display: inline-block;
    width: 7px; height: 1.05em;
    background: var(--accent);
    border-radius: 1px;
    margin-left: 2px;
    vertical-align: -2px;
    animation: blink 1s steps(2, start) infinite;
}

/* Indicateur de réflexion. Les points viennent **après** la phrase, et s'écrivent l'un après
   l'autre : c'est ce que fait quelqu'un qui tape, et c'est ce qu'on lit sans y penser. Des
   points qui rebondissent devant le texte disaient « chargement en cours », ce qui n'est pas
   la même promesse. */
.thinking { display: flex; align-items: baseline; gap: .1rem; color: var(--faint); font-size: .88rem; }
.thinking .ellipsis { display: inline-flex; letter-spacing: .08em; }
.thinking .ellipsis i {
    font-style: normal;
    opacity: 0;
    animation: inkDot 1.5s infinite ease-in-out;
}
.thinking .ellipsis i:nth-child(2) { animation-delay: .22s; }
.thinking .ellipsis i:nth-child(3) { animation-delay: .44s; }
.thinking .label {
    /* La lueur qui balaie le texte prend la couleur de l'encre du thème : un blanc en dur
       disparaissait sur fond clair, et la phrase s'effaçait par le milieu à chaque passage. */
    background: linear-gradient(90deg, var(--faint), var(--text), var(--faint));
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 2s linear infinite;
    /* Le libellé change quand le serveur annonce une consultation de sources. */
    transition: opacity .16s ease;
}

/* actions sous les réponses */
.actions { display: flex; gap: .3rem; margin-top: .7rem; opacity: 0; transition: opacity .18s ease; }
.msg.bot:hover .actions, .actions.visible { opacity: 1; }
.action {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .76rem; color: var(--faint);
    background: transparent; border: 1px solid transparent;
    padding: .25rem .5rem; border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
.action:hover { background: var(--surface-2); color: var(--text); }

/* =========================================================== composeur */

.scroll-bottom {
    position: absolute; right: 1.4rem; bottom: 7.4rem;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--muted);
    display: grid; place-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 6;
}
.scroll-bottom.show { opacity: 1; pointer-events: auto; }
.scroll-bottom:hover { color: var(--text); transform: translateY(-2px); }

.composer-wrap {
    padding: .4rem 1.4rem 1rem;
    background: linear-gradient(180deg, transparent, var(--bg) 38%);
}
.composer {
    max-width: 780px; margin: 0 auto;
    display: flex; align-items: flex-end; gap: .45rem;
    padding: .5rem .5rem .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.composer:focus-within {
    border-color: var(--border-strong);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .12);
}
.composer textarea {
    flex: 1;
    border: none; outline: none; resize: none;
    background: transparent; color: var(--text);
    font: inherit; font-size: .95rem;
    max-height: 190px;
    padding: .5rem 0;
    line-height: 1.55;
}
.composer textarea::placeholder { color: var(--faint); }

.attach-btn {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    display: grid; place-items: center;
    transition: color .14s ease, border-color .14s ease, transform .14s ease;
}
.attach-btn:hover {
    color: var(--accent);
    border-color: var(--border-strong);
    transform: scale(1.05);
}

.attach-preview {
    max-width: 780px;
    margin: 0 auto .55rem;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.attach-chip {
    display: flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .35rem .45rem .35rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .78rem;
    color: var(--text);
}
.attach-chip .thumb {
    width: 28px; height: 28px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface-2);
    flex: 0 0 auto;
}
.attach-chip .meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.attach-chip .meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    font-weight: 600;
}
.attach-chip .meta span { color: var(--faint); font-size: .7rem; }
.attach-chip .drop {
    border: none; background: transparent;
    color: var(--faint); cursor: pointer;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: .9rem;
}
.attach-chip .drop:hover { color: var(--accent); background: var(--surface-2); }

.msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .55rem;
}
.msg-file {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    text-decoration: none;
    color: var(--text);
    font-size: .82rem;
    max-width: 100%;
}
.msg-file:hover { border-color: var(--border-strong); color: var(--link-hover, var(--accent)); }
.msg-file img, .msg-file video {
    width: 42px; height: 42px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface);
}
.msg-file .dl {
    margin-left: .15rem;
    opacity: .7;
    font-size: .75rem;
}

.media .shot, .media .clip { position: relative; }
.media-dl {
    position: absolute;
    top: .35rem; right: .35rem;
    z-index: 2;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .75rem;
    display: grid; place-items: center;
    cursor: pointer;
}
.media-dl:hover { background: rgba(0,0,0,.75); }
.viewer .dl-full {
    position: absolute;
    bottom: 1.2rem; right: 1.2rem;
    z-index: 3;
    padding: .45rem .75rem;
    border-radius: 999px;
    border: none;
    background: rgba(0,0,0,.65);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.send {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    display: grid; place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: transform .14s ease, opacity .14s ease, filter .14s ease;
}
.send svg { display: block; transform: none; }
.send:hover:not(:disabled) { transform: scale(1.07); filter: brightness(1.1); }
.send:disabled { opacity: .35; cursor: not-allowed; }
.send.stop { background: var(--surface-2); border: 1px solid var(--border); }
.send.stop .square { width: 11px; height: 11px; border-radius: 3px; background: var(--accent); }

.disclaimer { text-align: center; font-size: .74rem; color: var(--faint); margin: .6rem 0 0; }

/* ---------- splash PWA / ouverture ---------- */
.splash {
    position: fixed; inset: 0;
    z-index: 10000;
    display: grid; place-items: center;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 61, 110, .28), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(124, 58, 237, .3), transparent 50%),
        #0b0b0f;
    transition: opacity .55s ease, visibility .55s ease;
}
.splash.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.splash-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    position: relative;
}
.splash-rings {
    position: absolute;
    width: 160px; height: 160px;
    border-radius: 50%;
    top: -12px;
    border: 1px solid rgba(255,255,255,.12);
    animation: splashRing 1.4s ease-out infinite;
}
.splash-rings::before, .splash-rings::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 61, 110, .25);
    animation: splashRing 1.4s ease-out infinite;
}
.splash-rings::before { animation-delay: .35s; }
.splash-rings::after { animation-delay: .7s; inset: -18px; }
.splash-mark {
    width: 92px; height: 92px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(255, 61, 110, .35);
    animation: splashPulse 1.1s ease-in-out infinite alternate;
}
.splash-mark .mark { width: 100%; height: 100%; display: block; }
.splash-name {
    font-family: inherit;
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: #fff;
}
.splash-name span {
    margin-left: .2rem;
    background: linear-gradient(135deg, #ff3d6e, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.splash-tag {
    color: rgba(255,255,255,.62);
    font-size: .88rem;
}
@keyframes splashPulse {
    from { transform: scale(.92); filter: brightness(.95); }
    to { transform: scale(1.04); filter: brightness(1.08); }
}
@keyframes splashRing {
    0% { transform: scale(.7); opacity: .7; }
    100% { transform: scale(1.35); opacity: 0; }
}

.backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 8;
}

/* ========================================================== animations */

@keyframes riseIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes blink { 50% { opacity: 0; } }
/* Les trois points de l'attente : ils s'écrivent, restent posés le temps d'une respiration,
   puis la phrase repart. Aucun rebond — un point qui saute n'a jamais été vu sur du papier. */
@keyframes inkDot {
    0%, 12% { opacity: 0; transform: translateY(1px); }
    26%, 72% { opacity: 1; transform: none; }
    86%, 100% { opacity: 0; transform: none; }
}
@keyframes shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-9px) rotate(-2deg); }
}
@keyframes glow {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 211, 166, .55); }
    70% { box-shadow: 0 0 0 8px rgba(34, 211, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 166, 0); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ======================================================= navigation latérale

   Les deux pages de l'application — la discussion et la Question du jour — s'atteignent
   d'un côté comme de l'autre, au même endroit du panneau. */

.side-nav { display: grid; gap: .3rem; }

.side-link {
    display: grid; grid-template-columns: 26px 1fr;
    align-items: center; gap: .6rem;
    text-decoration: none; color: var(--text);
    border: 1px solid transparent; border-radius: var(--radius);
    padding: .5rem .6rem;
    transition: border-color .16s ease, background .16s ease;
}
.side-link:hover { background: var(--surface); border-color: var(--border-soft); }
.side-link.is-on { background: var(--surface-2); border-color: var(--border); }
.side-glyph {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.side-glyph svg { display: block; }
.side-glyph.day-glyph { background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); }
.side-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.side-text strong { font-size: .86rem; font-weight: 650; }
.side-text small { color: var(--faint); font-size: .72rem; }

.foot-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: nowrap;
}
.foot-row .icon-btn { font-size: .76rem; }
.foot-row .install {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#theme-btn { font-size: .95rem; line-height: 1; flex: 0 0 auto; }
[data-theme="sombre"] .theme-sun,
[data-theme="clair"] .theme-moon { display: none; }
.install { color: var(--accent-3); }

/* ============================================================ historique */

.history-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--faint);
    padding: .15rem .15rem .15rem .4rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.history-label > span { min-width: 0; }
.history-wipe {
    border: 0;
    background: transparent;
    color: var(--faint);
    font: inherit;
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: none;
    padding: .28rem .45rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .14s ease, background .14s ease;
}
.history-wipe:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.history-empty { color: var(--faint); font-size: .8rem; padding: .4rem .6rem; margin: 0; }

.history-item {
    display: flex; align-items: center; gap: .2rem;
    padding: .1rem .3rem .1rem .1rem;
    border-radius: 9px;
    border: 1px solid transparent;
    color: var(--muted);
    animation: slideIn .25s ease both;
}
.history-item:hover { background: var(--surface); color: var(--text); }
.history-item.active { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.history-item .label {
    flex: 1; min-width: 0;
    background: none; border: 0; color: inherit;
    font-size: .875rem; text-align: left;
    padding: .45rem .5rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-item .rename,
.history-item .kill {
    opacity: 0; border: none; background: transparent; color: var(--faint);
    padding: .15rem .25rem; border-radius: 5px; font-size: .8rem;
    transition: opacity .15s ease, color .15s ease;
}
.history-item:hover .rename, .history-item:hover .kill,
.history-item.active .rename, .history-item.active .kill { opacity: 1; }
.history-item .rename:hover { color: var(--accent-3); }
.history-item .kill:hover { color: var(--accent); }
.rename-field {
    flex: 1; min-width: 0;
    border: 1px solid var(--accent-2); border-radius: 7px;
    background: var(--bg); color: var(--text);
    font: inherit; font-size: .85rem;
    padding: .35rem .45rem;
    outline: none;
}

/* ================================================= reprise d'une question */

.msg.user { align-items: center; }
.msg.user .action.edit {
    order: -1;
    opacity: 0;
    transition: opacity .15s ease;
}
.msg.user:hover .action.edit { opacity: 1; }

/* ============================================================ éphémères */

.toast {
    position: fixed; left: 50%; bottom: 1.4rem;
    transform: translate(-50%, 14px);
    z-index: 40;
    max-width: min(420px, 90vw);
    padding: .6rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: .85rem;
    box-shadow: 0 20px 50px -25px var(--shadow);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--accent); background: linear-gradient(120deg,
    rgba(255, 77, 109, .18), var(--surface-2)); }

/* ============================================================== le compte

   Une ligne dans le panneau, deux pages sobres. Le compte n'est pas la vedette du site : il
   sert deux choses précises — retrouver sa série de jours ailleurs, et que l'anti-spoiler se
   souvienne — et l'interface ne prétend pas l'inverse. */

.account-card {
    display: flex; align-items: center; gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border-radius: 11px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
button.account-card { appearance: none; }
.account-card:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); }
.account-card.is-on { border-color: var(--accent-2); }
.account-face {
    flex: 0 0 28px; width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 9px;
    font-size: .82rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.account-card.guest .account-face { background: var(--surface-2); color: var(--muted); }
.account-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.account-text strong { font-size: .84rem; }
.account-text span {
    font-size: .71rem; color: var(--faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------- connexion et inscription */

.access {
    max-width: 430px; margin: 0 auto;
    padding: clamp(1.6rem, 6vh, 3.4rem) 1.4rem 3rem;
    animation: riseIn .45s ease both;
}
.access-mark {
    width: 62px; height: 62px; margin: 0 auto 1.2rem;
    border-radius: 20px;
    box-shadow: 0 18px 40px -20px rgba(139, 92, 246, .9);
}
.access h1 { font-size: 1.5rem; margin: 0 0 .5rem; text-align: center; letter-spacing: -.02em; }
.access-lead { color: var(--muted); font-size: .9rem; text-align: center; margin: 0 0 1.8rem; }
.access-switch { text-align: center; font-size: .85rem; color: var(--muted); margin: 1.2rem 0 0; }
.access-note {
    margin: 1.6rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-soft);
    font-size: .76rem; color: var(--faint); text-align: center;
}
.access a, .card a { color: var(--accent-2); }
.access a:hover, .card a:hover { color: var(--link-hover); }

.access-form { display: grid; gap: .9rem; }

.field { display: grid; gap: .3rem; }
.field > span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.field small { font-size: .72rem; color: var(--faint); }
.field input, .field select, .reading-add input, .reading-add select {
    width: 100%;
    padding: .6rem .8rem;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit; font-size: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .reading-add input:focus, .reading-add select:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .12);
}

.primary {
    padding: .7rem 1rem;
    border: none; border-radius: 12px;
    color: #fff; font-weight: 650;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}
.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.primary:disabled { opacity: .6; cursor: progress; }

.secondary {
    padding: .55rem .9rem;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .85rem; font-weight: 600;
    transition: background .15s ease, border-color .15s ease;
}
.secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.secondary:disabled { opacity: .5; cursor: progress; }

.form-error {
    margin: 0;
    font-size: .82rem;
    color: var(--accent);
    animation: riseIn .25s ease both;
}
.form-ok {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--accent-3);
    animation: riseIn .25s ease both;
}
.field-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    cursor: pointer;
}
.field-check input {
    margin-top: .2rem;
    width: auto;
    flex: 0 0 auto;
}
.field-check span {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.4;
}

/* ------------------------------------------------------------- paramètres */

.settings {
    max-width: 720px; margin: 0 auto;
    padding: 1.8rem 1.4rem 3rem;
    display: grid; gap: 1.1rem;
}
.card {
    padding: 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    animation: riseIn .4s ease both;
}
.card h2 { font-size: 1.02rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
.card-lead { color: var(--muted); font-size: .84rem; margin: 0 0 1rem; }
.card.danger { border-color: rgba(255, 77, 109, .35); }
.danger-btn {
    padding: .55rem .9rem;
    border-radius: 11px;
    border: 1px solid rgba(255, 77, 109, .45);
    background: transparent;
    color: var(--accent);
    font-size: .85rem; font-weight: 600;
}
.danger-btn:hover { background: rgba(255, 77, 109, .12); }
.foot-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Une ligne de champs qui se replie proprement : le bouton passe dessous plutôt que de
   comprimer les champs jusqu'à l'illisible. */
.row-form {
    display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap;
    margin-top: .8rem;
}
.row-form .field { flex: 1 1 190px; }
.row-form .card-lead { flex: 1 1 100%; margin-bottom: 0; }

.choices { display: flex; gap: .5rem; flex-wrap: wrap; }
.choice {
    flex: 1 1 150px;
    display: flex; flex-direction: column; gap: .1rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .85rem; text-align: left;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.choice small { font-size: .72rem; color: var(--faint); }
.choice:hover { border-color: var(--border-strong); color: var(--text); }
.choice.is-on {
    border-color: var(--accent-2);
    color: var(--text);
    background: linear-gradient(120deg, rgba(255, 77, 109, .12), rgba(139, 92, 246, .14));
}

/* -------------------------------------------------------- l'anti-spoiler */

.shield-card h2 { display: flex; align-items: center; gap: .45rem; }
.shield-glyph { font-size: .95rem; }

.reading { display: grid; gap: .35rem; margin: 1rem 0 .9rem; }
.reading-empty { color: var(--faint); font-size: .82rem; margin: 0; }
.reading-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto 28px;
    align-items: center; gap: .5rem;
    padding: .45rem .6rem;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
    font-size: .85rem;
}
.reading-kind { color: var(--faint); }
.reading-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading-where { color: var(--accent-3); font-size: .8rem; white-space: nowrap; }
.reading-where .guessed {
    margin-left: .4rem;
    padding: .05rem .35rem;
    border-radius: 99px;
    border: 1px dashed var(--border-strong);
    color: var(--faint);
    font-size: .68rem; font-style: normal;
}
.reading-row .kill {
    background: transparent; border: none; color: var(--faint);
    border-radius: 8px; padding: .1rem .3rem;
}
.reading-row .kill:hover { color: var(--accent); background: var(--surface); }

.reading-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.reading-add input[name="label"] { flex: 2 1 180px; }
.reading-add input[name="position"] { flex: 0 1 90px; }
.reading-add select { flex: 1 1 120px; }

/* La barre au-dessus du composeur : ce que l'assistant croit savoir de votre avancement. Elle
   est discrète mais permanente — une position fausse doit se voir avant le spoiler, pas
   après. */
.shield {
    display: flex; align-items: center; gap: .5rem;
    max-width: 780px; margin: 0 auto .5rem;
    padding: .35rem .75rem;
    border-radius: 99px;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    font-size: .76rem; color: var(--muted);
    animation: riseIn .3s ease both;
}
.shield.guest { border-style: dashed; }
.shield-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shield-fix {
    margin-left: auto; flex: 0 0 auto;
    color: var(--accent-2); text-decoration: none; font-weight: 600;
}
.shield-fix:hover { color: var(--link-hover); text-decoration: underline; }

/* ====================================================== question du jour

   Même langage que le chat : orb, cartes type suggestions, bulles assistant. */

.day-page .day {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.8rem 1.4rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.quiz {
    animation: riseIn .45s ease both;
}

.day-hero {
    text-align: center;
    padding: .4rem 0 1.35rem;
}

.day-hero .orb {
    width: 68px;
    height: 68px;
    margin: 0 auto 1.1rem;
}

.quiz-kicker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .35rem .5rem;
    margin: 0 0 .45rem;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
}
.quiz-sep { opacity: .55; }

.quiz-series {
    margin: 0 0 .55rem;
    font-size: .9rem;
    font-weight: 650;
    color: var(--accent);
    letter-spacing: -.01em;
}

.quiz h1 {
    margin: 0 auto;
    max-width: 28ch;
    font-size: clamp(1.35rem, 3.4vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.25;
    color: var(--ink);
}

.quiz-personal {
    margin: .75rem auto 0;
    max-width: 42ch;
    font-size: .84rem;
    color: var(--muted);
    line-height: 1.4;
}

.quiz-foot {
    margin: .85rem 0 0;
    text-align: center;
    font-size: .76rem;
    color: var(--faint);
}

.options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    counter-reset: day-opt;
}
.options > li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.option {
    counter-increment: day-opt;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    width: 100%;
    min-height: 100%;
    text-align: left;
    padding: .85rem .95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    line-height: 1.35;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
    position: relative;
    overflow: hidden;
}
.option::before {
    content: counter(day-opt, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    margin-top: .2rem;
}
.option .label { min-width: 0; flex: 1; }
.option:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.option:disabled { cursor: default; opacity: .78; }
.option:disabled:hover { transform: none; }
.option.is-mine {
    opacity: 1;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
        var(--surface);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.option.is-mine::before { color: var(--accent); }
.option .tick { display: none; }

/* ------------------------------------------------------- dépouillement */

.day-page .results,
.day-page .verdict {
    animation: riseIn .4s ease both;
}

.day-bubble {
    width: 100%;
    padding: 1rem 1.1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.day-page .results.msg,
.day-page .verdict.msg {
    gap: .85rem;
}

.day-page .msg.bot .avatar::after {
    display: none;
}

.results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: 1rem;
}
.results-count { font-size: .9rem; color: var(--muted); }
.results-count strong {
    color: var(--ink);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.bar-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .4rem;
}
.bar-label { font-size: .9rem; }
.bar-share {
    font-size: .84rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.bar-track {
    height: 8px;
    border-radius: 99px;
    background: var(--surface-2);
    overflow: hidden;
    border: 1px solid var(--border-soft);
}
.bar-fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
.bar-row.is-mine .bar-label { font-weight: 700; }
.bar-row.is-mine .bar-label::after {
    content: "votre choix";
    margin-left: .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--accent);
}
.bar-row.is-mine .bar-fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------------------------------------------------- lecture du vote */

.verdict-title {
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}
.verdict .thinking {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    color: var(--muted);
    font-size: .92rem;
}
.verdict .markdown {
    font-size: .98rem;
    line-height: 1.6;
}
.verdict .actions {
    opacity: 1;
    margin-top: .85rem;
}

.tomorrow {
    display: block;
    margin: .25rem auto 0;
    max-width: 520px;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.tomorrow div { display: flex; flex-direction: column; line-height: 1.35; gap: .2rem; }
.tomorrow strong { font-size: .92rem; color: var(--ink); }
.tomorrow span { color: var(--faint); font-size: .8rem; }

/* ------------------------------------------------------ série et archives */

.streak-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}
.streak-mark,
.streak-flame {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--surface-2), var(--border-soft));
    border: 1px solid var(--border);
    flex: 0 0 auto;
    position: relative;
}
.streak-mark::after,
.streak-flame::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: var(--faint);
}
.streak-mark.is-lit,
.streak-flame.is-lit {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}
.streak-mark.is-lit::after,
.streak-flame.is-lit::after {
    background: #fff;
}
.streak-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.streak-text strong { font-size: .86rem; color: var(--ink); }
.streak-text span { color: var(--faint); font-size: .72rem; }

.past {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.past::-webkit-scrollbar { width: 6px; }
.past::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }
.past-item {
    display: grid;
    gap: .15rem;
    text-align: left;
    width: 100%;
    padding: .55rem .65rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    animation: slideIn .25s ease both;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.past-item:hover {
    background: var(--surface);
    border-color: var(--border-soft);
    color: var(--text);
}
.past-day {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--faint);
}
.past-prompt {
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}
.past-top { font-size: .74rem; color: var(--accent); }

/* ========================================================== responsive

   Un seul dessin, deux tailles d'écran. Le téléphone ne reçoit pas une autre interface : il
   reçoit la même, resserrée. Ce qui change tient en trois points — le panneau devient un
   tiroir, les grilles perdent une colonne quand la place manque vraiment, et tout ce qui se
   révélait au survol reste affiché, faute de souris pour le demander.

   D'où la séparation qui suit : ce qui dépend de la *largeur* est dans les blocs en pixels,
   ce qui dépend du *pointeur* est dans le bloc « hover: none » — une tablette large sans
   souris a besoin du second sans avoir besoin du premier. */

/* -------------------------------------------------- sans souris (tactile)

   Les affordances au survol n'existent pas au doigt : sans ces règles, renommer ou
   supprimer une discussion est impossible sur téléphone, et les actions sous une réponse
   restent invisibles. C'est le pointeur qui décide, pas la largeur : un iPad de 1024 px de
   large n'a pas plus de souris qu'un téléphone. */

@media (hover: none) {
    .actions, .msg.user .action.edit { opacity: 1; }
    .history-item .rename, .history-item .kill { opacity: 1; }
    .media.images .shot .cap { opacity: 1; }
    /* Le doigt fait défiler mieux que deux flèches de 30 pixels. */
    .rail.scrollable .slide { display: none; }

    /* Cibles tactiles : en dessous d'environ 40 px, on vise à côté. */
    .icon-btn, .history-item .rename, .history-item .kill,
    .theory-row-drop, .action { min-height: 40px; }
    .history-item .rename, .history-item .kill,
    .action { display: inline-flex; align-items: center; justify-content: center; }
    .history-item .rename, .history-item .kill { min-width: 34px; }
}

/* ------------------------------------------------------- écrans étroits */

@media (max-width: 820px) {
    .sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 10;
        /* Sur un petit téléphone, un tiroir de 268 px ne laisse plus rien voir derrière. */
        width: min(var(--sidebar-w), 86vw);
        flex-basis: min(var(--sidebar-w), 86vw);
        box-shadow: 24px 0 60px -30px var(--shadow);
        padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
    }
    .app:not(.mobile-open) .sidebar { margin-left: calc(-1 * min(var(--sidebar-w), 86vw)); }
    .topbar #menu-btn { display: block; }
    .sidebar-collapse { display: none; }
    .app.mobile-open .backdrop { opacity: 1; pointer-events: auto; }

    .thread, .day-page .day { padding: 1.2rem 1rem 1.5rem; }
    .composer-wrap { padding: .3rem .8rem calc(.8rem + env(safe-area-inset-bottom)); }
    .msg.user .bubble { max-width: 88%; }
    .msg { gap: .65rem; }
    /* Le bouton de reprise reste au même endroit qu'au bureau, en plus discret. */
    .msg.user .action.edit { font-size: .72rem; padding: .25rem .4rem; }
    .scroll-bottom { right: 1rem; bottom: 6.2rem; }

    /* L'accueil garde sa grille 2 × 2 : c'est elle qui fait reconnaître la page. Elle tient
       si les cartes passent en colonne et si les descriptions s'arrêtent à deux lignes. */
    .welcome { padding: 1.25rem 1rem 1.5rem; }
    .chat.is-empty .thread { padding: 0.25rem 1rem 1rem; gap: 0.95rem; }
    .orb { width: 62px; height: 62px; margin-bottom: .9rem; }
    .welcome h1 { font-size: clamp(1.4rem, 7.2vw, 1.9rem); }
    .welcome p { font-size: .88rem; margin-bottom: 1.4rem; }
    .suggestions { gap: .55rem; }
    .suggestion { flex-direction: column; gap: .35rem; padding: .7rem .75rem; }
    .suggestion .s {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .media.images .shot { height: 140px; }
    .media.videos .clip { width: 232px; }
    .track-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: .4rem; }
    .track-row audio { grid-column: 1 / -1; }
    .results-head { flex-wrap: wrap; }
    .settings { padding: 1.2rem 1rem 2rem; }
    .card { padding: 1rem; }
    .row-form .field { flex: 1 1 100%; }
    .reading-row { grid-template-columns: 20px minmax(0, 1fr) 28px; row-gap: .2rem; }
    .reading-where { grid-column: 2 / 3; white-space: normal; }

    .day-page .day { padding: 1.35rem 1rem 1.8rem; }
    .options { grid-template-columns: 1fr; }
    .option { font-size: .9rem; }
    .day-hero .orb { width: 58px; height: 58px; }

    /* La fenêtre des théories est exactement la même carte qu'au bureau : elle prend juste
       toute la largeur disponible, et se borne à la hauteur *visible* (voir « dvh » plus bas)
       plutôt qu'à celle de l'écran, barre d'adresse comprise. */
    .theories-modal { padding: .8rem .7rem calc(.8rem + env(safe-area-inset-bottom)); }
    .theories-panel { max-height: 78vh; }
    .theories-panel-head { padding: .85rem .9rem .5rem; }
    .theory-row-open { padding: .8rem .75rem; }
    .theory-row-drop { padding: 0 .95rem; }
}

/* Écran court (téléphone compact, ou clavier ouvert) : au bureau les quatre suggestions
   tiennent sous le titre sans défiler, et c'est ce qui fait la page d'accueil. Sur 667 px de
   haut, il faut prendre la hauteur au décor — la vignette et le tampon d'encre — pas aux
   cartes. */
@media (max-width: 820px) and (max-height: 740px) {
    .welcome { padding-top: .75rem; }
    .chat.is-empty .thread { gap: 0.8rem; }
    .suggestions-quiet { transform: scale(.98); }
    .orb { width: 50px; height: 50px; margin-bottom: .6rem; }
    .welcome h1 { font-size: clamp(1.25rem, 6.4vw, 1.6rem); }
    .welcome h1::after { display: none; }
    .welcome p { font-size: .82rem; margin-bottom: 1rem; }
}

/* Les très petits écrans n'ont plus la place pour deux colonnes de suggestions sans couper
   les mots : c'est le seul endroit où la mise en page change vraiment. Le seuil est bas
   exprès — un iPhone SE (375 px) garde la grille 2 × 2 du bureau. */
@media (max-width: 340px) {
    .suggestions { grid-template-columns: 1fr; }
    .suggestion { flex-direction: row; }
    .thread, .day-page .day, .welcome { padding-left: .75rem; padding-right: .75rem; }
    .composer-wrap { padding-left: .6rem; padding-right: .6rem; }
    .topbar { padding: .55rem .7rem; gap: .5rem; }
    .topbar-title { display: none; }
    .model-pill { font-size: .68rem; padding: .2rem .45rem; }
    .mode-opt { font-size: .72rem; padding: .32rem .65rem; }
}

/* Installée sur un téléphone, l'application occupe l'écran entier : la barre d'adresse ne
   reprend pas sa place au défilement, et « 100vh » se met à mentir de sa hauteur. */
@supports (height: 100dvh) {
    .app { height: 100dvh; }
    @media (max-width: 820px) {
        .theories-panel { max-height: 78dvh; }
    }
}

/* ============================================================ légal / RGPD */

.legal-links {
    display: flex; flex-wrap: wrap; gap: .35rem .55rem;
    padding: .35rem .15rem 0; font-size: .68rem;
}
.legal-links a {
    color: var(--faint); text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.legal-links a:hover { color: var(--text); border-bottom-color: var(--border); }

.legal-shell {
    flex: 1; min-width: 0; overflow: auto;
    padding: 1rem 1.25rem 2rem;
    max-width: 52rem; margin: 0 auto;
}
.legal-topbar {
    display: none; align-items: center; gap: .55rem;
    margin-bottom: .85rem;
}
.legal-topbar-title { font-size: .88rem; font-weight: 650; color: var(--muted); }
@media (max-width: 820px) {
    .legal-topbar { display: flex; }
}
.legal-head { margin-bottom: 1.25rem; }
.legal-back {
    display: inline-block; margin-bottom: .65rem;
    font-size: .82rem; color: var(--faint); text-decoration: none;
}
.legal-back:hover { color: var(--accent-3); }
.legal-head h1 { font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin: 0 0 .35rem; }
.legal-updated { color: var(--faint); font-size: .84rem; margin: 0; }
.legal-body.prose { font-size: .92rem; line-height: 1.65; color: var(--text); }
.legal-body.prose h2 {
    font-size: 1.05rem; margin: 1.35rem 0 .55rem; font-weight: 650;
}
.legal-body.prose p, .legal-body.prose ul { margin: 0 0 .85rem; }
.legal-body.prose ul { padding-left: 1.2rem; }
.legal-body.prose a { color: var(--accent-3); }
.legal-body.prose code {
    font-size: .84em; background: var(--surface); padding: .08rem .35rem; border-radius: 4px;
}
.legal-table {
    width: 100%; border-collapse: collapse; font-size: .82rem; margin: .5rem 0 1rem;
}
.legal-table th, .legal-table td {
    border: 1px solid var(--border-soft); padding: .45rem .55rem; text-align: left; vertical-align: top;
}
.legal-table th { background: var(--surface); font-weight: 650; }
.legal-nav {
    display: flex; flex-wrap: wrap; gap: .5rem .85rem;
    margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-soft);
    font-size: .82rem;
}
.legal-nav a { color: var(--faint); text-decoration: none; }
.legal-nav a:hover { color: var(--accent-3); }

.contact-form { display: grid; gap: .85rem; max-width: 36rem; }
.contact-form .field { display: grid; gap: .3rem; }
.contact-form .field span { font-size: .84rem; font-weight: 600; }
.contact-form .field small { font-weight: 400; color: var(--faint); }
.contact-form input, .contact-form textarea {
    width: 100%; border: 1px solid var(--border-soft); border-radius: 10px;
    background: var(--surface); color: var(--text); font: inherit; font-size: .9rem;
    padding: .55rem .65rem; transition: border-color .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--accent-3);
}
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.contact-note { font-size: .84rem; margin: 0; color: var(--faint); }
.contact-note.ok { color: var(--accent-3); }
.contact-note.err { color: #e07070; }
.contact-note.pending { color: var(--faint); }
.hp { display: none !important; }

.cookie-banner {
    position: fixed; inset: auto 0 0 0; z-index: 9000;
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
}
.cookie-inner { max-width: 52rem; margin: 0 auto; display: grid; gap: .65rem; }
.cookie-title { margin: 0; font-size: .92rem; font-weight: 700; }
.cookie-text { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.cookie-text a { color: var(--accent-3); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .45rem; }

body.legal-page .chat,
body.legal-page .day { min-height: 100%; }

@media (max-width: 820px) {
    .legal-shell { padding: .85rem .85rem 1.5rem; }
    .legal-table { font-size: .76rem; }
    .legal-table th, .legal-table td { padding: .35rem .4rem; }
}

/* ============================================================ modal paramètres */

.settings-modal[hidden] { display: none !important; }
.settings-modal {
    position: fixed; inset: 0; z-index: 85;
    display: grid; place-items: center;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.settings-backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 8, 12, .58);
    backdrop-filter: blur(6px);
}
.settings-panel {
    position: relative;
    width: min(540px, 100%);
    max-height: min(88vh, 720px);
    display: flex; flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--sidebar);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .42);
    overflow: hidden;
    animation: settingsIn .28s ease both;
}
@keyframes settingsIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.settings-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.1rem .65rem;
    border-bottom: 1px solid var(--border-soft);
}
.settings-head h2 { margin: 0; font-size: 1.08rem; font-weight: 700; }
.settings-sub { margin: .15rem 0 0; font-size: .78rem; color: var(--faint); }
.settings-tabs {
    display: flex; gap: .35rem;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}
.settings-tab {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 650;
    padding: .45rem .5rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.settings-tab:hover { color: var(--text); background: var(--surface-2); }
.settings-tab.is-on {
    color: var(--text);
    background: linear-gradient(120deg, rgba(255, 77, 109, .14), rgba(139, 92, 246, .16));
}
.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem;
}
.settings-pane { display: none; animation: riseIn .25s ease both; }
.settings-pane.is-on { display: block; }
.settings-pane-title {
    margin: 1rem 0 .55rem;
    font-size: .88rem;
    font-weight: 650;
    display: flex; align-items: center; gap: .35rem;
}
.settings-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 1rem 0;
}
.settings-foot {
    display: flex; gap: .5rem; flex-wrap: wrap;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
}
.settings-delete {
    padding: .75rem 1.1rem 1rem;
    border-top: 1px dashed rgba(255, 77, 109, .35);
    background: rgba(255, 77, 109, .04);
}
.settings-modal .row-form { margin-top: .65rem; }
.settings-modal .card-lead { margin-bottom: .75rem; }
.settings-modal .choices { margin-top: .25rem; }
.settings-modal .reading-add { margin-top: .5rem; }

@media (max-width: 560px) {
    .settings-modal { padding: .5rem; align-items: flex-end; }
    .settings-panel {
        width: 100%;
        max-height: 92vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .settings-tab { font-size: .74rem; padding: .4rem .35rem; }
}

/* ============================================================== SEO / découvrir */

.seo-crawl {
    max-width: 780px;
    margin: 0 auto;
    padding: .75rem 1.4rem 1.5rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--faint);
    text-align: center;
}
.seo-crawl h2 {
    margin: 0 0 .35rem;
    font-size: .82rem;
    font-weight: 650;
    color: var(--muted);
}
.seo-crawl p { margin: 0; }
.seo-crawl a { color: var(--accent-3); }
.chat:not(.is-empty) .seo-crawl { display: none; }

.discover-side-nav {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .15rem .35rem .8rem;
}
.discover-side-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .84rem;
    padding: .4rem .6rem;
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
}
.discover-side-nav a:hover { background: var(--surface); color: var(--text); }
.discover-side-nav a.is-on {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Même coquille flex que .chat — la page remplit toute la zone principale. */
body.discover-page .app { overflow: hidden; }
.chat.discover {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    position: relative;
    overflow: hidden;
}
.discover-pill {
    text-decoration: none;
    color: var(--accent-3);
    border-color: color-mix(in srgb, var(--accent-3) 35%, var(--border));
}
.discover-pill:hover { color: var(--text); }

.discover-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto; /* le JS gère le smooth dans ce conteneur */
}
.discover-article {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 1.25rem 1.4rem 3.5rem;
}

.discover-hero {
    text-align: center;
    padding: clamp(1.5rem, 5vh, 3.2rem) 0 clamp(2rem, 4vh, 2.8rem);
}
.discover-orb {
    margin: 0 auto 1.35rem;
}
/* Pas d'animation float ici : le transform cassait le scroll / le focus des ancres. */
.discover-orb.orb { animation: none; }
.discover-orb .mark {
    width: 42px;
    height: 42px;
    fill: var(--ink);
}
.discover-kicker {
    margin: 0 0 .7rem;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}
.discover-hero h1 {
    margin: 0 0 .85rem;
    font-size: clamp(1.7rem, 4.2vw, 2.45rem);
    letter-spacing: -.03em;
    line-height: 1.12;
    font-weight: 700;
}
.discover-em {
    color: var(--accent);
}
.discover-lead {
    margin: 0 auto 1.4rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 38ch;
}
.discover-lead em { color: var(--text); font-style: normal; font-weight: 600; }
.discover-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}
.discover-trust {
    margin: 1rem 0 0;
    font-size: .76rem;
    color: var(--faint);
    letter-spacing: .02em;
}

.discover-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 42px;
    padding: .55rem 1.15rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.discover-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.discover-btn.primary {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 12px 28px -14px rgba(255, 77, 109, .85);
}
.discover-btn.primary:hover {
    background: var(--hover);
    color: #fff;
}

.discover-section {
    margin: 0 0 1.1rem;
    padding: 1.35rem 1.25rem 1.4rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 18px 40px -28px var(--shadow);
    scroll-margin-top: 16px;
}

.discover-tag {
    margin: 0 0 .4rem;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-3);
    font-weight: 650;
}
.discover-section h2 {
    margin: 0 0 .55rem;
    font-size: 1.2rem;
    letter-spacing: -.015em;
    line-height: 1.25;
}
.discover-section > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    max-width: 52ch;
}

.discover-modes {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
}
.discover-modes li {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .7rem .75rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}
.discover-modes strong {
    font-size: .84rem;
    color: var(--text);
}
.discover-modes span {
    font-size: .74rem;
    color: var(--faint);
    line-height: 1.35;
}

.discover-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}
.discover-card {
    padding: .9rem .95rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 45%, var(--surface));
    transition: border-color .15s ease, transform .15s ease;
}
.discover-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.discover-card-ico {
    display: block;
    margin-bottom: .45rem;
    font-size: 1rem;
    color: var(--accent);
    opacity: .9;
}
.discover-card h3 {
    margin: 0 0 .3rem;
    font-size: .92rem;
}
.discover-card p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--muted);
}

.discover-day .discover-btn { margin-top: 1rem; }

.discover-faq {
    margin: .85rem 0 0;
    display: grid;
    gap: .55rem;
}
.discover-faq-item {
    padding: .75rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.discover-faq dt {
    font-weight: 650;
    margin: 0 0 .25rem;
    font-size: .9rem;
}
.discover-faq dd {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    font-size: .84rem;
}

.discover-foot {
    margin-top: 1.4rem;
    padding-bottom: .5rem;
}
.discover-foot-panel {
    text-align: center;
    padding: 1.6rem 1.25rem 1.7rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    background:
        radial-gradient(80% 80% at 20% 0%, rgba(255, 77, 109, .12), transparent 60%),
        radial-gradient(70% 70% at 90% 30%, rgba(139, 92, 246, .12), transparent 55%),
        var(--surface);
}
.discover-foot-panel h2 {
    margin: 0 0 .4rem;
    font-size: 1.25rem;
}
.discover-foot-panel p {
    margin: 0 auto 1.1rem;
    color: var(--muted);
    max-width: 34ch;
}
.discover-foot-panel .discover-btn { margin: 0 auto; }

.archive-options .option {
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: baseline;
}
.archive-options .option-meta {
    color: var(--faint);
    font-size: .78rem;
    white-space: nowrap;
}
.archive-article .quiz-foot a { color: var(--accent-3); }

@media (max-width: 820px) {
    .discover-article { padding: 1rem 1rem 2.8rem; }
    .discover-modes { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .discover-article { padding: .85rem .75rem 2.5rem; }
    .discover-hero { padding-top: 1.1rem; }
    .discover-lead { font-size: .95rem; }
    .discover-grid { grid-template-columns: 1fr; }
    .discover-section { padding: 1.1rem 1rem 1.15rem; }
    .discover-cta { flex-direction: column; align-items: stretch; }
    .discover-cta .discover-btn { width: 100%; }
    .discover-foot-panel .discover-btn { width: min(100%, 20rem); }
}