/* Call modal UI */
.call-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3000;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:18px;}
.call-card{width:min(720px, 96vw);background:#0b0b0f;border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);color:#fff;}
.call-title{font-size:18px;font-weight:800;margin:4px 0 2px;}
.call-sub{font-size:13px;opacity:.8;margin-bottom:10px}
.call-videos{display:grid;grid-template-columns:1fr 160px;gap:10px;align-items:stretch;}
.call-videos video{width:100%;height:260px;background:#000;border-radius:14px;object-fit:cover;}
#callLocal{height:120px;}
.call-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.call-btn{border:0;border-radius:12px;padding:10px 12px;font-weight:700;cursor:pointer;background:rgba(255,255,255,.12);color:#fff}
.call-btn:hover{background:rgba(255,255,255,.18)}
.call-btn.danger{background:rgba(255,70,70,.22)}
.call-btn.danger:hover{background:rgba(255,70,70,.30)}
.call-btn.ghost{background:rgba(255,255,255,.08)}
.call-incoming{margin-top:10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.call-incoming-text{font-weight:700;margin-bottom:8px}
@media (max-width:560px){
  .call-videos{grid-template-columns:1fr;}
  #callLocal{height:140px;}
}
.hidden{display:none!important}
.call-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.call-x{border:0;background:transparent;color:#fff;font-size:18px;font-weight:900;cursor:pointer;padding:6px 10px;border-radius:10px}
.call-x:hover{background:rgba(255,255,255,.08)}
.call-video{position:relative}
.call-video-inner{width:100%;height:260px;background:#000;border-radius:14px;overflow:hidden}
#localWrap .call-video-inner{height:120px}
.call-video-label{position:absolute;left:10px;top:10px;font-size:12px;font-weight:800;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
@media (max-width:560px){#localWrap .call-video-inner{height:140px}}

/* === Fullscreen call (mobile) ===
   Goal: WhatsApp/Telegram-like full screen call UI.
   Activated by JS: .call-modal.fullscreen
*/
.call-modal.fullscreen{background:#000;backdrop-filter:none;padding:0;align-items:stretch;justify-content:stretch;}
.call-modal.fullscreen .call-card{width:100vw;height:100vh;max-height:none;border-radius:0;border:0;box-shadow:none;padding:0;display:flex;flex-direction:column;}
.call-modal.fullscreen .call-top{padding:14px 14px 10px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.18));}
.call-modal.fullscreen .call-body{flex:1;min-height:0;}
.call-modal.fullscreen .call-videos{display:block;height:100%;position:relative;}
.call-modal.fullscreen #remoteWrap{height:100%;}
.call-modal.fullscreen #remoteWrap .call-video-inner{height:100%;border-radius:0;}
.call-modal.fullscreen #localWrap{position:absolute;right:12px;bottom:94px;z-index:5;width:120px;}
.call-modal.fullscreen #localWrap .call-video-inner{height:160px;border-radius:14px;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 24px rgba(0,0,0,.45);}
.call-modal.fullscreen .call-video-label{top:8px;left:8px;}
.call-modal.fullscreen .call-actions{padding:16px 14px 22px;justify-content:center;gap:12px;background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));}
.call-modal.fullscreen .call-btn{padding:14px 16px;border-radius:16px;font-size:15px;}
.call-modal.fullscreen .call-x{width:44px;height:44px;}

/* Hide bottom navigation while call is active */
body.call-active .bottom-nav{display:none!important;}


/* === Floating mode (mobile) === */
.call-modal.floating{background:transparent;backdrop-filter:none;align-items:flex-start;justify-content:flex-start;pointer-events:none;}
.call-modal.floating .call-card{position:fixed;pointer-events:auto;width:min(420px, 92vw);max-height:min(78vh, 520px);overflow:hidden;}
.call-modal.floating .call-card.dragging{opacity:.96;}
@media (max-width:520px){
  .call-card{width:92vw;border-radius:16px;}
  .call-title{font-size:16px;}
  .call-actions{gap:10px;flex-wrap:wrap}
  .call-btn{padding:12px 14px;font-size:14px;border-radius:14px;}
  .call-x{width:42px;height:42px;font-size:18px;}
}


/* === Bubble minimize === */
.call-bubble{position:fixed;z-index:4000;right:18px;bottom:18px;}
.call-bubble-btn{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:#25D366;color:#fff;font-size:22px;box-shadow:0 12px 28px rgba(0,0,0,.45);}
.call-top-actions{display:flex;gap:8px;align-items:center;}
.call-x.mini{width:40px;height:40px;border-radius:12px;font-size:18px;opacity:.9;}