/* ============================================================================
   ACRE design tokens — the single styling source for the new GUI (T0.4).
   Scoped to .acre-app so nothing leaks into the old GUI. Light is the default;
   dark overrides apply via .acre-app[data-acre-theme="dark"] (T0.2 decision).
   Components reference these variables only — never raw hex/px/ms values.
   Source of truth: docs/CLAUDE_CODE_PROMPT.md §Brand + docs/manus-mockup index.css.
============================================================================ */

/* Fonts load via <link> in AcreLayout's HeadContent — an @import here would block
   the whole token sheet on the font fetch and flash unstyled content. */

.acre-app {
  color-scheme: light;

  /* ---- Brand (theme-invariant) ---- */
  --acre-green-deep:    #1B5E20;
  --acre-green-primary: #2E7D32;
  --acre-green-mid:     #388E3C;
  --acre-green-light:   #4CAF50;
  --acre-green-pale:    #E8F5E9;
  --acre-amber:         #F59E0B;
  --acre-amber-pale:    #FEF3C7;
  --acre-white:         #FFFFFF;

  /* ---- Semantic (light) ---- */
  --primary:              oklch(0.35 0.13 145);
  --primary-foreground:   oklch(0.98 0 0);
  --background:           oklch(1 0 0);
  --foreground:           oklch(0.13 0.005 0);
  --card:                 oklch(1 0 0);
  --card-foreground:      oklch(0.13 0.005 0);
  --popover:              oklch(1 0 0);
  --popover-foreground:   oklch(0.13 0.005 0);
  --secondary:            oklch(0.96 0.01 145);
  --secondary-foreground: oklch(0.35 0.13 145);
  --muted:                oklch(0.97 0.004 145);
  --muted-foreground:     oklch(0.52 0.01 145);
  --accent:               oklch(0.94 0.015 145);
  --accent-foreground:    oklch(0.25 0.1 145);
  /* Card-surface link text (L-7): defaults to the brand green; dark theme
     overrides with a raised lightness because #2E7D32 on the dark --card
     only measures ~3.87:1 there. */
  --link-fg:              var(--acre-green-primary);
  --destructive:          oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border:               oklch(0.91 0.008 145);
  --input:                oklch(0.93 0.006 145);
  --ring:                 oklch(0.45 0.13 145);
  --sidebar:              oklch(0.22 0.08 145);
  --sidebar-foreground:   oklch(0.96 0.005 145);
  --sidebar-primary:      oklch(0.55 0.15 145);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent:       oklch(0.28 0.08 145);
  --sidebar-accent-foreground: oklch(0.96 0.005 145);
  --sidebar-border:       oklch(0.30 0.07 145);
  --sidebar-ring:         oklch(0.55 0.15 145);
  --chart-1: oklch(0.55 0.15 145);
  --chart-2: oklch(0.65 0.12 145);
  --chart-3: oklch(0.72 0.18 75);
  --chart-4: oklch(0.78 0.14 75);
  --chart-5: oklch(0.85 0.1 75);

  /* ---- Status (paired with labels/icons — never color-only, UXR) ----
     Each status is a bg + fg PAIR (B1 contract); the bare --status-x value is
     the accent/dot color. Hex values quote the mockup's statusColors map. */
  --status-confirmed:        var(--acre-green-light);
  --status-confirmed-bg:     var(--acre-green-pale);
  --status-confirmed-fg:     var(--acre-green-primary);
  --status-pending:          var(--acre-amber);
  --status-pending-bg:       var(--acre-amber-pale);
  --status-pending-fg:       #D97706;
  --status-checkedin:        oklch(0.55 0.15 250);
  --status-checkedin-bg:     #E3F2FD;
  --status-checkedin-fg:     #1565C0;
  --status-maintenance:      oklch(0.55 0.01 145);
  --status-maintenance-bg:   oklch(0.94 0.004 145);
  --status-maintenance-fg:   oklch(0.45 0.01 145);
  --status-checkedout-bg:    #F5F5F5;
  --status-checkedout-fg:    #757575;
  --status-cancelled-bg:     #FFEBEE;
  --status-cancelled-fg:     #C62828;
  /* No-Show has no mockup swatch — deep-orange pair, distinct from Pending's
     amber; always label-paired so the distinction never rides on color alone. */
  --status-noshow-bg:        #FFF3E0;
  --status-noshow-fg:        #E65100;

  /* ---- Guest tags (mockup GuestProfilesPage tagColors, verbatim) ---- */
  --tag-vip-bg:              #FEF3C7;
  --tag-vip-fg:              #D97706;
  --tag-repeat-bg:           #E8F5E9;
  --tag-repeat-fg:           #2E7D32;
  --tag-petfriendly-bg:      #E3F2FD;
  --tag-petfriendly-fg:      #1565C0;
  --tag-local-bg:            #F3E5F5;
  --tag-local-fg:            #6A1B9A;
  --tag-family-bg:           #E8F5E9;
  --tag-family-fg:           #2E7D32;
  --tag-newguest-bg:         #F5F5F5;
  --tag-newguest-fg:         #616161;
  --tag-delinquent-bg:       #FFEBEE;
  --tag-delinquent-fg:       #C62828;

  /* ---- B3 status families (TB3.1) — per-family aliases of the base pairs
     above, so each surface stays tunable without touching component CSS.
     Aliases resolve through the referenced vars, so dark flips automatically. */
  --shift-open-bg:               var(--status-checkedin-bg);
  --shift-open-fg:               var(--status-checkedin-fg);
  --shift-pendingreview-bg:      var(--status-pending-bg);
  --shift-pendingreview-fg:      var(--status-pending-fg);
  --shift-approved-bg:           var(--status-confirmed-bg);
  --shift-approved-fg:           var(--status-confirmed-fg);

  --variance-balanced-bg:        var(--status-confirmed-bg);
  --variance-balanced-fg:        var(--status-confirmed-fg);
  --variance-over-bg:            var(--status-pending-bg);
  --variance-over-fg:            var(--status-pending-fg);
  --variance-short-bg:           var(--status-cancelled-bg);
  --variance-short-fg:           var(--status-cancelled-fg);

  --folio-open-bg:               var(--status-checkedin-bg);
  --folio-open-fg:               var(--status-checkedin-fg);
  --folio-closed-bg:             var(--status-checkedout-bg);
  --folio-closed-fg:             var(--status-checkedout-fg);
  --folio-delinquent-bg:         var(--tag-delinquent-bg);
  --folio-delinquent-fg:         var(--tag-delinquent-fg);
  --folio-shortterm-bg:          var(--tag-repeat-bg);
  --folio-shortterm-fg:          var(--tag-repeat-fg);
  --folio-longterm-bg:           var(--tag-petfriendly-bg);
  --folio-longterm-fg:           var(--tag-petfriendly-fg);
  --folio-residential-bg:        var(--tag-local-bg);
  --folio-residential-fg:        var(--tag-local-fg);
  --folio-b2b-bg:                var(--tag-vip-bg);
  --folio-b2b-fg:                var(--tag-vip-fg);

  --stage-softflag-bg:           var(--status-maintenance-bg);
  --stage-softflag-fg:           var(--status-maintenance-fg);
  --stage-hardflag-bg:           var(--status-pending-bg);
  --stage-hardflag-fg:           var(--status-pending-fg);
  --stage-staffescalation-bg:    var(--status-noshow-bg);
  --stage-staffescalation-fg:    var(--status-noshow-fg);
  --stage-formalnotice-bg:       var(--status-cancelled-bg);
  --stage-formalnotice-fg:       var(--status-cancelled-fg);
  --stage-collectionsreferral-bg: var(--tag-local-bg);
  --stage-collectionsreferral-fg: var(--tag-local-fg);
  --stage-writeoff-bg:           var(--status-checkedout-bg);
  --stage-writeoff-fg:           var(--status-checkedout-fg);

  --case-open-bg:                var(--status-checkedin-bg);
  --case-open-fg:                var(--status-checkedin-fg);
  --case-resolved-bg:            var(--status-confirmed-bg);
  --case-resolved-fg:            var(--status-confirmed-fg);
  --case-writtenoff-bg:          var(--status-checkedout-bg);
  --case-writtenoff-fg:          var(--status-checkedout-fg);
  --case-cancelled-bg:           var(--status-cancelled-bg);
  --case-cancelled-fg:           var(--status-cancelled-fg);
  --case-pendingwriteoff-bg:     var(--status-pending-bg);
  --case-pendingwriteoff-fg:     var(--status-pending-fg);

  --failure-pending-bg:          var(--status-pending-bg);
  --failure-pending-fg:          var(--status-pending-fg);
  --failure-manualreview-bg:     var(--status-cancelled-bg);
  --failure-manualreview-fg:     var(--status-cancelled-fg);
  --failure-resolved-bg:         var(--status-confirmed-bg);
  --failure-resolved-fg:         var(--status-confirmed-fg);
  --failure-ignored-bg:          var(--status-checkedout-bg);
  --failure-ignored-fg:          var(--status-checkedout-fg);

  /* ---- KPI icon chips (mockup DashboardPage stat cards, verbatim) ---- */
  --kpi-green-bg:            #E8F5E9;
  --kpi-green-fg:            #2E7D32;
  --kpi-greensoft-bg:        #F0FDF4;
  --kpi-greensoft-fg:        #388E3C;
  --kpi-greenbright-bg:      #DCFCE7;
  --kpi-greenbright-fg:      #1B5E20;
  --kpi-amber-bg:            #FEF3C7;
  --kpi-amber-fg:            #D97706;

  /* ---- Occupancy gradient (mockup DashboardPage progress fill) ---- */
  --gradient-occupancy: linear-gradient(90deg, var(--acre-green-primary), var(--acre-green-light));

  /* ---- Typography ---- */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --text-body:    0.9375rem;
  --text-sm:      0.8125rem;
  --text-lg:      1.125rem;
  --text-h3:      1.25rem;
  --text-h2:      1.5rem;
  --text-display: 2rem;
  --text-quickbook: 1.125rem;   /* ≥18px body on Quick Book surfaces (UXR-5) */
  --text-kiosk-h: 3rem;         /* 48px kiosk question headings (UXR-5) */
  --text-kiosk-value: 2.5rem;   /* oversized kiosk numbers (nights, change) */

  /* ---- Radii ---- */
  --radius-card:    16px;      /* rounded-2xl cards */
  --radius-field:   12px;      /* rounded-xl inputs (mockup forms) */
  --radius-control: 8px;
  --radius-badge:   999px;

  /* ---- Elevation ---- */
  --shadow-card:       0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, .10);
  --border-card-hover: #A5D6A7;

  /* ---- Spacing ---- */
  --space-card: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Motion (never ease-in) ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* modal spring approximation */
  --duration-press: 160ms;
  --duration-entrance: 400ms;
  --stagger-entrance: 60ms;
  --duration-modal: 300ms;
  --duration-page: 200ms;
  --duration-typing: 800ms;
  --scale-press: 0.97;

  /* ---- Control sizing ---- */
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --control-h-xl: 64px;        /* Quick Book minimum button height (UXR-5) */
  --control-h-field: 44px;     /* form inputs (mockup h-11) = tap-target floor */
  --tap-target-min: 44px;      /* UXR-10 */

  /* ---- Icons (static Lucide subset, A30) ---- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-empty: 40px;          /* empty-state glyph */
  --icon-chip: 28px;           /* green-pale icon chip (mockup contact rows) */
  --icon-chip-lg: 40px;        /* KPI stat-card icon chip — deliberately decoupled
                                   from --control-h-md so it does not inherit the
                                   tap-target floor bump (decorative, not a target) */

  /* ---- Focus ring (mockup: 2px green @ 20% + green border) ---- */
  --ring-soft: oklch(0.45 0.13 145 / 20%);

  /* ---- Avatars (mockup: 48px circle list, 64px rounded-square detail) ---- */
  --avatar-sm: 32px;
  --avatar-md: 48px;
  --avatar-lg: 64px;

  /* ---- Stepper dots (mockup QuickBook: 10px; Xl = kiosk tier, UXR-5) ---- */
  --stepper-dot-md: 10px;
  --stepper-dot-xl: 16px;

  /* ---- Progress bar ---- */
  --progress-h: 12px;

  /* ---- Controls (B2 — hub tabs + toggle switch; theme-invariant sizing) ---- */
  --tab-underline: 2px;
  --toggle-w: 40px;
  --toggle-h: 22px;
  --toggle-thumb: 16px;

  /* ---- Overlays (A28: all render inside .acre-app — never document portals)
     Stack: topbar 20 · bottom tabs 30 · nav 35/40 · popover 45/50 ·
     AI panel 55/60 · overlay 70/75 · toast 90. ---- */
  --z-popover-backdrop: 45;
  --z-popover: 50;
  --z-overlay-backdrop: 70;
  --z-overlay: 75;
  --z-toast: 90;
  --drawer-width: 480px;
  --dialog-width: 520px;
  --toast-width: 360px;
  --cal-left-w: 200px;         /* calendar sticky site-name column */
  --cal-left-w-sm: 110px;      /* below-tablet compact column (RSP-2) */
  --backdrop: rgba(0, 0, 0, 0.35);
}

