updated the ui

app.py

@@ -41,6 +41,10 @@ class ConnectionManager:
             "joined_at": datetime.now().isoformat()
         }
         self.active_connections[room].append(connection_info)
+
+        # Send message history to new user before broadcasting the fresh join event
+        for message in self.message_history[room]:
+            await websocket.send_text(json.dumps(message))
         
         # Send join notification
         join_message = {
@@ -50,10 +54,7 @@ class ConnectionManager:
             "room": room
         }
         await self.broadcast_to_room(room, join_message)
-        
-        # Send message history to new user
-        for message in self.message_history[room]:
-            await websocket.send_text(json.dumps(message))
+        await self.broadcast_user_list(room)
     
     def disconnect(self, websocket: WebSocket, room: str):
         if room in self.active_connections:
@@ -86,6 +87,26 @@ class ConnectionManager:
         # Remove disconnected clients
         for conn in disconnected:
             self.active_connections[room].remove(conn)
+
+    async def broadcast_user_list(self, room: str):
+        if room not in self.active_connections:
+            return
+
+        users_message = {
+            "type": "user_list",
+            "users": self.get_room_users(room),
+            "room": room
+        }
+
+        disconnected = []
+        for connection_info in self.active_connections[room]:
+            try:
+                await connection_info["websocket"].send_text(json.dumps(users_message))
+            except:
+                disconnected.append(connection_info)
+
+        for conn in disconnected:
+            self.active_connections[room].remove(conn)
     
     def get_room_users(self, room: str) -> List[str]:
         if room not in self.active_connections:
@@ -203,6 +224,7 @@ async def websocket_endpoint(websocket: WebSocket, room: str, username: str):
                 "room": room
             }
             await manager.broadcast_to_room(room, leave_message)
+            await manager.broadcast_user_list(room)
 
 @app.get("/api/rooms")
 async def get_active_rooms():

static/main.css

@@ -1,908 +1,1530 @@
-:root {
-            --primary-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-            --secondary-bg: rgba(255, 255, 255, 0.8);
-            --card-bg: rgba(255, 255, 255, 0.9);
-            --text-primary: #1a202c;
-            --text-secondary: #4a5568;
-            --text-muted: #718096;
-            --border-color: rgba(0, 0, 0, 0.08);
-            --accent-primary: #3b82f6;
-            --accent-secondary: #60a5fa;
-            --accent-success: #10b981;
-            --accent-danger: #ef4444;
-            --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05);
-            --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
-            --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.12);
-            --blur-light: blur(10px);
-            --blur-medium: blur(20px);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--primary-bg);
-            color: var(--text-primary);
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            font-size: 14px;
-            line-height: 1.5;
-            transition: all 0.3s ease;
-        }
-        
-        .header {
-            background: var(--card-bg);
-            backdrop-filter: var(--blur-medium);
-            padding: 1.5rem;
-            border-bottom: 1px solid var(--border-color);
-            box-shadow: var(--shadow-light);
-            position: relative;
-        }
-
-        .header::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
-        }
-        
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1.5rem;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
-        .logo i {
-            font-size: 1.5rem;
-            color: var(--accent-primary);
-        }
-        
-        .header h1 {
-            color: var(--text-primary);
-            font-size: 1.5rem;
-            font-weight: 700;
-            letter-spacing: -0.025em;
-        }
-
-        .connection-form {
-            display: flex;
-            gap: 1rem;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .input-group {
-            display: flex;
-            flex-direction: column;
-            gap: 0.25rem;
-            min-width: 180px;
-        }
-
-        .input-group label {
-            font-size: 0.75rem;
-            font-weight: 500;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-        
-        .connection-form input {
-            padding: 0.75rem 1rem;
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            background: var(--secondary-bg);
-            backdrop-filter: var(--blur-light);
-            color: var(--text-primary);
-            font-size: 0.875rem;
-            transition: all 0.2s ease;
-            outline: none;
-        }
-
-        .connection-form input:focus {
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-        }
-        
-        .connection-form input::placeholder {
-            color: var(--text-muted);
-        }
-        
-        .btn {
-            padding: 0.75rem 1.5rem;
-            border: none;
-            border-radius: 12px;
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            color: white;
-            cursor: pointer;
-            font-weight: 600;
-            font-size: 0.875rem;
-            transition: all 0.2s ease;
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            box-shadow: var(--shadow-light);
-        }
-
-        .btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.5s;
-        }
-
-        .btn:hover::before {
-            left: 100%;
-        }
-        
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-medium);
-        }
-        
-        .btn:active {
-            transform: translateY(0);
-        }
-        
-        .btn:disabled {
-            background: var(--text-muted);
-            cursor: not-allowed;
-            transform: none;
-            opacity: 0.6;
-        }
-
-        .btn-secondary {
-            background: transparent;
-            border: 1px solid var(--border-color);
-            color: var(--text-secondary);
-        }
-
-.btn-secondary:hover {
-    background: var(--secondary-bg);
+:root {
+    --primary-bg:
+        radial-gradient(circle at 16% 12%, rgba(96, 165, 250, 0.2), transparent 28%),
+        radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.16), transparent 30%),
+        radial-gradient(circle at 45% 92%, rgba(16, 185, 129, 0.1), transparent 28%),
+        linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    --secondary-bg: rgba(255, 255, 255, 0.66);
+    --card-bg: rgba(255, 255, 255, 0.74);
+    --glass-strong: rgba(255, 255, 255, 0.82);
+    --glass-soft: rgba(255, 255, 255, 0.48);
+    --text-primary: #1a202c;
+    --text-secondary: #4a5568;
+    --text-muted: #718096;
+    --border-color: rgba(148, 163, 184, 0.22);
+    --glass-border: rgba(255, 255, 255, 0.76);
+    --accent-primary: #3b82f6;
+    --accent-secondary: #60a5fa;
+    --accent-success: #10b981;
+    --accent-danger: #ef4444;
+    --shadow-light: 0 10px 24px rgba(15, 23, 42, 0.08);
+    --shadow-medium: 0 18px 38px rgba(59, 130, 246, 0.2), 0 6px 16px rgba(15, 23, 42, 0.08);
+    --shadow-heavy: 0 34px 90px rgba(15, 23, 42, 0.16), 0 12px 28px rgba(59, 130, 246, 0.1);
+    --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
+    --inner-depth: inset 0 -18px 42px rgba(96, 165, 250, 0.05);
+    --blur-light: blur(14px);
+    --blur-medium: blur(26px);
+    --safe-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    min-height: 100%;
+    overflow: hidden;
+}
+
+body {
+    position: relative;
+    min-height: 100dvh;
+    background: var(--primary-bg);
+    color: var(--text-primary);
+    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+body::before,
+body::after {
+    content: "";
+    position: fixed;
+    z-index: -1;
+    pointer-events: none;
+    filter: blur(4px);
+}
+
+body::before {
+    inset: 4% auto auto 7%;
+    width: 18rem;
+    height: 18rem;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 68%);
+}
+
+body::after {
+    right: 5%;
+    bottom: 5%;
+    width: 22rem;
+    height: 22rem;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(59, 130, 246, 0.16), transparent 68%);
+}
+
+button,
+input,
+textarea {
+    font: inherit;
+}
+
+button {
+    border: 0;
 }
 
 .is-hidden {
     display: none !important;
 }
