Ashok75
/

base

+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GAKR AI - Chat</title>
+    <link rel="stylesheet" href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+    <style>
+        /* --- Define CSS Variables (Copy from homepage or ensure in style.css) --- */
+         :root {
+             /* Default light mode colors (adjust as needed) */
+            --gakr-blue: #4285F4;
+            --gakr-blue-dark: #1a73e8; /* A slightly darker shade for active states */
+            --gakr-blue-light: #e8f0fe; /* A light shade for backgrounds */
+            --gakr-grey-text: #5f6368;
+            --gakr-grey-hover-bg: rgba(95, 99, 104, 0.1); /* Subtle hover for grey icons */
+         }
+         :root[data-bs-theme="dark"] {
+             /* Dark mode overrides (adjust based on your bootstrap dark theme vars) */
+            --gakr-blue: #8ab4f8; /* Lighter blue for dark mode */
+            --gakr-blue-dark: #669df6;
+            --gakr-blue-light: rgba(138, 180, 248, 0.1); /* Light blue background with transparency */
+            --gakr-grey-text: #bdc1c6;
+            --gakr-grey-hover-bg: rgba(189, 193, 198, 0.1);
+            /* Ensure --bs-body-bg, --bs-body-color, --bs-border-color etc. are correctly set by bootstrap theme */
+         }
+        /* --- Base Chat Layout --- */
+        .gemini-chat-layout {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            width: 100%;
+             background-color: var(--bs-body-bg); /* Use BS var */
+             color: var(--bs-body-color); /* Use BS var */
+        }
+        .gemini-chat-header {
+            padding: 0.75rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--bs-border-color);
+            height: 64px;
+        }
+        .gemini-logo-area {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        .gemini-brand-logo {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .gemini-brand-text {
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--gakr-blue);
+        }
+        .gemini-chat-wrapper {
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+        .gemini-chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .gemini-prompt-area {
+            padding: 1rem;
+            border-top: 1px solid var(--bs-border-color);
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            /* --- MODIFIED CSS: Add relative positioning for options container --- */
+            position: relative;
+            /* --- END MODIFIED CSS --- */
+        }
+        .gemini-message {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            max-width: 90%;
+        }
+        .gemini-message-user {
+            align-self: flex-end;
+        }
+        .gemini-message-ai {
+            align-self: flex-start;
+        }
+        .gemini-message-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.85rem;
+            color: var(--bs-secondary-color);
+        }
+        .gemini-message-avatar {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+        }
+        .gemini-message-content {
+            padding: 1rem;
+            border-radius: 12px;
+            line-height: 1.5;
+             /* Ensure text wrapping */
+             white-space: pre-wrap;
+             word-break: break-word;
+        }
+        .gemini-message-user .gemini-message-content {
+            background-color: var(--bs-tertiary-bg);
+            border-top-right-radius: 4px;
+        }
+        .gemini-message-ai .gemini-message-content {
+            background-color: rgba(66, 133, 244, 0.1);
+            border-top-left-radius: 4px;
+        }
+        .gemini-message-user .gemini-message-avatar {
+            background-color: var(--bs-tertiary-bg);
+        }
+        .gemini-message-ai .gemini-message-avatar {
+            background-color: rgba(66, 133, 244, 0.2);
+            color: var(--gakr-blue);
+        }
+        /* --- MODIFIED CSS FOR INPUT/TEXTAREA AND ACTIONS --- */
+        .gemini-input-container {
+            position: relative; /* Keep relative */
+            border-radius: 24px;
+            border: 1px solid var(--bs-border-color);
+            background: var(--bs-body-bg);
+            padding: 0.75rem 1rem; /* Padding around content */
+            display: flex;
+             /* --- MODIFIED: align-items to flex-end for textarea --- */
+            align-items: flex-end;
+             /* --- END MODIFIED --- */
+            box-shadow: 0 1px 5px rgba(0,0,0,0.1);
+             /* Added focus transition from homepage */
+            transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            flex-wrap: wrap; /* Allow items to wrap when attachments are added */
+            gap: 0.5rem; /* Space between attachments and input */
+        }
+         /* Style when the container or its children are focused */
+        .gemini-input-container:focus-within {
+            border-color: var(--gakr-blue);
+            box-shadow: 0 1px 8px rgba(66, 133, 244, 0.2);
+            background: var(--bs-body-bg);
+        }
+        /* Style the textarea (#userInput) */
+        .gemini-input { /* Targets the textarea with id="userInput" */
+            flex: 1; /* Textarea takes available space */
+            border: none;
+            background: transparent;
+             /* --- MODIFIED: Padding adjustment for textarea (removed initial padding to be controlled by JS) --- */
+            padding: 0; /* Changed from 0.5rem 0.5rem */
+            /* Removed fixed height: height: 24px; from previous input styles */
+            /* Removed fixed max-height: 120px; from chat page styles */
+            outline: none;
+            color: var(--bs-body-color);
+            font-size: 1rem; /* Keep font size */
+            resize: none; /* Prevent manual resizing */
+            overflow-y: hidden; /* JS manages this */
+            line-height: 1.4; /* Adjust line height as needed */
+             /* Min/Max height calculation (adjust if 1rem font size differs) */
+            min-height: calc(1rem * 1.4); /* Approx height of 1 line */
+            max-height: calc(1rem * 1.4 * 5); /* Approx max height (5 lines) */
+            box-sizing: border-box; /* Include padding/border in element size */
+            white-space: pre-wrap; /* Ensure text wraps */
+            word-break: break-word; /* Break long words */
+            vertical-align: bottom; /* Align baseline to bottom */
+            transition: height 0.3s ease-in-out; /* Animate height change */
+        }
+        .gemini-input:focus {
+             outline: none;
+        }
+        .gemini-input-actions {
+            display: flex;
+             /* --- MODIFIED: align-items to flex-end for textarea --- */
+            align-items: flex-end;
+             /* --- ADDED: padding-bottom to align icons --- */
+            padding-bottom: 0px; /* Changed from 0.5rem, controlled by JS */
+            /* --- END MODIFIED --- */
+            gap: 0.5rem;
+            font-size: 1.25rem;
+            flex-shrink: 0; /* Prevent shrinking */
+        }
+         /* Reusing .gemini-action-button styles for new '+' button */
+         .gemini-action-button {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--bs-secondary-color); /* Use BS var */
+             /* Added hover/active transitions from homepage */
+            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+        }
+        .gemini-action-button:hover {
+            background-color: var(--bs-tertiary-bg); /* Use BS var */
+             color: var(--bs-body-color); /* Darken icon color slightly on hover */
+        }
+         .gemini-action-button:active {
+            transform: scale(0.95); /* Slight press effect */
+             background-color: var(--bs-tertiary-bg); /* Keep hover bg on active */
+             color: var(--bs-body-color);
+             transition: background-color 0s, transform 0.1s; /* Make feedback immediate */
+        }
+        .gemini-submit-button {
+            color: var(--gakr-blue); /* Use CSS var */
+        }
+         /* Specific styles for submit button hover/active */
+         .gemini-submit-button:hover {
+             background-color: var(--gakr-blue-light); /* Light blue background on hover */
+             color: var(--gakr-blue-dark); /* Darker blue icon on hover */
+         }
+         .gemini-submit-button:active {
+             transform: scale(0.95); /* Slight press effect */
+              background-color: var(--gakr-blue-light);
+              color: var(--gakr-blue-dark);
+              transition: background-color 0s, transform 0.1s;
+         }
+         .gemini-submit-button.disabled {
+            opacity: 0.5;
+            cursor: default;
+            /* Ensure transitions are off when disabled to avoid weird states */
+            transition: none;
+        }
+        .gemini-submit-button.disabled:hover {
+            background-color: transparent;
+             color: var(--gakr-blue); /* Keep original color when disabled */
+        }
+        /* --- END MODIFIED CSS --- */
+        .gemini-typing {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 0.75rem 1rem;
+            border-radius: 12px;
+            background-color: rgba(66, 133, 244, 0.1);
+            margin-bottom: 1rem;
+            align-self: flex-end;
+        }
+        .gemini-typing-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: var(--gakr-blue);
+            animation: typing 1.3s infinite ease-in-out;
+        }
+        .gemini-typing-dot:nth-child(1) { animation-delay: 0s; }
+        .gemini-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .gemini-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-4px); }
+        }
+        .gemini-welcome {
+            text-align: center;
+            max-width: 600px;
+            margin: 4rem auto;
+        }
+        .gemini-welcome-icon {
+            font-size: 3rem;
+            margin-bottom: 1.5rem;
+            color: var(--gakr-blue);
+        }
+        .gemini-welcome-title {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            font-weight: 500;
+        }
+        /* Login button styling (from homepage) */
+        .gemini-login-button {
+            color: var(--gakr-blue);
+            text-decoration: none;
+            background: transparent;
+            border: 1px solid var(--gakr-blue);
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            transition: background-color 0.2s;
+        }
+        .gemini-login-button:hover {
+            background-color: rgba(66, 133, 244, 0.1);
+        }
+        /* Login prompt modal (keep existing) */
+        .gemini-login-prompt {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s, visibility 0.3s;
+        }
+        .gemini-login-prompt.show {
+            opacity: 1;
+            visibility: visible;
+        }
+        .gemini-login-prompt-content {
+            background-color: var(--bs-body-bg);
+            border-radius: 12px;
+            padding: 1.5rem;
+            max-width: 400px;
+            width: 90%;
+        }
+        .gemini-login-prompt-title {
+            font-size: 1.25rem;
+            font-weight: 500;
+            margin-bottom: 1rem;
+            color: var(--gakr-blue);
+        }
+        .gemini-login-prompt-buttons {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            margin-top: 1.5rem;
+        }
+        .gemini-button-primary {
+            background-color: var(--gakr-blue);
+            color: white;
+            border: none;
+            padding: 0.75rem 1rem;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            text-align: center;
+            text-decoration: none;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .gemini-button-primary:hover {
+            background-color: #3b78e7;
+        }
+        .gemini-button-secondary {
+            background-color: transparent;
+            color: var(--gakr-blue);
+            border: 1px solid var(--gakr-blue);
+            padding: 0.75rem 1rem;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            text-align: center;
+            text-decoration: none;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .gemini-button-secondary:hover {
+            background-color: rgba(66, 133, 244, 0.1);
+        }
+        .gemini-button-text {
+            background-color: transparent;
+            color: var(--bs-body-color);
+            border: none;
+            padding: 0.75rem 1rem;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            text-align: center;
+            text-decoration: none;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .gemini-button-text:hover {
+            background-color: var(--bs-tertiary-bg);
+        }
+         /* --- NEW CSS for Attachment Options --- */
+         .attachment-options-container {
+             position: absolute;
+             bottom: 100%; /* Position above the input bar */
+             left: 1rem; /* Align with left edge padding of prompt area */
+             transform: translateY(-10px); /* Slight initial lift */
+             z-index: 10; /* Ensure it's above chat messages */
+             background-color: var(--bs-body-bg);
+             border: 1px solid var(--bs-border-color);
+             border-radius: 15px;
+             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+             padding: 15px;
+             display: flex;
+             gap: 20px;
+             justify-content: flex-start; /* Align options to the left */
+             min-width: max-content;
+             opacity: 0;
+             visibility: hidden;
+             pointer-events: none; /* Prevent clicks when hidden */
+             transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s; /* Animate opacity/transform, hide visibility after */
+         }
+         /* State when visible */
+         .attachment-options-container.visible {
+             opacity: 1;
+             visibility: visible;
+             pointer-events: auto; /* Allow clicks when visible */
+             transform: translateY(-20px); /* Slight slide up effect */
+             transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0s; /* Show visibility immediately */
+         }
+         .attachment-option {
+             display: flex;
+             flex-direction: column;
+             align-items: center;
+             cursor: pointer;
+             color: var(--bs-body-color);
+             font-size: 0.8rem;
+             gap: 5px;
+             transition: color 0.2s ease-in-out;
+         }
+         .attachment-option:hover {
+             color: var(--gakr-blue);
+         }
+         .attachment-icon {
+             width: 48px;
+             height: 48px;
+             border-radius: 50%;
+             background-color: var(--bs-tertiary-bg);
+             display: flex;
+             align-items: center;
+             justify-content: center;
+             font-size: 1.2rem;
+             transition: background-color 0.2s ease-in-out;
+         }
+         .attachment-option:hover .attachment-icon {
+             background-color: var(--gakr-blue-light);
+         }
+         .attachment-text {
+             text-align: center;
+         }
+         /* Styles for attached file chips */
+         .attached-file-preview-container {
+             display: flex;
+             flex-wrap: wrap;
+             gap: 8px;
+             /* Removed padding-bottom from here, handled by JS setting padding-top on textarea */
+             width: 100%; /* Take full width of parent container */
+         }
+         .attached-file-chip {
+             display: flex;
+             align-items: center;
+             background-color: var(--bs-tertiary-bg);
+             border-radius: 16px;
+             padding: 4px 8px;
+             font-size: 0.85rem;
+             color: var(--bs-body-color);
+             max-width: 150px; /* Limit chip width */
+             overflow: hidden;
+             text-overflow: ellipsis;
+             white-space: nowrap;
+             position: relative; /* For the close button */
+         }
+         .attached-file-chip .file-name {
+             flex-grow: 1;
+             overflow: hidden;
+             text-overflow: ellipsis;
+             white-space: nowrap;
+             padding-right: 8px; /* Space for close button */
+         }
+         .attached-file-chip .remove-file {
+             cursor: pointer;
+             margin-left: 4px;
+             color: var(--bs-secondary-color);
+         }
+         .attached-file-chip .remove-file:hover {
+             color: var(--bs-body-color);
+         }
+         .attached-file-chip img {
+             width: 24px;
+             height: 24px;
+             border-radius: 4px;
+             object-fit: cover;
+             margin-right: 8px;
+         }
+         /* Hide file inputs */
+         .hidden-file-input {
+             display: none;
+         }
+         /* --- END NEW CSS --- */
+    </style>
+</head>
+<body>
+    <div class="gemini-chat-layout">
+        <header class="gemini-chat-header">
+            <div class="gemini-logo-area">
+                <a href="/" class="gemini-brand-logo">
+                    <i class="fas fa-robot" style="color: var(--gakr-blue);"></i>
+                </a>
+                <a href="/" class="gemini-brand-text" style="text-decoration: none;">GAKR AI</a>
+            </div>
+            <div class="gemini-nav-controls">
+                <a href="auth.html" class="gemini-login-button">Sign in / Register</a>
+            </div>
+        </header>
+        <div class="gemini-chat-wrapper">
+            <div class="gemini-chat-container" id="chatContainer">
+                <div class="gemini-welcome" id="welcomeMessage">
+                    <div class="gemini-welcome-icon">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <h1 class="gemini-welcome-title">How can I help you today?</h1>
+                    <p>I'm GAKR AI, your AI assistant. Ask me anything!</p>
+                </div>
+                <div class="gemini-message gemini-message-ai d-none" id="initialMessage">
+                    <div class="gemini-message-header">
+                        <div class="gemini-message-avatar">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <span>GAKR AI</span>
+                    </div>
+                    <div class="gemini-message-content">Hello! I'm GAKR AI How can I help you today?
+                    </div>
+                </div>
+                <div class="gemini-typing d-none" id="typingIndicator">
+                    <div class="gemini-typing-dot"></div>
+                    <div class="gemini-typing-dot"></div>
+                    <div class="gemini-typing-dot"></div>
+                </div>
+            </div>
+            <div class="gemini-prompt-area">
+                <div class="gemini-input-container" id="inputContainer">
+                    <div class="gemini-action-button" id="addButton">
+                        <i class="fas fa-plus"></i>
+                    </div>
+                    <div class="attached-file-preview-container" id="attachedFilePreviewContainer">
+                    </div>
+                    <textarea class="gemini-input" id="userInput" placeholder="Message GAKR AI..." rows="1"></textarea>
+                    <div class="gemini-input-actions">
+                        <div class="gemini-action-button">
+                            <i class="fas fa-microphone"></i>
+                        </div>
+                        <div class="gemini-action-button gemini-submit-button disabled" id="submitButton">
+                            <i class="fas fa-arrow-right"></i>
+                        </div>
+                    </div>
+                </div>
+                 <div class="attachment-options-container">
+                    <div class="attachment-option" id="cameraOption">
+                        <div class="attachment-icon"><i class="fas fa-camera"></i></div>
+                        <div class="attachment-text">Camera</div>
+                        <input type="file" id="cameraInput" class="hidden-file-input" accept="image/*" capture="camera">
+                    </div>
+                    <div class="attachment-option" id="galleryOption">
+                        <div class="attachment-icon"><i class="fas fa-image"></i></div>
+                        <div class="attachment-text">Gallery</div>
+                        <input type="file" id="galleryInput" class="hidden-file-input" accept="image/*">
+                    </div>
+                    <div class="attachment-option" id="filesOption">
+                        <div class="attachment-icon"><i class="fas fa-paperclip"></i></div>
+                        <div class="attachment-text">Files</div>
+                        <input type="file" id="filesInput" class="hidden-file-input" accept="*/*">
+                    </div>
+                     <div class="attachment-option" id="driveOption">
+                        <div class="attachment-icon"><i class="fab fa-google-drive"></i></div>
+                        <div class="attachment-text">Drive</div>
+                    </div>
+                </div>
+                 </div>
+        </div>
+        <div class="gemini-login-prompt" id="loginPrompt">
+            <div class="gemini-login-prompt-content">
+                <div class="gemini-login-prompt-title">Continue with GAKR AI</div>
+                <p>You've had 5 conversations with GAKR AI. Would you like to create an account to save your history?</p>
+                <div class="gemini-login-prompt-buttons">
+                    <a href="login.html" class="gemini-button-primary">Sign in</a>
+                    <a href="/login?signup=true" class="gemini-button-secondary">Create account</a>
+                    <button type="button" class="gemini-button-text" id="continueGuest">Continue as guest</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chatContainer');
+            const userInput = document.getElementById('userInput'); // This is the textarea
+            const submitButton = document.getElementById('submitButton');
+            const typingIndicator = document.getElementById('typingIndicator');
+            const welcomeMessage = document.getElementById('welcomeMessage');
+            const initialMessage = document.getElementById('initialMessage');
+            const loginPrompt = document.getElementById('loginPrompt');
+            const continueGuest = document.getElementById('continueGuest');
+            const addButton = document.getElementById('addButton'); // Get the new add button
+            const attachmentOptionsContainer = document.querySelector('.attachment-options-container'); // Get the options container
+            // New elements for file handling
+            const cameraInput = document.getElementById('cameraInput');
+            const galleryInput = document.getElementById('galleryInput');
+            const filesInput = document.getElementById('filesInput');
+            const attachedFilePreviewContainer = document.getElementById('attachedFilePreviewContainer');
+            const inputContainer = document.getElementById('inputContainer'); // The .gemini-input-container
+            let messageCount = 0;
+            let attachedFiles = []; // Array to store File objects
+            // --- Textarea Auto-Grow & Scroll Logic (Enhanced) ---
+            const style = getComputedStyle(userInput);
+            const lineHeight = parseFloat(style.lineHeight);
+            const minHeight = lineHeight; // Height for one line of text
+            const maxHeight = lineHeight * 5; // Height for 5 lines of text
+            // Initial padding values for the input container, adjusted for icons
+            const initialInputContainerPaddingTop = parseFloat(getComputedStyle(inputContainer).paddingTop);
+            const initialInputContainerPaddingBottom = parseFloat(getComputedStyle(inputContainer).paddingBottom);
+            const initialActionButtonsHeight = document.querySelector('.gemini-input-actions').offsetHeight; // Height of mic/send icons
+            function autoGrowTextarea() {
+                if (!userInput) {
+                    console.error("autoGrowTextarea called but userInput element not found.");
+                    return;
+                }
+                // Reset height to auto to get the true scrollHeight
+                userInput.style.height = 'auto';
+                const scrollHeight = userInput.scrollHeight;
+                // Calculate actual textarea height based on content, respecting min/max
+                let newTextareaHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+                userInput.style.height = newTextareaHeight + 'px';
+                // Adjust padding of the input container if files are present
+                if (attachedFiles.length > 0) {
+                    // The `attachedFilePreviewContainer` already has height, we need space below it for the textarea
+                    // The overall `inputContainer` needs to grow, and `userInput`'s height is part of that.
+                    // The gap between chips and textarea is handled by `gap` on `inputContainer`.
+                    // We need to ensure the textarea's padding is minimal, and its effective content area is what's used.
+                    userInput.style.paddingTop = '0px';
+                    userInput.style.paddingBottom = '0px';
+                    inputContainer.style.alignItems = 'flex-start'; // Align content to the top
+                } else {
+                    // Reset to default alignment and padding if no files
+                    userInput.style.paddingTop = '0px'; // Controlled by the overall inputContainer padding
+                    userInput.style.paddingBottom = '0px'; // Controlled by the overall inputContainer padding
+                    inputContainer.style.alignItems = 'flex-end'; // Align to bottom for default state
+                }
+                // Manage overflow-y based on whether it hits max height
+                if (scrollHeight > maxHeight) {
+                    userInput.style.overflowY = 'auto';
+                } else {
+                    userInput.style.overflowY = 'hidden';
+                }
+                // Enable submit button if there's text or attached files
+                if (userInput.value.trim().length > 0 || attachedFiles.length > 0) {
+                    submitButton.classList.remove('disabled');
+                } else {
+                    submitButton.classList.add('disabled');
+                }
+            }
+            userInput.addEventListener('input', autoGrowTextarea);
+            // Run on load to set initial height correctly
+            setTimeout(autoGrowTextarea, 0);
+            // --- End Textarea Auto-Grow & Scroll Logic ---
+            // Handle Enter key for sending (allow Shift+Enter for new line)
+            userInput.addEventListener('keydown', function(event) {
+                if (event.key === 'Enter' && !event.shiftKey && !submitButton.classList.contains('disabled')) {
+                    event.preventDefault();
+                    sendMessage();
+                }
+            });
+            // Handle submit button click
+            submitButton.addEventListener('click', function() {
+                if (!this.classList.contains('disabled')) {
+                    sendMessage();
+                }
+            });
+            // Handle continue as guest button click
+            continueGuest.addEventListener('click', function() {
+                loginPrompt.classList.remove('show');
+            });
+            // --- Handle Add Button Click ---
+            addButton.addEventListener('click', function(event) {
+                event.stopPropagation();
+                attachmentOptionsContainer.classList.toggle('visible');
+            });
+            // --- Handle Attachment Option Clicks ---
+            document.getElementById('cameraOption').addEventListener('click', function() {
+                cameraInput.click();
+                attachmentOptionsContainer.classList.remove('visible');
+            });
+            document.getElementById('galleryOption').addEventListener('click', function() {
+                galleryInput.click();
+                attachmentOptionsContainer.classList.remove('visible');
+            });
+            document.getElementById('filesOption').addEventListener('click', function() {
+                filesInput.click();
+                attachmentOptionsContainer.classList.remove('visible');
+            });
+            document.getElementById('driveOption').addEventListener('click', function() {
+                alert("Google Drive integration requires backend setup and Google API access.");
+                attachmentOptionsContainer.classList.remove('visible');
+            });
+            // --- Handle File Input Change ---
+            [cameraInput, galleryInput, filesInput].forEach(input => {
+                input.addEventListener('change', function(event) {
+                    const files = event.target.files;
+                    if (files.length > 0) {
+                        for (let i = 0; i < files.length; i++) {
+                            attachedFiles.push(files[i]);
+                            addFileChip(files[i]);
+                        }
+                        autoGrowTextarea(); // Re-evaluate button state and input height
+                        userInput.focus(); // Keep focus on the textarea
+                    }
+                    // Clear the input so the same file can be selected again
+                    event.target.value = '';
+                });
+            });
+            // Function to add a file chip to the input container
+            function addFileChip(file) {
+                const chip = document.createElement('div');
+                chip.className = 'attached-file-chip';
+                chip.setAttribute('data-filename', file.name); // Store filename for removal
+                let previewElement;
+                if (file.type.startsWith('image/')) {
+                    const img = document.createElement('img');
+                    img.src = URL.createObjectURL(file);
+                    img.alt = file.name;
+                    img.onload = () => URL.revokeObjectURL(img.src); // Clean up object URL
+                    previewElement = img;
+                } else {
+                    const icon = document.createElement('i');
+                    icon.className = 'fas fa-paperclip'; // Generic file icon
+                    previewElement = icon;
+                }
+                const fileNameSpan = document.createElement('span');
+                fileNameSpan.className = 'file-name';
+                fileNameSpan.textContent = file.name;
+                const removeButton = document.createElement('span');
+                removeButton.className = 'remove-file';
+                removeButton.innerHTML = '&times;'; // 'x' icon
+                removeButton.addEventListener('click', function() {
+                    removeFileChip(file.name);
+                });
+                chip.appendChild(previewElement);
+                chip.appendChild(fileNameSpan);
+                chip.appendChild(removeButton);
+                attachedFilePreviewContainer.appendChild(chip);
+                // No need to set userInput.style.paddingTop here directly,
+                // autoGrowTextarea will re-evaluate based on the container's contents.
+                autoGrowTextarea(); // Re-run autoGrow to adjust textarea based on new chip height
+            }
+            // Function to remove a file chip
+            function removeFileChip(filename) {
+                const chipToRemove = attachedFilePreviewContainer.querySelector(`[data-filename="${filename}"]`);
+                if (chipToRemove) {
+                    attachedFilePreviewContainer.removeChild(chipToRemove);
+                    attachedFiles = attachedFiles.filter(file => file.name !== filename);
+                    autoGrowTextarea(); // Re-evaluate button state and input height
+                }
+            }
+            // --- Hide options when clicking outside ---
+            document.addEventListener('click', function(event) {
+                const isClickInsideAddButton = addButton && addButton.contains(event.target);
+                const isClickInsideOptions = attachmentOptionsContainer && attachmentOptionsContainer.contains(event.target);
+                if (attachmentOptionsContainer && attachmentOptionsContainer.classList.contains('visible') && !isClickInsideAddButton && !isClickInsideOptions) {
+                    attachmentOptionsContainer.classList.remove('visible');
+                }
+            });
+            if (attachmentOptionsContainer) {
+                attachmentOptionsContainer.addEventListener('click', function(event){
+                    event.stopPropagation();
+                });
+            }
+            // --- END Hide options when clicking outside ---
+            // Function to send message (MODIFIED to include files)
+            async function sendMessage() {
+                const text = userInput.value.trim();
+                if (!text && attachedFiles.length === 0) return; // Don't send empty message with no files
+                if (!welcomeMessage.classList.contains('d-none')) {
+                    welcomeMessage.classList.add('d-none');
+                }
+                if (initialMessage.classList.contains('d-none')) {
+                    initialMessage.classList.remove('d-none');
+                }
+                // Display user message. If files are attached, mention them.
+                let userMessageContent = text;
+                if (attachedFiles.length > 0) {
+                    const fileNames = attachedFiles.map(f => f.name).join(', ');
+                    userMessageContent += ` (Attached: ${fileNames})`;
+                }
+                addMessage(userMessageContent, 'user');
+                userInput.value = '';
+                // Clear attached files and chips
+                attachedFiles = [];
+                attachedFilePreviewContainer.innerHTML = '';
+                // Trigger autoGrow to reset padding and alignment
+                autoGrowTextarea();
+                userInput.dispatchEvent(new Event('input', { bubbles: true }));
+                typingIndicator.classList.remove('d-none');
+                scrollToBottom();
+                // --- MODIFIED: Create FormData for sending text and files ---
+                const formData = new FormData();
+formData.append('message', text);
+formData.append('api_key', 'gakr-ai-2025-secret');  // ← ADD THIS LINE
+attachedFiles.forEach((file, index) => {
+    formData.append(`file${index}`, file);
+});
+                try {
+                    const response = await fetch('/api/chat', {
+                        method: 'POST',
+                        // Do NOT set 'Content-Type': 'application/json' for FormData.
+                        // The browser sets the correct 'Content-Type: multipart/form-data' automatically.
+                        body: formData
+                    });
+                    if (!response.ok) {
+                        console.error('HTTP error', response.status);
+                        const errorText = await response.text();
+                        throw new Error(`HTTP error ${response.status}: ${errorText}`);
+                    }
+                    const data = await response.json();
+                    console.log("AI response received:", data);
+                    typingIndicator.classList.add('d-none');
+                    let responseText = data;
+                    if (typeof data === 'object' && data !== null) {
+                        responseText = data.response;
+                        if (responseText === undefined) {
+                            try {
+                                responseText = JSON.stringify(data, null, 2);
+                            } catch (e) {
+                                responseText = data.toString();
+                            }
+                        }
+                    } else {
+                        responseText = String(data);
+                    }
+                    addMessage(responseText, 'ai');
+                    messageCount++;
+                    if (messageCount === 5 && !loginPrompt.classList.contains('show')) {
+                        loginPrompt.classList.add('show');
+                    }
+                } catch (error) {
+                    console.error('Fetch Error:', error);
+                    typingIndicator.classList.add('d-none');
+                    if (chatContainer) {
+                        addMessage('Sorry, I encountered an error sending your message or files. Please try again.', 'ai');
+                    }
+                } finally {
+                    if (typingIndicator) {
+                        typingIndicator.classList.add('d-none');
+                    }
+                    scrollToBottom();
+                }
+            }
+            // Function to add message to chat (keep existing)
+            function addMessage(text, type) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `gemini-message gemini-message-${type}`;
+                const headerDiv = document.createElement('div');
+                headerDiv.className = 'gemini-message-header';
+                const avatarDiv = document.createElement('div');
+                avatarDiv.className = 'gemini-message-avatar';
+                const avatarIcon = document.createElement('i');
+                avatarIcon.className = type === 'user' ? 'fas fa-user' : 'fas fa-robot';
+                const nameSpan = document.createElement('span');
+                nameSpan.textContent = type === 'user' ? 'You' : 'GAKR AI';
+                const contentDiv = document.createElement('div');
+                contentDiv.className = 'gemini-message-content';
+                contentDiv.textContent = text; // Use textContent to prevent XSS if text comes from API
+                avatarDiv.appendChild(avatarIcon);
+                headerDiv.appendChild(avatarDiv);
+                headerDiv.appendChild(nameSpan);
+                messageDiv.appendChild(headerDiv);
+                messageDiv.appendChild(contentDiv);
+                chatContainer.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            // Function to scroll chat to bottom (keep existing)
+            function scrollToBottom() {
+                setTimeout(() => {
+                    if (chatContainer) {
+                        chatContainer.scrollTop = chatContainer.scrollHeight;
+                    }
+                }, 0);
+            }
+            // Initialize based on URL query params (keep existing)
+            const urlParams = new URLSearchParams(window.location.search);
+            const initialQuery = urlParams.get('q');
+            if (initialQuery) {
+                userInput.value = initialQuery;
+                userInput.dispatchEvent(new Event('input', { bubbles: true }));
+                setTimeout(function() {
+                    if (submitButton && !submitButton.classList.contains('disabled')) {
+                        submitButton.click();
+                    }
+                }, 100);
+            } else {
+                if (userInput) {
+                    // Initial check for submit button state
+                    if (userInput.value.trim().length === 0 && attachedFiles.length === 0) {
+                        if (submitButton) submitButton.classList.add('disabled');
+                    } else {
+                        if (submitButton) submitButton.classList.remove('disabled');
+                    }
+                    // Trigger autoGrowTextarea immediately on load for correct initial height
+                    autoGrowTextarea();
+                }
+            }
+        });
+    </script>
+</body>
+</html>