1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>NexChat</title>
  7.   <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  8.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  9.   <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  10.   <style>
  11.     :root {
  12.       --bg-void: #070910; --bg-servers: #0c0e18; --bg-sidebar: #10131f; --bg-main: #151a28;
  13.       --bg-input: #1c2133; --bg-hover: #192035; --bg-active: #212a42; --accent: #818cf8;
  14.       --accent-dim: #4f56c5; --accent-glow: rgba(129,140,248,0.18); --green: #4ade80;
  15.       --amber: #fbbf24; --red: #f87171; --text-primary: #e8ecf5; --text-secondary: #8b96b3;
  16.       --text-muted: #4a5470; --border: rgba(255,255,255,0.07); --radius: 8px;
  17.       --font: 'Syne', sans-serif; --mono: 'JetBrains Mono', monospace;
  18.     }
  19.     [data-theme="light"] {
  20.       --bg-void: #f5f7fa; --bg-servers: #eef0f5; --bg-sidebar: #ffffff; --bg-main: #fafbfc;
  21.       --bg-input: #edf2f7; --bg-hover: #e2e8f0; --bg-active: #cbd5e1; --accent: #4f46e5;
  22.       --accent-dim: #4338ca; --accent-glow: rgba(79,70,229,0.15); --green: #10b981;
  23.       --amber: #f59e0b; --red: #ef4444; --text-primary: #0f172a; --text-secondary: #475569;
  24.       --text-muted: #94a3b8; --border: rgba(0,0,0,0.06);
  25.     }
  26.     [data-theme="high-contrast"] {
  27.       --bg-void: #000; --bg-servers: #111; --bg-sidebar: #1a1a1a; --bg-main: #222;
  28.       --bg-input: #2d2d2d; --bg-hover: #333; --bg-active: #444; --accent: #ffcc00;
  29.       --accent-dim: #e6b800; --accent-glow: rgba(255,204,0,0.2); --green: #00ff88; --amber: #ffaa00;
  30.       --red: #ff4444; --text-primary: #fff; --text-secondary: #ccc; --text-muted: #888;
  31.       --border: rgba(255,255,255,0.15);
  32.     }
  33.     [data-theme="forest"] {
  34.       --bg-void: #0a1c14; --bg-servers: #0e241c; --bg-sidebar: #132a20; --bg-main: #18382a;
  35.       --bg-input: #1e4534; --bg-hover: #265a44; --bg-active: #2f6e54; --accent: #6ee7b7;
  36.       --accent-dim: #34d399; --accent-glow: rgba(110,231,183,0.2); --green: #10b981; --amber: #fbbf24;
  37.       --red: #f87171; --text-primary: #e2f3eb; --text-secondary: #a7d7c5; --text-muted: #5f9c83;
  38.       --border: rgba(255,255,255,0.08);
  39.     }
  40.     [data-theme="slate"] {
  41.       --bg-void: #0d0d0d; --bg-servers: #161616; --bg-sidebar: #1e1e1e; --bg-main: #242424;
  42.       --bg-input: #2c2c2c; --bg-hover: #333333; --bg-active: #3d3d3d; --accent: #a8a8a8;
  43.       --accent-dim: #707070; --accent-glow: rgba(168,168,168,0.12); --green: #6fcf97;
  44.       --amber: #f2c94c; --red: #eb5757; --text-primary: #dcdcdc; --text-secondary: #999999;
  45.       --text-muted: #555555; --border: rgba(255,255,255,0.07);
  46.     }
  47.     * { margin: 0; padding: 0; box-sizing: border-box; }
  48.     html, body { height: 100%; overflow: hidden; font-family: var(--font); background: var(--bg-void); color: var(--text-primary); }
  49.     ::-webkit-scrollbar { width: 4px; height: 4px; }
  50.     ::-webkit-scrollbar-track { background: transparent; }
  51.     ::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 2px; }
  52.     #auth-page { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 100; background: radial-gradient(ellipse at 25% 35%, rgba(129,140,248,.14) 0%, transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(251,191,36,.06) 0%, transparent 50%), var(--bg-void); }
  53.     .auth-card { width: 380px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 16px; padding: 40px; box-shadow: 0 40px 90px rgba(0,0,0,.7); }
  54.     .auth-logo { font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: -1px; margin-bottom: 6px; }
  55.     .auth-logo span { color: var(--text-muted); font-weight: 400; }
  56.     .auth-subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 28px; }
  57.     .auth-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg-void); border-radius: 8px; padding: 4px; }
  58.     .auth-tab { flex: 1; padding: 8px; text-align: center; font-size: 13px; font-weight: 600; font-family: var(--font); border: none; border-radius: 6px; cursor: pointer; color: var(--text-muted); background: transparent; transition: all .2s; }
  59.     .auth-tab.active { background: var(--accent); color: #fff; }
  60.     .form-field { margin-bottom: 14px; }
  61.     .form-field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
  62.     .form-field input { width: 100%; padding: 11px 13px; background: var(--bg-void); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--mono); font-size: 13px; outline: none; transition: border-color .2s; }
  63.     .form-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
  64.     .btn-primary { width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 8px; transition: all .2s; letter-spacing: .02em; }
  65.     .btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); }
  66.     .auth-error { color: var(--red); font-size: 12px; margin-top: 10px; text-align: center; min-height: 16px; }
  67.     #app-page { display: flex; width: 100%; height: 100vh; }
  68.     #servers-bar { width: 66px; background: var(--bg-servers); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 5px; border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; flex-shrink: 0; }
  69.     .server-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--bg-sidebar); display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 700; font-size: 18px; color: var(--text-secondary); transition: all .2s; border: 2px solid transparent; flex-shrink: 0; user-select: none; position: relative; overflow: hidden; }
  70.     .server-icon i { font-size: 20px; }
  71.     .server-icon:hover { border-radius: 10px; background: var(--accent); color: #fff; }
  72.     .server-icon.active { border-color: var(--accent); color: var(--accent); border-radius: 10px; background: var(--bg-active); }
  73.     .server-icon.dm-icon { font-size: 18px; color: var(--accent); background: var(--bg-active); }
  74.     .server-icon.dm-icon.active { background: var(--accent); color: #fff; }
  75.     .server-divider { width: 28px; height: 1px; background: var(--border); margin: 3px 0; }
  76.     .add-server-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-sidebar); border: 2px dashed rgba(74,222,128,.3); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--green); font-size: 20px; transition: all .2s; flex-shrink: 0; }
  77.     .add-server-btn:hover { background: rgba(74,222,128,.1); border-color: var(--green); border-radius: 14px; }
  78.     #channel-sidebar { width: 228px; background: var(--bg-sidebar); display: flex; flex-direction: column; border-right: 1px solid var(--border); flex-shrink: 0; }
  79.     .sidebar-header { padding: 0 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 50px; flex-shrink: 0; gap: 8px; }
  80.     .sidebar-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  81.     .sidebar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  82.     .sidebar-btn { width: 22px; height: 22px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all .15s; flex-shrink: 0; }
  83.     .sidebar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
  84.     .channels-list { flex: 1; overflow-y: auto; padding: 6px 6px; }
  85.     .ch-section { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 10px 8px 4px; display: flex; align-items: center; justify-content: space-between; }
  86.     .channel-item { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 500; transition: all .15s; user-select: none; }
  87.     .channel-item i { width: 16px; font-size: 12px; }
  88.     .channel-item:hover { background: var(--bg-hover); color: var(--text-primary); }
  89.     .channel-item.active { background: var(--bg-active); color: var(--text-primary); }
  90.     .dm-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text-muted); font-size: 13px; transition: all .15s; user-select: none; }
  91.     .dm-item:hover { background: var(--bg-hover); color: var(--text-primary); }
  92.     .dm-item.active { background: var(--bg-active); color: var(--text-primary); }
  93.     .dm-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
  94.     .dm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  95.     .dm-name { font-weight: 600; font-family: var(--mono); font-size: 12px; }
  96.     .pin-btn { font-size: 12px; margin-left: auto; color: var(--amber); cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
  97.     .pin-btn:hover { opacity: 1; }
  98.     .user-bar { padding: 9px 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; background: var(--bg-servers); flex-shrink: 0; cursor: pointer; }
  99.     .user-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
  100.     .user-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  101.     .user-name-display { font-size: 12px; font-weight: 600; font-family: var(--mono); color: var(--text-primary); }
  102.     .user-status-dot { font-size: 10px; color: var(--green); }
  103.     .logout-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 3px; border-radius: 4px; margin-left: auto; transition: all .15s; }
  104.     .logout-btn:hover { color: var(--red); }
  105.     #main-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); min-width: 0; overflow: hidden; position: relative; }
  106.     .chat-header { height: 50px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 18px; gap: 10px; flex-shrink: 0; }
  107.     .chat-header i { color: var(--text-muted); font-size: 16px; width: 20px; }
  108.     .chat-header-name { font-size: 14px; font-weight: 700; }
  109.     .video-call-btn { margin-left: auto; background: none; border: none; color: var(--accent); cursor: pointer; font-size: 18px; padding: 5px; border-radius: 4px; transition: all 0.2s; }
  110.     .video-call-btn:hover { background: var(--bg-hover); }
  111.     #messages-wrap { flex: 1; overflow-y: auto; padding: 16px 18px 0; display: flex; flex-direction: column; gap: 1px; }
  112.     .msg-group { display: flex; gap: 12px; padding: 5px 6px; border-radius: 6px; transition: background .1s; position: relative; }
  113.     .msg-group:hover { background: rgba(255,255,255,.025); }
  114.     .msg-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px; overflow: hidden; }
  115.     .msg-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  116.     .msg-body { flex: 1; min-width: 0; }
  117.     .msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
  118.     .msg-author { font-size: 13px; font-weight: 700; color: var(--accent); font-family: var(--mono); }
  119.     .msg-time { font-size: 10px; color: var(--text-muted); }
  120.     .msg-text { font-size: 13px; color: var(--text-primary); line-height: 1.55; word-break: break-word; white-space: pre-wrap; font-family: var(--mono); }
  121.     .msg-img-wrapper { position: relative; display: inline-block; }
  122.     .msg-img { max-width: 380px; max-height: 280px; border-radius: 8px; object-fit: cover; cursor: pointer; margin-top: 4px; display: block; border: 1px solid var(--border); }
  123.     .gif-badge { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.6); color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 12px; backdrop-filter: blur(2px); pointer-events: none; }
  124.     .msg-file { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; margin-top: 4px; max-width: 340px; }
  125.     .msg-file-icon { font-size: 22px; flex-shrink: 0; }
  126.     .msg-file-info { flex: 1; min-width: 0; }
  127.     .msg-file-name { font-size: 12px; font-weight: 600; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
  128.     .msg-file-type { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
  129.     .fa-btn { padding: 6px 11px; border-radius: 6px; border: none; font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; }
  130.     .fa-demo { background: var(--accent); color: #fff; }
  131.     .fa-demo:hover { background: var(--accent-dim); }
  132.     .fa-preview { background: rgba(251,191,36,.15); color: var(--amber); }
  133.     .fa-preview:hover { background: rgba(251,191,36,.28); }
  134.     .fa-dl { background: var(--bg-active); color: var(--text-primary); display: inline-flex; align-items: center; gap: 4px; }
  135.     .fa-dl:hover { background: var(--bg-hover); }
  136.     .msg-delete { position: absolute; top: 5px; right: 8px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(248,113,113,.12); color: var(--red); cursor: pointer; font-size: 12px; display: none; }
  137.     .msg-group:hover .msg-delete { display: flex; align-items: center; justify-content: center; }
  138.     .msg-delete:hover { background: rgba(248,113,113,.24); }
  139.     .input-area { padding: 14px 18px; flex-shrink: 0; }
  140.     .upload-preview { display: none; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-input); border-radius: 7px; border: 1px dashed var(--accent-dim); font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
  141.     .upload-cancel { background: none; border: none; color: var(--red); cursor: pointer; font-size: 15px; margin-left: auto; }
  142.     .input-bar { display: flex; align-items: flex-end; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; transition: border-color .2s; }
  143.     .input-bar:focus-within { border-color: var(--accent-dim); }
  144.     .attach-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 1px; transition: color .15s; flex-shrink: 0; }
  145.     .attach-btn:hover { color: var(--accent); }
  146.     #msg-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-family: var(--font); font-size: 13px; resize: none; max-height: 110px; line-height: 1.5; }
  147.     #msg-input::placeholder { color: var(--text-muted); }
  148.     .send-btn { width: 32px; height: 32px; border-radius: 7px; background: var(--accent); border: none; color: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
  149.     .send-btn:hover { background: var(--accent-dim); transform: scale(1.06); }
  150.     .send-btn:disabled { opacity: .35; cursor: default; transform: none; }
  151.     #file-input { display: none; }
  152.     #friends-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  153.     .ftabs { display: flex; gap: 3px; padding: 0 14px; border-bottom: 1px solid var(--border); height: 50px; align-items: center; }
  154.     .ftab { padding: 5px 13px; border-radius: 6px; border: none; background: none; color: var(--text-muted); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
  155.     .ftab i { margin-right: 4px; }
  156.     .ftab:hover { background: var(--bg-hover); color: var(--text-primary); }
  157.     .ftab.active { background: var(--bg-active); color: var(--text-primary); }
  158.     .badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px; margin-left: 4px; }
  159.     .friends-content { flex: 1; overflow-y: auto; padding: 20px; }
  160.     .f-section { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
  161.     .friend-card { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; transition: background .15s; }
  162.     .friend-card:hover { background: var(--bg-hover); }
  163.     .friend-av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0; overflow: hidden; }
  164.     .friend-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  165.     .friend-username { font-size: 13px; font-weight: 600; font-family: var(--mono); }
  166.     .friend-label { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  167.     .friend-actions { display: flex; gap: 5px; margin-left: auto; }
  168.     .ibt { width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all .15s; }
  169.     .ibt.acc { background: rgba(74,222,128,.15); color: var(--green); }
  170.     .ibt.acc:hover { background: rgba(74,222,128,.3); }
  171.     .ibt.dec { background: rgba(248,113,113,.15); color: var(--red); }
  172.     .ibt.dec:hover { background: rgba(248,113,113,.3); }
  173.     .ibt.msg { background: var(--bg-active); color: var(--accent); }
  174.     .ibt.msg:hover { background: var(--accent); color: #fff; }
  175.     .add-friend-bar { display: flex; gap: 9px; margin-bottom: 18px; }
  176.     .add-friend-bar input { flex: 1; padding: 10px 13px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--mono); font-size: 13px; outline: none; transition: border-color .2s; }
  177.     .add-friend-bar input:focus { border-color: var(--accent); }
  178.     .add-friend-bar .send-fr-btn { padding: 10px 16px; background: var(--accent); border: none; border-radius: var(--radius); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; white-space: nowrap; }
  179.     .add-friend-bar .send-fr-btn:hover { background: var(--accent-dim); }
  180.     #add-friend-msg { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
  181.     #welcome-screen { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--text-muted); }
  182.     .wlc-icon { font-size: 56px; }
  183.     .wlc-title { font-size: 20px; font-weight: 700; color: var(--text-secondary); }
  184.     .wlc-sub { font-size: 13px; }
  185.     .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(5px); }
  186.     .modal { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 14px; padding: 28px; width: 400px; box-shadow: 0 40px 90px rgba(0,0,0,.7); }
  187.     .modal h3 { font-size: 17px; font-weight: 700; margin-bottom: 18px; }
  188.     .modal label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; }
  189.     .modal input, .modal select { width: 100%; padding: 10px 13px; background: var(--bg-void); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--mono); font-size: 13px; outline: none; margin-bottom: 14px; transition: border-color .2s; }
  190.     .modal input:focus, .modal select:focus { border-color: var(--accent); }
  191.     .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
  192.     .btn-cancel { padding: 9px 16px; background: var(--bg-active); border: none; border-radius: var(--radius); color: var(--text-secondary); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; }
  193.     .btn-confirm { padding: 9px 18px; background: var(--accent); border: none; border-radius: var(--radius); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer; }
  194.     .btn-confirm:hover { background: var(--accent-dim); }
  195.     .btn-ghost { padding: 9px 16px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; }
  196.     .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
  197.     .modal-tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--bg-void); border-radius: 8px; padding: 4px; }
  198.     .modal-tab { flex: 1; padding: 8px; text-align: center; font-size: 12px; font-weight: 600; font-family: var(--font); border: none; border-radius: 6px; cursor: pointer; color: var(--text-muted); background: transparent; transition: all .2s; }
  199.     .modal-tab.active { background: var(--accent); color: #fff; }
  200.     .share-id { padding: 8px 12px; background: var(--bg-void); border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-muted); word-break: break-all; margin-top: -6px; margin-bottom: 14px; cursor: pointer; border: 1px solid var(--border); transition: all .15s; }
  201.     .share-id:hover { border-color: var(--accent); color: var(--accent); }
  202.     .preview-box { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-void); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; }
  203.     .preview-box img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
  204.     .preview-box .txt { font-size: 12px; color: var(--text-muted); font-family: var(--mono); word-break: break-word; }
  205.     .small-note { font-size: 11px; color: var(--text-muted); margin-top: -8px; margin-bottom: 14px; }
  206.     #ctx-menu { position: fixed; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); z-index: 1000; display: none; min-width: 150px; }
  207.     .ctx-item { padding: 8px 12px; cursor: pointer; font-size: 13px; border-radius: 4px; color: var(--text-primary); transition: background 0.1s; }
  208.     .ctx-item:hover { background: var(--bg-hover); }
  209.     #timeout-overlay { position: absolute; inset: 0; background: #000000dd; backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; }
  210.     .timeout-timer { font-size: 48px; font-family: var(--mono); color: white; margin-bottom: 20px; }
  211.     #toast { position: fixed; bottom: 22px; right: 22px; padding: 11px 18px; background: var(--bg-active); border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--text-primary); z-index: 500; transform: translateY(70px); opacity: 0; transition: all .3s; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 320px; }
  212.     #toast.show { transform: translateY(0); opacity: 1; }
  213.     #toast.success { border-color: var(--green); }
  214.     #toast.error { border-color: var(--red); }
  215.     .empty-state { text-align: center; padding: 36px 16px; color: var(--text-muted); font-size: 12px; }
  216.     .empty-state .ico { font-size: 36px; margin-bottom: 10px; }
  217.     .csv-wrap { flex: 1; overflow: auto; }
  218.     .csv-tbl { border-collapse: collapse; font-size: 12px; font-family: var(--mono); }
  219.     .csv-tbl th, .csv-tbl td { padding: 6px 10px; border: 1px solid var(--border); }
  220.     .csv-tbl th { background: var(--bg-input); color: var(--accent); }
  221.     #video-call-modal { z-index: 400; }
  222.     #video-call-modal .modal { width: min(95vw, 1000px); padding: 20px; max-height: 95vh; overflow-y: auto; }
  223.     .vc-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  224.     @media (max-width: 580px) { .vc-videos { grid-template-columns: 1fr; } }
  225.     .vc-video-wrap { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; border: 2px solid var(--border); }
  226.     .vc-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
  227.     #vc-local-video { transform: scaleX(-1); }
  228.     .vc-label { position: absolute; bottom: 8px; left: 10px; background: rgba(0,0,0,0.65); padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; pointer-events: none; color: white; }
  229.     .vc-controls { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
  230.     .vc-btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; transition: all 0.2s; font-family: var(--font); font-size: 14px; }
  231.     .vc-btn-mute { background: #555; color: white; }
  232.     .vc-btn-mute.active { background: #c0392b; }
  233.     .vc-btn-video { background: #555; color: white; }
  234.     .vc-btn-video.active { background: #c0392b; }
  235.     .vc-btn-hangup { background: #c0392b; color: white; width: 100%; margin-top: 16px; }
  236.     .vc-status { text-align: center; margin-bottom: 12px; padding: 8px; border-radius: 6px; background: var(--bg-input); font-size: 13px; color: var(--text-secondary); }
  237.     .vc-connecting-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: white; font-size: 13px; }
  238.     .spinner { width: 32px; height: 32px; border: 3px solid #333; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.75s linear infinite; }
  239.     @keyframes spin { to { transform: rotate(360deg); } }
  240.     #incoming-call-popup { position: fixed; top: 20px; right: 20px; background: var(--bg-sidebar); border: 1px solid var(--accent); border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 600; display: none; align-items: center; gap: 16px; max-width: 350px; }
  241.     .popup-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; flex-shrink: 0; overflow: hidden; }
  242.     .popup-info { flex: 1; }
  243.     .popup-title { font-weight: 700; margin-bottom: 4px; }
  244.     .popup-sub { font-size: 12px; color: var(--text-muted); }
  245.     .popup-actions { display: flex; gap: 8px; }
  246.     .popup-btn { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
  247.     .popup-accept { background: var(--green); color: white; }
  248.     .popup-decline { background: var(--red); color: white; }
  249.     #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; z-index: 800; cursor: zoom-out; }
  250.     #lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; object-fit: contain; }
  251.   </style>
  252. </head>
  253. <body>
  254. <div id="auth-page">
  255.   <div class="auth-card">
  256.     <div class="auth-logo">Nex<span>Chat</span></div>
  257.     <div class="auth-subtitle">Open a conversation. Build a community.</div>
  258.     <div class="auth-tabs">
  259.       <button class="auth-tab active" onclick="switchAuthTab('login')">Sign In</button>
  260.       <button class="auth-tab" onclick="switchAuthTab('signup')">Create Account</button>
  261.     </div>
  262.     <div class="form-field">
  263.       <label>Username</label>
  264.       <input type="text" id="au" placeholder="your_handle" onkeydown="if(event.key==='Enter')handleAuth()">
  265.     </div>
  266.     <div class="form-field">
  267.       <label>Password</label>
  268.       <input type="password" id="ap" placeholder="••••••••" onkeydown="if(event.key==='Enter')handleAuth()">
  269.     </div>
  270.     <button class="btn-primary" id="auth-btn" onclick="handleAuth()">Sign In</button>
  271.     <div class="auth-error" id="auth-error"></div>
  272.   </div>
  273. </div>
  274. <div id="app-page" style="display:none">
  275.   <div id="servers-bar">
  276.     <div class="server-icon dm-icon active" id="dm-icon" title="Direct Messages" onclick="showDMHome()"><i class="fas fa-comment-dots"></i></div>
  277.     <div class="server-icon" title="Friends & Requests" onclick="openFriendsView()"><i class="fas fa-user-friends"></i></div>
  278.     <div class="server-divider"></div>
  279.     <div id="server-icons-list"></div>
  280.     <div class="server-divider"></div>
  281.     <div class="add-server-btn" title="Create or Join Server" onclick="openServerModal()"><i class="fas fa-plus"></i></div>
  282.   </div>
  283.   <div id="channel-sidebar">
  284.     <div class="sidebar-header">
  285.       <span class="sidebar-title" id="sidebar-title">Direct Messages</span>
  286.       <div class="sidebar-actions">
  287.         <button class="sidebar-btn" title="Friends" onclick="openFriendsView()"><i class="fas fa-user-friends"></i></button>
  288.         <button class="sidebar-btn" id="copy-server-id-btn" style="display:none" title="Copy Server ID" onclick="copyCurrentServerId()"><i class="fas fa-copy"></i></button>
  289.         <button class="sidebar-btn" id="server-settings-btn" style="display:none" title="Server Settings" onclick="openServerSettingsModal()"><i class="fas fa-cog"></i></button>
  290.         <button class="sidebar-btn" id="ch-add-btn" style="display:none" title="Create Channel" onclick="openChannelModal()"><i class="fas fa-plus"></i></button>
  291.       </div>
  292.     </div>
  293.     <div class="channels-list" id="sidebar-list"></div>
  294.     <div class="user-bar" onclick="openSettingsModal('profile')">
  295.       <div class="user-av" id="uav">?</div>
  296.       <div>
  297.         <div class="user-name-display" id="uname">...</div>
  298.         <div class="user-status-dot"><i class="fas fa-circle"></i> online</div>
  299.       </div>
  300.       <button class="logout-btn" onclick="event.stopPropagation();doLogout()" title="Log out"><i class="fas fa-sign-out-alt"></i></button>
  301.     </div>
  302.   </div>
  303.   <div id="main-area">
  304.     <div id="welcome-screen">
  305.       <div class="wlc-icon"><i class="fas fa-comments"></i></div>
  306.       <div class="wlc-title">Welcome to NexChat</div>
  307.       <div class="wlc-sub">Select a channel or conversation to get started</div>
  308.     </div>
  309.     <div id="chat-view" style="display:none;flex-direction:column;flex:1;overflow:hidden">
  310.       <div class="chat-header">
  311.         <i id="chat-icon" class="fas fa-hashtag"></i>
  312.         <span class="chat-header-name" id="chat-name">-</span>
  313.         <button class="video-call-btn" id="start-video-call-btn" style="display:none" title="Start Video Call" onclick="initiateVideoCall()"><i class="fas fa-video"></i></button>
  314.         <div style="margin-left:auto;display:flex;gap:8px">
  315.           <button class="attach-btn" id="admin-members-btn" style="display:none" title="Manage Members" onclick="openAdminMembersModal()"><i class="fas fa-users-cog"></i></button>
  316.         </div>
  317.       </div>
  318.       <div id="messages-wrap"></div>
  319.       <div id="timeout-overlay" style="display:none">
  320.         <div class="timeout-timer" id="timeout-timer">--:--</div>
  321.         <div style="color:white;font-size:14px">You are timed out from chatting</div>
  322.       </div>
  323.       <div class="input-area">
  324.         <div class="upload-preview" id="upload-prev">
  325.           <span id="up-name"></span>
  326.           <button class="upload-cancel" onclick="cancelUpload()"><i class="fas fa-times"></i></button>
  327.         </div>
  328.         <div class="input-bar">
  329.           <button class="attach-btn" onclick="document.getElementById('file-input').click()" title="Attach file"><i class="fas fa-paperclip"></i></button>
  330.           <button class="attach-btn" onclick="openGifModal()" title="Send GIF"><i class="fas fa-images"></i></button>
  331.           <textarea id="msg-input" placeholder="Send a message..." rows="1" onkeydown="handleMsgKey(event)" oninput="autoGrow(this)"></textarea>
  332.           <button class="send-btn" id="send-btn" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button>
  333.         </div>
  334.         <input type="file" id="file-input" onchange="onFileChosen(event)">
  335.       </div>
  336.     </div>
  337.     <div id="friends-view" style="display:none;flex-direction:column;flex:1;overflow:hidden">
  338.       <div class="ftabs">
  339.         <button class="ftab active" onclick="ftab('friends')"><i class="fas fa-user-friends"></i> Friends</button>
  340.         <button class="ftab" onclick="ftab('pending')"><i class="fas fa-clock"></i> Pending <span class="badge" id="pend-badge" style="display:none">0</span></button>
  341.         <button class="ftab" onclick="ftab('add')"><i class="fas fa-user-plus"></i> Add Friend</button>
  342.       </div>
  343.       <div class="friends-content" id="friends-content"></div>
  344.     </div>
  345.   </div>
  346. </div>
  347. <!-- Server Modal -->
  348. <div class="overlay" id="server-modal" style="display:none" onclick="if(event.target===this)closeModal('server-modal')">
  349.   <div class="modal">
  350.     <h3><i class="fas fa-server"></i> Server</h3>
  351.     <div class="modal-tabs">
  352.       <button class="modal-tab active" id="mt-create" onclick="srvTab('create')">Create</button>
  353.       <button class="modal-tab" id="mt-join" onclick="srvTab('join')">Join</button>
  354.     </div>
  355.     <div id="srv-create">
  356.       <label>Server Name</label>
  357.       <input type="text" id="srv-name" placeholder="My Awesome Server">
  358.       <label>Server Icon (optional)</label>
  359.       <input type="file" id="srv-icon-file" accept="image/*">
  360.       <div class="small-note">You can also change the icon later from server settings.</div>
  361.     </div>
  362.     <div id="srv-join" style="display:none">
  363.       <label>Server ID or Invite Code</label>
  364.       <input type="text" id="srv-id" placeholder="Paste server ID or invite code here...">
  365.     </div>
  366.     <div class="modal-actions">
  367.       <button class="btn-cancel" onclick="closeModal('server-modal')">Cancel</button>
  368.       <button class="btn-confirm" id="srv-btn" onclick="handleServerModal()">Create</button>
  369.     </div>
  370.   </div>
  371. </div>
  372. <!-- Server Settings Modal -->
  373. <div class="overlay" id="server-settings-modal" style="display:none" onclick="if(event.target===this)closeModal('server-settings-modal')">
  374.   <div class="modal">
  375.     <h3><i class="fas fa-cog"></i> Server Settings</h3>
  376.     <div class="preview-box" id="server-settings-preview">
  377.       <img id="server-settings-preview-img" src="" alt="server icon preview" style="display:none">
  378.       <div class="txt" id="server-settings-preview-txt">No icon selected</div>
  379.     </div>
  380.     <label>Server Name</label>
  381.     <input type="text" id="ss-name" placeholder="Server name">
  382.     <label>Server Icon (file upload)</label>
  383.     <input type="file" id="ss-icon-file" accept="image/*">
  384.     <label>Or Icon URL</label>
  385.     <input type="text" id="ss-icon-url" placeholder="https://...">
  386.     <label>Invite Code (valid 1 hour)</label>
  387.     <div style="display:flex;gap:8px;margin-bottom:14px">
  388.       <input type="text" id="invite-code-display" readonly style="margin-bottom:0;background:var(--bg-input)">
  389.       <button class="btn-ghost" onclick="generateTempInvite()" style="white-space:nowrap"><i class="fas fa-sync-alt"></i> Generate</button>
  390.     </div>
  391.     <div class="modal-actions" style="justify-content:space-between">
  392.       <button class="btn-ghost" style="color:var(--red)" onclick="deleteServer()"><i class="fas fa-trash-alt"></i> Delete Server</button>
  393.       <div style="display:flex;gap:8px">
  394.         <button class="btn-cancel" onclick="closeModal('server-settings-modal')">Cancel</button>
  395.         <button class="btn-confirm" onclick="saveServerSettings()">Save</button>
  396.       </div>
  397.     </div>
  398.   </div>
  399. </div>
  400. <!-- Settings Modal -->
  401. <div class="overlay" id="settings-modal" style="display:none" onclick="if(event.target===this)closeModal('settings-modal')">
  402.   <div class="modal" style="width:500px;max-width:90vw;">
  403.     <h3><i class="fas fa-sliders-h"></i> Settings</h3>
  404.     <div class="modal-tabs">
  405.       <button class="modal-tab active" data-stab="profile"><i class="fas fa-user-circle"></i> Profile</button>
  406.       <button class="modal-tab" data-stab="account"><i class="fas fa-key"></i> Account</button>
  407.       <button class="modal-tab" data-stab="blocked"><i class="fas fa-ban"></i> Blocked</button>
  408.       <button class="modal-tab" data-stab="danger"><i class="fas fa-exclamation-triangle"></i> Danger</button>
  409.     </div>
  410.     <div id="stab-profile" class="stab-content">
  411.       <div class="preview-box">
  412.         <img id="settings-profile-preview-img" src="" alt="profile preview" style="display:none">
  413.         <div class="txt" id="settings-profile-preview-txt">No avatar selected</div>
  414.       </div>
  415.       <label>Username</label>
  416.       <input type="text" id="settings-username" disabled>
  417.       <label>Profile Pic (file upload)</label>
  418.       <input type="file" id="settings-avatar-file" accept="image/*">
  419.       <label>Or Avatar URL</label>
  420.       <input type="text" id="settings-avatar-url" placeholder="https://...">
  421.       <label>Theme</label>
  422.       <select id="settings-theme">
  423.         <option value="dark">Dark</option>
  424.         <option value="light">Light</option>
  425.         <option value="high-contrast">High Contrast</option>
  426.         <option value="forest">Forest</option>
  427.         <option value="slate">Slate</option>
  428.       </select>
  429.       <label>Message Font</label>
  430.       <select id="settings-font">
  431.         <option value="JetBrains Mono">JetBrains Mono</option>
  432.         <option value="Syne">Syne</option>
  433.         <option value="Inter">Inter</option>
  434.         <option value="monospace">Monospace</option>
  435.       </select>
  436.     </div>
  437.     <div id="stab-account" class="stab-content" style="display:none">
  438.       <label>Current Password</label>
  439.       <input type="password" id="old-password" placeholder="Enter current password">
  440.       <label>New Password</label>
  441.       <input type="password" id="new-password" placeholder="New password">
  442.       <label>Confirm New Password</label>
  443.       <input type="password" id="confirm-password" placeholder="Confirm new password">
  444.       <button class="btn-primary" onclick="changePassword()" style="margin-top:8px">Change Password</button>
  445.       <div id="password-change-msg" style="font-size:12px;margin-top:8px;color:var(--amber)"></div>
  446.     </div>
  447.     <div id="stab-blocked" class="stab-content" style="display:none">
  448.       <div id="blocked-list"></div>
  449.     </div>
  450.     <div id="stab-danger" class="stab-content" style="display:none">
  451.       <p style="color:var(--red);margin-bottom:16px">Permanently delete your account and all data.</p>
  452.       <label>Enter your password to confirm</label>
  453.       <input type="password" id="delete-password" placeholder="Your password">
  454.       <button class="btn-ghost" style="color:var(--red);border-color:var(--red);width:100%" onclick="deleteAccount()">Delete Account</button>
  455.     </div>
  456.     <div class="modal-actions">
  457.       <button class="btn-cancel" onclick="closeModal('settings-modal')">Close</button>
  458.       <button class="btn-confirm" id="save-settings-btn" onclick="saveProfileSettings()">Save</button>
  459.     </div>
  460.   </div>
  461. </div>
  462. <!-- Channel Modal -->
  463. <div class="overlay" id="channel-modal" style="display:none" onclick="if(event.target===this)closeModal('channel-modal')">
  464.   <div class="modal">
  465.     <h3><i class="fas fa-hashtag"></i> New Channel</h3>
  466.     <label>Channel Name</label>
  467.     <input type="text" id="ch-name" placeholder="general">
  468.     <div style="display:flex;align-items:center;gap:8px;margin-bottom:14px">
  469.       <input type="checkbox" id="ch-restricted" style="width:auto;margin-bottom:0">
  470.       <label style="margin:0;text-transform:none;letter-spacing:normal;font-size:13px">Restricted (only selected members)</label>
  471.     </div>
  472.     <div class="modal-actions">
  473.       <button class="btn-cancel" onclick="closeModal('channel-modal')">Cancel</button>
  474.       <button class="btn-confirm" onclick="createChannel()">Create</button>
  475.     </div>
  476.   </div>
  477. </div>
  478. <!-- GIF Modal -->
  479. <div class="overlay" id="gif-modal" style="display:none" onclick="if(event.target===this)closeModal('gif-modal')">
  480.   <div class="modal">
  481.     <h3><i class="fas fa-images"></i> GIF</h3>
  482.     <label>GIF URL or Tenor/Giphy link</label>
  483.     <input type="text" id="gif-url" placeholder="Paste GIF link here...">
  484.     <label>Caption (optional)</label>
  485.     <input type="text" id="gif-caption" placeholder="Add text with the GIF...">
  486.     <div class="small-note">Direct .gif links always work. Tenor/Giphy page links are auto-resolved when possible.</div>
  487.     <div class="modal-actions">
  488.       <button class="btn-cancel" onclick="closeModal('gif-modal')">Cancel</button>
  489.       <button class="btn-confirm" onclick="sendGifFromModal()">Send GIF</button>
  490.     </div>
  491.   </div>
  492. </div>
  493. <!-- Admin Members Modal -->
  494. <div class="overlay" id="admin-members-modal" style="display:none" onclick="if(event.target===this)closeModal('admin-members-modal')">
  495.   <div class="modal" style="width:500px;max-width:90vw">
  496.     <h3><i class="fas fa-users-cog"></i> Manage Members</h3>
  497.     <div id="admin-members-list"></div>
  498.   </div>
  499. </div>
  500. <!-- Invite Server Modal -->
  501. <div class="overlay" id="invite-server-modal" style="display:none" onclick="if(event.target===this)closeModal('invite-server-modal')">
  502.   <div class="modal">
  503.     <h3><i class="fas fa-user-plus"></i> Invite to Server</h3>
  504.     <p style="font-size:13px;margin-bottom:16px">Select a server to invite <span id="invite-friend-name"></span></p>
  505.     <div id="invite-server-list" style="max-height:300px;overflow-y:auto"></div>
  506.     <div class="modal-actions">
  507.       <button class="btn-cancel" onclick="closeModal('invite-server-modal')">Cancel</button>
  508.     </div>
  509.   </div>
  510. </div>
  511. <!-- Demo Modal -->
  512. <div class="overlay" id="demo-modal" style="display:none" onclick="if(event.target===this)closeModal('demo-modal')">
  513.   <div class="modal" style="width:min(92vw,960px);padding:18px;display:flex;flex-direction:column;max-height:90vh">
  514.     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
  515.       <span style="font-weight:700;font-size:14px" id="demo-title">HTML Preview</span>
  516.       <button class="btn-cancel" onclick="closeModal('demo-modal')">✕ Close</button>
  517.     </div>
  518.     <iframe id="demo-iframe" sandbox="allow-scripts allow-same-origin allow-forms" style="flex:1;border:1px solid var(--border);border-radius:8px;background:#fff;min-height:60vh"></iframe>
  519.   </div>
  520. </div>
  521. <!-- CSV Modal -->
  522. <div class="overlay" id="csv-modal" style="display:none" onclick="if(event.target===this)closeModal('csv-modal')">
  523.   <div class="modal" style="width:min(88vw,820px);max-height:82vh;overflow:hidden;display:flex;flex-direction:column;padding:20px">
  524.     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
  525.       <span style="font-weight:700;font-size:14px" id="csv-title">CSV Preview</span>
  526.       <button class="btn-cancel" onclick="closeModal('csv-modal')">✕ Close</button>
  527.     </div>
  528.     <div class="csv-wrap" id="csv-wrap"></div>
  529.   </div>
  530. </div>
  531. <!-- Video Call Modal -->
  532. <div class="overlay" id="video-call-modal" style="display:none" onclick="if(event.target===this)vcHangUp()">
  533.   <div class="modal">
  534.     <h3><i class="fas fa-video"></i> Video Call with <span id="vc-peer-name"></span></h3>
  535.     <div class="vc-status" id="vc-status">Connecting...</div>
  536.     <div class="vc-videos">
  537.       <div class="vc-video-wrap">
  538.         <video id="vc-local-video" autoplay playsinline muted></video>
  539.         <div class="vc-label">You</div>
  540.       </div>
  541.       <div class="vc-video-wrap" id="vc-remote-wrap">
  542.         <video id="vc-remote-video" autoplay playsinline></video>
  543.         <div class="vc-label" id="vc-remote-label">Remote</div>
  544.         <div class="vc-connecting-overlay" id="vc-remote-overlay">
  545.           <div class="spinner"></div>
  546.           <span>Waiting for peer...</span>
  547.         </div>
  548.       </div>
  549.     </div>
  550.     <div class="vc-controls">
  551.       <button class="vc-btn vc-btn-mute" id="vc-mute-btn" onclick="vcToggleMute()"><i class="fas fa-microphone"></i> Mute</button>
  552.       <button class="vc-btn vc-btn-video" id="vc-video-btn" onclick="vcToggleVideo()"><i class="fas fa-video"></i> Stop Video</button>
  553.     </div>
  554.     <button class="vc-btn vc-btn-hangup" onclick="vcHangUp()"><i class="fas fa-phone-slash"></i> End Call</button>
  555.   </div>
  556. </div>
  557. <!-- Incoming Call Popup -->
  558. <div id="incoming-call-popup">
  559.   <div class="popup-avatar" id="incoming-avatar">?</div>
  560.   <div class="popup-info">
  561.     <div class="popup-title" id="incoming-title">Incoming Video Call</div>
  562.     <div class="popup-sub" id="incoming-sub">from ...</div>
  563.   </div>
  564.   <div class="popup-actions">
  565.     <button class="popup-btn popup-accept" onclick="acceptIncomingCall()"><i class="fas fa-check"></i></button>
  566.     <button class="popup-btn popup-decline" onclick="declineIncomingCall()"><i class="fas fa-times"></i></button>
  567.   </div>
  568. </div>
  569. <!-- Lightbox -->
  570. <div id="lightbox" style="display:none" onclick="closeLightbox()">
  571.   <img id="lb-img" src="" alt="">
  572. </div>
  573. <!-- Context Menu -->
  574. <div id="ctx-menu">
  575.   <div class="ctx-item" data-action="download"><i class="fas fa-download"></i> Download</div>
  576.   <div class="ctx-item" data-action="copy-link"><i class="fas fa-link"></i> Copy Link</div>
  577. </div>
  578. <!-- Toast -->
  579. <div id="toast"></div>
  580. <script>
  581.   // ==================== CONFIGURATION ====================
  582.   const SUPABASE_URL  = 'https://nmcawpwleesngoqobvzp.supabase.co';
  583.   const SUPABASE_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5tY2F3cHdsZWVzbmdvcW9idnpwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzU3NTg0MzcsImV4cCI6MjA5MTMzNDQzN30.iTpKNR7d5MztIfxj01ycd7de8vCvLBHSqG7LCCcgVAY';
  584.   const BUCKET        = 'chat-files';
  585.   const sb            = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON);
  586.   const GAS_URL = 'https://script.google.com/macros/s/AKfycbxZai-422M6DQZlXGgzqdteSSez5qad_IXBCZKPuk2oBsv7iCg3wcFXH8dAK2WZS7eg/exec';
  587.   const ICE_CONFIG = {
  588.     iceServers: [
  589.       { urls: 'stun:stun.l.google.com:19302' },
  590.       { urls: 'stun:stun1.l.google.com:19302' },
  591.       { urls: 'stun:stun2.l.google.com:19302' },
  592.       { urls: 'turn:openrelay.metered.ca:80',               username: 'openrelayproject', credential: 'openrelayproject' },
  593.       { urls: 'turn:openrelay.metered.ca:443',              username: 'openrelayproject', credential: 'openrelayproject' },
  594.       { urls: 'turn:openrelay.metered.ca:443?transport=tcp',username: 'openrelayproject', credential: 'openrelayproject' }
  595.     ],
  596.     iceCandidatePoolSize: 10
  597.   };
  598.   const VC_POLL_INTERVAL = 1500;
  599.   const VC_MAX_POLL      = 80;
  600.   const VC_ICE_BATCH_MS  = 600;
  601.  
  602.   // ==================== GLOBAL STATE ====================
  603.   let CU = null, CS = null, CC = null, CDM = null, VIEW = null;
  604.   let srvModalTab = 'create', activeFTab = 'friends', pendingFile = null, msgSub = null;
  605.   let pBadgeTimer = null, msgPollTimer = null, authMode = 'login', _tt = null;
  606.   let renderedMsgIds = new Set(), pendingGifUrl = null;
  607.   let currentContextTarget = null, timeoutInterval = null;
  608.   let pendingInviteFriendId = null, pendingInviteFriendName = '';
  609.   let activityInterval = null;
  610.  
  611.   // Video call state
  612.   let vcLocalStream       = null;
  613.   let vcPeerConnection    = null;
  614.   let vcCurrentCallId     = null;
  615.   let vcCurrentGasCode    = null;
  616.   let vcCurrentPeerId     = null;
  617.   let vcCurrentPeerName   = '';
  618.   let vcIsCaller          = false;
  619.   let vcAudioMuted        = false;
  620.   let vcVideoStopped      = false;
  621.   let vcCallSubscription  = null;
  622.   let vcIceBatchQueue     = [];
  623.   let vcIceBatchTimer     = null;
  624.   let vcPollTimer         = null;
  625.   let vcHangupPollTimer   = null;
  626.   let vcKnownCallerIce    = 0;
  627.   let vcKnownCalleeIce    = 0;
  628.   let vcCallActive        = false;
  629.   let vcHangupSignalled   = false;
  630.   let vcIsHangingUp       = false;   // guard against double-execution
  631.   let incomingCallData    = null;
  632.   let incomingPollInterval= null;
  633.   let vcStatusChannel     = null;    // Supabase realtime for call status changes
  634.  
  635.   // ==================== UTILITY ====================
  636.   function toast(msg, type = '') {
  637.     const el = document.getElementById('toast');
  638.     el.textContent = msg; el.className = 'show ' + type;
  639.     if (_tt) clearTimeout(_tt);
  640.     _tt = setTimeout(() => el.className = '', 3500);
  641.   }
  642.   async function gasApi(action, payload = {}) {
  643.     const res = await fetch(GAS_URL, {
  644.       method: 'POST', mode: 'cors', redirect: 'follow',
  645.       headers: { 'Content-Type': 'text/plain' },
  646.       body: JSON.stringify({ action, ...payload })
  647.     });
  648.     return res.json();
  649.   }
  650.   function getCurrentAuthorId(m) { return m.user_id ?? m.sender_id ?? m.author_id ?? null; }
  651.   function hasCurrentOwnership(m) { const aid = getCurrentAuthorId(m); return CU && aid === CU.id; }
  652.   function fmtBytes(b) {
  653.     if (b < 1024) return b + 'B';
  654.     if (b < 1048576) return (b / 1024).toFixed(1) + 'KB';
  655.     return (b / 1048576).toFixed(1) + 'MB';
  656.   }
  657.   async function clearMsgSubscription() {
  658.     if (msgSub) { try { await sb.removeChannel(msgSub); } catch (_) {} msgSub = null; }
  659.   }
  660.   function stopMsgPoll() { if (msgPollTimer) { clearInterval(msgPollTimer); msgPollTimer = null; } }
  661.   function startMsgPoll() {
  662.     stopMsgPoll();
  663.     msgPollTimer = setInterval(() => { if ((VIEW === 'channel' && CC) || (VIEW === 'dm' && CDM)) loadMessages(); }, 2500);
  664.   }
  665.  
  666.   // ==================== ACTIVITY TRACKING ====================
  667.   function startActivityTracking() {
  668.     if (activityInterval) clearInterval(activityInterval);
  669.     const updateLastSeen = async () => {
  670.       if (!CU) return;
  671.       await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  672.     };
  673.     updateLastSeen();
  674.     activityInterval = setInterval(updateLastSeen, 30000);
  675.   }
  676.  
  677.   // ==================== AUTH ====================
  678.   async function init() {
  679.     document.getElementById('auth-page').style.display = 'flex';
  680.     document.getElementById('app-page').style.display  = 'none';
  681.     showWelcome();
  682.     initContextMenu();
  683.     applyTheme(localStorage.getItem('nexchat_theme') || 'dark');
  684.     applyMessageFont(localStorage.getItem('nexchat_msg_font') || 'JetBrains Mono');
  685.   }
  686.   async function finishLoginFlow(userData) {
  687.     CU = {
  688.       id: userData.id, username: userData.username,
  689.       avatar_url: userData.avatar_url || null,
  690.       pinned_friends: userData.pinned_friends || [],
  691.       blocked_users: userData.blocked_users || [],
  692.       last_seen: userData.last_seen || null
  693.     };
  694.     document.getElementById('uname').textContent = userData.username;
  695.     document.getElementById('uav').innerHTML = userData.avatar_url
  696.       ? `<img src="${userData.avatar_url}" alt="avatar">`
  697.       : userData.username[0].toUpperCase();
  698.     document.getElementById('auth-page').style.display = 'none';
  699.     document.getElementById('app-page').style.display  = 'flex';
  700.     try {
  701.       startActivityTracking();
  702.       await showDMHome();
  703.       await loadServers();
  704.       startPendingPoll();
  705.       setupVideoCallSubscriptions();
  706.       setupServerMembersSubscription();
  707.       try { await cleanupStaleCalls(); } catch (_) {}
  708.       startIncomingCallPolling();
  709.     } catch (e) {
  710.       console.error('[LOGIN] Setup error:', e);
  711.       toast('Login error: ' + (e.message || e) + ' — try refreshing.', 'error');
  712.     }
  713.   }
  714.   async function doLogout() {
  715.     if (activityInterval)     clearInterval(activityInterval);
  716.     if (incomingPollInterval) clearInterval(incomingPollInterval);
  717.     if (vcCallSubscription)   { sb.removeChannel(vcCallSubscription).catch(() => {}); vcCallSubscription = null; }
  718.     if (vcStatusChannel)      { sb.removeChannel(vcStatusChannel).catch(() => {}); vcStatusChannel = null; }
  719.     CU = CS = CC = CDM = null; VIEW = null; pendingFile = null; renderedMsgIds.clear();
  720.     stopMsgPoll(); await clearMsgSubscription();
  721.     if (pBadgeTimer) { clearInterval(pBadgeTimer); pBadgeTimer = null; }
  722.     document.getElementById('au').value = ''; document.getElementById('ap').value = '';
  723.     document.getElementById('auth-error').textContent = '';
  724.     document.getElementById('auth-page').style.display = 'flex';
  725.     document.getElementById('app-page').style.display  = 'none';
  726.     showWelcome();
  727.   }
  728.   function switchAuthTab(m) {
  729.     authMode = m;
  730.     document.querySelectorAll('.auth-tab').forEach((t, i) => t.classList.toggle('active', m === 'login' ? i === 0 : i === 1));
  731.     document.getElementById('auth-btn').textContent = m === 'login' ? 'Sign In' : 'Create Account';
  732.     document.getElementById('auth-error').textContent = '';
  733.   }
  734.   async function handleAuth() {
  735.     const username = document.getElementById('au').value.trim().toLowerCase();
  736.     const password = document.getElementById('ap').value;
  737.     const errEl    = document.getElementById('auth-error');
  738.     const btn      = document.getElementById('auth-btn');
  739.     errEl.textContent = '';
  740.     if (!username || !password) { errEl.textContent = 'Fill in all fields.'; return; }
  741.     if (username.length < 3)    { errEl.textContent = 'Username must be ≥3 chars.'; return; }
  742.     if (authMode === 'signup' && !/^[a-z0-9_]+$/.test(username)) { errEl.textContent = 'Username may only contain letters, numbers, and underscores.'; return; }
  743.     btn.disabled = true; btn.textContent = 'Please wait…';
  744.     try {
  745.       if (authMode === 'signup') {
  746.         if (password.length < 6) { errEl.textContent = 'Password must be ≥6 chars.'; return; }
  747.         const { data: existingUser } = await sb.from('profiles').select('id').eq('username', username).maybeSingle();
  748.         if (existingUser) { errEl.textContent = 'Username already taken.'; return; }
  749.         const { data: newUser, error } = await sb.from('profiles').insert({ username, password, last_seen: new Date().toISOString() }).select('*').single();
  750.         if (error) { errEl.textContent = 'Error creating account: ' + error.message; return; }
  751.         await finishLoginFlow(newUser);
  752.       } else {
  753.         const { data: user, error } = await sb.from('profiles').select('*').eq('username', username).eq('password', password).maybeSingle();
  754.         if (error) { errEl.textContent = 'Database error: ' + error.message; return; }
  755.         if (!user)  { errEl.textContent = 'Invalid username or password.'; return; }
  756.         await finishLoginFlow(user);
  757.       }
  758.     } catch (e) {
  759.       console.error('[AUTH] Unexpected error:', e);
  760.       errEl.textContent = 'Something went wrong: ' + (e.message || e);
  761.     } finally {
  762.       btn.disabled = false;
  763.       btn.textContent = authMode === 'login' ? 'Sign In' : 'Create Account';
  764.     }
  765.   }
  766.  
  767.   // ==================== SERVERS ====================
  768.   async function loadServers() {
  769.     if (!CU) return;
  770.     const list = document.getElementById('server-icons-list');
  771.     list.innerHTML = '';
  772.     const { data: memberships, error: memErr } = await sb.from('server_members').select('server_id').eq('user_id', CU.id);
  773.     if (memErr) { console.error('[Servers] membership fetch error:', memErr); return; }
  774.     const serverIds = [...new Set((memberships || []).map(r => r.server_id).filter(Boolean))];
  775.     if (!serverIds.length) return;
  776.     const { data: servers, error: srvErr } = await sb.from('servers').select('id,name,icon_url,owner_id').in('id', serverIds);
  777.     if (srvErr) { console.error('[Servers] servers fetch error:', srvErr); return; }
  778.     const serverMap = new Map((servers || []).map(s => [s.id, s]));
  779.     serverIds.forEach(id => {
  780.       const s = serverMap.get(id);
  781.       if (!s) return;
  782.       const el = document.createElement('div');
  783.       el.className  = 'server-icon' + (CS?.id === s.id ? ' active' : '');
  784.       el.title      = s.name;
  785.       el.dataset.id = s.id;
  786.       el.innerHTML  = s.icon_url
  787.         ? `<img src="${s.icon_url}" alt="server icon" style="width:100%;height:100%;object-fit:cover;border-radius:inherit">`
  788.         : `<span style="font-size:18px;font-weight:800;letter-spacing:-0.5px">${s.name.trim()[0].toUpperCase()}</span>`;
  789.       el.onclick = () => selectServer(s, true);
  790.       list.appendChild(el);
  791.     });
  792.   }
  793.   function setupServerMembersSubscription() {
  794.     if (!CU) return;
  795.     sb.channel('server-members-' + CU.id)
  796.       .on('postgres_changes',
  797.         { event: 'INSERT', schema: 'public', table: 'server_members', filter: `user_id=eq.${CU.id}` },
  798.         async () => { await loadServers(); toast('You were added to a server!', 'success'); }
  799.       ).subscribe();
  800.   }
  801.   async function selectServer(server, skipCheck = false) {
  802.     if (!skipCheck) {
  803.       const { data: membership } = await sb.from('server_members').select('server_id').eq('server_id', server.id).eq('user_id', CU.id).maybeSingle();
  804.       if (!membership) { toast('You are not a member of this server.', 'error'); return; }
  805.     }
  806.     CS = server; CC = null; CDM = null; VIEW = 'channel';
  807.     stopMsgPoll(); await clearMsgSubscription();
  808.     document.querySelectorAll('.server-icon[data-id]').forEach(el => el.classList.toggle('active', el.dataset.id === server.id));
  809.     document.getElementById('dm-icon').classList.remove('active');
  810.     document.getElementById('sidebar-title').textContent           = server.name;
  811.     document.getElementById('ch-add-btn').style.display            = 'flex';
  812.     document.getElementById('copy-server-id-btn').style.display    = 'flex';
  813.     document.getElementById('server-settings-btn').style.display   = CS.owner_id === CU.id ? 'flex' : 'none';
  814.     document.getElementById('admin-members-btn').style.display     = CS.owner_id === CU.id ? 'flex' : 'none';
  815.     document.getElementById('start-video-call-btn').style.display  = 'none';
  816.     showWelcome();
  817.     await loadChannels(server.id);
  818.     checkTimeoutOrBan();
  819.     await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  820.   }
  821.   async function loadChannels(serverId) {
  822.     const { data, error } = await sb.from('channels').select('*').eq('server_id', serverId).order('name', { ascending: true });
  823.     if (error) { toast('Failed to load channels', 'error'); return; }
  824.     const list = document.getElementById('sidebar-list');
  825.     list.innerHTML = '<div class="ch-section"><i class="fas fa-hashtag"></i> Text Channels</div>';
  826.     if (!data?.length) { list.innerHTML += '<div class="empty-state"><div>No channels yet</div></div>'; return; }
  827.     data.forEach(ch => {
  828.       const el = document.createElement('div');
  829.       el.className  = 'channel-item' + (CC?.id === ch.id ? ' active' : '');
  830.       el.dataset.id = ch.id;
  831.       el.innerHTML  = `<i class="fas fa-hashtag"></i><span>${ch.name}</span>`;
  832.       el.onclick = () => selectChannel(ch);
  833.       list.appendChild(el);
  834.     });
  835.   }
  836.   function openServerModal() {
  837.     srvTab('create');
  838.     document.getElementById('srv-name').value = '';
  839.     document.getElementById('srv-id').value   = '';
  840.     document.getElementById('srv-icon-file').value = '';
  841.     document.getElementById('server-modal').style.display = 'flex';
  842.   }
  843.   function srvTab(t) {
  844.     srvModalTab = t;
  845.     document.getElementById('srv-create').style.display = t === 'create' ? 'block' : 'none';
  846.     document.getElementById('srv-join').style.display   = t === 'join'   ? 'block' : 'none';
  847.     document.getElementById('mt-create').classList.toggle('active', t === 'create');
  848.     document.getElementById('mt-join').classList.toggle('active', t === 'join');
  849.     document.getElementById('srv-btn').textContent = t === 'create' ? 'Create' : 'Join';
  850.   }
  851.   async function uploadImageFile(file, folder) {
  852.     const path = `${folder}/${CU.id}/${Date.now()}-${file.name}`;
  853.     const { error } = await sb.storage.from(BUCKET).upload(path, file, { upsert: false });
  854.     if (error) throw error;
  855.     return sb.storage.from(BUCKET).getPublicUrl(path).data.publicUrl;
  856.   }
  857.   async function handleServerModal() {
  858.     if (!CU) return;
  859.     if (srvModalTab === 'create') {
  860.       const name = document.getElementById('srv-name').value.trim();
  861.       if (!name) return;
  862.       let icon_url = null;
  863.       const iconFile = document.getElementById('srv-icon-file').files[0];
  864.       if (iconFile) { try { icon_url = await uploadImageFile(iconFile, 'server-icons'); } catch (e) { toast('Icon upload failed: ' + e.message, 'error'); return; } }
  865.       const { data: srv, error } = await sb.from('servers').insert({ name, owner_id: CU.id, icon_url }).select('id,name,icon_url,owner_id').single();
  866.       if (error || !srv) { toast('Error creating server', 'error'); return; }
  867.       await sb.from('server_members').insert({ server_id: srv.id, user_id: CU.id, role: 'owner' });
  868.       await sb.from('channels').insert({ server_id: srv.id, name: 'general' });
  869.       closeModal('server-modal'); await loadServers(); await selectServer(srv, true);
  870.       toast(`"${name}" created!`, 'success');
  871.       setTimeout(() => { navigator.clipboard?.writeText(srv.id); toast('Server ID copied!', 'success'); }, 1200);
  872.     } else {
  873.       const input = document.getElementById('srv-id').value.trim();
  874.       if (!input) return;
  875.       if (input.length <= 10) {
  876.         const { data: invite } = await sb.from('server_invites').select('server_id').eq('code', input.toUpperCase()).gt('expires_at', new Date().toISOString()).maybeSingle();
  877.         if (invite) {
  878.           const { data: srv } = await sb.from('servers').select('id,name,icon_url,owner_id').eq('id', invite.server_id).single();
  879.           if (srv) {
  880.             const { error: memErr } = await sb.from('server_members').insert({ server_id: srv.id, user_id: CU.id });
  881.             if (memErr) { toast('Failed to join', 'error'); return; }
  882.             closeModal('server-modal'); await loadServers(); await selectServer(srv, true);
  883.             toast(`Joined "${srv.name}"!`, 'success'); return;
  884.           }
  885.         }
  886.       }
  887.       const cleanSid = input.replace(/\s+/g, '');
  888.       const { data: srv } = await sb.from('servers').select('id,name,icon_url,owner_id').eq('id', cleanSid).maybeSingle();
  889.       if (!srv) { toast('Server not found', 'error'); return; }
  890.       const { data: ex } = await sb.from('server_members').select('server_id').eq('server_id', cleanSid).eq('user_id', CU.id).maybeSingle();
  891.       if (ex) { toast('Already a member', 'error'); return; }
  892.       const { error: memErr } = await sb.from('server_members').insert({ server_id: cleanSid, user_id: CU.id });
  893.       if (memErr) { toast('Failed to join', 'error'); return; }
  894.       closeModal('server-modal'); await loadServers(); await selectServer(srv, true);
  895.       toast(`Joined "${srv.name}"!`, 'success');
  896.     }
  897.   }
  898.  
  899.   // ==================== SERVER SETTINGS ====================
  900.   function openServerSettingsModal() {
  901.     if (!CS) return;
  902.     document.getElementById('ss-name').value      = CS.name || '';
  903.     document.getElementById('ss-icon-file').value = '';
  904.     document.getElementById('ss-icon-url').value  = CS.icon_url || '';
  905.     setPreview('server-settings-preview', CS.icon_url);
  906.     document.getElementById('invite-code-display').value = '';
  907.     document.getElementById('server-settings-modal').style.display = 'flex';
  908.   }
  909.   async function generateTempInvite() {
  910.     if (!CS || CS.owner_id !== CU.id) return;
  911.     const code    = Math.random().toString(36).substring(2, 7).toUpperCase();
  912.     const expires = new Date(Date.now() + 3600000).toISOString();
  913.     await sb.from('server_invites').insert({ server_id: CS.id, code, expires_at: expires });
  914.     document.getElementById('invite-code-display').value = code;
  915.     toast('Invite code generated! Valid 1 hour.', 'success');
  916.     navigator.clipboard?.writeText(code);
  917.   }
  918.   async function deleteServer() {
  919.     if (!CS || CS.owner_id !== CU.id) return;
  920.     if (!confirm('Delete this server permanently? All data will be lost.')) return;
  921.     await sb.from('servers').delete().eq('id', CS.id);
  922.     CS = null; CC = null;
  923.     closeModal('server-settings-modal');
  924.     await showDMHome(); await loadServers();
  925.     toast('Server deleted', 'success');
  926.   }
  927.   async function saveServerSettings() {
  928.     if (!CS) return;
  929.     const name  = document.getElementById('ss-name').value.trim();
  930.     const file  = document.getElementById('ss-icon-file').files[0];
  931.     const url   = document.getElementById('ss-icon-url').value.trim();
  932.     let icon_url = url || CS.icon_url || null;
  933.     if (file) { try { icon_url = await uploadImageFile(file, 'server-icons'); } catch (e) { toast('Upload failed', 'error'); return; } }
  934.     const { data, error } = await sb.from('servers').update({ name: name || CS.name, icon_url }).eq('id', CS.id).select('id,name,icon_url,owner_id').single();
  935.     if (error) { toast('Failed to save', 'error'); return; }
  936.     CS = data;
  937.     document.getElementById('sidebar-title').textContent = CS.name;
  938.     closeModal('server-settings-modal'); await loadServers();
  939.     toast('Server updated!', 'success');
  940.   }
  941.   function copyCurrentServerId() { if (CS?.id) navigator.clipboard?.writeText(CS.id).then(() => toast('Server ID copied!', 'success')); }
  942.  
  943.   // ==================== CHANNELS ====================
  944.   function openChannelModal() {
  945.     if (!CS) return;
  946.     document.getElementById('ch-name').value = '';
  947.     document.getElementById('ch-restricted').checked = false;
  948.     document.getElementById('channel-modal').style.display = 'flex';
  949.   }
  950.   async function createChannel() {
  951.     const name = document.getElementById('ch-name').value.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
  952.     if (!name || !CS) return;
  953.     const restricted = document.getElementById('ch-restricted').checked;
  954.     const { error } = await sb.from('channels').insert({ server_id: CS.id, name, is_restricted: restricted });
  955.     if (error) { toast('Failed to create channel', 'error'); return; }
  956.     closeModal('channel-modal'); await loadChannels(CS.id);
  957.     toast(`#${name} created`, 'success');
  958.   }
  959.   async function selectChannel(ch) {
  960.     if (ch.is_restricted) {
  961.       const { data: allowed } = await sb.from('channel_allowed_users').select('user_id').eq('channel_id', ch.id).eq('user_id', CU.id).maybeSingle();
  962.       if (!allowed && CS.owner_id !== CU.id) { toast('You do not have access to this restricted channel', 'error'); return; }
  963.     }
  964.     CC = ch; CDM = null; VIEW = 'channel';
  965.     await clearMsgSubscription();
  966.     document.querySelectorAll('.channel-item').forEach(el => el.classList.toggle('active', el.dataset.id == ch.id));
  967.     document.getElementById('chat-icon').className = 'fas fa-hashtag';
  968.     document.getElementById('chat-name').textContent = ch.name;
  969.     document.getElementById('msg-input').placeholder = `Message #${ch.name}`;
  970.     document.getElementById('start-video-call-btn').style.display = 'none';
  971.     showChatView(); await loadMessages(); await subscribeMsgs(); startMsgPoll();
  972.     checkTimeoutOrBan();
  973.     await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  974.   }
  975.  
  976.   // ==================== DM / FRIENDS ====================
  977.   async function showDMHome() {
  978.     CS = null; CC = null; CDM = null; VIEW = 'home';
  979.     stopMsgPoll(); await clearMsgSubscription();
  980.     document.querySelectorAll('.server-icon[data-id]').forEach(el => el.classList.remove('active'));
  981.     document.getElementById('dm-icon').classList.add('active');
  982.     document.getElementById('sidebar-title').textContent           = 'Direct Messages';
  983.     document.getElementById('ch-add-btn').style.display            = 'none';
  984.     document.getElementById('copy-server-id-btn').style.display    = 'none';
  985.     document.getElementById('server-settings-btn').style.display   = 'none';
  986.     document.getElementById('admin-members-btn').style.display     = 'none';
  987.     document.getElementById('start-video-call-btn').style.display  = 'none';
  988.     showWelcome(); await loadDMSidebar();
  989.   }
  990.   async function loadDMSidebar() {
  991.     if (!CU) return;
  992.     const { data: fships } = await sb.from('friendships').select('id,requester_id,addressee_id,status').or(`requester_id.eq.${CU.id},addressee_id.eq.${CU.id}`).eq('status', 'accepted');
  993.     const list = document.getElementById('sidebar-list');
  994.     list.innerHTML = '<div class="ch-section"><i class="fas fa-comment-dots"></i> Direct Messages <button class="sidebar-btn" onclick="openFriendsView()" style="display:inline-flex;width:18px;height:18px;font-size:13px"><i class="fas fa-user-friends"></i></button></div>';
  995.     const friendIds = [...new Set((fships || []).map(f => f.requester_id === CU.id ? f.addressee_id : f.requester_id).filter(Boolean))];
  996.     if (!friendIds.length) { list.innerHTML += '<div class="empty-state"><div class="ico"><i class="fas fa-user-plus"></i></div><div>Add friends to start DMing</div></div>'; return; }
  997.     const { data: profiles } = await sb.from('profiles').select('id,username,avatar_url,last_seen').in('id', friendIds);
  998.     const profileMap = new Map((profiles || []).map(p => [String(p.id), p]));
  999.     const pinned     = CU.pinned_friends || [];
  1000.     const sortedIds  = [...friendIds].sort((a, b) => (pinned.includes(b) ? 1 : 0) - (pinned.includes(a) ? 1 : 0));
  1001.     sortedIds.forEach(fid => {
  1002.       const prof = profileMap.get(String(fid)); if (!prof) return;
  1003.       const isPinned = pinned.includes(fid);
  1004.       const el = document.createElement('div');
  1005.       el.className = 'dm-item' + (CDM?.id === fid ? ' active' : '');
  1006.       el.onclick = () => openDM({ id: fid, username: prof.username, avatar_url: prof.avatar_url || null });
  1007.       const av   = document.createElement('div'); av.className = 'dm-avatar';
  1008.       av.innerHTML = prof.avatar_url ? `<img src="${prof.avatar_url}" alt="avatar">` : (prof.username || '?')[0].toUpperCase();
  1009.       const name   = document.createElement('span'); name.className = 'dm-name'; name.textContent = prof.username;
  1010.       const pinBtn = document.createElement('span'); pinBtn.className = 'pin-btn';
  1011.       pinBtn.innerHTML = isPinned ? '<i class="fas fa-thumbtack"></i>' : '<i class="far fa-thumbtack"></i>';
  1012.       pinBtn.title     = isPinned ? 'Unpin' : 'Pin';
  1013.       pinBtn.onclick   = (e) => { e.stopPropagation(); togglePinFriend(fid); };
  1014.       el.appendChild(av); el.appendChild(name); el.appendChild(pinBtn);
  1015.       list.appendChild(el);
  1016.     });
  1017.   }
  1018.   async function togglePinFriend(friendId) {
  1019.     let pinned = CU.pinned_friends || [];
  1020.     if (pinned.includes(friendId)) pinned = pinned.filter(id => id !== friendId);
  1021.     else pinned.push(friendId);
  1022.     await sb.from('profiles').update({ pinned_friends: pinned }).eq('id', CU.id);
  1023.     CU.pinned_friends = pinned;
  1024.     await loadDMSidebar();
  1025.   }
  1026.   function openFriendsView() {
  1027.     VIEW = 'friends'; CDM = null;
  1028.     stopMsgPoll(); clearMsgSubscription();
  1029.     showFriendsPanel(); ftab('friends');
  1030.   }
  1031.   async function openDM(user) {
  1032.     CDM = user; CS = null; CC = null; VIEW = 'dm';
  1033.     await clearMsgSubscription();
  1034.     document.querySelectorAll('.dm-item').forEach(el => el.classList.remove('active'));
  1035.     document.getElementById('chat-icon').className   = 'fas fa-user';
  1036.     document.getElementById('chat-name').textContent  = user.username;
  1037.     document.getElementById('msg-input').placeholder  = `Message @${user.username}`;
  1038.     document.getElementById('start-video-call-btn').style.display = 'flex';
  1039.     showChatView(); await loadMessages(); await subscribeMsgs(); startMsgPoll();
  1040.     await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1041.     if (!vcCallSubscription) setupVideoCallSubscriptions();
  1042.   }
  1043.  
  1044.   // ==================== MESSAGES ====================
  1045.   async function loadMessages() {
  1046.     if (!CU) return;
  1047.     let data = [];
  1048.     if (VIEW === 'channel' && CC) {
  1049.       const { data: rows } = await sb.from('messages').select('*').eq('channel_id', CC.id).order('created_at', { ascending: true }).limit(100);
  1050.       data = rows || [];
  1051.     } else if (VIEW === 'dm' && CDM) {
  1052.       const { data: rows } = await sb.from('direct_messages').select('*').in('sender_id', [CU.id, CDM.id]).in('receiver_id', [CU.id, CDM.id]).order('created_at', { ascending: true }).limit(100);
  1053.       data = (rows || []).filter(m => (m.sender_id === CU.id && m.receiver_id === CDM.id) || (m.sender_id === CDM.id && m.receiver_id === CU.id));
  1054.     }
  1055.     const authorIds = [...new Set(data.map(getCurrentAuthorId).filter(Boolean))];
  1056.     let profileMap = new Map();
  1057.     if (authorIds.length) {
  1058.       const { data: profiles } = await sb.from('profiles').select('id,username,avatar_url').in('id', authorIds);
  1059.       profileMap = new Map((profiles || []).map(p => [String(p.id), p]));
  1060.     }
  1061.     data = data.map(m => {
  1062.       const aid = getCurrentAuthorId(m); const pr = profileMap.get(String(aid));
  1063.       return { ...m, _username: pr?.username || 'Unknown', _avatar_url: pr?.avatar_url || null };
  1064.     });
  1065.     const wrap = document.getElementById('messages-wrap');
  1066.     wrap.innerHTML = ''; renderedMsgIds.clear();
  1067.     if (!data.length) wrap.innerHTML = `<div class="empty-state"><div class="ico"><i class="fas fa-comments"></i></div><div>No messages yet — say something!</div></div>`;
  1068.     else data.forEach(m => { renderedMsgIds.add(m.id); wrap.appendChild(buildMsg(m)); });
  1069.     wrap.scrollTop = wrap.scrollHeight;
  1070.   }
  1071.   function buildMsg(m) {
  1072.     const uname = m._username || 'Unknown';
  1073.     const time  = m.created_at ? new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
  1074.     const g = document.createElement('div'); g.className = 'msg-group'; g.dataset.id = m.id || '';
  1075.     const av = document.createElement('div'); av.className = 'msg-av';
  1076.     av.innerHTML = m._avatar_url ? `<img src="${m._avatar_url}" alt="avatar">` : (uname || '?')[0].toUpperCase();
  1077.     const body = document.createElement('div'); body.className = 'msg-body';
  1078.     const meta = document.createElement('div'); meta.className = 'msg-meta';
  1079.     const author = document.createElement('span'); author.className = 'msg-author'; author.textContent = uname;
  1080.     const tm = document.createElement('span'); tm.className = 'msg-time'; tm.textContent = time;
  1081.     meta.appendChild(author); meta.appendChild(tm); body.appendChild(meta);
  1082.     const t = m.msg_type || 'text';
  1083.     if (t === 'text') {
  1084.       const d = document.createElement('div'); d.className = 'msg-text'; d.textContent = m.content || ''; body.appendChild(d);
  1085.     } else if (t === 'image' || t === 'gif') {
  1086.       const wrapper = document.createElement('div'); wrapper.className = 'msg-img-wrapper';
  1087.       const img = document.createElement('img'); img.className = 'msg-img'; img.src = m.file_url; img.alt = m.file_name || 'image';
  1088.       img.onclick = () => openLightbox(m.file_url);
  1089.       wrapper.appendChild(img);
  1090.       if (t === 'gif') { const badge = document.createElement('span'); badge.className = 'gif-badge'; badge.textContent = 'GIF'; wrapper.appendChild(badge); }
  1091.       body.appendChild(wrapper);
  1092.     } else if (t === 'file') {
  1093.       body.appendChild(buildFileEl(m));
  1094.     }
  1095.     if (m.content && t !== 'text') { const d = document.createElement('div'); d.className = 'msg-text'; d.textContent = m.content; d.style.marginTop = '4px'; body.appendChild(d); }
  1096.     if (hasCurrentOwnership(m)) {
  1097.       const del = document.createElement('button'); del.className = 'msg-delete'; del.title = 'Delete message'; del.innerHTML = '<i class="fas fa-trash-alt"></i>';
  1098.       del.onclick = () => deleteMyMessage(m); g.appendChild(del);
  1099.     }
  1100.     g.appendChild(av); g.appendChild(body);
  1101.     return g;
  1102.   }
  1103.   const FILE_ICONS = { zip:'fa-file-archive',gz:'fa-file-archive',rar:'fa-file-archive',tar:'fa-file-archive',csv:'fa-file-csv',json:'fa-file-code',html:'fa-file-code',htm:'fa-file-code',pdf:'fa-file-pdf',mp4:'fa-file-video',webm:'fa-file-video',mp3:'fa-file-audio',wav:'fa-file-audio',txt:'fa-file-alt',js:'fa-file-code',ts:'fa-file-code',py:'fa-file-code',rb:'fa-file-code',go:'fa-file-code',rs:'fa-file-code',png:'fa-file-image',jpg:'fa-file-image',gif:'fa-file-image',webp:'fa-file-image',svg:'fa-file-image',docx:'fa-file-word',xlsx:'fa-file-excel',pptx:'fa-file-powerpoint',exe:'fa-file',dmg:'fa-file' };
  1104.   function buildFileEl(m) {
  1105.     const ext  = (m.file_name || '').split('.').pop().toLowerCase();
  1106.     const mime = m.file_mime || '';
  1107.     const wrap = document.createElement('div'); wrap.className = 'msg-file';
  1108.     const iconEl = document.createElement('div'); iconEl.className = 'msg-file-icon'; iconEl.innerHTML = `<i class="fas ${FILE_ICONS[ext] || 'fa-file'}"></i>`;
  1109.     const info = document.createElement('div'); info.className = 'msg-file-info';
  1110.     const name = document.createElement('div'); name.className = 'msg-file-name'; name.title = m.file_name || ''; name.textContent = m.file_name || 'file';
  1111.     const type = document.createElement('div'); type.className = 'msg-file-type'; type.textContent = mime || ext.toUpperCase();
  1112.     info.appendChild(name); info.appendChild(type);
  1113.     let btn;
  1114.     if (ext === 'html' || ext === 'htm' || mime === 'text/html') {
  1115.       btn = document.createElement('button'); btn.className = 'fa-btn fa-demo'; btn.innerHTML = '<i class="fas fa-play"></i> Demo';
  1116.       btn.onclick = () => openHTMLDemo(m.file_url, m.file_name);
  1117.     } else if (ext === 'csv' || mime === 'text/csv') {
  1118.       btn = document.createElement('button'); btn.className = 'fa-btn fa-preview'; btn.innerHTML = '<i class="fas fa-table"></i> Preview';
  1119.       btn.onclick = () => openCSVPreview(m.file_url, m.file_name);
  1120.     } else {
  1121.       btn = document.createElement('a'); btn.className = 'fa-btn fa-dl'; btn.href = m.file_url; btn.target = '_blank'; btn.download = m.file_name; btn.innerHTML = '<i class="fas fa-download"></i> Download';
  1122.     }
  1123.     wrap.appendChild(iconEl); wrap.appendChild(info); wrap.appendChild(btn);
  1124.     return wrap;
  1125.   }
  1126.   async function subscribeMsgs() {
  1127.     await clearMsgSubscription();
  1128.     if (!CU) return;
  1129.     if (VIEW === 'channel' && CC) {
  1130.       msgSub = sb.channel('ch-' + CC.id)
  1131.         .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: `channel_id=eq.${CC.id}` }, async p => {
  1132.           const m = p.new; if (m.id && renderedMsgIds.has(m.id)) return;
  1133.           const authorId = getCurrentAuthorId(m);
  1134.           const { data: pr } = await sb.from('profiles').select('id,username,avatar_url').eq('id', authorId).maybeSingle();
  1135.           m._username = pr?.username || 'Unknown'; m._avatar_url = pr?.avatar_url || null;
  1136.           appendMsg(m);
  1137.         }).subscribe();
  1138.     } else if (VIEW === 'dm' && CDM) {
  1139.       msgSub = sb.channel('dm-' + CU.id + '-' + CDM.id)
  1140.         .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'direct_messages' }, async p => {
  1141.           const m = p.new;
  1142.           if (!((m.sender_id === CU.id && m.receiver_id === CDM.id) || (m.sender_id === CDM.id && m.receiver_id === CU.id))) return;
  1143.           if (m.id && renderedMsgIds.has(m.id)) return;
  1144.           const { data: pr } = await sb.from('profiles').select('id,username,avatar_url').eq('id', m.sender_id).maybeSingle();
  1145.           m._username = pr?.username || 'Unknown'; m._avatar_url = pr?.avatar_url || null;
  1146.           appendMsg(m);
  1147.         }).subscribe();
  1148.     }
  1149.   }
  1150.   function appendMsg(m) {
  1151.     const wrap = document.getElementById('messages-wrap');
  1152.     const empty = wrap.querySelector('.empty-state'); if (empty) empty.remove();
  1153.     if (m.id && renderedMsgIds.has(m.id)) return;
  1154.     if (m.id) renderedMsgIds.add(m.id);
  1155.     wrap.appendChild(buildMsg(m));
  1156.     wrap.scrollTop = wrap.scrollHeight;
  1157.   }
  1158.   async function sendMessage() {
  1159.     if (!CU) return;
  1160.     const sendBtn = document.getElementById('send-btn'); if (sendBtn.disabled) return;
  1161.     if (pendingGifUrl) { await sendGifResolved(pendingGifUrl, document.getElementById('gif-caption').value.trim()); return; }
  1162.     if (pendingFile)   { await uploadAndSend(); return; }
  1163.     const input = document.getElementById('msg-input'); const content = input.value.trim(); if (!content) return;
  1164.     sendBtn.disabled = true; input.value = ''; input.style.height = '';
  1165.     try {
  1166.       if (VIEW === 'channel' && CC) {
  1167.         const { error } = await sb.from('messages').insert({ channel_id: CC.id, user_id: CU.id, content, msg_type: 'text' });
  1168.         if (error) { toast('Failed to send', 'error'); input.value = content; return; }
  1169.         await loadMessages();
  1170.       } else if (VIEW === 'dm' && CDM) {
  1171.         const { error } = await sb.from('direct_messages').insert({ sender_id: CU.id, receiver_id: CDM.id, content, msg_type: 'text' });
  1172.         if (error) { toast('Failed to send', 'error'); input.value = content; return; }
  1173.         await loadMessages();
  1174.       }
  1175.       await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1176.     } finally { sendBtn.disabled = false; }
  1177.   }
  1178.   function handleMsgKey(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }
  1179.   function autoGrow(el) { el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 110) + 'px'; }
  1180.   function onFileChosen(e) {
  1181.     const f = e.target.files[0]; if (!f) return;
  1182.     pendingFile = f; pendingGifUrl = null;
  1183.     document.getElementById('up-name').textContent = `📎 ${f.name} (${fmtBytes(f.size)})`;
  1184.     document.getElementById('upload-prev').style.display = 'flex';
  1185.     document.getElementById('msg-input').placeholder = 'Add a caption (optional)...';
  1186.     e.target.value = '';
  1187.   }
  1188.   function cancelUpload() {
  1189.     pendingFile = null; pendingGifUrl = null;
  1190.     document.getElementById('upload-prev').style.display = 'none';
  1191.     document.getElementById('msg-input').placeholder = VIEW === 'dm' ? `Message @${CDM?.username || ''}` : `Message #${CC?.name || ''}`;
  1192.   }
  1193.   async function uploadAndSend() {
  1194.     if (!pendingFile || !CU) return;
  1195.     const f = pendingFile; const caption = document.getElementById('msg-input').value.trim();
  1196.     const sendBtn = document.getElementById('send-btn'); sendBtn.disabled = true;
  1197.     const path = `chat/${CU.id}/${Date.now()}-${f.name}`;
  1198.     const { error } = await sb.storage.from(BUCKET).upload(path, f, { upsert: false });
  1199.     if (error) { toast('Upload failed', 'error'); sendBtn.disabled = false; return; }
  1200.     const { data: publicData } = sb.storage.from(BUCKET).getPublicUrl(path);
  1201.     const publicUrl = publicData.publicUrl;
  1202.     const isImage = f.type.startsWith('image/');
  1203.     const row = { user_id: CU.id, content: caption || null, msg_type: isImage ? 'image' : 'file', file_url: publicUrl, file_name: f.name, file_mime: f.type };
  1204.     let err = null;
  1205.     if (VIEW === 'channel' && CC)   ({ error: err } = await sb.from('messages').insert({ ...row, channel_id: CC.id }));
  1206.     else if (VIEW === 'dm' && CDM)  ({ error: err } = await sb.from('direct_messages').insert({ ...row, sender_id: CU.id, receiver_id: CDM.id }));
  1207.     if (err) { toast('Failed to send file', 'error'); sendBtn.disabled = false; return; }
  1208.     cancelUpload(); document.getElementById('msg-input').value = ''; sendBtn.disabled = false;
  1209.     await loadMessages(); toast('File sent!', 'success');
  1210.     await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1211.   }
  1212.   async function deleteMyMessage(m) {
  1213.     if (!hasCurrentOwnership(m)) return;
  1214.     if (!confirm('Delete this message?')) return;
  1215.     const table = VIEW === 'dm' ? 'direct_messages' : 'messages';
  1216.     const { error } = await sb.from(table).delete().eq('id', m.id);
  1217.     if (error) { toast('Failed to delete', 'error'); return; }
  1218.     renderedMsgIds.delete(m.id); await loadMessages();
  1219.   }
  1220.  
  1221.   // ==================== GIF ====================
  1222.   function openGifModal() {
  1223.     if (!VIEW || (!CC && !CDM)) { toast('Open a channel or DM first', 'error'); return; }
  1224.     document.getElementById('gif-url').value     = '';
  1225.     document.getElementById('gif-caption').value = '';
  1226.     pendingGifUrl = null;
  1227.     document.getElementById('gif-modal').style.display = 'flex';
  1228.   }
  1229.   async function resolveGifUrl(input) {
  1230.     const raw = input.trim(); if (!raw) return null;
  1231.     if (/\.(gif)(\?.*)?$/i.test(raw)) return raw;
  1232.     if (/^https?:\/\//i.test(raw) && /tenor\.com|giphy\.com/i.test(raw)) {
  1233.       const endpoints = [
  1234.         `https://giphy.com/services/oembed?url=${encodeURIComponent(raw)}`,
  1235.         `https://tenor.com/oembed?url=${encodeURIComponent(raw)}`
  1236.       ];
  1237.       for (const ep of endpoints) { try { const r = await fetch(ep); if (!r.ok) continue; const j = await r.json(); return j.url || j.thumbnail_url || j.image_url || null; } catch (_) {} }
  1238.     }
  1239.     if (/^https?:\/\//i.test(raw)) return raw;
  1240.     return null;
  1241.   }
  1242.   async function sendGifFromModal() {
  1243.     const raw = document.getElementById('gif-url').value.trim(); const caption = document.getElementById('gif-caption').value.trim();
  1244.     const resolved = await resolveGifUrl(raw); if (!resolved) { toast('Could not resolve GIF link', 'error'); return; }
  1245.     closeModal('gif-modal'); await sendGifResolved(resolved, caption);
  1246.   }
  1247.   async function sendGifResolved(url, caption) {
  1248.     if (!CU) return;
  1249.     const row = { user_id: CU.id, content: caption || null, msg_type: 'gif', file_url: url, file_name: 'gif', file_mime: 'image/gif' };
  1250.     let err = null;
  1251.     if (VIEW === 'channel' && CC)  ({ error: err } = await sb.from('messages').insert({ ...row, channel_id: CC.id }));
  1252.     else if (VIEW === 'dm' && CDM) ({ error: err } = await sb.from('direct_messages').insert({ ...row, sender_id: CU.id, receiver_id: CDM.id }));
  1253.     if (err) { toast('Failed to send GIF', 'error'); return; }
  1254.     document.getElementById('gif-url').value = ''; document.getElementById('gif-caption').value = ''; pendingGifUrl = null;
  1255.     await loadMessages(); toast('GIF sent!', 'success');
  1256.     await sb.from('profiles').update({ last_seen: new Date().toISOString() }).eq('id', CU.id);
  1257.   }
  1258.  
  1259.   // ==================== FRIENDS PANEL ====================
  1260.   async function ftab(t) {
  1261.     activeFTab = t;
  1262.     document.querySelectorAll('.ftab').forEach((el, i) => el.classList.toggle('active', ['friends', 'pending', 'add'][i] === t));
  1263.     await renderFriends();
  1264.   }
  1265.   function isOnline(lastSeen) { if (!lastSeen) return false; return new Date(lastSeen) > new Date(Date.now() - 5 * 60 * 1000); }
  1266.   async function renderFriends() {
  1267.     const content = document.getElementById('friends-content'); content.innerHTML = '';
  1268.     if (activeFTab === 'add') {
  1269.       content.innerHTML = `<div class="f-section"><i class="fas fa-user-plus"></i> Add Friend</div><div class="add-friend-bar"><input type="text" id="af-input" placeholder="Enter username..." onkeydown="if(event.key==='Enter')sendFriendReq()"><button class="send-fr-btn" onclick="sendFriendReq()"><i class="fas fa-paper-plane"></i> Send</button></div><div id="add-friend-msg"></div>`;
  1270.       return;
  1271.     }
  1272.     const { data: fships } = await sb.from('friendships').select('id,requester_id,addressee_id,status').or(`requester_id.eq.${CU.id},addressee_id.eq.${CU.id}`).eq('status', activeFTab === 'pending' ? 'pending' : 'accepted');
  1273.     if (!fships) return;
  1274.     const allIds = [...new Set(fships.flatMap(f => [f.requester_id, f.addressee_id]).filter(Boolean))];
  1275.     let profiles = []; if (allIds.length) { const { data: fetched } = await sb.from('profiles').select('id,username,avatar_url,last_seen').in('id', allIds); profiles = fetched || []; }
  1276.     const findProfile = id => profiles.find(p => p.id == id);
  1277.     function makeAvatar(pr) { const av = document.createElement('div'); av.className = 'friend-av'; av.innerHTML = pr.avatar_url ? `<img src="${pr.avatar_url}" alt="avatar">` : (pr.username || '?')[0].toUpperCase(); return av; }
  1278.     if (activeFTab === 'friends') {
  1279.       const accepted = fships.filter(f => f.status === 'accepted');
  1280.       if (!accepted.length) { content.innerHTML = `<div class="empty-state"><div class="ico"><i class="fas fa-user-friends"></i></div><div>No friends yet</div></div>`; return; }
  1281.       content.innerHTML = `<div class="f-section"><i class="fas fa-user-friends"></i> Friends — ${accepted.length}</div>`;
  1282.       for (const f of accepted) {
  1283.         const fid = f.requester_id == CU.id ? f.addressee_id : f.requester_id;
  1284.         const pr = findProfile(fid); if (!pr) continue;
  1285.         const online = isOnline(pr.last_seen);
  1286.         const card = document.createElement('div'); card.className = 'friend-card';
  1287.         const info = document.createElement('div');
  1288.         const uname = document.createElement('div'); uname.className = 'friend-username'; uname.textContent = pr.username;
  1289.         const label = document.createElement('div'); label.className = 'friend-label';
  1290.         label.innerHTML = online ? '<i class="fas fa-circle" style="color:var(--green);font-size:8px"></i> online' : '<i class="fas fa-circle" style="color:var(--text-muted);font-size:8px"></i> offline';
  1291.         info.appendChild(uname); info.appendChild(label);
  1292.         const actions = document.createElement('div'); actions.className = 'friend-actions';
  1293.         actions.innerHTML = `<button class="ibt msg" title="Message"><i class="fas fa-comment"></i></button><button class="ibt" title="Invite to Server" style="background:var(--bg-active);color:var(--accent)"><i class="fas fa-user-plus"></i></button><button class="ibt dec" title="Block"><i class="fas fa-ban"></i></button>`;
  1294.         actions.children[0].onclick = () => openDM({ id: fid, username: pr.username, avatar_url: pr.avatar_url || null });
  1295.         actions.children[1].onclick = () => inviteToServer(fid);
  1296.         actions.children[2].onclick = () => blockUser(fid);
  1297.         card.appendChild(makeAvatar(pr)); card.appendChild(info); card.appendChild(actions); content.appendChild(card);
  1298.       }
  1299.     }
  1300.     if (activeFTab === 'pending') {
  1301.       const pending  = fships.filter(f => f.status === 'pending');
  1302.       if (!pending.length) { content.innerHTML = `<div class="empty-state"><div class="ico"><i class="fas fa-clock"></i></div><div>No pending requests</div></div>`; return; }
  1303.       const incoming = pending.filter(f => f.addressee_id == CU.id);
  1304.       const outgoing = pending.filter(f => f.requester_id == CU.id);
  1305.       if (incoming.length) {
  1306.         const sec = document.createElement('div'); sec.className = 'f-section'; sec.innerHTML = `<i class="fas fa-arrow-down"></i> Incoming — ${incoming.length}`; content.appendChild(sec);
  1307.         for (const f of incoming) {
  1308.           const pr = findProfile(f.requester_id); if (!pr) continue;
  1309.           const card = document.createElement('div'); card.className = 'friend-card';
  1310.           const info = document.createElement('div'); info.innerHTML = `<div class="friend-username">${pr.username}</div><div class="friend-label">Wants to be friends</div>`;
  1311.           const actions = document.createElement('div'); actions.className = 'friend-actions';
  1312.           actions.innerHTML = `<button class="ibt acc" title="Accept"><i class="fas fa-check"></i></button><button class="ibt dec" title="Decline"><i class="fas fa-times"></i></button>`;
  1313.           actions.children[0].onclick = () => respondFR(f.id, 'accepted');
  1314.           actions.children[1].onclick = () => respondFR(f.id, 'declined');
  1315.           card.appendChild(makeAvatar(pr)); card.appendChild(info); card.appendChild(actions); content.appendChild(card);
  1316.         }
  1317.       }
  1318.       if (outgoing.length) {
  1319.         const sec = document.createElement('div'); sec.className = 'f-section'; sec.style.marginTop = '20px'; sec.innerHTML = `<i class="fas fa-arrow-up"></i> Outgoing — ${outgoing.length}`; content.appendChild(sec);
  1320.         for (const f of outgoing) {
  1321.           const pr = findProfile(f.addressee_id); if (!pr) continue;
  1322.           const card = document.createElement('div'); card.className = 'friend-card';
  1323.           const info = document.createElement('div'); info.innerHTML = `<div class="friend-username">${pr.username}</div><div class="friend-label">Request pending…</div>`;
  1324.           const actions = document.createElement('div'); actions.className = 'friend-actions';
  1325.           actions.innerHTML = `<button class="ibt dec" title="Cancel"><i class="fas fa-times"></i></button>`;
  1326.           actions.children[0].onclick = () => cancelFR(f.id);
  1327.           card.appendChild(makeAvatar(pr)); card.appendChild(info); card.appendChild(actions); content.appendChild(card);
  1328.         }
  1329.       }
  1330.     }
  1331.   }
  1332.   async function sendFriendReq() {
  1333.     const inp = document.getElementById('af-input'); const msgEl = document.getElementById('add-friend-msg');
  1334.     const username = inp?.value.trim().toLowerCase(); if (!username) return;
  1335.     if (username === CU.username) { if (msgEl) { msgEl.style.color = 'var(--red)'; msgEl.textContent = "That's you!"; } return; }
  1336.     const { data: target } = await sb.from('profiles').select('id').eq('username', username).maybeSingle();
  1337.     if (!target) { if (msgEl) { msgEl.style.color = 'var(--red)'; msgEl.textContent = 'User not found.'; } return; }
  1338.     const { data: ex } = await sb.from('friendships').select('id,status').or(`and(requester_id.eq.${CU.id},addressee_id.eq.${target.id}),and(requester_id.eq.${target.id},addressee_id.eq.${CU.id})`).maybeSingle();
  1339.     if (ex) { if (msgEl) { msgEl.style.color = 'var(--amber)'; msgEl.textContent = ex.status === 'accepted' ? 'Already friends!' : 'Request already sent.'; } return; }
  1340.     const { error } = await sb.from('friendships').insert({ requester_id: CU.id, addressee_id: target.id });
  1341.     if (error) { if (msgEl) { msgEl.style.color = 'var(--red)'; msgEl.textContent = 'Failed to send request.'; } return; }
  1342.     if (msgEl) { msgEl.style.color = 'var(--green)'; msgEl.textContent = `Request sent to ${username}!`; }
  1343.     if (inp) inp.value = ''; await updatePendingBadge();
  1344.   }
  1345.   async function respondFR(id, status) {
  1346.     if (status === 'accepted') {
  1347.       const { error } = await sb.from('friendships').update({ status }).eq('id', id);
  1348.       if (error) { toast('Failed to accept', 'error'); return; }
  1349.       toast('Friend added!', 'success'); await loadDMSidebar();
  1350.     } else {
  1351.       const { error } = await sb.from('friendships').delete().eq('id', id);
  1352.       if (error) { toast('Failed to decline', 'error'); return; }
  1353.       toast('Request declined.', '');
  1354.     }
  1355.     await renderFriends(); await updatePendingBadge();
  1356.   }
  1357.   async function cancelFR(id) { await sb.from('friendships').delete().eq('id', id); await renderFriends(); await updatePendingBadge(); }
  1358.   async function updatePendingBadge() {
  1359.     if (!CU) return;
  1360.     const { data } = await sb.from('friendships').select('id').eq('addressee_id', CU.id).eq('status', 'pending');
  1361.     const badge = document.getElementById('pend-badge'); if (!badge) return;
  1362.     if (data?.length) { badge.style.display = 'inline'; badge.textContent = data.length; } else badge.style.display = 'none';
  1363.   }
  1364.   function startPendingPoll() { updatePendingBadge(); pBadgeTimer = setInterval(updatePendingBadge, 12000); }
  1365.   async function blockUser(userId) {
  1366.     let blocked = CU.blocked_users || []; if (blocked.includes(parseInt(userId))) return;
  1367.     blocked.push(parseInt(userId));
  1368.     await sb.from('profiles').update({ blocked_users: blocked }).eq('id', CU.id);
  1369.     CU.blocked_users = blocked; toast('User blocked', 'success');
  1370.     await renderFriends();
  1371.   }
  1372.   async function inviteToServer(friendId) {
  1373.     if (!CU) return;
  1374.     const { data: profile } = await sb.from('profiles').select('username').eq('id', friendId).single();
  1375.     pendingInviteFriendId   = friendId;
  1376.     pendingInviteFriendName = profile?.username || 'this user';
  1377.     document.getElementById('invite-friend-name').textContent = pendingInviteFriendName;
  1378.     const { data: memberships } = await sb.from('server_members').select('server_id,role').eq('user_id', CU.id).in('role', ['owner', 'admin']);
  1379.     if (!memberships?.length) { toast('You are not an owner/admin in any server', 'error'); return; }
  1380.     const serverIds = memberships.map(m => m.server_id);
  1381.     const { data: servers } = await sb.from('servers').select('id,name').in('id', serverIds);
  1382.     const list = document.getElementById('invite-server-list'); list.innerHTML = '';
  1383.     servers.forEach(srv => {
  1384.       const div = document.createElement('div'); div.className = 'friend-card'; div.style.cursor = 'pointer';
  1385.       div.innerHTML = `<span class="friend-username"><i class="fas fa-server"></i> ${srv.name}</span><button class="ibt msg"><i class="fas fa-plus"></i></button>`;
  1386.       div.onclick = () => { closeModal('invite-server-modal'); confirmInviteToServer(srv.id, pendingInviteFriendId); };
  1387.       list.appendChild(div);
  1388.     });
  1389.     document.getElementById('invite-server-modal').style.display = 'flex';
  1390.   }
  1391.   async function confirmInviteToServer(serverId, friendId) {
  1392.     const { data: existing } = await sb.from('server_members').select('user_id').eq('server_id', serverId).eq('user_id', friendId).maybeSingle();
  1393.     if (existing) { toast('User already in this server', 'error'); return; }
  1394.     await sb.from('server_members').insert({ server_id: serverId, user_id: friendId });
  1395.     toast(`Invited ${pendingInviteFriendName} to server!`, 'success');
  1396.     pendingInviteFriendId = null;
  1397.   }
  1398.  
  1399.   // ==================== SETTINGS ====================
  1400.   function openSettingsModal(initialTab = 'profile') {
  1401.     if (!CU) return;
  1402.     document.getElementById('settings-username').value    = CU.username;
  1403.     document.getElementById('settings-avatar-url').value  = CU.avatar_url || '';
  1404.     document.getElementById('settings-avatar-file').value = '';
  1405.     setPreview('settings-profile-preview', CU.avatar_url);
  1406.     document.getElementById('settings-theme').value = localStorage.getItem('nexchat_theme') || 'dark';
  1407.     document.getElementById('settings-font').value  = localStorage.getItem('nexchat_msg_font') || 'JetBrains Mono';
  1408.     document.querySelectorAll('#settings-modal .modal-tab').forEach(tab => {
  1409.       tab.classList.toggle('active', tab.dataset.stab === initialTab);
  1410.       document.getElementById(`stab-${tab.dataset.stab}`).style.display = tab.dataset.stab === initialTab ? 'block' : 'none';
  1411.     });
  1412.     if (initialTab === 'blocked') renderBlockedList();
  1413.     document.getElementById('settings-modal').style.display = 'flex';
  1414.   }
  1415.   function setPreview(prefix, url) {
  1416.     const img = document.getElementById(prefix + '-img'); const txt = document.getElementById(prefix + '-txt');
  1417.     if (url) { img.style.display = 'block'; img.src = url; txt.textContent = url; }
  1418.     else { img.style.display = 'none'; img.src = ''; txt.textContent = 'No avatar selected'; }
  1419.   }
  1420.   async function saveProfileSettings() {
  1421.     if (!CU) return;
  1422.     const file = document.getElementById('settings-avatar-file').files[0];
  1423.     const url  = document.getElementById('settings-avatar-url').value.trim();
  1424.     let avatar_url = url || CU.avatar_url;
  1425.     if (file) { try { avatar_url = await uploadImageFile(file, 'avatars'); } catch (e) { toast('Upload failed', 'error'); return; } }
  1426.     const theme = document.getElementById('settings-theme').value;
  1427.     const font  = document.getElementById('settings-font').value;
  1428.     applyTheme(theme); applyMessageFont(font);
  1429.     const { data, error } = await sb.from('profiles').update({ avatar_url }).eq('id', CU.id).select().single();
  1430.     if (error) { toast('Failed to save profile', 'error'); return; }
  1431.     CU.avatar_url = data.avatar_url;
  1432.     document.getElementById('uav').innerHTML = CU.avatar_url ? `<img src="${CU.avatar_url}" alt="avatar">` : CU.username[0].toUpperCase();
  1433.     closeModal('settings-modal'); toast('Profile updated!', 'success');
  1434.     await refreshAllVisibleAvatars();
  1435.   }
  1436.   async function changePassword() {
  1437.     const oldPass = document.getElementById('old-password').value;
  1438.     const newPass = document.getElementById('new-password').value;
  1439.     const confirm = document.getElementById('confirm-password').value;
  1440.     const msgEl   = document.getElementById('password-change-msg');
  1441.     if (!oldPass || !newPass || !confirm) { msgEl.textContent = 'All fields required'; return; }
  1442.     if (newPass !== confirm) { msgEl.textContent = 'New passwords do not match'; return; }
  1443.     const { data: user } = await sb.from('profiles').select('password').eq('id', CU.id).single();
  1444.     if (user.password !== oldPass) { msgEl.textContent = 'Current password is incorrect'; return; }
  1445.     const { error } = await sb.from('profiles').update({ password: newPass }).eq('id', CU.id);
  1446.     if (error) { msgEl.textContent = 'Failed to update password'; return; }
  1447.     msgEl.style.color = 'var(--green)'; msgEl.textContent = 'Password changed successfully!';
  1448.     document.getElementById('old-password').value = document.getElementById('new-password').value = document.getElementById('confirm-password').value = '';
  1449.   }
  1450.   async function renderBlockedList() {
  1451.     const container = document.getElementById('blocked-list');
  1452.     const blocked = CU.blocked_users || [];
  1453.     if (!blocked.length) { container.innerHTML = '<div class="empty-state"><i class="fas fa-ban"></i> No blocked users</div>'; return; }
  1454.     const { data: profiles } = await sb.from('profiles').select('id,username').in('id', blocked);
  1455.     container.innerHTML = '';
  1456.     (profiles || []).forEach(p => {
  1457.       const div = document.createElement('div'); div.className = 'friend-card';
  1458.       div.innerHTML = `<span class="friend-username">${p.username}</span>`;
  1459.       const btn = document.createElement('button'); btn.className = 'ibt dec'; btn.innerHTML = '<i class="fas fa-undo-alt"></i> Unblock';
  1460.       btn.onclick = async () => {
  1461.         let newBlocked = blocked.filter(id => id !== p.id);
  1462.         await sb.from('profiles').update({ blocked_users: newBlocked }).eq('id', CU.id);
  1463.         CU.blocked_users = newBlocked; renderBlockedList(); toast(`${p.username} unblocked`, 'success');
  1464.       };
  1465.       div.appendChild(btn); container.appendChild(div);
  1466.     });
  1467.   }
  1468.   async function deleteAccount() {
  1469.     const password = document.getElementById('delete-password').value;
  1470.     const { data: user } = await sb.from('profiles').select('password').eq('id', CU.id).single();
  1471.     if (user.password !== password) { toast('Incorrect password', 'error'); return; }
  1472.     await sb.from('profiles').delete().eq('id', CU.id);
  1473.     doLogout(); toast('Account deleted', 'success');
  1474.   }
  1475.   function applyTheme(theme) { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('nexchat_theme', theme); }
  1476.   function applyMessageFont(font) { document.documentElement.style.setProperty('--mono', `'${font}', monospace`); localStorage.setItem('nexchat_msg_font', font); }
  1477.  
  1478.   // ==================== ADMIN TIMEOUT / BAN ====================
  1479.   async function openAdminMembersModal() {
  1480.     if (!CS || CS.owner_id !== CU.id) return;
  1481.     const { data: members } = await sb.from('server_members').select('user_id').eq('server_id', CS.id);
  1482.     const userIds = members.map(m => m.user_id);
  1483.     const { data: profiles } = await sb.from('profiles').select('id,username').in('id', userIds);
  1484.     const list = document.getElementById('admin-members-list'); list.innerHTML = '';
  1485.     profiles.forEach(p => {
  1486.       if (p.id === CU.id) return;
  1487.       const div = document.createElement('div'); div.className = 'friend-card';
  1488.       div.innerHTML = `<span class="friend-username">${p.username}</span>`;
  1489.       const actions = document.createElement('div'); actions.className = 'friend-actions';
  1490.       actions.innerHTML = `<button class="ibt dec" title="Kick"><i class="fas fa-user-slash"></i></button><button class="ibt" title="Timeout 5min" style="background:var(--bg-active);color:var(--amber)"><i class="fas fa-clock"></i></button><button class="ibt dec" title="Ban"><i class="fas fa-gavel"></i></button>`;
  1491.       actions.children[0].onclick = () => kickUser(p.id);
  1492.       actions.children[1].onclick = () => timeoutUser(p.id, 5);
  1493.       actions.children[2].onclick = () => banUser(p.id);
  1494.       div.appendChild(actions); list.appendChild(div);
  1495.     });
  1496.     document.getElementById('admin-members-modal').style.display = 'flex';
  1497.   }
  1498.   async function kickUser(userId) { await sb.from('server_members').delete().match({ server_id: CS.id, user_id: userId }); toast('User kicked', 'success'); closeModal('admin-members-modal'); }
  1499.   async function timeoutUser(userId, minutes) {
  1500.     const ip    = await fetch('https://api.ipify.org?format=json').then(r => r.json()).then(d => d.ip).catch(() => null);
  1501.     const until = new Date(Date.now() + minutes * 60000).toISOString();
  1502.     await sb.from('timeouts').insert({ server_id: CS.id, user_id: userId, until, ip });
  1503.     toast(`User timed out for ${minutes} min`, 'success');
  1504.     if (userId === CU.id) checkTimeoutOrBan();
  1505.     closeModal('admin-members-modal');
  1506.   }
  1507.   async function banUser(userId) {
  1508.     const ip = await fetch('https://api.ipify.org?format=json').then(r => r.json()).then(d => d.ip).catch(() => null);
  1509.     await sb.from('bans').insert({ server_id: CS.id, user_id: userId, ip });
  1510.     await sb.from('server_members').delete().match({ server_id: CS.id, user_id: userId });
  1511.     toast('User banned', 'success');
  1512.     if (userId === CU.id) showDMHome();
  1513.     closeModal('admin-members-modal');
  1514.   }
  1515.   async function checkTimeoutOrBan() {
  1516.     if (!CS || !CU) return;
  1517.     const { data: ban } = await sb.from('bans').select('id').eq('server_id', CS.id).eq('user_id', CU.id).maybeSingle();
  1518.     if (ban) { toast('You are banned from this server', 'error'); showDMHome(); return; }
  1519.     const { data: timeout } = await sb.from('timeouts').select('until').eq('server_id', CS.id).eq('user_id', CU.id).gt('until', new Date().toISOString()).maybeSingle();
  1520.     const overlay = document.getElementById('timeout-overlay');
  1521.     const timerEl = document.getElementById('timeout-timer');
  1522.     if (timeoutInterval) clearInterval(timeoutInterval);
  1523.     if (timeout) {
  1524.       overlay.style.display = 'flex';
  1525.       const updateTimer = () => {
  1526.         const remaining = new Date(timeout.until) - new Date();
  1527.         if (remaining <= 0) { overlay.style.display = 'none'; clearInterval(timeoutInterval); timeoutInterval = null; return; }
  1528.         const mins = Math.floor(remaining / 60000); const secs = Math.floor((remaining % 60000) / 1000);
  1529.         timerEl.textContent = `${mins}:${secs.toString().padStart(2, '0')}`;
  1530.       };
  1531.       updateTimer(); timeoutInterval = setInterval(updateTimer, 1000);
  1532.     } else {
  1533.       overlay.style.display = 'none';
  1534.     }
  1535.   }
  1536.  
  1537.   // ==================== VIDEO CALL ====================
  1538.   // DUAL HANGUP APPROACH:
  1539.   // 1. GAS signalHangup — polled every 1.5s by BOTH sides from the moment a call starts
  1540.   // 2. Supabase video_calls.status = 'ended' — watched via realtime on BOTH sides
  1541.   // Either signal triggers vcHandleRemoteHangup() on the non-initiating side.
  1542.  
  1543.   function setupVideoCallSubscriptions() {
  1544.     if (!CU) return;
  1545.     if (vcCallSubscription) sb.removeChannel(vcCallSubscription).catch(() => {});
  1546.     vcCallSubscription = sb.channel('vc-incoming-' + CU.id)
  1547.       .on('postgres_changes',
  1548.         { event: 'INSERT', schema: 'public', table: 'video_calls', filter: `callee_id=eq.${CU.id}` },
  1549.         payload => {
  1550.           const call = payload.new;
  1551.           if (new Date() - new Date(call.created_at) > 60000) return;
  1552.           if (call.status === 'pending' && (!incomingCallData || incomingCallData.id !== call.id)) {
  1553.             showIncomingCallPopup(call);
  1554.           }
  1555.         }
  1556.       )
  1557.       .on('postgres_changes',
  1558.         { event: 'UPDATE', schema: 'public', table: 'video_calls', filter: `callee_id=eq.${CU.id}` },
  1559.         payload => {
  1560.           const call = payload.new;
  1561.           if (call.status === 'cancelled' && incomingCallData?.id === call.id) {
  1562.             hideIncomingPopup(); toast('Call cancelled', '');
  1563.           }
  1564.           // *** FIX: callee receives 'ended' via Supabase realtime ***
  1565.           if (call.status === 'ended' && vcCurrentCallId === call.id && vcCallActive) {
  1566.             vcHandleRemoteHangup();
  1567.           }
  1568.         }
  1569.       )
  1570.       .subscribe();
  1571.   }
  1572.  
  1573.   // Watch for the caller's call row being updated to 'ended' — covers callee hanging up
  1574.   function vcSubscribeCallStatus(callId) {
  1575.     if (vcStatusChannel) { sb.removeChannel(vcStatusChannel).catch(() => {}); vcStatusChannel = null; }
  1576.     vcStatusChannel = sb.channel('vc-status-' + callId)
  1577.       .on('postgres_changes',
  1578.         { event: 'UPDATE', schema: 'public', table: 'video_calls', filter: `id=eq.${callId}` },
  1579.         payload => {
  1580.           const s = payload.new.status;
  1581.           // Declined / missed — call never connected
  1582.           if ((s === 'declined' || s === 'missed') && !vcCallActive) {
  1583.             toast(s === 'declined' ? 'Call was declined' : 'No answer', '');
  1584.             vcHangUp(); return;
  1585.           }
  1586.           // *** FIX: caller receives 'ended' via Supabase realtime when callee hangs up ***
  1587.           if (s === 'ended' && vcCurrentCallId === callId && vcCallActive) {
  1588.             vcHandleRemoteHangup();
  1589.           }
  1590.         }
  1591.       ).subscribe();
  1592.   }
  1593.  
  1594.   async function cleanupStaleCalls() {
  1595.     if (!CU) return;
  1596.     const cutoff = new Date(Date.now() - 60000).toISOString();
  1597.     await sb.from('video_calls')
  1598.       .update({ status: 'missed' })
  1599.       .eq('callee_id', CU.id)
  1600.       .eq('status', 'pending')
  1601.       .lt('created_at', cutoff);
  1602.   }
  1603.   function startIncomingCallPolling() {
  1604.     if (incomingPollInterval) clearInterval(incomingPollInterval);
  1605.     incomingPollInterval = setInterval(async () => {
  1606.       if (!CU) return;
  1607.       const { data: calls } = await sb.from('video_calls')
  1608.         .select('*').eq('callee_id', CU.id).eq('status', 'pending')
  1609.         .gt('created_at', new Date(Date.now() - 60000).toISOString())
  1610.         .order('created_at', { ascending: false }).limit(1);
  1611.       if (calls?.length > 0) {
  1612.         const call = calls[0];
  1613.         if (!incomingCallData || incomingCallData.id !== call.id) showIncomingCallPopup(call);
  1614.       }
  1615.     }, 3000);
  1616.   }
  1617.   function showIncomingCallPopup(call) {
  1618.     incomingCallData = call;
  1619.     document.getElementById('incoming-title').textContent = 'Incoming Video Call';
  1620.     document.getElementById('incoming-sub').textContent   = `from ${call.caller_name || 'User'}`;
  1621.     const av = document.getElementById('incoming-avatar');
  1622.     av.innerHTML = call.caller_avatar
  1623.       ? `<img src="${call.caller_avatar}" style="width:100%;height:100%;object-fit:cover;border-radius:50%">`
  1624.       : (call.caller_name?.[0] || '?').toUpperCase();
  1625.     document.getElementById('incoming-call-popup').style.display = 'flex';
  1626.     setTimeout(() => {
  1627.       if (incomingCallData?.id === call.id) {
  1628.         hideIncomingPopup();
  1629.         sb.from('video_calls').update({ status: 'missed' }).eq('id', call.id).then(() => {});
  1630.       }
  1631.     }, 30000);
  1632.   }
  1633.   function hideIncomingPopup() {
  1634.     document.getElementById('incoming-call-popup').style.display = 'none';
  1635.     incomingCallData = null;
  1636.   }
  1637.   async function acceptIncomingCall() {
  1638.     if (!incomingCallData) return;
  1639.     const call = incomingCallData;
  1640.     hideIncomingPopup();
  1641.     await sb.from('video_calls').update({ status: 'accepted' }).eq('id', call.id);
  1642.     vcCurrentCallId   = call.id;
  1643.     vcCurrentGasCode  = call.gas_room_code;
  1644.     vcCurrentPeerId   = call.caller_id;
  1645.     vcCurrentPeerName = call.caller_name;
  1646.     vcIsCaller        = false;
  1647.     vcHangupSignalled = false;
  1648.     vcIsHangingUp     = false;
  1649.     document.getElementById('vc-peer-name').textContent = vcCurrentPeerName;
  1650.     if (!vcCurrentGasCode) { toast('No room code found in call', 'error'); return; }
  1651.     const granted = await requestVideoCallPermissions();
  1652.     if (!granted) { vcHangUp(); return; }
  1653.     openVideoCallModal();
  1654.     await setupVcPeerConnection();
  1655.     // Start hangup polling immediately — don't wait for ontrack
  1656.     vcStartHangupPoll();
  1657.     vcPollForOffer();
  1658.     // *** FIX: callee subscribes to Supabase status updates too ***
  1659.     vcSubscribeCallStatus(call.id);
  1660.   }
  1661.   function declineIncomingCall() {
  1662.     if (incomingCallData) {
  1663.       sb.from('video_calls').update({ status: 'declined' }).eq('id', incomingCallData.id).then(() => {});
  1664.       hideIncomingPopup();
  1665.     }
  1666.   }
  1667.   async function initiateVideoCall() {
  1668.     if (!CU) return;
  1669.     if (!(VIEW === 'dm' && CDM)) { toast('Video calls are only available in DMs', 'error'); return; }
  1670.     const callBtn  = document.getElementById('start-video-call-btn');
  1671.     const origHTML = callBtn.innerHTML;
  1672.     callBtn.disabled = true;
  1673.     callBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  1674.     const showStartingPopup = () => {
  1675.       const existing = document.getElementById('vc-starting-popup');
  1676.       if (existing) existing.remove();
  1677.       const popup = document.createElement('div');
  1678.       popup.id = 'vc-starting-popup';
  1679.       popup.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--bg-sidebar);border:1px solid var(--accent);border-radius:10px;padding:14px 22px;z-index:700;font-size:13px;font-weight:600;color:var(--text-primary);box-shadow:0 8px 24px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;';
  1680.       popup.innerHTML = '<div class="spinner" style="width:18px;height:18px;border-width:2px"></div> Starting call with ' + CDM.username + '…';
  1681.       document.body.appendChild(popup);
  1682.     };
  1683.     const hideStartingPopup = () => { const p = document.getElementById('vc-starting-popup'); if (p) p.remove(); };
  1684.     const resetBtn = () => { callBtn.disabled = false; callBtn.innerHTML = origHTML; };
  1685.     showStartingPopup();
  1686.     const granted = await requestVideoCallPermissions();
  1687.     if (!granted) { hideStartingPopup(); resetBtn(); return; }
  1688.     let gasData;
  1689.     try { gasData = await gasApi('generateRoomCode'); }
  1690.     catch (e) { toast('Failed to get room code', 'error'); hideStartingPopup(); resetBtn(); return; }
  1691.     const code = gasData?.code;
  1692.     if (!code) { toast('Failed to get room code', 'error'); hideStartingPopup(); resetBtn(); return; }
  1693.     const { data: call, error } = await sb.from('video_calls').insert({
  1694.       caller_id:     CU.id,
  1695.       callee_id:     CDM.id,
  1696.       caller_name:   CU.username,
  1697.       caller_avatar: CU.avatar_url,
  1698.       gas_room_code: code,
  1699.       status:        'pending'
  1700.     }).select().single();
  1701.     if (error) { toast('Failed to start call', 'error'); hideStartingPopup(); resetBtn(); return; }
  1702.     hideStartingPopup();
  1703.     resetBtn();
  1704.     vcCurrentCallId   = call.id;
  1705.     vcCurrentGasCode  = code;
  1706.     vcCurrentPeerId   = CDM.id;
  1707.     vcCurrentPeerName = CDM.username;
  1708.     vcIsCaller        = true;
  1709.     vcHangupSignalled = false;
  1710.     vcIsHangingUp     = false;
  1711.     document.getElementById('vc-peer-name').textContent = CDM.username;
  1712.     openVideoCallModal();
  1713.     document.getElementById('vc-status').textContent = 'Waiting for peer to join...';
  1714.     await setupVcPeerConnection();
  1715.     await vcCreateAndSendOffer();
  1716.     // Start hangup polling immediately — don't wait for ontrack
  1717.     vcStartHangupPoll();
  1718.     vcPollForAnswer();
  1719.     // *** FIX: caller subscribes to Supabase status updates ***
  1720.     vcSubscribeCallStatus(call.id);
  1721.   }
  1722.  
  1723.   async function requestVideoCallPermissions() {
  1724.     if (vcLocalStream) return true;
  1725.     try {
  1726.       vcLocalStream = await navigator.mediaDevices.getUserMedia({
  1727.         video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: 'user' },
  1728.         audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
  1729.       });
  1730.       const lv = document.getElementById('vc-local-video');
  1731.       lv.srcObject = vcLocalStream; lv.muted = true;
  1732.       await lv.play().catch(e => console.warn('local play:', e));
  1733.       return true;
  1734.     } catch (err) {
  1735.       toast('Camera/mic access denied', 'error');
  1736.       return false;
  1737.     }
  1738.   }
  1739.   function openVideoCallModal() {
  1740.     document.getElementById('video-call-modal').style.display = 'flex';
  1741.     document.getElementById('vc-status').textContent           = 'Connecting...';
  1742.     document.getElementById('vc-remote-overlay').style.display = 'flex';
  1743.     document.getElementById('vc-remote-label').textContent     = vcCurrentPeerName || 'Remote';
  1744.     vcAudioMuted   = false; vcVideoStopped = false;
  1745.     document.getElementById('vc-mute-btn').innerHTML  = '<i class="fas fa-microphone"></i> Mute';
  1746.     document.getElementById('vc-video-btn').innerHTML = '<i class="fas fa-video"></i> Stop Video';
  1747.     document.getElementById('vc-mute-btn').classList.remove('active');
  1748.     document.getElementById('vc-video-btn').classList.remove('active');
  1749.   }
  1750.   async function setupVcPeerConnection() {
  1751.     if (vcPeerConnection) { try { vcPeerConnection.close(); } catch (e) {} vcPeerConnection = null; }
  1752.     vcPeerConnection = new RTCPeerConnection(ICE_CONFIG);
  1753.     vcLocalStream.getTracks().forEach(t => vcPeerConnection.addTrack(t, vcLocalStream));
  1754.     vcPeerConnection.ontrack = event => {
  1755.       const rv = document.getElementById('vc-remote-video');
  1756.       if (rv.srcObject !== event.streams[0]) {
  1757.         rv.srcObject = event.streams[0];
  1758.         rv.play().catch(e => console.warn('remote play:', e));
  1759.         document.getElementById('vc-remote-overlay').style.display = 'none';
  1760.         document.getElementById('vc-status').textContent = 'Connected';
  1761.         vcCallActive = true;
  1762.       }
  1763.     };
  1764.     vcPeerConnection.onicecandidate = event => {
  1765.       if (event.candidate) {
  1766.         vcIceBatchQueue.push(JSON.stringify(event.candidate));
  1767.         if (vcIceBatchTimer) clearTimeout(vcIceBatchTimer);
  1768.         vcIceBatchTimer = setTimeout(vcFlushIceBatch, VC_ICE_BATCH_MS);
  1769.       } else {
  1770.         if (vcIceBatchQueue.length) vcFlushIceBatch();
  1771.       }
  1772.     };
  1773.     vcPeerConnection.oniceconnectionstatechange = () => {
  1774.       const s = vcPeerConnection?.iceConnectionState;
  1775.       if (!s) return;
  1776.       if (s === 'connected' || s === 'completed') { document.getElementById('vc-status').textContent = 'Connected'; vcCallActive = true; }
  1777.       if (s === 'failed')       document.getElementById('vc-status').textContent = 'Connection failed';
  1778.       if (s === 'disconnected') document.getElementById('vc-status').textContent = 'Connection dropped…';
  1779.     };
  1780.   }
  1781.  
  1782.   // *** FIXED: Start hangup polling immediately when call starts, on BOTH sides ***
  1783.   // This polls GAS every 1.5s looking for the hangup flag set by whichever side ends the call.
  1784.   function vcStartHangupPoll() {
  1785.     if (vcHangupPollTimer) { clearInterval(vcHangupPollTimer); vcHangupPollTimer = null; }
  1786.     vcHangupPollTimer = setInterval(async () => {
  1787.       if (!vcCurrentGasCode) { clearInterval(vcHangupPollTimer); vcHangupPollTimer = null; return; }
  1788.       try {
  1789.         const data = await gasApi('getRoomData', { code: vcCurrentGasCode });
  1790.         if (data && data.hangup === true) {
  1791.           clearInterval(vcHangupPollTimer); vcHangupPollTimer = null;
  1792.           if (!vcIsHangingUp) vcHandleRemoteHangup();
  1793.         }
  1794.       } catch (e) { /* network blip — keep polling */ }
  1795.     }, VC_POLL_INTERVAL);
  1796.   }
  1797.  
  1798.   function vcFlushIceBatch() {
  1799.     if (!vcIceBatchQueue.length || !vcCurrentGasCode) return;
  1800.     const batch = [...vcIceBatchQueue]; vcIceBatchQueue = [];
  1801.     gasApi(vcIsCaller ? 'addCallerCandidates' : 'addCalleeCandidate', {
  1802.       code: vcCurrentGasCode, candidates: batch
  1803.     }).catch(e => console.warn('[VC] ICE flush error:', e));
  1804.   }
  1805.   async function vcCreateAndSendOffer() {
  1806.     const offer = await vcPeerConnection.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true });
  1807.     await vcPeerConnection.setLocalDescription(offer);
  1808.     await gasApi('storeOffer', { code: vcCurrentGasCode, offer: JSON.stringify(offer) });
  1809.     document.getElementById('vc-status').textContent = 'Waiting for peer...';
  1810.   }
  1811.   function vcPollForAnswer() {
  1812.     let count = 0;
  1813.     vcPollTimer = setInterval(async () => {
  1814.       if (++count > VC_MAX_POLL) { clearInterval(vcPollTimer); vcPollTimer = null; toast('Call timed out', ''); vcHangUp(); return; }
  1815.       try {
  1816.         const data = await gasApi('getRoomData', { code: vcCurrentGasCode });
  1817.         if (!data || !vcPeerConnection) return;
  1818.         if (data.answer && !vcPeerConnection.remoteDescription) {
  1819.           await vcPeerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(data.answer)));
  1820.         }
  1821.         if (vcPeerConnection.remoteDescription && data.calleeCandidates?.length > vcKnownCalleeIce) {
  1822.           const fresh = data.calleeCandidates.slice(vcKnownCalleeIce);
  1823.           for (const c of fresh) { try { await vcPeerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(c))); } catch (e) {} }
  1824.           vcKnownCalleeIce = data.calleeCandidates.length;
  1825.         }
  1826.         if (vcCallActive) { clearInterval(vcPollTimer); vcPollTimer = null; }
  1827.       } catch (e) { console.warn('[VC] answer poll error:', e); }
  1828.     }, VC_POLL_INTERVAL);
  1829.   }
  1830.   function vcPollForOffer() {
  1831.     let count = 0;
  1832.     document.getElementById('vc-status').textContent = 'Waiting for host...';
  1833.     vcPollTimer = setInterval(async () => {
  1834.       if (++count > VC_MAX_POLL) { clearInterval(vcPollTimer); vcPollTimer = null; toast('Call timed out', ''); vcHangUp(); return; }
  1835.       try {
  1836.         const data = await gasApi('getRoomData', { code: vcCurrentGasCode });
  1837.         if (!data || !vcPeerConnection) return;
  1838.         if (data.offer && !vcPeerConnection.remoteDescription) {
  1839.           await vcPeerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(data.offer)));
  1840.           const answer = await vcPeerConnection.createAnswer();
  1841.           await vcPeerConnection.setLocalDescription(answer);
  1842.           await gasApi('storeAnswer', { code: vcCurrentGasCode, answer: JSON.stringify(answer) });
  1843.           document.getElementById('vc-status').textContent = 'Connecting...';
  1844.         }
  1845.         if (vcPeerConnection.remoteDescription && data.callerCandidates?.length > vcKnownCallerIce) {
  1846.           const fresh = data.callerCandidates.slice(vcKnownCallerIce);
  1847.           for (const c of fresh) { try { await vcPeerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(c))); } catch (e) {} }
  1848.           vcKnownCallerIce = data.callerCandidates.length;
  1849.         }
  1850.         if (vcCallActive) { clearInterval(vcPollTimer); vcPollTimer = null; }
  1851.       } catch (e) { console.warn('[VC] offer poll error:', e); }
  1852.     }, VC_POLL_INTERVAL);
  1853.   }
  1854.  
  1855.   // Called on the REMOTE side when the other peer ends the call
  1856.   function vcHandleRemoteHangup() {
  1857.     if (vcIsHangingUp) return;  // prevent double execution
  1858.     vcIsHangingUp = true;
  1859.     vcCallActive  = false;
  1860.     toast('Call ended by ' + (vcCurrentPeerName || 'peer'), '');
  1861.     vcCleanupTimers();
  1862.     vcCleanupMedia();
  1863.     document.getElementById('video-call-modal').style.display = 'none';
  1864.     vcResetState();
  1865.   }
  1866.  
  1867.   // *** FIXED vcHangUp: signals BEFORE cleanup so state is still intact ***
  1868.   async function vcHangUp() {
  1869.     if (vcIsHangingUp) return;  // prevent double execution
  1870.     vcIsHangingUp = true;
  1871.  
  1872.     // Capture values BEFORE any cleanup nulls them
  1873.     const callId  = vcCurrentCallId;
  1874.     const gasCode = vcCurrentGasCode;
  1875.  
  1876.     // Close modal immediately for responsiveness
  1877.     document.getElementById('video-call-modal').style.display = 'none';
  1878.  
  1879.     // Stop all timers so we don't react to our own hangup signal
  1880.     vcCleanupTimers();
  1881.  
  1882.     // *** SIGNAL the remote peer via BOTH channels BEFORE media cleanup ***
  1883.     // 1. GAS hangup flag — the other peer's vcHangupPollTimer will pick this up
  1884.     if (gasCode && !vcHangupSignalled) {
  1885.       vcHangupSignalled = true;
  1886.       try { await gasApi('signalHangup', { code: gasCode }); } catch (e) { console.warn('[VC] GAS hangup signal failed:', e); }
  1887.       // Delete the room after a short delay so the other peer has time to read the flag
  1888.       setTimeout(() => gasApi('deleteRoom', { code: gasCode }).catch(() => {}), 5000);
  1889.     }
  1890.     // 2. Supabase status = 'ended' — the other peer's vcSubscribeCallStatus listener picks this up
  1891.     if (callId) {
  1892.       try { await sb.from('video_calls').update({ status: 'ended' }).eq('id', callId); } catch (e) { console.warn('[VC] Supabase hangup signal failed:', e); }
  1893.     }
  1894.  
  1895.     // Now clean up local media and state
  1896.     vcCleanupMedia();
  1897.     vcResetState();
  1898.     toast('Call ended', '');
  1899.   }
  1900.  
  1901.   // Split cleanup into timers + media so we can call them independently
  1902.   function vcCleanupTimers() {
  1903.     if (vcPollTimer)       { clearInterval(vcPollTimer);       vcPollTimer       = null; }
  1904.     if (vcHangupPollTimer) { clearInterval(vcHangupPollTimer); vcHangupPollTimer = null; }
  1905.     if (vcIceBatchTimer)   { clearTimeout(vcIceBatchTimer);    vcIceBatchTimer   = null; }
  1906.     if (vcStatusChannel)   { sb.removeChannel(vcStatusChannel).catch(() => {}); vcStatusChannel = null; }
  1907.   }
  1908.   function vcCleanupMedia() {
  1909.     if (vcLocalStream)     { vcLocalStream.getTracks().forEach(t => t.stop()); vcLocalStream = null; }
  1910.     if (vcPeerConnection)  { try { vcPeerConnection.close(); } catch (e) {} vcPeerConnection = null; }
  1911.     const lv = document.getElementById('vc-local-video');  if (lv)  lv.srcObject  = null;
  1912.     const rv = document.getElementById('vc-remote-video'); if (rv)  rv.srcObject  = null;
  1913.   }
  1914.   function vcResetState() {
  1915.     vcCurrentCallId   = null;
  1916.     vcCurrentGasCode  = null;
  1917.     vcCurrentPeerId   = null;
  1918.     vcCurrentPeerName = '';
  1919.     vcCallActive      = false;
  1920.     vcHangupSignalled = false;
  1921.     vcIsHangingUp     = false;
  1922.     vcIceBatchQueue   = [];
  1923.     vcKnownCallerIce  = 0;
  1924.     vcKnownCalleeIce  = 0;
  1925.   }
  1926.  
  1927.   function vcToggleMute() {
  1928.     if (!vcLocalStream) return;
  1929.     vcAudioMuted = !vcAudioMuted;
  1930.     vcLocalStream.getAudioTracks().forEach(t => t.enabled = !vcAudioMuted);
  1931.     const btn = document.getElementById('vc-mute-btn');
  1932.     btn.innerHTML = vcAudioMuted ? '<i class="fas fa-microphone-slash"></i> Unmute' : '<i class="fas fa-microphone"></i> Mute';
  1933.     btn.classList.toggle('active', vcAudioMuted);
  1934.   }
  1935.   function vcToggleVideo() {
  1936.     if (!vcLocalStream) return;
  1937.     vcVideoStopped = !vcVideoStopped;
  1938.     vcLocalStream.getVideoTracks().forEach(t => t.enabled = !vcVideoStopped);
  1939.     const btn = document.getElementById('vc-video-btn');
  1940.     btn.innerHTML = vcVideoStopped ? '<i class="fas fa-video-slash"></i> Start Video' : '<i class="fas fa-video"></i> Stop Video';
  1941.     btn.classList.toggle('active', vcVideoStopped);
  1942.   }
  1943.  
  1944.   // ==================== UI HELPERS ====================
  1945.   function showWelcome()      { stopMsgPoll(); document.getElementById('welcome-screen').style.display = 'flex'; document.getElementById('chat-view').style.display = 'none'; document.getElementById('friends-view').style.display = 'none'; }
  1946.   function showChatView()     { document.getElementById('welcome-screen').style.display = 'none'; document.getElementById('chat-view').style.display = 'flex'; document.getElementById('friends-view').style.display = 'none'; }
  1947.   function showFriendsPanel() { document.getElementById('welcome-screen').style.display = 'none'; document.getElementById('chat-view').style.display = 'none'; document.getElementById('friends-view').style.display = 'flex'; }
  1948.   function closeModal(id)     { document.getElementById(id).style.display = 'none'; }
  1949.   function openLightbox(url)  { document.getElementById('lb-img').src = url; document.getElementById('lightbox').style.display = 'flex'; }
  1950.   function closeLightbox()    { document.getElementById('lightbox').style.display = 'none'; }
  1951.   function openHTMLDemo(url, name) { document.getElementById('demo-title').textContent = '▶ ' + (name || 'HTML File'); document.getElementById('demo-iframe').src = url; document.getElementById('demo-modal').style.display = 'flex'; }
  1952.   async function openCSVPreview(url, name) {
  1953.     document.getElementById('csv-title').textContent = '📊 ' + (name || 'CSV File');
  1954.     const wrap = document.getElementById('csv-wrap');
  1955.     wrap.innerHTML = '<div style="padding:20px;color:var(--text-muted)">Loading...</div>';
  1956.     document.getElementById('csv-modal').style.display = 'flex';
  1957.     try {
  1958.       const text = await (await fetch(url)).text();
  1959.       const rows = text.trim().split('\n').map(r => {
  1960.         const cells = []; let cur = '', inQ = false;
  1961.         for (let c of r) { if (c === '"') inQ = !inQ; else if (c === ',' && !inQ) { cells.push(cur.trim()); cur = ''; } else cur += c; }
  1962.         cells.push(cur.trim()); return cells;
  1963.       });
  1964.       const heads = rows[0] || []; const body = rows.slice(1, 51);
  1965.       wrap.innerHTML = `<table class="csv-tbl"><thead><tr>${heads.map(h => `<th>${h}</th>`).join('')}</tr></thead><tbody>${body.map(r => `<tr>${r.map(c => `<td>${c}</td>`).join('')}</tr>`).join('')}</tbody></table>${rows.length > 51 ? `<div style="padding:7px;font-size:10px;color:var(--text-muted)">Showing first 50 of ${rows.length - 1} rows</div>` : ''}`;
  1966.     } catch { wrap.innerHTML = '<div style="padding:20px;color:var(--red)">Failed to load CSV.</div>'; }
  1967.   }
  1968.   async function refreshAllVisibleAvatars() {
  1969.     if (VIEW === 'dm' && CDM)          await openDM(CDM);
  1970.     else if (VIEW === 'channel' && CC) await selectChannel(CC);
  1971.     else if (VIEW === 'home')          await loadDMSidebar();
  1972.   }
  1973.   function initContextMenu() {
  1974.     const menu = document.getElementById('ctx-menu');
  1975.     document.addEventListener('contextmenu', e => {
  1976.       const img = e.target.closest('.msg-img');
  1977.       if (!img) return;
  1978.       e.preventDefault(); currentContextTarget = img.src;
  1979.       menu.style.display = 'block'; menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px';
  1980.     });
  1981.     document.addEventListener('click', () => menu.style.display = 'none');
  1982.     menu.addEventListener('click', e => {
  1983.       const action = e.target.dataset.action;
  1984.       if (action === 'download' && currentContextTarget) { const a = document.createElement('a'); a.href = currentContextTarget; a.download = ''; a.click(); }
  1985.       else if (action === 'copy-link' && currentContextTarget) { navigator.clipboard?.writeText(currentContextTarget); toast('Link copied!', 'success'); }
  1986.       menu.style.display = 'none';
  1987.     });
  1988.   }
  1989.   document.querySelectorAll('#settings-modal .modal-tab').forEach(tab => {
  1990.     tab.addEventListener('click', () => {
  1991.       const stab = tab.dataset.stab;
  1992.       document.querySelectorAll('#settings-modal .modal-tab').forEach(t => t.classList.remove('active'));
  1993.       tab.classList.add('active');
  1994.       document.querySelectorAll('#settings-modal .stab-content').forEach(c => c.style.display = 'none');
  1995.       document.getElementById(`stab-${stab}`).style.display = 'block';
  1996.       if (stab === 'blocked') renderBlockedList();
  1997.     });
  1998.   });
  1999.   document.addEventListener('keydown', e => {
  2000.     if (e.key === 'Escape') {
  2001.       closeLightbox();
  2002.       ['demo-modal','csv-modal','server-modal','channel-modal','server-settings-modal','settings-modal','gif-modal','admin-members-modal','invite-server-modal'].forEach(id => {
  2003.         const el = document.getElementById(id);
  2004.         if (el && el.style.display !== 'none') closeModal(id);
  2005.       });
  2006.       // ESC on video call modal = hang up
  2007.       const vcm = document.getElementById('video-call-modal');
  2008.       if (vcm && vcm.style.display !== 'none') vcHangUp();
  2009.     }
  2010.   });
  2011.   window.addEventListener('beforeunload', () => {
  2012.     // Fire hangup signals synchronously on page close
  2013.     if (vcCurrentCallId || vcCurrentGasCode) {
  2014.       const callId  = vcCurrentCallId;
  2015.       const gasCode = vcCurrentGasCode;
  2016.       if (gasCode && !vcHangupSignalled) {
  2017.         vcHangupSignalled = true;
  2018.         navigator.sendBeacon && navigator.sendBeacon(GAS_URL, JSON.stringify({ action: 'signalHangup', code: gasCode }));
  2019.       }
  2020.       if (callId) {
  2021.         // Best-effort — may not complete on unload
  2022.         sb.from('video_calls').update({ status: 'ended' }).eq('id', callId).catch(() => {});
  2023.       }
  2024.     }
  2025.     if (msgSub)             sb.removeChannel(msgSub).catch(() => {});
  2026.     if (pBadgeTimer)        clearInterval(pBadgeTimer);
  2027.     if (msgPollTimer)       clearInterval(msgPollTimer);
  2028.     if (timeoutInterval)    clearInterval(timeoutInterval);
  2029.     if (vcCallSubscription) sb.removeChannel(vcCallSubscription).catch(() => {});
  2030.     if (vcStatusChannel)    sb.removeChannel(vcStatusChannel).catch(() => {});
  2031.     if (activityInterval)   clearInterval(activityInterval);
  2032.     if (incomingPollInterval) clearInterval(incomingPollInterval);
  2033.   });
  2034.   init();
  2035. </script>
  2036. </body>
  2037. </html>