/**
 * shazhouy · 移动端体验修复（≤767px）
 * 针对录屏反馈：导航稳定、顶区精简、媒体占位、触控优化
 */

.quick-confide-promise .promise-mob {
  display: none;
}

@media (max-width: 767px) {

  :root {
    --lp-header-h: var(--mob-header-total);
    --mob-visual-top: 0px;
  }

  /* ========== 顶栏安全区：覆盖 core-app 后加载的 padding 冲突 ========== */
  .lp-header {
    position: fixed !important;
    top: var(--mob-visual-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 700 !important;
    min-height: unset !important;
    height: auto !important;
    padding: env(safe-area-inset-top, 0px) var(--mob-gap) 0 !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .lp-header-inner {
    width: 100% !important;
    min-height: var(--mob-header-h) !important;
    height: var(--mob-header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body.shazhouy-app:not(:has(#pageHome.active)) {
    padding-top: calc(var(--mob-header-total) + var(--mob-visual-top, 0px)) !important;
  }

  body.shazhouy-app:has(#pageHome.active) .lp-header {
    background: linear-gradient(
      180deg,
      rgba(8, 14, 12, 0.78) 0%,
      rgba(8, 14, 12, 0.32) 58%,
      transparent 100%
    ) !important;
    border-bottom: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .toast {
    top: calc(var(--mob-header-total) + var(--mob-visual-top, 0px) + 8px) !important;
  }

  /* ========== 全局：单页滚动、无横向溢出 ========== */
  html, body.shazhouy-app {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  .main-page-wrap,
  .main-page.active,
  #pageTreehole,
  .app-workspace,
  .qq-body,
  .qq-center-col,
  #postList.post-waterfall {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* ========== 首页：压缩 Hero、去重文案、顶栏不遮图 ========== */
  #pageHome .lp-hero-wrap--magazine .lp-banner--magazine {
    min-height: clamp(220px, 38dvh, 340px) !important;
    padding-top: calc(var(--mob-header-total) + var(--mob-visual-top, 0px)) !important;
    box-sizing: border-box !important;
  }
  #pageHome .lp-hero-wrap--magazine .lp-scene__veil--hero {
    background: linear-gradient(
      180deg,
      rgba(8, 12, 16, 0.02) 0%,
      rgba(8, 12, 16, 0.05) 40%,
      rgba(8, 12, 16, 0.12) 100%
    ) !important;
  }
  #pageHome .lp-hero-float {
    display: none !important;
  }
  #pageHome .lp-hero-quote {
    display: none !important;
  }
  #pageHome .lp-hero-intro .lp-lead {
    display: none !important;
  }
  #pageHome .lp-hero-intro h1 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
  }
  #pageHome .lp-hero-trust {
    font-size: 10px;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }
  #pageHome .lp-live-strip {
    top: calc(var(--mob-header-total) + var(--mob-visual-top, 0px) + 6px) !important;
    gap: 4px;
    padding: 0 8px;
  }
  #pageHome .lp-banner-content {
    padding-top: 24px !important;
  }
  #pageHome .lp-live-pill {
    height: 24px;
    padding: 0 7px;
    font-size: 9px;
  }
  #pageHome .lp-live-pill strong,
  #pageHome .lp-live-zone-label {
    font-size: 9px;
  }
  #pageHome .lp-features-head p {
    font-size: 11px;
  }
  #pageHome .lp-home-foot-disclaimer {
    font-size: 11px;
    line-height: 1.55;
  }
  #pageHome .lp-home-foot-meta,
  #pageHome .lp-home-foot-copy {
    font-size: 9px;
    line-height: 1.5;
  }
  #pageHome .lp-col-item::after {
    display: none;
  }

  /* ========== 倾诉区：顶栏留白由 body 承担，避免双层遮挡 ========== */
  #pageTreehole .app-workspace-head {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* ========== 倾诉：仅发帖，动态去广场看 ========== */
  #pageTreehole.treehole-tab-shuoshuo #feedPanel {
    display: none !important;
  }
  #pageTreehole.treehole-tab-shuoshuo .quick-confide-promise .promise-full {
    display: none !important;
  }
  #pageTreehole.treehole-tab-shuoshuo .quick-confide-promise .promise-mob {
    display: block !important;
  }

  /* ========== 广场：顶区精简 ========== */
  #pageTreehole.treehole-tab-square .square-aside-rail {
    display: none !important;
  }
  #pageTreehole.treehole-tab-square #feedPanel .feed-subtitle {
    display: none !important;
  }
  #pageTreehole.treehole-tab-square #feedPanel .qq-feed-hd {
    padding: 6px 2px 4px;
    border: none;
  }
  #pageTreehole.treehole-tab-square #feedPanel .qq-feed-actions {
    display: none !important;
  }
  #pageTreehole.treehole-tab-square .qq-post-bar {
    display: none !important;
  }
  #pageTreehole.treehole-tab-square .post-card--qq {
    margin: 0 0 10px !important;
    padding: 12px 14px 0 !important;
  }

  /* ========== 我的：默认折叠、菜单样式 ========== */
  #pageTreehole.treehole-tab-mine .mine-link-item {
    border: none !important;
    border-radius: 10px !important;
    background: rgba(61, 139, 122, 0.06) !important;
    margin-bottom: 6px;
    padding: 12px 14px !important;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  #pageTreehole.treehole-tab-mine .mine-link-item span:last-child {
    color: #8a9a92;
  }
  #pageTreehole.treehole-tab-mine .mine-link-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* ========== 共情按钮：2 列大触控 ========== */
  #pageTreehole .qq-post-empathy,
  #pageTreehole .empathy-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px !important;
  }
  #pageTreehole .qq-post-empathy .empathy-btn,
  #pageTreehole .empathy-row .empathy-btn {
    min-height: 40px;
    padding: 8px 6px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    flex: none !important;
    width: 100%;
  }
  #pageTreehole .emotion-thermo {
    padding: 8px 10px;
    margin: 6px 0;
  }
  #pageTreehole .emotion-thermo-title {
    font-size: 10px;
  }
  #pageTreehole .emotion-thermo-insight {
    font-size: 11px;
  }

  /* ========== 媒体：占位替代黑块 ========== */
  .qq-post-grid-cell,
  .post-photo-grid img,
  .post-photo-grid video {
    background: linear-gradient(145deg, #e8ece9, #d8e0dc);
  }
  body.dark-theme .qq-post-grid-cell,
  body.dark-theme .post-photo-grid img,
  body.dark-theme .post-photo-grid video {
    background: linear-gradient(145deg, #2a322f, #1e2422);
  }
  .qq-post-grid-cell img,
  .qq-post-grid-cell video {
    min-height: 80px;
  }
  .qq-post-grid-cell video:not([src]),
  .qq-post-grid-cell video[src=""] {
    min-height: 120px;
    object-fit: contain;
  }
  .qq-post-img-pending,
  .qq-post-video-pending {
    min-height: 120px;
    width: 100%;
    background: linear-gradient(145deg, #e8ece9, #d8e0dc);
    object-fit: cover;
  }
  body.dark-theme .qq-post-img-pending,
  body.dark-theme .qq-post-video-pending {
    background: linear-gradient(145deg, #2a322f, #222826);
  }
  .post-media-unavailable,
  .qq-post-media-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #e8ece9, #d8e0dc);
    color: #8a9a92;
    font-size: 11px;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
  }
  body.dark-theme .post-media-unavailable,
  body.dark-theme .qq-post-media-pending {
    background: linear-gradient(145deg, #2a322f, #222826);
    color: #6b7c74;
  }
  .qq-post-grid.cols-1 {
    max-width: min(100%, 260px);
  }

  /* ========== 许愿树：顶栏沉浸 ========== */
  body.shazhouy-app:has(#pageWish.active) .lp-header {
    background: rgba(26, 40, 36, 0.92) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  }
  body.shazhouy-app:has(#pageWish.active) .lp-logo,
  body.shazhouy-app:has(#pageWish.active) .lp-nav-icon {
    color: #e4ece8 !important;
  }

  /* ========== 时光胶囊：顶栏沉浸 ========== */
  body.shazhouy-app:has(#pageCapsule.active) .lp-header {
    background: rgba(58, 50, 40, 0.94) !important;
    border-bottom-color: rgba(232, 184, 74, 0.12) !important;
  }
  body.shazhouy-app:has(#pageCapsule.active) .lp-logo,
  body.shazhouy-app:has(#pageCapsule.active) .lp-nav-icon,
  body.shazhouy-app:has(#pageCapsule.active) .lp-nav-item.active {
    color: #f0e8dc !important;
  }
  body.shazhouy-app:has(#pageCapsule.active) .header-login-btn {
    border-color: rgba(232, 184, 74, 0.35) !important;
    color: #f0e8dc !important;
  }

  /* ========== 返回顶部：不挡操作 ========== */
  .back-top {
    bottom: calc(var(--mob-tab-total) + 20px) !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 610 !important;
    opacity: 0.92;
  }

  /* ========== 加载占位高度 ========== */
  #pageTreehole #postList .loading {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* ========== 分类 Tab 可滑 ========== */
  #pageTreehole #feedPanel .category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  #pageTreehole #feedPanel .category-tabs::-webkit-scrollbar {
    display: none;
  }
  #pageTreehole #feedPanel .cat-tab {
    flex-shrink: 0;
    min-height: 34px;
    padding: 6px 12px;
  }
}