/* 瞬时AI · 占位样式(§9 详细样式由任务 13 完成) */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* 100vh 兜底 + 100dvh 优先;dvh 在老 webview 不支持时回退到 vh */
  height: 100vh;
  height: 100dvh;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
}

#stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  position: relative;
}

section[data-screen] {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
}

/* 用 body[data-state] 控制当前显示哪个 section,ui.js(任务 13)负责切换 */
body[data-state="loading-models"] section[data-screen="loading-models"],
body[data-state="ready"]           section[data-screen="ready"],
body[data-state="camera-on"]       section[data-screen="camera-on"],
body[data-state="countdown"]       section[data-screen="countdown"],
body[data-state="processing"]      section[data-screen="processing"],
body[data-state="result"]          section[data-screen="result"] {
  display: flex;
}

.big-text { font-size: 28px; font-weight: 600; }
.huge-number { font-size: 200px; font-weight: 700; line-height: 1; }
.hint { font-size: 14px; opacity: 0.7; margin-top: 16px; }

/* 按钮占位 */
.primary-btn {
  margin-top: 32px;
  padding: 16px 48px;
  font-size: 20px;
  font-weight: 600;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}
.secondary-btn {
  padding: 12px 32px;
  font-size: 16px;
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}
.shutter-btn {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 40px);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255, 255, 255, 0.4);
  background-clip: padding-box;
}

/* 摄像头预览(占位:实际尺寸由 camera.js 控制) */
#camera-view {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 微信引导遮罩(§4.4) */
#wechat-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#wechat-mask[hidden] { display: none; }
.mask-inner { text-align: center; font-size: 18px; line-height: 1.8; }

/* 成片图占位 */
#result-image-wrap { width: 100%; max-width: 480px; }
#result-image-wrap img { width: 100%; height: auto; display: block; border-radius: 8px; }
.result-actions { margin-top: 24px; }