/* 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; }

/* ---------- 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)); }

/* Notices discrètes — coin haut droit */
.notice-stack {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    width: min(340px, calc(100vw - 1.5rem));
    pointer-events: none;
}
.notice {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .65rem;
    align-items: start;
    padding: .7rem .75rem .7rem .8rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
    color: var(--text);
    box-shadow: 0 18px 40px -28px var(--shadow);
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .22s ease, transform .22s ease;
}
.notice.show { opacity: 1; transform: translateX(0); }
.notice-mark {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    margin-top: .05rem;
}
.notice-ok .notice-mark {
    background: color-mix(in srgb, var(--accent-3) 22%, var(--surface));
    border-color: color-mix(in srgb, var(--accent-3) 45%, var(--border));
    color: var(--accent-3);
}
.notice-info .notice-mark {
    background: color-mix(in srgb, var(--accent-2) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border));
    color: var(--accent-2);
}
.notice-bad .notice-mark {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    color: var(--accent);
}
.notice-title {
    margin: 0 0 .15rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.notice-text {
    margin: 0;
    font-size: .84rem;
    line-height: 1.4;
    color: var(--text);
}
.notice-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    padding: .1rem .15rem;
    cursor: pointer;
    border-radius: 6px;
}
.notice-close:hover { color: var(--ink); background: var(--surface-2); }

@media (max-width: 640px) {
    .notice-stack {
        top: auto;
        bottom: max(1rem, env(safe-area-inset-bottom));
        right: 50%;
        transform: translateX(50%);
        width: min(420px, calc(100vw - 1.2rem));
    }
    .notice { transform: translateY(10px); }
    .notice.show { transform: translateY(0); }
}
/* ============================================================== 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; }

/* Le responsive de la coquille vit désormais tout en bas de ce fichier, après la mise en
   page du chat : une règle d'adaptation qui précède la règle qu'elle corrige ne s'applique
   jamais (même poids, la dernière écrite gagne). Ce qui touche au chat, à la question du
   jour ou aux pages SEO est parti dans leur propre feuille, pour la même raison — elles
   sont chargées après celle-ci. */

/* ============================================================ 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; }
/* Une URL ou un identifiant sans espace ne se coupe pas tout seul : sur 320 px, une seule
   adresse suffisait à élargir la page entière. « break-word » ne coupe que ce qui ne tient
   pas, les mots ordinaires gardent leur césure normale. */
.legal-body.prose { font-size: .92rem; line-height: 1.65; color: var(--text); overflow-wrap: break-word; }
.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;
    overflow-wrap: break-word;
}
.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; }
}


/* Layout zone principale (.chat) — partagé */
/* Chat — zone messages, accueil, composeur */
/* ============================================================ 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; }

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

   Partagé par le chat et la Question du jour, donc ici et non dans chat.css : cette dernière
   n'est chargée que par le chat, et la Question du jour affichait un champ blanc et un
   bouton gris — la mise en forme du navigateur, faute de feuille. Les pièces jointes, elles,
   restent dans chat.css : le chat est seul à les proposer. */

.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); }

.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; }

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

   Un seul dessin, plusieurs 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.

   Trois séparations structurent la suite :

   * 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 ;
   * ce qui appartient à une page précise (chat, question du jour, découvrir) vit dans la
     feuille de cette page. Ces feuilles sont chargées *après* celle-ci : une adaptation
     écrite ici serait écrasée par la règle de bureau écrite là-bas.

   Ce bloc ferme le fichier, et c'est volontaire : à poids égal, la dernière règle écrite
   gagne. Placé plus haut, il ne corrigeait pas la mise en page du chat déclarée au-dessus. */

/* -------------------------------------------------- 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. 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) {
    .history-item .rename, .history-item .kill { opacity: 1; }

    /* Cibles tactiles : en dessous d'environ 40 px, on vise à côté. La règle ne vise que les
       liens qui *sont* des boutons — un lien au fil d'une phrase garde la hauteur de sa
       ligne, sinon le paragraphe se disloque. */
    .icon-btn, .history-item .rename, .history-item .kill,
    .theory-row-drop, .action, .legal-links a, .side-link,
    .settings-tab, .choice, .secondary, .primary, .danger-btn,
    .legal-nav a, .legal-back, a.model-pill { min-height: 40px; }
    .history-item .rename, .history-item .kill,
    .action, .legal-links a, .legal-nav a, .legal-back,
    a.model-pill { display: inline-flex; align-items: center; justify-content: center; }
    .history-item .rename, .history-item .kill { min-width: 34px; }
    .field-check input, .field input[type="checkbox"] { width: 18px; height: 18px; }
    /* Sur iOS, un champ sous 16 px déclenche un zoom automatique au focus — et la page
       reste zoomée ensuite. */
    .field input, .field select, .reading-add input, .reading-add select,
    .contact-form input, .contact-form textarea, .composer textarea { font-size: 16px; }
    .scroll-bottom { width: 40px; height: 40px; }
}

