/* ============================================
   Legal AI (/legal-ai) — the AI research chat
   ============================================

   Loaded LAST, after _admin.css, from BOTH styles.html fragments; the order
   is mirrored in css/app.css (the manifest). All colours are project tokens,
   so both themes work with no override block. Inline-axis properties are
   logical (inline-start/end) so RTL mirrors for free.
   ============================================ */

/* --- Page header -------------------------------------------------------- */

/* The title is the product's face: an icon badge on the brand fill plus
   gradient-clipped title text. The badge takes the fill because a label sits
   on it; the title's own primary→accent gradient is brand as TEXT, on the
   card. */
.legalai-title-badge {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    /* The fill and label .btn-primary wears. It sat on a primary→accent
       gradient, which in dark runs between two LIGHT purples and ended at
       2.97:1 under white. */
    color: var(--on-primary-fill);
    background: var(--primary-fill);
    box-shadow: var(--shadow-primary);
}

.legalai-title {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
    background: linear-gradient(120deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Header actions — pill buttons in the same brand language as the title.
   Transitions only (the GSAP-only rule is about keyframe animations). */
.legalai-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                border-color 0.15s ease, color 0.15s ease;
}

/* The quiet one: history. Card surface, warms toward primary on hover. */
.legalai-btn-ghost {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}

.legalai-btn-ghost:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* The loud one: new chat. The brand fill and its label, like the title badge
   and .btn-primary. */
.legalai-btn-gradient {
    background: var(--primary-fill);
    border: 0;
    color: var(--on-primary-fill);
    box-shadow: var(--shadow-primary);
}

.legalai-btn-gradient:hover,
.legalai-btn-gradient:focus-visible {
    color: var(--on-primary-fill);
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-hover);
}

.legalai-btn-gradient:disabled {
    opacity: 0.65;
    transform: none;
}

/* The chat count — a primary-tinted pill instead of Bootstrap's grey
   text-bg-secondary (a --bs-* surface that never follows data-theme). */
.legalai-count-badge {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.55rem;
    min-inline-size: 1.5rem;
    text-align: center;
}

/* --- Thread ------------------------------------------------------------ */

.legalai-thread {
    max-width: 900px;
    margin-inline: auto;
}

.legalai-question {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.legalai-turn {
    margin-bottom: 1.5rem;
}

.legalai-turn-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.legalai-turn-label i {
    color: var(--primary);
}

/* A follow-up question from the user — the grouped-section callout reads as
   "a distinct step", which is exactly what a new question is. */
.legalai-user-msg {
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* --- Research progress card -------------------------------------------- */

/* A compact live STATUS row, not an open panel: the header carries the
   current stage (mirrored from the active step) beside a pulsing icon
   badge, and the full step list stays collapsed behind the chevron (user
   request 2026-08-06 — the open list made the wait feel heavier). Every
   colour derives from --primary/--accent via color-mix, so both themes
   are covered with no dark override — same recipe as .form-callout. */
.legalai-progress {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 8%, var(--card)),
        color-mix(in srgb, var(--accent) 5%, var(--card)));
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    overflow: hidden;
}

.legalai-progress.is-done {
    background: var(--card);
    border-color: var(--border);
}

.legalai-progress.is-fail {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
}

.legalai-progress-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.legalai-progress-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-inline-size: 0;
}

/* The icon badge GSAP pulses while working (never CSS @keyframes). */
.legalai-progress-badge {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
}

.legalai-progress.is-done .legalai-progress-badge {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success-text);
}

.legalai-progress.is-fail .legalai-progress-badge {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger-text);
}

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

/* The deep turn's mm:ss clock beside the header label — the "still running"
   proof while the quality model reasons with no stream events for minutes.
   Tabular digits so it does not jitter; ltr so the digits never reorder. */
