/* askbar.css — the right-hand Ask-AI panel on report pages.
   ─────────────────────────────────────────────────────────────────────────
   Layout contract: `.app` is a flex row — sidebar (nav, left), .stage
   (data, middle), .askbar (action, right). The panel mirrors the left
   sidebar's material and its collapse affordance, so the shell reads as
   one system: two rails that fold, content between them.

   Three states:
     desktop open       372px column, part of the flex row (the default)
     desktop collapsed  56px rail — avatar + a vertical "Ask AI" label
     ≤1000px            off-canvas drawer from the right (z 96), opened by
                        the bottom Ask-AI dock / the sidebar's "Ask AI"
                        sub-nav item; backdrop at z 94. Sits ABOVE the
                        dock (90) and the nav drawer (60), BELOW .modal
                        (100) and the ≤640px dropdown bottom-sheets (120)
                        — the model/section pickers in this very panel
                        become those sheets and must cover it.

   Message bubbles reuse chat-thread.css's .chat-msg/.chat-bubble family
   (that stylesheet ships on every page that includes this one), so a
   streamed answer looks the same here as on the chat page — this file
   only re-scales them for a narrow column.

   Behaviour: js/askbar.js. Markup: partials/askbar.html. */

.askbar {
  position: relative;
  /* Same layer as the sidebar: above .center (z 3) so the panel's own
     popovers/menus never paint under page cards. */
  z-index: 40;
  flex-shrink: 0;
  width: 372px;
  display: flex;
  flex-direction: column;
  /* Mirror of the sidebar's material: faint top-down luminance lift over a
     violet near-black that is lightest at the OUTER (right) edge and fades
     into the page background where it meets the content. */
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.018) 0%, rgba(var(--wash-rgb), 0) 60%, rgba(0, 0, 0, 0.06) 100%),
    linear-gradient(to left, #0c0c13, var(--bg));
  border-left: 1px solid rgba(var(--wash-rgb), 0.04);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.04),
    inset 1px 0 0 rgba(var(--wash-rgb), 0.015);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.askbar.collapsed { width: 56px; }

/* Edge toggle — the sidebar-toggle's mirror image, on the LEFT edge. The
   chevron points right (= fold the panel away to the right); collapsed
   rotates it to point back in. */
.askbar-toggle {
  position: absolute;
  top: 50%;
  left: -12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1c1c20, #141417);
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  z-index: 4;
  opacity: 0.5;
  transform: translateY(-50%);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
  transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.askbar-toggle:hover { color: var(--text); border-color: rgba(var(--wash-rgb), 0.18); opacity: 1; }
.askbar-toggle svg { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.askbar.collapsed .askbar-toggle svg { transform: rotate(180deg); }

/* ── Head ─────────────────────────────────────────────────────── */
.askbar-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.askbar-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(var(--wash-rgb), 0.1);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.25);
}
.askbar-head-text { flex: 1 1 auto; min-width: 0; }
.askbar-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.askbar-sub {
  font-size: 11.5px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.askbar-headbtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.askbar-headbtn:hover {
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.05);
  border-color: var(--line);
}
/* The drawer close (×) exists only where the panel IS a drawer. */
.askbar-close { display: none; }

/* ── Collapsed rail (desktop) ─────────────────────────────────── */
.askbar-rail {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.askbar.collapsed .askbar-rail { display: flex; }
.askbar.collapsed .askbar-head,
.askbar.collapsed .askbar-body { display: none; }
.askbar-rail-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(var(--wash-rgb), 0.1);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.25);
  transition: box-shadow 0.18s ease;
}
.askbar-rail:hover .askbar-rail-avatar { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.42); }
.askbar-rail-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.15s ease;
}
.askbar-rail:hover .askbar-rail-label { color: var(--text); }

/* ── Body: tools strip + main column ──────────────────────────── */
.askbar-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.askbar-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Quick-tools strip — a 46px rail on the panel's inner-left edge. Icon-only;
   the label lives in data-tip (instant tooltip). Sits a step darker than the
   chat column so it reads as chrome, not content. */
