Awaken your AI.

Design a world-class AI agent.
No code. Just pure human connection.

Identity.

Every intelligence needs a name. What is yours called?

Neural Link.

Securely attach your Gemini API key. Runs locally on your device.

Give it a soul.

The System Prompt dictates its behavior. Who is this AI?

Final Polish.

Select an avatar and teach it the languages of the world.

Select Avatar Identity

Languages Supported

Tagline

Thinking Text

It is alive.

Your custom AI has been safely packed. Extract the ZIP folder and open index.html to meet your creation.

<!DOCTYPE html> <html lang="{{APP_LANG}}"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover"> <title>{{BRAND_NAME}}</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600&family=Geist+Mono:wght@500;600&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@latest"></script> <link rel="stylesheet" href="style.css"> </head> <body class="light-mode theme-transition"> <div id="offline-banner" class="offline-banner hidden"> <i data-lucide="wifi-off" size="16"></i> <span>Oops! 🤖 I’m currently offline… probably grabbing some digital coffee. Try again in a moment!</span> </div> <div id="app-container"> <header id="top-header" class="glass-header"> <button id="history-toggle" class="icon-btn"><i data-lucide="align-left"></i></button> <div id="home-logo" class="brand-area" title="Navigate to Home Base"> <span class="brand-text">{{BRAND_NAME}}</span> </div> <button id="theme-toggle" class="icon-btn"><i data-lucide="moon"></i></button> </header> <main id="chat-canvas" class="scroll-hidden"> <div id="hero-section"> <div class="hero-content-open"> <img src="logo.png" alt="{{BRAND_NAME}}" class="hero-logo-img"> <p class="hero-subtitle">{{HERO_SUBTITLE}}</p> </div> </div> <div id="messages-container" class="hidden"></div> <div id="loading-indicator" class="loading-container hidden"> <div class="liquid-loader"> <div class="loader-bar"></div> <div class="loader-bar"></div> <div class="loader-bar"></div> </div> <span class="loading-text" id="loading-status-text">{{LOADING_TEXT}}</span> </div> </main> <footer id="bottom-dock"> <div id="search-bar-trigger" class="glass-search-bar"> <div class="search-content"> <i data-lucide="search" class="search-icon"></i> <div class="typewriter-container"> <span id="typewriter-text" class="placeholder-text"></span><span class="cursor">|</span> </div> </div> <div class="search-actions"> <button id="dock-mic-btn" class="action-btn" title="Voice Input"><i data-lucide="mic"></i></button> <button id="dock-mode-btn" class="action-btn active-mode" title="Change Mode"><i data-lucide="wand-2"></i></button> </div> </div> </footer> </div> <div id="sidebar-backdrop" class="modal-backdrop hidden"></div> <aside id="sidebar" class="liquid-sidebar hidden"> <div class="sidebar-header"> <span class="sidebar-title"><i data-lucide="history" size="18"></i> HISTORY</span> <button id="close-sidebar" class="icon-btn-glass-sm"><i data-lucide="x" size="18"></i></button> </div> <div id="history-list" class="scroll-hidden"></div> </aside> <div id="input-popup-backdrop" class="modal-backdrop hidden"> <div id="input-popup-sheet" class="apple-sheet glass-morph"> <div class="sheet-header"> <div class="drag-handle"></div> <div class="sheet-controls"> <button id="web-search-toggle" class="mode-badge" title="Live Web Search"> <i data-lucide="globe" size="14"></i> <span id="web-search-label">Web Search: Off</span> </button> <button id="popup-mode-btn" class="mode-badge active-mode"> <i data-lucide="wand-2" size="14"></i> <span id="mode-label">Auto Soul</span> </button> <button id="close-popup-btn" class="icon-btn-glass-sm"><i data-lucide="x" size="18"></i></button> </div> </div> <div class="sheet-body"> <div id="image-preview-container" class="preview-container hidden"> <img id="image-preview" src="" alt="Selected Image"> <button id="remove-image-btn" class="remove-btn"><i data-lucide="x" size="14"></i></button> </div> <textarea id="main-textarea" class="scroll-hidden" placeholder="Type before I fall asleep 🤖"></textarea> </div> <div class="sheet-footer"> <div class="footer-left-actions"> <input type="file" id="image-upload-input" accept="image/*" class="hidden"> <button id="popup-attach-btn" class="icon-btn-solid" title="Attach Image"><i data-lucide="paperclip"></i></button> <button id="popup-mic-btn" class="icon-btn-solid" title="Voice Input"><i data-lucide="mic"></i></button> <span id="char-counter" class="char-count-text">0/2000</span> </div> <button id="send-btn" class="send-btn"><i data-lucide="arrow-up" size="22"></i></button> </div> </div> </div> <div id="toast-container" class="toast-container"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="script.js"></script> <script>lucide.createIcons();</script> </body> </html>

