/* Compact right-side voice panel below input */

.voice-field-wrap,
.comment-modal__textarea-wrap {
  position: relative !important;
  display: block !important;
  overflow: visible !important;
}

/* Поле ввода чистое. Внутри поля больше нет микрофона/таймера/волны */
.voice-field-wrap > input,
.voice-field-wrap > textarea,
.comment-modal__textarea-wrap > textarea {
  padding-right: 16px !important;
  padding-bottom: 14px !important;
}

/* Маленькая капсула справа под полем */
.voice-control-panel {
  margin-top: 7px !important;
  margin-left: auto !important;
  margin-right: 0 !important;

  width: 54px !important;
  min-width: 54px !important;
  max-width: 210px !important;
  height: 34px !important;

  border: 1px solid #dfe7f2 !important;
  border-radius: 999px !important;
  background: #f7faff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;

  padding: 5px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* При записи капсула расширяется, но остаётся справа */
.voice-field-wrap.is-recording .voice-control-panel,
.comment-modal__textarea-wrap.is-recording .voice-control-panel,
.voice-field-wrap.is-transcribing .voice-control-panel,
.comment-modal__textarea-wrap.is-transcribing .voice-control-panel {
  width: 196px !important;
}

/* Микрофон */
.voice-control-panel .voice-mic-btn {
  position: static !important;
  transform: none !important;
  right: auto !important;
  top: auto !important;

  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;

  margin: 0 !important;
  margin-left: auto !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #718198 !important;
  font-size: 0 !important;
  line-height: 1 !important;

  z-index: 3 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.voice-control-panel .voice-mic-btn::before,
.voice-control-panel .voice-mic-btn::after {
  content: none !important;
  display: none !important;
}

.voice-control-panel .voice-mic-btn svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.voice-control-panel .voice-mic-btn.recording {
  color: #e53935 !important;
}

.voice-control-panel .voice-mic-btn.transcribing {
  color: #0b7cff !important;
}

/* Скрытые элементы не занимают место, пока записи нет */
.voice-control-panel .voice-rec-dot,
.voice-control-panel .voice-rec-timer,
.voice-control-panel .voice-rec-wave {
  display: none !important;
}

/* Точка */
.voice-control-panel .voice-rec-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  background: #e53935 !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-rec-dot,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-rec-dot {
  display: block !important;
  animation: voiceDotPulse .9s ease-in-out infinite !important;
}

.voice-field-wrap.is-transcribing .voice-control-panel .voice-rec-dot,
.comment-modal__textarea-wrap.is-transcribing .voice-control-panel .voice-rec-dot {
  display: block !important;
  background: #0b7cff !important;
}

/* Таймер */
.voice-control-panel .voice-rec-timer {
  position: static !important;
  min-width: 34px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #5e6f86 !important;
  white-space: nowrap !important;
}

.voice-control-panel .voice-rec-timer::before {
  content: none !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-rec-timer,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-rec-timer,
.voice-field-wrap.is-transcribing .voice-control-panel .voice-rec-timer,
.comment-modal__textarea-wrap.is-transcribing .voice-control-panel .voice-rec-timer {
  display: inline-block !important;
}

/* Кардиограмма */
.voice-control-panel .voice-rec-wave {
  flex: 0 0 74px !important;
  width: 74px !important;
  height: 14px !important;
  align-items: center !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-rec-wave,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-rec-wave,
.voice-field-wrap.is-transcribing .voice-control-panel .voice-rec-wave,
.comment-modal__textarea-wrap.is-transcribing .voice-control-panel .voice-rec-wave {
  display: flex !important;
}

.voice-control-panel .voice-rec-wave i {
  display: block !important;
  width: 3px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #5f8ed8 !important;
  transform-origin: center !important;
  animation: voiceWave 1.05s ease-in-out infinite !important;
}

.voice-control-panel .voice-rec-wave i:nth-child(1)  { animation-delay: 0s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(2)  { animation-delay: .06s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(3)  { animation-delay: .12s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(4)  { animation-delay: .18s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(5)  { animation-delay: .24s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(6)  { animation-delay: .30s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(7)  { animation-delay: .36s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(8)  { animation-delay: .42s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(9)  { animation-delay: .48s !important; }
.voice-control-panel .voice-rec-wave i:nth-child(10) { animation-delay: .54s !important; }

/* Кнопка комментария сверху */
.question-comment-btn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 15px !important;
  border: 1px solid #dbe6f7 !important;
  background: #fff !important;
  color: #1980ff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
}

.question-comment-btn svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* Комментарий: капсула тоже маленькая справа под textarea */
.comment-modal__textarea-wrap .voice-control-panel {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.comment-modal__status {
  min-height: 24px !important;
  line-height: 1.25 !important;
}

@keyframes voiceWave {
  0%, 100% { transform: scaleY(.55); }
  25%      { transform: scaleY(1.9); }
  50%      { transform: scaleY(.85); }
  75%      { transform: scaleY(1.45); }
}

@keyframes voiceDotPulse {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1; transform: scale(1); }
}

@media (max-width: 420px) {
  .voice-control-panel {
    width: 52px !important;
    min-width: 52px !important;
    height: 32px !important;
    padding: 4px 9px !important;
  }

  .voice-field-wrap.is-recording .voice-control-panel,
  .comment-modal__textarea-wrap.is-recording .voice-control-panel,
  .voice-field-wrap.is-transcribing .voice-control-panel,
  .comment-modal__textarea-wrap.is-transcribing .voice-control-panel {
    width: 184px !important;
  }

  .voice-control-panel .voice-rec-wave {
    flex-basis: 66px !important;
    width: 66px !important;
  }

  .voice-control-panel .voice-rec-wave i {
    width: 2px !important;
  }

  .voice-control-panel .voice-rec-timer {
    min-width: 31px !important;
    font-size: 10.5px !important;
  }
}


/* PATCH26_START */

/* Микрофон: компактная капсула справа, иконка строго по центру */
.voice-control-panel {
  width: 48px !important;
  min-width: 48px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 3px 10px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

.voice-control-panel .voice-mic-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.voice-control-panel .voice-mic-btn svg {
  width: 21px !important;
  height: 21px !important;
  transform: translateY(1px) !important;
}

.voice-field-wrap.is-recording .voice-control-panel,
.comment-modal__textarea-wrap.is-recording .voice-control-panel,
.voice-field-wrap.is-transcribing .voice-control-panel,
.comment-modal__textarea-wrap.is-transcribing .voice-control-panel {
  width: 176px !important;
  justify-content: flex-start !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-mic-btn,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-mic-btn,
.voice-field-wrap.is-transcribing .voice-control-panel .voice-mic-btn,
.comment-modal__textarea-wrap.is-transcribing .voice-control-panel .voice-mic-btn {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.voice-control-panel .voice-rec-wave {
  flex-basis: 56px !important;
  width: 56px !important;
}

/* Верх: комментарий понятнее и не липнет к счётчику */
#questionScreen .step-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 13px !important;
  align-items: start !important;
}

.question-comment-slot {
  justify-self: end !important;
}

.question-comment-btn {
  width: auto !important;
  min-width: 104px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  border-radius: 15px !important;
  font-size: 0 !important;
}

.question-comment-btn::after {
  content: "Комментарий";
  display: inline-block;
  font: 900 11px/1 Arial, system-ui, sans-serif;
  letter-spacing: -.02em;
  color: currentColor;
}

.question-comment-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
}

@media (max-width: 380px) {
  .question-comment-btn {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
  }

  .question-comment-btn::after {
    display: none !important;
  }
}

/* Прикрепление файлов */
.question-attach-panel {
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.question-attach-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.question-attach-title {
  min-width: 0 !important;
  font: 900 14px/1.2 Arial, system-ui, sans-serif !important;
  color: #344054 !important;
}

.question-attach-btn {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #0b7cff !important;
  font: 900 13px/1 Arial, system-ui, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.question-attach-btn:disabled {
  opacity: .55 !important;
}

.question-attach-list {
  margin-top: 9px !important;
  display: grid !important;
  gap: 6px !important;
}

.question-attach-empty,
.question-attach-file,
.question-attach-status {
  font: 800 12px/1.25 Arial, system-ui, sans-serif !important;
  color: #667085 !important;
}

.question-attach-file {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid #e6edf7 !important;
  color: #344054 !important;
}

.question-attach-status {
  min-height: 16px !important;
  margin-top: 7px !important;
  color: #0b7cff !important;
}

/* PATCH26_END */


/* PATCH27_START */

/* Не показывать голосовой ввод внутри панели файлов */
.question-attach-panel .voice-control-panel,
.question-attach-panel .voice-mic-btn,
.question-attach-panel .voice-rec-timer,
.question-attach-panel .voice-rec-wave {
  display: none !important;
}

/* Микрофон ровнее внутри компактной капсулы */
.voice-control-panel {
  width: 46px !important;
  min-width: 46px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  align-items: center !important;
  justify-content: center !important;
}

.voice-control-panel .voice-mic-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

.voice-control-panel .voice-mic-btn svg {
  width: 21px !important;
  height: 21px !important;
  transform: translateY(0) !important;
}

/* Верхняя кнопка комментария: чуть левее, понятнее */
#questionScreen .step-meta {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  column-gap: 16px !important;
}

.question-comment-slot {
  justify-self: end !important;
  margin-right: 4px !important;
}

.question-comment-btn {
  min-width: 112px !important;
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  gap: 6px !important;
  font-size: 0 !important;
}

.question-comment-btn::after {
  content: "Коммент.";
  display: inline-block !important;
  font: 900 11px/1 Arial, system-ui, sans-serif !important;
  color: currentColor !important;
}

@media (max-width: 370px) {
  .question-comment-btn {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
  }

  .question-comment-btn::after {
    display: none !important;
  }
}

/* Модалка комментария: без автоклавиатуры, но с прокруткой при ручном вводе */
.comment-modal.open .comment-modal__box {
  max-height: 82vh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.comment-modal__textarea-wrap .voice-control-panel {
  margin-top: 8px !important;
}

/* Прогресс загрузки файлов */
.question-attach-progress {
  margin-top: 10px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #e7eef8 !important;
  overflow: hidden !important;
}

.question-attach-progress span {
  display: block !important;
  width: 0%;
  height: 100% !important;
  border-radius: 999px !important;
  background: #0b7cff !important;
  transition: width .18s ease !important;
}

.question-attach-status {
  min-height: 18px !important;
  margin-top: 8px !important;
  color: #0b7cff !important;
  font: 900 12px/1.25 Arial, system-ui, sans-serif !important;
}

/* PATCH27_END */


/* PATCH28_START */

/* Красный крестик удаления файла */
.question-attach-file {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.question-attach-file-name {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow-wrap: anywhere !important;
}

.question-attach-delete {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffe8e8 !important;
  color: #d92d20 !important;
  font: 900 20px/1 Arial, system-ui, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Финальная кнопка */
#submitBtn.is-done {
  background: #12b76a !important;
}

/* Админка: опасная кнопка */
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #dc2626;
  font: 900 14px/1 Arial, system-ui, sans-serif;
  text-decoration: none;
}

/* Комментарий: чуть выше, чтобы микрофон чаще был виден */
.comment-modal.open .comment-modal__box {
  transform: translateY(-4vh) !important;
}

/* PATCH28_END */


/* PATCH29_START */

/* Вход в админку на стартовом/финальном экране */
.start-card .admin-link,
.finish-screen .admin-link {
  display: inline-flex !important;
  margin-top: 14px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1px solid #dbe3ef !important;
  color: #334155 !important;
  font: 900 15px/1 Arial, system-ui, sans-serif !important;
  text-decoration: none !important;
}

/* PATCH29_END */


/* PATCH32_START */

/* Капсула записи: красная точка + время рядом + волна + микрофон */
.voice-field-wrap.is-recording .voice-control-panel,
.comment-modal__textarea-wrap.is-recording .voice-control-panel {
  width: 158px !important;
  min-width: 158px !important;
  height: 32px !important;
  padding: 0 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-rec-dot,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-rec-dot {
  display: block !important;
  order: 1 !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  margin: 0 !important;
  background: #e53935 !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-rec-timer,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-rec-timer {
  display: inline-block !important;
  order: 2 !important;
  min-width: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #344054 !important;
  font: 900 11px/1 Arial, system-ui, sans-serif !important;
  white-space: nowrap !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-rec-wave,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-rec-wave {
  display: flex !important;
  order: 3 !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 14px !important;
  margin: 0 !important;
}

.voice-field-wrap.is-recording .voice-control-panel .voice-mic-btn,
.comment-modal__textarea-wrap.is-recording .voice-control-panel .voice-mic-btn {
  order: 4 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  color: #e53935 !important;
}

.voice-field-wrap.is-transcribing .voice-control-panel,
.comment-modal__textarea-wrap.is-transcribing .voice-control-panel {
  width: 132px !important;
}

/* PATCH32_END */