/* Auto-split from styles.css lines 2135-4314 */

/* ── Answer card ─────────────────────────────────────────── */

.answer-card {
    /* De maat van de tekst róndom het antwoord: de echo van de gestelde vraag,
       de herformulering en de titels in het bronnenpaneel. Die drie horen
       gelijk te zijn -- het is alle drie meta-tekst over dezelfde vraag, en
       staan ze in verschillende maten dan leest de ene als belangrijker dan de
       andere terwijl dat niet zo is.

       Bewust níet `--reading-answer-size`. De herformulering hing daaraan, en
       bij leesstap L is dat 1,04rem tegen 0,8rem voor de vraag eronder: op een
       telefoon las de herformulering daardoor als kop boven de eigen vraag.
       Gemeld met een schermafdruk op 7 september 2026. De leesstap hoort de
       antwoordtekst te vergroten, niet het bijschrift erbij. */
    --reading-context-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    min-height: clamp(460px, calc(100dvh - 250px), 920px);
    /* Transparent rather than var(--bg): the page background is a gradient, so
       any flat fill here would still read as a panel floating on it. The card
       must disappear — only the answer text carries weight. Exposed as a token
       so children that must read as part of the card — the question reframe —
       inherit it instead of hard-coding a second copy that drifts per theme. */
    --answer-card-bg: transparent;
    background: var(--answer-card-bg);
    border: none;
    border-radius: var(--r);
    /* Clips the flat-cornered children below to this card's own rounded
       shape — without this, .answer-content-stack's square corners were
       poking past the card's rounding, reading as a cropped/flat bottom. */
    overflow: hidden;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

.answer-content-stack {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
    /* Transparent, not var(--bg): this fills the whole card, so painting its own
       colour here would mask .answer-card's background entirely. */
    background: transparent;
    overflow: visible;
}

/* The .answer-content-summary rules that used to sit here styled a <summary>
   for a <details>-based stack. #answer-content-stack is a plain <div> with no
   [open] attribute, so none of it ever matched. Removed. */

.answer-content-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Extra bottom slack so the last real line of text can be scrolled up
       clear of the fade/ask-bar zone instead of staying stuck under it. */
    padding: 0 0 var(--ask-bar-h);
    padding-inline: clamp(10px, 1.4vw, 24px);
    -webkit-mask-image: none;
    mask-image: none;
    /* Was var(--bg) — a flat fill that cut a visibly darker rectangle out of the
       page gradient. Transparent keeps the reading area flush with the page. */
    background: transparent;
}

/* Vertical stack: hosts the verified-match banner, the question reframe and
   (see A3) the thinking-chip row. Was a horizontal space-between bar while it
   sat empty; nothing else mounts here, so restacking is safe. */
.answer-card-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    /* Same inset as .answer-content-scroll — these are direct children of the
       card, which has no padding of its own, so without this they ran right up
       against the card edges while the answer text below did not. */
    padding-inline: clamp(10px, 1.4vw, 24px);
}

.answer-card-header:empty {
    display: none;
}

/* ── Eén liniaal voor de hele kaart ───────────────────────
   Alles wat het antwoord omlijst — de herformulering, de wettekst vooraf, de
   metabalk, de zekerheidsregel, de vervolgvragen, de knoppenbalk — staat op
   dezelfde breedte en dezelfde as als de beurt zelf. Eén breedte, één
   middellijn, dus ook één linkerrand.

   Dat laatste is nieuw. De maat stond in `ch`, en die eenheid schaalt mee met
   de fontgrootte van het element dat haar gebruikt. Elk van deze blokken heeft
   een andere fontgrootte, dus dezelfde `74ch` gaf zes verschillende breedtes,
   alle zes gecentreerd — en daarmee zes verschillende randen onder elkaar. Zie
   --answer-measure in 00-tokens-base.css. */
.question-reframe,
.wetsartikel-vooraf,
.web-sources,
.verified-match-banner,
#answer-meta,
.answer-confidence-row,
.citation-first-box,
.answer-actions-bar {
    width: min(100%, var(--answer-measure));
    max-width: var(--answer-measure);
    margin-inline: auto;
}

/* ── De as van vraag en antwoord ────────────────────────────────────────

   De antwoordinhoud stond links uitgelijnd in een kolom die veel breder is dan
   de vraagkaart eronder. Doordat de tekst zelf smaller is dan die kaart, stond
   het antwoord zo'n zestig pixels links van het midden van de vraag — twee
   dingen die bij elkaar horen maar niet op één lijn stonden.

   De band hieronder is even breed als de vraagkaart en begint op dezelfde
   plek. De inhoud erin wordt gecentreerd, en daarmee valt het midden van het
   antwoord samen met het midden van de vraagkaart. */
.answer-story-scroll > .conv-turn,
.answer-story-scroll > .conv-turn-group,
.answer-content-scroll > *,
.answer-card__body > * {
    max-width: var(--answer-band);
    /* Centreren binnen de ruimte die overblijft naast de bronnenkaart —
       dezelfde ruimte waarin de vraagkaart centreert, zodat de twee op één as
       staan. De band is wat breder dan de kaart en groeit naar beide kanten
       even veel, dus dat middelpunt blijft samenvallen. */
    margin-inline: auto;
}

/* ── Stream indicator ─────────────────────────────────────── */

/* Sits directly under the question in the answer body and shows one phase at a
   time — each new phase replaces the previous balloon. It is removed the moment
   the answer lands, so it never competes with the text for attention. */
.stream-indicator {
    display: flex;
    align-items: center;
    margin: 0 0 12px 0;
    min-height: 24px;
    width: min(100%, var(--answer-measure));
    margin-inline: auto;
}

.stream-indicator[hidden] {
    display: none;
}

/* One balloon in, previous one gone: a short slide keeps the eye on the spot
   rather than making the swap feel like a flicker. */
.think-chip--enter {
    animation: pulse 1.4s ease-in-out infinite,
               stream-chip-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stream-chip-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .think-chip--enter { animation: none; }
}

.think-chip {
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 9px;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Each state carries a distinct leading glyph, so the four are told apart by
   shape alone — required because the global prefers-reduced-motion reset kills
   the pulse, and because opacity-based dimming fails AA contrast (measured:
   0.55 opacity gave 2.23:1 in light / 2.75:1 in dark, against 4.5 needed).
   All four therefore keep full-strength --text-3 and differ by marker. */

.think-chip--active {
    color: var(--blue);
    background: var(--blue-bg);
    border-color: color-mix(in srgb, var(--vf-orange) 40%, var(--border));
    font-weight: 700;
    animation: pulse 1.4s ease-in-out infinite;
}

.think-chip--active::before {
    content: '▸';
    margin-right: 4px;
}

.think-chip--done {
    color: var(--text-3);
    background: var(--surface-2);
    border-color: var(--border);
}

.think-chip--done::before {
    content: '✓';
    margin-right: 4px;
    color: var(--ok);
}

/* Ran, found nothing — distinct from "never ran". */
.think-chip--skip {
    color: var(--text-3);
    font-style: italic;
}

.think-chip--skip::before {
    content: '–';
    margin-right: 4px;
}

/* Aborted mid-phase: no checkmark, no pulse, no claim of completion. */
.think-chip--halted {
    color: var(--text-3);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.think-chip--halted::before {
    content: '✕';
    margin-right: 4px;
    text-decoration: none;
    display: inline-block;
}

@media (max-width: 560px) {
    /* Only one balloon is on screen, but a long count line still must not push
       the answer sideways. */
    .stream-indicator .think-chip {
        white-space: normal;
    }
}

/* ── Recurring question notice ────────────────────────────── */

.recurring-question {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--border));
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--warn) 7%, transparent);
    width: min(100%, var(--answer-measure));
}

/* Ingeklapte variant van de dekkingswaarschuwing (#coverage-notice). De volle
   tekst besloeg boven het antwoord drie tot vier regels en duwde op een
   telefoon het antwoord zelf uit beeld; nu staat er één regel met een
   samenvatting die de gebruiker kan openwouwen. */
.coverage-notice-details { width: 100%; }

.coverage-notice-summary {
    cursor: pointer;
    list-style: none;
    align-items: center;
}

.coverage-notice-summary::-webkit-details-marker { display: none; }

/* Eigen chevron, zodat de rij hetzelfde oogt als de andere waarschuwingen. */
.coverage-notice-summary::after {
    content: 'be';
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-3);
    transition: transform 0.14s;
}

.coverage-notice-details[open] .coverage-notice-summary::after { transform: rotate(180deg); }

.coverage-notice-body {
    margin: 6px 0 0;
    padding-left: 22px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-2);
}

.recurring-question-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.recurring-question-icon {
    color: var(--warn);
    font-size: 0.86rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.recurring-question-text {
    flex: 1;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-2, var(--text));
}

.recurring-question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Sits in the notice, so it is sized to the notice rather than full-width
   like the follow-up chips it borrows its look from. */
.followup-chip--recurring {
    width: auto;
    padding: 4px 10px;
    font-size: 0.72rem;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
}

/* ── Question reframe ─────────────────────────────────────── */

/* A <details>: collapsed it is a single label row, so the answer itself starts
   near the top of the screen — which is what matters on a phone. */
.question-reframe {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in srgb, var(--vf-orange) 60%, transparent);
    border-radius: var(--r-sm);
    /* Same surface as the answer card it sits in — the reframe is part of the
       answer, not a separate panel floating on top of it. */
    background: var(--answer-card-bg, var(--surface));
    /* Width comes from the shared measure rule near the top of this file. */
}

.question-reframe-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* 44px total with the padding above — a comfortable touch target. */
    min-height: 30px;
    cursor: pointer;
    list-style: none;
}

/* Safari still paints its own marker without this. */
.question-reframe-summary::-webkit-details-marker { display: none; }

.question-reframe-summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

.question-reframe-chevron {
    flex-shrink: 0;
    color: var(--text-3);
    transition: transform 0.18s ease;
}

.question-reframe[open] .question-reframe-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .question-reframe-chevron { transition: none; }
}

.question-reframe-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}

.question-reframe-line {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.question-reframe-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.question-reframe-text {
    /* Gelijk aan de echo van de gestelde vraag eronder; zie
       --reading-context-size op .answer-card.

       Hier hebben twee verkeerde koppelingen gestaan. Eerst
       `--reading-followup-size`, de maat van de vervolgvraag-chips: bij S, M en
       L toevallig hetzelfde getal, dus onzichtbaar, maar een samenloop en geen
       koppeling. Daarna `--reading-answer-size`, en dat leek juister -- tot je
       leesstap L neemt: 1,04rem herformulering boven een vraag van 0,8rem, wat
       op een telefoon leest als een kop boven je eigen vraag. Waar deze tekst
       zich mee moet meten is de vraag, niet het antwoord. */
    font-size: var(--reading-context-size, 0.8rem);
    line-height: 1.5;
    color: var(--text-2, var(--text));
}

/* De herkende rechtsvragen in het paneel "Zo lees ik uw vraag". */
.question-reframe-rechtsvragen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
.question-reframe-rechtsvraaglijst { display: inline-flex; flex-wrap: wrap; gap: 0.35em; }
.reading-chip--rechtsvraag { border-color: var(--border); background: var(--surface-2); color: var(--text); }

.question-reframe-doctrines {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.question-reframe-fix {
    /* Rechts onderin de kaart, waar een bevestigende of corrigerende handeling
       hoort te staan — niet links onder de tekst, waar hij als een voetnoot bij
       de herformulering leest. */
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    /* Zelfde vorm als "Nieuw gesprek" in de zijbalk: pilvormig, een eigen vlak,
       een rand. Dat maakt zichtbaar dát het een knop is.

       De tint is koper op 8% (--blue-bg) en niet de kaartkleur zelf: de kaart
       waar hij in ligt staat al op --surface, dus dezelfde kleur zou hem er
       juist in laten verdwijnen. Koper is de accentkleur van de app en op 8%
       licht hij subtiel op zonder met de wettekst ernaast te concurreren. */
    padding: 3px 11px;
    border: 1px solid color-mix(in srgb, var(--vf-orange) 30%, var(--border));
    border-radius: 999px;
    background: var(--blue-bg);
    font: inherit;
    /* Kleiner dan de tekst erboven: dit is een uitweg, geen uitnodiging. */
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.question-reframe-fix:hover {
    background: color-mix(in srgb, var(--vf-orange) 14%, transparent);
    border-color: color-mix(in srgb, var(--vf-orange) 45%, var(--border));
}

.question-reframe-fix:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}


/* ── Wettekst vooraf ──────────────────────────────────────────────────────
   Staat er na ongeveer een seconde, terwijl het antwoord zelf pas rond de
   vijftigste begint te lopen. Opzettelijk soberder dan de herformulering
   erboven: dit is naslag om in te lezen tijdens het wachten, geen conclusie.
   Vandaar ook de neutrale rand in plaats van de oranje accentrand. */
.wetsartikel-vooraf {
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in srgb, var(--text-3) 45%, transparent);
    border-radius: var(--r-sm);
    background: var(--answer-card-bg, var(--surface));
}

.wetsartikel-vooraf-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 30px;
    cursor: pointer;
    list-style: none;
}

.wetsartikel-vooraf-summary::-webkit-details-marker { display: none; }

.wetsartikel-vooraf-summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

.wetsartikel-vooraf-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.wetsartikel-vooraf-chevron {
    flex-shrink: 0;
    color: var(--text-3);
    transition: transform 0.18s ease;
}

.wetsartikel-vooraf[open] .wetsartikel-vooraf-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .wetsartikel-vooraf-chevron { transition: none; }
}

.wetsartikel-vooraf-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    /* Eigen scrollbalk, en dat is hier dragend.
       De antwoordkaart is een kolom: deze kop staat bóven `.answer-content-scroll`,
       dat zijn eigen scrollbalk heeft. De kop scrollt dus niet mee met het
       antwoord -- hij staat er permanent boven. Zonder een hoogtegrens at een
       lang wetsartikel op een telefoon het hele scherm op: het antwoord kreeg
       een spleet, de wettekst zelf was niet te scrollen, en de samenvatting om
       hem in te klappen stond buiten beeld.
       35vh laat een half scherm over voor het antwoord; wie meer wil leest
       binnen het blok verder. */
    max-height: min(35vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Dezelfde dunne, kleurloze balk als overal elders in de app (de
       bronnenkolom, de gesprekkenlijst, de antwoordscroll). Zonder deze regels
       tekent de browser zijn eigen balk: een wit spoor met een grijze duim,
       dwars door een kaart die op --surface staat. Dat is het enige witte vlak
       in het hele paneel en het trekt meer aandacht dan de wettekst ernaast. */
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.wetsartikel-vooraf-body::-webkit-scrollbar { width: 5px; }
.wetsartikel-vooraf-body::-webkit-scrollbar-track { background: transparent; }
.wetsartikel-vooraf-body::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 3px;
}

/* Op een telefoon telt elke regel: daar mag dit blok hooguit een kwart scherm
   zijn, want het antwoord eronder is waar de gebruiker naartoe wil. */
@media (max-width: 820px) {
    .wetsartikel-vooraf-body { max-height: min(26vh, 220px); }
}

/* De samenvatting moet altijd te raken zijn, ook als het blok openstaat: hij is
   de enige weg om het weer dicht te klappen. */
.wetsartikel-vooraf-summary { position: sticky; top: 0; }

.wetsartikel-vooraf-item { margin: 0; }

.wetsartikel-vooraf-kop {
    margin: 0 0 3px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-2, var(--text));
}

.wetsartikel-vooraf-tekst {
    /* Dezelfde maat als de antwoordtekst: dit is bedoeld om te lézen, niet om
       te scannen. Zie --reading-answer-size bij de leesstappen verderop. */
    margin: 0;
    font-size: var(--reading-answer-size, 0.85rem);
    line-height: 1.55;
    color: var(--text-2, var(--text));
    white-space: pre-wrap;
}

.wetsartikel-vooraf-voet {
    margin: 2px 0 0;
    font-size: 0.64rem;
    color: var(--text-3);
}

.reading-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-dropdown-reading {
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--border);
}

.nav-dropdown-reading-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 6px;
}

.reading-group {
    display: inline-flex;
    gap: 4px;
}

.reading-profile-toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.reading-profile-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
    transition: color 0.18s ease;
}

.reading-profile-toggle {
    position: relative;
    display: inline-flex;
    width: 54px;
    height: 30px;
    cursor: pointer;
}

.reading-profile-toggle input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.reading-profile-toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 86%, var(--surface-2) 14%);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.reading-profile-toggle-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--border) 65%, #ffffff 35%);
    box-shadow: 0 1px 3px rgba(0, 17, 23, 0.18);
    transition: transform 0.2s ease;
}

.reading-profile-toggle input:checked + .reading-profile-toggle-slider {
    background: color-mix(in srgb, var(--blue-bg) 75%, #ffffff 25%);
    border-color: color-mix(in srgb, var(--blue-2) 42%, var(--border) 58%);
}

.reading-profile-toggle input:checked + .reading-profile-toggle-slider::before {
    transform: translateX(24px);
}

.reading-profile-toggle input:focus-visible + .reading-profile-toggle-slider {
    outline: 2px solid var(--blue-2);
    outline-offset: 2px;
}

.reading-profile-toggle-row[data-active="standard"] .reading-profile-label--standard,
.reading-profile-toggle-row[data-active="professional"] .reading-profile-label--professional {
    color: var(--blue-2);
}

.reading-profile-snippets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.reading-profile-snippet {
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 11px 12px;
    background: color-mix(in srgb, var(--surface-2) 70%, var(--bg) 30%);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.reading-profile-snippet--selectable {
    cursor: pointer;
}

.reading-profile-snippet--selectable:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 2px;
}

.reading-profile-snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.reading-profile-snippet h3 {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-2);
}

