/**
 * AIStatusIndicator styles
 * Designed to be minimal and blend with Pulse's header
 */

.ai-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s ease;
  color: var(--text-secondary, #9ca3af);
}

.ai-status-indicator:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Healthy state - very subtle */
.ai-status--healthy {
  color: var(--success-color, #22c55e);
  opacity: 0.7;
}

.ai-status--healthy:hover {
  opacity: 1;
}

/* Watch state - noticeable but not alarming */
.ai-status--watch {
  color: var(--info-color, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

.ai-status--watch:hover {
  background: rgba(59, 130, 246, 0.15);
}

/* Issues state - draws attention */
.ai-status--issues {
  color: var(--warning-color, #eab308);
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.25);
}

.ai-status--issues:hover {
  background: rgba(234, 179, 8, 0.15);
}

/* Icon */
.ai-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-status-icon svg {
  display: block;
}

/* Count badge */
.ai-status-count {
  font-size: 11px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}