.askbar-tools {
  flex: 0 0 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.14);
}
.askbar-tool {
  position: relative; /* anchors the status dot */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.askbar-tool:hover {
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.05);
  border-color: var(--line);
}
.askbar-tool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Active = this tool's tab view is showing in the panel. Fill + border +
   an accent edge on the left — state never rides on color alone. */
.askbar-tool.is-active {
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.07);
  border-color: var(--line-strong);
  box-shadow: inset 2px 0 0 var(--accent);
}
/* Agent status dot: green = working in the background, gold = needs
   attention. Same ring language as the sidebar's source strip. */
.askbar-tool-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.45);
}
.askbar-tool-dot.is-running { background: var(--accent-bright); }
.askbar-tool-dot.is-attention { background: var(--gold); }

/* ── Thread ───────────────────────────────────────────────────── */
.askbar-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 14px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wash-rgb), 0.14) transparent;
}
.askbar-thread::-webkit-scrollbar { width: 5px; }
.askbar-thread::-webkit-scrollbar-thumb {
  background: rgba(var(--wash-rgb), 0.14);
  border-radius: 4px;
}
.askbar-thread-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Narrow-column re-scale of the shared chat bubbles. */
.askbar .chat-msg { gap: 8px; }
.askbar .chat-msg.ai .chat-bubble {
  max-width: 100%;
  font-size: 13px;
  padding: 10px 12px;
}
.askbar .chat-msg.user .chat-bubble {
  max-width: 90%;
  font-size: 13px;
  padding: 9px 12px;
}
.askbar .chat-avatar { width: 24px; height: 24px; }
/* GFM tables: at 372px, width:100% (chat-thread.css) crushes every column
   to a word a line. Let the table take its natural width and scroll inside
   .md-table instead; prose-heavy cells still wrap at a readable measure. */
.askbar .chat-bubble table { width: max-content; min-width: 100%; }
.askbar .chat-bubble th,
.askbar .chat-bubble td { max-width: 220px; }

/* Suggestion pills: let the capsule grow instead of spilling.
   .sug-btn (css/chat-thread.css) is a hard height:30px with no white-space
   rule, so a label wider than the column wraps to two lines INSIDE a
   fixed-height capsule and overflows it. The wrap-tolerant rule there is a
   viewport media query, so on a desktop it never reaches this 372px panel —
   the one place the column is narrow. Scoped to .askbar so the full chat
   page keeps its single-line pills. */
.askbar .sug-btn {
  height: auto;
  min-height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  align-items: center;
  text-align: left;
}

