body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } .header-section { padding: 20px; margin-bottom: 30px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; } .header-section h1 { margin-top: 0; color: #333; } .header-section p { margin-bottom: 0; color: #666; } .input-container { margin: 20px; display: flex; gap: 10px; } .action-button { padding: 8px 16px; cursor: pointer; border: none; border-radius: 5px; background: #f0f0f0; } .action-button:disabled { opacity: 0.5; cursor: not-allowed; } .video-container { width: 100%; max-width: 640px; margin: 20px auto; } #videoPreview { width: 100%; border-radius: 8px; } .hidden { display: none; } #output { margin: 20px; border: 1px solid #ddd; padding: 15px; height: 700px; overflow-y: auto; background-color: #fafafa; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .function-name { color: #0066cc; font-family: monospace; margin: 4px 0; padding: 4px 8px; background-color: #f0f8ff; border-left: 3px solid #0066cc; } .function-params { color: #666; font-family: monospace; margin: 4px 0; padding: 4px 8px; background-color: #f5f5f5; border-left: 3px solid #666; white-space: pre-wrap; } .api-response { color: #2e7d32; font-family: monospace; margin: 4px 0; padding: 4px 8px; background-color: #f1f8e9; border-left: 3px solid #2e7d32; white-space: pre-wrap; } .gemini-message { color: #6200ee; margin-bottom: 8px; } .user-message { color: #333; margin-bottom: 8px; } .text-input-container { flex: 1; display: flex; gap: 10px; } .text-input { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; } .text-input:focus { outline: none; border-color: #6200ee; }