style.css

/* ============================================
   COLOR PALETTE FOR LIGHT AND DARK THEMES
   ============================================ */
   :root {
    /* Primary Purple Colors */
    --primary-purple: #7C3AED;
    --primary-purple-light: #8B5CF6;
    --primary-purple-lighter: #A78BFA;
    --primary-purple-dark: #6D28D9;
  
    /* Secondary Purple/Pink Colors */
    --secondary-purple: #9333EA;
    --secondary-pink: #EC4899;
    --secondary-pink-light: #F472B6;
  
    /* Accent Colors */
    --accent-coral: #FF7B7B;
    --accent-salmon: #FF8F8F;
    --accent-green: #10B981;
    --accent-teal: #14B8A6;
    --accent-yellow: #FBBF24;
    --accent-orange: #FB923C;
  
    /* Background Colors - Light Theme */
    --bg-light-primary: #FFFFFF;
    --bg-light-secondary: #F9FAFB;
    --bg-light-tertiary: #F3F4F6;
    --bg-light-card: #FFFFFF;
  
    /* Background Colors - Dark Theme */
    --bg-dark-primary: #0F172A;
    --bg-dark-secondary: #1E293B;
    --bg-dark-tertiary: #334155;
    --bg-dark-card: #1E293B;
  
    /* Text Colors - Light Theme */
    --text-light-primary: #111827;
    --text-light-secondary: #4B5563;
    --text-light-tertiary: #9CA3AF;
  
    /* Text Colors - Dark Theme */
    --text-dark-primary: #F9FAFB;
    --text-dark-secondary: #E5E7EB;
    --text-dark-tertiary: #9CA3AF;
  
    /* Gradient Backgrounds */
    --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%);
    --gradient-purple-pink: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
    --gradient-blue-purple: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    --gradient-coral: linear-gradient(135deg, #FF8F8F 0%, #FF7B7B 100%);
  
  /* Border & Shadow Colors */
  --border-light: #E5E7EB;
  --border-dark: #374151;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-purple: rgba(124, 58, 237, 0.3);
  --shadow-purple-sm: rgba(124, 58, 237, 0.1);
  --shadow-purple-md: rgba(124, 58, 237, 0.15);
  --shadow-purple-lg: rgba(124, 58, 237, 0.25);
  --shadow-purple-xl: rgba(124, 58, 237, 0.35);
  --shadow-purple-2xl: rgba(124, 58, 237, 0.4);
  --shadow-purple-light: rgba(167, 139, 250, 0.2);
  --shadow-purple-light-lg: rgba(167, 139, 250, 0.5);
  
    /* Card & Surface */
    --card-radius: 20px;
    --card-shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  }
  
/* Modern title styling - Purple with subtle shadow */
.prose h1 {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 1.5rem 0 0.5rem 0 !important;
  padding: 0 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  line-height: 1.2 !important;

  /* Deep purple with subtle shadow for depth */
  color: var(--primary-purple-dark) !important;
  text-shadow: 0 2px 8px var(--shadow-purple) !important;
}

/* Dark theme title - Lighter purple with glow */
.dark .prose h1 {
  color: var(--primary-purple-lighter) !important;
  text-shadow: 0 2px 12px var(--shadow-purple) !important;
}
  
