Update app.py

app.py

@@ -40,24 +40,20 @@ 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 {
-                --tg-bg-color: #18222d;
-                --tg-secondary-bg-color: #1f2b36;
-                --tg-header-bg-color: #222e3a;
-                --tg-text-color: #ffffff;
-                --tg-hint-color: #8c98a3;
-                --tg-link-color: #52a0e2;
-                --tg-button-color: #52a0e2;
-                --tg-button-text-color: #ffffff;
-                --tg-seperator-color: #2a3742;
-                --tg-accent-blue: #3390ec;
-                --tg-sent-bubble: #3390ec;
-                --tg-received-bubble: #27333e;
-                --tg-icon-color: #8c98a3;
-                --success-color: #28a745;
-                --error-color: #dc3545;
+                --bg-primary: #000000;
+                --bg-secondary: #1C1C1E;
+                --bg-tertiary: #2C2C2E;
+                --bg-hover: #3A3A3C;
+                --text-primary: #FFFFFF;
+                --text-secondary: #8E8E93;
+                --accent-blue: #007AFF;
+                --accent-blue-light: #3395FF;
+                --border-color: #38383A;
+                --success-color: #34C759;
+                --error-color: #FF3B30;
                 --font-family: 'Inter', sans-serif;
             }
 
@@ -74,23 +70,22 @@ def index():
 
             body {
                 font-family: var(--font-family);
-                background-color: var(--tg-bg-color);
-                color: var(--tg-text-color);
+                background-color: var(--bg-primary);
+                color: var(--text-primary);
                 overflow: hidden;
-                height: 100vh;
+                height: 100dvh;
                 width: 100vw;
                 display: flex;
                 align-items: center;
                 justify-content: center;
             }
-
-            .main-container {
+            
+            .app-container, .main-container {
                 width: 100%;
                 height: 100%;
                 display: flex;
                 flex-direction: column;
                 transition: opacity 0.3s ease;
-                background-color: var(--tg-bg-color);
             }
 
             #login-view {
@@ -99,70 +94,76 @@ def index():
                 align-items: center;
                 justify-content: center;
                 text-align: center;
+                width: 100%;
+                height: 100%;
+                background: radial-gradient(circle, #1a2a3a 0%, var(--bg-primary) 70%);
             }
             #login-view img {
                 width: 120px;
                 height: 120px;
                 margin-bottom: 24px;
-                filter: drop-shadow(0 0 20px rgba(82, 160, 226, 0.4));
+                filter: drop-shadow(0 0 25px rgba(0, 122, 255, 0.6));
             }
             #login-view h1 {
                 font-size: 3rem;
                 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(--tg-hint-color);
+                color: var(--text-secondary);
                 margin-bottom: 40px;
             }
 
-            #app-view {
+            #app-container {
                 display: none;
-                width: 100%;
-                height: 100%;
-                flex-direction: column;
+            }
+            
+            .main-content {
+                flex-grow: 1;
+                position: relative;
+                overflow: hidden;
             }
 
