.md-call-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;

  background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  z-index:9999;
  padding:16px;
}
.md-call-overlay.is-open{display:flex !important}
.md-call-overlay.is-open{animation:mdCallFade .18s ease-out both}
.md-call{
  width:min(460px,100%);
  max-height:calc(100vh - 32px);
  display:flex;
  flex-direction:column;
  border-radius:26px;
  overflow:hidden;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 80px rgba(0,0,0,.35);
}


@media (min-width: 1024px){
  .md-call-overlay{padding:12px}
  .md-call:not(.is-incoming){
    width:min(95vw, 1600px);
    height:92vh;
    max-height:92vh;
  }
}


@media (max-width: 768px){
  .md-call-overlay{padding:0}
  .md-call:not(.is-incoming){
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }

  .md-call:not(.is-incoming){height:100vh;max-height:100vh}
  .md-call-h{padding-top:calc(12px + env(safe-area-inset-top));padding-left:16px;padding-right:16px}
  .md-call-body{min-height:0}
  .md-call-controls{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
.dark .md-call{background:rgba(10,10,10,.78)}
.md-call-h{padding:16px 18px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.md-call-title{font-weight:800;font-size:14px;line-height:1.2}
.md-call-sub{font-size:12px;opacity:.75}
.md-call-body{
  position:relative;
  background:rgba(0,0,0,.06);
  flex:1 1 auto;
  height:auto;
  min-height:320px;
  overflow:hidden;
}
.dark .md-call-body{background:rgba(255,255,255,.06)}
.md-call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.md-call-remote{transition:opacity .12s ease, transform .18s ease, width .18s ease, height .18s ease, right .18s ease, bottom .18s ease, inset .18s ease, border-radius .18s ease}

.md-call-remote.is-hidden-by-placeholder{opacity:0 !important}

.md-call-novideo{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}
.md-call.has-novideo .md-call-novideo{display:flex}
.md-call-novideo-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.md-call-novideo-ava{width:120px;height:120px;border-radius:999px;overflow:hidden;background:#111;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.md-call-novideo-ava img{width:100%;height:100%;object-fit:cover;display:block}
.md-call-novideo-name{font-weight:900;font-size:20px;line-height:1.2;color:#fff;text-align:center;padding:0 16px;max-width:min(420px,90vw);text-shadow:0 8px 22px rgba(0,0,0,.55)}

.md-call.has-novideo .md-call-body{background:#000}
.md-call.has-novideo .md-call-remote{opacity:0}

.md-call-incoming{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:18px}
.md-call.is-incoming .md-call-incoming{display:flex}

.md-call.is-incoming .md-call-remote,
.md-call.is-incoming #mdCallNoVideo,
.md-call.is-incoming #mdCallLocalBox{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.md-call.is-incoming .md-call-remote{display:none}
.md-call.is-incoming .md-call-local{display:none}
.md-call.is-incoming .md-call-controls{display:none}

.md-call.is-incoming{
  width:auto;
  max-width:420px;
  display:block;
  max-height:none;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:0;
  overflow:visible;
}
.md-call.is-incoming .md-call-h{display:none !important}


.md-call.is-incoming .md-call-body{
  background:transparent !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  flex:0 0 auto;
  min-height:auto !important;
}
.dark .md-call.is-incoming .md-call-body{background:transparent !important}

.md-call.is-incoming .md-call-incoming{
  position:static;
  inset:auto;
  padding:0;
  width:100%;
}

.md-call.is-incoming .md-call-incoming-card{animation:mdCallPop .22s cubic-bezier(.2,.9,.2,1) both}

@keyframes mdCallFade{from{opacity:0}to{opacity:1}}
@keyframes mdCallPop{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}


@keyframes mdCallFadeOut{from{opacity:1}to{opacity:0}}
@keyframes mdCallMin{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes mdPillIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}

.md-call-overlay.is-opening .md-call{animation:mdCallPop .22s cubic-bezier(.2,.9,.2,1) both}
.md-call-overlay.is-minimizing{animation:mdCallFadeOut .18s ease-in both}
.md-call-overlay.is-minimizing .md-call{animation:mdCallMin .18s ease-in both}

.md-pill.is-appear{animation:mdPillIn .22s ease-out both}
@media (prefers-reduced-motion: reduce){
  .md-call-overlay.is-open{animation:none}
  .md-call.is-incoming .md-call-incoming-card{animation:none}
}

@media (prefers-reduced-motion: reduce){
  .md-call-overlay.is-open{animation:none}
  .md-call.is-incoming .md-call-incoming-card{animation:none}
}

.md-call-incoming-card{
  width:min(380px, calc(100vw - 60px));
  margin:30px;
  text-align:center;
  padding:26px 24px 22px;
  border-radius:28px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 70px rgba(0,0,0,.28);
  border:1px solid rgba(0,0,0,.08);
}
.dark .md-call-incoming-card{background:rgba(0,0,0,.50);border-color:rgba(255,255,255,.12)}
.md-call-incoming-ava{width:96px;height:96px;border-radius:999px;overflow:hidden;margin:2px auto 14px;box-shadow:0 14px 34px rgba(0,0,0,.28);background:#111}
.md-call-incoming-ava img{width:100%;height:100%;object-fit:cover;display:block}
.md-call-incoming-name{font-weight:900;font-size:19px;line-height:1.2;color:#0f172a}
.dark .md-call-incoming-name{color:#fff}
.md-call-incoming-sub{margin-top:6px;font-size:13px;opacity:.75}
.md-call-incoming-actions{margin-top:16px;display:flex;gap:14px;justify-content:center}
.md-call-incoming-btn{width:64px;height:64px;font-size:22px}
.md-call-btn.md-ok{background:rgba(34,197,94,.95);border-color:rgba(34,197,94,.95);color:#fff}
.md-call.is-screen .md-call-body{background:#000}
.md-call.is-screen .md-call-remote{object-fit:contain}

.md-call.is-portrait .md-call-body{background:#000}
.md-call.is-portrait .md-call-remote{object-fit:contain}
.md-call-local{position:absolute;right:14px;bottom:14px;width:110px;height:156px;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#000;display:none;transition:transform .18s ease, width .18s ease, height .18s ease, right .18s ease, bottom .18s ease, inset .18s ease, border-radius .18s ease}
.md-call-local video{width:100%;height:100%;object-fit:cover;transform:none}

.md-call-local-screen video{object-fit:contain}

.md-call-local video.is-mirror{transform:scaleX(-1)}

.md-call.is-local-main .md-call-local{
  display:block;
  position:absolute;
  inset:0;
  right:auto;
  bottom:auto;
  width:100%;
  height:100%;
  border-radius:0;
  box-shadow:none;
}
.md-call.is-local-main .md-call-local video{object-fit:cover}
.md-call.is-local-main .md-call-local-screen video{object-fit:contain}

@media (max-width: 768px){
  .md-call.is-local-main .md-call-local video{object-fit:contain}
}

@media (max-width: 768px){
  .md-call-overlay{padding:0}

  .md-call:not(.is-incoming){
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }

  @supports not (height: 100dvh){
    .md-call:not(.is-incoming){height:100vh;max-height:100vh}
  }

  .md-call-h{padding-top:calc(12px + env(safe-area-inset-top));}
  .md-call-body{min-height:0}
  .md-call-controls{padding-bottom:calc(18px + env(safe-area-inset-bottom));border-radius:0}
}

.md-call.is-local-main .md-call-remote{
  inset:auto;
  right:14px;
  bottom:14px;
  width:110px;
  height:156px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:6;
}


.md-call .md-call-local,
.md-call .md-call-remote{cursor:default}
.md-call.is-allow-swap .md-call-local,
.md-call.is-allow-swap .md-call-remote{cursor:pointer}

@media (max-width: 420px){
  .md-call.is-local-main .md-call-remote{right:10px;bottom:10px;width:96px;height:136px;border-radius:16px}
}
.md-call-controls{
  display:flex;
  gap:10px;
  justify-content:center;
  padding:14px 16px 18px;
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:6;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.dark .md-call-controls{background:rgba(10,10,10,.55)}


@media (min-width: 900px){
  .md-call{width:min(920px, calc(100vw - 48px))}
  .md-call-body{min-height:360px}
  .md-call.is-incoming .md-call-body{min-height:280px}
}


@media (max-width: 899px){
  .md-call.is-screen .md-call-body{min-height:260px}
}

@media (max-width: 420px){
  .md-call-overlay{padding:10px}
  .md-call{width:100%;border-radius:22px;max-height:calc(100vh - 20px)}
  .md-call-body{min-height:340px}
  .md-call.is-incoming .md-call-body{min-height:260px}
  .md-call.is-screen .md-call-body{min-height:220px}
  .md-call-local{right:10px;bottom:10px;width:96px;height:136px;border-radius:16px}
}

.md-call-pill-btn{border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.92);color:#0f172a;border-radius:999px;padding:10px 14px;font-weight:800;font-size:13px;line-height:1;cursor:pointer;transition:transform .08s,opacity .15s,background .15s}
.dark .md-call-pill-btn{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.12);color:#fff}
.md-call-pill-btn:active{transform:scale(.97)}
.md-call-pill-btn.danger{background:rgba(239,68,68,.95);border-color:rgba(239,68,68,.95);color:#fff}
.md-call-pill-btn.ok{background:rgba(34,197,94,.92);border-color:rgba(34,197,94,.92);color:#fff}
.md-call-btn{width:44px;height:44px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.9);color:#0f172a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .08s,background .15s}
.dark .md-call-btn{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.12);color:#fff}
.md-call-btn:active{transform:scale(.96)}
.md-call-btn.is-off{opacity:.55}
.md-call-btn.md-hang{background:rgba(239,68,68,.95);border-color:rgba(239,68,68,.95);color:#fff}
.md-call-actions{display:flex;gap:10px}
.md-pill{
  position: fixed;

  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  z-index: 2147483647;
  display: none;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 50px rgba(0,0,0,.28);
  user-select: none;
  touch-action: none;
  will-change: transform;
}
.dark .md-pill{background:rgba(10,10,10,.75)}
.md-pill.is-open{display:flex}
.md-pill.is-drag{cursor:grabbing}

.md-call-pill-inner{display:flex;align-items:center;gap:10px;padding:10px 12px;background:transparent;border:0;border-radius:999px;color:inherit;cursor:pointer}
.md-call-pill-ava{width:34px;height:34px;border-radius:999px;overflow:hidden;flex:0 0 34px;box-shadow:0 6px 18px rgba(0,0,0,.16)}
.md-call-pill-ava img{width:100%;height:100%;object-fit:cover;display:block}
.md-call-pill-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.md-call-pill-name{font-weight:900;font-size:12px;line-height:1.1;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-call-pill-time{font-weight:800;font-size:11px;opacity:.75;line-height:1}
.md-call-pill-hang{width:40px;height:40px;margin-right:6px;border-radius:999px;border:1px solid rgba(239,68,68,.45);background:rgba(239,68,68,.95);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .08s}
.md-call-pill-hang:active{transform:scale(.96)}



@keyframes mdHangPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.md-call-btn.md-hang:hover{
  transform: scale(1.06);
  animation: mdHangPulse .9s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .md-call-btn.md-hang:hover{ animation:none; }
}