Update app.py

app.py

@@ -19,6 +19,8 @@ def init_db():
             }, f, indent=4)
 
 def read_db():
+    if not os.path.exists(DB_FILE):
+        return {"users": {}, "chatrooms": {}, "messages": {}}
     with open(DB_FILE, 'r') as f:
         return json.load(f)
 
@@ -43,15 +45,15 @@ def index():
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
         <style>
             :root {
-                --bg-primary: #0F0F11;
-                --bg-secondary: #18191C;
-                --bg-tertiary: #212328;
-                --bg-hover: #2A2C33;
-                --text-primary: #EAECEF;
-                --text-secondary: #8E9297;
-                --accent-blue: #0088CC;
-                --accent-blue-light: #33AADD;
-                --border-color: #2D2F34;
+                --bg-primary: #0F0F11; /* Dark */
+                --bg-secondary: #18191C; /* Slightly lighter dark */
+                --bg-tertiary: #212328; /* Even lighter dark */
+                --bg-hover: #2A2C33;    /* Hover background */
+                --text-primary: #EAECEF; /* Light text */
+                --text-secondary: #8E9297; /* Muted text */
+                --accent-blue: #0088CC; /* TON Blue */
+                --accent-blue-light: #33AADD; /* Lighter TON Blue */
+                --border-color: #2D2F34; /* Border color */
                 --success-color: #28a745;
                 --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
@@ -64,7 +66,9 @@ def index():
                 -webkit-tap-highlight-color: transparent;
             }
 
-            html { font-size: 16px; }
+            html {
+                font-size: 16px;
+            }
 
             body {
                 font-family: var(--font-family);
@@ -84,6 +88,7 @@ def index():
                 display: flex;
                 flex-direction: column;
                 transition: opacity 0.3s ease;
+                position: relative; /* Needed for fixed elements inside */
             }
 
             #login-view {
@@ -97,13 +102,13 @@ def index():
                 background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
             }
             #login-view img {
-                width: 100px;
-                height: 100px;
+                width: 120px;
+                height: 120px;
                 margin-bottom: 24px;
-                filter: drop-shadow(0 0 15px rgba(0, 136, 204, 0.5));
+                filter: drop-shadow(0 0 20px rgba(0, 136, 204, 0.6));
             }
             #login-view h1 {
-                font-size: 2.8rem;
+                font-size: 3.5rem;
                 font-weight: 700;
                 background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
                 -webkit-background-clip: text;
@@ -111,7 +116,7 @@ def index():
                 margin-bottom: 12px;
             }
             #login-view p {
-                font-size: 1.1rem;
+                font-size: 1.2rem;
                 color: var(--text-secondary);
                 margin-bottom: 40px;
             }
@@ -120,39 +125,50 @@ def index():
                 display: none;
                 width: 100%;
                 height: 100%;
-                flex-direction: column;
+                flex-direction: column; /* Default to column for mobile */
             }
             
-            .view-content {
-                height: calc(100% - 60px);
-                display: flex;
-                flex-direction: row;
+            .content-area {
+                flex-grow: 1;
+                overflow: hidden; /* Hide overflow when panels switch */
+                position: relative; /* For absolute positioned panels */
             }
-            .view-panel {
-                display: none;
-                height: 100%;
+
+            .panel {
                 width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                display: none;
+                flex-direction: column;
+                background-color: var(--bg-primary);
             }
-            .view-panel.active {
+            .panel.active {
                 display: flex;
             }
-            
-            #chat-view {
-                flex-direction: row;
-            }
 
-            #chatroom-list-view {
-                display: flex;
+            /* Chat Panel */
+            #chats-panel {
                 flex-direction: column;
-                height: 100%;
+            }
+            #chatroom-list-view, #chat-window-view {
                 width: 100%;
-                background-color: var(--bg-secondary);
+                height: 100%;
             }
-            
+            #chatroom-list-view {
+                 background-color: var(--bg-secondary);
+                 border-right: 1px solid var(--border-color); /* For desktop */
+            }
+             #chat-window-view {
+                background-color: var(--bg-primary);
+             }
+
             .list-header {
                 padding: 16px;
                 border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
+                background-color: var(--bg-secondary);
             }
             .list-header-top {
                 display: flex;
@@ -160,7 +176,10 @@ def index():
                 align-items: center;
                 margin-bottom: 16px;
             }
-            .list-header-top h2 { font-size: 1.5rem; font-weight: 600; }
+            .list-header-top h2 {
+                font-size: 1.5rem;
+                font-weight: 600;
+            }
             
             .user-profile {
                 padding: 12px;
@@ -205,13 +224,24 @@ def index():
                 transform: translateY(-2px);
                 box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
             }
+            .action-btn:active {
+                 transform: translateY(0);
+                 box-shadow: none;
+            }
+             .action-btn:disabled {
+                 opacity: 0.5;
+                 cursor: not-allowed;
+             }
             .action-btn.small {
                 padding: 8px 12px;
                 font-size: 0.9rem;
             }
             
-            #chatroom-list { flex-grow: 1; overflow-y: auto; }
-            .chatroom-item {
+            #chatroom-list, #users-list {
+                flex-grow: 1;
+                overflow-y: auto;
+            }
+            .list-item {
                 display: flex;
                 align-items: center;
                 gap: 12px;
@@ -220,7 +250,7 @@ def index():
                 border-bottom: 1px solid var(--border-color);
                 transition: background-color 0.2s ease;
             }
-            .chatroom-item:hover { background-color: var(--bg-hover); }
+            .list-item:hover { background-color: var(--bg-hover); }
 
             .avatar {
                 width: 40px;
@@ -232,9 +262,14 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
+                font-size: 1.2rem;
+                background-color: #ccc; /* Default */
             }
-            .chatroom-info { flex-grow: 1; overflow: hidden; }
-            .chatroom-name {
+            .list-item-info {
+                flex-grow: 1;
+                overflow: hidden;
+            }
+            .list-item-name {
                 font-weight: 500;
                 white-space: nowrap;
                 overflow: hidden;
@@ -247,14 +282,11 @@ def index():
                 flex-shrink: 0;
             }
 
+            /* Chat Window */
             #chat-window-view {
-                display: none;
-                flex-direction: column;
-                height: 100%;
-                width: 100%;
-                background-color: var(--bg-primary);
+                display: none; /* Start hidden on mobile */
             }
-            
+
             .chat-header {
                 display: flex;
                 align-items: center;
@@ -264,9 +296,25 @@ def index():
                 border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
             }
