| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| .chat-container { | |
| height: calc(100vh - 180px); | |
| } | |
| .chat-message { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-indicator::after { | |
| content: '...'; | |
| animation: typing 1.5s infinite; | |
| } | |
| @keyframes typing { | |
| 0% { content: '.'; } | |
| 33% { content: '..'; } | |
| 66% { content: '...'; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, rgba(217, 70, 239, 0.2) 0%, rgba(234, 179, 8, 0.2) 100%); | |
| } | |
| /* Dark mode specific styles */ | |
| .dark { | |
| background-color: #111827; | |
| color: #f3f4f6; | |
| } | |
| .dark .bg-gray-800 { | |
| background-color: #1f2937; | |
| } | |
| .dark .bg-gray-700 { | |
| background-color: #374151; | |
| } | |
| .dark .bg-gray-600 { | |
| background-color: #4b5563; | |
| } | |
| .dark .text-gray-300 { | |
| color: #d1d5db; | |
| } | |
| .dark .border-gray-600 { | |
| border-color: #4b5563; | |
| } |