Update app.py

app.py

@@ -19,8 +19,12 @@ def init_db():
             }, f, indent=4)
 
 def read_db():
-    with open(DB_FILE, 'r') as f:
-        return json.load(f)
+    try:
+        with open(DB_FILE, 'r') as f:
+            return json.load(f)
+    except (FileNotFoundError, json.JSONDecodeError):
+        init_db()
+        return read_db()
 
 def write_db(data):
     with open(DB_FILE, 'w') as f:
@@ -43,18 +47,22 @@ def index():
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
         <style>
             :root {
-                --bg-primary: #0F0F11;
-                --bg-secondary: #18191C;
-                --bg-tertiary: #212328;
-                --bg-hover: #2A2C33;
+                --bg-primary: #0E0E11;
+                --bg-secondary: #17171A;
+                --bg-tertiary: #222227;
+                --bg-hover: #2B2B33;
                 --text-primary: #EAECEF;
                 --text-secondary: #8E9297;
-                --accent-blue: #0088CC;
-                --accent-blue-light: #33AADD;
-                --border-color: #2D2F34;
-                --success-color: #28a745;
-                --error-color: #dc3545;
+                --accent-blue: #007AFF; /* iOS Blue */
+                --accent-blue-dark: #005BBB; /* Deeper Blue */
+                --accent-blue-light: #34C759; /* Greenish Blue */
+                --ton-blue: #0088CC;
+                --ton-teal: #00BFFF;
+                --border-color: #323239;
+                --success-color: #34C759;
+                --error-color: #FF3B30;
                 --font-family: 'Inter', sans-serif;
+                --nav-height: 60px;
             }
 
             * {
@@ -76,60 +84,77 @@ def index():
                 height: 100vh;
                 width: 100vw;
                 display: flex;
-                align-items: center;
-                justify-content: center;
+                flex-direction: column;
             }
-
+            
             .main-container {
+                flex-grow: 1;
                 width: 100%;
-                height: 100%;
+                overflow: hidden;
                 display: flex;
                 flex-direction: column;
-                transition: opacity 0.3s ease;
             }
 
             #login-view {
+                flex-grow: 1;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 text-align: center;
-                width: 100%;
-                height: 100%;
-                background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
+                background: radial-gradient(circle, rgba(0, 136, 204, 0.1) 0%, var(--bg-primary) 70%);
+                padding: 20px;
             }
             #login-view img {
-                width: 100px;
-                height: 100px;
-                margin-bottom: 24px;
-                filter: drop-shadow(0 0 15px rgba(0, 136, 204, 0.5));
+                width: 120px;
+                height: 120px;
+                margin-bottom: 32px;
+                filter: drop-shadow(0 0 20px rgba(0, 136, 204, 0.6));
             }
             #login-view h1 {
-                font-size: 2.8rem;
+                font-size: 3.5rem;
                 font-weight: 700;
-                background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
+                background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal));
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
-                margin-bottom: 12px;
+                margin-bottom: 16px;
             }
             #login-view p {
-                font-size: 1.1rem;
+                font-size: 1.2rem;
                 color: var(--text-secondary);
-                margin-bottom: 40px;
+                margin-bottom: 50px;
+            }
+            #ton-connect-button {
+                 --tc-button-height: 50px;
+                 --tc-button-border-radius: 12px;
             }
 
             #app-view {
                 display: none;
-                width: 100%;
-                height: 100%;
+                flex-direction: column;
+                flex-grow: 1;
+                height: calc(100vh - var(--nav-height)); /* Adjust for nav bar */
             }
             
-            #chatroom-list-view {
+            #content-container {
+                flex-grow: 1;
+                display: flex;
+                overflow: hidden;
+            }
+
+            #chat-container {
                 display: flex;
                 flex-direction: column;
+                flex-grow: 1;
+                width: 100%; /* Start with full width, media query changes */
+            }
+
+            #chatroom-list-view {
+                display: none; /* Hidden by default on mobile */
+                flex-direction: column;
                 height: 100%;
-                width: 100%;
                 background-color: var(--bg-secondary);
+                width: 100%;
             }
             
             .list-header {
@@ -174,7 +199,7 @@ def index():
             .username-input:focus { outline: none; border-color: var(--accent-blue); }
 
             .action-btn {
-                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal));
                 color: white;
                 border: none;
                 padding: 10px 16px;
@@ -186,10 +211,12 @@ def index():
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
             }
