Make chatbot full-screen on mobile and remove card styling

[WorkofAditya]

Motivation

• The chatbot renders as a centered card on small screens leaving large top/bottom gaps, which looks unprofessional on mobile devices.
• The intent is to make the chat UI occupy the full mobile viewport and remove the card-like framing only for mobile while preserving the desktop layout.

Description

• Updated styles.css under @media (max-width: 500px) to make body use align-items: stretch, justify-content: stretch and min-height: 100dvh to reliably fill mobile viewports.
• Modified .vault-container for mobile to width: 100%, max-width: none, min-height: 100dvh, box-sizing: border-box, removed border, border-radius, and box-shadow, and applied safe-area-aware padding.
• Disabled hover borders/shadows on mobile and tightened spacing by adjusting .vault-container h1 and .vault-toolbar margins.
• Made the .chatbox flex to fill remaining mobile height with flex: 1, min-height: 0, and height: auto so the chat area expands to remove top/bottom empty space.

Testing

• Ran git diff --check and it completed without errors.

---

Codex Task

[cloudflare-workers-and-pages]

Deploying chatbot with    Cloudflare Pages

Latest commit:	dd2848f
Status:	✅  Deploy successful!
Preview URL:	https://009cce29.chatbot-b3b.pages.dev
Branch Preview URL:	https://codex-make-chatbot-ui-full-s.chatbot-b3b.pages.dev

View logs

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.