-            .back-btn { background: none; border: none; cursor: pointer; display: none; }
-            .back-btn svg { width: 24px; height: 24px; fill: var(--text-primary); }
-            #chat-header-title { font-size: 1.2rem; font-weight: 600; }
+            .back-btn {
+                background: none;
+                border: none;
+                cursor: pointer;
+                display: none; /* Show on mobile only */
+                padding: 0;
+            }
+            .back-btn svg {
+                width: 24px;
+                height: 24px;
+                fill: var(--text-primary);
+            }
+            #chat-header-title {
+                font-size: 1.2rem;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
 
             #messages-container {
                 flex-grow: 1;
@@ -275,11 +323,25 @@ def index():
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
+                -webkit-overflow-scrolling: touch; /* Improve scrolling on mobile */
             }
 
-            .message { display: flex; gap: 10px; max-width: 80%; }
-            .message .avatar { width: 36px; height: 36px; align-self: flex-end; }
-            .message-content { display: flex; flex-direction: column; gap: 4px; }
+            .message {
+                display: flex;
+                gap: 10px;
+                max-width: 85%; /* Slightly larger max-width */
+            }
+            .message .avatar {
+                width: 32px; /* Smaller avatar in chat */
+                height: 32px;
+                align-self: flex-end;
+                font-size: 1rem;
+            }
+            .message-content {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+            }
             .message-sender {
                 font-size: 0.8rem;
                 font-weight: 500;
@@ -322,7 +384,7 @@ def index():
 
             .message-form {
                 display: flex;
-                padding: 16px;
+                padding: 10px 16px; /* Slightly less padding */
                 gap: 12px;
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
@@ -341,93 +403,131 @@ def index():
             }
             #message-input:focus { border-color: var(--accent-blue); }
 
-            .send-btn { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; padding: 0; }
-            .send-btn svg { width: 20px; height: 20px; fill: white; }
-
-            #browser-view { flex-direction: column; background-color: var(--bg-primary); }
-            .browser-header {
-                display: flex;
-                gap: 8px;
-                padding: 8px 12px;
-                background-color: var(--bg-secondary);
-                border-bottom: 1px solid var(--border-color);
-                align-items: center;
-                flex-shrink: 0;
-            }
-            .browser-header .nav-icon-btn {
-                background: var(--bg-tertiary);
+            .send-btn {
+                width: 44px;
+                height: 44px;
                 border-radius: 50%;
-                width: 36px;
-                height: 36px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: none;
-                cursor: pointer;
+                flex-shrink: 0;
+                padding: 0;
             }
-            .browser-header .nav-icon-btn svg { fill: var(--text-primary); width: 20px; height: 20px; }
-            #url-input {
-                flex-grow: 1;
-                padding: 8px 12px;
-                border: 1px solid var(--border-color);
-                background-color: var(--bg-primary);
-                color: var(--text-primary);
-                border-radius: 18px;
-                outline: none;
-                font-size: 0.9rem;
+            .send-btn svg { width: 20px; height: 20px; fill: white; }
+
+            /* Users Panel */
+            #users-panel .list-header {
+                 background-color: var(--bg-secondary); /* Consistent header bg */
             }
-            #browser-iframe {
-                flex-grow: 1;
-                border: none;
-                background-color: #fff;
+            .user-item-address {
+                font-size: 0.8rem;
+                color: var(--text-secondary);
+                word-break: break-all;
             }
 
-            #bottom-nav {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                height: 60px;
-                background-color: var(--bg-secondary);
-                border-top: 1px solid var(--border-color);
+            /* Browser Panel */
+             #browser-panel {
+                 flex-direction: column;
+             }
+             .browser-bar {
+                 display: flex;
+                 padding: 12px 16px;
+                 gap: 8px;
+                 background-color: var(--bg-secondary);
+                 border-bottom: 1px solid var(--border-color);
+                 flex-shrink: 0;
+             }
+             .browser-bar input {
+                 flex-grow: 1;
+                 padding: 8px 12px;
+                 background-color: var(--bg-tertiary);
+                 border: 1px solid var(--border-color);
+                 color: var(--text-primary);
+                 border-radius: 6px;
+                 font-size: 0.9rem;
+                 outline: none;
+             }
+             .browser-bar input:focus { border-color: var(--accent-blue); }
+             .browser-bar button {
+                 padding: 8px 12px;
+                 font-size: 0.9rem;
+             }
+             #browser-iframe-container {
+                 flex-grow: 1;
+                 overflow: hidden;
+             }
+             #browser-iframe {
+                 width: 100%;
+                 height: 100%;
+                 border: none;
+             }
+
+
+            /* Navigation Bar */
+            .nav-bar {
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
+                height: 60px; /* Standard nav bar height */
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
+                flex-shrink: 0;
+                z-index: 10; /* Above content */
+                padding: 0 8px;
             }
-            .nav-btn {
+            .nav-button {
+                flex: 1;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                gap: 4px;
                 background: none;
                 border: none;
                 color: var(--text-secondary);
-                cursor: pointer;
-                transition: color 0.2s;
                 font-size: 0.7rem;
-                flex-grow: 1;
-                height: 100%;
+                cursor: pointer;
+                padding: 4px 0;
+                transition: color 0.2s ease;
+                position: relative; /* For scanner circle */
+            }
+            .nav-button.active {
+                 color: var(--accent-blue-light);
             }
-            .nav-btn svg {
+            .nav-button svg {
                 width: 24px;
                 height: 24px;
-                fill: currentColor;
+                fill: var(--text-secondary);
+                margin-bottom: 2px;
+                transition: fill 0.2s ease;
             }
-            .nav-btn.active { color: var(--accent-blue); }
-            #nav-scan-btn {
-                transform: translateY(-15px);
-                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
-                border-radius: 50%;
-                width: 56px;
-                height: 56px;
-                border: 4px solid var(--bg-secondary);
-                color: white;
-                box-shadow: 0 -4px 15px rgba(0, 136, 204, 0.2);
-                flex-grow: 0;
+             .nav-button.active svg {
+                 fill: var(--accent-blue-light);
+             }
+            .nav-button span {
+                display: none; /* Hide text by default on mobile */
             }
-            #nav-scan-btn svg { width: 28px; height: 28px; }
 
+            .nav-button#scanner-nav-btn {
+                width: 56px; /* Larger button area */
+                height: 56px;
+                margin-top: -20px; /* Lift it up */
+                border-radius: 50%;
+                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
+                color: white; /* Text color for scanner */
+            }
+             .nav-button#scanner-nav-btn svg {
+                 fill: white; /* Icon color for scanner */
+                 margin-bottom: 0;
+             }
+             .nav-button#scanner-nav-btn span {
+                 display: block; /* Show text for scanner */
+                 font-size: 0.6rem;
+                 margin-top: 2px;
+             }
+             .nav-button#scanner-nav-btn:hover {
+                 transform: translateY(-2px);
+             }
+
+
+            /* Modals (Keep existing styles mostly) */
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -464,12 +564,43 @@ def index():
                 font-size: 1rem;
             }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
-            .modal-btn { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
+            .modal-actions.vertical { flex-direction: column; align-items: stretch; }
+            .modal-btn {
+                padding: 10px 20px;
+                border-radius: 6px;
+                border: none;
+                cursor: pointer;
+                font-weight: 500;
+            }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
+            .modal-btn.action-btn { /* Inherits action-btn gradient */ }
             
+            #profile-modal .modal-content {
+                 text-align: center;
+            }
+             #profile-modal .profile-avatar-container .avatar {
+                 width: 80px; height: 80px; font-size: 2rem; margin: 20px auto;
+             }
+            #profile-modal .profile-info {
+                 margin-bottom: 20px;
+            }
+            #profile-modal .profile-info p {
+                 margin-bottom: 8px;
+            }
+             #profile-modal .profile-info h3 {
+                 margin-bottom: 8px;
+            }
+            #profile-modal #profile-qr-code {
+                 background: white; padding: 10px; margin: 20px auto 10px auto; width: fit-content; border-radius: 8px;
+            }
+             #profile-modal .qr-label {
+                 text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 20px;
+             }
+
+
             #status-bar {
                 position: fixed;
-                bottom: 75px;
+                bottom: calc(60px + 20px); /* Above nav bar + 20px */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -479,7 +610,7 @@ def index():
                 font-size: 0.9rem;
                 opacity: 0;
                 visibility: hidden;
-                transition: opacity 0.3s, visibility 0.3s, bottom 0.3s;
+                transition: opacity 0.3s, visibility 0.3s;
                 z-index: 2000;
                 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
             }
@@ -487,31 +618,76 @@ def index():
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
 
+            /* Desktop Layout */
             @media (min-width: 768px) {
+                body {
+                    padding: 20px; /* Add some padding around the app on desktop */
+                }
                 .main-container {
-                    max-width: 1100px;
-                    max-height: 760px;
+                    max-width: 1000px; /* Max width on desktop */
+                    max-height: 700px; /* Max height on desktop */
                     border-radius: 12px;
                     overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
                 }
-                .view-content {
-                    height: 100%;
+                 #app-view {
+                     flex-direction: row; /* Side-by-side layout on desktop */
+                 }
+
+                .content-area {
+                    position: static; /* No absolute positioning needed for panels */
+                    flex-direction: row; /* Arrange list and chat side-by-side */
+                }
+
+                .panel {
+                    position: static; /* Panels are side-by-side */
+                    display: flex !important; /* Always flex on desktop */
+                    flex-direction: column; /* Content within panel is column */
+                    width: auto; /* Width managed by flex-grow */
+                    flex-grow: 1; /* Fill available space */
+                }
+
+                #chats-panel {
+                     flex-direction: row; /* List and window side-by-side within chats panel */
+                     flex-grow: 1;
                 }
                 #chatroom-list-view {
-                    width: 320px;
-                    flex-shrink: 0;
-                    border-right: 1px solid var(--border-color);
-                    display: flex !important;
+                     width: 320px; /* Fixed width for chat list */
+                     flex-shrink: 0;
+                     display: flex !important; /* Always show list */
+                     flex-direction: column;
                 }
-                #chat-window-view { width: auto; flex-grow: 1; display: flex !important; }
-                #chat-window-view.hidden-on-desktop { display: flex !important; }
-                .back-btn { display: none !important; }
-                #bottom-nav { display: none; }
-                #status-bar { bottom: 20px; }
-                 #chat-view.active { display: flex; }
-                 #browser-view.active { display: flex; }
+                #chat-window-view {
+                     width: auto; /* Takes remaining space */
+                     flex-grow: 1;
+                     display: flex !important; /* Always show chat window placeholder or active */
+                     flex-direction: column;
+                     border-left: 1px solid var(--border-color);
+                }
+                #chat-window-view.hidden-on-desktop {
+                    /* This class is now obsolete with the new layout */
+                }
+
+                .back-btn { display: none !important; } /* Hide back button on desktop */
+
+                 #users-panel { flex-direction: column; }
+                 #browser-panel { flex-direction: column; }
+
+                .nav-bar {
+                    display: none; /* Hide bottom nav bar on desktop */
+                }
+
+                 .list-header {
+                     background-color: var(--bg-secondary); /* Consistent header bg */
+                 }
+                 #users-panel .list-header {
+                      background-color: var(--bg-secondary);
+                 }
+
+                 .nav-button span {
+                     display: none; /* Hide text even more consistently */
+                 }
             }
         </style>
     </head>
@@ -525,21 +701,17 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <div class="view-content">
-                <div id="chat-view" class="view-panel active">
+            <div class="content-area">
+                <!-- Chats Panel -->
+                <div id="chats-panel" class="panel active">
                     <div id="chatroom-list-view">
                         <div class="list-header">
                             <div class="list-header-top">
                                 <h2>Чаты</h2>
-                                <div style="display: flex; align-items: center; gap: 8px;">
-                                    <button id="my-profile-btn" class="action-btn small" title="Мой профиль">
-                                        <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                                    </button>
-                                    <button id="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>
+                                <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 class="user-profile">
                                 <div id="user-wallet"></div>
@@ -553,8 +725,8 @@ def index():
                         <div id="chatroom-list"></div>
                     </div>
 
-                    <div id="chat-window-view" class="hidden-on-desktop">
-                        <div id="chat-placeholder" class="chat-placeholder">
+                    <div id="chat-window-view">
+                         <div id="chat-placeholder" class="chat-placeholder">
                             <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
                             <h2>Выберите чат</h2>
                             <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
@@ -577,40 +749,63 @@ def index():
                         </div>
                     </div>
                 </div>
-                 <div id="browser-view" class="view-panel">
-                    <div class="browser-header">
-                        <button id="browser-back" class="nav-icon-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>
-                        <button id="browser-forward" class="nav-icon-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg></button>
-                        <button id="browser-reload" class="nav-icon-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg></button>
-                        <form id="url-form" style="flex-grow: 1; display: flex;"><input type="text" id="url-input" placeholder="Поиск или адрес" value="https://www.google.com"></form>
+
+                <!-- Users Panel -->
+                <div id="users-panel" class="panel">
+                    <div class="list-header">
+                        <h2>Пользователи</h2>
+                    </div>
+                    <div id="users-list">
+                        <!-- User list items will be loaded here -->
+                    </div>
+                </div>
+
+                 <!-- Browser Panel -->
+                <div id="browser-panel" class="panel">
+                    <div class="browser-bar">
+                        <input type="text" id="browser-url-input" placeholder="Введите URL">
+                        <button id="browser-go-btn" class="action-btn small">Перейти</button>
+                    </div>
+                    <div id="browser-iframe-container">
+                        <iframe id="browser-iframe" src="https://www.google.com/"></iframe>
                     </div>
