/* Deep Research Agent Custom Styles */ .container { max-width: 1400px; margin: 0 auto; padding: 20px; } .gradio-container { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Chat message styling */ .message { border-radius: 12px; padding: 12px 16px; margin: 8px 0; } .user-message { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .bot-message { background: #f5f5f5; border: 1px solid #e0e0e0; } /* Code blocks */ pre, code { font-family: 'JetBrains Mono', 'Fira Code', monospace; background: #1e1e1e; color: #d4d4d4; border-radius: 8px; } pre { padding: 16px; overflow-x: auto; } /* Thinking blocks */ .thinking-block { background: linear-gradient(135deg, #f6f8fc 0%, #eef1f8 100%); border-left: 4px solid #667eea; padding: 12px 16px; margin: 8px 0; border-radius: 0 8px 8px 0; font-style: italic; color: #666; } /* Tool call styling */ .tool-call { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 12px; margin: 8px 0; } .tool-result { background: #d4edda; border: 1px solid #28a745; border-radius: 8px; padding: 12px; margin: 8px 0; } /* Answer block */ .answer-block { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px; padding: 20px; margin: 16px 0; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } /* Input area */ .input-area { border-radius: 12px; border: 2px solid #e0e0e0; transition: border-color 0.3s ease; } .input-area:focus-within { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* Buttons */ button.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px; color: white; padding: 10px 20px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } button.primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* Loading animation */ .loading-dots { display: inline-block; } .loading-dots::after { content: ''; animation: dots 1.5s steps(4, end) infinite; } @keyframes dots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } } /* Responsive design */ @media (max-width: 768px) { .container { padding: 10px; } .message { padding: 10px 12px; } }