.conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.conn-badge-icon {
  font-size: 0.7rem;
}

.conn-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-faint);
  flex-shrink: 0;
}

.conn-badge-connected {
  color: var(--color-success);
  border-color: transparent;
  background: var(--color-success-soft);
}

.conn-badge-connected .conn-badge-dot {
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
}

.conn-badge-connecting {
  color: var(--color-warning);
  border-color: transparent;
  background: var(--color-warning-soft);
}

.conn-badge-connecting .conn-badge-dot {
  background: var(--color-warning);
  animation: conn-badge-pulse 1s ease-in-out infinite;
}

.conn-badge-connecting .conn-badge-icon {
  animation: conn-badge-spin 1.1s linear infinite;
}

.conn-badge-disconnected {
  color: var(--color-danger);
  border-color: transparent;
  background: var(--color-danger-soft);
}

.conn-badge-disconnected .conn-badge-dot {
  background: var(--color-danger);
}

@keyframes conn-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.4); }
}

@keyframes conn-badge-spin {
  to { transform: rotate(360deg); }
}

/* نسخه فشرده — برای هدر پنل‌های چت (آزمایشگاه تست) که جا کمتری دارند */
.conn-badge.conn-badge-compact {
  padding: 2px 8px;
  font-size: 0.66rem;
}

@media (prefers-reduced-motion: reduce) {
  .conn-badge-dot,
  .conn-badge-icon { animation: none; }
}