body{color:#fff;background:#0a1120;min-height:100vh;margin:0;padding:0;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-container{box-sizing:border-box;background-color:#10182c;border-radius:20px;max-width:1200px;min-height:calc(100vh - 48px);margin:0 auto;padding:24px;box-shadow:0 20px 40px #00000080}.header{margin-bottom:32px}.header-content{justify-content:space-between;align-items:flex-start;display:flex}.header-text h1{color:#fff;margin:0 0 8px;font-size:2rem;font-weight:700}.subtitle{color:#9ca3af;margin:0;font-size:.875rem}.status-badge{align-items:center;gap:8px;display:flex}.status-label{color:#6b7280;font-size:.75rem}.status-indicator{color:#fff;background:#10b981;border-radius:6px;padding:4px 12px;font-size:.75rem;font-weight:500}.input-section{margin-bottom:32px}.section-title{color:#e5e7eb;margin:0 0 16px;font-size:1.125rem;font-weight:600}textarea{color:#e5e7eb;resize:vertical;box-sizing:border-box;background:#0d1425;border:1px solid #6b72804d;border-radius:12px;width:100%;height:128px;margin-bottom:16px;padding:16px;font-family:inherit;font-size:16px;transition:all .3s}textarea::placeholder{color:#6b7280}textarea:focus{border-color:#3b82f680;outline:none;box-shadow:0 0 0 2px #3b82f61a}textarea:disabled{opacity:.5;cursor:not-allowed}.button-group{flex-wrap:wrap;gap:12px;display:flex}.button-group.center-buttons{justify-content:center;gap:1rem;margin-top:1rem;display:flex}.ask-button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;transition:all .3s}.ask-button:hover:not(:disabled){background:#1d4ed8}.ask-button:disabled{color:#6b7280;cursor:not-allowed;background:#374151}.voice-button{color:#fff;cursor:pointer;background:#059669;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;transition:all .3s}.voice-button:hover:not(:disabled){background:#047857}.voice-button.listening{background:#dc2626;animation:1.5s infinite pulse}.voice-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:12px;padding:.8rem 1.8rem;font-weight:700;transition:all .3s}.voice-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #6366f14d}.voice-btn.recording{background:linear-gradient(135deg,#ef4444,#dc2626)}.clear-button{color:#d1d5db;cursor:pointer;background:#374151;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;transition:all .3s}.clear-button:hover{background:#4b5563}.clear-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:12px;padding:.8rem 1.8rem;font-weight:700;transition:all .3s}.clear-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #f59e0b4d}@keyframes pulse{0%{box-shadow:0 0 #dc262666}70%{box-shadow:0 0 0 10px #dc262600}to{box-shadow:0 0 #dc262600}}.listening-indicator{justify-content:center;align-items:center;gap:8px;margin:12px 0;display:flex}.listening-indicator span{background-color:#fbbf24;border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite bounce;display:inline-block}.listening-indicator span:first-child{animation-delay:-.32s}.listening-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(.6)}40%{transform:scale(1.2)}}.error-section{color:#fca5a5;background:#dc26261a;border:1px solid #dc26264d;border-radius:8px;margin-top:12px;padding:12px;position:relative}.error-close{cursor:pointer;color:#dc2626;background:0 0;border:none;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:18px;display:flex;position:absolute;top:8px;right:12px}.main-content{gap:24px;margin-bottom:32px;display:flex}.debug-panel{background:#0d1425;border:1px solid #6b728033;border-radius:8px;width:320px;padding:16px}.debug-panel h3{color:#9ca3af;margin:0 0 12px;font-size:.875rem;font-weight:500}.debug-content{background:#1f293780;border-radius:6px;max-height:240px;padding:12px;overflow:auto}.debug-content pre{color:#9ca3af;white-space:pre-wrap;margin:0;font-family:Courier New,monospace;font-size:.75rem}.debug-content p{color:#9ca3af;margin:0;font-size:.75rem}.response-panel{background:#0d1425;border-radius:8px;flex:1;padding:16px}.response-title{color:#e5e7eb;margin:0 0 16px;font-size:1.125rem;font-weight:700}.subtitle-section{text-align:center;padding:32px 0}.subtitle-header{color:#f59e0b;margin-bottom:8px;font-size:.875rem}.subtitle-line{background:#f59e0b;width:48px;height:2px;margin:0 auto 24px}.loading-state{text-align:center;margin:24px 0}loading-state .loading-content{color:#fbbf24;justify-content:center;align-items:center;gap:12px;font-size:1rem;font-weight:600;display:flex}.spinner{border:3px solid #374151;border-top-color:#fbbf24;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state p{color:#6b7280;margin:0;font-size:.875rem;font-style:italic}.subtitle-content .answer-text{color:#e5e7eb;text-align:left;margin:0;font-size:.875rem;line-height:1.6}.audio-section{text-align:center;margin-top:24px}.audio-player{width:100%;margin-bottom:12px}.audio-controls{justify-content:center;display:flex}.stop-button{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:6px;padding:8px 16px;font-size:.875rem;font-weight:500;transition:all .3s}.stop-button:hover{background:#b91c1c}.footer{text-align:center;border-top:1px solid #6b728033;padding-top:24px}.footer p{color:#6b7280;margin:0;font-size:.875rem}.conversation-control{flex-direction:column;align-items:center;gap:1rem;margin:2rem 0;display:flex}.start-conversation-btn,.stop-conversation-btn{cursor:pointer;border:none;border-radius:12px;padding:1rem 2rem;font-size:1.2rem;font-weight:700;transition:all .3s;box-shadow:0 4px 6px #0000001a}.start-conversation-btn{color:#fff;background:linear-gradient(135deg,#10b981,#059669)}.start-conversation-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #10b9814d}.stop-conversation-btn{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626)}.stop-conversation-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #ef44444d}.status-indicator{align-items:center;gap:.5rem;display:flex}.status{border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;display:flex}.status.listening{color:#3b82f6;background:#3b82f61a}.status.processing{color:#f59e0b;background:#fbbf241a}.status.speaking{color:#10b981;background:#10b9811a}.pulse{background:#3b82f6;border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite pulseAnim}@keyframes pulseAnim{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.sound-wave{background:#10b981;border-radius:50%;width:12px;height:12px;animation:1s ease-in-out infinite soundWave}@keyframes soundWave{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}}.status-bar{justify-content:center;margin:1rem 0;display:flex}.status-pill{border-radius:9999px;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-size:.95rem;font-weight:600;display:flex}.status-pill .dot{border-radius:50%;width:10px;height:10px;animation:1.5s infinite pulseDot}.status-pill.listening{color:#3b82f6;background:#3b82f626}.status-pill.listening .dot{background:#3b82f6}.status-pill.processing{color:#f59e0b;background:#f59e0b26}.status-pill.processing .spinner{border:3px solid #f59e0b;border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.8s linear infinite spin}.status-pill.speaking{color:#10b981;background:#10b98126}.status-pill.speaking .wave{background:#10b981;border-radius:50%;width:12px;height:12px;animation:1s ease-in-out infinite wave}.status-pill.idle{color:#9ca3af;background:#9ca3af26}.status-pill.idle .dot.gray{background:#9ca3af}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.4)}}@keyframes wave{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}}.transcription-container{margin:2rem 0}.transcript-display{background:#0d1425;border:1px solid #6b72804d;border-radius:12px;align-items:center;min-height:60px;margin-bottom:1rem;padding:1.5rem;display:flex}.transcript-display p{color:#e5e7eb;margin:0;font-size:1rem}.listening-loader,.processing-loader{flex-direction:column;align-items:center;gap:1rem;margin:2rem 0;padding:2rem;display:flex}.sound-bars{align-items:flex-end;gap:4px;height:40px;display:flex}.sound-bars span{background:#3b82f6;border-radius:2px;width:4px;animation:.8s ease-in-out infinite soundBar}.sound-bars span:first-child{animation-delay:0s}.sound-bars span:nth-child(2){animation-delay:.1s}.sound-bars span:nth-child(3){animation-delay:.2s}.sound-bars span:nth-child(4){animation-delay:.3s}.sound-bars span:nth-child(5){animation-delay:.4s}@keyframes soundBar{0%,to{height:10px}50%{height:40px}}.brain-loader{width:60px;height:60px;position:relative}.brain-pulse{border:4px solid #f59e0b;border-radius:50%;width:100%;height:100%;animation:1.5s ease-out infinite brainPulse;position:absolute}@keyframes brainPulse{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(1.2)}}.listening-loader p,.processing-loader p{color:#9ca3af;margin:0;font-size:.9rem}@media (max-width:768px){.app-container{margin:12px;padding:16px}.header-content{flex-direction:column;gap:16px}.main-content{flex-direction:column}.debug-panel{width:100%}.button-group{flex-direction:column;align-items:stretch}.ask-button,.voice-button,.clear-button{width:100%}}.subtitle-box{text-align:center;color:#f1f1f1;background:#222;border-radius:10px;margin-top:20px;padding:10px 20px;font-size:18px}