/* Linkhub · 小红书式满屏 App Shell（手机 / 平板 / 桌面 PWA 兼容） */

:root {
  --app-gutter: max(12px, env(safe-area-inset-left, 0px));
  --app-gutter-r: max(12px, env(safe-area-inset-right, 0px));
  --app-bleed-l: calc(-1 * var(--app-gutter));
  --app-bleed-r: calc(-1 * var(--app-gutter-r));
  --app-shell-max: 100%;
}

@media (max-width: 359px) {
  :root {
    --app-gutter: max(8px, env(safe-area-inset-left, 0px));
    --app-gutter-r: max(8px, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 390px) and (max-width: 1024px) {
  :root {
    --app-gutter: max(12px, env(safe-area-inset-left, 0px));
    --app-gutter-r: max(12px, env(safe-area-inset-right, 0px));
  }
}

@media (min-width: 428px) and (max-width: 1024px) {
  :root {
    --app-gutter: max(14px, env(safe-area-inset-left, 0px));
    --app-gutter-r: max(14px, env(safe-area-inset-right, 0px));
  }
}

/* ========== 手机 + 平板：贴边满屏 ========== */
@media (max-width: 1024px) {
  :root {
    --mobile-gutter: var(--app-gutter);
    --mobile-gutter-r: var(--app-gutter-r);
    --app-shell-max: 100%;
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .container {
    max-width: var(--app-shell-max) !important;
    width: 100%;
    padding-left: var(--app-gutter);
    padding-right: var(--app-gutter-r);
    box-sizing: border-box;
  }

  .page.active > .header,
  .bottom-nav {
    max-width: 100%;
    width: 100%;
  }

  /* —— 首页 —— */
  #homePage .home-kong-card {
    margin-left: var(--app-bleed-l);
    margin-right: var(--app-bleed-r);
    width: calc(100% + var(--app-gutter) + var(--app-gutter-r));
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    padding: 10px var(--app-gutter-r) 8px var(--app-gutter);
    margin-bottom: 10px;
  }

  #homePage .search-bar {
    border-radius: 999px;
  }

  #homePage .home-banner-carousel--swipe {
    margin-left: var(--app-bleed-l);
    margin-right: var(--app-bleed-r);
    width: calc(100% + var(--app-gutter) + var(--app-gutter-r));
    height: clamp(128px, 34vw, 200px);
    border-radius: 0;
  }

  #homePage .home-banner-carousel--swipe .carousel-item {
    border-radius: 0;
  }

  #homePage .home-hot-scroll {
    margin-left: var(--app-bleed-l);
    margin-right: var(--app-bleed-r);
    padding-left: var(--app-gutter);
    padding-right: var(--app-gutter-r);
    scroll-padding-left: var(--app-gutter);
    scroll-padding-right: var(--app-gutter-r);
  }

  #homePage .home-feed-tabs-wrap {
    margin-left: var(--app-bleed-l);
    margin-right: var(--app-bleed-r);
    padding-left: calc(var(--app-gutter) - 2px);
    padding-right: calc(var(--app-gutter-r) - 2px);
  }

  /* 双列瀑布流：窄缝、竖图比例（小红书笔记流） */
  #homePage .feed-grid.home-feed-list,
  #homePage .feed-grid,
  #homeFeedGrid {
    --home-card-gap: 5px;
    gap: 5px;
    margin-left: var(--app-bleed-l);
    margin-right: var(--app-bleed-r);
    width: calc(100% + var(--app-gutter) + var(--app-gutter-r));
    padding-left: calc(var(--app-gutter) - 2px);
    padding-right: calc(var(--app-gutter-r) - 2px);
    box-sizing: border-box;
  }

  #homePage .home-feed-grid-card {
    border-radius: 8px;
    box-shadow: none;
    background: #fff;
  }

  #homePage .home-feed-grid-card-thumb {
    height: auto;
    aspect-ratio: 4 / 5;
    min-height: 120px;
  }

  #homeFeedGrid .home-minimal-feed-card {
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
  }

  #homeFeedGrid .home-minimal-feed-card .card-media {
    border-radius: 0;
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 120px;
  }

  #homeFeedGrid .home-minimal-feed-card .card-head,
  #homeFeedGrid .home-minimal-feed-card .card-meta-line {
    padding-left: 8px;
    padding-right: 8px;
  }

  #homePage .home-feed-empty {
    margin-left: var(--app-gutter);
    margin-right: var(--app-gutter-r);
    width: auto;
  }

  /* —— 信息详情：顶图通栏 + 正文留白 —— */
  #listingDetailPage .listing-detail-main.container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  #listingDetailPage .listing-detail-card {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #listingDetailPage .listing-detail-carousel-slide {
    aspect-ratio: 3 / 4;
    max-height: min(72dvh, 620px);
  }

  #listingDetailPage .listing-detail-card--58 .listing-detail-body,
  #listingDetailPage .listing-detail-card--58 .detail-card.listing-detail-body {
    padding-left: var(--app-gutter);
    padding-right: var(--app-gutter-r);
    padding-top: 14px;
    background: #fff;
  }

  #listingDetailPage .listing-detail-empty {
    padding-left: var(--app-gutter);
    padding-right: var(--app-gutter-r);
  }

  #homePage .home-feed-grid-card-body {
    padding: 8px 8px 10px;
  }

  #listingDetailPage {
    background: var(--bg-primary, #f8f9fa);
  }

  #listingDetailPage.active {
    background: #fff;
  }
}

