/* Pythia — thème inspiré de l'interface Fastino : neutre, plat, bordures fines, un seul accent corail. */

@font-face {
    font-family: 'Geist Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/geist/geist-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Geist Mono Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/fonts/geist-mono/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
    color-scheme: light;
    --bg: #ffffff;
    --bg-subtle: #fafafa;
    --card: #ffffff;
    --input-bg: #ffffff;
    --hover: #f5f5f5;
    --active: #ebebeb;
    --border: #e5e5e5;
    --border-strong: #d4d4d4;
    --text: #0a0a0a;
    --text-sec: #737373;
    --text-faint: #a1a1a1;

    --primary: #ff794c;
    --primary-hover: #f56a3c;
    --primary-fg: #23120d;
    --primary-ink: #b43400;
    --primary-soft: rgba(255, 115, 69, 0.1);
    --focus-ring: rgba(255, 115, 69, 0.3);
    --danger: #e7000b;
    --danger-soft: rgba(231, 0, 11, 0.07);
    --warn-soft: rgba(255, 147, 0, 0.1);

    /* État (confiance) : toujours accompagné d'une icône et d'un libellé, jamais la couleur seule */
    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-serious: #ec835a;

    /* Barres de probabilité : une seule teinte, la piste est un pas plus clair de la même rampe.
       Corail et gris vérifiés ensemble : distincts pour les daltoniens, 3:1 au moins sur le fond. */
    --bar: #de4700;
    --bar-track: #ffe7dd;
    --bar-rest: #8c8c8c;
    --bar-rest-track: #f0f0f0;

    --shadow-pop: 0 1px 3px rgba(0, 0, 0, 0.1), 0 12px 32px -8px rgba(0, 0, 0, 0.18);
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --font: 'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --sidebar-width: 232px;
}

/* Le thème sombre a ses propres valeurs (ce n'est pas une inversion du thème clair) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a0a0a;
    --bg-subtle: #121212;
    --card: #171717;
    --input-bg: #131313;
    --hover: #1f1f1f;
    --active: #262626;
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.17);
    --text: #fafafa;
    --text-sec: #a1a1a1;
    --text-faint: #737373;

    --primary-ink: #ff7345;
    --primary-soft: rgba(255, 115, 69, 0.13);
    --danger: #ff6467;
    --danger-soft: rgba(255, 100, 103, 0.1);
    --warn-soft: rgba(255, 147, 0, 0.12);

    --bar: #e9643a;
    --bar-track: rgba(233, 100, 58, 0.22);
    --bar-rest: #808080;
    --bar-rest-track: rgba(255, 255, 255, 0.07);

    --shadow-pop: 0 1px 3px rgba(0, 0, 0, 0.5), 0 16px 40px -8px rgba(0, 0, 0, 0.7);
}

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

html { background: var(--bg); }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

::selection { background: var(--primary); color: var(--primary-fg); }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
a { color: var(--primary-ink); }
code, kbd, pre { font-family: var(--mono); }
svg { flex-shrink: 0; }

/* --- UTILS --- */
.hidden { display: none !important; }
.muted { color: var(--text-sec); }
.mono { font-family: var(--mono); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
/* flex: none — dans un bandeau en flex, le rond serait écrasé en ovale par le texte voisin */
.spinner { flex: none; width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- LAYOUT --- */
#app-container { display: flex; min-height: 100dvh; }

.sidebar {
    width: var(--sidebar-width); flex-shrink: 0; position: sticky; top: 0; height: 100dvh;
    background: var(--bg-subtle); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; padding: 16px 12px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brand img { width: 26px; height: 26px; }
.nav-links { list-style: none; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
    border: none; border-radius: var(--radius); background: none; cursor: pointer;
    color: var(--text-sec); font: inherit; font-weight: 500; text-align: left; text-decoration: none;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--active); color: var(--text); }
.nav-item svg { width: 16px; height: 16px; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-footer { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--border); }

.content { flex: 1; min-width: 0; padding: 28px 32px 72px; }
.content-narrow { max-width: 760px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-header h1 { font-size: 24px; }
.page-header p { color: var(--text-sec); margin-top: 4px; max-width: 62ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- BOUTONS --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--card); color: var(--text);
    font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--hover); }
.btn:focus-visible, .nav-item:focus-visible, .icon-btn:focus-visible, .add-type:focus-visible, .tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); border-color: var(--primary-hover); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-solid { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-solid:hover { background: var(--text); opacity: 0.88; }
.btn-ghost { border-color: transparent; background: none; color: var(--text-sec); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 40px; padding: 0 18px; }
.btn-block { width: 100%; }
.btn kbd { font-size: 11px; opacity: 0.65; font-weight: 400; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: none; border-radius: var(--radius-sm); background: none; color: var(--text-sec); cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn svg { width: 15px; height: 15px; }

/* --- CARTES ET CHAMPS --- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { font-size: 15px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; min-height: 18px; }
.card-desc { color: var(--text-sec); font-size: 13px; margin: -6px 0 14px; }

label, .label { display: block; font-size: 12px; font-weight: 500; color: var(--text-sec); margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], textarea, select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--input-bg); color: var(--text); font: inherit; transition: border-color 0.12s, box-shadow 0.12s;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
input.invalid, textarea.invalid { border-color: var(--danger); }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field-hint { font-size: 12px; color: var(--text-sec); margin-top: 6px; }
.field-error { color: var(--danger); font-size: 12px; }
.input-mono { font-family: var(--mono); font-size: 13px; }

.password-container { position: relative; }
.password-container input { padding-right: 38px; }
.toggle-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* Contrôle segmenté (Texte / JSON, type de question, thème) */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--hover); border-radius: var(--radius); }
.seg button {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: none; border-radius: var(--radius-sm);
    background: none; color: var(--text-sec); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, 0.06); }
.seg button svg { width: 14px; height: 14px; }
.seg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.tag {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text-sec); white-space: nowrap;
}
.tag svg { width: 12px; height: 12px; }
.count { color: var(--text-sec); font-size: 13px; }

.banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 13px; }
.banner svg { width: 16px; height: 16px; margin-top: 2px; }
.banner-warn { background: var(--warn-soft); border-color: rgba(255, 147, 0, 0.35); }
.banner-error { background: var(--danger-soft); border-color: var(--danger); }
.banner-error svg { color: var(--danger); }
.banner strong { font-weight: 600; }

