Message Box Position Issue and Reversed Background Text in Chat with Rider

Describe the bug
The message box is positioned too low on the screen, and the background text is displayed in reverse.

To Reproduce

Go to 'Place Order'.
Complete the process to place the order.
When the order is placed and assigned to a rider, click on 'Chat with Rider'.
See error
Expected behavior
The message box should be positioned slightly higher for better accessibility, and the background text should be displayed correctly, not in reverse.

Screenshots
IMG_0143

Smartphone (please complete the following information):

Device: IOS

Reproduce the issue by completing Place Order, assigning the order to a rider, and opening Chat with Rider on iOS; compare the message-box position and background text with the expected behavior. Use screenshot IMG_0143 as the visual reference, and consider the work done when the box is slightly higher and the background text is displayed correctly.

Written by the indexing model from the issue text.