/* ============================================
   APP Shell 适配样式 (Capacitor)
   清清童创 — com.qqcreate.kids
   作用：覆盖 H5 已有样式，增加 APP 壳所需的安全区域和原生交互适配
   原则：不修改原有 CSS 文件，通过 CSS 变量和追加选择器实现
   ============================================ */

/* === 1. CSS 变量覆盖 === */
:root {
  /* 安全区域由系统注入，这里设置用到的 CSS 变量默认值 */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  /* 状态栏高度 = safe-area-inset-top，至少 20px (Android 状态栏最小高度) */
  --status-bar-height: max(env(safe-area-inset-top, 20px), 20px);
}

/* === 2. 页面头部 — 给 StatusBar 留空间 === */
.page-header {
  padding-top: calc(var(--space-4) + var(--status-bar-height));
  /* 使用 var(--sat) 确保 iOS 动态岛等也正确 */
  /* 对于有原生 StatusBar 覆盖的场景，用 padding-top 而不是 margin */
}

/* 所有固定在顶部的元素都要偏移 */
.profile-header,
.dialog-header,
.create-header,
.drawing-header,
.story-header,
.result-header,
.achievement-header,
.gallery-header,
.cp-header {
  /* 对 sticky/fixed header 追加顶部安全距离 */
}

/* === 3. 底部 Tab — 已有 safe-area-inset-bottom，追加增强 === */
.tab-bar {
  /* 原样式中已有 env(safe-area-inset-bottom)，这里确保 iOS 底部横条不遮挡 */
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}

/* 内容区域底部留出 Tab + 安全区 */
.page-body {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* === 4. 原生平台检测 === */
/* Android 和 iOS 有一些微妙的渲染差异 */
html.platform-ios {
  /* iOS Safari WebView 的回弹效果由 WKWebView 处理 */
  overscroll-behavior: none; /* 禁用双指缩放回弹，让原生处理 */
}

html.platform-android {
  /* Android WebView 可能需要额外的安全区域处理 */
}

/* Capacitor 壳检测 — body 上由 JS 注入类名 */
body.app-shell .page-header {
  padding-top: calc(var(--space-4) + var(--status-bar-height));
}

body.app-shell .tab-bar {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}

/* === 5. 键盘弹出适配 === */
/* 当软键盘弹出时，iOS 会调整 WebView 视口，Android 可能需要手动处理 */
@media (max-height: 500px) {
  .tab-bar {
    display: none; /* 键盘弹出时隐藏 Tab，释放空间 */
  }
}

/* === 6. 暗色模式 + APP 壳 === */
body.dark-mode.app-shell {
  /* 暗色模式下状态栏文字应变为白色 */
  /* 这个效果通过 JS 调用 Capacitor StatusBar 插件实现 */
}

/* === 7. 返回按钮区域增强 === */
/* 对于有 header 的页面，返回按钮左侧需避开安全区域 */
.page-header .back-btn,
.page-header button:first-child {
  margin-left: env(safe-area-inset-left, 0px);
}