diff --git a/src/components/chat/ChatWidget.tsx b/src/components/chat/ChatWidget.tsx
index ad4c6bd..4acb57f 100644
--- a/src/components/chat/ChatWidget.tsx
+++ b/src/components/chat/ChatWidget.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import {
   MessageSquare, X, ChevronLeft, Send, Users, Loader2,
-  Search, Bell, Settings, PenSquare, BellOff, Volume2, VolumeX, Paperclip,
+  Search, Bell, Settings, PenSquare, BellOff, Volume2, VolumeX, Paperclip, Pin,
 } from 'lucide-react'
 import { api, type ChatRoom, type ChatMessage, type ChatSearchResult, type ChatReaction } from '../../lib/api'
 import type { User } from '../../types'
@@ -16,16 +16,13 @@ function avatarColor(name: string) {
   for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % colors.length
   return colors[h]
 }
-
 function initials(name: string) {
   return name.split(' ').map(p => p[0]).join('').toUpperCase().slice(0, 2)
 }
-
 function fmtTime(iso: string) {
-  const d = new Date(iso)
-  const now = new Date()
-  const today = now.toDateString() === d.toDateString()
-  if (today) return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
+  const d = new Date(iso), now = new Date()
+  if (now.toDateString() === d.toDateString())
+    return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })
   return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
 }
 
@@ -37,24 +34,37 @@ function Avatar({ name, size = 28 }: { name: string; size?: number }) {
     </div>
   )
 }
-
 function SystemAvatar({ size = 28 }: { size?: number }) {
   return (
-    <div style={{ width: size, height: size, fontSize: size * 0.45 }}
+    <div style={{ width: size, height: size }}
       className="rounded-full flex items-center justify-center shrink-0 bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">
       <Bell size={size * 0.5} />
     </div>
   )
 }
 
-// ── Settings ───────────────────────────────────────────────────────────────
+// ── Sound ──────────────────────────────────────────────────────────────────
 
-interface ChatSettings {
-  notifVisible: boolean
-  soundEnabled: boolean
+function playNotifSound() {
+  try {
+    const AudioCtx = window.AudioContext ?? (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext
+    const ctx = new AudioCtx()
+    const osc = ctx.createOscillator()
+    const gain = ctx.createGain()
+    osc.connect(gain); gain.connect(ctx.destination)
+    osc.frequency.value = 880
+    gain.gain.setValueAtTime(0.18, ctx.currentTime)
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25)
+    osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.25)
+    setTimeout(() => ctx.close(), 600)
+  } catch { /* ignore */ }
 }
 
+// ── Settings ───────────────────────────────────────────────────────────────
+
+interface ChatSettings { notifVisible: boolean; soundEnabled: boolean }
 const SETTINGS_KEY = 'hotelsync-chat-settings'
+const PINS_KEY = 'hotelsync-chat-pins'
 
 function loadSettings(): ChatSettings {
   try {
@@ -63,10 +73,22 @@ function loadSettings(): ChatSettings {
   } catch { /* ignore */ }
   return { notifVisible: true, soundEnabled: false }
 }
+function saveSettings(s: ChatSettings) { localStorage.setItem(SETTINGS_KEY, JSON.stringify(s)) }
 
-function saveSettings(s: ChatSettings) {
-  localStorage.setItem(SETTINGS_KEY, JSON.stringify(s))
+function loadPins(): string[] {
+  try { return JSON.parse(localStorage.getItem(PINS_KEY) ?? '[]') as string[] } catch { return [] }
 }
+function savePins(ids: string[]) { localStorage.setItem(PINS_KEY, JSON.stringify(ids)) }
+
+// ── Context menu ───────────────────────────────────────────────────────────
+
+type CtxMenu =
+  | { type: 'message'; x: number; y: number; msg: ChatMessage }
+  | { type: 'room';    x: number; y: number; room: ChatRoom }
+
+// ── Emojis ─────────────────────────────────────────────────────────────────
+
+const EMOJIS = ['👍','❤️','😂','😮','😢','🔥','👏','✅']
 
 // ── Main component ─────────────────────────────────────────────────────────
 
@@ -76,60 +98,73 @@ export function ChatWidget() {
   const { user } = useAuth()
   const slug = user?.hotelSlug ?? ''
 
-  const [open, setOpen] = useState(false)
-  const [view, setView] = useState<View>('rooms')
-  const [rooms, setRooms] = useState<ChatRoom[]>([])
-  const [activeRoom, setActiveRoom] = useState<ChatRoom | null>(null)
-  const [messages, setMessages] = useState<ChatMessage[]>([])
-  const [text, setText] = useState('')
+  const [open, setOpen]               = useState(false)
+  const [view, setView]               = useState<View>('rooms')
+  const [rooms, setRooms]             = useState<ChatRoom[]>([])
+  const [activeRoom, setActiveRoom]   = useState<ChatRoom | null>(null)
+  const [messages, setMessages]       = useState<ChatMessage[]>([])
+  const [text, setText]               = useState('')
   const [loadingRooms, setLoadingRooms] = useState(false)
-  const [loadingMsgs, setLoadingMsgs] = useState(false)
-  const [sending, setSending] = useState(false)
-  const [attachment, setAttachment] = useState<File | null>(null)
+  const [loadingMsgs, setLoadingMsgs]   = useState(false)
+  const [sending, setSending]           = useState(false)
+  const [attachment, setAttachment]     = useState<File | null>(null)
   const [attachPreview, setAttachPreview] = useState<string | null>(null)
 
-  // Edit / delete / reactions
-  const [hoveredMsgId, setHoveredMsgId] = useState<string | null>(null)
+  // Edit
   const [editingMsgId, setEditingMsgId] = useState<string | null>(null)
-  const [editText, setEditText] = useState('')
-  const [reactionPickerMsgId, setReactionPickerMsgId] = useState<string | null>(null)
+  const [editText, setEditText]         = useState('')
 
-  // Search state
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchUsers, setSearchUsers] = useState<User[]>([])
+  // Context menu
+  const [ctxMenu, setCtxMenu] = useState<CtxMenu | null>(null)
+
+  // Search
+  const [searchQuery, setSearchQuery]   = useState('')
+  const [searchUsers, setSearchUsers]   = useState<User[]>([])
   const [searchResults, setSearchResults] = useState<ChatSearchResult[]>([])
-  const [searchTab, setSearchTab] = useState<'people' | 'messages'>('people')
+  const [searchTab, setSearchTab]       = useState<'people' | 'messages'>('people')
   const [loadingSearch, setLoadingSearch] = useState(false)
-  const [allUsers, setAllUsers] = useState<User[]>([])
+  const [allUsers, setAllUsers]         = useState<User[]>([])
 
-  // Settings
+  // Settings + pins
   const [settings, setSettings] = useState<ChatSettings>(loadSettings)
+  const [pinnedIds, setPinnedIds] = useState<string[]>(loadPins)
 
   const messagesEndRef = useRef<HTMLDivElement>(null)
-  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const pollRef        = useRef<ReturnType<typeof setInterval> | null>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const fileInputRef   = useRef<HTMLInputElement>(null)
+  const prevUnreadRef  = useRef<number>(0)
+  const prevMsgCountRef = useRef<number>(0)
 
   const totalUnread = rooms.reduce((s, r) => s + (Number(r.unreadCount) || 0), 0)
 
-  // ── Filtered rooms (exclude notifications if hidden, apply room filter) ─
+  // ── Sorted rooms (pinned first, then by last message) ────────────────────
 
-  const visibleRooms = rooms.filter(r => {
-    if (r.type === 'notifications' && !settings.notifVisible) return false
-    return true
-  })
+  const visibleRooms = [...rooms]
+    .filter(r => !(r.type === 'notifications' && !settings.notifVisible))
+    .sort((a, b) => {
+      const aPin = pinnedIds.includes(a.id) ? 0 : 1
+      const bPin = pinnedIds.includes(b.id) ? 0 : 1
+      return aPin - bPin
+    })
 
-  // ── Data loaders ────────────────────────────────────────────────────────
+  // ── Loaders ──────────────────────────────────────────────────────────────
 
   const loadRooms = useCallback(async () => {
     if (!slug) return
     try {
       const data = await api.chat.listRooms(slug)
       setRooms(data)
+      // Sound on new unread when widget is closed
+      if (settings.soundEnabled && !open) {
+        const newUnread = data.reduce((s, r) => s + (Number(r.unreadCount) || 0), 0)
+        if (newUnread > prevUnreadRef.current) playNotifSound()
+        prevUnreadRef.current = newUnread
+      }
     } catch { /* ignore */ }
-  }, [slug])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug, settings.soundEnabled, open])
 
