diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -19,8 +19,6 @@ 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)
 
@@ -45,15 +43,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; /* 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 */
+                --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;
                 --success-color: #28a745;
                 --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
@@ -88,7 +86,6 @@ def index():
                 display: flex;
                 flex-direction: column;
                 transition: opacity 0.3s ease;
-                position: relative; /* Needed for fixed elements inside */
             }
 
             #login-view {
@@ -102,13 +99,13 @@ def index():
                 background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
             }
             #login-view img {
-                width: 120px;
-                height: 120px;
+                width: 100px;
+                height: 100px;
                 margin-bottom: 24px;
-                filter: drop-shadow(0 0 20px rgba(0, 136, 204, 0.6));
+                filter: drop-shadow(0 0 15px rgba(0, 136, 204, 0.5));
             }
             #login-view h1 {
-                font-size: 3.5rem;
+                font-size: 2.8rem;
                 font-weight: 700;
                 background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
                 -webkit-background-clip: text;
@@ -116,7 +113,7 @@ def index():
                 margin-bottom: 12px;
             }
             #login-view p {
-                font-size: 1.2rem;
+                font-size: 1.1rem;
                 color: var(--text-secondary);
                 margin-bottom: 40px;
             }
@@ -125,58 +122,33 @@ def index():
                 display: none;
                 width: 100%;
                 height: 100%;
-                flex-direction: column; /* Default to column for mobile */
+                flex-direction: column;
+                position: relative;
             }
             
-            .content-area {
+            .app-content {
                 flex-grow: 1;
-                overflow: hidden; /* Hide overflow when panels switch */
-                position: relative; /* For absolute positioned panels */
+                overflow-y: auto;
+                padding-bottom: 60px; /* Space for nav bar */
             }
-
-            .panel {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                left: 0;
+            
+            #chatroom-list-view, #user-list-view, #browser-view, #profile-details-view {
                 display: none;
-                flex-direction: column;
-                background-color: var(--bg-primary);
-            }
-            .panel.active {
-                display: flex;
-            }
-
-            /* Chat Panel */
-            #chats-panel {
-                flex-direction: column;
-            }
-            #chatroom-list-view, #chat-window-view {
                 width: 100%;
                 height: 100%;
+                flex-direction: column;
+                background-color: var(--bg-secondary);
             }
-            #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 {
+            
+            .view-header {
                 padding: 16px;
                 border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
-                background-color: var(--bg-secondary);
-            }
-            .list-header-top {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                margin-bottom: 16px;
             }
-            .list-header-top h2 {
+            .view-header h2 {
                 font-size: 1.5rem;
                 font-weight: 600;
             }
@@ -185,7 +157,7 @@ def index():
                 padding: 12px;
                 background-color: var(--bg-tertiary);
                 border-radius: 8px;
-                margin-bottom: 16px;
+                margin: 16px;
             }
             #user-wallet, #user-nickname {
                 font-size: 0.9rem;
@@ -224,24 +196,16 @@ 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, #users-list {
+            #chatroom-list, #user-list {
                 flex-grow: 1;
                 overflow-y: auto;
             }
-            .list-item {
+            .chatroom-item, .user-item {
                 display: flex;
                 align-items: center;
                 gap: 12px;
@@ -250,7 +214,7 @@ def index():
                 border-bottom: 1px solid var(--border-color);
                 transition: background-color 0.2s ease;
             }
-            .list-item:hover { background-color: var(--bg-hover); }
+            .chatroom-item:hover, .user-item:hover { background-color: var(--bg-hover); }
 
             .avatar {
                 width: 40px;
@@ -262,18 +226,24 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                font-size: 1.2rem;
-                background-color: #ccc; /* Default */
+                font-size: 1.1rem;
             }
-            .list-item-info {
+            .item-info {
                 flex-grow: 1;
                 overflow: hidden;
             }
-            .list-item-name {
+            .item-name {
                 font-weight: 500;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+            }
+             .item-description {
+                font-size: 0.9rem;
+                color: var(--text-secondary);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
             .lock-icon {
                 width: 16px;
@@ -282,11 +252,21 @@ def index():
                 flex-shrink: 0;
             }
 
-            /* Chat Window */
             #chat-window-view {
-                display: none; /* Start hidden on mobile */
+                display: none;
+                flex-direction: column;
+                height: 100%;
+                width: 100%;
+                background-color: var(--bg-primary);
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 10;
             }
-
+             #chat-window-view.visible-on-mobile {
+                display: flex !important;
+            }
+            
             .chat-header {
                 display: flex;
                 align-items: center;
@@ -300,8 +280,7 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: none; /* Show on mobile only */
-                padding: 0;
+                display: none; /* Hidden by default, shown on mobile */
             }
             .back-btn svg {
                 width: 24px;
@@ -311,9 +290,6 @@ def index():
             #chat-header-title {
                 font-size: 1.2rem;
                 font-weight: 600;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
             }
 
             #messages-container {
@@ -323,17 +299,16 @@ def index():
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
-                -webkit-overflow-scrolling: touch; /* Improve scrolling on mobile */
             }
 
             .message {
                 display: flex;
                 gap: 10px;
-                max-width: 85%; /* Slightly larger max-width */
+                max-width: 80%;
             }
             .message .avatar {
-                width: 32px; /* Smaller avatar in chat */
-                height: 32px;
+                width: 36px;
+                height: 36px;
                 align-self: flex-end;
                 font-size: 1rem;
             }
@@ -370,7 +345,7 @@ def index():
                 border-bottom-left-radius: 4px;
             }
             
