/* 移动端 WebApp 通用样式（iOS/Android） */

/* 基础与视口修正 */
html,
body {
  /* 避免固定高度限制首屏 dvh/svh 执行，使用最小高度 */
  min-height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  /* 修复移动端 100vh 问题，优先使用小视口单位 */
  min-height: 100svh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* 安全区域变量（刘海、圆角屏） */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --viewport-height: calc(var(--vh, 1vh) * 100);
}

/* 全屏容器：结合 JS 动态 --vh 变量 */
.app-fullscreen {
  /* 顺序：calc 回退 → 100svh → 100dvh（支持新单位时优先使用） */
  min-height: calc(var(--viewport-height) + var(--safe-area-top) + var(--safe-area-bottom));
  min-height: 100svh;
  min-height: 100dvh;
}

/* 背景类：为需要铺满到安全区的页面容器使用 */
.safe-area-bg {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

/* 安全区域工具类 */
.safe-area-p {
  padding-top: var(--safe-area-top);
  padding-right: var(--safe-area-right);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
}

.safe-area-pt {
  padding-top: var(--safe-area-top);
}

.safe-area-pb {
  padding-bottom: var(--safe-area-bottom);
}

.safe-area-pl {
  padding-left: var(--safe-area-left);
}

.safe-area-pr {
  padding-right: var(--safe-area-right);
}

/* 输入框缩放与触控体验 */
input,
select,
textarea {
  font-size: 16px; /* 避免 iOS 表单自动放大 */
}

button,
[role="button"] {
  touch-action: manipulation;
}

/* 图片与媒体排版 */
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 滚动与回弹控制（按需给容器使用） */
.no-overscroll {
  overscroll-behavior: none;
}

.touch-scroll {
  -webkit-overflow-scrolling: touch;
}

/* 独立 WebApp 模式下可选的额外顶部预留 */
.standalone .status-bar-pad {
  padding-top: var(--safe-area-top);
}