Update app.py

app.py

@@ -47,22 +47,21 @@ 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: #0E0E11;
-                --bg-secondary: #17171A;
-                --bg-tertiary: #222227;
-                --bg-hover: #2B2B33;
-                --text-primary: #EAECEF;
-                --text-secondary: #8E9297;
-                --accent-blue: #007AFF; /* iOS Blue */
-                --accent-blue-dark: #005BBB; /* Deeper Blue */
-                --accent-blue-light: #34C759; /* Greenish Blue */
-                --ton-blue: #0088CC;
-                --ton-teal: #00BFFF;
-                --border-color: #323239;
-                --success-color: #34C759;
-                --error-color: #FF3B30;
+                --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 */
                 --font-family: 'Inter', sans-serif;
-                --nav-height: 60px;
+                --header-height: 56px;
+                --footer-height: 60px;
             }
 
             * {
@@ -86,13 +85,13 @@ def index():
                 display: flex;
                 flex-direction: column;
             }
-            
+
             .main-container {
-                flex-grow: 1;
                 width: 100%;
-                overflow: hidden;
+                height: 100%;
                 display: flex;
                 flex-direction: column;
+                transition: opacity 0.3s ease;
             }
 
             #login-view {
@@ -102,59 +101,59 @@ def index():
                 align-items: center;
                 justify-content: center;
                 text-align: center;
-                background: radial-gradient(circle, rgba(0, 136, 204, 0.1) 0%, var(--bg-primary) 70%);
                 padding: 20px;
+                background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
             }
             #login-view img {
-                width: 120px;
-                height: 120px;
-                margin-bottom: 32px;
+                width: 100px;
+                height: 100px;
+                margin-bottom: 24px;
                 filter: drop-shadow(0 0 20px rgba(0, 136, 204, 0.6));
             }
             #login-view h1 {
-                font-size: 3.5rem;
+                font-size: 3rem;
                 font-weight: 700;
-                background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal));
+                background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
-                margin-bottom: 16px;
+                margin-bottom: 12px;
             }
             #login-view p {
                 font-size: 1.2rem;
                 color: var(--text-secondary);
-                margin-bottom: 50px;
-            }
-            #ton-connect-button {
-                 --tc-button-height: 50px;
-                 --tc-button-border-radius: 12px;
+                margin-bottom: 40px;
             }
 
             #app-view {
-                display: none;
-                flex-direction: column;
+                display: none; /* Managed by JS */
                 flex-grow: 1;
-                height: calc(100vh - var(--nav-height)); /* Adjust for nav bar */
+                flex-direction: column;
             }
-            
-            #content-container {
-                flex-grow: 1;
-                display: flex;
-                overflow: hidden;
+
+            .app-content {
+                 flex-grow: 1;
+                 position: relative; /* For absolute positioning of views */
+                 overflow: hidden; /* Hide overflow when views are positioned */
             }
 
-            #chat-container {
-                display: flex;
+            .view {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                display: none; /* Initially hidden */
                 flex-direction: column;
-                flex-grow: 1;
-                width: 100%; /* Start with full width, media query changes */
+                background-color: var(--bg-primary); /* Default background */
+                overflow-y: hidden; /* Prevent double scroll bars */
             }
 
+            .view.active {
+                display: flex; /* Show active view */
+            }
+            
             #chatroom-list-view {
-                display: none; /* Hidden by default on mobile */
-                flex-direction: column;
-                height: 100%;
                 background-color: var(--bg-secondary);
-                width: 100%;
             }
             
             .list-header {
@@ -199,7 +198,7 @@ def index():
             .username-input:focus { outline: none; border-color: var(--accent-blue); }
 
             .action-btn {
-                background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal));
+                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
                 color: white;
                 border: none;
                 padding: 10px 16px;
@@ -211,17 +210,22 @@ def index():
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
-                -webkit-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
+                text-decoration: none; /* For anchor tags acting as buttons */
             }