-            .action-btn:hover {
-                transform: translateY(-2px);
-                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
+            .action-btn:active {
+                 transform: scale(0.98);
             }
             .action-btn.small {
                 padding: 8px 12px;
@@ -212,8 +239,8 @@ def index():
             .chatroom-item:hover { background-color: var(--bg-hover); }
 
             .avatar {
-                width: 40px;
-                height: 40px;
+                width: 44px;
+                height: 44px;
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
@@ -221,6 +248,7 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
+                font-size: 1.2rem;
             }
             .chatroom-info {
                 flex-grow: 1;
@@ -231,6 +259,7 @@ def index():
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                font-size: 1.1rem;
             }
             .lock-icon {
                 width: 16px;
@@ -240,9 +269,9 @@ def index():
             }
 
             #chat-window-view {
-                display: none;
+                display: none; /* Hidden by default on mobile */
                 flex-direction: column;
-                height: 100%;
+                flex-grow: 1;
                 width: 100%;
                 background-color: var(--bg-primary);
             }
@@ -260,7 +289,7 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: none;
+                display: none; /* Hidden by default, shown on mobile chat */
             }
             .back-btn svg {
                 width: 24px;
@@ -279,17 +308,19 @@ def index():
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
+                -webkit-overflow-scrolling: touch;
             }
 
             .message {
                 display: flex;
                 gap: 10px;
-                max-width: 80%;
+                max-width: 85%;
             }
             .message .avatar {
                 width: 36px;
                 height: 36px;
                 align-self: flex-end;
+                font-size: 1rem;
             }
             .message-content {
                 display: flex;
@@ -297,7 +328,7 @@ def index():
                 gap: 4px;
             }
             .message-sender {
-                font-size: 0.8rem;
+                font-size: 0.85rem;
                 font-weight: 500;
                 color: var(--text-secondary);
                 word-break: break-all;
@@ -308,12 +339,13 @@ def index():
                 border-radius: 18px;
                 line-height: 1.4;
                 word-wrap: break-word;
+                font-size: 1rem;
             }
 
             .message.sent { align-self: flex-end; flex-direction: row-reverse; }
             .message.sent .message-sender { text-align: right; color: var(--accent-blue-light); }
             .message.sent .message-bubble {
-                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                background: linear-gradient(to right bottom, var(--accent-blue), var(--accent-blue-dark));
                 color: white;
                 border-bottom-right-radius: 4px;
             }
@@ -334,11 +366,11 @@ def index():
                 color: var(--text-secondary);
                 padding: 20px;
             }
-            .chat-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; }
+            .chat-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; filter: grayscale(100%); }
 
             .message-form {
                 display: flex;
-                padding: 16px;
+                padding: 8px 16px;
                 gap: 12px;
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
@@ -346,7 +378,7 @@ def index():
             }
             #message-input {
                 flex-grow: 1;
-                padding: 12px 16px;
+                padding: 10px 16px;
                 border: 1px solid var(--border-color);
                 background-color: var(--bg-tertiary);
                 color: var(--text-primary);
@@ -363,9 +395,126 @@ def index():
                 border-radius: 50%;
                 flex-shrink: 0;
                 padding: 0;
+                background: linear-gradient(45deg, var(--accent-blue-dark), var(--accent-blue-light));
             }
             .send-btn svg { width: 20px; height: 20px; fill: white; }
 
+            /* Browser View */
+            #browser-view {
+                display: none; /* Hidden by default */
+                flex-direction: column;
+                flex-grow: 1;
+                width: 100%;
+            }
+            .browser-bar {
+                display: flex;
+                padding: 8px 16px;
+                gap: 8px;
+                background-color: var(--bg-secondary);
+                border-bottom: 1px solid var(--border-color);
+                align-items: center;
+                flex-shrink: 0;
+            }
+            .browser-bar input[type="text"] {
+                flex-grow: 1;
+                padding: 8px 12px;
+                border: 1px solid var(--border-color);
+                background-color: var(--bg-tertiary);
+                color: var(--text-primary);
+                border-radius: 6px;
+                font-size: 0.9rem;
+            }
+             .browser-bar input[type="text"]:focus { outline: none; border-color: var(--accent-blue); }
+            .browser-bar button {
+                background: var(--bg-hover);
+                border: none;
+                color: var(--text-secondary);
+                padding: 8px;
+                border-radius: 6px;
+                cursor: pointer;
+                transition: background-color 0.2s ease;
+            }
+             .browser-bar button:active { transform: scale(0.95); }
+            .browser-bar button svg { width: 20px; height: 20px; fill: currentColor; }
+            #browser-iframe {
+                flex-grow: 1;
+                width: 100%;
+                border: none;
+            }
+
+
+            /* Bottom Navigation */
+            #bottom-nav {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: var(--nav-height);
+                background-color: var(--bg-secondary);
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                border-top: 1px solid var(--border-color);
+                z-index: 500; /* Below modals, above main content */
+                padding-bottom: env(safe-area-inset-bottom); /* Handle iPhone notches */
+            }
+            .nav-btn {
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                color: var(--text-secondary);
+                font-size: 0.7rem;
+                cursor: pointer;
+                padding: 4px 0;
+                transition: color 0.2s ease;
+                 -webkit-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+            }
+            .nav-btn svg {
+                width: 24px;
+                height: 24px;
+                margin-bottom: 2px;
+                fill: currentColor;
+                 transition: fill 0.2s ease;
+            }
+             .nav-btn:active { transform: scale(0.95); }
+
+            .nav-btn.active {
+                color: var(--ton-blue);
+            }
+            .nav-btn.active svg {
+                 fill: var(--ton-blue);
+            }
+            
+            #nav-scan-btn {
+                background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal));
+                border-radius: 50%;
+                width: 56px;
+                height: 56px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                bottom: 8px;
+                box-shadow: 0 4px 10px rgba(0, 136, 204, 0.5);
+                flex-shrink: 0;
+                 -webkit-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+            }
+             #nav-scan-btn:active { transform: scale(0.9); }
+            #nav-scan-btn svg {
+                width: 28px;
+                height: 28px;
+                fill: white;
+                margin-bottom: 0;
+            }
+
+
+            /* Modals */
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -401,6 +550,7 @@ def index():
                 border-radius: 6px;
                 font-size: 1rem;
             }
