.pulse-dot {
  position: relative;
  width: 12px;
  height: 12px;
  background: var(--primary);
  
  border-radius: 50%;
  flex-shrink: 0;
  
}


.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 2s ease-out infinite;
  z-index: 0;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }