/* ==========================================================================
   HotWave · 移动端主设计层
   --------------------------------------------------------------------------
   设计顺序：先按手机（375–430px，单手竖屏）定版式，再让桌面端做增强。
   styles.css 保留桌面版式；本文件在 ≤767px 覆盖为移动端版式，不缩放、不压缩，
   而是换成适合手指与窄屏的结构：

     顶栏 50px  →  吸顶频道条  →  内容  →  底部 5 格 Tab（中间 ➕ 凸起）

   关键取舍：
   - 触控目标 ≥44px；输入框字号 16px（低于 16px 时 iOS 会在聚焦时强制放大页面）
   - 列表从「大图卡片」换成「左文右图」紧凑行，一屏能看到 4–5 条
   - 筛选 chips 单行横滑，不换行堆高
   - 弹窗在手机上是底部抽屉（bottom sheet），不是居中对话框
   - 适配 iPhone 刘海/底部小黑条：env(safe-area-inset-*)
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --h-nav: 50px;
    --h-tabbar: 58px;
    --pad: 14px;              /* 页面左右留白 */
    --r-xs: 8px; --r-s: 10px; --r-m: 12px; --r-l: 14px;
    --max: 100%;
  }

  /* ---------------- 基础排版 ---------------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-size: 15px;
    line-height: 1.65;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  /* 手指点下去要有反馈，而不是靠 hover */
  button, a, .tag, .ctab, .pcard, .meetcard, .helpcard, .toolcell { touch-action: manipulation; }
  a, button { -webkit-tap-highlight-color: transparent; }
  input, select, textarea { font-size: 16px !important; line-height: 1.4; }
  ::selection { background: var(--brand); color: #fff; }

  /* ---------------- 顶栏：只留「菜单 / 品牌 / 搜索 / 我的」 ---------------- */
  .nav { height: var(--h-nav); }
  .nav-in { padding: 0 8px 0 4px; gap: 0; }
  .hamb { display: grid; width: 40px; height: 40px; flex: none; }
  .brand { margin-right: auto; gap: 7px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-tx b { font-size: 15.5px; letter-spacing: .2px; }
  .brand-tx i { display: none; }
  .navmenu { display: none; }
  .navsearch { display: none; }
  .nav-tools { gap: 0; }
  .nav-tools .iconbtn { width: 40px; height: 40px; }
  .nav-tools .iconbtn svg { width: 19px; height: 19px; }
  /* 登录按钮收成小胶囊，不再跟内容抢视觉重心 */
  .nav-tools .btn { height: 30px; padding: 0 12px; font-size: 13px; border-radius: var(--r-full); }
  .nav-tools .avatar { width: 30px; height: 30px; margin-left: 4px; font-size: 12px; }
  .mob-only { display: grid !important; }

  /* ---------------- 吸顶频道条 ---------------- */
  .tabbar-top { top: var(--h-nav); border-bottom: 1px solid var(--line); }
  .tabs-scroll {
    padding: 7px var(--pad);
    gap: 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .ctab { height: 32px; padding: 0 12px; font-size: 13.5px; scroll-snap-align: start; }
  .ctab em { display: none; }

  /* ---------------- 页面容器 ---------------- */
  .wrap {
    padding: 12px var(--pad) calc(var(--h-tabbar) + env(safe-area-inset-bottom) + 22px);
  }
  .layout { display: block; }
  .head-block {
    align-items: flex-start; gap: 10px;
    margin-bottom: 12px;
  }
  .head-block h1 { font-size: 19px; line-height: 1.4; }
  .head-block .sub { font-size: 12px; margin-top: 3px; }
  /* 网格/列表切换在手机上没意义（本来就是单列），只保留关注按钮 */
  .head-block .seg { background: none; border: 0; padding: 0; }
  .head-block .seg button:not(.fbtn) { display: none; }
  .head-block .seg .fbtn { height: 32px; font-size: 13px; }

  /* ---------------- 首屏焦点：只留一张主图，其余交给信息流 ---------------- */
  .hero { display: block; margin-bottom: 12px; }
  .hero-side { display: none; }
  .hero .fcard:first-child {
    min-height: 0; aspect-ratio: 16 / 10; border-radius: var(--r-l);
  }
  .hero .fcard:first-child .fbody { padding: 14px 15px; }
  .hero .fcard:first-child .fbody h3 {
    font-size: 17.5px; line-height: 1.42; letter-spacing: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 8px !important;
  }
  .fcard .pill { height: 20px; padding: 0 8px; font-size: 11px; }
  .fmeta { gap: 7px; margin-top: 8px; font-size: 11.5px; }

  /* ---------------- 信息流：左文右图紧凑行 ---------------- */
  .cards { grid-template-columns: 1fr; gap: 0; }
  .cards .pcard,
  .cards.list .pcard {
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
    transform: none !important;
    box-shadow: none !important;
  }
  .cards .pcard:last-child { border-bottom: 0; }
  .cards .pcard:active { opacity: .72; }
  .cards .pcover,
  .cards.list .pcover {
    width: 106px; height: 76px; flex: none;
    aspect-ratio: auto;
    border-radius: var(--r-xs);
    margin-left: 12px;
  }
  .cards .pbody,
  .cards.list .pbody { padding: 0; gap: 5px; }
  .cards .ptitle,
  .cards.list .ptitle {
    font-size: 15.5px; line-height: 1.45; font-weight: 400;
    -webkit-line-clamp: 2;
    word-break: break-word;
  }
  .cards .pcats,
  .cards.list .pcats,
  .cards.list .pexcerpt { display: none; }
  .cards .pmeta { font-size: 11.5px; gap: 6px; }
  .cards .pcover .badge {
    top: 5px; left: 5px; height: 17px; padding: 0 5px; font-size: 9.5px; border-radius: 4px;
  }
  .cards .pcover .views { display: none; }
  .adcard { min-height: 0; padding: 16px; border-radius: var(--r-m); }

  /* ---------------- 轻娱乐卡片组 ---------------- */
  .lifegrid { grid-template-columns: 1fr; gap: 12px; margin: 14px 0 18px; }
  .lifecard { padding: 14px 14px 12px; border-radius: var(--r-l); }
  .lchead { margin-bottom: 10px; }
  .lchead b { font-size: 15px; }
  .lchead a { font-size: 12.5px; }
  .lcempty { font-size: 13px; }
  .jokerow { padding: 8px 0; gap: 10px; }
  .jk-tx { font-size: 14px; line-height: 1.6; }
  .jk-like { padding: 4px 10px; font-size: 12.5px; }
  .meetrow { padding: 8px 0; }
  .meetrow > div b { font-size: 14px; }
  .mr-meta { font-size: 12px; }
  .toolgrid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .toolcell {
    padding: 11px 4px; align-items: center; text-align: center; gap: 4px;
    border-radius: var(--r-m);
  }
  .toolcell:active { background: var(--surface-2); }
  .tc-ic { font-size: 21px; line-height: 1; }
  .toolcell b { font-size: 11.5px; font-weight: 500; }
  .tc-d { display: none; }
  .meetcta .btn { width: 100%; height: 40px; }

  /* ---------------- 筛选 chips：单行横滑，不再堆成三行 ---------------- */
  .fbar { gap: 6px; margin: 0 calc(var(--pad) * -1) 12px; }
  .fbar .tagrow,
  .tagrow.wcatrow {
    flex-wrap: nowrap; overflow-x: auto; gap: 7px;
    padding: 2px var(--pad);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .fbar .tagrow::-webkit-scrollbar,
  .tagrow.wcatrow::-webkit-scrollbar { display: none; }
  /* chips 统一抬到 32px：26px 的标签用手指点会经常点空 */
  .tag { height: 32px; padding: 0 12px; font-size: 13px; }
  .fbar .tag, .wcatrow .tag, .tagrow .tag { flex: none; }
  .tag.sm { height: 26px; padding: 0 10px; }
  .tagrow { row-gap: 8px; }
  .wcatrow { margin: 0 calc(var(--pad) * -1) 12px; }

  /* ---------------- 组局 / 主意帮 卡片 ---------------- */
  .meetgrid, .helpgrid { grid-template-columns: 1fr; gap: 10px; }
  .meetcard, .helpcard { padding: 13px 14px; border-radius: var(--r-m); }
  .meetcard h3, .helpcard h3 { font-size: 15px; margin-bottom: 6px; }
  .mc-meta { font-size: 12px; }
  .mc-foot { font-size: 12.5px; margin-top: 8px; }
  .meetdetail { padding: 15px 14px; border-radius: var(--r-l); }
  .md-row { font-size: 14px; gap: 10px; padding: 8px 0; }
  .md-row b { width: 52px; font-size: 13px; }
  .safety { font-size: 12.5px; }

  /* ---------------- 工具箱 ---------------- */
  .toolnav {
    flex-wrap: nowrap; overflow-x: auto; gap: 7px;
    margin: 0 calc(var(--pad) * -1) 12px; padding: 2px var(--pad);
    scrollbar-width: none;
  }
  .toolnav::-webkit-scrollbar { display: none; }
  .toolnav .tag { flex: none; height: 34px; font-size: 13px; }
  .toolbody { max-width: none; }
  .toolcard { padding: 15px 14px; border-radius: var(--r-l); }
  .toolcard h3 { font-size: 16px; margin-bottom: 12px; }
  .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
  .frow label:only-child,
  .frow label:has(textarea) { grid-column: 1 / -1; }
  .frow label { font-size: 12.5px; gap: 5px; }
  .frow input, .frow select {
    height: 44px; padding: 0 12px; font-size: 16px; border-radius: var(--r-xs);
  }
  .toolcard .btn { width: 100%; height: 44px; border-radius: var(--r-s); }
  .toolout { padding: 12px 13px; border-radius: var(--r-s); }
  .toolout:empty { display: none; }
  .toolout .md-row { font-size: 13.5px; }
  .toolnote { font-size: 12px; }

  /* ---------------- 详情页 ---------------- */
  .post { padding: 15px 14px 20px; border-radius: var(--r-l); }
  .post h1 { font-size: 20px; line-height: 1.45; margin-bottom: 11px; }
  .crumb { font-size: 11.5px; gap: 5px; margin-bottom: 11px; }
  .pmeta-lg { font-size: 12px; gap: 8px; padding-bottom: 12px; margin-bottom: 15px; }
  .cover-lg { aspect-ratio: 16 / 10; margin-bottom: 15px; border-radius: var(--r-m); }
  .content { font-size: 16.5px; line-height: 1.85; }
  .content h3 { font-size: 17.5px; margin: 22px 0 10px; }
  .content blockquote { font-size: 15px; padding: 11px 14px; margin: 16px 0; }
  .blk-ul li { font-size: 16px; line-height: 1.8; }
  .blk-ul { padding-left: 0; }
  .content .ph { aspect-ratio: 16 / 10; }
  .tw { border-radius: var(--r-s); }
  .tw table { font-size: 13px; min-width: 360px; }
  .tw th, .tw td { padding: 8px 10px; }
  .near { grid-template-columns: 1fr; gap: 9px; }
  .divider { margin: 22px 0 14px; }
  /* 评论区：输入框和按钮上下排，避免按钮被挤到屏幕外 */
  .cbox { flex-direction: column; gap: 9px; }
  .cbox textarea { min-height: 84px; font-size: 16px; }
  .cbox .btn { width: 100%; height: 42px; }
  .cmt-act { gap: 18px; }
  .cmt-act button { min-height: 32px; }

  /* ---------------- 知识库 ---------------- */
  .wgrid { grid-template-columns: 1fr; gap: 10px; }
  .wcard { padding: 14px; border-radius: var(--r-m); }
  .wcard h3 { font-size: 16px; }
  .wcard p { font-size: 13px; -webkit-line-clamp: 2; }
  .wsearch { width: 100%; min-width: 0; height: 42px; }
  .term-sum { flex-direction: column; gap: 5px; padding: 13px 14px; margin: 14px 0 16px; }
  .term-sum span { font-size: 15.5px; }
  .relgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .relcard { padding: 11px 12px; }
  .relcard b { font-size: 13.5px; }
  .wfoot-note { font-size: 12px; }

  /* ---------------- 每日笑话 ---------------- */
  .jokeboard { gap: 10px; max-width: none; }
  .jkcard { padding: 13px 14px; gap: 10px; align-items: flex-start; border-radius: var(--r-m); }
  .jk-rank { width: 26px; height: 26px; border-radius: 8px; font-size: 12.5px; }
  .jk-body p { font-size: 14.5px; line-height: 1.72; }
  .jk-meta { font-size: 11.5px; }
  .jk-like.big { padding: 5px 10px; font-size: 13px; }

  /* ---------------- 我的 ---------------- */
  .acctbox { padding: 14px; border-radius: var(--r-m); }
  .metabs { gap: 0; margin-bottom: 14px; }
  .metabs button { padding: 10px 12px; font-size: 14px; }
  .merow { padding: 10px 8px; gap: 11px; }
  .metx b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
  .mecover { width: 56px; height: 42px; }
  .checkin { padding: 16px 14px; border-radius: var(--r-l); }
  .ck-l b { font-size: 34px; }
  .ckdays { grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .ckday span { font-size: 12px; }

  /* ---------------- 侧栏：手机放到底部，广告位不占流量 ---------------- */
  .side { display: flex; flex-direction: column; gap: 12px; position: static; margin-top: 18px; }
  .side .widget { flex: 1 1 auto; padding: 14px; }
  .side .ad-w { display: none; }
  /* 搜索结果页只留结果本身；热榜/标签云往下堆只会让人找不到自己搜的词 */
  .v-search .side { display: none; }
  .widget .wtitle b { font-size: 14px; }

  /* ---------------- 页脚：手机上只留一行版权 ---------------- */
  .foot { margin-top: 12px; }
  .foot-in { display: none; }
  .foot-bot {
    padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
    font-size: 11.5px; border-top: 0; line-height: 1.7;
  }

  /* ---------------- 底部 Tab：5 格 + 中间凸起的发布键 ---------------- */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--h-tabbar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
  }
  .tabbar button {
    font-size: 10.5px; gap: 3px; padding-top: 5px; min-height: 44px;
    color: var(--text-3);
  }
  .tabbar button.on { color: var(--brand); }
  .tabbar .tb-ic { display: block; line-height: 0; }
  .tabbar .tb-ic svg { width: 21px; height: 21px; }
  .pubfab { justify-content: flex-start; }
  .pubfab-plus {
    width: 46px; height: 46px; line-height: 44px; margin-top: -18px;
    font-size: 25px; font-weight: 300;
  }
  .pubfab-tx { font-size: 10.5px; margin-top: 1px; }

  /* ---------------- 弹窗 → 底部抽屉 ---------------- */
  .mask { place-items: end stretch; padding: 0; }
  .modal {
    width: 100%; max-width: none; max-height: 90vh;
    border-radius: 16px 16px 0 0;
    animation: sheetUp .28s var(--ease);
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes sheetUp { from { transform: translateY(100%); opacity: .7; } to { transform: none; opacity: 1; } }
  .modal-head {
    position: sticky; top: 0; z-index: 3;
    padding: 14px 16px 10px; background: var(--surface);
    border-bottom: 1px solid var(--line-2); border-radius: 16px 16px 0 0;
  }
  .modal-head b { font-size: 16px; }
  .modal-body { padding: 14px 16px 16px; }
  .modal-foot {
    position: sticky; bottom: 0; z-index: 3;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line-2);
  }
  .modal-foot .btn { height: 44px; }
  .field { margin-bottom: 12px; }
  .field label { font-size: 12px; margin-bottom: 5px; }
  .field input { height: 44px; font-size: 16px; }
  .field textarea { font-size: 16px; }
  .replyform textarea { font-size: 16px; }
  .replyform .btn { height: 42px; }
  .tipnote { font-size: 12px; }
  /* 抽屉里的发布表单：两列并一列，减少横向拥挤 */
  .modal .frow { grid-template-columns: 1fr; }

  /* ---------------- 灯箱 / 抽屉 / 回到顶部 ---------------- */
  .lightbox .lb-stage { width: 100vw; border-radius: 0; aspect-ratio: 4 / 3; }
  .lightbox .lb-bar { font-size: 12.5px; padding: 12px 14px; flex-direction: column; gap: 3px; }
  .lightbox .lb-close { top: 12px; right: 12px; width: 36px; height: 36px; }
  .drawer .d-panel { width: min(300px, 86vw); padding-bottom: env(safe-area-inset-bottom); }
  .d-link { min-height: 44px; }
  .totop {
    right: 12px; bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom) + 14px);
    width: 38px; height: 38px;
  }
  #toast-root { top: calc(var(--h-nav) + 14px); width: 90%; }
  .toast { font-size: 13.5px; }

  /* ---------------- 分页 ---------------- */
  .pager { margin-top: 20px; gap: 5px; }
  .pager button { min-width: 40px; height: 40px; font-size: 13.5px; }

  /* ---------------- 首页「最新发布」标题收成小标 ---------------- */
  .head-block.home-head { margin: 18px 0 2px; }
  .head-block.home-head h1 { font-size: 13px; font-weight: 400; color: var(--text-3); letter-spacing: .6px; }
  .head-block.home-head .sub { display: none; }
  .head-block.home-head .seg { display: none; }
  .followhint { font-size: 13px; padding: 10px 12px; margin-bottom: 12px; }

  /* ---------------- 骨架屏：与移动端列表同构，避免加载时跳版 ---------------- */
  .sk-card { height: auto; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  .cards .sk-card { flex-direction: row-reverse; align-items: center; }
  .sk-cover { width: 106px; height: 76px; flex: none; margin-left: 12px; border-radius: var(--r-xs); }
  .sk-line { height: 12px; margin: 6px 0; }
  .empty { padding: 44px 16px; }
  .empty .ec { width: 54px; height: 54px; margin-bottom: 12px; }
  .empty b { font-size: 15px; }

  /* ---------------- 发布选择面板 ---------------- */
  .pubopt { padding: 14px 13px; border-radius: var(--r-s); }
  .po-ic { font-size: 22px; }
  .po-tx b { font-size: 15px; }
  .po-tx i { font-size: 12px; }
  .msearch { height: 48px; }
}

/* 桌面端隐藏「仅移动端」元素 */
.mob-only { display: none; }

/* 小屏手机（≤360px，如 iPhone SE）再收一档 */
@media (max-width: 360px) {
  .cards .pcover { width: 92px; height: 68px; margin-left: 10px; }
  .cards .ptitle { font-size: 14.5px; }
  .toolcell b { font-size: 10.5px; }
  .tabbar button { font-size: 9.5px; }
  .frow { grid-template-columns: 1fr; }
}

/* ==========================================================================
   触屏尺寸增强（≤1023px，含 iPad 竖屏）
   --------------------------------------------------------------------------
   这一段不改版式，只把可点元素抬到手指能稳稳点中的尺寸。
   ========================================================================== */
@media (max-width: 1023px) {
  .tag { height: 32px; }
  .ctab { height: 34px; }
  .iconbtn { width: 40px; height: 40px; }
  .tabbar button { min-height: 44px; }
  .metabs button { min-height: 44px; }
  .linkbtn, .cmt-act button { min-height: 32px; }
}

@media (max-width: 767px) {
  /* 抽屉头部要露出站名，否则只剩一个孤零零的 logo 方块 */
  .drawer .brand-tx { display: block; }
  .d-sec { min-height: 46px; }
  .ds-ic { font-size: 18px; }
}

@media (max-width: 767px) {
  /* 分享条：手机上不堆成两行，允许横向滑动（与频道 chips 同一套手势） */
  .sharebar {
    margin: 18px 0 10px; padding: 10px 12px; gap: 7px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sharebar::-webkit-scrollbar { display: none; }
  .sharebar .sh-chip { flex: none; height: 32px; padding: 0 13px; }
  .sharebar .sh-more { margin-left: 0; }

  /* 面板：5 列更紧凑，10 个出口正好两行；图标 44px 仍是拇指友好尺寸 */
  .sh-grid { grid-template-columns: repeat(5, 1fr); gap: 4px 0; margin-bottom: 12px; }
  .sh-item { padding: 9px 0; }
  .sh-ic { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
  .sh-nm { font-size: 11px; }
  .sh-qr-wrap { gap: 12px; }
  .sh-qr { padding: 5px; }
  .sh-qr canvas { width: 132px !important; height: 132px !important; }
  .sh-qr-tip { min-width: 120px; font-size: 12px; }
  .sh-link input { height: 40px; font-size: 13px; }
  .sh-xhs-ta { font-size: 14px; }        /* ≥14px 避免 iOS 聚焦缩放 */
  .jk-share { width: 34px; height: 34px; }
}