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

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

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

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

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

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

/* Focus styles for conversation elements */
.answer-story-scroll .conv-turn:focus-within {
    background: rgba(201, 138, 76, 0.04);
}

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

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

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

/* Pro Tip 1: Color Psychology - Use orange sparingly for emphasis */
.answer-story-scroll .conv-turn-answer .highlight-emphasis {
    background: rgba(201, 138, 76, 0.15);
    padding: 0 4px;
    border-radius: 2px;
    color: var(--text);
}

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

/* Pro Tip 2: Information Density - Layer information */
.answer-summary {
    background: rgba(201, 138, 76, 0.08);
    border-left: 3px solid var(--vf-orange);
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 0 4px 4px 0;
}

.answer-summary h3 {
    color: var(--vf-orange);
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.answer-summary p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.85rem;
    line-height: 1.6;
}

.details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vf-orange);
    font-size: 0.8rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.details-toggle:hover {
    background: rgba(201, 138, 76, 0.1);
}

.details-toggle svg {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.details-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

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

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

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

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

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

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

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

/* Pro Tip 4: Time Sensitivity - Show answer date and source freshness */
.answer-meta {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(201, 138, 76, 0.04);
    border-radius: var(--r-sm);
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-3);
}

.answer-timestamp {
    display: flex;
    align-items: center;
    gap: 6px;
}

.answer-freshness {
    display: flex;
    align-items: center;
    gap: 6px;
}

.freshness-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.freshness-current {
    background: rgba(31, 122, 82, 0.1);
    color: var(--ok);
}

.freshness-recent {
    background: rgba(201, 138, 76, 0.15);
    color: var(--vf-orange);
}

.freshness-old {
    background: rgba(140, 96, 32, 0.1);
    color: var(--warn);
}

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

/* Additional styles for JavaScript features */

/* New messages indicator */
.new-messages-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--vf-orange);
    color: white;
    padding: 8px 16px;
    border-radius: var(--r);
    font-size: 0.8rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(201, 138, 76, 0.3);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.new-messages-indicator:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(201, 138, 76, 0.4);
}

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

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

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

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

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

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

.conv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: sticky;
    top: 14px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

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

.conv-sidebar-top {
    padding: 8px 0 0;
    margin-top: 2px;
    border-top: 1px solid var(--border);
    border-bottom: none;
}

/* ── Dossier info card (left sidebar) ──────────────────────── */
.dossier-sidebar-card {
    position: relative;
    margin: 0 0 4px;
    padding: 9px 11px 8px;
    background: var(--blue-bg);
    border: 1px solid rgba(201, 138, 76, 0.22);
    border-radius: var(--r-sm);
    font-size: 0.78rem;
}
.dossier-sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.dossier-sidebar-icon {
    flex-shrink: 0;
    color: var(--blue);
    opacity: 0.85;
}
.dossier-sidebar-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.80rem;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dossier-sidebar-name:hover { color: var(--blue); text-decoration: underline; }
.dossier-sidebar-status {
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--r);
    text-transform: lowercase;
    letter-spacing: 0.01em;
    background: rgba(42, 47, 54, 0.08);
    color: var(--text-2);
}
.dossier-sidebar-status--actief  { background: rgba(31,122,82,0.12); color: var(--ok); }
.dossier-sidebar-status--gesloten { background: rgba(42,47,54,0.10); color: var(--text-3); }
.dossier-sidebar-status--wacht   { background: rgba(201,138,76,0.14); color: var(--blue); }

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

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

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

/* Empty state — shown instead of the card above when the conversation has
   no dossier yet, replacing the "+ Dossier" button that used to live in
   the ask bar. */
.dossier-sidebar-card--empty {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: 1px dashed var(--border-2);
}

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

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

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

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

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

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

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

/* This wrap sits near the top of a narrow (~210px) sidebar, unlike the ask
   bar's version of this menu. The shared .persona-menu opens upward and
   anchors to the small toggle button's own width, which would run off the
   top of the viewport here and risks overflowing the narrow sidebar's left
   edge. Anchor to the card itself instead (position:static on the wrap
   hands positioning up to the card, which spans the sidebar's safe width)
   and open downward, full width. */
.dossier-sidebar-add-wrap {
    position: static;
}
.dossier-sidebar-add-wrap .persona-menu {
    bottom: auto;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
}

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

