From 31465f16315870324cf04080f57319ddfea83a2f Mon Sep 17 00:00:00 2001
From: Adarshkrishnan <adarshkrishnanpalayil@gmail.com>
Date: Sat, 19 Jul 2025 20:39:36 +0530
Subject: [PATCH 1/4] Fix: Sidebar collapse on mobile, responsive modals,
 improved spacing

---
 index.html |  233 +++++----
 script.js  |  656 +++++++++++++------------
 styles.css | 1363 +++++++++++++++++++++++++++++-----------------------
 3 files changed, 1246 insertions(+), 1006 deletions(-)
diff --git a/index.html b/index.html
index 4a3098f..be7ac62 100644
--- a/index.html
+++ b/index.html
@@ -1,119 +1,176 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Synapse - AI Development Assistant</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="styles.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     <script src="script.js" defer></script>
-</head>
-<body>
+  </head>
+  <body>
     <!-- Initial Loading Screen -->
     <div class="initial-loading">
-        <div class="warp-stars" id="warpStars"></div>
-        <h1 class="loading-logo">Synapse</h1>
+      <div class="warp-stars" id="warpStars"></div>
+      <h1 class="loading-logo">Synapse</h1>
     </div>
 
     <div class="stars"></div>
-    
+
     <!-- Top Navigation -->
     <div class="top-nav">
-        <div class="synapse-text">Synapse</div>
-        <button class="nav-btn github-btn"><i class="fab fa-github"></i> GitHub</button>
-        <button class="nav-btn settings-btn"><i class="fas fa-cog"></i> Settings</button>
-        <button class="nav-btn about-btn"><i class="fas fa-info-circle"></i> About</button>
+      <div class="synapse-text">Synapse</div>
+
+      <button class="hamburger" id="hamburgerBtn">
+        <i class="fas fa-bars"></i>
+      </button>
+
+      <div class="nav-menu" id="navMenu">
+        <button class="nav-btn github-btn">
+          <i class="fab fa-github"></i> GitHub
+        </button>
+        <button class="nav-btn settings-btn">
+          <i class="fas fa-cog"></i> Settings
+        </button>
+        <button class="nav-btn about-btn">
+          <i class="fas fa-info-circle"></i> About
+        </button>
+      </div>
     </div>
-    
+
     <div class="container">
-        <div class="sidebar">
-            <button class="sidebar-toggle" id="sidebarToggle"><i class="fas fa-chevron-left"></i></button>
-            <div class="history-pane">
-                <h3>History <button class="clear-history" id="clearHistory">Clear</button></h3>
-                <div class="history-list"></div>
-            </div>
+      <div class="sidebar">
+        <button class="sidebar-toggle" id="sidebarToggle">
+          <i class="fas fa-chevron-left"></i>
+        </button>
+        <div class="history-pane">
+          <h3>
+            History
+            <button class="clear-history" id="clearHistory">Clear</button>
+          </h3>
+          <div class="history-list"></div>
         </div>
-        
-        <main class="main-content">
-            <div class="logo-container">
-                <img src="/static/a.png" alt="Synapse Logo" class="synapse-logo-img">
-                <div class="water-effect"></div>
-            </div>
-            
-            <div class="input-section">
-                <textarea placeholder="Enter your project requirements..." class="requirement-input"></textarea>
-                <button class="submit-btn">Generate Plan</button>
-            </div>
+      </div>
 
-            <div class="output-section hidden">
-                <div class="development-goals">
-                    <div class="loading-indicator" id="loadingIndicator"></div>
-                </div>
-                <div class="action-buttons">
-                    <button class="download-md"><i class="fas fa-download"></i> Download Goals</button>
-                    <button class="generate-code"><i class="fas fa-code"></i> Generate Codebase</button>
-                    <button class="push-github hidden"><i class="fab fa-github"></i> Push to GitHub</button>
-                </div>
-            </div>
-        </main>
+      <main class="main-content">
+        <div class="logo-container">
+          <img
+            src="/static/a.png"
+            alt="Synapse Logo"
+            class="synapse-logo-img"
+          />
+          <div class="water-effect"></div>
+        </div>
+
+        <div class="input-section">
+          <textarea
+            placeholder="Enter your project requirements..."
+            class="requirement-input"
+          ></textarea>
+          <button class="submit-btn">Generate Plan</button>
+        </div>
+
+        <div class="output-section hidden">
+          <div class="development-goals">
+            <div class="loading-indicator" id="loadingIndicator"></div>
+          </div>
+          <div class="action-buttons">
+            <button class="download-md">
+              <i class="fas fa-download"></i> Download Goals
+            </button>
+            <button class="generate-code">
+              <i class="fas fa-code"></i> Generate Codebase
+            </button>
+            <button class="push-github hidden">
+              <i class="fab fa-github"></i> Push to GitHub
+            </button>
+          </div>
+        </div>
+      </main>
     </div>
 
     <!-- Settings Modal -->
     <div class="modal" id="settingsModal">
-        <div class="modal-content">
-            <button class="close-modal">&times;</button>
-            <h2>Settings</h2>
-            <div class="settings-grid">
-                <div class="settings-item">
-                    <label for="themeSelect">Theme</label>
-                    <select id="themeSelect">
-                        <option value="dark" selected>Dark Space</option>
-                        <option value="light">Light Space</option>
-                        <option value="cyberpunk">Cyberpunk</option>
-                    </select>
-                </div>
-                <div class="settings-item">
-                    <label for="githubTokenInput">GitHub Access Token</label>
-                    <input type="password" id="githubTokenInput" placeholder="Enter your GitHub access token">
-                </div>
-                <div class="settings-item">
-                    <label for="autoSaveToggle">Auto-save History</label>
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="autoSaveToggle" checked>
-                        <span class="slider"></span>
-                    </label>
-                </div>
-                <div class="settings-item">
-                    <label for="animationsToggle">Enable Animations</label>
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="animationsToggle" checked>
-                        <span class="slider"></span>
-                    </label>
-                </div>
-                <div class="settings-item" style="grid-column: span 2;">
-                    <button id="saveSettings" class="save-settings-btn">Save Settings</button>
-                </div>
-            </div>
+      <div class="modal-content">
+        <button class="close-modal">&times;</button>
+        <h2>Settings</h2>
+        <div class="settings-grid">
+          <div class="settings-item">
+            <label for="themeSelect">Theme</label>
+            <select id="themeSelect">
+              <option value="dark" selected>Dark Space</option>
+              <option value="light">Light Space</option>
+              <option value="cyberpunk">Cyberpunk</option>
+            </select>
+          </div>
+          <div class="settings-item">
+            <label for="githubTokenInput">GitHub Access Token</label>
+            <input
+              type="password"
+              id="githubTokenInput"
+              placeholder="Enter your GitHub access token"
+            />
+          </div>
+          <div class="settings-item">
+            <label for="autoSaveToggle">Auto-save History</label>
+            <label class="toggle-switch">
+              <input type="checkbox" id="autoSaveToggle" checked />
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="settings-item">
+            <label for="animationsToggle">Enable Animations</label>
+            <label class="toggle-switch">
+              <input type="checkbox" id="animationsToggle" checked />
+              <span class="slider"></span>
+            </label>
+          </div>
+          <div class="settings-item" style="grid-column: span 2">
+            <button id="saveSettings" class="save-settings-btn">
+              Save Settings
+            </button>
+          </div>
         </div>
+      </div>
     </div>
 
     <!-- About Modal -->
     <div class="modal" id="aboutModal">