-            .action-btn:active {
-                 transform: scale(0.98);
+            .action-btn:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
             }
             .action-btn.small {
                 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;
@@ -239,8 +243,8 @@ def index():
             .chatroom-item:hover { background-color: var(--bg-hover); }
 
             .avatar {
-                width: 44px;
-                height: 44px;
+                width: 40px;
+                height: 40px;
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
@@ -248,7 +252,8 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                font-size: 1.2rem;
+                text-transform: uppercase;
+                user-select: none;
             }
             .chatroom-info {
                 flex-grow: 1;
@@ -259,7 +264,6 @@ def index():
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                font-size: 1.1rem;
             }
             .lock-icon {
                 width: 16px;
@@ -269,11 +273,7 @@ def index():
             }
 
             #chat-window-view {
-                display: none; /* Hidden by default on mobile */
-                flex-direction: column;
-                flex-grow: 1;
-                width: 100%;
-                background-color: var(--bg-primary);
+                 background-color: var(--bg-primary);
             }
             
             .chat-header {
@@ -289,7 +289,10 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: none; /* Hidden by default, shown on mobile chat */
+                display: none; /* Managed by JS/CSS */
+                padding: 0;
+                width: 24px;
+                height: 24px;
             }
             .back-btn svg {
                 width: 24px;
@@ -308,19 +311,17 @@ def index():
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
-                -webkit-overflow-scrolling: touch;
             }
 
             .message {
                 display: flex;
                 gap: 10px;
-                max-width: 85%;
+                max-width: 85%; /* Increased max width */
             }
             .message .avatar {
-                width: 36px;
-                height: 36px;
+                width: 32px; /* Slightly smaller avatar in chat */
+                height: 32px;
                 align-self: flex-end;
-                font-size: 1rem;
             }
             .message-content {
                 display: flex;
@@ -328,7 +329,7 @@ def index():
                 gap: 4px;
             }
             .message-sender {
-                font-size: 0.85rem;
+                font-size: 0.85rem; /* Slightly larger sender name */
                 font-weight: 500;
                 color: var(--text-secondary);
                 word-break: break-all;
@@ -345,7 +346,7 @@ def index():
             .message.sent { align-self: flex-end; flex-direction: row-reverse; }
             .message.sent .message-sender { text-align: right; color: var(--accent-blue-light); }
             .message.sent .message-bubble {
-                background: linear-gradient(to right bottom, var(--accent-blue), var(--accent-blue-dark));
+                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
                 color: white;
                 border-bottom-right-radius: 4px;
             }
@@ -357,11 +358,11 @@ 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;
@@ -370,7 +371,7 @@ def index():
 
             .message-form {
                 display: flex;
-                padding: 8px 16px;
+                padding: 12px 16px; /* Reduced padding */
                 gap: 12px;
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
@@ -378,7 +379,7 @@ def index():
             }
             #message-input {
                 flex-grow: 1;
-                padding: 10px 16px;
+                padding: 10px 14px; /* Adjusted padding */
                 border: 1px solid var(--border-color);
                 background-color: var(--bg-tertiary);
                 color: var(--text-primary);
@@ -390,131 +391,92 @@ def index():
             #message-input:focus { border-color: var(--accent-blue); }
 
             .send-btn {
-                width: 44px;
-                height: 44px;
+                width: 40px; /* Adjusted size */
+                height: 40px;
                 border-radius: 50%;
                 flex-shrink: 0;
                 padding: 0;
-                background: linear-gradient(45deg, var(--accent-blue-dark), var(--accent-blue-light));
             }
-            .send-btn svg { width: 20px; height: 20px; fill: white; }
+            .send-btn svg { width: 18px; height: 18px; fill: white; } /* Adjusted icon size */
 
-            /* Browser View */
             #browser-view {
-                display: none; /* Hidden by default */
-                flex-direction: column;
-                flex-grow: 1;
-                width: 100%;
-            }
-            .browser-bar {
-                display: flex;
-                padding: 8px 16px;
-                gap: 8px;
-                background-color: var(--bg-secondary);
-                border-bottom: 1px solid var(--border-color);
-                align-items: center;
-                flex-shrink: 0;
-            }
-            .browser-bar input[type="text"] {
-                flex-grow: 1;
-                padding: 8px 12px;
-                border: 1px solid var(--border-color);
-                background-color: var(--bg-tertiary);
-                color: var(--text-primary);
-                border-radius: 6px;
-                font-size: 0.9rem;
+                 background-color: var(--bg-secondary);
             }
-             .browser-bar input[type="text"]:focus { outline: none; border-color: var(--accent-blue); }
-            .browser-bar button {
-                background: var(--bg-hover);
-                border: none;
-                color: var(--text-secondary);
-                padding: 8px;
-                border-radius: 6px;
-                cursor: pointer;
-                transition: background-color 0.2s ease;
-            }
-             .browser-bar button:active { transform: scale(0.95); }
-            .browser-bar button svg { width: 20px; height: 20px; fill: currentColor; }
-            #browser-iframe {
-                flex-grow: 1;
-                width: 100%;
-                border: none;
+            #browser-view iframe {
+                 width: 100%;
+                 height: 100%;
+                 border: none;
             }
 
-
-            /* Bottom Navigation */
             #bottom-nav {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: var(--nav-height);
-                background-color: var(--bg-secondary);
                 display: flex;
                 justify-content: space-around;
                 align-items: center;
+                height: var(--footer-height);
+                background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
-                z-index: 500; /* Below modals, above main content */
-                padding-bottom: env(safe-area-inset-bottom); /* Handle iPhone notches */
+                flex-shrink: 0;
+                padding: 0 10px;
             }
-            .nav-btn {
-                flex-grow: 1;
+
+            .nav-item {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                color: var(--text-secondary);
-                font-size: 0.7rem;
+                padding: 8px 10px;
                 cursor: pointer;
-                padding: 4px 0;
+                color: var(--text-secondary);
+                font-size: 0.75rem;
+                font-weight: 500;
+                text-decoration: none;
                 transition: color 0.2s ease;
-                 -webkit-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
             }
-            .nav-btn svg {
-                width: 24px;
-                height: 24px;
-                margin-bottom: 2px;
-                fill: currentColor;
+            .nav-item svg {
+                 width: 24px;
+                 height: 24px;
+                 fill: var(--text-secondary);
+                 margin-bottom: 4px;
                  transition: fill 0.2s ease;
             }
-             .nav-btn:active { transform: scale(0.95); }
-
-            .nav-btn.active {
-                color: var(--ton-blue);
+             .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-btn.active svg {
-                 fill: var(--ton-blue);
+            .nav-item:hover svg {
+                 fill: var(--text-primary);
             }
-            
-            #nav-scan-btn {
-                background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal));
-                border-radius: 50%;
-                width: 56px;
+
+            .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;
-                position: relative;
-                bottom: 8px;
-                box-shadow: 0 4px 10px rgba(0, 136, 204, 0.5);
-                flex-shrink: 0;
-                 -webkit-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
+                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;
+                cursor: pointer;
             }
-             #nav-scan-btn:active { transform: scale(0.9); }
-            #nav-scan-btn svg {
-                width: 28px;
-                height: 28px;
-                fill: white;
-                margin-bottom: 0;
+            .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;
             }
 
-
-            /* Modals */
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -526,19 +488,20 @@ def index():
                 align-items: center;
                 justify-content: center;
                 z-index: 1000;
-                -webkit-backdrop-filter: blur(5px);
-                backdrop-filter: blur(5px);
+                -webkit-backdrop-filter: blur(8px); /* Increased blur */
+                backdrop-filter: blur(8px);
+                padding: 20px;
             }
             .modal-content {
                 background-color: var(--bg-secondary);
                 padding: 24px;
                 border-radius: 12px;
-                width: 90%;
+                width: 100%;
                 max-width: 400px;
                 border: 1px solid var(--border-color);
-                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+                box-shadow: 0 10px 40px rgba(0,0,0,0.6);
             }