/* ── Empty state ──────────────────────────────────────────────── */
.askbar-empty { padding: 10px 4px; }
.askbar-empty[hidden] { display: none; }
.askbar-empty-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.askbar-empty-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.askbar-suggests {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.askbar-suggest {
  display: block;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.askbar-suggest:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(var(--wash-rgb), 0.05);
}
/* The one emphasized starter (e.g. "Set up an agent for me" on /agents/,
   where it replaced a header button). Accent as ink + faint fill — reads
   as the lead suggestion without competing with the page's primary CTA. */
.askbar-suggest--primary {
  color: var(--accent-text);
  font-weight: 600;
  background: var(--accent-faint);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.askbar-suggest--primary:hover {
  color: var(--accent-text);
  background: rgba(var(--accent-rgb), 0.22);
  border-color: rgba(var(--accent-rgb), 0.45);
}

/* ── Composer ─────────────────────────────────────────────────── */
.askbar-composer {
  flex-shrink: 0;
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.12);
}
.askbar-composer .aip-status { margin: 0 0 8px; }
.askbar-inputrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.askbar-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.askbar-input::placeholder { color: var(--muted-3); }
.askbar-input:focus {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
/* Attach + mic — quiet ghost buttons leading the tool row UNDER the input
   (the input row itself is just input + send, so it never cramps at panel
   or drawer widths). Sized to sit flush with the chips beside them; a
   hairline border keeps them discoverable next to the bordered chips. */
.askbar-iconbtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;   /* matches the 24px chips beside it — one clean line */
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.askbar-iconbtn:hover {
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.05);
  border-color: var(--line);
}
.askbar-iconbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Live mic — recording-red is the one convention nobody misreads. */
.askbar-iconbtn.is-listening {
  color: var(--danger);
  border-color: rgba(255, 122, 122, 0.4);
  animation: askbar-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes askbar-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 122, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(255, 122, 122, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .askbar-iconbtn.is-listening { animation: none; }
}

/* ── Attachment chips (pending, above the input) ─────────────── */
.askbar-atts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.askbar-atts[hidden] { display: none; }
.askbar-att {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--wash-rgb), 0.04);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  color: var(--muted);
  font-size: 12px;
}
.askbar-att.is-img { padding: 3px; }
.askbar-att img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 7px;
}
.askbar-att-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.askbar-att.is-img .askbar-att-name { display: none; }
.askbar-att-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted-2);
  cursor: pointer;
}
.askbar-att.is-img .askbar-att-x {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
}
.askbar-att-x:hover { color: var(--text); }
.askbar-att-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Uploading = dimmed content + a small spinner where the × will be. */
.askbar-att-spin { display: none; }
.askbar-att.is-uploading img,
.askbar-att.is-uploading .askbar-att-name { opacity: 0.45; }
.askbar-att.is-uploading .askbar-att-x { display: none; }
.askbar-att.is-uploading .askbar-att-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--wash-rgb), 0.18);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: askbar-att-spin 0.7s linear infinite;
}
@keyframes askbar-att-spin { to { transform: rotate(360deg); } }

/* ── Recording bar — swaps in for the input row while listening ── */
.askbar-composer.is-recording .askbar-inputrow,
.askbar-composer.is-recording .askbar-atts,
.askbar-composer.is-recording .askbar-chips { display: none; }
.askbar-recbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 122, 122, 0.35);
  border-radius: var(--r-input);
  background: rgba(255, 122, 122, 0.07);
}
.askbar-recbar[hidden] { display: none; }
.askbar-rec-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  animation: askbar-rec-blink 1.2s ease-in-out infinite;
}
@keyframes askbar-rec-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.askbar-rec-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.askbar-rec-wave {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
  min-width: 0;
  overflow: hidden;
}
.askbar-rec-wave i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--danger);
  opacity: 0.8;
  transform-origin: center;
  animation: askbar-rec-wave 1.1s ease-in-out infinite;
}
.askbar-rec-wave i:nth-child(1) { animation-delay: 0s; }
.askbar-rec-wave i:nth-child(2) { animation-delay: 0.15s; }
.askbar-rec-wave i:nth-child(3) { animation-delay: 0.3s; }
.askbar-rec-wave i:nth-child(4) { animation-delay: 0.45s; }
.askbar-rec-wave i:nth-child(5) { animation-delay: 0.6s; }
.askbar-rec-wave i:nth-child(6) { animation-delay: 0.75s; }
.askbar-rec-wave i:nth-child(7) { animation-delay: 0.9s; }
@keyframes askbar-rec-wave {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}
.askbar-rec-time {
  flex-shrink: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.askbar-rec-stop {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--danger);
  border: none;
  border-radius: 9px;
  color: #1a0f0f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.askbar-rec-stop:hover { filter: brightness(1.08); }
.askbar-rec-stop:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .askbar-rec-dot,
  .askbar-rec-wave i,
  .askbar-att-spin { animation: none; }
}

/* ── Voice mode (js/askbar-voice.js) ──────────────────────────── */
/* .is-voice swaps the composer's input row for the voicebar: a status
   line, the live "heard" transcript, and one big talk orb between two
   quiet side buttons (type instead / spoken replies). The thread above
   stays visible — the spoken answer is also the streamed, readable one.
   State rides on [data-state]: idle | listening | thinking | speaking. */