// ==========================================
// 1. APP CONFIGURATION (MASTER SETTINGS)
// इस सेक्शन को बदलकर तुम इस टूल को राइटर, डॉक्टर, 
// या एजुकेशन असिस्टेंट किसी में भी बदल सकते हो।
// ==========================================
const APP_CONFIG = {
    // API & Model Settings
    API_KEY: "{{YOUR_GEMINI_API_KEY}}", // यहाँ अपनी Gemini API Key डालें
    AI_MODEL: "gemini-2.5-flash",
    
    // Core AI Personality / System Prompt
    SYSTEM_PROMPT: `{{SYSTEM_PROMPT_TEXT}}`, // उदाहरण: "तुम एक डॉक्टर हो..." या "तुम एक रचनात्मक लेखक हो..."
    
    // UI Defaults & Texts
    TYPEWRITER_TEXT: "LOVE WRITING... ", // उदाहरण: "LOVE WRITING... " या "HOW CAN I HELP? "
    CHAR_LIMIT: 2000,
    RATE_LIMIT_PER_DAY: 20,
    
    // Toast Messages (Customized Funny + Professional)
MSG_ONLINE: "Connection restored! 🚀 The internet is back and ready to work.",
MSG_LIMIT_EXCEEDED: "Whoa there! 😅 You've reached today's usage limit. Come back tomorrow with fresh energy.",
MSG_COOLDOWN: "Easy tiger! 🐯 Please wait a moment before sending another request.",
MSG_TEXT_LIMIT: "That’s a lot to read! 📚 Please shorten your message a bit.",
MSG_IMG_SIZE_ERROR: "Image too big! 🖼️ Please upload a smaller file to keep things smooth.",
MSG_IMG_UPLOADED: "Nice shot! 📸 Your image has been uploaded successfully.",
MSG_WEB_SEARCH_ON: "Web search activated 🌐 — Let’s explore the internet!",
MSG_WEB_SEARCH_OFF: "Web search disabled 🔕 — Staying focused locally.",
MSG_MODE_AUTO: "Auto mode engaged ⚙️ — Sit back while the AI handles things.",
MSG_MODE_CUSTOM: "Custom mode activated 🛠️ — You're now in control!",
MSG_NETWORK_ERROR: "Oops! 🌩️ Network issue detected. Please check your connection.",
MSG_NOT_FOUND: "Hmm… 🤔 Chat not found. Maybe it took a vacation.",
MSG_CHAT_DELETED: "Poof! 🧹 Chat deleted successfully.",
MSG_TTS_UNSUPPORTED: "Your browser said 'nope' 🙅 — Text-to-speech isn’t supported here.",
MSG_TTS_STOPPED: "Audio stopped ⏹️ — Silence is golden.",
MSG_TTS_PLAYING: "Playing audio 🔊 — Sit back and listen!",
MSG_COPY_SUCCESS: "Copied to clipboard! 📋 Ready to paste anywhere.",
MSG_COPY_ERROR: "Copy failed 😬 — Please try again.",
MSG_IMG_PREPARING: "Preparing your image download... 🎨 Just a moment.",
MSG_IMG_DOWNLOADED: "Download complete! 📥 Your image is ready.",
MSG_IMG_ERROR: "Oops! 😵 Something went wrong while creating the image.",
MSG_SHARE_ERROR: "Sharing failed 🤷 — Looks like the internet is feeling shy.",
MSG_LINK_COPIED: "Link copied! 🔗 Share it with the world.",
MSG_MIC_START: "Listening... 🎤 Go ahead, say something!",
MSG_MIC_BLOCKED: "Microphone blocked 🚫 Please allow mic access in your browser.",
MSG_MIC_ERROR: "Microphone error detected 😕 Please try again.",
MSG_MIC_UNSUPPORTED: "Sorry! 🎤 Your browser doesn’t support microphone features."
};

