/* ============================================================
   移动端适配 —— 前台与后台共用
   关注点：iOS Safari 特性、触摸目标尺寸、窄屏布局、安全区
   ============================================================ */

/* ---------- 1. iOS Safari 修正 ---------- */

/* iOS 上 background-attachment: fixed 表现异常（背景会被拉伸/随页滚动），
   桌面那套 fixed 背景不能直接搬到移动端。

   但简单改成 scroll 会踩另一个坑：基础样式里 html, body 是 height:100%，
   背景改画在 body 盒子上后，body 高度只等于「一屏」（如 844px），
   而文档实际有 1243px —— 往下滚就会露出没有背景的空白区。

   所以这里两步一起做：
   1) 高度改成 min-height，让 body 能被内容撑开（背景随之延伸）
   2) 背景挪到 fixed 定位的伪元素上，始终铺满视口，
      既不依赖 background-attachment（iOS 有 bug），也不会露白 */
@media (max-width: 900px) {
  html, body { height: auto; min-height: 100%; }

  body {
    background: var(--bg);
    background-attachment: scroll;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    /* 与桌面端 body 的背景保持一致 */
    background:
      radial-gradient(1200px 700px at 80% -10%, #1a2a55 0%, transparent 60%),
      radial-gradient(900px 600px at 10% 10%, #23204a 0%, transparent 55%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  }
}

/* iOS Safari 地址栏收缩时，100vh 会大于实际可视高度，底部被截掉。
   用 100dvh（动态视口高度）修正，老浏览器回退到 100vh。 */
@supports (height: 100dvh) {
  @media (max-width: 900px) {
    html, body { min-height: 100dvh; }
  }
}

/* iOS/iPadOS 聚焦输入框时，字号 < 16px 会触发页面自动放大——
   表现为"点一下输入框，整个页面突然放大且不会缩回"。
   只有可编辑的文本类输入会触发，select / radio / checkbox 不会。
   这里不限定屏幕宽度：iPad 横屏有 1024px 宽，但同样是触摸设备、同样会缩放。
   16px 的输入框在桌面端也更好读，所以直接全局统一。 */
.field input, .search input, #q, #mineInput, #rSearch, #oSearch,
#view-mine .card > input, .login-card input, textarea {
  font-size: max(16px, 1em);
}

/* 日期输入在 iOS 上右侧会留出原生指示器，补点右内边距 */
@media (max-width: 900px) {
  input[type="date"] { padding-right: 8px; }
}

/* ---------- 2. 触摸目标 ---------- */
/* Apple / Material 规范建议最小 44px。这里把可点区域撑到 44px，
   视觉上的小控件（如复选框）本身不变大，靠 label 的 padding 扩大热区。 */
@media (max-width: 900px) {
  /* 复选框 / 单选框本体放大，且外层的 label 撑满一行 */
  input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .check {
    min-height: 44px;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
  }
  .check input { margin-top: 0; }

  /* 支付方式选择：整块可点 */
  .channel-opt {
    min-height: 48px;
    padding: 14px 15px;
  }

  /* 品牌是返回首页的可点链接，撑到 44px */
  .topbar .brand { min-height: 44px; display: inline-flex; align-items: center; }

  /* 顶栏导航按钮 */
  .topbar nav button { min-height: 44px; }
  /* select 不走 iOS 聚焦缩放，14px 兼顾顶栏空间与可读性 */
  .lang-select { min-height: 44px; font-size: 14px; padding: 8px 10px; }

  /* 完成页的找回链接（原来是 29px 高的裸 a 标签） */
  .done .tip a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 2px;
  }

  /* 印记卡片里的加载更多 / 分页 */
  #moreBtn, .pager button { min-height: 42px; }
}

/* ---------- 3. 顶栏：窄屏不再挤成一团 ---------- */
/* DOM 顺序为 brand → nav → select；宽屏下视觉顺序一致，无需 order */
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 16px;
    /* 兼容 iPhone 顶部灵动岛 / 刘海 */
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  /* 品牌与语言选择器同处第一行，导航另起一行并横向滚动 */
  .topbar .brand { font-size: 16px; flex: 1 1 auto; min-width: 0; }
  /* nav 排到最后，这样品牌与语言选择器同处第一行（space-between 分列两端） */
  .topbar nav { order: 1; }
  /* 导航独占一行并横向滚动：不换行，否则顶栏会被撑到 170px+，吃掉首屏 */
  .topbar nav {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav button { flex: 0 0 auto; padding: 8px 13px; }
  .lang-select { flex: 0 0 auto; max-width: 118px; }
}

/* 超窄屏（iPhone SE 等）：品牌名允许换行，避免和语言选择器打架 */
@media (max-width: 360px) {
  /* 超窄屏：品牌名允许截断，保证语言选择器不被挤出视口 */
  .topbar .brand {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0%;
  }
  .lang-select { max-width: 104px; font-size: 13px; flex: 0 0 auto; }
}

/* ---------- 3.5 最近来过：按手机分辨率适配 ---------- */
/* 依据常见机型宽度分档：
   - ≥760px（平板竖屏 / 大屏手机横屏）：3 列
   - 640–760px：2 列
   - 390–640px（iPhone 14/15、主流安卓）：2 列，缩间距
   - <390px（iPhone SE / 小屏安卓）：1 列，避免两列挤成一团  */
@media (max-width: 760px) {
  .latest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .latest h2 { margin-bottom: 12px; }
}

@media (max-width: 640px) {
  /* 卡片内部收紧，两列也能放下「生于 1996年 · 双子座 · 30岁」。
     关键：把「标签 → 值」从左右并排改成上下两行，值就能占满卡片宽度，
     否则 170px 的窄列会把这行挤成三行。 */
  .record-card { padding: 14px; border-radius: 14px; }
  .rc-name { font-size: 17px; margin: 4px 0 8px; }
  .rc-meta { font-size: 12.5px; gap: 1px; flex-direction: column; }
  .rc-meta i { min-width: 0; font-size: 11.5px; opacity: .75; }
  .latest-list { gap: 10px; }
}

/* 超小屏（≤370px，如 iPhone SE / 老旧安卓）：单列更舒展 */
@media (max-width: 370px) {
  .latest-list { grid-template-columns: 1fr; gap: 10px; }
  .record-card { padding: 13px; }
  .rc-name { font-size: 16px; }
}

/* 横屏矮屏：高度紧张，两条一行更省纵向空间 */
@media (max-height: 480px) and (orientation: landscape) {
  .latest-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .record-card { padding: 10px 12px; }
  .rc-name { font-size: 15px; margin: 2px 0 5px; }
}

/* ---------- 4. 内容区 ---------- */
@media (max-width: 640px) {
  main { padding: 24px 16px 60px; }

  /* 统计区在窄屏改为两列，避免堆成四行 */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 14px 12px; }
  .stat b { font-size: 22px; }

  /* 印记墙单列 */
  .grid { grid-template-columns: 1fr; }

  /* 卡片信息：字号提升到 12px 以上，11px 在手机上偏小 */
  .tag { font-size: 12px; padding: 3px 10px; }
  .rc-seq { font-size: 12px; }

  /* 按钮全宽更好按 */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .form-actions .btn { width: 100%; }
  .form-actions { flex-direction: column; }

  /* 支付预览行：窄屏改为上下堆叠，避免右侧内容被挤压 */
  .preview .row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; }
  .preview .row b { text-align: left; }

  /* 搜索框整行 */
  .search { flex-direction: column; align-items: stretch; }
  .search input { width: 100%; }
  .search button { width: 100%; }

  /* 页脚留白，避免被 iPhone 底部横条盖住 */
  footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* 首屏标题在窄屏收一档，避免过长换行 */
