feat: Add video call modal, profile visiting, friend requests, QR scanner, and hover effects improvements

.env.example

@@ -2,8 +2,8 @@ PORT=3000
 HOST=0.0.0.0
 NODE_ENV=development
 
-# MongoDB Connection
-MONGODB_URI=mongodb://localhost:27017/discord-app
+# PostgreSQL Connection (Railway will auto-provide DATABASE_URL)
+DATABASE_URL=postgres://postgres:password@localhost:5432/discord-app
 
 # JWT Secret
 JWT_SECRET=your_super_secret_jwt_key_change_this_in_production

index.html

@@ -20,12 +20,29 @@
             --sidebar-bg: #2f3136;
             --text-primary: #ffffff;
             --text-secondary: #b9bbbe;
+            --ui-text-color: #ffffff;
             --border-color: #202225;
             --shadow: 0 2px 10px rgba(0,0,0,0.3);
             --success: #43b581;
             --danger: #f04747;
         }
 
+        /* Light Theme */
+        [data-theme="light"] {
+            --primary-color: #5865f2;
+            --secondary-color: #99aab5;
+            --bg-color: #ffffff;
+            --chat-bg: #f2f3f5;
+            --sidebar-bg: #f9f9f9;
+            --text-primary: #2e3338;
+            --text-secondary: #747f8d;
+            --ui-text-color: #2e3338;
+            --border-color: #e3e5e8;
+            --shadow: 0 2px 10px rgba(0,0,0,0.1);
+            --success: #43b581;
+            --danger: #f04747;
+        }
+
         body {
             font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
             background: var(--bg-color);
@@ -132,6 +149,44 @@
             text-decoration: underline;
         }
 
+        .auth-inline-link {
+            margin-top: -10px;
+            margin-bottom: 14px;
+            text-align: right;
+        }
+
+        .auth-inline-link button {
+            background: none;
+            border: none;
+            color: var(--primary-color);
+            cursor: pointer;
+            font-size: 13px;
+            text-decoration: underline;
+            padding: 0;
+        }
+
+        .reset-password-panel {
+            margin-top: 14px;
+            padding-top: 12px;
+            border-top: 1px solid var(--border-color);
+            display: none;
+        }
+
+        .reset-password-panel.show {
+            display: block;
+        }
+
+        .auth-mini-button {
+            width: 100%;
+            margin-top: 8px;
+            padding: 10px;
+            border: 1px solid var(--primary-color);
+            border-radius: 6px;
+            background: transparent;
+            color: var(--primary-color);
+            cursor: pointer;
+        }
+
         /* ==================== MAIN LAYOUT ==================== */
         .main-container {
             display: grid;
@@ -179,6 +234,13 @@
             background: var(--primary-color);
         }
 
+        .guild-divider {
+            width: 32px;
+            height: 2px;
+            background: var(--border-color);
+            margin: 8px 0;
+        }
+
         /* ==================== CHANNEL SIDEBAR ==================== */
         .channel-sidebar {
             background: var(--sidebar-bg);
@@ -210,8 +272,9 @@
 
         .channels-list {
             flex: 1;
-            overflow-y: auto;
+            overflow-y: scroll;
             padding: 8px 0;
+            scrollbar-gutter: stable;
         }
 
         .channel-item {
@@ -238,11 +301,49 @@
             font-size: 16px;
         }
 
+        .channel-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary-color), #4752c4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 600;
+            font-size: 14px;
+            flex-shrink: 0;
+        }
+
+        .member-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary-color), #4752c4);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 600;
+            font-size: 14px;
+            flex-shrink: 0;
+        }
+
+        .channel-section-title {
+            padding: 10px;
+            color: var(--text-secondary);
+            font-size: 12px;
+            font-weight: bold;
+        }
+
         /* ==================== MAIN CHAT AREA ==================== */
         .chat-area {
+            position: relative;
             display: flex;
             flex-direction: column;
             background: var(--chat-bg);
+            min-height: 0;
+            overflow: hidden;
         }
 
         .chat-header {
@@ -266,9 +367,19 @@
 
         .chat-header-actions {
             display: flex;
+            align-items: center;
             gap: 12px;
         }
 
+        .build-badge {
+            padding: 4px 8px;
+            border: 1px solid var(--border-color);
+            border-radius: 999px;
+            font-size: 11px;
+            color: var(--text-secondary);
+            background: var(--bg-color);
+        }
+
         .header-btn {
             background: none;
             border: none;
@@ -282,33 +393,68 @@
             color: var(--text-primary);
         }
 
+        .header-btn.danger {
+            color: var(--danger);
+        }
+
+        .header-btn.success {
+            color: var(--success);
+        }
+
         #messages-container {
             flex: 1;
+            min-height: 0;
             overflow-y: auto;
             padding: 16px 24px;
+            padding-right: 44px;
+            padding-bottom: 24px;
             display: flex;
             flex-direction: column;
             gap: 12px;
             scroll-behavior: smooth;
-            scroll-snap-type: y proximity;
             -webkit-overflow-scrolling: touch;
         }
 
+        /* Hide native scrollbar (custom scrollbar is used) */
         #messages-container::-webkit-scrollbar {
-            width: 8px;
+            width: 0;
+            height: 0;
         }
 
-        #messages-container::-webkit-scrollbar-track {
-            background: var(--chat-bg);
+        #messages-container {
+            scrollbar-width: none;
         }
 
-        #messages-container::-webkit-scrollbar-thumb {
-            background: var(--secondary-color);
-            border-radius: 4px;
+        .chat-scroll-rail {
+            position: absolute;
+            top: 72px;
+            right: 8px;
+            bottom: 84px;
+            width: 14px;
+            border-radius: 999px;
+            background: #d8d8d8;
+            border: 1px solid #c5c5c5;
+            z-index: 12;
+            cursor: pointer;
+        }
+
+        .chat-scroll-thumb {
+            width: 100%;
+            min-height: 56px;
+            border-radius: 999px;
+            background: linear-gradient(180deg, #10d9a6 0%, #00b88f 50%, #009a78 100%);
+            border: 1px solid rgba(0, 0, 0, 0.08);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+            transform: translateY(0);
+            transition: background 0.15s ease;
+        }
+
+        .chat-scroll-thumb:hover {
+            background: linear-gradient(180deg, #20ecb8 0%, #00c79a 50%, #00ab86 100%);
         }
 
-        #messages-container::-webkit-scrollbar-thumb:hover {
-            background: #72767d;
+        .chat-scroll-rail.hidden {
+            display: none;
         }
 
         .message {
@@ -348,14 +494,81 @@
             margin-bottom: 4px;
         }
 
+        .message-actions {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            display: none;
+            gap: 4px;
+            background: var(--chat-bg);
+            padding: 4px;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+
+        .message:hover .message-actions {
+            display: flex;
+        }
+
+        .message-action-btn {
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            color: var(--text-secondary);
+            padding: 4px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 11px;
+            transition: all 0.2s;
+        }
+
+        .message-action-btn:hover {
+            background: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+
+        .message-reactions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px;
+            margin-top: 4px;
+        }
+
+        .reaction-item {
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .reaction-item:hover {
+            background: var(--primary-color);
+            border-color: var(--primary-color);
+            transform: scale(1.05);
+        }
+
+        .reaction-count {
+            font-size: 11px;
+            color: var(--text-secondary);
+            font-weight: 600;
+        }
+
         .message-username {
             font-weight: 600;
             color: var(--primary-color);
         }
 
         .message-time {
-            font-size: 12px;
+            font-size: 11px;
             color: var(--text-secondary);
+            display: block;
+            margin-top: 2px;
         }
 
         .message-text {
@@ -365,26 +578,96 @@
 
         .message-media {
             margin-top: 8px;
-            border-radius: 4px;
+            border-radius: 8px;
             max-width: 400px;
+            overflow: hidden;
         }
 
         .message-media img {
             max-width: 100%;
-            border-radius: 4px;
-            cursor: pointer;
+            border-radius: 8px;
+            display: block;
         }
 
+        .message-media video {
+            max-width: 100%;
+            border-radius: 8px;
+            display: block;
+            cursor: pointer;
+        }
+           
         .message-media video {
             max-width: 100%;
             border-radius: 4px;
         }
 
+        .draft-preview {
+            margin: 8px 24px 0;
+            padding: 10px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-color);
+            display: none;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+        }
+
+        .draft-preview.show {
+            display: flex;
+        }
+
+        .draft-preview-left {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            min-width: 0;
+            flex: 1;
+        }
+
+        .draft-preview-thumb {
+            width: 56px;
+            height: 56px;
+            border-radius: 6px;
+            object-fit: cover;
+            border: 1px solid var(--border-color);
+            background: var(--chat-bg);
+            display: none;
+        }
+
+        .draft-preview-emoji {
+            font-size: 36px;
+            line-height: 1;
+            display: none;
+        }
+
+        .draft-preview-meta {
+            font-size: 12px;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .draft-clear-btn {
+            border: 1px solid var(--danger);
+            color: var(--danger);
+            background: transparent;
+            border-radius: 6px;
+            padding: 6px 10px;
+            cursor: pointer;
+        }
+
+        /* Scroll buttons removed - using WhatsApp scrollbar instead */
+
         .input-area {
             padding: 16px 24px;
             border-top: 1px solid var(--border-color);
             display: flex;
             gap: 12px;
+            background: var(--chat-bg);
+            z-index: 10;
+            flex-shrink: 0;
         }
 
         .input-area input {
@@ -419,7 +702,9 @@
         }
 
         .input-btn:hover {
-            background: #4752c4;
+            background: var(--primary-color);
+            opacity: 0.85;
+            transform: scale(1.05);
         }
 
         .input-file {
@@ -444,8 +729,9 @@
 
         .members-list {
             flex: 1;
-            overflow-y: auto;
+            overflow-y: scroll;
             padding: 8px;
+            scrollbar-gutter: stable;
         }
 
         .member-item {
@@ -617,6 +903,22 @@
             background: #4752c4;
         }
 
+        .secondary-btn {
+            width: 100%;
+            padding: 10px;
+            background: var(--secondary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .secondary-btn:hover {
+            opacity: 0.9;
+        }
+
         .shop-item {
             background: var(--bg-color);
             border: 1px solid var(--border-color);
@@ -676,90 +978,877 @@
             margin-bottom: 16px;
         }
 
-        /* ==================== MODAL ==================== */
-        .modal {
+        /* ==================== TOAST NOTIFICATIONS ==================== */
+        .toast-container {
             position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.6);
+            top: 20px;
+            right: 20px;
+            z-index: 3000;
             display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1500;
-        }
-
-        .modal.hidden {
-            display: none;
+            flex-direction: column;
+            gap: 10px;
         }
 
-        .modal-content {
+        .toast {
             background: var(--chat-bg);
-            padding: 32px;
+            border-left: 4px solid var(--success);
+            padding: 16px 20px;
             border-radius: 8px;
-            max-width: 500px;
-            width: 90%;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
-            max-height: 90vh;
-            overflow-y: auto;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            min-width: 300px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s;
         }
 
-        /* ==================== SCROLLBAR ==================== */
-        ::-webkit-scrollbar {
-            width: 8px;
+        .toast.error {
+            border-left-color: var(--danger);
         }
 
-        ::-webkit-scrollbar-track {
-            background: transparent;
+        .toast.warning {
+            border-left-color: #faa61a;
         }
 
-        ::-webkit-scrollbar-thumb {
-            background: var(--secondary-color);
-            border-radius: 4px;
+        .toast-icon {
+            font-size: 20px;
         }
 
-        ::-webkit-scrollbar-thumb:hover {
-            background: #5a5d60;
+        .toast-content {
+            flex: 1;
         }
 
-        /* ==================== RESPONSIVE ==================== */
-        @media (max-width: 1200px) {
-            .main-container {
-                grid-template-columns: 72px 240px 1fr;
-            }
+        .toast-title {
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
 
-            .members-sidebar {
-                display: none;
-            }
+        .toast-message {
+            font-size: 13px;
+            color: var(--text-secondary);
+        }
 
-            .profile-panel {
-                width: 300px;
-                transform: translateX(300px);
-            }
+        @keyframes slideInRight {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
 
-            .profile-panel.show {
-                transform: translateX(0);
-            }
+        @keyframes fadeOut {
+            to { opacity: 0; transform: translateX(100%); }
         }
 
+        /* ==================== STICKER & GIF PICKER - INTEGRATED ==================== */
+        .picker-panel {
+            position: absolute;
+            bottom: 60px;
+            left: 50px;
+            width: 350px;
+            height: 400px;
+            background: var(--chat-bg);
+            border-radius: 8px 8px 0 0;
+            box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
+            display: none;
+            flex-direction: column;
+            z-index: 100;
+            border: 1px solid var(--border-color);
+            border-bottom: none;
+        }
+
+        .picker-panel.show {
+            display: flex;
+        }
+
+        .picker-tabs {
+            display: flex;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .picker-tab {
+            flex: 1;
+            padding: 12px;
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 14px;
+        }
+
+        .picker-tab.active {
+            color: var(--primary-color);
+            border-bottom: 2px solid var(--primary-color);
+        }
+
+        .picker-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 12px;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 8px;
+        }
+
+        .sticker-item, .gif-item {
+            font-size: 64px;
+            text-align: center;
+            cursor: pointer;
+            padding: 8px;
+            border-radius: 4px;
+            transition: all 0.2s;
+        }
+
+        .sticker-item:hover, .gif-item:hover {
+            background: var(--bg-color);
+            transform: scale(1.1);
+        }
+
+        .gif-item {
+            width: 100%;
+            height: 80px;
+            object-fit: cover;
+        }
+
+        /* ==================== VOICE RECORDER ==================== */
+        .voice-recorder {
+            position: absolute;
+            bottom: 70px;
+            right: 20px;
+            background: var(--chat-bg);
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            gap: 12px;
+            z-index: 100;
+            min-width: 320px;
+        }
+
+        .voice-preview-container {
+            width: 100%;
+            margin-top: 8px;
+            padding: 12px;
+            background: rgba(0, 168, 132, 0.1);
+            border: 2px solid #00a884;
+            border-radius: 8px;
+        }
+
+        .voice-preview-label {
+            font-size: 13px;
+            color: #00a884;
+            margin-bottom: 8px;
+            font-weight: 700;
+            text-align: center;
+        }
+
+        .voice-recorder.show {
+            display: flex;
+        }
+
+        .record-button {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: var(--danger);
+            border: none;
+            color: white;
+            font-size: 24px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .record-button:hover {
+            transform: scale(1.1);
+        }
+
+        .record-button.recording {
+            animation: pulse 1s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        .record-timer {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--danger);
+        }
+
+        /* ====================SETTINGS PANEL ==================== */
+        .settings-panel {
+            position: fixed;
+            top: 0;
+            right: -400px;
+            width: 400px;
+            height: 100%;
+            background: var(--chat-bg);
+            box-shadow: -4px 0 20px rgba(0,0,0,0.3);
+            transition: right 0.3s ease;
+            z-index: 2500;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .settings-panel.show {
+            right: 0;
+        }
+
+        .settings-header {
+            padding: 20px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .settings-header h2 {
+            font-size: 20px;
+            color: var(--ui-text-color);
+        }
+
+        .settings-nav {
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid var(--border-color);
+            min-width: 140px;
+        }
+
+        .settings-nav-item {
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 14px;
+            border-left: 3px solid transparent;
+            color: var(--ui-text-color);
+        }
+
+        .settings-nav-item:hover {
+            background: var(--bg-color);
+        }
+
+        .settings-nav-item.active {
+            background: var(--bg-color);
+            border-left-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+
+        .settings-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+
+        .settings-body {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+
+        .settings-section {
+            display: none;
+        }
+
+        .settings-section.active {
+            display: block;
+        }
+
+        .settings-section h3 {
+            color: var(--ui-text-color);
+            margin-bottom: 16px;
+        }
+
+        .settings-item {
+            margin-bottom: 20px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .settings-item:last-child {
+            border-bottom: none;
+        }
+
+        .settings-label {
+            font-weight: 600;
+            margin-bottom: 8px;
+            font-size: 14px;
+            color: var(--ui-text-color);
+        }
+
+        .settings-description {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-bottom: 8px;
+        }
+
+        .toggle-switch {
+            position: relative;
+            display: inline-block;
+            width: 44px;
+            height: 24px;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: var(--secondary-color);
+            transition: 0.3s;
+            border-radius: 24px;
+        }
+
+        .toggle-slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+        }
+
+        .toggle-switch input:checked + .toggle-slider {
+            background-color: var(--success);
+        }
+
+        .toggle-switch input:checked + .toggle-slider:before {
+            transform: translateX(20px);
+        }
+
+        /* ==================== MODAL ==================== */
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1500;
+        }
+
+        .modal.hidden {
+            display: none;
+        }
+
+        .modal-content {
+            background: var(--chat-bg);
+            padding: 32px;
+            border-radius: 8px;
+            max-width: 500px;
+            width: 90%;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+
+        /* ==================== SCROLLBAR ==================== */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: var(--secondary-color);
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #5a5d60;
+        }
+
+        /* ==================== RESPONSIVE ==================== */
+        @media (max-width: 1200px) {
+            .main-container {
+                grid-template-columns: 72px 240px 1fr;
+            }
+
+            .members-sidebar {
+                display: none;
+            }
+
+            .profile-panel {
+                width: 300px;
+                transform: translateX(300px);
+            }
+
+            .profile-panel.show {
+                transform: translateX(0);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .main-container {
+                grid-template-columns: 72px 1fr;
+            }
+
+            .channel-sidebar {
+                display: none;
+                position: fixed;
+                left: 72px;
+                top: 0;
+                width: 240px;
+                height: 100%;
+                z-index: 999;
+            }
+
+            .channel-sidebar.show {
+                display: flex;
+            }
+
+            .picker-panel {
+                width: 90%;
+                left: 5%;
+                bottom: 80px;
+            }
+
+            .voice-recorder {
+                width: 90%;
+                left: 5%;
+                right: auto;
+                bottom: 80px;
+            }
+
+            .settings-panel {
+                width: 100%;
+                right: -100%;
+            }
+
+            .settings-panel.show {
+                right: 0;
+            }
+
+            .settings-body {
+                flex-direction: column;
+            }
+
+            .settings-nav {
+                flex-direction: row;
+                overflow-x: auto;
+                border-right: none;
+                border-bottom: 1px solid var(--border-color);
+                min-width: auto;
+            }
+
+            .settings-nav-item {
+                white-space: nowrap;
+                border-left: none;
+                border-bottom: 3px solid transparent;
+            }
+
+            .settings-nav-item.active {
+                border-left: none;
+                border-bottom-color: var(--primary-color);
+            }
+
+            .toast-container {
+                top: 10px;
+                right: 10px;
+                left: 10px;
+            }
+
+            .toast {
+                min-width: auto;
+            }
+        }
+
+        /* ==================== CUSTOM DIALOG MODAL ==================== */
+        .custom-dialog {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(8px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+            animation: fadeIn 0.2s ease;
+        }
+
+        .custom-dialog-content {
+            background: var(--chat-bg);
+            border-radius: 16px;
+            padding: 32px;
+            min-width: 400px;
+            max-width: 90%;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
+            animation: slideUp 0.3s ease;
+            border: 2px solid var(--primary-color);
+        }
+
+        .custom-dialog-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 20px;
+        }
+
+        .custom-dialog-icon {
+            font-size: 32px;
+        }
+
+        .custom-dialog-title {
+            font-size: 22px;
+            font-weight: 700;
+            color: var(--ui-text-color);
+        }
+
+        .custom-dialog-message {
+            font-size: 15px;
+            color: var(--text-primary);
+            margin-bottom: 24px;
+            line-height: 1.6;
+        }
+
+        .custom-dialog-input {
+            width: 100%;
+            padding: 12px;
+            background: var(--bg-color);
+            border: 2px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            margin-bottom: 20px;
+            transition: all 0.2s;
+        }
+
+        .custom-dialog-input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.1);
+        }
+
+        .custom-dialog-buttons {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+        }
+
+        .custom-dialog-btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            min-width: 100px;
+        }
+
+        .custom-dialog-btn-primary {
+            background: var(--primary-color);
+            color: white;
+        }
+
+        .custom-dialog-btn-primary:hover {
+            background: #4752c4;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
+        }
+
+        .custom-dialog-btn-danger {
+            background: var(--danger);
+            color: white;
+        }
+
+        .custom-dialog-btn-danger:hover {
+            background: #d93636;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(240, 71, 71, 0.4);
+        }
+
+        .custom-dialog-btn-secondary {
+            background: var(--secondary-color);
+            color: var(--text-primary);
+        }
+
+        .custom-dialog-btn-secondary:hover {
+            opacity: 0.8;
+            transform: translateY(-2px);
+        }
+
+        /* ==================== FRIEND SEARCH BAR ==================== */
+        .friend-search-container {
+            padding: 12px 16px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .friend-search-input {
+            width: 100%;
+            padding: 10px 12px 10px 38px;
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: 20px;
+            color: var(--text-primary);
+            font-size: 13px;
+            transition: all 0.2s;
+        }
+
+        .friend-search-input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.15);
+        }
+
+        .friend-search-wrapper {
+            position: relative;
+        }
+
+        .friend-search-icon {
+            position: absolute;
+            left: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+
+        /* ==================== QR CODE MODAL ==================== */
+        .qr-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 9998;
+        }
+
+        .qr-modal.show {
+            display: flex;
+        }
+
+        .qr-modal-content {
+            background: var(--chat-bg);
+            border-radius: 20px;
+            padding: 40px;
+            text-align: center;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
+            border: 2px solid var(--primary-color);
+            max-width: 450px;
+        }
+
+        .qr-modal-title {
+            font-size: 24px;
+            font-weight: 700;
+            color: var(--ui-text-color);
+            margin-bottom: 16px;
+        }
+
+        .qr-modal-subtitle {
+            font-size: 14px;
+            color: var(--text-secondary);
+            margin-bottom: 24px;
+        }
+
+        .qr-code-container {
+            background: white;
+            padding: 20px;
+            border-radius: 12px;
+            display: inline-block;
+            margin-bottom: 20px;
+        }
+
+        #qrCodeCanvas {
+            display: block;
+        }
+
+        .qr-modal-close {
+            margin-top: 12px;
+            padding: 12px 32px;
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.2s;
+        }
+
+        .qr-modal-close:hover {
+            background: #4752c4;
+            transform: translateY(-2px);
+        }
+
+        /* ==================== MEDIA PREVIEW PANEL ==================== */
+        .media-preview-panel {
+            position: fixed;
+            bottom: -100%;
+            left: 0;
+            right: 0;
+            height: 60vh;
+            background: var(--chat-bg);
+            border-top: 3px solid var(--primary-color);
+            z-index: 1500;
+            transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
+            display: flex;
+            flex-direction: column;
+        }
+
+        .media-preview-panel.show {
+            bottom: 0;
+        }
+
+        .media-preview-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: var(--bg-color);
+        }
+
+        .media-preview-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--ui-text-color);
+        }
+
+        .media-preview-close {
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 24px;
+            padding: 8px;
+            transition: all 0.2s;
+        }
+
+        .media-preview-close:hover {
+            color: var(--danger);
+            transform: rotate(90deg);
+        }
+
+        .media-preview-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: 24px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 16px;
+            align-content: flex-start;
+        }
+
+        .media-preview-item {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            border-radius: 12px;
+            overflow: hidden;
+            border: 2px solid var(--border-color);
+            transition: all 0.2s;
+        }
+
+        .media-preview-item:hover {
+            transform: scale(1.05);
+            border-color: var(--primary-color);
+            box-shadow: 0 8px 24px rgba(88, 101, 242, 0.3);
+        }
+
+        .media-preview-item img,
+        .media-preview-item video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        /* ==================== ENHANCED HOVER EFFECTS ==================== */
+        .danger-hover:hover {
+            color: var(--danger) !important;
+            transform: scale(1.1);
+            filter: drop-shadow(0 0 8px rgba(240, 71, 71, 0.6));
+        }
+
+        .success-hover:hover {
+            color: var(--success) !important;
+            transform: scale(1.1);
+            filter: drop-shadow(0 0 8px rgba(67, 181, 129, 0.6));
+        }
+
+        .primary-hover:hover {
+            color: var(--primary-color) !important;
+            transform: scale(1.1);
+            filter: drop-shadow(0 0 8px rgba(88, 101, 242, 0.6));
+        }
+
+        /* ==================== MOBILE RESPONSIVENESS IMPROVEMENTS ==================== */
         @media (max-width: 768px) {
+            .custom-dialog-content {
+                min-width: 90%;
+                padding: 24px;
+            }
+
+            .media-preview-panel {
+                height: 70vh;
+            }
+
+            .media-preview-item {
+                width: calc(50% - 8px);
+                height: 150px;
+            }
+
+            .qr-modal-content {
+                margin: 20px;
+                padding: 24px;
+            }
+
             .main-container {
                 grid-template-columns: 72px 1fr;
+                height: 100vh;
+                height: 100dvh; /* Dynamic viewport height for mobile */
             }
 
-            .channel-sidebar {
-                display: none;
-                position: fixed;
-                left: 72px;
-                top: 0;
-                width: 240px;
+            .chat-area {
                 height: 100%;
-                z-index: 999;
+                max-height: 100vh;
+                max-height: 100dvh;
             }
 
-            .channel-sidebar.show {
-                display: flex;
+            #messages-container {
+                max-height: calc(100vh - 200px);
+                max-height: calc(100dvh - 200px);
+                -webkit-overflow-scrolling: touch;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .media-preview-item {
+                width: 100%;
+                height: 200px;
+            }
+
+            .custom-dialog-buttons {
+                flex-direction: column;
+            }
+
+            .custom-dialog-btn {
+                width: 100%;
             }
         }
     </style>
@@ -784,8 +1873,22 @@
                     <label>Password</label>
                     <input type="password" id="password" placeholder="Enter your password" required>
                 </div>
+                <div class="auth-inline-link" id="forgotPasswordWrap">
+                    <button type="button" onclick="toggleForgotPasswordPanel()">Forgot password?</button>
+                </div>
                 <button type="submit" class="auth-button" id="authButton">Login</button>
             </form>
+            <div class="reset-password-panel" id="resetPasswordPanel">
+                <div class="form-group" style="margin-bottom: 12px;">
+                    <label>Reset Email</label>
+                    <input type="email" id="resetEmail" placeholder="Enter your account email">
+                </div>
+                <div class="form-group" style="margin-bottom: 12px;">
+                    <label>New Password</label>
+                    <input type="password" id="resetNewPassword" placeholder="Enter new password (min 6 chars)">
+                </div>
+                <button type="button" class="auth-mini-button" onclick="resetForgottenPassword()">Reset Password</button>
+            </div>
             <div class="auth-toggle">
                 <span>Don't have an account? <button type="button" onclick="toggleAuthMode()">Register</button></span>
             </div>
@@ -805,13 +1908,43 @@
             <div class="guild-item" onclick="showSection('shop')" title="Shop">
                 <i class="fas fa-store"></i>
             </div>
+            <div class="guild-divider"></div>
+            <div class="guild-item" onclick="showArchivedMessages()" title="Archived Messages">
+                <i class="fas fa-archive"></i>
+            </div>
+            <div class="guild-item" onclick="openCommunitiesModal()" title="Communities">
+                <i class="fas fa-globe"></i>
+            </div>
+            <div class="guild-item" onclick="openGroupsModal()" title="Groups">
+                <i class="fas fa-user-group"></i>
+            </div>
         </div>
 
         <!-- CHANNEL SIDEBAR -->
         <div class="channel-sidebar" id="channelSidebar">
             <div class="sidebar-header">
                 <h3>Messages</h3>
-                <button onclick="toggleChannelSidebar()"><i class="fas fa-times"></i></button>
+                <div style="display: flex; gap: 8px;">
+                    <button onclick="showQRCodeModal()" title="Show My QR Code" style="padding: 4px 8px; background: var(--success); border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 12px;">
+                        <i class="fas fa-qrcode"></i>
+                    </button>
+                    <button onclick="scanQRCodeForFriend()" title="Scan QR Code" style="padding: 4px 8px; background: #8e44ad; border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 12px;">
+                        <i class="fas fa-camera"></i>
+                    </button>
+                    <button onclick="createNewGroup()" title="Create Group" style="padding: 4px 8px; background: var(--primary-color); border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 12px;">
+                        <i class="fas fa-plus"></i> Group
+                    </button>
+                    <button onclick="showArchivedChats()" title="Archived Chats" style="padding: 4px 8px; background: var(--secondary-color); border: none; border-radius: 4px; color: var(--text-primary); cursor: pointer; font-size: 12px;">
+                        <i class="fas fa-archive"></i>
+                    </button>
+                    <button onclick="toggleChannelSidebar()"><i class="fas fa-times"></i></button>
+                </div>
+            </div>
+            <div class="friend-search-container">
+                <div class="friend-search-wrapper">
+                    <i class="fas fa-search friend-search-icon"></i>
+                    <input type="text" id="friendSearchInput" class="friend-search-input" placeholder="Search friends..." oninput="filterFriends(this.value)">
+                </div>
             </div>
             <div class="channels-list" id="channelsList">
                 <!-- Direct messages will be populated here by loadFriendsForDM() -->
@@ -828,28 +1961,66 @@
                     <div class="chat-header-title" id="chatTitle">💬 Select a friend to chat</div>
                 </div>
                 <div class="chat-header-actions">
+                    <span class="build-badge" title="Frontend build version">v2.2.0</span>
+                    <button class="header-btn" onclick="toggleArchiveChat()" title="Archive chat">
+                        <i class="fas fa-archive"></i>
+                    </button>
+                    <button class="header-btn" onclick="startVideoCall()" title="Video call">
+                        <i class="fas fa-video"></i>
+                    </button>
+                    <button class="header-btn success" onclick="addCurrentChatToList()" title="Add chat to list">
+                        <i class="fas fa-bookmark"></i>
+                    </button>
+                    <button class="header-btn" onclick="closeCurrentChat()" title="Close Chat" id="closeChatBtn" style="display: none;">
+                        <i class="fas fa-times-circle"></i>
+                    </button>
+                    <button class="header-btn" onclick="openSettings()" title="Settings">
+                        <i class="fas fa-cog"></i>
+                    </button>
                     <button class="header-btn" onclick="openProfile()" title="Profile">
                         <i class="fas fa-user-circle"></i>
                     </button>
-                    <button class="header-btn" onclick="logout()" title="Logout">
+                    <button class="header-btn danger-hover" onclick="logout()" title="Logout">
                         <i class="fas fa-sign-out-alt"></i>
                     </button>
                 </div>
             </div>
 
             <div id="messages-container"></div>
+            <div id="chatScrollRail" class="chat-scroll-rail hidden">
+                <div id="chatScrollThumb" class="chat-scroll-thumb"></div>
+            </div>
+
+            <div id="mediaDraftPreview" class="draft-preview">
+                <div class="draft-preview-left">
+                    <img id="draftPreviewThumb" class="draft-preview-thumb" alt="Selected media preview">
+                    <div id="draftPreviewEmoji" class="draft-preview-emoji"></div>
+                    <div id="draftPreviewMeta" class="draft-preview-meta">Media selected. Press Send when ready.</div>
+                </div>
+                <button class="draft-clear-btn" onclick="clearPendingMediaDraft()">Clear</button>
+            </div>
             
             <div id="typingIndicator" style="display: none; padding: 10px; color: var(--text-secondary); font-size: 12px; font-style: italic;"></div>
 
             <div class="input-area">
-                <button class="input-btn" onclick="document.getElementById('fileInput').click()" title="Upload file">
-                    <i class="fas fa-paperclip"></i>
+                <button class="input-btn" onclick="document.getElementById('fileInput').click()" title="Upload Image">
+                    <i class="fas fa-image"></i>
+                </button>
+                <button class="input-btn" onclick="document.getElementById('videoInput').click()" title="Upload Video">
+                    <i class="fas fa-video"></i>
+                </button>
+                <button class="input-btn" onclick="togglePicker()" title="Stickers & GIFs">
+                    <i class="fas fa-smile"></i>
+                </button>
+                <button class="input-btn" onclick="toggleVoiceRecorder()" title="Voice message">
+                    <i class="fas fa-microphone"></i>
                 </button>
                 <input type="text" id="messageInput" placeholder="Message..." onkeypress="handleMessageKeypress(event)">
                 <button class="input-btn" onclick="sendMessage()" title="Send">
                     <i class="fas fa-paper-plane"></i>
                 </button>
-                <input type="file" id="fileInput" class="input-file" onchange="handleFileUpload(event)" accept="image/*,video/*">
+                <input type="file" id="fileInput" class="input-file" onchange="handleFileUpload(event)" accept="image/*" multiple>
+                <input type="file" id="videoInput" class="input-file" onchange="handleFileUpload(event)" accept="video/*" multiple>
             </div>
         </div>
 
@@ -882,6 +2053,11 @@
                     <input type="file" id="profileImageInput" class="input-file" onchange="uploadProfileImage(event)" accept="image/*" style="display: none;">
                     <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">Click to upload your profile picture</p>
                 </div>
+                <div class="form-field">
+                    <label>Share Profile</label>
+                    <button class="save-btn" onclick="shareProfileLink()" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">📋 Copy Profile Link</button>
+                    <p style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">Share this link with friends to connect</p>
+                </div>
                 <div class="form-field">
                     <label>Username</label>
                     <input type="text" id="editUsername" placeholder="Username">
@@ -890,6 +2066,10 @@
                     <label>Bio</label>
                     <textarea id="editBio" placeholder="Tell us about yourself"></textarea>
                 </div>
+                <div class="form-field">
+                    <label>Phone Number</label>
+                    <input type="tel" id="editPhoneNumber" placeholder="Add your phone number">
+                </div>
                 <button class="save-btn" onclick="saveProfile()">Save Profile</button>
             </div>
 
@@ -922,7 +2102,334 @@
         </div>
     </div>
 
+    <!-- TOAST NOTIFICATIONS -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <!-- STICKER/GIF PICKER -->
+    <div class="picker-panel" id="pickerPanel">
+        <div class="picker-tabs">
+            <button class="picker-tab active" onclick="switchPickerTab('stickers')">😀 Stickers</button>
+            <button class="picker-tab" onclick="switchPickerTab('gifs')">🎬 GIFs</button>
+        </div>
+        <div class="picker-content" id="pickerContent">
+            <!-- Will be populated by JS -->
+        </div>
+    </div>
+
+    <!-- VOICE RECORDER -->
+    <div class="voice-recorder" id="voiceRecorder">
+        <div class="record-timer" id="recordTimer">00:00</div>
+        <button class="record-button" id="recordButton" onclick="toggleRecording()">
+            <i class="fas fa-microphone"></i>
+        </button>
+        <div class="voice-preview-container" id="voicePreviewContainer" style="display: none;">
+            <div class="voice-preview-label">🎧 Preview your recording:</div>
+            <audio id="voicePreview" controls style="width: 100%; margin-bottom: 8px;"></audio>
+        </div>
+        <div style="display: flex; gap: 10px; width: 100%;">
+            <button class="save-btn" onclick="sendVoiceMessage()" style="padding: 8px 16px; flex: 1;" disabled>Send Voice Message</button>
+            <button class="save-btn" onclick="cancelRecording()" style="padding: 8px 16px; background: var(--danger); flex: 1;">Cancel</button>
+        </div>
+    </div>
+
+    <!-- SETTINGS PANEL -->
+    <div class="settings-panel" id="settingsPanel">
+        <div class="settings-header">
+            <h2>⚙️ Settings</h2>
+            <button class="header-btn" onclick="closeSettings()"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="settings-body">
+            <div class="settings-nav">
+                <div class="settings-nav-item active" onclick="switchSettingsTab('account')">👤 Account</div>
+                <div class="settings-nav-item" onclick="switchSettingsTab('privacy')">🔒 Privacy</div>
+                <div class="settings-nav-item" onclick="switchSettingsTab('chat')">💬 Chat</div>
+                <div class="settings-nav-item" onclick="switchSettingsTab('notifications')">🔔 Notifications</div>
+                <div class="settings-nav-item" onclick="switchSettingsTab('appearance')">🎨 Appearance</div>
+                <div class="settings-nav-item" onclick="switchSettingsTab('stats')">📊 Statistics</div>
+            </div>
+            <div class="settings-content">
+                <!-- Account Settings -->
+                <div class="settings-section active" id="accountSettings">
+                    <h3>Account Settings</h3>
+                    <div class="settings-item">
+                        <div class="settings-label">Email</div>
+                        <div class="settings-description">Your current email address</div>
+                        <input type="email" id="settingsEmail" class="form-group input" readonly style="background: var(--bg-color); color: var(--text-secondary);">
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Change Username</div>
+                        <div class="settings-description">Update your display name</div>
+                        <input type="text" id="settingsUsername" placeholder="New username" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); margin-bottom: 8px;">
+                        <button class="save-btn" onclick="updateUsername()">Update Username</button>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Delete Account</div>
+                        <div class="settings-description">Permanently delete your account and all data</div>
+                        <button class="save-btn danger-hover" onclick="showToast('Feature coming soon!', 'warning')" style="background: var(--danger);">Delete Account</button>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Switch Account</div>
+                        <div class="settings-description">Quickly switch between previously signed-in accounts</div>
+                        <select id="accountSwitcher" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); margin-bottom: 8px;"></select>
+                        <button class="secondary-btn" onclick="switchAccount()">Switch Account</button>
+                    </div>
+                </div>
+
+                <!-- Privacy Settings -->
+                <div class="settings-section" id="privacySettings">
+                    <h3>Privacy & Safety</h3>
+                    <div class="settings-item">
+                        <div class="settings-label">Who can send you friend requests</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" checked id="allowFriendRequests">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Show online status</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" checked id="showOnlineStatus">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Read receipts</div>
+                        <div class="settings-description">Let others know when you've read their messages</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" checked id="readReceipts">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Chat Settings -->
+                <div class="settings-section" id="chatSettings">
+                    <h3>Chat Settings</h3>
+                    <div class="settings-item">
+                        <div class="settings-label">Enter to send</div>
+                        <div class="settings-description">Press Enter to send messages (Shift+Enter for new line)</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" checked id="enterToSend">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Show typing indicator</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" checked id="showTypingIndicator">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Auto-play GIFs</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" checked id="autoplayGifs">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">🎤 Microphone</div>
+                        <div class="settings-description">Select audio input device for voice messages</div>
+                        <select id="microphoneSelector" onchange="saveAudioSettings()" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); margin-top: 8px;">
+                            <option value="default">Default Microphone</option>
+                        </select>
+                        <button class="secondary-btn" onclick="refreshAudioDevices()" style="margin-top: 8px; padding: 6px 12px; font-size: 13px;">🔄 Refresh Devices</button>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">🔊 Speaker / Earphones</div>
+                        <div class="settings-description">Select audio output device for playback</div>
+                        <select id="speakerSelector" onchange="saveAudioSettings()" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); margin-top: 8px;">
+                            <option value="default">Default Speaker</option>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- Notification Settings -->
+                <div class="settings-section" id="notificationSettings">
+                    <h3>Notifications</h3>
+                    <div class="settings-item">
+                        <div class="settings-label">Desktop notifications</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="desktopNotifications">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Message sound</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" checked id="messageSound">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Notification settings</div>
+                        <div class="settings-description">All messages, Only mentions, Nothing</div>
+                        <select id="notificationMode" onchange="saveNotificationSettings()" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary);">
+                            <option value="all">All messages</option>
+                            <option value="mentions">Only mentions</option>
+                            <option value="none">Nothing</option>
+                        </select>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Notify on sent messages (this device)</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="notifyOnSent" onchange="saveNotificationSettings()">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Notify on received messages (this device)</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="notifyOnReceived" checked onchange="saveNotificationSettings()">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                </div>
+
+                <!-- Appearance Settings -->
+                <div class="settings-section" id="appearanceSettings">
+                    <h3>Appearance</h3>
+                    <div class="settings-item">
+                        <div class="settings-label">Theme</div>
+                        <div class="settings-description">Choose your preferred theme</div>
+                        <select id="themeSelector" onchange="changeTheme(this.value)" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary);">
+                            <option value="dark">Dark</option>
+                            <option value="light">Light</option>
+                            <option value="custom">Custom Colors</option>
+                        </select>
+                    </div>
+                    <div class="settings-item" id="customColorSection" style="display: none;">
+                        <div class="settings-label">🎨 Customize Colors</div>
+                        <div class="settings-description">Change background, text, and icon colors</div>
+                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 10px;">
+                            <div>
+                                <label style="display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-secondary);">Background</label>
+                                <input type="color" id="bgColorPicker" value="#1e1f22" oninput="applySimpleCustomColors()" style="width: 100%; height: 40px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer;">
+                            </div>
+                            <div>
+                                <label style="display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-secondary);">Text Color</label>
+                                <input type="color" id="textColorPicker" value="#ffffff" oninput="applySimpleCustomColors()" style="width: 100%; height: 40px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer;">
+                            </div>
+                            <div>
+                                <label style="display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-secondary);">Icons/Accents</label>
+                                <input type="color" id="accentColorPicker" value="#5865F2" oninput="applySimpleCustomColors()" style="width: 100%; height: 40px; border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer;">
+                            </div>
+                        </div>
+                        <button class="secondary-btn" onclick="resetSimpleCustomColors()" style="margin-top: 10px; width: 100%; padding: 8px;">Reset to Default</button>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Compact mode</div>
+                        <div class="settings-description">Show more messages on screen</div>
+                        <label class="toggle-switch">
+                            <input type="checkbox" id="compactMode">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Message font size</div>
+                        <select id="fontSizeSelector" onchange="saveAppearanceSettings()" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary);">
+                            <option value="small">Small</option>
+                            <option value="medium" selected>Medium</option>
+                            <option value="large">Large</option>
+                        </select>
+                    </div>
+                    <div class="settings-item">
+                        <div class="settings-label">Disappearing messages</div>
+                        <div class="settings-description">Auto-remove newly received/sent messages from your screen</div>
+                        <select id="disappearTime" onchange="saveChatSettings()" style="width: 100%; padding: 10px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary);">
+                            <option value="0">Off</option>
+                            <option value="30">30 seconds</option>
+                            <option value="60">1 minute</option>
+                            <option value="300">5 minutes</option>
+                            <option value="3600">1 hour</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <!-- Statistics Settings -->
+                <div class="settings-section" id="statsSettings">
+                    <h3>📊 Your Statistics</h3>
+                    <div class="settings-item" style="padding: 20px; background: var(--bg-color); border-radius: 8px;">
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+                            <div style="background: var(--chat-bg); padding: 16px; border-radius: 6px; text-align: center; border: 1px solid var(--border-color);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--primary-color);" id="statMessagesCount">0</div>
+                                <div style="font-size: 13px; color: var(--text-secondary); margin-top: 8px;">Messages Sent</div>
+                            </div>
+                            <div style="background: var(--chat-bg); padding: 16px; border-radius: 6px; text-align: center; border: 1px solid var(--border-color);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--primary-color);" id="statTotalChars">0</div>
+                                <div style="font-size: 13px; color: var(--text-secondary); margin-top: 8px;">Characters Typed</div>
+                            </div>
+                            <div style="background: var(--chat-bg); padding: 16px; border-radius: 6px; text-align: center; border: 1px solid var(--border-color);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--primary-color);" id="statReactionsGiven">0</div>
+                                <div style="font-size: 13px; color: var(--text-secondary); margin-top: 8px;">Reactions Given</div>
+                            </div>
+                            <div style="background: var(--chat-bg); padding: 16px; border-radius: 6px; text-align: center; border: 1px solid var(--border-color);">
+                                <div style="font-size: 32px; font-weight: bold; color: var(--primary-color);" id="statQuizCorrect">0</div>
+                                <div style="font-size: 13px; color: var(--text-secondary); margin-top: 8px;">Quiz Correct</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="settings-item">
+                        <button class="save-btn" onclick="resetUserStats()" style="width: 100%;">Reset Statistics</button>
+                    </div>
+                    <div class="settings-item">
+                        <button class="primary-btn" onclick="startQuiz()" style="width: 100%; padding: 12px; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold;">🎯 Take a Quiz Question</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- COMMUNITIES MODAL -->
+        <div class="modal-content">
+            <h2><i class="fas fa-globe"></i> Communities</h2>
+            <p style="margin-top: 10px; color: var(--text-secondary);">Join public communities to discover people with shared interests.</p>
+            <div id="communitiesList" style="margin-top: 16px;"></div>
+            <button class="save-btn" onclick="closeCommunitiesModal()" style="margin-top: 20px;">Close</button>
+        </div>
+    </div>
+
+    <!-- GROUPS MODAL -->
+    <div class="modal hidden" id="groupsModal">
+        <div class="modal-content">
+            <h2><i class="fas fa-user-group"></i> Groups</h2>
+            <p style="margin-top: 10px; color: var(--text-secondary);">Create and manage your own small group chats.</p>
+            <div id="groupsList" style="margin-top: 16px;"></div>
+            <button class="save-btn" onclick="closeGroupsModal()" style="margin-top: 20px;">Close</button>
+        </div>
+    </div>
+
+    <!-- QR CODE MODAL -->
+    <div class="qr-modal" id="qrModal">
+        <div class="qr-modal-content">
+            <h2 class="qr-modal-title">📱 Friend Request QR Code</h2>
+            <p class="qr-modal-subtitle">Let your friends scan this code to send you a friend request!</p>
+            <div class="qr-code-container">
+                <canvas id="qrCodeCanvas" width="200" height="200"></canvas>
+            </div>
+            <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 16px;">Your ID: <strong id="qrUserId" style="color: var(--primary-color);"></strong></p>
+            <button class="qr-modal-close" onclick="closeQRCodeModal()">Close</button>
+        </div>
+    </div>
+
+    <!-- MEDIA PREVIEW PANEL -->
+    <div class="media-preview-panel" id="mediaPreviewPanel">
+        <div class="media-preview-header">
+            <h3 class="media-preview-title">📸 Copied Media</h3>
+            <button class="media-preview-close" onclick="closeMediaPreview()">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="media-preview-content" id="mediaPreviewContent">
+            <!-- Copied media will be displayed here -->
+        </div>
+    </div>
+
+    <!-- CUSTOM DIALOG MODAL (replaces alert/confirm/prompt) -->
+    <div id="customDialog" style="display: none;"></div>
+
     <script src="/socket.io/socket.io.js"></script>
-    <script src="client.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <script src="client.js?v=2.2.0"></script>
 </body>
 </html>

package-lock.json

@@ -14,23 +14,14 @@
         "dotenv": "^16.3.1",
         "express": "^4.18.2",
         "jsonwebtoken": "^9.0.2",
-        "mongoose": "^7.5.0",
         "multer": "^1.4.5-lts.1",
         "nodemon": "^3.0.1",
+        "pg": "^8.11.3",
+        "sequelize": "^6.35.2",
         "socket.io": "^4.5.4",
         "uuid": "^9.0.0"
       }
     },
-    "node_modules/@mongodb-js/saslprep": {
-      "version": "1.4.6",
-      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.4.6.tgz",
-      "integrity": "sha512-y+x3H1xBZd38n10NZF/rEBlvDOOMQ6LKUTHqr8R9VkJ+mmQOYtJFxIlkkK8fZrtOiL6VixbOBWMbZGBdal3Z1g==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "sparse-bitfield": "^3.0.3"
-      }
-    },
     "node_modules/@socket.io/component-emitter": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
@@ -46,6 +37,21 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "25.3.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.3.tgz",
@@ -55,22 +61,12 @@
         "undici-types": "~7.18.0"
       }
     },
-    "node_modules/@types/webidl-conversions": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
-      "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==",
+    "node_modules/@types/validator": {
+      "version": "13.15.10",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.15.10.tgz",
+      "integrity": "sha512-T8L6i7wCuyoK8A/ZeLYt1+q0ty3Zb9+qbSSvrIVitzT3YjZqkTZ40IbRsPanlB4h1QB3JVL1SYCdR6ngtFYcuA==",
       "license": "MIT"
     },
-    "node_modules/@types/whatwg-url": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-8.2.2.tgz",
-      "integrity": "sha512-FtQu10RWgn3D9U4aazdwIE2yzphmTJREDqNdODHrbrZmmMqI0vMheC/6NE/J1Yveaj8H+ela+YwWTjq5PGmuhA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "@types/webidl-conversions": "*"
-      }
-    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -208,15 +204,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bson": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/bson/-/bson-5.5.1.tgz",
-      "integrity": "sha512-ix0EwukN2EpC0SRWIj/7B5+A6uQMQy6KMREI9qQqvgpkV2frH63T0UDVd1SYedL6dNCmDBYB3QtXi4ISk9YT+g==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=14.20.1"
-      }
-    },
     "node_modules/buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
