/* ============================================================
   玉珀集 H5 · 生产模式（Standalone）真机满屏样式
   ------------------------------------------------------------
   用法：
     index.html      —— 生产入口，<body class="is-app">，引本文件
     prototype.html  —— 原型展示台（390×844 手机模型 + 右侧方案面板），不引本文件
   所有规则都限定在 body.is-app 下，因此对原型页零影响。
   ============================================================ */

html.is-app,
body.is-app {
  height: 100%;
  /* ★★ 必须显式把 min-height 归零 ★★
     基础样式里有 body{min-height:100vh}（styles.css 的页面居中排版用），
     它在 body.is-app 下**没有被覆盖**，会继续生效，而移动端的 100vh 是
     「浏览器地址栏收起」时的大视口，比真正能看见的高度高出 56~150px。
     结果：外壳被顶得比屏幕高 → 底部那一截（正好是 .tabbar）掉到可见区外面，
     而 body 又是 overflow:hidden，用户连滚都滚不回来 —— 线上表现就是
     「底部 4 个图标看不见、切不了页」。桌面浏览器和部分手机 100vh 恰好等于
     可见高度，所以只有「有的手机」会犯。详见 2026-10-09 的排查记录。 */
  min-height: 0;
  overflow: hidden;
}

body.is-app {
  display: block;
  padding: 0;
  margin: 0;
  /* 原型页用 --stage（展台底色），真机应用背景要用 --bg（应用底色） */
  background: var(--bg);
  /* 防止微信/移动端系统字号缩放把排版撑坏 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 禁止整页橡皮筋回弹，滚动只发生在内部 .screen */
  overscroll-behavior: none;
}

/* 容器：原型里是 390×844 的手机模型，真机拉满视口。
   ★ 用 position:fixed + 四边 0 撑满，而不是 height:100%：
     百分比高度链只能取到「布局视口」的高度，一旦浏览器给的布局视口比可见区高
     （安卓/微信的地址栏、系统的导航条都会造成这种差值），外壳底部就会跑到屏幕外。
     fixed 定位由浏览器按**可见视口**贴边，取完地址栏收放也跟着走，底部条永远在屏内。
     注意 height/width 必须写 auto：top+bottom 与 height 同时给定时 height 会赢，
     那样又退化成固定高度了。 */
body.is-app .device {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* 原型专属外观：刘海、右侧视觉方案面板 —— 真机一律不显示 */
body.is-app .notch,
body.is-app .stage-panel,
body.is-app .stage-note {
  display: none !important;
}

/* 模拟状态栏（真实时间 + 假信号/电池图标）：
   不能直接删除 —— 它占着 44px 顶部空间，删掉顶部内容会贴死。
   改为「安全区占位条」：高度 = 刘海/灵动岛安全区，内容保留占位但不可见。 */
body.is-app .statusbar {
  height: env(safe-area-inset-top, 0px);
  min-height: 10px;
  padding: 0;
  visibility: hidden;
}

/* 底部安全区：避开 iPhone 的 Home 横条，否则 tabbar 文字被压住 */
body.is-app .tabbar {
  height: calc(66px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* toast 同步抬升，避免被 Home 横条挡住 */
body.is-app .toast {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* 大屏（平板 / 桌面浏览器打开）：限宽居中成手机版式，
   否则 430px 以上的卡片布局会被拉伸变形 */
@media (min-width: 620px) {
  body.is-app {
    background: var(--stage);
  }
  body.is-app .device {
    max-width: 430px;
    margin: 0 auto;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}