/* Auto-split from styles.css lines 6341-8665 */

@media (forced-colors: active) {
    .answer-story-scroll .conv-turn-q-text {
        border: 2px solid !important;
        forced-color-adjust: none;
    }
    
    .answer-story-scroll .conv-turn-answer {
        border: 1px solid !important;
        forced-color-adjust: none;
    }
    
    .citation-ref {
        text-decoration: underline !important;
        forced-color-adjust: none;
    }
}

/* Focus visible for keyboard users */
:focus-visible {
    outline: 2px solid var(--vf-orange);
    outline-offset: 2px;
}

/* Skip link for keyboard navigation */
.skip-to-latest {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--vf-orange);
    color: white;
    padding: 8px 16px;
    z-index: 1000;
    transition: top 0.3s ease;
}

.skip-to-latest:focus {
    top: 8px;
}

/* --- Phase 1: Keyboard Navigation --- */

/* Geen vlak op de hele beurt zodra iets erin focus krijgt (22-09-2026): een
   klik op een inklapbaar kopje in de dossierkaart kleurde het hele antwoord
   koper. De focusring op het element zelf (:focus-visible) is genoeg. */
.answer-story-scroll .conv-turn:focus-within {
    background: transparent;
}

/* Tab order for conversation elements */
.answer-story-scroll .conv-turn {
    outline: none;
}

.answer-story-scroll .conv-turn:focus-visible {
    outline: 2px solid var(--vf-orange);
    outline-offset: -2px;
}

/* --- Legal UX Pro Tips Implementation --- */

/* Vet is vet, niet oranje (22-09-2026): met elke naam, datum en tegen-
   stelling in koper las het antwoord als één oranje vlak. Het accent zit in
   de linkerrand van de blokken en de artikelchips, niet in de lopende tekst. */
.answer-story-scroll .conv-turn-answer .highlight-emphasis {
    background: var(--surface-2);
    padding: 0 4px;
    border-radius: 2px;
    color: var(--text);
}

.answer-story-scroll .conv-turn-answer strong,
.answer-story-scroll .conv-turn-answer b {
    color: var(--text);
    font-weight: 600;
}

/* Pro Tip 3: Precision Matters - Show exact source references */
.source-reference {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(201, 138, 76, 0.05);
    border-radius: var(--r-sm);
    margin: 12px 0;
    font-size: 0.8rem;
}

.source-reference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.source-reference-title {
    font-weight: 600;
    color: var(--text);
}

.source-reference-url {
    font-size: 0.75rem;
    color: var(--text-3);
    word-break: break-all;
}

.source-reference-meta {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-3);
}

.source-reference-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.source-reference-meta svg {
    width: 12px;
    height: 12px;
}

/* Pro Tip 5: Mobile Considerations */
@media (max-width: 768px) {
    /* Adjust typographic scale for mobile */
    .answer-story-scroll .conv-turn-answer h1 {
        font-size: 1.2rem;
    }
    
    .answer-story-scroll .conv-turn-answer h2 {
        font-size: 1rem;
    }
    
    .answer-story-scroll .conv-turn-answer h3:not(.answer-section-label) {
        font-size: 0.9rem;
    }
    
    /* Make timeline more subtle on mobile */
    .answer-story-scroll::before {
        left: 4px;
        width: 1px;
    }
    
    .answer-story-scroll .conv-turn::before {
        left: -14px;
        width: 10px;
        height: 10px;
    }
    
    /* Adjust spacing for touch targets */
    .answer-story-scroll .conv-turn-answer {
        padding: 10px 12px;
    }
    
    .conversation-context-summary {
        flex-direction: column;
        gap: 8px;
    }
}

/* Additional styles for JavaScript features */

/* Just-scrolled highlight animation */
@keyframes justScrolledHighlight {
    0% { background: rgba(201, 138, 76, 0.2); }
    100% { background: transparent; }
}

.answer-story-scroll .conv-turn--just-scrolled {
    animation: justScrolledHighlight 2s ease-out forwards;
}

/* Reference item active state */
.ref-item.active {
    background: rgba(201, 138, 76, 0.12);
    border-left: 3px solid var(--vf-orange);
}

/* Timeline indicator animation */
.answer-story-scroll .conv-turn::before {
    transition: all 0.2s ease;
}

/* ===================================================================
   End of Phase 1 & 2 Optimizations
   =================================================================== */

/* ── Conversation sidebar (left column) ──────────────────── */

/* De hele zijbalk scrollde, dus het dossierkaartje, het zoekveld en de knop
   voor een nieuw gesprek schoven mee weg zodra je door je gesprekken bladerde.
   Die drie horen te blijven staan: het zijn de bediening, niet de inhoud.
   Alleen .conv-list scrollt nu. */
.conv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 76px);
    overflow: hidden;
}

.conv-sidebar-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 0;
    margin-top: 2px;
    border-top: 1px solid var(--border);
    border-bottom: none;
}
.conv-sidebar-top > .conv-new-btn { flex: 1 1 auto; min-width: 0; }
.conv-sidebar-top .conv-filters { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; }
.conv-sidebar-top .conv-filter-chip { font-weight: 600; }
/* Het periodemenu hangt aan de rechterrand van de chip, anders steekt het
   buiten de zijbalk (overflow: hidden) en lijkt het onder het antwoord te
   liggen; de zijbalk zelf boven de antwoordkolom in de stapelvolgorde. */
.conv-sidebar-top .conv-filter-menu { left: auto; right: 0; }
.conv-sidebar { z-index: 20; }

/* ── Dossier info card (left sidebar) ──────────────────────── */
.dossier-sidebar-card {
    position: relative;
    margin: 0 0 6px;
    padding: 11px 13px 10px;
    /* Koper op 8% (--blue-bg) viel weg: de zijbalk heeft zelf geen achtergrond,
       dus deze kaart staat direct op --bg en die tint verdween daarin.
       Alleen de rand was nog te zien.

       Nu dezelfde aanpak als de vraagkaart: het kaartoppervlak plus een zachte
       schaduw. Dat leest als een kaart die op de pagina ligt, in plaats van als
       een lijntje eromheen — en het werkt zonder een kleurvlak dat met het merk
       concurreert. De koperen rand blijft, want die koppelt hem aan het
       dossierthema. */
    background: var(--surface);
    /* Volle koper en geen tint. Uitgerekend: koper op 28% haalt 1,14:1 tegen de
       pagina, en dat is niet te zien; --blue vol haalt 4,84:1. WCAG 1.4.11
       vraagt 3:1 voor de rand van een onderdeel dat je moet kunnen aanwijzen.
       Dit is de merkkoper die al op leesbaarheid is getoetst, dus hij oogt
       bedoeld en niet schreeuwerig. */
    border: 1px solid var(--blue);
    box-shadow: var(--shadow-sm);
    border-radius: var(--r-sm);
    font-size: 0.83rem;
    /* Geen `transform` meer. Die stond hier alleen om de bump te dragen, en
       `translateY(0)` is niet `none`: het maakte van deze kaart een eigen
       stacking context, en dat is precies waar het keuzemenu hieronder achter
       de zoekbalk aan verdween. Met de bump is ook die oorzaak weg. */
    transition: box-shadow 0.18s ease;
}

/* Het keuzemenu achter de +-knop verdween achter de zoekbalk: .conv-search-row
   staat later in de DOM en is ook gepositioneerd, dus die won. De kaart tilt
   zichzelf daarom op zodra haar menu open staat. Alleen dan, want een kaart die
   permanent boven de zoekbalk hangt vangt kliks op die daar niet horen.

   De oorspronkelijke oorzaak was scherper: `transform: translateY(0)` hierboven
   maakte van de kaart een eigen stacking context, waardoor de z-index van het
   menu alleen bínnen de kaart gold. Die transform is met de hover-animatie
   verdwenen. Deze regel blijft staan omdat hij het geval zelf afdekt en niet
   alleen die oorzaak. */
.dossier-sidebar-card:has(.persona-menu--open) {
    z-index: 40;
}

/* Hier stond een 'bump': de kaart wipte bij hover even op en terug. Eruit op
   verzoek. De kaart hoort wel te reageren -- anders lijkt hij niet aanklikbaar
   -- maar dat kan zonder beweging: alleen de schaduw wordt dieper. */
@media (hover: hover) and (pointer: fine) {
    .dossier-sidebar-card:hover {
        box-shadow: var(--shadow-md);
    }
}
.dossier-sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.dossier-sidebar-icon {
    flex-shrink: 0;
    color: var(--blue);
    opacity: 0.85;
}
.dossier-sidebar-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.80rem;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dossier-sidebar-name:hover { color: var(--blue); text-decoration: underline; }
.dossier-sidebar-status {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--r);
    text-transform: lowercase;
    letter-spacing: 0.01em;
    background: rgba(42, 47, 54, 0.08);
    color: var(--text-2);
}
.dossier-sidebar-status--actief  { background: rgba(31,122,82,0.12); color: var(--ok); }
.dossier-sidebar-status--gesloten { background: rgba(42,47,54,0.10); color: var(--text-3); }
.dossier-sidebar-status--wacht   { background: rgba(201,138,76,0.14); color: var(--blue); }

