:root{color-scheme:dark;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;--glass:rgba(8,28,58,.76);--line:rgba(109,207,255,.32);--cyan:#64d7ff;--amber:#ffb51b;--violet:#d87cff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#041129}
button{font:inherit;color:inherit}
.stage{position:relative;width:100%;height:100%;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 30%,#174b81 0,#071a36 52%,#030916 100%)}
.background,.shade,#avatar{position:absolute;inset:0;width:100%;height:100%}
.background{object-fit:cover;opacity:.76}.shade{background:linear-gradient(180deg,rgba(0,7,22,.18),transparent 42%,rgba(0,7,22,.7));pointer-events:none}
#avatar{z-index:2}#sourceVideo{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}
.topbar{position:absolute;z-index:5;top:max(16px,env(safe-area-inset-top));left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand,.status,.pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(18px);box-shadow:0 12px 36px rgba(0,0,0,.22)}
.brand{padding:11px 15px;border-radius:18px;font-size:13px;font-weight:700;letter-spacing:.04em}.brand-mark{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--cyan),#6f72ff);box-shadow:0 0 16px var(--cyan)}
.status{padding:12px 16px;border-radius:999px;font-weight:750;font-size:14px}.status-dot,.pulse{width:9px;height:9px;border-radius:50%;background:#9aa8b7}.status-dot.active{background:#42e6a4;box-shadow:0 0 14px #42e6a4}.status-dot.listen{background:var(--amber);box-shadow:0 0 14px var(--amber)}.status-dot.speak{background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.conversation{position:absolute;z-index:6;top:86px;left:18px;right:18px;display:grid;gap:10px;pointer-events:none}.bubble{max-width:min(82vw,560px);padding:12px 15px;border-radius:16px;background:rgba(3,15,34,.77);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);font-size:15px;line-height:1.55;box-shadow:0 12px 28px rgba(0,0,0,.2)}.bubble.user{justify-self:end;border-bottom-right-radius:5px}.bubble.assistant{justify-self:start;border-bottom-left-radius:5px;color:#eafaff}
.controls{position:absolute;z-index:7;left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:12px}.settings{display:flex;gap:8px;max-width:100%;overflow:auto;padding:2px}.pill{border-radius:999px;padding:11px 15px;border-color:rgba(255,255,255,.15);font-size:14px;font-weight:760;white-space:nowrap;cursor:pointer}.pulse.violet{background:var(--violet);box-shadow:0 0 12px var(--violet)}.pulse.amber{background:var(--amber);box-shadow:0 0 12px var(--amber)}
.talk{min-width:min(84vw,380px);border:1px solid rgba(107,217,255,.6);border-radius:999px;padding:16px 24px;background:linear-gradient(135deg,rgba(22,141,221,.94),rgba(57,76,205,.94));font-weight:850;font-size:17px;box-shadow:0 15px 38px rgba(0,89,190,.38),inset 0 1px rgba(255,255,255,.25);cursor:pointer}.talk.recording{background:linear-gradient(135deg,#ff8c2a,#e23d68);animation:breathe 1.2s infinite}.talk:disabled{opacity:.55;cursor:not-allowed}.mic{display:inline-block;margin-right:8px;color:white}
.hint{margin:0;color:rgba(225,244,255,.72);font-size:12px;text-shadow:0 2px 8px #000}.toast{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86vw,480px);padding:16px 18px;border-radius:15px;background:rgba(20,16,31,.94);border:1px solid rgba(255,125,144,.45);text-align:center;line-height:1.5}
@keyframes breathe{50%{transform:scale(1.025);box-shadow:0 16px 46px rgba(255,74,104,.55)}}
@media(min-width:800px){.topbar{left:28px;right:28px;top:24px}.conversation{top:92px;left:28px;right:28px}.controls{bottom:28px}.bubble{font-size:17px}.brand{font-size:15px}}