/* Auto-split from styles.css lines 4315-5636 */

/* ── References panel ────────────────────────────────────── */

.references-card h2 { margin-bottom: 10px; }

.references-card {
    /* Zelfde ondergrond als de ask-card/welkomstkaart in dit thema (#fff,
       zie .ask-bar-inner's --ask-card-surface) -- was var(--bg), de
       paginakleur, een tint grijziger dan de andere kaarten. Donker thema
       override staat in 90-dark-theme.css (var(--bg) is daar al gelijk). */
    background: var(--panel-surface);
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#references-content {
    overflow-x: hidden;
}

/* Reference groups (Wetgeving / Jurisprudentie / Bronpassages) */
.refs-group { margin-bottom: 14px; }
.refs-group:last-child { margin-bottom: 0; }

.refs-group-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

.refs-group-label {
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    flex: 1;
}

.refs-group-count {
    font-size: 0.67rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r);
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid rgba(201, 138, 76, 0.18);
    flex-shrink: 0;
}

/* Law / case-law items */
.refs-law-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 3px 2px;
    font-size: 0.77rem;
    color: var(--text-2);
    line-height: 1.45;
    border-bottom: 1px solid transparent;
}

.refs-law-item:last-child { border-bottom: none; }

.refs-law-icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    background: var(--blue-bg);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.70rem;
    font-weight: 800;
    margin-top: 1px;
}

.refs-law-icon--case {
    background: var(--warn-bg);
    color: var(--warn);
}

/* Passage citation cards */
.ref-item {
    padding: 9px 11px;
    border-radius: var(--r-sm);
    background: var(--panel-surface);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    margin-bottom: 6px;
    transition: background 0.18s, border-color 0.18s, border-left-color 0.18s, box-shadow 0.18s;
    cursor: pointer;
}

.ref-item:hover {
    background: color-mix(in srgb, var(--panel-surface) 88%, var(--blue-bg));
    border-color: rgba(201, 138, 76, 0.18);
    border-left-color: var(--blue);
}

.ref-item:last-child { margin-bottom: 0; }

.ref-item--visible {
    background: color-mix(in srgb, var(--panel-surface) 88%, var(--blue-bg));
    border-color: rgba(201, 138, 76, 0.18);
    border-left-color: var(--blue);
    box-shadow: 0 1px 6px rgba(201, 138, 76, 0.07);
}

@keyframes ref-flash {
    0%   { background: rgba(201, 138, 76, 0.16); border-left-color: var(--blue-2); }
    60%  { background: rgba(201, 138, 76, 0.08); }
    100% { background: var(--bg); border-left-color: transparent; }
}

.ref-item--flash { animation: ref-flash 1.1s ease forwards; }

.ref-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.3;
}

.ref-num-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 165px;
    min-height: 18px;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: var(--blue);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-num-badge--wetgeving {
    background: color-mix(in srgb, var(--blue) 82%, var(--navy) 18%);
}

.ref-num-badge--jurisprudentie {
    background: color-mix(in srgb, var(--ok) 84%, var(--navy) 16%);
}

.ref-num-badge--bekendmaking {
    background: color-mix(in srgb, var(--warn) 84%, var(--navy) 16%);
}

.ref-num-badge--document {
    background: color-mix(in srgb, var(--text-2) 74%, var(--navy) 26%);
}

.ref-num-badge--geverifieerd {
    background: color-mix(in srgb, var(--navy-2) 72%, var(--blue) 28%);
}

.ref-item--wetgeving {
    border-left: 2px solid color-mix(in srgb, var(--blue) 52%, transparent 48%);
}

.ref-item--jurisprudentie {
    border-left: 2px solid color-mix(in srgb, var(--ok) 52%, transparent 48%);
}

.ref-item--bekendmaking {
    border-left: 2px solid color-mix(in srgb, var(--warn) 52%, transparent 48%);
}

.ref-item--document {
    border-left: 2px solid color-mix(in srgb, var(--text-3) 55%, transparent 45%);
}

.ref-item--geverifieerd {
    border-left: 2px solid color-mix(in srgb, var(--navy-2) 52%, transparent 48%);
}

.ref-source-name {
    flex: 0 0 100%;
    order: 10;
    min-width: 0;
    margin-left: 0;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.32;
}

