messageDiv.appendChild(bubbleDiv); messageDiv.appendChild(timeSpan);

@keyframes fadeSlideUp from opacity: 0; transform: translateY(12px); to opacity: 1; transform: translateY(0);

/* message bubbles */ .message display: flex; flex-direction: column; max-width: 80%; animation: fadeSlideUp 0.25s ease-out;

.chat-input-area button:active transform: scale(0.94);

/* input area */ .chat-input-area background: white; border-top: 1px solid #e2e8f0; padding: 16px 20px; display: flex; gap: 12px; align-items: center;

/* header */ .chat-header background: #1e2a3e; color: white; padding: 20px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.1);

/* messages area */ .chat-messages flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; background: #f8fafc; scroll-behavior: smooth;