.askbar-composer.is-voice .askbar-inputrow,
.askbar-composer.is-voice .askbar-atts,
.askbar-composer.is-voice .askbar-chips { display: none; }
.askbar-voicebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
}
.askbar-voicebar[hidden] { display: none; }
.askbar-voice-status {
  margin: 0;
  min-height: 18px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.askbar-voice-heard {
  margin: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.askbar-voice-heard[hidden] { display: none; }
/* The live wave strip — real mic amplitude while listening, synthetic
   swell while the AI speaks (drawn by js/askbar-voice.js). */
.askbar-voice-wave {
  display: block;
  width: min(300px, 88%);
  height: 40px;
}
.askbar-voice-row {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 2px 0;
}
/* Concentric rings around the orb — quiet hairlines at rest, tinted and
   breathing while listening/speaking. The stage light: a faint accent
   wash rises from the composer floor behind them. */
.askbar-composer.is-voice {
  background:
    radial-gradient(120% 95% at 50% 100%, rgba(var(--accent-rgb), 0.06), transparent 62%),
    rgba(0, 0, 0, 0.12);
}
.askbar-voice-orbwrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.askbar-voice-orbwrap::before,
.askbar-voice-orbwrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(var(--wash-rgb), 0.07);
  transition: border-color 0.3s ease;
}
.askbar-voice-orbwrap::before { inset: -14px; }
.askbar-voice-orbwrap::after { inset: -30px; border-color: rgba(var(--wash-rgb), 0.04); }
.askbar-voicebar[data-state="listening"] .askbar-voice-orbwrap::before {
  border-color: rgba(255, 122, 122, 0.4);
  animation: askbar-ring-breathe 1.4s ease-in-out infinite;
}
.askbar-voicebar[data-state="listening"] .askbar-voice-orbwrap::after {
  border-color: rgba(255, 122, 122, 0.18);
  animation: askbar-ring-breathe 1.4s ease-in-out 0.2s infinite;
}
.askbar-voicebar[data-state="speaking"] .askbar-voice-orbwrap::before {
  border-color: rgba(var(--accent-rgb), 0.45);
  animation: askbar-ring-breathe 1.6s ease-in-out infinite;
}
.askbar-voicebar[data-state="speaking"] .askbar-voice-orbwrap::after {
  border-color: rgba(var(--accent-rgb), 0.2);
  animation: askbar-ring-breathe 1.6s ease-in-out 0.25s infinite;
}
@keyframes askbar-ring-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.055); opacity: 0.55; }
}
.askbar-voice-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.askbar-voice-side:hover {
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.05);
  border-color: var(--line-strong);
}
/* Layout spacer opposite the type-instead button — keeps the orb centered. */
.askbar-voice-side.is-ghost { visibility: hidden; pointer-events: none; }
/* Read-aloud button on every finished AI answer (js/askbar-voice.js
   attachPlay): quiet icon under the message; playing swaps it to a stop
   square with the accent as ink. */
