/* Запись голоса в поле (static/js/voice-record.js, partials/_voice_hint.html). Работает и на сайте, и в разделе для организаций, и в Центре. */
.vrec { --vrec-wave: #14284b; margin: 4px 0 8px; max-width: 100%; }
.vrec [hidden] { display: none !important; }
.vrec--solo { margin: 6px 0 10px; }

.vrec-start, .vrec-done, .vrec-cancel, .vrec-retry {
  appearance: none; font: inherit; font-weight: 700; font-size: 1rem; min-height: 48px; padding: 8px 18px;
  border-radius: 10px; cursor: pointer; line-height: 1.2; touch-action: manipulation;
}
.vrec-start { display: inline-flex; align-items: center; gap: 8px; background: var(--navy, #14284b); color: #fff; border: 2px solid var(--navy, #14284b); }
.vrec-start:hover { background: var(--navy-2, var(--navy-700, #1f3d6e)); }
.vrec-start:disabled { opacity: .6; cursor: wait; }
.vrec-mic { font-size: 1.15em; }
.vrec-done { background: var(--amber, #f5b800); color: #14284b; border: 2px solid var(--amber, #f5b800); }
.vrec-done:hover { background: var(--amber-hi, #ffd54a); }
.vrec-cancel, .vrec-retry { background: transparent; color: var(--navy, #14284b); border: 2px solid var(--navy, #14284b); }
.vrec-cancel:hover, .vrec-retry:hover { background: var(--navy-soft, var(--navy-100, #e8edf6)); }
.vrec-retry { margin-top: 8px; }
.vrec button:focus-visible { outline: 3px solid var(--blue, #2754c5); outline-offset: 2px; }

.vrec-panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px; border-radius: 12px;
  background: #fff7f6; border: 2px solid #d84a3f;
}
.vrec-dot { width: 14px; height: 14px; border-radius: 50%; background: #d84a3f; flex: 0 0 auto; animation: vrec-pulse 1.1s ease-in-out infinite; }
.vrec-wave { flex: 1 1 140px; min-width: 110px; height: 44px; display: block; }
.vrec-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy, #14284b); min-width: 6.2em; text-align: right; }
.vrec-time--warn { color: #b3261e; }
.vrec-panel .vrec-done, .vrec-panel .vrec-cancel { flex: 1 1 120px; }

.vrec-busy { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--blue-soft, #e8eefc); color: var(--navy, #14284b); font-weight: 600; }
.vrec-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(20, 40, 75, .2); border-top-color: var(--navy, #14284b); flex: 0 0 auto; animation: vrec-spin .9s linear infinite; }

.vrec-msg { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; font-size: .95rem; line-height: 1.45; background: var(--amber-soft, #fff4cf); color: var(--amber-ink, #5a3b00); }
.vrec-msg--ok { background: #e6f4ea; color: #174d2b; }
.vrec-msg--error { background: #fdecea; color: #7a1d17; }

.vrec--compact .vrec-start, .vrec--compact .vrec-done, .vrec--compact .vrec-cancel, .vrec--compact .vrec-retry { min-height: 40px; padding: 4px 12px; font-size: .9rem; }
.vrec--compact .vrec-panel { padding: 8px; }
.vrec--compact .vrec-wave { height: 32px; }

/* подсказка про клавиатуру, когда доступна запись: второстепенная кнопка и короткий вводный текст */
.voice-hint--rec .voice-hint-lead { margin-bottom: 8px; }
.voice-hint--rec .voice-hint-btn--quiet { border-color: transparent; text-decoration: underline; font-weight: 500; padding-left: 0; }
.voice-hint--rec[data-voice-ready] .voice-hint-btn--quiet { margin-top: 2px; }

@keyframes vrec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes vrec-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vrec-dot, .vrec-spinner { animation: none; }
}
@media (max-width: 480px) {
  .vrec-start { width: 100%; justify-content: center; }
  .vrec-time { text-align: left; min-width: 0; flex: 1 1 auto; }
}