diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -23,7 +23,8 @@ def read_db():
         with open(DB_FILE, 'r') as f:
             return json.load(f)
     except (FileNotFoundError, json.JSONDecodeError):
-        return {"users": {}, "chatrooms": {}, "messages": {}}
+        init_db()
+        return read_db()
 
 def write_db(data):
     with open(DB_FILE, 'w') as f:
@@ -39,6 +40,7 @@ def index():
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <title>Virton Messenger</title>
         <script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
+        <script src="https://unpkg.com/@tonconnect/sdk@latest/dist/tonconnect-sdk.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
         <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
         <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -58,8 +60,8 @@ def index():
                 --success-color: #28a745;
                 --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
-                --ton-purple: #6A5EE2;
-                --ton-purple-light: #948AE4;
+                --ton-color: #007EE5;
+                --ton-color-light: #0098EE;
             }
 
             * {
@@ -82,6 +84,8 @@ def index():
                 width: 100vw;
                 display: flex;
                 flex-direction: column;
+                align-items: center;
+                justify-content: center;
             }
 
             .main-container {
@@ -90,12 +94,17 @@ def index():
                 display: flex;
                 flex-direction: column;
                 transition: opacity 0.3s ease;
+                background-color: var(--bg-primary);
             }
 
             #login-view {
+                display: flex;
+                flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 text-align: center;
+                width: 100%;
+                height: 100%;
                 background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
             }
             #login-view img {
@@ -119,50 +128,80 @@ def index():
             }
 
             #app-view {
-                display: none;
-                flex-direction: column;
+                display: none; /* Managed by JS */
+                width: 100%;
                 height: 100%;
-                overflow: hidden;
+                flex-direction: column;
             }
-
-            .content-area {
+            
+            #content-area {
                 flex-grow: 1;
                 overflow: hidden;
-                position: relative;
-                padding-bottom: 60px; /* Height of nav bar */
+                position: relative; /* For absolute positioning of view panels if needed */
             }
 
-            .view {
+            .view-panel {
                 width: 100%;
                 height: 100%;
                 position: absolute;
                 top: 0;
                 left: 0;
-                display: none;
+                display: none; /* Managed by JS */
                 flex-direction: column;
                 background-color: var(--bg-primary);
-                overflow-y: auto;
-                -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+                animation: fadeIn 0.3s ease;
             }
 
-            .view.active {
+            .view-panel.active-view {
                 display: flex;
             }
-            
-            /* Chats View Specific Styles */
-            #chats-view {
-                display: flex; /* Default display */
-                flex-direction: column;
+
+            @keyframes fadeIn {
+                from { opacity: 0.8; }
+                to { opacity: 1; }
             }
 
-            #chatroom-list-view {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                width: 100%;
+            .panel-header {
+                padding: 16px;
                 background-color: var(--bg-secondary);
+                border-bottom: 1px solid var(--border-color);
+                flex-shrink: 0;
+                font-size: 1.2rem;
+                font-weight: 600;
+                text-align: center;
             }
-            
+
+            #chatrooms-view .panel-header,
+            #users-view .panel-header,
+            #my-profile-view .panel-header,
+            #browser-view .panel-header {
+                 display: flex;
+                 align-items: center;
+                 justify-content: center;
+            }
+
+
+            #chatrooms-view {
+                 /* Special layout for chat list + chat window on desktop */
+            }
+
+            #chatroom-list-container {
+                 width: 100%; /* Mobile default */
+                 height: 100%;
+                 display: flex; /* Mobile default */
+                 flex-direction: column;
+                 background-color: var(--bg-secondary);
+                 overflow-y: auto;
+            }
+
+            #chat-window-container {
+                 width: 100%; /* Mobile default */
+                 height: 100%;
+                 display: none; /* Mobile default, shown by JS */
+                 flex-direction: column;
+                 background-color: var(--bg-primary);
+            }
+
             .list-header {
                 padding: 16px;
                 border-bottom: 1px solid var(--border-color);
@@ -191,9 +230,8 @@ def index():
                 margin-bottom: 8px;
                 word-break: break-all;
             }
-             #user-nickname-summary { margin-bottom: 0; }
             
-            .username-form { display: flex; gap: 8px; margin-top: 8px;}
+            .username-form { display: flex; gap: 8px; }
             .username-input {
                 flex-grow: 1;
                 background-color: var(--bg-primary);
@@ -213,19 +251,18 @@ def index():
                 border-radius: 6px;
                 cursor: pointer;
                 font-weight: 500;
-                transition: transform 0.2s ease, box-shadow 0.2s ease;
+                transition: transform 0.1s ease, box-shadow 0.1s ease;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
             }
-             .action-btn:disabled {
+            .action-btn:active {
+                 transform: scale(0.95);
+            }
+            .action-btn:disabled {
                 opacity: 0.5;
                 cursor: not-allowed;
-             }
-            .action-btn:hover:not(:disabled) {
-                transform: translateY(-2px);
-                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
             }
             .action-btn.small {
                 padding: 8px 12px;
@@ -247,6 +284,18 @@ def index():
             }
             .chatroom-item:hover { background-color: var(--bg-hover); }
 
+            .user-item {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                padding: 12px 16px;
+                cursor: pointer;
+                border-bottom: 1px solid var(--border-color);
+                transition: background-color 0.2s ease;
+            }
+            .user-item:hover { background-color: var(--bg-hover); }
+
+
             .avatar {
                 width: 40px;
                 height: 40px;
@@ -257,22 +306,13 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                overflow: hidden;
+                user-select: none;
             }
-             .avatar.message-avatar {
-                 width: 36px;
-                 height: 36px;
-             }
-             .avatar img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-             }
-            .chatroom-info {
+            .list-item-info {
                 flex-grow: 1;
                 overflow: hidden;
             }
-            .chatroom-name {
+            .list-item-name {
                 font-weight: 500;
                 white-space: nowrap;
                 overflow: hidden;
@@ -286,7 +326,7 @@ def index():
             }
 
             #chat-window-view {
-                display: none; /* Hidden by default on mobile */
+                display: none; /* Mobile default */
                 flex-direction: column;
                 height: 100%;
                 width: 100%;
@@ -306,7 +346,11 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: block; /* Shown by default on mobile */
+                display: block; /* Mobile default */
+                padding: 0;
+                width: 24px;
+                height: 24px;
+                flex-shrink: 0;
             }
             .back-btn svg {
                 width: 24px;
@@ -316,7 +360,17 @@ def index():
             #chat-header-title {
                 font-size: 1.2rem;
                 font-weight: 600;
+                flex-grow: 1;
+                 white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
+             #chat-header-avatar {
+                 width: 36px;
+                 height: 36px;
+                 font-size: 0.9rem;
+             }
+
 
             #messages-container {
                 flex-grow: 1;
@@ -333,7 +387,10 @@ def index():
                 max-width: 80%;
             }
             .message .avatar {
+                width: 32px;
+                height: 32px;
                 align-self: flex-end;
+                 font-size: 0.8rem;
             }
             .message-content {
                 display: flex;
@@ -348,7 +405,7 @@ def index():
                 cursor: pointer;
             }
             .message-bubble {
-                padding: 10px 14px;
+                padding: 8px 12px;
                 border-radius: 18px;
                 line-height: 1.4;
                 word-wrap: break-word;
@@ -382,7 +439,7 @@ def index():
 
             .message-form {
                 display: flex;
-                padding: 16px;
+                padding: 12px 16px;
                 gap: 12px;
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
@@ -402,77 +459,80 @@ def index():
             #message-input:focus { border-color: var(--accent-blue); }
 
             .send-btn {
-                width: 44px;
-                height: 44px;
+                width: 40px;
+                height: 40px;
                 border-radius: 50%;
                 flex-shrink: 0;
                 padding: 0;
             }
-            .send-btn svg { width: 20px; height: 20px; fill: white; }
+            .send-btn svg { width: 18px; height: 18px; fill: white; }
 
-            /* Users View Specific Styles */
-            #users-view .view-header {
-                padding: 16px;
-                border-bottom: 1px solid var(--border-color);
-                flex-shrink: 0;
-            }
-            #users-view .view-header h2 {
-                font-size: 1.5rem;
-                font-weight: 600;
+            #users-list-container {
+                flex-grow: 1;
+                overflow-y: auto;
             }
-             #user-list {
-                 flex-grow: 1;
-                 overflow-y: auto;
-                 padding: 0 16px;
-             }
-            .user-item {
+
+            #my-profile-view .profile-details {
+                padding: 20px;
                 display: flex;
+                flex-direction: column;
                 align-items: center;
-                gap: 12px;
-                padding: 12px 0;
-                cursor: pointer;
-                border-bottom: 1px solid var(--border-color);
-                transition: background-color 0.2s ease;
+                gap: 16px;
+            }
+            #my-profile-view .profile-details .avatar {
+                 width: 80px;
+                 height: 80px;
+                 font-size: 2rem;
+                 margin-bottom: 10px;
+            }
+            #my-profile-view #profile-username,
+            #my-profile-view #profile-address,
+            #my-profile-view #profile-balance {
+                 width: 100%;
+                 text-align: center;
+                 word-break: break-all;
+            }
+            #my-profile-view #profile-username {
+                 font-size: 1.5rem;
+                 font-weight: 600;
+            }
+            #my-profile-view #profile-address,
+            #my-profile-view #profile-balance {
+                font-size: 1rem;
+                color: var(--text-secondary);
             }
-            .user-item:last-child { border-bottom: none; }
-            .user-item:hover { background-color: var(--bg-hover); }
-            .user-item-info {
-                 flex-grow: 1;
-                 overflow: hidden;
-             }
-            .user-item-name {
-                font-weight: 500;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
+            #my-profile-view #profile-balance {
+                 color: var(--ton-color-light);
+                 font-weight: 500;
             }
-             .user-item-address {
-                 font-size: 0.9rem;
-                 color: var(--text-secondary);
-                 white-space: nowrap;
-                 overflow: hidden;
-                 text-overflow: ellipsis;
-             }
 
-             /* Browser View Specific Styles */
-             #browser-view .view-header {
-                padding: 16px;
-                border-bottom: 1px solid var(--border-color);
-                flex-shrink: 0;
-             }
-             #browser-view .view-header h2 {
-                font-size: 1.5rem;
-                font-weight: 600;
-             }
-             .browser-bar {
-                display: flex;
-                gap: 8px;
-                padding: 12px 16px;
-                border-bottom: 1px solid var(--border-color);
-                background-color: var(--bg-tertiary);
-                flex-shrink: 0;
+            #my-profile-view #profile-qr-code {
+                background: white;
+                padding: 10px;
+                margin-top: 20px;
+                width: fit-content;
+                border-radius: 8px;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            }
+            #my-profile-view .username-form {
+                 width: 100%;
+                 max-width: 300px;
+                 margin-top: 20px;
+            }
+
+
+            #browser-view iframe {
+                width: 100%;
+                flex-grow: 1;
+                border: none;
+            }
+             #browser-address-bar {
+                 display: flex;
+                 padding: 8px 16px;
+                 background-color: var(--bg-tertiary);
+                 gap: 8px;
              }
-             .browser-url-input {
+            #browser-address-bar input {
                 flex-grow: 1;
                 padding: 8px 12px;
                 border: 1px solid var(--border-color);
@@ -480,134 +540,72 @@ def index():
                 color: var(--text-primary);
                 border-radius: 6px;
                 font-size: 0.9rem;
-             }
-             .browser-url-input:focus { outline: none; border-color: var(--accent-blue); }
-             .browser-iframe {
-                width: 100%;
-                flex-grow: 1;
-                border: none;
-             }
-
-             /* Profile View Specific Styles */
-             #profile-view {
-                padding: 24px;
-                align-items: center;
-                text-align: center;
-                overflow-y: auto;
-             }
-             #profile-view .avatar {
-                width: 80px;
-                height: 80px;
-                margin-bottom: 20px;
-             }
-             #profile-view h2 {
-                font-size: 1.8rem;
-                font-weight: 600;
-                margin-bottom: 8px;
-             }
-             #profile-view p {
-                font-size: 1rem;
-                color: var(--text-secondary);
-                margin-bottom: 8px;
-             }
-             #profile-view .action-btn {
-                margin-top: 20px;
-                width: auto;
-                padding: 12px 24px;
-             }
-            #profile-view #profile-qr-code {
-                background: white;
-                padding: 10px;
-                margin: 20px auto;
-                width: fit-content;
-                border-radius: 8px;
-            }
-            #profile-view .qr-label {
-                text-align: center;
-                color: var(--text-secondary);
-                font-size: 0.8rem;
-                margin-top: -10px;
-                margin-bottom: 20px;
+                outline: none;
             }
-            #profile-view .profile-balance {
-                 font-size: 1.1rem;
-                 font-weight: 500;
-                 margin-top: 16px;
-                 color: var(--accent-blue-light);
+            #browser-address-bar button {
+                padding: 8px 12px;
+                background: var(--accent-blue);
+                color: white;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
             }
 
 
-            /* Bottom Navigation Bar */
             #bottom-nav {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: 60px;
-                background-color: var(--bg-secondary);
-                border-top: 1px solid var(--border-color);
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
-                z-index: 500;
-                box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
+                height: 60px;
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
+                flex-shrink: 0;
             }
-
             .nav-item {
-                flex: 1;
+                flex-grow: 1;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                padding: 5px;
                 cursor: pointer;
                 color: var(--text-secondary);
-                transition: color 0.2s ease;
                 font-size: 0.7rem;
-                text-align: center;
-                gap: 2px;
+                transition: color 0.2s ease;
+                user-select: none;
+                padding: 4px 0;
             }
-
             .nav-item svg {
                 width: 24px;
                 height: 24px;
                 fill: var(--text-secondary);
+                margin-bottom: 4px;
                 transition: fill 0.2s ease;
             }
-
             .nav-item.active {
                 color: var(--accent-blue-light);
             }
-            .nav-item.active svg {
+             .nav-item.active svg {
                 fill: var(--accent-blue-light);
             }
 
-            .nav-item#nav-scan {
-                flex-grow: 0;
-                width: 56px;
-                height: 56px;
-                border-radius: 50%;
-                background: linear-gradient(45deg, var(--ton-purple), var(--ton-purple-light));
-                color: white;
-                transform: translateY(-15px);
-                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-                transition: transform 0.2s ease, box-shadow 0.2s ease;
-            }
-             .nav-item#nav-scan:hover {
-                 transform: translateY(-17px);
-                 box-shadow: 0 7px 20px rgba(0,0,0,0.4);
+             .nav-item#qr-scanner-nav {
+                 position: relative;
+                 top: -15px;
+                 width: 50px;
+                 height: 50px;
+                 border-radius: 50%;
+                 background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                 color: white;
+                 box-shadow: 0 4px 10px rgba(0, 136, 204, 0.4);
+                 flex-grow: 0;
+                 margin: 0 10px;
              }
-             .nav-item#nav-scan svg {
+             .nav-item#qr-scanner-nav svg {
                  fill: white;
-                 width: 28px;
-                 height: 28px;
-             }
-             .nav-item#nav-scan span {
-                 display: none; /* Hide text below central icon */
+                 margin: 0;
              }
 
 
-            /* Modals */
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -650,14 +648,12 @@ def index():
                 border: none;
                 cursor: pointer;
                 font-weight: 500;
-                 transition: background-color 0.2s ease;
             }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
-             .secondary-btn:hover { background-color: #3a3d45; }
             
             #status-bar {
                 position: fixed;
-                bottom: calc(60px + 20px); /* Above nav bar */
+                bottom: 70px; /* Above nav bar */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -670,16 +666,18 @@ 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%;
+                word-break: break-word;
             }
             #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 (min-width 768px) */
+            /* Desktop Layout */
             @media (min-width: 768px) {
                 body {
-                    align-items: center;
-                    justify-content: center;
+                     padding: 20px;
+                     background-color: var(--bg-secondary);
                 }
                 .main-container {
                     max-width: 1100px;
@@ -688,81 +686,69 @@ def index():
                     overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
-                     /* Remove fixed positioning for login view */
-                     position: relative;
-                     bottom: auto;
-                     left: auto;
-                     transform: none;
-                     padding-bottom: 0; /* No nav bar padding on desktop container */
+                    flex-direction: row;
                 }
-                 #app-view {
-                     flex-direction: row; /* Side-by-side layout */
-                 }
 
-                .content-area {
-                    flex-grow: 1;
-                    padding-bottom: 0; /* No padding for desktop layout */
-                    position: static; /* Static positioning */
-                    overflow: hidden; /* Prevent content area scroll bar */
-                    display: flex; /* Use flex for side-by-side views if needed, or handle within views */
+                #login-view {
+                     border-radius: 12px;
                 }
 
-                .view {
-                    position: static; /* Static positioning in desktop flex layout */
-                     overflow-y: hidden; /* Prevent individual view scroll bars unless needed */
+                #app-view {
+                    flex-direction: row;
                 }
-                 #chats-view {
-                     flex-direction: row; /* Side-by-side list and window */
+
+                 #bottom-nav {
+                     display: none; /* Hide bottom nav on desktop */
                  }
 