.reading-profile-snippet-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--border) 74%, #ffffff 26%);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-3);
    background: color-mix(in srgb, var(--bg) 80%, var(--surface-2) 20%);
}

.reading-profile-snippet p {
    margin: 0;
    color: var(--text-3);
    font-size: 0.75rem;
}

.reading-profile-snippet-points {
    margin: 8px 0 0;
    padding-left: 16px;
    color: var(--text-3);
    font-size: 0.69rem;
}

.reading-profile-snippet-points li + li {
    margin-top: 3px;
}

.reading-profile-snippet-source {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed color-mix(in srgb, var(--border) 78%, #ffffff 22%);
    color: var(--text-3);
    font-size: 0.67rem;
    line-height: 1.45;
}

.reading-profile-snippet--professional .reading-profile-snippet-source {
    font-size: 0.69rem;
    color: color-mix(in srgb, var(--text-2) 82%, var(--text-3) 18%);
}

.reading-profile-snippet--standard p {
    line-height: 1.42;
    max-width: 46ch;
}

.reading-profile-snippet--professional p {
    line-height: 1.72;
    max-width: 38ch;
    letter-spacing: 0.005em;
    text-wrap: pretty;
}

.reading-profile-snippet--professional {
    background: color-mix(in srgb, var(--surface-2) 58%, var(--bg) 42%);
}

.reading-profile-snippet--professional h4 {
    font-size: 0.77rem;
    letter-spacing: 0.015em;
}

.reading-profile-snippets[data-active="standard"] .reading-profile-snippet--standard,
.reading-profile-snippets[data-active="professional"] .reading-profile-snippet--professional {
    border-color: color-mix(in srgb, var(--blue-2) 38%, var(--border) 62%);
    background: color-mix(in srgb, var(--blue-bg) 35%, var(--bg) 65%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue-2) 24%, transparent 76%), 0 6px 14px rgba(0, 17, 23, 0.06);
}

.reading-profile-snippet--selectable:hover {
    border-color: color-mix(in srgb, var(--blue-2) 30%, var(--border) 70%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue-2) 18%, transparent 82%), 0 6px 12px rgba(0, 17, 23, 0.06);
}

#reset-onboarding-btn.is-busy,
#reset-onboarding-btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
}

.reading-profile-snippets[data-active="standard"] .reading-profile-snippet--standard .reading-profile-snippet-tag,
.reading-profile-snippets[data-active="professional"] .reading-profile-snippet--professional .reading-profile-snippet-tag {
    color: var(--blue-2);
    border-color: color-mix(in srgb, var(--blue-2) 30%, var(--border) 70%);
    background: color-mix(in srgb, var(--blue-bg) 55%, #ffffff 45%);
}

@media (max-width: 640px) {
    .reading-profile-snippets {
        grid-template-columns: 1fr;
    }
}

.reading-chip {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 2px 7px;
    cursor: pointer;
}

.reading-chip--active {
    border-color: rgba(201, 138, 76, 0.34);
    color: var(--blue);
    background: var(--blue-bg);
}

.answer-story-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: visible;
    /* Symmetrisch. Links 0 en rechts 2px verschoof de hele inhoud een fractie
       ten opzichte van de kaartkop erboven, die wél gelijk inspringt. */
    padding: 2px;
    scroll-behavior: smooth;
    background: transparent;
    width: 100%;
}

/* Op een telefoon rijdt de scrollbalk op de rand van het scherm.

   `.answer-content-scroll` springt links en rechts 10px in, en de scrollbalk
   hangt aan de rechterrand van díe box -- dus 10px naar binnen, waar hij op een
   smal scherm achter de ask bar verdwijnt. Gemeld op 9 september 2026.

   De inspringing verhuist naar de kinderen: de tekst staat even ver van de rand
   als eerst, alleen de balk niet meer. */
@media (max-width: 820px) {
    .answer-content-scroll {
        padding-right: 0;
    }

    .answer-content-scroll > * {
        padding-right: clamp(10px, 1.4vw, 24px);
    }
}

.answer-toc {
    position: sticky;
    top: 0;
    z-index: 3;
    width: min(100%, var(--answer-measure));
    margin: 0 auto 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: color-mix(in srgb, var(--bg) 94%, #ffffff 6%);
    /* Geen backdrop-filter.

       Gemeld op 8 september 2026: op een iPhone flikkert het scherm zodra de
       meescrollende vraag over het begin van het antwoord schuift. Hier
       stonden drie sticky lagen op top: 0 boven elkaar, en deze was de enige
       met een blur. Safari maakt daar een eigen compositielaag van en tekent
       die opnieuw bij elke pixel die eronder langs schuift.

       Er ging niets aan zichtbaarheid verloren: de achtergrond hierboven is een
       color-mix van twee dekkende kleuren, dus er was helemaal geen doorzicht
       om te vervagen. De blur kostte alleen een laag. Elders in deze map staan
       ze om dezelfde reden al op none. */
}

.answer-toc[hidden] { display: none !important; }

.answer-toc-title {
    margin: 0 0 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
}

.answer-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.answer-toc-link {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 4px 9px;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.answer-toc-link:hover,
.answer-toc-link:focus-visible {
    background: var(--blue-bg);
    border-color: rgba(201, 138, 76, 0.34);
    color: var(--blue);
    outline: none;
}

/* De adviestekst terwijl hij binnenkomt. Bewust rustig: dit is een voorlopige
   tekst die bij `done` door de opgemaakte versie wordt vervangen, en een
   opvallende opmaak zou die wissel zichtbaarder maken dan nodig. */
.answer-streaming {
    white-space: pre-wrap;
    opacity: 0.85;
}

.answer-busy-placeholder {
    color: var(--text-3) !important;
    font-style: italic;
    animation: answer-busy-pulse 1.2s ease-in-out infinite;
}

/* Gereserveerde ruimte voor het antwoord dat nog moet komen. Zonder dit heeft
   #answer-content-scroll, zolang het antwoord leeg is, simpelweg niet genoeg
   inhoud ná de vraag om die helemaal naar de bovenkant van de viewport te
   kunnen scrollen — scrollIntoView (zie _scrollAnswerCardToTop in index.html)
   liep vast op scrollHeight, want de browser kan niet verder scrollen dan er
   content is. Gekoppeld aan .answer-current-question--busy — die klasse zet
   showStreamCard() synchroon vóórdat het scrollt, dus de ruimte staat er al
   op het moment dat de scrollpositie wordt berekend. (.answer-busy-
   placeholder, gezet door de aanroeper ná showStreamCard(), was te laat.) */
/* Eerst geprobeerd op #stream-indicator/#no-answer-msg/#answer-pre — maar
   #stream-indicator blijft verborgen zolang de fase in CHIP_SKIP_PHASES zit
   (o.a. de hele "Verbinding maken..."-periode meteen na het versturen), en
   min-height op een display:none element doet niets. Ook niet op
   #answer-current-question zelf: dat is position:sticky met een eigen rand/
   achtergrond/schaduw (de vraagbubbel) — een grote min-height daarop levert
   een bubbel met een hoop lege ruimte erin op, niet een onzichtbare
   reservering. #answer-pending-space (zie index.html, direct na
   #stream-indicator) is speciaal hiervoor: geen styling, altijd in de DOM,
   dus altijd beschikbaar zodra de vraag als --busy is gemarkeerd. */
.answer-current-question--busy ~ #answer-pending-space {
    min-height: clamp(300px, calc(100dvh - 320px), 700px);
}

@keyframes answer-busy-pulse {
    0%, 100% { opacity: 0.58; }
    50% { opacity: 1; }
}

.answer-current-question {
    /* De ballon is smaller dan de kolom — dat hoort zo, het is een ballon — maar
       zijn linkerrand moet op die van het antwoord liggen.

       Hij hangt rechtstreeks onder .answer-story-scroll en dus niet in de
       gecentreerde beurt waar de historische vraagballon (.conv-turn-q-text) in
       zit. `margin-left: 0` zette hem daarmee tegen de linkerrand van de hele
       scrollbox, een halve restbreedte links van het antwoord eronder. De marge
       hieronder rekent precies de linkergoot van de gecentreerde kolom uit —
       percentages in een marge gaan over de breedte van de omsluitende box — en
       `max(0px, …)` vangt het geval af waarin de box smaller is dan de kolom. */
    margin: 0 auto 12px max(0px, calc((100% - var(--answer-measure)) / 2));
    width: min(100%, calc(var(--answer-measure) - 6ch));
    max-width: min(100%, calc(var(--answer-measure) - 6ch));
    padding: 7px 11px;
    border-radius: var(--r) var(--r) 4px var(--r);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
    background: var(--bg);
    color: var(--text-2);
    font-size: var(--reading-context-size, 0.8rem);
    line-height: 1.42;
    font-weight: 500;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    text-overflow: clip;
    text-align: left;
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
    clear: both;
    overflow: visible;
    word-break: break-word;
    max-height: none;
    min-height: fit-content;
    position: sticky;
    top: 0;
    z-index: 40;
    isolation: isolate;
    box-shadow: 0 1px 0 rgba(0, 17, 23, 0.06);
}

.answer-content-scroll .answer-current-question {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
}

.answer-current-question--busy {
    position: relative;
    padding-left: 11px;
    animation: none;
    box-shadow: none;
}

.answer-current-question--busy::after {
    content: none !important;
    display: none !important;
    position: absolute;
    left: 10px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--navy-2) 72%, var(--bg));
    transform: translateY(-50%);
    animation: none;
    box-shadow: 0 0 0 0 rgba(42, 47, 54, 0.30);
}

/* De kleur komt uit --busy-ring (een "r, g, b"-drietal) in plaats van uit
   vaste waarden, want een animatie wint in de cascade van een gewone
   declaratie: stond het koper hier hard, dan zou de navy-variant voor concepten
   binnen een halve seconde alsnog koper ademen. Via een custom property leest
   elke stap de kleur die op het element zelf staat. */
@keyframes question-card-breath {
    0%,
    100% {
        border-color: rgba(var(--busy-ring), 0.22);
        box-shadow: 0 0 0 1px rgba(var(--busy-ring), 0.16), 0 0 0 0 rgba(var(--busy-ring), 0.0);
    }
    50% {
        border-color: rgba(var(--busy-ring), 0.34);
        box-shadow: 0 0 0 1px rgba(var(--busy-ring), 0.24), 0 0 0 7px rgba(var(--busy-ring), 0.0);
    }
}

@keyframes question-busy-breath {
    0%,
    100% {
        transform: translateY(-50%) scale(0.9);
        opacity: 0.75;
        box-shadow: 0 0 0 0 rgba(42, 47, 54, 0.30);
    }
    50% {
        transform: translateY(-50%) scale(1.15);
        opacity: 1;
        box-shadow: 0 0 0 7px rgba(42, 47, 54, 0);
    }
}

.answer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.answer-meta-chip {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-3);
    background: var(--surface-3, rgba(255,255,255,0.06));
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    /* Strak om de tekst. Zonder dit rekt de pil mee met de flexregel en staat
       er om "15:08" een rand die ver van de cijfers af ligt, terwijl de langere
       pillen ernaast wél passend zijn. */
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.citation-first-box {
    margin: 0 0 10px;
    padding: 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.citation-first-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.citation-first-head-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.citation-first-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    font-size: 0;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--btn-r);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.74);
    color: var(--text-2);
    line-height: 1;
    cursor: pointer;
}

.citation-first-toggle::before {
    content: '▾';
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--vf-orange) 72%, var(--text-3));
}

.citation-first-toggle[aria-expanded="true"]::before {
    content: '▴';
}

.citation-first-toggle:hover {
    border-color: var(--vf-orange);
    color: var(--vf-orange);
}

.citation-first-body {
    margin-top: 7px;
}

.citation-first-body-title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 6px;
}

.citation-first-body[hidden] {
    display: none !important;
}

.citation-first-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.02em;
}

.citation-first-verdict {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.75);
}

.citation-first-verdict--ok {
    border-color: var(--ok-bdr);
    background: var(--ok-bg);
}

.citation-first-verdict--warn {
    border-color: var(--warn-bdr);
    background: var(--warn-bg);
}

.citation-first-verdict--err {
    border-color: var(--err-bdr);
    background: var(--err-bg);
}

.citation-first-verdict-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--text-3);
    flex-shrink: 0;
}

.citation-first-verdict-dot--ok { background: var(--ok); }
.citation-first-verdict-dot--warn { background: var(--warn); }
.citation-first-verdict-dot--err { background: var(--err); }

.citation-first-verdict-label {
    min-width: 0;
    flex: 1;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
}

.citation-first-verdict-score {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 7px;
    background: rgba(255, 255, 255, 0.72);
}

.citation-first-points {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.citation-first-point {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.68);
}

.citation-first-point--empty {
    font-size: 0.70rem;
    color: var(--text-2);
    line-height: 1.45;
}

.citation-first-point-icon {
    width: 16px;
    text-align: center;
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--blue);
    flex-shrink: 0;
}

.citation-first-point-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.citation-first-point-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.citation-first-point-text {
    font-size: 0.70rem;
    line-height: 1.42;
    color: var(--text-1);
}

.citation-first-status {
    display: inline-flex;
    margin-top: 8px;
    font-size: 0.70rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid transparent;
    white-space: normal;
    line-height: 1.35;
}

.citation-first-status--ok {
    color: var(--ok);
    background: var(--ok-bg);
    border-color: var(--ok-bdr);
}

.citation-first-status--warn {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn-bdr);
}

.citation-first-status--err {
    color: var(--err);
    background: var(--err-bg);
    border-color: var(--err-bdr);
}

.citation-first-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.citation-first-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 6px 7px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.68);
}

.citation-first-jump {
    flex-shrink: 0;
    max-width: 170px;
    min-height: 22px;
    border-radius: var(--btn-r) !important;
    border: 1px solid rgba(201, 138, 76, 0.24) !important;
    background: var(--blue-bg) !important;
    color: var(--blue-2) !important;
    font-size: 0.71rem !important;
    font-weight: 700 !important;
    padding: 0 7px !important;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.citation-first-jump:hover {
    border-color: var(--blue-2) !important;
    background: rgba(201, 138, 76, 0.15) !important;
}

.citation-first-text {
    min-width: 0;
    flex: 1;
}

.citation-first-top {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.citation-first-pill {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: var(--r-sm);
    padding: 1px 5px;
    border: 1px solid rgba(201, 138, 76, 0.20);
    color: var(--blue);
    background: var(--blue-bg);
}

.citation-first-pill--wetgeving {
    background: color-mix(in srgb, var(--blue-bg) 84%, var(--surface-2) 16%);
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 34%, var(--border) 66%);
}

.citation-first-pill--jurisprudentie {
    background: color-mix(in srgb, var(--ok-bg) 84%, var(--surface-2) 16%);
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 30%, var(--border) 70%);
}

.citation-first-pill--bekendmaking {
    background: color-mix(in srgb, var(--warn-bg) 84%, var(--surface-2) 16%);
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 30%, var(--border) 70%);
}

/* Regulator guidance — visually weaker than wetgeving/jurisprudentie on
   purpose: it is authoritative but never a formal statute. */
.citation-first-pill--richtlijn,
.citation-first-pill--tuchtrecht {
    background: color-mix(in srgb, var(--surface-2) 70%, var(--bg) 30%);
    color: var(--text-2);
    border-color: color-mix(in srgb, var(--vf-orange) 26%, var(--border) 74%);
    border-style: dashed;
}

.citation-first-pill--document {
    background: color-mix(in srgb, var(--surface-2) 78%, var(--bg) 22%);
    color: var(--text-2);
    border-color: color-mix(in srgb, var(--text-3) 22%, var(--border) 78%);
}

.citation-first-pill--geverifieerd {
    background: color-mix(in srgb, var(--text) 10%, var(--surface-2) 90%);
    color: var(--text-2);
    border-color: color-mix(in srgb, var(--text-2) 26%, var(--border) 74%);
}

.citation-first-meta {
    font-size: 0.66rem;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.7);
}

.citation-first-authority {
    font-size: 0.66rem;
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.citation-first-authority--high {
    color: var(--ok);
    border-color: var(--ok-bdr);
    background: var(--ok-bg);
}

.citation-first-authority--mid {
    color: var(--blue);
    border-color: rgba(201, 138, 76, 0.24);
    background: var(--blue-bg);
}

.citation-first-authority--base {
    color: var(--text-2);
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.65);
}

