Update app.py

app.py

@@ -22,15 +22,9 @@ def read_db():
     try:
         with open(DB_FILE, 'r') as f:
             return json.load(f)
-    except FileNotFoundError:
+    except (FileNotFoundError, json.JSONDecodeError):
         init_db()
         return read_db()
-    except json.JSONDecodeError:
-        return {
-            "users": {},
-            "chatrooms": {},
-            "messages": {}
-        }
 
 def write_db(data):
     with open(DB_FILE, 'w') as f:
@@ -65,7 +59,7 @@ def index():
                 --success-color: #28a745;
                 --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
-                --navbar-height: 60px;
+                --nav-height: 60px;
             }
 
             * {
@@ -89,6 +83,7 @@ def index():
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                position: relative; /* Needed for fixed bottom nav */
             }
 
             .main-container {
@@ -133,37 +128,25 @@ def index():
                 display: none;
                 width: 100%;
                 height: 100%;
-                flex-direction: column;
+                overflow: hidden; /* Prevent content overflow behind nav */
             }
-
-            .main-content-area {
+            
+            #main-content-area {
                 flex-grow: 1;
-                overflow: hidden;
                 display: flex;
-                flex-direction: row; /* Default desktop layout */
-                height: calc(100% - var(--navbar-height));
+                overflow: hidden;
+                padding-bottom: var(--nav-height); /* Add padding for bottom nav */
             }
 
-            #chatroom-list-view,
-            #users-list-view {
+            #left-panel {
                 display: flex;
                 flex-direction: column;
                 height: 100%;
-                width: 100%; /* Mobile default */
-                flex-shrink: 0;
+                width: 100%;
                 background-color: var(--bg-secondary);
+                flex-shrink: 0; /* Prevent shrinking on desktop */
             }
             
-            #chat-window-view,
-            #browser-view {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                width: 100%; /* Mobile default */
-                flex-grow: 1;
-                background-color: var(--bg-primary);
-            }
-
             .list-header {
                 padding: 16px;
                 border-bottom: 1px solid var(--border-color);
@@ -175,25 +158,45 @@ def index():
                 align-items: center;
                 margin-bottom: 16px;
             }
-            .list-header-top h2 {
+            .list-header-title {
                 font-size: 1.5rem;
                 font-weight: 600;
             }
-            
-            .user-profile-summary {
+
+            .header-tabs {
+                display: flex;
+                gap: 8px;
+            }
+            .header-tab-button {
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                padding: 8px 12px;
+                border-radius: 6px;
+                cursor: pointer;
+                font-weight: 500;
+                transition: color 0.2s ease, background-color 0.2s ease;
+            }
+            .header-tab-button.active {
+                color: var(--text-primary);
+                background-color: var(--bg-tertiary);
+            }
+
+            .user-profile {
                 padding: 12px;
                 background-color: var(--bg-tertiary);
                 border-radius: 8px;
                 margin-bottom: 16px;
-                word-break: break-all;
             }
-            #user-wallet, #user-nickname {
+             .user-profile div {
                 font-size: 0.9rem;
                 color: var(--text-secondary);
                 margin-bottom: 8px;
+                word-break: break-all;
             }
+            .user-profile div:last-child { margin-bottom: 0; }
             
-            .username-form { display: flex; gap: 8px; }
+            .username-form { display: flex; gap: 8px; margin-top: 12px;}
             .username-input {
                 flex-grow: 1;
                 background-color: var(--bg-primary);
@@ -228,13 +231,15 @@ def index():
                 font-size: 0.9rem;
             }
             
-            #chatroom-list,
-            #users-list {
+            #chatroom-list, #user-list {
                 flex-grow: 1;
                 overflow-y: auto;
+                -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
             }
-            .chatroom-item,
-            .user-item {
+
+             #user-list { display: none; }
+
+            .list-item {
                 display: flex;
                 align-items: center;
                 gap: 12px;
@@ -243,8 +248,7 @@ def index():
                 border-bottom: 1px solid var(--border-color);
                 transition: background-color 0.2s ease;
             }
-            .chatroom-item:hover,
-            .user-item:hover { background-color: var(--bg-hover); }
+            .list-item:hover { background-color: var(--bg-hover); }
 
             .avatar {
                 width: 40px;
@@ -256,22 +260,20 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                font-size: 1.1rem;
-            }
-            .chatroom-info,
-            .user-info {
-                flex-grow: 1;
-                overflow: hidden;
+                background-color: #555; /* Default color */
             }
-            .chatroom-name,
-            .user-nickname {
+             .avatar-content {
+                 flex-grow: 1;
+                 overflow: hidden;
+             }
+            .list-item-name {
                 font-weight: 500;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
-            .user-address {
-                 font-size: 0.8rem;
+            .list-item-address {
+                font-size: 0.8rem;
                 color: var(--text-secondary);
                 white-space: nowrap;
                 overflow: hidden;
@@ -284,6 +286,14 @@ def index():
                 flex-shrink: 0;
             }
 
+            #right-panel {
+                display: none; /* Hidden by default on mobile */
+                flex-direction: column;
+                height: 100%;
+                width: 100%;
+                background-color: var(--bg-primary);
+            }
+            
             .chat-header {
                 display: flex;
                 align-items: center;
@@ -297,7 +307,7 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: block; /* Show on mobile by default */
+                padding: 0;
             }
             .back-btn svg {
                 width: 24px;
@@ -316,6 +326,7 @@ def index():
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
+                 -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
             }
 
             .message {
@@ -327,7 +338,6 @@ def index():
                 width: 36px;
                 height: 36px;
                 align-self: flex-end;
-                font-size: 1rem;
             }
             .message-content {
                 display: flex;
@@ -404,33 +414,6 @@ def index():
             }
             .send-btn svg { width: 20px; height: 20px; fill: white; }
 
-            #browser-view .browser-url-bar {
-                display: flex;
-                padding: 12px 16px;
-                gap: 8px;
-                background-color: var(--bg-secondary);
-                border-bottom: 1px solid var(--border-color);
-                flex-shrink: 0;
-            }
-            #browser-view .browser-url-input {
-                flex-grow: 1;
-                padding: 8px 12px;
-                border: 1px solid var(--border-color);
-                background-color: var(--bg-tertiary);
-                color: var(--text-primary);
-                border-radius: 6px;
-                outline: none;
-                font-size: 0.9rem;
-            }
-            #browser-view .browser-url-input:focus { border-color: var(--accent-blue); }
-
-            #browser-view iframe {
-                flex-grow: 1;
-                width: 100%;
-                height: 100%;
-                border: none;
-            }
-
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -456,7 +439,7 @@ def index():
             }
             .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.3rem; }
             .modal-content label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-secondary); }
-            .modal-content input:not([type="checkbox"]) {
+            .modal-content input {
                 width: 100%;
                 padding: 12px;
                 margin-bottom: 16px;
@@ -467,38 +450,18 @@ def index():
                 font-size: 1rem;
             }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
-            .modal-actions.column { flex-direction: column; align-items: stretch; }
             .modal-btn {
                 padding: 10px 20px;
                 border-radius: 6px;
                 border: none;
                 cursor: pointer;
                 font-weight: 500;
-                text-align: center;
             }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
             
-            #profile-modal .modal-content { text-align: center; }
-            #profile-avatar-container { margin: 20px auto; display: inline-block; }
-            #profile-username { font-size: 1.2rem; font-weight: 600; }
-            #profile-address { color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px; }
-            #profile-qr-code { background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px; }
-            #profile-modal .caption { text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px; }
-            #profile-balance { margin-top: 16px; font-size: 1rem; color: var(--text-secondary); }
-
-
-            #scanner-modal .modal-content { text-align: center; }
-            #qr-reader {
-                width: 100%;
-                border: 1px solid var(--border-color);
-                margin-top: 16px;
-                border-radius: 8px;
-                overflow: hidden;
-            }
-
             #status-bar {
                 position: fixed;