+             .modal-content input:focus { outline: none; border-color: var(--accent-blue); }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
             .modal-btn {
                 padding: 10px 20px;
@@ -408,12 +558,28 @@ def index():
                 border: none;
                 cursor: pointer;
                 font-weight: 500;
+                 -webkit-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
             }
+             .modal-btn:active { transform: scale(0.95); }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
+            .modal-btn.action-btn { background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal)); color: white; }
             
+            #profile-modal .modal-content { text-align: center; }
+            #profile-modal .avatar { margin: 20px auto; width: 60px; height: 60px; font-size: 1.8rem; }
+            #profile-modal #profile-username { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
+            #profile-modal #profile-address { color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 0; }
+            #profile-modal #profile-qr-code { background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px; }
+            #profile-modal .qr-label { text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px; }
+            #profile-modal .modal-actions { flex-direction: column; gap: 12px; align-items: stretch; }
+
+
+            #scanner-modal #qr-reader { width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden; }
+
             #status-bar {
                 position: fixed;
-                bottom: 20px;
+                bottom: calc(var(--nav-height) + 10px); /* Position above nav bar */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -423,15 +589,21 @@ def index():
                 font-size: 0.9rem;
                 opacity: 0;
                 visibility: hidden;
-                transition: opacity 0.3s, visibility 0.3s;
+                transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
                 z-index: 2000;
                 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+                max-width: 90%;
+                text-align: center;
             }
             #status-bar.success { background-color: var(--success-color); }
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
 
             @media (min-width: 768px) {
+                 body {
+                     justify-content: center;
+                     align-items: center;
+                 }
                 .main-container {
                     max-width: 1100px;
                     max-height: 800px;
@@ -439,25 +611,71 @@ def index():
                     overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
+                    height: 100%;
+                    flex-grow: 0;
                 }
+                
                 #app-view {
-                    flex-direction: row;
+                    height: 100%;
+                }
+                
+                #content-container {
+                     flex-direction: row;
                 }
+
                 #chatroom-list-view {
                     width: 320px;
                     flex-shrink: 0;
                     border-right: 1px solid var(--border-color);
-                    display: flex !important;
+                    display: flex !important; /* Always show on desktop */
                 }
                 #chat-window-view {
                     width: auto;
                     flex-grow: 1;
-                    display: flex !important;
+                     display: flex !important; /* Always show on desktop */
+                }
+                
+                #browser-view {
+                    display: flex; /* Always show on desktop when active */
+                }
+
+                #chat-container {
+                    flex-direction: row; /* Side-by-side on desktop */
                 }
-                #chat-window-view.hidden-on-desktop {
-                    display: flex !important;
+
+                #bottom-nav {
+                    position: static; /* Not fixed */
+                    width: auto;
+                    height: auto;
+                    background-color: transparent;
+                    border-top: none;
+                    z-index: auto;
+                    padding-bottom: 0;
+                     margin-top: 20px; /* Example spacing if needed */
                 }
-                .back-btn { display: none !important; }
+                 .nav-btn {
+                     display: none; /* Hide text nav buttons */
+                 }
+                #nav-scan-btn {
+                     display: none !important; /* Hide the large central scan button */
+                 }
+                 .list-header-top {
+                     margin-bottom: 12px; /* Less space needed */
+                 }
+                .list-header-top h2 { font-size: 1.8rem; }
+                 .user-profile { margin-bottom: 20px; }
+                 .chat-header { padding: 16px; }
+                 #chat-header-title { font-size: 1.4rem; }
+                 .message-form { padding: 12px 16px; }
+                 #message-input { padding: 14px 18px; }
+                 .send-btn { width: 48px; height: 48px; }
+                 .send-btn svg { width: 24px; height: 24px; }
+
+                 .back-btn { display: none !important; } /* Hide back button on desktop */
+
+                 #status-bar {
+                     bottom: 20px; /* Back to standard bottom position */
+                 }
             }
         </style>
     </head>
