Update app.py

app.py

@@ -40,21 +40,24 @@ def index():
         <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
         <style>
             :root {
-                --bg-color: #000000;
-                --secondary-bg-color: #111111;
-                --header-bg-color: rgba(18, 18, 18, 0.75);
-                --tertiary-bg-color: #222222;
-                --text-color: #ffffff;
-                --text-secondary-color: #8E8E93;
-                --button-color: #007AFF;
-                --button-text-color: #ffffff;
-                --link-color: #007AFF;
-                --separator-color: #28282A;
-                --destructive-color: #FF3B30;
-                --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+                --bg-primary: #0F0F11;
+                --bg-secondary: #18191C;
+                --bg-tertiary: #212328;
+                --bg-hover: #2A2C33;
+                --text-primary: #EAECEF;
+                --text-secondary: #8E9297;
+                --accent-blue: #0088CC;
+                --accent-blue-light: #33AADD;
+                --border-color: #2D2F34;
+                --success-color: #28a745;
+                --error-color: #dc3545;
+                --font-family: 'Inter', sans-serif;
+                --nav-bg: #18191C;
+                --nav-icon-color: #8E9297;
+                --nav-icon-active-color: #FFFFFF;
             }
 
             * {
@@ -64,16 +67,19 @@ def index():
                 -webkit-tap-highlight-color: transparent;
             }
 
-            html { font-size: 16px; }
+            html {
+                font-size: 16px;
+            }
 
             body {
                 font-family: var(--font-family);
-                background-color: var(--bg-color);
-                color: var(--text-color);
+                background-color: var(--bg-primary);
+                color: var(--text-primary);
                 overflow: hidden;
                 height: 100vh;
                 width: 100vw;
                 display: flex;
+                flex-direction: column;
                 align-items: center;
                 justify-content: center;
             }
@@ -94,71 +100,133 @@ def index():
                 text-align: center;
                 width: 100%;
                 height: 100%;
+                background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
             }
             #login-view img {
-                width: 120px;
-                height: 120px;
+                width: 100px;
+                height: 100px;
                 margin-bottom: 24px;
+                filter: drop-shadow(0 0 15px rgba(0, 136, 204, 0.5));
+            }
+            #login-view h1 {
+                font-size: 2.8rem;
+                font-weight: 700;
+                background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                margin-bottom: 12px;
+            }
+            #login-view p {
+                font-size: 1.1rem;
+                color: var(--text-secondary);
+                margin-bottom: 40px;
             }
-            #login-view h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 12px; }
-            #login-view p { font-size: 1.1rem; color: var(--text-secondary-color); margin-bottom: 40px; }
 
-            #app-view {
+            #app-wrapper {
                 display: none;
-                width: 100%;
+                flex-direction: column;
                 height: 100%;
+                width: 100%;
+            }
+            
+            #app-content {
+                display: flex;
+                flex-grow: 1;
                 overflow: hidden;
             }
 
-            .page {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
+            #chatroom-list-view {
                 display: flex;
                 flex-direction: column;
-                background-color: var(--bg-color);
-                opacity: 0;
-                visibility: hidden;
-                transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
-                transform: translateX(10px);
-                padding-bottom: 70px; /* Space for bottom nav */
-            }
-            .page.active {
-                opacity: 1;
-                visibility: visible;
-                transform: translateX(0);
-                z-index: 10;
+                height: 100%;
+                width: 100%;
+                background-color: var(--bg-secondary);
+                overflow: hidden;
             }
             
-            .page-header {
+            .list-header {
+                padding: 16px;
+                border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
-                padding: 12px 16px;
-                background-color: var(--header-bg-color);
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                border-bottom: 1px solid var(--separator-color);
-                z-index: 20;
             }
-            .page-header h2 { font-size: 1.5rem; font-weight: 700; }
-            .page-header .header-content { display: flex; justify-content: space-between; align-items: center; }
+            .list-header-top {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 16px;
+            }
+            .list-header-top h2 {
+                font-size: 1.5rem;
+                font-weight: 600;
+            }
+            
+            .user-profile-section {
+                padding: 12px;
+                background-color: var(--bg-tertiary);
+                border-radius: 8px;
+                margin-bottom: 16px;
+            }
+            #user-wallet, #user-nickname {
+                font-size: 0.9rem;
+                color: var(--text-secondary);
+                margin-bottom: 8px;
+                word-break: break-all;
+            }
+            
+            .username-form { display: flex; gap: 8px; }
+            .username-input {
+                flex-grow: 1;
+                background-color: var(--bg-primary);
+                border: 1px solid var(--border-color);
+                color: var(--text-primary);
+                border-radius: 6px;
+                padding: 8px 12px;
+                font-size: 0.9rem;
+            }
+            .username-input:focus { outline: none; border-color: var(--accent-blue); }
 
-            .page-content { flex-grow: 1; overflow-y: auto; }
+            .action-btn {
+                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                color: white;
+                border: none;
+                padding: 10px 16px;
+                border-radius: 6px;
+                cursor: pointer;
+                font-weight: 500;
+                transition: transform 0.2s ease, box-shadow 0.2s ease;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 8px;
+            }
+            .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;
+            }
             
-            #chats-page-content .list-item, #users-page-content .list-item {
+            #chatroom-list {
+                flex-grow: 1;
+                overflow-y: auto;
+                padding-bottom: 60px;
+            }
+            .chatroom-item {
                 display: flex;
                 align-items: center;
                 gap: 12px;
-                padding: 10px 16px;
+                padding: 12px 16px;
                 cursor: pointer;
-                border-bottom: 1px solid var(--separator-color);
+                border-bottom: 1px solid var(--border-color);
+                transition: background-color 0.2s ease;
             }
-            #chats-page-content .list-item:hover, #users-page-content .list-item:hover { background-color: var(--tertiary-bg-color); }
-            
+            .chatroom-item:hover { background-color: var(--bg-hover); }
+
             .avatar {
-                width: 48px;
-                height: 48px;
+                width: 40px;
+                height: 40px;
                 border-radius: 50%;
                 display: flex;
                 align-items: center;
@@ -166,66 +234,56 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                font-size: 1.2rem;
             }
