/* Auto-split from styles.css lines 5637-6340 */

/* Hides legacy cappuccino SVG if it somehow appears */
.cappuccino-art { display: none !important; }

/* ── Conversation history ────────────────────────────────── */

.conv-history {
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.conv-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(42, 47, 54, 0.03);
}

.conv-history-title {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex: 1;
}

.conv-turn-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--r-sm);
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid rgba(201, 138, 76, 0.18);
    white-space: nowrap;
}

.clear-history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--btn-r);
    color: var(--text-3);
    font-size: 0;
    font-weight: 600;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
    box-shadow: none;
}
.clear-history-btn svg { width: 14px; height: 14px; }
.clear-history-btn:hover {
    color: var(--err);
    background: var(--err-bg);
    border-color: rgba(220, 38, 38, 0.2);
}

/* Stond sticky en gecentreerd. Op een telefoon is de leeskolom ~350px breed, en
   dan slikt zo'n zwevende pil zo'n vijftien tekens van elke regel waar hij
   overheen schuift — de zin eronder werd letterlijk onleesbaar. Nu een gewone
   scheiding in de flow, met een haarlijn aan weerszijden. */
.conv-day-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 10px;
    pointer-events: none;
}

.conv-day-separator::before,
.conv-day-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.conv-day-separator-label {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.conv-turn:last-child { border-bottom: none; }
/* De gekozen beurt: een neutraal vlak, geen koper (22-09-2026). */
.conv-turn--active .conv-turn-toggle { background: var(--surface-2) !important; }

.conv-turn-followups,
.conv-turn-actions {
    margin-top: 10px;
    padding-top: 8px;
}

.conv-turn-actions { justify-content: flex-start; }

.conv-turn-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 3px 10px;
    cursor: pointer;
    text-align: left;
}

.conv-turn-toggle:hover { background: rgba(201, 138, 76, 0.03) !important; }

.conv-turn-num-badge {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--blue-bg);
    color: var(--blue);
    border: 1px solid rgba(201, 138, 76, 0.18);
    font-size: 0.55rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conv-turn-q-text {
    flex: 1;
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-turn-chevron {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--vf-orange) 72%, var(--text-3));
    flex-shrink: 0;
}

.conv-turn-body {
    padding: 0 14px 12px 40px;
}

.conv-turn-answer {
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.75;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    max-height: none;
    overflow: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.conv-turn-answer h1,
.conv-turn-answer h2,
.conv-turn-answer h3:not(.answer-section-label),
.conv-turn-answer h4,
.conv-turn-answer .answer-inline-heading {
    margin: 1.3em 0 0.6em;
    line-height: 1.4;
    font-weight: 700;
    color: var(--text);
    clear: both;
}
.conv-turn-answer h1 { font-size: 1.08rem; }
.conv-turn-answer h2,
.conv-turn-answer .answer-inline-heading { font-size: 0.97rem; }
.conv-turn-answer h3:not(.answer-section-label) { font-size: 0.90rem; }
.conv-turn-answer h4 { font-size: 0.86rem; }

.conv-turn-answer blockquote {
    margin: 0.7em 0;
    padding: 0.4em 0.7em;
    border-left: 3px solid rgba(201, 138, 76, 0.2);
    background: rgba(201, 138, 76, 0.05);
    border-radius: 0 7px 7px 0;
}

.conv-turn-answer p {
    margin: 0 0 1.2em 0;
    line-height: 1.7;
    color: var(--text);
}
.conv-turn-answer p:last-child {
    margin-bottom: 0;
}
.conv-turn-answer ul,
.conv-turn-answer ol {
    margin: 0 0 1.2em 0;
    padding-left: 1.8em;
    line-height: 1.7;
}
.conv-turn-answer ul {
    list-style-type: disc;
}
.conv-turn-answer ol {
    list-style-type: decimal;
}
.conv-turn-answer li {
    margin: 0.4em 0;
}

.conv-turn-answer 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);
}

/* Conversation thread rendered inside the answer panel scroll area. */
.answer-story-scroll .conv-history {
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    margin: 0 0 12px;
}

.answer-story-scroll .conv-history-header {
    display: none;
}

.conv-turn-answer table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8em 0;
    font-size: 0.84em;
}

.conv-turn-answer th,
.conv-turn-answer td {
    border: 1px solid var(--border);
    padding: 0.38em 0.48em;
    text-align: left;
}

