/* Ask Insites AI panel (ask.js). A right-hand column that pushes the page from 1100px up, a right sheet over the
   page from 860px to 1099px, and a full-screen sheet on a phone. Opacity-only motion; only the thread scrolls. */
:root { --ds-ask-w: 420px; }
.ds-askp { position: fixed; z-index: 47; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: var(--ds-ask-w); background: var(--ds-surface-raised); color: var(--ds-text-primary); border-left: 1px solid var(--ds-border-divider); font: 400 var(--ds-text, 14px)/1.6 var(--ds-font); animation: ds-askp-in 160ms var(--ds-ease) both; }
.ds-askp.is-restored { animation: none; }
@keyframes ds-askp-in { from { opacity: 0; } }
@media (min-width: 1100px) { body.ds-ask-open .ds-frame { margin-right: var(--ds-ask-w); } }
/* the page is 420px narrower with the panel open, so the On this page column goes where it would at 1279px */
@media (min-width: 1100px) and (max-width: 1699.98px) { body.ds-ask-open .ds-main, body.ds-ask-open .ds-main.has-toc { grid-template-columns: minmax(0, 1fr); } body.ds-ask-open .ds-toc { display: none; } }
@media (min-width: 860px) and (max-width: 1099.98px) { .ds-askp { width: min(var(--ds-ask-w), calc(100vw - var(--ds-side-w))); } }

.ds-askp-head { display: flex; align-items: center; gap: 4px; flex: none; height: var(--ds-topbar-h, 56px); padding: 0 8px 0 16px; border-bottom: 1px solid var(--ds-border-divider); }
.ds-askp-title { display: flex; align-items: center; gap: 8px; flex: 1; margin: 0; font: 600 15px/1.2 var(--ds-display); color: var(--ds-text-primary); }
/* the same glyph as the sidebar pill (render.SPARKLE): both sparkles, 16px in a 32px circle; the old single path sat at y 3 to 17, so it read small and high */
.ds-askp-spark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ds-ai-gradient); color: var(--ds-on-brand); }
.ds-askp-spark svg { width: 16px; height: 16px; }
.ds-askp-icon, .ds-askp-tools button, .ds-askp-chip button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ds-r-input); background: none; color: var(--ds-text-tertiary); cursor: pointer; transition: background-color 120ms var(--ds-ease), color 120ms var(--ds-ease); }
.ds-askp-icon:hover, .ds-askp-tools button:hover, .ds-askp-chip button:hover { background: var(--ds-brand-subtle); color: var(--ds-brand-fg); }
.ds-askp [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; padding: 4px 8px; border-radius: 6px; background: var(--ds-text-primary); color: var(--ds-surface-raised); font: 500 12px/1.3 var(--ds-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms var(--ds-ease); }
.ds-askp-tools [data-tip]::after { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.ds-askp [data-tip]:is(:hover, :focus-visible)::after { opacity: 1; transition-delay: 0.4s; }

.ds-askp-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.ds-askp-lede { margin: 0 0 20px; color: var(--ds-text-secondary); }
.ds-askp-src-h { margin: 0 0 8px; font: 600 12px/1.3 var(--ds-font); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ds-text-tertiary); }
.ds-askp-suggest { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ds-askp-suggest button { width: 100%; padding: 10px 12px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-button); background: var(--ds-surface-raised); color: var(--ds-text-primary); font: inherit; text-align: left; cursor: pointer; transition: background-color 150ms cubic-bezier(0, 0, .2, 1), border-color 150ms cubic-bezier(0, 0, .2, 1); }
.ds-askp-suggest button:hover { background: var(--ds-brand-subtle); border-color: var(--ds-brand-border); }

.ds-askp-turn { margin: 0 0 24px; }
.ds-askp-q { width: fit-content; max-width: 88%; margin: 0 0 6px auto; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--ds-brand); color: var(--ds-on-brand); overflow-wrap: anywhere; }
.ds-askp-about { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 12px; color: var(--ds-text-tertiary); }
.ds-askp-a { overflow-wrap: anywhere; }
.ds-askp-a p, .ds-askp-a ul, .ds-askp-a ol { margin: 0 0 10px; }
.ds-askp-a ul, .ds-askp-a ol { padding-left: 20px; }
.ds-askp-a pre { margin: 0 0 10px; padding: 10px 12px; white-space: pre-wrap; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-input); background: var(--ds-surface-subtle); font: 13px/1.5 var(--ds-mono); }
.ds-askp-a code { padding: 1px 4px; border-radius: 4px; background: var(--ds-surface-deep); font: 0.92em var(--ds-mono); }
.ds-askp-a pre code { padding: 0; background: none; }
.ds-askp a { color: var(--ds-brand-fg); }
.ds-askp-status { color: var(--ds-text-tertiary); font-style: italic; }
.ds-askp-turn.is-error .ds-askp-a { padding: 10px 12px; border: 1px solid var(--ds-border-subtle); border-left: 3px solid var(--ds-danger); border-radius: var(--ds-r-input); background: var(--ds-danger-subtle); }
.ds-askp-turn.is-error .ds-askp-a p:last-child { margin: 0; }
.ds-askp-src { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-input); }
.ds-askp-src ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ds-askp-src a { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.ds-askp-src a:hover span { text-decoration: underline; }
.ds-askp-src svg, .ds-askp-about svg { flex: none; }
.ds-askp-tools { display: flex; align-items: center; gap: 2px; }
.ds-askp-tools button[aria-pressed="true"] { color: var(--ds-brand-fg); background: var(--ds-brand-subtle); }
.ds-askp-tools .ds-askp-retry { width: auto; padding: 0 12px; border: 1px solid var(--ds-border-default); font: 600 13px var(--ds-font); color: var(--ds-text-primary); }
.ds-askp-thanks { margin-left: 6px; font-size: 12px; color: var(--ds-text-tertiary); }
.ds-askp-note { margin: 6px 0 0; font-size: 12px; color: var(--ds-text-tertiary); }

.ds-askp-form { flex: none; padding: 12px 16px 14px; border-top: 1px solid var(--ds-border-divider); }
.ds-askp-chip { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; padding: 2px 2px 2px 10px; border: 1px solid var(--ds-brand-border); border-radius: var(--ds-r-button); background: var(--ds-brand-subtle); font-size: 13px; color: var(--ds-text-secondary); }
.ds-askp-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-askp-chip a { font-weight: 600; text-decoration: none; }
.ds-askp-chip button { width: 28px; height: 28px; }
.ds-askp-box { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--ds-border-default); border-radius: var(--ds-r-button); background: var(--ds-surface-raised); }
.ds-askp-box:has(textarea:focus-visible) { border-color: var(--ds-brand); box-shadow: 0 0 0 2px var(--ds-brand-subtle); }
.ds-askp-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-askp textarea { flex: 1; min-width: 0; max-height: none; overflow: hidden; padding: 6px 0; border: 0; outline: 0; resize: none; background: none; color: var(--ds-text-primary); font: 400 max(16px, var(--ds-text, 14px))/1.5 var(--ds-font); field-sizing: content; }
.ds-askp textarea[aria-invalid="true"]::placeholder { color: var(--ds-danger-fg); }
.ds-askp-send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--ds-r-input); background: var(--ds-brand); color: var(--ds-on-brand); cursor: pointer; transition: background-color 120ms var(--ds-ease); }
.ds-askp-send:hover { background: var(--ds-brand-emphasis); }
.ds-askp-send .ds-askp-stop, .ds-askp-send.is-stop .ds-askp-go { display: none; }
.ds-askp-send.is-stop .ds-askp-stop { display: block; }
.ds-askp-hint { margin: 6px 0 0; font-size: 12px; color: var(--ds-text-tertiary); }
.ds-askp kbd { padding: 0 4px; border: 1px solid var(--ds-border-subtle); border-radius: 4px; font: 11px/16px var(--ds-font); }
.ds-askp :focus-visible { outline: 1px solid var(--ds-focus); outline-offset: 0; box-shadow: 0 0 0 2px var(--ds-brand-subtle); }
.ds-askp textarea:focus-visible { outline: 0; box-shadow: none; }