/* --- PLAYGROUND --- */
/* Une colonne sous 1080 px, deux (contenu et questions à gauche, réponse à droite) jusqu'à 1400 px, puis trois, chacune
   avec son propre défilement : rien ne pousse la réponse hors de l'écran */
.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "input" "questions" "output"; gap: 20px 24px; align-items: start; }
.pg-input { grid-area: input; }
.pg-questions { grid-area: questions; }
.pg-output { grid-area: output; }
.pg-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pg-col-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 32px; }
.pg-col-head h2 { font-size: 15px; }
.pg-col-head .grow { flex: 1; }
.pg-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-size: 12px; font-weight: 600; }
.pg-col .card, .pg-col .banner, .pg-col .field { margin: 0; }
.pg-output .tabs { margin-bottom: 2px; }
.pg-type label { display: block; margin-bottom: 6px; }
.pg-type-row { display: flex; align-items: center; gap: 6px; }
.pg-type-row select { flex: 1; min-width: 0; }
.pg-type .field-hint { margin-top: 6px; }

@media (min-width: 1080px) {
    .pg-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "input output" "questions output"; }
    .pg-output { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
}
@media (min-width: 1400px) {
    .pg-grid { grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.1fr) minmax(0, 1.05fr); grid-template-areas: "input questions output"; }
    .pg-col { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 0 4px 4px; }
    .pg-input .run-dock { margin-top: auto; bottom: 0; }
}

/* Questions : une ligne par question, celle qu'on modifie s'ouvre en dessous.
   minmax(0, 1fr) : sans colonne explicite, la piste prend la largeur du libellé le plus long (texte sur une ligne)
   et la liste sort de l'écran sur téléphone, ce qui fait dézoomer toute la page à Safari. */
.qlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.qitem { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.qitem.open { border-color: var(--border-strong); box-shadow: var(--shadow-pop); }
.qitem.has-error { border-color: var(--danger); }
.qrow { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; }
.qrow-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: none; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; border-radius: var(--radius); }
.qrow-toggle:hover { background: var(--hover); }
.qrow-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.qrow-toggle > svg { flex: none; width: 14px; height: 14px; color: var(--text-faint); }
.qrow-type { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--bg-subtle); color: var(--text-sec); font-size: 11.5px; }
.qrow-type svg { width: 12px; height: 12px; }
.qrow-key { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
.qrow-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sec); }
.qrow .qcard-tools { opacity: 0; transition: opacity 0.12s; }
.qitem:hover .qcard-tools, .qitem:focus-within .qcard-tools, .qitem.open .qcard-tools { opacity: 1; }
.qitem .qcard { margin: 0; border: none; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Menu « Ajouter » */
/* Liste calée sur le bord droit de l'en-tête de colonne, pas du bouton : quand l'en-tête passe sur deux lignes
   (écran étroit), le bouton n'est plus au bord et la liste sortait à gauche de l'écran */
.pg-col-head { position: relative; }
.pg-menu { position: static; }
.pg-menu > summary { list-style: none; }
.pg-menu > summary::-webkit-details-marker { display: none; }
.pg-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 2px; width: min(300px, calc(100vw - 32px)); padding: 6px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 10px; }
/* Sur écran étroit, la légende passe sous le titre au lieu de s'écraser en colonne d'un mot */
.section-head .count.grow { min-width: 180px; }
/* Types de contenu : une pastille par jeu de la banque */
.type-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.type-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--card); color: var(--text-sec); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.type-pill:hover { background: var(--hover); color: var(--text); }
.type-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.type-pill[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--text); }
.type-pill[aria-pressed="true"] svg { color: var(--primary-ink); }
.type-pill svg { width: 14px; height: 14px; }
.type-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.card.drag-over { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
#ocr-note { align-items: center; }
#ocr-note .icon-btn { margin-left: auto; }

/* Verdict : résumé du risque et de la nature, au-dessus des réponses détaillées */
.verdict-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-xl); }
.verdict-banner svg { width: 22px; height: 22px; margin-top: 2px; }
.verdict-banner .verdict-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.verdict-banner .verdict-sub { margin-top: 2px; font-size: 13px; color: var(--text-sec); }
.verdict-banner .verdict-text { flex: 1; min-width: 0; }
/* Note sur 20 à droite du bandeau : même échelle que la note de Fraud Buster (20 = sûr) */
.verdict-banner .verdict-note { flex-shrink: 0; text-align: right; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.verdict-banner .verdict-note strong { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.verdict-banner .verdict-note span { font-size: 14px; color: var(--text-sec); }
.verdict-banner .verdict-note small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-sec); }
.verdict-banner.level-0 { border-left-color: var(--status-good); }
.verdict-banner.level-0 svg { color: var(--status-good); }
.verdict-banner.level-1 { border-left-color: var(--status-warning); }
.verdict-banner.level-1 svg { color: var(--status-warning); }
.verdict-banner.level-2 { border-left-color: var(--status-serious); }
.verdict-banner.level-2 svg { color: var(--status-serious); }
.verdict-banner.level-3 { border-left-color: var(--danger); }
.verdict-banner.level-3 svg { color: var(--danger); }

#suggest-note { align-items: center; }
#suggest-note .spinner { width: 15px; height: 15px; }
#suggest-note .icon-btn { margin-left: auto; }
.section-head h2 { font-size: 15px; }

#state-input { min-height: 110px; }
#state-input.is-json { font-family: var(--mono); font-size: 13px; min-height: 150px; }

.qcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px 16px; margin-bottom: 12px; }
.qcard.has-error { border-color: var(--danger); }
.qcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.qcard-key { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 6px; }
.qcard-key input { height: 30px; padding: 4px 8px; font-family: var(--mono); font-size: 13px; }
.qcard-tools { display: flex; gap: 2px; }
.qcard .type-hint { font-size: 12px; color: var(--text-sec); margin: -4px 0 12px; }

.criteria-row { display: grid; gap: 8px; align-items: center; margin-bottom: 8px; }
.criteria-row.option { grid-template-columns: minmax(90px, 0.42fr) minmax(0, 1fr) 28px; }
.criteria-row.level { grid-template-columns: 26px minmax(0, 1fr) 28px; }
.criteria-row.pair { grid-template-columns: 1fr 1fr; }
.level-index { font-family: var(--mono); font-size: 12px; color: var(--text-sec); text-align: center; font-variant-numeric: tabular-nums; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: none; background: none; color: var(--primary-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn svg { width: 14px; height: 14px; }

/* Ajout d'une question : un bouton par type, comme le tableau « Choose a question type » de la doc */
.add-type {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; text-align: left;
    border: none; border-radius: var(--radius); background: none; color: var(--text); font: inherit; cursor: pointer;
}
.add-type:hover, .add-type:focus-visible { outline: none; background: var(--primary-soft); }
.add-type-name { display: flex; align-items: center; gap: 7px; width: 100%; font-weight: 600; font-size: 13px; }
.add-type-name svg { width: 15px; height: 15px; color: var(--primary-ink); }
.add-type-title { font-weight: 400; color: var(--text-sec); }
.add-type-hint { font-size: 12px; color: var(--text-sec); line-height: 1.4; }

/* Barre d'exécution toujours à portée, les erreurs de saisie juste au-dessus du bouton */
.run-dock { position: sticky; bottom: 12px; z-index: 5; display: grid; gap: 8px; margin-top: 18px; }
.runbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop);
}
.runbar-model { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1; min-width: 170px; white-space: nowrap; }
.runbar-model input { height: 32px; font-family: var(--mono); font-size: 12px; }
.error-list {
    list-style: none; max-height: 136px; overflow-y: auto; padding: 10px 14px; border: 1px solid var(--danger); border-radius: var(--radius-lg);
    background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--card); box-shadow: var(--shadow-pop); font-size: 13px;
}
.error-list li + li { margin-top: 4px; }

/* --- ONGLETS --- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent;
    background: none; color: var(--text-sec); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.tab svg { width: 14px; height: 14px; }
.tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); border-radius: var(--radius); }
/* Paramètres : un onglet par famille de réglages, l'onglet actif suit l'ancre de l'adresse */
.settings-tabs { margin-bottom: 18px; scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }

/* Mise en page : menu vertical d'onglets à gauche, réglages à droite ; une barre horizontale sous 900 px */
.content-settings { max-width: 1040px; }
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-nav { position: sticky; top: 20px; flex-direction: column; gap: 2px; border-bottom: none; margin: 0; overflow: visible; }
.settings-nav .tab {
    width: 100%; margin: 0; padding: 7px 10px; border: none; border-radius: var(--radius); font-size: 13px; text-align: left;
}
.settings-nav .tab:hover { background: var(--hover); }
.settings-nav .tab[aria-selected="true"] { background: var(--primary-soft); color: var(--primary-ink); }
.settings-nav .tab[aria-selected="true"] svg { color: var(--primary); }
.settings-nav .tab svg { width: 15px; height: 15px; flex: none; }
.settings-nav-label {
    padding: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint);
}
.settings-nav-label:first-child { padding-top: 0; }
.settings-panels { min-width: 0; }
/* Cartes fixes et cartes générées (.param-groups) espacées pareil, quel que soit leur ordre */
.settings-panel:not([hidden]), .param-groups { display: grid; gap: 16px; }
.settings-panel .card + .card { margin-top: 0; }
.param-groups:empty { display: none; }
@media (max-width: 900px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; margin-bottom: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
    .settings-nav .tab { width: auto; flex: none; }
    .settings-nav-label { display: none; }
}

/* Icône de tête de carte */
.card-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
    border-radius: var(--radius); background: var(--primary-soft); color: var(--primary);
}
.card-icon svg { width: 15px; height: 15px; }

/* Réglages : une ligne par réglage, séparées d'un filet */
.param-list { display: grid; }
.param { padding: 12px 0; border-top: 1px solid var(--border); }
.param:first-child { border-top: none; padding-top: 0; }
.param-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.param-head label, .param-text label { margin: 0; font-size: 13px; color: var(--text); }
.param-head label { flex: 1; min-width: 0; }
.param-bool { display: flex; align-items: center; gap: 16px; }
.param-text { flex: 1; min-width: 0; }
.param-text .field-hint { margin-top: 2px; }
.param-side { display: flex; align-items: center; gap: 8px; flex: none; }
.param textarea { min-height: 72px; }
.input-unit { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.input-unit span { font-size: 12px; color: var(--text-sec); }

.source-tag { height: 20px; padding: 0 7px; font-size: 11px; gap: 4px; }
.source-tag svg { width: 11px; height: 11px; }
.source-settings { color: var(--primary-ink); border-color: rgba(255, 115, 69, 0.4); background: var(--primary-soft); }
.source-default { color: var(--text-faint); border-style: dashed; }

/* Interrupteur : une case à cocher cachée, la piste et le curseur dessinés, une icône Lucide dans le curseur */
.switch { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track {
    position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--active); border: 1px solid var(--border-strong);
    transition: background 0.15s, border-color 0.15s;
}
.switch-thumb {
    position: absolute; top: 2px; left: 2px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    border-radius: 50%; background: var(--card); color: var(--text-faint); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s, color 0.15s;
}
.switch-thumb svg { width: 11px; height: 11px; stroke-width: 3; }
.switch-thumb .lucide-check { display: none; }
.switch input:checked + .switch-track { background: var(--primary); border-color: var(--primary-hover); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); color: var(--primary-ink); }
.switch input:checked + .switch-track .lucide-check { display: block; }
.switch input:checked + .switch-track .lucide-x { display: none; }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Étapes numérotées (installation du script Tampermonkey) */
.steps { list-style: none; display: grid; gap: 10px; margin: 0 0 4px; padding: 0; counter-reset: step; }
.steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.step-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
    border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--primary);
}
.step-icon svg { width: 14px; height: 14px; }
.steps strong { display: block; font-size: 13px; }
.steps li > div > span { display: block; font-size: 12px; color: var(--text-sec); margin-top: 2px; }

/* --- CODE --- */
.code-block { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.code-block + .code-block, .code-title { margin-top: 14px; }
.code-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.code-block pre { margin: 0; padding: 12px 14px; font-size: 12px; line-height: 1.6; overflow: auto; max-height: 60vh; white-space: pre; tab-size: 2; }
.code-block .icon-btn { position: absolute; top: 6px; right: 6px; background: var(--bg-subtle); }

/* --- RÉSULTATS --- */
.run-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; font-size: 12px; color: var(--text-sec); }
.run-meta span { display: inline-flex; align-items: center; gap: 5px; }
.run-meta svg { width: 13px; height: 13px; }

