/* V21 mobile polish: fit questionnaire into narrow phone screens */

:root {
  --v21-blue: #0074ff;
  --v21-black: #000;
  --v21-text: #070b13;
  --v21-muted: #303846;
  --v21-line: #dfe6ef;
  --v21-soft: #f5f7fb;
  --v21-shadow: 0 18px 46px rgba(0,0,0,.11);
}

html,
body {
  background: #fff !important;
  color: var(--v21-text) !important;
  overflow-x: hidden !important;
}

/* Убираем лишние старые декорации */
.boot-screen,
.boot-scene,
#drillSketch,
.drill-sketch,
.ux-loader,
#uxLoader {
  display: none !important;
}

/* Левая ручка уже, чтобы не съедала экран */
.side-rail,
.safe-drawer-handle {
  width: 30px !important;
}

.side-rail {
  height: 202px !important;
  left: 0 !important;
  border-radius: 0 22px 22px 0 !important;
}

.side-rail span,
.safe-drawer-title {
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
}

.side-rail b,
.safe-drawer-arrow,
.ux-drawer-arrow {
  display: none !important;
}

.side-rail::before,
.side-rail::after,
.safe-drawer-pill::before,
.safe-drawer-pill::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 13px !important;
  height: 13px !important;
  border-top: 3px solid var(--v21-blue) !important;
  border-right: 3px solid var(--v21-blue) !important;
  transform: translateX(-50%) rotate(45deg) !important;
}

.side-rail::before,
.safe-drawer-pill::before {
  top: 17px !important;
}

.side-rail::after,
.safe-drawer-pill::after {
  bottom: 17px !important;
}

/* Стартовый экран */
#startScreen,
.start-screen {
  min-height: 100svh !important;
  padding: 14px 10px 14px 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.start-card {
  width: 100% !important;
  max-width: 440px !important;
  max-height: calc(100svh - 28px) !important;
  min-height: auto !important;
  padding: 24px 20px 24px !important;
  border-radius: 30px !important;
  background: #fff !important;
  border: 1px solid var(--v21-line) !important;
  box-shadow: var(--v21-shadow) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.start-card::-webkit-scrollbar {
  display: none !important;
}

.start-card h1 {
  font-size: clamp(32px, 9.2vw, 48px) !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  font-weight: 950 !important;
  color: #000 !important;
  margin: 0 0 18px !important;
  text-align: left !important;
}

.start-card p {
  font-size: clamp(18px, 5vw, 24px) !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  color: #141b27 !important;
  margin: 0 0 22px !important;
  text-align: left !important;
}

#startBtn {
  min-height: 56px !important;
  border-radius: 999px !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

/* Экран вопроса */
#questionScreen,
.question-screen {
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 10px 8px 10px 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.question-card {
  width: 100% !important;
  max-width: 440px !important;
  max-height: calc(100svh - 20px) !important;
  padding: 18px 16px 14px !important;
  border-radius: 28px !important;
  background: #fff !important;
  border: 1px solid var(--v21-line) !important;
  box-shadow: var(--v21-shadow) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.question-card::-webkit-scrollbar {
  display: none !important;
}

/* Верхняя строка: раздел + счетчик */
.step-meta {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
  color: #1b2431 !important;
}

#counter,
.counter {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  text-align: right !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  color: #000 !important;
}

/* Полоса прогресса */
.safe-progress,
.progress,
.progress-bar {
  height: 6px !important;
  margin: 0 0 10px !important;
  border-radius: 999px !important;
}

/* Вопрос и подсказка */
#questionText {
  font-size: clamp(27px, 7.2vw, 36px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.052em !important;
  font-weight: 950 !important;
  color: #000 !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}

#hintText {
  font-size: clamp(16px, 4.35vw, 20px) !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  color: #2b3544 !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}

/* Поле ответа */
.answer-host {
  position: relative !important;
  margin-top: 8px !important;
}

.input,
.textarea,
.select,
.answer-host input,
.answer-host textarea,
.answer-host select {
  min-height: 50px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  border: 1px solid var(--v21-line) !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  padding: 12px 50px 12px 15px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.05) !important;
}

.answer-host textarea {
  min-height: 78px !important;
}

/* Маленький микрофон вместо огромного блока */
.safe-mic-btn,
#safeMicBtn,
.ux-mic-btn,
#uxMicBtn {
  position: absolute !important;
  right: 7px !important;
  top: 7px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #edf4ff !important;
  color: var(--v21-blue) !important;
  font-size: 18px !important;
  box-shadow: 0 6px 18px rgba(0,116,255,.14) !important;
  z-index: 30 !important;
}

/* Сам старый широкий voice-блок прячем, чтобы не ломал экран */
.answer-host .voice-box,
.answer-host .voice-panel,
.voice-box,
.voice-panel {
  max-height: 24px !important;
  min-height: 0 !important;
  height: 24px !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #5a6472 !important;
}

.voice-box button,
.voice-panel button,
.voice-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  opacity: .35 !important;
}

.voice-box button::before,
.voice-panel button::before,
.voice-btn::before {
  content: "" !important;
}

.voice-box strong,
.voice-panel strong,
.voice-label {
  display: none !important;
}

.voice-box span,
.voice-panel span,
.voice-status,
.voice-timer {
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  color: #5a6472 !important;
}

/* Кнопки */
.card-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas:
    "back next"
    "skip skip" !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#backBtn {
  grid-area: back !important;
}

#nextBtn {
  grid-area: next !important;
  background: var(--v21-blue) !important;
  color: #fff !important;
  font-weight: 950 !important;
}