.conv-new-btn--cta {
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--surface) 84%, var(--text-2) 16%);
    border-radius: var(--btn-r);
    background: color-mix(in srgb, var(--surface) 84%, var(--text-2) 16%);
    color: var(--text-2);
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: none;
}

.conv-new-btn--cta:hover {
    background: color-mix(in srgb, var(--surface) 78%, var(--text-2) 22%);
    color: var(--text);
    border-color: color-mix(in srgb, var(--surface) 78%, var(--text-2) 22%);
    transform: translateY(-1px);
    box-shadow: none;
}

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

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

.menu-icon-btn {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
    justify-content: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.conv-search-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    bottom: auto;
    right: 0;
    z-index: 20;
    min-width: 176px;
    width: max-content;
    max-width: min(220px, calc(100vw - 24px));
    max-height: min(52vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    border: 1.5px solid var(--border-2);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.conv-search-menu--open { display: flex; flex-direction: column; gap: 1px; }

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

.conv-search-menu-option {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text-2);
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 7px 10px;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.12s, color 0.12s;
}

.conv-search-menu-option::before {
    content: "✓";
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    color: var(--blue-2);
    opacity: 0;
    transform: translateX(-1px);
}

.conv-search-menu-option:hover { background: var(--blue-bg); color: var(--text-1); }

.conv-search-menu-option--active,
.conv-search-menu-option[aria-checked="true"] {
    color: var(--text-1) !important;
    font-weight: 600;
    background: var(--menu-active-bg) !important;
}

.conv-search-menu-option--active::before {
    opacity: 1;
}

/* Final active-state guard for pill dropdown menus.
   Keep at least this specific so later generic button/link rules cannot wash out state. */
.persona-menu .persona-option--active,
.persona-menu .persona-option[aria-checked="true"],
.conv-search-menu .conv-search-menu-option--active,
.conv-search-menu .conv-search-menu-option[aria-checked="true"] {
    background: var(--menu-active-bg) !important;
    color: var(--text-1) !important;
    box-shadow: inset 0 0 0 1px var(--border) !important;
}

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

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

.conv-list { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }

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

.conv-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 1px 6px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    position: relative;
    cursor: pointer;
}
.conv-item:hover { background: rgba(255,255,255,0.70); border-color: var(--border); }
.conv-item--active {
    background: rgba(201, 138, 76,0.07);
    border-color: rgba(201, 138, 76,0.18);
}

.conv-item-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 1;
    grid-row: 1;
}
.conv-item--active .conv-item-name { color: var(--blue-2); font-weight: 600; }

.conv-item-meta {
    font-size: 0.68rem;
    color: var(--text-3);
    grid-column: 1;
    grid-row: 2;
}