-            .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.3rem; }
+            .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.4rem; text-align: center;}
             .modal-content label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-secondary); }
             .modal-content input {
                 width: 100%;
@@ -550,7 +513,6 @@ def index():
                 border-radius: 6px;
                 font-size: 1rem;
             }
-             .modal-content input:focus { outline: none; border-color: var(--accent-blue); }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
             .modal-btn {
                 padding: 10px 20px;
@@ -558,28 +520,16 @@ def index():
                 border: none;
                 cursor: pointer;
                 font-weight: 500;
-                 -webkit-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
+                transition: opacity 0.2s ease;
+            }
+            .modal-btn:hover {
+                opacity: 0.9;
             }
-             .modal-btn:active { transform: scale(0.95); }
-            .secondary-btn { background-color: var(--bg-hover); color: white; }
-            .modal-btn.action-btn { background: linear-gradient(45deg, var(--ton-blue), var(--ton-teal)); color: white; }
+            .secondary-btn { background-color: var(--bg-hover); color: var(--text-primary); }
             
-            #profile-modal .modal-content { text-align: center; }
-            #profile-modal .avatar { margin: 20px auto; width: 60px; height: 60px; font-size: 1.8rem; }
-            #profile-modal #profile-username { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
-            #profile-modal #profile-address { color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 0; }
-            #profile-modal #profile-qr-code { background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px; }
-            #profile-modal .qr-label { text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px; }
-            #profile-modal .modal-actions { flex-direction: column; gap: 12px; align-items: stretch; }
-
-
-            #scanner-modal #qr-reader { width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden; }
-
             #status-bar {
                 position: fixed;
-                bottom: calc(var(--nav-height) + 10px); /* Position above nav bar */
+                bottom: var(--footer-height, 60px); /* Position above nav */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -599,83 +549,82 @@ def index():
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
 
+            /* Desktop Layout */
             @media (min-width: 768px) {
-                 body {
-                     justify-content: center;
-                     align-items: center;
-                 }
+                body {
+                    align-items: center;
+                    justify-content: center;
+                }
                 .main-container {
-                    max-width: 1100px;
-                    max-height: 800px;
+                    width: 100%;
+                    height: 100%; /* Adjust if you want a fixed max size */
+                    max-width: 1100px; /* Example max width */
+                    max-height: 800px; /* Example max height */
                     border-radius: 12px;
                     overflow: hidden;
-                    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+                    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
                     border: 1px solid var(--border-color);
-                    height: 100%;
-                    flex-grow: 0;
                 }
-                
                 #app-view {
-                    height: 100%;
+                    flex-direction: row; /* Sidebar and main content */
                 }
-                
-                #content-container {
-                     flex-direction: row;
+                .app-content {
+                     flex-direction: row; /* Main content area itself flexes */
+                     position: static; /* Static positioning in desktop layout */
+                }
+                .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 */
                 }
-
                 #chatroom-list-view {
-                    width: 320px;
-                    flex-shrink: 0;
+                    width: 320px; /* Fixed sidebar width */
                     border-right: 1px solid var(--border-color);
-                    display: flex !important; /* Always show on desktop */
                 }
-                #chat-window-view {
-                    width: auto;
-                    flex-grow: 1;
-                     display: flex !important; /* Always show on desktop */
-                }
-                
+                #chat-window-view,
                 #browser-view {
-                    display: flex; /* Always show on desktop when active */
+                    flex-grow: 1; /* Take remaining width */
+                    width: auto;
+                     /* Hide chat/browser on desktop initially */
+                     display: none !important;
                 }
 
-                #chat-container {
-                    flex-direction: row; /* Side-by-side on desktop */
+                 #chat-window-view.active,
+                 #browser-view.active {
+                     display: flex !important; /* Show the active view */
+                 }
+
+
+                #chat-window-view .chat-placeholder {
+                    /* Keep placeholder centered in available space */
+                     display: flex;
                 }
 
+
+                .back-btn { display: none !important; } /* No back button on desktop */
+
                 #bottom-nav {
-                    position: static; /* Not fixed */
-                    width: auto;
-                    height: auto;
-                    background-color: transparent;
-                    border-top: none;
-                    z-index: auto;
-                    padding-bottom: 0;
-                     margin-top: 20px; /* Example spacing if needed */
+                     /* 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;
+                }
+                .nav-qr-btn {
+                    margin-top: -20px; /* Keep the lift effect */
+                }
+
+                #status-bar {
+                    bottom: var(--footer-height, 60px); /* Adjust position relative to nav */
                 }
-                 .nav-btn {
-                     display: none; /* Hide text nav buttons */
-                 }
-                #nav-scan-btn {
-                     display: none !important; /* Hide the large central scan button */
-                 }
-                 .list-header-top {
-                     margin-bottom: 12px; /* Less space needed */
-                 }
-                .list-header-top h2 { font-size: 1.8rem; }
-                 .user-profile { margin-bottom: 20px; }
-                 .chat-header { padding: 16px; }
-                 #chat-header-title { font-size: 1.4rem; }
-                 .message-form { padding: 12px 16px; }
-                 #message-input { padding: 14px 18px; }
-                 .send-btn { width: 48px; height: 48px; }
-                 .send-btn svg { width: 24px; height: 24px; }
-
-                 .back-btn { display: none !important; } /* Hide back button on desktop */
-
-                 #status-bar {
-                     bottom: 20px; /* Back to standard bottom position */
-                 }
             }
         </style>
     </head>
@@ -689,95 +638,77 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <div id="content-container">
-                
-                <!-- Chat Views -->
-                <div id="chat-container">
-                    <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>
-                                     <!-- QR Scan button moved to bottom nav -->
-                                    <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="chat-window-view">
-                         <div id="chat-placeholder" class="chat-placeholder">
-                            <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
-                            <h2>Выберите чат</h2>
-                            <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
-                        </div>
-                        <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
-                            <div class="chat-header">
-                                <button class="back-btn" id="back-to-list-btn">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+             <div class="app-content">
+                <div id="chatroom-list-view" class="view active">
+                    <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>
-                                <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 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" disabled>✓</button>
                             </form>
                         </div>
                     </div>