-                bottom: calc(var(--navbar-height) + 20px); /* Position above navbar */
+                bottom: calc(var(--nav-height) + 10px); /* Position above nav */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -516,71 +479,65 @@ def index():
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
 
-            .navbar {
+            #bottom-nav {
                 position: fixed;
                 bottom: 0;
                 left: 0;
                 width: 100%;
-                height: var(--navbar-height);
+                height: var(--nav-height);
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
-                z-index: 900;
+                z-index: 999;
             }
-            .navbar-item {
+            .nav-item {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                flex-grow: 1;
-                height: 100%;
                 color: var(--text-secondary);
-                font-size: 0.75rem;
+                font-size: 0.7rem;
+                font-weight: 500;
+                text-decoration: none;
                 cursor: pointer;
+                flex-grow: 1;
+                height: 100%;
                 transition: color 0.2s ease;
             }
-             .navbar-item:hover {
-                 color: var(--text-primary);
-             }
-            .navbar-item.active {
-                color: var(--accent-blue-light);
-            }
-            .navbar-item svg {
-                width: 24px;
-                height: 24px;
-                margin-bottom: 4px;
-                fill: currentColor; /* Use parent color */
-            }
-            .navbar-item.scan-qr-item {
-                 position: relative;
-                 top: -15px; /* Lift button slightly */
-                 width: 50px;
-                 height: 50px;
+             .nav-item.scan-qr {
+                 flex-grow: 0;
+                 width: 60px;
+                 height: 60px;
                  background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
                  border-radius: 50%;
-                 box-shadow: 0 5px 15px rgba(0, 136, 204, 0.3);
+                 margin-bottom: env(safe-area-inset-bottom); /* Push up from bottom edge */
+                 box-shadow: 0 4px 10px rgba(0, 136, 204, 0.4);
                  color: white;
-                 display: flex;
-                 align-items: center;
-                 justify-content: center;
-                 font-size: 0; /* Hide text */
-                 flex-grow: 0;
+                 position: relative;
+                 top: -10px;
+                 transition: box-shadow 0.2s ease;
              }
-             .navbar-item.scan-qr-item svg {
-                 margin-bottom: 0;
-                 width: 28px;
-                 height: 28px;
+            .nav-item.scan-qr svg {
+                 width: 24px;
+                 height: 24px;
+                 fill: white;
              }
-             .navbar-item.scan-qr-item:hover {
-                 color: white; /* Keep color white on hover */
-                 transform: translateY(-2px);
-                 box-shadow: 0 7px 20px rgba(0, 136, 204, 0.4);
+            .nav-item svg {
+                width: 20px;
+                height: 20px;
+                margin-bottom: 4px;
+                fill: var(--text-secondary);
+                transition: fill 0.2s ease;
+            }
+            .nav-item.active {
+                color: var(--accent-blue-light);
+            }
+            .nav-item.active svg {
+                 fill: var(--accent-blue-light);
              }
 
-
-            /* Desktop Styles */
             @media (min-width: 768px) {
                 .main-container {
                     max-width: 1100px;
@@ -590,50 +547,41 @@ def index():
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
                 }
-
                 #app-view {
-                    flex-direction: column; /* Keep column for desktop */
+                    flex-direction: row;
                 }
-
-                .main-content-area {
-                    flex-direction: row; /* Desktop layout */
-                    height: 100%; /* Desktop uses split view, not offset by navbar */
+                #main-content-area {
+                     padding-bottom: 0; /* Remove padding on desktop */
                 }
-
-                #chatroom-list-view,
-                #users-list-view {
-                    width: 320px;
-                    flex-shrink: 0;
+                #left-panel {
+                    width: 360px; /* Wider left panel on desktop */
                     border-right: 1px solid var(--border-color);
-                    display: flex !important; /* Always show list on desktop */
+                    display: flex !important; /* Always show left panel on desktop */
                 }
-
-                 #chat-window-view {
-                     width: auto;
-                     flex-grow: 1;
-                     display: flex !important; /* Always show chat on desktop */
+                 .list-header-top {
+                     margin-bottom: 0; /* No extra space above tabs */
                  }
-
-                 #browser-view {
-                     width: auto;
+                 .header-tabs {
                      flex-grow: 1;
-                     display: flex !important; /* Always show browser when active */
                  }
-
-                .back-btn { display: none !important; } /* Hide back button on desktop */
-
-                .navbar {
-                     position: static; /* Navbar is integrated into layout or hidden on desktop */
-                     height: 0; /* Make navbar height 0 to not take space */
-                     border-top: none;
+                 .header-tab-button {
+                     flex-grow: 1;
+                     text-align: center;
+                     padding: 8px; /* Smaller padding for tabs */
                  }
-                .navbar-item {
-                     display: none; /* Hide navbar items on desktop */
+                 .list-header .user-profile { /* Move profile below tabs */
+                    margin-top: 16px;
+                    margin-bottom: 0;
                  }
 
-                 #status-bar {
-                     bottom: 20px; /* Move status bar down on desktop */
-                 }
+                #right-panel {
+                    width: auto; /* Takes remaining width */
+                    flex-grow: 1;
+                    display: flex !important; /* Always show right panel on desktop */
+                }
+                .back-btn { display: none !important; } /* Hide back button on desktop */
+                #bottom-nav { display: none !important; } /* Hide bottom nav on desktop */
+                #status-bar { bottom: 20px; } /* Restore status bar position */
             }
         </style>
     </head>
@@ -647,102 +595,79 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <div class="main-content-area">
-                <!-- Views go here -->
-                <div id="chatroom-list-view" class="app-view-content">
+            <div id="main-content-area">
+                <div id="left-panel">
                     <div class="list-header">
-                        <div class="list-header-top">
-                            <h2>Чаты</h2>
-                            <div style="display: flex; align-items: center; gap: 8px;">
-                                <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-summary">
-                             <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 class="header-tabs">
+                            <button id="chats-tab" class="header-tab-button active">Чаты</button>
+                            <button id="users-tab" class="header-tab-button">Пользователи</button>
                          </div>
+                        <div class="user-profile">
+                            <div id="user-wallet"></div>
+                            <div id="user-balance"></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 style="display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px 16px; border-bottom: 1px solid var(--border-color); margin: 0 -16px 0 -16px;">
+                            <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 id="list-content-container">
+                        <div id="chatroom-list"></div>
+                        <div id="user-list"></div>
                     </div>
-                    <div id="chatroom-list"></div>
                 </div>
 
-                <div id="users-list-view" class="app-view-content" style="display: none;">
-                     <div class="list-header">
-                         <div class="list-header-top">
-                             <h2>Пользователи</h2>
-                         </div>
-                     </div>
-                     <div id="users-list">
-                         <!-- User items will be rendered here -->
-                     </div>
-                 </div>
-
-                <div id="chat-window-view" class="app-view-content">
-                     <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 id="browser-view" class="app-view-content" style="display: none;">
-                    <div class="browser-url-bar">
-                        <input type="text" id="browser-url-input" class="browser-url-input" placeholder="Введите URL или поиск Google">
-                        <button id="browser-go-btn" class="action-btn small">Перейти</button>
+                <div id="right-panel">
+                    <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>
-                    <iframe id="browser-iframe" src="https://www.google.com" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"></iframe>
                 </div>
-
             </div>
+        </div>
 
-            <!-- Navbar -->
-            <div class="navbar">
-                 <div class="navbar-item active" data-view="chats">
-                     <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><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-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
-                     <span>Чаты</span>
-                 </div>
-                 <div class="navbar-item" data-view="users">
-                     <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 7V3c-2.21 0-4-1.79-4-4H8c-2.21 0-4 1.79-4 4v4c-1.1 0-2 .9-2 2v5c0 .55.45 1 1 1h.18l-.68 3.85c-.19 1.09.9 2.17 2 1.92l1.46-.32L8.87 22h6.26l1.66.37 1.46.32c1.1.25 2.19-.83 2-1.92L20.82 15H21c.55 0 1-.45 1-1V9c0-1.1-.9-2-2-2zM6 15v-5h2v5H6zm7 0v-5h-3V7c0-.55-.45-1-1-1s-1 .45-1 1v8h-2v-5H9v5h2v-4h2v4h2v-5h2v5h-2z"/></svg>
-                     <span>Юзеры</span>
-                 </div>
-                 <div class="navbar-item scan-qr-item" data-view="scan">
-                      <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>
-                     <span>QR</span>
-                 </div>
-                 <div class="navbar-item" data-view="browser">
-                      <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14l-4-4 1.41-1.41L10 13.17l6.59-6.59L18 8l-8 8z"/></svg>
-                     <span>Браузер</span>
-                 </div>
-                 <div class="navbar-item" data-view="profile">
-                     <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" 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>
-                     <span>Профиль</span>
-                 </div>
+        <nav id="bottom-nav">
+            <div class="nav-item" data-target="chats">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM5 9h14v2H5zm0 4h8v2H5z"/></svg>
+                <span>Чаты</span>
+            </div>
+            <div class="nav-item" data-target="users">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 7c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 12c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H7v-1z"/></svg>
+                <span>Пользователи</span>
+            </div>
+             <div class="nav-item scan-qr" data-target="scan">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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-item" data-target="profile">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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>
+                <span>Профиль</span>
+            </div>
+        </nav>
 
-        </div>
-        
         <div id="create-room-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Создать новый чат</h3>
@@ -774,16 +699,16 @@ def index():
         </div>
 
         <div id="profile-modal" class="modal-overlay">
-            <div class="modal-content">
+            <div class="modal-content" style="text-align: center;">
                 <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>
-                <p id="profile-balance"></p>
+                <p id="profile-balance" style="color: var(--accent-blue-light); font-size: 0.9rem; 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 class="caption">Отсканируйте для открытия профиля</p>
-                <div class="modal-actions column">
-                    <button id="send-ton-btn" class="modal-btn action-btn">Отправить TON</button>
+                <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;">
+                    <button id="send-ton-btn" class="modal-btn action-btn" style="display: none;">Отправить TON</button>
                     <button id="profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
                 </div>
             </div>
@@ -792,7 +717,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader"></div>
+                <div id="qr-reader" style="width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></div>
                 <div class="modal-actions">
                     <button id="scanner-close-btn" class="modal-btn secondary-btn">Отмена</button>
                 </div>
@@ -805,30 +730,34 @@ def index():
             document.addEventListener('DOMContentLoaded', () => {
                 const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
                     manifestUrl: 'https://huggingface.co/spaces/Aleksmorshen/MorshenGroup/resolve/main/tonconnect-manifest.json',
-                    buttonRootId: 'ton-connect-button'
+                    buttonRootId: 'ton-connect-button',
+                     actionsConfiguration: {
+                         twaReturnUrl: 'https://huggingface.co/spaces/Aleksmorshen/MorshenGroup' // Replace with your actual TWA URL if deployed there
+                     }
                 });
 
                 let currentUser = { address: null, username: null, balance: null };
                 let activeChatroomId = null;
                 let messagePollingInterval = null;
                 let chatroomsData = {};
+                let usersData = {};
                 let html5QrCode = null;
                 let profileQrCode = null;
                 
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
-                const mainContentArea = document.querySelector('.main-content-area');
-                const chatroomListView = document.getElementById('chatroom-list-view');
-                const usersListView = document.getElementById('users-list-view');
-                const chatWindowView = document.getElementById('chat-window-view');
-                const browserView = document.getElementById('browser-view');
+                const leftPanel = document.getElementById('left-panel');
+                const rightPanel = document.getElementById('right-panel');
                 const chatPlaceholder = document.getElementById('chat-placeholder');
                 const activeChat = document.getElementById('active-chat');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
-                const navbarItems = document.querySelectorAll('.navbar-item');
-                const browserUrlInput = document.getElementById('browser-url-input');
-                const browserIframe = document.getElementById('browser-iframe');
+                const bottomNav = document.getElementById('bottom-nav');
+                const chatroomList = document.getElementById('chatroom-list');
+                const userListEl = document.getElementById('user-list'); // Renamed to avoid conflict
+                const chatsTab = document.getElementById('chats-tab');
+                const usersTab = document.getElementById('users-tab');
+
 
                 const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
@@ -859,7 +788,7 @@ def index():
                         const response = await fetch(endpoint, options);
                         if (!response.ok) {
                             const errorData = await response.json().catch(() => ({ error: 'Request failed with status ' + response.status }));
-                            throw new Error(errorData.error || 'Unknown error');
+                            throw new Error(errorData.error || `Request failed with status ${response.status}`);
                         }
                         if (response.status === 204) return null;
                         return await response.json();
@@ -873,11 +802,26 @@ def index():
 
                 const updateUserInfo = () => {
                     document.getElementById('user-wallet').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
+                    document.getElementById('user-balance').textContent = `Баланс: ${currentUser.balance !== null ? currentUser.balance.toFixed(2) + ' TON' : '...loading'}`;
                     const nicknameEl = document.getElementById('user-nickname');
                     const usernameInput = document.getElementById('username-input');
                     nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
                     usernameInput.value = currentUser.username || '';
                 };
+
+                const fetchBalance = async () => {
+                    if (tonConnectUI.account) {
+                        try {
+                            const balance = await tonConnectUI.account.balance; // Balance in nanoton
+                            currentUser.balance = balance / 1_000_000_000; // Convert to TON
+                            updateUserInfo();
+                        } catch (e) {
+                             console.error("Failed to fetch balance:", e);
+                             currentUser.balance = 'error';
+                             updateUserInfo();
+                        }
+                    }
+                };
                 
                 document.getElementById('username-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
@@ -895,26 +839,15 @@ def index():
                         currentUser.username = newUsername;
                         updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms();
-                        fetchUsers(); // Update users list as well
-                        if (activeChatroomId) fetchMessages(activeChatroomId);
+                        fetchChatrooms(); // Update chat list in case username is used there
+                        fetchUsers(); // Update user list
+                        if (activeChatroomId) fetchMessages(activeChatroomId); // Update messages if current user sent them
                     } catch (err) {}
                 });
 
                 const initializeUser = async (address) => {
                     currentUser.address = address;
-                     if (tonConnectUI.wallet && tonConnectUI.wallet.account) {
-                         try {
-                            const balance = await tonConnectUI.getBalance();
-                            currentUser.balance = balance / 1e9; // Convert nanoton to ton
-                            console.log("Balance:", currentUser.balance);
-                         } catch (e) {
-                            console.error("Failed to get balance:", e);
-                            currentUser.balance = null;
-                         }
-                     }
-
-
+                    fetchBalance(); // Fetch balance on connection
                     try {
                         const data = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -928,28 +861,29 @@ def index():
                     updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
-                    
-                    switchView('chats'); // Default view after login
                     fetchChatrooms();
-                    fetchUsers(); // Fetch users list on login
+                    fetchUsers();
+                    handleResize(); // Apply correct layout based on screen size
                 };
 
                 const renderChatrooms = (rooms) => {
-                    const list = document.getElementById('chatroom-list');
-                    list.innerHTML = '';
+                    chatroomList.innerHTML = '';
                     chatroomsData = {};
+                    if (rooms.length === 0) {
+                         chatroomList.innerHTML = '<div class="chat-placeholder" style="height: auto; margin-top: 20px;"><p>Пока нет чатов. Создайте первый!</p></div>';
+                    }
                     rooms.forEach(room => {
                         chatroomsData[room.id] = room;
                         const item = document.createElement('div');
-                        item.className = 'chatroom-item';
+                        item.className = 'list-item chatroom-item';
                         item.dataset.id = room.id;
                         
                         item.appendChild(getAvatar(room.name));
 
                         const infoDiv = document.createElement('div');
-                        infoDiv.className = 'chatroom-info';
+                        infoDiv.className = 'avatar-content';
                         const nameSpan = document.createElement('div');
-                        nameSpan.className = 'chatroom-name';
+                        nameSpan.className = 'list-item-name';
                         nameSpan.textContent = room.name;
                         infoDiv.appendChild(nameSpan);
                         item.appendChild(infoDiv);
@@ -961,46 +895,49 @@ def index():
                         }
 
                         item.addEventListener('click', () => selectChatroom(room.id, room.is_private));
-                        list.appendChild(item);
+                        chatroomList.appendChild(item);
                     });
                 };
