/* 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:              #ECEEF1;                    /* off-white page bg */
    --surface:         rgba(255, 255, 255, 0.90);  /* white card surface */
    --surface-2:       rgba(248, 249, 251, 0.98);
    --border:          rgba(42, 47, 54, 0.10);     /* #2A2F36 @ 10% */
    --border-2:        rgba(42, 47, 54, 0.20);     /* #2A2F36 @ 20% */
    --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);
    --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;
    --answer-measure:  74ch;
    --manual-copy-measure: 72ch;
    --sidebar-w:       420px;
    --conv-w:          232px;
    --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, #ECEEF1 0%, #E8EAED 55%, #E4E7EA 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: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    background: var(--ask-input-fill, var(--blue-bg));
    border: 1px solid rgba(201, 138, 76, 0.2);
    color: var(--text-2);
    font-size: 0.68rem;
    line-height: 1.35;
    animation: fadeIn 0.18s ease;
    max-width: none;
}

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

.stream-error-banner-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stream-error-banner-close {
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.stream-error-banner:hover .stream-error-banner-close {
    opacity: 1;
}

.stream-error-banner-close:hover {
    color: var(--err) !important;
    background: var(--err-bg) !important;
}

.stream-error-banner-close:focus-visible {
    opacity: 1;
}

/* ── 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. */
.ask-bar-credit {
    position: fixed;
    left: 12px;
    bottom: 6px;
    z-index: 101;
    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] guards ──────────────────────────────────────────
   A class that sets `display` outranks the UA stylesheet's
   `[hidden] { display: none }`, so `el.hidden = true` silently does nothing.
   The symptom is a close button that fires, persists its state correctly, and
   leaves the element on screen — which reads as "the button is broken".

   Found via audit after the onboarding overlay hit exactly this; .about-modal,
   .app-modal and .conv-drawer-overlay already carried their own guards.
   Keep this list in sync when adding an element toggled via .hidden. */
.conv-drawer-toggle[hidden],
.pinned-drawer-toggle[hidden],
.ref-drawer-toggle[hidden],
.dossier-sidebar-hint[hidden],
.welcome-resume[hidden],
.ref-ecli-lbl[hidden] {
    display: none !important;
}