/* Borderless, hover-revealed — lets the user switch to a different dossier
   without first having to unlink/delete this one. */
.dossier-sidebar-switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--btn-r);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.dossier-sidebar-card:hover .dossier-sidebar-switch-btn,
.dossier-sidebar-switch-btn:focus-visible,
.dossier-sidebar-switch-btn[aria-expanded="true"] { opacity: 1; }
.dossier-sidebar-switch-btn:hover { background: var(--blue-bg); color: var(--blue); }

/* Borderless, hover-revealed — only shown on the populated card, and only
   when the user hovers it, since there's nothing to delete otherwise. */
.dossier-sidebar-trash-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--btn-r);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.dossier-sidebar-card:hover .dossier-sidebar-trash-btn,
.dossier-sidebar-trash-btn:focus-visible { opacity: 1; }
.dossier-sidebar-trash-btn:hover { background: var(--err-bg); color: var(--err); }

.dossier-sidebar-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
}
.dossier-sidebar-meta-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.5;
}
.dossier-sidebar-meta-row dt {
    flex-shrink: 0;
    width: 28px;
    font-weight: 600;
    color: var(--text-3);
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dossier-sidebar-meta-row dd {
    margin: 0;
    color: var(--text-2);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* Empty state — shown instead of the card above when the conversation has
   no dossier yet, replacing the "+ Dossier" button that used to live in
   the ask bar. */
.dossier-sidebar-card--empty {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Zelfde oppervlak en schaduw als de gevulde variant hierboven: een kaart
       die op de pagina ligt. Stond op `transparent`, en omdat de zijbalk zelf
       geen achtergrond heeft was er dus alleen een streepjeslijn te zien — geen
       kaart maar een omtrek. De streepjesrand blijft: die zegt "hier hoort nog
       iets te komen", en dat is precies wat deze lege toestand is. */
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px dashed var(--border-2);
}

.dossier-sidebar-empty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dossier-sidebar-empty-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dossier-sidebar-empty-text svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Icon-only ghost button — same visual language as .corpus-filter-toggle
   (transparent at rest, no border, soft copper tint on hover), just its
   own class since this button lives in a sidebar card, not the ask bar. */
.dossier-sidebar-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--btn-r);
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.dossier-sidebar-add-btn:hover { background: var(--blue-bg); color: var(--blue); }

@media (hover: none), (pointer: coarse) {
    .dossier-sidebar-switch-btn,
    .dossier-sidebar-trash-btn {
        opacity: 1;
    }
}

.dossier-sidebar-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.dossier-sidebar-hint-text {
    flex: 1;
    min-width: 0;
    font-size: 0.70rem;
    line-height: 1.45;
    color: var(--text-3);
}

.dossier-sidebar-hint .remove-cross {
    /* .remove-cross defaults to opacity:0, revealed on row-hover elsewhere
       in the app (e.g. document list items) — this is a standalone tip,
       not a hover-revealed row action, so it must stay visible at rest. */
    opacity: 1 !important;
    flex-shrink: 0;
    margin-top: 1px;
}

/* This wrap sits near the top of a narrow (~210px) sidebar, unlike the ask
   bar's version of this menu. The shared .persona-menu opens upward and
   anchors to the small toggle button's own width, which would run off the
   top of the viewport here and risks overflowing the narrow sidebar's left
   edge. Anchor to the card itself instead (position:static on the wrap
   hands positioning up to the card, which spans the sidebar's safe width),
   full width either way -- the up/down direction itself is set per
   breakpoint below. */
.dossier-sidebar-add-wrap {
    position: static;
}
.dossier-sidebar-add-wrap .persona-menu {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
}
/* Boven de 820px zit deze kaart bovenaan de zijbalk (open downward, "loopt
   over de bovenrand" was hier het probleem, zie hierboven). Op smal scherm
   staat .dossier-sidebar-card op order:5 (zie .conv-sidebar hieronder) en
   schuift de hele kaart naar het eind van de lade -- daar zakte het menu
   juist van het scherm af naar onderen. Zelfde kaart, andere richting per
   scherm. */
@media (min-width: 821px) {
    .dossier-sidebar-add-wrap .persona-menu {
        bottom: auto;
        top: calc(100% + 6px);
    }
}
@media (max-width: 820px) {
    .dossier-sidebar-add-wrap .persona-menu {
        top: auto;
        bottom: calc(100% + 6px);
    }
}

.conv-new-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--r);
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.13s, color 0.13s;
}
.conv-new-btn:hover { background: var(--blue-bg); color: var(--blue); }
.conv-new-btn svg { flex-shrink: 0; }

.conv-new-btn--cta {
    justify-content: center;
    gap: 6px !important;
    min-height: 30px !important;
    padding: 6px 12px !important;
    /* Stond op `color-mix(--surface 84%, --text-2 16%)`. --surface is wit op 90%
       doorzichtigheid, dus die menging landde vlak naast de paginakleur: de knop
       had wel een vorm maar geen vlak, en de zijbalk las als één grijze plaat.

       Nu het kaartoppervlak plus een zachte schaduw — dezelfde aanpak die de
       dossierkaart eronder al gebruikt en die daar om precies dezelfde reden is
       gekozen. De rand is de accentkleur op lage sterkte, zodat de knop als
       eerste actie herkenbaar is zonder een gekleurd vlak te worden. */
    border: 1px solid color-mix(in srgb, var(--vf-orange) 28%, var(--border-2));
    border-radius: 999px !important;
    background: var(--surface);
    color: var(--text-2);
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-sm);
}

.conv-new-btn--cta:hover {
    background: color-mix(in srgb, var(--surface) 88%, var(--vf-orange) 12%);
    color: var(--text);
    border-color: color-mix(in srgb, var(--vf-orange) 46%, var(--border-2));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.conv-new-btn--cta:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--vf-orange) 70%, white);
    outline-offset: 2px;
}

.conv-new-btn--cta .conv-new-plus {
    display: inline;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    border: none;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 800;
}

.menu-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    gap: 0;
    justify-content: center;
    /* .conv-export-btn (het meest gebruikt als <a>) heeft zelf geen
       border/background-reset -- onzichtbaar op een link, maar de
       feedbackknop is een <button> en kreeg daardoor de kale
       browser-opmaak erbovenop. appearance:auto (het element-default)
       tekent zijn eigen rand/vlak ONGEACHT border/background hieronder --
       border:none alleen loste niets op, appearance:none moest erbij. */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

.menu-icon-btn .conv-new-label,
.menu-icon-btn .conv-export-label {
    display: none;
}

/* Keep CTA text visible even when generic icon-button label rules apply. */
.conv-new-btn.conv-new-btn--cta .conv-new-label {
    display: inline !important;
}

.clear-history-btn,
.citation-first-toggle {
    position: relative;
}

.menu-icon-btn::after,
.clear-history-btn::after,
.citation-first-toggle::after {
    content: attr(aria-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(3px);
    padding: 5px 8px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(42, 47, 54, 0.18);
    background: rgba(0, 17, 23, 0.92);
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 250;
}

.menu-icon-btn[data-tip-side="left"]::after,
.clear-history-btn[data-tip-side="left"]::after,
.citation-first-toggle[data-tip-side="left"]::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(3px);
}

.menu-icon-btn[data-tip-side="right"]::after,
.clear-history-btn[data-tip-side="right"]::after,
.citation-first-toggle[data-tip-side="right"]::after {
    left: 0;
    transform: translateX(0) translateY(3px);
}

.menu-icon-btn::before,
.clear-history-btn::before,
.citation-first-toggle::before {
    pointer-events: none;
}

.menu-icon-btn:hover::after,
.menu-icon-btn:focus-visible::after,
.clear-history-btn:hover::after,
.clear-history-btn:focus-visible::after,
.citation-first-toggle:hover::after,
.citation-first-toggle:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.menu-icon-btn[data-tip-side="left"]:hover::after,
.menu-icon-btn[data-tip-side="left"]:focus-visible::after,
.clear-history-btn[data-tip-side="left"]:hover::after,
.clear-history-btn[data-tip-side="left"]:focus-visible::after,
.citation-first-toggle[data-tip-side="left"]:hover::after,
.citation-first-toggle[data-tip-side="left"]:focus-visible::after,
.menu-icon-btn[data-tip-side="right"]:hover::after,
.menu-icon-btn[data-tip-side="right"]:focus-visible::after,
.clear-history-btn[data-tip-side="right"]:hover::after,
.clear-history-btn[data-tip-side="right"]:focus-visible::after,
.citation-first-toggle[data-tip-side="right"]:hover::after,
.citation-first-toggle[data-tip-side="right"]:focus-visible::after {
    transform: translateX(0) translateY(0);
}

@media (hover: none), (pointer: coarse) {
    .menu-icon-btn::after,
    .clear-history-btn::after,
    .citation-first-toggle::after {
        display: none;
    }
}