-        
-        .main-content {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-            gap: 1px;
-        }
-        
-        .sidebar {
-            width: 280px;
-            background: var(--card-bg);
-            backdrop-filter: var(--blur-light);
-            border-right: 1px solid var(--border-color);
-            display: flex;
-            flex-direction: column;
-            transition: all 0.3s ease;
-        }
-
-        .sidebar-header {
-            padding: 1.5rem;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .sidebar-header h3 {
-            color: var(--text-primary);
-            font-size: 1rem;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .sidebar-header i {
-            color: var(--accent-success);
-        }
-        
-        .sidebar-content {
-            flex: 1;
-            padding: 1rem;
-            overflow-y: auto;
-        }
-        
-        .user-list {
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-        
-        .user-list li {
-            padding: 0.75rem 1rem;
-            color: var(--text-secondary);
-            background: var(--secondary-bg);
-            border-radius: 8px;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
-        .user-list li:hover {
-            background: var(--card-bg);
-            transform: translateX(2px);
-        }
-        
-        .user-list li::before {
-            content: '';
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--accent-success);
-            flex-shrink: 0;
-        }
-        
-        .chat-container {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: var(--secondary-bg);
-            backdrop-filter: var(--blur-light);
-        }
-        
-        .messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 1.5rem;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            scroll-behavior: smooth;
-        }
-
-        .messages::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .messages::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        .messages::-webkit-scrollbar-thumb {
-            background: var(--border-color);
-            border-radius: 3px;
-        }
-
-        .messages::-webkit-scrollbar-thumb:hover {
-            background: var(--text-muted);
-        }
-        
-        .message {
-            background: var(--card-bg);
-            backdrop-filter: var(--blur-light);
-            border-radius: 16px;
-            padding: 1rem 1.25rem;
-            max-width: 75%;
-            border: 1px solid var(--border-color);
-            box-shadow: var(--shadow-light);
-            position: relative;
-            animation: messageSlide 0.3s ease-out;
-        }
-
-        @keyframes messageSlide {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        
-        .message.own {
-            align-self: flex-end;
-            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-            color: white;
-            border: none;
-        }
-
-        .message.own .username,
-        .message.own .timestamp {
-            color: rgba(255, 255, 255, 0.9);
-        }
-        
-        .message.system {
-            align-self: center;
-            background: var(--secondary-bg);
-            border: 1px solid var(--border-color);
-            font-style: italic;
-            color: var(--text-muted);
-            max-width: 60%;
-            text-align: center;
-            font-size: 0.8rem;
-        }
-        
-        .message-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 0.5rem;
-            font-size: 0.75rem;
-        }
-        
-        .username {
-            font-weight: 600;
-            color: var(--accent-primary);
-        }
-
-        .message.own .username {
-            color: rgba(255, 255, 255, 0.9);
-        }
-        
-        .timestamp {
-            color: var(--text-muted);
-            font-size: 0.7rem;
-        }
-        
-        .message-content {
-            word-wrap: break-word;
-            line-height: 1.4;
-        }
-        
-        .file-preview img {
-            max-width: 200px;
-            max-height: 150px;
-            border-radius: 8px;
-            margin-top: 0.75rem;
-            box-shadow: var(--shadow-light);
-        }
-        
-        .file-download {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin-top: 0.75rem;
-            padding: 0.5rem 1rem;
-            background: var(--secondary-bg);
-            border-radius: 8px;
-            color: var(--accent-primary);
-            text-decoration: none;
-            font-size: 0.8rem;
-            transition: all 0.2s ease;
-            border: 1px solid var(--border-color);
-        }
-        
-.file-download:hover {
+
+.app-shell {
+    display: grid;
+    grid-template-columns: minmax(320px, 450px) minmax(0, 760px);
+    gap: 1rem;
+    width: min(1240px, calc(100vw - 2rem));
+    height: calc(100dvh - 2rem);
+    max-height: 900px;
+    margin: 1rem auto;
+    perspective: 1400px;
+}
+
+.connect-screen,
+.chat-screen {
+    position: relative;
+    min-height: 0;
     background: var(--card-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 28px;
+    box-shadow: var(--shadow-heavy), var(--inner-highlight), var(--inner-depth);
+    backdrop-filter: var(--blur-medium);
+    -webkit-backdrop-filter: var(--blur-medium);
+    transform-style: preserve-3d;
+}
+
+.connect-screen::before,
+.chat-screen::before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    z-index: -1;
+    border-radius: inherit;
+    background:
+        linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.18) 42%, rgba(96, 165, 250, 0.08)),
+        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.95), transparent 28%);
+    pointer-events: none;
+}
+
+.connect-screen {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(1rem, 2dvh, 1.6rem);
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: clamp(1.25rem, 3vw, 2.4rem);
+    scrollbar-gutter: stable;
+    transform: rotateY(0.5deg) translateZ(0);
+}
+
+.chat-screen {
+    overflow: hidden;
+    transform: rotateY(-0.35deg) translateZ(0);
+}
+
+.connect-screen::-webkit-scrollbar {
+    width: 6px;
+}
+
+.connect-screen::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.connect-screen::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgba(100, 116, 139, 0.24);
+}
+
+.brand-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.9rem;
+}
+
+.brand-mark {
+    display: grid;
+    place-items: center;
+    width: 52px;
+    height: 52px;
+    border-radius: 18px;
+    color: white;
+    background:
+        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.55), transparent 18%),
+        linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 58%, #2563eb);
+    box-shadow:
+        0 18px 34px rgba(59, 130, 246, 0.24),
+        inset 0 1px 0 rgba(255, 255, 255, 0.45),
+        inset 0 -10px 22px rgba(37, 99, 235, 0.28);
+    font-size: 1.55rem;
+}
+
+.brand-bar h1 {
+    font-size: clamp(1.65rem, 3vw, 2rem);
+    line-height: 1.1;
+}
+
+.brand-bar p,
+.welcome-copy p,
+.connect-tip,
+.room-meta p {
+    color: var(--text-secondary);
+}
+
+.welcome-art {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: min(58vw, 250px);
+    aspect-ratio: 1;
+    margin: 0.5rem auto 0;
+    border-radius: 50%;
+    background:
+        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.86), transparent 24%),
+        radial-gradient(circle at 38% 42%, rgba(16, 185, 129, 0.12), transparent 18%),
+        radial-gradient(circle at 70% 20%, rgba(96, 165, 250, 0.16), transparent 9%),
+        linear-gradient(145deg, rgba(59, 130, 246, 0.08), rgba(96, 165, 250, 0.06));
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.86),
+        inset 18px 24px 42px rgba(255, 255, 255, 0.48),
+        0 22px 48px rgba(59, 130, 246, 0.1);
+}
+
+.welcome-art::before,
+.welcome-art::after {
+    content: "";
+    position: absolute;
+    border-radius: 50%;
+    background: var(--accent-secondary);
+    opacity: 0.65;
+}
+
+.welcome-art::before {
+    width: 8px;
+    height: 8px;
+    right: 17%;
+    top: 28%;
+}
+
+.welcome-art::after {
+    width: 10px;
+    height: 10px;
+    left: 16%;
+    bottom: 26%;
+    background: var(--accent-primary);
+}
+
+.bubble {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.8rem;
+    border-radius: 28px;
+}
+
+.bubble span {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.bubble-primary {
+    left: 16%;
+    top: 30%;
+    width: 128px;
+    height: 78px;
+    color: white;
+    background:
+        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.55), transparent 20%),
+        linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 62%, #2563eb);
+    box-shadow:
+        0 18px 30px rgba(59, 130, 246, 0.26),
+        inset 0 1px 0 rgba(255, 255, 255, 0.4),
+        inset 0 -12px 24px rgba(37, 99, 235, 0.22);
+    animation: floatPrimary 5.5s ease-in-out infinite;
+}
+
+.bubble-primary::after {
+    content: "";
+    position: absolute;
+    left: 28px;
+    bottom: -18px;
+    border-top: 24px solid var(--accent-primary);
+    border-right: 24px solid transparent;
+}
+
+.bubble-primary span {
+    background: white;
+}
+
+.bubble-secondary {
+    right: 12%;
+    bottom: 23%;
+    width: 126px;
+    height: 72px;
+    background: rgba(255, 255, 255, 0.86);
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+    box-shadow:
+        0 20px 42px rgba(15, 23, 42, 0.11),
+        inset 0 1px 0 rgba(255, 255, 255, 0.95);
+    animation: floatSecondary 6.2s ease-in-out infinite;
+}
+
+.bubble-secondary::after {
+    content: "";
+    position: absolute;
+    right: 24px;
+    bottom: -16px;
+    border-top: 22px solid white;
+    border-left: 22px solid transparent;
+}
+
+.bubble-secondary span {
+    background: #60a5fa;
+}
+
+@keyframes floatPrimary {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 22px);
+    }
+
+    50% {
+        transform: translate3d(0, -8px, 28px);
+    }
+}
+
+@keyframes floatSecondary {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 34px);
+    }
+
+    50% {
+        transform: translate3d(5px, 7px, 40px);
+    }
+}
+
+.welcome-copy {
+    text-align: center;
+}
+
+.welcome-copy h2 {
+    margin-bottom: 0.35rem;
+    font-size: clamp(1.45rem, 3vw, 1.8rem);
+}
+
+.welcome-copy p {
+    max-width: 25rem;
+    margin: 0 auto;
+    font-size: 1rem;
+}
+
+.connection-form {
+    display: grid;
+    gap: 1rem;
+}
+
+.input-group {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.input-group label {
+    color: #64748b;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.field-shell {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr) 30px;
+    align-items: center;
+    min-height: 64px;
+    padding: 0 0.8rem;
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.62);
+    box-shadow:
+        0 12px 28px rgba(15, 23, 42, 0.06),
+        inset 0 1px 0 rgba(255, 255, 255, 0.88);
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.field-shell:focus-within {
+    border-color: rgba(96, 165, 250, 0.76);
+    box-shadow:
+        0 18px 38px rgba(59, 130, 246, 0.14),
+        0 0 0 4px rgba(59, 130, 246, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.92);
     transform: translateY(-1px);
-    box-shadow: var(--shadow-light);
+}
+
+.field-shell > i:first-child {
+    display: grid;
+    place-items: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 14px;
+    color: var(--accent-secondary);
+    background: rgba(96, 165, 250, 0.12);
+}
+
+.field-shell input {
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 1rem;
+}
+
+.field-check {
+    display: grid;
+    place-items: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    color: white;
+    background: var(--accent-success);
+    font-size: 0.72rem;
+    opacity: 0;
+    transform: scale(0.8);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.field-shell.has-value .field-check {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.btn,
+.icon-btn,
+.send-btn {
+    cursor: pointer;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    min-height: 60px;
+    padding: 0 1.2rem;
+    border-radius: 18px;
+    color: white;
+    font-size: 1.05rem;
+    font-weight: 800;
+    background:
+        radial-gradient(circle at 35% 10%, rgba(255, 255, 255, 0.45), transparent 18%),
+        linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 58%, #2563eb);
+    box-shadow:
+        0 22px 44px rgba(59, 130, 246, 0.28),
+        inset 0 1px 0 rgba(255, 255, 255, 0.45),
+        inset 0 -12px 24px rgba(37, 99, 235, 0.26);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.btn:hover,
+.send-btn:hover,
+.icon-btn:hover {
+    transform: translateY(-2px);
+}
+
+.field-shell,
+.btn,
+.icon-btn,
+.send-btn,
+.message,
+.user-list li {
+    will-change: transform;
+}
+
+.btn:active,
+.send-btn:active,
+.icon-btn:active {
+    transform: translateY(0);
+}
+
+.status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    min-height: 56px;
+    padding: 0.8rem 1rem;
+    border-radius: 18px;
+    font-weight: 700;
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
+}
+
+.status.neutral {
+    color: var(--text-muted);
+    background: rgba(255, 255, 255, 0.68);
+    border: 1px solid var(--border-color);
+}
+
+.status.connected {
+    color: #059669;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.18);
+}
+
+.status.disconnected {
+    color: var(--accent-danger);
+    background: rgba(239, 68, 68, 0.08);
+    border: 1px solid rgba(239, 68, 68, 0.16);
+}
+
+.connect-tip {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    margin-top: auto;
+    padding: 1rem;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.54));
+    border: 1px solid rgba(255, 255, 255, 0.66);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 26px rgba(15, 23, 42, 0.05);
+}
+
+.connect-tip i {
+    color: var(--accent-secondary);
+    font-size: 1.35rem;
+}
+
+.chat-screen {
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.15rem 1.25rem;
+    color: white;
+    background:
+        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.28), transparent 28%),
+        linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.24),
+        0 16px 34px rgba(59, 130, 246, 0.18);
+}
+
+.room-meta {
+    min-width: 0;
+    flex: 1;
+}
+
+.room-meta h2 {
+    overflow: hidden;
+    font-size: 1.3rem;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.room-meta p {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    color: rgba(255, 255, 255, 0.86);
+}
+
+.online-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--accent-success);
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
+}
+
+.chat-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.65rem;
+}
+
+.icon-btn {
+    display: inline-grid;
+    place-items: center;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    color: inherit;
+    background: rgba(255, 255, 255, 0.18);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px rgba(37, 99, 235, 0.12);
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.icon-btn:hover {
+    background: rgba(255, 255, 255, 0.24);
+}
+
+.mobile-back-btn,
+.users-close {
+    display: none;
+}
+
+.chat-body {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    min-height: 0;
+    flex: 1;
+}
+
+.users-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border-right: 1px solid var(--border-color);
+    background: rgba(255, 255, 255, 0.46);
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+}
+
+.users-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.users-panel-header h3 {
+    font-size: 1rem;
+}
+
+.user-list {
+    display: grid;
+    gap: 0.55rem;
+    padding: 1rem;
+    overflow-y: auto;
+    list-style: none;
+}
+
+.user-list li {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    min-width: 0;
+    padding: 0.75rem;
+    border-radius: 14px;
+    color: var(--text-secondary);
+    border: 1px solid rgba(255, 255, 255, 0.68);
+    background: rgba(255, 255, 255, 0.62);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(15, 23, 42, 0.04);
+}
+
+.user-list li::before {
+    content: "";
+    flex: 0 0 auto;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--accent-success);
+}
+
+.empty-users {
+    padding: 0 1rem 1rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+.messages-wrap {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    background:
+        radial-gradient(circle at 78% 24%, rgba(96, 165, 250, 0.08), transparent 28%),
+        radial-gradient(circle at 28% 76%, rgba(16, 185, 129, 0.06), transparent 24%),
+        rgba(255, 255, 255, 0.18);
+}
+
+.messages {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1rem;
+    min-height: 0;
+    padding: 1.25rem;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+}
+
+.messages::-webkit-scrollbar,
+.user-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.messages::-webkit-scrollbar-track,
+.user-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.messages::-webkit-scrollbar-thumb,
+.user-list::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgba(100, 116, 139, 0.28);
+}
+
+.message {
+    max-width: min(72%, 33rem);
+    padding: 0.95rem 1.1rem;
+    border: 1px solid rgba(255, 255, 255, 0.68);
+    border-radius: 18px 18px 18px 6px;
+    background: rgba(255, 255, 255, 0.72);
+    box-shadow:
+        0 14px 28px rgba(15, 23, 42, 0.08),
+        inset 0 1px 0 rgba(255, 255, 255, 0.82);
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+    animation: messageSlide 0.24s ease-out;
+}
+
+@keyframes messageSlide {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message.own {
+    align-self: flex-end;
+    border: 0;
+    border-radius: 18px 18px 6px 18px;
+    color: white;
+    background:
+        radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.32), transparent 18%),
+        linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
+    box-shadow:
+        0 18px 36px rgba(59, 130, 246, 0.24),
+        inset 0 1px 0 rgba(255, 255, 255, 0.28);
+}
+
+.message.system {
+    align-self: center;
+    max-width: 92%;
+    padding: 0.7rem 1rem;
+    border-radius: 999px;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    font-style: italic;
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    background: rgba(255, 255, 255, 0.68);
+    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.message-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 0.45rem;
+    font-size: 0.78rem;
+}
+
+.username {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--accent-secondary);
+    font-weight: 800;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.timestamp {
+    flex: 0 0 auto;
+    color: var(--text-muted);
+}
+
+.message.own .username,
+.message.own .timestamp {
+    color: rgba(255, 255, 255, 0.88);
+}
+
+.message-content {
+    overflow-wrap: anywhere;
+    font-size: 1rem;
 }
 
 .file-summary {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.45rem;
 }
 
 .file-size {
+    margin-bottom: 0.55rem;
     color: var(--text-muted);
-    font-size: 0.8rem;
-    margin-bottom: 0.5rem;
-}
-        
-        .input-area {
-            padding: 1.5rem;
-            background: var(--card-bg);
-            backdrop-filter: var(--blur-medium);
-            border-top: 1px solid var(--border-color);
-        }
-        
-        .input-row {
-            display: flex;
-            gap: 1rem;
-            align-items: flex-end;
-        }
-        
-        #messageInput {
-            flex: 1;
-            padding: 1rem 1.25rem;
-            border: 1px solid var(--border-color);
-            border-radius: 20px;
-            background: var(--secondary-bg);
-            backdrop-filter: var(--blur-light);
-            color: var(--text-primary);
-            resize: none;
-            outline: none;
-            transition: all 0.2s ease;
-            font-family: inherit;
-            max-height: 100px;
-            min-height: 44px;
-        }
-
-        #messageInput:focus {
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-        }
-        
-        #messageInput::placeholder {
-            color: var(--text-muted);
-        }
-        
-        .file-input-wrapper {
-            position: relative;
-        }
-        
-        .file-input-wrapper input[type=file] {
-            position: absolute;
-            opacity: 0;
-            width: 100%;
-            height: 100%;
-            cursor: pointer;
-        }
-        
-        .file-input-label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 44px;
-            height: 44px;
-            background: var(--secondary-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 50%;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            color: var(--text-secondary);
-        }
-        
-        .file-input-label:hover {
-            background: var(--accent-primary);
-            color: white;
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-light);
-        }
-        
-        .status {
-            padding: 0.75rem 1rem;
-            text-align: center;
-            font-size: 0.8rem;
-            border-radius: 8px;
-            margin-top: 1rem;
-            font-weight: 500;
-        }
-        
-        .status.connected {
-            color: var(--accent-success);
-            background: rgba(16, 185, 129, 0.1);
-            border: 1px solid rgba(16, 185, 129, 0.2);
-        }
-        
-        .status.disconnected {
-            color: var(--accent-danger);
-            background: rgba(239, 68, 68, 0.1);
-            border: 1px solid rgba(239, 68, 68, 0.2);
-        }
-
-        .status.neutral {
-            color: var(--text-muted);
-            background: var(--secondary-bg);
-            border: 1px solid var(--border-color);
-        }
-
-        /* Mobile optimizations */
-        @media (max-width: 768px) {
-            .header {
-                padding: 1rem;
-            }
-
-            .header-top {
-                margin-bottom: 1rem;
-            }
-
-            .header h1 {
-                font-size: 1.25rem;
-            }
-
-            .connection-form {
-                flex-direction: column;
-                gap: 0.75rem;
-                width: 100%;
-            }
-
-            .input-group {
-                width: 100%;
-                min-width: auto;
-            }
-
-            .connection-form input,
-            .btn {
-                width: 100%;
-            }
-            
-            .main-content {
-                flex-direction: column;
-                height: calc(100vh - 200px);
-            }
-            
-            .sidebar {
-                width: 100%;
-                height: 120px;
-                flex-direction: row;
-                border-right: none;
-                border-bottom: 1px solid var(--border-color);
-            }
-
-            .sidebar-header {
-                min-width: 120px;
-                border-right: 1px solid var(--border-color);
-                border-bottom: none;
-            }
-
-            .sidebar-header h3 {
-                font-size: 0.9rem;
-            }
-
-            .sidebar-content {
-                overflow-x: auto;
-                overflow-y: hidden;
-            }
-
-            .user-list {
-                flex-direction: row;
-                white-space: nowrap;
-                padding-bottom: 0.5rem;
-            }
-
-            .user-list li {
-                flex-shrink: 0;
-                font-size: 0.8rem;
-                padding: 0.5rem 0.75rem;
-            }
-            
-            .message {
-                max-width: 90%;
-                padding: 0.75rem 1rem;
-            }
-
-            .messages {
-                padding: 1rem;
-            }
-
-            .input-area {
-                padding: 1rem;
-            }
-
-            .input-row {
-                gap: 0.75rem;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .header {
-                padding: 0.75rem;
-            }
-
-            .messages {
-                padding: 0.75rem;
-                gap: 0.75rem;
-            }
-
-            .message {
-                padding: 0.75rem;
-                border-radius: 12px;
-            }
-
-            .input-area {
-                padding: 0.75rem;
-            }
-        }
-
-        * {
-            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-        }
+    font-size: 0.82rem;
+}
 