.conv-turn-answer th {
    background: var(--surface-2);
    color: var(--text-1);
    font-weight: 700;
}

.answer-story-scroll #conv-turns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.answer-story-scroll .conv-turn {
    border-top: none;
    padding-top: 0;
}

.answer-story-scroll .conv-turn:first-child {
    border-top: none;
    padding-top: 0;
}

.answer-story-scroll .conv-turn-toggle {
    justify-content: flex-start;
    padding: 0;
}

.answer-story-scroll .conv-turn-toggle:hover {
    background: transparent !important;
}

.answer-story-scroll .conv-turn-avatar,
.answer-story-scroll .conv-turn-num-badge,
.answer-story-scroll .conv-turn-chevron {
    display: none;
}

.answer-story-scroll .conv-turn-q-text {
    flex: 0 1 auto;
    /* Historische vraagballonnen op exact dezelfde linker as als de huidige
       vraagballon en antwoordtekst. */
    margin-left: 0;
    margin-right: auto;
    width: min(100%, calc(var(--answer-measure) - 6ch));
    max-width: min(100%, calc(var(--answer-measure) - 6ch));
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    padding: 9px 12px;
    border-radius: var(--r) var(--r) 4px var(--r);
    border: 1px solid color-mix(in srgb, var(--bg) 90%, var(--navy-2) 10%);
    background: var(--bg);
    color: var(--text-2);
    align-self: flex-start;
    clear: both;
}

.answer-story-scroll .conv-turn-body {
    padding: 0;
}

.answer-story-scroll .conv-turn-answer,
.answer-story-scroll pre.conv-turn-answer {
    /* Gecentreerd binnen de band die even breed is als de vraagkaart, zodat het
       midden van het antwoord samenvalt met het midden van de vraag eronder.
       Stond op links (margin-left: 0), en omdat de tekst smaller is dan de
       kaart lag het antwoord daardoor zo'n zestig pixels links ervan. */
    margin: 8px auto 4px;
    width: min(100%, var(--answer-measure));
    max-width: min(100%, var(--answer-measure));
    max-height: none;
    overflow: visible;
    /* Horizontaal 10px en niet 16px: dat is dezelfde inspringing als de
       herformulering en de inhoudsbalk erboven, zodat niet alleen de kaders maar
       ook de eerste letter van elke regel op één lijn staat. */
    padding: 12px 10px;
    border-radius: 0;
    background: transparent;
    border: none;
    text-align: left;
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--text);
    word-break: break-word;
    white-space: normal;      /* always render as formatted HTML */
}

.answer-story-scroll .conv-turn-followups,
.answer-story-scroll .conv-turn-actions {
    margin: 8px 0 0;
    max-width: 100%;
}

#answer-pre,
.answer-section-body,
.answer-current-question,
.answer-story-scroll .conv-turn-answer,
.answer-story-scroll .conv-turn-q-text {
    touch-action: pan-y;
}

/* ===================================================================
   PHASE 1 & 2: Conversation Experience Optimizations
   =================================================================== */

/* --- Phase 1: Typographic Hierarchy --- */

/* Modular scale for headings in conversation panel */
.answer-story-scroll .conv-turn-answer h1,
.answer-story-scroll pre.conv-turn-answer h1,
.answer-current-question h1 {
    font-size: 1.3rem;           /* 20.8px - Main answer headings */
    font-weight: 700;
    color: var(--text);
    margin: 1.5em 0 0.8em;
    line-height: 1.35;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.6em;
    clear: both;
}

.answer-story-scroll .conv-turn-answer h2,
.answer-story-scroll pre.conv-turn-answer h2,
.answer-current-question h2 {
    font-size: 1.1rem;           /* 17.6px - Section headings */
    font-weight: 600;
    color: var(--text);
    margin: 1.4em 0 0.7em;
    line-height: 1.4;
    clear: both;
}

.answer-story-scroll .conv-turn-answer h3:not(.answer-section-label),
.answer-story-scroll pre.conv-turn-answer h3:not(.answer-section-label),
.answer-current-question h3 {
    font-size: 1.04rem;
    font-weight: 650;
    /* Tussenkopjes in de tekstkleur (19-10-2026): in grijs lazen "Conclusie"
       en "Aanbevelingen" als bijschrift en niet als kop. */
    color: var(--text);
    margin: 1.2em 0 0.6em;
    line-height: 1.45;
    clear: both;
}