+                    <div id="chatroom-list"></div>
                 </div>
 
-                <!-- Browser View -->
-                <div id="browser-view">
-                    <div class="browser-bar">
-                         <button id="browser-back"><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 13H20z"/></svg></button>
-                         <button id="browser-forward"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11h12.17l-5.58-5.59L12 4l8 8-8 8-1.41-1.41L16.17 13H4z"/></svg></button>
-                         <button id="browser-home"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg></button>
-                         <form id="browser-form" style="flex-grow: 1; display: flex; gap: 8px;">
-                            <input type="text" id="browser-url" value="https://www.google.com/" placeholder="Введите адрес или запрос">
-                            <button type="submit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg></button>
-                         </form>
+                <div id="chat-window-view" class="view">
+                    <div id="chat-placeholder" class="chat-placeholder">
+                        <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                        <h2>Выберите чат</h2>
+                        <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
+                    </div>
+                    <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
+                        <div class="chat-header">
+                            <button class="back-btn" id="back-to-list-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                            </button>
+                            <div id="chat-header-avatar" class="avatar"></div>
+                            <span id="chat-header-title"></span>
+                        </div>
+                        <div id="messages-container"></div>
+                        <form id="message-form" class="message-form">
+                            <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off" disabled>
+                            <button type="submit" class="action-btn send-btn" id="send-btn" disabled>
+                                <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>
-                    <iframe id="browser-iframe" src="https://www.google.com/"></iframe>
                 </div>
 
-            </div>
-
-             <!-- Bottom Navigation Bar -->
-            <div id="bottom-nav">
-                <div class="nav-btn active" data-view="chat">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 6H6v-2h8v2zm4-4H6V7h12v4z"/></svg>
-                    <span>Чаты</span>
+                <div id="browser-view" class="view">
+                     <iframe id="anonymous-browser" src="https://www.google.com/" title="Anonymous Browser"></iframe>
                 </div>
-                <div id="nav-scan-btn">
+
+             </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>
-                </div>
-                <div class="nav-btn" data-view="browser">
-                    <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.93s3.05-7.44 7-7.93v15.86zm2 0V4.07c3.95.49 7 3.85 7 7.93s-3.05 7.44-7 7.93z"/></svg>
-                    <span>Браузер</span>
-                </div>
-            </div>
+                 </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>
         
-        <!-- Modals (outside main-container flow) -->
         <div id="create-room-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Создать новый чат</h3>
@@ -809,14 +740,14 @@ def index():
         </div>
 
         <div id="profile-modal" class="modal-overlay">
-            <div class="modal-content">
+            <div class="modal-content" style="text-align: center;">
                 <h3 id="profile-modal-title">Профиль пользователя</h3>
-                <div id="profile-avatar-container"></div>
-                <p id="profile-username"></p>
-                <p id="profile-address"></p>
-                <div id="profile-qr-code"></div>
-                <p class="qr-label">Отсканируйте для открытия профиля</p>
-                <div class="modal-actions">
+                <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>
                     <button id="profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
                 </div>
@@ -826,7 +757,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>
@@ -848,36 +779,29 @@ def index():
                 let chatroomsData = {};
                 let html5QrCode = null;
                 let profileQrCode = null;
-                
+                let currentView = 'chatroom-list-view'; // Track active view
+
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
-                const chatContainer = document.getElementById('chat-container');
+                const views = document.querySelectorAll('.view'); // All main views
                 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 bottomNav = document.getElementById('bottom-nav');
-                const navButtons = bottomNav.querySelectorAll('.nav-btn');
-                const navScanBtn = document.getElementById('nav-scan-btn');
-
-                const createRoomModal = document.getElementById('create-room-modal');
-                const passwordModal = document.getElementById('password-modal');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
+                const 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 browserIframe = document.getElementById('browser-iframe');
-                const browserUrlInput = document.getElementById('browser-url');
-                const browserForm = document.getElementById('browser-form');
-                const browserBackBtn = document.getElementById('browser-back');
-                const browserForwardBtn = document.getElementById('browser-forward');
-                const browserHomeBtn = document.getElementById('browser-home');
-
-
-                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292', '#a1887f', '#ff8a65'];
+                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
                 const getAvatar = (name) => {
-                    const initial = (name ? name[0] : '?').toUpperCase();
+                    const initial = (name ? name.trim()[0] : '?').toUpperCase();
                     const charCode = initial.charCodeAt(0);
                     const color = AVATAR_COLORS[charCode % AVATAR_COLORS.length];
                     const avatar = document.createElement('div');
@@ -906,7 +830,9 @@ def index():
                             throw new Error(errorData.error || 'Unknown error');
                         }
                         if (response.status === 204) return null;