// ==========================================
// 2. GLOBAL STATE & DOM ELEMENTS
// ==========================================
let isAutoMode = true;
let isWebSearchEnabled = false;
let isGenerating = false;
let typewriterInterval;
let chatMemory = []; // Contextual Memory

// Image Upload States
let currentBase64Image = null;
let currentImageMimeType = null;

// DOM Elements
const offlineBanner = document.getElementById("offline-banner");
const toastContainer = document.getElementById("toast-container");
const heroSection = document.getElementById("hero-section");
const messagesContainer = document.getElementById("messages-container");
const loadingIndicator = document.getElementById("loading-indicator");
const chatCanvas = document.getElementById("chat-canvas");

const searchBarTrigger = document.getElementById("search-bar-trigger");
const inputPopupBackdrop = document.getElementById("input-popup-backdrop");
const mainTextarea = document.getElementById("main-textarea");
const charCounter = document.getElementById("char-counter");

const dockMicBtn = document.getElementById("dock-mic-btn");
const dockModeBtn = document.getElementById("dock-mode-btn");
const popupMicBtn = document.getElementById("popup-mic-btn");
const popupModeBtn = document.getElementById("popup-mode-btn");
const webSearchToggle = document.getElementById("web-search-toggle");
const sendBtn = document.getElementById("send-btn");

const attachBtn = document.getElementById("popup-attach-btn");
const fileInput = document.getElementById("image-upload-input");
const previewContainer = document.getElementById("image-preview-container");
const previewImg = document.getElementById("image-preview");
const removeImgBtn = document.getElementById("remove-image-btn");

const sidebar = document.getElementById("sidebar");
const sidebarBackdrop = document.getElementById("sidebar-backdrop");

// ==========================================
// 3. UTILITIES & RATE LIMITING
// ==========================================
window.addEventListener("offline", () => offlineBanner.classList.remove("hidden"));
window.addEventListener("online", () => {
    offlineBanner.classList.add("hidden");
    showToast(APP_CONFIG.MSG_ONLINE, "wifi");
});

function updateRateLimit() {
    let stats = JSON.parse(localStorage.getItem("app_usage_limits")) || { date: new Date().toLocaleDateString(), count: 0, lastReq: 0 };
    stats.count += 1;
    stats.lastReq = Date.now();
    localStorage.setItem("app_usage_limits", JSON.stringify(stats));
}

// ==========================================
// 4. EVENT LISTENERS & UI TOGGLES
// ==========================================
mainTextarea.addEventListener("input", () => {
    const len = mainTextarea.value.length;
    charCounter.innerText = `${len}/${APP_CONFIG.CHAR_LIMIT}`;
    charCounter.classList.toggle("limit-reached", len >= APP_CONFIG.CHAR_LIMIT);
});

searchBarTrigger.addEventListener("click", () => {
    inputPopupBackdrop.classList.remove("hidden");
    setTimeout(() => mainTextarea.focus(), 300);
});

document.getElementById("close-popup-btn").addEventListener("click", (e) => { 
    e.stopPropagation(); inputPopupBackdrop.classList.add("hidden"); 
});

inputPopupBackdrop.addEventListener("click", (e) => { 
    if(e.target === inputPopupBackdrop) inputPopupBackdrop.classList.add("hidden"); 
});

document.getElementById("theme-toggle").addEventListener("click", () => document.body.classList.toggle("dark-mode"));

webSearchToggle.addEventListener("click", (e) => {
    e.stopPropagation();
    isWebSearchEnabled = !isWebSearchEnabled;
    webSearchToggle.classList.toggle("active-search", isWebSearchEnabled);
    const labelStatus = isWebSearchEnabled ? "On" : "Off";
    document.getElementById("web-search-label").innerText = `Web Search: ${labelStatus}`;
    showToast(isWebSearchEnabled ? APP_CONFIG.MSG_WEB_SEARCH_ON : APP_CONFIG.MSG_WEB_SEARCH_OFF, "globe");
});

document.getElementById("history-toggle").addEventListener("click", () => {
    sidebar.classList.remove("hidden"); sidebarBackdrop.classList.remove("hidden");
    setTimeout(() => sidebar.classList.add("active"), 10);
});