.acre-app[data-acre-theme="dark"] {
  color-scheme: dark;

  --primary:              oklch(0.55 0.15 145);
  /* Raised to pure white (L-7): .acre-askai's white-on-primary text measured
     4.30:1 against dark --primary — below the 4.5:1 AA floor at 13px. This
     token is only ever a foreground over --primary/--card-toned surfaces
     here, so brightening it is a uniform win, unlike --primary itself which
     is also used as a background (brightening that would wash out its own
     white-text pairings instead of helping them). */
  --primary-foreground:   oklch(1 0 0);
  --background:           oklch(0.10 0.01 145);
  --foreground:           oklch(0.95 0.005 145);
  --card:                 oklch(0.14 0.015 145);
  --card-foreground:      oklch(0.95 0.005 145);
  --popover:              oklch(0.14 0.015 145);
  --popover-foreground:   oklch(0.95 0.005 145);
  --secondary:            oklch(0.20 0.02 145);
  --secondary-foreground: oklch(0.85 0.01 145);
  --muted:                oklch(0.22 0.015 145);
  --muted-foreground:     oklch(0.65 0.01 145);
  --accent:               oklch(0.22 0.02 145);
  --accent-foreground:    oklch(0.90 0.01 145);
  /* L-7: same hue/chroma as --acre-green-primary (#2E7D32, oklch ~0.523),
     lightness raised to 0.58 so link text clears 4.5:1 against dark --card
     (was 3.87:1, now ~4.89:1). Scoped here, not on --acre-green-primary
     itself, because that token also backs 7 genuine button/badge
     background+text pairings with --primary-foreground — raising it there
     would push those *below* AA instead (verified: 4.83:1 -> ~3.83:1 at this
     same lightness). Its other background consumers are decorative
     (non-text) uses, where the 3:1 threshold applies and 3.82:1 clears it. */
  --link-fg:              oklch(0.58 0.135 144);
  --destructive:          oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border:               oklch(1 0 0 / 10%);
  --input:                oklch(1 0 0 / 15%);
  --ring:                 oklch(0.55 0.15 145);
  --sidebar:              oklch(0.14 0.015 145);
  --sidebar-foreground:   oklch(0.95 0.005 145);
  --sidebar-accent:       oklch(0.20 0.02 145);
  --sidebar-accent-foreground: oklch(0.95 0.005 145);
  --sidebar-border:       oklch(1 0 0 / 8%);

  --status-checkedin-bg:   oklch(0.25 0.05 250);
  --status-checkedin-fg:   oklch(0.72 0.12 250);
  --status-maintenance-bg: oklch(0.22 0.01 145);
  --status-maintenance-fg: oklch(0.70 0.01 145);
  --status-confirmed-bg:   oklch(0.22 0.05 145);
  --status-confirmed-fg:   var(--acre-green-light);
  --status-pending-bg:     oklch(0.25 0.06 75);
  --status-pending-fg:     oklch(0.80 0.13 75);
  --status-checkedout-bg:  oklch(0.22 0.005 0);
  --status-checkedout-fg:  oklch(0.72 0.005 0);
  --status-cancelled-bg:   oklch(0.24 0.06 25);
  --status-cancelled-fg:   oklch(0.72 0.15 25);
  --status-noshow-bg:      oklch(0.25 0.06 55);
  --status-noshow-fg:      oklch(0.76 0.13 55);

  --tag-vip-bg:            oklch(0.25 0.06 75);
  --tag-vip-fg:            oklch(0.80 0.13 75);
  --tag-repeat-bg:         oklch(0.22 0.05 145);
  --tag-repeat-fg:         var(--acre-green-light);
  --tag-petfriendly-bg:    oklch(0.25 0.05 250);
  --tag-petfriendly-fg:    oklch(0.72 0.12 250);
  --tag-local-bg:          oklch(0.24 0.06 310);
  --tag-local-fg:          oklch(0.76 0.12 310);
  --tag-family-bg:         oklch(0.22 0.05 145);
  --tag-family-fg:         var(--acre-green-light);
  --tag-newguest-bg:       oklch(0.22 0.005 0);
  --tag-newguest-fg:       oklch(0.70 0.005 0);
  --tag-delinquent-bg:     oklch(0.24 0.06 25);
  --tag-delinquent-fg:     oklch(0.72 0.15 25);

  --kpi-green-bg:          oklch(0.22 0.05 145);
  --kpi-green-fg:          var(--acre-green-light);
  --kpi-greensoft-bg:      oklch(0.20 0.03 145);
  --kpi-greensoft-fg:      oklch(0.72 0.12 145);
  --kpi-greenbright-bg:    oklch(0.25 0.06 145);
  --kpi-greenbright-fg:    oklch(0.80 0.13 145);
  --kpi-amber-bg:          oklch(0.25 0.06 75);
  --kpi-amber-fg:          oklch(0.80 0.13 75);

  --ring-soft: oklch(0.55 0.15 145 / 25%);

  --shadow-card:       0 1px 3px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, .50);
  --border-card-hover: oklch(0.35 0.08 145);
}