-            .view {
-                display: none;
+            .page {
+                position: absolute;
+                top: 0;
+                left: 0;
                 width: 100%;
-                height: calc(100% - 65px); /* Height minus bottom nav */
+                height: 100%;
+                background-color: var(--bg-primary);
+                display: none;
                 flex-direction: column;
             }
-            .view.active {
+            .page.active {
                 display: flex;
             }
 
-            .view-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 12px 16px;
-                background-color: var(--tg-header-bg-color);
-                border-bottom: 1px solid var(--tg-seperator-color);
+            .page-header {
                 flex-shrink: 0;
-                height: 56px;
+                padding: 16px;
+                padding-top: 24px;
+                background-color: var(--bg-secondary);
+                border-bottom: 1px solid var(--border-color);
             }
-            .view-header h2 {
-                font-size: 1.3rem;
-                font-weight: 600;
+            .page-header h2 {
+                font-size: 1.8rem;
+                font-weight: 700;
             }
-            
-            .header-action-btn {
-                background: none;
-                border: none;
-                cursor: pointer;
+
+            .content-area {
+                flex-grow: 1;
+                overflow-y: auto;
                 padding: 8px;
             }
-            .header-action-btn svg {
-                width: 24px;
-                height: 24px;
-                fill: var(--tg-icon-color);
-            }
 
-            #chats-view {
-                flex-direction: row;
+            #chats-page-content {
+                display: flex;
+                width: 100%;
+                height: 100%;
             }
 
             #chatroom-list-view {
@@ -170,23 +171,33 @@ def index():
                 flex-direction: column;
                 height: 100%;
                 width: 100%;
-                background-color: var(--tg-secondary-bg-color);
+                background-color: var(--bg-primary);
             }
-            
-            #chatroom-list {
-                flex-grow: 1;
-                overflow-y: auto;
+
+            .list-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 12px 16px;
+                border-bottom: 1px solid var(--border-color);
+                flex-shrink: 0;
+            }
+            .list-header h2 {
+                font-size: 1.5rem;
+                font-weight: 600;
             }
-            .chatroom-item {
+            
+            #chatroom-list { flex-grow: 1; overflow-y: auto; }
+            .list-item, .chatroom-item {
                 display: flex;
                 align-items: center;
                 gap: 12px;
-                padding: 10px 16px;
+                padding: 12px 16px;
                 cursor: pointer;
-                border-bottom: 1px solid var(--tg-seperator-color);
+                border-bottom: 1px solid var(--border-color);
                 transition: background-color 0.2s ease;
             }
-            .chatroom-item:hover { background-color: var(--tg-header-bg-color); }
+            .list-item:hover, .chatroom-item:hover { background-color: var(--bg-hover); }
 
             .avatar {
                 width: 48px;
@@ -195,28 +206,32 @@ def index():
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                font-size: 1.2rem;
                 font-weight: 600;
                 color: white;
-                font-size: 1.4rem;
                 flex-shrink: 0;
             }
-            .chatroom-info {
+            .item-info {
                 flex-grow: 1;
                 overflow: hidden;
             }
-            .chatroom-name {
-                font-weight: 600;
-                font-size: 1.1rem;
+            .item-name {
+                font-weight: 500;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .item-subtext {
+                font-size: 0.9rem;
+                color: var(--text-secondary);
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
             .lock-icon {
-                width: 16px;
-                height: 16px;
-                fill: var(--tg-hint-color);
+                width: 16px; height: 16px;
+                fill: var(--text-secondary);
                 flex-shrink: 0;
-                margin-left: 8px;
             }
 
             #chat-window-view {
@@ -224,41 +239,28 @@ def index():
                 flex-direction: column;
                 height: 100%;
                 width: 100%;
-                background-color: var(--tg-bg-color);
-            }
-            #chat-window-view.active {
-                display: flex;
+                background-color: var(--bg-primary);
             }
             
             .chat-header {
                 display: flex;
                 align-items: center;
                 gap: 12px;
-                padding: 8px 16px;
-                background-color: var(--tg-header-bg-color);
-                border-bottom: 1px solid var(--tg-seperator-color);
+                padding: 12px 16px;
+                background-color: rgba(28, 28, 30, 0.8);
+                -webkit-backdrop-filter: blur(10px);
+                backdrop-filter: blur(10px);
+                border-bottom: 1px solid var(--border-color);
                 flex-shrink: 0;
-                height: 56px;
+                position: relative;
+                z-index: 10;
             }
             .back-btn {
-                background: none;
-                border: none;
-                cursor: pointer;
-            }
-            .back-btn svg {
-                width: 24px;
-                height: 24px;
-                fill: var(--tg-text-color);
-            }
-            #chat-header-avatar {
-                width: 40px;
-                height: 40px;
-                font-size: 1.2rem;
-            }
-            #chat-header-title {
-                font-size: 1.2rem;
-                font-weight: 600;
+                background: none; border: none; cursor: pointer;
+                display: flex; align-items: center; justify-content: center;
             }
+            .back-btn svg { width: 28px; height: 28px; fill: var(--accent-blue); }
+            #chat-header-title { font-size: 1.1rem; font-weight: 600; }
 
             #messages-container {
                 flex-grow: 1;
@@ -272,330 +274,242 @@ def index():
             .message {
                 display: flex;
                 gap: 10px;
-                max-width: 80%;
-            }
-            .message .avatar {
-                width: 36px;
-                height: 36px;
-                align-self: flex-end;
+                max-width: 85%;
+                align-items: flex-end;
             }
             .message-content {
                 display: flex;
                 flex-direction: column;
-                gap: 4px;
-            }
-            .message-sender {
-                font-size: 0.9rem;
-                font-weight: 600;
-                color: var(--tg-link-color);
-                word-break: break-all;
-                cursor: pointer;
             }
             .message-bubble {
                 padding: 10px 14px;
-                border-radius: 18px;
+                border-radius: 20px;
                 line-height: 1.4;
                 word-wrap: break-word;
+                font-size: 1.05rem;
+            }
+            .message-sender {
+                font-size: 0.8rem;
+                font-weight: 600;
+                color: var(--text-secondary);
+                word-break: break-all;
+                cursor: pointer;
+                padding: 0 12px 4px;
             }
 
-            .message.sent { align-self: flex-end; flex-direction: row-reverse; }
+            .message.sent { align-self: flex-end; }
             .message.sent .message-bubble {
-                background-color: var(--tg-sent-bubble);
+                background: var(--accent-blue);
                 color: white;
-                border-bottom-right-radius: 4px;
+                border-bottom-right-radius: 5px;
             }
 
             .message.received { align-self: flex-start; }
             .message.received .message-bubble {
-                background-color: var(--tg-received-bubble);
-                border-bottom-left-radius: 4px;
+                background-color: var(--bg-tertiary);
+                border-bottom-left-radius: 5px;
+            }
+            .message.received .message-sender {
+                color: var(--accent-blue-light);
             }
             
             .chat-placeholder {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                height: 100%;
-                text-align: center;
-                color: var(--tg-hint-color);
-                padding: 20px;
+                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 12px;
-                gap: 12px;
-                background-color: var(--tg-header-bg-color);
-                border-top: 1px solid var(--tg-seperator-color);
+                display: flex; padding: 12px; gap: 12px;
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
                 flex-shrink: 0;
-                align-items: center;
             }
             #message-input {
-                flex-grow: 1;
-                padding: 12px 16px;
-                border: none;
-                background-color: var(--tg-secondary-bg-color);
-                color: var(--tg-text-color);
-                border-radius: 22px;
-                outline: none;
-                font-size: 1rem;
-            }
-            #message-input:focus {
-                box-shadow: 0 0 0 2px var(--tg-link-color);
-            }
-
-            .send-btn {
-                width: 44px;
-                height: 44px;
-                border-radius: 50%;
-                flex-shrink: 0;
-                padding: 0;
-                background-color: var(--tg-button-color);
-                border: none;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            .send-btn svg { width: 22px; height: 22px; fill: white; }
-
-            .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: 1000;
-                -webkit-backdrop-filter: blur(5px);
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background-color: var(--tg-secondary-bg-color);
-                padding: 24px;
-                border-radius: 12px;
-                width: 90%;
-                max-width: 400px;
-                border: 1px solid var(--tg-seperator-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(--tg-hint-color); }
-            .modal-content input {
-                width: 100%;
-                padding: 12px;
-                margin-bottom: 16px;
-                background-color: var(--tg-bg-color);
-                border: 1px solid var(--tg-seperator-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: 8px;
-                border: none;
-                cursor: pointer;
-                font-weight: 600;
-                font-size: 1rem;
+                flex-grow: 1; 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;
             }
-            .secondary-btn { background-color: var(--tg-header-bg-color); color: white; }
-            .action-btn { background-color: var(--tg-button-color); color: var(--tg-button-text-color); }
+            #message-input:focus { border-color: var(--accent-blue); }
             
-            #status-bar {
-                position: fixed;
-                bottom: 80px;
-                left: 50%;
-                transform: translateX(-50%);
-                background-color: var(--tg-secondary-bg-color);
-                color: white;
-                padding: 12px 20px;
-                border-radius: 8px;
-                font-size: 0.9rem;
-                opacity: 0;
-                visibility: hidden;
-                transition: opacity 0.3s, visibility 0.3s, bottom 0.3s;
-                z-index: 2000;
-                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            .action-btn {
+                background: var(--accent-blue);
+                color: white; border: none; padding: 10px 16px; border-radius: 8px;
+                cursor: pointer; font-weight: 500; font-size: 1rem;
+                transition: background-color 0.2s ease, transform 0.2s ease;
+                display: flex; align-items: center; justify-content: center; gap: 8px;
             }
-            #status-bar.success { background-color: var(--success-color); }
-            #status-bar.error { background-color: var(--error-color); }
-            #status-bar.visible { opacity: 1; visibility: visible; }
+            .action-btn:hover { background-color: var(--accent-blue-light); }
+            .action-btn:active { transform: scale(0.95); }
 
-            #bottom-nav {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                height: 65px;
-                background-color: var(--tg-header-bg-color);
-                border-top: 1px solid var(--tg-seperator-color);
+            .send-btn { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; padding: 0; }
+            .send-btn svg { width: 22px; height: 22px; fill: white; margin-left: 2px; }
+
+            .bottom-nav {
                 display: flex;
-                justify-content: space-around;
-                align-items: center;
-                z-index: 100;
+                flex-shrink: 0;
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
             }
-            .nav-btn {
+            .nav-item {
+                flex: 1;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
-                background: none;
-                border: none;
-                color: var(--tg-icon-color);
+                padding: 6px 0;
                 cursor: pointer;
-                padding: 4px 0;
-                flex-grow: 1;
-                height: 100%;
+                color: var(--text-secondary);
                 transition: color 0.2s;
             }
-            .nav-btn.active { color: var(--tg-link-color); }
-            .nav-btn svg {
-                width: 28px;
-                height: 28px;
-                fill: currentColor;
-                margin-bottom: 2px;
+            .nav-item.active { color: var(--accent-blue); }
+            .nav-item svg { width: 26px; height: 26px; fill: currentColor; }
+            .nav-item span { font-size: 0.7rem; margin-top: 2px; }
+            .nav-item#nav-scan-qr {
+                transform: translateY(-15px);
             }
-            .nav-btn span { font-size: 0.75rem; font-weight: 500; }
-            #scan-qr-nav-btn {
-                transform: translateY(-20px);
-                background-color: var(--tg-button-color);
-                color: white;
-                width: 60px;
-                height: 60px;
-                border-radius: 50%;
-                box-shadow: 0 4px 15px rgba(82, 160, 226, 0.4);
-                border: 4px solid var(--tg-secondary-bg-color);
+            .nav-item#nav-scan-qr .scan-button {
+                width: 60px; height: 60px; border-radius: 50%;
+                background: linear-gradient(45deg, var(--accent-blue-light), var(--accent-blue));
+                display: flex; align-items: center; justify-content: center;
+                box-shadow: 0 0 20px rgba(0, 122, 255, 0.5);
+                border: 4px solid var(--bg-primary);
             }
-            #scan-qr-nav-btn svg { width: 32px; height: 32px; margin: 0; }
-            #scan-qr-nav-btn.active { background-color: #3b8ac9; }
+            .nav-item#nav-scan-qr .scan-button svg { width: 32px; height: 32px; fill: white; }
 
-            .content-list {
-                flex-grow: 1;
-                overflow-y: auto;
+            #browser-view {
+                background-color: var(--bg-secondary);
             }
-            .list-item {
+            .browser-header {
                 display: flex;
-                align-items: center;
-                gap: 12px;
-                padding: 10px 16px;
-                cursor: pointer;
-                border-bottom: 1px solid var(--tg-seperator-color);
-                transition: background-color 0.2s ease;
+                gap: 8px;
+                padding: 12px;
+                background-color: var(--bg-tertiary);
+                border-bottom: 1px solid var(--border-color);
             }
-            .list-item:hover { background-color: var(--tg-header-bg-color); }
-            .list-item .info { overflow: hidden; }
-            .list-item .name { font-weight: 600; font-size: 1.1rem; }
-            .list-item .details { color: var(--tg-hint-color); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-            #browser-view .view-header { padding: 8px; }
-            #browser-controls { display: flex; align-items: center; gap: 8px; width: 100%; }
-            #browser-url-input {
-                flex-grow: 1;
-                padding: 8px 12px;
-                border: 1px solid var(--tg-seperator-color);
-                background-color: var(--tg-secondary-bg-color);
-                color: var(--tg-text-color);
-                border-radius: 18px;
-                outline: none;
-                font-size: 0.9rem;
+            #url-input {
+                flex-grow: 1; padding: 8px 12px;
+                background-color: var(--bg-primary);
+                border: 1px solid var(--border-color);
+                color: var(--text-primary); border-radius: 6px; font-size: 0.9rem;
             }
-            #browser-iframe {
-                width: 100%;
-                height: 100%;
+            #browser-frame {
+                flex-grow: 1;
                 border: none;
+                background-color: #fff;
             }
-
-            #profile-view {
-                align-items: center;
+            
+            #profile-page .content-area {
                 padding: 24px;
+                display: flex; flex-direction: column; align-items: center;
                 text-align: center;
-                overflow-y: auto;
             }
-            #profile-view-avatar { width: 100px; height: 100px; font-size: 3rem; margin-bottom: 16px; }
-            #profile-view-username { font-size: 1.5rem; font-weight: 700; }
-            #profile-view-address {
-                color: var(--tg-hint-color);
-                font-size: 0.9rem;
-                word-break: break-all;
-                margin: 8px 0 24px 0;
-            }
-            #profile-view-qr { background: white; padding: 10px; margin: 0 auto 24px auto; width: fit-content; border-radius: 8px; }
-            #profile-view .username-form { display: flex; gap: 8px; max-width: 320px; width: 100%; margin-bottom: 24px; }
-            #profile-view .username-input {
-                flex-grow: 1;
-                background-color: var(--tg-secondary-bg-color);
-                border: 1px solid var(--tg-seperator-color);
-                color: var(--tg-text-color);
-                border-radius: 8px;
-                padding: 12px;
-                font-size: 1rem;
+            #profile-page .avatar { width: 100px; height: 100px; font-size: 3rem; margin-bottom: 16px; }
+            #profile-page-username { font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; }
+            #profile-page-address { font-size: 0.9rem; color: var(--text-secondary); word-break: break-all; margin-bottom: 24px; }
+            #profile-page-qr { background: white; padding: 10px; margin-bottom: 24px; border-radius: 8px; }
+            .username-form { display: flex; gap: 8px; width: 100%; max-width: 300px; margin-top: 20px;}
+            .username-input {
+                flex-grow: 1; background-color: var(--bg-tertiary);
+                border: 1px solid var(--border-color); color: var(--text-primary);
+                border-radius: 6px; padding: 10px 12px; font-size: 1rem;
             }
