Ashok75
/

base2

@@ -40,7 +40,7 @@
             width: 100%;
             background: -webkit-linear-gradient(left, #003366,#004080,#0059b3 , #0073e6);
             color: var(--bs-body-color);
-            padding-top: 5vh;
             padding-bottom: 5vh;
             min-height: 100vh;
             /* Allow space for modal overlay */
@@ -442,16 +442,25 @@
              font-size: 0.9rem;
              color: var(--bs-body-color);
          }
-         .modal-form input[type="text"],
-         .modal-form input[type="email"],
-         .modal-form input[type="password"] {
-             width: 100%;
-             padding: 10px 15px;
              border: 1px solid var(--bs-border-color);
-             border-radius: 10px;
              background-color: var(--bs-body-bg);
              color: var(--bs-body-color);
-             box-sizing: border-box; /* Crucial for consistent width */
          }
          .modal-form .error-message {
             position: static; /* Remove absolute positioning */
@@ -469,9 +478,96 @@
              width: 100%;
              max-width: 150px;
          }
     </style>
 </head>
 <body>
     <div class="wrapper">
         <div class="title-text">
@@ -540,32 +636,45 @@
     </div>
     <div class="modal-overlay" id="forgotPasswordRequestModal">
-        <div class="modal-content">
-            <p class="modal-message" id="forgotModalMessage">Enter your registered email to request a password reset.</p>
             <form id="forgotPasswordRequestForm" class="modal-form">
-                <div class="field">
-                    <label for="forgotEmail">Email:</label>
-                    <input type="email" id="forgotEmail" name="email" required>
-                    <div class="error-message" id="forgotEmailError"></div>
                 </div>
                 <div class="modal-buttons-stacked">
-                    <button type="submit" class="modal-button" id="forgotSubmitButton">Request OTP</button>
-                    <button type="button" class="modal-button" id="forgotCancelButton" style="background-color: var(--bs-secondary-color);">Cancel</button>
                 </div>
             </form>
             <div id="otpSection" style="display: none;">
                 <form id="verifyOtpForm" class="modal-form">
-                    <div class="field">
-                        <label for="otpInput">Enter OTP:</label>
-                        <input type="text" id="otpInput" name="otp" required maxlength="6" pattern="\d{6}" title="Please enter a 6-digit OTP">
-                        <div class="error-message" id="otpError"></div>
                     </div>
                     <div class="modal-buttons-stacked">
-                        <button type="submit" class="modal-button" id="verifyOtpButton">Verify OTP</button>
-                        <button type="button" class="modal-button" id="resendOtpButton" style="background-color: var(--bs-secondary-color);">Send Again</button>
-                        <button type="button" class="modal-button" id="otpCancelButton" style="background-color: var(--bs-secondary-color);">Cancel</button>
                     </div>
                 </form>
             </div>
@@ -603,6 +712,34 @@
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         const loginText = document.querySelector(".title-text .login");
         const loginFormDiv = document.querySelector("form.login");
         const signupLink = document.querySelector("form .signup-link a");
@@ -638,7 +775,20 @@
         const modalMessageDiv = document.getElementById('modalMessage');
         const modalButtonsContainer = document.getElementById('modalButtonsContainer');
-        // Forgot Password Request & OTP Modals elements
         const forgotPasswordLink = document.getElementById('forgotPasswordLink');
         const forgotPasswordRequestModal = document.getElementById('forgotPasswordRequestModal'); // The main overlay for forgot/otp
         const forgotModalMessage = document.getElementById('forgotModalMessage'); // Message within the forgot/otp modal
@@ -678,6 +828,31 @@
         // Stores the email across the forgot password/OTP/reset flow
         let currentForgotEmail = '';
         // Function to clear all error messages and input error classes
         function clearErrors(formType = 'all') {
             if (formType === 'all' || formType === 'main') {
@@ -851,7 +1026,7 @@
         // Login Form Submission Handler
         if (loginForm) {
-            loginForm.addEventListener('submit', function(event) {
                 event.preventDefault();
                 clearErrors('main'); // Clear main form errors
@@ -878,6 +1053,23 @@
                 }
                 if (isValid) {
                     submitFormData(event.target, loginSubmitButton, '/api/login', 'main');
                 }
             });
@@ -885,7 +1077,7 @@
         // Signup Form Submission Handler
         if (signupForm) {
-            signupForm.addEventListener('submit', function(event) {
                 event.preventDefault();
                 clearErrors('main');
@@ -934,6 +1126,23 @@
                 }
                 if (isValid) {
                     submitFormData(event.target, signupSubmitButton, '/api/signup', 'main');
                 }
             });
@@ -955,6 +1164,12 @@
                 forgotPasswordRequestForm.style.display = 'block';
                 if (otpSection) otpSection.style.display = 'none'; // Ensure OTP section is hidden initially
                 showCustomModal(forgotPasswordRequestModal);
             });
         }
@@ -999,6 +1214,12 @@
                             if (otpSection) otpSection.style.display = 'block';
                             otpInput.value = ''; // Clear previous OTP in case of resend
                             // Update message for OTP section
                             let messageText = `<p>An OTP has been sent to <strong>${email}</strong>. Please enter it below.</p>`;
                             // Note: Do not display simulated OTP in production. This is for testing convenience.
@@ -1006,9 +1227,30 @@
                             //     messageText += `<p><strong>SIMULATED OTP (FOR TESTING):</strong> ${result.simulated_otp}</p>`;
                             // }
                             forgotModalMessage.innerHTML = messageText;
                         } else {
-                            displayModalFormErrors(result, forgotPasswordRequestForm, 'forgot');
                         }
                     } catch (error) {
                         console.error('Fetch error:', error);
@@ -1028,19 +1270,17 @@
                 clearErrors('otp'); // Clear errors specific to the OTP verification form
                 let isValid = true;
-                const otp = otpInput.value.trim();
-                if (otp === '') {
                     isValid = false;
-                    otpError.textContent = 'OTP is required.';
-                    otpInput.classList.add('error');
-                } else if (!/^\d{6}$/.test(otp)) { // Ensure it's 6 digits
-                    isValid = false;
-                    otpError.textContent = 'OTP must be a 6-digit number.';
-                    otpInput.classList.add('error');
                 }
                 if (isValid) {
                     verifyOtpButton.disabled = true;
                     verifyOtpButton.innerHTML = '<span class="loading-spinner"></span> Verifying...';
@@ -1106,6 +1346,7 @@
                         otpInput.value = ''; // Clear previous OTP
                         otpInput.classList.remove('error'); // Clear error state
                         otpError.textContent = ''; // Clear error message
                     } else {
                         // If there's an error on resend, display it in the OTP section's error message
                         otpError.textContent = result.message || 'Failed to resend OTP.';
@@ -1131,6 +1372,16 @@
                 forgotPasswordRequestForm.reset();
                 currentForgotEmail = ''; // Clear stored email
                 clearErrors('forgot'); // Ensure all forgot-related errors are cleared
             });
         }
@@ -1140,6 +1391,16 @@
                 verifyOtpForm.reset();
                 currentForgotEmail = ''; // Clear stored email
                 clearErrors('otp'); // Ensure all OTP-related errors are cleared
             });
         }
@@ -1149,6 +1410,16 @@
                 resetPasswordForm.reset();
                 currentForgotEmail = ''; // Clear stored email
                 clearErrors('reset'); // Ensure all reset-related errors are cleared
             });
         }
@@ -1213,6 +1484,16 @@
                             hideCustomModal(resetPasswordModal);
                             resetPasswordForm.reset();
                             currentForgotEmail = ''; // Clear stored email after successful reset
                             showFlexibleModal(
                                 '<p>Password reset successful. You can now login with your new password.</p>',
                                 [{ text: 'OK', action: () => {
@@ -1222,6 +1503,7 @@
                             );
                         } else {
                             // Display error messages from the backend
                             displayModalFormErrors(result, resetPasswordForm, 'reset');
                             if (result.message && (result.message.includes('OTP not verified') || result.message.includes('not initiated'))) {
                                 showFlexibleModal(
@@ -1313,7 +1595,10 @@
             // Update the main message area of the modal if a general message is returned
             const targetModalMessage = formElement.closest('.modal-content').querySelector('.modal-message');
             if (targetModalMessage && result.message) {
-                targetModalMessage.innerHTML = `<p>${result.message}</p>`;
             }
         }
@@ -1368,24 +1653,15 @@
                                 }}]
                             );
                         } else if (endpoint === '/api/login') {
-    showFlexibleModal(
-        '<p>Login successful!</p>',
-        [{
-            text: 'OK',
-            action: () => {
-                // Mark user as logged in so chat.html knows
-                localStorage.setItem('gakr_is_logged_in', 'true');
-                alert('Welcome! You are logged in.');
-                // Optional: remove any guest flag if you had one
-                // localStorage.removeItem('gakr_is_guest');
-                // Redirect back to chat interface
-                window.location.href = 'chat.html';
-            }
-        }]
-    );
-}
                     }
                     // For forgot/otp/reset, successful handling is now done directly in their respective event listeners
                     // so no generic handling here for those contexts.
@@ -1407,10 +1683,13 @@
                             handleMainFormErrors(result, formElement, endpoint);
                         }
                     } else if (formContext === 'forgot') {
                         displayModalFormErrors(result, formElement, 'forgot');
                     } else if (formContext === 'otp') {
                         displayModalFormErrors(result, formElement, 'otp');
                     } else if (formContext === 'reset') {
                         displayModalFormErrors(result, formElement, 'reset');
                     }
                 }
@@ -1428,9 +1707,9 @@
                 submitButton.disabled = false;
                 // Reset button text specifically for modal forms if not handled by success/error flows above
                 if (formContext === 'forgot') {
-                    submitButton.innerHTML = 'Request OTP';
                 } else if (formContext === 'otp') {
-                    submitButton.innerHTML = 'Verify OTP';
                 } else if (formContext === 'reset') {
                     submitButton.innerHTML = 'Reset Password';
                 }

             width: 100%;
             background: -webkit-linear-gradient(left, #003366,#004080,#0059b3 , #0073e6);
             color: var(--bs-body-color);
+            padding-top: calc(64px + 5vh);
             padding-bottom: 5vh;
             min-height: 100vh;
             /* Allow space for modal overlay */
              font-size: 0.9rem;
              color: var(--bs-body-color);
          }
+         .otp-input-container {
+             display: flex;
+             gap: 5px;
+             justify-content: center;
+             margin-bottom: 10px;
+         }
+         .otp-digit {
+             width: 40px;
+             height: 40px;
+             text-align: center;
              border: 1px solid var(--bs-border-color);
+             border-radius: 5px;
+             font-size: 1.2rem;
              background-color: var(--bs-body-bg);
              color: var(--bs-body-color);
+         }
+         .otp-digit:focus {
+             border-color: var(--gakr-blue);
+             outline: none;
          }
          .modal-form .error-message {
             position: static; /* Remove absolute positioning */
              width: 100%;
              max-width: 150px;
          }
+        /* Header styles */
+        .gakr-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;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+            background-color: var(--bs-body-bg);
+            z-index: 10;
+        }
+        .gakr-logo-area {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        .gakr-brand-logo {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .gakr-brand-text {
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--gakr-blue);
+        }
+        .gakr-nav-controls {
+            display: flex;
+            align-items: center;
+        }
+        .gakr-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;
+        }
+        .gakr-login-button:hover {
+            background-color: rgba(66, 133, 244, 0.1);
+        }
+        .gakr-profile-button {
+            color: var(--gakr-blue);
+            text-decoration: none;
+            background: transparent;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            transition: background-color 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .gakr-profile-button:hover {
+            background-color: rgba(66, 133, 244, 0.1);
+        }
     </style>
 </head>
 <body>
+    <header class="gakr-chat-header">
+        <div class="gakr-logo-area">
+            <a href="/" class="gakr-brand-logo">
+                <i class="fas fa-robot" style="color: var(--gakr-blue);"></i>
+            </a>
+            <a href="/" class="gakr-brand-text" style="text-decoration: none;">GAKR AI</a>
+        </div>
+        <div class="gakr-nav-controls" id="authButtonContainer">
+            <a href="/auth" class="gakr-login-button">Sign in / Register</a>
+        </div>
+    </header>
     <div class="wrapper">
         <div class="title-text">
     </div>
     <div class="modal-overlay" id="forgotPasswordRequestModal">
+        <div class="modal-content" style="max-width: 450px;">
+            <h3 style="text-align: center; margin-bottom: 20px; color: var(--gakr-blue);">Reset Password</h3>
+            <p class="modal-message" id="forgotModalMessage" style="text-align: center; margin-bottom: 25px;">Enter your registered email address to receive a password reset code.</p>
             <form id="forgotPasswordRequestForm" class="modal-form">
+                <div class="field" style="margin-bottom: 30px;">
+                    <label for="forgotEmail" style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--bs-body-color);">Email Address:</label>
+                    <input type="email" id="forgotEmail" name="email" required style="width: 100%; padding: 12px; border: 2px solid var(--bs-border-color); border-radius: 8px; font-size: 16px; background-color: var(--bs-body-bg); color: var(--bs-body-color);" placeholder="Enter your email">
+                    <div class="error-message" id="forgotEmailError" style="margin-top: 8px;"></div>
                 </div>
                 <div class="modal-buttons-stacked">
+                    <button type="submit" class="modal-button" id="forgotSubmitButton" style="width: 100%; padding: 12px; font-size: 16px;">Send Reset Code</button>
+                    <button type="button" class="modal-button" id="forgotCancelButton" style="width: 100%; padding: 12px; font-size: 16px; background-color: var(--bs-secondary-color); margin-top: 10px;">Cancel</button>
                 </div>
             </form>
             <div id="otpSection" style="display: none;">
