/* ---------- Overlay ---------- */
.call-overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(6,14,24,.92);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
}

/* ---------- Call box (desktop) ---------- */
.call-box{
  width:min(900px,92vw);
  max-height:92vh;
  background:#1c2935;border-radius:18px;
  padding:22px;gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;
}

/* ---------- Video ---------- */
.call-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:60vh;min-height:260px;
  background:#000;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.call-video video{
  width:100%;height:100%;
  object-fit:contain;background:#000;
  z-index:0;                    /* ниже аватара */
}
.call-avatar-ph{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:140px;height:140px;border-radius:50%;
  object-fit:cover; background:linear-gradient(135deg,#5ea8ff,#7ed0ff);  /* если src не загрузится */
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  pointer-events:none;
  z-index:2;                    /* выше video */
}

.call-fullscreen-btn{
  position:absolute;top:10px;right:10px;z-index:2;
  width:40px;height:40px;border-radius:10px;
  background:rgba(0,0,0,.5);border:none;color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background .15s;
}
.call-fullscreen-btn:hover{background:rgba(0,0,0,.75)}
.call-fullscreen-btn svg{width:20px;height:20px}

/* ---------- Info ---------- */
.call-info{text-align:center}
.call-title{color:#fff;font-weight:600;font-size:18px}
.call-timer{color:#8fa1b3;font-variant-numeric:tabular-nums;margin-top:2px}
.call-peer-state{color:#cfe0ee;font-size:13px;min-height:16px;margin-top:4px}

/* ---------- Controls ---------- */
.call-controls{
  display:flex;justify-content:center;align-items:center;
  gap:16px;width:100%;margin-top:auto;
}
.fab{
  width:58px;height:58px;border:none;border-radius:50%;
  display:grid;place-items:center;
  background:#2a3c4f;color:#fff;cursor:pointer;
  transition:transform .15s, background .15s;
}
.fab:hover{transform:scale(1.06)}
.fab svg{width:22px;height:22px}
.fab.active{background:var(--accent)}
.fab.end{background:#d04e4e}
.fab.end svg{transform:rotate(135deg)}

/* ---------- Mobile: full-screen overlay ---------- */
@media (max-width:900px){
  .call-overlay{
    background:#0e1621;backdrop-filter:none;
    padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
  }
  .call-box{
    width:100vw;height:100vh;height:100dvh;
    max-height:100vh;max-height:100dvh;
    border-radius:0;padding:14px 14px 22px;
    justify-content:space-between;box-shadow:none;
  }
  .call-video{
    flex:1 1 auto;
    width:100%;
    aspect-ratio:auto;                /* высота — по flex, не зажимаем */
    max-height:none;min-height:0;
  }
  .call-avatar-ph{width:120px;height:120px}
  .call-controls{gap:18px;padding-bottom:4px}
  .fab{width:64px;height:64px}
  .fab svg{width:24px;height:24px}
}

/* ---------- Browser fullscreen ---------- */
:fullscreen .call-box{
  width:100vw;height:100vh;max-height:100vh;
  border-radius:0;padding:14px;background:#0e1621;
}
:fullscreen .call-video{
  flex:1 1 auto;aspect-ratio:auto;max-height:none;
}

/* ---------- Incoming pulse ---------- */
.call-overlay.incoming .call-box{animation:callPulse 2s infinite}
@keyframes callPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(94,168,255,0)}
  50%    {box-shadow:0 0 0 22px rgba(94,168,255,.15)}
}

/* ---------- Accept (incoming UI) ---------- */
.fab.accept{background:#28a55e}
.fab.accept svg{transform:rotate(-135deg)}