-                
-                const fetchChatrooms = async () => {
-                    try {
-                        const data = await apiCall('/api/chatrooms');
-                        renderChatrooms(data.chatrooms);
-                    } catch (err) {}
-                };
 
                 const renderUsers = (users) => {
-                     const list = document.getElementById('users-list');
-                     list.innerHTML = '';
+                     userListEl.innerHTML = '';
+                     usersData = {};
+                     if (users.length === 0) {
+                          userListEl.innerHTML = '<div class="chat-placeholder" style="height: auto; margin-top: 20px;"><p>Пользователи не найдены.</p></div>';
+                     }
                      users.forEach(user => {
+                         usersData[user.address] = user;
                          const item = document.createElement('div');
-                         item.className = 'user-item';
+                         item.className = 'list-item user-item';
                          item.dataset.address = user.address;
 
-                         item.appendChild(getAvatar(user.username || truncateAddress(user.address)));
+                         item.appendChild(getAvatar(user.display_name));
 
                          const infoDiv = document.createElement('div');
-                         infoDiv.className = 'user-info';
-
-                         const nicknameSpan = document.createElement('div');
-                         nicknameSpan.className = 'user-nickname';
-                         nicknameSpan.textContent = user.username || `User ${truncateAddress(user.address)}`;
-                         infoDiv.appendChild(nicknameSpan);
+                         infoDiv.className = 'avatar-content';
+                         const nameSpan = document.createElement('div');
+                         nameSpan.className = 'list-item-name';
+                         nameSpan.textContent = user.display_name;
+                         infoDiv.appendChild(nameSpan);
 
                          const addressSpan = document.createElement('div');
-                         addressSpan.className = 'user-address';
+                         addressSpan.className = 'list-item-address';
                          addressSpan.textContent = user.address;
                          infoDiv.appendChild(addressSpan);
 
                          item.appendChild(infoDiv);
 
                          item.addEventListener('click', () => showProfile(user.address));
-                         list.appendChild(item);
+                         userListEl.appendChild(item);
                      });
                  };
