/* ============================================================
   普天科创公共服务平台 · 响应式适配层 (responsive.css)

   定位：移动端/小屏补丁，集中管理，避免样式散落。
   加载：必须在各页面自身 CSS 之后引入（否则被覆盖）。
   断点：768px = 手机/平板竖屏；480px = 小屏手机加强。

   覆盖目标（由移动端体检脚本实测得出）：
   1) 首页三个 Tab 总宽 534px 被 overflow:hidden 裁切 → 第 3 个不可点
   2) Banner 装饰环 500px / 光晕 450px 在小屏失衡
   3) 概念验证 .settings-panel 硬编码 480px 溢出
   4) 触控目标 < 44px（页脚链接、面包屑、复选框 13px）
   5) 字号 9/10/11px 低于移动端可读下限
   ============================================================ */

/* ---------- 1. 全局：防横向溢出 ---------- */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
  }
  /* 长英文 / 连续字符强制换行，避免撑破容器 */
  h1, h2, h3, h4, p, span, a, li, td, th, label, div {
    overflow-wrap: anywhere;
  }
  /* 表格横向滚动容器（后台/订单/列表页） */
  div:has(> table),
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 2. 触控目标：补齐 44px 可点区域 ---------- */
@media (max-width: 768px) {
  /* 页脚链接 */
  footer a,
  .footer-link {
    display: inline-block;
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 1.4;
  }
  footer li { margin-bottom: 0; }

  /* 面包屑 / 站内小链接 */
  nav a[href]:not(.nav-link):not(.tab-btn),
  .breadcrumb a,
  .breadcrumb span {
    display: inline-block;
    padding: 8px 0;
  }

  /* 图标按钮（28x28 → 36x36）：顶部栏 / 主体区 / 设置面板 / 弹窗 */
  .top-header button,
  .app-layout button:not(.tab-btn),
  .chat-area button,
  .settings-panel button,
  .pt-modal-box button {
    min-width: 36px;
    min-height: 36px;
  }

  /* 移动端汉堡菜单按钮（Tailwind w-9 在 flex 下被压缩） */
  button.lg\:hidden {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  /* 胶囊按钮（展开更多等）高度补足 */
  button.rounded-full {
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* 复选框 / 单选框放大至易点尺寸 */
  input[type="checkbox"],
  input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
  }
}

/* ---------- 3. 字号下限：移动端不小于 12px ---------- */
@media (max-width: 768px) {
  .text-\[9px\],
  .text-\[10px\],
  .text-\[11px\] {
    font-size: 12px !important;
  }
  .cert-badge { font-size: 12px; }
}

/* ---------- 4. 通用容器：收窄左右留白 ---------- */
@media (max-width: 768px) {
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  main,
  section,
  .page-header {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ---------- 5. 首页：Banner ---------- */
@media (max-width: 768px) {
  .promo-banner {
    min-height: 400px;
    padding: 56px 0;
  }
  .promo-deco-ring {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -70px;
  }
  .promo-glow {
    width: 240px;
    height: 240px;
    top: 12%;
    left: 38%;
  }
  .enter-btn-lg {
    padding: 13px 22px;
    font-size: 14px;
  }
}

/* ---------- 6. 首页：Tab 切换（核心修复） ----------
   原本三个 Tab 合计约 534px，在 375px 视口下被容器
   overflow:hidden 裁掉，第三个「公共技术服务」无法触达。
   方案：紧凑排版 + 允许横向滑动兜底。            */
@media (max-width: 768px) {
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 2px;
    padding: 5px;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

  .tab-btn {
    flex: 0 0 auto;
    padding: 10px 12px;
    font-size: 13px;
    gap: 6px;
  }
  .tab-btn .tab-icon-wrap {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }
  .tab-btn .tab-icon-wrap svg {
    width: 15px;
    height: 15px;
  }
}

/* 小屏手机：进一步压缩，保证三个 Tab 同屏可见 */
@media (max-width: 480px) {
  .tab-btn {
    padding: 10px 8px;
    font-size: 12px;
    gap: 4px;
  }
  .tab-btn .tab-icon-wrap {
    width: 22px;
    height: 22px;
  }
  .tab-btn .tab-icon-wrap svg {
    width: 13px;
    height: 13px;
  }
}

/* ---------- 7. 概念验证页 ---------- */
/* 汉堡按钮与遮罩：仅移动端显示 */
.sidebar-toggle,
.sidebar-overlay { display: none; }

@media (max-width: 768px) {
  /* 顶部栏收紧：返回链接与平台名隐藏（侧边栏内有返回入口） */
  .top-header .back-link,
  .top-header .platform-name { display: none; }
  .top-header .logo { margin-left: 12px; }

  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary, #475569);
    cursor: pointer;
  }
  .sidebar-toggle:active { background: rgba(0, 0, 0, 0.06); }

  /* 侧边栏默认收起，点击汉堡滑出 */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .sidebar.open { transform: translateX(0); }

  /* 半透明遮罩：点击关闭抽屉 */
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: var(--header-h, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 31, 61, 0.45);
    z-index: 89;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .sidebar-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* 设置面板宽 480px 硬编码 → 按视口收敛 */
  .settings-panel {
    width: min(480px, calc(100vw - 32px)) !important;
    max-height: 72vh;
  }
  .messages-container { padding: 14px; }
  .input-area { padding: 10px; }
}

/* ---------- 8. 采购商城：抽屉与卡片 ---------- */
@media (max-width: 768px) {
  /* 侧滑面板（购物车/订单）小屏铺满 */
  .slide-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 抽屉内关闭按钮补足触控区 */
  .slide-panel button {
    min-width: 40px;
    min-height: 40px;
  }
  .top-nav .max-w-7xl { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- 9. 新闻列表 / 详情 ---------- */
@media (max-width: 768px) {
  .news-card,
  .news-item {
    padding: 14px;
  }
  .page-header { padding-top: 32px; padding-bottom: 32px; }
}

/* ---------- 10. 登录/注册弹窗（由 js/auth.js 动态注入） ---------- */
@media (max-width: 768px) {
  .pt-modal-box {
    width: calc(100vw - 32px) !important;
    max-width: 400px !important;
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px 20px !important;
  }
  /* 弹窗内文字链接（忘记密码 / 立即注册）扩大触控区 */
  .pt-modal-box a {
    display: inline-block !important;
    padding: 10px 2px !important;
  }
  /* 弹窗内输入框保持 16px 以上，避免 iOS 聚焦时自动缩放页面 */
  .pt-login-input,
  .pt-modal-box input {
    font-size: 16px !important;
  }
}

/* ---------- 11. 动态生成内容（概念验证步骤序号等） ---------- */
@media (max-width: 768px) {
  /* 行动步骤序号 */
  .step-num {
    font-size: 12px !important;
    min-width: 22px;
    height: 22px;
  }
  /* 阶段进度圆点：同步放大，避免字号撑破圆形 */
  .stage-dot {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }
  .text-\[11\.5px\],
  .text-\[11px\] {
    font-size: 12px !important;
  }
  /* 阶段卡片描述 */
  .sc-desc {
    font-size: 12px !important;
  }
  /* 新闻分类标签 */
  .category-badge {
    font-size: 12px !important;
  }
}

/* ---------- 12. 尊重减少动效偏好（无障碍） ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}