/* Camida Sourcing - Custom Styles */
/* Based on Frontend Architecture Redesign Overview with Camida brand colors */

/* ============================================
   1. CSS Variables - Camida Brand Colors
   ============================================ */
:root {
    /* Brand Colors */
    --camida-primary: #1f474d;
    --camida-primary-dark: #1a3c41;
    --camida-secondary: #f4f1e8;
    --camida-accent: #c46d3b;
    --camida-accent-light: #f0ddd0;
    --camida-accent-muted: #e8d5b7;
    --camida-light: #f8f9fa;

    /* Text Colors */
    --text-primary: #1f474d;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-white: #ffffff;

    /* Status Colors */
    --success: #059669;
    --success-light: #d1fae5;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --error: #dc2626;
    --error-light: #fee2e2;
    --info: #2563eb;
    --info-light: #dbeafe;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(31, 71, 77, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(31, 71, 77, 0.1), 0 2px 4px -1px rgba(31, 71, 77, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(31, 71, 77, 0.1), 0 4px 6px -2px rgba(31, 71, 77, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(31, 71, 77, 0.1), 0 10px 10px -5px rgba(31, 71, 77, 0.04);
}

/* ============================================
   1.4. Baseline UI scale
   ============================================ */
/* The interface is tuned to feel like ~125% browser zoom. We scale the root
   font-size (not `zoom`) so rem-based sizing — text, spacing, widths — grows
   proportionally while viewport units (vh) stay intact. `zoom` would inflate
   every `calc(100vh - …)` layout by 25%, breaking full-height pages (the chat
   hero, modals, panels). Using % keeps it relative to the user's base font too.
   Tunable here; could later become a per-user preference in the A11y popover. */
:root {
    font-size: 125%;
}

/* ============================================
   1.5. Typography Foundations
   ============================================ */
body {
    letter-spacing: -0.011em;
    line-height: 1.6;
    /* Solid cream base behind the radial accents — without this, page navs
       briefly show browser-default white while MapLibre is initialising,
       which reads as a flash. */
    background-color: var(--camida-secondary);
    background-image:
        radial-gradient(circle at 20% 50%, rgba(196, 109, 59, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(31, 71, 77, 0.03) 0%, transparent 50%);
}

/* Headings - DM Serif Display */
h1,
h2,
h3,
h4,
h5,
h6,
.font-serif {
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Body text - Instrument Sans */
p {
    line-height: 1.65;
    letter-spacing: -0.011em;
}

/* Small text */
.text-xs,
.text-sm {
    letter-spacing: -0.006em;
    line-height: 1.5;
}

/* Large display text */
.text-3xl,
.text-4xl,
.text-5xl {
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* ============================================
   2. DaisyUI Theme Override
   ============================================ */
[data-theme="camida"] {
    /* The theme is light-only. DaisyUI ships a `@media (prefers-color-scheme: dark)`
       rule that declares `color-scheme: dark` on :root, and this block previously
       overrode the colour tokens but not that — so on any machine set to dark mode
       Chrome painted every *native* control dark while the page stayed light. The
       visible symptom was rail checkboxes rendering as solid dark squares, which
       read as already-ticked. Same specificity as DaisyUI's :root, later in source
       order, so this wins. */
    color-scheme: light;
    --p: 197 43% 21%;
    --pf: 197 45% 18%;
    --pc: 38 43% 94%;
    --s: 38 43% 94%;
    --sf: 35 35% 82%;
    --sc: 197 43% 21%;
    --a: 21 55% 50%;
    --af: 21 58% 42%;
    --ac: 0 0% 100%;
    --n: 197 43% 21%;
    --nf: 197 45% 18%;
    --nc: 38 43% 94%;
    --b1: 38 43% 94%;
    --b2: 210 20% 98%;
    --b3: 210 16% 93%;
    --bc: 197 43% 21%;
}

/* DaisyUI modal background override */
.modal-box { 
    background-color: white; 
}

/* ============================================
   3. Navigation Styles
   ============================================ */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #4b5563;
    font-weight: 500;
    letter-spacing: -0.011em;
    line-height: 1.5;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
    position: relative;
}

.nav-link:hover {
    background-color: var(--camida-secondary);
    color: var(--camida-primary);
    border-left-color: var(--camida-accent);
    padding-left: calc(1rem + 2px);
}

.nav-link:hover i {
    color: var(--camida-accent);
    transform: scale(1.1);
}

.nav-link.active {
    background-color: var(--camida-primary);
    color: white;
    border-left-color: var(--camida-accent);
    box-shadow: 0 2px 8px rgba(31, 71, 77, 0.25);
}

.nav-link.active:hover {
    background-color: var(--camida-primary-dark);
    padding-left: 1rem;
}

.nav-link.active img {
    filter: brightness(0) invert(1);
}

.nav-link i {
    font-size: 1rem;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link.active i {
    color: var(--camida-accent);
}

/* ============================================
   4. Card Components
   ============================================ */
.card-modern {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb;
    padding: 1.5rem;
    transition: all 0.2s ease-in-out;
}

.card-modern:hover {
    box-shadow: var(--shadow-md);
}

.card-premium {
    background-color: white;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(196, 109, 59, 0.15);
}

.glass-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ============================================
   5. Button Styles
   ============================================ */
.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.006em;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
    background-color: #f3f4f6;
    color: #374151;
    border: none;
    cursor: pointer;
}

.btn-modern:hover {
    background-color: #e5e7eb;
}

.btn-modern.scope-pill {
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background-color: #fff;
    color: #4b5563;
    font-size: 0.75rem;
}

.btn-modern.scope-pill:hover:not(:disabled) {
    background-color: #fff;
    border-color: #d1d5db;
}

.btn-modern.scope-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-modern.scope-pill.is-active,
.btn-modern.scope-pill.is-active:hover {
    background-color: var(--camida-primary);
    border-color: var(--camida-primary);
    color: #fff;
}

.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.006em;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
    background-color: var(--camida-primary);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(31, 71, 77, 0.2);
}

.btn-premium:hover {
    background-color: var(--camida-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(31, 71, 77, 0.3);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.006em;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
    background-color: var(--camida-secondary);
    color: var(--camida-primary);
    border: 1px solid rgba(31, 71, 77, 0.2);
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--camida-accent);
}

.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.006em;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
    background-color: #059669;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-success:hover {
    background-color: #047857;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: -0.006em;
    line-height: 1.4;
    transition: all 0.2s ease-in-out;
    background-color: #dc2626;
    color: white;
    border: none;
    cursor: pointer;
}

.btn-danger:hover {
    background-color: #b91c1c;
}

/* ============================================
   6. Form Input Styles
   ============================================ */
.input-modern {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #111827;
    font-size: 0.9375rem;
    letter-spacing: -0.011em;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
}

/* A date field sized to its value, not to the grid column: full-width dates read as
   free-text boxes and put the Today shortcut a column-width away from its input. */
.date-field {
    max-width: 13rem;
}

.input-modern:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 71, 77, 0.3);
    border-color: var(--camida-primary);
}

.input-modern::placeholder {
    color: #9ca3af;
}

.select-modern {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #111827;
    cursor: pointer;
}

.select-modern:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 71, 77, 0.3);
    border-color: var(--camida-primary);
}

.label-modern {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    letter-spacing: -0.006em;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

/* Two-up field grid that responds to its CONTAINER, not the viewport.
   `sm:grid-cols-2` is the obvious way to write this and it is wrong here: `sm:` is a
   media query on the viewport, but these grids sit in cards whose width is decided by
   the page layout. On the CamSpec detail page the left column is at its NARROWEST at
   large viewports (that is when the sheet preview claims two thirds of the row), so the
   viewport breakpoint fires exactly when the space is least. Compounding it, §1.4 scales
   the root font to 125%, so every control is a quarter wider than the raw px in
   Tailwind's breakpoints. Result was two ~140px columns holding a date input and a
   select, both cut off mid-value.

   Two columns only when each can be at least --field-min; one otherwise. The `max(…,
   (100% - 2rem) / 2)` floor caps it at two — plain `auto-fit` would pack a third column
   into a wide card, and these are two-up layouts by design. Set --field-min higher on a
   grid whose controls need more room. Gap stays with the caller (Tailwind gap-* varies
   per card); 2rem is the widest of those gaps, and overstating it only shrinks the floor,
   which cannot let a third column in. */
.field-grid {
    --field-min: 13rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(var(--field-min), (100% - 2rem) / 2), 1fr));
}

.field-grid > .field-span-all {
    grid-column: 1 / -1;
}

/* ============================================
   7. Status Badges
   ============================================ */