+                
+                const fetchChatrooms = async () => {
+                    try {
+                        const data = await apiCall('/api/chatrooms');
+                        renderChatrooms(data.chatrooms);
+                    } catch (err) {}
+                };
 
                  const fetchUsers = async () => {
                      try {
@@ -1042,7 +979,7 @@ def index():
                         container.appendChild(msgDiv);
                     });
 
-                    if(shouldScroll) {
+                    if(shouldScroll || messages.length > 0) { // Scroll to bottom on first load or if already near bottom
                         container.scrollTop = container.scrollHeight;
                     }
                 };
@@ -1053,142 +990,84 @@ def index():
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                        if (messagePollingInterval) clearInterval(messagePollingInterval);
+                         console.error("Failed to fetch messages:", err);
                     }
                 };
                 
-                const switchView = (viewName) => {
-                    const views = {
-                         chats: chatroomListView,
-                         users: usersListView,
-                         chat: chatWindowView, // This is a secondary view managed by selectChatroom
-                         browser: browserView
-                    };
-
-                    // Hide all main content views
-                    Object.values(views).forEach(view => {
-                         if (view) view.style.display = 'none';
-                    });
-
-                    // Handle desktop layout where chat list is always visible
-                    const isDesktop = window.innerWidth >= 768;
-
-                    if (viewName === 'chats') {
-                        chatroomListView.style.display = 'flex';
-                        if (!activeChatroomId) { // If no chat is selected, show placeholder in chat window
-                             chatWindowView.style.display = 'flex'; // Ensure chat window area is visible
-                             chatPlaceholder.style.display = 'flex';
-                             activeChat.style.display = 'none';
-                        } else { // If a chat is active, show it
-                             selectChatroom(activeChatroomId, chatroomsData[activeChatroomId]?.is_private, false); // Re-show active chat without password prompt
-                        }
-                         // Stop message polling when leaving the active chat window view
-                        if (messagePollingInterval) clearInterval(messagePollingInterval);
-                        messagePollingInterval = null;
-
-                    } else if (viewName === 'users') {
-                         usersListView.style.display = 'flex';
-                         // On mobile, hide the chat window area
-                         if (!isDesktop) chatWindowView.style.display = 'none';
-                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                         messagePollingInterval = null;
-
-                    } else if (viewName === 'browser') {
-                         browserView.style.display = 'flex';
-                         // On mobile, hide the chat window area
-                         if (!isDesktop) chatWindowView.style.display = 'none';
-                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                         messagePollingInterval = null;
-
-                    } else if (viewName === 'scan') {
-                         showScanner(); // Open scanner modal
-                         // Revert navbar active state as modal is temporary
-                         const activeNav = document.querySelector('.navbar-item.active');
-                         if (activeNav) activeNav.classList.remove('active');
-                         const currentViewName = document.querySelector('.main-content-area > .app-view-content[style*="display: flex"]').dataset.viewName;
-                         const currentNavItem = document.querySelector(`.navbar-item[data-view="${currentViewName}"]`);
-                         if(currentNavItem) currentNavItem.classList.add('active');
-                         return; // Don't update active state below
-                    } else if (viewName === 'profile') {
-                         if (currentUser.address) showProfile(currentUser.address); // Open profile modal
-                         // Revert navbar active state
-                         const activeNav = document.querySelector('.navbar-item.active');
-                         if (activeNav) activeNav.classList.remove('active');
-                         const currentViewElement = document.querySelector('.main-content-area > .app-view-content[style*="display: flex"]');
-                         const currentView = currentViewElement ? currentViewElement.dataset.viewName : 'chats'; // Default to chats if none active
-                         const currentNavItem = document.querySelector(`.navbar-item[data-view="${currentView}"]`);
-                         if(currentNavItem) currentNavItem.classList.add('active');
-                         return; // Don't update active state below
-                    } else {
-                         // Handle switching FROM chat window back to list on mobile
-                         if (isDesktop) {
-                             // Do nothing, list is always visible
-                         } else {
-                             chatroomListView.style.display = 'flex';
-                             chatWindowView.style.display = 'none';
+                const showPanel = (panelId) => {
+                     if (window.innerWidth < 768) {
+                         // On mobile, panels switch
+                         leftPanel.style.display = 'none';
+                         rightPanel.style.display = 'none';
+                         if (panelId === 'left-panel') {
+                              leftPanel.style.display = 'flex';
+                         } else if (panelId === 'right-panel') {
+                              rightPanel.style.display = 'flex';
                          }
-                         viewName = 'chats'; // Ensure correct navbar item is active
-                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                         messagePollingInterval = null;
-                    }
+                     } else {
+                         // On desktop, both are usually visible, only content changes
+                         leftPanel.style.display = 'flex';
+                         rightPanel.style.display = 'flex';
+                     }
+                     // Update active nav item
+                     document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+                     if (panelId === 'left-panel') {
+                          const activeTab = document.querySelector('.header-tab-button.active');
+                          const target = activeTab.dataset.target;
+                          document.querySelector(`.nav-item[data-target="${target}"]`).classList.add('active');
+                     } else if (panelId === 'right-panel' && activeChatroomId) {
+                         document.querySelector('.nav-item[data-target="chats"]').classList.add('active');
+                     }
+                 };
 
+                 const switchLeftPanelContent = (contentType) => {
+                      chatroomList.style.display = 'none';
+                      userListEl.style.display = 'none';
+
+                      chatsTab.classList.remove('active');
+                      usersTab.classList.remove('active');
+
+                      if (contentType === 'chats') {
+                          chatroomList.style.display = 'flex';
+                          chatsTab.classList.add('active');
+                          fetchChatrooms();
+                      } else if (contentType === 'users') {
+                          userListEl.style.display = 'flex';
+                          usersTab.classList.add('active');
+                          fetchUsers();
+                      }
+
+                     // Update bottom nav active state based on current left panel tab
+                     if (window.innerWidth < 768) {
+                         document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+                         document.querySelector(`.nav-item[data-target="${contentType}"]`).classList.add('active');
+                     }
+                 };
 
-                    // Update active navbar item
-                    navbarItems.forEach(item => item.classList.remove('active'));
-                    const targetNavItem = document.querySelector(`.navbar-item[data-view="${viewName}"]`);
-                    if (targetNavItem) {
-                        targetNavItem.classList.add('active');
-                        mainContentArea.dataset.activeView = viewName; // Store active view name
-                    } else {
-                         // If we switched from chat window back to list, activate chats item
-                         document.querySelector('.navbar-item[data-view="chats"]').classList.add('active');
-                         mainContentArea.dataset.activeView = 'chats';
-                    }
-                };
 
-                const selectChatroom = (roomId, isPrivate, checkPassword = true) => {
+                const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
-                    if (!roomData) {
-                         showStatus('Чат не найден.', 'error');
-                         return;
-                    }
+                    if (!roomData) return;
 
                     const proceedToRoom = () => {
-                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                         activeChatroomId = roomId;
-
-                         // Ensure chat window view is visible
-                         chatWindowView.style.display = 'flex';
-                         chatPlaceholder.style.display = 'none';
-                         activeChat.style.display = 'flex';
-
-                         // Hide list view on mobile
-                         if (window.innerWidth < 768) {
-                             chatroomListView.style.display = 'none';
-                         }
-
-
-                         document.getElementById('chat-header-title').textContent = roomData.name;
-                         const headerAvatar = document.getElementById('chat-header-avatar');
-                         headerAvatar.innerHTML = '';
-                         headerAvatar.appendChild(getAvatar(roomData.name));
+                        if (messagePollingInterval) clearInterval(messagePollingInterval);
+                        activeChatroomId = roomId;
+                        
+                        document.getElementById('chat-header-title').textContent = roomData.name;
+                        const headerAvatar = document.getElementById('chat-header-avatar');
+                        headerAvatar.innerHTML = '';
+                        headerAvatar.appendChild(getAvatar(roomData.name));
 
-                         fetchMessages(roomId);
-                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
+                        chatPlaceholder.style.display = 'none';
+                        activeChat.style.display = 'flex';
+                        
+                        showPanel('right-panel'); // Switch to chat view
 
-                         // Ensure 'chats' navbar item is active if not already
-                         const activeNav = document.querySelector('.navbar-item.active');
-                         if (activeNav && activeNav.dataset.view !== 'chats') {
-                              activeNav.classList.remove('active');
-                              document.querySelector('.navbar-item[data-view="chats"]').classList.add('active');
-                              mainContentArea.dataset.activeView = 'chats';
-                         } else if (!activeNav) {
-                              document.querySelector('.navbar-item[data-view="chats"]').classList.add('active');
-                              mainContentArea.dataset.activeView = 'chats';
-                         }
+                        fetchMessages(roomId);
+                        messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
                     };
                     
-                    if (isPrivate && checkPassword) {
+                    if (isPrivate) {
                         const passwordModal = document.getElementById('password-modal');
                         const passwordForm = document.getElementById('password-form');
                         const passwordInput = document.getElementById('password-input');
@@ -1198,7 +1077,7 @@ def index():
 
                         const formSubmitHandler = async (e) => {
                             e.preventDefault();
-                            passwordForm.removeEventListener('submit', formSubmitHandler);
+                             passwordForm.removeEventListener('submit', formSubmitHandler); // Remove listener immediately
                             const password = passwordInput.value;
                             passwordModal.style.display = 'none';
                             try {
@@ -1209,14 +1088,15 @@ def index():
                                 });
                                 proceedToRoom();
                             } catch (err) {
-                                 showStatus('Неверный пароль.', 'error');
+                                 // Error handled by apiCall
+                                 // Re-show password modal or handle error state if needed, for now just close
                             }
                         };
                         passwordForm.addEventListener('submit', formSubmitHandler);
 
                         document.getElementById('password-cancel').onclick = () => {
                             passwordModal.style.display = 'none';
-                            passwordForm.removeEventListener('submit', formSubmitHandler);
+                            passwordForm.removeEventListener('submit', formSubmitHandler); // Ensure listener is removed on cancel
                         };
                     } else {
                         proceedToRoom();
@@ -1229,6 +1109,7 @@ def index():
                     const sendBtn = document.getElementById('send-btn');
                     const text = input.value.trim();
                     if (text && activeChatroomId && currentUser.address) {
+                        const messageText = text;
                         input.value = '';
                         input.disabled = true;
                         sendBtn.disabled = true;
@@ -1239,12 +1120,22 @@ def index():
                                 body: JSON.stringify({
                                     chatroom_id: activeChatroomId,
                                     sender_address: currentUser.address,
-                                    text: text
+                                    text: messageText
                                 })
                             });
-                            // Optimistic update or wait for poll
-                            // await fetchMessages(activeChatroomId);
-                            // document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
+                            // Optimistically add message before fetching
+                             renderMessages([...document.getElementById('messages-container').children].map(el => {
+                                 // Basic parsing for optimistic update - this is simplified
+                                 return {
+                                     sender_address: el.classList.contains('sent') ? currentUser.address : 'other', // Simplified check
+                                     display_name: el.querySelector('.message-sender')?.textContent || '...',
+                                     text: el.querySelector('.message-bubble')?.textContent || '...',
+                                     timestamp: new Date().toISOString()
+                                 };
+                             }), { sender_address: currentUser.address, display_name: currentUser.username || truncateAddress(currentUser.address), text: messageText, timestamp: new Date().toISOString() });
+
+                            await fetchMessages(activeChatroomId); // Fetch to get official state and other messages
+                            document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
                         } finally {
                             input.disabled = false;
                             sendBtn.disabled = false;
@@ -1266,13 +1157,9 @@ def index():
                     const name = document.getElementById('room-name').value.trim();
                     const password = document.getElementById('room-password').value;
                     if (!name) {
-                        showStatus('Название чата не может быть пустым.', 'error');
-                        return;
-                    }
-                    if (!currentUser.address) {
-                        showStatus('Необходимо подключить кошелек для создания чата.', 'error');
+                         showStatus('Название чата не может быть пустым.', 'error');
                          return;
-                    }
+                    };
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -1295,7 +1182,11 @@ def index():
                             body: JSON.stringify({ address: address })
                         });
                         