-            #profile-view .username-submit { padding: 12px 16px; border-radius: 8px; }
+            .username-input:focus { outline: none; border-color: var(--accent-blue); }
 
-            .full-width-btn {
-                width: 100%;
-                max-width: 320px;
-                padding: 14px;
-                border-radius: 8px;
-                font-size: 1rem;
-                font-weight: 600;
-                margin-top: 10px;
+            .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: 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: 80px; 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, bottom 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; }
+
+            .side-nav { display: none; }
 
             @media (min-width: 768px) {
-                .main-container {
-                    max-width: 1100px;
-                    max-height: 800px;
+                body {
+                    background-color: #0F0F11;
+                }
+                .app-container, .main-container {
+                    flex-direction: row;
+                    max-width: 1200px;
+                    max-height: 90vh;
                     border-radius: 12px;
                     overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
-                    border: 1px solid var(--tg-seperator-color);
-                    flex-direction: row;
+                    border: 1px solid var(--border-color);
                 }
-                #app-view {
-                    flex-direction: row;
-                }
-                #bottom-nav {
-                    position: relative;
+                .bottom-nav { display: none; }
+                .side-nav {
+                    display: flex;
                     flex-direction: column;
-                    width: 80px;
-                    height: 100%;
-                    justify-content: flex-start;
-                    padding-top: 20px;
-                    gap: 15px;
-                    border-top: none;
-                    border-right: 1px solid var(--tg-seperator-color);
+                    width: 70px;
+                    background-color: var(--bg-secondary);
+                    border-right: 1px solid var(--border-color);
+                    padding: 16px 0;
+                    align-items: center;
+                    gap: 16px;
                 }
-                #scan-qr-nav-btn {
-                    transform: none;
-                    position: relative;
-                    margin: 15px 0;
+                .side-nav .nav-item {
+                    width: 100%;
+                    color: var(--text-secondary);
+                    padding: 12px 0;
                 }
-                .nav-btn svg { margin-bottom: 5px; }
-                .nav-btn span { font-size: 0.8rem; }
-                .view {
-                    height: 100%;
-                    width: calc(100% - 80px);
+                .side-nav .nav-item.active {
+                    color: var(--accent-blue);
+                    background-color: var(--bg-hover);
                 }
-                #status-bar { bottom: 20px; }
-                #chats-view { display: flex !important; }
+                .side-nav .nav-item#nav-scan-qr { transform: none; }
+                .side-nav .nav-item#nav-scan-qr .scan-button {
+                     width: 48px; height: 48px; border: none;
+                }
+                .side-nav .nav-item#nav-scan-qr .scan-button svg { width: 24px; height: 24px; }
+
+                #chats-page-content { flex-direction: row; }
                 #chatroom-list-view {
-                    width: 340px;
+                    width: 320px;
                     flex-shrink: 0;
-                    border-right: 1px solid var(--tg-seperator-color);
+                    border-right: 1px solid var(--border-color);
+                    display: flex !important;
                 }
                 #chat-window-view {
