/* ===================================================================
   NK · МЕДИА ЛИЧКИ (05.10, владелец: «камера/кружки/фото/ГС — качественно,
   на весь экран, в одном стиле с сайтом»).
   1) Оверлеи камеры (#cameraOverlay) и кружка (#videoOverlay) — ОДИН тёмный
      полноэкранный стиль для всех тем (как системная камера); от темы берётся
      только акцент --mx-acc (кнопка «Отправить», точка-чип, кольцо).
   2) Фото / кружок / голосовое в ленте #chat — под переменные тем (--c-*).
   3) Панель записи ГС поверх #inputBar (удержание / замок / отмена свайпом).
   Логика — src/js/16-media.js, 17-voice.js, 14-messaging.js.
   =================================================================== */
html[data-nk-theme="tiffany"]{--mx-acc:#7FE6DA;--mx-ink:#04100F}
html[data-nk-theme="red"]{--mx-acc:#E10600;--mx-ink:#fff}
html[data-nk-theme="mono"]{--mx-acc:var(--nk-acc,#E8478F);--mx-ink:var(--nk-acc-ink,#fff)}
:root{--mx-acc:#7FE6DA;--mx-ink:#04100F;--mx-rec:#FF3B30}

/* ---------- каркас оверлея ---------- */
.camera-overlay.mx-cam,.video-overlay.mx-cam{position:fixed!important;inset:0!important;z-index:3000!important;display:none!important;padding:0!important;
  background:#000!important;color:#fff;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  font-family:'Inter NK','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
.mx-cam.open{display:block!important;animation:mxIn .3s cubic-bezier(.22,1,.36,1) both}
@keyframes mxIn{from{opacity:0}}
.mx-cam button{font-family:inherit;-webkit-tap-highlight-color:transparent}

/* сцена (видео на весь экран) */
.mx-stage{position:absolute;inset:0;background:#000;overflow:hidden}
.mx-cam .mx-stage video,.mx-cam .mx-stage img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  aspect-ratio:auto!important;border-radius:0!important;object-fit:cover;background:#000;margin:0!important}
.mx-stage.fit video{object-fit:contain}
.mx-cam .mx-stage img.mx-shot{display:none;object-fit:contain;animation:mxShotIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes mxShotIn{from{transform:scale(1.04);opacity:.4}}
.mx-cam.review .mx-stage img.mx-shot{display:block}
.mx-cam.review .mx-stage video{filter:blur(18px) brightness(.5);transform:scale(1.1)}
.mx-cam .mx-mirror{transform:scaleX(-1)}
.mx-cam.review .mx-stage video.mx-mirror{transform:scaleX(-1) scale(1.1)}
.mx-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.mx-flash.go{animation:mxFlash .4s ease-out}
@keyframes mxFlash{0%{opacity:.9}100%{opacity:0}}

/* загрузка камеры */
.mx-wait{position:absolute;left:50%;top:46%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#fff;
  animation:mxSpin .8s linear infinite;display:none;z-index:2}
.mx-cam.mx-loading .mx-wait{display:block}
@keyframes mxSpin{to{transform:rotate(360deg)}}

/* верх и низ — стеклянные градиенты */
.mx-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 34px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.mx-top>*{pointer-events:auto}
.mx-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:46px 26px calc(env(safe-area-inset-bottom,0px) + 26px);
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7))}
.mx-ic{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);transition:transform .15s,background .2s,opacity .2s}
.mx-ic:active{transform:scale(.9);background:rgba(255,255,255,.26)}
.mx-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-ic.lg{width:52px;height:52px}
.mx-ic.lg svg{width:24px;height:24px}
.mx-ic[hidden]{display:none}
.mx-ghost{width:52px;height:52px}
.mx-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:99px;white-space:nowrap;
  background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  font:500 11px/1 'JetBrains Mono',ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.mx-chip i{width:7px;height:7px;border-radius:50%;background:var(--mx-acc);flex-shrink:0}
.mx-chip b{font-weight:500;opacity:.55}
.mx-cam.recording .mx-chip i{background:var(--mx-rec);animation:mxPulse 1s ease-in-out infinite}
@keyframes mxPulse{50%{opacity:.25}}
.mx-hint{text-align:center;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.78);margin:0 auto 20px;max-width:320px;min-height:18px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mx-hint b{color:#fff;font-weight:600}

/* ряды кнопок */
.mx-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.mx-row>:first-child{justify-self:start}
.mx-row>:last-child{justify-self:end}
.mx-row-review{display:none!important;gap:12px}
.mx-cam.review .mx-row-shoot{display:none!important}
.mx-cam.review .mx-row-review{display:flex!important}

/* затвор фото */
.mx-shutter{width:80px;height:80px;border-radius:50%;border:0;padding:0;background:transparent;box-shadow:inset 0 0 0 4px #fff;position:relative;cursor:pointer;transition:transform .15s}
.mx-shutter:after{content:'';position:absolute;inset:9px;border-radius:50%;background:#fff;transition:transform .15s}
.mx-shutter:active:after{transform:scale(.86)}
.mx-cam.mx-loading .mx-shutter,.mx-cam.mx-loading .mx-rec{opacity:.35;pointer-events:none}

/* кнопки просмотра */
.mx-pill,.mx-send{flex:1;height:56px;border:0;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-size:16px;font-weight:600;letter-spacing:-.01em;transition:transform .15s,opacity .2s}
.mx-pill{color:#fff;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mx-send{flex:1.35;background:var(--mx-acc);color:var(--mx-ink)}
.mx-pill:active,.mx-send:active{transform:scale(.96)}
.mx-pill svg,.mx-send svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mx-send[disabled]{opacity:.5;pointer-events:none}
html[data-nk-theme="tiffany"] .mx-send{border-radius:16px;box-shadow:3px 3px 0 #FF9ECF}
html[data-nk-theme="tiffany"] .mx-pill{border-radius:16px}
html[data-nk-theme="red"] .mx-send,html[data-nk-theme="red"] .mx-pill{border-radius:2px}
html[data-nk-theme="red"] .mx-send{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}

/* ---------- кружок: экран записи ---------- */
.video-overlay.mx-circle{background:radial-gradient(70% 46% at 50% 42%,color-mix(in srgb,var(--mx-acc) 16%,transparent),transparent 72%),#050505!important}
.mx-note-stage{--d:min(84vw,56vh,440px);position:absolute;left:50%;top:44%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.mx-note-clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#111;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.mx-cam .mx-note-clip video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;aspect-ratio:auto!important;border-radius:0!important;object-fit:cover;background:#111;margin:0!important}
.mx-cam .mx-note-clip video.mx-review{display:none}
.mx-cam.review .mx-note-clip video.mx-review{display:block}
.mx-cam.review .mx-note-clip video.mx-live{visibility:hidden}
.mx-ring{position:absolute;left:-12px;top:-12px;width:calc(100% + 24px);height:calc(100% + 24px);transform:rotate(-90deg);pointer-events:none;overflow:visible}
.mx-ring circle{fill:none;stroke-width:1.25}
.mx-ring .trk{stroke:rgba(255,255,255,.13)}
.mx-ring .prg{stroke:var(--mx-rec);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.mx-cam.review .mx-ring .prg{stroke:var(--mx-acc)}
.mx-cam:not(.recording):not(.review):not(.mx-finishing) .mx-ring .prg{opacity:0}
.mx-cam.recording .mx-note-stage{transform:translate(-50%,-50%) scale(1.02)}
.mx-cam .mx-note-tap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:none;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:99px;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;font-weight:500;color:#fff;pointer-events:none;white-space:nowrap}
.mx-cam .mx-note-tap svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.mx-cam.review.mx-muted .mx-note-tap{display:inline-flex}

/* кнопка записи кружка */
.mx-rec{width:80px;height:80px;border-radius:50%;border:0;padding:0;background:transparent;box-shadow:inset 0 0 0 4px #fff;position:relative;cursor:pointer}
.mx-rec:after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--mx-rec);transition:inset .28s cubic-bezier(.22,1,.36,1),border-radius .28s cubic-bezier(.22,1,.36,1),transform .15s}
.mx-rec.recording:after{inset:25px;border-radius:7px}
.mx-rec:active:after{transform:scale(.9)}
.mx-cam.recording .mx-flipbtn{opacity:0;pointer-events:none}
.mx-busy-bar{display:none}
.mx-cam.mx-finishing .mx-rec{opacity:.4;pointer-events:none}

/* ---------- лайтбокс фото (полный экран, зум, свайп вниз) ---------- */
#photoLightbox.open{background:#000!important;padding:0!important;cursor:default!important;touch-action:none;overflow:hidden;animation:mxIn .25s ease both}
#photoLightbox #photoLightboxImg{max-width:100vw!important;max-height:100vh!important;max-height:100dvh!important;width:auto;height:auto;border-radius:0!important;transform-origin:0 0;will-change:transform;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s;touch-action:none;-webkit-user-drag:none}
#photoLightbox.mx-drag #photoLightboxImg{transition:none}
#photoLightbox #photoLightboxClose{top:calc(env(safe-area-inset-top,0px) + 12px)!important;left:14px!important;right:auto!important;width:44px!important;height:44px!important;
  background:rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:0!important;z-index:2}
#photoLightbox #photoLightboxClose:before,#photoLightbox #photoLightboxClose:after{content:'';position:absolute;left:13px;top:21px;width:18px;height:2px;border-radius:2px;background:#fff;transform:rotate(45deg)}
#photoLightbox #photoLightboxClose:after{transform:rotate(-45deg)}
#photoLightbox .mx-lb-hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%);padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:500 12px/1 'Inter NK','Inter',system-ui,sans-serif;color:rgba(255,255,255,.75);pointer-events:none;white-space:nowrap;transition:opacity .3s}
#photoLightbox.mx-zoomed .mx-lb-hint{opacity:0}

/* ===================================================================
   ЛЕНТА ЛИЧКИ — фото / кружок / голосовое (под темы)
   =================================================================== */
/* фото: от края до края, время — пилюлей поверх, место под фото резервируется (без прыжков) */
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo{position:relative!important;padding:0!important;overflow:hidden!important;line-height:0;cursor:pointer;
  width:var(--mx-w,240px);max-width:100%;aspect-ratio:var(--mx-ar,0.8);border-radius:var(--c-rB)!important;
  background:var(--c-inB)!important;box-shadow:inset 0 0 0 1px var(--c-inL)!important;animation:nkBin .45s cubic-bezier(.22,1,.36,1) both}
html[data-nk-theme] #chat #msgs .row.mine .chat-photo.mx-photo{box-shadow:var(--c-outS)!important}
html[data-nk-theme="tiffany"] #chat #msgs .row.mine .chat-photo.mx-photo{margin-right:3px}
html[data-nk-theme="mono"] #chat #msgs .row:not(.mine) .chat-photo.mx-photo{box-shadow:0 0 0 1px #DCDCD8,0 2px 0 #DCDCD8!important}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover;
  border-radius:inherit!important;opacity:0;transition:opacity .35s ease;display:block}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo.ld img{opacity:1}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo:before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,rgba(127,127,127,0) 30%,rgba(127,127,127,.16) 50%,rgba(127,127,127,0) 70%);background-size:220% 100%;animation:mxSk 1.3s linear infinite}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo.ld:before{display:none}
@keyframes mxSk{from{background-position:120% 0}to{background-position:-120% 0}}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo>.msg-meta,html[data-nk-theme] #chat #msgs .chat-video.mx-note>.msg-meta{position:absolute!important;right:8px;bottom:8px;z-index:3;float:none!important;margin:0!important;
  display:inline-flex!important;align-items:center;gap:4px;height:22px;padding:0 8px!important;border-radius:99px;line-height:1;
  background:rgba(0,0,0,.46)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff!important;opacity:1!important;text-shadow:none!important}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo>.msg-meta .msg-status,html[data-nk-theme] #chat #msgs .chat-video.mx-note>.msg-meta .msg-status,
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo>.msg-meta .msg-status svg,html[data-nk-theme] #chat #msgs .chat-video.mx-note>.msg-meta .msg-status svg{color:#fff!important}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo>.msg-meta .msg-status.read svg,html[data-nk-theme] #chat #msgs .chat-video.mx-note>.msg-meta .msg-status.read svg{color:var(--mx-acc)!important}
html[data-nk-theme="mono"] #chat #msgs .chat-photo.mx-photo>.msg-meta .msg-status.read svg,html[data-nk-theme="mono"] #chat #msgs .chat-video.mx-note>.msg-meta .msg-status.read svg{color:#fff!important}
html[data-nk-theme] #chat #msgs .chat-photo.mx-photo .msg-reactions:empty,html[data-nk-theme] #chat #msgs .chat-video.mx-note .msg-reactions:empty{display:none}

/* кружок: настоящий круг, кольцо цвета темы, тап — звук и прогресс */
html[data-nk-theme] #chat #msgs .chat-video.mx-note{--d:220px;position:relative!important;width:var(--d);height:var(--d);padding:0!important;margin:2px 0;cursor:pointer;
  background:none!important;box-shadow:none!important;border:0!important;border-radius:50%!important;overflow:visible!important;
  transition:width .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1);animation:nkBin .45s cubic-bezier(.22,1,.36,1) both;-webkit-tap-highlight-color:transparent}
html[data-nk-theme] #chat #msgs .chat-video.mx-note.playing{--d:min(74vw,300px)}
html[data-nk-theme] #chat #msgs .chat-video.mx-note video{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;border-radius:50%!important;
  background:var(--c-inB);display:block;box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
html[data-nk-theme] #chat #msgs .chat-video.mx-note.mir video{transform:scaleX(-1)}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nring{position:absolute;left:-4px;top:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none;overflow:visible;z-index:2}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nring circle{fill:none;stroke-width:1.2}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nring .trk{stroke:var(--c-inL)}
html[data-nk-theme] #chat #msgs .row.mine .chat-video.mx-note .mx-nring .trk{stroke:var(--c-acc);opacity:.55}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nring .prg{stroke:var(--c-acc);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:opacity .25s}
html[data-nk-theme] #chat #msgs .chat-video.mx-note.playing .mx-nring .prg{opacity:1}
html[data-nk-theme="mono"] #chat #msgs .row:not(.mine) .chat-video.mx-note .mx-nring .trk{stroke:#D2D2CE}
html[data-nk-theme="tiffany"] #chat #msgs .row.mine .chat-video.mx-note .mx-nring .trk{stroke:#FF9ECF;opacity:.8}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nbadge{position:absolute;left:10px;bottom:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:99px;
  background:rgba(0,0,0,.46);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 11px/1 'Inter NK','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nbadge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-nk-theme] #chat #msgs .chat-video.mx-note.playing .mx-nbadge .mx-mute{display:none}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nplay{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;z-index:3;pointer-events:none;
  background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .mx-nplay svg{width:22px;height:22px;fill:#fff;margin-left:3px}
html[data-nk-theme] #chat #msgs .chat-video.mx-note.paused .mx-nplay{opacity:1;transform:none}
html[data-nk-theme] #chat #msgs .chat-video.mx-note .auto-delete-countdown{z-index:4}

/* голосовое: настоящая волна, прогресс, перемотка тапом по волне */
html[data-nk-theme] #chat #msgs .voice-msg.mx-v{position:relative}
html[data-nk-theme] #chat #msgs .voice-msg.mx-v .voice-wave{cursor:pointer;touch-action:none;height:30px!important}
html[data-nk-theme] #chat #msgs .voice-msg.mx-v .voice-bar{transition:opacity .12s}
html[data-nk-theme] #chat #msgs .voice-msg.mx-v .voice-bar.played{opacity:1}
html[data-nk-theme] #chat #msgs .voice-msg.mx-v .voice-play.playing{box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)!important}
html[data-nk-theme] #chat #msgs .voice-msg.mx-v .voice-dur{min-width:30px;text-align:right}
html[data-nk-theme] #chat #msgs .voice-play.mx-load svg{opacity:0}
html[data-nk-theme] #chat #msgs .voice-play.mx-load{position:relative}
html[data-nk-theme] #chat #msgs .voice-play.mx-load:after{content:'';position:absolute;inset:9px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mxSpin .7s linear infinite}

/* отправка: прогресс поверх фото/кружка/ГС, ошибка — «Повторить» */
html[data-nk-theme] #chat #msgs .row.mx-up .msg-status{display:none!important}
.mx-upl{position:absolute;inset:0;z-index:5;display:grid;place-items:center;border-radius:inherit;background:rgba(0,0,0,.32);color:#fff}
.mx-upl .mx-uring{width:54px;height:54px;transform:rotate(-90deg);overflow:visible}
.mx-upl .mx-uring circle{fill:none;stroke-width:3}
.mx-upl .mx-uring .t{stroke:rgba(255,255,255,.25)}
.mx-upl .mx-uring .p{stroke:#fff;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:96;transition:stroke-dashoffset .25s}
.mx-upl.ind .mx-uring{animation:mxSpin 1s linear infinite}
.mx-upl.ind .mx-uring .p{stroke-dashoffset:72!important}
.mx-upl .mx-ux{position:absolute;width:54px;height:54px;display:grid;place-items:center;border:0;background:none;color:#fff;padding:0;cursor:pointer}
.mx-upl .mx-ux svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.mx-upl .mx-retry{display:none;align-items:center;gap:7px;height:38px;padding:0 15px;border:0;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font:600 13px/1 'Inter NK','Inter',system-ui,sans-serif;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mx-upl .mx-retry svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mx-upl.fail{background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;gap:8px}
.mx-upl.fail .mx-uring{display:none}
.mx-upl.fail .mx-retry{display:inline-flex;order:-1}
.mx-upl.fail .mx-ux{position:static;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.6)}
.mx-upl.mx-upl-v{inset:auto;left:0;top:0;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.35)}
.mx-upl.mx-upl-v .mx-uring{width:30px;height:30px}
.mx-upl.mx-upl-v .mx-ux{width:100%;height:100%}
.mx-upl.mx-upl-v .mx-ux svg{width:12px;height:12px}
.mx-upl.mx-upl-v.fail{inset:0;width:auto;height:auto;border-radius:inherit;background:none;justify-content:flex-start}
html[data-nk-theme] #chat #msgs .voice-msg.mx-v:has(> .mx-upl.fail) > :not(.mx-upl){visibility:hidden}
.mx-upl.mx-upl-v .mx-retry{height:34px;padding:0 14px;font-size:13px;background:rgba(0,0,0,.55)}
.mx-upl.mx-upl-v.fail .mx-ux{width:34px;height:34px;background:rgba(0,0,0,.55)}

/* ===================================================================
   ПАНЕЛЬ ЗАПИСИ ГОЛОСОВОГО (поверх поля ввода)
   =================================================================== */
#chat .mx-recbar{position:absolute;top:0;bottom:0;left:0;right:0;z-index:20;display:none;align-items:center;gap:8px;background:var(--c-bg,#000);box-sizing:border-box}
#chat .mx-recbar.on{display:flex;animation:mxRb .22s cubic-bezier(.22,1,.36,1) both}
@keyframes mxRb{from{opacity:0;transform:translateX(14px)}}
#chat .mx-rb-mid{flex:1;min-width:0;height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:var(--c-rF,14px);
  background:var(--c-field,#111);box-shadow:inset 0 0 0 1px var(--c-fieldL,rgba(255,255,255,.1));color:var(--c-fg,#fff);overflow:hidden}
html[data-nk-theme="mono"] #chat .mx-rb-mid{box-shadow:0 0 0 1px #DCDCD8,0 2px 0 #DCDCD8}
#chat .mx-rb-dot{width:9px;height:9px;border-radius:50%;background:var(--mx-rec);flex-shrink:0;animation:mxPulse 1s ease-in-out infinite}
#chat .mx-recbar.wait .mx-rb-dot{background:var(--c-mut,#888);animation:none}
#chat .mx-rb-t{font:600 14.5px/1 'Inter NK','Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:36px;flex-shrink:0}
#chat .mx-rb-wave{flex:1;min-width:0;height:26px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
#chat .mx-rb-wave i{flex:0 0 3px;height:3px;border-radius:2px;background:currentColor;opacity:.75;transition:height .08s linear}
#chat .mx-rb-hint{flex-shrink:0;font-size:13px;color:var(--c-mut,#888);white-space:nowrap;display:none;transition:transform .05s linear,opacity .1s}
#chat .mx-recbar.hold .mx-rb-hint{display:block}
#chat .mx-recbar.hold .mx-rb-wave{flex:1 1 40px}
#chat .mx-rb-x,#chat .mx-rb-send{width:46px;height:46px;flex-shrink:0;border:0;padding:0;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
#chat .mx-rb-x{border-radius:var(--c-rF,14px);background:var(--c-field,#111);color:var(--c-danger,#FF3B30);box-shadow:inset 0 0 0 1px var(--c-fieldL,rgba(255,255,255,.1))}
html[data-nk-theme="mono"] #chat .mx-rb-x{border-radius:50%;background:#fff;box-shadow:0 0 0 1px #DCDCD8,0 2px 0 #DCDCD8}
#chat .mx-rb-send{border-radius:50%;background:var(--c-send,#7FE6DA);color:var(--c-sendF,#000);box-shadow:var(--c-sendS,none)}
html[data-nk-theme="tiffany"] #chat .mx-rb-send{border-radius:14px;margin-right:3px}
html[data-nk-theme="red"] #chat .mx-rb-send{border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
#chat .mx-rb-x svg,#chat .mx-rb-send svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#chat .mx-rb-x:active,#chat .mx-rb-send:active{transform:scale(.92)}
#chat .mx-recbar.hold .mx-rb-x,#chat .mx-recbar.hold .mx-rb-send{display:none}
/* кнопка микрофона под пальцем */
html[data-nk-theme] #chat #micBtn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,color .2s}
html[data-nk-theme] #chat #micBtn.mx-hold{position:relative;z-index:21;transform:scale(1.22);background:var(--mx-rec)!important;color:#fff!important;box-shadow:0 0 0 8px rgba(255,59,48,.18),0 10px 24px -8px rgba(255,59,48,.6)!important}
html[data-nk-theme] #chat #micBtn.mx-hold svg{stroke:#fff}
#chat .mx-lock{position:absolute;bottom:calc(100% + 12px);z-index:22;width:40px;padding:9px 0 7px;border-radius:99px;display:none;flex-direction:column;align-items:center;gap:3px;
  background:var(--c-menu,#111);color:var(--c-fg,#fff);box-shadow:inset 0 0 0 1px var(--c-menuL,rgba(255,255,255,.12)),0 10px 24px -10px rgba(0,0,0,.6);pointer-events:none}
#chat .mx-lock.on{display:flex;animation:mxLk .3s cubic-bezier(.22,1,.36,1) both}
@keyframes mxLk{from{opacity:0;transform:translateY(10px)}}
#chat .mx-lock svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#chat .mx-lock .mx-chev{animation:mxChev 1.2s ease-in-out infinite;opacity:.6}
@keyframes mxChev{50%{transform:translateY(-3px)}}

/* === 05.10 (владелец): кружок на весь экран — тап по кружку открывает видео со звуком. === */
.mx-vfull{position:fixed;inset:0;z-index:6100;background:rgba(0,0,0,.96);display:grid;place-items:center;animation:mxfIn .22s ease-out}
.mx-vfull video{max-width:min(92vw,520px);max-height:88vh;border-radius:24px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.mx-vfull .mx-vfull-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;font-size:16px;line-height:1;cursor:pointer}
@keyframes mxfIn{from{opacity:0}to{opacity:1}}