.result { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px 16px; }
.result + .result { margin-top: 12px; }
.result-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.result-key { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.result-question { margin-top: 6px; font-size: 13px; color: var(--text-sec); }
.result.facts ul { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.result.facts li + li { margin-top: 4px; }

/* Confiance : icône + libellé, le texte reste dans la couleur du texte */
.conf { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: help; }
.conf svg { width: 14px; height: 14px; }
.conf-good svg { color: var(--status-good); }
.conf-warning svg { color: var(--status-warning); }
.conf-serious svg { color: var(--status-serious); }

.verdict { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 10px; }
.verdict-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.verdict-label { font-size: 13px; color: var(--text-sec); }

/* Noul : une jauge de 0 à 100 %, repère à 50 % */
.meter { position: relative; height: 10px; background: var(--bar-track); border-radius: 0 4px 4px 0; }
.meter-fill { height: 100%; background: var(--bar); border-radius: 0 4px 4px 0; min-width: 2px; transition: width 0.35s ease; }
.meter-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text-faint); }
.meter-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--text-sec); }
.meter-ends span:last-child { text-align: right; }

/* Choice et Score : une barre fine par option, la gagnante seule porte l'accent */
.bars { list-style: none; display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 1.15fr) minmax(60px, 1fr) 58px; gap: 10px; align-items: center; padding: 2px 0; border-radius: var(--radius-sm); }
.bar-row:hover { background: var(--hover); }
/* Libellé sur deux lignes au plus ; le texte complet reste dans l'infobulle de la ligne */
.bar-label {
    font-size: 13px; line-height: 1.35; color: var(--text-sec); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.bar-row.is-top .bar-label { color: var(--text); font-weight: 500; }
.bar-label .level-index { margin-right: 6px; }
.bar-track { height: 8px; background: var(--bar-rest-track); border-radius: 0 4px 4px 0; }
.bar-fill { display: block; height: 100%; min-width: 2px; background: var(--bar-rest); border-radius: 0 4px 4px 0; transition: width 0.35s ease; }
.bar-row.is-top .bar-track { background: var(--bar-track); }
.bar-row.is-top .bar-fill { background: var(--bar); }
.bar-value { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-sec); }
.bar-row.is-top .bar-value { color: var(--text); font-weight: 500; }

/* Score : niveau attendu (continu) placé sur l'échelle */
.scale { margin: 4px 0 14px; }
.scale-caption { font-size: 12px; color: var(--text-sec); margin-bottom: 10px; }
.scale-caption strong { color: var(--text); font-weight: 500; }
.scale-line { position: relative; height: 2px; margin: 0 6px; background: var(--border-strong); border-radius: 1px; }
.scale-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--bar); border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.scale-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-family: var(--mono); color: var(--text-faint); }
.scale-ticks span { width: 12px; text-align: center; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); text-align: center; color: var(--text-sec); }
.empty svg { width: 22px; height: 22px; color: var(--text-faint); }
.empty strong { color: var(--text); font-weight: 500; }

/* --- LISTES (historique, modèles) --- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input[type="search"] { max-width: 420px; flex: 1 1 260px; }
/* Sans cela une liste déroulante prend toute la ligne (width: 100% des champs) et chacune passe à la ligne */
.toolbar select { width: auto; flex: 0 1 220px; }
.list { display: grid; gap: 8px; }
.list-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; width: 100%; padding: 12px 14px; text-align: left;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); font: inherit; cursor: pointer;
}
.list-item:hover { border-color: var(--border-strong); background: var(--hover); }
.list-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.list-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.list-meta { font-size: 12px; color: var(--text-sec); white-space: nowrap; }
.list-desc { grid-column: 1 / -1; font-size: 13px; color: var(--text-sec); }
.tag strong { color: var(--text); font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.preset-item { cursor: default; }
.preset-item:hover { background: var(--card); border-color: var(--border); }

/* --- MODALE ET TOAST --- */
.modal-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.45); }
.modal-content { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 88vh; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); }
.modal-content.wide { max-width: 860px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 15px; }
.modal-body { padding: 16px; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 3000; max-width: min(420px, calc(100vw - 40px)); padding: 10px 14px;
    background: var(--text); color: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 500;
    animation: toast-in 0.18s ease-out;
}
.toast.error { background: var(--danger); color: #ffffff; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- CONNEXION / PREMIER DÉMARRAGE --- */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 24px 16px; background: var(--bg-subtle); }
.auth-box { width: 100%; max-width: 400px; padding: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.auth-logo img { width: 30px; height: 30px; }
.auth-box h1 { font-size: 20px; margin-bottom: 4px; }
.auth-box > p { color: var(--text-sec); margin-bottom: 20px; }
.requirements { list-style: none; display: grid; gap: 4px; margin: 4px 0 14px; font-size: 12px; color: var(--text-sec); }
.requirements li { display: flex; align-items: center; gap: 6px; }
.requirements li::before { content: '○'; width: 12px; text-align: center; }
.requirements li.valid { color: var(--text); }
.requirements li.valid::before { content: '✓'; color: var(--status-good); }

/* --- PARAMÈTRES --- */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--text-sec); }
.kv dd { overflow-wrap: anywhere; }
.form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.inline-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.inline-status svg { width: 15px; height: 15px; }
.inline-status.good svg { color: var(--status-good); }
.inline-status.bad svg { color: var(--danger); }

/* --- ÉCRANS ÉTROITS --- */
/* Barre du haut, tiroir et barre d'onglets : seulement sous 760 px */
.topbar, .tabbar, .nav-backdrop, .sidebar-close { display: none; }
.sidebar-head { display: flex; align-items: center; gap: 8px; }
.sidebar-head .brand { flex: 1; min-width: 0; }