-                #chatroom-list-view {
-                    width: 320px;
-                    flex-shrink: 0;
-                    border-right: 1px solid var(--border-color);
-                    display: flex !important; /* Always show list on desktop */
-                    overflow-y: auto; /* Add scroll to list view */
-                     height: 100%;
-                }
-                #chat-window-view {
-                    width: auto;
-                    flex-grow: 1;
-                    display: flex !important; /* Always show window on desktop */
-                    overflow: hidden; /* Handle message scroll within messages-container */
-                     height: 100%;
+                #content-area {
+                     flex-direction: row; /* Layout views side-by-side or within a split */
+                     position: static; /* No absolute positioning */
                 }
 
-                .back-btn { display: none !important; } /* Hide back button on desktop */
+                 .view-panel {
+                     position: static; /* No absolute positioning */
+                     width: 100%; /* Takes full content width by default */
+                 }
 
-                 /* Ensure other views take full space when active */
-                 #users-view.active, #browser-view.active, #profile-view.active {
-                    width: 100%;
-                    height: 100%;
-                    overflow-y: auto; /* Add scroll back for these views */
+                 #chatrooms-view.active-view {
+                    display: flex; /* Ensure flex for split */
+                    flex-direction: row; /* Arrange list and window side by side */
                  }
-                #users-view, #browser-view, #profile-view {
-                     /* When inactive, they are hidden by JS, no need for specific desktop hidden style */
+
+                #chatroom-list-container {
+                    width: 320px; /* Fixed width for list */
+                    flex-shrink: 0;
+                    border-right: 1px solid var(--border-color);
+                    display: flex; /* Always visible */
                 }
 
+                #chat-window-container {
+                    width: auto; /* Take remaining space */
+                    flex-grow: 1;
+                    display: flex; /* Always visible */
+                }
 
-                 /* Hide bottom nav bar on desktop */
-                 #bottom-nav {
-                     display: none;
-                 }
+                .back-btn {
+                    display: none !important; /* Hide back button on desktop */
+                }
 
-                #status-bar {
-                    bottom: 20px; /* Revert status bar position */
+                .chat-header #chat-header-title {
+                     text-align: left;
+                }
+                .chat-header {
+                     justify-content: flex-start;
                 }
 
-                #profile-view {
-                     padding-top: 40px; /* Adjust padding */
+                #users-view.active-view,
+                #browser-view.active-view,
+                #my-profile-view.active-view {
+                     display: flex; /* These views take the full content area */
                 }
-                 #profile-view .avatar {
-                     width: 100px;
-                     height: 100px;
-                     margin-bottom: 24px;
+
+                 #status-bar {
+                     bottom: 20px; /* Move back to bottom */
                  }
-                 #profile-view h2 { font-size: 2rem; }
-                 #profile-view p { font-size: 1.1rem; }
             }
         </style>
     </head>
@@ -776,11 +762,10 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <div class="content-area">
-                
-                <!-- Chats View -->
-                <div id="chats-view" class="view active">
-                    <div id="chatroom-list-view">
+            <div id="content-area">
+
+                <div id="chatrooms-view" class="view-panel active-view">
+                    <div id="chatroom-list-container">
                         <div class="list-header">
                             <div class="list-header-top">
                                 <h2>Чаты</h2>
@@ -794,16 +779,14 @@ def index():
                             <div class="user-profile-summary">
                                 <div id="user-wallet-summary"></div>
                                 <div id="user-nickname-summary"></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 id="chatroom-list">
+                            <!-- Chatroom items will be loaded here -->
+                        </div>
                     </div>
 
-                    <div id="chat-window-view">
+                    <div id="chat-window-container">
                         <div id="chat-placeholder" class="chat-placeholder">
                             <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
                             <h2>Выберите чат</h2>
@@ -828,72 +811,63 @@ def index():
                     </div>
                 </div>
 
-                <!-- Users View -->
-                <div id="users-view" class="view">
-                    <div class="view-header">
-                        <h2>Пользователи</h2>
+                <div id="users-view" class="view-panel">
+                    <div class="panel-header">Пользователи</div>
+                    <div id="users-list-container">
+                        <!-- User items will be loaded here -->
                     </div>
-                     <div id="user-list"></div>
                 </div>
 
-                <!-- Browser View -->
-                <div id="browser-view" class="view">
-                     <div class="view-header">
-                         <h2>Браузер</h2>
-                     </div>
-                     <form id="browser-form" class="browser-bar">
-                         <input type="text" id="browser-url-input" class="browser-url-input" placeholder="Введите адрес или поисковый запрос" value="https://www.google.com">
-                         <button type="submit" class="action-btn small">Go</button>
+                <div id="browser-view" class="view-panel">
+                    <div class="panel-header">Браузер</div>
+                     <form id="browser-address-bar">
+                         <input type="text" id="browser-url-input" value="https://www.google.com" placeholder="Введите URL">
+                         <button type="submit">Перейти</button>
                      </form>
-                     <iframe id="browser-iframe" class="browser-iframe" src="https://www.google.com"></iframe>
+                    <iframe id="browser-iframe" src="https://www.google.com" sandbox="allow-same-origin allow-forms allow-popups allow-scripts allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-sequences allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"></iframe>
                 </div>
 
-                <!-- Profile View -->
-                <div id="profile-view" class="view">
-                    <h2>Мой профиль</h2>
-                    <div id="my-profile-avatar-container" class="avatar"></div>
-                    <p id="my-profile-username"></p>
-                    <p id="my-profile-address" style="word-break: break-all;"></p>
-                     <p id="my-profile-balance" class="profile-balance"></p>
-
-                    <div id="my-profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
-                    <p class="qr-label">Отсканируйте для открытия профиля</p>
-
-                    <!-- Add buttons for actions from profile? Or keep actions in modal? -->
-                    <!-- Keeping send TON in modal for other users, maybe add other actions here later -->
-                     <button id="disconnect-wallet-btn" class="action-btn secondary-btn" style="background-color: var(--error-color); margin-top: 30px;">
-                         Отключить кошелек
-                     </button>
+                <div id="my-profile-view" class="view-panel">
+                    <div class="panel-header">Мой профиль</div>
+                    <div class="profile-details">
+                        <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-profile-username-form">
+                             <input type="text" id="my-profile-username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
+                             <button type="submit" class="action-btn small">✓</button>
+                         </form>
+                         <div id="my-profile-qr-code" style="background: white; padding: 10px; margin-top: 20px; width: fit-content; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></div>
+                         <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px;">Отсканируйте для быстрого добавления</p>
+                    </div>
                 </div>
 
             </div>
 
-            <!-- Bottom Navigation -->
-            <div id="bottom-nav">
-                <div class="nav-item active" data-view="chats-view">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 6H6v-2h8v2zm4-6v6H6V9h12z"/></svg>
-                    <span>Чаты</span>
-                </div>
-                <div class="nav-item" data-view="users-view">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16.5 12c-.97 0-3.68.63-5.18 1.67-.88.61-1.41 1.35-1.82 2.33H2v3h20v-3h-8.5c.36-.74.77-1.45 1.31-2.09C14.68 12.63 15.53 12 16.5 12zM7.5 8c1.93 0 3.5-1.57 3.5-3.5S9.43 1 7.5 1 4 2.57 4 4.5 5.57 8 7.5 8zm9 0c1.93 0 3.5-1.57 3.5-3.5S18.43 1 16.5 1 13 2.57 13 4.5 14.57 8 16.5 8z"/></svg>
+            <nav id="bottom-nav">
+                 <div class="nav-item active" data-view="chatrooms-view">
+                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
+                     <span>Чаты</span>
+                 </div>
+                 <div class="nav-item" data-view="users-view">
+                     <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 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S13.66 5 12 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-1.33 2.88c-.31.78-1.05 1.32-1.91 1.43C7.89 14.53 6.9 14.5 6 14.5c-.9 0-1.89.03-2.76.71-.86.11-1.6.65-1.91 1.43-.51 1.29-.75 2.63-.75 3.98V21c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.2c0-1.35-.24-2.69-.74-3.92zM18 13.88c-.31.78-1.05 1.32-1.91 1.43-.87.11-1.86.08-2.73-.69-.02-.01-.03-.02-.04-.03.88-.76 1.89-1.19 2.94-1.19h1.14c.91 0 1.77.16 2.5.45.15.06.29.14.42.23.01.01.02.01.03.02.01.01.02.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03-.5 1.23-.74 2.57-.74 3.92V21c0 .55.45 1 1 1h1.45c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H21v-1.2c0-1.35-.24-2.69-.74-3.92z"/></svg>
                     <span>Юзеры</span>
