feat: message bubbles with alignment and hover timestamp

[Okorie2000-code]

Changes

• Extract message rendering into MessageBubble component
• Current user messages aligned right with bg-primary background
• Other users' messages aligned left with bg-card background
• Timestamp hidden on desktop, revealed on hover; always visible on mobile

Acceptance Criteria Met

• ✅ Current user messages aligned right
• ✅ Other users' messages aligned left
• ✅ Different background colors for each
• ✅ Timestamp shown on hover (always visible on mobile)

[drips-wave]

Hey @Okorie2000-code! 👋 It looks like this PR isn't linked to any issue.

If this PR is for one of the issues assigned to you as part of a Wave, please link it to ensure your contribution is tracked properly. You can do this by adding a keyword to the PR description (e.g., Closes #123), or by clicking a button below:

Issue	Title
#104	Chat Message Bubble UI with Sender Differentiation	Link to this issue

ℹ️ Learn more about linking PRs to issues