-                        return await response.json();
+                        const text = await response.text();
+                         if (!text) return null; // Handle empty response body
+                         return JSON.parse(text);
                     } catch (error) {
                         showStatus(`Ошибка: ${error.message}`, 'error');
                         throw error;
@@ -918,18 +844,31 @@ 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 = document.getElementById('username-input').value.trim();
-                    if (!newUsername || newUsername.length < 3) {
-                        showStatus('Никнейм должен быть не короче 3 символов.', 'error');
+                    const newUsername = usernameInput.value.trim();
+                    if (!newUsername) {
+                        showStatus('Введите никнейм.', 'error');
+                        return;
+                    }
+                     if (newUsername.length < 3 || newUsername.length > 20) {
+                        showStatus('Никнейм должен быть от 3 до 20 символов.', 'error');
                         return;
                     }
+                    if (newUsername === currentUser.username) {
+                         showStatus('Никнейм не изменился.', 'info');
+                         return;
+                    }
+
+                    usernameInput.disabled = true;
+                    usernameSubmitBtn.disabled = true;
+
                     try {
                         await apiCall('/api/set_username', {
                             method: 'POST',
@@ -939,9 +878,72 @@ def index():
                         currentUser.username = newUsername;
                         updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms();
-                        if (activeChatroomId) fetchMessages(activeChatroomId); 
-                    } catch (err) {}
+                        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);
+                        }
+                    });
                 });
 
                 const initializeUser = async (address) => {
@@ -959,15 +961,17 @@ def index():
                     updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
-                    bottomNav.style.display = 'flex';
-                    switchView('chat'); // Default view is chat
                     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');
@@ -1004,7 +1008,8 @@ def index():
 
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
-                    const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 30;
+                    const shouldScroll = container.scrollHeight - container.scrollTop - container.clientHeight <= 30; // Scroll if near bottom
+                    
                     container.innerHTML = '';
                     messages.forEach(msg => {
                         const msgDiv = document.createElement('div');
@@ -1031,78 +1036,51 @@ def index():
                         contentDiv.appendChild(bubbleDiv);
 
                         msgDiv.appendChild(contentDiv);
-                        msgDiv.insertBefore(avatar, contentDiv);
+                        // Insert avatar before content for received, after for sent
+                        if (msg.sender_address !== currentUser.address) {
+                             msgDiv.insertBefore(avatar, contentDiv);
+                        } else {
+                            msgDiv.appendChild(avatar);
+                        }
+                       
                         container.appendChild(msgDiv);
                     });
 
-                    if(shouldScroll || messages.length === 0) {
+                    if(shouldScroll) {
                         container.scrollTop = container.scrollHeight;
                     }
                 };
                 
                 const fetchMessages = async (roomId) => {
-                    if (!currentUser.address) return;
+                    if (currentView !== 'chat-window-view' || activeChatroomId !== roomId) {
+                         // Don't fetch if not in the chat view or if the room changed
+                         return;
+                    }
                     try {
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                       console.error("Failed to fetch messages:", 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
                     }
                 };
                 
-                const showChatView = () => {
-                     chatContainer.style.display = 'flex';
-                     browserView.style.display = 'none';
-
-                    if (window.innerWidth < 768) {
-                         // On mobile, determine whether to show list or window
-                         if (activeChatroomId && activeChat.style.display === 'flex') {
-                             chatroomListView.style.display = 'none';
-                             chatWindowView.style.display = 'flex';
-                             document.getElementById('back-to-list-btn').style.display = 'block';
-                         } else {
-                            chatroomListView.style.display = 'flex';
-                            chatWindowView.style.display = 'none';
-                            document.getElementById('back-to-list-btn').style.display = 'none';
-                         }
-                    } else {
-                        // On desktop, always show both
-                        chatroomListView.style.display = 'flex';
-                        chatWindowView.style.display = 'flex';
-                         document.getElementById('back-to-list-btn').style.display = 'none';
-                    }
-                };
-
-                 const showBrowserView = () => {
-                     chatContainer.style.display = 'none';
-                     browserView.style.display = 'flex';
-                     if (messagePollingInterval) clearInterval(messagePollingInterval);
-                     activeChatroomId = null;
-                 };
-
-                 const switchView = (viewId) => {
-                     navButtons.forEach(btn => btn.classList.remove('active'));
-                     let targetView = null;
-
-                     if (viewId === 'chat') {
-                         showChatView();
-                         targetView = document.querySelector('.nav-btn[data-view="chat"]');
-                     } else if (viewId === 'browser') {
-                         showBrowserView();
-                         targetView = document.querySelector('.nav-btn[data-view="browser"]');
-                     }
-                    
-                     if (targetView) {
-                         targetView.classList.add('active');
-                     }
-                 };
-
-
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
-                    if (!roomData) return;
+                    if (!roomData) {
+                        showStatus('Чат не найден.', 'error');
+                        fetchChatrooms(); // Refresh list
+                        return;
+                    }
 
                     const proceedToRoom = () => {
+                         // Stop any previous polling
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = roomId;
                         
@@ -1114,27 +1092,26 @@ def index():
                         chatPlaceholder.style.display = 'none';
                         activeChat.style.display = 'flex';
                         
-                        showChatView(); // Ensure chat view is active and handle mobile/desktop split
-
-                        fetchMessages(roomId);
-                        messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
+                        showView('chat-window-view'); // Switch to chat view
+                        
+                        fetchMessages(roomId); // Initial fetch
+                        messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000); // Poll every 3 seconds
                     };
                     
                     if (isPrivate) {
+                        const passwordModal = document.getElementById('password-modal');
                         const passwordForm = document.getElementById('password-form');
                         const passwordInput = document.getElementById('password-input');
-                        
                         passwordModal.style.display = 'flex';
                         passwordInput.value = '';
                         passwordInput.focus();
 
-                        // Use a flag to prevent multiple listeners if modal is shown multiple times
-                        let passwordFormListener = null;
-                        passwordFormListener = async (e) => {
+                        const formSubmitHandler = async (e) => {
                             e.preventDefault();
-                            passwordForm.removeEventListener('submit', passwordFormListener); // Remove listener after submit
                             const password = passwordInput.value;
-                            passwordModal.style.display = 'none';
+                            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
                             try {
                                 await apiCall('/api/join_chatroom', {
                                     method: 'POST',
@@ -1143,33 +1120,40 @@ def index():
                                 });
                                 proceedToRoom();
                             } catch (err) {
-                                showStatus('Неверный пароль', 'error');
-                                // Re-attach listener if join failed and modal might be shown again
-                                // This part is tricky; a better approach might be a dedicated join attempt handler
+                                 // Error message shown by apiCall
+                                // Re-show modal if needed or handle differently
                             }
                         };
-                        passwordForm.addEventListener('submit', passwordFormListener);
+                        passwordForm.addEventListener('submit', formSubmitHandler);
 
                         document.getElementById('password-cancel').onclick = () => {
                             passwordModal.style.display = 'none';
-                            passwordForm.removeEventListener('submit', passwordFormListener); // Clean up listener on cancel
+                            passwordForm.removeEventListener('submit', formSubmitHandler);
                         };
-
                     } else {
-                        // Auto-join public rooms
                         proceedToRoom();
                     }
                 };
 
+                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 input = document.getElementById('message-input');
-                    const sendBtn = document.getElementById('send-btn');
-                    const text = input.value.trim();
+                    const text = messageInput.value.trim();
                     if (text && activeChatroomId && currentUser.address) {
-                        input.value = '';
-                        input.disabled = true;
-                        sendBtn.disabled = true;
+                        messageInput.value = '';
+                        messageInput.disabled = true;
+                        sendButton.disabled = true;
                         try {
                             await apiCall('/api/send_message', {
                                 method: 'POST',
@@ -1180,44 +1164,17 @@ def index():
                                     text: text
                                 })
                             });
-                            // Don't wait for poll, add message locally for instant feedback
-                             const tempMsg = {
-                                id: 'temp-' + Date.now(), // Temporary ID
-                                sender_address: currentUser.address,
-                                text: text,
-                                timestamp: new Date().toISOString(),
-                                display_name: currentUser.username || `${currentUser.address[:4]}...${currentUser.address[-4:]}`
-                             };
-                            const messagesContainer = document.getElementById('messages-container');
-                             // Check if the last message is from the current user to group bubbles
-                             const lastMsgElement = messagesContainer.lastElementChild;
-                            if (lastMsgElement && lastMsgElement.classList.contains('sent')) {
-                                 // Append to existing sent bubble structure (simplified)
-                                 // For real grouping, you'd restructure the message HTML
-                                 // For now, just adding as a new message item
-                            }
-                             renderMessages([...Array.from(messagesContainer.children).map(el => {
-                                // Basic extraction for temp rendering
-                                 const senderEl = el.querySelector('.message-sender');
-                                 const bubbleEl = el.querySelector('.message-bubble');
-                                 return {
-                                     sender_address: el.classList.contains('sent') ? currentUser.address : 'other', // Simplified check
-                                     text: bubbleEl ? bubbleEl.textContent : '',
-                                     display_name: senderEl ? senderEl.textContent : '',
-                                     // timestamp etc omitted for temp
-                                 };
-                             }), tempMsg]); // Re-render with temp message
-
-                            await fetchMessages(activeChatroomId); // Fetch actual messages after sending
-
+                            await fetchMessages(activeChatroomId); // Refresh messages after sending
+                            // Scroll to bottom is handled within renderMessages
                         } finally {
-                            input.disabled = false;
-                            sendBtn.disabled = false;
-                            input.focus();
+                            messageInput.disabled = false;
+                            sendButton.disabled = false;
+                            messageInput.focus();
                         }
                     }
                 });
 