.conv-search-wrap { padding: 6px 0 4px; }
.conv-search-row {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}
.conv-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.conv-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    line-height: 0;
    pointer-events: none;
}
.conv-search {
    flex: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 42px 6px 27px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    background: var(--bg-2);
    color: var(--text-1);
    font-size: 0.72rem;
    outline: none;
    transition: border-color 0.13s;
}
.conv-search:focus { border-color: var(--blue-2); }
.conv-search:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--vf-orange-soft); }
.conv-search::placeholder { color: var(--text-3); }

/* Fires an animation the instant the browser autofills this field, so JS can
   detect it and clear the value (autocomplete="off" alone is not honored). */
@keyframes conv-search-autofill-start { from {} to {} }
.conv-search:-webkit-autofill {
    animation-name: conv-search-autofill-start;
    -webkit-text-fill-color: var(--text-1);
    box-shadow: 0 0 0 1000px var(--bg-2) inset;
}

.conv-search-menu-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    color: var(--vf-orange);
    border-radius: var(--btn-r);
    cursor: pointer;
    box-shadow: none;
    transition: color 0.14s, opacity 0.14s;
    padding: 0;
    opacity: 0.85;
}

.conv-search-menu-btn:hover {
    color: var(--vf-orange-2);
    opacity: 1;
}

.conv-search-menu-btn[aria-expanded="true"] {
    color: var(--vf-orange-2);
    opacity: 1;
}

.conv-search-menu-btn:focus-visible {
    opacity: 1;
    /* Keep the global :focus-visible ring (2px solid var(--vf-orange)) —
       do not suppress it. */
}

/* Het zoekmenu gebruikt .persona-menu, net als de andere keuzemenu's. Hier
   staat alleen wat afwijkt: het hangt ónder de knop (de andere openen omhoog,
   want die zitten onderaan het scherm) en het is smaller, want de zijbalk is
   dat ook.

   Wat hier stond was een volledige kopie van .persona-menu met eigen waarden.
   Daardoor zag dit menu er anders uit dan alle andere en moest elke wijziging
   aan de dropdowns twee keer gebeuren. */
.conv-search-menu.persona-menu {
    top: calc(100% + 4px);
    bottom: auto;
    right: 0;
    left: auto;
    z-index: 40;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 24px));
}

/* Scheidingslijn tussen het zoekbereik en de weergavekeuze: dat zijn twee
   verschillende soorten keuze, en zonder streep lezen ze als één rijtje. */
.persona-menu-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

/* "Niets gevonden", in de lijst zelf zodat hij staat waar de gebruiker kijkt. */
.conv-search-leeg {
    margin: 10px 12px;
    font-size: 0.78rem;
    color: var(--text-3);
}

.conv-search-leeg[hidden] { display: none; }

/* ── treffers uit de inhoud van gesprekken ──────────────────────────────────

   Onder het zoekveld en boven de gewone lijst. De zijbalk filtert op de naam
   van een gesprek; dit blok toont de gesprekken waarin de term in een vraag of
   antwoord voorkomt, met het fragment erbij zodat zichtbaar is waaróm. */

.conv-zoekuitslag {
    margin: 6px 0 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
    /* Bij veel treffers niet de hele zijbalk overnemen: de gewone lijst moet
       bereikbaar blijven. */
    max-height: 46vh;
    overflow-y: auto;
    /* Niet meekrimpen met de flexkolom: .conv-list pakt met flex:1 1 auto alle
       ruimte en drukte dit blok tot 39px samen -- één afgeknipte regel, terwijl
       er veertig treffers in stonden. */
    flex-shrink: 0;
}

.conv-zoekuitslag[hidden] { display: none; }

.conv-zoekuitslag-kop {
    margin: 0 12px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-3);
}

.conv-zoektreffer {
    display: block;
    padding: 7px 12px;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
}

.conv-zoektreffer:hover,
.conv-zoektreffer:focus-visible {
    background: var(--bg-2);
    border-left-color: var(--blue);
}

.conv-zoektreffer-naam {
    display: block;
    font-size: 0.82rem;
    font-weight: 550;
    /* Eén regel: een lange gesprekstitel mag de lijst niet uit elkaar duwen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-zoektreffer-waar {
    display: block;
    margin-top: 1px;
    font-size: 0.7rem;
    color: var(--text-3);
}

.conv-zoektreffer-fragment {
    display: block;
    margin-top: 3px;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-2);
    /* Drie regels fragment is genoeg om te zien of dit het gesprek is. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.conv-zoektreffer mark {
    background: var(--blue-zacht, rgba(59, 130, 246, 0.22));
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.conv-search-menu--up {
    top: auto;
    bottom: calc(100% + 4px);
}

/* De opties gebruiken .persona-option, gedeeld met de andere menu's;
   de eigen .conv-search-menu-option-opmaak stond hier. */


.conv-search-highlight {
    background: rgba(250, 204, 21, 0.34);
    color: inherit;
    border-radius: 4px;
    padding: 0 1px;
}

[data-theme="dark"] .conv-search-highlight {
    background: rgba(250, 204, 21, 0.28);
}

.conv-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    /* min-height:0 is dragend: een flexkind mag standaard niet kleiner worden
       dan zijn inhoud, en dan komt de scrollbalk er nooit. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.conv-list::-webkit-scrollbar { width: 4px; }
.conv-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.conv-list::-webkit-scrollbar-track { background: transparent; }

.conv-group-label {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 8px 4px 3px;
    margin-top: 4px;
}
.conv-group-label:first-child { margin-top: 0; padding-top: 4px; }

/* Eén regel per gesprek, op elke schermbreedte (23-09-2026): icoon, titel,
   korte tijd rechts. Het brede scherm had een raster van drie regels met het
   aantal vragen en "Laatst: 1 d geleden" eronder; dat zegt niets wat de titel
   en de groepskop niet al zeggen. */
.conv-item {
    display: flex;
    align-items: center;
    gap: 4px;
    /* De regelhoogte komt van de 28×28 actieknop, niet van de titel; daarom is
       deze padding de enige knop voor de onderlinge afstand -- en staat die
       bewust buiten elke media query, zodat smal en breed gelijk lopen.
       02-10-2026: van 46 naar 36px per regel (knop 32 → 28, padding 5 → 2);
       er stond meer lucht tussen de gesprekken dan tekst. 28px blijft boven
       de 24px die WCAG 2.5.8 als kleinste raakdoel vraagt. */
    padding: 2px 6px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    position: relative;
    cursor: pointer;
}
.conv-item:hover { background: rgba(255,255,255,0.70); border-color: var(--border); }
.conv-item--active {
    background: rgba(201, 138, 76,0.07);
    border-color: rgba(201, 138, 76,0.18);
}

.conv-item-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-item--active .conv-item-name { color: var(--blue-2); font-weight: 600; }

/* Het aantal vragen en documenten blijft in de DOM (de JS leest het uit bij
   'geschiedenis wissen'), maar staat niet meer op het scherm. */
.conv-item-meta { display: none; }

.conv-item-context {
    /* Alleen de korte tijd rechts in de regel. */
    font-size: 0.7rem;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.conv-item-del {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none !important;
    border: none !important;
    color: var(--text-3) !important;
    opacity: 0;
    cursor: pointer;
    padding: 0 !important;
    border-radius: 3px !important;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
    box-shadow: none !important;
    font-size: 0.8rem;
    line-height: 1;
}
.conv-item:hover .conv-item-del,
.conv-item:focus-within .conv-item-del,
.conv-item-del:focus-visible { opacity: 1; }
.conv-item-del:hover { color: var(--err) !important; background: var(--err-bg) !important; }

@media (hover: none), (pointer: coarse) {
    .conv-item-del { opacity: 1; }
}

.conv-rename-input {
    width: 100%;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-2);
    background: rgba(255,255,255,0.90);
    border: 1px solid var(--blue-2);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    outline: none;
    box-shadow: 0 0 0 2px rgba(201, 138, 76,0.12);
    grid-column: 1 / span 2;
    grid-row: 1;
}

.conv-sidebar-footer {
    /* display:flex toegevoegd voor de feedbackknop ernaast (23-09-2026) --
       met één kind (alleen export) viel het niet op dat dit ontbrak. */
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    /* Op brede schermen (sticky binnen .conv-sidebar, dat zelf niet scrollt)
       blijft dit anders het slachtoffer als de kolom ooit toch volloopt:
       vastgeplakt aan de onderrand in plaats van erachter verdwenen. */
    position: sticky;
    bottom: 0;
    background: var(--bg);
    z-index: 3;
}

.conv-export-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-3);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    transition: background 0.12s, color 0.12s;
}
.conv-export-btn:hover { background: var(--blue-bg); color: var(--blue); }


/* ── Mobile drawer toggle ────────────────────────────────── */

/* Wrapper only exists to give the four edge tabs a shared parent on narrow
   screens (see the 820px breakpoint). On desktop it must be invisible to the
   layout, so the tabs keep positioning themselves against the viewport. */
.drawer-tabs { display: contents; }

/* Hidden by default on all screens; shown only when the sidebar
   is not visible in the grid (set to display:flex in the 820px breakpoint). */
