/* Basic reset and font import */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); */
/* Font import is now handled by wp_enqueue_style in PHP for better practice */

body {
    margin: 0;
    font-family: 'Inter', sans-serif; /* Fallback for browsers that don't load Inter */
    background-color: #f3f4f6; /* Tailwind gray-100 */
    /* Removed display, justify-content, align-items, min-height, padding from body
       as these are usually handled by the WordPress theme or page layout,
       not the chatbot itself when embedded. The chatbot container will still
       be centered if its parent container allows it. */
}

/* Chat container styling */
.church-chatbot-wrapper {
    /* This wrapper helps isolate the chatbot styling within a WordPress page */
    display: flex;
    justify-content: center; /* Center the chatbot within its wrapper */
    padding: 1rem; /* Add some padding around the chatbot */
}

.chat-container {
    width: 100%;
    max-width: 480px; /* Equivalent to max-w-md in Tailwind */
    height: 80vh; /* Make it take up most of the viewport height */
    min-height: 400px; /* Minimum height for usability */
    background-color: #fff; /* Tailwind white */
    border-radius: 0.75rem; /* Tailwind rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind shadow-lg */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat header styling */
.chat-header {
    background-color: #82A5BB; /* Tailwind blue-700 */
    color: #fff;
    padding: 1rem;
    text-align: center;
    font-size: 1.25rem; /* Tailwind text-xl */
    font-weight: 600; /* Tailwind font-semibold */
    border-top-left-radius: 0.75rem; /* rounded-t-xl */
    border-top-right-radius: 0.75rem; /* rounded-t-xl */
}

/* Message display area */
#chat-messages {
    flex: 1; /* Allows it to grow and take available space */
    padding: 1rem;
    overflow-y: auto; /* Enables scrolling for messages */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Tailwind space-y-3 */
}

/* Individual message bubble styling */
.message-bubble {
    max-width: 80%; /* Limit bubble width */
    padding: 0.75rem 1rem; /* Tailwind p-3 py-2 px-4 */
    border-radius: 1rem; /* More rounded corners for bubbles */
    word-wrap: break-word; /* Ensure long words wrap */
}

.user-message {
    background-color: #e0f2fe; /* Tailwind blue-100 */
    align-self: flex-end; /* Align to the right */
    color: #1f2937; /* Tailwind gray-800 */
}

.bot-message {
    background-color: #f0f0f0; /* Light gray for bot */
    align-self: flex-start; /* Align to the left */
    color: #1f2937; /* Tailwind gray-800 */
}

/* Input area styling */
.chat-input-area {
    display: flex;
    padding: 1rem;
    border-top: 1px solid #e5e7eb; /* Tailwind border-t border-gray-200 */
}

#user-input {
    flex: 1; /* Allows input to grow */
    padding: 0.75rem;
    border: 1px solid #d1d5db; /* Tailwind border border-gray-300 */
    border-radius: 0.5rem 0 0 0.5rem; /* Rounded left corners */
    outline: none; /* Remove default focus outline */
}

#user-input:focus {
    border-color: #82A5BB; /* Tailwind blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Tailwind focus:ring-2 focus:ring-blue-500 */
}

#send-button {
    background-color: #82A5BB; /* Tailwind blue-600 */
    color: #fff;
    padding: 0.75rem 1.25rem; /* Tailwind px-5 py-3 */
    border-radius: 0 0.5rem 0.5rem 0; /* Rounded right corners */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    outline: none;
}

#send-button:hover {
    background-color: #82A5BB; /* Tailwind blue-700 */
}

#send-button:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Tailwind focus:ring-2 focus:ring-blue-500 */
}

/* Prayer form styling */
#prayer-form-container {
    background-color: #f9fafb; /* Tailwind gray-50 */
    border-top: 1px solid #e5e7eb; /* Tailwind border-t border-gray-200 */
    padding: 1rem;
    border-radius: 0 0 0.75rem 0.75rem; /* Rounded bottom corners */
}

#prayer-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151; /* Tailwind gray-700 */
}

#prayer-form input[type="text"],
#prayer-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem; /* Add margin below inputs */
    outline: none;
}

#prayer-form textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 80px;
}

#prayer-form input[type="text"]:focus,
#prayer-form textarea:focus {
    border-color: #82A5BB;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

#prayer-form button {
    background-color: #10b981; /* Tailwind emerald-500 */
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    width: 100%;
    font-weight: 600;
}

#prayer-form button:hover {
    background-color: #059669; /* Tailwind emerald-600 */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 640px) {
    .chat-container {
        height: 95vh; /* Take up more height on small screens */
        border-radius: 0; /* No rounded corners on full screen mobile */
        max-width: 100%; /* Full width */
    }

    /* The body styles (padding etc.) usually come from the theme,
       so specific overrides for full-width embedding might be needed in theme CSS
       if the chatbot is not appearing as expected.
       For a full-page chatbot, you might need to adjust the theme's body padding/margin. */
}