/* Kamerstuk cards: place the long source text on the next line so the
   orange badge stays readable and doesn't get crowded. */
.ref-item--kamerstuk .ref-header {
    flex-wrap: wrap;
    row-gap: 3px;
}

.ref-item--kamerstuk .ref-source-name {
    flex: 0 0 100%;
    order: 10;
    margin-left: 0;
    white-space: normal;
    line-height: 1.32;
}

.ref-page {
    font-size: 0.70rem;
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.ref-external-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--text-3);
    font-size: 0.72rem;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.ref-external-link:hover {
    background: var(--blue-bg);
    color: var(--blue);
}

.ref-text {
    font-size: 0.77rem;
    color: var(--text-2);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    padding-left: 22px;
    font-style: italic;
}

/* Inline citation badge inside the answer text */
.ref-inline {
    display: inline;
    background: var(--blue-bg);
    color: var(--blue-2);
    border: 1px solid rgba(201, 138, 76, 0.28);
    border-radius: 3px;
    padding: 0 3px;
    font-size: 0.78em;
    font-weight: 700;
    cursor: pointer;
    margin: 0 1px;
    vertical-align: baseline;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
}

.ref-inline:hover {
    background: rgba(201, 138, 76, 0.15);
    border-color: var(--blue-2);
}

/* Preliminary loading state */
.refs-preliminary-note {
    font-size: 0.76rem;
    color: var(--text-3);
    font-style: italic;
    margin: 0 0 6px;
}

.ref-item--preliminary { opacity: 0.72; }

.ref-type-pill {
    display: inline-block;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid rgba(201, 138, 76, 0.18);
    margin-right: 5px;
    vertical-align: middle;
}

/* ── Mode card ───────────────────────────────────────────── */

.mode-card { padding: 12px 16px; }

.mode-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: var(--btn-r);
    border: 1.5px solid var(--border-2) !important;
    background: rgba(255, 255, 255, 0.45) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
    flex: 1;
    min-width: 130px;
    text-align: left;
    font-family: inherit;
}

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

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

.mode-btn-icon {
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.14s, color 0.14s;
}

.mode-btn-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Zonder dit krimpt een flexitem niet onder zijn inhoudsbreedte en helpt
       afbreken nog niets. */
    min-width: 0;
}

.mode-btn-label {
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    transition: color 0.14s;
    overflow-wrap: anywhere;
}

.mode-btn-sub {
    font-size: 0.68rem;
    color: var(--text-3);
    /* Was nowrap. Dat gaat goed zolang de ondertitel kort is ("Mistral API"),
       maar de pipelineknoppen dragen een hele zin — die liep op een smal scherm
       buiten de knop. Laten afbreken is hier goedkoper dan de tekst inkorten. */
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 400;
}

/* Active states */
.mode-btn--active.mode-btn--claude {
    background: var(--ok-bg) !important;
    border-color: var(--ok-bdr) !important;
    box-shadow: var(--shadow-sm) !important;
}
.mode-btn--active.mode-btn--claude .mode-btn-label { color: var(--ok); }
.mode-btn--active.mode-btn--claude .mode-btn-icon  { opacity: 1; color: var(--ok); }

.mode-btn--active.mode-btn--mistral {
    background: var(--blue-bg) !important;
    border-color: var(--blue-2) !important;
    box-shadow: var(--shadow-sm) !important;
}
.mode-btn--active.mode-btn--mistral .mode-btn-label { color: var(--blue-2); }
.mode-btn--active.mode-btn--mistral .mode-btn-icon  { opacity: 1; color: var(--blue-2); }

/* Pipelineprofiel: dezelfde selectiekleur als de LLM-keuze erboven. Dit stond
   op de waarschuwingskleur, waardoor een normale keuze eruitzag alsof er iets
   mis was — oranje betekent in de rest van de app "let op", niet "geselecteerd". */
.mode-btn--active.mode-btn--quality,
.mode-btn--active.mode-btn--fast {
    background: var(--blue-bg) !important;
    border-color: var(--blue-2) !important;
    box-shadow: var(--shadow-sm) !important;
}
.mode-btn--active.mode-btn--quality .mode-btn-label,
.mode-btn--active.mode-btn--fast .mode-btn-label { color: var(--blue-2); }
.mode-btn--active.mode-btn--quality .mode-btn-icon,
.mode-btn--active.mode-btn--fast .mode-btn-icon { opacity: 1; color: var(--blue-2); }