.citation-first-source {
    font-size: 0.71rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.citation-first-note {
    margin-top: 7px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    font-size: 0.70rem;
    line-height: 1.45;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.citation-first-note-text {
    min-width: 0;
}

.citation-first-why {
    flex-shrink: 0;
    font-size: 0.64rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid currentColor;
    padding: 1px 7px;
    cursor: help;
    opacity: 0.9;
}

.citation-first-note--ok {
    color: var(--ok);
    background: var(--ok-bg);
    border-color: var(--ok-bdr);
}

.citation-first-note--warn {
    color: var(--warn);
    background: var(--warn-bg);
    border-color: var(--warn-bdr);
}

.citation-first-note--err {
    color: var(--err);
    background: var(--err-bg);
    border-color: var(--err-bdr);
}

/* structured sections rendered from done event fields */
.answer-section { margin-bottom: 1.1rem; }
.answer-section:last-child { margin-bottom: 0; }
/* Meelopende vraag: één regel, afgekapt, en pas zichtbaar zodra de vraagballon
   boven de scrollrand verdwijnt. Dit mag wél sticky zijn — hij heeft een
   dekkende achtergrond en overschrijft dus geen tekst zoals de dagscheiding dat
   deed. Wel binnen de breedte van de antwoordkolom: over de volle schermbreedte
   liep hij ver voorbij het antwoord waar hij bij hoort, en nam hij de ruimte in
   die rechts vrij moet blijven voor de bronpassages en de viewer. */
.answer-sticky-question {
    position: sticky;
    top: 0;
    z-index: 3;
    width: min(100%, var(--answer-measure));
    max-width: var(--answer-measure);
    /* Gecentreerd, net als alles in de kolom. Stond op `0 auto 6px 0` en dus
       links tegen de rand van de scrollbox, terwijl het antwoord waar hij bij
       hoort in het midden staat. Op een breed scherm scheelde dat de halve
       restbreedte en hing de vraag los van haar eigen antwoord. */
    margin: 0 auto 6px;
    padding: 6px 2px 7px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    color: var(--text-3);
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.answer-sticky-question[hidden] { display: none; }

/* Het label waarmee een alinea opent ("Concreet advies:"). Iets donkerder dan
   de lopende tekst, niet zwaarder — het is een wegwijzer, geen kop. */
.answer-lead {
    font-weight: 700;
    color: var(--text);
}

/* Is een <h3> geworden zodat de inhoudsopgave en schermlezers hem zien; de
   browserstijl van een kop moet daarom expliciet terug naar dit uiterlijk. */
/* Gewone letters sinds 19-10-2026, zoals de kopjes in de zijbalk en het
   beheermenu ("Vandaag", "Account"). In kapitalen van 0,63rem stonden "BRONNEN"
   en "CONCEPT — INGEBREKESTELLING" als een andere stem in de app. */
.answer-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-3);
    margin: 0 0 4px;
    scroll-margin-top: 44px;
}
/* "Download als Word" naast de kop van een concept: een rustige link in
   dezelfde kleur, geen knop -- het stuk zelf is het werk. */
.answer-section-label .concept-download {
    margin-left: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
.answer-section-label .concept-download:hover {
    border-bottom-color: var(--blue);
}
/* De redenering per rechtsvraag (V2). Een sectie van het antwoord met
   dezelfde kop als de andere; daarbinnen per rechtsgebied een blok met de
   velden als een rustige definitielijst. Alles via tokens, zodat het
   donkere thema meekleurt. */
.answer-section--rechtsvragen .answer-section-body {
    display: grid;
    gap: 12px;
}

.rechtsvraag {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
}

.rechtsvraag-kop {
    margin: 0 0 6px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-2);
}

.rechtsvraag-lijst {
    margin: 0;
    display: grid;
    gap: 5px;
}

.rechtsvraag-rij {
    display: grid;
    grid-template-columns: minmax(9ch, 11rem) 1fr;
    gap: 4px 12px;
    align-items: baseline;
}

.rechtsvraag-veld {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
}

.rechtsvraag-waarde {
    margin: 0;
    min-width: 0;
}

.rechtsvraag-waarde > p:first-child { margin-top: 0; }
.rechtsvraag-waarde > p:last-child  { margin-bottom: 0; }

/* Op een smal scherm de velden boven de waarde; twee kolommen worden daar
   een smalle sliert. */
@media (max-width: 560px) {
    .rechtsvraag-rij { grid-template-columns: 1fr; gap: 2px; }
}
/* De kanttekeningen van de inhoudscontrole. Bovenaan het antwoord, in de
   waarschuwingskleur van het thema: dit is de informatie die de lezer niet
   mag missen. Tokens, geen vaste kleuren. */
/* Sinds 22-09-2026 een inklapbare balk in de stijl van het verslag
   (.answer-verslag): zelfde vlak, zelfde kop, één accent in de linkerrand.
   Het warme vlak en de koperen labels maakten het antwoord onrustig. */
.answer-section--kanttekeningen {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface-2);
    width: min(100%, var(--answer-measure));
    margin: 0 auto 8px;
}
.answer-section--kanttekeningen .answer-verslag-kop { color: var(--text-2); }
.answer-section--kanttekeningen .kanttekeningen-inleiding { margin-top: 8px; }

.kanttekeningen-inleiding {
    margin: 0 0 6px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.kanttekeningen {
    margin: 0;
    padding-left: 1.1em;
    display: grid;
    gap: 4px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.kanttekening-soort {
    font-weight: 600;
    color: var(--text);
}

/* Een rechtsvraag met kanttekeningen: dezelfde kleur op het blok, een telling
   in de kop, en de kanttekeningen onder de deelconclusie. */
.rechtsvraag--betwist {
    border-color: var(--warn-bdr);
    border-left: 3px solid var(--warn);
}

.rechtsvraag-betwist-label {
    margin-left: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
}

/* Eén van twee lezingen: wel getoond, maar gedempt en benoemd. */
.kanttekening--eenmalig { opacity: 0.78; }
/* Niet gecontroleerd of niet meegewogen: geen afkeuring; een neutrale rand. */
.answer-section--niet-gecontroleerd { border-left-color: var(--text-3); }
.kanttekening-eenmalig {
    font-size: 0.78em;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 0.5em;
    white-space: nowrap;
}

/* De toets per voorwaarde in het blok Per rechtsvraag. */
.toetsing { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.toetsing td { padding: 0.3em 0.5em; vertical-align: top; border-top: 1px solid var(--border); }
.toetsing tr:first-child td { border-top: 0; }
.toetsing-voorwaarde { width: 28%; font-weight: 500; }
.toetsing-status { white-space: nowrap; }
.toetsing-feit { white-space: nowrap; color: var(--text-3); font-variant-numeric: tabular-nums; }
.toetsing-toelichting { color: var(--text-2); }
.toetsing-pil { display: inline-block; padding: 0 0.55em; border-radius: 999px; border: 1px solid var(--border); font-size: 0.85em; }
.toetsing-pil.is-vervuld { border-color: var(--ok-bdr); background: var(--ok-bg); color: var(--ok); }
.toetsing-pil.is-niet-vervuld { border-color: var(--err-bdr); background: var(--err-bg); color: var(--err); }
.toetsing-pil.is-open { border-color: var(--warn-bdr); background: var(--warn-bg); color: var(--warn); }
@media (max-width: 640px) { .toetsing-feit, .toetsing-toelichting { display: none; } }

.rechtsvraag-kanttekeningen {
    margin: 8px 0 0;
    padding: 6px 0 0 1.1em;
    border-top: 1px solid var(--warn-bdr);
    font-size: 0.84rem;
    line-height: 1.45;
    display: grid;
    gap: 3px;
}

/* De korte bronnenlijst onder het antwoord. Zelfde koptypografie als de
   secties erboven — het is een sectie van het antwoord, geen kaart ernaast.
   De toelichting per bron staat in de bronnenkaart; hier alleen de aanduiding,
   zodat in één oogopslag te zien is waarop het antwoord steunt. */
.answer-section--bronnen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.answer-bronnen {
    margin: 0;
    padding-left: 18px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-2);
}
.answer-bronnen li { margin-bottom: 1px; }
/* Sinds 20 september 2026 per soort (Wetgeving, Rechtspraak, ...), met het
   gezag en hoe vaak het antwoord de bron aanhaalt. Tekst, geen kaart. */
.answer-bronnen-groep + .answer-bronnen-groep { margin-top: 6px; }
.answer-bronnen-kop { font-size: 0.8rem; font-weight: 500; color: var(--text-3); margin: 6px 0 2px; }
.answer-bron-meta { color: var(--text-3); }
/* De links naar wetten.overheid.nl en rechtspraak.nl hadden geen eigen
   opmaak en stonden in het standaard browserblauw met onderstreping, midden in
   een verder rustig antwoord (gezien 19-10-2026). Koper zoals de andere
   klikbare verwijzingen, onderstreept pas bij aanwijzen. */
.answer-bronnen a {
    color: var(--blue);
    text-decoration: none;
    text-underline-offset: 2px;
}
.answer-bronnen a:hover,
.answer-bronnen a:focus-visible { text-decoration: underline; }

.answer-section-body {
    font-size: var(--answer-font-size, 0.85rem);
    line-height: var(--answer-line-height, 1.75);
    color: var(--text);
    word-break: break-word;
    max-width: var(--answer-measure);
    width: min(100%, var(--answer-measure));
    margin-inline: auto;
    /* Afbreken alleen op de telefoon (19-10-2026): op een brede kolom brak het
       juist termen als "werkne-mer" en "on-billijk" doormidden, en die moet een
       jurist in één keer kunnen lezen. Op een smalle regel voorkomt afbreken
       grote gaten, daar blijft het aan (zie 95-chat-page.css, onderaan). */
    hyphens: manual;
    -webkit-hyphens: manual;
    overflow-wrap: break-word;
}
.answer-section-body p { margin: 0 0 0.68em; }
.answer-section-body p:last-child { margin-bottom: 0; }

/* Een letterlijk citaat uit de wet, zichtbaar apart van het antwoord.
   Tot 11 september 2026 kende de markdownrenderer geen blockquote en bleef het
   ">" dat het model ervoor zet gewoon als teken in de zin staan.

   Het onderscheid is meer dan opmaak: hier staat wat de wet zegt, daarbuiten
   wat het antwoord ervan maakt. Een lezer die dat niet kan zien, leest een
   parafrase als wettekst.

   Een rand links en geen aanhalingstekens: de wettekst draagt er zelf vaak al,
   en twee lagen aanhalingstekens leest niemand meer. */
.answer-section-body blockquote.answer-wetcitaat {
    margin: 0.72em 0;
    padding: 0.3em 0 0.3em 0.9em;
    border-left: 3px solid var(--border-2, rgba(0, 0, 0, 0.14));
    color: var(--text-2, inherit);
    font-style: normal;
}
.answer-section-body blockquote.answer-wetcitaat p { margin: 0; }

.answer-section-body ul,
.answer-section-body ol {
    margin: 0 0 0.68em 0;
    padding-left: 1.6em;
}
.answer-section-body ul { list-style-type: disc; }
.answer-section-body ol { list-style-type: decimal; }
.answer-section-body li { margin: 0.22em 0; }
.answer-section-body strong { color: var(--text-1); }
.answer-section-body h1,
.answer-section-body h2,
.answer-section-body h3,
.answer-section-body h4 {
    margin: 0.62em 0 0.3em;
    line-height: 1.36;
    color: var(--text-1);
    font-weight: 700;
}
/* Relatief aan de tekst, zodat de kopjes meegroeien met --answer-font-size:
   een kopje van 0,9rem boven tekst van 0,97rem stond kleiner dan de tekst. */
.answer-section-body h1 { font-size: 1.3em; margin-top: 1em; }
.answer-section-body h2 { font-size: 1.18em; margin-top: 1em; }
.answer-section-body h3 { font-size: 1.08em; margin-top: 0.9em; }
.answer-section-body h4 { font-size: 1.02em; margin-top: 0.8em; }
.answer-section-body blockquote {
    margin: 0.8em 0;
    padding: 0.45em 0.8em;
    border-left: 3px solid rgba(201, 138, 76, 0.24);
    background: rgba(201, 138, 76, 0.05);
    border-radius: 0 8px 8px 0;
    color: var(--text-2);
}
.answer-section-body code {
    font-family: inherit;
    font-size: 0.88em;
    padding: 0.05em 0.3em;
    border-radius: var(--r-sm);
    background: rgba(13, 28, 59, 0.06);
}
.answer-section-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8em 0;
    font-size: 0.84em;
}
.answer-section-body th,
.answer-section-body td {
    border: 1px solid var(--border);
    padding: 0.38em 0.48em;
    text-align: left;
}
.answer-section-body th {
    background: var(--surface-2);
    color: var(--text-1);
    font-weight: 700;
}

/* Source lines rendered inside answer body, e.g. [WET] (...) > snippet */
.answer-source-line {
    display: inline-block;
    margin: 0.16em 0;
    line-height: 1.45;
}

/* Een genoemde wet die niet in de bibliotheek staat. Bóven het antwoord, want
   het bepaalt hoe je de rest leest: "kan niet worden vastgesteld" betekent iets
   heel anders als de wet er simpelweg niet is. Geel en geen rood — er is niets
   misgegaan, er ontbreekt iets. */
/* Een wet die zojuist is binnengehaald. Blauw, waar `.wet-ontbreekt` hiernaast
   amberkleurig is: daar mist iets, hier komt er juist iets bij. Dat is goed
   nieuws met een wachttijd, en het hoort niet als waarschuwing te lezen. */
.wet-geindexeerd {
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid var(--blue);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    background: var(--blue-bg);
    color: var(--text-2);
    font-size: var(--reading-context-size, 0.8rem);
    line-height: 1.45;
}

.wet-ontbreekt {
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid rgba(201, 138, 76, 0.4);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    background: rgba(201, 138, 76, 0.09);
    color: var(--text-2);
    font-size: var(--reading-context-size, 0.8rem);
    line-height: 1.45;
}

[data-theme="dark"] .wet-ontbreekt {
    border-color: rgba(217, 160, 112, 0.45);
    background: rgba(201, 138, 76, 0.16);
    color: #e8d5bf;
}

/* Hoe lang het al duurt, naast de ballonnen van de pijplijn. Klein en grijs:
   het is geruststelling, geen wedstrijd. Wordt het lang, dan kleurt het en komt
   er tekst bij — zie _werkDeWachttijdBij. */
.phase-wachttijd {
    margin-left: auto;
    padding-left: 10px;
    font-size: 0.72rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.phase-wachttijd--lang {
    color: var(--vf-orange);
}

/* "Ander profiel" achter de profielchip onder een antwoord: de correctie op de
   plek waar je merkt dat het profiel ernaast zat. Klein en grijs — het is een
   uitweg, geen uitnodiging, net als "Klopt dit niet?" onder de herformulering. */
/* Rechts uitgelijnd, als laatste op de metaregel.

   De knop zat in de pil van het profiellabel en stond daarmee midden in de
   regel, tussen twee stukken tekst in. Dat leest onrustig terwijl het een
   uitweg is die je zelden nodig hebt. `margin-left: auto` duwt hem in de
   flexregel naar de rechterrand. */
.profiel-correctie {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

/* Plat en klein.
   Deze knop stond in de generieke `button[type="button"]`-regel in
   10-layout-shell.css: 8 bij 18 pixels padding met een rand van anderhalve
   pixel. Door de lange `:not()`-ketting daar wint die van één klasse hier, dus
   `border: none` en `padding: 0` deden niets en stond er een forse pil onder
   elk antwoord. Gemeld op 9 september 2026; de knop staat nu in die keten.
   Zonder die uitzondering heeft alles hieronder geen effect. */
.profiel-correctie-knop {
    background: none;
    border: none;
    padding: 0 2px;
    line-height: 1.3;
    font: inherit;
    font-size: 0.92em;
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.profiel-correctie-knop:hover { color: var(--vf-orange); }

.profiel-correctie-knop:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Omhoog openen: de chip staat onderaan het antwoord, dus een menu dat naar
   beneden klapt valt buiten beeld. */
.profiel-correctie-menu {
    bottom: calc(100% + 6px);
    top: auto;
    /* Rechts verankerd sinds de knop zelf rechts staat: met `left: 0` hing een
       menu van 190px vanaf de rechterrand het scherm uit op een telefoon. */
    right: 0;
    left: auto;
    min-width: 190px;
    max-height: 260px;
    overflow-y: auto;
}

/* Een verwijzing middenin de zin, aanklikbaar naar de passage.
   Terughoudend met opzet: dit staat in lopende tekst en mag die niet aan
   flarden leggen. Een stippellijn eronder in plaats van een volle
   onderstreping, en de kleur van de tekst zelf -- pas bij aanwijzen wordt het
   een link. Alleen verwijzingen waar werkelijk een bron bij zit krijgen dit;
   zie _maakVerwijzingenKlikbaar. */
.ref-tekst {
    cursor: pointer;
    border-bottom: 1px dashed color-mix(in srgb, var(--blue) 55%, transparent);
    transition: color 0.12s ease, border-color 0.12s ease;
}

.ref-tekst:hover,
.ref-tekst.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.ref-tekst:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Het merkteken bij een bronsoort: pictogram plus woord.
   Stond hier als kale tag ([WET]) en dat las midden in een zin als een lek in
   plaats van als informatie. Het pictogram doet het werk op een telefoon -- je
   ziet dát het een andere soort is zonder te lezen -- en de kleur groepeert:
   groen bindend recht, blauw rechtspraak, oranje bekendmakingen, grijs de rest.
   `baseline` en em-maten, want dit staat middenin lopende tekst en moet met de
   leesstap meebewegen. *//* Een bron die het model noemt zonder hem aan te wijzen.

   Bewust geen merkteken: dat is voorbehouden aan een bron die je kunt nalezen.
   Dit moet er juist uitzien als wat het is -- een claim zonder vindplaats. Geen
   rood en geen waarschuwing: het antwoord kan best kloppen, alleen staat er niet
   bij waar het vandaan komt. Gedempt, met een stippellijn eronder. */
/* Het voorbehoud boven een antwoord dat op zwakke grond staat.

   Ingetogen en niet alarmerend: het antwoord kan kloppen, maar het is afgeleid
   in plaats van gevonden. Een rode balk zou dat als een fout laten lezen, en
   dan wordt hij bij het achtste antwoord weggeklikt in plaats van gelezen. */
.answer-voorbehoud {
    color: var(--text-3);
    font-size: 0.86em;
    line-height: 1.5;
    padding: 8px 12px;
    border-left: 2px solid var(--text-3);
    margin-bottom: 12px;
}

/* Wat er achter een merkteken zit, in beeld gebracht bij aantikken.

   Op een telefoon bestaat aanwijzen niet, dus `title` toont daar nooit iets.
   Klein en dicht bij het merkteken: dit is een zijblik, geen venster. */
.bron-popup {
    position: fixed;
    z-index: 1200;
    max-width: min(320px, calc(100vw - 16px));
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 11px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: 0 6px 20px rgba(0, 17, 23, 0.16);
    font-size: 0.78rem;
    line-height: 1.4;
}

.bron-popup-soort {
    font-weight: 600;
    color: var(--text);
}

.bron-popup-ref {
    color: var(--text-2);
}

/* Aantikbaar, en dat mag te zien zijn. */
.answer-source-badge[role="button"] {
    cursor: pointer;
}

.answer-source-badge[role="button"]:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

.bron-zonder-naam {
    color: var(--text-3);
    border-bottom: 1px dotted currentColor;
}

.bron-zonder-naam-noot {
    font-size: 0.82em;
    font-style: italic;
    white-space: nowrap;
}


.answer-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    padding: 0.06em 0.42em;
    border-radius: 0.35em;
    border: 1px solid transparent;
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.01em;
    vertical-align: baseline;
    /* Een merkteken mag nooit een regelafbreking veroorzaken tussen zijn eigen
       pictogram en woord. */
    white-space: nowrap;
}

.answer-source-badge-icoon {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    /* Optisch op de tekstregel; zonder dit hangt hij net te hoog. */
    margin-top: -0.06em;
}

.answer-source-badge--richtlijn {
    background: rgba(109, 74, 168, 0.12);
    color: #57408c;
    border-color: rgba(109, 74, 168, 0.24);
}

.answer-source-badge--tucht {
    background: rgba(15, 118, 137, 0.12);
    color: #0e5c6b;
    border-color: rgba(15, 118, 137, 0.24);
}

.answer-source-badge--verdrag {
    background: rgba(31, 122, 82, 0.10);
    color: #1c5f45;
    /* Een verdrag gaat vóór de nationale wet, dus dezelfde kleurfamilie als
       [Wet] maar met een eigen, vollere rand. */
    border-color: rgba(31, 122, 82, 0.42);
}

.answer-source-badge--parlementair {
    background: rgba(120, 96, 62, 0.12);
    color: #6b5326;
    border-color: rgba(120, 96, 62, 0.26);
}

.answer-source-badge--literatuur {
    background: rgba(70, 82, 100, 0.10);
    color: #3f4a5c;
    border-color: rgba(70, 82, 100, 0.24);
}

.answer-source-badge--wet {
    background: rgba(31, 122, 82, 0.13);
    color: #176242;
    border-color: rgba(31, 122, 82, 0.25);
}

/* Een AMvB hoort bij de wettenfamilie maar is er geen: dezelfde groene toon,
   ingetogener, zodat het verschil zichtbaar is zonder een eigen kleurcode. */
.answer-source-badge--amvb {
    background: rgba(31, 122, 82, 0.08);
    color: #2f7a5c;
    border-color: rgba(31, 122, 82, 0.20);
}

.answer-source-badge--jur {
    background: rgba(15, 80, 180, 0.12);
    color: #174a9b;
    border-color: rgba(15, 80, 180, 0.22);
}

.answer-source-badge--bkm {
    background: rgba(201, 138, 76, 0.13);
    color: #8c5c22;
    border-color: rgba(140, 96, 32, 0.26);
}

.answer-source-badge--doc,
.answer-source-badge--other {
    background: rgba(42, 47, 54, 0.08);
    color: var(--text-2);
    border-color: rgba(42, 47, 54, 0.22);
}

.answer-source-name,
.answer-source-ref {
    font-weight: 700;
}

.answer-source-arrow {
    color: var(--text-3);
    padding: 0 0.15em;
}

.answer-source-snippet {
    color: var(--text-2);
}
/* pre fallback (server-rendered / history turns) */
pre, pre#answer-pre {
    font-family: inherit;
    font-size: var(--answer-font-size, 0.85rem);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: var(--answer-line-height, 1.75);
    padding: 0.1em 0.4em;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text);
    margin: 0 0 1.1em 0;
    overflow-x: auto;
    max-width: var(--answer-measure);
    /* Zie .answer-section-body: afbreken alleen op de telefoon. */
    hyphens: manual;
    -webkit-hyphens: manual;
}

pre code {
    font-family: inherit;
    font-size: inherit;
    padding: inherit;
    background: transparent;
    border: none;
    border-radius: 0;
}

#answer-pre {
    margin: 0;
    max-width: var(--answer-measure);
    width: min(100%, var(--answer-measure));
    margin-inline: auto;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
}
/* when structured HTML is injected, pre acts as a plain div */
pre#answer-pre.answer-structured {
    white-space: normal;
    overflow-y: visible;
    max-height: none;
}

