/* Auto-split from styles.css lines 1-322 */

/* ═══════════════════════════════════════════════════════════
   VeraNex by Veraflow — Professional Legal UI v5
   Palette: teal-copper · charcoal · steel grey
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────── */

:root {
    --bg:              #F5F4F0;                    /* warm gebroken wit (19-10-2026, naar Mistral, net iets donkerder) */
    --surface:         rgba(255, 255, 255, 0.90);  /* white card surface */
    --surface-2:       rgba(248, 249, 251, 0.98);
    /* Eén wit voor documentviewer, bronnenpaneel en de bronkaarten erin
       (02-10-2026). De viewer en de kaarten stonden op --bg (de grijze
       pagina), het paneel op --surface (90% wit, dus ook een tint grijs);
       drie tinten naast elkaar lazen als drie lagen. */
    --panel-surface:   #ffffff;
    --border:          rgba(42, 47, 54, 0.10);     /* #2A2F36 @ 10% */
    --border-2:        rgba(42, 47, 54, 0.20);     /* #2A2F36 @ 20% */

    /* De rand van een invoerveld, keuzelijst of schakelaar. WCAG 1.4.11 vraagt
       3:1 voor de rand die zo'n element aanwijst; --border-2 haalt 1,46:1 en is
       daarmee onvoldoende. Deze haalt 3,32:1.

       Bewust een eigen token en niet --border-2 verzwaren: die wordt ook voor
       scheidingslijnen en kaartranden gebruikt, en dáár geldt de eis niet.
       Alles op 0,55 zetten zou de hele app zwaar omlijnd maken. */
    --control-border:  rgba(42, 47, 54, 0.55);

    /* De focusrand. Stond op --blue-2 (#D9A070), en dat haalt 2,24:1 op een
       wit veld — onder de 3:1 die voor een focusindicator geldt. --blue is
       dezelfde koper maar donkerder en haalt 5,54:1. */
    --focus-ring:      var(--blue);
    --navy:            #001117;                    /* primary dark */
    --navy-2:          #2A2F36;                    /* secondary dark */
    --blue:            #8F5C28;                    /* copper — primary interactive (AA: ≥4.5:1 as text on light bg) */
    --blue-2:          #D9A070;                    /* lighter copper tint (decorative) */
    --blue-bg:         rgba(201, 138, 76, 0.08);
    --vf-orange:       #8F5C28;
    --vf-orange-2:     #D9A070;
    --vf-orange-soft:  rgba(201, 138, 76, 0.16);
    --text:            #001117;
    --text-1:          var(--text);
    --text-2:          #2A2F36;
    --text-3:          #606970;                    /* AA: ≥4.5:1 on light surfaces */
    --menu-active-bg:  rgba(42, 47, 54, 0.14);

    /* Tabbladen — één set voor de bibliotheek, de dossierpagina en de
       documentviewer. Die hadden alle drie hun eigen uiterlijk: de dossierrij
       stond op een koperen strook (--blue-bg met een koperen onderrand), de
       viewer op de paginakleur, de bibliotheek op weer iets anders.

       De rij neemt nu de kleur van de kaart eronder, zodat zij leest als de
       bovenrand daarvan in plaats van als een gekleurde balk. Het actieve blad
       springt eruit met een koperen streep en donkerdere, zwaardere tekst — niet
       met een vlak. Een gekleurd vlak achter één tabblad trekt meer aandacht dan
       de inhoud eronder, en dat is precies verkeerd om. */
    --tab-strip-bg:    var(--surface);
    --tab-fg:          var(--text-3);
    --tab-hover-fg:    var(--navy);
    --tab-active-fg:   var(--navy);
    --tab-accent:      var(--blue);
    --tab-border:      var(--border);
    --ok:              #1F7A52;
    --ok-bg:           rgba(31, 122, 82, 0.09);
    --ok-bdr:          rgba(31, 122, 82, 0.22);
    --warn:            #8C6020;                    /* distinct dark amber */
    --warn-bg:         rgba(140, 96, 32, 0.09);
    --warn-bdr:        rgba(140, 96, 32, 0.22);
    --err:             #B02020;
    --err-bg:          rgba(176, 32, 32, 0.09);
    --err-bdr:         rgba(176, 32, 32, 0.22);
    --shadow-sm:       0 1px 4px rgba(0, 17, 23, 0.08);
    --shadow-md:       0 4px 16px rgba(0, 17, 23, 0.11);
    /* Hoekronding. Eén plek voor de hele app: kaarten en panelen op --r,
       kleinere bedieningselementen (invoervelden, chips, badges) op --r-sm,
       knoppen iets strakker dan een kaart via --btn-r. Wil je ronder of
       strakker, verander deze drie waarden — niet de losse regels. */
    --r:               18px;
    --r-sm:            12px;
    --btn-r:           14px;
    --legal-measure:   86ch;
    /* Eén liniaal voor alles wat in de antwoordkolom staat.

       Stond op 74ch, en dat leek één maat maar was er vier. `ch` schaalt mee
       met de fontgrootte van het element dat de waarde gebruikt, en die
       verschilt per blok: de metabalk staat op 0,72rem, de herformulering op
       0,8rem, de antwoordtekst op 0,85rem en de vervolgvragen op weer een
       andere. 74ch leverde daarmee vier verschillende breedtes op, alle vier
       gecentreerd, dus vier verschillende linkerranden onder elkaar — precies
       de rafelrand die op het scherm te zien was. Bij .followup-chips is
       diezelfde oorzaak eerder al los gerepareerd; die reparatie staat er nog
       en is nu overbodig geworden.

       Nu dezelfde absolute maat als de band waarin de beurt zelf staat, zodat
       elk blok in de kolom dezelfde rand heeft en de hele kolom op één as met
       de vraagbalk eronder ligt. */
    --answer-measure:  var(--answer-band);
    /* De breedte van de vraagkaart onderin. De antwoordkolom hangt aan
       dezelfde waarde, want de twee horen op één as te staan: het antwoord
       hoort midden boven de vraag. Twee losse waarden lopen uit elkaar
       zodra iemand er één aanpast. */
    --ask-measure:     17.5cm;
    /* De letter van het antwoord. Stond op 0,85rem (13,6px): een casus van
       1.300 woorden leest dan als kleine lettertjes. Een concurrent zet
       ~17px op ~1,7 en een band van ~800px (20 september 2026). De maat
       hangt hier zodat het donkere thema en de telefoon dezelfde knop
       hebben. */
    --answer-font-size:  0.97rem;
    --answer-line-height: 1.7;
    /* De band waarin één beurt staat. Was `--ask-measure * 1.18` en dus 18%
       breder dan de vraagbalk eronder.

       Dat leverde drie breedtes in dezelfde kolom op: de band op 714px, de
       vraagbalk op 605px en de antwoordtekst zelf — die op --answer-measure
       hangt — op ongeveer 490px. Drie breedtes, alle drie gecentreerd, dus drie
       linkerranden. Nu één maat, gelijk aan de vraagbalk: alles in de
       antwoordkolom staat precies boven de balk waar de vraag in wordt getypt. */
    --answer-band:     var(--ask-measure);
    /* Ruimte die rechts vrij blijft voor de bronnenkaart, ook wanneer die is
       ingeklapt. Zonder die reservering schuift het gesprek helemaal naar de
       rechterrand zodra je het paneel sluit, en springt alles terug zodra je
       het weer opent. Even breed als de kaart zelf. */
    --bronnen-reserve: clamp(250px, 22vw, 360px);
    --manual-copy-measure: 72ch;
    --sidebar-w:       420px;
    --conv-w:          272px;   /* zie de media query in 10-layout-shell.css */
    --ask-bar-h:       140px;
    --ask-input-fill:  rgba(255, 255, 255, 0.95);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* No overflow on html/body — both default to visible so the page scrolls
   naturally. Horizontal overflow is clipped at the .app-main level instead,
   avoiding the browser quirk where html overflow-x:hidden forces body
   overflow-y to hidden and prevents settings page scroll. */

/* ── Body ────────────────────────────────────────────────── */

body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-width: 320px;
    color: var(--text);
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 8%  0%,  rgba(201, 138, 76, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 92% 100%, rgba(201, 138, 76, 0.05) 0%, transparent 50%),
        linear-gradient(160deg, #F7F6F2 0%, #F5F4F0 55%, #F3F2EE 100%);
    background-attachment: fixed;
    transition: background 0.3s, color 0.3s;
}

/* ── Header ──────────────────────────────────────────────── */

header {
    background: linear-gradient(135deg, #001117 0%, #2A2F36 60%, #141B22 100%);
    border-bottom: 1px solid rgba(100, 149, 237, 0.14);
    color: #FFFFFF;
    padding: 0 24px;
    box-shadow: 0 2px 14px rgba(0, 17, 23, 0.22);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    padding: 10px 0;
    flex-wrap: wrap;
}

/* backward-compat for library / generate pages — same layout as header-inner */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 10px 0;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.header-brand:hover {
    opacity: 0.85;
}

.header-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.header-brand h1, .header-top h1, header h1 {
    margin: 0;
    font-size: clamp(1.0rem, 2.5vw, 1.22rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

.header-sub, .header-top p, header p {
    margin: 2px 0 0;
    font-size: 0.76rem;
    color: rgba(200, 218, 255, 0.60);
}

/* ── Style examples compact list ────────────────────────── */

.style-examples-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.45);
    overflow: hidden;
}

.style-ex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.style-ex-row:last-child {
    border-bottom: none;
}

.style-ex-main {
    min-width: 0;
    flex: 1 1 auto;
}

.style-ex-name {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.style-ex-meta {
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.style-ex-warning {
    color: var(--err);
}

.style-ex-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.style-ex-type {
    min-width: 150px;
    max-width: 180px;
    padding: 5px 8px;
    font-size: 0.77rem;
}

@media (max-width: 980px) {
    .style-ex-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .style-ex-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .style-ex-type {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

/* ── Ask bar error banner ────────────────────────────────── */

.stream-error-banner {
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 11px 10px 13px;
    /* Binnen de rand van de vraagbalk blijven, niet erop.
       Hier stond `border-top: 2px` in blauw. Deze melding is een kind van
       .ask-bar-inner en kinderen worden ná de rand van hun ouder getekend, dus
       die blauwe lijn kwam precies op de bovenrand van de balk te liggen. Staat
       de balk actief -- de koperen ring uit 20-answer-and-chat.css, een ::after
       op inset:-1px -- dan liggen er twee lijnen op elkaars lip en wint de
       dikkere blauwe optisch. De rand van de balk hoort de bovenste lijn te
       zijn; de melding verschijnt daarbinnen.
       De straal is die van de kaart min de randdikte, zodat de melding de
       ronding van de balk volgt in plaats van hem te doorsnijden. */
    border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
    background: linear-gradient(180deg, #edf4ff 0%, #e4eeff 100%);
    border: 1px solid rgba(73, 128, 212, 0.34);
    border-top: none;
    border-bottom: none;
    color: var(--text);
    font-size: 0.75rem;
    line-height: 1.45;
    animation: fadeIn 0.18s ease;
    max-width: none;
}

.stream-error-banner:not([hidden]) {
    display: flex;
}

.stream-error-banner-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.stream-error-banner-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Twee acties naast elkaar (hoger plan of extra gebruiksruimte kopen). */
.stream-error-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.stream-error-banner-link {
    align-self: flex-start;
    color: color-mix(in srgb, var(--text) 80%, #2f67be);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

.stream-error-banner-link[hidden] {
    display: none !important;
}

.stream-error-banner-link:hover {
    opacity: 0.9;
}

.stream-error-banner-link:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
    border-radius: 3px;
}

.stream-error-banner-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: -1px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(42, 85, 160, 0.9);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.92;
}

.stream-error-banner-close:hover {
    opacity: 1;
    color: rgba(31, 70, 139, 1);
    background: rgba(73, 128, 212, 0.14);
}

.stream-error-banner-close:focus-visible {
    opacity: 1;
    outline: 2px solid rgba(73, 128, 212, 0.8);
    outline-offset: 2px;
}

/* ── Ask bar credit line ─────────────────────────────────── */

/* Pinned to the true bottom-left corner of the viewport — independent of
   the centered/width-capped .ask-bar-inner card, so it never sits directly
   underneath it. De feedbackknop staat er nu naast, in dezelfde hoek
   (23-09-2026) -- vandaar de gedeelde .ask-bar-corner-wrapper in plaats van
   losse fixed-posities die uit elkaar konden lopen. Naast in plaats van
   erboven: boven liep hij door het voorbehoud ("Met AI-ondersteuning
   gegenereerd door...") heen, dat er middenboven overheen centreert. */
.ask-bar-corner {
    position: fixed;
    left: 12px;
    bottom: 6px;
    z-index: 101;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.ask-bar-corner > * {
    pointer-events: auto;
}
.ask-bar-credit {
    margin: 0;
    text-align: left;
    font-size: 0.58rem;
    color: rgba(90, 110, 140, 0.45);
    letter-spacing: 0.02em;
    user-select: none;
}

.header-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

.header-nav a {
    color: rgba(200, 218, 255, 0.85);
    text-decoration: none;
    padding: 6px 13px;
    border-radius: var(--r-sm);
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

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

.nav-active {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}


/* ── [hidden] ─────────────────────────────────────────────────
   Een klasse die `display` zet wint van de `[hidden] { display: none }` uit de
   stijlbladen van de browser: een auteursregel gaat altijd voor. `el.hidden =
   true` doet dan stilletjes niets. Het symptoom is een knop die vuurt, zijn
   stand netjes bewaart, en het element gewoon laat staan — wat leest als "die
   knop is stuk".

   Hier stond een handmatige lijst met de elementen die het betrof, met de
   opmerking dat je hem moest bijwerken bij elk nieuw element. Die lijst is
   twee keer vergeten: bij de onboarding-overlay en bij het filteren van de
   gesprekkenlijst, waar .conv-item display:grid heeft en het zoeken daardoor
   zichtbaar niets deed.

   Een lijst die twee keer wordt vergeten is de verkeerde oplossing. Eén regel
   voor alles: er bestaat geen element dat `hidden` draagt en toch hoort te
   worden getoond. */
[hidden] {
    display: none !important;
}


/* ── Wie beweging heeft uitgezet (WCAG 2.3.3) ─────────────────────────────
   Er stonden vijf losse prefers-reduced-motion-blokken tegenover 26 animaties
   en 111 overgangen; de meeste beweging liep daar dus omheen. Dit vangt de
   rest in één regel.

   Niet op 0s maar op 0.01ms: een duur van precies nul laat sommige browsers de
   transitionend-gebeurtenis overslaan, en er is JavaScript dat daarop wacht om
   een element op te ruimen. Zo blijft die gebeurtenis komen, alleen meteen.

   scroll-behavior hoort er ook bij: een animerende sprong door een lange lijst
   is voor wie hier gevoelig voor is net zo hinderlijk als een schuivend
   paneel. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}