/* Hide the legacy static header nav by default, before global-nav.js
   even runs -- previously this only happened via a JS-added
   ".cp-global-nav-source" class inside buildNavigation() (below), which
   runs on DOMContentLoaded, well after the old nav has already painted.
   Confirmed live: the old "Work Attribution / Connect & Setup / Policy &
   Rules / Admin / Tools" header was visible for a real, catchable window
   on every page sharing this markup before JS swapped it out. Every page
   that loads this stylesheet AND has this legacy markup also loads
   global-nav.js (verified: the only pages loading this CSS without the
   JS -- agent-profile.html, business-profile.html, connector-manager.html,
   work-item-profile.html -- use a plain back-link header with none of
   these classes at all), so hiding them unconditionally here is safe.
   The ".cp-global-nav-unavailable" fallback below is a safety net for the
   rare case the JS can't find a header to attach to. */
header.header .header-nav-link,
.exec-header .header-nav-link,
.wa-header .header-nav-link,
header.header .header-status,
.exec-header .header-status,
.wa-header .header-status,
header.header .header-sub,
.exec-header .header-sub,
.wa-header .header-sub {
  display: none;
}

.cp-global-nav-unavailable .header-nav-link,
.cp-global-nav-unavailable .header-status,
.cp-global-nav-unavailable .header-sub {
  display: revert !important;
}

.cp-global-nav {
  align-items: center;
  display: flex;
  gap: 4px;
  margin-left: auto;
  min-width: 0;
}

.cp-global-nav a,
.cp-global-nav button {
  box-sizing: border-box;
  font: inherit;
}

.cp-global-nav__primary,
.cp-global-nav__utilities {
  align-items: center;
  display: flex;
  gap: 2px;
}

.cp-global-nav__utilities {
  border-left: 1px solid var(--border);
  margin-left: 5px;
  padding-left: 7px;
}

.cp-workspace-switcher {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-flex;
  min-height: 32px;
  overflow: hidden;
}

.cp-workspace-switcher__label {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  padding-left: 8px;
  text-transform: uppercase;
}

.cp-workspace-switcher select {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  min-height: 30px;
  max-width: 140px;
  padding: 0 6px;
}

.cp-workspace-switcher select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cp-global-nav__link,
.cp-global-nav__trigger,
.cp-global-nav__ask,
.cp-global-nav__help,
.cp-global-nav__status {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 650;
  gap: 5px;
  line-height: 1;
  min-height: 32px;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
}

.cp-global-nav__link:hover,
.cp-global-nav__trigger:hover,
.cp-global-nav__ask:hover,
.cp-global-nav__help:hover,
.cp-global-nav__status:hover,
.cp-global-nav__link.active,
.cp-global-nav__trigger.active,
.cp-global-nav__trigger[aria-expanded="true"] {
  background: rgba(88, 166, 255, .09);
  color: var(--text-primary);
}

