/* ==========================================================================
   responsive.css —— 全站统一响应式自适应增强层
   --------------------------------------------------------------------------
   设计原则：
   1. 本文件只做「小屏适配」，PC 端（>=1024px）不写任何规则，因此 PC 端
      原有交互 / 配色 / 排版 100% 保持不变；
   2. 全部规则通过 @media 媒体查询包裹，断点统一为：
        >=1024px  电脑（本文件不介入）
        768~1024  平板
        <768px    手机
        额外补 <480px 极小屏
   3. 只做「降列 / 收边距 / 允许滚动 / 换行」这类安全增强，不改任何尺寸
      以外的东西；不覆盖业务配色与交互。
   4. 所有容器统一 box-sizing:border-box，避免 padding 撑破宽度。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 全局兜底：禁止横向滚动 + 统一盒模型
   （body 已在 style.css 设 overflow-x:hidden，这里对 html 也兜底，
     并允许长内容（URL / 代码 / 连续英文）自动换行，杜绝撑宽视口）
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { overflow-x: hidden; }

img, video, canvas, svg { max-width: 100%; height: auto; }

/* 长词 / 长 URL 折行，避免撑破容器（PC 端视觉几乎无感，仅极端长串生效） */
@media (max-width: 1023px) {
  body { overflow-x: hidden; }
  .form-input, .form-control, .u-input, input, textarea, select { max-width: 100%; }
}

/* ==========================================================================
   一、平板段：768px ~ 1024px
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- 通用容器：限制最大宽并内收边距 --- */
  .content { padding-left: clamp(16px, 3vw, 28px); padding-right: clamp(16px, 3vw, 28px); }

  /* --- 多列统计卡：4 列 -> 2 列 --- */
  .stats-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-grid,
  .chat-stat-grid,
  .monitor-metrics,
  .order-stats,
  .detail-stats,
  .quota-stat-grid,
  .tag-stat-cards,
  .help-doc-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* --- 表头固定宽度表格：允许横向滚动而不是撑破布局 --- */
  .table-card { overflow: hidden; }
  .table-card > .table-responsive,
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- 通用内联 grid 表单：3 列 -> 2 列 --- */
  .form-grid.col-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* --- 自动填充型网格：给一个更小的最小列宽，避免窄屏溢出 --- */
  .endpoint-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; }
  .feedback-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
  .member-levels-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }

  /* --- 首页模板网格降列 --- */
  .nova-home .bento-grid,
  .tm-grid,
  .tm-channel-grid,
  .ml-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* --- 大量固定的横向 flex 行：允许换行，避免挤压 --- */
  .date-range,
  .confirm-images,
  .copy-row,
  .share-row,
  .pf-row,
  .recent-row,
  .shop-tabs { flex-wrap: wrap; }

  /* --- 内联 flex 行：平板起就允许换行 --- */
  [style*="display: flex"],
  [style*="display:flex"] { flex-wrap: wrap; }

  /* --- 原生 <table> 若无滚动容器包裹，统一由表格容器兜底 --- */
  table { max-width: 100%; }
}

/* ==========================================================================
   二、手机段：< 768px  （重点：卡片单列 / 收边距 / 收敛固定宽度）
   ========================================================================== */
@media (max-width: 767px) {
  /* --- 内容区与顶栏：进一步收边距 --- */
  .content { padding: 16px 14px 32px !important; }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-right { gap: 8px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-head h1, .page-head h2 { font-size: 20px; }

  /* --- 所有多列卡片/统计卡一律单列 --- */
  .stats-cards,
  .stat-grid,
  .chat-stat-grid,
  .monitor-metrics,
  .order-stats,
  .detail-stats,
  .quota-stat-grid,
  .tag-stat-cards,
  .help-doc-grid,
  .sign-stats,
  .sign-reward-grid,
  .ann-stat-grid,
  .ticket-stats { grid-template-columns: 1fr !important; }

  /* --- 通用表单：双列/三列 -> 单列 --- */
  .form-grid,
  .form-grid.col-2,
  .form-grid.col-3,
  .member-form-grid-2,
  .member-form-grid-3,
  .sign-form-grid { grid-template-columns: 1fr !important; }

  /* --- 自动填充网格：最小列宽下调，保证单列不溢出 --- */
  .endpoint-grid { grid-template-columns: 1fr !important; }
  .feedback-grid { grid-template-columns: 1fr !important; }
  .member-levels-grid,
  .package-grid,
  .pkg-grid { grid-template-columns: 1fr !important; }

  /* --- 首页 / 媒体网格：单列 --- */
  .nova-home .bento-grid,
  .tm-grid,
  .tm-channel-grid,
  .ml-grid,
  .g-grid,
  .a-grid,
  .lc-row,
  .lc-row-2 { grid-template-columns: 1fr !important; }
  .tpl-page .tpl-grid { grid-template-columns: 1fr !important; }
  .tm-masonry { columns: 1 !important; }

  /* --- 左右分栏（生成器 / 会员 / 文章 / 设置 等）统一堆叠为单列 --- */
  .ai-studio-layout,
  .vid-gen-workspace,
  .member-layout,
  .art-wrap,
  .messages-layout,
  .settings-layout,
  .categories-layout,
  .chat-detail-grid,
  .form-layout,
  .ai-layout { grid-template-columns: 1fr !important; display: block; }

  /* 分栏内固定宽侧栏在手机端占满 */
  .ai-studio-side,
  .ai-sessions { width: 100% !important; flex-shrink: 1; max-height: none; }

  /* --- 固定 min-width 的弹窗信息栏：手机端放开 --- */
  .video-modal-info,
  .upload-modal-info,
  .image-modal-info { min-width: 0 !important; max-width: 100% !important; }

  /* --- 弹窗：占满可用宽度，去掉过大固定宽 --- */
  .modal-box,
  .modal-panel,
  .upgrade-modal { width: 94vw !important; max-width: 94vw !important; margin: 0 auto; }
  .modal-box { max-height: 88vh; overflow-y: auto; }

  /* --- 表格：统一允许横向滚动 --- */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table th,
  .data-table td { padding: 10px 12px; }
  .uc-table th,
  .uc-table td { padding: 10px 12px; }

  /* --- 大固定内边距收敛 --- */
  .db-card-body,
  .card-body { padding: 16px !important; }
  .db-card-head,
  .card-header { padding: 14px 16px !important; flex-wrap: wrap; gap: 10px; }
  .upload-area { padding: 24px 14px !important; }
  .empty-state { padding: 36px 16px !important; }
  .pay-modal,
  .pkg-card,
  .tm-feature-overlay { padding: 20px 16px !important; }

  /* --- 横向 flex 行统一换行 --- */
  .date-range,
  .confirm-images,
  .copy-row,
  .share-row,
  .pf-row,
  .recent-row,
  .filter-bar,
  .ann-bar { flex-wrap: wrap; }

  /* --- 通用：任何内联 flex 行（display:flex）都允许换行，避免元素挤成一行 --- */
  [style*="display: flex"],
  [style*="display:flex"] { flex-wrap: wrap; }

  /* --- 内联固定宽度元素（三位数及以上 px 值，如 width:560px / width:1200px）
         不得超出视口；用精确串匹配，避免误伤 width:5px 之类的小图标 --- */
  [style*="width: 1000px"], [style*="width:1000px"],
  [style*="width: 1200px"], [style*="width:1200px"],
  [style*="width: 560px"],  [style*="width:560px"],
  [style*="width: 600px"],  [style*="width:600px"],
  [style*="width: 640px"],  [style*="width:640px"],
  [style*="width: 660px"],  [style*="width:660px"],
  [style*="width: 680px"],  [style*="width:680px"],
  [style*="width: 760px"],  [style*="width:760px"],
  [style*="width: 800px"],  [style*="width:800px"],
  [style*="width: 880px"],  [style*="width:880px"],
  [style*="width: 900px"],  [style*="width:900px"],
  [style*="width: 920px"],  [style*="width:920px"],
  [style*="width: 960px"],  [style*="width:960px"] { width: auto !important; max-width: 100% !important; }

  /* --- 内联大内边距卡片：手机端统一收敛（精确匹配内联 padding 值） --- */
  [style*="padding: 32px"], [style*="padding:32px"],
  [style*="padding: 40px"], [style*="padding:40px"],
  [style*="padding: 44px"], [style*="padding:44px"],
  [style*="padding: 48px"], [style*="padding:48px"],
  [style*="padding: 56px"], [style*="padding:56px"],
  [style*="padding: 32px 24px"], [style*="padding:32px 24px"],
  [style*="padding: 40px 44px"], [style*="padding:40px 44px"],
  [style*="padding: 46px 40px 36px"] { padding: 20px 16px !important; }

  /* --- 空态大占位块：收敛内边距与底部间距 --- */
  [style*="padding: 48px 20px"], [style*="padding:48px 20px"],
  [style*="margin-bottom: 48px"], [style*="margin-bottom:48px"] { padding: 28px 16px !important; margin-bottom: 24px !important; }

  /* --- 按钮组：允许换行且不撑破 --- */
  .action-btns { flex-wrap: wrap; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* --- 顶部筛选栏输入框：窄屏占满 --- */
  .filter-bar { width: 100%; }
  .filter-bar .u-input,
  .filter-bar input[type="text"] { width: 100% !important; }

  /* --- 图片：任何情况下不超出容器（含内联写死宽度的缩略图） --- */
  img, video, canvas { max-width: 100% !important; height: auto; }

  /* --- 内联双列网格（grid-template-columns: 1fr 1fr）在手机端降单列 --- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* --- 内联 grid 多列（repeat）在手机端降单列 --- */
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }

  /* --- 搜索框 / 筛选栏：手机端占满整行 ---
         注：此前各列表页搜索框内联的 min-width:220~260px 与 width:200~260px
         已在模板源码中改为 flex:1;min-width:0（源头修复），此处只做
         容器级的「占满整行」兜底，无需再靠属性选择器逐个匹配硬编码值 --- */
  .search-mini,
  .aq-filter-search { width: 100% !important; min-width: 0 !important; }
  .search-mini input,
  .aq-filter-search input { width: 100% !important; }

  /* 通用搜索框（style.css .search-box 已改为 flex 弹性）：占满整行 */
  .search-box { min-width: 0 !important; width: 100%; max-width: 100%; }
  .search-box input { width: 100% !important; min-width: 0; }

  /* 设置项右侧控件：手机端占满整行 */
  .setting-row-control { width: 100%; }
  .setting-row-control .form-input,
  .setting-row-control .form-select { width: 100% !important; }

  /* 浮层卡片（loading-components.css 已改为 min(360px,92vw)）：窄屏再收内边距 */
  .lc-overlay-card { padding: 24px 20px !important; }
  .lc-overlay .lc-progress { width: 100% !important; }

  /* --- 图片/标题截断类：手机端放开固定 max-width，避免留白或溢出 --- */
  .cell-content { max-width: 100% !important; }

  /* --- Toast 宽度收敛 --- */
  .toast { max-width: calc(100vw - 32px); }
}

/* ==========================================================================
   三、极小屏：< 480px （列表卡片 / 快捷入口 再降一档）
   ========================================================================== */
@media (max-width: 479px) {
  /* 用户中心快捷入口：2 列 -> 仍 2 列但更紧凑（避免 1 列过长） */
  .uc-quick-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .uc-quick { padding: 16px !important; }
  .uc-quick-item { padding: 12px 4px; }
  .uc-quick-item .icon { width: 38px; height: 38px; font-size: 19px; }

  /* 登录 / 注册 / 找回密码 表单面板：边距收敛 */
  .lp-form { padding: 28px 20px !important; }

  /* 极小屏按钮：全宽更易点 */
  .page-head .btn { width: 100%; justify-content: center; }

  /* 表格内边距再收 */
  .data-table th,
  .data-table td { padding: 8px 10px; font-size: 12px; }

  /* 统计卡数值字号收敛，避免挤压 */
  .stat-num { font-size: 22px; }
  .stat-card .stat-value,
  .s-val { font-size: 22px !important; }
}