@@ -424,6 +411,12 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/dottie": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/dottie/-/dottie-2.0.7.tgz",
+      "integrity": "sha512-7lAK2A0b3zZr3UC5aE69CPdCFR4RHW1o2Dr74TqFykxkUCBXSRJum/yPc7g8zRHJqWKomPLHwFLLoUnn8PXXRg==",
+      "license": "MIT"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -815,21 +808,21 @@
       "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
       "license": "ISC"
     },
+    "node_modules/inflection": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.4.tgz",
+      "integrity": "sha512-6I/HUDeYFfuNCVS3td055BaXBwKYuzw7K3ExVMStBowKo9oOAMJIXIHvdyR3iboTCp1b+1i5DSkIZTcwIktuDw==",
+      "engines": [
+        "node >= 0.4.0"
+      ],
+      "license": "MIT"
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
-    "node_modules/ip-address": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
-      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -930,14 +923,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/kareem": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.5.1.tgz",
-      "integrity": "sha512-7jFxRVm+jD+rkq3kY0iZDJfsO2/t4BBPeEb2qKn2lR/9KhuksYk5hxzfRYWMPV8P/x2d0kHD306YyWLzjjH+uA==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=12.0.0"
-      }
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
     },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
@@ -999,13 +989,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/memory-pager": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
-      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -1093,98 +1076,25 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/mongodb": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-5.9.2.tgz",
-      "integrity": "sha512-H60HecKO4Bc+7dhOv4sJlgvenK4fQNqqUIlXxZYQNbfEWSALGAwGoyJd/0Qwk4TttFXUOHJ2ZJQe/52ScaUwtQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "bson": "^5.5.0",
-        "mongodb-connection-string-url": "^2.6.0",
-        "socks": "^2.7.1"
-      },
-      "engines": {
-        "node": ">=14.20.1"
-      },
-      "optionalDependencies": {
-        "@mongodb-js/saslprep": "^1.1.0"
-      },
-      "peerDependencies": {
-        "@aws-sdk/credential-providers": "^3.188.0",
-        "@mongodb-js/zstd": "^1.0.0",
-        "kerberos": "^1.0.0 || ^2.0.0",
-        "mongodb-client-encryption": ">=2.3.0 <3",
-        "snappy": "^7.2.2"
-      },
-      "peerDependenciesMeta": {
-        "@aws-sdk/credential-providers": {
-          "optional": true
-        },
-        "@mongodb-js/zstd": {
-          "optional": true
-        },
-        "kerberos": {
-          "optional": true
-        },
-        "mongodb-client-encryption": {
-          "optional": true
-        },
-        "snappy": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/mongodb-connection-string-url": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-2.6.0.tgz",
-      "integrity": "sha512-WvTZlI9ab0QYtTYnuMLgobULWhokRjtC7db9LtcVfJ+Hsnyr5eo6ZtNAt3Ly24XZScGMelOcGtm7lSn0332tPQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@types/whatwg-url": "^8.2.1",
-        "whatwg-url": "^11.0.0"
-      }
-    },
-    "node_modules/mongoose": {
-      "version": "7.8.9",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-7.8.9.tgz",
-      "integrity": "sha512-V3GBAJbmOAdzEP8murOvlg7q1szlbe4jTBRyW+JBHRduJBe7F9dk5eyqJDTuYrdBcOOWfLbr6AgXrDK7F0/o5A==",
-      "license": "MIT",
-      "dependencies": {
-        "bson": "^5.5.0",
-        "kareem": "2.5.1",
-        "mongodb": "5.9.2",
-        "mpath": "0.9.0",
-        "mquery": "5.0.0",
-        "ms": "2.1.3",
-        "sift": "16.0.1"
-      },
-      "engines": {
-        "node": ">=14.20.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mongoose"
-      }
-    },
-    "node_modules/mpath": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz",
-      "integrity": "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==",
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
       "license": "MIT",
       "engines": {
-        "node": ">=4.0.0"
+        "node": "*"
       }
     },
