Chat Conversation Screen

Design a mobile chat conversation screen in its default state. The main area is a vertically scrollable thread of message bubbles, with the newest messages near the bottom and older messages above.

The screen should feel native to a phone messaging app: compact bubbles, clear sender distinction, timestamps that don’t fight the content, and spacing that makes the thread easy to scan while scrolling.

At the bottom, place a message composer with a text field and send button anchored above the system gesture area. The composer needs to stay usable while the conversation grows and the keyboard comes up.

The interesting part is balancing reading and replying in the same view. The thread needs enough structure to follow the conversation, but the input must remain the obvious next move without taking over the screen.

Use bubble alignment and subtle color contrast to separate inbound and outbound messages before relying on labels or timestamps.