+                <h3 style="text-align: center; margin-bottom: 20px; color: var(--gakr-blue);">Enter Verification Code</h3>
+                <p style="text-align: center; margin-bottom: 25px; color: var(--bs-secondary-color);">We've sent a 8-digit code to your email. Enter it below to continue.</p>
                 <form id="verifyOtpForm" class="modal-form">
+                    <div class="field" style="margin-bottom: 30px;">
+                        <label style="display: block; margin-bottom: 15px; font-weight: 500; color: var(--bs-body-color); text-align: center;">Verification Code:</label>
+                        <div class="otp-input-container" style="display: flex; justify-content: center; gap: 8px; margin-bottom: 10px;">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                            <input type="text" class="otp-digit" maxlength="1" pattern="\d" required style="width: 45px; height: 50px; text-align: center; font-size: 20px; font-weight: bold; border: 2px solid var(--bs-border-color); border-radius: 8px; background-color: var(--bs-body-bg); color: var(--bs-body-color);">
+                        </div>
+                        <input type="hidden" id="otpInput" name="otp">
+                        <div class="error-message" id="otpError" style="text-align: center; margin-top: 10px;"></div>
                     </div>
                     <div class="modal-buttons-stacked">
+                        <button type="submit" class="modal-button" id="verifyOtpButton" style="width: 100%; padding: 12px; font-size: 16px;">Verify Code</button>
+                        <button type="button" class="modal-button" id="resendOtpButton" style="width: 100%; padding: 12px; font-size: 16px; margin-top: 10px;">Send Code Again</button>
+                        <button type="button" class="modal-button" id="otpCancelButton" style="width: 100%; padding: 12px; font-size: 16px; background-color: var(--bs-secondary-color); margin-top: 10px;">Cancel</button>
                     </div>
                 </form>
             </div>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
+        // --- Authentication Status Check ---
+        function updateAuthButton() {
+            const authButtonContainer = document.getElementById('authButtonContainer');
+            const userIsLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+            if (userIsLoggedIn) {
+                authButtonContainer.innerHTML = `
+                    <a href="/profile" class="gakr-profile-button">
+                        <i class="fas fa-user-circle me-2"></i>Profile
+                    </a>
+                `;
+                 const profileButton = authButtonContainer.querySelector('.gakr-profile-button');
+                 if (profileButton) {
+                     profileButton.addEventListener('click', function(event) {
+                         console.log("Profile button clicked!");
+                     });
+                 }
+            } else {
+                authButtonContainer.innerHTML = `
+                    <a href="/auth" class="gakr-login-button">Sign in / Register</a>
+                `;
+            }
+        }
+        updateAuthButton();
+        window.addEventListener('focus', updateAuthButton);
+        window.addEventListener('storage', updateAuthButton);
         const loginText = document.querySelector(".title-text .login");
         const loginFormDiv = document.querySelector("form.login");
         const signupLink = document.querySelector("form .signup-link a");
         const modalMessageDiv = document.getElementById('modalMessage');
         const modalButtonsContainer = document.getElementById('modalButtonsContainer');
+        // OTP digit inputs
+        const otpDigits = document.querySelectorAll('.otp-digit');
+        otpDigits.forEach((input, index) => {
+            input.addEventListener('input', function() {
+                if (this.value.length === 1 && index < otpDigits.length - 1) {
+                    otpDigits[index + 1].focus();
+                }
+            });
+            input.addEventListener('keydown', function(e) {
+                if (e.key === 'Backspace' && this.value === '' && index > 0) {
+                    otpDigits[index - 1].focus();
+                }
+            });
+        });
         const forgotPasswordLink = document.getElementById('forgotPasswordLink');
         const forgotPasswordRequestModal = document.getElementById('forgotPasswordRequestModal'); // The main overlay for forgot/otp
         const forgotModalMessage = document.getElementById('forgotModalMessage'); // Message within the forgot/otp modal
         // Stores the email across the forgot password/OTP/reset flow
         let currentForgotEmail = '';
+        // Resend OTP cooldown variables
+        let resendCooldown = 0;
+        let resendInterval = null;
+        // Function to start resend cooldown timer
+        function startResendCooldown() {
+            resendCooldown = 60; // 60 seconds
+            resendOtpButton.disabled = true;
+            resendOtpButton.textContent = `Send Again (60s)`;
+            resendOtpButton.style.backgroundColor = 'var(--bs-secondary-color)'; // Gray during cooldown
+            resendInterval = setInterval(() => {
+                resendCooldown--;
+                if (resendCooldown > 0) {
+                    resendOtpButton.textContent = `Send Again (${resendCooldown}s)`;
+                } else {
+                    clearInterval(resendInterval);
+                    resendInterval = null;
+                    resendOtpButton.disabled = false;
+                    resendOtpButton.textContent = 'Send Code Again';
+                    resendOtpButton.style.backgroundColor = ''; // Reset to default (primary blue)
+                }
+            }, 1000);
+        }
         // Function to clear all error messages and input error classes
         function clearErrors(formType = 'all') {
             if (formType === 'all' || formType === 'main') {
         // Login Form Submission Handler
         if (loginForm) {
+            loginForm.addEventListener('submit', async function(event) {
                 event.preventDefault();
                 clearErrors('main'); // Clear main form errors
                 }
                 if (isValid) {
+                    // Check if user exists
+                    try {
+                        const checkResponse = await fetch('/api/check_user', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ identifier: usernameOrEmail })
+                        });
+                        const checkData = await checkResponse.json();
+                        if (!checkData.exists) {
+                            loginUsernameOrEmailError.textContent = 'User does not exist.';
+                            loginUsernameOrEmailInput.classList.add('error');
+                            return;
+                        }
+                    } catch (error) {
+                        console.error('Error checking user:', error);
+                        // Proceed anyway
+                    }
                     submitFormData(event.target, loginSubmitButton, '/api/login', 'main');
                 }
             });
         // Signup Form Submission Handler
         if (signupForm) {
+            signupForm.addEventListener('submit', async function(event) {
                 event.preventDefault();
                 clearErrors('main');
                 }
                 if (isValid) {
+                    // Check if user already exists
+                    try {
+                        const checkResponse = await fetch('/api/check_user', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ identifier: email })
+                        });
+                        const checkData = await checkResponse.json();
+                        if (checkData.exists) {
+                            signupEmailError.textContent = 'Email already registered.';
+                            signupEmailInput.classList.add('error');
+                            return;
+                        }
+                    } catch (error) {
+                        console.error('Error checking user:', error);
+                        // Proceed anyway
+                    }
                     submitFormData(event.target, signupSubmitButton, '/api/signup', 'main');
                 }
             });
                 forgotPasswordRequestForm.style.display = 'block';
                 if (otpSection) otpSection.style.display = 'none'; // Ensure OTP section is hidden initially
+                // Reset modal size for email input
+                const modalContent = forgotPasswordRequestModal.querySelector('.modal-content');
+                if (modalContent) {
+                    modalContent.style.maxWidth = '450px';
+                }
                 showCustomModal(forgotPasswordRequestModal);
             });
         }
                             if (otpSection) otpSection.style.display = 'block';
                             otpInput.value = ''; // Clear previous OTP in case of resend
+                            // Increase modal size for OTP section
+                            const modalContent = forgotPasswordRequestModal.querySelector('.modal-content');
+                            if (modalContent) {
+                                modalContent.style.maxWidth = '550px';
+                            }
                             // Update message for OTP section
                             let messageText = `<p>An OTP has been sent to <strong>${email}</strong>. Please enter it below.</p>`;
                             // Note: Do not display simulated OTP in production. This is for testing convenience.
                             //     messageText += `<p><strong>SIMULATED OTP (FOR TESTING):</strong> ${result.simulated_otp}</p>`;
                             // }
                             forgotModalMessage.innerHTML = messageText;
+                            startResendCooldown(); // Start the cooldown timer for the resend button
                         } else {
+                            // Handle different error types
+                            if (response.status === 404) {
+                                // Email not registered - show registration modal
+                                hideCustomModal(forgotPasswordRequestModal);
+                                showFlexibleModal(
+                                    '<p>The email address you entered is not registered yet.</p><p>Please sign up to create an account.</p>',
+                                    [
+                                        { text: 'Sign Up', action: () => {
+                                            signupRadio.checked = true;
+                                            slideToSignup();
+                                            // Pre-fill the email in signup form
+                                            signupEmailInput.value = email;
+                                        }},
+                                        { text: 'Try Again', style: 'background-color: var(--bs-secondary-color);' }
+                                    ]
+                                );
+                            } else {
+                                // Other errors (400, 500) - show in modal
+                                result.status = response.status;
+                                displayModalFormErrors(result, forgotPasswordRequestForm, 'forgot');
+                            }
                         }
                     } catch (error) {
                         console.error('Fetch error:', error);
                 clearErrors('otp'); // Clear errors specific to the OTP verification form
                 let isValid = true;
+                const otpDigits = document.querySelectorAll('.otp-digit');
+                const otp = Array.from(otpDigits).map(d => d.value).join('');
+                if (otp.length !== 8 || !/^\d{8}$/.test(otp)) {
                     isValid = false;
+                    otpError.textContent = 'Please enter all 8 digits of the OTP.';
+                    otpDigits.forEach(d => d.classList.add('error'));
                 }
                 if (isValid) {
+                    otpInput.value = otp; // Set hidden input
                     verifyOtpButton.disabled = true;
                     verifyOtpButton.innerHTML = '<span class="loading-spinner"></span> Verifying...';
                         otpInput.value = ''; // Clear previous OTP
                         otpInput.classList.remove('error'); // Clear error state
                         otpError.textContent = ''; // Clear error message
+                        startResendCooldown(); // Start the cooldown timer
                     } else {
                         // If there's an error on resend, display it in the OTP section's error message
                         otpError.textContent = result.message || 'Failed to resend OTP.';
                 forgotPasswordRequestForm.reset();
                 currentForgotEmail = ''; // Clear stored email
                 clearErrors('forgot'); // Ensure all forgot-related errors are cleared
+                // Clear resend cooldown
+                if (resendInterval) {
+                    clearInterval(resendInterval);
+                    resendInterval = null;
+                    resendCooldown = 0;
+                }
+                // Reset resend button styling
+                resendOtpButton.disabled = false;
+                resendOtpButton.textContent = 'Send Code Again';
+                resendOtpButton.style.backgroundColor = '';
             });
         }
                 verifyOtpForm.reset();
                 currentForgotEmail = ''; // Clear stored email
                 clearErrors('otp'); // Ensure all OTP-related errors are cleared
+                // Clear resend cooldown
+                if (resendInterval) {
+                    clearInterval(resendInterval);
+                    resendInterval = null;
+                    resendCooldown = 0;
+                }
+                // Reset resend button styling
+                resendOtpButton.disabled = false;
+                resendOtpButton.textContent = 'Send Code Again';
+                resendOtpButton.style.backgroundColor = '';
             });
         }
                 resetPasswordForm.reset();
                 currentForgotEmail = ''; // Clear stored email
                 clearErrors('reset'); // Ensure all reset-related errors are cleared
+                // Clear resend cooldown
+                if (resendInterval) {
+                    clearInterval(resendInterval);
+                    resendInterval = null;
+                    resendCooldown = 0;
+                }
+                // Reset resend button styling
+                resendOtpButton.disabled = false;
+                resendOtpButton.textContent = 'Send Code Again';
+                resendOtpButton.style.backgroundColor = '';
             });
         }
                             hideCustomModal(resetPasswordModal);
                             resetPasswordForm.reset();
                             currentForgotEmail = ''; // Clear stored email after successful reset
+                            // Clear resend cooldown
+                            if (resendInterval) {
+                                clearInterval(resendInterval);
+                                resendInterval = null;
+                                resendCooldown = 0;
+                            }
+                            // Reset resend button styling
+                            resendOtpButton.disabled = false;
+                            resendOtpButton.textContent = 'Send Code Again';
+                            resendOtpButton.style.backgroundColor = '';
                             showFlexibleModal(
                                 '<p>Password reset successful. You can now login with your new password.</p>',
                                 [{ text: 'OK', action: () => {
                             );
                         } else {
                             // Display error messages from the backend
+                            result.status = response.status;
                             displayModalFormErrors(result, resetPasswordForm, 'reset');
                             if (result.message && (result.message.includes('OTP not verified') || result.message.includes('not initiated'))) {
                                 showFlexibleModal(
             // Update the main message area of the modal if a general message is returned
             const targetModalMessage = formElement.closest('.modal-content').querySelector('.modal-message');
             if (targetModalMessage && result.message) {
+                // Check if this is an error response (status codes 400-599 indicate errors)
+                const isError = result.status >= 400 && result.status < 600;
+                const messageClass = isError ? 'error-message' : '';
+                targetModalMessage.innerHTML = `<p class="${messageClass}">${result.message}</p>`;
             }
         }
                                 }}]
                             );
                         } else if (endpoint === '/api/login') {
+                            showFlexibleModal(
+                                '<p>Login successful!</p>',
+                                [{ text: 'OK', action: () => {
+                                    localStorage.setItem('isLoggedIn', 'true');
+                                    localStorage.setItem('user', JSON.stringify(result.user));
+                                    window.location.href = '/';
+                                }}]
+                            );
+                        }
                     }
                     // For forgot/otp/reset, successful handling is now done directly in their respective event listeners
                     // so no generic handling here for those contexts.
                             handleMainFormErrors(result, formElement, endpoint);
                         }
                     } else if (formContext === 'forgot') {
+                        result.status = response.status;
                         displayModalFormErrors(result, formElement, 'forgot');
                     } else if (formContext === 'otp') {
+                        result.status = response.status;
                         displayModalFormErrors(result, formElement, 'otp');
                     } else if (formContext === 'reset') {
+                        result.status = response.status;
                         displayModalFormErrors(result, formElement, 'reset');
                     }
                 }
                 submitButton.disabled = false;
                 // Reset button text specifically for modal forms if not handled by success/error flows above
                 if (formContext === 'forgot') {
+                    submitButton.innerHTML = 'Send Reset Code';
                 } else if (formContext === 'otp') {
+                    submitButton.innerHTML = 'Verify Code';
                 } else if (formContext === 'reset') {
                     submitButton.innerHTML = 'Reset Password';
                 }

