[x-cloak] { display: none !important; }

.status-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  display: inline-block;
}

.status-dot.online {
  background-color: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulse-green 2s infinite;
}

.status-dot.offline {
  background-color: #ef4444;
}

.status-dot.connecting {
  background-color: #f59e0b;
  animation: pulse-amber 1.5s infinite;
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes pulse-amber {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}