/* ============================================================
   涟漪包云桌面 —— 手机拟物主样式
   极光氛围 / 手机机身 / 3D 发光倒影图标 / 玻璃三键导航 / 微信式底部自定义菜单
   ============================================================ */
:root {
  --phone-w: 392px;
  --phone-h: 824px;
  --radius-phone: 52px;
  --glass: rgba(255, 255, 255, .08);
  --glass-strong: rgba(255, 255, 255, .14);
  --stroke: rgba(255, 255, 255, .16);
  --txt: #eef3ff;
  --txt-dim: rgba(238, 243, 255, .62);
  --cyan: #67e8f9;
  --violet: #a78bfa;
  --dock-h: 86px;
  --ease-out: cubic-bezier(.22, 1.4, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--txt);
  background: #04060e;
}

button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------------- 环境氛围层 ---------------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; background:
  radial-gradient(120% 90% at 50% 110%, #0b1030 0%, #05070f 55%, #020308 100%); }
.aurora__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; mix-blend-mode: screen; animation: blobFloat 18s ease-in-out infinite alternate; }
.aurora__blob.a1 { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: radial-gradient(circle, #1d4ed8 0%, transparent 70%); }
.aurora__blob.a2 { width: 40vw; height: 40vw; right: -10vw; top: 18vh; background: radial-gradient(circle, #7c3aed 0%, transparent 70%); animation-delay: -6s; }
.aurora__blob.a3 { width: 38vw; height: 38vw; left: 22vw; bottom: -16vw; background: radial-gradient(circle, #0e7490 0%, transparent 70%); animation-delay: -12s; }
@keyframes blobFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, -3vh, 0) scale(1.15); }
}
.aurora__grain { position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); }

/* ---------------- 舞台与手机机身 ---------------- */
.stage { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 48px; }

.phone {
  position: relative;
  width: var(--phone-w); height: var(--phone-h);
  border-radius: var(--radius-phone);
  background: linear-gradient(160deg, #2a2f3d 0%, #10131c 38%, #05060b 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .10) inset,
    0 0 0 10px #0c0e15,
    0 0 0 12px rgba(255, 255, 255, .08),
    0 40px 90px -20px rgba(0, 0, 0, .9),
    0 0 120px -30px rgba(99, 102, 241, .55);
  flex: none;
}
.phone__notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 132px; height: 30px; border-radius: 20px;
  background: #05060b; z-index: 40;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.6) inset;
}
.phone__notch span { position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1e3a5f, #05070d 70%); box-shadow: 0 0 0 1px rgba(103,232,249,.25); }

.screen {
  position: absolute; inset: 12px;
  border-radius: calc(var(--radius-phone) - 12px);
  overflow: hidden;
  background: radial-gradient(130% 120% at 15% 0%, #1b3a63 0%, #0c1530 42%, #05070f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.screen--locked { touch-action: none; }
.screen--locked .desktop, .screen--locked .viewer, .screen--locked .ai-panel, .screen--locked .dockbar { pointer-events: none; filter: brightness(.55) saturate(.8); transition: filter .3s; }

.phone__shine {
  position: absolute; inset: 12px; border-radius: calc(var(--radius-phone) - 12px);
  pointer-events: none; z-index: 90;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 18%, transparent 32%, transparent 72%, rgba(255,255,255,.06) 88%, rgba(255,255,255,.12) 100%);
  mix-blend-mode: screen;
}

.stage-hint { width: 300px; color: var(--txt-dim); }
.stage-hint h1 { font-size: 30px; font-weight: 900; letter-spacing: 1px; margin-bottom: 14px;
  background: linear-gradient(90deg, #67e8f9, #a78bfa 60%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage-hint p { font-size: 14px; line-height: 1.9; }

/* ---------------- 屏幕内通用 ---------------- */
.desktop, .viewer, .ai-panel { position: absolute; inset: 0; }
.desktop { z-index: 10; display: flex; flex-direction: column; padding: 46px 18px calc(var(--dock-h) + 8px); transition: opacity .35s, transform .35s; }
.viewer { z-index: 20; display: flex; flex-direction: column; padding-bottom: var(--dock-h); transform: translateY(102%); transition: transform .48s var(--ease-out); }
.viewer.on { transform: translateY(0); }
/* 面板只占 dock 上方区域：底部固定导航（涟漪包/AI助手/菜单）永远可见可点 */
.ai-panel { z-index: 35; bottom: auto; height: calc(100% - var(--dock-h));
  transform: translateY(104%); visibility: hidden;
  transition: transform .42s var(--ease-out), visibility 0s linear .42s;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(13,20,44,.92), rgba(6,8,20,.96)); backdrop-filter: blur(22px); }
.ai-panel.on { transform: translateY(0); visibility: visible; transition: transform .42s var(--ease-out); }

/* ---------------- 顶部：挂件 + 幻灯片 ---------------- */
.topzone { flex: none; }

.widgets { display: flex; gap: 6px; overflow-x: auto; padding: 0 2px 10px; scrollbar-width: none; }
.widgets::-webkit-scrollbar { display: none; }
.widget {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px; font-size: 11px;
  background: var(--glass); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); color: var(--txt);
  box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.12) inset;
  transition: transform .2s var(--ease-out);
}
.widget:active { transform: scale(.94); }
.widget__ic { font-size: 12.5px; filter: drop-shadow(0 0 6px rgba(103,232,249,.6)); }
.widget b { font-weight: 600; }
.widget span { color: var(--txt-dim); }

.carousel { position: relative; border-radius: 22px; overflow: hidden; height: 132px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.10) inset; }
.carousel__track { display: flex; height: 100%; transition: transform .6s var(--ease-out); }
.slide {
  position: relative; flex: none; width: 100%; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px 16px; cursor: pointer;
}
.slide__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.slide__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px;
  filter: drop-shadow(0 0 22px rgba(103,232,249,.45)); }
.slide::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,8,20,.08) 30%, rgba(5,8,20,.78) 100%); }
.slide__title { position: relative; z-index: 1; font-size: 15px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.slide__desc { position: relative; z-index: 1; font-size: 11.5px; color: var(--txt-dim); margin-top: 3px; }
.carousel__dots { position: absolute; right: 14px; bottom: 12px; z-index: 2; display: flex; gap: 5px; }
.carousel__dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.35); transition: all .3s; }
.carousel__dots i.on { width: 16px; background: #67e8f9; box-shadow: 0 0 8px rgba(103,232,249,.8); }

/* ---------------- App 图标屏幕（左右划屏，每页 4 个超大图标） ---------------- */
.apps-viewport { flex: 1; position: relative; margin-top: 14px; overflow: hidden; }
.apps-pages { display: flex; transition: transform .55s var(--ease-out); will-change: transform; }
.apps-page {
  flex: none; width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 18px 10px; padding: 8px 14px 14px;
}
.app-icon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; cursor: pointer; border-radius: 26px;
  transition: transform .18s var(--ease-out);
}
.app-icon:active { transform: scale(.9); }
.app-icon__tile {
  position: relative; width: 106px; height: 106px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  background: var(--tile-bg, linear-gradient(150deg, #38bdf8, #4f46e5));
  box-shadow:
    0 16px 32px -6px var(--tile-glow, rgba(56,189,248,.6)),
    0 0 40px -4px var(--tile-glow, rgba(56,189,248,.5)),
    0 4px 10px rgba(0,0,0,.5),
    0 2px 0 rgba(255,255,255,.4) inset,
    0 -12px 20px -8px rgba(0,0,0,.5) inset;
  -webkit-box-reflect: below 8px -webkit-linear-gradient(bottom, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 46%);
}
.app-icon__tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.06) 28%, transparent 55%);
  pointer-events: none;
}
.app-icon__tile img { width: 68%; height: 68%; object-fit: contain; border-radius: 18px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.app-icon__name { font-size: 13.5px; font-weight: 600; color: var(--txt); text-shadow: 0 1px 6px rgba(0,0,0,.85);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-icon--sys .app-icon__name::after { content: " ✓"; color: #67e8f9; font-size: 9px; }

.page-indicator { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.page-indicator i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); transition: all .3s; }
.page-indicator i.on { background: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,.9); transform: scale(1.25); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 嵌入式页面 + 玻璃三键导航 ---------------- */
.viewer__framewrap { position: relative; flex: 1; background: #070b18; }
.viewer__framewrap iframe { width: 100%; height: 100%; border: 0; display: block; background: #0a0f22; }
.viewer__loading { position: absolute; inset: 0; display: flex; gap: 8px; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #101a3d, #05070f); z-index: 2; transition: opacity .35s; }
.viewer__loading.hide { opacity: 0; pointer-events: none; }
.viewer__loading span { width: 10px; height: 10px; border-radius: 50%; background: #67e8f9;
  box-shadow: 0 0 12px rgba(103,232,249,.8); animation: bounce 1s ease-in-out infinite; }
.viewer__loading span:nth-child(2) { animation-delay: .15s; background: #818cf8; }
.viewer__loading span:nth-child(3) { animation-delay: .3s; background: #e879f9; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.viewer__ext { position: absolute; top: 10px; right: 12px; z-index: 3;
  font-size: 11px; padding: 5px 10px; border-radius: 999px;
  background: rgba(10,14,30,.55); border: 1px solid var(--stroke); backdrop-filter: blur(10px);
  color: var(--txt-dim); opacity: 0; transition: opacity .3s; }
.viewer__framewrap:hover .viewer__ext { opacity: 1; }

/* 三键导航：屏幕级永久悬浮层，首页/外链页/AI 对话时都固定在底部且可点；仅微信菜单弹出时由遮罩接管 */
/* 外形 = 一整条深色玻璃药丸（::before 承载，顶部中央被圆形玻璃球咬出凹口） */
.dockbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 45;
  height: var(--dock-h);
  display: flex; align-items: stretch; justify-content: center;
  padding: 6px 14px calc(6px + env(safe-area-inset-bottom));
  background: transparent;
}
/* 药丸条本体：居中浮起的深色毛玻璃药丸，mask 在顶部中央挖出托住玻璃球的圆凹口 */
.dockbar::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 14px; right: 14px; top: 6px; bottom: calc(6px + env(safe-area-inset-bottom));
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(17,22,44,.78), rgba(7,10,24,.90));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 14px 34px -10px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -10px 24px -14px rgba(0,0,0,.55) inset;
}
/* 两侧功能钮：透明无底色，只保留图标与文字（整条药丸统一为一个玻璃外形） */
.dock-btn {
  position: relative; z-index: 1; flex: 1; max-width: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--txt);
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform .15s var(--ease-out);
}
.dock-btn:active { transform: scale(.94); }
.dock-btn__ic { font-size: 22px; line-height: 1; }
.dock-btn--mall .dock-btn__ic { font-size: 24px; }
.dock-btn__name { font-size: 11px; letter-spacing: 1.5px; color: var(--txt-dim); }
.dock-btn.active .dock-btn__name, .dock-btn.active .dock-btn__ic {
  color: #67e8f9;
  text-shadow: 0 0 12px rgba(103,232,249,.6);
}
/* 中间圆形 AI 主键：深色立体高光玻璃弹珠（深暗球体 + 顶部大面镜面高光 + 中央白菱形，完全内嵌在药丸条内） */
.dock-btn--ai {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 50% 118%, rgba(96,128,255,.26), rgba(0,0,0,0) 46%),
    radial-gradient(circle at 50% 112%, rgba(150,178,255,.20), rgba(0,0,0,0) 40%),
    radial-gradient(circle at 50% 9%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.94) 6%,
      rgba(238,244,255,.52) 11%,
      rgba(176,190,230,.18) 16%,
      rgba(150,166,214,0) 22%),
    radial-gradient(circle at 50% 42%,
      rgba(18,23,48,.98) 0%,
      rgba(10,14,32,1) 58%,
      rgba(6,9,20,1) 100%);
  box-shadow:
    0 12px 24px -8px rgba(0,0,0,.7),
    0 2px 6px rgba(0,0,0,.45),
    0 1.5px 1px rgba(255,255,255,.55) inset,
    0 -2px 6px rgba(10,14,38,.85) inset,
    -9px -5px 16px -9px rgba(190,210,255,.32) inset,
    10px 10px 20px -6px rgba(0,0,0,.8) inset;
  transition: transform .15s var(--ease-out);
}
/* 顶部斜向镜面弧光：玻璃弹珠上方大块柔白反射 */
.dock-btn--ai::before {
  content: ""; position: absolute; left: 50%; top: -30%;
  width: 70%; height: 34%; transform: translateX(-53%) rotate(-14deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.10), rgba(255,255,255,.03) 55%, rgba(255,255,255,0) 75%);
  filter: blur(8px);
  pointer-events: none;
}
/* 底部弧形环境反光（淡蓝紫 rim light，让球体下缘通透） */
.dock-btn--ai::after {
  content: ""; position: absolute; left: 50%; bottom: 4%;
  width: 64%; height: 26%; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(146,178,255,.34), rgba(146,178,255,0) 70%);
  filter: blur(3px);
  pointer-events: none;
}
.dock-btn--ai .dock-btn__ic {
  position: relative; z-index: 1; font-size: 18px; line-height: 1; color: #fff;
  margin-top: 6px;
  text-shadow: 0 0 12px rgba(200,224,255,.9), 0 0 5px rgba(255,255,255,.95);
}
.dock-btn--ai .dock-btn__name { display: none; }
.dock-btn--ai:active { transform: translate(-50%, -50%) scale(.96); }