-            .item-info { flex-grow: 1; overflow: hidden; }
-            .item-name { font-weight: 600; font-size: 1.1rem; }
-            .item-detail {
-                font-size: 0.9rem;
-                color: var(--text-secondary-color);
+            .chatroom-info {
+                flex-grow: 1;
+                overflow: hidden;
+            }
+            .chatroom-name {
+                font-weight: 500;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
-            .lock-icon { width: 16px; height: 16px; fill: var(--text-secondary-color); flex-shrink: 0; }
-            
-            .floating-action-button {
-                position: fixed;
-                bottom: 85px;
-                right: 20px;
-                width: 56px;
-                height: 56px;
-                background-color: var(--button-color);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: none;
-                cursor: pointer;
-                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-                z-index: 100;
+            .lock-icon {
+                width: 16px;
+                height: 16px;
+                fill: var(--text-secondary);
+                flex-shrink: 0;
             }
 
             #chat-window-view {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background-color: var(--secondary-bg-color);
-                display: flex;
+                display: none;
                 flex-direction: column;
-                transform: translateX(100%);
-                transition: transform 0.3s ease-in-out;
-                z-index: 50;
+                height: 100%;
+                width: 100%;
+                background-color: var(--bg-primary);
             }
-            #chat-window-view.active { transform: translateX(0); }
-
+            
             .chat-header {
                 display: flex;
                 align-items: center;
-                gap: 10px;
-                padding: 10px 8px 10px 8px;
-                background-color: var(--header-bg-color);
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                border-bottom: 1px solid var(--separator-color);
+                gap: 12px;
+                padding: 12px 16px;
+                background-color: var(--bg-secondary);
+                border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
             }
-            .back-btn { background: none; border: none; cursor: pointer; padding: 8px; }
-            .back-btn svg { width: 28px; height: 28px; fill: var(--link-color); }
-            #chat-header-title { font-size: 1.1rem; font-weight: 600; }
-            #chat-header-avatar { width: 40px; height: 40px; }
+            .back-btn {
+                background: none;
+                border: none;
+                cursor: pointer;
+                display: none;
+            }
+            .back-btn svg {
+                width: 24px;
+                height: 24px;
+                fill: var(--text-primary);
+            }
+            #chat-header-title {
+                font-size: 1.2rem;
+                font-weight: 600;
+            }
 
             #messages-container {
                 flex-grow: 1;
@@ -234,261 +292,238 @@ def index():
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
-                background-image: url('https://ton.org/download/ton_symbol.svg');
-                background-repeat: no-repeat;
-                background-position: center;
-                background-size: 50%;
-                background-blend-mode: overlay;
-                background-color: var(--bg-color);
             }
 
-            .message { display: flex; gap: 10px; max-width: 85%; }
-            .message .avatar { width: 36px; height: 36px; align-self: flex-end; }
-            .message-content { display: flex; flex-direction: column; gap: 4px; }
-            .message-sender { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary-color); word-break: break-all; cursor: pointer; padding: 0 12px; }
-            .message-bubble { padding: 8px 14px; border-radius: 20px; line-height: 1.4; word-wrap: break-word; font-size: 1rem; }
+            .message {
+                display: flex;
+                gap: 10px;
+                max-width: 80%;
+            }
+            .message .avatar {
+                width: 36px;
+                height: 36px;
+                align-self: flex-end;
+            }
+            .message-content {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+            }
+            .message-sender {
+                font-size: 0.8rem;
+                font-weight: 500;
+                color: var(--text-secondary);
+                word-break: break-all;
+                cursor: pointer;
+            }
+            .message-bubble {
+                padding: 10px 14px;
+                border-radius: 18px;
+                line-height: 1.4;
+                word-wrap: break-word;
+            }
+
             .message.sent { align-self: flex-end; flex-direction: row-reverse; }
-            .message.sent .message-bubble { background-color: var(--button-color); color: white; border-bottom-right-radius: 4px; }
+            .message.sent .message-sender { text-align: right; color: var(--accent-blue-light); }
+            .message.sent .message-bubble {
+                background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                color: white;
+                border-bottom-right-radius: 4px;
+            }
+
             .message.received { align-self: flex-start; }
-            .message.received .message-bubble { background-color: var(--tertiary-bg-color); border-bottom-left-radius: 4px; }
-            .message.received .message-sender { color: var(--link-color); }
+            .message.received .message-bubble {
+                background-color: var(--bg-tertiary);
+                border-bottom-left-radius: 4px;
+            }
+            
+            .chat-placeholder {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                text-align: center;
+                color: var(--text-secondary);
+                padding: 20px;
+            }
+            .chat-placeholder img { width: 80px; margin-bottom: 20px; opacity: 0.5; }
 
             .message-form {
                 display: flex;
-                padding: 8px;
-                gap: 8px;
-                background-color: var(--secondary-bg-color);
-                border-top: 1px solid var(--separator-color);
+                padding: 16px;
+                gap: 12px;
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
                 flex-shrink: 0;
             }
             #message-input {
                 flex-grow: 1;
-                padding: 10px 16px;
-                border: none;
-                background-color: var(--tertiary-bg-color);
-                color: var(--text-color);
-                border-radius: 20px;
+                padding: 12px 16px;
+                border: 1px solid var(--border-color);
+                background-color: var(--bg-tertiary);
+                color: var(--text-primary);
+                border-radius: 22px;
                 outline: none;
                 font-size: 1rem;
+                transition: border-color 0.2s;
             }
+            #message-input:focus { border-color: var(--accent-blue); }
+
             .send-btn {
-                width: 40px;
-                height: 40px;
+                width: 44px;
+                height: 44px;
                 border-radius: 50%;
                 flex-shrink: 0;
                 padding: 0;
-                background-color: var(--button-color);
-                border: none;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
             }
             .send-btn svg { width: 20px; height: 20px; fill: white; }
 
