*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:root{--primary: #5B5FC7;--primary-light: #7C7FDB;--primary-dark: #3F43A8;--accent: #00D9C0;--accent-light: #00FCD4;--danger: #FF5470;--success: #00C48C;--warning: #FFC542;--text-primary: #0F172A;--text-secondary: #64748B;--text-tertiary: #94A3B8;--bg-primary: #FFFFFF;--bg-secondary: #F8FAFC;--border: #E2E8F0;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1)}body{background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed;color:#1a202c;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;margin:0}.container{max-width:680px;width:100%;margin:0 auto;position:relative;z-index:1}.main-card{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0003;padding:45px 35px;text-align:center;position:relative;overflow:visible;max-width:580px;width:100%;margin:0 auto}.title{font-size:30px;font-weight:600;color:#1a202c;margin-bottom:8px;letter-spacing:-.3px;line-height:1.3}.subtitle{font-size:13px;color:#718096;margin-bottom:15px;font-weight:400;line-height:1.6}.voice-visual{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:50px}.audio-waves{position:relative;width:280px;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:30px}.mic-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 10px 30px #667eea4d;transition:all .3s ease;cursor:pointer}.mic-container:hover{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 15px 40px #667eea66}.listening .mic-container{background:linear-gradient(135deg,#ff6584,#ff8a9e);box-shadow:0 15px 40px #ff658466;animation:pulse 1.2s ease-in-out infinite}.speaking .mic-container{background:linear-gradient(135deg,#4caf50,#66bb6a);box-shadow:0 15px 40px #4caf5066;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}.mic-icon{font-size:40px;color:#fff}.session-indicator{position:absolute;bottom:-5px;right:-5px;width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0003;transition:all .3s ease;z-index:3}.start-indicator{background:linear-gradient(135deg,#4caf50,#66bb6a);animation:pulse-indicator 2s ease-in-out infinite}.start-indicator i{font-size:16px;color:#fff;margin-left:2px}.start-indicator:hover{transform:scale(1.1);box-shadow:0 6px 16px #4caf5066}@keyframes pulse-indicator{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.mic-container.session-active{border:3px solid #4CAF50;box-shadow:0 15px 40px #4caf5066,0 0 0 3px #4caf5033}.mic-session-controls{margin-top:15px;display:flex;gap:10px;justify-content:center;align-items:center}.mic-control-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:25px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.mic-control-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.mic-control-btn:active{transform:translateY(0)}.stop-session{background:linear-gradient(135deg,#ff6584,#ff8a9e);color:#fff}.stop-session:hover{background:linear-gradient(135deg,#ff5070,#ff7a8e)}.stop-session i{font-size:16px}.wave-circle{position:absolute;border-radius:50%;border:2px solid var(--primary-light);opacity:0;transition:all .5s ease}.listening .wave-circle{border-color:var(--secondary);animation:wave 2s infinite ease-out}.speaking .wave-circle{border-color:#4caf50;animation:wave 1.5s infinite ease-out}.wave-circle:nth-child(2){width:180px;height:180px;animation-delay:.2s}.wave-circle:nth-child(3){width:240px;height:240px;animation-delay:.4s}.wave-circle:nth-child(4){width:300px;height:300px;animation-delay:.6s}@keyframes wave{0%{transform:scale(.8);opacity:.8}to{transform:scale(1.2);opacity:0}}.status-text{font-size:18px;color:var(--gray);font-weight:500;margin-bottom:10px}.instruction-text{font-size:14px;color:var(--gray);font-weight:400}.action-buttons{display:flex;gap:15px;justify-content:center;margin-top:20px}.btn{padding:16px 40px;border:none;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;box-shadow:0 4px 15px #0000001a}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff4d}.btn-secondary{background-color:#f0f0f0;color:var(--dark)}.btn-secondary:hover:not(:disabled){background-color:#e0e0e0;transform:translateY(-2px)}.btn:disabled{opacity:.6;cursor:not-allowed}.conversation-container{background-color:#f5f5f5;border-radius:16px;padding:30px;margin-top:30px;max-height:400px;overflow-y:auto;display:none}.conversation-container.active{display:none;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message{margin-bottom:20px;display:flex;align-items:flex-start;gap:12px}.message.user{flex-direction:row-reverse}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}.user .avatar{background-color:var(--primary)}.ai .avatar{background-color:var(--secondary)}.message-content{background-color:#fff;padding:15px 20px;border-radius:18px;max-width:70%;box-shadow:0 2px 5px #0000000d}.user .message-content{background-color:#e3f2fd;border-top-right-radius:4px}.ai .message-content{background-color:#e8f5e9;border-top-left-radius:4px}.speaking-indicator{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--gray);font-size:14px}.speaking-dots{display:flex;gap:4px}.speaking-dots span{width:6px;height:6px;border-radius:50%;background-color:var(--primary);animation:speaking 1.4s infinite ease-in-out}.speaking-dots span:nth-child(1){animation-delay:-.32s}.speaking-dots span:nth-child(2){animation-delay:-.16s}@keyframes speaking{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}.ai-response-controls{display:flex;align-items:center;gap:15px;margin-top:20px;justify-content:center}.control-btn{width:44px;height:44px;border-radius:50%;background-color:var(--primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.control-btn:hover:not(:disabled){background-color:var(--primary-dark);transform:scale(1.05)}.control-btn:disabled{background-color:#bdbdbd;cursor:not-allowed;transform:none}.audio-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:40px;margin-top:15px}.audio-bar{width:4px;background:linear-gradient(to top,var(--primary),var(--primary-light));border-radius:2px;transition:height .1s ease}.speaking .audio-bar{background:linear-gradient(to top,#4caf50,#66bb6a)}.typing-indicator{display:flex;align-items:center;gap:12px;margin-bottom:20px;opacity:0;transition:opacity .3s ease}.typing-indicator.active{opacity:1}.typing-dots{display:flex;gap:4px}.typing-dots span{width:8px;height:8px;border-radius:50%;background-color:var(--primary);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:.5}40%{transform:scale(1);opacity:1}}.quick-actions{display:none;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;margin-bottom:20px}.quick-action-btn{padding:10px 20px;background-color:#f0f0f0;border:none;border-radius:20px;font-size:14px;cursor:pointer;transition:all .3s ease}.quick-action-btn:hover{background-color:var(--primary);color:#fff}.history-panel,.settings-panel{position:fixed;top:0;width:300px;height:100%;background-color:#fff;box-shadow:2px 0 10px #0000001a;z-index:100;padding:20px;overflow-y:auto;transition:transform .3s ease}.history-panel{left:0;transform:translate(-100%)}.history-panel.active{transform:translate(0)}.settings-panel{right:0;transform:translate(100%)}.settings-panel.active{transform:translate(0)}.history-header,.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.history-item{padding:15px;border-radius:10px;background-color:#f5f5f5;margin-bottom:10px;cursor:pointer;transition:background-color .2s ease}.history-item:hover{background-color:#e9e9e9}.history-date{font-size:12px;color:var(--gray);margin-bottom:5px}.history-preview{font-size:14px;overflow:hidden;text-overflow:ellipsis}.feedback-buttons{display:flex;gap:10px;margin-top:10px;justify-content:flex-end}.feedback-btn{background:none;border:none;font-size:16px;cursor:pointer;color:var(--gray);transition:color .2s ease}.feedback-btn:hover,.feedback-btn.active{color:var(--primary)}.setting-item{margin-bottom:20px}.setting-label{display:block;margin-bottom:8px;font-weight:500}.setting-control{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd}.header-buttons{position:absolute;top:20px;right:20px;display:flex;gap:10px;z-index:10}.header-btn{width:38px;height:38px;border-radius:8px;background:#f7fafc;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0000000d;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#4a5568}.header-btn:hover{background:#667eea;color:#fff;border-color:#667eea;transform:translateY(-1px);box-shadow:0 4px 8px #667eea4d}.header-btn:active{transform:translateY(0)}.panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:99;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.panel-overlay.active{opacity:1;visibility:visible}.error-message{background-color:#ffebee;color:#c62828;padding:10px 15px;border-radius:10px;margin-bottom:15px;display:none}.error-message.active{display:block;animation:fadeIn .5s ease}.welcome-message{text-align:center;margin-bottom:30px;animation:fadeIn 1s ease}@media (max-width: 600px){body{padding:15px}.main-card{padding:40px 25px}.title{font-size:28px}.audio-waves{width:240px;height:240px}.wave-circle:nth-child(2){width:160px;height:160px}.wave-circle:nth-child(3){width:200px;height:200px}.wave-circle:nth-child(4){width:240px;height:240px}.btn{padding:14px 30px}.message-content{max-width:85%}.history-panel,.settings-panel{width:100%}}#system-prompt-container{margin:20px 0;padding:30px;border-radius:16px;background-color:#f8f9fa;border:1px solid #e0e0e0;box-shadow:0 2px 8px #0000001a}#system-prompt-container h2{margin-top:0;margin-bottom:20px;font-size:24px;font-weight:700;color:var(--primary)}.editor-container{display:flex;flex-direction:column;gap:15px}.system-prompt-textarea{width:100%;min-height:200px;padding:15px;border:1px solid #ddd;border-radius:12px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:14px;resize:vertical;background-color:#fff;color:var(--dark);transition:all .2s ease;line-height:1.6}.system-prompt-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff1a}.prompt-controls{display:flex;justify-content:flex-end;gap:10px}.prompt-controls .button{padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.prompt-controls .button.success{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:#fff;border:none}.prompt-controls .button.success:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6c63ff4d}#save-confirmation{color:#059669;font-weight:600;padding:10px 15px;margin-bottom:15px;background:#0596691a;border-radius:8px;border:1px solid rgba(5,150,105,.2);animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%,to{opacity:0;transform:translateY(-10px)}20%,80%{opacity:1;transform:translateY(0)}}