-:root {
-    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
+.message.own .file-size {
+    color: rgba(255, 255, 255, 0.75);
 }
 
-html,
-body {
-    min-height: 100%;
-    overflow: hidden;
+.file-preview img {
+    max-width: 100%;
+    max-height: 220px;
+    margin-top: 0.65rem;
+    border-radius: 12px;
+    box-shadow: var(--shadow-light);
 }
 
-button,
-input,
-textarea {
-    font: inherit;
+.file-download {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+    padding: 0.5rem 0.8rem;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    border-radius: 999px;
+    color: var(--accent-secondary);
+    background: rgba(255, 255, 255, 0.62);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
+    font-size: 0.86rem;
+    font-weight: 700;
+    text-decoration: none;
 }
 
-.mobile-users-toggle {
-    display: none;
+.input-area {
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr) 56px;
+    gap: 0.8rem;
+    align-items: end;
+    padding: 1rem;
+    padding-bottom: calc(1rem + var(--safe-bottom));
+    border-top: 1px solid var(--border-color);
+    background: rgba(255, 255, 255, 0.58);
+    backdrop-filter: var(--blur-medium);
+    -webkit-backdrop-filter: var(--blur-medium);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
 }
 
-.mobile-drawer-backdrop {
-    display: none;
+.file-input-wrapper {
+    position: relative;
 }
 
-@media (max-width: 768px) {
-    body {
-        height: 100dvh;
-        min-height: 100dvh;
+.file-input-wrapper input[type="file"] {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.file-input-label,
+.send-btn {
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+}
+
+.file-input-label {
+    width: 48px;
+    height: 48px;
+    border: 1px solid rgba(255, 255, 255, 0.78);
+    color: var(--text-secondary);
+    background: rgba(255, 255, 255, 0.68);
+    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.86);
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+    cursor: pointer;
+}
+
+#messageInput {
+    min-width: 0;
+    min-height: 48px;
+    max-height: 136px;
+    padding: 0.85rem 1rem;
+    resize: none;
+    border: 1px solid rgba(255, 255, 255, 0.78);
+    border-radius: 999px;
+    outline: 0;
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.72);
+    font-size: 1rem;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 24px rgba(15, 23, 42, 0.05);
+    backdrop-filter: var(--blur-light);
+    -webkit-backdrop-filter: var(--blur-light);
+}
+
+#messageInput:focus {
+    border-color: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.send-btn {
+    width: 56px;
+    height: 56px;
+    color: white;
+    background:
+        radial-gradient(circle at 32% 16%, rgba(255, 255, 255, 0.45), transparent 18%),
+        linear-gradient(145deg, var(--accent-secondary), var(--accent-primary) 60%, #2563eb);
+    box-shadow:
+        0 18px 36px rgba(59, 130, 246, 0.28),
+        inset 0 1px 0 rgba(255, 255, 255, 0.42),
+        inset 0 -10px 20px rgba(37, 99, 235, 0.24);
+    font-size: 1.15rem;
+}
+
+@media (min-width: 769px) {
+    .connect-screen:hover {
+        transform: rotateY(0) translateY(-2px);
     }
 
-    .header {
-        z-index: 20;
-        padding: 0.85rem;
+    .chat-screen:hover {
+        transform: rotateY(0) translateY(-2px);
+    }
+
+    .app-shell.is-chatting {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .app-shell.is-chatting .chat-screen {
+        grid-column: 1 / -1;
+        transform: none;
+    }
+
+    .chat-screen.is-hidden {
+        display: flex !important;
+    }
+
+    .chat-screen:not(.is-connected-preview) {
+        opacity: 0.96;
+    }
+
+    .chat-screen:not(.is-connected-preview) .messages::before {
+        content: "Connect to a room to begin chatting.";
+        margin: auto;
+        color: var(--text-muted);
+        font-weight: 700;
+    }
+
+    .chat-screen:not(.is-connected-preview) .input-area {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+}
+
+@media (max-width: 900px) and (min-width: 769px) {
+    .app-shell {
+        grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
+    }
+
+    .chat-body {
+        grid-template-columns: 200px minmax(0, 1fr);
     }
+}
 
-    .header-top {
+@media (min-width: 769px) and (max-height: 860px) {
+    .app-shell {
+        height: calc(100dvh - 1.5rem);
+        margin: 0.75rem auto;
+    }
+
+    .connect-screen {
+        gap: 0.85rem;
+        padding: 1.6rem;
+    }
+
+    .brand-mark {
+        width: 46px;
+        height: 46px;
+        border-radius: 16px;
+        font-size: 1.35rem;
+    }
+
+    .brand-bar h1 {
+        font-size: 1.75rem;
+    }
+
+    .brand-bar p {
+        font-size: 0.95rem;
+    }
+
+    .welcome-art {
+        width: min(42vh, 210px);
+        margin-top: 0;
+    }
+
+    .bubble-primary {
+        width: 110px;
+        height: 68px;
+    }
+
+    .bubble-secondary {
+        width: 108px;
+        height: 62px;
+    }
+
+    .welcome-copy h2 {
+        font-size: 1.45rem;
+    }
+
+    .welcome-copy p {
+        font-size: 0.95rem;
+    }
+
+    .connection-form {
         gap: 0.75rem;
-        margin-bottom: 0.75rem;
     }
 
-    .logo {
-        min-width: 0;
+    .field-shell {
+        min-height: 54px;
+        border-radius: 16px;
     }
 
-    .header h1 {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    .btn {
+        min-height: 54px;
+    }
+
+    .status {
+        min-height: 48px;
+        padding: 0.65rem 0.9rem;
+    }
+
+    .connect-tip {
+        margin-top: 0;
+        padding: 0.85rem;
+    }
+}
+
+@media (min-width: 769px) and (max-height: 760px) {
+    .app-shell {
+        height: calc(100dvh - 1rem);
+        margin: 0.5rem auto;
     }
 
-    .mobile-users-toggle {
+    .connect-screen {
+        gap: 0.65rem;
+        padding: 1.1rem 1.35rem;
+    }
+
+    .brand-mark {
         width: 42px;
         height: 42px;
-        border-radius: 50%;
-        flex: 0 0 auto;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
+        border-radius: 14px;
+        font-size: 1.2rem;
     }
 
-    .mobile-users-toggle {
-        background: var(--secondary-bg);
-        border: 1px solid var(--border-color);
-        color: var(--text-secondary);
-        cursor: pointer;
-        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
+    .brand-bar h1 {
+        font-size: 1.55rem;
     }
 
-    .mobile-users-toggle:active {
-        transform: scale(0.96);
+    .brand-bar p,
+    .welcome-copy p,
+    .connect-tip {
+        font-size: 0.9rem;
     }
 
-    .connection-form {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-        gap: 0.65rem;
-        align-items: end;
+    .welcome-art {
+        width: min(31vh, 170px);
+    }
+
+    .bubble {
+        gap: 0.55rem;
+    }
+
+    .bubble span {
+        width: 9px;
+        height: 9px;
+    }
+
+    .bubble-primary {
+        width: 88px;
+        height: 54px;
+        border-radius: 20px;
+    }
+
+    .bubble-primary::after {
+        left: 20px;
+        bottom: -13px;
+        border-top-width: 18px;
+        border-right-width: 18px;
+    }
+
+    .bubble-secondary {
+        width: 88px;
+        height: 50px;
+        border-radius: 20px;
+    }
+
+    .bubble-secondary::after {
+        right: 18px;
+        bottom: -12px;
+        border-top-width: 17px;
+        border-left-width: 17px;
+    }
+
+    .welcome-copy h2 {
+        font-size: 1.28rem;
+        margin-bottom: 0.15rem;
+    }
+
+    .input-group {
+        gap: 0.35rem;
+    }
+
+    .input-group label {
+        font-size: 0.72rem;
+    }
+
+    .field-shell {
+        grid-template-columns: 42px minmax(0, 1fr) 28px;
+        min-height: 48px;
+        border-radius: 14px;
     }
 
-    .connection-form .btn {
+    .field-shell > i:first-child {
+        width: 32px;
+        height: 32px;
+        border-radius: 12px;
+    }
+
+    .btn {
+        min-height: 48px;
+        border-radius: 14px;
+    }
+
+    .status {
         min-height: 44px;
+        border-radius: 14px;
+        font-size: 0.9rem;
+    }
+
+    .connect-tip {
+        padding: 0.7rem 0.85rem;
+        border-radius: 14px;
+    }
+}
+
+@media (max-width: 768px) {
+    body {
+        background:
+            radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.22), transparent 34%),
+            radial-gradient(circle at 15% 90%, rgba(59, 130, 246, 0.1), transparent 30%),
+            linear-gradient(155deg, #f8fafc 0%, #e8eef7 100%);
+    }
+
+    .app-shell {
+        display: block;
+        width: 100vw;
+        height: 100dvh;
+        margin: 0;
+        overflow: hidden;
+    }
+
+    .connect-screen,
+    .chat-screen {
+        width: 100%;
+        height: 100%;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        transform: none;
+    }
+
+    .connect-screen {
+        gap: clamp(0.8rem, 1.65dvh, 1.05rem);
         justify-content: center;
-        grid-column: span 2;
+        padding: clamp(1rem, 2.5dvh, 1.35rem) 1.05rem;
+        overflow-y: auto;
+        scrollbar-gutter: auto;
+        background:
+            radial-gradient(circle at 50% 23%, rgba(96, 165, 250, 0.14), transparent 28%),
+            linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.78));
     }
 
-    .connection-form input {
-        min-height: 44px;
-        font-size: 16px;
+    .brand-bar {
+        gap: 0.7rem;
+        padding-top: 0;
+    }
+
+    .brand-mark {
+        width: 42px;
+        height: 42px;
+        border-radius: 14px;
+        font-size: 1.16rem;
+    }
+
+    .brand-bar h1 {
+        font-size: 1.45rem;
+        letter-spacing: -0.02em;
+    }
+
+    .brand-bar p {
+        font-size: 0.82rem;
+    }
+
+    .welcome-art {
+        width: min(52vw, 190px);
+        margin: 0.15rem auto 0;
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.9),
+            inset 18px 24px 42px rgba(255, 255, 255, 0.5),
+            0 26px 58px rgba(59, 130, 246, 0.14);
+    }
+
+    .bubble {
+        gap: 0.5rem;
+    }
+
+    .bubble span {
+        width: 9px;
+        height: 9px;
+    }
+
+    .bubble-primary {
+        width: 92px;
+        height: 56px;
+        border-radius: 21px;
+    }
+
+    .bubble-primary::after {
+        left: 18px;
+        bottom: -11px;
+        border-top-width: 16px;
+        border-right-width: 16px;
+    }
+
+    .bubble-secondary {
+        width: 92px;
+        height: 54px;
+        border-radius: 21px;
+    }
+
+    .bubble-secondary::after {
+        right: 17px;
+        bottom: -10px;
+        border-top-width: 15px;
+        border-left-width: 15px;
+    }
+
+    .welcome-copy h2 {
+        margin-bottom: 0.25rem;
+        font-size: 1.42rem;
+        letter-spacing: -0.02em;
+    }
+
+    .welcome-copy p {
+        width: min(100%, 21rem);
+        font-size: 0.9rem;
+        line-height: 1.4;
+    }
+
+    .connection-form {
+        gap: 0.72rem;
+    }
+
+    .input-group {
+        gap: 0.36rem;
+    }
+
+    .input-group label {
+        font-size: 0.7rem;
+    }
+
+    .field-shell {
+        grid-template-columns: 42px minmax(0, 1fr) 28px;
+        min-height: 54px;
+        border-radius: 18px;
+        background: rgba(255, 255, 255, 0.82);
+        box-shadow:
+            0 14px 30px rgba(15, 23, 42, 0.07),
+            inset 0 1px 0 rgba(255, 255, 255, 0.94);
+    }
+
+    .field-shell > i:first-child {
+        width: 32px;
+        height: 32px;
+        border-radius: 12px;
+    }
+
+    .field-shell input {
+        font-size: 0.95rem;
+    }
+
+    .btn {
+        min-height: 54px;
+        border-radius: 18px;
+        font-size: 0.98rem;
+        box-shadow:
+            0 18px 34px rgba(59, 130, 246, 0.26),
+            inset 0 1px 0 rgba(255, 255, 255, 0.46),
+            inset 0 -12px 24px rgba(37, 99, 235, 0.24);
     }
 
     .status {
-        margin-top: 0.75rem;
-        padding: 0.6rem 0.75rem;
-        text-align: left;
+        justify-content: center;
+        min-height: 42px;
+        padding: 0.58rem 0.75rem;
+        border-radius: 999px;
+        font-size: 0.78rem;
+        text-align: center;
+        line-height: 1.25;
+        white-space: normal;
     }
 
-    .main-content {
-        height: auto;
-        min-height: 0;
-        flex: 1;
-        position: relative;
+    .connect-tip {
+        gap: 0.65rem;
+        margin-top: 0;
+        padding: 0.72rem 0.85rem;
+        border-radius: 18px;
+        font-size: 0.8rem;
+        line-height: 1.3;
+        background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(255, 255, 255, 0.74));
     }
 
-    .chat-container {
-        min-width: 0;
-        min-height: 0;
+    .connect-tip i {
+        font-size: 1.1rem;
     }
 
-    .messages {
+    .chat-header {
+        min-height: 92px;
+        padding: 1rem;
+        border-radius: 0 0 22px 22px;
+        box-shadow: var(--shadow-medium);
+    }
+
+    .mobile-back-btn,
+    .users-close {
+        display: inline-grid;
+    }
+
+    .desktop-disconnect-btn {
+        display: none;
+    }
+
+    .chat-body {
+        display: block;
+        position: relative;
+        flex: 1;
         min-height: 0;
-        padding: 0.85rem;
-        padding-bottom: 1rem;
     }
 
-    .message,
-    .message.system {
-        max-width: min(92%, 34rem);
-        border-radius: 14px;
+    .messages-wrap {
+        height: calc(100dvh - 92px);
     }
 
-    .message-header {
-        gap: 0.75rem;
+    .messages {
+        padding: 1rem;
     }
 
-    .message-content {
-        overflow-wrap: anywhere;
+    .message {
+        max-width: 84%;
     }
 
-    .file-preview img {
-        max-width: 100%;
-        height: auto;
+    .message.system {
+        max-width: 90%;
     }
 
-    .sidebar {
+    .users-panel {
         position: fixed;
         top: 0;
         right: 0;
         bottom: 0;
         z-index: 40;
         width: min(84vw, 320px);
-        height: auto;
-        flex-direction: column;
-        transform: translateX(105%);
         border-left: 1px solid var(--border-color);
         border-right: 0;
-        border-bottom: 0;
+        background: rgba(255, 255, 255, 0.94);
         box-shadow: var(--shadow-heavy);
-        transition: transform 0.25s ease;
+        transform: translateX(105%);
+        transition: transform 0.24s ease;
     }
 
-    body.mobile-users-open .sidebar {
+    body.users-open .users-panel {
         transform: translateX(0);
     }
 
-    .sidebar-header {
-        min-width: 0;
-        padding: 1rem;
-        border-right: 0;
-        border-bottom: 1px solid var(--border-color);
-    }
-
-    .sidebar-content {
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 0.85rem;
-    }
-
-    .user-list {
-        flex-direction: column;
-        white-space: normal;
-        padding-bottom: 0;
-    }
-
-    .user-list li {
-        width: 100%;
-        min-height: 42px;
+    .users-close {
+        color: var(--text-secondary);
+        background: rgba(15, 23, 42, 0.06);
     }
 
     .mobile-drawer-backdrop {
         position: fixed;
         inset: 0;
         z-index: 35;
-        display: block;
         pointer-events: none;
         background: rgba(15, 23, 42, 0);
-        transition: background-color 0.25s ease;
+        transition: background-color 0.24s ease;
     }
 
-    body.mobile-users-open .mobile-drawer-backdrop {
+    body.users-open .mobile-drawer-backdrop {
         pointer-events: auto;
-        background: rgba(15, 23, 42, 0.42);
+        background: rgba(15, 23, 42, 0.34);
     }
 
     .input-area {
+        grid-template-columns: 46px minmax(0, 1fr) 52px;
+        gap: 0.6rem;
         padding: 0.75rem;
-        padding-bottom: calc(0.75rem + var(--mobile-safe-bottom));
+        padding-bottom: calc(0.75rem + var(--safe-bottom));
     }
 
-    .input-row {
-        display: grid;
-        grid-template-columns: 44px minmax(0, 1fr) 48px;
-        gap: 0.55rem;
-        align-items: end;
+    .file-input-label {
+        width: 46px;
+        height: 46px;
     }
 
-    #messageInput {
-        min-height: 44px;
-        max-height: 132px;
-        padding: 0.78rem 0.95rem;
-        border-radius: 18px;
-        font-size: 16px;
+    .send-btn {
+        width: 52px;
+        height: 52px;
     }
+}
 
-    #sendBtn {
-        width: 48px;
-        height: 44px;
-        min-width: 48px;
-        padding: 0;
-        border-radius: 50%;
-        justify-content: center;
+@media (max-width: 420px) {
+    .connect-screen {
+        gap: 0.74rem;
+        padding: 0.85rem 0.9rem;
     }
 
-    #sendBtn span {
-        display: none;
+    .brand-bar h1 {
+        font-size: 1.42rem;
+    }
+
+    .welcome-copy h2 {
+        font-size: 1.32rem;
+    }
+
+    .welcome-copy p {
+        font-size: 0.85rem;
+    }
+
+    .welcome-art {
+        width: min(48vw, 170px);
+    }
+
+    .message {
+        max-width: 90%;
+        padding: 0.82rem 0.92rem;
+    }
+
+    .room-meta h2 {
+        font-size: 1.15rem;
     }
 }
 
-@media (max-width: 480px) {
-    .header {
-        padding: 0.7rem;
+@media (max-width: 420px) and (max-height: 700px) {
+    .connect-screen {
+        gap: 0.56rem;
+        padding: 0.6rem 0.75rem;
     }
 
-    .connection-form {
-        grid-template-columns: 1fr;
+    .brand-mark {
+        width: 38px;
+        height: 38px;
+        border-radius: 13px;
+        font-size: 1.05rem;
     }
 
-    .connection-form .btn {
-        grid-column: auto;
+    .brand-bar h1 {
+        font-size: 1.35rem;
     }
 
-    .input-group label {
-        font-size: 0.68rem;
+    .brand-bar p {
+        font-size: 0.8rem;
     }
 
-    .status {
-        font-size: 0.75rem;
+    .welcome-art {
+        width: min(38vw, 132px);
     }
 
-    .messages {
-        padding: 0.7rem;
+    .welcome-copy h2 {
+        font-size: 1.18rem;
     }
 
-    .message {
-        max-width: 94%;
-        padding: 0.72rem 0.82rem;
+    .welcome-copy p {
+        font-size: 0.8rem;
     }
 
-    .message.system {
-        max-width: 92%;
+    .connection-form {
+        gap: 0.5rem;
     }
 
-    .file-download {
-        width: 100%;
-        justify-content: center;
+    .field-shell {
+        min-height: 46px;
+        border-radius: 15px;
     }
-}
 
-@media (max-width: 360px) {
-    .logo i {
-        display: none;
+    .btn {
+        min-height: 46px;
+        font-size: 0.92rem;
     }
 
-    .mobile-users-toggle {
-        width: 40px;
-        height: 40px;
+    .status {
+        min-height: 40px;
+        padding: 0.5rem 0.65rem;
+        font-size: 0.78rem;
     }
 
-    .input-row {
-        grid-template-columns: 40px minmax(0, 1fr) 44px;
+    .connect-tip {
+        padding: 0.55rem 0.65rem;
+        font-size: 0.76rem;
     }
+}
 
-    .file-input-label,
-    #sendBtn {
-        width: 40px;
-        min-width: 40px;
+@media (max-width: 360px) and (max-height: 640px) {
+    .welcome-art {
+        width: 110px;
+    }
+
+    .connect-tip {
+        display: none;
     }
 }
 
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+        transition-duration: 0.01ms !important;
+    }
+}

static/main.js

@@ -1,417 +1,377 @@
-class TriChat {
-            constructor() {
-                this.ws = null;
-                this.username = '';
-                this.room = 'global';
-                this.isConnected = false;
-                
-                this.initElements();
-                this.bindEvents();
-                this.setupMessageInputResize();
-            }
-            
-            initElements() {
-                this.elements = {
-                    usernameInput: document.getElementById('usernameInput'),
-                    roomInput: document.getElementById('roomInput'),
-                    connectBtn: document.getElementById('connectBtn'),
-                    disconnectBtn: document.getElementById('disconnectBtn'),
-                    status: document.getElementById('status'),
-                    messages: document.getElementById('messages'),
-                    messageInput: document.getElementById('messageInput'),
-                    sendBtn: document.getElementById('sendBtn'),
-                    fileInput: document.getElementById('fileInput'),
-                    inputArea: document.getElementById('inputArea'),
-                    userList: document.getElementById('userList')
-                };
-            }
+class TriChat {
+    constructor() {
+        this.ws = null;
+        this.username = "";
+        this.room = "global";
+        this.isConnected = false;
+        this.users = [];
 
-            setupMessageInputResize() {
-                this.elements.messageInput.addEventListener('input', () => {
-                    this.elements.messageInput.style.height = 'auto';
-                    this.elements.messageInput.style.height = Math.min(this.elements.messageInput.scrollHeight, 100) + 'px';
-                });
-            }
-            
-            bindEvents() {
-                this.elements.connectBtn.addEventListener('click', () => this.connect());
-                this.elements.disconnectBtn.addEventListener('click', () => this.disconnect());
-                this.elements.sendBtn.addEventListener('click', () => this.sendMessage());
-                this.elements.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
-                
-                this.elements.messageInput.addEventListener('keypress', (e) => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        this.sendMessage();
-                    }
-                });
-                
-                this.elements.usernameInput.addEventListener('keypress', (e) => {
-                    if (e.key === 'Enter') {
-                        this.connect();
-                    }
-                });
-            }
-            
-            async connect() {
-                const username = this.elements.usernameInput.value.trim();
-                const room = this.elements.roomInput.value.trim() || 'global';
-                
-                if (!username) {
-                    this.showNotification('Please enter your name', 'error');
-                    this.elements.usernameInput.focus();
-                    return;
-                }
-                
-                this.username = username;
-                this.room = room;
-                
-                try {
-                    this.updateStatus('Connecting...', 'neutral');
-                    
-                    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-                    const wsUrl = `${protocol}//${window.location.host}/ws/${room}?username=${encodeURIComponent(username)}`;
-                    
-                    this.ws = new WebSocket(wsUrl);
-                    
-                    this.ws.onopen = () => {
-                        this.isConnected = true;
-                        this.updateUI();
-                        this.updateStatus(`Connected to ${room}`, 'connected');
-                        this.showNotification('Successfully connected!', 'success');
-                    };
-                    
-                    this.ws.onmessage = (event) => {
-                        const message = JSON.parse(event.data);
-                        this.displayMessage(message);
-                        if (message.type === 'user_list') {
-                            this.updateUserList(message.users);
-                        }
-                    };
-                    
-                    this.ws.onclose = () => {
-                        this.isConnected = false;
-                        this.updateUI();
-                        this.updateStatus('Disconnected', 'disconnected');
-                    };
-                    
-                    this.ws.onerror = (error) => {
-                        console.error('WebSocket error:', error);
-                        this.updateStatus('Connection error', 'disconnected');
-                        this.showNotification('Connection failed', 'error');
-                    };
-                    
-                } catch (error) {
-                    console.error('Connection failed:', error);
-                    this.updateStatus('Failed to connect', 'disconnected');
-                    this.showNotification('Failed to connect', 'error');
-                }
-            }
-            
-            disconnect() {
-                if (this.ws) {
-                    this.ws.close();
-                }
-            }
-            
-            updateUI() {
-                if (this.isConnected) {
-                    this.elements.connectBtn.classList.add('is-hidden');
-                    this.elements.disconnectBtn.classList.remove('is-hidden');
-                    this.elements.inputArea.classList.remove('is-hidden');
-                    this.elements.usernameInput.disabled = true;
-                    this.elements.roomInput.disabled = true;
-                    this.elements.messageInput.focus();
-                } else {
-                    this.elements.connectBtn.classList.remove('is-hidden');
-                    this.elements.disconnectBtn.classList.add('is-hidden');
-                    this.elements.inputArea.classList.add('is-hidden');
-                    this.elements.usernameInput.disabled = false;
-                    this.elements.roomInput.disabled = false;
-                    this.elements.messages.innerHTML = '';
-                    this.elements.userList.innerHTML = '';
-                }
-            }
-            
-            updateStatus(text, type) {
-                this.elements.status.innerHTML = `
-                    <i class="fas ${type === 'connected' ? 'fa-check-circle' : type === 'disconnected' ? 'fa-times-circle' : 'fa-info-circle'}"></i>
-                    ${text}
-                `;
-                this.elements.status.className = 'status ' + type;
-            }
+        this.initElements();
+        this.bindEvents();
+        this.setupMessageInputResize();
+        this.updateFieldStates();
+        this.showWelcomeMessage();
+    }
 
-            showNotification(message, type) {
-                // Simple notification - you could enhance this with a toast library
-                console.log(`${type.toUpperCase()}: ${message}`);
-            }
+    initElements() {
+        this.elements = {
+            appShell: document.getElementById("appShell"),
+            connectScreen: document.getElementById("connectScreen"),
+            chatScreen: document.getElementById("chatScreen"),
+            connectionForm: document.getElementById("connectionForm"),
+            messageForm: document.getElementById("messageForm"),
+            usernameInput: document.getElementById("usernameInput"),
+            roomInput: document.getElementById("roomInput"),
+            connectBtn: document.getElementById("connectBtn"),
+            disconnectBtn: document.getElementById("disconnectBtn"),
+            mobileBackBtn: document.getElementById("mobileBackBtn"),
+            status: document.getElementById("status"),
+            roomTitle: document.getElementById("roomTitle"),
+            onlineCount: document.getElementById("onlineCount"),
+            messages: document.getElementById("messages"),
+            messageInput: document.getElementById("messageInput"),
+            sendBtn: document.getElementById("sendBtn"),
+            fileInput: document.getElementById("fileInput"),
+            userList: document.getElementById("userList"),
+            emptyUsers: document.getElementById("emptyUsers"),
+            usersToggle: document.getElementById("usersToggle"),
+            usersClose: document.getElementById("usersClose"),
+            drawerBackdrop: document.getElementById("drawerBackdrop")
+        };
+    }
 
-            updateUserList(users) {
-                this.elements.userList.innerHTML = '';
-                users.forEach(user => {
-                    const li = document.createElement('li');
-                    li.textContent = user;
-                    this.elements.userList.appendChild(li);
-                });
-            }
-            
-            sendMessage() {
-                const text = this.elements.messageInput.value.trim();
-                if (!text || !this.isConnected) return;
-                
-                const message = {
-                    type: 'text',
-                    username: this.username,
-                    text: text,
-                    timestamp: new Date().toISOString(),
-                    room: this.room
-                };
-                
-                this.ws.send(JSON.stringify(message));
-                this.elements.messageInput.value = '';
-                this.elements.messageInput.style.height = 'auto';
+    bindEvents() {
+        this.elements.connectionForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            this.connect();
+        });
+
+        this.elements.messageForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            this.sendMessage();
+        });
+
+        this.elements.disconnectBtn.addEventListener("click", () => this.disconnect());
+        this.elements.mobileBackBtn.addEventListener("click", () => this.disconnect());
+        this.elements.fileInput.addEventListener("change", (event) => this.handleFileSelect(event));
+        this.elements.usersToggle.addEventListener("click", () => this.toggleUsersPanel());
+        this.elements.usersClose.addEventListener("click", () => this.closeUsersPanel());
+        this.elements.drawerBackdrop.addEventListener("click", () => this.closeUsersPanel());
+
+        this.elements.messageInput.addEventListener("keydown", (event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                this.sendMessage();
             }
-            
-            async handleFileSelect(event) {
-                const file = event.target.files[0];
-                if (!file) return;
-                
-                if (file.size > 5 * 1024 * 1024) {
-                    this.showNotification('File size must be less than 5MB', 'error');
+        });
+
+        this.elements.usernameInput.addEventListener("input", () => this.updateFieldStates());
+        this.elements.roomInput.addEventListener("input", () => this.updateFieldStates());
+
+        document.addEventListener("keydown", (event) => {
+            if (event.key === "Escape") this.closeUsersPanel();
+        });
+    }
+
+    setupMessageInputResize() {
+        this.elements.messageInput.addEventListener("input", () => {
+            this.elements.messageInput.style.height = "auto";
+            this.elements.messageInput.style.height = `${Math.min(this.elements.messageInput.scrollHeight, 136)}px`;
+        });
+    }
+
+    updateFieldStates() {
+        const usernameShell = this.elements.usernameInput.closest(".field-shell");
+        const roomShell = this.elements.roomInput.closest(".field-shell");
+
+        usernameShell.classList.toggle("has-value", Boolean(this.elements.usernameInput.value.trim()));
+        roomShell.classList.toggle("has-value", Boolean(this.elements.roomInput.value.trim()));
+    }
+
+    async connect() {
+        const username = this.elements.usernameInput.value.trim();
+        const room = this.elements.roomInput.value.trim() || "global";
+
+        if (!username) {
+            this.updateStatus("Please enter your name", "disconnected");
+            this.elements.usernameInput.focus();
+            return;
+        }
+
+        this.username = username;
+        this.room = room;
+        this.elements.roomTitle.textContent = room;
+
+        try {
+            this.updateStatus("Connecting...", "neutral");
+            this.elements.connectBtn.disabled = true;
+
+            const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+            const wsUrl = `${protocol}//${window.location.host}/ws/${encodeURIComponent(room)}?username=${encodeURIComponent(username)}`;
+
+            this.ws = new WebSocket(wsUrl);
+
+            this.ws.onopen = () => {
+                this.isConnected = true;
+                this.elements.connectBtn.disabled = false;
+                this.updateStatus(`Connected to ${room}`, "connected");
+                this.updateUI();
+                this.elements.messageInput.focus();
+            };
+
+            this.ws.onmessage = (event) => {
+                const message = JSON.parse(event.data);
+
+                if (message.type === "user_list") {
+                    this.updateUserList(message.users || []);
                     return;
                 }
-                
-                try {
-                    const base64Data = await this.fileToBase64(file);
-                    
-                    const message = {
-                        type: 'file',
-                        username: this.username,
-                        fileName: file.name,
-                        fileType: file.type,
-                        fileSize: file.size,
-                        fileData: base64Data,
-                        timestamp: new Date().toISOString(),
-                        room: this.room
-                    };
-                    
-                    this.ws.send(JSON.stringify(message));
-                    event.target.value = '';
-                    this.showNotification('File uploaded successfully', 'success');
-                    
-                } catch (error) {
-                    console.error('File upload error:', error);
-                    this.showNotification('Failed to upload file', 'error');
-                }
-            }
-            
-            fileToBase64(file) {
-                return new Promise((resolve, reject) => {
-                    const reader = new FileReader();
-                    reader.onload = () => resolve(reader.result.split(',')[1]);
-                    reader.onerror = reject;
-                    reader.readAsDataURL(file);
-                });
-            }
-            
-            displayMessage(message) {
-                const messageElement = document.createElement('div');
-                messageElement.className = 'message';
-                
-                if (message.type === 'system') {
-                    messageElement.className += ' system';
-                    messageElement.innerHTML = `
-                        <div class="message-content">
-                            <i class="fas fa-info-circle"></i>
-                            ${this.escapeHtml(message.message)}
-                        </div>
-                    `;
-                } else {
-                    if (message.username === this.username) {
-                        messageElement.className += ' own';
-                    }
-                    
-                    const timestamp = new Date(message.timestamp).toLocaleTimeString([], {
-                        hour: '2-digit',
-                        minute: '2-digit'
-                    });
-                    
-                    if (message.type === 'text') {
-                        messageElement.innerHTML = `
-                            <div class="message-header">
-                                <span class="username">${this.escapeHtml(message.username)}</span>
-                                <span class="timestamp">${timestamp}</span>
-                            </div>
-                            <div class="message-content">${this.escapeHtml(message.text)}</div>
-                        `;
-                    } else if (message.type === 'file') {
-                        const downloadUrl = 'data:' + message.fileType + ';base64,' + message.fileData;
-                        let preview = '';
-                        let fileIcon = 'fas fa-file';
-                        
-                        if (message.fileType.startsWith('image/')) {
-                            preview = `<div class="file-preview"><img src="${downloadUrl}" alt="${message.fileName}"></div>`;
-                            fileIcon = 'fas fa-image';
-                        } else if (message.fileType.startsWith('video/')) {
-                            fileIcon = 'fas fa-video';
-                        } else if (message.fileType.startsWith('audio/')) {
-                            fileIcon = 'fas fa-music';
-                        } else if (message.fileType.includes('pdf')) {
-                            fileIcon = 'fas fa-file-pdf';
-                        } else if (message.fileType.includes('document') || message.fileType.includes('text')) {
-                            fileIcon = 'fas fa-file-alt';
-                        }
-                        
-                        messageElement.innerHTML = `
-                            <div class="message-header">
-                                <span class="username">${this.escapeHtml(message.username)}</span>
-                                <span class="timestamp">${timestamp}</span>
-                            </div>
-                            <div class="message-content">
-                                <div class="file-summary">
-                                    <i class="${fileIcon}"></i>
-                                    <strong>${this.escapeHtml(message.fileName)}</strong>
-                                </div>
-                                <div class="file-size">
-                                    ${this.formatFileSize(message.fileSize)}
-                                </div>
-                                ${preview}
-                                <a href="${downloadUrl}" download="${message.fileName}" class="file-download">
-                                    <i class="fas fa-download"></i>
-                                    Download
-                                </a>
-                            </div>
-                        `;
-                    }
-                }
-                
-                this.elements.messages.appendChild(messageElement);
-                this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
-                
-                // Add subtle animation
-                messageElement.style.opacity = '0';
-                messageElement.style.transform = 'translateY(10px)';
-                
-                requestAnimationFrame(() => {
-                    messageElement.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-                    messageElement.style.opacity = '1';
-                    messageElement.style.transform = 'translateY(0)';
-                });
-            }
-            
-            escapeHtml(text) {
-                const div = document.createElement('div');
-                div.textContent = text;
-                return div.innerHTML;
-            }
-            
-            formatFileSize(bytes) {
-                if (bytes === 0) return '0 Bytes';
-                const k = 1024;
-                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-                const i = Math.floor(Math.log(bytes) / Math.log(k));
-                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-            }
+
+                this.displayMessage(message);
+            };
+
+            this.ws.onclose = () => {
+                this.isConnected = false;
+                this.elements.connectBtn.disabled = false;
+                this.updateStatus("Disconnected", "disconnected");
+                this.updateUI();
+            };
+
+            this.ws.onerror = (error) => {
+                console.error("WebSocket error:", error);
+                this.elements.connectBtn.disabled = false;
+                this.updateStatus("Connection error", "disconnected");
+            };
+        } catch (error) {
+            console.error("Connection failed:", error);
+            this.elements.connectBtn.disabled = false;
+            this.updateStatus("Failed to connect", "disconnected");
         }
-        
-        // Initialize the chat application
-        document.addEventListener('DOMContentLoaded', () => {
-            const triChat = new TriChat();
-            
-            // Add some welcome messages for demo
-            if (!triChat.isConnected) {
-                setTimeout(() => {
-                    const welcomeMessage = document.createElement('div');
-                    welcomeMessage.className = 'message system';
-                    welcomeMessage.innerHTML = `
-                        <div class="message-content">
-                            <i class="fas fa-rocket"></i>
-                            Welcome to Tri-Chat! Connect with your name to start chatting.
-                        </div>
-                    `;
-                    triChat.elements.messages.appendChild(welcomeMessage);
-                }, 500);
-            }
-        });
+    }
 
-(function () {
-    const mobileQuery = window.matchMedia('(max-width: 768px)');
-
-    function setupMobileControls() {
-        const headerTop = document.querySelector('.header-top');
-        const sidebar = document.querySelector('.sidebar');
-        const sendBtn = document.getElementById('sendBtn');
-
-        if (!headerTop || !sidebar) return;
-
-        let usersToggle = document.querySelector('.mobile-users-toggle');
-        if (!usersToggle) {
-            usersToggle = document.createElement('button');
-            usersToggle.type = 'button';
-            usersToggle.className = 'mobile-users-toggle';
-            usersToggle.setAttribute('aria-label', 'Show online users');
-            usersToggle.setAttribute('aria-controls', 'onlineUsersPanel');
-            usersToggle.setAttribute('aria-expanded', 'false');
-            usersToggle.innerHTML = '<i class="fas fa-users"></i>';
-            headerTop.appendChild(usersToggle);
+    disconnect() {
+        if (this.ws) {
+            this.ws.close();
         }
+    }
+
+    updateUI() {
+        document.body.classList.remove("users-open");
+        this.elements.usersToggle.setAttribute("aria-expanded", "false");
 
-        let backdrop = document.querySelector('.mobile-drawer-backdrop');
-        if (!backdrop) {
-            backdrop = document.createElement('div');
-            backdrop.className = 'mobile-drawer-backdrop';
-            document.body.appendChild(backdrop);
+        if (this.isConnected) {
+            this.elements.appShell.classList.add("is-chatting");
+            this.elements.connectScreen.classList.add("is-hidden");
+            this.elements.chatScreen.classList.remove("is-hidden");
+            this.elements.chatScreen.classList.add("is-connected-preview");
+            this.elements.usernameInput.disabled = true;
+            this.elements.roomInput.disabled = true;
+        } else {
+            this.elements.appShell.classList.remove("is-chatting");
+            this.elements.connectScreen.classList.remove("is-hidden");
+            this.elements.chatScreen.classList.add("is-hidden");
+            this.elements.chatScreen.classList.remove("is-connected-preview");
+            this.elements.usernameInput.disabled = false;
+            this.elements.roomInput.disabled = false;
+            this.elements.messages.innerHTML = "";
+            this.users = [];
+            this.updateUserList([]);
+            this.showWelcomeMessage();
         }
+    }
 
-        sidebar.id = 'onlineUsersPanel';
+    updateStatus(text, type) {
+        const icon = type === "connected" ? "fa-check-circle" : type === "disconnected" ? "fa-times-circle" : "fa-info-circle";
+        this.elements.status.innerHTML = `<i class="fas ${icon}"></i><span>${this.escapeHtml(text)}</span>`;
+        this.elements.status.className = `status ${type}`;
+    }
 
-        if (sendBtn && !sendBtn.querySelector('span')) {
-            const label = Array.from(sendBtn.childNodes).find((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim());
-            if (label) {
-                const text = label.textContent.trim();
-                label.textContent = '';
-                const span = document.createElement('span');
-                span.textContent = text;
-                sendBtn.appendChild(span);
-            }
+    updateUserList(users) {
+        this.users = users;
+        this.elements.userList.innerHTML = "";
+
+        users.forEach((user) => {
+            const li = document.createElement("li");
+            li.textContent = user;
+            this.elements.userList.appendChild(li);
+        });
+
+        const count = users.length;
+        this.elements.onlineCount.textContent = `${count} ${count === 1 ? "member" : "members"} online`;
+        this.elements.emptyUsers.classList.toggle("is-hidden", count > 0);
+    }
+
+    sendMessage() {
+        const text = this.elements.messageInput.value.trim();
+        if (!text || !this.isConnected) return;
+
+        this.ws.send(JSON.stringify({
+            type: "text",
+            username: this.username,
+            text,
+            timestamp: new Date().toISOString(),
+            room: this.room
+        }));
+
+        this.elements.messageInput.value = "";
+        this.elements.messageInput.style.height = "auto";
+    }
+
+    async handleFileSelect(event) {
+        const file = event.target.files[0];
+        if (!file || !this.isConnected) return;
+
+        if (file.size > 5 * 1024 * 1024) {
+            this.updateStatus("File size must be less than 5MB", "disconnected");
+            event.target.value = "";
+            return;
         }
 
-        const closeDrawer = () => {
-            document.body.classList.remove('mobile-users-open');
-            usersToggle.setAttribute('aria-expanded', 'false');
-        };
+        try {
+            const base64Data = await this.fileToBase64(file);
 
-        const toggleDrawer = () => {
-            const nextState = !document.body.classList.contains('mobile-users-open');
-            document.body.classList.toggle('mobile-users-open', nextState);
-            usersToggle.setAttribute('aria-expanded', String(nextState));
-        };
+            this.ws.send(JSON.stringify({
+                type: "file",
+                username: this.username,
+                fileName: file.name,
+                fileType: file.type,
+                fileSize: file.size,
+                fileData: base64Data,
+                timestamp: new Date().toISOString(),
+                room: this.room
+            }));
 
-        usersToggle.addEventListener('click', toggleDrawer);
-        backdrop.addEventListener('click', closeDrawer);
-        document.addEventListener('keydown', (event) => {
-            if (event.key === 'Escape') closeDrawer();
+            event.target.value = "";
+        } catch (error) {
+            console.error("File upload error:", error);
+            this.updateStatus("Failed to upload file", "disconnected");
+        }
+    }
+
+    fileToBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result.split(",")[1]);
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
         });
+    }
 
-        const userList = document.getElementById('userList');
-        if (userList) {
-            userList.addEventListener('click', () => {
-                if (mobileQuery.matches) closeDrawer();
+    displayMessage(message) {
+        if (message.type === "error") {
+            this.updateStatus(message.message || "Something went wrong", "disconnected");
+            return;
+        }
+
+        const messageElement = document.createElement("div");
+        messageElement.className = "message";
+
+        if (message.type === "system") {
+            messageElement.classList.add("system");
+            messageElement.innerHTML = `
+                <div class="message-content">
+                    <i class="fas fa-info-circle"></i>
+                    ${this.escapeHtml(message.message)}
+                </div>
+            `;
+        } else {
+            if (message.username === this.username) {
+                messageElement.classList.add("own");
+            }
+
+            const timestamp = new Date(message.timestamp).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit"
             });
+
+            if (message.type === "text") {
+                messageElement.innerHTML = `
+                    <div class="message-header">
+                        <span class="username">${this.escapeHtml(message.username)}</span>
+                        <span class="timestamp">${timestamp}</span>
+                    </div>
+                    <div class="message-content">${this.escapeHtml(message.text)}</div>
+                `;
+            } else if (message.type === "file") {
+                const downloadUrl = `data:${message.fileType};base64,${message.fileData}`;
+                const preview = message.fileType.startsWith("image/")
+                    ? `<div class="file-preview"><img src="${downloadUrl}" alt="${this.escapeHtml(message.fileName)}"></div>`
+                    : "";
+                const fileIcon = this.getFileIcon(message.fileType);
+
+                messageElement.innerHTML = `
+                    <div class="message-header">
+                        <span class="username">${this.escapeHtml(message.username)}</span>
+                        <span class="timestamp">${timestamp}</span>
+                    </div>
+                    <div class="message-content">
+                        <div class="file-summary">
+                            <i class="${fileIcon}"></i>
+                            <strong>${this.escapeHtml(message.fileName)}</strong>
+                        </div>
+                        <div class="file-size">${this.formatFileSize(message.fileSize)}</div>
+                        ${preview}
+                        <a href="${downloadUrl}" download="${this.escapeHtml(message.fileName)}" class="file-download">
+                            <i class="fas fa-download"></i>
+                            Download
+                        </a>
+                    </div>
+                `;
+            }
         }
+
+        this.elements.messages.appendChild(messageElement);
+        this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
     }
 
-    function syncViewportState() {
-        document.body.classList.toggle('is-mobile-layout', mobileQuery.matches);
-        if (!mobileQuery.matches) {
-            document.body.classList.remove('mobile-users-open');
-        }
+    getFileIcon(fileType) {
+        if (fileType.startsWith("image/")) return "fas fa-image";
+        if (fileType.startsWith("video/")) return "fas fa-video";
+        if (fileType.startsWith("audio/")) return "fas fa-music";
+        if (fileType.includes("pdf")) return "fas fa-file-pdf";
+        if (fileType.includes("document") || fileType.includes("text")) return "fas fa-file-alt";
+        return "fas fa-file";
     }
 
-    document.addEventListener('DOMContentLoaded', () => {
-        setupMobileControls();
-        syncViewportState();
-        mobileQuery.addEventListener('change', syncViewportState);
-    });
-})();
+    showWelcomeMessage() {
+        if (this.elements.messages.children.length > 0) return;
+
+        const welcomeMessage = document.createElement("div");
+        welcomeMessage.className = "message system";
+        welcomeMessage.innerHTML = `
+            <div class="message-content">
+                <i class="fas fa-rocket"></i>
+                Connect with your name to start chatting.
+            </div>
+        `;
+        this.elements.messages.appendChild(welcomeMessage);
+    }
+
+    toggleUsersPanel() {
+        const isOpen = document.body.classList.toggle("users-open");
+        this.elements.usersToggle.setAttribute("aria-expanded", String(isOpen));
+    }
+
+    closeUsersPanel() {
+        document.body.classList.remove("users-open");
+        this.elements.usersToggle.setAttribute("aria-expanded", "false");
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text || "";
+        return div.innerHTML;
+    }
+
+    formatFileSize(bytes) {
+        if (bytes === 0) return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+    }
+}
 
+document.addEventListener("DOMContentLoaded", () => {
+    new TriChat();
+});

templates/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -8,74 +8,129 @@
     <link href="/static/main.css" rel="stylesheet">
 </head>
 <body>
-    <div class="header">
-        <div class="header-top">
-            <div class="logo">
-                <i class="fas fa-comments"></i>
-                <h1>Tri-Chat</h1>
+    <main class="app-shell" id="appShell">
+        <section class="connect-screen" id="connectScreen" aria-labelledby="connectTitle">
+            <div class="brand-bar">
+                <div class="brand-mark" aria-hidden="true">
+                    <i class="fas fa-comments"></i>
+                </div>
+                <div>
+                    <h1>Tri-Chat</h1>
+                    <p>Talk together. Stay connected.</p>
+                </div>
             </div>
-        </div>
-        
-        <div class="connection-form">
-            <div class="input-group">
-                <label for="usernameInput">Your Name</label>
-                <input type="text" id="usernameInput" placeholder="Enter your name" maxlength="20">
+
+            <div class="welcome-art" aria-hidden="true">
+                <div class="bubble bubble-primary">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <div class="bubble bubble-secondary">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
             </div>
-            <div class="input-group">
-                <label for="roomInput">Room</label>
-                <input type="text" id="roomInput" placeholder="global" maxlength="30">
+
+            <div class="welcome-copy">
+                <h2 id="connectTitle">Welcome to Tri-Chat!</h2>
+                <p>Connect to a room and start chatting with others instantly.</p>
             </div>
-            <button class="btn" id="connectBtn">
-                <i class="fas fa-plug"></i>
-                Connect
-            </button>
-            <button class="btn btn-secondary is-hidden" id="disconnectBtn">
-                <i class="fas fa-sign-out-alt"></i>
-                Disconnect
-            </button>
-        </div>
-        
-        <div class="status neutral" id="status">
-            <i class="fas fa-info-circle"></i>
-            Enter your name and click Connect to start chatting
-        </div>
-    </div>
-    
-    <div class="main-content">
-        <div class="sidebar">
-            <div class="sidebar-header">
-                <h3>
-                    <i class="fas fa-users"></i>
-                    Online
-                </h3>
+
+            <form class="connection-form" id="connectionForm">
+                <div class="input-group">
+                    <label for="usernameInput">Your Name</label>
+                    <div class="field-shell">
+                        <i class="fas fa-user"></i>
+                        <input type="text" id="usernameInput" placeholder="Enter your name" maxlength="20" autocomplete="name">
+                        <i class="fas fa-check field-check" aria-hidden="true"></i>
+                    </div>
+                </div>
+
+                <div class="input-group">
+                    <label for="roomInput">Room</label>
+                    <div class="field-shell">
+                        <i class="fas fa-hashtag"></i>
+                        <input type="text" id="roomInput" placeholder="global" maxlength="30" autocomplete="off">
+                        <i class="fas fa-check field-check" aria-hidden="true"></i>
+                    </div>
+                </div>
+
+                <button class="btn btn-primary" id="connectBtn" type="submit">
+                    <i class="fas fa-plug"></i>
+                    <span>Connect</span>
+                </button>
+            </form>
+
+            <div class="status neutral" id="status" aria-live="polite">
+                <i class="fas fa-info-circle"></i>
+                Enter your name and click Connect to start chatting
             </div>
-            <div class="sidebar-content">
-                <ul class="user-list" id="userList"></ul>
+
+            <div class="connect-tip">
+                <i class="fas fa-lightbulb"></i>
+                <span>Tip: Share the room name with your friends so they can join too.</span>
             </div>
-        </div>
-        
-        <div class="chat-container">
-            <div class="messages" id="messages"></div>
-            
-            <div class="input-area is-hidden" id="inputArea">
-                <div class="input-row">
-                    <div class="file-input-wrapper">
-                        <input type="file" id="fileInput" accept="*/*">
-                        <label for="fileInput" class="file-input-label">
-                            <i class="fas fa-paperclip"></i>
-                        </label>
-                    </div>
-                    <textarea id="messageInput" placeholder="Type your message..." maxlength="500" rows="1"></textarea>
-                    <button class="btn" id="sendBtn">
-                        <i class="fas fa-paper-plane"></i>
-                        Send
+        </section>
+
+        <section class="chat-screen is-hidden" id="chatScreen" aria-label="Chat room">
+            <header class="chat-header">
+                <button class="icon-btn mobile-back-btn" id="mobileBackBtn" type="button" aria-label="Disconnect and return to connect screen">
+                    <i class="fas fa-arrow-left"></i>
+                </button>
+
+                <div class="room-meta">
+                    <h2 id="roomTitle">global</h2>
+                    <p>
+                        <span class="online-dot"></span>
+                        <span id="onlineCount">0 members online</span>
+                    </p>
+                </div>
+
+                <div class="chat-actions">
+                    <button class="icon-btn users-toggle" id="usersToggle" type="button" aria-label="Show online users" aria-controls="usersPanel" aria-expanded="false">
+                        <i class="fas fa-users"></i>
+                    </button>
+                    <button class="icon-btn desktop-disconnect-btn" id="disconnectBtn" type="button" aria-label="Disconnect">
+                        <i class="fas fa-sign-out-alt"></i>
                     </button>
                 </div>
+            </header>
+
+            <div class="chat-body">
+                <aside class="users-panel" id="usersPanel">
+                    <div class="users-panel-header">
+                        <h3>Online</h3>
+                        <button class="icon-btn users-close" id="usersClose" type="button" aria-label="Close online users">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <ul class="user-list" id="userList"></ul>
+                    <p class="empty-users" id="emptyUsers">No one else is here yet.</p>
+                </aside>
+
+                <div class="messages-wrap">
+                    <div class="messages" id="messages"></div>
+
+                    <form class="input-area" id="messageForm">
+                        <div class="file-input-wrapper">
+                            <input type="file" id="fileInput" accept="*/*" aria-label="Attach file">
+                            <label for="fileInput" class="file-input-label" aria-hidden="true">
+                                <i class="fas fa-paperclip"></i>
+                            </label>
+                        </div>
+                        <textarea id="messageInput" placeholder="Type a message..." maxlength="500" rows="1"></textarea>
+                        <button class="send-btn" id="sendBtn" type="submit" aria-label="Send message">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
+                </div>
             </div>
-        </div>
-    </div>
+        </section>
+    </main>
+
+    <div class="mobile-drawer-backdrop" id="drawerBackdrop"></div>
     <script src="/static/main.js"></script>
 </body>
 </html>
-
-