/* ============================================================
   手机外壳样式（桌面端 9:16 安卓手机展示）
   手机端（<=768px）通过媒体查询自动去掉外壳，直接全屏显示网页
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #1d2129;
  background: #e9edf2;
}

/* 桌面背景层：居中放置手机 */
.shell {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1100px 560px at 18% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 620px at 88% 100%, rgba(120,160,220,.35) 0%, rgba(120,160,220,0) 55%),
    #e9edf2;
  z-index: 20;
}

/* 手机机身：按 9:16 比例自适应撑满首屏 */
.phone {
  position: relative;
  height: 100vh;
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  border-radius: 48px;
  background: linear-gradient(150deg, #33373f, #15171c);
  padding: 11px;
  box-shadow:
    0 34px 70px rgba(15,25,45,.38),
    0 10px 26px rgba(15,25,45,.22),
    inset 0 1px 1px rgba(255,255,255,.28);
}

/* 屏幕 */
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 37px;
  overflow: hidden;
  background: #f4f6fa;
}

/* 机身侧键 */
.phone-buttons { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.phone-buttons span { position: absolute; background: #2a2e35; }
.pb-vol  { left: -2px; top: 118px; width: 3px; height: 58px; border-radius: 2px 0 0 2px; }
.pb-power{ right: -2px; top: 150px; width: 3px; height: 84px; border-radius: 0 2px 2px 0; }

/* 状态栏（仅桌面） */
.phone-statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px 0 22px;
  z-index: 30;
  pointer-events: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #1d2129;
}
.sb-time { letter-spacing: .3px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sb-icons { display: flex; align-items: center; gap: 4px; }
.sb-notch {
  position: absolute;
  left: 50%; top: 13px;
  transform: translateX(-50%);
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #131519;
}

/* 内容滚动区 */
.app-content {
  position: absolute;
  top: 38px; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #f4f6fa;
  display: flex;
  flex-direction: column;
}

/* 底部手势条（仅桌面） */
.phone-homebar {
  position: absolute;
  bottom: 7px; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 4px;
  border-radius: 2px;
  background: rgba(29,33,41,.35);
  z-index: 30;
  pointer-events: none;
}

/* 外壳开关按钮（仅桌面） */
.shell-toggle {
  position: fixed;
  right: 26px; bottom: 26px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #2f6fed;
  box-shadow: 0 8px 20px rgba(15,25,45,.22);
  cursor: pointer;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
}
.shell-toggle:active { transform: scale(.92); }

/* 全屏模式（点击外壳开关后的桌面便捷视图） */
body.shell-off .shell { position: static; display: block; background: #eef1f6; }
body.shell-off .phone {
  width: 100%;
  max-width: 480px;
  height: auto;
  min-height: 100vh;
  aspect-ratio: auto;
  margin: 0 auto;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
body.shell-off .phone-screen { border-radius: 0; min-height: 100vh; }
body.shell-off .phone-buttons,
body.shell-off .phone-statusbar,
body.shell-off .phone-notch,
body.shell-off .phone-homebar,
body.shell-off .sb-notch { display: none; }
body.shell-off .app-content {
  position: static;
  height: auto;
  overflow: visible;
  min-height: 100vh;
}

/* ============================================================
   手机端：去掉手机外壳，直接全屏显示网页内容
   ============================================================ */
@media (max-width: 768px) {
  body { background: #f4f6fa; }
  .shell { position: static; display: block; background: none; }
  .phone {
    width: 100%;
    height: 100dvh;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .phone-screen { border-radius: 0; height: 100%; }
  .phone-buttons,
  .phone-statusbar,
  .phone-homebar,
  .shell-toggle { display: none; }
  .app-content {
    top: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}