-                </div>
-                <div class="nav-item" id="nav-scan">
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
-                    <span>Scan</span>
-                </div>
-                <div class="nav-item" data-view="browser-view">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-5h2v-2H7v2zm3 0h2v-2h-2v2zm3 0h2v-2h-2v2z"/></svg>
-                    <span>Браузер</span>
-                </div>
-                <div class="nav-item" data-view="profile-view">
-                    <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="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                    <span>Профиль</span>
-                </div>
-            </div>
+                 </div>
+                 <div class="nav-item" id="qr-scanner-nav">
+                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
+                 </div>
+                 <div class="nav-item" data-view="browser-view">
+                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-5h2v-2H7v2zm3 0h2v-2h-2v2zm5 0h2v-2h-2v2zM7 13h2v-2H7v2zm3 0h2v-2h-2v2zm5 0h2v-2h-2v2zM7 11h2V9H7v2zm3 0h2V9h-2v2zm5 0h2V9h-2v2z"/></svg>
+                     <span>Браузер</span>
+                 </div>
+                 <div class="nav-item" data-view="my-profile-view">
+                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                     <span>Профиль</span>
+                 </div>
+            </nav>
         </div>
         
-        <!-- Modals -->
         <div id="create-room-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Создать новый чат</h3>
@@ -924,7 +898,6 @@ def index():
             </div>
         </div>
 
-        <!-- Profile Modal (for others' profiles) -->
         <div id="profile-modal" class="modal-overlay">
             <div class="modal-content" style="text-align: center;">
                 <h3 id="profile-modal-title">Профиль пользователя</h3>
@@ -955,42 +928,43 @@ def index():
         <script>
             document.addEventListener('DOMContentLoaded', () => {
                 const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
-                    manifestUrl: 'https://huggingface.co/spaces/Aleksmorshen/MorshenGroup/resolve/main/tonconnect-manifest.json', // Or your manifest URL
+                    manifestUrl: 'https://huggingface.co/spaces/Aleksmorshen/MorshenGroup/resolve/main/tonconnect-manifest.json',
                     buttonRootId: 'ton-connect-button'
                 });
 
-                let currentUser = { address: null, username: null, balance: '...' };
+                let currentUser = { address: null, username: null, balance: null };
                 let activeChatroomId = null;
                 let messagePollingInterval = null;
                 let chatroomsData = {};
-                let usersData = [];
+                let usersData = {};
                 let html5QrCode = null;
-                let profileQrCode = null;
-                let myProfileQrCode = null;
-                
+                let profileQrCodeInstance = null;
+                let myProfileQrCodeInstance = null;
+
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
-                const chatsView = document.getElementById('chats-view');
-                const usersView = document.getElementById('users-view');
-                const browserView = document.getElementById('browser-view');
-                const profileView = document.getElementById('profile-view');
+                const contentView = document.getElementById('content-area');
 
-                const chatroomListView = document.getElementById('chatroom-list-view');
-                const chatWindowView = document.getElementById('chat-window-view');
+                const chatroomsView = document.getElementById('chatrooms-view');
+                const chatroomListContainer = document.getElementById('chatroom-list-container');
+                const chatWindowContainer = document.getElementById('chat-window-container');
                 const chatPlaceholder = document.getElementById('chat-placeholder');
                 const activeChat = document.getElementById('active-chat');
+                const backToListBtn = document.getElementById('back-to-list-btn');
+
+                const usersView = document.getElementById('users-view');
+                const browserView = document.getElementById('browser-view');
+                const myProfileView = document.getElementById('my-profile-view');
 
+                const navItems = document.querySelectorAll('.nav-item');
+                const createRoomModal = document.getElementById('create-room-modal');
+                const passwordModal = document.getElementById('password-modal');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
-
-                const bottomNav = document.getElementById('bottom-nav');
-                const navItems = bottomNav.querySelectorAll('.nav-item');
-
                 const browserIframe = document.getElementById('browser-iframe');
                 const browserUrlInput = document.getElementById('browser-url-input');
-                const browserForm = document.getElementById('browser-form');
 
-                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
+                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292', '#a1887f', '#ff8a65', '#ba68c8'];
 
                 const getAvatar = (name) => {
                     const initial = (name ? name[0] : '?').toUpperCase();
@@ -1000,11 +974,6 @@ def index():
                     avatar.className = 'avatar';
                     avatar.style.backgroundColor = color;
                     avatar.textContent = initial;
-                     // Basic placeholder for TON symbol if it's the app's profile/placeholder
-                    if (!name || name === 'Virton') {
-                         avatar.innerHTML = `<img src="https://ton.org/download/ton_symbol.svg" style="filter: invert(100%);">`;
-                         avatar.style.backgroundColor = 'transparent'; // Or a subtle background
-                    }
                     return avatar;
                 };
 
@@ -1029,66 +998,91 @@ def index():
                         if (response.status === 204) return null;
                         return await response.json();
                     } catch (error) {
-                        showStatus(`Ошибка API: ${error.message}`, 'error');
+                        showStatus(`Ошибка: ${error.message}`, 'error');
                         throw error;
                     }
                 };
                 
                 const truncateAddress = (address) => address ? `${address.substring(0, 4)}...${address.substring(address.length - 4)}` : '';
+                const formatTonAmount = (nanotons) => {
+                     if (nanotons === null) return 'Баланс недоступен';
+                     try {
+                         // Use TON SDK utility if available, otherwise basic division
+                         if (typeof window.TonWeb !== 'undefined' && window.TonWeb.utils && window.TonWeb.utils.fromNano) {
+                            return `${parseFloat(window.TonWeb.utils.fromNano(nanotons)).toFixed(2)} TON`;
+                         } else {
+                            return `${(parseInt(nanotons) / 1_000_000_000).toFixed(2)} TON`;
+                         }
+                     } catch (e) {
+                          console.error("Failed to format TON amount:", e);
+                          return `${nanotons} nanoTON`;
+                     }
+                };
 
                 const updateUserInfoSummary = () => {
                     document.getElementById('user-wallet-summary').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
-                    const nicknameEl = document.getElementById('user-nickname-summary');
-                    const usernameInput = document.getElementById('username-input');
-                    nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
-                    usernameInput.value = currentUser.username || '';
+                    document.getElementById('user-nickname-summary').textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
                 };
 