.conv-drawer-toggle {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 498;
    align-items: center;
    justify-content: center;
    padding: 9px 11px !important;
    background: rgba(255, 255, 255, 0.90) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-2) !important;
    border-left: none !important;
    border-top-right-radius: var(--r) !important;
    border-bottom-right-radius: var(--r) !important;
    box-shadow: 3px 2px 10px rgba(0, 17, 23, 0.10) !important;
    color: var(--text-2) !important;
    cursor: pointer;
}

.conv-drawer-toggle:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: var(--blue) !important;
}

/* Right panel (references/docs) toggle — mirror of conv-drawer-toggle, right side */
.ref-drawer-toggle {
    display: none;
    position: fixed;
    top: 80px;
    right: 0;
    z-index: 498;
    align-items: center;
    justify-content: center;
    padding: 9px 11px !important;
    background: rgba(255, 255, 255, 0.90) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-2) !important;
    border-right: none !important;
    border-top-left-radius: var(--r) !important;
    border-bottom-left-radius: var(--r) !important;
    box-shadow: -3px 2px 10px rgba(0, 17, 23, 0.10) !important;
    color: var(--text-2) !important;
    cursor: pointer;
}

.ref-drawer-toggle:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: var(--blue) !important;
}

/* De bronnenknop staat in de header (naast de menupil) in plaats van als
   randtab in de leesstroom — zie de toelichting bij het element in index.html.
   Daar mag hij geen fixed randtab zijn maar een gewone pil in de nav-rij.
   position:relative (niet static) houdt .drawer-badge aan déze knop hangen.
   Blijft verborgen zolang het bronnenpaneel gewoon in de grid staat; het
   ≤820px-blok hieronder zet hem aan zodra dat paneel een lade wordt. */
.header-nav > .ref-drawer-toggle {
    display: none;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    height: 32px;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: rgba(219, 226, 235, 0.90) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    margin-right: 6px;
    flex-shrink: 0;
}

.header-nav > .ref-drawer-toggle:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: rgba(239, 243, 248, 0.98) !important;
}

.header-nav > .ref-drawer-toggle .drawer-badge {
    top: -4px;
    right: -4px;
}

.pinned-drawer-toggle {
    display: flex;
    position: fixed;
    top: 132px;
    right: 0;
    z-index: 498;
    align-items: center;
    justify-content: center;
    padding: 9px 11px !important;
    background: rgba(255, 255, 255, 0.90) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-2) !important;
    border-right: none !important;
    border-top-left-radius: var(--r) !important;
    border-bottom-left-radius: var(--r) !important;
    box-shadow: -3px 2px 10px rgba(0, 17, 23, 0.10) !important;
    color: var(--text-2) !important;
    cursor: pointer;
}

.pinned-drawer-toggle:hover {
    background: rgba(255, 255, 255, 1) !important;
    color: var(--blue) !important;
}

.drawer-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-sm);
    background: var(--blue);
    color: #fff;
    font-size: 0.60rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.pinned-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 92vw);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px;
    background: var(--surface);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: -4px 0 24px rgba(0, 17, 23,0.14);
    transform: translateX(105%);
    transition: transform 0.22s ease;
    will-change: transform;
    overflow-y: auto;
    overflow-x: hidden;
}

/* No card — matches the plain profielbronnen section below it. */
.pinned-docs-section {
    margin-bottom: 8px;
}

.pinned-docs-section .uploaded-list {
    max-height: 250px;
    margin-top: 0;
}

.app-menu-lock {
    overflow: hidden;
    touch-action: none;
}

.pinned-drawer--open { transform: translateX(0); }

.pinned-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.conv-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 17, 23,0.28);
    z-index: 499;
    animation: fadeIn 0.18s ease;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.conv-drawer-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.conv-drawer-overlay[hidden] {
    display: none !important;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (min-width: 821px) {
    .home-main {
        position: sticky;
        top: 14px;
        height: calc(100dvh - 76px - var(--ask-bar-h));
        overflow: hidden;
    }

    .answer-card {
        height: 100%;
        /* min-height:0 stond hier eerder en overschreef (gelijke specificiteit,
           later in bronvolgorde) de clamp() in 20-answer-and-chat.css. Zonder
           een bodem mag flexbox de kaart tot 0 samenpersen zodra
           #conversation-history erboven groeit, in plaats van .home-main
           (overflow-y:auto) te laten scrollen — de kaart kromp geluidloos
           weg bij veel gespreksgeschiedenis in plaats van dat er gescrold
           werd. De regels in 20-answer-and-chat.css (.app-main--chat
           .home-main { overflow-y:auto } en .answer-card { min-height:
           clamp(...) }) zijn specifieker bedoeld en horen hier te winnen. */
    }

    .answer-content-scroll,
    .answer-story-scroll {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .answer-content-scroll #answer-pre,
    .answer-content-scroll .answer-section-body,
    .answer-content-scroll .answer-story-scroll .conv-turn-answer {
        font-size: clamp(0.92rem, 0.24vw + 0.84rem, 1rem);
        line-height: 1.72;
    }

    /* Hier stond dezelfde clamp als bij .conv-turn-answer hierboven, maar met
       een ander gevolg. Bij het antwoord wint de leesprofiel-regel
       (.answer-card.reading-size-s .answer-story-scroll .conv-turn-answer, vier
       klassen diep); bij de chip verliest het profiel, want dat zet alleen een
       variabele die .followup-chip met één klasse gebruikt — en deze selector
       heeft er twee. Daardoor bleven de vervolgvragen op 1rem staan terwijl de
       antwoordtekst op 0,76rem uitkwam: gemeten 16px tegen 12,16px. Dezelfde
       variabele als de chip zelf gebruikt houdt ze gelijk in elk leesprofiel. */
    .answer-content-scroll .followup-chip {
        font-size: var(--reading-followup-size, var(--answer-followup-size, 0.85rem));
    }

    .answer-content-scroll .empty-msg,
    .answer-content-scroll .answer-current-question {
        font-size: clamp(0.86rem, 0.14vw + 0.8rem, 0.92rem);
    }
}

@media (max-width: 1280px) {
    :root { --sidebar-w: 360px; }
}

@media (max-width: 1060px) {
    :root { --conv-w: 232px; --sidebar-w: 300px; }
    .conv-item-name { font-size: 0.78rem; }
    .conv-new-btn .conv-new-label { display: none; }
    .conv-new-btn--cta .conv-new-label { display: inline; }
}

@media (max-width: 820px) {
    .answer-toc {
        position: static;
        margin-bottom: 8px;
        padding: 7px 8px;
    }

    .answer-toc-link {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    :root {
        /* Op deze breedte bepaalt de kaart de regel, niet een ch-plafond.
           `min(92vw, 66ch)` maakte de blokken smaller dan de beurt eromheen,
           dus ook hier liepen de linkerranden uiteen. */
        --answer-measure: 100%;
        --drawer-tabs-h: 38px;
    }

    .home-grid { grid-template-columns: 1fr; }
    .home-sidebar-header { display: flex; }

    /* The four panel tabs were fixed to the left and right edges at three
       different heights, so on a phone they sat on top of the answer text —
       the first characters of every line disappeared under the left tab. Here
       they become one row in the flow, above the card: no overlap, and all
       four panels stay one tap away. */
    /* Geen eigen rij meer.

       Deze rij van 38px plus 8px marge stond boven de antwoordkaart en duwde
       de tekst dus 46 pixels omlaag -- op een iPhone begon het antwoord
       daardoor pas ver onder de kopbalk. Gemeld op 9 september 2026.

       De rij bestond met reden: als vaste tab dekte de knop de eerste tekens
       van elke regel af. Die reden staat nog, en daarom is de knop nu een
       smalle greep van veertien pixels en springt de leestekst hieronder
       links wat verder in. Dat kost een paar pixels regelbreedte en levert
       zesenveertig pixels leeshoogte op. */
    .drawer-tabs {
        display: contents;
    }

    .drawer-tabs > button:not(.conv-drawer-toggle) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        flex: 0 0 auto;
        border: 1px solid var(--border-2) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
    }

    .drawer-tabs .drawer-badge { top: 1px; right: 1px; }

    .answer-card {
        gap: 8px;
    }

    .answer-card {
        /* De hoogte volgt de vraagbalk in plaats van een vast getal.
           Hier stond `100dvh - 190px - var(--drawer-tabs-h) - 8px`. Twee dingen
           klopten daar niet meer. De 190 was een schatting van de balk, terwijl
           `--ask-bar-h` de werkelijke hoogte meet (een ResizeObserver in
           01-app.js): verdween de blauwe melding, dan kromp de balk en bleef de
           kaart even klein -- die ruimte werd dus niet gebruikt. Gemeld op
           9 september 2026. En `--drawer-tabs-h` trok er nog 38 pixels af voor
           een rij die er sinds gisteren niet meer is.
           De 78 die overblijft is de kopbalk plus de paginamarge. */
        height: clamp(360px, calc(100dvh - var(--ask-bar-h, 112px) - 78px), 760px);
    }

    .answer-story-scroll {
        padding-right: 2px;
    }

    .answer-story-scroll #conv-turns {
        gap: 10px;
    }

    .answer-story-scroll .conv-turn-q-text {
        max-width: 84%;
        font-size: 0.78rem;
        line-height: 1.45;
        padding: 8px 10px;
    }

    .answer-story-scroll .conv-turn-answer {
        max-width: 90%;
        font-size: 0.84rem;
        line-height: 1.66;
        padding: 10px 11px;
    }

    .answer-story-scroll,
    .answer-card--long .answer-story-scroll {
        max-height: min(62vh, calc(100dvh - 320px));
    }

    .answer-actions {
        margin-top: 2px;
        padding-top: 8px;
    }

    /* Left conversation drawer */
    .conv-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        /* Breder (was 280px): de titels zijn nu zinnen, niet de eerste
           woorden van de vraag. 20 september 2026. */
        width: min(380px, 90vw);
        z-index: 500;
        background: var(--surface);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 4px 0 24px rgba(0, 17, 23,0.14);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        will-change: transform;
        max-height: 100vh;
        padding: 16px 12px;
        overflow-y: auto;
        border-radius: 0;
    }
    .conv-sidebar--open { transform: translateX(0); }
    /* Was hier alleen display:flex; de rest van de opmaak (greep-vorm,
       verticaal gecentreerd) stond pas in het 560px-blok hieronder. Tussen
       561-820px viel de knop dus terug op de default: top:80px vanaf de
       paginatop i.p.v. verticaal gecentreerd, en een ander formaat -- de knop
       sprong zichtbaar van plek zodra het scherm over 560px heen groeide.
       Nu hetzelfde in de volle 561-820px-breedte, niet alleen de smalste
       telefoons.

       Een greep die uit de linkerrand komt: plat tegen de rand aan, alleen
       rechts afgerond, en verticaal gecentreerd zodat hij niet in de eerste
       regels van het antwoord hangt. Blijft 40px hoog -- ruim boven de 24px
       die een raakdoel nodig heeft. */
    .conv-drawer-toggle {
        display: flex;
        position: fixed !important;
        top: 50% !important;
        left: 0 !important;
        transform: translateY(-50%);
        width: 14px;
        min-width: 0;
        height: 40px;
        padding: 0 !important;
        overflow: hidden;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: var(--r-sm) !important;
        border-bottom-right-radius: var(--r-sm) !important;
        box-shadow: 2px 1px 6px rgba(0, 17, 23, 0.10) !important;
        /* De greep is te verslepen; zonder dit scrollt iOS de pagina mee zodra
           de vinger beweegt en gebeurt er met de knop niets. `pan-x` laat een
           horizontale veeg wel door, want die is hier niet van ons. */
        touch-action: pan-x;
    }
    .conv-drawer-toggle svg {
        width: 11px;
        height: 11px;
    }

    /* Right references/docs drawer */
    .home-sidebar {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(310px, 88vw);
        z-index: 500;
        background: var(--panel-surface);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: -4px 0 24px rgba(0, 17, 23,0.14);
        transform: translateX(100%);
        transition: transform 0.22s ease;
        will-change: transform;
        max-height: 100vh;
        padding: 16px 12px;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 0;
        /* Reset sticky positioning */
        top: 0;
    }
    .home-sidebar--open { transform: translateX(0); }
    .header-nav > .ref-drawer-toggle { display: inline-flex; }
}

