From 9d12e157b1d697eceb1e3bab417cb1b91422d681 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Fri, 17 Apr 2026 11:30:46 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20notifications=20=E2=80=94=20unified=20da?=
 =?UTF-8?q?rk=20style,=20centered=20at=20bottom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PushBanner.tsx      |  6 +++---
 src/components/chat/ChatWidget.tsx | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/PushBanner.tsx b/src/components/PushBanner.tsx
index 03ad80a..43c0b4e 100644
--- a/src/components/PushBanner.tsx
+++ b/src/components/PushBanner.tsx
@@ -50,8 +50,8 @@ export function PushBanner() {
   }
 
   return (
-    <div className="fixed bottom-24 left-4 right-24 z-40 max-w-xs">
-      <div className="bg-slate-800 dark:bg-slate-900 text-white rounded-2xl shadow-xl px-4 py-3 flex items-center gap-3">
+    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-80">
+      <div className="bg-slate-800 text-white rounded-2xl shadow-xl px-4 py-3 flex items-center gap-3">
         <div className="w-8 h-8 rounded-full bg-brand-600 flex items-center justify-center shrink-0">
           <Bell size={15} />
         </div>
@@ -63,7 +63,7 @@ export function PushBanner() {
             className="text-xs font-semibold text-brand-300 hover:text-brand-200 disabled:opacity-50 transition-colors whitespace-nowrap">
             {loading ? '...' : 'Включить'}
           </button>
-          <button onClick={dismiss} className="text-slate-400 hover:text-white transition-colors">
+          <button onClick={dismiss} className="text-slate-500 hover:text-white transition-colors">
             <X size={14} />
           </button>
         </div>
diff --git a/src/components/chat/ChatWidget.tsx b/src/components/chat/ChatWidget.tsx
index 52318fb..c78c9c1 100644
--- a/src/components/chat/ChatWidget.tsx
+++ b/src/components/chat/ChatWidget.tsx
@@ -1018,7 +1018,7 @@ export function ChatWidget() {
 
       {/* Toast notifications */}
       {toasts.length > 0 && (
-        <div className="fixed top-4 right-4 z-[70] flex flex-col gap-2 w-72">
+        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[70] flex flex-col items-center gap-2 w-80 pointer-events-none">
           {toasts.map(toast => (
             <ToastNotifCard
               key={toast.id}
@@ -1059,15 +1059,15 @@ function ToastNotifCard({ toast, showText, onClose, onClick }: {
   return (
     <div
       onClick={onClick}
-      className="flex items-start gap-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-2xl shadow-lg px-4 py-3 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/80 transition-colors"
+      className="pointer-events-auto w-full flex items-center gap-3 bg-slate-800 text-white rounded-2xl shadow-xl px-4 py-3 cursor-pointer hover:bg-slate-700 transition-colors"
     >
-      <div className="shrink-0 mt-0.5 w-8 h-8 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
-        <MessageSquare size={15} className="text-brand-600 dark:text-brand-400" />
+      <div className="shrink-0 w-8 h-8 rounded-full bg-brand-600 flex items-center justify-center">
+        <MessageSquare size={15} className="text-white" />
       </div>
       <div className="flex-1 min-w-0">
-        <p className="text-sm font-semibold text-slate-800 dark:text-slate-100 truncate">{toast.roomName}</p>
+        <p className="text-sm font-semibold truncate">{toast.roomName}</p>
         {showText ? (
-          <p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
+          <p className="text-xs text-slate-400 truncate mt-0.5">
             {toast.senderName ? `${toast.senderName.split(' ')[0]}: ` : ''}{toast.text || 'Новое сообщение'}
           </p>
         ) : (
@@ -1076,7 +1076,7 @@ function ToastNotifCard({ toast, showText, onClose, onClick }: {
       </div>
       <button
         onClick={e => { e.stopPropagation(); onClose() }}
-        className="shrink-0 text-slate-300 hover:text-slate-500 dark:text-slate-600 dark:hover:text-slate-400 transition-colors p-0.5 mt-0.5"
+        className="shrink-0 text-slate-500 hover:text-slate-300 transition-colors p-0.5"
       >
         <X size={13} />
       </button>