.kt-survey {
  position: fixed;
  z-index: 60;
  right: 88px;
  bottom: 24px;
  width: min(400px, calc(100vw - 112px));
  padding: 30px;
  border: 1px solid rgba(19, 139, 255, .42);
  border-radius: 6px;
  background: rgba(8, 13, 23, .96);
  color: #fff;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .48), 0 0 28px rgba(19, 139, 255, .12);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.kt-survey.is-open {
  opacity: 1;
  transform: translateY(0);
}

.kt-survey__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b8b8bd;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

.kt-survey__close:hover,
.kt-survey__close:focus-visible {
  color: #138bff;
  outline: 2px solid #138bff;
  outline-offset: 2px;
}

.kt-survey h2 {
  margin: 0 36px 12px 0;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.kt-survey__question {
  margin: 0 0 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.kt-survey__score {
  display: flex;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 4px;
}

.kt-survey__score output {
  color: #138bff;
  font-size: 24px;
  font-weight: 600;
}

.kt-survey input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #138bff;
  cursor: pointer;
}

.kt-survey__ticks,
.kt-survey__labels {
  display: flex;
  justify-content: space-between;
}

.kt-survey__ticks {
  margin-top: 7px;
  color: #b8b8bd;
  font-size: 11px;
}

.kt-survey__labels {
  gap: 20px;
  margin-top: 8px;
  color: #b8b8bd;
  font-size: 12px;
  line-height: 1.35;
}

.kt-survey__labels span:last-child {
  text-align: right;
}

.kt-survey__honeypot {
  position: absolute;
  left: -10000px;
}

.kt-survey__submit {
  display: block;
  min-width: 104px;
  min-height: 44px;
  margin: 22px 0 0 auto;
  padding: 10px 22px;
  border: 1px solid #138bff;
  border-radius: 4px;
  background: #138bff;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.kt-survey__submit:hover,
.kt-survey__submit:focus-visible {
  background: #fff;
  color: #07111f;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.kt-survey__submit:disabled {
  cursor: wait;
  opacity: .6;
}

.kt-survey__status {
  min-height: 18px;
  margin: 10px 0 0;
  color: #ffb4b4;
  font-size: 12px;
  text-align: right;
}

.kt-survey__success {
  margin: 22px 0 4px;
  color: #fff;
  font-size: 17px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .kt-survey {
    right: 14px;
    bottom: 72px;
    width: calc(100vw - 28px);
    padding: 24px 20px;
  }

  .kt-survey__ticks {
    font-size: 10px;
  }
}

@media (max-width: 1024px) and (max-height: 560px) {
  .kt-survey {
    /* Leave room for the 70px header, 98px bottom navigation and 12px gaps. */
    z-index: 110;
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 192px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 192px - env(safe-area-inset-bottom, 0px));
    /* Reserve a separate column so the sticky close button never covers content. */
    padding: 24px 62px 24px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .kt-survey__close {
    position: sticky;
    z-index: 1;
    top: 0;
    right: auto;
    float: right;
    margin: -14px -34px 0 0;
    background: #080d17;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kt-survey {
    transition: none;
  }
}