/* ---------------- AI 助手对话框 ---------------- */
.ai-panel__head { display: flex; align-items: center; gap: 12px; padding: 50px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ai-orb { position: relative; width: 42px; height: 42px; flex: none; }
.ai-orb__core { position: absolute; inset: 7px; border-radius: 50%;
  background: conic-gradient(from 0deg, #67e8f9, #818cf8, #e879f9, #67e8f9);
  filter: blur(2px); animation: spin 4s linear infinite; box-shadow: 0 0 18px rgba(103,232,249,.7); }
.ai-orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.ai-panel__title { flex: 1; }
.ai-panel__title h2 { font-size: 17px; font-weight: 700; }
.ai-panel__title p { font-size: 11px; color: var(--txt-dim); margin-top: 2px; }
.ai-panel__close { width: 32px; height: 32px; border-radius: 50%; font-size: 18px;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--txt-dim); }

.ai-chat { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.ai-msg { display: flex; max-width: 88%; }
.ai-msg--user { align-self: flex-end; justify-content: flex-end; }
.ai-msg__bubble {
  padding: 11px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.7;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  backdrop-filter: blur(12px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
.ai-msg--user .ai-msg__bubble {
  background: linear-gradient(150deg, rgba(56,189,248,.35), rgba(99,102,241,.4));
  border-color: rgba(103,232,249,.4); border-radius: 18px 18px 4px 18px;
}
.ai-msg--bot .ai-msg__bubble { border-radius: 18px 18px 18px 4px; }
.ai-msg__bubble i { color: #a5f3fc; font-style: normal; }
.ai-msg__apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-app {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px;
  border-radius: 999px; font-size: 12.5px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.2) inset;
  transition: transform .15s var(--ease-out);
}
.ai-app:active { transform: scale(.93); }
.ai-app__ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--tile-bg); box-shadow: 0 0 10px -2px var(--tile-glow); }
.ai-typing { display: inline-flex; gap: 4px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-dim); animation: bounce 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }

.ai-inputbar { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08); background: rgba(8,11,26,.5); backdrop-filter: blur(16px); }
.ai-inputbar input {
  flex: 1; height: 44px; border-radius: 999px; padding: 0 18px; font-size: 13.5px; color: var(--txt);
  background: rgba(255,255,255,.08); border: 1px solid var(--stroke); outline: none;
}
.ai-inputbar input:focus { border-color: rgba(103,232,249,.6); box-shadow: 0 0 0 3px rgba(103,232,249,.15); }
.ai-inputbar button {
  width: 44px; height: 44px; border-radius: 50%; flex: none; font-size: 16px;
  background: linear-gradient(150deg, #38bdf8, #6366f1); color: #fff;
  box-shadow: 0 8px 20px -4px rgba(56,189,248,.6), 0 1px 0 rgba(255,255,255,.4) inset;
  transition: transform .15s var(--ease-out);
}
.ai-inputbar button:active { transform: scale(.9); }
.ai-quick { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
.ai-quick::-webkit-scrollbar { display: none; }
.ai-quick .ai-app { flex: none; }

/* ---------------- 微信式底部自定义菜单（单击"菜单"向上弹出子菜单） ---------------- */
/* 默认休眠：不拦截点击；仅 .wxmenu.on 时遮罩与面板激活 */
.wxmenu { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.wxmenu__mask {
  position: absolute; inset: 0;
  background: rgba(3,5,12,.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s;
}
.wxmenu__panel {
  position: absolute; left: 10px; right: 10px;
  bottom: calc(var(--dock-h) + 6px);
  display: flex; flex-direction: column-reverse; gap: 2px;
  max-height: 60%; overflow-y: auto;
}
.wxmenu__item {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; letter-spacing: 2px; color: #fff;
  background: rgba(38,42,52,.92);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: transform .26s var(--ease-out), opacity .22s, background .15s;
  pointer-events: none;
}
.wxmenu__item:active { background: rgba(62,68,82,.95); }
.wxmenu.on { pointer-events: auto; }
.wxmenu.on .wxmenu__mask { opacity: 1; }
.wxmenu.on .wxmenu__item {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wxmenu.on .wxmenu__item:nth-child(1) { transition-delay: .16s; }
.wxmenu.on .wxmenu__item:nth-child(2) { transition-delay: .12s; }
.wxmenu.on .wxmenu__item:nth-child(3) { transition-delay: .08s; }
.wxmenu.on .wxmenu__item:nth-child(n+4) { transition-delay: .04s; }

/* ---------------- 响应式：手机端全屏拟物 ---------------- */
@media (max-width: 600px), (max-height: 760px) {
  :root { --phone-w: 100vw; --phone-h: 100vh; --radius-phone: 0; }
  .stage { gap: 0; }
  .phone { width: 100vw; height: 100dvh; border-radius: 0;
    box-shadow: none; background: transparent; }
  .phone__notch { display: none; }
  .screen { inset: 0; border-radius: 0; }
  .phone__shine { display: none; }
  .stage-hint { display: none; }
  .desktop { padding-top: calc(6px + env(safe-area-inset-top)); }
  .ai-panel__head { padding-top: calc(26px + env(safe-area-inset-top)); }
  .widgets { gap: 6px; padding-bottom: 8px; justify-content: space-between; }
  .widget { padding: 6px 10px; font-size: 11px; gap: 5px; }
  .widget__ic { font-size: 13px; }
}