body { background-color: #2c3e50; color: #ecf0f1; font-family: Arial, sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #34495e #2c3e50; } #chatHistory { height: 300px; flex-grow: 1; overflow-y: auto; padding: 10px; margin-bottom: 20px; border: 1px solid #34495e; border-radius: 5px; } #sendButton { padding: 10px 20px; font-size: 1rem; color: white; background-color: #007BFF; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; } #sendButton:hover { background-color: #0056b3; } #sendButton:disabled { background-color: #6c757d; cursor: not-allowed; } #submitApiKey { padding: 10px 20px; font-size: 1rem; color: white; background-color: #007BFF; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; } #stopButton { padding: 10px 20px; font-size: 1rem; color: white; background-color: #c0392b; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; } #stopButton:hover { background-color: #a93226; } #stopButton:disabled { background-color: #6c757d; cursor: not-allowed; } .message { font-size: 0.9em; padding: 10px 15px; margin-bottom: 15px; padding: 10px; background-color: #34495e; border-radius: 5px; } .userMessage { align-self: flex-end; background-color: #2980b9; } .assistantMessage { align-self: flex-start; background-color: #16a085; } #chatForm { display: flex; gap: 10px; } #promptInput { flex-grow: 1; padding: 10px; border: 1px solid #34495e; border-radius: 5px; color: inherit; background-color: #2c3e50; } #apiKeyInput { flex-grow: 1; padding: 10px; border: 1px solid #34495e; border-radius: 5px; color: inherit; background-color: #2c3e50; } #promptInput:focus { outline: none; box-shadow: 0 0 0 2px #007BFF; } header { margin-bottom: 20px; } header h1 { font-size: 1.5rem; text-align: center; padding: 0.5em; background: #2980b9; border-radius: 5px; } #sendPrompt { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; background-color: #2980b9; color: #ecf0f1; } #modelSelectionContainer { margin-bottom: 20px; color: #ecf0f1; } #chatHistory, #promptInput, #modelSelect { border: 2px solid #34495e; } #modelSelect { padding: 10px; border: 1px solid #34495e; border-radius: 5px; background-color: #2c3e50; color: #ecf0f1; font-family: Arial, sans-serif; cursor: pointer; } #modelSelect:focus { outline: none; border-color: #2980b9; } label { color: #ecf0f1; margin-right: 10px; } #modelSelectionContainer { display: flex; align-items: center; justify-content: start; gap: 10px; margin-bottom: 10px; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #2c3e50; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #34495e; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #2980b9; } @keyframes ellipsis { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } } .ellipsis::after { content: ''; animation: ellipsis 2s infinite; }