/* Extracted from call.html */

    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    body{background:#000;color:#fff;font-family:'Satoshi',system-ui,sans-serif;overflow:hidden;height:100vh;height:100dvh}

    /* ── Permission Prompt ── */
    .perm{position:fixed;inset:0;background:rgba(5,5,16,.97);backdrop-filter:blur(20px);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,3vw,1.5rem);text-align:center;padding:clamp(1rem,4vw,2rem);animation:fadeIn .4s ease}
    .perm-icon{width:clamp(60px,15vw,100px);height:clamp(60px,15vw,100px);border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px rgba(99,102,241,.3)}
    .perm-icon .material-symbols-outlined{font-size:clamp(2rem,6vw,3rem);color:#fff}
    .perm-title{font-family:'Clash Display',sans-serif;font-size:clamp(1.25rem,4vw,1.75rem);color:#fff}
    .perm-desc{color:#9ca3af;font-size:clamp(.8rem,2.5vw,.95rem);max-width:320px;line-height:1.6}
    .perm-btns{display:flex;gap:clamp(.75rem,2vw,1rem);flex-wrap:wrap;justify-content:center}
    .perm-yes{width:clamp(120px,30vw,150px);padding:clamp(.75rem,2vw,1rem);border-radius:14px;border:none;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-family:'Satoshi',system-ui,sans-serif;font-size:clamp(.85rem,2.5vw,1rem);font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 8px 30px rgba(99,102,241,.3)}
    .perm-yes:hover{transform:scale(1.05)}
    .perm-no{width:clamp(120px,30vw,150px);padding:clamp(.75rem,2vw,1rem);border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font-family:'Satoshi',system-ui,sans-serif;font-size:clamp(.85rem,2.5vw,1rem);font-weight:600;cursor:pointer;transition:all .2s}
    .perm-no:hover{background:rgba(255,255,255,.1)}
    .perm-hint{color:#6b7280;font-size:clamp(.65rem,1.8vw,.75rem)}

    /* ── Call Container ── */
    .call-wrap{position:relative;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column}

    /* ── Video Area ── */
    .video-area{flex:1;position:relative;overflow:hidden;background:linear-gradient(135deg,#0a0a1a,#0f0f2e)}
    .video-area video{width:100%;height:100%;object-fit:cover}

    /* ── Self View PiP ── */
    .self-pip{position:absolute;top:clamp(60px,10vh,80px);right:clamp(8px,2vw,16px);width:clamp(80px,20vw,120px);height:clamp(110px,28vh,160px);border-radius:clamp(10px,2vw,16px);overflow:hidden;border:2px solid rgba(255,255,255,.2);background:#1a1a2e;z-index:30;box-shadow:0 8px 30px rgba(0,0,0,.5);display:none;animation:slideInRight .4s ease}
    .self-pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}

    /* ── Camera PiP (during screen share) ── */
    .cam-pip{position:absolute;bottom:clamp(100px,15vh,140px);left:clamp(8px,2vw,16px);width:clamp(70px,18vw,110px);height:clamp(50px,12vh,80px);border-radius:clamp(8px,1.5vw,12px);overflow:hidden;border:2px solid rgba(255,255,255,.3);background:#000;z-index:25;box-shadow:0 4px 20px rgba(0,0,0,.5);display:none}
    .cam-pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}

    /* ── Header ── */
    .call-hdr{position:absolute;top:0;left:0;right:0;z-index:20;padding:clamp(36px,5vh,50px) clamp(8px,2vw,16px) clamp(8px,2vh,16px);background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);display:flex;align-items:center;gap:clamp(8px,2vw,12px);animation:fadeInDown .4s ease}
    .hdr-btn{width:clamp(32px,8vw,40px);height:clamp(32px,8vw,40px);border-radius:10px;background:rgba(255,255,255,.1);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
    .hdr-btn:hover{background:rgba(255,255,255,.2)}
    .hdr-info{flex:1;min-width:0}
    .hdr-name{font-size:clamp(.85rem,2.5vw,1rem);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hdr-status{font-size:clamp(.65rem,1.8vw,.75rem);color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px}
    .hdr-dot{width:7px;height:7px;border-radius:50%;background:#f59e0b;transition:background .3s}
    .hdr-dot.on{background:#10b981;animation:pDot 2s infinite}
    .hdr-dot.off{background:#ef4444}
    @keyframes pDot{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}
    .hdr-timer{font-family:'Clash Display',sans-serif;font-size:clamp(.75rem,2vw,.85rem);color:rgba(255,255,255,.7);background:rgba(0,0,0,.4);padding:4px 12px;border-radius:20px;letter-spacing:.05em;opacity:0;transition:opacity .4s;white-space:nowrap}
    .hdr-timer.on{opacity:1}

    /* ── Waiting ── */
    .wait{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a1a,#0f0f2e);gap:clamp(.75rem,2vh,1rem);animation:fadeIn .4s ease}
    .wait-av{width:clamp(80px,20vw,120px);height:clamp(80px,20vw,120px);border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:clamp(2rem,7vw,3.5rem);font-weight:700;font-family:'Clash Display',sans-serif;animation:waitP 2s infinite;box-shadow:0 20px 60px rgba(99,102,241,.3)}
    @keyframes waitP{0%,100%{transform:scale(1);box-shadow:0 20px 60px rgba(99,102,241,.3)}50%{transform:scale(1.05);box-shadow:0 25px 80px rgba(99,102,241,.5)}}
    .wait-name{font-family:'Clash Display',sans-serif;font-size:clamp(1.25rem,4vw,1.75rem);font-weight:600}
    .wait-txt{font-size:clamp(.8rem,2.5vw,.9rem);color:rgba(255,255,255,.6)}
    .wait-dots{display:flex;gap:6px;margin-top:8px}
    .wait-d{width:8px;height:8px;border-radius:50%;background:rgba(99,102,241,.4);animation:dBounce 1.4s infinite}
    .wait-d:nth-child(2){animation-delay:.2s}.wait-d:nth-child(3){animation-delay:.4s}
    @keyframes dBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

    /* ── Voice Layout ── */
    .voice{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a1a,#0f0f2e);gap:clamp(1rem,3vh,1.5rem);animation:fadeIn .4s ease}
    .voice-av{width:clamp(100px,25vw,160px);height:clamp(100px,25vw,160px);border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:clamp(2.5rem,8vw,4.5rem);font-weight:700;font-family:'Clash Display',sans-serif;box-shadow:0 20px 60px rgba(99,102,241,.3);position:relative}
    .v-ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(99,102,241,.2);animation:rPulse 3s infinite}
    .v-ring2{position:absolute;inset:-25px;border-radius:50%;border:1px solid rgba(99,102,241,.1);animation:rPulse 3s infinite .5s}
    @keyframes rPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.6}}
    .snd-waves{position:absolute;inset:-50px;pointer-events:none;display:none}
    .snd-w{position:absolute;border-radius:50%;border:1px solid rgba(99,102,241,.15);animation:sExp 2s infinite}
    .snd-w:nth-child(1){inset:0;animation-delay:0s}.snd-w:nth-child(2){inset:-15px;animation-delay:.4s}.snd-w:nth-child(3){inset:-30px;animation-delay:.8s}
    @keyframes sExp{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.3);opacity:0}}
    .v-timer{font-family:'Clash Display',sans-serif;font-size:clamp(1rem,3vw,1.5rem);color:rgba(255,255,255,.6);letter-spacing:.1em;opacity:0;transition:opacity .5s}
    .v-timer.on{opacity:1}

    /* ── Controls ── */
    .ctrls{position:absolute;bottom:0;left:0;right:0;z-index:20;padding:clamp(12px,3vh,20px) clamp(8px,2vw,16px) clamp(20px,4vh,40px);padding-bottom:max(clamp(20px,4vh,40px),env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,3vw,1.25rem);animation:fadeInUp .4s ease}
    .ctrl{display:flex;flex-direction:column;align-items:center;gap:4px}
    .c-btn{width:clamp(44px,12vw,56px);height:clamp(44px,12vw,56px);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}
    .c-btn .material-symbols-outlined{font-size:clamp(1.1rem,3.5vw,1.4rem)}
    .c-btn.on{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.1);color:#fff}
    .c-btn.on:hover{background:rgba(255,255,255,.25);transform:scale(1.08)}
    .c-btn.off{background:rgba(239,68,68,.3);border:1px solid rgba(239,68,68,.4);color:#fff}
    .c-btn.active{background:rgba(99,102,241,.3);border:1px solid rgba(99,102,241,.4);color:#fff}
    .e-btn{width:clamp(50px,14vw,64px);height:clamp(50px,14vw,64px);border-radius:50%;border:none;background:#ef4444;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 30px rgba(239,68,68,.4)}
    .e-btn:hover{transform:scale(1.1);box-shadow:0 12px 40px rgba(239,68,68,.5)}
    .e-btn:active{transform:scale(.95)}
    .e-btn .material-symbols-outlined{font-size:clamp(1.4rem,4.5vw,1.8rem);font-variation-settings:'FILL' 1}
    .c-label{font-size:clamp(.5rem,1.5vw,.6rem);color:rgba(255,255,255,.5)}

    /* ── Animations ── */
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    @keyframes slideInRight{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}

    /* ── Landscape ── */
    @media(orientation:landscape) and (max-height:500px){
      .self-pip{width:60px;height:80px;top:50px;right:8px}
      .ctrls{padding-bottom:12px;gap:.5rem}
      .c-btn{width:40px;height:40px}.e-btn{width:46px;height:46px}
      .voice-av{width:80px;height:80px;font-size:2rem}
    }

    /* ── Desktop ── */
    @media(min-width:768px){
      .self-pip{width:160px;height:210px;top:100px;right:24px}
      .cam-pip{width:140px;height:100px}
      .c-btn{width:60px;height:60px}.e-btn{width:70px;height:70px}
    }