/* ============================================================
   assistant-voice.css — вид разговора голосом.

   Отдельный файл, а не хвост assistant.css: тот уже у своего потолка,
   а тема здесь одна и понятная — «идёт запись».

   Правило, ради которого всё: запись ВСЕГДА видна. Звук WebRTC играет
   в громкий динамик даже на беззвучном, поэтому пока микрофон открыт,
   на экране горит хотя бы один живой признак — волна на кнопке, пульс
   на кружке или красная точка в полоске. Тихой записи не бывает.

   Состояния приходят из voice-ui.js атрибутом data-voice на .as-root:
     starting  — просим микрофон
     live      — соединились, ждём
     listening — человек говорит
     speaking  — говорит ассистент
   ============================================================ */

/* ============================================================
   КНОПКА МИКРОФОНА
   ============================================================ */
.as-mic__wave {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.as-mic__wave i {
  width: 2px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  animation: as-wave 0.9s ease-in-out infinite;
}
.as-mic__wave i:nth-child(2) { animation-delay: 0.15s; height: 12px; }
.as-mic__wave i:nth-child(3) { animation-delay: 0.3s; }

/* живая волна вместо значка: кнопка нажата — разговор идёт */
.as-mic.is-live {
  background: var(--p-shoot);
  border-color: var(--p-shoot);
  color: #fff;
}
.as-mic.is-live > svg { display: none; }
.as-mic.is-live .as-mic__wave { display: flex; }

@keyframes as-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.7; }
  50%      { transform: scaleY(1.6); opacity: 1; }
}

/* ============================================================
   КРУЖОК — пока шторка свёрнута, он и есть индикатор записи
   ============================================================ */
.as-root.is-voice .as-fab { background: var(--p-shoot); }
.as-root.is-voice .as-fab__ring {
  opacity: 1;
  animation: as-pulse 1.5s ease-out infinite;
}
.as-root.is-voice .as-fab::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #e5484d;
  box-shadow: 0 0 0 2px var(--p-bg-flat);
  animation: as-rec 1.4s ease-in-out infinite;
}
.as-root[data-voice="speaking"] .as-fab__ring { animation-duration: 0.85s; }

@keyframes as-rec {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ============================================================
   СТРОКА ТРАНСКРИПТА — что слышно прямо сейчас
   ============================================================ */
.as-voice-line {
  position: relative;
  margin: 0 14px 6px;
  padding: 7px 12px 7px 26px;
  border-radius: 12px;
  background: var(--p-bg-flat);
  border: 1px solid var(--p-divider);
  color: var(--p-ink-2);
  font-size: 13px;
  line-height: 1.35;
  max-height: 3.9em;
  overflow: hidden;
}
.as-voice-line[hidden] { display: none; }
.as-voice-line::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  margin-top: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e5484d;
  animation: as-rec 1.4s ease-in-out infinite;
}
.as-voice-line.is-me   { color: var(--p-ink); }
.as-voice-line.is-bot  { color: var(--p-ink-2); font-style: italic; }
.as-voice-line.is-fail { color: #b4232a; }
.as-voice-line.is-notice { color: var(--p-ink); font-weight: 600; }

/* ============================================================
   ПОЛОСКА — та же красная точка, чтобы запись читалась и свёрнутой
   ============================================================ */
.as-root.is-voice .as-strip__dot {
  background: #e5484d;
  animation: as-rec 1.4s ease-in-out infinite;
}

/* ============================================================
   ТЁМНАЯ «ПХ»
   ============================================================ */
body[data-theme="ph"] .as-mic.is-live { background: #ff9000; border-color: #ff9000; color: #000; }
body[data-theme="ph"] .as-root.is-voice .as-fab { background: #ff9000; color: #000; }
body[data-theme="ph"] .as-root.is-voice .as-fab::after { box-shadow: 0 0 0 2px #151515; }
body[data-theme="ph"] .as-voice-line { background: #232323; border-color: #2a2a2a; color: #d8d8d8; }
body[data-theme="ph"] .as-voice-line.is-me { color: #fff; }
body[data-theme="ph"] .as-voice-line.is-fail { color: #ff8a8a; }
body[data-theme="ph"] .as-voice-line.is-notice { color: #ff9000; }

/* ============================================================
   БЕЗ АНИМАЦИЙ — но индикатор остаётся: он не украшение
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .as-mic__wave i,
  .as-root.is-voice .as-fab__ring,
  .as-root.is-voice .as-fab::after,
  .as-voice-line::before,
  .as-root.is-voice .as-strip__dot { animation: none; }
  .as-mic__wave i { transform: scaleY(1); }
  .as-root.is-voice .as-fab__ring { opacity: 0.6; }
}