-    "node_modules/mquery": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/mquery/-/mquery-5.0.0.tgz",
-      "integrity": "sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg==",
+    "node_modules/moment-timezone": {
+      "version": "0.5.48",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.48.tgz",
+      "integrity": "sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==",
       "license": "MIT",
       "dependencies": {
-        "debug": "4.x"
+        "moment": "^2.29.4"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": "*"
       }
     },
     "node_modules/ms": {
@@ -1306,6 +1216,96 @@
       "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "license": "MIT"
     },
+    "node_modules/pg": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
+      "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "pg-connection-string": "^2.12.0",
+        "pg-pool": "^3.13.0",
+        "pg-protocol": "^1.13.0",
+        "pg-types": "2.2.0",
+        "pgpass": "1.0.5"
+      },
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "optionalDependencies": {
+        "pg-cloudflare": "^1.3.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pg-cloudflare": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.3.0.tgz",
+      "integrity": "sha512-6lswVVSztmHiRtD6I8hw4qP/nDm1EJbKMRhf3HCYaqud7frGysPv7FYJ5noZQdhQtN2xJnimfMtvQq21pdbzyQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/pg-connection-string": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.12.0.tgz",
+      "integrity": "sha512-U7qg+bpswf3Cs5xLzRqbXbQl85ng0mfSV/J0nnA31MCLgvEaAo7CIhmeyrmJpOr7o+zm0rXK+hNnT5l9RHkCkQ==",
+      "license": "MIT"
+    },
+    "node_modules/pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/pg-pool": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.13.0.tgz",
+      "integrity": "sha512-gB+R+Xud1gLFuRD/QgOIgGOBE2KCQPaPwkzBBGC9oG69pHTkhQeIuejVIk3/cnDyX39av2AxomQiyPT13WKHQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "pg": ">=8.0"
+      }
+    },
+    "node_modules/pg-protocol": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.13.0.tgz",
+      "integrity": "sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==",
+      "license": "MIT"
+    },
+    "node_modules/pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/pgpass": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "license": "MIT",
+      "dependencies": {
+        "split2": "^4.1.0"
+      }
+    },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -1318,6 +1318,45 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postgres-bytea": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.1.tgz",
+      "integrity": "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -1343,15 +1382,6 @@
       "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
       "license": "MIT"
     },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/qs": {
       "version": "6.14.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
