/* TBE final real Voice radar. This wins over older radar attempts. */

/* Hide old pseudo radar attempts so only the real radar is visible. */
body.voice-page-body .tbe-voice-radar,
body.voice-page-body .voice-sidebar::before,
body.voice-page-body .voice-sidebar::after,
body.voice-page-body .voice-control-card::before,
body.voice-page-body .voice-control-card::after {
  display: none !important;
  content: none !important;
}

/* Let the radar sit below the left voice card. */
body.voice-page-body .voice-sidebar,
body.voice-page-body .voice-control-card {
  position: relative !important;
  overflow: visible !important;
}

/* Real radar circle. */
body.voice-page-body .voice-card-radar {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 1.1rem) !important;
  width: 190px !important;
  height: 190px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.68 !important;
  overflow: hidden !important;
  isolation: isolate !important;

  border: 1px solid rgba(124, 255, 58, 0.34) !important;
  background:
    radial-gradient(circle at center, rgba(124, 255, 58, 0.16), transparent 56%),
    linear-gradient(90deg, transparent 49.5%, rgba(124, 255, 58, 0.16) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(124, 255, 58, 0.12) 50%, transparent 50.5%),
    repeating-radial-gradient(
      circle at center,
      rgba(124, 255, 58, 0.24) 0 1px,
      transparent 1px 31px
    ),
    rgba(0, 12, 5, 0.18) !important;

  box-shadow:
    inset 0 0 24px rgba(124, 255, 58, 0.18),
    0 0 28px rgba(124, 255, 58, 0.16),
    0 0 52px rgba(0, 0, 0, 0.42) !important;
}

/* Moving sweep cone. */
body.voice-page-body .voice-card-radar-sweep {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  transform-origin: 50% 50% !important;
  z-index: 2 !important;
  opacity: 0.95 !important;
  will-change: transform !important;

  background:
    conic-gradient(
      from -34deg,
      rgba(124, 255, 58, 0.44) 0deg,
      rgba(124, 255, 58, 0.22) 12deg,
      rgba(124, 255, 58, 0.08) 30deg,
      transparent 54deg,
      transparent 360deg
    ) !important;

  animation: tbeFinalRealRadarSpin 2.8s linear infinite !important;
}

/* Bright scanning arm. */
body.voice-page-body .voice-card-radar-sweep::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 50% !important;
  height: 2px !important;
  transform-origin: left center !important;
  background: linear-gradient(
    90deg,
    rgba(225, 255, 185, 1),
    rgba(124, 255, 58, 0.6),
    rgba(124, 255, 58, 0)
  ) !important;
  box-shadow: 0 0 14px rgba(124, 255, 58, 0.9) !important;
}

/* Stationary dots. */
body.voice-page-body .voice-card-radar-dot {
  display: block !important;
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  background: rgba(160, 255, 106, 0.9) !important;
  box-shadow:
    0 0 8px rgba(124, 255, 58, 0.58),
    0 0 16px rgba(244, 211, 122, 0.18) !important;
}

body.voice-page-body .voice-card-radar-dot.dot-a {
  left: 31% !important;
  top: 37% !important;
}

body.voice-page-body .voice-card-radar-dot.dot-b {
  left: 63% !important;
  top: 56% !important;
}

body.voice-page-body .voice-card-radar-dot.dot-c {
  left: 45% !important;
  top: 72% !important;
  background: rgba(244, 211, 122, 0.72) !important;
}

@keyframes tbeFinalRealRadarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-height: 820px) {
  body.voice-page-body .voice-card-radar {
    width: 155px !important;
    height: 155px !important;
    top: calc(100% + 0.9rem) !important;
    opacity: 0.56 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.voice-page-body .voice-card-radar-sweep {
    animation: none !important;
  }
}