:root{color-scheme:dark;font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#86c6eb}
*{box-sizing:border-box}
html,body,main{margin:0;width:100%;height:100%;overflow:hidden}
main{position:relative;background:radial-gradient(ellipse 58% 42% at 50% 68%,#dff5ff 0%,#aedcf2 43%,transparent 72%),radial-gradient(circle at 48% 15%,#eaf9ff 0%,#b8e3f7 30%,transparent 58%),linear-gradient(180deg,#8bc9e9 0%,#adddf2 58%,#75b7da 100%)}
#stage{isolation:isolate;height:100dvh}
#avatar{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:none}
body:not([data-enabled="true"]) #avatar{pointer-events:none}
#avatar.dragging{cursor:grabbing}
#wake-hint{position:absolute;left:50%;top:68%;z-index:5;transform:translate(-50%,-50%);display:grid;grid-template-columns:auto 1px auto;align-items:center;gap:13px;padding:12px 20px;border:1px solid #ffffff30;border-radius:18px;background:#0d395d3d;box-shadow:0 8px 28px #17557c20;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;text-align:center;pointer-events:none;text-shadow:0 1px 6px #123;transition:opacity .25s,visibility .25s}
#wake-hint span{font-size:18px;font-weight:600;white-space:nowrap}#wake-hint i{width:1px;height:20px;background:#ffffff70}#wake-hint small{grid-column:1/4;font-size:10px;font-weight:400;letter-spacing:.04em;color:#ffffffd9}
body[data-state="listening"] #wake-hint,body[data-state="thinking"] #wake-hint,body[data-state="speaking"] #wake-hint{opacity:0;visibility:hidden}
#back-view{position:absolute;left:22px;bottom:20px;width:min(250px,22vw);height:min(340px,42vh);z-index:4;pointer-events:none}
#back-view[hidden]{display:none}#avatar-back{display:block;width:100%;height:100%;background:transparent}#back-view span{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);padding:3px 9px;border-radius:10px;background:#16466570;color:#fff;font-size:10px;text-shadow:0 1px 4px #000;white-space:nowrap}
#ambient-info{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));z-index:1;width:min(520px,calc(100vw - 40px));color:#fff;pointer-events:none;text-shadow:0 2px 10px #000}
#environment{display:flex;align-items:baseline;gap:10px;letter-spacing:.03em}
#weather{font-size:14px;font-weight:600}
#calendar{font-size:11px;color:#ffffffe0}
#clock{font-size:18px;font-weight:300;letter-spacing:.06em}
#voice-guide{margin:10px 0 0;padding:8px 12px 8px 31px;width:max-content;max-width:100%;border-radius:9px;background:#05070670;border:1px solid #ffffff0d;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:11px;font-weight:500;line-height:1.65;color:#fff}
/* 状态提示只在左下角贴着安全区出现一行，绝不压在角色身上（原来居中 3vh 正好是腰）。 */
#notice{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));transform:none;max-width:min(300px,52vw);width:max-content;color:#fff;font-size:11px;line-height:1.5;font-weight:400;letter-spacing:.04em;text-align:left;opacity:0;transition:opacity .6s;pointer-events:none;text-shadow:0 1px 6px #000;margin:0;z-index:7}
#notice.visible{opacity:.9}
/* 对话气泡：右下角一小块、半透明，只留最近几条 */
#dialogue{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:min(280px,42vw);height:min(180px,22vh);z-index:2;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(6px);/* 收起比语音慢半拍：最后一句话说完，字再停一秒，跟 UE 版字幕一致。 */transition:opacity .28s .9s,transform .28s .9s,visibility 0s linear 1.18s}
body[data-state="listening"] #dialogue,body[data-state="thinking"] #dialogue,body[data-state="speaking"] #dialogue{opacity:.8;visibility:visible;transform:none;transition-delay:0s}
/* 动作评分卡也占右下角，出现时把气泡抬上去，别互相盖住 */
#stage:has(#final-score:not([hidden])) #dialogue{bottom:min(150px,26vh)}
#messages{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:6px 2px 2px;overflow:auto;scrollbar-width:none;mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 100%)}
#messages::-webkit-scrollbar{display:none}
#messages .message:nth-last-child(n+7){display:none}
.message{display:flex;flex-direction:column;margin:0 0 7px;filter:drop-shadow(0 3px 9px #0005)}
.message.user{align-items:flex-end}.message.assistant{align-items:flex-start}
.message small{font-size:9px;font-weight:500;color:#ffffffc4;margin:0 6px 2px;text-shadow:0 1px 5px #000}
.bubble{max-width:92%;padding:6px 9px;border:1px solid #ffffff1f;border-radius:11px;font-size:11.5px;font-weight:400;line-height:1.5;color:#fff;background:#121a1759;overflow-wrap:anywhere;text-shadow:0 1px 3px #000}
.user .bubble{color:#fff;background:#416c5259;border-bottom-right-radius:3px}
.assistant .bubble{background:#10181559;border-bottom-left-radius:3px}
.empty-chat{display:none}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#character-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;pointer-events:none}
#pose-panel{position:absolute;right:24px;top:24px;width:min(390px,32vw);aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid #ffffff22;background:#0c1211;box-shadow:0 18px 65px #0007;z-index:8}
#pose-panel[hidden]{display:none}
#camera,#pose-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;transform:scaleX(-1);transform-origin:50% 50%}
#pose-overlay{pointer-events:none}
#camera{opacity:0;pointer-events:none}
/* Camera pixels and landmarks are composited from the same frame, mirrored once. */
#pose-score{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:#0d1513bd;backdrop-filter:blur(8px)}
#pose-score strong{font-size:24px;color:#fff;font-weight:600;white-space:nowrap}
#pose-score span{font-size:9px;line-height:1.5;text-align:right;color:#ffffffe0;max-width:180px}
#pose-angles{position:absolute;bottom:0;left:0;right:0;padding:9px 12px;background:#0d1513dc;color:#fff;font-size:11px;line-height:1.8;pointer-events:none}
#final-score{position:absolute;right:24px;bottom:24px;z-index:9;min-width:180px;padding:14px 18px;border-radius:16px;background:#123d58d9;border:1px solid #ffffff45;box-shadow:0 12px 36px #174d7050;color:#fff;backdrop-filter:blur(10px);display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center}
#final-score[hidden]{display:none}#final-score small{grid-column:1/3;font-size:11px;color:#ffffffc8}#final-score strong{font-size:38px;line-height:1;font-weight:700}#final-score strong::after{content:"分";font-size:12px;margin-left:3px}#final-score span{font-size:11px;line-height:1.5;max-width:155px}
@media(max-width:760px){
  #wake-hint{top:70%;gap:8px;padding:9px 13px;border-radius:14px}#wake-hint span{font-size:13px}#wake-hint small{font-size:8px}
  #ambient-info{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:calc(100vw - 20px)}
  #environment{gap:6px;flex-wrap:wrap}#weather{font-size:11px}#calendar{font-size:9px}#clock{font-size:14px}
  #voice-guide{margin-top:6px;padding:6px 8px 6px 25px;font-size:9px;line-height:1.45;border-radius:7px}
  #dialogue{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:min(180px,42vw);height:min(144px,20vh)}
  #stage:has(#final-score:not([hidden])) #dialogue{bottom:min(124px,22vh)}
  .message{margin-bottom:5px}.message small{font-size:8px}
  .bubble{font-size:10.5px;padding:5px 8px;border-radius:10px}
  #final-score{right:10px;bottom:10px;min-width:145px;padding:10px 12px}#final-score strong{font-size:28px}
  #notice{bottom:max(8px,env(safe-area-inset-bottom));font-size:10px;max-width:56vw}
}
@media(max-height:600px) and (orientation:landscape){#voice-guide{font-size:9px;line-height:1.4;margin-top:5px;padding-top:5px;padding-bottom:5px}#environment{gap:6px}#weather{font-size:11px}#clock{font-size:14px}}
@media(prefers-reduced-motion:reduce){#notice{transition:none}}
/* Native-aligned browser edition: no plugin/stream/native window required. */
main{background:linear-gradient(180deg,#92abb0 0%,#57728e 27%,#3c5879 54%,#3c5879 100%)}
[hidden]{display:none!important}
#wake-hint{top:85%;max-width:94vw}#wake-hint span{font-weight:400}
#stage:has(#final-score:not([hidden])) #dialogue{bottom:max(16px,env(safe-area-inset-bottom))}
#pose-panel{top:90px;width:min(520px,43vw)}
#final-score{top:96px;bottom:auto;right:30px;min-width:130px;padding:6px 9px;background:#123d5899}#final-score strong{font-size:26px}
#back-view{width:min(360px,28vw);height:min(430px,42vh)}
#gesture-hint{position:absolute;top:7%;left:50%;transform:translateX(-50%);margin:0;padding:9px 20px;background:#29997fdd;border:1px solid #9bdbcf;border-radius:16px;color:white;font-size:16px;z-index:9;pointer-events:none;white-space:nowrap}
#framing-advice{position:absolute;left:22px;top:176px;color:#fff;font-size:12px;pointer-events:none;z-index:5}
@media(orientation:portrait) and (min-width:761px){#pose-panel{top:190px;width:min(390px,58vw)}#final-score{top:196px}}
@media(orientation:portrait){#ambient-info{max-width:calc(100vw - 30px)}#gesture-hint{top:21%;font-size:12px}#framing-advice{top:170px;font-size:10px}#back-view{height:34vh;width:34vw}#voice-guide{font-size:clamp(9px,1.5vw,12px)}}
/* A single onboarding overlay replaces the permanent toolbar. HUD and chat
   are below the transparent character canvas; they cannot paint over its face. */
#permission-gate{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left));background:#152536b3;overflow:auto;overscroll-behavior:contain;color:#fff}
.permission-card{width:min(420px,100%);max-height:100%;overflow:auto;padding:24px;border:1px solid #ffffff32;border-radius:20px;background:#223f55f5;box-shadow:0 16px 60px #0004;font-size:14px;line-height:1.65}
.permission-card h1{font-size:23px;font-weight:500;margin:0 0 8px}
.permission-card p{margin:8px 0;color:#e1ebf3}
.permission-card ul{padding:0;margin:18px 0;list-style:none}
.permission-card li{margin:10px 0}
.vision-option{display:flex;align-items:center;gap:8px;font-size:13px}
.vision-option input{width:18px;height:18px;margin:0;accent-color:#76d2c0}
.permission-card .permission-detail{font-size:11px;color:#bfcfdd}
#permission-status{font-size:12px;min-height:40px;padding-top:10px}
#grant-permissions{width:100%;min-height:44px;padding:10px 14px;margin-top:8px;border:1px solid #b5e5e3;border-radius:12px;background:#397d84;color:white;font:inherit;cursor:pointer}
#grant-permissions:disabled{opacity:.65;cursor:wait}
#grant-permissions:focus-visible{outline:2px solid white;outline-offset:3px}
@media(max-height:540px){#permission-gate{padding:12px}.permission-card{padding:16px;font-size:12px}.permission-card li{margin:4px 0}.permission-card h1{font-size:19px}.permission-card ul{margin:10px 0}}

/* 移动端：不显示数字人背面视角；摄像头小窗移到右上角、铺满无黑边、压在数字人下一层。
   这一块必须放在文件最后 —— 前面有一批不带媒体查询的全局规则会覆盖同特异性声明。 */
@media(max-width:760px){
  #stage #back-view{display:none}
  #stage #pose-panel{top:max(10px,env(safe-area-inset-top));right:8px;width:min(124px,34vw);aspect-ratio:3/4;border-radius:12px;z-index:2;box-shadow:0 10px 26px #0007}
  #stage #pose-panel #camera,#stage #pose-panel #pose-overlay{object-fit:cover}
  /* 摄像头小窗只留画面：顶部提示与底部关节读数全部不显示，避免文字压住人脸。
     实时分数由右下角 #final-score 卡片承担，信息不丢。 */
  #stage #pose-panel #pose-score,
  #stage #pose-panel #pose-angles{display:none}
  /* 手机竖屏空间太窄，这六条指令清单会整块盖住头肩 —— 直接不显示，
     桌面宽屏才留。要加回就把 display:none 去掉。 */
  #stage #ambient-info #voice-guide{display:none}
  #stage #final-score{top:auto;bottom:max(10px,env(safe-area-inset-bottom));right:8px;min-width:120px}
  #stage:has(#final-score:not([hidden])) #dialogue{bottom:min(124px,22vh)}
}