.followup-chips {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    padding-top: 10px;
    width: min(100%, var(--answer-measure));
    max-width: var(--answer-measure);
    margin-inline: auto;
    /* De chips houden hun eigen maat uit hetzelfde leesprofiel als de
       antwoordtekst. Deze regel stond hier ook om de ch-rekenbasis van
       --answer-measure gelijk te trekken; die maat is inmiddels absoluut, dus
       dat deel is vanzelf opgelost. */
    font-size: var(--reading-followup-size, var(--answer-followup-size, 0.85rem));
}

.followup-chips-label {
    font-size: 0.63rem;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1px;
}
.followup-chip {
    font-size: var(--reading-followup-size, var(--answer-followup-size, 0.85rem));
    font-weight: 400;
    color: var(--blue);
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    padding: var(--reading-followup-pad-y, 6px) var(--reading-followup-pad-x, 10px);
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
    text-align: left;
    white-space: normal;
    width: 100%;
    font-family: inherit;
    line-height: 1.4;
    box-shadow: none;
    overflow-wrap: anywhere;
}
.followup-chip:hover {
    background: var(--blue-bg);
    border-color: rgba(201, 138, 76, 0.28);
}

@keyframes chipFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.followup-chip--anim {
    opacity: 0;
    animation: chipFadeIn 0.22s ease forwards;
}

.section-copy-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-right: auto;
}

.section-copy-btn {
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text-2);
    border-radius: var(--r-sm);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 7px;
    cursor: pointer;
}

.answer-actions .corpus-filter-toggle {
    width: 34px;
    height: 34px;
}

.answer-actions .corpus-filter-toggle svg {
    width: 13px;
    height: 13px;
}

.copy-answer-btn--prominent,
.conv-turn-copy-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
}

.conv-turn-copy-label,
#copy-answer-label {
    display: none !important;
}

.section-copy-btn:hover {
    background: var(--blue-bg);
    border-color: rgba(201, 138, 76, 0.3);
}

/* S/M/L uit de instellingen zet de lettermaat van het antwoord: één token,
   `--answer-font-size`, waar .answer-section-body en de tekstblokken aan
   hangen. Op een telefoon een tik groter (20 september 2026: Libra zet ~17px
   op een iPhone; M is daar 1,06rem). De volgmaten (vervolgchips) lopen mee. */
.answer-card.reading-size-s {
    --answer-font-size: 0.85rem;
    --reading-answer-size: 0.85rem;
    --answer-followup-size: 0.8rem;
    --reading-followup-size: 0.8rem;
    --reading-followup-pad-y: 5px;
    --reading-followup-pad-x: 9px;
}
.answer-card.reading-size-m {
    --answer-font-size: 0.97rem;
    --reading-answer-size: 0.97rem;
    --answer-followup-size: 0.85rem;
    --reading-followup-size: 0.85rem;
    --reading-followup-pad-y: 6px;
    --reading-followup-pad-x: 10px;
}
.answer-card.reading-size-l {
    --answer-font-size: 1.1rem;
    --reading-answer-size: 1.1rem;
    --answer-followup-size: 0.92rem;
    --reading-followup-size: 0.92rem;
    --reading-followup-pad-y: 7px;
    --reading-followup-pad-x: 11px;
}
.answer-card.reading-size-s #answer-pre, .answer-card.reading-size-s .answer-story-scroll .conv-turn-answer,
.answer-card.reading-size-m #answer-pre, .answer-card.reading-size-m .answer-story-scroll .conv-turn-answer,
.answer-card.reading-size-l #answer-pre, .answer-card.reading-size-l .answer-story-scroll .conv-turn-answer {
    font-size: var(--answer-font-size);
}
@media (max-width: 820px) {
    .answer-card.reading-size-s { --answer-font-size: 0.94rem; --reading-answer-size: 0.94rem; }
    .answer-card.reading-size-m { --answer-font-size: 1.06rem; --reading-answer-size: 1.06rem; }
    .answer-card.reading-size-l { --answer-font-size: 1.2rem; --reading-answer-size: 1.2rem; }
}

/* Hier stond `--answer-measure: 72ch`. Dat versmalde in het profiel
   "Professioneel" alléén de blokken die de maat gebruiken en niet de beurt
   eromheen, dus juist in dat profiel liep de kolom het meest uit de pas. De
   liniaal is er één; wie het rustiger wil, verzet de leesstap of de regelval. */

/* Regelhoogte is het werk van de spacing-keuze (zie .reading-spacing-*); het
   profiel legt er alleen een opslag bovenop. Stond hier eerder als
   `line-height: 1.8`, maar dat verloor het van de spacing-regel verderop in dit
   bestand — gelijke specificiteit, latere positie — waardoor de rustigere
   regelval van "Professioneel" nooit zichtbaar werd. */
.answer-card.reading-profile-professional {
    --reading-profile-lh-boost: 0.06;
}

.answer-card.reading-profile-professional #answer-pre,
.answer-card.reading-profile-professional .answer-section-body,
.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer {
    letter-spacing: 0.003em;
}

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-q-text,
.answer-card.reading-profile-professional .answer-current-question {
    line-height: 1.52;
}

.answer-card.reading-profile-professional .answer-section-label {
    color: color-mix(in srgb, var(--text-3) 82%, var(--navy-2) 18%);
    margin-bottom: 5px;
}

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer h1,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer h1,
.answer-card.reading-profile-professional .answer-section-body h1 {
    font-size: 1.22rem;
    line-height: 1.34;
    margin-top: 1.38em;
    margin-bottom: 0.62em;
    border-bottom-width: 1px;
}

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer h2,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer h2,
.answer-card.reading-profile-professional .answer-section-body h2 {
    font-size: 1.06rem;
    line-height: 1.38;
    margin-top: 1.28em;
    margin-bottom: 0.56em;
}

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer h3:not(.answer-section-label),
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer h3:not(.answer-section-label),
.answer-card.reading-profile-professional .answer-section-body h3 {
    font-size: 0.97rem;
    line-height: 1.44;
    margin-top: 1.15em;
    margin-bottom: 0.5em;
}

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer p,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer p,
.answer-card.reading-profile-professional .answer-section-body p {
    margin: 0.84em 0;
}

/* Deze citaat- en bronregels golden alleen binnen .conv-turn-answer, dus voor
   gearchiveerde beurten. Het antwoord dat de gebruiker op dat moment leest staat
   in #answer-pre / .answer-section-body en bleef daardoor in de standaardopmaak
   staan, ook met "Professioneel" aan. */
.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer .legal-citation,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer .legal-citation,
.answer-card.reading-profile-professional .answer-section-body .legal-citation,
.answer-card.reading-profile-professional #answer-pre .legal-citation,
.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer blockquote,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer blockquote,
.answer-card.reading-profile-professional .answer-section-body blockquote,
.answer-card.reading-profile-professional #answer-pre blockquote {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.96em;
    line-height: 1.74;
    border-left-width: 2px;
}

.answer-card.reading-profile-professional .answer-meta-chip {
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: var(--r);
}

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer .ref-inline,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer .ref-inline,
.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer .citation-ref,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer .citation-ref,
.answer-card.reading-profile-professional .answer-section-body .ref-inline,
.answer-card.reading-profile-professional .answer-section-body .citation-ref,
.answer-card.reading-profile-professional #answer-pre .ref-inline,
.answer-card.reading-profile-professional #answer-pre .citation-ref {
    font-size: 0.72em;
    padding: 0 2px;
    border-radius: var(--r);
    border-width: 1px;
}

/* De bronregel — "[WET] (Burgerlijk Wetboek Boek 6, art. 265)" — had helemaal
   geen profielvariant, terwijl het instellingenscherm juist met de bronvermelding
   het verschil tussen de twee profielen laat zien. Bij "Professioneel" krijgt hij
   een eigen regel met lucht eromheen in plaats van tussen de lopende tekst. */
.answer-card.reading-profile-professional .answer-source-line {
    display: block;
    margin: 0.5em 0 0.25em;
    line-height: 1.7;
}

.answer-card.reading-profile-professional .answer-source-badge {
    font-size: 0.72em;
    letter-spacing: 0.04em;
    padding: 0.08em 0.5em;
}

.answer-card.reading-profile-professional .answer-source-name,
.answer-card.reading-profile-professional .answer-source-ref {
    font-weight: 600;
}

.answer-card.reading-profile-professional .answer-toc-link {
    font-size: 0.69rem;
    padding: 3px 8px;
}

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer:hover {
    box-shadow: 0 1px 3px rgba(0, 17, 23, 0.06);
}

/* 19-10-2026: ruim van 1,86 naar 1,7 en compact van 1,58 naar 1,5. Met 1,86
   (de standaard) stonden er op een laptop zo'n tien regels in beeld; 1,7 is
   nog steeds ruim voor lange juridische zinnen. */
.answer-card.reading-spacing-compact #answer-pre,
.answer-card.reading-spacing-compact .answer-section-body,
.answer-card.reading-spacing-compact .answer-story-scroll .conv-turn-answer {
    line-height: calc(1.5 + var(--reading-profile-lh-boost, 0));
}

.answer-card.reading-spacing-comfortable #answer-pre,
.answer-card.reading-spacing-comfortable .answer-section-body,
.answer-card.reading-spacing-comfortable .answer-story-scroll .conv-turn-answer {
    line-height: calc(1.7 + var(--reading-profile-lh-boost, 0));
}

.empty-msg {
    font-size: 0.84rem;
    color: var(--text-3);
    font-style: italic;
    margin: 8px 0;
}

/* ── Answer pre — scrollable ─────────────────────────────── */

pre#answer-pre {
    max-height: none;
    overflow-y: visible;
}

.stream-output {
    max-height: 52vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

/* ── Fixed ask bar ───────────────────────────────────────── */

.app-layout, .app-main {
    padding-bottom: var(--ask-bar-h) !important;
}

.ask-bar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* Was 34px -- de mobiele versie hieronder ging al naar 16px voor hetzelfde
       probleem (laatste alinea half achter de vervaging); nu ook hier. */
    padding-top: 17px;
    padding-bottom: 4px;
    background: linear-gradient(to bottom, rgba(245, 244, 240, 0) 0%, var(--bg) 65%);
    pointer-events: none;
}

.ask-bar-fixed .ask-bar-inner,
.ask-bar-fixed .ask-bar-credit,
.ask-bar-fixed .ask-bar-voorbehoud,
.ask-bar-fixed .scroll-down-btn {
    pointer-events: auto;
}

/* Het voorbehoud als voetregel: klein, grijs, gecentreerd onder de
   vraagkaart, in de woorden van de transparantielaag. */
.ask-bar-voorbehoud {
    margin: 2px auto 0;
    max-width: var(--ask-measure);
    text-align: center;
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--text-3);
    padding: 0 8px;
}
.ask-bar-voorbehoud a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ask-bar-voorbehoud a:hover { color: var(--text-2); }

/* De ronde knop met de pijl omlaag, rechts boven de vraagkaart (sinds
   18-10-2026; daarvoor in het midden, midden in de leeskolom). Ligt in de vaste
   balk zodat hij overal op dezelfde plek staat, ook als de balk mee-inspringt
   met de zijpanelen. Tokens, geen vaste kleuren. */