-                    <iframe id="browser-iframe" src="https://www.google.com/webhp?igu=1"></iframe>
                 </div>
             </div>
 
-            <nav id="bottom-nav">
-                <button id="nav-chat-btn" class="nav-btn active">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
-                    <span>Чаты</span>
+            <!-- Bottom Navigation Bar -->
+            <div class="nav-bar">
+                <button class="nav-button active" data-panel="chats-panel" id="nav-chats-btn">
+                     <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 2V4h16v12z"/></svg>
+                     <span>Чаты</span>
+                </button>
+                <button class="nav-button" data-panel="users-panel" id="nav-users-btn">
+                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 7h3v7H6V7H3l4-4zm7.5 1.35l-1.41 1.41A5.98 5.98 0 0112 11c-.34 0-.68.03-1 .08V9.02c.3-.01.6-.02.99-.02 2.21 0 4-1.79 4-4 0-.33-.05-.65-.15-.97zM12 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
+                     <span>Юзеры</span>
                 </button>
-                <button id="nav-scan-btn" class="nav-btn">
-                     <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>
+                <button class="nav-button" id="scanner-nav-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
+                     <span>Сканнер</span>
                 </button>
-                <button id="nav-browser-btn" class="nav-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v-.07zM12 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm7.93-1L15 15v-1c0-1.1-.9-2-2-2V9c0-1.1.9-2 2-2h3.03c.52 1.25.8 2.58.8 4 0 3.95-3.05 7.23-7 7.93v-2.02c1.9-.42 3.48-1.73 4.19-3.45l-2.19-.9v.01z"/></svg>
-                    <span>Браузер</span>
+                <button class="nav-button" data-panel="browser-panel" id="nav-browser-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8h16v10zm-2-7H6v-2h12v2z"/></svg>
+                     <span>Браузер</span>
                 </button>
-            </nav>
+                <button class="nav-button" id="nav-profile-btn">
+                     <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>
+                </button>
+            </div>
         </div>
         
+        <!-- Modals (Keep as overlays) -->
         <div id="create-room-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Создать новый чат</h3>
                 <form id="create-room-form">
                     <label for="room-name">Название чата</label>
-                    <input type="text" id="room-name" required>
+                    <input type="text" id="room-name" required autocomplete="off">
                     <label for="room-password">Пароль (оставьте пустым для открытого)</label>
-                    <input type="password" id="room-password">
+                    <input type="password" id="room-password" autocomplete="new-password">
                     <div class="modal-actions">
                         <button type="button" id="create-room-cancel" class="modal-btn secondary-btn">Отмена</button>
                         <button type="submit" class="modal-btn action-btn">Создать</button>
@@ -624,7 +819,7 @@ def index():
                 <h3>Вход в приватный чат</h3>
                 <form id="password-form">
                     <label for="password-input">Введите пароль</label>
-                    <input type="password" id="password-input" required>
+                    <input type="password" id="password-input" required autocomplete="current-password">
                     <div class="modal-actions">
                         <button type="button" id="password-cancel" class="modal-btn secondary-btn">Отмена</button>
                         <button type="submit" class="modal-btn action-btn">Войти</button>
@@ -634,14 +829,19 @@ def index():
         </div>
 
         <div id="profile-modal" class="modal-overlay">
-            <div class="modal-content" style="text-align: center;">
+            <div class="modal-content">
                 <h3 id="profile-modal-title">Профиль пользователя</h3>
-                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
-                <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
-                <p id="profile-address" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
-                <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
-                <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px;">Отсканируйт�� для открытия профиля</p>
-                <div class="modal-actions" style="flex-direction: column; gap: 12px; align-items: stretch;">
+                 <div class="profile-avatar-container">
+                     <div id="profile-avatar" class="avatar"></div>
+                 </div>
+                <div class="profile-info">
+                    <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;"></p>
+                    <p id="profile-balance" style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px;"></p>
+                </div>
+                <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto 10px auto; width: fit-content; border-radius: 8px;"></div>
+                <p class="qr-label">Отсканируйте для открытия профиля</p>
+                <div class="modal-actions vertical">
                     <button id="send-ton-btn" class="modal-btn action-btn">Отправить TON</button>
                     <button id="profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
                 </div>
@@ -651,7 +851,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader" style="width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></div>
+                <div id="qr-reader" style="width: 100%; min-height: 200px; 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>
@@ -667,13 +867,14 @@ def index():
                     buttonRootId: 'ton-connect-button'
                 });
 
-                let currentUser = { address: null, username: null };
+                let currentUser = { address: null, username: null, balance: 'Loading...' };
                 let activeChatroomId = null;
                 let messagePollingInterval = null;
                 let chatroomsData = {};
+                let usersData = {};
                 let html5QrCode = null;
-                let profileQrCode = null;
-                
+                let profileQrCodeInstance = null;
+
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
                 const chatroomListView = document.getElementById('chatroom-list-view');
@@ -682,6 +883,9 @@ def index():
                 const activeChat = document.getElementById('active-chat');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
+                const contentArea = document.querySelector('.content-area');
+                const navButtons = document.querySelectorAll('.nav-button');
+                const panels = document.querySelectorAll('.panel');
 
                 const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
@@ -723,6 +927,7 @@ def index():
                 };
                 
                 const truncateAddress = (address) => address ? `${address.substring(0, 4)}...${address.substring(address.length - 4)}` : '';
+                const formatBalance = (balance) => balance === 'Loading...' ? balance : `${(balance / 1_000_000_000).toFixed(2)} TON`;
 
                 const updateUserInfo = () => {
                     document.getElementById('user-wallet').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
@@ -731,13 +936,66 @@ def index():
                     nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
                     usernameInput.value = currentUser.username || '';
                 };
+
+                const showPanel = (panelId) => {
+                    panels.forEach(panel => {
+                        panel.classList.remove('active');
+                    });
+                    document.getElementById(panelId).classList.add('active');
+
+                    navButtons.forEach(btn => {
+                        btn.classList.remove('active');
+                        if (btn.dataset.panel === panelId) {
+                            btn.classList.add('active');
+                        }
+                    });
+
+                    // Special handling for chat panel internal views on mobile
+                    if (panelId === 'chats-panel') {
+                        handleResize(); // Re-evaluate chat list vs window visibility
+                        if (activeChatroomId) {
+                           // If a chat is active, ensure chat window is visible if on mobile
+                            if (window.innerWidth < 768) {
+                                chatroomListView.style.display = 'none';
+                                chatWindowView.style.display = 'flex';
+                            }
+                        } else {
+                            // If no chat active, ensure list is visible
+                             if (window.innerWidth < 768) {
+                                chatroomListView.style.display = 'flex';
+                                chatWindowView.style.display = 'none';
+                             }
+                        }
+                    } else {
+                         // Hide chat window on mobile if switching away from chats panel
+                         if (window.innerWidth < 768) {
+                             chatWindowView.style.display = 'none';
+                             chatroomListView.style.display = 'flex'; // Ensure list view state is correct if returning
+                         }
+                    }
+                };
                 
