/* ==========================================
       📞 CALL (call.html) — โทรด้วยเสียง / วิดีโอคอล แบบไอจี (WebRTC เครื่องต่อเครื่อง · utils/calls.py ส่งต่อสัญญาณ)
       สายเข้า: เช็คทุก 3 วิระหว่างเปิดเว็บ (+ แจ้งเตือนบนเครื่อง) · หน้าจอโทรทับทุกอย่างรวมหน้าแชท
    ========================================== */
    #call-screen { position: fixed; inset: 0; z-index: 1000080; display: none; color: #fff; background: #000; overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; touch-action: none; }
    #call-screen.open { display: block; animation: callIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
    #call-screen.closing { animation: callOut 0.25s ease forwards; }
    @keyframes callIn { from { opacity: 0; transform: scale(1.04); } }
    @keyframes callOut { to { opacity: 0; transform: scale(0.98); } }
    .call-bg { position: absolute; inset: -40px; background: #111 center / cover no-repeat; filter: blur(40px) brightness(0.45) saturate(1.2); transform: scale(1.1); }
    .call-remote, .call-local { position: absolute; object-fit: cover; background: #000; }
    .call-remote { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s; }
    #call-screen.has-remote .call-remote { opacity: 1; }
    .call-local { width: 104px; height: 152px; right: 14px; top: calc(env(safe-area-inset-top) + 14px); border-radius: 18px; z-index: 3;
        box-shadow: 0 8px 28px rgba(0,0,0,0.5); transform: scaleX(-1); transition: opacity 0.3s; }
    .call-local.back { transform: none; }
    #call-screen:not(.video) .call-local, #call-screen.cam-off .call-local, #call-screen:not(.has-local) .call-local { opacity: 0; pointer-events: none; }
    #call-screen:not(.video) .call-remote { display: none; }
    .call-info { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 18vh); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2;
        transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); }
    #call-screen.video.has-remote .call-info { top: calc(env(safe-area-inset-top) + 18px); left: 18px; right: auto; align-items: flex-start; gap: 2px; }
    #call-screen.video.has-remote .call-av { display: none; }
    .call-av { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; background: #222; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
    #call-screen.ringing .call-av { animation: callPulse 1.6s ease-in-out infinite; }
    @keyframes callPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.28); } 60% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } }
    .call-name { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
    #call-screen.video.has-remote .call-name { font-size: 17px; }
    .call-status { font-size: 15px; color: rgba(255,255,255,0.72); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
    .call-ctrl { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 34px); display: flex; justify-content: center; gap: 18px; z-index: 4; padding: 0 20px; }
    .call-btn { width: 62px; height: 62px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
        background: rgba(255,255,255,0.16); color: #fff; font-size: 27px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        transition: transform 0.15s, background 0.2s; -webkit-tap-highlight-color: transparent; }
    .call-btn:active { transform: scale(0.9); }
    .call-btn.on { background: #fff; color: #000; }
    .call-btn.end { background: #ff3b30; }
    /* ✨ แถบเลือกฟิลเตอร์ (facefx.html) — วงกลมเลื่อนแนวนอนเหนือปุ่ม แบบไอจี */
    .call-fx { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 112px); z-index: 4; display: flex; gap: 10px;
        overflow-x: auto; padding: 6px 16px; scrollbar-width: none; opacity: 0; pointer-events: none; transform: translateY(12px);
        transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); -webkit-overflow-scrolling: touch; }
    .call-fx::-webkit-scrollbar { display: none; }
    #call-screen.fx-open .call-fx { opacity: 1; pointer-events: auto; transform: none; }
    .call-fx button { flex: none; width: 64px; border: none; background: none; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; padding: 0; }
    .call-fx button span { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px;
        background: rgba(255,255,255,0.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 0.2s, transform 0.2s; }
    .call-fx button.on span { box-shadow: inset 0 0 0 2.5px #fff; transform: scale(1.06); }
    .call-fx button small { font-size: 10.5px; font-weight: 600; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
    .call-btn.accept { background: #34c759; }
    .call-btn[hidden] { display: none; }
    .call-lbl { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 12px); text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); z-index: 4; }