.mode-status-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.mode-status-chip {
    font-size: 0.75rem;
    padding: 2px 9px;
    border-radius: var(--r-sm);
    font-weight: 600;
    white-space: nowrap;
}

.chip-ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-bdr);   }
.chip-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bdr); }

.mode-error {
    margin: 7px 0 0;
    font-size: 0.82rem;
    color: var(--err);
    background: var(--err-bg);
    border: 1px solid var(--err-bdr);
    border-radius: var(--r-sm);
    padding: 6px 12px;
}

/* The #stream-card block (progress bar, phase icon, phase text, pinned
   question mirror) was removed along with its markup — it carried
   `display: none !important` and never rendered. Progress is now
   narrated by the thinking-chip row in .answer-card-header. */

/* ── Step progress dots ───────────────────────────────────── */

/* Retained for the thinking-chip active state; the .stream-phase-icon
   rules that used to drive it were removed with #stream-card. */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.28; }
}

.stream-cursor {
    display: inline-block;
    width: 2px; height: 1.1em;
    background: var(--blue-2);
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: blink-cursor 0.9s step-end infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Agent section wrapper ───────────────────────────────── */

.agent-panel-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ── Auditor inline warning ──────────────────────────────── */

.auditor-warning {
    background: var(--warn-bg);
    border: 1px solid var(--warn-bdr);
    border-radius: var(--r-sm);
    color: var(--warn);
    font-size: 0.83rem;
    line-height: 1.6;
    padding: 9px 13px;
}

.auditor-warning-icon { margin-right: 4px; }

.auditor-warning-flag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 3px;
    padding: 1px 6px;
    margin-right: 4px;
    vertical-align: middle;
}

.auditor-warning-flag--medium {
    background: var(--warn-bg);
    border: 1px solid var(--warn-bdr);
    color: var(--warn);
}

.auditor-warning-flag--high {
    background: var(--err-bg);
    border: 1px solid var(--err-bdr);
    color: var(--err);
}

/* ── Guardrail badge ─────────────────────────────────────── */

#guardrail-badge-wrap {
    margin-top: 8px;
    padding: 8px 14px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
}

.guardrail-badge {
    display: inline-block;
    font-size: 0.80rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--r-sm);
}

.guardrail-badge--ok       { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-bdr);   }
.guardrail-badge--repaired { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bdr); }
.guardrail-badge--fail     { background: var(--err-bg);  color: var(--err);  border: 1px solid var(--err-bdr);  }

.guardrail-violations { margin-top: 6px; font-size: 0.79rem; color: var(--text-2); }
.guardrail-violations ul { margin: 3px 0 0; padding-left: 17px; }
.guardrail-violations li { margin-bottom: 6px; }

/* De technische omschrijving onder de zin in mensentaal: die draagt de details
   (welk artikel, welk citaat) en hoort leesbaar te zijn, maar niet als eerste. */
.guardrail-detail {
    display: block;
    margin-top: 2px;
    color: var(--text-3, var(--text-2));
    font-size: 0.94em;
}

/* Wat de controle wél en niet zegt. Zonder deze regel leest een groen vinkje
   als "dit antwoord klopt", en dat is niet wat er is nagekeken. */
.guardrail-reikwijdte {
    margin: 6px 0 0;
    font-size: 0.94em;
    color: var(--text-3, var(--text-2));
}

/* ── Connection panel (Verbanden & bronkwaliteit) ────────── */

.connection-panel {
    margin-top: 8px;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    padding: 0;
    overflow: hidden;
}

.connection-panel-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-2);
    user-select: none;
    list-style: none;
}

.connection-panel-summary::-webkit-details-marker { display: none; }

.connection-panel[open] .connection-panel-summary {
    border-bottom: 1px solid var(--border);
}

.connection-body {
    padding: 9px 13px;
    font-size: 0.80rem;
    color: var(--text-2);
}

.connection-body p { margin: 3px 0; }
.connection-body strong { color: var(--text); }
.connection-repaired { color: var(--warn); font-weight: 600; }

.xref-details { margin-top: 7px; }
.xref-details summary {
    cursor: pointer;
    font-size: 0.79rem;
    color: var(--text-2);
    margin-bottom: 4px;
}
.xref-details ul { margin: 4px 0 0; padding-left: 16px; }
.xref-details li { margin-bottom: 3px; line-height: 1.4; }

