Update app.py

app.py

@@ -55,7 +55,6 @@ def index():
                 --success-color: #28a745;
                 --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
-                --nav-height: 60px;
             }
 
             * {
@@ -65,9 +64,7 @@ def index():
                 -webkit-tap-highlight-color: transparent;
             }
 
-            html {
-                font-size: 16px;
-            }
+            html { font-size: 16px; }
 
             body {
                 font-family: var(--font-family);
@@ -79,7 +76,6 @@ def index():
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                position: relative; /* Needed for fixed elements positioning context */
             }
 
             .main-container {
@@ -90,7 +86,6 @@ def index():
                 transition: opacity 0.3s ease;
             }
 
-            /* --- Login View --- */
             #login-view {
                 display: flex;
                 flex-direction: column;
@@ -121,30 +116,37 @@ def index():
                 margin-bottom: 40px;
             }
 
-            /* --- App View Container --- */
             #app-view {
                 display: none;
                 width: 100%;
-                height: 100%; /* Full height initially */
+                height: 100%;
                 flex-direction: column;
-                padding-bottom: var(--nav-height); /* Space for nav bar */
             }
             
-            /* --- Content Area (Chats + Browser) --- */
-            #app-content {
-                flex-grow: 1;
+            .view-content {
+                height: calc(100% - 60px);
+                display: flex;
+                flex-direction: row;
+            }
+            .view-panel {
+                display: none;
+                height: 100%;
+                width: 100%;
+            }
+            .view-panel.active {
                 display: flex;
-                overflow: hidden; /* Prevent content overflow */
+            }
+            
+            #chat-view {
+                flex-direction: row;
             }
 
-            /* --- Chat List View --- */
             #chatroom-list-view {
                 display: flex;
                 flex-direction: column;
                 height: 100%;
-                width: 100%; /* Full width on mobile */
+                width: 100%;
                 background-color: var(--bg-secondary);
-                flex-shrink: 0;
             }
             
             .list-header {
@@ -158,10 +160,7 @@ def index():
                 align-items: center;
                 margin-bottom: 16px;
             }
-            .list-header-top h2 {
-                font-size: 1.5rem;
-                font-weight: 600;
-            }
+            .list-header-top h2 { font-size: 1.5rem; font-weight: 600; }
             
             .user-profile {
                 padding: 12px;
@@ -201,7 +200,6 @@ def index():
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
-                text-decoration: none; /* For potential links */
             }
             .action-btn:hover {
                 transform: translateY(-2px);
@@ -212,10 +210,7 @@ def index():
                 font-size: 0.9rem;
             }
             
-            #chatroom-list {
-                flex-grow: 1;
-                overflow-y: auto;
-            }
+            #chatroom-list { flex-grow: 1; overflow-y: auto; }
             .chatroom-item {
                 display: flex;
                 align-items: center;
@@ -237,12 +232,8 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                background-color: gray; /* Default */
-            }
-            .chatroom-info {
-                flex-grow: 1;
-                overflow: hidden;
             }
+            .chatroom-info { flex-grow: 1; overflow: hidden; }
             .chatroom-name {
                 font-weight: 500;
                 white-space: nowrap;
@@ -256,12 +247,11 @@ def index():
                 flex-shrink: 0;
             }
 
-            /* --- Chat Window View --- */
             #chat-window-view {
-                display: none; /* Hidden by default on mobile */
+                display: none;
                 flex-direction: column;
                 height: 100%;
-                width: 100%; /* Full width on mobile */
+                width: 100%;
                 background-color: var(--bg-primary);
             }
             
@@ -274,23 +264,9 @@ def index():
                 border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
             }
-            .back-btn {
-                background: none;
-                border: none;
-                cursor: pointer;
-                display: block; /* Visible on mobile */
-                padding: 0;
-                margin-right: 8px;
-            }
-            .back-btn svg {
-                width: 24px;
-                height: 24px;
-                fill: var(--text-primary);
-            }
-            #chat-header-title {
-                font-size: 1.2rem;
-                font-weight: 600;
-            }
+            .back-btn { background: none; border: none; cursor: pointer; display: none; }
+            .back-btn svg { width: 24px; height: 24px; fill: var(--text-primary); }
+            #chat-header-title { font-size: 1.2rem; font-weight: 600; }
 
             #messages-container {
                 flex-grow: 1;
@@ -301,21 +277,9 @@ def index():
                 gap: 12px;
             }
 
-            .message {
-                display: flex;
-                gap: 10px;
-                max-width: 80%;
-            }
-            .message .avatar {
-                width: 36px;
-                height: 36px;
-                align-self: flex-end;
-            }
-            .message-content {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-            }
+            .message { display: flex; gap: 10px; max-width: 80%; }
+            .message .avatar { width: 36px; height: 36px; align-self: flex-end; }
+            .message-content { display: flex; flex-direction: column; gap: 4px; }
             .message-sender {
                 font-size: 0.8rem;
                 font-weight: 500;
@@ -377,57 +341,93 @@ def index():
             }
             #message-input:focus { border-color: var(--accent-blue); }
 
-            .send-btn {
-                width: 44px;
-                height: 44px;
-                border-radius: 50%;
-                flex-shrink: 0;
-                padding: 0;
-            }
+            .send-btn { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; padding: 0; }
             .send-btn svg { width: 20px; height: 20px; fill: white; }
 
