update AI page

public/css/chat.css

@@ -244,4 +244,86 @@ pre code {
 /* Add class for fading out when alert is being removed */
 .alert.fade-out {
     animation: fadeSlideOut 0.5s forwards;
-}
+}
+
+
+/* Dropdown menu styling */
+.navbar .dropdown-menu {
+    background-color: #1e1e1e;
+    /* Match the chat box background */
+    border: none;
+    /* Remove border */
+    box-shadow: none;
+    /* Remove shadow */
+    padding: 0;
+    /* Remove padding */
+}
+
+.navbar .dropdown-item {
+    background-color: #1e1e1e;
+    /* Match the chat box background */
+    color: white;
+    /* White text */
+    padding: 10px 20px;
+    /* Add padding for spacing */
+    border-bottom: 1px solid #444;
+    /* Add a subtle separator */
+}
+
+.navbar .dropdown-item:last-child {
+    border-bottom: none;
+    /* Remove border for the last item */
+}
+
+.navbar .dropdown-item:hover {
+    background-color: #282828;
+    /* Slightly lighter background on hover */
+    color: #f1f1f1;
+    /* Lighter text on hover */
+}
+
+.navbar .dropdown-item:focus {
+    background-color: #282828;
+    /* Match hover style for focused items */
+    outline: none;
+    /* Remove default outline */
+}
+
+.navbar .dropdown-toggle {
+    color: white;
+    /* White text */
+}
+
+.navbar .dropdown-toggle::after {
+    border-top: 0.3em solid white;
+    /* White arrow for dropdown */
+}
+
+.navbar .dropdown-menu.show {
+    opacity: 1;
+    /* Fully opaque when shown */
+    transform: translateY(0);
+    /* Reset transform */
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    /* Smooth fade and slide transition */
+}
+
+.navbar .dropdown-menu {
+    opacity: 0;
+    transform: translateY(-10px);
+    /* Start hidden and slightly raised */
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    /* Smooth fade and slide transition */
+}
+
+/* Styling the dropdown toggle button */
+.navbar .dropdown-toggle:hover {
+    color: #f1f1f1;
+    /* Lighter text on hover */
+}
+
+/* Separator between regular menu items and dropdown */
+.navbar .separator {
+    color: #555;
+    /* Subtle separator color */
+}