.voice-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; } /* ── Карточка-сценарий ── */ .voice-card { background: #080818; border: 1px solid rgba(0,255,255,0.15); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.4); transition: border-color 0.2s; } .voice-card:hover { border-color: rgba(0,255,255,0.3); } .voice-card-scenario { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #00FFFF; font-family: 'Orbitron', monospace; } .voice-card-quote { font-size: 13px; color: #aaa; line-height: 1.6; border-left: 2px solid #00FFFF; padding-left: 10px; margin: 0; font-family: 'Share Tech Mono', monospace; } /* ── Аудиосообщение (Telegram-стиль) ── */ .audio-msg { display: flex; align-items: center; gap: 10px; background: #0d0d22; border: 1px solid rgba(0,255,255,0.1); border-radius: 22px; padding: 10px 14px; } /* Кнопка play/pause */ .audio-msg-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 1px solid #00FFFF; background: rgba(0,255,255,0.1); color: #00FFFF; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; position: relative; } .audio-msg-btn:hover { background: rgba(0,255,255,0.2); box-shadow: 0 0 12px rgba(0,255,255,0.3); } .audio-msg-btn.loading { border-color: rgba(0,255,255,0.3); background: rgba(0,255,255,0.05); cursor: default; animation: vc-pulse 1.2s ease-in-out infinite; } @keyframes vc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* Спиннер внутри кнопки */ .audio-spinner { width: 16px; height: 16px; border: 2px solid rgba(0,255,255,0.2); border-top-color: #00FFFF; border-radius: 50%; animation: vc-spin .7s linear infinite; } @keyframes vc-spin { to { transform: rotate(360deg); } } /* Волна + прогресс */ .audio-msg-wave { flex: 1; display: flex; flex-direction: column; gap: 4px; } .waveform { display: flex; align-items: center; gap: 2px; height: 28px; cursor: pointer; position: relative; } .waveform-bar { flex: 1; border-radius: 2px; background: rgba(0,255,255,0.15); transition: background .1s; } .waveform-bar.played { background: #00FFFF; } .audio-msg-time { font-size: 11px; color: #555; font-variant-numeric: tabular-nums; font-family: 'Share Tech Mono', monospace; } /* Кнопка перегенерации */ .regen-btn { background: none; border: 1px solid rgba(0,255,255,0.2); color: #666; border-radius: 20px; padding: 5px 12px; font-size: 11px; cursor: pointer; align-self: flex-end; font-family: 'Share Tech Mono', monospace; transition: border-color .15s, color .15s; } .regen-btn:hover:not(:disabled) { border-color: #00FFFF; color: #00FFFF; } .regen-btn:disabled { opacity: .3; cursor: default; } /* Ошибка */ .voice-card-error { font-size: 12px; color: #FF0040; display: flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; }