Upload folder using huggingface_hub

index.html

@@ -5,36 +5,38 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>چت روم مینیمال | Minimal Chat</title>
     
-    <!-- Fonts: Vazirmatn for Persian -->
+    <!-- فونت وزیرمتن -->
     <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
-    <!-- Icons: Material Symbols -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <!-- آیکون‌ها -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
     <style>
         :root {
-            --glass-bg: rgba(255, 255, 255, 0.1);
+            --primary-color: #6c5ce7;
+            --secondary-color: #a29bfe;
+            --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --glass-bg: rgba(255, 255, 255, 0.15);
             --glass-border: rgba(255, 255, 255, 0.2);
             --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-            --primary-color: #6c5ce7;
-            --accent-color: #a29bfe;
             --text-color: #ffffff;
-            --text-secondary: #dfe6e9;
-            --danger-color: #ff7675;
-            --msg-bg-self: #6c5ce7;
-            --msg-bg-other: rgba(255, 255, 255, 0.15);
-            --font-main: 'Vazirmatn', sans-serif;
+            --text-secondary: #e0e0e0;
+            --danger: #ff7675;
+            --success: #00b894;
+            --msg-me: rgba(108, 92, 231, 0.6);
+            --msg-other: rgba(255, 255, 255, 0.1);
         }
 
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
+            outline: none;
             -webkit-tap-highlight-color: transparent;
         }
 
         body {
-            font-family: var(--font-main);
-            background: linear-gradient(135deg, #1e1e2f 0%, #2d3436 100%);
+            font-family: 'Vazirmatn', sans-serif;
+            background: var(--bg-gradient);
             color: var(--text-color);
             height: 100vh;
             overflow: hidden;
@@ -43,966 +45,971 @@
             align-items: center;
         }
 
-        /* Animated Background Elements */
-        .bg-shape {
-            position: absolute;
-            border-radius: 50%;
-            filter: blur(80px);
-            z-index: -1;
-            animation: float 10s infinite ease-in-out;
-            opacity: 0.6;
-        }
-        .shape-1 { width: 300px; height: 300px; background: #6c5ce7; top: -50px; left: -50px; }
-        .shape-2 { width: 250px; height: 250px; background: #00cec9; bottom: -50px; right: -50px; animation-delay: 2s; }
-
-        @keyframes float {
-            0%, 100% { transform: translate(0, 0); }
-            50% { transform: translate(20px, 40px); }
-        }
-
-        /* Glassmorphism Utilities */
+        /* --- Glassmorphism Utilities --- */
         .glass {
             background: var(--glass-bg);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
             border: 1px solid var(--glass-border);
             box-shadow: var(--glass-shadow);
+            border-radius: 16px;
         }
 
         .glass-panel {
-            border-radius: 20px;
-            padding: 20px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 12px;
+            padding: 10px;
         }
 
-        /* Auth Screen */
-        #auth-screen {
+        /* --- App Container --- */
+        #app {
+            width: 100%;
+            height: 100%;
+            max-width: 480px; /* Mobile view simulation on desktop */
+            position: relative;
+            overflow: hidden;
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        @media (min-width: 481px) {
+            #app {
+                height: 95vh;
+                border-radius: 24px;
+            }
+        }
+
+        /* --- Screens --- */
+        .screen {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
-            max-width: 400px;
             height: 100%;
             display: flex;
             flex-direction: column;
-            justify-content: center;
+            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s;
+            opacity: 0;
+            pointer-events: none;
+            transform: scale(0.95);
+            z-index: 1;
+        }
+
+        .screen.active {
+            opacity: 1;
+            pointer-events: all;
+            transform: scale(1);
+            z-index: 10;
+        }
+
+        /* --- Header --- */
+        header {
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
             align-items: center;
-            z-index: 100;
-            transition: transform 0.5s ease;
+            z-index: 20;
         }
 
-        .auth-content {
-            width: 90%;
-            text-align: center;
+        .logo {
+            font-weight: bold;
+            font-size: 1.2rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
 
-        h1 { margin-bottom: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }
-        
-        .input-group {
-            margin-bottom: 1rem;
-            text-align: right;
+        .anycoder-link {
+            font-size: 0.7rem;
+            color: rgba(255,255,255,0.6);
+            text-decoration: none;
         }
 
-        label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); }
+        /* --- Auth Screen --- */
+        #auth-screen {
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 30px;
+        }
 
-        input {
+        .auth-input {
             width: 100%;
-            padding: 12px 16px;
+            padding: 15px;
+            margin: 10px 0;
             border-radius: 12px;
             border: 1px solid var(--glass-border);
-            background: rgba(0, 0, 0, 0.2);
+            background: rgba(255, 255, 255, 0.1);
             color: white;
-            font-family: var(--font-main);
             font-size: 1rem;
-            outline: none;
+            text-align: center;
             transition: 0.3s;
         }
 
-        input:focus { border-color: var(--primary-color); background: rgba(0, 0, 0, 0.4); }
+        .auth-input:focus {
+            background: rgba(255, 255, 255, 0.2);
+            border-color: var(--secondary-color);
+        }
 
         .btn {
-            width: 100%;
-            padding: 12px;
-            border: none;
+            padding: 12px 24px;
             border-radius: 12px;
+            border: none;
             background: var(--primary-color);
             color: white;
-            font-family: var(--font-main);
+            font-family: inherit;
             font-weight: bold;
-            font-size: 1rem;
             cursor: pointer;
-            transition: transform 0.2s, background 0.2s;
-            display: flex;
+            transition: transform 0.1s, background 0.3s;
+            display: inline-flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
         }
 
-        .btn:active { transform: scale(0.98); }
-        .btn-outline { background: transparent; border: 1px solid var(--glass-border); }
-        .btn-sm { padding: 6px 12px; font-size: 0.85rem; width: auto; }
-
-        /* Main App Container */
-        #app-container {
-            width: 100%;
-            height: 100%;
-            max-width: 1200px;
-            display: flex;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.5s;
-            position: relative;
+        .btn:active {
+            transform: scale(0.96);
         }
 
-        #app-container.active { opacity: 1; pointer-events: all; }
-
-        /* Sidebar (Rooms) */
-        .sidebar {
-            width: 300px;
-            display: flex;
-            flex-direction: column;
-            border-left: 1px solid var(--glass-border);
-            background: rgba(0,0,0,0.2);
-            backdrop-filter: blur(10px);
-            transition: transform 0.3s ease;
-            z-index: 10;
+        .btn-full {
+            width: 100%;
+            margin-top: 20px;
         }
 
-        .sidebar-header {
-            padding: 20px;
-            border-bottom: 1px solid var(--glass-border);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+        .btn-icon {
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            border-radius: 50%;
         }
 
-        .brand-link {
-            font-size: 0.75rem;
-            color: var(--accent-color);
-            text-decoration: none;
-            opacity: 0.8;
-            margin-top: 5px;
-            display: inline-block;
+        /* --- Rooms List --- */
+        #rooms-screen {
+            padding-top: 60px; /* Space for header */
         }
 
         .room-list {
             flex: 1;
             overflow-y: auto;
-            padding: 10px;
+            padding: 15px;
         }
 
-        .room-item {
+        .room-card {
             display: flex;
             align-items: center;
-            padding: 12px;
-            border-radius: 12px;
-            margin-bottom: 8px;
+            padding: 15px;
+            margin-bottom: 12px;
             cursor: pointer;
-            transition: background 0.2s;
+            transition: 0.2s;
         }
 
-        .room-item:hover, .room-item.active { background: rgba(255,255,255,0.1); }
-        
-        .avatar {
-            width: 45px;
-            height: 45px;
+        .room-card:active {
+            background: rgba(255, 255, 255, 0.1);
+            transform: scale(0.98);
+        }
+
+        .room-avatar {
+            width: 50px;
+            height: 50px;
             border-radius: 50%;
-            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
-            margin-left: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+            margin-left: 15px;
+            object-fit: cover;
+            border: 2px solid var(--secondary-color);
+        }
+
+        .room-info {
+            flex: 1;
+        }
+
+        .room-name {
             font-weight: bold;
-            color: #333;
-            font-size: 1.2rem;
+            font-size: 1.1rem;
+            margin-bottom: 4px;
         }
 
-        .room-info { flex: 1; }
-        .room-name { font-weight: bold; font-size: 1rem; }
-        .room-last-msg { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
+        .room-last-msg {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 200px;
+        }
 
-        /* Chat Area */
-        .chat-area {
-            flex: 1;
+        .fab {
+            position: absolute;
+            bottom: 30px;
+            left: 30px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: var(--success);
+            color: white;
             display: flex;
-            flex-direction: column;
-            position: relative;
-            background: rgba(255,255,255,0.02);
+            justify-content: center;
+            align-items: center;
+            font-size: 1.5rem;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+            cursor: pointer;
+            z-index: 100;
+            transition: transform 0.2s;
+        }
+
+        .fab:hover {
+            transform: rotate(90deg);
+        }
+
+        /* --- Chat Screen --- */
+        #chat-screen {
+            padding-top: 0;
         }
 
         .chat-header {
-            padding: 15px 20px;
+            height: 70px;
             display: flex;
             align-items: center;
+            padding: 0 10px;
             border-bottom: 1px solid var(--glass-border);
-            background: rgba(0,0,0,0.1);
         }
 
-        .back-btn { display: none; margin-left: 10px; cursor: pointer; }
-
-        .chat-messages {
+        .chat-body {
             flex: 1;
             overflow-y: auto;
-            padding: 20px;
+            padding: 15px;
             display: flex;
             flex-direction: column;
-            gap: 15px;
+            gap: 10px;
         }
 
-        /* Message Bubbles */
         .message {
             max-width: 75%;
-            position: relative;
-            animation: slideUp 0.3s ease;
-            user-select: none; /* Prevent text selection for easier gesture handling */
-        }
-
-        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-
-        .message.self { align-self: flex-end; }
-        .message.other { align-self: flex-start; }
-
-        .bubble {
-            padding: 10px 16px;
+            padding: 10px 14px;
             border-radius: 18px;
+            position: relative;
+            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             font-size: 0.95rem;
             line-height: 1.5;
-            position: relative;
-            word-wrap: break-word;
         }
 
-        .message.self .bubble {
-            background: var(--msg-bg-self);
-            border-bottom-left-radius: 4px;
+        @keyframes popIn {
+            from { opacity: 0; transform: translateY(10px) scale(0.9); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
         }
 
-        .message.other .bubble {
-            background: var(--msg-bg-other);
+        .message.me {
+            align-self: flex-start; /* RTL: Start is Right */
+            background: var(--msg-me);
             border-bottom-right-radius: 4px;
         }
 
+        .message.other {
+            align-self: flex-end; /* RTL: End is Left */
+            background: var(--msg-other);
+            border-bottom-left-radius: 4px;
+        }
+
         .msg-meta {
             font-size: 0.7rem;
-            margin-top: 4px;
             opacity: 0.7;
-            text-align: left;
+            margin-top: 4px;
+            text-align: left; /* Always left for time in bubbles usually, or right in RTL */
             display: flex;
-            align-items: center;
             justify-content: flex-end;
-            gap: 4px;
+            gap: 5px;
+            align-items: center;
         }
 
         .reply-preview {
+            background: rgba(0,0,0,0.2);
+            padding: 5px 8px;
+            border-radius: 8px;
+            margin-bottom: 8px;
             font-size: 0.8rem;
-            padding-right: 8px;
-            border-right: 3px solid rgba(255,255,255,0.5);
-            margin-bottom: 6px;
-            color: rgba(255,255,255,0.8);
-            background: rgba(0,0,0,0.1);
-            padding: 4px 8px;
-            border-radius: 4px;
-            display: inline-block;
+            border-right: 3px solid var(--secondary-color);
+            display: flex;
+            flex-direction: column;
         }
 
-        .reactions {
-            display: flex;
-            gap: 5px;
-            margin-top: 5px;
-            justify-content: flex-end;
+        .reply-owner {
+            font-size: 0.7rem;
+            font-weight: bold;
+            color: var(--secondary-color);
         }
-        
-        .reaction-badge {
-            background: rgba(0,0,0,0.3);
-            border-radius: 10px;
-            padding: 2px 6px;
-            font-size: 0.75rem;
+
+        .message-actions {
+            position: absolute;
+            top: -30px;
+            left: 0;
+            background: rgba(0,0,0,0.8);
+            border-radius: 20px;
+            padding: 5px;
+            display: none; /* Shown on long press */
+            gap: 10px;
+            white-space: nowrap;
+        }
+
+        .message.selected .message-actions {
             display: flex;
-            align-items: center;
-            gap: 2px;
         }
 
-        /* Input Area */
-        .chat-input-area {
-            padding: 15px;
-            background: rgba(0,0,0,0.2);
+        .chat-footer {
+            padding: 10px;
+            background: rgba(0, 0, 0, 0.2);
             display: flex;
             align-items: flex-end;
             gap: 10px;
-            position: relative;
+        }
+
+        .chat-input-wrapper {
+            flex: 1;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            padding: 8px 15px;
+            display: flex;
+            flex-direction: column;
         }
 
         .reply-bar {
-            position: absolute;
-            top: -40px;
-            left: 15px;
-            right: 15px;
-            background: rgba(255,255,255,0.1);
-            padding: 8px;
-            border-radius: 8px;
-            font-size: 0.8rem;
             display: none;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            padding-bottom: 5px;
+            margin-bottom: 5px;
+            font-size: 0.8rem;
+            color: var(--secondary-color);
             justify-content: space-between;
             align-items: center;
         }
 
-        textarea {
-            flex: 1;
-            background: rgba(255,255,255,0.1);
+        .chat-input {
+            width: 100%;
+            background: transparent;
             border: none;
-            border-radius: 20px;
-            padding: 12px;
             color: white;
-            font-family: var(--font-main);
             resize: none;
             max-height: 100px;
-            outline: none;
+            min-height: 24px;
+            font-family: inherit;
         }
 
-        .icon-btn {
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            padding: 8px;
-            border-radius: 50%;
-            transition: 0.2s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .icon-btn:hover { background: rgba(255,255,255,0.1); color: white; }
-        .send-btn { background: var(--primary-color); color: white; }
-        .send-btn:hover { background: var(--accent-color); }
-
-        /* Context Menu (Long Press) */
-        .context-menu {
-            position: absolute;
-            background: #2d3436;
-            border: 1px solid var(--glass-border);
-            border-radius: 12px;
-            padding: 8px;
+        /* --- Reactions --- */
+        .reaction-bar {
             display: flex;
-            flex-direction: column;
             gap: 5px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
-            z-index: 1000;
-            display: none;
-            min-width: 140px;
+            margin-top: 5px;
+            justify-content: flex-end;
         }
 
-        .ctx-item {
-            padding: 8px 12px;
+        .reaction-badge {
+            font-size: 0.7rem;
+            background: rgba(0,0,0,0.3);
+            border-radius: 10px;
+            padding: 2px 6px;
             display: flex;
             align-items: center;
-            gap: 10px;
-            cursor: pointer;
-            border-radius: 8px;
-            font-size: 0.9rem;
-            color: white;
-        }
-        
-        .ctx-item:hover { background: rgba(255,255,255,0.1); }
-        .ctx-item.delete { color: var(--danger-color); }
-
-        /* Reaction Picker */
-        .reaction-picker {
-            position: absolute;
-            background: #2d3436;
-            border-radius: 20px;
-            padding: 5px 10px;
-            display: flex;
-            gap: 8px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
-            z-index: 1001;
-            display: none;
-            transform: translateY(-10px);
-            animation: fadeIn 0.2s;
+            gap: 2px;
         }
 
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(0); } to { opacity: 1; transform: translateY(-10px); } }
-
-        .emoji-opt { cursor: pointer; font-size: 1.2rem; transition: transform 0.2s; }
-        .emoji-opt:hover { transform: scale(1.2); }
-
-        /* Modals */
+        /* --- Modals & Overlays --- */
         .modal-overlay {
             position: fixed;
-            top: 0; left: 0; right: 0; bottom: 0;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
             background: rgba(0,0,0,0.6);
             backdrop-filter: blur(5px);
-            z-index: 2000;
-            display: none;
+            z-index: 1000;
+            display: flex;
             justify-content: center;
             align-items: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: 0.3s;
         }
 
-        .modal-overlay.active { display: flex; }
+        .modal-overlay.open {
+            opacity: 1;
+            pointer-events: all;
+        }
 
-        .modal-content {
-            width: 90%;
+        .modal {
+            width: 85%;
             max-width: 350px;
-            background: #2d3436;
-            border: 1px solid var(--glass-border);
-            border-radius: 20px;
             padding: 20px;
+            transform: translateY(20px);
+            transition: 0.3s;
+        }
+
+        .modal-overlay.open .modal {
+            transform: translateY(0);
+        }
+
+        .modal h3 {
+            margin-bottom: 15px;
             text-align: center;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
-            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
 
-        @keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+        .reaction-picker {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 15px;
+        }
+
+        .emoji-btn {
+            font-size: 1.5rem;
+            background: none;
+            border: none;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
 
-        .modal-title { margin-bottom: 15px; font-size: 1.2rem; }
-        .modal-actions { display: flex; gap: 10px; margin-top: 20px; }
+        .emoji-btn:hover {
+            transform: scale(1.3);
+        }
 
-        /* Toast Notification */
-        .toast {
+        /* --- Toast Notification --- */
+        #toast {
             position: fixed;
-            bottom: 20px;
+            bottom: 80px;
             left: 50%;
-            transform: translateX(-50%) translateY(100px);
+            transform: translateX(-50%) translateY(20px);
             background: rgba(0,0,0,0.8);
             color: white;
             padding: 10px 20px;
-            border-radius: 30px;
+            border-radius: 20px;
             font-size: 0.9rem;
-            z-index: 3000;
-            transition: transform 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 8px;
+            opacity: 0;
+            transition: 0.3s;
+            pointer-events: none;
+            z-index: 2000;
+            white-space: nowrap;
         }
-        .toast.show { transform: translateX(-50%) translateY(0); }
 
-        /* Responsive */
-        @media (max-width: 768px) {
-            .sidebar {
-                position: absolute;
-                top: 0; bottom: 0; right: 0;
-                width: 85%;
-                transform: translateX(100%);
-                box-shadow: -5px 0 15px rgba(0,0,0,0.5);
-            }
-            .sidebar.open { transform: translateX(0); }
-            .back-btn { display: block; }
-            #app-container { flex-direction: column; }
+        #toast.show {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0);
+        }
+
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 3px;
         }
     </style>
 </head>
 <body>
 
-    <!-- Animated Background -->
-    <div class="bg-shape shape-1"></div>
-    <div class="bg-shape shape-2"></div>
-
-    <!-- Auth Screen -->
-    <section id="auth-screen" class="glass glass-panel">
-        <div class="auth-content">
-            <h1>ورود به چت روم</h1>
-            <div class="input-group">
-                <label>شماره موبایل</label>
-                <input type="tel" id="mobile-input" placeholder="0912..." maxlength="11">
+    <div id="app" class="glass">
+        
+        <!-- Header (Global) -->
+        <header class="glass-panel" style="margin: 10px; border-radius: 12px; position: absolute; top:0; width: calc(100% - 20px); z-index: 50;">
+            <div class="logo">
+                <i class="fa-solid fa-comments"></i>
+                <span>مینیمال چت</span>
             </div>
-            <button class="btn" onclick="Auth.login()">
-                <span class="material-symbols-rounded">login</span>
-                دریافت کد ورود
-            </button>
-            <div style="margin-top: 15px; font-size: 0.8rem; color: var(--text-secondary);">
-                (برای تست کد ورود ۱۲۳۴ است)
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+                Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square"></i>
+            </a>
+        </header>
+
+        <!-- 1. Auth Screen -->
+        <section id="auth-screen" class="screen active">
+            <div style="text-align: center; margin-bottom: 30px;">
+                <i class="fa-solid fa-lock" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.8;"></i>
+                <h2>ورود به حساب</h2>
+                <p style="opacity: 0.7; font-size: 0.9rem;">برای شروع شماره موبایل خود را وارد کنید</p>
+            </div>
+            
+            <div id="step-phone">
+                <input type="tel" id="phone-input" class="auth-input" placeholder="0912..." maxlength="11">
+                <button class="btn btn-full" onclick="Auth.sendCode()">دریافت کد تایید</button>
             </div>
-        </div>
-    </section>
 
-    <!-- Main App -->
-    <main id="app-container">
-        
-        <!-- Sidebar -->
-        <aside class="sidebar glass" id="sidebar">
-            <div class="sidebar-header">
-                <div>
-                    <h3 id="user-display-name">کاربر</h3>
-                    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">Built with anycoder</a>
-                </div>
-                <button class="icon-btn" onclick="UI.toggleSidebar()" title="منو">
-                    <span class="material-symbols-rounded">menu</span>
-                </button>
+            <div id="step-code" style="display: none;">
+                <input type="number" id="code-input" class="auth-input" placeholder="کد 4 رقمی (تست: 1234)" maxlength="4">
+                <button class="btn btn-full" onclick="Auth.verifyCode()">تایید و ورود</button>
+                <p style="margin-top: 15px; font-size: 0.8rem; cursor: pointer; opacity: 0.8;" onclick="Auth.reset()">ویرایش شماره</p>
             </div>
+        </section>
 
+        <!-- 2. Rooms List Screen -->
+        <section id="rooms-screen" class="screen">
             <div class="room-list" id="room-list-container">
-                <!-- Rooms injected via JS -->
+                <!-- Rooms injected here -->
             </div>
-
-            <div style="padding: 15px; border-top: 1px solid var(--glass-border);">
-                <button class="btn" onclick="Rooms.showCreateModal()">
-                    <span class="material-symbols-rounded">add</span>
-                    اتاق جدید (حداکثر ۳)
-                </button>
+            
+            <!-- Create Room FAB -->
+            <div class="fab" onclick="UI.openModal('create-room-modal')">
+                <i class="fa-solid fa-plus"></i>
             </div>
-        </aside>
+        </section>
 
-        <!-- Chat Area -->
-        <section class="chat-area">
-            <header class="chat-header">
-                <span class="material-symbols-rounded back-btn" onclick="UI.toggleSidebar()">arrow_forward</span>
-                
-                <div class="avatar" id="current-room-avatar" style="width: 35px; height: 35px; font-size: 1rem; margin-left: 10px;">?</div>
-                <div style="flex: 1;">
-                    <div class="room-name" id="current-room-name">انتخاب اتاق</div>
-                    <div style="font-size: 0.75rem; color: var(--text-secondary);">آنلاین</div>
-                </div>
-                
-                <button class="icon-btn" onclick="Chat.copyLink()" title="کپی لینک">
-                    <span class="material-symbols-rounded">link</span>
-                </button>
-                <button class="icon-btn" onclick="UI.toggleSidebar()" style="display: none;" id="mobile-menu-btn">
-                   <span class="material-symbols-rounded">more_vert</span>
+        <!-- 3. Chat Screen -->
+        <section id="chat-screen" class="screen">
+            <div class="chat-header glass-panel" style="border-radius: 0; margin: 0; width: 100%;">
+                <button class="btn btn-icon" onclick="UI.showScreen('rooms-screen')">
+                    <i class="fa-solid fa-arrow-right"></i>
                 </button>
-            </header>
-
-            <div class="chat-messages" id="messages-container">
-                <!-- Messages injected via JS -->
-                <div style="text-align: center; color: var(--text-secondary); margin-top: 50px;">
-                    اتاقی را برای شروع گفتگو انتخاب کنید
+                <div class="room-info" style="margin-right: 10px; margin-left: 10px;">
+                    <div class="room-name" id="chat-title">نام اتاق</div>
+                    <div style="font-size: 0.7rem; opacity: 0.7;">آنلاین</div>
                 </div>
+                <button class="btn btn-icon" onclick="Chat.copyLink()">
+                    <i class="fa-solid fa-link"></i>
+                </button>
             </div>
 
-            <div class="reply-bar" id="reply-bar">
-                <span id="reply-text-preview">پاسخ به...</span>
-                <span class="material-symbols-rounded icon-btn" onclick="Chat.cancelReply()" style="color: var(--danger-color);">close</span>
+            <div class="chat-body" id="chat-container" ontouchstart="Gestures.handleTouchStart(event)" ontouchend="Gestures.handleTouchEnd(event)">
+                <!-- Messages injected here -->
             </div>
 
-            <div class="chat-input-area" id="input-area">
-                <button class="icon-btn">
-                    <span class="material-symbols-rounded">attach_file</span>
+            <div class="chat-footer">
+                <button class="btn btn-icon" style="background: rgba(255,255,255,0.1);" onclick="UI.openModal('reactions-modal')">
+                    <i class="fa-regular fa-face-smile"></i>
                 </button>
-                <textarea id="msg-input" rows="1" placeholder="پیامی بنویسید..."></textarea>
-                <button class="icon-btn send-btn" onclick="Chat.sendMessage()">
-                    <span class="material-symbols-rounded">send</span>
+                <div class="chat-input-wrapper">
+                    <div class="reply-bar" id="reply-bar">
+                        <span id="reply-text-preview">پاسخ به...</span>
+                        <i class="fa-solid fa-xmark" style="cursor: pointer;" onclick="Chat.cancelReply()"></i>
+                    </div>
+                    <textarea id="message-input" class="chat-input" rows="1" placeholder="پیام خود را بنویسید..."></textarea>
+                </div>
+                <button class="btn btn-icon" style="background: var(--primary-color);" onclick="Chat.sendMessage()">
+                    <i class="fa-solid fa-paper-plane"></i>
                 </button>
             </div>
         </section>
 
-    </main>
+    </div>
 
     <!-- Modals -->
-    <div class="modal-overlay" id="create-room-modal">
-        <div class="modal-content">
-            <h3 class="modal-title">ایجاد اتاق جدید</h3>
-            <div class="input-group">
-                <input type="text" id="new-room-name" placeholder="نام اتاق">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-outline btn-sm" onclick="UI.closeModal('create-room-modal')">لغو</button>
-                <button class="btn btn-sm" onclick="Rooms.createRoom()">ایجاد</button>
+
+    <!-- Create Room Modal -->
+    <div id="create-room-modal" class="modal-overlay">
+        <div class="modal glass">
+            <h3>ایجاد اتاق جدید</h3>
+            <input type="text" id="new-room-name" class="auth-input" placeholder="نام اتاق">
+            <div style="display: flex; gap: 10px; margin-top: 20px;">
+                <button class="btn" style="flex: 1; background: rgba(255,255,255,0.2);" onclick="UI.closeModal('create-room-modal')">لغو</button>
+                <button class="btn" style="flex: 1; background: var(--success);" onclick="RoomManager.createRoom()">ساخت</button>
             </div>
         </div>
     </div>
 
-    <!-- Context Menu -->
-    <div class="context-menu" id="context-menu">
-        <div class="ctx-item" onclick="Chat.startReply()">
-            <span class="material-symbols-rounded">reply</span> پاسخ
-        </div>
-        <div class="ctx-item" onclick="Reactions.showPicker()">
-            <span class="material-symbols-rounded">sentiment_satisfied_alt</span> واکنش
-        </div>
-        <div class="ctx-item delete" onclick="Chat.deleteMessage()">
-            <span class="material-symbols-rounded">delete</span> حذف
+    <!-- Reaction Picker Modal (Contextual) -->
+    <div id="reactions-modal" class="modal-overlay">
+        <div class="modal glass">
+            <h3>انتخاب ایموجی</h3>
+            <div class="reaction-picker">
+                <button class="emoji-btn" onclick="Chat.addReaction('❤️')">❤️</button>
+                <button class="emoji-btn" onclick="Chat.addReaction('👍')">👍</button>
+                <button class="emoji-btn" onclick="Chat.addReaction('😂')">😂</button>
+                <button class="emoji-btn" onclick="Chat.addReaction('😮')">😮</button>
+                <button class="emoji-btn" onclick="Chat.addReaction('😢')">😢</button>
+                <button class="emoji-btn" onclick="Chat.addReaction('😡')">😡</button>
+            </div>
+            <div style="text-align: center; margin-top: 15px;">
+                <button class="btn" style="background: rgba(255,255,255,0.2); font-size: 0.8rem; padding: 5px 15px;" onclick="UI.closeModal('reactions-modal')">انصراف</button>
+            </div>
         </div>
     </div>
 
-    <!-- Reaction Picker -->
-    <div class="reaction-picker" id="reaction-picker">
-        <span class="emoji-opt" onclick="Reactions.add('❤️')">❤️</span>
-        <span class="emoji-opt" onclick="Reactions.add('👍')">👍</span>
-        <span class="emoji-opt" onclick="Reactions.add('😂')">😂</span>
-        <span class="emoji-opt" onclick="Reactions.add('😮')">😮</span>
-        <span class="emoji-opt" onclick="Reactions.add('😢')">😢</span>
-        <span class="emoji-opt" onclick="Reactions.add('😡')">😡</span>
+    <!-- Context Menu (Long Press) -->
+    <div id="context-menu" class="modal-overlay" style="z-index: 3000;">
+        <div class="modal glass" style="position: absolute; bottom: 100px; width: auto; min-width: 150px; padding: 5px;">
+            <button class="btn" style="width: 100%; justify-content: flex-start; background: transparent;" onclick="Chat.replyToMsg()">
+                <i class="fa-solid fa-reply"></i> پاسخ
+            </button>
+            <button class="btn" style="width: 100%; justify-content: flex-start; background: transparent;" onclick="Chat.deleteMsg()">
+                <i class="fa-solid fa-trash"></i> حذف
+            </button>
+            <button class="btn" style="width: 100%; justify-content: flex-start; background: transparent;" onclick="UI.closeModal('context-menu')">
+                <i class="fa-solid fa-xmark"></i> لغو
+            </button>
+        </div>
     </div>
 
     <!-- Toast -->
-    <div class="toast" id="toast">
-        <span class="material-symbols-rounded">info</span>
-        <span id="toast-msg">پیام سیستم</span>
-    </div>
+    <div id="toast">پیام سیستم</div>
 
     <script>
-        /**
-         * 🚀 MINIMAL CHAT ROOM - SINGLE FILE IMPLEMENTATION
-         * Modules: Store, Auth, UI, Rooms, Chat, Gestures, Reactions
-         */
-
-        // --- STORE (State Management) ---
-        const Store = {
-            user: { phone: '', name: '' },
+        // --- State Management ---
+        const State = {
+            user: null,
+            rooms: [],
             activeRoomId: null,
-            rooms: [
-                { id: 1, name: 'گروه عمومی', lastMsg: 'به چت روم خوش آمدید', avatar: 'ع' },
-                { id: 2, name: 'دوستان', lastMsg: 'کجایی؟', avatar: 'د' }
-            ],
-            messages: {
-                1: [
-                    { id: 101, text: 'سلام به همه!', sender: 'other', time: '10:00', reactions: [] },
-                    { id: 102, text: 'سلام، حالتون چطوره؟', sender: 'self', time: '10:05', reactions: [{emoji:'👍', count:1}] }
-                ],
-                2: [
-                    { id: 201, text: 'امشب میای؟', sender: 'other', time: '09:30', reactions: [] }
-                ]
+            messages: {}, // { roomId: [msgs] }
+            selectedMsgId: null,
+            replyToMsgId: null
+        };
+
+        // --- Data Mockup ---
+        const MockData = {
+            avatars: [
+                'https://picsum.photos/seed/room1/100/100',
+                'https://picsum.photos/seed/room2/100/100',
+                'https://picsum.photos/seed/room3/100/100'
+            ]
+        };
+
+        // --- Utility ---
+        const Utils = {
+            id: () => Math.random().toString(36).substr(2, 9),
+            time: () => {
+                const d = new Date();
+                return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0');
             },
-            selectedMessageId: null, // For context menu actions
-            replyToId: null
+            save: () => localStorage.setItem('minimalChatState', JSON.stringify(State)),
+            load: () => {
+                const data = localStorage.getItem('minimalChatState');
+                if (data) {
+                    const parsed = JSON.parse(data);
+                    State.user = parsed.user;
+                    State.rooms = parsed.rooms;
+                    State.messages = parsed.messages;
+                }
+            }
         };
 
-        // --- AUTH MODULE ---
+        // --- Auth Module ---
         const Auth = {
-            login: () => {
-                const input = document.getElementById('mobile-input');
-                const phone = input.value;
-                
-                if (phone.length < 10) {
-                    UI.showToast('شماره موبایل نامعتبر است');
+            sendCode: () => {
+                const phone = document.getElementById('phone-input').value;
+                if (phone.length < 10 || !phone.startsWith('09')) {
+                    UI.toast('شماره موبایل نامعتبر است');
                     return;
                 }
-
-                // Simulate API call and OTP
-                const otp = prompt('کد تایید (۱۲۳۴):');
-                if (otp === '1234') {
-                    Store.user.phone = phone;
-                    Store.user.name = 'کاربر ' + phone.slice(-4);
-                    
-                    document.getElementById('user-display-name').textContent = Store.user.name;
-                    
-                    // Transition
-                    document.getElementById('auth-screen').style.transform = 'translateY(-100%)';
-                    setTimeout(() => {
-                        document.getElementById('auth-screen').style.display = 'none';
-                        document.getElementById('app-container').classList.add('active');
-                        Rooms.renderList();
-                    }, 500);
+                UI.toast('کد تایید ارسال شد: 1234');
+                document.getElementById('step-phone').style.display = 'none';
+                document.getElementById('step-code').style.display = 'block';
+            },
+            verifyCode: () => {
+                const code = document.getElementById('code-input').value;
+                if (code === '1234') {
+                    const phone = document.getElementById('phone-input').value;
+                    State.user = { phone: phone, name: 'کاربر' };
+                    Utils.save();
+                    UI.toast('خوش آمدید!');
+                    UI.showScreen('rooms-screen');
+                    RoomManager.render();
                 } else {
-                    UI.showToast('کد اشتباه است');
+                    UI.toast('کد اشتباه است');
+                }
+            },
+            reset: () => {
+                document.getElementById('step-phone').style.display = 'block';
+                document.getElementById('step-code').style.display = 'none';
+            },
+            check: () => {
+                Utils.load();
+                if (State.user) {
+                    UI.showScreen('rooms-screen');
+                    RoomManager.render();
                 }
             }
         };
 
-        // --- UI MODULE ---
-        const UI = {
-            toggleSidebar: () => {
-                const sidebar = document.getElementById('sidebar');
-                sidebar.classList.toggle('open');
-            },
+        // --- Room Manager Module ---
+        const RoomManager = {
+            createRoom: () => {
+                const name = document.getElementById('new-room-name').value;
+                if (!name) return UI.toast('نام اتاق الزامی است');
+                
+                if (State.rooms.length >= 3) {
+                    UI.closeModal('create-room-modal');
+                    return UI.toast('حداکثر ۳ اتاق مجاز است');
+                }
 
-            showToast: (msg) => {
-                const toast = document.getElementById('toast');
-                document.getElementById('toast-msg').textContent = msg;
-                toast.classList.add('show');
-                setTimeout(() => toast.classList.remove('show'), 3000);
-            },
+                const newRoom = {
+                    id: Utils.id(),
+                    name: name,
+                    avatar: MockData.avatars[State.rooms.length % 3],
+                    lastMsg: 'اتاق جدید ایجاد شد'
+                };
 
-            openModal: (id) => {
-                document.getElementById(id).classList.add('active');
-                UI.closeContextMenu();
+                State.rooms.unshift(newRoom);
+                State.messages[newRoom.id] = [];
+                Utils.save();
+                
+                document.getElementById('new-room-name').value = '';
+                UI.closeModal('create-room-modal');
+                RoomManager.render();
+                UI.toast('اتاق ایجاد شد');
             },
-
-            closeModal: (id) => {
-                document.getElementById(id).classList.remove('active');
+            joinRoom: (id) => {
+                State.activeRoomId = id;
+                const room = State.rooms.find(r => r.id === id);
+                document.getElementById('chat-title').innerText = room.name;
+                Chat.render();
+                UI.showScreen('chat-screen');
             },
-
-            closeContextMenu: () => {
-                document.getElementById('context-menu').style.display = 'none';
-                document.getElementById('reaction-picker').style.display = 'none';
-            }
-        };
-
-        // --- ROOMS MODULE ---
-        const Rooms = {
-            renderList: () => {
+            render: () => {
                 const container = document.getElementById('room-list-container');
                 container.innerHTML = '';
+                
+                if (State.rooms.length === 0) {
+                    container.innerHTML = '<div style="text-align:center; opacity:0.6; margin-top:50px;">هنوز اتاقی ندارید.<br>برای ساخت دکمه + را بزنید.</div>';
+                    return;
+                }
 
-                Store.rooms.forEach(room => {
-                    const div = document.createElement('div');
-                    div.className = `room-item ${Store.activeRoomId === room.id ? 'active' : ''}`;
-                    div.onclick = () => Rooms.joinRoom(room.id);
-                    div.innerHTML = `
-                        <div class="avatar">${room.avatar}</div>
+                State.rooms.forEach(room => {
+                    const el = document.createElement('div');
+                    el.className = 'room-card glass';
+                    el.onclick = () => RoomManager.joinRoom(room.id);
+                    el.innerHTML = `
+                        <img src="${room.avatar}" class="room-avatar" alt="Avatar">
                         <div class="room-info">
                             <div class="room-name">${room.name}</div>
                             <div class="room-last-msg">${room.lastMsg}</div>
                         </div>
+                        <div style="font-size:0.7rem; opacity:0.5;">${Utils.time()}</div>
                     `;
-                    container.appendChild(div);
+                    container.appendChild(el);
                 });
-            },
+            }
+        };
 
-            joinRoom: (id) => {
-                Store.activeRoomId = id;
-                const room = Store.rooms.find(r => r.id === id);
-                
-                document.getElementById('current-room-name').textContent = room.name;
-                document.getElementById('current-room-avatar').textContent = room.avatar;
+        // --- Chat System Module ---
+        const Chat = {
+            sendMessage: () => {
+                const input = document.getElementById('message-input');
+                const text = input.value.trim();
+                if (!text) return;
+
+                const msg = {
+                    id: Utils.id(),
+                    text: text,
+                    sender: 'me',
+                    time: Utils.time(),
+                    replyTo: State.replyToMsgId ? Chat.findMsg(State.replyToMsgId) : null,
+                    reactions: []
+                };
+
+                if (!State.messages[State.activeRoomId]) State.messages[State.activeRoomId] = [];
+                State.messages[State.activeRoomId].push(msg);
                 
-                // Close sidebar on mobile
-                document.getElementById('sidebar').classList.remove('open');
+                // Update last message in room list
+                const room = State.rooms.find(r => r.id === State.activeRoomId);
+                room.lastMsg = text;
                 
-                Rooms.renderList(); // Update active state class
-                Chat.renderMessages();
-            },
+                Chat.clearReply();
+                input.value = '';
+                Chat.render();
+                Utils.save();
 
-            showCreateModal: () => {
-                if (Store.rooms.length >= 3) {
-                    UI.showToast('شما حداکثر ظرفیت اتاق (۳) را پر کرده‌اید');
-                    return;
-                }
-                UI.openModal('create-room-modal');
+                // Simulate reply
+                setTimeout(() => {
+                    Chat.receiveMockReply();
+                }, 2000);
             },
-
-            createRoom: () => {
-                const nameInput = document.getElementById('new-room-name');
-                const name = nameInput.value.trim();
-                if (!name) return;
-
-                const newId = Date.now();
-                Store.rooms.push({
-                    id: newId,
-                    name: name,
-                    lastMsg: 'اتاق ساخته شد',
-                    avatar: name.charAt(0)
-                });
-                Store.messages[newId] = [];
-
-                UI.closeModal('create-room-modal');
-                nameInput.value = '';
-                Rooms.renderList();
-                Rooms.joinRoom(newId);
-                UI.showToast('اتاق جدید ساخته شد');
-            }
-        };
-
-        // --- CHAT MODULE ---
-        const Chat = {
-            renderMessages: () => {
-                const container = document.getElementById('messages-container');
-                container.innerHTML = '';
+            receiveMockReply: () => {
+                const replies = ['خیلی جالبه!', 'باشه حتما', 'می‌فهمم 😊', 'خوبه', 'فعلاً سرم شلوغه'];
+                const text = replies[Math.floor(Math.random() * replies.length)];
                 
-                const msgs = Store.messages[Store.activeRoomId] || [];
+                const msg = {
+                    id: Utils.id(),
+                    text: text,
+                    sender: 'other',
+                    time: Utils.time(),
+                    replyTo: null,
+                    reactions: []
+                };
                 
-                if (msgs.length === 0) {
-                    container.innerHTML = '<div style="text-align: center; color: var(--text-secondary); margin-top: 50px;">پیامی نیست. شروع کنید!</div>';
-                    return;
-                }
+                State.messages[State.activeRoomId].push(msg);
+                Chat.render();
+                Utils.save();
+            },
+            findMsg: (id) => {
+                return State.messages[State.activeRoomId].find(m => m.id === id);
+            },
+            render: () => {
+                const container = document.getElementById('chat-container');
+                container.innerHTML = '';
+                const msgs = State.messages[State.activeRoomId] || [];
 
                 msgs.forEach(msg => {
-                    const div = document.createElement('div');
-                    div.className = `message ${msg.sender}`;
-                    div.dataset.id = msg.id;
+                    const el = document.createElement('div');
+                    el.className = `message ${msg.sender}`;
+                    el.dataset.id = msg.id;
                     
-                    // Reply HTML
-                    let replyHtml = '';
+                    // Long press event attached to element
+                    el.addEventListener('touchstart', (e) => Gestures.msgTouchStart(e, msg.id), {passive: true});
+                    el.addEventListener('touchend', (e) => Gestures.msgTouchEnd(e), {passive: true});
+
+                    let html = '';
+                    
+                    // Reply Preview
                     if (msg.replyTo) {
-                        const originalMsg = msgs.find(m => m.id === msg.replyTo);
-                        if(originalMsg) {
-                            replyHtml = `<div class="reply-preview">${originalMsg.text}</div>`;
-                        }
+                        html += `
+                            <div class="reply-preview">
+                                <span class="reply-owner">${msg.replyTo.sender === 'me' ? 'شما' : 'دیگران'}</span>
+                                <span>${msg.replyTo.text}</span>
+                            </div>
+                        `;
                     }
 
-                    // Reactions HTML
-                    let reactionsHtml = '';
+                    html += `<div>${msg.text}</div>`;
+                    
+                    // Reactions
                     if (msg.reactions && msg.reactions.length > 0) {
-                        reactionsHtml = `<div class="reactions">
-                            ${msg.reactions.map(r => `<span class="reaction-badge">${r.emoji} ${r.count}</span>`).join('')}
-                        </div>`;
+                        const uniqueReactions = [...new Set(msg.reactions)];
+                        html += `<div class="reaction-bar">`;
+                        uniqueReactions.forEach(r => {
+                            html += `<span class="reaction-badge">${r}</span>`;
+                        });
+                        html += `</div>`;
                     }
 
-                    div.innerHTML = `
-                        <div class="bubble">
-                            ${replyHtml}
-                            ${msg.text}
-                            <div class="msg-meta">
-                                ${msg.time}
-                                ${msg.sender === 'self' ? '<span class="material-symbols-rounded" style="font-size:12px">done_all</span>' : ''}
-                            </div>
-                            ${reactionsHtml}
+                    html += `<div class="msg-meta">${msg.time} <i class="fa-solid fa-check-double" style="font-size:0.6rem"></i></div>`;
+                    
+                    // Context Actions (Hidden by default)
+                    html += `
+                        <div class="message-actions">
+                            <button class="btn-icon" style="width:30px; height:30px; font-size:0.8rem;" onclick="Chat.prepareReply('${msg.id}')">پاسخ</button>
+                            <button class="btn-icon" style="width:30px; height:30px; font-size:0.8rem; color:var(--danger)" onclick="Chat.deleteMsg('${msg.id}')">حذف</button>
                         </div>
                     `;
-                    
-                    // Attach Events for Gestures
-                    Gestures.attach(div, msg.id);
-                    
-                    container.appendChild(div);
+
+                    el.innerHTML = html;
+                    container.appendChild(el);
                 });
 
-                // Scroll to bottom
                 container.scrollTop = container.scrollHeight;
             },
-
-            sendMessage: () => {
-                const input = document.getElementById('msg-input');
-                const text = input.value.trim();
+            prepareReply: (id) => {
+                const msg = Chat.findMsg(id);
+                if (!msg) return;
                 
-                if (!text || !Store.activeRoomId) return;
-
-                const newMsg = {
-                    id: Date.now(),
-                    text: text,
-                    sender: 'self',
-                    time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'}),
-                    replyTo: Store.replyToId,
-                    reactions: []
-                };
-
-                Store.messages[Store.activeRoomId].push(newMsg);
+                State.replyToMsgId = id;
+                const preview = document.getElementById('reply-bar');
+                const text = document.getElementById('reply-text-preview');
                 
-                // Update last message in sidebar
-                const roomIdx = Store.rooms.findIndex(r => r.id === Store.activeRoomId);
-                if(roomIdx > -1) Store.rooms[roomIdx].lastMsg = text;
-
-                input.value = '';
-                Chat.cancelReply();
-                Chat.renderMessages();
-                Rooms.renderList();
-
-                // Simulate Reply from Bot
-                if (Math.random() > 0.5) {
-                    setTimeout(() => {
-                        const botMsg = {
-                            id: Date.now() + 1,
-                            text: 'این یک پاسخ خودکار است 🤖',
-                            sender: 'other',
-                            time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'}),
-                            reactions: []
-                        };
-                        Store.messages[Store.activeRoomId].push(botMsg);
-                        Store.rooms[roomIdx].lastMsg = botMsg.text;
-                        Chat.renderMessages();
-                        Rooms.renderList();
-                    }, 1500);
-                }
+                preview.style.display = 'flex';
+                text.innerText = `پاسخ به: ${msg.text}`;
+                UI.closeModal('context-menu');
+                document.getElementById('message-input').focus();
             },
-
-            deleteMessage: () => {
-                if (!Store.selectedMessageId) return;
-                
-                const msgs = Store.messages[Store.activeRoomId];
-                const idx = msgs.findIndex(m => m.id === Store.selectedMessageId);
-                
+            clearReply: () => {
+                State.replyToMsgId = null;
+                document.getElementById('reply-bar').style.display = 'none';
+            },
+            deleteMsg: (id) => {
+                if(!id) id = State.selectedMsgId;
+                const msgs = State.messages[State.activeRoomId];
+                const idx = msgs.findIndex(m => m.id === id);
                 if (idx > -1) {
                     msgs.splice(idx, 1);
-                    Chat.renderMessages();
-                    UI.showToast('پیام حذف شد');
+                    Chat.render();
+                    Utils.save();
+                    UI.toast('پیام حذف شد');
                 }
-                UI.closeContextMenu();
+                UI.closeModal('context-menu');
             },
-
-            startReply: () => {
-                Store.replyToId = Store.selectedMessageId;
-                const msgs = Store.messages[Store.activeRoomId];
-                const msg = msgs.find(m => m.id === Store.selectedMessageId);
-                
+            copyLink: () => {
+                // Simulate copying a room link
+                const dummyLink = `https://minimalchat.app/room/${State.activeRoomId}`;
+                navigator.clipboard.writeText(dummyLink).then(() => {
+                    UI.toast('لینک اتاق کپی شد');
+                });
+            },
+            addReaction: (emoji) => {
+                const msg = Chat.findMsg(State.selectedMsgId);
                 if (msg) {
-                    document.getElementById('reply-bar').style.display = 'flex';
-                    document.getElementById('reply-text-preview').textContent = `پاسخ به: ${msg.text.substring(0, 20)}...`;
-                    document.getElementById('msg-input').focus();
+                    if (!msg.reactions) msg.reactions = [];
+                    msg.reactions.push(emoji);
+                    Chat.render();
+                    Utils.save();
                 }
-                UI.closeContextMenu();
+                UI.closeModal('reactions-modal');
+                UI.closeModal('context-menu');
             },
+            cancelReply: () => Chat.clearReply()
+        };
 
-            cancelReply: () => {
-                Store.replyToId = null;
-                document.getElementById('reply-bar').style.display = 'none';
+        // --- UI Module ---
+        const UI = {
+            showScreen: (screenId) => {
+                document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+                document.getElementById(screenId).classList.add('active');
             },
-
-            copyLink: () => {
-                const link = `https://chat.app/room/${Store.activeRoomId}`;
-                navigator.clipboard.writeText(link).then(() => {
-                    UI.showToast('لینک اتاق کپی شد');
-                });
+            toast: (msg) => {
+                const el = document.getElementById('toast');
+                el.innerText = msg;
+                el.classList.add('show');
+                setTimeout(() => el.classList.remove('show'), 3000);
+            },
+            openModal: (id) => {
+                document.getElementById(id).classList.add('open');
+            },
+            closeModal: (id) => {
+                document.getElementById(id).classList.remove('open');
             }
         };
 
-        // --- REACTIONS MODULE ---
-        const Reactions = {
-            showPicker: () => {
-                const menu = document.getElementById('context-menu');
-                const picker = document.getElementById('reaction-picker');
-                
-                // Position picker near menu
-                const rect = menu.getBoundingClientRect();
-                picker.style.top = (rect.top - 50) + 'px';
-                picker.style.left = rect.left + 'px';
-                picker.style.display = 'flex';
-                menu.style.display = 'none';
-            },
+        // --- Gestures Module ---
+        const Gestures = {
+            touchStartX: 0,
+            touchStartY: 0,
+            longPressTimer: null,
+            isLongPress: false,
 
-            add: (emoji) => {
-                const msgs = Store.messages[Store.activeRoomId];
-                const msg = msgs.find(m => m.id === Store.selectedMessageId);
+            handleTouchStart: (e) => {
+                Gestures.touchStartX = e.changedTouches[0].screenX;
+            },
+            
+            handleTouchEnd: (e) => {
+                const touchEndX = e.changedTouches[0].screenX;
+                // Swipe Right (in RTL, Right is Back) -> Actually Swipe Left is back visually in LTR, but in RTL:
+                // To go "Back", usually swipe from Right to Left.
+                // Let's implement: Swipe from Right to Left (negative delta) to go back.
                 
-                if (msg) {
-                    // Check if reaction exists
-                    const existing = msg.reactions.find(r => r.emoji === emoji);
-                    if (existing) {
-                        existing.count++;
-                    } else {
-                        msg.reactions.push({ emoji: emoji, count: 1 });
+                if (touchEndX < Gestures.touchStartX - 50) {
+                    // Swipe detected (Right to Left)
+                    const currentScreen = document.querySelector('.screen.active').id;
+                    if (currentScreen === 'chat-screen') {
+                        UI.showScreen('rooms-screen');
                     }
-                    Chat.renderMessages();
                 }
-                UI.closeContextMenu();
-                document.getElementById('reaction-picker').style.display = 'none';
-            }
-        };
-
-        // --- GESTURES MODULE (Touch/Long Press) ---
-        const Gestures = {
-            attach: (element, msgId) => {
-                let pressTimer;
-                const menu = document.getElementById('context-menu');
-
-                const start = (e) => {
-                    // Ignore if clicking links or buttons inside
-                    if (e.target.tagName === 'BUTTON' || e.target.closest('button')) return;
-
-                    pressTimer = setTimeout(() => {
-                        Store.selectedMessageId = msgId;
-                        
-                        // Calculate position
-                        const touch = e.touches ? e.touches[0] : e;
-                        menu.style.top = (touch.clientY - 20) + 'px';
-                        menu.style.left = (touch.clientX - 70) + 'px';
-                        menu.style.display = 'flex';
-                        
-                        // Haptic feedback if available
-                        if (navigator.vibrate) navigator.vibrate(50);
-                    }, 500); // 500ms long press
-                };
+            },
 
-                const cancel = () => {
-                    clearTimeout(pressTimer);
-                };
+            msgTouchStart: (e, id) => {
+                Gestures.isLongPress = false;
+                Gestures.longPressTimer = setTimeout(() => {
+                    Gestures.isLongPress = true;
+                    State.selectedMsgId = id;
+                    UI.openModal('context-menu');
+                    // Visual feedback
+                    e.target.closest('.message').classList.add('selected');
+                }, 600);
+            },
 
-                element.addEventListener('touchstart', start);
-                element.addEventListener('touchend', cancel);
-                element.addEventListener('touchmove', cancel);
-                
-                // Mouse events for desktop testing
-                element.addEventListener('mousedown', start);
-                element.addEventListener('mouseup', cancel);
-                element.addEventListener('mouseleave', cancel);
+            msgTouchEnd: (e) => {
+                clearTimeout(Gestures.longPressTimer);
+                if (Gestures.isLongPress) {
+                    e.target.closest('.message').classList.remove('selected');
+                    // Prevent click if it was a long press
+                    // e.preventDefault(); 
+                }
             }
         };
 
-        // --- INITIALIZATION ---
-        // Close menus when clicking outside
-        document.addEventListener('click', (e) => {
-            const menu = document.getElementById('context-menu');
-            const picker = document.getElementById('reaction-picker');
-            if (!menu.contains(e.target) && !picker.contains(e.target)) {
-                UI.closeContextMenu();
-            }
+        // --- Init ---
+        window.addEventListener('DOMContentLoaded', () => {
+            Auth.check();
+            
+            // Textarea auto-resize
+            const tx = document.getElementById('message-input');
+            tx.addEventListener('input', function() {
+                this.style.height = 'auto';
+                this.style.height = (this.scrollHeight) + 'px';
+            });
         });
 
-        // Handle Enter key to send
-        document.getElementById('msg-input').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                Chat.sendMessage();
-            }
+    </script>
+</body>
+</html>