-            #bottom-nav {
+            .modal-overlay {
                 position: fixed;
-                bottom: 0;
+                top: 0;
                 left: 0;
                 width: 100%;
-                height: 70px;
-                background-color: var(--header-bg-color);
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                border-top: 1px solid var(--separator-color);
+                height: 100%;
+                background-color: rgba(0,0,0,0.7);
+                display: none;
+                align-items: center;
+                justify-content: center;
+                z-index: 1000;
+                -webkit-backdrop-filter: blur(5px);
+                backdrop-filter: blur(5px);
+            }
+            .modal-content {
+                background-color: var(--bg-secondary);
+                padding: 24px;
+                border-radius: 12px;
+                width: 90%;
+                max-width: 400px;
+                border: 1px solid var(--border-color);
+                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            }
+            .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.3rem; }
+            .modal-content label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-secondary); }
+            .modal-content input {
+                width: 100%;
+                padding: 12px;
+                margin-bottom: 16px;
+                background-color: var(--bg-tertiary);
+                border: 1px solid var(--border-color);
+                color: white;
+                border-radius: 6px;
+                font-size: 1rem;
+            }
+            .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
+            .modal-btn {
+                padding: 10px 20px;
+                border-radius: 6px;
+                border: none;
+                cursor: pointer;
+                font-weight: 500;
+            }
+            .secondary-btn { background-color: var(--bg-hover); color: white; }
+            
+            #status-bar {
+                position: fixed;
+                bottom: 20px;
+                left: 50%;
+                transform: translateX(-50%);
+                background-color: var(--bg-tertiary);
+                color: white;
+                padding: 12px 20px;
+                border-radius: 8px;
+                font-size: 0.9rem;
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.3s, visibility 0.3s;
+                z-index: 2000;
+                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            }
+            #status-bar.success { background-color: var(--success-color); }
+            #status-bar.error { background-color: var(--error-color); }
+            #status-bar.visible { opacity: 1; visibility: visible; }
+
+            .bottom-nav {
                 display: flex;
                 justify-content: space-around;
-                align-items: flex-start;
-                padding-top: 6px;
-                z-index: 1000;
+                align-items: center;
+                background-color: var(--nav-bg);
+                padding: 12px 0;
+                border-top: 1px solid var(--border-color);
+                flex-shrink: 0;
             }
             .nav-item {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
-                gap: 4px;
-                color: var(--text-secondary-color);
-                font-size: 0.7rem;
-                font-weight: 500;
                 cursor: pointer;
-                transition: color 0.2s;
-            }
-            .nav-item.active { color: var(--link-color); }
-            .nav-item svg { width: 28px; height: 28px; fill: currentColor; }
-            .nav-item#nav-scan {
-                transform: translateY(-20px);
+                color: var(--nav-icon-color);
+                transition: color 0.2s ease;
+                font-size: 0.75rem;
+                width: 25%;
+                text-align: center;
             }
-            .nav-item#nav-scan .scan-button-wrapper {
+            .nav-item.center {
+                transform: translateY(-10px);
+                background-color: var(--accent-blue);
                 width: 60px;
                 height: 60px;
                 border-radius: 50%;
-                background-color: var(--button-color);
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                border: 4px solid var(--bg-color);
-            }
-            .nav-item#nav-scan svg { fill: white; width: 30px; height: 30px; }
-            .nav-item#nav-scan span { display: none; }
-            
-            #profile-page .profile-header {
-                padding-top: 60px;
-                padding-bottom: 20px;
-                text-align: center;
-            }
-            #profile-page .profile-header .avatar {
-                width: 100px;
-                height: 100px;
-                font-size: 3rem;
-                margin: 0 auto 16px;
-            }
-            #profile-page #profile-username {
-                font-size: 1.5rem;
-                font-weight: 600;
-            }
-            #profile-page #profile-address {
-                font-size: 0.9rem;
-                color: var(--text-secondary-color);
-                margin-top: 4px;
-                word-break: break-all;
-                padding: 0 20px;
-            }
-            #profile-page .profile-content {
-                padding: 16px;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-            }
-            #profile-qr-code {
-                background: white;
-                padding: 16px;
-                border-radius: 12px;
-                margin-bottom: 12px;
-            }
-            .profile-actions { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
-            .action-button {
-                padding: 14px;
-                width: 100%;
-                border-radius: 12px;
-                border: none;
-                font-size: 1rem;
-                font-weight: 600;
-                cursor: pointer;
-                background-color: var(--tertiary-bg-color);
-                color: var(--link-color);
-            }
-            .action-button.primary {
-                background-color: var(--button-color);
-                color: var(--button-text-color);
-            }
-            .action-button.destructive {
-                color: var(--destructive-color);
-            }
-            
-            .modal-overlay {
-                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-                background-color: rgba(0,0,0,0.7);
-                display: none; align-items: center; justify-content: center;
-                z-index: 2000;
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background-color: var(--tertiary-bg-color);
-                padding: 20px; border-radius: 14px;
-                width: 90%; max-width: 350px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+                color: white;
+                box-shadow: 0 5px 20px rgba(0, 136, 204, 0.4);
             }
-            .modal-content h3 { margin-bottom: 16px; font-weight: 600; font-size: 1.1rem; text-align: center; }
-            .modal-content input {
-                width: 100%; padding: 12px; margin-bottom: 16px;
-                background-color: #3a3a3c; border: none;
-                color: white; border-radius: 8px; font-size: 1rem;
+            .nav-item svg {
+                width: 24px;
+                height: 24px;
+                margin-bottom: 4px;
+                fill: currentColor;
             }
-            .modal-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
-            .modal-btn {
-                flex-grow: 1; padding: 12px; border-radius: 8px;
-                border: none; cursor: pointer; font-weight: 600;
+            .nav-item.center svg {
+                width: 30px;
+                height: 30px;
+                margin-bottom: 0;
             }
-            .secondary-btn { background-color: #555; color: white; }
-            .primary-btn { background-color: var(--button-color); color: white; }
-
-            #status-bar {
-                position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
-                background-color: rgba(40, 40, 40, 0.8); backdrop-filter: blur(10px);
-                color: white; padding: 10px 20px; border-radius: 20px;
-                font-size: 0.9rem; opacity: 0; visibility: hidden;
-                transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
-                z-index: 3000; transform: translate(-50%, -100px);
+            .nav-item.active {
+                color: var(--nav-icon-active-color);
             }
-            #status-bar.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
 
             @media (min-width: 768px) {
-                body { background-color: #1c1c1e; }
                 .main-container {
-                    max-width: 1200px; max-height: 90vh;
-                    border-radius: 12px; overflow: hidden;
+                    max-width: 1100px;
+                    max-height: 800px;
+                    border-radius: 12px;
+                    overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
-                    border: 1px solid var(--separator-color);
+                    border: 1px solid var(--border-color);
                 }
-                #app-view { flex-direction: row; }
-                #bottom-nav { display: none; }
-                .page {
-                    position: static;
-                    opacity: 1; visibility: visible;
-                    transform: none;
-                    width: 350px; flex-shrink: 0;
-                    border-right: 1px solid var(--separator-color);
-                    padding-bottom: 0;
+                #app-wrapper {
+                    flex-direction: row;
+                }
+                #chatroom-list-view {
+                    width: 320px;
+                    flex-shrink: 0;
+                    border-right: 1px solid var(--border-color);
+                    display: flex !important;
                 }
-                .page.active { z-index: 1; }
-                .page:not(.active) { display: none; }
-                
                 #chat-window-view {
-                    position: static;
-                    transform: none;
                     width: auto;
                     flex-grow: 1;
                     display: flex !important;
                 }
-                .back-btn { display: none !important; }
-
-                .floating-action-button {
-                    position: absolute; bottom: 20px; right: 20px;
-                }
-                #chats-page .floating-action-button { right: calc(100% - 350px + 20px); }
-
-                #profile-page {
-                    position: fixed;
-                    top: 50%; left: 50%;
-                    transform: translate(-50%, -50%);
-                    width: 400px;
-                    height: auto;
-                    max-height: 90vh;
-                    border-radius: 14px;
-                    z-index: 100;
-                    padding-bottom: 0;
-                }
-                #profile-page .page-header {
-                    background: none; backdrop-filter: none; border: none;
-                }
-                 #profile-page .profile-content {
-                    padding-bottom: 24px;
-                 }
-                #profile-page-overlay {
-                    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-                    background: rgba(0,0,0,0.5);
-                    z-index: 99;
-                }
-                #profile-page-close-btn {
-                    position: absolute; top: 10px; right: 10px;
-                    background: rgba(100,100,100,0.5); border-radius: 50%;
-                    width: 30px; height: 30px; border: none; cursor: pointer;
-                    color: white; font-size: 1.2rem;
+                #chat-window-view.hidden-on-desktop {
+                    display: flex !important;
                 }
