:root{--bg-primary: #0a0c10;--bg-secondary: #12151c;--bg-tertiary: #1a1e2a;--bg-glass: rgba(18, 21, 28, .92);--border: #252a38;--border-light: #2e3448;--text-primary: #e8eaf0;--text-secondary: #7b8098;--text-muted: #555a6e;--accent: #76b900;--accent-hover: #8ed100;--accent-dim: rgba(118, 185, 0, .12);--danger: #e74c3c;--warning: #f39c12;--radius: 10px;--radius-lg: 16px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--sidebar-width: 320px;--bottom-bar-height: 80px;--transition: .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);overflow:hidden;height:100vh;width:100vw}#app{position:relative;width:100%;height:100%}#app.hidden{display:none}#login-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s ease}#login-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}#login-bg{position:absolute;inset:0;background-image:url(../assets/bg-office.jpg);background-size:cover;background-position:center;filter:blur(12px) brightness(.25) saturate(.5);transform:scale(1.06)}#login-card{position:relative;width:380px;max-width:calc(100vw - 40px);background:#12151ce0;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:40px 36px 32px;box-shadow:0 24px 80px #00000080,0 0 0 1px #ffffff0a inset;animation:loginCardIn .6s cubic-bezier(.34,1.56,.64,1)}@keyframes loginCardIn{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.login-brand{text-align:center;margin-bottom:32px}.login-logo{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;margin-bottom:16px;box-shadow:0 8px 32px #2563eb4d}.login-brand h1{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}.login-subtitle{font-size:13px;color:var(--text-muted);margin-top:4px}#login-form{display:flex;flex-direction:column;gap:18px}.login-field{display:flex;flex-direction:column;gap:6px}.login-field label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}.login-input-wrap{position:relative;display:flex;align-items:center;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);padding:0 14px;transition:border-color .2s,box-shadow .2s}.login-input-wrap:focus-within{border-color:#4f7dff;box-shadow:0 0 0 3px #2563eb26}.login-input-wrap.error{border-color:var(--danger);box-shadow:0 0 0 3px #e74c3c1f}.login-input-wrap svg{flex-shrink:0;color:var(--text-muted)}.login-input-wrap input{flex:1;padding:12px 10px;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:14px;font-family:var(--font)}.login-input-wrap input::placeholder{color:var(--text-muted)}.login-pw-toggle{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;transition:color .2s}.login-pw-toggle:hover{color:var(--text-secondary)}.login-error{font-size:13px;color:var(--danger);min-height:18px;text-align:center;transition:opacity .2s}.login-error:empty{opacity:0}.login-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border:none;border-radius:var(--radius);background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .25s;box-shadow:0 4px 20px #2563eb4d}.login-btn:hover:not(:disabled){background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 6px 28px #2563eb66;transform:translateY(-1px)}.login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.login-spinner.hidden{display:none}.login-footer{text-align:center;font-size:11px;color:var(--text-muted);margin-top:24px;letter-spacing:.02em}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:shake .4s ease}#viewport{position:absolute;inset:0;z-index:0;background:var(--bg-primary);overflow:hidden}#viewport-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(6px) brightness(.45) saturate(.7);transform:scale(1.04);transition:background-image .8s ease,filter .6s ease}#viewport-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%),linear-gradient(to top,rgba(6,8,12,.8) 0%,transparent 30%)}#viewport canvas{position:relative;z-index:2;display:block;width:100%!important;height:100%!important}#loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0c10d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100;transition:opacity var(--transition)}#loading-overlay.hidden{opacity:0;pointer-events:none}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#loading-text{margin-top:14px;font-size:13px;color:var(--text-secondary);letter-spacing:.02em}#top-bar{position:absolute;top:16px;left:16px;right:16px;z-index:20;display:flex;align-items:center;justify-content:space-between;pointer-events:none}#top-bar>*{pointer-events:auto}#health-status{font-size:11px;font-family:var(--font-mono);padding:6px 14px;border-radius:20px;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--accent);border:1px solid var(--border)}#health-status.degraded{color:var(--warning);border-color:#f39c124d}#health-status.error{color:var(--danger);border-color:#e74c3c4d}.icon-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.icon-btn:hover{color:var(--text-primary);border-color:var(--border-light);background:var(--bg-tertiary)}#top-bar-actions{display:flex;align-items:center;gap:8px;position:relative}.user-avatar-btn{width:38px;height:38px;border-radius:50%;border:2px solid rgba(124,58,237,.4);background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;box-shadow:0 2px 12px #7c3aed33}.user-avatar-btn:hover{border-color:#7c3aedb3;box-shadow:0 4px 20px #7c3aed59;transform:scale(1.05)}#user-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:240px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 16px 48px #0006,0 0 0 1px #ffffff08 inset;overflow:hidden;z-index:60;animation:dropdownIn .2s cubic-bezier(.16,1,.3,1)}#user-dropdown.hidden{display:none}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ud-header{display:flex;align-items:center;gap:12px;padding:16px}.ud-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ud-info{display:flex;flex-direction:column;gap:2px;min-width:0}.ud-name{font-size:14px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ud-session{font-size:11px;color:var(--accent);display:flex;align-items:center;gap:5px}.ud-session:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}.ud-divider{height:1px;background:var(--border)}.ud-action{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;background:transparent;border:none;color:var(--text-secondary);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;transition:all .15s}.ud-action:hover{background:var(--bg-tertiary);color:var(--text-primary)}.ud-signout:hover{color:var(--danger);background:#e74c3c14}.ud-signout:hover svg{stroke:var(--danger)}.sidebar-footer{padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0}.sidebar-signout-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;transition:all .2s}.sidebar-signout-btn:hover{color:var(--danger);border-color:#e74c3c4d;background:#e74c3c0f}.sidebar-signout-btn:hover svg{stroke:var(--danger)}#sidebar-backdrop{position:absolute;inset:0;z-index:40;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity var(--transition)}#sidebar-backdrop.hidden{opacity:0;pointer-events:none}#sidebar{position:absolute;top:0;right:0;bottom:0;width:var(--sidebar-width);z-index:50;background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translate(0);transition:transform var(--transition);overflow:hidden}#sidebar.hidden{transform:translate(100%)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.sidebar-header h2{font-size:15px;font-weight:600;letter-spacing:.01em}.sidebar-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}.sidebar-divider{height:1px;background:var(--border);margin:4px 0}.sidebar-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:4px}.control-group{display:flex;flex-direction:column;gap:6px}.control-group label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}select{width:100%;padding:9px 32px 9px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;font-family:var(--font);outline:none;transition:border-color .2s;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%237b8098' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}select:focus{border-color:var(--accent)}select option{background:var(--bg-tertiary)}.control-row{flex-direction:row!important}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--text-primary)}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.checkbox-label span{font-size:13px;font-weight:500}#bottom-bar{position:absolute;bottom:0;left:0;right:0;z-index:20;display:flex;flex-direction:column;align-items:center;padding:0 20px 16px;pointer-events:none}#bottom-bar>*{pointer-events:auto}#bottom-bar-inner{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:520px;width:100%}.bar-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;background:transparent;border:1px solid transparent;border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;font-family:var(--font);transition:all .2s;min-width:68px}.bar-option:hover{background:var(--bg-tertiary);border-color:var(--border);color:var(--text-primary)}.bar-option.disabled{opacity:.4;pointer-events:none}.bar-option svg{flex-shrink:0}.bar-option span{font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px}.bar-option-select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;font-size:14px}#normal-center{flex:1;display:flex;justify-content:center}.chat-start-btn{display:flex;align-items:center;gap:8px;padding:12px 28px;border:none;border-radius:30px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .25s;white-space:nowrap;box-shadow:0 4px 20px #2563eb4d}.chat-start-btn:hover{background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 6px 28px #2563eb66;transform:translateY(-1px)}#chat-center{flex:1;display:flex;align-items:center;justify-content:center;gap:12px}.sidebar-upload-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--radius);background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;transition:all .2s}.sidebar-upload-btn:hover{color:var(--text-primary);border-color:var(--border-light)}#audio-filename{font-size:11px;font-family:var(--font-mono);color:var(--accent);padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;border:none;border-radius:var(--radius);background:var(--accent);color:#000;font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .2s}.sidebar-action-btn:hover:not(:disabled){background:var(--accent-hover)}.sidebar-action-btn:disabled{opacity:.35;cursor:not-allowed}.sidebar-playback-row{display:flex;gap:6px;margin-bottom:8px}.action-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-tertiary);color:var(--text-primary);font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .2s;white-space:nowrap}.action-btn:hover:not(:disabled){border-color:var(--border-light);background:var(--border)}.action-btn:disabled{opacity:.35;cursor:not-allowed}#playback-controls{display:flex;flex-direction:column;gap:4px}#timeline-container{display:flex;flex-direction:column;gap:2px}.timeline-info{display:flex;justify-content:space-between;font-size:10px;font-family:var(--font-mono);color:var(--text-muted);padding:0 2px}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--bg-primary);outline:none;border:none;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-secondary)}#status-msg{font-size:11px;padding:6px 16px;color:var(--text-muted);text-align:center;pointer-events:none}#status-msg.error{color:var(--danger)}#status-msg.success{color:var(--accent)}#debug-panel{position:absolute;bottom:var(--bottom-bar-height);left:0;right:0;z-index:15;background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:12px 20px;max-height:160px;overflow-y:auto;display:flex;gap:24px;transition:opacity var(--transition),transform var(--transition)}#debug-panel.hidden{opacity:0;transform:translateY(20px);pointer-events:none}.debug-section{flex:1;min-width:0}.debug-section h3{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px}#blendshape-bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:3px}#emotion-bars{display:grid;grid-template-columns:1fr;gap:3px}.bs-row{display:grid;grid-template-columns:140px 1fr 44px;align-items:center;gap:8px;font-size:11px;font-family:var(--font-mono)}.bs-name{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-bar-bg{height:4px;background:var(--bg-primary);border-radius:2px;overflow:hidden}.bs-bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .05s linear}.bs-value{text-align:right;color:var(--text-primary);font-size:10px}.emo-row{display:grid;grid-template-columns:90px 1fr 40px;align-items:center;gap:8px;font-size:11px;font-family:var(--font-mono)}.emo-name{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.emo-bar-bg{height:6px;background:var(--bg-primary);border-radius:3px;overflow:hidden}.emo-bar-fill{height:100%;border-radius:3px;transition:width .05s linear}.emo-value{text-align:right;color:var(--text-primary);font-size:10px}.emo-amazement .emo-bar-fill{background:gold}.emo-anger .emo-bar-fill{background:#e74c3c}.emo-cheekiness .emo-bar-fill{background:#e67e22}.emo-disgust .emo-bar-fill{background:#27ae60}.emo-fear .emo-bar-fill{background:#8e44ad}.emo-grief .emo-bar-fill{background:#2c3e50}.emo-joy .emo-bar-fill{background:#f1c40f}.emo-outofbreath .emo-bar-fill{background:#1abc9c}.emo-pain .emo-bar-fill{background:#c0392b}.emo-sadness .emo-bar-fill{background:#3498db}.action-chat{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;border-color:#4f46e5!important}.action-chat:hover:not(:disabled){background:linear-gradient(135deg,#3b82f6,#8b5cf6)!important}#chat-overlay{position:absolute;bottom:100px;left:50%;transform:translate(-50%);width:460px;max-width:calc(100vw - 40px);max-height:45vh;z-index:18;display:flex;flex-direction:column;pointer-events:none;transition:opacity .3s ease}#chat-overlay.hidden{opacity:0;pointer-events:none}#chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px 8px;pointer-events:auto;mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 100%);scrollbar-width:none}#chat-messages::-webkit-scrollbar{display:none}.chat-bubble{display:flex;align-items:flex-end;gap:8px;max-width:85%;animation:bubbleIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes bubbleIn{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-bubble.user{align-self:flex-end;flex-direction:row-reverse}.chat-bubble.assistant{align-self:flex-start}.bubble-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:700}.chat-bubble.assistant .bubble-avatar{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}.chat-bubble.user .bubble-avatar{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff}.bubble-content{padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.5;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.chat-bubble.assistant .bubble-content{background:#1e2230e0;border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:4px;color:var(--text-primary)}.chat-bubble.user .bubble-content{background:#2563eb40;border:1px solid rgba(59,130,246,.2);border-bottom-right-radius:4px;color:#d0ddff}#chat-scroll-btn{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:32px;height:32px;border-radius:50%;background:#1e2230e6;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:all .2s;z-index:2}#chat-scroll-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}#chat-scroll-btn.hidden{opacity:0;pointer-events:none}#chat-mic-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;padding:4px 0}#chat-mic-btn{width:52px;height:52px;border-radius:50%;border:2px solid rgba(118,185,0,.4);background:#76b9001f;color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:default;position:relative;z-index:2;transition:all .3s}#chat-mic-btn.listening{border-color:var(--accent);background:#76b9002e;box-shadow:0 0 20px #76b90033}#chat-mic-btn.processing{border-color:var(--warning);background:#f39c121f;color:var(--warning)}#chat-mic-btn.speaking{border-color:#7c3aed;background:#7c3aed1f;color:#a78bfa}#mic-pulse-ring{position:absolute;top:50%;left:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,calc(-50% - 10px));border:2px solid var(--accent);opacity:0;pointer-events:none;z-index:1}#mic-pulse-ring.active{animation:micRing 2s ease-out infinite}@keyframes micRing{0%{width:52px;height:52px;opacity:.5}to{width:90px;height:90px;opacity:0}}#chat-state-label{font-size:10px;font-weight:500;color:var(--text-muted);text-align:center;letter-spacing:.02em}.chat-bar-end{width:38px;height:38px;border-radius:50%;border:1px solid rgba(231,76,60,.3);background:#e74c3c1a;color:var(--danger);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.chat-bar-end:hover{background:#e74c3c40;border-color:var(--danger)}#normal-center.hidden,#chat-center.hidden,#playback-controls.hidden,#audio-filename.hidden{display:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}