-        <div class="modal-content">
-            <button class="close-modal">&times;</button>
-            <div class="about-content">
-                <h2>About Synapse</h2>
-                <p>Synapse is an ambitious project created by <span class="highlight">Sumit Kumar Das</span>, a sophomore engineering student with a vision to revolutionize no-code development.</p>
-                <p>This AI-powered development assistant helps break down project requirements into actionable tasks, generates code, and even integrates with GitHub for seamless project management.</p>
-                <p>Sumit's dedication to making development more accessible has resulted in this amazing application that bridges the gap between ideas and implementation.</p>
-                <p>The project leverages cutting-edge AI technology to understand requirements and generate appropriate code structures, making software development faster and more efficient for everyone.</p>
-            </div>
+      <div class="modal-content">
+        <button class="close-modal">&times;</button>
+        <div class="about-content">
+          <h2>About Synapse</h2>
+          <p>
+            Synapse is an ambitious project created by
+            <span class="highlight">Sumit Kumar Das</span>, a sophomore
+            engineering student with a vision to revolutionize no-code
+            development.
+          </p>
+          <p>
+            This AI-powered development assistant helps break down project
+            requirements into actionable tasks, generates code, and even
+            integrates with GitHub for seamless project management.
+          </p>
+          <p>
+            Sumit's dedication to making development more accessible has
+            resulted in this amazing application that bridges the gap between
+            ideas and implementation.
+          </p>
+          <p>
+            The project leverages cutting-edge AI technology to understand
+            requirements and generate appropriate code structures, making
+            software development faster and more efficient for everyone.
+          </p>
         </div>
+      </div>
     </div>
 
     <footer>
-        <p>&copy; 2025 Synapse. Created by Sumit Kumar Das</p>
+      <p>&copy; 2025 Synapse. Created by Sumit Kumar Das</p>
     </footer>
-</body>
+  </body>
 </html>
diff --git a/script.js b/script.js
index 239efab..2eb9b56 100644
--- a/script.js
+++ b/script.js
@@ -1,65 +1,67 @@
 // API endpoints
-const API_URL = ''; // Use relative paths for API calls
+const API_URL = ""; // Use relative paths for API calls
 const ENDPOINTS = {
-    PROCESS_REQUIREMENT: `${API_URL}/api/process-requirement`,
-    GENERATE_CODE: `${API_URL}/api/generate-code`,
-    PUSH_GITHUB: `${API_URL}/api/push-to-github`,
-    UPDATE_GITHUB_TOKEN: `${API_URL}/api/update-github-token`
+  PROCESS_REQUIREMENT: `${API_URL}/api/process-requirement`,
+  GENERATE_CODE: `${API_URL}/api/generate-code`,
+  PUSH_GITHUB: `${API_URL}/api/push-to-github`,
+  UPDATE_GITHUB_TOKEN: `${API_URL}/api/update-github-token`,
 };
 
 // DOM Elements
-const initialLoading = document.querySelector('.initial-loading');
-const warpStars = document.getElementById('warpStars');
-const requirementInput = document.querySelector('.requirement-input');
-const submitBtn = document.querySelector('.submit-btn');
-const outputSection = document.querySelector('.output-section');
-const developmentGoals = document.querySelector('.development-goals');
-const loadingIndicator = document.getElementById('loadingIndicator');
-const downloadMdBtn = document.querySelector('.download-md');
-const generateCodeBtn = document.querySelector('.generate-code');
-const pushGithubBtn = document.querySelector('.push-github');
-const historyList = document.querySelector('.history-list');
-const sidebarToggle = document.getElementById('sidebarToggle');
-const sidebar = document.querySelector('.sidebar');
-const clearHistory = document.getElementById('clearHistory');
-const settingsBtn = document.querySelector('.settings-btn');
-const aboutBtn = document.querySelector('.about-btn');
-const settingsModal = document.getElementById('settingsModal');
-const aboutModal = document.getElementById('aboutModal');
-const closeModalBtns = document.querySelectorAll('.close-modal');
-const githubBtn = document.querySelector('.github-btn');
-const saveSettingsBtn = document.getElementById('saveSettings');
-const githubTokenInput = document.getElementById('githubTokenInput');
+const initialLoading = document.querySelector(".initial-loading");
+const warpStars = document.getElementById("warpStars");
+const requirementInput = document.querySelector(".requirement-input");
+const submitBtn = document.querySelector(".submit-btn");
+const outputSection = document.querySelector(".output-section");
+const developmentGoals = document.querySelector(".development-goals");
+const loadingIndicator = document.getElementById("loadingIndicator");
+const downloadMdBtn = document.querySelector(".download-md");
+const generateCodeBtn = document.querySelector(".generate-code");
+const pushGithubBtn = document.querySelector(".push-github");
+const historyList = document.querySelector(".history-list");
+const sidebarToggle = document.getElementById("sidebarToggle");
+const sidebar = document.querySelector(".sidebar");
+const hamburgerBtn = document.getElementById("hamburgerBtn");
+const navMenu = document.getElementById("navMenu");
+const clearHistory = document.getElementById("clearHistory");
+const settingsBtn = document.querySelector(".settings-btn");
+const aboutBtn = document.querySelector(".about-btn");
+const settingsModal = document.getElementById("settingsModal");
+const aboutModal = document.getElementById("aboutModal");
+const closeModalBtns = document.querySelectorAll(".close-modal");
+const githubBtn = document.querySelector(".github-btn");
+const saveSettingsBtn = document.getElementById("saveSettings");
+const githubTokenInput = document.getElementById("githubTokenInput");
 
 // State management
 let currentTasks = [];
-let currentLanguage = 'generic'; // Add variable to store detected language
+let currentLanguage = "generic"; // Add variable to store detected language
 let sidebarCollapsed = false;
-let githubToken = localStorage.getItem('githubToken') || '';
+let githubToken = localStorage.getItem("githubToken") || "";
 
 // Initialize GitHub token from storage
 if (githubToken) {
-    githubTokenInput.value = githubToken;
+  githubTokenInput.value = githubToken;
 }
 
 // Initial loading animation
 function createWarpStars() {
-    for (let i = 0; i < 100; i++) {
-        const star = document.createElement('div');
-        star.classList.add('warp-star');
-        star.style.left = `${Math.random() * 100}%`;
-        star.style.top = `${Math.random() * 100}%`;
-        star.style.animationDuration = `${1 + Math.random() * 2}s`;
-        star.style.animationDelay = `${Math.random() * 2}s`;
-        warpStars.appendChild(star);
-    }
+  for (let i = 0; i < 100; i++) {
+    const star = document.createElement("div");
+    star.classList.add("warp-star");
+    star.style.left = `${Math.random() * 100}%`;
+    star.style.top = `${Math.random() * 100}%`;
+    star.style.animationDuration = `${1 + Math.random() * 2}s`;
+    star.style.animationDelay = `${Math.random() * 2}s`;
+    warpStars.appendChild(star);
+  }
 }
 
 function hideInitialLoading() {
-    initialLoading.style.opacity = '0';
-    setTimeout(() => {
-        initialLoading.style.display = 'none';
-    }, 500);
+  initialLoading.style.opacity = "0";
+  setTimeout(() => {
+    initialLoading.style.display = "none";
+  }, 500);
 }
 
 // Initialize loading animation
@@ -67,248 +69,262 @@ createWarpStars();
 setTimeout(hideInitialLoading, 3000);
 
 // Sidebar toggle
-sidebarToggle.addEventListener('click', () => {
-    sidebarCollapsed = !sidebarCollapsed;
-    sidebar.classList.toggle('collapsed', sidebarCollapsed);
-    sidebarToggle.innerHTML = sidebarCollapsed ? 
-        '<i class="fas fa-chevron-right"></i>' : 
-        '<i class="fas fa-chevron-left"></i>';
+sidebarToggle.addEventListener("click", () => {
+  sidebarCollapsed = !sidebarCollapsed;
+  sidebar.classList.toggle("collapsed", sidebarCollapsed);
+  sidebarToggle.innerHTML = sidebarCollapsed
+    ? '<i class="fas fa-chevron-right"></i>'
+    : '<i class="fas fa-chevron-left"></i>';
+});
+
+hamburgerBtn.addEventListener("click", () => {
+  navMenu.classList.toggle("show");
 });
 
 // Modal functionality
 function openModal(modal) {
-    modal.style.display = 'flex';
+  modal.style.display = "flex";
 }
 
 function closeModal(modal) {
-    modal.style.display = 'none';
+  modal.style.display = "none";
 }
 
-settingsBtn.addEventListener('click', () => openModal(settingsModal));
-aboutBtn.addEventListener('click', () => openModal(aboutModal));
+settingsBtn.addEventListener("click", () => openModal(settingsModal));
+aboutBtn.addEventListener("click", () => openModal(aboutModal));
 
-closeModalBtns.forEach(btn => {
-    btn.addEventListener('click', () => {
-        const modal = btn.closest('.modal');
-        closeModal(modal);
-    });
+closeModalBtns.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const modal = btn.closest(".modal");
+    closeModal(modal);
+  });
 });
 
-window.addEventListener('click', (e) => {
-    if (e.target.classList.contains('modal')) {
-        closeModal(e.target);
-    }
+window.addEventListener("click", (e) => {
+  if (e.target.classList.contains("modal")) {
+    closeModal(e.target);
+  }
 });
 
 // Settings handling
-saveSettingsBtn.addEventListener('click', async () => {
-    const newToken = githubTokenInput.value.trim();
-    
-    try {
-        const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ token: newToken })
-        });
-
-        const data = await response.json();
-        if (data.success) {
-            localStorage.setItem('githubToken', newToken);
-            alert('Settings saved successfully!');
-            closeModal(settingsModal);
-        } else {
-            throw new Error(data.error || 'Failed to save settings');
-        }
-    } catch (error) {
-        alert('Error saving settings: ' + error.message);
+saveSettingsBtn.addEventListener("click", async () => {
+  const newToken = githubTokenInput.value.trim();
+
+  try {
+    const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ token: newToken }),
+    });
+
+    const data = await response.json();
+    if (data.success) {
+      localStorage.setItem("githubToken", newToken);
+      alert("Settings saved successfully!");
+      closeModal(settingsModal);
+    } else {
+      throw new Error(data.error || "Failed to save settings");
     }
+  } catch (error) {
+    alert("Error saving settings: " + error.message);
+  }
 });
 
 // Clear history
-clearHistory.addEventListener('click', () => {
-    historyList.innerHTML = '';
+clearHistory.addEventListener("click", () => {
+  historyList.innerHTML = "";
 });
 // Removed redundant submitBtn listener that called Gemini directly from frontend.
 // The listener below correctly calls the backend API.
 
 // GitHub button handling
-githubBtn.addEventListener('click', async () => {
-    const githubToken = localStorage.getItem('githubToken');
-    if (!githubToken) {
-        alert('Please set your GitHub Access Token in Settings first');
-        openModal(settingsModal);
-        return;
-    }
+githubBtn.addEventListener("click", async () => {
+  const githubToken = localStorage.getItem("githubToken");
+  if (!githubToken) {
+    alert("Please set your GitHub Access Token in Settings first");
+    openModal(settingsModal);
+    return;
+  }
+
+  try {
+    // Verify token is still valid
+    const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ token: githubToken }),
+    });
 
-    try {
-        // Verify token is still valid
-        const response = await fetch(ENDPOINTS.UPDATE_GITHUB_TOKEN, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ token: githubToken })
-        });
-
-        const data = await response.json();
-        if (data.success) {
-            // Token is valid, redirect to GitHub repositories
-            window.open('https://github.com?tab=repositories', '_blank');
-        } else {
-            // Token is invalid
-            alert('Your GitHub token appears to be invalid. Please update it in Settings.');
-            openModal(settingsModal);
-        }
-    } catch (error) {
-        alert('Error connecting to GitHub. Please check your token in Settings.');
-        openModal(settingsModal);
+    const data = await response.json();
+    if (data.success) {
+      // Token is valid, redirect to GitHub repositories
+      window.open("https://github.com?tab=repositories", "_blank");
+    } else {
+      // Token is invalid
+      alert(
+        "Your GitHub token appears to be invalid. Please update it in Settings."
+      );
+      openModal(settingsModal);
     }
+  } catch (error) {
+    alert("Error connecting to GitHub. Please check your token in Settings.");
+    openModal(settingsModal);
+  }
 });
 
 // Event Listeners
-submitBtn.addEventListener('click', async () => {
-    const requirement = requirementInput.value.trim();
-    if (!requirement) return;
-
-    try {
-        submitBtn.disabled = true;
-        submitBtn.textContent = 'Processing...';
-        
-        // Show output section with loading indicator
-        outputSection.classList.remove('hidden');
-        loadingIndicator.style.display = 'flex';
-        developmentGoals.innerHTML = '';
-        
-        const response = await fetch(ENDPOINTS.PROCESS_REQUIREMENT, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ requirement })
-        });
-
-        const data = await response.json();
-        if (!data.success) throw new Error(data.error || 'Failed to process requirement');
-
-        if (!data.tasks || !Array.isArray(data.tasks)) {
-            throw new Error('Invalid response format: tasks array is missing');
-        }
+submitBtn.addEventListener("click", async () => {
+  const requirement = requirementInput.value.trim();
+  if (!requirement) return;
+
+  try {
+    submitBtn.disabled = true;
+    submitBtn.textContent = "Processing...";
+
+    // Show output section with loading indicator
+    outputSection.classList.remove("hidden");
+    loadingIndicator.style.display = "flex";
+    developmentGoals.innerHTML = "";
+
+    const response = await fetch(ENDPOINTS.PROCESS_REQUIREMENT, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ requirement }),
+    });
 
-        currentTasks = data.tasks;
-        currentLanguage = data.techStack?.language || 'generic'; // Store the language
-
-        // Hide loading indicator and display analysis
-        loadingIndicator.style.display = 'none';
-        displayAnalysis(data);
-        saveToHistory(requirement, currentTasks);
-    } catch (error) {
-        console.error('Error processing requirement:', error);
-        alert('Error processing requirement: ' + error.message);
-        loadingIndicator.style.display = 'none';
-    } finally {
-        submitBtn.disabled = false;
-        submitBtn.textContent = 'Generate Plan';
+    const data = await response.json();
+    if (!data.success)
+      throw new Error(data.error || "Failed to process requirement");
+
+    if (!data.tasks || !Array.isArray(data.tasks)) {
+      throw new Error("Invalid response format: tasks array is missing");
     }
+
+    currentTasks = data.tasks;
+    currentLanguage = data.techStack?.language || "generic"; // Store the language
+
+    // Hide loading indicator and display analysis
+    loadingIndicator.style.display = "none";
+    displayAnalysis(data);
+    saveToHistory(requirement, currentTasks);
+  } catch (error) {
+    console.error("Error processing requirement:", error);
+    alert("Error processing requirement: " + error.message);
+    loadingIndicator.style.display = "none";
+  } finally {
+    submitBtn.disabled = false;
+    submitBtn.textContent = "Generate Plan";
+  }
 });
 
