:root{--bg: #0b0d12;--panel: #141823;--panel-2: #1b2030;--text: #e7eaf0;--dim: #8b93a7;--accent: #6c8cff;--accent-hover: #5a7aef;--user: #2d3a5c;--assistant: #1e2433;--border: rgba(255, 255, 255, .1);--border-strong: #2a3146;--radius: 14px;--radius-sm: 10px;--radius-pill: 999px;--glass-bg: rgba(12, 14, 22, .55);--glass-border: rgba(255, 255, 255, .14);--transcript-bg: rgba(14, 17, 26, .82);--blur: blur(10px) saturate(180%);--chat-max: 25vh;--chat-clear: calc(var(--chat-max) + 22px + env(safe-area-inset-bottom, 0px))}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Fira Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:720px;margin:0 auto}.app.embed{max-width:none;height:100vh;height:100dvh}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-strong);background:#0b0d12eb;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);z-index:4;flex-shrink:0}.brand{font-weight:600;letter-spacing:.3px;font-size:15px}.brand-dim{color:var(--dim);font-weight:400}.status{font-size:12px;color:var(--dim);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-right{display:flex;align-items:center;gap:10px}.char-select{background:var(--panel-2);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;outline:none;cursor:pointer;transition:border-color .15s ease}.char-select:focus-visible{border-color:var(--accent);outline:2px solid rgba(108,140,255,.35);outline-offset:1px}.close-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--border-strong);color:var(--dim);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.close-btn:hover{color:var(--text);border-color:var(--accent)}.close-btn:focus-visible{outline:2px solid rgba(108,140,255,.35);outline-offset:1px}.validation{position:absolute;top:14px;right:14px;background:var(--glass-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-border);border-radius:var(--radius);font-size:13px;max-width:320px;overflow:hidden;z-index:3}.validation.warn{border-color:#5a3a1d}.validation-head{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:none;color:var(--text);padding:9px 12px;font-size:13px;cursor:pointer}.validation-head .chev{margin-left:auto;color:var(--dim)}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.ok{background:#4caf7d}.dot.bad{background:#e0a23c}.validation-body{padding:0 12px 12px}.pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.pill{padding:3px 8px;border-radius:var(--radius-pill);font-size:12px;border:1px solid transparent}.pill.ok{background:#4caf7d26;color:#8fe0b4;border-color:#4caf7d4d}.pill.bad{background:#e0a23c26;color:#f0c486;border-color:#e0a23c4d}.validation-note{font-size:12px;line-height:1.45;color:#f0c486}.validation-note.muted{color:var(--dim)}.stage-wrap{position:relative;flex:1 1 auto;min-height:0;background:radial-gradient(120% 80% at 50% 0%,#1a2030,#0b0d12 70%)}.avatar-stage,.avatar-canvas{width:100%;height:100%}.avatar-stage{position:relative}.avatar-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0b0d12b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2;pointer-events:none}.avatar-loading-spinner{width:36px;height:36px;border:3px solid rgba(108,140,255,.2);border-top-color:var(--accent);border-radius:50%;animation:avatar-spin .75s linear infinite}.avatar-loading-label{font-size:13px;color:var(--dim);letter-spacing:.02em}@keyframes avatar-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.avatar-loading-spinner{animation:none;border-top-color:#6c8cff80}.send-spinner{animation:none;border-top-color:#fff}}.avatar-canvas canvas{display:block}.avatar-error{position:absolute;inset:auto 16px var(--chat-clear) 16px;background:#3a1d22;color:#ffb4b4;padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;z-index:2}.camera-btn{position:absolute;left:16px;top:16px;z-index:3;display:flex;align-items:center;gap:7px;background:var(--glass-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--text);border:1px solid var(--glass-border);padding:7px 12px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:background .15s ease,border-color .15s ease}.camera-btn:hover{background:#0c0e16b8;border-color:#6c8cff73}.camera-btn:focus-visible{outline:2px solid rgba(108,140,255,.45);outline-offset:2px}.camera-btn svg{color:var(--accent)}.chat{position:absolute;left:0;right:0;bottom:0;padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));z-index:3;pointer-events:none}.chat-panel{pointer-events:auto;display:flex;flex-direction:column;max-height:var(--chat-max);overflow:hidden;background:var(--transcript-bg);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 10px 30px #00000059}.transcript{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(139,147,167,.35) transparent;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14px,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 14px,#000 100%)}.transcript::-webkit-scrollbar{width:5px}.transcript::-webkit-scrollbar-thumb{background:#8b93a759;border-radius:var(--radius-pill)}.hint{color:var(--dim);font-size:13px;text-align:center;padding:4px 8px;line-height:1.45}.bubble{max-width:85%;padding:9px 13px;border-radius:var(--radius);font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;border:1px solid transparent}.bubble.user{align-self:flex-end;background:var(--user);border-color:#6c8cff2e;border-bottom-right-radius:4px}.bubble.assistant{align-self:flex-start;background:var(--assistant);border-color:var(--border);border-bottom-left-radius:4px}.jump-latest{pointer-events:auto;align-self:center;margin:0 auto 6px;background:var(--glass-bg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--text);border:1px solid var(--glass-border);padding:5px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease}.jump-latest:hover{background:#0c0e16b8;border-color:#6c8cff73}.jump-latest:focus-visible{outline:2px solid rgba(108,140,255,.45);outline-offset:2px}.composer{flex-shrink:0;display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:#ffffff05}.composer input{flex:1;min-width:0;background:#1b2030a6;border:1px solid var(--border-strong);color:var(--text);padding:10px 14px;border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border-color .15s ease}.composer input::placeholder{color:var(--dim)}.composer input:focus-visible{border-color:var(--accent);outline:2px solid rgba(108,140,255,.25);outline-offset:0}.composer button,.composer-send{background:var(--accent);color:#fff;border:none;min-width:72px;min-height:40px;padding:0 18px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease,opacity .15s ease;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.send-spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:avatar-spin .7s linear infinite;flex-shrink:0}.composer button:hover:not(:disabled),.composer-send:hover:not(:disabled){background:var(--accent-hover)}.composer button:focus-visible,.composer-send:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.composer button:disabled,.composer-send:disabled{opacity:.45;cursor:default}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.topbar,.validation,.camera-btn,.jump-latest{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}}@media (prefers-reduced-transparency: reduce){.topbar,.validation,.camera-btn,.jump-latest,.chat-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}}