-            /* --- Browser View --- */
-            #browser-view {
-                display: none; /* Hidden by default */
-                flex-direction: column;
-                height: 100%;
-                width: 100%; /* Full width on mobile */
-                background-color: var(--bg-primary);
-            }
-            .browser-bar {
+            #browser-view { flex-direction: column; background-color: var(--bg-primary); }
+            .browser-header {
                 display: flex;
-                padding: 8px;
-                background-color: var(--bg-secondary);
                 gap: 8px;
+                padding: 8px 12px;
+                background-color: var(--bg-secondary);
+                border-bottom: 1px solid var(--border-color);
+                align-items: center;
                 flex-shrink: 0;
             }
-            .browser-bar input {
+            .browser-header .nav-icon-btn {
+                background: var(--bg-tertiary);
+                border-radius: 50%;
+                width: 36px;
+                height: 36px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: none;
+                cursor: pointer;
+            }
+            .browser-header .nav-icon-btn svg { fill: var(--text-primary); width: 20px; height: 20px; }
+            #url-input {
                 flex-grow: 1;
                 padding: 8px 12px;
                 border: 1px solid var(--border-color);
-                background-color: var(--bg-tertiary);
+                background-color: var(--bg-primary);
                 color: var(--text-primary);
-                border-radius: 6px;
+                border-radius: 18px;
                 outline: none;
                 font-size: 0.9rem;
             }
-            .browser-bar button {
-                padding: 8px 16px;
-                background: var(--bg-tertiary);
-                border: 1px solid var(--border-color);
-                color: var(--text-primary);
-                border-radius: 6px;
-                cursor: pointer;
-            }
             #browser-iframe {
                 flex-grow: 1;
                 border: none;
-                width: 100%;
-                height: 100%; /* Will be managed by flex-grow */
+                background-color: #fff;
             }
 
+            #bottom-nav {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 60px;
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+            }
+            .nav-btn {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 4px;
+                background: none;
+                border: none;
+                color: var(--text-secondary);
+                cursor: pointer;
+                transition: color 0.2s;
+                font-size: 0.7rem;
+                flex-grow: 1;
+                height: 100%;
+            }
+            .nav-btn svg {
+                width: 24px;
+                height: 24px;
+                fill: currentColor;
+            }
+            .nav-btn.active { color: var(--accent-blue); }
+            #nav-scan-btn {
+                transform: translateY(-15px);
+                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                border-radius: 50%;
+                width: 56px;
+                height: 56px;
+                border: 4px solid var(--bg-secondary);
+                color: white;
+                box-shadow: 0 -4px 15px rgba(0, 136, 204, 0.2);
+                flex-grow: 0;
+            }
+            #nav-scan-btn svg { width: 28px; height: 28px; }
 
-            /* --- Modals --- */
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -453,7 +453,7 @@ def index():
             }
             .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.3rem; }
             .modal-content label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-secondary); }
-            .modal-content input[type="text"], .modal-content input[type="password"] {
+            .modal-content input {
                 width: 100%;
                 padding: 12px;
                 margin-bottom: 16px;
@@ -464,119 +464,12 @@ def index():
                 font-size: 1rem;
             }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
-            .modal-btn {
-                padding: 10px 20px;
-                border-radius: 6px;
-                border: none;
-                cursor: pointer;
-                font-weight: 500;
-                transition: background-color 0.2s ease;
-            }
+            .modal-btn { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
-            .secondary-btn:hover { background-color: #3a3c44; }
             
-            #profile-modal .modal-content { text-align: center; }
-            #profile-avatar-container .avatar {
-                 width: 80px;
-                 height: 80px;
-                 font-size: 2rem;
-                 margin: 0 auto 20px;
-            }
-            #profile-qr-code {
-                background: white;
-                padding: 10px;
-                margin: 20px auto;
-                width: fit-content;
-                border-radius: 8px;
-            }
-             #profile-qr-code canvas, #profile-qr-code img { display: block; } /* Fix QRCode.js margin */
-
-            #scanner-modal .modal-content { text-align: center; }
-            #qr-reader {
-                width: 100%;
-                border: 1px solid var(--border-color);
-                margin-top: 16px;
-                border-radius: 8px;
-                overflow: hidden;
-            }
-
-            /* --- Navigation Bar --- */
-            #nav-bar {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                height: var(--nav-height);
-                background-color: var(--bg-secondary);
-                border-top: 1px solid var(--border-color);
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                z-index: 500; /* Below modals */
-                box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
-            }
-
-            .nav-item {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                padding: 8px;
-                color: var(--text-secondary);
-                font-size: 0.7rem;
-                cursor: pointer;
-                transition: color 0.2s ease;
-                width: calc(100% / 3); /* Simple distribution */
-                user-select: none;
-            }
-
-            .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 {
-                fill: var(--accent-blue-light);
-            }
-            .nav-item:hover {
-                 color: var(--text-primary);
-            }
-             .nav-item:hover svg {
-                 fill: var(--text-primary);
-            }
-
-            #nav-scanner-btn {
-                 width: 56px;
-                 height: 56px;
-                 border-radius: 50%;
-                 background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
-                 display: flex;
-                 align-items: center;
-                 justify-content: center;
-                 margin-bottom: 10px; /* Visually lift it slightly */
-                 box-shadow: 0 4px 15px rgba(0, 136, 204, 0.5);
-                 flex-shrink: 0;
-            }
-            #nav-scanner-btn svg {
-                width: 28px;
-                height: 28px;
-                fill: white;
-                margin-bottom: 0;
-            }
-            #nav-scanner-btn:active {
-                transform: scale(0.95);
-            }
-
-            /* --- Status Bar --- */
             #status-bar {
                 position: fixed;