.askbar-say {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  margin-top: 8px;
  padding: 0;
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  color: var(--muted-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.askbar-say:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(var(--wash-rgb), 0.05);
}
.askbar-say:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.askbar-say .askbar-say-stop { display: none; }
.askbar-say.is-playing {
  color: var(--accent-text);
  border-color: rgba(var(--accent-rgb), 0.35);
  background: var(--accent-faint);
}
.askbar-say.is-playing .askbar-say-play { display: none; }
.askbar-say.is-playing .askbar-say-stop { display: block; }
/* Spoken replies off — the toggle reads dimmer, plus the slashed glyph. */
.askbar-voice-side[data-action="askbar-voice-mute"][aria-pressed="false"] { color: var(--muted-3); }
/* The talk orb — voice mode's one primary action, so it takes the same
   accent as the send button it stands in for. */
.askbar-voice-orb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  background: var(--accent);
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, transform 0.15s ease;
}
.askbar-voice-orb:hover { background: var(--accent-bright); }
.askbar-voice-orb:active { transform: scale(0.95); }
/* Listening — recording-red, same convention as the dictation recbar. */
.askbar-voicebar[data-state="listening"] .askbar-voice-orb {
  background: var(--danger);
  color: #1a0f0f;
  animation: askbar-orb-listen 1.4s ease-in-out infinite;
}
@keyframes askbar-orb-listen {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 0 rgba(255, 122, 122, 0.35); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 12px rgba(255, 122, 122, 0); }
}
/* Thinking — the turn is in flight; a quiet ring spins around the orb. */
.askbar-voicebar[data-state="thinking"] .askbar-voice-orb {
  background: var(--accent-strong);
  cursor: default;
}
.askbar-voicebar[data-state="thinking"] .askbar-voice-orb::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(var(--accent-rgb), 0.18);
  border-top-color: var(--accent-bright);
  border-radius: 50%;
  animation: askbar-orb-spin 0.9s linear infinite;
}
@keyframes askbar-orb-spin { to { transform: rotate(360deg); } }
/* Speaking — mic glyph swaps for an equalizer; soft accent pulse. */
.askbar-voice-eq {
  display: none;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.askbar-voice-eq i {
  width: 3.5px;
  height: 100%;
  border-radius: 2px;
  background: #fff;
  transform-origin: center;
  animation: askbar-voice-eq 1s ease-in-out infinite;
}
.askbar-voice-eq i:nth-child(1) { animation-delay: 0s; }
.askbar-voice-eq i:nth-child(2) { animation-delay: 0.2s; }
.askbar-voice-eq i:nth-child(3) { animation-delay: 0.4s; }
.askbar-voice-eq i:nth-child(4) { animation-delay: 0.6s; }
@keyframes askbar-voice-eq {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}
.askbar-voicebar[data-state="speaking"] .askbar-voice-mic { display: none; }
.askbar-voicebar[data-state="speaking"] .askbar-voice-eq { display: flex; }
.askbar-voicebar[data-state="speaking"] .askbar-voice-orb {
  animation: askbar-orb-speak 1.6s ease-in-out infinite;
}
@keyframes askbar-orb-speak {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 0 rgba(var(--accent-rgb), 0.3); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 10px rgba(var(--accent-rgb), 0); }
}
.askbar-voice-orb:focus-visible,
.askbar-voice-side:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .askbar-voicebar[data-state="listening"] .askbar-voice-orb,
  .askbar-voicebar[data-state="speaking"] .askbar-voice-orb,
  .askbar-voicebar[data-state="thinking"] .askbar-voice-orb::after,
  .askbar-voice-orbwrap::before,
  .askbar-voice-orbwrap::after,
  .askbar-voice-eq i { animation: none; }
}
/* On the phone the drawer is the whole screen — the voice stage can take
   real room: bigger orb, wider rings, roomier side buttons. */