+                .back-btn { display: none !important; }
+                .bottom-nav { display: none; }
             }
         </style>
     </head>
     <body>
+
         <div id="login-view" class="main-container">
             <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
             <h1>Virton</h1>
@@ -496,90 +531,86 @@ def index():
             <div id="ton-connect-button"></div>
         </div>
 
-        <div id="app-view" class="main-container">
-            <div id="chats-page" class="page active">
-                <div class="page-header"><h2>Чаты</h2></div>
-                <div id="chats-page-content" class="page-content"></div>
-                <button id="create-room-show-modal" class="floating-action-button">
-                    <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="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-                </button>
-            </div>
-
-            <div id="users-page" class="page">
-                <div class="page-header"><h2>Пользователи</h2></div>
-                <div id="users-page-content" class="page-content"></div>
-            </div>
-            
-            <div id="profile-page-overlay" style="display: none;"></div>
-            <div id="profile-page" class="page">
-                <button id="profile-page-close-btn" style="display: none;">×</button>
-                <div class="profile-header">
-                    <div id="profile-avatar-container" class="avatar"></div>
-                    <h3 id="profile-username"></h3>
-                    <p id="profile-address"></p>
-                </div>
-                <div class="profile-content">
-                    <div id="profile-qr-code"></div>
-                    <p style="font-size: 0.8rem; color: var(--text-secondary-color); margin-top: 8px;">Отсканируйте для открытия профиля</p>
-                </div>
-                <div class="profile-actions">
-                     <form id="username-form" style="display: flex; gap: 8px; margin-bottom: 12px;">
-                        <input type="text" id="username-input" placeholder="Новый никнейм" style="flex-grow: 1; padding: 14px; background-color: var(--tertiary-bg-color); color: white; border: none; border-radius: 12px; font-size: 1rem;">
-                        <button type="submit" class="action-button primary" style="width: auto; padding: 0 20px;">✓</button>
-                    </form>
-                    <button id="send-ton-btn" class="action-button primary">Отправить TON</button>
-                    <button id="disconnect-btn" class="action-button destructive">Отключить кошелек</button>
+        <div id="app-wrapper" class="main-container">
+            <div id="app-content">
+                <div id="chatroom-list-view">
+                    <div class="list-header">
+                        <div class="list-header-top">
+                            <h2>Чаты</h2>
+                            <div style="display: flex; align-items: center; gap: 8px;">
+                                <button id="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-section">
+                            <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>
 
-            <div id="chat-window-view">
-                <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="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
-                    </button>
-                    <div id="chat-header-avatar" class="avatar"></div>
-                    <span id="chat-header-title"></span>
+                <div id="chat-window-view" class="hidden-on-desktop">
+                    <div id="chat-placeholder" class="chat-placeholder">
+                        <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                        <h2>Выберите чат</h2>
+                        <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
+                    </div>
+                    <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
+                        <div class="chat-header">
+                            <button class="back-btn" id="back-to-list-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                            </button>
+                            <div id="chat-header-avatar" class="avatar"></div>
+                            <span id="chat-header-title"></span>
+                        </div>
+                        <div id="messages-container"></div>
+                        <form id="message-form" class="message-form">
+                            <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
+                            <button type="submit" class="action-btn send-btn" id="send-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+                            </button>
+                        </form>
+                    </div>
                 </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="send-btn" id="send-btn">
-                        <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>
 
-            <nav id="bottom-nav">
+            <div class="bottom-nav">
                 <div class="nav-item" id="nav-chats">
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 13l-2-2V4H4v11h14z"/><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 8a2 2 0 100-4 2 2 0 000 4zM8 12a2 2 0 100-4 2 2 0 000 4zM16 12a2 2 0 100-4 2 2 0 000 4z"/></svg>
                     <span>Чаты</span>
                 </div>
                 <div class="nav-item" id="nav-users">