@media (max-width: 859.98px) {
  .ds-askp { z-index: 90; left: 0; width: auto; border-left: 0; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  .ds-askp-hint { display: none; }
}
/* The style reference's state boxes */
.ds-askp-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0 0 32px; }
.ds-askp-demos figure { margin: 0; }
.ds-askp-demo { position: relative; inset: auto; z-index: auto; width: 100%; height: 460px; padding: 0; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-card); overflow: hidden; animation: none; }
.ds-askp-demo .ds-askp-thread { overflow: hidden; }
/* Under 1100px the panel covers the page and is modal (ask.js sets role=dialog, aria-modal and inert behind it) */
body.ds-ask-modal { overflow: hidden; }
@media print { .ds-askp { display: none !important; } body.ds-ask-open .ds-frame { margin-right: 0 !important; } }
/* DS-69 (round 7): a soft caret pulses at the end of an answer only while it streams (the one loop allowed while a
   stream is in progress; it stops when the answer ends), and Sources slide in once the answer is done. */
.ds-askp-a[aria-busy="true"] > :last-child::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; border-radius: 1px; background: var(--ds-brand); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .ds-askp-a[aria-busy="true"] > :last-child::after { animation: ds-caret 1s var(--ds-ease) infinite alternate; }
  @keyframes ds-caret { from { opacity: .25; } to { opacity: .8; } }
  .ds-askp-src { animation: ds-rise var(--ds-dur-slow) var(--ds-ease) both; }
}