@media (max-width: 660px) {
    .lib-docs-split { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    header { padding: 0 12px; }
    .header-inner, .header-top {
        padding: 8px 0;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .header-brand {
        flex: 0 0 auto;
        min-width: 0;
        gap: 8px;
    }
    .header-top h1, header h1 {
        font-size: 0.9rem;
        line-height: 1.15;
    }
    .header-sub, .header-top p, header p {
        display: none;
    }
    .header-nav {
        width: auto;
        margin-left: auto;
        gap: 0;
        flex-wrap: nowrap;
        align-self: flex-start;
    }
    .header-nav a { flex: 0 0 auto; text-align: center; font-size: 0.76rem; padding: 6px 4px; }
    .nav-avatar-btn {
        height: 32px;
        min-width: 56px;
        padding: 0 9px 0 8px;
    }
    .app-layout, .app-main { padding: 10px 10px 152px; }

     /* Zelfde maat als .nav-avatar-btn ernaast, zodat de header-rij
         op een smal scherm één hoogte houdt. */
    .header-nav > .ref-drawer-toggle {
        height: 32px;
        padding: 0 8px !important;
        margin-right: 4px;
    }
    .pinned-drawer-toggle { top: 108px; }
    .card { padding: 13px 14px; }
    .form-row { grid-template-columns: 1fr; }
    .fetch-row { flex-direction: column; }
    .fetch-row button { width: 100%; text-align: center; }
    .ask-input-row { gap: 7px; }
    .ask-send-btn { padding: 0 !important; }
    /* Mobile browsers (notably iOS Safari) auto-zoom the page on focus when
       an input's effective font-size is under 16px — 16px/1rem is the
       threshold that keeps focusing the question field from zooming in. */
    .ask-input-row textarea,
    #question {
        font-size: 1rem;
    }
    /* Touch targets: at least 36px so the controls under the input field
       are comfortable to tap (was 20-24px, smaller than desktop — backwards
       for a touch surface). */
    .ask-controls-row .ask-send-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .ask-controls-row .ask-send-btn svg {
        width: 15px;
        height: 15px;
    }
    #question::placeholder,
    .av-form-grid input::placeholder,
    .av-form-grid textarea::placeholder {
        font-size: 0.75rem;
        line-height: 1.35;
    }
    .ask-controls-row { gap: 6px; margin-top: 4px; }
    .ask-controls-row .corpus-filter-toggle {
        width: 36px;
        height: 36px;
        border-radius: var(--r-sm) !important;
    }
    .ask-controls-row .corpus-filter-toggle svg {
        width: 17px;
        height: 17px;
    }

    #ask-form > .stream-error-banner {
        left: 10px;
        right: 10px;
        margin: 0;
    }

    .answer-card-header h2 {
        font-size: 0.98rem;
    }

    .answer-card {
        height: clamp(320px, calc(100dvh - 175px), 680px);
    }

    .answer-story-scroll {
        /* Symmetrisch, anders staat de inhoud hier 2px uit het lood ten opzichte
           van de kaartkop erboven (zie de basisregel). */
        padding-inline: 0;
    }

    .answer-story-scroll #conv-turns {
        gap: 9px;
    }

    .answer-story-scroll .conv-turn-q-text {
        max-width: min(100%, calc(var(--answer-measure) - 3ch));
        font-size: 0.82rem;
        line-height: 1.5;
        padding: 8px 10px;
        text-align: left;
        /* Links, net als het antwoord eronder. Gecentreerd sprong de bel op een
           telefoon een stukje in, doordat hij smaller is (92%) dan het antwoord
           (96%): het verschil werd over beide kanten verdeeld. */
        margin-left: 0;
        margin-right: auto;
        align-self: flex-start;
    }

    .answer-story-scroll .conv-turn-answer {
        max-width: min(100%, var(--answer-measure));
        font-size: 0.93rem;
        line-height: 1.68;
        padding: 10px 12px;
    }

    .answer-current-question {
        max-width: min(100%, calc(var(--answer-measure) - 3ch));
        font-size: 0.82rem;
        line-height: 1.5;
        padding: 8px 10px;
        margin: 0 0 9px 0;
        text-align: left;
        align-self: flex-start;
    }

    .answer-story-scroll,
    .answer-card--long .answer-story-scroll {
        max-height: min(58vh, calc(100dvh - 290px));
        padding-right: 1px;
    }

    .answer-section-body,
    pre {
        font-size: 0.92rem;
        line-height: 1.7;
    }

    .followup-chip {
        font-size: 0.92rem;
        padding: var(--reading-followup-pad-y, 6px) var(--reading-followup-pad-x, 10px);
        min-height: 36px;
    }

    .answer-section-body table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .conv-turn-answer {
        font-size: 0.82rem;
        line-height: 1.64;
        max-height: 30vh;
    }
}

@media (max-width: 420px) {
    .answer-toc-list {
        gap: 5px;
    }

    .answer-toc-link {
        font-size: 0.68rem;
        padding: 4px 7px;
    }

    .card {
        padding: 12px;
    }

    .answer-card-header {
        align-items: flex-start;
    }

    .answer-card-header h2 {
        font-size: 0.93rem;
        line-height: 1.25;
    }

    .answer-story-scroll .conv-turn-q-text {
        max-width: 92%;
        font-size: 0.8rem;
        line-height: 1.46;
        padding: 7px 9px;
    }

    .answer-story-scroll .conv-turn-answer {
        max-width: 96%;
        font-size: 0.9rem;
        line-height: 1.64;
        padding: 9px 10px;
    }

    .answer-story-scroll,
    .answer-card--long .answer-story-scroll {
        max-height: min(56vh, calc(100dvh - 276px));
    }

    .answer-actions {
        justify-content: flex-start;
        gap: 6px;
    }

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

    .answer-section-body,
    pre,
    pre#answer-pre {
        font-size: 0.88rem;
        line-height: 1.66;
    }

    .followup-chip {
        font-size: 0.88rem;
        padding: var(--reading-followup-pad-y, 6px) var(--reading-followup-pad-x, 9px);
    }

    .conv-turn-body {
        padding: 0 12px 10px 34px;
    }
}

