/* Custom styles for dark mode and animations */
@media (prefers-color-scheme: dark) {
    :root {
        --wa-header-bg: #1e1e1e; /* dark header */
        --wa-header-title: #e0e0e0;
        --wa-header-status: #b0b0b0;
        --wa-body-bg: #121212; /* dark background */
        --wa-body-pattern-opacity: 0.2;
        --wa-incoming-bg: #2e2e2e;
        --wa-outgoing-bg: #0a8f44; /* greenish outgoing */
        --wa-text-primary: #e0e0e0;
        --wa-text-secondary: #b0b0b0;
        --wa-time-color: #9e9e9e;
        --wa-system-bg: #2a2a2a;
        --wa-system-text: #e0e0e0;
    }
}

/* Fade‑in animation for message bubbles */
@keyframes fadeInMessage {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.message-bubble {
    animation: fadeInMessage 0.3s ease-out;
}