.conv-item-context {
    font-size: 0.62rem;
    color: color-mix(in srgb, var(--text-3) 82%, transparent);
    grid-column: 1;
    grid-row: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-item-del {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    background: none !important;
    border: none !important;
    color: var(--text-3) !important;
    opacity: 0;
    cursor: pointer;
    padding: 3px 4px !important;
    border-radius: 3px !important;
    transition: opacity 0.12s, color 0.12s;
    box-shadow: none !important;
    font-size: 0.8rem;
    line-height: 1;
}
.conv-item:hover .conv-item-del,
.conv-item:focus-within .conv-item-del,
.conv-item-del:focus-visible { opacity: 1; }
.conv-item-del:hover { color: var(--err) !important; background: var(--err-bg) !important; }

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

.conv-sidebar-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Werkgeheugen-paneel ─────────────────────────────────────────────────
   Zelfde vorm en gedrag als het bronnenpaneel hierboven; de tabknop staat
   eronder zodat de twee niet overlappen. */

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

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

.wm-drawer-toggle[hidden] { display: none !important; }

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

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

/* In het paneel mag het werkgeheugen de volle hoogte gebruiken; als kaart in
   de zijbalk was het gekapt op 46vh met een eigen scrollbalk. */
.wm-drawer .work-memory-card {
    max-height: none;
    overflow: visible;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

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

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

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

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

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

    .answer-card {
        height: 100%;
        min-height: 0;
    }

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

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

    .answer-content-scroll .followup-chip {
        font-size: clamp(0.92rem, 0.24vw + 0.84rem, 1rem);
    }

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

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

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

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

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

    :root {
        --answer-measure: min(92vw, 66ch);
    }

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

    .answer-card {
        gap: 8px;
    }

    .answer-card {
        height: clamp(360px, calc(100dvh - 190px), 760px);
    }

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

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

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

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

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

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

    /* Left conversation drawer */
    .conv-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(280px, 85vw);
        z-index: 500;
        background: var(--surface);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 4px 0 24px rgba(0, 17, 23,0.14);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        will-change: transform;
        max-height: 100vh;
        padding: 16px 12px;
        overflow-y: auto;
        border-radius: 0;
    }
    .conv-sidebar--open { transform: translateX(0); }
    .conv-drawer-toggle { display: flex; }

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

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

@media (max-width: 560px) {
    header { padding: 0 12px; }
    .header-inner, .header-top {
        padding: 8px 0;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .header-brand {
        flex: 0 0 auto;
        min-width: 0;
        gap: 8px;
    }
    .header-top h1, header h1 {
        font-size: 0.9rem;
        line-height: 1.15;
    }
    .header-sub, .header-top p, header p {
        display: none;
    }
    .header-nav {
        width: auto;
        margin-left: auto;
        gap: 0;
        flex-wrap: nowrap;
        align-self: flex-start;
    }
    .header-nav a { flex: 0 0 auto; text-align: center; font-size: 0.76rem; padding: 6px 4px; }
    .nav-avatar-btn {
        height: 26px;
        min-width: 52px;
        padding: 0 8px 0 7px;
    }
    .app-layout, .app-main { padding: 10px 10px 152px; }
    .conv-drawer-toggle { top: 74px; }
    .ref-drawer-toggle  { top: 74px; }
    .pinned-drawer-toggle { top: 108px; }
    .card { padding: 13px 14px; }
    .form-row { grid-template-columns: 1fr; }
    .fetch-row { flex-direction: column; }
    .fetch-row button { width: 100%; text-align: center; }
    .ask-input-row { gap: 7px; }
    .ask-send-btn { padding: 0 !important; }
    /* Mobile browsers (notably iOS Safari) auto-zoom the page on focus when
       an input's effective font-size is under 16px — 16px/1rem is the
       threshold that keeps focusing the question field from zooming in. */
    .ask-input-row textarea,
    #question {
        font-size: 1rem;
    }
    /* Touch targets: at least 36px so the controls under the input field
       are comfortable to tap (was 20-24px, smaller than desktop — backwards
       for a touch surface). */
    .ask-controls-row .ask-send-btn {
        width: 36px !important;
        height: 36px !important;
    }
    .ask-controls-row .ask-send-btn svg {
        width: 15px;
        height: 15px;
    }
    #question::placeholder,
    .av-form-grid input::placeholder,
    .av-form-grid textarea::placeholder {
        font-size: 0.75rem;
        line-height: 1.35;
    }
    .ask-controls-row { gap: 6px; margin-top: 4px; }
    .ask-controls-row .corpus-filter-toggle {
        width: 36px;
        height: 36px;
        border-radius: var(--r-sm) !important;
    }
    .ask-controls-row .corpus-filter-toggle svg {
        width: 15px;
        height: 15px;
    }

    .ask-controls-row .stream-error-banner {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

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

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

    .answer-story-scroll {
        padding-right: 0;
    }

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

    .answer-story-scroll .conv-turn-q-text {
        max-width: min(100%, calc(var(--answer-measure) - 3ch));
        font-size: 0.82rem;
        line-height: 1.5;
        padding: 8px 10px;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }

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

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

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

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

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

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

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

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

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

    .card {
        padding: 12px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.settings-group__body {
    padding: 24px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Approve button ──────────────────────────────────────── */

.approve-trigger-btn {
    flex-shrink: 0;
    background: none !important;
    border: 1px solid var(--border-2) !important;
    color: var(--text-3) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    padding: 2px 9px !important;
    border-radius: var(--r-sm) !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    transition: border-color 0.13s, color 0.13s, background 0.13s;
}

.approve-trigger-btn:hover {
    border-color: var(--ok-bdr) !important;
    color: var(--ok) !important;
    background: var(--ok-bg) !important;
}

.approve-trigger-btn--done {
    color: var(--ok) !important;
    border-color: var(--ok-bdr) !important;
    background: var(--ok-bg) !important;
    cursor: default;
}

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

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

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

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

/* ── Verified badge in references ────────────────────────── */

.ref-verified-badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid var(--ok-bdr);
    border-radius: var(--r-sm);
    padding: 1px 5px;
    margin-right: 5px;
    vertical-align: middle;
}

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

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

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

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

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

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

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