@media (max-width: 1000px) {
  .askbar-composer.is-voice {
    padding-top: 20px;
    /* Room under the big orb so the outer ring never clips at the screen
       edge (plus the home-indicator inset on iPhone). */
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
  .askbar-composer.is-voice .askbar-voicebar { gap: 14px; padding-bottom: 6px; }
  .askbar-voice-status { font-size: 13.5px; }
  .askbar-voice-heard { font-size: 14px; }
  .askbar-voice-wave { width: min(340px, 92%); height: 48px; }
  .askbar-voice-row { gap: 38px; padding: 8px 0 4px; }
  .askbar-voice-orb { width: 86px; height: 86px; }
  .askbar-voice-mic { width: 31px; height: 31px; }
  .askbar-voice-eq { height: 28px; }
  .askbar-voice-eq i { width: 4px; }
  .askbar-voice-side { width: 44px; height: 44px; }
  .askbar-voice-orbwrap::before { inset: -17px; }
  .askbar-voice-orbwrap::after { inset: -38px; }
}

/* The panel's one primary action. */
.askbar-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--accent);
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: var(--r-control);
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(var(--wash-rgb), 0.12);
  transition: background 0.15s ease, transform 0.15s ease;
}
.askbar-send:hover { background: var(--accent-bright); }
.askbar-send:active { transform: scale(0.96); }
.askbar-send[disabled] { opacity: 0.55; cursor: default; }
.askbar-send .aip-btn-spinner { border-color: rgba(255, 255, 255, 0.4); border-top-color: #fff; }
/* One glyph at a time: arrow OR spinner. */
.askbar-send .aip-btn-spinner:not([hidden]) + .askbar-send-arrow { display: none; }

/* One tool line, never two: mic · attach · new-chat · model (· section).
   The dropdown chips shrink and ellipsize their labels instead of wrapping
   the row — at 372px the model name is the only thing with give. */
.askbar-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}
.askbar-chips .dropdown { min-width: 0; flex: 0 1 auto; }
.askbar-chips .chip {
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
}
.askbar-chips .chip .chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.askbar-chips .chip-icon { flex-shrink: 0; }
.askbar-chips .chev { flex-shrink: 0; }
.askbar-new-chat[hidden] { display: none; }

/* Menus anchored in a bottom composer must open upward, and never wider
   than the panel. chat.css's model menu already opens upward; this makes
   the section (and any future) menu match, and caps widths. The ≤640px
   bottom-sheet transform in theme.css still wins there — it's scoped to
   its own breakpoint and a higher z-index.

   RIGHT-ANCHORED, and that is the whole point. These chips live in a rail
   pinned to the right edge of the window, and `.menu`'s base rule is
   `left: 0` — so a 280–340px menu hanging off a ~60px chip grew rightward,
   straight off the side of the screen. The section menu was the worst case
   (it is the last chip in the row): every option rendered past the viewport
   edge and could not be read or clicked at all.
   Anchoring the menu's RIGHT edge to the chip's makes it grow leftward,
   back across the panel where there is room. Any future chip added to this
   row inherits the correct behaviour rather than re-discovering the bug. */
.askbar .dropdown .menu {
  top: auto;
  bottom: calc(100% + 8px);
  left: auto;
  right: 0;
  max-width: min(340px, calc(100vw - 40px));
  max-height: min(50vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wash-rgb), 0.18) transparent;
}

/* ── Tab views (js/askbar-tabs.js) ────────────────────────────── */
/* .is-view on .askbar-main swaps the chat (thread + composer) for the
   active feature view. The views block replaces the thread as the
   scroller, so it inherits the panel's responsive behaviour for free. */
.askbar-views { display: none; }
.askbar-main.is-view .askbar-thread,
.askbar-main.is-view .askbar-composer { display: none; }
.askbar-main.is-view .askbar-views {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--wash-rgb), 0.14) transparent;
}
.askbar-views::-webkit-scrollbar { width: 5px; }
.askbar-views::-webkit-scrollbar-thumb {
  background: rgba(var(--wash-rgb), 0.14);
  border-radius: 4px;
}
.askbar-view[hidden] { display: none; }

.askbar-view-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  margin: -4px 0 8px -8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted-2);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.askbar-view-back:hover {
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.05);
}

.askbar-view-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
}
.askbar-view-title:focus { outline: none; }

/* The one primary action per view — same accent language as the send
   button. Navigation lives here now, not on the rail icons. */
.askbar-view-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 14px;
  border-radius: var(--r-control, 13px);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.askbar-view-go:hover { background: var(--accent-bright); }

