.egg-dot {
  appearance: none;
  width: 6px;
  height: 6px;
  padding: 0;
  margin: 0 0 0 0.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand-blue, #107CF6);
  opacity: 0.24;
  cursor: pointer;
  vertical-align: middle;
  transform: translateY(-1px);
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.egg-dot:hover,
.egg-dot:focus-visible,
.egg-dot[aria-expanded="true"] {
  opacity: 0.82;
  transform: translateY(-1px) scale(1.18);
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 124, 246, 0.10);
}

.egg-popover {
  position: fixed;
  z-index: 2000;
  max-width: min(282px, calc(100vw - 2rem));
  padding: 0;
  color: var(--ink, #0A1628);
  font-size: 0.82rem;
  line-height: 1.45;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.egg-popover::before {
  content: "";
  position: absolute;
  left: clamp(20px, var(--egg-anchor-x, 50%), calc(100% - 20px));
  top: -27px;
  width: 26px;
  height: 27px;
  background:
    radial-gradient(circle 2px at 48% 3px, rgba(16, 124, 246, 0.085) 99%, transparent 100%),
    radial-gradient(circle 3px at 47% 13px, rgba(16, 124, 246, 0.10) 99%, transparent 100%),
    radial-gradient(circle 4px at 56% 24px, rgba(16, 124, 246, 0.12) 99%, transparent 100%);
  transform: translateX(-50%);
}

.egg-popover.is-above::before {
  top: auto;
  bottom: -27px;
  background:
    radial-gradient(circle 4px at 56% 3px, rgba(16, 124, 246, 0.115) 99%, transparent 100%),
    radial-gradient(circle 3px at 47% 14px, rgba(16, 124, 246, 0.10) 99%, transparent 100%),
    radial-gradient(circle 2px at 48% 24px, rgba(16, 124, 246, 0.085) 99%, transparent 100%);
}

.egg-popover.is-right::before,
.egg-popover.is-left::before {
  top: clamp(18px, var(--egg-anchor-y, 50%), calc(100% - 18px));
  bottom: auto;
  width: 28px;
  height: 24px;
  transform: translateY(-50%);
}

.egg-popover.is-right::before {
  left: -30px;
  background:
    radial-gradient(circle 2px at 4px 50%, rgba(16, 124, 246, 0.085) 99%, transparent 100%),
    radial-gradient(circle 3px at 14px 48%, rgba(16, 124, 246, 0.10) 99%, transparent 100%),
    radial-gradient(circle 4px at 25px 53%, rgba(16, 124, 246, 0.12) 99%, transparent 100%);
}

.egg-popover.is-left::before {
  left: auto;
  right: -30px;
  background:
    radial-gradient(circle 4px at 3px 53%, rgba(16, 124, 246, 0.12) 99%, transparent 100%),
    radial-gradient(circle 3px at 14px 48%, rgba(16, 124, 246, 0.10) 99%, transparent 100%),
    radial-gradient(circle 2px at 24px 50%, rgba(16, 124, 246, 0.085) 99%, transparent 100%);
}

.egg-popover-text {
  position: relative;
  display: block;
  padding: 0.78rem 1rem;
  border: 1px solid rgba(16, 124, 246, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.985);
  box-shadow:
    0 8px 18px rgba(10, 22, 40, 0.07),
    0 1px 3px rgba(16, 124, 246, 0.05);
}

.egg-popover.is-open {
  opacity: 1;
  transform: translateY(0);
}

.egg-popover[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .egg-dot {
    width: 8px;
    height: 8px;
    margin-left: 0.5rem;
  }
}