@layer components {
  .recording-status {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    margin-block-start: var(--block-space-half);
    padding: var(--block-space-half);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-ink-lightest);
  }

  .recording-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-negative);
    animation: pulse 1.5s ease-in-out infinite;
  }

  .recording-timer {
    font-size: var(--text-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-negative);
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
}