/* Custom "Ask AI" chat widget (pg-chat-widget.js) — right-docked sidebar panel.
 *
 * Every color comes from the Material/brand tokens in colors.css so dark mode
 * cascades purely via [data-md-color-scheme="slate"] — the widget has no JS
 * theme sync. Visual vocabulary is the site's own: header-pill controls
 * (header.css), asymmetric chat bubbles (homepage.css .pgc-*), flat fills,
 * 0.15s hovers. Header-pill custom properties are header-scoped, so each use
 * here carries a literal fallback with the same value.
 */

/* ---- shell -------------------------------------------------------- */

.pg-chat {
  position: fixed;
  inset: 0;
  /* Above everything, including the auth reCAPTCHA badge (z-index ~2e9) and any
     other injected fixed elements, so nothing bleeds through the panel. */
  z-index: 2147483647;
  visibility: hidden;
  pointer-events: none;
  font-family: var(--md-text-font-family, var(--md-text-font, sans-serif));
  /* Step change delayed on close only, so the panel stays visible for the 0.2s
     slide-out. Must NOT be a duration (`visibility 0.2s`): with one, the
     computed value is still `hidden` at the instant the open class lands, and
     .focus() on a hidden element is a silent no-op — the composer would never
     take focus and the user's keystrokes would land back on the page. */
  transition: visibility 0s 0.2s;

  /* Widget-local type scale — consolidated so the whole panel's text can be
     tuned in one place (the theme has no global type-scale tokens). Each rem
     step maps 1:1 to a role below. em-based sizes on code/citations stay
     relative to their context and are intentionally left inline. */
  --pg-chat-fs-title: 1.2rem;    /* header "Ask AI" */
  --pg-chat-fs-heading: 0.9rem;  /* empty-state title */
  --pg-chat-fs-body: 0.8rem;     /* composer input, answer subheadings */
  --pg-chat-fs-message: 0.75rem; /* chat bubbles */
  --pg-chat-fs-small: 0.7rem;    /* sources, chips, tables, secondary text */
  --pg-chat-fs-tiny: 0.65rem;    /* action buttons, jump pill */
  --pg-chat-fs-micro: 0.6rem;    /* labels, disclaimer */

  /* Scrim + panel elevation (panel shadow has a light/dark pair). */
  --pg-chat-scrim: rgba(0, 0, 0, 0.4);
  --pg-chat-shadow-panel: -2px 0 8px rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="slate"] .pg-chat {
  --pg-chat-shadow-panel: -2px 0 12px rgba(0, 0, 0, 0.3);
}

.pg-chat--open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s; /* visible immediately on open — see above */
}

.pg-chat__scrim {
  position: absolute;
  inset: 0;
  background: var(--pg-chat-scrim);
  opacity: 0;
  transition: opacity 0.2s;
}

.pg-chat--open .pg-chat__scrim {
  opacity: 1;
}

.pg-chat__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(25rem, 100vw); /* wide enough to cover the page's TOC sidebar */
  display: flex;
  flex-direction: column;
  /* Gray body (like the old kapa modal's #EBEBEB); white AI answer cards sit
     on top of it for contrast. Use the OPAQUE brand token, not
     --md-default-bg-color--light: Material scopes that var to a 70%-translucent
     white (#ffffffb3) on body[data-md-color-scheme], which shadows the opaque
     :root override and lets the page bleed through the panel. */
  background: var(--pg-bright-gray);
  box-shadow: var(--pg-chat-shadow-panel);
  transform: translateX(100%);
  transition: transform 0.2s ease-out, width 0.2s ease-out;
}

[data-md-color-scheme="slate"] .pg-chat__panel {
  background: var(--pg-bg-dark-light);
}

.pg-chat--open .pg-chat__panel {
  transform: translateX(0);
}

.pg-chat--full .pg-chat__panel {
  width: 100vw;
}

/* Readable line length when expanded to full screen */
.pg-chat--full .pg-chat__qa,
.pg-chat--full .pg-chat__empty,
.pg-chat--full .pg-chat__error,
.pg-chat--full .pg-chat__composer,
.pg-chat--full .pg-chat__disclaimer {
  width: 100%;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

html[data-pg-chat-open] {
  overflow: hidden;
}

/* ---- header (height tied to the live site header) ----------------- */

.pg-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  /* Tied to the real site header by pg-chat-widget.js: --pg-chat-header-height is
     set from .md-header's measured height, which — with sticky tabs
     (navigation.tabs.sticky) — includes the nav row, and on pages without tabs
     (splash) is just the header row. Both green bands start at the viewport top,
     so matching the height lines up their bottom edges: the panel header's green
     line meets the site header/nav's. 4.5rem is the fallback until the
     measurement lands (or if JS is unavailable). */
  height: var(--pg-chat-header-height, 4.5rem);
  box-sizing: border-box;
  padding: 0 1rem;
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color, #fff);
}