/* UXR-10 — --control-h-md (40px) sits under the --tap-target-min floor
   (44px) the same sheet declares. A tap-target floor is a device-capability
   rule, not a layout reflow, so it does not reuse a layout breakpoint;
   599px is the user's chosen phone-only cutoff (vs. the 767px tablet+phone
   alternative offered), and covers both widths the layout report measured
   as failing (430 and 500). Desktop keeps the mockup's 40px button
   proportions. */
@media (max-width: 599px) {
  .acre-app {
    --control-h-md: var(--tap-target-min);
  }
}

/* Base surface — everything inside the new GUI inherits from here. */
.acre-app {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-body);
  min-height: 100vh;
}

.acre-app h1, .acre-app h2, .acre-app h3, .acre-app h4 {
  font-family: var(--font-heading);
  margin: 0;
}
.acre-app h1 { font-size: var(--text-display); font-weight: 700; }
.acre-app h2 { font-size: var(--text-h2); font-weight: 600; }
.acre-app h3 { font-size: var(--text-h3); font-weight: 600; }
.acre-app code, .acre-app .acre-mono { font-family: var(--font-mono); }

/* FocusOnNavigate (Routes.razor, Selector="h1") programmatically focuses the page
   heading on every navigation for screen-reader announcement. The heading carries
   tabindex="-1" and is not keyboard-reachable, so the default UA focus outline is
   pure visual noise on every screen. Scoped to .acre-app to keep the old GUI untouched. */
