/* Basic Styling - Get dynamic values from PHP for colors, fonts etc. */
.wp-ai-assistant-chat-container {
    max-width: 500px;
    margin: 20px auto;
    border: 1px solid #40E0D0;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    /* Dynamic from settings: background-color: <?php echo esc_attr($ui_options['chat_bg_color'] ?? '#f0f0f0'); ?>; */
    background-color: #f0f0f0; /* Default */
}

.chat-header {
    /* Dynamic from settings: header-color: <?php echo esc_attr($ui_options['chat_header_color'] ?? '#40E0D0'); ?>; */
	background-color: #40E0D0; /* Default */
    color: white;
    padding: 10px 15px;
    text-align: center;
}
.chat-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.chat-messages {
    height: 300px;
    overflow-y: auto;
    padding: 15px;
    /* Dynamic from settings: font-size: <?php echo esc_attr($ui_options['chat_text_size'] ?? '14'); ?>px; */
    /* Dynamic from settings: color: <?php echo esc_attr($ui_options['chat_text_color'] ?? '#333333'); ?>; */
    font-size: 14px; /* Default */
    color: #333; /* Default */
}

.message {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-end; /* Align avatar with bottom of text */
}
.message .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 4px;
    margin-left: 4px;
    object-fit: cover;
}

.message span {
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 75%;
    word-wrap: break-word;
}

.message.user {
    justify-content: flex-end;
}
.message.user span {
    /* Dynamic: background-color: <?php echo esc_attr($ui_options['chat_bubble_user_bg_color'] ?? '#007bff'); ?>; */
    /* Dynamic: color: <?php echo esc_attr($ui_options['chat_bubble_user_text_color'] ?? '#ffffff'); ?>; */
    background-color: #007bff; /* Default */
    color: white; /* Default */
    border-bottom-right-radius: 5px;
}
.message.user .avatar {
    order: 1; /* Move avatar to the right for user */
    margin-right: 0;
    margin-left: 8px;
}


.message.assistant span {
    /* Dynamic: background-color: <?php echo esc_attr($ui_options['chat_bubble_assistant_bg_color'] ?? '#e9ecef'); ?>; */
    /* Dynamic: color: <?php echo esc_attr($ui_options['chat_bubble_assistant_text_color'] ?? '#333333'); ?>; */
    background-color: #e9ecef; /* Default */
    color: #333; /* Default */
    border-bottom-left-radius: 5px;
}

.message.assistant.typing-indicator span {
    font-style: italic;
    color: #777;
}

.chat-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
}
.chat-input-area textarea {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: none;
    min-height: 40px;
    max-height: 100px; /* Allow some expansion */
    margin-right: 0px;
    font-size: 1em;
}
.chat-input-area button {
    padding: 0 0px;
    background-color: #40E0D0; /* Example */
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}
.chat-input-area button:hover {
    background-color: #40E0D0; /* Example */
}

.chat-function-buttons {
    padding: 5px 10px 10px;
    text-align: center;
    border-top: 1px solid #eee;
}
.chat-function-buttons .function-button {
    margin: 5px;
    padding: 6px 12px;
    background-color: #2C3547; /* Example */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}
.chat-function-buttons .function-button:hover {
    background-color: #2C3547; /* Example */
}