@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body { font-family: 'Inter', sans-serif; background-color: #f8f9fa; color: #333; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.chart-container { position: relative; width: 100%; max-width: 600px; margin: 0 auto; height: 300px; max-height: 400px; }
@media (min-width: 768px) { .chart-container { height: 350px; } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.cmd-card { transition: all 0.2s ease-in-out; }
.cmd-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }

.terminal-window { background-color: #1e293b; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 0.5rem; }
.terminal-header { background-color: #334155; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; }
.terminal-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.terminal-body { padding: 1rem; color: #4ade80; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; overflow-x: auto; }

.ai-content pre { background-color: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 0.5rem 0; font-family: 'JetBrains Mono', monospace; }
.ai-content code { background-color: #f1f5f9; color: #0f172a; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
.ai-content pre code { background-color: transparent; color: inherit; padding: 0; }
.ai-content p { margin-bottom: 0.5rem; line-height: 1.6; }
.ai-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.ai-content strong { color: #1e40af; font-weight: 600; }

@keyframes pulse-dot { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }
.loading-dot { display: inline-block; width: 8px; height: 8px; background-color: #3b82f6; border-radius: 50%; margin: 0 2px; animation: pulse-dot 1.4s infinite ease-in-out both; }
.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }