/* ============================================================================
   round33-design.css — Comprehensive design system upgrade.
   Award-standard color discipline, 3-card system, sidebar zones,
   mobile bottom tab, micro-animations, Inter + Plus Jakarta Sans typography.
   Loaded LAST — additive only. Remove this one <link> to revert.
   ============================================================================ */

/* ── Inter font faces (already self-hosted in /fonts/) ──────────────────────── */
@font-face { font-family:'Inter'; src:url('/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ── CANONICAL 6-COLOR SYSTEM ────────────────────────────────────────────────
   This is the law. Six colors. Zero exceptions.
   If it's a background it's --ds-bg.
   If Louie is speaking it's --ds-gold.
   If money is bleeding it's --ds-danger.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --ds-bg:       #080C18;          /* deeper drama — main background */
  --ds-surface:  #111827;          /* cards, panels */
  --ds-surface2: #161D2E;          /* ambient cards, inset areas */
  --ds-border:   #1F2937;          /* card borders */
  --ds-border2:  #2A3347;          /* emphasis borders */

  /* Canonical action colors */
  --ds-gold:     #F59E0B;          /* Louie's voice ONLY — AI text, Louie-authored UI */
  --ds-action:   #2563EB;          /* every primary CTA button */
  --ds-danger:   #DC2626;          /* financial loss + critical urgency ONLY */
  --ds-success:  #16A34A;          /* positive numbers, funded, healthy */
  --ds-warn:     #D97706;          /* warnings, aging, watch */

  /* Text */
  --ds-text:     #F0F2F5;
  --ds-text2:    #9CA3AF;          /* muted labels */
  --ds-text3:    #8899AB;          /* micro-labels — brightened for WCAG AA on dark bg (2026-07-22) */

  /* Fonts */
  --ds-font-ui:      'Plus Jakarta Sans', sans-serif;
  --ds-font-display: 'Plus Jakarta Sans', 'Plus Jakarta Sans', sans-serif;
  --ds-font-mono:    'DM Mono', monospace;
  --ds-font-kpi:     'Barlow Condensed', 'Plus Jakarta Sans', sans-serif;

  /* Type scale — exactly 6 sizes */
  --ds-t-micro:  11px;   /* micro-labels: category tags, timestamps */
  --ds-t-body:   13px;   /* body text */
  --ds-t-sub:    15px;   /* subheadings */
  --ds-t-head:   20px;   /* section headings */
  --ds-t-kpi:    32px;   /* KPI numbers */
  --ds-t-hero:   56px;   /* hero numbers (exposure, deal amounts) */

  /* Spacing */
  --ds-r:        12px;   /* card border radius */
  --ds-r-sm:     8px;
  --ds-r-lg:     16px;
  --ds-p:        24px;   /* card padding */
  --ds-p-sm:     16px;
}

/* ── FONT SWITCH: Inter for UI, Plus Jakarta for display ──────────────────── */
body {
  font-family: var(--ds-font-ui) !important;
  background: var(--ds-bg) !important;
}

/* Louie's voice / hero display uses Plus Jakarta */
.ll-priority-title,
.ll-priority-card,
.louie-coach-msg,
.war-greet,
.lm-louie,
[class*="louie-voice"],
[class*="ai-text"] {
  font-family: var(--ds-font-display) !important;
}

/* KPI numbers keep Barlow Condensed — it's built for this */
.hk-val, .hkpi-val, .kpi-giant, .wall-kpi,
[class*="kpi-val"], [class*="-giant"] {
  font-family: var(--ds-font-kpi) !important;
}

/* ── MAIN BACKGROUND DEPTH ────────────────────────────────────────────────── */
html { background: var(--ds-bg) !important; }
.layout, .chat-area, .messages, #home-dash-wrap { background: var(--ds-bg) !important; }

/* ── 3-CARD SYSTEM ────────────────────────────────────────────────────────────
   Data Card    → metric container, always full-info
   Action Card  → has left border tinted by severity + bottom CTA
   Ambient Card → contextual, recedes visually
   ──────────────────────────────────────────────────────────────────────────── */

/* Data Card */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r);
  padding: var(--ds-p);
}
.ds-card-kpi {
  font-family: var(--ds-font-kpi);
  font-size: var(--ds-t-kpi);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
  line-height: 1;
  letter-spacing: -0.5px;
}
.ds-card-label {
  font-size: var(--ds-t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text3);
  margin-bottom: 4px;
}
.ds-card-trend {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.ds-card-trend.up   { color: var(--ds-success); }
.ds-card-trend.down { color: var(--ds-danger); }
.ds-card-trend.flat { color: var(--ds-text3); }

/* Action Card — left border signals severity */
.ds-action-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-gold);
  border-radius: var(--ds-r);
  padding: var(--ds-p-sm) var(--ds-p);
  position: relative;
}
.ds-action-card.danger  { border-left-color: var(--ds-danger); }
.ds-action-card.warn    { border-left-color: var(--ds-warn); }
.ds-action-card.success { border-left-color: var(--ds-success); }
.ds-action-card.action  { border-left-color: var(--ds-action); }
.ds-action-card .ds-cta {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--ds-action);
  color: #f8f6f0;
  border: none;
  padding: 6px 14px;
  border-radius: var(--ds-r-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.ds-action-card .ds-cta:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.ds-action-card .ds-cta.gold { background: var(--ds-gold); color: #0D0F14; }
.ds-action-card .ds-cta.gold:hover { background: #D97706; box-shadow: 0 4px 12px rgba(245,158,11,.35); }
.ds-action-card .ds-cta.danger { background: var(--ds-danger); }
.ds-action-card .ds-cta.danger:hover { background: #B91C1C; box-shadow: 0 4px 12px rgba(220,38,38,.35); }

/* Ambient Card — recedes, context only */
.ds-ambient-card {
  background: var(--ds-surface2);
  border-radius: var(--ds-r-sm);
  padding: var(--ds-p-sm);
}

/* Upgrade existing home-kpi and home-card to use ds tokens */
.home-kpi {
  background: var(--ds-surface) !important;
  border-color: var(--ds-border) !important;
  border-radius: var(--ds-r) !important;
}
.home-card, .war-card, .ll-card, [class*="-card"]:not(.ds-action-card) {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r) !important;
}
.modal {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-r-lg) !important;
}

/* ── PRIMARY BUTTON SYSTEM ────────────────────────────────────────────────────
   Every primary CTA is action blue. Full stop.
   ──────────────────────────────────────────────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ds-action);
  /* --ds-action is aliased to brand gold elsewhere (ll-v538-css "kill wrong-blue
     aliases"), so this button always renders gold, not blue — text must be dark
     to stay WCAG AA (was #f8f6f0 cream-on-gold, 2.1:1). Also fixes .success
     (green bg) which inherits this and needs dark text too. (2026-07-22) */
  color: #0d0f14;
  border: none;
  padding: 9px 18px;
  border-radius: var(--ds-r-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: background .15s, transform .12s, box-shadow .18s;
}
.ds-btn:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,99,235,.4);
}
.ds-btn:active { transform: translateY(0); }
.ds-btn.secondary {
  background: var(--ds-surface2);
  color: var(--ds-text);
  border: 1px solid var(--ds-border2);
}
.ds-btn.secondary:hover { background: var(--ds-surface); border-color: var(--ds-action); color: var(--ds-action); box-shadow: none; }
.ds-btn.danger { background: #C62828; color: #f8f6f0; }
.ds-btn.danger:hover { background: #B91C1C; box-shadow: 0 4px 14px rgba(220,38,38,.4); }
.ds-btn.success { background: var(--ds-success); }
.ds-btn.gold { background: var(--ds-gold); color: #0D0F14; }
.ds-btn.gold:hover { background: #D97706; box-shadow: 0 4px 14px rgba(245,158,11,.4); }

/* ── SVG STATUS DOTS — replace emoji in data contexts ────────────────────────
   Use .ds-dot in any data table or metric card instead of 🔴🟡🟢
   ──────────────────────────────────────────────────────────────────────────── */
.ds-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
  position: relative;
  top: -0.5px;
}
.ds-dot.success { background: var(--ds-success); }
.ds-dot.danger  { background: var(--ds-danger); }
.ds-dot.warn    { background: var(--ds-warn); }
.ds-dot.info    { background: var(--ds-action); }
.ds-dot.muted   { background: var(--ds-text3); }
.ds-dot.live    { background: var(--ds-success); box-shadow: 0 0 0 0 rgba(22,163,74,.7); animation: dsLivePulse 2s infinite; }
@keyframes dsLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } }

/* ── TYPOGRAPHY DISCIPLINE ────────────────────────────────────────────────── */
.ds-micro  { font-size: var(--ds-t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text3); }
.ds-body   { font-size: var(--ds-t-body);  color: var(--ds-text);  line-height: 1.55; }
.ds-sub    { font-size: var(--ds-t-sub);   font-weight: 600; color: var(--ds-text); }
.ds-head   { font-size: var(--ds-t-head);  font-weight: 700; color: var(--ds-text); letter-spacing: -0.3px; }
.ds-kpi    { font-size: var(--ds-t-kpi);   font-family: var(--ds-font-kpi); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ds-hero   { font-size: var(--ds-t-hero);  font-family: var(--ds-font-kpi); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -1px; }

/* The DAILY EXPOSURE label — let the number own the moment */
.ds-label-below-hero {
  font-size: var(--ds-t-micro);
  letter-spacing: 0.1em;
  color: var(--ds-text3);
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  margin-top: 6px;
}

/* ── SIDEBAR — 4 CLEAR ZONES ──────────────────────────────────────────────────
   Zone 1: Brand (48px)
   Zone 2: Role Pill (auto)
   Zone 3: Primary Nav (fills remaining)
   Zone 4: Quick Actions — pinned bottom (80px)
   ──────────────────────────────────────────────────────────────────────────── */
.sidebar {
  background: #080C18 !important;
  border-right: 1px solid var(--ds-border) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Zone 1 — Brand */
.sidebar .sidebar-header {
  height: 56px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--ds-border) !important;
  flex-shrink: 0 !important;
}

/* Zone 2 — Role pill: keep it readable and compact */
#role-badge {
  border-radius: 8px !important;
  margin: 8px 8px 4px !important;
}

/* Zone 3 — Primary nav: spacious, 7 items max */
.convo-list {
  flex: 1 !important;
  overflow-y: auto !important;
}

/* Navigation items — clear tap targets, always icon + label */
.inv-trigger, .zone-trigger {
  padding: 9px 14px !important;
  border-radius: 8px !important;
  margin: 1px 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
}
/* Role-based nav filtering (setRoleView in index.html) hides tools that don't apply
   to the active role by setting inline display:none — but the !important above was
   unconditionally winning over that inline style, so EVERY role saw EVERY nav item
   regardless (e.g. Service Advisor saw the Finance zone's "Reports"/"Commissions").
   Two classes beat one, so this wins even though both declarations are !important. */
.inv-trigger.ll-hide-by-role, .zone-trigger.ll-hide-by-role {
  display: none !important;
}
.inv-trigger.active, .inv-trigger.nav-active,
.zone-trigger.active, .zone-trigger.nav-active {
  background: rgba(245,158,11,.08) !important;
  color: var(--ds-gold) !important;
  border-left: 3px solid var(--ds-gold) !important;
  padding-left: 11px !important;
}

/* Sidebar group headers: cleaner separation */
.sidebar-group-header, .nav-group-header {
  padding: 14px 14px 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ds-text3) !important;
  border-bottom: none !important;
  margin-top: 4px !important;
}