/* ── Generate AV page ────────────────────────────────────── */

.av-disclaimer-box {
    background: var(--warn-bg);
    border: 1px solid var(--warn-bdr);
    border-radius: var(--r-sm);
    padding: 9px 14px;
    font-size: 0.85rem;
    color: var(--warn);
    margin-top: 11px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.av-form-grid { display: grid; gap: 15px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form-field { display: flex; flex-direction: column; gap: 5px; }

.av-progress-bar { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 9px; }

.av-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--blue), var(--blue-2));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.av-section-card { margin-bottom: 13px; animation: fadeIn 0.28s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.av-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }

.av-section-badge {
    flex-shrink: 0;
    width: 25px; height: 25px;
    border-radius: var(--r-sm);
    background: var(--blue);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.78rem;
}

.av-section-title { margin: 0; font-size: 0.93rem; color: var(--text); font-weight: 700; }

.av-section-body {
    font-size: 0.89rem;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    max-width: var(--legal-measure);
}

/* AV generator honours the same S/M/L reading-size preference as the
   conversation panel — applied via reading-size-s/m/l on <body> by JS. */
body.reading-size-s .av-section-body { font-size: 0.80rem; }
body.reading-size-m .av-section-body { font-size: 0.89rem; }
body.reading-size-l .av-section-body { font-size: 1.02rem; }
body.reading-size-s .av-form-grid,
body.reading-size-s .av-form-grid input,
body.reading-size-s .av-form-grid select,
body.reading-size-s .av-form-grid textarea,
body.reading-size-s .settings-hint,
body.reading-size-s .av-disclaimer-box,
body.reading-size-s #progress-label,
body.reading-size-s #export-form button,
body.reading-size-s .inline-actions button {
    font-size: 0.8rem;
}
body.reading-size-m .av-form-grid,
body.reading-size-m .av-form-grid input,
body.reading-size-m .av-form-grid select,
body.reading-size-m .av-form-grid textarea,
body.reading-size-m .settings-hint,
body.reading-size-m .av-disclaimer-box,
body.reading-size-m #progress-label,
body.reading-size-m #export-form button,
body.reading-size-m .inline-actions button {
    font-size: 0.89rem;
}
body.reading-size-l .av-form-grid,
body.reading-size-l .av-form-grid input,
body.reading-size-l .av-form-grid select,
body.reading-size-l .av-form-grid textarea,
body.reading-size-l .settings-hint,
body.reading-size-l .av-disclaimer-box,
body.reading-size-l #progress-label,
body.reading-size-l #export-form button,
body.reading-size-l .inline-actions button {
    font-size: 1.02rem;
}
body.reading-size-s .av-form-grid h2,
body.reading-size-s #result-section h2 { font-size: 1.02rem; }
body.reading-size-m .av-form-grid h2,
body.reading-size-m #result-section h2 { font-size: 1.11rem; }
body.reading-size-l .av-form-grid h2,
body.reading-size-l #result-section h2 { font-size: 1.24rem; }

/* ── Library page ────────────────────────────────────────── */

.lib-source-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 13px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
}

.lib-source-tab {
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid rgba(201, 138, 76, 0.15);
    border-radius: var(--r-sm);
    padding: 5px 12px;
    font-size: 0.80rem;
    cursor: pointer;
    width: auto;
    box-shadow: none !important;
    transition: background 0.12s;
}

.lib-source-tab:hover { background: rgba(201, 138, 76, 0.13); }

.lib-tab-active {
    background: var(--blue) !important;
    color: #fff !important;
    border-color: var(--blue) !important;
}

.lib-source-panel { margin-top: 4px; }

.lib-docs-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.lib-col { min-width: 0; }
.lib-col-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.lib-col-header h2 { margin: 0; }

.lib-col-badge {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    white-space: nowrap;
}

.lib-col-badge-static  { background: var(--blue-bg); color: var(--blue); border: 1px solid rgba(201, 138, 76,0.16); }
.lib-col-badge-dynamic { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-bdr);        }

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

.lib-dropzone-compact { min-height: 68px; padding: 11px 10px; margin-bottom: 9px; }

.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 7px; }

/* ── Fetch row ───────────────────────────────────────────── */