@media (max-width: 760px) {
    /* Hauteur de la barre d'onglets, zone de la barre d'accueil de l'iPhone comprise */
    :root { --tabbar-h: calc(56px + env(safe-area-inset-bottom)); }
    html { -webkit-text-size-adjust: 100%; }
    html.menu-open { overflow: hidden; }
    #app-container { flex-direction: column; }

    /* Barre du haut : bouton du menu, nom, page courante. Translucide comme les barres d'iOS. */
    .topbar {
        position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 6px;
        min-height: calc(52px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
        background: color-mix(in srgb, var(--bg-subtle) 82%, transparent); border-bottom: 1px solid var(--border);
        -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    }
    .topbar-btn {
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
        border: none; border-radius: var(--radius); background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .topbar-btn:active { background: var(--active); }
    .topbar-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
    .topbar-btn svg { width: 22px; height: 22px; }
    .topbar-brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
    .topbar-brand img { width: 24px; height: 24px; }
    .topbar-title { flex: 1; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-sec); }

    /* Le menu latéral devient un tiroir venu de la gauche, avec ses libellés */
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 1001; width: min(300px, 86vw); height: auto;
        padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border-right: 1px solid var(--border); box-shadow: var(--shadow-pop); overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(-105%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .sidebar.open { transform: none; visibility: visible; transition: transform 0.25s ease; }
    .sidebar-head { margin-bottom: 14px; }
    .sidebar-head .brand { padding: 4px 8px; }
    .sidebar-close { display: inline-flex; width: 40px; height: 40px; }
    .sidebar-close svg { width: 20px; height: 20px; }
    .sidebar .nav-item { padding: 11px 12px; font-size: 15px; -webkit-tap-highlight-color: transparent; }
    .sidebar .nav-item svg { width: 18px; height: 18px; }
    .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.4);
        opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    }
    .nav-backdrop.open { opacity: 1; pointer-events: auto; }

    /* Barre d'onglets en bas : les cinq pages courantes, le reste dans le menu */
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: color-mix(in srgb, var(--bg-subtle) 82%, transparent); border-top: 1px solid var(--border);
        -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    }
    .tabbar-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 56px;
        color: var(--text-sec); font-size: 10.5px; font-weight: 500; text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .tabbar-item svg { width: 22px; height: 22px; }
    .tabbar-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabbar-item.active { color: var(--primary-ink); }
    .tabbar-item:active { opacity: 0.6; }
    .tabbar-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); border-radius: var(--radius); }

    /* Ce qui colle au bas de l'écran passe au-dessus de la barre d'onglets */
    .run-dock { bottom: calc(var(--tabbar-h) + 10px); }
    .toast { left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 12px); max-width: none; }
    .modal-overlay { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
    .modal-content { max-height: 100%; }

    #state-count { white-space: nowrap; }
    .content {
        padding: 20px max(16px, env(safe-area-inset-right)) calc(var(--tabbar-h) + 32px) max(16px, env(safe-area-inset-left));
    }
    .page-header h1 { font-size: 22px; }
    .criteria-row.option { grid-template-columns: minmax(0, 1fr) 28px; }
    .criteria-row.option input:first-child { grid-column: 1 / -1; }
    .bar-row { grid-template-columns: minmax(0, 1fr) 58px; }
    .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Écran tactile : Safari zoome sur tout champ écrit sous 16 px quand on le touche, et la page reste agrandie */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ========================= UTILISATION ========================= */

/* Séries du graphique : deux teintes vérifiées ensemble sur chaque fond (distinctes pour les daltoniens, 3:1 au moins) */
:root { --series-input: #2a78d6; --series-output: #eb6834; --chart-grid: #ededed; --chart-axis: #c8c8c8; }
:root[data-theme="dark"] { --series-input: #3987e5; --series-output: #d95926; --chart-grid: #262626; --chart-axis: #3d3d3d; }

#usage-body.loading { opacity: 0.55; transition: opacity 0.12s; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px; min-width: 0; }
.stat-label { font-size: 13px; color: var(--text-sec); }
.stat-value { margin-top: 4px; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.stat-detail { margin-top: 2px; font-size: 12px; color: var(--text-sec); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; font-size: 12px; color: var(--text-sec); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.swatch-input { background: var(--series-input); }
.swatch-output { background: var(--series-output); }

.chart { position: relative; min-height: 260px; }
/* Les scripts dessinent au moins 300 à 320 px de large : sur un écran plus étroit, le dessin se réduit (viewBox) */
.chart svg { display: block; overflow: visible; max-width: 100%; height: auto; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart .tick { fill: var(--text-sec); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .mark { pointer-events: none; }
.chart .series-input { fill: var(--series-input); }
.chart .series-output { fill: var(--series-output); }
.chart .hit { fill: transparent; outline: none; }
.chart .hit:hover, .chart .hit:focus-visible { fill: var(--hover); }
.chart .hit:focus-visible { stroke: var(--primary); stroke-width: 1; }

.chart-tip {
    position: absolute; z-index: 2; min-width: 190px; padding: 10px 12px; pointer-events: none;
    background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-size: 12px;
}
.tip-title { margin-bottom: 6px; font-weight: 600; }
.tip-row { display: flex; align-items: center; gap: 8px; line-height: 1.7; }
.tip-key { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.tip-label { color: var(--text-sec); }
.tip-row strong { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.chart-table { margin-top: 10px; font-size: 13px; }
.chart-table summary { cursor: pointer; color: var(--text-sec); width: fit-content; }
.chart-table summary:hover { color: var(--text); }
.chart-table .table-scroll { margin-top: 10px; }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { color: var(--text-sec); font-weight: 500; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tfoot td { border-top: 1px solid var(--border-strong); border-bottom: none; font-weight: 600; }

.price-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.price-form .field { margin-bottom: 0; }
.price-form .field span { display: block; margin-bottom: 6px; font-size: 13px; }
.price-form .btn { justify-self: start; }

/* Sources : entrées de Fraud Buster, note de référence et verdict de Pythia côte à côte */
.source-table td { vertical-align: middle; }
/* Le verdict peut tenir en une phrase : il passe à la ligne au lieu de pousser la colonne « Expert » hors de l'écran */
.source-table .source-verdict-cell { white-space: normal; min-width: 240px; }
.source-table .source-excerpt { max-width: 420px; overflow: hidden; text-overflow: ellipsis; color: var(--text-sec); }
.source-table .source-error { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--danger); }
.note { display: inline-block; min-width: 38px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); font-variant-numeric: tabular-nums; text-align: center; }
.note.level-0 { border-color: var(--status-good); }
.note.level-1 { border-color: var(--status-warning); }
.note.level-3 { border-color: var(--danger); }
.source-verdict { color: var(--text); text-decoration: none; border-bottom: 2px solid var(--border); }
.source-verdict.level-0 { border-bottom-color: var(--status-good); }
.source-verdict.level-1 { border-bottom-color: var(--status-warning); }
.source-verdict.level-2 { border-bottom-color: var(--status-serious); }
.source-verdict.level-3 { border-bottom-color: var(--danger); }
.tag-good { border-color: var(--status-good); color: var(--text); }
.tag-button { background: none; cursor: pointer; font-family: inherit; }
.tag-button:hover { background: var(--hover); }
.tag-bad { border-color: var(--danger); color: var(--danger); }

/* ========================= PYTHIA GOLDEN SET ========================= */

/* Dorure : un dégradé or et corail glisse lentement sur le texte, un reflet clair passe. En clair, teintes foncées
   (4,5:1 au moins sur le fond du menu, 3:1 pour le reflet) ; en sombre, teintes claires. Immobile si les animations
   sont réduites, texte ordinaire en mode contraste élevé. */
:root {
    --gold-1: #8a5a00;
    --gold-2: #9a6200;
    --gold-3: #b43400;
    --gold-shine: #b8860b;
    --gold-icon: #b07800;
    --gold-soft: rgba(212, 160, 23, 0.12);
    --gold-line: rgba(196, 140, 10, 0.5);
    --gold-glow: rgba(230, 170, 30, 0.45);
}
:root[data-theme="dark"] {
    --gold-1: #e8b04a;
    --gold-2: #ffd36e;
    --gold-3: #ff8a5b;
    --gold-shine: #fff1c1;
    --gold-icon: #f5c451;
    --gold-soft: rgba(245, 196, 81, 0.1);
    --gold-line: rgba(245, 196, 81, 0.45);
    --gold-glow: rgba(255, 200, 80, 0.55);
}

.gilded {
    background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 18%, var(--gold-shine) 28%, var(--gold-3) 42%, var(--gold-2) 68%, var(--gold-1) 100%) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gilded-shine 7s linear infinite;
}
/* Le dégradé fait deux fois la largeur du texte et commence comme il finit : le glissement boucle sans saut */
@keyframes gilded-shine { to { background-position: -200% 0; } }
/* L'étincelle pétille de temps en temps */
@keyframes gilded-twinkle {
    0%, 72%, 100% { transform: scale(1) rotate(0deg); }
    82% { transform: scale(1.22) rotate(16deg); }
    91% { transform: scale(0.94) rotate(-6deg); }
}

/* Lien du menu, sous Paramètres, séparé par un filet doré */
.nav-golden-item { position: relative; margin-top: 8px; padding-top: 8px; }
.nav-golden-item::before { content: ''; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.nav-item.nav-golden { font-weight: 600; letter-spacing: 0.005em; }
.nav-golden svg { color: var(--gold-icon); animation: gilded-twinkle 4.5s ease-in-out infinite; }
.nav-golden:hover, .nav-golden.active { background: var(--gold-soft); }
.nav-golden.active { box-shadow: inset 0 0 0 1px var(--gold-line); }
.nav-golden:hover .gilded, .nav-golden:focus-visible .gilded { filter: drop-shadow(0 0 5px var(--gold-glow)); }
.nav-golden:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

.page-header .golden-title { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 650; letter-spacing: -0.025em; }
.golden-title svg { width: 26px; height: 26px; color: var(--gold-icon); animation: gilded-twinkle 4.5s ease-in-out infinite; }
.golden-source { margin: -12px 0 16px; color: var(--text-sec); font-size: 13px; }
.golden-actions { align-items: center; }
.golden-force { display: flex; gap: 6px; margin: 0; font-size: 13px; color: var(--text-sec); }
.golden-pick { margin-left: auto; gap: 8px; font-size: 13px; color: var(--text-sec); }
.golden-select { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 13px; color: var(--text-sec); cursor: pointer; }
.golden-rule { margin-top: 12px; font-size: 12px; color: var(--text-sec); }
.golden-switch { gap: 8px; margin-top: 12px; }
.golden-switch .seg .muted { font-size: 12px; font-variant-numeric: tabular-nums; }

/* Golden Set · graphiques. Fraud Buster et Pythia : la paire bleu / orange du graphique d'utilisation. Issues : couleurs
   d'état, toujours avec leur libellé (le jaune du doute est sous 3:1 sur fond clair). */
:root {
    --series-fb: var(--series-input); --series-pythia: var(--series-output);
    --outcome-ok: #0ca30c; --outcome-doubt: #fab219; --outcome-unverifiable: #4a3aa7; --outcome-ko: #d03b3b; --outcome-error: #a3a3a3;
    --zone-gray: rgba(115, 115, 115, 0.1);
}
:root[data-theme="dark"] { --outcome-unverifiable: #9085e9; --outcome-error: #5c5c5c; --zone-gray: rgba(255, 255, 255, 0.06); }
.charts-section { margin: 8px 0 12px; font-size: 16px; font-weight: 600; }
.charts-filter { align-items: center; gap: 12px; margin-top: 8px; }
.charts-filter .charts-section { margin: 0; }
.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px 28px; }
.chart-panel { min-width: 0; }
.chart-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; font-size: 13px; }
.chart-panel-head .muted { font-size: 12px; }
.chart.chart-auto { min-height: 0; }
.chart .chart-label { fill: var(--text); font-size: 12px; }
.chart .chart-note { fill: var(--text-sec); font-size: 11px; }
.chart .chart-value { fill: var(--text-sec); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .chart-inside { font-size: 11px; font-weight: 600; pointer-events: none; }
.chart .zone-gray { fill: var(--zone-gray); }
.chart .s-fb, .swatch-fb, .tip-key.s-fb { fill: var(--series-fb); background: var(--series-fb); }
.chart .s-pythia, .swatch-pythia, .tip-key.s-pythia { fill: var(--series-pythia); background: var(--series-pythia); }
.chart .dot { stroke: var(--card); stroke-width: 2; pointer-events: none; }
.swatch-gray { background: var(--zone-gray); box-shadow: inset 0 0 0 1px var(--border); }
.o-ok { fill: var(--outcome-ok); background: var(--outcome-ok); }
.o-doubt { fill: var(--outcome-doubt); background: var(--outcome-doubt); }
.o-unverifiable { fill: var(--outcome-unverifiable); background: var(--outcome-unverifiable); }
.o-ko { fill: var(--outcome-ko); background: var(--outcome-ko); }
.o-error { fill: var(--outcome-error); background: var(--outcome-error); }
/* Texte posé dans un segment : blanc ou encre selon la clarté du fond */
.chart .o-ok-ink, .chart .o-unverifiable-ink, .chart .o-ko-ink { fill: #ffffff; }
.chart .o-doubt-ink, .chart .o-error-ink { fill: #171717; }

/* Scores : Fraud Buster et Pythia l'un sous l'autre, mêmes définitions que le rapport de Fraud Buster */
.golden-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.golden-score { min-width: 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); cursor: help; }
.golden-score-label { margin-bottom: 4px; font-size: 13px; font-weight: 500; }
.golden-score-row { display: grid; grid-template-columns: 84px auto minmax(0, 1fr); align-items: baseline; gap: 8px; }
.golden-score-who { font-size: 12px; color: var(--text-sec); }
.golden-score-row.pythia .golden-score-who { color: var(--gold-1); font-weight: 600; }
.golden-score-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.golden-score-frac { overflow: hidden; font-size: 12px; color: var(--text-sec); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.golden-score-wait { grid-column: 2 / -1; font-size: 12px; color: var(--text-sec); white-space: nowrap; }
.golden-delta { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--text-sec); }
.golden-delta svg { width: 14px; height: 14px; }
.golden-delta.better svg { color: var(--status-good); }
.golden-delta.worse svg { color: var(--danger); }

/* Matrices de confusion : vert, ambre et rouge doublés d'un libellé (faux négatif, faux positif), jamais la couleur seule */
.golden-matrices { margin-bottom: 16px; }
.golden-matrix-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px 28px; }
.golden-matrix-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.golden-matrix-title strong { font-weight: 600; }
.golden-matrix-block.pythia .golden-matrix-title strong { color: var(--gold-1); }
.golden-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.golden-matrix th, .golden-matrix td { border: 1px solid var(--border); text-align: center; }
.golden-matrix th { padding: 6px 8px; background: var(--bg-subtle); color: var(--text-sec); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.golden-matrix thead th:first-child, .golden-matrix tbody th { font-family: var(--font); }
.golden-matrix tbody th { text-align: left; color: var(--text); font-weight: 600; }
.golden-matrix td { height: 58px; padding: 0; }
.golden-matrix .cell-ok { background: rgba(12, 163, 12, 0.09); }
.golden-matrix .cell-doubt { background: rgba(250, 178, 25, 0.14); }
.golden-matrix .cell-unverifiable { background: rgba(37, 99, 235, 0.10); }
.golden-matrix .cell-fn, .golden-matrix .cell-fp { background: var(--danger-soft); }
.golden-matrix td button, .golden-matrix .cell-static {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 100%; min-height: 58px; padding: 4px; border: none; background: none; color: var(--text); font: inherit;
}
.golden-matrix td button { cursor: pointer; }
.golden-matrix td button:disabled { cursor: default; }
.golden-matrix td button:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--border-strong); }
.golden-matrix td button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
.golden-matrix td button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 3px var(--focus-ring); }
.golden-matrix .cell-n { font-size: 20px; font-weight: 600; line-height: 1.2; }
.golden-matrix .cell-none { color: var(--text-faint); }
.golden-matrix .cell-tag { font-size: 11px; font-weight: 500; color: var(--danger); }

/* Cas : le contenu encadré de pointillés dorés est la seule chose que Pythia reçoit */
.golden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.golden-case { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.golden-case.outcome-ok { box-shadow: inset 3px 0 0 var(--status-good); }
.golden-case.outcome-doubt { box-shadow: inset 3px 0 0 var(--status-warning); }
.golden-case.outcome-fn, .golden-case.outcome-fp, .golden-case.outcome-error { box-shadow: inset 3px 0 0 var(--danger); }
.golden-case-head { display: flex; flex-direction: column; gap: 6px; }
.golden-case h3 { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.golden-meta { font-size: 12px; color: var(--text-sec); }
.golden-input { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg-subtle); border: 1px dashed var(--gold-line); border-radius: var(--radius-lg); }
.golden-input-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-sec); }
.golden-input-label svg { width: 13px; height: 13px; color: var(--gold-icon); }
.golden-thumb { display: block; width: 100%; padding: 0; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: zoom-in; }
.golden-thumb img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: top center; }
.golden-thumb:hover { border-color: var(--border-strong); }
.golden-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.golden-pre { max-height: 190px; overflow: auto; padding: 8px 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.golden-file { font-family: var(--mono); font-size: 11px; color: var(--text-sec); overflow-wrap: anywhere; }
.golden-verdicts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; }
.golden-verdicts dt { color: var(--text-sec); }
.golden-verdicts dt.pythia { color: var(--gold-1); font-weight: 600; }
.golden-badge { font-weight: 500; }
.golden-detail { margin-top: 2px; font-size: 11.5px; color: var(--text-sec); }
.golden-failure { margin-top: 2px; font-size: 12px; color: var(--danger); }
.golden-sending { gap: 6px; color: var(--text-sec); }
.golden-sending .spinner { width: 12px; height: 12px; }
.golden-read summary { cursor: pointer; font-size: 11.5px; color: var(--text-sec); }
.golden-links { display: grid; gap: 4px; margin: 0 0 6px; padding-left: 16px; font-size: 12px; overflow-wrap: anywhere; }
.golden-links .mono { font-size: 11.5px; }
/* Constats en JSON : l'indentation se lit mieux sans retour à la ligne, quitte à défiler */
.golden-pre.golden-json { white-space: pre; overflow-wrap: normal; font-size: 11px; }
.golden-read summary:hover { color: var(--text); }
.golden-read[open] summary { margin-bottom: 6px; }
.golden-full { margin: 0; }
.golden-full img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius); }
.golden-full figcaption { margin-top: 8px; font-size: 12px; text-align: center; }

@media (max-width: 760px) {
    .golden-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .gilded, .nav-golden svg, .golden-title svg { animation: none; }
}
@media (forced-colors: active) {
    .gilded { background: none; color: LinkText; -webkit-text-fill-color: currentColor; }
}

/* ========================= DISCUSSION ========================= */

.chat-page { padding-bottom: 0; }
.chat-main { display: flex; flex-direction: column; max-width: 880px; min-height: calc(100vh - 28px); }
.chat-page.dragging { outline: 2px dashed var(--primary); outline-offset: -8px; }
.chat-thread { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.chat-empty { margin: auto; display: grid; justify-items: center; gap: 6px; padding: 48px 16px; text-align: center; }
.chat-empty svg { width: 32px; height: 32px; color: var(--primary); margin-bottom: 4px; }
.chat-empty .muted { max-width: 46ch; }

.chat-msg { display: flex; }
.chat-user { justify-content: flex-end; }
.chat-bubble { display: grid; gap: 10px; max-width: min(640px, 88%); min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); font-size: 14px; line-height: 1.55; }
.chat-user .chat-bubble { background: var(--primary-soft); border-color: transparent; border-bottom-right-radius: var(--radius-sm); }
.chat-assistant .chat-bubble { border-bottom-left-radius: var(--radius-sm); }
.chat-analysis .chat-bubble { max-width: 100%; width: 100%; background: var(--bg-subtle); }
.chat-bubble .banner, .chat-bubble .verdict-banner { margin: 0; }

.chat-content { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.chat-quote { padding: 8px 10px; border-left: 3px solid var(--border-strong); background: var(--bg-subtle); border-radius: var(--radius-sm); font-size: 13px; max-height: 160px; }
.chat-image { display: block; max-width: 100%; max-height: 320px; border-radius: var(--radius); border: 1px solid var(--border); }
.chat-text { display: grid; gap: 8px; overflow-wrap: anywhere; }
.chat-text ul, .chat-text ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.chat-text strong { font-weight: 600; }
.chat-meta { font-size: 11.5px; color: var(--text-faint); }
.chat-pending { display: flex; align-items: center; gap: 10px; color: var(--text-sec); }
.chat-error { display: flex; align-items: flex-start; gap: 8px; color: var(--text); }
.chat-error svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--danger); }
.chat-error + .btn { justify-self: start; }
.chat-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-verdict { display: grid; gap: 10px; }
.chat-held { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-size: 13px; color: var(--text-sec); }
.chat-held svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--primary); }
.chat-held span { flex: 1; min-width: 200px; }
.chat-analysis-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.chat-details summary { cursor: pointer; font-size: 12.5px; color: var(--text-sec); }
.chat-details summary:hover { color: var(--text); }
.chat-details[open] summary { margin-bottom: 10px; }
.chat-results { display: grid; gap: 12px; }
.chat-separator { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; }
.chat-separator::before, .chat-separator::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

