diff --git "a/templates/index.html" "b/templates/index.html"
--- "a/templates/index.html"
+++ "b/templates/index.html"
@@ -1,1816 +1,1780 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dhara Agri AI Assistant</title>
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-:root {
-    --bg-color: #faf9f7;
-    --sidebar-color: #ffffff;
-    --chat-area-color: #f5f4f2;
-    --user-msg-color: #e8e6e3;
-    --assistant-msg-color: #ffffff;
-    --text-color: #2d2d2d;
-    --text-secondary: #6b6b6b;
-    --border-color: #e5e3df;
-    --accent-color: #5f7464;
-    --accent-hover: #4a5d51;
-    --danger-color: #c85a54;
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
-    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-}
-
-* { 
-    box-sizing: border-box; 
-    margin: 0; 
-    padding: 0; 
-}
-
-body {
-    font-family: var(--font-family);
-    background-color: var(--bg-color);
-    color: var(--text-color);
-    display: flex;
-    height: 100vh;
-    overflow: hidden;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.app-container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-
-/* Sidebar (hidden on mobile by default) */
-.sidebar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 280px;
-    background-color: var(--sidebar-color);
-    display: flex;
-    flex-direction: column;
-    padding: 24px 20px;
-    transform: translateX(-100%);
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 101;
-    box-shadow: var(--shadow-lg);
-    border-right: 1px solid var(--border-color);
-}
-.app-container.sidebar-visible .sidebar {
-    transform: translateX(0);
-    animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes slideInLeft {
-    from {
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-.sidebar-header {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    margin-bottom: 24px;
-}
-.sidebar-button {
-    flex-grow: 1;
-    padding: 14px 20px;
-    background-color: var(--accent-color);
-    border: none;
-    border-radius: 12px;
-    color: #ffffff;
-    cursor: pointer;
-    font-size: 0.95rem;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: var(--shadow-sm);
-    letter-spacing: 0.01em;
-}
-.sidebar-button:hover { 
-    background-color: var(--accent-hover);
-    box-shadow: var(--shadow-md);
-    transform: translateY(-1px);
-}
-.sidebar-button:active {
-    transform: translateY(0);
-    box-shadow: var(--shadow-sm);
-}
-.chat-history { 
-    flex-grow: 1; 
-    overflow-y: auto; 
-    margin-top: 8px;
-    padding-right: 4px;
-}
-.chat-history::-webkit-scrollbar {
-    width: 6px;
-}
-.chat-history::-webkit-scrollbar-track {
-    background: transparent;
-}
-.chat-history::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 3px;
-}
-.chat-history::-webkit-scrollbar-thumb:hover {
-    background: #ccc;
-}
-
-.chat-history-item {
-    padding: 12px 16px;
-    margin-bottom: 8px;
-    border-radius: 10px;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    background-color: transparent;
-    border: 1px solid transparent;
-    font-size: 0.9rem;
-    color: var(--text-color);
-}
-.chat-history-item:hover { 
-    background-color: var(--chat-area-color);
-    border-color: var(--border-color);
-    transform: translateX(4px);
-}
-.chat-history-item.active { 
-    background-color: var(--accent-color);
-    color: #ffffff;
-    font-weight: 500;
-    box-shadow: var(--shadow-sm);
-}
-
-.close-sidebar-btn {
-    background: var(--chat-area-color);
-    border: none;
-    color: var(--text-secondary);
-    cursor: pointer;
-    display: none;
-    padding: 8px;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    width: 36px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.close-sidebar-btn:hover {
-    background: var(--border-color);
-    color: var(--text-color);
-}
-.app-container.sidebar-visible .close-sidebar-btn {
-    display: flex;
-}
-
-/* Main Chat Area */
-.chat-area {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--chat-area-color);
-    position: relative;
-    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.app-container.sidebar-visible .chat-area::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(45, 45, 45, 0.4);
-    backdrop-filter: blur(2px);
-    z-index: 100;
-    animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-.chat-header { 
-    display: flex; 
-    align-items: center; 
-    padding: 20px 24px; 
-    border-bottom: 1px solid var(--border-color);
-    background: var(--sidebar-color);
-    box-shadow: var(--shadow-sm);
-}
-.menu-toggle { 
-    background: none; 
-    border: none; 
-    color: var(--text-color); 
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.menu-toggle:hover {
-    background: var(--chat-area-color);
-}
-#chat-title { 
-    margin-left: 16px; 
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: var(--text-color);
-    letter-spacing: -0.01em;
-}
-
-.chat-messages { 
-    flex-grow: 1; 
-    overflow-y: auto; 
-    padding: 32px 24px; 
-    display: flex; 
-    flex-direction: column;
-    gap: 16px;
-}
-.chat-messages::-webkit-scrollbar {
-    width: 8px;
-}
-.chat-messages::-webkit-scrollbar-track {
-    background: transparent;
-}
-.chat-messages::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 4px;
-}
-.chat-messages::-webkit-scrollbar-thumb:hover {
-    background: #ccc;
-}
-.welcome-message { 
-    text-align: center; 
-    margin: auto;
-    padding: 48px 24px;
-    animation: fadeInUp 0.6s ease;
-}
-.welcome-message h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--text-color);
-    margin-bottom: 12px;
-    letter-spacing: -0.02em;
-}
-.welcome-message p {
-    font-size: 1rem;
-    color: var(--text-secondary);
-    font-weight: 400;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.message { 
-    max-width: 85%; 
-    padding: 16px 20px; 
-    border-radius: 16px; 
-    line-height: 1.7; 
-    word-wrap: break-word;
-    font-size: 0.95rem;
-    box-shadow: var(--shadow-sm);
-    transition: all 0.3s ease;
-    animation: messageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.message:hover {
-    box-shadow: var(--shadow-md);
-}
-.message p, .message ul, .message ol { margin: 0.6em 0; }
-.message ul, .message ol { padding-left: 24px; }
-.message code { 
-    background-color: var(--chat-area-color); 
-    padding: 3px 6px; 
-    border-radius: 6px;
-    font-size: 0.9em;
-    border: 1px solid var(--border-color);
-}
-.message pre { 
-    background-color: var(--sidebar-color); 
-    padding: 16px; 
-    border-radius: 12px; 
-    overflow-x: auto;
-    border: 1px solid var(--border-color);
-    box-shadow: var(--shadow-sm);
-}
-.message img.user-upload { 
-    max-width: 200px; 
-    border-radius: 12px; 
-    margin-top: 12px;
-    box-shadow: var(--shadow-md);
-    transition: transform 0.3s ease;
-}
-.message img.user-upload:hover {
-    transform: scale(1.02);
-}
-
-.user-message { 
-    background-color: var(--user-msg-color); 
-    align-self: flex-end;
-    border-bottom-right-radius: 6px;
-}
-.assistant-message { 
-    background-color: var(--assistant-msg-color); 
-    align-self: flex-start;
-    border-bottom-left-radius: 6px;
-    border: 1px solid var(--border-color);
-}
-.assistant-message.loading::after { 
-    content: '...'; 
-    display: inline-block; 
-    animation: blink 1.2s infinite; 
-}
-
-@keyframes blink { 
-    0%, 100% { opacity: 0.3; }
-    50% { opacity: 1; } 
-}
-@keyframes messageSlideIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-@keyframes slideDown {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Chat Input */
-.chat-input-area { 
-    padding: 20px 24px 24px; 
-    border-top: 1px solid var(--border-color);
-    background: var(--sidebar-color);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
-}
-.image-preview { 
-    position: relative; 
-    width: 100px; 
-    margin-bottom: 12px;
-    animation: scaleIn 0.3s ease;
-}
-#image-preview { 
-    width: 100%; 
-    border-radius: 12px;
-    box-shadow: var(--shadow-md);
-}
-#remove-image-btn {
-    position: absolute; 
-    top: -8px; 
-    right: -8px;
-    background: var(--danger-color);
-    color: #fff; 
-    border: 2px solid var(--sidebar-color);
-    border-radius: 50%; 
-    width: 28px; 
-    height: 28px;
-    cursor: pointer; 
-    display: flex; 
-    align-items: center; 
-    justify-content: center;
-    font-size: 16px;
-    transition: all 0.3s ease;
-    box-shadow: var(--shadow-sm);
-}
-#remove-image-btn:hover {
-    background: #a84540;
-    transform: scale(1.1);
-}
-
-@keyframes scaleIn {
-    from {
-        opacity: 0;
-        transform: scale(0.8);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-.chat-input-wrapper { 
-    display: flex; 
-    align-items: flex-end; 
-    gap: 12px;
-    background: var(--chat-area-color);
-    border: 2px solid var(--border-color);
-    border-radius: 16px;
-    padding: 8px;
-    transition: all 0.3s ease;
-}
-.chat-input-wrapper:focus-within {
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px rgba(95, 116, 100, 0.1);
-}
-#message-input {
-    flex-grow: 1; 
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    font-size: 0.95rem;
-    font-family: var(--font-family);
-    padding: 10px 12px;
-    resize: none;
-    max-height: 150px;
-    overflow-y: auto;
-    outline: none;
-    line-height: 1.5;
-}
-#message-input::placeholder {
-    color: var(--text-secondary);
-    opacity: 0.6;
-}
-
-.input-action-btn { 
-    background: transparent; 
-    border: none; 
-    color: var(--text-secondary); 
-    cursor: pointer; 
-    height: 44px; 
-    width: 44px; 
-    display: flex; 
-    align-items: center; 
-    justify-content: center;
-    border-radius: 10px;
-    transition: all 0.3s ease;
-    flex-shrink: 0;
-}
-.input-action-btn:hover {
-    background: var(--sidebar-color);
-    color: var(--text-color);
-}
-.send-btn { 
-    background: var(--accent-color); 
-    color: white; 
-    border-radius: 10px;
-    box-shadow: var(--shadow-sm);
-}
-.send-btn:hover {
-    background: var(--accent-hover);
-    box-shadow: var(--shadow-md);
-    transform: translateY(-1px);
-}
-.send-btn:active {
-    transform: translateY(0);
-}
-
-/* Desktop styles */
-@media (min-width: 768px) {
-    .chat-header { display: none; }
-    .sidebar { 
-        position: static; 
-        transform: translateX(0); 
-        border-right: 1px solid var(--border-color);
-        box-shadow: none;
-    }
-    .close-sidebar-btn { display: none !important; }
-    .app-container.sidebar-visible .chat-area::before { display: none; }
-    .chat-area { 
-        width: auto; 
-        flex-grow: 1;
-    }
-    .chat-messages {
-        padding: 48px 64px;
-    }
-    .chat-input-area {
-        padding: 24px 64px 32px;
-    }
-    .message {
-        max-width: 75%;
-    }
-}
-</style>
-</head>
-<body>
-    <div id="app-container" class="app-container">
-        <!-- Sidebar for sessions (hidden on mobile) -->
-        <aside class="sidebar">
-            <div class="sidebar-header">
-                <button id="new-chat-btn" class="sidebar-button">
-                    <span class="icon">+</span> New Chat
-                </button>
-                <button id="close-sidebar-btn" class="close-sidebar-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
-                        <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
-                    </svg>
-                </button>
-            </div>
-            <div class="chat-history" id="chat-history-list"></div>
-        </aside>
-
-        <!-- Main chat window -->
-        <main id="chat-area" class="chat-area">
-            <header class="chat-header">
-                <button id="menu-toggle" class="menu-toggle">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"></path></svg>
-                </button>
-                <h2 id="chat-title">New Chat</h2>
-            </header>
-            <div class="chat-messages" id="chat-messages">
-                <div class="welcome-message">
-                    <h1>Dhara Agri AI Assistant</h1>
-                </div>
-            </div>
-            <div class="chat-input-area">
-                <div class="image-preview" id="image-preview-container" style="display: none;">
-                    <img id="image-preview" src="#" alt="Image preview"/>
-                    <button id="remove-image-btn">&times;</button>
-                </div>
-                <div class="chat-input-wrapper">
-                    <input type="file" id="image-upload-input" accept="image/*" style="display: none;">
-                    <button id="image-upload-btn" class="input-action-btn">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd"></path></svg>
-                    </button>
-                    <textarea id="message-input" placeholder="Ask a question..." rows="1"></textarea>
-                    <button id="send-btn" class="input-action-btn send-btn">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="send-icon"><path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z"></path></svg>
-                    </button>
-                </div>
-            </div>
-        </main>
-    </div>
-    <script>
-document.addEventListener('DOMContentLoaded', () => {
-    
-    // --- DOM Elements ---
-    const chatArea = document.getElementById('chat-area');
-    const closeSidebarBtn = document.getElementById('close-sidebar-btn');
-    const messageInput = document.getElementById('message-input');
-    const sendBtn = document.getElementById('send-btn');
-    const newChatBtn = document.getElementById('new-chat-btn');
-    const chatMessages = document.getElementById('chat-messages');
-    const chatHistoryList = document.getElementById('chat-history-list');
-    const menuToggle = document.getElementById('menu-toggle');
-    const appContainer = document.getElementById('app-container');
-    const chatTitle = document.getElementById('chat-title');
-    const imageUploadBtn = document.getElementById('image-upload-btn');
-    const imageUploadInput = document.getElementById('image-upload-input');
-    const imagePreviewContainer = document.getElementById('image-preview-container');
-    const imagePreview = document.getElementById('image-preview');
-    const removeImageBtn = document.getElementById('remove-image-btn');
-
-    // Add search and filter elements
-    let searchInput, clearAllBtn, userStatsDiv;
-
-    // --- State ---
-    let currentChatId = null;
-    let currentUserId = null;
-    let conversationsCache = {};
-    let selectedImageFile = null;
-    let imgbbApiKey = '';
-    let firebase = null;
-    let firebaseDB = null;
-    let useFirebase = false;
-
-    // --- User Management ---
-    const generateUserFingerprint = () => {
-        // Create a device fingerprint based on available browser info
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        ctx.textBaseline = 'top';
-        ctx.font = '14px Arial';
-        ctx.fillText('Device fingerprint', 2, 2);
-        
-        const fingerprint = [
-            navigator.userAgent,
-            navigator.language,
-            navigator.platform,
-            navigator.cookieEnabled,
-            navigator.doNotTrack,
-            screen.width + 'x' + screen.height,
-            screen.colorDepth,
-            new Date().getTimezoneOffset(),
-            canvas.toDataURL(),
-            navigator.hardwareConcurrency || 'unknown',
-            navigator.deviceMemory || 'unknown'
-        ].join('|');
-        
-        // Create hash
-        return hashCode(fingerprint).toString();
-    };
-
-    const hashCode = (str) => {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            const char = str.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
-            hash = hash & hash; // Convert to 32bit integer
-        }
-        return Math.abs(hash);
-    };
-
-    const initializeUser = async () => {
-        // Try to get existing user ID from storage
-        let userId = localStorage.getItem('easyfarms_user_id');
-        
-        if (!userId) {
-            // Generate new user ID based on device fingerprint
-            const deviceFingerprint = generateUserFingerprint();
-            const timestamp = Date.now();
-            const randomPart = Math.random().toString(36).substr(2, 8);
-            
-            userId = `user_${deviceFingerprint}_${timestamp}_${randomPart}`;
-            localStorage.setItem('easyfarms_user_id', userId);
-            
-            console.log('Generated new user ID:', userId);
-        } else {
-            console.log('Using existing user ID:', userId);
-        }
-        
-        currentUserId = userId;
-        
-        // Also save to Firebase if available
-        if (useFirebase && firebaseDB) {
-            try {
-                await saveUserData(userId, {
-                    created_at: new Date().toISOString(),
-                    device_fingerprint: generateUserFingerprint(),
-                    last_seen: new Date().toISOString()
-                });
-            } catch (error) {
-                console.error('Failed to save user data to Firebase:', error);
-            }
-        }
-        
-        return userId;
-    };
-
-    const saveUserData = async (userId, userData) => {
-        try {
-            if (useFirebase && firebaseDB) {
-                const { setDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
-                await setDoc(doc(firebaseDB, 'users', userId), {
-                    ...userData,
-                    updatedAt: new Date().toISOString()
-                });
-                console.log('User data saved to Firebase:', userId);
-            } else {
-                // Fallback to localStorage
-                const users = JSON.parse(localStorage.getItem('easyfarms_users') || '{}');
-                users[userId] = {
-                    ...userData,
-                    updatedAt: new Date().toISOString()
-                };
-                localStorage.setItem('easyfarms_users', JSON.stringify(users));
-                console.log('User data saved to localStorage:', userId);
-            }
-        } catch (error) {
-            console.error('Failed to save user data:', error);
-        }
-    };
-
-    // --- Firebase Configuration ---
-    const initializeFirebase = async () => {
-        try {
-            if (typeof firebase !== 'undefined' && window.firebaseConfig) {
-                const { initializeApp } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js');
-                const { getFirestore, collection, doc, setDoc, getDoc, getDocs, deleteDoc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
-                
-                const app = initializeApp(window.firebaseConfig);
-                firebaseDB = getFirestore(app);
-                useFirebase = true;
-                
-                console.log('Firebase initialized successfully');
-                return { setDoc, getDoc, getDocs, deleteDoc, collection, doc };
-            } else {
-                console.log('Firebase not configured, using localStorage');
-                return null;
-            }
-        } catch (error) {
-            console.error('Firebase initialization failed, falling back to localStorage:', error);
-            return null;
-        }
-    };
-
-    // --- Storage Management with User Isolation ---
-    const saveSessionData = async (chatId, data) => {
-        try {
-            if (useFirebase && firebaseDB) {
-                const { setDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
-                await setDoc(doc(firebaseDB, 'user_sessions', `${currentUserId}_${chatId}`), {
-                    ...data,
-                    userId: currentUserId,
-                    chatId: chatId,
-                    updatedAt: new Date().toISOString()
-                });
-                console.log('Session saved to Firebase:', chatId, 'for user:', currentUserId);
-            } else {
-                // Fallback to localStorage with user isolation
-                const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
-                userSessions[chatId] = {
-                    ...data,
-                    userId: currentUserId,
-                    updatedAt: new Date().toISOString()
-                };
-                localStorage.setItem(`easyfarms_sessions_${currentUserId}`, JSON.stringify(userSessions));
-                console.log('Session saved to localStorage:', chatId, 'for user:', currentUserId);
-            }
-        } catch (error) {
-            console.error('Failed to save session data:', error);
-            // Fallback to localStorage
-            const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
-            userSessions[chatId] = data;
-            localStorage.setItem(`easyfarms_sessions_${currentUserId}`, JSON.stringify(userSessions));
-        }
-    };
-
-    const loadSessionData = async (chatId) => {
-        try {
-            if (useFirebase && firebaseDB) {
-                const { getDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
-                const docRef = doc(firebaseDB, 'user_sessions', `${currentUserId}_${chatId}`);
-                const docSnap = await getDoc(docRef);
-                if (docSnap.exists()) {
-                    console.log('Session loaded from Firebase:', chatId);
-                    return docSnap.data();
-                }
-            } else {
-                // Fallback to localStorage
-                const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
-                if (userSessions[chatId]) {
-                    console.log('Session loaded from localStorage:', chatId);
-                    return userSessions[chatId];
-                }
-            }
-            return null;
-        } catch (error) {
-            console.error('Failed to load session data:', error);
-            // Fallback to localStorage
-            const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
-            return userSessions[chatId] || null;
-        }
-    };
-
-    const loadAllSessions = async () => {
-        try {
-            if (useFirebase && firebaseDB) {
-                const { getDocs, collection, query, where } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
-                const q = query(collection(firebaseDB, 'user_sessions'), where('userId', '==', currentUserId));
-                const querySnapshot = await getDocs(q);
-                const sessions = {};
-                querySnapshot.forEach((doc) => {
-                    const data = doc.data();
-                    sessions[data.chatId] = data;
-                });
-                console.log('All sessions loaded from Firebase for user:', currentUserId);
-                return sessions;
-            } else {
-                // Fallback to localStorage
-                const sessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
-                console.log('All sessions loaded from localStorage for user:', currentUserId);
-                return sessions;
-            }
-        } catch (error) {
-            console.error('Failed to load all sessions:', error);
-            // Fallback to localStorage
-            return JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
-        }
-    };
-
-    const deleteSessionData = async (chatId) => {
-        try {
-            if (useFirebase && firebaseDB) {
-                const { deleteDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
-                await deleteDoc(doc(firebaseDB, 'user_sessions', `${currentUserId}_${chatId}`));
-                console.log('Session deleted from Firebase:', chatId);
-            } else {
-                // Fallback to localStorage
-                const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
-                delete userSessions[chatId];
-                localStorage.setItem(`easyfarms_sessions_${currentUserId}`, JSON.stringify(userSessions));
-                console.log('Session deleted from localStorage:', chatId);
-            }
-        } catch (error) {
-            console.error('Failed to delete session data:', error);
-        }
-    };
-
-    // --- Initialization ---
-    const init = async () => {
-        if (!messageInput || !sendBtn || !imageUploadBtn || !imagePreviewContainer) {
-            console.error("Critical UI elements not found. Check HTML IDs.");
-            return;
-        }
-
-        // Initialize Firebase
-        firebase = await initializeFirebase();
-        
-        // Initialize user
-        await initializeUser();
-
-        await fetchConfig();
-        await loadCachedSessions();
-        await renderChatHistoryFromAPI();
-        setupSearchAndFilter();
-        setupUserStats();
-
-        // Event Listeners
-        sendBtn.addEventListener('click', sendMessage);
-        messageInput.addEventListener('keydown', e => { 
-            if (e.key === 'Enter' && !e.shiftKey) { 
-                e.preventDefault(); 
-                sendMessage(); 
-            } 
-        });
-        
-        imageUploadBtn.addEventListener('click', () => imageUploadInput.click());
-        imageUploadInput.addEventListener('change', handleImageSelect);
-        removeImageBtn.addEventListener('click', removeSelectedImage);
-
-        // Sidebar Listeners
-        newChatBtn.addEventListener('click', () => { startNewChat(); closeSidebar(); });
-        menuToggle.addEventListener('click', (event) => {
-            event.stopPropagation();
-            appContainer.classList.toggle('sidebar-visible');
-        });
-        closeSidebarBtn.addEventListener('click', (event) => {
-            event.stopPropagation();
-            closeSidebar();
-        });
-        chatArea.addEventListener('click', () => {
-            if (appContainer.classList.contains('sidebar-visible')) {
-                closeSidebar();
-            }
-        });
-
-        // Update last seen periodically
-        setInterval(updateLastSeen, 30000); // Every 30 seconds
-
-        console.log('EasyFarms Chat initialized with user authentication for user:', currentUserId);
-    };
-
-    const fetchConfig = async () => {
-        try {
-            const response = await fetch('https://nitinbot001-easybot.hf.space/config');
-            const config = await response.json();
-            imgbbApiKey = config.imgbb_api_key;
-            if (!imgbbApiKey) { 
-                console.error("ImgBB API Key is missing."); 
-            }
-        } catch (error) { 
-            console.error('Failed to fetch config:', error); 
-        }
-    };
-
-    const setupUserStats = () => {
-        // Create user stats div
-        if (!userStatsDiv) {
-            userStatsDiv = document.createElement('div');
-            userStatsDiv.className = 'user-stats';
-            userStatsDiv.style.cssText = `
-                padding: 16px;
-                margin: 16px 0 0 0;
-                background: var(--chat-area-color);
-                border-radius: 12px;
-                font-size: 0.85rem;
-                color: var(--text-secondary);
-                border: 1px solid var(--border-color);
-                line-height: 1.6;
-            `;
-            
-            // Insert at the bottom of sidebar
-            chatHistoryList.parentNode.appendChild(userStatsDiv);
-        }
-        
-        updateUserStats();
-    };
-
-    const updateUserStats = async () => {
-        try {
-            const response = await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}/stats`);
-            if (response.ok) {
-                const stats = await response.json();
-                userStatsDiv.innerHTML = `
-                    <div style="font-weight: 600; color: var(--text-color); margin-bottom: 8px; font-size: 0.9rem;">Your Stats</div>
-                    <div style="display: flex; flex-direction: column; gap: 4px;">
-                        <div style="display: flex; justify-content: space-between;">
-                            <span>Chats:</span>
-                            <span style="font-weight: 500; color: var(--text-color);">${stats.total_sessions || 0}</span>
-                        </div>
-                        <div style="display: flex; justify-content: space-between;">
-                            <span>Messages:</span>
-                            <span style="font-weight: 500; color: var(--text-color);">${stats.total_messages || 0}</span>
-                        </div>
-                        <div style="display: flex; justify-content: space-between;">
-                            <span>Recent:</span>
-                            <span style="font-weight: 500; color: var(--text-color);">${stats.recent_sessions_24h || 0}</span>
-                        </div>
-                    </div>
-                `;
-            }
-        } catch (error) {
-            console.error('Failed to update user stats:', error);
-            // Show basic local stats
-            const sessions = await loadAllSessions();
-            const sessionCount = Object.keys(sessions).length;
-            userStatsDiv.innerHTML = `
-                <div style="font-weight: 600; color: var(--text-color); margin-bottom: 8px; font-size: 0.9rem;">Local Stats</div>
-                <div style="display: flex; flex-direction: column; gap: 4px;">
-                    <div style="display: flex; justify-content: space-between;">
-                        <span>Chats:</span>
-                        <span style="font-weight: 500; color: var(--text-color);">${sessionCount}</span>
-                    </div>
-                    <div style="font-size: 0.8rem; margin-top: 4px; opacity: 0.7;">User: ${currentUserId.substr(0, 12)}...</div>
-                </div>
-            `;
-        }
-    };
-
-    const updateLastSeen = async () => {
-        try {
-            await saveUserData(currentUserId, {
-                last_seen: new Date().toISOString()
-            });
-        } catch (error) {
-            console.error('Failed to update last seen:', error);
-        }
-    };
-
-    const setupSearchAndFilter = () => {
-        // Create search input if it doesn't exist
-        if (!searchInput) {
-            searchInput = document.createElement('input');
-            searchInput.type = 'text';
-            searchInput.placeholder = 'Search chats...';
-            searchInput.className = 'search-input';
-            searchInput.style.cssText = `
-                width: 100%;
-                padding: 12px 16px;
-                margin: 0 0 16px 0;
-                border: 2px solid var(--border-color);
-                border-radius: 10px;
-                font-size: 0.9rem;
-                font-family: var(--font-family);
-                background: var(--chat-area-color);
-                color: var(--text-color);
-                outline: none;
-                transition: all 0.3s ease;
-            `;
-            
-            searchInput.addEventListener('focus', function() {
-                this.style.borderColor = 'var(--accent-color)';
-                this.style.boxShadow = '0 0 0 3px rgba(95, 116, 100, 0.1)';
-            });
-            searchInput.addEventListener('blur', function() {
-                this.style.borderColor = 'var(--border-color)';
-                this.style.boxShadow = 'none';
-            });
-            
-            chatHistoryList.parentNode.insertBefore(searchInput, chatHistoryList);
-        }
-
-        // Create clear all button if it doesn't exist
-        if (!clearAllBtn) {
-            clearAllBtn = document.createElement('button');
-            clearAllBtn.textContent = 'Clear All My Chats';
-            clearAllBtn.className = 'clear-all-btn';
-            clearAllBtn.style.cssText = `
-                width: 100%;
-                padding: 10px 16px;
-                margin: 0 0 16px 0;
-                background: transparent;
-                color: var(--danger-color);
-                border: 2px solid var(--danger-color);
-                border-radius: 10px;
-                cursor: pointer;
-                font-size: 0.85rem;
-                font-weight: 500;
-                font-family: var(--font-family);
-                transition: all 0.3s ease;
-            `;
-            
-            clearAllBtn.addEventListener('mouseenter', function() {
-                this.style.background = 'var(--danger-color)';
-                this.style.color = 'white';
-                this.style.transform = 'translateY(-1px)';
-                this.style.boxShadow = 'var(--shadow-md)';
-            });
-            clearAllBtn.addEventListener('mouseleave', function() {
-                this.style.background = 'transparent';
-                this.style.color = 'var(--danger-color)';
-                this.style.transform = 'translateY(0)';
-                this.style.boxShadow = 'none';
-            });
-            
-            searchInput.parentNode.insertBefore(clearAllBtn, chatHistoryList);
-        }
-
-        // Add event listeners
-        searchInput.addEventListener('input', filterChats);
-        clearAllBtn.addEventListener('click', confirmClearAllChats);
-    };
-
-    const filterChats = () => {
-        const searchTerm = searchInput.value.toLowerCase();
-        const chatItems = chatHistoryList.querySelectorAll('.chat-history-item');
-        
-        chatItems.forEach(item => {
-            const title = item.textContent.toLowerCase();
-            const shouldShow = title.includes(searchTerm);
-            item.style.display = shouldShow ? 'block' : 'none';
-        });
-        
-        console.log('Filtered chats with term:', searchTerm);
-    };
-
-    const confirmClearAllChats = () => {
-        if (confirm('Are you sure you want to delete all your chats? This action cannot be undone.')) {
-            clearAllChats();
-        }
-    };
-
-    const clearAllChats = async () => {
-        try {
-            // Delete all user chats from backend
-            const response = await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}/chats`, {
-                method: 'DELETE'
-            });
-            
-            if (response.ok) {
-                console.log('All chats deleted from backend for user:', currentUserId);
-            } else {
-                console.error('Failed to delete all chats from backend');
-            }
-            
-            // Clear local storage
-            const allSessions = await loadAllSessions();
-            const chatIds = Object.keys(allSessions);
-            
-            for (const chatId of chatIds) {
-                await deleteSessionData(chatId);
-            }
-            
-            // Clear UI and cache
-            conversationsCache = {};
-            chatHistoryList.innerHTML = '';
-            startNewChat();
-            updateUserStats();
-            
-            console.log('All chats cleared successfully for user:', currentUserId);
-        } catch (error) {
-            console.error('Failed to clear all chats:', error);
-        }
-    };
-
-    // --- Core Chat Functions ---
-    const sendMessage = async () => {
-        const messageText = messageInput.value.trim();
-        if (!messageText && !selectedImageFile) return;
-
-        // Display user message immediately
-        displayMessage({ 
-            role: 'user', 
-            content: messageText, 
-            imageUrl: selectedImageFile 
-        });
-
-        const loadingIndicator = displayMessage({ 
-            role: 'assistant', 
-            content: 'Thinking...', 
-            isLoading: true 
-        });
-
-        try {
-            let permanentImageUrl = null;
-            if (selectedImageFile) { 
-                permanentImageUrl = await uploadImageToImgBB(selectedImageFile); 
-            }
-
-            // Prepare request data with user ID
-            const requestData = {
-                query: messageText,
-                session_id: currentChatId,
-                user_id: currentUserId
-            };
-
-            if (permanentImageUrl) {
-                requestData.image_url = permanentImageUrl;
-            }
-
-            // Send to API endpoint
-            const response = await fetch('https://nitinbot001-easybot.hf.space/chat', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(requestData)
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-
-            const data = await response.json();
-            console.log('Chat response:', data);
-
-            // Remove loading indicator
-            chatMessages.removeChild(loadingIndicator);
-
-            // Display assistant response
-            displayMessage({ 
-                role: 'assistant', 
-                content: data.response,
-                message_id: data.assistant_message_id
-            });
-
-            // Update cache and UI
-            await updateCacheWithNewSystem(
-                data.chat_id,
-                { 
-                    content: messageText, 
-                    imageUrl: permanentImageUrl,
-                    message_id: data.user_message_id
-                },
-                { 
-                    content: data.response,
-                    message_id: data.assistant_message_id
-                },
-                data.is_new_chat
-            );
-
-            // Update stats
-            updateUserStats();
-
-        } catch (error) {
-            console.error('Error sending message:', error);
-            
-            // Remove loading indicator and show error
-            chatMessages.removeChild(loadingIndicator);
-            
-            // Display mock error response (don't save to database)
-            displayMessage({ 
-                role: 'assistant', 
-                content: "I apologize, but I'm having trouble connecting right now. Please check your internet connection and try again. Your chat session is still active.",
-                isError: true
-            });
-        } finally {
-            messageInput.value = ''; 
-            messageInput.style.height = 'auto'; 
-            removeSelectedImage();
-        }
-    };
-
-    const uploadImageToImgBB = async (imageFile) => {
-        if (!imgbbApiKey) throw new Error("ImgBB API Key not configured.");
-        
-        const formData = new FormData();
-        formData.append('image', imageFile);
-        formData.append('key', imgbbApiKey);
-        
-        const response = await fetch('https://api.imgbb.com/1/upload', { 
-            method: 'POST', 
-            body: formData 
-        });
-        
-        const result = await response.json();
-        if (result.success) { 
-            return result.data.url; 
-        } else { 
-            throw new Error(result.error.message || 'Image upload failed.'); 
-        }
-    };
-
-    // --- Chat Management ---
-    const startNewChat = () => {
-        currentChatId = null;
-        chatMessages.innerHTML = `<div class="welcome-message"><h1>EasyFarms Assistant</h1><p>User: ${currentUserId.substr(0, 16)}...</p></div>`;
-        chatTitle.textContent = "New Chat";
-        updateActiveChatItem();
-        console.log('Started new chat for user:', currentUserId);
-    };
-
-    const switchChat = async (chatId) => {
-        console.log('Switching to chat:', chatId, 'for user:', currentUserId);
-        currentChatId = chatId;
-        chatMessages.innerHTML = '';
-
-        // Check cache first
-        if (conversationsCache[chatId] && conversationsCache[chatId].messages) {
-            conversationsCache[chatId].messages.forEach(displayMessage);
-            chatTitle.textContent = conversationsCache[chatId].title || "Chat";
-        } else {
-            // Load from API
-            const loading = displayMessage({ 
-                role: 'assistant', 
-                content: 'Loading chat history...', 
-                isLoading: true 
-            });
-            
-            try {
-                const response = await fetch(`https://nitinbot001-easybot.hf.space/chat/${chatId}/messages?user_id=${currentUserId}`);
-                
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                
-                const messages = await response.json();
-                console.log('Loaded messages for chat:', chatId, messages);
-                
-                // Update cache
-                if (!conversationsCache[chatId]) conversationsCache[chatId] = {};
-                conversationsCache[chatId].messages = messages;
-                
-                // Save to storage
-                await saveSessionData(chatId, conversationsCache[chatId]);
-                
-                // Remove loading and display messages
-                chatMessages.removeChild(loading);
-                messages.forEach(displayMessage);
-                
-                // Set title from first user message or use cached title
-                const sessionData = await loadSessionData(chatId);
-                chatTitle.textContent = sessionData?.title || conversationsCache[chatId]?.title || "Chat";
-                
-            } catch (error) {
-                console.error('Failed to load chat history:', error);
-                chatMessages.removeChild(loading);
-                displayMessage({ 
-                    role: 'assistant', 
-                    content: "Failed to load chat history. Please try again.",
-                    isError: true
-                });
-            }
-        }
-        
-        updateActiveChatItem();
-        closeSidebar();
-    };
-
-    const deleteChat = async (chatId, chatItem) => {
-        if (!confirm('Are you sure you want to delete this chat?')) return;
-        
-        try {
-            // Delete from backend
-            const response = await fetch(`https://nitinbot001-easybot.hf.space/chat/${chatId}?user_id=${currentUserId}`, {
-                method: 'DELETE'
-            });
-            
-            if (response.ok) {
-                console.log('Chat deleted from backend:', chatId);
-            } else {
-                console.error('Failed to delete chat from backend:', chatId);
-            }
-            
-            // Delete from storage
-            await deleteSessionData(chatId);
-            
-            // Remove from cache
-            delete conversationsCache[chatId];
-            
-            // Remove from UI
-            chatItem.remove();
-            
-            // If this was the current chat, start a new one
-            if (currentChatId === chatId) {
-                startNewChat();
-            }
-            
-            console.log('Chat deleted successfully:', chatId);
-            updateUserStats();
-            
-        } catch (error) {
-            console.error('Error deleting chat:', error);
-            alert('Failed to delete chat. Please try again.');
-        }
-    };
-
-    const updateCacheWithNewSystem = async (chatId, userTurn, assistantTurn, isNewChat) => {
-        const previousChatId = currentChatId;
-        currentChatId = chatId;
-        
-        if (isNewChat || !conversationsCache[chatId]) {
-            const title = (userTurn.content || "Image Query").substring(0, 30) + '...';
-            conversationsCache[chatId] = { 
-                title, 
-                messages: [],
-                created_at: new Date().toISOString(),
-                user_id: currentUserId
-            };
-            
-            // Add to UI
-            const item = createChatHistoryItem(chatId, title);
-            chatHistoryList.prepend(item);
-            
-            console.log('Created new chat:', chatId, 'for user:', currentUserId);
-        }
-        
-        // Create message objects with IDs
-        const userMessage = { 
-            role: 'user', 
-            content: userTurn.content,
-            message_id: userTurn.message_id,
-            timestamp: new Date().toISOString()
-        };
-        if (userTurn.imageUrl) userMessage.imageUrl = userTurn.imageUrl;
-        
-        const assistantMessage = { 
-            role: 'assistant', 
-            content: assistantTurn.content,
-            message_id: assistantTurn.message_id,
-            timestamp: new Date().toISOString()
-        };
-        
-        // Add to cache
-        conversationsCache[chatId].messages.push(userMessage, assistantMessage);
-        conversationsCache[chatId].updated_at = new Date().toISOString();
-        conversationsCache[chatId].user_id = currentUserId;
-        
-        // Save to storage
-        await saveSessionData(chatId, conversationsCache[chatId]);
-        
-        updateActiveChatItem();
-        chatTitle.textContent = conversationsCache[chatId].title;
-        
-        console.log('Updated cache for chat:', chatId, 'user:', currentUserId);
-    };
-
-    const createChatHistoryItem = (chatId, title) => {
-        const item = document.createElement('div');
-        item.className = 'chat-history-item';
-        item.dataset.sessionId = chatId;
-        
-        // Create title element
-        const titleElement = document.createElement('span');
-        titleElement.textContent = title;
-        titleElement.className = 'chat-title';
-        
-        // Create delete button
-        const deleteBtn = document.createElement('button');
-        deleteBtn.innerHTML = '×';
-        deleteBtn.className = 'delete-chat-btn';
-        deleteBtn.style.cssText = `
-            float: right;
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            font-size: 20px;
-            padding: 4px;
-            width: 24px;
-            height: 24px;
-            line-height: 16px;
-            border-radius: 6px;
-            transition: all 0.3s ease;
-            opacity: 0;
-        `;
-        deleteBtn.title = 'Delete chat';
-        
-        deleteBtn.addEventListener('mouseenter', function() {
-            this.style.background = 'var(--danger-color)';
-            this.style.color = 'white';
-        });
-        deleteBtn.addEventListener('mouseleave', function() {
-            this.style.background = 'transparent';
-            this.style.color = 'var(--text-secondary)';
-        });
-        
-        // Add event listeners
-        titleElement.addEventListener('click', () => switchChat(chatId));
-        deleteBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            deleteChat(chatId, item);
-        });
-        
-        item.appendChild(titleElement);
-        item.appendChild(deleteBtn);
-        
-        // Show delete button on hover
-        item.addEventListener('mouseenter', function() {
-            deleteBtn.style.opacity = '1';
-        });
-        item.addEventListener('mouseleave', function() {
-            deleteBtn.style.opacity = '0';
-        });
-        
-        return item;
-    };
-
-    const loadCachedSessions = async () => {
-        try {
-            conversationsCache = await loadAllSessions();
-            console.log('Loaded cached sessions for user:', currentUserId, 'Count:', Object.keys(conversationsCache).length);
-        } catch (error) {
-            console.error('Failed to load cached sessions:', error);
-            conversationsCache = {};
-        }
-    };
-
-    const displayMessage = (message) => {
-        const { role, content, imageUrl, isLoading, isError, message_id } = message;
-        const sender = role || message.sender;
-        const messageDiv = document.createElement('div');
-        messageDiv.classList.add('message', `${sender}-message`);
-        
-        if (message_id) {
-            messageDiv.dataset.messageId = message_id;
-            console.log('Displayed message with ID:', message_id);
-        }
-        
-        let htmlContent = '';
-        const imageSrc = (typeof imageUrl === 'object' && imageUrl instanceof File) 
-            ? URL.createObjectURL(imageUrl) 
-            : imageUrl;
-            
-        if (imageSrc) { 
-            htmlContent += `<img src="${imageSrc}" alt="User upload" class="user-upload">`; 
-        }
-        if (content) { 
-            htmlContent += marked.parse(content); 
-        }
-        
-        messageDiv.innerHTML = htmlContent || (isLoading ? '...' : '');
-        
-        if (isLoading) messageDiv.classList.add('loading');
-        if (isError) messageDiv.classList.add('error');
-        
-        chatMessages.appendChild(messageDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-        
-        return messageDiv;
-    };
-
-    // --- Image Preview Handling ---
-    const handleImageSelect = (event) => {
-        const file = event.target.files[0];
-        if (file) {
-            selectedImageFile = file;
-            imagePreview.src = URL.createObjectURL(file);
-            imagePreviewContainer.style.display = 'block';
-            console.log('Image selected:', file.name);
-        }
-    };
-
-    const removeSelectedImage = () => {
-        selectedImageFile = null;
-        imageUploadInput.value = '';
-        imagePreviewContainer.style.display = 'none';
-        imagePreview.src = '#';
-        console.log('Image removed');
-    };
-
-    // --- API Integration ---
-    const renderChatHistoryFromAPI = async () => {
-        try {
-            const response = await fetch(`https://nitinbot001-easybot.hf.space/chats?user_id=${currentUserId}`);
-            
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            
-            const sessions = await response.json();
-            console.log('Loaded chat sessions from API for user:', currentUserId, sessions.length);
-            
-            chatHistoryList.innerHTML = '';
-            
-            // Sort by updated_at (most recent first)
-            sessions.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
-            
-            sessions.forEach(session => {
-                // Update cache
-                if (!conversationsCache[session.session_id]) {
-                    conversationsCache[session.session_id] = {};
-                }
-                conversationsCache[session.session_id].title = session.title;
-                conversationsCache[session.session_id].message_count = session.message_count;
-                conversationsCache[session.session_id].created_at = session.created_at;
-                conversationsCache[session.session_id].updated_at = session.updated_at;
-                conversationsCache[session.session_id].user_id = currentUserId;
-                
-                // Create UI item
-                const item = createChatHistoryItem(session.session_id, session.title);
-                chatHistoryList.appendChild(item);
-            });
-            
-            // Save updated cache
-            for (const [chatId, data] of Object.entries(conversationsCache)) {
-                if (data.user_id === currentUserId) {
-                    await saveSessionData(chatId, data);
-                }
-            }
-            
-            updateActiveChatItem();
-            updateUserStats();
-            
-        } catch (error) { 
-            console.error("Failed to render chat history from API:", error); 
-            
-            // Fallback to local cache
-            console.log('Falling back to local cache for user:', currentUserId);
-            for (const [chatId, data] of Object.entries(conversationsCache)) {
-                if (data.title && data.user_id === currentUserId) {
-                    const item = createChatHistoryItem(chatId, data.title);
-                    chatHistoryList.appendChild(item);
-                }
-            }
-        }
-    };
-
-    const updateActiveChatItem = () => {
-        document.querySelectorAll('.chat-history-item').forEach(item => {
-            item.classList.toggle('active', item.dataset.sessionId === currentChatId);
-        });
-    };
-
-    const closeSidebar = () => appContainer.classList.remove('sidebar-visible');
-
-    // --- User Account Management ---
-    const exportUserData = async () => {
-        try {
-            const response = await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}/export`);
-            if (response.ok) {
-                const userData = await response.json();
-                const dataStr = JSON.stringify(userData, null, 2);
-                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
-                
-                const exportFileDefaultName = `easyfarms_data_${currentUserId.substr(0, 8)}_${new Date().toISOString().split('T')[0]}.json`;
-                
-                const linkElement = document.createElement('a');
-                linkElement.setAttribute('href', dataUri);
-                linkElement.setAttribute('download', exportFileDefaultName);
-                linkElement.click();
-                
-                console.log('User data exported successfully');
-            } else {
-                throw new Error('Export failed');
-            }
-        } catch (error) {
-            console.error('Failed to export user data:', error);
-            alert('Failed to export data. Please try again.');
-        }
-    };
-
-    const deleteUserAccount = async () => {
-        if (!confirm('Are you sure you want to delete your account? This will permanently delete all your chats and data.')) {
-            return;
-        }
-        
-        if (!confirm('This action cannot be undone. Type "DELETE" to confirm:') || 
-            prompt('Type "DELETE" to confirm account deletion:') !== 'DELETE') {
-            return;
-        }
-        
-        try {
-            const response = await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}`, {
-                method: 'DELETE'
-            });
-            
-            if (response.ok) {
-                // Clear all local data
-                localStorage.removeItem('easyfarms_user_id');
-                localStorage.removeItem(`easyfarms_sessions_${currentUserId}`);
-                localStorage.removeItem(`easyfarms_users`);
-                
-                // Clear Firebase data if applicable
-                if (useFirebase && firebaseDB) {
-                    try {
-                        const { deleteDoc, doc, collection, getDocs, query, where } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
-                        
-                        // Delete user document
-                        await deleteDoc(doc(firebaseDB, 'users', currentUserId));
-                        
-                        // Delete user sessions
-                        const q = query(collection(firebaseDB, 'user_sessions'), where('userId', '==', currentUserId));
-                        const querySnapshot = await getDocs(q);
-                        querySnapshot.forEach(async (doc) => {
-                            await deleteDoc(doc.ref);
-                        });
-                        
-                    } catch (firebaseError) {
-                        console.error('Failed to clean Firebase data:', firebaseError);
-                    }
-                }
-                
-                alert('Account deleted successfully. Refreshing page...');
-                location.reload();
-                
-            } else {
-                throw new Error('Account deletion failed');
-            }
-            
-        } catch (error) {
-            console.error('Failed to delete account:', error);
-            alert('Failed to delete account. Please try again.');
-        }
-    };
-
-    const createUserMenu = () => {
-        // Create user menu button
-        const userMenuBtn = document.createElement('button');
-        userMenuBtn.innerHTML = '⚙️';
-        userMenuBtn.title = 'User Settings';
-        userMenuBtn.style.cssText = `
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: var(--accent-color);
-            color: white;
-            border: none;
-            border-radius: 12px;
-            width: 48px;
-            height: 48px;
-            cursor: pointer;
-            font-size: 18px;
-            z-index: 1000;
-            box-shadow: var(--shadow-md);
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        `;
-        
-        userMenuBtn.addEventListener('mouseenter', function() {
-            this.style.background = 'var(--accent-hover)';
-            this.style.transform = 'translateY(-2px)';
-            this.style.boxShadow = 'var(--shadow-lg)';
-        });
-        userMenuBtn.addEventListener('mouseleave', function() {
-            this.style.background = 'var(--accent-color)';
-            this.style.transform = 'translateY(0)';
-            this.style.boxShadow = 'var(--shadow-md)';
-        });
-        
-        // Create user menu dropdown
-        const userMenu = document.createElement('div');
-        userMenu.style.cssText = `
-            position: fixed;
-            top: 76px;
-            right: 20px;
-            background: var(--sidebar-color);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 16px;
-            box-shadow: var(--shadow-lg);
-            display: none;
-            z-index: 1001;
-            min-width: 220px;
-            animation: slideDown 0.3s ease;
-        `;
-        
-        userMenu.innerHTML = `
-            <div style="margin-bottom: 12px; font-weight: 600; font-size: 1rem; color: var(--text-color);">User Settings</div>
-            <div style="margin-bottom: 12px; font-size: 0.85rem; color: var(--text-secondary); padding: 8px; background: var(--chat-area-color); border-radius: 8px;">
-                ID: ${currentUserId.substr(0, 16)}...
-            </div>
-            <button id="export-data-btn" style="width: 100%; margin: 8px 0; padding: 10px; background: var(--accent-color); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; font-family: var(--font-family);">Export My Data</button>
-            <button id="delete-account-btn" style="width: 100%; margin: 8px 0; padding: 10px; background: var(--danger-color); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; font-family: var(--font-family);">Delete Account</button>
-        `;
-        
-        document.body.appendChild(userMenuBtn);
-        document.body.appendChild(userMenu);
-        
-        // Toggle menu
-        userMenuBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            userMenu.style.display = userMenu.style.display === 'none' ? 'block' : 'none';
-        });
-        
-        // Close menu when clicking outside
-        document.addEventListener('click', () => {
-            userMenu.style.display = 'none';
-        });
-        
-        // Menu actions
-        document.getElementById('export-data-btn').addEventListener('click', exportUserData);
-        document.getElementById('delete-account-btn').addEventListener('click', deleteUserAccount);
-    };
-
-    // --- Enhanced Error Handling ---
-    window.addEventListener('unhandledrejection', (event) => {
-        console.error('Unhandled promise rejection:', event.reason);
-        // Don't show error to user for now, just log it
-    });
-
-    window.addEventListener('error', (event) => {
-        console.error('Global error:', event.error);
-        // Don't show error to user for now, just log it
-    });
-
-    // --- Session Recovery ---
-    const attemptSessionRecovery = async () => {
-        try {
-            // Try to recover any unsaved messages
-            const unsavedMessages = localStorage.getItem(`unsaved_messages_${currentUserId}`);
-            if (unsavedMessages) {
-                const messages = JSON.parse(unsavedMessages);
-                console.log('Found unsaved messages, attempting recovery:', messages);
-                
-                // Display recovered messages
-                messages.forEach(msg => {
-                    displayMessage({
-                        role: msg.role,
-                        content: `[RECOVERED] ${msg.content}`,
-                        isError: true
-                    });
-                });
-                
-                // Clear unsaved messages
-                localStorage.removeItem(`unsaved_messages_${currentUserId}`);
-            }
-        } catch (error) {
-            console.error('Session recovery failed:', error);
-        }
-    };
-
-    const saveUnsavedMessage = (role, content) => {
-        try {
-            const unsavedMessages = JSON.parse(localStorage.getItem(`unsaved_messages_${currentUserId}`) || '[]');
-            unsavedMessages.push({
-                role,
-                content,
-                timestamp: new Date().toISOString()
-            });
-            
-            // Keep only last 5 unsaved messages
-            if (unsavedMessages.length > 5) {
-                unsavedMessages.splice(0, unsavedMessages.length - 5);
-            }
-            
-            localStorage.setItem(`unsaved_messages_${currentUserId}`, JSON.stringify(unsavedMessages));
-        } catch (error) {
-            console.error('Failed to save unsaved message:', error);
-        }
-    };
-
-    // --- Performance Monitoring ---
-    const logPerformance = () => {
-        if (performance && performance.timing) {
-            const perfData = performance.timing;
-            const loadTime = perfData.loadEventEnd - perfData.navigationStart;
-            console.log(`Page load time: ${loadTime}ms`);
-            
-            // Log to backend if needed
-            // fetch('/analytics/performance', {
-            //     method: 'POST',
-            //     body: JSON.stringify({ user_id: currentUserId, load_time: loadTime })
-            // });
-        }
-    };
-
-    // --- Initialize Everything ---
-    // Add user menu after initialization
-    const setupUserInterface = () => {
-        createUserMenu();
-        attemptSessionRecovery();
-        logPerformance();
-    };
-
-    // Start the Application
-    init().then(() => {
-        setupUserInterface();
-        console.log('EasyFarms Chat fully initialized for user:', currentUserId);
-    }).catch((error) => {
-        console.error('Failed to initialize application:', error);
-        document.body.innerHTML = `
-            <div style="padding: 20px; text-align: center;">
-                <h2>Failed to Load EasyFarms Chat</h2>
-                <p>Please refresh the page and try again.</p>
-                <p style="color: #666; font-size: 12px;">Error: ${error.message}</p>
-            </div>
-        `;
-    });
-
-});
-</script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dhara Agri AI Assistant</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --glass-bg: rgba(255, 255, 255, 0.15);
+    --glass-border: rgba(255, 255, 255, 0.25);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    --text-primary: #1a1a1a;
+    --text-secondary: #4a5568;
+    --accent-primary: #10b981;
+    --accent-secondary: #059669;
+    --danger: #ef4444;
+    --success: #22c55e;
+    --backdrop: rgba(0, 0, 0, 0.3);
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+* { 
+    box-sizing: border-box; 
+    margin: 0; 
+    padding: 0;
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    font-family: var(--font-family);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    background-attachment: fixed;
+    color: var(--text-primary);
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
+    background-size: cover;
+    pointer-events: none;
+}
+
+.app-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+/* Glass Sidebar */
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 85%;
+    max-width: 320px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-right: 1px solid var(--glass-border);
+    display: flex;
+    flex-direction: column;
+    padding: 20px 16px;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1000;
+    box-shadow: var(--glass-shadow);
+}
+
+.app-container.sidebar-visible .sidebar {
+    transform: translateX(0);
+}
+
+.sidebar-header {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.sidebar-button {
+    flex: 1;
+    padding: 14px 20px;
+    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    border: none;
+    border-radius: 14px;
+    color: white;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+    min-height: 48px;
+}
+
+.sidebar-button:active {
+    transform: scale(0.98);
+}
+
+.close-sidebar-btn {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    color: white;
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 12px;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.close-sidebar-btn:active {
+    transform: scale(0.95);
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Search and Filter */
+.search-input {
+    width: 100%;
+    padding: 14px 16px;
+    margin-bottom: 12px;
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    font-size: 0.95rem;
+    font-family: var(--font-family);
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(10px);
+    color: white;
+    outline: none;
+    transition: all 0.3s ease;
+    min-height: 48px;
+}
+
+.search-input::placeholder {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.search-input:focus {
+    background: rgba(255, 255, 255, 0.35);
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+.clear-all-btn {
+    width: 100%;
+    padding: 12px 16px;
+    margin-bottom: 16px;
+    background: rgba(239, 68, 68, 0.2);
+    backdrop-filter: blur(10px);
+    color: white;
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    min-height: 48px;
+}
+
+.clear-all-btn:active {
+    transform: scale(0.98);
+    background: rgba(239, 68, 68, 0.4);
+}
+
+/* Chat History */
+.chat-history { 
+    flex: 1;
+    overflow-y: auto; 
+    margin-top: 8px;
+    padding-right: 4px;
+    -webkit-overflow-scrolling: touch;
+}
+
+.chat-history::-webkit-scrollbar {
+    width: 4px;
+}
+
+.chat-history::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-history::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+}
+
+.chat-history-item {
+    padding: 14px 16px;
+    margin-bottom: 8px;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid transparent;
+    font-size: 0.95rem;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 48px;
+}
+
+.chat-history-item:active {
+    transform: scale(0.98);
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.chat-history-item.active { 
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
+    border-color: var(--accent-primary);
+    font-weight: 600;
+}
+
+.chat-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.delete-chat-btn {
+    background: rgba(239, 68, 68, 0.3);
+    backdrop-filter: blur(10px);
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 20px;
+    padding: 4px;
+    width: 32px;
+    height: 32px;
+    line-height: 24px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    opacity: 0.7;
+    flex-shrink: 0;
+    margin-left: 8px;
+}
+
+.chat-history-item:hover .delete-chat-btn,
+.chat-history-item:active .delete-chat-btn {
+    opacity: 1;
+}
+
+.delete-chat-btn:active {
+    transform: scale(0.9);
+    background: rgba(239, 68, 68, 0.5);
+}
+
+/* User Stats */
+.user-stats {
+    padding: 16px;
+    margin-top: 12px;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
+    font-size: 0.85rem;
+    color: white;
+    border: 1px solid var(--glass-border);
+    line-height: 1.6;
+}
+
+/* Main Chat Area */
+.chat-area {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.app-container.sidebar-visible .chat-area::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--backdrop);
+    backdrop-filter: blur(3px);
+    z-index: 999;
+}
+
+/* Glass Header */
+.chat-header { 
+    display: flex; 
+    align-items: center; 
+    padding: 16px 20px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
+    min-height: 64px;
+}
+
+.menu-toggle { 
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    color: white;
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 48px;
+    min-height: 48px;
+}
+
+.menu-toggle:active {
+    transform: scale(0.95);
+    background: rgba(255, 255, 255, 0.3);
+}
+
+#chat-title { 
+    margin-left: 16px;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: white;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Chat Messages with Overflow Fix */
+.chat-messages { 
+    flex: 1;
+    overflow-y: auto; 
+    overflow-x: hidden;
+    padding: 20px 16px 80px;
+    display: flex; 
+    flex-direction: column;
+    gap: 16px;
+    -webkit-overflow-scrolling: touch;
+}
+
+.chat-messages::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+.welcome-message { 
+    text-align: center; 
+    margin: auto;
+    padding: 40px 20px;
+}
+
+.welcome-message h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 12px;
+    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
+}
+
+.welcome-message p {
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 400;
+}
+
+/* Glass Messages with Overflow Control */
+.message { 
+    max-width: 90%;
+    padding: 16px 18px;
+    border-radius: 18px;
+    line-height: 1.6;
+    word-wrap: break-word;
+    font-size: 1rem;
+    box-shadow: var(--glass-shadow);
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+}
+
+/* Message Content Wrapper - Critical for overflow */
+.message > * {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.message p { 
+    margin: 0.6em 0;
+}
+
+.message ul, .message ol { 
+    padding-left: 20px;
+    margin: 0.6em 0;
+}
+
+.message li {
+    margin: 0.4em 0;
+}
+
+/* Table Overflow Fix - Most Important */
+.message table {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    border-collapse: collapse;
+    margin: 12px 0;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+}
+
+.message table::-webkit-scrollbar {
+    height: 6px;
+}
+
+.message table::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+}
+
+.message table::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+.message th,
+.message td {
+    padding: 10px 12px;
+    text-align: left;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    white-space: nowrap;
+    min-width: 100px;
+}
+
+.message th {
+    background: rgba(255, 255, 255, 0.1);
+    font-weight: 600;
+}
+
+.message code { 
+    background: rgba(0, 0, 0, 0.2);
+    padding: 3px 8px;
+    border-radius: 6px;
+    font-size: 0.9em;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-family: 'Monaco', 'Courier New', monospace;
+    display: inline-block;
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+.message pre { 
+    background: rgba(0, 0, 0, 0.3);
+    padding: 16px;
+    border-radius: 12px;
+    overflow-x: auto;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
+    margin: 12px 0;
+    -webkit-overflow-scrolling: touch;
+}
+
+.message pre::-webkit-scrollbar {
+    height: 6px;
+}
+
+.message pre::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+}
+
+.message pre::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+.message pre code {
+    background: none;
+    border: none;
+    padding: 0;
+    display: block;
+}
+
+.message img.user-upload { 
+    max-width: 100%;
+    height: auto;
+    border-radius: 12px;
+    margin-top: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.user-message { 
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));
+    align-self: flex-end;
+    border-bottom-right-radius: 6px;
+    color: white;
+}
+
+.assistant-message { 
+    background: rgba(255, 255, 255, 0.25);
+    align-self: flex-start;
+    border-bottom-left-radius: 6px;
+    color: white;
+}
+
+.assistant-message.loading::after { 
+    content: '...'; 
+    display: inline-block; 
+    animation: blink 1.2s infinite; 
+}
+
+@keyframes blink { 
+    0%, 100% { opacity: 0.3; }
+    50% { opacity: 1; } 
+}
+
+/* Glass Input Area - Fixed at Bottom */
+.chat-input-area { 
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-top: 1px solid var(--glass-border);
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+}
+
+.image-preview { 
+    position: relative;
+    width: 100px;
+    margin-bottom: 12px;
+}
+
+#image-preview { 
+    width: 100%;
+    border-radius: 12px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+#remove-image-btn {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    background: var(--danger);
+    color: white;
+    border: 2px solid white;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+#remove-image-btn:active {
+    transform: scale(0.9);
+}
+
+.chat-input-wrapper { 
+    display: flex;
+    align-items: flex-end;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 8px;
+    transition: all 0.3s ease;
+}
+
+.chat-input-wrapper:focus-within {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+#message-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 1rem;
+    font-family: var(--font-family);
+    padding: 12px 14px;
+    resize: none;
+    max-height: 120px;
+    overflow-y: auto;
+    outline: none;
+    line-height: 1.5;
+    min-height: 24px;
+}
+
+#message-input::placeholder {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.input-action-btn { 
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    color: white;
+    cursor: pointer;
+    min-width: 48px;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+}
+
+.input-action-btn:active {
+    transform: scale(0.95);
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.send-btn { 
+    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    border: none;
+    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+}
+
+.send-btn:active {
+    transform: scale(0.95);
+}
+
+/* User Menu Button - Glass Style */
+.user-menu-btn {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    color: white;
+    border: 1px solid var(--glass-border);
+    border-radius: 14px;
+    width: 48px;
+    height: 48px;
+    cursor: pointer;
+    font-size: 20px;
+    z-index: 0;
+    box-shadow: var(--glass-shadow);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.user-menu-btn:active {
+    transform: scale(0.95);
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.user-menu {
+    position: fixed;
+    top: 72px;
+    right: 16px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: var(--glass-shadow);
+    display: none;
+    z-index: 1002;
+    min-width: 240px;
+    max-width: calc(100vw - 32px);
+}
+
+.user-menu button {
+    width: 100%;
+    margin: 8px 0;
+    padding: 14px 16px;
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 0.95rem;
+    font-weight: 500;
+    font-family: var(--font-family);
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    min-height: 48px;
+}
+
+#export-data-btn {
+    background: rgba(16, 185, 129, 0.3);
+    color: white;
+}
+
+#export-data-btn:active {
+    transform: scale(0.98);
+    background: rgba(16, 185, 129, 0.5);
+}
+
+#delete-account-btn {
+    background: rgba(239, 68, 68, 0.3);
+    color: white;
+}
+
+#delete-account-btn:active {
+    transform: scale(0.98);
+    background: rgba(239, 68, 68, 0.5);
+}
+
+/* Desktop Optimizations */
+@media (min-width: 768px) {
+    .chat-header { display: none; }
+    
+    .sidebar { 
+        position: static;
+        transform: translateX(0);
+        width: 300px;
+        max-width: 300px;
+    }
+    
+    .close-sidebar-btn { display: none !important; }
+    
+    .app-container.sidebar-visible .chat-area::before { display: none; }
+    
+    .chat-area { 
+        flex: 1;
+    }
+    
+    .chat-messages {
+        padding: 40px 48px 100px;
+    }
+    
+    .chat-input-area {
+        position: static;
+        padding: 24px 48px 32px;
+    }
+    
+    .message {
+        max-width: 75%;
+    }
+    
+    .user-menu-btn {
+        top: 24px;
+        right: 24px;
+    }
+    
+    .user-menu {
+        top: 80px;
+        right: 24px;
+    }
+}
+
+/* Smooth Animations */
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message {
+    animation: slideIn 0.3s ease;
+}
+
+/* Loading States */
+.loading-shimmer {
+    background: linear-gradient(90deg, 
+        rgba(255, 255, 255, 0.1) 0%, 
+        rgba(255, 255, 255, 0.2) 50%, 
+        rgba(255, 255, 255, 0.1) 100%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+}
+
+/* Accessibility - High Contrast for readability */
+@media (prefers-contrast: high) {
+    :root {
+        --glass-bg: rgba(255, 255, 255, 0.3);
+        --text-primary: #000;
+    }
+    
+    .message {
+        border-width: 2px;
+    }
+}
+
+/* Reduce Motion */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+</style>
+</head>
+<body>
+    <div id="app-container" class="app-container">
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <button id="new-chat-btn" class="sidebar-button">
+                    <span class="icon">+</span> New Chat
+                </button>
+                <button id="close-sidebar-btn" class="close-sidebar-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
+                        <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+            </div>
+            <input type="text" class="search-input" placeholder="Search chats..." id="search-input">
+            <button class="clear-all-btn" id="clear-all-btn">Clear All My Chats</button>
+            <div class="chat-history" id="chat-history-list"></div>
+            <div class="user-stats" id="user-stats"></div>
+        </aside>
+
+        <main id="chat-area" class="chat-area">
+            <header class="chat-header">
+                <button id="menu-toggle" class="menu-toggle">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
+                        <path d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"></path>
+                    </svg>
+                </button>
+                <h2 id="chat-title">New Chat</h2>
+            </header>
+            
+            <div class="chat-messages" id="chat-messages">
+                <div class="welcome-message">
+                    <h1>🌾 Dhara Agri AI</h1>
+                    <p>Your smart farming assistant</p>
+                </div>
+            </div>
+            
+            <div class="chat-input-area">
+                <div class="image-preview" id="image-preview-container" style="display: none;">
+                    <img id="image-preview" src="#" alt="Image preview"/>
+                    <button id="remove-image-btn">&times;</button>
+                </div>
+                <div class="chat-input-wrapper">
+                    <input type="file" id="image-upload-input" accept="image/*" style="display: none;">
+                    <button id="image-upload-btn" class="input-action-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="22" height="22">
+                            <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd"></path>
+                        </svg>
+                    </button>
+                    <textarea id="message-input" placeholder="Ask about farming, crops..." rows="1"></textarea>
+                    <button id="send-btn" class="input-action-btn send-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="22" height="22">
+                            <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+document.addEventListener('DOMContentLoaded', () => {
+    
+    // DOM Elements
+    const chatArea = document.getElementById('chat-area');
+    const closeSidebarBtn = document.getElementById('close-sidebar-btn');
+    const messageInput = document.getElementById('message-input');
+    const sendBtn = document.getElementById('send-btn');
+    const newChatBtn = document.getElementById('new-chat-btn');
+    const chatMessages = document.getElementById('chat-messages');
+    const chatHistoryList = document.getElementById('chat-history-list');
+    const menuToggle = document.getElementById('menu-toggle');
+    const appContainer = document.getElementById('app-container');
+    const chatTitle = document.getElementById('chat-title');
+    const imageUploadBtn = document.getElementById('image-upload-btn');
+    const imageUploadInput = document.getElementById('image-upload-input');
+    const imagePreviewContainer = document.getElementById('image-preview-container');
+    const imagePreview = document.getElementById('image-preview');
+    const removeImageBtn = document.getElementById('remove-image-btn');
+    const searchInput = document.getElementById('search-input');
+    const clearAllBtn = document.getElementById('clear-all-btn');
+    const userStatsDiv = document.getElementById('user-stats');
+
+    // State
+    let currentChatId = null;
+    let currentUserId = null;
+    let conversationsCache = {};
+    let selectedImageFile = null;
+    let imgbbApiKey = '';
+    let firebase = null;
+    let firebaseDB = null;
+    let useFirebase = false;
+
+    // User Management
+    const generateUserFingerprint = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        ctx.textBaseline = 'top';
+        ctx.font = '14px Arial';
+        ctx.fillText('Device fingerprint', 2, 2);
+        
+        const fingerprint = [
+            navigator.userAgent,
+            navigator.language,
+            navigator.platform,
+            navigator.cookieEnabled,
+            navigator.doNotTrack,
+            screen.width + 'x' + screen.height,
+            screen.colorDepth,
+            new Date().getTimezoneOffset(),
+            canvas.toDataURL(),
+            navigator.hardwareConcurrency || 'unknown',
+            navigator.deviceMemory || 'unknown'
+        ].join('|');
+        
+        return hashCode(fingerprint).toString();
+    };
+
+    const hashCode = (str) => {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash;
+        }
+        return Math.abs(hash);
+    };
+
+    const initializeUser = async () => {
+        let userId = localStorage.getItem('easyfarms_user_id');
+        
+        if (!userId) {
+            const deviceFingerprint = generateUserFingerprint();
+            const timestamp = Date.now();
+            const randomPart = Math.random().toString(36).substr(2, 8);
+            
+            userId = `user_${deviceFingerprint}_${timestamp}_${randomPart}`;
+            localStorage.setItem('easyfarms_user_id', userId);
+            console.log('Generated new user ID:', userId);
+        }
+        
+        currentUserId = userId;
+        
+        if (useFirebase && firebaseDB) {
+            try {
+                await saveUserData(userId, {
+                    created_at: new Date().toISOString(),
+                    device_fingerprint: generateUserFingerprint(),
+                    last_seen: new Date().toISOString()
+                });
+            } catch (error) {
+                console.error('Failed to save user data to Firebase:', error);
+            }
+        }
+        
+        return userId;
+    };
+
+    const saveUserData = async (userId, userData) => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { setDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                await setDoc(doc(firebaseDB, 'users', userId), {
+                    ...userData,
+                    updatedAt: new Date().toISOString()
+                });
+            } else {
+                const users = JSON.parse(localStorage.getItem('easyfarms_users') || '{}');
+                users[userId] = {
+                    ...userData,
+                    updatedAt: new Date().toISOString()
+                };
+                localStorage.setItem('easyfarms_users', JSON.stringify(users));
+            }
+        } catch (error) {
+            console.error('Failed to save user data:', error);
+        }
+    };
+
+    // Storage Management
+    const saveSessionData = async (chatId, data) => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { setDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                await setDoc(doc(firebaseDB, 'user_sessions', `${currentUserId}_${chatId}`), {
+                    ...data,
+                    userId: currentUserId,
+                    chatId: chatId,
+                    updatedAt: new Date().toISOString()
+                });
+            } else {
+                const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
+                userSessions[chatId] = {
+                    ...data,
+                    userId: currentUserId,
+                    updatedAt: new Date().toISOString()
+                };
+                localStorage.setItem(`easyfarms_sessions_${currentUserId}`, JSON.stringify(userSessions));
+            }
+        } catch (error) {
+            console.error('Failed to save session data:', error);
+        }
+    };
+
+    const loadAllSessions = async () => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { getDocs, collection, query, where } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                const q = query(collection(firebaseDB, 'user_sessions'), where('userId', '==', currentUserId));
+                const querySnapshot = await getDocs(q);
+                const sessions = {};
+                querySnapshot.forEach((doc) => {
+                    const data = doc.data();
+                    sessions[data.chatId] = data;
+                });
+                return sessions;
+            } else {
+                return JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
+            }
+        } catch (error) {
+            console.error('Failed to load all sessions:', error);
+            return JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
+        }
+    };
+
+    const deleteSessionData = async (chatId) => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { deleteDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                await deleteDoc(doc(firebaseDB, 'user_sessions', `${currentUserId}_${chatId}`));
+            } else {
+                const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
+                delete userSessions[chatId];
+                localStorage.setItem(`easyfarms_sessions_${currentUserId}`, JSON.stringify(userSessions));
+            }
+        } catch (error) {
+            console.error('Failed to delete session data:', error);
+        }
+    };
+
+    // Core Functions
+    const init = async () => {
+        await initializeUser();
+        await fetchConfig();
+        await loadCachedSessions();
+        await renderChatHistoryFromAPI();
+        setupEventListeners();
+        updateUserStats();
+        createUserMenu();
+        console.log('App initialized for user:', currentUserId);
+    };
+
+    const fetchConfig = async () => {
+        try {
+            const response = await fetch('https://nitinbot001-easybot.hf.space/config');
+            const config = await response.json();
+            imgbbApiKey = config.imgbb_api_key;
+        } catch (error) {
+            console.error('Failed to fetch config:', error);
+        }
+    };
+
+    const setupEventListeners = () => {
+        sendBtn.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keydown', e => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+        
+        imageUploadBtn.addEventListener('click', () => imageUploadInput.click());
+        imageUploadInput.addEventListener('change', handleImageSelect);
+        removeImageBtn.addEventListener('click', removeSelectedImage);
+        newChatBtn.addEventListener('click', () => { startNewChat(); closeSidebar(); });
+        menuToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            appContainer.classList.toggle('sidebar-visible');
+        });
+        closeSidebarBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            closeSidebar();
+        });
+        chatArea.addEventListener('click', () => {
+            if (appContainer.classList.contains('sidebar-visible')) {
+                closeSidebar();
+            }
+        });
+        searchInput.addEventListener('input', filterChats);
+        clearAllBtn.addEventListener('click', confirmClearAllChats);
+    };
+
+    const sendMessage = async () => {
+        const messageText = messageInput.value.trim();
+        if (!messageText && !selectedImageFile) return;
+
+        displayMessage({
+            role: 'user',
+            content: messageText,
+            imageUrl: selectedImageFile
+        });
+
+        const loadingIndicator = displayMessage({
+            role: 'assistant',
+            content: 'Thinking...',
+            isLoading: true
+        });
+
+        try {
+            let permanentImageUrl = null;
+            if (selectedImageFile) {
+                permanentImageUrl = await uploadImageToImgBB(selectedImageFile);
+            }
+
+            const requestData = {
+                query: messageText,
+                session_id: currentChatId,
+                user_id: currentUserId
+            };
+
+            if (permanentImageUrl) {
+                requestData.image_url = permanentImageUrl;
+            }
+
+            const response = await fetch('https://nitinbot001-easybot.hf.space/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(requestData)
+            });
+
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+            const data = await response.json();
+            chatMessages.removeChild(loadingIndicator);
+
+            displayMessage({
+                role: 'assistant',
+                content: data.response,
+                message_id: data.assistant_message_id
+            });
+
+            await updateCacheWithNewSystem(
+                data.chat_id,
+                {
+                    content: messageText,
+                    imageUrl: permanentImageUrl,
+                    message_id: data.user_message_id
+                },
+                {
+                    content: data.response,
+                    message_id: data.assistant_message_id
+                },
+                data.is_new_chat
+            );
+
+            updateUserStats();
+
+        } catch (error) {
+            console.error('Error sending message:', error);
+            chatMessages.removeChild(loadingIndicator);
+            displayMessage({
+                role: 'assistant',
+                content: "I apologize, but I'm having trouble connecting right now. Please check your internet connection and try again.",
+                isError: true
+            });
+        } finally {
+            messageInput.value = '';
+            messageInput.style.height = 'auto';
+            removeSelectedImage();
+        }
+    };
+
+    const uploadImageToImgBB = async (imageFile) => {
+        if (!imgbbApiKey) throw new Error("ImgBB API Key not configured.");
+        
+        const formData = new FormData();
+        formData.append('image', imageFile);
+        formData.append('key', imgbbApiKey);
+        
+        const response = await fetch('https://api.imgbb.com/1/upload', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const result = await response.json();
+        if (result.success) {
+            return result.data.url;
+        } else {
+            throw new Error(result.error.message || 'Image upload failed.');
+        }
+    };
+
+    const displayMessage = (message) => {
+        const { role, content, imageUrl, isLoading, isError, message_id } = message;
+        const sender = role || message.sender;
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message', `${sender}-message`);
+        
+        if (message_id) messageDiv.dataset.messageId = message_id;
+        
+        let htmlContent = '';
+        const imageSrc = (typeof imageUrl === 'object' && imageUrl instanceof File)
+            ? URL.createObjectURL(imageUrl)
+            : imageUrl;
+            
+        if (imageSrc) {
+            htmlContent += `<img src="${imageSrc}" alt="User upload" class="user-upload">`;
+        }
+        if (content) {
+            htmlContent += marked.parse(content);
+        }
+        
+        messageDiv.innerHTML = htmlContent || (isLoading ? '...' : '');
+        
+        if (isLoading) messageDiv.classList.add('loading');
+        if (isError) messageDiv.classList.add('error');
+        
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        return messageDiv;
+    };
+
+    const startNewChat = () => {
+        currentChatId = null;
+        chatMessages.innerHTML = `<div class="welcome-message"><h1>🌾 Dhara Agri AI</h1><p>Your smart farming assistant</p></div>`;
+        chatTitle.textContent = "New Chat";
+        updateActiveChatItem();
+    };
+
+    const switchChat = async (chatId) => {
+        currentChatId = chatId;
+        chatMessages.innerHTML = '';
+
+        if (conversationsCache[chatId] && conversationsCache[chatId].messages) {
+            conversationsCache[chatId].messages.forEach(displayMessage);
+            chatTitle.textContent = conversationsCache[chatId].title || "Chat";
+        } else {
+            const loading = displayMessage({
+                role: 'assistant',
+                content: 'Loading chat history...',
+                isLoading: true
+            });
+            
+            try {
+                const response = await fetch(`https://nitinbot001-easybot.hf.space/chat/${chatId}/messages?user_id=${currentUserId}`);
+                
+                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+                
+                const messages = await response.json();
+                
+                if (!conversationsCache[chatId]) conversationsCache[chatId] = {};
+                conversationsCache[chatId].messages = messages;
+                
+                await saveSessionData(chatId, conversationsCache[chatId]);
+                
+                chatMessages.removeChild(loading);
+                messages.forEach(displayMessage);
+                
+                const sessionData = await loadSessionData(chatId);
+                chatTitle.textContent = sessionData?.title || conversationsCache[chatId]?.title || "Chat";
+                
+            } catch (error) {
+                console.error('Failed to load chat history:', error);
+                chatMessages.removeChild(loading);
+                displayMessage({
+                    role: 'assistant',
+                    content: "Failed to load chat history. Please try again.",
+                    isError: true
+                });
+            }
+        }
+        
+        updateActiveChatItem();
+        closeSidebar();
+    };
+
+    const loadSessionData = async (chatId) => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { getDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                const docRef = doc(firebaseDB, 'user_sessions', `${currentUserId}_${chatId}`);
+                const docSnap = await getDoc(docRef);
+                if (docSnap.exists()) return docSnap.data();
+            } else {
+                const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
+                return userSessions[chatId] || null;
+            }
+            return null;
+        } catch (error) {
+            const userSessions = JSON.parse(localStorage.getItem(`easyfarms_sessions_${currentUserId}`) || '{}');
+            return userSessions[chatId] || null;
+        }
+    };
+
+    const deleteChat = async (chatId, chatItem) => {
+        if (!confirm('Are you sure you want to delete this chat?')) return;
+        
+        try {
+            const response = await fetch(`https://nitinbot001-easybot.hf.space/chat/${chatId}?user_id=${currentUserId}`, {
+                method: 'DELETE'
+            });
+            
+            await deleteSessionData(chatId);
+            delete conversationsCache[chatId];
+            chatItem.remove();
+            
+            if (currentChatId === chatId) startNewChat();
+            
+            updateUserStats();
+            
+        } catch (error) {
+            console.error('Error deleting chat:', error);
+            alert('Failed to delete chat. Please try again.');
+        }
+    };
+
+    const updateCacheWithNewSystem = async (chatId, userTurn, assistantTurn, isNewChat) => {
+        currentChatId = chatId;
+        
+        if (isNewChat || !conversationsCache[chatId]) {
+            const title = (userTurn.content || "Image Query").substring(0, 30) + '...';
+            conversationsCache[chatId] = {
+                title,
+                messages: [],
+                created_at: new Date().toISOString(),
+                user_id: currentUserId
+            };
+            
+            const item = createChatHistoryItem(chatId, title);
+            chatHistoryList.prepend(item);
+        }
+        
+        const userMessage = {
+            role: 'user',
+            content: userTurn.content,
+            message_id: userTurn.message_id,
+            timestamp: new Date().toISOString()
+        };
+        if (userTurn.imageUrl) userMessage.imageUrl = userTurn.imageUrl;
+        
+        const assistantMessage = {
+            role: 'assistant',
+            content: assistantTurn.content,
+            message_id: assistantTurn.message_id,
+            timestamp: new Date().toISOString()
+        };
+        
+        conversationsCache[chatId].messages.push(userMessage, assistantMessage);
+        conversationsCache[chatId].updated_at = new Date().toISOString();
+        conversationsCache[chatId].user_id = currentUserId;
+        
+        await saveSessionData(chatId, conversationsCache[chatId]);
+        
+        updateActiveChatItem();
+        chatTitle.textContent = conversationsCache[chatId].title;
+    };
+
+    const createChatHistoryItem = (chatId, title) => {
+        const item = document.createElement('div');
+        item.className = 'chat-history-item';
+        item.dataset.sessionId = chatId;
+        
+        const titleElement = document.createElement('span');
+        titleElement.textContent = title;
+        titleElement.className = 'chat-title';
+        
+        const deleteBtn = document.createElement('button');
+        deleteBtn.innerHTML = '×';
+        deleteBtn.className = 'delete-chat-btn';
+        deleteBtn.title = 'Delete chat';
+        
+        titleElement.addEventListener('click', () => switchChat(chatId));
+        deleteBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            deleteChat(chatId, item);
+        });
+        
+        item.appendChild(titleElement);
+        item.appendChild(deleteBtn);
+        
+        return item;
+    };
+
+    const loadCachedSessions = async () => {
+        try {
+            conversationsCache = await loadAllSessions();
+        } catch (error) {
+            conversationsCache = {};
+        }
+    };
+
+    const renderChatHistoryFromAPI = async () => {
+        try {
+            const response = await fetch(`https://nitinbot001-easybot.hf.space/chats?user_id=${currentUserId}`);
+            
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            
+            const sessions = await response.json();
+            chatHistoryList.innerHTML = '';
+            
+            sessions.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+            
+            sessions.forEach(session => {
+                if (!conversationsCache[session.session_id]) {
+                    conversationsCache[session.session_id] = {};
+                }
+                conversationsCache[session.session_id].title = session.title;
+                conversationsCache[session.session_id].message_count = session.message_count;
+                conversationsCache[session.session_id].created_at = session.created_at;
+                conversationsCache[session.session_id].updated_at = session.updated_at;
+                conversationsCache[session.session_id].user_id = currentUserId;
+                
+                const item = createChatHistoryItem(session.session_id, session.title);
+                chatHistoryList.appendChild(item);
+            });
+            
+            for (const [chatId, data] of Object.entries(conversationsCache)) {
+                if (data.user_id === currentUserId) {
+                    await saveSessionData(chatId, data);
+                }
+            }
+            
+            updateActiveChatItem();
+            updateUserStats();
+            
+        } catch (error) {
+            console.error("Failed to render chat history from API:", error);
+            for (const [chatId, data] of Object.entries(conversationsCache)) {
+                if (data.title && data.user_id === currentUserId) {
+                    const item = createChatHistoryItem(chatId, data.title);
+                    chatHistoryList.appendChild(item);
+                }
+            }
+        }
+    };
+
+    const updateUserStats = async () => {
+        try {
+            const response = await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}/stats`);
+            if (response.ok) {
+                const stats = await response.json();
+                userStatsDiv.innerHTML = `
+                    <div style="font-weight: 600; color: white; margin-bottom: 10px; font-size: 0.95rem;">📊 Your Stats</div>
+                    <div style="display: flex; flex-direction: column; gap: 6px; color: rgba(255,255,255,0.9);">
+                        <div style="display: flex; justify-content: space-between;">
+                            <span>Chats:</span>
+                            <span style="font-weight: 600;">${stats.total_sessions || 0}</span>
+                        </div>
+                        <div style="display: flex; justify-content: space-between;">
+                            <span>Messages:</span>
+                            <span style="font-weight: 600;">${stats.total_messages || 0}</span>
+                        </div>
+                        <div style="display: flex; justify-content: space-between;">
+                            <span>Recent:</span>
+                            <span style="font-weight: 600;">${stats.recent_sessions_24h || 0}</span>
+                        </div>
+                    </div>
+                `;
+            }
+        } catch (error) {
+            const sessions = await loadAllSessions();
+            userStatsDiv.innerHTML = `
+                <div style="font-weight: 600; color: white; margin-bottom: 10px; font-size: 0.95rem;">📊 Local Stats</div>
+                <div style="color: rgba(255,255,255,0.9);">
+                    <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
+                        <span>Chats:</span>
+                        <span style="font-weight: 600;">${Object.keys(sessions).length}</span>
+                    </div>
+                    <div style="font-size: 0.75rem; margin-top: 8px; opacity: 0.7;">ID: ${currentUserId.substr(0, 12)}...</div>
+                </div>
+            `;
+        }
+    };
+
+    const filterChats = () => {
+        const searchTerm = searchInput.value.toLowerCase();
+        const chatItems = chatHistoryList.querySelectorAll('.chat-history-item');
+        
+        chatItems.forEach(item => {
+            const title = item.textContent.toLowerCase();
+            item.style.display = title.includes(searchTerm) ? 'flex' : 'none';
+        });
+    };
+
+    const confirmClearAllChats = () => {
+        if (confirm('Are you sure you want to delete all your chats? This action cannot be undone.')) {
+            clearAllChats();
+        }
+    };
+
+    const clearAllChats = async () => {
+        try {
+            await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}/chats`, {
+                method: 'DELETE'
+            });
+            
+            const allSessions = await loadAllSessions();
+            for (const chatId of Object.keys(allSessions)) {
+                await deleteSessionData(chatId);
+            }
+            
+            conversationsCache = {};
+            chatHistoryList.innerHTML = '';
+            startNewChat();
+            updateUserStats();
+            
+        } catch (error) {
+            console.error('Failed to clear all chats:', error);
+        }
+    };
+
+    const handleImageSelect = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            selectedImageFile = file;
+            imagePreview.src = URL.createObjectURL(file);
+            imagePreviewContainer.style.display = 'block';
+        }
+    };
+
+    const removeSelectedImage = () => {
+        selectedImageFile = null;
+        imageUploadInput.value = '';
+        imagePreviewContainer.style.display = 'none';
+        imagePreview.src = '#';
+    };
+
+    const updateActiveChatItem = () => {
+        document.querySelectorAll('.chat-history-item').forEach(item => {
+            item.classList.toggle('active', item.dataset.sessionId === currentChatId);
+        });
+    };
+
+    const closeSidebar = () => appContainer.classList.remove('sidebar-visible');
+
+    const createUserMenu = () => {
+        const userMenuBtn = document.createElement('button');
+        userMenuBtn.className = 'user-menu-btn';
+        userMenuBtn.innerHTML = '⚙️';
+        userMenuBtn.title = 'Settings';
+        
+        const userMenu = document.createElement('div');
+        userMenu.className = 'user-menu';
+        userMenu.innerHTML = `
+            <div style="margin-bottom: 12px; font-weight: 600; font-size: 1rem; color: white;">Settings</div>
+            <div style="margin-bottom: 12px; font-size: 0.85rem; color: rgba(255,255,255,0.8); padding: 10px; background: rgba(255,255,255,0.1); border-radius: 8px; word-break: break-all;">
+                ID: ${currentUserId.substr(0, 20)}...
+            </div>
+            <button id="export-data-btn">📥 Export My Data</button>
+            <button id="delete-account-btn">🗑️ Delete Account</button>
+        `;
+        
+        document.body.appendChild(userMenuBtn);
+        document.body.appendChild(userMenu);
+        
+        userMenuBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            userMenu.style.display = userMenu.style.display === 'none' ? 'block' : 'none';
+        });
+        
+        document.addEventListener('click', () => {
+            userMenu.style.display = 'none';
+        });
+        
+        document.getElementById('export-data-btn').addEventListener('click', exportUserData);
+        document.getElementById('delete-account-btn').addEventListener('click', deleteUserAccount);
+    };
+
+    const exportUserData = async () => {
+        try {
+            const response = await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}/export`);
+            if (response.ok) {
+                const userData = await response.json();
+                const dataStr = JSON.stringify(userData, null, 2);
+                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
+                
+                const linkElement = document.createElement('a');
+                linkElement.setAttribute('href', dataUri);
+                linkElement.setAttribute('download', `easyfarms_data_${currentUserId.substr(0, 8)}_${new Date().toISOString().split('T')[0]}.json`);
+                linkElement.click();
+            }
+        } catch (error) {
+            console.error('Failed to export user data:', error);
+            alert('Failed to export data. Please try again.');
+        }
+    };
+
+    const deleteUserAccount = async () => {
+        if (!confirm('Are you sure you want to delete your account? This will permanently delete all your chats and data.')) {
+            return;
+        }
+        
+        if (prompt('Type "DELETE" to confirm account deletion:') !== 'DELETE') {
+            return;
+        }
+        
+        try {
+            const response = await fetch(`https://nitinbot001-easybot.hf.space/users/${currentUserId}`, {
+                method: 'DELETE'
+            });
+            
+            if (response.ok) {
+                localStorage.removeItem('easyfarms_user_id');
+                localStorage.removeItem(`easyfarms_sessions_${currentUserId}`);
+                localStorage.removeItem(`easyfarms_users`);
+                
+                if (useFirebase && firebaseDB) {
+                    try {
+                        const { deleteDoc, doc, collection, getDocs, query, where } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                        await deleteDoc(doc(firebaseDB, 'users', currentUserId));
+                        const q = query(collection(firebaseDB, 'user_sessions'), where('userId', '==', currentUserId));
+                        const querySnapshot = await getDocs(q);
+                        querySnapshot.forEach(async (doc) => {
+                            await deleteDoc(doc.ref);
+                        });
+                    } catch (firebaseError) {
+                        console.error('Failed to clean Firebase data:', firebaseError);
+                    }
+                }
+                
+                alert('Account deleted successfully. Refreshing page...');
+                location.reload();
+            } else {
+                throw new Error('Account deletion failed');
+            }
+        } catch (error) {
+            console.error('Failed to delete account:', error);
+            alert('Failed to delete account. Please try again.');
+        }
+    };
+
+    // Auto-resize textarea
+    messageInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+    });
+
+    // Swipe to close sidebar on mobile
+    let touchStartX = 0;
+    let touchEndX = 0;
+    
+    const sidebar = document.querySelector('.sidebar');
+    sidebar.addEventListener('touchstart', (e) => {
+        touchStartX = e.changedTouches[0].screenX;
+    });
+    
+    sidebar.addEventListener('touchend', (e) => {
+        touchEndX = e.changedTouches[0].screenX;
+        if (touchStartX - touchEndX > 50) {
+            closeSidebar();
+        }
+    });
+
+    // Pull to refresh simulation (visual feedback only)
+    let pullStartY = 0;
+    let isPulling = false;
+    
+    chatMessages.addEventListener('touchstart', (e) => {
+        if (chatMessages.scrollTop === 0) {
+            pullStartY = e.touches[0].clientY;
+            isPulling = true;
+        }
+    });
+    
+    chatMessages.addEventListener('touchmove', (e) => {
+        if (isPulling && chatMessages.scrollTop === 0) {
+            const pullDistance = e.touches[0].clientY - pullStartY;
+            if (pullDistance > 80) {
+                renderChatHistoryFromAPI();
+                isPulling = false;
+            }
+        }
+    });
+    
+    chatMessages.addEventListener('touchend', () => {
+        isPulling = false;
+    });
+
+    // Haptic feedback simulation (visual scale effect)
+    const addHapticFeedback = (element) => {
+        element.addEventListener('touchstart', function() {
+            this.style.transform = 'scale(0.98)';
+        });
+        element.addEventListener('touchend', function() {
+            this.style.transform = '';
+        });
+    };
+
+    // Apply haptic feedback to all buttons
+    document.querySelectorAll('button').forEach(addHapticFeedback);
+
+    // Prevent zoom on double tap for iOS
+    let lastTouchEnd = 0;
+    document.addEventListener('touchend', (e) => {
+        const now = Date.now();
+        if (now - lastTouchEnd <= 300) {
+            e.preventDefault();
+        }
+        lastTouchEnd = now;
+    }, false);
+
+    // Service Worker registration for PWA capabilities (optional)
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js').catch(() => {
+            console.log('Service Worker registration skipped');
+        });
+    }
+
+    // Online/Offline detection
+    window.addEventListener('online', () => {
+        console.log('Connection restored');
+        renderChatHistoryFromAPI();
+    });
+
+    window.addEventListener('offline', () => {
+        console.log('Connection lost - using offline mode');
+    });
+
+    // Visibility change - update stats when user returns
+    document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+            updateUserStats();
+        }
+    });
+
+    // Initialize app
+    init().catch((error) => {
+        console.error('Failed to initialize application:', error);
+        document.body.innerHTML = `
+            <div style="padding: 40px 20px; text-align: center; color: white;">
+                <h2 style="margin-bottom: 16px; font-size: 1.5rem;">Failed to Load</h2>
+                <p style="margin-bottom: 20px;">Please refresh the page and try again.</p>
+                <p style="color: rgba(255,255,255,0.7); font-size: 0.85rem;">Error: ${error.message}</p>
+                <button onclick="location.reload()" style="margin-top: 20px; padding: 12px 24px; background: linear-gradient(135deg, #10b981, #059669); border: none; border-radius: 12px; color: white; font-size: 1rem; font-weight: 600; cursor: pointer;">Refresh Page</button>
+            </div>
+        `;
+    });
+
+});
+</script>
+</body>
 </html>
\ No newline at end of file