@media (max-width: 400px) {
  .hero h1 { font-size: clamp(30px, 9vw, 44px); }
  .eyebrow { letter-spacing: .28em; font-size: 12px; }
}

/* ---------- 5. 后台：手机上看数据 ---------- */
@media (max-width: 760px) {
  .admin-bar {
    gap: 10px;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  .admin-brand { font-size: 15px; }
  .tabs { flex: 1 1 100%; order: 3; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; min-height: 44px; }
  /* 顶栏右侧：前台链接与退出按钮撑到 44px */
  .admin-right .btn, .admin-right a.btn, .admin-right .who { min-height: 44px; display: inline-flex; align-items: center; }
  .admin-right { order: 2; }

  .admin-main { padding: 20px 16px 60px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

  /* 统计卡两列 */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card b { font-size: 22px; }

  /* 图表单列；SVG 按比例缩放，不会溢出 */
  .charts { grid-template-columns: 1fr; }
  .chart-card { padding: 14px; }

  /* 工具栏换行铺满 */
  .toolbar input, .toolbar select { flex: 1 1 100%; min-width: 0; }
  .toolbar .btn { flex: 1 1 auto; min-height: 44px; }
  /* 状态标签 11.5px 在手机上偏小 */
  .pill { font-size: 12px; padding: 3px 11px; }

  /* 表格横向滚动（容器已有 overflow-x:auto），这里给出视觉提示与最小列宽 */
  .grid-table { min-width: 720px; font-size: 12.5px; }
  .table-wrap { border-radius: 12px; }
  .msg-cell { max-width: 160px; }
}

/* ---------- 6. 横屏 / 矮屏 ---------- */
/* 手机横屏时高度有限，压缩纵向留白，避免要滚很久 */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 12px 0 20px; }
  .hero h1 { font-size: clamp(26px, 6vw, 40px); }
  main { padding-top: 16px; padding-bottom: 30px; }
  .topbar { padding-top: 8px; padding-bottom: 8px; }
  .login-wrap { min-height: auto; padding: 16px; }
}

