/* Виджет записи голоса: один и тот же на всём сайте (владелец 08.10.2026: «этот
   виджет записи везде должен быть на сайте одинаковый»).

   Два состояния одного размера, 264 × 56, как плавающий виджет программы:
   - «Готов» (.rw-ready): микрофон и слово «Готов», вокруг по форме овала
     расходятся волны. Это кнопка: нажатие сразу начинает запись;
   - запись (.lp-rec, капсула «отмена, громкость, время, пауза, готово»):
     появляется на том же месте и того же размера, будто «Готов» превратился в
     записывающий виджет.

   Круглой кнопки микрофона больше нет нигде. Используют: инструменты
   посадочных (голосовой ввод, живой перевод, выставка; lp-tool.js, lp-live.js)
   и точки пробы на главной (try-widget.js), которые открывают тот же
   инструмент во встроенном окне и сразу включают в нём запись. */

:root {
  --rw-w: 264px;
  --rw-h: 56px;
  --rw-accent: #00d4ff;
}

.rw-ready {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  width: var(--rw-w);
  max-width: 100%;
  height: var(--rw-h);
  padding: 0 22px;
  border: 1px solid rgba(0, 212, 255, 0.45);
  border-radius: calc(var(--rw-h) / 2);
  background: rgba(20, 28, 42, 0.95);
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.06), 0 14px 40px -16px rgba(0, 0, 0, 0.8);
  color: #fff;
  font: 700 20px/1 'Onest', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rw-ready:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 212, 255, 0.85);
  box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.1), 0 12px 40px rgba(0, 212, 255, 0.2);
}

.rw-ready:active {
  transform: scale(0.98);
}

.rw-ready:focus-visible {
  outline: 2px solid #12d6df;
  outline-offset: 4px;
}

.rw-ready[hidden] {
  display: none;
}

.rw-ready:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Волны по форме пилюли: контур повторяет её скругление и расходится наружу. */
.rw-ready::before,
.rw-ready::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid rgba(0, 212, 255, 0.55);
  pointer-events: none;
  animation: rw-pulse 2.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.rw-ready::after {
  animation-delay: 1.3s;
}

@keyframes rw-pulse {
  0% {
    inset: -1px;
    opacity: 0.9;
  }
  100% {
    inset: -20px;
    border-radius: 48px;
    opacity: 0;
  }
}

.rw-ready:disabled::before,
.rw-ready:disabled::after {
  display: none;
}

.rw-ready-mic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--rw-accent);
}

.rw-ready-mic svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rw-ready-text {
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

/* Капсула записи того же размера: «Готов» превращается в неё на месте. */
.lp-rec {
  box-sizing: border-box;
  width: var(--rw-w);
  max-width: 100%;
  justify-content: space-between;
}

.lp-rec:not([hidden]) {
  animation: rw-morph 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Флаг языка перевода (lp-tool.js, режим «Перевести на»), как у плавающего
   виджета программы. Полоски громкости те же, что без флага (владелец
   09.10.2026: в функции 02 они были уже и неровные), а место под флаг даёт
   сама капсула: она шире на ширину флага, как виджет программы с флагом. */
.lp-rec-flag {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.lp-rec-flag[hidden] {
  display: none;
}

.lp-rec:has(> .lp-rec-flag:not([hidden])) {
  width: calc(var(--rw-w) + 26px);
}

@keyframes rw-morph {
  from {
    opacity: 0.35;
    transform: scaleX(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 620px) {
  :root {
    --rw-h: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-ready::before,
  .rw-ready::after,
  .lp-rec:not([hidden]) {
    animation: none;
  }

  .rw-ready::after {
    display: none;
  }
}