.magic-mirror-container{width:100vw;height:100vh;background:linear-gradient(135deg,#0a0a2a,#1a1a3a);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.mirror-frame{width:100%;height:100%;position:relative;z-index:10}.particle-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;pointer-events:none;background:transparent}.debug-panel{position:absolute;bottom:60px;left:50%;transform:translate(-50%);display:flex;gap:15px;z-index:1000}.debug-panel button{background:#000;border:1px solid #7ae7ff;color:#7ae7ff;padding:8px 16px;cursor:pointer;border-radius:4px}.debug-panel button:hover{background:#134}.progress-indicator{position:absolute;top:20px;left:50%;color:#fff;background:#00000080;padding:5px 10px;border-radius:4px}.smoke-video,.face-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease}.smoke-video{z-index:2;opacity:1}.face-video{z-index:1;opacity:0}.smoke-video.hidden{opacity:0}.face-video.visible{z-index:3;opacity:1}.debug-info-panel{position:fixed;top:20px;right:20px;width:280px;background:#000000c7;border:1px solid rgba(100,200,255,.25);border-radius:8px;padding:12px 14px;z-index:10001;font-family:ui-monospace,Cascadia Code,monospace;font-size:12px;color:#bbb;display:flex;flex-direction:column;gap:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-height:calc(100vh - 40px);overflow-y:auto}.debug-section{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}.debug-section:last-child{border-bottom:none;padding-bottom:0}.debug-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#64c8ff99;min-width:72px}.debug-value{color:#ddd;flex:1;word-break:break-word;line-height:1.5}.debug-live{color:#7ae7ff;font-style:italic}.debug-error{color:#ff6b6b}.debug-dim{color:#555;font-size:10px}.debug-ref-image{display:block;width:80px;height:60px;object-fit:cover;border-radius:4px;margin-top:4px;border:1px solid #333}.debug-status{font-weight:700;font-size:11px;padding:2px 9px;border-radius:4px}.status-idle{background:#111428;color:#7ae7ff}.status-wakeup{background:#2d1b00;color:#fc4}.status-listening{background:#0d2b1a;color:#4f9}.status-thinking{background:#1a0d2b;color:#c8f}.status-speaking{background:#2b0d0d;color:#f84}.debug-badge{font-size:10px;font-weight:600;padding:1px 7px;border-radius:3px}.badge-green{background:#0d2b1a;color:#4f8}.badge-red{background:#2b0d0d;color:#f66}.badge-gray{background:#1e1e1e;color:#666}.debug-flags{display:flex;gap:4px;flex-wrap:wrap}.debug-flag{font-size:10px;padding:1px 6px;border-radius:3px}.flag-on{background:#0d2b1a;color:#4f8}.flag-off{background:#1e1e1e;color:#555}.agent-image-overlay{position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:#0000008c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}@keyframes agentImageReveal{0%{transform:scale(.05);filter:blur(32px) brightness(2);opacity:0}60%{filter:blur(4px) brightness(1.2);opacity:1}to{transform:scale(1);filter:blur(0px) brightness(1);opacity:1}}.agent-image{max-width:80%;max-height:80%;border-radius:16px;box-shadow:0 0 40px #64b4ff80,0 0 80px #64b4ff33,0 8px 32px #0009;border:1px solid rgba(150,210,255,.25);position:relative;z-index:2;animation:agentImageReveal 1.1s cubic-bezier(.22,1,.36,1) forwards}.agent-qr-code{position:fixed;bottom:24px;right:24px;width:140px;height:140px;border-radius:12px;border:2px solid rgba(150,210,255,.4);box-shadow:0 0 20px #64b4ff59,0 4px 16px #00000080;background:#fff;z-index:600;animation:agentImageReveal 1.1s cubic-bezier(.22,1,.36,1) forwards}.image-particle-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.agent-img-enter-active{transition:opacity .4s ease}.agent-img-leave-active{transition:opacity .35s ease}.agent-img-enter-from,.agent-img-leave-to{opacity:0}.debug-captured-img{width:100%;max-width:160px;border-radius:4px;margin-top:4px;border:1px solid #333}.debug-log-section{flex-direction:column;align-items:stretch}.debug-log-list{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto;margin-top:4px}.debug-log-entry{display:flex;gap:6px;font-size:11px;line-height:1.4}.debug-log-time{color:#444;flex-shrink:0}.debug-log-msg{word-break:break-word}.log-info .debug-log-msg{color:#aaa}.log-warn .debug-log-msg{color:#fc4}.log-error .debug-log-msg{color:#ff6b6b}html,body,#app{height:100%;margin:0;background:#000}*{-webkit-user-select:none;user-select:none}