/* Экран «Мой голос» — дополнения к общему style.css */

.voice-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.voice-status .engine {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.banner {
  background: var(--surface);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.banner code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.85em;
}

.banner-error { border-left-color: var(--danger); color: var(--danger); }

/* Приглашение: зачем эта запись, почему просим спокойный голос, как читать */
.invite {
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 30px 34px;
}

.invite p + p { margin-top: 14px; }

.invite-lead {
  font-family: "Palatino", "Georgia", serif;
  font-size: 1.15rem;
}

.invite-ask {
  color: var(--accent);
  font-size: 1.08rem;
}

.invite-tips {
  list-style: none;
  margin-top: 18px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.invite-tips li { padding-left: 18px; position: relative; }
.invite-tips li::before { content: "·"; position: absolute; left: 4px; }

/* Приглашение перезаписать голос новым текстом (у кого клон уже создан) */
.reclone-note {
  color: var(--accent);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

/* Эталонный текст — крупнее обычного скрипта: его читают вслух с телефона */
.script-view.reference .text { font-size: 1.15rem; line-height: 2.1; }

.recorder {
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 24px;
}

.recorder-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.3rem;
  color: var(--accent);
}

.timer.recording { color: var(--danger); }

.recorder-result { margin-top: 18px; }
.recorder-result audio { width: 100%; }

.hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 12px;
}

/* ---------- Телефон (≤480px): крупные кнопки записи, большой таймер ---------- */
@media (max-width: 480px) {
  .voice-status { gap: 10px; }

  .banner { padding: 14px 16px; font-size: 0.92rem; }

  .invite { padding: 20px 18px; }
  .invite-lead { font-size: 1.08rem; }
  .invite-ask { font-size: 1.05rem; }

  /* Читаем с телефона: буквы не мельче 17px */
  .script-view.reference .text { font-size: 1.12rem; line-height: 2; }

  .recorder { padding: 18px 16px; }

  /* Кнопки записи — стопкой во всю ширину (полноширинность даёт .btn
     из style.css), таймер — большой и по центру */
  .recorder-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .timer { font-size: 2rem; text-align: center; }
}