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/index.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -10,5 +12,36 @@ body,
 
 body {
   margin: 0;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  font-family: "Manrope", "Segoe UI", sans-serif;
+  background:
+    radial-gradient(circle at 22% 18%, rgba(36, 68, 117, 0.35), transparent 26%),
+    radial-gradient(circle at 82% 12%, rgba(24, 95, 102, 0.25), transparent 30%),
+    linear-gradient(180deg, #101e30 0%, #162233 55%, #19283a 100%);
+  color: #e5edf9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.tg-panel {
+  background: rgba(19, 31, 47, 0.9);
+  border: 1px solid rgba(146, 174, 208, 0.14);
+  backdrop-filter: blur(8px);
+}
+
+.tg-chat-wallpaper {
+  background:
+    radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.09), transparent 30%),
+    radial-gradient(circle at 86% 74%, rgba(34, 197, 94, 0.07), transparent 33%),
+    linear-gradient(160deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.015) 100%);
+}
+
+.tg-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.tg-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(126, 159, 201, 0.35);
+  border-radius: 999px;
 }