@@ -1424,6 +1454,12 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/retry-as-promised": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-7.1.1.tgz",
+      "integrity": "sha512-hMD7odLOt3LkTjcif8aRZqi/hybjpLNgSk5oF5FCowfCjok6LukpN2bDX7R5wDmbgBQFn7YoBxSagmtXHaJYJw==",
+      "license": "MIT"
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -1501,6 +1537,86 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/sequelize": {
+      "version": "6.37.7",
+      "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-6.37.7.tgz",
+      "integrity": "sha512-mCnh83zuz7kQxxJirtFD7q6Huy6liPanI67BSlbzSYgVNl5eXVdE2CN1FuAeZwG1SNpGsNRCV+bJAVVnykZAFA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/sequelize"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.1.8",
+        "@types/validator": "^13.7.17",
+        "debug": "^4.3.4",
+        "dottie": "^2.0.6",
+        "inflection": "^1.13.4",
+        "lodash": "^4.17.21",
+        "moment": "^2.29.4",
+        "moment-timezone": "^0.5.43",
+        "pg-connection-string": "^2.6.1",
+        "retry-as-promised": "^7.0.4",
+        "semver": "^7.5.4",
+        "sequelize-pool": "^7.1.0",
+        "toposort-class": "^1.0.1",
+        "uuid": "^8.3.2",
+        "validator": "^13.9.0",
+        "wkx": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ibm_db": {
+          "optional": true
+        },
+        "mariadb": {
+          "optional": true
+        },
+        "mysql2": {
+          "optional": true
+        },
+        "oracledb": {
+          "optional": true
+        },
+        "pg": {
+          "optional": true
+        },
+        "pg-hstore": {
+          "optional": true
+        },
+        "snowflake-sdk": {
+          "optional": true
+        },
+        "sqlite3": {
+          "optional": true
+        },
+        "tedious": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sequelize-pool": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/sequelize-pool/-/sequelize-pool-7.1.0.tgz",
+      "integrity": "sha512-G9c0qlIWQSK29pR/5U2JF5dDQeqqHRragoyahj/Nx4KOOQ3CPPfzxnfqFPCSB7x5UgjOgnZ61nSxz+fjDpRlJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/sequelize/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/serve-static": {
       "version": "1.16.3",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
@@ -1594,12 +1710,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/sift": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/sift/-/sift-16.0.1.tgz",
-      "integrity": "sha512-Wv6BjQ5zbhW7VFefWusVP33T/EM0vYikCaQ2qR8yULbsilAT8/wQaXvuQ3ptGLpoKx+lihJE3y2UTgKDyyNHZQ==",
-      "license": "MIT"
-    },
     "node_modules/simple-update-notifier": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
