/* ================= Запись голосовых и кружков (как в Telegram) ================= */
/* Пустое поле — микрофон, есть текст — «Отправить» */
#input-row:not(.oxr-has-text) #send-btn { display:none !important; }
#input-row.oxr-has-text #mic-btn { display:none !important; }
#input-row.oxr-has-text #send-btn { animation:oxrPop .18s ease-out; }
#mic-btn { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; outline:none; transition:transform .12s; }
#mic-btn:focus { outline:none; }
#mic-btn.oxr-pressed { transform:scale(.88); }
#mic-btn svg { pointer-events:none; }
#oxr.starting .oxr-dot { animation:none; opacity:.4; }
#mic-btn.oxr-swap svg { animation:oxrSwap .22s ease-out; }
@keyframes oxrPop { from { transform:scale(.6); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes oxrSwap { from { transform:scale(.4) rotate(-40deg); opacity:0; } to { transform:none; opacity:1; } }

/* Подсказка над кнопкой */
#oxr-tip { position:fixed; z-index:9100; max-width:min(300px, calc(100vw - 24px)); background:rgba(20,18,34,.94); color:#fff; font-size:13px; line-height:1.4; padding:9px 12px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .18s, transform .18s; }
#oxr-tip.show { opacity:1; transform:none; }

/* Слой записи */
#oxr { display:none; }
#oxr.on { display:block; }
#oxr-bar { position:fixed; z-index:9000; display:flex; align-items:center; gap:10px; padding:0 112px 0 16px; box-sizing:border-box; background:var(--bg, #0e0b1f); color:var(--text, #fff); }
#oxr-bar .oxr-dot { width:10px; height:10px; border-radius:50%; background:#FF3B5C; flex:none; animation:oxrBlink 1s ease-in-out infinite; }
#oxr.paused .oxr-dot { animation:none; opacity:.35; }
#oxr-bar .oxr-time { font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; min-width:58px; flex:none; }
#oxr-bar .oxr-mid { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#oxr-bar .oxr-slide { color:var(--muted, #9a94b8); font-size:14.5px; white-space:nowrap; display:flex; align-items:center; gap:4px; }
#oxr-bar .oxr-chev { display:inline-block; font-size:22px; line-height:1; animation:oxrNudge 1.2s ease-in-out infinite; }
#oxr-bar .oxr-cancel { display:none; background:none; border:none; color:var(--accent, #8b6cff); font:inherit; font-weight:700; font-size:15px; letter-spacing:.02em; text-transform:uppercase; padding:10px 14px; cursor:pointer; }
#oxr-bar .oxr-trash { display:none; background:none; border:none; color:var(--danger, #ff4d6d); width:40px; height:40px; border-radius:50%; flex:none; cursor:pointer; align-items:center; justify-content:center; }
#oxr-bar .oxr-trash svg { width:22px; height:22px; }
#oxr-bar .oxr-preview { display:none; width:100%; }
#oxr-bar .oxr-preview .voice-msg { min-width:0; width:100%; }
#oxr.locked .oxr-slide { display:none; }
#oxr.locked .oxr-cancel { display:block; }
#oxr.paused .oxr-cancel { display:none; }
#oxr.paused.voice .oxr-preview { display:block; }
#oxr.paused.voice .oxr-time { display:none; }
#oxr.paused .oxr-trash { display:inline-flex; }
#oxr.paused .oxr-dot { display:none; }
#oxr.paused.video .oxr-cancel { display:block; }

/* Большая кнопка под пальцем */
#oxr-big { position:fixed; z-index:9002; width:0; height:0; transform:translate(-50%, -50%); }
#oxr-big .oxr-glow { position:absolute; left:-46px; top:-46px; width:92px; height:92px; border-radius:50%; background:var(--accent, #7b5cff); opacity:.28; transition:transform .08s linear; pointer-events:none; }
#oxr-big .oxr-big-btn { position:absolute; left:-40px; top:-40px; width:80px; height:80px; border-radius:50%; border:none; background:var(--grad, #7b5cff); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(123,92,255,.55); cursor:pointer; animation:oxrGrow .16s ease-out; pointer-events:none; }
#oxr.locked #oxr-big .oxr-big-btn { pointer-events:auto; }
#oxr-big .oxr-big-btn svg { width:30px; height:30px; }
#oxr.holding #oxr-big { transition:none; }

/* Замок над кнопкой */
#oxr-lock { position:fixed; z-index:9001; transform:translate(-50%, -50%); width:38px; height:64px; border-radius:19px; background:var(--panel, #1b1730); color:var(--text, #fff); box-shadow:0 4px 16px rgba(0,0,0,.3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; --p:0; }
#oxr-lock .oxr-lock-ic svg { width:20px; height:20px; display:block; }
#oxr-lock .oxr-shackle { transform:translateY(calc(var(--p) * 2px)); }
#oxr-lock .oxr-lock-up svg { width:18px; height:18px; display:block; opacity:calc(1 - var(--p)); animation:oxrUp 1.2s ease-in-out infinite; }
#oxr.locked #oxr-lock { display:none; }

/* Пауза / продолжить — на месте замка */
#oxr-pause { position:fixed; z-index:9001; transform:translate(-50%, -50%); width:44px; height:44px; border-radius:50%; border:none; background:var(--panel, #1b1730); color:var(--text, #fff); box-shadow:0 4px 16px rgba(0,0,0,.3); display:none; align-items:center; justify-content:center; cursor:pointer; }
#oxr-pause svg { width:20px; height:20px; }
#oxr.locked #oxr-pause { display:flex; animation:oxrGrow .16s ease-out; }
#oxr.paused #oxr-pause { color:#FF3B5C; }

/* Кружок во время записи */
#oxr-note { position:fixed; z-index:8999; display:none; border-radius:50%; }
#oxr.video #oxr-note { display:block; animation:oxrGrow .2s ease-out; }
#oxr.video::before { content:""; position:fixed; inset:0; z-index:8998; background:rgba(6,5,14,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#oxr-note video { width:100%; height:100%; border-radius:50%; object-fit:cover; transform:scaleX(-1); background:#000; display:block; }
#oxr-note video.back { transform:none; }
#oxr-note svg { position:absolute; inset:-7px; width:calc(100% + 14px); height:calc(100% + 14px); transform:rotate(-90deg); pointer-events:none; }
#oxr-note circle { fill:none; stroke:#FF3B5C; stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round; }
#oxr-note .oxr-flip { position:absolute; left:50%; bottom:-58px; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer; }
#oxr-note .oxr-flip svg { width:22px; height:22px; }
#oxr.locked.video .oxr-flip { display:flex; }

@keyframes oxrBlink { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
@keyframes oxrNudge { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(-5px); } }
@keyframes oxrUp { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes oxrGrow { from { scale:.4; opacity:0; } to { scale:1; opacity:1; } }