/* All styles are now scoped under #chatbot-wrapper to prevent conflicts */
#chatbot-wrapper :root {
    /* These variables will be set dynamically by the JS config */
    --chatbot-header-bg: #007bff;
    --chatbot-header-text: #ffffff;
    --chatbot-header-btn-color: #ffffff; /* New variable for buttons */
    --chatbot-bot-msg-bg: #f1f1f1;
    --chatbot-bot-msg-text: #000000;
    --chatbot-user-msg-bg: #007bff;
    --chatbot-user-msg-text: #ffffff;

    --chatbot-icon-size: 50px;
    --chatbot-icon-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.679 3.507-1.739 4.016-2.225.966.34 2.006.525 3.082.525z"/></svg>'); /* Default chat icon */
    --chatbot-user-icon-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>'); /* Default user icon */
    --chatbot-send-icon-img: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16"><path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/></svg>'); /* Default send icon */
    --chatbot-position-bottom: 20px;
    --chatbot-position-right: 20px;
    --chatbot-position-top: auto;
}

/* Target the Bootstrap card-header within our chatbot window */
/* Use a more specific selector to avoid conflicts with the host page's bootstrap theme */
#chatbot-wrapper .chatbot-header.card-header {
    background-color: var(--chatbot-header-bg);
    color: var(--chatbot-header-text);
    font-family: var(--bs-body-font-family); /* Explicitly use the chatbot's font context */
    /*
    Padding, font-weight, display, etc., are already handled
    by Bootstrap's .card-header class. We only need to
    override the colors.
    */
}

/*
 * Correctly style the Bootstrap outline button in the header.
 * This ensures the button's border and text color are set from the CSS variable,
 * while allowing Bootstrap's native hover effect to function correctly.
*/
#chatbot-wrapper .chatbot-header.card-header .btn.btn-outline-light {
    --bs-btn-color: var(--chatbot-header-btn-color);
    --bs-btn-border-color: var(--chatbot-header-btn-color);
    --bs-btn-hover-color: var(--chatbot-header-bg); /* Text color on hover */
    --bs-btn-hover-bg: var(--chatbot-header-btn-color);
    --bs-btn-hover-border-color: var(--chatbot-header-btn-color);
}

/* Scope the card-body and card-footer as well */
#chatbot-wrapper .chatbot-body.card-body {
    font-family: var(--bs-body-font-family);
}

#chatbot-wrapper .chatbot-footer.card-footer {
    font-family: var(--bs-body-font-family);
}

#chatbot-wrapper .chatbot-message {
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    word-wrap: break-word;
    display: flex;
    align-items: flex-start; /* Align icon with top of text */
    gap: 8px;
}

#chatbot-wrapper .chatbot-message-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: contain;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

#chatbot-wrapper .chatbot-message-content {
    padding-top: 2px; /* Align text slightly better with icon */
}


#chatbot-wrapper .user-message {
    background-color: var(--chatbot-user-msg-bg) !important; /* Use variable */
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    flex-direction: row-reverse; /* Put icon on the right */
}
#chatbot-wrapper .user-message .chatbot-message-icon {
     background-image: var(--chatbot-user-icon-img);
}


#chatbot-wrapper .bot-message {
    background-color: var(--chatbot-bot-msg-bg) !important; /* Use variable */
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    border: 1px solid #eee; /* Subtle border for bot messages */
}
#chatbot-wrapper .bot-message .chatbot-message-icon {
     /* Placeholder for bot icon - can be set via config */
     background-color: #eee; /* Default placeholder */
}