-                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"><g><rect fill="none" height="24" width="24"/></g><g><path d="M16,11c1.66,0,2.99-1.34,2.99-3S17.66,5,16,5C14.34,5,13,6.34,13,8S14.34,11,16,11z M8,11C9.66,11,11,9.66,11,8 s-1.34-3-3-3S5,6.34,5,8S6.34,11,8,11z M8,13c-2.33,0-7,1.17-7,3.5V19h14v-2.5C15,14.17,10.33,13,8,13z M16,13c-0.29,0-0.62,0.02-0.97,0.05c1.16,0.84,1.97,1.97,1.97,3.45V19h6v-2.5C23,14.17,18.33,13,16,13z"/></g></svg>
-                    <span>Люди</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                    <span>Пользователи</span>
                 </div>
-                <div class="nav-item" id="nav-scan">
-                    <div class="scan-button-wrapper">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><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>
-                    <span>Скан</span>
+                <div class="nav-item center" id="nav-scan">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4h-4v2h2v14h-14v-2h-2v4h20V4z"/><path d="M8 13a5 5 0 110-10 5 5 0 010 10zm0-6a3 3 0 100 6 3 3 0 000-6z"/></svg>
                 </div>
                 <div class="nav-item" id="nav-profile">
-                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><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>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                     <span>Профиль</span>
                 </div>
-            </nav>
+            </div>
         </div>
-
+        
         <div id="create-room-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Создать новый чат</h3>
                 <form id="create-room-form">
-                    <input type="text" id="room-name" placeholder="Название чата" required>
-                    <input type="password" id="room-password" placeholder="Пароль (необязательно)">
+                    <label for="room-name">Название чата</label>
+                    <input type="text" id="room-name" required>
+                    <label for="room-password">Пароль (оставьте пустым для открытого)</label>
+                    <input type="password" id="room-password">
                     <div class="modal-actions">
                         <button type="button" id="create-room-cancel" class="modal-btn secondary-btn">Отмена</button>
-                        <button type="submit" class="modal-btn primary-btn">Создать</button>
+                        <button type="submit" class="modal-btn action-btn">Создать</button>
                     </div>
                 </form>
             </div>
@@ -587,27 +618,43 @@ def index():
 
         <div id="password-modal" class="modal-overlay">
             <div class="modal-content">
-                <h3 id="password-modal-title">Вход в приватный чат</h3>
+                <h3>Вход в приватный чат</h3>
                 <form id="password-form">
-                    <input type="password" id="password-input" placeholder="Пароль" required>
+                    <label for="password-input">Введите пароль</label>
+                    <input type="password" id="password-input" required>
                     <div class="modal-actions">
                         <button type="button" id="password-cancel" class="modal-btn secondary-btn">Отмена</button>
-                        <button type="submit" class="modal-btn primary-btn">Войти</button>
+                        <button type="submit" class="modal-btn action-btn">Войти</button>
                     </div>
                 </form>
             </div>
         </div>
 
+        <div id="profile-modal" class="modal-overlay">
+            <div class="modal-content" style="text-align: center;">
+                <h3 id="profile-modal-title">Профиль пользователя</h3>
+                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
+                <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
+                <p id="profile-address" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
+                <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
+                <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>
+            </div>
+        </div>
+
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader" style="width: 100%; border: 1px solid var(--separator-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></div>
-                <div class="modal-actions" style="justify-content:center;">
+                <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>
             </div>
         </div>
-        
+
         <div id="status-bar"></div>
 
         <script>
@@ -623,14 +670,19 @@ def index():
                 let chatroomsData = {};
                 let html5QrCode = null;
                 let profileQrCode = null;
+                let currentNavView = 'chats'; 
                 
                 const loginView = document.getElementById('login-view');
-                const appView = document.getElementById('app-view');
+                const appWrapper = document.getElementById('app-wrapper');
+                const chatroomListView = document.getElementById('chatroom-list-view');
                 const chatWindowView = document.getElementById('chat-window-view');
-                const navItems = document.querySelectorAll('.nav-item');
-                const pages = document.querySelectorAll('.page');
+                const chatPlaceholder = document.getElementById('chat-placeholder');
+                const activeChat = document.getElementById('active-chat');
+                const profileModal = document.getElementById('profile-modal');
+                const scannerModal = document.getElementById('scanner-modal');
+                const bottomNav = document.querySelector('.bottom-nav');
 
-                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292', '#a1887f', '#7986cb', '#4dd0e1'];
+                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
                 const getAvatar = (name) => {
                     const initial = (name ? name[0] : '?').toUpperCase();
@@ -643,9 +695,13 @@ def index():
                     return avatar;
                 };
 
-                const showStatus = (message, duration = 3000) => {
+                const showStatus = (message, type = 'info', duration = 3000) => {
                     const statusBar = document.getElementById('status-bar');
                     statusBar.textContent = message;
+                    statusBar.className = 'status-bar';
+                    if (type === 'success') statusBar.classList.add('success');
+                    else if (type === 'error') statusBar.classList.add('error');
+                    
                     statusBar.classList.add('visible');
                     setTimeout(() => statusBar.classList.remove('visible'), duration);
                 };
@@ -654,52 +710,24 @@ def index():
                     try {
                         const response = await fetch(endpoint, options);
                         if (!response.ok) {
-                            const errorData = await response.json().catch(() => ({ error: 'Request failed: ' + response.status }));
+                            const errorData = await response.json().catch(() => ({ error: 'Request failed with status ' + response.status }));
                             throw new Error(errorData.error || 'Unknown error');
                         }
                         if (response.status === 204) return null;
                         return await response.json();
                     } catch (error) {
-                        showStatus(`Ошибка: ${error.message}`);
+                        showStatus(`Ошибка: ${error.message}`, 'error');
                         throw error;
                     }
                 };
                 
                 const truncateAddress = (address) => address ? `${address.substring(0, 4)}...${address.substring(address.length - 4)}` : '';
 
-                const switchView = (viewId) => {
-                    pages.forEach(page => page.classList.remove('active'));
-                    document.getElementById(viewId).classList.add('active');
-
-                    navItems.forEach(item => item.classList.remove('active'));
-                    const activeNavItem = document.getElementById(`nav-${viewId.split('-')[0]}`);
-                    if (activeNavItem) activeNavItem.classList.add('active');
-                };
-                
-                document.getElementById('nav-chats').addEventListener('click', () => switchView('chats-page'));
-                document.getElementById('nav-users').addEventListener('click', () => {
-                    switchView('users-page');
-                    fetchUsers();
-                });
-                document.getElementById('nav-profile').addEventListener('click', () => {
-                     showProfile(currentUser.address);
-                });
-                document.getElementById('nav-scan').addEventListener('click', () => showScanner());
-
                 const updateUserInfo = () => {
-                    if (!currentUser.address) return;
-                    
-                    const username = currentUser.username || `User ${truncateAddress(currentUser.address)}`;
-                    const avatarContainer = document.querySelector('#profile-page .profile-header .avatar');
-                    const usernameEl = document.getElementById('profile-username');
-                    const addressEl = document.getElementById('profile-address');
+                    document.getElementById('user-wallet').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
+                    const nicknameEl = document.getElementById('user-nickname');
                     const usernameInput = document.getElementById('username-input');
-
-                    avatarContainer.innerHTML = '';
-                    avatarContainer.appendChild(getAvatar(username));
-
-                    usernameEl.textContent = username;
-                    addressEl.textContent = currentUser.address;
+                    nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
                     usernameInput.value = currentUser.username || '';
                 };
                 
@@ -707,7 +735,7 @@ def index():
                     e.preventDefault();
                     const newUsername = document.getElementById('username-input').value.trim();
                     if (!newUsername || newUsername.length < 3) {
-                        showStatus('Никнейм должен быть не короче 3 символов.');
+                        showStatus('Никнейм должен быть не короче 3 символов.', 'error');
                         return;
                     }
                     try {
@@ -718,7 +746,7 @@ def index():
                         });
                         currentUser.username = newUsername;
                         updateUserInfo();