.legalai-progress-elapsed {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

/* Deep-mode wait notice — pinned under the header and OUTSIDE the
   collapsible body (which starts display:none): a warning nobody can see is
   no warning. Tokens only, so both themes are covered. */
.legalai-progress-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem 0.55rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.legalai-progress-note i {
    color: var(--info-text);
    flex-shrink: 0;
}

.legalai-progress-body {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
}

/* One SUMMARY line per step — icon + short label + count. Deliberately no
   thinking-paragraph dumps or result-chip walls (plan review decision). */
.legalai-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.legalai-step-icon {
    inline-size: 1.5rem;
    text-align: center;
    color: var(--primary);
    flex-shrink: 0;
}

.legalai-step.active {
    color: var(--text);
    font-weight: 600;
}

/* Step outcome states, set by completeStep()/failTurn() — a finished step
   must stop reading as in-progress even when the card is reopened later. */
.legalai-step-icon.legalai-step-done { color: var(--success); }
.legalai-step-icon.legalai-step-fail { color: var(--danger); }

/* --- Answer ------------------------------------------------------------- */

/* The answer is a CARD, not bare text on the page background — it is the
   deliverable of the whole page and reads as one. A soft primary accent bar
   on the START edge (mirrors under RTL) marks it as the assistant's voice,
   the same visual language as .form-callout without its tinted fill: the
   answer is long-form reading, so the surface stays quiet (--card) and the
   accent carries the identity. */
.legalai-answer {
    background: var(--card);
    border: 1px solid var(--border);
    border-inline-start: 3px solid color-mix(in srgb, var(--primary) 55%, var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.35rem;
    color: var(--text);
    line-height: 1.9;
    overflow-wrap: anywhere;
}

/* A live turn appends the (empty) answer element before the first chunk
   arrives — an empty card under the progress card would paint a floating
   box. Same guard as .form-callout:empty. */
.legalai-answer:empty { display: none; }

/* The card carries its own padding — the first/last Markdown blocks must
   not stack their margins on top of it. */
.legalai-answer > :first-child { margin-block-start: 0; }
.legalai-answer > :last-child { margin-block-end: 0; }

/* Section headings get a short accent bar on the start edge — legal answers
   arrive as ## sections (المادة، العقوبة، الإجراءات…) and the bar makes the
   structure scannable without shouting. */
.legalai-answer h1,
.legalai-answer h2,
.legalai-answer h3,
.legalai-answer h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-block: 1.25rem 0.6rem;
    color: var(--text);
    padding-inline-start: 0.6rem;
    border-inline-start: 3px solid var(--primary);
    line-height: 1.5;
}

.legalai-answer h1 { font-size: 1.2rem; }
.legalai-answer h2 { font-size: 1.1rem; }

.legalai-answer p { margin-block: 0 0.75rem; }

.legalai-answer ul,
.legalai-answer ol {
    padding-inline-start: 1.5rem;
    margin-block: 0 0.75rem;
}

.legalai-answer li { margin-block: 0.3rem; }

/* Primary markers make enumerations (شروط، خطوات، حالات) scannable; the
   text keeps --text so the list still reads as body copy. */
.legalai-answer li::marker {
    color: var(--primary);
    font-weight: 600;
}

.legalai-answer table {
    border-collapse: collapse;
    margin-block: 0.25rem 1rem;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

.legalai-answer th,
.legalai-answer td {
    border: 1px solid var(--border);
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
}

/* Cells align to the PAGE's start edge, overriding the engine.
   The engine writes its separator row with alignment colons (|:---|), and
   marked turns each one into align="left" — a hint authored for an LTR page,
   which drops every Arabic cell against the wrong edge. It lands on the
   headers too, but .legalai-answer thead th is white-space: nowrap, so a
   header shrink-wraps its text and hides the misalignment entirely: the table
   reads as "header RTL, body LTR" (user report 2026-08-16).
   align="…" is a presentational hint, so any author rule outranks it — but it
   must be pinned to html[dir] rather than written as text-align: start,
   because the engine may also emit dir on a cell and start would then resolve
   against THAT, which is the thing being corrected. */
html[dir="rtl"] .legalai-answer th,
html[dir="rtl"] .legalai-answer td { text-align: right; }

html[dir="ltr"] .legalai-answer th,
html[dir="ltr"] .legalai-answer td { text-align: left; }

/* Centring is the one hint worth keeping: it is direction-neutral, so it
   cannot be wrong for the locale, and it is how a table of short codes or
   figures is meant to read. */
html[dir] .legalai-answer th[align="center"],
html[dir] .legalai-answer td[align="center"] { text-align: center; }

.legalai-answer thead th,
.legalai-answer tr:first-child th {
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
    font-weight: 700;
    white-space: nowrap;
}

/* Zebra rows — comparison tables (المادة 77 مقابل 80…) are where answers
   get dense, and the stripe keeps rows traceable at full width. */
.legalai-answer tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}

.legalai-answer blockquote {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border-inline-start: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.85rem;
    color: var(--text-secondary);
    margin-block: 0.75rem;
}

.legalai-answer blockquote p:last-child { margin-block-end: 0; }

.legalai-answer code {
    background: var(--bg-secondary);
    border-radius: var(--radius-xs);
    padding: 0.1rem 0.3rem;
    font-size: 0.85em;
}

.legalai-answer pre {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin-block: 0 0.75rem;
}

.legalai-answer pre code {
    background: transparent;
    padding: 0;
}

.legalai-answer a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legalai-answer hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin-block: 1rem;
    opacity: 1;
}

