/* ============================================================================
   aliboba · 移动端适配层
   在 liquid-glass.css 之后加载。

   背景：复刻站的原产物是桌面优先的 —— 从 bundle 里统计到的实际痛点：
     · .w-main { width: 1080px }          ← 固定版心
     · 97 处固定宽度侧栏 w-[200px]/[250px]/[300px]
     · 30 处宽容器 w-[1200px] / w-[1552px] / .w-main
     · 66 处 flex-none（不允许收缩）
     · 21 处表格列 min-w-[Npx]
   所以手机上一打开就横向溢出、侧栏挤成一团。

   断点：≤1024（平板）/ ≤768（手机横屏、小平板）/ ≤480（手机竖屏）
   策略：容器改流式 → 固定宽侧栏允许收缩并换行 → 表格横向滚动而非撑破页面
   ========================================================================== */

/* ============================================================================
   0. 宽屏溢出修复（原站的真实缺陷）
   实测：1440px 视口下，.w-main 命中 xl:w-[1552px] → 1552px 宽，
   溢出 112px，因为根节点是 .overflow-x-hidden，溢出的部分被裁掉，
   右侧 260px 的「铺货排行榜」整个看不见。
   1600px 以下把固定版心改成「不超过视口」。
   ========================================================================== */
@media (max-width: 1600px) {
  .w-main,
  [class*="w-[1552px]"],
  [class*="w-[1200px]"] {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
  }
}

/* ============================================================================
   轮播（antd Carousel / slick）归一化
   前面的「固定宽一律 auto」规则会破坏 slick 内部滑轨的尺寸计算，
   在小屏上会算出 33554432px(2^25) 这种异常宽度，必须显式接管。
   ========================================================================== */
@media (max-width: 1024px) {
  .ant-carousel,
  .ant-carousel .slick-slider,
  .ant-carousel .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .ant-carousel .slick-track {
    width: auto !important;
    max-width: none !important;
  }
  .ant-carousel .slick-slide,
  .ant-carousel .slick-slide > div,
  .ant-carousel .slick-slide img,
  .ant-carousel img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
  }
  .ant-carousel .slick-dots {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 轮播外层容器也跟着约束 */
  .ant-carousel > *,
  [class*="ant-carousel"] > div {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* ---------------------------------------------------------------- 基础 */
@media (max-width: 1024px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  /* 所有固定像素宽度的元素最多不超过视口 */
  [class*="w-["] { max-width: 100% !important; }

  /* 版心与超宽容器 → 流式 */
  .w-main,
  [class*="w-[1200px]"],
  [class*="w-[1552px]"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
  }

  /* antd 表格：自身横向滚动，不要把页面撑破 */
  .ant-table-wrapper,
  .ant-table-container {
    max-width: 100%;
  }
  .ant-table-content,
  .ant-table-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 商品网格：源站是 grid-cols-6 写死，窄屏必须降列 ---- */
  [class~="grid-cols-6"], [class~="grid-cols-5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  [class~="grid-cols-4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* 栅格子项允许收缩，避免内容把格子撑开 */
  [class*="grid-cols"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* 格子里的大图/骨架屏一律随格宽 */
  [class*="grid-cols"] .ant-skeleton-element,
  [class*="grid-cols"] .ant-skeleton-avatar,
  [class*="grid-cols"] .ant-skeleton-button,
  [class*="grid-cols"] .ant-image,
  [class*="grid-cols"] img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  [class*="grid-cols"] [class~="size-[240px]"],
  [class*="grid-cols"] [class~="size-[200px]"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  /* ---- 商品卡：原来是固定宽 + flex-none 的排列，窄屏要能收缩 ---- */
  [class~="flex-none"] {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  /* 商品卡本身：固定宽 → 可收缩 */
  [class~="w-[252px]"],
  [class~="w-[240px]"],
  [class~="w-[250px]"],
  [class~="w-[200px]"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* 卡内固定 240px 的图改成随卡片宽度 */
  [class~="size-[240px]"],
  [class~="size-[200px]"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  [class~="size-[240px]"] img,
  [class~="size-[200px]"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* 横向 flex 容器一律允许换行（商品行、筛选行、标签行） */
  [class*="flex"][class*="space-x-"],
  [class*="flex"][class*="gap-"] {
    flex-wrap: wrap !important;
  }
  /* 固定高度的横向容器改为自适应，否则换行后内容被裁 */
  [class*="h-[600px]"], [class*="h-[500px]"], [class*="h-[400px]"], [class*="h-[360px]"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 顶部工具条：允许换行 + 横向滚动 */
  div[class*="h-[35px]"][class*="box-content"] {
    height: auto !important;
    padding-bottom: 6px !important;
  }
  div[class*="h-[35px]"] > div[class*="w-main"],
  div[class*="h-[35px]"] > div[class*="w-["] {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    height: auto !important;
    min-height: 35px;
  }
}

/* ------------------------------------------------------------ 手机横屏 */
@media (max-width: 768px) {
  /* 固定宽侧栏 → 允许收缩，并在需要时换行到下一行 */
  [class~="w-[200px]"],
  [class~="w-[250px]"],
  [class~="w-[300px]"],
  [class~="w-[350px]"],
  [class~="w-[500px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* flex-none 的元素在小屏允许收缩 */
  [class~="flex-none"] {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* 常见一行多列布局：小屏改为竖排 */
  [class*="flex"][class*="items-center"][class*="space-x-"],
  [class*="flex"][class*="justify-between"][class*="gap-"] {
    flex-wrap: wrap !important;
  }

  /* 页面留白收紧 */
  .main[data-v-7946e613] {
    padding: 0 10px !important;
  }

  /* antd：弹窗全屏化、表格单元格留白收紧 */
  .ant-modal {
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    top: 8px !important;
  }
  .ant-modal-body {
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  .ant-form-item {
    margin-bottom: 12px !important;
  }
  .ant-picker-panel-container {
    max-width: calc(100vw - 16px) !important;
  }
  /* 下拉/气泡不要超出视口 */
  .ant-select-dropdown,
  .ant-picker-dropdown,
  .ant-dropdown,
  .ant-popover {
    max-width: calc(100vw - 16px) !important;
  }

  /* 悬浮快捷坞：移到右下角并缩小，避开内容 */
  .fixed-menu {
    right: 12px !important;
    bottom: 12px !important;
    transform: scale(.9);
    transform-origin: right bottom;
  }
  .lg-toggle {
    left: 12px !important;
    bottom: 12px !important;
    transform: scale(.9);
    transform-origin: left bottom;
  }

  /* 皮肤自带的高光跟随在触屏上没意义，关掉省电 */
  .lg-spec::after { display: none !important; }

  /* 触控目标不小于 40px */
  .top-link[data-v-05309254] { min-height: 34px; }
  .ant-btn:not(.ant-btn-sm):not(.ant-btn-xs) { min-height: 36px; }
}

/* ------------------------------------------------------------ 手机竖屏 */
@media (max-width: 480px) {
  body {
    font-size: 13px !important;
  }

  /* 更激进的竖排：几乎所有 flex 行都允许换行 */
  [class*="flex"] {
    flex-wrap: wrap;
  }
  /* 但按钮组、标签组保持不换行的可读性 */
  [class*="ant-space"],
  .ant-btn-group,
  .tags-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }

  /* 固定宽度一律流式 */
  [class*="w-["] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* 表单控件占满整行 */
  .ant-form-item-control,
  .ant-select,
  .ant-picker,
  .ant-input-number,
  .ant-input-affix-wrapper {
    width: 100% !important;
  }

  /* 分步/多列表单 → 单列 */
  [class*="space-x-"] > * {
    margin-left: 0 !important;
  }

  /* 表格：小屏隐藏次要列（保留前 3 列 + 操作列） */
  .ant-table-tbody > tr > td:nth-child(n+5):not(:last-child),
  .ant-table-thead > tr > th:nth-child(n+5):not(:last-child) {
    display: none !important;
  }

  /* 弹窗接近全屏 */
  .ant-modal {
    max-width: calc(100vw - 8px) !important;
    margin: 4px auto !important;
  }
  .ant-modal-header,
  .ant-modal-body,
  .ant-modal-footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 页脚竖排居中 */
  div[class*="h-[100px]"][class*="border-t"] {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center;
    padding: 18px 12px 22px !important;
  }

  /* 悬浮坞改成一排横条，放到底部 */
  .fixed-menu {
    right: auto !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translateX(-50%) scale(.92);
    transform-origin: center bottom;
    flex-direction: row !important;
  }
  .lg-toggle {
    display: none !important;    /* 小屏没地方放，靠系统深色模式 */
  }

  /* 手机竖屏：网格降到 2 列 */
  [class~="grid-cols-6"], [class~="grid-cols-5"],
  [class~="grid-cols-4"], [class~="grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* 纵向列表（如右栏「铺货排行榜」）：列表项里的 truncate(nowrap) 会把
     最小宽度撑到文字全长，必须显式约束宽度 */
  [class*="overflow-y-auto"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  [class*="overflow-y-auto"] > li,
  [class*="overflow-y-auto"] > div,
  [class*="overflow-y-auto"] > li > *,
  [class*="overflow-y-auto"] > div > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  [class~="truncate"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 最终兜底：小屏下内容区任何元素都不得超过其容器宽度。
     表格除外 —— 表格需要保持横向滚动，由 .ant-table-content(overflow-x:auto) 负责。 */
  .main * { max-width: 100% !important; }
  .main .ant-table table,
  .main .ant-table-content *,
  .main .ant-table-body *,
  .main .ant-table-header * {
    max-width: none !important;
  }
  /* 公告轮播容器（实测不受父容器约束的那个） */
  [class*="bg-[#e7eff9]"],
  [class*="bg-[#e7eff9]"] .ant-carousel,
  [class*="bg-[#e7eff9]"] .slick-slider,
  [class*="bg-[#e7eff9]"] .slick-list {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 兜底：小屏下内容区所有元素的 min-width 归零。
     flex 子项默认 min-width:auto，会被长文本（公告、商品名）撑破容器。 */
  .main * { min-width: 0 !important; }
  /* 长文本允许换行，不要靠 nowrap 撑宽 */
  .announce-content, .announce-content p, .announce-content div {
    white-space: normal !important;
    word-break: break-all;
  }

  /* 小屏兜底：任何「不允许收缩」的固定栏改为独占整行（右侧排行榜会落到内容下方） */
  [class~="flex-shrink-0"], [class~="flex-none"] {
    flex: 0 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 兜底：内容区里任何元素都不得超出其容器（防止 antd 组件的最小宽度撑破布局） */
  .main [class*="ant-tabs"],
  .main [class*="ant-table"],
  .main [class*="ant-form"],
  .main [class*="overflow-hidden"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .ant-tabs-nav-wrap, .ant-tabs-tabpane, .ant-tabs-nav-list {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* flex 子项默认 min-width:auto，会被内容撑破父容器（360px 下的真实问题） */
  [class~="flex-1"], [class~="flex-auto"], [class~="flex-initial"],
  [class~="flex-none"], [class~="flex-shrink-0"] {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  /* 固定宽度一律允许收缩 */
  [class*="w-["] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* 长文本容器允许断行，避免撑宽 */
  [class*="overflow-hidden"], [class*="overflow-y-auto"] {
    min-width: 0 !important;
  }

  /* 进一步收紧留白 */
  .main[data-v-7946e613] { padding: 0 8px !important; }
}

/* ------------------------------------------------- 横屏手机（矮屏） */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .ant-modal-body { max-height: calc(100vh - 120px); }
  .fixed-menu { transform: scale(.8); }
}

/* ------------------------------------------------- 触屏优化 */
@media (hover: none) {
  /* 桌面 hover 效果在触屏上会「卡住」，去掉 */
  [class*="hover:bg-main"]:hover { background: inherit; }
  .lift:hover { transform: none; }
  .card:hover, .stat:hover, .goods:hover, .plat:hover { transform: none; }
  /* 加大可点区域 */
  .tb-btn, .opt-btn { min-height: 32px; padding: 0 12px !important; }
}

/* 安全区（iPhone 刘海 / 底部横条） */
@supports (padding: max(0px)) {
  @media (max-width: 480px) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    .fixed-menu {
      bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
    div[class*="h-[100px]"][class*="border-t"] {
      padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
    }
  }
}