.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.003em;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-new {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-in-progress {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-quoted {
    background-color: #ede9fe;
    color: #6b21a8;
}

.badge-ordered {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

/* An order exists. Drawn in .badge-cycle's shape and its key segment's type, so it sits
   with the stage/Progress pill as a companion rather than a fourth, differently built chip. */
.enq-ordered-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.4375rem;
    border: 1px solid color-mix(in srgb, #059669 45%, transparent);
    border-radius: 9999px;
    background-color: #ecfdf5;
    color: #065f46;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}
.enq-ordered-mark i { font-size: 0.5rem; }

/* A read-only marker, not a state: a bare muted glyph so it doesn't compete with the chips. */
.enq-deft-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #9ca3af;
    font-size: 0.6875rem;
}

.badge-closed {
    background-color: #f3f4f6;
    color: #374151;
}

.badge-other {
    background-color: #e2e8f0;
    color: #334155;
}

/* Derived Progress (Pending / Quoted / Rejected / Sample / Other).
   Sits beside the sourcing status in the grid and the spine, and three of the five
   words are shared with it — so Progress is drawn as an OUTLINE with a leading dot
   rather than a filled pill, to stop the two reading as one repeated status.
   Colour comes from the progress value itself: the badge previously hardcoded
   badge-quoted, so a Rejected cycle rendered in quote purple. */
.badge-progress {
    background-color: #fff;
    border: 1px solid currentColor;
    gap: 0.3rem;
}

.badge-progress::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* The grid's small chip. One class rather than a Tailwind cluster repeated per
   chip (`px-1.5 py-0.5 rounded text-xs font-medium`), because they all have to
   change together: the request types, the enquiry type, the priority and Ordered are
   annotations on a row, and at .badge-status's 0.75rem they were as loud as the
   values they annotate. Colour still comes from a utility or badge class alongside,
   so this only sets the size and shape. */
.badge-mini {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.005em;
    white-space: nowrap;
}

/* The project name under a customer in the Enquiries List. Truncates, since a project name
   is free text and the customer column is narrow; the full name is in the title. */
.badge-project {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    background: #eef2f7;
    color: var(--camida-primary);
}

/* TWO FIELDS IN ONE PILL — a key segment and a value segment, divided by a
   hairline. Introduced for the grid's Status cell (cycle stage + derived Progress)
   and now also its Owners cell (role + person), which is why the structure is a
   component and the two uses are skins over it.

   The Status use was asked for and MEASURED first, because the obvious version is
   wrong: over 14,581 cycles all twelve stage x progress pairs occur, so the two
   values cannot be folded into one vocabulary — only into one object. */
.badge-split {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background-color: #fff;
}

.badge-split .badge-split-key {
    display: inline-flex;
    align-items: center;
    /* Its own neutral ink and a divider, so the halves read as two fields in one
       object rather than one long label. currentColor at 25% keeps the divider tinted
       with the pill instead of fighting it. */
    color: #475569;
    background-color: #f8fafc;
    border-right: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge-split .badge-split-value {
    display: inline-flex;
    align-items: center;
}

/* Skin 1 — the cycle's stage and Progress. Fully rounded, and it takes its colour
   from the Progress value (badge-quoted / badge-pending / badge-rejected set
   `color`, and the border and the dot read `currentColor`), because Progress is the
   value that changes most often and drawing Rejected in quote purple was a real bug
   once. The KEY segment deliberately does not vary by stage: four colours in one
   pill is noise, and the stage word is always printed.

   Sized down a step on 2026-09-04: at 0.75rem in a ten-column grid the pill was the
   loudest thing on the row, competing with the product name it describes. :root sets
   font-size 125% (§1.4), so these are a quarter larger on screen than they read
   here. */
.badge-cycle {
    border: 1px solid currentColor;
    border-radius: 9999px;
    font-size: 0.6875rem;
}

.badge-cycle .badge-split-key {
    padding: 0.1875rem 0.4375rem;
    font-size: 0.5625rem;
}

.badge-cycle .badge-split-value {
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
}

.badge-cycle .badge-split-value::before {
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 9999px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* One step up, for the enquiry detail page's spine. The base size was tuned down
   for a ten-column grid row, where the pill is one of nine things competing; in the
   spine it is the page's only lifecycle chip and sits beside a 44px serif title, so
   the grid size reads as a footnote. The modifier keeps ONE component with one set
   of colours and one set of semantics — the alternative, a second skin, is how the
   spine came to disagree with the grid about which facts a lifecycle chip shows.
   Sizes only; nothing here touches colour or structure. */
.badge-cycle--lg {
    font-size: 0.8125rem;
}

.badge-cycle--lg .badge-split-key {
    padding: 0.25rem 0.5625rem;
    font-size: 0.625rem;
}

.badge-cycle--lg .badge-split-value {
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
}

.badge-cycle--lg .badge-split-value::before {
    width: 0.375rem;
    height: 0.375rem;
}

/* A split pill that is a control, and the selectors are doubled up deliberately.
   enquiry.css line 87 is `.enq button { font: inherit; }` — specificity (0,1,1),
   which outranks `.badge-cycle--lg` (0,1,0) and resets size, weight AND
   line-height together. Measured: the priority badge came out at 14px (the .enq
   body size it inherits) beside a visually identical span at 16.25px, and the
   font-size declaration two rules above it was simply losing. So every button
   variant is written as `button.badge-split.<x>` (0,2,1) rather than relying on
   source order against that reset — and the size has to be restated per modifier
   rather than set once here, because it is the modifier that carries it.

   Same class of caveat as button.enq-priority and button.enq-status-chip in
   enquiry.css; the difference is that those live in the file doing the resetting,
   so they only had to beat the UA. */
button.badge-split {
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

button.badge-split.badge-split {
    font-weight: 600;
    line-height: 1.4;
}

button.badge-split.badge-cycle {
    font-size: 0.6875rem;
}

button.badge-split.badge-cycle--lg {
    font-size: 0.8125rem;
}

.badge-split-chevron {
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.125rem;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Priority, as a value of the pill above. `color` ONLY — the border and the dot
   read currentColor, and a background here would paint over the white capsule.
   Deliberately not the badge-high/medium set, which exists to FILL
   .badge-mini in the grid; reusing those names here would have made the pill a
   tinted capsule again, which is what it was.

   The inks are the ones the detail page already used for these levels
   (enquiry.css's --enq-warning-ink / --enq-info-ink), spelled literally because
   those tokens are scoped to `.enq` and this file is global. Note the grid's fill
   palette disagrees (amber for Medium), but it only ever renders High, so the
   two never meet. */
.badge-priority-high {
    color: #b45309;
}

.badge-priority-medium {
    color: #1d4ed8;
}

/* Skin 2 — an owner: which role, and who holds it. Square and neutral, so a column
   of these does not read as a column of statuses; the role is the thing being
   labelled, not a state.

   The name stays on ONE line. Letting it wrap broke "Sarah Egan" across two, which
   reads as two people; measured, nowrap costs the column 37px (196 -> 233) and the
   table absorbs it — min-content 1,598px either way, no scroll gained. It comes out
   of a name eventually at a narrow viewport, which is what the scroller is for. */
.badge-owner {
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    color: #374151;
    max-width: 100%;
}

.badge-owner .badge-split-key {
    padding: 0.0625rem 0.3125rem;
    font-size: 0.5rem;
    flex-shrink: 0;
}

.badge-owner .badge-split-value {
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Cycle stage (Live / Interim / Final / Marked For Review), as a chip of its own.
   Square rather than a pill: wherever it appears beside status badges, a third
   rounded chip would read as another status rather than the stage. Still used
   outside the grid, where the combined .badge-cycle pill is not what is wanted. */
.badge-stage {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-pending {
    color: #57534e;
}

.badge-rejected {
    color: #b91c1c;
}

.badge-sample {
    color: #0e7490;
}

.badge-high {
    background-color: #ffedd5;
    color: #9a3412;
}

.badge-medium {
    background-color: #fef3c7;
    color: #92400e;
}

/* ============================================
   8. Table Styles
   ============================================ */
.table-modern {
    width: 100%;
}

.table-modern thead {
    background-color: #f9fafb;
}

.table-modern th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

.table-modern td {
    padding: 1rem 1.5rem;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 20rem;
    font-size: 0.875rem;
    letter-spacing: -0.006em;
    line-height: 1.5;
}

/* The Actions column holds one chevron, so it should claim no more width than the
   chevron needs. `width: 1%` plus nowrap is the standard shrink-to-fit trick for a
   table cell: the browser gives it its content width and hands the slack to the
   flexible columns. Padding is trimmed from the cell's 1.5rem because a 12px glyph
   centred in 48px of padding reads as an empty column. */
.enq-actions-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.enq-row-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: #9ca3af;
    font-size: 0.8125rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.enq-row-open:hover,
.enq-row-open:focus-visible {
    color: var(--camida-primary);
    background-color: var(--camida-light);
}

.table-modern tbody tr {
    border-bottom: 1px solid #e5e7eb;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
    background-color: #f9fafb;
    border-left-color: var(--camida-accent);
}

.table-modern tbody tr:last-child {
    border-bottom: none;
}

/* Enquiries List grid: folds columns into their neighbours as its own container narrows,
   so it never scrolls sideways (the quick-view panel takes ~29rem). Each .enq-list-fold is the
   folded copy of a hidden .enq-list-col-*; see docs/enquiry-list.md § Fitting the grid. */
.enq-list-scroll {
    container: enq-list / inline-size;
    border-radius: calc(0.75rem - 1px) calc(0.75rem - 1px) 0 0; /* inside .card-modern's 1px border */
}
.enq-list .enq-list-fold { display: none; }
.enq-list th,
.enq-list td { padding-left: 0.9rem; padding-right: 0.9rem; }

/* SC-206: a customer/project heading between grouped rows, desktop and mobile. */
.enq-list .enq-list-group-row th,
.enq-list-group-heading {
    background: #f3f4f6;
    color: var(--camida-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.enq-list-group-heading { padding-left: 1rem; padding-right: 1rem; }

@container enq-list (max-width: 1540px) {
    .enq-list .enq-list-col-customer,
    .enq-list .enq-list-col-qty,
    .enq-list .enq-list-col-ordered { display: none; }
    .enq-list .enq-list-fold-customer,
    .enq-list .enq-list-fold-qty,
    .enq-list .enq-list-fold-ordered { display: block; }
}

@container enq-list (max-width: 1100px) {
    .enq-list .enq-list-col-suppliers { display: none; }
    .enq-list th,
    .enq-list td { padding-left: 0.7rem; padding-right: 0.7rem; }
}

@container enq-list (max-width: 860px) {
    .enq-list .enq-list-col-status,
    .enq-list .enq-list-col-owners { display: none; }
    .enq-list .enq-list-fold-status,
    .enq-list .enq-list-fold-owners { display: block; }
    .enq-list td { max-width: none; }
}

@container enq-list (max-width: 600px) {
    .enq-list,
    .enq-list tbody { display: block; }
    .enq-list thead { display: none; }
    .enq-list tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.5rem;
        padding: 0.75rem 0.5rem 0.75rem 0.9rem;
    }
    .enq-list tbody td { display: block; padding: 0; max-width: none; }
    .enq-list tbody tr.enq-list-group-row { display: block; padding: 0; }
    .enq-list .enq-list-group-row th { display: block; }
    .enq-list .enq-list-col-enquiry {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.6rem;
    }
    .enq-list .enq-list-col-enquiry > * { margin-top: 0; }
    .enq-list .enq-list-col-product { grid-column: 1; margin-top: 0.4rem; }
    .enq-list .enq-actions-cell { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: auto; }
    .enq-list .enq-actions-cell > * { display: flex; margin: 0 auto; }
}

/* ============================================
   9. Stats Card Styles
   ============================================ */
.stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb;
    padding: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--camida-accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    letter-spacing: -0.006em;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.stat-card.stat-primary .stat-value {
    color: var(--camida-primary);
}

.stat-card.stat-primary::before {
    background: var(--camida-primary);
    opacity: 1;
}

.stat-card.stat-success .stat-value {
    color: #059669;
}

.stat-card.stat-success::before {
    background: #059669;
    opacity: 1;
}

.stat-card.stat-warning .stat-value {
    color: #d97706;
}

.stat-card.stat-warning::before {
    background: #d97706;
    opacity: 1;
}

.stat-card.stat-danger .stat-value {
    color: #dc2626;
}

.stat-card.stat-danger::before {
    background: #dc2626;
    opacity: 1;
}

.stat-card.stat-info .stat-value {
    color: #2563eb;
}

.stat-card.stat-info::before {
    background: #2563eb;
    opacity: 1;
}

/* ============================================
   10. Search Styles
   ============================================ */
.search-container {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-right: 3rem;
    border-radius: 0.5rem;
    border: 2px solid #e5e7eb;
    background-color: white;
    color: #111827;
}

.search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(31, 71, 77, 0.3);
    border-color: var(--camida-primary);
}

.search-input.smart-mode {
    border-color: #bfdbfe;
    background: linear-gradient(to right, #eff6ff, #eef2ff);
}

.search-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--camida-primary);
    color: white;
    border: none;
    cursor: pointer;
}

.search-button:hover {
    background-color: var(--camida-primary-dark);
}

.search-button:disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

.search-mode-toggle {
    display: flex;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.search-mode-toggle button {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
}

.search-mode-toggle button:hover {
    color: #111827;
}

.search-mode-toggle button.active {
    background-color: white;
    color: #111827;
    box-shadow: var(--shadow-sm);
}

/* ============================================
   11. AI Feature Styles
   ============================================ */
.ai-badge {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    background-color: #dbeafe;
    color: #1e40af;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
}

.ai-suggestion-card {
    background: linear-gradient(to right, #eff6ff, #eef2ff);
    border-radius: 0.75rem;
    border: 1px solid #bfdbfe;
    padding: 1.5rem;
}

.ai-suggestion-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.ai-searching {
    display: flex;
    align-items: center;
    color: #2563eb;
    font-size: 0.75rem;
}

.ai-searching i {
    animation: spin 1s linear infinite;
    margin-right: 0.25rem;
}

/* ============================================
   12. Assistant Panel Styles
   ============================================ */

/* Hide Alpine.js elements until Alpine initialises (prevents flash of unstyled content) */
[x-cloak] { display: none !important; }

/* Floating panel container */
.assistant-panel-floating {
    position: fixed;
    right: 0.75rem;
    top: calc(3.5rem + 0.75rem); /* navbar height + gap */
    bottom: 0.75rem;
    width: 28rem;
    max-width: calc(100vw - 1.5rem);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
}

.assistant-header {
    padding: 0.75rem 1rem;
    background-color: var(--camida-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--camida-accent);
    flex-shrink: 0;
    border-radius: 1rem 1rem 0 0;
}

.assistant-title {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assistant-title i {
    color: var(--camida-accent);
    font-size: 0.875rem;
}

/* --- Markdown Content Area --- */
.assistant-content-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    background-color: white;
}

.assistant-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 2rem;
}

.assistant-empty-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--camida-primary), var(--camida-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    opacity: 0.3;
}

/* Markdown prose styling */
.markdown-content {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--text-primary);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    font-family: "DM Serif Display", Georgia, serif;
    color: var(--camida-primary);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.markdown-content h1 {
    font-size: 1.25rem;
    margin: 1.25rem 0 0.5rem;
}

.markdown-content h2 {
    font-size: 1.0625rem;
    margin: 1rem 0 0.375rem;
}

.markdown-content h3 {
    font-size: 0.9375rem;
    margin: 0.75rem 0 0.25rem;
}

.markdown-content p {
    margin: 0.5rem 0;
}

.markdown-content ul,
.markdown-content ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

.markdown-content strong {
    font-weight: 600;
    color: var(--camida-primary);
}

.markdown-content code {
    background-color: rgba(31, 71, 77, 0.08);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

.markdown-content pre {
    background-color: var(--camida-primary);
    color: var(--camida-secondary);
    padding: 0.75rem;
    border-radius: 0.5rem;
    border-left: 3px solid var(--camida-accent);
    overflow-x: auto;
    margin: 0.75rem 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* display:block is what makes overflow-x possible on a table; width:100% keeps a
   narrow one filling the column as before. The agent panel is a 560px column and a
   six-column table measures 582px, so without this the last column is simply cut off
   and nothing can scroll to it. */
.markdown-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin: 0.75rem 0;
}

.markdown-content th {
    background-color: var(--camida-primary);
    color: white;
    padding: 0.5rem 0.625rem;
    text-align: left;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.markdown-content td {
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid #e5e7eb;
}

.markdown-content tr:hover td {
    background-color: rgba(31, 71, 77, 0.03);
}

.markdown-content a {
    color: var(--camida-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.markdown-content blockquote {
    border-left: 3px solid var(--camida-accent);
    padding: 0.5rem 0.75rem;
    margin: 0.75rem 0;
    background-color: rgba(196, 109, 59, 0.05);
    color: var(--text-secondary);
    font-style: italic;
}

.markdown-content hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1rem 0;
}

/* --- Sidebar Summary Sections --- */
#assistant-content.sidebar-summary {
    font-size: 0.8125rem;
    line-height: 1.85;
    color: var(--text-primary);
}

#assistant-content.sidebar-summary h2 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--camida-accent);
    border-bottom: 2px solid var(--camida-accent);
    padding-bottom: 0.375rem;
    margin: 1.5rem 0 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

#assistant-content.sidebar-summary h2:first-child {
    margin-top: 0;
}

#assistant-content.sidebar-summary h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--camida-primary);
    margin: 1rem 0 0.375rem;
}

#assistant-content.sidebar-summary ul {
    list-style: none;
    padding-left: 0;
    margin: 0.375rem 0 1rem;
}

#assistant-content.sidebar-summary li {
    padding: 0.375rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.8125rem;
    line-height: 1.75;
}

#assistant-content.sidebar-summary li:last-child {
    border-bottom: none;
}

#assistant-content.sidebar-summary li ul {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

#assistant-content.sidebar-summary li ul li {
    border-bottom: none;
    padding: 0.125rem 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

#assistant-content.sidebar-summary strong {
    font-weight: 600;
    color: var(--camida-primary);
    font-size: 0.8125rem;
}

#assistant-content.sidebar-summary p {
    margin: 0.625rem 0;
    line-height: 1.85;
}

/* --- Audit Log Section --- */
.assistant-audit-section {
    flex-shrink: 0;
    max-height: 40%;
    border-top: 2px solid var(--camida-accent);
    display: flex;
    flex-direction: column;
}

.assistant-audit-header {
    padding: 0.5rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background-color: #f8f9fa;
    border-bottom: 1px solid #eef0f2;
    flex-shrink: 0;
}

/* --- Activity Log (redesigned) --- */
.activity-log {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.8125rem;
    background-color: transparent;
    border-radius: 0;
    transition: background-color 0.15s ease;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background-color: #fafafa;
}

.activity-item.processing {
    background-color: transparent;
    border-left-color: var(--info);
}

.activity-item.completed {
    background-color: transparent;
    border-left-color: var(--camida-primary);
}

.activity-item.error {
    background-color: transparent;
    border-left-color: var(--error);
}

.activity-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.625rem;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-weight: 500;
    color: #374151;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.activity-description {
    color: #9ca3af;
    font-size: 0.6875rem;
    margin-top: 0.125rem;
}

.activity-time {
    color: #d1d5db;
    font-size: 0.6875rem;
    margin-top: 0.125rem;
}

/* --- Status Footer --- */
.assistant-status-footer {
    padding: 0.625rem 1rem;
    border-top: 1px solid #e5e7eb;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: #9ca3af;
    flex-shrink: 0;
    border-radius: 0 0 1rem 1rem;
}

/* ============================================
   13. Toast Notification Styles
   ============================================ */
/* Prefixed cam-: DaisyUI's .toast is a fixed, column-stacked container and leaks in. */
.cam-toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}

.cam-toast {
    --cam-toast-tone: var(--camida-primary);
    --cam-toast-tint: #e3ecec;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: max-content;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.5rem 0.5rem 0.5rem 0.625rem;
    background: #fffdf8;
    border: 1px solid rgba(31, 71, 77, 0.12);
    border-left: 3px solid var(--cam-toast-tone);
    border-radius: 0.625rem;
    box-shadow: var(--shadow-lg);
    color: var(--camida-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    pointer-events: auto;
    animation: slideInRight 0.25s ease-out;
}

.cam-toast-success { --cam-toast-tone: #2f7d5b; --cam-toast-tint: #dcefe5; }
.cam-toast-warning { --cam-toast-tone: var(--camida-accent); --cam-toast-tint: var(--camida-accent-light); }
.cam-toast-error   { --cam-toast-tone: #b42318; --cam-toast-tint: #fbe4e1; }

.cam-toast-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: var(--cam-toast-tint);
    color: var(--cam-toast-tone);
    font-size: 0.625rem;
}

.cam-toast-message {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cam-toast-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: var(--text-muted);
    font-size: 0.625rem;
    transition: background-color 0.15s, color 0.15s;
}

.cam-toast-close:hover {
    background: var(--camida-secondary);
    color: var(--camida-primary);
}

.cam-toast-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--cam-toast-tone);
    opacity: 0.35;
    transform-origin: left;
    animation: camToastTimer var(--cam-toast-duration, 3000ms) linear forwards;
}

.cam-toast.is-leaving {
    animation: fadeOut 0.2s ease-out forwards;
}

@keyframes camToastTimer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cam-toast,
    .cam-toast-timer,
    .cam-toast.is-leaving {
        animation: none;
    }
}

html.a11y-reduce-motion .cam-toast,
html.a11y-reduce-motion .cam-toast-timer,
html.a11y-reduce-motion .cam-toast.is-leaving {
    animation: none;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ============================================
   14. Animations
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(31, 71, 77, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(31, 71, 77, 0.4);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out;
}

.animate-pulse-glow {
    animation: pulseGlow 2s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   15. Loading States
   ============================================ */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Swap a control's own label for a busy state while its request is in flight.
   For actions that take seconds rather than milliseconds (the CamSpec repository
   transcription is ~6s: Graph search, PDF download, then an LLM pass), a separate
   spinner tucked beside the button isn't enough — the button keeps reading "Start
   Rev 01" and the page looks hung. Replacing the label says what is happening.

   htmx puts .htmx-request on the element that issued the request, which for a form
   submit is the <form>, so these are written as descendant rules. */
.when-busy {
    display: none;
}

.htmx-request .when-busy {
    display: inline-flex;
    align-items: center;
}

.htmx-request .when-idle {
    display: none;
}

.loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-top-color: var(--camida-primary);
    border-radius: 9999px;
    animation: spin 1s linear infinite;
}

.skeleton {
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================
   16. Utility Classes
   ============================================ */
.hover-lift {
    transition: transform 0.2s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(31, 71, 77, 0.1);
}

.text-gradient {
    background: linear-gradient(135deg, var(--camida-primary), var(--camida-primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-camida-primary {
    color: var(--camida-primary);
}

.bg-camida-primary {
    background-color: var(--camida-primary);
}

.bg-camida-secondary {
    background-color: var(--camida-secondary);
}

.bg-camida-accent {
    background-color: var(--camida-accent);
}

/* ============================================
   17. Responsive Layouts & Helpers
   ============================================ */

/* ============================================
   Mobile First - Base styles for mobile
   ============================================ */
@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }

    /* Add bottom padding so content isn't hidden behind mobile nav */
    main {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
        /* Clamp to viewport — prevents any child overflowing sideways */
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* ---- Premium mobile list cards ---- */
    /* Hide the table entirely; show .mobile-list instead */
    .table-modern {
        display: none !important;
    }

    .mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        overflow: hidden;
    }

    .mobile-list-card {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.9375rem 1rem;
        border-bottom: 1px solid #f0f0ee;
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background 0.15s ease;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .mobile-list-card:first-child {
        border-radius: 0.5rem 0.5rem 0 0;
    }

    .mobile-list-card:last-child {
        border-bottom: none;
        border-radius: 0 0 0.5rem 0.5rem;
    }

    .mobile-list-card:active {
        background: rgba(244, 241, 232, 0.95);
    }

    /* Left accent on interaction */
    .mobile-list-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--camida-accent);
        border-radius: 0 2px 2px 0;
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .mobile-list-card:active::before {
        opacity: 1;
    }

    /* Avatar / icon circle */
    .mobile-list-avatar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(31,71,77,0.08) 0%, rgba(196,109,59,0.08) 100%);
        border: 1px solid rgba(31,71,77,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--camida-primary);
        font-family: 'DM Serif Display', Georgia, serif;
        text-transform: uppercase;
    }

    .mobile-list-avatar.accent {
        background: linear-gradient(135deg, rgba(196,109,59,0.12) 0%, rgba(196,109,59,0.06) 100%);
        color: var(--camida-accent);
    }

    /* Card body */
    .mobile-list-body {
        flex: 1;
        min-width: 0;
    }

    .mobile-list-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #111827;
        letter-spacing: -0.011em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-list-subtitle {
        font-size: 0.75rem;
        color: #9ca3af;
        letter-spacing: 0.01em;
        margin-top: 0.125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-list-meta {
        font-size: 0.6875rem;
        color: var(--camida-primary);
        font-weight: 500;
        margin-top: 0.25rem;
        opacity: 0.7;
        /* Long values (e.g. supplier names) must ellipsis, not push the card wide */
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Right side: badge + chevron */
    .mobile-list-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .mobile-list-chevron {
        color: #d1d5db;
        font-size: 0.625rem;
    }

    /* Stat Cards */
    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    /* Mobile Card Padding */
    .card-modern,
    .card-premium {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    /* Mobile Button Sizing */
    .btn-modern,
    .btn-premium,
    .btn-secondary,
    .btn-success,
    .btn-danger {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* Mobile Input Sizing */
    .input-modern,
    .select-modern {
        padding: 0.625rem 0.875rem;
        font-size: 1rem;
    }

    /* Mobile Search */
    .search-input {
        font-size: 1rem;
        padding: 0.625rem 0.875rem;
        padding-right: 3rem;
    }

    .search-button {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }

    /* Mobile Activity Log */
    .activity-log {
        padding: 0.75rem;
        max-height: calc(100vh - 6rem);
    }

    .activity-item {
        padding: 0.625rem;
        font-size: 0.8125rem;
    }

    .activity-icon {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* Desktop: hide the mobile list cards, show normal table */
@media (min-width: 768px) {
    .mobile-list {
        display: none !important;
    }
}

/* ============================================
   Mobile Bottom Navigation Bar
   ============================================ */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    /* Hide the desktop sidebar on mobile */
    aside.fixed.lg\:block {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: rgba(31, 71, 77, 0.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255,255,255,0.12);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        align-items: flex-start;
        justify-content: space-around;
        padding-top: 0;
    }

    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.625rem 0.25rem;
        text-decoration: none;
        color: rgba(255,255,255,0.55);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        transition: color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        min-width: 0;
    }

    .mobile-nav-item i {
        font-size: 1.1rem;
        margin-bottom: 0.0625rem;
    }

    .mobile-nav-search-icon {
        width: 1.5rem;
        height: 1.5rem;
        object-fit: contain;
        opacity: 0.55;
        margin-bottom: 0.0625rem;
        filter: brightness(0) invert(1);
    }

    .mobile-nav-item.active .mobile-nav-search-icon {
        opacity: 1;
        filter: brightness(0) invert(1);
    }

    .mobile-nav-item.active,
    .mobile-nav-item:active {
        color: #ffffff;
    }

    .mobile-nav-item.active i {
        color: var(--camida-accent);
    }

    .mobile-nav-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 4rem;
    }
}

/* Tablet styles */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-on-tablet {
        display: none !important;
    }

    /* Tablet stat cards - 4 column grid */
    .stat-card {
        padding: 1.125rem;
    }

    .card-modern,
    .card-premium {
        padding: 1.25rem;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {

    /* Ensure sidebar space is reserved */
    main {
        min-height: calc(100vh - 3.5rem);
    }
}

/* Larger screens */
@media (min-width: 1280px) {

    /* Additional spacing for larger screens */
    .card-modern,
    .card-premium {
        padding: 1.75rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .nav-link {
        padding: 0.875rem 1rem;
    }

    .btn-modern,
    .btn-premium,
    .btn-secondary {
        padding: 0.625rem 1.125rem;
        min-height: 44px;
        /* iOS recommended minimum */
    }

    /* Disable hover effects on touch devices */
    .hover-lift:hover {
        transform: none;
    }

    .card-modern:hover,
    .card-premium:hover {
        box-shadow: var(--shadow-sm);
    }
}

/* ============================================
   18. Print Styles
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }

    nav,
    aside {
        display: none !important;
    }

    main {
        margin: 0 !important;
        padding: 1rem !important;
    }
}

/* ============================================
   19. Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

:focus-visible {
    outline: 2px solid var(--camida-primary);
    outline-offset: 2px;
}

/* ============================================
   20. Chat Interface Styles
   ============================================ */

/* Chat messages container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual chat message */
.chat-message {
    display: flex;
    gap: 0.75rem;
    animation: fadeInUp 0.3s ease-out;
}

.chat-message.user {
    flex-direction: row-reverse;
}

.chat-message.error {
    flex-direction: row;
}

/* Chat avatar */
.chat-avatar {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.chat-message.user .chat-avatar {
    background-color: var(--camida-primary);
    color: white;
}

.chat-message.assistant .chat-avatar {
    background-color: var(--camida-secondary);
    color: var(--camida-primary);
}

.chat-message.error .chat-avatar {
    background-color: #fee2e2;
    color: #dc2626;
}

/* Chat bubble */
.chat-bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    letter-spacing: -0.006em;
    line-height: 1.6;
}

.chat-message.user .chat-bubble {
    background-color: var(--camida-primary);
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.chat-message.assistant .chat-bubble {
    background-color: #f3f4f6;
    color: #111827;
    border-bottom-left-radius: 0.25rem;
}

.chat-message.error .chat-bubble {
    background-color: #fee2e2;
    color: #991b1b;
    border-bottom-left-radius: 0.25rem;
}

.chat-bubble p {
    margin: 0;
}

.chat-bubble p+p {
    margin-top: 0.5rem;
}

.chat-bubble ul {
    margin: 0;
    padding-left: 1rem;
    list-style-type: disc;
}

.chat-bubble li {
    margin-bottom: 0.25rem;
}

/* Extracted fields in chat */
.extracted-fields,
.sources-cited,
.finalize-action,
.missing-fields {
    font-size: 0.8125rem;
}

/* Chat input area */
.chat-input-container {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    position: relative;
}

.chat-input {
    flex: 1;
    resize: none;
    border: 1px solid #d1d5db;
    border-radius: 1.25rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    letter-spacing: -0.011em;
    line-height: 1.6;
    max-height: 150px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: white;
}

.chat-input:focus {
    outline: none;
    border-color: var(--camida-primary);
    box-shadow: 0 0 0 3px rgba(31, 71, 77, 0.1);
}

.chat-input-buttons {
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chat-mic-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    border: none;
}

.chat-mic-btn:hover {
    background-color: #f3f4f6;
    color: var(--camida-primary);
}

.chat-send-btn-embedded {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: var(--camida-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-send-btn-embedded:hover {
    background-color: var(--camida-primary-dark);
    transform: scale(1.05);
}

.chat-send-btn-embedded:active {
    transform: scale(0.95);
}

.chat-send-btn-embedded:disabled {
    background-color: #d1d5db;
    cursor: not-allowed;
    transform: none;
}

.chat-hint {
    text-align: center;
    margin-top: 0.5rem;
}

/* Loading state for chat */
.chat-message.loading .chat-bubble::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #d1d5db;
    border-top-color: var(--camida-primary);
    border-radius: 9999px;
    animation: spin 1s linear infinite;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
}

.typing-indicator span {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #9ca3af;
    border-radius: 9999px;
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-0.375rem);
        opacity: 1;
    }
}

/* Mobile chat adjustments */
@media (max-width: 767px) {
    .chat-messages {
        max-height: calc(100vh - 14rem);
        padding: 0.75rem;
    }

    .chat-bubble {
        max-width: 90%;
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }

    .chat-avatar {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }

    .chat-input-container {
        padding: 0.75rem;
    }

    .chat-input {
        font-size: 1rem;
        /* Prevent iOS zoom */
    }
}

/* ============================================
   21. Fullpage Chat Styles
   ============================================ */

.chat-page-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 16rem);
    max-height: calc(100vh - 16rem);
    overflow: hidden;
}

.chat-messages-fullpage {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: #fafafa;
    border-radius: 0.5rem 0.5rem 0 0;
}

.chat-input-container-fullpage {
    padding: 1.25rem;
    border-top: 1px solid #e5e7eb;
    background-color: white;
    border-radius: 0 0 0.5rem 0.5rem;
}

.chat-input-wrapper-fullpage {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.chat-input-fullpage {
    flex: 1;
    resize: none;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    letter-spacing: -0.011em;
    line-height: 1.6;
    max-height: 200px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #f9fafb;
}

.chat-input-fullpage:focus {
    outline: none;
    border-color: var(--camida-primary);
    box-shadow: 0 0 0 3px rgba(31, 71, 77, 0.1);
    background-color: white;
}

.chat-input-fullpage::placeholder {
    color: #9ca3af;
}

.chat-send-btn-fullpage {
    height: 3rem;
    padding: 0 1.25rem;
    border-radius: 1rem;
    background-color: var(--camida-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    flex-shrink: 0;
    font-weight: 500;
}

.chat-send-btn-fullpage:hover {
    background-color: var(--camida-primary-dark);
    transform: translateY(-1px);
}

.chat-send-btn-fullpage:active {
    transform: translateY(0);
}

.chat-send-btn-fullpage:disabled {
    background-color: #d1d5db;
    cursor: not-allowed;
    transform: none;
}

/* Fullpage chat mobile adjustments */
@media (max-width: 767px) {
    .chat-page-container {
        min-height: calc(100vh - 12rem);
        max-height: calc(100vh - 12rem);
    }

    .chat-messages-fullpage {
        padding: 1rem;
        gap: 1rem;
    }

    .chat-input-container-fullpage {
        padding: 1rem;
    }

    .chat-input-fullpage {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        /* Prevent iOS zoom */
    }

    .chat-send-btn-fullpage {
        height: 2.75rem;
        padding: 0 1rem;
    }

    .chat-send-btn-fullpage span {
        display: none;
    }
}

/* ============================================
   22. Chat Splash Screen Styles
   ============================================ */

.chat-panel-fullpage {
    min-height: calc(100vh - 10rem);
}

.chat-card-container {
    position: relative;
    min-height: calc(100vh - 12rem);
    overflow: hidden;
}

/* Minimal card container (no background/shadow) */
.chat-card-minimal {
    position: relative;
    min-height: calc(100vh - 12rem);
    overflow: hidden;
}

/* Splash Screen */
.chat-splash {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* The card's min-height already reserves space for the fixed input, so the
       padding stays symmetric — this centres the hero in the visible band. */
    padding: 2rem;
    background: transparent;
    z-index: 10;
    transition: all 0.4s ease-out;
    overflow-y: auto;
}

.chat-splash.collapsing {
    animation: splashCollapse 0.4s ease-out forwards;
}

.chat-splash.hidden {
    display: none;
}

@keyframes splashCollapse {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.98);
        pointer-events: none;
    }
}

/* Hero Logo */
.splash-logo {
    height: 3rem;
    width: auto;
    margin: 0 auto 1.5rem;
    display: block;
    filter: invert(1) brightness(0.5);
    opacity: 0.7;
    position: relative;
    -webkit-mask-image: linear-gradient(-75deg,
            rgba(0, 0, 0, 0.6) 30%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0.6) 70%);
    mask-image: linear-gradient(-75deg,
            rgba(0, 0, 0, 0.6) 30%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0.6) 70%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        -webkit-mask-position: 150% 0;
        mask-position: 150% 0;
    }

    100% {
        -webkit-mask-position: -50% 0;
        mask-position: -50% 0;
    }
}

/* Stats Row */
.splash-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.splash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    min-width: 100px;
}

.splash-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.splash-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--camida-primary) 0%, var(--camida-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.splash-stat-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Drop Zone */
.splash-drop-zone {
    width: 100%;
    max-width: 32rem;
    margin-bottom: 2rem;
    padding: 2rem;
    border: 2px dashed var(--camida-accent);
    border-radius: 1rem;
    background: rgba(244, 241, 232, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.splash-drop-zone:hover {
    background: rgba(244, 241, 232, 0.8);
    border-color: var(--camida-primary);
}

.splash-drop-zone.drag-over {
    border-color: var(--camida-primary);
    background: rgba(31, 71, 77, 0.1);
    transform: scale(1.02);
}

.splash-drop-zone.processing {
    border-color: var(--success);
    background: var(--success-light);
}

.splash-drop-zone.error {
    border-color: var(--error);
    background: var(--error-light);
}

.splash-drop-zone.success {
    border-color: var(--success);
    background: var(--success-light);
}

/* Capability Cards */
.splash-capabilities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 40rem;
    width: 100%;
    margin-bottom: 0;
}

.capability-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    background: white;
    border: 1px solid rgba(31, 71, 77, 0.1);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.capability-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(196, 109, 59, 0.15);
    border-color: rgba(196, 109, 59, 0.3);
}

.capability-card:active {
    transform: translateY(-2px);
}

.capability-card i {
    font-size: 1.5rem;
}

.capability-card span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

/* Unified Modern Chat Input */
.chat-input-wrapper-modern {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 2px;
    border-radius: 1.625rem;
    background: linear-gradient(90deg,
            #e5e7eb 0%,
            #e5e7eb 40%,
            var(--camida-primary) 50%,
            #e5e7eb 60%,
            #e5e7eb 100%);
    background-size: 200% 100%;
    animation: borderShimmer 3s ease-in-out infinite;
    background-color: white;
    width: 100%;
}

.chat-input-wrapper-modern:has(.chat-input-modern:focus) {
    background: linear-gradient(90deg,
            var(--camida-primary) 0%,
            var(--camida-accent) 25%,
            var(--camida-primary) 50%,
            var(--camida-accent) 75%,
            var(--camida-primary) 100%);
    background-size: 200% 100%;
    animation: borderShimmerFocus 2s ease-in-out infinite;
}

.chat-input-modern {
    width: 100%;
    resize: none;
    border: none !important;
    border-radius: 1.5rem;
    /* Clear the mic (left) and send (right) buttons only — the old 6.5rem left
       inset reserved room for a tools button that isn't rendered, which
       squeezed the placeholder onto two lines on narrow phones. */
    padding: 1rem 3.5rem 1rem 3.75rem;
    font-size: 0.9375rem;
    letter-spacing: -0.011em;
    line-height: 1.6;
    max-height: 120px;
    transition: box-shadow 0.2s;
    background: white;
    outline: none !important;
    box-shadow: none !important;
}

.chat-mic-btn-modern {
    position: absolute;
    left: 0.75rem;
    bottom: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    border: none;
    z-index: 5;
}

.chat-mic-btn-modern:hover {
    color: var(--camida-primary);
    background-color: #f3f4f6;
}

.chat-tools-btn-modern {
    position: absolute;
    left: 3.5rem;
    bottom: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
    background-color: transparent;
    border: none;
    z-index: 5;
}

.chat-tools-btn-modern:hover {
    color: var(--camida-primary);
    background-color: #f3f4f6;
}

.chat-send-btn-modern {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--camida-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 5;
}

.chat-send-btn-modern:hover {
    background-color: var(--camida-primary-dark);
    transform: scale(1.05);
}

.chat-send-btn-modern i {
    font-size: 1rem;
}

/* Chat Container.
   While on the splash the container is hidden — collapse it so it reserves no
   viewport height. Its old calc(100vh - 5rem) height applied while hidden and
   pushed the page past the viewport, causing a scroll and dropping the splash
   hero below centre. chat.js removes `chat-container-hidden` (adding `visible`)
   when a conversation starts, so the container then flows normally as before. */
.chat-container-hidden {
    display: none;
}

.chat-container-hidden.visible {
    opacity: 1;
}

/* New Chat button in the top toolbar — revealed only while a conversation is
   active (moved here from the old in-chat header). */
.chat-new-toolbar-btn {
    display: none;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.chat-new-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}

.chat-new-toolbar-btn i {
    font-size: 0.75rem;
}

body.chat-active .chat-new-toolbar-btn {
    display: inline-flex;
}

/* Chat Messages Area */
.chat-messages-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    width: 100%;
    min-height: 0;
    background: rgba(244, 241, 232, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 1rem;
}

/* Chat Input Area */
@keyframes borderShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes borderShimmerFocus {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Improved Chat Input Area */
.chat-input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: transparent;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    overflow: hidden;
}

.chat-input-area>* {
    pointer-events: auto;
}

/* On desktop, offset for the left nav sidebar so input centres in the content area */
@media (min-width: 1024px) {
    .chat-input-area {
        left: 18rem; /* matches aside w-72 */
    }
}

/* Assistant panel layout adjustment */
body.assistant-open .chat-input-area {
    right: 29.5rem;
    /* Panel width (28rem) + right gap (0.75rem) + breathing room */
}

/* On mobile, lift chat input above the bottom nav bar */
@media (max-width: 767px) {
    .chat-input-area {
        bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        /* Cream fade behind the composer so scrolling messages fade out
           instead of bleeding through the transparent input area (fixes the
           text-overlapping-the-input bug on mobile). */
        background: linear-gradient(to top,
                var(--camida-secondary) 0%,
                var(--camida-secondary) 55%,
                rgba(244, 241, 232, 0) 100%);
        padding-top: 2rem;
    }
}

.chat-quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    max-width: 48rem;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.chat-quick-actions::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: white;
    border: 1px solid rgba(31, 71, 77, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.quick-action-btn:hover {
    background: var(--camida-secondary);
    border-color: var(--camida-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.quick-action-btn i {
    font-size: 0.875rem;
}

.chat-input {
    width: 100%;
    resize: none;
    border: none !important;
    background: transparent !important;
    border-radius: 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    max-height: 120px;
    transition: none;
    box-shadow: none !important;
}

.chat-send-btn {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background-color: var(--camida-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0.25rem;
}

.chat-send-btn:hover {
    background-color: var(--camida-primary-dark);
    transform: scale(1.05);
}

/* Adjust message area to not be hidden behind fixed input */
.chat-messages-area {
    padding-bottom: 12rem !important;
    /* Leave space for the fixed input area */
}

/* Extracted Data Panel */
.chat-extracted-panel {
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.chat-data-toggle {
    width: 100%;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #6b7280;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-data-toggle:hover {
    background: #f3f4f6;
}

.chat-data-content {
    padding: 0 1.5rem 1rem;
    background: #f9fafb;
}

.chat-data-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.875rem;
}

/* Complete Section */
.chat-complete-section {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f0fdf4;
    flex-shrink: 0;
}

/* Chat Message Row */
.chat-message {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.chat-message.flex-row-reverse {
    flex-direction: row-reverse;
}

.chat-message.justify-end {
    justify-content: flex-end;
}

/* Chat Avatar (only when an explicit avatar wrapper is present) */
.chat-message>.chat-avatar {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Chat Bubble Styles for JS-generated messages */
.chat-bubble-user {
    background: var(--camida-primary);
    color: white;
    padding: 0.875rem 1.25rem;
    border-radius: 1.25rem;
    border-bottom-right-radius: 0.25rem;
    max-width: 75%;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.chat-bubble-assistant {
    background: transparent;
    color: var(--camida-primary);
    padding: 0.5rem 0;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.85;
    letter-spacing: -0.015em;
}

.chat-bubble-assistant p {
    margin: 0;
}

/* Tool activity strip — sits above the composer while the assistant works,
   so the message stream stays clean and activity shows near the input. */
.tool-status-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    max-width: 64rem;
    /* aligns with the max-w-5xl chat input */
    padding: 0 1.75rem 0.625rem;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.tool-status-strip:empty {
    display: none;
}

.tool-status-strip.fading {
    opacity: 0;
}

.tool-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(31, 71, 77, 0.1);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: toolChipIn 0.25s ease-out;
}

@keyframes toolChipIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tool-status-chip.processing {
    color: var(--camida-primary);
}

.tool-status-chip.processing i {
    color: var(--camida-accent);
    font-size: 0.6875rem;
}

.tool-status-chip.completed {
    color: var(--text-secondary);
}

.tool-status-chip.completed i {
    color: var(--success);
    font-size: 0.6875rem;
}

/* Suggested follow-up chips — click to ask the next question */
.chat-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.chat-followup-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(196, 109, 59, 0.35);
    color: var(--camida-primary);
    cursor: pointer;
    transition: all 0.18s ease;
}

.chat-followup-chip i {
    font-size: 0.6875rem;
    color: var(--camida-accent);
    transition: transform 0.18s ease;
}

.chat-followup-chip:hover {
    background: var(--camida-accent-light);
    border-color: var(--camida-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.chat-followup-chip:hover i {
    transform: translateX(2px);
}

/* Message feedback (thumbs up/down + optional reason) */
.msg-feedback {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-family: 'DM Sans', sans-serif;
}

.msg-feedback-btn {
    width: 1.875rem;
    height: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 0.5rem;
    /* --text-secondary (not --text-muted) so the icons clear the 3:1 UI ratio */
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.msg-feedback-btn:hover {
    background: rgba(31, 71, 77, 0.06);
    color: var(--camida-primary);
}

.msg-feedback-btn.active[data-rating="up"] {
    color: var(--success);
}

.msg-feedback-btn.active[data-rating="down"] {
    color: var(--camida-accent);
}

.msg-feedback-thanks {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.375rem;
}

.feedback-reason {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    max-width: 28rem;
}

.feedback-reason.hidden {
    display: none;
}

.feedback-reason-input {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(31, 71, 77, 0.15);
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    outline: none;
}

.feedback-reason-input:focus {
    border-color: var(--camida-primary);
}

.feedback-reason-send {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: 0.625rem;
    background: var(--camida-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.feedback-reason-send:hover {
    background: var(--camida-primary-dark);
}

/* Cited sources line */
.chat-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(31, 71, 77, 0.1);
    font-family: 'DM Sans', sans-serif;
}

.chat-sources-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.chat-source-chip {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(31, 71, 77, 0.06);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline error alert (streaming failure) — brand tokens, not raw Tailwind red */
.chat-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--error-light);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #7f1d1d;
    max-width: 32rem;
}

.chat-error-icon {
    color: var(--error);
    font-size: 1rem;
    margin-top: 0.125rem;
}

.chat-error-body {
    min-width: 0;
}

.chat-error-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.chat-error-retry {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--error);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.chat-error-retry:hover {
    text-decoration: underline;
}

.chat-error-dismiss {
    align-self: flex-start;
    margin-left: auto;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    color: var(--error);
    opacity: 0.6;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.chat-error-dismiss:hover {
    opacity: 1;
    background: rgba(220, 38, 38, 0.1);
}

/* Frosted ambient background while chatting — the map blurs behind the glass
   messages panel instead of sitting flat behind a near-opaque cream veil. */
body.chat-active #hq-map-bg {
    filter: blur(10px) saturate(1.08);
    transform: scale(1.08);
    /* hide blur-induced transparent edges */
    transition: filter 0.6s ease, transform 0.6s ease;
}

body.chat-active #hq-map-bg::after {
    background: rgba(244, 241, 232, 0.5);
    transition: background 0.6s ease;
}

/* No panel surface while chatting — messages float directly on the blurred
   map (the blur comes from #hq-map-bg above, not a frosted box). */
body.chat-active .chat-messages-area {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
}

/* ============================================
   Chat accessibility — names, focus, motion, contrast
   ============================================ */

/* Screen-reader-only utility (self-contained; not reliant on Tailwind build) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible keyboard focus for chat controls. The modern input kills its own
   outline, so the focus ring rides on the wrapper when focus is via keyboard. */
.chat-input-wrapper-modern:has(.chat-input-modern:focus-visible) {
    box-shadow: 0 0 0 3px rgba(196, 109, 59, 0.45);
}

.chat-followup-chip:focus-visible,
.msg-feedback-btn:focus-visible,
.feedback-reason-input:focus-visible,
.feedback-reason-send:focus-visible,
.chat-error-retry:focus-visible,
.chat-error-dismiss:focus-visible,
.chat-mic-btn-modern:focus-visible,
.chat-send-btn-modern:focus-visible,
.tool-status-chip:focus-visible {
    outline: 2px solid var(--camida-accent);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* The radius above is for the rectangular controls in that list; these two are circles
   and were being squared off for as long as they held keyboard focus. */
.chat-mic-btn-modern:focus-visible,
.chat-send-btn-modern:focus-visible {
    border-radius: 50%;
}

/* Respect reduced-motion: stop continuous/looping motion and entrance effects */
@media (prefers-reduced-motion: reduce) {

    .tool-status-chip,
    .chat-input-wrapper-modern,
    .chat-input-wrapper-modern:has(.chat-input-modern:focus),
    .splash-logo,
    .chat-bubble-assistant.streaming .typing-cursor,
    .animate-pulse {
        animation: none !important;
    }

    .chat-followup-chip:hover,
    .capability-card:hover,
    .splash-stat:hover {
        transform: none;
    }

    body.chat-active #hq-map-bg {
        transition: none;
        transform: none;
    }
}

/* High-contrast / forced-colors: restore a solid, opaque chat surface so answer
   text is never judged against the blurred map image. */
@media (prefers-contrast: more),
(forced-colors: active) {

    body.chat-active #hq-map-bg {
        filter: none;
    }

    body.chat-active #hq-map-bg::after {
        background: var(--camida-secondary);
    }

    body.chat-active .chat-messages-area {
        background: var(--camida-secondary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ============================================
   Accessibility popover + user preference modes
   ============================================ */

.a11y-toggle-btn:focus-visible,
.chat-new-toolbar-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.a11y-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 18rem;
    background: #fff;
    border: 1px solid rgba(31, 71, 77, 0.12);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-xl);
    padding: 0.75rem;
    z-index: 60;
    font-family: 'DM Sans', sans-serif;
}

.a11y-popover-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.25rem 0.5rem 0.5rem;
}

.a11y-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.5rem;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.a11y-option:hover {
    background: var(--camida-secondary);
}

.a11y-option-label {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.a11y-option-label small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.a11y-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--camida-primary);
    cursor: pointer;
}

/* --- Preference: reduce motion (user-toggled, mirrors the OS media query) --- */
html.a11y-reduce-motion .tool-status-chip,
html.a11y-reduce-motion .chat-input-wrapper-modern,
html.a11y-reduce-motion .splash-logo,
html.a11y-reduce-motion .chat-bubble-assistant.streaming .typing-cursor,
html.a11y-reduce-motion .animate-pulse {
    animation: none !important;
}

html.a11y-reduce-motion .chat-followup-chip:hover,
html.a11y-reduce-motion .capability-card:hover,
html.a11y-reduce-motion .splash-stat:hover {
    transform: none;
}

html.a11y-reduce-motion body.chat-active #hq-map-bg {
    transition: none;
    transform: none;
}

/* --- Preference: high contrast (solid surfaces, stronger borders) --- */
html.a11y-high-contrast body.chat-active #hq-map-bg {
    filter: none;
}

html.a11y-high-contrast body.chat-active #hq-map-bg::after {
    background: var(--camida-secondary);
}

html.a11y-high-contrast body.chat-active .chat-messages-area {
    background: var(--camida-secondary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.a11y-high-contrast .chat-followup-chip {
    border-color: var(--camida-primary);
    color: var(--camida-primary);
}

html.a11y-high-contrast .chat-source-chip {
    color: var(--text-primary);
}

/* --- Preference: larger text --- */
html.a11y-large-text .chat-bubble-assistant {
    font-size: 1.3125rem;
    line-height: 1.9;
}

html.a11y-large-text .chat-bubble-user,
html.a11y-large-text .chat-input-modern {
    font-size: 1.0625rem;
}

html.a11y-large-text .chat-followup-chip,
html.a11y-large-text .tool-status-chip {
    font-size: 0.9375rem;
}

/* Streaming state with typing cursor */
.chat-bubble-assistant.streaming .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: var(--camida-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 0.7s infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* Tablet Splash Adjustments */
@media (max-width: 900px) {
    .splash-capabilities {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Mobile Splash Adjustments */
@media (max-width: 767px) {
    .chat-splash {
        padding: 1.5rem 1rem;
    }

    .splash-logo {
        height: 2.5rem;
    }

    .splash-stats-row {
        gap: 0.5rem;
    }

    .splash-stat {
        padding: 0.75rem 1rem;
        min-width: 70px;
    }

    .splash-stat-value {
        font-size: 1.5rem;
    }

    .splash-capabilities {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .capability-card {
        padding: 0.875rem;
    }

    .capability-card i {
        font-size: 1.25rem;
    }

    .splash-drop-zone {
        padding: 1.5rem;
    }

    .splash-input {
        font-size: 1rem;
    }

    .chat-data-fields {
        grid-template-columns: 1fr;
    }

    /* Icon-only "New Chat" in the header to declutter the top bar (the button
       keeps its aria-label for screen readers). */
    .chat-new-toolbar-btn span {
        display: none;
    }

    .chat-new-toolbar-btn {
        padding: 0.375rem 0.5rem;
    }

    /* Lighter, tighter body type so assistant results read as scannable cards
       rather than a wall of large-serif text — the main "cognitive load" fix. */
    .chat-bubble-assistant {
        font-size: 1rem;
        line-height: 1.55;
    }

    .chat-bubble-assistant h1,
    .chat-bubble-assistant h2,
    .chat-bubble-assistant h3 {
        margin: 1rem 0 0.375rem 0;
        line-height: 1.25;
    }

    .chat-bubble-assistant h1 {
        font-size: 1.25rem;
    }

    .chat-bubble-assistant h2 {
        font-size: 1.1875rem;
    }

    .chat-bubble-assistant h3 {
        font-size: 1.0625rem;
    }

    /* Reclaim horizontal room on narrow screens (keeps the 12rem bottom
       clearance for the fixed composer set elsewhere). */
    .chat-messages-area {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Keep the composer text at 1rem on mobile: below 16px, iOS Safari zooms
       the page on focus. Paired with the shorter "Ask anything…" placeholder
       so it never wraps to a second line beside the mic/send buttons. */
    .chat-input-modern {
        font-size: 1rem;
    }
}

/* ============================================
   23. UI Spec Page Styles
   ============================================ */

/* Quick Navigation Pills */
.quick-nav-pill {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.quick-nav-pill:hover {
    background: var(--camida-primary);
    color: white;
    border-color: var(--camida-primary);
    transform: translateY(-1px);
}

.quick-nav-pill.active {
    background: var(--camida-primary);
    color: white;
    border-color: var(--camida-primary);
}

/* Colour Swatch Cards */
.colour-swatch-card {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: white;
    transition: all 0.2s ease;
}

.colour-swatch-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Code Snippets */
.code-snippet {
    display: inline-block;
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    color: var(--camida-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
}

.code-snippet:hover {
    background: #e5e7eb;
    border-color: var(--camida-primary);
}

/* Code Blocks */
.code-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.5;
    white-space: pre;
}

.code-block:hover {
    border-color: var(--camida-primary);
    background: white;
}

/* Component Demo Container */
.component-demo {
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fafafa;
}

/* Scroll margin for sticky header */
.scroll-mt-32 {
    scroll-margin-top: 8rem;
}

/* Toast Animation */
.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .quick-nav-pill {
        font-size: 0.8125rem;
        padding: 0.375rem 0.75rem;
    }

    .component-demo {
        padding: 1rem;
    }

    .code-block {
        font-size: 0.8125rem;
        padding: 0.75rem;
    }
}

/* ============================================
   24. Markdown Rendering in Chat Bubbles
   ============================================ */

.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3 {
    font-weight: 600;
    margin: 0.75rem 0 0.5rem 0;
}

.chat-bubble-assistant h1 {
    font-size: 1.5rem;
}

.chat-bubble-assistant h2 {
    font-size: 1.3125rem;
}

.chat-bubble-assistant h3 {
    font-size: 1.1875rem;
}

.chat-bubble-assistant strong {
    font-weight: 600;
}

.chat-bubble-assistant em {
    font-style: italic;
}

.chat-bubble-assistant ul,
.chat-bubble-assistant ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.chat-bubble-assistant ul {
    list-style-type: disc;
}

.chat-bubble-assistant ol {
    list-style-type: decimal;
}

.chat-bubble-assistant li {
    margin-bottom: 0.25rem;
}

.chat-bubble-assistant code {
    background-color: rgba(31, 71, 77, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
}

.chat-bubble-assistant pre {
    background-color: #f3f4f6;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.chat-bubble-assistant pre code {
    background: none;
    padding: 0;
}

.chat-bubble-assistant blockquote {
    border-left: 3px solid var(--camida-primary);
    padding-left: 1rem;
    margin: 0.5rem 0;
    color: #6b7280;
}

.chat-bubble-assistant a {
    color: var(--camida-primary);
    text-decoration: underline;
}

.chat-bubble-assistant hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.75rem 0;
}

.chat-bubble-assistant table {
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    width: 100%;
}

.chat-bubble-assistant th,
.chat-bubble-assistant td {
    border: 1px solid #e5e7eb;
    padding: 0.375rem 0.75rem;
    text-align: left;
}

/* Deliberately does NOT set background-color. `.markdown-content th` (further up this
   file) styles a table header as white text on `--camida-primary`, and a chat answer's
   tables are rendered inside `.markdown-content` — but both selectors are one class plus
   one element, so they have EQUAL specificity and this later block wins. Setting a
   near-white background here therefore kept the dark rule's `color: white` and painted
   the headers white-on-white: SUPPLIER / COUNTRY / ROLE / EVIDENCE / SITE rendered
   invisible while the body rows read normally. The tell was that the header typography
   was still the markdown rule's (uppercase, letter-spaced, 0.6875rem), i.e. only the
   background had been overridden.

   If a header background is ever wanted here, set `color` in the same block — the two
   properties have to travel together. */
.chat-bubble-assistant th {
    font-weight: 600;
}

/* Markdown content wrapper - reset first/last child margins */
.chat-bubble-assistant .markdown-content>*:first-child {
    margin-top: 0;
}

.chat-bubble-assistant .markdown-content>*:last-child {
    margin-bottom: 0;
}

/* Paragraph spacing in markdown */
.chat-bubble-assistant .markdown-content p {
    margin: 0.5rem 0;
}

.chat-bubble-assistant .markdown-content p:first-child {
    margin-top: 0;
}

.chat-bubble-assistant .markdown-content p:last-child {
    margin-bottom: 0;
}
/* ============================================
   Product autocomplete (new-enquiry form)
   ============================================ */

/* Anchor the dropdown beneath the product input — relative positioning on the
   parent .relative wrapper holds it. The host div itself is empty until HTMX
   populates it. */
.product-search-anchor {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    margin-top: 0.4rem;
}

.product-search-dropdown {
    background: #ffffff;
    border: 1px solid rgba(31, 71, 77, 0.15);
    border-radius: 0.6rem;
    box-shadow:
        0 12px 28px -8px rgba(31, 71, 77, 0.22),
        0 2px 6px rgba(31, 71, 77, 0.06);
    overflow: hidden;
    /* Subtle slide-in so the dropdown doesn't snap into view on every keystroke.
       Kept short so it doesn't feel sluggish during fast typing. */
    animation: product-search-in 0.12s ease-out;
}

@keyframes product-search-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.product-search-list {
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    max-height: 18rem;
    overflow-y: auto;
}

.product-search-list li + li {
    border-top: 1px solid rgba(31, 71, 77, 0.06);
}

.product-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: 0;
    border-radius: 0.4rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.product-search-item:hover,
.product-search-item:focus-visible {
    background-color: rgba(31, 71, 77, 0.06);
    outline: none;
}

.product-search-name {
    flex: 1 1 auto;
    color: #1f2937;
    font-size: 0.92rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-search-meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
}

.product-search-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(31, 71, 77, 0.08);
    color: var(--camida-primary);
    font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.01em;
}

.product-search-tag--muted {
    background-color: rgba(107, 114, 128, 0.1);
    color: #374151; /* gray-700: clears WCAG AA contrast on the muted background */
}

.product-search-existing-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background-color: #d1fae5;
    color: #065f46;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-search-footer {
    padding: 0.45rem 0.75rem;
    background-color: #f9fafb;
    border-top: 1px solid rgba(31, 71, 77, 0.08);
    color: #6b7280;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.product-search-dropdown--empty {
    border-color: rgba(217, 119, 6, 0.25);
    background-color: #fffbeb;
}

.product-search-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    color: #78350f;
    font-size: 0.8rem;
}

.product-search-empty i {
    margin-top: 0.15rem;
    color: #b45309;
}

.product-search-empty strong {
    color: #78350f;
    display: block;
    margin-bottom: 0.15rem;
}

/* Inline confirmation that the input is linked to an existing Product. */
.product-selected-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.2rem 0.55rem;
    background-color: #d1fae5;
    color: #065f46;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.product-selected-hint-clear {
    margin-left: 0.2rem;
    padding: 0 0.3rem;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(6, 95, 70, 0.25);
    color: #065f46;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.product-selected-hint-clear:hover {
    color: #047857;
}

/* ==========================================================================
   Collapsible left navigation
   ==========================================================================
   The nav width lives here rather than as a Tailwind utility on the element
   because there are now two widths, and `lg:ml-72` on <main> would have to be
   fought with !important to shrink it. One place, two states.

   The collapsed state is driven by a `nav-collapsed` class on <html>, set before
   first paint in base.html — every page here is a full reload, so restoring the
   choice from Alpine's deferred init would flash the wide nav on each navigation.

   Both widths are scoped to the desktop breakpoint: below it the aside is
   `hidden` and the bottom bar takes over, so collapsing has nothing to act on. */

.app-nav {
    width: 18rem;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* <main> is a flex item (`flex-1`), and a flex item's default `min-width: auto`
   refuses to shrink it below the min-content width of what it holds. The enquiry
   table's nine columns are wider than that, so instead of the table scrolling
   inside its own `.overflow-x-auto` wrapper, <main> grew and the WHOLE PAGE gained
   a horizontal scrollbar — measured at 214px of document overflow on a 1920px
   window, with the wrapper reporting scrollWidth == clientWidth, i.e. never
   scrolling at all. It reads as the layout breaking on resize because it worsens
   as the window narrows: the shortfall is (table min-content − available width).

   `min-width: 0` is the whole fix: <main> shrinks, the wrapper takes the overflow
   and scrolls in place. Verified live — document overflow 214px → 0, wrapper
   1324 client / 1538 scroll.

   Belongs here rather than as `min-w-0` on the element for the same reason the nav
   widths do: it is a property of this layout slot, not a per-page choice, and every
   page in the app shares this <main>. */
.app-main {
    min-width: 0;
}

@media (min-width: 1024px) {
    .app-main {
        margin-left: 18rem;
    }
}

html.nav-collapsed .app-nav {
    width: 4.5rem;
}

@media (min-width: 1024px) {
    html.nav-collapsed .app-main {
        margin-left: 4.5rem;
    }

    /* Keeps the chat composer centred over the content area in both states. */
    html.nav-collapsed .chat-input-area {
        left: 4.5rem;
    }
}

/* Centre the glyphs once the labels are gone, and drop the hover indent that
   assumed there was text to push.

   The padding is 0.25rem rather than the 0.75rem this first used, because the
   collapsed rail has far less room than it looks: 4.5rem, less the inner nav's
   `p-4` (1rem a side), less this padding, less the 3px `border-left` every
   .nav-link carries for its active indicator. At 0.75rem that left a **13px**
   content box. The Font Awesome links survived it — `w-5` is a fixed width, so a
   glyph simply overflows and still draws — which is why the rail looked correct.
   0.25rem gives 29px, enough for a real icon slot. */
html.nav-collapsed .app-nav .nav-link,
html.nav-collapsed .app-nav .nav-collapse-btn {
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    gap: 0;
}

html.nav-collapsed .app-nav .nav-link:hover {
    padding-left: 0.25rem;
}

/* The Search link carries the Camida mark as an <img> where every other link uses a
   Font Awesome glyph, and that difference is the whole bug — but not for the reason
   it first appears. It is not flex shrinking: a replaced element's automatic minimum
   size stops that, and an unstyled <img> here simply overflows at its natural ratio.

   It is **Tailwind's preflight**, `img, video { max-width: 100%; height: auto }`,
   meeting the `h-7` on the element. Preflight caps the width at the container while
   `h-7` pins the height at 1.75rem, so in the narrow rail the width alone is clamped
   and the mark is squashed horizontally. Measured in a browser against this
   stylesheet: without the rule below the logo renders 37.2x35.0 — ratio 1.063
   against a natural 1.534, i.e. **31% narrower than it should be**. With it, 1.535.

   `height: auto` is therefore the part that actually fixes it: it gives the width
   clamp something proportional to do. `width: 1.5rem` and `flex: none` set a
   deliberate footprint in the 29px slot above (201x131 natural, so 24px wide draws
   15.6px tall) a touch larger than the 1.25rem glyphs, which suits a brand mark, and
   `object-fit: contain` keeps the ratio even if that slot is later narrowed. */
html.nav-collapsed .app-nav .nav-link img {
    flex: none;
    width: 1.5rem;
    height: auto;
    object-fit: contain;
}

/* Visually hidden rather than display:none. The label IS the accessible name of
   these links — removing it from the tree would leave a screen reader with eleven
   unnamed icons. A `title` on each anchor covers the sighted hover case. */
html.nav-collapsed .app-nav .nav-link > span,
html.nav-collapsed .app-nav .nav-collapse-btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-collapse-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.011em;
    background: none;
    border: 0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-collapse-btn:hover {
    background-color: var(--camida-secondary);
    color: var(--camida-primary);
}

.nav-collapse-btn:focus-visible {
    outline: 2px solid var(--camida-accent);
    outline-offset: 2px;
}

/* ---- CamSpec detail: fixed action bar ------------------------------------ */
/* The sheet actions (Issue, Create Rev, PDF proofs…) sit in a bar pinned to the
   bottom of the viewport rather than in a card at the top: the detail page is a long
   authoring scroll, and the actions apply to the whole sheet, not to whatever card
   happens to be on screen. Offsets mirror .chat-input-area, which solves the same
   sidebar / assistant-panel / mobile-nav geometry. */
.camspec-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(31, 71, 77, 0.06);
    transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
}

/* Horizontal scroll rather than wrapping: on a draft this holds up to seven
   buttons, and a bar that grows to three rows eats the page it is pinned over. */
.camspec-action-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.camspec-action-bar-inner>* {
    flex: 0 0 auto;
}

/* Collapse to icons when the bar runs out of room.

   A CONTAINER query, not a media query, because the space available here is not the
   viewport: the bar is inset by the 18rem sidebar, so a viewport breakpoint would be
   wrong by 18rem on every desktop screen and the labels would still overflow — which is
   how the overflow was reported. Measured live: at a 1900px window the bar is 68.4rem
   and shows labels; at 909px it is 45.5rem and collapses to icons.

   Thresholds are measured, not guessed. On a draft (the widest case — seven actions):
     everything labelled, with a full three-item blocker chip ...... 93.8rem
     everything labelled, no blocker chip ........................... 63.6rem
     icons only, blocker text kept .................................. 53.2rem
     icons only, no text at all ..................................... 25.6rem

   Hence three stages. The blocker text is the last thing to go: it is the one item in
   the bar you have to *read*, and losing it would leave a disabled-looking Issue button
   with no explanation.

   Every control carries an aria-label and a title, so the icon-only state keeps its
   accessible name (display:none removes the span from the accessibility tree) and still
   explains itself on hover. Where container queries are unsupported the labels stay and
   the bar scrolls — the previous behaviour, so this degrades rather than breaks. */
.camspec-action-bar {
    container-type: inline-size;
    container-name: camspec-actions;
}

/* Stage 1 — a blocker chip is present. It alone is ~30rem of text, so the buttons have
   to give up their labels far earlier than they would on their own. :has() rather than a
   server-rendered modifier class because the chip and the bar are rendered together. */
@container camspec-actions (max-width: 94rem) {
    .camspec-action-bar-inner:has(.blocker-chip) .btn-label:not(.blocker-label) {
        display: none;
    }
}

/* Stage 2 — the labelled buttons no longer fit on their own. */
@container camspec-actions (max-width: 66rem) {
    .camspec-action-bar .btn-label {
        display: none;
    }
}

/* Stage 3 — not even the blocker text fits. It stays in the chip's title attribute. */
@container camspec-actions (max-width: 54rem) {
    .camspec-action-bar .blocker-label {
        display: none;
    }
}

/* Square the buttons up whenever their label is gone — the horizontal padding was
   sized for text beside the icon. */
@container camspec-actions (max-width: 94rem) {
    .camspec-action-bar-inner:has(.blocker-chip) .btn-modern,
    .camspec-action-bar-inner:has(.blocker-chip) .btn-premium {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@container camspec-actions (max-width: 66rem) {
    .camspec-action-bar .btn-modern,
    .camspec-action-bar .btn-premium {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .camspec-action-bar {
        left: 18rem; /* matches aside w-72 */
    }

    /* The nav collapses to 4.5rem, so the 18rem offset above would leave a 13.5rem
       gutter under a bar that is pinned over the page. Added when the two branches
       met: the action bar and the collapsible nav were written independently, and
       every other fixed element offset to the sidebar needs this counterpart —
       .chat-input-area has one. */
    html.nav-collapsed .camspec-action-bar {
        left: 4.5rem;
    }
}

/* NOTE: there is deliberately no `body.assistant-open` offset here, unlike
   .chat-input-area. The equivalent rule was written and measured in the browser and had
   no effect on the bar's width — the selector matched (verified with a probe custom
   property) but the `right` offset never applied, while an inline px value on the same
   element did. Rather than ship a rule that looks like it does something, the bar spans
   the full content width and sits above the panel (z-index 45 vs 30). Worth revisiting
   together with .chat-input-area, which uses the same pattern and may share the issue. */

/* Clear the mobile bottom nav, which is itself fixed at 3.75rem. */
@media (max-width: 767px) {
    .camspec-action-bar {
        bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Reserve the bar's height so the last card isn't parked underneath it. */
.camspec-has-action-bar {
    padding-bottom: 5.5rem;
}

/* ── Checkboxes whose state must be VISIBLE (/profile SC-75, /settings CAD-313)
   DaisyUI's CDN build and the Tailwind Play CDN between them leave every
   checkbox in the app at `appearance: none` with nothing drawn for `:checked`,
   so a ticked box is pixel-identical to an unticked one. Restore the native
   control for the ones whose whole job is reporting a stored state back — a
   toggle that cannot show it reads as a save that did not happen. Still opt-in
   rather than a blanket `input[type="checkbox"]`: the row-selection boxes carry
   their own styling and a global rule would repaint them too. */
input[type="checkbox"].dept-check,
input[type="checkbox"].check-visible {
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--camida-primary);
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* ============================================
   25. Assistant answer readability
   ============================================
   The assistant's answer was set in DM Serif Display — a DISPLAY face doing
   body-copy duty. Measured on /chat/ at a desktop width: 22.5px over 1060px of
   prose, i.e. 95 characters a line. Two separate problems compounding, and both
   were reported by reviewers as "everything looks bold and too large".

   camida.css already diagnosed this. Section 22's `@media (max-width: 767px)`
   block carries the comment "a wall of large-serif text — the main 'cognitive
   load' fix" — but it only ever applied to phones, and it kept the serif.

   So: sans for the body, serif kept for headings (the app's voice lives there),
   and a cap on the measure, which is the half a font change cannot fix. Tables
   and code are deliberately left uncapped — they need the full column.

   Placed at the end of the file ON PURPOSE. The rules in section 24 are plain
   `.chat-bubble-assistant h1`-style selectors, so they beat anything of equal
   specificity earlier in the file regardless of media query — which is exactly
   why section 22's mobile heading sizes never took effect. Later source order is
   the only thing that wins here.

   Scoped to .chat-bubble-assistant, which is the chat page. The enquiry panel
   uses .markdown-content and is unaffected. */

.chat-bubble-assistant {
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.7;
    letter-spacing: -0.011em;
    /* The bubble is a flex item, so without this it shrink-wraps to its widest
       child — which, once the prose below is capped, is the cap itself. The table
       then inherits that width from `width: 100%` and a six-column supplier
       worklist gets 680px when the column offers 1060. Filling the row keeps the
       cap on the text where it belongs and leaves tables the full width. */
    width: 100%;
}

/* Headings stay in the display face — that is where a display face belongs, and
   it keeps the answer sounding like the rest of the app. Weight 400, not 600:
   DM Serif Display ships a single weight, so asking for 600 only gets the
   browser's synthesised bold, which is what made headings look smeared. */
.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3,
.chat-bubble-assistant h4 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 1.25rem 0 0.5rem;
}

.chat-bubble-assistant h1 { font-size: 1.375rem; }
.chat-bubble-assistant h2 { font-size: 1.1875rem; }
.chat-bubble-assistant h3 { font-size: 1.0625rem; }
.chat-bubble-assistant h4 { font-size: 1rem; }

.chat-bubble-assistant > *:first-child { margin-top: 0; }

/* The measure cap. Applied to the text-bearing elements rather than the bubble,
   so a supplier table or a code block still gets the full column while prose
   stays inside a readable line length. */
.chat-bubble-assistant p,
.chat-bubble-assistant ul,
.chat-bubble-assistant ol,
.chat-bubble-assistant blockquote,
.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3,
.chat-bubble-assistant h4 {
    max-width: 34rem;
}

/* A phone is narrower than the cap, so only the size needs restating — and it
   has to be restated here, after section 24, or it loses the cascade the way
   section 22's heading sizes did. */
@media (max-width: 767px) {
    .chat-bubble-assistant {
        font-size: 0.9375rem;
        line-height: 1.65;
    }

    .chat-bubble-assistant h1 { font-size: 1.1875rem; }
    .chat-bubble-assistant h2 { font-size: 1.0625rem; }
    .chat-bubble-assistant h3 { font-size: 1rem; }
}

/* The large-text preference stepped up from a 1.125rem serif; re-based on the
   new sans body so it is a step up rather than a jump. */
html.a11y-large-text .chat-bubble-assistant {
    font-size: 1rem;
}