.acre-app h1:focus, .acre-app h1:focus-visible { outline: none; }

/* ---- Charts (B4 — tokenized SVG primitives, A-B4-1) ---- */
.acre-chart { display: flex; flex-direction: column; gap: var(--space-3); }
.acre-chart__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--text-sm); color: var(--muted-foreground);
}
.acre-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.acre-chart__legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.acre-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.acre-chart__grid { stroke: var(--border); stroke-width: 1; }
.acre-chart__axis, .acre-chart__xlabel { fill: var(--muted-foreground); font-size: 12px; font-family: var(--font-body); }
.acre-chart__bar { transition: opacity var(--duration-press) var(--ease-out); }
.acre-chart__bar:hover { opacity: 0.82; }
.acre-chart__empty {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-4); color: var(--muted-foreground);
  font-size: var(--text-sm); text-align: center;
}

.acre-donut { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.acre-donut__svg { flex-shrink: 0; }
.acre-donut__seg { transition: opacity var(--duration-press) var(--ease-out); }
.acre-donut__seg:hover { opacity: 0.82; }
.acre-donut__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 160px; }
.acre-donut__legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.acre-donut__legend-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.acre-donut__legend-label { flex: 1; color: var(--muted-foreground); }
.acre-donut__legend-value { font-weight: 600; color: var(--foreground); }

