Add styles for the browse menu and update color definitions

Adds new CSS class styles for the browse menu functionality and its associated components, including animations and responsive adjustments. Updates various color definitions in `tailwind.css` to include new shades and ensure consistency.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/oDeWG1n

static/css/src/input.css

@@ -430,3 +430,197 @@
     opacity: 1;
   }
 }
+
+/* Browse Menu Dropdown Styles */
+.browse-dropdown {
+  position: absolute;
+  left: 0;
+  margin-top: 0.25rem;
+  width: auto;
+  max-width: 56rem; /* max-w-4xl */
+  padding: 1.5rem;
+  background-color: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  z-index: 50;
+  animation: dropdownFadeIn 0.15s ease-out;
+}
+
+.browse-dropdown-content {
+  display: flex;
+  gap: 2rem; /* gap-8 */
+}
+
+.browse-column {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; /* space-y-4 */
+}
+
+.browse-menu-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.browse-menu-item:hover {
+  background-color: #f9fafb;
+  transform: translateY(-1px);
+}
+
+.browse-menu-item-icon {
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.125rem;
+  color: #6b7280;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.browse-menu-item:hover .browse-menu-item-icon {
+  color: #374151;
+}
+
+.browse-menu-item-content {
+  min-width: 0;
+  flex: 1;
+}
+
+.browse-menu-item-title {
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+  line-height: 1.25;
+  color: #111827;
+}
+
+.browse-menu-item-description {
+  font-size: 0.75rem;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+/* Browse Button Styles */
+.browse-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  color: #374151;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.browse-button:hover {
+  background-color: #f3f4f6;
+}
+
+.browse-button-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.browse-chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  transition: transform 0.2s ease;
+}
+
+.browse-chevron.rotate {
+  transform: rotate(180deg);
+}
+
+/* Dropdown Animations */
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes dropdownFadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-0.5rem);
+  }
+}
+
+/* Dark Mode Browse Menu Styles */
+@media (prefers-color-scheme: dark) {
+  .browse-dropdown {
+    background-color: #1f2937;
+    border-color: #374151;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  }
+  
+  .browse-menu-item:hover {
+    background-color: #374151;
+  }
+  
+  .browse-menu-item-icon {
+    color: #9ca3af;
+  }
+  
+  .browse-menu-item:hover .browse-menu-item-icon {
+    color: #e5e7eb;
+  }
+  
+  .browse-menu-item-title {
+    color: #f9fafb;
+  }
+  
+  .browse-menu-item-description {
+    color: #9ca3af;
+  }
+  
+  .browse-button {
+    color: #e5e7eb;
+  }
+  
+  .browse-button:hover {
+    background-color: #374151;
+  }
+}
+
+/* Responsive Browse Menu */
+@media (max-width: 640px) {
+  .browse-dropdown {
+    position: fixed;
+    left: 1rem;
+    right: 1rem;
+    top: 4rem;
+    width: auto;
+    max-width: none;
+  }
+  
+  .browse-dropdown-content {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .browse-column {
+    gap: 0.5rem;
+  }
+}