+                        const isCurrentUser = (address === currentUser.address);
                         const username = userData.username || `User ${truncateAddress(address)}`;
+                        
+                        document.getElementById('profile-modal-title').textContent = isCurrentUser ? 'Мой профиль' : 'Профиль пользователя';
+
                         const avatarContainer = document.getElementById('profile-avatar-container');
                         const usernameEl = document.getElementById('profile-username');
                         const addressEl = document.getElementById('profile-address');
@@ -1308,19 +1199,20 @@ def index():
                         
                         usernameEl.textContent = username;
                         addressEl.textContent = address;
-
-                        // Show balance only for current user's profile
-                        if (address === currentUser.address && currentUser.balance !== null) {
-                            balanceEl.textContent = `Баланс: ${currentUser.balance.toFixed(2)} TON`;
-                            balanceEl.style.display = 'block';
+                        
+                        // Show balance only for the connected user's profile
+                        if (isCurrentUser) {
+                             balanceEl.style.display = 'block';
+                             balanceEl.textContent = `Баланс: ${currentUser.balance !== null ? currentUser.balance.toFixed(2) + ' TON' : '...loading'}`;
+                             if (currentUser.balance === 'error') balanceEl.textContent = 'Баланс: ошибка загрузки';
                         } else {
                              balanceEl.style.display = 'none';
+                             balanceEl.textContent = ''; // Clear content
                         }
-                        
+
                         qrCodeEl.innerHTML = '';
                         if (profileQrCode) {
-                            profileQrCode.clear();
-                            profileQrCode = null;
+                            profileQrCode.clear(); // Clear previous QR code
                         }
                         profileQrCode = new QRCode(qrCodeEl, {
                             text: address,
@@ -1332,11 +1224,15 @@ def index():
                         });
                         
                         sendTonBtn.onclick = async () => {
-                            if (!tonConnectUI.connected) {
-                                showStatus('Подключите кошелек для отправки TON.', 'error');
+                             if (!tonConnectUI.connected) {
+                                 showStatus('Подключите кошелек для отправки TON.', 'error');
+                                 return;
+                             }
+                             if (isCurrentUser) { // Should not happen if button is hidden, but safety check
+                                showStatus('Вы не можете отправить TON себе.', 'error');
                                 return;
-                            }
-                            const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
+                             }
+                            const amountString = prompt(`Введите сумму в TON для отправки ${username} (${truncateAddress(address)}):`, "0.1");
                             if (amountString === null) return;
                             
                             const amount = parseFloat(amountString);
@@ -1354,14 +1250,15 @@ def index():
 
                             try {
                                 await tonConnectUI.sendTransaction(transaction);
-                                showStatus(`Транзакция на ${amount} TON отправлена!`, 'success');
+                                showStatus(`Транзакция отправлена успешно!`, 'success');
                                 profileModal.style.display = 'none';
                             } catch (error) {
-                                showStatus('Транзакция отклонена.', 'error');
+                                showStatus('Транзакция отклонена или произошла ошибка.', 'error');
+                                console.error('Send transaction failed:', error);
                             }
                         };
                         
-                        sendTonBtn.style.display = (address === currentUser.address || !tonConnectUI.connected) ? 'none' : 'block';
+                        sendTonBtn.style.display = isCurrentUser ? 'none' : 'block'; // Hide "Send TON" button for own profile
                         profileModal.style.display = 'flex';
                     } catch (err) {
                         showStatus('Не удалось загрузить профиль.', 'error');
@@ -1370,26 +1267,49 @@ def index():
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    // Stop previous scanner if running
-                    if (html5QrCode && html5QrCode.isScanning) {
-                        html5QrCode.stop().catch(err => console.error("Failed to stop existing QR scanner:", err));
-                    }
+                     const qrReaderEl = document.getElementById('qr-reader');
+                     qrReaderEl.innerHTML = ''; // Clear previous content
                     html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                         hideScanner();
-                        // Basic TON address validation
-                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                            showProfile(decodedText);
-                        } else {
-                            showStatus('Отсканирован недействительный QR-код TON.', 'error');
-                        }
+                        // Attempt to parse as a TON address or a link containing one
+                         try {
+                            let address = decodedText;
+                             // Basic checks for common TON address prefixes and formats
+                             if (decodedText.startsWith('ton://transfer/')) {
+                                 const url = new URL(decodedText);
+                                 address = url.pathname.replace('/transfer/', '');
+                             } else if (decodedText.includes('ton://')) {
+                                  const url = new URL(decodedText);
+                                  address = url.pathname.replace('/', '');
+                             }
+
+                             // Simple validation if it looks like a TON address
+                            if (typeof address === 'string' && address.length > 40 && (address.startsWith('EQ') || address.startsWith('UQ') || address.endsWith(':_'))) {
+                                 // Convert to standard format if it's raw hex like ends with :_
+                                 if (address.endsWith(':_')) {
+                                      // This is a raw address hex. Need TON library to convert to user-friendly.
+                                      // For this simple app, let's stick to user-friendly formats EQ/UQ
+                                      showStatus('Отсканирован формат адреса, который пока не поддерживается (нужен пользовательский формат EQ/UQ).', 'error');
+                                       return;
+                                 }
+                                // Attempt to show profile for the scanned address
+                                showProfile(address);
+                            } else {
+                                showStatus('Отсканирован недействительный QR-код адреса TON.', 'error');
+                            }
+                         } catch (e) {
+                             console.error("QR scan error:", e);
+                             showStatus('Ошибка при обработке QR-кода.', 'error');
+                         }
                     };