/* ── Nav gear dropdown additions ─────────────────────────── */

.nav-dropdown-sep {
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.nav-dropdown-mode {
    padding: 8px 14px 12px;
}

button.nav-dropdown-item {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

button.nav-dropdown-item--logout {
    color: var(--err);
}

button.nav-dropdown-item--logout:hover {
    background: var(--err-bg);
    color: var(--err);
}

[data-theme="dark"] button.nav-dropdown-item--logout:hover {
    background: rgba(185, 28, 28, 0.15);
}

.nav-dropdown-about {
    padding: 7px 14px 8px;
    color: var(--text-3);
    font-size: 0.67rem;
    line-height: 1.45;
}

.nav-dropdown-about-line {
    margin: 1px 0;
    opacity: 0.88;
}

.nav-dropdown-about-line strong {
    color: var(--text-2);
    font-weight: 700;
}

.nav-dropdown-about-line a {
    color: var(--text-3);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 138, 76, 0.18);
}

.nav-dropdown-about-line a:hover {
    color: var(--blue);
    border-bottom-color: rgba(201, 138, 76, 0.34);
}

.nav-dropdown-about-line--version {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.72;
}

.nav-dropdown-mode-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 7px;
}

.nav-dropdown-mode-btns {
    display: flex;
    gap: 5px;
}

.about-modal {
    position: fixed;
    inset: 0;
    z-index: 4100;
    display: grid;
    place-items: center;
}

.about-modal[hidden] {
    display: none;
}

.about-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 18, 30, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.about-modal-card {
    position: relative;
    width: min(92vw, 400px);
    border-radius: var(--r);
    border: 1px solid var(--border-2);
    background: var(--surface);
    box-shadow: var(--shadow-md), 0 28px 80px rgba(0, 17, 23, 0.22);
    padding: 24px 24px 20px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.about-modal-card h2 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.about-modal-subtitle {
    margin: 0 0 10px;
    color: var(--text-2);
    font-size: 0.8rem;
    line-height: 1.45;
}

.about-modal-section {
    margin: 9px 0;
    padding-top: 9px;
    border-top: 1px solid var(--border);
}

.about-modal-section:first-of-type {
    margin-top: 0;
}

.about-modal-line {
    margin: 6px 0;
    color: var(--text-2);
    font-size: 0.84rem;
    line-height: 1.5;
}

.about-modal-line a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 138, 76, 0.28);
}

.about-modal-line a:hover {
    border-bottom-color: rgba(201, 138, 76, 0.55);
}

.about-modal-links {
    margin: 6px 0 0;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.about-modal-links span {
    color: var(--text-3);
}

.about-modal-links a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 138, 76, 0.28);
}

.about-modal-links a:hover {
    border-bottom-color: rgba(201, 138, 76, 0.55);
}

.about-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 0.86rem;
    line-height: 1;
    transition: background 0.14s, color 0.14s;
}

/* Zonder rand moet de hover-vulling het aanwijsdoel tonen — anders is er geen
   enkele aanwijzing dat dit kruisje een knop is. */
.about-modal-close:hover {
    background: var(--surface-2);
    color: var(--blue-2);
}

/* De rand deed hier ook dienst als focusindicator; die vervalt niet zomaar
   (WCAG 2.4.7), dus een expliciete outline in de plaats. */
.about-modal-close:focus-visible {
    outline: 2px solid var(--blue-2);
    outline-offset: 2px;
}

.nav-mode-btn {
    flex: 1;
    padding: 5px 8px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--border-2);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-align: center;
    font-family: inherit;
    box-shadow: none;
    line-height: 1.3;
}

.nav-mode-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-2);
}

.nav-mode-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.nav-mode-btn--active.nav-mode-btn--claude {
    background: var(--ok-bg);
    border-color: var(--ok-bdr);
    color: var(--ok);
}

.nav-mode-btn--active.nav-mode-btn--mistral {
    background: var(--blue-bg);
    border-color: var(--blue-2);
    color: var(--blue-2);
}

.nav-mode-error {
    font-size: 0.74rem;
    color: var(--err);
    margin: 5px 0 0;
    line-height: 1.4;
}

/* ── User avatar in conversation turns ───────────────────── */

.conv-turn-avatar {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

.conv-turn-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    font-size: 0.60rem;
    font-weight: 800;
    letter-spacing: 0;
    user-select: none;
}

/* ── Settings page ───────────────────────────────────────── */

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.settings-section h2 { margin-bottom: 16px; }

.settings-group-title {
    padding: 14px 16px;
    border: 1px dashed var(--border-2);
    background: linear-gradient(180deg, rgba(201, 138, 76,0.04), rgba(201, 138, 76,0.01));
}

.settings-group-title h2 {
    margin: 0 0 6px;
    font-size: 0.98rem;
}

.settings-group-title .settings-desc {
    margin: 0;
    font-size: 0.80rem;
}

.settings-desc {
    font-size: 0.84rem;
    color: var(--text-2);
    line-height: 1.6;
    margin: -6px 0 14px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

/* De taalkeuze plakte zonder tussenruimte onder de rij van de donkere modus en
   las daardoor als de toelichting daarvan in plaats van als eigen instelling.
   Wie hem zocht, keek er overheen. Een scheidingslijn en wat lucht maken er
   weer een losse keuze van. */
.settings-field--taal {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.settings-field--reading-size {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.reading-size-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.settings-field--reading-size .reading-group {
    gap: 8px;
}

.settings-field--reading-size .reading-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.76rem;
    line-height: 1;
}

.reading-size-preview {
    margin: 0;
    color: var(--text-2);
    font-style: italic;
    line-height: 1.4;
    transition: font-size 0.12s ease;
    font-size: 0.84rem;
}

.reading-size-preview[data-reading-size="s"] { font-size: 0.76rem; }
.reading-size-preview[data-reading-size="m"] { font-size: 0.91rem; }
.reading-size-preview[data-reading-size="l"] { font-size: 1.08rem; }

.settings-field label {
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 0;
}

.settings-field-hint {
    font-size: 0.73rem;
    color: var(--text-3);
    margin: 1px 0 0;
}

.settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-status {
    font-size: 0.80rem;
    font-weight: 600;
    margin: 0;
}

.profile-status--ok  { color: var(--ok); }
.profile-status--err { color: var(--err); }

.settings-mode-ok {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--ok);
    background: var(--ok-bg);
    border: 1px solid var(--ok-bdr);
    border-radius: var(--r-sm);
    padding: 6px 12px;
    font-weight: 600;
}

/* Avatar section */
.avatar-section {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.avatar-preview {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-bg);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-initials-large {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.02em;
    user-select: none;
}

.avatar-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.avatar-hint {
    font-size: 0.73rem;
    color: var(--text-3);
    margin: 0;
}

.btn-danger-sm {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--err);
    font-size: 0.80rem;
    font-weight: 600;
    border: 1px solid var(--err-bdr);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
    box-shadow: none;
}

.btn-danger-sm:hover { background: var(--err-bg); }

@media (max-width: 760px) {
    .settings-grid { grid-template-columns: 1fr; }
}

/* ── Settings redesign — grouped cards ──────────────────────────────────── */

.settings-groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 960px;
    margin: 0 auto;
}

.settings-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden;
}

.settings-group__hd {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    background: linear-gradient(90deg, rgba(201, 138, 76,.06) 0%, rgba(201, 138, 76,.02) 100%);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .settings-group__hd {
    background: linear-gradient(90deg, rgba(201, 138, 76,.10) 0%, rgba(201, 138, 76,.03) 100%);
}

.settings-group__hd-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--r);
    background: var(--blue-bg);
    border: 1px solid rgba(201, 138, 76,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
}

[data-theme="dark"] .settings-group__hd-icon {
    background: rgba(201, 138, 76,.15);
    border-color: rgba(201, 138, 76,.28);
}

.settings-group__hd h2 {
    margin: 0 0 2px;
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--text);
}

.settings-group__hd p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.45;
}

.settings-group__body {
    padding: 24px;
}

.settings-group__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
}

.settings-group__col {
    padding: 0 24px 0 0;
}

.settings-group__col--sep {
    padding: 0 0 0 24px;
    border-left: 1px solid var(--border);
}

.settings-subsec-title {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-3);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.settings-plan-status {
    margin-bottom: 6px;
}