.pg-chat__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.pg-chat__title h2 {
  margin: 0;
  font-size: var(--pg-chat-fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
}

.pg-chat__controls {
  display: flex;
  gap: 0.3rem;
}

.pg-chat__ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: var(--pg-header-control-bg, rgba(0, 0, 0, 0.26));
  border: var(--pg-header-control-border, 1px solid rgba(255, 255, 255, 0.35));
  border-radius: var(--pg-header-control-radius, 0.75rem);
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.pg-chat__ctl:hover {
  background: var(--pg-header-control-hover-light, rgba(255, 255, 255, 0.12));
}

[data-md-color-scheme="slate"] .pg-chat__ctl:hover {
  background: var(--pg-header-control-hover-dark, rgba(0, 0, 0, 0.45));
}

.pg-chat__ctl:focus-visible {
  outline: 2px solid var(--md-primary-bg-color, #fff);
  outline-offset: 2px;
}

/* ---- transcript ---------------------------------------------------- */

.pg-chat__transcript {
  flex: 1;
  /* min-height/min-width:0 override the flex default of `auto`, which would
     otherwise refuse to shrink below the intrinsic size of tall/wide content
     (a mermaid SVG, a non-wrapping <pre>). Without these the transcript grows
     to fit that content instead of scrolling, pushing the bottom past the
     panel edge — i.e. "can't scroll to the bottom". */
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* Scroll content wrapper — a single flex child so a ResizeObserver can watch
   its height and re-pin the transcript to the bottom on async growth. Grows
   with content (flex-basis auto, never shrinks) and fills the transcript when
   content is short so the empty state's margin:auto still centers. */
.pg-chat__scroll {
  flex: 1 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pg-chat__qa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pg-chat__msg {
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  font-size: var(--pg-chat-fs-message);
  line-height: 1.6;
  word-wrap: break-word;
  text-align: left;
}

.pg-chat__msg--user {
  background: var(--md-accent-fg-color);
  color: var(--pg-white, #fff);
  align-self: flex-end;
  max-width: 85%;
  border-bottom-right-radius: 0.25rem;
  white-space: pre-wrap;
}

.pg-chat__msg--ai {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: var(--md-default-fg-color);
  align-self: stretch;
  border-bottom-left-radius: 0.25rem;
}

/* Markdown content inside AI answers (mirrors homepage .pgc-bubble--ai) */
.pg-chat__answer p { margin: 0 0 0.75rem; }
.pg-chat__answer p:last-child { margin-bottom: 0; }
.pg-chat__answer pre {
  background: var(--md-code-bg-color);
  border-radius: 0.5rem;
  padding: 0.75rem;
  overflow-x: auto;
  margin: 0.5rem 0;
  font-size: 0.85em;
}
.pg-chat__answer code {
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  font-family: var(--md-code-font-family, var(--md-code-font, monospace));
  font-size: 0.85em;
}
.pg-chat__answer pre code { background: none; padding: 0; }

/* Syntax highlighting in answers. rehype-highlight (vendored, wired up in
   pg-chat-widget.js) emits hljs-* token classes; color them with the same
   --md-code-hl-* variables Material's Pygments stylesheet uses for docs code
   blocks, so chat code matches the docs palette in both color schemes. Each
   group below mirrors the Pygments-class group Material assigns that variable
   (highlight.js and Pygments tokenize slightly differently, so the match is
   per-token-role, not byte-for-byte). Scopes Pygments renders as plain text
   (literals, params) need no rule — the base code color above covers them. */
.pg-chat__answer .hljs-keyword,
.pg-chat__answer .hljs-selector-tag,
.pg-chat__answer .hljs-type,
.pg-chat__answer .hljs-name,
.pg-chat__answer .hljs-attr,
.pg-chat__answer .hljs-attribute,
.pg-chat__answer .hljs-meta { color: var(--md-code-hl-keyword-color); }
.pg-chat__answer .hljs-string,
.pg-chat__answer .hljs-symbol { color: var(--md-code-hl-string-color); }
.pg-chat__answer .hljs-regexp { color: var(--md-code-hl-special-color); }
.pg-chat__answer .hljs-number { color: var(--md-code-hl-number-color); }
.pg-chat__answer .hljs-built_in,
.pg-chat__answer .hljs-variable.language_ { color: var(--md-code-hl-constant-color); }
.pg-chat__answer .hljs-title { color: var(--md-code-hl-function-color); }
.pg-chat__answer .hljs-comment,
.pg-chat__answer .hljs-quote { color: var(--md-code-hl-comment-color); }
.pg-chat__answer .hljs-variable,
.pg-chat__answer .hljs-template-variable { color: var(--md-code-hl-variable-color); }
.pg-chat__answer .hljs-operator { color: var(--md-code-hl-operator-color); }
.pg-chat__answer .hljs-punctuation { color: var(--md-code-hl-punctuation-color); }
.pg-chat__answer .hljs-meta.prompt_ { color: var(--md-code-hl-generic-color); }
.pg-chat__answer ul,
.pg-chat__answer ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.pg-chat__answer li { margin: 0.2rem 0; }
.pg-chat__answer a { color: var(--md-typeset-a-color); }
.pg-chat__answer a:hover { color: var(--md-accent-fg-color); }
.pg-chat__answer h1,
.pg-chat__answer h2,
.pg-chat__answer h3,
.pg-chat__answer h4 { margin: 0.75rem 0 0.25rem; font-weight: 600; font-size: var(--pg-chat-fs-body); }
.pg-chat__answer img { max-width: 100%; height: auto; border-radius: 0.25rem; }
.pg-chat__answer table {
  border-collapse: collapse;
  font-size: var(--pg-chat-fs-small);
  margin: 0.5rem 0;
  display: block;
  overflow-x: auto;
}
.pg-chat__answer th,
.pg-chat__answer td {
  border: 1px solid var(--md-default-fg-color--lighter);
  padding: 0.25rem 0.5rem;
}

/* Mermaid diagrams rendered client-side from ```mermaid answer blocks. Rendering,
   theme, and palette re-render are handled by the shared pg-mermaid.js module,
   which draws the diagram into a shadow root on this host (so the SVG and its
   styles are isolated — the diagram's own colors, fonts, and stroke widths come
   from the --pg-mermaid-* variables in mermaid.css, not from rules here). This
   host only positions the card; text-align centers the shadow SVG. */
.pg-chat__mermaid {
  text-align: center;
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.5rem;
  overflow-x: auto;
}

/* Blinking cursor while the answer streams in */
.pg-chat__answer--streaming::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: pg-chat-blink 1s step-end infinite;
}

@keyframes pg-chat-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Inline numeric citations rendered as footnote pills */
.pg-chat__cite {
  display: inline-block;
  min-width: 1.1em;
  padding: 0 0.3em;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
  color: var(--md-typeset-a-color);
  font-size: 0.65em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  vertical-align: 0.25em;
}

.pg-chat__cite:hover {
  background: color-mix(in srgb, var(--md-accent-fg-color) 24%, transparent);
}

/* Shown on an answer whose generation was manually stopped (Esc, the composer
   stop button, or New chat) — kapa does not retain interrupted partial
   answers as context for the next question, so this is a permanent notice
   attached to that message, not a transient toast. */
.pg-chat__interrupted-note {
  margin: 0.5rem 0 0;
  font-size: var(--pg-chat-fs-tiny);
  font-style: italic;
  color: var(--md-default-fg-color--light);
}

/* When the interrupt happened before any content streamed, the note is the
   only child of the AI bubble; drop its top margin so it doesn't double up
   with the bubble's own padding. */
.pg-chat__interrupted-note:first-child {
  margin-top: 0;
}

/* ---- sources footnote list ----------------------------------------- */

.pg-chat__sources {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--md-default-fg-color--lighter);
}

.pg-chat__sources-label {
  font-size: var(--pg-chat-fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.pg-chat__source {
  display: flex;
  /* flex-start (not center) keeps the number aligned with the first line when
     a long title wraps onto additional lines. */
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
  font-size: var(--pg-chat-fs-small);
  line-height: 1.4;
  color: var(--md-typeset-a-color);
  text-decoration: none;
  transition: transform 0.15s;
}

.pg-chat__source:hover {
  transform: translateX(2px);
}

.pg-chat__source:hover .pg-chat__source-title {
  text-decoration: underline;
}

.pg-chat__source-num {
  flex-shrink: 0;
  min-width: 1.2rem;
  padding: 0 0.2rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
  font-size: var(--pg-chat-fs-micro);
  font-weight: 600;
  text-align: center;
}

.pg-chat__source-title {
  /* Wrap long titles onto additional lines instead of truncating, so the page
     and its section stay fully readable. break-word handles the rare
     unbreakable token (e.g. a long URL when a title is missing). */
  overflow-wrap: break-word;
}

/* Section within the page (kapa subtitle or deslugified URL anchor), shown
   inline after the title so one page's chunks read as distinct citations. It
   rides inside .pg-chat__source-title and wraps with it. */
.pg-chat__source-section {
  color: var(--md-default-fg-color--light);
}

.pg-chat__sources-more {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  font-size: var(--pg-chat-fs-tiny);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
}

.pg-chat__sources-more:hover {
  color: var(--md-accent-fg-color);
}

/* ---- per-answer action row ------------------------------------------ */

.pg-chat__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: -0.25rem;
}

.pg-chat__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 1.5rem;
  min-width: 1.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: var(--md-default-fg-color--light);
  font-size: var(--pg-chat-fs-tiny);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.pg-chat__action:hover:not(:disabled) {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

.pg-chat__action:disabled {
  opacity: 0.4;
  cursor: default;
}

.pg-chat__action--voted {
  color: var(--md-accent-fg-color);
}

.pg-chat__action--new {
  padding: 0 0.4rem;
}

.pg-chat__action-thanks {
  font-size: var(--pg-chat-fs-tiny);
  color: var(--md-default-fg-color--light);
  /* Fade in, hold, then fade out over the 3s it stays mounted after a vote. */
  animation: pg-chat-thanks 3s ease forwards;
}

@keyframes pg-chat-thanks {
  0% { opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-chat__action-thanks {
    animation: none;
  }
}

/* ---- feedback detail form (thumbs up/down → optional detail) ---------- */

.pg-chat__feedback {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
}

.pg-chat__fb-label {
  margin: 0;
  font-size: var(--pg-chat-fs-small);
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.pg-chat__fb-checks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pg-chat__fb-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--pg-chat-fs-small);
  color: var(--md-default-fg-color);
  cursor: pointer;
}

.pg-chat__fb-check input {
  accent-color: var(--md-accent-fg-color);
  cursor: pointer;
}

.pg-chat__fb-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.5rem;
  max-height: 8rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.4rem;
  background: var(--md-default-bg-color--light);
  resize: vertical;
  font-family: inherit;
  font-size: var(--pg-chat-fs-small);
  color: var(--md-default-fg-color);
}

.pg-chat__fb-text:focus-visible {
  outline: none;
  border-color: var(--md-accent-fg-color);
}

.pg-chat__fb-buttons {
  display: flex;
  gap: 0.4rem;
}

.pg-chat__fb-submit {
  padding: 0.3rem 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--md-accent-fg-color);
  color: var(--pg-white, #fff);
  font-size: var(--pg-chat-fs-tiny);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}

.pg-chat__fb-submit:hover {
  filter: brightness(0.95);
}

.pg-chat__fb-dismiss {
  padding: 0.3rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: var(--md-default-fg-color--light);
  font-size: var(--pg-chat-fs-tiny);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.pg-chat__fb-dismiss:hover {
  color: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
}

/* ---- empty state ----------------------------------------------------- */

.pg-chat__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: auto 0;
  padding: 1rem 0.5rem;
  text-align: center;
}

.pg-chat__empty-icon {
  color: var(--md-accent-fg-color);
}

.pg-chat__empty-title {
  margin: 0;
  font-size: var(--pg-chat-fs-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.pg-chat__empty-sub {
  margin: 0;
  font-size: var(--pg-chat-fs-small);
  color: var(--md-default-fg-color--light);
}

.pg-chat__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.pg-chat__chip {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 1.5rem;
  background: var(--md-default-bg-color--light);
  color: var(--md-default-fg-color);
  font-size: var(--pg-chat-fs-small);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.pg-chat__chip:hover {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

/* ---- thinking / error / jump ----------------------------------------- */

.pg-chat__thinking {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  align-self: flex-start;
}

.pg-chat__thinking span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-default-fg-color--light);
  animation: pg-chat-bounce 1.4s infinite ease-in-out;
}

.pg-chat__thinking span:nth-child(2) { animation-delay: 0.2s; }
.pg-chat__thinking span:nth-child(3) { animation-delay: 0.4s; }

/* The service's `status` frames: shown once a slow answer has kept the dots
   bouncing for a while, so the reader knows the connection is still live. */
.pg-chat__status {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--md-default-fg-color--light);
}

@keyframes pg-chat-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.pg-chat__error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
  border-left: 4px solid var(--pg-danger, #f44336);
  border-radius: 0.5rem;
  color: var(--md-default-fg-color);
}

.pg-chat__error svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--pg-danger, #f44336);
}

/* Availability notice (same-origin transport): the error banner's layout,
   placed above the composer, in the accent colour rather than danger because
   nothing has failed yet; the panel is explaining why it cannot ask. */
.pg-chat__error--notice {
  margin: 0.5rem 1rem 0;
  padding: 0.5rem 0.75rem;
  border-left-color: var(--md-accent-fg-color);
  background: var(--md-default-bg-color--light);
  font-size: var(--pg-chat-fs-small);
  line-height: 1.5;
}

.pg-chat__error--notice svg {
  color: var(--md-accent-fg-color);
}

.pg-chat__retry {
  padding: 0;
  border: none;
  background: none;
  color: var(--md-typeset-a-color);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.pg-chat__retry:hover {
  color: var(--md-accent-fg-color);
}

.pg-chat__jump {
  position: sticky;
  bottom: 0.25rem;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: 1.5rem;
  background: var(--md-accent-fg-color);
  color: var(--pg-white, #fff);
  font-size: var(--pg-chat-fs-tiny);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* ---- screen-reader status -------------------------------------------- */

.pg-chat__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- composer + disclaimer -------------------------------------------- */

/* Single rounded box wrapping the input, with the send button tucked into the
   bottom-right corner — mirrors the old kapa composer / homepage .pgc-root. */
.pg-chat__composer {
  position: relative;
  flex-shrink: 0;
  margin: 0.75rem 1rem 0.25rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 1rem;
  background: var(--md-default-bg-color);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pg-chat__composer:focus-within {
  border-color: var(--md-default-fg-color--light);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.pg-chat__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  max-height: 120px;
  /* room for the send button in the bottom-right corner */
  padding: 0 2.5rem 0 0;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: var(--pg-chat-fs-body);
  line-height: 1.5;
  color: var(--md-default-fg-color);
}

/* No focus ring on the textarea itself — the box border indicates focus. */
.pg-chat__input:focus-visible {
  outline: none;
}

.pg-chat__input::placeholder {
  color: var(--md-default-fg-color--light);
}

.pg-chat__send {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* Faint accent tint so the button reads against the panel in light mode
     (plain --md-default-bg-color--light is nearly white-on-white there) and
     ties visually to the green arrow. */
  background: color-mix(in srgb, var(--md-accent-fg-color) 14%, var(--md-default-bg-color--light));
  color: var(--md-accent-fg-color);
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.pg-chat__send:hover:not(:disabled) {
  filter: brightness(0.95);
}

.pg-chat__send:disabled {
  opacity: 0.5;
  cursor: default;
}

.pg-chat__disclaimer {
  margin: 0;
  padding: 0.3rem 1rem 0.5rem;
  font-size: var(--pg-chat-fs-micro);
  line-height: 1.5;
  text-align: center;
  color: var(--md-default-fg-color--light);
}

/* ---- focus, mobile, reduced motion ------------------------------------ */

/* Generic keyboard-focus ring for controls. The composer textarea is excluded
   — its wrapper box shows focus via border + shadow, so it needs no ring. */
.pg-chat__panel :focus-visible:not(.pg-chat__input) {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* Material's tablet breakpoint: full takeover, no fullscreen toggle */
@media screen and (max-width: 76.1875em) {
  .pg-chat__panel {
    width: 100vw;
  }
  .pg-chat__ctl--full {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-chat,
  .pg-chat__scrim,
  .pg-chat__panel {
    transition: none;
  }
  .pg-chat__thinking span {
    animation-duration: 2.8s;
  }
  .pg-chat__answer--streaming::after {
    animation: none;
  }
}

@media print {
  .pg-chat {
    display: none;
  }
}