-                    const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.0 };
+                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
+                     // Request camera permission and start scanning
                     html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
+                             console.error("QR scanner start failed:", err);
                             showStatus('Не удалось запустить сканер. Проверьте разрешения камеры.', 'error');
-                            console.error("QR Scanner start error:", err);
-                            hideScanner();
+                            hideScanner(); // Ensure modal closes on error
                         });
                 };
 
@@ -1399,84 +1319,132 @@ def index():
                     }
                     scannerModal.style.display = 'none';
                 };
-
-                const loadBrowserUrl = () => {
-                    let url = browserUrlInput.value.trim();
-                    if (!url) return;
-
-                    // Simple check if it looks like a domain, otherwise assume search
-                    if (!url.includes('.') || url.startsWith(' ') || url.endsWith(' ')) {
-                        url = 'https://www.google.com/search?q=' + encodeURIComponent(url);
-                    } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                        url = 'https://' + url; // Default to https
-                    }
-                    browserIframe.src = url;
-                    browserUrlInput.value = url; // Update input to full URL
-                };
                 
-                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', () => switchView('chats')); // Back button goes to chats view
-
-                // Navbar event listeners
-                navbarItems.forEach(item => {
-                    item.addEventListener('click', () => {
-                        const viewName = item.dataset.view;
-                        if (viewName) {
-                            switchView(viewName);
-                        }
-                    });
-                });
+                 // Event listeners for tabs/buttons
+                 chatsTab.addEventListener('click', () => switchLeftPanelContent('chats'));
+                 usersTab.addEventListener('click', () => switchLeftPanelContent('users'));
+                 document.getElementById('back-to-list-btn').addEventListener('click', () => {
+                     activeChatroomId = null;
+                     if (messagePollingInterval) clearInterval(messagePollingInterval);
+                     activeChat.style.display = 'none';
+                     chatPlaceholder.style.display = 'flex';
+                     showPanel('left-panel');
+                 });
+                 document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
+                 document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
+
+                 // Event listeners for bottom navigation
+                 document.querySelectorAll('.nav-item').forEach(item => {
+                     item.addEventListener('click', () => {
+                         const target = item.dataset.target;
+                         // Hide modals first if any are open
+                         createRoomModal.style.display = 'none';
+                         passwordModal.style.display = 'none';
+                         profileModal.style.display = 'none';
+                         hideScanner();
+
+                         if (target === 'chats') {
+                              switchLeftPanelContent('chats');
+                              showPanel('left-panel');
+                              // On mobile, if chat is open, close it
+                              if (window.innerWidth < 768 && activeChat.style.display !== 'none') {
+                                  document.getElementById('back-to-list-btn').click(); // Use existing back logic
+                              } else if (window.innerWidth >= 768) {
+                                   // On desktop, just ensure list is visible and active
+                                   showPanel('left-panel'); // Redundant on desktop but safe
+                              }
 
-                 // Browser URL bar event listener
-                 document.getElementById('browser-go-btn').addEventListener('click', loadBrowserUrl);
-                 browserUrlInput.addEventListener('keypress', function(event) {
-                     if (event.key === 'Enter') {
-                         event.preventDefault();
-                         loadBrowserUrl();
-                     }
+                         } else if (target === 'users') {
+                              switchLeftPanelContent('users');
+                              showPanel('left-panel');
+                              // On mobile, if chat is open, close it
+                              if (window.innerWidth < 768 && activeChat.style.display !== 'none') {
+                                   document.getElementById('back-to-list-btn').click();
+                               } else if (window.innerWidth >= 768) {
+                                   // On desktop, just ensure list is visible and active
+                                   showPanel('left-panel'); // Redundant on desktop but safe
+                               }
+
+                         } else if (target === 'scan') {
+                             showScanner();
+                         } else if (target === 'profile') {
+                             if (currentUser.address) {
+                                 showProfile(currentUser.address);
+                             } else {
+                                 showStatus('Подключите кошелек, чтобы увидеть профиль.', 'info');
+                             }
+                         }
+                         // Active state is updated within showPanel and switchLeftPanelContent
+                     });
                  });
 
 
                 const handleResize = () => {
-                    const isDesktop = window.innerWidth >= 768;
-                    const isChatActive = activeChat.style.display === 'flex';
-                    const currentViewName = mainContentArea.dataset.activeView || 'chats'; // Default to chats
-
-                    // Manage back button visibility
-                    document.getElementById('back-to-list-btn').style.display = isDesktop ? 'none' : (isChatActive ? 'block' : 'none');
-
-                    // Manage view visibility based on desktop/mobile and active chat state
-                    if (isDesktop) {
-                         chatroomListView.style.display = 'flex';
-                         usersListView.style.display = (currentViewName === 'users') ? 'flex' : 'none';
-                         browserView.style.display = (currentViewName === 'browser') ? 'flex' : 'none';
-                         chatWindowView.style.display = (currentViewName === 'chats') ? 'flex' : 'none';
-
-                         // On desktop, chat window is always visible when chats view is active, regardless of selected chat
-                         if (currentViewName === 'chats') chatWindowView.style.display = 'flex';
-
-                    } else { // Mobile layout
-                         // Hide all content views initially
-                         document.querySelectorAll('.app-view-content').forEach(view => view.style.display = 'none');
-
-                         // Show the active view
-                         if (isChatActive && currentViewName === 'chats') {
-                              chatWindowView.style.display = 'flex';
+                    const isMobile = window.innerWidth < 768;
+
+                    // Toggle back button visibility
+                    document.getElementById('back-to-list-btn').style.display = isMobile ? 'block' : 'none';
+
+                    // Toggle bottom nav visibility
+                    bottomNav.style.display = isMobile ? 'flex' : 'none';
+
+                    // Adjust panel visibility based on active state and screen size
+                    if (isMobile) {
+                         if (activeChat.style.display === 'flex') {
+                             // Mobile, chat is active
+                              leftPanel.style.display = 'none';
+                              rightPanel.style.display = 'flex';
+                              document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+                              document.querySelector('.nav-item[data-target="chats"]').classList.add('active'); // Chat is part of chats flow
                          } else {
-                              switch (currentViewName) {
-                                   case 'chats': chatroomListView.style.display = 'flex'; break;
-                                   case 'users': usersListView.style.display = 'flex'; break;
-                                   case 'browser': browserView.style.display = 'flex'; break;
-                                   // Profile and Scan are modals, not main content views
-                              }
+                              // Mobile, list (chats or users) is active
+                              rightPanel.style.display = 'none';
+                              leftPanel.style.display = 'flex';
+                             // Nav active state updated by switchLeftPanelContent
+                         }
+                         // Add padding to content containers to avoid being hidden by bottom nav
+                         chatroomList.style.paddingBottom = userListEl.style.paddingBottom = messagesContainer.style.paddingBottom = `${varNames.navHeightValue}px`;
+                         document.getElementById('status-bar').style.bottom = `calc(${varNames.navHeightValue}px + 10px)`;
+
+                    } else {
+                         // Desktop
+                         leftPanel.style.display = 'flex';
+                         rightPanel.style.display = 'flex';
+                         // Remove padding added for mobile nav
+                         chatroomList.style.paddingBottom = userListEl.style.paddingBottom = messagesContainer.style.paddingBottom = '0';
+                         document.getElementById('status-bar').style.bottom = '20px';
+
+                         // Ensure correct left panel content is shown based on tabs
+                         if(chatsTab.classList.contains('active')) {
+                             switchLeftPanelContent('chats');
+                         } else if (usersTab.classList.contains('active')) {
+                             switchLeftPanelContent('users');
                          }
                     }
                 };
 
-                window.addEventListener('resize', handleResize);
+                // Get CSS variable value for nav height
+                const getCssVariable = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+                 const varNames = {
+                     navHeight: '--nav-height'
+                 };
+                 const varValues = {};
+                 const updateCssVariables = () => {
+                     varValues.navHeightValue = parseFloat(getCssVariable(varNames.navHeight));
+                 };
+                 updateCssVariables();
+
+
+                window.addEventListener('resize', () => {
+                    updateCssVariables(); // Recalculate nav height on resize
+                    handleResize();
+                });
 
+                // Initial setup
+                handleResize();
+                 switchLeftPanelContent('chats'); // Start by showing chats list
 
+                // TON Connect UI status change listener
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
                         const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
@@ -1486,33 +1454,39 @@ def index():
                         appView.style.display = 'none';
                         loginView.style.display = 'flex';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                        messagePollingInterval = null;
                         activeChatroomId = null;
-                        // Clear UI elements
-                        document.getElementById('chatroom-list').innerHTML = '';
-                        document.getElementById('users-list').innerHTML = '';
-                        document.getElementById('messages-container').innerHTML = '';
-                        chatPlaceholder.style.display = 'flex';
-                        activeChat.style.display = 'none';
-                        document.getElementById('user-wallet').textContent = '';
-                        document.getElementById('user-nickname').textContent = '';
-                         document.getElementById('username-input').value = '';
-
+                         activeChat.style.display = 'none';
+                         chatPlaceholder.style.display = 'flex';
+                         // Reset to default view state on disconnect
+                         switchLeftPanelContent('chats');
+                         handleResize();
                     }
                 });
 
-                 // Check initial TON Connect status
-                 if (tonConnectUI.connected) {
-                     const address = TON_CONNECT_UI.toUserFriendlyAddress(tonConnectUI.wallet.account.address, false);
-                     initializeUser(address);
-                 } else {
-                     // Show login view by default if not connected
-                     loginView.style.display = 'flex';
-                     appView.style.display = 'none';
-                 }
+                 // Listen for account change (e.g., balance update from wallet)
+                 // TonConnectUI doesn't provide a direct balance update event for the *connected* account
+                 // The balance property on `tonConnectUI.account` is the most reliable source.
+                 // We can periodically fetch it or rely on UI showing latest when modal opens.
+                 // Let's add a periodic fetch while connected.
+                 let balancePollingInterval = null;
+                 tonConnectUI.onStatusChange(wallet => {
+                     if (wallet) {
+                          // Start balance polling when connected
+                          if (!balancePollingInterval) {
+                              balancePollingInterval = setInterval(fetchBalance, 15000); // Poll balance every 15 seconds
+                          }
+                     } else {
+                          // Stop balance polling when disconnected
+                          if (balancePollingInterval) {
+                              clearInterval(balancePollingInterval);
+                              balancePollingInterval = null;
+                          }
+                          currentUser.balance = null; // Clear balance state
+                          updateUserInfo(); // Update UI
+                     }
+                 }, err => console.error("TON Connect status change error:", err));
+
 
-                 // Initial view setup and resize handling
-                 handleResize();
             });
         </script>
     </body>