.scroll-down-btn {
    position: absolute;
    /* `bottom` en `right` zet 01-app.js (_scrollKnop), gemeten op de kaart: de
       hoogte van de vraagkaart plus de voetregel verschilt per scherm en per
       stand, en de rechterrand van de kaart ligt met zijpanelen niet op die
       van de balk. Dit is alleen de stand vóór de eerste meting. */
    bottom: 120px;
    right: 12px;
    left: auto;
    transform: none;
    /* Een cirkel, in de stijl van de vraagkaart: dezelfde ondergrond, rand
       en schaduw (zie .ask-bar-inner). Vaste maat in beide richtingen en een
       vaste 1:1-verhouding, zodat geen enkele knopregel er een ovaal van maakt. */
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-2) 72%, transparent);
    /* Half doorzichtig, op verzoek (18-10-2026): de knop hoort de tekst
       eronder niet af te dekken; bij hover en focus dekkend. Zonder
       backdrop-filter: een blur onder de sticky lagen liet de leeskolom op de
       iPhone flikkeren (zie "Geen backdrop-filter." verderop). Losse longhands,
       geen `background:`-verkorting: die zet met een var() erin alle lagen op
       uitgestelde vervanging en sloopt dan ook de background-clip eronder
       (gemeten in Chrome, 23-09-2026). */
    background-color: color-mix(in srgb, var(--bg) 62%, transparent);
    background-image: none;
    background-clip: padding-box;
    opacity: 0.85;
    color: var(--text);
    box-shadow: var(--shadow-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    z-index: 3;
    transition: border-color 0.15s, opacity 0.15s, background-color 0.15s;
}
.scroll-down-btn[hidden] { display: none; }
/* Geen transform op hover: de positie staat in left/right, en een
   hover-transform liet de knop eerder verspringen. */
.scroll-down-btn:hover,
.scroll-down-btn:focus-visible {
    background-color: var(--bg);
    background-image: linear-gradient(var(--surface-2), var(--surface-2));
    border-color: var(--border-2);
    opacity: 1;
}
.scroll-down-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Was top:50%/translate(-50%,-50%): zuiver viewport-midden, zonder rekening
   te houden met de hoogte van de vraagbalk eronder (die groeit met
   geüploade stukken) -- op een smal scherm kon de kaart daardoor over de
   balk heen vallen. Nu een vak dat exact tussen kopbalk en vraagbalk past,
   met de kaart erin gecentreerd via align-items: safe center: past hij
   niet, dan schuift hij naar boven tegen de kopbalk aan (start-uitlijning)
   in plaats van over de balk eronder te vallen. */
.welcome-card {
    position: fixed;
    left: 50%;
    top: var(--chat-main-top, 0px);
    height: calc(100dvh - var(--chat-main-top, 0px) - var(--ask-bar-h, 180px));
    transform: translateX(-50%);
    display: flex;
    align-items: safe center;
    justify-content: center;
    width: 100%;
    max-width: 14cm;
    margin: 0;
    padding: 0;
    z-index: 95;
    pointer-events: none;
}

/* Op een telefoon precies zo breed als de balk eronder.

   De kaart stond op `width: 100%` van het scherm terwijl `.ask-bar-fixed` links
   en rechts inspringt: de kaart liep dus tot de rand en de balk niet, en dat
   leest als twee verschillende kolommen boven elkaar. Dezelfde marge en
   dezelfde bovengrens (--ask-measure, waar .ask-bar-inner op afgetopt wordt)
   maken er één kolom van. */
@media (max-width: 820px) {
    .welcome-card {
        width: calc(100% - var(--ask-rand-mobiel, 8px) * 2);
        max-width: var(--ask-measure);
    }
}

@media (min-width: 821px) {
    /* Recht boven de ask bar, en niet gecentreerd in de kolom eromheen.
       Met --ask-main-* stond de kaart op 1440 px 159 pixels rechts van het
       invoerveld: dat vak is breder dan de balk en loopt door onder het
       rechterpaneel. --ask-veld-* is het formulier zelf, opgemeten in
       initChatViewportSync. De verticale positie (top/height/align-items)
       komt al van de basisregel hierboven. */
    .welcome-card {
        left: var(--ask-veld-left, var(--ask-main-left, calc(18px + var(--conv-w) + 14px)));
        right: auto;
        width: var(--ask-veld-width, min(100%, 14cm));
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        transform: none;
    }
}

.welcome-card[hidden] {
    display: none !important;
}

/* Een openstaand keuzemenu hoort boven de welkomstkaart.
   Waarom het dat niet deed: `.ask-bar-inner` heeft `position: relative` met
   `z-index: 0`, en dat maakt van de balk een eigen stacking context. De
   `z-index: 300` van .persona-menu geldt daardoor alleen bínnen die balk; naar
   buiten toe telt alleen de 0 van de balk zelf, en .welcome-card staat als
   broer of zus op 95. De kaart won dus altijd, hoe hoog het menu ook stond.

   Dezelfde fout is eerder opgelost bij .dossier-sidebar-card (zie
   50-remaining-ui.css) -- daar was een `transform` de oorzaak, hier een
   z-index, maar het gevolg is hetzelfde.

   De 0 kan niet zomaar weg: hij houdt de balk onder de menu's van de
   navigatie. Daarom tilt de balk zichzelf op zodra er een menu open staat, en
   alleen dan -- een balk die permanent boven de kaart hangt zou kliks op de
   welkomstkaart opvangen die daar niet horen. 96 en niet 300: net boven de
   kaart, niet boven alles. */
.ask-bar-fixed .ask-bar-inner:has(.persona-menu--open) {
    z-index: 96;
}

.welcome-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--r);
    /* Zelfde ondergrond als de ask-card in dit thema (#fff, zie
       .ask-bar-inner's --ask-card-surface) -- was var(--bg), de paginakleur,
       een tint grijziger dan de kaart eronder. Donker thema matchte al
       (beide var(--bg) daar), zie de override hieronder. */
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(14, 22, 34, 0.08);
    text-align: center;
    pointer-events: auto;
}

.welcome-card-headline {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.welcome-card-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.98;
}

.welcome-card-title {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text);
}

.welcome-card-subtitle {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-2);
}

.welcome-resume {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}
.welcome-resume-text {
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-2);
    line-height: 1.35;
    max-width: 54ch;
}
.welcome-resume-context {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-3);
    line-height: 1.35;
    max-width: 54ch;
}
.welcome-resume-btn {
    border: 1px solid color-mix(in srgb, var(--border-2) 75%, transparent);
    background: color-mix(in srgb, var(--blue-bg) 56%, transparent);
    color: var(--blue);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s, transform 0.14s;
}
.welcome-resume-btn:hover {
    border-color: color-mix(in srgb, var(--blue) 38%, var(--border-2));
    background: color-mix(in srgb, var(--blue-bg) 80%, transparent);
    transform: translateY(-1px);
    letter-spacing: -0.01em;
}

.welcome-resume-btn--disabled,
.welcome-resume-btn:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* De .followup-corrections / .followup-chip--correction regels stonden hier
   voor de "Bijsturen"-rij. Die rij is verwijderd; niets rendert deze klassen
   nog. */

.ask-bar-inner {
    --ask-card-surface: #ffffff;
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: var(--ask-measure);
    margin: 0 auto 4px;
    padding: 0;
    box-sizing: border-box;
    border-radius: var(--r);
    border: 1px solid color-mix(in srgb, var(--border-2) 72%, transparent);
    box-shadow: var(--shadow-md);
    background: var(--ask-card-surface);
    transition: box-shadow 0.15s, border-color 0.15s;
}

/* ── Opdrachtmenu ("/") ──────────────────────────────────────────────────
   Zweeft boven de balk (bottom:100%) i.p.v. eronder — de balk zelf staat al
   onderaan het scherm, dus eronder zou van de pagina afvallen. */
.slash-command-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 6px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: 60;
}

.slash-command-menu[hidden] { display: none; }

.slash-command-option {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--text);
}

.slash-command-option + .slash-command-option {
    border-top: 1px solid var(--border);
}

.slash-command-option:hover,
.slash-command-option--active {
    background: var(--blue-bg);
}

.slash-command-name {
    flex-shrink: 0;
    font-family: Consolas, Menlo, Monaco, monospace;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--blue);
}

.slash-command-desc {
    font-size: 0.76rem;
    color: var(--text-3);
    line-height: 1.4;
}

/* Drag-over feedback when dropping a file on the bar — the only remaining
   visual cue on this card, no permanent border/line and no focus outline. */
.ask-bar-inner.dropzone-active {
    box-shadow: 0 0 0 1px rgba(201, 138, 76, 0.32), 0 0 22px rgba(201, 138, 76, 0.3);
}

/* Focusing the question field (or any control in the bar) highlights the
   whole card, not just the text field. */
.ask-bar-inner:focus-within {
    border-color: color-mix(in srgb, var(--blue) 48%, var(--border-2));
    box-shadow: var(--shadow-md), 0 0 0 1px var(--blue);
}

/* Bezig-rand om de vraagkaart. Op een eigen ::after-laag en niet op de kaart
   zelf, omdat je tijdens het genereren je volgende vraag mag intypen: de blauwe
   :focus-within-ring hierboven moet dan zichtbaar blijven (WCAG 2.4.7). Op een
   pseudo-element stapelen de twee in plaats van dat de laatste wint, en
   .dropzone-active blijft ongemoeid.

   Er staat bewust geen teller, verstreken tijd of resterende tijd in beeld —
   niet hier en niet in de fase-pill. Zichtbaar maken dát er gewerkt wordt is
   geruststellend; zichtbaar maken hoe lang het al duurt maakt van wachten
   meten. */
body.answer-generating .ask-bar-inner::after {
    /* Koper: het gewone vraag-en-antwoordpad. */
    --busy-ring: 201, 138, 76;
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--r) + 1px);
    pointer-events: none;
    border: 1px solid rgba(var(--busy-ring), 0.34);
    box-shadow: 0 0 0 1px rgba(var(--busy-ring), 0.16);
    animation: question-card-breath 2.6s ease-in-out infinite;
    /* Boven alles wat in de kaart staat. Zonder dit is het een kwestie van
       DOM-volgorde of een gepositioneerd kind eroverheen komt -- de foutmelding
       deed dat. De ring geeft aan dát er gewerkt wordt; die mag door niets in
       de kaart worden onderbroken. */
    z-index: 2;
}

/* Donkerblauw: er wordt een stuk opgesteld. Navy is de structuurkleur van de
   app (verzendknop, actieve moduskeuze) en botst niet met de betekenisdragende
   groen/amber/rood van de kwaliteitssignalen. */
body.answer-generating--draft .ask-bar-inner::after {
    --busy-ring: 0, 17, 23;
}

/* In het donkere thema is navy bijna zwart (--navy #000B0F) en dus onzichtbaar
   tegen de achtergrond. De koele lichtgrijzen die dit thema al voor randen
   gebruikt zijn hier de tegenhanger: dezelfde rol, omgekeerd. */
[data-theme="dark"] body.answer-generating--draft .ask-bar-inner::after {
    --busy-ring: 167, 176, 183;
}

#ask-form {
    padding: 5px 12px 3px;
    position: relative;
    z-index: auto;
    background: var(--ask-card-surface, #ffffff);
    border-radius: inherit;
}

/* Neutrale deklaag boven de foutmelding, zodat de melding achter de kaart
   blijft zonder door de kaart heen zichtbaar te worden. */
#ask-form:has(> .stream-error-banner:not([hidden]))::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ask-card-surface, #ffffff);
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

@media (min-width: 821px) {
    /* Constrain only the chat page to full-height/overflow:hidden so the
       sticky 3-column layout works. Other pages (settings, library, etc.)
       must NOT get overflow:hidden on html/body — they need to scroll.
       :has() is supported in all modern browsers (Chrome 105+, Firefox 121+). */
    html:has(.app-main--chat),
    html:has(.app-main--chat) body {
        height: 100%;
        overflow: hidden;
    }

    .app-main--chat {
        box-sizing: border-box;
        height: calc(100dvh - var(--chat-main-top, 0px));
        overflow: hidden;
        /* Reclaim the space the shared .app-layout,.app-main rule reserves
           for the ask bar — the answer card fades its own text out before
           reaching the bottom (see .answer-content-scroll) and the fixed
           bar sits on top, so nothing needs a full ask-bar-h gap here. */
        padding-bottom: 12px !important;
    }

    .app-main--chat .home-grid {
        height: 100%;
        min-height: 0;
        align-items: stretch;
        overflow: hidden;
    }

    .app-main--chat .conv-sidebar,
    .app-main--chat .home-sidebar {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        top: 0;
    }

    /* Ook hier scrollt de lijst en niet de zijbalk; zonder dit zou de
       chatpagina de scroll er weer bovenop zetten. */
    .app-main--chat .conv-sidebar {
        overflow: hidden;
    }

    .app-main--chat .home-sidebar {
        overflow: hidden;
    }

    .app-main--chat .home-main {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .app-main--chat #references-card {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .app-main--chat #references-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(42, 47, 54, 0.24) transparent;
    }

    .app-main--chat .home-main,
    .app-main--chat #references-content {
        scrollbar-gutter: stable;
    }

    .app-main--chat .home-main::-webkit-scrollbar,
    .app-main--chat #references-content::-webkit-scrollbar {
        width: 6px;
    }

    .app-main--chat .home-main::-webkit-scrollbar-track,
    .app-main--chat #references-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-main--chat .home-main::-webkit-scrollbar-thumb,
    .app-main--chat #references-content::-webkit-scrollbar-thumb {
        background: rgba(42, 47, 54, 0.22);
        border-radius: 999px;
        border: 1px solid transparent;
        background-clip: padding-box;
    }

    .app-main--chat .home-main:hover::-webkit-scrollbar-thumb,
    .app-main--chat #references-content:hover::-webkit-scrollbar-thumb {
        background: rgba(42, 47, 54, 0.32);
    }

    /* The bar's background spans the full screen width, but its available
       content area (padding-left/right) is shrunk to the middle (chat)
       column of the 3-column grid. The card itself (max-width: 16cm, see
       .ask-bar-inner) then centers within that available area — so it's
       always ~16cm wide when there's room, and shrinks to fit otherwise. */
    .ask-bar-fixed {
        /* De clamp() is dezelfde padding-inline die .answer-content-scroll
           gebruikt. Zonder die term stond de vraagkaart 24px links van de
           antwoordkolom: de balk lijnde uit op de scroll-container, terwijl het
           antwoord daarbinnen nog eens inspringt. */
        padding-left: calc(var(--ask-main-left, calc(18px + var(--conv-w) + 14px))
                           + clamp(10px, 1.4vw, 24px));
        /* Ook rechts de clamp: de antwoordkolom springt aan beide kanten in
           en de vraagbalk alleen links, en dan liggen hun middens uit
           elkaar. Geldt met en zonder bronpaneel. */
        padding-right: calc(var(--ask-main-right, calc(18px + var(--sidebar-w) + 14px))
                            + clamp(10px, 1.4vw, 24px));
    }

    /* Rechts, aan de rand van de balk binnen de zijpanelen: de stand vóór de
       eerste meting. 01-app.js (_scrollKnop) zet hem daarna precies boven de
       rechterhoek van de kaart, die op --ask-measure is afgetopt. */
    .scroll-down-btn {
        left: auto;
        right: calc(var(--ask-main-right, calc(18px + var(--sidebar-w) + 14px))
                    + clamp(10px, 1.4vw, 24px) + 12px);
        margin: 0;
        transform: none;
    }

    /* Met ingeklapt bronpaneel voelt de scrollbalk op brede schermen te ver
       naar rechts; verklein de reserve zodat de leeskolom visueel dichter bij
       de scrollpositie blijft. */
    body.desktop-home-sidebar-collapsed:not(.viewer-document-open) {
        --bronnen-reserve: clamp(170px, 15vw, 250px);
    }

    /* Is het bronpaneel ingeklapt, dan zet de JS --ask-main-right op de kale
       schermrand en valt de reservering weg. Dan houden we hem hier zelf vrij,
       anders schuift het gesprek tot tegen de rechterrand en heeft de
       bronnenkaart geen plek meer om open te gaan. Staat het paneel open, dan
       zit die ruimte al in --ask-main-right en zou dit dubbel tellen. */
    /* Ook hier niet met de viewer open: de JS zet --ask-main-right dan al op
       de viewerrand (gemeten 637px op 1440px), en de reserve erbovenop liet
       142px over voor de hele vraagbalk. */
    body.desktop-home-sidebar-collapsed:not(.viewer-document-open) .ask-bar-fixed {
        padding-right: calc(var(--ask-main-right, 18px) + var(--bronnen-reserve)
                            + clamp(10px, 1.4vw, 24px));
    }
    body.desktop-home-sidebar-collapsed:not(.viewer-document-open) .scroll-down-btn {
        right: calc(var(--ask-main-right, 18px) + var(--bronnen-reserve)
                    + clamp(10px, 1.4vw, 24px));
    }

    /* Dezelfde reservering voor de antwoordkolom, zodat de band daarbinnen op
       exact dezelfde as centreert als de vraagkaart. */
    /* Op de kolom zelf, niet op de scroller erbinnen: dan krimpt de
       antwoordkaart mee en houdt zijn rechterrand gelijke tred met die van de
       vraagbalk. Op de scroller werkte het ook, maar dan lopen de twee
       rechterranden zes pixels uiteen omdat de kaart daar zelf al binnen ligt. */
    /* Niet met de viewer open: die heeft dan een eigen rasterkolom, en de
       reserve telt de ruimte een tweede keer (gemeten 25-09-2026 op 1440px:
       de antwoordkaart hield 177 van de 499 px over). */
    body.desktop-home-sidebar-collapsed:not(.viewer-document-open) .app-main--chat .home-main {
        padding-right: var(--bronnen-reserve);
    }

    /* Centreren binnen de ruimte die overblijft, niet links plakken.
       Dit stond eerder op links omdat centreren de kaart naar rechts schoof
       zodra het bronpaneel dicht was, en daarmee de ruimte opslokte die voor
       de bronpassages en de viewer bedoeld is. Dat bezwaar is weg: de
       padding-right hierboven houdt die ruimte apart, dus wat er te centreren
       valt is precies wat overblijft. De antwoordkolom centreert binnen
       dezelfde marges, zodat de twee op één as blijven.

       Alleen vanaf 821px: op een telefoon is de kolom net zo breed als de
       kaart en verandert er niets. */
    .ask-bar-fixed .ask-bar-inner {
        margin-inline: auto;
    }
}

