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

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

.answer-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    min-height: clamp(460px, calc(100dvh - 250px), 920px);
    /* Match the home menu (nav-dropdown-menu) background. Exposed as a token so
       children that must read as part of the card — the question reframe — can
       inherit it instead of hard-coding a second copy that drifts per theme. */
    --answer-card-bg: #fff;
    background: var(--answer-card-bg);
    border: none;
    border-radius: var(--r);
    /* Clips the flat-cornered children below to this card's own rounded
       shape — without this, .answer-content-stack's square corners were
       poking past the card's rounding, reading as a cropped/flat bottom. */
    overflow: hidden;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

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

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

.answer-content-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Extra bottom slack so the last real line of text can be scrolled up
       clear of the fade/ask-bar zone instead of staying stuck under it. */
    padding: 0 0 var(--ask-bar-h);
    padding-inline: clamp(10px, 1.4vw, 24px);
    -webkit-mask-image: none;
    mask-image: none;
    background: var(--bg);
}

/* Vertical stack: hosts the verified-match banner, the question reframe and
   (see A3) the thinking-chip row. Was a horizontal space-between bar while it
   sat empty; nothing else mounts here, so restacking is safe. */
.answer-card-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.question-reframe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in srgb, var(--vf-orange) 60%, transparent);
    border-radius: var(--r-sm);
    /* Same surface as the answer card it sits in — the reframe is part of the
       answer, not a separate panel floating on top of it. */
    background: var(--answer-card-bg, var(--surface));
    width: min(100%, var(--answer-measure));
}

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

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

.question-reframe-text {
    /* Same S/M/L step as the answer body and the follow-up chips — this is
       the app restating the user's question, so it should not read smaller
       than the answer it introduces. */
    font-size: var(--reading-followup-size, var(--answer-followup-size, 0.85rem));
    line-height: 1.5;
    color: var(--text-2, var(--text));
}

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

.question-reframe-fix {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.7rem;
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.question-reframe-fix:hover { color: var(--vf-orange); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.answer-story-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: visible;
    padding: 2px 2px 2px 0;
    scroll-behavior: smooth;
    background: transparent;
    width: 100%;
}

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

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

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

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

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

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

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

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

.answer-current-question {
    margin: 0 0 12px 0;
    width: min(100%, calc(var(--answer-measure) - 6ch));
    max-width: min(100%, calc(var(--answer-measure) - 6ch));
    padding: 7px 11px;
    border-radius: var(--r) var(--r) 4px var(--r);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent 28%);
    background: var(--bg);
    color: var(--text-2);
    font-size: 0.8rem;
    line-height: 1.42;
    font-weight: 500;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    text-overflow: clip;
    text-align: left;
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
    clear: both;
    overflow: visible;
    word-break: break-word;
    max-height: none;
    min-height: fit-content;
    position: sticky;
    top: 0;
    z-index: 40;
    isolation: isolate;
    box-shadow: 0 1px 0 rgba(0, 17, 23, 0.06);
}

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

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

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

@keyframes question-card-breath {
    0%,
    100% {
        border-color: rgba(201, 138, 76, 0.22);
        box-shadow: 0 0 0 1px rgba(201, 138, 76, 0.16), 0 0 0 0 rgba(201, 138, 76, 0.0);
    }
    50% {
        border-color: rgba(201, 138, 76, 0.34);
        box-shadow: 0 0 0 1px rgba(201, 138, 76, 0.24), 0 0 0 7px rgba(201, 138, 76, 0.0);
    }
}

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

.answer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.answer-meta-chip {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-3);
    background: var(--surface-3, rgba(255,255,255,0.06));
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 2px 8px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* structured sections rendered from done event fields */
.answer-section { margin-bottom: 1.1rem; }
.answer-section:last-child { margin-bottom: 0; }
.answer-section-label {
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-3);
    margin-bottom: 4px;
}
.answer-section-body {
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--text);
    word-break: break-word;
    max-width: var(--answer-measure);
    width: min(100%, var(--answer-measure));
    margin-inline: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}
.answer-section-body p { margin: 0 0 0.68em; }
.answer-section-body p:last-child { margin-bottom: 0; }
.answer-section-body ul,
.answer-section-body ol {
    margin: 0 0 0.68em 0;
    padding-left: 1.6em;
}
.answer-section-body ul { list-style-type: disc; }
.answer-section-body ol { list-style-type: decimal; }
.answer-section-body li { margin: 0.22em 0; }
.answer-section-body strong { color: var(--text-1); }
.answer-section-body h1,
.answer-section-body h2,
.answer-section-body h3,
.answer-section-body h4 {
    margin: 0.62em 0 0.3em;
    line-height: 1.36;
    color: var(--text-1);
    font-weight: 700;
}
.answer-section-body h1 { font-size: 1.15rem; }
.answer-section-body h2 { font-size: 1.05rem; }
.answer-section-body h3 { font-size: 0.97rem; }
.answer-section-body h4 { font-size: 0.9rem; }
.answer-section-body blockquote {
    margin: 0.8em 0;
    padding: 0.45em 0.8em;
    border-left: 3px solid rgba(201, 138, 76, 0.24);
    background: rgba(201, 138, 76, 0.05);
    border-radius: 0 8px 8px 0;
    color: var(--text-2);
}
.answer-section-body code {
    font-family: inherit;
    font-size: 0.88em;
    padding: 0.05em 0.3em;
    border-radius: var(--r-sm);
    background: rgba(13, 28, 59, 0.06);
}
.answer-section-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8em 0;
    font-size: 0.84em;
}
.answer-section-body th,
.answer-section-body td {
    border: 1px solid var(--border);
    padding: 0.38em 0.48em;
    text-align: left;
}
.answer-section-body th {
    background: var(--surface-2);
    color: var(--text-1);
    font-weight: 700;
}

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