.answer-story-scroll .conv-turn-answer h4,
.answer-story-scroll pre.conv-turn-answer h4,
.answer-current-question h4 {
    /* Was 0,9rem in --text-3: kleiner en lichter dan de tekst eronder, dus
       las het als bijschrift. Nu zo groot als de tekst, halfvet, met meer
       ruimte erboven dan eronder, zodat de kop bij zijn alinea hoort. */
    font-size: 1rem;
    font-weight: 650;
    color: var(--text);
    margin: 1.4em 0 0.4em;
    line-height: 1.5;
    clear: both;
}

/* Legal text styling - serif for citations and formal text */
.answer-story-scroll .conv-turn-answer .legal-citation,
.answer-story-scroll pre.conv-turn-answer .legal-citation,
.answer-story-scroll .conv-turn-answer blockquote,
.answer-story-scroll pre.conv-turn-answer blockquote {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 400;
    color: var(--vf-orange);
    border-left: 2px solid var(--vf-orange);
    padding-left: 12px;
    margin: 1.2em 0;
    line-height: 1.7;
    font-style: normal;
}

/* Enhanced blockquote styling */
.answer-story-scroll .conv-turn-answer blockquote,
.answer-story-scroll pre.conv-turn-answer blockquote {
    background: rgba(201, 138, 76, 0.04);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px 12px 14px;
}

/* --- Phase 1: Spacing Consistency --- */

/* Consistent spacing within answer content */
.answer-story-scroll .conv-turn-answer p,
.answer-story-scroll pre.conv-turn-answer p {
    margin: 0.9em 0;
    /* Was 1.8, vast: dan deed de keuze compact/ruim in de leesinstellingen
       niets op de alinea's. Nu erft de alinea van de beurt (19-10-2026). */
    line-height: inherit;
    text-align: left;
}

.answer-story-scroll .conv-turn-answer p:first-child,
.answer-story-scroll pre.conv-turn-answer p:first-child {
    margin-top: 0;
}

.answer-story-scroll .conv-turn-answer p:last-child,
.answer-story-scroll pre.conv-turn-answer p:last-child {
    margin-bottom: 0;
}

/* List spacing */
.answer-story-scroll .conv-turn-answer ul,
.answer-story-scroll pre.conv-turn-answer ul,
.answer-story-scroll .conv-turn-answer ol,
.answer-story-scroll pre.conv-turn-answer ol {
    margin: 1em 0;
    padding-left: 2em;
}

.answer-story-scroll .conv-turn-answer ul,
.answer-story-scroll pre.conv-turn-answer ul {
    list-style-type: disc;
}

.answer-story-scroll .conv-turn-answer ol,
.answer-story-scroll pre.conv-turn-answer ol {
    list-style-type: decimal;
}

.answer-story-scroll .conv-turn-answer li,
.answer-story-scroll pre.conv-turn-answer li {
    margin: 0.5em 0;
    line-height: 1.7;
}

/* Consistent turn spacing */
.answer-story-scroll .conv-turn {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-bottom: 8px;
    position: relative;
}

.answer-story-scroll .conv-turn:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* --- Phase 1: Hover Effects & Active States --- */

/* Question bubble hover effect */
.answer-story-scroll .conv-turn-q-text:hover,
.answer-current-question:hover {
    background: var(--bg);
    transition: background 0.2s ease, transform 0.1s ease;
}

/* De vraagtekst is tekst, geen knop. Zij zit wel in .conv-turn-toggle — dat is
   een echte knop die de beurt in- en uitklapt — en erfde daardoor de
   handcursor. Met een handje boven een alinea gaat slepen aanvoelen als
   klikken in plaats van selecteren, en juist bij een juridisch antwoord wil je
   een zin kunnen overnemen. De knop houdt zijn affordance via de chevron. */
