:root{--bg-color: #0a0a0f;--card-bg: rgba(20, 20, 30, .8);--accent-color: #6366f1;--accent-glow: rgba(99, 102, 241, .4);--text-primary: #f1f5f9;--text-secondary: #94a3b8}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%;max-width:600px;padding:2rem}.app-container{display:flex;flex-direction:column;align-items:center;gap:2rem}.avatar-container{position:relative;width:400px;height:400px;border-radius:50%;background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;--mic-volume: 0;box-shadow:0 0 calc(40px + (var(--mic-volume) * 60px)) #6366f166,0 0 calc(60px + (var(--mic-volume) * 100px)) #6366f133;transition:box-shadow .1s ease-out,transform .1s ease-out;transform:scale(calc(1 + (var(--mic-volume) * .03)))}.avatar-container.speaking{box-shadow:0 0 60px var(--accent-glow),0 0 100px var(--accent-glow);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.avatar-container.listening{box-shadow:0 0 calc(60px + (var(--mic-volume) * 100px)) #4ade8099,0 0 calc(100px + (var(--mic-volume) * 150px)) #4ade8066;border:2px solid rgba(74,222,128,.4);transform:scale(calc(1 + (var(--mic-volume) * .05)))}.avatar-container.thinking{box-shadow:0 0 60px #c084fc80,0 0 100px #c084fc4d;animation:pulse 1.5s ease-in-out infinite;border:2px solid rgba(192,132,252,.3)}.avatar-image{width:360px;height:360px;border-radius:50%;object-fit:cover}.status-container{text-align:center}.status-text{font-size:1rem;color:var(--text-secondary);margin-bottom:.5rem}.status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--card-bg);border-radius:9999px;font-size:.85rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-color)}.status-dot.active{animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.subtitle-container{min-height:80px;padding:1rem;background:var(--card-bg);border-radius:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;text-align:center}.subtitle-text{font-size:1.1rem;line-height:1.6;color:var(--text-primary)}.start-button{padding:1rem 3rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent-color),#8b5cf6);border:none;border-radius:9999px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px var(--accent-glow)}.start-button:hover{transform:translateY(-2px);box-shadow:0 6px 30px var(--accent-glow)}.start-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.stop-button{padding:1rem 3rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:9999px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #ef444466}.stop-button:hover{transform:translateY(-2px);box-shadow:0 6px 30px #ef444480}.error-container{padding:1rem;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:.5rem;color:#fca5a5;text-align:center}.history-container{width:100%;max-height:300px;overflow-y:auto;background:var(--card-bg);border-radius:1rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.history-title{font-size:.9rem;color:var(--text-secondary);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.history-list{display:flex;flex-direction:column;gap:.75rem}.history-item{padding:.5rem;background:rgba(255,255,255,.05);border-radius:.5rem;font-size:.9rem;line-height:1.5}.history-role{color:var(--accent-color);font-weight:600;margin-right:.5rem}.history-item.user .history-role{color:#4ade80}.history-text{color:var(--text-primary)}.cost-container{width:100%;padding:.75rem 1rem;background:var(--card-bg);border-radius:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.85rem}.cost-row{display:flex;justify-content:space-between;padding:.25rem 0}.cost-label{color:var(--text-secondary)}.cost-value{color:var(--text-primary);font-family:monospace}.cost-total{border-top:1px solid rgba(255,255,255,.1);margin-top:.25rem;padding-top:.5rem}.cost-total .cost-value{color:#4ade80;font-weight:600}.menu-container{position:absolute;top:0;right:0;padding:1rem;z-index:1000;display:flex;flex-direction:column;align-items:flex-end}.hamburger-button{display:flex;flex-direction:column;justify-content:space-between;width:30px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}.hamburger-line{width:100%;height:2px;background-color:var(--text-primary);border-radius:2px;transition:all .3s ease}.hamburger-line.active:nth-child(1){transform:translateY(11px) rotate(45deg)}.hamburger-line.active:nth-child(2){opacity:0}.hamburger-line.active:nth-child(3){transform:translateY(-11px) rotate(-45deg)}.menu-dropdown{position:absolute;top:100%;right:0;margin-top:1rem;background:var(--card-bg);border-radius:1rem;padding:.5rem;min-width:200px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 40px #00000080;display:none;flex-direction:column;gap:.5rem;border:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.menu-dropdown.active{display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-item{padding:.75rem 1rem;color:var(--text-primary);border:none;background:transparent;text-align:left;border-radius:.5rem;cursor:pointer;transition:all .2s;font-size:.95rem;display:flex;align-items:center;gap:.5rem}.menu-item:hover{background:rgba(255,255,255,.1);color:var(--accent-color)}.menu-item.active{background:var(--accent-glow);color:var(--accent-color);font-weight:600}.settings-container{margin-top:0;width:100%;max-width:500px;padding:2rem;background:var(--card-bg);border-radius:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 40px #0000004d}.settings-title{font-size:1.25rem;color:var(--text-primary);margin-bottom:2rem;text-align:center;font-weight:600}.avatar-upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2rem}@media (max-width: 480px){.avatar-upload-grid{grid-template-columns:1fr}}.upload-item{display:flex;flex-direction:column;gap:.75rem}.upload-label{font-size:.85rem;color:var(--text-secondary);text-align:center}.upload-button{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);border-radius:.75rem;color:var(--text-primary);font-size:.9rem;cursor:pointer;transition:all .2s ease;overflow:hidden;position:relative}.upload-button:hover{background:rgba(255,255,255,.1);border-color:var(--accent-color)}.upload-button.has-image{background:transparent;border-style:solid;border-color:var(--accent-color);padding:0}.upload-preview{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.upload-button:hover .upload-preview{transform:scale(1.05)}.reset-button{padding:.75rem 2rem;font-size:.95rem;background:transparent;color:#ef4444;border:1px solid #ef4444;border-radius:9999px;cursor:pointer;transition:all .2s ease;width:100%}.reset-button:hover{background:rgba(239,68,68,.1)}.settings-section{margin-bottom:1.5rem}.settings-label{display:block;font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.settings-input,.settings-select{width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:.75rem;color:var(--text-primary);font-size:1rem;outline:none;transition:all .2s ease}.settings-input:focus,.settings-select:focus{border-color:var(--accent-color);background:rgba(255,255,255,.1)}.settings-select option{background:#0a0a0f;color:var(--text-primary)}.settings-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 1rem center;background-size:.65em auto;padding-right:2.5rem}.tos-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-color);z-index:9999;display:flex;align-items:center;justify-content:center;padding:2rem}.tos-container{width:100%;max-width:600px;background:var(--card-bg);border-radius:1.5rem;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 40px #00000080}.tos-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:1.5rem;text-align:center}.tos-content{max-height:400px;overflow-y:auto;padding:1rem;background:rgba(255,255,255,.05);border-radius:.75rem;margin-bottom:1.5rem;line-height:1.8;color:var(--text-secondary)}.tos-content h3{color:var(--text-primary);font-size:1.1rem;margin-top:1rem;margin-bottom:.5rem}.tos-content p{margin-bottom:.75rem}.tos-content ul{margin-left:1.5rem;margin-bottom:.75rem}.accept-button{width:100%;padding:1rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent-color),#8b5cf6);border:none;border-radius:9999px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px var(--accent-glow)}.accept-button:hover{transform:translateY(-2px);box-shadow:0 6px 30px var(--accent-glow)}