const hideSidebar = () => {
    sidebar.classList.remove("active");
    setTimeout(() => { sidebar.classList.add("hidden"); sidebarBackdrop.classList.add("hidden"); }, 400);
};

document.getElementById("close-sidebar").addEventListener("click", hideSidebar);
sidebarBackdrop.addEventListener("click", hideSidebar);

document.getElementById("home-logo").addEventListener("click", () => {
    window.history.pushState({}, '', window.location.pathname);
    messagesContainer.classList.add("hidden");
    heroSection.classList.remove("hidden");
    chatMemory = []; 
});

// ==========================================
// 5. VISION (Image Upload Handling)
// ==========================================
attachBtn.addEventListener("click", () => fileInput.click());

fileInput.addEventListener("change", (e) => {
    const file = e.target.files[0];
    if(file) {
        if(file.size > 5 * 1024 * 1024) return showToast(APP_CONFIG.MSG_IMG_SIZE_ERROR, "alert-circle");
        const reader = new FileReader();
        reader.onload = (re) => {
            currentBase64Image = re.target.result;
            currentImageMimeType = file.type;
            previewImg.src = currentBase64Image;
            previewContainer.classList.remove("hidden");
            attachBtn.classList.add("active-attachment");
            showToast(APP_CONFIG.MSG_IMG_UPLOADED, "image");
        };
        reader.readAsDataURL(file);
    }
});

removeImgBtn.addEventListener("click", () => {
    currentBase64Image = null; currentImageMimeType = null; fileInput.value = "";
    previewContainer.classList.add("hidden"); attachBtn.classList.remove("active-attachment");
});

