diff --git a/core/templates/ai_chat_new.html b/core/templates/ai_chat_new.html
index c0f84ee..0a045c5 100644
--- a/core/templates/ai_chat_new.html
+++ b/core/templates/ai_chat_new.html
@@ -6,14 +6,6 @@
 
 {% block content %}
 <div class="chat-container glass-card">
-  <!-- Sidebar - Conversations List (Adjusted for new layout) -->
-  <div class="flex flex-col w-64 border-r border-gray-700 bg-gray-800 p-4">
-    <h2 class="text-xl font-bold mb-4">Conversations</h2>
-    <div class="flex-1 overflow-y-auto">
-      <!-- Conversation list will go here -->
-      <p class="text-gray-400 text-sm">No conversations yet.</p>
-    </div>
-  </div>
 
   <!-- Chat Area (Adjusted for new layout) -->
   <div class="flex flex-col flex-1">
diff --git a/core/templates/base.html b/core/templates/base.html
index 0bebf24..68fdfe2 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -22,83 +22,38 @@
   {% block head %}{% endblock %}
 </head>
 
-<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
-  <nav class="bg-white dark:bg-gray-800 shadow-md">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex items-center justify-between h-16">
-        <div class="flex items-center">
-          <a href="{% url 'landing_page' %}" class="font-bold text-xl">Cipher Shield</a>
-        </div>
-        <div class="flex items-center">
-          <a href="{% url 'post_list' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Blog</a>
-          <div class="relative inline-block text-left">
-            <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="false">
-              Tools
-              <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-              </svg>
-            </button>
-            <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-              <div class="py-1" role="none">
-                <a href="{% url 'image_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Image Generator</a>
-                <a href="{% url 'ad_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Ad Generator</a>
-                <a href="{% url 'ai_chat' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">AI Chat</a>
-                <a href="{% url 'graphics_editor' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Graphics Editor</a>
-              </div>
-            </div>
-          </div>
-          <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 ml-2">
-            <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
-            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.272a1 1 0 01-1.393 1.138l-.053-.057a5 5 0 00-6.19-6.19l-.057-.053a1 1 0 011.138-1.393l.057.053a7.001 7.001 0 018.825 8.825l.053.057z"></path></svg>
-          </button>
-          {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Logout</a>
-            <a href="{% url 'post_create' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Create Post</a>
-          {% else %}
-            <a href="{% url 'login' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Login</a>
-            <a href="{% url 'signup' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-white bg-blue-500 hover:bg-blue-600">Sign Up</a>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </nav>
-  <main class="container mx-auto mt-4 px-4">
-    <div class="flex flex-col lg:flex-row gap-4">
-      <aside class="lg:w-1/4">
-        <div class="glass-card p-4 h-full">
-          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
-          <ul>
-            <li class="mb-2"><a href="{% url 'ai_chat' %}" class="hover:text-blue-500">AI Chat</a></li>
-            <li class="mb-2"><a href="{% url 'image_generator' %}" class="hover:text-blue-500">Image Generator</a></li>
-            <li class="mb-2"><a href="{% url 'ad_generator' %}" class="hover:text-blue-500">Ad Generator</a></li>
-            <li class="mb-2"><a href="{% url 'graphics_editor' %}" class="hover:text-blue-500">Graphics Editor</a></li>
-            <li class="mb-2"><a href="{% url 'post_list' %}" class="hover:text-blue-500">Blog</a></li>
-            {% if user.is_authenticated %}
-            <li class="mb-2"><a href="{% url 'post_create' %}" class="hover:text-blue-500">Create Post</a></li>
-            <li class="mb-2"><a href="{% url 'logout' %}" class="hover:text-blue-500">Logout</a></li>
-            {% else %}
-            <li class="mb-2"><a href="{% url 'login' %}" class="hover:text-blue-500">Login</a></li>
-            <li class="mb-2"><a href="{% url 'signup' %}" class="hover:text-blue-500">Sign Up</a></li>
-            {% endif %}
-          </ul>
-        </div>
-      </aside>
-      <section class="lg:w-3/4">
-        {% block content %}{% endblock %}
-      </section>
-    </div>
-  </main>
+<body>
+  <div class="app-container">
+    <aside>
+      <h2 class="text-2xl font-poppins font-semibold mb-6">Cipher Shield</h2>
+      <button id="theme-toggle" type="button" class="flex items-center justify-center p-2.5 mb-6 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg">
+        <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.272a1 1 0 01-1.393 1.138l-.053-.057a5 5 0 00-6.19-6.19l-.057-.053a1 1 0 011.138-1.393l.057.053a7.001 7.001 0 018.825 8.825l.053.057z"></path></svg>
+      </button>
+      <h3 class="text-lg font-semibold mb-4 text-text-primary">Navigation</h3>
+      <ul>
+        <li><a href="{% url 'landing_page' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.135-.439 1.576 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>Home</a></li>
+        <li><a href="{% url 'ai_chat' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5m-4.5 0h7.5M12 10.5h.008v.008H12V10.5zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM12 14.25h.008v.008H12V14.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>AI Chat</a></li>
+        <li><a href="{% url 'image_generator' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l1.5-1.5m1.5 1.5l1.5-1.5M2.25 15.75l3-3m-3 3l3 3m12 0l-3-3m3 3l-3 3m3-3l1.5-1.5m-1.5 1.5l1.5 1.5M19.5 15.75l1.5-1.5m-1.5 1.5l-1.5 1.5M4.5 12a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z" /></svg>Image Generator</a></li>
+        <li><a href="{% url 'ad_generator' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>Ad Generator</a></li>
+        <li><a href="{% url 'graphics_editor' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14.25v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>Graphics Editor</a></li>
+        <li><a href="{% url 'post_list' %} "><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18.75a2.25 2.25 0 01-2.25 2.25H12a2.25 2.25 0 01-2.25-2.25V6.75C9.75 6.129 10.254 5.625 10.875 5.625h3.375c.621 0 1.125.504 1.125 1.125V18.75a2.25 2.25 0 01-2.25 2.25H12M7.5 11.25h.008v.008H7.5V11.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>Blog</a></li>
+        {% if user.is_authenticated %}
+        <li><a href="{% url 'post_create' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>Create Post</a></li>
+        <li><a href="{% url 'logout' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>Logout</a></li>
+        {% else %}
+        <li><a href="{% url 'login' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>Login</a></li>
+        <li><a href="{% url 'signup' %}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.5h.008v.008H16.75V6.75zm-3 0h.008v.008H13.75V6.75zm-3 0h.008v.008H10.75V6.75zm-3 0h.008v.008H7.75V6.75zm-3 0h.008v.008H4.75V6.75zM19 12a.75.75 0 01-.75.75H5.75a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75h12.5c.414 0 .75.336.75.75v1.5zM6.75 20.25h.008v.008H6.75V20.25zm-3 0h.008v.008H3.75V20.25zm3-3h.008v.008H6.75V17.25zm-3 0h.008v.008H3.75V17.25zm3-3h.008v.008H6.75V14.25zm-3 0h.008v.008H3.75V14.25z" /></svg>Sign Up</a></li>
+        {% endif %}
+      </ul>
+    </aside>
+    <main class="flex-1 relative z-10">
+      {% block content %}{% endblock %}
+    </main>
+  </div>
+  {% block extra_scripts %}{% endblock %}
   <script>
     document.addEventListener('DOMContentLoaded', function() {
-      const menuButton = document.getElementById('options-menu');
-      const menu = document.querySelector('[aria-labelledby="options-menu"]');
-
-      menuButton.addEventListener('click', function() {
-        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
-        menuButton.setAttribute('aria-expanded', !isExpanded);
-        menu.classList.toggle('hidden');
-      });
-
       // Theme toggle logic
       const themeToggleBtn = document.getElementById('theme-toggle');
       const lightIcon = document.getElementById('theme-toggle-light-icon');
diff --git a/static/css/custom.css b/static/css/custom.css
index bc224a0..2c72cb5 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,40 +1,77 @@
+
 :root {
-    /* Light Theme */
-    --bg-primary: #F0F2F5;
-    --bg-secondary: #FFFFFF;
-    --text-primary: #1A1A1A;
-    --text-secondary: #667085;
-    --accent-blue: #00A3B5;
-    --accent-green: #34C759;
-    --glass-bg: rgba(255, 255, 255, 0.7);
-    --glass-border: rgba(220, 220, 220, 0.8);
-    --shadow-color: rgba(0, 0, 0, 0.08);
+    /* Light Theme - Futuristic */
+    --bg-primary: #f0f4f8; /* Very light blue-gray */
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #e2e8f0; /* Subtle contrast */
+    --text-primary: #1a202c;
+    --text-secondary: #4a5568;
+    --accent-main: #007bff; /* Bright blue */
+    --accent-hover: #0056b3;
+    --accent-glow: rgba(0, 123, 255, 0.4); /* Blue glow */
+    --border-color: rgba(100, 149, 237, 0.3); /* Muted cornflower blue */
+    --glass-bg: rgba(255, 255, 255, 0.6);
+    --glass-border: rgba(200, 220, 240, 0.6);
+    --shadow-color: rgba(0, 0, 0, 0.15);
+    --input-focus-border: var(--accent-main);
     --heading-font: 'Poppins', sans-serif;
+    --body-font: 'Inter', sans-serif;
 }
 
 html.dark {
-    /* Dark Theme */
-    --bg-primary: #1C1C24;
-    --bg-secondary: #282830;
-    --text-primary: #E0E0E0;
-    --text-secondary: #A0A0A5;
-    --accent-blue: #00A3B5;
-    --accent-green: #4CD964;
-    --glass-bg: rgba(40, 40, 48, 0.6);
-    --glass-border: rgba(70, 70, 75, 0.7);
-    --shadow-color: rgba(0, 0, 0, 0.3);
-    --heading-font: 'Poppins', sans-serif;
+    /* Dark Theme - Futuristic */
+    --bg-primary: #0a0e14; /* Deep dark blue-gray */
+    --bg-secondary: #1a1f26;
+    --bg-tertiary: #2d3748; /* Darker contrast */
+    --text-primary: #e2e8f0;
+    --text-secondary: #a0aec0;
+    --accent-main: #00c4ff; /* Luminous cyan */
+    --accent-hover: #0099e6;
+    --accent-glow: rgba(0, 196, 255, 0.4); /* Cyan glow */
+    --border-color: rgba(0, 196, 255, 0.3);
+    --glass-bg: rgba(26, 31, 38, 0.6);
+    --glass-border: rgba(50, 60, 70, 0.6);
+    --shadow-color: rgba(0, 0, 0, 0.5);
+    --input-focus-border: var(--accent-main);
 }
 
 body {
     background: var(--bg-primary);
-    font-family: 'Inter', sans-serif;
+    font-family: var(--body-font);
     color: var(--text-primary);
+    line-height: 1.6;
+    transition: background-color 0.5s ease, color 0.5s ease;
+    overflow-x: hidden; /* Prevent horizontal scroll from subtle animations */
 }
 
+/* Subtle background animation */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at top left, var(--accent-glow) 0%, transparent 20%),
+                radial-gradient(circle at bottom right, var(--accent-glow) 0%, transparent 20%);
+    opacity: 0.1;
+    pointer-events: none;
+    z-index: -1;
+    animation: backgroundGlow 20s infinite alternate;
+}
+
+@keyframes backgroundGlow {
+    0% { transform: scale(1) translate(0, 0); opacity: 0.1; }
+    50% { transform: scale(1.1) translate(10px, 10px); opacity: 0.15; }
+    100% { transform: scale(1) translate(0, 0); opacity: 0.1; }
+}
+
+
 h1, h2, h3, h4, h5, h6 {
     font-family: var(--heading-font);
     color: var(--text-primary);
+    margin-bottom: 0.75rem;
+    line-height: 1.2;
 }
 
 .font-poppins {
@@ -47,49 +84,103 @@ h1, h2, h3, h4, h5, h6 {
 
 .glass-card {
     background: var(--glass-bg);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 1.25rem; /* Slightly more rounded */
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 1.5rem; /* Even more rounded, sleek */
     border: 1px solid var(--glass-border);
-    box-shadow: 0 4px 20px 0 var(--shadow-color); /* Softer, more diffused shadow */
+    box-shadow: 0 8px 30px rgba(var(--shadow-color), 0.3); /* Deeper, more diffused shadow */
+    padding: 1.5rem;
+    transition: all 0.3s ease-in-out;
+}
+
+.glass-card:hover {
+    box-shadow: 0 12px 40px var(--shadow-color), 0 0 15px var(--accent-glow);
+    transform: translateY(-3px) scale(1.01); /* Subtle lift and scale */
 }
 
 /* Sidebar and Main Content Layout */
-.container.mx-auto.mt-4.px-4 {
-    margin-top: 1.5rem; /* Adjust top margin for spacing */
+.app-container {
+    display: flex;
+    min-height: 100vh;
+    padding: 1.5rem; /* Overall padding for the app */
+    gap: 1.5rem;
 }
 
 aside {
-    background: var(--glass-bg);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 1rem;
+    flex-shrink: 0;
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 1.5rem;
     border: 1px solid var(--glass-border);
-    box-shadow: 0 8px 32px 0 var(--shadow-color);
-    padding: 1rem;
+    box-shadow: 0 8px 30px var(--shadow-color);
+    padding: 1.5rem;
+    position: sticky;
+    top: 1.5rem; /* Stick to top with padding */
+    height: calc(100vh - 3rem); /* Full height minus padding */
+    display: flex;
+    flex-direction: column;
+}
+
+aside ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1; /* Allow navigation to take available space */
+}
+
+aside ul li {
+    margin-bottom: 0.75rem;
 }
 
 aside ul li a {
-    display: block;
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.5rem;
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: 1rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
+    font-weight: 500;
 }
 
-aside ul li a:hover {
-    background-color: color-mix(in srgb, var(--bg-primary) 90%, var(--glass-border)); /* Subtle background on hover */
-    color: var(--accent-blue);
+aside ul li a svg {
+    margin-right: 0.75rem;
+    width: 20px;
+    height: 20px;
+    fill: currentColor; /* Use current text color for icons */
 }
 
-section.lg\:w-3\/4 {
-    /* Ensure main content area has some padding if needed */
-    padding: 1rem;
+aside ul li a:hover, aside ul li a.active {
+    background-color: var(--accent-main);
+    color: var(--bg-primary); /* Text color changes for contrast */
+    box-shadow: 0 0 15px var(--accent-glow);
+    transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
+}
+}
+
+main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
 /* Redefine form styles from forms.py to avoid specificity issues */
-.glass-card form .w-full.bg-gray-800 {
+.glass-card form .w-full.bg-gray-800,
+.glass-card form .w-full.bg-white {
     background-color: var(--bg-secondary) !important;
-    border-color: var(--glass-border) !important;
+    border-color: var(--border-color) !important;
+    color: var(--text-primary) !important;
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    transition: all 0.3s ease;
+}
+
+.glass-card form .w-full.bg-gray-800:focus,
+.glass-card form .w-full.bg-white:focus {
+    border-color: var(--input-focus-border) !important;
+    box-shadow: 0 0 0 3px var(--accent-glow);
+    outline: none;
 }
 
 /* Intent Badge Styles */
@@ -101,94 +192,120 @@ section.lg\:w-3\/4 {
     display: inline-block;
 }
 
-.intent-neutral {
-    background-color: var(--text-secondary); /* gray-400 equivalent */
-}
+.intent-neutral { background-color: var(--text-secondary); }
+.intent-safe { background-color: #34D399; /* Green */ }
+.intent-caution { background-color: #FBBF24; /* Yellow */ }
+.intent-warning { background-color: #EF4444; /* Red */ }
 
-.intent-safe {
-    background-color: var(--accent-green); /* green-500 equivalent */
-}
-
-.intent-caution {
-    background-color: #F59E0B; /* yellow-500, keeping for now */
-}
-
-.intent-warning {
-    background-color: #EF4444; /* red-500, keeping for now */
-}
-
-/* Image Generator Styles */
+/* General Button Styles */
 .btn-primary {
-    background-color: var(--accent-blue);
-    border-color: var(--accent-blue);
-    border-radius: 0.75rem; /* More rounded */
-    padding: 0.75rem 1.5rem; /* More comfortable padding */
-    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); /* Subtle lifted effect */
-    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    background-color: var(--accent-main);
+    color: var(--bg-primary); /* Contrast with button color */
+    border: none;
+    border-radius: 1rem;
+    padding: 0.85rem 1.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out, transform 0.2s ease;
+    box-shadow: 0 5px 15px rgba(var(--accent-main), 0.3);
 }
 
 .btn-primary:hover {
-    background-color: color-mix(in srgb, var(--accent-blue) 90%, black); /* Darker shade on hover */
-    border-color: color-mix(in srgb, var(--accent-blue) 90%, black);
-    box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15);
+    background-color: var(--accent-hover);
+    box-shadow: 0 8px 20px rgba(var(--accent-main), 0.4), 0 0 15px var(--accent-glow);
+    transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
 }
 
 .form-control {
-    background-color: var(--glass-bg);
-    border: 1px solid var(--glass-border);
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
     color: var(--text-primary);
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    transition: all 0.3s ease, transform 0.2s ease;
 }
 
 .form-control::placeholder {
     color: var(--text-secondary);
+    opacity: 0.7;
+}
+
+.form-control:focus {
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 4px var(--accent-glow);
+    outline: none;
+    transform: translateY(-1px) scale(1.005);
 }
 
 .card {
     background-color: var(--bg-secondary);
-    border: 1px solid var(--glass-border);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    box-shadow: 0 4px 15px var(--shadow-color);
 }
 
 /* AI Chat Styles */
 .chat-container {
-    max-width: 800px;
-    margin: 2rem auto;
+    width: 100%; /* Take full width of its parent (main) */
+    margin: 0; /* Remove auto margin, controlled by main layout */
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 100px);
-    border-radius: 1rem;
+    height: 100%; /* Take full height of its parent (main) */
+    border-radius: 1.5rem;
     overflow: hidden;
+    background: var(--glass-bg); /* Use glass-bg for chat container too */
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 30px var(--shadow-color);
 }
 
 .chat-header {
-    padding: 1rem;
+    padding: 1.2rem 1.5rem;
     border-bottom: 1px solid var(--glass-border);
     text-align: center;
-    background-color: var(--bg-secondary);
+    background-color: var(--glass-bg); /* Match container background */
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--text-primary);
 }
 
 .chat-box {
     flex-grow: 1;
-    padding: 1rem;
+    padding: 1.5rem;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    background-color: var(--bg-secondary); /* Chat background distinct from glass-bg */
+    scroll-behavior: smooth;
 }
 
 .chat-message {
     display: flex;
     flex-direction: column;
-    max-width: 80%;
+    max-width: 75%; /* Slightly less wide */
+    animation: fadeIn 0.5s ease-out;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
+.chat-message:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+
 .message-content {
-    padding: 0.75rem 1rem;
-    border-radius: 0.75rem;
-    line-height: 1.5;
+    padding: 1rem 1.25rem;
+    border-radius: 1.25rem; /* More rounded */
+    line-height: 1.6;
+    word-wrap: break-word;
+    white-space: pre-wrap; /* Preserve whitespace and line breaks */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
-.message-content p {
-    margin: 0;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 /* User Message */
@@ -198,9 +315,9 @@ section.lg\:w-3\/4 {
 }
 
 .user-message .message-content {
-    background-color: var(--accent-blue);
-    color: var(--text-primary);
-    border-bottom-right-radius: 0.25rem;
+    background-color: var(--accent-main);
+    color: var(--bg-primary); /* Text contrasts with accent */
+    border-bottom-right-radius: 0.5rem; /* Softer edge */
 }
 
 /* AI Message */
@@ -210,15 +327,15 @@ section.lg\:w-3\/4 {
 }
 
 .ai-message .message-content {
-    background: var(--bg-secondary);
+    background: var(--bg-tertiary); /* Lighter/Darker shade for AI */
     border: 1px solid var(--glass-border);
     color: var(--text-primary);
-    border-bottom-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.5rem; /* Softer edge */
 }
 
 .ai-message.error-message .message-content {
-    background-color: #721c24; /* Keeping static for error visibility */
-    color: #f8d7da; /* Keeping static for error visibility */
+    background-color: #ef4444; /* Red for errors */
+    color: #fee2e2;
 }
 
 /* Typing Indicator */
@@ -229,9 +346,9 @@ section.lg\:w-3\/4 {
 }
 
 .typing-indicator span {
-    height: 8px;
-    width: 8px;
-    margin: 0 2px;
+    height: 10px; /* Slightly larger */
+    width: 10px;
+    margin: 0 3px; /* More spacing */
     background-color: var(--text-secondary);
     border-radius: 50%;
     display: inline-block;
@@ -248,81 +365,121 @@ section.lg\:w-3\/4 {
 
 /* Chat Input */
 .chat-input-area {
-    padding: 1rem;
+    padding: 1.5rem;
     border-top: 1px solid var(--glass-border);
-    background-color: var(--bg-secondary);
+    background-color: var(--glass-bg);
+    display: flex; /* Use flex for layout */
+    align-items: center;
+    gap: 0.75rem;
 }
 
 .chat-input {
-    background: var(--glass-bg);
-    border: 1px solid var(--glass-border);
-    border-radius: 9999px;
+    background: var(--bg-secondary); /* Input background */
+    border: 1px solid var(--border-color);
+    border-radius: 2rem; /* Fully rounded pill shape */
     color: var(--text-primary);
-    padding: 0.75rem 1.5rem;
+    padding: 0.9rem 1.5rem;
     flex-grow: 1;
     outline: none;
-    transition: border-color 0.3s ease;
+    transition: all 0.3s ease, transform 0.2s ease;
+    font-size: 1rem;
 }
 
 .chat-input:focus {
-    border-color: var(--accent-blue);
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 4px var(--accent-glow);
+    outline: none;
+    transform: translateY(-1px) scale(1.005);
 }
 
 .send-button {
-    background: var(--accent-blue);
+    background: var(--accent-main);
     border: none;
     border-radius: 50%;
-    width: 48px;
-    height: 48px;
+    width: 52px; /* Slightly larger button */
+    height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 0.5rem;
-    color: var(--text-primary);
+    color: var(--bg-primary); /* Icon color */
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0 4px 12px rgba(var(--accent-main), 0.3);
 }
 
 .send-button:hover {
-    background: var(--text-secondary);
+    background: var(--accent-hover);
+    box-shadow: 0 6px 16px rgba(var(--accent-main), 0.4), 0 0 10px var(--accent-glow);
+    transform: translateY(-1px) scale(1.03);
 }
 
 /* Code Block Styles */
 .code-block-wrapper {
     margin-top: 1rem;
-    border-radius: 0.5rem;
+    border-radius: 0.75rem;
     overflow: hidden;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 4px 15px var(--shadow-color);
 }
 .code-block-header {
-    background: var(--bg-secondary);
-    padding: 0.5rem 1rem;
+    background: var(--bg-tertiary);
+    padding: 0.75rem 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 0.875rem;
+    font-size: 0.9rem;
     color: var(--text-secondary);
     border-bottom: 1px solid var(--glass-border);
 }
 .copy-code-btn {
-    background: var(--accent-blue);
-    color: var(--text-primary);
+    background: var(--accent-main);
+    color: var(--bg-primary);
     border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
+    padding: 0.35rem 0.7rem;
+    border-radius: 0.5rem;
     cursor: pointer;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
+    transition: all 0.3s ease;
 }
 .copy-code-btn:hover {
-    background: var(--text-secondary);
+    background: var(--accent-hover);
+    transform: translateY(-1px);
 }
 pre {
     margin: 0;
-    padding: 1rem;
+    padding: 1.2rem;
     background: var(--bg-secondary);
     color: var(--text-primary);
     overflow-x: auto;
+    font-size: 0.9rem;
 }
 code {
     font-family: 'Fira Code', 'Courier New', monospace;
-    font-size: 0.875rem;
+    font-size: 0.9rem;
+}
+
+/* Utility for Flexbox Layout */
+.flex-1 { flex: 1; }
+.relative { position: relative; }
+.z-10 { z-index: 10; }
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+    .app-container {
+        flex-direction: column;
+        padding: 1rem;
+        gap: 1rem;
+    }
+
+    aside {
+        width: 100%;
+        height: auto;
+        position: relative;
+        top: 0;
+    }
+
+    .chat-container {
+        max-width: 100%;
+        height: 70vh; /* Adjust height for smaller screens */
+    }
 }
\ No newline at end of file
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 91d39f3..2c72cb5 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -1,33 +1,77 @@
+
 :root {
-    /* Light Theme */
-    --bg-primary: #f8f9fa;
+    /* Light Theme - Futuristic */
+    --bg-primary: #f0f4f8; /* Very light blue-gray */
     --bg-secondary: #ffffff;
-    --text-primary: #212529;
-    --text-secondary: #6c757d;
-    --accent-blue: #007bff;
-    --accent-green: #28a745;
+    --bg-tertiary: #e2e8f0; /* Subtle contrast */
+    --text-primary: #1a202c;
+    --text-secondary: #4a5568;
+    --accent-main: #007bff; /* Bright blue */
+    --accent-hover: #0056b3;
+    --accent-glow: rgba(0, 123, 255, 0.4); /* Blue glow */
+    --border-color: rgba(100, 149, 237, 0.3); /* Muted cornflower blue */
     --glass-bg: rgba(255, 255, 255, 0.6);
-    --glass-border: rgba(220, 220, 220, 0.7);
-    --shadow-color: rgba(0, 0, 0, 0.1);
+    --glass-border: rgba(200, 220, 240, 0.6);
+    --shadow-color: rgba(0, 0, 0, 0.15);
+    --input-focus-border: var(--accent-main);
+    --heading-font: 'Poppins', sans-serif;
+    --body-font: 'Inter', sans-serif;
 }
 
 html.dark {
-    /* Dark Theme */
-    --bg-primary: #0F172A;
-    --bg-secondary: #1A202C;
-    --text-primary: #f8f9fa;
+    /* Dark Theme - Futuristic */
+    --bg-primary: #0a0e14; /* Deep dark blue-gray */
+    --bg-secondary: #1a1f26;
+    --bg-tertiary: #2d3748; /* Darker contrast */
+    --text-primary: #e2e8f0;
     --text-secondary: #a0aec0;
-    --accent-blue: #667EEA;
-    --accent-green: #38A169;
-    --glass-bg: rgba(0, 0, 0, 0.4);
-    --glass-border: rgba(60, 60, 60, 0.7);
+    --accent-main: #00c4ff; /* Luminous cyan */
+    --accent-hover: #0099e6;
+    --accent-glow: rgba(0, 196, 255, 0.4); /* Cyan glow */
+    --border-color: rgba(0, 196, 255, 0.3);
+    --glass-bg: rgba(26, 31, 38, 0.6);
+    --glass-border: rgba(50, 60, 70, 0.6);
     --shadow-color: rgba(0, 0, 0, 0.5);
+    --input-focus-border: var(--accent-main);
 }
 
 body {
     background: var(--bg-primary);
-    font-family: 'Inter', sans-serif;
+    font-family: var(--body-font);
     color: var(--text-primary);
+    line-height: 1.6;
+    transition: background-color 0.5s ease, color 0.5s ease;
+    overflow-x: hidden; /* Prevent horizontal scroll from subtle animations */
+}
+
+/* Subtle background animation */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at top left, var(--accent-glow) 0%, transparent 20%),
+                radial-gradient(circle at bottom right, var(--accent-glow) 0%, transparent 20%);
+    opacity: 0.1;
+    pointer-events: none;
+    z-index: -1;
+    animation: backgroundGlow 20s infinite alternate;
+}
+
+@keyframes backgroundGlow {
+    0% { transform: scale(1) translate(0, 0); opacity: 0.1; }
+    50% { transform: scale(1.1) translate(10px, 10px); opacity: 0.15; }
+    100% { transform: scale(1) translate(0, 0); opacity: 0.1; }
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--heading-font);
+    color: var(--text-primary);
+    margin-bottom: 0.75rem;
+    line-height: 1.2;
 }
 
 .font-poppins {
@@ -40,49 +84,103 @@ body {
 
 .glass-card {
     background: var(--glass-bg);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 1rem;
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 1.5rem; /* Even more rounded, sleek */
     border: 1px solid var(--glass-border);
-    box-shadow: 0 8px 32px 0 var(--shadow-color);
+    box-shadow: 0 8px 30px rgba(var(--shadow-color), 0.3); /* Deeper, more diffused shadow */
+    padding: 1.5rem;
+    transition: all 0.3s ease-in-out;
+}
+
+.glass-card:hover {
+    box-shadow: 0 12px 40px var(--shadow-color), 0 0 15px var(--accent-glow);
+    transform: translateY(-3px) scale(1.01); /* Subtle lift and scale */
 }
 
 /* Sidebar and Main Content Layout */
-.container.mx-auto.mt-4.px-4 {
-    margin-top: 1.5rem; /* Adjust top margin for spacing */
+.app-container {
+    display: flex;
+    min-height: 100vh;
+    padding: 1.5rem; /* Overall padding for the app */
+    gap: 1.5rem;
 }
 
 aside {
-    background: var(--glass-bg);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 1rem;
+    flex-shrink: 0;
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 1.5rem;
     border: 1px solid var(--glass-border);
-    box-shadow: 0 8px 32px 0 var(--shadow-color);
-    padding: 1rem;
+    box-shadow: 0 8px 30px var(--shadow-color);
+    padding: 1.5rem;
+    position: sticky;
+    top: 1.5rem; /* Stick to top with padding */
+    height: calc(100vh - 3rem); /* Full height minus padding */
+    display: flex;
+    flex-direction: column;
+}
+
+aside ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1; /* Allow navigation to take available space */
+}
+
+aside ul li {
+    margin-bottom: 0.75rem;
 }
 
 aside ul li a {
-    display: block;
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.5rem;
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: 1rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
+    font-weight: 500;
 }
 
-aside ul li a:hover {
-    background-color: var(--bg-secondary);
-    color: var(--accent-blue);
+aside ul li a svg {
+    margin-right: 0.75rem;
+    width: 20px;
+    height: 20px;
+    fill: currentColor; /* Use current text color for icons */
 }
 
-section.lg\:w-3\/4 {
-    /* Ensure main content area has some padding if needed */
-    padding: 1rem;
+aside ul li a:hover, aside ul li a.active {
+    background-color: var(--accent-main);
+    color: var(--bg-primary); /* Text color changes for contrast */
+    box-shadow: 0 0 15px var(--accent-glow);
+    transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
+}
+}
+
+main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
 /* Redefine form styles from forms.py to avoid specificity issues */
-.glass-card form .w-full.bg-gray-800 {
+.glass-card form .w-full.bg-gray-800,
+.glass-card form .w-full.bg-white {
     background-color: var(--bg-secondary) !important;
-    border-color: var(--glass-border) !important;
+    border-color: var(--border-color) !important;
+    color: var(--text-primary) !important;
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    transition: all 0.3s ease;
+}
+
+.glass-card form .w-full.bg-gray-800:focus,
+.glass-card form .w-full.bg-white:focus {
+    border-color: var(--input-focus-border) !important;
+    box-shadow: 0 0 0 3px var(--accent-glow);
+    outline: none;
 }
 
 /* Intent Badge Styles */
@@ -94,90 +192,120 @@ section.lg\:w-3\/4 {
     display: inline-block;
 }
 
-.intent-neutral {
-    background-color: var(--text-secondary); /* gray-400 equivalent */
-}
+.intent-neutral { background-color: var(--text-secondary); }
+.intent-safe { background-color: #34D399; /* Green */ }
+.intent-caution { background-color: #FBBF24; /* Yellow */ }
+.intent-warning { background-color: #EF4444; /* Red */ }
 
-.intent-safe {
-    background-color: var(--accent-green); /* green-500 equivalent */
-}
-
-.intent-caution {
-    background-color: #F59E0B; /* yellow-500, keeping for now */
-}
-
-.intent-warning {
-    background-color: #EF4444; /* red-500, keeping for now */
-}
-
-/* Image Generator Styles */
+/* General Button Styles */
 .btn-primary {
-    background-color: var(--accent-blue);
-    border-color: var(--accent-blue);
-    transition: background-color 0.3s ease;
+    background-color: var(--accent-main);
+    color: var(--bg-primary); /* Contrast with button color */
+    border: none;
+    border-radius: 1rem;
+    padding: 0.85rem 1.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out, transform 0.2s ease;
+    box-shadow: 0 5px 15px rgba(var(--accent-main), 0.3);
 }
 
 .btn-primary:hover {
-    background-color: var(--text-secondary);
-    border-color: var(--text-secondary);
+    background-color: var(--accent-hover);
+    box-shadow: 0 8px 20px rgba(var(--accent-main), 0.4), 0 0 15px var(--accent-glow);
+    transform: translateY(-3px) scale(1.02); /* More pronounced lift and slight scale */
 }
 
 .form-control {
-    background-color: var(--glass-bg);
-    border: 1px solid var(--glass-border);
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
     color: var(--text-primary);
+    border-radius: 0.75rem;
+    padding: 0.75rem 1rem;
+    transition: all 0.3s ease, transform 0.2s ease;
 }
 
 .form-control::placeholder {
     color: var(--text-secondary);
+    opacity: 0.7;
+}
+
+.form-control:focus {
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 4px var(--accent-glow);
+    outline: none;
+    transform: translateY(-1px) scale(1.005);
 }
 
 .card {
     background-color: var(--bg-secondary);
-    border: 1px solid var(--glass-border);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    box-shadow: 0 4px 15px var(--shadow-color);
 }
 
 /* AI Chat Styles */
 .chat-container {
-    max-width: 800px;
-    margin: 2rem auto;
+    width: 100%; /* Take full width of its parent (main) */
+    margin: 0; /* Remove auto margin, controlled by main layout */
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 100px);
-    border-radius: 1rem;
+    height: 100%; /* Take full height of its parent (main) */
+    border-radius: 1.5rem;
     overflow: hidden;
+    background: var(--glass-bg); /* Use glass-bg for chat container too */
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 8px 30px var(--shadow-color);
 }
 
 .chat-header {
-    padding: 1rem;
+    padding: 1.2rem 1.5rem;
     border-bottom: 1px solid var(--glass-border);
     text-align: center;
-    background-color: var(--bg-secondary);
+    background-color: var(--glass-bg); /* Match container background */
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--text-primary);
 }
 
 .chat-box {
     flex-grow: 1;
-    padding: 1rem;
+    padding: 1.5rem;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    background-color: var(--bg-secondary); /* Chat background distinct from glass-bg */
+    scroll-behavior: smooth;
 }
 
 .chat-message {
     display: flex;
     flex-direction: column;
-    max-width: 80%;
+    max-width: 75%; /* Slightly less wide */
+    animation: fadeIn 0.5s ease-out;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
+.chat-message:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+
 .message-content {
-    padding: 0.75rem 1rem;
-    border-radius: 1rem;
-    line-height: 1.5;
+    padding: 1rem 1.25rem;
+    border-radius: 1.25rem; /* More rounded */
+    line-height: 1.6;
+    word-wrap: break-word;
+    white-space: pre-wrap; /* Preserve whitespace and line breaks */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
-.message-content p {
-    margin: 0;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 /* User Message */
@@ -187,9 +315,9 @@ section.lg\:w-3\/4 {
 }
 
 .user-message .message-content {
-    background-color: var(--accent-blue);
-    color: var(--text-primary);
-    border-bottom-right-radius: 0;
+    background-color: var(--accent-main);
+    color: var(--bg-primary); /* Text contrasts with accent */
+    border-bottom-right-radius: 0.5rem; /* Softer edge */
 }
 
 /* AI Message */
@@ -199,15 +327,15 @@ section.lg\:w-3\/4 {
 }
 
 .ai-message .message-content {
-    background: var(--bg-secondary);
+    background: var(--bg-tertiary); /* Lighter/Darker shade for AI */
     border: 1px solid var(--glass-border);
     color: var(--text-primary);
-    border-bottom-left-radius: 0;
+    border-bottom-left-radius: 0.5rem; /* Softer edge */
 }
 
 .ai-message.error-message .message-content {
-    background-color: #721c24; /* Keeping static for error visibility */
-    color: #f8d7da; /* Keeping static for error visibility */
+    background-color: #ef4444; /* Red for errors */
+    color: #fee2e2;
 }
 
 /* Typing Indicator */
@@ -218,9 +346,9 @@ section.lg\:w-3\/4 {
 }
 
 .typing-indicator span {
-    height: 8px;
-    width: 8px;
-    margin: 0 2px;
+    height: 10px; /* Slightly larger */
+    width: 10px;
+    margin: 0 3px; /* More spacing */
     background-color: var(--text-secondary);
     border-radius: 50%;
     display: inline-block;
@@ -237,81 +365,121 @@ section.lg\:w-3\/4 {
 
 /* Chat Input */
 .chat-input-area {
-    padding: 1rem;
+    padding: 1.5rem;
     border-top: 1px solid var(--glass-border);
-    background-color: var(--bg-secondary);
+    background-color: var(--glass-bg);
+    display: flex; /* Use flex for layout */
+    align-items: center;
+    gap: 0.75rem;
 }
 
 .chat-input {
-    background: var(--glass-bg);
-    border: 1px solid var(--glass-border);
-    border-radius: 9999px;
+    background: var(--bg-secondary); /* Input background */
+    border: 1px solid var(--border-color);
+    border-radius: 2rem; /* Fully rounded pill shape */
     color: var(--text-primary);
-    padding: 0.75rem 1.5rem;
+    padding: 0.9rem 1.5rem;
     flex-grow: 1;
     outline: none;
-    transition: border-color 0.3s ease;
+    transition: all 0.3s ease, transform 0.2s ease;
+    font-size: 1rem;
 }
 
 .chat-input:focus {
-    border-color: var(--accent-blue);
+    border-color: var(--input-focus-border);
+    box-shadow: 0 0 0 4px var(--accent-glow);
+    outline: none;
+    transform: translateY(-1px) scale(1.005);
 }
 
 .send-button {
-    background: var(--accent-blue);
+    background: var(--accent-main);
     border: none;
     border-radius: 50%;
-    width: 48px;
-    height: 48px;
+    width: 52px; /* Slightly larger button */
+    height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 0.5rem;
-    color: var(--text-primary);
+    color: var(--bg-primary); /* Icon color */
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0 4px 12px rgba(var(--accent-main), 0.3);
 }
 
 .send-button:hover {
-    background: var(--text-secondary);
+    background: var(--accent-hover);
+    box-shadow: 0 6px 16px rgba(var(--accent-main), 0.4), 0 0 10px var(--accent-glow);
+    transform: translateY(-1px) scale(1.03);
 }
 
 /* Code Block Styles */
 .code-block-wrapper {
     margin-top: 1rem;
-    border-radius: 0.5rem;
+    border-radius: 0.75rem;
     overflow: hidden;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 4px 15px var(--shadow-color);
 }
 .code-block-header {
-    background: var(--bg-secondary);
-    padding: 0.5rem 1rem;
+    background: var(--bg-tertiary);
+    padding: 0.75rem 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 0.875rem;
+    font-size: 0.9rem;
     color: var(--text-secondary);
     border-bottom: 1px solid var(--glass-border);
 }
 .copy-code-btn {
-    background: var(--accent-blue);
-    color: var(--text-primary);
+    background: var(--accent-main);
+    color: var(--bg-primary);
     border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
+    padding: 0.35rem 0.7rem;
+    border-radius: 0.5rem;
     cursor: pointer;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
+    transition: all 0.3s ease;
 }
 .copy-code-btn:hover {
-    background: var(--text-secondary);
+    background: var(--accent-hover);
+    transform: translateY(-1px);
 }
 pre {
     margin: 0;
-    padding: 1rem;
+    padding: 1.2rem;
     background: var(--bg-secondary);
     color: var(--text-primary);
     overflow-x: auto;
+    font-size: 0.9rem;
 }
 code {
     font-family: 'Fira Code', 'Courier New', monospace;
-    font-size: 0.875rem;
+    font-size: 0.9rem;
+}
+
+/* Utility for Flexbox Layout */
+.flex-1 { flex: 1; }
+.relative { position: relative; }
+.z-10 { z-index: 10; }
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+    .app-container {
+        flex-direction: column;
+        padding: 1rem;
+        gap: 1rem;
+    }
+
+    aside {
+        width: 100%;
+        height: auto;
+        position: relative;
+        top: 0;
+    }
+
+    .chat-container {
+        max-width: 100%;
+        height: 70vh; /* Adjust height for smaller screens */
+    }
 }
\ No newline at end of file