-                    display: flex !important;
+                    width: auto;
                     flex-grow: 1;
+                    display: flex !important;
                 }
                 .back-btn { display: none !important; }
+
+                #status-bar { bottom: 20px; }
             }
         </style>
     </head>
@@ -607,99 +521,111 @@ def index():
             <p>Децентрализованный и анонимный мессенджер</p>
             <div id="ton-connect-button"></div>
         </div>
-
-        <div id="app-view" class="main-container">
-            
-            <div id="chats-view" class="view active">
-                <div id="chatroom-list-view">
-                    <div class="view-header">
-                        <h2>Чаты</h2>
-                        <button id="create-room-show-modal" class="header-action-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 7h-2v2h-2v-2H9v-2h2V9h2v2h2v2z"/></svg>
-                        </button>
-                    </div>
-                    <div id="chatroom-list" class="content-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>
-                            </button>
-                            <div id="chat-header-avatar" class="avatar"></div>
-                            <span id="chat-header-title"></span>
+        
+        <div id="app-container">
+            <nav class="side-nav">
+                <a class="nav-item" data-view="chats">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
+                    <span>Чаты</span>
+                </a>
+                <a class="nav-item" data-view="users">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
+                    <span>Люди</span>
+                </a>
+                <a class="nav-item" id="nav-scan-qr">
+                    <div class="scan-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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>
+                </a>
+                <a class="nav-item" 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.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
+                    <span>Браузер</span>
+                </a>
+                <a class="nav-item" data-view="profile">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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>
+                </a>
+            </nav>
+            <div class="main-content">
+                <div id="chats-page" class="page active">
+                    <div id="chats-page-content">
+                        <div id="chatroom-list-view">
+                            <div class="list-header">
+                                <h2>Чаты</h2>
+                                <button id="create-room-show-modal" class="action-btn">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                                </button>
+                            </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="M15.41 7.41 14 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>
+                                <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"><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>
                 </div>
-            </div>
-
-            <div id="users-view" class="view">
-                 <div class="view-header">
-                    <h2>Пользователи</h2>
+                <div id="users-page" class="page">
+                    <div class="page-header"><h2>Люди</h2></div>
+                    <div id="users-list-container" class="content-area"></div>
                 </div>
-                <div id="user-list" class="content-list"></div>
-            </div>
-
-            <div id="browser-view" class="view">
-                <div class="view-header">
-                    <div id="browser-controls">
-                        <button id="browser-back-btn" class="header-action-btn"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg></button>
-                        <button id="browser-forward-btn" class="header-action-btn"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12l-4.58 4.59z"/></svg></button>
-                        <form id="browser-form" style="display: contents;">
-                           <input type="text" id="browser-url-input" placeholder="https://">
+                <div id="browser-page" class="page">
+                    <form class="browser-header" id="browser-form">
+                        <input type="text" id="url-input" class="username-input" placeholder="Введите URL или поисковый запрос">
+                        <button type="submit" class="action-btn">Go</button>
+                    </form>
+                    <iframe id="browser-frame" src="https://duckduckgo.com/html"></iframe>
+                </div>
+                <div id="profile-page" class="page">
+                    <div class="page-header"><h2>Профиль</h2></div>
+                    <div class="content-area">
+                        <div id="profile-page-avatar" class="avatar"></div>
+                        <h3 id="profile-page-username"></h3>
+                        <p id="profile-page-address"></p>
+                        <div id="profile-page-qr"></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">✓</button>
                         </form>