@@ -1520,6 +1494,7 @@ def index():
     '''
     return Response(html_content, mimetype='text/html')
 
+
 @app.route('/api/user_data', methods=['POST'])
 def get_user_data():
     data = request.get_json()
@@ -1527,22 +1502,27 @@ def get_user_data():
     if not address:
         return jsonify({'error': 'Address is required'}), 400
     db = read_db()
-    user_info = db['users'].get(address)
-    username = user_info.get('username') if user_info else None
+    user_info = db['users'].get(address, {})
+    username = user_info.get('username')
+    # Balance is fetched on frontend via TON Connect UI for the connected user
+    # We don't need to return balance here for any arbitrary user
     return jsonify({'username': username})
 
 @app.route('/api/users', methods=['GET'])
 def get_users():
     db = read_db()
     users_list = []
-    for address, user_data in db.get('users', {}).items():
+    # Iterate through all users who have an entry in the db
+    for address, user_data in db['users'].items():
+        # Use username if available, otherwise use truncated address
+        display_name = user_data.get('username') if user_data.get('username') else f"{address[:6]}...{address[-6:]}" # Slightly longer truncation for clarity
         users_list.append({
             'address': address,
-            'username': user_data.get('username')
+            'display_name': display_name,
+            'has_username': bool(user_data.get('username'))
         })
-    # Sort users alphabetically by username or address
-    users_list.sort(key=lambda x: x['username'] if x['username'] else x['address'])
-    return jsonify({'users': users_list})
+    # Sort alphabetically by display name
+    return jsonify({'users': sorted(users_list, key=lambda x: x['display_name'].lower())})
 
 
 @app.route('/api/set_username', methods=['POST'])
@@ -1566,13 +1546,13 @@ def set_username():
 def get_chatrooms():
     db = read_db()
     chatrooms_list = []
-    for room_id, room_data in db.get('chatrooms', {}).items():
+    for room_id, room_data in db['chatrooms'].items():
         chatrooms_list.append({
             'id': room_id,
             'name': room_data['name'],
-            'is_private': room_data.get('is_private', False)
+            'is_private': room_data.get('is_private', False) # Default to false
         })
-    return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
+    return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'].lower())})
 
 @app.route('/api/create_chatroom', methods=['POST'])
 def create_chatroom():
@@ -1582,15 +1562,16 @@ def create_chatroom():
     creator_address = data.get('creator_address')
     if not name or not creator_address:
         return jsonify({'error': 'Name and creator address are required'}), 400
-    if not name.strip():
-         return jsonify({'error': 'Chatroom name cannot be empty'}), 400
+    if len(name) < 3 or len(name) > 30: # Add name length validation
+         return jsonify({'error': 'Chatroom name must be between 3 and 30 characters'}), 400
+    if password and len(password) < 4: # Add password length hint/validation
+         return jsonify({'error': 'Password should be at least 4 characters'}), 400
 
 
     db = read_db()
     room_id = str(uuid.uuid4())
     db['chatrooms'][room_id] = {
-        'id': room_id,
-        'name': name.strip(),
+        'name': name,
         'creator': creator_address,
         'is_private': bool(password),
         'password_hash': generate_password_hash(password) if password else None
@@ -1608,22 +1589,29 @@ def join_chatroom():
     chatroom = db['chatrooms'].get(chatroom_id)
     if not chatroom:
         return jsonify({'error': 'Chatroom not found'}), 404
-    if chatroom.get('is_private', False):
-        if not password or not chatroom.get('password_hash') or not check_password_hash(chatroom['password_hash'], password):
+    if chatroom.get('is_private', False): # Default to false if key missing
+        if not password or not check_password_hash(chatroom['password_hash'], password):
             return jsonify({'error': 'Invalid password'}), 403
     return jsonify({'success': True})
 
 @app.route('/api/messages/<chatroom_id>', methods=['GET'])
 def get_messages(chatroom_id):
     db = read_db()
-    room_messages = db['messages'].get(chatroom_id, [])
-
+    if chatroom_id not in db['messages']:
+        return jsonify({'error': 'Chatroom not found'}), 404
+    
     messages_with_names = []
+    room_messages = db['messages'].get(chatroom_id, [])
+    
+    # Fetch all necessary user data once
+    user_data_map = db['users']
+    
     for msg in room_messages:
         sender_address = msg['sender_address']
-        user_info = db['users'].get(sender_address)
-        display_name = (user_info.get('username') if user_info and user_info.get('username')
-                        else f"{sender_address[:4]}...{sender_address[-4:]}")
+        user_info = user_data_map.get(sender_address, {})
+        # Use username if available, otherwise use truncated address
+        display_name = (user_info.get('username') if user_info.get('username')
+                        else f"{sender_address[:6]}...{sender_address[-6:]}") # Consistent truncation
 
         msg_copy = msg.copy()
         msg_copy['display_name'] = display_name
@@ -1636,10 +1624,13 @@ def send_message():
     data = request.get_json()
     chatroom_id = data.get('chatroom_id')
     sender_address = data.get('sender_address')
-    text = data.get('text')
+    text = data.get('text', '').strip() # Strip whitespace
+
+    if not all([chatroom_id, sender_address]) or not text: # Text cannot be empty after strip
+        return jsonify({'error': 'Missing data or empty message'}), 400
+    if len(text) > 1000: # Add message length limit
+         return jsonify({'error': 'Message is too long'}), 400
 
-    if not all([chatroom_id, sender_address, text]):
-        return jsonify({'error': 'Missing data'}), 400
 
     db = read_db()
     if chatroom_id not in db['messages']:
@@ -1651,8 +1642,11 @@ def send_message():
         'text': text,
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
-
-    if len(db['messages'][chatroom_id]) >= 100:
+    
+    # Keep message list size reasonable
+    MAX_MESSAGES_PER_CHAT = 200 # Increased limit slightly
+    if len(db['messages'][chatroom_id]) >= MAX_MESSAGES_PER_CHAT:
+        # Remove oldest message
         db['messages'][chatroom_id].pop(0)
 
     db['messages'][chatroom_id].append(message)
@@ -1662,4 +1656,4 @@ def send_message():
 
 if __name__ == '__main__':
     init_db()
-    app.run(host='0.0.0.0', port=7860)
+    app.run(host='0.0.0.0', port=7860, debug=True) # Debug mode for development