:root{--bg: #0a0a0a;--surface: #151515;--text: #e0e0e0;--text-dim: #666;--green: #00e676;--yellow: #ffd740;--blue: #448aff;--red: #e74c3c;--orb-size: 180px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100%;max-width:600px;margin:0 auto;padding:20px;position:relative}.header{display:flex;justify-content:space-between;align-items:center;padding:10px 0;flex-shrink:0}.header h1{font-size:18px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim)}.settings-btn{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:8px;border-radius:8px;transition:color .2s}.settings-btn:hover{color:var(--text)}.orb-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}.status-label{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-top:24px;transition:color .3s}.status-label.listening{color:var(--green)}.status-label.processing{color:var(--yellow)}.status-label.speaking{color:var(--blue)}.tap-prompt{font-size:14px;color:var(--text-dim);margin-top:16px;animation:fadeInOut 2s ease-in-out infinite}@keyframes fadeInOut{0%,to{opacity:.4}50%{opacity:1}}.transcript-container{flex-shrink:0;max-height:35%;overflow-y:auto;padding:16px 0;mask-image:linear-gradient(transparent,black 20px,black calc(100% - 20px),transparent);-webkit-mask-image:linear-gradient(transparent,black 20px,black calc(100% - 20px),transparent)}.transcript-container::-webkit-scrollbar{width:4px}.transcript-container::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:2px}.message{padding:8px 14px;margin:6px 0;border-radius:12px;font-size:14px;line-height:1.5;max-width:85%;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message.user{background:#00e6761f;color:var(--green);margin-left:auto;text-align:right;border-bottom-right-radius:4px}.message.assistant{background:#448aff1f;color:var(--blue);margin-right:auto;border-bottom-left-radius:4px}.message.partial{opacity:.6}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-panel{background:var(--surface);border-radius:16px;padding:28px;width:90%;max-width:440px;max-height:80vh;overflow-y:auto}.settings-panel h2{font-size:16px;margin-bottom:20px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim)}.setting-group{margin-bottom:18px}.setting-group label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px;letter-spacing:1px;text-transform:uppercase}.setting-group input,.setting-group textarea,.setting-group select{width:100%;background:var(--bg);border:1px solid #333;border-radius:8px;padding:10px 12px;color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}.setting-group input:focus,.setting-group textarea:focus{border-color:var(--blue)}.setting-group textarea{resize:vertical;min-height:80px}.settings-actions{display:flex;gap:10px;margin-top:24px}.settings-actions button{flex:1;padding:10px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s}.settings-actions button:hover{opacity:.85}.btn-save{background:var(--blue);color:#fff}.btn-cancel{background:#333;color:var(--text)}.toggle-row{display:flex;justify-content:space-between;align-items:center}.toggle{width:44px;height:24px;background:#333;border-radius:12px;position:relative;cursor:pointer;transition:background .2s;border:none}.toggle.active{background:var(--blue)}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}.toggle.active:after{transform:translate(20px)}