feat(web): redesign chat ui in telegram-like style

- update overall layout for desktop/mobile chat navigation

- restyle dialogs list, message bubbles and composer

- add atmospheric background and unified panel styling

web/src/pages/ChatsPage.tsx

@@ -11,7 +11,10 @@ export function ChatsPage() {
   const logout = useAuthStore((s) => s.logout);
   const loadChats = useChatStore((s) => s.loadChats);
   const activeChatId = useChatStore((s) => s.activeChatId);
+  const chats = useChatStore((s) => s.chats);
+  const setActiveChatId = useChatStore((s) => s.setActiveChatId);
   const loadMessages = useChatStore((s) => s.loadMessages);
+  const activeChat = chats.find((chat) => chat.id === activeChatId);
 
   useRealtime();
 
@@ -26,26 +29,39 @@ export function ChatsPage() {
   }, [activeChatId, loadMessages]);
 
   return (
-    <main className="flex h-screen w-full bg-bg text-text">
-      <ChatList />
-      <section className="flex flex-1 flex-col">
-        <div className="flex items-center justify-between border-b border-slate-700 bg-panel px-4 py-3">
-          <p className="text-sm">Signed in as {me?.username}</p>
-          <button className="rounded bg-slate-700 px-3 py-1 text-sm" onClick={logout}>
-            Logout
-          </button>
-        </div>
-        <div className="min-h-0 flex-1">
-          <MessageList />
-        </div>
-        {activeChatId ? (
-          <MessageComposer />
-        ) : (
-          <div className="border-t border-slate-700 bg-panel p-4 text-center text-sm text-slate-400">
-            Выберите чат, чтобы начать переписку
+    <main className="h-screen w-full p-2 text-text md:p-4">
+      <div className="mx-auto flex h-full max-w-[1500px] gap-2 md:gap-4">
+        <section className={`tg-panel overflow-hidden rounded-2xl ${activeChatId ? "hidden md:block md:w-[360px]" : "w-full md:w-[360px]"}`}>
+          <ChatList />
+        </section>
+
+        <section className={`tg-panel tg-chat-wallpaper min-w-0 flex-1 overflow-hidden rounded-2xl ${activeChatId ? "flex" : "hidden md:flex"} flex-col`}>
+          <div className="flex items-center justify-between border-b border-slate-700/50 bg-slate-900/55 px-4 py-3">
+            <div className="flex min-w-0 items-center gap-3">
+              <button className="rounded-full bg-slate-700/70 px-2 py-1 text-xs md:hidden" onClick={() => setActiveChatId(null)}>
+                Back
+              </button>
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold">{activeChat?.title || `@${me?.username}`}</p>
+                <p className="truncate text-xs text-slate-300/80">{activeChat ? activeChat.type : "Select a chat"}</p>
+              </div>
+            </div>
+            <button className="rounded-full bg-slate-700/70 px-3 py-1.5 text-xs font-semibold hover:bg-slate-600/80" onClick={logout}>
+              Logout
+            </button>
           </div>
-        )}
-      </section>
+          <div className="min-h-0 flex-1">
+            <MessageList />
+          </div>
+          {activeChatId ? (
+            <MessageComposer />
+          ) : (
+            <div className="border-t border-slate-700/50 bg-slate-900/40 p-4 text-center text-sm text-slate-300/80">
+              Выберите чат, чтобы начать переписку
+            </div>
+          )}
+        </section>
+      </div>
     </main>
   );
 }