/* AI 生成数字人 · 官方 demo 同款版式：全屏画面 + 底部一排圆钮 */
:root{
  --ink:#fff; --brand:#2f6bd8; --danger:#e5484d;
  --glass:rgba(255,255,255,.18); --glass-hi:rgba(255,255,255,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#0a0a0b; color:var(--ink); overflow:hidden;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex; align-items:center; justify-content:center;
}

/* ── 舞台 ── */
.stage{position:relative; height:100vh; display:flex; align-items:center; justify-content:center}
.frame{
  position:relative; height:calc(100vh - 32px); aspect-ratio:9/16;
  max-width:calc(100vw - 32px);
  background:#111; border-radius:22px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.frame > video{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; background:#111}
/* 照片盖在视频上面（占位层）。收到真画面后再加 .gone 淡出，避免中间出现黑屏。 */
.frame > img.standin{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .5s ease;
}
.frame > img.standin.gone{opacity:0}
/* ⚠️ 必须有这条：上面的 display:block 会盖掉 hidden 属性默认的 display:none。 */
.frame [hidden]{display:none !important}

/* ── 进入场景（进来先看这一屏，只有一个开始按钮） ── */
.lobby{
  position:absolute; inset:0; z-index:8;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#0f0f11; padding:0 30px; text-align:center;
}
.lobby-avatar{
  width:152px; height:152px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 48px rgba(0,0,0,.55);
  margin-bottom:26px;
}
.lobby-name{margin:0 0 10px; font-size:21px; font-weight:600; color:#fff; letter-spacing:.4px}
.lobby-desc{margin:0; max-width:330px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.55)}
.lobby-start{
  margin-top:34px; min-width:170px; padding:14px 30px; border:0; border-radius:999px; cursor:pointer;
  font-size:16px; font-weight:600; color:#fff; background:var(--brand);
  box-shadow:0 8px 24px rgba(47,107,216,.4); transition:transform .15s, background .15s;
}
.lobby-start:hover{transform:scale(1.04)}
.lobby-start:active{transform:scale(.97)}
.lobby-start:disabled{background:#3a3a3e; box-shadow:none; cursor:default; transform:none}
/* 进入场景 / 准备中：都不显示底部那排按钮、计时和文字面板 */
.frame[data-view="lobby"] .overlay,
.frame[data-view="connecting"] .overlay{display:none}
.frame:not([data-view="lobby"]) .lobby{display:none}

/* ── 画面内浮层 ──
   ⚠️ 图层顺序必须写全：视频 1 / 照片 2 / 摄像头小窗 3 / 浮层 4 / 准备遮罩 6 / 角标·提示 7 / 调试 9。
   只给视频加 z-index 而浮层留 auto，视频会盖住底部按钮（踩过一次）。 */
.overlay{
  position:absolute; inset:auto 0 0 0; padding:0 0 16px; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 42%, transparent 100%);
  pointer-events:none;
}
.overlay .dock, .overlay .timer, .overlay .ask{pointer-events:auto}
.timer{
  font-variant-numeric:tabular-nums; font-size:14px; font-weight:500; letter-spacing:.6px;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55);
}

/* ── 文字对话面板（点按钮开关） ── */
.ask{
  width:min(88%, 460px);
  background:rgba(20,22,26,.72); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:10px; backdrop-filter:blur(14px);
  display:flex; flex-direction:column; gap:8px;
}
.reply{
  max-height:34vh; overflow-y:auto; padding:8px 10px; font-size:13.5px; line-height:1.6;
  color:#fff; background:rgba(255,255,255,.1); border-radius:10px; white-space:pre-wrap;
}
.ask-form{display:flex; gap:8px}
.ask-form input{
  flex:1 1 auto; min-width:0; padding:9px 12px; font-size:14px;
  color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); border-radius:10px; outline:none;
}
.ask-form input::placeholder{color:rgba(255,255,255,.45)}
.ask-form input:focus{border-color:rgba(255,255,255,.5)}
.ask-send{
  flex:0 0 auto; padding:9px 16px; font-size:14px; cursor:pointer;
  color:#fff; background:var(--brand); border:0; border-radius:10px;
}
.ask-send:disabled{background:#3a3a3e; cursor:default}

/* ── 自己的摄像头：画面内右上角小窗 ── */
.pip{
  position:absolute; right:14px; top:14px; width:36%; aspect-ratio:16/9;
  border-radius:12px; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.28); box-shadow:0 8px 24px rgba(0,0,0,.5);
  z-index:3;
}
.pip video{width:100%; height:100%; object-fit:cover; display:block}

