/* v60 — 移动端体验补丁
   断点: <= 720px (主站 980 偏宽,主站还会触发单栏)
   目标: 顶栏不挤 / nav 多列网格 / 卡片留白合理 / 触摸目标 ≥44px / iOS 安全区
*/

/* ---------- 通用基线 ---------- */
@media (max-width: 980px) {
  /* 让 .app 真的单栏 */
  .app {
    grid-template-columns: 1fr !important;
    grid-template-areas: "brand" "main" "side-left" "side-right" "footer" !important;
    gap: 0 !important;
  }

  /* 顶部 brand 改成上下两行 */
  .brand {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px 5vw 14px !important;
    gap: 10px !important;
    border-bottom: var(--hairline);
  }
  .brand-left { text-align: left; }
  .brand-name { font-size: 22px !important; }
  .brand-cn   { font-size: 18px !important; letter-spacing: .2em !important; }
  .brand-meta { font-size: 11px !important; }
  .auth-area {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 14px !important;
    justify-content: flex-start !important;
    padding-top: 4px;
    border-top: 1px dashed rgba(60,50,40,0.08);
    margin-top: 6px;
  }
  .auth-area > a {
    margin: 0 !important;
    padding: 6px 0 !important;
    font-size: 11.5px !important;
    letter-spacing: .15em !important;
    border: none !important;
  }

  /* nav 列表两列网格,12 项原本 12 行 → 6 行 */
  .side-left { padding: 18px 5vw 24px !important; border: none !important; }
  .nav-label { margin: 14px 0 10px !important; font-size: 11px !important; letter-spacing: .35em !important; }
  .nav-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }
  .nav-item {
    padding: 11px 0 !important;
    border-bottom: var(--hairline);
    min-height: 44px;
  }
  .nav-item::before { display: none; }
  .nav-cn   { font-size: 14.5px !important; letter-spacing: .18em !important; }
  .nav-tip  { font-size: 10.5px !important; letter-spacing: .15em !important; margin-top: 2px !important; }

  /* me-card 横向 */
  .me-card {
    margin-top: 22px !important;
    padding: 16px 14px !important;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    text-align: left !important;
    align-items: center;
  }
  .me-card .me-flower { width: 56px; height: 56px; }
  .me-card .me-name   { margin: 0 !important; font-size: 15px !important; }
  .me-card .me-handle { margin: 2px 0 0 !important; }
  .me-card .me-stats {
    grid-column: 1 / -1;
    margin-top: 12px !important;
    border-top: var(--hairline);
    padding-top: 10px;
  }

  /* 右 aside 收起到正常文档流 */
  .side-right {
    padding: 16px 5vw !important;
    border: none !important;
    border-top: var(--hairline) !important;
  }
  .aside-section { margin-bottom: 22px; }
  .aside-label { margin-bottom: 12px !important; }
  .omen { padding: 18px 16px !important; }
  .omen-title { font-size: 22px !important; letter-spacing: .25em !important; }
  .omen-body  { font-size: 13px !important; line-height: 1.85 !important; }

  /* === 匿名匹配 (主站) 入口 — 移动端 === */
  .anon-match-box {
    padding: 18px 14px !important;
    border-radius: 6px;
  }
  .anon-match-cta {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    letter-spacing: .2em !important;
    background: #1F1F1F;
    color: #FDFBF6;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
  }
  .anon-match-cta:hover { background: #A8201A; }
  .anon-match-note {
    font-size: 11px !important;
    color: #8B8275;
    margin-top: 10px;
    line-height: 1.7;
    text-align: center;
  }

  /* === AI 角色 (主站) — 移动端 === */
  .ai-char-list { gap: 8px !important; }
  .ai-char-list a {
    padding: 8px 10px !important;
    border-radius: 6px;
  }
  .ai-char-list .av {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
  .ai-char-list .nm {
    font-size: 13.5px !important;
  }
  .ai-char-list .ti {
    font-size: 10.5px !important;
  }

  /* hero 给小屏 */
  .hero { min-height: auto !important; padding: 48px 5vw 36px !important; }
  .hero-title { font-size: clamp(24px, 6.4vw, 32px) !important; line-height: 1.55 !important; }

  /* feed 卡片 */
  .post {
    padding: 22px 18px !important;
    margin: 0 5vw 18px !important;
  }
  .post-author { font-size: 16px !important; }
  .post-body p { font-size: 15px !important; line-height: 1.92 !important; }
  .post-quote  { font-size: 14px !important; padding-left: 12px !important; }
  .post-image  { height: 180px !important; margin: 16px -2px !important; }
  .post-foot   {
    flex-wrap: wrap;
    gap: 14px 22px !important;
    padding-top: 12px !important;
    margin-top: 16px !important;
    font-size: 12px !important;
    letter-spacing: .18em !important;
  }
  .post-foot-end { margin-left: 0; }

  /* section-head 缩 */
  .section-head { margin: 18px 5vw 16px !important; padding-bottom: 12px !important; }
  .section-title { font-size: 17px !important; letter-spacing: .25em !important; }
  .section-action { font-size: 11px !important; letter-spacing: .25em !important; }

  /* draw-banner */
  .draw-banner { margin: 14px 5vw !important; padding: 18px 16px !important; }
  .draw-banner-row { flex-direction: column; gap: 14px; align-items: stretch !important; }
  .draw-banner-btn { width: 100%; padding: 12px 14px !important; }
  .draw-banner-title { font-size: 16px !important; }
  .draw-banner-sub   { font-size: 12.5px !important; line-height: 1.7 !important; }

  /* footer */
  .footer { padding: 24px 5vw !important; font-size: 11px !important; }
  .footer-cn { font-size: 13px !important; letter-spacing: .35em !important; }

  /* 触摸目标 */
  button, .nav-item, .post-foot span, .section-action, .me-chip { min-height: 40px; }

  /* 浮动 TTS 按钮往左下角挪一点,避免挡 fab */
  .tts-btn.floating {
    right: 14px !important;
    bottom: 16px !important;
    padding: 9px 14px !important;
    font-size: 11.5px !important;
  }

  /* fab-write 给小屏 */
  .fab-write { right: 18px !important; bottom: 18px !important; width: 50px !important; height: 50px !important; }
}

/* ---------- letter / bottle / wrapped / follow 的新页面 ---------- */
@media (max-width: 720px) {
  /* topbar (写信、漂流瓶、follow 等都用了同款) */
  .topbar {
    padding: 14px 4vw !important;
    flex-wrap: nowrap;
  }
  .topbar h1     { font-size: 15px !important; letter-spacing: .25em !important; flex: 1; text-align: center; }
  .topbar .back  { font-size: 13px !important; letter-spacing: .1em !important; }
  .topbar .link  { font-size: 12px !important; letter-spacing: .15em !important; }

  /* 写信 */
  .letter-wrap { padding: 22px 4vw 100px !important; gap: 18px !important; }
  .letter-wrap .card { padding: 22px 18px !important; }
  .letter-wrap .card h2 { font-size: 15px !important; letter-spacing: .25em !important; }
  .letter-paper { padding: 22px 16px !important; font-size: 14.5px !important; line-height: 30px !important; }
  .actions button { font-size: 12px !important; padding: 12px 16px !important; letter-spacing: .2em !important; }
  textarea#fragments { min-height: 130px; font-size: 14px !important; }

  /* 漂流瓶 */
  .btl-wrap { padding: 22px 4vw 100px !important; }
  .btl-wrap .view { padding: 20px 16px !important; }
  .btl-wrap .tab { font-size: 12px !important; letter-spacing: .15em !important; padding: 11px 4px !important; }
  .pick-result { padding: 20px 16px !important; min-height: 110px !important; }
  .pick-result .body { font-size: 14.5px !important; line-height: 30px !important; }

  /* wrapped story */
  .card .label       { font-size: 10px !important; letter-spacing: .35em !important; margin-bottom: 16px !important; }
  .card .big         { font-size: clamp(54px, 22vw, 90px) !important; }
  .card .title-big   { font-size: 24px !important; letter-spacing: .12em !important; }
  .card .subtitle    { font-size: 13px !important; }
  .card .persona-emoji { font-size: 56px !important; }
  .card .persona-title { font-size: 26px !important; letter-spacing: .2em !important; }
  .card .persona-summary { font-size: 13px !important; line-height: 1.95 !important; }
  .actions { bottom: 22px !important; gap: 8px !important; }
  .action  { padding: 10px 16px !important; font-size: 12px !important; letter-spacing: .2em !important; }

  /* 关注列表 follow */
  .follow-card { padding: 16px 14px !important; }
  .follow-card-name { font-size: 15px !important; }
  .follow-card-bio  { font-size: 12.5px !important; }
  .follow-tab       { font-size: 12.5px !important; padding: 11px 12px !important; }
}

/* ---------- iOS 安全区(底部 home indicator) ---------- */
@supports (padding: max(0px)) {
  body, .app, .footer { padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding-top: max(14px, env(safe-area-inset-top)) !important; }
}

/* ---------- 横屏小屏特殊处理 ---------- */
@media (max-width: 720px) and (orientation: landscape) {
  .card .big { font-size: clamp(40px, 14vw, 70px) !important; }
  .card { padding: 28px 32px 90px !important; }
  .actions { bottom: 12px !important; }
}