-  // Poll rooms when open
   useEffect(() => {
     if (!open || !slug) return
     setLoadingRooms(true)
@@ -138,74 +173,72 @@ export function ChatWidget() {
     return () => { if (pollRef.current) clearInterval(pollRef.current) }
   }, [open, slug, loadRooms])
 
-  // Auto-scroll on new messages
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
+  // Auto-scroll
+  useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }) }, [messages])
 
-  // Poll messages when in messages view
+  // Poll messages
   useEffect(() => {
     if (view !== 'messages' || !activeRoom) return
     const interval = setInterval(async () => {
       try {
         const msgs = await api.chat.getMessages(slug, activeRoom.id)
+        // Sound on new messages in active room
+        if (settings.soundEnabled && msgs.length > prevMsgCountRef.current && prevMsgCountRef.current > 0) {
+          const lastNew = msgs[msgs.length - 1]
+          if (lastNew.senderId !== user?.id) playNotifSound()
+        }
+        prevMsgCountRef.current = msgs.length
         setMessages(msgs)
       } catch { /* ignore */ }
     }, 3000)
     return () => clearInterval(interval)
-  }, [view, activeRoom, slug])
+  }, [view, activeRoom, slug, settings.soundEnabled, user?.id])
 
-  // Load all users once when search view opens
+  // Load users for search
   useEffect(() => {
     if (view !== 'search' || !slug) return
     api.users.list(slug).then(setAllUsers).catch(() => { /* ignore */ })
   }, [view, slug])
 
-  // Search effect
+  // Search
   useEffect(() => {
     if (view !== 'search') return
     const q = searchQuery.trim()
-    if (!q) {
-      setSearchUsers([])
-      setSearchResults([])
-      return
-    }
+    if (!q) { setSearchUsers([]); setSearchResults([]); return }
     const ql = q.toLowerCase()
-    // People: filter client-side from allUsers
-    const matched = allUsers.filter(u =>
-      u.id !== user?.id &&
-      (u.name.toLowerCase().includes(ql) || u.email.toLowerCase().includes(ql)),
-    )
-    setSearchUsers(matched)
-
-    // Messages: debounce + API
+    setSearchUsers(allUsers.filter(u => u.id !== user?.id && (u.name.toLowerCase().includes(ql) || u.email.toLowerCase().includes(ql))))
     const timer = setTimeout(async () => {
       if (searchTab !== 'messages') return
       setLoadingSearch(true)
-      try {
-        const results = await api.chat.search(slug, q)
-        setSearchResults(results)
-      } catch { /* ignore */ }
+      try { setSearchResults(await api.chat.search(slug, q)) } catch { /* ignore */ }
       finally { setLoadingSearch(false) }
     }, 400)
     return () => clearTimeout(timer)
   }, [searchQuery, view, allUsers, user?.id, slug, searchTab])
 
-  // Focus search input when search view opens
   useEffect(() => {
-    if (view === 'search') {
-      setTimeout(() => searchInputRef.current?.focus(), 50)
-    }
+    if (view === 'search') setTimeout(() => searchInputRef.current?.focus(), 50)
   }, [view])
 
