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

html.is-app,
body.is-app {
  height: 100%;
  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 的手机模型，真机拉满视口。
   height 走 100% 链路（html→body→.device），比 100vh 更稳：
   移动端浏览器 100% 不随地址栏收放跳动，也不会被软键盘顶得一塌糊涂。 */
body.is-app .device {
  width: 100%;
  height: 100%;
  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);
  }
}