/* ask-chrome.css — flat Ask rail + Messages chrome + composer polish
 * Moved out of style.css to stay under STYLE_CEILING (growth guard).
 * Load after style.css so these !important overrides still win.
 */

/* ===========================================================================
   v42.6.4 flat Ask rail + Messages chrome
   - Ask panel bg matches sidebar (#191A1A); no left border / shadow / fades
   - Empty-state dashed frame gone in the rail
   - Composer flat (no glass border)
   - Messages status bar matches msg body (#000); no topbar scrim / masks
   =========================================================================== */
html body .floating-chat .floating-chat-panel,
html body .floating-chat.open .floating-chat-panel,
html body .floating-chat-panel {
  background: var(--ask-bg, #191A1A) !important;
  background-color: var(--ask-bg, #191A1A) !important;
  background-image: none !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .floating-chat .floating-chat-header {
  background: var(--ask-bg, #191A1A) !important;
  background-image: none !important;
  border-bottom: none !important;
}
html body .floating-chat .floating-chat-messages {
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html body .floating-chat .chat-empty,
html body .floating-chat .floating-chat-messages .chat-empty,
html body .floating-chat .floating-chat-messages > [data-gl-empty] {
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .floating-chat .floating-chat-composer,
html body .floating-chat .floating-chat-composer.glass-composer,
html body div.floating-chat-composer.glass-composer,
html body .floating-chat #floating-chat-composer.rich-composer {
  background: var(--ask-bg, #191A1A) !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body .floating-chat .floating-chat-composer:focus-within,
html body .floating-chat #floating-chat-composer.rich-composer:focus-within {
  border: none !important;
  box-shadow: none !important;
}
html body .floating-chat .floating-chat-panel::before,
html body .floating-chat .floating-chat-panel::after,
html body .floating-chat .floating-chat-header::before,
html body .floating-chat .floating-chat-header::after,
html body .floating-chat .floating-chat-composer::before,
html body .floating-chat .floating-chat-composer::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Messages: status bar = body; kill any remaining scrims/masks */
html body .msg-status-bar,
html body.route-messages .msg-status-bar,
html[data-app-theme="dark"] body .msg-status-bar,
html body #msg-status-bar.msg-status-bar {
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border: none !important;
  border-bottom: none !important;
}
html body .msg-status-bar::before,
html body .msg-status-bar::after,
html body .msg-view::before,
html body .msg-view::after,
html body.route-messages .msg-view::before,
html body.route-messages .msg-view::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  height: 0 !important;
}
html body .msg-view,
html body.route-messages .msg-view,
html body .msg-split,
html body .msg-right-pane,
html body .msg-thread-pane,
html body .msg-left-pane {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-image: none !important;
}

/* v42.6.33 — late-cascade reinforce: empty Messages topbar must not paint */
html body.route-messages header.topbar#topbar,
html body.route-messages header.topbar.topbar--no-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html body.route-messages #main-content,
html body.route-messages main#main-content {
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* ===========================================================================
   v42.6.5 Ask composer chrome polish
   - Model pill: Claude starburst + glass border matching plus/Delegator (no blue)
   - Mic matches plus glass circle
   - Slightly smaller toolbar controls so the row fits cleanly
   - Send: near-white fill, no blue glow

   v42.6.28 desktop chrome parity (Branson screenshot):
   - One quiet gray hairline + one 30px height across + / Web / model / Delegator
   - Square + (no vertical squash)
   - Dark send arrow on light fill (beat legacy white stroke on svg *)
   - Subtle hover (lighten only — no bright border jump)
   Desktop-only heights so phone 44px targets in mobile-os stay intact.
   =========================================================================== */

/* Quiet hairline shared by toolbar pills (desktop + rail). */
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip.rc-chip--model,
html body .rich-composer .rc-chip.rc-chip--model,
html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip.rc-chip--model,
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-chip.rc-chip--model,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model {
  box-sizing: border-box !important;
  background: var(--chrome-fill, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--border, var(--border-strong-warm, #3A3A3A)) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--chrome-ink, rgba(232, 233, 235, 0.82)) !important;
  gap: 5px !important;
  max-width: 118px !important;
  padding: 0 9px 0 8px !important;
}
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip[data-chip="web"],
html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip[data-chip="web"],
html body .rich-composer .rc-chip[data-chip="web"] {
  box-sizing: border-box !important;
  background: var(--chrome-fill, rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid var(--border, var(--border-strong-warm, #3A3A3A)) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--chrome-ink, rgba(232, 233, 235, 0.82)) !important;
}

/* Subtle hover — slight lighten only; keep the same quiet border. */
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip.rc-chip--model:hover,
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip.rc-chip--model:focus,
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip.rc-chip--model:focus-visible,
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip.rc-chip--model:active,
html body .rich-composer .rc-chip.rc-chip--model:hover,
html body .rich-composer .rc-chip.rc-chip--model:focus,
html body .rich-composer .rc-chip.rc-chip--model:focus-visible,
html body .rich-composer .rc-chip.rc-chip--model:active,
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip[data-chip="web"]:hover,
html body .rich-composer .rc-chip[data-chip="web"]:hover,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model:hover,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model:focus,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model:focus-visible {
  background: var(--chrome-fill-hover, rgba(255, 255, 255, 0.06)) !important;
  border-color: var(--border, var(--border-strong-warm, #3A3A3A)) !important;
  color: var(--chrome-ink-hover, rgba(234, 235, 236, 0.92)) !important;
  box-shadow: none !important;
  outline: none !important;
  /* Kill legacy blue band / brand focus ring on the model name pill */
  filter: none !important;
}
html body .rich-composer .rc-chip.rc-chip--model .rc-chip-model-ico,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model .rc-chip-model-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}
html body .rich-composer .rc-chip.rc-chip--model .rc-chip-model-ico svg,
html body .rich-composer .rc-chip.rc-chip--model .rc-claude-mark,
html body .rich-composer .rc-chip.rc-chip--model .rc-pplx-mark,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model .rc-chip-model-ico svg,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model .rc-claude-mark,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model .rc-pplx-mark {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  opacity: 0.92 !important;
}
/* Perplexity brand mark is fill-based; keep paths/rects visible if a
   send-arrow fill:none rule ever leaks onto chip / picker SVGs. */
html body .rich-composer .rc-pplx-mark,
html body .rich-composer .rc-pplx-mark path,
html body .rich-composer .rc-pplx-mark rect,
html body .floating-chat .rc-pplx-mark,
html body .floating-chat .rc-pplx-mark path,
html body .floating-chat .rc-pplx-mark rect,
html body #rc-model-popover .rc-pplx-mark,
html body #rc-model-popover .rc-pplx-mark path,
html body #rc-model-popover .rc-pplx-mark rect,
html body #rc-model-sheet .rc-pplx-mark,
html body #rc-model-sheet .rc-pplx-mark path,
html body #rc-model-sheet .rc-pplx-mark rect {
  fill: currentColor !important;
  stroke: none !important;
}
html body .rich-composer .rc-chip.rc-chip--model .rc-chip-label,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model .rc-chip-label {
  max-width: 68px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  /* Global `[class*="chip"]` matches .rc-chip-label and paints --chip-bg
     (#2196F314). Kill that blue wash on the model name text. */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* Any other composer chip text span that also matches [class*="chip"]. */
html body .rich-composer .rc-chip-label,
html body .rich-composer [class*="chip-label"],
html body .floating-chat .rc-chip-label {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
html body .rich-composer .rc-chip.rc-chip--model .rc-chip-caret,
html body .floating-chat #floating-chat-composer.rich-composer .rc-chip.rc-chip--model .rc-chip-caret {
  width: 11px !important;
  height: 11px !important;
  opacity: 0.55 !important;
  flex: 0 0 auto !important;
}

/* Desktop: unify control height (beats style.css ID-scoped 44px native rules). */
@media (min-width: 821px) {
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) :is(.rc-plus-wrap, .rc-plus-native-wrap),
  html body .ai-view .rich-composer.rc-controls-native#ask-composer :is(.rc-plus-wrap, .rc-plus-native-wrap),
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native :is(.rc-plus-wrap, .rc-plus-native-wrap) {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    aspect-ratio: 1 / 1 !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-plus-native-wrap,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-plus-native-wrap,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-plus-native-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    aspect-ratio: 1 / 1 !important;
    background: var(--chrome-fill, rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid var(--border, var(--border-strong-warm, #3A3A3A)) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-plus-native-wrap:hover,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-plus-native-wrap:hover {
    background: var(--chrome-fill-hover, rgba(255, 255, 255, 0.06)) !important;
    border-color: var(--border, var(--border-strong-warm, #3A3A3A)) !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-plus-native-wrap svg,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-plus-native-wrap svg,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-plus-native-wrap svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex: 0 0 14px !important;
    aspect-ratio: 1 / 1 !important;
    opacity: 0.85 !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-plus-native,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-plus-native,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-plus-native {
    width: 100% !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }

  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip.rc-chip--model,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip.rc-chip--model,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-chip.rc-chip--model,
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-chip[data-chip="web"],
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-chip[data-chip="web"] {
    display: inline-flex !important;
    align-items: center !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  /* Delegator — same quiet border + height as Web/Sonnet (not the bright OS rim). */
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-mode,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-mode,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-mode {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-mode-select,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-mode-select,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-mode-select {
    /* Desktop: drop OS chrome so the closed control matches Web/Sonnet hairline.
       Phone keeps appearance:auto via style.css + mobile-os (max-width:820). */
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 22px 0 10px !important;
    font-size: 12px !important;
    line-height: 28px !important;
    background-color: var(--chrome-fill, rgba(255, 255, 255, 0.04)) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9D9E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 11px 11px !important;
    border: 1px solid var(--border, var(--border-strong-warm, #3A3A3A)) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--chrome-ink, rgba(232, 233, 235, 0.82)) !important;
    outline: none !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-mode-select:hover,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-mode-select:hover,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-mode-select:hover {
    background-color: var(--chrome-fill-hover, rgba(255, 255, 255, 0.06)) !important;
    border-color: var(--border, var(--border-strong-warm, #3A3A3A)) !important;
    color: var(--chrome-ink-hover, rgba(234, 235, 236, 0.92)) !important;
  }

  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-mic,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-mic,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-mic,
  html body .rich-composer .rc-mic {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    background: var(--chrome-fill, rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid var(--border, var(--border-strong-warm, #3A3A3A)) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: var(--chrome-ink, rgba(232, 233, 235, 0.82)) !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-mic:hover,
  html body .rich-composer .rc-mic:hover,
  html body .floating-chat #floating-chat-composer.rich-composer .rc-mic:hover {
    background: var(--chrome-fill-hover, rgba(255, 255, 255, 0.06)) !important;
    border-color: var(--border, var(--border-strong-warm, #3A3A3A)) !important;
    color: var(--chrome-ink-hover, rgba(234, 235, 236, 0.92)) !important;
  }
  html body .rich-composer .rc-mic svg,
  html body .floating-chat #floating-chat-composer.rich-composer .rc-mic svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Send — near-white fill, dark arrow (path uses stroke=currentColor). */
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-send,
  html body .ai-view .rich-composer.rc-controls-native#ask-composer .rc-send,
  html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-send,
  html body .rich-composer .rc-send {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
    aspect-ratio: 1 / 1 !important;
    background: #EDEEEF !important;
    border: none !important;
    border-radius: 50% !important;
    color: #1A1A1A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  }
  html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-send:hover,
  html body .rich-composer .rc-send:hover,
  html body .floating-chat #floating-chat-composer.rich-composer .rc-send:hover {
    background: #F4F4F5 !important;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
    filter: none !important;
  }
}

/* Send arrow contrast — must beat style.css `svg * { stroke:#fff }` on all viewports
   where the send fill is light. Path nodes need the dark stroke, not only the <svg>. */
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-send,
html body .ai-view .rich-composer .rc-send,
html body .rich-composer .rc-send,
html body .floating-chat #floating-chat-composer.rich-composer .rc-send {
  background: #EDEEEF !important;
  color: #1A1A1A !important;
}
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-send svg,
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-send svg *,
html body .ai-view .rich-composer .rc-send svg,
html body .ai-view .rich-composer .rc-send svg *,
html body .rich-composer .rc-send svg,
html body .rich-composer .rc-send svg *,
html body .floating-chat #floating-chat-composer.rich-composer .rc-send svg,
html body .floating-chat #floating-chat-composer.rich-composer .rc-send svg * {
  width: 14px !important;
  height: 14px !important;
  stroke: #1A1A1A !important;
  color: #1A1A1A !important;
  fill: none !important;
  stroke-width: 2.4px !important;
}

html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-mode-select:focus-visible,
html body .rich-composer.rc-controls-native:is(#ask-composer, #dashboard-composer, #floating-chat-composer) .rc-plus-native-wrap:focus-within,
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-mode-select:focus-visible,
html body .floating-chat #floating-chat-composer.rich-composer.rc-controls-native .rc-plus-native-wrap:focus-within {
  outline: 1px solid var(--border-strong, rgba(255, 255, 255, 0.22)) !important;
  outline-offset: 1px !important;
}

/* ===========================================================================
   v42.6.32 Model picker — same glass family as + / Delegator chips
   Chip chrome: rgba(255,255,255,0.04) fill + 1px #3A3A3A hairline.
   Menus keep that hairline and use a lighter frosted fill so the Ask
   gradient reads through (Apple vibrancy), instead of a solid paint card.
   =========================================================================== */
html body .rich-composer .rc-plus-menu,
html body #rc-model-popover .rc-model-pop,
html body #rc-model-sheet .rc-model-sheet {
  background: var(--chrome-glass, rgba(255, 255, 255, 0.06)) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  border: 1px solid var(--chrome-glass-border, var(--border, #3A3A3A)) !important;
  box-shadow:
    0 12px 40px var(--shadow-alpha-45, rgba(0, 0, 0, 0.38)),
    inset 0 1px 0 var(--overlay-w-08, rgba(255, 255, 255, 0.08)) !important;
}
html body #rc-model-popover .rc-model-pop {
  min-width: 240px !important;
  max-width: 320px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding: 0.4rem 0.35rem !important;
  border-radius: 12px !important;
  background: var(--chrome-glass, rgba(40, 40, 42, 0.72)) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: 0.5px solid var(--chrome-glass-border, rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    0 8px 40px var(--shadow-alpha-45, rgba(0, 0, 0, 0.45)),
    inset 0 0.5px 0 var(--overlay-w-12, rgba(255, 255, 255, 0.14)) !important;
}
html body #rc-model-popover .rc-model-pop-group {
  padding: 0.5rem 0.7rem 0.25rem !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--chrome-glass-muted, rgba(255, 255, 255, 0.45)) !important;
  font-weight: 600 !important;
}
html body #rc-model-popover .rc-model-pop-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  padding: 0.5rem 0.7rem !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--chrome-glass-ink, rgba(255, 255, 255, 0.92)) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
html body #rc-model-popover .rc-model-pop-item:hover {
  background: var(--chrome-glass-hover, rgba(255, 255, 255, 0.06)) !important;
  color: var(--fg-primary, #ffffff) !important;
}
html body #rc-model-popover .rc-model-pop-item--selected {
  background: var(--chrome-glass-selected, rgba(255, 255, 255, 0.10)) !important;
}
html body #rc-model-popover .rc-model-pop-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  color: var(--chrome-glass-ink, rgba(255, 255, 255, 0.88)) !important;
  flex: 0 0 18px !important;
}
html body #rc-model-popover .rc-model-pop-ico .rc-pplx-mark,
html body #rc-model-popover .rc-model-pop-ico .rc-claude-mark,
html body #rc-model-sheet .rc-model-sheet-ico .rc-pplx-mark,
html body #rc-model-sheet .rc-model-sheet-ico .rc-claude-mark {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}
html body #rc-model-sheet .rc-model-sheet {
  background: var(--chrome-glass, rgba(40, 40, 42, 0.78)) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: 0.5px solid var(--chrome-glass-border, rgba(255, 255, 255, 0.16)) !important;
  box-shadow: 0 -8px 40px var(--shadow-alpha-45, rgba(0, 0, 0, 0.4)) !important;
}
html body #rc-model-sheet .rc-model-sheet-item:hover {
  background: var(--chrome-glass-hover, rgba(255, 255, 255, 0.06)) !important;
}
html body #rc-model-sheet .rc-model-sheet-item--selected {
  background: var(--chrome-glass-selected, rgba(255, 255, 255, 0.10)) !important;
}

/* ===========================================================================
   v42.6.32 — Ask Sales KPI grid: fit width + unsquish charts (cascade last)
   Live still clipped the 3rd column because grid items defaulted to
   min-width:auto (SVG intrinsic), so columns wouldn't shrink. Charts looked
   stubby inside short flex cards. This file loads after desktop/mobile-v2
   so these !important rules win on desktop Ask.
   =========================================================================== */
@media (min-width: 821px) {
  html body.route-ask.kpi-active .ai-view .home-dash-grid,
  html body.route-ask .ai-view .home-dash-grid,
  html body.route-ask .ai-view #home-launcher .home-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(88px, 0.3fr) !important;
    grid-template-rows: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(64px, 0.38fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body.route-ask .ai-view .home-dash-grid > * {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  html body.route-ask .ai-view .home-dash-grid .home-dash-card,
  html body.route-ask .ai-view .home-dash-grid .home-dash-card.home-dash-card--link,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0.45rem 0.55rem 0.35rem !important;
  }

  html body.route-ask .ai-view .home-dash-grid .home-dash-card .home-dash-kpi {
    flex: 0 0 auto !important;
  }
  html body.route-ask .ai-view .home-dash-grid .home-dash-card .home-dash-value {
    font-size: 1.35rem !important;
    line-height: 1 !important;
  }
  html body.route-ask .ai-view .home-dash-grid .home-dash-card .home-dash-unit,
  html body.route-ask .ai-view .home-dash-grid .home-dash-card .home-dash-baseline-row1 {
    font-size: 0.55rem !important;
  }
  html body.route-ask .ai-view .home-dash-grid .home-dash-card .home-dash-baseline-row2 {
    font-size: 0.68rem !important;
  }

  html body.route-ask .ai-view .home-dash-grid .home-dash-week-bars--full,
  html body.route-ask .ai-view .home-dash-card .home-dash-week-bars--full {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 96px !important;
    max-height: none !important;
    width: 100% !important;
    margin-top: 0.15rem !important;
    overflow: hidden !important;
  }

  html body.route-ask .ai-view .home-dash-grid .home-dash-week-bars--full .kpi-week-svg,
  html body.route-ask .ai-view .home-dash-grid .home-dash-week-bars--full svg {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    display: block !important;
  }

  html body.route-ask:not(.ai-has-messages) .ai-view > .home-launcher,
  html body.route-ask .ai-view #home-launcher.home-launcher {
    overflow: hidden !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
}

/* ===========================================================================
   v42.6.33 — Outer totals chips: dark-theme contrast (cascade last)
   desktop-v2 / style.css force #191A1A !important on bucket eyebrow/value/
   unit/ticker — black-on-dark, unreadable next to cream main cards.
   Ask chrome wins by source order; keep light theme dark text.
   =========================================================================== */
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right {
  background: var(--bg-card, #1F2121) !important;
  background-color: var(--bg-card, #1F2121) !important;
  border-color: var(--border-soft, rgba(255, 255, 255, 0.10)) !important;
  box-shadow: none !important;
}

html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-value,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-value,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value {
  color: #EAEBEC !important;
}

html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-eyebrow,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-eyebrow,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-eyebrow,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-eyebrow,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-eyebrow {
  color: rgba(234, 235, 236, 0.72) !important;
}

html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-unit,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-unit,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-unit,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-unit {
  color: rgba(234, 235, 236, 0.55) !important;
}

/* Tickers keep directional color (desktop-v2 was painting them #191A1A too). */
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-up,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-ticker {
  color: #34C659 !important;
}
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-down,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-ticker {
  color: #FF3C2F !important;
}
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-flat,
html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-ticker {
  color: rgba(234, 235, 236, 0.55) !important;
}

html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right {
  background: rgba(255, 255, 255, 0.92) !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}

html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-value,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-value,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-value,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-value,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-eyebrow,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-eyebrow,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-eyebrow,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-eyebrow,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-unit,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-unit,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-unit,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-unit {
  color: #191A1A !important;
}

html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-up,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-up .home-dash-bucket-ticker {
  color: #2E7D32 !important;
}
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-down,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-down .home-dash-bucket-ticker {
  color: #C62828 !important;
}
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip .home-dash-bucket-ticker.is-flat,
html[data-app-theme="light"] body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip.is-flat .home-dash-bucket-ticker {
  color: rgba(60, 64, 67, 0.85) !important;
}

/* Light / OG: Delegator caret stroke reads as dark ink */
html[data-app-theme="light"] body .rich-composer .rc-mode-select,
html[data-app-theme="og"] body .rich-composer .rc-mode-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5F65' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
html[data-app-theme="light"] body .rich-composer .rc-send,
html[data-app-theme="og"] body .rich-composer .rc-send {
  background: #1A1C1E !important;
  color: #F7F8FA !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
}
html[data-app-theme="light"] body .rich-composer .rc-send svg,
html[data-app-theme="light"] body .rich-composer .rc-send svg *,
html[data-app-theme="og"] body .rich-composer .rc-send svg,
html[data-app-theme="og"] body .rich-composer .rc-send svg * {
  stroke: #F7F8FA !important;
  color: #F7F8FA !important;
}
html[data-app-theme="light"] body .rich-composer .rc-send:hover,
html[data-app-theme="og"] body .rich-composer .rc-send:hover {
  background: #2A2C2E !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
}


/* ===========================================================================
   v42.6.34 — Ask composer surface matches KPI pill chrome
   Dark: solid #2A2928 / heavy drop-shadow looked bluish vs Sales/Retention
   KPI pills (chrome-fill + rgba(255,255,255,0.10) hairline). Tokenize to
   --composer-bg / --gl-chat-border / --chrome-fill so light (#134) stays coherent.

   v42.6.35 — Round the back piece. Cascade-last surface paint must also lock
   border-radius (20px = style.css / mobile-v2 intended pill) so a square fill
   cannot peek past the chrome. Do not use overflow:hidden here (clips
   .rc-plus-menu). Do not touch .kpi-pill geometry.

   v42.6.36 — Composer fill = KPI pill fill. Solid #1F2121 still read darker
   than Sales/Retention/Ops/Finance pills (--chrome-fill wash on --ask-bg).
   Dark --composer-bg aliases --chrome-fill; both surfaces paint the same
   token chain so they cannot drift.
   =========================================================================== */
html body .ai-view .rich-composer,
html body .ai-view .ai-composer-wrap .rich-composer,
html body .ai-view #ask-composer.rich-composer,
html body .ai-view #ask-composer.rich-composer.rc-controls-native,
html body .dashboard-view .rich-composer,
html body .dashboard-view #dashboard-composer.rich-composer {
  background: var(--composer-bg, var(--chrome-fill, rgba(255, 255, 255, 0.04))) !important;
  background-color: var(--composer-bg, var(--chrome-fill, rgba(255, 255, 255, 0.04))) !important;
  background-image: none !important;
  border: 1px solid var(--gl-chat-border, rgba(255, 255, 255, 0.10)) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body .ai-view .rich-composer:focus-within,
html body .ai-view .ai-composer-wrap .rich-composer:focus-within,
html body .ai-view #ask-composer.rich-composer:focus-within,
html body .ai-view #ask-composer.rich-composer.rc-controls-native:focus-within,
html body .dashboard-view .rich-composer:focus-within {
  border-color: var(--border-strong, rgba(255, 255, 255, 0.18)) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* Keep the positioning wrap invisible — never a square charcoal slab behind
   the rounded composer card. */
html body .ai-view .ai-composer-wrap,
html body .ai-view .ai-composer-wrap:focus-within,
html body.route-ask .ai-composer-wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* KPI category pills share the SAME fill + hairline as the composer (dark). */
html[data-app-theme="dark"] body .kpi-pills-row .kpi-pill,
html[data-app-theme="dark"] body #kpi-pills-row .kpi-pill,
html[data-app-theme="dark"] body.route-ask .kpi-pills-row .kpi-pill {
  background: var(--composer-bg, var(--chrome-fill, rgba(255, 255, 255, 0.04))) !important;
  background-color: var(--composer-bg, var(--chrome-fill, rgba(255, 255, 255, 0.04))) !important;
  border: 1px solid var(--gl-chat-border, rgba(255, 255, 255, 0.10)) !important;
  box-shadow: none !important;
}

/* light-mode ask shell ink */
html[data-app-theme="light"] body .rich-composer,
html[data-app-theme="og"] body .rich-composer,
html[data-app-theme="light"] body .glass-composer,
html[data-app-theme="og"] body .glass-composer,
html[data-app-theme="light"] body .ai-composer-wrap,
html[data-app-theme="og"] body .ai-composer-wrap {
  background: var(--composer-bg, var(--bg-card)) !important;
  background-color: var(--composer-bg, var(--bg-card)) !important;
  color: var(--fg-primary) !important;
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-card) !important;
}
html[data-app-theme="light"] body .rich-composer textarea,
html[data-app-theme="light"] body .rich-composer .chat-textarea,
html[data-app-theme="light"] body .rich-composer .rc-textarea,
html[data-app-theme="og"] body .rich-composer textarea,
html[data-app-theme="og"] body .rich-composer .chat-textarea {
  color: var(--fg-primary) !important;
  caret-color: var(--fg-primary) !important;
}
html[data-app-theme="light"] body .rich-composer textarea::placeholder,
html[data-app-theme="og"] body .rich-composer textarea::placeholder {
  color: var(--fg-muted) !important;
}
html[data-app-theme="light"] aside.sidebar .nav-item.active,
html[data-app-theme="og"] aside.sidebar .nav-item.active,
html[data-app-theme="light"] body .sidebar .nav-item.active,
html[data-app-theme="og"] body .sidebar .nav-item.active,
html[data-app-theme="light"] body .nav-item.active,
html[data-app-theme="og"] body .nav-item.active {
  background: rgba(25, 118, 210, 0.14) !important;
  border-color: rgba(25, 118, 210, 0.35) !important;
  color: #0D47A1 !important;
}
html[data-app-theme="light"] aside.sidebar .nav-item:hover,
html[data-app-theme="og"] aside.sidebar .nav-item:hover,
html[data-app-theme="light"] body .sidebar .nav-item:hover,
html[data-app-theme="og"] body .sidebar .nav-item:hover {
  background: rgba(25, 118, 210, 0.08) !important;
  color: #0D47A1 !important;
}

/* ===========================================================================
   v42.6.35 — Small period toggles: unify chrome + stop label clip
   User: vs/avg look darker/unfilled vs Showing; text/carets clip; same
   cutoff on Retention/Ops/Finance cards. chrome-fill (0.04) reads nearly
   empty on the Ask page — use solid --bg-card + hairline so every control
   chip matches the visible light-grey pill (Showing / outer card family).
   Keep chart overflow + 96px floor; fit TOTAL/this week via taller bottom
   row, wrap eyebrows, scaled values. Outer .kpi-pill tokens (#143) untouched.
   =========================================================================== */

/* Light-grey pill — identical for period / vs / avg / reload (button OR span).
   #1F2121 was too close to the Ask page and read as "unfilled" on vs/avg;
   use a clear translucent wash so every chip matches Showing's filled look. */
html body.route-ask .ai-view .home-dash-toggles .home-dash-toggle,
html body.route-ask .ai-view #home-dash-toggles .home-dash-toggle,
html body.route-ask .ai-view button.home-dash-toggle,
html body.route-ask .ai-view span.home-dash-toggle,
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--period,
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--vs,
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--avg,
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--display,
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--reload {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: none !important;
  padding: 0 20px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  color: #E5E7EB !important;
}
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--reload {
  padding: 0 14px !important;
  min-width: 40px !important;
  width: 40px !important;
}
html body.route-ask .ai-view .home-dash-toggle:hover,
html body.route-ask .ai-view .home-dash-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.16) !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
/* Avg is read-only — same filled chrome on hover (never inherit/transparent). */
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--display:hover,
html body.route-ask .ai-view .home-dash-toggle.home-dash-toggle--display:focus-visible,
html body.route-ask .ai-view span.home-dash-toggle.home-dash-toggle--display:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
html body.route-ask .ai-view .home-dash-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.18) !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}
html body.route-ask .ai-view .home-dash-toggle .home-dash-toggle-caret {
  margin-left: 2px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  display: inline-block !important;
  line-height: 1 !important;
  font-size: 0.7rem !important;
}
html body.route-ask .ai-view .home-dash-toggle .home-dash-toggle-value,
html body.route-ask .ai-view .home-dash-toggle .home-dash-toggle-label {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.route-ask .ai-view .home-dash-toggle .home-dash-toggle-label {
  color: rgba(229, 231, 235, 0.7) !important;
  font-weight: 500 !important;
}
html body.route-ask .ai-view .home-dash-toggle .home-dash-toggle-value {
  color: #F3F4F6 !important;
  font-weight: 700 !important;
}

@media (min-width: 821px) {
  /* Taller bottom totals row so TOTAL / this week fit (Sales + shared grid). */
  html body.route-ask.kpi-active .ai-view .home-dash-grid,
  html body.route-ask .ai-view .home-dash-grid,
  html body.route-ask .ai-view #home-launcher .home-dash-grid {
    grid-template-rows: minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(84px, 0.46fr) !important;
  }

  /* Sales cards + totals + Retention/Ops/Finance KPI cards — shared padding. */
  html body.route-ask .ai-view .home-dash-grid .home-dash-card,
  html body.route-ask .ai-view .home-dash-grid .home-dash-card.home-dash-card--link,
  html body.route-ask .ai-view .home-dash-grid .home-dash-card.home-dash-card--kpi,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right,
  html body.route-ask .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card,
  html body.route-ask .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi {
    padding: 0.55rem 0.75rem 0.5rem !important;
    overflow: hidden !important; /* charts stay clipped; text sized to fit */
  }

  /* Fit labels inside overflow:hidden cards across ALL KPI boards. */
  html body.route-ask .ai-view .home-dash-grid .home-dash-head,
  html body.route-ask .ai-view .home-dash-grid .home-dash-kpi,
  html body.route-ask .ai-view .home-dash-grid .home-dash-unit,
  html body.route-ask .ai-view .home-dash-grid .home-dash-value,
  html body.route-ask .ai-view .home-dash-grid .home-dash-eyebrow,
  html body.route-ask .ai-view .home-dash-grid .home-dash-title,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-eyebrow,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-value,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-unit,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-ticker,
  html body.route-ask .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-head,
  html body.route-ask .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-kpi,
  html body.route-ask .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-unit {
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body.route-ask .ai-view .home-dash-grid .home-dash-kpi,
  html body.route-ask .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-kpi {
    flex-wrap: wrap !important;
    gap: 0.12rem 0.4rem !important;
    min-width: 0 !important;
  }
  html body.route-ask .ai-view .home-dash-grid .home-dash-unit,
  html body.route-ask .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-unit {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Narrow totals col: wrap TOTAL OFFICE / TOTAL D2D instead of clipping. */
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-eyebrow {
    white-space: normal !important;
    max-width: 100% !important;
    font-size: 0.55rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
  }
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-value,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip--right .home-dash-bucket-value,
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-chip:not(.home-dash-bucket-chip--right) .home-dash-bucket-value {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    margin-top: 0.12rem !important;
  }
  html body.route-ask .ai-view .home-dash-grid .home-dash-bucket-unit {
    font-size: 0.52rem !important;
    margin-top: 0.15rem !important;
    margin-bottom: 0.05rem !important;
    white-space: nowrap !important;
  }

  /* Don't clip the toggle row against the launcher edge. */
  html body.route-ask:not(.ai-has-messages) .ai-view > .home-launcher,
  html body.route-ask .ai-view #home-launcher.home-launcher {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  html body.route-ask .ai-view .home-dash-toggles,
  html body.route-ask .ai-view #home-dash-toggles {
    display: flex !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 8px 8px !important;
    margin-top: 12px !important;
  }

  /* Retention/Ops/Finance: keep toggles laid out with same chrome if shown;
     still hide visually (no compare backend) but never clip card labels. */
  html body.route-ask.kpi-active--retention .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi,
  html body.route-ask.kpi-active--operations .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi,
  html body.route-ask.kpi-active--finance .ai-view .home-dash-grid.home-dash-grid--kpi .home-dash-card--kpi {
    padding: 0.55rem 0.75rem 0.5rem !important;
  }
}

/* Thinking mark: brand P-swoosh in chrome ink — no leftover blue halo/orbit. */
html body .nx-thinking .nx-mark,
html body .nx-thinking .nx-mark-glyph,
html body .nx-thinking .nx-mark-svg {
  color: var(--chrome-ink, var(--nx-thinking-text, #D8D4D0)) !important;
  fill: currentColor !important;
}
html body .nx-thinking .nx-mark {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  overflow: hidden !important;
  flex: 0 0 24px !important;
}
html body .nx-thinking .nx-mark-svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}
html body .nx-thinking .nx-mark-halo,
html body .nx-thinking .nx-mark-orbit {
  display: none !important;
}