/* Zone 4 — Quick Actions: pinned at bottom, full-width UP! button */
.sidebar-footer {
  border-top: 1px solid var(--ds-border) !important;
  padding: 12px 10px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}

/* The UP! button — always visible, always red, always obvious */
.sidebar-footer .floor-blast-btn,
#floor-blast-btn {
  width: 100% !important;
  background: var(--ds-danger) !important;
  color: #f8f6f0 !important;
  border: none !important;
  border-radius: var(--ds-r-sm) !important;
  padding: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  box-shadow: 0 2px 10px rgba(220,38,38,.35) !important;
}
.sidebar-footer .floor-blast-btn:hover,
#floor-blast-btn:hover {
  background: #B91C1C !important;
  box-shadow: 0 4px 16px rgba(220,38,38,.5) !important;
  transform: translateY(-1px) !important;
}

/* ── DASHBOARD VISUAL HIERARCHY ───────────────────────────────────────────────
   Zone 1: The One Number strip — full width, 80px, rotates on context
   Zone 2: Battle Card — Louie's top 3 priorities
   Zone 3: Live Numbers Grid — 6 identical Data Cards
   Zone 4: Chat — pinned bottom
   ──────────────────────────────────────────────────────────────────────────── */

/* The One Number strip */
.ds-one-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r);
  padding: 12px 20px;
  margin-bottom: 12px;
  min-height: 72px;
}
.ds-one-number .ds-one-val {
  font-family: var(--ds-font-kpi);
  font-size: 40px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--ds-text);
}
.ds-one-number .ds-one-val.danger  { color: var(--ds-danger); }
.ds-one-number .ds-one-val.success { color: var(--ds-success); }
.ds-one-number .ds-one-val.gold    { color: var(--ds-gold); }
.ds-one-number .ds-one-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text3);
  margin-bottom: 3px;
}
.ds-one-number .ds-one-action {
  background: var(--ds-action);
  color: #f8f6f0;
  border: none;
  padding: 8px 16px;
  border-radius: var(--ds-r-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

/* Battle Card — Louie's top 3 */
.ds-battle-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-gold);
  border-radius: var(--ds-r);
  padding: 14px 20px;
  margin-bottom: 12px;
}
.ds-battle-card .ds-battle-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-gold);
  margin-bottom: 10px;
}
.ds-battle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-battle-item:last-child { border-bottom: none; }
.ds-battle-num {
  font-family: var(--ds-font-kpi);
  font-size: 22px;
  font-weight: 900;
  color: var(--ds-text3);
  flex-shrink: 0;
  width: 28px;
}
.ds-battle-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  flex: 1;
}
.ds-battle-cta {
  background: var(--ds-surface2);
  border: 1px solid var(--ds-border2);
  color: var(--ds-text2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.ds-battle-cta:hover { background: var(--ds-action); color: #f8f6f0; border-color: var(--ds-action); }

/* ── MICRO-ANIMATIONS ─────────────────────────────────────────────────────────
   1. Deal fund pulse — row flashes green and fades
   2. KPI count-up — numbers animate in
   3. Louie typing indicator — 3 dots appear before response
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Deal fund pulse */
@keyframes dealFunded {
  0%   { background: rgba(22,163,74,.3);  box-shadow: 0 0 0 2px rgba(22,163,74,.5); }
  100% { background: transparent;         box-shadow: none; }
}
.ds-deal-funded { animation: dealFunded 1.5s ease-out forwards; }

/* 2. KPI count-up entrance */
@keyframes dsKpiIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.ds-kpi-animated { animation: dsKpiIn 0.4s cubic-bezier(.2,.8,.2,1) both; }

/* 3. Louie typing indicator — 3-dot bounce */
.ds-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 12px 12px 12px 3px;
}
.ds-typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-gold);
  animation: dsTypingBounce 1.2s infinite ease-in-out;
}
.ds-typing span:nth-child(2) { animation-delay: 0.15s; }
.ds-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes dsTypingBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%       { transform: translateY(-5px); opacity: 1; }
}