+                const createRoomModal = document.getElementById('create-room-modal');
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
@@ -1227,17 +1184,29 @@ def index():
                 });
                 document.getElementById('create-room-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
-                    const name = document.getElementById('room-name').value.trim();
-                    const password = document.getElementById('room-password').value;
+                    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;
+
                     if (!name) {
-                        showStatus('Название чата не может быть пустым.', 'error');
-                        return;
+                         showStatus('Название чата обязательно.', 'error');
+                         return;
                     }
-                     if (name.length < 3 || name.length > 50) {
-                         showStatus('Название чата должно быть от 3 до 50 символов.', 'error');
+                     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', {
@@ -1247,8 +1216,14 @@ def index():
                         });
                         createRoomModal.style.display = 'none';
                         showStatus('Чат успешно создан!', 'success');
-                        fetchChatrooms();
-                    } catch (err) {}
+                        fetchChatrooms(); // Refresh list after creation
+                    } catch (err) {
+                        // Error message shown by apiCall
+                    } finally {
+                         nameInput.disabled = false;
+                         passwordInput.disabled = false;
+                         createBtn.disabled = false;
+                    }
                 });
 
                 const showProfile = async (address) => {
@@ -1259,7 +1234,7 @@ 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');
@@ -1274,39 +1249,32 @@ def index():
                         
                         qrCodeEl.innerHTML = '';
                         if (profileQrCode) {
-                           // Check if QR code instance exists and clear it
-                           if (typeof profileQrCode.clear === 'function') {
-                                profileQrCode.clear();
-                           } else {
-                               // Fallback if clear method is not available (older versions?)
-                               qrCodeEl.innerHTML = '';
-                           }
+                             // 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.
                         }
-                         // Use try/catch for QRCode initialization as it can throw
-                         try {
-                             profileQrCode = new QRCode(qrCodeEl, {
-                                 text: address,
-                                 width: 150,
-                                 height: 150,
-                                 colorDark : "#000000",
-                                 colorLight : "#ffffff",
-                                 correctLevel : QRCode.CorrectLevel.H
-                             });
-                         } catch (e) {
-                              console.error("Failed to generate QR code:", e);
-                             qrCodeEl.innerHTML = '<p style="color: red;">Ошибка генерации QR</p>';
-                             profileQrCode = null; // Ensure it's null if failed
-                         }
-
-
+                        profileQrCode = new QRCode(qrCodeEl, {
+                            text: address,
+                            width: 150,
+                            height: 150,
+                            colorDark : "#000000",
+                            colorLight : "#ffffff",
+                            correctLevel : QRCode.CorrectLevel.H
+                        });
+                        
                         sendTonBtn.onclick = async () => {
                             if (!tonConnectUI.connected) {
                                 showStatus('Подключите кошелек для отправки TON.', 'error');
                                 return;
                             }
+                             if (address === currentUser.address) {
+                                 showStatus('Нельзя отправить TON себе.', 'error');
+                                 return;
+                             }
+
                             const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
-                            if (amountString === null) return;
-                            
+                            if (amountString === null) return; // User cancelled
+
                             const amount = parseFloat(amountString);
                             if (isNaN(amount) || amount <= 0) {
                                 showStatus('Неверная сумма.', 'error');
@@ -1316,7 +1284,7 @@ def index():
                             const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
 
                             const transaction = {
-                                validUntil: Math.floor(Date.now() / 1000) + 600,
+                                validUntil: Math.floor(Date.now() / 1000) + 600, // 10 minutes validity
                                 messages: [ { address: address, amount: amountInNanoTon } ]
                             };
 
@@ -1325,11 +1293,16 @@ def index():
                                 showStatus(`Транзакция отправлена успешно!`, 'success');
                                 profileModal.style.display = 'none';
                             } catch (error) {
-                                showStatus('Транзакция отклонена.', 'error');
+                                // Check for user rejection specifically
+                                if (error.code === 3) { // Example error code for user rejection (check actual library docs)
+                                    showStatus('Транзакция отклонена пользователем.', 'info');
+                                } else {
+                                    showStatus(`Ошибка транзакции: ${error.message || 'Неизвестная ошибка'}`, 'error');
+                                }
                             }
                         };
                         
-                        sendTonBtn.style.display = (address === currentUser.address || !tonConnectUI.connected) ? 'none' : 'block';
+                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
                         profileModal.style.display = 'flex';
                     } catch (err) {
                         showStatus('Не удалось загрузить профиль.', 'error');
@@ -1338,148 +1311,88 @@ def index():
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    html5QrCode = new Html5Qrcode("qr-reader");
+                    if (!html5QrCode) {
+                        html5QrCode = new Html5Qrcode("qr-reader");
+                    }
+                    
+                    // Define the success callback
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
-                        hideScanner();
-                        // Basic check for TON address format
-                        if (decodedText && typeof decodedText === 'string' && decodedText.length >= 48 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                             showProfile(decodedText);
+                        hideScanner(); // Hide scanner immediately on success
+                        console.log(`QR code scanned: ${decodedText}`);
+                        // Basic validation for TON address pattern (starts with EQ/UQ, length > 40)
+                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
+                            showProfile(decodedText);
                         } else {
-                            showStatus('Отсканирован недействительный QR-код (ожидается адрес TON).', 'error');
+                            showStatus('Отсканирован недействительный QR-код (не похож на TON адрес).', 'error');
                         }
                     };