@@ -471,60 +689,95 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <div id="chatroom-list-view">
-                <div class="list-header">
-                    <div class="list-header-top">
-                        <h2>Чаты</h2>
-                        <div style="display: flex; align-items: center; gap: 8px;">
-                            <button id="my-profile-btn" class="action-btn small" title="Мой профиль">
-                                <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                            </button>
-                            <button id="scan-qr-btn" class="action-btn small" title="Сканировать QR">
-                                <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
-                            </button>
-                            <button id="create-room-show-modal" class="action-btn small">
-                                <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-                                <span>Новый</span>
-                            </button>
+            <div id="content-container">
+                
+                <!-- Chat Views -->
+                <div id="chat-container">
+                    <div id="chatroom-list-view">
+                        <div class="list-header">
+                            <div class="list-header-top">
+                                <h2>Чаты</h2>
+                                <div style="display: flex; align-items: center; gap: 8px;">
+                                    <button id="my-profile-btn" class="action-btn small" title="Мой профиль">
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                                    </button>
+                                     <!-- QR Scan button moved to bottom nav -->
+                                    <button id="create-room-show-modal" class="action-btn small">
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                                        <span>Новый</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="user-profile">
+                                <div id="user-wallet"></div>
+                                <div id="user-nickname"></div>
+                                <form class="username-form" id="username-form">
+                                    <input type="text" id="username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
+                                    <button type="submit" class="action-btn small">✓</button>
+                                </form>
+                            </div>
                         </div>
+                        <div id="chatroom-list"></div>
                     </div>
-                    <div class="user-profile">
-                        <div id="user-wallet"></div>
-                        <div id="user-nickname"></div>
-                        <form class="username-form" id="username-form">
-                            <input type="text" id="username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
-                            <button type="submit" class="action-btn small">✓</button>
-                        </form>
+
+                    <div id="chat-window-view">
+                         <div id="chat-placeholder" class="chat-placeholder">
+                            <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                            <h2>Выберите чат</h2>
+                            <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
+                        </div>
+                        <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
+                            <div class="chat-header">
+                                <button class="back-btn" id="back-to-list-btn">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                                </button>
+                                <div id="chat-header-avatar" class="avatar"></div>
+                                <span id="chat-header-title"></span>
+                            </div>
+                            <div id="messages-container"></div>
+                            <form id="message-form" class="message-form">
+                                <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
+                                <button type="submit" class="action-btn send-btn" id="send-btn">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+                                </button>
+                            </form>
+                        </div>
                     </div>
                 </div>
-                <div id="chatroom-list"></div>
+
+                <!-- Browser View -->
+                <div id="browser-view">
+                    <div class="browser-bar">
+                         <button id="browser-back"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"/></svg></button>
+                         <button id="browser-forward"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"/></svg></button>
+                         <button id="browser-home"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg></button>
+                         <form id="browser-form" style="flex-grow: 1; display: flex; gap: 8px;">
+                            <input type="text" id="browser-url" value="https://www.google.com/" placeholder="Введите адрес или запрос">
+                            <button type="submit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg></button>
+                         </form>
+                    </div>
+                    <iframe id="browser-iframe" src="https://www.google.com/"></iframe>
+                </div>
+
             </div>
 
-            <div id="chat-window-view" class="hidden-on-desktop">
-                <div id="chat-placeholder" class="chat-placeholder">
-                    <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
-                    <h2>Выберите чат</h2>
-                    <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
+             <!-- Bottom Navigation Bar -->
+            <div id="bottom-nav">
+                <div class="nav-btn active" data-view="chat">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 6H6v-2h8v2zm4-4H6V7h12v4z"/></svg>
+                    <span>Чаты</span>
                 </div>
-                <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
-                    <div class="chat-header">
-                        <button class="back-btn" id="back-to-list-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
-                        </button>
-                        <div id="chat-header-avatar" class="avatar"></div>
-                        <span id="chat-header-title"></span>
-                    </div>
-                    <div id="messages-container"></div>
-                    <form id="message-form" class="message-form">
-                        <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
-                        <button type="submit" class="action-btn send-btn" id="send-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
-                        </button>
-                    </form>
+                <div id="nav-scan-btn">
+                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
+                </div>
+                <div class="nav-btn" data-view="browser">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93s3.05-7.44 7-7.93v15.86zm2 0V4.07c3.95.49 7 3.85 7 7.93s-3.05 7.44-7 7.93z"/></svg>
+                    <span>Браузер</span>
                 </div>
             </div>
         </div>
         
+        <!-- Modals (outside main-container flow) -->
         <div id="create-room-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Создать новый чат</h3>
@@ -556,14 +809,14 @@ def index():
         </div>
 
         <div id="profile-modal" class="modal-overlay">
-            <div class="modal-content" style="text-align: center;">
+            <div class="modal-content">
                 <h3 id="profile-modal-title">Профиль пользователя</h3>
-                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
-                <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
-                <p id="profile-address" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
-                <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
-                <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px;">Отсканируйте для открытия профиля</p>
-                <div class="modal-actions" style="flex-direction: column; gap: 12px; align-items: stretch;">
+                <div id="profile-avatar-container"></div>
+                <p id="profile-username"></p>
+                <p id="profile-address"></p>
+                <div id="profile-qr-code"></div>
+                <p class="qr-label">Отсканируйте для открытия профиля</p>
+                <div class="modal-actions">
                     <button id="send-ton-btn" class="modal-btn action-btn">Отправить TON</button>
                     <button id="profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
                 </div>
@@ -573,7 +826,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader" style="width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></div>
+                <div id="qr-reader"></div>
                 <div class="modal-actions">
                     <button id="scanner-close-btn" class="modal-btn secondary-btn">Отмена</button>
                 </div>
@@ -598,14 +851,30 @@ def index():
                 
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
+                const chatContainer = document.getElementById('chat-container');
                 const chatroomListView = document.getElementById('chatroom-list-view');
                 const chatWindowView = document.getElementById('chat-window-view');
+                const browserView = document.getElementById('browser-view');
                 const chatPlaceholder = document.getElementById('chat-placeholder');
                 const activeChat = document.getElementById('active-chat');
+                const bottomNav = document.getElementById('bottom-nav');
+                const navButtons = bottomNav.querySelectorAll('.nav-btn');
+                const navScanBtn = document.getElementById('nav-scan-btn');
+
+                const createRoomModal = document.getElementById('create-room-modal');
+                const passwordModal = document.getElementById('password-modal');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
 
-                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
+                const browserIframe = document.getElementById('browser-iframe');
+                const browserUrlInput = document.getElementById('browser-url');
+                const browserForm = document.getElementById('browser-form');
+                const browserBackBtn = document.getElementById('browser-back');
+                const browserForwardBtn = document.getElementById('browser-forward');
+                const browserHomeBtn = document.getElementById('browser-home');
+
+
+                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292', '#a1887f', '#ff8a65'];
 
                 const getAvatar = (name) => {
                     const initial = (name ? name[0] : '?').toUpperCase();
@@ -690,6 +959,8 @@ def index():
                     updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
+                    bottomNav.style.display = 'flex';
+                    switchView('chat'); // Default view is chat
                     fetchChatrooms();
                 };
 
@@ -764,34 +1035,69 @@ def index():
                         container.appendChild(msgDiv);
                     });
 
-                    if(shouldScroll) {
+                    if(shouldScroll || messages.length === 0) {
                         container.scrollTop = container.scrollHeight;
                     }
                 };
                 
                 const fetchMessages = async (roomId) => {
+                    if (!currentUser.address) return;
                     try {
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                        if (messagePollingInterval) clearInterval(messagePollingInterval);
+                       console.error("Failed to fetch messages:", err);
                     }
                 };
                 
                 const showChatView = () => {
-                    chatWindowView.style.display = 'flex';
-                    if (window.innerWidth < 768) {
-                        chatroomListView.style.display = 'none';
-                    }
-                };
+                     chatContainer.style.display = 'flex';
+                     browserView.style.display = 'none';
 
-                const showListView = () => {
-                    chatroomListView.style.display = 'flex';
                     if (window.innerWidth < 768) {
-                        chatWindowView.style.display = 'none';
+                         // On mobile, determine whether to show list or window
+                         if (activeChatroomId && activeChat.style.display === 'flex') {
+                             chatroomListView.style.display = 'none';
+                             chatWindowView.style.display = 'flex';
+                             document.getElementById('back-to-list-btn').style.display = 'block';
+                         } else {
+                            chatroomListView.style.display = 'flex';
+                            chatWindowView.style.display = 'none';
+                            document.getElementById('back-to-list-btn').style.display = 'none';
+                         }
+                    } else {
+                        // On desktop, always show both
+                        chatroomListView.style.display = 'flex';
+                        chatWindowView.style.display = 'flex';
+                         document.getElementById('back-to-list-btn').style.display = 'none';
                     }
                 };
 
+                 const showBrowserView = () => {
+                     chatContainer.style.display = 'none';
+                     browserView.style.display = 'flex';
+                     if (messagePollingInterval) clearInterval(messagePollingInterval);
+                     activeChatroomId = null;
+                 };
+
+                 const switchView = (viewId) => {
+                     navButtons.forEach(btn => btn.classList.remove('active'));
+                     let targetView = null;
+
+                     if (viewId === 'chat') {
+                         showChatView();
+                         targetView = document.querySelector('.nav-btn[data-view="chat"]');
+                     } else if (viewId === 'browser') {
+                         showBrowserView();
+                         targetView = document.querySelector('.nav-btn[data-view="browser"]');
+                     }
+                    
+                     if (targetView) {
+                         targetView.classList.add('active');
+                     }
+                 };
+
+
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
                     if (!roomData) return;
@@ -807,23 +1113,26 @@ def index():
 
                         chatPlaceholder.style.display = 'none';
                         activeChat.style.display = 'flex';
-                        showChatView();
                         
+                        showChatView(); // Ensure chat view is active and handle mobile/desktop split
+
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
                     };
                     
                     if (isPrivate) {
-                        const passwordModal = document.getElementById('password-modal');
                         const passwordForm = document.getElementById('password-form');
                         const passwordInput = document.getElementById('password-input');
+                        
                         passwordModal.style.display = 'flex';
                         passwordInput.value = '';
                         passwordInput.focus();
 
-                        const formSubmitHandler = async (e) => {
+                        // Use a flag to prevent multiple listeners if modal is shown multiple times
+                        let passwordFormListener = null;
+                        passwordFormListener = async (e) => {
                             e.preventDefault();
-                            passwordForm.removeEventListener('submit', formSubmitHandler);
+                            passwordForm.removeEventListener('submit', passwordFormListener); // Remove listener after submit
                             const password = passwordInput.value;
                             passwordModal.style.display = 'none';
                             try {
@@ -833,15 +1142,21 @@ def index():
                                     body: JSON.stringify({ chatroom_id: roomId, password })
                                 });
                                 proceedToRoom();
-                            } catch (err) {}
+                            } catch (err) {
+                                showStatus('Неверный пароль', 'error');
+                                // Re-attach listener if join failed and modal might be shown again
+                                // This part is tricky; a better approach might be a dedicated join attempt handler
+                            }
                         };
-                        passwordForm.addEventListener('submit', formSubmitHandler);
+                        passwordForm.addEventListener('submit', passwordFormListener);
 
                         document.getElementById('password-cancel').onclick = () => {
                             passwordModal.style.display = 'none';
-                            passwordForm.removeEventListener('submit', formSubmitHandler);
+                            passwordForm.removeEventListener('submit', passwordFormListener); // Clean up listener on cancel
                         };
+
                     } else {
+                        // Auto-join public rooms
                         proceedToRoom();
                     }
                 };
@@ -851,7 +1166,7 @@ def index():
                     const input = document.getElementById('message-input');
                     const sendBtn = document.getElementById('send-btn');
                     const text = input.value.trim();
-                    if (text && activeChatroomId) {
+                    if (text && activeChatroomId && currentUser.address) {
                         input.value = '';
                         input.disabled = true;
                         sendBtn.disabled = true;
@@ -865,8 +1180,36 @@ def index():
                                     text: text
                                 })
                             });
-                            await fetchMessages(activeChatroomId);
-                            document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
+                            // Don't wait for poll, add message locally for instant feedback
+                             const tempMsg = {
+                                id: 'temp-' + Date.now(), // Temporary ID
+                                sender_address: currentUser.address,
+                                text: text,
+                                timestamp: new Date().toISOString(),
+                                display_name: currentUser.username || `${currentUser.address[:4]}...${currentUser.address[-4:]}`
+                             };
+                            const messagesContainer = document.getElementById('messages-container');
+                             // Check if the last message is from the current user to group bubbles
+                             const lastMsgElement = messagesContainer.lastElementChild;
+                            if (lastMsgElement && lastMsgElement.classList.contains('sent')) {
+                                 // Append to existing sent bubble structure (simplified)
+                                 // For real grouping, you'd restructure the message HTML
+                                 // For now, just adding as a new message item
+                            }
+                             renderMessages([...Array.from(messagesContainer.children).map(el => {
+                                // Basic extraction for temp rendering
+                                 const senderEl = el.querySelector('.message-sender');
+                                 const bubbleEl = el.querySelector('.message-bubble');
+                                 return {
+                                     sender_address: el.classList.contains('sent') ? currentUser.address : 'other', // Simplified check
+                                     text: bubbleEl ? bubbleEl.textContent : '',
+                                     display_name: senderEl ? senderEl.textContent : '',
+                                     // timestamp etc omitted for temp
+                                 };
+                             }), tempMsg]); // Re-render with temp message
+
+                            await fetchMessages(activeChatroomId); // Fetch actual messages after sending
+
                         } finally {
                             input.disabled = false;
                             sendBtn.disabled = false;
@@ -875,7 +1218,6 @@ def index():
                     }
                 });
 
-                const createRoomModal = document.getElementById('create-room-modal');
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
@@ -887,7 +1229,15 @@ def index():
                     e.preventDefault();
                     const name = document.getElementById('room-name').value.trim();
                     const password = document.getElementById('room-password').value;
-                    if (!name) return;
+                    if (!name) {
+                        showStatus('Название чата не может быть пустым.', 'error');
+                        return;
+                    }
+                     if (name.length < 3 || name.length > 50) {
+                         showStatus('Название чата должно быть от 3 до 50 символов.', 'error');
+                         return;
+                     }
+
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -909,7 +1259,7 @@ def index():
                             body: JSON.stringify({ address: address })
                         });
                         
-                        const username = userData.username || `User ${truncateAddress(address)}`;
+                        const username = userData.username || `Пользователь ${truncateAddress(address)}`;
                         const avatarContainer = document.getElementById('profile-avatar-container');
                         const usernameEl = document.getElementById('profile-username');
                         const addressEl = document.getElementById('profile-address');
@@ -924,17 +1274,31 @@ def index():
                         
                         qrCodeEl.innerHTML = '';
                         if (profileQrCode) {
-                            profileQrCode.clear();
+                           // Check if QR code instance exists and clear it
+                           if (typeof profileQrCode.clear === 'function') {
+                                profileQrCode.clear();
+                           } else {
+                               // Fallback if clear method is not available (older versions?)
+                               qrCodeEl.innerHTML = '';
+                           }
                         }
-                        profileQrCode = new QRCode(qrCodeEl, {
-                            text: address,
-                            width: 150,
-                            height: 150,
-                            colorDark : "#000000",
-                            colorLight : "#ffffff",
-                            correctLevel : QRCode.CorrectLevel.H
-                        });
-                        
+                         // Use try/catch for QRCode initialization as it can throw
+                         try {
+                             profileQrCode = new QRCode(qrCodeEl, {
+                                 text: address,
+                                 width: 150,
+                                 height: 150,
+                                 colorDark : "#000000",
+                                 colorLight : "#ffffff",
+                                 correctLevel : QRCode.CorrectLevel.H
+                             });
+                         } catch (e) {
+                              console.error("Failed to generate QR code:", e);
+                             qrCodeEl.innerHTML = '<p style="color: red;">Ошибка генерации QR</p>';
+                             profileQrCode = null; // Ensure it's null if failed
+                         }
+
+
                         sendTonBtn.onclick = async () => {
                             if (!tonConnectUI.connected) {
                                 showStatus('Подключите кошелек для отправки TON.', 'error');
@@ -965,7 +1329,7 @@ def index():
                             }
                         };
                         
-                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
+                        sendTonBtn.style.display = (address === currentUser.address || !tonConnectUI.connected) ? 'none' : 'block';
                         profileModal.style.display = 'flex';
                     } catch (err) {
                         showStatus('Не удалось загрузить профиль.', 'error');
@@ -977,17 +1341,20 @@ def index():
                     html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                         hideScanner();
-                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                            showProfile(decodedText);
+                        // Basic check for TON address format
+                        if (decodedText && typeof decodedText === 'string' && decodedText.length >= 48 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
+                             showProfile(decodedText);
                         } else {
-                            showStatus('Отсканирован недействительный QR-код.', 'error');
+                            showStatus('Отсканирован недействительный QR-код (ожидается адрес TON).', 'error');
                         }
                     };
                     const config = { fps: 10, qrbox: { width: 250, height: 250 } };
+                     // Request camera permissions when starting scanner
                     html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
-                            showStatus('Не удалось запустить сканер.', 'error');
-                            hideScanner();
+                            console.error("QR Scanner startup failed:", err);
+                            showStatus('Не удалось запустить сканер. Проверьте разрешения камеры.', 'error');
+                            hideScanner(); // Ensure modal closes on error
                         });
                 };
 
@@ -998,31 +1365,121 @@ def index():
                     scannerModal.style.display = 'none';
                 };
                 
+                // Event Listeners
                 document.getElementById('my-profile-btn').addEventListener('click', () => {
                     if (currentUser.address) showProfile(currentUser.address);
+                     else showStatus('Подключите кошелек', 'error');
                 });
-                document.getElementById('scan-qr-btn').addEventListener('click', showScanner);
+
+                 // Nav button listeners
+                 navButtons.forEach(btn => {
+                     btn.addEventListener('click', () => {
+                         const viewId = btn.dataset.view;
+                         switchView(viewId);
+                     });
+                 });
+
+                 // Central QR scan button
+                 navScanBtn.addEventListener('click', showScanner);
+
                 document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
                 document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
-                document.getElementById('back-to-list-btn').addEventListener('click', showListView);
+                document.getElementById('back-to-list-btn').addEventListener('click', () => {
+                    activeChat.style.display = 'none';
+                    chatPlaceholder.style.display = 'flex';
+                    activeChatroomId = null;
+                    if (messagePollingInterval) clearInterval(messagePollingInterval);
+                    showChatView(); // Show list view on mobile
+                });
                 