#skipBtn {
  grid-area: skip !important;
  background: var(--v21-soft) !important;
  color: #202936 !important;
  font-weight: 850 !important;
  opacity: .86 !important;
}

#backBtn,
#skipBtn,
#nextBtn,
.primary-btn,
.secondary-btn {
  min-height: 46px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  border: 0 !important;
}

/* На вопросах без ответа голосовой блок не показываем */
.question-card.info-mode .voice-box,
.question-card.info-mode .voice-panel,
.question-card.info-mode #safeMicBtn,
.question-card.info-mode #uxMicBtn {
  display: none !important;
}

/* Очень узкие телефоны */
@media (max-width: 380px) {
  #startScreen,
  .start-screen,
  #questionScreen,
  .question-screen {
    padding-left: 34px !important;
    padding-right: 6px !important;
  }

  .side-rail,
  .safe-drawer-handle {
    width: 28px !important;
  }

  .question-card,
  .start-card {
    border-radius: 24px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #questionText {
    font-size: clamp(24px, 6.9vw, 32px) !important;
  }

  #hintText {
    font-size: clamp(15px, 4.05vw, 18px) !important;
  }

  .input,
  .textarea,
  .select,
  .answer-host input,
  .answer-host textarea,
  .answer-host select {
    font-size: 17px !important;
    min-height: 48px !important;
  }

  #backBtn,
  #skipBtn,
  #nextBtn,
  .primary-btn,
  .secondary-btn {
    min-height: 44px !important;
    font-size: 15px !important;
  }
}

/* Десктоп: нормальная центральная карточка */
@media (min-width: 900px) {
  #startScreen,
  .start-screen,
  #questionScreen,
  .question-screen {
    padding-left: 64px !important;
    padding-right: 24px !important;
  }

  .start-card,
  .question-card {
    max-width: 620px !important;
  }

  #questionText {
    font-size: 42px !important;
  }

  #hintText {
    font-size: 22px !important;
  }
}


/* PATCH_LAKIZA_CENTER_AND_SIDE_RAIL_20260604
   Центрируем контент по реальному экрану.
   Левый язычок меню переводим в отдельный полупрозрачный слой.
*/

@media (max-width: 700px) {
  #startScreen,
  .start-screen {
    padding-left: 10px !important;
    padding-right: 10px !important;
    justify-content: center !important;
  }

  #questionScreen,
  .question-screen {
    padding-left: 8px !important;
    padding-right: 8px !important;
    justify-content: center !important;
  }

  .start-card,
  .question-card {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .side-rail {
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 80 !important;
    width: 32px !important;
    height: 202px !important;
    opacity: .62 !important;
    background: rgba(255,255,255,.68) !important;
    border: 1px solid rgba(0,116,255,.18) !important;
    border-left: 0 !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .side-rail:active,
  .side-rail:focus,
  .side-rail:hover {
    opacity: .92 !important;
  }

  .side-rail span {
    color: rgba(0,0,0,.76) !important;
  }

  .side-rail::before,
  .side-rail::after {
    opacity: .78 !important;
  }
}