Update static/index.html

static/index.html

@@ -158,34 +158,6 @@ img{max-width:100%;display:block}
 .pact.liked{color:var(--acc3)}
 .pact .ai{font-size:17px}
 
-/* ── REELS ── */
-#reels-full{position:fixed;inset:0;z-index:200;background:#000;display:none}
-#reels-full.on{display:block}
-.reels-scroll{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}
-.reels-scroll::-webkit-scrollbar{display:none}
-.reel{height:100vh;width:100%;scroll-snap-align:start;position:relative;overflow:hidden;background:#000}
-.reel-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:100px}
-.reel-bg video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
-.reel-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 45%,rgba(0,0,0,.2) 100%)}
-.reel-info{position:absolute;bottom:0;left:0;right:64px;padding:16px 14px 90px}
-.reel-user{display:flex;align-items:center;gap:8px;margin-bottom:8px}
-.reel-av{width:38px;height:38px;border-radius:50%;border:2px solid #fff;overflow:hidden;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
-.reel-av img{width:100%;height:100%;object-fit:cover}
-.reel-uname{color:#fff;font-weight:700;font-size:14px;cursor:pointer}
-.reel-fol{background:transparent;border:1.5px solid #fff;border-radius:6px;padding:3px 10px;color:#fff;font-size:11px;font-weight:700;transition:all .15s}
-.reel-fol:hover{background:#fff;color:#000}
-.reel-cap{color:#fff;font-size:13px;line-height:1.6;margin-bottom:10px}
-.reel-mus{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:12px}
-.reel-mdisc{width:28px;height:28px;border-radius:50%;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:12px;animation:spin 3s linear infinite}
-.reel-acts{position:absolute;right:10px;bottom:90px;display:flex;flex-direction:column;align-items:center;gap:18px}
-.ract{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
-.ract-ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;transition:transform .15s}
-.ract:hover .ract-ic{transform:scale(1.1)}
-.ract span{color:#fff;font-size:10px;font-weight:600}
-.reels-close{position:absolute;top:env(safe-area-inset-top,14px);left:14px;z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;cursor:pointer}
-.reel-video-wrap{position:absolute;inset:0}.reel-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.reel-sound,.reel-play,.sv-sound{position:absolute;z-index:11;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;cursor:pointer;border:none}.reel-play{top:14px;left:14px}.reel-sound{top:14px;right:14px}.sv-sound{top:env(safe-area-inset-top,14px);right:54px}.sv-sound.off{opacity:.55}
-
-/* ── STORY VIEWER ── */
 #sv{position:fixed;inset:0;z-index:300;background:#000;display:none;flex-direction:column}
 #sv.on{display:flex}
 .sv-bars{position:absolute;top:env(safe-area-inset-top,10px);left:0;right:0;display:flex;gap:3px;padding:10px 10px 0;z-index:5}
@@ -386,7 +358,6 @@ img{max-width:100%;display:block}
 .empty-state .eico{font-size:48px;margin-bottom:12px}
 .empty-state p{font-size:13px;text-align:center;line-height:1.6}
 
-
 /* ── STORY COMPOSER ── */
 .story-effects{display:flex;gap:8px;overflow-x:auto;padding:6px 0 0;scrollbar-width:none}
 .story-effects::-webkit-scrollbar{display:none}
@@ -415,6 +386,29 @@ img{max-width:100%;display:block}
   width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:11px;padding:11px 14px;color:var(--text);font-size:14px;outline:none;font-family:Cairo,sans-serif;
 }
 
+
+/* ── CALLS ── */
+#call-modal{position:fixed;inset:0;z-index:720;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center;padding:16px}
+#call-modal.on{display:flex}
+.call-shell{width:min(100%,540px);height:min(100%,760px);background:linear-gradient(180deg,rgba(18,18,28,.98),rgba(10,10,16,.98));border:1px solid var(--border);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.45)}
+.call-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
+.call-peer{display:flex;align-items:center;gap:12px;min-width:0}
+.call-peer-av{width:48px;height:48px;border-radius:50%;background:var(--g1);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-size:18px;font-weight:700}
+.call-peer-name{font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
+.call-status{font-size:12px;color:var(--text2);margin-top:2px}
+.call-close{width:36px;height:36px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.call-media{flex:1;position:relative;background:#000;min-height:300px;display:flex;align-items:center;justify-content:center}
+.call-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
+#call-local-video{width:28%;height:28%;right:16px;left:auto;bottom:16px;top:auto;border:1px solid rgba(255,255,255,.25);border-radius:16px;overflow:hidden;object-fit:cover;z-index:2;display:none}
+#call-remote-video{z-index:1}
+.call-ring{position:relative;z-index:3;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;font-size:40px;border:1px solid rgba(255,255,255,.12);animation:pulse 1.5s ease-in-out infinite}
+.call-incoming,.call-controls{display:flex;gap:10px;padding:14px 16px;justify-content:center;flex-shrink:0}
+.call-btn{min-width:92px;height:44px;border-radius:14px;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
+.call-btn.accept{background:var(--acc2);border-color:var(--acc2);color:#fff}
+.call-btn.danger{background:var(--acc3);border-color:var(--acc3);color:#fff}
+.call-controls{padding-top:0;padding-bottom:18px}
+.call-btn:active{transform:scale(.97)}
+
 /* ── TOAST ── */
 #toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--card);border:1px solid var(--border);border-radius:24px;padding:10px 20px;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transition:all .3s;z-index:9000;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,.4)}
 #toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@@ -499,8 +493,7 @@ img{max-width:100%;display:block}
       <div class="ecats" id="ecats">
         <button class="ecat on" data-cat="all">الكل</button>
         <button class="ecat" data-cat="video">🎬 فيديو</button>
-        <button class="ecat" data-cat="reel">▶️ ريلز</button>
-        <button class="ecat" data-cat="photo">📸 صور</button>
+                <button class="ecat" data-cat="photo">📸 صور</button>
         <button class="ecat" data-cat="audio">🎵 صوتيات</button>
         <button class="ecat" data-cat="text">📝 نصوص</button>
       </div>
@@ -508,18 +501,8 @@ img{max-width:100%;display:block}
       <div id="explore-load" style="padding:20px;text-align:center"></div>
     </div>
 
-    <!-- REELS -->
-    <div class="page" id="page-reels">
-      <div style="height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;">
-        <div style="font-size:48px">▶️</div>
-        <div style="font-size:16px;font-weight:700">ريلز</div>
-        <button class="btn-main" style="padding:12px 32px;border-radius:12px;width:auto" onclick="openReels()">افتح الريلز</button>
-      </div>
-    </div>
-
-    <!-- MESSAGES -->
     <div class="page" id="page-messages">
-      <div class="sec-head"><span class="sec-ttl">💬 الرسائل</span><button class="sec-lnk" onclick="showNewMsgModal()">+ جديد</button></div>
+      <div class="sec-head"><span class="sec-ttl">💬 المراسلات</span><button class="sec-lnk" onclick="showNewMsgModal()">+ جديد</button></div>
       <div class="mlist" id="conv-list"></div>
     </div>
 
@@ -543,7 +526,6 @@ img{max-width:100%;display:block}
       </div>
       <div class="ptabs">
         <div class="ptab-btn on" onclick="switchPTab(this,'posts')">منشورات</div>
-        <div class="ptab-btn" onclick="switchPTab(this,'reels')">ريلز</div>
         <div class="ptab-btn" onclick="switchPTab(this,'saved')">محفوظ</div>
       </div>
       <div class="pgrid" id="prof-grid"></div>
@@ -567,18 +549,10 @@ img{max-width:100%;display:block}
     <button class="bnav-btn on" id="bn-home" onclick="showPage('home')"><span class="ic">🏠</span><span>الرئيسية</span></button>
     <button class="bnav-btn" id="bn-notif" onclick="showPage('notif')"><span class="ic">🔔</span><span>إشعارات</span></button>
     <div class="bnav-post" onclick="openPostModal()">+</div>
-    <button class="bnav-btn" id="bn-reels" onclick="openReels()"><span class="ic">▶️</span><span>ريلز</span></button>
-    <button class="bnav-btn" id="bn-messages" onclick="showPage('messages')"><span class="ic">💬</span><span>رسائل</span></button>
+    <button class="bnav-btn" id="bn-messages" onclick="showPage('messages')"><span class="ic">💬</span><span>المراسلات</span></button>
   </nav>
 </div>
 
-<!-- REELS FULLSCREEN -->
-<div id="reels-full">
-  <div class="reels-close" onclick="closeReels()">✕</div>
-  <div class="reels-scroll" id="reels-scroll"></div>
-</div>
-
-<!-- STORY VIEWER -->
 <div id="sv">
   <div class="sv-bars" id="sv-bars"></div>
   <div class="sv-head">
@@ -599,7 +573,6 @@ img{max-width:100%;display:block}
   </div>
 </div>
 
-
 <!-- STORY COMPOSER -->
 <div id="story-modal" class="moverlay" onclick="if(event.target===this)closeStoryComposer()">
   <div class="mbox">
@@ -651,8 +624,8 @@ img{max-width:100%;display:block}
       <div class="chat-st">● متصل</div>
     </div>
     <div class="chat-acts">
-      <div class="chat-act" onclick="showToast('📞 مكالمة صوتية')">📞</div>
-      <div class="chat-act" onclick="showToast('📹 مكالمة مرئية')">📹</div>
+      <div class="chat-act" title="مكالمة صوتية" onclick="startCall('audio')">📞</div>
+      <div class="chat-act" title="مكالمة مرئية" onclick="startCall('video')">📹</div>
     </div>
   </div>
   <div class="chat-msgs" id="chat-msgs"></div>
@@ -668,6 +641,40 @@ img{max-width:100%;display:block}
   </div>
 </div>
 
+
+<!-- CALL MODAL -->
+<div id="call-modal">
+  <div class="call-shell">
+    <div class="call-head">
+      <div class="call-peer">
+        <div class="call-peer-av" id="call-peer-av">👤</div>
+        <div class="call-peer-meta">
+          <div class="call-peer-name" id="call-peer-name">—</div>
+          <div class="call-status" id="call-status">جاهز للمكالمة</div>
+        </div>
+      </div>
+      <button class="call-close" onclick="endCall(true)">✕</button>
+    </div>
+
+    <div class="call-media">
+      <video id="call-remote-video" autoplay playsinline></video>
+      <video id="call-local-video" autoplay muted playsinline></video>
+      <div class="call-ring" id="call-ring">📞</div>
+    </div>
+
+    <div class="call-incoming" id="call-incoming-actions" style="display:none">
+      <button class="call-btn accept" onclick="acceptIncomingCall()">قبول</button>
+      <button class="call-btn danger" onclick="rejectIncomingCall()">رفض</button>
+    </div>
+
+    <div class="call-controls">
+      <button class="call-btn" id="call-mic-btn" onclick="toggleCallMute()">🎤</button>
+      <button class="call-btn" id="call-cam-btn" onclick="toggleCallCamera()">📷</button>
+      <button class="call-btn danger" onclick="endCall(true)">إنهاء</button>
+    </div>
+  </div>
+</div>
+
 <!-- POST MODAL — FULLSCREEN -->
 <div class="moverlay" id="post-modal">
   <div class="mbox">
@@ -728,7 +735,6 @@ img{max-width:100%;display:block}
   </div>
 </div>
 
-
 <!-- POST VIEWER -->
 <div id="post-viewer" class="moverlay" onclick="if(event.target===this)closePostViewer()">
   <div class="mbox">
@@ -804,6 +810,16 @@ let currentCommentPostId = null;
 let currentEditPostId = null;
 let currentMenuPostId = null;
 let currentMenuOwnerId = null;
+let callPeer = null;
+let callStream = null;
+let callType = '';
+let callTargetId = '';
+let callId = '';
+let callMode = 'idle'; // idle | outgoing | incoming | connected
+let callIncomingOffer = null;
+let callIncomingFrom = null;
+let callMute = false;
+let callCameraOff = false;
 
 // ═══════════════════════════════════════════════
 //  UTILS
@@ -1599,133 +1615,6 @@ document.getElementById('ecats').addEventListener('click', e => {
   loadExplore();
 });
 
-// ═══════════════════════════════════════════════
-//  REELS — FIXED (video display)
-// ═══════════════════════════════════════════════
-async function openReels() {
-  const full = document.getElementById('reels-full');
-  full.classList.add('on');
-  document.body.style.overflow = 'hidden';
-  const scroll = document.getElementById('reels-scroll');
-  scroll.innerHTML = '<div style="height:100%;display:flex;align-items:center;justify-content:center"><div class="spin-sm"></div></div>';
-  try {
-    const { reels } = await api(`/api/reels?user_id=${ME.id}`);
-    scroll.innerHTML = '';
-    if (!reels || !reels.length) {
-      scroll.innerHTML = `<div class="reel" style="display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#fff">
-        <div style="font-size:48px">▶️</div><div>لا توجد ريلز بعد</div>
-        <button onclick="closeReels();openPostModal()" style="background:var(--g1);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-family:Cairo,sans-serif;font-weight:700;font-size:14px;cursor:pointer">أضف أول ريل ⚡</button>
-      </div>`;
-      return;
-    }
-    reels.forEach(r => scroll.appendChild(buildReel(r)));
-  } catch(e) {
-    scroll.innerHTML = `<div class="reel" style="display:flex;align-items:center;justify-content:center;color:#fff;flex-direction:column;gap:10px"><div>⚠️ ${e.message}</div></div>`;
-  }
-}
-
-function closeReels() {
-  document.getElementById('reels-full').classList.remove('on');
-  document.body.style.overflow = '';
-  document.querySelectorAll('#reels-scroll video').forEach(v=>{ v.pause(); v.src = ''; });
-}
-
-function buildReel(r) {
-  const u = r.user || {};
-  const d = document.createElement('div');
-  d.className = 'reel';
-  const emojis = ['💃','🎸','🌊','🔥','🎨','😂','✈️','🎵','⚡','🌟'];
-  const em = emojis[Math.floor(Math.random()*emojis.length)];
-
-  // Reels: autoplay muted on load, but with explicit play/pause and sound controls
-  const videoHtml = r.file_url
-    ? `<div class="reel-video-wrap">
-         <video class="reel-video" src="${API_URL}${r.file_url}" playsinline loop muted webkit-playsinline preload="metadata"></video>
-         <button type="button" class="reel-play" onclick="toggleReelPlay(this)" title="إيقاف/تشغيل">⏸</button>
-         <button type="button" class="reel-sound" onclick="toggleReelSound(this)" title="تشغيل الصوت">🔇</button>
-       </div>`
-    : `<span style="font-size:80px;position:relative;z-index:1">${em}</span>`;
-
-  d.innerHTML = `
-    <div class="reel-bg" style="z-index:0">${videoHtml}</div>
-    <div class="reel-grad" style="z-index:1"></div>
-    <div class="reel-info" style="z-index:2">
-      <div class="reel-user">
-        <div class="reel-av">${avatarEl(u,38)}</div>
-        <div class="reel-uname" onclick="openUserProfile('${u.id}')">${u.name||'—'}</div>
-        <button class="reel-fol" onclick="toggleFollowUser('${u.id}',this)">${r.user?.is_following?'✓ متابَع':'+ تابع'}</button>
-      </div>
-      <div class="reel-cap">${r.caption||''}</div>
-      <div class="reel-mus"><div class="reel-mdisc">♪</div><span>THE Z CHAT</span></div>
-    </div>
-    <div class="reel-acts" style="z-index:2">
-      <div class="ract" onclick="toggleLikeReel(this,'${r.id}')">
-        <div class="ract-ic">${r.is_liked?'❤️':'🤍'}</div><span>${fmt(r.likes_count)}</span>
-      </div>
-      <div class="ract" onclick="openComments('${r.id}')">
-        <div class="ract-ic">💬</div><span>${fmt(r.comments_count)}</span>
-      </div>
-      <div class="ract" onclick="sharePost('${r.id}')">
-        <div class="ract-ic">↗️</div><span>شارك</span>
-      </div>
-    </div>`;
-
-  // Auto-play / pause based on visibility, while keeping current sound state
-  if (r.file_url) {
-    const obs = new IntersectionObserver(entries => {
-      entries.forEach(e => {
-        const v = d.querySelector('video');
-        const playBtn = d.querySelector('.reel-play');
-        if (!v) return;
-        if (e.isIntersecting) {
-          v.play().then(() => {
-            if (playBtn) playBtn.textContent = '⏸';
-          }).catch(()=>{});
-        } else {
-          v.pause();
-          if (playBtn) playBtn.textContent = '▶️';
-        }
-      });
-    }, { threshold: 0.6 });
-    obs.observe(d);
-
-    // Tap anywhere on the video to toggle pause/play
-    const v = d.querySelector('video');
-    v && v.addEventListener('click', () => toggleReelPlay(d.querySelector('.reel-play')));
-  }
-  return d;
-}
-
-function toggleReelPlay(btn) {
-  const reel = btn.closest('.reel');
-  const vid = reel ? reel.querySelector('video') : null;
-  if (!vid) return;
-  if (vid.paused) {
-    vid.play().then(() => { btn.textContent = '⏸'; }).catch(() => {});
-  } else {
-    vid.pause();
-    btn.textContent = '▶️';
-  }
-}
-
-function toggleReelSound(btn) {
-  const reel = btn.closest('.reel');
-  const vid = reel ? reel.querySelector('video') : null;
-  if (!vid) return;
-  vid.muted = !vid.muted;
-  vid.volume = 1;
-  if (!vid.muted && vid.paused) vid.play().catch(()=>{});
-  btn.textContent = vid.muted ? '🔇' : '🔊';
-  btn.title = vid.muted ? 'تشغيل الصوت' : 'كتم الصوت';
-}
-async function toggleLikeReel(el, postId) {
-  try {
-    const res = await api(`/api/posts/${postId}/like?user_id=${ME.id}`, 'POST');
-    el.querySelector('.ract-ic').textContent = res.liked ? '❤️' : '🤍';
-    el.querySelector('span').textContent = fmt(res.count);
-  } catch(e) {}
-}
-
 // ═══════════════════════════════════════════════
 //  MESSAGES — FIXED (file sending)
 // ═══════════════════════════════════════════════
@@ -1846,6 +1735,309 @@ async function sendChatFile(inp) {
 }
 
 function closeChat() { document.getElementById('chat-win').classList.remove('on'); currentChat = null; }
+
+
+// ═══════════════════════════════════════════════
+//  CALLS — WebRTC
+// ═══════════════════════════════════════════════
+const CALL_ICE = [{ urls: 'stun:stun.l.google.com:19302' }];
+
+function uid() {
+  try { return crypto.randomUUID(); } catch(e) { return 'call-' + Date.now() + '-' + Math.floor(Math.random()*1e6); }
+}
+
+function showCallModal() {
+  document.getElementById('call-modal').classList.add('on');
+}
+
+function hideCallModal() {
+  document.getElementById('call-modal').classList.remove('on');
+}
+
+function setCallStatus(text) {
+  const el = document.getElementById('call-status');
+  if (el) el.textContent = text;
+}
+
+function setCallPeer(user, incoming=false) {
+  const nameEl = document.getElementById('call-peer-name');
+  const avEl = document.getElementById('call-peer-av');
+  if (nameEl) nameEl.textContent = user?.name || '—';
+  if (avEl) avEl.innerHTML = avatarEl(user, 48);
+  document.getElementById('call-incoming-actions').style.display = incoming ? 'flex' : 'none';
+}
+
+function resetCallUI() {
+  const remote = document.getElementById('call-remote-video');
+  const local = document.getElementById('call-local-video');
+  const ring = document.getElementById('call-ring');
+  if (remote) remote.srcObject = null;
+  if (local) local.srcObject = null;
+  if (local) local.style.display = 'none';
+  if (ring) ring.style.display = 'flex';
+  document.getElementById('call-incoming-actions').style.display = 'none';
+  document.getElementById('call-mic-btn').textContent = '🎤';
+  document.getElementById('call-cam-btn').textContent = '📷';
+  callMute = false;
+  callCameraOff = false;
+}
+
+async function prepareLocalStream(kind) {
+  const constraints = { audio: true, video: kind === 'video' };
+  const stream = await navigator.mediaDevices.getUserMedia(constraints);
+  callStream = stream;
+  const local = document.getElementById('call-local-video');
+  local.srcObject = stream;
+  local.style.display = kind === 'video' ? 'block' : 'none';
+  const ring = document.getElementById('call-ring');
+  if (ring) ring.style.display = 'none';
+  return stream;
+}
+
+function makePeer() {
+  if (callPeer) {
+    try { callPeer.close(); } catch(e) {}
+  }
+  callPeer = new RTCPeerConnection({ iceServers: CALL_ICE });
+
+  callPeer.onicecandidate = (e) => {
+    if (e.candidate && WS?.readyState === 1) {
+      WS.send(JSON.stringify({
+        type: 'call_ice',
+        to: callTargetId,
+        call_id: callId,
+        call_type: callType,
+        candidate: e.candidate
+      }));
+    }
+  };
+
+  callPeer.ontrack = (e) => {
+    const remote = document.getElementById('call-remote-video');
+    if (remote && e.streams && e.streams[0]) {
+      remote.srcObject = e.streams[0];
+      remote.play?.().catch(() => {});
+    }
+    setCallStatus('متصل');
+  };
+
+  callPeer.onconnectionstatechange = () => {
+    if (!callPeer) return;
+    const st = callPeer.connectionState;
+    if (st === 'connected') setCallStatus('متصل');
+    else if (st === 'connecting') setCallStatus('جاري الاتصال...');
+    else if (st === 'failed') {
+      setCallStatus('فشل الاتصال');
+      endCall(false);
+    } else if (st === 'disconnected' || st === 'closed') {
+      endCall(false);
+    }
+  };
+}
+
+async function startCall(type) {
+  if (!currentChat) return showToast('افتح محادثة أولاً');
+  if (!WS || WS.readyState !== 1) return showToast('الاتصال غير جاهز');
+  if (!navigator.mediaDevices?.getUserMedia) return showToast('المتصفح لا يدعم المكالمات');
+  if (callMode !== 'idle') endCall(false);
+
+  callType = type;
+  callTargetId = currentChat.user_id;
+  callId = uid();
+  callMode = 'outgoing';
+  callIncomingOffer = null;
+  callIncomingFrom = null;
+
+  setCallPeer(currentChat, false);
+  setCallStatus(type === 'video' ? 'بدء مكالمة مرئية...' : 'بدء مكالمة صوتية...');
+  showCallModal();
+  resetCallUI();
+  document.getElementById('call-ring').style.display = 'flex';
+
+  try {
+    await prepareLocalStream(type);
+    makePeer();
+    callStream.getTracks().forEach(track => callPeer.addTrack(track, callStream));
+
+    const offer = await callPeer.createOffer();
+    await callPeer.setLocalDescription(offer);
+
+    WS.send(JSON.stringify({
+      type: 'call_offer',
+      to: callTargetId,
+      call_id: callId,
+      call_type: callType,
+      from_name: ME?.name || ''
+    }));
+    WS.send(JSON.stringify({
+      type: 'call_offer_sdp',
+      to: callTargetId,
+      call_id: callId,
+      call_type: callType,
+      sdp: offer
+    }));
+    setCallStatus('جاري الاتصال...');
+  } catch(e) {
+    showToast('❌ ' + (e.message || 'تعذر بدء المكالمة'));
+    endCall(false);
+  }
+}
+
+function handleIncomingCall(msg) {
+  if (callMode !== 'idle') {
+    try {
+      WS.send(JSON.stringify({
+        type: 'call_busy',
+        to: msg.from,
+        call_id: msg.call_id || '',
+        call_type: msg.call_type || 'audio'
+      }));
+    } catch(e) {}
+    return;
+  }
+
+  callMode = 'incoming';
+  callType = msg.call_type || 'audio';
+  callTargetId = msg.from;
+  callId = msg.call_id || uid();
+  callIncomingFrom = { id: msg.from, name: msg.from_name || 'مستخدم' };
+  callIncomingOffer = msg.sdp || null;
+
+  setCallPeer(callIncomingFrom, true);
+  setCallStatus(callType === 'video' ? 'مكالمة مرئية واردة' : 'مكالمة صوتية واردة');
+  showCallModal();
+  resetCallUI();
+  document.getElementById('call-ring').style.display = 'flex';
+}
+
+async function acceptIncomingCall() {
+  if (!callIncomingOffer) return;
+  document.getElementById('call-incoming-actions').style.display = 'none';
+  setCallStatus('جاري قبول المكالمة...');
+  try {
+    await prepareLocalStream(callType);
+    makePeer();
+    callStream.getTracks().forEach(track => callPeer.addTrack(track, callStream));
+
+    await callPeer.setRemoteDescription(new RTCSessionDescription(callIncomingOffer));
+    const answer = await callPeer.createAnswer();
+    await callPeer.setLocalDescription(answer);
+
+    WS.send(JSON.stringify({
+      type: 'call_answer',
+      to: callTargetId,
+      call_id: callId,
+      call_type: callType,
+      sdp: answer
+    }));
+    callMode = 'connected';
+    setCallStatus('متصل');
+  } catch(e) {
+    showToast('❌ ' + (e.message || 'تعذر قبول المكالمة'));
+    endCall(false);
+  }
+}
+
+function rejectIncomingCall() {
+  if (WS?.readyState === 1 && callTargetId) {
+    WS.send(JSON.stringify({
+      type: 'call_reject',
+      to: callTargetId,
+      call_id: callId,
+      call_type: callType
+    }));
+  }
+  endCall(false);
+}
+
+function toggleCallMute() {
+  if (!callStream) return;
+  callMute = !callMute;
+  callStream.getAudioTracks().forEach(t => t.enabled = !callMute);
+  document.getElementById('call-mic-btn').textContent = callMute ? '🔇' : '🎤';
+}
+
+function toggleCallCamera() {
+  if (!callStream) return;
+  const tracks = callStream.getVideoTracks();
+  if (!tracks.length) return showToast('هذه مكالمة صوتية');
+  callCameraOff = !callCameraOff;
+  tracks.forEach(t => t.enabled = !callCameraOff);
+  document.getElementById('call-cam-btn').textContent = callCameraOff ? '🚫📷' : '📷';
+}
+
+function endCall(notify = true) {
+  try {
+    if (notify && WS?.readyState === 1 && callTargetId) {
+      WS.send(JSON.stringify({
+        type: 'call_end',
+        to: callTargetId,
+        call_id: callId,
+        call_type: callType
+      }));
+    }
+  } catch(e) {}
+
+  if (callPeer) {
+    try { callPeer.ontrack = null; callPeer.onicecandidate = null; callPeer.close(); } catch(e) {}
+  }
+  if (callStream) {
+    callStream.getTracks().forEach(t => { try { t.stop(); } catch(e) {} });
+  }
+  callPeer = null;
+  callStream = null;
+  callType = '';
+  callTargetId = '';
+  callId = '';
+  callMode = 'idle';
+  callIncomingOffer = null;
+  callIncomingFrom = null;
+  resetCallUI();
+  hideCallModal();
+  setCallStatus('جاهز للمكالمة');
+  if (notify) showToast('تم إنهاء المكالمة');
+}
+
+function handleCallSignal(msg) {
+  if (!msg || !msg.type) return;
+  if (msg.type === 'call_offer') {
+    handleIncomingCall(msg);
+    return;
+  }
+  if (msg.type === 'call_offer_sdp') {
+    if (callMode === 'outgoing' && callPeer && msg.sdp) {
+      callPeer.setRemoteDescription(new RTCSessionDescription(msg.sdp)).catch(() => {});
+      document.getElementById('call-ring').style.display = 'none';
+      document.getElementById('call-local-video').style.display = callType === 'video' ? 'block' : 'none';
+    }
+    return;
+  }
+  if (msg.type === 'call_answer') {
+    if (callMode === 'outgoing' && callPeer && msg.sdp) {
+      callPeer.setRemoteDescription(new RTCSessionDescription(msg.sdp)).catch(() => {});
+      callMode = 'connected';
+      setCallStatus('متصل');
+      document.getElementById('call-ring').style.display = 'none';
+    }
+    return;
+  }
+  if (msg.type === 'call_ice' && callPeer && msg.candidate) {
+    callPeer.addIceCandidate(new RTCIceCandidate(msg.candidate)).catch(() => {});
+    return;
+  }
+  if (msg.type === 'call_reject') {
+    showToast('تم رفض المكالمة');
+    endCall(false);
+    return;
+  }
+  if (msg.type === 'call_end' || msg.type === 'call_busy') {
+    showToast(msg.type === 'call_busy' ? 'الشخص مشغول الآن' : 'انتهت المكالمة');
+    endCall(false);
+    return;
+  }
+}
+
+
 function showNewMsgModal() {
   const un = prompt('اكتب اسم مستخدم الشخص:');
   if (!un) return;
@@ -2255,6 +2447,8 @@ function connectWS() {
             showToast('💬 رسالة جديدة من ' + (msg.message.sender?.name || 'مستخدم'));
             loadConversations();
           }
+        } else if (msg.type && msg.type.startsWith('call_')) {
+          handleCallSignal(msg);
         }
       } catch(e) {}
     };