@@ -1612,16 +1722,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/smart-buffer": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
-      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
     "node_modules/socket.io": {
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.3.tgz",
@@ -1663,28 +1763,13 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/socks": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
-      "integrity": "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==",
-      "license": "MIT",
-      "dependencies": {
-        "ip-address": "^10.0.1",
-        "smart-buffer": "^4.2.0"
-      },
+    "node_modules/split2": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+      "license": "ISC",
       "engines": {
-        "node": ">= 10.0.0",
-        "npm": ">= 3.0.0"
-      }
-    },
-    "node_modules/sparse-bitfield": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
-      "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "memory-pager": "^1.0.2"
+        "node": ">= 10.x"
       }
     },
     "node_modules/statuses": {
@@ -1752,6 +1837,12 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort-class": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toposort-class/-/toposort-class-1.0.1.tgz",
+      "integrity": "sha512-OsLcGGbYF3rMjPUf8oKktyvCiUxSbqMMS39m33MAjLTC1DVIH6x3WSt63/M77ihI09+Sdfk1AXvfhCEeUmC7mg==",
+      "license": "MIT"
+    },
     "node_modules/touch": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
@@ -1761,18 +1852,6 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
-    "node_modules/tr46": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
-      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -1841,6 +1920,15 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/validator": {
+      "version": "13.15.26",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.26.tgz",
+      "integrity": "sha512-spH26xU080ydGggxRyR1Yhcbgx+j3y5jbNXk/8L+iRvdIEQ4uTRH2Sgf2dokud6Q4oAtsbNvJ1Ft+9xmm6IZcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -1850,26 +1938,13 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-url": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
-      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+    "node_modules/wkx": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/wkx/-/wkx-0.5.0.tgz",
+      "integrity": "sha512-Xng/d4Ichh8uN4l0FToV/258EjMGU9MGcA0HV2d9B/ZpZB3lqQm7nkOdZdm5GhKtLLhAE7PiVQwN4eN+2YJJUg==",
       "license": "MIT",
       "dependencies": {
-        "tr46": "^3.0.0",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "@types/node": "*"
       }
     },
     "node_modules/ws": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-like-app",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "main": "server.js",
   "scripts": {
     "dev": "nodemon server.js",
@@ -11,7 +11,8 @@
   "dependencies": {
     "express": "^4.18.2",
     "socket.io": "^4.5.4",
-    "mongoose": "^7.5.0",
+    "sequelize": "^6.35.2",
+    "pg": "^8.11.3",
     "jsonwebtoken": "^9.0.2",
     "bcryptjs": "^2.4.3",
     "multer": "^1.4.5-lts.1",

server.js

@@ -4,7 +4,7 @@ const os = require('os');
 const path = require('path');
 const http = require('http');
 const https = require('https');
-const mongoose = require('mongoose');
+const { Sequelize, DataTypes, Op } = require('sequelize');
 const jwt = require('jsonwebtoken');
 const bcrypt = require('bcryptjs');
 const multer = require('multer');
@@ -17,106 +17,199 @@ const app = express();
 // Middleware
 app.use(bodyParser.json({ limit: '50mb' }));
 app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
+
+app.use((req, res, next) => {
+  if (req.path.endsWith('.html') || req.path.endsWith('.js') || req.path.endsWith('.css')) {
+    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
+    res.setHeader('Surrogate-Control', 'no-store');
+  }
+  next();
+});
+
 app.use(express.static(__dirname));
 
-// MongoDB Connection
-mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/discord-app', {
-  useNewUrlParser: true,
-  useUnifiedTopology: true
-}).then(() => console.log('MongoDB connected')).catch(err => console.error('MongoDB connection error:', err));
-
-// ======================== SCHEMAS ========================
-
-// User Schema
-const userSchema = new mongoose.Schema({
-  username: { type: String, required: true, unique: true },
-  email: { type: String, required: true, unique: true },
-  password: { type: String, required: true },
-  avatar: { type: String, default: '' },
-  bio: { type: String, default: 'No bio yet' },
-  status: { type: String, enum: ['online', 'offline', 'away'], default: 'offline' },
-  friends: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],
-  blockedUsers: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],
-  coins: { type: Number, default: 1000 },
-  createdAt: { type: Date, default: Date.now }
+// ======================== DATABASE CONNECTION ========================
+
+const sequelize = new Sequelize(
+  process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5432/discord-app',
+  {
+    dialect: 'postgres',
+    logging: false,
+    protocol: process.env.DATABASE_URL ? 'postgres' : undefined,
+    dialectOptions: process.env.DATABASE_URL ? { ssl: { require: true, rejectUnauthorized: false } } : undefined
+  }
+);
+
+// ======================== MODELS ========================
+
+const User = sequelize.define('User', {
+  id: {
+    type: DataTypes.UUID,
+    defaultValue: DataTypes.UUIDV4,
+    primaryKey: true
+  },
+  username: {
+    type: DataTypes.STRING,
+    allowNull: false,
+    unique: true
+  },
+  email: {
+    type: DataTypes.STRING,
+    allowNull: false,
+    unique: true
+  },
+  password: {
+    type: DataTypes.STRING,
+    allowNull: false
+  },
+  avatar: {
+    type: DataTypes.TEXT,
+    defaultValue: ''
+  },
+  bio: {
+    type: DataTypes.STRING,
+    defaultValue: 'No bio yet'
+  },
+  phoneNumber: {
+    type: DataTypes.STRING,
+    defaultValue: ''
+  },
+  status: {
+    type: DataTypes.ENUM('online', 'offline', 'away'),
+    defaultValue: 'offline'
+  },
+  coins: {
+    type: DataTypes.INTEGER,
+    defaultValue: 1000
+  }
 });
 
