@layer components {
  .agent-banner {
    padding: var(--card-padding);
    border-radius: var(--radius);
    margin-block-end: var(--block-space);
    background: var(--color-waiting-bg);
    color: var(--color-waiting-ink);
  }

  /* Compounded with .tag to outrank `.masthead nav a`, which would otherwise repaint it. */
  .tag.agent-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-block: 0.2rem;
    padding-inline: 0.5rem;
    background: var(--pill-bg);
    color: var(--pill-ink);
    text-decoration: none;

    &::before {
      content: "";
      inline-size: 0.4rem;
      block-size: 0.4rem;
      border-radius: 50%;
      background: currentColor;
    }

    &:hover {
      background: var(--pill-bg);
      color: var(--pill-ink);
      outline: 1px solid currentColor;
    }
  }

  .tag.agent-state--paused {
    --pill-bg: var(--color-waiting-bg);
    --pill-ink: var(--color-waiting-ink);

    font-weight: 600;
  }
}