Improve UI styling and layout for chat app

[reodesureodesu]

Motivation

• Modernize the app's visual design to improve readability and provide a polished, mobile-like chat experience.
• Make the authentication and chat input areas clearer and easier to use while preserving existing behavior and element IDs.

Description

• Reworked CSS to introduce design tokens, responsive sizing, card-style app shell, improved typography, gradients, and shadowing for a modern look.
• Reflowed the authentication view into a grid with a heading and helper text, adjusted spacing and input attributes for better UX, and changed the pre-auth display mode to match the new layout.
• Polished chat UI by restyling message bubbles (.me/.other), enlarging image previews (.chatimg), and restructuring the input area into a grid with an #actions area for #send and #aiBtn while adding accept="image/*" to the file input.
• Added lang and viewport meta, small JS import/whitespace cleanup, and preserved existing Firebase logic and element IDs to avoid breaking functionality.

Testing

• Launched a local server with python3 -m http.server 4173 and confirmed the site served successfully.
• Ran an automated Playwright script that opened http://127.0.0.1:4173 and captured a full-page screenshot (artifacts/ui-polish.png) to validate the updated UI visually, which completed successfully.

---

Codex Task