/* Live summary — rows on the .askbar-suggest card material. */
.askbar-view-live { display: flex; flex-direction: column; gap: 6px; }
.askbar-view-loading,
.askbar-view-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.askbar-view-sum {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.askbar-view-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--wash-rgb), 0.03);
  font-size: 12.5px;
  min-width: 0;
}
.askbar-view-rowname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.askbar-view-rowdom { color: var(--muted-2); font-size: 11.5px; }
.askbar-view-rowstate {
  flex-shrink: 0;
  color: var(--muted-2);
  font-size: 11.5px;
}
.askbar-view-rowgo {
  flex-shrink: 0;
  color: var(--muted-3);
  font-size: 14px;
  line-height: 1;
}
a.askbar-view-rowlink:hover .askbar-view-rowgo { color: var(--text); }
a.askbar-view-rowlink {
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
a.askbar-view-rowlink:hover {
  background: rgba(var(--wash-rgb), 0.06);
  border-color: var(--line-strong);
}
/* Same dot language as the rail's status dot / agent cards. */
.askbar-view-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-3);
}
.askbar-view-dot.is-good,
.askbar-view-dot.is-starting { background: var(--accent-bright); }
.askbar-view-dot.is-attention { background: var(--gold); }
.askbar-view-dot.is-done { background: var(--positive); }

/* ── What-next rows ──────────────────────────────────────────────
   .askbar-view-row is a single ellipsised line — right for an agent name,
   wrong for an opportunity headline, which is a full sentence. These stack
   instead: rank chip, wrapping headline, then a meta line carrying the
   claim badge. The badges are defined here rather than borrowed from
   css/next-steps.css, which only loads on two of the twelve panel pages. */
.askbar-opp {
  display: flex;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--wash-rgb), 0.03);
  min-width: 0;
}
.askbar-opp-rank {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(var(--wash-rgb), 0.06);
  color: var(--muted-2);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.askbar-opp-body { min-width: 0; }
.askbar-opp-head {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
}
.askbar-opp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
/* Measured vs modelled is the one thing a number on screen must always
   say — same vocabulary as the report cards, smaller. */
.askbar-opp-badge {
  padding: 1px 6px;
  border-radius: var(--r-chip);
  border: 1px solid transparent;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.askbar-opp-badge.is-measured {
  color: var(--accent-text);
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.25);
}
.askbar-opp-badge.is-modelled {
  color: var(--muted);
  background: rgba(var(--wash-rgb), 0.05);
  border-color: rgba(var(--wash-rgb), 0.10);
}
.askbar-opp-badge.is-risk {
  color: var(--red-1);
  background: rgba(255, 122, 122, 0.08);
  border-color: rgba(255, 122, 122, 0.22);
}
.askbar-opp-up {
  font-size: 11.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
/* Connecting Search Console is free and unlocks the measured half of the
   list — the highest-value thing this view can say, so it gets the accent
   tint the rows don't. */
.askbar-view-connect {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.askbar-view-connect a { color: var(--accent-text); text-decoration: none; }
.askbar-view-connect a:hover { text-decoration: underline; }
/* Signals not yet in the list. Named, never sold: linking the paid fix
   here would put a spend-adjacent affordance in the one place the rail's
   contract says there must never be one. */
.askbar-view-missing {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-2);
}
.askbar-view-missing ul { margin: 4px 0 0; padding-left: 16px; }
.askbar-view-missing li { margin-top: 2px; }

/* "What's possible" — quiet explainer under the live data. */
.askbar-view-possible {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.askbar-view-possible h4 {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.askbar-view-possible p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-2);
}
.askbar-view-action {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--accent-text);
  text-decoration: none;
}
.askbar-view-action:hover { text-decoration: underline; }
.askbar-view-action[hidden] { display: none; }
/* Same affordance rendered as a <button> (the What-next scroll link, which
   acts on this page rather than navigating). */
button.askbar-view-action {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  /* A <button> centres its text by default, which would leave this one
     floating mid-column while every sibling starts at the left edge. */
  text-align: left;
}

/* The one paid button reachable from a rail view (the What-next
   walk-through). Deliberately QUIET — a hairline on the nested surface,
   not the accent fill .askbar-view-go carries.
   In this panel accent means "free navigation": the Go-to links, the send
   button. If the one thing that spends money were the loudest thing in the
   view, the restraint would be invisible and the cost would read as
   decoration. It is legible precisely because it is calmer than the free
   actions around it. The cost lives in the label, not in a tooltip. */
.askbar-view-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 8px 13px;
  border-radius: var(--r-control);
  border: 1px solid var(--line-strong);
  background: rgba(var(--wash-rgb), 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.askbar-view-cta:hover {
  background: rgba(var(--wash-rgb), 0.08);
  border-color: rgba(var(--wash-rgb), 0.18);
}
.askbar-view-cta[hidden] { display: none; }
.askbar-view-cta:disabled { opacity: 0.55; cursor: default; }
.askbar-view-fine {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted-2);
}
.askbar-view-fine[hidden] { display: none; }

/* Keyboard focus — every interactive element. */
.askbar-toggle:focus-visible,
.askbar-headbtn:focus-visible,
.askbar-rail:focus-visible,
.askbar-suggest:focus-visible,
.askbar-view-back:focus-visible,
.askbar-view-go:focus-visible,
.askbar-view-action:focus-visible,
.askbar-view-cta:focus-visible,
a.askbar-view-rowlink:focus-visible,
.askbar-send:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Backdrop exists only for the mobile drawer. */
.askbar-backdrop { display: none; }

/* ── 1001–1439px: rail + overlay ──────────────────────────────── */
/* A laptop can't afford a 372px column next to the report — the health
   hero clips at ~550px of content. So at medium widths the panel RESTS as
   the 56px rail (js/askbar.js forces collapsed on load here and skips
   persistence) and OPENING it floats the full panel over the content from
   the right instead of squeezing the data. Above 1439px it returns to a
   true third column. */
@media (min-width: 1001px) and (max-width: 1439px) {
  .askbar:not(.collapsed) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100dvh;
    z-index: 96;
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 50px -18px rgba(0, 0, 0, 0.65);
  }
}