-            .chat-placeholder {
+            .chat-placeholder, .view-placeholder {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -380,11 +355,11 @@ def index():
                 color: var(--text-secondary);
                 padding: 20px;
             }
-            .chat-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; }
+            .chat-placeholder img, .view-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; }
 
             .message-form {
                 display: flex;
-                padding: 10px 16px; /* Slightly less padding */
+                padding: 12px 16px;
                 gap: 12px;
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
@@ -412,83 +387,106 @@ def index():
             }
             .send-btn svg { width: 20px; height: 20px; fill: white; }
 
-            /* Users Panel */
-            #users-panel .list-header {
-                 background-color: var(--bg-secondary); /* Consistent header bg */
+            /* Browser View Specific Styles */
+            .browser-controls {
+                display: flex;
+                padding: 12px 16px;
+                gap: 8px;
+                background-color: var(--bg-tertiary);
+                flex-shrink: 0;
             }
-            .user-item-address {
-                font-size: 0.8rem;
+            .browser-input {
+                flex-grow: 1;
+                padding: 8px 12px;
+                border: 1px solid var(--border-color);
+                background-color: var(--bg-primary);
+                color: var(--text-primary);
+                border-radius: 6px;
+                font-size: 0.9rem;
+                outline: none;
+            }
+            .browser-input:focus { border-color: var(--accent-blue); }
+            .browser-iframe {
+                flex-grow: 1;
+                width: 100%;
+                border: none;
+            }
+
+            /* Profile Details View Specific Styles */
+            #profile-details-view .profile-content {
+                padding: 24px;
+                text-align: center;
+            }
+            #profile-details-view .avatar {
+                width: 80px;
+                height: 80px;
+                font-size: 2rem;
+                margin: 20px auto;
+            }
+            #profile-details-view #my-profile-username {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-bottom: 8px;
+            }
+            #profile-details-view #my-profile-address {
                 color: var(--text-secondary);
+                font-size: 1rem;
                 word-break: break-all;
+                margin-bottom: 8px;
+            }
+            #profile-details-view #my-profile-balance {
+                font-size: 1rem;
+                color: var(--accent-blue-light);
+                margin-bottom: 20px;
+            }
+             #profile-details-view .username-form {
+                max-width: 300px;
+                margin: 0 auto 20px auto;
+            }
+             #profile-details-view #my-profile-qr-code {
+                background: white;
+                padding: 10px;
+                margin: 20px auto;
+                width: fit-content;
+                border-radius: 8px;
             }
+             #profile-details-view .profile-actions {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                align-items: stretch;
+                max-width: 300px;
+                margin: 0 auto;
+            }
+
 
-            /* 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 */
+            /* Navigation Bar Styles */
             .nav-bar {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 56px; /* Standard mobile nav height */
+                background-color: var(--bg-tertiary);
                 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;
+                z-index: 100;
             }
             .nav-button {
-                flex: 1;
+                flex-grow: 1;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
+                font-size: 0.7rem;
+                color: var(--text-secondary);
                 background: none;
                 border: none;
-                color: var(--text-secondary);
-                font-size: 0.7rem;
                 cursor: pointer;
-                padding: 4px 0;
+                padding: 8px 0;
                 transition: color 0.2s ease;
-                position: relative; /* For scanner circle */
-            }
-            .nav-button.active {
-                 color: var(--accent-blue-light);
             }
             .nav-button svg {
                 width: 24px;
@@ -496,38 +494,46 @@ def index():
                 fill: var(--text-secondary);
                 margin-bottom: 2px;
                 transition: fill 0.2s ease;
+            }
+            .nav-button.active {
+                color: var(--accent-blue-light);
             }
              .nav-button.active svg {
-                 fill: var(--accent-blue-light);
-             }
-            .nav-button span {
-                display: none; /* Hide text by default on mobile */
+                fill: var(--accent-blue-light);
             }
-
-            .nav-button#scanner-nav-btn {
-                width: 56px; /* Larger button area */
+             .nav-button:hover {
+                color: var(--text-primary);
+            }
+             .nav-button:hover svg {
+                fill: var(--text-primary);
+            }
+            
+            .nav-button#nav-scan {
+                position: relative;
+                top: -16px; /* Lift the middle button */
+                width: 56px;
                 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) */
+                color: white;
+                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
+                transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+                padding: 0;
+                justify-content: center;
+            }
+             .nav-button#nav-scan svg {
+                width: 28px;
+                height: 28px;
+                fill: white;
+                margin: 0;
+            }
+            .nav-button#nav-scan:hover {
+                transform: scale(1.05);
+                box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
+            }
+
+
+            /* Modal Styles */
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -564,7 +570,6 @@ def index():
                 font-size: 1rem;
             }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
-            .modal-actions.vertical { flex-direction: column; align-items: stretch; }
             .modal-btn {
                 padding: 10px 20px;
                 border-radius: 6px;
@@ -573,34 +578,10 @@ def index():
                 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: calc(60px + 20px); /* Above nav bar + 20px */
+                bottom: calc(56px + 20px); /* Above nav bar */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -613,81 +594,100 @@ def index():
                 transition: opacity 0.3s, visibility 0.3s;
                 z-index: 2000;
                 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+                max-width: 90%;
+                text-align: center;
             }
             #status-bar.success { background-color: var(--success-color); }
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
 
-            /* Desktop Layout */
             @media (min-width: 768px) {
                 body {
-                    padding: 20px; /* Add some padding around the app on desktop */
+                    background-color: var(--bg-secondary); /* More subtle bg on desktop */
                 }
-                .main-container {
-                    max-width: 1000px; /* Max width on desktop */
-                    max-height: 700px; /* Max height on desktop */
+                 .main-container {
+                    max-width: 1100px;
+                    max-height: 800px;
                     border-radius: 12px;
                     overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
                 }
                  #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 */
+                    flex-direction: row;
                 }
 
-                .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 */
+                .app-content {
+                    flex-grow: 1;
+                    display: flex;
+                    padding-bottom: 0; /* No nav bar padding */
                 }
 
-                #chats-panel {
-                     flex-direction: row; /* List and window side-by-side within chats panel */
-                     flex-grow: 1;
-                }
-                #chatroom-list-view {
-                     width: 320px; /* Fixed width for chat list */
-                     flex-shrink: 0;
-                     display: flex !important; /* Always show list */
-                     flex-direction: column;
+                #chatroom-list-view, #user-list-view, #browser-view, #profile-details-view {
+                    width: 320px; /* Fixed sidebar width */
+                    flex-shrink: 0;
+                    border-right: 1px solid var(--border-color);
+                    display: flex !important; /* Always visible sections on desktop */
+                    position: static; /* Remove absolute positioning */
+                    z-index: 1;
                 }
+
+                 #user-list-view, #browser-view, #profile-details-view {
+                    display: none; /* Hide non-active content on desktop by default */
+                 }
+                 
                 #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);
+                    width: auto; /* Take remaining width */
+                    flex-grow: 1;
+                    position: static; /* Remove absolute positioning */
+                    z-index: 1;
+                    display: flex; /* Always show chat area on desktop */
                 }
                 #chat-window-view.hidden-on-desktop {
-                    /* This class is now obsolete with the new layout */
+                     display: flex; /* Ensure it's visible */
                 }
 
                 .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 */
+                    position: static; /* No fixed nav bar */
+                    height: auto;
+                    background-color: transparent;
+                    border-top: none;
+                    flex-direction: column;
+                    padding: 16px 0;
+                    gap: 8px;
+                    width: 60px; /* Narrow sidebar for navigation */
+                    border-right: 1px solid var(--border-color);
+                    flex-shrink: 0;
+                    justify-content: flex-start;
                 }
-
-                 .list-header {
-                     background-color: var(--bg-secondary); /* Consistent header bg */
+                .nav-button {
+                    flex-grow: 0;
+                    font-size: 0.6rem;
+                    padding: 8px 4px;
+                    width: 100%;
+                    gap: 4px;
+                }
+                 .nav-button svg {
+                    width: 20px;
+                    height: 20px;
                  }
-                 #users-panel .list-header {
-                      background-color: var(--bg-secondary);
+                 .nav-button#nav-scan {
+                    position: static; /* Remove lifted effect */
+                    width: 40px;
+                    height: 40px;
+                    top: auto;
+                    margin: 8px auto; /* Center small icon */
                  }
+                  .nav-button#nav-scan svg {
+                    width: 20px;
+                    height: 20px;
+                  }
 
-                 .nav-button span {
-                     display: none; /* Hide text even more consistently */
-                 }
+                #status-bar {
+                    bottom: 20px; /* Standard bottom position */
+                }
             }
         </style>
     </head>
@@ -701,111 +701,127 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <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>
-                                <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>
-                                <div id="user-nickname"></div>
-                                <form class="username-form" id="username-form">
-                                    <input type="text" id="username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
-                                    <button type="submit" class="action-btn small">✓</button>
-                                </form>
-                            </div>
-                        </div>
-                        <div id="chatroom-list"></div>
-                    </div>
+            <div class="nav-bar">
+                <button class="nav-button" data-view="chatroom-list-view" id="nav-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 2V4h16v12z"/></svg>
+                    <span>Чаты</span>
+                </button>
+                <button class="nav-button" data-view="user-list-view" id="nav-users">
+                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5s-3 1.34-3 3 1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+                    <span>Пользователи</span>
+                </button>
+                <button class="nav-button" id="nav-scan">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 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>
+                </button>
+                 <button class="nav-button" data-view="browser-view" id="nav-browser">
+                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><rect fill="none" height="24" width="24"/><g><g><path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M4,6h16v2H4V6z M20,18H4V10h16V18 z"/><circle cx="8.5" cy="14.5" r="1.5"/><circle cx="15.5" cy="14.5" r="1.5"/></g></g></svg>
+                    <span>Браузер</span>
+                </button>
+                 <button class="nav-button" data-view="profile-details-view" id="nav-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>
+                </button>
+            </div>
 
-                    <div id="chat-window-view">
-                         <div id="chat-placeholder" class="chat-placeholder">
-                            <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
-                            <h2>Выберите чат</h2>
-                            <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
-                        </div>
-                        <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
-                            <div class="chat-header">
-                                <button class="back-btn" id="back-to-list-btn">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
-                                </button>
-                                <div id="chat-header-avatar" class="avatar"></div>
-                                <span id="chat-header-title"></span>
-                            </div>
-                            <div id="messages-container"></div>
-                            <form id="message-form" class="message-form">
-                                <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
-                                <button type="submit" class="action-btn send-btn" id="send-btn">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
-                                </button>
-                            </form>
+            <div class="app-content">
+                <div id="chatroom-list-view">
+                    <div class="view-header">
+                        <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 id="chatroom-list"></div>
+                     <div class="view-placeholder" id="chat-list-placeholder">
+                        <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                        <h2>Начните общение</h2>
+                        <p>Создайте новый чат или дождитесь, пока вас кто-то пригласит.</p>
+                    </div>
                 </div>
 
-                <!-- Users Panel -->
-                <div id="users-panel" class="panel">
-                    <div class="list-header">
+                <div id="user-list-view">
+                     <div class="view-header">
                         <h2>Пользователи</h2>
                     </div>
-                    <div id="users-list">
-                        <!-- User list items will be loaded here -->
+                    <div id="user-list"></div>
+                    <div class="view-placeholder" id="user-list-placeholder">
+                        <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                        <h2>Загрузка пользователей...</h2>
+                        <p>Список зарегистрированных пользователей появится здесь.</p>
                     </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 id="browser-view">
+                    <div class="view-header">
+                        <h2>Браузер</h2>
                     </div>
-                    <div id="browser-iframe-container">
-                        <iframe id="browser-iframe" src="https://www.google.com/"></iframe>
+                    <div class="browser-controls">
+                        <input type="text" id="browser-url" class="browser-input" placeholder="https://google.com" value="https://google.com">
+                        <button id="browser-go" class="action-btn small">Go</button>
                     </div>
+                    <iframe id="browser-iframe" class="browser-iframe" src="https://google.com"></iframe>
                 </div>
+
+                <div id="profile-details-view">
+                    <div class="view-header">
+                        <h2>Мой Профиль</h2>
+                    </div>
+                    <div class="profile-content">
+                        <div id="my-profile-avatar" class="avatar"></div>
+                        <p id="my-profile-username"></p>
+                        <p id="my-profile-address"></p>
+                         <p id="my-profile-balance"></p>
+                        <form class="username-form" id="my-username-form">
+                            <input type="text" id="my-username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
+                            <button type="submit" class="action-btn small">✓</button>
+                        </form>
+                        <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-bottom: 12px;">Мой QR-код:</p>
+                         <div id="my-profile-qr-code" style="background: white; padding: 10px; margin: 0 auto 20px auto; width: fit-content; border-radius: 8px;"></div>
+                         <div class="profile-actions">
+                             <!-- Add more profile actions here if needed -->
+                         </div>
+                    </div>
+                </div>
+
             </div>
 
-            <!-- 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 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 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>
-                <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 id="chat-window-view">
+                 <div id="chat-placeholder" class="chat-placeholder">
+                    <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                    <h2>Выберите чат</h2>
+                    <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
+                </div>
+                <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
+                    <div class="chat-header">
+                        <button class="back-btn" id="back-to-list-btn">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                        </button>
+                        <div id="chat-header-avatar" class="avatar"></div>
+                        <span id="chat-header-title"></span>
+                    </div>
+                    <div id="messages-container"></div>
+                    <form id="message-form" class="message-form">
+                        <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
+                        <button type="submit" class="action-btn send-btn" id="send-btn">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+                        </button>
+                    </form>
+                </div>
             </div>
+
         </div>
         
-        <!-- 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 autocomplete="off">
+                    <input type="text" id="room-name" required>
                     <label for="room-password">Пароль (оставьте пустым для открытого)</label>
-                    <input type="password" id="room-password" autocomplete="new-password">
+                    <input type="password" id="room-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>
@@ -819,7 +835,7 @@ def index():
                 <h3>Вход в приватный чат</h3>
                 <form id="password-form">
                     <label for="password-input">Введите пароль</label>
-                    <input type="password" id="password-input" required autocomplete="current-password">
+                    <input type="password" id="password-input" required>
                     <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>
@@ -829,19 +845,14 @@ 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 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">
+                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
+                <p id="profile-username-modal" style="font-size: 1.2rem; font-weight: 600;"></p>
+                <p id="profile-address-modal" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
+                <div id="profile-qr-code-modal" 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;">
                     <button id="send-ton-btn" class="modal-btn action-btn">Отправить TON</button>
                     <button id="profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
                 </div>
@@ -851,7 +862,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <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 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>
@@ -867,25 +878,27 @@ def index():
                     buttonRootId: 'ton-connect-button'
                 });
 
-                let currentUser = { address: null, username: null, balance: 'Loading...' };
+                let currentUser = { address: null, username: null };
                 let activeChatroomId = null;
                 let messagePollingInterval = null;
                 let chatroomsData = {};
                 let usersData = {};
                 let html5QrCode = null;
                 let profileQrCodeInstance = null;
-
+                let myProfileQrCodeInstance = null;
+                
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
                 const chatroomListView = document.getElementById('chatroom-list-view');
+                const userListView = document.getElementById('user-list-view');
+                const browserView = document.getElementById('browser-view');
+                const profileDetailsView = document.getElementById('profile-details-view');
                 const chatWindowView = document.getElementById('chat-window-view');
                 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 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'];
 
@@ -927,68 +940,49 @@ 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)}`;
-                    const nicknameEl = document.getElementById('user-nickname');
-                    const usernameInput = document.getElementById('username-input');
-                    nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
+                const updateMyProfileView = async () => {
+                    if (!currentUser.address) return;
+
+                    const username = currentUser.username || `User ${truncateAddress(currentUser.address)}`;
+                    const avatarContainer = document.getElementById('my-profile-avatar');
+                    const usernameEl = document.getElementById('my-profile-username');
+                    const addressEl = document.getElementById('my-profile-address');
+                    const balanceEl = document.getElementById('my-profile-balance');
+                    const qrCodeEl = document.getElementById('my-profile-qr-code');
+                    const usernameInput = document.getElementById('my-username-input');
+
+                    avatarContainer.innerHTML = '';
+                    avatarContainer.appendChild(getAvatar(username));
+                    usernameEl.textContent = username;
+                    addressEl.textContent = currentUser.address;
                     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';
-                             }
-                        }
+                    if (tonConnectUI.wallet?.account?.balance) {
+                         const balanceNano = tonConnectUI.wallet.account.balance;
+                         const balanceTon = (parseInt(balanceNano) / 1_000_000_000).toFixed(2);
+                         balanceEl.textContent = `Баланс: ${balanceTon} TON`;
                     } 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
-                         }
+                         balanceEl.textContent = `Баланс: Недоступно`;
                     }
+
+                    qrCodeEl.innerHTML = '';
+                    if (myProfileQrCodeInstance) {
+                         myProfileQrCodeInstance.clear();
+                    }
+                    myProfileQrCodeInstance = new QRCode(qrCodeEl, {
+                        text: currentUser.address,
+                        width: 150,
+                        height: 150,
+                        colorDark : "#000000",
+                        colorLight : "#ffffff",
+                        correctLevel : QRCode.CorrectLevel.H
+                    });
                 };
                 
-                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) => {
+                document.getElementById('my-username-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
-                    const newUsername = document.getElementById('username-input').value.trim();
+                    const newUsername = document.getElementById('my-username-input').value.trim();
                     if (!newUsername || newUsername.length < 3) {
                         showStatus('Никнейм должен быть не короче 3 символов.', 'error');
                         return;
@@ -1004,85 +998,58 @@ def index():
                             body: JSON.stringify({ address: currentUser.address, username: newUsername })
                         });
                         currentUser.username = newUsername;
-                        updateUserInfo();
+                        updateMyProfileView();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms(); // Update chatroom list with potential new usernames
-                        fetchUsers(); // Update users list
-                        if (activeChatroomId) fetchMessages(activeChatroomId); // Update messages with potential new name
+                        fetchChatrooms();
+                         fetchUsers();
+                        if (activeChatroomId) fetchMessages(activeChatroomId); 
                     } catch (err) {}
                 });
 
                 const initializeUser = async (address) => {
                     currentUser.address = address;
                     try {
-                        const userData = await apiCall('/api/user_data', {
+                        const data = await apiCall('/api/user_data', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify({ address: currentUser.address })
                         });
-                        currentUser.username = userData.username;
-                        currentUser.balance = userData.balance || 'N/A'; // Assume backend returns balance
+                        currentUser.username = data.username;
                     } catch (err) {
                         currentUser.username = null;
-                         currentUser.balance = 'Error';
                     }
-                    updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
-                    showPanel('chats-panel'); // Default view is chats
+                    showView('chatroom-list-view'); // Default view after login
                     fetchChatrooms();
-                    fetchUsers();
-                    fetchBalance(); // Ensure balance is fetched
+                    // Users and Profile views fetch data when selected
                 };
 
-                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 = '';
+                     document.getElementById('chat-list-placeholder').style.display = rooms.length === 0 ? 'flex' : 'none';
                     chatroomsData = {};
                     rooms.forEach(room => {
                         chatroomsData[room.id] = room;
                         const item = document.createElement('div');
-                        item.className = 'list-item chatroom-item';
+                        item.className = 'chatroom-item';
                         item.dataset.id = room.id;
                         
                         item.appendChild(getAvatar(room.name));
 
                         const infoDiv = document.createElement('div');
-                        infoDiv.className = 'list-item-info chatroom-info';
+                        infoDiv.className = 'item-info';
                         const nameSpan = document.createElement('div');
-                        nameSpan.className = 'list-item-name chatroom-name';
+                        nameSpan.className = 'item-name';
                         nameSpan.textContent = room.name;
+                         const descSpan = document.createElement('div');
+                         descSpan.className = 'item-description';
+                         // Could add last message preview here if backend supported it
+                         descSpan.textContent = room.is_private ? 'Приватный чат' : 'Открытый чат';
+
                         infoDiv.appendChild(nameSpan);
+                         infoDiv.appendChild(descSpan);
                         item.appendChild(infoDiv);
 
                         if (room.is_private) {
@@ -1097,53 +1064,57 @@ def index():
                 };
                 
                 const fetchChatrooms = async () => {
+                    if (!currentUser.address) return;
                     try {
                         const data = await apiCall('/api/chatrooms');
                         renderChatrooms(data.chatrooms);
-                    } catch (err) {
-                        // Handle error visually if needed
-                    }
+                    } catch (err) {}
                 };
 
                 const renderUsers = (users) => {
-                    const list = document.getElementById('users-list');
-                    list.innerHTML = '';
-                    usersData = {};
-                    users.forEach(user => {
+                     const list = document.getElementById('user-list');
+                     list.innerHTML = '';
+                     document.getElementById('user-list-placeholder').style.display = users.length === 0 ? 'flex' : 'none';
+                     usersData = {};
+                     users.forEach(user => {
                          usersData[user.address] = user;
                          const item = document.createElement('div');
-                         item.className = 'list-item user-item';
+                         item.className = 'user-item';
                          item.dataset.address = user.address;
 
-                         item.appendChild(getAvatar(user.username || truncateAddress(user.address)));
+                         const displayName = user.username || `User ${truncateAddress(user.address)}`;
+                         item.appendChild(getAvatar(displayName));
 
                          const infoDiv = document.createElement('div');
-                         infoDiv.className = 'list-item-info user-info';
+                         infoDiv.className = 'item-info';
                          const nameSpan = document.createElement('div');
-                         nameSpan.className = 'list-item-name user-name';
-                         nameSpan.textContent = user.username || `User ${truncateAddress(user.address)}`;
-                         infoDiv.appendChild(nameSpan);
-
+                         nameSpan.className = 'item-name';
+                         nameSpan.textContent = displayName;
                          const addressSpan = document.createElement('div');
-                         addressSpan.className = 'user-item-address';
+                         addressSpan.className = 'item-description';
                          addressSpan.textContent = truncateAddress(user.address);
-                         infoDiv.appendChild(addressSpan);
 
+                         infoDiv.appendChild(nameSpan);
+                         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 fetchUsers = async () => {
+                    if (!currentUser.address) return;
+                     document.getElementById('user-list-placeholder').style.display = 'flex';
+                    try {
+                        const data = await apiCall('/api/users');
+                        renderUsers(data.users);
+                    } catch (err) {
+                         renderUsers([]); // Clear list on error
+                     } finally {
+                         document.getElementById('user-list-placeholder').style.display = 'none';
                      }
-                 };
+                };
 
 
                 const renderMessages = (messages) => {
@@ -1185,42 +1156,51 @@ def index():
                 };
                 
                 const fetchMessages = async (roomId) => {
+                    if (!currentUser.address || !roomId) return;
                     try {
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                        // Polling errors are less critical to show loudly
-                        console.error("Failed to fetch messages:", err);
-                        // if (messagePollingInterval) clearInterval(messagePollingInterval);
-                    }
-                };
-                
-                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';
+                        if (messagePollingInterval) clearInterval(messagePollingInterval);
                     }
                 };
 
-                const hideChatWindow = () => {
+                const showView = (viewId) => {
+                    const views = [chatroomListView, userListView, browserView, profileDetailsView];
+                    views.forEach(view => {
+                         view.style.display = 'none';
+                         view.classList.remove('active');
+                    });
+                    document.getElementById(viewId).style.display = 'flex';
+                    document.getElementById(viewId).classList.add('active');
+
+                    navButtons.forEach(button => button.classList.remove('active'));
+                    document.querySelector(`.nav-button[data-view="${viewId}"]`)?.classList.add('active');
+
+                    if (messagePollingInterval) {
+                         clearInterval(messagePollingInterval);
+                         messagePollingInterval = null;
+                    }
                      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);
-                };
+                     chatPlaceholder.style.display = 'flex';
+                     chatWindowView.classList.remove('visible-on-mobile');
 
 
+                    if (viewId === 'user-list-view' && currentUser.address) {
+                        fetchUsers();
+                    } else if (viewId === 'chatroom-list-view' && currentUser.address) {
+                        fetchChatrooms();
+                    } else if (viewId === 'profile-details-view' && currentUser.address) {
+                         updateMyProfileView();
+                    }
+
+                     // Handle desktop split view state
+                     handleResize();
+                };
+                
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
-                    if (!roomData) return;
+                    if (!roomData || !currentUser.address) return;
 
                     const proceedToRoom = () => {
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
@@ -1231,7 +1211,17 @@ def index():
                         headerAvatar.innerHTML = '';
                         headerAvatar.appendChild(getAvatar(roomData.name));
 
-                        showChatWindow();
+                        chatPlaceholder.style.display = 'none';
+                        activeChat.style.display = 'flex';
+
+                         if (window.innerWidth < 768) {
+                            chatroomListView.style.display = 'none';
+                            chatWindowView.classList.add('visible-on-mobile');
+                         } else {
+                             // On desktop, chat window is always visible next to the list
+                             chatWindowView.style.display = 'flex';
+                             chatroomListView.style.display = 'flex'; // Ensure list is visible
+                         }
                         
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
@@ -1245,19 +1235,9 @@ 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 {
@@ -1268,27 +1248,13 @@ 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);
 
-                         const cancelHandler = () => {
+                        document.getElementById('password-cancel').onclick = () => {
                             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();
                     }
@@ -1313,7 +1279,6 @@ def index():
                                     text: text
                                 })
                             });
-                            // Fetch messages immediately after sending
                             await fetchMessages(activeChatroomId);
                             document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
                         } finally {
@@ -1328,7 +1293,6 @@ 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';
@@ -1337,10 +1301,7 @@ def index():
                     e.preventDefault();
                     const name = document.getElementById('room-name').value.trim();
                     const password = document.getElementById('room-password').value;
-                    if (!name || !currentUser.address) {
-                         showStatus('Название чата и адрес пользователя обязательны.', 'error');
-                        return;
-                    }
+                    if (!name || !currentUser.address) return;
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -1364,35 +1325,18 @@ def index():
                         });
                         
                         const username = userData.username || `User ${truncateAddress(address)}`;
-                        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 avatarContainer = document.getElementById('profile-avatar-container');
+                        const usernameEl = document.getElementById('profile-username-modal');
+                        const addressEl = document.getElementById('profile-address-modal');
+                        const qrCodeEl = document.getElementById('profile-qr-code-modal');
                         const sendTonBtn = document.getElementById('send-ton-btn');
-
-                        // 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
+                        
+                        avatarContainer.innerHTML = '';
+                        avatarContainer.appendChild(getAvatar(username));
                         
                         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 (profileQrCodeInstance) {
                             profileQrCodeInstance.clear();
@@ -1406,14 +1350,17 @@ def index():
                             correctLevel : QRCode.CorrectLevel.H
                         });
                         
-                        // TON Send button logic
                         sendTonBtn.onclick = async () => {
                             if (!tonConnectUI.connected) {
                                 showStatus('Подключите кошелек для отправки TON.', 'error');
                                 return;
                             }
+                             if (address === currentUser.address) {
+                                showStatus('Нельзя отправить TON себе.', 'error');
+                                return;
+                             }
                             const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
-                            if (amountString === null) return; // User cancelled
+                            if (amountString === null) return;
                             
                             const amount = parseFloat(amountString);
                             if (isNaN(amount) || amount <= 0) {
@@ -1423,69 +1370,44 @@ def index():
                             
                             const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
 
-                             // 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
-                                 ]
-                             };
-
+                            const transaction = {
+                                validUntil: Math.floor(Date.now() / 1000) + 600,
+                                messages: [ { address: address, amount: amountInNanoTon } ]
+                            };
 
                             try {
-                                showStatus('Ожидание подтверждения транзакции в кошельке...', 'info', 5000);
                                 await tonConnectUI.sendTransaction(transaction);
                                 showStatus(`Транзакция отправлена успешно!`, 'success');
                                 profileModal.style.display = 'none';
-                                fetchBalance(); // Refresh balance after sending
                             } catch (error) {
-                                if (error.message.includes('cancelled')) {
-                                    showStatus('Транзакция отменена.', 'error');
-                                } else {
-                                    showStatus('Ошибка транзакции.', 'error');
-                                }
-                                console.error("Transaction failed:", error);
+                                showStatus('Транзакция отклонена.', 'error');
                             }
                         };
                         
-                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'flex'; // Hide send button on own profile
+                        sendTonBtn.style.display = (address === currentUser.address || !tonConnectUI.connected) ? 'none' : 'block';
                         profileModal.style.display = 'flex';
                     } catch (err) {
                         showStatus('Не удалось загрузить профиль.', 'error');
-                         console.error("Failed to show profile:", err);
                     }
                 };
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    // 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
+                    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-код адреса TON.', 'error');
+                        }
+                    };
+                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
+                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
+                        .catch(err => {
+                            showStatus('Не удалось запустить сканер.', 'error');
+                            hideScanner();
+                        });
                 };
 
                 const hideScanner = () => {
@@ -1494,106 +1416,154 @@ def index():
                     }
                     scannerModal.style.display = 'none';
                 };
-                
+
+                document.getElementById('browser-go').addEventListener('click', () => {
+                    const urlInput = document.getElementById('browser-url');
+                    let url = urlInput.value.trim();
+                    if (!url) return;
+                    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                        url = 'https://' + url; // Default to https
+                         urlInput.value = url;
+                    }
+                    document.getElementById('browser-iframe').src = url;
+                });
+
+                navButtons.forEach(button => {
+                    if (button.id === 'nav-scan') {
+                        button.addEventListener('click', showScanner);
+                    } else {
+                         button.addEventListener('click', () => {
+                            const viewId = button.dataset.view;
+                            if (viewId) {
+                                 if (viewId === 'chatroom-list-view') {
+                                     // Reset chat window on mobile when navigating away from chat
+                                     if (window.innerWidth < 768) {
+                                         activeChatroomId = null;
+                                         activeChat.style.display = 'none';
+                                         chatPlaceholder.style.display = 'flex';
+                                         chatWindowView.classList.remove('visible-on-mobile');
+                                     }
+                                 }
+                                showView(viewId);
+                            }
+                        });
+                    }
+                });
+
                 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', 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();
-                     }
-                 });
-
-
+                document.getElementById('back-to-list-btn').addEventListener('click', () => {
+                    activeChatroomId = null;
+                    activeChat.style.display = 'none';
+                    chatPlaceholder.style.display = 'flex';
+                    chatWindowView.classList.remove('visible-on-mobile');
+                    chatroomListView.style.display = 'flex'; // Show the list again
+                    // No need to call showView because we are staying within the chatroom list context
+                });
+                
                 const handleResize = () => {
                     const isMobile = window.innerWidth < 768;
 
+                    // Navigation bar display
+                    const navBar = document.querySelector('.nav-bar');
                     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');
-                        }
-
+                        navBar.style.flexDirection = 'row';
+                        navBar.style.position = 'fixed';
+                        navBar.style.width = '100%';
+                        navBar.style.height = '56px';
+                        navBar.style.borderRight = 'none';
+                        navBar.style.borderTop = '1px solid var(--border-color)';
+                        navBar.style.padding = '0';
                     } else {
-                        // Desktop: Always show chat list and chat window side-by-side within chats panel
-                        chatroomListView.style.display = 'flex';
+                        navBar.style.flexDirection = 'column';
+                        navBar.style.position = 'static';
+                        navBar.style.width = '60px';
+                        navBar.style.height = 'auto';
+                        navBar.style.borderRight = '1px solid var(--border-color)';
+                         navBar.style.borderTop = 'none';
+                        navBar.style.padding = '16px 0';
+                    }
+
+                    // Back button visibility
+                    document.getElementById('back-to-list-btn').style.display = isMobile && activeChatroomId ? 'block' : 'none';
+
+                    // Main content views visibility
+                    const activeViewId = document.querySelector('.app-content > div.active')?.id;
+
+                    // On desktop, show the active view AND the chat window (if active)
+                    if (!isMobile) {
+                        [chatroomListView, userListView, browserView, profileDetailsView].forEach(view => {
+                            view.style.display = view.id === activeViewId ? 'flex' : 'none';
+                        });
+                        // Always show chat window area on desktop, hide placeholder if chat is active
                         chatWindowView.style.display = 'flex';
-                        document.getElementById('back-to-list-btn').style.display = 'none'; // Hide back button
+                        chatPlaceholder.style.display = activeChatroomId ? 'none' : 'flex';
+                        activeChat.style.display = activeChatroomId ? 'flex' : 'none';
 
-                        // 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
+                         // Special case: if chat is active AND chatrooms is the active view, show both
+                         if (activeChatroomId && activeViewId === 'chatroom-list-view') {
+                             chatroomListView.style.display = 'flex';
+                             chatWindowView.style.display = 'flex';
+                         }
+
+
+                    } else {
+                        // On mobile, only show either the active view or the chat window if active
+                        [chatroomListView, userListView, browserView, profileDetailsView].forEach(view => {
+                            view.style.display = 'none';
+                        });
 
+                         if (activeChatroomId) {
+                            chatWindowView.classList.add('visible-on-mobile');
+                         } else {
+                            chatWindowView.classList.remove('visible-on-mobile');
+                            document.getElementById(activeViewId || 'chatroom-list-view').style.display = 'flex'; // Show the currently selected main view
+                         }
                     }
                 };
 
                 window.addEventListener('resize', handleResize);
-
-                tonConnectUI.onStatusChange(async wallet => {
+                
+                tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
                         const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
-                        await initializeUser(address); // Use await here
+                        initializeUser(address);
                     } else {
-                        currentUser = { address: null, username: null, balance: 'N/A' };
+                        currentUser = { address: null, username: null };
                         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');
+                         chatroomsData = {};
+                         usersData = {};
+                         document.getElementById('chatroom-list').innerHTML = '';
+                         document.getElementById('user-list').innerHTML = '';
+                         document.getElementById('messages-container').innerHTML = '';
+                         activeChat.style.display = 'none';
+                         chatPlaceholder.style.display = 'flex';
+                         chatWindowView.classList.remove('visible-on-mobile');
+                         // Ensure chatroom list view is visible again on mobile after logout
+                         if (window.innerWidth < 768) {
+                            chatroomListView.style.display = 'flex';
+                         }
+                    }
+                     // Update profile view and button states based on connection status
+                    if (document.querySelector('.app-content > div.active')?.id === 'profile-details-view') {
+                        updateMyProfileView();
                     }
                 });
 
-                 // Initial check for connected wallet on load
+                 // Initial check on load
                  if (tonConnectUI.connected) {
-                     const address = TON_CONNECT_UI.toUserFriendlyAddress(tonConnectUI.wallet.account.address, false);
-                     initializeUser(address);
+                    const address = TON_CONNECT_UI.toUserFriendlyAddress(tonConnectUI.wallet.account.address, false);
+                    initializeUser(address);
+                 } else {
+                    loginView.style.display = 'flex';
+                    appView.style.display = 'none';
                  }
 
-                 // Initial layout adjustment
-                handleResize();
+                 handleResize(); // Apply correct layout on initial load
             });
         </script>
     </body>
@@ -1609,12 +1579,36 @@ 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')
-    # 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})
+    user_info = db['users'].get(address)
+    username = user_info.get('username') if user_info else None
+    return jsonify({'username': username})
+
+@app.route('/api/users', methods=['GET'])
+def get_all_users():
+    db = read_db()
+    users_list = []
+    for address, user_info in db['users'].items():
+        users_list.append({
+            'address': address,
+            'username': user_info.get('username')
+        })
+    # Add users from messages who don't have a username registered
+    all_addresses = set(db['users'].keys())
+    for room_messages in db['messages'].values():
+        for msg in room_messages:
+            sender_address = msg['sender_address']
+            if sender_address not in all_addresses:
+                all_addresses.add(sender_address)
+                users_list.append({
+                    'address': sender_address,
+                    'username': None # No registered username
+                })
+    
+    # Sort users by username or address prefix
+    sorted_users = sorted(users_list, key=lambda x: (x['username'] is None, x['username'] or x['address']))
+
+    return jsonify({'users': sorted_users})
+
 
 @app.route('/api/set_username', methods=['POST'])
 def set_username():
@@ -1643,7 +1637,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'].lower())})
+    return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
 
 @app.route('/api/create_chatroom', methods=['POST'])
 def create_chatroom():
@@ -1653,8 +1647,6 @@ 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())
@@ -1691,14 +1683,20 @@ def get_messages(chatroom_id):
     messages_with_names = []
     room_messages = db['messages'].get(chatroom_id, [])
     
-    for msg in room_messages:
-        sender_address = msg['sender_address']
-        user_info = db['users'].get(sender_address)
+    # Collect all sender addresses in this chat
+    sender_addresses_in_chat = {msg['sender_address'] for msg in room_messages}
+    
+    # Fetch usernames for all relevant addresses in one go
+    user_display_names = {}
+    for address in sender_addresses_in_chat:
+        user_info = db['users'].get(address)
         display_name = (user_info.get('username') if user_info and user_info.get('username') 
-                        else f"{sender_address[:4]}...{sender_address[-4:]}")
-        
+                        else f"{address[:4]}...{address[-4:]}")
+        user_display_names[address] = display_name
+
+    for msg in room_messages:
         msg_copy = msg.copy()
-        msg_copy['display_name'] = display_name
+        msg_copy['display_name'] = user_display_names.get(msg['sender_address'], f"{msg['sender_address'][:4]}...{msg['sender_address'][-4:]}") # Fallback just in case
         messages_with_names.append(msg_copy)
 
     return jsonify({'messages': messages_with_names})
@@ -1710,12 +1708,8 @@ def send_message():
     sender_address = data.get('sender_address')
     text = data.get('text')
 
-    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
-
+    if not all([chatroom_id, sender_address, text]):
+        return jsonify({'error': 'Missing data'}), 400
 
     db = read_db()
     if chatroom_id not in db['messages']:
@@ -1724,36 +1718,18 @@ def send_message():
     message = {
         'id': str(uuid.uuid4()),
         'sender_address': sender_address,
-        'text': text.strip(), # Store stripped text
+        'text': text,
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
     
-    # Keep only the last 100 messages per chatroom
-    if len(db['messages'][chatroom_id]) >= 100:
+    if len(db['messages'][chatroom_id]) >= 100: # Keep last 100 messages
         db['messages'][chatroom_id].pop(0)
 
     db['messages'][chatroom_id].append(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()
-    app.run(host='0.0.0.0', port=7860)
\ No newline at end of file
+    app.run(host='0.0.0.0', port=7860, debug=True) # debug=True for easier development
\ No newline at end of file