.fetch-row {
    display: flex;
    gap: 7px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.fetch-row input, .fetch-row select { flex: 1; min-width: 110px; }
.fetch-row button { flex-shrink: 0; white-space: nowrap; }

/* ── Answer actions bar ──────────────────────────────────── */

/* Inline, part of the conversation flow — sits right after the current
   answer's text inside the scroll area, so it scrolls away with that turn
   instead of persisting as a fixed footer below the scroll. */
.answer-actions-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    padding-top: 2px;
}

.answer-actions-bar[hidden] { display: none; }

/* Inner wrapper created by JS (answer-actions div inside the bar) */
.answer-actions-bar .answer-actions {
    display: contents; /* flatten into the bar's own flex context */
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Legacy: answer-actions when still used inside scroll (historical turns etc.) */
.answer-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.answer-actions-bar #export-form {
    margin: 0;
}

.answer-actions-bar .answer-actions .corpus-filter-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.answer-actions-bar .answer-actions #copy-answer-btn,
.answer-actions-bar .answer-actions #letter-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
}

.answer-export-dropdown {
    position: relative;
    display: inline-flex;
}

.answer-export-dropdown summary {
    list-style: none;
}

.answer-export-dropdown summary::-webkit-details-marker {
    display: none;
}

.answer-actions-bar .answer-actions .answer-export-trigger {
    width: auto !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    gap: 6px;
}

/* Oordeel van de gebruiker over dit antwoord. Rechts van de exportknop en
   dezelfde maat als de rest van de balk: het is een terzijde, geen oproep. */
.answer-feedback {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* Een lijntje tussen wat je mét het antwoord doet (exporteren, kopiëren,
       opnieuw) en wat je ervan vindt (19-10-2026). */
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
}

.answer-actions-bar .answer-actions .answer-feedback-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    color: var(--text-3);
}

.answer-actions-bar .answer-actions .answer-feedback-btn:hover:not(:disabled) {
    color: var(--text-1);
}

.answer-actions-bar .answer-actions .answer-feedback-btn--gekozen {
    color: var(--blue);
}

.answer-actions-bar .answer-actions .answer-feedback-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.answer-feedback-status {
    font-size: 0.78rem;
    color: var(--text-3);
    padding-inline-start: 4px;
}

.answer-export-label {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.answer-export-chevron {
    opacity: 0.78;
    transition: transform 0.16s ease;
}

.answer-export-dropdown[open] .answer-export-chevron {
    transform: rotate(180deg);
}

.answer-export-dropdown:not([open]) .answer-export-menu {
    display: none;
}

/* Het menu erft van .persona-menu, en die is rechts verankerd (right: 0) omdat
   hij daar hoort bij een knop rechts in de vraagbalk. De exportknop staat juist
   links onder het antwoord, dus groeide het menu naar links en verdween het
   achter het gesprekspaneel. Hier andersom verankeren: uitlijnen op de
   linkerrand van de knop, zodat het naar rechts openklapt.

   De max-width blijft aan de viewport hangen, dus op een smal scherm loopt het
   er nog steeds niet uit. */
.answer-export-dropdown .answer-export-menu {
    left: 0;
    right: auto;
}

/* ── AI-markering (AI Act art. 50) ─────────────────────────
   Moet leesbaar zijn zonder het antwoord te overstemmen. Staat daarom rechts
   in de actiebalk, in de kleur van bijschriften: zichtbaar bij elk antwoord,
   maar geen banner die iemand geneigd is weg te klikken. */
.ai-generated-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Bewust géén `margin-left: auto`: knoppen die later worden toegevoegd
       (de briefknop verschijnt pas als de route dat toelaat) belanden dan
       rechts náást de markering, wat eruitziet alsof er iets is misgegaan. */
    margin-left: 4px;
    /* Zonder kader (19-10-2026): als pil leek het een knop of een filter. De
       markering zelf blijft, met tekst, op elk antwoord (AI Act art. 50). */
    padding: 3px 4px;
    border: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    cursor: help;
}

.ai-generated-mark svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* ── Answer confidence row ───────────────────────────────── */

.answer-confidence-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    flex-wrap: wrap;
}

.conf-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.conf-sep {
    color: var(--border-2);
    font-size: 0.80rem;
    user-select: none;
}

.conf-stat {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    cursor: help;
}