-                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
-                     // Request camera permissions when starting scanner
-                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
+
+                    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}`);
+                        })
                         .catch(err => {
-                            console.error("QR Scanner startup failed:", err);
-                            showStatus('Не удалось запустить сканер. Проверьте разрешения камеры.', 'error');
-                            hideScanner(); // Ensure modal closes on error
+                             console.error("Failed to start QR scanner:", err);
+                            showStatus('Не удалось запустить сканер. Убедитесь, что у вас есть камера и вы предоставили доступ.', 'error');
+                            hideScanner(); // Ensure modal is hidden on error
                         });
                 };
 
                 const hideScanner = () => {
                     if (html5QrCode && html5QrCode.isScanning) {
-                        html5QrCode.stop().catch(err => console.error("Failed to stop QR scanner.", err));
+                        html5QrCode.stop().then(() => {
+                            console.log("QR scanning stopped.");
+                        }).catch(err => {
+                            console.error("Failed to stop QR scanner.", err);
+                        });
                     }
                     scannerModal.style.display = 'none';
                 };
                 
-                // Event Listeners
                 document.getElementById('my-profile-btn').addEventListener('click', () => {
                     if (currentUser.address) showProfile(currentUser.address);
-                     else showStatus('Подключите кошелек', 'error');
+                    else showStatus('Подключите кошелек для просмотра профиля.', 'info');
                 });
-
-                 // Nav button listeners
-                 navButtons.forEach(btn => {
-                     btn.addEventListener('click', () => {
-                         const viewId = btn.dataset.view;
-                         switchView(viewId);
-                     });
-                 });
-
-                 // Central QR scan button
-                 navScanBtn.addEventListener('click', showScanner);
-
+                document.getElementById('scan-qr-btn').addEventListener('click', showScanner);
                 document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
                 document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
-                document.getElementById('back-to-list-btn').addEventListener('click', () => {
-                    activeChat.style.display = 'none';
-                    chatPlaceholder.style.display = 'flex';
-                    activeChatroomId = null;
-                    if (messagePollingInterval) clearInterval(messagePollingInterval);
-                    showChatView(); // Show list view on mobile
-                });
-                
-                // Browser Navigation
-                browserForm.addEventListener('submit', (e) => {
-                    e.preventDefault();
-                    let url = browserUrlInput.value.trim();
-                    if (url) {
-                         // Add http/https if missing, basic check
-                         if (!url.match(/^https?:\/\//i)) {
-                             url = 'https://' + url; // Default to https
-                         }
-                        browserIframe.src = url;
-                    }
-                });
-
-                 browserHomeBtn.addEventListener('click', () => {
-                     const homeUrl = "https://www.google.com/";
-                     browserIframe.src = homeUrl;
-                     browserUrlInput.value = homeUrl;
-                 });
-
-                 browserBackBtn.addEventListener('click', () => {
-                     try {
-                         browserIframe.contentWindow.history.back();
-                     } catch (e) {
-                         console.warn("Browser history back failed, likely due to cross-origin policy.", e);
-                         showStatus("Браузер не может перейти назад из-за ограничений безопасности.", 'info');
-                     }
-                 });
-
-                 browserForwardBtn.addEventListener('click', () => {
-                     try {
-                         browserIframe.contentWindow.history.forward();
-                     } catch (e) {
-                         console.warn("Browser history forward failed, likely due to cross-origin policy.", e);
-                         showStatus("Браузер не может перейти вперед из-за ограничений безопасности.", 'info');
-                     }
-                 });
-
-                 // Sync URL input with iframe location (best effort, limited by same-origin)
-                 browserIframe.addEventListener('load', () => {
-                     try {
-                        // This might fail on cross-origin sites
-                        browserUrlInput.value = browserIframe.contentWindow.location.href;
-                     } catch (e) {
-                        // Cannot access cross-origin frame location
-                        browserUrlInput.value = browserIframe.src; // Fallback to src
-                     }
-                 });
-
 
-                const handleResize = () => {
+                 // Handle initial view and resize for responsiveness
+                 const handleResize = () => {
                     const isMobile = window.innerWidth < 768;
-
-                     // Manage display within the 'chat' container based on mobile/desktop and active chat state
-                    if (chatContainer.style.display !== 'none') { // Only apply resize logic if chat is the active view
-                        if (isMobile) {
-                            document.getElementById('back-to-list-btn').style.display = activeChatroomId ? 'block' : 'none';
-                            if (activeChatroomId && activeChat.style.display === 'flex') {
-                                // Mobile, chat window is open
-                                chatroomListView.style.display = 'none';
-                                chatWindowView.style.display = 'flex';
-                            } else {
-                                // Mobile, chat list is open or no chat selected
-                                chatroomListView.style.display = 'flex';
-                                chatWindowView.style.display = 'none';
-                            }
-                        } else {
-                            // Desktop: always show both list and window
-                            chatroomListView.style.display = 'flex';
-                            chatWindowView.style.display = 'flex';
-                            document.getElementById('back-to-list-btn').style.display = 'none';
+                    // 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');
                     }
-
-                     // Adjust app-view height for desktop
-                     if (!isMobile) {
-                          appView.style.height = '100%'; // Allow container to define height
-                          bottomNav.style.display = 'none'; // Hide bottom nav on desktop
-                     } else {
-                          appView.style.height = `calc(100vh - var(--nav-height))`;
-                          bottomNav.style.display = 'flex'; // Show bottom nav on mobile
-                     }
                 };
 
                 window.addEventListener('resize', handleResize);
-                
-                // Initial state setup
-                handleResize(); // Apply initial layout based on screen size
-                bottomNav.style.display = 'none'; // Hide nav until user is logged in
 
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
@@ -1489,16 +1402,37 @@ def index():
                         currentUser = { address: null, username: null };
                         appView.style.display = 'none';
                         loginView.style.display = 'flex';
-                        bottomNav.style.display = 'none';
                         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
-                        renderMessages([]); // Clear messages
-                        handleResize(); // Adjust layout back to login state
+                         // Hide all views and activate login view
+                        views.forEach(view => view.classList.remove('active'));
                     }
+                    // 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>
@@ -1514,8 +1448,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') if user_info else None
+    user_info = db['users'].get(address, {})
+    username = user_info.get('username', None)
     return jsonify({'username': username})
 
 @app.route('/api/set_username', methods=['POST'])
@@ -1523,15 +1457,21 @@ def set_username():
     data = request.get_json()
     address = data.get('address')
     username = data.get('username')
-    if not address or not username:
+    if not address or username is None: # Allow setting to null/empty
         return jsonify({'error': 'Address and username are required'}), 400
-    if len(username) < 3 or len(username) > 20:
+    if username and (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] = {}
-    db['users'][address]['username'] = username
+    
+    # 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
+
     write_db(db)
     return jsonify({'success': True})
 
@@ -1540,10 +1480,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['password_hash'] is not None
+            'is_private': room_data['is_private']
         })
     return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
 
@@ -1555,17 +1497,20 @@ 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
 
     db = read_db()
     room_id = str(uuid.uuid4())
     db['chatrooms'][room_id] = {
-        'id': room_id,
         'name': name,
         'creator': creator_address,
         'is_private': bool(password),
         'password_hash': generate_password_hash(password) if password else None
     }
-    db['messages'][room_id] = []
+    db['messages'][room_id] = [] # Initialize message list for the new room
     write_db(db)
     return jsonify({'success': True, 'chatroom_id': room_id})
 
@@ -1574,30 +1519,48 @@ 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['is_private']:
-        if not password or not check_password_hash(chatroom['password_hash'], password):
+    
+    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):
             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
     
     messages_with_names = []
-    room_messages = db['messages'].get(chatroom_id, [])
+    # 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.
     
     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:]}")
-        
+        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
+
         msg_copy = msg.copy()
         msg_copy['display_name'] = display_name
         messages_with_names.append(msg_copy)
@@ -1613,24 +1576,30 @@ def send_message():
 
     if not all([chatroom_id, sender_address, text]):
         return jsonify({'error': 'Missing data'}), 400
+    
+    if len(text.strip()) == 0:
+        return jsonify({'error': 'Message cannot be empty'}), 400
 
     db = read_db()
-    if chatroom_id not in db['messages']:
+    # Check if chatroom exists before adding message
+    if chatroom_id not in db['chatrooms']:
         return jsonify({'error': 'Chatroom not found'}), 404
-        
-    if sender_address not in db['users'] or not db['users'][sender_address].get('username'):
-         # Prevent sending if user has no username
-         return jsonify({'error': 'Username not set'}), 400
+
+    # Ensure messages list exists for the room
+    if chatroom_id not in db['messages']:
+        db['messages'][chatroom_id] = []
 
     message = {
         'id': str(uuid.uuid4()),
         'sender_address': sender_address,
-        'text': text,
-        'timestamp': datetime.utcnow().isoformat() + "Z"
+        'text': text.strip(), # Trim whitespace
+        'timestamp': datetime.utcnow().isoformat() + "Z" # ISO 8601 with Z for UTC
     }
     
-    # Keep only the last 100 messages per chatroom
-    if len(db['messages'][chatroom_id]) >= 100:
+    # 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)
         db['messages'][chatroom_id].pop(0)
 
     db['messages'][chatroom_id].append(message)