Hugging Face's logo

Spaces:
Sebebeb
/
SecureChat
Sleeping

App Files Community
SecureChat
File size: 27,979 Bytes
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4773cef
 
 
 
73d7d26
 
 
4773cef
 
73d7d26
 
 
4773cef
73d7d26
 
c89717a
 
73d7d26
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
 
eeb3363
4773cef
73d7d26
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
4773cef
73d7d26
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
4773cef
73d7d26
 
4773cef
73d7d26
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
4773cef
73d7d26
 
 
4773cef
73d7d26
 
 
4773cef
73d7d26
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4773cef
 
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c89717a
 
 
 
76078c0
c89717a
 
 
 
73d7d26
 
 
 
c89717a
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
4773cef
 
 
73d7d26
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
1e13409
 
 
4773cef
 
1e13409
4773cef
1e13409
 
73d7d26
 
 
4773cef
73d7d26
 
 
 
 
 
 
 
 
 
4773cef
73d7d26
 
 
 
 
 
c89717a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76078c0
c89717a
fb8eda3
 
 
 
 
 
76078c0
c89717a
fb8eda3
 
 
c89717a
 
 
 
 
 
 
 
 
73d7d26
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SecureChat</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    * { font-family: 'Inter', sans-serif; }
    body { background: #0f0f13; color: #e4e4f0; }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 4px; }
    .glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); }
    .glass-btn { background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); }
    .glass-btn:hover { background: rgba(255,255,255,0.12); }
    .glass-btn-active { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); }
    .msg-bubble { word-break: break-word; overflow-wrap: break-word; }
    .fade-in { animation: fadeIn 0.2s ease; }
    @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
    .sidebar-item:hover { background: rgba(255,255,255,0.06); }
    .sidebar-item.active { background: rgba(255,255,255,0.08); border-left: 2px solid rgba(255,255,255,0.3); }
    .typing-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.5); animation: bounce 1.2s infinite; }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-6px); } }
    .unread-badge { background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); }
    #app { display:none; }
    #auth { display:flex; }
    #call-dropdown { bottom: 100%; margin-bottom: 0.5rem; }
    #call-dropdown.hidden { display: none; }
  </style>
</head>
<body class="h-screen overflow-hidden">

<!-- AUTH SCREEN -->
<div id="auth" class="h-screen items-center justify-center bg-gradient-to-br from-[#0f0f13] via-[#13131f] to-[#0f0f13]">
  <div class="w-full max-w-md px-4">
    <div class="text-center mb-10">
      <div class="inline-flex items-center gap-2 mb-3">
        <div class="w-9 h-9 rounded-xl glass-btn flex items-center justify-center text-white font-bold text-lg">S</div>
        <span class="text-2xl font-semibold tracking-tight">SecureChat</span>
      </div>
      <p class="text-sm text-gray-400">End-to-end encrypted messaging</p>
    </div>

    <div class="glass rounded-2xl p-8 shadow-2xl">
      <!-- Tabs -->
      <div id="auth-tabs" class="flex gap-1 mb-6 bg-white/5 p-1 rounded-xl">
        <button onclick="showTab('login')" id="tab-login" class="flex-1 py-2 rounded-lg text-sm font-medium transition-all glass-btn-active text-white">Sign In</button>
        <button onclick="showTab('register')" id="tab-register" class="flex-1 py-2 rounded-lg text-sm font-medium transition-all text-gray-400">Create Account</button>
      </div>

      <!-- Login Form -->
      <div id="form-login">
        <div class="space-y-4">
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label>
            <input id="login-username" type="text" placeholder="your_username" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Password</label>
            <input id="login-password" type="password" placeholder="••••••••" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <p id="login-error" class="text-red-400 text-xs hidden"></p>
          <button id="login-btn" onclick="doLogin()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Sign In</button>
        </div>
        <div class="relative my-5">
          <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-white/10"></div></div>
          <div class="relative flex justify-center text-xs text-gray-500"><span class="bg-[#1a1a26] px-3">or continue with</span></div>
        </div>
        <button onclick="googleLogin()" class="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 transition-colors text-white font-medium py-3 rounded-xl text-sm">
          <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
          Continue with Google
        </button>
      </div>

      <!-- Google Setup Form -->
      <div id="form-google-setup" class="hidden">
        <div class="space-y-4">
          <p class="text-sm text-gray-300 text-center">Complete your account</p>
          <p class="text-xs text-gray-500 text-center">Choose a username and display name to finish signing up with Google.</p>
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Display Name</label>
            <input id="gs-display" type="text" placeholder="John Doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label>
            <input id="gs-username" type="text" placeholder="john_doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <p id="gs-error" class="text-red-400 text-xs hidden"></p>
          <button id="gs-btn" onclick="completeGoogleSetup()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Create Account</button>
        </div>
      </div>

      <!-- Register Form -->
      <div id="form-register" class="hidden">
        <div class="space-y-4">
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Display Name</label>
            <input id="reg-display" type="text" placeholder="John Doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label>
            <input id="reg-username" type="text" placeholder="john_doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Email (optional)</label>
            <input id="reg-email" type="email" placeholder="john@example.com" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <div>
            <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Password</label>
            <input id="reg-password" type="password" placeholder="Min. 8 characters" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" />
          </div>
          <p id="reg-error" class="text-red-400 text-xs hidden"></p>
          <button id="reg-btn" onclick="doRegister()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Create Account</button>
        </div>
        <div class="relative my-5">
          <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-white/10"></div></div>
          <div class="relative flex justify-center text-xs text-gray-500"><span class="bg-[#1a1a26] px-3">or continue with</span></div>
        </div>
        <button onclick="googleLogin()" class="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 transition-colors text-white font-medium py-3 rounded-xl text-sm">
          <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
          Continue with Google
        </button>
      </div>
    </div>
    <p class="text-center text-xs text-gray-600 mt-4">🔒 All messages are end-to-end encrypted. No one can read them, not even us.</p>
  </div>
