body { background-color: #F5F5F5; font-family: sans-serif; } .gradio { max-width: 900px; margin: 0 auto; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: #A238FF; font-size: 40px; font-weight: bold; text-align: center; margin-bottom: 40px; } .chatbot-container { margin: 40px 0; } .chatbot-message { margin: 10px 0; } .chatbot-message .user { font-weight: bold; margin-right: 5px; color: #A238FF; } .chatbot-message .assistant { font-weight: bold; margin-left: 5px; color: #BBB; } .chatbot-message pre code { display: block; padding: 10px; background-color: #EEE; border-radius: 5px; white-space: pre-wrap; overflow-wrap: break-word; } .chatbot-message pre code.python { color: #007F00; } .chatbot-message pre code.shell { color: #007F7F; } .gradio button { background-color: #A238FF !important; border: none; color: white; padding: 12px 24px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; } .gradio button:hover { background-color: #8A1ACF !important; } .gradio input[type=text] { border-radius: 5px; border: none; padding: 10px; width: 100%; font-size: 16px; } .gradio label { font-size: 16px; margin-bottom: 10px; display: block; } .gradio .row { display: flex; margin: 10px 0; align-items: center; } .gradio .column { flex: 1; } .gradio .button-container { display: flex; justify-content: flex-end; } .gradio .chatbot-container:last-of-type { margin-bottom: 0; }