updated

backend/templates/base.html

@@ -52,7 +52,6 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            min-height: 60px;
         }
 
         .logo {
@@ -97,21 +96,19 @@
             display: flex;
             align-items: center;
             gap: 1rem;
-            height: 100%;
+            flex-wrap: wrap;
         }
 
         /* Style for the welcome message */
         .welcome-message {
             color: white;
             font-weight: 500;
-            margin-right: 0.5rem;
             display: flex;
             align-items: center;
             background-color: rgba(255, 255, 255, 0.1);
             padding: 0.5rem 1rem;
             border-radius: 5px;
             transition: all 0.3s ease;
-            height: fit-content;
         }
 
         .welcome-message:before {
@@ -128,9 +125,6 @@
             padding: 0.5rem 1.5rem;
             border-radius: 5px;
             transition: all 0.3s ease;
-            height: fit-content;
-            display: flex;
-            align-items: center;
         }
 
         .btn-logout:hover {
@@ -140,56 +134,6 @@
             box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
         }
 
-        /* Fixed chatbot button positioning */
-        .chat-nav-icon {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 1.5rem;
-            cursor: pointer;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-            transition: all 0.3s ease;
-            z-index: 1000;
-        }
-
-        .chat-nav-icon:hover {
-            transform: scale(1.1);
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-        }
-
-        /* Hide mobile chat icon on larger screens initially */
-        @media (min-width: 769px) {
-            .chat-nav-icon {
-                display: flex;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .nav-container {
-                flex-wrap: wrap;
-                gap: 1rem;
-            }
-            
-            .login-buttons {
-                flex-wrap: wrap;
-                justify-content: center;
-                width: 100%;
-                order: 2;
-            }
-            
-            .chat-nav-icon {
-                display: flex;
-            }
-        }
-
         .btn {
             padding: 0.5rem 1.5rem;
             border-radius: 5px;
@@ -201,9 +145,6 @@
             position: relative;
             overflow: hidden;
             z-index: 1;
-            display: flex;
-            align-items: center;
-            height: fit-content;
         }
 
         .btn::before {
@@ -239,6 +180,95 @@
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
 
+        /* Fixed chatbot button */
+        #chatbot-nav {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            background-color: var(--primary);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            z-index: 999;
+            transition: all 0.3s ease;
+            font-size: 24px;
+        }
+
+        #chatbot-nav:hover {
+            transform: scale(1.1);
+            background-color: var(--secondary);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        /* Chatbot box */
+        #chatbot-box {
+            position: fixed;
+            bottom: 100px;
+            right: 20px;
+            width: 350px;
+            height: 500px;
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
+            display: none;
+            flex-direction: column;
+            z-index: 998;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            #chatbot-nav {
+                bottom: 15px;
+                right: 15px;
+                width: 50px;
+                height: 50px;
+                font-size: 20px;
+            }
+
+            #chatbot-box {
+                width: calc(100vw - 40px);
+                max-width: 350px;
+                right: 20px;
+                bottom: 80px;
+                height: 400px;
+            }
+
+            .login-buttons {
+                justify-content: flex-end;
+            }
+
+            .welcome-message {
+                font-size: 0.9rem;
+                padding: 0.4rem 0.8rem;
+            }
+
+            .btn {
+                padding: 0.4rem 1rem;
+                font-size: 0.9rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .nav-container {
+                flex-wrap: wrap;
+                gap: 1rem;
+            }
+
+            .login-buttons {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .logo {
+                font-size: 1.5rem;
+            }
+        }
+
         .hero {
             background: linear-gradient(rgba(67, 97, 238, 0.8), rgba(58, 12, 163, 0.9)), url("/api/placeholder/1200/600") no-repeat center center/cover;
             color: white;
@@ -747,8 +777,14 @@
     </div>
 </header>
 
-<!-- Fixed chatbot button positioned at bottom right of screen -->
-<div id="chatbot-nav" class="chat-nav-icon" onclick="toggleChatbot()">💬</div>
+<!-- Fixed chatbot button -->
+<div id="chatbot-nav" onclick="toggleChatbot()">💬</div>
+
+<!-- Chatbot box (hidden by default) -->
+<div id="chatbot-box">
+    <div id="chat-messages"></div>
+    <input type="text" id="chat-input" onkeydown="sendChat(event)" placeholder="Type a message...">
+</div>
 
 {% block hero %}{% endblock %}