-                        <button id="browser-reload-btn" class="header-action-btn"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg></button>
                     </div>
                 </div>
-                <iframe id="browser-iframe" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" src="https://www.google.com/webhp?igu=1"></iframe>
-            </div>
-
-            <div id="profile-view" class="view">
-                <div id="profile-view-avatar" class="avatar"></div>
-                <h3 id="profile-view-username"></h3>
-                <p id="profile-view-address"></p>
-                <div id="profile-view-qr"></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 username-submit">✓</button>
-                </form>
-                <p style="color: var(--tg-hint-color); font-size: 0.9rem; margin-bottom: 24px;">Баланс кошелька: <strong id="user-balance">недоступен</strong><br/><small>(Проверяйте в вашем кошельке)</small></p>
-                <button id="disconnect-btn" class="full-width-btn secondary-btn">Отключить кошелек</button>
             </div>
-
-            <nav id="bottom-nav">
-                <button class="nav-btn active" data-view="chats-view">
+            <nav class="bottom-nav">
+                <a class="nav-item" data-view="chats">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
                     <span>Чаты</span>
-                </button>
-                <button class="nav-btn" data-view="users-view">
+                </a>
+                <a class="nav-item" data-view="users">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
-                    <span>Контакты</span>
-                </button>
-                <button class="nav-btn" id="scan-qr-nav-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
-                </button>
-                <button class="nav-btn" data-view="browser-view">
+                    <span>Люди</span>
+                </a>
+                <a class="nav-item" id="nav-scan-qr">
+                    <div class="scan-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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>
+                </a>
+                <a class="nav-item" 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.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                     <span>Браузер</span>
-                </button>
-                <button class="nav-btn" data-view="profile-view">
+                </a>
+                <a class="nav-item" data-view="profile">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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>
-                </button>
+                </a>
             </nav>
         </div>
         
@@ -732,14 +658,15 @@ def index():
                 </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-modal-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
+                <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
                 <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
-                <p id="profile-address" style="color: var(--tg-hint-color); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></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>
@@ -750,7 +677,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader" style="width: 100%; border: 1px solid var(--tg-seperator-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></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>
@@ -772,29 +699,27 @@ def index():
                 let chatroomsData = {};
                 let html5QrCode = null;
                 let profileQrCode = null;
-                let userProfileQrCode = null;
-                let browserHistory = [];
-                let browserHistoryIndex = -1;
+                let myProfileQrCode = null;
                 
                 const loginView = document.getElementById('login-view');
-                const appView = document.getElementById('app-view');
+                const appContainer = document.getElementById('app-container');
                 const chatroomListView = document.getElementById('chatroom-list-view');
                 const chatWindowView = document.getElementById('chat-window-view');
+                const chatPlaceholder = document.getElementById('chat-placeholder');
+                const activeChat = document.getElementById('active-chat');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
+                const navItems = document.querySelectorAll('.nav-item[data-view]');
+                const pages = document.querySelectorAll('.page');
 
-                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292', '#a1887f'];
+                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292', '#ff8a65', '#a1887f', '#90a4ae'];
 
-                const getAvatar = (name, size) => {
+                const getAvatar = (name, sizeClass = '') => {
                     const initial = (name ? name[0] : '?').toUpperCase();
                     const charCode = initial.charCodeAt(0);
                     const color = AVATAR_COLORS[charCode % AVATAR_COLORS.length];
                     const avatar = document.createElement('div');
-                    avatar.className = 'avatar';
-                    if (size) {
-                        avatar.style.width = size;
-                        avatar.style.height = size;
-                    }
+                    avatar.className = 'avatar ' + sizeClass;
                     avatar.style.backgroundColor = color;
                     avatar.textContent = initial;
                     return avatar;
@@ -806,6 +731,7 @@ def index():
                     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);
                 };
@@ -826,30 +752,11 @@ def index():
                 };
                 
                 const truncateAddress = (address) => address ? `${address.substring(0, 6)}...${address.substring(address.length - 6)}` : '';
-                
-                const updateProfileView = () => {
-                    if (!currentUser.address) return;
-                    
-                    const username = currentUser.username || `User ${truncateAddress(currentUser.address)}`;
-                    const avatarContainer = document.getElementById('profile-view-avatar');
-                    avatarContainer.innerHTML = '';
-                    avatarContainer.appendChild(getAvatar(username));
 
-                    document.getElementById('profile-view-username').textContent = username;
-                    document.getElementById('profile-view-address').textContent = currentUser.address;
+                const updateUserInfo = () => {
+                    if (!currentUser.address) return;
                     document.getElementById('username-input').value = currentUser.username || '';
-                    
-                    const qrEl = document.getElementById('profile-view-qr');
-                    qrEl.innerHTML = '';
-                    if (userProfileQrCode) userProfileQrCode.clear();
-                    userProfileQrCode = new QRCode(qrEl, {
-                        text: currentUser.address,
-                        width: 180,
-                        height: 180,
-                        colorDark: "#000000",
-                        colorLight: "#ffffff",
-                        correctLevel: QRCode.CorrectLevel.H
-                    });
+                    renderMyProfilePage();
                 };
                 
                 document.getElementById('username-form').addEventListener('submit', async (e) => {
@@ -866,7 +773,7 @@ def index():
                             body: JSON.stringify({ address: currentUser.address, username: newUsername })
                         });
                         currentUser.username = newUsername;
-                        updateProfileView();
+                        updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
                         fetchChatrooms();
                         if (activeChatroomId) fetchMessages(activeChatroomId); 
@@ -885,9 +792,10 @@ def index():
                     } catch (err) {
                         currentUser.username = null;
                     }
+                    updateUserInfo();
                     loginView.style.display = 'none';
-                    appView.style.display = 'flex';
-                    switchTab('chats-view');
+                    appContainer.style.display = 'flex';
+                    switchView('chats');
                     fetchChatrooms();
                 };
 
@@ -904,9 +812,9 @@ def index():
                         item.appendChild(getAvatar(room.name));
 
                         const infoDiv = document.createElement('div');
-                        infoDiv.className = 'chatroom-info';
+                        infoDiv.className = 'item-info';
                         const nameSpan = document.createElement('div');