-                bottom: calc(var(--nav-height) + 20px); /* Above nav bar */
+                bottom: 75px;
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -586,112 +479,39 @@ def index():
                 font-size: 0.9rem;
                 opacity: 0;
                 visibility: hidden;
-                transition: opacity 0.3s, visibility 0.3s;
+                transition: opacity 0.3s, visibility 0.3s, bottom 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 Media Query --- */
             @media (min-width: 768px) {
-                body {
-                    padding: 0;
-                }
                 .main-container {
-                    max-width: 1000px; /* Slightly smaller overall width */
-                    max-height: 650px; /* Reduced height */
+                    max-width: 1100px;
+                    max-height: 760px;
                     border-radius: 12px;
                     overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
-                    padding-bottom: 0; /* No padding needed on main container */
                 }
-                #app-view {
-                    flex-direction: row;
+                .view-content {
                     height: 100%;
-                    padding-bottom: 0; /* No padding needed on app-view */
-                }
-                #app-content {
-                     flex-direction: row; /* Content lays out horizontally */
-                     height: 100%;
-                     overflow: hidden;
                 }
-
                 #chatroom-list-view {
                     width: 320px;
                     flex-shrink: 0;
                     border-right: 1px solid var(--border-color);
-                    display: flex !important; /* Always visible on desktop */
-                    height: 100%; /* Takes height of app-content */
-                }
-                #chat-window-view {
-                    width: auto;
-                    flex-grow: 1;
-                    height: 100%; /* Takes height of app-content */
-                    display: flex; /* Initially visible on desktop */
-                }
-                #chat-window-view.hidden-on-desktop {
-                    display: none !important;
-                }
-                #browser-view {
-                    width: auto;
-                    flex-grow: 1;
-                    height: 100%; /* Takes height of app-content */
-                    display: none; /* Hidden initially */
-                }
-
-                .back-btn { display: none !important; } /* Hide back button on desktop */
-
-                #nav-bar {
-                     position: static; /* Integrate into the layout */
-                     height: auto;
-                     border-top: none;
-                     border-right: 1px solid var(--border-color); /* Border on the right */
-                     flex-direction: column; /* Items stack vertically */
-                     width: 80px; /* Narrow sidebar */
-                     justify-content: flex-start;
-                     padding-top: 20px;
-                     box-shadow: none;
+                    display: flex !important;
                 }
-                .nav-item {
-                    width: 100%;
-                    padding: 12px 0;
-                    margin-bottom: 10px;
-                }
-                 .nav-item svg { margin-bottom: 2px; }
-                 #nav-scanner-btn {
-                    width: 60px;
-                    height: 60px;
-                    margin-bottom: 20px;
-                    margin-top: 10px;
-                 }
-                 #nav-scanner-btn svg { width: 30px; height: 30px; }
-
-                 /* Adjust layout when browser view is active on desktop */
-                #app-content.browser-active #chatroom-list-view {
-                     display: none !important; /* Hide chat list */
-                }
-                #app-content.browser-active #browser-view {
-                     display: flex !important; /* Show browser */
-                }
-                #app-content.browser-active #chat-window-view {
-                    display: none !important; /* Hide chat window */
-                }
-
-                 /* Adjust layout when chat view is active on desktop */
-                 #app-content:not(.browser-active) #chatroom-list-view {
-                     display: flex !important; /* Show chat list */
-                 }
-                 #app-content:not(.browser-active) #chat-window-view {
-                     display: flex !important; /* Show chat window */
-                 }
-                 #app-content:not(.browser-active) #browser-view {
-                     display: none !important; /* Hide browser */
-                 }
+                #chat-window-view { width: auto; flex-grow: 1; display: flex !important; }
+                #chat-window-view.hidden-on-desktop { display: flex !important; }
+                .back-btn { display: none !important; }
+                #bottom-nav { display: none; }
+                #status-bar { bottom: 20px; }
+                 #chat-view.active { display: flex; }
+                 #browser-view.active { display: flex; }
             }
         </style>
     </head>
@@ -705,78 +525,82 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <div id="nav-bar">
-                 <div class="nav-item active" id="nav-chats">
-                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM5.67 14l-.67.67V6h14v8H6.33L5.67 14z"/></svg>
-                     <span>Чаты</span>
-                 </div>
-                 <div class="nav-item" id="nav-scanner-btn" title="Сканировать QR">
-                     <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
-                 </div>
-                 <div class="nav-item" id="nav-browser">
-                      <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.42,0-8-3.58-8-8 c0-1.85,0.63-3.55,1.69-4.9L12,12l6.31-4.9C15.55,4.63,13.85,4,12,4c-4.42,0-8,3.58-8,8c0,4.42,3.58,8,8,8s8-3.58,8-8 c0-1.85-0.63-3.55-1.69-4.9L12,12l5.69-4.42C18.61,8.37,19,10.12,19,12C19,16.42,15.42,20,12,20z"/></g></g></svg>
-                     <span>Браузер</span>
-                 </div>
-                 <div class="nav-item" id="nav-profile">
-                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                     <span>Профиль</span>
-                 </div>
-            </div>
+            <div class="view-content">
+                <div id="chat-view" class="view-panel active">
+                    <div id="chatroom-list-view">
+                        <div class="list-header">
+                            <div class="list-header-top">
+                                <h2>Чаты</h2>
+                                <div style="display: flex; align-items: center; gap: 8px;">
+                                    <button id="my-profile-btn" class="action-btn small" title="Мой профиль">
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                                    </button>
+                                    <button id="create-room-show-modal" class="action-btn small">
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                                        <span>Новый</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="user-profile">
+                                <div id="user-wallet"></div>
+                                <div id="user-nickname"></div>
+                                <form class="username-form" id="username-form">
+                                    <input type="text" id="username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
+                                    <button type="submit" class="action-btn small">✓</button>
+                                </form>
+                            </div>
+                        </div>
+                        <div id="chatroom-list"></div>
+                    </div>
 