-                        showStatus('Никнейм успешно обновлен!');
+                        showStatus('Никнейм успешно обновлен!', 'success');
                         fetchChatrooms();
                         if (activeChatroomId) fetchMessages(activeChatroomId); 
                     } catch (err) {}
@@ -733,77 +761,57 @@ def index():
                             body: JSON.stringify({ address: currentUser.address })
                         });
                         currentUser.username = data.username;
-                    } catch (err) { currentUser.username = null; }
-                    
+                    } catch (err) {
+                        currentUser.username = null;
+                    }
                     updateUserInfo();
                     loginView.style.display = 'none';
-                    appView.style.display = 'flex';
-                    switchView('chats-page');
+                    appWrapper.style.display = 'flex';
+                    showView('chats');
                     fetchChatrooms();
                 };
 
-                const renderList = (containerId, items, itemRenderer) => {
-                    const listContainer = document.getElementById(containerId);
-                    listContainer.innerHTML = '';
-                    if (items.length === 0) {
-                        listContainer.innerHTML = `<p style="text-align: center; color: var(--text-secondary-color); padding: 40px;">Список пуст</p>`;
-                    } else {
-                        items.forEach(item => {
-                            listContainer.appendChild(itemRenderer(item));
-                        });
-                    }
-                };
-
-                const createChatroomItem = (room) => {
-                    chatroomsData[room.id] = room;
-                    const item = document.createElement('div');
-                    item.className = 'list-item';
-                    item.dataset.id = room.id;
-                    item.appendChild(getAvatar(room.name));
-
-                    const infoDiv = document.createElement('div');
-                    infoDiv.className = 'item-info';
-                    infoDiv.innerHTML = `<div class="item-name">${room.name}</div><div class="item-detail">${room.is_private ? 'Приватный чат' : 'Публичный чат'}</div>`;
-                    item.appendChild(infoDiv);
+                const renderChatrooms = (rooms) => {
+                    const list = document.getElementById('chatroom-list');
+                    list.innerHTML = '';
+                    chatroomsData = {};
+                    rooms.forEach(room => {
+                        chatroomsData[room.id] = room;
+                        const item = document.createElement('div');
+                        item.className = 'chatroom-item';
+                        item.dataset.id = room.id;
+                        
+                        item.appendChild(getAvatar(room.name));
+
+                        const infoDiv = document.createElement('div');
+                        infoDiv.className = 'chatroom-info';
+                        const nameSpan = document.createElement('div');
+                        nameSpan.className = 'chatroom-name';
+                        nameSpan.textContent = room.name;
+                        infoDiv.appendChild(nameSpan);
+                        item.appendChild(infoDiv);
+
+                        if (room.is_private) {
+                            const lockIcon = document.createElement('div');
+                            lockIcon.innerHTML = `<svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>`;
+                            item.appendChild(lockIcon);
+                        }
 
-                    if (room.is_private) {
-                        item.innerHTML += `<svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>`;
-                    }
-                    item.addEventListener('click', () => selectChatroom(room.id, room.is_private));
-                    return item;
+                        item.addEventListener('click', () => selectChatroom(room.id, room.is_private));
+                        list.appendChild(item);
+                    });
                 };
-
+                
                 const fetchChatrooms = async () => {
                     try {
                         const data = await apiCall('/api/chatrooms');
-                        renderList('chats-page-content', data.chatrooms, createChatroomItem);
-                    } catch (err) {}
-                };
-
-                const createUserItem = (user) => {
-                    const item = document.createElement('div');
-                    item.className = 'list-item';
-                    item.appendChild(getAvatar(user.username));
-
-                    const infoDiv = document.createElement('div');
-                    infoDiv.className = 'item-info';
-                    infoDiv.innerHTML = `<div class="item-name">${user.username || 'Без имени'}</div><div class="item-detail">${truncateAddress(user.address)}</div>`;
-                    item.appendChild(infoDiv);
-
-                    item.addEventListener('click', () => showProfile(user.address));
-                    return item;
-                };
-                
-                const fetchUsers = async () => {
-                    try {
-                        const data = await apiCall('/api/users');
-                        renderList('users-page-content', data.users, createUserItem);
+                        renderChatrooms(data.chatrooms);
                     } catch (err) {}
                 };
 
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
-                    const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 50;
+                    const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 30;
                     container.innerHTML = '';
                     messages.forEach(msg => {
                         const msgDiv = document.createElement('div');
@@ -811,6 +819,7 @@ def index():
 
                         const avatar = getAvatar(msg.display_name);
                         avatar.classList.add('message-avatar');
+                        avatar.style.cursor = 'pointer';
                         avatar.onclick = () => showProfile(msg.sender_address);
                         
                         const contentDiv = document.createElement('div');
@@ -827,11 +836,15 @@ def index():
 
                         contentDiv.appendChild(senderDiv);
                         contentDiv.appendChild(bubbleDiv);
+
                         msgDiv.appendChild(contentDiv);
                         msgDiv.insertBefore(avatar, contentDiv);
                         container.appendChild(msgDiv);
                     });
-                    if(shouldScroll) container.scrollTop = container.scrollHeight;
+
+                    if(shouldScroll) {
+                        container.scrollTop = container.scrollHeight;
+                    }
                 };
                 
                 const fetchMessages = async (roomId) => {
@@ -843,6 +856,20 @@ def index():
                     }
                 };
                 