/* ── 底部一排按钮 ── */
.dock{display:flex; align-items:center; gap:16px}
.icon-btn{
  width:62px; height:62px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:var(--glass); backdrop-filter:blur(10px);
  transition:background .15s, color .15s, transform .15s;
}
.icon-btn:hover{background:var(--glass-hi)}
.icon-btn:active{transform:scale(.95)}
.icon-btn.on{background:#fff; color:#14161a}
.icon-btn:disabled{opacity:.35; cursor:default; transform:none}
.icon-btn .ico{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
/* 开/关两套图标，按状态切 */
.icon-btn .ico-mic-off, .icon-btn .ico-cam-off{display:none}
.icon-btn:not(.on) .ico-mic-on, .icon-btn:not(.on) .ico-cam-on{display:none}
.icon-btn:not(.on) .ico-mic-off, .icon-btn:not(.on) .ico-cam-off{display:block}

.round{
  width:72px; height:72px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; color:#fff; background:var(--brand);
  box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .15s, background .15s;
}
.round:hover{transform:scale(1.06)}
.round:active{transform:scale(.97)}
.round:disabled{background:#3a3a3e; cursor:default; transform:none; box-shadow:none}
.round .ico{width:30px; height:30px; fill:currentColor; display:block}
.round .ico-stop{display:none}
.frame[data-state="live"] .round{background:var(--danger)}
.frame[data-state="live"] .ico-play{display:none}
.frame[data-state="live"] .ico-stop{display:block}

/* ── 准备中遮罩（对齐官方 demo 的加载页：圆形头像 + 同心圆环 + 标题 + 说明 + 取消） ── */
.prep{
  position:absolute; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:#171315; padding:0 26px; text-align:center;
  transition:opacity .45s ease;
}
.prep.gone{opacity:0; pointer-events:none}
.prep-orb{position:relative; width:190px; height:190px; display:grid; place-items:center; margin-bottom:34px}
.prep-orb .ring{
  position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,.16);
}
.prep-orb .r1{inset:0; border-color:rgba(255,255,255,.26); animation:spin 26s linear infinite}
.prep-orb .r2{inset:17px; border-style:dotted; border-color:rgba(255,255,255,.2); animation:spin 18s linear infinite reverse}
.prep-orb .r3{inset:34px; border-color:rgba(255,255,255,.16); animation:spin 32s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prep-orb img{
  width:122px; height:122px; border-radius:50%; object-fit:cover; object-position:center 22%;
  position:relative; z-index:2;
}
.prep-title{margin:0 0 12px; font-size:19px; font-weight:600; letter-spacing:.3px; color:#fff}
.prep-desc{
  margin:0; max-width:330px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.55);
}
.prep-status{
  margin:14px 0 0; padding:5px 12px; font-size:12px; letter-spacing:.3px;
  color:rgba(255,255,255,.62); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.prep-cancel{
  margin-top:46px; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .15s;
}
.prep-cancel:hover{transform:scale(1.06)}
.prep-cancel:active{transform:scale(.96)}
.prep-cancel svg{width:26px; height:26px}

.caption{font-size:12px; color:rgba(255,255,255,.55); letter-spacing:.2px}

/* ── 角标 ── */
.badge{
  position:absolute; left:14px; top:14px; z-index:7; font-size:11.5px; color:#fff;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:3px 10px; backdrop-filter:blur(8px);
}
.toast{
  position:absolute; left:50%; top:18px; transform:translateX(-50%); z-index:7;
  margin:0; padding:7px 14px; max-width:88%; text-align:center; font-size:12.5px;
  color:#fff; background:rgba(0,0,0,.66); border-radius:10px; backdrop-filter:blur(8px);
}
/* ── 体验时长用完：整屏黑底 + 提示（盖住所有内容） ── */
.trial-over{
  position:absolute; inset:0; z-index:30; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:0 30px; text-align:center;
}
.trial-line1{margin:0; font-size:17px; font-weight:600; color:#fff; letter-spacing:.4px}
.trial-line2{margin:0; font-size:13.5px; color:rgba(255,255,255,.55); letter-spacing:.3px}

/* 调试用（?debug=1 才显示） */
.debug{
  position:absolute; right:10px; bottom:10px; margin:0; max-width:62%; max-height:38%;
  overflow:hidden; padding:8px 10px; font-size:10.5px; line-height:1.45;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#9ff0b8; background:rgba(0,0,0,.72); border-radius:8px;
  white-space:pre-wrap; z-index:9;
}