/* ---------- 7. 降低动效（省电 / 用户偏好） ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 8. 触摸反馈 ---------- */
@media (hover: none) {
  /* 触屏设备没有 hover，避免 sticky hover 残留 */
  .topbar nav button:hover, .btn.ghost:hover, .tabs button:hover { background: transparent; }
  .btn:active, .topbar nav button:active, .tabs button:active { opacity: .75; }
  /* 移除光标态，触屏上无意义 */
  .channel-opt:hover { border-color: var(--line); }
  .channel-opt:active { border-color: var(--gold); }

  /* 爱心：触屏没有 hover，点击后颜色会「粘」在红色上，改回中性
     （已点过的 .on 仍保持红心，那是状态不是悬停） */
  .rc-like:hover { color: var(--muted); background: none; }
  .rc-like.on:hover { color: #ff5d7a; }
  .rc-like:active { background: rgba(255, 107, 133, .14); }
  .rc-like.on:active { background: rgba(255, 93, 122, .18); }
}

/* ---------- 9. 爱心按钮：手指热区 ----------
   图标 17px、按钮盒 26px，在手机上（两列卡片约 166px 宽）很容易点偏。
   Apple HIG 建议 ≥44×44、Material 建议 48×48：这里用伪元素把命中区
   扩到 44×44，视觉大小与布局占位都不动，卡片不会被撑开。 */
@media (hover: none), (pointer: coarse) {
  .rc-like { position: relative; touch-action: manipulation; }
  .rc-like::after {
    content: '';
    position: absolute;
    top: -9px; right: -9px; bottom: -9px; left: -9px; /* 26 + 9×2 = 44 */
    border-radius: 999px;
  }
  /* 触屏上图标略放大一点，17px 在 3x 屏上偏细 */
  .rc-like svg { width: 18px; height: 18px; }
}

/* ---------- 6. 隐私策略页（手机）---------- */
@media (max-width: 900px) {
  .privacy-doc {
    max-height: 38vh;
    padding: 4px 10px 4px 2px;
    margin-bottom: 10px;
  }
  .pv-sec { padding: 12px 0; }
  .pv-sec h3 { font-size: 13.5px; }
  /* 手机上正文提到 14.5px：13.5px 在小屏偏密。
     （iOS 只对输入框强制 16px，正文不受自动缩放影响） */
  .pv-body { font-size: 14.5px; line-height: 1.8; }
  .pv-check { margin-top: 14px; }
}

/* ---------- 6.1 条款页：整屏装下，勾选框永远看得见 ----------
   老问题：文档区「限高 + 内部滚动」，勾选框排在它下面。
   手指在文档区里划，滚的是文档区（overscroll-behavior: contain 还不让滚动
   传给页面），于是页面纹丝不动，勾选框一直待在屏幕外——用户会以为
   「读完了也勾不上」。
   改法：本页把 body 变成 100dvh 的弹性列，文档区吃掉顶栏与底栏之间全部
   剩余高度，勾选框 / 错误提示 / 按钮都在文档区下方且始终留在屏内。
   只在够高的屏启用；<520px 的横屏手机仍用后面的吸底方案，
   免得文档区被压到只剩两三行。 */
@media (max-width: 900px) and (min-height: 520px) {
  body.pv-mode {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;              /* 支持就用动态视口，避开 iOS 地址栏 */
    overflow: hidden;            /* 页面本身不滚：滚动只发生在文档区里 */
  }
  body.pv-mode .topbar { flex: 0 0 auto; padding: 10px clamp(12px, 4vw, 20px); }
  body.pv-mode footer { display: none; }   /* 页脚会把这一屏顶出去，本页不需要 */
  body.pv-mode main {
    flex: 1 1 auto;
    min-height: 0;               /* 关键：否则弹性子项不肯缩，文档区会撑破屏幕 */
    width: 100%;
    padding: 10px 12px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;            /* 兜底：极大字号时也只让 main 让一让，不裁掉按钮 */
  }
  body.pv-mode main > .view#view-privacy {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.pv-mode #view-privacy .card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 0;
    border-radius: 18px;
  }
  body.pv-mode #view-privacy .card > h2 { flex: 0 0 auto; margin: 0 0 2px; font-size: 20px; }
  body.pv-mode #view-privacy .card > .sub {
    flex: 0 0 auto;
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
  }
  /* 文档区不再限高：能吃多少吃多少，最少留 96px（约两行），不会缩成一条缝 */
  body.pv-mode .privacy-doc {
    flex: 1 1 auto;
    min-height: 96px;
    max-height: none;
    margin: 0 0 8px;
  }
  body.pv-mode .pv-scroll-hint { flex: 0 0 auto; margin: 0 0 6px; font-size: 12px; }
  body.pv-mode .pv-check { flex: 0 0 auto; margin: 6px 0 8px; }
  body.pv-mode #privacyError { flex: 0 0 auto; margin: 0 0 6px; }
  /* 按钮改成卡片底部常驻的一行：不再 sticky（吸底会盖住勾选框） */
  body.pv-mode #view-privacy .form-actions {
    position: static;
    flex: 0 0 auto;
    margin: 0 -16px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, .16);
    /* 卡片圆角是 18px，这一行铺到卡片边缘，底部两角要跟着圆，否则会露出方角 */
    border-radius: 0 0 18px 18px;
  }
  body.pv-mode #view-privacy .form-actions .btn { flex: 1 1 auto; min-height: 44px; }
}