/* ── Header nav dropdown ─────────────────────────────────── */

.nav-dropdown { position: relative; z-index: 401; }

.header-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(200, 218, 255, 0.85);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 6px 13px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    box-shadow: none !important;
}

.header-nav-btn:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.nav-dropdown-chevron {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--vf-orange) 70%, #fff);
    transition: transform 0.15s;
}
.header-nav-btn[aria-expanded="true"] .nav-dropdown-chevron { transform: rotate(180deg); }

/* ── Header nav icon buttons ─────────────────────────────── */

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: rgba(200, 218, 255, 0.85);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    box-shadow: none !important;
    outline: none;
}
.nav-icon-btn:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
.nav-icon-btn[href] svg {
    width: 32px !important;
    height: 32px !important;
}

/* Avatar button replacing the gear icon */
.nav-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    min-width: 60px;        /* wide enough for two-character initials + chevron */
    padding: 0 11px 0 10px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.14s, border-color 0.14s;
    box-shadow: none !important;
    outline: none;
}
.nav-avatar-btn:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}
.nav-avatar-initials {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.nav-avatar-initials.nav-avatar-icon-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}
.nav-avatar-initials.nav-avatar-icon-host svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}
.nav-avatar-initials.nav-avatar-icon-host .nav-avatar-pack-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    object-position: center;
    transform: scale(4.25);
    transform-origin: center;
}
.nav-avatar-menu-indicator {
    opacity: 0.78;
    margin-left: 1px;
    flex-shrink: 0;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    /* Zelfde vorm als de andere keuzemenu's (19-10-2026): afgerond, met
       binnenmarge, geen lijnen tussen de regels. Dit was het laatste menu met
       de oude opmaak, en sinds het onderin de zijbalk staat viel dat op. */
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-2);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 17, 23, 0.14);
    overflow: hidden;
    z-index: 400;
    animation: fadeIn 0.14s ease;
}

@media (max-width: 560px) {
    .nav-dropdown-menu {
        position: fixed;
        top: 64px;
        right: 10px;
        left: auto;
        min-width: min(280px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-dropdown-item,
    .nav-dropdown a.nav-dropdown-item,
    .nav-inline-form .nav-dropdown-item {
        min-height: 42px;
    }
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    border-bottom: none;
}

.nav-dropdown-item:hover { background: var(--beheer-hover, rgba(28, 24, 18, 0.045)); color: var(--text); }

.nav-dropdown-item svg { flex-shrink: 0; opacity: 0.65; }

.nav-dropdown-item .nav-icon-pack {
    display: none;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    transform: scale(4.25);
    transform-origin: center;
    opacity: 0.9;
    pointer-events: none;
}

.nav-dropdown-item.nav-icon-pack-target {
    overflow: hidden;
}

.nav-dropdown-item.nav-icon-pack-only > svg {
    display: none;
}

.nav-dropdown-item.nav-icon-pack-only > .nav-icon-pack,
.nav-dropdown-item.nav-icon-pack-review > .nav-icon-pack {
    display: block;
}

.nav-dropdown-item.nav-icon-pack-review > .nav-icon-pack {
    opacity: 0.7;
}

.nav-dropdown-item.nav-icon-pack-target:hover > .nav-icon-pack {
    opacity: 1;
}

.nav-dropdown-menu .nav-dropdown-item.nav-active,
.nav-dropdown-menu a.nav-dropdown-item.nav-active,
.nav-dropdown-menu .nav-dropdown-item[aria-current="page"],
.nav-dropdown-menu a.nav-dropdown-item[aria-current="page"] {
    color: #0b1118 !important;
}

.nav-dropdown-menu .nav-dropdown-item.nav-active svg,
.nav-dropdown-menu a.nav-dropdown-item.nav-active svg,
.nav-dropdown-menu .nav-dropdown-item[aria-current="page"] svg,
.nav-dropdown-menu a.nav-dropdown-item[aria-current="page"] svg {
    color: #0b1118 !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
}

/* Fix: .header-nav a (0,1,1) overrides .nav-dropdown-item (0,1,0) for <a> children,
   causing pale-blue text and wrong padding. These rules win at (0,2,1) / (0,3,1). */
.nav-dropdown a.nav-dropdown-item {
    color: var(--text);
    padding: 9px 10px;
    border-radius: 8px;
    border: none;
    text-decoration: none;
}
.nav-dropdown a.nav-dropdown-item:hover {
    background: var(--beheer-hover, rgba(28, 24, 18, 0.045));
    color: var(--text);
}

.conv-new-btn[aria-disabled="true"],
.conv-new-btn.is-busy {
    pointer-events: none;
    opacity: 0.55;
}

/* Temporary UX toggle: keep dashboard feature in code, but hide it in navigation. */
.nav-dropdown-menu a.nav-dropdown-item[href="/dashboard"] {
    display: none !important;
}

/* Active page item inside white dropdown must override .nav-active (#fff text)
   used in the top blue header bar. Keep text/icon readable in both themes. */
.nav-dropdown .nav-dropdown-item.nav-active,
.nav-dropdown a.nav-dropdown-item.nav-active,
.nav-dropdown .nav-dropdown-item[aria-current="page"],
.nav-dropdown a.nav-dropdown-item[aria-current="page"] {
    background: var(--menu-active-bg) !important;
    color: var(--text-1) !important;
    border-color: transparent !important;
    font-weight: 600;
}

.nav-dropdown .nav-dropdown-item.nav-active svg,
.nav-dropdown a.nav-dropdown-item.nav-active svg,
.nav-dropdown .nav-dropdown-item[aria-current="page"] svg,
.nav-dropdown a.nav-dropdown-item[aria-current="page"] svg {
    color: var(--text-1) !important;
    fill: currentColor;
    opacity: 1;
}

.nav-dropdown .nav-dropdown-item.nav-active.nav-icon-pack-target > .nav-icon-pack,
.nav-dropdown a.nav-dropdown-item.nav-active.nav-icon-pack-target > .nav-icon-pack,
.nav-dropdown .nav-dropdown-item[aria-current="page"].nav-icon-pack-target > .nav-icon-pack,
.nav-dropdown a.nav-dropdown-item[aria-current="page"].nav-icon-pack-target > .nav-icon-pack {
    opacity: 1;
}

.nav-avatar-btn:focus-visible,
.nav-dropdown-item:focus-visible,
.nav-dropdown a.nav-dropdown-item:focus-visible,
.conv-drawer-toggle:focus-visible,
.ref-drawer-toggle:focus-visible,
.pinned-drawer-toggle:focus-visible,
.home-sidebar-close:focus-visible,
.persona-option:focus-visible,
.corpus-filter-toggle:focus-visible {
    outline: 2px solid rgba(201, 138, 76, 0.65);
    outline-offset: 2px;
}

/* ── Manual page ─────────────────────────────────────────── */

.app-main--manual {
    max-width: min(1000px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.app-main--manual .card {
    padding-left: clamp(16px, 2.2vw, 28px);
    padding-right: clamp(16px, 2.2vw, 28px);
    width: 100%;
    max-width: calc(var(--manual-copy-measure) + clamp(36px, 4vw, 56px));
    margin-left: auto;
    margin-right: auto;
}

.manual-lead {
    font-size: 0.95rem;
    color: var(--text-2);
    line-height: 1.7;
    margin: 0 0 6px;
    max-width: var(--manual-copy-measure);
}

.manual-toc {
    background: var(--blue-bg);
    border: 1px solid rgba(201, 138, 76, 0.16);
    border-radius: var(--r);
    padding: 14px 18px;
    margin-bottom: 4px;
    max-width: 74ch;
    width: 100%;
}

.manual-toc-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.manual-toc ol {
    margin: 0;
    padding-left: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 0;
}

.manual-toc li { font-size: 0.82rem; }
.manual-toc a { color: var(--blue-2); text-decoration: none; }
.manual-toc a:hover { text-decoration: underline; }

.manual-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--text);
}

.manual-section-num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
}

.manual-section p, .manual-section li {
    font-size: 0.86rem;
    line-height: 1.75;
    color: var(--text-2);
    max-width: var(--manual-copy-measure);
}

.manual-section ul, .manual-section ol {
    padding-left: 18px;
    margin: 6px 0;
}

.manual-section li { margin-bottom: 4px; }

.manual-section h3 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin: 14px 0 6px;
}

/* Een kop van een onderdeel dat tijdelijk uitstaat.

   Ingetogen en niet alarmerend: het onderdeel is niet kapot, het is even weg.
   Wie de handleiding doorbladert moet in één oogopslag zien dat hij dit stuk
   niet hoeft te zoeken in de app. */
.manual-uit {
    font-weight: 400;
    font-size: 0.82em;
    color: var(--text-3, #6b7280);
    white-space: nowrap;
}

/* Hier stond ".manual-tip," vóór het blok van .manual-uit hierboven. Daardoor
   kregen de tipblokken diens opmaak (klein, niet afbreken) en liep de
   handleiding horizontaal uit beeld (gezien 19-10-2026). */
.manual-tip,
.manual-warn {
    max-inline-size: var(--manual-copy-measure);
    font-size: 0.86rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
    word-break: normal;
}

.manual-tip {
    background: var(--ok-bg);
    border: 1px solid var(--ok-bdr);
    border-left: 3px solid var(--ok);
    border-radius: var(--r-sm);
    padding: 8px 13px;
    color: var(--ok);
    width: 100%;
    margin: 10px 0 4px;
}

.manual-warn {
    background: var(--warn-bg);
    border: 1px solid var(--warn-bdr);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
    padding: 8px 13px;
    color: var(--warn);
    width: 100%;
    margin: 10px 0 4px;
}

.manual-pipeline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
    align-items: center;
}

.manual-pipeline-step {
    padding: 5px 12px;
    border-radius: var(--r);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.manual-pipeline-arrow { color: var(--text-3); font-size: 0.9rem; }

.pipe-researcher  { background: rgba(201, 138, 76, 0.09); color: #C98A4C; border: 1px solid rgba(201, 138, 76, 0.18); }
.pipe-auditor     { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bdr); }
.pipe-judge       { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-bdr); }
.pipe-guardrail   { background: rgba(100,120,160,0.09); color: var(--text-2); border: 1px solid var(--border-2); }

.manual-kbd {
    display: inline-block;
    background: rgba(42, 47, 54, 0.07);
    border: 1px solid var(--border-2);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 0.78rem;
    font-family: 'Consolas', monospace;
    color: var(--text-2);
}

@media (min-width: 1200px) {
    .app-main--manual {
        max-width: 1040px;
        --manual-copy-measure: 74ch;
    }
}

/* ── Persona selector ────────────────────────────────────── */

/* ── Persona icon button + dropdown ─────────────────────── */
.persona-wrap {
    position: relative;
    flex-shrink: 0;
    align-self: flex-end;
}

.persona-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    /* Anchor from the right edge of the toggle button rather than the left —
       the button sits toward the right side of the ask-bar controls, so a
       left-anchored menu of fixed width can run off the right edge of the
       viewport on narrow/medium screens. Width is viewport-relative so it
       never overflows even on the smallest screens. */
    left: auto;
    right: 0;
    background: var(--surface);
    border: 1.5px solid var(--border-2);
    border-radius: var(--r);
    box-shadow: var(--shadow-md);
    padding: 4px;
    width: max-content;
    min-width: 176px;
    max-width: min(220px, calc(100vw - 24px));
    max-height: min(52vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    flex-direction: column;
    gap: 1px;
    z-index: 300;
}

.persona-menu--open {
    display: flex;
}

.persona-option {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 7px 10px !important;
    border: none !important;
    background: transparent !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-2) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-align: left !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background 0.12s, color 0.12s !important;
    box-shadow: none !important;
    height: auto !important;
}

.persona-check { flex-shrink: 0; opacity: 0; color: var(--blue-2); }
.persona-option--active .persona-check,
.persona-option[aria-checked="true"] .persona-check { opacity: 1; }
.persona-option--active,
.persona-option[aria-checked="true"] {
    color: var(--text-1) !important;
    background: var(--menu-active-bg) !important;
}
.persona-option:hover { background: var(--blue-bg) !important; color: var(--text-1) !important; }

.persona-menu-divider {
    height: 1px;
    margin: 4px 2px;
    background: var(--border);
}

/* ── Corpus filter toggle ────────────────────────────────── */

.corpus-filter-toggle {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: var(--r) !important;
    background: transparent !important;
    border: 1.5px solid var(--border-2) !important;
    color: var(--text-3) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    box-shadow: none !important;
    position: relative;
    align-self: flex-end;
}

.corpus-filter-toggle:hover {
    background: var(--blue-bg) !important;
    border-color: rgba(201, 138, 76, 0.28) !important;
    color: var(--blue) !important;
}

.copy-answer-btn--prominent {
    width: auto !important;
    padding: 0 12px !important;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--blue) !important;
    border-color: rgba(201, 138, 76, 0.35) !important;
}

.corpus-filter-toggle--active {
    background: var(--blue-bg) !important;
    border-color: var(--blue-2) !important;
    color: var(--blue-2) !important;
}

/* De kopieerknop onder het antwoord, even na het klikken: de kleur zegt
   'gelukt' voordat de tooltip het zegt. Token en niet een vaste kleur, zodat
   hij in het donkere thema meekleurt. */
#copy-answer-btn.is-gekopieerd {
    color: var(--ok) !important;
}

#copy-answer-btn.is-gekopieerd .corpus-filter-tooltip {
    opacity: 1;
    visibility: visible;
}

.corpus-filter-toggle--dim {
    opacity: 0.35;
    pointer-events: none;
}

.corpus-filter-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s;
    z-index: 200;
    max-width: 200px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    box-shadow: var(--shadow-md);
}

.corpus-filter-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--navy);
}

.corpus-filter-toggle:hover .corpus-filter-tooltip,
.corpus-filter-toggle:focus-visible .corpus-filter-tooltip {
    opacity: 1;
}

/* Zelfde tooltip in de titelbalk-knoppen (geschiedenis/nieuw gesprek/
   bronnen) -- die droegen alleen title="", het kale OS-tooltipje, terwijl de
   vraagbalk al deze eigen stijl had. Hier onder de knop i.p.v. erboven: de
   balk staat boven in het scherm, een tooltip die naar boven opent zou
   buiten beeld vallen. */
.ref-drawer-toggle .corpus-filter-tooltip {
    bottom: auto;
    top: calc(100% + 10px);
}
.ref-drawer-toggle .corpus-filter-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--navy);
}
.ref-drawer-toggle:hover .corpus-filter-tooltip,
.ref-drawer-toggle:focus-visible .corpus-filter-tooltip {
    opacity: 1;
}
/* In de kop rechts uitgelijnd in plaats van gecentreerd (19-10-2026): de
   laatste knop staat tegen de rand, en een gecentreerde tooltip stak er
   ook onzichtbaar (opacity 0) 10px voorbij -- op 320px breed scrolde de
   pagina daardoor opzij (WCAG 1.4.10). */
.header-nav > .ref-drawer-toggle .corpus-filter-tooltip {
    left: auto;
    right: 0;
    transform: none;
}
.header-nav > .ref-drawer-toggle .corpus-filter-tooltip::after {
    left: auto;
    right: 14px;
    transform: none;
}
/* Escape verbergt een tooltip zonder dat de focus of de muis hoeft te
   verplaatsen (WCAG 1.4.13); zie _tooltipsMetEscape in 01-app.js. */
.tooltip-weg > .corpus-filter-tooltip,
.tooltip-weg::after {
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (hover: none), (pointer: coarse) {
    .corpus-filter-tooltip {
        display: none;
    }
}

.ask-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.ask-controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid var(--border);
}

#ask-form > .stream-error-banner {
    /* Licht overlappend achter de kaartkop: zichtbaar als "vanachter" de
       vraagkaart, zonder dat de melding door de kaart heen zichtbaar wordt. */
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% - 5px);
    margin: 0;
    z-index: -1;
    box-shadow: none;
}

#ask-form > #draft-mode-pill,
#ask-form > .ask-input-row,
#ask-form > .ask-controls-row {
    position: relative;
    z-index: 1;
}

#stream-error-banner-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(42, 85, 160, 0.9);
    box-shadow: none;
}

#stream-error-banner-close:hover {
    border-color: transparent;
    color: rgba(31, 70, 139, 1);
    background: rgba(73, 128, 212, 0.14);
    box-shadow: none;
}

#stream-error-banner-close:focus-visible {
    border-color: transparent;
    outline: 2px solid rgba(73, 128, 212, 0.8);
    outline-offset: 2px;
}