/* The blinking caret while the answer streams. Static (no @keyframes — the
   GSAP-only rule): presence alone signals "still writing". */
.legalai-cursor {
    display: inline-block;
    inline-size: 2px;
    block-size: 1em;
    background: var(--primary);
    vertical-align: text-bottom;
    margin-inline-start: 2px;
}

/* Sits UNDER the answer card — no border-top: the card's own bottom edge
   is already the divider, and a rule here would read as a double line. */
.legalai-disclaimer {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-inline: 0.5rem;
    margin-top: 0.6rem;
}

/* --- Per-answer mode chip ----------------------------------------------- */

/* A chat mixes modes freely, so every answer states the one that produced it.
   Deliberately NOT a button: it reports, it does not act, and it sits beside
   two real buttons — so it stays borderless and quiet, carrying only the
   mode's own icon colour (.legalai-mode-icon-*, shared with the composer). */
.legalai-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

/* --- The timing ⓘ ------------------------------------------------------- */

/* The turn's timings live behind this icon instead of being spelled out in
   the footer. The panel is CSS-only — there is no tooltip component in this
   app (every other "tooltip" here is a native title=, which cannot carry the
   stopwatch glyph) and Bootstrap's needs JS init, which nothing on this page
   does. */
.legalai-timing {
    position: relative;
    display: inline-flex;
}

.legalai-timing-tip {
    position: absolute;
    /* Above the button: the footer is the last thing in the answer card, so
       a panel below it would open off the end of the thread. */
    inset-block-end: calc(100% + 0.4rem);
    /* End-anchored, so the panel grows toward the start edge where the space
       is — it is several times the width of the button it hangs off. */
    inset-inline-end: 0;
    z-index: var(--z-tooltip);
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    /* visibility, not display, so the opacity fade has something to run on;
       pointer-events off so the panel cannot swallow the hover that opened
       it or block the copy button underneath. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* :focus-visible alone would leave a TAP showing nothing — a touch tap
   focuses without matching it — so :focus covers the phone. */
.legalai-timing:hover .legalai-timing-tip,
.legalai-timing-btn:focus + .legalai-timing-tip {
    opacity: 1;
    visibility: visible;
}

/* --- Related questions -------------------------------------------------- */

.legalai-related-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

.legalai-related-item:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Composer ----------------------------------------------------------- */

/* Sticky, not fixed: it stays inside .main-content, so the sidebar offset
   and RTL both come for free and the footer is never covered. */
.legalai-composer {
    position: sticky;
    bottom: 1rem;
    z-index: 10;
    max-width: 900px;
    margin-inline: auto;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md, var(--shadow-sm));
    padding: 0.5rem 0.75rem;
}

.legalai-composer .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* --- Mode dropdown -------------------------------------------------------
   A custom toggle + panel, not a native select: each mode shows a distinct
   icon (bolt / scales / brain, like the demo) and an <option> cannot render
   one. Placement is PURE CSS — the composer is sticky at the viewport
   bottom, so the panel always opens upward and there is no side to compute;
   dropdown-panel.js is deliberately not involved (its job is panels whose
   direction depends on where the anchor sits). */

.legalai-mode {
    position: relative;
    flex-shrink: 0;
}

.legalai-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.legalai-mode-toggle:hover:not(:disabled) {
    border-color: var(--primary);
}

.legalai-mode-toggle:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
}

