<style>
    /* Inter Font */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

    /* Base styles for the chatbox and its elements */
    .chat-container {
        font-family: 'Inter', sans-serif;
        max-height: 80vh; /* Limit height for scrollability */
        width: 100%;
        max-width: 100%;
    }
    .chat-messages {
        overflow-y: auto;
        flex-grow: 1;
        padding: 1rem;
        scroll-behavior: smooth;
        display: flex;
        flex-direction: column;
    }
    .message-bubble {
        max-width: 80%;
        padding: 0.75rem 1rem;
        border-radius: 1.25rem;
        margin-bottom: 0.75rem;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        box-sizing: border-box;
        min-width: 0;
    }
    .user-message {
        background-color: #ff8c6b; /* A soft orange/coral from the image palette */
        color: white;
        align-self: flex-end;
        border-bottom-right-radius: 0.25rem; /* Sharper corner for user */
    }
    .ai-message {
        background-color: #f0f2f5; /* Light gray for AI, keeps it neutral */
        color: #374151; /* Darker text for readability */
        align-self: flex-start;
        border-bottom-left-radius: 0.25rem; /* Sharper corner for AI */
    }
    .loading-spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-top: 4px solid #ff8c6b; /* Spinner color matching the new theme */
        border-radius: 50%;
        width: 24px;
        height: 24px;
        animation: spin 1s linear infinite;
        margin: 1rem auto;
        display: none; /* Hidden by default */
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    /* Custom modal styles */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    .modal-content {
        background-color: white;
        padding: 1.5rem;
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-width: 90%;
        width: 400px;
        text-align: center;
    }
    .modal-button {
        background-color: #ff8c6b; /* Modal button color matching theme */
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        margin-top: 1rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    .modal-button:hover {
        background-color: #fa725c; /* Slightly darker hover state */
    }
</style>

<script src="https://cdn.tailwindcss.com"></script>

<div class="chat-container bg-white rounded-lg shadow-xl flex flex-col">
    <div class="p-4 bg-gradient-to-r from-[#e0b0ff] to-[#ff8c6b] text-white rounded-t-lg flex items-center justify-between">
        <h2 class="text-xl font-semibold">Community Network Advisor</h2>
        </div>

    <div id="chatMessages" class="chat-messages flex flex-col p-4 flex-grow">
        <div class="message-bubble ai-message self-start">Hello! I'm your AI. What kind of community do you have, and what are your main goals?
        </div>
    </div>

    <div id="loadingSpinner" class="loading-spinner"></div>

    <div class="p-4 border-t border-gray-200 flex items-center">
        <input
            type="text"
            id="messageInput"
            placeholder="Your message here..."
            class="flex-grow p-3 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-pink-400 mr-3"
        />
        <button
            id="sendMessageBtn"
            class="bg-black hover:bg-gray-800 text-white p-3 rounded-full shadow-md transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-black flex-shrink-0 w-12 h-12 flex items-center justify-center"
        >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 text-white">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
            </svg>
        </button>
    </div>
</div>

<div id="customModal" class="modal-overlay">
    <div class="modal-content">
        <p id="modalMessage" class="text-gray-700 text-lg"></p>
        <button id="modalCloseBtn" class="modal-button">OK</button>
    </div>
</div>

<script type="module">
    // Element references
    const chatMessages = document.getElementById('chatMessages');
    const messageInput = document.getElementById('messageInput');
    const sendMessageBtn = document.getElementById('sendMessageBtn');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const customModal = document.getElementById('customModal');
    const modalMessage = document.getElementById('modalMessage');
    const modalCloseBtn = document.getElementById('modalCloseBtn');

    // *** IMPORTANT: Replace 'YOUR_GEMINI_API_KEY' with your actual Gemini API Key ***
    const GEMINI_API_KEY = ''; // <-- Place your API Key here!

    let chatHistory = [
        { role: "system", parts: [{ text: "You are a positive and enthusiastic brainstorming assistant for community social networks. Always focus on innovative, beneficial, and wonderful ideas. Do not mention alternatives, drawbacks, or negative aspects. Keep responses extremely concise and inspiring, ideally one or two sentences." }] },
        { role: "user", parts: [{ text: "Hello! I'm here to brainstorm wonderful ideas for my community's social network. Can you help me with that by focusing only on positive possibilities?" }] },
        { role: "model", parts: [{ text: "Absolutely! I'm excited to help you brainstorm amazing possibilities for your community's social network. Let's focus on innovative and positive features. What kind of community do you have, and what are its core interests?" }] }
    ];

    // Function to display messages in the chat
    function displayMessage(message, sender) {
        const messageBubble = document.createElement('div');
        messageBubble.classList.add('message-bubble', sender === 'user' ? 'user-message' : 'ai-message');
        messageBubble.classList.add('flex', sender === 'user' ? 'self-end' : 'self-start'); // Align bubbles
        messageBubble.textContent = message;
        chatMessages.appendChild(messageBubble);
        chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to bottom
    }

    // Function to show custom modal
    function showModal(message) {
        modalMessage.textContent = message;
        customModal.classList.add('show');
    }

    // Function to hide custom modal
    function hideModal() {
        customModal.classList.remove('show');
    }

    // Event listener for modal close button
    modalCloseBtn.addEventListener('click', hideModal);

    // Function to send message to Gemini API
    async function sendMessage() {
        const userMessage = messageInput.value.trim();
        if (userMessage === '') {
            showModal('Please enter a message.');
            return;
        }

        displayMessage(userMessage, 'user');
        chatHistory.push({ role: "user", parts: [{ text: userMessage }] });
        messageInput.value = ''; // Clear input

        loadingSpinner.style.display = 'block'; // Show loading spinner
        sendMessageBtn.disabled = true; // Disable send button

        try {
            const generationConfig = {
                maxOutputTokens: 50
            };

            const payload = {
                contents: chatHistory,
                generationConfig: generationConfig
            };
            // Use the GEMINI_API_KEY defined above
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${GEMINI_API_KEY}`;

            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(`API error: ${response.status} ${response.statusText} - ${errorData.error.message}`);
            }

            const result = await response.json();

            if (result.candidates && result.candidates.length > 0 &&
                result.candidates[0].content && result.candidates[0].content.parts &&
                result.candidates[0].content.parts.length > 0) {
                const aiResponseText = result.candidates[0].content.parts[0].text;
                displayMessage(aiResponseText, 'ai');
                chatHistory.push({ role: "model", parts: [{ text: aiResponseText }] });
            } else {
                showModal('Sorry, I could not get a response from Gemini. Please try again.');
                console.error('Unexpected API response structure:', result);
            }
        } catch (error) {
            console.error('Error sending message to Gemini:', error);
            showModal('There was a problem sending your message. Please try again later.');
        } finally {
            loadingSpinner.style.display = 'none'; // Hide loading spinner
            sendMessageBtn.disabled = false; // Enable send button
            chatMessages.scrollTop = chatMessages.scrollHeight; // Ensure scroll to bottom
        }
    }

    // Event listeners for sending messages
    sendMessageBtn.addEventListener('click', sendMessage);
    messageInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            sendMessage();
        }
    });

    chatMessages.scrollTop = chatMessages.scrollHeight; // Ensure scroll to bottom on load
</script>