/* SNAPSHOT — do not edit by hand.
   Copy of the AlphaBot embed stylesheet (alphabot repo: public/embed.css,
   source src/embed/embed.css), committed here so the AskAlpha fallback
   mirror (see theme global.js renderFallback) stays styled when the embed
   host is unreachable. Re-copy whenever the embed's CSS changes. */
.alpha-chat-root,
.alpha-chat-root * {
  box-sizing: border-box;
}

.alpha-chat-root {
  --alpha-chat-bg: var(--wp--preset--color--contrast, #2a2723);
  --alpha-chat-surface: var(--wp--preset--color--base, #ffffff);
  --alpha-chat-surface-muted: var(--wp--preset--color--brand-1-tint-10, #eeebfe);
  --alpha-chat-text: var(--wp--preset--color--base, #ffffff);
  --alpha-chat-text-dark: var(--wp--preset--color--contrast, #2a2723);
  --alpha-chat-text-muted: var(--wp--preset--color--brand-1-tint-20, #dcd8fd);
  --alpha-chat-border: var(--wp--preset--color--brand-1-tint-20, #dcd8fd);
  --alpha-chat-border-soft: rgb(231 234 237 / 78%);
  --alpha-chat-shadow: 0 18px 45px rgb(23 34 66 / 8%);
  --alpha-chat-message-surface: var(--wp--custom--chat--message--surface, #323232);
  --alpha-chat-message-border: var(--wp--custom--chat--message--border, #77f5ff);
  --alpha-chat-message-border-strong: var(--wp--custom--chat--message--border-strong, #33ffff);
  --alpha-chat-message-shadow: -10px -10px 40px 0 rgb(80 58 245 / 14%), 10px 10px 60px 0 rgb(89 247 177 / 14%);
  --alpha-chat-loading-shadow: -10px -10px 40px 0 rgb(80 58 245 / 30%), 10px 10px 60px 0 rgb(89 247 177 / 30%);
  --alpha-chat-link: var(--wp--custom--button--tertiary--background, var(--wp--preset--color--brand-3, #59f7b1));
  --alpha-chat-accent: var(--wp--preset--color--brand-1, #503af5);
  --alpha-chat-accent-strong: var(--wp--preset--color--brand-1, #503af5);
  --alpha-chat-accent-tint: var(--wp--preset--color--brand-1-tint-20, #dcd8fd);
  --alpha-chat-success: var(--wp--preset--color--brand-3, #59f7b1);
  --alpha-chat-active-bg: var(--wp--preset--color--contrast, #242424);
  --alpha-chat-muted-link: rgb(88 88 88);
  --alpha-chat-radius: var(--wp--preset--border-radius--large, 1.875rem);
  --alpha-chat-card-radius: var(--wp--preset--border-radius--small, .9375rem);
  --alpha-chat-search-min-height: 51px;
  --alpha-chat-search-padding-block: 3px;
  --alpha-chat-search-padding-inline-start: 25px;
  --alpha-chat-search-padding-inline-end: 3px;
  --alpha-chat-button-min-height: 45px;
  --alpha-chat-button-gap: 15px;
  --alpha-chat-button-icon-size: 37px;
  --alpha-chat-button-padding-block: 3px;
  --alpha-chat-button-padding-inline-start: 20px;
  --alpha-chat-button-padding-inline-end: 4px;
  --alpha-chat-prompt-card-min-height: 116px;
  --alpha-chat-prompt-card-padding: 20px;
  --alpha-chat-prompt-grid-row-gap: 10px;
  --alpha-chat-prompt-grid-column-gap: 12px;
  --alpha-chat-avatar-size: 43px;
  --alpha-chat-space-xs: var(--wp--preset--spacing--tight, 0.625rem);
  --alpha-chat-space-s: var(--wp--preset--spacing--snug, 1rem);
  --alpha-chat-space-m: var(--wp--preset--spacing--cozy, 1.25rem);
  --alpha-chat-space-l: var(--wp--preset--spacing--easy, 1.5rem);
  --alpha-chat-space-xl: var(--wp--preset--spacing--large, 2.5rem);
  --alpha-chat-user-bg: var(--wp--preset--color--brand-2-tint-10, #e6f1f4);
  --alpha-chat-bot-bg: transparent;
  --alpha-chat-code-bg: var(--wp--preset--color--brand-2-tint-5, #edf4f6);
  --alpha-chat-gradient: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 94%) 30%, var(--alpha-chat-surface) 100%);
  color: var(--alpha-chat-text);
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  font-family: var(--wp--preset--font-family--sans-serif, "quire-sans", sans-serif);
}

.alpha-chat {
  width: 100%;
  height: 100%;
  color: var(--alpha-chat-text);
  background: var(--alpha-chat-bg);
  border: 1px solid var(--alpha-chat-bg);
  border-radius: var(--alpha-chat-radius);
  overflow: hidden;
  padding: var(--alpha-chat-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--alpha-chat-space-l);
}

.alpha-chat-root[data-mode="standalone"] .alpha-chat {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.alpha-chat-root:has(.alpha-chat__messages) {
  --alpha-chat-bg: var(--alpha-chat-active-bg);
  --alpha-chat-surface-muted: var(--alpha-chat-accent-tint);
  --alpha-chat-text: var(--wp--preset--color--base, #ffffff);
  --alpha-chat-text-muted: var(--alpha-chat-accent-tint);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat {
  background: var(--alpha-chat-active-bg);
  border-color: var(--alpha-chat-active-bg);
}

.alpha-chat-root:is([data-mode="hero"], [data-mode="embed"]):has(.alpha-chat__messages) .alpha-chat {
  border: 0;
  border-radius: 0;
  display: grid;
  gap: var(--wp--preset--spacing--50, 1.5rem);
  grid-template-rows: auto minmax(0, 1fr);
  /* Fill (not just min) the bounded height so the messages row
     (minmax(0, 1fr) + overflow-y on .alpha-chat__messages) scrolls
     internally rather than growing the surface as the thread gets longer. */
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Padding is mode-specific. The hero sits inside a block that already pads it,
   so the active chat runs flush (padding:0, children lose their inline padding).
   The drawer/modal shell has no such outer container, so embed mode keeps the
   base .alpha-chat padding (see line ~62) to inset the chat from the panel. */
.alpha-chat-root[data-mode="hero"]:has(.alpha-chat__messages) .alpha-chat {
  padding: 0;
}

/* Pre-chat Site Search shows only the title + input row — no prompt cards —
   so let the hero card hug its content: drop the bottom padding here, while
   the hero block (keying off the data-alpha-chat-search-mode attribute the
   embed reflects onto its shadow host) drops the shell/mount min-heights.
   Transitioned at the starter collapse's 0.35s so the card bottom glides
   with it instead of jumping. */
.alpha-chat-root[data-mode="hero"] .alpha-chat {
  transition: padding-bottom 0.35s ease;
}

.alpha-chat-root[data-mode="hero"][data-search-mode="siteSearch"] .alpha-chat {
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .alpha-chat-root[data-mode="hero"] .alpha-chat {
    transition: none;
  }
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__header {
  min-height: 30px;
}

.alpha-chat-root[data-mode="hero"]:has(.alpha-chat__messages) .alpha-chat__header {
  padding-inline: 0;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__header-actions {
  width: auto;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__ghost-button {
  background: rgb(53 53 53 / 80%);
  border-color: var(--wp--preset--color--alpha-text-light, #ffffff);
  color: var(--wp--preset--color--base, #ffffff);
  gap: var(--alpha-chat-space-xs);
  height: auto;
  min-height: 28px;
  padding-block: 6px;
  padding-inline: 15px 10px;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__ghost-button:hover,
.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__ghost-button:focus-visible {
  background: rgb(80 58 245 / 40%);
}

.alpha-chat-root:is([data-mode="hero"], [data-mode="embed"]):has(.alpha-chat__messages) .alpha-chat__content {
  display: grid;
  gap: var(--wp--preset--spacing--40, 1rem);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.alpha-chat-root[data-mode="hero"]:has(.alpha-chat__messages) .alpha-chat__content {
  padding-inline: 0;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__messages {
  display: flex;
  gap: var(--wp--preset--spacing--60, 2rem);
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row {
  padding: 0;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--user {
  align-items: flex-end;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--user .alpha-chat__message-content {
  flex-direction: row-reverse;
  justify-content: flex-start;
  margin-inline: auto 0;
  max-width: min(100%, 560px);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--bot {
  align-items: flex-start;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--bot .alpha-chat__message-content {
  margin-inline: 0 auto;
  max-width: min(100%, 849px);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-content {
  align-items: flex-start;
  gap: var(--alpha-chat-space-s);
  width: 100%;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__avatar {
  flex-basis: var(--alpha-chat-avatar-size);
  height: var(--alpha-chat-avatar-size);
  width: var(--alpha-chat-avatar-size);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__avatar--user {
  background: var(--alpha-chat-success);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__avatar--bot {
  background: transparent;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text {
  align-items: flex-start;
  color: var(--wp--preset--color--base, #ffffff);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-size: 1rem;
  gap: var(--alpha-chat-space-s);
  line-height: 1.31;
  min-width: 0;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text:has(.alpha-chat__contact-panel) {
  gap: 0;
}

/* When the contact panel is shown it's the primary call to action, so it
   leads — followed by the related insights + follow-ups (one block), then the
   per-answer feedback. The answer text keeps the default order (0) and stays
   on top. The parent is already a flex column, so reordering the four direct
   children is enough; only applied while the contact panel is present.
   Target order: answer > contact card > insights/follow-ups > feedback. */
.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text:has(.alpha-chat__contact-panel) .alpha-chat__contact-panel {
  order: 1;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text:has(.alpha-chat__contact-panel) .alpha-chat__structured-card {
  order: 2;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text:has(.alpha-chat__contact-panel) .alpha-chat__feedback {
  margin-top: var(--alpha-chat-space-s);
  order: 3;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text:has(.alpha-chat__contact-panel) .alpha-chat__status-pill {
  order: 4;
}

/* With the contact card now directly above the structured content (and the
   structured card's own top margin zeroed in chat), the related insights would
   sit flush against the card. Push the leading section down by 1em. :first-child
   keeps the gap off the follow-ups section, which is already spaced by the
   structured card's 1em grid gap. */
.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text:has(.alpha-chat__contact-panel) .alpha-chat__structured-section:first-child {
  margin-top: 1em;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--user .alpha-chat__text {
  flex: 0 1 auto;
  max-width: 407px;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-body {
  color: inherit;
  overflow-wrap: anywhere;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--bot .alpha-chat__message-body {
  background: var(--alpha-chat-message-surface);
  border: 1px solid var(--alpha-chat-message-border-strong);
  border-radius: 16px;
  box-shadow: var(--alpha-chat-message-shadow);
  padding: var(--alpha-chat-prompt-card-padding);
  width: 100%;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__text:has(.alpha-chat__contact-panel) .alpha-chat__message-body {
  border-color: var(--alpha-chat-message-border);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: none;
  margin-bottom: -1px;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--user .alpha-chat__message-body {
  align-items: center;
  background: var(--alpha-chat-accent);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 32px;
  color: var(--wp--preset--color--base, #ffffff);
  display: flex;
  min-height: var(--alpha-chat-avatar-size);
  padding: 10px var(--alpha-chat-prompt-card-padding);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__structured-card {
  background: transparent;
  margin-top: 0;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__structured-card .alpha-chat__structured-section {
  margin-bottom: 0;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__section-label,
.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__follow-up-label {
  color: var(--wp--preset--color--base, #ffffff);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__follow-up-grid {
  gap: var(--alpha-chat-space-m);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__follow-up-chip {
  background: #e7e4fe;
  border: 0;
  border-radius: 30px;
  color: var(--alpha-chat-text-dark);
  font-size: 1rem;
  line-height: 1.3125;
  padding: 10px 20px;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__follow-up-chip:hover,
.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__follow-up-chip:focus-visible {
  background: var(--alpha-chat-accent-tint);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__input-container {
  gap: var(--wp--preset--spacing--40, 1rem);
}

.alpha-chat-root[data-mode="hero"]:has(.alpha-chat__messages) .alpha-chat__input-container {
  padding-inline: var(--wp--preset--spacing--50, 1.5rem);
}

.alpha-chat__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--alpha-chat-space-m);
  margin: 0;
}

.alpha-chat__header-copy {
  min-width: 0;
}

.alpha-chat__eyebrow {
  color: var(--alpha-chat-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 0.25rem;
  text-transform: uppercase;
}

.alpha-chat__title {
  color: var(--alpha-chat-text);
  font-size: var(--wp--preset--font-size--heading-xs, 24px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.17;
  margin: 0;
}

.alpha-chat__subtitle {
  color: var(--alpha-chat-text-muted);
  font-size: 0.92rem;
  margin: 0.25rem 0 0;
}

.alpha-chat__header-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
}

.alpha-chat__icon-button,
.alpha-chat__ghost-button,
.alpha-chat__starter-card,
.alpha-chat__follow-up-chip,
.alpha-chat__send-button,
.alpha-chat__contact-button,
.alpha-chat__form-secondary-button,
.alpha-chat__form-primary-button {
  font: inherit;
}

.alpha-chat__icon-button,
.alpha-chat__ghost-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--alpha-chat-border);
  border-radius: 999px;
  color: var(--alpha-chat-text);
  cursor: pointer;
  display: inline-flex;
  gap: 0.45rem;
  height: 2.4rem;
  justify-content: center;
  padding: 0 0.85rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.alpha-chat__icon-button {
  padding: 0;
  width: 2.4rem;
}

.alpha-chat__icon-button:hover,
.alpha-chat__ghost-button:hover {
  background: var(--alpha-chat-surface-muted);
}

/* When the hero chat is open — including the "open but empty" state right
   after a reset, before any message exists — the ghost buttons (Reset / Close)
   sit on the dark expanded surface, so give them the same treatment as the
   active-thread state. data-open is emitted for hero mode only, so embed /
   standalone are unaffected. */
.alpha-chat-root[data-open="true"] .alpha-chat__ghost-button {
  background: rgb(53 53 53 / 80%);
  border-color: var(--wp--preset--color--alpha-text-light, #ffffff);
  color: var(--wp--preset--color--base, #ffffff);
}

.alpha-chat-root[data-open="true"] .alpha-chat__ghost-button:hover,
.alpha-chat-root[data-open="true"] .alpha-chat__ghost-button:focus-visible {
  background: rgb(80 58 245 / 40%);
}

/* Resume card — shown in the collapsed hero when the visitor has closed
   (minimised) a conversation that can still be resumed. Sits inside the dark
   .alpha-chat card and centres its content. */
.alpha-chat__resume {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--alpha-chat-space-s);
  justify-content: center;
  min-height: 0;
  padding: var(--alpha-chat-space-m);
  text-align: center;
}

.alpha-chat__resume-icon {
  color: var(--alpha-chat-accent-tint);
  height: 2.5rem;
  width: 2.5rem;
}

.alpha-chat__resume-title {
  margin: 0;
}

.alpha-chat__resume-hint {
  color: var(--alpha-chat-text-muted);
  margin: 0;
}

.alpha-chat__resume-button {
  align-items: center;
  background: var(--alpha-chat-accent);
  border: 0;
  border-radius: 999px;
  color: var(--wp--preset--color--base, #ffffff);
  cursor: pointer;
  display: inline-flex;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  margin-top: var(--alpha-chat-space-xs);
  min-height: var(--alpha-chat-button-min-height);
  padding: 0 1.5rem;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.alpha-chat__resume-button:hover,
.alpha-chat__resume-button:focus-visible {
  filter: brightness(1.08);
}

.alpha-chat__resume-button:active {
  transform: translateY(1px);
}

.alpha-chat__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--alpha-chat-space-l);
  min-height: 0;
}

/* Pre-conversation view/search tabpanels (only present when the toggle is
   shown). Each panel wraps just its input row — the starter prompts live in
   a sibling .alpha-chat__starter-collapse below — so the visible panel must
   stay content-sized: letting it grow would push the prompts to the bottom
   of the surface. The hidden panel keeps its default display:none. */
.alpha-chat__content > [role="tabpanel"]:not([hidden]) {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--alpha-chat-space-l);
  min-height: 0;
}

.alpha-chat__messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0 0;
  scrollbar-width: thin;
}

.alpha-chat__messages::-webkit-scrollbar {
  width: 8px;
}

.alpha-chat__messages::-webkit-scrollbar-thumb {
  background: rgb(127 140 164 / 35%);
  border-radius: 999px;
}

.alpha-chat__message-row {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  width: 100%;
}

.alpha-chat__message-content {
  display: flex;
  gap: 0.9rem;
  margin: 0 auto;
  width: 100%;
}

.alpha-chat__avatar {
  align-items: center;
  border-radius: 999px;
  color: var(--wp--preset--color--base, #ffffff);
  display: inline-flex;
  flex: 0 0 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  width: 2rem;

  svg {
    height: 1.1rem;
    width: 1.1rem;
  }

  img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}

.alpha-chat__avatar--user {
  background: var(--alpha-chat-accent);
}

.alpha-chat__avatar--bot {
  background: linear-gradient(135deg, var(--alpha-chat-accent), var(--alpha-chat-accent-strong));
}

.alpha-chat__text {
  align-items: flex-start;
  color: var(--alpha-chat-text);
  display: grid;
}

.alpha-chat__message-body > *:first-child,
.alpha-chat__text > *:first-child {
  margin-top: 0;
}

.alpha-chat__message-body > *:last-child,
.alpha-chat__text > *:last-child {
  margin-bottom: 0;
}

.alpha-chat__message-body p,
.alpha-chat__message-body ul,
.alpha-chat__message-body ol,
.alpha-chat__message-body pre,
.alpha-chat__message-body blockquote,
.alpha-chat__text p,
.alpha-chat__text ul,
.alpha-chat__text ol,
.alpha-chat__text pre,
.alpha-chat__text blockquote {
  margin: 0 0 0.9rem;
}

.alpha-chat__message-body h1,
.alpha-chat__message-body h2,
.alpha-chat__message-body h3,
.alpha-chat__message-body h4,
.alpha-chat__text h1,
.alpha-chat__text h2,
.alpha-chat__text h3,
.alpha-chat__text h4 {
  font-weight: 700;
  line-height: 1.2;
  margin: 1.1rem 0 0.6rem;
}

.alpha-chat__message-body ul,
.alpha-chat__message-body ol,
.alpha-chat__text ul,
.alpha-chat__text ol {
  padding-left: 1.35rem;
}

.alpha-chat__message-body li + li,
.alpha-chat__text li + li {
  margin-top: 0.35rem;
}

.alpha-chat__message-body a,
.alpha-chat__text a {
  color: var(--alpha-chat-link);
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

.alpha-chat__message-body code,
.alpha-chat__text code {
  background: var(--alpha-chat-code-bg);
  border-radius: 6px;
  color: inherit;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.875rem;
  padding: 0.15rem 0.4rem;
}

.alpha-chat__message-body pre,
.alpha-chat__text pre {
  background: var(--alpha-chat-code-bg);
  border: 1px solid var(--alpha-chat-border);
  border-radius: 14px;
  overflow-x: auto;
  padding: 0.9rem 1rem;
}

.alpha-chat__message-body pre code,
.alpha-chat__text pre code {
  background: transparent;
  padding: 0;
}

.alpha-chat__structured-card {
  display: grid;
  gap: 1em;
  margin-top: 0.85rem;
  width: 100%;

  .alpha-chat__structured-header {
    display: flex;
    justify-content: flex-end;
  }
  
  .alpha-chat__structured-pill {
    background: rgb(15 118 214 / 12%);
    border-radius: 999px;
    color: var(--alpha-chat-accent);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
  }

  .alpha-chat__structured-section {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1rem;
  
    .alpha-chat__content-card-grid {
      display: grid;
      gap: 0.85rem;
      grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
      
        .alpha-chat__content-card {
          background: var(--alpha-chat-surface);
          border: 1px solid var(--alpha-chat-border);
        border-radius: var(--alpha-chat-card-radius);
        box-shadow: 0 12px 35px rgb(23 34 66 / 4%);
        display: flex;
        flex-direction: column;
        gap: var(--alpha-chat-space-xs);
        padding: var(--alpha-chat-space-s);

        .alpha-chat__content-card-image {
          aspect-ratio: 16 / 9;
          border-radius: 10px;
          display: block;
          object-fit: cover;
          width: 100%;
        }

        .alpha-chat__content-card-title {
          color: var(--alpha-chat-text-dark);
          font-size: var(--wp--preset--font-size--medium, 16px);
          line-height: 1.35;
          margin: 0;
        }

        .alpha-chat__content-card-summary {
          color: var(--alpha-chat-text-dark);
          font-size: var(--wp--preset--font-size--small, 14px);
          line-height: 1.55;
          margin: 0;
        }

        .alpha-chat__content-card-link {
          align-items: center;
          background: var(--alpha-chat-accent);
          border: 1px solid var(--alpha-chat-accent);
          border-radius: var(--wp--preset--border-radius--full, 100rem);
          color: var(--wp--preset--color--base, #ffffff)!important;
          display: inline-flex;
          font-size: var(--wp--preset--font-size--small, 14px);
          font-weight: 600;
          justify-content: center;
          /* Pin the CTA to the bottom so buttons align across a card row. */
          margin-top: auto;
          min-height: 2.65rem;
          padding: 0.7rem 1rem;
          text-decoration: none;
          transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

          &:hover {
            background: var(--wp--preset--color--contrast, #2a2723);
            border-color: var(--wp--preset--color--contrast, #2a2723);
            transform: translateY(-1px);
          }

        }

        .alpha-chat__content-card-link--disabled,
        .alpha-chat__content-card-link--disabled:hover {
          background: var(--alpha-chat-surface-muted);
          box-shadow: none;
          color: var(--alpha-chat-text-muted);
          cursor: not-allowed;
          opacity: 1;
          transform: none;
        }
      }
    }

    .alpha-chat__contact-helper {
      color: var(--alpha-chat-text-muted);
      margin: 0;
    }
    
    .alpha-chat__section-label,
    .alpha-chat__follow-up-label {
      color: var(--alpha-chat-text-muted);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      margin: 0;
      text-transform: uppercase;
    }

    .alpha-chat__follow-up-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;

      .alpha-chat__follow-up-chip {
        background: #e7e4fe;
        border: 0;
        border-radius: 30px;
        color: var(--alpha-chat-text-dark);
        cursor: pointer;
        font-size: 1rem;
        line-height: 1.3125;
        padding: 10px 20px;
        transition: background-color 0.2s ease;

        &:hover {
          background: var(--alpha-chat-accent-tint);
        }
      }
    }
  }
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__content-card-grid {
  gap: 10px;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact {
  align-items: center;
  background: var(--alpha-chat-message-surface);
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 16px;
  box-shadow: none;
  color: var(--wp--preset--color--base, #ffffff);
  display: flex;
  flex-direction: row;
  gap: 12px;
  min-height: 93px;
  overflow: hidden;
  padding: var(--alpha-chat-space-s);
  position: relative;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact:has(.alpha-chat__content-card-anchor) {
  padding: 0;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact .alpha-chat__content-card-anchor {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 12px;
  min-height: 100%;
  padding: var(--alpha-chat-space-s);
  position: relative;
  text-decoration: none;
  width: 100%;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact:hover,
.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact:focus-within {
  border-color: var(--alpha-chat-link);
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact .alpha-chat__content-card-image {
  aspect-ratio: 1;
  border-radius: 5px;
  flex: 0 0 61px;
  height: 61px;
  object-fit: cover;
  width: 61px;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact .alpha-chat__content-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  min-width: 0;
  padding-inline-end: var(--alpha-chat-space-s);
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact .alpha-chat__content-card-meta {
  color: rgb(255 255 255 / 70%);
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact .alpha-chat__content-card-title {
  color: var(--wp--preset--color--base, #ffffff);
  font-size: var(--wp--preset--font-size--body, 18px);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact .alpha-chat__content-card-arrow {
  color: var(--alpha-chat-link);
  display: inline-flex;
  position: absolute;
  right: 7px;
  top: 8px;
}

.alpha-chat__structured-card .alpha-chat__structured-section .alpha-chat__content-card-grid .alpha-chat__content-card--compact .alpha-chat__content-card-arrow svg {
  height: 17px;
  width: 17px;
}

.alpha-chat__contact-panel {
  background: var(--wp--preset--color--base, #ffffff);
  border: 1px solid var(--alpha-chat-message-border);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  color: var(--alpha-chat-text-dark);
  display: grid;
  gap: var(--alpha-chat-space-l);
  margin-top: 0;
  padding: 30px 32px 25px;
  width: 100%;
}

.alpha-chat__contact-panel-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.alpha-chat__contact-panel .alpha-chat__section-label {
  color: var(--alpha-chat-accent);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__contact-panel .alpha-chat__section-label {
  color: var(--alpha-chat-accent);
}

.alpha-chat__contact-button,
.alpha-chat__form-primary-button,
.alpha-chat__form-secondary-button {
  align-items: center;
  border-radius: var(--wp--preset--border-radius--full, 100rem);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small, 14px);
  font-weight: 600;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.alpha-chat__contact-button,
.alpha-chat__form-primary-button {
  background: var(--alpha-chat-accent);
  border: 1px solid var(--alpha-chat-accent);
  color: var(--wp--preset--color--base, #ffffff);
}

.alpha-chat__contact-button:hover,
.alpha-chat__form-primary-button:hover {
  background: var(--wp--preset--color--contrast, #2a2723);
  border-color: var(--wp--preset--color--contrast, #2a2723);
}

.alpha-chat__form-secondary-button {
  background: transparent;
  border: 1px solid rgb(42 39 35 / 18%);
  color: var(--alpha-chat-text-dark);
}

.alpha-chat__form-secondary-button:hover {
  background: var(--alpha-chat-accent-tint);
}

.alpha-chat__contact-button:disabled,
.alpha-chat__form-primary-button:disabled,
.alpha-chat__form-secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.alpha-chat__form-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 15px;
  padding: 0;
}

.alpha-chat__form-field-list {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.alpha-chat__form-field-list .alpha-chat__form-field:nth-child(3) {
  grid-column: 1 / -1;
}

.alpha-chat__form-field {
  display: grid;
  gap: 8px;
}

.alpha-chat__form-field span {
  color: var(--alpha-chat-text-dark);
  font-size: var(--wp--preset--font-size--small, 14px);
  font-weight: 400;
  line-height: 20px;
}

.alpha-chat__form-input {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--brand-1-tint-5, #eaeaec);
  border-radius: 0;
  color: var(--alpha-chat-text-dark);
  font: inherit;
  font-size: var(--wp--preset--font-size--body, 18px);
  line-height: 28px;
  min-height: 44px;
  outline: none;
  padding: 8px var(--alpha-chat-space-s);
  width: 100%;
}

.alpha-chat__form-input:focus {
  border-color: var(--alpha-chat-accent);
  box-shadow: none;
}

.alpha-chat__form-textarea {
  min-height: 110px;
  resize: vertical;
}

.alpha-chat__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.alpha-chat__form-summary {
  display: grid;
  gap: 0.45rem;
}

.alpha-chat__form-summary-item {
  color: var(--alpha-chat-text-dark);
  font-size: 0.92rem;
}

.alpha-chat__form-error,
.alpha-chat__form-success {
  border-radius: 12px;
  margin: 0;
  padding: 0.75rem 0.85rem;
}

.alpha-chat__form-error {
  background: rgb(193 54 54 / 8%);
  color: #a12828;
}

.alpha-chat__form-success {
  background: rgb(18 122 90 / 10%);
  color: #0e6b4f;
}

.alpha-chat__contact-helper {
  color: var(--alpha-chat-text-dark);
  font-size: var(--wp--preset--font-size--body, 18px);
  line-height: 1.2;
  margin: 0;
}

.alpha-chat__form-primary-button {
  border-width: 2px;
  gap: var(--alpha-chat-button-gap);
  min-height: var(--alpha-chat-button-min-height);
  min-width: 140px;
  padding-block: var(--alpha-chat-button-padding-block);
  padding-inline: var(--alpha-chat-button-padding-inline-start) var(--alpha-chat-button-padding-inline-end);
}

.alpha-chat__form-primary-button svg {
  background: var(--wp--preset--color--base, #ffffff);
  border-radius: 999px;
  color: var(--alpha-chat-accent);
  height: var(--alpha-chat-button-icon-size);
  padding: 7px;
  width: var(--alpha-chat-button-icon-size);
}

.alpha-chat__tool-container {
  margin-top: 0.75rem;
}

.alpha-chat__loading {
  margin-top: 0.75rem;
}

.alpha-chat__tool-invocation {
  align-items: center;
  background: var(--alpha-chat-surface-muted);
  border: 1px solid var(--alpha-chat-border);
  border-radius: 999px;
  color: var(--alpha-chat-text-muted);
  display: inline-flex;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
}

.alpha-chat__tool-spinner {
  animation: alpha-chat-spin 1s linear infinite;
  border: 2px solid rgb(127 140 164 / 28%);
  border-radius: 999px;
  border-top-color: var(--alpha-chat-accent);
  height: 0.85rem;
  width: 0.85rem;
}

/* Pre-conversation, the starter prompts sit below both tabpanels (see
   Chat.tsx). Site Search shows nothing under its input, so this wrapper
   collapses/expands the prompts via the grid-template-rows 0fr↔1fr trick —
   the card's height change animates instead of jumping when the toggle
   flips. `visibility` transitions discretely: it flips to hidden only after
   the collapse finishes (removing the clipped buttons from the a11y tree and
   tab order), and back to visible immediately on expand. */
.alpha-chat__starter-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s ease;
}

.alpha-chat-root[data-search-mode="siteSearch"] .alpha-chat__starter-collapse {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0s 0.35s;
}

.alpha-chat__starter-collapse > .alpha-chat__starter {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .alpha-chat__starter-collapse,
  .alpha-chat-root[data-search-mode="siteSearch"] .alpha-chat__starter-collapse {
    transition: none;
  }
}

.alpha-chat__starter {
  display: grid;
  gap: var(--alpha-chat-space-m);
}

.alpha-chat__starter-copy {
  h2,
  h3 {
    color: var(--alpha-chat-text);
    font-size: var(--wp--preset--font-size--body, 18px);
    font-weight: 400;
    line-height: 1;
    margin: 0;
  }

  p {
    color: var(--alpha-chat-text-muted);
    margin: 0.65rem 0 0;
  }
}

.alpha-chat__starter-grid {
  display: grid;
  gap: var(--alpha-chat-prompt-grid-row-gap) var(--alpha-chat-prompt-grid-column-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-bottom: auto;
  width: 100%;
}

.alpha-chat__starter-card {
  background: var(--alpha-chat-bg);
  border: 1px solid var(--alpha-chat-border-soft);
  border-radius: var(--alpha-chat-card-radius);
  color: inherit;
  cursor: pointer;
  min-height: var(--alpha-chat-prompt-card-min-height);
  padding: var(--alpha-chat-prompt-card-padding);
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

  &:hover {
    border-color: var(--wp--preset--color--alpha-text-light, #ffffff);
    transform: translateY(-1px);
  }

  h3 {
    color: var(--alpha-chat-text);
    font-size: var(--wp--preset--font-size--body, 18px);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 11px;
  }

  p {
    color: var(--alpha-chat-text);
    font-size: 1rem;
    line-height: 1.31;
    margin: 0;
  }
}

/* Drawer surface only. The fallback shell is always the drawer at >=1500px (the
   loader's default drawerMinWidth — keep this breakpoint in sync with it), and
   it's a narrow ~400px panel, so compress the pre-chat UI there:
   - stack the header (Reset/Close above the greeting) instead of a cramped row;
   - slim the suggested-prompt cards to just their prompt text (hide the heading,
     tighten the padding). Modal/fullscreen keep the fuller layout. */
@media (min-width: 1500px) {
  .alpha-chat-root[data-mode="embed"] .alpha-chat {
    padding-top: 0;
  }

  .alpha-chat-root[data-mode="embed"] .alpha-chat__header {
    flex-direction: column-reverse;
  }

  .alpha-chat-root[data-mode="embed"] .alpha-chat__starter-card {
    min-height: 0;
    padding: 12px;
  }

  /* Suggested-prompt cards carry a heading + prompt; only the prompt matters
     in the narrow drawer. */
  .alpha-chat-root[data-mode="embed"] .alpha-chat__starter-card h3 {
    display: none;
  }

  /* The drawer is a narrow ~400px column, so stack each message's avatar above
     its bubble instead of sitting them side by side. */
  .alpha-chat-root[data-mode="embed"]:has(.alpha-chat__messages) .alpha-chat__message-content {
    flex-direction: column;
  }

  .alpha-chat-root[data-mode="embed"]:has(.alpha-chat__messages) .alpha-chat__message-row--user .alpha-chat__message-content {
    flex-direction: column;
    align-items: flex-end;
  }
}

.alpha-chat__input-container {
  display: grid;
  gap: var(--alpha-chat-space-s);
}

.alpha-chat__input-wrapper {
  align-items: center;
  background: var(--alpha-chat-surface);
  border: 1px solid var(--alpha-chat-border);
  border-radius: var(--alpha-chat-radius);
  display: flex;
  gap: var(--alpha-chat-space-s);
  margin: 0 auto;
  min-height: var(--alpha-chat-search-min-height);
  padding-block: var(--alpha-chat-search-padding-block);
  padding-inline: var(--alpha-chat-search-padding-inline-start) var(--alpha-chat-search-padding-inline-end);
  width: 100%;
}

.alpha-chat__input {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--alpha-chat-text-dark);
  flex: 1 1 auto;
  font: inherit;
  min-width: 0;
  outline: none;
}

.alpha-chat__input::placeholder {
  color: var(--alpha-chat-text-dark);
}

.alpha-chat__send-button {
  align-items: center;
  background: var(--alpha-chat-accent);
  border: 2px solid var(--alpha-chat-accent);
  border-radius: 999px;
  color: var(--wp--preset--color--alpha-text-light, #ffffff);
  cursor: pointer;
  display: inline-flex;
  gap: var(--alpha-chat-button-gap);
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1.31;
  min-height: var(--alpha-chat-button-min-height);
  justify-content: center;
  padding-block: var(--alpha-chat-button-padding-block);
  padding-inline: var(--alpha-chat-button-padding-inline-start) var(--alpha-chat-button-padding-inline-end);
  transition: background-color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;

  svg {
    align-items: center;
    background: var(--wp--preset--color--alpha-bg-light, #ffffff);
    border-radius: 50%;
    color: var(--alpha-chat-accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--alpha-chat-button-icon-size);
    padding: 6px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: var(--alpha-chat-button-icon-size);
  }

  &:hover:not(:disabled) {
    background: var(--alpha-chat-accent-strong);

    svg {
      opacity: 0.8;
      transform: rotate(-45deg);
    }
  }
}

.alpha-chat__send-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Shown in place of the send button while a response is streaming. */
.alpha-chat__send-button--stop {
  background: var(--alpha-chat-text);
  border-color: var(--alpha-chat-text);

  svg {
    color: var(--alpha-chat-text);
  }

  &:hover:not(:disabled) {
    background: var(--alpha-chat-text-muted);
    border-color: var(--alpha-chat-text-muted);

    svg {
      transform: none;
    }
  }
}

.alpha-chat__loading-status {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  min-height: 2rem;
}

.alpha-chat__loading-text {
  color: var(--alpha-chat-text-muted);
  font-size: 0.85rem;
}

.alpha-chat__loading {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
  min-height: 2rem;
}

.alpha-chat__loading span {
  animation: alpha-chat-bounce 1.4s infinite ease-in-out both;
  background: var(--alpha-chat-text-muted);
  border-radius: 999px;
  display: block;
  height: 0.45rem;
  width: 0.45rem;
}

.alpha-chat__loading span:nth-child(1) {
  animation-delay: -0.32s;
}

.alpha-chat__loading span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes alpha-chat-bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes alpha-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Stepped progress checklist shown before any prose has streamed in. */
.alpha-chat__progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
}

.alpha-chat__progress-step {
  align-items: center;
  color: var(--alpha-chat-text-muted);
  display: flex;
  font-size: 0.85rem;
  gap: 0.5rem;
  line-height: 1.2;
  transition: color 200ms ease;
}

.alpha-chat__progress-step--active {
  color: var(--alpha-chat-text-primary, #111);
  font-weight: 500;
}

.alpha-chat__progress-step--done {
  color: var(--alpha-chat-text-muted);
}

.alpha-chat__progress-step-icon {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.7rem;
  height: 1.1rem;
  justify-content: center;
  width: 1.1rem;
}

.alpha-chat__progress-step--done .alpha-chat__progress-step-icon {
  background: rgb(0 128 64 / 12%);
  color: rgb(0, 128, 64);
}

.alpha-chat__progress-step--active .alpha-chat__progress-step-icon {
  background: rgb(0 0 0 / 6%);
  position: relative;
}

.alpha-chat__progress-step--active .alpha-chat__progress-step-icon::before {
  animation: alpha-chat-spin 0.9s linear infinite;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  content: "";
  display: block;
  height: 0.65rem;
  width: 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .alpha-chat__progress-step--active .alpha-chat__progress-step-icon::before {
    animation: none;
  }
}

.alpha-chat__progress-step-label {
  flex: 1 1 auto;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-steps,
.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__loading-status {
  background:
    linear-gradient(90deg, rgb(80 58 245 / 10%) 0%, rgb(80 58 245 / 10%) 100%),
    var(--alpha-chat-message-surface);
  border: 1px solid var(--alpha-chat-message-border-strong);
  border-radius: 16px;
  box-shadow: var(--alpha-chat-loading-shadow);
  color: var(--wp--preset--color--base, #ffffff);
  margin: 0;
  min-width: min(100%, 278px);
  padding: var(--alpha-chat-prompt-card-padding);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-steps {
  gap: 10px;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-step {
  color: var(--wp--preset--color--base, #ffffff);
  font-size: 1rem;
  gap: 10px;
  line-height: 1.31;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-step--active {
  color: rgb(255 255 255 / 70%);
  font-weight: 400;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-step--done {
  color: var(--wp--preset--color--base, #ffffff);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-step-icon {
  background: var(--alpha-chat-accent);
  color: var(--wp--preset--color--base, #ffffff);
  font-size: 0.72rem;
  height: 18px;
  width: 18px;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-step--active .alpha-chat__progress-step-icon {
  background: transparent;
  color: var(--alpha-chat-accent);
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-step--active .alpha-chat__progress-step-icon::before {
  border-width: 2px;
  height: 12px;
  width: 12px;
}

.alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__progress-step--active .alpha-chat__progress-step-label {
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 40%) 0%,
    var(--wp--preset--color--base, #ffffff) 35%,
    rgb(255 255 255 / 90%) 82%
  );
  background-clip: text;
  color: transparent;
}

/* Status pill shown below streaming prose for mid-stream tool calls
   and trailing verification. */
.alpha-chat__status-pill {
  align-items: center;
  background: rgb(0 0 0 / 4%);
  border-radius: 999px;
  color: var(--alpha-chat-text-muted);
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
}

.alpha-chat__status-pill-spinner {
  animation: alpha-chat-spin 0.9s linear infinite;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  display: inline-block;
  height: 0.7rem;
  width: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
  .alpha-chat__status-pill-spinner {
    animation: none;
  }
}

/* Inline pill rendered in place of [N] markers in assistant prose.
   Click scrolls the matching content card into view. */
.alpha-chat__citation-chip {
  align-items: center;
  background: rgb(0 0 0 / 6%);
  border: none;
  border-radius: 999px;
  color: var(--alpha-chat-text-primary, #111);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  height: 1.1rem;
  justify-content: center;
  margin: 0 0.15rem;
  min-width: 1.1rem;
  padding: 0 0.35rem;
  transition: background 150ms ease, color 150ms ease;
  vertical-align: 0.05em;
}

.alpha-chat__citation-chip:hover,
.alpha-chat__citation-chip:focus-visible {
  background: var(--alpha-chat-accent, #0033a0);
  color: #fff;
  outline: none;
}

/* Highlight pulse applied to a content card when its citation chip is
   clicked. Removed automatically after ~1.5s by CitationChip. */
.alpha-chat__content-card--highlight {
  animation: alpha-chat-card-pulse 1.5s ease-out;
  position: relative;
}

@keyframes alpha-chat-card-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(0 51 160 / 45%);
  }
  60% {
    box-shadow: 0 0 0 8px rgb(0 51 160 / 0%);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(0 51 160 / 0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alpha-chat__content-card--highlight {
    animation: none;
    outline: 2px solid rgb(0 51 160 / 60%);
  }
}

/* Skeleton chips shown beneath the cards while we wait for the
   real follow-ups to arrive in the structured-output event. */
.alpha-chat__follow-up-chip--skeleton {
  animation: alpha-chat-skeleton 1.4s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    rgb(0 0 0 / 5%) 0%,
    rgb(0 0 0 / 12%) 50%,
    rgb(0 0 0 / 5%) 100%
  );
  background-size: 200% 100%;
  border: 0;
  cursor: default;
  display: inline-block;
  height: 2rem;
  pointer-events: none;
}

@keyframes alpha-chat-skeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alpha-chat__follow-up-chip--skeleton {
    animation: none;
    background: rgb(0 0 0 / 6%);
  }
}

/* Per-answer thumbs feedback. Sits below the latest assistant message. */
.alpha-chat__feedback {
  align-items: center;
  color: var(--alpha-chat-text-muted);
  display: flex;
  font-size: 0.78rem;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.alpha-chat__feedback-prompt {
  flex: 0 0 auto;
}

.alpha-chat__feedback-button {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.85rem;
  height: 1.6rem;
  justify-content: center;
  padding: 0;
  transition: background 150ms ease, border-color 150ms ease;
  width: 1.8rem;
}

.alpha-chat__feedback-button:hover:not(:disabled),
.alpha-chat__feedback-button:focus-visible {
  background: rgb(0 0 0 / 6%);
  border-color: rgb(0 0 0 / 25%);
  outline: none;
}

.alpha-chat__feedback-button:disabled {
  cursor: progress;
  opacity: 0.5;
}

.alpha-chat__feedback-thanks {
  font-style: italic;
}

/* Optional free-text note revealed after a thumbs-down vote. */
.alpha-chat__feedback-note {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.alpha-chat__feedback-note-label {
  color: var(--alpha-chat-text-muted);
  font-size: 0.78rem;
}

.alpha-chat__feedback-note-input {
  border: 1px solid rgb(0 0 0 / 18%);
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
  resize: vertical;
  width: 100%;
}

.alpha-chat__feedback-note-input:focus-visible {
  border-color: var(--alpha-chat-accent, #2271b1);
  outline: none;
}

.alpha-chat__feedback-note-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.alpha-chat__feedback-note-skip,
.alpha-chat__feedback-note-submit {
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.85rem;
  transition: background 150ms ease, border-color 150ms ease;
}

.alpha-chat__feedback-note-skip {
  background: transparent;
  border: 1px solid rgb(0 0 0 / 18%);
  color: var(--alpha-chat-text-muted);
}

.alpha-chat__feedback-note-skip:hover:not(:disabled) {
  background: rgb(0 0 0 / 6%);
}

.alpha-chat__feedback-note-submit {
  background: var(--alpha-chat-accent, #2271b1);
  border: 1px solid var(--alpha-chat-accent, #2271b1);
  color: #fff;
}

.alpha-chat__feedback-note-submit:hover:not(:disabled) {
  opacity: 0.9;
}

.alpha-chat__feedback-note-skip:disabled,
.alpha-chat__feedback-note-submit:disabled {
  cursor: progress;
  opacity: 0.5;
}

.alpha-chat__input-footer {
  display: flex;
  justify-content: flex-start;
  margin: 0.75rem 0 1rem;
}

/* AskAlpha / Site Search switch: text labels either side of a small rounded
   track; the knob slides to the active side, driven by data-search-mode on
   the root (same attribute-selector convention as data-mode above). */
.alpha-chat__view-toggle {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
}

.alpha-chat__view-toggle-label {
  background: transparent;
  border: none;
  color: var(--alpha-chat-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0;
  transition: color 0.2s ease;
}

.alpha-chat__view-toggle-label[aria-selected="true"] {
  color: var(--alpha-chat-text);
}

/* Disabled label — only used by the WordPress-side fallback mirror (embed
   host unreachable), which reuses these classes verbatim; the React app never
   disables a label. */
.alpha-chat__view-toggle-label:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.alpha-chat__view-toggle-track {
  background: var(--alpha-chat-surface-muted);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  padding: 3px;
  width: 40px;
}

.alpha-chat__view-toggle-knob {
  background: var(--alpha-chat-accent);
  border-radius: 50%;
  display: block;
  height: 16px;
  transition: transform 0.25s ease;
  width: 16px;
}

.alpha-chat-root[data-search-mode="siteSearch"] .alpha-chat__view-toggle-knob {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  .alpha-chat__view-toggle-knob {
    transition: none;
  }
}

.alpha-chat__banner {
  align-items: center;
  background: #fff8e6;
  border: 1px solid #f0c674;
  border-radius: 10px;
  color: #5b4400;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.85rem;
}

.alpha-chat__banner-message {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.alpha-chat__banner-action {
  background: #5b4400;
  border: none;
  border-radius: 6px;
  color: #fff8e6;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
}

.alpha-chat__banner-action:hover {
  background: #3d2e00;
}

@media (max-width: 900px) {
  .alpha-chat__starter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .alpha-chat {
    border-radius: 18px;
  }

  .alpha-chat__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .alpha-chat__header-actions {
    width: 100%;
  }

  .alpha-chat__header-actions > * {
    flex: 1 1 auto;
  }

  .alpha-chat__message-content {
    gap: 0.7rem;
  }

  .alpha-chat__avatar {
    flex-basis: 1.8rem;
    height: 1.8rem;
    width: 1.8rem;
  }

  .alpha-chat__input-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Very small screens (e.g. the modal/fullscreen shell at 400px and under): too
   narrow for the avatar to sit beside the bubble, so stack them like the drawer. */
@media (max-width: 400px) {
  .alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-content {
    flex-direction: column;
  }

  .alpha-chat-root:has(.alpha-chat__messages) .alpha-chat__message-row--user .alpha-chat__message-content {
    flex-direction: column;
    align-items: flex-end;
  }
}