Chatbot UI: isolate message scrolling, stabilize input, and improve conversation readability

[PRAteek-singHWY]

Summary

This PR improves the chatbot user experience during long conversations by isolating message scrolling, keeping the input accessible, and refining message layout for better readability across screen sizes.

Problems addressed

1. Page scroll bleed during long chats

Previously, as conversations grew, scrolling would propagate to the entire page, causing layout overlap with content below the chatbot.

Fix

• Confined scrolling strictly to the chat message area
• Prevented page-level scroll while actively interacting with the chatbot
• Allowed normal page scroll only when the user exits the chat container

---

2. Input field visibility during extended conversations

The input box would move out of view once message height exceeded the viewport, breaking the chat flow.

Fix

• Stabilized the input field so it remains visible during active chats
• Ensured the original landing layout remains unchanged before any messages are sent

---

3. Message width and alignment on smaller screens

Message cards were too wide on mobile devices, making conversations feel cramped and harder to read.

Fix

• Adjusted max-width responsively across breakpoints
• Ensured consistent left-aligned message content for both user and assistant messages
• Improved spacing and rhythm for long responses

---

4. General UI polish

• Improved spacing between messages for better visual hierarchy
• Maintained existing visual language while enhancing clarity
• No changes to API behavior or chatbot logic

---

Testing notes

Assistant responses could not be tested end-to-end in this PR because the chatbot backend is currently exercised locally.
However, all UI behaviors related to scrolling, layout stability, and responsiveness were validated locally using simulated long conversations and loading states.

---

Disclaimer behavior (unchanged)

The original disclaimer section remains completely intact and unmodified.
During active chats, it stays outside the scrollable chat container and can be accessed by scrolling out of the chat area, exactly as before.

---

Scope

• Layout and UX improvements only
• No functional or backend changes
• Preserves the original chatbot landing experience

---

Screenshots

Landing page (unchanged)

Desktop

Before

After

Mobile

Before

After