.trial-meter { display: flex; flex-direction: column; gap: 4px; }
.trial-meter__bar { height: 6px; border-radius: 3px; background: var(--border-2); overflow: hidden; }
.trial-meter__fill { height: 100%; border-radius: 3px; background: var(--blue); transition: width 0.4s ease; }
.trial-meter__fill--warn { background: #f59e0b; }
.trial-meter__label { font-size: 0.70rem; color: var(--text-3); }

@media (max-width: 760px) {
    .settings-group__cols { grid-template-columns: 1fr; }
    .settings-group__col { padding: 0; }
    .settings-group__col--sep {
        padding: 20px 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
        margin-top: 20px;
    }
    .settings-group__hd { padding: 14px 18px; }
    .settings-group__body { padding: 18px; }
}

/* ── Document panel header (right sidebar) ────────────────── */

.doc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
/* Small uppercase label, identical to .pin-section-title (profielbronnen). */
.doc-panel-header h2 {
    margin: 6px 0 4px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.doc-list-empty {
    font-size: 0.79rem;
    color: var(--text-3);
    font-style: italic;
    margin: 6px 0;
    text-align: center;
    padding: 10px 0;
}

.doc-list-dossier-link { font-size: 0.79rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.doc-list-dossier-link:hover { text-decoration: underline; }
.doc-list-dossier-link--footer { display: block; margin-top: 8px; text-align: center; }

.doc-indexing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.doc-indexed-ok {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--ok);
    letter-spacing: 0.02em;
}

@keyframes spin { to { transform: rotate(360deg); } }

.doc-indexing-spinner {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--border-2);
    border-top-color: var(--blue-2);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    flex-shrink: 0;
}

/* ── In-app confirm modal ─────────────────────────────────── */

.app-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.app-modal[hidden] { display: none !important; }

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 17, 23, 0.50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.app-modal-box {
    position: relative;
    z-index: 1;
    background: var(--surface-2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    box-shadow: 0 8px 40px rgba(0, 17, 23, 0.22), 0 2px 8px rgba(0, 17, 23, 0.10);
    padding: 28px 28px 22px;
    min-width: 280px;
    max-width: 440px;
    width: 100%;
    animation: pop-in 0.16s ease;
}

.app-modal-msg {
    font-size: 0.94rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 22px;
    font-weight: 500;
}

.app-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.app-modal-btn {
    padding: 7px 20px;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid var(--border-2);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.4;
}

.app-modal-cancel {
    background: transparent;
    color: var(--text-2);
    border-color: var(--border-2);
}
.app-modal-cancel:hover { background: var(--blue-bg); border-color: rgba(201, 138, 76,0.20); }

.app-modal-ok {
    background: var(--blue);
    color: #fff;
    border-color: transparent;
}
.app-modal-ok:hover { background: var(--blue-2); }

.app-modal-ok--danger { background: var(--err) !important; border-color: transparent !important; }
.app-modal-ok--danger:hover { background: #a81c1c !important; }

/* ── Right-sidebar drawer header (mobile only) ────────────── */

.home-sidebar-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.home-sidebar-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--border-2) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-3) !important;
    cursor: pointer;
    box-shadow: none !important;
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}
.home-sidebar-close:hover {
    background: var(--blue-bg) !important;
    color: var(--blue) !important;
    border-color: rgba(201, 138, 76,0.22) !important;
}

/* ── Verified match banner ───────────────────────────────── */

.verified-match-banner {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--ok-bg);
    border: 1px solid var(--ok-bdr);
    border-radius: var(--r-sm);
    font-size: 0.81rem;
}

.verified-match-banner summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ok);
    user-select: none;
    list-style: none;
}
.verified-match-banner summary::before { content: ''; }

