.kot-ride-cue {
  position: fixed;
  z-index: 140;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(207, 177, 255, 0.42);
  border-radius: 999px;
  color: #d8b9ff;
  background: rgba(8, 3, 18, 0.34);
  box-shadow:
    0 0 24px rgba(151, 87, 255, 0.36),
    inset 0 0 18px rgba(151, 87, 255, 0.12);
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 0.58;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.kot-ride-cue::before {
  content: "";
  width: 14px;
  height: 14px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  animation: kotCuePulse 1600ms ease-in-out infinite;
}

.kot-ride-cue:hover,
.kot-ride-cue:focus-visible,
.kot-ride-cue.is-waiting {
  opacity: 1;
  background: rgba(38, 15, 70, 0.56);
  border-color: rgba(232, 215, 255, 0.78);
  outline: none;
  transform: translateX(-50%) translateY(-2px);
}

.kot-ride-cue.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.kot-ride-cue[data-direction="up"]::before {
  transform: translateY(3px) rotate(225deg);
}

@keyframes kotCuePulse {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(-5px) rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: translateY(2px) rotate(45deg);
  }
}

@media (max-width: 700px) {
  .kot-ride-cue {
    width: 42px;
    height: 42px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kot-ride-cue::before {
    animation: none;
  }
}