-  // ── Actions ─────────────────────────────────────────────────────────────
+  // Close context menu on outside click
+  useEffect(() => {
+    if (!ctxMenu) return
+    const handler = () => setCtxMenu(null)
+    window.addEventListener('click', handler)
+    window.addEventListener('contextmenu', handler)
+    return () => { window.removeEventListener('click', handler); window.removeEventListener('contextmenu', handler) }
+  }, [ctxMenu])
+
+  // ── Actions ───────────────────────────────────────────────────────────────
 
   const openRoom = async (room: ChatRoom) => {
     setActiveRoom(room)
     setView('messages')
     setLoadingMsgs(true)
+    prevMsgCountRef.current = 0
     try {
       const msgs = await api.chat.getMessages(slug, room.id)
+      prevMsgCountRef.current = msgs.length
       setMessages(msgs)
       await api.chat.markRead(slug, room.id)
       setRooms(prev => prev.map(r => r.id === room.id ? { ...r, unreadCount: 0 } : r))
@@ -217,29 +250,14 @@ export function ChatWidget() {
     try {
       const { roomId } = await api.chat.openDirect(slug, targetUser.id)
       await loadRooms()
-      const room: ChatRoom = {
-        id: roomId,
-        type: 'direct',
-        name: null,
-        unreadCount: 0,
-        lastMessage: null,
-        lastMessageAt: null,
-        lastSender: null,
-        otherUserName: targetUser.name,
-        otherUserId: targetUser.id,
-      }
-      await openRoom(room)
+      await openRoom({ id: roomId, type: 'direct', name: null, unreadCount: 0, lastMessage: null, lastMessageAt: null, lastSender: null, otherUserName: targetUser.name, otherUserId: targetUser.id })
       setSearchQuery('')
     } catch { /* ignore */ }
   }
 
   const openSearchResult = async (result: ChatSearchResult) => {
     const room = rooms.find(r => r.id === result.roomId)
-    if (room) {
-      setSearchQuery('')
-      setView('rooms')
-      await openRoom(room)
-    }
+    if (room) { setSearchQuery(''); setView('rooms'); await openRoom(room) }
   }
 
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -252,54 +270,28 @@ export function ChatWidget() {
     e.target.value = ''
   }
 
-  const removeAttachment = () => {
-    setAttachment(null)
-    setAttachPreview(null)
-  }
+  const removeAttachment = () => { setAttachment(null); setAttachPreview(null) }
 
   const sendMessage = async () => {
-    if (!text.trim() && !attachment || !activeRoom || sending) return
-    const t = text.trim()
-    const file = attachment
-    setText('')
-    setAttachment(null)
-    setAttachPreview(null)
-    setSending(true)
+    if ((!text.trim() && !attachment) || !activeRoom || sending) return
+    const t = text.trim(), file = attachment
+    setText(''); setAttachment(null); setAttachPreview(null); setSending(true)
     try {
       let attachmentUrl: string | undefined
-      if (file) {
-        const { url } = await api.chat.uploadImage(file)
-        attachmentUrl = url
-      }
+      if (file) { const { url } = await api.chat.uploadImage(file); attachmentUrl = url }
       const msg = await api.chat.sendMessage(slug, activeRoom.id, t, attachmentUrl)
-      setMessages(prev => [...prev, msg])
+      setMessages(prev => { prevMsgCountRef.current = prev.length + 1; return [...prev, msg] })
     } catch {
       setText(t)
       if (file) { setAttachment(file); setAttachPreview(attachPreview) }
-    } finally {
-      setSending(false)
-    }
+    } finally { setSending(false) }
   }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      if (text.trim() || attachment) void sendMessage()
-    }
-  }
-
-  const updateSettings = (patch: Partial<ChatSettings>) => {
-    const next = { ...settings, ...patch }
-    setSettings(next)
-    saveSettings(next)
-  }
-
-  const startEdit = (msg: ChatMessage) => {
-    setEditingMsgId(msg.id)
-    setEditText(msg.text)
-    setReactionPickerMsgId(null)
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (text.trim() || attachment) void sendMessage() }
   }
 