+                const showChatView = () => {
+                    chatWindowView.style.display = 'flex';
+                    if (window.innerWidth < 768) {
+                        chatroomListView.style.display = 'none';
+                    }
+                };
+
+                const showListView = () => {
+                    chatroomListView.style.display = 'flex';
+                    if (window.innerWidth < 768) {
+                        chatWindowView.style.display = 'none';
+                    }
+                };
+
                 const selectChatroom = (roomId, isPrivate) => {
                     const roomData = chatroomsData[roomId];
                     if (!roomData) return;
@@ -855,8 +882,11 @@ def index():
                         const headerAvatar = document.getElementById('chat-header-avatar');
                         headerAvatar.innerHTML = '';
                         headerAvatar.appendChild(getAvatar(roomData.name));
+
+                        chatPlaceholder.style.display = 'none';
+                        activeChat.style.display = 'flex';
+                        showChatView();
                         
-                        chatWindowView.classList.add('active');
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
                     };
@@ -897,9 +927,12 @@ def index():
                 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();
                     if (text && activeChatroomId) {
+                        input.value = '';
                         input.disabled = true;
+                        sendBtn.disabled = true;
                         try {
                             await apiCall('/api/send_message', {
                                 method: 'POST',
@@ -910,22 +943,23 @@ def index():
                                     text: text
                                 })
                             });
-                            input.value = '';
                             await fetchMessages(activeChatroomId);
                             document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
                         } finally {
                             input.disabled = false;
+                            sendBtn.disabled = false;
                             input.focus();
                         }
                     }
                 });
 
+                const createRoomModal = document.getElementById('create-room-modal');
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
-                    document.getElementById('create-room-modal').style.display = 'flex';
+                    createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
                 });
                 document.getElementById('create-room-cancel').addEventListener('click', () => {
-                    document.getElementById('create-room-modal').style.display = 'none';
+                    createRoomModal.style.display = 'none';
                 });
                 document.getElementById('create-room-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
@@ -939,24 +973,13 @@ def index():
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify({ name, password: password || null, creator_address: currentUser.address })
                         });
-                        document.getElementById('create-room-modal').style.display = 'none';
-                        showStatus('Чат успешно создан!');
+                        createRoomModal.style.display = 'none';
+                        showStatus('Чат успешно создан!', 'success');
                         fetchChatrooms();
                     } catch (err) {}
                 });
 
                 const showProfile = async (address) => {
-                    if (!address) return;
-                    
-                    const isMyProfile = address === currentUser.address;
-                    if (isMyProfile) {
-                        updateUserInfo(); // Ensure my profile is up to date
-                        switchView('profile-page');
-                        return;
-                    }
-                    
-                    // For viewing other users, we might use a modal on desktop
-                    // or a dedicated view on mobile. For simplicity, we use one component.
                     try {
                         const userData = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -965,82 +988,69 @@ def index():
                         });
                         
                         const username = userData.username || `User ${truncateAddress(address)}`;
-                        const profilePage = document.getElementById('profile-page');
-                        const profileOverlay = document.getElementById('profile-page-overlay');
-                        const closeBtn = document.getElementById('profile-page-close-btn');
-
-                        // Populate the profile page with the other user's data
-                        const avatarContainer = profilePage.querySelector('.profile-header .avatar');
+                        const avatarContainer = document.getElementById('profile-avatar-container');
+                        const usernameEl = document.getElementById('profile-username');
+                        const addressEl = document.getElementById('profile-address');
+                        const qrCodeEl = document.getElementById('profile-qr-code');
+                        const sendTonBtn = document.getElementById('send-ton-btn');
+                        
                         avatarContainer.innerHTML = '';
                         avatarContainer.appendChild(getAvatar(username));
-                        profilePage.querySelector('#profile-username').textContent = username;
-                        profilePage.querySelector('#profile-address').textContent = address;
                         
-                        // QR Code
-                        const qrCodeEl = document.getElementById('profile-qr-code');
+                        usernameEl.textContent = username;
+                        addressEl.textContent = address;
+                        
                         qrCodeEl.innerHTML = '';
-                        if (profileQrCode) profileQrCode.clear();
-                        profileQrCode = new QRCode(qrCodeEl, { text: address, width: 180, height: 180 });
-
-                        // Show/hide buttons
-                        document.getElementById('username-form').style.display = 'none';
-                        document.getElementById('disconnect-btn').style.display = 'none';
-                        document.getElementById('send-ton-btn').style.display = 'block';
-
-                        document.getElementById('send-ton-btn').onclick = () => handleSendTon(address);
-
-                        profilePage.classList.add('active'); // Show it
-                        profileOverlay.style.display = 'block';
-                        closeBtn.style.display = 'block';
-
-                        const closeProfile = () => {
-                           profilePage.classList.remove('active');
-                           profileOverlay.style.display = 'none';
-                           closeBtn.style.display = 'none';
-                           // Restore my profile view state
-                           document.getElementById('username-form').style.display = 'flex';
-                           document.getElementById('disconnect-btn').style.display = 'block';
+                        if (profileQrCode) {
+                            profileQrCode.clear();
                         }
-                        closeBtn.onclick = closeProfile;
-                        profileOverlay.onclick = closeProfile;
+                        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;
+                            }
+                            const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
+                            if (amountString === null) return;
+                            
+                            const amount = parseFloat(amountString);
+                            if (isNaN(amount) || amount <= 0) {
+                                showStatus('Неверная сумма.', 'error');
+                                return;
+                            }
+                            
+                            const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
+
+                            const transaction = {
+                                validUntil: Math.floor(Date.now() / 1000) + 600,
+                                messages: [ { address: address, amount: amountInNanoTon } ]
+                            };
 
