<div class="chat-messages" id="chatMessages"> <!-- dynamic messages will appear here --> <div class="message bot-message"> <div class="bubble"> 👋 Hey there! I'm your AI assistant. Ask me anything about our products, help, or just say hello. </div> <div class="timestamp">Just now</div> </div> </div>
.chat-input-area input flex: 1; border: 1px solid #cbd5e1; border-radius: 40px; padding: 12px 18px; font-size: 0.95rem; outline: none; transition: all 0.2s; background: #ffffff; website chat script
/* typing indicator (bot) */ .typing-indicator display: flex; align-items: center; gap: 5px; padding: 10px 16px; background: #e5e7eb; width: fit-content; border-radius: 24px; border-bottom-left-radius: 4px; <div class="chat-messages" id="chatMessages"> <
// Helper: format timestamp HH:MM AM/PM function getFormattedTime() const now = new Date(); let hours = now.getHours(); const minutes = now.getMinutes().toString().padStart(2, '0'); const ampm = hours >= 12 ? 'PM' : 'AM'; hours = hours % 12 .chat-input-area input flex: 1