/* 横屏手机：详情主图改宽屏比例，避免过高 */
@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  #listingDetailPage .listing-detail-carousel-slide {
    aspect-ratio: 16 / 10;
    max-height: min(58dvh, 420px);
  }

  #homePage .home-banner-carousel--swipe {
    height: clamp(96px, 28vh, 140px);
  }
}

/* 折叠屏 / 超宽手机：Feed 仍双列，略增缝 */
@media (min-width: 600px) and (max-width: 1024px) {
  #homePage .feed-grid.home-feed-list,
  #homePage .feed-grid,
  #homeFeedGrid {
    gap: 8px;
    padding-left: calc(var(--app-gutter) - 3px);
    padding-right: calc(var(--app-gutter-r) - 3px);
  }

  #homePage .home-feed-grid-card-thumb,
  #homeFeedGrid .home-minimal-feed-card .card-media {
    aspect-ratio: 5 / 6;
  }
}

/* ========== 桌面宽屏：居中手机壳（无两侧灰边断层） ========== */
@media (min-width: 1025px) {
  :root {
    --app-shell-max: 480px;
  }

  html {
    background: #e2e8f0;
  }

  body {
    max-width: var(--app-shell-max);
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 8px 32px rgba(15, 23, 42, 0.08);
  }

  .bottom-chrome {
    left: 50%;
    right: auto;
    width: min(var(--app-shell-max), 100%);
    max-width: var(--app-shell-max);
    transform: translateX(-50%);
    border-left: 1px solid var(--border-light, #e2e8f0);
    border-right: 1px solid var(--border-light, #e2e8f0);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }

  .bottom-chrome .bottom-nav {
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
  }

  #guidePage.gcv2-page > .gcv2-top-bar {
    left: 50%;
    right: auto;
    width: min(var(--app-shell-max), 100%);
    max-width: var(--app-shell-max);
    transform: translateX(-50%);
  }

  .home-float-publish {
    right: max(0px, calc(50vw - var(--app-shell-max) / 2));
  }
}

/* ========== 信息流详情 · 顶栏/底栏灰带（信息/分类/攻略共用 #listingDetailPage） ========== */
body:has(#listingDetailPage.active) {
  background: #fff;
}

#listingDetailPage.active {
  background: #fff;
  min-height: 100dvh;
}

#listingDetailPage.active > .header {
  padding-bottom: 0;
  box-shadow: none;
  border-bottom: 1px solid #f1f5f9;
}

#listingDetailPage.active > main.listing-detail-main.container {
  padding-top: 0 !important;
  margin-top: 0;
  background: #fff !important;
}

#listingDetailPage.active #listingDetailMount,
#listingDetailPage.active .listing-guide-detail-root,
#listingDetailPage.active .guide-detail-hero,
#listingDetailPage.active .listing-detail-card {
  margin-top: 0;
}

#listingDetailPage.active .listing-detail-related-wrap .guide-related-strip + .guide-related-strip {
  border-top: none;
  padding-top: 4px;
}

@media (max-width: 1024px) {
  #listingDetailPage.active > .header {
    min-height: calc(var(--safe-top) + 44px) !important;
    height: calc(var(--safe-top) + 44px) !important;
    padding-top: var(--safe-top);
  }

  #listingDetailPage.active > .header > .container {
    height: 44px;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  #listingDetailPage.active > main.listing-detail-main.container {
    padding-bottom: calc(
      var(--mobile-tab-row, 56px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) +
        var(--mobile-chrome-fab-bleed, 14px) + 4px
    ) !important;
  }
}

@media (min-width: 769px) {
  #listingDetailPage.active > .header {
    padding-top: calc(var(--safe-top) + 6px);
    padding-bottom: 6px;
  }

  #listingDetailPage.active > main.listing-detail-main.container {
    padding-bottom: calc(var(--mobile-tab-row, 56px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px) !important;
  }
}

@media (min-width: 1025px) {
  html:has(#listingDetailPage.active) {
    background: #e2e8f0;
  }

  body:has(#listingDetailPage.active) {
    background: #fff;
  }
}