You are a senior front-end engineer. Create a single-page application called “GoalGPT by WealthAI”. The interface should be inspired by the simplicity and lay

You are a senior front-end engineer. Create a single-page application called “GoalGPT by WealthAI”. The interface should be inspired by the simplicity and layout of chat.openai.com, but must be built entirely from original code with no copied elements, assets, or classes. ### 1. Overall Page Layout - The interface should look and feel like a professional AI chat workspace. - Full-screen, responsive design. - Background: subtle light gray (#f8f9fb) or soft off-white. - Typography: “Inter”, “Poppins”, or “DM Sans”. - Brand accent color: #2563eb (WealthAI blue). - Balanced whitespace and clear sectioning. ### 2. Header - Fixed at the top. - Left side: WealthAI logo text (“WealthAI” in semi-bold, #2563eb). - Right side: small text label “GoalGPT”. - Minimal horizontal bar with shadow separation from chat area. ### 3. Chat Container - Occupies 100% viewport height minus header and input area. - Scrollable vertical section for conversation. - Each message appears in a clean rounded bubble: - User messages: right aligned, white background, subtle border. - AI messages: left aligned, light gray background (#f2f3f5). - Maintain generous spacing (16–20px) between messages. - Smooth fade-in animation for new messages. ### 4. Input Section - Fixed to bottom of viewport. - White background card with light border on top. - Contains: - A multiline textarea for goal input (auto-expanding up to 3 lines). - A category dropdown beside it (Finance, Health, Learning, Business, Personal). - A “Generate Roadmap” button in WealthAI blue (#2563eb), rounded, with hover state. - Placeholder text: “Describe your 12-month goal...” - Button click triggers message submission. ### 5. Output Behavior - When the user submits a goal: - User’s message appears on the right. - A loading indicator (three animated dots) shows in the chat area. - Then an AI response bubble appears on the left with formatted roadmap text. - AI output should include sections: - Goal Summary - Strategy Overview - Month-by-Month Roadmap (Month 1-12) - Key Metrics (KPIs) - Motivational Insight - Each section title bolded; content formatted cleanly for readability. ### 6. Technical Notes - Build with plain HTML, CSS, and JavaScript (no frameworks). - Keep CSS modular and clean; rely on Flexbox for layout. - Include a small script placeholder for integrating the OpenAI API later. - All elements responsive on mobile and desktop. - Use subtle transitions (opacity, transform) for message entries. - Do not use any glassmorphism, neon, or gradient effects. ### 7. Footer - Minimal footer centered at the bottom: “Powered by WealthAI — AI Roadmap Builder” ### 8. Deliverable Generate a single file named `GoalGPT.html` containing: - Embedded `<style>` for CSS. - Embedded `<script>` for JavaScript. - Fully functional front-end (messages appear and scroll properly). - Ready for future OpenAI API connection. The page should feel as polished and calm as top AI platforms: clean, neutral, trustworthy, and designed for long chat interactions.