</div>

<!-- MAIN APP -->
<div id="app" class="h-screen flex bg-[#0f0f13]">
  <!-- Sidebar -->
  <div class="w-72 flex flex-col glass border-r border-white/5 shrink-0">
    <!-- Header -->
    <div class="p-4 border-b border-white/5">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-lg glass-btn flex items-center justify-center text-white font-bold text-sm">S</div>
          <span class="font-semibold text-sm">SecureChat</span>
        </div>
        <div class="flex gap-1">
          <button onclick="showNewChat()" title="New DM" class="w-7 h-7 rounded-lg hover:bg-white/10 flex items-center justify-center text-gray-400 hover:text-white transition-colors text-lg">＋</button>
          <button onclick="showSettings()" title="Settings" class="w-7 h-7 rounded-lg hover:bg-white/10 flex items-center justify-center transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <div class="flex gap-1 mx-3 mt-3">
      <button onclick="setTab('dms')" id="tab-dms" class="flex-1 text-xs py-1.5 rounded-lg glass-btn-active text-white font-medium">DMs</button>
      <button onclick="setTab('groups')" id="tab-groups" class="flex-1 text-xs py-1.5 rounded-lg text-gray-400 hover:text-white transition-colors">Groups</button>
    </div>

    <!-- Search -->
    <div class="px-3 mt-3">
      <input id="sidebar-search" oninput="filterChats()" type="text" placeholder="Search…" class="w-full bg-white/5 border border-white/8 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-white/30 transition-colors text-gray-300 placeholder-gray-600" />
    </div>

    <!-- Chat list -->
    <div id="chat-list" class="flex-1 overflow-y-auto mt-2 px-2"></div>

    <!-- New Group button -->
    <div class="p-3 border-t border-white/5">
      <button onclick="showNewGroup()" class="w-full text-xs text-gray-400 hover:text-white py-2 rounded-lg hover:bg-white/5 transition-colors flex items-center justify-center gap-2">
        <span>+ New Group</span>
      </button>
    </div>

    <!-- Current user -->
    <div class="p-3 border-t border-white/5">
      <div class="flex items-center gap-3">
        <div id="my-avatar" class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"></div>
        <div class="flex-1 min-w-0">
          <p id="my-display-name" class="text-sm font-medium truncate"></p>
          <p id="my-username" class="text-xs text-gray-500 truncate"></p>
        </div>
        <button onclick="logout()" class="text-gray-500 hover:text-red-400 transition-colors" title="Logout">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Chat area -->
  <div class="flex-1 flex flex-col min-w-0">
    <!-- Empty state -->
    <div id="empty-state" class="flex-1 flex items-center justify-center">
      <div class="text-center">
        <div class="w-16 h-16 rounded-2xl glass-btn flex items-center justify-center mx-auto mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
        </div>
        <p class="text-gray-400 text-sm">Select a conversation or start a new one</p>
        <p class="text-gray-600 text-xs mt-1">All messages are end-to-end encrypted 🔒</p>
      </div>
    </div>

    <!-- Chat window -->
    <div id="chat-window" class="hidden flex-1 flex flex-col min-h-0">
      <!-- Chat header -->
      <div class="px-6 py-4 border-b border-white/5 glass flex items-center gap-3">
        <div id="chat-avatar" class="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"></div>
        <div class="flex-1 min-w-0">
          <p id="chat-name" class="font-medium text-sm"></p>
          <p id="chat-sub" class="text-xs text-gray-500"></p>
        </div>
        <div class="flex items-center gap-1">
          <div class="relative">
            <button onclick="showCallDropdown()" id="call-btn" class="p-1.5 rounded-lg hover:bg-white/10 transition-colors hidden" title="Call">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
            </button>
            <div id="call-dropdown" class="hidden absolute right-0 top-full mt-2 glass rounded-xl py-1 min-w-[140px] shadow-2xl z-50">
              <button onclick="startCall('video')" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors">📹 Video Call</button>
              <button onclick="startCall('audio')" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors">📞 Audio Call</button>
            </div>
          </div>
          <span class="text-xs text-gray-600 flex items-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-green-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
            E2EE
          </span>
          <button id="group-settings-btn" onclick="showGroupSettings()" class="hidden p-1.5 rounded-lg hover:bg-white/10 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
          </button>
        </div>
      </div>

      <!-- Messages -->
      <div id="messages" class="flex-1 overflow-y-auto p-6 space-y-2"></div>

      <!-- Typing indicator -->
      <div id="typing-indicator" class="hidden px-6 py-2">
        <div class="flex items-center gap-2">
          <div class="flex gap-1"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>
          <span id="typing-text" class="text-xs text-gray-500"></span>
        </div>
      </div>

      <!-- Input -->
      <div class="p-4 border-t border-white/5">
        <div class="flex items-end gap-3 glass rounded-2xl px-4 py-3">
          <textarea id="msg-input" onkeydown="handleKey(event)" oninput="handleTyping()" rows="1" placeholder="Type a message…" class="flex-1 bg-transparent resize-none text-sm focus:outline-none text-gray-200 placeholder-gray-600 max-h-32" style="min-height:20px"></textarea>
          <button onclick="sendMessage()" class="w-8 h-8 rounded-full glass-btn flex items-center justify-center transition-colors shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- MODALS -->