+                            try {
+                                await tonConnectUI.sendTransaction(transaction);
+                                showStatus(`Транзакция отправлена успешно!`, 'success');
+                                profileModal.style.display = 'none';
+                            } catch (error) {
+                                showStatus('Транзакция отклонена.', 'error');
+                            }
+                        };
+                        
+                        sendTonBtn.style.display = (address === currentUser.address) ? 'none' : 'block';
+                        profileModal.style.display = 'flex';
                     } catch (err) {
-                        showStatus('Не удалось загрузить профиль.');
+                        showStatus('Не удалось загрузить профиль.', 'error');
                     }
                 };
-                
-                const handleSendTon = async (recipientAddress) => {
-                    if (!tonConnectUI.connected) {
-                        showStatus('Подключите кошелек для отправки TON.');
-                        return;
-                    }
-                    const amountString = prompt("Введите сумму в TON для отправки:", "0.1");
-                    if (amountString === null) return;
-                    
-                    const amount = parseFloat(amountString);
-                    if (isNaN(amount) || amount <= 0) {
-                        showStatus('Неверная сумма.');
-                        return;
-                    }
-                    
-                    const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
-                    const transaction = {
-                        validUntil: Math.floor(Date.now() / 1000) + 600,
-                        messages: [ { address: recipientAddress, amount: amountInNanoTon } ]
-                    };
-                    try {
-                        await tonConnectUI.sendTransaction(transaction);
-                        showStatus(`Транзакция отправлена успешно!`);
-                    } catch (error) {
-                        showStatus('Транзакция отклонена.');
-                    }
-                };
-
-                document.getElementById('send-ton-btn').onclick = () => handleSendTon(document.getElementById('profile-address').textContent);
-                document.getElementById('disconnect-btn').addEventListener('click', () => tonConnectUI.disconnect());
 
                 const showScanner = () => {
-                    const scannerModal = document.getElementById('scanner-modal');
                     scannerModal.style.display = 'flex';
                     html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
@@ -1048,38 +1058,85 @@ def index():
                         if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
                             showProfile(decodedText);
                         } else {
-                            showStatus('Отсканирован недействительный QR-код.');
+                            showStatus('Отсканирован недействительный QR-код.', 'error');
                         }
                     };
                     const config = { fps: 10, qrbox: { width: 250, height: 250 } };
                     html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
-                            showStatus('Не удалось запустить сканер.');
+                            showStatus('Не удалось запустить сканер.', 'error');
                             hideScanner();
                         });
                 };
+
                 const hideScanner = () => {
-                    const scannerModal = document.getElementById('scanner-modal');
                     if (html5QrCode && html5QrCode.isScanning) {
-                        html5QrCode.stop().catch(err => console.error("QR scanner stop failed.", err));
+                        html5QrCode.stop().catch(err => console.error("Failed to stop QR scanner.", err));
                     }
                     scannerModal.style.display = 'none';
                 };
-                document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
+                
+                const showView = (viewName) => {
+                    currentNavView = viewName;
+                    document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+                    document.getElementById(`nav-${viewName}`).classList.add('active');
+
+                    if (viewName === 'chats') {
+                        if (window.innerWidth < 768) {
+                            chatroomListView.style.display = 'flex';
+                            chatWindowView.style.display = 'none';
+                        }
+                    } else if (viewName === 'users') {
+                        showStatus('Функционал списка пользователей в разработке.', 'info');
+                    } else if (viewName === 'scan') {
+                        showScanner();
+                    } else if (viewName === 'profile') {
+                        if (currentUser.address) showProfile(currentUser.address);
+                    }
+                };
 
-                document.getElementById('back-to-list-btn').addEventListener('click', () => {
-                    chatWindowView.classList.remove('active');
-                    if (messagePollingInterval) clearInterval(messagePollingInterval);
-                    activeChatroomId = null;
-                });
+                document.getElementById('nav-chats').addEventListener('click', () => showView('chats'));
+                document.getElementById('nav-users').addEventListener('click', () => showView('users'));
+                document.getElementById('nav-scan').addEventListener('click', () => showView('scan'));
+                document.getElementById('nav-profile').addEventListener('click', () => showView('profile'));
+
+                document.getElementById('my-profile-btn').addEventListener('click', () => showView('profile'));
+                document.getElementById('scan-qr-btn').addEventListener('click', () => showView('scan'));
+                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', () => showView('chats'));
                 
+                const handleResize = () => {
+                    const isMobile = window.innerWidth < 768;
+                    bottomNav.style.display = isMobile ? 'flex' : 'none';
+                    
+                    if (!isMobile) {
+                        chatroomListView.style.display = 'flex';
+                        chatWindowView.style.display = 'flex';
+                    } else {
+                        if (currentNavView === 'chats') {
+                             chatroomListView.style.display = 'flex';
+                             chatWindowView.style.display = 'none';
+                        } else if (activeChat.style.display === 'flex') {
+                            chatroomListView.style.display = 'none';
+                            chatWindowView.style.display = 'flex';
+                        } else {
+                            chatroomListView.style.display = 'flex';
+                            chatWindowView.style.display = 'none';
+                        }
+                    }
+                };
+
+                window.addEventListener('resize', handleResize);
+                handleResize();
+
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
                         const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
                         initializeUser(address);
                     } else {
                         currentUser = { address: null, username: null };
-                        appView.style.display = 'none';
+                        appWrapper.style.display = 'none';
                         loginView.style.display = 'flex';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = null;
@@ -1092,16 +1149,6 @@ def index():
     '''
     return Response(html_content, mimetype='text/html')
 
-@app.route('/api/users', methods=['GET'])
-def get_users():
-    db = read_db()
-    users_list = []
-    for address, user_data in db['users'].items():
-        users_list.append({
-            'address': address,
-            'username': user_data.get('username')
-        })
-    return jsonify({'users': sorted(users_list, key=lambda x: x.get('username') or '')})
 
 @app.route('/api/user_data', methods=['POST'])
 def get_user_data():