+                navButtons.forEach(button => {
+                    if (button.dataset.panel) {
+                        button.addEventListener('click', () => showPanel(button.dataset.panel));
+                    }
+                });
+                document.getElementById('nav-profile-btn').addEventListener('click', () => {
+                    if (currentUser.address) showProfile(currentUser.address);
+                });
+                 document.getElementById('scanner-nav-btn').addEventListener('click', showScanner);
+
+
                 document.getElementById('username-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
                     const newUsername = document.getElementById('username-input').value.trim();
                     if (!newUsername || newUsername.length < 3) {
                         showStatus('Никнейм должен быть не короче 3 символов.', 'error');
                         return;
+                    }
+                     if (newUsername.length > 20) {
+                        showStatus('Никнейм должен быть не длиннее 20 символов.', 'error');
+                        return;
                     }
                     try {
                         await apiCall('/api/set_username', {
@@ -748,30 +1006,65 @@ def index():
                         currentUser.username = newUsername;
                         updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms();
-                        if (activeChatroomId) fetchMessages(activeChatroomId); 
+                        fetchChatrooms(); // Update chatroom list with potential new usernames
+                        fetchUsers(); // Update users list
+                        if (activeChatroomId) fetchMessages(activeChatroomId); // Update messages with potential new name
                     } catch (err) {}
                 });
 
                 const initializeUser = async (address) => {
                     currentUser.address = address;
                     try {
-                        const data = await apiCall('/api/user_data', {
+                        const userData = await apiCall('/api/user_data', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify({ address: currentUser.address })
                         });
-                        currentUser.username = data.username;
+                        currentUser.username = userData.username;
+                        currentUser.balance = userData.balance || 'N/A'; // Assume backend returns balance
                     } catch (err) {
                         currentUser.username = null;
+                         currentUser.balance = 'Error';
                     }
                     updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
+                    showPanel('chats-panel'); // Default view is chats
                     fetchChatrooms();
-                    switchView('chat-view');
+                    fetchUsers();
+                    fetchBalance(); // Ensure balance is fetched
+                };
+
+                const fetchBalance = async () => {
+                    if (!tonConnectUI.connected || !currentUser.address) {
+                        currentUser.balance = 'N/A';
+                        updateProfileModalBalance(); // Update profile modal if open
+                        return;
+                    }
+                     try {
+                         // Using TON Connect's method if available and reliable, or a simple API endpoint
+                         // A real app would need a secure backend way to get balance or rely solely on TON Connect
+                         // For this example, let's simulate or use a placeholder
+                         const balance = await tonConnectUI.getBalance(); // This is simplified; TON Connect doesn't directly expose this easily. A real app needs a backend or helper library.
+                         currentUser.balance = balance || 'N/A'; // Placeholder if not available
+                          // Fallback to simulate or use a placeholder API if TON Connect UI doesn't provide balance easily
+                          // const data = await apiCall('/api/balance', { ... }); currentUser.balance = data.balance;
+
+                     } catch (e) {
+                         console.error("Failed to fetch balance:", e);
+                         currentUser.balance = 'Error';
+                     }
+                    updateProfileModalBalance(); // Update profile modal if open
                 };
 
+                 const updateProfileModalBalance = () => {
+                     const balanceEl = document.getElementById('profile-balance');
+                     if (balanceEl) {
+                         balanceEl.textContent = `Баланс: ${formatBalance(currentUser.balance)}`;
+                     }
+                 };
+
+
                 const renderChatrooms = (rooms) => {
                     const list = document.getElementById('chatroom-list');
                     list.innerHTML = '';
@@ -779,15 +1072,15 @@ def index():
                     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 = 'list-item-info chatroom-info';
                         const nameSpan = document.createElement('div');
-                        nameSpan.className = 'chatroom-name';
+                        nameSpan.className = 'list-item-name chatroom-name';
                         nameSpan.textContent = room.name;
                         infoDiv.appendChild(nameSpan);
                         item.appendChild(infoDiv);
@@ -807,9 +1100,52 @@ def index():
                     try {
                         const data = await apiCall('/api/chatrooms');
                         renderChatrooms(data.chatrooms);
-                    } catch (err) {}
+                    } catch (err) {
+                        // Handle error visually if needed
+                    }
                 };
 
+                const renderUsers = (users) => {
+                    const list = document.getElementById('users-list');
+                    list.innerHTML = '';
+                    usersData = {};
+                    users.forEach(user => {
+                         usersData[user.address] = user;
+                         const item = document.createElement('div');
+                         item.className = 'list-item user-item';
+                         item.dataset.address = user.address;
+
+                         item.appendChild(getAvatar(user.username || truncateAddress(user.address)));
+
+                         const infoDiv = document.createElement('div');
+                         infoDiv.className = 'list-item-info user-info';
+                         const nameSpan = document.createElement('div');
+                         nameSpan.className = 'list-item-name user-name';
+                         nameSpan.textContent = user.username || `User ${truncateAddress(user.address)}`;
+                         infoDiv.appendChild(nameSpan);
+
+                         const addressSpan = document.createElement('div');
+                         addressSpan.className = 'user-item-address';
+                         addressSpan.textContent = truncateAddress(user.address);
+                         infoDiv.appendChild(addressSpan);
+
+                         item.appendChild(infoDiv);
+
+                         item.addEventListener('click', () => showProfile(user.address));
+                         list.appendChild(item);
+                    });
+                };
+
+                 const fetchUsers = async () => {
+                     try {
+                         const data = await apiCall('/api/users');
+                         renderUsers(data.users);
+                     } catch (err) {
+                          // Handle error visually if needed
+                     }
+                 };
+
+
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
                     const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 30;
@@ -853,24 +1189,35 @@ def index():
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                        if (messagePollingInterval) clearInterval(messagePollingInterval);
+                        // Polling errors are less critical to show loudly
+                        console.error("Failed to fetch messages:", err);
+                        // if (messagePollingInterval) clearInterval(messagePollingInterval);
                     }
                 };
                 
-                const showChatView = () => {
-                    chatWindowView.style.display = 'flex';
-                    if (window.innerWidth < 768) {
+                const showChatWindow = () => {
+                    chatPlaceholder.style.display = 'none';
+                    activeChat.style.display = 'flex';
+                     if (window.innerWidth < 768) {
                         chatroomListView.style.display = 'none';
+                        chatWindowView.style.display = 'flex';
+                        document.getElementById('back-to-list-btn').style.display = 'block';
                     }
                 };
 
-                const showListView = () => {
-                    chatroomListView.style.display = 'flex';
-                    if (window.innerWidth < 768) {
-                        chatWindowView.style.display = 'none';
-                    }
+                const hideChatWindow = () => {
+                     activeChat.style.display = 'none';
+                    chatPlaceholder.style.display = 'flex';
+                     if (window.innerWidth < 768) {
+                         chatroomListView.style.display = 'flex';
+                         chatWindowView.style.display = 'none';
+                         document.getElementById('back-to-list-btn').style.display = 'none';
+                     }
+                     activeChatroomId = null;
+                    if (messagePollingInterval) clearInterval(messagePollingInterval);
                 };
 
+
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
                     if (!roomData) return;
@@ -884,9 +1231,7 @@ def index():
                         headerAvatar.innerHTML = '';
                         headerAvatar.appendChild(getAvatar(roomData.name));
 
-                        chatPlaceholder.style.display = 'none';
-                        activeChat.style.display = 'flex';
-                        showChatView();
+                        showChatWindow();
                         
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
@@ -900,9 +1245,19 @@ def index():
                         passwordInput.value = '';
                         passwordInput.focus();
 
+                        // Ensure previous listeners are removed to prevent duplicates
+                        const oldFormHandler = passwordForm.dataset.handler;
+                        if (oldFormHandler) {
+                           passwordForm.removeEventListener('submit', window[oldFormHandler]);
+                        }
+                        const oldCancelHandler = document.getElementById('password-cancel').dataset.handler;
+                         if (oldCancelHandler) {
+                            document.getElementById('password-cancel').removeEventListener('click', window[oldCancelHandler]);
+                         }
+
+
                         const formSubmitHandler = async (e) => {
                             e.preventDefault();
-                            passwordForm.removeEventListener('submit', formSubmitHandler);
                             const password = passwordInput.value;
                             passwordModal.style.display = 'none';
                             try {
@@ -913,13 +1268,27 @@ def index():
                                 });
                                 proceedToRoom();
                             } catch (err) {}
+                            // Clean up handler after submission
+                            passwordForm.removeEventListener('submit', formSubmitHandler);
+                            document.getElementById('password-cancel').removeEventListener('click', cancelHandler);
                         };
-                        passwordForm.addEventListener('submit', formSubmitHandler);
 
-                        document.getElementById('password-cancel').onclick = () => {
+                         const cancelHandler = () => {
                             passwordModal.style.display = 'none';
                             passwordForm.removeEventListener('submit', formSubmitHandler);
-                        };
+                             document.getElementById('password-cancel').removeEventListener('click', cancelHandler);
+                         };
+
+                        passwordForm.addEventListener('submit', formSubmitHandler);
+                        document.getElementById('password-cancel').addEventListener('click', cancelHandler);
+
+                        // Store handlers to remove them later
+                        passwordForm.dataset.handler = formSubmitHandler.name; // Note: Function name might not be reliable, better to store the function object
+                        document.getElementById('password-cancel').dataset.handler = cancelHandler.name;
+                         passwordForm._handler = formSubmitHandler; // Store function object
+                         document.getElementById('password-cancel')._handler = cancelHandler; // Store function object
+
+
                     } else {
                         proceedToRoom();
                     }
@@ -930,7 +1299,7 @@ def index():
                     const input = document.getElementById('message-input');
                     const sendBtn = document.getElementById('send-btn');
                     const text = input.value.trim();
-                    if (text && activeChatroomId) {
+                    if (text && activeChatroomId && currentUser.address) {
                         input.value = '';
                         input.disabled = true;
                         sendBtn.disabled = true;
@@ -944,6 +1313,7 @@ def index():
                                     text: text
                                 })
                             });
+                            // Fetch messages immediately after sending
                             await fetchMessages(activeChatroomId);
                             document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
                         } finally {
@@ -958,6 +1328,7 @@ def index():
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
+                     document.getElementById('room-name').focus();
                 });
                 document.getElementById('create-room-cancel').addEventListener('click', () => {
                     createRoomModal.style.display = 'none';
@@ -966,7 +1337,10 @@ def index():
                     e.preventDefault();
                     const name = document.getElementById('room-name').value.trim();
                     const password = document.getElementById('room-password').value;
-                    if (!name) return;
+                    if (!name || !currentUser.address) {
+                         showStatus('Название чата и адрес пользователя обязательны.', 'error');
+                        return;
+                    }
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -981,6 +1355,7 @@ def index():
                 });
 
                 const showProfile = async (address) => {
+                    if (!address) return;
                     try {
                         const userData = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -989,21 +1364,40 @@ def index():
                         });
                         
                         const username = userData.username || `User ${truncateAddress(address)}`;
-                        const avatarContainer = document.getElementById('profile-avatar-container');
+                        const avatarEl = document.getElementById('profile-avatar');
                         const usernameEl = document.getElementById('profile-username');
                         const addressEl = document.getElementById('profile-address');
+                        const balanceEl = document.getElementById('profile-balance');
                         const qrCodeEl = document.getElementById('profile-qr-code');
                         const sendTonBtn = document.getElementById('send-ton-btn');
-                        
-                        avatarContainer.innerHTML = '';
-                        avatarContainer.appendChild(getAvatar(username));
+
+                        // Clear and update avatar
+                        avatarEl.innerHTML = '';
+                        const newAvatar = getAvatar(username);
+                        newAvatar.style.width = '80px'; // Override modal specific size
+                        newAvatar.style.height = '80px';
+                         newAvatar.style.fontSize = '2rem';
+                         newAvatar.style.margin = '20px auto';
+                        avatarEl.parentNode.replaceChild(newAvatar, avatarEl);
+                        newAvatar.id = 'profile-avatar'; // Restore ID
                         
                         usernameEl.textContent = username;
                         addressEl.textContent = address;
-                        
+
+                        // Update balance only for current user's profile
+                         if (address === currentUser.address) {
+                             balanceEl.style.display = 'block';
+                             balanceEl.textContent = `Баланс: ${formatBalance(currentUser.balance)}`;
+                         } else {
+                             balanceEl.style.display = 'none';
+                         }
+
+                        // Generate QR code
                         qrCodeEl.innerHTML = '';
-                        if (profileQrCode) profileQrCode.clear();
-                        profileQrCode = new QRCode(qrCodeEl, {
+                        if (profileQrCodeInstance) {
+                            profileQrCodeInstance.clear();
+                        }
+                        profileQrCodeInstance = new QRCode(qrCodeEl, {
                             text: address,
                             width: 150,
                             height: 150,
@@ -1012,13 +1406,14 @@ def index():
                             correctLevel : QRCode.CorrectLevel.H
                         });
                         
+                        // TON Send button logic
                         sendTonBtn.onclick = async () => {
                             if (!tonConnectUI.connected) {
                                 showStatus('Подключите кошелек для отправки TON.', 'error');
                                 return;
                             }
                             const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
-                            if (amountString === null) return;
+                            if (amountString === null) return; // User cancelled
                             
                             const amount = parseFloat(amountString);
                             if (isNaN(amount) || amount <= 0) {
@@ -1028,44 +1423,69 @@ def index():
                             
                             const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
 
-                            const transaction = {
-                                validUntil: Math.floor(Date.now() / 1000) + 600,
-                                messages: [ { address: address, amount: amountInNanoTon } ]
-                            };
+                             // Prepare transaction object (simplified)
+                             const transaction = {
+                                 validUntil: Math.floor(Date.now() / 1000) + 600, // 10 minutes expiry
+                                 messages: [
+                                     {
+                                         address: address, // Destination address
+                                         amount: amountInNanoTon // Amount in nanoTON
+                                     }
+                                     // Add payload if needed
+                                 ]
+                             };
+
 
                             try {
+                                showStatus('Ожидание подтверждения транзакции в кошельке...', 'info', 5000);
                                 await tonConnectUI.sendTransaction(transaction);
                                 showStatus(`Транзакция отправлена успешно!`, 'success');
                                 profileModal.style.display = 'none';
+                                fetchBalance(); // Refresh balance after sending
                             } catch (error) {
-                                showStatus('Транзакция отклонена.', 'error');
+                                if (error.message.includes('cancelled')) {
+                                    showStatus('Транзакция отменена.', 'error');
+                                } else {
+                                    showStatus('Ошибка транзакции.', 'error');
+                                }
+                                console.error("Transaction failed:", error);
                             }
                         };
                         
-                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
+                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'flex'; // Hide send button on own profile
                         profileModal.style.display = 'flex';
                     } catch (err) {
                         showStatus('Не удалось загрузить профиль.', 'error');
+                         console.error("Failed to show profile:", err);
                     }
                 };
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    html5QrCode = new Html5Qrcode("qr-reader");
-                    const qrCodeSuccessCallback = (decodedText, decodedResult) => {
-                        hideScanner();
-                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                            showProfile(decodedText);
-                        } else {
-                            showStatus('Отсканирован недействительный QR-код.', 'error');
-                        }
-                    };
-                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
-                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
-                        .catch(err => {
-                            showStatus('Не удалось запустить сканер.', 'error');
-                            hideScanner();
-                        });
+                    // Delay starting QR reader slightly to ensure modal is visible
+                    setTimeout(() => {
+                         html5QrCode = new Html5Qrcode("qr-reader");
+                         const qrCodeSuccessCallback = (decodedText, decodedResult) => {
+                             hideScanner();
+                             // Attempt to validate if it looks like a TON address
+                             // Simple check: starts with EQ or UQ and is long enough
+                             if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
+                                 showProfile(decodedText);
+                             } else {
+                                 showStatus('Отсканирован недействительный QR-код TON.', 'error');
+                             }
+                         };
+                         const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.0 };
+                         html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback, (errorMessage) => {
+                              // Optional: Handle scan errors dynamically if needed
+                              console.warn(`QR scan error: ${errorMessage}`);
+                         })
+                             .catch(err => {
+                                 showStatus('Не удалось запустить сканер. Проверьте разрешения камеры.', 'error');
+                                 console.error("Failed to start QR scanner:", err);
+                                 hideScanner(); // Ensure modal is closed on error
+                             });
+                    }, 100); // Short delay
                 };
 
                 const hideScanner = () => {
@@ -1075,91 +1495,105 @@ def index():
                     scannerModal.style.display = 'none';
                 };
                 
-                document.getElementById('my-profile-btn').addEventListener('click', () => {
-                    if (currentUser.address) showProfile(currentUser.address);
-                });
                 document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
                 document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
-                document.getElementById('back-to-list-btn').addEventListener('click', showListView);
+                document.getElementById('back-to-list-btn').addEventListener('click', hideChatWindow);
                 
+                 // Browser panel logic
+                document.getElementById('browser-go-btn').addEventListener('click', () => {
+                     const urlInput = document.getElementById('browser-url-input');
+                     let url = urlInput.value.trim();
+                     if (!url) return;
+
+                     if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                         url = 'https://' + url; // Default to https
+                     }
+                     try {
+                         const browserIframe = document.getElementById('browser-iframe');
+                         browserIframe.src = url;
+                     } catch (e) {
+                         showStatus('Неверный формат URL.', 'error');
+                         console.error("Failed to load URL:", e);
+                     }
+                 });
+                 document.getElementById('browser-url-input').addEventListener('keypress', (e) => {
+                     if (e.key === 'Enter') {
+                         e.preventDefault();
+                          document.getElementById('browser-go-btn').click();
+                     }
+                 });
+
+
                 const handleResize = () => {
                     const isMobile = window.innerWidth < 768;
-                    document.getElementById('back-to-list-btn').style.display = isMobile ? 'block' : 'none';
-                    if (!isMobile) {
+
+                    if (isMobile) {
+                        // Mobile: Hide chat window if not active, show back button if active
+                        document.getElementById('back-to-list-btn').style.display = activeChatroomId ? 'block' : 'none';
+                        if (activeChatroomId) {
+                             chatroomListView.style.display = 'none';
+                             chatWindowView.style.display = 'flex';
+                        } else {
+                             chatroomListView.style.display = 'flex';
+                             chatWindowView.style.display = 'none';
+                        }
+                         // Only show chats panel on mobile if it's the active panel
+                        if (document.getElementById('chats-panel').classList.contains('active')) {
+                            document.getElementById('chats-panel').style.display = 'flex';
+                             document.getElementById('users-panel').style.display = 'none';
+                             document.getElementById('browser-panel').style.display = 'none';
+                        } else if (document.getElementById('users-panel').classList.contains('active')) {
+                             document.getElementById('chats-panel').style.display = 'none';
+                             document.getElementById('users-panel').style.display = 'flex';
+                             document.getElementById('browser-panel').style.display = 'none';
+                        } else if (document.getElementById('browser-panel').classList.contains('active')) {
+                             document.getElementById('chats-panel').style.display = 'none';
+                             document.getElementById('users-panel').style.display = 'none';
+                             document.getElementById('browser-panel').style.display = 'flex';
+                        } else {
+                             // Default to chats if none active
+                             showPanel('chats-panel');
+                        }
+
+                    } else {
+                        // Desktop: Always show chat list and chat window side-by-side within chats panel
                         chatroomListView.style.display = 'flex';
                         chatWindowView.style.display = 'flex';
-                    } else {
-                         if (document.querySelector('.view-panel.active').id === 'chat-view') {
-                            if (activeChat.style.display === 'flex') {
-                                chatroomListView.style.display = 'none';
-                            } else {
-                                chatWindowView.style.display = 'none';
-                                chatroomListView.style.display = 'flex';
-                            }
-                        }
+                        document.getElementById('back-to-list-btn').style.display = 'none'; // Hide back button
+
+                        // Desktop: Ensure all panels are potentially visible for flex layout,
+                        // but only the active one is within the content area flow (managed by .panel.active css)
+                         panels.forEach(panel => panel.style.display = 'flex'); // Allow flex to manage layout
+
                     }
                 };
 
                 window.addEventListener('resize', handleResize);
-                handleResize();
 
-                tonConnectUI.onStatusChange(wallet => {
+                tonConnectUI.onStatusChange(async wallet => {
                     if (wallet) {
                         const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
-                        initializeUser(address);
+                        await initializeUser(address); // Use await here
                     } else {
-                        currentUser = { address: null, username: null };
+                        currentUser = { address: null, username: null, balance: 'N/A' };
                         appView.style.display = 'none';
                         loginView.style.display = 'flex';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = null;
+                        hideChatWindow(); // Hide chat window on logout
+                         // Reset panels to default state (chats)
+                        showPanel('chats-panel');
                     }
                 });
 
-                const viewPanels = document.querySelectorAll('.view-panel');
-                const navButtons = document.querySelectorAll('.nav-btn');
-
-                function switchView(targetViewId) {
-                    viewPanels.forEach(panel => {
-                        panel.classList.remove('active');
-                    });
-                    document.getElementById(targetViewId).classList.add('active');
-
-                    navButtons.forEach(btn => {
-                        btn.classList.remove('active');
-                        if (btn.id === `nav-${targetViewId.split('-')[0]}-btn`) {
-                           btn.classList.add('active');
-                        }
-                    });
-                    handleResize();
-                }
-                
-                document.getElementById('nav-chat-btn').addEventListener('click', () => switchView('chat-view'));
-                document.getElementById('nav-browser-btn').addEventListener('click', () => switchView('browser-view'));
-                document.getElementById('nav-scan-btn').addEventListener('click', showScanner);
-
-                const browserIframe = document.getElementById('browser-iframe');
-                const urlForm = document.getElementById('url-form');
-                const urlInput = document.getElementById('url-input');
-
-                urlForm.addEventListener('submit', (e) => {
-                    e.preventDefault();
-                    let url = urlInput.value.trim();
-                    if (!url) return;
-                    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                        if (url.includes('.') && !url.includes(' ')) {
-                           url = 'https://' + url;
-                        } else {
-                           url = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
-                        }
-                    }
-                    browserIframe.src = url;
-                });
-                
-                document.getElementById('browser-back').onclick = () => { try { browserIframe.contentWindow.history.back(); } catch(e){} };
-                document.getElementById('browser-forward').onclick = () => { try { browserIframe.contentWindow.history.forward(); } catch(e){} };
-                document.getElementById('browser-reload').onclick = () => { try { browserIframe.contentWindow.location.reload(); } catch(e){} };
+                 // Initial check for connected wallet on load
+                 if (tonConnectUI.connected) {
+                     const address = TON_CONNECT_UI.toUserFriendlyAddress(tonConnectUI.wallet.account.address, false);
+                     initializeUser(address);
+                 }
 
+                 // Initial layout adjustment
+                handleResize();
             });
         </script>
     </body>
@@ -1175,9 +1609,12 @@ 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
-    return jsonify({'username': username})
+    user_info = db['users'].get(address, {})
+    username = user_info.get('username')
+    # In a real app, you'd fetch balance via TON API/SDK
+    # For this example, we'll simulate or provide N/A
+    balance = "Simulated Balance" # Placeholder or N/A
+    return jsonify({'username': username, 'address': address, 'balance': balance})
 
 @app.route('/api/set_username', methods=['POST'])
 def set_username():
@@ -1206,7 +1643,7 @@ def get_chatrooms():
             'name': room_data['name'],
             'is_private': room_data['is_private']
         })
-    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():
@@ -1216,6 +1653,8 @@ 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 len(name) < 3 or len(name) > 50:
+         return jsonify({'error': 'Chatroom name must be between 3 and 50 characters'}), 400
 
     db = read_db()
     room_id = str(uuid.uuid4())
@@ -1271,8 +1710,12 @@ def send_message():
     sender_address = data.get('sender_address')
     text = data.get('text')
 
-    if not all([chatroom_id, sender_address, text]):
-        return jsonify({'error': 'Missing data'}), 400
+    if not all([chatroom_id, sender_address, text is not None]): # Allow empty text? Maybe not for chat
+         if text is None or text.strip() == "": # Explicitly check for empty/whitespace
+             return jsonify({'error': 'Message text is empty'}), 400
+         if not chatroom_id or not sender_address:
+            return jsonify({'error': 'Missing chatroom ID or sender address'}), 400
+
 
     db = read_db()
     if chatroom_id not in db['messages']:
@@ -1281,10 +1724,11 @@ def send_message():
     message = {
         'id': str(uuid.uuid4()),
         'sender_address': sender_address,
-        'text': text,
+        'text': text.strip(), # Store stripped text
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
     
+    # Keep only the last 100 messages per chatroom
     if len(db['messages'][chatroom_id]) >= 100:
         db['messages'][chatroom_id].pop(0)
 
@@ -1292,6 +1736,23 @@ def send_message():
     write_db(db)
     return jsonify({'success': True})
 
+@app.route('/api/users', methods=['GET'])
+def get_users():
+    db = read_db()
+    users_list = []
+    # Iterate through users explicitly stored in the 'users' key
+    # This is better than inferring from messages, which might miss users who haven't sent messages
+    # Add users from chatroom creators too if they exist only there (less likely with current flow)
+    # For simplicity, just list users from the 'users' key.
+    for address, user_data in db['users'].items():
+        users_list.append({
+            'address': address,
+            'username': user_data.get('username')
+        })
+    
+    # You might want to sort this list
+    return jsonify({'users': sorted(users_list, key=lambda x: (x.get('username') or x['address']).lower())})
+
 
 if __name__ == '__main__':
     init_db()