<!-- New Chat Modal -->
<div id="modal-new-chat" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
  <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl">
    <h3 class="font-semibold mb-4">New Direct Message</h3>
    <input id="search-user-input" oninput="searchUsers()" type="text" placeholder="Search users by username…" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 mb-4" />
    <div id="user-search-results" class="space-y-1 max-h-60 overflow-y-auto"></div>
    <button onclick="closeModal('modal-new-chat')" class="mt-4 w-full text-sm text-gray-500 hover:text-white py-2 transition-colors">Cancel</button>
  </div>
</div>

<!-- New Group Modal -->
<div id="modal-new-group" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
  <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl">
    <h3 class="font-semibold mb-4">Create Group</h3>
    <div class="space-y-3">
      <input id="group-name-input" type="text" placeholder="Group name" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" />
      <input id="group-desc-input" type="text" placeholder="Description (optional)" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" />
      <input id="group-search-input" oninput="searchGroupUsers()" type="text" placeholder="Add members by username…" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" />
      <div id="group-search-results" class="space-y-1 max-h-40 overflow-y-auto"></div>
      <div id="group-members-list" class="flex flex-wrap gap-2"></div>
    </div>
    <div class="flex gap-3 mt-5">
      <button onclick="closeModal('modal-new-group')" class="flex-1 text-sm text-gray-500 hover:text-white py-2 transition-colors">Cancel</button>
      <button onclick="createGroup()" class="flex-1 glass-btn text-white text-sm py-2 rounded-xl transition-colors font-medium">Create</button>
    </div>
  </div>
</div>

<!-- Settings Modal -->
<div id="modal-settings" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
  <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl">
    <h3 class="font-semibold mb-6">Settings</h3>
    <div class="space-y-4">
      <div>
        <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Display Name</label>
        <input id="settings-display-name" type="text" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" />
      </div>
      <div>
        <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label>
        <input type="text" id="settings-username" disabled class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm opacity-50 cursor-not-allowed" />
      </div>
      <p id="settings-msg" class="text-xs text-green-400 hidden">✓ Saved</p>
      <div id="settings-password-section" class="hidden pt-4 border-t border-white/5">
        <label class="text-xs text-gray-400 uppercase tracking-wider mb-3 block">Set Password</label>
        <div class="space-y-3">
          <input id="settings-password" type="password" placeholder="New password (min. 8 chars)" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" />
          <input id="settings-password-confirm" type="password" placeholder="Confirm password" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" />
          <p id="settings-pw-error" class="text-red-400 text-xs hidden"></p>
          <button id="settings-pw-btn" onclick="setPassword()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Set Password</button>
        </div>
      </div>
    </div>
    <div class="flex gap-3 mt-6">
      <button onclick="closeModal('modal-settings')" class="flex-1 text-sm text-gray-500 hover:text-white py-2 transition-colors">Cancel</button>
      <button onclick="saveSettings()" class="flex-1 glass-btn text-white text-sm py-2 rounded-xl transition-colors font-medium">Save</button>
    </div>
  </div>
