/* BoaBite · 首页样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  background: #FAFAFA;
  color: #2b2b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 网页直接填满可用视口；安全区仅用于内容，不在画布外制造留白。 */
.phone {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #FFF9F2;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

/* ===== 视图切换：纯淡入淡出（无位移，保证跨页元素对齐） ===== */
.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.view.active {
  opacity: 1;
  pointer-events: auto;
}


/* 只有桌面鼠标环境保留窄画布；所有手机宽度均铺满，不以 393px 分流。 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .phone {
    width: 393px;
    max-height: 852px;
  }
}

/* ===== 首页（V3 设计稿 · 393×852） ===== */
.view-home { --home-content-lift: clamp(20px, 4dvh, 32px); background: #FAFAFA; }

/* 整屏背景图：铺满画布 */
.hm-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hm-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 顶部品牌区 */
.hm-brand {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hm-logo {
  position: absolute;
  left: calc(15px + var(--safe-left));
  top: calc(16px + var(--safe-top));
  width: 34.1%;
  height: auto;
  display: block;
}

/* 蛇的说话气泡（素材底图 + 眼睛点缀 + 文字） */
.hm-bubble {
  position: absolute;
  left: 8.4%;
  top: calc(29.89% - var(--home-content-lift));
  width: 83.2%;
  aspect-ratio: 327 / 81;
  z-index: 2;
}
.hm-bubble-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hm-bubble-die {
  position: absolute;
  z-index: 2;
  left: 34.88px;
  top: -12px;
  width: 56px;
  height: auto;
}

.hm-bubble-text {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 8px;
  bottom: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Resource Han Rounded CN", "SF Compact Rounded", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  text-align: center;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .28s ease;
}

/* 蛇形态区：设计稿 Group 26 整体素材（蛇身 + 颤抖线 + 口水 + 面部细节，一体展示） */
.hm-snake {
  position: absolute;
  left: 2.54%;
  top: 49.06%;
  width: 93.64%;
  aspect-ratio: 368 / 60;
  z-index: 2;
  animation: breathe 3.4s ease-in-out infinite;
}

.hs-whole {
  display: block;
  width: 100%;
  height: auto;
}
.hs-whole[hidden], .hm-belly-snake[hidden], .hm-belly-toggle[hidden] { display: none; }
.has-fed .hm-bubble { top: calc(16% - var(--home-content-lift)); }
.has-fed .hm-bubble-die { width: 68px; left: 30px; top: -10px; }
.has-fed .hm-snake { top: calc(28% - var(--home-content-lift)); left: 1.5%; width: 97%; height: calc(27% - 27px); animation: none; }
.hm-belly-snake { width: 100%; height: 100%; }
.hm-belly-snake svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-belly-toggle { position: absolute; top: calc(55% - var(--home-content-lift)); left: 50%; transform: translateX(-50%); width: 43.5px; height: 43.5px; padding: 0; border: 0; background: transparent; z-index: 2; cursor: pointer; }
.hm-belly-toggle img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hm-today[hidden] { display: none; }
/* 数据和 CTA 共同排版，避免独立百分比定位压缩设计稿中的留白。 */
.hm-footer { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 40px 0 calc(24px + var(--safe-bottom)); background: #fff; border-radius: 50px 50px 0 0; z-index: 1; }
.view-home:not(.has-fed) .hm-footer { padding-top: 0; gap: 0; background: transparent; border-radius: 0; }
.hm-today { position: relative; width: 100%; }
.hm-today-heading { position: absolute; left: 6%; top: -55px; display: flex; align-items: center; gap: 8px; }
.hm-today-heading img { display: block; width: 115.5px; height: auto; transform: rotate(-4deg); }
.hm-today-heading time { padding: 2px 5px; border: 2px solid #aaa; border-radius: 5px; background: #fff; color: #aaa; font-size: 12px; font-weight: 800; transform: rotate(-4deg); }
.hm-today-stats { width: 84%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; }
.hm-today-stat { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hm-today-stat > span { font-size: 17px; font-weight: 700; color: #aaa; white-space: nowrap; }
.hm-today-value { display: flex; align-items: baseline; gap: 3px; font-family: ui-rounded, "SF Pro Rounded", "SF Compact Rounded", "Resource Han Rounded CN", sans-serif; color: #000; filter: drop-shadow(2px 3px 1px #ddd); text-shadow: -3px -3px #fff, 3px -3px #fff, -3px 3px #fff, 3px 3px #fff; }
.hm-today-value b { font-size: 52px; font-weight: 900; line-height: 1.1; }
.hm-today-value em { font-size: 21px; font-weight: 800; font-style: normal; }

@keyframes breathe { 50% { transform: scale(1.02); } }

/* 投喂落地：吞咽动画（切掉呼吸动画，跑一次 gulp） */
@keyframes gulp {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1.05, .95); }
  55%  { transform: scale(.96, 1.06); }
  100% { transform: scale(1, 1); }
}
.hm-snake.gulping { animation: gulp .6s ease; }

/* 投喂按钮 */
.hm-feed {
  position: relative; flex-shrink: 0;
  width: 61.83%; max-width: 280px; padding: 0; border: none; background: transparent;
  cursor: pointer; z-index: 2; transition: transform .12s ease, opacity .2s ease;
}
.hm-feed img { display: block; width: 100%; height: auto; }
.hm-feed:active { transform: scale(.97); }
.hm-feed:disabled { opacity: .55; cursor: default; }
.hm-feed:disabled:active { transform: scale(1); }

/* ===== 轻提示 ===== */
.toast {
  position: absolute;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(20, 18, 15, 0.88);
  color: #fff;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== 相机拍摄页 ===== */
.view-camera { background: #000; }

.view-camera.analyzing .cam-bubble,
.view-camera.analyzing #camShutter,
.view-camera.analyzing #camAlbum {
  visibility: hidden;
}

/* 第一帧就绪前隐藏取景装饰；拍照定格后继续保留。 */
.view-camera:not(.camera-ready):not(.captured) .cam-bubble,
.view-camera:not(.camera-ready):not(.captured) .cam-overlay {
  visibility: hidden;
}

.cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 2;
}

/* 蛇嘴取景框 */
.cam-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}

.cam-overlay img,
.cf-ring {
  position: absolute;
  top: 19.54%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 91.6%;
  max-height: 58%;
  transform: translateX(-50%);
}

/* 顶部固定气泡（素材底图 + 前端文字） */
.cam-bubble {
  position: absolute;
  top: 8.22%;
  left: 50%;
  transform: translateX(-50%);
  width: 41.86%;
  z-index: 3;
}

.bubble-bg {
  display: block;
  width: 100%;
  height: auto;
}

.cam-bubble span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 9px;
  font-size: 18px;
  font-weight: 700;
  color: #1f1f1f;
  text-align: center;
  line-height: 1.35;
}

.cam-landscape-message { display: none; }

/* 底部操作栏 */
.cam-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21.6%;
  background: #fff;
  border-radius: 50px 50px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13.7% max(12px, var(--safe-bottom));
  z-index: 4;
}

.cam-act {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, opacity .2s ease;
}

.cam-act img { width: 30px; height: 30px; }
.cam-act:active { transform: scale(.88); opacity: .6; }
.cam-act-ghost { pointer-events: none; }

.cam-shutter {
  width: 82px;
  height: 82px;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease;
}

.cam-shutter img { width: 82px; height: 82px; }
.cam-shutter:active { transform: scale(.9); }

/* 相机不可用时：保持暗色底 + 蛇嘴取景框 + 顶部气泡，走相册/系统相机入口 */

/* ===== 照片确认页（抠像确认 · 蛇衔圆环） ===== */
.view-confirm { background: #F4F1EA; }
.view-confirm.revealing { background: transparent; pointer-events: none; }
.view-confirm.revealing .cf-paper,
.view-confirm.revealing .cf-ring-wrap,
.view-confirm.revealing .cf-photo-layer { visibility: hidden; }
.view-confirm.revealing * { pointer-events: none; }

.cf-name-bubble {
  position: absolute;
  top: 8.22%;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  z-index: 4;
}
.cf-name-bubble img { display: block; width: 100%; height: auto; }
.cf-name-bubble input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.cf-name-bubble input:focus,
.cf-name-bubble input:focus-visible { outline: none; box-shadow: none; }

.cf-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 照片层：与相机页 cam-demo-bg / cam-shot 完全同构，仅加圆形裁切 */
.cf-photo-layer {
  z-index: 1;
}

/* 透明主体放入蛇嘴内，确认页与投食状使用同一构图。 */
.cf-photo-layer.cutout {
  position: absolute;
  left: 14%;
  top: 29%;
  width: 72%;
  height: 36%;
  object-fit: contain;
  /* 蛇环素材内圆为不透明白色，主体必须显示在蛇环上方。 */
  z-index: 3;
  pointer-events: none;
}

.cf-photo-layer.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 28px));
  width: 86%;
  height: auto;
  clip-path: circle(148px at 50% 50%);
}

.cf-photo-layer.full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: circle(148px at 50% calc(50% - 28px));
}

/* 蛇衔圆环：与相机页蛇嘴 overlay 同构（原位变化，无位移） */
.cf-ring-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

/* 底部白色操作区 */
.cf-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21.6%;
  background: #fff;
  border-radius: 50px 50px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13.7% max(12px, var(--safe-bottom));
  box-shadow: 0 -8px 30px rgba(80, 60, 30, 0.06);
  z-index: 2;
}

.cf-retry {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease;
}

.cf-retry img { width: 36px; height: 36px; }
.cf-retry:active { transform: scale(.88); }

.cf-ok {
  width: 82px;
  height: 82px;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease;
}

.cf-ok img { width: 82px; height: 82px; }
.cf-ok:active { transform: scale(.9); }

.cf-ghost { width: 44px; pointer-events: none; }

/* 快门后的照片层：默认与实时取景同位同尺寸（满屏 cover），保持构图不变 */
.cam-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 1;
}

.cam-shot[hidden] { display: none; }
.view-camera.captured .cam-video { visibility: hidden; }

/* 演示路径：与演示背景同位同尺寸（卡片式） */
.cam-shot.card {
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - 28px));
  width: 86%;
  height: auto;
  border-radius: 20px;
}

/* ===== 投食状页（点✓后 · 蛇衔圆环原位 + 原因输入） ===== */
.view-pledge { background: #F0EDEA; }

/* 投食状采用设计稿 393 × 852 的比例，避免与确认页的蛇头尺寸互相影响。 */
.view-pledge .cf-ring { top: 19.54%; max-width: 77.35%; max-height: 40%; }
.view-pledge .cf-photo-layer.cutout { left: 19%; top: 31%; width: 62%; height: 24%; }
.rs-bubble {
  position: absolute; top: 7.28%; left: 50%; transform: translateX(-50%);
  width: 78.25%; z-index: 4;
}
.rs-bubble span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 12px 11px; font-size: 17px; font-weight: 700;
  color: #000; text-align: center; white-space: nowrap;
}
.rs-body { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rs-editor { position: absolute; inset: 0; }
.rs-lead {
  position: absolute; top: 64.7%; width: 100%; text-align: center;
  font-size: 16px; font-weight: 700; color: #333; line-height: 1.5;
}
.rs-input-box {
  position: absolute; left: 7.38%; top: 68.66%; width: 85.75%; height: 12.15%;
  background: url("design/assets/pledge-input.png") center / 100% 100% no-repeat;
  padding: 15px 21px; pointer-events: auto;
}
.rs-input-box textarea {
  display: block; width: 100%; height: 100%; border: none; outline: none;
  resize: none; background: none; font-family: inherit; font-size: 17px;
  font-weight: 600; line-height: 1.5; color: #222;
}
.rs-input-box textarea::placeholder { color: #d5d5d5; }
.rs-input-box textarea:focus::placeholder { color: transparent; }
.rs-actions {
  position: absolute; left: 9.54%; bottom: calc(24px + var(--safe-bottom)); width: 80.92%;
  display: flex; gap: 4.45%; pointer-events: auto;
}
.rs-btn {
  flex: 1; min-width: 0; border: none; background: none; cursor: pointer;
  padding: 0; transition: transform .12s ease;
}
.rs-btn img { display: block; width: 100%; height: auto; }
.rs-btn:active { transform: scale(.96); }

/* Freeze the original canvas; the keyboard moves only this white editor panel. */
.phone.pledge-editing {
  position: fixed; left: var(--pledge-left); top: var(--pledge-top);
  width: var(--pledge-width); height: var(--pledge-height); max-height: none;
}
.pledge-editing .rs-editor {
  inset: auto 0 auto; top: var(--pledge-visible-height); height: auto;
  transform: translateY(-100%); display: flex; flex-direction: column; gap: 14px;
  padding: 16px 0 22px; background: #fff; pointer-events: auto;
}
.pledge-editing .rs-editor::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(24px, calc(var(--pledge-visible-height) - 320px), 120px);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff);
  pointer-events: none;
}
.pledge-editing .rs-lead { position: static; color: #8c8c8c; }
.pledge-editing .rs-input-box {
  position: relative; left: auto; top: auto; margin: 0 auto;
  height: 104px; flex: none;
}
.pledge-editing .rs-actions { visibility: hidden; pointer-events: none; }

/* ===== 品鉴加载动画页（马上喂后 · r1） ===== */
.view-eatload { background: #F0EDEA; }

.el-box {
  position: absolute; left: 50%; top: 29%; width: 72.5%;
  transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 18px;
}
.el-canvas { width: 100%; }
.el-illustration { display: block; width: 100%; height: auto; }
.el-text { font-size: 20px; font-weight: 700; color: #000; text-align: center; }

/* ===== 品鉴结果页（r2） ===== */
.view-result { background: #F0EDEA; }

.share-btn { position: absolute; top: calc(16px + var(--safe-top)); right: calc(5.4% + var(--safe-right)); width: 43px; height: 43px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 4; }
.share-btn img { display: block; width: 100%; }
.share-btn:active { transform: scale(.96); }
.tk-snake { position: absolute; top: 10.5%; left: 1.5%; width: 97%; height: 19%; z-index: 1; }
.tk-snake svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tk-face { position: absolute; top: 29.8%; left: 50%; transform: translateX(-50%); width: 43.5px; height: 43.5px; padding: 0; border: 0; background: transparent; z-index: 2; cursor: pointer; }
.tk-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tk-sleeping-snake, .tk-sleep-bubble { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .view-result.active .tk-sleeping-snake, .view-home.active .tk-sleeping-snake { animation: tk-sleep-breath 4.8s ease-in-out infinite; }
  .view-result.active .tk-sleep-bubble, .view-home.active .tk-sleep-bubble { animation: tk-sleep-bubble 4.8s ease-in-out infinite; }
}
@keyframes tk-sleep-breath { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(1.012); } }
@keyframes tk-sleep-bubble { 0%, 100% { transform: scale(.85) rotate(-4deg); opacity: .72; } 45% { transform: scale(1.08) rotate(3deg); opacity: 1; } }
.tk-card { position: absolute; inset: 39% 0 0; background: #fff; border-radius: 50px 50px 0 0; z-index: 3; }
.tk-handle { position: absolute; top: 2%; left: 43.5%; width: 13%; height: 5px; border-radius: 5px; background: #ebebeb; }
.tk-review { position: absolute; left: 8.65%; top: 9.2%; width: 84.1%; height: 39%; }
.tk-review img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tk-review p { position: absolute; inset: 29% 7% 11% 5.6%; overflow-y: auto; font-size: 18px; font-weight: 700; line-height: 1.45; color: #000; }
.tk-stats { position: absolute; left: 9.5%; top: 53.8%; width: 81%; display: flex; gap: 12px; }
.tk-stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tk-label { font-size: 17px; font-weight: 700; color: #888; }
.tk-value { display: flex; align-items: baseline; gap: 3px; color: #000; filter: drop-shadow(2px 3px 1px #ddd); text-shadow: -3px -3px #fff, 3px -3px #fff, -3px 3px #fff, 3px 3px #fff; }
.tk-value b { font-size: 44px; font-weight: 900; line-height: 1.1; }
.tk-value em { font-size: 21px; font-weight: 800; font-style: normal; }
.tk-stat:last-child .tk-value b { white-space: nowrap; }
.tk-emoji { font-size: 33px; }
.tk-actions { position: absolute; left: 9.54%; bottom: calc(24px + var(--safe-bottom)); width: 80.92%; display: flex; gap: 4.45%; }

/* 图片分析：全画面点阵扫描，完成后纸纹吸收背景。 */
.analysis-dots, .analysis-paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 2;
}
.analysis-dots {
  overflow: hidden;
  background-image: radial-gradient(circle, rgba(255,255,255,.44) .8px, transparent 1.2px);
  background-size: 17px 17px;
}
.analysis-scan {
  position: absolute;
  inset: -65% 0 auto;
  height: 65%;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.045) 20%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.045) 80%, transparent 100%);
  animation: photoScan 3.6s linear infinite;
}
.view-camera.analyzing.captured:not(.developing):not(.analysis-failed) .analysis-dots { visibility: visible; }
@keyframes photoScan { to { transform: translateY(255%); } }
.analysis-paper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: circle(0% at 50% 50%);
}
.analysis-yellow {
  position: absolute;
  top: 19.54%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 91.6%;
  max-height: 58%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.analysis-subject {
  position: absolute;
  left: 14%;
  top: 29%;
  width: 72%;
  height: 36%;
  object-fit: contain;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.view-camera.developing .analysis-paper,
.view-camera.developing .analysis-yellow,
.view-camera.developing .analysis-subject { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .analysis-scan { animation: none; top: 35%; }
}

.el-back { position: absolute; top: calc(16px + var(--safe-top)); left: calc(4.83% + var(--safe-left)); width: 42px; height: 42px; z-index: 4; padding: 0; border: 0; background: transparent; cursor: pointer; }
.el-back img { display: block; width: 100%; height: 100%; object-fit: contain; }
.el-back:active { transform: scale(.96); }


/* Only failures show recovery actions; processing uses the original scan animation. */
.analysis-controls {
  position: absolute; left: 6%; right: 6%; bottom: 25%; z-index: 6;
  padding: 16px; border-radius: 18px; background: #f0edea; color: #171710;
  text-align: center; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere;
}
.analysis-controls[hidden], .processing-actions button[hidden], .processing-retry[hidden] { display: none; }
.processing-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.processing-actions button, .processing-retry {
  min-height: 44px; padding: 10px 16px; border: 2px solid #171710; border-radius: 24px;
  background: #fff; color: #171710; font: inherit; font-weight: 700; cursor: pointer;
}
.view-camera.analyzing .cam-bar { z-index: 7; }
.processing-actions button:focus-visible, .processing-retry:focus-visible { outline: 3px solid #275e31; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .analysis-scan { animation: none; } }

/* 微信导航会压缩可用高度；较矮窗口优先保证底部操作与记录可读。 */
@media (max-height: 700px) {
  .has-fed .hm-footer { padding-top: 32px; }
  .hm-today-heading { top: -47px; }
  .has-fed .hm-snake { height: calc(23% - 27px); }
  .hm-belly-toggle { top: calc(48% - var(--home-content-lift)); }
  .hm-today-stat { gap: 8px; }
  .hm-today-stat > span, .tk-label { font-size: 15px; }
  .hm-today-value b { font-size: 42px; }
  .tk-stat { gap: 6px; }
  .tk-stats { top: 50%; }
  .tk-value b { font-size: 32px; }
  .tk-value em { font-size: 18px; }
  .tk-review p { font-size: 16px; }
}

/* 手机误转横屏时暂停拍摄引导：保留白色底栏，只显示转回竖屏的气泡。 */
@media (orientation: landscape) and (max-height: 600px) {
  .view-camera .cam-overlay { display: none; }
  .view-camera .cam-bar button { display: none; }

  .view-camera .cam-bubble,
  .view-camera.analyzing .cam-bubble,
  .view-camera:not(.camera-ready):not(.captured) .cam-bubble {
    top: 8.22%;
    width: 42%;
    min-width: 260px;
    max-width: 440px;
    visibility: visible;
  }

  .view-camera .cam-portrait-message { display: none; }
  .view-camera .cam-landscape-message {
    display: flex;
    padding: 0 12px 9px;
    font-size: 18px;
    line-height: 1.35;
  }
}