I want to build a real-time chatting app using HTML, CSS, and JavaScript with the following features and design:

Design Requirements: Use a modern dark theme with red accent colors. Home screen design: A search bar at the top to search for contacts or chats. A chat list showing user names, profile pictures, and last message previews. A floating button for starting new chats. Chat screen design: Header with the contact name and a status indicator (e.g., typing...). Chat bubbles for messages with timestamps (different colors for sent and received messages). A text input bar with options to attach files, send emojis, and send messages. Features: Real-time Messaging: Use WebSocket or Firebase for real-time updates. AI Voice Conversion: Integrate a Text-to-Speech library (like Google TTS API or Web Speech API) to convert incoming messages into voice. Automatically play the voice when a message is received. Audio Control: Add a toggle button to enable or disable auto-play for voice messages. Responsive Design: Ensure the app works seamlessly on mobile, tablet, and desktop devices using CSS media queries. Technologies to Use: Frontend: HTML for structure. CSS for styling (use CSS Grid or Flexbox for layouts). JavaScript for interactivity. Backend: Use Firebase Realtime Database or any other backend service to store and fetch messages. WebSocket for real-time communication. AI Voice Conversion: Use Web Speech API for Text-to-Speech functionality. Step-by-Step Requirements: Create the basic layout for the home screen and chat screen using HTML and CSS. Add interactivity for sending and receiving messages using JavaScript. Implement WebSocket or Firebase for real-time message synchronization. Use the Web Speech API to convert received messages into voice and play them automatically. Test the application for responsiveness and cross-browser compatibility. Can you generate step-by-step code examples for this project starting with the home screen UI?"