-downloadMdBtn.addEventListener('click', () => {
-    const content = currentTasks.join('\n');
-    const blob = new Blob([content], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'development-goals.md';
-    a.click();
-    URL.revokeObjectURL(url);
+downloadMdBtn.addEventListener("click", () => {
+  const content = currentTasks.join("\n");
+  const blob = new Blob([content], { type: "text/markdown" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "development-goals.md";
+  a.click();
+  URL.revokeObjectURL(url);
 });
 
-generateCodeBtn.addEventListener('click', async () => {
-    if (!currentTasks.length) return;
-
-    try {
-        generateCodeBtn.disabled = true;
-        generateCodeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Generating...'; // Use innerHTML for icon
-
-        const response = await fetch(ENDPOINTS.GENERATE_CODE, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            // Send tasks and the stored language as project_type
-            body: JSON.stringify({ tasks: currentTasks, project_type: currentLanguage })
-        });
-
-        if (response.ok && response.headers.get('Content-Type')?.includes('application/zip')) {
-            // Success: Handle the ZIP file download
-            const blob = await response.blob();
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.style.display = 'none';
-            a.href = url;
-            a.download = 'generated_project.zip'; // Fixed filename
-            document.body.appendChild(a);
-            a.click();
-            window.URL.revokeObjectURL(url);
-            a.remove();
-            pushGithubBtn.classList.remove('hidden'); // Show GitHub button on success
+generateCodeBtn.addEventListener("click", async () => {
+  if (!currentTasks.length) return;
+
+  try {
+    generateCodeBtn.disabled = true;
+    generateCodeBtn.innerHTML =
+      '<i class="fas fa-spinner fa-spin"></i> Generating...'; // Use innerHTML for icon
+
+    const response = await fetch(ENDPOINTS.GENERATE_CODE, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      // Send tasks and the stored language as project_type
+      body: JSON.stringify({
+        tasks: currentTasks,
+        project_type: currentLanguage,
+      }),
+    });
+
+    if (
+      response.ok &&
+      response.headers.get("Content-Type")?.includes("application/zip")
+    ) {
+      // Success: Handle the ZIP file download
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.href = url;
+      a.download = "generated_project.zip"; // Fixed filename
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      a.remove();
+      pushGithubBtn.classList.remove("hidden"); // Show GitHub button on success
+    } else {
+      // Error: Try to parse JSON error message from backend
+      let errorMsg = "Failed to generate project files. Unknown error.";
+      try {
+        const errorData = await response.json();
+        if (errorData && errorData.error) {
+          errorMsg = errorData.error;
         } else {
-            // Error: Try to parse JSON error message from backend
-            let errorMsg = 'Failed to generate project files. Unknown error.';
-            try {
-                const errorData = await response.json();
-                if (errorData && errorData.error) {
-                    errorMsg = errorData.error;
-                } else {
-                     errorMsg = `Server responded with status ${response.status}: ${response.statusText}`;
-                }
-            } catch (jsonError) {
-                 errorMsg = `Server responded with status ${response.status}. Failed to parse error message.`;
-                 console.error("Failed to parse error JSON:", jsonError);
-                 console.error("Response status:", response.status);
-                 console.error("Response status text:", response.statusText);
-            }
-            throw new Error(errorMsg); // Throw the extracted or generated error message
+          errorMsg = `Server responded with status ${response.status}: ${response.statusText}`;
         }
-
-    } catch (error) {
-        // Use the specific alert message format
-        alert('Error generating code: ' + error.message);
-        console.error('Error in generateCodeBtn:', error);
-    } finally {
-        generateCodeBtn.disabled = false;
-        generateCodeBtn.innerHTML = '<i class="fas fa-code"></i> Generate Codebase'; // Restore button
+      } catch (jsonError) {
+        errorMsg = `Server responded with status ${response.status}. Failed to parse error message.`;
+        console.error("Failed to parse error JSON:", jsonError);
+        console.error("Response status:", response.status);
+        console.error("Response status text:", response.statusText);
+      }
+      throw new Error(errorMsg); // Throw the extracted or generated error message
     }
+  } catch (error) {
+    // Use the specific alert message format
+    alert("Error generating code: " + error.message);
+    console.error("Error in generateCodeBtn:", error);
+  } finally {
+    generateCodeBtn.disabled = false;
+    generateCodeBtn.innerHTML = '<i class="fas fa-code"></i> Generate Codebase'; // Restore button
+  }
 });
 
-pushGithubBtn.addEventListener('click', async () => {
-    const repoName = prompt('Enter repository name:');
-    if (!repoName) return;
-
-    try {
-        pushGithubBtn.disabled = true;
-        pushGithubBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Pushing...';
-
-        const response = await fetch(ENDPOINTS.PUSH_GITHUB, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                repoName,
-                tasks: currentTasks
-            })
-        });
-
-        const data = await response.json();
-        if (!data.success) throw new Error(data.error);
-
-        // Create a custom success modal instead of alert
-        const successModal = document.createElement('div');
-        successModal.className = 'modal';
-        successModal.style.display = 'flex';
-        successModal.innerHTML = `
+pushGithubBtn.addEventListener("click", async () => {
+  const repoName = prompt("Enter repository name:");
+  if (!repoName) return;
+
+  try {
+    pushGithubBtn.disabled = true;
+    pushGithubBtn.innerHTML =
+      '<i class="fas fa-spinner fa-spin"></i> Pushing...';
+
+    const response = await fetch(ENDPOINTS.PUSH_GITHUB, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        repoName,
+        tasks: currentTasks,
+      }),
+    });
+
+    const data = await response.json();
+    if (!data.success) throw new Error(data.error);
+
+    // Create a custom success modal instead of alert
+    const successModal = document.createElement("div");
+    successModal.className = "modal";
+    successModal.style.display = "flex";
+    successModal.innerHTML = `
             <div class="modal-content">
                 <button class="close-modal">&times;</button>
                 <h2><i class="fas fa-check-circle" style="color: #4CAF50;"></i> Success!</h2>
@@ -316,98 +332,100 @@ pushGithubBtn.addEventListener('click', async () => {
                 <p>Repository URL: <a href="${data.repoUrl}" target="_blank" style="color: #4facfe;">${data.repoUrl}</a></p>
             </div>
         `;
-        document.body.appendChild(successModal);
-        
-        // Add event listeners to close the modal
-        const closeBtn = successModal.querySelector('.close-modal');
-        closeBtn.addEventListener('click', () => {
-            document.body.removeChild(successModal);
-        });
-        
-        successModal.addEventListener('click', (e) => {
-            if (e.target === successModal) {
-                document.body.removeChild(successModal);
-            }
-        });
-    } catch (error) {
-        alert('Error pushing to GitHub: ' + error.message);
-    } finally {
-        pushGithubBtn.disabled = false;
-        pushGithubBtn.innerHTML = '<i class="fab fa-github"></i> Push to GitHub';
-    }
+    document.body.appendChild(successModal);
+
+    // Add event listeners to close the modal
+    const closeBtn = successModal.querySelector(".close-modal");
+    closeBtn.addEventListener("click", () => {
+      document.body.removeChild(successModal);
+    });
+
+    successModal.addEventListener("click", (e) => {
+      if (e.target === successModal) {
+        document.body.removeChild(successModal);
+      }
+    });
+  } catch (error) {
+    alert("Error pushing to GitHub: " + error.message);
+  } finally {
+    pushGithubBtn.disabled = false;
+    pushGithubBtn.innerHTML = '<i class="fab fa-github"></i> Push to GitHub';
+  }
 });
 
 // Helper Functions
 function displayTasks(tasks) {
-    developmentGoals.innerHTML = '';
-    
-    // Add tasks with staggered animation
-    tasks.forEach((task, index) => {
-        const taskElement = document.createElement('div');
-        taskElement.className = 'task';
-        taskElement.textContent = `${index + 1}. ${task}`;
-        taskElement.style.animationDelay = `${0.1 * index}s`;
-        developmentGoals.appendChild(taskElement);
-    });
-    
-    outputSection.classList.remove('hidden');
+  developmentGoals.innerHTML = "";
+
+  // Add tasks with staggered animation
+  tasks.forEach((task, index) => {
+    const taskElement = document.createElement("div");
+    taskElement.className = "task";
+    taskElement.textContent = `${index + 1}. ${task}`;
+    taskElement.style.animationDelay = `${0.1 * index}s`;
+    developmentGoals.appendChild(taskElement);
+  });
+
+  outputSection.classList.remove("hidden");
 }
 
 function saveToHistory(requirement, tasks) {
-    const historyItem = document.createElement('div');
-    historyItem.className = 'history-item';
-    historyItem.textContent = requirement.substring(0, 50) + '...';
-    historyItem.addEventListener('click', () => {
-        requirementInput.value = requirement;
-        currentTasks = tasks;
-        displayTasks(tasks);
-    });
-    historyList.insertBefore(historyItem, historyList.firstChild);
+  const historyItem = document.createElement("div");
+  historyItem.className = "history-item";
+  historyItem.textContent = requirement.substring(0, 50) + "...";
+  historyItem.addEventListener("click", () => {
+    requirementInput.value = requirement;
+    currentTasks = tasks;
+    displayTasks(tasks);
+  });
+  historyList.insertBefore(historyItem, historyList.firstChild);
 }
 
 // Removed downloadFiles function as it's handled directly in the event listener now.
 
 function displayAnalysis(data) {
-    developmentGoals.innerHTML = '';
-    
-    // Display tech stack
-    if (data.techStack) {
-        const techStackSection = document.createElement('div');
-        techStackSection.className = 'analysis-section';
-        techStackSection.innerHTML = `
+  developmentGoals.innerHTML = "";
+
+  // Display tech stack
+  if (data.techStack) {
+    const techStackSection = document.createElement("div");
+    techStackSection.className = "analysis-section";
+    techStackSection.innerHTML = `
             <h3>Tech Stack</h3>
             <div class="tech-info">
                 <p><strong>Language:</strong> ${data.techStack.language}</p>
-                <p><strong>Frameworks:</strong> ${data.techStack.frameworks.join(', ') || 'None'}</p>
+                <p><strong>Frameworks:</strong> ${
+                  data.techStack.frameworks.join(", ") || "None"
+                }</p>
             </div>
         `;
-        developmentGoals.appendChild(techStackSection);
-    }
-    
-    // Display project structure
-    if (data.projectStructure) {
-        const structureSection = document.createElement('div');
-        structureSection.className = 'analysis-section';
-        structureSection.innerHTML = `
+    developmentGoals.appendChild(techStackSection);
+  }
+
+  // Display project structure
+  if (data.projectStructure) {
+    const structureSection = document.createElement("div");
+    structureSection.className = "analysis-section";
+    structureSection.innerHTML = `
             <h3>Project Structure</h3>
             <pre class="project-tree">${data.projectStructure}</pre>
         `;
-        developmentGoals.appendChild(structureSection);
-    }
-    
-    // Display tasks with staggered animation
-    const tasksSection = document.createElement('div');
-    tasksSection.className = 'analysis-section';
-    tasksSection.innerHTML = '<h3>Development Tasks</h3>';
-    
-    data.tasks.forEach((task, index) => {
-        const taskElement = document.createElement('div');
-        taskElement.className = 'task';
-        taskElement.textContent = task;
-        taskElement.style.animationDelay = `${0.1 * index}s`;
-        tasksSection.appendChild(taskElement);
-    });
-    
-    developmentGoals.appendChild(tasksSection);
-    outputSection.classList.remove('hidden');
+    developmentGoals.appendChild(structureSection);
+  }
+
+  // Display tasks with staggered animation
+  const tasksSection = document.createElement("div");
+  tasksSection.className = "analysis-section";
+  tasksSection.innerHTML = "<h3>Development Tasks</h3>";
+
+  data.tasks.forEach((task, index) => {
+    const taskElement = document.createElement("div");
+    taskElement.className = "task";
+    taskElement.textContent = task;
+    taskElement.style.animationDelay = `${0.1 * index}s`;
+    tasksSection.appendChild(taskElement);
+  });
+
+  developmentGoals.appendChild(tasksSection);
+  outputSection.classList.remove("hidden");
 }
diff --git a/styles.css b/styles.css
index b66e677..67c1c78 100644
--- a/styles.css
+++ b/styles.css
@@ -1,925 +1,1090 @@
 :root {
-    --deep-blue: #020d1f;
-    --accent-blue: #0a4c95;
-    --text-color: #ffffff;
+  --deep-blue: #020d1f;
+  --accent-blue: #0a4c95;
+  --text-color: #ffffff;
 }
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M12,0C12,0 9,3 9,3L9,8L6,8L6,10L9,10L9,16L6,16L6,18L9,18L9,24L12,24L15,24L15,18L18,18L18,16L15,16L15,10L18,10L18,8L15,8L15,3C15,3 12,0 12,0z"/></svg>') 12 12, auto;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M12,0C12,0 9,3 9,3L9,8L6,8L6,10L9,10L9,16L6,16L6,18L9,18L9,24L12,24L15,24L15,18L18,18L18,16L15,16L15,10L18,10L18,8L15,8L15,3C15,3 12,0 12,0z"/></svg>')
+      12 12,
+    auto;
 }
 
 @keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes warpSpeed {
-    0% { transform: scale(0.1); opacity: 0; }
-    50% { opacity: 1; }
-    100% { transform: scale(1.5); opacity: 0; }
+  0% {
+    transform: scale(0.1);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
 }
 
 .initial-loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--deep-blue);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    transition: opacity 0.5s ease-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--deep-blue);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  transition: opacity 0.5s ease-out;
 }
 
 .loading-logo {
-    font-size: 5em;
-    font-weight: bold;
-    background: linear-gradient(45deg, #4facfe, #00f2fe);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    animation: pulse 2s infinite;
+  font-size: 5em;
+  font-weight: bold;
+  background: linear-gradient(45deg, #4facfe, #00f2fe);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: pulse 2s infinite;
 }
 
 .warp-stars {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 .warp-star {
-    position: absolute;
-    background-color: white;
-    width: 2px;
-    height: 2px;
-    border-radius: 50%;
-    animation: warpSpeed 1.5s linear infinite;
+  position: absolute;
+  background-color: white;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  animation: warpSpeed 1.5s linear infinite;
 }
 
 @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
 body {
-    background-color: var(--deep-blue);
-    color: var(--text-color);
-    font-family: 'Arial', sans-serif;
-    min-height: 100vh;
-    overflow-x: hidden;
+  background-color: var(--deep-blue);
+  color: var(--text-color);
+  font-family: "Arial", sans-serif;
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 
 .stars {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
-    background-size: 50px 50px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(255, 255, 255, 0.1) 1px,
+    transparent 1px
+  );
+  background-size: 50px 50px;
 }
 
 .stars::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    animation: stars-rise 15s linear infinite;
-    background: 
-        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
-        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
-    background-size: 30px 30px, 40px 40px;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  animation: stars-rise 15s linear infinite;
+  background: radial-gradient(
+      circle at 50% 50%,
+      rgba(255, 255, 255, 0.2) 1px,
+      transparent 1px
+    ),
+    radial-gradient(
+      circle at 30% 70%,
+      rgba(255, 255, 255, 0.15) 1px,
+      transparent 1px
+    );
+  background-size: 30px 30px, 40px 40px;
 }
 
 @keyframes stars-rise {
-    0% { transform: translateY(100%); }
-    100% { transform: translateY(-100%); }
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
 }
 
 .container {
-    display: flex;
-    min-height: 100vh;
-    padding: 80px 20px 20px 20px; /* Added top padding to account for fixed header */
-    position: relative;
-    animation: fadeIn 1s ease-out;
+  display: flex;
+  min-height: 100vh;
+  padding: 80px 20px 20px 20px; /* Added top padding to account for fixed header */
+  position: relative;
+  animation: fadeIn 1s ease-out;
 }
 
 .top-nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 20px;
-    z-index: 10;
-    background: rgba(2, 13, 31, 0.8);
-    backdrop-filter: blur(10px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px;
+  z-index: 10;
+  background: rgba(2, 13, 31, 0.8);
+  backdrop-filter: blur(10px);
 }
 
 .synapse-text {
-    position: absolute;
-    left: 20px;
-    font-size: 1.5em;
-    font-weight: bold;
-    background: linear-gradient(45deg, #4facfe, #00f2fe);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
+  position: absolute;
+  left: 20px;
+  font-size: 1.5em;
+  font-weight: bold;
+  background: linear-gradient(45deg, #4facfe, #00f2fe);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.hamburger {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5em;
+  padding: 8px;
+  display: none; /* Hidden by default on desktop */
+  margin-left: auto;
+}
+.nav-menu {
+  display: flex;
 }
-
 .nav-btn {
-    background: rgba(255, 255, 255, 0.1);
-    border: none;
-    color: var(--text-color);
-    padding: 12px;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--text-color);
+  padding: 12px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .nav-btn i {
-    font-size: 1.2em;
+  font-size: 1.2em;
 }
 
 .nav-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
 }
 
 .sidebar {
-    width: 280px;
-    background: rgba(10, 76, 149, 0.1);
-    backdrop-filter: blur(10px);
-    padding: 20px;
-    border-radius: 15px;
-    margin-right: 20px;
-    margin-top: 20px; /* Added margin to align with the fixed header */
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 40px);
-    position: relative;
-    transition: width 0.3s ease;
+  width: 280px;
+  background: rgba(10, 76, 149, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 20px;
+  border-radius: 15px;
+  margin-right: 20px;
+  margin-top: 20px; /* Added margin to align with the fixed header */
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 40px);
+  position: relative;
+  transition: width 0.3s ease;
 }
 
 .sidebar.collapsed {
-    width: 60px;
+  width: 102px;
+  background: none;
 }
 
 .sidebar-toggle {
-    position: absolute;
-    top: 20px;
-    right: -15px;
-    background: var(--accent-blue);
-    border: none;
-    color: white;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 5;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: 20px;
+  right: -15px;
+  background: var(--accent-blue);
+  border: none;
+  color: white;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 5;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 
 .history-pane {
-    flex-grow: 1;
-    margin-bottom: 20px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  flex-grow: 1;
+  margin-bottom: 20px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .history-pane h3 {
-    margin-bottom: 15px;
-    color: var(--text-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  margin-bottom: 15px;
+  color: var(--text-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .history-list {
-    overflow-y: auto;
-    flex-grow: 1;
-    max-height: calc(100vh - 200px);
-    scrollbar-width: thin;
-    scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
+  overflow-y: auto;
+  flex-grow: 1;
+  max-height: calc(100vh - 200px);
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
 }
 
 .history-list::-webkit-scrollbar {
-    width: 6px;
+  width: 6px;
 }
 
 .history-list::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
 }
 
 .history-list::-webkit-scrollbar-thumb {
-    background-color: var(--accent-blue);
-    border-radius: 10px;
+  background-color: var(--accent-blue);
+  border-radius: 10px;
 }
 
 .clear-history {
-    background: none;
-    border: none;
-    color: var(--text-color);
-    opacity: 0.7;
-    cursor: pointer;
-    font-size: 0.8em;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  opacity: 0.7;
+  cursor: pointer;
+  font-size: 0.8em;
 }
 
 .clear-history:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .main-content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .logo-container {
-    position: relative;
-    margin-bottom: 40px;
-    width: 300px;
-    height: 300px;
-    overflow: hidden;
-    border-radius: 15px;
-    box-shadow: 0 0 30px rgba(79, 172, 254, 0.3);
+  position: relative;
+  margin-bottom: 40px;
+  width: 300px;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 15px;
+  box-shadow: 0 0 30px rgba(79, 172, 254, 0.3);
 }
 
 .synapse-logo-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: relative;
-    z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: relative;
+  z-index: 1;
 }
 
 .synapse-logo {
-    font-size: 4em;
-    font-weight: bold;
-    background: linear-gradient(45deg, #4facfe, #00f2fe);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    position: relative;
-    z-index: 1;
+  font-size: 4em;
+  font-weight: bold;
+  background: linear-gradient(45deg, #4facfe, #00f2fe);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  position: relative;
+  z-index: 1;
 }
 
 .water-effect {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-        180deg,
-        rgba(255, 255, 255, 0.1) 0%,
-        rgba(255, 255, 255, 0.2) 50%,
-        rgba(255, 255, 255, 0.1) 100%
-    );
-    filter: blur(8px);
-    animation: water-move 3s ease-in-out infinite;
-    z-index: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.1) 100%
+  );
+  filter: blur(8px);
+  animation: water-move 3s ease-in-out infinite;
+  z-index: 0;
 }
 
 @keyframes water-move {
-    0%, 100% { transform: translateY(-5px); }
-    50% { transform: translateY(5px); }
+  0%,
+  100% {
+    transform: translateY(-5px);
+  }
+  50% {
+    transform: translateY(5px);
+  }
 }
 
 .input-section {
-    width: 80%;
-    max-width: 800px;
+  width: 80%;
+  max-width: 800px;
 }
 
 .requirement-input {
-    width: 100%;
-    height: 150px;
-    background: rgba(255, 255, 255, 0.1);
-    border: 2px solid var(--accent-blue);
-    border-radius: 10px;
-    padding: 15px;
-    color: var(--text-color);
-    resize: vertical;
-    margin-bottom: 20px;
-}
-
-.submit-btn, .action-buttons button {
-    background: var(--accent-blue);
-    color: var(--text-color);
-    border: none;
-    padding: 12px 25px;
-    border-radius: 8px;
-    font-weight: bold;
-    transition: all 0.3s ease;
+  width: 100%;
+  height: 150px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid var(--accent-blue);
+  border-radius: 10px;
+  padding: 15px;
+  color: var(--text-color);
+  resize: vertical;
+  margin-bottom: 20px;
+}
+
+.submit-btn,
+.action-buttons button {
+  background: var(--accent-blue);
+  color: var(--text-color);
+  border: none;
+  padding: 12px 25px;
+  border-radius: 8px;
+  font-weight: bold;
+  transition: all 0.3s ease;
 }
 
-.submit-btn:hover, .action-buttons button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
+.submit-btn:hover,
+.action-buttons button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
 }
 
 .output-section {
-    width: 80%;
-    max-width: 800px;
-    margin-top: 30px;
-    margin-bottom: 80px; /* Space for footer */
+  width: 80%;
+  max-width: 800px;
+  margin-top: 30px;
+  margin-bottom: 80px; /* Space for footer */
 }
 
 .output-section.hidden {
-    display: none;
+  display: none;
 }
 
 .development-goals {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    padding: 20px;
-    margin-bottom: 20px;
-    min-height: 100px;
-    position: relative;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 20px;
+  min-height: 100px;
+  position: relative;
 }
 
 .loading-indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(2, 13, 31, 0.7);
-    border-radius: 10px;
-    z-index: 5;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(2, 13, 31, 0.7);
+  border-radius: 10px;
+  z-index: 5;
 }
 
 .loading-indicator::after {
-    content: 'Processing your request...';
-    position: absolute;
-    bottom: -30px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 0.9em;
-    color: var(--text-color);
-    animation: loadingPulse 2s infinite;
+  content: "Processing your request...";
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.9em;
+  color: var(--text-color);
+  animation: loadingPulse 2s infinite;
 }
 
 @keyframes loadingPulse {
-    0%, 100% { opacity: 0.4; }
-    50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 .action-buttons {
-    display: flex;
-    gap: 15px;
-    justify-content: center;
-    margin-top: 20px;
-    flex-wrap: wrap;
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  margin-top: 20px;
+  flex-wrap: wrap;
 }
 
 .action-buttons button {
-    margin: 0 10px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  margin: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .action-buttons button i {
-    font-size: 1.2em;
+  font-size: 1.2em;
 }
 
 .action-buttons button:disabled {
-    background: rgba(10, 76, 149, 0.5);
-    cursor: not-allowed;
-    transform: none;
+  background: rgba(10, 76, 149, 0.5);
+  cursor: not-allowed;
+  transform: none;
 }
 
 .action-buttons button:disabled:hover {
-    transform: none;
-    box-shadow: none;
+  transform: none;
+  box-shadow: none;
 }
 
 footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    text-align: center;
-    padding: 15px;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(5px);
-    z-index: 10;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 15px;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+  z-index: 10;
 }
 
 .task {
-    background: rgba(255, 255, 255, 0.05);
-    padding: 12px;
-    margin: 8px 0;
-    border-radius: 8px;
-    border-left: 3px solid var(--accent-blue);
-    transition: all 0.3s ease;
-    animation: fadeIn 0.5s ease-out;
-    animation-fill-mode: both;
-}
-
-.task:nth-child(1) { animation-delay: 0.1s; }
-.task:nth-child(2) { animation-delay: 0.2s; }
-.task:nth-child(3) { animation-delay: 0.3s; }
-.task:nth-child(4) { animation-delay: 0.4s; }
-.task:nth-child(5) { animation-delay: 0.5s; }
-.task:nth-child(6) { animation-delay: 0.6s; }
-.task:nth-child(7) { animation-delay: 0.7s; }
-.task:nth-child(8) { animation-delay: 0.8s; }
+  background: rgba(255, 255, 255, 0.05);
+  padding: 12px;
+  margin: 8px 0;
+  border-radius: 8px;
+  border-left: 3px solid var(--accent-blue);
+  transition: all 0.3s ease;
+  animation: fadeIn 0.5s ease-out;
+  animation-fill-mode: both;
+}
+
+.task:nth-child(1) {
+  animation-delay: 0.1s;
+}
+.task:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.task:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.task:nth-child(4) {
+  animation-delay: 0.4s;
+}
+.task:nth-child(5) {
+  animation-delay: 0.5s;
+}
+.task:nth-child(6) {
+  animation-delay: 0.6s;
+}
+.task:nth-child(7) {
+  animation-delay: 0.7s;
+}
+.task:nth-child(8) {
+  animation-delay: 0.8s;
+}
 
 .task:hover {
-    background: rgba(255, 255, 255, 0.1);
-    transform: translateX(5px);
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateX(5px);
 }
 
 .history-item {
-    padding: 10px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    cursor: pointer;
-    transition: all 0.3s ease;
+  padding: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
 .history-item:hover {
-    background: rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.05);
 }
 
 /* Modal styles */
 .modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
-    z-index: 100;
-    justify-content: center;
-    align-items: center;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 100;
+  justify-content: center;
+  align-items: center;
 }
 
 .modal-content {
-    background: linear-gradient(135deg, rgba(10, 76, 149, 0.9), rgba(2, 13, 31, 0.9));
-    padding: 30px;
-    border-radius: 15px;
-    width: 80%;
-    max-width: 600px;
-    max-height: 80vh;
-    overflow-y: auto;
-    position: relative;
-    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
-    animation: modalFadeIn 0.3s ease-out;
+  background: linear-gradient(
+    135deg,
+    rgba(10, 76, 149, 0.9),
+    rgba(2, 13, 31, 0.9)
+  );
+  padding: 30px;
+  border-radius: 15px;
+  width: 80%;
+  max-width: 600px;
+  max-height: 80vh;
+  overflow-y: auto;
+  position: relative;
+  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
+  animation: modalFadeIn 0.3s ease-out;
 }
 
 @keyframes modalFadeIn {
-    from { opacity: 0; transform: translateY(-50px); }
-    to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .close-modal {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    background: none;
-    border: none;
-    color: var(--text-color);
-    font-size: 1.5em;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: opacity 0.3s;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: none;
+  border: none;
+  color: var(--text-color);
+  font-size: 1.5em;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.3s;
 }
 
 .close-modal:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .settings-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-    margin-top: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-top: 20px;
 }
 
 .settings-item {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .settings-item label {
-    font-weight: bold;
+  font-weight: bold;
 }
 
-.settings-item select, 
+.settings-item select,
 .settings-item input {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 10px;
-    border-radius: 5px;
-    color: var(--text-color);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 10px;
+  border-radius: 5px;
+  color: var(--text-color);
 }
 
 .toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
 }
 
 .toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
 }
 
 .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.1);
-    transition: .4s;
-    border-radius: 34px;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  transition: 0.4s;
+  border-radius: 34px;
 }
 
 .slider:before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    transition: .4s;
-    border-radius: 50%;
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
 }
 
 input:checked + .slider {
-    background-color: var(--accent-blue);
+  background-color: var(--accent-blue);
 }
 
 input:checked + .slider:before {
-    transform: translateX(26px);
+  transform: translateX(26px);
 }
 
 .about-content {
-    line-height: 1.8;
+  line-height: 1.8;
 }
 
 .about-content h2 {
-    margin-bottom: 20px;
-    color: var(--text-color);
-    font-size: 2em;
+  margin-bottom: 20px;
+  color: var(--text-color);
+  font-size: 2em;
 }
 
 .about-content p {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
 }
 
 .about-content .highlight {
-    color: #4facfe;
-    font-weight: bold;
+  color: #4facfe;
+  font-weight: bold;
 }
 
 .analysis-section {
-    background: rgba(255, 255, 255, 0.05);
-    padding: 20px;
-    margin-bottom: 20px;
-    border-radius: 10px;
-    border-left: 3px solid var(--accent-blue);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  border-left: 3px solid var(--accent-blue);
 }
 
 .analysis-section h3 {
-    color: #4facfe;
-    margin-bottom: 15px;
-    font-size: 1.2em;
+  color: #4facfe;
+  margin-bottom: 15px;
+  font-size: 1.2em;
 }
 
 .tech-info {
-    display: flex;
-    gap: 20px;
+  display: flex;
+  gap: 20px;
 }
 
 .tech-info p {
-    background: rgba(255, 255, 255, 0.05);
-    padding: 8px 15px;
-    border-radius: 5px;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 8px 15px;
+  border-radius: 5px;
 }
 
 .project-tree {
-    background: rgba(0, 0, 0, 0.2);
-    padding: 15px;
-    border-radius: 5px;
-    font-family: monospace;
-    white-space: pre;
-    overflow-x: auto;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 15px;
+  border-radius: 5px;
+  font-family: monospace;
+  white-space: pre;
+  overflow-x: auto;
 }
 
 .save-settings-btn {
-    background: var(--accent-blue);
-    color: var(--text-color);
-    border: none;
-    padding: 12px 25px;
-    border-radius: 8px;
-    font-weight: bold;
-    transition: all 0.3s ease;
-    width: 100%;
-    margin-top: 20px;
+  background: var(--accent-blue);
+  color: var(--text-color);
+  border: none;
+  padding: 12px 25px;
+  border-radius: 8px;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  width: 100%;
+  margin-top: 20px;
 }
 
 .save-settings-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(10, 76, 149, 0.4);
 }
 
 /* Enhanced responsive design */
 @media (max-width: 768px) {
-    .container {
-        flex-direction: column;
-        padding: 60px 10px 10px 10px;
-    }
-    
-    .sidebar {
-        width: 100%;
-        margin-right: 0;
-        margin-bottom: 20px;
-        height: auto;
-    }
-    
-    .sidebar.collapsed {
-        height: 60px;
-        overflow: hidden;
-    }
-    
-    .main-content {
-        width: 100%;
-    }
-    
-    .logo-container {
-        width: 200px;
-        height: 200px;
-    }
-    
-    .input-section {
-        width: 95%;
-    }
-    
-    .output-section {
-        width: 95%;
-    }
-    
-    .synapse-text {
-        font-size: 1.2em;
-    }
-    
-    .nav-btn {
-        padding: 8px;
-        font-size: 0.9em;
-    }
-    
-    .nav-btn i {
-        font-size: 1em;
-    }
-    
-    .action-buttons {
-        flex-direction: column;
-        gap: 10px;
-    }
-    
-    .action-buttons button {
-        width: 100%;
-        margin: 0;
-    }
+  .top-nav {
+    padding: 15px 10px;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  .synapse-text {
+    position: relative;
+    left: 0;
+    margin-bottom: 5px;
+    width: 30%;
+    text-align: center;
+    font-size: 17px;
+  }
+
+  .container {
+    flex-direction: column;
+    padding: 60px 10px 10px 10px;
+  }
+
+  .nav-menu {
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+  }
+
+  .nav-menu.show {
+    display: flex;
+  }
+
+  .sidebar {
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 20px;
+    height: auto;
+    display: flex !important
+;
+    flex-direction: column;
+    position: relative;
+    padding: 4px 6px;
+    transition: height 0.3s ease;
+  }
+
+  .sidebar.collapsed {
+    background: none;
+    width: 0;
+  }
+  .sidebar.collapsed .history-pane {
+    display: none;
+  }
+
+  .sidebar-toggle {
+    display: block !important;
+    position: absolute;
+    top: 26px;
+    /* right: 0px; */
+    background-color: var(--accent-blue);
+    border: none;
+    color: white;
+    padding: 10px;
+    border-radius: 6px;
+    z-index: 100;
+  }
+  .hamburger {
+    display: block;
+  }
+
+  .history-pane {
+    display: block;
+  }
+  .main-content {
+    width: 100%;
+  }
+
+  .logo-container {
+    width: 200px;
+    height: 200px;
+  }
+
+  .input-section {
+    width: 95%;
+  }
+
+  .output-section {
+    width: 95%;
+  }
+
+  .synapse-text {
+    font-size: 1.2em;
+  }
+
+  .nav-btn {
+    padding: 8px;
+    font-size: 0.9em;
+  }
+
+  .nav-btn i {
+    font-size: 1em;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .action-buttons button {
+    width: 100%;
+    margin: 0;
+  }
 }
 
 @media (max-width: 480px) {
-    .top-nav {
-        padding: 15px 10px;
-        flex-wrap: wrap;
-        gap: 10px;
-    }
-    
-    .synapse-text {
-        position: relative;
-        left: 0;
-        margin-bottom: 10px;
-        width: 100%;
-        text-align: center;
-    }
-    
-    .logo-container {
-        width: 150px;
-        height: 150px;
-    }
-    
-    .requirement-input {
-        height: 120px;
-        font-size: 14px;
-    }
-    
-    .modal-content {
-        width: 95%;
-        padding: 20px;
-        margin: 10px;
-    }
-    
-    .settings-grid {
-        grid-template-columns: 1fr;
-        gap: 15px;
-    }
+  .top-nav {
+    padding: 15px 10px;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .synapse-text {
+    position: relative;
+    left: 0;
+    margin-bottom: 5px;
+    width: 30%;
+    text-align: center;
+    font-size: 17px;
+  }
+
+  .logo-container {
+    width: 150px;
+    height: 150px;
+  }
+
+  .requirement-input {
+    height: 120px;
+    font-size: 14px;
+  }
+
+  .modal-content {
+    width: 95%;
+    padding: 20px;
+    margin: 10px;
+  }
+
+  .settings-grid {
+    grid-template-columns: 1fr;
+    gap: 15px;
+  }
 }
 
 /* Improved loading animations */
 @keyframes loadingPulse {
-    0%, 100% { opacity: 0.4; }
-    50% { opacity: 1; }
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
 .loading-indicator::after {
-    content: 'Processing your request...';
-    position: absolute;
-    bottom: -30px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 0.9em;
-    color: var(--text-color);
-    animation: loadingPulse 2s infinite;
+  content: "Processing your request...";
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.9em;
+  color: var(--text-color);
+  animation: loadingPulse 2s infinite;
 }
 
 /* Enhanced button styles */
-.submit-btn:disabled, .action-buttons button:disabled {
-    background: rgba(10, 76, 149, 0.5);
-    cursor: not-allowed;
-    transform: none;
+.submit-btn:disabled,
+.action-buttons button:disabled {
+  background: rgba(10, 76, 149, 0.5);
+  cursor: not-allowed;
+  transform: none;
 }
 
-.submit-btn:disabled:hover, .action-buttons button:disabled:hover {
-    transform: none;
-    box-shadow: none;
+.submit-btn:disabled:hover,
+.action-buttons button:disabled:hover {
+  transform: none;
+  box-shadow: none;
 }
 
 /* Better scrollbar for all elements */
 * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent-blue) rgba(255, 255, 255, 0.1);
 }
 
 *::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+  width: 8px;
+  height: 8px;
 }
 
 *::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: var(--accent-blue);
-    border-radius: 10px;
-    border: 2px solid rgba(255, 255, 255, 0.1);
+  background-color: var(--accent-blue);
+  border-radius: 10px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
 }
 
 *::-webkit-scrollbar-thumb:hover {
-    background-color: #4facfe;
+  background-color: #4facfe;
 }
 
 /* Improved focus states for accessibility */
-button:focus, input:focus, textarea:focus, select:focus {
-    outline: 2px solid #4facfe;
-    outline-offset: 2px;
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+  outline: 2px solid #4facfe;
+  outline-offset: 2px;
 }
 
 /* Enhanced error states */
 .error-message {
-    background: rgba(217, 63, 11, 0.1);
-    border: 1px solid #d93f0b;
-    color: #ff6b6b;
-    padding: 10px;
-    border-radius: 5px;
-    margin: 10px 0;
-    animation: fadeIn 0.3s ease-out;
+  background: rgba(217, 63, 11, 0.1);
+  border: 1px solid #d93f0b;
+  color: #ff6b6b;
+  padding: 10px;
+  border-radius: 5px;
+  margin: 10px 0;
+  animation: fadeIn 0.3s ease-out;
 }
 
 .success-message {
-    background: rgba(14, 138, 22, 0.1);
-    border: 1px solid #0e8a16;
-    color: #40c057;
-    padding: 10px;
-    border-radius: 5px;
-    margin: 10px 0;
-    animation: fadeIn 0.3s ease-out;
+  background: rgba(14, 138, 22, 0.1);
+  border: 1px solid #0e8a16;
+  color: #40c057;
+  padding: 10px;
+  border-radius: 5px;
+  margin: 10px 0;
+  animation: fadeIn 0.3s ease-out;
 }
 
 /* Loading skeleton for better UX */
 .skeleton {
-    background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
-    background-size: 200% 100%;
-    animation: loading 1.5s infinite;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.1) 25%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.1) 75%
+  );
+  background-size: 200% 100%;
+  animation: loading 1.5s infinite;
 }
 
 @keyframes loading {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 /* Enhanced task styling */
 .task.completed {
-    opacity: 0.7;
-    text-decoration: line-through;
-    border-left-color: #40c057;
+  opacity: 0.7;
+  text-decoration: line-through;
+  border-left-color: #40c057;
 }
 
 .task.in-progress {
-    border-left-color: #fab005;
+  border-left-color: #fab005;
 }
 
 .task.blocked {
-    border-left-color: #fa5252;
+  border-left-color: #fa5252;
 }
 
 /* Improved modal animations */
 @keyframes modalSlideIn {
-    from { 
-        opacity: 0; 
-        transform: translateY(-50px) scale(0.9); 
-    }
-    to { 
-        opacity: 1; 
-        transform: translateY(0) scale(1); 
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-50px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .modal.show .modal-content {
-    animation: modalSlideIn 0.3s ease-out;
+  animation: modalSlideIn 0.3s ease-out;
 }
 
 /* Better visual hierarchy */
-h1, h2, h3, h4, h5, h6 {
-    margin-bottom: 0.5em;
-    line-height: 1.2;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 0.5em;
+  line-height: 1.2;
 }
 
 p {
-    line-height: 1.6;
-    margin-bottom: 1em;
+  line-height: 1.6;
+  margin-bottom: 1em;
 }
 
 /* Enhanced code styling for generated content */
 .code-block {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 5px;
-    padding: 15px;
-    font-family: 'Courier New', monospace;
-    overflow-x: auto;
-    margin: 10px 0;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  padding: 15px;
+  font-family: "Courier New", monospace;
+  overflow-x: auto;
+  margin: 10px 0;
 }
 
 .code-block::-webkit-scrollbar {
-    height: 6px;
+  height: 6px;
 }
 
 /* Print styles */
 @media print {
-    .stars, .warp-stars, .water-effect {
-        display: none;
-    }
-    
-    .container {
-        background: white;
-        color: black;
-    }
-    
-    .sidebar {
-        display: none;
-    }
-    
-    .main-content {
-        width: 100%;
-    }
+  .stars,
+  .warp-stars,
+  .water-effect {
+    display: none;
+  }
+
+  .container {
+    background: white;
+    color: black;
+  }
+
+  .sidebar {
+    display: none;
+  }
+
+  .main-content {
+    width: 100%;
+  }
 }

From dfa1de5fe05df91dc0d674b0f3ce67acf0c18ecd Mon Sep 17 00:00:00 2001
From: Adarshkrishnan P <104351869+AdarshKrishnan007@users.noreply.github.com>
Date: Thu, 24 Jul 2025 21:13:46 +0530
Subject: [PATCH 2/4] Update styles.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 styles.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/styles.css b/styles.css
index 67c1c78..72a19ef 100644
--- a/styles.css
+++ b/styles.css
@@ -778,8 +778,7 @@ input:checked + .slider:before {
     margin-right: 0;
     margin-bottom: 20px;
     height: auto;
-    display: flex !important
-;
+    display: flex;
     flex-direction: column;
     position: relative;
     padding: 4px 6px;

From 1c7d9f0b0d6144b07c7b2ab385e4df7fa3a537aa Mon Sep 17 00:00:00 2001
From: Adarshkrishnan P <104351869+AdarshKrishnan007@users.noreply.github.com>
Date: Thu, 24 Jul 2025 21:15:07 +0530
Subject: [PATCH 3/4] Update styles.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index 72a19ef..ccf3527 100644
--- a/styles.css
+++ b/styles.css
@@ -794,7 +794,7 @@ input:checked + .slider:before {
   }
 
   .sidebar-toggle {
-    display: block !important;
+    display: block;
     position: absolute;
     top: 26px;
     /* right: 0px; */

From 63fc32c585332b14b372a12ff27ee2ba6b6833aa Mon Sep 17 00:00:00 2001
From: Adarshkrishnan P <104351869+AdarshKrishnan007@users.noreply.github.com>
Date: Thu, 24 Jul 2025 21:15:36 +0530
Subject: [PATCH 4/4] Update styles.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles.css b/styles.css
index ccf3527..dbb48b2 100644
--- a/styles.css
+++ b/styles.css
@@ -797,7 +797,7 @@ input:checked + .slider:before {
     display: block;
     position: absolute;
     top: 26px;
-    /* right: 0px; */
+    
     background-color: var(--accent-blue);
     border: none;
     color: white;