-                        nameSpan.className = 'chatroom-name';
+                        nameSpan.className = 'item-name';
                         nameSpan.textContent = room.name;
                         infoDiv.appendChild(nameSpan);
                         item.appendChild(infoDiv);
@@ -921,36 +829,6 @@ def index():
                         list.appendChild(item);
                     });
                 };
-
-                const fetchAndRenderUsers = async () => {
-                    try {
-                        const data = await apiCall('/api/users');
-                        const list = document.getElementById('user-list');
-                        list.innerHTML = '';
-                        data.users.forEach(user => {
-                            const item = document.createElement('div');
-                            item.className = 'list-item';
-                            item.onclick = () => showProfileModal(user.address);
-                            
-                            item.appendChild(getAvatar(user.username || user.address));
-
-                            const infoDiv = document.createElement('div');
-                            infoDiv.className = 'info';
-                            const nameSpan = document.createElement('div');
-                            nameSpan.className = 'name';
-                            nameSpan.textContent = user.username || 'Без имени';
-                            const addressSpan = document.createElement('div');
-                            addressSpan.className = 'details';
-                            addressSpan.textContent = truncateAddress(user.address);
-                            
-                            infoDiv.appendChild(nameSpan);
-                            infoDiv.appendChild(addressSpan);
-                            item.appendChild(infoDiv);
-                            
-                            list.appendChild(item);
-                        });
-                    } catch (err) {}
-                };
                 
                 const fetchChatrooms = async () => {
                     try {
@@ -961,40 +839,44 @@ def index():
 
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
-                    const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 30;
+                    const shouldScroll = container.scrollTop + container.clientHeight >= container.scrollHeight - 50;
                     container.innerHTML = '';
                     messages.forEach(msg => {
+                        const isSent = msg.sender_address === currentUser.address;
                         const msgDiv = document.createElement('div');
-                        msgDiv.className = 'message ' + (msg.sender_address === currentUser.address ? 'sent' : 'received');
+                        msgDiv.className = 'message ' + (isSent ? 'sent' : 'received');
 
-                        const avatar = getAvatar(msg.display_name);
-                        avatar.classList.add('message-avatar');
-                        avatar.style.cursor = 'pointer';
-                        avatar.onclick = () => showProfileModal(msg.sender_address);
-                        
                         const contentDiv = document.createElement('div');
                         contentDiv.className = 'message-content';
 
-                        const senderDiv = document.createElement('div');
-                        senderDiv.className = 'message-sender';
-                        if (msg.sender_address !== currentUser.address) {
-                            senderDiv.textContent = msg.display_name;
-                            senderDiv.onclick = () => showProfileModal(msg.sender_address);
-                        }
-                        
                         const bubbleDiv = document.createElement('div');
                         bubbleDiv.className = 'message-bubble';
                         bubbleDiv.textContent = msg.text;
 
-                        if (msg.sender_address !== currentUser.address) {
+                        if (!isSent) {
+                            const senderDiv = document.createElement('div');
+                            senderDiv.className = 'message-sender';
+                            senderDiv.textContent = msg.display_name;
+                            senderDiv.onclick = () => showProfile(msg.sender_address);
                             contentDiv.appendChild(senderDiv);
                         }
+                        
                         contentDiv.appendChild(bubbleDiv);
                         msgDiv.appendChild(contentDiv);
-                        msgDiv.insertBefore(avatar, contentDiv);
+                        
+                        if (!isSent) {
+                            const avatar = getAvatar(msg.display_name);
+                            avatar.style.cursor = 'pointer';
+                            avatar.onclick = () => showProfile(msg.sender_address);
+                            msgDiv.appendChild(avatar);
+                        }
+
                         container.appendChild(msgDiv);
                     });
-                    if(shouldScroll) container.scrollTop = container.scrollHeight;
+
+                    if(shouldScroll) {
+                        container.scrollTop = container.scrollHeight;
+                    }
                 };
                 
                 const fetchMessages = async (roomId) => {
@@ -1006,20 +888,18 @@ def index():
                     }
                 };
                 
-                const showChatWindow = () => {
-                    chatWindowView.classList.add('active');
+                const showChatView = () => {
+                    chatWindowView.style.display = 'flex';
                     if (window.innerWidth < 768) {
                         chatroomListView.style.display = 'none';
                     }
                 };
 
-                const hideChatWindow = () => {
-                    chatWindowView.classList.remove('active');
+                const showListView = () => {
+                    chatroomListView.style.display = 'flex';
                     if (window.innerWidth < 768) {
-                        chatroomListView.style.display = 'flex';
+                        chatWindowView.style.display = 'none';
                     }
-                    if (messagePollingInterval) clearInterval(messagePollingInterval);
-                    activeChatroomId = null;
                 };
 
                 const selectChatroom = (roomId, isPrivate) => {
@@ -1035,9 +915,9 @@ def index():
                         headerAvatar.innerHTML = '';
                         headerAvatar.appendChild(getAvatar(roomData.name));
 
-                        document.getElementById('chat-placeholder').style.display = 'none';
-                        document.getElementById('active-chat').style.display = 'flex';
-                        showChatWindow();
+                        chatPlaceholder.style.display = 'none';
+                        activeChat.style.display = 'flex';
+                        showChatView();
                         
                         fetchMessages(roomId);
                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
@@ -1050,6 +930,7 @@ def index():
                         passwordModal.style.display = 'flex';
                         passwordInput.value = '';
                         passwordInput.focus();
+
                         const formSubmitHandler = async (e) => {
                             e.preventDefault();
                             passwordForm.removeEventListener('submit', formSubmitHandler);
@@ -1065,6 +946,7 @@ def index():
                             } catch (err) {}
                         };
                         passwordForm.addEventListener('submit', formSubmitHandler);
+
                         document.getElementById('password-cancel').onclick = () => {
                             passwordModal.style.display = 'none';
                             passwordForm.removeEventListener('submit', formSubmitHandler);
@@ -1080,7 +962,7 @@ def index():
                     const sendBtn = document.getElementById('send-btn');
                     const text = input.value.trim();
                     if (text && activeChatroomId) {
-                        const originalText = input.value;
+                        const originalText = text;
                         input.value = '';
                         input.disabled = true;
                         sendBtn.disabled = true;
@@ -1089,14 +971,17 @@ def index():
                                 method: 'POST',
                                 headers: { 'Content-Type': 'application/json' },
                                 body: JSON.stringify({
-                                    chatroom_id: activeChatroomId, sender_address: currentUser.address, text: text
+                                    chatroom_id: activeChatroomId,
+                                    sender_address: currentUser.address,
+                                    text: text
                                 })
                             });
                             await fetchMessages(activeChatroomId);
                             document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
-                        } catch (err) {
+                        } catch(err) {
                             input.value = originalText;
-                        } finally {
+                        }
+                        finally {
                             input.disabled = false;
                             sendBtn.disabled = false;
                             input.focus();
@@ -1109,12 +994,15 @@ def index():
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
                 });
-                document.getElementById('create-room-cancel').addEventListener('click', () => createRoomModal.style.display = 'none');
+                document.getElementById('create-room-cancel').addEventListener('click', () => {
+                    createRoomModal.style.display = 'none';
+                });
                 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;
                     if (!name) return;
+
                     try {
                         await apiCall('/api/create_chatroom', {
                             method: 'POST',
@@ -1127,43 +1015,54 @@ def index():
                     } catch (err) {}
                 });
 
-                const showProfileModal = async (address) => {
-                    if (address === currentUser.address) {
-                        switchTab('profile-view');
-                        return;
-                    }
+                const showProfile = async (address) => {
                     try {
                         const userData = await apiCall('/api/user_data', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify({ address: address })
                         });
+                        
                         const username = userData.username || `User ${truncateAddress(address)}`;
-                        document.getElementById('profile-modal-title').textContent = username;
-                        const avatarContainer = document.getElementById('profile-modal-avatar-container');
-                        avatarContainer.innerHTML = '';
-                        avatarContainer.appendChild(getAvatar(username, '80px'));
+                        const avatarContainer = document.getElementById('profile-avatar-container');
+                        
                         document.getElementById('profile-username').textContent = username;
                         document.getElementById('profile-address').textContent = address;
+                        
+                        avatarContainer.innerHTML = '';
+                        avatarContainer.appendChild(getAvatar(username));
+                        
                         const qrCodeEl = document.getElementById('profile-qr-code');
                         qrCodeEl.innerHTML = '';
                         if (profileQrCode) profileQrCode.clear();
-                        profileQrCode = new QRCode(qrCodeEl, { text: address, width: 150, height: 150 });
+                        profileQrCode = new QRCode(qrCodeEl, {
+                            text: address, width: 150, height: 150,
+                            colorDark : "#000000", colorLight : "#ffffff",
+                            correctLevel : QRCode.CorrectLevel.H
+                        });
                         
-                        document.getElementById('send-ton-btn').onclick = async () => {
+                        const sendTonBtn = document.getElementById('send-ton-btn');
+                        sendTonBtn.onclick = async () => {
                             if (!tonConnectUI.connected) {
-                                showStatus('Подключите кошелек для отправки TON.', 'error'); return;
+                                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;
+                                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: Math.floor(amount * 1e9).toString() }]
+                                messages: [ { address: address, amount: amountInNanoTon } ]
                             };
+
                             try {
                                 await tonConnectUI.sendTransaction(transaction);
                                 showStatus(`Транзакция отправлена успешно!`, 'success');
@@ -1172,6 +1071,7 @@ def index():
                                 showStatus('Транзакция отклонена.', 'error');
                             }
                         };
+                        
                         profileModal.style.display = 'flex';
                     } catch (err) {
                         showStatus('Не удалось загрузить профиль.', 'error');
@@ -1180,13 +1080,11 @@ def index():
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    if (!html5QrCode) {
-                        html5QrCode = new Html5Qrcode("qr-reader");
-                    }
+                    html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                         hideScanner();
                         if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
-                            showProfileModal(decodedText);
+                            showProfile(decodedText);
                         } else {
                             showStatus('Отсканирован недействительный QR-код.', 'error');
                         }
@@ -1194,127 +1092,128 @@ def index():
                     const config = { fps: 10, qrbox: { width: 250, height: 250 } };
                     html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
-                            showStatus('Не удалось запустить сканер. Проверьте разрешения камеры.', 'error');
+                            showStatus('Не удалось запустить сканер.', 'error');
                             hideScanner();
                         });
                 };
 
                 const hideScanner = () => {
                     if (html5QrCode && html5QrCode.isScanning) {
-                        html5QrCode.stop().catch(err => {});
+                        html5QrCode.stop().catch(err => console.error("Failed to stop QR scanner.", err));
                     }
                     scannerModal.style.display = 'none';
                 };
                 
+                document.querySelectorAll('#nav-scan-qr').forEach(el => el.addEventListener('click', showScanner));
                 document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
-                document.getElementById('scan-qr-nav-btn').addEventListener('click', showScanner);
                 document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
-                document.getElementById('back-to-list-btn').addEventListener('click', hideChatWindow);
-                document.getElementById('disconnect-btn').addEventListener('click', () => tonConnectUI.disconnect());
-
-                const switchTab = (viewId) => {
-                    document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
-                    document.getElementById(viewId).classList.add('active');
+                document.getElementById('back-to-list-btn').addEventListener('click', showListView);
+                
+                const switchView = (viewName) => {
+                    pages.forEach(p => p.classList.remove('active'));
+                    document.getElementById(`${viewName}-page`).classList.add('active');
 
-                    document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
-                    const navBtn = document.querySelector(`.nav-btn[data-view="${viewId}"]`);
-                    if (navBtn) navBtn.classList.add('active');
+                    navItems.forEach(n => n.classList.remove('active'));
+                    document.querySelectorAll(`.nav-item[data-view="${viewName}"]`).forEach(n => n.classList.add('active'));
 
-                    if (viewId === 'users-view') fetchAndRenderUsers();
-                    if (viewId === 'profile-view') updateProfileView();
+                    if(viewName === 'users') fetchAndRenderUsers();
+                    if(viewName === 'profile') renderMyProfilePage();
                 };
 
-                document.querySelectorAll('.nav-btn[data-view]').forEach(btn => {
-                    btn.addEventListener('click', () => switchTab(btn.dataset.view));
+                navItems.forEach(item => {
+                    item.addEventListener('click', () => switchView(item.dataset.view));
                 });
                 
-                const browserIframe = document.getElementById('browser-iframe');
-                const browserUrlInput = document.getElementById('browser-url-input');
-                
-                const navigateBrowser = (url, isFromHistory = false) => {
-                    let fullUrl = url;
-                    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                        fullUrl = 'https://' + url;
-                    }
-                    browserUrlInput.value = fullUrl;
-                    browserIframe.src = fullUrl;
+                const fetchAndRenderUsers = async () => {
+                    try {
+                        const data = await apiCall('/api/users');
+                        const container = document.getElementById('users-list-container');
+                        container.innerHTML = '';
+                        data.users.forEach(user => {
+                            if (user.address === currentUser.address) return;
+                            
+                            const item = document.createElement('div');
+                            item.className = 'list-item';
+                            item.onclick = () => showProfile(user.address);
 
-                    if (!isFromHistory) {
-                        if (browserHistoryIndex < browserHistory.length - 1) {
-                            browserHistory = browserHistory.slice(0, browserHistoryIndex + 1);
-                        }
-                        browserHistory.push(fullUrl);
-                        browserHistoryIndex = browserHistory.length - 1;
-                    }
-                    updateBrowserNavButtons();
-                };
+                            item.appendChild(getAvatar(user.username || user.address));
+                            const infoDiv = document.createElement('div');
+                            infoDiv.className = 'item-info';
 
-                const updateBrowserNavButtons = () => {
-                    document.getElementById('browser-back-btn').disabled = browserHistoryIndex <= 0;
-                    document.getElementById('browser-forward-btn').disabled = browserHistoryIndex >= browserHistory.length - 1;
+                            const nameSpan = document.createElement('div');
+                            nameSpan.className = 'item-name';
+                            nameSpan.textContent = user.username || 'Без имени';
+                            infoDiv.appendChild(nameSpan);
+
+                            const subtextSpan = document.createElement('div');
+                            subtextSpan.className = 'item-subtext';
+                            subtextSpan.textContent = truncateAddress(user.address);
+                            infoDiv.appendChild(subtextSpan);
+                            
+                            item.appendChild(infoDiv);
+                            container.appendChild(item);
+                        });
+                    } catch (err) {}
+                };
+                
+                const renderMyProfilePage = () => {
+                    const name = currentUser.username || 'Без имени';
+                    document.getElementById('profile-page-avatar').innerHTML = '';
+                    document.getElementById('profile-page-avatar').appendChild(getAvatar(name));
+                    document.getElementById('profile-page-username').textContent = name;
+                    document.getElementById('profile-page-address').textContent = currentUser.address;
+
+                    const qrEl = document.getElementById('profile-page-qr');
+                    qrEl.innerHTML = '';
+                    if (myProfileQrCode) myProfileQrCode.clear();
+                    myProfileQrCode = new QRCode(qrEl, {
+                        text: currentUser.address, width: 200, height: 200,
+                        colorDark : "#000000", colorLight : "#ffffff",
+                        correctLevel : QRCode.CorrectLevel.H
+                    });
                 };
 
                 document.getElementById('browser-form').addEventListener('submit', (e) => {
                     e.preventDefault();
-                    const url = browserUrlInput.value.trim();
-                    if(url) navigateBrowser(url);
-                });
-                document.getElementById('browser-reload-btn').addEventListener('click', () => {
-                    if (browserIframe.src) browserIframe.src = browserIframe.src;
-                });
-                document.getElementById('browser-back-btn').addEventListener('click', () => {
-                    if (browserHistoryIndex > 0) {
-                        browserHistoryIndex--;
-                        navigateBrowser(browserHistory[browserHistoryIndex], true);
-                    }
-                });
-                document.getElementById('browser-forward-btn').addEventListener('click', () => {
-                    if (browserHistoryIndex < browserHistory.length - 1) {
-                        browserHistoryIndex++;
-                        navigateBrowser(browserHistory[browserHistoryIndex], true);
+                    const input = document.getElementById('url-input').value.trim();
+                    const frame = document.getElementById('browser-frame');
+                    let url = input;
+                    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                         if(url.includes('.') && !url.includes(' ')) {
+                            url = 'https://' + url;
+                         } else {
+                            url = `https://duckduckgo.com/html?q=${encodeURIComponent(url)}`;
+                         }
                     }
+                    frame.src = url;
                 });
                 
-                const handleResize = () => {
-                    const isDesktop = window.innerWidth >= 768;
-                    if (isDesktop) {
-                        document.getElementById('chatroom-list-view').style.display = 'flex';
-                        if (!activeChatroomId) {
-                            document.getElementById('chat-placeholder').style.display = 'flex';
-                            document.getElementById('active-chat').style.display = 'none';
-                        }
-                        const activeView = document.querySelector('.view.active');
-                        if (activeView.id !== 'chats-view') {
-                           document.getElementById('chats-view').classList.remove('active');
-                        }
+                window.addEventListener('resize', () => {
+                    if (window.innerWidth >= 768) {
+                       chatroomListView.style.display = 'flex';
+                       chatWindowView.style.display = 'flex';
                     } else {
-                       if (activeChatroomId) {
-                           document.getElementById('chatroom-list-view').style.display = 'none';
-                           document.getElementById('chat-window-view').classList.add('active');
+                       if (activeChat.style.display === 'flex') {
+                           chatroomListView.style.display = 'none';
                        } else {
-                           document.getElementById('chatroom-list-view').style.display = 'flex';
-                           document.getElementById('chat-window-view').classList.remove('active');
+                           chatroomListView.style.display = 'flex';
+                           chatWindowView.style.display = 'none';
                        }
                     }
-                };
-                window.addEventListener('resize', 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';
+                        appContainer.style.display = 'none';
                         loginView.style.display = 'flex';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                         activeChatroomId = null;
-                        browserHistory = [];
-                        browserHistoryIndex = -1;
                     }
                 });
-
-                navigateBrowser('https://www.google.com/webhp?igu=1');
             });
         </script>
     </body>
@@ -1331,7 +1230,8 @@ def get_users():
             'address': address,
             'username': user_data.get('username')
         })
-    return jsonify({'users': sorted(users_list, key=lambda x: x.get('username') or '')})
+    users_list.sort(key=lambda u: (u['username'] is None, u['username']))
+    return jsonify({'users': users_list})
 
 @app.route('/api/user_data', methods=['POST'])
 def get_user_data():
@@ -1457,6 +1357,7 @@ def send_message():
     write_db(db)
     return jsonify({'success': True})
 
+
 if __name__ == '__main__':
     init_db()
     app.run(host='0.0.0.0', port=7860)