@layer components {
  /* Connection status indicator -- persistent in editor chrome */
  .connection-status {
    align-items: center;
    display: inline-flex;
    font-size: var(--text-xs);
    gap: 0.4em;
    color: var(--color-ink-muted);
    transition: color var(--transition-normal), opacity var(--transition-normal);
  }

  .connection-status__dot {
    border-radius: 50%;
    block-size: 0.5rem;
    inline-size: 0.5rem;
    flex-shrink: 0;
    background-color: currentColor;
    transition: background-color var(--transition-normal);
  }

  /* Saved -- no visual noise, barely visible */
  .connection-status--saved {
    color: var(--color-ink-muted);
    opacity: 0.5;
  }

  /* Saving -- subtle animated */
  .connection-status--saving {
    color: var(--color-status-saving);
    opacity: 1;
  }

  .connection-status--saving .connection-status__dot {
    animation: pulse 1.2s ease-in-out infinite;
  }

  /* Offline -- amber warning */
  .connection-status--offline {
    color: var(--color-status-offline);
    opacity: 1;
  }

  /* Error -- red */
  .connection-status--error {
    color: var(--color-status-error);
    opacity: 1;
  }

  /* Reconnected -- brief green flash */
  .connection-status--reconnected {
    color: var(--color-status-saved);
    opacity: 1;
  }

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