.conf-stat--ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-bdr);   }
.conf-stat--warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-bdr); }
.conf-stat--err  { background: var(--err-bg);  color: var(--err);  border: 1px solid var(--err-bdr);  }

/* Collapsed by default: one chip plus a short verdict. The four detail stats
   only appear when the reader asks for them. */
.conf-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    min-height: 26px;
}

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

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

.conf-summary .conf-stat { cursor: inherit; }

.conf-summary-note {
    font-size: 0.72rem;
    color: var(--text-3);
}

.conf-summary-chevron {
    color: var(--text-3);
    transition: transform 0.18s ease;
}

.conf-details[open] .conf-summary-chevron { transform: rotate(180deg); }

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

.conf-details-body {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.conf-profile {
    font-size: 0.72rem;
    color: var(--text-3);
}

.flag-saved-msg {
    font-size: 0.83rem;
    color: var(--ok);
    font-weight: 600;
    margin: 0;
}

/* ── Citation popover ────────────────────────────────────── */

.ref-popover {
    position: fixed;
    z-index: 1200;
    width: 420px;
    max-width: calc(100vw - 20px);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    box-shadow: 0 6px 24px rgba(42, 47, 54, 0.14), 0 1px 5px rgba(0,0,0,0.08);
    padding: 12px 14px 10px;
    font-size: 0.84rem;
    line-height: 1.52;
    animation: pop-in 0.13s ease;
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.ref-popover-header {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 7px;
}

.ref-popover-num {
    flex-shrink: 0;
    background: var(--blue-2);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 3px;
    padding: 1px 5px;
    margin-top: 1px;
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-popover-title {
    flex: 1;
    font-weight: 700;
    color: var(--blue-2);
    font-size: 0.83rem;
    word-break: break-word;
}

.ref-popover-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
    margin: -3px -4px 0 0;
}
.ref-popover-close:hover { color: var(--text); }

.ref-popover-sentence {
    color: var(--text);
    font-style: italic;
    margin-bottom: 8px;
    border-left: 2px solid var(--border-2);
    padding-left: 8px;
}

.ref-popover-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
}

.ref-popover-toggle {
    background: none;
    border: none;
    color: var(--blue-2);
    cursor: pointer;
    font-size: 0.79rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ref-popover-toggle:hover { color: var(--blue); }

.ref-popover-goto {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 0.79rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: auto;
}
.ref-popover-goto:hover { color: var(--text-2); }

.ref-popover-external {
    background: none;
    border: none;
    color: var(--blue-2);
    cursor: pointer;
    font-size: 0.79rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ref-popover-external:hover { color: var(--blue); }

/* Highlighted passage within the full text */
.ref-passage-highlight {
    background: rgba(201, 138, 76, 0.14);
    border-radius: 2px;
    font-weight: 700;
    font-style: normal;
    color: inherit;
    padding: 0 1px;
}
[data-theme="dark"] .ref-passage-highlight {
    background: rgba(99, 148, 249, 0.22);
}

/* ECLI paragraph/article badge in the ref panel */
.ref-ecli-lbl {
    display: inline-block;
    background: var(--blue-bg);
    color: var(--blue-2);
    border: 1px solid rgba(201, 138, 76, 0.22);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.70rem;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 0;
    flex-shrink: 0;
    vertical-align: middle;
}
[data-theme="dark"] .ref-ecli-lbl {
    background: rgba(99, 148, 249, 0.12);
    border-color: rgba(99, 148, 249, 0.28);
    color: #D9A070;
}

/* Court authority level display for ECLI citations */
.ref-court-authority {
    font-size: 0.67rem;
    color: var(--text-3);
    font-weight: 500;
    white-space: nowrap;
    margin-left: 0;
}

/* Kamerstuk non-binding label */
.ref-kamerstuk-badge {
    display: inline-block;
    background: rgba(140, 96, 32, 0.08);
    color: var(--warn);
    border: 1px solid rgba(140, 96, 32, 0.22);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    font-size: 0.67rem;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 0;
    vertical-align: middle;
    font-style: italic;
}

/* Ingetrokken regeling. Rood en niet cursief, anders dan het kamerstuk-merkteken:
   dat zegt "weeg dit lichter", dit zegt "dit geldt niet meer". Het verschil moet
   je zonder lezen zien, want in een bronnenlijst scant een jurist. */
.ref-vervallen-badge {
    display: inline-block;
    background: var(--err-bg);
    color: var(--err);
    border: 1px solid var(--err-bdr);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
    margin-left: 4px;
    vertical-align: middle;
}

/* Citator-lite: later rulings mention this ECLI */
.ref-later-citations-badge {
    display: inline-block;
    background: rgba(32, 96, 140, 0.08);
    color: var(--accent, #20608c);
    border: 1px solid rgba(32, 96, 140, 0.22);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    font-size: 0.67rem;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 0;
    vertical-align: middle;
}

/* Truncate long ECLI source names gracefully */
.ref-source-ecli {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: inline-block;
    vertical-align: middle;
}

.ref-popover-full {
    margin-top: 9px;
    border-top: 1px solid var(--border);
    padding-top: 9px;
    color: var(--text-2);
    max-height: 60vh;
    overflow-y: auto;
    font-size: 0.8rem;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
.ref-popover-full p {
    margin: 0 0 0.65em 0;
    white-space: normal;
}
.ref-popover-full p:last-child { margin-bottom: 0; }
.ref-passage-ellipsis {
    color: var(--text-3, #aaa);
    font-style: italic;
    text-align: center;
    margin: 0.25em 0 0.5em !important;
    letter-spacing: 0.08em;
}

/* ── Actions log ─────────────────────────────────────────── */

.actions-log { max-height: 170px; overflow-y: auto; padding: 0; margin: 0; list-style: none; }
.actions-log li {
    font-size: 0.77rem;
    color: var(--text-2);
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
}
.actions-log li:last-child { border-bottom: none; }

/* ── Utility ─────────────────────────────────────────────── */

.hidden { display: none !important; }

/* ── Bronkaarten naar de lat van de concurrent (20 september 2026) ──────────
   Eén kaart per bron met "N keer geciteerd", de passage ingeklapt tot twee
   regels, en twee handelingen: naar de officiële bron, en naar de plek in het
   antwoord. Tokens, geen vaste kleuren. */
.ref-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 2px;
}
.ref-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}
.ref-toggle {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--blue);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.ref-item .ref-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ref-item--open .ref-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.ref-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.ref-action {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px 9px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}
.ref-action:hover { border-color: var(--blue); color: var(--blue); }

/* De chip in de zin: de verwijzing zelf, licht omkaderd, klikbaar. */
.bronchip {
    display: inline;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--blue-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.bronchip:hover, .bronchip:focus-visible { background: color-mix(in srgb, var(--blue-bg) 50%, var(--blue-2)); }
@keyframes bronchip-flits {
    0%   { background: color-mix(in srgb, var(--blue-2) 60%, transparent); }
    100% { background: var(--blue-bg); }
}
.bronchip--flash { animation: bronchip-flits 1.2s ease forwards; }

/* De samenvattende bronnenregel onder het antwoord: telling, per soort een
   getal, en een knop naar het paneel. Een <summary>, dus klapbaar; de
   standaardmarker gaat weg en de kop zelf is de klikbare regel. */
.answer-section--bronnen > .bronnen-samenvatting {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    cursor: pointer;
    list-style: none;
    margin-bottom: 6px;
}
.answer-section--bronnen > .bronnen-samenvatting::-webkit-details-marker { display: none; }
.answer-section--bronnen > .bronnen-samenvatting .answer-section-label { margin: 0; }
.bronnen-telling {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}
.bronnen-soort {
    font-size: 0.72rem;
    color: var(--text-3);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
}
.bronnen-soort b { color: var(--text); font-weight: 700; }
/* "Paneel ›" staat sinds 19-10-2026 ná de <details> (een knop in een <summary>
   is een bediening in een bediening, WCAG 4.1.2). In beeld blijft hij rechts
   op de kopregel: de regel krijgt ruimte, de knop ligt erover. 12px is de
   padding-top van .answer-section--bronnen; de marge erboven valt door het
   blok heen. */
.bronnen-blok { position: relative; }
.bronnen-blok > .answer-section--bronnen > .bronnen-samenvatting { padding-right: 76px; }
.bronnen-blok > .bronnen-paneel-knop {
    position: absolute;
    top: 12px;
    right: 0;
    min-height: 24px;
}
.bronnen-paneel-knop {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--blue);
    background: none;
    border: 0;
    padding: 0 2px;
    cursor: pointer;
}