/* status.css — loading / error / empty / connection states */

.cfm-loading {
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  text-align: center;
  letter-spacing: var(--letter-spacing-wide);
  animation: cfm-pulse 1.4s ease-in-out infinite alternate;
}

@keyframes cfm-pulse {
  from { opacity: 0.4; }
  to { opacity: 0.85; }
}

.cfm-error {
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-status-takeover-fg);
  background: var(--color-status-takeover-bg);
  border: 0.5px solid var(--color-accent-warning);
  border-radius: var(--radius-md);
  margin: var(--space-2) 0;
}

.cfm-empty {
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  text-align: center;
  font-style: italic;
}

.cfm-conn-status {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  color: var(--color-fg-secondary);
  border: 0.5px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  z-index: 50;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.cfm-conn-status[data-state="offline"] {
  background: var(--color-status-takeover-bg);
  color: var(--color-status-takeover-fg);
  border-color: var(--color-accent-warning);
}

.cfm-conn-status[data-state="reconnecting"] {
  background: var(--color-status-network-bg);
  color: var(--color-status-network-fg);
}