Refactor example button styles for modern design; enhance dark theme support and hide footer for cleaner UI.

style.css

@@ -285,23 +285,63 @@
     transform: translateY(-1px) !important;
   }
   
-  /* Example buttons */
-  .example,
-  button.example {
-    background: var(--bg-light-secondary) !important;
-    color: var(--text-light-primary) !important;
-    border: 1px solid var(--border-light) !important;
-    border-radius: 12px !important;
-    padding: 0.75rem 1rem !important;
-    transition: all 0.2s ease !important;
+  /* Example buttons - Modern pill style */
+  .examples .example,
+  button.example,
+  [data-testid="examples"] button {
+    background: linear-gradient(135deg, var(--bg-light-card) 0%, var(--bg-light-secondary) 100%) !important;
+    color: var(--primary-purple) !important;
+    border: 2px solid var(--primary-purple-lighter) !important;
+    border-radius: 24px !important;
+    padding: 0.875rem 1.5rem !important;
+    font-size: 0.95rem !important;
+    font-weight: 500 !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    box-shadow: 0 2px 8px var(--shadow-purple-sm) !important;
+    cursor: pointer !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    white-space: normal !important;
+    text-align: left !important;
+    line-height: 1.4 !important;
   }
   
-  .example:hover,
-  button.example:hover {
-    background: var(--bg-light-tertiary) !important;
-    border-color: var(--primary-purple-light) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px var(--shadow-purple-md) !important;
+  .examples .example:hover,
+  button.example:hover,
+  [data-testid="examples"] button:hover {
+    background: var(--gradient-purple) !important;
+    color: white !important;
+    border-color: var(--primary-purple) !important;
+    transform: translateY(-2px) scale(1.02) !important;
+    box-shadow: 0 6px 20px var(--shadow-purple-lg) !important;
+  }
+  
+  /* Hide the "Aa" icon in examples */
+  .examples .example::before,
+  button.example::before,
+  [data-testid="examples"] button::before,
+  .examples .example .icon,
+  button.example .icon,
+  [data-testid="examples"] button .icon {
+    display: none !important;
+  }
+  
+  /* Style the text content of examples */
+  .examples .example span,
+  button.example span,
+  [data-testid="examples"] button span {
+    color: inherit !important;
+  }
+  
+  /* Container for examples */
+  .examples,
+  [data-testid="examples"] {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 1rem !important;
+    padding: 1rem 0 !important;
+    justify-content: center !important;
   }
   
   /* Scrollbar styling */
@@ -403,18 +443,29 @@
   }
   
   /* Dark theme - Example buttons */
-  .dark .example,
-  .dark button.example {
-    background: var(--bg-dark-card) !important;
-    color: var(--text-dark-primary) !important;
-    border-color: var(--border-dark) !important;
+  .dark .examples .example,
+  .dark button.example,
+  .dark [data-testid="examples"] button {
+    background: linear-gradient(135deg, var(--bg-dark-card) 0%, var(--bg-dark-secondary) 100%) !important;
+    color: var(--primary-purple-lighter) !important;
+    border-color: var(--primary-purple) !important;
+    box-shadow: 0 2px 8px var(--shadow-purple-xl) !important;
   }
   
-  .dark .example:hover,
-  .dark button.example:hover {
-    background: var(--bg-dark-secondary) !important;
+  .dark .examples .example:hover,
+  .dark button.example:hover,
+  .dark [data-testid="examples"] button:hover {
+    background: var(--gradient-purple-pink) !important;
+    color: white !important;
     border-color: var(--primary-purple-light) !important;
-    box-shadow: 0 4px 12px var(--shadow-purple-lg) !important;
+    box-shadow: 0 6px 24px var(--shadow-purple-light-lg) !important;
+  }
+  
+  /* Dark theme - Example text */
+  .dark .examples .example span,
+  .dark button.example span,
+  .dark [data-testid="examples"] button span {
+    color: inherit !important;
   }
   
   /* Dark theme - Scrollbar */
@@ -431,4 +482,23 @@
   .dark .chatbot::-webkit-scrollbar-thumb:hover,
   .dark [data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
     background: var(--primary-purple-light);
+  }
+
+  /* ============================================
+     HIDE FOOTER
+     ============================================ */
+  
+  /* Hide the Gradio footer with API and settings links */
+  footer,
+  .footer,
+  [data-testid="footer"],
+  .gradio-container footer,
+  .built-with,
+  .api-link,
+  .settings-link {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
   }