/* ------------------------------------------------------- é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-top: calc(.85rem + env(safe-area-inset-top));
        padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
        padding-left: calc(.7rem + env(safe-area-inset-left));
    }
    .app:not(.mobile-open) .sidebar { margin-left: calc(-1 * min(var(--sidebar-w), 86vw)); }
    /* Sans cette règle, le tiroir n'a plus aucun bouton pour l'ouvrir : « replier » est
       masqué sur mobile, et le menu ne s'affichait qu'en état « replié » — jamais atteint. */
    .topbar #menu-btn { display: block; }
    .sidebar-collapse { display: none; }
    .app.mobile-open .backdrop { opacity: 1; pointer-events: auto; }

    .thread { padding: 1.2rem 1rem 1.5rem; }
    .topbar {
        padding: .6rem .9rem;
        padding-left: calc(.9rem + env(safe-area-inset-left));
        padding-right: calc(.9rem + env(safe-area-inset-right));
    }

    /* Le composeur descend jusqu'au bord bas : sur un téléphone à barre gestuelle, sans la
       marge de sécurité, le champ passe sous la barre système. */
    .composer-wrap {
        padding: .3rem .8rem calc(.8rem + env(safe-area-inset-bottom));
        padding-left: max(.8rem, env(safe-area-inset-left));
        padding-right: max(.8rem, env(safe-area-inset-right));
    }
    .composer { padding: .35rem .5rem .35rem .6rem; }
    .scroll-bottom { right: 1rem; bottom: 6.2rem; }

    .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; }
    .access { padding: clamp(1.2rem, 4vh, 2.4rem) 1rem 2.5rem; }
    .foot-actions .secondary, .foot-actions .primary { flex: 1 1 auto; }

    /* 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; }
}

/* Les boutons du bandeau cookies passent pleine largeur : à deux par ligne sur 320 px, les
   libellés se coupaient au milieu d'un mot. */
@media (max-width: 480px) {
    .cookie-actions { flex-direction: column; }
    .cookie-actions .action { width: 100%; justify-content: center; }
    .contact-actions .primary { width: 100%; }

    /* Les choix qui portent un titre *et* une explication (l'anti-spoiler) s'empilent :
       côte à côte, « Avec avertissement » tenait sur trois lignes de deux mots. Les choix
       d'un seul mot — le thème — restent en ligne, ils y sont plus lisibles. */
    .choices { flex-direction: column; }
    .choice { flex: 1 1 auto; }
    #theme-choices { flex-direction: row; }
    #theme-choices .choice { flex: 1 1 30%; text-align: center; }

    /* Six contrôles sur une ligne souple donnaient six lignes d'un champ : une grille de
       deux colonnes les range par paires, le titre et le bouton pleine largeur. */
    .reading-add { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
    .reading-add input[name="label"],
    .reading-add button { grid-column: 1 / -1; }
    .reading-add input[name="position"] { flex: none; }
}

/* Les très petits écrans (320 px, iPhone SE de 1ʳᵉ génération, Galaxy Fold replié) :
   on rend la marge au contenu plutôt qu'au cadre. */
@media (max-width: 380px) {
    .thread { padding-left: .75rem; padding-right: .75rem; }
    .topbar { padding: .55rem .7rem; gap: .5rem; }
    .model-pill { font-size: .68rem; padding: .2rem .45rem; }
    .legal-shell { padding-left: .7rem; padding-right: .7rem; }
    .account-text strong { font-size: .8rem; }
    .composer-wrap { padding-left: .6rem; padding-right: .6rem; }
}

/* Téléphone couché : l'encoche mange le bord gauche ou droit selon le sens de rotation, et
   la hauteur utile tombe sous 400 px — le décor doit rendre sa place au contenu. */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 500px) {
    .legal-shell, .settings, .access {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    .access { padding-top: 1rem; }
    .access-mark { width: 48px; height: 48px; margin-bottom: .8rem; }
    .theories-panel, .settings-panel { max-height: 94vh; }
    .composer textarea { max-height: 88px; }
    .disclaimer { display: none; }
}

/* 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; }
    }
    @media (max-width: 560px) {
        .settings-panel { max-height: 92dvh; }
    }
}