.legalai-mode-caret {
    font-size: 0.65rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.legalai-mode.is-open .legalai-mode-caret {
    transform: rotate(180deg);
}

.legalai-mode-panel {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    inset-inline-start: 0;
    min-inline-size: 13rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md, var(--shadow-sm));
    padding: 0.35rem;
    z-index: 20;
}

.legalai-mode-heading {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0.35rem 0.6rem 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.legalai-mode-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.8rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: start;
}

.legalai-mode-option:hover:not(:disabled) {
    background: var(--bg-secondary);
}

/* --text-secondary, not --text-muted: "(coming soon)" must stay readable on
   the light card, where --text-muted is below the AA floor. */
.legalai-mode-option:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

.legalai-mode-check {
    margin-inline-start: auto;
    color: var(--primary);
    visibility: hidden;
}

.legalai-mode-option[aria-selected="true"] .legalai-mode-check {
    visibility: visible;
}

/* Per-mode icon colours — the demo's amber/sky/purple, as theme-aware
   tokens (never hex here). */
.legalai-mode-icon-speed    { color: var(--warning); }
.legalai-mode-icon-balanced { color: var(--info); }
.legalai-mode-icon-deep     { color: var(--accent); }

.legalai-send-btn,
.legalai-composer-new {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Mobile composer — the single row above squeezes the text field to a few
   pixels once the new-chat button, the mode pill and send are laid beside it
   on a phone (the user could not see what they were typing). Below the tablet
   breakpoint the field takes a row of its own ABOVE the controls, filled with
   --bg-secondary so it reads as a text box rather than as empty capsule, and
   at 1rem so iOS Safari does not zoom the page on focus. */
@media (max-width: 767.98px) {
    .legalai-composer {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        /* The pill radius only suits one row; two rows want a soft box. */
        border-radius: var(--radius-lg);
        padding: 0.6rem;
    }

    .legalai-composer .form-control {
        order: -1;
        flex: 1 0 100%;
        min-inline-size: 0;
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
        padding: 0.6rem 0.85rem;
        font-size: 1rem;
    }

    .legalai-composer .form-control:focus {
        background-color: var(--bg-secondary);
    }

    /* Full row too, so a validation message never lands between the buttons. */
    .legalai-composer .invalid-feedback {
        order: 5;
        flex: 1 0 100%;
        margin-top: 0;
    }

    .legalai-composer-new { order: 1; }
    .legalai-mode         { order: 2; }

    /* Pushed to the far end of the control row, away from new-chat/mode. */
    .legalai-send-btn {
        order: 3;
        margin-inline-start: auto;
    }
}

/* --- Scroll shortcuts ---------------------------------------------------- */

/* Fixed on the page's inline-END edge (left under RTL — the side the content
   occupies, away from the sidebar), parked above the sticky composer.
   Visibility is per-button, toggled by legal-ai.js from the scroll position. */
.legalai-scroll-nav {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 6.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 15;
}

.legalai-scroll-btn {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Opaque card fill — these float over answer text, and the outline
       button's transparent default would leave words showing through. */
    background-color: var(--card);
    box-shadow: var(--shadow-md, var(--shadow-sm));
}

/* --- History drawer ------------------------------------------------------ */

/* Reuses .modal-overlay + ModalManager, restyled as an inline-end drawer:
   the overlay's centering is overridden so the panel hugs the start of the
   page's END edge (right in LTR, left in RTL) at full height. */
.legalai-drawer.modal-overlay.show {
    align-items: stretch;
    justify-content: flex-end;
}

.legalai-drawer .modal-content.legalai-drawer-panel {
    width: 340px;
    max-width: 85vw;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: hidden;
    /* Notch clearance when the drawer sits on the physical edge. */
    padding-inline-end: max(1rem, env(safe-area-inset-right));
}

.legalai-drawer-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 0.75rem;
}

.legalai-history-group {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0.75rem 0 0.25rem;
}

.legalai-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text);
    font-size: 0.85rem;
}

.legalai-history-item:hover {
    background: var(--bg-secondary);
}

.legalai-history-item.active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    font-weight: 600;
}

.legalai-history-item .history-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* --- Empty state --------------------------------------------------------- */

.legalai-empty {
    text-align: center;
    color: var(--text-secondary);
    padding-block: 4rem 2rem;
}

.legalai-empty i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}