-// Channel Schema
-const channelSchema = new mongoose.Schema({
-  channelId: String,
-  name: String,
-  type: { type: String, enum: ['text', 'voice'], default: 'text' },
-  description: String,
-  isPrivate: { type: Boolean, default: false },
-  members: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],
-  createdBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
-  createdAt: { type: Date, default: Date.now }
+const Channel = sequelize.define('Channel', {
+  id: {
+    type: DataTypes.UUID,
+    defaultValue: DataTypes.UUIDV4,
+    primaryKey: true
+  },
+  channelId: DataTypes.STRING,
+  name: DataTypes.STRING,
+  type: {
+    type: DataTypes.ENUM('text', 'voice'),
+    defaultValue: 'text'
+  },
+  description: DataTypes.STRING,
+  isPrivate: {
+    type: DataTypes.BOOLEAN,
+    defaultValue: false
+  }
 });
 
-// Message Schema
-const messageSchema = new mongoose.Schema({
-  messageId: String,
-  channelId: String,
-  sender: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
-  senderUsername: String,
-  content: String,
-  mediaType: { type: String, enum: ['text', 'image', 'video', 'emoji'], default: 'text' },
-  mediaUrl: String,
-  timestamp: { type: Date, default: Date.now },
-  reactions: [{ emoji: String, users: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }] }]
+const Message = sequelize.define('Message', {
+  id: {
+    type: DataTypes.UUID,
+    defaultValue: DataTypes.UUIDV4,
+    primaryKey: true
+  },
+  messageId: DataTypes.STRING,
+  channelId: DataTypes.STRING,
+  senderUsername: DataTypes.STRING,
+  content: DataTypes.TEXT,
+  mediaType: {
+    type: DataTypes.ENUM('text', 'image', 'video', 'emoji', 'sticker', 'gif', 'voice'),
+    defaultValue: 'text'
+  },
+  mediaUrl: DataTypes.TEXT
 });
 
-// Shop Item Schema
-const shopItemSchema = new mongoose.Schema({
-  itemId: String,
-  name: String,
-  description: String,
-  price: Number,
-  category: String,
-  image: String,
-  createdAt: { type: Date, default: Date.now }
+const ShopItem = sequelize.define('ShopItem', {
+  id: {
+    type: DataTypes.UUID,
+    defaultValue: DataTypes.UUIDV4,
+    primaryKey: true
+  },
+  itemId: DataTypes.STRING,
+  name: DataTypes.STRING,
+  description: DataTypes.STRING,
+  price: DataTypes.INTEGER,
+  category: DataTypes.STRING,
+  image: DataTypes.TEXT
 });
 
-// User Inventory Schema
-const inventorySchema = new mongoose.Schema({
-  userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
-  itemId: String,
-  quantity: { type: Number, default: 1 },
-  purchasedAt: { type: Date, default: Date.now }
+const Inventory = sequelize.define('Inventory', {
+  id: {
+    type: DataTypes.UUID,
+    defaultValue: DataTypes.UUIDV4,
+    primaryKey: true
+  },
+  itemId: DataTypes.STRING,
+  quantity: {
+    type: DataTypes.INTEGER,
+    defaultValue: 1
+  }
 });
 
-// Friend Request Schema
-const friendRequestSchema = new mongoose.Schema({
-  from: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
-  to: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
-  status: { type: String, enum: ['pending', 'accepted', 'rejected'], default: 'pending' },
-  createdAt: { type: Date, default: Date.now }
+const FriendRequest = sequelize.define('FriendRequest', {
+  id: {
+    type: DataTypes.UUID,
+    defaultValue: DataTypes.UUIDV4,
+    primaryKey: true
+  },
+  status: {
+    type: DataTypes.ENUM('pending', 'accepted', 'rejected'),
+    defaultValue: 'pending'
+  }
 });
 
-// Direct Message Schema
-const directMessageSchema = new mongoose.Schema({
-  messageId: String,
-  from: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
-  to: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
-  fromUsername: String,
-  toUsername: String,
-  content: String,
-  mediaType: { type: String, enum: ['text', 'image', 'video', 'emoji'], default: 'text' },
-  mediaUrl: String,
-  timestamp: { type: Date, default: Date.now },
-  readBy: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }]
+const DirectMessage = sequelize.define('DirectMessage', {
+  id: {
+    type: DataTypes.UUID,
+    defaultValue: DataTypes.UUIDV4,
+    primaryKey: true
+  },
+  messageId: DataTypes.STRING,
+  fromUsername: DataTypes.STRING,
+  toUsername: DataTypes.STRING,
+  content: DataTypes.TEXT,
+  mediaType: {
+    type: DataTypes.ENUM('text', 'image', 'video', 'emoji', 'sticker', 'gif', 'voice'),
+    defaultValue: 'text'
+  },
+  mediaUrl: DataTypes.TEXT
 });
 
-// Models
-const User = mongoose.model('User', userSchema);
-const Channel = mongoose.model('Channel', channelSchema);
-const Message = mongoose.model('Message', messageSchema);
-const ShopItem = mongoose.model('ShopItem', shopItemSchema);
-const Inventory = mongoose.model('Inventory', inventorySchema);
-const FriendRequest = mongoose.model('FriendRequest', friendRequestSchema);
-const DirectMessage = mongoose.model('DirectMessage', directMessageSchema);
+// ======================== ASSOCIATIONS ========================
+
+User.belongsToMany(User, {
+  as: 'friends',
+  through: 'UserFriends',
+  foreignKey: 'UserId',
+  otherKey: 'FriendId'
+});
+
+User.hasMany(Channel, { foreignKey: 'createdById', as: 'channels' });
+Channel.belongsTo(User, { foreignKey: 'createdById', as: 'creator' });
+
+Channel.belongsToMany(User, { through: 'ChannelMembers', foreignKey: 'ChannelId', otherKey: 'UserId' });
+User.belongsToMany(Channel, { through: 'ChannelMembers', foreignKey: 'UserId', otherKey: 'ChannelId' });
+
+User.hasMany(Message, { foreignKey: 'senderId' });
+Message.belongsTo(User, { foreignKey: 'senderId' });
+
+User.hasMany(Inventory, { foreignKey: 'userId' });
+Inventory.belongsTo(User, { foreignKey: 'userId' });
+
+ShopItem.hasMany(Inventory, { foreignKey: 'shopItemId' });
+Inventory.belongsTo(ShopItem, { foreignKey: 'shopItemId' });
+
+FriendRequest.belongsTo(User, { as: 'from', foreignKey: 'fromId' });
+FriendRequest.belongsTo(User, { as: 'to', foreignKey: 'toId' });
+
+DirectMessage.belongsTo(User, { as: 'sender', foreignKey: 'fromId' });
+DirectMessage.belongsTo(User, { as: 'recipient', foreignKey: 'toId' });
+
+// ======================== AUTH MIDDLEWARE ========================
 
-// Auth Middleware
 const authenticateToken = (req, res, next) => {
   const authHeader = req.headers['authorization'];
   const token = authHeader && authHeader.split(' ')[1];
@@ -132,7 +225,6 @@ const authenticateToken = (req, res, next) => {
 
 // ======================== AUTH ROUTES ========================
 
-// Register
 app.post('/api/register', async (req, res) => {
   try {
     const { username, email, password } = req.body;
@@ -141,30 +233,25 @@ app.post('/api/register', async (req, res) => {
       return res.status(400).json({ error: 'All fields required' });
     }
 
-    if (await User.findOne({ username })) {
-      return res.status(400).json({ error: 'Username already taken' });
-    }
-
-    if (await User.findOne({ email })) {
-      return res.status(400).json({ error: 'Email already registered' });
+    const existingUser = await User.findOne({ where: { [Op.or]: [{ username }, { email }] } });
+    if (existingUser) {
+      return res.status(400).json({ error: existingUser.username === username ? 'Username already taken' : 'Email already registered' });
     }
 
     const hashedPassword = await bcrypt.hash(password, 10);
-    const user = new User({ username, email, password: hashedPassword });
-    await user.save();
+    const user = await User.create({ username, email, password: hashedPassword });
 
     const token = jwt.sign(
-      { userId: user._id, username: user.username },
+      { userId: user.id, username: user.username },
       process.env.JWT_SECRET || 'secret_key'
     );
 
-    res.status(201).json({ token, user: { id: user._id, username, email } });
+    res.status(201).json({ token, user: { id: user.id, username, email } });
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
-// Login
 app.post('/api/login', async (req, res) => {
   try {
     const { email, password } = req.body;
@@ -173,7 +260,7 @@ app.post('/api/login', async (req, res) => {
       return res.status(400).json({ error: 'Email and password required' });
     }
 
-    const user = await User.findOne({ email });
+    const user = await User.findOne({ where: { email } });
     if (!user) {
       return res.status(401).json({ error: 'Invalid credentials' });
     }
@@ -184,40 +271,67 @@ app.post('/api/login', async (req, res) => {
     }
 
     const token = jwt.sign(
-      { userId: user._id, username: user.username },
+      { userId: user.id, username: user.username },
       process.env.JWT_SECRET || 'secret_key'
     );
 
-    res.json({ 
-      token, 
-      user: { 
-        id: user._id, 
-        username: user.username, 
+    res.json({
+      token,
+      user: {
+        id: user.id,
+        username: user.username,
         email: user.email,
         avatar: user.avatar,
         bio: user.bio,
+        phoneNumber: user.phoneNumber,
         coins: user.coins
-      } 
+      }
     });
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
+app.post('/api/reset-password', async (req, res) => {
+  try {
+    const { email, newPassword } = req.body;
+
+    if (!email || !newPassword) {
+      return res.status(400).json({ error: 'Email and new password are required' });
+    }
+
+    if (String(newPassword).length < 6) {
+      return res.status(400).json({ error: 'New password must be at least 6 characters' });
+    }
+
+    const user = await User.findOne({ where: { email } });
+    if (!user) {
+      return res.status(404).json({ error: 'No account found with this email' });
+    }
+
+    user.password = await bcrypt.hash(newPassword, 10);
+    await user.save();
+
+    res.json({ success: true, message: 'Password reset successfully' });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
 // ======================== PROFILE ROUTES ========================
 
-// Get Profile
 app.get('/api/profile/:userId', authenticateToken, async (req, res) => {
   try {
-    const user = await User.findById(req.params.userId).populate('friends');
+    const user = await User.findByPk(req.params.userId, { include: ['friends'] });
     if (!user) return res.status(404).json({ error: 'User not found' });
 
     res.json({
-      id: user._id,
+      id: user.id,
       username: user.username,
       email: user.email,
       avatar: user.avatar,
       bio: user.bio,
+      phoneNumber: user.phoneNumber,
       status: user.status,
       coins: user.coins,
       friends: user.friends,
@@ -228,16 +342,16 @@ app.get('/api/profile/:userId', authenticateToken, async (req, res) => {
   }
 });
 
-// Update Profile
 app.put('/api/profile', authenticateToken, async (req, res) => {
   try {
-    const { username, bio, avatar } = req.body;
-    const user = await User.findById(req.user.userId);
+    const { username, bio, avatar, phoneNumber } = req.body;
+    const user = await User.findByPk(req.user.userId);
 
     if (!user) return res.status(404).json({ error: 'User not found' });
 
     if (username && username !== user.username) {
-      if (await User.findOne({ username })) {
+      const existing = await User.findOne({ where: { username } });
+      if (existing) {
         return res.status(400).json({ error: 'Username already taken' });
       }
       user.username = username;
@@ -245,16 +359,29 @@ app.put('/api/profile', authenticateToken, async (req, res) => {
 
     if (bio) user.bio = bio;
     if (avatar) user.avatar = avatar;
+    if (typeof phoneNumber === 'string') user.phoneNumber = phoneNumber;
 
     await user.save();
 
-    res.json({ 
+    for (const [socketId, onlineUser] of onlineUsers.entries()) {
+      if (onlineUser.userId === user.id) {
+        onlineUsers.set(socketId, {
+          ...onlineUser,
+          username: user.username,
+          avatar: user.avatar
+        });
+      }
+    }
+    io.emit('users update', Array.from(onlineUsers.values()));
+
+    res.json({
       message: 'Profile updated',
       user: {
-        id: user._id,
+        id: user.id,
         username: user.username,
         avatar: user.avatar,
-        bio: user.bio
+        bio: user.bio,
+        phoneNumber: user.phoneNumber
       }
     });
   } catch (error) {
@@ -262,20 +389,29 @@ app.put('/api/profile', authenticateToken, async (req, res) => {
   }
 });
 
-// Upload Profile Image
 app.post('/api/profile/upload', authenticateToken, async (req, res) => {
   try {
     const { avatar } = req.body;
-    const user = await User.findById(req.user.userId);
+    const user = await User.findByPk(req.user.userId);
 
     if (!user) return res.status(404).json({ error: 'User not found' });
 
     if (avatar) {
       user.avatar = avatar;
       await user.save();
+
+      for (const [socketId, onlineUser] of onlineUsers.entries()) {
+        if (onlineUser.userId === user.id) {
+          onlineUsers.set(socketId, {
+            ...onlineUser,
+            avatar: user.avatar
+          });
+        }
+      }
+      io.emit('users update', Array.from(onlineUsers.values()));
     }
 
-    res.json({ 
+    res.json({
       message: 'Profile image updated',
       avatar: user.avatar
     });
@@ -286,42 +422,43 @@ app.post('/api/profile/upload', authenticateToken, async (req, res) => {
 
 // ======================== FRIENDS ROUTES ========================
 
-// Send Friend Request
 app.post('/api/friends/request', authenticateToken, async (req, res) => {
   try {
     const { toUserId } = req.body;
-    const request = new FriendRequest({ from: req.user.userId, to: toUserId });
-    await request.save();
+    await FriendRequest.create({ fromId: req.user.userId, toId: toUserId });
     res.status(201).json({ message: 'Friend request sent' });
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
-// Get Friend Requests
 app.get('/api/friends/requests', authenticateToken, async (req, res) => {
   try {
-    const requests = await FriendRequest.find({ to: req.user.userId, status: 'pending' })
-      .populate('from', 'username avatar');
+    const requests = await FriendRequest.findAll({
+      where: { toId: req.user.userId, status: 'pending' },
+      include: [{ model: User, as: 'from', attributes: ['id', 'username', 'avatar'] }]
+    });
     res.json(requests);
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
-// Accept Friend Request
 app.post('/api/friends/accept', authenticateToken, async (req, res) => {
   try {
     const { requestId } = req.body;
-    const request = await FriendRequest.findById(requestId);
+    const request = await FriendRequest.findByPk(requestId);
 
     if (!request) return res.status(404).json({ error: 'Request not found' });
 
     request.status = 'accepted';
     await request.save();
 
-    await User.findByIdAndUpdate(request.from, { $addToSet: { friends: request.to } });
-    await User.findByIdAndUpdate(request.to, { $addToSet: { friends: request.from } });
+    const fromUser = await User.findByPk(request.fromId);
+    const toUser = await User.findByPk(request.toId);
+
+    await fromUser.addFriend(toUser);
+    await toUser.addFriend(fromUser);
 
     res.json({ message: 'Friend request accepted' });
   } catch (error) {
@@ -329,11 +466,16 @@ app.post('/api/friends/accept', authenticateToken, async (req, res) => {
   }
 });
 
-// Get Friends List
 app.get('/api/friends', authenticateToken, async (req, res) => {
   try {
-    const user = await User.findById(req.user.userId).populate('friends', 'username avatar status bio');
-    res.json(user.friends);
+    const user = await User.findByPk(req.user.userId, {
+      include: {
+        association: 'friends',
+        attributes: ['id', 'username', 'avatar', 'status', 'bio'],
+        through: { attributes: [] }
+      }
+    });
+    res.json(user.friends || []);
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
@@ -341,41 +483,59 @@ app.get('/api/friends', authenticateToken, async (req, res) => {
 
 // ======================== DIRECT MESSAGES ROUTES ========================
 
-// Get DMs with a specific friend
 app.get('/api/dms/:friendId', authenticateToken, async (req, res) => {
   try {
     const { friendId } = req.params;
-    const messages = await DirectMessage.find({
-      $or: [
-        { from: req.user.userId, to: friendId },
-        { from: friendId, to: req.user.userId }
-      ]
-    }).sort({ timestamp: 1 });
-
-    res.json(messages);
+    const messages = await DirectMessage.findAll({
+      where: {
+        [Op.or]: [
+          { fromId: req.user.userId, toId: friendId },
+          { fromId: friendId, toId: req.user.userId }
+        ]
+      },
+      order: [['createdAt', 'ASC']]
+    });
+
+    const userIds = [...new Set(messages.map(msg => msg.fromId))];
+    const users = await User.findAll({
+      where: { id: userIds },
+      attributes: ['id', 'avatar', 'username']
+    });
+    const userMap = new Map(users.map(user => [String(user.id), user]));
+
+    const enriched = messages.map(msg => {
+      const sender = userMap.get(String(msg.fromId));
+      return {
+        ...msg.toJSON(),
+        fromAvatar: sender?.avatar || null,
+        fromUsername: sender?.username || msg.fromUsername,
+        timestamp: msg.createdAt
+      };
+    });
+
+    res.json(enriched);
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
-// Send DM (POST also works in addition to Socket.IO)
 app.post('/api/dms', authenticateToken, async (req, res) => {
   try {
     const { toUserId, content, mediaType, mediaUrl } = req.body;
-    const fromUser = await User.findById(req.user.userId);
-    const toUser = await User.findById(toUserId);
+    const fromUser = await User.findByPk(req.user.userId);
+    const toUser = await User.findByPk(toUserId);
 
     if (!toUser) return res.status(404).json({ error: 'User not found' });
 
-    // Check if users are friends
-    if (!fromUser.friends.includes(toUserId)) {
+    const friends = await fromUser.getFriends({ where: { id: toUserId } });
+    if (friends.length === 0) {
       return res.status(403).json({ error: 'Can only DM friends' });
     }
 
-    const dm = new DirectMessage({
+    const dm = await DirectMessage.create({
       messageId: uuidv4(),
-      from: req.user.userId,
-      to: toUserId,
+      fromId: req.user.userId,
+      toId: toUserId,
       fromUsername: fromUser.username,
       toUsername: toUser.username,
       content,
@@ -383,7 +543,6 @@ app.post('/api/dms', authenticateToken, async (req, res) => {
       mediaUrl: mediaUrl || null
     });
 
-    await dm.save();
     res.status(201).json(dm);
   } catch (error) {
     res.status(500).json({ error: error.message });
@@ -392,22 +551,20 @@ app.post('/api/dms', authenticateToken, async (req, res) => {
 
 // ======================== SHOP ROUTES ========================
 
-// Get Shop Items
 app.get('/api/shop', authenticateToken, async (req, res) => {
   try {
-    const items = await ShopItem.find();
+    const items = await ShopItem.findAll();
     res.json(items);
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
 });
 
-// Buy Shop Item
 app.post('/api/shop/buy', authenticateToken, async (req, res) => {
   try {
     const { itemId } = req.body;
-    const item = await ShopItem.findById(itemId);
-    const user = await User.findById(req.user.userId);
+    const item = await ShopItem.findByPk(itemId);
+    const user = await User.findByPk(req.user.userId);
 
     if (!item) return res.status(404).json({ error: 'Item not found' });
     if (user.coins < item.price) return res.status(400).json({ error: 'Not enough coins' });
@@ -415,8 +572,7 @@ app.post('/api/shop/buy', authenticateToken, async (req, res) => {
     user.coins -= item.price;
     await user.save();
 
-    const inventory = new Inventory({ userId: user._id, itemId: item._id });
-    await inventory.save();
+    await Inventory.create({ userId: user.id, shopItemId: item.id });
 
     res.json({ message: 'Item purchased', coins: user.coins });
   } catch (error) {
@@ -424,43 +580,13 @@ app.post('/api/shop/buy', authenticateToken, async (req, res) => {
   }
 });
 
-// Get User Inventory
 app.get('/api/inventory', authenticateToken, async (req, res) => {
   try {
-    const inventory = await Inventory.find({ userId: req.user.userId }).populate('itemId');
-    res.json(inventory);
-  } catch (error) {
-    res.status(500).json({ error: error.message });
-  }
-});
-
-// ======================== CHANNELS ROUTES ========================
-
-// Create Channel
-app.post('/api/channels', authenticateToken, async (req, res) => {
-  try {
-    const { name, type, description, isPrivate } = req.body;
-    const channel = new Channel({
-      channelId: uuidv4(),
-      name,
-      type,
-      description,
-      isPrivate,
-      createdBy: req.user.userId,
-      members: [req.user.userId]
+    const inventory = await Inventory.findAll({
+      where: { userId: req.user.userId },
+      include: [{ model: ShopItem }]
     });
-    await channel.save();
-    res.status(201).json(channel);
-  } catch (error) {
-    res.status(500).json({ error: error.message });
-  }
-});
-
-// Get All Channels
-app.get('/api/channels', authenticateToken, async (req, res) => {
-  try {
-    const channels = await Channel.find({ $or: [{ isPrivate: false }, { members: req.user.userId }] });
-    res.json(channels);
+    res.json(inventory);
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
@@ -495,23 +621,22 @@ function createServer(appInstance) {
 
 const { server, protocol } = createServer(app);
 const io = require('socket.io')(server, {
+  maxHttpBufferSize: 40 * 1024 * 1024,
   cors: {
     origin: process.env.CORS_ORIGIN ? process.env.CORS_ORIGIN.split(',') : '*',
     methods: ['GET', 'POST']
   }
 });
 
-// Store active connections
 const onlineUsers = new Map();
 
 io.on('connection', (socket) => {
   console.log('User connected:', socket.id);
 
-  // User joins with authentication token
   socket.on('join', async (data) => {
     try {
       const decoded = jwt.verify(data.token, process.env.JWT_SECRET || 'secret_key');
-      const user = await User.findById(decoded.userId);
+      const user = await User.findByPk(decoded.userId);
 
       if (user) {
         socket.userId = decoded.userId;
@@ -528,7 +653,6 @@ io.on('connection', (socket) => {
         user.status = 'online';
         await user.save();
 
-        // Broadcast updated users list
         io.emit('users update', Array.from(onlineUsers.values()));
       }
     } catch (error) {
@@ -536,71 +660,65 @@ io.on('connection', (socket) => {
     }
   });
 
-  // Join a DM room with a friend
   socket.on('join dm', (friendId) => {
     const roomId = [socket.userId, friendId].sort().join('_');
     socket.join(roomId);
     socket.currentDmRoom = roomId;
   });
 
-  // Leave a DM room
   socket.on('leave dm', (friendId) => {
     const roomId = [socket.userId, friendId].sort().join('_');
     socket.leave(roomId);
     socket.currentDmRoom = null;
   });
 
-  // Send DM
   socket.on('send dm', async (data) => {
     try {
       const { toUserId, content, mediaType, mediaUrl } = data;
-      const fromUser = await User.findById(socket.userId);
-      const toUser = await User.findById(toUserId);
+      const fromUser = await User.findByPk(socket.userId);
+      const toUser = await User.findByPk(toUserId);
 
       if (!toUser) {
         socket.emit('error', 'User not found');
         return;
       }
 
-      // Check they are friends
-      if (!fromUser.friends.includes(toUserId)) {
+      const isSelfChat = String(toUserId) === String(socket.userId);
+      const friends = isSelfChat ? [] : await fromUser.getFriends({ where: { id: toUserId } });
+      if (!isSelfChat && friends.length === 0) {
         socket.emit('error', 'Can only DM friends');
         return;
       }
 
-      const dm = new DirectMessage({
+      const dm = await DirectMessage.create({
         messageId: uuidv4(),
-        from: socket.userId,
-        to: toUserId,
-        fromUsername: socket.username,
+        fromId: socket.userId,
+        toId: toUserId,
+        fromUsername: fromUser.username,
         toUsername: toUser.username,
         content,
         mediaType: mediaType || 'text',
         mediaUrl: mediaUrl || null
       });
 
-      await dm.save();
-
-      // Send to DM room
       const roomId = [socket.userId, toUserId].sort().join('_');
       io.to(roomId).emit('dm message', {
         messageId: dm.messageId,
         from: socket.userId,
-        fromUsername: socket.username,
-        fromAvatar: socket.userAvatar,
+        fromUsername: fromUser.username,
+        fromAvatar: fromUser.avatar,
         to: toUserId,
         toUsername: toUser.username,
         content: dm.content,
         mediaType: dm.mediaType,
         mediaUrl: dm.mediaUrl,
-        timestamp: dm.timestamp
+        timestamp: dm.createdAt
       });
     } catch (error) {
       socket.emit('error', error.message);
     }
   });
 
-  // Typing indicator for DMs
   socket.on('dm typing', (friendId) => {
     const roomId = [socket.userId, friendId].sort().join('_');
     socket.broadcast.to(roomId).emit('dm user typing', {
@@ -617,12 +735,11 @@ io.on('connection', (socket) => {
     });
   });
 
-  // Disconnect
   socket.on('disconnect', async () => {
     try {
       const userData = onlineUsers.get(socket.id);
       if (userData) {
-        const user = await User.findById(socket.userId);
+        const user = await User.findByPk(socket.userId);
         if (user) {
           user.status = 'offline';
           await user.save();
@@ -636,7 +753,7 @@ io.on('connection', (socket) => {
   });
 });
 
-// ======================== STARTUP ========================
+// ======================== INITIALIZATION ========================
 
 function getLocalNetworkAddress() {
   const interfaces = os.networkInterfaces();
@@ -653,9 +770,49 @@ function getLocalNetworkAddress() {
 const PORT = process.env.PORT || 3000;
 const HOST = process.env.HOST || '0.0.0.0';
 
-server.listen(PORT, HOST, () => {
-  const networkAddress = getLocalNetworkAddress();
-  console.log(`
+// Migrate ENUM types for media support
+async function migrateMediaTypeEnum() {
+  try {
+    // Check if we need to update the ENUM type
+    const [results] = await sequelize.query(`
+      SELECT EXISTS (
+        SELECT 1 FROM pg_type t 
+        JOIN pg_enum e ON t.oid = e.enumtypid  
+        WHERE t.typname = 'enum_DirectMessages_mediaType' 
+        AND e.enumlabel = 'voice'
+      ) as has_voice;
+    `);
+    
+    if (!results[0].has_voice) {
+      console.log('📦 Migrating mediaType ENUM to include sticker, gif, voice...');
+      
+      // PostgreSQL requires special handling for ENUM changes
+      await sequelize.query(`
+        ALTER TYPE "enum_DirectMessages_mediaType" ADD VALUE IF NOT EXISTS 'sticker';
+        ALTER TYPE "enum_DirectMessages_mediaType" ADD VALUE IF NOT EXISTS 'gif';
+        ALTER TYPE "enum_DirectMessages_mediaType" ADD VALUE IF NOT EXISTS 'voice';
+      `);
+      
+      await sequelize.query(`
+        ALTER TYPE "enum_Messages_mediaType" ADD VALUE IF NOT EXISTS 'sticker';
+        ALTER TYPE "enum_Messages_mediaType" ADD VALUE IF NOT EXISTS 'gif';
+        ALTER TYPE "enum_Messages_mediaType" ADD VALUE IF NOT EXISTS 'voice';
+      `);
+      
+      console.log('✅ ENUM migration complete!');
+    } else {
+      console.log('✅ mediaType ENUM already up to date');
+    }
+  } catch (error) {
+    console.log('ℹ️  ENUM migration skipped (likely first run or different DB)');
+  }
+}
+
+sequelize.sync({ alter: true }).then(async () => {
+  await migrateMediaTypeEnum();
+  server.listen(PORT, HOST, () => {
+    const networkAddress = getLocalNetworkAddress();
+    console.log(`
 ╔═══════════════════════════════════════╗
 ║   🚀 Discord-Like Server Running     ║
 ║                                       ║
@@ -670,7 +827,12 @@ server.listen(PORT, HOST, () => {
 ║   ✓ Media Sharing                    ║
 ║   ✓ Shop System                      ║
 ║   ✓ Real-time Messaging              ║
+║   ✓ PostgreSQL Database              ║
 ║                                       ║
 ╚═══════════════════════════════════════╝
-  `);
-});      
+    `);
+  });
+}).catch(err => {
+  console.error('Database sync error:', err);
+  process.exit(1);
+});