+  const startEdit = (msg: ChatMessage) => { setEditingMsgId(msg.id); setEditText(msg.text); setCtxMenu(null) }
   const saveEdit = async (msg: ChatMessage) => {
     if (!editText.trim() || !activeRoom) return
     try {
@@ -308,44 +300,59 @@ export function ChatWidget() {
     } catch { /* ignore */ }
     setEditingMsgId(null)
   }
-
   const cancelEdit = () => setEditingMsgId(null)
 
   const deleteMsg = async (msg: ChatMessage) => {
     if (!activeRoom) return
+    setCtxMenu(null)
     try {
       await api.chat.deleteMessage(slug, activeRoom.id, msg.id)
       setMessages(prev => prev.map(m => m.id === msg.id ? { ...m, deletedAt: new Date().toISOString(), text: '', attachmentUrl: null } : m))
     } catch { /* ignore */ }
-    setHoveredMsgId(null)
   }
 
   const toggleReaction = async (msg: ChatMessage, emoji: string) => {
     if (!activeRoom) return
-    setReactionPickerMsgId(null)
+    setCtxMenu(null)
     try {
       const updated = await api.chat.toggleReaction(slug, activeRoom.id, msg.id, emoji)
       setMessages(prev => prev.map(m => m.id === msg.id ? updated : m))
     } catch { /* ignore */ }
   }
 
+  const togglePin = (roomId: string) => {
+    setCtxMenu(null)
+    const next = pinnedIds.includes(roomId) ? pinnedIds.filter(id => id !== roomId) : [...pinnedIds, roomId]
+    setPinnedIds(next); savePins(next)
+  }
+
+  const updateSettings = (patch: Partial<ChatSettings>) => {
+    const next = { ...settings, ...patch }; setSettings(next); saveSettings(next)
+  }
+
   const goBack = () => {
-    if (view === 'messages') { setView('rooms'); setActiveRoom(null) }
+    if (view === 'messages') { setView('rooms'); setActiveRoom(null); setEditingMsgId(null) }
     else if (view === 'search') { setView('rooms'); setSearchQuery('') }
     else if (view === 'settings') setView('rooms')
   }
 
-  // ── Room name helper ────────────────────────────────────────────────────
+  const roomDisplayName = (room: ChatRoom) =>
+    room.type === 'general' ? 'Общий чат' : room.type === 'notifications' ? 'Уведомления' : room.otherUserName ?? 'Чат'
 
-  const roomDisplayName = (room: ChatRoom) => {
-    if (room.type === 'general') return 'Общий чат'
-    if (room.type === 'notifications') return 'Уведомления'
-    return room.otherUserName ?? 'Чат'
+  const onMsgContextMenu = (e: React.MouseEvent, msg: ChatMessage) => {
+    if (msg.deletedAt || msg.isSystem || activeRoom?.type === 'notifications') return
+    e.preventDefault()
+    setCtxMenu({ type: 'message', x: e.clientX, y: e.clientY, msg })
+  }
+
+  const onRoomContextMenu = (e: React.MouseEvent, room: ChatRoom) => {
+    e.preventDefault()
+    setCtxMenu({ type: 'room', x: e.clientX, y: e.clientY, room })
   }
 
   if (!slug) return null
 
-  // ── Render ───────────────────────────────────────────────────────────────
+  // ── Render ────────────────────────────────────────────────────────────────
 
   return (
     <>
@@ -354,8 +361,7 @@ export function ChatWidget() {
         onClick={() => setOpen(v => !v)}
         className={cn(
           'fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full shadow-lg',
-          'bg-brand-600 hover:bg-brand-700 text-white transition-all',
-          'flex items-center justify-center',
+          'bg-brand-600 hover:bg-brand-700 text-white transition-all flex items-center justify-center',
           open && 'scale-90',
         )}
       >
@@ -369,14 +375,15 @@ export function ChatWidget() {
 
       {/* Chat panel */}
       {open && (
-        <div className={cn(
-          'fixed bottom-24 right-6 z-50',
-          'w-80 bg-white dark:bg-slate-800 rounded-2xl shadow-2xl',
-          'border border-slate-200 dark:border-slate-700',
-          'flex flex-col overflow-hidden',
-        )} style={{ height: 520 }}>
-
-          {/* ── Header ── */}
+        <div
+          className={cn(
+            'fixed bottom-24 right-6 z-50',
+            'w-80 bg-white dark:bg-slate-800 rounded-2xl shadow-2xl',
+            'border border-slate-200 dark:border-slate-700 flex flex-col overflow-hidden',
+          )}
+          style={{ height: 520 }}
+        >
+          {/* Header */}
           <div className="flex items-center gap-2 px-3 py-3 border-b border-slate-200 dark:border-slate-700 bg-brand-600 text-white rounded-t-2xl shrink-0">
             {view !== 'rooms' && (
               <button onClick={goBack} className="p-1 hover:bg-white/20 rounded-lg transition-colors shrink-0">
@@ -397,13 +404,12 @@ export function ChatWidget() {
                 <p className="text-xs text-white/70">Только чтение</p>
               )}
             </div>
-            {/* Header actions for rooms view */}
             {view === 'rooms' && (
-              <div className="flex items-center gap-1">
-                <button onClick={() => setView('search')} title="Поиск" className="p-1.5 hover:bg-white/20 rounded-lg transition-colors">
+              <div className="flex items-center gap-0.5">
+                <button onClick={() => setView('search')} title="Поиск / Новый чат" className="p-1.5 hover:bg-white/20 rounded-lg transition-colors">
                   <Search size={15} />
                 </button>
-                <button onClick={() => setView('search')} title="Новое сообщение" className="p-1.5 hover:bg-white/20 rounded-lg transition-colors">
+                <button onClick={() => setView('search')} title="Написать" className="p-1.5 hover:bg-white/20 rounded-lg transition-colors">
                   <PenSquare size={15} />
                 </button>
                 <button onClick={() => setView('settings')} title="Настройки" className="p-1.5 hover:bg-white/20 rounded-lg transition-colors">
@@ -413,24 +419,20 @@ export function ChatWidget() {
             )}
           </div>
 
-          {/* ── Rooms list ── */}
+          {/* ── Rooms ── */}
           {view === 'rooms' && (
             <div className="flex-1 overflow-y-auto">
               {loadingRooms && visibleRooms.length === 0 ? (
-                // Skeleton placeholders while loading
                 <>
                   <RoomSkeleton icon={<Users size={16} className="text-brand-400" />} bg="bg-brand-100 dark:bg-brand-900/30" label="Общий чат" />
                   {settings.notifVisible && <RoomSkeleton icon={<Bell size={16} className="text-amber-500" />} bg="bg-amber-100 dark:bg-amber-900/30" label="Уведомления" />}
                 </>
-              ) : visibleRooms.length === 0 ? (
-                <div className="text-center py-10 text-sm text-slate-400 px-4">
-                  Нет чатов. Нажмите <PenSquare size={13} className="inline" /> чтобы начать.
-                </div>
               ) : (
                 visibleRooms.map(room => (
                   <button
                     key={room.id}
                     onClick={() => openRoom(room)}
+                    onContextMenu={e => onRoomContextMenu(e, room)}
                     className="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50 text-left"
                   >
                     <div className="relative shrink-0">
@@ -452,12 +454,13 @@ export function ChatWidget() {
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
-                      <div className="flex items-center justify-between">
-                        <p className={cn('text-sm font-medium truncate', Number(room.unreadCount) > 0 ? 'text-slate-900 dark:text-slate-100' : 'text-slate-700 dark:text-slate-300')}>
+                      <div className="flex items-center gap-1">
+                        {pinnedIds.includes(room.id) && <Pin size={10} className="text-brand-500 shrink-0" />}
+                        <p className={cn('text-sm font-medium truncate flex-1', Number(room.unreadCount) > 0 ? 'text-slate-900 dark:text-slate-100' : 'text-slate-700 dark:text-slate-300')}>
                           {roomDisplayName(room)}
                         </p>
                         {room.lastMessageAt && (
-                          <span className="text-[10px] text-slate-400 shrink-0 ml-1">{fmtTime(room.lastMessageAt)}</span>
+                          <span className="text-[10px] text-slate-400 shrink-0">{fmtTime(room.lastMessageAt)}</span>
                         )}
                       </div>
                       {room.lastMessage && (
@@ -476,93 +479,52 @@ export function ChatWidget() {
           {/* ── Search ── */}
           {view === 'search' && (
             <div className="flex-1 flex flex-col overflow-hidden">
-              {/* Search input */}
               <div className="px-3 pt-3 pb-2 shrink-0">
                 <div className="flex items-center gap-2 bg-slate-100 dark:bg-slate-700 rounded-xl px-3 py-2">
                   <Search size={14} className="text-slate-400 shrink-0" />
-                  <input
-                    ref={searchInputRef}
-                    value={searchQuery}
-                    onChange={e => setSearchQuery(e.target.value)}
+                  <input ref={searchInputRef} value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
                     placeholder="Люди или сообщения..."
-                    className="flex-1 bg-transparent text-sm text-slate-800 dark:text-slate-200 placeholder-slate-400 outline-none"
-                  />
-                  {searchQuery && (
-                    <button onClick={() => setSearchQuery('')} className="text-slate-400 hover:text-slate-600">
-                      <X size={13} />
-                    </button>
-                  )}
+                    className="flex-1 bg-transparent text-sm text-slate-800 dark:text-slate-200 placeholder-slate-400 outline-none" />
+                  {searchQuery && <button onClick={() => setSearchQuery('')} className="text-slate-400 hover:text-slate-600"><X size={13} /></button>}
                 </div>
               </div>
-
-              {/* Tabs */}
               <div className="flex px-3 gap-1 shrink-0">
                 {(['people', 'messages'] as const).map(tab => (
-                  <button
-                    key={tab}
-                    onClick={() => setSearchTab(tab)}
-                    className={cn(
-                      'flex-1 py-1.5 text-xs font-medium rounded-lg transition-colors',
-                      searchTab === tab
-                        ? 'bg-brand-600 text-white'
-                        : 'text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700',
-                    )}
-                  >
+                  <button key={tab} onClick={() => setSearchTab(tab)}
+                    className={cn('flex-1 py-1.5 text-xs font-medium rounded-lg transition-colors',
+                      searchTab === tab ? 'bg-brand-600 text-white' : 'text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700')}>
                     {tab === 'people' ? 'Люди' : 'Сообщения'}
                   </button>
                 ))}
               </div>
-
-              {/* Results */}
               <div className="flex-1 overflow-y-auto mt-2">
                 {searchTab === 'people' && (
-                  <>
-                    {!searchQuery ? (
-                      // Show all users when no query
-                      allUsers.length === 0 ? (
-                        <div className="text-center py-6 text-xs text-slate-400">Загрузка...</div>
-                      ) : (
-                        allUsers.filter(u => u.id !== user?.id).map(u => (
-                          <UserRow key={u.id} user={u} onClick={() => openDirect(u)} />
-                        ))
-                      )
-                    ) : searchUsers.length === 0 ? (
-                      <div className="text-center py-6 text-xs text-slate-400">Никого не найдено</div>
-                    ) : (
-                      searchUsers.map(u => (
-                        <UserRow key={u.id} user={u} onClick={() => openDirect(u)} />
-                      ))
-                    )}
-                  </>
+                  !searchQuery
+                    ? allUsers.length === 0
+                      ? <div className="text-center py-6 text-xs text-slate-400">Загрузка...</div>
+                      : allUsers.filter(u => u.id !== user?.id).map(u => <UserRow key={u.id} user={u} onClick={() => openDirect(u)} />)
+                    : searchUsers.length === 0
+                      ? <div className="text-center py-6 text-xs text-slate-400">Никого не найдено</div>
+                      : searchUsers.map(u => <UserRow key={u.id} user={u} onClick={() => openDirect(u)} />)
                 )}
-
                 {searchTab === 'messages' && (
-                  <>
-                    {!searchQuery ? (
-                      <div className="text-center py-6 text-xs text-slate-400">Введите запрос для поиска</div>
-                    ) : loadingSearch ? (
-                      <div className="flex items-center justify-center py-6">
-                        <Loader2 size={18} className="animate-spin text-slate-400" />
-                      </div>
-                    ) : searchResults.length === 0 ? (
-                      <div className="text-center py-6 text-xs text-slate-400">Ничего не найдено</div>
-                    ) : (
-                      searchResults.map(r => (
-                        <button
-                          key={r.id}
-                          onClick={() => openSearchResult(r)}
-                          className="w-full text-left px-4 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50"
-                        >
-                          <p className="text-xs text-slate-500 mb-0.5">
-                            {r.roomType === 'general' ? 'Общий чат' : r.roomType === 'notifications' ? 'Уведомления' : r.otherUserName ?? 'Чат'}
-                            {' · '}{r.senderName.split(' ')[0]}
-                          </p>
-                          <p className="text-sm text-slate-800 dark:text-slate-200 truncate">{r.text}</p>
-                          <p className="text-[10px] text-slate-400 mt-0.5">{fmtTime(r.createdAt)}</p>
-                        </button>
-                      ))
-                    )}
-                  </>
+                  !searchQuery
+                    ? <div className="text-center py-6 text-xs text-slate-400">Введите запрос для поиска</div>
+                    : loadingSearch
+                      ? <div className="flex items-center justify-center py-6"><Loader2 size={18} className="animate-spin text-slate-400" /></div>
+                      : searchResults.length === 0
+                        ? <div className="text-center py-6 text-xs text-slate-400">Ничего не найдено</div>
+                        : searchResults.map(r => (
+                          <button key={r.id} onClick={() => openSearchResult(r)}
+                            className="w-full text-left px-4 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50">
+                            <p className="text-xs text-slate-500 mb-0.5">
+                              {r.roomType === 'general' ? 'Общий чат' : r.roomType === 'notifications' ? 'Уведомления' : r.otherUserName ?? 'Чат'}
+                              {' · '}{r.senderName.split(' ')[0]}
+                            </p>
+                            <p className="text-sm text-slate-800 dark:text-slate-200 truncate">{r.text}</p>
+                            <p className="text-[10px] text-slate-400 mt-0.5">{fmtTime(r.createdAt)}</p>
+                          </button>
+                        ))
                 )}
               </div>
             </div>
@@ -570,7 +532,7 @@ export function ChatWidget() {
 
           {/* ── Settings ── */}
           {view === 'settings' && (
-            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5">
+            <div className="flex-1 overflow-y-auto py-4 space-y-4">
               <SettingsSection title="Канал уведомлений">
                 <ToggleRow
                   icon={settings.notifVisible ? <Bell size={15} /> : <BellOff size={15} />}
@@ -579,7 +541,6 @@ export function ChatWidget() {
                   onChange={v => updateSettings({ notifVisible: v })}
                 />
               </SettingsSection>
-
               <SettingsSection title="Звук">
                 <ToggleRow
                   icon={settings.soundEnabled ? <Volume2 size={15} /> : <VolumeX size={15} />}
@@ -588,11 +549,10 @@ export function ChatWidget() {
                   onChange={v => updateSettings({ soundEnabled: v })}
                 />
               </SettingsSection>
-
-              <SettingsSection title="О чате">
-                <p className="text-xs text-slate-500 leading-relaxed">
-                  Чат сотрудников доступен всем пользователям отеля.
-                  Канал «Уведомления» содержит автоматические сообщения о событиях в системе.
+              <SettingsSection title="Подсказка">
+                <p className="text-xs text-slate-500 leading-relaxed px-4">
+                  Правый клик на сообщении — реакции, редактирование, удаление.<br />
+                  Правый клик на чате — закрепить / открепить сверху.
                 </p>
               </SettingsSection>
             </div>
@@ -603,89 +563,52 @@ export function ChatWidget() {
             <>
               <div className="flex-1 overflow-y-auto px-3 py-3 space-y-2">
                 {loadingMsgs ? (
-                  <div className="flex items-center justify-center h-32">
-                    <Loader2 size={20} className="animate-spin text-slate-400" />
-                  </div>
+                  <div className="flex items-center justify-center h-32"><Loader2 size={20} className="animate-spin text-slate-400" /></div>
                 ) : messages.length === 0 ? (
                   <div className="text-center py-10 text-sm text-slate-400">
                     {activeRoom?.type === 'notifications' ? 'Уведомлений пока нет' : 'Нет сообщений. Напишите первым!'}
                   </div>
                 ) : (
                   messages.map(msg => (
-                    <MessageRow
+                    <MessageBubble
                       key={msg.id}
                       msg={msg}
                       isOwn={!msg.isSystem && msg.senderId === user?.id}
-                      isHovered={hoveredMsgId === msg.id}
                       isEditing={editingMsgId === msg.id}
                       editText={editText}
-                      showReactionPicker={reactionPickerMsgId === msg.id}
-                      canModify={activeRoom?.type !== 'notifications'}
-                      onMouseEnter={() => setHoveredMsgId(msg.id)}
-                      onMouseLeave={() => { if (reactionPickerMsgId !== msg.id) setHoveredMsgId(null) }}
-                      onEdit={() => startEdit(msg)}
-                      onDelete={() => deleteMsg(msg)}
+                      onContextMenu={e => onMsgContextMenu(e, msg)}
                       onEditTextChange={setEditText}
                       onSaveEdit={() => saveEdit(msg)}
                       onCancelEdit={cancelEdit}
-                      onToggleReactionPicker={() => setReactionPickerMsgId(v => v === msg.id ? null : msg.id)}
                       onReaction={emoji => toggleReaction(msg, emoji)}
-                      onCloseReactionPicker={() => { setReactionPickerMsgId(null); setHoveredMsgId(null) }}
                     />
                   ))
                 )}
                 <div ref={messagesEndRef} />
               </div>
 
-              {/* Input — hidden for notifications room */}
+              {/* Input */}
               {activeRoom?.type !== 'notifications' && (
                 <div className="px-3 py-3 border-t border-slate-200 dark:border-slate-700 shrink-0">
-                  {/* Attachment preview */}
                   {attachPreview && (
                     <div className="relative inline-block mb-2">
                       <img src={attachPreview} alt="превью" className="h-16 rounded-lg object-cover border border-slate-200 dark:border-slate-600" />
-                      <button
-                        onClick={removeAttachment}
-                        className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-slate-700 text-white flex items-center justify-center hover:bg-red-500 transition-colors"
-                      >
+                      <button onClick={removeAttachment} className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-slate-700 text-white flex items-center justify-center hover:bg-red-500 transition-colors">
                         <X size={10} />
                       </button>
                     </div>
                   )}
                   <div className="flex items-end gap-1.5">
-                    {/* Hidden file input */}
-                    <input
-                      ref={fileInputRef}
-                      type="file"
-                      accept="image/jpeg,image/png,image/webp,image/gif"
-                      className="hidden"
-                      onChange={handleFileSelect}
-                    />
-                    <button
-                      onClick={() => fileInputRef.current?.click()}
-                      title="Прикрепить фото"
-                      className="p-2 rounded-xl text-slate-400 hover:text-brand-600 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors shrink-0"
-                    >
+                    <input ref={fileInputRef} type="file" accept="image/jpeg,image/png,image/webp,image/gif" className="hidden" onChange={handleFileSelect} />
+                    <button onClick={() => fileInputRef.current?.click()} title="Прикрепить фото"
+                      className="p-2 rounded-xl text-slate-400 hover:text-brand-600 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors shrink-0">
                       <Paperclip size={16} />
                     </button>
-                    <textarea
-                      value={text}
-                      onChange={e => setText(e.target.value)}
-                      onKeyDown={handleKeyDown}
-                      placeholder="Сообщение..."
-                      rows={1}
-                      className={cn(
-                        'flex-1 resize-none rounded-xl px-3 py-2 text-sm',
-                        'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100',
-                        'placeholder-slate-400 outline-none',
-                        'max-h-24 overflow-y-auto',
-                      )}
-                    />
-                    <button
-                      onClick={() => void sendMessage()}
-                      disabled={(!text.trim() && !attachment) || sending}
-                      className="p-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 disabled:opacity-40 text-white transition-colors shrink-0"
-                    >
+                    <textarea value={text} onChange={e => setText(e.target.value)} onKeyDown={handleKeyDown}
+                      placeholder="Сообщение..." rows={1}
+                      className="flex-1 resize-none rounded-xl px-3 py-2 text-sm bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 placeholder-slate-400 outline-none max-h-24 overflow-y-auto" />
+                    <button onClick={() => void sendMessage()} disabled={(!text.trim() && !attachment) || sending}
+                      className="p-2.5 rounded-xl bg-brand-600 hover:bg-brand-700 disabled:opacity-40 text-white transition-colors shrink-0">
                       {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
                     </button>
                   </div>
@@ -693,11 +616,10 @@ export function ChatWidget() {
                 </div>
               )}
 
-              {/* Notifications room banner */}
               {activeRoom?.type === 'notifications' && (
                 <div className="px-4 py-3 border-t border-slate-200 dark:border-slate-700 bg-amber-50 dark:bg-amber-900/10 shrink-0">
                   <p className="text-xs text-amber-700 dark:text-amber-400 text-center flex items-center justify-center gap-1.5">
-                    <Bell size={12} /> Канал только для чтения — автоматические уведомления
+                    <Bell size={12} /> Канал только для чтения
                   </p>
                 </div>
               )}
@@ -705,156 +627,61 @@ export function ChatWidget() {
           )}
         </div>
       )}
+
+      {/* Context menu */}
+      {ctxMenu && (
+        <ContextMenu menu={ctxMenu} currentUserId={user?.id ?? ''} pinnedIds={pinnedIds}
+          onReaction={emoji => ctxMenu.type === 'message' && toggleReaction(ctxMenu.msg, emoji)}
+          onEdit={() => ctxMenu.type === 'message' && startEdit(ctxMenu.msg)}
+          onDelete={() => ctxMenu.type === 'message' && deleteMsg(ctxMenu.msg)}
+          onTogglePin={() => ctxMenu.type === 'room' && togglePin(ctxMenu.room.id)}
+          onClose={() => setCtxMenu(null)}
+        />
+      )}
     </>
   )
 }
 
 // ── Sub-components ────────────────────────────────────────────────────────
 
-function UserRow({ user, onClick }: { user: User; onClick: () => void }) {
-  const roleLabels: Record<string, string> = {
-    hotel_admin: 'Администратор',
-    manager: 'Менеджер',
-    housekeeper: 'Горничная',
-    receptionist: 'Ресепшн',
-    accountant: 'Бухгалтер',
-    security: 'Охрана',
-    technician: 'Техник',
-  }
-  return (
-    <button
-      onClick={onClick}
-      className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50 text-left"
-    >
-      <Avatar name={user.name} size={32} />
-      <div className="flex-1 min-w-0">
-        <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{user.name}</p>
-        <p className="text-xs text-slate-400 truncate">{roleLabels[user.role] ?? user.role}</p>
-      </div>
-    </button>
-  )
-}
-
-function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">{title}</p>
-      <div className="space-y-1">{children}</div>
-    </div>
-  )
-}
-
-function ToggleRow({ icon, label, checked, onChange }: {
-  icon: React.ReactNode
-  label: string
-  checked: boolean
-  onChange: (v: boolean) => void
-}) {
-  return (
-    <div className="flex items-center gap-3 py-2">
-      <span className="text-slate-500 shrink-0">{icon}</span>
-      <span className="flex-1 text-sm text-slate-700 dark:text-slate-300">{label}</span>
-      <button
-        onClick={() => onChange(!checked)}
-        className={cn(
-          'relative w-10 h-5 rounded-full transition-colors shrink-0',
-          checked ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600',
-        )}
-      >
-        <span className={cn(
-          'absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform',
-          checked ? 'translate-x-5' : 'translate-x-0.5',
-        )} />
-      </button>
-    </div>
-  )
-}
-
-// ── Emoji set ─────────────────────────────────────────────────────────────
-const EMOJIS = ['👍','❤️','😂','😮','😢','🔥','👏','✅']
-
-// ── MessageRow ─────────────────────────────────────────────────────────────
-
-function MessageRow({
-  msg, isOwn, isHovered, isEditing, editText, showReactionPicker, canModify,
-  onMouseEnter, onMouseLeave, onEdit, onDelete,
-  onEditTextChange, onSaveEdit, onCancelEdit,
-  onToggleReactionPicker, onReaction, onCloseReactionPicker,
-}: {
-  msg: ChatMessage
-  isOwn: boolean
-  isHovered: boolean
-  isEditing: boolean
-  editText: string
-  showReactionPicker: boolean
-  canModify: boolean
-  onMouseEnter: () => void
-  onMouseLeave: () => void
-  onEdit: () => void
-  onDelete: () => void
+function MessageBubble({ msg, isOwn, isEditing, editText, onContextMenu, onEditTextChange, onSaveEdit, onCancelEdit, onReaction }: {
+  msg: ChatMessage; isOwn: boolean; isEditing: boolean; editText: string
+  onContextMenu: (e: React.MouseEvent) => void
   onEditTextChange: (v: string) => void
-  onSaveEdit: () => void
-  onCancelEdit: () => void
-  onToggleReactionPicker: () => void
+  onSaveEdit: () => void; onCancelEdit: () => void
   onReaction: (emoji: string) => void
-  onCloseReactionPicker: () => void
 }) {
   const isDeleted = !!msg.deletedAt
   const isSystem = msg.isSystem
 
   return (
-    <div
-      className={cn('flex gap-2 group relative', isOwn && 'flex-row-reverse')}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      {/* Avatar */}
-      {!isOwn && (
-        isSystem
-          ? <SystemAvatar size={24} />
-          : <Avatar name={msg.senderName} size={24} />
-      )}
-
+    <div className={cn('flex gap-2', isOwn && 'flex-row-reverse')} onContextMenu={onContextMenu}>
+      {!isOwn && (isSystem ? <SystemAvatar size={24} /> : <Avatar name={msg.senderName} size={24} />)}
       <div className={cn('max-w-[80%]', isOwn && 'items-end flex flex-col')}>
-        {/* Sender name */}
         {!isOwn && !isDeleted && (
           <p className="text-[10px] text-slate-400 mb-0.5 ml-1">
             {isSystem ? msg.systemName ?? 'Система' : msg.senderName.split(' ')[0]}
           </p>
         )}
 
-        {/* Bubble */}
         {isDeleted ? (
           <p className="px-3 py-2 text-sm italic text-slate-400 dark:text-slate-500 bg-slate-100 dark:bg-slate-700/50 rounded-2xl">
             Сообщение удалено
           </p>
         ) : isEditing ? (
           <div className="w-48">
-            <textarea
-              value={editText}
-              onChange={e => onEditTextChange(e.target.value)}
-              onKeyDown={e => {
-                if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onSaveEdit() }
-                if (e.key === 'Escape') onCancelEdit()
-              }}
-              autoFocus
-              rows={2}
-              className="w-full resize-none rounded-xl px-3 py-2 text-sm bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 outline-none border border-brand-400"
-            />
+            <textarea value={editText} onChange={e => onEditTextChange(e.target.value)} autoFocus rows={2}
+              onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); onSaveEdit() } if (e.key === 'Escape') onCancelEdit() }}
+              className="w-full resize-none rounded-xl px-3 py-2 text-sm bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 outline-none border border-brand-400" />
             <div className="flex gap-1.5 mt-1">
               <button onClick={onSaveEdit} className="text-[11px] px-2 py-0.5 rounded bg-brand-600 text-white hover:bg-brand-700">Сохранить</button>
-              <button onClick={onCancelEdit} className="text-[11px] px-2 py-0.5 rounded bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-300">Отмена</button>
+              <button onClick={onCancelEdit} className="text-[11px] px-2 py-0.5 rounded bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300">Отмена</button>
             </div>
           </div>
         ) : (
-          <div className={cn(
-            'rounded-2xl text-sm overflow-hidden',
-            isSystem
-              ? 'bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-tl-sm'
-              : isOwn
-                ? 'bg-brand-600 rounded-tr-sm'
-                : 'bg-slate-100 dark:bg-slate-700 rounded-tl-sm',
-          )}>
+          <div className={cn('rounded-2xl text-sm overflow-hidden',
+            isSystem ? 'bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-tl-sm'
+            : isOwn ? 'bg-brand-600 rounded-tr-sm' : 'bg-slate-100 dark:bg-slate-700 rounded-tl-sm')}>
             {msg.attachmentUrl && (
               <a href={msg.attachmentUrl} target="_blank" rel="noreferrer">
                 <img src={msg.attachmentUrl} alt="вложение" className="max-w-full rounded-t-2xl block" style={{ maxHeight: 180, objectFit: 'cover', width: '100%' }} />
@@ -868,7 +695,6 @@ function MessageRow({
           </div>
         )}
 
-        {/* Meta row: time + edited */}
         {!isDeleted && (
           <div className={cn('flex items-center gap-1 mt-0.5 mx-1', isOwn && 'flex-row-reverse')}>
             <p className="text-[10px] text-slate-400">{fmtTime(msg.createdAt)}</p>
@@ -876,68 +702,115 @@ function MessageRow({
           </div>
         )}
 
-        {/* Reactions */}
-        {!isDeleted && msg.reactions && msg.reactions.length > 0 && (
+        {!isDeleted && msg.reactions?.length > 0 && (
           <div className={cn('flex flex-wrap gap-1 mt-1', isOwn && 'justify-end')}>
             {(msg.reactions as ChatReaction[]).map(r => (
-              <button
-                key={r.emoji}
-                onClick={() => onReaction(r.emoji)}
-                className={cn(
-                  'flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-xs transition-colors',
+              <button key={r.emoji} onClick={() => onReaction(r.emoji)}
+                className={cn('flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-xs transition-colors',
                   r.hasOwn
                     ? 'bg-brand-100 dark:bg-brand-900/40 border border-brand-400 text-brand-700 dark:text-brand-300'
-                    : 'bg-slate-100 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-200',
-                )}
-              >
+                    : 'bg-slate-100 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-200')}>
                 {r.emoji} <span className="text-[10px] font-medium">{r.count}</span>
               </button>
             ))}
           </div>
         )}
       </div>
+    </div>
+  )
+}
 
-      {/* Action toolbar — appears on hover */}
-      {!isDeleted && !isEditing && !isSystem && canModify && isHovered && (
-        <div className={cn(
-          'absolute top-0 flex items-center gap-0.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-xl shadow-md px-1 py-0.5 z-10',
-          isOwn ? 'right-full mr-1' : 'left-full ml-1',
-        )}>
-          {/* Reaction */}
-          <button onClick={onToggleReactionPicker} title="Реакция" className="p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg text-slate-500 hover:text-brand-600 transition-colors text-sm">
-            😊
-          </button>
-          {/* Edit — own only */}
-          {isOwn && (
-            <button onClick={onEdit} title="Редактировать" className="p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg text-slate-500 hover:text-brand-600 transition-colors">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-            </button>
-          )}
-          {/* Delete — own only */}
-          {isOwn && (
-            <button onClick={onDelete} title="Удалить" className="p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg text-slate-500 hover:text-red-500 transition-colors">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
-            </button>
-          )}
-        </div>
-      )}
+function ContextMenu({ menu, currentUserId, pinnedIds, onReaction, onEdit, onDelete, onTogglePin, onClose }: {
+  menu: CtxMenu; currentUserId: string; pinnedIds: string[]
+  onReaction: (emoji: string) => void; onEdit: () => void; onDelete: () => void
+  onTogglePin: () => void; onClose: () => void
+}) {
+  // Clamp to viewport
+  const menuW = 180, menuH = menu.type === 'message' ? 160 : 60
+  const x = Math.min(menu.x, window.innerWidth - menuW - 8)
+  const y = Math.min(menu.y, window.innerHeight - menuH - 8)
 
-      {/* Reaction picker */}
-      {showReactionPicker && (
+  return (
+    <div
+      style={{ position: 'fixed', top: y, left: x, zIndex: 9999, minWidth: menuW }}
+      className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-xl shadow-xl py-1"
+      onClick={e => e.stopPropagation()}
+    >
+      {menu.type === 'message' && (
         <>
-          <div className="fixed inset-0 z-10" onClick={onCloseReactionPicker} />
-          <div className={cn(
-            'absolute top-6 z-20 flex gap-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-2xl shadow-lg px-2 py-1.5',
-            isOwn ? 'right-0' : 'left-0',
-          )}>
+          {/* Emoji row */}
+          <div className="flex justify-around px-2 py-1.5 border-b border-slate-100 dark:border-slate-700">
             {EMOJIS.map(e => (
-              <button key={e} onClick={() => onReaction(e)} className="text-lg hover:scale-125 transition-transform p-0.5">
+              <button key={e} onClick={() => { onReaction(e); onClose() }}
+                className="text-base hover:scale-125 transition-transform leading-none p-0.5">
                 {e}
               </button>
             ))}
           </div>
+          {/* Actions */}
+          {menu.msg.senderId === currentUserId && (
+            <button onClick={() => { onEdit(); onClose() }}
+              className="w-full text-left px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 flex items-center gap-2">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+              Редактировать
+            </button>
+          )}
+          {menu.msg.senderId === currentUserId && (
+            <button onClick={() => { onDelete(); onClose() }}
+              className="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-2">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+              Удалить
+            </button>
+          )}
         </>
       )}
+      {menu.type === 'room' && (
+        <button onClick={() => { onTogglePin(); onClose() }}
+          className="w-full text-left px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50 flex items-center gap-2">
+          <Pin size={14} />
+          {pinnedIds.includes(menu.room.id) ? 'Открепить' : 'Закрепить сверху'}
+        </button>
+      )}
+    </div>
+  )
+}
+
+function UserRow({ user, onClick }: { user: User; onClick: () => void }) {
+  const roleLabels: Record<string, string> = {
+    hotel_admin: 'Администратор', manager: 'Менеджер', housekeeper: 'Горничная',
+    receptionist: 'Ресепшн', accountant: 'Бухгалтер', security: 'Охрана', technician: 'Техник',
+  }
+  return (
+    <button onClick={onClick} className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors border-b border-slate-100 dark:border-slate-700/50 text-left">
+      <Avatar name={user.name} size={32} />
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{user.name}</p>
+        <p className="text-xs text-slate-400 truncate">{roleLabels[user.role] ?? user.role}</p>
+      </div>
+    </button>
+  )
+}
+
+function SettingsSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="px-4">
+      <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">{title}</p>
+      <div className="space-y-1">{children}</div>
+    </div>
+  )
+}
+
+function ToggleRow({ icon, label, checked, onChange }: {
+  icon: React.ReactNode; label: string; checked: boolean; onChange: (v: boolean) => void
+}) {
+  return (
+    <div className="flex items-center gap-3 py-2">
+      <span className="text-slate-500 shrink-0">{icon}</span>
+      <span className="flex-1 text-sm text-slate-700 dark:text-slate-300 leading-tight">{label}</span>
+      <button onClick={() => onChange(!checked)}
+        className={cn('relative w-10 h-5 rounded-full transition-colors shrink-0', checked ? 'bg-brand-600' : 'bg-slate-300 dark:bg-slate-600')}>
+        <span className={cn('absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform', checked ? 'translate-x-5' : 'translate-x-0.5')} />
+      </button>
     </div>
   )
 }
@@ -945,9 +818,7 @@ function MessageRow({
 function RoomSkeleton({ icon, bg, label }: { icon: React.ReactNode; bg: string; label: string }) {
   return (
     <div className="flex items-center gap-3 px-4 py-3 border-b border-slate-100 dark:border-slate-700/50 animate-pulse">
-      <div className={cn('w-9 h-9 rounded-full flex items-center justify-center shrink-0', bg)}>
-        {icon}
-      </div>
+      <div className={cn('w-9 h-9 rounded-full flex items-center justify-center shrink-0', bg)}>{icon}</div>
       <div className="flex-1 min-w-0">
         <p className="text-sm font-medium text-slate-600 dark:text-slate-300">{label}</p>
         <div className="h-3 w-24 bg-slate-200 dark:bg-slate-600 rounded mt-1" />