</div>

<!-- Group Settings Modal -->
<div id="modal-group-settings" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
  <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl">
    <h3 class="font-semibold mb-4" id="gs-name"></h3>
    <div id="gs-members" class="space-y-2 max-h-60 overflow-y-auto mb-4"></div>
    <div id="gs-add-section">
      <input id="gs-search-input" oninput="searchGsUsers()" type="text" placeholder="Add member by username…" class="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-white/30 mb-2" />
      <div id="gs-search-results" class="space-y-1 max-h-32 overflow-y-auto"></div>
    </div>
    <button onclick="closeModal('modal-group-settings')" class="mt-4 w-full text-sm text-gray-500 hover:text-white py-2 transition-colors">Close</button>
  </div>
</div>

<!-- Incoming Call Modal -->
<div id="incoming-call" class="hidden fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50">
  <div class="glass rounded-3xl p-8 w-full max-w-sm mx-4 shadow-2xl text-center">
    <div id="incoming-avatar" class="w-20 h-20 rounded-full flex items-center justify-center text-white text-3xl font-semibold mx-auto mb-4"></div>
    <p id="incoming-caller-name" class="text-lg font-semibold mb-1"></p>
    <p class="text-sm text-gray-400 mb-6"><span id="incoming-call-type-icon">📞</span> <span id="incoming-call-type">Audio Call</span></p>
    <div class="flex gap-4 justify-center">
      <button onclick="rejectCall()" class="w-14 h-14 rounded-full bg-red-500/80 hover:bg-red-500 flex items-center justify-center text-white text-xl transition-colors shadow-lg">✕</button>
      <button onclick="acceptCall()" class="w-14 h-14 rounded-full bg-green-500/80 hover:bg-green-500 flex items-center justify-center text-white text-xl transition-colors shadow-lg">✓</button>
    </div>
  </div>
</div>

<!-- Active Call Modal -->
<div id="modal-call" class="hidden fixed inset-0 bg-black/85 flex flex-col z-50">
  <!-- Call header -->
  <div class="flex items-center justify-between px-6 py-4">
    <div>
      <p id="call-peer-name" class="text-lg font-semibold text-white"></p>
      <p id="call-status" class="text-sm text-gray-400">Connecting…</p>
    </div>
    <div class="flex gap-3">
      <button onclick="toggleMute()" id="call-mute-btn" class="px-3 py-1.5 rounded-xl glass-btn text-sm text-gray-300 hover:text-white transition-colors">🔊 Mute</button>
      <button onclick="toggleVideo()" id="call-video-btn" class="px-3 py-1.5 rounded-xl glass-btn text-sm text-gray-300 hover:text-white transition-colors hidden">📹 Video</button>
      <button onclick="endCall()" class="px-4 py-1.5 rounded-xl bg-red-500/80 hover:bg-red-500 text-white text-sm font-medium transition-colors">End Call</button>
    </div>
  </div>
  <!-- Video content (1-to-1) -->
  <div id="call-video-content" class="hidden flex-1 relative flex items-center justify-center p-4">
    <div class="relative max-w-full max-h-full">
      <video id="remote-video" autoplay playsinline class="max-w-full max-h-full rounded-2xl object-contain bg-black/40" style="max-height:70vh"></video>
      <div id="remote-video-avatar" class="hidden absolute inset-0 flex items-center justify-center bg-black/60 rounded-2xl">
        <div id="remote-video-avatar-inner" class="w-24 h-24 rounded-full flex items-center justify-center text-white text-4xl font-semibold"></div>
      </div>
    </div>
    <div class="absolute top-6 right-6 w-48 h-36 rounded-xl overflow-hidden shadow-2xl border-2 border-white/20">
      <video id="local-video" autoplay playsinline muted class="w-full h-full object-cover"></video>
      <div id="local-video-avatar" class="hidden absolute inset-0 flex items-center justify-center bg-black/70">
        <div id="local-video-avatar-inner" class="w-12 h-12 rounded-full flex items-center justify-center text-white text-xl font-semibold"></div>
      </div>
    </div>
  </div>
  <!-- Audio content -->
  <div id="call-audio-content" class="hidden flex-1 flex flex-col items-center justify-center gap-4">
    <div id="call-audio-avatar" class="w-28 h-28 rounded-full flex items-center justify-center text-white text-5xl font-semibold"></div>
    <p class="text-gray-400 text-sm">Audio call in progress</p>
  </div>
</div>

<script src="/static/crypto.js"></script>
<script src="/static/app.js"></script>
</body>
</html>