@layer components {
  input[type="submit"], button, .agentAction {
    box-sizing: border-box;
    display: inline-block;
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    line-height: 1em;
    font: inherit;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-button-background-default);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  button:hover, input[type="submit"]:hover, .agentAction:hover {
    background: var(--color-button-background-focus);
  }

  button.btn-danger, button.btn-danger-mini {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
    color: var(--color-danger);
  }

  button.btn-danger-mini {
    margin: 0;
    padding: 0 var(--space-sm);
  }

  button.btn-danger:hover, button.btn-danger-mini:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
    box-shadow: var(--shadow-md);
  }

  /* Primary action — Indigo Deep on Paper text. Reserved for the most
     important action on a page (form submit, primary CTA). Use sparingly. */
  .agentAction.agentAction--primary,
  button.agentAction--primary,
  input[type="submit"].agentAction--primary {
    background: var(--color-theme);
    color: var(--color-text-light);
    border-color: var(--color-theme);
  }

  .agentAction.agentAction--primary:hover,
  button.agentAction--primary:hover,
  input[type="submit"].agentAction--primary:hover {
    background: var(--color-theme-hover);
    border-color: var(--color-theme-hover);
    color: var(--color-text-light);
  }

  .agentAction--primary:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  .button_to {
    display: inline-block;
  }

  /* Agent-only chrome link. Used for agent affordances that should NOT read
     like the customer's body links (Indigo Deep). A muted chip — slightly
     bordered, slightly muted — recognizable as agent chrome at a glance.
     Applies to both anchors (chips that navigate) and buttons (chips that
     POST inline, e.g. the one-click Transfer chip). */
  a.agentLink,
  a.agentLink:visited,
  button.agentLink {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    margin: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
                color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  a.agentLink:hover,
  button.agentLink:hover {
    color: var(--color-text);
    border-color: var(--color-border);
    background: transparent;
    text-decoration: none;
  }

  a.agentLink:focus-visible,
  button.agentLink:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  /* When borrowed by a <th> as a column-header label, drop the chip styling
     and keep just the muted color so the header reads as quiet table chrome. */
  th.agentLink {
    color: var(--color-text-muted);
    font-weight: 400;
  }

  @media (prefers-reduced-motion: reduce) {
    a.agentLink,
    button.agentLink {
      transition: none;
    }
  }
}