.ask-controls-row .corpus-filter-toggle {
    width: 36px;
    height: 36px;
    border: none !important;
    border-radius: var(--r-sm) !important;
    align-self: auto;
}

/* Iets ruimer dan de 12px waarmee dit begon: de knoppen zijn icoon-only, dus
   het icoon is het enige waaraan je ze herkent. */
.ask-controls-row .corpus-filter-toggle svg {
    width: 16px;
    height: 16px;
}

/* Upload / indexing status — sits right of the juridisch profiel button so
   the user can always see where an uploaded document is, even if the
   Bronnen panel with the fuller doc list isn't open. */
.upload-progress-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 180px;
    min-width: 0;
    font-size: 0.76rem;
    color: var(--text-2);
}

.upload-progress-indicator[hidden] { display: none !important; }

.upload-progress-spinner {
    display: none;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--border-2);
    border-top-color: var(--blue-2);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.upload-progress-indicator--progress .upload-progress-spinner { display: inline-block; }

.upload-progress-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-indicator--success .upload-progress-text { color: var(--ok); }
.upload-progress-indicator--error .upload-progress-text   { color: var(--err); }
.upload-progress-indicator--warning .upload-progress-text { color: var(--warn); }

.ask-controls-row .persona-wrap {
    align-self: auto;
}

/* Send button lives in the controls row now, pushed to the far right so the
   question field above gets the full row width to itself. */
.ask-controls-row .ask-send-btn {
    margin-left: auto;
    width: 36px !important;
    height: 36px !important;
    align-self: center;
}

.ask-controls-row .ask-send-btn svg {
    width: 16px;
    height: 16px;
}

.ask-dossier-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: none;
    background: var(--blue-bg);
    color: var(--blue);
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}
.ask-dossier-chip:hover { background: rgba(201,138,76,0.16); }
.ask-dossier-chip--add {
    background: none;
    color: var(--text-3);
}
.ask-dossier-chip--add:hover { background: var(--border); color: var(--text); }

.ask-input-row textarea {
    flex: 1;
    resize: none;
    /* Matches the JS auto-resize cap (Math.min(scrollHeight, ASK_TEXTAREA_MAX_H))
       — the textarea grows upward (card is bottom-anchored) as text wraps, up
       to 63px (~3 lines at this font-size/line-height/padding), then scrolls
       internally instead of clipping silently. */
    overflow-y: auto;
    min-height: 26px;
    max-height: 63px;
    border: none;
    border-radius: var(--r-sm);
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text);
    /* Opaque surface prevents the warning card from bleeding through the
       top seam while still reading as one card (same color token). */
    background: var(--ask-card-surface, #ffffff);
    outline: none;
}

/* The field has no border/ring of its own — focusing it highlights the
   whole card instead (see .ask-bar-inner:focus-within below), not just
   the text field. */
.ask-input-row textarea:focus,
.ask-input-row textarea:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

.ask-send-btn {
    width: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--btn-r);
    color: var(--text-2);
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.ask-send-btn--loading {
    opacity: 0.55;
}

.ask-send-btn--stop {
    opacity: 1;
    background: var(--navy) !important;
    color: #fff !important;
}

.ask-controls-row .ask-send-btn.ask-send-btn--stop svg {
    width: 16px;
    height: 16px;
}

.ask-send-btn--stop:hover {
    background: #2A2F36 !important;
    transform: translateY(-1px);
}

/* ── Web sources attribution ──────────────────────────────── */

.web-sources {
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    /* Width comes from the shared measure rule near the top of this file. */
}

/* Een hoogtegrens met eigen scrollbalk: acht bronnen met een titel van twee
   regels vullen anders een telefoonscherm. Het paneel staat sinds 7 september
   in het scrollgebied en schuift dus met het antwoord mee, maar het mag ook op
   zijn eigen plek niet het hele beeld innemen. */
.web-sources-list {
    max-height: min(34vh, 300px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 820px) {
    .web-sources-list { max-height: min(26vh, 210px); }
}

.web-sources-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 5px;
}

.web-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.web-sources-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 26px;
    cursor: pointer;
    list-style: none;
    /* Geen position: sticky. Die stond hier om de kop bereikbaar te houden bij
       het scrollen, maar dat doel haalt hij niet: `.web-sources-list` is zijn
       eigen scrollgebied, dus de kop bewéégt niet als je binnen de lijst naar
       beneden gaat. Wat hij wél deed, is de kop losplakken van zijn paneel aan
       de bovenkant van het antwoordgebied -- en omdat hij zijn achtergrond van
       het paneel erfde, en dat paneel doorzichtig is, schoven de bronnen er
       zichtbaar onderdoor. Gemeld vanaf een telefoon op 7 september 2026, met
       de titel en de eerste bron over elkaar heen.

       Een dekkende achtergrond zou dat verbergen maar niet oplossen: de kop
       zou nog steeds als losse strook boven het antwoord blijven hangen
       terwijl zijn paneel al weg is gescrold. En dekkend kán hier niet
       kloppen, want de kaart is met opzet doorzichtig -- de pagina heeft een
       verloop. */
}

.web-sources-summary::-webkit-details-marker { display: none; }

.web-sources-summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 3px;
}

.web-sources-chevron {
    flex-shrink: 0;
    color: var(--text-3);
    transition: transform 0.18s ease;
}

.web-sources[open] .web-sources-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .web-sources-chevron { transition: none; }
}

.web-sources-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.76rem;
    line-height: 1.4;
    /* Zonder dit duwt een lange URL de flexregel breder dan de kaart en loopt
       de hostnaam ernaast uit beeld -- precies wat er op de telefoon gebeurde. */
    min-width: 0;
}

/* Titel bóven de host in plaats van ernaast.
   Naast elkaar vochten ze om dezelfde breedte: de titel brak over vijf regels
   en de host, die `nowrap` is, werd afgekapt. Onder elkaar heeft elk zijn eigen
   regel en past alles binnen de kaart. */
.web-sources-tekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Het merkteken van de bron: de eerste letter van de host, lokaal getekend.
   Een echt favicon zou een verzoek van de lezer naar die host betekenen, en
   daarmee weet die host dat deze lezer dit antwoord bekijkt -- een vreemd lek
   in een app die de vraag juist anonimiseert voordat zij naar het model gaat. */
.web-sources-merk {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: hsl(var(--merk-tint, 210) 45% 30%);
    background: hsl(var(--merk-tint, 210) 60% 92%);
    border: 1px solid hsl(var(--merk-tint, 210) 45% 82%);
}

[data-theme="dark"] .web-sources-merk {
    color: hsl(var(--merk-tint, 210) 55% 82%);
    background: hsl(var(--merk-tint, 210) 30% 24%);
    border-color: hsl(var(--merk-tint, 210) 30% 38%);
}

.web-sources-item a {
    /* Gelijk aan de vraag-echo en de herformulering; zie
       --reading-context-size op .answer-card. Stond hier niet, dus erfde hij de
       basismaat van de pagina en werd hij groter dan de tekst eromheen. */
    font-size: var(--reading-context-size, 0.8rem);
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Hooguit twee regels; de volledige URL staat in de tooltip en achter de
       link zelf. Een titel van honderdvijftig tekens is geen etiket meer. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.web-sources-item a:hover { color: var(--vf-orange); }

.web-sources-item a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.web-sources-host {
    font-size: 0.66rem;
    color: var(--text-3);
    /* Op een eigen regel onder de titel; `nowrap` mag hier omdat hij niet meer
       met de titel om dezelfde breedte vecht. Loopt hij toch uit, dan een
       beletselteken in plaats van uit de kaart lopen. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.web-sources-note {
    margin-top: 5px;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--text-3);
}

/* ── Zoekbereik menu ──────────────────────────────────────── */

/* The Zoekbereik button is icon-only, matching the other ask-bar controls.
   The selected level lives in its tooltip and aria-label instead. */

.persona-menu--scope {
    min-width: 268px;
    max-width: min(320px, calc(100vw - 24px));
    /* Twee groepen in één menu: op een korte viewport moet het menu zelf
       scrollen in plaats van onder de vouw te verdwijnen. */
    max-height: min(70vh, 460px);
    overflow-y: auto;
}

/* Kop boven een groep opties. Geen menuitem: puur een scheiding tussen de
   twee vragen die deze knop stelt — welke documenten, en hoe ver daarbuiten. */
.scope-group-label {
    padding: 5px 10px 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: normal;
    line-height: 1.35;
}

/* Ladder ligt vast zolang "alleen mijn uploads" aanstaat. Zichtbaar laten
   staan legt uit waarom er niets buiten de eigen stukken wordt gezocht;
   verbergen zou de vraag oproepen waar het zoekbereik gebleven is. */
.persona-option--muted {
    opacity: 0.45;
    cursor: not-allowed;
}

.persona-menu--scope-locked .persona-option--muted:hover {
    background: transparent !important;
}

.persona-menu--scope .persona-option {
    align-items: flex-start;
    padding-top: 7px;
    padding-bottom: 7px;
}

.scope-option-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    white-space: normal;
}

.scope-option-title {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
}

.scope-option-hint {
    font-size: 0.67rem;
    line-height: 1.4;
    color: var(--text-3);
}

.scope-option-hint a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Level 3 without consent: visible but unavailable, so the capability is
   discoverable rather than hidden. */
.persona-menu--scope .persona-option[disabled] {
    opacity: 1;
    cursor: not-allowed;
}

.persona-menu--scope .persona-option[disabled] .scope-option-title {
    color: var(--text-3);
}

.persona-menu--scope .persona-option[disabled] .persona-check {
    visibility: hidden;
}

/* Staat na de [disabled]-regels: bij een vergrendelde ladder moet ook niveau 3
   dimmen, anders is dat de enige regel die er nog beschikbaar uitziet. */
.persona-menu--scope-locked .persona-option[disabled] {
    opacity: 0.45;
}

/* ── Conceptmodus ─────────────────────────────────────────────────────────
   Een tekstveld kent geen opmaak, dus /draft kan niet cursief worden in de
   invoer zelf. Deze pil boven de balk doet wat de cursivering zou doen: laten
   zien dat er een functie wordt aangeroepen in plaats van een gewone vraag. */
.draft-mode-pill {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0 12px 2px;
    padding: 3px 9px 4px;
    border-radius: var(--r-sm);
    background: var(--blue-bg);
    border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
    font-size: 0.7rem;
    line-height: 1.4;
}

.draft-mode-pill[hidden] { display: none; }

.draft-mode-pill-cmd {
    font-family: Consolas, Menlo, Monaco, monospace;
    font-style: italic;
    font-weight: 700;
    color: var(--blue);
}

.draft-mode-pill-text { color: var(--text-3); }

/* De uitknop van de conceptmodus. De pil is de enige plek waar zichtbaar is dat
   de modus aanstaat, dus hij is ook de kortste weg eruit — zonder het menu. */
.draft-mode-pill-stop {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 24px, het raakdoel uit WCAG 2.5.8 (19-10-2026); was 17px. */
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.draft-mode-pill-stop:hover {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    color: var(--blue);
}

/* ── Moduskiezer (vraag / concept) ───────────────────────── */
/* Hergebruikt .persona-menu--scope; alleen de uitklaplijst met soorten stukken
   is eigen. Die staat als groep ónder "Concept opstellen" in plaats van als
   losse opties ertussen, zodat het onderscheid modus/soort in beeld blijft. */
/* Deze knop staat links in de balk. .persona-menu hangt zijn rechterrand aan de
   knop omdat de andere knoppen rechts zitten; hier zou het menu daardoor links
   buiten beeld uitlopen. */
.ask-mode-menu {
    left: 0;
    right: auto;
}

.ask-mode-draft-toggle .ask-mode-caret {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-3);
    transition: transform 0.14s;
}

.ask-mode-draft-toggle--open .ask-mode-caret { transform: rotate(90deg); }

.ask-mode-draft-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Ingesprongen en met een lijn: de soorten stukken zijn een verbijzondering
       van de modus erboven, geen derde modus ernaast. */
    margin: 2px 0 2px 12px;
    padding-left: 6px;
    border-left: 1.5px solid var(--border);
}

.ask-mode-draft-list[hidden] { display: none; }

.persona-menu--scope .ask-mode-draft-option { padding: 5px 8px !important; }

.ask-mode-draft-option .scope-option-title { font-size: 0.78rem; }

/* ── Direct antwoord ──────────────────────────────────────────────────────
   Deze modus slaat de hele pijplijn over: geen retrieval, geen bibliotheek,
   geen Judge. Het antwoord is dus ongefundeerd, en in een juridische app moet
   dat aan het antwoord te zien zijn. De melding is daarom onderdeel van het
   antwoord en geen tooltip: wie het antwoord kopieert, hoort het mee te nemen. */

.antwoord-waarschuwing {
    margin: 0 0 0.85em;
    padding: 0.55em 0.75em;
    font-size: 0.87rem;
    line-height: 1.45;
    color: var(--text-1);
    background: var(--surface-2);
    border-left: 3px solid var(--warn);
    border-radius: 0 6px 6px 0;
}

.answer-section--direct .direct-melding {
    margin: 0 0 0.85em;
    padding: 0.55em 0.75em;
    font-size: 0.87rem;
    line-height: 1.45;
    color: var(--text-2);
    background: var(--surface-2);
    border-left: 3px solid var(--blue-2);
    border-radius: 0 6px 6px 0;
}

/* ── Het zoekpaneel in de vraagbalk ─────────────────────────────────────
   Breder dan een gewoon menu, want er staan twee groepen in met uitleg per
   regel. Was een ladder van drie niveaus in een smal menu; de uitleg paste
   daar niet in en de gebruiker zag niet wat er aanstond. */
.persona-menu--zoekpaneel {
    min-width: 22rem;
    max-width: min(26rem, calc(100vw - 2rem));
}

/* Op een laptop hoeft dit paneel niet te scrollen.
   De algemene menuregel kapt af op min(52vh, 320px), maar dit paneel is 443 px
   hoog -- gemeten op 1440x800, 1440x900 en 1440x1080 moest het overal scrollen,
   ook op het hoogste scherm. Het is een keuzepaneel en geen lange lijst: wie
   moet scrollen om een vinkje te zien, ziet het niet.

   De 52vh blijft als ondergrens gelden voor lage vensters; alleen de vaste
   bovengrens gaat omhoog. */
@media (min-height: 700px) {
    .persona-menu--zoekpaneel {
        max-height: min(80vh, 560px);
    }
}