/* Description styling - Target markdown div (not paragraphs which are used in chat) */
/* The description is rendered as: .prose > .md > div */
.prose .md > div,
.app-description {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  margin: 0.75rem auto 1.5rem auto !important;
  padding: 1.25rem 1.5rem !important;
  max-width: 700px !important;
  color: var(--text-light-secondary) !important;
  background-color: var(--bg-light-secondary) !important;
  border-radius: 16px !important;
  box-shadow: var(--card-shadow-light) !important;
  display: block !important;
  position: relative !important;

  /* Multi-color gradient border */
  border: 2px solid transparent !important;
  background-image: 
    linear-gradient(var(--bg-light-secondary), var(--bg-light-secondary)),
    linear-gradient(
      90deg,
      var(--primary-purple) 0%,
      var(--secondary-pink) 14%,
      var(--accent-salmon) 28%,
      var(--accent-orange) 42%,
      var(--accent-yellow) 57%,
      var(--accent-green) 71%,
      var(--accent-teal) 85%,
      var(--primary-purple-light) 100%
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
  
  /* Bold text styling within description */
  .prose .md > div strong,
  .app-description strong {
    color: var(--primary-purple) !important;
    font-weight: 600 !important;
  }
  
/* Dark theme description */
@media (prefers-color-scheme: dark) {
  .prose .md > div,
  .app-description {
    color: var(--text-dark-secondary) !important;
    background-color: var(--bg-dark-card) !important;
    box-shadow: var(--card-shadow-dark) !important;

    /* Multi-color gradient border for dark theme */
    background-image: 
      linear-gradient(var(--bg-dark-card), var(--bg-dark-card)),
      linear-gradient(
        90deg,
        var(--primary-purple) 0%,
        var(--secondary-pink) 14%,
        var(--accent-salmon) 28%,
        var(--accent-orange) 42%,
        var(--accent-yellow) 57%,
        var(--accent-green) 71%,
        var(--accent-teal) 85%,
        var(--primary-purple-light) 100%
      ) !important;
  }

  /* Dark theme bold text in description */
  .prose .md > div strong,
  .app-description strong {
    color: var(--primary-purple-lighter) !important;
  }
}
  
/* Also support .dark class for manual theme switching */
.dark .prose .md > div,
.dark .app-description {
  color: var(--text-dark-secondary) !important;
  background-color: var(--bg-dark-card) !important;
  box-shadow: var(--card-shadow-dark) !important;

  /* Multi-color gradient border for dark theme */
  background-image:
    linear-gradient(var(--bg-dark-card), var(--bg-dark-card)),
    linear-gradient(
      90deg,
      var(--primary-purple) 0%,
      var(--secondary-pink) 14%,
      var(--accent-salmon) 28%,
      var(--accent-orange) 42%,
      var(--accent-yellow) 57%,
      var(--accent-green) 71%,
      var(--accent-teal) 85%,
      var(--primary-purple-light) 100%
    ) !important;
}

/* Dark theme bold text in description */
.dark .prose .md > div strong,
.dark .app-description strong {
  color: var(--primary-purple-lighter) !important;
}
  
  /* ============================================
     CHATBOT STYLING - Modern and Clean
     ============================================ */
  
  /* Chat container */
  .chatbot, [data-testid="chatbot"] {
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow-light) !important;
  }
  
  /* User messages - Purple accent */
  .message.user,
  .user-message,
  [data-testid="user-message"] {
    background: linear-gradient(135deg, var(--primary-purple-light) 0%, var(--primary-purple) 100%) !important;
    color: white !important;
    border-radius: 18px 18px 4px 18px !important;
    padding: 0.875rem 1.125rem !important;
    margin: 0.5rem 0 !important;
    box-shadow: 0 2px 8px var(--shadow-purple-lg) !important;
    margin-left: auto !important;
  }
  
  /* Force white text for all content inside user messages */
  .message.user *,
  .user-message *,
  [data-testid="user-message"] *,
  .user-row *,
  .message.user p,
  .message.user span,
  .message.user div {
    color: white !important;
  }
  
  /* Assistant messages - Light background */
  .message.bot,
  .bot-message,
  [data-testid="bot-message"] {
    background: var(--bg-light-card) !important;
    color: var(--text-light-primary) !important;
    border-radius: 18px 18px 18px 4px !important;
    padding: 0.875rem 1.125rem !important;
    margin: 0.5rem 0 !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--card-shadow-light) !important;
    max-width: 80% !important;
    margin-right: auto !important;
  }
  
  /* Input textarea */
  textarea,
  .gr-textbox textarea,
  [data-testid="textbox"] {
    background: var(--bg-light-card) !important;
    color: var(--text-light-primary) !important;
    border: 2px solid var(--border-light) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
  }
  
  textarea:focus,
  .gr-textbox textarea:focus {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px var(--shadow-purple-sm) !important;
    outline: none !important;
  }
  
  /* Submit button and action buttons */
  button[type="submit"],
  .submit-button,
  button.primary {
    background: var(--gradient-purple) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.625rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px var(--shadow-purple-lg) !important;
  }
  
  button[type="submit"]:hover,
  .submit-button:hover,
  button.primary:hover {
    background: var(--primary-purple-dark) !important;
    box-shadow: 0 4px 12px var(--shadow-purple-xl) !important;
    transform: translateY(-1px) !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;
  }
  
  .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 */
  .chatbot::-webkit-scrollbar,
  [data-testid="chatbot"]::-webkit-scrollbar {
    width: 8px;
  }
  
  .chatbot::-webkit-scrollbar-track,
  [data-testid="chatbot"]::-webkit-scrollbar-track {
    background: var(--bg-light-secondary);
    border-radius: 10px;
  }
  
  .chatbot::-webkit-scrollbar-thumb,
  [data-testid="chatbot"]::-webkit-scrollbar-thumb {
    background: var(--primary-purple-light);
    border-radius: 10px;
  }
  
  .chatbot::-webkit-scrollbar-thumb:hover,
  [data-testid="chatbot"]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-purple);
  }
  
  /* ============================================
     DARK THEME STYLES
     ============================================ */
  
  .dark :root, .dark .gradio-container { color-scheme: dark; }
  .dark body, .dark .gradio-container { background: var(--bg-dark-primary); }
  .dark .prose, .dark .gr-text, .dark .gr-form { color: var(--text-dark-secondary); }
  
  /* Dark theme - Chat container */
  .dark .chatbot,
  .dark [data-testid="chatbot"] {
    border-color: var(--border-dark) !important;
    box-shadow: var(--card-shadow-dark) !important;
  }
  
  /* Dark theme - User messages */
  .dark .message.user,
  .dark .user-message,
  .dark [data-testid="user-message"] {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px var(--shadow-purple-2xl) !important;
  }
  
  /* Dark theme - Force white text in user messages */
  .dark .message.user *,
  .dark .user-message *,
  .dark [data-testid="user-message"] *,
  .dark .user-row *,
  .dark .message.user p,
  .dark .message.user span,
  .dark .message.user div {
    color: white !important;
  }
  
  /* Dark theme - Assistant messages */
  .dark .message.bot,
  .dark .bot-message,
  .dark [data-testid="bot-message"] {
    background: var(--bg-dark-card) !important;
    color: var(--text-dark-primary) !important;
    border-color: var(--border-dark) !important;
    box-shadow: var(--card-shadow-dark) !important;
  }
  
  /* Dark theme - Input */
  .dark textarea,
  .dark .gr-textbox textarea,
  .dark [data-testid="textbox"] {
    background: var(--bg-dark-secondary) !important;
    color: var(--text-dark-primary) !important;
    border-color: var(--border-dark) !important;
  }
  
  .dark textarea:focus,
  .dark .gr-textbox textarea:focus {
    border-color: var(--primary-purple-light) !important;
    box-shadow: 0 0 0 3px var(--shadow-purple-light) !important;
  }
  
  /* Dark theme - Buttons */
  .dark button[type="submit"],
  .dark .submit-button,
  .dark button.primary {
    background: var(--gradient-purple) !important;
    box-shadow: 0 2px 8px var(--shadow-purple-2xl) !important;
  }
  
  .dark button[type="submit"]:hover,
  .dark .submit-button:hover,
  .dark button.primary:hover {
    background: var(--primary-purple-light) !important;
    box-shadow: 0 4px 12px var(--shadow-purple-light-lg) !important;
  }
  
  /* Dark theme - Example buttons */
  .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 .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 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 */
  .dark .chatbot::-webkit-scrollbar-track,
  .dark [data-testid="chatbot"]::-webkit-scrollbar-track {
    background: var(--bg-dark-secondary);
  }
  
  .dark .chatbot::-webkit-scrollbar-thumb,
  .dark [data-testid="chatbot"]::-webkit-scrollbar-thumb {
    background: var(--primary-purple);
  }
  
  .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;
  }