.dot {
  position: relative;
  display: inline-flex;
  width: var(--status-dot-current-size, var(--status-dot-size));
  height: var(--status-dot-current-size, var(--status-dot-size));
  flex-shrink: 0;
  border-radius: var(--radius-chip);
  background: var(--status-dot-current-color, var(--status-dot-tone-color, var(--status-dot-idle)));
  box-shadow: 0 0 0 1px
    var(--status-dot-current-ring, var(--status-dot-tone-ring, var(--status-dot-idle-ring)));
}

.pulse {
  animation: statusDotPulse 1s ease-in-out infinite;
}

@keyframes statusDotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.72;
  }
}

:global(.session-dot),
:global(.connection-status-dot) {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--radius-chip);
}

:global(.session-dot) {
  --status-dot-current-size: 8px;
}

:global(.connection-status-dot) {
  --status-dot-current-size: 6px;
}

:global(.session-dot-idle) {
  --status-dot-current-color: var(--status-dot-idle);
  --status-dot-current-ring: var(--status-dot-idle-ring);
}

:global(.session-dot-starting),
:global(.connection-status-dot-connecting),
:global(.connection-status-dot-reconnecting) {
  --status-dot-current-color: var(--status-dot-starting);
  --status-dot-current-ring: var(--status-dot-starting-ring);
  animation: statusDotPulse 1s ease-in-out infinite;
}

:global(.session-dot-running) {
  --status-dot-current-color: var(--status-dot-running);
  animation: statusDotRunningPulse 1.18s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  box-shadow:
    0 0 0 1px var(--status-dot-running-ring-1),
    0 0 0 5px var(--status-dot-running-ring-2),
    0 0 12px var(--status-dot-running-ring-3);
}

:global(.session-dot-running)::before,
:global(.session-dot-running)::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

:global(.session-dot-running)::before {
  inset: -4px;
  border: 1px solid var(--status-dot-running-ring-ghost);
  opacity: 0.7;
  animation: statusDotRunningRingGhost 1.18s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

:global(.session-dot-running)::after {
  inset: -7px;
  border: 1px solid var(--status-dot-running-ring-outer);
  opacity: 0.75;
  animation: statusDotRunningRing 1.18s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

:global(.connection-status-dot-connected) {
  --status-dot-current-color: var(--status-dot-running);
  --status-dot-current-ring: var(--status-dot-running-ring-1);
}

:global(.session-dot-complete) {
  --status-dot-current-color: var(--status-dot-complete);
  --status-dot-current-ring: var(--status-dot-complete-ring);
}

:global(.connection-status-dot-disconnected) {
  --status-dot-current-color: var(--status-dot-error);
  --status-dot-current-ring: var(--status-dot-error-ring);
}

@keyframes statusDotRunningPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  38% {
    transform: scale(1.18);
    opacity: 0.92;
  }

  62% {
    transform: scale(0.96);
    opacity: 1;
  }
}

@keyframes statusDotRunningRing {
  0% {
    transform: scale(0.78);
    opacity: 0.14;
  }

  35% {
    opacity: 0.68;
  }

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

@keyframes statusDotRunningRingGhost {
  0% {
    transform: scale(0.92);
    opacity: 0.22;
  }

  45% {
    opacity: 0.5;
  }

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

@media (prefers-reduced-motion: reduce) {
  .pulse,
  :global(.session-dot-starting),
  :global(.session-dot-running),
  :global(.connection-status-dot-connecting),
  :global(.connection-status-dot-reconnecting) {
    animation: none;
  }

  :global(.session-dot-running)::before,
  :global(.session-dot-running)::after {
    animation: none;
    opacity: 0.36;
    transform: none;
  }
}
