/* 官网 V2 移动端 App 化布局层（仅 ≤767px 生效）。
   布局参考小程序端首页：品牌头部、搜索条、圆角 Banner 与白色卡片区块、
   悬浮圆形客服入口、底部悬浮胶囊 TabBar。不引入新配色主题，
   全部复用 foundation 的 --public-* 品牌令牌；桌面端不受本文件影响。
   本文件在 base.html 中于页面级样式之后加载，同级特异性下可覆盖前者的移动端规则。 */

/* ── 桌面端默认不展示的移动端组件 ── */
.public-v2 .pv2-tabbar {
  display: none;
}

.public-v2 .pv2-mobile-search {
  display: none;
}

.public-v2 .pv2-elevator .pv2-elevator-label {
  display: none;
}

/* ── 底部胶囊 TabBar 结构 ── */
.public-v2 .pv2-tabbar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 998;
  align-items: center;
  gap: 2px;
  padding: 7px;
  border: 1px solid rgba(255, 93, 141, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(190, 60, 110, 0.18);
}

.public-v2 .pv2-tabbar-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: 999px;
  color: var(--public-faint);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.public-v2 .pv2-tabbar-item svg {
  width: 22px;
  height: 22px;
  display: block;
}

.public-v2 .pv2-tabbar-item.is-active {
  color: var(--public-brand);
  font-weight: 700;
  background: rgba(255, 93, 141, 0.1);
}

@media (max-width: 767px) {
  /* ── 启用底部胶囊 TabBar ── */
  .public-v2 .pv2-tabbar {
    display: flex;
  }

  /* ── 浅色底：替代整页白底，突出卡片层级 ── */
  .public-v2 {
    background: #fbf5f7;
  }

  .public-v2 main {
    padding-bottom: 6px;
  }

  /* ── 品牌头部：圆徽标 + 名称 + 副标题；导航收进底部 TabBar ── */
  .public-v2 .pv2-mobile-actions,
  .public-v2 .pv2-mobile-menu {
    display: none !important;
  }

  .public-v2 .pv2-brand img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow:
      0 0 0 2px #ffffff,
      0 4px 10px rgba(255, 93, 141, 0.28);
  }

  .public-v2 .pv2-brand-copy strong {
    font-size: 16px;
  }

  .public-v2 .pv2-brand-copy small {
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  /* ── 区块卡片化：白色圆角卡片浮于浅色底 ── */
  .public-v2 .pv2-section {
    margin: 10px 12px;
    padding: 20px 12px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(190, 80, 120, 0.08);
  }

  .public-v2 .pv2-section .pv2-shell {
    width: 100%;
  }

  .public-v2 .pv2-section-alt {
    background: #ffffff;
  }

  /* ── 首页轮播 Banner：紧凑小图卡片（参考小程序端样式） ── */
  .public-v2 .pv2-hero {
    /* 基础层是 width:100%，卡片化后用 auto 让两侧外边距参与宽度计算，避免横向溢出 */
    width: auto;
    height: clamp(170px, 52vw, 220px);
    min-height: 0;
    margin: 0 12px;
    border-radius: 18px;
  }

  .public-v2 .pv2-hero-slide img {
    object-position: 64% 38%;
  }

  /* 纯图 Banner：文案与按钮让位，入口由底部 TabBar 与各区块承担 */
  .public-v2 .pv2-hero-content {
    display: none;
  }

  .public-v2 .pv2-hero-dots {
    top: auto;
    bottom: 8px;
  }

  /* ── 内页顶部 Hero：圆角卡片 ── */
  .public-v2 .pv2-page-hero {
    margin: 10px 12px 0;
    border-radius: 18px;
  }

  /* ── 首页移动端搜索条 ── */
  .public-v2 .pv2-mobile-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 10px 12px 12px;
    padding: 0 16px;
    border: 1px solid rgba(255, 93, 141, 0.14);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(190, 80, 120, 0.08);
  }

  .public-v2 .pv2-mobile-search-icon {
    flex: none;
    color: var(--public-brand);
    font-size: 15px;
    font-weight: 800;
  }

  .public-v2 .pv2-mobile-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--public-ink);
    font-size: 14px;
  }

  .public-v2 .pv2-mobile-search input::placeholder {
    color: var(--public-faint);
  }

  /* ── 悬浮圆形客服入口：避让底部 TabBar ── */
  .public-v2 .pv2-elevator {
    right: 12px;
    bottom: calc(100px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .public-v2 .pv2-elevator button {
    position: relative;
    width: 54px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 1px solid rgba(255, 93, 141, 0.16);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(190, 60, 110, 0.2);
  }

  .public-v2 .pv2-elevator img {
    width: 22px;
  }

  .public-v2 .pv2-elevator .pv2-elevator-label {
    display: block;
    color: var(--public-brand);
    font-size: 12px;
    line-height: 12px;
    font-weight: 700;
  }

  .public-v2 .pv2-elevator button[aria-label="联系客服"]::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #45cc86;
    box-shadow: 0 0 0 3px rgba(69, 204, 134, 0.18);
  }

  /* ── 页脚法务区：压缩占位（备案信息保持常驻展示，规则链接收成单行滑动） ── */
  .public-v2 .pv2-footer-legal {
    gap: 6px;
    font-size: 12px;
    line-height: 1.7;
  }

  .public-v2 .pv2-footer-legal p {
    margin: 2px 0 0;
  }

  /* 备案/许可等 span 改为流式排布，短行自动并拢 */
  .public-v2 .pv2-footer-legal span {
    display: inline;
    margin: 0 12px 0 0;
  }

  /* 规则链接收成单行横向滑动条：不藏链接，右缘渐隐提示可滑 */
  .public-v2 .pv2-footer-policy-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px 18px;
    margin-top: 8px;
    padding: 2px 56px 4px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }

  .public-v2 .pv2-footer-policy-links::-webkit-scrollbar {
    display: none;
  }

  .public-v2 .pv2-footer-policy-links a {
    flex: none;
    white-space: nowrap;
    font-size: 12px;
  }

  /* ── 底部留白：避免 Footer 被 TabBar 遮挡 ── */
  .public-v2 .pv2-footer {
    margin-top: 16px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .public-v2 .pv2-elevator button {
    transition: none;
  }
}