Hugging Face's logo

Spaces:
samirerty
/
anycoder-526bda47
Running

App Files Community
samirerty commited on
Commit
2662690
·
verified ·
1 Parent(s): d7f199b

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +829 -19
index.html CHANGED
@@ -1,19 +1,829 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ 1. Glassmorphism with backdrop-filter blur
2
+ 2. Modern gradient background
3
+ 3. Responsive grid/flex layout
4
+ 4. Styled for RTL (Persian) text
5
+ 5. Professional styling for all components
6
+ 6. Animations for smooth UX
7
+ 7. Custom scrollbars
8
+ 8. Mobile responsive breakpoints
9
+ 9. Hover effects and transitions
10
+ 10. Proper z-indexing and shadows
11
+
12
+ The colors are purple/blue gradient based which works well with glassmorphism. All the classes from the HTML are styled. </think> ```css
13
+ /* CSS Variables for Glassmorphism Theme */
14
+ :root {
15
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
17
+ --glass-bg: rgba(255, 255, 255, 0.75);
18
+ --glass-bg-dark: rgba(255, 255, 255, 0.4);
19
+ --glass-border: rgba(255, 255, 255, 0.6);
20
+ --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
21
+ --blur-amount: blur(16px);
22
+
23
+ --text-primary: #1a202c;
24
+ --text-secondary: #4a5568;
25
+ --accent-color: #667eea;
26
+ --accent-hover: #5568d3;
27
+ --success-color: #48bb78;
28
+ --error-color: #f56565;
29
+ --warning-color: #ed8936;
30
+
31
+ --border-radius-lg: 24px;
32
+ --border-radius-md: 16px;
33
+ --border-radius-sm: 12px;
34
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
35
+ }
36
+
37
+ /* Reset & Base */
38
+ * {
39
+ margin: 0;
40
+ padding: 0;
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ body.chat-page {
45
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
46
+ background: var(--primary-gradient);
47
+ background-attachment: fixed;
48
+ min-height: 100vh;
49
+ display: flex;
50
+ justify-content: center;
51
+ align-items: center;
52
+ padding: 20px;
53
+ color: var(--text-primary);
54
+ line-height: 1.6;
55
+ }
56
+
57
+ /* Glass Container */
58
+ .chat-container {
59
+ display: grid;
60
+ grid-template-columns: 320px 1fr;
61
+ width: 100%;
62
+ max-width: 1440px;
63
+ height: 92vh;
64
+ background: var(--glass-bg);
65
+ backdrop-filter: var(--blur-amount);
66
+ -webkit-backdrop-filter: var(--blur-amount);
67
+ border: 1px solid var(--glass-border);
68
+ border-radius: var(--border-radius-lg);
69
+ box-shadow: var(--glass-shadow);
70
+ overflow: hidden;
71
+ position: relative;
72
+ }
73
+
74
+ /* Sidebar - Glass Panel */
75
+ .chat-sidebar {
76
+ background: rgba(255, 255, 255, 0.4);
77
+ border-left: 1px solid var(--glass-border);
78
+ display: flex;
79
+ flex-direction: column;
80
+ backdrop-filter: blur(10px);
81
+ position: relative;
82
+ }
83
+
84
+ .sidebar-header {
85
+ padding: 28px 24px;
86
+ background: rgba(255, 255, 255, 0.6);
87
+ border-bottom: 1px solid var(--glass-border);
88
+ backdrop-filter: blur(8px);
89
+ }
90
+
91
+ .sidebar-header h3 {
92
+ font-size: 1.25rem;
93
+ color: var(--text-primary);
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 12px;
97
+ margin-bottom: 8px;
98
+ font-weight: 700;
99
+ }
100
+
101
+ .sidebar-header h3 i {
102
+ color: var(--accent-color);
103
+ font-size: 1.1rem;
104
+ }
105
+
106
+ .room-name {
107
+ font-size: 0.875rem;
108
+ color: var(--text-secondary);
109
+ font-weight: 500;
110
+ display: block;
111
+ padding-right: 32px;
112
+ }
113
+
114
+ .users-list {
115
+ flex: 1;
116
+ overflow-y: auto;
117
+ padding: 20px;
118
+ display: flex;
119
+ flex-direction: column;
120
+ gap: 12px;
121
+ }
122
+
123
+ .user-item {
124
+ display: flex;
125
+ align-items: center;
126
+ gap: 14px;
127
+ padding: 14px;
128
+ background: rgba(255, 255, 255, 0.6);
129
+ border-radius: var(--border-radius-sm);
130
+ border: 1px solid rgba(255, 255, 255, 0.4);
131
+ transition: var(--transition);
132
+ cursor: pointer;
133
+ position: relative;
134
+ overflow: hidden;
135
+ }
136
+
137
+ .user-item::before {
138
+ content: '';
139
+ position: absolute;
140
+ right: 0;
141
+ top: 0;
142
+ height: 100%;
143
+ width: 4px;
144
+ background: var(--accent-color);
145
+ opacity: 0;
146
+ transition: var(--transition);
147
+ }
148
+
149
+ .user-item:hover {
150
+ background: rgba(255, 255, 255, 0.9);
151
+ transform: translateX(-4px);
152
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
153
+ }
154
+
155
+ .user-item:hover::before {
156
+ opacity: 1;
157
+ }
158
+
159
+ .user-avatar {
160
+ width: 44px;
161
+ height: 44px;
162
+ border-radius: 50%;
163
+ background: var(--primary-gradient);
164
+ display: flex;
165
+ align-items: center;
166
+ justify-content: center;
167
+ color: white;
168
+ font-size: 1.25rem;
169
+ box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
170
+ flex-shrink: 0;
171
+ }
172
+
173
+ .user-info {
174
+ display: flex;
175
+ flex-direction: column;
176
+ flex: 1;
177
+ min-width: 0;
178
+ }
179
+
180
+ .user-name {
181
+ font-weight: 600;
182
+ font-size: 0.95rem;
183
+ color: var(--text-primary);
184
+ white-space: nowrap;
185
+ overflow: hidden;
186
+ text-overflow: ellipsis;
187
+ }
188
+
189
+ .user-status {
190
+ font-size: 0.8rem;
191
+ display: flex;
192
+ align-items: center;
193
+ gap: 6px;
194
+ margin-top: 2px;
195
+ font-weight: 500;
196
+ }
197
+
198
+ .user-status.online {
199
+ color: var(--success-color);
200
+ }
201
+
202
+ .user-status.offline {
203
+ color: var(--text-secondary);
204
+ opacity: 0.7;
205
+ }
206
+
207
+ .user-status i {
208
+ font-size: 0.5rem;
209
+ animation: pulse 2s infinite;
210
+ }
211
+
212
+ .user-status.offline i {
213
+ animation: none;
214
+ }
215
+
216
+ .sidebar-footer {
217
+ padding: 24px;
218
+ border-top: 1px solid var(--glass-border);
219
+ background: rgba(255, 255, 255, 0.5);
220
+ backdrop-filter: blur(8px);
221
+ }
222
+
223
+ /* Main Chat Area */
224
+ .chat-main {
225
+ display: flex;
226
+ flex-direction: column;
227
+ background: rgba(255, 255, 255, 0.2);
228
+ position: relative;
229
+ }
230
+
231
+ .chat-header {
232
+ padding: 28px 32px;
233
+ background: rgba(255, 255, 255, 0.65);
234
+ border-bottom: 1px solid var(--glass-border);
235
+ display: flex;
236
+ justify-content: space-between;
237
+ align-items: center;
238
+ backdrop-filter: blur(12px);
239
+ z-index: 10;
240
+ }
241
+
242
+ .header-info h1 {
243
+ font-size: 1.5rem;
244
+ color: var(--text-primary);
245
+ display: flex;
246
+ align-items: center;
247
+ gap: 12px;
248
+ margin-bottom: 6px;
249
+ font-weight: 700;
250
+ }
251
+
252
+ .header-info h1 i {
253
+ color: var(--accent-color);
254
+ background: rgba(102, 126, 234, 0.1);
255
+ width: 40px;
256
+ height: 40px;
257
+ display: flex;
258
+ align-items: center;
259
+ justify-content: center;
260
+ border-radius: 12px;
261
+ }
262
+
263
+ .header-info p {
264
+ color: var(--text-secondary);
265
+ font-size: 0.9rem;
266
+ padding-right: 52px;
267
+ }
268
+
269
+ .header-actions {
270
+ display: flex;
271
+ gap: 12px;
272
+ align-items: center;
273
+ }
274
+
275
+ /* Messages Container */
276
+ .chat-messages {
277
+ flex: 1;
278
+ overflow-y: auto;
279
+ padding: 32px;
280
+ display: flex;
281
+ flex-direction: column;
282
+ gap: 20px;
283
+ scroll-behavior: smooth;
284
+ background: rgba(255, 255, 255, 0.3);
285
+ }
286
+
287
+ /* Custom Scrollbar */
288
+ .chat-messages::-webkit-scrollbar,
289
+ .users-list::-webkit-scrollbar {
290
+ width: 8px;
291
+ }
292
+
293
+ .chat-messages::-webkit-scrollbar-track,
294
+ .users-list::-webkit-scrollbar-track {
295
+ background: rgba(255, 255, 255, 0.2);
296
+ border-radius: 10px;
297
+ margin: 4px;
298
+ }
299
+
300
+ .chat-messages::-webkit-scrollbar-thumb,
301
+ .users-list::-webkit-scrollbar-thumb {
302
+ background: rgba(102, 126, 234, 0.4);
303
+ border-radius: 10px;
304
+ border: 2px solid transparent;
305
+ background-clip: padding-box;
306
+ }
307
+
308
+ .chat-messages::-webkit-scrollbar-thumb:hover,
309
+ .users-list::-webkit-scrollbar-thumb:hover {
310
+ background: rgba(102, 126, 234, 0.7);
311
+ border: 2px solid transparent;
312
+ background-clip: padding-box;
313
+ }
314
+
315
+ /* Message Bubbles - Glass Effect */
316
+ .message {
317
+ max-width: 75%;
318
+ padding: 18px 22px;
319
+ border-radius: 20px;
320
+ background: rgba(255, 255, 255, 0.85);
321
+ border: 1px solid rgba(255, 255, 255, 0.8);
322
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
323
+ position: relative;
324
+ animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
325
+ backdrop-filter: blur(8px);
326
+ transition: var(--transition);
327
+ }
328
+
329
+ .message:hover {
330
+ transform: translateY(-2px);
331
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
332
+ }
333
+
334
+ .message.own {
335
+ align-self: flex-start;
336
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
337
+ color: white;
338
+ border: 1px solid rgba(255, 255, 255, 0.4);
339
+ box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
340
+ }
341
+
342
+ .message:not(.own) {
343
+ align-self: flex-end;
344
+ background: rgba(255, 255, 255, 0.95);
345
+ }
346
+
347
+ .message-header {
348
+ display: flex;
349
+ justify-content: space-between;
350
+ align-items: center;
351
+ margin-bottom: 10px;
352
+ font-size: 0.85rem;
353
+ gap: 12px;
354
+ }
355
+
356
+ .message.own .message-header {
357
+ color: rgba(255, 255, 255, 0.95);
358
+ }
359
+
360
+ .message:not(.own) .message-header {
361
+ color: var(--text-secondary);
362
+ }
363
+
364
+ .message-sender {
365
+ font-weight: 700;
366
+ display: flex;
367
+ align-items: center;
368
+ gap: 6px;
369
+ }
370
+
371
+ .message-time {
372
+ font-size: 0.75rem;
373
+ opacity: 0.9;
374
+ font-weight: 500;
375
+ }
376
+
377
+ .message-content {
378
+ line-height: 1.6;
379
+ word-wrap: break-word;
380
+ font-size: 0.95rem;
381
+ }
382
+
383
+ .message-actions-admin {
384
+ display: flex;
385
+ gap: 8px;
386
+ opacity: 0;
387
+ transition: var(--transition);
388
+ position: absolute;
389
+ left: -30px;
390
+ top: 50%;
391
+ transform: translateY(-50%);
392
+ }
393
+
394
+ .message:hover .message-actions-admin {
395
+ opacity: 1;
396
+ left: 10px;
397
+ }
398
+
399
+ .message-actions-admin button {
400
+ background: rgba(245, 101, 101, 0.9);
401
+ color: white;
402
+ border: none;
403
+ width: 28px;
404
+ height: 28px;
405
+ border-radius: 8px;
406
+ cursor: pointer;
407
+ display: flex;
408
+ align-items: center;
409
+ justify-content: center;
410
+ font-size: 0.75rem;
411
+ transition: var(--transition);
412
+ backdrop-filter: blur(4px);
413
+ box-shadow: 0 2px 8px rgba(245, 101, 101, 0.3);
414
+ }
415
+
416
+ .message-actions-admin button:hover {
417
+ background: var(--error-color);
418
+ transform: scale(1.15) rotate(8deg);
419
+ }
420
+
421
+ /* Chat Footer & Input */
422
+ .chat-footer {
423
+ padding: 28px 32px;
424
+ background: rgba(255, 255, 255, 0.7);
425
+ border-top: 1px solid var(--glass-border);
426
+ backdrop-filter: blur(12px);
427
+ }
428
+
429
+ #message-form {
430
+ display: flex;
431
+ flex-direction: column;
432
+ gap: 16px;
433
+ }
434
+
435
+ .message-input {
436
+ display: flex;
437
+ gap: 16px;
438
+ align-items: center;
439
+ position: relative;
440
+ }
441
+
442
+ #message-input {
443
+ flex: 1;
444
+ padding: 16px 24px;
445
+ border: 2px solid rgba(102, 126, 234, 0.2);
446
+ border-radius: 28px;
447
+ background: rgba(255, 255, 255, 0.9);
448
+ font-size: 1rem;
449
+ color: var(--text-primary);
450
+ transition: var(--transition);
451
+ outline: none;
452
+ font-family: inherit;
453
+ }
454
+
455
+ #message-input:focus {
456
+ border-color: var(--accent-color);
457
+ background: rgba(255, 255, 255, 1);
458
+ box-shadow: 0 0 0 5px rgba(102, 126, 234, 0.15);
459
+ }
460
+
461
+ #message-input::placeholder {
462
+ color: var(--text-secondary);
463
+ opacity: 0.6;
464
+ }
465
+
466
+ .message-actions {
467
+ display: flex;
468
+ gap: 10px;
469
+ padding: 0 8px;
470
+ align-items: center;
471
+ }
472
+
473
+ /* Buttons */
474
+ .btn {
475
+ padding: 12px 24px;
476
+ border: none;
477
+ border-radius: 14px;
478
+ font-weight: 600;
479
+ cursor: pointer;
480
+ display: inline-flex;
481
+ align-items: center;
482
+ gap: 10px;
483
+ transition: var(--transition);
484
+ font-size: 0.95rem;
485
+ backdrop-filter: blur(4px);
486
+ white-space: nowrap;
487
+ position: relative;
488
+ overflow: hidden;
489
+ }
490
+
491
+ .btn::before {
492
+ content: '';
493
+ position: absolute;
494
+ top: 0;
495
+ left: -100%;
496
+ width: 100%;
497
+ height: 100%;
498
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
499
+ transition: 0.5s;
500
+ }
501
+
502
+ .btn:hover::before {
503
+ left: 100%;
504
+ }
505
+
506
+ .btn-primary {
507
+ background: var(--primary-gradient);
508
+ color: white;
509
+ box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
510
+ }
511
+
512
+ .btn-primary:hover {
513
+ transform: translateY(-3px);
514
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
515
+ }
516
+
517
+ .btn-secondary {
518
+ background: rgba(255, 255, 255, 0.8);
519
+ color: var(--text-primary);
520
+ border: 1px solid rgba(0, 0, 0, 0.08);
521
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
522
+ }
523
+
524
+ .btn-secondary:hover {
525
+ background: rgba(255, 255, 255, 1);
526
+ transform: translateY(-2px);
527
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
528
+ }
529
+
530
+ .btn-icon {
531
+ width: 40px;
532
+ height: 40px;
533
+ border-radius: 50%;
534
+ border: 1px solid rgba(0, 0, 0, 0.08);
535
+ background: rgba(255, 255, 255, 0.7);
536
+ cursor: pointer;
537
+ font-size: 1.25rem;
538
+ display: flex;
539
+ align-items: center;
540
+ justify-content: center;
541
+ transition: var(--transition);
542
+ backdrop-filter: blur(4px);
543
+ }
544
+
545
+ .btn-icon:hover {
546
+ background: rgba(255, 255, 255, 1);
547
+ transform: scale(1.15) rotate(10deg);
548
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
549
+ }
550
+
551
+ /* States */
552
+ .loading, .empty-state, .error-state {
553
+ display: flex;
554
+ flex-direction: column;
555
+ align-items: center;
556
+ justify-content: center;
557
+ padding: 60px 40px;
558
+ text-align: center;
559
+ color: var(--text-secondary);
560
+ gap: 16px;
561
+ background: rgba(255, 255, 255, 0.5);
562
+ border-radius: var(--border-radius-md);
563
+ border: 2px dashed rgba(102, 126, 234, 0.2);
564
+ margin: 20px;
565
+ }
566
+
567
+ .loading {
568
+ border-style: solid;
569
+ background: rgba(255, 255, 255, 0.3);
570
+ }
571
+
572
+ .loading::before {
573
+ content: '';
574
+ width: 48px;
575
+ height: 48px;
576
+ border: 4px solid rgba(102, 126, 234, 0.2);
577
+ border-top-color: var(--accent-color);
578
+ border-radius: 50%;
579
+ animation: spin 0.8s linear infinite;
580
+ }
581
+
582
+ .empty-state i, .error-state i {
583
+ font-size: 3.5rem;
584
+ margin-bottom: 8px;
585
+ opacity: 0.6;
586
+ }
587
+
588
+ .empty-state i {
589
+ color: var(--accent-color);
590
+ }
591
+
592
+ .error-state i {
593
+ color: var(--error-color);
594
+ }
595
+
596
+ .small-text {
597
+ font-size: 0.9rem;
598
+ opacity: 0.8;
599
+ margin-top: 8px;
600
+ }
601
+
602
+ /* Alerts */
603
+ .alert {
604
+ padding: 18px 24px;
605
+ border-radius: var(--border-radius-sm);
606
+ display: flex;
607
+ align-items: center;
608
+ gap: 12px;
609
+ font-weight: 600;
610
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
611
+ animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
612
+ backdrop-filter: blur(12px);
613
+ border: 1px solid rgba(255, 255, 255, 0.4);
614
+ z-index: 10000;
615
+ }
616
+
617
+ .alert.success {
618
+ background: rgba(72, 187, 120, 0.95);
619
+ color: white;
620
+ }
621
+
622
+ .alert.error {
623
+ background: rgba(245, 101, 101, 0.95);
624
+ color: white;
625
+ }
626
+
627
+ .alert i {
628
+ font-size: 1.25rem;
629
+ }
630
+
631
+ /* Temp Message */
632
+ .temp-message {
633
+ opacity: 0.8;
634
+ border-style: dashed;
635
+ }
636
+
637
+ .sending-status {
638
+ font-size: 0.75rem;
639
+ margin-right: 8px;
640
+ font-style: italic;
641
+ opacity: 0.9;
642
+ display: flex;
643
+ align-items: center;
644
+ gap: 6px;
645
+ }
646
+
647
+ /* Animations */
648
+ @keyframes slideIn {
649
+ from {
650
+ opacity: 0;
651
+ transform: translateY(20px) scale(0.95);
652
+ }
653
+ to {
654
+ opacity: 1;
655
+ transform: translateY(0) scale(1);
656
+ }
657
+ }
658
+
659
+ @keyframes spin {
660
+ to {
661
+ transform: rotate(360deg);
662
+ }
663
+ }
664
+
665
+ @keyframes slideDown {
666
+ from {
667
+ opacity: 0;
668
+ transform: translateY(-30px);
669
+ }
670
+ to {
671
+ opacity: 1;
672
+ transform: translateY(0);
673
+ }
674
+ }
675
+
676
+ @keyframes pulse {
677
+ 0%, 100% {
678
+ opacity: 1;
679
+ }
680
+ 50% {
681
+ opacity: 0.5;
682
+ }
683
+ }
684
+
685
+ /* Responsive Design */
686
+ @media (max-width: 1024px) {
687
+ .chat-container {
688
+ grid-template-columns: 280px 1fr;
689
+ }
690
+
691
+ .chat-header {
692
+ padding: 20px 24px;
693
+ }
694
+
695
+ .header-info h1 {
696
+ font-size: 1.25rem;
697
+ }
698
+
699
+ .chat-messages {
700
+ padding: 24px;
701
+ }
702
+ }
703
+
704
+ @media (max-width: 768px) {
705
+ body.chat-page {
706
+ padding: 0;
707
+ }
708
+
709
+ .chat-container {
710
+ grid-template-columns: 1fr;
711
+ height: 100vh;
712
+ border-radius: 0;
713
+ max-width: 100%;
714
+ }
715
+
716
+ .chat-sidebar {
717
+ position: fixed;
718
+ right: -100%;
719
+ top: 0;
720
+ width: 300px;
721
+ height: 100vh;
722
+ z-index: 1000;
723
+ transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
724
+ background: rgba(255, 255, 255, 0.98);
725
+ box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
726
+ }
727
+
728
+ .chat-sidebar.active {
729
+ right: 0;
730
+ }
731
+
732
+ .chat-header {
733
+ padding: 16px 20px;
734
+ flex-direction: column;
735
+ gap: 16px;
736
+ align-items: flex-start;
737
+ }
738
+
739
+ .header-actions {
740
+ width: 100%;
741
+ justify-content: flex-end;
742
+ }
743
+
744
+ .message {
745
+ max-width: 90%;
746
+ padding: 14px 18px;
747
+ }
748
+
749
+ .chat-footer {
750
+ padding: 20px;
751
+ }
752
+
753
+ .message-input {
754
+ flex-wrap: wrap;
755
+ }
756
+
757
+ #message-input {
758
+ order: 1;
759
+ flex: 1 0 100%;
760
+ margin-bottom: 12px;
761
+ }
762
+
763
+ .btn-primary[type="submit"] {
764
+ order: 3;
765
+ flex: 1;
766
+ justify-content: center;
767
+ }
768
+
769
+ .message-actions {
770
+ order: 2;
771
+ flex: 1;
772
+ justify-content: flex-end;
773
+ }
774
+ }
775
+
776
+ @media (max-width: 480px) {
777
+ .chat-messages {
778
+ padding: 16px;
779
+ gap: 12px;
780
+ }
781
+
782
+ .message {
783
+ max-width: 95%;
784
+ border-radius: 16px;
785
+ padding: 12px 16px;
786
+ }
787
+
788
+ .btn {
789
+ padding: 10px 16px;
790
+ font-size: 0.85rem;
791
+ }
792
+
793
+ .sidebar-header h3 {
794
+ font-size: 1.1rem;
795
+ }
796
+
797
+ .user-item {
798
+ padding: 10px;
799
+ }
800
+
801
+ .user-avatar {
802
+ width: 36px;
803
+ height: 36px;
804
+ font-size: 1rem;
805
+ }
806
+ }
807
+
808
+ /* Utility Classes */
809
+ .hidden {
810
+ display: none !important;
811
+ }
812
+
813
+ .fade-in {
814
+ animation: slideIn 0.4s ease-out;
815
+ }
816
+
817
+ .glass-panel {
818
+ background: var(--glass-bg);
819
+ backdrop-filter: var(--blur-amount);
820
+ border: 1px solid var(--glass-border);
821
+ border-radius: var(--border-radius-md);
822
+ }
823
+
824
+ .text-gradient {
825
+ background: var(--primary-gradient);
826
+ -webkit-background-clip: text;
827
+ -webkit-text-fill-color: transparent;
828
+ background-clip: text;
829
+ }