/*
====================================================================
Custom Chat Widget Styles
====================================================================

NOTE: The use of `!important` throughout this stylesheet is intentional.

REASON:
This chat widget is designed to be embedded within WordPress sites.
Many WordPress themes apply aggressive or global CSS rules that can 
override plugin styles, especially when using shared class names 
(e.g., .chat-container, .button, etc.).

To ensure visual consistency and prevent the widget from being 
visually broken by conflicting theme styles, `!important` is used 
on all key style declarations. This guarantees that the intended 
design of the chat interface remains intact across different themes 
and page builders (Elementor, Divi, WPBakery, etc.).

If this sytlesheet is being used outside of WordPress or in an environment 
where you control the global CSS, you may safely remove the 
`!important` declarations.

====================================================================
*/


.chat-container {
    max-width: 100% !important;
    min-width: 280px !important;
    background-color: white !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 500px !important;
    overflow: hidden !important;
    font-family: 'Segoe UI', sans-serif !important;
}

.chat-header {
    background-color: rgb(34,48,94) !important;
    color: white !important;
    padding: 15px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

.chat-body {
    flex-grow: 1 !important;
    padding: 15px !important;
    overflow-y: auto !important;
    background: #f8f9fb !important;
}

.chat-message {
    background-color: #f0f4f8 !important;
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    font-size: 0.95rem !important;
}

.chat-message.user {
    background-color: rgb(127, 141, 195) !important;
    align-self: flex-end !important;
}

.chat-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.chat-btn {
    background: white !important;
    border: 1px solid #2f4f6f !important;
    color: #2f4f6f !important;
    border-radius: 5px !important;
    padding: 10px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: background 0.2s !important;
}

.chat-btn:hover {
    background-color: #2f4f6f !important;
    color: white !important;
}

.chat-input-area {
    display: flex !important;
    border-top: 1px solid #ddd !important;
    padding: 10px !important;
    gap: 10px !important;
    background: #fff !important;
}

.chat-input-area input {
    flex: 1 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    font-size: 1rem !important;
}

.chat-input-area button {
    background-color: rgb(221,167,63) !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

.chat-input-area button:hover {
    background-color: rgb(134, 100, 38) !important;
}