/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 27 2026 | 07:16:42 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 
/* Container rounding & elevation */
.bp-messages-container, .better-messages-widget {
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Sent message bubble (Messenger Blue Gradient) */
.better-messages-list .message-item.me .message-content {
    background: linear-gradient(135deg, #0084FF 0%, #0078FF 100%) !important;
    color: #ffffff !important;
    border-radius: 18px 18px 4px 18px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

/* Received message bubble (Soft Light Gray) */
.better-messages-list .message-item.not-me .message-content {
    background-color: #E4E6EB !important;
    color: #050505 !important;
    border-radius: 18px 18px 18px 4px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

/* Text input field customization */
.better-messages-textarea {
    background-color: #F0F2F5 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
}

/* Online status indicator dot */
.better-messages-online-status.online {
    background-color: #31A24C !important; /* Messenger active green */
    border: 2px solid #ffffff;
}