MCP Chat Support System

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 100% 50%; --primary-foreground: 0 0% 98%; --secondary: 210 40% 95%; --secondary-foreground: 240 10% 3.9%; --muted: 210 40% 98%; --muted-foreground: 215 16% 47%; --accent: 153 60% 53%; --accent-foreground: 240 10% 3.9%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 221 39% 60%; --radius: 0.75rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 240 100% 50%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 153 60% 53%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 221 39% 60%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground font-sans antialiased; font-feature-settings: "rlig" 1, "calt" 1; } html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { @apply bg-secondary-100; } ::-webkit-scrollbar-thumb { @apply bg-secondary-400 rounded-full; } ::-webkit-scrollbar-thumb:hover { @apply bg-secondary-500; } /* Selection styles */ ::selection { @apply bg-primary-200 text-primary-900; } } @layer components { /* Modern glassmorphism effects */ .glass { @apply backdrop-blur-xl bg-white/80 border border-white/20; } .glass-dark { @apply backdrop-blur-xl bg-gray-900/80 border border-gray-700/20; } /* Modern gradients */ .gradient-primary { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); } .gradient-secondary { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); } .gradient-accent { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } /* Modern button styles */ .btn-modern { @apply relative overflow-hidden rounded-xl px-6 py-3 font-medium text-white transition-all duration-300 ease-out; @apply bg-gradient-to-r from-primary-500 to-primary-600; @apply hover:from-primary-600 hover:to-primary-700; @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2; @apply shadow-lg hover:shadow-xl; @apply transform hover:-translate-y-0.5; } .btn-modern::before { content: ''; @apply absolute inset-0 bg-gradient-to-r from-white/20 to-transparent; @apply translate-x-[-100%] transition-transform duration-500; } .btn-modern:hover::before { @apply translate-x-[100%]; } .btn-secondary { @apply relative overflow-hidden rounded-xl px-6 py-3 font-medium text-gray-700 transition-all duration-300 ease-out; @apply bg-white border border-gray-200; @apply hover:bg-gray-50 hover:border-gray-300; @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2; @apply shadow-sm hover:shadow-md; } /* Modern card styles */ .card-modern { @apply bg-white rounded-2xl shadow-soft border border-gray-100; @apply transition-all duration-300 ease-out; @apply hover:shadow-medium hover:-translate-y-1; } .card-glass { @apply backdrop-blur-xl bg-white/70 rounded-2xl border border-white/20; @apply shadow-soft transition-all duration-300 ease-out; @apply hover:bg-white/80 hover:shadow-medium; } /* Modern input styles */ .input-modern { @apply w-full px-4 py-3 rounded-xl border border-gray-200; @apply bg-white text-gray-900 placeholder-gray-500; @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent; @apply transition-all duration-200 ease-out; @apply shadow-sm hover:shadow-md focus:shadow-lg; } /* Modern text styles */ .text-gradient { @apply bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent; } .text-gradient-accent { @apply bg-gradient-to-r from-accent-500 to-accent-700 bg-clip-text text-transparent; } /* Animation utilities */ .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; } .animate-fade-in-down { animation: fadeInDown 0.6s ease-out; } .animate-slide-in-left { animation: slideInLeft 0.6s ease-out; } .animate-slide-in-right { animation: slideInRight 0.6s ease-out; } /* Modern spacing */ .section-padding { @apply py-16 md:py-24 lg:py-32; } .container-padding { @apply px-4 sm:px-6 lg:px-8; } /* Utility classes */ .text-balance { text-wrap: balance; } .bg-mesh { background-image: radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.2) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.2) 0%, transparent 50%); } .bg-grid-fade { background-image: linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px); background-size: 50px 50px; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Loading states */ .loading { @apply animate-pulse; } .skeleton { @apply bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 animate-pulse rounded; background-size: 200% 100%; animation: loading 1.5s ease-in-out infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Modern focus styles */ .focus-visible { @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2; }