.automatic-btn-confirm {
  /* Light-gray AI-surface pill with dark text, matching .automatic-btn-login-cta
     — not the theme-invariant pure white that --settings-value-color resolved to. */
  --button-color: var(--input-bar-button-background-color);
  --button-text-color: var(--color-button-text-primary);
  --button-border: 1px solid var(--border-color-strong);
  --loader-foreground: var(--bg-color-secondary);
  --loader-background: var(--input-bar-button-background-color);
  --loader-foreground-end: var(--bg-color-inverted);
}

.automatic-btn-cancel {
  --button-color: var(--color-transparent);
  --button-hover-color: var(--color-transparent);
  --button-text-color: var(--text-color-primary);
  --button-border: 1px solid var(--border-color-secondary);
}

.automatic-btn-add {
  --button-color: var(--color-gray-1950);
  --button-text-color: var(--color-gray-450);
  --button-border: none;
}

.automatic-btn-remove {
  --button-color: var(--data-source-disconnect-button-color);
  --button-text-color: var(--data-source-disconnect-button-text-color);
  --button-border: none;
  --button-height: 100%;
  --button-border-radius: var(--radius-100);
  --button-padding: var(--spacing-sm) var(--spacing-12);
  --button-font-size: var(--font-size-xxs);
}

.automatic-btn-footer-group {
  gap: var(--spacing-12);
  width: 100%;

  --button-width: 100%;
  --button-border-radius: var(--spacing-md);
  --button-padding: var(--spacing-md);
  --button-font-size: var(--font-size-xs);
  --button-font-weight: var(--font-weight-semibold);
}

.automatic-btn-selector {
  flex: 1;
  min-width: 0;

  --button-text-color: var(--color-gray-450);
  --button-padding: var(--spacing-md) 0;
  --button-font-size: var(--font-size-xs);
  --button-font-weight: var(--font-weight-regular, 400);
  --button-width: 100%;
  --button-height: auto;
  --button-border-radius: 0;
  --button-justify-content: flex-start;
  --button-color: var(--color-transparent);
  --button-hover-color: var(--color-transparent);
}

.automatic-btn-selector :global(.button-text) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Suppress the browser's native focus ring on the store-selector button (the
   library Button's inner <button> only overrides box-shadow on focus-visible),
   so clicking a store row doesn't leave a blue outline. */
.automatic-btn-selector button:focus-visible {
  outline: none;
}

/* The :root token --button-hover-border is a blue (#499dff) hover outline intended
   for the main dashboard. On the AI surface it makes every fill-less button (dialog
   Cancel, Add, Confirm, Remove, the store selector, modal-footer CTAs) paint a blue
   border on hover — and on Android the tapped :hover state sticks, leaving a
   persistent blue ring. The Modal portals these wrappers out of .ai-route, so the
   .ai-route reset cannot reach them; pin the token here so the library Button's
   hover border falls back to each button's own --button-border instead. */
.automatic-btn-cancel,
.automatic-btn-add,
.automatic-btn-confirm,
.automatic-btn-remove,
.automatic-btn-selector,
.automatic-modal-footer {
  --button-hover-border: initial;
}

.automatic-radio {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-color-secondary);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.automatic-radio.selected,
.selected .automatic-radio {
  background-color: var(--text-color-primary);
  border-color: var(--text-color-primary);
  box-shadow: inset 0 0 0 3px var(--bg-color-secondary);
}

input[type='radio']:checked + .automatic-radio {
  background-color: var(--text-color-primary);
  border-color: var(--text-color-primary);
  box-shadow: inset 0 0 0 3px var(--bg-color-secondary);
}

.automatic-plus-icon-circle {
  width: var(--spacing-20);
  height: var(--spacing-20);
  border-radius: 50%;
  background-color: var(--color-transparent);
  border: 1px solid var(--color-gray-450);
  flex-shrink: 0;
}

.automatic-btn-action-link {
  --button-color: var(--color-transparent);
  --button-hover-color: var(--color-transparent);
  --button-border: none;
  --button-text-color: var(--ai-source-attribution-text);
  --button-padding: var(--spacing-sm) var(--spacing-12);
  --button-border-radius: var(--radius-100);
  --button-font-size: var(--font-size-xxs);
  --button-font-weight: var(--font-weight-medium);
  --button-icon-order: 2;
  --button-text-order: 1;
}