-            <div id="app-content">
-                 <div id="chatroom-list-view">
-                    <div class="list-header">
-                        <div class="list-header-top">
-                            <h2>Чаты</h2>
-                            <button id="create-room-show-modal" class="action-btn small">
-                                <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-                                <span>Новый</span>
-                            </button>
+                    <div id="chat-window-view" class="hidden-on-desktop">
+                        <div id="chat-placeholder" class="chat-placeholder">
+                            <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                            <h2>Выберите чат</h2>
+                            <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
                         </div>
-                        <div class="user-profile">
-                            <div id="user-wallet"></div>
-                            <div id="user-nickname"></div>
-                            <form class="username-form" id="username-form">
-                                <input type="text" id="username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off" maxlength="20">
-                                <button type="submit" class="action-btn small">✓</button>
+                        <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
+                            <div class="chat-header">
+                                <button class="back-btn" id="back-to-list-btn">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                                </button>
+                                <div id="chat-header-avatar" class="avatar"></div>
+                                <span id="chat-header-title"></span>
+                            </div>
+                            <div id="messages-container"></div>
+                            <form id="message-form" class="message-form">
+                                <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
+                                <button type="submit" class="action-btn send-btn" id="send-btn">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+                                </button>
                             </form>
                         </div>
                     </div>
-                    <div id="chatroom-list"></div>
                 </div>
-
-                <div id="chat-window-view" class="hidden-on-desktop">
-                    <div id="chat-placeholder" class="chat-placeholder">
-                        <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
-                        <h2>Выберите чат</h2>
-                        <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
-                    </div>
-                    <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
-                        <div class="chat-header">
-                            <button class="back-btn" id="back-to-list-btn">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
-                            </button>
-                            <div id="chat-header-avatar" class="avatar"></div>
-                            <span id="chat-header-title"></span>
-                        </div>
-                        <div id="messages-container"></div>
-                        <form id="message-form" class="message-form">
-                            <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
-                            <button type="submit" class="action-btn send-btn" id="send-btn">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
-                            </button>
-                        </form>
+                 <div id="browser-view" class="view-panel">
+                    <div class="browser-header">
+                        <button id="browser-back" class="nav-icon-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></button>
+                        <button id="browser-forward" class="nav-icon-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg></button>
+                        <button id="browser-reload" class="nav-icon-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg></button>
+                        <form id="url-form" style="flex-grow: 1; display: flex;"><input type="text" id="url-input" placeholder="Поиск или адрес" value="https://www.google.com"></form>
                     </div>
-                </div>
-
-                <div id="browser-view">
-                    <form class="browser-bar" id="browser-form">
-                         <input type="text" id="browser-url-input" value="https://www.google.com" placeholder="Введите URL или поисковый запрос">
-                         <button type="submit">Перейти</button>
-                    </form>
-                    <iframe id="browser-iframe" src="https://www.google.com"></iframe>
+                    <iframe id="browser-iframe" src="https://www.google.com/webhp?igu=1"></iframe>
                 </div>
             </div>
+
+            <nav id="bottom-nav">
+                <button id="nav-chat-btn" class="nav-btn active">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
+                    <span>Чаты</span>
+                </button>
+                <button id="nav-scan-btn" class="nav-btn">
+                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
+                </button>
+                <button id="nav-browser-btn" class="nav-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v-.07zM12 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm7.93-1L15 15v-1c0-1.1-.9-2-2-2V9c0-1.1.9-2 2-2h3.03c.52 1.25.8 2.58.8 4 0 3.95-3.05 7.23-7 7.93v-2.02c1.9-.42 3.48-1.73 4.19-3.45l-2.19-.9v.01z"/></svg>
+                    <span>Браузер</span>
+                </button>
+            </nav>
         </div>
         
         <div id="create-room-modal" class="modal-overlay">
@@ -810,12 +634,12 @@ def index():
         </div>
 
         <div id="profile-modal" class="modal-overlay">
-            <div class="modal-content">
+            <div class="modal-content" style="text-align: center;">
                 <h3 id="profile-modal-title">Профиль пользователя</h3>
-                <div id="profile-avatar-container"></div>
-                <p id="profile-username"></p>
-                <p id="profile-address"></p>
-                <div id="profile-qr-code"></div>
+                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
+                <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
+                <p id="profile-address" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
+                <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
                 <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px;">Отсканируйте для открытия профиля</p>
                 <div class="modal-actions" style="flex-direction: column; gap: 12px; align-items: stretch;">
                     <button id="send-ton-btn" class="modal-btn action-btn">Отправить TON</button>