-                 const updateMyProfileView = () => {
-                    const avatarContainer = document.getElementById('my-profile-avatar-container');
-                    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 updateMyProfileView = async () => {
+                     const profileAvatarEl = 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 usernameInput = document.getElementById('my-profile-username-input');
+                     const qrCodeEl = document.getElementById('my-profile-qr-code');
+
+                     profileAvatarEl.innerHTML = '';
+                     profileAvatarEl.appendChild(getAvatar(currentUser.username || currentUser.address));
+
+                     usernameEl.textContent = currentUser.username || 'Никнейм не установлен';
+                     addressEl.textContent = currentUser.address;
+
+                     if (tonConnectUI.wallet && tonConnectUI.wallet.account) {
+                          try {
+                            // Fetch balance if needed, or rely on wallet status change data
+                            // For simplicity, let's use the balance from wallet status if available
+                            const balance = tonConnectUI.wallet.account.balance; // This is nanoTON string
+                            currentUser.balance = balance;
+                            balanceEl.textContent = `Баланс: ${formatTonAmount(balance)}`;
+                          } catch (e) {
+                            console.error("Failed to get balance:", e);
+                             balanceEl.textContent = `Баланс: Недоступно`;
+                          }
+                     } else {
+                          balanceEl.textContent = `Баланс: Подключите кошелек`;
+                     }
+
 
-                    avatarContainer.innerHTML = '';
-                    avatarContainer.appendChild(getAvatar(currentUser.username || currentUser.address));
-                    
-                    usernameEl.textContent = currentUser.username || `Пользователь ${truncateAddress(currentUser.address)}`;
-                    addressEl.textContent = currentUser.address;
-                    balanceEl.textContent = `Баланс: ${currentUser.balance}`;
-
-                    qrCodeEl.innerHTML = '';
-                    if (myProfileQrCode) {
-                         myProfileQrCode.clear();
-                         myProfileQrCode = null;
-                    }
-                    if (currentUser.address) {
-                        myProfileQrCode = new QRCode(qrCodeEl, {
-                            text: currentUser.address,
-                            width: 150,
-                            height: 150,
-                            colorDark : "#000000",
-                            colorLight : "#ffffff",
-                            correctLevel : QRCode.CorrectLevel.H
-                        });
-                    }
-                 }
-                
-                document.getElementById('username-form').addEventListener('submit', async (e) => {
+                     usernameInput.value = currentUser.username || '';
+
+                     qrCodeEl.innerHTML = '';
+                     if (myProfileQrCodeInstance) {
+                         myProfileQrCodeInstance.clear();
+                     }
+                     if (currentUser.address) {
+                         myProfileQrCodeInstance = new QRCode(qrCodeEl, {
+                             text: currentUser.address,
+                             width: 150,
+                             height: 150,
+                             colorDark : "#000000",
+                             colorLight : "#ffffff",
+                             correctLevel : QRCode.CorrectLevel.H
+                         });
+                     }
+                };
+
+                document.getElementById('my-profile-username-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
-                    const newUsername = document.getElementById('username-input').value.trim();
-                    if (!newUsername) {
-                        showStatus('Никнейм не может быть пустым.', 'error');
+                    const newUsername = document.getElementById('my-profile-username-input').value.trim();
+                    if (!newUsername || newUsername.length < 3) {
+                        showStatus('Никнейм должен быть не короче 3 символов.', 'error');
                         return;
                     }
-                    if (newUsername.length < 3 || newUsername.length > 20) {
-                        showStatus('Никнейм должен быть от 3 до 20 символов.', 'error');
-                        return;
+                    if (newUsername.length > 20) {
+                         showStatus('Никнейм должен быть не длиннее 20 символов.', 'error');
+                         return;
                     }
-                    
-                    const submitBtn = e.target.querySelector('button[type="submit"]');
-                    submitBtn.disabled = true;
 
                     try {
                         await apiCall('/api/set_username', {
@@ -1100,31 +1094,14 @@ def index():
                         updateUserInfoSummary();
                         updateMyProfileView();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms(); // Update chat list with new name
-                        if (activeChatroomId) fetchMessages(activeChatroomId); // Update chat messages with new name
-                        fetchUsers(); // Update user list
-                    } catch (err) {
-                         // Error handled by apiCall
-                    } finally {
-                         submitBtn.disabled = false;
-                    }
+                        fetchChatrooms(); // Update chat list names
+                        if (activeChatroomId) fetchMessages(activeChatroomId); // Update sender names in chat
+                    } catch (err) {}
                 });
 
-                const initializeUser = async (address) => {
-                    currentUser.address = address;
-                     if (tonConnectUI.wallet) {
-                          // TON Connect UI >= 2.0 provides balance directly in wallet.account
-                          // Balance is in nanoTON, need to convert
-                         const balanceNano = tonConnectUI.wallet.account.balance;
-                         if (balanceNano !== undefined && balanceNano !== null) {
-                             currentUser.balance = (Number(balanceNano) / 1_000_000_000).toFixed(2) + ' TON';
-                         } else {
-                             currentUser.balance = 'Баланс недоступен';
-                         }
-                     } else {
-                         currentUser.balance = '...';
-                     }
-
+                const initializeUser = async (wallet) => {
+                    currentUser.address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
+                     currentUser.balance = wallet.account.balance; // Store initial balance from wallet
                     try {
                         const data = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -1133,7 +1110,7 @@ def index():
                         });
                         currentUser.username = data.username;
                     } catch (err) {
-                        currentUser.username = null; // User not found or error, treat as new/unknown
+                        currentUser.username = null; // User not found in DB or error
                     }
                     
                     updateUserInfoSummary();
@@ -1142,12 +1119,11 @@ def index():
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
                     
-                    // Initial data fetches
-                    fetchChatrooms();
-                    fetchUsers();
+                    // Ensure default view is chats and handle responsiveness
+                    handleResize();
+                    navigateToView('chatrooms-view');
 
-                    // Show default view (chats)
-                    showView('chats-view');
+                    fetchChatrooms();
                 };
 
                 const renderChatrooms = (rooms) => {
@@ -1163,9 +1139,9 @@ def index():
                         item.appendChild(getAvatar(room.name));
 
                         const infoDiv = document.createElement('div');
-                        infoDiv.className = 'chatroom-info';
+                        infoDiv.className = 'list-item-info';
                         const nameSpan = document.createElement('div');
-                        nameSpan.className = 'chatroom-name';
+                        nameSpan.className = 'list-item-name';
                         nameSpan.textContent = room.name;
                         infoDiv.appendChild(nameSpan);
                         item.appendChild(infoDiv);
@@ -1182,22 +1158,20 @@ def index():
                 };
                 
                 const fetchChatrooms = async () => {
-                    if (!currentUser.address) return;
                     try {
                         const data = await apiCall('/api/chatrooms');
                         renderChatrooms(data.chatrooms);
                     } catch (err) {
-                        // Error handled by apiCall
+                        // Errors are shown in status bar
                     }
                 };
 
-                 const renderUsers = (users) => {
-                     const list = document.getElementById('user-list');
+                const renderUsers = (users) => {
+                     const list = document.getElementById('users-list-container');
                      list.innerHTML = '';
-                     usersData = users; // Store for potential future use or filtering
+                     usersData = {};
                      users.forEach(user => {
-                         if (user.address === currentUser.address) return; // Don't list self
-
+                         usersData[user.address] = user;
                          const item = document.createElement('div');
                          item.className = 'user-item';
                          item.dataset.address = user.address;
@@ -1205,38 +1179,38 @@ def index():
                          item.appendChild(getAvatar(user.username || user.address));
 
                          const infoDiv = document.createElement('div');
-                         infoDiv.className = 'user-item-info';
+                         infoDiv.className = 'list-item-info';
                          const nameSpan = document.createElement('div');
-                         nameSpan.className = 'user-item-name';
-                         nameSpan.textContent = user.username || `Пользователь ${truncateAddress(user.address)}`;
+                         nameSpan.className = 'list-item-name';
+                         nameSpan.textContent = user.username || truncateAddress(user.address);
                          infoDiv.appendChild(nameSpan);
+
                          const addressSpan = document.createElement('div');
-                         addressSpan.className = 'user-item-address';
-                         addressSpan.textContent = user.address;
+                         addressSpan.style.fontSize = '0.8rem';
+                         addressSpan.style.color = 'var(--text-secondary)';
+                         addressSpan.textContent = truncateAddress(user.address);
                          infoDiv.appendChild(addressSpan);
 
                          item.appendChild(infoDiv);
 
-                         item.addEventListener('click', () => showProfileModal(user.address));
+                         item.addEventListener('click', () => showProfile(user.address));
                          list.appendChild(item);
                      });
-                 };
+                };
+
+                const fetchUsers = async () => {
+                    try {
+                        const data = await apiCall('/api/users');
+                        renderUsers(data.users);
+                    } catch (err) {
+                        // Errors are shown in status bar
+                    }
+                };
 
-                 const fetchUsers = async () => {
-                     if (!currentUser.address) return;
-                     try {
-                         const data = await apiCall('/api/users');
-                         renderUsers(data.users);
-                     } catch (err) {
-                         // Error handled by apiCall
-                     }
-                 };
 
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
-                    // Check if user is near bottom before rendering to decide whether to auto-scroll
-                    const isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight <= 50;
-
+                    const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 30;
                     container.innerHTML = '';
                     messages.forEach(msg => {
                         const msgDiv = document.createElement('div');
@@ -1245,7 +1219,7 @@ def index():
                         const avatar = getAvatar(msg.display_name);
                         avatar.classList.add('message-avatar');
                         avatar.style.cursor = 'pointer';
-                        avatar.onclick = () => showProfileModal(msg.sender_address);
+                        avatar.onclick = () => showProfile(msg.sender_address);
                         
                         const contentDiv = document.createElement('div');
                         contentDiv.className = 'message-content';
@@ -1253,7 +1227,7 @@ def index():
                         const senderDiv = document.createElement('div');
                         senderDiv.className = 'message-sender';
                         senderDiv.textContent = msg.display_name;
-                        senderDiv.onclick = () => showProfileModal(msg.sender_address);
+                        senderDiv.onclick = () => showProfile(msg.sender_address);
                         
                         const bubbleDiv = document.createElement('div');
                         bubbleDiv.className = 'message-bubble';
@@ -1263,45 +1237,41 @@ def index():
                         contentDiv.appendChild(bubbleDiv);
 
                         msgDiv.appendChild(contentDiv);
-                        msgDiv.insertBefore(avatar, contentDiv); // Avatar comes first in structure
+                        msgDiv.insertBefore(avatar, contentDiv);
                         container.appendChild(msgDiv);
                     });
 
-                    if(isNearBottom) {
+                    if(shouldScroll || messages.length < 10) { // Scroll to bottom on initial load or new messages if already at bottom
                          container.scrollTop = container.scrollHeight;
                     }
                 };
                 
                 const fetchMessages = async (roomId) => {
-                    if (!currentUser.address || !roomId) return;
+                    if (!roomId) return;
                     try {
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                         // Error handled by apiCall
+                        // Errors are shown in status bar
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                        messagePollingInterval = null;
-                        showStatus('Не удалось загрузить сообщения.', 'error');
                     }
                 };
 
                 const showChatWindow = () => {
-                    chatroomListView.style.display = 'none';
-                    chatWindowView.style.display = 'flex';
+                    if (window.innerWidth < 768) {
+                        chatroomListContainer.style.display = 'none';
+                        chatWindowContainer.style.display = 'flex';
+                    }
+                     // On desktop, both are always visible (controlled by CSS media query)
                 };
 
-                const showChatroomList = () => {
-                    chatroomListView.style.display = 'flex';
-                    chatWindowView.style.display = 'none';
-                     // Clear active chat state
-                     activeChat.style.display = 'none';
-                     chatPlaceholder.style.display = 'flex';
-                     activeChatroomId = null;
-                     if (messagePollingInterval) {
-                         clearInterval(messagePollingInterval);
-                         messagePollingInterval = null;
+                const hideChatWindow = () => {
+                     if (window.innerWidth < 768) {
+                         chatroomListContainer.style.display = 'flex';
+                         chatWindowContainer.style.display = 'none';
                      }
-                };
+                     // On desktop, both remain visible
+                }
 
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
@@ -1318,15 +1288,14 @@ def index():
 
                         chatPlaceholder.style.display = 'none';
                         activeChat.style.display = 'flex';
-                        
-                        showChatWindow(); // Switch view to chat window on mobile
+
+                        showChatWindow();
 
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
                     };
                     
                     if (isPrivate) {
-                        const passwordModal = document.getElementById('password-modal');
                         const passwordForm = document.getElementById('password-form');
                         const passwordInput = document.getElementById('password-input');
                         passwordModal.style.display = 'flex';
@@ -1336,14 +1305,10 @@ def index():
                         const formSubmitHandler = async (e) => {
                             e.preventDefault();
                             passwordForm.removeEventListener('submit', formSubmitHandler);
-                             document.getElementById('password-cancel').removeEventListener('click', cancelHandler);
+                            document.getElementById('password-cancel').removeEventListener('click', passwordCancelHandler);
 
                             const password = passwordInput.value;
                             passwordModal.style.display = 'none';
-
-                            const submitBtn = e.target.querySelector('button[type="submit"]');
-                            submitBtn.disabled = true;
-
                             try {
                                 await apiCall('/api/join_chatroom', {
                                     method: 'POST',
@@ -1351,20 +1316,16 @@ def index():
                                     body: JSON.stringify({ chatroom_id: roomId, password })
                                 });
                                 proceedToRoom();
-                            } catch (err) {
-                                // Error handled by apiCall (Invalid password, etc.)
-                            } finally {
-                                submitBtn.disabled = false;
-                            }
+                            } catch (err) {}
                         };
                         passwordForm.addEventListener('submit', formSubmitHandler);
 
-                        const cancelHandler = () => {
+                        const passwordCancelHandler = () => {
                             passwordModal.style.display = 'none';
                             passwordForm.removeEventListener('submit', formSubmitHandler);
-                             document.getElementById('password-cancel').removeEventListener('click', cancelHandler);
+                            document.getElementById('password-cancel').removeEventListener('click', passwordCancelHandler);
                         };
-                         document.getElementById('password-cancel').addEventListener('click', cancelHandler);
+                        document.getElementById('password-cancel').addEventListener('click', passwordCancelHandler);
 
                     } else {
                         proceedToRoom();
@@ -1390,12 +1351,10 @@ def index():
                                     text: text
                                 })
                             });
-                            // Fetch messages immediately after sending for faster UI update
-                            await fetchMessages(activeChatroomId);
-                            document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
-                        } catch (err) {
-                             // Error handled by apiCall
-                            showStatus('Не удалось отправить сообщение.', 'error');
+                            // Instead of full fetch, could optimistically add message,
+                            // but polling will update shortly anyway. Fetching ensures consistency.
+                             await fetchMessages(activeChatroomId);
+                             // Auto scroll happens in renderMessages if needed
                         } finally {
                             input.disabled = false;
                             sendBtn.disabled = false;
@@ -1404,7 +1363,6 @@ def index():
                     }
                 });
 
-                const createRoomModal = document.getElementById('create-room-modal');
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
@@ -1421,13 +1379,10 @@ def index():
                          return;
                     }
                      if (!currentUser.address) {
-                         showStatus('Необходимо подключить кошелек для создания чата.', 'error');
-                         return;
+                          showStatus('Не подключен кошелек для создания чата.', 'error');
+                          return;
                      }
 
-                    const submitBtn = e.target.querySelector('button[type="submit"]');
-                    submitBtn.disabled = true;
-
                     try {
                         await apiCall('/api/create_chatroom', {
                             method: 'POST',
@@ -1437,15 +1392,11 @@ def index():
                         createRoomModal.style.display = 'none';
                         showStatus('Чат успешно создан!', 'success');
                         fetchChatrooms();
-                    } catch (err) {
-                         // Error handled by apiCall
-                    } finally {
-                         submitBtn.disabled = false;
-                    }
+                    } catch (err) {}
                 });
 
-                const showProfileModal = async (address) => {
-                     if (!address) return;
+                const showProfile = async (address) => {
+                    if (!address) return;
                     try {
                         const userData = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -1453,17 +1404,14 @@ def index():
                             body: JSON.stringify({ address: address })
                         });
                         
-                        const username = userData.username || `Пользователь ${truncateAddress(address)}`;
+                        const username = userData.username || `User ${truncateAddress(address)}`;
                         
                         const avatarContainer = document.getElementById('profile-avatar-container');
                         const usernameEl = document.getElementById('profile-username');
                         const addressEl = document.getElementById('profile-address');
                         const qrCodeEl = document.getElementById('profile-qr-code');
                         const sendTonBtn = document.getElementById('send-ton-btn');
-                        const modalTitle = document.getElementById('profile-modal-title');
-
-                         modalTitle.textContent = (address === currentUser.address) ? 'Мой профиль' : 'Профиль пользователя';
-
+                        
                         avatarContainer.innerHTML = '';
                         avatarContainer.appendChild(getAvatar(username));
                         
@@ -1471,86 +1419,82 @@ def index():
                         addressEl.textContent = address;
                         
                         qrCodeEl.innerHTML = '';
-                        if (profileQrCode) {
-                            profileQrCode.clear();
+                        if (profileQrCodeInstance) {
+                            profileQrCodeInstance.clear();
                         }
-                         // Generate QR code only if address is valid
-                        if (address) {
-                             profileQrCode = new QRCode(qrCodeEl, {
-                                 text: address,
-                                 width: 150,
-                                 height: 150,
-                                 colorDark : "#000000",
-                                 colorLight : "#ffffff",
-                                 correctLevel : QRCode.CorrectLevel.H
-                             });
-                         }
+                        profileQrCodeInstance = new QRCode(qrCodeEl, {
+                            text: address,
+                            width: 150,
+                            height: 150,
+                            colorDark : "#000000",
+                            colorLight : "#ffffff",
+                            correctLevel : QRCode.CorrectLevel.H
+                        });
                         
-                        // Show/hide Send TON button
-                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
-                        if (address !== currentUser.address) {
-                            sendTonBtn.onclick = async () => {
-                                if (!tonConnectUI.connected || !currentUser.address) {
-                                    showStatus('Подключите кошелек для отправки TON.', 'error');
-                                    return;
-                                }
-                                const amountString = prompt(`Введите сумму в TON для отправки на адрес ${truncateAddress(address)}:`, "0.1");
-                                if (amountString === null) return;
-                                
-                                const amount = parseFloat(amountString);
-                                if (isNaN(amount) || amount <= 0) {
-                                    showStatus('Неверная сумма.', 'error');
-                                    return;
-                                }
-                                
-                                const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
-
-                                const transaction = {
-                                    validUntil: Math.floor(Date.now() / 1000) + 600,
-                                    messages: [ { address: address, amount: amountInNanoTon } ]
-                                };
-
-                                try {
-                                    await tonConnectUI.sendTransaction(transaction);
-                                    showStatus(`Транзакция отправлена успешно!`, 'success');
-                                    profileModal.style.display = 'none';
-                                } catch (error) {
-                                    showStatus('Транзакция отклонена или произошла ошибка.', 'error');
-                                     console.error("Send transaction failed:", error);
-                                }
+                        sendTonBtn.onclick = async () => {
+                            if (!tonConnectUI.connected) {
+                                showStatus('Подключите кошелек для отправки TON.', 'error');
+                                return;
+                            }
+                            const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
+                            if (amountString === null) return;
+                            
+                            const amount = parseFloat(amountString);
+                            if (isNaN(amount) || amount <= 0) {
+                                showStatus('Неверная сумма.', 'error');
+                                return;
+                            }
+                            
+                            const amountInNanoTon = TON_CONNECT_SDK.toNano(amount).toString();
+
+                            const transaction = {
+                                validUntil: Math.floor(Date.now() / 1000) + 600,
+                                messages: [ { address: address, amount: amountInNanoTon } ]
                             };
-                         }
 
+                            try {
+                                await tonConnectUI.sendTransaction(transaction);
+                                showStatus(`Транзакция отправлена успешно!`, 'success');
+                                profileModal.style.display = 'none';
+                            } catch (error) {
+                                console.error("Send transaction failed:", error);
+                                showStatus('Транзакция отклонена или не удалась.', 'error');
+                            }
+                        };
+                        
+                        sendTonBtn.style.display = (address === currentUser.address || !tonConnectUI.connected) ? 'none' : 'block';
                         profileModal.style.display = 'flex';
                     } catch (err) {
-                        showStatus('Не удалось загрузить профиль пользователя.', 'error');
+                        showStatus('Не удалось загрузить профиль.', 'error');
                     }
                 };
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
+                    const qrReaderElement = document.getElementById('qr-reader');
                     if (!html5QrCode) {
-                        html5QrCode = new Html5Qrcode("qr-reader");
+                         html5QrCode = new Html5Qrcode("qr-reader");
                     }
+
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                         hideScanner();
-                        // Basic check for TON address format (starts with EQ or UQ, length around 48 chars)
-                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                            showProfileModal(decodedText);
+                        // Basic check for TON address pattern
+                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ') || decodedText.startsWith('0:'))) {
+                            showProfile(decodedText);
                         } else {
-                            showStatus('Отсканирован недействительный QR-код (не похож на адрес TON).', 'error');
+                            showStatus('Отсканирован недействительный TON QR-код.', 'error');
                         }
                     };
-                     const qrCodeErrorCallback = (errorMessage) => {
-                        // console.warn(`QR scan error: ${errorMessage}`); // Log errors but don't show modal if it's just scanning issues
-                     };
+                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
 
-                    const config = { fps: 10, qrbox: { width: 250, height: 250 }, rememberLastUsedCamera: true };
-                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback, qrCodeErrorCallback)
+                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback, (errorMessage) => {
+                        // Optional: handle scan errors if needed
+                        // console.warn(`QR Code scanning error: ${errorMessage}`);
+                    })
                         .catch(err => {
-                            showStatus('Не удалось запустить сканер QR-кодов. Проверьте разрешения камеры.', 'error');
-                            console.error("QR scanner start failed:", err);
-                            hideScanner(); // Hide modal if start fails
+                             console.error("Failed to start QR scanner.", err);
+                            showStatus('Не удалось запустить сканер. Проверьте разрешения камеры.', 'error');
+                            hideScanner(); // Ensure modal closes on startup failure
                         });
                 };
 
@@ -1560,165 +1504,158 @@ def index():
                     }
                     scannerModal.style.display = 'none';
                 };
-                
-                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', showChatroomList);
-                
-                const handleResize = () => {
-                    const isMobile = window.innerWidth < 768;
-                    const backBtn = document.getElementById('back-to-list-btn');
-                    
-                    if (isMobile) {
-                        backBtn.style.display = 'block';
-                        // On mobile, only the active view should be displayed
-                        // Handled by showView function
-                        // If chats is the active view, manage list/window visibility
-                        if (chatsView.classList.contains('active')) {
-                             if (activeChatroomId) {
-                                 showChatWindow();
-                             } else {
-                                 showChatroomList();
-                             }
-                        } else {
-                            // Ensure chat views are hidden if another view is active
-                             chatroomListView.style.display = 'none';
-                             chatWindowView.style.display = 'none';
-                        }
-
-                    } else { // Desktop
-                        backBtn.style.display = 'none';
-                         // On desktop, chats view should always show both list and window side-by-side
-                         // Other views take full space when active.
-                         // The `display: flex !important` in CSS handles the side-by-side for chats-view
-                         // The `display: flex !important` on other views handles them taking full space
-                         // The `position: static` and overflow styles in desktop media query are key
-                         if (chatsView.classList.contains('active')) {
-                            chatroomListView.style.display = 'flex';
-                            chatWindowView.style.display = 'flex';
-                         } else {
-                            chatroomListView.style.display = 'none';
-                            chatWindowView.style.display = 'none';
-                         }
-
-                    }
-                };
 
-                 // --- View Switching Logic ---
-                 const views = document.querySelectorAll('.view');
-                 const showView = (viewId) => {
+                 const navigateToView = (viewId) => {
+                     const views = contentView.querySelectorAll('.view-panel');
                      views.forEach(view => {
-                         view.classList.remove('active');
+                         view.classList.remove('active-view');
                      });
-                     document.getElementById(viewId).classList.add('active');
+                     document.getElementById(viewId).classList.add('active-view');
 
                      navItems.forEach(item => {
                          item.classList.remove('active');
-                         if (item.dataset.view === viewId) {
-                             item.classList.add('active');
-                         }
                      });
+                     document.querySelector(`.nav-item[data-view="${viewId}"]`)?.classList.add('active');
 
-                     // Special handling for Chats view layout on mobile resize
-                     if (viewId === 'chats-view') {
-                         handleResize(); // Re-apply chat list/window visibility based on size and active chat
+                     // Specific actions for views
+                     if (viewId === 'chatrooms-view') {
+                          fetchChatrooms();
+                          handleResize(); // Re-apply chat window/list visibility logic
                      } else {
-                         // Ensure chat views are hidden when other tabs are active
-                         chatroomListView.style.display = 'none';
-                         chatWindowView.style.display = 'none';
-                         // Stop message polling if switching away from chat
+                         // When navigating away from chat, stop polling
                          if (messagePollingInterval) {
                              clearInterval(messagePollingInterval);
                              messagePollingInterval = null;
                          }
-                         activeChatroomId = null; // Clear active chat when leaving chat view
+                          if (window.innerWidth < 768) {
+                              // Hide chat window if open on mobile
+                               chatWindowContainer.style.display = 'none';
+                               chatroomListContainer.style.display = 'flex'; // Show list default
+                          }
+                     }
+                     if (viewId === 'users-view') {
+                         fetchUsers();
                      }
+                      if (viewId === 'my-profile-view') {
+                          updateMyProfileView(); // Refresh profile data
+                      }
                  };
 
                  navItems.forEach(item => {
-                     if (item.id === 'nav-scan') {
-                         item.addEventListener('click', showScanner);
-                     } else {
-                        item.addEventListener('click', () => {
-                            const viewId = item.dataset.view;
-                            if (viewId) showView(viewId);
-                        });
-                     }
-                 });
-
-                 // Browser Form Submission
-                 browserForm.addEventListener('submit', (e) => {
-                     e.preventDefault();
-                     let url = browserUrlInput.value.trim();
-                     if (!url) return;
-
-                     // Simple check if it looks like a URL (contains .) or is just text
-                     if (url.includes('.')) {
-                          // Assume it's a URL, add protocol if missing
-                         if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                             url = 'https://' + url; // Default to https
+                     item.addEventListener('click', () => {
+                         const viewId = item.dataset.view;
+                         if (viewId) {
+                            navigateToView(viewId);
+                         } else if (item.id === 'qr-scanner-nav') {
+                             showScanner();
                          }
-                     } else {
-                         // Assume it's a search query, use Google search
-                         url = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
-                     }
-                     browserIframe.src = url;
+                     });
                  });
 
-                 // Disconnect wallet button
-                 document.getElementById('disconnect-wallet-btn').addEventListener('click', () => {
-                      if (tonConnectUI.connected) {
-                           tonConnectUI.disconnect();
-                      }
-                 });
+                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', () => {
+                     activeChatroomId = null; // Reset active chat
+                     if (messagePollingInterval) clearInterval(messagePollingInterval);
+                     hideChatWindow(); // Hide window and show list on mobile
+                     chatPlaceholder.style.display = 'flex'; // Show placeholder
+                     activeChat.style.display = 'none'; // Hide active chat elements
+                });
+
+                document.getElementById('browser-address-bar').addEventListener('submit', (e) => {
+                    e.preventDefault();
+                    let url = browserUrlInput.value.trim();
+                    if (!url) return;
+                    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                        url = 'https://' + url; // Default to https
+                    }
+                    browserIframe.src = url;
+                });
+
+                const handleResize = () => {
+                    const isMobile = window.innerWidth < 768;
+
+                     // Adjust main container based on desktop/mobile
+                    const containers = document.querySelectorAll('.main-container');
+                    containers.forEach(container => {
+                        if (isMobile) {
+                             container.style.maxWidth = '100%';
+                             container.style.maxHeight = '100%';
+                             container.style.borderRadius = '0';
+                             container.style.border = 'none';
+                             container.style.boxShadow = 'none';
+                        } else {
+                            container.style.maxWidth = '1100px';
+                            container.style.maxHeight = '800px';
+                            container.style.borderRadius = '12px';
+                            container.style.border = '1px solid var(--border-color)';
+                            container.style.boxShadow = '0 10px 40px rgba(0,0,0,0.3)';
+                        }
+                    });
 
 
+                    // Handle chat view split visibility
+                    if (document.getElementById('chatrooms-view').classList.contains('active-view')) {
+                        if (isMobile) {
+                            backToListBtn.style.display = 'block';
+                            if (activeChatroomId) {
+                                chatroomListContainer.style.display = 'none';
+                                chatWindowContainer.style.display = 'flex';
+                            } else {
+                                chatroomListContainer.style.display = 'flex';
+                                chatWindowContainer.style.display = 'none';
+                            }
+                        } else {
+                            backToListBtn.style.display = 'none';
+                            chatroomListContainer.style.display = 'flex';
+                            chatWindowContainer.style.display = 'flex';
+                        }
+                    } else {
+                         // If not on chatrooms view, ensure mobile only shows the active view
+                         if (isMobile) {
+                              chatroomListContainer.style.display = 'none';
+                              chatWindowContainer.style.display = 'none';
+                         } else {
+                             // Desktop views take full content area
+                         }
+                    }
+                };
+
                 window.addEventListener('resize', handleResize);
-                
-                // Initial state check
+
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
-                        const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
-                        initializeUser(address);
+                        initializeUser(wallet);
                     } else {
-                        currentUser = { address: null, username: null, balance: '...' };
+                        currentUser = { address: null, username: null, balance: null };
                         appView.style.display = 'none';
                         loginView.style.display = 'flex';
-                        // Ensure chats and messages clear on disconnect
-                        document.getElementById('chatroom-list').innerHTML = '';
-                        document.getElementById('messages-container').innerHTML = '';
-                        chatroomsData = {};
-                        usersData = [];
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                        messagePollingInterval = null;
                         activeChatroomId = null;
-                         // Reset profile view
-                         document.getElementById('my-profile-avatar-container').innerHTML = '';
-                         document.getElementById('my-profile-username').textContent = '';
-                         document.getElementById('my-profile-address').textContent = '';
-                         document.getElementById('my-profile-balance').textContent = '';
-                         document.getElementById('my-profile-qr-code').innerHTML = '';
-                         if (myProfileQrCode) {
-                              myProfileQrCode.clear();
-                              myProfileQrCode = null;
-                         }
-
+                        // Reset UI state
+                        chatPlaceholder.style.display = 'flex';
+                        activeChat.style.display = 'none';
+                         document.getElementById('chatroom-list').innerHTML = '';
+                         document.getElementById('users-list-container').innerHTML = '';
+                         // Update summary and profile
+                         updateUserInfoSummary();
+                         updateMyProfileView();
+                         // Navigate back to login on disconnect
+                         navigateToView('chatrooms-view'); // Reset active view state
                     }
                 });
 
-                 // Handle deep links/initial wallet state on page load
-                 tonConnectUI.getWallet().then(wallet => {
-                    if (wallet) {
-                         const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
-                         initializeUser(address);
-                    } else {
-                         // Show login if no wallet connected
-                         loginView.style.display = 'flex';
-                         appView.style.display = 'none';
-                    }
-                     // Set initial layout based on screen size
-                     handleResize();
-                 });
+                // Initial resize check and set default view on load
+                handleResize();
+                 if (!tonConnectUI.connected) {
+                     // Only show login if not already connected
+                     loginView.style.display = 'flex';
+                     appView.style.display = 'none';
+                 } else {
+                     // If already connected on load, trigger initialization
+                     initializeUser(tonConnectUI.wallet);
+                 }
+
 
             });
         </script>
@@ -1727,6 +1664,7 @@ def index():
     '''
     return Response(html_content, mimetype='text/html')
 
+
 @app.route('/api/user_data', methods=['POST'])
 def get_user_data():
     data = request.get_json()
@@ -1736,20 +1674,37 @@ def get_user_data():
     db = read_db()
     user_info = db['users'].get(address)
     username = user_info.get('username') if user_info else None
-    return jsonify({'username': username})
+    # Always return the address and the found username (or null)
+    return jsonify({'address': address, 'username': username})
 
 @app.route('/api/users', methods=['GET'])
 def get_users():
     db = read_db()
     users_list = []
-    for address, user_data in db['users'].items():
-        users_list.append({
-            'address': address,
-            'username': user_data.get('username')
+    for address, user_info in db['users'].items():
+         users_list.append({
+             'address': address,
+             'username': user_info.get('username') # Include username if exists
+         })
+    # Include users who might have sent messages but don't have a username set explicitly
+    # This ensures all participants in chats are listed, even if just by address
+    all_addresses = set(db['users'].keys())
+    for room_messages in db['messages'].values():
+        for msg in room_messages:
+            all_addresses.add(msg['sender_address'])
+
+    final_users_list = []
+    for address in all_addresses:
+        user_info = db['users'].get(address, {})
+        final_users_list.append({
+             'address': address,
+             'username': user_info.get('username')
         })
-    # Optionally sort users
-    users_list.sort(key=lambda x: x['username'] if x['username'] else x['address'])
-    return jsonify({'users': users_list})
+
+    # Sort by username or address
+    final_users_list.sort(key=lambda x: x['username'] or x['address'])
+
+    return jsonify({'users': final_users_list})
 
 
 @app.route('/api/set_username', methods=['POST'])
@@ -1761,13 +1716,8 @@ def set_username():
         return jsonify({'error': 'Address and username are required'}), 400
     if len(username) < 3 or len(username) > 20:
         return jsonify({'error': 'Username must be between 3 and 20 characters'}), 400
-    
-    # Check for username uniqueness (optional but good practice)
-    db = read_db()
-    for existing_address, user_data in db['users'].items():
-        if existing_address != address and user_data.get('username') == username:
-             return jsonify({'error': 'Username already taken'}), 409 # Conflict
 
+    db = read_db()
     if address not in db['users']:
         db['users'][address] = {}
     db['users'][address]['username'] = username
@@ -1794,16 +1744,15 @@ 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())
     db['chatrooms'][room_id] = {
+        'id': room_id, # Store id in object too for easier reference if needed
         'name': name,
         'creator': creator_address,
         'is_private': bool(password),
-        'password_hash': generate_password_hash(password) if password else None
+        'password_hash': generate_password_hash(password).decode('utf-8') if password else None # Ensure hash is string
     }
     db['messages'][room_id] = []
     write_db(db)
@@ -1819,7 +1768,7 @@ def join_chatroom():
     if not chatroom:
         return jsonify({'error': 'Chatroom not found'}), 404
     if chatroom['is_private']:
-        if not password or not chatroom['password_hash'] or not check_password_hash(chatroom['password_hash'], password):
+        if not password or not check_password_hash(chatroom['password_hash'], password):
             return jsonify({'error': 'Invalid password'}), 403
     return jsonify({'success': True})
 
@@ -1832,11 +1781,17 @@ def get_messages(chatroom_id):
     messages_with_names = []
     room_messages = db['messages'].get(chatroom_id, [])
     
+    # Pre-fetch usernames to avoid repeated lookups in the loop
+    user_names = {}
+    for address, user_info in db['users'].items():
+        user_names[address] = user_info.get('username')
+
     for msg in room_messages:
         sender_address = msg['sender_address']
-        user_info = db['users'].get(sender_address)
-        display_name = (user_info.get('username') if user_info and user_info.get('username') 
-                        else f"{sender_address[:4]}...{sender_address[-4:]}")
+        # Get display name, prioritize username, fall back to truncated address
+        display_name = user_names.get(sender_address)
+        if not display_name:
+             display_name = f"{sender_address[:4]}...{sender_address[-4:]}"
         
         msg_copy = msg.copy()
         msg_copy['display_name'] = display_name
@@ -1853,10 +1808,6 @@ def send_message():
 
     if not all([chatroom_id, sender_address, text]):
         return jsonify({'error': 'Missing data'}), 400
-    if not text.strip():
-         return jsonify({'error': 'Message cannot be empty'}), 400
-    if len(text) > 1000: # Simple message length limit
-         return jsonify({'error': 'Message is too long'}), 400
 
     db = read_db()
     if chatroom_id not in db['messages']:
@@ -1865,11 +1816,11 @@ def send_message():
     message = {
         'id': str(uuid.uuid4()),
         'sender_address': sender_address,
-        'text': text.strip(),
+        'text': text,
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
     
-    # Keep only the last 100 messages per chatroom
+    # Keep only the last 100 messages per room
     if len(db['messages'][chatroom_id]) >= 100:
         db['messages'][chatroom_id].pop(0)
 
@@ -1880,4 +1831,5 @@ def send_message():
 
 if __name__ == '__main__':
     init_db()
+    # Use host='0.0.0.0' for accessibility in development environments like Hugging Face Spaces
     app.run(host='0.0.0.0', port=7860)
\ No newline at end of file