fix: mobile emoji picker centered with scale animation

[Abmarne]

Fixes: #29

Changes made to frontend/src/components/MessageBubble.jsx:

1. Centered mobile positioning - Emoji picker now uses top: 50%, left: 50%, transform: translate(-50%, -50%) for mobile instead of calculated rect position

2. Larger touch targets - Emoji buttons increased from text-2xl to text-2xl sm:text-xl with larger padding p-2 sm:p-1 for better touch accuracy

3. Spring animation - Added framer-motion spring animation with type: "spring", stiffness: 400, damping: 25 and staggered emoji entrance with delay: index * 0.05

4. Click-away backdrop - Mobile now has backdrop-blur-sm with bg-black/30 overlay that closes picker on tap

5. Hover/tap feedback - Added whileHover={{ scale: 1.3 }} and whileTap={{ scale: 0.85 }} for satisfying micro-interactions

6. Minimum width - Added minWidth: "280px" to ensure emojis stay readable on all screen sizes

[vercel]

@Abmarne is attempting to deploy a commit to the Akash Santra 's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Akash504-ai]

Thanks for the improvements!
Before merging, could you share a screenshot or short video of how the emoji picker looks/behaves on mobile (especially the animation + positioning)?