Mobile Bottom Sheet for Message Actions (3-Dot Menu)

[Akash504-ai]

Description

The current desktop-style dropdown menu is not suitable for mobile devices. This issue introduces a Bottom Sheet UI that slides up from the bottom when the 3-dot icon is tapped.

Tasks

• Detect mobile viewport using isMobile state or CSS media queries
• Use createPortal to render the menu at document.body
• Add a semi-transparent backdrop (bg-black/40) with blur effect
• Implement slide-up animation using framer-motion
  - initial: { y: "100%" }
  - animate: { y: 0 }
• Ensure menu items have minimum height of 44px (touch-friendly)

Expected Behavior

Tapping the 3-dot icon on mobile opens a full-width bottom sheet with clearly visible actions and an easy way to dismiss.