@layer components {
  /* Audio Test — connection status indicator */

  .audio-test__status {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space) var(--inline-space-l);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-weight: 500;

    &::before {
      content: "";
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      background: var(--color-ink-muted);
      flex-shrink: 0;
    }

    &[data-state="connecting"]::before {
      background: var(--color-warning);
      animation: pulse 1s ease infinite;
    }

    &[data-state="connected"]::before {
      background: var(--color-positive);
    }

    &[data-state="error"]::before {
      background: var(--color-negative);
    }
  }

  @keyframes pulse {
    50% { opacity: 0.4; }
  }

}