.verified-match-preview {
    margin: 6px 0 0;
    color: var(--text-2);
    font-style: italic;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════

/* ── Conversation scope header ────────────────────────────── */
/* Shown above the conversation list whenever it is filtered, so the active
   dossier is visible and the filter always has a way out. */
.conv-scope {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 6px;
    font-size: 0.68rem;
    line-height: 1.4;
}

.conv-scope:empty { display: none; }

.conv-scope-label {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-scope-link {
    flex-shrink: 0;
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.conv-scope-link:hover { color: var(--vf-orange); }

.conv-scope-link:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Leesbreedte op de telefoon ───────────────────────────────────────────
   Staat bewust achteraan: de generieke .card-regels in de 560px- en
   420px-blokken hierboven zetten padding terug op de antwoordkaart, terwijl
   die juist padding: 0 heeft omdat haar kinderen de inspringing dragen. Op
   een scherm van 390px kostte dat 24px leesbreedte voor niets, en daar telt
   elk teken per regel. */
@media (max-width: 560px) {
    .answer-card {
        padding-inline: 0;
    }

    /* Krapper dan de clamp() die voor grote schermen is bedoeld. */
    .answer-card-header {
        padding-inline: 8px;
    }

    /* De scrollbalk hoort op de schermrand te vallen en niet achter de ask
       bar; daarom rechts geen inspringing meer op de kolom zelf, maar op de
       kinderen. Dat staat in 20-answer-and-chat.css onder dezelfde gedachte,
       en `padding-inline` hier zou het stilzwijgend terugdraaien -- dit
       bestand laadt later. */
    .answer-content-scroll {
        padding-right: 0;
    }

    /* Links iets ruimer dan rechts, zodat er niets onder de greep aan de
       linkerrand verdwijnt. Moet ná de regel hierboven staan: die zet
       `padding-inline` en zou een eerdere `padding-left` overschrijven. */
    .answer-content-scroll,
    .answer-card-header {
        padding-left: 18px;
    }

    /* Zodat de maat nooit de beperkende factor wordt nu de inspringing kleiner
       is — de kaartbreedte hoort de regel te bepalen, niet een ch-plafond. */
    :root {
        --answer-measure: 100%;
        /* De balk is op deze breedte ~107px hoog (34px vervaging en de
           credit-regel vervallen hieronder). Reserveer dus geen 140px
           leesruimte voor iets van 107. */
        --ask-bar-h: 112px;
    }

    /* De vervaging boven de invoerbalk was 34px: de laatste alinea van een
       antwoord verdween daardoor halverwege een zin achter een sluier. */
    /* Eén maat voor alles wat op een telefoon boven de balk uitlijnt. Stond
       hier als kale 8px, en de welkomstkaart had hem niet — die was daardoor
       16px breder en raakte de schermrand terwijl de balk eronder inspringt. */
    :root { --ask-rand-mobiel: 8px; }

    .ask-bar-fixed {
        padding-top: 16px;
        /* .ask-bar-inner had hier geen enkele zijmarge — de afgeronde kaart
           stond exact op de fysieke schermrand, randen inbegrepen. */
        padding-left: var(--ask-rand-mobiel);
        padding-right: var(--ask-rand-mobiel);
    }

    /* Een copyrightregel hoort niet in de leeszone van een telefoon; hij staat
       op de andere pagina's gewoon in de voettekst. */
    .ask-bar-credit {
        display: none;
    }
}


/* ── Ruimer linkerpaneel op een breed scherm ──────────────────────────────
   232px is gekozen voor een laptop. Op een breed scherm blijft die breedte
   staan terwijl er ruimte zat is, en dan kapt elke gesprekstitel af en past de
   dossierkaart met moeite. De middenkolom in .home-grid is 1fr en vangt het
   verschil vanzelf op. */
@media (min-width: 1600px) {
    :root {
        --conv-w: 286px;
    }

    .dossier-sidebar-card {
        font-size: 0.86rem;
        padding: 13px 15px 11px;
    }

    .conv-item-name {
        font-size: 0.84rem;
    }
}

/* De knop naar de stijlvoorbeelden met zijn toelichting eronder in plaats van
   ernaast: een regel uitleg naast een knop wordt op een smal scherm een
   koker van twee woorden breed. */
.settings-actions--met-uitleg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.settings-actions--met-uitleg .settings-field-hint {
    margin: 0;
    max-width: 46ch;
}


/* ── Facturering ─────────────────────────────────────────────────────────
   De pagina achter Instellingen → Facturering.

   Alles hier hangt aan de tokens (--surface, --border, --text-*) en niet aan
   vaste kleuren. Dat is niet netheid maar noodzaak: 90-dark-theme.css zet
   dezelfde tokens om, dus een component dat er alleen tokens gebruikt heeft
   geen tweede beschrijving voor de donkere modus nodig — en kan er dus ook
   niet mee uit de pas gaan lopen. */

/* Naam-waardeparen van één ding. De labelkolom is vast, zodat de waarden
   onder elkaar uitlijnen; onder de 560px wordt het twee regels, want een
   kolom van 11em naast een waarde past daar niet meer. */
.factuur-kenmerken {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.factuur-kenmerk {
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 4px 16px;
    align-items: baseline;
}

.factuur-kenmerk dt {
    font-size: 0.81rem;
    font-weight: 600;
    color: var(--text-2);
}

.factuur-kenmerk dd {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text);
}

/* Een adres is geen alinea: de regelovergangen dragen betekenis. Vandaar
   losse spans op blokniveau in plaats van <br>, zodat er niets omvalt als er
   een regel ontbreekt. */
.factuur-adres {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
}

.factuur-lijst {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.factuur-methode {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.factuur-methode__merk {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}

.factuur-methode__detail {
    font-size: 0.79rem;
    color: var(--text-3);
}

/* De tabel mag zelf schuiven op een smal scherm. Zonder deze wikkel duwt zij
   de hele pagina breder en gaat álles horizontaal schuiven. */
.factuur-tabel-wrap {
    overflow-x: auto;
}

/* De pdf-link in de factuurtabel in de kleur van de rest van de app, niet de
   standaardblauw van de browser. */
.factuur-tabel a { color: var(--blue); font-weight: 600; text-underline-offset: 2px; }
.factuur-tabel a:hover { opacity: 0.85; }

.factuur-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.factuur-tabel th,
.factuur-tabel td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.factuur-tabel th {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    border-bottom: 1px solid var(--border-2);
}

.factuur-tabel tbody tr:last-child td {
    border-bottom: none;
}

/* De omschrijving is het enige veld dat lang kan worden; die mag afbreken en
   krijgt de ruimte die overblijft. */
.factuur-tabel td:nth-child(3) {
    white-space: normal;
    min-width: 14ch;
}

.factuur-tabel__nr {
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

/* Bedragen rechts en met vaste cijferbreedte: zo staan de komma's onder
   elkaar en kun je twee facturen in één oogopslag vergelijken. */
.factuur-tabel__bedrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* De status staat er ook als woord in, niet alleen als kleur — WCAG 1.4.1:
   kleur mag nooit de enige drager van informatie zijn. */
.factuur-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text-2);
}

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

.factuur-status--open,
.factuur-status--pending,
.factuur-status--authorized {
    background: var(--warn-bg);
    border-color: var(--warn-bdr);
    color: var(--warn);
}

.factuur-status--failed,
.factuur-status--expired,
.factuur-status--canceled {
    background: var(--err-bg);
    border-color: var(--err-bdr);
    color: var(--err);
}

@media (max-width: 560px) {
    .factuur-kenmerk {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ── De lade naar de lat van de concurrent (20 september 2026) ─────────── */
/* Filterchips boven de lijst, in de stijl van '+ Nieuw gesprek' (zelfde
   klassen); alleen niet op volle breedte, en 'Wissen' rechts. Minimaal 32px
   hoog: een aanraakdoel (WCAG 2.5.8). */
.conv-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 2px 0 6px;
}
.conv-filter-wrap { position: relative; }
.conv-filters .conv-new-btn--cta {
    width: auto;
    min-height: 32px !important;
    font-size: 0.78rem;
}
.conv-filter-chip.is-actief {
    color: var(--blue);
    border-color: color-mix(in srgb, var(--vf-orange) 60%, var(--border-2));
    background: color-mix(in srgb, var(--surface) 90%, var(--vf-orange) 10%);
}
.conv-filter-menu {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
    min-width: 200px;
    /* Achtergrond komt van .persona-menu (var(--surface), al dekkend genoeg
       om over de lijst te liggen); geen eigen override nodig. */
}
.conv-filter-menu[hidden] { display: none; }
/* De ⋯-knop in de rij: alleen op aanraakschermen zichtbaar (daar is er geen
   rechtermuisknop en is een lange druk onzichtbaar); 28×28, gelijk aan de
   prullenbak, anders bepaalt hij op een telefoon alsnog de regelhoogte. */
.conv-item-meer {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}
.conv-item-meer:hover { background: var(--surface-2); color: var(--text); }
.conv-item-meer:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
@media (pointer: coarse) {
    .conv-item-meer { display: inline-flex; }
    .conv-item-del { display: none !important; }
}
/* Icoon per soort vóór de titel. */
.conv-item-icoon { color: var(--text-3); display: inline-flex; align-items: center; margin-right: 6px; flex-shrink: 0; }
/* Het menu bij een lange druk / rechtermuisknop: een .persona-menu op een
   vaste plek bij de vinger of de muis. */
.conv-item-menu {
    position: fixed;
    bottom: auto;
    right: auto;
    z-index: 700;
    min-width: 220px;
    /* Dekkend: hij ligt over lopende tekst, en tekst door een menu heen leest
       slecht (WCAG 1.4.3 geldt ook voor wat erachter doorschijnt). Achtergrond
       komt van .persona-menu (var(--surface)); geen eigen override nodig. */
}
.conv-item-menu .persona-option { min-height: 36px; }
.conv-item-menu .is-gevaarlijk .scope-option-title { color: var(--warn); }
.conv-item-menu .conv-item-menu-kop { font-size: 0.7rem; color: var(--text-3); padding: 6px 10px 2px; }

@media (max-width: 820px) {
    /* Zelfde volgorde als op een breed scherm. Hier stonden order-regels die
       de dossierkaart onderaan zetten; die kaart is juist de context waarmee
       je de lade opent. Alleen de toelichting en de metaregel blijven weg,
       want die kosten op een telefoon te veel hoogte. */
    .conv-sidebar .dossier-sidebar-card .dossier-sidebar-hint,
    .conv-sidebar .dossier-sidebar-card .dossier-sidebar-meta { display: none; }
    /* De voetregel is hier een zwart blok: hij staat op var(--bg) terwijl de
       lade zelf var(--surface) is. Exporteren kan al per gesprek (het menu in
       de rij en de uitklapknop onder een antwoord). */
    .conv-sidebar .conv-sidebar-footer { display: none; }
    .header-nav > .geschiedenis-toggle { display: inline-flex !important; }
}
/* De rij zelf staat niet meer in een breedtevraag: hij is nu overal één regel
   (zie .conv-item hierboven). De prullenbak hoort hier niet bij: die hangt op
   pointer:coarse, en meenemen op breedte verbrak die koppeling voor een smal
   vensterbreed desktopscherm met een muis. */
@media (max-width: 820px) {
    .header-nav > .geschiedenis-toggle { display: none !important; }
}

/* Eén focusring (donker koper, 5,6:1) op de chips en de menu's in de lade;
   de lichte oranje ring van de vraagbalk haalt 3:1 niet. */
.conv-filters .conv-new-btn--cta:focus-visible,
.conv-item-menu .persona-option:focus-visible,
.conv-filter-menu .persona-option:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* De gesprekstitel in de kop, alleen op een telefoon en alleen bij een open
   gesprek; het woordmerk wijkt dan (het merk blijft in het logo). */
.kop-titel, .kop-titel-invoer { display: none; }
@media (max-width: 820px) {
    .kop-titel {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 8px 0 0;
        padding: 4px 6px;
        border: 0;
        border-radius: var(--r-sm);
        background: transparent;
        color: #fff;
        font: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    .kop-titel[hidden] { display: none; }
    .kop-titel:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 1px; }
    .header-inner:has(.kop-titel:not([hidden])) .header-brand h1 { display: none; }
    .header-inner:has(.kop-titel:not([hidden])) .header-brand { flex: 0 0 auto; }
    /* .header-sub week alleen onder 560px (eigen regel elders), maar
       .kop-titel verschijnt al onder 820px -- tussen de 561-820px zat dus een
       venster waarin beide tegelijk stonden: de knoppenrij paste er niet meer
       naast en viel eronder (gemeten: rij ging van 32px naar ruim 90px hoog).
       Zodra de geprekstitel er is, verdwijnt de payoff mee, net als h1. */
    .header-inner:has(.kop-titel:not([hidden])) .header-sub { display: none; }
    /* Zonder header-sub past de rij bijna altijd, maar .header-inner mag van
       de basisregel nog steeds wrappen (flex-wrap:wrap) -- bij een langere
       gespreksnaam won dat nog eenmalig van de ellipsis op .kop-titel en viel
       de knoppenrij alsnog eronder. .kop-titel heeft al min-width:0 en
       tekst-overflow:ellipsis; die moet het absorberen, niet de hele rij. */
    .header-inner:has(.kop-titel:not([hidden])) { flex-wrap: nowrap; }
    .kop-titel-invoer {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 8px 0 0;
        padding: 4px 6px;
        border: 1px solid rgba(255,255,255,0.5);
        border-radius: var(--r-sm);
        background: rgba(255,255,255,0.12);
        color: #fff;
        font: inherit;
        font-size: 0.95rem;
    }
}


/* ── Hulp en ondersteuning (/support) ───────────────────────────────────── */
.support-links {
    margin: 0 0 12px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--text-2);
}
.support-links a { color: var(--blue); font-weight: 600; text-underline-offset: 2px; }

/* Het onderwerp mag afbreken; de rest van de kolommen niet. */
.support-tabel td:nth-child(3) { white-space: normal; min-width: 18ch; }

.support-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid var(--border);
}
.support-status--open { background: var(--warn-bg); border-color: var(--warn-bdr); color: var(--warn); }
.support-status--answered { background: var(--ok-bg); border-color: var(--ok-bdr); color: var(--ok); }
.support-status--closed { background: var(--surface-2); color: var(--text-3); }
.support-nieuw { margin-left: 6px; font-size: 0.74rem; font-weight: 700; color: var(--vf-orange); }

.support-gesprek {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.support-bericht {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    max-width: 52rem;
}
/* Het serviceteam iets ingesprongen en getint, zodat het gesprek in één oogopslag
   leest als heen en weer. */
.support-bericht--support { background: var(--surface-2); margin-left: 24px; }
.support-bericht__kop {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 0.8rem;
    color: var(--text-3);
    margin-bottom: 6px;
}
.support-bericht__kop strong { color: var(--text); font-size: 0.84rem; }
/* De tekst zoals hij is ingetypt, met de regelovergangen; Jinja escapet de inhoud. */
.support-bericht__tekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; color: var(--text); line-height: 1.5; }