.answer-source-badge {
    display: inline-block;
    padding: 0.06em 0.42em;
    border-radius: 0.35em;
    border: 1px solid transparent;
    font-size: 0.76em;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.answer-card.reading-size-s #answer-pre,
.answer-card.reading-size-s .answer-section-body,
.answer-card.reading-size-s .answer-story-scroll .conv-turn-answer {
    font-size: 0.76rem;
}

.answer-card.reading-size-s {
    --answer-followup-size: 0.76rem;
    --reading-followup-size: 0.76rem;
    --reading-followup-pad-y: 5px;
    --reading-followup-pad-x: 9px;
}

.answer-card.reading-size-m {
    --answer-followup-size: 0.85rem;
    --reading-followup-size: 0.85rem;
    --reading-followup-pad-y: 6px;
    --reading-followup-pad-x: 10px;
}

.answer-card.reading-size-l #answer-pre,
.answer-card.reading-size-l .answer-section-body,
.answer-card.reading-size-l .answer-story-scroll .conv-turn-answer {
    font-size: 1.04rem;
}

.answer-card.reading-size-l {
    --answer-followup-size: 1.04rem;
    --reading-followup-size: 1.04rem;
    --reading-followup-pad-y: 7px;
    --reading-followup-pad-x: 11px;
}

.answer-card.reading-profile-professional {
    --answer-measure: 72ch;
}

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

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

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

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

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

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

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

.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer .legal-citation,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer .legal-citation,
.answer-card.reading-profile-professional .answer-story-scroll .conv-turn-answer blockquote,
.answer-card.reading-profile-professional .answer-story-scroll pre.conv-turn-answer blockquote,
.answer-card.reading-profile-professional .answer-section-body blockquote {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.96em;
    line-height: 1.74;
    border-left-width: 2px;
}

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

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

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

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

.answer-card.reading-spacing-compact #answer-pre,
.answer-card.reading-spacing-compact .answer-section-body,
.answer-card.reading-spacing-compact .answer-story-scroll .conv-turn-answer {
    line-height: 1.58;
}

.answer-card.reading-spacing-comfortable #answer-pre,
.answer-card.reading-spacing-comfortable .answer-section-body,
.answer-card.reading-spacing-comfortable .answer-story-scroll .conv-turn-answer {
    line-height: 1.86;
}

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

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

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

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

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

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

.ask-bar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding-top: 34px;
    padding-bottom: 4px;
    background: linear-gradient(to bottom, rgba(236, 238, 241, 0) 0%, var(--bg) 65%);
    pointer-events: none;
}

.ask-bar-fixed .ask-bar-inner,
.ask-bar-fixed .ask-bar-credit {
    pointer-events: auto;
}

.welcome-card {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 14cm;
    margin: 0;
    padding: 0;
    z-index: 95;
    pointer-events: none;
}

@media (min-width: 821px) {
    .welcome-card {
        left: var(--ask-main-left, calc(18px + var(--conv-w) + 14px));
        right: var(--ask-main-right, calc(18px + var(--sidebar-w) + 14px));
        top: calc((100dvh - var(--ask-bar-h, 180px)) / 2);
        width: min(100%, 14cm);
        max-width: 14cm;
        margin-left: auto;
        margin-right: auto;
        transform: translate(0, -50%);
    }
}

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

.welcome-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--r);
    background: var(--bg);
    box-shadow: 0 6px 18px rgba(14, 22, 34, 0.08);
    text-align: center;
    pointer-events: auto;
}

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

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

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

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

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

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

.followup-continuity {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.followup-continuity-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--vf-orange) 66%, var(--text-3));
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.followup-chip--continuity {
    border-style: dashed;
    color: var(--text-2);
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.followup-chip--continuity:hover {
    color: var(--blue);
}

.followup-corrections {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.followup-corrections-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--text-2) 72%, var(--text-3));
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.followup-chip--correction {
    border-style: dashed;
    color: var(--text-2);
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.followup-chip--correction:hover {
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 36%, var(--border-2));
    background: color-mix(in srgb, var(--blue-bg) 62%, transparent);
}

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

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

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