/* 矮屏（横屏手机等）进一步压缩 */
/* 生日三个下拉：手机上要保证点得到、不换行、不溢出 */
@media (max-width: 900px) {
  .bday { gap: 7px; }
  .bday select {
    /* 16px 是 iOS Safari 的临界值：小于它聚焦时会自动放大页面 */
    font-size: 16px;
    /* 44px 是主流规范建议的最小可点区域高度 */
    min-height: 44px;
    padding: 10px 8px;
  }
}
@media (max-width: 360px) {
  .bday { grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; }
  .bday select { font-size: 15px; padding: 10px 6px; }
}

@media (max-height: 640px) {
  .privacy-doc { max-height: 34vh; }
  .pv-body { font-size: 13.5px; }
}

/* 底部安全区 + 按钮吸底 */
@media (max-width: 900px) {
  #view-privacy .form-actions {
    /* 手机上正文很长（约 1400px），按钮原本落在首屏之外。
       改成吸底常驻：滚到哪儿都能点到「同意 / 不同意」，
       也避免"读完了却找不到按钮"。 */
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 10px -18px -18px;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
}

/* ---------- 想说的话 + 定时显示（窄屏） ---------- */
@media (max-width: 640px) {
  /* iOS 在字号 <16px 时会在聚焦瞬间放大页面，textarea 尤其明显 */
  .field textarea { font-size: 16px; min-height: 96px; }
  .msg-hint { flex-direction: column; gap: 2px; }
  .msg-count { align-self: flex-end; }

  /* 一句话排不下「将于 … 显示」：把年月日时单独占一行，2×2 等分。
     每个格子里仍然带着量词（年/月/日/时），否则四个数字并排分不清 */
  .sched-line { display: block; }
  .sched-lead, .sched-tail { display: inline; }
  .sched-picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 8px 0 2px;
    gap: 6px 10px;
  }
  .sched-picks .pick { width: 100%; }
  .sched-picks select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 4px;
    font-size: 15px;
    text-align: center;
  }
  .sched-line .unit { font-size: 12px; margin-right: 0; }
  .mine-msg { padding: 14px 15px; }
  /* 手机上也要保住"信纸 vs 封条"的形态差：
     封条上下留白多一点（居中的图标+两行字需要呼吸），信纸左右收紧（一屏能多放几个字） */
  .mine-msg.locked, .mine-msg.burned { padding: 18px 15px 20px; }
  .mine-msg.has-text { padding: 17px 16px 18px; }
  .mine-msg.has-text::after { font-size: 44px; right: 10px; }
  /* 这里必须再写一遍 RTL：上面的 right:10px 会盖掉 style.css 里的
     `right:auto; left:16px`，结果是 left 和 right 同时生效（引号被拉成一条），
     阿拉伯语下那个大引号还会跑回右边 */
  [dir="rtl"] .mine-msg.has-text::after { right: auto; left: 10px; }
  .mine-msg-ico { width: 38px; height: 38px; font-size: 16px; margin-bottom: 10px; }
  .mine-msg-ico svg { width: 18px; height: 18px; }
  .mine-msg-body { font-size: 15px; line-height: 1.9; }
  .mine-msg.has-text .mine-msg-body { font-size: 15.5px; line-height: 2; }
}