/* ── ≤1000px: off-canvas drawer from the right ────────────────── */
@media (max-width: 1000px) {
  .askbar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100dvh;
    /* The whole screen, not a partial sheet — asking is a place you go
       on the phone, not a strip over the report. */
    width: 100vw;
    z-index: 96;
    transform: translateX(105%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 50px -18px rgba(0, 0, 0, 0.65);
  }
  .app.askbar-open .askbar { transform: translateX(0); }
  /* A stale desktop "collapsed" class must not shrink the drawer or hide
     its content — each part reverts to its base display. */
  .askbar.collapsed { width: 100vw; }
  .askbar.collapsed .askbar-head { display: flex; }
  .askbar.collapsed .askbar-body { display: flex; }
  .askbar.collapsed .askbar-rail,
  .askbar-rail,
  .askbar-toggle { display: none; }
  .askbar-close { display: inline-flex; }

  .askbar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .askbar-backdrop[hidden] { display: none; }
}

/* The bottom Ask-AI dock points INTO this panel now — once the drawer is
   open the pointer is satisfied, so hide it (same pattern as the dock's
   own nav-drawer/modal rules; the dock lives on <body>, hence :has()). */
body:has(.app.askbar-open) .ask-ai-dock {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .askbar,
  .askbar-toggle svg { transition: none; }
}

/* ── Light theme ──────────────────────────────────────────────── */
html[data-theme="light"] .askbar {
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.012) 0%, rgba(var(--wash-rgb), 0) 60%, rgba(21, 23, 66, 0.03) 100%),
    linear-gradient(to left, #fbfbfe, var(--bg));
  border-left: 1px solid rgba(21, 23, 66, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(35, 38, 110, 0.04);
}
html[data-theme="light"] .askbar-toggle {
  background: #fff;
  border-color: rgba(21, 23, 66, 0.1);
  box-shadow: none;
}
html[data-theme="light"] .askbar-composer { background: rgba(21, 23, 66, 0.02); }
html[data-theme="light"] .askbar-tools { background: rgba(21, 23, 66, 0.03); }
html[data-theme="light"] .askbar-send { color: #fff; }