/* Overlay entrance handled by elite-polish.css (overlayFade/overlayRise) and,
   for #war-room-overlay/#inv-dashboard specifically, award-polish.css
   (llViewFadeIn). This file previously duplicated that with its own
   dsOverlayIn animation on the same [id$="-overlay"] selector, which — since
   elite-polish.css's [id$="-overlay"] > div rule is unconditional — meant
   every overlay open fired two independently-timed transform animations at
   once (the container via dsOverlayIn, the inner content via overlayRise).
   Removed 2026-08-05 as part of a motion-quality pass; verified live no
   overlay loses its entrance transition (elite-polish/award-polish still
   cover every [id$="-overlay"] element). */

/* ── MOBILE BOTTOM TAB BAR ────────────────────────────────────────────────────
   At <= 768px: sidebar hides, bottom 5-tab nav appears.
   Tabs: Home | Floor | War Room | Chat | More
   ──────────────────────────────────────────────────────────────────────────── */
#ds-mobile-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9900;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#ds-mobile-tabs .ds-tab-bar {
  display: flex;
  height: 64px;
  padding: 0 4px;
}
#ds-mobile-tabs .ds-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--ds-text3);
  font-size: 10px;
  font-weight: 600;
  position: relative;
  padding: 8px 4px;
  transition: color .15s;
}
#ds-mobile-tabs .ds-tab.active { color: var(--ds-gold); }
#ds-mobile-tabs .ds-tab svg { flex-shrink: 0; }
#ds-mobile-tabs .ds-tab-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--ds-danger);
  color: #f8f6f0;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

@media (max-width: 768px) {
  /* Show bottom tabs */
  #ds-mobile-tabs { display: block; }

  /* Hide desktop sidebar */
  .sidebar { display: none !important; }

  /* Push content above tab bar */
  .chat-area { padding-bottom: 72px !important; }
  .messages  { padding-bottom: 72px !important; }

  /* Chat input stays above tab bar */
  .input-area {
    position: fixed !important;
    bottom: 64px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9800 !important;
  }

  /* Cards stack full-width, single column on mobile */
  .home-kpi, .home-card, .ds-card, .ds-action-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .home-kpi .hk-val, .ds-kpi { font-size: 36px !important; } /* slightly larger for arm's length */

  /* War Room grid: single column on mobile */
  #war-grid, .wr-grid { grid-template-columns: 1fr !important; }

  /* Hot Shopper popup: full-width banner at top instead of floating card */
  .floor-alert-toast {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    border-radius: 0 0 12px 12px !important;
    max-width: none !important;
    margin: 0 !important;
  }
  #floor-alerts {
    top: 0 !important;
    bottom: auto !important;
    right: 0 !important;
    left: 0 !important;
    max-width: none !important;
  }

  /* Overlays: full-screen on mobile */
  [id$="-overlay"] {
    border-radius: 0 !important;
    padding-bottom: 80px !important;
  }

  /* Mic FAB: make it primary on mobile */
  #voice-fab {
    width: 60px !important;
    height: 60px !important;
    bottom: 80px !important;
    right: 16px !important;
    box-shadow: 0 4px 20px rgba(220,38,38,.5) !important;
  }
}

/* ── TOP NAV: BREATHING ROOM ──────────────────────────────────────────────────
   Simplify to 5 elements. Data freshness moves to sidebar badge.
   ──────────────────────────────────────────────────────────────────────────── */
.chat-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 16px !important;
  height: 52px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
}

/* Search takes ~40% of header width */
#global-search {
  flex: 1 !important;
  max-width: 380px !important;
  background: var(--ds-surface2) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text) !important;
  border-radius: var(--ds-r-sm) !important;
  font-size: 13px !important;
}
#global-search:focus {
  border-color: var(--ds-gold) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.15) !important;
}

/* Text area and send button use ds tokens */
.input-wrap textarea {
  background: var(--ds-surface2) !important;
  border: 1px solid var(--ds-border2) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-ui) !important;
  font-size: 13px !important;
  border-radius: var(--ds-r) !important;
}
.input-wrap textarea:focus {
  border-color: var(--ds-gold) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.12) !important;
}
.send-btn {
  background: var(--ds-action) !important;
  border-radius: var(--ds-r-sm) !important;
}
.send-btn:hover {
  background: #1D4ED8 !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.4) !important;
}
.send-btn svg { stroke: #0a0f1e !important; }

/* ── LOUIE GOLD — Pavlovian association ───────────────────────────────────────
   Every time gold appears, it's Louie talking.
   ──────────────────────────────────────────────────────────────────────────── */
.lm-louie { color: var(--ds-gold) !important; }
.sidebar-brand .lm-louie { color: var(--ds-gold) !important; }
.louie-coach-meta { color: var(--ds-gold) !important; opacity: 0.8; }
.louie-coach-msg { border-left: 2px solid var(--ds-gold) !important; }
.ds-louie-voice { color: var(--ds-gold); font-family: var(--ds-font-display); }

/* AI/Louie action buttons override to gold */
button[onclick*="openAboutLouie"],
button[onclick*="openLouieLearner"],
button[onclick*="openLouiesCrew"] {
  border-color: rgba(245,158,11,.35) !important;
  color: var(--ds-gold) !important;
}

/* ── PRIORITY CARD UPDATE — gold left border per ds system ──────────────────── */
.ll-priority-card {
  border-left: 3px solid var(--ds-gold) !important;
  background: var(--ds-surface) !important;
  border-color: var(--ds-border) !important;
}
.ll-priority-label { color: var(--ds-gold) !important; }

/* ── STORE HEALTH + SCORE RING ────────────────────────────────────────────────── */
.sh-score-ring {
  border-color: var(--ds-gold) !important;
}
.sh-page { color: var(--ds-text) !important; }
.sh-factor { background: var(--ds-surface2) !important; border-color: var(--ds-border) !important; }

/* ── CAMPAIGN TEMPLATES ───────────────────────────────────────────────────────── */
.campaign-tpl {
  border-radius: var(--ds-r) !important;
  transition: transform .15s, box-shadow .15s !important;
}
.campaign-tpl:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* ── LEADERBOARD — War Room right column ──────────────────────────────────────── */
.wr-lb-row { border-bottom: 1px solid var(--ds-border) !important; }
.wr-lb-row:last-child { border-bottom: none !important; }

/* ── PRINT — hide UI chrome ─────────────────────────────────────────────────── */
@media print {
  .sidebar, .input-area, #ds-mobile-tabs,
  #floor-alerts, #voice-fab { display: none !important; }
  .chat-area { padding-bottom: 0 !important; }
  * { color: #000 !important; background: #0a0f1e !important; }
}

/* ── WCAG AA contrast fix — --ds-danger used as TEXT color on dark panels ──────
   --ds-danger (#DC2626) stays untouched as a background/border token (badges,
   dots, danger buttons still need the deep red). Only the text-color use sites
   fail 4.5:1 on dark surfaces, so they get a lighter red here instead. (2026-07-22) */
.ds-card-trend.down,
.ds-one-number .ds-one-val.danger { color: #f87171 !important; }
[style*="color:var(--ds-danger)"] { color: #f87171 !important; }