chat.html CHANGED Viewed

@@ -29,7 +29,7 @@
          }
         /* --- Base Chat Layout --- */
-        .gemini-chat-layout {
             display: flex;
             flex-direction: column;
             height: 100vh;
@@ -38,7 +38,7 @@
              color: var(--bs-body-color); /* Use BS var */
         }
-        .gemini-chat-header {
             padding: 0.75rem 1.5rem;
             display: flex;
             justify-content: space-between;
@@ -47,13 +47,13 @@
             height: 64px;
         }
-        .gemini-logo-area {
             display: flex;
             align-items: center;
             gap: 0.75rem;
         }
-        .gemini-brand-logo {
             width: 24px;
             height: 24px;
             display: flex;
@@ -61,13 +61,13 @@
             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;
@@ -75,7 +75,7 @@
             flex-direction: column;
         }
-        .gemini-chat-container {
             flex: 1;
             overflow-y: auto;
             padding: 1rem;
@@ -87,7 +87,7 @@
             margin: 0 auto;
         }
-        .gemini-prompt-area {
             padding: 1rem;
             border-top: 1px solid var(--bs-border-color);
             width: 100%;
@@ -98,22 +98,22 @@
             /* --- 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;
@@ -121,7 +121,7 @@
             color: var(--bs-secondary-color);
         }
-        .gemini-message-avatar {
             width: 24px;
             height: 24px;
             border-radius: 50%;
@@ -131,7 +131,7 @@
             font-size: 0.75rem;
         }
-        .gemini-message-content {
             padding: 1rem;
             border-radius: 12px;
             line-height: 1.5;
@@ -140,27 +140,27 @@
              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);
@@ -178,14 +178,14 @@
         }
          /* 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;
@@ -209,12 +209,12 @@
             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;
@@ -226,8 +226,8 @@
             flex-shrink: 0; /* Prevent shrinking */
         }
-         /* Reusing .gemini-action-button styles for new '+' button */
-         .gemini-action-button {
             width: 36px;
             height: 36px;
             border-radius: 50%;
@@ -240,50 +240,50 @@
             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;
@@ -294,7 +294,7 @@
             align-self: flex-end;
         }
-        .gemini-typing-dot {
             width: 6px;
             height: 6px;
             border-radius: 50%;
@@ -302,11 +302,11 @@
             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; }
-        .gemini-thinking-toggle {
             background: none;
             border: none;
             color: var(--gakr-blue);
@@ -317,7 +317,7 @@
             text-decoration: underline;
         }
-        .gemini-thinking-content {
             display: block;
             margin-top: 0.5rem;
             padding: 0.5rem;
@@ -326,26 +326,26 @@
             font-style: italic;
         }
-        .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;
@@ -356,12 +356,31 @@
             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;
@@ -377,12 +396,12 @@
             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;
@@ -390,21 +409,21 @@
             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;
@@ -417,11 +436,11 @@
             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);
@@ -434,11 +453,11 @@
             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;
@@ -451,7 +470,7 @@
             transition: background-color 0.2s;
         }
-        .gemini-button-text:hover {
             background-color: var(--bs-tertiary-bg);
         }
@@ -586,62 +605,62 @@
     </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>
@@ -671,14 +690,14 @@
                  </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>