@@ -827,7 +651,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader"></div>
+                <div id="qr-reader" style="width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></div>
                 <div class="modal-actions">
                     <button id="scanner-close-btn" class="modal-btn secondary-btn">Отмена</button>
                 </div>
@@ -849,23 +673,13 @@ def index():
                 let chatroomsData = {};
                 let html5QrCode = null;
                 let profileQrCode = null;
-                let currentMainView = 'chatList'; // 'chatList', 'chatWindow', 'browser'
-
+                
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
-                const appContent = document.getElementById('app-content');
                 const chatroomListView = document.getElementById('chatroom-list-view');
                 const chatWindowView = document.getElementById('chat-window-view');
                 const chatPlaceholder = document.getElementById('chat-placeholder');
                 const activeChat = document.getElementById('active-chat');
-                const browserView = document.getElementById('browser-view');
-
-                const navChatsBtn = document.getElementById('nav-chats');
-                const navScannerBtn = document.getElementById('nav-scanner-btn');
-                const navBrowserBtn = document.getElementById('nav-browser');
-                const navProfileBtn = document.getElementById('nav-profile');
-                const navItems = [navChatsBtn, navBrowserBtn, navProfileBtn];
-
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
 
@@ -924,10 +738,6 @@ def index():
                     if (!newUsername || newUsername.length < 3) {
                         showStatus('Никнейм должен быть не короче 3 символов.', 'error');
                         return;
-                    }
-                     if (newUsername.length > 20) {
-                        showStatus('Никнейм должен быть не длиннее 20 символов.', 'error');
-                        return;
                     }
                     try {
                         await apiCall('/api/set_username', {
@@ -939,7 +749,7 @@ def index():
                         updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
                         fetchChatrooms();
-                        if (activeChatroomId) fetchMessages(activeChatroomId);
+                        if (activeChatroomId) fetchMessages(activeChatroomId); 
                     } catch (err) {}
                 });
 
@@ -953,13 +763,13 @@ def index():
                         });
                         currentUser.username = data.username;
                     } catch (err) {
-                        currentUser.username = null; // User might not exist yet
+                        currentUser.username = null;
                     }
                     updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
-                    showView('chatList'); // Default view after login
                     fetchChatrooms();
+                    switchView('chat-view');
                 };
 
                 const renderChatrooms = (rooms) => {
@@ -1002,8 +812,7 @@ def index():
 
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
-                    // Check if user is near the bottom before rendering
-                    const isScrolledToBottom = container.scrollHeight - container.clientHeight <= container.scrollTop + 1;
+                    const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 30;
                     container.innerHTML = '';
                     messages.forEach(msg => {
                         const msgDiv = document.createElement('div');
@@ -1034,60 +843,32 @@ def index():
                         container.appendChild(msgDiv);
                     });
 
-                     // Scroll to bottom only if they were already there
-                    if (isScrolledToBottom || messages.length === 0) {
+                    if(shouldScroll) {
                         container.scrollTop = container.scrollHeight;
                     }
                 };
                 
                 const fetchMessages = async (roomId) => {
-                    if (!roomId) return;
                     try {
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                         // Error handling already in apiCall
+                        if (messagePollingInterval) clearInterval(messagePollingInterval);
                     }
                 };
-
-                const showView = (viewName) => {
-                    // Hide all main views
-                    chatroomListView.style.display = 'none';
-                    chatWindowView.style.display = 'none';
-                    browserView.style.display = 'none';
-
-                    // Remove active class from all nav items
-                    navItems.forEach(item => item.classList.remove('active'));
-                    appContent.classList.remove('browser-active'); // Remove browser layout class
-
-                    // Show the requested view and set active nav item
-                    if (viewName === 'chatList') {
-                        chatroomListView.style.display = 'flex';
-                        navChatsBtn.classList.add('active');
-                         if (window.innerWidth >= 768) {
-                             chatWindowView.style.display = 'flex'; // Show window alongside list on desktop
-                         }
-                    } else if (viewName === 'chatWindow') {
-                        chatWindowView.style.display = 'flex';
-                        navChatsBtn.classList.add('active');
-                         if (window.innerWidth >= 768) {
-                              chatroomListView.style.display = 'flex'; // Show list alongside window on desktop
-                         }
-                    } else if (viewName === 'browser') {
-                        browserView.style.display = 'flex';
-                        navBrowserBtn.classList.add('active');
-                         if (window.innerWidth >= 768) {
-                              appContent.classList.add('browser-active'); // Apply browser layout class
-                         }
+                
+                const showChatView = () => {
+                    chatWindowView.style.display = 'flex';
+                    if (window.innerWidth < 768) {
+                        chatroomListView.style.display = 'none';
                     }
+                };
 
-                    currentMainView = viewName;
-
-                    // Hide modals
-                    profileModal.style.display = 'none';
-                    scannerModal.style.display = 'none';
-                    document.getElementById('create-room-modal').style.display = 'none';
-                    document.getElementById('password-modal').style.display = 'none';
+                const showListView = () => {
+                    chatroomListView.style.display = 'flex';
+                    if (window.innerWidth < 768) {
+                        chatWindowView.style.display = 'none';
+                    }
                 };
 
                 const selectChatroom = (roomId, isPrivate) => {
@@ -1105,8 +886,8 @@ def index():
 
                         chatPlaceholder.style.display = 'none';
                         activeChat.style.display = 'flex';
+                        showChatView();
                         
-                        showView('chatWindow'); // Switch to chat window view
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
                     };
@@ -1131,10 +912,7 @@ def index():
                                     body: JSON.stringify({ chatroom_id: roomId, password })
                                 });
                                 proceedToRoom();
-                            } catch (err) {
-                                // Error is shown in apiCall
-                                // Re-open password modal or handle error? For now, just error status.
-                            }
+                            } catch (err) {}
                         };
                         passwordForm.addEventListener('submit', formSubmitHandler);
 
@@ -1152,8 +930,7 @@ def index():
                     const input = document.getElementById('message-input');
                     const sendBtn = document.getElementById('send-btn');
                     const text = input.value.trim();
-                    if (text && activeChatroomId && currentUser.address) {
-                         if (messagePollingInterval) clearInterval(messagePollingInterval); // Pause polling while sending
+                    if (text && activeChatroomId) {
                         input.value = '';
                         input.disabled = true;
                         sendBtn.disabled = true;
@@ -1167,12 +944,12 @@ def index():
                                     text: text
                                 })
                             });
-                            await fetchMessages(activeChatroomId); // Fetch updated messages immediately
+                            await fetchMessages(activeChatroomId);
+                            document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
                         } finally {
                             input.disabled = false;
                             sendBtn.disabled = false;
                             input.focus();
-                            messagePollingInterval = setInterval(() => fetchMessages(activeChatroomId), 3000); // Resume polling
                         }
                     }
                 });
@@ -1181,7 +958,6 @@ def index():
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
-                     document.getElementById('room-name').focus();
                 });
                 document.getElementById('create-room-cancel').addEventListener('click', () => {
                     createRoomModal.style.display = 'none';
@@ -1190,10 +966,7 @@ def index():
                     e.preventDefault();
                     const name = document.getElementById('room-name').value.trim();
                     const password = document.getElementById('room-password').value;
-                    if (!name) {
-                        showStatus('Название чата обязательно.', 'error');
-                        return;
-                    }
+                    if (!name) return;
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -1208,7 +981,6 @@ def index():
                 });
 
                 const showProfile = async (address) => {
-                     if (!address) return;
                     try {
                         const userData = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -1216,14 +988,12 @@ 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');
-
-                        document.getElementById('profile-modal-title').textContent = (address === currentUser.address) ? 'Мой профиль' : 'Профиль пользователя';
                         
                         avatarContainer.innerHTML = '';
                         avatarContainer.appendChild(getAvatar(username));
@@ -1232,9 +1002,7 @@ def index():
                         addressEl.textContent = address;
                         
                         qrCodeEl.innerHTML = '';
-                        if (profileQrCode) {
-                            profileQrCode.clear();
-                        }
+                        if (profileQrCode) profileQrCode.clear();
                         profileQrCode = new QRCode(qrCodeEl, {
                             text: address,
                             width: 150,
@@ -1249,7 +1017,7 @@ def index():
                                 showStatus('Подключите кошелек для отправки TON.', 'error');
                                 return;
                             }
-                             const amountString = prompt(`Введите сумму в TON для отправки на адрес ${truncateAddress(address)}:`, "0.1");
+                            const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
                             if (amountString === null) return;
                             
                             const amount = parseFloat(amountString);
@@ -1258,57 +1026,44 @@ def index():
                                 return;
                             }
                             
-                            // Convert TON to nanoTON
-                            const amountInNanoTon = (amount * 1_000_000_000).toFixed(0); // Use toFixed(0) to avoid scientific notation for large numbers
+                            const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
 
                             const transaction = {
-                                validUntil: Math.floor(Date.now() / 1000) + 600, // 10 minutes validity
+                                validUntil: Math.floor(Date.now() / 1000) + 600,
                                 messages: [ { address: address, amount: amountInNanoTon } ]
                             };
 
                             try {
-                                const result = await tonConnectUI.sendTransaction(transaction);
-                                showStatus(`Транзакция успешно отправлена: ${result.boc}`, 'success');
-                                // Optional: Close modal after success
+                                await tonConnectUI.sendTransaction(transaction);
+                                showStatus(`Транзакция отправлена успешно!`, 'success');
                                 profileModal.style.display = 'none';
                             } catch (error) {
-                                if (error.message.includes('User rejected the action')) {
-                                     showStatus('Транзакция отменена пользователем.', 'info');
-                                } else {
-                                     showStatus('Ошибка отправки транзакции.', 'error');
-                                     console.error("Send transaction failed:", error);
-                                }
+                                showStatus('Транзакция отклонена.', 'error');
                             }
                         };
                         
-                        sendTonBtn.style.display = (address === currentUser.address || !tonConnectUI.connected) ? 'none' : 'flex'; // Hide send button for own profile or if not connected
+                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
                         profileModal.style.display = 'flex';
                     } catch (err) {
-                         // Error status already shown by apiCall
-                         showStatus('Не удалось загрузить профиль.', 'error');
+                        showStatus('Не удалось загрузить профиль.', 'error');
                     }
                 };
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    // Ensure qr-reader div is empty before starting
-                     document.getElementById('qr-reader').innerHTML = '';
-
                     html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                         hideScanner();
-                        // Basic check for potential TON address format (EQ/UQ + length)
                         if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                             showProfile(decodedText); // Show profile of the scanned address
+                            showProfile(decodedText);
                         } else {
-                            showStatus('Отсканирован недействительный QR-код (не похож на TON адрес).', 'error');
+                            showStatus('Отсканирован недействительный QR-код.', 'error');
                         }
                     };
                     const config = { fps: 10, qrbox: { width: 250, height: 250 } };
                     html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
                             showStatus('Не удалось запустить сканер.', 'error');
-                            console.error("QR Scanner start failed:", err);
                             hideScanner();
                         });
                 };
@@ -1320,96 +1075,91 @@ def index():
                     scannerModal.style.display = 'none';
                 };
                 
-                // --- Event Listeners ---
-                
-                // Navigation Buttons
-                navChatsBtn.addEventListener('click', () => showView('chatList'));
-                navBrowserBtn.addEventListener('click', () => showView('browser'));
-                navProfileBtn.addEventListener('click', () => {
-                     if (currentUser.address) showProfile(currentUser.address);
-                     // No showView call here, profile is a modal over the current view
+                document.getElementById('my-profile-btn').addEventListener('click', () => {
+                    if (currentUser.address) showProfile(currentUser.address);
                 });
-                navScannerBtn.addEventListener('click', showScanner); // Scanner is also a modal
-
-                // Back button (mobile chat view)
-                document.getElementById('back-to-list-btn').addEventListener('click', () => {
-                     if (messagePollingInterval) clearInterval(messagePollingInterval);
-                     activeChatroomId = null;
-                     showView('chatList');
-                     chatPlaceholder.style.display = 'flex'; // Show placeholder again
-                     activeChat.style.display = 'none';
-                });
-
-                // Modal Close Buttons
                 document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
                 document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
-
-                // Browser URL form
-                document.getElementById('browser-form').addEventListener('submit', (e) => {
-                     e.preventDefault();
-                     const urlInput = document.getElementById('browser-url-input');
-                     let url = urlInput.value.trim();
-
-                     if (url) {
-                         // Simple check: if it doesn't look like a URL (doesn't contain .), assume it's a search term
-                         if (!url.includes('.') && !url.startsWith('http://') && !url.startsWith('https://')) {
-                             url = 'https://www.google.com/search?q=' + encodeURIComponent(url);
-                         } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                              // If it looks like a domain but no protocol, add https
-                             url = 'https://' + url;
-                         }
-                         document.getElementById('browser-iframe').src = url;
-                         urlInput.value = url; // Update input with the corrected URL
-                     }
-                });
-
-
-                // Handle resize events for responsive layout
+                document.getElementById('back-to-list-btn').addEventListener('click', showListView);
+                
                 const handleResize = () => {
                     const isMobile = window.innerWidth < 768;
-                    
-                    // Update display of back button based on mobile/desktop
                     document.getElementById('back-to-list-btn').style.display = isMobile ? 'block' : 'none';
-
-                    // Re-apply the current main view based on new screen size
-                    // This ensures correct visibility of list/window side-by-side or stacked
-                    showView(currentMainView);
-
-                    // Ensure modals are centered correctly on resize
-                    // This is often handled by flexbox centering, but could add specific logic if needed.
+                    if (!isMobile) {
+                        chatroomListView.style.display = 'flex';
+                        chatWindowView.style.display = 'flex';
+                    } else {
+                         if (document.querySelector('.view-panel.active').id === 'chat-view') {
+                            if (activeChat.style.display === 'flex') {
+                                chatroomListView.style.display = 'none';
+                            } else {
+                                chatWindowView.style.display = 'none';
+                                chatroomListView.style.display = 'flex';
+                            }
+                        }
+                    }
                 };
 
                 window.addEventListener('resize', handleResize);
-
-                // Initial check for screen size layout
                 handleResize();
 
-                // --- TON Connect Integration ---
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
-                        // Wallet connected
-                        const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false); // Get base64 address
+                        const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
                         initializeUser(address);
                     } else {
-                        // Wallet disconnected
                         currentUser = { address: null, username: null };
                         appView.style.display = 'none';
                         loginView.style.display = 'flex';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
-                        messagePollingInterval = null;
                         activeChatroomId = null;
-                         // Reset views to default mobile state on logout
-                         chatroomListView.style.display = 'flex';
-                         chatWindowView.style.display = 'none';
-                         browserView.style.display = 'none';
-                         navItems.forEach(item => item.classList.remove('active'));
-                         navChatsBtn.classList.add('active');
-                         currentMainView = 'chatList';
-                         appContent.classList.remove('browser-active');
-                         document.getElementById('chat-placeholder').style.display = 'flex';
-                         document.getElementById('active-chat').style.display = 'none';
                     }
                 });
+
+                const viewPanels = document.querySelectorAll('.view-panel');
+                const navButtons = document.querySelectorAll('.nav-btn');
+
+                function switchView(targetViewId) {
+                    viewPanels.forEach(panel => {
+                        panel.classList.remove('active');
+                    });
+                    document.getElementById(targetViewId).classList.add('active');
+
+                    navButtons.forEach(btn => {
+                        btn.classList.remove('active');
+                        if (btn.id === `nav-${targetViewId.split('-')[0]}-btn`) {
+                           btn.classList.add('active');
+                        }
+                    });
+                    handleResize();
+                }
+                
+                document.getElementById('nav-chat-btn').addEventListener('click', () => switchView('chat-view'));
+                document.getElementById('nav-browser-btn').addEventListener('click', () => switchView('browser-view'));
+                document.getElementById('nav-scan-btn').addEventListener('click', showScanner);
+
+                const browserIframe = document.getElementById('browser-iframe');
+                const urlForm = document.getElementById('url-form');
+                const urlInput = document.getElementById('url-input');
+
+                urlForm.addEventListener('submit', (e) => {
+                    e.preventDefault();
+                    let url = urlInput.value.trim();
+                    if (!url) return;
+                    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                        if (url.includes('.') && !url.includes(' ')) {
+                           url = 'https://' + url;
+                        } else {
+                           url = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
+                        }
+                    }
+                    browserIframe.src = url;
+                });
+                
+                document.getElementById('browser-back').onclick = () => { try { browserIframe.contentWindow.history.back(); } catch(e){} };
+                document.getElementById('browser-forward').onclick = () => { try { browserIframe.contentWindow.history.forward(); } catch(e){} };
+                document.getElementById('browser-reload').onclick = () => { try { browserIframe.contentWindow.location.reload(); } catch(e){} };
+
             });
         </script>
     </body>
@@ -1425,8 +1175,8 @@ def get_user_data():
     if not address:
         return jsonify({'error': 'Address is required'}), 400
     db = read_db()
-    user_info = db['users'].get(address, {}) # Return empty dict if user not found
-    username = user_info.get('username')
+    user_info = db['users'].get(address)
+    username = user_info.get('username') if user_info else None
     return jsonify({'username': username})
 
 @app.route('/api/set_username', methods=['POST'])
@@ -1456,7 +1206,7 @@ def get_chatrooms():
             'name': room_data['name'],
             'is_private': room_data['is_private']
         })
-    return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'].lower())}) # Sort by name case-insensitively
+    return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
 
 @app.route('/api/create_chatroom', methods=['POST'])
 def create_chatroom():
@@ -1466,17 +1216,8 @@ def create_chatroom():
     creator_address = data.get('creator_address')
     if not name or not creator_address:
         return jsonify({'error': 'Name and creator address are required'}), 400
-    if len(name) < 1 or len(name) > 50:
-         return jsonify({'error': 'Chatroom name must be between 1 and 50 characters'}), 400
-    if password and len(password) < 4:
-         return jsonify({'error': 'Password must be at least 4 characters long'}), 400
 
     db = read_db()
-    # Optional: Check for duplicate names (though UUID makes ID unique)
-    # for room_data in db['chatrooms'].values():
-    #     if room_data['name'] == name:
-    #         return jsonify({'error': 'Chatroom with this name already exists'}), 400
-
     room_id = str(uuid.uuid4())
     db['chatrooms'][room_id] = {
         'name': name,
@@ -1506,34 +1247,19 @@ def join_chatroom():
 def get_messages(chatroom_id):
     db = read_db()
     if chatroom_id not in db['messages']:
-        # Return empty list if chatroom exists but has no messages,
-        # or 404 if chatroom ID is invalid. Let's assume 404 is safer
-        # if the chatroom itself isn't in the chatrooms list.
-        if chatroom_id not in db['chatrooms']:
-             return jsonify({'error': 'Chatroom not found'}), 404
-         # If chatroom exists but messages list is missing (shouldn't happen with init_db)
-         # db['messages'][chatroom_id] = [] # Could auto-create
-         # return jsonify({'messages': []})
-         # Or simply return empty list if key exists but value is empty/null
-         pass # Proceed to fetch messages
-
+        return jsonify({'error': 'Chatroom not found'}), 404
+    
     messages_with_names = []
     room_messages = db['messages'].get(chatroom_id, [])
-
-    # Cache usernames for this request to avoid repeated lookups
-    user_cache = {}
     
     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:]}")
         
-        if sender_address not in user_cache:
-             user_info = db['users'].get(sender_address)
-             display_name = (user_info.get('username') if user_info and user_info.get('username') 
-                             else f"{sender_address[:4]}...{sender_address[-4:]}")
-             user_cache[sender_address] = display_name
-
         msg_copy = msg.copy()
-        msg_copy['display_name'] = user_cache[sender_address]
+        msg_copy['display_name'] = display_name
         messages_with_names.append(msg_copy)
 
     return jsonify({'messages': messages_with_names})
@@ -1547,21 +1273,10 @@ def send_message():
 
     if not all([chatroom_id, sender_address, text]):
         return jsonify({'error': 'Missing data'}), 400
-    
-    text = text.strip()
-    if not text: # Prevent sending empty messages
-        return jsonify({'error': 'Message cannot be empty'}), 400
-    
-    if len(text) > 1000: # Limit message length
-         return jsonify({'error': 'Message is too long'}), 400
-
 
     db = read_db()
     if chatroom_id not in db['messages']:
-         if chatroom_id not in db['chatrooms']:
-             return jsonify({'error': 'Chatroom not found'}), 404
-         db['messages'][chatroom_id] = [] # Auto-create messages list if missing
-
+        return jsonify({'error': 'Chatroom not found'}), 404
 
     message = {
         'id': str(uuid.uuid4()),
@@ -1570,7 +1285,6 @@ def send_message():
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
     
-    # Keep only the last 100 messages per chatroom
     if len(db['messages'][chatroom_id]) >= 100:
         db['messages'][chatroom_id].pop(0)
 
@@ -1581,4 +1295,4 @@ def send_message():
 
 if __name__ == '__main__':
     init_db()
-    app.run(host='0.0.0.0', port=7860, debug=True) # Enabled debug for development
+    app.run(host='0.0.0.0', port=7860)