@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";body{font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}#root{width:100%;height:100vh}.w-4{width:1rem}.h-4{height:1rem}.w-5{width:1.25rem}.h-5{height:1.25rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}.chat-container{width:90%;max-width:800px;height:90vh;background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a;display:flex;flex-direction:column;overflow:hidden}.chat-header{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;padding:20px;text-align:center;position:relative}.chat-header h1{font-size:1.8rem;margin-bottom:5px}.chat-header p{opacity:.9;font-size:.9rem}.session-info{position:absolute;top:10px;right:20px;font-size:.8rem;opacity:.8}.chat-messages{flex:1;padding:20px;overflow-y:auto;background:#f8f9fa}.message{margin-bottom:15px;display:flex;align-items:flex-start}.message.user{justify-content:flex-end}.message.assistant{justify-content:flex-start}.message-content{max-width:70%;padding:12px 16px;border-radius:18px;word-wrap:break-word;line-height:1.4;white-space:pre-wrap}.message.user .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom-right-radius:4px}.message.assistant .message-content{background:#fff;color:#333;border:1px solid #e0e0e0;border-bottom-left-radius:4px;box-shadow:0 2px 4px #0000001a}.message-avatar{width:35px;height:35px;border-radius:50%;margin:0 10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.9rem;flex-shrink:0}.message.user .message-avatar{background:linear-gradient(135deg,#ff7b7b,#ff416c);order:2}.message.assistant .message-avatar{background:linear-gradient(135deg,#4facfe,#00f2fe)}.typing-indicator{display:flex;justify-content:flex-start;margin-bottom:15px}.typing-dots{background:#fff;border:1px solid #e0e0e0;border-radius:18px;padding:12px 16px;margin-left:45px}.typing-dots span{display:inline-block;width:8px;height:8px;background:#999;border-radius:50%;margin:0 2px;animation:typing 1.4s infinite ease-in-out}.typing-dots span:nth-child(1){animation-delay:-.32s}.typing-dots span:nth-child(2){animation-delay:-.16s}@keyframes typing{0%,80%,to{transform:scale(.8);opacity:.6}40%{transform:scale(1);opacity:1}}.chat-input{padding:20px;background:#fff;border-top:1px solid #e0e0e0}.input-container{display:flex;gap:10px;align-items:center}.input-container input{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:25px;font-size:1rem;outline:none;transition:border-color .3s ease}.input-container input:focus{border-color:#4facfe}.input-container input:disabled{opacity:.6;cursor:not-allowed}.send-button{padding:12px 16px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;border-radius:25px;font-size:1rem;cursor:pointer;transition:transform .2s ease;display:flex;align-items:center;gap:8px;min-width:60px;justify-content:center}.send-button:hover:not(:disabled){transform:translateY(-2px)}.send-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.mic-button{padding:12px;background:linear-gradient(135deg,#ff6b6b,#ff8e8e);color:#fff;border:none;border-radius:50%;cursor:pointer;transition:all .3s ease;width:45px;height:45px;display:flex;align-items:center;justify-content:center}.mic-button:hover{transform:scale(1.1)}.mic-button.recording{background:linear-gradient(135deg,#ff4757,#ff3838);animation:pulse 1.5s infinite}.mic-button.connecting{background:linear-gradient(135deg,#ffa502,#ff6348)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.controls{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}.control-button{padding:8px 16px;background:#f8f9fa;color:#666;border:1px solid #e0e0e0;border-radius:15px;font-size:.9rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px}.control-button:hover{background:#f0f0f0}.control-button.active{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.control-button.disabled{opacity:.6;background:#f5f5f5}.control-button.stop-speech{background:linear-gradient(135deg,#ff7b7b,#ff416c);color:#fff;animation:stopSpeechPulse 2s infinite}.control-button.stop-speech:hover{background:linear-gradient(135deg,#ff6b6b,#ff3b5c)}@keyframes stopSpeechPulse{0%,to{opacity:1}50%{opacity:.8}}.voice-settings-panel{background:#f8f9fa;border:2px solid #e9ecef;border-radius:15px;padding:20px;margin:15px 0;box-shadow:0 4px 12px #0000001a}.voice-settings-panel h4{margin:0 0 15px;color:#4facfe;font-size:1.1rem;text-align:center}.voice-controls{display:flex;flex-direction:column;gap:15px}.voice-control{display:flex;flex-direction:column;gap:8px}.voice-control label{font-weight:600;color:#333;font-size:.9rem}.voice-control input[type=range]{width:100%;height:8px;border-radius:4px;background:#ddd;outline:none;opacity:.8;transition:opacity .2s;cursor:pointer}.voice-control input[type=range]:hover{opacity:1}.voice-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#4facfe,#00f2fe);cursor:pointer;box-shadow:0 2px 4px #0003}.voice-control input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#4facfe,#00f2fe);cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.range-labels{display:flex;justify-content:space-between;margin-top:-5px}.range-labels small{color:#666;font-size:.75rem}.voice-control select{padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;font-size:.9rem;outline:none;transition:border-color .3s ease}.voice-control select:focus{border-color:#4facfe}.voice-control-buttons{display:flex;gap:10px;margin-top:10px}.test-voice-btn,.reset-voice-btn{flex:1;padding:10px 15px;border:none;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-weight:500}.test-voice-btn{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.test-voice-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4facfe4d}.reset-voice-btn{background:#f8f9fa;color:#666;border:1px solid #e0e0e0}.reset-voice-btn:hover{background:#e9ecef;transform:translateY(-1px)}.engine-toggle{display:flex;gap:10px;margin-top:8px}.engine-btn{flex:1;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-weight:500}.engine-btn:hover:not(:disabled){border-color:#4facfe;transform:translateY(-1px)}.engine-btn.active{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border-color:#4facfe}.engine-btn:disabled{opacity:.6;cursor:not-allowed;background:#f5f5f5;color:#999}.engine-btn:disabled:hover{transform:none;border-color:#e0e0e0}.welcome-message{text-align:center;color:#666;margin:40px 0;padding:20px}.welcome-message h2{color:#4facfe;margin-bottom:10px}.voice-status{margin-top:10px;padding:8px 12px;background:#f8f9fa;border-radius:15px;font-size:.9rem;color:#666;text-align:center;display:none}.voice-status.active{display:block}.voice-status.connected{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.voice-status.recording{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.voice-status.transcribing{background:#cce7ff;color:#0056b3;border:1px solid #b3d9ff;animation:transcribePulse 1s ease-in-out infinite}@keyframes transcribePulse{0%{background:#cce7ff}50%{background:#99d3ff}to{background:#cce7ff}}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.message{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.chat-container{width:95%;height:95vh;border-radius:10px}.message-content{max-width:85%}.chat-header h1{font-size:1.5rem}.session-info{position:static;margin-top:10px}.controls{justify-content:center}.control-button{font-size:.8rem;padding:6px 12px}.input-container{gap:8px}.input-container input{font-size:.9rem}.send-button{min-width:50px;padding:10px 14px}.mic-button{width:40px;height:40px}}@media (max-width: 480px){.chat-header,.chat-messages,.chat-input{padding:15px}.message-content{max-width:90%;padding:10px 14px}.message-avatar{width:30px;height:30px;font-size:.8rem}}