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/components/NewChatPanel.tsx

@@ -75,12 +75,18 @@ export function NewChatPanel() {
   }
 
   return (
-    <div className="border-b border-slate-700 p-3">
+    <div className="border-b border-slate-700/50 bg-slate-900/45 p-3">
       <div className="mb-2 flex gap-2 text-xs">
-        <button className={`rounded px-2 py-1 ${mode === "group" ? "bg-accent text-black" : "bg-slate-700"}`} onClick={() => setMode("group")}>
+        <button
+          className={`rounded-lg px-2.5 py-1.5 ${mode === "group" ? "bg-sky-500 text-slate-950" : "bg-slate-700/70 hover:bg-slate-700"}`}
+          onClick={() => setMode("group")}
+        >
           Group
         </button>
-        <button className={`rounded px-2 py-1 ${mode === "channel" ? "bg-accent text-black" : "bg-slate-700"}`} onClick={() => setMode("channel")}>
+        <button
+          className={`rounded-lg px-2.5 py-1.5 ${mode === "channel" ? "bg-sky-500 text-slate-950" : "bg-slate-700/70 hover:bg-slate-700"}`}
+          onClick={() => setMode("channel")}
+        >
           Channel
         </button>
       </div>
@@ -88,15 +94,15 @@ export function NewChatPanel() {
       <div className="mb-3 space-y-2">
         <p className="text-xs text-slate-400">Новый диалог</p>
         <input
-          className="w-full rounded bg-slate-800 px-2 py-1 text-sm"
+          className="w-full rounded-xl border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
           placeholder="@username"
           value={query}
           onChange={(e) => void handleSearch(e.target.value)}
         />
-        <div className="max-h-32 overflow-auto">
+        <div className="tg-scrollbar max-h-32 overflow-auto">
           {results.map((user) => (
             <button
-              className="mb-1 block w-full rounded bg-slate-800 px-2 py-1 text-left text-sm hover:bg-slate-700"
+              className="mb-1 block w-full rounded-lg bg-slate-800/90 px-2 py-1.5 text-left text-sm hover:bg-slate-700/90"
               key={user.id}
               onClick={() => void createPrivate(user.id)}
             >
@@ -108,12 +114,12 @@ export function NewChatPanel() {
       </div>
       <form className="space-y-2" onSubmit={(e) => void createByType(e)}>
         <input
-          className="w-full rounded bg-slate-800 px-2 py-1 text-sm"
+          className="w-full rounded-xl border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
           placeholder={mode === "group" ? "Group title" : "Channel title"}
           value={title}
           onChange={(e) => setTitle(e.target.value)}
         />
-        <button className="w-full rounded bg-slate-700 px-2 py-1 text-sm hover:bg-slate-600" disabled={loading} type="submit">
+        <button className="w-full rounded-lg bg-sky-500 px-2 py-2 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60" disabled={loading} type="submit">
           Create {mode}
         </button>
       </form>