.automatic-download-btn {
  --button-color: var(--color-white, #fff);
  --button-text-color: var(--color-button-text-primary);
  --button-border: none;
  --button-border-radius: var(--radius-md);
  --button-padding: var(--spacing-md) var(--spacing-lg);
  --button-width: 100%;
  --button-font-size: var(--font-size-md);
  --button-font-weight: var(--font-weight-medium);
  --button-justify-content: center;
}

/* ─── AI login InputButton branded border/focus ring + left-button fill ──────
   The AI login modal's phone-number InputButton renders a branded container
   border, focus ring, and left-button background using --ai-login-text-header
   and --ai-login-modal-background-color (defined in theme.css :root). Other
   InputButton instances (RTO modal, search widget) must not inherit this
   border, so it is opt-in via this recipe class applied through
   InputButton's classes= prop. */
.automatic-input-button-ai-login {
  --input-button-container-border: 1px solid var(--ai-login-text-header);
  --input-button-focus-border: 1px solid var(--ai-login-text-header);
  --left-button-color: var(--ai-login-modal-background-color);
}

/* ─── Shared AI-modal content scaffold ───────────────────────────────────────
   The AI feature's modals (ManageJuspay on the data-sources page,
   MerchantShopSelectorModal) share the same content-panel sizing, section
   labels, and footer. These used to be re-declared per component via :global()
   overrides; they live here once so every AI modal inherits them. Each modal
   keeps only what genuinely differs (e.g. ManageJuspay uses filled card rows,
   the selector uses a divided list). Every selector is keyed off an
   .automatic-modal-* class so it only affects modals that opt in. */
.automatic-modal-content {
  padding: var(--spacing-md);
  width: 98vw;
  max-height: 400px;
  overflow-y: auto;
}

.global-modal-desktop-content .automatic-modal-content {
  width: 100%;
  max-width: 100%;
  max-height: none;
  padding: var(--spacing-20, 20px) var(--spacing-lg);
}

/* Selector-host modals (merchant + shop pickers): the list rows carry their
   own horizontal padding via .selector-label, so the content wrapper must
   not double-add left/right spacing. Applies to both mobile and desktop
   selector modals. Placed after the desktop override above so it wins the
   cascade (same 0,2,0 specificity — later declaration wins). */
.automatic-selector-host .automatic-modal-content {
  padding-left: 0;
  padding-right: 0;
}

.automatic-modal-section-label {
  display: block;
  color: var(--ai-sub-greeting);
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.automatic-modal-footer {
  width: 100%;
  padding-top: var(--spacing-md);
  display: flex;
  justify-content: center;
}

.global-modal-desktop-content .automatic-modal-footer {
  --button-color: var(--text-color-primary);
}

/* Selector modal desktop chrome: a subtle border/shadow on the library Modal's
   own .modal-content, for which the library exposes no CSS variable. Keyed off the
   .automatic-selector-host marker on the wrapper so only this modal is affected.
   (Mobile bottom-sheet safe-area padding is handled by the global
   .global-modal-bottom-sheet recipe applied on the same wrapper.) */
.automatic-selector-host.global-modal-desktop-content .modal-content {
  border: var(--modal-desktop-border, 1px solid rgb(255 255 255 / 10%));
  box-shadow: var(--modal-desktop-box-shadow, 0 0 20px rgb(0 0 0 / 50%));
}

/* ── Search bar text visibility on AI dark surface (Issue: #3) ────────────────
   Without this, --input-text-color/--input-placeholder-color chain through gray
   tokens that temp.css remaps to near-black, making text invisible on the dark
   surface. Pin to the semantic dark-mode text aliases (readable everywhere).
   Specificity bump via [theme='dark'] overrides the plain-class rule in
   globalClasses.css (0,2,0 > 0,1,0). */
[theme='dark'] .global-search-bar-input {
  --input-text-color: var(--text-color-primary);
  --input-placeholder-color: var(--text-color-secondary);
}

/* ── Button active-state fix for AI dark surface (Issue: #19) ─────────────────
   temp.css remaps --color-gray-100 → #fff under [theme='dark'], so
   globalClasses.css's var(--color-gray-100) active-press rules for secondary
   and ghost buttons flash white on the AI surface. --bg-color-button-active is
   a semantic token (backed by --color-gray-1825, which temp.css does not remap). */
/* stylelint-disable no-descending-specificity -- intentional AI-surface override of the globalClasses active-state press color */

/* Scoped to [theme='dark'] so it only affects the dark /ai (and dark-mode
   dashboard) surfaces — automatic.css is loaded globally, so an unscoped rule
   would flash near-black on secondary/ghost button press in light mode too. */
[theme='dark'] .global-btn.global-btn-secondary button:active,
[theme='dark'] .global-btn.global-btn-secondary button:disabled:hover,
[theme='dark'] .global-btn.global-btn-ghost button:active {
  background: var(--bg-color-button-active);
}

.global-ai-send-button-primary {
  --button-text-color: var(--color-button-text-primary);
  --button-hover-text-color: var(--color-button-text-primary);
}

.global-ai-action-button-secondary {
  --button-text-color: var(--text-color-primary);
  --button-hover-text-color: var(--text-color-primary);
  --button-hover-color: var(--color-transparent);
}

/* ── VibeSelectorModal — Radio token wiring (modals-vibe-radio) ───────────────
   AI-surface: icon-only Radio variant, 18px size, used exclusively under /ai/settings.
   Relocated from globalClasses.css per theme model (AI-route recipes → automatic.css).
   Applied at the callsite via classes="modals-vibe-radio" on the Radio component. */
.modals-vibe-radio {
  /* Wire library Radio tokens to project design tokens. The selected ring and
     dot use the theme foreground so they stay visible in the always-dark /ai
     modal — bg-canvas is dark-on-dark there, which rendered as a black dot.
     Per-instance: icon-only radio (text suppressed) with 18px size and 1px
     border — distinct from the :root 20px/2px-border standard Radio recipe. */
  --radio-size: 18px;
  --radio-dot-size: 8px;
  --radio-border: 1px solid var(--border-color-secondary);
  --radio-selected-border: 1px solid var(--text-color-primary);

  /* --radio-background: transparent omitted — same as :root var(--color-transparent) */
  --radio-selected-background: var(--bg-color-secondary);
  --radio-dot-color: var(--text-color-primary);
  --radio-hover-border: 1px solid var(--text-color-primary);

  /* Disable built-in text rendering — name is in the outer vibe-name span */
  --radio-text-font-size: 0;
}

/* ── BusinessReportCard — Banner token wiring (fold-brc-sample-banner) ────────
   AI-surface: "Showing sample data" monospace/amber watermark, used exclusively
   under /ai. Relocated from globalClasses.css per theme model (AI-route recipes → automatic.css).
   Applied at the callsite via classes="fold-brc-sample-banner" on the Banner component. */
.fold-brc-sample-banner {
  /* Per-instance: "Showing sample data" watermark — monospace font, transparent
     bg, left-aligned. Bespoke --sample-data-* tokens used here only.
     No-ops removed: --banner-gap (8px = library default), --banner-position
     (already static in :root theme.css), --banner-z-index (no-op on static
     position). */
  --banner-background: transparent;
  --banner-color: var(--sample-data-text-color);
  --banner-font-family: var(--sample-data-font-family);
  --banner-font-size: var(--sample-data-font-size);
  --banner-font-weight: var(--sample-data-font-weight);
  --banner-padding: var(--spacing-0) var(--spacing-0) var(--spacing-12) var(--spacing-0);
  --banner-justify-content: flex-start;
}

@media (width >= 768px) {
  .fold-brc-sample-banner {
    --banner-padding: var(--spacing-0) var(--spacing-0) var(--spacing-lg) var(--spacing-0);
  }
}

/* AI chat attachment strip — top padding separates thumbnails from the input
   text. Unique to this surface so lives here in the AI theme file rather than
   as a per-callsite override in the component. Applied via Scroller classes= prop. */
.automatic-inputbar-preview {
  --scroller-padding: var(--spacing-sm) 0 0 0;
}

/* ── Card appearance variants ────────────────────────────────────────────────── */

/* AI-surface Card: tile both library Card vars (--card-background, --card-background-color)
   to the AI confirmation-card token and strip the box-shadow so the card sits flat
   against the agentic dark chrome. content-padding and width stay local in temp.css (layout). */
.automatic-card {
  --card-background-color: var(--ai-confirmation-card-bg);
  --card-background: var(--ai-confirmation-card-bg);
  --card-box-shadow: none;
}

/* OAuth provider icon button: platform-palette bg, platform border, inactive
   text colour, fully-rounded — used for the Shopify/Facebook/Google/Juspay
   icon buttons in the OAuthProviders component. Height, width, margin, padding,
   and icon/text/loader ordering are layout vars and stay on the wrapper. */
.automatic-btn-oauth-provider {
  --button-color: var(--oauth-button-bg);
  --button-border: var(--oauth-button-border);
  --button-text-color: var(--text-color-inactive);
  --button-border-radius: var(--oauth-button-border-radius);
}

/* Google login button: AI login-surface palette with secondary border.
   Height and icon/text ordering stay on the wrapper (layout). */
.automatic-btn-google-login {
  --button-color: var(--login-button-bg);
  --button-hover-color: var(--login-button-bg);
  --button-border: 1px solid var(--border-color-secondary);
  --button-hover-border: 1px solid var(--border-color-secondary);
  --button-text-color: var(--login-title-color);
  --button-hover-text-color: var(--login-title-color);
  --button-border-radius: var(--spacing-32);
}

/* Login primary CTA button: AI login-surface palette — uses the exact tokens
   from beta's .input-button-wrapper. Height stays on the wrapper (layout).
   Dedicated variant because the login surface tokens differ from the generic
   secondary-filled palette. */
.automatic-btn-login-cta {
  /* The login/connect modal is always dark, so the CTA must stay a crisp light
     pill in both themes. --input-bar-button-background-color is gray-200, which
     flips to a dark grey under [theme='dark'] and made the pill near-black with
     dark text (unreadable). Pin it to the theme-invariant white instead. */
  --button-color: var(--color-white);
  --button-hover-color: var(--color-white);
  --button-text-color: var(--color-button-text-primary);
  --button-hover-text-color: var(--color-button-text-primary);
  --button-border-radius: var(--spacing-32);

  /* Keep the disabled state (e.g. Connect-to-Shopify before a URL is typed) the
     same light pill, just dimmed by the button's disabled opacity — otherwise it
     resolves to a dark grey with dark text that reads as broken on the dark modal.
     Also drop the default #444 disabled border so the pill matches the enabled CTA
     (transparent border) rather than gaining an odd dark outline. */
  --disabled-background-color: var(--button-color);
  --disabled-text-color: var(--button-text-color);
  --button-disabled-border-color: var(--color-transparent);
}

/* Disconnect pill button: data-source surface palette (colour + text),
   no border, fully rounded corners. Height stays on the wrapper (layout). */
.automatic-btn-disconnect-pill {
  --button-color: var(--data-source-disconnect-button-color);
  --button-text-color: var(--data-source-disconnect-button-text-color);
  --button-border: none;
  --button-border-radius: var(--radius-100);
}

/* Source-card "Connect" button: data-source background token, no border,
   fully rounded corners. Height stays on the wrapper (layout). */
.automatic-btn-source-connect {
  --button-color: var(--data-source-bg-button);
  --button-border: none;
  --button-border-radius: var(--radius-100);
}

/* Source-card icon button (connected state): transparent fill in every state
   (resting and hover/active), no border, fully rounded — used for the details/
   chevron icon in connected source rows. The matching --button-hover-color keeps
   the navigation chevron from flashing the :root primary blue on tap/hover. */
.automatic-btn-source-icon {
  --button-color: var(--color-transparent);
  --button-hover-color: var(--color-transparent);
  --button-border: none;
  --button-border-radius: var(--radius-100);
}

/* ── HITL confirmation-card button variants ───────────────────────────────────
   Used by FunctionConfirmationCard and DataSourceConnectCard — both render the
   same two-button (edit/cancel + confirm) pattern on the AI dark surface. */

/* Confirm action: badge-colour fill, no border, HITL text palette. */
.btn-hitl-confirm {
  --button-color: var(--ai-confirmation-card-badge);
  --button-text-color: var(--hitl-edit-button-text);
  --button-border: none;
  --button-hover-color: var(--ai-confirmation-card-badge-hover);
  --button-font-weight: var(--font-weight-medium);
}

/* Edit / cancel action: transparent fill, HITL border and text palette. */
.btn-hitl-edit {
  --button-color: transparent;
  --button-text-color: var(--hitl-edit-button-text);
  --button-border: var(--hitl-edit-button-border);
  --button-hover-color: var(--hitl-edit-button-hover-color);
  --button-hover-border: var(--hitl-edit-button-hover-border);
  --button-font-weight: var(--font-weight-medium);
}

/* ── AI-surface Input appearance variants ────────────────────────────────────── */

/* Login-modal Input appearance: AI login surface background, sub-greeting label,
   header-text focus-border, placeholder and typed-text colours, and error token.
   Height, padding, and font-size stay local (layout). */
.automatic-input-login-bg {
  --input-background: var(--ai-login-modal-background-color);
  --input-label-msg-text-color: var(--ai-sub-greeting);
  --input-focus-border: 1px solid var(--ai-login-text-header);
  --input-placeholder-color: var(--ai-login-input-placeholder);
  --input-text-color: var(--ai-login-text-header);
  --input-font-weight: var(--font-weight-medium);
  --input-error-msg-text-color: var(--ai-inputbox-error);
}

/* ── AI-surface Modal appearance variants ────────────────────────────────────── */

/* AI login modal surface: both the content area and the header tile to the AI
   login-surface token. Header weight uses the standard medium token.
   Border-radius and overflow are kept local (responsive/unique values). */
.automatic-modal-login-bg {
  --modal-content-background-color: var(--ai-login-modal-background-color);
  --modal-header-background-color: var(--ai-login-modal-background-color);
  --modal-header-text-weight: var(--font-weight-medium);
}

/* AI chart/analytics modal: content and header tile to the AI background token,
   with the standard AI top-border. The header text-weight (650) and letter-spacing
   are raw values with no matching token — kept local. */
.automatic-modal-ai-bg {
  --modal-content-background-color: var(--ai-background-color);
  --modal-header-background-color: var(--ai-background-color);
  --modal-content-border-top: var(--spacing-1) solid var(--ai-modal-border-top-color);
}

/* Data-source surface modals (Manage Juspay + the merchant/store pickers): tile
   content and header to the AI background token, no top border. Applied via the
   classes= prop / wrapper class on the specific modals that need it, so the token
   lives centrally here instead of being redefined inside the component (which the
   design-system token guardrail forbids) and only the intended modals are darkened
   — the delete-confirmation and login modals keep their own surface. */
.automatic-modal-dark-bg {
  --modal-content-background-color: var(--ai-background-color);
  --modal-header-background-color: var(--ai-background-color);
}

/* StatisticsCard uses the dark AI surface only on /ai. .ai-route is set by the
   (app) layout on .page-content for every /ai path, so this scopes the dark card
   to /ai; every other route keeps the neutral --statistics-card-bg default from
   theme.css :root. The shared card must not be recoloured app-wide. */
.ai-route {
  --statistics-card-bg: var(--ai-background-color);

  /* Within the /ai surface, let every Button fall back to its own --button-color
     on hover/active instead of the :root primary-blue --button-hover-color. This
     stops fill-less buttons (the row chevron, dialog Cancel, action links) from
     flashing blue, and makes coloured buttons hover their own shade. `initial`
     sets the token to the guaranteed-invalid value so the library Button's
     var(--button-hover-color, var(--button-color)) fallback takes over. Scoped to
     /ai via .ai-route — no app-wide change to button hover. */
  --button-hover-color: initial;

  /* Same reasoning for the hover border: the :root blue --button-hover-border must
     not paint a blue ring on in-route AI buttons. Fall back to each button's own
     --button-border. (Portaled modal buttons are pinned via their wrapper classes
     above, since the Modal mounts them outside .ai-route.) */
  --button-hover-border: initial;
}

/* Breeze Automatic floating launcher (FAB): an always-dark branded pill that collapses to a circle.
   Defined here — automatic.css is linked app-wide in app.html — so the launcher (mounted in the root
   layout on every route, not just /ai) is themed without component-local token overrides or :global
   reach. The library Button reads these tokens off the recipe class applied via its `classes` prop. */
.kriya-copilot-fab-recipe {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;

  /* min-width == height keeps the collapsed launcher a circle; width stays fit-content so it grows
     into a pill only when the label expands. */
  min-width: var(--spacing-52);

  --button-height: var(--spacing-52);
  --button-padding: 0 5px;
  --button-border-radius: var(--radius-full);

  /* Theme-stable dark launcher (not flipped in dark mode, unlike --bg-color-inverted). */
  --button-color: var(--color-gray-1900);
  --button-box-shadow: 0 1px 2px rgb(16 24 40 / 35%), 0 10px 28px rgb(16 24 40 / 45%);
  --button-hover-transform: none;
  --button-active-transform: none;

  /* Unadorned launcher: suppress the design-system blue hover border + focus ring. */
  --button-hover-border: none;
  --button-focus-visible-box-shadow: none;
  --image-width: var(--spacing-40);
  --image-height: var(--spacing-40);
}

.kriya-copilot-dragging .kriya-copilot-fab-recipe {
  cursor: grabbing;
}

@media (width <= 600px) {
  .kriya-copilot-fab-recipe {
    align-self: flex-end;
  }
}

/* Breeze Automatic panel close button: borderless, circular, transparent icon button. */
.kriya-copilot-close-recipe {
  pointer-events: auto;

  --button-width: var(--spacing-32);
  --button-height: var(--spacing-32);
  --button-padding: var(--spacing-0);
  --button-border-radius: var(--radius-full);
  --button-color: var(--color-transparent);
  --button-hover-color: var(--bg-color-secondary);
  --button-box-shadow: none;
}