// ==========================================
// 6. CORE AI PROCESSING (Streaming + LocalStorage)
// ==========================================
async function triggerAIProcessing(userText) {
    if(isGenerating) return;
    if(userText.length > APP_CONFIG.CHAR_LIMIT) return showToast(APP_CONFIG.MSG_TEXT_LIMIT, "alert-circle");
    if(!checkRateLimit()) return;
    
    isGenerating = true;
    inputPopupBackdrop.classList.add("hidden"); 
    
    heroSection.classList.add("hidden");
    messagesContainer.classList.remove("hidden");
    
    const userDiv = document.createElement("div");
    userDiv.className = "user-msg-block";
    let imageHtml = currentBase64Image ? `<img src="${currentBase64Image}" style="max-width:200px; border-radius:12px; margin-bottom:10px; display:block;">` : "";
    userDiv.innerHTML = `${imageHtml}<div class="user-text">${userText}</div>`;
    messagesContainer.appendChild(userDiv);
    
    const payload = { contents: [...chatMemory] };
    if (isAutoMode) payload.systemInstruction = { parts: [{ text: APP_CONFIG.SYSTEM_PROMPT }] };
    if (isWebSearchEnabled) payload.tools = [{ googleSearch: {} }];

mainTextarea.value = ""; charCounter.innerText = `0/${APP_CONFIG.CHAR_LIMIT}`;
    removeImgBtn.click();

loadingIndicator.classList.remove("hidden"); 
    chatCanvas.scrollTop = chatCanvas.scrollHeight;
    
    const aiDiv = document.createElement("div");
    aiDiv.className = "ai-msg-block hidden";
    const aiTextContainer = document.createElement("div");
    aiTextContainer.className = "ai-text";
    aiDiv.appendChild(aiTextContainer);
    messagesContainer.appendChild(aiDiv);

let aiFullText = "";

try {
        const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${APP_CONFIG.AI_MODEL}:streamGenerateContent?alt=sse&key=${APP_CONFIG.API_KEY}`, {
            method: "POST", headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
        });
        
        if (!response.ok) throw new Error("API Connection Failed");

loadingIndicator.classList.add("hidden");
        aiDiv.classList.remove("hidden");
        
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let buffer = "";

while(true) {
            const { done, value } = await reader.read();
            if (done) break;
            
            buffer += decoder.decode(value, { stream: true });
            let lines = buffer.split("\n");
            buffer = lines.pop(); 
            
            for (let line of lines) {
                if (line.startsWith("data: ")) {
                    try {
                        const data = JSON.parse(line.substring(6));
                        const textChunk = data.candidates[0].content.parts[0].text;
                        aiFullText += textChunk;
                        aiTextContainer.innerHTML = marked.parse(aiFullText);
                        chatCanvas.scrollTop = chatCanvas.scrollHeight;
                    } catch(e) {}
                }
            }
        }
        
        if(!aiFullText) aiFullText = "No response generated.";
        
        chatMemory.push({ role: "user", parts: currentMessageParts });
        chatMemory.push({ role: "model", parts: [{ text: aiFullText }] });
        updateRateLimit();
        
        const newChatId = saveToLocalStorage(userText, aiFullText);
        loadHistoryFromLocalStorage(); // Refresh sidebar history
        
        const actionBar = document.createElement("div");
        actionBar.className = "action-bar";
        actionBar.innerHTML = `
            <button onclick="speakText(this)" title="Listen"><i data-lucide="volume-2"></i> Listen</button>
            <button onclick="copyToClipboard(this)" title="Copy"><i data-lucide="copy"></i> Copy</button>
            <button onclick="downloadAsJPG(this)" title="Save Image"><i data-lucide="image"></i> Save</button>
            <button onclick="shareLink('${newChatId}')" title="Share"><i data-lucide="share-2"></i> Share</button>
        `;
        aiDiv.appendChild(actionBar);
        lucide.createIcons();
        chatCanvas.scrollTop = chatCanvas.scrollHeight;

} catch (error) {
        console.error(error);
        loadingIndicator.classList.add("hidden");
        showToast(APP_CONFIG.MSG_NETWORK_ERROR, "wifi-off");
        aiTextContainer.innerHTML = marked.parse(APP_CONFIG.MSG_NETWORK_ERROR);
        aiDiv.classList.remove("hidden");
    }
    isGenerating = false;
}

sendBtn.addEventListener("click", () => {
    const text = mainTextarea.value.trim();
    if(text || currentBase64Image) triggerAIProcessing(text || "Please analyze this image.");
});

mainTextarea.addEventListener("keydown", (e) => {
    if(e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendBtn.click(); }
});

// ==========================================
// 7. LOCAL STORAGE HISTORY LOGIC
// ==========================================
function getLocalTopics() {
    return JSON.parse(localStorage.getItem("app_local_history")) || {};
}

function saveTopics(topics) {
    localStorage.setItem("app_local_history", JSON.stringify(topics));
}

window.togglePinStatus = (id, currentStatus) => {
    const topics = getLocalTopics();
    if(topics[id]) {
        topics[id].is_pinned = !currentStatus;
        saveTopics(topics);
        loadHistoryFromLocalStorage();
    }
};

window.deleteChatRecord = (id) => {
    if(confirm("Are you sure you want to delete this?")) {
        const topics = getLocalTopics();
        delete topics[id];
        saveTopics(topics);
        loadHistoryFromLocalStorage();
        if(window.location.search.includes(id)) document.getElementById("home-logo").click();
        showToast(APP_CONFIG.MSG_CHAT_DELETED, "trash");
    }
};

// ==========================================
// 8. PREMIUM ACTIONS (TTS, Copy, JPG, Share)
// ==========================================
window.speakText = (btn) => {
    if (!('speechSynthesis' in window)) return showToast(APP_CONFIG.MSG_TTS_UNSUPPORTED, "alert-circle");
    
    if(window.speechSynthesis.speaking) {
        window.speechSynthesis.cancel();
        showToast(APP_CONFIG.MSG_TTS_STOPPED, "volume-x");
        return;
    }
    
    const textToSpeak = btn.closest('.ai-msg-block').querySelector('.ai-text').innerText; 
    const utterance = new SpeechSynthesisUtterance(textToSpeak);
    utterance.lang = 'hi-IN'; // Change if needed based on persona
    window.speechSynthesis.speak(utterance);
    showToast(APP_CONFIG.MSG_TTS_PLAYING, "volume-2");
};

// ==========================================
// 9. NATIVE VOICE TYPING
// ==========================================
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
let recognition;

if (SpeechRecognition) {
    recognition = new SpeechRecognition();
    recognition.lang = 'hi-IN'; // Change if needed based on persona
    recognition.continuous = false;
    
    recognition.onstart = () => {
        inputPopupBackdrop.classList.remove("hidden");
        popupMicBtn.classList.add("active-mode"); dockMicBtn.classList.add("active-mode");
        showToast(APP_CONFIG.MSG_MIC_START, "mic");
    };
    
    recognition.onresult = (e) => {
        mainTextarea.value += (mainTextarea.value ? " " : "") + e.results[0][0].transcript;
        charCounter.innerText = `${mainTextarea.value.length}/${APP_CONFIG.CHAR_LIMIT}`;
    };
    
    recognition.onerror = (event) => {
        if(event.error === 'not-allowed') showToast(APP_CONFIG.MSG_MIC_BLOCKED, "mic-off");
        else showToast(APP_CONFIG.MSG_MIC_ERROR + " " + event.error, "mic-off");
    };

recognition.onend = () => {
        popupMicBtn.classList.remove("active-mode"); dockMicBtn.classList.remove("active-mode");
    };
}

dockMicBtn.addEventListener("click", handleVoiceInput);
popupMicBtn.addEventListener("click", handleVoiceInput);

// ==========================================
// 10. INITIALIZATION
// ==========================================
window.onload = () => {
    lucide.createIcons();
    startTypewriterEffect();
    loadHistoryFromLocalStorage();
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('chat')) loadSingleChat(urlParams.get('chat'));
};

/* ==========================================
   1. CSS VARIABLES (Premium Apple & Tech Theme)
   ========================================== */
:root {
    /* Light Theme */
    --bg-color: #f5f5f7;
    --text-primary: #000000;
    --text-secondary: #6e6e73;
    --accent-color: #0071e3; /* Apple Blue */
    --accent-glow: rgba(0, 113, 227, 0.4);
    --gemini-grad: linear-gradient(135deg, #0071e3, #8b5cf6, #ec4899);
    --error-color: #ff3b30; /* Offline/Error Red */
    --success-color: #10b981; /* Web Search Active Green */
    
    /* Liquid Glass Effects */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(0, 0, 0, 0.08);
    --liquid-blur: blur(40px);
    
    /* Modals & Surfaces */
    --surface-solid: #ffffff;
    --modal-bg: rgba(255, 255, 255, 0.95);
    --heavy-blur: blur(50px);
}

body.dark-mode {
    /* Dark Theme (OLED Black) */
    --bg-color: #000000;
    --text-primary: #ffffff;
    --text-secondary: #a1a1a6;
    --accent-color: #2997ff;
    --accent-glow: rgba(41, 151, 255, 0.4);
    --error-color: #ff453a;
    --success-color: #34d399;
    
    /* Liquid Glass Effects */
    --glass-bg: rgba(28, 28, 30, 0.65);
    --glass-border: rgba(255, 255, 255, 0.12);
    
    /* Modals & Surfaces */
    --surface-solid: #1c1c1e;
    --modal-bg: rgba(28, 28, 30, 0.95);
}

/* ==========================================
   2. GLOBAL RESETS & BODY
   ========================================== */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color); color: var(--text-primary);
    transition: background-color 0.5s ease, color 0.5s ease;
    overflow: hidden; height: 100vh; height: 100dvh;
}

.hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none !important; }
.scroll-hidden::-webkit-scrollbar { display: none; }
.scroll-hidden { -ms-overflow-style: none; scrollbar-width: none; }

.glass-morph {
    background: var(--glass-bg); backdrop-filter: var(--liquid-blur);
    -webkit-backdrop-filter: var(--liquid-blur); border: 1px solid var(--glass-border);
}

/* ==========================================
   3. OFFLINE BANNER & TOAST ALERTS
   ========================================== */
.offline-banner {
    position: fixed; top: 0; left: 0; width: 100%; background: var(--error-color);
    color: #fff; padding: 10px; text-align: center; font-size: 0.9rem; font-weight: 500;
    display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 40;
    transition: transform 0.4s ease;
}
.offline-banner:not(.hidden) { display: flex !important; }

.toast-container {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 10px; z-index: 150; pointer-events: none;
}
.premium-toast {
    background: var(--text-primary); color: var(--bg-color);
    padding: 12px 24px; border-radius: 100px; font-size: 0.95rem; font-weight: 500;
    display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: toastSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes toastSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast-fade-out { animation: toastFadeOut 0.4s ease forwards !important; }
@keyframes toastFadeOut { to { opacity: 0; transform: translateY(10px) scale(0.95); } }

/* ==========================================
   4. HEADER & HERO LOGO
   ========================================== */
#app-container { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 10; }
.glass-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; z-index: 20; }
.brand-area { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.brand-text { font-family: 'Geist Mono', monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; }

.icon-btn {
    background: transparent; border: none; color: var(--text-primary);
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s;
}
.icon-btn:active { transform: scale(0.9); }
.icon-btn:hover { background: var(--glass-border); }

#chat-canvas { flex: 1; overflow-y: auto; padding: 0 24px 140px 24px; display: flex; flex-direction: column; scroll-behavior: smooth; position: relative; }
#hero-section { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; max-width: 600px; pointer-events: none; transition: opacity 0.4s ease; }
.hero-logo-img { max-width: 280px; width: 100%; height: auto; margin-bottom: 16px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); }
.hero-subtitle { font-size: 1.1rem; color: var(--text-secondary); }

/* ==========================================
   5. SINGLE CHAT & MARKDOWN
   ========================================== */
#messages-container { display: flex; flex-direction: column; gap: 40px; margin-top: 20px; width: 100%; max-width: 850px; margin-left: auto; margin-right: auto; z-index: 2; }
#messages-container:not(.hidden) { display: flex !important; }

.user-msg-block { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.user-text { font-size: 1.6rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.ai-msg-block { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; padding-left: 20px; border-left: 3px solid var(--accent-color); }
.ai-text { font-size: 1.15rem; line-height: 1.8; color: var(--text-primary); }

.ai-text p { margin-bottom: 16px; }
.ai-text strong { color: var(--text-primary); font-weight: 700; }
.ai-text ul, .ai-text ol { margin: 10px 0 16px 24px; }
.ai-text li { margin-bottom: 8px; }
.ai-text code { background: var(--glass-border); padding: 3px 6px; border-radius: 6px; font-family: 'Geist Mono', monospace; font-size: 0.9em; color: var(--accent-color); }
.ai-text pre { background: var(--surface-solid); padding: 16px; border-radius: 12px; overflow-x: auto; margin: 16px 0; border: 1px solid var(--glass-border); }
.ai-text pre code { background: transparent; padding: 0; color: var(--text-primary); }

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.action-bar { display: flex; gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--glass-border); flex-wrap: wrap; }
.action-bar button { background: transparent; border: none; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; }
.action-bar button:hover { color: var(--text-primary); }

.loading-container { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-left: 20px; border-left: 3px solid var(--glass-border); }
.loading-container:not(.hidden) { display: flex !important; }
.liquid-loader { display: flex; gap: 4px; }
.loader-bar { width: 4px; height: 16px; background: var(--accent-color); border-radius: 2px; animation: liquidBar 1s ease-in-out infinite; }
.loader-bar:nth-child(2) { animation-delay: 0.15s; }
.loader-bar:nth-child(3) { animation-delay: 0.3s; }
@keyframes liquidBar { 0%, 100% { transform: scaleY(0.5); opacity: 0.5; } 50% { transform: scaleY(1.5); opacity: 1; } }
.loading-text { color: var(--text-secondary); font-size: 0.95rem; }

/* ==========================================
   6. BOTTOM DOCK (Search Bar)
   ========================================== */
#bottom-dock { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 650px; z-index: 30; }
.glass-search-bar { position: relative; display: flex; align-items: center; justify-content: space-between; background: var(--glass-bg); backdrop-filter: var(--liquid-blur); -webkit-backdrop-filter: var(--liquid-blur); border: 1px solid var(--glass-border); border-radius: 100px; padding: 10px 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; }
.glass-search-bar:active { transform: scale(0.98); }
.search-content { display: flex; align-items: center; flex: 1; pointer-events: none; }
.search-icon { color: var(--text-secondary); margin-right: 12px; }
.placeholder-text { font-size: 1.1rem; font-weight: 500; color: var(--text-primary); }
.cursor { color: var(--text-secondary); animation: blink 1s infinite; margin-left: 2px;}
.search-actions { display: flex; gap: 8px; pointer-events: auto; }
.action-btn { background: transparent; border: none; color: var(--text-secondary); width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; }
.action-btn:hover { background: var(--glass-border); color: var(--text-primary); }
.active-mode { color: var(--accent-color); }

.lock-overlay { position: absolute; inset: 0; background: var(--glass-bg); border-radius: 100px; display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 600; z-index: 5; }
.lock-overlay:not(.hidden) { display: flex !important; }

/* ==========================================
   7. MODAL SHEET, IMAGE PREVIEW & NEW BADGES
   ========================================== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; display: flex; align-items: flex-end; justify-content: center; transition: opacity 0.3s ease, visibility 0.3s; }
.apple-sheet { width: 100%; max-width: 800px; background: var(--modal-bg); border-radius: 32px 32px 0 0; display: flex; flex-direction: column; height: auto; min-height: 45vh; max-height: 90dvh; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -20px 60px rgba(0,0,0,0.15); }
#input-popup-backdrop:not(.hidden) .apple-sheet { transform: translateY(0); }

.sheet-header { padding: 16px 24px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid var(--glass-border); }
.drag-handle { width: 40px; height: 5px; background: var(--text-secondary); border-radius: 5px; opacity: 0.3; margin-bottom: 16px; }
.sheet-controls { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.mode-badge {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px;
    background: transparent; border: 1px solid var(--glass-border);
    color: var(--text-primary); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.mode-badge.active-mode { color: var(--accent-color); border-color: var(--accent-glow); }
.mode-badge.active-search { color: var(--success-color); border-color: rgba(16, 185, 129, 0.4); }

.icon-btn-glass-sm { background: var(--glass-border); border: none; color: var(--text-primary); width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; }

.sheet-body { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; }

/* NEW: Image Preview Box Styling */
.preview-container {
    position: relative; align-self: flex-start; margin-bottom: 16px;
    border-radius: 12px; border: 1px solid var(--glass-border);
    padding: 6px; background: var(--surface-solid);
}
.preview-container:not(.hidden) { display: inline-block !important; }
.preview-container img { max-height: 120px; max-width: 200px; border-radius: 8px; object-fit: cover; display: block; }
.remove-btn {
    position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
    background: var(--error-color); color: #fff; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.remove-btn:hover { transform: scale(1.1); }

#main-textarea { width: 100%; flex: 1; min-height: 120px; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 1.3rem; line-height: 1.5; resize: none; }

.sheet-footer { padding: 16px 24px 32px 24px; display: flex; justify-content: space-between; align-items: center; }
.footer-left-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn-solid { background: transparent; border: none; color: var(--text-secondary); width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; }
.icon-btn-solid:hover { background: var(--glass-border); color: var(--text-primary); }
.icon-btn-solid.active-attachment { color: var(--accent-color); }

.char-count-text { font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.char-count-text.limit-reached { color: var(--error-color); font-weight: 600; }

.send-btn { background: var(--text-primary); color: var(--bg-color); border: none; width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s; }
.send-btn:active { transform: scale(0.9); }

/* ==========================================
   8. AUTH & SIDEBAR
   ========================================== */
#auth-modal-backdrop { z-index: 200; align-items: center; }
.auth-card { background: var(--glass-bg); border: 1px solid var(--glass-border); padding: 40px; border-radius: 24px; text-align: center; width: 90%; max-width: 400px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); }
.auth-icon { color: var(--accent-color); margin-bottom: 16px; }
.auth-card h2 { font-size: 1.8rem; margin-bottom: 8px; }
.auth-card p { color: var(--text-secondary); font-size: 0.95rem; }
.pin-group { display: flex; justify-content: center; gap: 16px; margin: 32px 0; }
.pin-box { width: 50px; height: 60px; background: transparent; border: none; border-bottom: 2px solid var(--glass-border); color: var(--text-primary); font-size: 2.5rem; text-align: center; outline: none; border-radius: 0; transition: 0.3s; }
.pin-box:focus { border-bottom-color: var(--accent-color); }
.text-link-btn { background: none; border: none; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }

#sidebar-backdrop { z-index: 50; }
.liquid-sidebar { position: fixed; top: 0; left: -100%; width: 85vw; max-width: 360px; height: 100%; background: var(--surface-solid); z-index: 60; transition: left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; }
.liquid-sidebar.active { left: 0; }
#sidebar-backdrop.active { opacity: 1; visibility: visible; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--glass-border); }
.sidebar-title { display: flex; align-items: center; gap: 10px; font-weight: 600; }
#history-list { flex: 1; overflow-y: auto; padding: 12px; }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 12px; cursor: pointer; color: var(--text-secondary); transition: 0.2s; margin-bottom: 4px; }
.history-item:hover { background: var(--glass-border); color: var(--text-primary); }
.hist-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hist-actions { display: flex; gap: 12px; }
.hist-actions i:hover { color: var(--accent-color); }