*{box-sizing:border-box}:root{--bg:#0a0a0f;--bg-card:#14141f;--bg-hover:#1c1c2e;--border:#2a2a3e;--text:#e8e8f0;--text-muted:#8888a0;--accent:#6366f1;--accent-hover:#818cf8;--green:#22c55e;--yellow:#eab308;--red:#ef4444;--orange:#f97316}body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{cursor:pointer;font-family:inherit}.app-container{max-width:820px;margin:0 auto;padding:1rem;min-height:100vh}.app-header{text-align:center;padding:1.25rem 0;border-bottom:1px solid var(--border);margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between;position:relative}.header-content{flex:1 1}.header-title{margin:0;font-size:1.8rem;font-weight:700;letter-spacing:-.03em;display:flex;align-items:center;justify-content:center;gap:.5rem}.header-subtitle{margin:.3rem 0 0;color:var(--text-muted);font-size:.88rem}.header-history-btn{position:absolute;right:0;display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:.82rem;transition:all .15s}.header-history-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--accent)}.history-btn-text{display:none}@media (min-width:480px){.history-btn-text{display:inline}}.negotiate-container{padding:.5rem 0}.avatar-toggle{display:flex;justify-content:center;margin:.5rem 0}.avatar-toggle-btn{padding:.3rem .8rem;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:.72rem;transition:all .15s}.avatar-toggle-btn:hover{background:var(--bg-hover);color:var(--text)}.ai-speech-bubble{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin:.75rem 0;font-size:.95rem;line-height:1.6;position:relative}.ai-speech-header{font-size:.75rem;color:var(--text-muted);margin-bottom:.35rem;font-weight:500;display:flex;align-items:center;gap:.4rem}.ai-speech-header:has(>:first-child){color:var(--green)}.processing-indicator{color:var(--yellow);font-size:.7rem}.error-banner{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:.6rem 1rem;margin:.5rem 0;font-size:.82rem;color:var(--red);display:flex;align-items:center;gap:.4rem}.transcript-container{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1rem;margin:.75rem 0;max-height:200px;overflow-y:auto}.transcript-header{font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem;font-weight:500;display:flex;align-items:center;gap:.4rem}.transcript-turn{margin-bottom:.75rem;font-size:.85rem}.transcript-user{color:var(--accent-hover)}.transcript-ai{color:var(--text-muted);margin-top:.2rem}.empty-state{text-align:center;padding:2rem;color:var(--text-muted);font-size:.9rem}.empty-state-icon{margin-bottom:.5rem;color:var(--accent)}.agent-state-indicator{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.5rem 1rem;border-radius:20px;font-size:.82rem;font-weight:500;transition:all .3s ease;margin-top:.5rem}.volume-bars{display:inline-flex;align-items:center;gap:1px;height:14px}.volume-bar{width:2px;border-radius:1px;transition:height .1s ease}.controls-container{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:.75rem}.mode-toggle{display:flex;gap:.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:.2rem}.mode-btn{padding:.35rem .9rem;border-radius:20px;border:none;background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:400;display:flex;align-items:center;gap:.3rem;transition:all .15s}.mode-btn.active{background:var(--accent);color:#fff;font-weight:600}.mode-btn:hover:not(.active){background:var(--bg-hover);color:var(--text)}.mic-btn{width:80px;height:80px;border-radius:50%;border:3px solid var(--accent);background:var(--bg-card);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.mic-btn.active{border-color:var(--green);background:var(--green);box-shadow:0 0 20px rgba(34,197,94,.3)}.mic-btn:hover:not(.active){background:var(--bg-hover)}.action-buttons{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.action-btn{padding:.6rem 1.5rem;border-radius:10px;border:1px solid var(--border);background:transparent;font-size:.88rem;transition:all .15s;display:flex;align-items:center;gap:.4rem}.end-btn{color:var(--text)}.end-btn:disabled{color:var(--text-muted);opacity:.5;cursor:not-allowed}.end-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--red);color:var(--red)}.back-btn{color:var(--text-muted)}.back-btn:hover{background:var(--bg-hover);color:var(--text)}.emotion-badge{display:inline-block;font-size:.65rem;padding:.1rem .4rem;border-radius:4px;margin-right:.3rem;text-transform:capitalize;font-weight:500}.recording{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 12px rgba(239,68,68,0)}}.waveform-bar{animation:waveform .6s ease-in-out infinite alternate}@keyframes waveform{0%{transform:scaleY(.4);opacity:.5}to{transform:scaleY(1.2);opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeInUp .3s ease-out forwards}.scenario-card{transition:all .15s ease}.scenario-card:hover{transform:translateX(4px);border-color:var(--accent)!important}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.avatar-ring{animation:ring-pulse 1.2s ease-in-out infinite}@keyframes ring-pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:.2}}.avatar-speaking-pulse{animation:bg-pulse 2s ease-in-out infinite}@keyframes bg-pulse{0%,to{opacity:.3}50%{opacity:.7}}.cursor-blink{animation:blink .7s step-end infinite;color:var(--accent);font-weight:300}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width:640px){.app-container{padding:.75rem}.app-header{flex-direction:column;gap:.75rem;padding:1rem 0}.header-title{font-size:1.5rem}.header-subtitle{font-size:.82rem}.header-history-btn{position:static}.ai-speech-bubble{padding:.875rem 1rem;font-size:.9rem}.transcript-container{max-height:150px;padding:.75rem}.mode-btn{padding:.3rem .7rem;font-size:.72rem}.mic-btn{width:72px;height:72px}.action-btn{padding:.5rem 1rem;font-size:.82rem}}@media (max-width:380px){.header-title{font-size:1.3rem}.action-btn span:not(svg),.mode-btn span:not(svg){display:none}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast:high){:root{--border:#4a4a5e;--text-muted:#a0a0b8}}@media print{.app-header,.avatar-toggle,.controls-container,.mic-btn,.mode-toggle{display:none!important}.app-container{max-width:100%;padding:0}.ai-speech-bubble,.transcript-container{border:1px solid #ccc;background:#fff;color:#000}}