:root{
  --ink:#0b0f17; --panel:rgba(18,22,32,.78); --line:rgba(255,255,255,.10);
  --text:#eef2f8; --dim:rgba(236,242,250,.55);
  --stage-h:min(52vh,420px);
  --blue:#7fb4ff; --warm:#ffb27a; --red:#ff4d5e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{-webkit-touch-callout:none;overscroll-behavior:none;height:100%;margin:0;background:#05070b;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
#app{position:fixed;inset:0;overflow:hidden}
section{position:absolute;inset:0;display:none}
#app.lobby .lobby-view{display:block}
#app.call .call-view{display:block}

/* ───────── 待机 ───────── */
.room{position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(240px 200px at 76% 26%,rgba(255,180,110,.20),transparent 70%),
    radial-gradient(420px 520px at 18% 8%,rgba(120,170,255,.13),transparent 70%),
    linear-gradient(180deg,#131a27 0%,#0d121c 46%,#080b12 100%)}
.room .win{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:264px;height:168px;
  border-radius:16px;background:linear-gradient(180deg,rgba(160,205,255,.20),rgba(60,110,190,.05));
  filter:blur(14px);opacity:.85}
.room .lamp{position:absolute;right:44px;top:30%;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,196,140,.42),rgba(255,180,110,.10) 60%,transparent);
  filter:blur(6px)}
.room .floor{position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(180deg,transparent,rgba(6,9,15,.66) 38%,rgba(3,5,9,.94))}
.room .dust{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(1.4px 1.4px at 20% 30%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 68% 18%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.6px 1.6px at 42% 62%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.2px 1.2px at 84% 52%,rgba(255,255,255,.3),transparent);
  animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}

.topbar{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:16px;right:16px;display:flex}
.online{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(12,16,24,.6);border:1px solid var(--line);font-size:12.5px;color:var(--dim);
  backdrop-filter:blur(12px)}
.online i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}

.stage-avatar{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);
  height:var(--stage-h);filter:drop-shadow(0 24px 46px rgba(0,0,0,.6));animation:breathe 5.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-5px) scale(1.006)}}

.bubble{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(118px + var(--stage-h) + 18px);
  max-width:74%;padding:9px 14px;border-radius:16px;background:rgba(20,25,36,.86);
  border:1px solid var(--line);font-size:14px;line-height:1.35;backdrop-filter:blur(14px);
  box-shadow:0 10px 26px rgba(0,0,0,.35)}
.bubble:after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;
  transform:translateX(-50%) rotate(45deg);background:inherit;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}

.lobby-dock{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 22px);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.hint{margin:0;font-size:12px;color:rgba(236,242,250,.38)}

/* ───────── 通话 ───────── */
.cam,.cam-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a0d14}
.cam{opacity:0;transition:opacity .5s}
.cam.on{opacity:1}
.cam-fallback{background:
  radial-gradient(300px 250px at 30% 24%,rgba(255,200,150,.22),transparent 70%),
  radial-gradient(360px 320px at 76% 72%,rgba(120,160,255,.10),transparent 70%),
  linear-gradient(170deg,#22242e 0%,#171a23 46%,#0d1017 100%)}
.cam-fallback.hide{display:none}

.pip{position:absolute;left:14px;top:calc(env(safe-area-inset-top) + 12px);width:112px;height:150px;
  border-radius:18px;overflow:hidden;background:linear-gradient(165deg,#2b2f3e,#12151f);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.pip img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  transform:scale(1.02);animation:breathe2 5.4s ease-in-out infinite}
@keyframes breathe2{0%,100%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.03) translateY(-2px)}}
.pip-chip{position:absolute;left:7px;bottom:7px;padding:2px 8px;border-radius:999px;
  background:rgba(8,11,17,.66);font-size:10.5px;color:rgba(255,255,255,.85);backdrop-filter:blur(8px)}

.tag{position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 18px);padding:6px 11px;
  border-radius:999px;background:rgba(8,11,17,.6);border:1px solid var(--line);font-size:11.5px;
  color:rgba(255,255,255,.72);backdrop-filter:blur(10px)}
.debug{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 74px);
  font-size:10.5px;color:rgba(255,255,255,.34);letter-spacing:.02em}

.caption{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 128px);
  padding:12px 14px;border-radius:16px;background:rgba(10,13,20,.76);border:1px solid var(--line);
  backdrop-filter:blur(16px);opacity:0;transform:translateY(8px);transition:.25s;pointer-events:none}
.caption.on{opacity:1;transform:none}
.caption b{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--blue);font-weight:600;margin-bottom:5px}
.caption span{font-size:15.5px;line-height:1.45}
.caption.me b{color:#93a7c4}

.dock{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 34px);
  display:flex;align-items:center;justify-content:center;gap:16px}
.talk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(20,25,36,.86);color:var(--text);font-size:15px;font-weight:500;
  backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(0,0,0,.4);user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-drag:none}
#talkLabel{display:inline-block;min-width:4.4em;text-align:center}
.talk-btn.call{flex:1;max-width:210px;background:rgba(30,38,54,.92)}
.talk-btn.rec{background:#ff5470;border-color:#ff5470;color:#fff;box-shadow:0 0 0 10px rgba(255,84,112,.16)}
.talk-btn.busy{opacity:.55}
.round{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(20,25,36,.9);
  display:grid;place-items:center;color:#dfe6f2;backdrop-filter:blur(12px)}
.round svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.round.danger{background:var(--red);border-color:var(--red);color:#fff}
.round.danger svg{fill:currentColor;stroke:none}
.call-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 14px);text-align:center}

/* 交换大小窗 */
#app.swap .pip{left:14px;right:14px;top:calc(env(safe-area-inset-top) + 54px);width:auto;height:48vh;border-radius:24px}
#app.swap .pip img{object-position:center 20%}
#app.swap .cam{inset:calc(env(safe-area-inset-top) + 54px) 14px auto auto;width:96px;height:128px;z-index:6;
  border-radius:16px;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 26px rgba(0,0,0,.5);opacity:1}
#app.swap .cam-fallback{display:none}
#app.swap .debug{display:none}
#app.swap .tag{right:auto;left:14px}

/* ───────── 来电 ───────── */
#app.ring{background:#05070b}
.ring-view{background:radial-gradient(520px 620px at 50% 18%,rgba(90,130,210,.22),transparent 70%),
  linear-gradient(180deg,#0e1420 0%,#080b12 62%,#05070b 100%)}
.ring-view{display:none}
#app.ring .ring-view{display:block}
.ring-bg{position:absolute;inset:0;
  background:radial-gradient(420px 420px at 50% 34%,rgba(120,160,255,.10),transparent 70%)}
.ring-avatar{position:absolute;left:50%;top:20%;transform:translateX(-50%);height:min(34vh,300px);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));animation:ringpulse 2.6s ease-in-out infinite}
@keyframes ringpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.02)}}
.ring-name{position:absolute;left:0;right:0;top:calc(20% + min(34vh,300px) + 22px);text-align:center;
  font-size:26px;font-weight:600;letter-spacing:.02em}
.ring-sub{position:absolute;left:0;right:0;top:calc(20% + min(34vh,300px) + 62px);text-align:center;
  font-size:13.5px;color:rgba(236,242,250,.5)}
.ring-actions{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 64px);
  display:flex;justify-content:center;gap:64px}
.ring-btn{width:76px;height:76px;border-radius:50%;border:0;color:#fff;font-size:14px;font-weight:500;
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ring-btn.accept{background:#2ecc71}
.ring-btn.decline{background:var(--red)}
.ring-btn:active{transform:scale(.96)}