/* SUNDUQ v282 — аудио- и видеозвонки в мессенджере. */
.msg282HeaderCall{
  width:42px;
  min-width:42px;
  min-height:40px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(89,176,231,.34);
  border-radius:12px;
  background:rgba(18,67,94,.58);
  color:#d7f1ff;
  font:800 19px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}
.msg282HeaderCall:hover{background:rgba(31,96,130,.8);border-color:rgba(107,199,255,.6);color:#fff}
.msg282CallsUnsupported .msg282HeaderCall{display:none!important}

.msg282CallOverlay{
  position:fixed;
  inset:0;
  z-index:10040;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:18px;
  background:rgba(1,10,17,.84);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.msg282CallOverlay.hidden{display:none!important}
.msg282CallCard{
  width:min(520px,100%);
  max-height:calc(100dvh - 36px);
  overflow:auto;
  box-sizing:border-box;
  padding:18px;
  border:1px solid rgba(99,169,211,.32);
  border-radius:28px;
  background:linear-gradient(160deg,#112e43 0%,#071a28 66%,#0a2030 100%);
  color:#f5fbff;
  box-shadow:0 30px 90px rgba(0,0,0,.58);
  text-align:center;
}
.msg282RemoteStage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:300px;
  overflow:hidden;
  border:1px solid rgba(101,175,218,.22);
  border-radius:22px;
  background:radial-gradient(circle at 50% 38%,rgba(42,111,151,.5),rgba(4,19,29,.96) 66%);
}
.msg282RemoteStage:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(2,12,19,.5));
}
.msg282RemoteStage>video#msg282RemoteVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:transparent;
}
.msg282RemoteStage>video.audio-only{opacity:0}
.msg282PeerAvatar{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:126px;
  height:126px;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:#1e668d;
  color:#fff;
  font-size:50px;
  font-weight:900;
  box-shadow:0 18px 45px rgba(0,0,0,.36);
}
.msg282PeerAvatar img{width:100%;height:100%;object-fit:cover}
.msg282CallOverlay.has-remote-video .msg282PeerAvatar{opacity:0;pointer-events:none}
.msg282LocalVideo{
  position:absolute;
  z-index:4;
  right:14px;
  bottom:14px;
  width:116px;
  height:154px;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.55);
  border-radius:17px;
  background:#07131d;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  transform:scaleX(-1);
}
.msg282LocalVideo.hidden{display:none!important}
.msg282CallInfo{padding:18px 8px 8px}
.msg282CallInfo small{display:block;color:#73c8f3;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.msg282CallInfo h2{margin:7px 0 5px;color:#fff;font-size:clamp(25px,5vw,35px);line-height:1.08;overflow-wrap:anywhere}
.msg282CallInfo p{min-height:24px;margin:0;color:#a9c0d0;font-size:15px;font-weight:700}
.msg282CallActions{display:flex;align-items:center;justify-content:center;gap:18px;min-height:82px;margin-top:12px}
.msg282CallActions.hidden{display:none!important}
.msg282CallActions button{
  display:inline-grid;
  place-items:center;
  min-width:64px;
  min-height:64px;
  padding:0 15px;
  border:0;
  border-radius:20px;
  color:#fff;
  font:inherit;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.msg282CallActions button span{font-size:27px;line-height:1}
.msg282CallActions button b{display:block;margin-top:5px;font-size:12px}
.msg282Accept{background:#169f5d}.msg282Accept:hover{background:#20b86e}
.msg282Decline,.msg282Hangup{background:#d83b55}.msg282Decline:hover,.msg282Hangup:hover{background:#ec4965}
.msg282OutgoingActions .msg282Hangup{min-width:82px}
.msg282ActiveActions button{width:62px;min-width:62px;padding:0;font-size:25px}
.msg282ActiveActions .msg282Hangup{transform:none}
.msg282Control{background:#24465b}.msg282Control:hover{background:#315f78}.msg282Control.off{background:#65404a;color:#ffdce2}
.msg282CallPrivacy{margin:11px 8px 0;color:#728c9e;font-size:11px;line-height:1.45}
body.msg282CallOpen{overflow:hidden!important}

@media(max-width:820px){
  .msg282HeaderCall{width:38px;min-width:38px;min-height:38px;border-radius:11px;font-size:17px}
  .msg282CallOverlay{padding:0;align-items:stretch}
  .msg282CallCard{width:100%;max-height:100dvh;min-height:100dvh;border:0;border-radius:0;padding:12px 12px calc(18px + env(safe-area-inset-bottom,0px))}
  .msg282RemoteStage{min-height:min(58dvh,530px);border-radius:20px}
  .msg282LocalVideo{right:11px;bottom:11px;width:92px;height:128px}
  .msg282CallInfo{padding-top:15px}
  .msg282CallActions{margin-top:7px}
}
@media(max-width:480px){
  .msg257HeaderActions{gap:5px}
  .msg282HeaderCall,.msg257HeaderDanger{width:36px!important;min-width:36px!important;min-height:36px!important}
  .msg282CallCard{padding-left:9px;padding-right:9px}
  .msg282RemoteStage{min-height:52dvh}
}
@media(prefers-reduced-motion:reduce){.msg282CallOverlay{backdrop-filter:none;-webkit-backdrop-filter:none}}