@@ -706,8 +725,20 @@ document.addEventListener('DOMContentLoaded', function() {
     let messageCount = 0;
     let attachedFiles = [];
-    // Simple login flag (set in auth flow: localStorage.setItem("gakr_is_logged_in","true"))
-    const isLoggedIn = localStorage.getItem("gakr_is_logged_in") === "true";
     // --- Textarea Auto-Grow & Scroll Logic (original, kept) ---
     const style = getComputedStyle(userInput);
@@ -717,7 +748,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const initialInputContainerPaddingTop = parseFloat(getComputedStyle(inputContainer).paddingTop);
     const initialInputContainerPaddingBottom = parseFloat(getComputedStyle(inputContainer).paddingBottom);
-    const initialActionButtonsHeight = document.querySelector('.gemini-input-actions').offsetHeight;
     function autoGrowTextarea() {
         if (!userInput) {
@@ -775,6 +806,14 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
     // Existing “continue as guest” modal
     continueGuest.addEventListener('click', function() {
         loginPrompt.classList.remove('show');
@@ -957,7 +996,7 @@ document.addEventListener('DOMContentLoaded', function() {
         });
         loginBtn.addEventListener('click', function () {
-            window.location.href = 'auth.html';
         });
         buttonRow.appendChild(skipBtn);
@@ -1006,7 +1045,7 @@ document.addEventListener('DOMContentLoaded', function() {
         scrollToBottom();
         const formData = new FormData();
-        formData.append('api_key', 'gakr-ai-2025-secret');
         formData.append('prompt', text);
         if (filesSnapshot.length > 0) {
@@ -1059,13 +1098,13 @@ document.addEventListener('DOMContentLoaded', function() {
     function addMessage(text, type, streaming = false) {
         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';
@@ -1074,7 +1113,7 @@ document.addEventListener('DOMContentLoaded', function() {
         nameSpan.textContent = type === 'user' ? 'You' : 'GAKR AI';
         const contentDiv = document.createElement('div');
-        contentDiv.className = 'gemini-message-content';
         if (!streaming) {
             if (type === 'ai') {
                 updateAIMessage(contentDiv, text);
@@ -1111,7 +1150,7 @@ document.addEventListener('DOMContentLoaded', function() {
             // Create toggle button
             const toggleButton = document.createElement('button');
-            toggleButton.className = 'gemini-thinking-toggle';
             toggleButton.textContent = 'hide thinking';
             toggleButton.onclick = function() {
                 const thinkingDiv = this.nextElementSibling;
@@ -1126,7 +1165,7 @@ document.addEventListener('DOMContentLoaded', function() {
             // Create thinking content div
             const thinkingDiv = document.createElement('div');
-            thinkingDiv.className = 'gemini-thinking-content';
             thinkingDiv.textContent = thinking;
             contentDiv.appendChild(toggleButton);

          }
         /* --- Base Chat Layout --- */
+        .gakr-chat-layout {
             display: flex;
             flex-direction: column;
             height: 100vh;
              color: var(--bs-body-color); /* Use BS var */
         }
+        .gakr-chat-header {
             padding: 0.75rem 1.5rem;
             display: flex;
             justify-content: space-between;
             height: 64px;
         }
+        .gakr-logo-area {
             display: flex;
             align-items: center;
             gap: 0.75rem;
         }
+        .gakr-brand-logo {
             width: 24px;
             height: 24px;
             display: flex;
             justify-content: center;
         }
+        .gakr-brand-text {
             font-size: 1.25rem;
             font-weight: 500;
             color: var(--gakr-blue);
         }
+        .gakr-chat-wrapper {
             flex: 1;
             overflow: hidden;
             position: relative;
             flex-direction: column;
         }
+        .gakr-chat-container {
             flex: 1;
             overflow-y: auto;
             padding: 1rem;
             margin: 0 auto;
         }
+        .gakr-prompt-area {
             padding: 1rem;
             border-top: 1px solid var(--bs-border-color);
             width: 100%;
             /* --- END MODIFIED CSS --- */
         }
+        .gakr-message {
             display: flex;
             flex-direction: column;
             gap: 0.5rem;
             max-width: 90%;
         }
+        .gakr-message-user {
             align-self: flex-end;
         }
+        .gakr-message-ai {
             align-self: flex-start;
         }
+        .gakr-message-header {
             display: flex;
             align-items: center;
             gap: 0.5rem;
             color: var(--bs-secondary-color);
         }
+        .gakr-message-avatar {
             width: 24px;
             height: 24px;
             border-radius: 50%;
             font-size: 0.75rem;
         }
+        .gakr-message-content {
             padding: 1rem;
             border-radius: 12px;
             line-height: 1.5;
              word-break: break-word;
         }
+        .gakr-message-user .gakr-message-content {
             background-color: var(--bs-tertiary-bg);
             border-top-right-radius: 4px;
         }
+        .gakr-message-ai .gakr-message-content {
             background-color: rgba(66, 133, 244, 0.1);
             border-top-left-radius: 4px;
         }
+        .gakr-message-user .gakr-message-avatar {
             background-color: var(--bs-tertiary-bg);
         }
+        .gakr-message-ai .gakr-message-avatar {
             background-color: rgba(66, 133, 244, 0.2);
             color: var(--gakr-blue);
         }
         /* --- MODIFIED CSS FOR INPUT/TEXTAREA AND ACTIONS --- */
+        .gakr-input-container {
             position: relative; /* Keep relative */
             border-radius: 24px;
             border: 1px solid var(--bs-border-color);
         }
          /* Style when the container or its children are focused */
+        .gakr-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) */
+        .gakr-input { /* Targets the textarea with id="userInput" */
             flex: 1; /* Textarea takes available space */
             border: none;
             background: transparent;
             transition: height 0.3s ease-in-out; /* Animate height change */
         }
+        .gakr-input:focus {
              outline: none;
         }
+        .gakr-input-actions {
             display: flex;
              /* --- MODIFIED: align-items to flex-end for textarea --- */
             align-items: flex-end;
             flex-shrink: 0; /* Prevent shrinking */
         }
+         /* Reusing .gakr-action-button styles for new '+' button */
+         .gakr-action-button {
             width: 36px;
             height: 36px;
             border-radius: 50%;
             transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
         }
+        .gakr-action-button:hover {
             background-color: var(--bs-tertiary-bg); /* Use BS var */
              color: var(--bs-body-color); /* Darken icon color slightly on hover */
         }
+         .gakr-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 */
         }
+        .gakr-submit-button {
             color: var(--gakr-blue); /* Use CSS var */
         }
          /* Specific styles for submit button hover/active */
+         .gakr-submit-button:hover {
              background-color: var(--gakr-blue-light); /* Light blue background on hover */
              color: var(--gakr-blue-dark); /* Darker blue icon on hover */
          }
+         .gakr-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;
          }
+         .gakr-submit-button.disabled {
             opacity: 0.5;
             cursor: default;
             /* Ensure transitions are off when disabled to avoid weird states */
             transition: none;
         }
+        .gakr-submit-button.disabled:hover {
             background-color: transparent;
              color: var(--gakr-blue); /* Keep original color when disabled */
         }
         /* --- END MODIFIED CSS --- */
+        .gakr-typing {
             display: inline-flex;
             align-items: center;
             gap: 4px;
             align-self: flex-end;
         }
+        .gakr-typing-dot {
             width: 6px;
             height: 6px;
             border-radius: 50%;
             animation: typing 1.3s infinite ease-in-out;
         }
+        .gakr-typing-dot:nth-child(1) { animation-delay: 0s; }
+        .gakr-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .gakr-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        .gakr-thinking-toggle {
             background: none;
             border: none;
             color: var(--gakr-blue);
             text-decoration: underline;
         }
+        .gakr-thinking-content {
             display: block;
             margin-top: 0.5rem;
             padding: 0.5rem;
             font-style: italic;
         }
+        .gakr-welcome {
             text-align: center;
             max-width: 600px;
             margin: 4rem auto;
         }
+        .gakr-welcome-icon {
             font-size: 3rem;
             margin-bottom: 1.5rem;
             color: var(--gakr-blue);
         }
+        .gakr-welcome-title {
             font-size: 2rem;
             margin-bottom: 1rem;
             font-weight: 500;
         }
         /* Login button styling (from homepage) */
+        .gakr-login-button {
             color: var(--gakr-blue);
             text-decoration: none;
             background: transparent;
             transition: background-color 0.2s;
         }
+        .gakr-login-button:hover {
+            background-color: rgba(66, 133, 244, 0.1);
+        }
+        /* Profile button styling */
+        .gakr-profile-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;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .gakr-profile-button:hover {
             background-color: rgba(66, 133, 244, 0.1);
         }
         /* Login prompt modal (keep existing) */
+        .gakr-login-prompt {
             position: fixed;
             top: 0;
             left: 0;
             transition: opacity 0.3s, visibility 0.3s;
         }
+        .gakr-login-prompt.show {
             opacity: 1;
             visibility: visible;
         }
+        .gakr-login-prompt-content {
             background-color: var(--bs-body-bg);
             border-radius: 12px;
             padding: 1.5rem;
             width: 90%;
         }
+        .gakr-login-prompt-title {
             font-size: 1.25rem;
             font-weight: 500;
             margin-bottom: 1rem;
             color: var(--gakr-blue);
         }
+        .gakr-login-prompt-buttons {
             display: flex;
             flex-direction: column;
             gap: 0.75rem;
             margin-top: 1.5rem;
         }
+        .gakr-button-primary {
             background-color: var(--gakr-blue);
             color: white;
             border: none;
             transition: background-color 0.2s;
         }
+        .gakr-button-primary:hover {
             background-color: #3b78e7;
         }
+        .gakr-button-secondary {
             background-color: transparent;
             color: var(--gakr-blue);
             border: 1px solid var(--gakr-blue);
             transition: background-color 0.2s;
         }
+        .gakr-button-secondary:hover {
             background-color: rgba(66, 133, 244, 0.1);
         }
+        .gakr-button-text {
             background-color: transparent;
             color: var(--bs-body-color);
             border: none;
             transition: background-color 0.2s;
         }
+        .gakr-button-text:hover {
             background-color: var(--bs-tertiary-bg);
         }
     </style>
 </head>
 <body>
+    <div class="gakr-chat-layout">
+        <header class="gakr-chat-header">
+            <div class="gakr-logo-area">
+                <a href="/" class="gakr-brand-logo">
                     <i class="fas fa-robot" style="color: var(--gakr-blue);"></i>
                 </a>
+                <a href="/" class="gakr-brand-text" style="text-decoration: none;">GAKR AI</a>
             </div>
+            <div class="gakr-nav-controls">
+                <a href="/auth" class="gakr-login-button">Sign in / Register</a>
             </div>
         </header>
+        <div class="gakr-chat-wrapper">
+            <div class="gakr-chat-container" id="chatContainer">
+                <div class="gakr-welcome" id="welcomeMessage">
+                    <div class="gakr-welcome-icon">
                         <i class="fas fa-robot"></i>
                     </div>
+                    <h1 class="gakr-welcome-title">How can I help you today?</h1>
                     <p>I'm GAKR AI, your AI assistant. Ask me anything!</p>
                 </div>
+                <div class="gakr-message gakr-message-ai d-none" id="initialMessage">
+                    <div class="gakr-message-header">
+                        <div class="gakr-message-avatar">
                             <i class="fas fa-robot"></i>
                         </div>
                         <span>GAKR AI</span>
                     </div>
+                    <div class="gakr-message-content">Hello! I'm GAKR AI How can I help you today?
                     </div>
                 </div>
+                <div class="gakr-typing d-none" id="typingIndicator">
+                    <div class="gakr-typing-dot"></div>
+                    <div class="gakr-typing-dot"></div>
+                    <div class="gakr-typing-dot"></div>
                 </div>
             </div>
+            <div class="gakr-prompt-area">
+                <div class="gakr-input-container" id="inputContainer">
+                    <div class="gakr-action-button" id="addButton">
                         <i class="fas fa-plus"></i>
                     </div>
                     <div class="attached-file-preview-container" id="attachedFilePreviewContainer">
                     </div>
+                    <textarea class="gakr-input" id="userInput" placeholder="Message GAKR AI..." rows="1"></textarea>
+                    <div class="gakr-input-actions">
+                        <div class="gakr-action-button">
                             <i class="fas fa-microphone"></i>
                         </div>
+                        <div class="gakr-action-button gakr-submit-button disabled" id="submitButton">
                             <i class="fas fa-arrow-right"></i>
                         </div>
                     </div>
                  </div>
         </div>
+        <div class="gakr-login-prompt" id="loginPrompt">
+            <div class="gakr-login-prompt-content">
+                <div class="gakr-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="gakr-login-prompt-buttons">
+                    <a href="login.html" class="gakr-button-primary">Sign in / Register</a>
+                    <a href="/login?signup=true" class="gakr-button-secondary">Create account</a>
+                    <button type="button" class="gakr-button-text" id="continueGuest">Continue as guest</button>
                 </div>
             </div>
         </div>
     let messageCount = 0;
     let attachedFiles = [];
+    // Simple login flag (set in auth flow: localStorage.setItem("isLoggedIn","true"))
+    const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";
+    // Update header based on login status
+    updateHeader();
+    function updateHeader() {
+        const navControls = document.querySelector('.gakr-nav-controls');
+        if (isLoggedIn) {
+            navControls.innerHTML = '<a href="/profile" class="gakr-profile-button"><i class="fas fa-user"></i> Profile</a>';
+        } else {
+            navControls.innerHTML = '<a href="/auth" class="gakr-login-button">Sign in / Register</a>';
+        }
+    }
     // --- Textarea Auto-Grow & Scroll Logic (original, kept) ---
     const style = getComputedStyle(userInput);
     const initialInputContainerPaddingTop = parseFloat(getComputedStyle(inputContainer).paddingTop);
     const initialInputContainerPaddingBottom = parseFloat(getComputedStyle(inputContainer).paddingBottom);
+    const initialActionButtonsHeight = document.querySelector('.gakr-input-actions').offsetHeight;
     function autoGrowTextarea() {
         if (!userInput) {
         }
     });
+    // Handle microphone button click
+    const microphoneButton = document.querySelector('.gakr-input-actions .gakr-action-button:first-child');
+    if (microphoneButton) {
+        microphoneButton.addEventListener('click', function() {
+            alert('Voice input feature is currently in development.');
+        });
+    }
     // Existing “continue as guest” modal
     continueGuest.addEventListener('click', function() {
         loginPrompt.classList.remove('show');
         });
         loginBtn.addEventListener('click', function () {
+            window.location.href = '/auth';
         });
         buttonRow.appendChild(skipBtn);
         scrollToBottom();
         const formData = new FormData();
         formData.append('prompt', text);
         if (filesSnapshot.length > 0) {
     function addMessage(text, type, streaming = false) {
         const messageDiv = document.createElement('div');
+        messageDiv.className = `gakr-message gakr-message-${type}`;
         const headerDiv = document.createElement('div');
+        headerDiv.className = 'gakr-message-header';
         const avatarDiv = document.createElement('div');
+        avatarDiv.className = 'gakr-message-avatar';
         const avatarIcon = document.createElement('i');
         avatarIcon.className = type === 'user' ? 'fas fa-user' : 'fas fa-robot';
         nameSpan.textContent = type === 'user' ? 'You' : 'GAKR AI';
         const contentDiv = document.createElement('div');
+        contentDiv.className = 'gakr-message-content';
         if (!streaming) {
             if (type === 'ai') {
                 updateAIMessage(contentDiv, text);
             // Create toggle button
             const toggleButton = document.createElement('button');
+            toggleButton.className = 'gakr-thinking-toggle';
             toggleButton.textContent = 'hide thinking';
             toggleButton.onclick = function() {
                 const thinkingDiv = this.nextElementSibling;
             // Create thinking content div
             const thinkingDiv = document.createElement('div');
+            thinkingDiv.className = 'gakr-thinking-content';
             thinkingDiv.textContent = thinking;
             contentDiv.appendChild(toggleButton);

profile.html ADDED Viewed

	@@ -0,0 +1,2090 @@

+<!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 - Profile</title>
+    <script>
+        // Immediate check for login status
+        if (localStorage.getItem('isLoggedIn') !== 'true') {
+            window.location.href = '/auth';
+        }
+    </script>
+    <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">
+    <style>
+        /*
+        ========================================
+        Base & Layout Styles
+        ========================================
+        */
+        :root {
+            --gakr-blue: #007bff; /* A vibrant blue for accents */
+            --gakr-blue-dark: #0056b3; /* Darker shade for hover/active states */
+            --gakr-blue-light: #e0f0ff; /* Lighter shade for selected states */
+            --gakr-blue-rgb: 0, 123, 255; /* RGB for translucent backgrounds */
+            /* Dark theme specifics (from replit's bootstrap-agent-dark-theme.min.css for consistency) */
+            --bs-body-bg: #1a1a1a; /* Dark background */
+            --bs-body-color: #f0f0f0; /* Light text */
+            --bs-primary: var(--gakr-blue);
+            --bs-secondary: #6c757d;
+            --bs-secondary-bg: #2a2a2a; /* Slightly lighter dark background */
+            --bs-tertiary-bg: #3a3a3a; /* Even lighter dark background for elements */
+            --bs-border-color: #4a4a4a; /* Border color */
+            --bs-link-color: var(--gakr-blue);
+            --bs-link-hover-color: var(--gakr-blue-dark);
+            --bs-heading-color: #f8f9fa; /* Lighter headings */
+            --bs-tertiary-color: #adb5bd; /* For less prominent text */
+            --bs-success: #28a745;
+            --bs-info: #17a2b8;
+            --bs-warning: #ffc107;
+            --bs-danger: #dc3545;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bs-body-bg);
+            color: var(--bs-body-color);
+            margin: 0;
+            padding-top: 64px;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        .gakr-layout {
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+            width: 100%;
+            max-width: 1200px; /* Max width for content */
+            margin: 0 auto; /* Center the layout */
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Subtle shadow */
+            background-color: var(--bs-body-bg); /* Ensure content area matches body bg */
+        }
+        /*
+        ========================================
+        Header Styles
+        ========================================
+        */
+        .gakr-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;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+            background-color: var(--bs-body-bg);
+            z-index: 10;
+        }
+        .gakr-logo-area {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        .gakr-brand-logo {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .gakr-brand-text {
+            font-size: 1.25rem;
+            font-weight: 500;
+            color: var(--gakr-blue);
+        }
+        .gakr-nav-controls {
+            display: flex;
+            align-items: center;
+        }
+        .gakr-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;
+        }
+        .gakr-login-button:hover {
+            background-color: rgba(66, 133, 244, 0.1);
+        }
+        .gakr-profile-button {
+            color: var(--gakr-blue);
+            text-decoration: none;
+            background: transparent;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            transition: background-color 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .gakr-profile-button:hover {
+            background-color: rgba(66, 133, 244, 0.1);
+        }
+        /*
+        ========================================
+        Profile Button & Dropdown
+        ========================================
+        */
+        .profile-nav-controls {
+            position: relative;
+            z-index: 1001; /* Ensure dropdown is above other content */
+        }
+        .profile-button {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: var(--gakr-blue);
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
+        .profile-button:hover {
+            background-color: var(--gakr-blue-dark);
+        }
+        .profile-dropdown-menu {
+            position: absolute;
+            top: calc(100% + 10px);
+            right: 0;
+            background-color: var(--bs-tertiary-bg);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 8px;
+            min-width: 180px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-10px);
+            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+            padding: 0.5rem 0;
+            z-index: 100;
+        }
+        .profile-dropdown-menu.show {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+        .profile-dropdown-item {
+            display: block;
+            padding: 0.8rem 1.2rem;
+            color: var(--bs-body-color);
+            text-decoration: none;
+            font-size: 0.95rem;
+            transition: background-color 0.2s ease, color 0.2s ease;
+        }
+        .profile-dropdown-item:hover {
+            background-color: var(--bs-secondary-bg);
+            color: var(--gakr-blue);
+        }
+        /*
+        ========================================
+        Profile View Specific Styles
+        ========================================
+        */
+        .profile-view {
+            flex-grow: 1;
+            padding: 2rem;
+            background-color: var(--bs-body-bg); /* Main content background */
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+        .profile-header-section {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1.5rem;
+            border-bottom: 1px solid var(--bs-border-color);
+        }
+        .profile-avatar-large {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            background-color: var(--gakr-blue);
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 4rem;
+            font-weight: bold;
+            margin-bottom: 1rem;
+            border: 4px solid var(--bs-tertiary-bg);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            position: relative; /* For the edit icon */
+            overflow: hidden; /* To clip avatar images */
+        }
+        .profile-avatar-large img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 50%;
+        }
+        .profile-avatar-edit-icon {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+            background-color: var(--bs-tertiary-bg);
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            transition: background-color 0.2s ease;
+            color: var(--bs-body-color);
+        }
+        .profile-avatar-edit-icon:hover {
+            background-color: var(--bs-secondary-bg);
+            color: var(--gakr-blue);
+        }
+        .profile-username-container {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .profile-username {
+            font-size: 2.2rem;
+            font-weight: 700;
+            color: var(--bs-heading-color);
+            margin: 0;
+            line-height: 1;
+        }
+        .username-edit-icon, .section-edit-icon {
+            color: var(--bs-secondary-color);
+            cursor: pointer;
+            font-size: 1.1rem;
+            transition: color 0.2s ease;
+        }
+        .username-edit-icon:hover, .section-edit-icon:hover {
+            color: var(--gakr-blue);
+        }
+        .username-input-container {
+            display: none; /* Hidden by default, toggled by JS */
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+            width: 100%;
+            max-width: 300px;
+        }
+        .username-edit-input {
+            flex-grow: 1;
+            padding: 0.6rem 0.8rem;
+            border-radius: 8px;
+            border: 1px solid var(--bs-border-color);
+            background-color: var(--bs-secondary-bg);
+            color: var(--bs-body-color);
+            font-size: 1.1rem;
+            outline: none;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        .username-edit-input::placeholder {
+            color: var(--bs-tertiary-color);
+        }
+        .username-edit-input:focus {
+            border-color: var(--gakr-blue);
+            box-shadow: 0 0 0 0.25rem rgba(var(--gakr-blue-rgb), 0.25);
+        }
+        .username-save-button {
+            padding: 0.6rem 1.2rem;
+            border-radius: 8px;
+            background-color: var(--gakr-blue);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.2s ease;
+        }
+        .username-save-button:hover {
+            background-color: var(--gakr-blue-dark);
+        }
+        .profile-email {
+            font-size: 1.1rem;
+            color: var(--bs-secondary-color);
+            margin: 0;
+        }
+        .profile-section {
+            background-color: var(--bs-secondary-bg);
+            border-radius: 12px;
+            padding: 1.5rem 2rem;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .profile-section-title {
+            font-size: 1.6rem;
+            color: var(--bs-heading-color);
+            margin-top: 0;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--bs-border-color);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+        .profile-info-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 0;
+            border-bottom: 1px dashed var(--bs-border-color);
+        }
+        .profile-info-item:last-child {
+            border-bottom: none;
+        }
+        .profile-info-label {
+            font-weight: 500;
+            color: var(--bs-tertiary-color);
+            flex-basis: 30%; /* Adjust as needed */
+        }
+        .profile-info-value {
+            color: var(--bs-body-color);
+            text-align: right;
+            flex-basis: 70%; /* Adjust as needed */
+        }
+        /* About Me specific styles */
+        .profile-about-me-display {
+            color: var(--bs-body-color);
+            line-height: 1.6;
+            margin-bottom: 1rem;
+            background-color: var(--bs-body-bg);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 8px;
+            padding: 1rem;
+            min-height: 80px;
+            overflow-y: auto;
+        }
+        .profile-about-me-display.placeholder {
+            color: var(--bs-tertiary-color);
+            font-style: italic;
+        }
+        .about-me-edit-icon {
+            margin-left: auto; /* Push icon to the right if title is flex */
+        }
+        .about-me-input-container {
+            display: none; /* Hidden by default */
+            flex-direction: column; /* Stack textarea and button */
+            gap: 0.75rem;
+        }
+        .about-me-edit-textarea {
+            width: 100%;
+            padding: 0.8rem;
+            border-radius: 8px;
+            border: 1px solid var(--bs-border-color);
+            background-color: var(--bs-body-bg);
+            color: var(--bs-body-color);
+            font-size: 1rem;
+            min-height: 120px;
+            resize: vertical;
+            outline: none;
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        .about-me-edit-textarea::placeholder {
+            color: var(--bs-tertiary-color);
+        }
+        .about-me-edit-textarea:focus {
+            border-color: var(--gakr-blue);
+            box-shadow: 0 0 0 0.25rem rgba(var(--gakr-blue-rgb), 0.25);
+        }
+        .about-me-save-button {
+            align-self: flex-end; /* Align to the right */
+            padding: 0.7rem 1.5rem;
+            border-radius: 8px;
+            background-color: var(--gakr-blue);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.2s ease;
+        }
+        .about-me-save-button:hover {
+            background-color: var(--gakr-blue-dark);
+        }
+        /* Chat History Styles */
+        .profile-chat-history {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .chat-history-item {
+            background-color: var(--bs-body-bg);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 12px;
+            padding: 1rem 1.2rem;
+            cursor: pointer;
+            transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+            position: relative; /* For context menu positioning */
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .chat-history-item:hover {
+            background-color: var(--bs-secondary-bg);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+        .chat-history-item .chat-title-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .chat-history-item .chat-title {
+            font-size: 1.15rem;
+            font-weight: 600;
+            color: var(--bs-heading-color);
+            flex-grow: 1; /* Allows title to take available space */
+        }
+        .chat-history-item .chat-meta {
+            font-size: 0.85rem;
+            color: var(--bs-secondary-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+        }
+        .empty-chat-history {
+            text-align: center;
+            color: var(--bs-tertiary-color);
+            font-style: italic;
+            padding: 2rem;
+        }
+        /* Profile Buttons Area */
+        .profile-buttons-area {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            margin-top: 2rem;
+            padding-top: 2rem;
+            border-top: 1px solid var(--bs-border-color);
+        }
+        .gakr-button-primary, .gakr-button-secondary {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.8rem 1.5rem;
+            border-radius: 10px;
+            font-size: 1rem;
+            font-weight: 500;
+            text-decoration: none;
+            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+            width: 100%;
+            max-width: 300px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        .gakr-button-primary {
+            background-color: var(--gakr-blue);
+            color: white;
+            border: 1px solid var(--gakr-blue);
+        }
+        .gakr-button-primary:hover {
+            background-color: var(--gakr-blue-dark);
+            border-color: var(--gakr-blue-dark);
+            color: white;
+        }
+        .gakr-button-secondary {
+            background-color: transparent;
+            color: var(--gakr-blue);
+            border: 1px solid var(--gakr-blue);
+        }
+        .gakr-button-secondary:hover {
+            background-color: var(--gakr-blue-light);
+            color: var(--gakr-blue-dark);
+            border-color: var(--gakr-blue-dark);
+        }
+        .me-2 { /* Margin End (right) */
+            margin-right: 0.5rem;
+        }
+        /*
+        ========================================
+        Footer Styles
+        ========================================
+        */
+        .gakr-footer {
+            padding: 1rem 1.5rem;
+            background-color: var(--bs-tertiary-bg);
+            border-top: 1px solid var(--bs-border-color);
+            text-align: center;
+            font-size: 0.9rem;
+            color: var(--bs-secondary-color);
+            margin-top: auto; /* Push footer to the bottom */
+        }
+        /*
+        ========================================
+        Toast Notification Styles
+        ========================================
+        */
+        .toast-container {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 2000; /* Above all other content */
+        }
+        .gakr-toast {
+            background-color: var(--bs-tertiary-bg);
+            color: var(--bs-body-color);
+            padding: 12px 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            min-width: 250px;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+            border: 1px solid var(--bs-border-color);
+        }
+        .gakr-toast.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .gakr-toast.hide {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        .gakr-toast .toast-icon {
+            font-size: 1.2rem;
+        }
+        .gakr-toast.success {
+            border-left: 5px solid var(--bs-success);
+        }
+        .gakr-toast.success .toast-icon {
+            color: var(--bs-success);
+        }
+        .gakr-toast.error {
+            border-left: 5px solid var(--bs-danger);
+        }
+        .gakr-toast.error .toast-icon {
+            color: var(--bs-danger);
+        }
+        .gakr-toast.warning {
+            border-left: 5px solid var(--bs-warning);
+        }
+        .gakr-toast.warning .toast-icon {
+            color: var(--bs-warning);
+        }
+        .gakr-toast.info {
+            border-left: 5px solid var(--bs-info);
+        }
+        .gakr-toast.info .toast-icon {
+            color: var(--bs-info);
+        }
+        /*
+        ========================================
+        Custom Modal Styles (Confirm/Prompt)
+        ========================================
+        */
+        .gakr-modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark overlay */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1500;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+        .gakr-modal-overlay.show {
+            opacity: 1;
+            visibility: visible;
+        }
+        .gakr-modal-content {
+            background-color: var(--bs-body-bg);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+            padding: 2rem;
+            width: 90%;
+            max-width: 450px;
+            text-align: center;
+            transform: translateY(-20px) scale(0.95);
+            opacity: 0;
+            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+        }
+        .gakr-modal-overlay.show .gakr-modal-content {
+            transform: translateY(0) scale(1);
+            opacity: 1;
+        }
+        .gakr-modal-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--bs-heading-color);
+        }
+        .gakr-modal-message {
+            font-size: 1rem;
+            color: var(--bs-body-color);
+            margin-bottom: 1.5rem;
+            line-height: 1.5;
+        }
+        .gakr-modal-input {
+            width: calc(100% - 20px); /* Account for padding */
+            padding: 0.8rem 10px;
+            margin-bottom: 1.5rem;
+            border: 1px solid var(--bs-border-color);
+            border-radius: 8px;
+            background-color: var(--bs-secondary-bg);
+            color: var(--bs-body-color);
+            font-size: 1rem;
+            outline: none;
+        }
+        .gakr-modal-input:focus {
+            border-color: var(--gakr-blue);
+            box-shadow: 0 0 0 0.2rem rgba(var(--gakr-blue-rgb), 0.25);
+        }
+        .gakr-modal-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+        }
+        .gakr-modal-buttons button {
+            padding: 0.7rem 1.5rem;
+            border-radius: 8px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+        }
+        .confirm-ok, .prompt-submit {
+            background-color: var(--gakr-blue);
+            color: white;
+            border: none;
+        }
+        .confirm-ok:hover, .prompt-submit:hover {
+            background-color: var(--gakr-blue-dark);
+        }
+        .confirm-cancel, .prompt-cancel {
+            background-color: transparent;
+            color: var(--gakr-blue);
+            border: 1px solid var(--gakr-blue);
+        }
+        .confirm-cancel:hover, .prompt-cancel:hover {
+            background-color: var(--gakr-blue-light);
+            color: var(--gakr-blue-dark);
+            border-color: var(--gakr-blue-dark);
+        }
+        /*
+        ========================================
+        Advanced Features Styles (New)
+        ========================================
+        */
+        .chat-history-item.pinned {
+            background-color: var(--bs-secondary-bg);
+            border-left: 5px solid var(--gakr-blue);
+            padding-left: calc(1rem - 5px); /* Adjust padding due to border */
+        }
+        .pinned-icon {
+            color: var(--gakr-blue);
+            font-size: 0.9em;
+            margin-left: 0.5rem;
+            vertical-align: middle;
+        }
+        .chat-history-item .chat-tags {
+            font-size: 0.8rem;
+            color: var(--bs-secondary-color);
+            margin-top: 0.5rem;
+        }
+        .chat-history-item .chat-tags span {
+            background-color: rgba(var(--gakr-blue-rgb), 0.1);
+            color: var(--gakr-blue);
+            padding: 0.2rem 0.6rem;
+            border-radius: 12px; /* Pill shape */
+            margin-right: 0.4rem;
+            display: inline-block;
+            margin-bottom: 0.4rem; /* For multiple lines of tags */
+            white-space: nowrap; /* Prevent tags from breaking */
+        }
+        .chat-history-item .chat-tags span:last-child {
+            margin-right: 0;
+        }
+        .chat-history-search-container {
+            position: relative;
+            margin-bottom: 1rem;
+            width: 100%;
+            max-width: 400px; /* Limit search input width */
+            align-self: center; /* Center if flex container */
+        }
+        .chat-history-search-input {
+            width: 100%;
+            padding: 0.6rem 2.5rem 0.6rem 1rem; /* Adjust padding for icon */
+            border-radius: 8px;
+            border: 1px solid var(--bs-border-color);
+            background-color: var(--bs-body-bg);
+            color: var(--bs-body-color);
+            font-size: 0.95rem;
+            outline: none;
+        }
+        .chat-history-search-input:focus {
+            border-color: var(--gakr-blue);
+            box-shadow: 0 0 0 0.25rem rgba(var(--gakr-blue-rgb), 0.25);
+        }
+        .chat-history-search-icon {
+            position: absolute;
+            right: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--bs-secondary-color);
+            pointer-events: none; /* Make icon not interfere with input clicks */
+        }
+        .chat-history-sort-container {
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: flex-end; /* Align to the right */
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.9rem;
+            color: var(--bs-secondary-color);
+        }
+        .chat-history-sort-select {
+            background-color: var(--bs-tertiary-bg);
+            color: var(--bs-body-color);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 8px;
+            padding: 0.3rem 0.6rem;
+            font-size: 0.9rem;
+            cursor: pointer;
+            outline: none;
+            -webkit-appearance: none; /* Remove default arrow */
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0f0f0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Csvg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.5rem center;
+            background-size: 1em;
+        }
+        .chat-history-sort-select:focus {
+            border-color: var(--gakr-blue);
+            box-shadow: 0 0 0 0.25rem rgba(var(--gakr-blue-rgb), 0.25);
+        }
+        .chat-history-last-active {
+            font-size: 0.75rem;
+            color: var(--bs-tertiary-color);
+            margin-left: auto; /* Push to the right */
+        }
+        /* Chat Context Menu */
+        .chat-context-menu {
+            position: fixed; /* Fixed position relative to viewport */
+            background-color: var(--bs-tertiary-bg);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            min-width: 150px;
+            padding: 0.5rem 0;
+            z-index: 1002; /* Above profile dropdown */
+            opacity: 0;
+            visibility: hidden;
+            transform: scale(0.95);
+            transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
+        }
+        .chat-context-menu.show {
+            opacity: 1;
+            visibility: visible;
+            transform: scale(1);
+        }
+        .chat-context-menu-item {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            padding: 0.8rem 1.2rem;
+            color: var(--bs-body-color);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: background-color 0.2s ease, color 0.2s ease;
+        }
+        .chat-context-menu-item:hover {
+            background-color: var(--bs-secondary-bg);
+            color: var(--gakr-blue);
+        }
+        .chat-context-menu-item i {
+            width: 1.2rem; /* Align icons */
+            text-align: center;
+        }
+        /* Tag Selection Modal */
+        .tag-selection-modal-content {
+            background-color: var(--bs-body-bg);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+            padding: 1.5rem;
+            width: 90%;
+            max-width: 500px;
+            text-align: left;
+            transform: translateY(-20px) scale(0.95);
+            opacity: 0;
+            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+        }
+        .gakr-modal-overlay.show .tag-selection-modal-content {
+            transform: translateY(0) scale(1);
+            opacity: 1;
+        }
+        .tag-selection-modal-title {
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--bs-heading-color);
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--bs-border-color);
+        }
+        .tag-options-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid */
+            gap: 0.75rem;
+            margin-bottom: 1.5rem;
+        }
+        .tag-option {
+            background-color: var(--bs-secondary-bg);
+            color: var(--bs-body-color);
+            border: 1px solid var(--bs-border-color);
+            border-radius: 8px;
+            padding: 0.5rem 0.8rem;
+            cursor: pointer;
+            text-align: center;
+            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+            font-size: 0.9rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .tag-option:hover {
+            background-color: var(--bs-tertiary-bg);
+            border-color: var(--gakr-blue);
+        }
+        .tag-option.selected {
+            background-color: var(--gakr-blue);
+            color: white;
+            border-color: var(--gakr-blue-dark);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        }
+        .tag-option.selected:hover {
+             background-color: var(--gakr-blue-dark);
+             border-color: var(--gakr-blue-dark);
+        }
+        .tag-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 1rem;
+            padding-top: 1rem;
+            border-top: 1px solid var(--bs-border-color);
+        }
+        .tag-actions button {
+            padding: 0.6rem 1rem;
+            border-radius: 8px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+        }
+        .tag-actions .confirm-ok {
+            background-color: var(--gakr-blue);
+            color: white;
+            border: none;
+        }
+        .tag-actions .confirm-ok:hover {
+            background-color: var(--gakr-blue-dark);
+        }
+        .tag-actions .confirm-cancel {
+            background-color: transparent;
+            color: var(--gakr-blue);
+            border: 1px solid var(--gakr-blue);
+        }
+        .tag-actions .confirm-cancel:hover {
+            background-color: var(--gakr-blue-light);
+            color: var(--gakr-blue-dark);
+            border-color: var(--gakr-blue-dark);
+        }
+        /*
+        ========================================
+        Responsive Adjustments (Optional but Recommended)
+        ========================================
+        */
+        @media (max-width: 768px) {
+            .gakr-header {
+                padding: 0.8rem 1rem;
+            }
+            .profile-view {
+                padding: 1rem;
+                gap: 1.5rem;
+            }
+            .profile-header-section {
+                margin-bottom: 1.5rem;
+            }
+            .profile-username {
+                font-size: 1.8rem;
+            }
+            .profile-email {
+                font-size: 1rem;
+            }
+            .profile-section {
+                padding: 1rem 1.2rem;
+            }
+            .profile-section-title {
+                font-size: 1.4rem;
+            }
+            .profile-info-item {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.2rem;
+            }
+            .profile-info-label {
+                flex-basis: auto;
+                font-size: 0.9rem;
+            }
+            .profile-info-value {
+                flex-basis: auto;
+                text-align: left;
+                font-size: 0.95rem;
+            }
+            .profile-buttons-area {
+                margin-top: 1.5rem;
+                padding-top: 1.5rem;
+            }
+            .gakr-button-primary, .gakr-button-secondary {
+                max-width: none; /* Full width on small screens */
+            }
+            .chat-history-sort-container {
+                justify-content: flex-start; /* Align left on small screens */
+            }
+            .tag-options-grid {
+                grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+                gap: 0.5rem;
+            }
+            .tag-option {
+                padding: 0.4rem 0.6rem;
+                font-size: 0.8rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .gakr-brand-text {
+                font-size: 1.3rem;
+            }
+            .profile-avatar-large {
+                width: 90px;
+                height: 90px;
+                font-size: 3rem;
+            }
+            .profile-username {
+                font-size: 1.5rem;
+            }
+            .username-edit-input, .username-save-button {
+                font-size: 0.9rem;
+                padding: 0.5rem 0.8rem;
+            }
+            .about-me-edit-textarea, .about-me-save-button {
+                font-size: 0.9rem;
+                padding: 0.6rem 1rem;
+            }
+            .chat-history-item {
+                padding: 0.8rem 1rem;
+            }
+            .chat-history-item .chat-title {
+                font-size: 1rem;
+            }
+            .chat-history-item .chat-meta {
+                font-size: 0.75rem;
+            }
+            .chat-history-sort-select {
+                font-size: 0.85rem;
+                padding: 0.2rem 0.5rem;
+            }
+            .gakr-modal-content {
+                padding: 1.5rem;
+            }
+            .gakr-modal-title {
+                font-size: 1.3rem;
+            }
+            .gakr-modal-message {
+                font-size: 0.9rem;
+            }
+            .gakr-modal-buttons button {
+                padding: 0.5rem 1rem;
+                font-size: 0.9rem;
+            }
+        }
+    </style>
+</head>
+<body class="on-profile-page">
+    <div class="gakr-layout">
+        <header class="gakr-chat-header">
+            <div class="gakr-logo-area">
+                <a href="/" class="gakr-brand-logo">
+                    <i class="fas fa-robot" style="color: var(--gakr-blue);"></i>
+                </a>
+                <a href="/" class="gakr-brand-text" style="text-decoration: none;">GAKR AI</a>
+            </div>
+            <div class="gakr-nav-controls" id="authButtonContainer">
+                <a href="/auth" class="gakr-login-button">Sign in / Register</a>
+            </div>
+        </header>
+        <div class="profile-view" id="profileView">
+            <div class="profile-header-section">
+                <div class="profile-avatar-large" id="profileAvatarLarge">
+                    U
+                    <label for="avatarUpload" class="profile-avatar-edit-icon" title="Change Avatar">
+                        <i class="fas fa-camera"></i>
+                        <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
+                    </label>
+                </div>
+                <div class="profile-username-container">
+                    <h1 class="profile-username" id="profileUsernameDisplay">User Name</h1>
+                    <i class="fas fa-pencil-alt username-edit-icon" id="editUsernameIcon" title="Edit Username"></i>
+                </div>
+                <div class="username-input-container" id="usernameInputContainer">
+                    <input type="text" id="usernameEditInput" class="username-edit-input" placeholder="Enter new username">
+                    <button id="usernameSaveButton" class="username-save-button">Save</button>
+                </div>
+                <p class="profile-email" id="profileEmailDisplay">user.email@example.com</p>
+            </div>
+            <div class="profile-section">
+                <h2 class="profile-section-title">Account Information</h2>
+                <div class="profile-info-item">
+                    <span class="profile-info-label">Name:</span>
+                    <span class="profile-info-value" id="accountName">User Name</span>
+                </div>
+                <div class="profile-info-item">
+                    <span class="profile-info-label">Email:</span>
+                    <span class="profile-info-value" id="accountEmail">user.email@example.com</span>
+                </div>
+            </div>
+            <div class="profile-section">
+                <h2 class="profile-section-title">
+                    About Me
+                    <i class="fas fa-pencil-alt section-edit-icon about-me-edit-icon" id="editAboutMeIcon" title="Edit About Me"></i>
+                </h2>
+                <div class="profile-about-me-display" id="profileAboutMeDisplay">Tell us something about yourself...</div>
+                <div class="about-me-input-container" id="aboutMeInputContainer">
+                    <textarea id="aboutMeEditInput" class="about-me-edit-textarea" placeholder="Write a short bio..."></textarea>
+                    <button id="aboutMeSaveButton" class="about-me-save-button">Save</button>
+                </div>
+            </div>
+            <div class="profile-section">
+                <h2 class="profile-section-title">Recent Conversations</h2>
+                <div class="chat-history-search-container">
+                    <input type="text" id="chatHistorySearchInput" class="chat-history-search-input" placeholder="Search conversations...">
+                    <i class="fas fa-search chat-history-search-icon"></i>
+                </div>
+                <div class="profile-chat-history" id="chatHistoryList">
+                    <p class="empty-chat-history" id="emptyChatHistoryMessage" style="display: none;">No conversations yet. Start chatting with GAKR AI!</p>
+                    </div>
+            </div>
+            <div class="profile-buttons-area">
+                <a href="/chat" class="gakr-button-primary" id="startChattingButton">
+                    <i class="fas fa-comments me-2"></i> Start Chatting with GAKR AI
+                </a>
+                <button
+    type="button"
+    class="gakr-button-primary"
+    id="profileSettingsButton">
+    <i class="fas fa-cog me-2"></i> Settings
+</button>
+                <a href="#" class="gakr-button-secondary" id="profileLogoutButton" onclick="logoutFunction()">
+                    <i class="fas fa-sign-out-alt me-2"></i> Log out
+                </a>
+            </div>
+        </div>
+        <footer class="gakr-footer">
+            <div>GAKR AI - Powered by Advanced Local AI</div>
+        </footer>
+        <div id="chatContextMenu" class="chat-context-menu">
+            <a href="#" class="chat-context-menu-item" data-action="delete"><i class="fas fa-trash-alt"></i> Delete</a>
+            <a href="#" class="chat-context-menu-item" data-action="share"><i class="fas fa-share-alt"></i> Share</a>
+            <a href="#" class="chat-context-menu-item pin-unpin" data-action="pin"><i class="fas fa-thumbtack"></i> Pin</a>
+            <a href="#" class="chat-context-menu-item" data-action="tag"><i class="fas fa-tag"></i> Add Tag</a>
+        </div>
+    </div>
+    <div class="toast-container" id="toastContainer"></div>
+    <div class="gakr-modal-overlay" id="confirmModal">
+        <div class="gakr-modal-content">
+            <h3 class="gakr-modal-title" id="confirmTitle">Confirm Action</h3>
+            <p class="gakr-modal-message" id="confirmMessage">Are you sure you want to proceed?</p>
+            <div class="gakr-modal-buttons">
+                <button class="confirm-cancel" id="confirmCancelButton">Cancel</button>
+                <button class="confirm-ok" id="confirmOkButton">Confirm</button>
+            </div>
+        </div>
+    </div>
+    <div class="gakr-modal-overlay" id="promptModal">
+        <div class="gakr-modal-content">
+            <h3 class="gakr-modal-title" id="promptTitle">Enter Information</h3>
+            <p class="gakr-modal-message" id="promptMessage">Please provide the required input:</p>
+            <input type="text" class="gakr-modal-input" id="promptInput" placeholder="Enter text here...">
+            <div class="gakr-modal-buttons">
+                <button class="prompt-cancel" id="promptCancelButton">Cancel</button>
+                <button class="prompt-submit" id="promptSubmitButton">Submit</button>
+            </div>
+        </div>
+    </div>
+    <div class="gakr-modal-overlay" id="tagModal">
+        <div class="tag-selection-modal-content">
+            <h3 class="tag-selection-modal-title" id="tagModalTitle">Add Tag to Conversation</h3>
+            <div class="tag-options-grid" id="tagOptions">
+                </div>
+            <div class="tag-actions">
+                <button class="confirm-cancel" id="tagCancelButton">Cancel</button>
+                <button class="confirm-ok" id="tagSaveButton">Save</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Global modal elements
+        let confirmModal, confirmTitle, confirmMessage, confirmOkButton, confirmCancelButton;
+        // Logout function - defined globally for onclick
+        async function logoutFunction() {
+            const confirmed = await showConfirmDialog('Are you sure you want to log out?', 'Logout Confirmation');
+            if (confirmed) {
+                localStorage.removeItem('isLoggedIn');
+                sessionStorage.clear(); // Clear all session data
+                window.location.href = '/'; // Redirect to home/login immediately
+            }
+        }
+        // Custom Confirm Dialog Function (Global)
+        function showConfirmDialog(message, title = 'Confirm Action') {
+            return new Promise((resolve) => {
+                if (!confirmModal) {
+                    // Fallback if modal not loaded yet
+                    const confirmed = window.confirm(message);
+                    resolve(confirmed);
+                    return;
+                }
+                confirmTitle.textContent = title;
+                confirmMessage.textContent = message;
+                confirmModal.classList.add('show');
+                // Store the element that triggered the modal for focus management
+                const triggeringElement = document.activeElement;
+                const handleOk = () => {
+                    confirmModal.classList.remove('show');
+                    confirmOkButton.removeEventListener('click', handleOk);
+                    confirmCancelButton.removeEventListener('click', handleCancel);
+                    if (triggeringElement) triggeringElement.focus(); // Return focus
+                    resolve(true);
+                };
+                const handleCancel = () => {
+                    confirmModal.classList.remove('show');
+                    confirmOkButton.removeEventListener('click', handleOk);
+                    confirmCancelButton.removeEventListener('click', handleCancel);
+                    if (triggeringElement) triggeringElement.focus(); // Return focus
+                    resolve(false);
+                };
+                confirmOkButton.addEventListener('click', handleOk);
+                confirmCancelButton.addEventListener('click', handleCancel);
+                // Close on overlay click (but prevent immediate closing if clicking content)
+                confirmModal.addEventListener('click', function(event) {
+                    if (event.target === confirmModal) { // Only close if click is directly on the overlay
+                        handleCancel();
+                    }
+                }, { once: true }); // Ensure it only runs once per dialog instance
+            });
+        }
+        document.addEventListener('DOMContentLoaded', function() {
+            // --- Authentication Status Check ---
+            function updateAuthButton() {
+                const authButtonContainer = document.getElementById('authButtonContainer');
+                const userIsLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+                if (userIsLoggedIn) {
+                    authButtonContainer.innerHTML = `
+                        <a href="/profile" class="gakr-profile-button">
+                            <i class="fas fa-user-circle me-2"></i>Profile
+                        </a>
+                    `;
+                     const profileButton = authButtonContainer.querySelector('.gakr-profile-button');
+                     if (profileButton) {
+                         profileButton.addEventListener('click', function(event) {
+                             console.log("Profile button clicked!");
+                         });
+                     }
+                } else {
+                    authButtonContainer.innerHTML = `
+                        <a href="/auth" class="gakr-login-button">Sign in / Register</a>
+                    `;
+                }
+            }
+            updateAuthButton();
+            window.addEventListener('focus', updateAuthButton);
+            window.addEventListener('storage', updateAuthButton);
+            // Check if user is logged in
+            if (localStorage.getItem('isLoggedIn') !== 'true') {
+                window.location.href = '/auth';
+                return;
+            }
+            // --- DOM Element References ---
+            const profileButton = document.getElementById('profileButton');
+            const profileDropdown = document.getElementById('profileDropdown');
+            const logoutButton = document.getElementById('logoutButton');
+            const brandLogoArea = document.getElementById('brandLogoArea');
+            const signInRegisterButton = document.getElementById('signInRegisterButton');
+            const profileControls = document.getElementById('profileControls');
+            // Profile-specific elements
+            const profileAvatarLarge = document.getElementById('profileAvatarLarge');
+            const profileUsernameDisplay = document.getElementById('profileUsernameDisplay');
+            const profileEmailDisplay = document.getElementById('profileEmailDisplay');
+            const accountName = document.getElementById('accountName');
+            const accountEmail = document.getElementById('accountEmail');
+            const chatHistoryList = document.getElementById('chatHistoryList');
+            const profileSettingsButton = document.getElementById('profileSettingsButton');
+            const profileLogoutButton = document.getElementById('profileLogoutButton');
+            const profileLink = document.getElementById('profileLink');
+            const settingsLink = document.getElementById('settingsLink');
+            const emptyChatHistoryMessage = document.getElementById('emptyChatHistoryMessage');
+            // Check login
+            if (localStorage.getItem('isLoggedIn') !== 'true') {
+                window.location.href = '/auth';
+            }
+            // Load user data
+            const user = JSON.parse(localStorage.getItem('user') || '{}');
+            if (user.name) {
+                profileUsernameDisplay.textContent = user.name;
+                accountName.textContent = user.name;
+            }
+            if (user.email) {
+                profileEmailDisplay.textContent = user.email;
+                accountEmail.textContent = user.email;
+            }
+            // Elements for edit functionality
+            // Note: avatarUpload needs to be re-referenced after dynamic re-creation
+            let avatarUpload = document.getElementById('avatarUpload');
+            const editUsernameIcon = document.getElementById('editUsernameIcon');
+            const usernameInputContainer = document.getElementById('usernameInputContainer');
+            const usernameEditInput = document.getElementById('usernameEditInput');
+            const usernameSaveButton = document.getElementById('usernameSaveButton');
+            // About Me Section elements
+            const profileAboutMeDisplay = document.getElementById('profileAboutMeDisplay');
+            const editAboutMeIcon = document.getElementById('editAboutMeIcon');
+            const aboutMeInputContainer = document.getElementById('aboutMeInputContainer');
+            const aboutMeEditInput = document.getElementById('aboutMeEditInput');
+            const aboutMeSaveButton = document.getElementById('aboutMeSaveButton');
+            // Chat History Search
+            const chatHistorySearchInput = document.getElementById('chatHistorySearchInput');
+            // Chat Context Menu elements
+            const chatContextMenu = document.getElementById('chatContextMenu');
+            let currentChatContextItem = null; // To keep track of which chat item was right-clicked
+            // Toast Container
+            const toastContainer = document.getElementById('toastContainer');
+            // Custom Modal Elements
+            confirmModal = document.getElementById('confirmModal');
+            confirmTitle = document.getElementById('confirmTitle');
+            confirmMessage = document.getElementById('confirmMessage');
+            confirmOkButton = document.getElementById('confirmOkButton');
+            confirmCancelButton = document.getElementById('confirmCancelButton');
+            const promptModal = document.getElementById('promptModal');
+            const promptTitle = document.getElementById('promptTitle');
+            const promptMessage = document.getElementById('promptMessage');
+            const promptInput = document.getElementById('promptInput');
+            const promptSubmitButton = document.getElementById('promptSubmitButton');
+            const promptCancelButton = document.getElementById('promptCancelButton');
+            // Tag Modal Elements (New)
+            const tagModal = document.getElementById('tagModal');
+            const tagModalTitle = document.getElementById('tagModalTitle');
+            const tagOptions = document.getElementById('tagOptions');
+            const tagSaveButton = document.getElementById('tagSaveButton');
+            const tagCancelButton = document.getElementById('tagCancelButton');
+            let currentChatIdForTagging = null;
+            let selectedTags = new Set(); // Stores tags currently selected in the modal
+            // New button
+            const startChattingButton = document.getElementById('startChattingButton');
+            // --- Mock Data (Enhanced) ---
+            // Data is stored in sessionStorage to persist across page reloads in a session
+            let mockUserData = JSON.parse(sessionStorage.getItem('userData')) || {
+                name: 'GAKR User',
+                email: 'gakr.user@example.com',
+                avatar: null, // Base64 string for avatar image
+                aboutMe: '',
+                pinnedChats: [] // Stored as array, converted to Set on load/save
+            };
+            // Ensure pinnedChats is a Set for quick lookups and consistency
+            if (mockUserData.pinnedChats && Array.isArray(mockUserData.pinnedChats)) {
+                mockUserData.pinnedChats = new Set(mockUserData.pinnedChats);
+            } else if (!mockUserData.pinnedChats) {
+                mockUserData.pinnedChats = new Set();
+            }
+            let mockChatHistory = JSON.parse(sessionStorage.getItem('mockChatHistory')) || [
+                { id: 1, title: "What is AI?", date: "2 days ago", tags: ['Learning'], lastActive: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString() },
+                { id: 2, title: "Poem about the ocean", date: "Yesterday", tags: ['Personal', 'Creative'], lastActive: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString() },
+                { id: 3, title: "Explain quantum physics to me simply", date: "Today", tags: ['Learning', 'Ideas'], lastActive: new Date().toISOString() },
+                { id: 4, title: "Recipe for a simple pasta dish", date: "3 days ago", tags: ['Personal'], lastActive: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString() },
+                { id: 5, title: "History of the internet", date: "Last week", tags: ['Learning', 'Work'], lastActive: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString() }
+            ];
+            // Convert tags arrays to Sets when loading, for consistency with mockUserData.pinnedChats
+            mockChatHistory = mockChatHistory.map(chat => ({
+                ...chat,
+                tags: new Set(chat.tags || [])
+            }));
+            // --- Utility Functions ---
+            // Animated Toast Message Function (Middle of Page)
+            function showToast(message, type = 'info', duration = 3000) {
+                const toast = document.createElement('div');
+                toast.className = `gakr-toast ${type}`;
+                let iconClass = '';
+                switch(type) {
+                    case 'success': iconClass = 'fas fa-check-circle'; break;
+                    case 'error': iconClass = 'fas fa-times-circle'; break;
+                    case 'warning': iconClass = 'fas fa-exclamation-triangle'; break;
+                    default: iconClass = 'fas fa-info-circle'; break;
+                }
+                toast.innerHTML = `<i class="${iconClass} toast-icon"></i> <span>${message}</span>`;
+                toastContainer.appendChild(toast);
+                // Show animation
+                setTimeout(() => {
+                    toast.classList.add('show');
+                }, 10); // Small delay for CSS transition to work
+                // Hide animation and remove after duration
+                setTimeout(() => {
+                    toast.classList.remove('show');
+                    toast.classList.add('hide'); // Add hide class for exit animation
+                    toast.addEventListener('transitionend', () => toast.remove(), { once: true });
+                }, duration);
+            }
+            // Custom Prompt Dialog Function (Middle of Page)
+            function showPromptDialog(message, defaultValue = '', title = 'Enter Information') {
+                return new Promise((resolve) => {
+                    promptTitle.textContent = title;
+                    promptMessage.textContent = message;
+                    promptInput.value = defaultValue;
+                    promptModal.classList.add('show');
+                    promptInput.focus(); // Focus on the input field
+                    const triggeringElement = document.activeElement;
+                    const handleSubmit = () => {
+                        promptModal.classList.remove('show');
+                        promptSubmitButton.removeEventListener('click', handleSubmit);
+                        promptCancelButton.removeEventListener('click', handleCancel);
+                        promptInput.removeEventListener('keypress', handleKeyPress);
+                        if (triggeringElement) triggeringElement.focus(); // Return focus
+                        resolve(promptInput.value);
+                    };
+                    const handleCancel = () => {
+                        promptModal.classList.remove('show');
+                        promptSubmitButton.removeEventListener('click', handleSubmit);
+                        promptCancelButton.removeEventListener('click', handleCancel);
+                        promptInput.removeEventListener('keypress', handleKeyPress);
+                        if (triggeringElement) triggeringElement.focus(); // Return focus
+                        resolve(null); // Return null if cancelled
+                    };
+                    const handleKeyPress = (event) => {
+                        if (event.key === 'Enter') {
+                            handleSubmit();
+                        }
+                    };
+                    promptSubmitButton.addEventListener('click', handleSubmit);
+                    promptCancelButton.addEventListener('click', handleCancel);
+                    promptInput.addEventListener('keypress', handleKeyPress);
+                    // Close on overlay click
+                    promptModal.addEventListener('click', function(event) {
+                        if (event.target === promptModal) {
+                            handleCancel();
+                        }
+                    }, { once: true });
+                });
+            }
+            // --- User Data Management (Mock) ---
+            function getUserData() {
+                return mockUserData;
+            }
+            function setUserData(data) {
+                // Merge new data while preserving existing keys
+                mockUserData = { ...mockUserData, ...data };
+                // Ensure pinnedChats is always an Array when saving to sessionStorage for JSON stringify
+                const dataToSave = {
+                    ...mockUserData,
+                    pinnedChats: Array.from(mockUserData.pinnedChats)
+                };
+                sessionStorage.setItem('userData', JSON.stringify(dataToSave));
+                updateProfileUI(); // Update UI after data change
+            }
+            function getChatHistory() {
+                // Return a deep copy to prevent direct modification outside of updateChatInHistory
+                return JSON.parse(JSON.stringify(Array.from(mockChatHistory).map(chat => ({ ...chat, tags: Array.from(chat.tags) }))));
+            }
+            function saveChatHistory() {
+                // Convert tags back to arrays for storage
+                const chatsToSave = mockChatHistory.map(chat => ({
+                    ...chat,
+                    tags: Array.from(chat.tags) // Convert Set to Array for JSON stringify
+                }));
+                sessionStorage.setItem('mockChatHistory', JSON.stringify(chatsToSave));
+            }
+            function updateChatInHistory(chatId, update) {
+                const index = mockChatHistory.findIndex(chat => chat.id === chatId);
+                if (index !== -1) {
+                    // Ensure tags are handled as Sets internally
+                    if (update.tags && ! (update.tags instanceof Set)) {
+                         update.tags = new Set(update.tags);
+                    }
+                    mockChatHistory[index] = { ...mockChatHistory[index], ...update };
+                    saveChatHistory();
+                }
+            }
+            function deleteChatFromHistory(chatId) {
+                const initialLength = mockChatHistory.length;
+                mockChatHistory = mockChatHistory.filter(chat => chat.id !== chatId);
+                if (mockUserData.pinnedChats.has(chatId)) {
+                    mockUserData.pinnedChats.delete(chatId);
+                    setUserData({}); // Save updated pinned chats (which triggers UI update)
+                } else {
+                    saveChatHistory(); // Only save if pinned chats weren't updated
+                }
+                return mockChatHistory.length < initialLength; // Return true if deleted
+            }
+            // --- UI Update Logic ---
+            function updateProfileUI() {
+                const userData = getUserData();
+                // Update header profile button
+                if (profileButton) {
+                    profileButton.textContent = userData.name.charAt(0).toUpperCase();
+                    profileButton.title = userData.name;
+                }
+                // Update large avatar
+                if (profileAvatarLarge) {
+                    profileAvatarLarge.innerHTML = ''; // Clear existing content
+                    if (userData.avatar) {
+                        const img = document.createElement('img');
+                        img.src = userData.avatar;
+                        img.alt = "User Avatar";
+                        profileAvatarLarge.appendChild(img);
+                    } else {
+                        profileAvatarLarge.textContent = userData.name.charAt(0).toUpperCase();
+                    }
+                    // Add the edit icon and input back dynamically
+                    const label = document.createElement('label');
+                    label.htmlFor = 'avatarUpload'; // Important: ensures label clicks input
+                    label.className = 'profile-avatar-edit-icon';
+                    label.title = 'Change Avatar';
+                    label.innerHTML = '<i class="fas fa-camera"></i>';
+                    // Create a *new* input element and assign its ID, then append to label
+                    const newInput = document.createElement('input');
+                    newInput.type = 'file';
+                    newInput.id = 'avatarUpload'; // Reuse the ID
+                    newInput.accept = 'image/*';
+                    newInput.style.display = 'none';
+                    label.appendChild(newInput);
+                    profileAvatarLarge.appendChild(label);
+                    // Re-assign the global avatarUpload reference to the new element
+                    avatarUpload = newInput;
+                    // Re-attach event listener for the dynamically created input
+                    avatarUpload.addEventListener('change', handleAvatarUpload);
+                }
+                // Update username displays
+                if (profileUsernameDisplay) profileUsernameDisplay.textContent = userData.name;
+                if (accountName) accountName.textContent = userData.name;
+                if (profileEmailDisplay) profileEmailDisplay.textContent = userData.email;
+                if (accountEmail) accountEmail.textContent = userData.email;
+                // Update About Me display
+                if (profileAboutMeDisplay) {
+                    profileAboutMeDisplay.textContent = userData.aboutMe || 'Tell us something about yourself...';
+                    // Add/remove placeholder class for italicized gray text
+                    profileAboutMeDisplay.classList.toggle('placeholder', !userData.aboutMe);
+                }
+                // Ensure auth controls are set for a "logged in" state
+                if (signInRegisterButton) signInRegisterButton.style.display = 'none';
+                if (profileControls) profileControls.style.display = 'block';
+                // Update chat history list based on current filters
+                renderChatHistory(chatHistorySearchInput.value);
+            }
+            // --- Edit Profile Functions ---
+            function handleAvatarUpload(event) {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        setUserData({ avatar: e.target.result });
+                        showToast('Avatar updated successfully!', 'success');
+                    };
+                    reader.onerror = function() {
+                        showToast('Failed to read file.', 'error');
+                    };
+                    reader.readAsDataURL(file);
+                } else {
+                    showToast('No file selected.', 'warning');
+                }
+            }
+            function toggleUsernameEdit(show) {
+                if (show) {
+                    profileUsernameDisplay.style.display = 'none';
+                    editUsernameIcon.style.display = 'none';
+                    usernameInputContainer.style.display = 'flex'; // Use flex for button alignment
+                    usernameEditInput.value = getUserData().name;
+                    usernameEditInput.focus();
+                    usernameEditInput.setSelectionRange(usernameEditInput.value.length, usernameEditInput.value.length); // Put cursor at end
+                } else {
+                    profileUsernameDisplay.style.display = 'block';
+                    editUsernameIcon.style.display = 'inline-block';
+                    usernameInputContainer.style.display = 'none';
+                }
+            }
+            function toggleAboutMeEdit(show) {
+                if (show) {
+                    profileAboutMeDisplay.style.display = 'none';
+                    editAboutMeIcon.style.display = 'none';
+                    aboutMeInputContainer.style.display = 'flex'; // Use flex-direction: column in CSS
+                    aboutMeEditInput.value = getUserData().aboutMe;
+                    aboutMeEditInput.focus();
+                    aboutMeEditInput.setSelectionRange(aboutMeEditInput.value.length, aboutMeEditInput.value.length); // Put cursor at end
+                } else {
+                    profileAboutMeDisplay.style.display = 'block';
+                    editAboutMeIcon.style.display = 'inline-block';
+                    aboutMeInputContainer.style.display = 'none';
+                }
+            }
+            // --- Chat History Rendering and Management ---
+            function renderChatHistory(searchTerm = '') {
+                const chatHistory = getChatHistory();
+                chatHistoryList.innerHTML = ''; // Clear existing list
+                // Filter
+                let filteredChats = chatHistory.filter(chat =>
+                    chat.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                    Array.from(chat.tags).some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+                );
+                // Separate pinned and unpinned chats
+                let pinnedChats = [];
+                let unpinnedChats = [];
+                filteredChats.forEach(chat => {
+                    // Check against mockUserData.pinnedChats Set
+                    if (mockUserData.pinnedChats.has(chat.id)) {
+                        pinnedChats.push(chat);
+                    } else {
+                        unpinnedChats.push(chat);
+                    }
+                });
+                // Sort (always newest first for simplicity after removing sort dropdown)
+                const sortFunction = (a, b) => {
+                    const dateA = new Date(a.lastActive);
+                    const dateB = new Date(b.lastActive);
+                    return dateB.getTime() - dateA.getTime(); // Newest first
+                };
+                pinnedChats.sort(sortFunction);
+                unpinnedChats.sort(sortFunction);
+                // Combine pinned and unpinned (pinned always come first)
+                const chatsToDisplay = [...pinnedChats, ...unpinnedChats];
+                if (chatsToDisplay.length === 0) {
+                    emptyChatHistoryMessage.style.display = 'block';
+                } else {
+                    emptyChatHistoryMessage.style.display = 'none';
+                    chatsToDisplay.forEach(chat => {
+                        const chatItem = document.createElement('div');
+                        chatItem.className = 'chat-history-item';
+                        chatItem.dataset.chatId = chat.id; // Store chat ID on the element
+                        if (mockUserData.pinnedChats.has(chat.id)) {
+                            chatItem.classList.add('pinned');
+                        }
+                        // Format last active time
+                        let lastActiveText = '';
+                        try {
+                            const lastActiveDate = new Date(chat.lastActive);
+                            const now = new Date();
+                            const diffMs = now.getTime() - lastActiveDate.getTime();
+                            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+                            if (diffDays === 0 && lastActiveDate.toDateString() === now.toDateString()) {
+                                lastActiveText = `Today, ${lastActiveDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+                            } else if (diffDays === 1 || (diffDays === 0 && lastActiveDate.getDate() === now.getDate() - 1)) {
+                                lastActiveText = `Yesterday, ${lastActiveDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+                            } else if (diffDays < 7) {
+                                lastActiveText = `${lastActiveDate.toLocaleDateString('en-US', { weekday: 'short' })}, ${lastActiveDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+                            } else {
+                                lastActiveText = lastActiveDate.toLocaleDateString();
+                            }
+                        } catch (e) {
+                            lastActiveText = chat.date; // Fallback if date is invalid or missing
+                        }
+                        chatItem.innerHTML = `
+                            <div class="chat-title-wrapper">
+                                <span class="chat-title">${chat.title}</span>
+                                ${mockUserData.pinnedChats.has(chat.id) ? '<i class="fas fa-thumbtack pinned-icon" title="Pinned"></i>' : ''}
+                            </div>
+                            <div class="chat-meta">
+                                <span class="chat-date">${chat.date}</span>
+                                <span class="chat-history-last-active">Last active: ${lastActiveText}</span>
+                            </div>
+                            <div class="chat-tags">
+                                ${Array.from(chat.tags).map(tag => `<span>${tag}</span>`).join('')}
+                            </div>
+                        `;
+                        chatHistoryList.appendChild(chatItem);
+                    });
+                }
+            }
+            // --- Context Menu Functions ---
+            function showContextMenu(x, y, chatItem) {
+                // Ensure menu doesn't go off-screen
+                let posX = x;
+                let posY = y;
+                // Adjust X if too close to right edge
+                const menuWidth = chatContextMenu.offsetWidth;
+                if (posX + menuWidth > window.innerWidth - 20) { // 20px padding from right
+                    posX = window.innerWidth - menuWidth - 20;
+                }
+                // Adjust Y if too close to bottom edge
+                const menuHeight = chatContextMenu.offsetHeight;
+                if (posY + menuHeight > window.innerHeight - 20) { // 20px padding from bottom
+                    posY = window.innerHeight - menuHeight - 20;
+                }
+                chatContextMenu.style.left = `${posX}px`;
+                chatContextMenu.style.top = `${posY}px`;
+                chatContextMenu.classList.add('show');
+                currentChatContextItem = chatItem; // Store the clicked item
+                const chatId = parseInt(currentChatContextItem.dataset.chatId);
+                const pinUnpinLink = chatContextMenu.querySelector('[data-action="pin"], [data-action="unpin"]');
+                if (mockUserData.pinnedChats.has(chatId)) {
+                    pinUnpinLink.innerHTML = '<i class="fas fa-thumbtack"></i> Unpin';
+                    pinUnpinLink.dataset.action = 'unpin';
+                } else {
+                    pinUnpinLink.innerHTML = '<i class="fas fa-thumbtack"></i> Pin';
+                    pinUnpinLink.dataset.action = 'pin';
+                }
+            }
+            function hideContextMenu() {
+                chatContextMenu.classList.remove('show');
+                currentChatContextItem = null;
+            }
+            // --- Tag Modal Functions (New) ---
+            function showTagModal(chatId, currentTags) {
+                currentChatIdForTagging = chatId;
+                selectedTags = new Set(currentTags); // Initialize selected tags from the chat's current tags
+                // Clear previous selections and populate options
+                tagOptions.innerHTML = '';
+                // Extendable list of available tags
+                const availableTags = ['Work', 'Personal', 'Creative', 'Ideas', 'Learning', 'Research', 'Drafts', 'Notes', 'Projects', 'Finance', 'Health'];
+                availableTags.forEach(tag => {
+                    const tagDiv = document.createElement('div');
+                    tagDiv.className = 'tag-option';
+                    tagDiv.dataset.tag = tag;
+                    tagDiv.textContent = tag;
+                    if (selectedTags.has(tag)) {
+                        tagDiv.classList.add('selected');
+                    }
+                    tagDiv.addEventListener('click', () => {
+                        if (selectedTags.has(tag)) {
+                            selectedTags.delete(tag);
+                            tagDiv.classList.remove('selected');
+                        } else {
+                            selectedTags.add(tag);
+                            tagDiv.classList.add('selected');
+                        }
+                    });
+                    tagOptions.appendChild(tagDiv);
+                });
+                tagModal.classList.add('show');
+                // Store the element that triggered the modal for focus management
+                tagModal.triggeringElement = document.activeElement;
+            }
+            function hideTagModal() {
+                tagModal.classList.remove('show');
+                currentChatIdForTagging = null;
+                selectedTags = new Set(); // Reset selected tags
+                if (tagModal.triggeringElement) tagModal.triggeringElement.focus(); // Return focus
+                tagModal.triggeringElement = null;
+            }
+            // --- Event Listeners ---
+            // Dropdown menu toggle
+            profileButton.addEventListener('click', function(event) {
+                event.stopPropagation(); // Prevent document click from closing immediately
+                profileDropdown.classList.toggle('show');
+            });
+            // Close dropdown and context menu if clicked outside
+            document.addEventListener('click', function(event) {
+                if (!profileDropdown.contains(event.target) && !profileButton.contains(event.target)) {
+                    profileDropdown.classList.remove('show');
+                }
+                if (!chatContextMenu.contains(event.target) && !event.target.closest('.chat-history-item')) {
+                    hideContextMenu();
+                }
+            });
+            // Prevent context menu from closing if right-clicking the menu itself
+            chatContextMenu.addEventListener('contextmenu', function(event) {
+                event.preventDefault();
+            });
+            // Navigation from dropdown (Mock functionality)
+            if (profileLink) {
+                profileLink.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    profileDropdown.classList.remove('show');
+                    showToast('You are already on your profile page!', 'info');
+                });
+            }
+        if (profileSettingsButton) {
+                profileSettingsButton.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    showToast('Profile settings coming soon!', 'info');
+                });
+            }
+            if (settingsLink) {
+                settingsLink.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    showToast('Settings page is under development!', 'info');
+                    profileDropdown.classList.remove('show');
+                });
+            }
+            // Logout (from header dropdown) - removed, using onclick for profile logout
+            // Handle profile settings button on the profile page
+            // Profile logout is now handled by onclick in HTML
+            // Username Edit Listeners
+            editUsernameIcon.addEventListener('click', () => toggleUsernameEdit(true));
+            usernameSaveButton.addEventListener('click', function() {
+                const newUsername = usernameEditInput.value.trim();
+                if (newUsername) {
+                    setUserData({ name: newUsername });
+                    toggleUsernameEdit(false);
+                    showToast('Username updated successfully!', 'success');
+                } else {
+                    showToast('Username cannot be empty!', 'error');
+                }
+            });
+            usernameEditInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    usernameSaveButton.click(); // Trigger save button click on Enter
+                }
+            });
+            // About Me Edit Listeners
+            editAboutMeIcon.addEventListener('click', () => toggleAboutMeEdit(true));
+            aboutMeSaveButton.addEventListener('click', function() {
+                const newAboutMe = aboutMeEditInput.value.trim();
+                setUserData({ aboutMe: newAboutMe }); // Allow empty string for about me
+                toggleAboutMeEdit(false);
+                showToast('About Me section updated!', 'success');
+            });
+            aboutMeEditInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) { // Allow Shift+Enter for new line
+                    e.preventDefault(); // Prevent default Enter behavior (new line)
+                    aboutMeSaveButton.click();
+                }
+            });
+            // Chat History Search Listener
+            chatHistorySearchInput.addEventListener('input', () => renderChatHistory(chatHistorySearchInput.value));
+            // Chat History Context Menu Listeners (Right-click)
+            chatHistoryList.addEventListener('contextmenu', function(event) {
+                const chatItem = event.target.closest('.chat-history-item');
+                if (chatItem) {
+                    event.preventDefault(); // Prevent default browser context menu
+                    showContextMenu(event.clientX, event.clientY, chatItem);
+                }
+            });
+            // Handle actions from the chat context menu
+            chatContextMenu.addEventListener('click', function(event) {
+                event.preventDefault(); // Prevent default link behavior
+                const actionElement = event.target.closest('.chat-context-menu-item');
+                if (actionElement && currentChatContextItem) {
+                    const action = actionElement.dataset.action;
+                    const chatId = parseInt(currentChatContextItem.dataset.chatId);
+                    switch (action) {
+                        case 'delete':
+                            showConfirmDialog('Are you sure you want to delete this conversation? This action cannot be undone.', 'Delete Conversation')
+                                .then(result => {
+                                    if (result) {
+                                        if (deleteChatFromHistory(chatId)) {
+                                            showToast('Conversation deleted.', 'success');
+                                            renderChatHistory(chatHistorySearchInput.value); // Re-render after deletion
+                                        } else {
+                                            showToast('Failed to delete conversation.', 'error');
+                                        }
+                                    }
+                                });
+                            break;
+                        case 'share':
+                            showPromptDialog('Enter email or username to share with:', '', 'Share Conversation')
+                                .then(input => {
+                                    if (input !== null) { // Check for null (cancelled)
+                                        if (input.trim() !== '') {
+                                            showToast(`Conversation shared with "${input}". (Mock)`, 'success');
+                                        } else {
+                                            showToast('Share cancelled. No recipient provided.', 'warning');
+                                        }
+                                    }
+                                });
+                            break;
+                        case 'pin':
+                            mockUserData.pinnedChats.add(chatId);
+                            setUserData({}); // Save updated pinned chats (triggers UI update)
+                            showToast('Conversation pinned!', 'success');
+                            // renderChatHistory is called by setUserData
+                            break;
+                        case 'unpin':
+                            mockUserData.pinnedChats.delete(chatId);
+                            setUserData({}); // Save updated pinned chats (triggers UI update)
+                            showToast('Conversation unpinned!', 'info');
+                            // renderChatHistory is called by setUserData
+                            break;
+                        case 'tag':
+                            const chatToTag = mockChatHistory.find(chat => chat.id === chatId);
+                            if (chatToTag) {
+                                showTagModal(chatId, chatToTag.tags);
+                            }
+                            break;
+                    }
+                    hideContextMenu(); // Always hide after an action
+                }
+            });
+            // Handle clicks on chat items (to potentially open a conversation)
+            chatHistoryList.addEventListener('click', function(event) {
+                const chatItem = event.target.closest('.chat-history-item');
+                if (chatItem) {
+                    const chatId = chatItem.dataset.chatId;
+                    showToast(`Opening conversation: ${chatItem.querySelector('.chat-title').textContent} (ID: ${chatId}). (Mock)`, 'info');
+                    // In a real application, you would navigate to the chat page:
+                    // window.location.href = `chat.html?chatId=${chatId}`;
+                }
+            });
+            // Tag Modal Listeners (New)
+            tagSaveButton.addEventListener('click', function() {
+                if (currentChatIdForTagging !== null) {
+                    // Update the chat with the new set of tags
+                    updateChatInHistory(currentChatIdForTagging, { tags: Array.from(selectedTags) });
+                    showToast('Tags updated successfully!', 'success');
+                    hideTagModal();
+                    renderChatHistory(chatHistorySearchInput.value); // Re-render to reflect new tags
+                }
+            });
+            tagCancelButton.addEventListener('click', hideTagModal);
+            // Close Tag Modal on overlay click
+            tagModal.addEventListener('click', function(event) {
+                if (event.target === tagModal) {
+                    hideTagModal();
+                }
+            });
+            // Initial UI setup
+            updateProfileUI(); // Call once on load to populate existing data
+        });
+    </script>
+</body>
+</html>