/* ---- Chat message bubbles (B4 AI panel — AcreChatMessage; global so the
   panel's chat sub-component styles regardless of scoped-CSS boundaries) ---- */
.acre-chat-msg { display: flex; gap: var(--space-2); max-width: 90%; }
.acre-chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.acre-chat-msg--assistant { align-self: flex-start; }
.acre-chat-msg__avatar {
  flex-shrink: 0; width: 28px; height: 28px;
  border-radius: var(--radius-control);
  background: var(--status-confirmed-bg); color: var(--acre-green-primary);
  display: flex; align-items: center; justify-content: center; font-size: var(--text-sm);
}
.acre-chat-msg__bubble {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-card);
  font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.acre-chat-msg--user .acre-chat-msg__bubble { background: var(--primary); color: var(--primary-foreground); }
.acre-chat-msg--assistant .acre-chat-msg__bubble {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
}

/* ---- Rendered markdown inside a chat surface (assistant answers, tool confirmation
   messages). Global for the same reason the bubbles are: these elements come out of a
   MarkupString, so no scoped-CSS attribute is ever stamped on them and a component's own
   .razor.css could not reach them without ::deep — and two components need them.

   The feature set mirrors what the assistant is permitted to write (headings, bold/italic,
   lists, inline and fenced code, blockquotes) plus citation links. Tables are absent on
   purpose: the system prompt forbids them and the shared renderer leaves the extension off.
   Sizes stay small — the panel is 420px wide. ---- */