#ask-form {
    padding: 5px 12px 3px;
}

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

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

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

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

    .app-main--chat .conv-sidebar {
        overflow-y: auto;
        overflow-x: hidden;
    }

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

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

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

    .app-main--chat #work-memory-card {
        flex-shrink: 0;
    }

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

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

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

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

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

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

    /* The bar's background spans the full screen width, but its available
       content area (padding-left/right) is shrunk to the middle (chat)
       column of the 3-column grid. The card itself (max-width: 16cm, see
       .ask-bar-inner) then centers within that available area — so it's
       always ~16cm wide when there's room, and shrinks to fit otherwise. */
    .ask-bar-fixed {
        padding-left: var(--ask-main-left, calc(18px + var(--conv-w) + 14px));
        padding-right: var(--ask-main-right, calc(18px + var(--sidebar-w) + 14px));
    }
}

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

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

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

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

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

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

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

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

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--border-2);
    border-radius: var(--r);
    box-shadow: 0 8px 28px rgba(0, 17, 23, 0.14);
    overflow: hidden;
    z-index: 400;
    animation: fadeIn 0.14s ease;
}

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

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

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    border-bottom: 1px solid var(--border);
}

.nav-dropdown-item:last-child { border-bottom: none; }
.nav-dropdown-item:hover { background: var(--blue-bg); color: var(--blue); }

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

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

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

/* Fix: .header-nav a (0,1,1) overrides .nav-dropdown-item (0,1,0) for <a> children,
   causing pale-blue text and wrong padding. These rules win at (0,2,1) / (0,3,1). */
.nav-dropdown a.nav-dropdown-item {
    color: var(--text);
    padding: 10px 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}
.nav-dropdown a.nav-dropdown-item:last-child { border-bottom: none; }
.nav-dropdown a.nav-dropdown-item:hover {
    background: var(--blue-bg);
    color: var(--blue);
}

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

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

/* Temporary UX toggle: hide "Markeer" feedback action in chat while retaining backend/code. */
.chat-actions .flag-trigger-btn,
#flag-answer-btn,
.flag-form-panel {
    display: none !important;
}

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

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

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

.work-memory-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg);
    max-height: min(46vh, 380px);
    overflow: auto;
}

.work-memory-card h2 {
    margin-bottom: 6px;
}

.work-memory-hint {
    margin: -6px 0 2px;
    color: var(--text-3);
    font-size: 0.75rem;
    line-height: 1.4;
}

.work-memory-fields {
    display: grid;
    gap: 6px;
}

.work-memory-fields label {
    margin-bottom: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-2);
}

.work-memory-fields textarea,
.work-memory-fields input[type="text"] {
    width: 100%;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--bg) 86%, #ffffff 14%);
    color: var(--text);
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 6px 8px;
}

.work-memory-fields textarea {
    resize: vertical;
    min-height: 52px;
    max-height: 92px;
}

.work-memory-advanced {
    margin-top: 2px;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}

.work-memory-advanced summary {
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
    user-select: none;
}

.work-memory-advanced-fields {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.work-memory-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.work-memory-actions .btn-secondary,
.work-memory-actions .btn-danger-sm {
    margin: 0;
    flex: 1 1 0;
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.work-memory-status {
    font-size: 0.74rem;
    line-height: 1.35;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    color: var(--text-3);
    background: rgba(255, 255, 255, 0.45);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.manual-tip,
.manual-warn {
    max-inline-size: var(--manual-copy-measure);
    font-size: 0.86rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
    word-break: normal;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ask-controls-row .stream-error-banner {
    margin-left: 0;
    flex: 1 1 260px;
    min-height: 26px;
    align-self: center;
}

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

.ask-controls-row .corpus-filter-toggle svg {
    width: 12px;
    height: 12px;
}

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

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

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

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

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

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

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

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

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

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

.ask-input-row textarea {
    flex: 1;
    resize: none;
    /* Matches the JS auto-resize cap (Math.min(scrollHeight, 140)) — the
       textarea grows upward (card is bottom-anchored) as text wraps, up to
       140px, then scrolls internally instead of clipping silently. */
    overflow-y: auto;
    min-height: 26px;
    max-height: 140px;
    border: none;
    border-radius: var(--r-sm);
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text);
    /* No border, no fill of its own — reads as part of the card. */
    background: transparent;
    outline: none;
}

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

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

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

.ask-send-btn--stop {
    opacity: 1;
    background: color-mix(in srgb, var(--vf-orange) 18%, transparent);
    color: var(--vf-orange);
}

.ask-send-btn--stop:hover {
    background: color-mix(in srgb, var(--vf-orange) 24%, transparent);
    transform: translateY(-1px);
}


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

.web-sources {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    width: min(100%, var(--answer-measure));
}

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

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

.web-sources-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.76rem;
    line-height: 1.45;
}

.web-sources-item a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

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

.web-sources-host {
    font-size: 0.68rem;
    color: var(--text-3);
    white-space: nowrap;
}

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

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

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

.persona-menu--scope {
    min-width: 268px;
    max-width: min(320px, calc(100vw - 24px));
}

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

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

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

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

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

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

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

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