+                // Browser Navigation
+                browserForm.addEventListener('submit', (e) => {
+                    e.preventDefault();
+                    let url = browserUrlInput.value.trim();
+                    if (url) {
+                         // Add http/https if missing, basic check
+                         if (!url.match(/^https?:\/\//i)) {
+                             url = 'https://' + url; // Default to https
+                         }
+                        browserIframe.src = url;
+                    }
+                });
+
+                 browserHomeBtn.addEventListener('click', () => {
+                     const homeUrl = "https://www.google.com/";
+                     browserIframe.src = homeUrl;
+                     browserUrlInput.value = homeUrl;
+                 });
+
+                 browserBackBtn.addEventListener('click', () => {
+                     try {
+                         browserIframe.contentWindow.history.back();
+                     } catch (e) {
+                         console.warn("Browser history back failed, likely due to cross-origin policy.", e);
+                         showStatus("Браузер не может перейти назад из-за ограничений безопасности.", 'info');
+                     }
+                 });
+
+                 browserForwardBtn.addEventListener('click', () => {
+                     try {
+                         browserIframe.contentWindow.history.forward();
+                     } catch (e) {
+                         console.warn("Browser history forward failed, likely due to cross-origin policy.", e);
+                         showStatus("Браузер не может перейти вперед из-за ограничений безопасности.", 'info');
+                     }
+                 });
+
+                 // Sync URL input with iframe location (best effort, limited by same-origin)
+                 browserIframe.addEventListener('load', () => {
+                     try {
+                        // This might fail on cross-origin sites
+                        browserUrlInput.value = browserIframe.contentWindow.location.href;
+                     } catch (e) {
+                        // Cannot access cross-origin frame location
+                        browserUrlInput.value = browserIframe.src; // Fallback to src
+                     }
+                 });
+
+
                 const handleResize = () => {
                     const isMobile = window.innerWidth < 768;
-                    document.getElementById('back-to-list-btn').style.display = isMobile ? 'block' : 'none';
-                    if (!isMobile) {
-                        chatroomListView.style.display = 'flex';
-                        chatWindowView.style.display = 'flex';
-                    } else {
-                        if (activeChat.style.display === 'flex') {
-                            chatroomListView.style.display = 'none';
+
+                     // Manage display within the 'chat' container based on mobile/desktop and active chat state
+                    if (chatContainer.style.display !== 'none') { // Only apply resize logic if chat is the active view
+                        if (isMobile) {
+                            document.getElementById('back-to-list-btn').style.display = activeChatroomId ? 'block' : 'none';
+                            if (activeChatroomId && activeChat.style.display === 'flex') {
+                                // Mobile, chat window is open
+                                chatroomListView.style.display = 'none';
+                                chatWindowView.style.display = 'flex';
+                            } else {
+                                // Mobile, chat list is open or no chat selected
+                                chatroomListView.style.display = 'flex';
+                                chatWindowView.style.display = 'none';
+                            }
                         } else {
-                            chatWindowView.style.display = 'none';
+                            // Desktop: always show both list and window
+                            chatroomListView.style.display = 'flex';
+                            chatWindowView.style.display = 'flex';
+                            document.getElementById('back-to-list-btn').style.display = 'none';
                         }
                     }
+
+                     // Adjust app-view height for desktop
+                     if (!isMobile) {
+                          appView.style.height = '100%'; // Allow container to define height
+                          bottomNav.style.display = 'none'; // Hide bottom nav on desktop
+                     } else {
+                          appView.style.height = `calc(100vh - var(--nav-height))`;
+                          bottomNav.style.display = 'flex'; // Show bottom nav on mobile
+                     }
                 };
 
                 window.addEventListener('resize', handleResize);
-                handleResize();
+                
+                // Initial state setup
+                handleResize(); // Apply initial layout based on screen size
+                bottomNav.style.display = 'none'; // Hide nav until user is logged in
 
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
@@ -1032,8 +1489,14 @@ def index():
                         currentUser = { address: null, username: null };
                         appView.style.display = 'none';
                         loginView.style.display = 'flex';
+                        bottomNav.style.display = 'none';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = null;
+                        chatPlaceholder.style.display = 'flex';
+                        activeChat.style.display = 'none';
+                        renderChatrooms([]); // Clear chat list
+                        renderMessages([]); // Clear messages
+                        handleResize(); // Adjust layout back to login state
                     }
                 });
             });
@@ -1080,7 +1543,7 @@ def get_chatrooms():
         chatrooms_list.append({
             'id': room_id,
             'name': room_data['name'],
-            'is_private': room_data['is_private']
+            'is_private': room_data['password_hash'] is not None
         })
     return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
 
@@ -1096,6 +1559,7 @@ def create_chatroom():
     db = read_db()
     room_id = str(uuid.uuid4())
     db['chatrooms'][room_id] = {
+        'id': room_id,
         'name': name,
         'creator': creator_address,
         'is_private': bool(password),
@@ -1153,6 +1617,10 @@ def send_message():
     db = read_db()
     if chatroom_id not in db['messages']:
         return jsonify({'error': 'Chatroom not found'}), 404
+        
+    if sender_address not in db['users'] or not db['users'][sender_address].get('username'):
+         # Prevent sending if user has no username
+         return jsonify({'error': 'Username not set'}), 400
 
     message = {
         'id': str(uuid.uuid4()),
@@ -1161,6 +1629,7 @@ def send_message():
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
     
+    # Keep only the last 100 messages per chatroom
     if len(db['messages'][chatroom_id]) >= 100:
         db['messages'][chatroom_id].pop(0)