.cp-global-nav__attention-dot {
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e5484d; border: 1.5px solid var(--bg-panel, #0d1117);
}

.cp-global-nav__ask {
  position: relative;
  align-items: center;
  background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
  border-radius: 6px;
  color: var(--text-primary, #e8eef7);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 750;
  min-height: 32px;
  padding: 0 10px;
}

.cp-global-nav__link.active,
.cp-global-nav__trigger.active {
  box-shadow: inset 0 -2px 0 var(--accent);
  color: var(--accent);
}

.cp-global-nav__dropdown {
  position: relative;
}

.cp-global-nav__trigger::after {
  content: "⌄";
  font-size: 10px;
  margin-left: 2px;
}

.cp-global-nav__menu {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
  display: none;
  min-width: 210px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 1000;
}

.cp-global-nav__dropdown.open .cp-global-nav__menu {
  display: block;
}

.cp-global-nav__menu-label {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 5px 9px 6px;
  text-transform: uppercase;
}

.cp-global-nav__menu a {
  align-items: center;
  border-radius: 5px;
  color: var(--text-muted);
  display: flex;
  font-size: 11px;
  font-weight: 600;
  justify-content: space-between;
  padding: 8px 9px;
  text-decoration: none;
}

.cp-global-nav__menu a:hover,
.cp-global-nav__menu a.active {
  background: rgba(88, 166, 255, .09);
  color: var(--text-primary);
}

.cp-global-nav__menu a.active::after {
  color: var(--accent);
  content: "●";
  font-size: 7px;
}

.cp-global-nav__status {
  color: var(--text-muted);
  padding-inline: 7px;
}

.cp-global-nav__status-dot {
  background: var(--text-muted);
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  width: 7px;
}

.cp-global-nav__status.online .cp-global-nav__status-dot {
  background: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(63, 185, 80, .12);
}

.cp-global-nav__status.offline .cp-global-nav__status-dot {
  background: var(--accent-red);
}

.cp-global-nav__help {
  font-size: 15px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.cp-global-nav__mobile-trigger {
  display: none;
}

.cp-global-nav-source {
  display: none !important;
}

.cp-sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
}

a.agent-status-card, a.agentlake-compact-row { color: inherit; text-decoration: none; cursor: pointer; }
a.agent-status-card:hover, a.agentlake-compact-row:hover { border-color: var(--accent, #1763d6); }
a.agent-status-card:focus-visible, a.agentlake-compact-row:focus-visible { outline: 2px solid var(--accent, #1763d6); outline-offset: 3px; }
.cp-ask-backdrop {
  background: rgba(3, 8, 18, .58);
  inset: 0;
  position: fixed;
  z-index: 1998;
}

.cp-ask-drawer {
  background: var(--bg-panel, #111827);
  border-left: 1px solid var(--border, #334155);
  box-shadow: -20px 0 50px rgba(0, 0, 0, .35);
  color: var(--text-primary, #e8eef7);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  /* 100vh first as a universal fallback, 100dvh after to override it on
     browsers that actually support the dynamic-viewport unit (iOS Safari
     15.4+) -- a browser that doesn't recognize `dvh` ignores that whole
     declaration and keeps the working `vh` one, per normal CSS cascade
     behavior for an unsupported value; without this, an older mobile
     browser could resolve `height` to no value at all here, and this
     row's own minmax(0, 1fr) sizing on .cp-ask-messages below would
     collapse toward its 0 minimum -- the answer still fully present in
     the DOM, just squeezed to zero visible height, exactly matching a
     "the response disappeared and I can't view it" report from mobile
     that a modern-Chromium-only test (Playwright's iPhone emulation
     included) can't reproduce, since it never lacks dvh support itself. */
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(102%);
  transition: transform .2s ease;
  width: min(520px, 100vw);
  z-index: 1999;
}

.cp-ask-drawer.open {
  transform: translateX(0);
}

/* The full chat is mounted once; only its presentation changes between views. */
/* Opt-in advisor mockup layout. Never changes voice/session lifetime. */
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) {
  position: fixed; inset: auto 18px 18px auto; width: min(var(--advisor-width, 430px), calc(100vw - 36px));
  z-index: 1900; border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg-panel); box-shadow: 0 16px 50px rgb(9 33 61 / 18%);
}
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-drawer {
  position: relative; width: 100% !important; max-width: none;
  height: min(var(--advisor-height, 800px), calc(100dvh - 36px)); transform: none;
  border-radius: 18px; border: 0; box-shadow: none;
  grid-template-rows: auto auto auto minmax(80px, 1fr) auto auto auto;
}
#cpAskSurface.cp-ask-advisor .cp-ask-suggestions { grid-template-columns: 1fr; gap: 6px; }
#cpAskSurface.cp-ask-advisor .cp-ask-suggestions > button { min-height: 32px; padding: 7px 10px; border-radius: 16px; }
.cp-ask-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#cpAskSurface.cp-ask-advisor .cp-ask-quick-actions button { text-align: center; min-height: 42px; padding: 6px 3px; color: var(--accent); }
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-header { display: block; padding: 58px 16px 12px; min-height: 180px; position: relative; }
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-header > div:not(.cp-ask-advisor-titlebar):not(.cp-ask-header-actions) { min-height: 110px; padding-left: 120px; }
.cp-ask-advisor-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-advisor-titlebar { position: absolute; top: 0; left: 0; right: 0; }
#cpAskSurface.cp-ask-advisor .cp-ask-kicker { display: none; }
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-header-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) #cpAskTitle { font-size: 20px; }
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-avatar-float { position: absolute; width: 105px !important; height: 105px !important; right: auto; top: 60px !important; left: 16px !important; border-radius: 12px; box-shadow: none; }
#cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-scope-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 10px; }
#cpAskSurface.cp-ask-advisor .cp-ask-backdrop { display: none; }
#cpAskAdvisorResize { position: absolute; top: -12px; left: -12px; z-index: 5; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); color: var(--accent); cursor: nwse-resize; touch-action: none; }
#cpAskAdvisorResize { z-index: 2001; }
.cp-ask-advisor-expanded #cpAskAdvisorResize { display: none; }
@media (max-width: 500px) {
  #cpAskAdvisorResize { display: none; }
  #cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) { inset: auto 8px 8px; width: calc(100vw - 16px); }
  #cpAskSurface.cp-ask-advisor:not(.cp-ask-advisor-expanded) .cp-ask-drawer { height: calc(100dvh - 16px); }
}
.cp-ask-page { position: relative; min-width: 0; }
.cp-ask-page .cp-ask-drawer {
  position: relative; width: 100% !important; height: 740px;
  max-width: none; transform: none; box-shadow: none; border: 0;
  grid-template-rows: auto auto auto minmax(160px, 1fr) auto auto auto;
}
.cp-ask-page .cp-ask-resize-handle, .cp-ask-page .cp-ask-backdrop { display: none; }
.cp-ask-page .cp-ask-header { padding-right: 155px; min-height: 155px; }
.cp-ask-page .cp-ask-avatar-float {
  position: absolute; top: 14px !important; right: 14px; left: auto !important;
  width: 120px !important; height: 120px !important; z-index: 2000;
}
.cp-ask-page .cp-ask-close { font-size: 13px; width: auto; }
.cp-ask-page .cp-ask-header-actions { flex-wrap: wrap; }
.cp-ask-screen #cpAskSurface {
  position: fixed; inset: 0 0 0 232px; z-index: 1900;
  background: var(--bg-panel, #111827);
}
.cp-ask-screen #cpAskSurface .cp-ask-drawer,
#cpAskScreenMount .cp-ask-drawer { height: 100vh; height: 100dvh; }
.cp-ask-screen #cpAskClose { display: inline-flex; }
body:not(.cp-ask-screen) #cpAskInlineMount #cpAskClose { display: none; }
/* Home is a page, not a full-height chat screen. Keep its composer near
   the introduction and scroll long conversations inside the message area. */
body:not(.cp-ask-screen) #cpAskInlineMount #cpAskSurface:not(.cp-ask-advisor) .cp-ask-drawer {
  height: auto;
  grid-template-rows: auto auto auto auto auto auto auto;
}
body:not(.cp-ask-screen) #cpAskInlineMount #cpAskSurface:not(.cp-ask-advisor) .cp-ask-messages {
  min-height: 0;
  max-height: 280px;
}
body:not(.cp-ask-screen) #cpAskInlineMount #cpAskSurface:not(.cp-ask-advisor) .cp-ask-messages:has(.cp-ask-message) {
  max-height: clamp(360px, 55vh, 640px);
}
body:not(.cp-ask-screen) #cpAskInlineMount #cpAskSurface:not(.cp-ask-advisor) .cp-ask-header {
  min-height: 120px;
}
.cp-ask-embedded #cpLeftNavMount { display: none; }
.cp-ask-embedded body { margin: 0; }
.cp-ask-embedded .cp-ask-page .cp-ask-header {
  min-height: 132px;
  padding: 16px 155px 12px 20px;
}
.cp-ask-embedded .cp-ask-messages { min-height: 80px; }
@media (max-width: 900px) {
  .cp-ask-screen #cpAskSurface { left: 0; }
  .cp-ask-page .cp-ask-header { display: block; }
}

.cp-ask-drawer.cp-ask-resizing {
  transition: none;
}

.cp-ask-resize-handle {
  cursor: col-resize;
  height: 100%;
  left: -5px;
  position: absolute;
  top: 0;
  touch-action: none;
  width: 10px;
  z-index: 1;
}

.cp-ask-resize-handle::before {
  background: var(--border, #334155);
  content: "";
  height: 100%;
  left: 4px;
  position: absolute;
  top: 0;
  transition: background .15s ease;
  width: 2px;
}

.cp-ask-resize-handle:hover::before,
.cp-ask-drawer.cp-ask-resizing .cp-ask-resize-handle::before {
  background: var(--accent, #6366f1);
}

.cp-ask-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--border, #334155);
  display: flex;
  justify-content: space-between;
  padding: 22px 24px 18px;
}

.cp-ask-header h2 {
  font-size: 23px;
  margin: 3px 0 5px;
}

.cp-ask-header p,
.cp-ask-footer,
.cp-ask-welcome span,
.cp-ask-evidence span,
.cp-ask-answer small {
  color: var(--text-muted, #9aa7b8);
}

.cp-ask-header p {
  font-size: 13px;
  margin: 0;
}

.cp-ask-header-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

/* ── Ask CostPilot floating avatar ────────────────────────────────────────
   A detached, draggable panel -- separate from the drawer itself, floats
   over the whole page (picture-in-picture style) so it has room to
   actually read as "speaking" instead of living cramped in a 40px header
   icon. Visible only while the drawer is open (see openAskCostPilot/
   closeAskCostPilot); position persists per browser via localStorage (see
   initAskAvatarFloatDrag). States mirror real state already tracked in
   global-nav.js (recording, the thinking-cycle poll, TTS playback), driven
   entirely off #cpAskAvatarFloat's [data-state] attribute via
   setAskAvatarState(). Ring color alone carries the state under reduced
   motion; the animations below are additive polish, never the only
   signal. */
.cp-ask-avatar-float {
  border-radius: 22px;
  cursor: pointer;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  height: 320px;
  position: fixed;
  touch-action: none;
  width: 320px;
  z-index: 2100;
}
.cp-ask-avatar-float[hidden] { display: none; }
.cp-ask-avatar-float-dragging {
  cursor: grabbing;
  transition: none !important;
}
.cp-ask-avatar-float-dragging .cp-ask-avatar-img { animation: none !important; }

.cp-ask-avatar-img {
  border-radius: 22px;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform .2s ease, filter .2s ease;
  width: 100%;
}

.cp-ask-avatar-ring {
  border: 3px solid var(--border, #334155);
  border-radius: 26px;
  box-sizing: border-box;
  display: block;
  inset: -5px;
  pointer-events: none;
  position: absolute;
  transition: border-color .25s ease;
}

/* Ring/glow colors use theme tokens; this app has no light theme today
   (confirmed: no data-theme/prefers-color-scheme rules exist anywhere in
   this codebase) -- var() with a dark-mode fallback is future-proofing,
   not something currently exercised. */

/* State is now shown ONLY via the ring color + a couple of subtle,
   glow-only effects on the float container -- never a transform/filter
   animation on .cp-ask-avatar-img itself. That img-targeting motion
   (sway/breathe/tilt/talk-pulse) was designed for a static portrait that
   needed fake life; now .cp-ask-avatar-img is a real Simli video with
   its own real motion, and stacking a CSS transform loop on top of that
   reads as distracting throbbing/jitter rather than character, per
   direct live feedback removing it. The window itself stays still. */

/* listening -- ring pulses blue */
.cp-ask-avatar-float[data-state="listening"] .cp-ask-avatar-ring {
  border-color: var(--accent, #60a5fa);
}

/* thinking -- ring pulses amber */
.cp-ask-avatar-float[data-state="thinking"] .cp-ask-avatar-ring {
  border-color: var(--accent-yellow, #d29922);
}

/* speaking -- ring turns green, no motion */
.cp-ask-avatar-float[data-state="speaking"] .cp-ask-avatar-ring {
  border-color: var(--accent-green, #3fb950);
}

/* Live video call in progress / connecting -- independent of the
   idle/listening/thinking/speaking states above (which still drive the
   ring color moment-to-moment once connected), this is the coarser
   "is a call even happening" signal: a steady accent border while
   dialing, a small red dot once live, so the avatar reads as "tap to
   end" at a glance instead of "tap to start" again. Explicitly no
   animation anywhere here -- per direct feedback, the window stays
   still; only the ring color changes. */
.cp-ask-avatar-connecting { cursor: wait; }
.cp-ask-avatar-connecting .cp-ask-avatar-ring {
  border-color: var(--accent, #60a5fa);
}
.cp-ask-avatar-live::after {
  content: "";
  position: absolute; top: 10px; right: 10px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #e5484d; border: 2px solid rgba(0,0,0,.5);
}

/* The poster matches the configured Zahra live face. Keep the call-entry
   label below the face, without changing video playback or call handling. */
video#cpAskAvatarVideo,
video#avatarVideo {
  background: var(--bg-panel, #161b22);
}
.cp-ask-avatar-float:not(.cp-ask-avatar-live):not(.cp-ask-avatar-connecting)::before {
  content: "Tap to talk live";
  position: absolute; inset: auto 0 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 7px 4px; box-sizing: border-box;
  background: rgb(9 33 61 / 88%); border-radius: 0 0 16px 16px;
  color: #fff; font-size: 11px; font-weight: 600;
  pointer-events: none;
}

/* Same "don't leave a blank black rectangle" reasoning as the idle state
   above, for the live-but-no-video-track case (Simli outage/rate-limit --
   see onVideoUnavailable in global-nav.js). Confirmed live 2026-09-22:
   the chat-log notice alone wasn't enough -- a person watching the
   floating window itself read the still-black box as the call having
   crashed. Only applies once actually live; the connecting spinner
   still owns the box until then. */
.cp-ask-avatar-float.cp-ask-avatar-live.cp-ask-avatar-audio-only::before {
  content: "🔊 Voice only — video unavailable";
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; box-sizing: border-box;
  color: var(--text-muted, #9aa7b8); font-size: 13px; font-weight: 600;
  pointer-events: none;
}

@keyframes cp-ask-avatar-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-1.2deg); }
}

@keyframes cp-ask-avatar-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(.94); }
}

@keyframes cp-ask-avatar-listen-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--accent, #60a5fa) 45%, transparent)); }
  50%      { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent, #60a5fa) 45%, transparent)); }
}

@keyframes cp-ask-avatar-speak-glow {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-green, #3fb950) 55%, transparent)); }
  50%      { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent-green, #3fb950) 65%, transparent)); }
}

@keyframes cp-ask-avatar-tilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-5deg); }
}

@keyframes cp-ask-avatar-talk-pulse {
  0%, 100%  { transform: scale(1) rotate(0deg); filter: brightness(1); }
  45%       { transform: scale(1.09) rotate(-1deg); filter: brightness(1.14); }
  70%       { transform: scale(1.05) rotate(1deg); filter: brightness(1.1); }
}

/* Reduced motion: every animation is stripped, but ring color (the state
   signal) is untouched, so the state is still readable at a glance. */
@media (prefers-reduced-motion: reduce) {
  .cp-ask-avatar-float[data-state],
  .cp-ask-avatar-float[data-state] .cp-ask-avatar-img {
    animation: none;
  }
}

@media (max-width: 560px) {
  .cp-ask-avatar-float { height: 200px; width: 200px; }
}

.cp-ask-clear {
  background: transparent;
  border: 1px solid var(--border, #334155);
  border-radius: 999px;
  color: var(--text-muted, #9aa7b8);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  padding: 7px 10px;
}

.cp-ask-clear:hover,
.cp-ask-clear:focus-visible {
  border-color: var(--accent, #60a5fa);
  color: var(--text-primary, #e5edf7);
}

.cp-ask-mute {
  background: transparent;
  border: 1px solid var(--border, #334155);
  border-radius: 999px;
  color: var(--text-muted, #9aa7b8);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  padding: 7px 10px;
}
.cp-ask-mute:hover,
.cp-ask-mute:focus-visible {
  border-color: var(--accent, #60a5fa);
  color: var(--text-primary, #e5edf7);
}
.cp-ask-mute-active {
  background: rgba(208,59,59,0.12);
  border-color: rgba(208,59,59,0.4);
  color: #fca5a5;
}

#cpAskLiveToggle.live {
  background: rgba(208,59,59,0.12);
  border-color: rgba(208,59,59,0.4);
  color: #fca5a5;
}
#cpAskLiveToggle:disabled { opacity: 0.5; cursor: default; }

.cp-ask-kicker {
  color: var(--accent, #60a5fa);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cp-ask-close {
  background: transparent;
  border: 1px solid var(--border, #334155);
  border-radius: 7px;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  height: 36px;
  line-height: 1;
  width: 36px;
}

.cp-ask-suggestions[hidden] { display: block !important; height: 0; min-height: 0; padding: 0 !important; margin: 0; }
#cpAskExplore { grid-column: 1 / -1; justify-self: start; background: transparent; color: var(--accent, #1763d6); border: 0; padding: 2px 0; font: inherit; font-size: 13px; cursor: pointer; }
.cp-question-picker { box-sizing: border-box; position: fixed; inset: auto 18px 18px auto; width: min(480px, calc(100vw - 32px)); max-height: min(820px, calc(100dvh - 36px)); margin: 0; overflow: auto; padding: 20px; border: 1px solid #cbdcf5; border-radius: 18px; background: #f5f9ff; color: #102344; box-shadow: 0 18px 60px #09213d33; font: 14px system-ui, sans-serif; }
.cp-question-picker { z-index: 2001; width: 420px; }
.cp-question-picker:not([open]) { display: none; }
.cp-question-reserved .cp-ask-drawer { margin-left: min(430px, 42%); width: calc(100% - min(430px, 42%)) !important; }
.cp-question-picker.cp-question-docked { position: absolute; inset: 8px auto 8px 8px; width: calc(min(430px, 42%) - 16px); max-height: calc(100% - 16px); }
.cp-question-collapsed > :not(header) { display: none !important; }
.cp-question-picker.cp-question-inline { position: relative; inset: auto !important; width: auto; margin: 0 12px 8px; padding: 12px; max-height: 220px; min-height: 64px; }
.cp-question-inline header { position: sticky; top: -12px; background: #f5f9ff; z-index: 1; }
.cp-question-inline h2 { font-size: 16px; }
.cp-ask-page .cp-ask-drawer.cp-question-mobile, .cp-ask-drawer.cp-question-mobile {
  grid-template-rows: auto auto 0 auto minmax(80px, 1fr) auto auto auto;
}
.cp-question-mobile > #cpAskMessages { grid-row: 5; min-height: 80px; }
.cp-question-mobile > #cpAskVoiceStatus { grid-row: 6; }
.cp-question-mobile > #cpAskForm { grid-row: 7; }
.cp-question-mobile > .cp-ask-footer { grid-row: 8; }
.cp-question-mobile > .cp-question-inline { grid-row: 4; max-height: 180px; }
.cp-question-picker header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.cp-question-picker h2 { margin: 0; font-size: 21px; }
.cp-question-picker p { line-height: 1.45; }
.cp-question-picker label { display: grid; gap: 6px; margin: 12px 0; }
.cp-question-picker input, .cp-question-picker select, .cp-question-picker textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #cbdcf5; border-radius: 8px; background: white; color: #102344; font: inherit; }
.cp-question-picker button { font: inherit; cursor: pointer; border: 1px solid #cbdcf5; border-radius: 8px; padding: 10px 12px; background: white; color: #174b9c; }
.cp-question-picker :focus-visible { outline: 2px solid #1763d6; outline-offset: 2px; }
.cp-question-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-question-note, #cpQuestionEditor p { color: #526582; font-size: 12px; }
.cp-question-results { max-height: 280px; overflow: auto; display: grid; gap: 8px; }
.cp-question-results button { text-align: left; display: grid; gap: 6px; }
.cp-question-results small { color: #526582; }
#cpQuestionEditor { border-top: 1px solid #cbdcf5; margin-top: 16px; }
#cpQuestionUse { background: #1763d6; color: white; }
@media (max-width: 600px) {
  .cp-question-picker { left: 8px !important; right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
}
.cp-ask-suggestions.cp-ask-suggestions-collapsed {
  /* Keep its grid row without leaving invisible buttons keyboard-focusable. */
  visibility: hidden;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.cp-ask-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 20px;
}
.cp-ask-scope-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 14px 20px 0;
  overflow: hidden;
  background: var(--border, #334155);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
}
.cp-ask-scope-summary > span {
  min-width: 0;
  padding: 9px 10px;
  background: var(--bg-base, #0d1117);
}
.cp-ask-scope-summary b,
.cp-ask-scope-summary strong { display: block; }
.cp-ask-scope-summary b {
  color: var(--text-muted, #9aa7b8);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cp-ask-scope-summary strong {
  overflow: hidden;
  margin-top: 3px;
  color: var(--text-primary, #e6edf3);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-ask-suggestions button {
  background: var(--bg-card, #182231);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
  min-height: 54px;
  padding: 10px 11px;
  text-align: left;
}

.cp-ask-suggestions button:hover,
.cp-ask-suggestions button:focus-visible {
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, var(--bg-card, #182231));
  border-color: var(--accent, #60a5fa);
}

.cp-ask-messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 8px 20px 20px;
  /* Belt-and-suspenders alongside the height fallback above -- this row
     sizes via the drawer's own minmax(0, 1fr) grid track, so it can only
     ever be as tall as the drawer resolves to. A real minimum keeps an
     actual answer from ever rendering at literally zero visible height,
     regardless of what the parent's height calculation does. */
  min-height: 120px;
}

.cp-ask-welcome {
  align-items: flex-start;
  border: 1px dashed var(--border, #334155);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
}

.cp-ask-message.user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent, #3b82f6) 18%, var(--bg-card, #182231));
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
  border-radius: 12px 12px 3px 12px;
  max-width: 84%;
  padding: 10px 13px;
}

.cp-ask-message.user p,
.cp-ask-answer p {
  margin: 0;
}

.cp-ask-answer {
  background: var(--bg-card, #182231);
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  padding: 16px;
}

/* "Show that as a chart" inline reply -- a plain image (askReportChartImg
   already rasterizes to a data-URL PNG, same as the report-preview flow),
   just wrapped in the chat's own card chrome so it reads as an assistant
   message, not a stray image. */
.cp-ask-inline-chart {
  background: var(--bg-card, #182231);
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  padding: 10px;
}
.cp-ask-inline-chart img {
  background: #fff; /* charts render on a white ground regardless of app theme -- see askReportChartImg's own comment */
  border-radius: 6px;
  display: block;
  max-width: 100%;
}

.cp-ask-answer-head {
  align-items: center;
  display: flex;
  font-size: 9px;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cp-ask-answer-head span { color: var(--text-muted, #9aa7b8); }
.cp-ask-answer-head b { color: var(--accent-green, #45c486); }
.cp-ask-answer-head b.clarification { color: var(--accent-yellow, #d29922); }
.cp-ask-report-btn {
  margin: 6px 0 0;
  padding: 5px 9px;
  color: var(--text-muted, #9aa7b8);
  background: transparent;
  border: 1px solid var(--border, #2c3b4d);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.cp-ask-report-btn:hover { color: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); }
.printing .cp-ask-report-btn { display: none; }
.cp-ask-briefing-btn {
  margin-left: 6px;
  color: #fff;
  background: var(--accent, #2f6fed);
  border-color: var(--accent, #2f6fed);
}
.cp-ask-briefing-btn:hover { color: #fff; background: #2559c4; border-color: #2559c4; }
.cp-ask-answer-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 9px 0 11px;
}
.cp-ask-answer-scope span {
  padding: 8px;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-panel, #161b22);
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  font-size: 9px;
}
.cp-ask-answer-scope b {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted, #9aa7b8);
  font-size: 8px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cp-ask-answer h3 { font-size: 17px; margin: 8px 0; }
.cp-ask-answer-body { font-size: 13px; line-height: 1.55; }
.cp-ask-answer-body p { margin: 8px 0; }
.cp-ask-answer-body p:first-child { margin-top: 0; }
.cp-ask-answer-body h3, .cp-ask-answer-body h4, .cp-ask-answer-body h5, .cp-ask-answer-body h6 {
  margin: 16px 0 8px;
  color: var(--text-primary, #e6edf3);
}
.cp-ask-answer-body ul, .cp-ask-answer-body ol { margin: 8px 0; padding-left: 20px; }
.cp-ask-answer-body li { margin: 4px 0; }
.cp-ask-answer-body code {
  padding: 1px 5px;
  color: var(--text-primary, #e6edf3);
  background: var(--bg-panel, #161b22);
  border: 1px solid var(--border, #334155);
  border-radius: 4px;
  font-size: .9em;
}
.ask-markdown-table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  font-size: 12px;
}
.ask-markdown-table th, .ask-markdown-table td {
  padding: 7px 10px;
  border: 1px solid var(--border, #334155);
  text-align: left;
}
.ask-markdown-table th {
  color: var(--text-muted, #9aa7b8);
  background: var(--bg-panel, #161b22);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ask-workspace-label {
  margin-bottom: 10px;
  padding: 6px 10px;
  display: inline-block;
  color: var(--text-muted, #9aa7b8);
  background: var(--bg-panel, #161b22);
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}
.ask-workspace-label strong { color: var(--text-primary, #e6edf3); }
.ask-budget-flag {
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(69,196,134,.10);
  color: var(--accent-green, #45c486);
  border: 1px solid rgba(69,196,134,.28);
}
.ask-budget-flag.severity-warning {
  background: rgba(210,153,34,.10);
  color: var(--accent-yellow, #d29922);
  border-color: rgba(210,153,34,.28);
}
.ask-budget-flag.severity-critical {
  background: rgba(248,81,73,.10);
  color: var(--accent-red, #f85149);
  border-color: rgba(248,81,73,.28);
}
.cp-ask-answer section { border-top: 1px solid var(--border, #334155); margin-top: 14px; padding-top: 12px; }
.cp-ask-answer h4 { color: var(--text-muted, #9aa7b8); font-size: 10px; letter-spacing: .1em; margin: 0 0 8px; text-transform: uppercase; }

.cp-ask-evidence {
  align-items: center;
  border: 1px solid var(--border, #334155);
  border-radius: 7px;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-top: 6px;
  padding: 9px 10px;
}

.cp-ask-evidence > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cp-ask-evidence > div:last-child { align-items: flex-end; }

button.cp-ask-evidence {
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}
button.cp-ask-evidence:hover,
button.cp-ask-evidence:focus-visible {
  border-color: var(--accent, #60a5fa);
  background: color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent);
}
.cp-ask-evidence button {
  background: transparent;
  border: 0;
  color: var(--accent, #60a5fa);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 0 0;
}

.cp-ask-calculation,
.cp-ask-error {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 3px;
  margin: 12px 0;
}
.cp-ask-supporting {
  width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  color: var(--accent, #58a6ff);
  background: rgba(88,166,255,.06);
  border: 1px solid rgba(88,166,255,.24);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
}
.cp-ask-followups { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-ask-followups button {
  padding: 6px 8px;
  color: var(--accent, #58a6ff);
  background: transparent;
  border: 1px solid rgba(88,166,255,.28);
  border-radius: 999px;
  cursor: pointer;
  font-size: 9px;
}
.cp-ask-error small { display: block; margin-top: 6px; }

@media (max-width: 560px) {
  .cp-ask-scope-summary,
  .cp-ask-answer-scope { grid-template-columns: 1fr; }
  .cp-ask-suggestions { grid-template-columns: 1fr; }
}

.cp-ask-error {
  background: rgba(220, 38, 38, .1);
  border-left: 3px solid #dc2626;
  border-radius: 6px;
  padding: 12px;
}

.cp-ask-thinking {
  color: var(--text-muted, #9aa7b8);
  font-size: 12px;
  padding: 12px;
}

.cp-ask-composer {
  border-top: 1px solid var(--border, #334155);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 20px 8px;
}

.cp-ask-composer textarea {
  background: var(--bg-main, #0b1220);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  color: inherit;
  font: inherit;
  line-height: 1.4;
  max-height: 130px;
  padding: 10px 12px;
  resize: vertical;
}

.cp-ask-composer textarea:focus {
  border-color: var(--accent, #60a5fa);
  outline: 2px solid color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent);
}

.cp-ask-composer button {
  background: var(--accent, #3b82f6);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  min-width: 72px;
  padding: 0 15px;
}

.cp-ask-composer button:disabled { cursor: wait; opacity: .68; }

/* CostPilot Voice (Phase 1) -- mic button, listening/status row, and the
   speak/stop-speaking controls on an answer. Distinct namespace from any
   Voice Guard styling (unrelated feature) elsewhere in this app. */
.cp-ask-mic {
  background: var(--bg-main, #0b1220);
  border: 1px solid var(--border, #334155);
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  height: 38px;
  line-height: 1;
  min-width: 0;
  padding: 0;
  width: 38px;
}

.cp-ask-mic:hover { border-color: var(--accent, #60a5fa); }

.cp-ask-mic.recording {
  animation: cp-ask-mic-pulse 1.4s ease-in-out infinite;
  background: color-mix(in srgb, #ef4444 18%, var(--bg-main, #0b1220));
  border-color: #ef4444;
  color: #ef4444;
}

@keyframes cp-ask-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #ef4444 40%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, #ef4444 0%, transparent); }
}

.cp-ask-voice-status {
  color: var(--text-muted, #9aa7b8);
  font-size: 11.5px;
  padding: 0 20px 6px;
}

.cp-ask-voice-status--listening { color: var(--accent, #60a5fa); }
.cp-ask-voice-status--warn { color: #f0b429; }
.cp-ask-voice-status--error { color: #ef4444; }
.cp-ask-voice-status--ok { color: var(--text-muted, #9aa7b8); }

.cp-ask-stop-speaking {
  background: transparent;
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  margin: 0 20px 6px;
  padding: 3px 9px;
}

.cp-ask-stop-speaking:hover { border-color: var(--accent, #60a5fa); }

.cp-ask-speak-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  margin-left: 6px;
  opacity: .75;
  padding: 2px 4px;
}

.cp-ask-speak-btn:hover { opacity: 1; }
.cp-ask-speak-btn:disabled { cursor: wait; opacity: .4; }

.cp-ask-footer {
  align-items: center;
  display: flex;
  font-size: 10px;
  justify-content: space-between;
  padding: 4px 20px 14px;
}

.cp-ask-footer a {
  color: var(--accent, #60a5fa);
  font-weight: 700;
  text-decoration: none;
}

.cp-ask-active-filters,
.ask-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .75rem 0;
}

.cp-ask-active-filters strong,
.ask-active-filters strong {
  margin-right: .2rem;
  color: var(--text-muted, #8b98aa);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cp-ask-active-filters span,
.ask-active-filters span {
  padding: .25rem .5rem;
  border: 1px solid var(--border, #2c3b4d);
  border-radius: 999px;
  color: var(--text, #e7edf6);
  font-size: .75rem;
}

.cp-ask-interpretation {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: .75rem 0;
  padding: .6rem .7rem;
  border: 1px solid var(--border, #2c3b4d);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--accent, #3b82f6) 7%, transparent);
}

.cp-ask-interpretation strong {
  color: var(--accent, #60a5fa);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cp-ask-interpretation span {
  color: var(--text, #e7edf6);
  font-size: .78rem;
  line-height: 1.4;
}

.cp-ask-recommendations {
  display: grid;
  gap: .5rem;
}

.cp-ask-recommendations > div {
  display: grid;
  gap: .2rem;
  padding: .65rem;
  border: 1px solid var(--border, #2c3b4d);
  border-radius: .65rem;
}

.cp-ask-recommendations span {
  color: var(--text-muted, #8b98aa);
  line-height: 1.45;
}

.cp-ask-proposal {
  display: grid;
  gap: .4rem;
  padding: .65rem;
  border: 1px solid var(--border, #2c3b4d);
  border-radius: .65rem;
}

.cp-ask-proposal span {
  color: var(--text-muted, #8b98aa);
  line-height: 1.45;
}

.cp-ask-proposal-actions {
  display: flex;
  gap: 8px;
  margin-top: .3rem;
}

.cp-ask-proposal-actions .cp-ask-supporting {
  width: auto;
  flex: 1;
  margin-top: 0;
  text-align: center;
  /* A solid, filled CTA -- distinct from Cancel's plain outline -- so this
     is the one button on the card that reads as "the real action," not an
     equal-weight pair a user might type past instead of clicking. */
  color: #fff;
  background: var(--accent, #58a6ff);
  border-color: var(--accent, #58a6ff);
  font-size: 11px;
}

.cp-ask-proposal-actions button:not(.cp-ask-supporting) {
  flex: 1;
  padding: 9px 10px;
  color: var(--text-muted, #8b98aa);
  background: transparent;
  border: 1px solid var(--border, #2c3b4d);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .cp-global-nav__link,
  .cp-global-nav__trigger {
    padding-inline: 7px;
  }

  .cp-global-nav__status-label {
    display: none;
  }
}

@media (max-width: 860px) {
  .cp-global-nav {
    position: relative;
  }

  .cp-global-nav__mobile-trigger {
    display: inline-flex;
  }

  .cp-global-nav__primary,
  .cp-global-nav__utilities {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
    display: none;
    flex-direction: column;
    margin: 0;
    min-width: 220px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    z-index: 999;
  }

  .cp-global-nav__utilities {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: calc(100% + 207px);
  }

  .cp-global-nav.mobile-open .cp-global-nav__primary,
  .cp-global-nav.mobile-open .cp-global-nav__utilities {
    display: flex;
  }

  .cp-global-nav__link,
  .cp-global-nav__trigger,
  .cp-global-nav__ask,
  .cp-global-nav__status {
    justify-content: flex-start;
    width: 100%;
  }

  .cp-global-nav__help {
    width: 100%;
  }

  .cp-workspace-switcher {
    justify-content: space-between;
    width: 100%;
  }

  .cp-workspace-switcher select {
    max-width: none;
  }

  .cp-global-nav__menu {
    box-shadow: none;
    margin: 3px 0;
    position: static;
  }

  .cp-ask-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}