.zoekpaneel-titel {
    padding: 0.6rem 0.85rem 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Wat altijd meedoet en dus geen keuze is. Bewust geen vinkje: een
   schakelaar die niets schakelt is erger dan geen schakelaar. */
.zoekpaneel-vast,
.zoekpaneel-voet {
    margin: 0;
    padding: 0.35rem 0.85rem 0.5rem;
    font-size: 0.78rem;
    opacity: 0.72;
}

.zoekpaneel-voet {
    padding-top: 0.5rem;
}

/* Een vinkvakje in plaats van het vinkje-bij-de-actieve-regel van een
   keuzelijst: deze twee zijn onafhankelijk, en dat moet je kunnen zien
   zonder ze aan te klikken. */
.zoekpaneel-vinkje .zoekpaneel-vakje {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    border: 1.5px solid currentColor;
    border-radius: 0.25rem;
    opacity: 0.45;
}

.zoekpaneel-vinkje .zoekpaneel-vakje svg {
    opacity: 0;
}

.zoekpaneel-vinkje[aria-checked="true"] .zoekpaneel-vakje {
    opacity: 1;
}

.zoekpaneel-vinkje[aria-checked="true"] .zoekpaneel-vakje svg {
    opacity: 1;
}


/* ── Online geraadpleegde bronnen, onder het antwoord ───────────────────
   Ze staan ook in het bronnenpaneel, maar wie online laat zoeken heeft één
   specifieke vraag — waar komt dit vandaan — en die moet te beantwoorden zijn
   zonder eerst een paneel te openen. */
.externe-bronnen {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
    font-size: 0.82rem;
}

.externe-bronnen-kop {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.externe-bronnen-lijst {
    margin: 0;
    padding-left: 1.1rem;
}

.externe-bronnen-lijst li {
    margin: 0.2rem 0;
}

.externe-bronnen-host {
    opacity: 0.65;
    font-size: 0.9em;
}

/* ── Leeshoogte op de telefoon ────────────────────────────────────────
   De volledige-hoogte-opzet hierboven geldt alleen vanaf 821px; op een
   telefoon viel .answer-card terug op `calc(100dvh - 250px)`. Die 250px
   reserveerde meer dan de ask bar nodig heeft, waardoor er een leeg vlak
   tussen het antwoord en de invoerbalk bleef staan — precies de ruimte
   waarin je leest. Reserveer alleen de balk zelf.

   Gemeld met een schermafdruk op 3 september 2026: het antwoord brak
   halverwege een zin af terwijl daaronder een handbreed niets stond. */
@media (max-width: 820px) {
    .answer-card {
        min-height: calc(100dvh - var(--ask-bar-h) - 16px);
    }
}

/* Op een telefoon iets groter: 1rem is de maat waarop iOS niet inzoomt en
   waarop een lange casus zonder knijpen te lezen is. */
@media (max-width: 820px) {
    :root {
        --answer-font-size: 1rem;
        --answer-line-height: 1.65;
    }
}

/* Zonder sectielabel (kennisvraag, stappenvraag) lopen de blokken als één
   stuk door; de kopjes in de tekst dragen de structuur. */
.answer-section--zonder-label + .answer-section--zonder-label { margin-top: 0.2em; }

/* Het voorstel van "Verbeter mijn vraag": een rustige regel boven de knoppen
   in de vraagkaart, met 'Gebruik' en een kruisje. */
.ask-verbeter-voorstel {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 10px 6px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--blue-bg);
    border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text);
}
.ask-verbeter-voorstel[hidden] { display: none; }
.ask-verbeter-tekst { flex: 1; min-width: 0; }
.ask-verbeter-knoppen { display: inline-flex; gap: 4px; flex-shrink: 0; }
.ask-verbeter-knop {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--blue);
    background: var(--ask-card-surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
    border-radius: 999px;
    padding: 2px 10px;
    cursor: pointer;
}
.ask-verbeter-knop--stil { color: var(--text-3); border-color: var(--border); }
.ask-verbeter-btn {
    flex-shrink: 0;
    width: 32px; height: 32px;
    margin-bottom: 2px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: none;
    color: var(--text-3);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.ask-verbeter-btn:hover { color: var(--blue); background: var(--blue-bg); }
.ask-verbeter-btn.is-bezig { opacity: 0.55; pointer-events: none; }

/* De kruimel boven het antwoord: dossier › gesprek, met de andere gesprekken
   van het dossier in een uitklaplijst. Klein en grijs; het antwoord is het
   werk. Tokens, geen vaste kleuren. */
.gesprek-kruimel {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: min(100%, var(--answer-measure));
    margin: 4px auto 0;
    padding: 0 clamp(10px, 1.4vw, 24px);
    font-size: 0.78rem;
    color: var(--text-3);
    position: relative;
}
.kruimel-dossier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-2);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.kruimel-dossier:hover { color: var(--blue); border-color: var(--blue); }
.kruimel-sep { color: var(--text-3); }
.kruimel-keuze { position: relative; }
.kruimel-huidig {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--text);
    font-weight: 600;
}
.kruimel-huidig::-webkit-details-marker { display: none; }
.kruimel-huidig:hover { background: var(--surface-2); }
.kruimel-pijl { font-size: 0.7em; color: var(--text-3); }
.kruimel-lijst {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 260px;
    max-width: min(90vw, 420px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--menu-surface, #ffffff);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
}
.kruimel-lijst li a {
    display: block;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kruimel-lijst li a:hover { background: var(--surface-2); }
.kruimel-lijst li a.is-huidig { color: var(--blue); font-weight: 700; }
.kruimel-nieuw a { color: var(--blue); border-top: 1px solid var(--border); margin-top: 4px; }

/* Het procesverslag boven het antwoord: één regel, ingeklapt; open een
   lijst met vinkjes, toelichting per stap, bronchips en de tijd per stap. */
.answer-verslag {
    width: min(100%, var(--answer-measure));
    margin: 0 auto 8px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 0.8rem;
    color: var(--text-2);
}
.answer-verslag-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text-2);
}
/* Ingeklapt alleen een lichte regel (19-10-2026): "Verwerkt in 19 s · 4
   stappen" stond als eigen kader boven elk antwoord, en dat is de eerste
   plek waar het oog landt. Uitgeklapt houdt het zijn vlak. */
.answer-verslag:not([open]) {
    padding: 2px 0;
    border-color: transparent;
    background: none;
}
.answer-verslag:not([open]) .answer-verslag-kop {
    justify-content: flex-start;
    gap: 6px;
    font-weight: 500;
    color: var(--text-3);
}
.answer-verslag:not([open]) .answer-verslag-kop:hover { color: var(--text-2); }
.answer-verslag-kop::-webkit-details-marker { display: none; }
.answer-verslag[open] .answer-verslag-pijl { transform: rotate(180deg); }
.answer-verslag-pijl { transition: transform 0.15s; color: var(--text-3); }
.answer-verslag-lijst {
    list-style: none;
    margin: 8px 0 2px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.verslag-stap {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}
.verslag-vink {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--text-3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    color: var(--text-2);
}
.verslag-inhoud { display: grid; gap: 2px; min-width: 0; }
.verslag-naam { font-weight: 600; color: var(--text); }
.verslag-detail { color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.verslag-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.verslag-chip {
    font-size: 0.72rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
}
.verslag-ms { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; }
.verslag-gezocht {
    display: block;
    padding-left: 10px;
    border-left: 2px solid var(--border);
    color: var(--text-3);
    font-style: italic;
    line-height: 1.4;
    margin-top: 2px;
}
.verslag-grens { color: var(--text-3); font-size: 0.74rem; margin-top: 2px; }
.verslag-tegen {
    display: block;
    padding-left: 10px;
    border-left: 2px solid var(--warn);
    color: var(--text-2);
    line-height: 1.4;
    margin-top: 2px;
}
.verslag-tegen-vp { color: var(--text-3); font-size: 0.72rem; }

/* Onder de vraag: potlood en tijdstip, klein en grijs, rechts uitgelijnd. */
.conv-turn-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 2px 0 6px;
    font-size: 0.72rem;
    color: var(--text-3);
}
.conv-turn-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 0;
}
.conv-turn-edit:hover { color: var(--blue); border-color: var(--border); background: var(--surface-2); }
.conv-turn-kopieer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid transparent; background: none; color: var(--text-3); cursor: pointer; padding: 0;
}
.conv-turn-kopieer:hover { color: var(--blue); border-color: var(--border); background: var(--surface-2); }
.conv-turn-tijd[hidden] { display: none; }

/* '+ Nieuw gesprek' in de kop: alleen op een telefoon, in de stijl van de
   bronnenknop ernaast. */
.header-nav > .nieuw-gesprek-toggle { display: none !important; text-decoration: none; }
@media (max-width: 820px) {
    .header-nav > .nieuw-gesprek-toggle { display: inline-flex !important; }
}

/* De toast: onderin, gecentreerd, boven de vraagbalk; komt en gaat met een
   fade. Tokens, geen vaste kleuren. */
.vera-toast {
    position: fixed;
    left: 50%;
    bottom: 132px;
    transform: translateX(-50%) translateY(6px);
    z-index: 600;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--bg);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s, transform 0.18s;
}
.vera-toast--zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Afzender boven het antwoord: merkje en naam, klein en grijs. */
/* Sinds 19-10-2026 een h2 (voor schermlezers "Antwoord: VeraNex"): zo hangen
   de kopjes in een antwoord onder een eigen kop en is elk antwoord met de
   koppenlijst te vinden (WCAG 1.3.1; axe meldde een sprong van h1 naar h3).
   In beeld verandert er niets; vandaar de expliciete maat en regelhoogte, en
   ".card h2.conv-turn-afzender": anders wint ".card h2" uit 10-layout-shell.css
   (groot en donker). */
.conv-turn-afzender,
.card h2.conv-turn-afzender {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    font-family: inherit;
    line-height: 1.4;
    text-transform: none;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-3);
}
.conv-turn-afzender-merk { width: 16px; height: 16px; object-fit: contain; }

/* ── Toegankelijkheid van de toevoegingen van 20 september 2026 ─────────
   Aanraakdoelen van minstens 24×24 (WCAG 2.2, 2.5.8) voor de kleine knoppen,
   één zichtbare focusring voor alles wat nieuw is, en de voetregel op een
   leesbare maat. */
.ref-toggle, .ref-action, .bronnen-paneel-knop, .kruimel-huidig, .ask-verbeter-knop,
.conv-turn-edit, .answer-verslag-kop {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}
.ref-toggle { padding: 0 6px; }
.bronnen-paneel-knop { padding: 0 8px; }
.ref-toggle:focus-visible, .ref-action:focus-visible, .ref-zoek:focus-visible,
.bronnen-paneel-knop:focus-visible, .bronchip:focus-visible, .kruimel-huidig:focus-visible,
.kruimel-dossier:focus-visible, .ask-verbeter-btn:focus-visible, .ask-verbeter-knop:focus-visible,
.conv-turn-edit:focus-visible, .answer-opnieuw-btn:focus-visible, .answer-verslag-kop:focus-visible,
.bronnen-samenvatting:focus-visible, .concept-download:focus-visible, .conv-filter-chip:focus-visible,
.geschiedenis-toggle:focus-visible, .nieuw-gesprek-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.ask-bar-voorbehoud { font-size: 0.72rem; }
/* De toast in beide thema's leesbaar: tekstkleur op achtergrondkleur. */
.vera-toast { background: var(--text); color: var(--bg); }
@media (prefers-reduced-motion: reduce) {
    .vera-toast, .scroll-down-btn, .bronchip, .answer-verslag-pijl { transition: none; }
    .bronchip--flash, .ref-item--flash { animation: none; }
}

/* ── Startscherm en vraagbalk naar de lat van de concurrent (21-09-2026) ──── */

/* De begroeting in de serif van de citaten, groter; de kaart blijft de kaart. */
.welcome-card-inner { gap: 8px; padding: 18px 16px 14px; }
.welcome-card-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.welcome-card-subtitle {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.05rem;
    color: var(--text);
}
/* 'Verder met': rijen zoals in de lade (icoon, naam, tijd rechts). */
.welcome-verder { width: 100%; max-width: 30rem; margin-top: 6px; text-align: left; }
.welcome-verder-kop {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-3);
    padding: 4px 8px 2px;
}
.welcome-verder-lijst { list-style: none; margin: 0; padding: 0; }
.welcome-verder-rij {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 0.86rem;
}
.welcome-verder-rij svg { color: var(--text-3); flex-shrink: 0; }
.welcome-verder-rij:hover { background: rgba(255,255,255,0.7); }
.welcome-verder-rij:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.welcome-verder-naam { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-verder-tijd { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; }
/* De oude 'Pak draad weer op' wijkt voor de lijst. */
.welcome-resume { display: none !important; }

/* De verzendknop grijs zolang er niets te versturen is. */
.ask-send-btn.ask-send-btn--leeg {
    background: var(--surface-2) !important;
    color: var(--text-3) !important;
    box-shadow: none !important;
}
.ask-send-btn.ask-send-btn--leeg:hover { background: var(--bg) !important; }

/* Schakelaars voor 'ook buiten de app zoeken' (waren vinkvakjes): rechts in
   de rij, zoals op een telefoon gebruikelijk. Zelfde aria-checked, ander
   uiterlijk. */
.zoekpaneel-vinkje .zoekpaneel-schakelaar {
    order: 2;
    margin-left: auto;
    margin-right: 0;
    width: 34px;
    height: 20px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-3) 35%, var(--surface-2));
    opacity: 1;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s;
}
.zoekpaneel-vinkje .zoekpaneel-schakelaar::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.15s;
}
.zoekpaneel-vinkje .zoekpaneel-schakelaar svg { display: none; }
.zoekpaneel-vinkje[aria-checked="true"] .zoekpaneel-schakelaar { background: var(--blue); }
.zoekpaneel-vinkje[aria-checked="true"] .zoekpaneel-schakelaar::after { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) {
    .zoekpaneel-vinkje .zoekpaneel-schakelaar, .zoekpaneel-vinkje .zoekpaneel-schakelaar::after { transition: none; }
}

/* De keuzemenu's van de vraagbalk op een telefoon: als onderste blad boven
   de héle balk. Ze hingen aan de knoppenrij en liepen over het invoerveld
   heen (gemeten 20-09-2026: 'Breder zoeken duurt langer.' stond in het veld). */
@media (max-width: 820px) {
    .ask-bar-inner .persona-menu {
        position: fixed;
        left: var(--ask-rand-mobiel, 8px);
        right: var(--ask-rand-mobiel, 8px);
        bottom: calc(var(--ask-bar-h, 180px) + 8px);
        top: auto;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--ask-bar-h, 180px) - 72px);
        min-width: 0;
        background: var(--ask-card-surface, #ffffff); /* dekkend: de welkomstkaart scheen erdoorheen */
    }
}

/* ── Dossierkaart: wat VeraNex in het stuk las (21-09-2026) ───────────── */
.answer-section--dossierkaart,
.dossierkaart-live .answer-section--dossierkaart {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--vf-orange) 45%, transparent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--surface-2);
    width: min(100%, var(--answer-measure));
    margin: 0 auto 8px;
    font-size: 0.8rem;
    color: var(--text-2);
}
.answer-section--dossierkaart .answer-verslag-kop { color: var(--text-2); }
.answer-section--dossierkaart .dk-regel { display: inline; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.dossierkaart-live { margin-top: 8px; }
.dk-body { margin-top: 6px; }
.dk-blok { margin: 4px 0; }
.dk-kop { cursor: pointer; font-size: 0.88rem; font-weight: 600; }
.dk-n { font-weight: 400; color: var(--text-3); font-size: 0.8rem; }
.dk-lijst { margin: 4px 0 6px; padding-left: 18px; font-size: 0.86rem; line-height: 1.45; }
.dk-lijst li { margin: 2px 0; }
.dk-vp { color: var(--text-3); font-size: 0.8rem; }
.dk-tijd { font-variant-numeric: tabular-nums; font-weight: 600; }
.dk-soort { text-transform: capitalize; font-weight: 600; }

/* Moduskeuze na een upload: boven de vraagbalk. */
.dossier-modus-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.dossier-modus-vraag { font-size: 0.82rem; color: var(--text-3); margin-right: 2px; }

/* ── Documentkaart onder een concept (22-09-2026) ─────────────────────── */
/* Container query i.p.v. media query: bij smal scherm bleek de kaart zelf
   vaak smaller dan de viewport (zijpaneel, ingebed venster), waardoor de
   bestandsnaam per letter afbrak in plaats van dat de knoppenrij zakte. */
.answer-section--concept { container-type: inline-size; }
.concept-kaart {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
}
.concept-kaart-ico {
    position: relative; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.concept-kaart-w {
    position: absolute; right: 5px; bottom: 4px;
    font-size: 0.6rem; font-weight: 800; color: #fff; background: #2b579a;
    border-radius: 3px; padding: 0 3px; line-height: 1.3;
}
.context-chip .concept-kaart-w { position: static; }
.concept-kaart-body { flex: 1 1 auto; min-width: 0; }
.concept-kaart-naam { font-weight: 600; color: var(--text); overflow-wrap: anywhere; font-size: 0.88rem; }
.concept-kaart-sub { font-size: 0.78rem; color: var(--text-3); }
.concept-kaart-acties { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.concept-kaart-knop {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 32px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
    font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.concept-kaart-knop:hover { background: var(--surface-2); }
/* Voorbeeld had een omgekeerde primaire stijl (--text op --bg). In dark mode
   werd dat een bijna witte pil naast de neutrale Download-knop; beide knoppen
   zijn nu dezelfde .concept-kaart-knop. */
.concept-kaart-meer {
    width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border-2);
    background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 1rem; line-height: 1;
}
.concept-kaart-meer-wrap { position: relative; }
.concept-kaart-menu { top: calc(100% + 6px); bottom: auto; right: 0; left: auto; }
.concept-kaart-menu[hidden] { display: none; }
/* Verwijderen leest als de twee regels erboven zolang het er hetzelfde uitziet,
   en dit is de enige die niet terug te draaien is. */
.concept-kaart-menu .is-gevaarlijk { color: var(--err); }
.concept-kaart-menu .is-gevaarlijk:hover { background: var(--err-bg); }
@container (max-width: 480px) {
    .concept-kaart { flex-wrap: wrap; }
    .concept-kaart-acties { width: 100%; justify-content: flex-end; }
}

/* ── Contextchips boven de vraagbalk ──────────────────────────────────── */
/* Geen randlijn: dezelfde subtiele, egale ondergrond als .ask-dossier-chip
   elders in de balk, in plaats van een bordered pil die niet bij de rest
   van de app past. */
.context-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.context-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 4px 3px 9px; border-radius: 999px;
    border: none; background: var(--surface-2); color: var(--text-2); font-size: 0.8rem;
    max-width: 100%;
}
.context-chip-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 24x24 (WCAG 2.5.8, target size minimum) i.p.v. 22x22; hetzelfde
   prullenbak-icoon én dezelfde opmaak als .conv-item-del in de
   gespreksgeschiedenis (rode hover, vierkante hoeken, geen randlijn) --
   één verwijder-stijl door de hele app. */
.context-chip-weg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: none !important; border: none !important;
    color: var(--text-3) !important; cursor: pointer; padding: 0 !important;
    border-radius: 3px !important; box-shadow: none !important;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}
.context-chip-weg:hover { color: var(--err) !important; background: var(--err-bg) !important; }
.context-chip-weg:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Bestandsicoon per type: Word- en PDF-merkkleur, vast per thema (zie
   .concept-kaart-w) -- alleen zo blijft blauw/rood herkenbaar in dark mode.
   --overig is de neutrale kleur voor elk ander type (txt, xml, ...) -- als
   eigen klasse i.p.v. een kleur op de kale .context-chip-icon/.doc-icon,
   want anders wint die op gelijke specificiteit alsnog van --word/--pdf
   zodra hij later in de cascade laadt (zie .doc-icon in 90-dark-theme.css,
   dat ná dit bestand laadt -- exact dat gebeurde hier). */
.context-chip-icon--word { color: #2b579a; }
.context-chip-icon--pdf { color: #c0392b; }
.context-chip-icon--overig { color: var(--text-3); }