/* min-width: 0 is load-bearing. The bubble is a flex item, so its default min-width:auto is the
   min-content width of its widest child — a long line inside a <pre>. Without this the pre is never
   constrained, its own overflow-x can never engage, and the whole 420px panel body scrolls
   sideways instead of the code block. */
.acre-chat-msg__bubble.acre-chat-md { white-space: normal; min-width: 0; }
.acre-chat-md > :first-child { margin-top: 0; }
/* The renderer permits ![alt](https://…), which would otherwise render at natural size. */
.acre-chat-md img { max-width: 100%; height: auto; display: block; }
.acre-chat-md > :last-child { margin-bottom: 0; }
.acre-chat-md p { margin: 0 0 var(--space-2) 0; }
.acre-chat-md ul, .acre-chat-md ol { margin: var(--space-1) 0 var(--space-2) 0; padding-left: 1.4rem; }
.acre-chat-md li + li { margin-top: 0.15rem; }
.acre-chat-md h1, .acre-chat-md h2, .acre-chat-md h3, .acre-chat-md h4 {
  margin: var(--space-2) 0 var(--space-1) 0;
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600;
}
.acre-chat-md blockquote {
  margin: var(--space-1) 0; padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--border); color: var(--muted-foreground);
}
.acre-chat-md code {
  padding: 0.1rem 0.3rem; border-radius: calc(var(--radius-control) / 2);
  background: var(--secondary); font-family: var(--font-mono); font-size: 0.8em;
}
.acre-chat-md pre {
  margin: var(--space-1) 0; padding: var(--space-2);
  border-radius: var(--radius-control); background: var(--secondary); overflow-x: auto;
}
.acre-chat-md pre code { padding: 0; background: none; }
.acre-chat-md hr { margin: var(--space-2) 0; border: none; border-top: 1px solid var(--border); }
/* Citations are the whole point of linking, so they have to read as links. A long unbroken
   URL would otherwise push the panel wider than its container. */
.acre-chat-md a { color: var(--primary); text-decoration: underline; overflow-wrap: anywhere; }
.acre-chat-md a:hover { color: var(--acre-green-primary); }
.acre-chat-md a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }