/* =====================================================================
   mmi-one-shell.css
   ---------------------------------------------------------------------
   Mode F shell visuals. Consumes HSL channel tokens from
   mmi-one-tokens.css. Phase 2 scope: top header layout +
   brand / app-switcher / user-menu / bell. Title chip and action slots
   exist as empty placeholders that Phase 3 fills.

   Layout (left → right):
     Brand · Title-slot · [spacer] · Actions-slot · | · Switcher · | · User · Bell

   Naming: BEM-ish, all classes prefixed `mmi-shell__` so they never
   collide with existing ChatMMI CSS. Layout-affecting rules are scoped
   to `body.has-mmi-one-shell`.
   ===================================================================== */

/* The legacy-token compat shim that used to live here moved to
   `mmi-one-tokens.css` so it applies during the first paint instead
   of waiting for this stylesheet to arrive. Without that move, the
   browser briefly painted with stale legacy palette values
   (`--bg-primary` = slate, `--gradient-blue` = saturated Tailwind
   blue) before mmi-one-shell.css landed and re-pointed them at the
   new HSL tokens — visible as a one-frame flash on cold load.
   See the LEGACY TOKEN COMPAT SHIM block at the bottom of
   mmi-one-tokens.css for the actual mappings. */

/* ---------------------------------------------------------------------
   PER-THEME BLANKET BUTTON OVERRIDE
   ---------------------------------------------------------------------
   bonzo-theme.css (and other per-theme files) ship a blanket
   `.bonzo-theme button:not(.opp-card-why-toggle)` rule at (0,2,1) that
   paints every button with `--bg-secondary` + a 1px `--border-primary`
   border. That's intentional for default chrome buttons, but wrong for:
     - Buttons whose Tailwind class explicitly says "primary fill"
       (lead-store-bulk-btn, crm-push-btn, etc. carrying `bg-blue-600`)
     - Icon-only feedback buttons (👍 👎 ↺) that should read as
       transparent affordances, not outlined chips.

   Universal overrides at (0,2,2) — `body[class]` requires any body
   class so themed bodies match, then `button.X` adds another
   class-and-type pair. Beats the blanket (0,2,1) regardless of which
   per-theme file declared it.
   --------------------------------------------------------------------- */
body[class] button.bg-blue-600,
body[class] a.bg-blue-600 {
  background: hsl(var(--primary)) !important;
  background-image: none !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid hsl(var(--primary)) !important;
}
body[class] button.bg-blue-600:hover,
body[class] a.bg-blue-600:hover,
body[class] button.hover\:bg-blue-700:hover,
body[class] a.hover\:bg-blue-700:hover {
  background: hsl(var(--primary) / 0.9) !important;
  border-color: hsl(var(--primary) / 0.9) !important;
}

/* Feedback buttons + other icon-only chrome — transparent, no border.
   The legacy bonzo blanket draws a heavy outlined-chip box around
   them which fights the surrounding analyst-response card frame.
   `regenerate-btn` (↺) sits next to the thumbs and gets the same
   ghost treatment. */
body[class] button.feedback-btn,
body[class] button.regenerate-btn {
  background: transparent !important;
  border: 0 !important;
  color: hsl(var(--muted-foreground)) !important;
}
body[class] button.feedback-btn:hover,
body[class] button.regenerate-btn:hover {
  background: hsl(var(--secondary) / 0.6) !important;
  color: hsl(var(--foreground)) !important;
  border: 0 !important;
}
body[class] button.feedback-btn.feedback-positive.active {
  color: hsl(var(--success)) !important;
}
body[class] button.feedback-btn.feedback-negative.active {
  color: hsl(var(--destructive)) !important;
}

/* ---------------------------------------------------------------------
   LEGACY CHAT CHROME — embedded mode + signed-in chat both still ship
   the original Tailwind-utility input bar (`#sendButton`, `#stopButton`
   with `bg-blue-600` / `bg-red-600`) and a gradient user bubble. With
   the shim above retiring --gradient-blue, the user bubble auto-aligns;
   the two buttons need explicit overrides because their utility classes
   bypass the token system entirely.
   --------------------------------------------------------------------- */
body #sendButton {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
body #sendButton:hover {
  background-color: hsl(var(--primary) / 0.88) !important;
}
body #sendButton:disabled {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
}
/* The stop button is "cancel streaming" — not destructive. Tone it down
   from alarm-red to a quiet secondary chip with destructive text only,
   so it reads as a reversible affordance instead of a "this will delete
   something" action. */
body #stopButton {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--destructive)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
body #stopButton:hover {
  background-color: hsl(var(--accent)) !important;
}

/* ---------------------------------------------------------------------
   LAYOUT — shell at top, gnav at left, content shifted down + right.
   Only applies when the shell is actually mounted; the token shim
   above runs everywhere so unauthed surfaces still pick up the new
   palette without the chrome offsets.
   --------------------------------------------------------------------- */

/* Public (unauthenticated) shell — header only, no gnav. The page
   gets only a top padding offset; no left padding because there's
   no gnav rail to clear. Used on SEO surfaces (anon leaderboard) so
   the page reads as a branded marketing surface rather than the
   chrome-less default. */
body.has-public-shell {
  padding-top: var(--mmi-shell-header-height);
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground));
}
/* Public shell carries `has-mmi-one-shell` too so it inherits the
   shell's surface tokenization. Override the gnav left padding +
   right gutter that `has-mmi-one-shell` adds — there's no rail in
   the public variant. */
body.has-mmi-one-shell.has-public-shell {
  padding-left: 0 !important;
  padding-right: 16px !important;
}
/* Hide the legacy chat chrome on public surfaces — the public shell
   replaces it. `#inputBar` is intentionally NOT hidden here: anon
   leaderboard visitors see the composer (paywalled on submit by
   TierManager) so the surface still reads as "chat with the data,
   but log in first". */
body.has-public-shell .app-header,
body.has-public-shell #sidebar,
body.has-public-shell #emptyState {
  display: none !important;
}
/* Anonymous-leaderboard surfaces swap the cue text for a copyright line
   (rendered inline inside #inputHints by mountPublicShell). Center it
   and drop the slash-command tip styling. */
body.has-public-shell #inputHints {
  justify-content: center;
}
body.has-public-shell #inputHints a {
  color: inherit;
  text-decoration: underline;
}
body.has-public-shell #inputHints a:hover {
  color: hsl(var(--foreground));
}
/* Match the same min-height fix the authed shell needs — the
   `.max-w-6xl` wrapper has `min-h-screen` (100vh) which combined
   with body's 56px padding-top would push the page to 100vh + 56px
   and force a permanent scrollbar. */
body.has-public-shell > .max-w-6xl {
  min-height: calc(100vh - var(--mmi-shell-header-height)) !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.mmi-shell__header--public {
  /* Same fixed-top header as the authed variant — share the same
     dimensions / borders so navigating between authed and anon
     reads as the same site. */
  padding-right: 24px;
}
.mmi-shell__public-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mmi-shell__public-signup,
.mmi-shell__public-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  font: 600 13px/1 'Inter', sans-serif;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
  /* Equal min-width so the Log-in pill (which carries an arrow svg)
     doesn't end up visually larger than the Sign-up pill. Centered
     text via justify-content: center keeps both readable. */
  min-width: 110px;
}
.mmi-shell__public-signup {
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}
.mmi-shell__public-signup:hover {
  background: hsl(var(--secondary));
  border-color: hsl(var(--ring));
}
.mmi-shell__public-login {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary));
}
.mmi-shell__public-login:hover {
  background: hsl(var(--primary) / 0.9);
}

body.has-mmi-one-shell {
  padding-top: var(--mmi-shell-header-height);
  padding-left: var(--mmi-gnav-width);
  /* Right gutter so the artifact sidebar / chat thread / dashboard
     widgets don't sit flush against the viewport edge. The fixed-
     positioned shell + gnav ignore body padding so this only adds
     breathing room to the content surface. */
  padding-right: 32px;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground));

  /* Lift toast notifications above the fixed shell header. The legacy
     --z-toast (50) sat below our --mmi-z-shell (60) so growls were
     rendering under the top nav; bump them above. */
  --z-toast: 100;
}

/* The conversation-history.js sidebar previously added body.sidebar-open
   / .sidebar-collapsed margin-left to make room for itself. The shell's
   gnav replaces that — strip those margins so we don't double-shift. */
body.has-mmi-one-shell.sidebar-open,
body.has-mmi-one-shell.sidebar-collapsed {
  margin-left: 0 !important;
}

/* Hide the legacy #sidebar — its conversation list and pinned-nav
   buttons are replaced by the gnav rail and the history slideover.
   DOM stays in place so existing JS that targets the buttons by ID
   (newChatBtn, pinnedNavItem, leaderboardNavItem) keeps working. */
body.has-mmi-one-shell #sidebar {
  display: none !important;
}

/* Pre-hide legacy chrome before the shell mounts. The inline script in
   index.html adds .shell-pending to <html> on every load where we
   expect the shell (set via a localStorage hint after the first
   successful mount). Without this the user sees the legacy markup
   paint, then a beat later JS swaps it for the shell-aware version —
   a visible component-level flash.

   What gets hidden:
     .app-header, #sidebar  — replaced by the shell header + gnav rail
     #emptyState            — legacy welcome layout; WelcomeScreenRenderer
                              swaps this for the Mode F HomeScreenD
                              version once the shell is mounted, so the
                              static HTML must not paint first */
/* Hidden whether the shell is pending OR mounted — the shell replaces
   these surfaces entirely and they should never paint. */
html.shell-pending body .app-header,
html.shell-pending body #sidebar,
html.shell-pending body #emptyState {
  display: none !important;
}
/* Banner attaches as a sibling of .app-header when shell-pending hides
   the legacy chrome but the shell anchor (.mmi-shell__title-slot) doesn't
   exist yet. Hide it too so the auto-impersonation reload doesn't show
   a stray banner before the shell remounts and re-anchors it. */
html.shell-pending body:not(.has-mmi-one-shell) #impersonationBanner {
  display: none !important;
}
/* Hidden ONLY until the shell mounts (or the auth landing takes over).
   The shell repaints `#messagesContainer` as transparent and `#inputBar`
   as the composer pill once `body.has-mmi-one-shell` lands. The auth
   landing replaces the chat chrome via `body.auth-landing-active`. */
html.shell-pending body:not(.has-mmi-one-shell):not(.auth-landing-active) #inputBar,
html.shell-pending body:not(.has-mmi-one-shell):not(.auth-landing-active) #messagesContainer {
  display: none !important;
}
html.shell-pending body {
  /* Reserve the same shell-mounted layout offsets so content doesn't
     jump when the shell finally renders. */
  padding-top: var(--mmi-shell-header-height);
  padding-left: var(--mmi-gnav-width);
  background: hsl(var(--background)) !important;
}

/* ---------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------- */
.mmi-shell__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mmi-shell-header-height);
  z-index: var(--mmi-z-shell);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--sidebar-border));
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: hsl(var(--foreground));
}

.mmi-shell__spacer { flex: 1; }

/* Subtle vertical divider between right-cluster groups */
.mmi-shell__divider {
  width: 1px;
  height: 24px;
  background: hsl(var(--border));
  margin: 0 6px;
  flex-shrink: 0;
}

/* Empty placeholder slots — Phase 3 populates */
.mmi-shell__title-slot,
.mmi-shell__actions-slot {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mmi-shell__title-slot:empty,
.mmi-shell__actions-slot:empty {
  display: none;
}

/* Reset bleed-through from existing global button styles */
.mmi-shell__header button {
  font-family: inherit;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  margin: 0;
}

/* ---------------------------------------------------------------------
   TOOLTIPS — CSS-only, triggered by data-tooltip on any element.
   Mirrors @getbonzo/ui's pattern:
     <button data-tooltip="Bonzo" data-shell-tooltip-position="bottom"
             style="--tooltip-bg: #EE3696">

   Behavior: 350ms delay on show (so a quick pass over a button doesn't
   flash a tooltip), no delay on hide (feels responsive). Only opacity
   animates — position is static per `data-shell-tooltip-position` so adjacent
   buttons don't fight with conflicting transforms.
   --------------------------------------------------------------------- */
[data-shell-tooltip] {
  position: relative;
}
[data-shell-tooltip]::after {
  content: attr(data-shell-tooltip);
  position: absolute;
  z-index: 200;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--tooltip-bg, hsl(var(--popover)));
  color: var(--tooltip-fg, #fff);
  font: 500 11px/1.2 'Inter', sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease, visibility 0s linear 100ms;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}
[data-shell-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 100ms ease 350ms, visibility 0s linear 350ms;
}
/* Hover-driven tooltips only fire on devices that actually have a
   hover capability. Without this guard, tapping a button on touch
   screens leaves the tooltip stuck in its :hover state until the
   user taps elsewhere. */
@media (hover: hover) {
  [data-shell-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 100ms ease 350ms, visibility 0s linear 350ms;
  }
}

/* Static position per direction. No transform animation — keeps the
   appearance smooth and avoids cascade conflicts with hover transforms. */
[data-shell-tooltip]:not([data-shell-tooltip-position])::after,
[data-shell-tooltip][data-shell-tooltip-position="bottom"]::after {
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
[data-shell-tooltip][data-shell-tooltip-position="top"]::after {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
[data-shell-tooltip][data-shell-tooltip-position="right"]::after {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
[data-shell-tooltip][data-shell-tooltip-position="left"]::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------------
   BRAND
   --------------------------------------------------------------------- */
.mmi-shell__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--mmi-radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}
.mmi-shell__brand:hover {
  background: hsl(var(--sidebar-accent));
}
.mmi-shell__brand-mark {
  width: 22px;
  height: 19px;
  display: block;
  flex-shrink: 0;
}
.mmi-shell__brand-name {
  font: 600 14px/1 'Inter', sans-serif;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

/* Inline-SVG brand mark — picks up currentColor so it follows the
   active theme's foreground without per-theme overrides. Used when
   the app provides `brandIcon` instead of `logo` (e.g. the dashboard
   surface mirrors the gnav's bar-chart glyph). */
.mmi-shell__brand-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  color: hsl(var(--foreground));
}

/* ---------------------------------------------------------------------
   APP SWITCHER — Mode F pill: rounded container with a sliding indicator
   that snaps to the active app's brand color. Mirrors @getbonzo/ui's
   HeaderAppSwitcher exactly: 36×28 buttons, 2px gap, 2px padding inside
   a fully-rounded --secondary pill. The indicator is absolutely
   positioned over whichever button is active.
   --------------------------------------------------------------------- */
.mmi-shell__switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}
/* Sliding active-app indicator — colored pill positioned over the
   active button. Animates between positions when the user switches. */
.mmi-shell__switcher-indicator {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 28px;
  border-radius: 999px;
  transform: translateY(-50%);
  transition: left 200ms cubic-bezier(0.2, 0.7, 0.2, 1), background 120ms ease;
  pointer-events: none;
  z-index: 0;
}
.mmi-shell__switcher-icon {
  width: 36px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: hsl(var(--muted-foreground));
  transition: color 120ms ease;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.mmi-shell__switcher-icon img {
  width: 14px;
  height: 14px;
  display: block;
  /* Inactive default — flatten the SVG to white via filter and dim it
     so it reads muted but legible against the --secondary pill. The
     SVGs ship with their own brand colors which would read low-contrast
     here, so we normalize them all. */
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 120ms ease;
}
.mmi-shell__switcher-icon:hover img {
  opacity: 0.95;
}
.mmi-shell__switcher-icon.is-active {
  cursor: default;
}
.mmi-shell__switcher-icon.is-active img,
.mmi-shell__switcher-icon.is-active:hover img {
  opacity: 1;
}

/* Light themes — inactive icons need to be DARK silhouettes (black at
   reduced opacity), not white. White-on-light is invisible. The active
   icon stays white since the sliding indicator behind it is brand-
   colored, not light. */
body.bonzo-light-theme .mmi-shell__switcher-icon:not(.is-active) img,
body.datacenter-theme .mmi-shell__switcher-icon:not(.is-active) img {
  filter: brightness(0);
}

/* ---------------------------------------------------------------------
   TITLE SLOT — sits between brand and the spacer. Default content is
   the chat title chip; on dashboards index.js relocates the legacy
   #dashboardNavPage element here so its dropdown sits in the chip
   spot. The "before"-style separator (a faint vertical line) only
   shows when the slot has visible content, so the brand stays alone
   when there's no title.
   --------------------------------------------------------------------- */
.mmi-shell__title-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mmi-shell__title-slot:has(> *:not([hidden])):before {
  content: '';
  width: 1px;
  height: 20px;
  background: hsl(var(--border));
  margin: 0 4px;
  flex-shrink: 0;
}

/* "Data as of …" meta — relocated into the title slot, sits to the
   right of the dashboard selector. Quiet text, no chrome. */
.mmi-shell__title-slot .dashboard-sub-nav__meta,
.mmi-shell__title-slot #dashboardMetaText {
  color: hsl(var(--muted-foreground));
  font: 400 12px/1.3 'Inter', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Em-dash separator before the impersonation banner when it sits in
   the title slot — gives a clean visual break between the meta line
   ("Data as of…") and the "Viewing as:" pill. The :has() guard makes
   the dash appear only when both pieces are actually present.
   Falls back to a simple ::before so unsupported browsers still get
   the spacing (just no glyph). */
.mmi-shell__title-slot:has(#dashboardMetaText) #impersonationBanner::before,
.mmi-shell__title-slot .dashboard-nav-page-wrap + #impersonationBanner::before,
.mmi-shell__title-slot .mmi-shell__title-chip + #impersonationBanner::before {
  content: '—';
  color: hsl(var(--muted-foreground) / 0.6);
  margin-right: 4px;
}

/* Re-skin the relocated #dashboardNavPage so its button reads as the
   title chip pattern (ghost surface, hover fill, primary accent on
   the icon). Specificity uses the slot class to scope to only the
   relocated copy — if any other code injects `.dashboard-nav-page-btn`
   elsewhere in the app it stays unchanged. */
.mmi-shell__title-slot .dashboard-nav-page-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.mmi-shell__title-slot .dashboard-nav-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--mmi-radius) !important;
  background: transparent !important;
  border: 0 !important;
  color: hsl(var(--foreground)) !important;
  font: 500 13px/1 'Inter', sans-serif !important;
  max-width: 420px;
  cursor: pointer;
  transition: background 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmi-shell__title-slot .dashboard-nav-page-btn:hover {
  background: hsl(var(--secondary)) !important;
}
.mmi-shell__title-slot .dashboard-nav-page-btn__icon {
  color: hsl(var(--primary));
  flex-shrink: 0;
  display: inline-flex;
}
.mmi-shell__title-slot .dashboard-nav-page-btn__icon .dashboard-icon,
.mmi-shell__title-slot .dashboard-nav-page-btn__icon svg {
  width: 16px !important;
  height: 16px !important;
}
.mmi-shell__title-slot .dashboard-nav-page-btn__chevron {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  opacity: 1;
}

/* Dropdown — repaint with the new tokens so it matches the user-menu
   surface treatment instead of the legacy slate scheme. Padding is
   bumped (vs the legacy 0.625rem 0.75rem) so the title + description
   pairs have breathing room and the item gap doesn't read as cramped
   against the wider 1fr 1fr grid layout. */
.mmi-shell__title-slot .dashboard-nav-page-dropdown {
  background: hsl(var(--popover)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--mmi-radius) !important;
  box-shadow: 0 10px 30px hsl(0 0% 0% / 0.45) !important;
  z-index: var(--mmi-z-dropdown) !important;
  padding: 8px !important;
  gap: 4px !important;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item {
  color: hsl(var(--foreground)) !important;
  border-radius: var(--mmi-radius-sm) !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item:hover {
  background: hsl(var(--secondary)) !important;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item--active {
  background: hsl(var(--primary) / 0.12) !important;
  border-left: 2px solid hsl(var(--primary)) !important;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item--active .dashboard-nav-page-dropdown__item-title {
  color: hsl(var(--primary)) !important;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item-icon {
  margin-top: 2px;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item-icon .dashboard-icon,
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item-icon svg {
  width: 18px !important;
  height: 18px !important;
  color: hsl(var(--muted-foreground));
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item-text {
  gap: 4px !important;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item-title {
  font: 600 13px/1.3 'Inter', sans-serif !important;
}
.mmi-shell__title-slot .dashboard-nav-page-dropdown__item-desc {
  color: hsl(var(--muted-foreground)) !important;
  font: 400 12px/1.4 'Inter', sans-serif !important;
}

/* ---------------------------------------------------------------------
   TITLE CHIP — trophy + text + chevron, hidden when no active topic.
   --------------------------------------------------------------------- */
.mmi-shell__title-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--mmi-radius);
  background: transparent;
  color: hsl(var(--foreground));
  /* line-height of 1.4 so descenders ('g', 'p', 'y') fit inside the
     line box — line-height: 1 was clipping the tails on titles like
     "Finding Mortgage Opportunities". */
  font: 500 13px/1.4 'Inter', sans-serif;
  max-width: 420px;
  transition: background 120ms ease, border-color 120ms ease;
}
.mmi-shell__title-chip:hover {
  background: hsl(var(--secondary));
}
.mmi-shell__title-chip-icon {
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.mmi-shell__title-chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mmi-shell__title-chip-caret {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   ACTIONS — Share chip + overflow menu
   --------------------------------------------------------------------- */
.mmi-shell__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Inline actions slot — the existing #startOverBtn and
   #saveConversationBtn get DOM-relocated here from .app-header so all
   their existing state (visibility, label changes, disabled, feature
   flags) flows through naturally. We only restyle them visually. */
.mmi-shell__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mmi-shell__actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Re-skin the relocated buttons as pill buttons. Crucially, the
   `display: inline-flex` rule is gated on `:not(.hidden)` so the
   existing visibility logic (which adds/removes `.hidden` based on
   whether a conversation is active, whether it's saveable, etc.)
   keeps working. Without this guard, !important would force the
   buttons visible even on the home screen.
   Specificity has to beat the .mmi-shell__header button reset (0,1,1)
   so we use the slot class + ID = (0,2,1), plus !important for the
   per-theme blanket button rules. */
.mmi-shell__actions-inline #startOverBtn:not(.hidden),
.mmi-shell__actions-inline #saveConversationBtn:not(.hidden),
.mmi-shell__actions-inline #openChatBtn:not(.hidden) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
  font: 500 13px/1 'Inter', sans-serif !important;
  cursor: pointer !important;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
  box-shadow: none !important;
  width: auto !important;
}
/* When the existing logic adds `.hidden`, hide the buttons cleanly. */
.mmi-shell__actions-inline #startOverBtn.hidden,
.mmi-shell__actions-inline #saveConversationBtn.hidden,
.mmi-shell__actions-inline #openChatBtn.hidden {
  display: none !important;
}
.mmi-shell__actions-inline #startOverBtn:hover:not(:disabled),
.mmi-shell__actions-inline #saveConversationBtn:hover:not(:disabled),
.mmi-shell__actions-inline #openChatBtn:hover:not(:disabled) {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--ring)) !important;
}
/* "New" is the primary action on the chat surface (start a fresh
   conversation) — give it the filled primary treatment so it reads as
   the dominant call-to-action next to the quieter Save / Share. The
   resting + hover overrides come AFTER the generic Save/Share/New
   block above so they win on tie at equal specificity. */
.mmi-shell__actions-inline #startOverBtn:not(.hidden) {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.mmi-shell__actions-inline #startOverBtn:hover:not(:disabled) {
  background: hsl(var(--primary) / 0.9) !important;
  border-color: hsl(var(--primary) / 0.9) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.mmi-shell__actions-inline #startOverBtn:disabled,
.mmi-shell__actions-inline #saveConversationBtn:disabled,
.mmi-shell__actions-inline #openChatBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.mmi-shell__actions-inline #startOverBtn svg,
.mmi-shell__actions-inline #saveConversationBtn svg,
.mmi-shell__actions-inline #openChatBtn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}
/* The labels in index.html have `class="hidden sm:inline"` (Tailwind
   responsive). Force them visible inside the shell — the breakpoint
   isn't relevant here since the shell controls its own responsive
   collapse via media queries below. */
.mmi-shell__actions-inline #startOverBtn .hidden,
.mmi-shell__actions-inline #saveConversationBtn .hidden,
.mmi-shell__actions-inline #openChatBtn .hidden,
.mmi-shell__actions-inline #startOverBtn span,
.mmi-shell__actions-inline #saveConversationBtn span,
.mmi-shell__actions-inline #openChatBtn span {
  display: inline !important;
  white-space: nowrap;
}

/* Favorites star (dashboard) — square icon-only pill, dropdown is
   absolute-positioned and falls below the slot. */
.mmi-shell__actions-inline #dashboardFavoritesContainer {
  display: inline-flex !important;
  position: relative;
}
.mmi-shell__actions-inline .dashboard-favorites__star {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer !important;
  transition: background 120ms ease, border-color 120ms ease !important;
  box-shadow: none !important;
}
.mmi-shell__actions-inline .dashboard-favorites__star:hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--ring)) !important;
}
.mmi-shell__actions-inline .dashboard-favorites__star[data-has-saved="true"] {
  color: hsl(var(--primary)) !important;
}
.mmi-shell__actions-inline .dashboard-favorites__star svg {
  width: 16px !important;
  height: 16px !important;
}

.mmi-shell__overflow {
  position: relative;
}
.mmi-shell__overflow-trigger {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mmi-radius);
  color: hsl(var(--muted-foreground));
  transition: background 120ms ease, color 120ms ease;
}
.mmi-shell__overflow-trigger:hover,
.mmi-shell__overflow.is-open .mmi-shell__overflow-trigger {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}
.mmi-shell__overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  z-index: var(--mmi-z-dropdown);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--mmi-radius);
  padding: 4px;
  box-shadow:
    0 0 0 1px hsl(var(--border)),
    0 8px 16px -4px rgb(0 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mmi-shell__overflow-menu {
  padding: 6px !important;
  min-width: 240px;
}
.mmi-shell__overflow-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: var(--mmi-radius-sm) !important;
  font: 500 13px/1.3 'Inter', sans-serif !important;
  color: inherit;
  text-align: left;
  width: 100%;
  min-height: 36px;
}
.mmi-shell__overflow-item:hover {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------------------
   BELL SLOT — index.js relocates the existing #notificationCenter into
   here. Visual treatment is shell-native (round 36px circle, no app-
   header-btn classes bleeding through).
   --------------------------------------------------------------------- */
.mmi-shell__bell-slot {
  display: inline-flex;
  align-items: center;
}

/* The relocated #notificationCenter wrapper. Notification-center.js
   toggles `.hidden` on this element to gate visibility — but we want
   the bell to always show its own affordance. Override here so the
   slot is always present visually, and let the badge inside speak
   for unread state. */
.mmi-shell__bell-slot #notificationCenter,
.mmi-shell__bell-slot #notificationCenter.hidden {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Re-skin the relocated bell button to match the shell. The existing
   classes (`app-header-btn app-header-btn--secondary notification-bell`)
   stay on the element; we just override their rendering inside our slot. */
.mmi-shell__bell-slot #notificationBellBtn {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--mmi-radius-full) !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.mmi-shell__bell-slot #notificationBellBtn:hover {
  background: hsl(var(--sidebar-accent)) !important;
  color: hsl(var(--foreground)) !important;
}
.mmi-shell__bell-slot #notificationBellBtn svg {
  width: 16px;
  height: 16px;
}
.mmi-shell__bell-slot #notificationBadge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: var(--mmi-radius-full);
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  font: 600 9px/1 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid hsl(var(--background));
}
/* Honor notification-center.js's `.hidden` toggle so a "0" doesn't
   linger when there's nothing to show. */
.mmi-shell__bell-slot #notificationBadge.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------------
   NOTIFICATION PANEL — re-skin the legacy popover for the new tokens
   and give items proper breathing room. The panel's class names
   (.nc-panel, .nc-item, .nc-header, etc.) come from
   notification-center.js so we override here scoped to the shell.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .nc-panel {
  background: hsl(var(--popover)) !important;
  color: hsl(var(--popover-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--mmi-radius) !important;
  box-shadow:
    0 0 0 1px hsl(var(--border)),
    0 8px 24px -4px rgb(0 0 0 / 0.35) !important;
  padding: 6px !important;
  min-width: 320px;
  max-width: 360px;
}
body.has-mmi-one-shell .nc-header {
  padding: 12px 14px 10px !important;
  font: 600 12px/1 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  margin-bottom: 4px;
}
body.has-mmi-one-shell .nc-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: var(--mmi-radius-sm) !important;
  border: 0 !important;
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer;
}
body.has-mmi-one-shell .nc-item:hover:not([disabled]) {
  background: hsl(var(--secondary)) !important;
}
/* Drop the legacy zebra + separator — uniform background + hover gives
   cleaner rhythm. */
body.has-mmi-one-shell .nc-item:nth-child(even) {
  background: transparent !important;
}
body.has-mmi-one-shell .nc-item + .nc-item {
  border-top: 0 !important;
}
body.has-mmi-one-shell .nc-item-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  flex-shrink: 0;
  margin-top: 2px;
}
body.has-mmi-one-shell .nc-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.has-mmi-one-shell .nc-item-title {
  font: 600 13px/1.35 'Inter', sans-serif !important;
  color: hsl(var(--foreground)) !important;
}
body.has-mmi-one-shell .nc-item-desc {
  font: 400 12px/1.5 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 0 !important;
}
body.has-mmi-one-shell .nc-item-date {
  font: 400 11px/1 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 4px !important;
  opacity: 0.7;
}
body.has-mmi-one-shell .nc-empty {
  padding: 28px 16px !important;
  color: hsl(var(--muted-foreground)) !important;
  font: 400 12px/1.4 'Inter', sans-serif !important;
}

/* ---------------------------------------------------------------------
   USER MENU
   --------------------------------------------------------------------- */
.mmi-shell__user { position: relative; }
.mmi-shell__user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--mmi-radius-full);
  transition: background 120ms ease;
}
.mmi-shell__user-trigger:hover,
.mmi-shell__user.is-open .mmi-shell__user-trigger {
  background: hsl(var(--sidebar-accent));
}
.mmi-shell__user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 'Inter', sans-serif;
  flex-shrink: 0;
}
.mmi-shell__user-who {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
  min-width: 0;
}
.mmi-shell__user-name {
  font: 600 13px/1.2 'Inter', sans-serif;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.mmi-shell__user-email {
  font: 400 11px/1.2 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.mmi-shell__user-chev {
  color: hsl(var(--muted-foreground));
  margin-left: 2px;
  flex-shrink: 0;
}

.mmi-shell__user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  z-index: var(--mmi-z-dropdown);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--mmi-radius);
  padding: 6px;
  box-shadow:
    0 0 0 1px hsl(var(--border)),
    0 8px 16px -4px rgb(0 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Header — bonzo-ui pattern: avatar + name/email/rows side by side */
.mmi-shell__user-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px;
}
.mmi-shell__user-menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 'Inter', sans-serif;
  flex-shrink: 0;
}
.mmi-shell__user-menu-who {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mmi-shell__user-menu-name {
  font: 600 13px/1.3 'Inter', sans-serif;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmi-shell__user-menu-email {
  font: 400 11px/1.3 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmi-shell__user-menu-rows {
  font: 400 11px/1.3 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}
.mmi-shell__user-menu-rows[hidden] { display: none; }
.mmi-shell__user-menu-divider {
  height: 1px;
  background: hsl(var(--border));
  margin: 2px 0;
}
.mmi-shell__user-menu-divider[hidden] { display: none; }

/* Dashboard slot — page-specific code (the dashboard renderer's Edit
   Mode toggle) writes legacy markup into here. Restyle the contents to
   match the rest of the menu so the relocated rows feel native. */
.mmi-shell__user-menu-dashboard-slot:empty { display: none; }
.mmi-shell__user-menu-dashboard-slot .settings-menu__option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: var(--mmi-radius-sm) !important;
  font: 500 13px/1.3 'Inter', sans-serif !important;
  color: inherit !important;
  background: none !important;
  border: none !important;
  text-align: left;
  width: 100%;
  min-height: 36px;
  cursor: pointer;
}
.mmi-shell__user-menu-dashboard-slot .settings-menu__option:hover {
  background: hsl(var(--secondary)) !important;
}
.mmi-shell__user-menu-dashboard-slot .settings-menu__option svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.mmi-shell__user-menu-dashboard-slot .settings-menu__option.active {
  color: hsl(var(--primary)) !important;
}
.mmi-shell__user-menu-dashboard-slot .settings-menu__option.active .settings-menu__option-label {
  color: hsl(var(--primary)) !important;
  font-weight: 600;
}
.mmi-shell__user-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: var(--mmi-radius-sm) !important;
  font: 500 13px/1.3 'Inter', sans-serif !important;
  color: inherit;
  text-align: left;
  width: 100%;
  position: relative;
  min-height: 36px;
}
.mmi-shell__user-menu-item[hidden] {
  display: none !important;
}
.mmi-shell__user-menu-item:hover,
.mmi-shell__user-menu-item.is-submenu-open {
  background: hsl(var(--secondary)) !important;
}
.mmi-shell__user-menu-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmi-shell__user-menu-item-trail {
  font: 400 11px/1 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  text-transform: capitalize;
}
.mmi-shell__user-menu-item-chev {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

/* Submenus — float to the LEFT of the parent menu. The `top` is set
   by user-menu.js to align with whichever trigger row opened the
   submenu (so the submenu doesn't jump to the top of the parent).
   Same popover surface as the parent so the two read as one
   connected popover. */
.mmi-shell__user-submenu {
  position: absolute;
  /* top: set by JS in setSubmenu(); right: 100%+6px places the submenu
     6px to the left of the menu's left edge (submenu is a child of
     .mmi-shell__user-menu so 100% means the menu's full width). */
  right: calc(100% + 6px);
  min-width: 240px;
  z-index: var(--mmi-z-dropdown);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--mmi-radius);
  padding: 8px;
  box-shadow:
    0 0 0 1px hsl(var(--border)),
    0 8px 16px -4px rgb(0 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mmi-shell__user-submenu--wide {
  min-width: 280px;
}
.mmi-shell__user-submenu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: var(--mmi-radius-sm) !important;
  font: 500 13px/1.3 'Inter', sans-serif !important;
  color: hsl(var(--popover-foreground)) !important;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  min-height: 38px;
}
.mmi-shell__user-submenu-item:hover {
  background: hsl(var(--secondary)) !important;
}
.mmi-shell__user-submenu-check {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary));
  flex-shrink: 0;
  visibility: hidden;
}
.mmi-shell__user-submenu-item.is-active .mmi-shell__user-submenu-check {
  visibility: visible;
}
.mmi-shell__user-submenu-label {
  flex: 1;
}
.mmi-shell__user-submenu-extras {
  width: 100%;
}

/* Theme color preview circles — same per-theme palette the prior
   inline picker used, restored so users can identify themes by their
   brand color at a glance. */
.mmi-shell__user-submenu-preview {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid hsl(var(--border));
  box-sizing: border-box;
}
.mmi-shell__user-submenu-preview.is-dark         { background: #334155; }
.mmi-shell__user-submenu-preview.is-light        { background: linear-gradient(90deg, #ffffff 50%, #3b82f6 50%); }
.mmi-shell__user-submenu-preview.is-bonzo-dark   { background: linear-gradient(90deg, #ec4899 50%, #1e293b 50%); }
.mmi-shell__user-submenu-preview.is-bonzo-light  { background: linear-gradient(90deg, #ec4899 50%, #ffffff 50%); }
.mmi-shell__user-submenu-preview.is-hiddenthings { background: #ef4444; }

/* "Rows used" stat in the dropdown header */
.mmi-shell__user-menu-rows {
  font: 400 11px/1.3 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
}
.mmi-shell__user-menu-rows[hidden] { display: none; }

/* Internal extras slot (ImpersonationPicker mounts here) */
.mmi-shell__user-menu-extras {
  padding: 4px 8px;
}
.mmi-shell__user-menu-extras[hidden] { display: none; }

/* Theme picker — embedded inside the dropdown, not interactive as a
   menu item itself (clicks pass through to the inner buttons). */
.mmi-shell__user-menu-theme {
  padding: 8px 10px 6px;
}
.mmi-shell__theme-picker-label {
  font: 600 10px/1 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.mmi-shell__theme-picker-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mmi-shell__theme-btn {
  width: 22px;
  height: 22px;
  padding: 2px;
  border-radius: 50%;
  border: 2px solid hsl(var(--border));
  background: transparent;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mmi-shell__theme-btn:hover {
  border-color: hsl(var(--ring));
}
.mmi-shell__theme-btn.is-active {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--primary));
}
.mmi-shell__theme-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.mmi-shell__theme-preview.is-dark        { background: #334155; }
.mmi-shell__theme-preview.is-light       { background: linear-gradient(90deg, #ffffff 50%, #3b82f6 50%); }
.mmi-shell__theme-preview.is-bonzo-dark  { background: linear-gradient(90deg, #ec4899 50%, #1e293b 50%); }
.mmi-shell__theme-preview.is-bonzo-light { background: linear-gradient(90deg, #ec4899 50%, #ffffff 50%); }
.mmi-shell__theme-preview.is-hiddenthings { background: #ef4444; }

/* ---------------------------------------------------------------------
   HIDE LEGACY APP-HEADER — when the shell is mounted, the old
   .app-header row is structurally redundant. All its actions are
   relocated/proxied into the shell. Keep the DOM in place (existing
   IDs are still queried + clicked by the shell + by external code),
   just hide the visual.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .app-header {
  display: none;
}

/* ---------------------------------------------------------------------
   SIDEBAR TRIGGER — mobile-only hamburger that toggles the gnav drawer.
   Hidden by default (gnav rail is always visible above 640px); the
   matching @media block at the bottom of this file flips display.
   --------------------------------------------------------------------- */
.mmi-shell__sidebar-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--mmi-radius);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background 120ms ease;
}
.mmi-shell__sidebar-trigger:hover {
  background: hsl(var(--sidebar-accent));
}

/* ---------------------------------------------------------------------
   GNAV RAIL — 56px fixed left, full viewport height below shell
   --------------------------------------------------------------------- */
.mmi-shell__gnav {
  position: fixed;
  top: var(--mmi-shell-header-height);
  left: 0;
  bottom: 0;
  width: var(--mmi-gnav-width);
  z-index: var(--mmi-z-shell);
  background: hsl(var(--background));
  border-right: 1px solid hsl(var(--sidebar-border));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.mmi-shell__gnav-spacer { flex: 1; }

.mmi-shell__gnav-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mmi-radius);
  background: transparent;
  border: 1px solid transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mmi-shell__gnav-icon:hover {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--foreground));
}
.mmi-shell__gnav-icon.is-active,
.mmi-shell__gnav-icon.is-active:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.mmi-shell__gnav-icon.is-open {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

/* ---------------------------------------------------------------------
   HISTORY SLIDEOVER — 320px panel right of the gnav rail, sits below
   the shell header. Scrim covers the whole viewport.
   --------------------------------------------------------------------- */
.mmi-shell__hist-scrim {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: var(--mmi-z-scrim);
  animation: mmi-shell-scrim-in 160ms ease-out;
}
@keyframes mmi-shell-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.mmi-shell__hist {
  position: fixed;
  top: var(--mmi-shell-header-height);
  bottom: 0;
  left: var(--mmi-gnav-width);
  width: 320px;
  z-index: var(--mmi-z-slideover);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-right: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  /* Critical: flex children need a min-height of 0 to allow their
     overflow-y:auto descendants to actually scroll inside a flex column.
     Without this the .mmi-shell__hist-scroll grows past the container
     height and the whole thing scrolls the body (or doesn't scroll
     at all, breaking infinite-scroll triggers). */
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 0 40px rgb(0 0 0 / 0.4);
  animation: mmi-shell-hist-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
@keyframes mmi-shell-hist-in {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.mmi-shell__hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
}
.mmi-shell__hist-title {
  font: 600 13px/1 'Inter', sans-serif;
  color: hsl(var(--foreground));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mmi-shell__hist-close {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mmi-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
}
.mmi-shell__hist-close:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

/* Search field — outer rounded container with a subtle border, plus
   an input that's fully stripped (no user-agent box, no theme-file
   border, no Tailwind reset leaking through). The container is the
   only visible chrome; the input renders flush inside it. */
.mmi-shell__hist-search {
  margin: 0 14px 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--mmi-radius);
  color: hsl(var(--muted-foreground));
  transition: border-color 120ms ease;
}
.mmi-shell__hist-search:focus-within {
  border-color: hsl(var(--ring));
}
.mmi-shell__hist-search svg {
  flex-shrink: 0;
}
/* Aggressive input reset — needs specificity that beats the per-theme
   blanket `body.<theme>-theme input[type="text"]` rules (0,2,1 with
   !important) which decorate every input with bg/border/color. The
   body+class+attribute combo here lands at (0,3,2). */
body.has-mmi-one-shell .mmi-shell__hist-search input[type="text"],
body.has-mmi-one-shell .mmi-shell__hist .mmi-shell__hist-search input {
  flex: 1 1 auto;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: hsl(var(--foreground)) !important;
  font: 400 13px/1.2 'Inter', sans-serif !important;
  min-width: 0;
  width: auto;
}
body.has-mmi-one-shell .mmi-shell__hist-search input[type="text"]:focus,
body.has-mmi-one-shell .mmi-shell__hist-search input[type="text"]:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}
body.has-mmi-one-shell .mmi-shell__hist-search input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}

.mmi-shell__hist-new {
  margin: 0 14px 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--mmi-radius);
  color: hsl(var(--muted-foreground));
  font: 500 12px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.mmi-shell__hist-new:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--foreground));
  background: hsl(var(--primary) / 0.08);
}

.mmi-shell__hist-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 14px;
}

.mmi-shell__hist-empty {
  padding: 24px 16px;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font: 400 12px/1.4 'Inter', sans-serif;
}

/* Bottom-of-list "Loading more conversations…" indicator. Lives outside
   the dynamically-rerendered list content so it survives mid-fetch
   render() calls. Hidden via the `hidden` attribute when idle. */
.mmi-shell__hist-loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  color: hsl(var(--muted-foreground));
  font: 400 12px/1.4 'Inter', sans-serif;
}
.mmi-shell__hist-loadmore-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  animation: mmi-shell-hist-spin 0.7s linear infinite;
}
@keyframes mmi-shell-hist-spin {
  to { transform: rotate(360deg); }
}

.mmi-shell__hist-group {
  margin-bottom: 14px;
}
.mmi-shell__hist-group-label {
  padding: 4px 8px;
  font: 600 10px/1 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
/* Row wrapper — relative for the active-state bar + menu positioning.
   The wrapper is now a div containing the load button + menu trigger
   + popup, since nested buttons aren't valid HTML. */
.mmi-shell__hist-item {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: var(--mmi-radius-sm);
  color: hsl(var(--foreground));
  transition: background 100ms;
}
/* iOS Safari treats the first tap on an element with :hover styles as
   "show hover", swallowing the click — user has to tap twice to fire
   the actual handler. Gate to (hover: hover) so the highlight only
   applies to mouse/trackpad pointers. */
@media (hover: hover) {
  .mmi-shell__hist-item:hover {
    background: hsl(var(--secondary));
  }
}
.mmi-shell__hist-item.is-active {
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--foreground));
}
.mmi-shell__hist-item.is-active::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 3px;
  height: 16px;
  background: hsl(var(--primary));
  border-radius: 2px;
}

/* Load button — covers most of the row; clicking it opens the
   conversation. Inherits the row's hover background. */
.mmi-shell__hist-item-load {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: transparent !important;
  border: 0 !important;
  text-align: left;
  cursor: pointer;
  color: inherit !important;
  font: inherit;
  min-width: 0;
}

/* 3-dot menu trigger — visible on hover/focus, otherwise hidden so it
   doesn't compete visually for non-active rows. */
.mmi-shell__hist-item-menu-trigger {
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer;
  border-radius: var(--mmi-radius-sm);
  opacity: 0;
  transition: opacity 100ms ease, background 100ms ease;
  flex-shrink: 0;
}
.mmi-shell__hist-item.is-active .mmi-shell__hist-item-menu-trigger,
.mmi-shell__hist-item-menu-trigger:focus-visible {
  opacity: 1;
}
/* Hover branches gated to (hover: hover) — iOS Safari treats a parent
   :hover that reveals a child (opacity 0 → 1) as the same "show hover"
   first-tap state that double-taps the row click. Keep is-active and
   focus-visible unconditional so keyboard nav + the current-row hint
   still work everywhere. */
@media (hover: hover) {
  .mmi-shell__hist-item:hover .mmi-shell__hist-item-menu-trigger {
    opacity: 1;
  }
  .mmi-shell__hist-item-menu-trigger:hover {
    background: hsl(var(--accent)) !important;
    color: hsl(var(--foreground)) !important;
  }
}

/* Popup — small dropdown anchored to the right side of the row,
   shows Rename / Share / Delete. Same popover surface as the rest of
   the shell. */
.mmi-shell__hist-item-menu {
  position: absolute;
  top: 100%;
  right: 4px;
  z-index: var(--mmi-z-dropdown);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--mmi-radius);
  padding: 4px;
  min-width: 140px;
  box-shadow:
    0 0 0 1px hsl(var(--border)),
    0 8px 16px -4px rgb(0 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mmi-shell__hist-item-menu[hidden] { display: none; }
.mmi-shell__hist-item-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--mmi-radius-sm);
  font: 500 12px/1.2 'Inter', sans-serif !important;
  color: hsl(var(--foreground)) !important;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.mmi-shell__hist-item-menu-item:hover {
  background: hsl(var(--secondary)) !important;
}
.mmi-shell__hist-item-menu-item.is-destructive {
  color: hsl(var(--destructive)) !important;
}
.mmi-shell__hist-item-menu-item.is-destructive:hover {
  background: hsl(var(--destructive) / 0.12) !important;
}
.mmi-shell__hist-item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mmi-shell__hist-item-title {
  font: 400 12px/1.3 'Inter', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmi-shell__hist-item-shared {
  font: 400 10px/1.2 'Inter', sans-serif;
  font-style: italic;
  color: hsl(var(--primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmi-shell__hist-item-time {
  font: 400 10px/1 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  margin-top: 2px;
}

/* =====================================================================
   CHAT SURFACE — Mode F: centered 860px thread, no card chrome around
   the conversation, floating pill composer, distinct user/AI bubbles.
   All rules scoped to `body.has-mmi-one-shell` so embedded mode and
   pre-shell pages are unaffected.
   ===================================================================== */

/* Outer page wrapper — kill the cramped max-w-6xl container so the
   thread can use the full available width up to 860px on its own.
   `min-h-screen` (Tailwind = min-height: 100vh) on this wrapper
   combined with body's 56px shell-header padding-top would force a
   100vh + 56px page and a permanent vertical scrollbar — subtract
   the header height so the wrapper fills the visible area exactly. */
body.has-mmi-one-shell > .max-w-6xl {
  max-width: none;
  padding: 0;
  margin: 0;
  min-height: calc(100vh - var(--mmi-shell-header-height)) !important;
}

/* Messages container — strip the white card. Conversation blends into
   the page like Claude/ChatGPT. Applied to embedded mode too so the
   iframe's messages area and input pill share the same page background
   instead of stepping between --card and --background. */
body.has-mmi-one-shell #messagesContainer,
body.chatmmi-embedded #messagesContainer {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 24px 24px 140px !important;
}

/* Center the messages list at a generous width. ChatMMI threads are
   often dominated by wide artifacts (query result tables, leaderboards,
   profile cards) — 860px squeezes them. 1200px gives tables room to
   breathe while still reading as a contained column on ultrawide
   screens. User message bubbles cap at 600px independently below so
   they don't sprawl. */
body.has-mmi-one-shell #messages,
body.has-mmi-one-shell #emptyState,
body.has-mmi-one-shell #thinking-container {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

/* Empty state — center vertically when there's space */
body.has-mmi-one-shell #emptyState {
  padding: 80px 20px;
  color: hsl(var(--muted-foreground));
}
body.has-mmi-one-shell #emptyState svg {
  color: hsl(var(--primary));
  opacity: 0.7;
}
body.has-mmi-one-shell #emptyState p {
  color: hsl(var(--foreground));
}
body.has-mmi-one-shell #emptyState p:first-of-type {
  font: 600 18px/1.3 'Inter', sans-serif;
}


/* ---------------------------------------------------------------------
   USER MESSAGE — right-aligned pill, primary fill. Capped at 600px so
   short prompts read as bubbles even when the thread is 1200px wide.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .user-message,
body.has-mmi-one-shell .message-bubble.user-message {
  align-self: flex-end !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border-bottom-right-radius: 4px !important;
  font: 500 14px/1.45 'Inter', sans-serif !important;
  max-width: min(75%, 600px) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   SUGGESTION BUTTONS — interactive list items (suggested questions,
   follow-ups). Need stronger contrast than message cards since they're
   buttons, not surfaces. Bumped to --secondary (20%) instead of --card
   (13%) and given a more prominent border + accent hover.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .suggestion-btn {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}
body.has-mmi-one-shell .suggestion-btn:hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--ring)) !important;
  color: hsl(var(--foreground)) !important;
}

/* "Suggested questions" label that sits above the list */
body.has-mmi-one-shell .suggested-label,
body.has-mmi-one-shell [class*="suggested"]:not(.suggestion-btn):not(:has(.suggestion-btn)) {
  color: hsl(var(--muted-foreground)) !important;
}

/* ---------------------------------------------------------------------
   ANALYST RESPONSE — bordered card, --card surface
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .analyst-response {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}
body.has-mmi-one-shell .analyst-response:hover {
  border-color: hsl(var(--border)) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   COMPOSER PILL — Claude/ChatGPT pattern. Floats at the bottom with a
   gradient fade above so content scrolls under cleanly.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell #inputBar,
body.chatmmi-embedded #inputBar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 16px 24px 18px !important;
  position: sticky;
  bottom: 0;
  z-index: var(--mmi-z-shell);
  /* Gradient fade — content scrolls under, fades into the page bg */
  background: linear-gradient(to top,
    hsl(var(--background)) 0%,
    hsl(var(--background)) 70%,
    hsl(var(--background) / 0) 100%) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* The inner row with input + mic + send + stop becomes the pill */
body.has-mmi-one-shell #inputBar > .flex:first-child,
body.chatmmi-embedded #inputBar > .flex:first-child {
  width: 100%;
  max-width: 860px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  align-items: center;
  gap: 8px;
}
body.has-mmi-one-shell #inputBar > .flex:first-child:focus-within,
body.chatmmi-embedded #inputBar > .flex:first-child:focus-within {
  border-color: hsl(var(--ring));
}

/* Input — borderless, transparent, fits inside the pill. Right
   padding (40px) reserves room for the absolutely-positioned mic
   button so the placeholder + typed text don't run under it. The
   legacy markup carried Tailwind's `pr-10` which my old override
   killed; this restores the same intent in token form. */
body.has-mmi-one-shell #messageInput,
body.chatmmi-embedded #messageInput {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: hsl(var(--foreground)) !important;
  font: 400 14px/1.4 'Inter', sans-serif !important;
  padding: 8px 40px 8px 0 !important;
}
body.has-mmi-one-shell #messageInput::placeholder,
body.chatmmi-embedded #messageInput::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}
/* iOS Safari zooms the viewport whenever a focused input's
   font-size is below 16px. Bump to 16px on touch-sized screens
   so tapping these inputs doesn't shift the layout. */
@media (max-width: 768px) {
  body.has-mmi-one-shell #messageInput,
  body.chatmmi-embedded #messageInput,
  body.has-mmi-one-shell .mmi-shell__hist-search input[type="text"],
  body.has-mmi-one-shell .mmi-shell__hist .mmi-shell__hist-search input {
    font-size: 16px !important;
  }
}

/* Mic button — sits inside the input wrapper, transparent ghost */
body.has-mmi-one-shell #micButton,
body.chatmmi-embedded #micButton {
  color: hsl(var(--muted-foreground)) !important;
  background: transparent !important;
  border: 0 !important;
}
body.has-mmi-one-shell #micButton:hover,
body.chatmmi-embedded #micButton:hover {
  color: hsl(var(--foreground)) !important;
}

/* Send button — round 32px, primary fill */
body.has-mmi-one-shell #sendButton,
body.chatmmi-embedded #sendButton {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  /* `display` is intentionally left non-important so the existing JS
     that toggles `style.display` between send/stop while streaming
     keeps working. Inline styles win over non-important CSS, so when
     the message engine sets style="display:none" the button hides. */
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 0 !important;
  flex-shrink: 0;
  transition: background 120ms ease;
}
body.has-mmi-one-shell #sendButton:hover:not(:disabled),
body.chatmmi-embedded #sendButton:hover:not(:disabled) {
  background: hsl(var(--primary) / 0.9) !important;
}
body.has-mmi-one-shell #sendButton:disabled,
body.chatmmi-embedded #sendButton:disabled {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: not-allowed;
}

/* Stop button — round, replaces send while streaming. "Stop generating"
   is a reversible cancel, not a destructive action — so it reads as a
   quiet secondary chip with a destructive-tinted icon, not an alarm-red
   fill. Same display rule as send: non-important so the inline
   `style="display: none"` (initial) and JS toggles control visibility. */
body.has-mmi-one-shell #stopButton,
body.chatmmi-embedded #stopButton {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--destructive)) !important;
  border: 1px solid hsl(var(--border)) !important;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease;
}
body.has-mmi-one-shell #stopButton:hover,
body.chatmmi-embedded #stopButton:hover {
  background: hsl(var(--accent)) !important;
}

/* Input hints — quiet meta below the pill. Drop the legacy
   `.input-hints { opacity: 0.6 }` so the kbd slash-command highlights
   inside actually pop in `--link`; without this, the parent opacity
   multiplies any child color by 0.6 and links read dim regardless of
   which token they pull from. The base text already uses
   --muted-foreground, which is muted enough on its own. */
body.has-mmi-one-shell #inputHints {
  font: 400 11px/1.3 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
  margin: 0 !important;
  max-width: 860px;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   DASHBOARD SUB-NAV — section tabs + meta + Viewing-as chip. Repaints
   the legacy slate sub-nav with the new tokens and switches the
   pill-style section nav to an underline-tab pattern that matches the
   new design system.

   The sub-nav lives below the shell header (inside `.dashboard-page`)
   and is sticky to the viewport top.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .dashboard-sub-nav {
  background: hsl(var(--background)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 24px !important;
  /* Sit just under the fixed shell header so it sticks below the
     56px chrome rather than at viewport top (which would read as
     overlapping the brand). */
  top: var(--mmi-shell-header-height) !important;
  z-index: calc(var(--mmi-z-shell) - 1) !important;
  align-items: stretch !important;
  min-height: 44px;
}

/* Section tabs — pill pattern. Active tab gets a soft primary-tinted
   pill with primary-color text; inactive tabs are plain muted text
   that lifts to foreground on hover. Matches the bonzo-ui mockup
   where the active section reads as a filled chip rather than an
   underline tab. */
body.has-mmi-one-shell .dashboard-sub-nav__sections {
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 6px 0 !important;
  align-items: center;
}
body.has-mmi-one-shell .section-nav__item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  display: inline-flex;
  align-items: center;
  color: hsl(var(--muted-foreground)) !important;
  font: 500 13px/1 'Inter', sans-serif !important;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
body.has-mmi-one-shell .section-nav__item:hover:not(.section-nav__item--active) {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--secondary) / 0.6) !important;
}
body.has-mmi-one-shell .section-nav__item--active {
  background: hsl(var(--primary) / 0.15) !important;
  color: hsl(var(--primary)) !important;
  font-weight: 600 !important;
}
body.has-mmi-one-shell .section-nav__item--collapsed,
body.has-mmi-one-shell .section-nav__item--pending {
  opacity: 0.55;
}

/* Right cluster — meta + filters + Viewing-as chip */
body.has-mmi-one-shell .dashboard-sub-nav__right {
  align-self: center !important;
  gap: 12px !important;
}
body.has-mmi-one-shell .dashboard-sub-nav__meta {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 12px;
}

/* Filter pill — visually identical to the active section pill so
   the two primary-action chips read as a matched set. Geometry:
   8px radius, 8/14 padding, 13px/600 Inter, inline-flex; fill:
   --primary with --primary-foreground text + --primary border. */
body.has-mmi-one-shell .dashboard-sub-nav__filters .filter-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  height: auto !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font: 600 13px/1 'Inter', sans-serif !important;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
/* Shrink the filter icon to match the 13px line-height — the legacy
   18px icon was making the Filters button visibly taller than the
   text-only section-nav pills next to it. */
body.has-mmi-one-shell .dashboard-sub-nav__filters .filter-trigger__icon {
  width: 14px !important;
  height: 14px !important;
}
body.has-mmi-one-shell .dashboard-sub-nav__filters .filter-trigger:hover {
  background: hsl(var(--primary) / 0.88) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
body.has-mmi-one-shell .dashboard-sub-nav__filters .filter-trigger.filter-trigger--active {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
/* Badge sits inside the filled pill — invert it so the count reads
   as a chip-on-chip rather than disappearing into the primary fill. */
body.has-mmi-one-shell .filter-trigger__badge {
  background: hsl(var(--primary-foreground)) !important;
  color: hsl(var(--primary)) !important;
}

/* Inline link color — uses --link instead of --primary because primary
   is calibrated for filled buttons (60% L), which reads as dim navy when
   used as link text on the dark page bg. --link is bumped to ~75% L on
   dark themes for legibility; light themes keep it close to primary
   since the dark-on-light contrast already works. Applied universally
   (not gated on shell) so support links / disclaimers on the auth
   landing pick it up too.

   The selector intentionally casts wide:
     .clickable-entity         — explicit chat link helper
     .input-hints kbd          — slash-command hints under the composer
     .auth-login-link          — legacy login CTA inside chat bubbles
     a[href]:not(.no-link...)  — generic anchors in body content; opt-out
                                 hooks for elements that style themselves
                                 (buttons-as-links, brand wordmark, etc).
   Per-theme `.bonzo-theme input[type="text"]` etc. don't apply to <a>
   so we don't need an ID-bumped specificity workaround here — the only
   competition is the legacy `.clickable-entity` color rule (specificity
   0,1,0), which `body .` (0,1,1) + !important beats. */
body .clickable-entity,
body .input-hints kbd,
body .auth-login-link,
body a[href]:not(.mmi-shell__brand):not(.mmi-shell__title-chip):not(.mmi-shell__user-menu__trigger):not(.mmi-shell__app-switcher__btn):not(.mmi-shell__theme-btn):not(.mmi-shell__public-login):not(.mmi-shell__public-signup):not(.dashboard-favorite-btn):not(.app-header-btn):not(.section-nav__item):not(.dashboard-card):not(.mmi-auth-landing__brand):not(.mmi-auth-landing__btn):not(.mmi-auth-landing__trial):not(.mmi-auth-landing__top-link):not(.no-link-color):not([class*="bg-"]) {
  color: hsl(var(--link)) !important;
}
body .clickable-entity:hover,
body .auth-login-link:hover,
body a[href]:hover:not(.mmi-shell__brand):not(.mmi-shell__title-chip):not(.mmi-shell__user-menu__trigger):not(.mmi-shell__app-switcher__btn):not(.mmi-shell__theme-btn):not(.mmi-shell__public-login):not(.mmi-shell__public-signup):not(.dashboard-favorite-btn):not(.app-header-btn):not(.section-nav__item):not(.dashboard-card):not(.mmi-auth-landing__brand):not(.mmi-auth-landing__btn):not(.mmi-auth-landing__trial):not(.mmi-auth-landing__top-link):not(.no-link-color):not([class*="bg-"]) {
  color: hsl(var(--link)) !important;
}
body .clickable-entity:hover {
  background-color: hsl(var(--link) / 0.15) !important;
}

/* Ask button — opens the chat flyout with current dashboard context.
   Sits next to Filters in the sub-nav. Outlined ghost so the filled
   Filters primary remains the dominant action; same geometry/font so
   the two sit as a pair. */
body.has-mmi-one-shell #dashboardAskBtn.dashboard-sub-nav__ask {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  height: auto !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font: 600 13px/1 'Inter', sans-serif !important;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
body.has-mmi-one-shell #dashboardAskBtn.dashboard-sub-nav__ask:hover {
  background: hsl(var(--secondary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary)) !important;
}
/* Match the filter icon size so the two buttons read as a pair and
   neither is visibly taller than the section-nav text pills. */
body.has-mmi-one-shell #dashboardAskBtn.dashboard-sub-nav__ask svg {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------------------
   DASHBOARD SECTIONS — flat container, no outer card chrome. The KPI
   strip and chart card inside provide the bordered surfaces; wrapping
   the whole section in another border reads as a "box in a box". The
   gap on `.dashboard` (1.5rem) handles vertical separation between
   sections. Comfortable horizontal/vertical padding so the inner
   widget cards don't crowd the section boundary.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .dashboard-section.section-box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 12px 20px !important;
}

/* Same flat treatment for the gallery surface — no outer card around
   the dashboard tiles. The inner tile cards already provide their
   own borders, so wrapping them in another bordered container reads
   as nested chrome. */
body.has-mmi-one-shell .dashboard-gallery.section-box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Topic groups — section heading above each set of dashboard cards.
   Plain text title with a thin underline so groups read as page
   sections rather than card containers. */
body.has-mmi-one-shell .dashboard-gallery__group {
  margin-bottom: 32px;
}
body.has-mmi-one-shell .dashboard-gallery__group + .dashboard-gallery__group {
  margin-top: 8px;
}
body.has-mmi-one-shell .dashboard-gallery__group-title {
  font: 600 14px/1.2 'Inter', sans-serif !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 12px 0 !important;
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* `.dashboard-page` has `min-height: 100vh` from dashboard.css. With
   the shell header eating 56px of body padding-top, the page itself
   becomes (100vh + 56px) tall — that's enough to force a vertical
   scrollbar even when the gallery content fits in the viewport.
   Subtract the shell header height so the page fills the visible
   area without overflowing it. */
body.has-mmi-one-shell .dashboard-page {
  min-height: calc(100vh - var(--mmi-shell-header-height)) !important;
}

/* Header is the title row: icon + title + toggle. Subtitle now sits
   on its own line below the header (rendered as a sibling <p> by
   section.js), so the row stays uncluttered and the toggle lines up
   reliably regardless of subtitle length. */
body.has-mmi-one-shell .dashboard-section__header {
  align-items: center !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 4px !important;
  gap: 10px !important;
}
body.has-mmi-one-shell .dashboard-section__header .section-icon {
  width: 18px !important;
  height: 18px !important;
  color: hsl(var(--primary)) !important;
  flex-shrink: 0;
}
body.has-mmi-one-shell .dashboard-section__title {
  font: 600 16px/1.3 'Inter', sans-serif !important;
  color: hsl(var(--foreground)) !important;
}
/* Tagline — short qualifier ("What are we doing?") that sits inline
   to the right of the title. Compact and muted so the title carries
   the weight. */
body.has-mmi-one-shell .dashboard-section__tagline {
  font: 400 13px/1.3 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Explanation — long description paragraph below the header. Plain
   muted text, no chrome. Spans the full content width so single-
   paragraph copy collapses to one or two lines on wide viewports
   instead of wrapping inside an artificial 90ch reading column. */
body.has-mmi-one-shell .dashboard-section__subtitle {
  display: block !important;
  font: 400 13px/1.5 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
  font-style: normal !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}
body.has-mmi-one-shell .dashboard-section__toggle {
  width: 32px;
  height: 32px;
  border-radius: var(--mmi-radius-sm) !important;
  color: hsl(var(--muted-foreground)) !important;
}
body.has-mmi-one-shell .dashboard-section__toggle:hover {
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--secondary)) !important;
}

/* ---------------------------------------------------------------------
   SECTION LOADING SPINNER — the legacy ring uses `--border-primary`
   for the static ring and `--accent-primary` for the spinning arc.
   Via the universal token shim those map to --border and --primary,
   which on light themes produces a near-white ring on a white card
   surface (effectively invisible). Use a translucent foreground for
   the ring so it has contrast on both light and dark themes.
   Same fix for the placeholder container's slate/transparent bg
   (was rgba slate which reads as a gray smudge on light themes).
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .dashboard-section-placeholder {
  background: hsl(var(--secondary) / 0.4) !important;
  border: 1px solid hsl(var(--border)) !important;
}
body.has-mmi-one-shell .dashboard-section-placeholder__spinner {
  border: 2px solid hsl(var(--foreground) / 0.18) !important;
  border-top-color: hsl(var(--primary)) !important;
}
body.has-mmi-one-shell .dashboard-section-placeholder__label {
  color: hsl(var(--muted-foreground)) !important;
}

/* ---------------------------------------------------------------------
   SECTION DESCRIPTION — section.js renders the section's "what are we
   measuring" copy via .query-explanation, originally with hardcoded
   Tailwind blue utility classes that read as a modal/alert. We don't
   want a full bordered callout here — just a quiet info-icon + muted
   text line under the section header, with a 3px primary rule on the
   left to anchor it to the section. No bg, no border, no rounding —
   it should read as inline text, not a "filter box".
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .dashboard-section .query-explanation {
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid hsl(var(--primary)) !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 12px !important;
  margin-bottom: 12px !important;
}
body.has-mmi-one-shell .dashboard-section .query-explanation svg {
  color: hsl(var(--primary)) !important;
}
body.has-mmi-one-shell .dashboard-section .query-explanation .text-blue-300,
body.has-mmi-one-shell .dashboard-section .query-explanation > .flex > div:last-child {
  color: hsl(var(--muted-foreground)) !important;
  font: 400 13px/1.4 'Inter', sans-serif !important;
}

/* ---------------------------------------------------------------------
   KPI STRIP — bordered cells with uppercase muted label, large value,
   delta with colored arrow. Mirrors the screenshot's TOTAL SENT /
   DELIVERED / DELIVERY RATE pattern.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .kpi-row {
  gap: 8px !important;
}
body.has-mmi-one-shell .kpi-card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  gap: 8px !important;
  box-shadow: none !important;
}
body.has-mmi-one-shell .kpi-card[data-clickable="true"]:hover {
  border-color: hsl(var(--ring)) !important;
  box-shadow: none !important;
}
body.has-mmi-one-shell .kpi-card--error {
  border-color: hsl(var(--destructive)) !important;
}
body.has-mmi-one-shell .kpi-card__title {
  color: hsl(var(--muted-foreground)) !important;
  font: 600 11px/1 'Inter', sans-serif !important;
  letter-spacing: 0.06em;
}
body.has-mmi-one-shell .kpi-card__value {
  color: hsl(var(--foreground)) !important;
  font: 700 24px/1.15 'Inter', sans-serif !important;
}
body.has-mmi-one-shell .kpi-card__change {
  font: 600 11px/1.2 'Inter', sans-serif !important;
}
body.has-mmi-one-shell .kpi-card__change--up {
  color: hsl(var(--success)) !important;
}
body.has-mmi-one-shell .kpi-card__change--down {
  color: hsl(var(--destructive)) !important;
}
body.has-mmi-one-shell .kpi-card__change--neutral {
  color: hsl(var(--muted-foreground)) !important;
}
body.has-mmi-one-shell .kpi-card__prev {
  color: hsl(var(--muted-foreground)) !important;
  font: 400 11px/1.2 'Inter', sans-serif !important;
}
body.has-mmi-one-shell .kpi-card__error {
  color: hsl(var(--destructive)) !important;
}

/* ---------------------------------------------------------------------
   CHART CARD — wrap chart canvases in the same bordered card surface
   as the KPI cells. The legacy `.dashboard-chart-wrapper` was
   intentionally transparent (chat threads keep that pattern); inside
   the dashboard we want a contained card so each chart reads as a
   discrete artifact under the section header.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .dashboard-section .dashboard-chart-wrapper {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
  padding: 20px 22px !important;
  margin: 0 !important;
}
body.has-mmi-one-shell .dashboard-section .dashboard-chart-wrapper .chart-container {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* X-Axis (grain) dropdown — legacy CSS pins it to top:0/right:0 of
   the wrapper, which means it ignores any wrapper padding and sits
   flush against the card border. Inset it to match the wrapper's
   inner padding so it floats inside the card with breathing room.
   Also retoken the select chip itself; the legacy slate-700 fill
   reads as a different surface than the new --secondary tokens. */
body.has-mmi-one-shell .dashboard-chart-wrapper .chart-grain-label {
  top: 18px !important;
  right: 22px !important;
  font: 500 11px/1 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
  letter-spacing: 0.02em;
  gap: 8px !important;
}
body.has-mmi-one-shell .chart-grain-select {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  font: 500 12px/1 'Inter', sans-serif !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  cursor: pointer;
}
body.has-mmi-one-shell .chart-grain-select:hover {
  border-color: hsl(var(--ring)) !important;
}
body.has-mmi-one-shell .chart-grain-select:focus {
  outline: none !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
  color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------------------
   TABLE CONTROLS BAR — the row-count label + Copy/Export pair below
   each data table. Legacy markup uses Tailwind slate-600 / slate-500
   utility classes for the buttons and tight `px-2 py-1` spacing. The
   slate fills clash with the new tokens and the tight padding reads
   as cramped against the wider table card. Token the surfaces and
   give the bar comfortable breathing room.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .dashboard-table-controls {
  padding: 12px 4px !important;
  margin-top: 8px !important;
  gap: 8px !important;
  border-top: 1px solid hsl(var(--border));
}
body.has-mmi-one-shell .dashboard-table-controls__count {
  color: hsl(var(--muted-foreground)) !important;
  font: 400 12px/1 'Inter', sans-serif !important;
}
body.has-mmi-one-shell .dashboard-table-controls__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.has-mmi-one-shell .table-action-btn,
body.has-mmi-one-shell .favorite-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  height: 30px;
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 6px !important;
  font: 500 12px/1 'Inter', sans-serif !important;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
body.has-mmi-one-shell .table-action-btn:hover,
body.has-mmi-one-shell .favorite-all-btn:hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--ring)) !important;
}
body.has-mmi-one-shell .table-action-btn svg,
body.has-mmi-one-shell .favorite-all-btn svg {
  width: 14px !important;
  height: 14px !important;
}
body.has-mmi-one-shell .dashboard-table-pagination__btn {
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 12px;
  cursor: pointer;
}
body.has-mmi-one-shell .dashboard-table-pagination__btn:hover:not(:disabled) {
  background: hsl(var(--secondary)) !important;
}
body.has-mmi-one-shell .dashboard-table-pagination__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.has-mmi-one-shell .dashboard-table-pagination__page {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 12px;
  padding: 0 4px;
}

/* =====================================================================
   AUTH LANDING — full-viewport two-column layout shown when an
   unauthenticated user lands on `/`. Replaces the legacy
   "Welcome to ChatMMI / 3 tile" welcome card with a marketing-shaped
   page: pitch + log-in CTAs on the left, a sample conversation
   artifact on the right, slim header + footer top and bottom.

   Active state: `body.auth-landing-active` is set by the welcome
   renderer when this markup mounts. We hide the legacy chat chrome
   so the landing reads as a discrete page rather than the chat
   surface with a welcome card.
   ===================================================================== */

body.auth-landing-active > .max-w-6xl,
body.auth-landing-active > div:not(#mmiAuthLanding):not([id^='topic']) > .app-header,
body.auth-landing-active #inputBar,
body.auth-landing-active #emptyState,
body.auth-landing-active #messages,
body.auth-landing-active #messagesContainer,
body.auth-landing-active #artifactSidebar {
  display: none !important;
}

body.auth-landing-active {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
}

.mmi-auth-landing {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  z-index: 1;
  overflow-y: auto;
}

/* Header — slim brand row + Help/Status */
.mmi-auth-landing__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid hsl(var(--border));
}
.mmi-auth-landing__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: hsl(var(--foreground));
}
.mmi-auth-landing__brand-mark { width: 22px; height: 22px; }
.mmi-auth-landing__brand-name { font: 600 14px/1 'Inter', sans-serif; }
.mmi-auth-landing__top-links { display: inline-flex; gap: 8px; align-items: center; }
/* Pill-style links matching the public-shell sign-up button so the
   auth-landing header reads consistently with the leaderboard's
   public shell header. Scoped via .mmi-auth-landing__top-link so the
   body catch-all's `color: var(--link) !important` rule (which lists
   this class in its :not() chain) doesn't repaint the text blue. */
.mmi-auth-landing__top-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  font: 600 13px/1 'Inter', sans-serif;
  text-decoration: none;
  color: hsl(var(--foreground));
  background: transparent;
  border: 1px solid hsl(var(--border));
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.mmi-auth-landing__top-link:hover {
  background: hsl(var(--secondary));
  border-color: hsl(var(--ring));
}

/* Main — two columns with a centered 1px divider matching the
   header / footer top + bottom borders. The divider is a pseudo
   element rather than a border on either column so it spans the
   full main height regardless of which column is taller. */
.mmi-auth-landing__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 48px 64px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.mmi-auth-landing__main::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: hsl(var(--border));
  pointer-events: none;
}
@media (max-width: 900px) {
  .mmi-auth-landing__main {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 32px;
  }
  /* No vertical divider when the columns stack. */
  .mmi-auth-landing__main::before { display: none; }
  /* Drop the sample artifact entirely on narrow screens. The pitch
     (eyebrow + headline + CTAs + free-trial card) is the marketing
     focal point — the chat-shaped / dashboard-shaped sample reads as
     decorative once it sits below the pitch instead of beside it,
     and the column shift made the layout feel half-finished.
     `!important` is required because the base
     `.mmi-auth-landing__sample { display: flex }` rule sits later in
     the file and wins on tie-specificity. */
  .mmi-auth-landing__sample {
    display: none !important;
  }
  /* Center the pitch column inside its grid cell once the sample is
     gone — without this, the pitch's max-width: 480px keeps it pinned
     left and the page reads as left-half content with empty right
     half. justify-self centers within the cell; margin keeps content
     content-flow aligned. */
  .mmi-auth-landing__pitch {
    justify-self: center;
    margin: 0 auto;
  }
}

/* Pitch column */
.mmi-auth-landing__pitch { max-width: 480px; }
.mmi-auth-landing__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.4);
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mmi-auth-landing__heading {
  font: 700 44px/1.1 'Inter', sans-serif;
  letter-spacing: -0.02em;
  margin: 16px 0 16px 0;
  color: hsl(var(--foreground));
}
/* "anything" gets the Bonzo brand pink regardless of the active theme
   — hardcoded HSL (matches the bonzo primary) so the marketing accent
   is consistent whether the visitor is on a dark, light, or hidden-
   things palette. */
.mmi-auth-landing__heading-accent {
  color: hsl(330 78% 56%);
}
.mmi-auth-landing__sub {
  font: 400 15px/1.55 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  margin: 0 0 28px 0;
  max-width: 460px;
}

.mmi-auth-landing__cta-row {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.mmi-auth-landing__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font: 600 13px/1 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.mmi-auth-landing__btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary));
}
.mmi-auth-landing__btn--primary:hover {
  background: hsl(var(--primary) / 0.9);
}
.mmi-auth-landing__btn--ghost {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}
.mmi-auth-landing__btn--ghost:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--ring));
}

.mmi-auth-landing__or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0 16px;
  color: hsl(var(--muted-foreground));
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.1em;
}
.mmi-auth-landing__or::before,
.mmi-auth-landing__or::after {
  content: '';
  height: 1px;
  background: hsl(var(--border));
}

.mmi-auth-landing__trial {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}
.mmi-auth-landing__trial:hover {
  background: hsl(var(--secondary));
  border-color: hsl(var(--ring));
}
.mmi-auth-landing__trial + .mmi-auth-landing__trial {
  margin-top: 10px;
}
.mmi-auth-landing__trial-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.mmi-auth-landing__trial-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mmi-auth-landing__trial-title { font: 600 13px/1.2 'Inter', sans-serif; color: hsl(var(--foreground)); }
.mmi-auth-landing__trial-desc { font: 400 12px/1.4 'Inter', sans-serif; color: hsl(var(--muted-foreground)); }
.mmi-auth-landing__trial-chev { color: hsl(var(--muted-foreground)); flex-shrink: 0; }

.mmi-auth-landing__trust {
  margin: 24px 0 0 0;
  font: 400 12px/1.4 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
}
.mmi-auth-landing__trust a { color: hsl(var(--primary)); text-decoration: none; }
.mmi-auth-landing__trust a:hover { text-decoration: underline; }
.mmi-auth-landing__sep { color: hsl(var(--muted-foreground) / 0.5); padding: 0 4px; }

/* Sample column — chat artifact, right-aligned in its grid cell so
   its left edge sits the same distance from the center divider as
   the pitch column's right edge does (the pitch is left-aligned by
   default). Without this both columns slide toward the divider
   asymmetrically. */
.mmi-auth-landing__sample {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 540px;
  justify-self: end;
  width: 100%;
}
.mmi-auth-landing__artifact {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mmi-auth-landing__artifact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid hsl(var(--border));
}
.mmi-auth-landing__artifact-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 'Inter', sans-serif;
  color: hsl(var(--foreground));
}
.mmi-auth-landing__artifact-title svg { color: hsl(var(--primary)); }
.mmi-auth-landing__artifact-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: hsl(var(--muted-foreground));
  font: 500 12px/1 'Inter', sans-serif;
}

.mmi-auth-landing__msg--user {
  align-self: flex-end;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 10px 14px;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  font: 500 13px/1.45 'Inter', sans-serif;
  max-width: 80%;
}
.mmi-auth-landing__msg--analyst {
  background: hsl(var(--secondary) / 0.6);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  font: 400 13px/1.55 'Inter', sans-serif;
  color: hsl(var(--foreground));
}
.mmi-auth-landing__msg--analyst p { margin: 0 0 8px 0; }
.mmi-auth-landing__msg--analyst ol { margin: 0; padding-left: 20px; }
.mmi-auth-landing__msg--analyst li + li { margin-top: 4px; }
.mmi-auth-landing__msg--analyst strong { font-weight: 600; }

/* Lender table inside the analyst response — used by the
   "lost-refi-retention" sample variant. Compact rows with a horizontal
   share-bar (width driven by the inline `--share` custom prop) so the
   visualization reads at a glance without a separate chart. */
.mmi-auth-landing__lender-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 11.5px/1.3 'Inter', sans-serif;
  margin: 4px 0 0;
}
.mmi-auth-landing__lender-table th {
  text-align: left;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0 0 6px;
  border-bottom: 1px solid hsl(var(--border));
}
.mmi-auth-landing__lender-table th:nth-child(2),
.mmi-auth-landing__lender-table td:nth-child(2) {
  text-align: right;
  white-space: nowrap;
}
.mmi-auth-landing__lender-table td {
  padding: 6px 0;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.mmi-auth-landing__lender-table tr:last-child td { border-bottom: 0; }
.mmi-auth-landing__lender-name {
  color: hsl(var(--foreground));
  font-weight: 500;
}
.mmi-auth-landing__lender-volume {
  color: hsl(var(--foreground) / 0.85);
  font-variant-numeric: tabular-nums;
}
.mmi-auth-landing__lender-share {
  position: relative;
  width: 70px;
  padding-left: 8px !important;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mmi-auth-landing__lender-share-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.15);
  position: relative;
  overflow: hidden;
}
.mmi-auth-landing__lender-share-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--share, 0%);
  background: hsl(var(--primary));
  border-radius: 999px;
}

/* Bar chart under the lender table — visualizes the same shares but
   in vertical bars so the artifact reads as "table + chart" like a
   real Mission Control answer. Wrapper provides a subtle card and the
   caption above the SVG; bars themselves get their fills inline so
   they track --primary across themes. */
.mmi-auth-landing__lender-chart-wrap {
  margin-top: 12px;
  padding: 10px 12px 8px;
  background: hsl(var(--background) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
}
.mmi-auth-landing__lender-chart-caption {
  display: block;
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 4px;
}
.mmi-auth-landing__lender-chart {
  width: 100%;
  height: auto;
  display: block;
}

/* LO recruiting table — reuses the lender-table base; adds rank
   column, avatar+name cell, and right-aligned volume. Avatars use
   five tone variants so the column reads with visual variety
   without leaning on any single brand color. */
/* LO recruiting table — column widths are set by the <colgroup> in the
   markup (rank 18px, LO 130px, Company auto, VA+FHA 52px) so we don't
   need per-cell width rules here. We just style content. Right padding
   creates a gutter between columns so headers don't collide. */
.mmi-auth-landing__lo-table {
  table-layout: fixed;
}
.mmi-auth-landing__lo-table th,
.mmi-auth-landing__lo-table td {
  padding-right: 8px;
}
.mmi-auth-landing__lo-table th:last-child,
.mmi-auth-landing__lo-table td:last-child {
  padding-right: 0;
}
.mmi-auth-landing__lo-rank {
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.mmi-auth-landing__lo-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mmi-auth-landing__lo-name {
  color: hsl(var(--foreground));
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mmi-auth-landing__lo-company {
  color: hsl(var(--foreground) / 0.75);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmi-auth-landing__lo-units {
  text-align: right;
  color: hsl(var(--foreground) / 0.85);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.mmi-auth-landing__lo-volume {
  text-align: right;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
/* Right-align the two numeric columns (Units + VA+FHA) on both header
   and data rows. Loan Officer + Company stay left-aligned (the
   default); the explicit override here just locks Units / VA+FHA. */
.mmi-auth-landing__lo-table th:nth-child(4),
.mmi-auth-landing__lo-table td:nth-child(4),
.mmi-auth-landing__lo-table th:nth-child(5),
.mmi-auth-landing__lo-table td:nth-child(5) {
  text-align: right;
}
.mmi-auth-landing__lo-table th:nth-child(2),
.mmi-auth-landing__lo-table td:nth-child(2) {
  text-align: left;
}
.mmi-auth-landing__lo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font: 700 8px/1 'Inter', sans-serif;
  letter-spacing: 0.02em;
  color: white;
  flex-shrink: 0;
}
.mmi-auth-landing__lo-avatar--a { background: hsl(220 70% 55%); }
.mmi-auth-landing__lo-avatar--b { background: hsl(15  72% 55%); }
.mmi-auth-landing__lo-avatar--c { background: hsl(150 50% 45%); }
.mmi-auth-landing__lo-avatar--d { background: hsl(265 55% 60%); }
.mmi-auth-landing__lo-avatar--e { background: hsl(35  85% 55%); }

/* Action chips below the LO table — mirror the Save / Push-to-CRM
   actions ChatMMI shows on real tables. The push-to-CRM variant is
   filled with the brand primary so the visual hierarchy reads as
   "Save = secondary, Push = primary call-to-action". Disabled clicks
   (aria-hidden + pointer-events none) — these are mock illustrations,
   not real buttons on the marketing surface. */
.mmi-auth-landing__lo-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  pointer-events: none;
}
.mmi-auth-landing__lo-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  border-radius: 5px;
  font: 500 10px/1 'Inter', sans-serif;
}
.mmi-auth-landing__lo-action--primary {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.mmi-auth-landing__lo-followup {
  margin-top: 10px;
}

/* Key-insight callout under the table — light primary tint with the
   primary accent on the leading icon. Reads as "the takeaway" without
   competing with the table for attention. */
.mmi-auth-landing__insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.3);
  border-radius: 8px;
  font: 500 12px/1.45 'Inter', sans-serif;
  color: hsl(var(--foreground));
}
.mmi-auth-landing__insight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}
.mmi-auth-landing__insight strong {
  color: hsl(var(--primary));
  font-weight: 700;
}
.mmi-auth-landing__msg--followup {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
}

.mmi-auth-landing__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
}
.mmi-auth-landing__composer-text {
  flex: 1;
  font: 400 13px/1 'Inter', sans-serif;
  color: hsl(var(--foreground));
}
.mmi-auth-landing__composer-send {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  flex-shrink: 0;
}
.mmi-auth-landing__sample-caption {
  font: 400 11px/1.3 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin: 0;
}

/* ─── Dashboard sample variant — used when ?redirect=/dashboard/* so
       the visitor's marketing context matches where they were trying
       to go (Mission Control / Deliverability Health style preview).
       Reuses .mmi-auth-landing__artifact's card frame; adds KPI tiles
       + an SVG area chart inside. ─────────────────────────────────── */
.mmi-auth-landing__artifact--dashboard {
  padding: 18px;
  gap: 14px;
}
.mmi-auth-landing__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mmi-auth-landing__kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--background) / 0.5);
}
.mmi-auth-landing__kpi-label {
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.mmi-auth-landing__kpi-value {
  font: 700 18px/1 'Inter', sans-serif;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
}
.mmi-auth-landing__kpi-delta {
  font: 600 10px/1 'Inter', sans-serif;
}
.mmi-auth-landing__kpi-delta--down { color: hsl(var(--destructive)); }
.mmi-auth-landing__kpi-delta--up   { color: hsl(var(--success)); }
.mmi-auth-landing__kpi-delta--flat { color: hsl(var(--muted-foreground)); }
.mmi-auth-landing__chart {
  position: relative;
  height: 160px;
  border-radius: 10px;
  background: hsl(var(--background) / 0.5);
  border: 1px solid hsl(var(--border));
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mmi-auth-landing__chart svg {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
}
.mmi-auth-landing__chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font: 500 10px/1 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
}
.mmi-auth-landing__chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mmi-auth-landing__chart-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mmi-auth-landing__chart-dot--sent      { background: hsl(var(--primary)); }
.mmi-auth-landing__chart-dot--delivered { background: hsl(var(--success)); }

/* Tighten the KPI grid on narrow viewports — 4 columns become 2 so
   the values don't get clipped on a phone-sized landing. */
@media (max-width: 640px) {
  .mmi-auth-landing__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Footer — single centered copyright line */
.mmi-auth-landing__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  border-top: 1px solid hsl(var(--border));
  font: 400 11px/1.4 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
}
.mmi-auth-landing__footer-copy {
  text-align: center;
}

/* ---------------------------------------------------------------------
   THINKING BUBBLE — analyst pre-response indicator. The legacy
   styling used a heavy slate gradient, slate-500 border, hardcoded
   #d1d5db text and #9ca3af dots — none of which respect the new
   tokens. Repaint the surface with --card / --border, lift dots to
   --primary so they read as "thinking", and drop the italic so the
   message feels less novelty-styled.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .thinking-bubble-content,
body.chatmmi-embedded .thinking-bubble-content {
  background: hsl(var(--card)) !important;
  background-image: none !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 14px !important;
  border-bottom-left-radius: 4px !important;
  color: hsl(var(--foreground)) !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  gap: 10px !important;
}
body.has-mmi-one-shell .thinking-text,
body.chatmmi-embedded .thinking-text {
  color: hsl(var(--muted-foreground)) !important;
  font: 500 13px/1.4 'Inter', sans-serif !important;
  font-style: normal !important;
}
body.has-mmi-one-shell .thinking-text.success,
body.chatmmi-embedded .thinking-text.success {
  color: hsl(var(--success)) !important;
}
body.has-mmi-one-shell .thinking-text.error {
  color: hsl(var(--destructive)) !important;
}
body.has-mmi-one-shell .thinking-dots span {
  width: 6px !important;
  height: 6px !important;
  background: hsl(var(--primary)) !important;
}
body.has-mmi-one-shell .thinking-progress .w-full {
  background: hsl(var(--secondary)) !important;
}
/* Progress fill — Tailwind's bg-blue-500 etc. likely lands here;
   force the progress fill to --primary so it tracks the theme. */
body.has-mmi-one-shell .thinking-progress .w-full > * {
  background: hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   IMPERSONATION BANNER — quiet pill, sits inside the sub-nav right
   cluster next to the Filters chip. Replaces the legacy full-width
   primary-blue strip with a muted "Viewing as:" label + a single
   bordered chip carrying the user identity and a small × clear.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .impersonation-banner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font: 400 12px/1 'Inter', sans-serif !important;
  border: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}
body.has-mmi-one-shell .impersonation-banner__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 6px 0 12px;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  color: hsl(var(--foreground));
  font: 500 12px/1 'Inter', sans-serif;
}
body.has-mmi-one-shell .impersonation-banner__chip-icon {
  color: hsl(var(--primary));
  flex-shrink: 0;
}
body.has-mmi-one-shell .impersonation-banner__chip-name {
  white-space: nowrap;
}
body.has-mmi-one-shell .impersonation-banner__chip-org {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
  white-space: nowrap;
}
body.has-mmi-one-shell .impersonation-banner__chip-org::before {
  content: '·';
  margin-right: 6px;
  color: hsl(var(--muted-foreground) / 0.6);
}
body.has-mmi-one-shell .impersonation-banner__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0 !important;
  margin-left: 2px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
body.has-mmi-one-shell .impersonation-banner__clear:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--foreground)) !important;
}
body.has-mmi-one-shell .impersonation-banner__clear svg {
  width: 12px !important;
  height: 12px !important;
}

/* ---------------------------------------------------------------------
   GALLERY ASK BAR — port the chat composer pill into the dashboard
   gallery. Same pattern: fixed bottom, gradient fade, centered pill,
   round primary send button. The wrap pointer-events:auto carve-out
   stops the gradient strip from intercepting clicks on cards behind
   it.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .dashboard-gallery__ask {
  position: fixed !important;
  bottom: 0 !important;
  left: var(--mmi-gnav-width) !important;
  right: 0 !important;
  z-index: var(--mmi-z-shell);
  padding: 16px 24px 18px !important;
  margin: 0 !important;
  background: linear-gradient(to top,
    hsl(var(--background)) 0%,
    hsl(var(--background)) 70%,
    hsl(var(--background) / 0) 100%) !important;
  border: 0 !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none;
}
body.has-mmi-one-shell .dashboard-gallery__ask-wrap {
  pointer-events: auto;
  width: 100% !important;
  max-width: 860px !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 999px !important;
  padding: 6px 6px 6px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: border-color 120ms ease;
}
body.has-mmi-one-shell .dashboard-gallery__ask-wrap:focus-within {
  border-color: hsl(var(--ring)) !important;
}
/* ID selector (#galleryAskInput) instead of `.dashboard-gallery__ask-input`
   so we beat per-theme `.bonzo-theme input[type="text"]` rules (specificity
   0,2,1 with !important — equal to a class-only override, and bonzo-theme
   loads after mmi-one-shell.css so it wins on tie). The ID gives us
   (1,1,1) which trumps any class-based theme rule on the same element. */
body.has-mmi-one-shell #galleryAskInput {
  flex: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: hsl(var(--foreground)) !important;
  font: 400 14px/1.4 'Inter', sans-serif !important;
  padding: 8px 0 !important;
}
body.has-mmi-one-shell #galleryAskInput::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}
body.has-mmi-one-shell .dashboard-gallery__ask-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 0 !important;
  flex-shrink: 0;
  transition: background 120ms ease;
}
body.has-mmi-one-shell .dashboard-gallery__ask-btn:hover {
  background: hsl(var(--primary) / 0.9) !important;
}
body.has-mmi-one-shell .dashboard-gallery__ask-btn svg {
  width: 16px !important;
  height: 16px !important;
}
/* Reserve room for the fixed composer so the last gallery card isn't
   hidden behind it. Only applied while the gallery is on screen. */
body.has-mmi-one-shell.dashboard-gallery-mode .dashboard-gallery {
  padding-bottom: 100px;
}

/* =====================================================================
   WELCOME SCREEN — Mode F HomeScreenD pattern. Eyebrow + two-line
   greeting + colored topic cards + quick-ask chips + support footer.
   Triggered by the welcome renderer when body.has-mmi-one-shell is set.
   ===================================================================== */

/* Strip the legacy welcome-screen wrapper chrome when inside the shell —
   we provide our own layout. The legacy .welcome-screen flex-centers
   everything and .welcome-content caps width at 36rem (576px) with
   text-align: center; we override all of that. */
body.has-mmi-one-shell .welcome-screen {
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
body.has-mmi-one-shell .welcome-content {
  max-width: none !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Welcome screen left-aligns within the chat area. The conversation
   thread (#messages) is normally centered at 860px for readability,
   but the welcome wants to sit toward the left edge — override #messages
   centering only when it contains the welcome layout. */
body.has-mmi-one-shell #messages:has(.mmi-shell__welcome) {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none !important;
}

.mmi-shell__welcome {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  padding: 56px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.mmi-shell__welcome,
.mmi-shell__welcome * {
  text-align: left;
}

/* Eyebrow chip — sits between muted-foreground (too dim) and
   --foreground (too bright). Use a faded foreground alpha for the
   middle-ground readable-but-quiet treatment. */
.mmi-shell__welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  font: 500 12px/1 'Inter', sans-serif;
  letter-spacing: 0.01em;
  color: hsl(var(--foreground) / 0.78);
  width: fit-content;
}
.mmi-shell__welcome-eyebrow-icon {
  display: inline-flex;
  color: hsl(var(--primary));
}

/* Greeting title — bold lead + muted tail */
.mmi-shell__welcome-title {
  font: 700 36px/1.15 'Inter', sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
  color: hsl(var(--foreground));
}
.mmi-shell__welcome-title-muted {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}

/* Helper line — clarifies the two paths (pick a topic or ask freeform).
   Negative top margin pulls it closer to the title since the wrapper's
   28px gap would otherwise leave too much air. */
.mmi-shell__welcome-hint {
  font: 400 14px/1.45 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  margin: -16px 0 0;
}

/* Topic cards — single-column stack */
.mmi-shell__welcome-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mmi-shell__welcome-card {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 18px !important;
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
  text-align: left !important;
  cursor: pointer;
  color: hsl(var(--foreground)) !important;
  transition: border-color 120ms, transform 120ms, background 120ms;
  width: 100%;
  font: inherit;
}
.mmi-shell__welcome-card:hover {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--card)) !important;
}
.mmi-shell__welcome-card:hover .mmi-shell__welcome-card-arrow {
  transform: translateX(4px);
  color: hsl(var(--primary));
}

/* Icon block — no tile, just the icon itself rendered larger.
   Per-tone backgrounds are dropped; the icon glyph's own color (or
   emoji rendering) carries the visual identity. */
.mmi-shell__welcome-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.mmi-shell__welcome-card-icon-emoji {
  font-size: 32px;
  line-height: 1;
}
/* Bonzo brand mark — uses the same logo as the app switcher. Renders
   at full size in its native pink so the brand color reads on the
   card's --card surface. */
.mmi-shell__welcome-card-icon-img {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}

/* Card body */
.mmi-shell__welcome-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mmi-shell__welcome-card-title {
  font: 600 14px/1.3 'Inter', sans-serif;
  color: hsl(var(--foreground));
}
.mmi-shell__welcome-card-desc {
  font: 400 12px/1.4 'Inter', sans-serif;
  /* Lifted off --muted-foreground (which sat at ~65% L on dark) so the
     subtitle reads more comfortably alongside the bolder title. Uses a
     foreground alpha so the lift adapts across themes — no per-theme
     tuning needed. */
  color: hsl(var(--foreground) / 0.78);
}
.mmi-shell__welcome-card-pill {
  display: inline-block;
  margin-top: 8px;
  width: fit-content;
  font: 600 11px/1.2 'Inter', sans-serif;
  background: hsl(var(--pop));
  color: hsl(var(--pop-foreground));
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
/* On light themes the full-saturation pop pink reads as the loudest
   thing on the page. Drop it to a soft pop-tinted chip with the
   pop color used as text + border instead of a fill, so it still
   reads as "new/featured" without dominating the layout. Dark
   themes keep the solid fill — it pops cleanly against deep navy. */
body.bonzo-light-theme .mmi-shell__welcome-card-pill,
body.datacenter-theme .mmi-shell__welcome-card-pill {
  background: hsl(var(--pop) / 0.12);
  color: hsl(var(--pop));
  border: 1px solid hsl(var(--pop) / 0.35);
}
.mmi-shell__welcome-card-arrow {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  transition: transform 120ms ease, color 120ms;
  flex-shrink: 0;
}

/* Quick-ask chips */
.mmi-shell__welcome-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.mmi-shell__welcome-quick-label {
  font: 500 11px/1 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.mmi-shell__welcome-chip {
  font: 400 12px/1 'Inter', sans-serif;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.mmi-shell__welcome-chip:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--foreground));
}

/* Support footer */
.mmi-shell__welcome-foot {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  padding-top: 12px;
  border-top: 1px solid hsl(var(--border));
}
.mmi-shell__welcome-foot p {
  margin: 0;
}
.mmi-shell__welcome-foot p + p {
  margin-top: 4px;
}
.mmi-shell__welcome-foot-link {
  color: hsl(var(--primary));
  text-decoration: none;
}
.mmi-shell__welcome-foot-link:hover {
  text-decoration: underline;
}

/* =====================================================================
   FAVORITES + LEADERBOARD PAGES — same treatment as the chat surface:
   strip the legacy white card chrome, center at the thread width, use
   the new tokens for cards / table chrome.
   ===================================================================== */

/* Strip the white card on both page containers */
body.has-mmi-one-shell .pinned-page,
body.has-mmi-one-shell .leaderboard-page {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 24px 24px 140px !important;
  /* Widened from 1200 → 1310 — enough headroom for a 6th column on
     the favorites grid without making the leaderboard table feel
     stretched. */
  max-width: 1310px;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* ---------------------------------------------------------------------
   FAVORITES — pinned dossier cards
   --------------------------------------------------------------------- */

/* Top-of-page pills row: list jump-chips + Import + New list. Sits
   above the first list group so list-management actions live on the
   favorites surface itself rather than the (hidden) global header. */
body.has-mmi-one-shell .pinned-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid hsl(var(--border));
}
body.has-mmi-one-shell .pinned-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  font: 500 13px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
body.has-mmi-one-shell .pinned-pill:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--ring));
}
body.has-mmi-one-shell .pinned-pill svg {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
body.has-mmi-one-shell .pinned-pill:hover svg {
  color: hsl(var(--primary));
}
body.has-mmi-one-shell .pinned-pill-name {
  white-space: nowrap;
}
body.has-mmi-one-shell .pinned-pill-count {
  font: 600 11px/1 'Inter', sans-serif;
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--primary));
  padding: 2px 7px;
  border-radius: 999px;
}
/* Ghost variant for Import / New list — same shape, no fill */
body.has-mmi-one-shell .pinned-pill--ghost {
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-style: dashed;
}
body.has-mmi-one-shell .pinned-pill--ghost:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  border-style: solid;
  border-color: hsl(var(--primary));
}

/* Drop the "box-in-a-box" chrome from each list group. The inner cards
   already carry their own border + bg; wrapping the group in another
   bordered card was visually redundant. */
body.has-mmi-one-shell .pinned-page .pinned-group,
body.has-mmi-one-shell .pinned-page .pinned-group.section-box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
body.has-mmi-one-shell .pinned-page .pinned-group .section-header {
  padding: 0 0 12px !important;
}

/* Page header — match the welcome's typographic scale */
body.has-mmi-one-shell .pinned-page-title {
  font: 700 28px/1.2 'Inter', sans-serif !important;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground)) !important;
  margin: 0 0 4px !important;
}

/* Group label (e.g., "Loan Officers", "Lenders") */
body.has-mmi-one-shell .pinned-group {
  margin-bottom: 28px;
  width: 100% !important;
  max-width: none !important;
}
body.has-mmi-one-shell .pinned-group .section-header {
  font: 600 13px/1 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

body.has-mmi-one-shell .pinned-group-count {
  background: hsl(var(--primary) / 0.18) !important;
  color: hsl(var(--primary)) !important;
}

/* Card grid */
body.has-mmi-one-shell .pinned-card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
  transition: border-color 120ms, transform 120ms, background 120ms !important;
  box-shadow: none !important;
}
body.has-mmi-one-shell .pinned-card:hover {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
body.has-mmi-one-shell .pinned-card--active {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 1px hsl(var(--primary)) !important;
}

/* Load-more button */
body.has-mmi-one-shell .pinned-load-more {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
body.has-mmi-one-shell .pinned-load-more:hover {
  background: hsl(var(--accent)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* Empty state */
body.has-mmi-one-shell .pinned-group-empty {
  color: hsl(var(--muted-foreground)) !important;
}

/* ---------------------------------------------------------------------
   LEADERBOARD — wrapped in an artifact card. Header (title + meta +
   actions) + toolbar (tabs + filters) + table all flow inside one
   bordered surface. Matches the design's "actions on the artifact"
   pattern.
   --------------------------------------------------------------------- */

/* Artifact card — wraps everything below the page-level title */
body.has-mmi-one-shell .lb-artifact {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  overflow: hidden;
}

/* Artifact header — title left, actions right */
body.has-mmi-one-shell .lb-artifact-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
body.has-mmi-one-shell .lb-artifact-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
body.has-mmi-one-shell .lb-artifact-trophy {
  color: hsl(var(--primary));
  flex-shrink: 0;
}
body.has-mmi-one-shell .lb-artifact-name {
  font: 600 14px/1.2 'Inter', sans-serif;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.has-mmi-one-shell .lb-artifact-meta {
  font: 400 12px/1.2 'Inter', sans-serif;
  color: hsl(var(--muted-foreground));
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid hsl(var(--border));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons */
body.has-mmi-one-shell .lb-artifact-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* `.hidden` toggle takes precedence over the show rule below. Needed because
   the show rule's specificity (0,2,1) beats both the UA `[hidden]` selector
   and a plain `.hidden { display: none }` — so the artifact view-as button
   stayed visible for anon users despite the JS adding `.hidden`. */
body.has-mmi-one-shell .lb-artifact-action.hidden {
  display: none;
}
body.has-mmi-one-shell .lb-artifact-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--foreground));
  font: 500 12px/1 'Inter', sans-serif;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
body.has-mmi-one-shell .lb-artifact-action:hover {
  background: hsl(var(--secondary));
  border-color: hsl(var(--border));
}
/* Visible box around the artifact-header Share button so it reads as a real
   affordance rather than floating text+icon — matches the bordered treatment
   the row-level / LO-card share buttons get. */
body.has-mmi-one-shell .lb-artifact-action--share {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--mmi-radius) !important;
}
body.has-mmi-one-shell .lb-artifact-action--share:hover {
  background: hsl(var(--secondary) / 0.7) !important;
  border-color: hsl(var(--primary)) !important;
}
body.has-mmi-one-shell .lb-artifact-action--icon {
  width: 28px;
  padding: 0;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}
body.has-mmi-one-shell .lb-artifact-action--icon:hover {
  color: hsl(var(--foreground));
}

/* Controls row inside the card — strip its prior bottom border (the
   card itself is bounded), tighten padding to flow with the header */
body.has-mmi-one-shell .lb-artifact .lb-controls {
  padding: 12px 16px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card));
}

/* Results section — give the chat-explanation breathing room around it
   so it doesn't touch the toolbar above or the table below */
body.has-mmi-one-shell .lb-artifact .lb-results {
  padding: 0;
}
body.has-mmi-one-shell .lb-artifact .lb-chat-turn {
  padding: 16px;
}
/* When a chat-turn is followed immediately by the table, the chat-turn
   already padded itself, so the table sits flush with no extra gap */

/* Assistant explanation row — single bordered card. The ChatMMI bubble
   sits inline at the start of the text, then the response flows
   naturally — including the "Looks like you're #X" rank callout that
   leaderboard.js appends as a sibling button. We keep the bubble in
   normal block flow (not flex) and force its children to inline so the
   <p> text + the rank-callout button read as one continuous sentence
   instead of stacking on separate flex rows. */
body.has-mmi-one-shell .lb-chat-explanation {
  margin: 0;
}
body.has-mmi-one-shell .lb-chat-explanation .message-bubble.analyst-message {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  margin: 0 !important;
  max-width: none !important;
  /* Inherit padding + font from the existing .message-bubble base
     styles (.spacing-lg padding, base font size + family). */
}
body.has-mmi-one-shell .lb-chat-avatar {
  width: 22px;
  height: 19px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 8px;
}
body.has-mmi-one-shell .lb-chat-explanation .message-bubble.analyst-message p {
  display: inline !important;
  margin: 0 !important;
}

/* Make the table feel native to the card — strip its outer border (the
   card already provides one) and let the rows flow */
body.has-mmi-one-shell .lb-artifact .lb-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* ---------------------------------------------------------------------
   LEADERBOARD CONTROLS — kept outside the artifact for legacy markup
   that may still appear (e.g., loading skeleton)
   --------------------------------------------------------------------- */

/* Category tabs — borderless pills, fill primary on active */
body.has-mmi-one-shell .lb-category-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 8px 12px !important;
  color: hsl(var(--muted-foreground)) !important;
  font: 500 12px/1 'Inter', sans-serif !important;
  border-radius: var(--mmi-radius) !important;
  white-space: nowrap;
}
body.has-mmi-one-shell .lb-category-btn:hover {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}
/* Match the existing rule's class specificity (.leaderboard-page button.lb-category-btn.lb-category-btn--active) */
body.has-mmi-one-shell button.lb-category-btn.lb-category-btn--active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 0 !important;
}

/* Filter selects + the mobile Filters toggle button — share the same quiet
   pill treatment so the mobile three-pill row (category select / Filters /
   sort select) reads as one cohesive control strip. `appearance: none` on
   the selects strips the OS-rendered chevron so we can paint our own,
   matching the Filters button's custom chevron exactly. */
body.has-mmi-one-shell .lb-state-select,
body.has-mmi-one-shell .lb-filters-toggle {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: var(--mmi-radius) !important;
  padding: 6px 26px 6px 10px !important;
  font: 400 12px/1 'Inter', sans-serif !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
/* Touch-friendly: bump padding + font on mobile so each pill is ~42px tall
   (close to iOS HIG's 44px tap-target minimum) and the labels stay legible
   without zooming. */
@media (max-width: 640px) {
  body.has-mmi-one-shell .lb-state-select,
  body.has-mmi-one-shell .lb-filters-toggle {
    padding: 11px 28px 11px 12px !important;
    font-size: 14px !important;
  }
  body.has-mmi-one-shell .lb-filters-toggle { padding: 11px 12px !important; }
  /* Lock the two top-row pills (category select + filters icon button) to
     the same explicit height so native-select internal padding can't make
     the select read taller than the icon button. */
  body.has-mmi-one-shell .lb-state-select.lb-mobile-only,
  body.has-mmi-one-shell .lb-filters-toggle {
    height: 40px !important;
    box-sizing: border-box !important;
  }
}
/* Filters button uses an inline <svg> for its chevron — hide the background
   chevron (the data-url one above) on it and keep the inline node positioned
   right. Selects can't carry an inline child, so they keep the data-url.
   No display override: the base `.lb-filters-toggle { display: none }` and
   the @media (max-width:640px) `display: inline-flex` rule in leaderboard.css
   own visibility — overriding display here would force the button visible at
   desktop too. The flex-layout properties below are inert until the @media
   sets display:inline-flex, then they take effect. */
body.has-mmi-one-shell .lb-filters-toggle {
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background-image: none !important;
  padding: 6px 10px !important;
}
/* When no filters are active the count span is empty — collapse it so the
   icon centers without an invisible flex item nudging it. */
body.has-mmi-one-shell .lb-filters-toggle__count:empty { display: none !important; }
body.has-mmi-one-shell .lb-filters-toggle__count { color: hsl(var(--muted-foreground)); margin-left: 2px; }

/* Segmented toggle (Volume / Units) — wrapper holds the toggles, each
   inner segment fills primary when active. Matches the design's
   .seg-toggle pattern. */
body.has-mmi-one-shell .lb-segmented {
  display: inline-flex !important;
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--mmi-radius) !important;
  padding: 2px !important;
  overflow: visible !important;
  gap: 2px;
}
body.has-mmi-one-shell .lb-segment {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 12px !important;
  font: 500 12px/1 'Inter', sans-serif !important;
  color: hsl(var(--muted-foreground)) !important;
  border-radius: calc(var(--mmi-radius) - 2px) !important;
  cursor: pointer;
  white-space: nowrap;
}
body.has-mmi-one-shell .lb-segment:hover {
  color: hsl(var(--foreground)) !important;
}
body.has-mmi-one-shell button.lb-segment.lb-segment--active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* On mobile the segmented sort lives inside the open filters panel as a
   stacked row peer with the state/date/channel selects. Make it match their
   full-width treatment, each segment taking 50%, so it doesn't look like an
   orphan left-aligned widget. */
@media (max-width: 640px) {
  body.has-mmi-one-shell .lb-filters .lb-segmented {
    display: flex !important;
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
  }
  body.has-mmi-one-shell .lb-filters .lb-segment {
    flex: 1 1 0 !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }
}

/* Table */
body.has-mmi-one-shell .lb-table {
  font: 400 13px/1.4 'Inter', sans-serif !important;
}
body.has-mmi-one-shell .lb-table thead th {
  background: hsl(var(--background)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground)) !important;
  font: 500 10px/1 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.has-mmi-one-shell .lb-table tbody td {
  border-bottom: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
body.has-mmi-one-shell .lb-table tbody tr:hover {
  background: hsl(var(--secondary)) !important;
}
body.has-mmi-one-shell .lb-table tbody tr:hover td {
  background: transparent !important;
}

/* "My rank" callout — keep accent treatment */
/* Specificity bump — per-theme files (bonzo/bonzo-light/datacenter/
   hiddenthings) ship a blanket `.<theme> button:not(.opp-card-why-toggle)
   { color: var(--text-primary) !important }` at (0,2,1) and load
   AFTER mmi-one-shell.css, so they win any tie. Adding `button` here
   pushes the selector to (0,2,2) so the primary-color override
   resolves correctly on every theme. */
body.has-mmi-one-shell button.lb-my-rank-callout {
  color: hsl(var(--link)) !important;
  /* De-emphasize the callout chrome so it reads as a sentence
     continuation, not a separate "callout" tile. */
  display: inline !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: inherit !important;
}
body.has-mmi-one-shell button.lb-my-rank-callout:hover {
  text-decoration: underline !important;
  text-decoration-color: hsl(var(--link) / 0.55) !important;
}

/* ---------------------------------------------------------------------
   LEADERBOARD ROW STATES — re-tokenize the legacy hardcoded RGBA values
   that don't compose against the new darker bg. The "you" row tints
   primary; the sticky-bottom pinned row uses --card; highlights use
   --accent. Text stays --foreground for readable contrast on all.
   --------------------------------------------------------------------- */

/* The "you" row — subtle primary tint with a left edge bar */
body.has-mmi-one-shell .lb-row--you {
  background: hsl(var(--primary) / 0.12) !important;
  box-shadow: inset 3px 0 0 0 hsl(var(--primary)) !important;
}
body.has-mmi-one-shell .lb-row--you td {
  color: hsl(var(--foreground)) !important;
}

/* Sticky-bottom pinned row (you-rank callout below the visible top 50) */
body.has-mmi-one-shell .lb-row--pinned {
  background: hsl(var(--card)) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid hsl(var(--border));
}
body.has-mmi-one-shell .lb-row--pinned.lb-row--you {
  background: hsl(var(--primary) / 0.16) !important;
  box-shadow:
    inset 3px 0 0 0 hsl(var(--primary)),
    0 -4px 12px rgb(0 0 0 / 0.3) !important;
}

/* Hover / highlight / active rows */
body.has-mmi-one-shell .lb-row--active {
  background: hsl(var(--accent)) !important;
}
body.has-mmi-one-shell .lb-row--highlight {
  background: hsl(var(--accent)) !important;
  box-shadow: inset 3px 0 0 0 hsl(var(--primary)) !important;
}

/* "YOU" badge — primary fill with proper foreground contrast */
body.has-mmi-one-shell .lb-you-badge {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* Per-row share button — token the hover state */
body.has-mmi-one-shell .lb-row-share-btn:hover {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   DATA TABLES — tone down the legacy zebra. The default styles use
   slate-700 (~27% lightness) for even rows against --bg-secondary
   (~13% via shim), a 14% gap that reads as aggressive zebra-stripes
   against the new flat palette. Replace with a near-imperceptible
   --secondary tint on even rows so density still reads as rhythmic
   without competing with the row content.
   --------------------------------------------------------------------- */
body.has-mmi-one-shell .data-table tbody tr:nth-child(even) {
  background-color: hsl(var(--secondary) / 0.35) !important;
}
body.has-mmi-one-shell .data-table tbody tr:nth-child(odd) {
  background-color: transparent !important;
}
body.has-mmi-one-shell .data-table tbody tr:hover {
  background-color: hsl(var(--secondary) / 0.7) !important;
}

/* =====================================================================
   ARTIFACT CARD — bordered, rounded, --card surface. Phase 4 carryover
   from Mode F: actions on the artifact will land in Phase 6.
   ===================================================================== */
body.has-mmi-one-shell .chatmmi-artifact {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: none !important;
}

/* Artifact sidebar (the right-rail dossier panel) */
body.has-mmi-one-shell #artifactSidebar {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.has-mmi-one-shell #artifactClose {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border: 1px solid hsl(var(--border));
  /* Aligns with the lo-card cluster below (see top: 4px there). */
  top: 16px !important;
}
body.has-mmi-one-shell #artifactClose:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Inside #artifactBody, the lo-card cluster lays out left-to-right at
   top: 16px screen: [CRM 80px][FAV 44px][CLOSE 12px]. The 4px button
   top (vs 0) keeps the hover border inside .lo-card's overflow clip. */
#artifactBody .lo-card-fav-btn,
#artifactBody .lo-card-crm-btn,
#artifactBody .artifact-card-outreach-btn {
  top: 4px;
}
#artifactBody .lo-card-fav-btn {
  right: 44px;
}
#artifactBody .lo-card-crm-btn {
  right: 80px;
}

/* Agent profile card: no fav button — slide CRM into the fav slot and
   put outreach in CRM's old slot. Close button stays at right: 12px. */
#artifactBody [data-artifact-type="agent-profile"] .lo-card-crm-btn {
  right: 44px;
}
#artifactBody [data-artifact-type="agent-profile"] .artifact-card-outreach-btn {
  right: 80px;
}

/* =====================================================================
   PER-THEME BLANKET BUTTON RESET
   ---------------------------------------------------------------------
   The per-theme files (bonzo-theme, bonzo-light-theme, datacenter-theme,
   hiddenthings-theme) all apply a blanket
     `.<theme> button:not(.opp-card-why-toggle) { ... !important }`
   rule that adds background + border + color to EVERY button on the
   page. That bleeds into namespaced shell / leaderboard / favorites
   components, decorating them with unwanted boxes.

   Specificity of the per-theme blanket: (0,2,1).
   Specificity of these neutralizers: (0,2,2) — wins via more elements.
   Placed at the end of the file so cascade order also favors us.

   For buttons that DO want chrome (Share chip, primary CTAs, the bell,
   the active gnav icon, etc.) the re-apply rules below restore it
   with the same (0,2,2)+ specificity.
   ===================================================================== */

/* Strip the blanket from all shell-namespaced buttons + leaderboard +
   favorites components. */
body.has-mmi-one-shell button[class*="mmi-shell__"],
body.has-mmi-one-shell .mmi-shell__user-menu-item,
body.has-mmi-one-shell .mmi-shell__overflow-item,
body.has-mmi-one-shell button.lb-artifact-action,
body.has-mmi-one-shell button.lb-category-btn,
body.has-mmi-one-shell button.lb-segment,
body.has-mmi-one-shell button.lb-row-share-btn,
body.has-mmi-one-shell button.pinned-pill,
body.has-mmi-one-shell button.pinned-card,
body.has-mmi-one-shell button.pinned-load-more,
body.has-mmi-one-shell button.pinned-card-heart,
body.has-mmi-one-shell button.pinned-card-unpin,
body.has-mmi-one-shell button.pinned-group-action,
body.has-mmi-one-shell button.suggestion-btn,
body.has-mmi-one-shell button.topic-button,
body.has-mmi-one-shell button.section-nav__item,
body.has-mmi-one-shell button.dashboard-nav-page-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

body.has-mmi-one-shell .mmi-shell__bell-slot #notificationBellBtn {
  border: 1px solid hsl(var(--border)) !important;
  background: transparent !important;
}
body.has-mmi-one-shell .mmi-shell__bell-slot #notificationBellBtn:hover {
  background: hsl(var(--sidebar-accent)) !important;
}

/* Pills + cards re-apply */
body.has-mmi-one-shell button.pinned-pill {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
body.has-mmi-one-shell button.pinned-pill--ghost {
  background: transparent !important;
  border: 1px dashed hsl(var(--border)) !important;
}
body.has-mmi-one-shell button.pinned-card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
body.has-mmi-one-shell button.pinned-load-more {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
body.has-mmi-one-shell button.suggestion-btn {
  background: hsl(var(--secondary)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
body.has-mmi-one-shell button.mmi-shell__welcome-card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
/* Hover at the same body+button+class specificity (0,3,2) so the
   card surface stays painted instead of falling back to transparent
   from the per-theme blanket reset above. Adds a faint primary-tint
   lift to telegraph the click without going full primary fill. */
body.has-mmi-one-shell button.mmi-shell__welcome-card:hover {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.25) !important;
}
body.has-mmi-one-shell button.mmi-shell__welcome-chip {
  border: 1px solid hsl(var(--border)) !important;
}

/* Active states need to win over the reset too */
body.has-mmi-one-shell button.mmi-shell__gnav-icon.is-active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
body.has-mmi-one-shell button.mmi-shell__gnav-icon.is-open {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}
/* Idle hover — needs !important + higher specificity to beat the
   per-theme blanket button reset (`color: inherit !important`) above.
   Without this, light themes show invisible icons on hover because
   the inherited color resolves to a near-foreground tone that's
   close to the hover background. The :not(.is-active) guard keeps
   the active-state primary fill intact. */
body.has-mmi-one-shell button.mmi-shell__gnav-icon:hover:not(.is-active) {
  background: hsl(var(--sidebar-accent)) !important;
  color: hsl(var(--foreground)) !important;
}
body.has-mmi-one-shell button.lb-category-btn.lb-category-btn--active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
/* Section nav active pill — solid primary fill with the matching
   foreground token so text always meets contrast against the bg.
   Specificity (0,3,2) + !important wins over the per-theme blanket
   button reset (0,2,2) above. */
body.has-mmi-one-shell button.section-nav__item.section-nav__item--active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid hsl(var(--primary)) !important;
}
body.has-mmi-one-shell button.lb-segment.lb-segment--active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
body.has-mmi-one-shell button.mmi-shell__switcher-icon.is-active {
  background: transparent !important; /* indicator span does the fill */
}
body.has-mmi-one-shell button.mmi-shell__theme-btn {
  border: 2px solid hsl(var(--border)) !important;
}
body.has-mmi-one-shell button.mmi-shell__theme-btn.is-active {
  border: 2px solid hsl(var(--primary)) !important;
  box-shadow: 0 0 0 1px hsl(var(--primary)) !important;
}

/* ---------------------------------------------------------------------
   RESPONSIVE — collapse name/email on narrow viewports; switcher
   could collapse to a dropdown trigger here in a later pass if the
   5-icon row gets cramped
   --------------------------------------------------------------------- */
/* =====================================================================
   RESPONSIVE — two breakpoints to keep the header readable on smaller
   viewports. Tablet (≤900px) trims the user identity column; phone
   (≤640px) goes further: collapses brand to icon-only, drops sub-nav
   meta, hides dividers, shrinks the gnav rail.
   ===================================================================== */

/* Drop the dashboard "Data as of …" meta on mid-size screens too — it's
   the densest text in the title slot and gets noisy alongside the brand,
   nav page chip, impersonation banner, and right-cluster icons. Drop the
   em-dash separator with it so the impersonation banner doesn't carry a
   leading ` — `. Hidden at ≤1280px (covers most laptops); the larger
   ≤900px block below still applies on top for phone/tablet. */
@media (max-width: 1280px) {
  body.has-mmi-one-shell .mmi-shell__title-slot #dashboardMetaText { display: none; }
  .mmi-shell__title-slot:has(#dashboardMetaText) #impersonationBanner::before {
    content: none;
  }
}

@media (max-width: 900px) {
  /* User column collapses to avatar-only — name + email take a lot of
     room and the avatar identifies the session well enough. */
  .mmi-shell__user-who { display: none; }

  /* Tighter shell padding so the right cluster has more room. */
  body.has-mmi-one-shell { padding-right: 16px; }

  /* Hide the dividers between actions / switcher / user — visual
     noise when there's less to separate. */
  .mmi-shell__divider { display: none; }

  /* Action button labels collapse early — chat surfaces ship "+ New"
     and "Save" buttons with text labels that crowd the title chip
     into truncation. Below 900px the icons alone identify the
     action; the labels collapse. */
  body.has-mmi-one-shell .mmi-shell__actions-inline #startOverBtn span,
  body.has-mmi-one-shell .mmi-shell__actions-inline #saveConversationBtn span,
  body.has-mmi-one-shell .mmi-shell__actions-inline #openChatBtn span {
    display: none !important;
  }
  /* Buttons shrink to icon-only square pills when the labels go
     away — keeps the action group compact instead of leaving
     padding-bloat around a single icon. */
  body.has-mmi-one-shell .mmi-shell__actions-inline #startOverBtn:not(.hidden),
  body.has-mmi-one-shell .mmi-shell__actions-inline #saveConversationBtn:not(.hidden),
  body.has-mmi-one-shell .mmi-shell__actions-inline #openChatBtn:not(.hidden) {
    width: 36px !important;
    padding: 0 !important;
  }

  /* Title chip — cap width so the topic name truncates rather than
     pushing siblings off-screen. */
  .mmi-shell__title-chip { max-width: 240px; }
}

@media (max-width: 640px) {
  /* Brand collapses to icon only — text is the longest single label
     in the header and the icon alone identifies the surface. */
  .mmi-shell__brand-name { display: none; }

  /* Hide the org segment inside the chip — name alone reads on phone. */
  body.has-mmi-one-shell .impersonation-banner__chip-org { display: none; }

  /* Action label hide already kicks in at ≤900px above; this block
     handles further phone-only tightening. */

  /* Gnav rail collapses to an off-canvas drawer on phones — the rail
     was eating ~10% of viewport width even at 44px. Hidden by default,
     slides in when the sidebar trigger toggles `body.mmi-gnav-open`. */
  body.has-mmi-one-shell { padding-left: 0 !important; }
  .mmi-shell__gnav {
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 4px 0 14px rgba(0, 0, 0, 0.18);
  }
  body.mmi-gnav-open .mmi-shell__gnav {
    transform: translateX(0);
  }
  /* Backdrop dims the rest of the screen when the drawer is open.
     Pointer-events route through to the document click handler in
     shell-header.js, which closes the drawer. */
  body.mmi-gnav-open::before {
    content: '';
    position: fixed;
    top: var(--mmi-shell-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: calc(var(--mmi-z-shell) - 1);
  }
  .mmi-shell__gnav-icon { width: 32px; height: 32px; }

  /* Show the hamburger trigger only on phones. Sized to match the
     other shell controls and sits flush against the brand. */
  .mmi-shell__sidebar-trigger {
    display: inline-flex;
  }

  /* Title slot accommodates the smaller header — let the dashboard
     breadcrumb chevron wrap-truncate so the dashboard name doesn't
     overflow the row. The chat title chip is hidden entirely on
     phone since the topic name was getting truncated to a useless
     stub anyway and the icon alone added clutter without context. */
  .mmi-shell__title-slot .dashboard-nav-page-btn { max-width: 180px; }
  .mmi-shell__title-chip { display: none !important; }
  /* Hide the auto-inserted divider before the title slot when the
     chip is the only thing in it (the :has() rule that drew it
     would otherwise leave an orphan vertical bar). */
  .mmi-shell__title-slot:before { display: none !important; }

  /* Sub-nav padding tightens on phones to match. */
  body.has-mmi-one-shell .dashboard-sub-nav { padding: 0 12px !important; }

  /* Section content padding tightens too — the existing 12px 12px 20px
     leaves plenty of room on desktop but is cramped on phone widths
     where the section card would otherwise sit too close to the
     viewport edges with the gnav already eating 44px on the left. */
  body.has-mmi-one-shell .dashboard-section.section-box {
    padding: 8px 4px 16px !important;
  }

  /* App switcher hides on phone — cross-app jumps are still
     reachable from a deep link or the user menu, but the 3-icon pill
     adds noise to a cramped header. */
  .mmi-shell__switcher { display: none !important; }

  /* Welcome eyebrow pill ("ChatMMI · Mortgage & real estate
     intelligence") hides on phone — it eats a chunk of vertical
     space above the greeting without adding context the brand chip
     in the header doesn't already supply. The welcome container
     padding-top tightens too so the greeting doesn't hover in dead
     space where the eyebrow used to be. */
  .mmi-shell__welcome-eyebrow { display: none !important; }
  body.has-mmi-one-shell .mmi-shell__welcome {
    padding: 16px 8px 16px !important;
  }

  /* Tighten horizontal margins on phone so the chat thread + dashboard
     surfaces use the full width minus the gnav rail. The shell's
     32px right gutter (24px on tablet) is desktop-shaped breathing
     room; on a 360–414px phone every pixel matters and the rail
     already eats 44px on the left. */
  body.has-mmi-one-shell { padding-right: 8px; }
  body.has-mmi-one-shell > .max-w-6xl { padding: 8px !important; }
  body.has-mmi-one-shell .dashboard-page {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* inputBar — zero horizontal padding on phone so the composer pill
     stretches edge-to-edge of the available width (between the gnav
     rail and the body's right gutter) instead of leaving a wide
     dark bar on the gnav side. The gradient bg still fades the
     background; the pill itself just gets more breathing room. */
  body.has-mmi-one-shell #inputBar {
    padding: 12px 0 !important;
  }
  body.has-mmi-one-shell #inputBar > .flex:first-child {
    max-width: none !important;
  }

  /* Hide the View Query button on mobile — it's an internal-debug
     affordance for inspecting generated SQL, not core to the user's
     workflow. The Copy / Export / Save Lenders buttons stay since
     they're action-oriented. */
  body.has-mmi-one-shell .table-action-btn[data-action="view-sql"],
  body.has-mmi-one-shell .lb-view-sql-btn {
    display: none !important;
  }

  /* Leaderboard artifact actions — drop print + view-as on phone
     (Print is rarely tapped from phones; View As is admin-tooling
     internal-only) and shrink the Share button to icon-only. */
  body.has-mmi-one-shell .lb-artifact-action[data-lb-action="print"],
  body.has-mmi-one-shell .lb-artifact-action[data-lb-action="view-as"] {
    display: none !important;
  }
  body.has-mmi-one-shell .lb-artifact-action--share span {
    display: none !important;
  }

  /* Drop the filter context meta next to the leaderboard title
     ("O.. T.." truncated state + category pills). Header has barely
     any horizontal room on phone and the active filter set is
     visible from the segmented controls below. */
  body.has-mmi-one-shell .lb-artifact-meta { display: none !important; }

  /* Artifact sidebar (LO/lender profile card) — `artifact-sidebar.js`
     already detects mobile via `isBottomSheetMode()` and sets up a
     slide-up bottom sheet via inline `position: fixed; left: 0;
     width: 100%`. The gnav rail is off-canvas on mobile (translateX
     -100%) so there's nothing to avoid — let the sheet fill the
     viewport. The earlier left-offset rule produced a phantom strip
     on the left where the (hidden) rail "would have been" if it had
     been visible. */

  /* History slideover — sits at left: var(--mmi-gnav-width) so it docks
     beside the rail. The default 320px width can overflow narrow phones
     and leaves no room to see the rail's icons; size it to fill whatever
     remains beside the rail. The rail stays open on history taps (see
     shell-header.js onDocClick) so this gap is always backed by visible
     icons, not an empty strip. */
  body.has-mmi-one-shell .mmi-shell__hist {
    width: calc(100vw - var(--mmi-gnav-width)) !important;
    max-width: calc(100vw - var(--mmi-gnav-width)) !important;
  }
  body.has-mmi-one-shell .chatmmi-artifact {
    max-width: 100% !important;
  }

  /* Welcome intro (eyebrow + greeting + hint) is the tallest block
     on the welcome screen and pushes the topic cards off-screen on
     phones. Drop it so users land directly on the cards. */
  body.has-mmi-one-shell .mmi-shell__welcome-eyebrow,
  body.has-mmi-one-shell .mmi-shell__welcome-title,
  body.has-mmi-one-shell .mmi-shell__welcome-hint {
    display: none !important;
  }

  /* Saved profiles grid — pinned-card has fixed `width: 200px` (220
     for lenders) which only fits one column on a 360–414px phone.
     Flex out to two equal columns instead so the page actually
     uses both halves of the viewport. */
  body.has-mmi-one-shell .pinned-grid {
    gap: 8px !important;
  }
  body.has-mmi-one-shell .pinned-card,
  body.has-mmi-one-shell .pinned-card[data-type="lender"] {
    width: calc(50% - 4px) !important;
    padding: 16px 10px 12px !important;
  }
  /* Tighten pinned-page horizontal padding so the cards have edge
     room to actually pack two-wide. */
  body.has-mmi-one-shell .pinned-page {
    padding: 16px 8px 140px !important;
  }

  /* Modals — feedback / confirm dialogs ship with inline
     `max-width: 32rem` (512px) which overflows narrow phone
     viewports. Cap to viewport width minus a 16px side margin so
     the modal fits with the gnav rail still showing. The fixed-
     positioned .conversation-modal already covers the full viewport
     (it's not body-constrained), so this just shrinks the inner
     panel. */
  .conversation-modal .modal-content,
  body .modal-content {
    max-width: calc(100vw - 32px) !important;
    margin: 0 16px !important;
  }
  /* Modal padding tightens too — desktop padding-3xl is luxurious
     for a 360px wide panel. */
  .conversation-modal .modal-header,
  .conversation-modal .modal-body,
  .conversation-modal .modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* User-menu submenus open to the LEFT on desktop (the menu sits at
     the right edge of the viewport). On phone the menu is already
     near both edges, so left-opening submenus run off the left side
     of the screen. Pin the submenu to the right edge of the menu
     (right: 0) and drop it below via top + JS-set offset, so it
     stacks vertically inside the available width instead of fanning
     out horizontally. */
  .mmi-shell__user-submenu {
    right: 0 !important;
    left: auto !important;
    top: calc(100% + 6px) !important;
    min-width: 0 !important;
    width: 100%;
    max-width: 280px;
  }

  /* Auth landing collapses earlier — its grid already breaks at
     900px, so on phone we tighten the padding further. */
  .mmi-auth-landing__main { padding: 24px 16px !important; }
  .mmi-auth-landing__heading { font-size: 32px !important; }
  .mmi-auth-landing__header,
  .mmi-auth-landing__footer { padding: 14px 16px !important; }
}

/* Skeleton-line shimmer is tokenized in styles.css now — no shell-mode
   override needed (embedded mode also picks it up). */

/* Same fix for the dashboard section's empty summary content area —
   bump base contrast and use a base-color underlay so the loading
   indicator is visible even between sweep cycles. */
body.has-mmi-one-shell .dashboard-summary-content:empty {
  display: block;
  min-height: 64px;
  background-color: hsl(var(--secondary));
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    hsl(var(--foreground) / 0.18) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: dashboard-summary-shimmer 1.6s linear infinite;
  border-radius: 6px;
  margin-top: 8px;
}
@keyframes dashboard-summary-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================================
   PRINT — flatten the new shell-scoped surfaces to print-friendly
   light values so PDF exports don't carry dark-theme backgrounds.
   The legacy print CSS in styles.css forces `body { background: white }`
   at (0,0,1) but my shell rules (`body.has-mmi-one-shell .X`) sit at
   (0,2,1)+ and would otherwise win. Mirror the print rules here at
   matching specificity so the actual on-page chrome flattens too.
   Token-aware: re-points the universal compat shim to print colors
   while @media print is active, which cascades into every legacy
   `var(--bg-*)` / `var(--accent-*)` consumer.
   ===================================================================== */
@media print {
  /* Global background strip — the cleanest way to ensure no dark
     surfaces leak into the PDF is to neutralize background colors
     on every element. `print-color-adjust: exact` is intentionally
     NOT used so the browser's native "background graphics off"
     behavior wins. The token shim is also re-pointed below so any
     legacy `var(--bg-*)` consumer resolves to a print-friendly hex. */
  *,
  *::before,
  *::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: economy !important;
    print-color-adjust: economy !important;
  }
  html, body {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  body.has-mmi-one-shell,
  body.has-public-shell {
    background: white !important;
    color: #1a1a1a !important;
    /* Strip the shell layout offsets — the printed page doesn't
       reserve space for the (now-hidden) header / gnav. */
    padding: 0 !important;
    --bg-primary: #ffffff !important;
    --bg-secondary: #ffffff !important;
    --bg-tertiary: #f8fafc !important;
    --bg-quaternary: #f1f5f9 !important;
    --border-primary: #cbd5e1 !important;
    --border-secondary: #e2e8f0 !important;
    /* --accent-primary / -light / -dark removed — consumers migrated
       to hsl(var(--primary)). */
  }

  /* Hide the new shell chrome (header + gnav + slideover + history) */
  body.has-mmi-one-shell .mmi-shell__header,
  body.has-mmi-one-shell .mmi-shell__gnav,
  body.has-mmi-one-shell .mmi-shell__hist,
  body.has-mmi-one-shell .mmi-shell__hist-scrim,
  body.has-public-shell .mmi-shell__header {
    display: none !important;
  }

  /* Page wrapper — release height/min-height so content flows */
  body.has-mmi-one-shell > .max-w-6xl,
  body.has-public-shell > .max-w-6xl {
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Surface flatten — analyst card, leaderboard artifact, dashboard
     section, KPI cards, chart wrappers, message bubbles all get
     white surfaces with light borders. */
  body.has-mmi-one-shell .analyst-response,
  body.has-mmi-one-shell .lb-artifact,
  body.has-mmi-one-shell .dashboard-section.section-box,
  body.has-mmi-one-shell .dashboard-chart-wrapper,
  body.has-mmi-one-shell .kpi-card,
  body.has-mmi-one-shell .pinned-card,
  body.has-mmi-one-shell #artifactSidebar,
  body.has-mmi-one-shell .chatmmi-artifact {
    background: white !important;
    color: #1a1a1a !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
  }

  body.has-mmi-one-shell .user-message,
  body.has-mmi-one-shell .message-bubble.user-message {
    background: #eff6ff !important;
    color: #1e3a5f !important;
  }

  /* Tables — light grid, alternating row tint */
  body.has-mmi-one-shell .lb-table thead th,
  body.has-mmi-one-shell .data-table thead th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
  }
  body.has-mmi-one-shell .lb-table tbody td,
  body.has-mmi-one-shell .data-table tbody td {
    background: white !important;
    color: #1a1a1a !important;
    border-color: #e2e8f0 !important;
  }
  body.has-mmi-one-shell .data-table tbody tr:nth-child(even) {
    background-color: #f8fafc !important;
  }

  /* Pills, chips, badges — flatten to light */
  body.has-mmi-one-shell .filter-trigger,
  body.has-mmi-one-shell .impersonation-banner__chip,
  body.has-mmi-one-shell .lb-category-btn,
  body.has-mmi-one-shell .lb-segment {
    background: #f1f5f9 !important;
    color: #1a1a1a !important;
    border-color: #cbd5e1 !important;
  }

  /* Composer + input bar gone — printing a paginated export */
  body.has-mmi-one-shell #inputBar,
  body.has-public-shell #inputBar,
  body.has-mmi-one-shell .dashboard-gallery__ask {
    display: none !important;
  }
}