base updated

backend/templates/base.html

@@ -52,6 +52,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            min-height: 60px;
         }
 
         .logo {
@@ -96,6 +97,7 @@
             display: flex;
             align-items: center;
             gap: 1rem;
+            height: 100%;
         }
 
         /* Style for the welcome message */
@@ -109,6 +111,7 @@
             padding: 0.5rem 1rem;
             border-radius: 5px;
             transition: all 0.3s ease;
+            height: fit-content;
         }
 
         .welcome-message:before {
@@ -125,6 +128,9 @@
             padding: 0.5rem 1.5rem;
             border-radius: 5px;
             transition: all 0.3s ease;
+            height: fit-content;
+            display: flex;
+            align-items: center;
         }
 
         .btn-logout:hover {
@@ -134,6 +140,56 @@
             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;
@@ -145,6 +201,9 @@
             position: relative;
             overflow: hidden;
             z-index: 1;
+            display: flex;
+            align-items: center;
+            height: fit-content;
         }
 
         .btn::before {
@@ -685,12 +744,12 @@
                 <a href="{{ url_for('auth.signup') }}" class="btn btn-primary">Sign Up</a>
             {% endif %}
         </div>
-        <!-- Mobile chat icon visible only on small screens -->
-        <div id="chatbot-nav" class="chat-nav-icon" onclick="toggleChatbot()">💬</div>
-
     </div>
 </header>
 
+<!-- Fixed chatbot button positioned at bottom right of screen -->
+<div id="chatbot-nav" class="chat-nav-icon" onclick="toggleChatbot()">💬</div>
+
 {% block hero %}{% endblock %}
 
 <main>
@@ -817,4 +876,4 @@
       }
     </style>
 </body>
-</html>
+</html>