.chat-compare .chat-bubble { max-width: 100%; width: 100%; background: var(--bg-subtle); }
.chat-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chat-compare-col { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.chat-compare-col.winner { border-color: var(--status-good); box-shadow: 0 0 0 1px var(--status-good); }
.chat-compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.chat-compare-model { font-family: var(--mono); font-size: 11.5px; }
.chat-vote { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.chat-vote button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.chat-bench { margin-bottom: 16px; padding: 12px 16px; }
.chat-bench summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.chat-bench summary svg { width: 16px; height: 16px; color: var(--primary); }
.chat-bench[open] summary { margin-bottom: 12px; }
.chat-bench .muted { margin-top: 8px; font-size: 12.5px; }

/* Historique des discussions, dans la modale large */
.chat-history { display: grid; gap: 12px; }
.chat-history > .btn { justify-self: center; }
.chat-history-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-history-search input { flex: 1 1 260px; }
.chat-history-search .muted { font-size: 12.5px; }
.chat-history-list { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.chat-history-item { display: grid; gap: 6px; width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: inherit; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.chat-history-item:hover { background: var(--hover); }
.chat-history-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.chat-history-excerpt { font-size: 13px; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-detail { display: grid; gap: 12px; max-height: 70vh; overflow-y: auto; }
.chat-history-actions { display: flex; justify-content: space-between; gap: 8px; }
.chat-history-round { display: grid; gap: 8px; }
.chat-history-round > .chat-compare-col { max-width: 100%; }

.chat-composer { position: sticky; bottom: 0; padding: 12px 0 20px; background: var(--bg); border-top: 1px solid var(--border); }
.chat-mode { font-size: 12px; margin-bottom: 6px; }
.chat-input-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-input-row textarea { flex: 1; min-width: 0; min-height: 64px; max-height: 240px; resize: vertical; }
.chat-buttons { display: grid; gap: 6px; justify-items: stretch; }

/* Colonne de droite : seulement quand il reste de la place à côté du fil */
.chat-rail { display: none; }
.rail-card { display: grid; gap: 10px; padding: 14px 16px; min-width: 0; }
/* Sans min-width: 0, un extrait sur une ligne ou un nom de modèle élargit la carte au-delà de la colonne */
.rail-card > *, .rail-recent > *, .rail-analysis > * { min-width: 0; }
.rail-tips li span { min-width: 0; overflow-wrap: anywhere; }
.rail-card h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rail-card h2 svg { width: 16px; height: 16px; color: var(--primary); }
.rail-card h2 .link-btn { margin-left: auto; padding: 0; font-size: 12.5px; }
.rail-card > div > .muted { font-size: 13px; }
.rail-analysis { display: grid; gap: 10px; }
.rail-analysis .verdict-banner, .rail-analysis .banner { margin: 0; }
.rail-tips { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: 13px; line-height: 1.45; }
.rail-tips li { display: flex; align-items: flex-start; gap: 8px; }
.rail-tips svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--text-sec); }
.rail-tips li.key svg { color: var(--primary); }
.rail-bench td, .rail-bench th { padding: 5px 6px; font-size: 12.5px; }
.rail-recent { display: grid; gap: 6px; }
.rail-recent .chat-history-item { padding: 8px 10px; }

@media (min-width: 1600px) {
    .chat-page { display: grid; grid-template-columns: minmax(0, 920px) minmax(0, 420px); gap: 32px; justify-content: center; align-items: start; }
    .chat-main { max-width: none; }
    .chat-rail { display: grid; align-content: start; gap: 12px; position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow-x: hidden; overflow-y: auto; }
    /* Ce que la colonne montre déjà disparaît du fil */
    .chat-main > .chat-bench, .chat-thread .glide-details { display: none; }
}

@media (max-width: 760px) {
    /* La fin naturelle de la saisie tombe au-dessus de la barre d'onglets : rien du fil ne passe dessous */
    .chat-page { padding-bottom: var(--tabbar-h); }
    .chat-main { min-height: 0; }
    /* La saisie reste collée juste au-dessus de la barre d'onglets */
    .chat-composer { bottom: var(--tabbar-h); padding-bottom: 12px; }
    .chat-bubble { max-width: 100%; }
    .chat-compare-grid { grid-template-columns: minmax(0, 1fr); }
    .chat-input-row { flex-wrap: wrap; }
    .chat-input-row textarea { flex-basis: calc(100% - 44px); }
    .chat-buttons { width: 100%; }
}