.answer-story-scroll .conv-turn-q-text,
.answer-story-scroll .conv-turn-q-text:hover,
.answer-current-question,
.answer-current-question:hover {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

/* Subtle shadow on answer hover */
.answer-story-scroll .conv-turn-answer:hover {
    box-shadow: 0 1px 4px rgba(201, 138, 76, 0.08);
}

/* Active/selected turn state: geen apart vlak meer; de kop (toggle) toont
   de keuze. Een klik in de tekst kleurde anders het hele antwoord. */

/* Focusring alleen bij toetsenbordfocus (WCAG 2.4.7); een muisklik in de
   tekst om te selecteren of te kopiëren krijgt geen ring. */
.answer-story-scroll .conv-turn-q-text:focus-visible,
.answer-story-scroll .conv-turn-answer:focus-visible,
.answer-current-question:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* --- Busy placeholder --- */
/* The .conversation-skeleton / .skeleton-* shimmer that used to live here was
   never referenced by any template or script and has been removed along with
   its @keyframes skeleton-loading. The thinking-chip row is the loading UI. */

.answer-busy-placeholder {
    color: var(--text-3) !important;
    font-style: italic;
    animation: answer-busy-pulse 1.2s ease-in-out infinite;
    /* Zie de toelichting bij dezelfde regel in 20-answer-and-chat.css. */
    min-height: clamp(300px, calc(100dvh - 320px), 700px);
}

/* --- Phase 2: Citation Highlighting & Linking --- */

/* Citation styling - works with both ref-inline and citation-ref classes */
.answer-story-scroll .conv-turn-answer .citation-ref,
.answer-story-scroll .conv-turn-answer .ref-inline,
.answer-story-scroll pre.conv-turn-answer .citation-ref,
.answer-story-scroll pre.conv-turn-answer .ref-inline {
    color: var(--vf-orange);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px dotted rgba(201, 138, 76, 0.4);
    transition: all 0.2s ease;
    padding: 0 2px;
}

.answer-story-scroll .conv-turn-answer .citation-ref:hover,
.answer-story-scroll .conv-turn-answer .ref-inline:hover,
.answer-story-scroll pre.conv-turn-answer .citation-ref:hover,
.answer-story-scroll pre.conv-turn-answer .ref-inline:hover {
    color: var(--vf-orange-2);
    border-bottom-color: var(--vf-orange);
    background: rgba(201, 138, 76, 0.08);
}

.answer-story-scroll .conv-turn-answer .citation-ref:focus,
.answer-story-scroll .conv-turn-answer .ref-inline:focus,
.answer-story-scroll pre.conv-turn-answer .citation-ref:focus,
.answer-story-scroll pre.conv-turn-answer .ref-inline:focus {
    outline: 2px solid var(--vf-orange);
    outline-offset: 2px;
    border-bottom-color: transparent;
}

/* Highlight active citation references */
.answer-story-scroll .conv-turn-answer .citation-ref.active,
.answer-story-scroll .conv-turn-answer .citation-ref:active,
.answer-story-scroll .conv-turn-answer .ref-inline.active,
.answer-story-scroll .conv-turn-answer .ref-inline:active,
.answer-story-scroll pre.conv-turn-answer .citation-ref.active,
.answer-story-scroll pre.conv-turn-answer .citation-ref:active,
.answer-story-scroll pre.conv-turn-answer .ref-inline.active,
.answer-story-scroll pre.conv-turn-answer .ref-inline:active {
    background: rgba(201, 138, 76, 0.2);
    color: var(--text);
    border-bottom-color: transparent;
}

/* --- Phase 2: Conversation Timeline --- */

/* Timeline indicator on left edge */
.answer-story-scroll {
    position: relative;
}

.answer-story-scroll::before {
    content: none;
}

/* Turn indicator dots on timeline */
.answer-story-scroll .conv-turn::before {
    content: none;
}

.answer-story-scroll .conv-turn:nth-child(odd)::before,
.answer-story-scroll .conv-turn:hover::before {
    content: none;
}

/* --- Phase 2: Context Summary Bar --- */

/* Context summary at top of conversation */
.conversation-context-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(201, 138, 76, 0.08);
    border-radius: var(--r);
    margin-bottom: 16px;
    font-size: 0.8rem;
    border-left: 3px solid var(--vf-orange);
}

.conversation-context-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-2);
}

.conversation-context-item strong {
    color: var(--vf-orange);
}

.conversation-context-item svg {
    width: 14px;
    height: 14px;
    color: var(--vf-orange);
}

/* --- Phase 2: Accessibility Enhancements --- */

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    /* Global reset: neutralize all animations/transitions (spinners, pulses,
       breathing loaders, skeletons, slides) while keeping end-states intact
       (WCAG 2.3.3). Scroll-behavior also made instant. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode */