Update app.py

app.py

@@ -19,12 +19,8 @@ def init_db():
             }, f, indent=4)
 
 def read_db():
-    try:
-        with open(DB_FILE, 'r') as f:
-            return json.load(f)
-    except (FileNotFoundError, json.JSONDecodeError):
-        init_db()
-        return read_db()
+    with open(DB_FILE, 'r') as f:
+        return json.load(f)
 
 def write_db(data):
     with open(DB_FILE, 'w') as f:
@@ -47,21 +43,19 @@ def index():
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
         <style>
             :root {
-                --bg-primary: #0D1117; /* Deep Space */
-                --bg-secondary: #161B22; /* Darker Grey */
-                --bg-tertiary: #21262D; /* Slightly lighter grey */
-                --bg-hover: #30363D;    /* Hover state */
-                --text-primary: #C9D1D9; /* Light Grey */
-                --text-secondary: #8B949E; /* Muted Grey */
-                --accent-blue: #0077CC;  /* TON Blue */
-                --accent-blue-light: #33AADD; /* Lighter TON Blue */
-                --accent-purple: #6F42C1; /* Purple accent (optional) */
-                --border-color: #30363D; /* Border grey */
-                --success-color: #238636; /* Green */
-                --error-color: #DA3633; /* Red */
+                --bg-primary: #0F0F11;
+                --bg-secondary: #18191C;
+                --bg-tertiary: #212328;
+                --bg-hover: #2A2C33;
+                --text-primary: #EAECEF;
+                --text-secondary: #8E9297;
+                --accent-blue: #0088CC;
+                --accent-blue-light: #33AADD;
+                --border-color: #2D2F34;
+                --success-color: #28a745;
+                --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
-                --header-height: 56px;
-                --footer-height: 60px;
+                --nav-height: 60px;
             }
 
             * {
@@ -83,7 +77,9 @@ def index():
                 height: 100vh;
                 width: 100vw;
                 display: flex;
-                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                position: relative; /* Needed for fixed elements positioning context */
             }
 
             .main-container {
@@ -94,24 +90,25 @@ def index():
                 transition: opacity 0.3s ease;
             }
 
+            /* --- Login View --- */
             #login-view {
-                flex-grow: 1;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
                 text-align: center;
-                padding: 20px;
+                width: 100%;
+                height: 100%;
                 background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
             }
             #login-view img {
                 width: 100px;
                 height: 100px;
                 margin-bottom: 24px;
-                filter: drop-shadow(0 0 20px rgba(0, 136, 204, 0.6));
+                filter: drop-shadow(0 0 15px rgba(0, 136, 204, 0.5));
             }
             #login-view h1 {
-                font-size: 3rem;
+                font-size: 2.8rem;
                 font-weight: 700;
                 background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
                 -webkit-background-clip: text;
@@ -119,41 +116,35 @@ def index():
                 margin-bottom: 12px;
             }
             #login-view p {
-                font-size: 1.2rem;
+                font-size: 1.1rem;
                 color: var(--text-secondary);
                 margin-bottom: 40px;
             }
 
+            /* --- App View Container --- */
             #app-view {
-                display: none; /* Managed by JS */
-                flex-grow: 1;
-                flex-direction: column;
-            }
-
-            .app-content {
-                 flex-grow: 1;
-                 position: relative; /* For absolute positioning of views */
-                 overflow: hidden; /* Hide overflow when views are positioned */
-            }
-
-            .view {
-                position: absolute;
-                top: 0;
-                left: 0;
+                display: none;
                 width: 100%;
-                height: 100%;
-                display: none; /* Initially hidden */
+                height: 100%; /* Full height initially */
                 flex-direction: column;
-                background-color: var(--bg-primary); /* Default background */
-                overflow-y: hidden; /* Prevent double scroll bars */
-            }
-
-            .view.active {
-                display: flex; /* Show active view */
+                padding-bottom: var(--nav-height); /* Space for nav bar */
             }
             
+            /* --- Content Area (Chats + Browser) --- */
+            #app-content {
+                flex-grow: 1;
+                display: flex;
+                overflow: hidden; /* Prevent content overflow */
+            }
+
+            /* --- Chat List View --- */
             #chatroom-list-view {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                width: 100%; /* Full width on mobile */
                 background-color: var(--bg-secondary);
+                flex-shrink: 0;
             }
             
             .list-header {
@@ -210,7 +201,7 @@ def index():
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
-                text-decoration: none; /* For anchor tags acting as buttons */
+                text-decoration: none; /* For potential links */
             }
             .action-btn:hover {
                 transform: translateY(-2px);
@@ -220,12 +211,6 @@ def index():
                 padding: 8px 12px;
                 font-size: 0.9rem;
             }
-             .action-btn:disabled {
-                opacity: 0.5;
-                cursor: not-allowed;
-                transform: none;
-                box-shadow: none;
-            }
             
             #chatroom-list {
                 flex-grow: 1;
@@ -252,8 +237,7 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                text-transform: uppercase;
-                user-select: none;
+                background-color: gray; /* Default */
             }
             .chatroom-info {
                 flex-grow: 1;
@@ -272,8 +256,13 @@ def index():
                 flex-shrink: 0;
             }
 
+            /* --- Chat Window View --- */
             #chat-window-view {
-                 background-color: var(--bg-primary);
+                display: none; /* Hidden by default on mobile */
+                flex-direction: column;
+                height: 100%;
+                width: 100%; /* Full width on mobile */
+                background-color: var(--bg-primary);
             }
             
             .chat-header {
@@ -289,10 +278,9 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: none; /* Managed by JS/CSS */
+                display: block; /* Visible on mobile */
                 padding: 0;
-                width: 24px;
-                height: 24px;
+                margin-right: 8px;
             }
             .back-btn svg {
                 width: 24px;
@@ -316,11 +304,11 @@ def index():
             .message {
                 display: flex;
                 gap: 10px;
-                max-width: 85%; /* Increased max width */
+                max-width: 80%;
             }
             .message .avatar {
-                width: 32px; /* Slightly smaller avatar in chat */
-                height: 32px;
+                width: 36px;
+                height: 36px;
                 align-self: flex-end;
             }
             .message-content {
@@ -329,7 +317,7 @@ def index():
                 gap: 4px;
             }
             .message-sender {
-                font-size: 0.85rem; /* Slightly larger sender name */
+                font-size: 0.8rem;
                 font-weight: 500;
                 color: var(--text-secondary);
                 word-break: break-all;
@@ -340,7 +328,6 @@ def index():
                 border-radius: 18px;
                 line-height: 1.4;
                 word-wrap: break-word;
-                font-size: 1rem;
             }
 
             .message.sent { align-self: flex-end; flex-direction: row-reverse; }
@@ -358,20 +345,20 @@ def index():
             }
             
             .chat-placeholder {
-                flex-grow: 1; /* Take full space */
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
+                height: 100%;
                 text-align: center;
                 color: var(--text-secondary);
                 padding: 20px;
             }
-            .chat-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; filter: grayscale(100%); }
+            .chat-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; }
 
             .message-form {
                 display: flex;
-                padding: 12px 16px; /* Reduced padding */
+                padding: 16px;
                 gap: 12px;
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
@@ -379,7 +366,7 @@ def index():
             }
             #message-input {
                 flex-grow: 1;
-                padding: 10px 14px; /* Adjusted padding */
+                padding: 12px 16px;
                 border: 1px solid var(--border-color);
                 background-color: var(--bg-tertiary);
                 color: var(--text-primary);
@@ -391,92 +378,56 @@ def index():
             #message-input:focus { border-color: var(--accent-blue); }
 
             .send-btn {
-                width: 40px; /* Adjusted size */
-                height: 40px;
+                width: 44px;
+                height: 44px;
                 border-radius: 50%;
                 flex-shrink: 0;
                 padding: 0;
             }
-            .send-btn svg { width: 18px; height: 18px; fill: white; } /* Adjusted icon size */
+            .send-btn svg { width: 20px; height: 20px; fill: white; }
 
+            /* --- Browser View --- */
             #browser-view {
-                 background-color: var(--bg-secondary);
-            }
-            #browser-view iframe {
-                 width: 100%;
-                 height: 100%;
-                 border: none;
+                display: none; /* Hidden by default */
+                flex-direction: column;
+                height: 100%;
+                width: 100%; /* Full width on mobile */
+                background-color: var(--bg-primary);
             }
-
-            #bottom-nav {
+            .browser-bar {
                 display: flex;
-                justify-content: space-around;
-                align-items: center;
-                height: var(--footer-height);
+                padding: 8px;
                 background-color: var(--bg-secondary);
-                border-top: 1px solid var(--border-color);
+                gap: 8px;
                 flex-shrink: 0;
-                padding: 0 10px;
             }
-
-            .nav-item {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                padding: 8px 10px;
-                cursor: pointer;
-                color: var(--text-secondary);
-                font-size: 0.75rem;
-                font-weight: 500;
-                text-decoration: none;
-                transition: color 0.2s ease;
-            }
-            .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);
+            .browser-bar input {
+                flex-grow: 1;
+                padding: 8px 12px;
+                border: 1px solid var(--border-color);
+                background-color: var(--bg-tertiary);
+                color: var(--text-primary);
+                border-radius: 6px;
+                outline: none;
+                font-size: 0.9rem;
             }
-
-            .nav-qr-btn {
-                width: 56px; /* Larger button in center */
-                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-top: -20px; /* Lift it slightly */
-                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
-                transition: transform 0.2s ease, box-shadow 0.2s ease;
-                border: none;
+            .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;
             }
-            .nav-qr-btn:hover {
-                 transform: translateY(-22px) scale(1.05);
-                 box-shadow: 0 6px 20px rgba(0, 136, 204, 0.6);
-            }
-            .nav-qr-btn svg {
-                 fill: white;
-                 width: 28px;
-                 height: 28px;
-                 margin-bottom: 0;
+            #browser-iframe {
+                flex-grow: 1;
+                border: none;
+                width: 100%;
+                height: 100%; /* Will be managed by flex-grow */
             }
 
+
+            /* --- Modals --- */
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -488,22 +439,21 @@ def index():
                 align-items: center;
                 justify-content: center;
                 z-index: 1000;
-                -webkit-backdrop-filter: blur(8px); /* Increased blur */
-                backdrop-filter: blur(8px);
-                padding: 20px;
+                -webkit-backdrop-filter: blur(5px);
+                backdrop-filter: blur(5px);
             }
             .modal-content {
                 background-color: var(--bg-secondary);
                 padding: 24px;
                 border-radius: 12px;
-                width: 100%;
+                width: 90%;
                 max-width: 400px;
                 border: 1px solid var(--border-color);
-                box-shadow: 0 10px 40px rgba(0,0,0,0.6);
+                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
             }
-            .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.4rem; text-align: center;}
+            .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 {
+            .modal-content input[type="text"], .modal-content input[type="password"] {
                 width: 100%;
                 padding: 12px;
                 margin-bottom: 16px;
@@ -520,16 +470,113 @@ def index():
                 border: none;
                 cursor: pointer;
                 font-weight: 500;
-                transition: opacity 0.2s ease;
-            }
-            .modal-btn:hover {
-                opacity: 0.9;
+                transition: background-color 0.2s ease;
             }
-            .secondary-btn { background-color: var(--bg-hover); color: var(--text-primary); }
+            .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: var(--footer-height, 60px); /* Position above nav */
+                bottom: calc(var(--nav-height) + 20px); /* Above nav bar */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -539,92 +586,112 @@ def index():
                 font-size: 0.9rem;
                 opacity: 0;
                 visibility: hidden;
-                transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+                transition: opacity 0.3s, visibility 0.3s;
                 z-index: 2000;
                 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
                 max-width: 90%;
-                text-align: center;
+                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 */
+            /* --- Desktop Media Query --- */
             @media (min-width: 768px) {
                 body {
-                    align-items: center;
-                    justify-content: center;
+                    padding: 0;
                 }
                 .main-container {
-                    width: 100%;
-                    height: 100%; /* Adjust if you want a fixed max size */
-                    max-width: 1100px; /* Example max width */
-                    max-height: 800px; /* Example max height */
+                    max-width: 1000px; /* Slightly smaller overall width */
+                    max-height: 650px; /* Reduced height */
                     border-radius: 12px;
                     overflow: hidden;
-                    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
+                    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; /* Sidebar and main content */
-                }
-                .app-content {
-                     flex-direction: row; /* Main content area itself flexes */
-                     position: static; /* Static positioning in desktop layout */
+                    flex-direction: row;
+                    height: 100%;
+                    padding-bottom: 0; /* No padding needed on app-view */
                 }
-                .view {
-                    position: static; /* Static positioning */
-                    flex-shrink: 0; /* Prevent shrinking */
-                    width: auto; /* Flexible width */
-                    height: auto; /* Flexible height */
-                    display: flex !important; /* Always visible on desktop if active */
+                #app-content {
+                     flex-direction: row; /* Content lays out horizontally */
+                     height: 100%;
+                     overflow: hidden;
                 }
+
                 #chatroom-list-view {
-                    width: 320px; /* Fixed sidebar width */
+                    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;
                 }
-                #chat-window-view,
                 #browser-view {
-                    flex-grow: 1; /* Take remaining width */
                     width: auto;
-                     /* Hide chat/browser on desktop initially */
-                     display: none !important;
+                    flex-grow: 1;
+                    height: 100%; /* Takes height of app-content */
+                    display: none; /* Hidden initially */
                 }
 
-                 #chat-window-view.active,
-                 #browser-view.active {
-                     display: flex !important; /* Show the active view */
+                .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;
+                }
+                .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; }
 
-
-                #chat-window-view .chat-placeholder {
-                    /* Keep placeholder centered in available space */
-                     display: flex;
+                 /* Adjust layout when browser view is active on desktop */
+                #app-content.browser-active #chatroom-list-view {
+                     display: none !important; /* Hide chat list */
                 }
-
-
-                .back-btn { display: none !important; } /* No back button on desktop */
-
-                #bottom-nav {
-                     /* Position the nav bar on desktop */
-                     position: absolute; /* Or fixed, depending on desired scroll behavior */
-                     bottom: 0;
-                     left: 0;
-                     right: 0;
-                     width: 100%;
-                     max-width: 1100px; /* Match main container width */
-                     margin: 0 auto;
-                     border-top: 1px solid var(--border-color);
-                     border-bottom-left-radius: 12px; /* Match container border radius */
-                     border-bottom-right-radius: 12px;
+                #app-content.browser-active #browser-view {
+                     display: flex !important; /* Show browser */
                 }
-                .nav-qr-btn {
-                    margin-top: -20px; /* Keep the lift effect */
+                #app-content.browser-active #chat-window-view {
+                    display: none !important; /* Hide chat window */
                 }
 
-                #status-bar {
-                    bottom: var(--footer-height, 60px); /* Adjust position relative to nav */
-                }
+                 /* 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 */
+                 }
             }
         </style>
     </head>
@@ -638,34 +705,47 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-             <div class="app-content">
-                <div id="chatroom-list-view" class="view active">
+            <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 id="app-content">
+                 <div id="chatroom-list-view">
                     <div class="list-header">
                         <div class="list-header-top">
                             <h2>Чаты</h2>
-                            <div style="display: flex; align-items: center; gap: 8px;">
-                                <button id="my-profile-btn" class="action-btn small" title="Мой профиль">
-                                    <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                                </button>
-                                <button id="create-room-show-modal" class="action-btn small">
-                                    <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-                                    <span>Новый</span>
-                                </button>
-                            </div>
+                            <button id="create-room-show-modal" class="action-btn small">
+                                <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                                <span>Новый</span>
+                            </button>
                         </div>
                         <div class="user-profile">
                             <div id="user-wallet"></div>
                             <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" disabled>✓</button>
+                                <input type="text" id="username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off" maxlength="20">
+                                <button type="submit" class="action-btn small">✓</button>
                             </form>
                         </div>
                     </div>
                     <div id="chatroom-list"></div>
                 </div>
 
-                <div id="chat-window-view" class="view">
+                <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>
@@ -681,32 +761,22 @@ def index():
                         </div>
                         <div id="messages-container"></div>
                         <form id="message-form" class="message-form">
-                            <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off" disabled>
-                            <button type="submit" class="action-btn send-btn" id="send-btn" disabled>
+                            <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
+                            <button type="submit" class="action-btn send-btn" id="send-btn">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                             </button>
                         </form>
                     </div>
                 </div>
 
-                <div id="browser-view" class="view">
-                     <iframe id="anonymous-browser" src="https://www.google.com/" title="Anonymous Browser"></iframe>
+                <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>
                 </div>
-
-             </div>
-             <div id="bottom-nav">
-                 <a href="#" class="nav-item active" data-view="chatroom-list-view">
-                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 17H4V5h8V3H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-3h-2v3zm-16-9h16V6H4v2zm8 7H8v-2h4v2zm1-7v.01L14 10l2-2 3 3-4 4 .01.01H13V15h1.99L19 10l-3-3-2 2z"/></svg>
-                     <span>Чаты</span>
-                 </a>
-                 <button class="nav-qr-btn" id="scan-qr-btn">
-                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
-                 </button>
-                 <a href="#" 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 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93s3.05-7.44 7-7.93V12h9.04c-.46 4.11-4.01 7.16-8.04 7.93zM20 12h-9V4.07c4.01.81 7.13 3.97 7.93 7.93z"/></svg>
-                     <span>Браузер</span>
-                 </a>
-             </div>
+            </div>
         </div>
         
         <div id="create-room-modal" class="modal-overlay">
@@ -740,12 +810,12 @@ def index():
         </div>
 
         <div id="profile-modal" class="modal-overlay">
-            <div class="modal-content" style="text-align: center;">
+            <div class="modal-content">
                 <h3 id="profile-modal-title">Профиль пользователя</h3>
-                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
-                <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
-                <p id="profile-address" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
-                <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
+                <div id="profile-avatar-container"></div>
+                <p id="profile-username"></p>
+                <p id="profile-address"></p>
+                <div id="profile-qr-code"></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>
@@ -757,7 +827,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader" style="width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></div>
+                <div id="qr-reader"></div>
                 <div class="modal-actions">
                     <button id="scanner-close-btn" class="modal-btn secondary-btn">Отмена</button>
                 </div>
@@ -779,29 +849,30 @@ def index():
                 let chatroomsData = {};
                 let html5QrCode = null;
                 let profileQrCode = null;
-                let currentView = 'chatroom-list-view'; // Track active view
+                let currentMainView = 'chatList'; // 'chatList', 'chatWindow', 'browser'
 
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
-                const views = document.querySelectorAll('.view'); // All main views
+                const appContent = document.getElementById('app-content');
                 const chatroomListView = document.getElementById('chatroom-list-view');
                 const chatWindowView = document.getElementById('chat-window-view');
-                const browserView = document.getElementById('browser-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');
-                const navItems = document.querySelectorAll('.nav-item');
-                const usernameInput = document.getElementById('username-input');
-                const usernameSubmitBtn = document.querySelector('#username-form button[type="submit"]');
-                const messageInput = document.getElementById('message-input');
-                const sendButton = document.getElementById('send-btn');
-                const backToListBtn = document.getElementById('back-to-list-btn');
 
                 const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
                 const getAvatar = (name) => {
-                    const initial = (name ? name.trim()[0] : '?').toUpperCase();
+                    const initial = (name ? name[0] : '?').toUpperCase();
                     const charCode = initial.charCodeAt(0);
                     const color = AVATAR_COLORS[charCode % AVATAR_COLORS.length];
                     const avatar = document.createElement('div');
@@ -830,9 +901,7 @@ def index():
                             throw new Error(errorData.error || 'Unknown error');
                         }
                         if (response.status === 204) return null;
-                        const text = await response.text();
-                         if (!text) return null; // Handle empty response body
-                         return JSON.parse(text);
+                        return await response.json();
                     } catch (error) {
                         showStatus(`Ошибка: ${error.message}`, 'error');
                         throw error;
@@ -844,31 +913,22 @@ def index():
                 const updateUserInfo = () => {
                     document.getElementById('user-wallet').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
                     const nicknameEl = document.getElementById('user-nickname');
+                    const usernameInput = document.getElementById('username-input');
                     nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
                     usernameInput.value = currentUser.username || '';
-                    usernameInput.disabled = false;
-                    usernameSubmitBtn.disabled = false;
                 };
                 
                 document.getElementById('username-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
-                    const newUsername = usernameInput.value.trim();
-                    if (!newUsername) {
-                        showStatus('Введите никнейм.', 'error');
+                    const newUsername = document.getElementById('username-input').value.trim();
+                    if (!newUsername || newUsername.length < 3) {
+                        showStatus('Никнейм должен быть не короче 3 символов.', 'error');
                         return;
                     }
-                     if (newUsername.length < 3 || newUsername.length > 20) {
-                        showStatus('Никнейм должен быть от 3 до 20 символов.', 'error');
+                     if (newUsername.length > 20) {
+                        showStatus('Никнейм должен быть не длиннее 20 символов.', 'error');
                         return;
                     }
-                    if (newUsername === currentUser.username) {
-                         showStatus('Никнейм не изменился.', 'info');
-                         return;
-                    }
-
-                    usernameInput.disabled = true;
-                    usernameSubmitBtn.disabled = true;
-
                     try {
                         await apiCall('/api/set_username', {
                             method: 'POST',
@@ -878,72 +938,9 @@ def index():
                         currentUser.username = newUsername;
                         updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms(); // Update chat list names
-                        if (activeChatroomId) fetchMessages(activeChatroomId); // Update sender names in active chat
-                    } catch (err) {
-                         usernameInput.disabled = false;
-                         usernameSubmitBtn.disabled = false;
-                    }
-                });
-
-                const showView = (viewId) => {
-                    views.forEach(view => view.classList.remove('active'));
-                    document.getElementById(viewId).classList.add('active');
-                    currentView = viewId;
-
-                    // Update nav active state
-                    navItems.forEach(item => {
-                        if (item.dataset.view === viewId) {
-                            item.classList.add('active');
-                        } else {
-                            item.classList.remove('active');
-                        }
-                    });
-
-                    // Handle chat window specific display
-                    if (viewId === 'chat-window-view') {
-                        const isMobile = window.innerWidth < 768;
-                        backToListBtn.style.display = isMobile ? 'block' : 'none';
-                        if (isMobile) {
-                           chatroomListView.classList.remove('active'); // Hide list on mobile when chat is open
-                        }
-                         messageInput.disabled = false;
-                         sendButton.disabled = false;
-
-                    } else {
-                        backToListBtn.style.display = 'none';
-                        // Stop polling if leaving chat view
-                        if (messagePollingInterval) {
-                            clearInterval(messagePollingInterval);
-                            messagePollingInterval = null;
-                        }
-                         messageInput.disabled = true;
-                         sendButton.disabled = true;
-
-                         // Ensure list view is active on desktop or when explicitly selected on mobile
-                         if (window.innerWidth >= 768 && viewId !== 'chatroom-list-view') {
-                             chatroomListView.classList.add('active');
-                         } else if (viewId === 'chatroom-list-view') {
-                              // On mobile, selecting list view should hide chat/browser
-                              chatWindowView.classList.remove('active');
-                              browserView.classList.remove('active');
-                         }
-                    }
-
-                     // Handle desktop side-by-side layout
-                     if (window.innerWidth >= 768) {
-                         chatroomListView.classList.add('active'); // List is always active on desktop
-                     }
-                };
-
-                navItems.forEach(item => {
-                    item.addEventListener('click', (e) => {
-                        e.preventDefault();
-                        const viewId = item.dataset.view;
-                        if (viewId) {
-                            showView(viewId);
-                        }
-                    });
+                        fetchChatrooms();
+                        if (activeChatroomId) fetchMessages(activeChatroomId);
+                    } catch (err) {}
                 });
 
                 const initializeUser = async (address) => {
@@ -956,22 +953,19 @@ def index():
                         });
                         currentUser.username = data.username;
                     } catch (err) {
-                        currentUser.username = null;
+                        currentUser.username = null; // User might not exist yet
                     }
                     updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
+                    showView('chatList'); // Default view after login
                     fetchChatrooms();
-                    showView('chatroom-list-view'); // Go to chat list after login
                 };
 
                 const renderChatrooms = (rooms) => {
                     const list = document.getElementById('chatroom-list');
                     list.innerHTML = '';
                     chatroomsData = {};
-                    if (rooms.length === 0) {
-                         list.innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: 20px;">Чатрумов пока нет. Создайте первый!</p>';
-                    }
                     rooms.forEach(room => {
                         chatroomsData[room.id] = room;
                         const item = document.createElement('div');
@@ -1008,8 +1002,8 @@ def index():
 
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
-                    const shouldScroll = container.scrollHeight - container.scrollTop - container.clientHeight <= 30; // Scroll if near bottom
-                    
+                    // Check if user is near the bottom before rendering
+                    const isScrolledToBottom = container.scrollHeight - container.clientHeight <= container.scrollTop + 1;
                     container.innerHTML = '';
                     messages.forEach(msg => {
                         const msgDiv = document.createElement('div');
@@ -1036,51 +1030,71 @@ def index():
                         contentDiv.appendChild(bubbleDiv);
 
                         msgDiv.appendChild(contentDiv);
-                        // Insert avatar before content for received, after for sent
-                        if (msg.sender_address !== currentUser.address) {
-                             msgDiv.insertBefore(avatar, contentDiv);
-                        } else {
-                            msgDiv.appendChild(avatar);
-                        }
-                       
+                        msgDiv.insertBefore(avatar, contentDiv);
                         container.appendChild(msgDiv);
                     });
 
-                    if(shouldScroll) {
+                     // Scroll to bottom only if they were already there
+                    if (isScrolledToBottom || messages.length === 0) {
                         container.scrollTop = container.scrollHeight;
                     }
                 };
                 
                 const fetchMessages = async (roomId) => {
-                    if (currentView !== 'chat-window-view' || activeChatroomId !== roomId) {
-                         // Don't fetch if not in the chat view or if the room changed
-                         return;
-                    }
+                    if (!roomId) return;
                     try {
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                        // Error fetching messages, potentially server issue or removed chat
-                        console.error("Failed to fetch messages:", err);
-                        // Stop polling on error
-                        if (messagePollingInterval) {
-                            clearInterval(messagePollingInterval);
-                            messagePollingInterval = null;
-                        }
-                         // Optionally show a message or navigate back
+                         // Error handling already in apiCall
                     }
                 };
-                
+
+                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
+                         }
+                    }
+
+                    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 selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
-                    if (!roomData) {
-                        showStatus('Чат не найден.', 'error');
-                        fetchChatrooms(); // Refresh list
-                        return;
-                    }
+                    if (!roomData) return;
 
                     const proceedToRoom = () => {
-                         // Stop any previous polling
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = roomId;
                         
@@ -1092,10 +1106,9 @@ def index():
                         chatPlaceholder.style.display = 'none';
                         activeChat.style.display = 'flex';
                         
-                        showView('chat-window-view'); // Switch to chat view
-                        
-                        fetchMessages(roomId); // Initial fetch
-                        messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000); // Poll every 3 seconds
+                        showView('chatWindow'); // Switch to chat window view
+                        fetchMessages(roomId);
+                        messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
                     };
                     
                     if (isPrivate) {
@@ -1108,10 +1121,9 @@ def index():
 
                         const formSubmitHandler = async (e) => {
                             e.preventDefault();
+                            passwordForm.removeEventListener('submit', formSubmitHandler);
                             const password = passwordInput.value;
-                            passwordForm.removeEventListener('submit', formSubmitHandler); // Remove to prevent multiple submissions
-                             document.getElementById('password-cancel').onclick = null; // Remove cancel handler too
-                             passwordModal.style.display = 'none'; // Hide immediately
+                            passwordModal.style.display = 'none';
                             try {
                                 await apiCall('/api/join_chatroom', {
                                     method: 'POST',
@@ -1120,8 +1132,8 @@ def index():
                                 });
                                 proceedToRoom();
                             } catch (err) {
-                                 // Error message shown by apiCall
-                                // Re-show modal if needed or handle differently
+                                // Error is shown in apiCall
+                                // Re-open password modal or handle error? For now, just error status.
                             }
                         };
                         passwordForm.addEventListener('submit', formSubmitHandler);
@@ -1135,25 +1147,16 @@ def index():
                     }
                 };
 
-                backToListBtn.addEventListener('click', () => {
-                     showView('chatroom-list-view'); // Go back to list view
-                     chatPlaceholder.style.display = 'flex'; // Show placeholder
-                     activeChat.style.display = 'none'; // Hide active chat
-                     activeChatroomId = null; // Clear active room
-                     if (messagePollingInterval) { // Stop polling
-                        clearInterval(messagePollingInterval);
-                        messagePollingInterval = null;
-                     }
-                });
-
-
                 document.getElementById('message-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
-                    const text = messageInput.value.trim();
+                    const input = document.getElementById('message-input');
+                    const sendBtn = document.getElementById('send-btn');
+                    const text = input.value.trim();
                     if (text && activeChatroomId && currentUser.address) {
-                        messageInput.value = '';
-                        messageInput.disabled = true;
-                        sendButton.disabled = true;
+                         if (messagePollingInterval) clearInterval(messagePollingInterval); // Pause polling while sending
+                        input.value = '';
+                        input.disabled = true;
+                        sendBtn.disabled = true;
                         try {
                             await apiCall('/api/send_message', {
                                 method: 'POST',
@@ -1164,12 +1167,12 @@ def index():
                                     text: text
                                 })
                             });
-                            await fetchMessages(activeChatroomId); // Refresh messages after sending
-                            // Scroll to bottom is handled within renderMessages
+                            await fetchMessages(activeChatroomId); // Fetch updated messages immediately
                         } finally {
-                            messageInput.disabled = false;
-                            sendButton.disabled = false;
-                            messageInput.focus();
+                            input.disabled = false;
+                            sendBtn.disabled = false;
+                            input.focus();
+                            messagePollingInterval = setInterval(() => fetchMessages(activeChatroomId), 3000); // Resume polling
                         }
                     }
                 });
@@ -1178,35 +1181,19 @@ 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';
                 });
                 document.getElementById('create-room-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
-                    const nameInput = document.getElementById('room-name');
-                    const passwordInput = document.getElementById('room-password');
-                    const createBtn = createRoomModal.querySelector('button[type="submit"]');
-
-                    const name = nameInput.value.trim();
-                    const password = passwordInput.value;
-
+                    const name = document.getElementById('room-name').value.trim();
+                    const password = document.getElementById('room-password').value;
                     if (!name) {
-                         showStatus('Название чата обязательно.', 'error');
-                         return;
+                        showStatus('Название чата обязательно.', 'error');
+                        return;
                     }
-                     if (name.length < 3 || name.length > 30) {
-                         showStatus('Название чата должно быть от 3 до 30 символов.', 'error');
-                         return;
-                     }
-                     if (password && password.length < 6) {
-                          showStatus('Пароль должен быть не менее 6 символов.', 'error');
-                          return;
-                     }
-
-                    nameInput.disabled = true;
-                    passwordInput.disabled = true;
-                    createBtn.disabled = true;
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -1216,17 +1203,12 @@ def index():
                         });
                         createRoomModal.style.display = 'none';
                         showStatus('Чат успешно создан!', 'success');
-                        fetchChatrooms(); // Refresh list after creation
-                    } catch (err) {
-                        // Error message shown by apiCall
-                    } finally {
-                         nameInput.disabled = false;
-                         passwordInput.disabled = false;
-                         createBtn.disabled = false;
-                    }
+                        fetchChatrooms();
+                    } catch (err) {}
                 });
 
                 const showProfile = async (address) => {
+                     if (!address) return;
                     try {
                         const userData = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -1234,12 +1216,14 @@ def index():
                             body: JSON.stringify({ address: address })
                         });
                         
-                        const username = userData.username || `User ${truncateAddress(address)}`;
+                        const username = userData.username || `Пользователь ${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));
@@ -1249,9 +1233,7 @@ def index():
                         
                         qrCodeEl.innerHTML = '';
                         if (profileQrCode) {
-                             // Clear previous QR code if it exists and was rendered to this element
-                             // QRCode.js doesn't have a .clear() method on the instance itself,
-                             // but clearing the container div is sufficient.
+                            profileQrCode.clear();
                         }
                         profileQrCode = new QRCode(qrCodeEl, {
                             text: address,
@@ -1267,21 +1249,17 @@ def index():
                                 showStatus('Подключите кошелек для отправки TON.', 'error');
                                 return;
                             }
-                             if (address === currentUser.address) {
-                                 showStatus('Нельзя отправить TON себе.', 'error');
-                                 return;
-                             }
-
-                            const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
-                            if (amountString === null) return; // User cancelled
-
+                             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();
+                            // Convert TON to nanoTON
+                            const amountInNanoTon = (amount * 1_000_000_000).toFixed(0); // Use toFixed(0) to avoid scientific notation for large numbers
 
                             const transaction = {
                                 validUntil: Math.floor(Date.now() / 1000) + 600, // 10 minutes validity
@@ -1289,150 +1267,149 @@ def index():
                             };
 
                             try {
-                                await tonConnectUI.sendTransaction(transaction);
-                                showStatus(`Транзакция отправлена успешно!`, 'success');
+                                const result = await tonConnectUI.sendTransaction(transaction);
+                                showStatus(`Транзакция успешно отправлена: ${result.boc}`, 'success');
+                                // Optional: Close modal after success
                                 profileModal.style.display = 'none';
                             } catch (error) {
-                                // Check for user rejection specifically
-                                if (error.code === 3) { // Example error code for user rejection (check actual library docs)
-                                    showStatus('Транзакция отклонена пользователем.', 'info');
+                                if (error.message.includes('User rejected the action')) {
+                                     showStatus('Транзакция отменена пользователем.', 'info');
                                 } else {
-                                    showStatus(`Ошибка транзакции: ${error.message || 'Неизвестная ошибка'}`, 'error');
+                                     showStatus('Ошибка отправки транзакции.', 'error');
+                                     console.error("Send transaction failed:", error);
                                 }
                             }
                         };
                         
-                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
+                        sendTonBtn.style.display = (address === currentUser.address || !tonConnectUI.connected) ? 'none' : 'flex'; // Hide send button for own profile or if not connected
                         profileModal.style.display = 'flex';
                     } catch (err) {
-                        showStatus('Не удалось загрузить профиль.', 'error');
+                         // Error status already shown by apiCall
+                         showStatus('Не удалось загрузить профиль.', 'error');
                     }
                 };
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    if (!html5QrCode) {
-                        html5QrCode = new Html5Qrcode("qr-reader");
-                    }
-                    
-                    // Define the success callback
+                    // Ensure qr-reader div is empty before starting
+                     document.getElementById('qr-reader').innerHTML = '';
+
+                    html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
-                        hideScanner(); // Hide scanner immediately on success
-                        console.log(`QR code scanned: ${decodedText}`);
-                        // Basic validation for TON address pattern (starts with EQ/UQ, length > 40)
+                        hideScanner();
+                        // Basic check for potential TON address format (EQ/UQ + length)
                         if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                            showProfile(decodedText);
+                             showProfile(decodedText); // Show profile of the scanned address
                         } else {
                             showStatus('Отсканирован недействительный QR-код (не похож на TON адрес).', 'error');
                         }
                     };
-
-                    const config = { fps: 10, qrbox: { width: 250, height: 250 }, rememberLastUsedCamera: true };
-                    
-                    // Start scanning
-                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback,
-                        (errorMessage) => {
-                           // Optional: handle scan error (e.g., no QR code found)
-                           // console.warn(`QR scan error: ${errorMessage}`);
-                        })
+                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
+                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
-                             console.error("Failed to start QR scanner:", err);
-                            showStatus('Не удалось запустить сканер. ��бедитесь, что у вас есть камера и вы предоставили доступ.', 'error');
-                            hideScanner(); // Ensure modal is hidden on error
+                            showStatus('Не удалось запустить сканер.', 'error');
+                            console.error("QR Scanner start failed:", err);
+                            hideScanner();
                         });
                 };
 
                 const hideScanner = () => {
                     if (html5QrCode && html5QrCode.isScanning) {
-                        html5QrCode.stop().then(() => {
-                            console.log("QR scanning stopped.");
-                        }).catch(err => {
-                            console.error("Failed to stop QR scanner.", err);
-                        });
+                        html5QrCode.stop().catch(err => console.error("Failed to stop QR scanner.", err));
                     }
                     scannerModal.style.display = 'none';
                 };
                 
-                document.getElementById('my-profile-btn').addEventListener('click', () => {
-                    if (currentUser.address) showProfile(currentUser.address);
-                    else showStatus('Подключите кошелек для просмотра профиля.', 'info');
+                // --- 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('scan-qr-btn').addEventListener('click', showScanner);
+                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);
 
-                 // Handle initial view and resize for responsiveness
-                 const handleResize = () => {
+                // 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
+                const handleResize = () => {
                     const isMobile = window.innerWidth < 768;
-                    // Adjust back button visibility based on mobile view AND if chat view is active
-                    backToListBtn.style.display = isMobile && currentView === 'chat-window-view' ? 'block' : 'none';
-
-                    // On desktop, ensure list and the currently active view are visible
-                    if (!isMobile) {
-                        chatroomListView.classList.add('active'); // List always visible desktop
-                        if (currentView === 'chat-window-view') {
-                           chatWindowView.classList.add('active');
-                           browserView.classList.remove('active');
-                        } else if (currentView === 'browser-view') {
-                            browserView.classList.add('active');
-                            chatWindowView.classList.remove('active');
-                        } else { // Default to list being primary content if no chat/browser selected yet on desktop
-                            // This case might need refinement depending on desired desktop behavior
-                            // Currently, default is show list, and if a chat/browser is selected, show it next to list.
-                            // If no chat/browser selected, the right pane could be empty or show placeholder.
-                             if (!activeChatroomId && currentView !== 'browser-view') {
-                                 // Maybe hide right panel or show a general placeholder if nothing is selected?
-                                 // For now, just ensure the active non-list view is shown if one exists.
-                             }
-                        }
-                    } else {
-                        // On mobile, only the currentView should be active
-                        views.forEach(view => view.classList.remove('active'));
-                        document.getElementById(currentView).classList.add('active');
-                    }
+                    
+                    // 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.
                 };
 
                 window.addEventListener('resize', handleResize);
 
+                // Initial check for screen size layout
+                handleResize();
+
+                // --- TON Connect Integration ---
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
-                        const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
+                        // Wallet connected
+                        const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false); // Get base64 address
                         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 UI state
-                        chatPlaceholder.style.display = 'flex';
-                        activeChat.style.display = 'none';
-                        usernameInput.disabled = true;
-                        usernameSubmitBtn.disabled = true;
-                        messageInput.disabled = true;
-                        sendButton.disabled = true;
-                        renderChatrooms([]); // Clear chat list
-                         // Hide all views and activate login view
-                        views.forEach(view => view.classList.remove('active'));
+                         // 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';
                     }
-                    // Trigger resize handler to adjust view display based on wallet status and screen size
-                    handleResize();
                 });
-
-                // Initial check on load
-                 if (tonConnectUI.connected) {
-                     const address = TON_CONNECT_UI.toUserFriendlyAddress(tonConnectUI.wallet.account.address, false);
-                     initializeUser(address);
-                 } else {
-                     loginView.style.display = 'flex';
-                     appView.style.display = 'none';
-                     usernameInput.disabled = true;
-                     usernameSubmitBtn.disabled = true;
-                     messageInput.disabled = true;
-                     sendButton.disabled = true;
-                 }
-                 handleResize(); // Apply initial layout based on screen size
             });
         </script>
     </body>
@@ -1448,8 +1425,8 @@ def get_user_data():
     if not address:
         return jsonify({'error': 'Address is required'}), 400
     db = read_db()
-    user_info = db['users'].get(address, {})
-    username = user_info.get('username', None)
+    user_info = db['users'].get(address, {}) # Return empty dict if user not found
+    username = user_info.get('username')
     return jsonify({'username': username})
 
 @app.route('/api/set_username', methods=['POST'])
@@ -1457,21 +1434,15 @@ def set_username():
     data = request.get_json()
     address = data.get('address')
     username = data.get('username')
-    if not address or username is None: # Allow setting to null/empty
+    if not address or not username:
         return jsonify({'error': 'Address and username are required'}), 400
-    if username and (len(username) < 3 or len(username) > 20):
+    if len(username) < 3 or len(username) > 20:
         return jsonify({'error': 'Username must be between 3 and 20 characters'}), 400
 
     db = read_db()
     if address not in db['users']:
         db['users'][address] = {}
-    
-    # Ensure username is stored only if not null/empty string
-    if username:
-        db['users'][address]['username'] = username
-    elif 'username' in db['users'][address]:
-         del db['users'][address]['username'] # Remove username if set to empty
-
+    db['users'][address]['username'] = username
     write_db(db)
     return jsonify({'success': True})
 
@@ -1480,14 +1451,12 @@ def get_chatrooms():
     db = read_db()
     chatrooms_list = []
     for room_id, room_data in db['chatrooms'].items():
-        # Only include rooms that still have messages, or filter differently if needed
-        # This basic example includes all rooms regardless of message count
         chatrooms_list.append({
             'id': room_id,
             'name': room_data['name'],
             'is_private': room_data['is_private']
         })
-    return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
+    return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'].lower())}) # Sort by name case-insensitively
 
 @app.route('/api/create_chatroom', methods=['POST'])
 def create_chatroom():
@@ -1497,12 +1466,17 @@ 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) > 30:
-         return jsonify({'error': 'Chatroom name must be between 3 and 30 characters'}), 400
-    if password and len(password) < 6:
-         return jsonify({'error': 'Password must be at least 6 characters'}), 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,
@@ -1510,7 +1484,7 @@ def create_chatroom():
         'is_private': bool(password),
         'password_hash': generate_password_hash(password) if password else None
     }
-    db['messages'][room_id] = [] # Initialize message list for the new room
+    db['messages'][room_id] = []
     write_db(db)
     return jsonify({'success': True, 'chatroom_id': room_id})
 
@@ -1519,50 +1493,47 @@ def join_chatroom():
     data = request.get_json()
     chatroom_id = data.get('chatroom_id')
     password = data.get('password')
-    if not chatroom_id:
-         return jsonify({'error': 'Chatroom ID is required'}), 400
-
     db = read_db()
     chatroom = db['chatrooms'].get(chatroom_id)
     if not chatroom:
         return jsonify({'error': 'Chatroom not found'}), 404
-    
-    if chatroom.get('is_private'): # Use .get() for safety
-        if not password or not chatroom.get('password_hash') or not check_password_hash(chatroom['password_hash'], password):
+    if chatroom['is_private']:
+        if not password or not check_password_hash(chatroom['password_hash'], password):
             return jsonify({'error': 'Invalid password'}), 403
-            
-    # In a real app, joining might involve adding user to a list or similar.
-    # For this simple app, just verifying password for private rooms is sufficient for "joining".
     return jsonify({'success': True})
 
 @app.route('/api/messages/<chatroom_id>', methods=['GET'])
 def get_messages(chatroom_id):
     db = read_db()
     if chatroom_id not in db['messages']:
-        # If the chatroom exists but has no messages entry, initialize it
-        if chatroom_id in db['chatrooms'] and chatroom_id not in db['messages']:
-             db['messages'][chatroom_id] = []
-             write_db(db)
-             return jsonify({'messages': []})
-        
-        return jsonify({'error': 'Chatroom not found'}), 404
-    
+        # 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
+
     messages_with_names = []
-    # Get a copy of the messages list to avoid modifying while iterating
-    room_messages = list(db['messages'].get(chatroom_id, [])) 
-    
-    # Fetch all necessary user data in one go if performance was critical
-    # For this scale, iterating is fine.
+    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, {}) # Use .get with default empty dict
-        # Display username if available, otherwise a truncated address
-        display_name = (user_info.get('username') if user_info.get('username')
-                        else f"{sender_address[:6]}...{sender_address[-6:]}") # Slightly longer truncation
+        
+        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'] = display_name
+        msg_copy['display_name'] = user_cache[sender_address]
         messages_with_names.append(msg_copy)
 
     return jsonify({'messages': messages_with_names})
@@ -1577,29 +1548,30 @@ def send_message():
     if not all([chatroom_id, sender_address, text]):
         return jsonify({'error': 'Missing data'}), 400
     
-    if len(text.strip()) == 0:
+    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()
-    # Check if chatroom exists before adding message
-    if chatroom_id not in db['chatrooms']:
-        return jsonify({'error': 'Chatroom not found'}), 404
 
-    # Ensure messages list exists for the room
+    db = read_db()
     if chatroom_id not in db['messages']:
-        db['messages'][chatroom_id] = []
+         if chatroom_id not in db['chatrooms']:
+             return jsonify({'error': 'Chatroom not found'}), 404
+         db['messages'][chatroom_id] = [] # Auto-create messages list if missing
+
 
     message = {
         'id': str(uuid.uuid4()),
         'sender_address': sender_address,
-        'text': text.strip(), # Trim whitespace
-        'timestamp': datetime.utcnow().isoformat() + "Z" # ISO 8601 with Z for UTC
+        'text': text,
+        'timestamp': datetime.utcnow().isoformat() + "Z"
     }
     
-    # Keep message list size reasonable (e.g., last 100 messages)
-    MAX_MESSAGES = 100
-    if len(db['messages'][chatroom_id]) >= MAX_MESSAGES:
-        # Remove the oldest message (at index 0)
+    # Keep only the last 100 messages per chatroom
+    if len(db['messages'][chatroom_id]) >= 100:
         db['messages'][chatroom_id].pop(0)
 
     db['messages'][chatroom_id].append(message)
@@ -1609,4 +1581,4 @@ def send_message():
 
 if __name__ == '__main__':
     init_db()
-    app.run(host='0.0.0.0', port=7860)
+    app.run(host='0.0.0.0', port=7860, debug=True) # Enabled debug for development