/* ============================================================
 * service/mobile.css
 * 移动端兼容 / 抽屉化 / 浏览器补丁 / 全局交互一致性
 * 来源 app.css L1902-2516 + L2517-2695 + L4152-4259 + L5526-5975 + L5976-6105 + L6106-6282
 * 加载顺序：永远放最后，覆盖业务页样式
 * ============================================================ */

/* ============================================================
 * 移动端 / 小屏:侧边栏抽屉化 (<= 768px)
 * ============================================================ */
.pve-mobile-trigger {
  display: none;
}
.pve-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-backdrop);
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
@media (max-width: 768px) {
  /* ================================================
   * 移动端:侧栏改为顶部固定导航条(常驻显示,非抽屉)
   * 不再使用汉堡按钮 / 遮罩 / 打开-收起逻辑
   *
   * 兼容性要点:
   * - 用 env(safe-area-inset-top) 让 iPhone 刘海/灵动岛不覆盖图标
   * - touch-action: manipulation 去掉 300ms 点击延迟(老 Android Chrome)
   * - -webkit-tap-highlight-color 关掉 iOS 灰色高亮
   * - overscroll-behavior 防止横向滑动触发 Safari 下拉刷新
   * - 关键属性都用静态布局(无 100vh / dvh),避开 iOS 地址栏抖动
   * ================================================ */
  #pve-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* 抵消桌面态 base.css 给 flex item 锁的 flex/width,移动端 sidebar 不是 flex 子项,
     * 而是 position:fixed 横栏 → 必须让 left+right 决定宽度,不能让 width:48px/242px 钉死。
     * 同时 transition 也清掉,移动端没有"展开/收起"动画语义。 */
    flex: initial;
    width: auto;
    transition: none;
    z-index: var(--z-sidebar);
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transform: none;
    padding-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: 0;
    padding-right: env(safe-area-inset-right, 0px);
  }
  /* 占位骨架(异步渲染前):防止跳动 */
  #pve-sidebar:empty {
    width: 100%;
    height: 56px;
    background: #ffffff;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  /* 顶部栏内部:横向布局,固定 56px(不依赖 vh,iOS 地址栏伸缩不影响) */
  #pve-sidebar .pve-sidebar-shell,
  #pve-sidebar .pve-sidebar-shell.collapsed {
    width: 100% !important;
    height: 56px;
    min-height: 56px;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border-right: none;
    transition: none;
    /* 给「团队方向」绝对定位提供 containing block */
    position: relative;
  }

  /* 左:品牌徽标(只保留 logo,隐藏文案与折叠按钮) */
  #pve-sidebar .sidebar-brand-shell {
    flex-shrink: 0;
    padding: 0 10px 0 12px;
    height: 56px;
    border-bottom: none;
  }
  #pve-sidebar .sidebar-brand-copy,
  #pve-sidebar .sidebar-brand-toggle {
    display: none !important;
  }

  /* 中:导航条(可横向滚动,容纳全部主导航)
     注意:右侧预留 56px 给个人信息头像按钮(团队方向已搬到个人菜单内),避免被遮挡 */
  #pve-sidebar .pve-sidebar-scroll {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    padding: 0 56px 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* 仅允许水平 pan + 双指缩放,纵向手势/点击直通,避免吞掉子按钮 click */
    touch-action: pan-x pinch-zoom;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    align-items: center;
  }
  #pve-sidebar .pve-sidebar-scroll::-webkit-scrollbar { display: none; }

  /* 隐藏只在桌面侧栏才有意义的块 */
  #pve-sidebar .sidebar-top-action,
  #pve-sidebar .sidebar-block > .sidebar-section-title,
  #pve-sidebar .sidebar-section-head,
  #pve-sidebar .sidebar-hint-card,
  #pve-sidebar .sidebar-team-empty,
  #pve-sidebar .sidebar-nav-children,
  #pve-sidebar .sidebar-footer-link {
    display: none !important;
  }
  #pve-sidebar .sidebar-block { margin-top: 0; }

  /* 移动端：团队方向收纳为下拉触发器，点击展开选择列表
     关键:从 .pve-sidebar-scroll 的横向滚动流中移出,绝对定位到 shell 右侧（个人信息左边）,
     避开 iOS/Android 滚动容器对子按钮 click 的「pan 手势抢占」 */
  #pve-sidebar .sidebar-block-team {
    display: flex !important;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    /* 右移让出 56px 给 .sidebar-footer(个人信息) */
    right: 56px;
    bottom: 0;
    z-index: 5;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.96) 18px,
      rgba(255, 255, 255, 0.96) 100%
    );
    padding-left: 18px;
    padding-right: 4px;
    pointer-events: auto;
  }
  /* 桌面端的内容（标题、原列表、原 add 按钮、空态）在移动端全部隐藏，由 .sidebar-team-mobile 接管 */
  #pve-sidebar .sidebar-block-team .sidebar-section-head,
  #pve-sidebar .sidebar-block-team .sidebar-team-body,
  #pve-sidebar .sidebar-block-team .sidebar-team-add,
  #pve-sidebar .sidebar-block-team .sidebar-team-empty-inline {
    display: none !important;
  }
  /* 主导航与团队方向紧贴在一起，不再使用竖线分隔 */
  #pve-sidebar .sidebar-block-team::before {
    display: none;
  }

  /* 触发器：与 .sidebar-nav-item 视觉一致 —— 上图标下文字，紧凑无边框 */
  #pve-sidebar .sidebar-team-mobile {
    display: flex;
    align-items: center;
    position: relative;
    /* 独立层叠，避免被相邻 nav 项的 transform/stacking context 遮挡 */
    isolation: isolate;
    z-index: 2;
  }
  #pve-sidebar .sidebar-team-mobile-trigger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-shrink: 0;
    /* 真机命中区放大到 ≥44x44,符合 iOS HIG / Material 触控规范 */
    min-width: 64px;
    min-height: 52px;
    padding: 6px 12px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #475569;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    /* 兼容性：明确接收事件，禁用文本选择/长按菜单/iOS 高亮 */
    pointer-events: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* manipulation = 单指 pan + 双指 zoom,关闭双击放大,避免 300ms 点击延迟 */
    touch-action: manipulation;
    /* 提升于同级 sidebar-nav-item 之上，规避 stacking 遮挡 */
    position: relative;
    z-index: 1;
    transition: background 0.15s ease, color 0.15s ease;
    /* iOS Safari：button 默认 appearance 在某些机型会破坏 flex */
    -webkit-appearance: none;
    appearance: none;
  }
  /* 关键兼容修复：trigger 子元素全部不接收事件，事件直达 button ——
     避免 lucide 替换成 <svg> 后，部分浏览器把点击落在 svg 上不冒泡 */
  #pve-sidebar .sidebar-team-mobile-trigger > * {
    pointer-events: none;
  }
  #pve-sidebar .sidebar-team-mobile-trigger:active {
    background: rgba(15, 23, 42, 0.08);
  }
  /* 视觉激活态：现代浏览器走 :has，老内核走 .is-open 兜底 */
  #pve-sidebar .sidebar-team-mobile.is-open .sidebar-team-mobile-trigger,
  #pve-sidebar .sidebar-team-mobile:has(.sidebar-team-mobile-menu.open) .sidebar-team-mobile-trigger {
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
  }
  #pve-sidebar .sidebar-team-mobile-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: inherit;
  }
  #pve-sidebar .sidebar-team-mobile-trigger-icon i {
    width: 18px;
    height: 18px;
  }
  #pve-sidebar .sidebar-team-mobile-trigger-label {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  /* 移动端不展示数量、收起箭头等次要装饰 */
  #pve-sidebar .sidebar-team-mobile-trigger-count,
  #pve-sidebar .sidebar-team-mobile-trigger-caret {
    display: none;
  }

  /* 下拉菜单：脱离 .pve-sidebar-scroll 的 overflow 裁剪，固定在视口顶部下方，置顶层 */
  #pve-sidebar .sidebar-team-mobile-menu {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px) + 6px);
    right: 12px;
    left: auto;
    bottom: auto;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 18px 36px -12px rgba(15, 23, 42, 0.28), 0 6px 16px -10px rgba(15, 23, 42, 0.18);
    /* 高于侧栏(60)、页面 sticky header(10) 等所有同屏元素 */
    z-index: var(--z-mobile-sidebar);
  }

  /* 菜单打开时移除顶栏 backdrop-filter，避免其在移动端为 fixed 后代建立
     新的 containing block / 局部层叠上下文，把 z-index:1000 困在 #pve-sidebar
     (z:60) 的栈里、被页面其它 z≥70 元素盖住。
     双轨触发：
       - 现代内核：:has(.sidebar-team-mobile-menu.open)
       - 兜底（iOS<15.4 / 老 X5 / 部分微信 WebView）：JS 同步打的 .has-team-menu-open */
  #pve-sidebar.has-team-menu-open,
  #pve-sidebar:has(.sidebar-team-mobile-menu.open) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #pve-sidebar .sidebar-team-mobile-section {
    padding: 4px 4px 6px;
  }
  #pve-sidebar .sidebar-team-mobile-section-title {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  #pve-sidebar .sidebar-team-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
  }
  #pve-sidebar .sidebar-team-mobile-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 6px 10px 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    color: #475569;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    /* 关闭双击放大,消除 300ms 点击延迟,提升微信/QQ WebView 点击灵敏度 */
    touch-action: manipulation;
    transition: background 0.15s ease, color 0.15s ease;
  }
  /* lucide 把 <i data-lucide> 替换为 <svg> 后,部分微信/X5 WebView 的 touchend
     会落到 svg 上不冒泡,事件直接命中 <a> 即可——子元素全部不接收事件 */
  #pve-sidebar .sidebar-team-mobile-item > * {
    pointer-events: none;
  }
  #pve-sidebar .sidebar-team-mobile-item:active,
  #pve-sidebar .sidebar-team-mobile-item:hover {
    background: rgba(15, 23, 42, 0.045);
    color: #0f172a;
  }
  #pve-sidebar .sidebar-team-mobile-item.is-active {
    background: rgba(59, 130, 246, 0.10);
    color: #1d4ed8;
    font-weight: 600;
  }
  #pve-sidebar .sidebar-team-mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--team-accent, #94a3b8);
    flex-shrink: 0;
  }
  #pve-sidebar .sidebar-team-mobile-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #pve-sidebar .sidebar-team-mobile-check {
    width: 14px;
    height: 14px;
    color: #1d4ed8;
    flex-shrink: 0;
  }

  #pve-sidebar .sidebar-team-mobile-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
    font-size: 12.5px;
    color: #94a3b8;
  }

  #pve-sidebar .sidebar-team-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding: 6px 0 2px;
    border-top: 1px solid #f1f5f9;
  }
  #pve-sidebar .sidebar-team-mobile-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 与菜单项一致:消除 300ms 延迟,微信/QQ WebView 上单击即响应 */
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
  }
  /* lucide <i> -> <svg> 替换后避免事件落在 svg 上不冒泡到 button */
  #pve-sidebar .sidebar-team-mobile-action > * {
    pointer-events: none;
  }
  #pve-sidebar .sidebar-team-mobile-action:active,
  #pve-sidebar .sidebar-team-mobile-action:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
  #pve-sidebar .sidebar-team-mobile-action i {
    width: 16px;
    height: 16px;
    color: #64748b;
  }

  /* 主导航横向排列:icon 在上,文字在下 */
  #pve-sidebar .sidebar-nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    /* iOS 14 以下不支持 flex gap,用 margin 兜底 */
    margin: 0;
  }
  #pve-sidebar .sidebar-nav-item {
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 6px 10px;
    border-radius: 10px;
    min-width: 56px;
    min-height: 44px; /* iOS HIG 最小可点击区域 */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  #pve-sidebar .sidebar-nav-item:active {
    background: rgba(15, 23, 42, 0.08);
  }
  #pve-sidebar .sidebar-nav-item.nav-active::before { display: none; }
  #pve-sidebar .sidebar-nav-item .sidebar-nav-meta { display: none; }
  #pve-sidebar .sidebar-nav-icon-wrap {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  #pve-sidebar .sidebar-nav-icon { width: 18px; height: 18px; }
  #pve-sidebar .sidebar-nav-copy {
    flex: none;
    width: auto;
  }
  #pve-sidebar .sidebar-nav-label-row { gap: 0; }
  #pve-sidebar .sidebar-nav-label {
    font-size: 11px;
    line-height: 1.2;
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* 右:个人头像按钮
     和团队方向一样从横向滚动流中移出,绝对钉到 shell 最右侧,
     保证不被滚动手势抢占 click,且永不会被其他元素遮挡 */
  #pve-sidebar .sidebar-footer {
    flex-shrink: 0;
    position: absolute;
    top: 0;
    right: 4px;
    /* 横屏刘海/挖孔屏：把右侧距离接入安全区，避免头像被屏幕圆角或摄像头岛吞掉 */
    right: max(4px, env(safe-area-inset-right, 0px));
    bottom: 0;
    z-index: 6;
    height: 56px;
    padding: 0 8px;
    border-top: none;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    pointer-events: auto;
  }
  /* 企业空间链接在桌面端的 footer 里,移动端隐藏(已在 demo-nav / 主导航有更易达入口) */
  #pve-sidebar .sidebar-footer .sidebar-footer-link {
    display: none !important;
  }
  #pve-sidebar .sidebar-profile-wrap { margin-top: 0; position: relative; }
  #pve-sidebar .sidebar-profile {
    /* 视觉仍是 40px 圆形头像，外层用 ::before 把热区扩到 44×44，
       既符合 iOS HIG / Material Design 触控规范，又不破坏视觉重量。 */
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    justify-content: center;
    position: relative;
    /* 描边 + 微阴影,从同色背景中浮出,提高可发现性 */
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    background: #ffffff;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  /* 透明热区扩展到 ≥44×44，等比扩张不影响周边 nav 项 */
  #pve-sidebar .sidebar-profile::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: auto;
  }
  #pve-sidebar .sidebar-profile:active {
    background: rgba(15, 23, 42, 0.06);
    transform: scale(0.96);
  }
  /* 触发态(菜单打开)蓝色描边,呼应主导航激活态 */
  #pve-sidebar .sidebar-profile-wrap:has(.dropdown-menu.open) .sidebar-profile,
  #pve-sidebar .sidebar-profile.is-open {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
  }
  /* trigger 子元素不接收事件,防止 lucide <svg> 替换后部分浏览器 click 命中错位 */
  #pve-sidebar .sidebar-profile > * {
    pointer-events: none;
  }
  #pve-sidebar .sidebar-profile-copy,
  #pve-sidebar .sidebar-profile-caret {
    display: none;
  }
  /* 个人菜单从顶部栏下方展开,fixed 脱离 sidebar 的滚动/裁剪 */
  #pve-sidebar .dropdown-menu.sidebar-account-menu {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top, 0px) + 6px);
    bottom: auto;
    /* 横屏接入右侧安全区,避免在刘海屏上贴边被吞 */
    right: max(12px, env(safe-area-inset-right, 0px) + 4px);
    left: auto;
    /* 移动端紧凑宽度: 244 上限,允许跟随视口缩到 200 以下,不再强设 240 min-width */
    width: min(244px, calc(100vw - 24px));
    min-width: 0;
    /* calc 内的 env() 在部分国产 WebView (X5/UC) 下会返回空字符串导致整条 calc 失效,
       这里用 max 兜底 + 后续 svh 行覆盖,确保任意内核都拿到一个有效宽度 */
    max-width: calc(100vw - 24px);
    /* 高度按 视口高 / 小视口高(svh) / 动态视口高(dvh) 三级降级,
       svh 在地址栏伸缩时不抖动,dvh 跟随视口实时变化,旧内核回退到 vh */
    max-height: calc(100vh - 80px);
    max-height: calc(100svh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 底部安全区 padding,避免「退出登录」被 iOS home indicator 或 安卓导航条遮挡 */
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
    box-shadow: 0 18px 36px -12px rgba(15, 23, 42, 0.28),
                0 6px 16px -10px rgba(15, 23, 42, 0.18);
    z-index: var(--z-mobile-sidebar);
  }
  /* 头部身份卡:头像放大,姓名 + 订阅状态各自一行 */
  #pve-sidebar .sidebar-account-menu .sidebar-account-summary {
    padding: 10px 10px 12px;
    gap: 10px;
  }
  #pve-sidebar .sidebar-account-menu .sidebar-account-summary-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  /* 列表项命中区放大到 ≥44px,符合 iOS HIG 触控规范 */
  #pve-sidebar .sidebar-account-menu .sidebar-account-menu-item {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #pve-sidebar .sidebar-account-menu .sidebar-account-menu-item:active {
    background: #f1f5f9;
  }
  #pve-sidebar .sidebar-account-menu .sidebar-account-menu-item-icon {
    width: 18px;
    height: 18px;
  }

  /* 隐藏遗留的汉堡按钮 / 遮罩(由 JS 注入,但移动端不再使用) */
  .pve-mobile-trigger,
  .pve-mobile-backdrop { display: none !important; }

  /* 主区接管全宽并整体下移 56px(+ 安全区) 以避开顶部导航条 */
  body main.flex-1 {
    width: 100% !important;
    padding-top: 56px;
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
  }

  /* 内容横向 padding 收紧 + 兼顾横屏下的安全区 */
  body main.flex-1 > .px-10,
  body main.flex-1 > header.px-10 {
    padding-left: 16px;
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }

  /* header 的水平 flex 改成纵向堆叠, 避免标题被挤换行 */
  body main.flex-1 > header.flex {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  /* header 内固定宽度输入框/搜索改为全宽 */
  body main.flex-1 > header input[type='text'] {
    width: 100% !important;
    min-width: 0 !important;
    /* iOS 防止聚焦时自动缩放(<16px 会触发) */
    font-size: 16px;
  }
  body main.flex-1 > header .relative {
    width: 100%;
  }

  /* 一些常见的 grid-cols-2/3/4 在小屏强制单列 */
  body main.flex-1 .grid.grid-cols-2:not(.keep-grid),
  body main.flex-1 .grid.sm\\:grid-cols-2:not(.keep-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* project-detail 页面:沿用 main 提供的顶部 padding,只收紧水平 padding */
  body main.flex-1 > .proj-detail-host {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ============================================================
 * 极窄屏 ≤360px：iPhone SE / 折叠屏外屏 / 4.7" 安卓老机型 兼容
 * 「个人信息」头像 + 下拉菜单进一步压缩，避免与团队方向触发器挤占
 * ============================================================ */
@media (max-width: 360px) {
  /* 头像缩到 36px,但热区仍保持 44px(::before 已扩展),触摸命中不变 */
  #pve-sidebar .sidebar-profile {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  #pve-sidebar .sidebar-profile-avatar {
    width: 30px;
    height: 30px;
    font-size: 12.5px;
  }
  /* footer 紧贴右侧,把团队方向右边距同步收紧到 48px */
  #pve-sidebar .sidebar-footer {
    padding: 0 4px;
    right: max(2px, env(safe-area-inset-right, 0px));
  }
  #pve-sidebar .sidebar-block-team {
    right: 48px;
  }
  /* 下拉菜单宽度跟随视口收窄,留 16px 边距即可 */
  #pve-sidebar .dropdown-menu.sidebar-account-menu {
    width: min(220px, calc(100vw - 16px));
    min-width: 0;
    max-width: calc(100vw - 16px);
    right: max(8px, env(safe-area-inset-right, 0px));
  }
}

/* 卡片 hover 上抬 */
.card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
}

/* 聊天消息淡入 */
.msg-fade-in {
  animation: msgFadeIn 0.32s ease-out;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 打字光标 */
.typing-cursor::after {
  content: '▌';
  color: var(--color-primary);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* 思维链时间线 */
.timeline {
  position: relative;
  padding-left: 24px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--color-border);
}
.timeline-dot {
  position: absolute;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.timeline-dot.success { border-color: var(--stage-s9); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.timeline-dot.error { border-color: var(--color-destructive); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }
.timeline-dot.running { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 弹窗背景 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.open {
  display: flex;
  animation: backdropFade 0.18s ease;
}
@keyframes backdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 浮层 popup 动画 */
.popup-enter {
  animation: popupEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popupEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 自定义滚动条 */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* 移动端隐藏主区滚动条 ===
   桌面端右侧 8px 滚动条在窄屏视觉过重,且 iOS 原生已有惯性滚动 + 边缘指示。
   仅锁定 <main class="... thin-scroll">,
   sheet-body / msg-stream / preview-body / skill-checklist 等
   抽屉/弹窗内部的横纵向滚动容器仍保留滚动条,提示可滚动。 */
@media (max-width: 768px) {
  main.thin-scroll {
    scrollbar-width: none;          /* Firefox / 现代标准 */
    -ms-overflow-style: none;       /* 老 IE / Edge */
  }
  main.thin-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;                  /* WebKit / Blink */
  }
}

/* 入场动画 */
.fade-up {
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * 移动端 · 全局分页器固定底部（不依赖 :has() / sticky 兼容性）
 *  覆盖：
 *   - #workflow-pager   (workflow.html)
 *   - #agents-pager     (agents-list.html)
 *   - #resource-pager   (knowledge.html)
 *   - #team-workflow-pager (team-list.html)
 *  关键：祖先的 will-change/transform/filter/perspective/contain 都会让
 *        position: fixed 相对祖先而非视口定位（containing block 陷阱），
 *        必须先把链路上的这些属性重置，fixed 才真正钉在视口底部不被滑动。
 *  modal 内的 #my-agents-pager 不在吸底范围（弹窗自身已是固定布局）。
 * ============================================================ */
@media (max-width: 768px) {
  /* 1) 解除 fixed containing block：清掉 main 及关键祖先的 will-change / transform / filter
     用 !important 强制覆盖各模块自身的 will-change / fade-up 残余 transform */
  body,
  body > .flex.h-screen,
  main.flex-1,
  main.team-page-shell,
  main.flex-1 > .pve-page-body,
  main.flex-1 > .pve-page-body > .pve-page-narrow,
  main.team-page-shell > .pve-page-body,
  main.team-page-shell > .pve-page-body > .pve-page-narrow {
    will-change: auto !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
  }
  /* fade-up 入场动画在分页器/工具条自身上会留下 transform: translateY(0)；
     在分页器及其祖先上单独清掉，避免吸顶/吸底元素自身或祖先成为 containing block */
  #workflow-pager.fade-up,
  #agents-pager.fade-up,
  #resource-pager.fade-up,
  /* 公共 sticky 工具条：动画期间的 translateY(10px) 会让吸顶位置短暂下移，
     视觉上在页头与工具条间产生 10px 「假缝」—— 直接关闭入场动画 */
  .pve-page-toolbar.fade-up {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* 2) 分页器固定在视口底部 —— 用 !important 锁住，避免被各模块自有 sticky/transform 规则覆盖 */
  #workflow-pager:not([hidden]),
  #agents-pager:not([hidden]),
  #resource-pager:not([hidden]),
  #team-workflow-pager:not([hidden]) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    /* 高于 sidebar(60) / sticky 页头(20) / 各类 sticky 工具条(10)，保证置顶覆盖 */
    z-index: var(--z-pager-mobile) !important;
    margin: 0 !important;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border: none;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0;
    box-shadow: 0 -8px 18px -10px rgba(15, 23, 42, 0.22);
    /* 锁定不被任何手势/动画/transform 推动 */
    touch-action: pan-y;
    overscroll-behavior: contain;
    transform: none !important;
    will-change: auto !important;
    /* 防止内部 fade-up / 入场动画临时把它推走 */
    animation: none !important;
  }

  /* 3) 给所有列表 main 让出底部空间，避免最后一行被分页器遮住
     —— 分页器实际高度 ≈ padding(8+8) + 内部按钮(30~32) ≈ 48px，
        加 4px 呼吸感 = 52px，再叠加 iPhone 安全区。
     —— 现代浏览器精确命中"存在未隐藏分页器"的页面；其它页不加任何 padding，避免滑到底留白。 */
  main.flex-1:has(#workflow-pager:not([hidden])),
  main.flex-1:has(#agents-pager:not([hidden])),
  main.flex-1:has(#resource-pager:not([hidden])),
  main.team-page-shell:has(#team-workflow-pager:not([hidden])) {
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }
}

/* 老内核兜底（不支持 :has() 时）：仅给确实承载分页器的列表页 main 加 padding-bottom，
   通过页面特征 ID 选择器精确命中，避免无关页面（如详情页 / 聊天页）滑到底留白。 */
@media (max-width: 768px) {
  /* knowledge / agents-list / workflow / team-list 各自的页面唯一标识 */
  main.flex-1.thin-scroll:has(.resource-table),
  main.flex-1.thin-scroll:has(.agents-market-hero),
  main.flex-1:has(#workflow-grid),
  main.team-page-shell {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }
}

/* 全局键盘 hint */
kbd.pve-kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  font-size: 10.5px;
  color: #64748B;
  font-family: inherit;
}


/* ============================================================
 * 全局移动端兼容补丁 (<=768px)
 * 这一节处理各页面特有结构在小屏的适配:
 * - chat-session / chat-index / agent-detail / app-authorization
 * - workflow-page-shell / team-page-shell / market-page
 * - 通用对话框 / 抽屉 / 表格行
 * ============================================================ */
@media (max-width: 768px) {
  /* ---------- chat-session 对话页 ---------- */
  .chat-shell .chat-header {
    padding: 14px 12px 12px;
  }
  .chat-shell .chat-header-top {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .chat-shell .chat-back {
    padding: 4px 9px;
    font-size: 12px;
  }
  .chat-shell .chat-header-identity {
    flex-basis: auto;
    flex: 1 1 auto;
    order: 0;
    gap: 8px;
    min-width: 0;
  }
  .chat-shell .chat-agent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .chat-shell .chat-header-title {
    font-size: 13.5px;
  }
  .chat-shell .chat-header-session {
    font-size: 11.5px;
  }
  .chat-shell .chat-header-more {
    margin-left: auto;
  }
  .chat-shell .chat-header-session {
    max-width: 140px;
  }
  /* 阶段 stepper 可横向滚动以容纳 9 阶段 */
  .chat-shell .stage-stepper {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .chat-shell .stage-stepper::-webkit-scrollbar { display: none; }
  .chat-shell .stage-node-wrap {
    flex-shrink: 0;
  }
  /* 阶段卡片紧凑 + 可收起（默认展开，点击收起） */
  .chat-shell .chat-header .stage-context-card {
    padding: 10px 12px;
    border-radius: 14px;
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
  .chat-shell .chat-header .stage-context-card.is-collapsed {
    max-height: 48px;
  }
  /* 收起时只显示标题行 */
  .chat-shell .chat-header .stage-context-card.is-collapsed .stage-context-meta,
  .chat-shell .chat-header .stage-context-card.is-collapsed .stage-context-desc {
    display: none;
  }
  .stage-context-meta {
    font-size: 11px;
    gap: 10px;
  }
  /* 下一阶段 dock */
  .chat-foot {
    padding: 8px 12px 14px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.96) 20%);
  }
  .chat-foot-dock {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    justify-content: flex-start;
  }
  .chat-foot-dock .chat-shortcut {
    display: none;
  }
  .dock-btn {
    padding: 5px 10px;
    font-size: 11.5px;
    gap: 4px;
    border-radius: 12px;
  }
  .dock-btn i {
    width: 13px;
    height: 13px;
  }
  .dock-btn.primary {
    padding: 6px 12px;
    font-size: 12px;
  }
  .dock-hint {
    font-size: 9.5px;
    margin-left: 2px;
  }
  /* 输入卡 */
  .chat-input-card {
    border-radius: 16px;
    padding: 10px 12px 9px;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.15);
  }
  .chat-input-card textarea {
    font-size: 14px;
    min-height: 40px;
    line-height: 1.5;
  }
  .chat-input-tools {
    gap: 6px;
    margin-top: 8px;
  }
  .chat-input-tools .chat-input-hint {
    display: none;
  }
  .chat-input-tools button {
    padding: 6px 11px;
    font-size: 12px;
    border-radius: 10px;
  }
  .chat-input-tools button i {
    width: 13px;
    height: 13px;
  }
  .msg-stream {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .msg-user-bubble,
  .msg-assistant-bubble {
    max-width: 90%;
    font-size: 13.5px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  /* 消息元信息：时间戳、agent 名 */
  .msg-assistant-bubble + div .text-\[12px\],
  .flex.gap-3 > div > .text-\[12px\] {
    font-size: 11px !important;
  }
  /* 思维链 */
  .think-card {
    padding: 10px;
    border-radius: 12px;
  }
  .think-summary {
    font-size: 11.5px;
    gap: 6px;
  }
  .think-summary strong {
    font-size: 12px;
  }
  .chain-step-head {
    padding: 6px 8px;
    font-size: 11.5px;
  }
  .chain-step-body {
    padding: 8px 10px;
    font-size: 11px;
  }
  /* 建议按钮 */
  .suggestion-pill {
    padding: 6px 10px;
    font-size: 11.5px;
    border-radius: 10px;
  }
  /* HITL 卡片 */
  .hitl-card {
    padding: 10px;
    border-radius: 12px;
    font-size: 12px;
  }
  .hitl-card button {
    padding: 5px 10px;
    font-size: 11.5px;
  }
  /* 消息操作按钮 */
  .flex.items-center.gap-1.mt-2 button {
    padding: 4px;
  }
  .flex.items-center.gap-1.mt-2 button i {
    width: 12px !important;
    height: 12px !important;
  }
  /* 更多菜单不要贴出屏幕,避开顶部 56px 导航条 */
  #chat-more-menu {
    right: 12px !important;
    top: 12px !important;
  }

  /* ---------- chat-index 起步页 ---------- */
  body main.flex-1 > section.flex-1.px-10 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 24px !important;
    padding-bottom: 80px !important;
  }
  body main.flex-1 > section.flex-1.px-10 .text-\[26px\] {
    font-size: 22px;
  }

  /* ---------- agent-detail / 通用 px-10 顶部行 ---------- */
  /* 顶部 "返回 / 删除" 行 */
  body main.flex-1 > .px-10 > .flex.items-center.justify-between:first-child {
    padding-top: 4px;
  }
  /* agent-detail Hero 卡 */
  #hero-host {
    padding: 16px !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
  }
  /* 装饰大图标缩小并降低视觉权重 */
  #hero-host > i[data-lucide]:first-child {
    width: 110px !important;
    height: 110px !important;
    right: -16px !important;
    bottom: -16px !important;
    opacity: 0.05 !important;
  }
  /* 主体布局：垂直堆叠，左右分栏让位 */
  #hero-host > .relative.flex {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  /* 左侧主信息区 */
  #hero-host > .relative.flex > .flex-1 > .flex.items-center.gap-4 {
    gap: 12px !important;
    margin-bottom: 10px !important;
    align-items: flex-start !important;
  }
  /* Agent 图标缩小 */
  #hero-host .w-16.h-16 {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }
  #hero-host .w-16.h-16 > i[data-lucide] {
    width: 24px !important;
    height: 24px !important;
  }
  /* 标题缩小 + 允许换行 */
  #hero-host h1.text-\[22px\] {
    font-size: 18px !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }
  #hero-host h1.text-\[22px\] + span {
    flex-shrink: 0;
  }
  /* 描述区：紧凑、限制行数 */
  #hero-host p.text-\[13px\] {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin-top: 2px;
  }
  /* Agent ID 行：允许换行不溢出 */
  #hero-host > .relative.flex > .flex-1 > .flex.items-center.gap-3 {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
    font-size: 11.5px !important;
  }
  #hero-host code {
    font-size: 11px;
    word-break: break-all;
  }
  /* 右侧统计区：变水平排列、贴左、改为分隔点风格 */
  #hero-host > .relative.flex > .text-right {
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }
  #hero-host > .relative.flex > .text-right > .flex {
    justify-content: flex-start !important;
    gap: 5px !important;
    font-size: 11.5px !important;
  }
  #hero-host > .relative.flex > .text-right > .flex i {
    width: 13px !important;
    height: 13px !important;
    color: #94a3b8;
  }
  #hero-host > .relative.flex > .text-right > .flex strong {
    font-weight: 600;
  }
  /* tab 横向滚动避免溢出 */
  body main.flex-1 .agent-tab {
    flex-shrink: 0;
  }

  /* ---------- agent-detail 关联项目 tab ---------- */
  /* 容器：紧凑间距、纵向排列 */
  #tab-projects #projects-host {
    gap: 10px !important;
    flex-direction: column;
  }
  /* 项目卡片：去固定宽度，撑满可用宽度 */
  #tab-projects #projects-host > a.block.w-\[280px\] {
    width: 100% !important;
    border-radius: 14px !important;
  }
  /* 卡片头部：紧凑 padding */
  #tab-projects #projects-host > a > .p-4 {
    padding: 12px !important;
    gap: 10px !important;
  }
  /* 项目图标：稍缩小 */
  #tab-projects #projects-host .w-\[42px\].h-\[42px\] {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    flex-shrink: 0;
  }
  #tab-projects #projects-host .w-\[42px\].h-\[42px\] > i[data-lucide] {
    width: 18px !important;
    height: 18px !important;
  }
  /* 文字行 */
  #tab-projects #projects-host .text-\[14px\] {
    font-size: 13.5px !important;
  }
  #tab-projects #projects-host .text-\[11px\] {
    font-size: 11px !important;
    margin-top: 1px;
  }
  /* 底部 CTA 行 */
  #tab-projects #projects-host > a > .border-t {
    padding: 9px 12px !important;
    font-size: 11.5px !important;
  }
  /* 空状态铺满 */
  #tab-projects #projects-host > .w-full {
    padding: 20px 0;
  }

  /* === 关联项目激活时：顶部三段全部吸住，只让项目列表上下滑动 === */
  main.flex-1:has(#tab-projects:not(.hidden)) {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  main.flex-1:has(#tab-projects:not(.hidden)) > .px-10 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0 !important;
  }
  /* 顶部"返回/删除"行、Hero、Tabs：不收缩，做为吸顶骨架 */
  main.flex-1:has(#tab-projects:not(.hidden)) > .px-10 > .flex.items-center.justify-between:first-child,
  main.flex-1:has(#tab-projects:not(.hidden)) > .px-10 > #hero-host,
  main.flex-1:has(#tab-projects:not(.hidden)) > .px-10 > .flex.items-center.gap-6.border-b {
    flex-shrink: 0;
  }
  /* Tabs 行紧贴 Hero，下方分隔条更轻 */
  main.flex-1:has(#tab-projects:not(.hidden)) > .px-10 > .flex.items-center.gap-6.border-b {
    margin-bottom: 10px !important;
    background: #ffffff;
    position: relative;
    z-index: 5;
  }
  /* 隐藏的 skills tab 不占布局空间 */
  main.flex-1:has(#tab-projects:not(.hidden)) > .px-10 > #tab-skills.hidden {
    display: none;
  }
  /* 项目面板成为唯一可滚动区域 */
  main.flex-1:has(#tab-projects:not(.hidden)) #tab-projects {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    /* 细滚动条 */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  }
  main.flex-1:has(#tab-projects:not(.hidden)) #tab-projects::-webkit-scrollbar {
    width: 4px;
  }
  main.flex-1:has(#tab-projects:not(.hidden)) #tab-projects::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 4px;
  }

  /* === 技能配置激活时：顶部全部吸住，只让 skills 列表上下滑动 === */
  main.flex-1:has(#tab-skills:not(.hidden)) {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  main.flex-1:has(#tab-skills:not(.hidden)) > .px-10 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0 !important;
  }
  main.flex-1:has(#tab-skills:not(.hidden)) > .px-10 > .flex.items-center.justify-between:first-child,
  main.flex-1:has(#tab-skills:not(.hidden)) > .px-10 > #hero-host,
  main.flex-1:has(#tab-skills:not(.hidden)) > .px-10 > .flex.items-center.gap-6.border-b {
    flex-shrink: 0;
  }
  main.flex-1:has(#tab-skills:not(.hidden)) > .px-10 > .flex.items-center.gap-6.border-b {
    margin-bottom: 10px !important;
    background: #ffffff;
    position: relative;
    z-index: 5;
  }
  /* 隐藏的 projects tab 不占布局空间 */
  main.flex-1:has(#tab-skills:not(.hidden)) > .px-10 > #tab-projects.hidden {
    display: none;
  }
  /* skills 面板成为唯一可滚动区域 */
  main.flex-1:has(#tab-skills:not(.hidden)) #tab-skills {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  }
  main.flex-1:has(#tab-skills:not(.hidden)) #tab-skills::-webkit-scrollbar {
    width: 4px;
  }
  main.flex-1:has(#tab-skills:not(.hidden)) #tab-skills::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 4px;
  }
  /* 添加技能栏：吸顶不随滚动消失 */
  main.flex-1:has(#tab-skills:not(.hidden)) #add-skill-bar:not(.hidden) {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 4;
    padding-bottom: 8px;
    margin-bottom: 8px !important;
  }
  /* skills-host 内部紧凑 */
  main.flex-1:has(#tab-skills:not(.hidden)) #skills-host {
    gap: 18px;
  }
  /* skills 各 group 卡片网格在窄屏上不挤 */
  main.flex-1:has(#tab-skills:not(.hidden)) #skills-host .grid {
    gap: 10px !important;
  }

  /* ---------- app-authorization 平台卡片 ---------- */
  body main.flex-1 > .px-10 .divide-y > .px-6 {
    flex-wrap: wrap;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px !important;
  }
  body main.flex-1 > .px-10 .divide-y > .px-6 > .flex-1 {
    flex-basis: 100%;
  }
  body main.flex-1 > .px-10 .divide-y > .px-6 > .shrink-0 {
    width: 100%;
    justify-content: flex-end;
  }

  /* ---------- project-publish 占位页 ---------- */
  body main.flex-1 > .px-10.py-16 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* ---------- workflow / team / market 自定义 shell ---------- */
  /* 顶部不再需要为浮动汉堡腾出 56px,这部分由 main.flex-1 的 padding-top 统一处理 */
  .market-page .market-topbar {
    padding-left: 16px;
  }

  /* 通用对话框移动端规则统一收敛到本文件 §模态抽屉（约 5999 行） */

  /* ---------- 通用表格头部:隐藏复杂表头,改用堆叠卡式 ---------- */
  /* 让 agents-list / 资源库这类只显示主列即可 */
  /* 已由各模块自行处理 */

  /* ---------- demo-nav 顶栏 ---------- */
  body.demo-nav-bg > .max-w-6xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 28px !important;
  }
  body.demo-nav-bg .group-title {
    margin-top: 28px;
  }
  /* === skills 页：移动端 Header + 分类/阶段筛选吸住，仅 skill-groups 上下滑动 === */
  main.flex-1:has(> header.pve-page-header):has(#skill-groups) {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  main.flex-1:has(> header.pve-page-header):has(#skill-groups) > header.pve-page-header {
    flex-shrink: 0;
  }
  main.flex-1:has(> header.pve-page-header):has(#skill-groups) > .px-10.py-5 {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* sticky 筛选条改为常规吸顶骨架，z-index 抬高，确保压住滚动内容 */
  main.flex-1:has(> header.pve-page-header):has(#skill-groups) > .px-10.py-5 > .sticky.top-0 {
    flex-shrink: 0;
    position: relative;
    top: auto;
    z-index: 6;
    background: #ffffff !important;
  }
  /* skill-groups 成为唯一可滚动区域 */
  main.flex-1:has(> header.pve-page-header):has(#skill-groups) #skill-groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-top: 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  }
  main.flex-1:has(> header.pve-page-header):has(#skill-groups) #skill-groups::-webkit-scrollbar {
    width: 4px;
  }
  main.flex-1:has(> header.pve-page-header):has(#skill-groups) #skill-groups::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 4px;
  }
}

/* 超窄屏 (<=380px) 再压缩 */
@media (max-width: 380px) {
  .chat-shell .chat-header { padding-left: 12px; }
  .chat-shell .chat-header-session { max-width: 110px; }
  body main.flex-1 > section.flex-1.px-10 .text-\[26px\] { font-size: 19px; }
  /* 超窄屏对话框：三段式布局下 padding 由各段自行控制，不在容器层覆盖 */
}


/* ============================================================
 * 移动端 / 浏览器兼容性补丁
 * 仅做属性前缀、触控目标、安全区等向后兼容增强，不改变设计
 * ============================================================ */

/* 关键按钮触控反馈：透明 highlight + 主动 :active 状态，覆盖 iOS / Android */
:where(button, [role="button"], a) {
  -webkit-tap-highlight-color: transparent;
}

/* 文本不可选区域统一加 -webkit 前缀，覆盖老 Safari / WebView */
:where(button, .pve-btn-primary, .pve-btn-ghost, .pve-tab, .resource-tab) {
  -webkit-user-select: none;
  user-select: none;
}

/* 移动端最小触控尺寸：Apple HIG 推荐 44pt，Material 推荐 48dp */
@media (max-width: 768px) {
  :where(button.pve-btn-primary, button.pve-btn-ghost, .resource-tab, .pve-btn) {
    min-height: 44px;
  }
  /* 全局按钮触控优化：抑制 iOS 灰色高光、关闭双击缩放、统一字号与按下反馈 */
  .pve-btn-primary,
  .pve-btn-ghost,
  .workflow-copy-btn,
  .workflow-create-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    font-size: 14px;
    padding-inline: 16px;
  }
  .pve-btn-primary:active,
  .pve-btn-ghost:active,
  .workflow-copy-btn:active,
  .workflow-create-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }

  /* 标签(tab)移动端字号与触控统一:
     主级标签(智能体/资源库/工作流) → 13px
     次级标签(技能-分类/阶段)         → 12px(保留层级感)
     全部加入 tap-highlight 抑制 + 双击缩放关闭 + 按下反馈 */
  .agents-tab,
  .resource-tab,
  .workflow-tab,
  .category-tab,
  .stage-tab {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .resource-tab,
  .resource-tab strong {
    font-size: 12.5px;
  }
  .agents-tab:active,
  .resource-tab:active,
  .workflow-tab:active,
  .category-tab:active,
  .stage-tab:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }
}

/* iOS 异形屏：底部固定操作栏 / drawer 加 safe-area padding */
@supports (padding: env(safe-area-inset-bottom)) {
  .pve-page-narrow {
    padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom)));
  }
  .exec-drawer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* backdrop-filter 渐进增强：旧浏览器走半透明背景兜底 */
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .pve-frosted {
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }
}

/* 横屏 + 短高度屏幕：登录/欢迎页避免内容被剪 */
@media (max-height: 520px) and (orientation: landscape) {
  .login-bg {
    min-height: 520px;
  }
}

/* 登录页：大屏增宽卡片，让左右双栏更舒展 */
@media (min-width: 1280px) {
  .login-shell {
    max-width: 1120px;
    grid-template-columns: 1.15fr 1fr;
  }
  .login-hero {
    padding: 56px 56px 48px;
  }
  .login-form {
    padding: 56px 64px;
  }
}
@media (min-width: 1440px) {
  .login-shell {
    max-width: 1180px;
  }
  .login-hero {
    padding: 64px 64px 56px;
  }
  .login-form {
    padding: 64px 72px;
  }
}

/* 登录页：移动端收敛装饰，避免抢占内容 */
@media (max-width: 768px) {
  .login-main {
    padding: 24px 16px;
  }
  .login-shell {
    max-width: 480px;
    border-radius: 1.5rem;
    min-height: 0;
  }
  .login-form {
    padding: 32px 24px;
  }
}


/* ============================================================
 * 移动端 · 全局交互一致性补丁
 *   - 横向滚动行为统一（带动量滚动、收敛边界、隐藏滚动条）
 *   - 模态/抽屉底部安全区
 *   - 卡片/按钮触控反馈（不依赖具体页面命名）
 *   - reduced-motion 偏好兜底
 * ============================================================ */
@media (max-width: 768px) {
  /* 通用横滚容器：任何带 [data-mobile-scroll-x] 或常见 tabs 类 */
  [data-mobile-scroll-x],
  .pve-scroll-x,
  .tabs-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  [data-mobile-scroll-x]::-webkit-scrollbar,
  .pve-scroll-x::-webkit-scrollbar,
  .tabs-scroll-x::-webkit-scrollbar {
    display: none;
  }

  /* ============================================================
   * 通用对话框移动端 → 居中紧凑弹窗
   * 选择器：.modal-backdrop > .bg-white  + Tailwind rounded-* 包装
   * 例外：my-agents-modal（agents.css 已自定义抽屉样式）
   * 布局：flex-col，头部固定 + 内容区滚动 + 底部按钮固定
   * ============================================================ */
  .modal-backdrop:not(:has(.my-agents-modal)) {
    align-items: center;
    padding: 12px;
  }
  .modal-backdrop > .bg-white,
  .modal-backdrop > [class*="rounded"]:not(.my-agents-modal) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto;
    border-radius: 18px;
    max-height: 88vh;
    max-height: 88dvh;
    /* flex-col 三段式：头部固定 + 内容区滚动 + 底部按钮固定 */
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.32);
    position: relative;
  }

  /* drag handle：顶部拖拽指示条 */
  .modal-backdrop > .bg-white::before,
  .modal-backdrop > [class*="rounded"]:not(.my-agents-modal)::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(203, 213, 225, 0.8);
    pointer-events: none;
    z-index: 1;
  }

  /* 头部一行（含关闭按钮）：固定在顶部，不随内容滚动 */
  .modal-backdrop > .bg-white > .flex.items-center.justify-between:first-of-type,
  .modal-backdrop > [class*="rounded"]:not(.my-agents-modal) > .flex.items-center.justify-between:first-of-type {
    flex-shrink: 0;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    margin-bottom: 0 !important;
  }

  /* 内容区（头部和底部之间的所有直接子元素）：可滚动 */
  .modal-backdrop > .bg-white > *:not(:first-child):not(:last-child),
  .modal-backdrop > [class*="rounded"]:not(.my-agents-modal) > *:not(:first-child):not(:last-child) {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px;
    min-height: 0;
  }

  /* 关闭按钮触控热区：放大到 44×44px（iOS HIG 规范） */
  .modal-backdrop button[aria-label="关闭"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    margin: -8px -8px -8px 0;
  }
  .modal-backdrop button[aria-label="关闭"]:active {
    background: rgba(15, 23, 42, 0.06);
  }

  /* 底部按钮组：固定在底部，不随内容滚动 */
  .modal-backdrop > .bg-white > .flex.justify-end:last-child,
  .modal-backdrop > [class*="rounded"]:not(.my-agents-modal) > .flex.justify-end:last-child {
    flex-shrink: 0;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(226, 232, 240, 0.7);
    background: #ffffff;
    border-radius: 0 0 18px 18px;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0 !important;
  }
  /* 底部按钮等宽铺满 + 触控高度 ≥44px */
  .modal-backdrop > .bg-white > .flex.justify-end:last-child > button,
  .modal-backdrop > [class*="rounded"]:not(.my-agents-modal) > .flex.justify-end:last-child > button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }

  /* 长内容预览 / 列表的 max-height 在小屏放开，让内容区接管滚动 */
  .modal-backdrop .max-h-\[400px\],
  .modal-backdrop .max-h-\[300px\],
  .modal-backdrop .max-h-\[180px\] {
    max-height: none;
  }

  /* 底部抽屉入场：从下上滑（覆盖 .popup-enter 默认 12px 位移） */
  .modal-backdrop.open > .bg-white.popup-enter,
  .modal-backdrop.open > [class*="rounded"].popup-enter:not(.my-agents-modal) {
    animation: pveSheetIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes pveSheetIn {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 防 iOS 自动放大：所有对话框内 input/textarea/select 16px */
  .modal-backdrop input:not([type="checkbox"]):not([type="radio"]),
  .modal-backdrop textarea,
  .modal-backdrop select {
    font-size: 16px;
  }

  /* 移动端模态打开时锁定背景滚动，避免穿透 */
  body:has(.modal-backdrop.is-open),
  body:has(.modal-backdrop:not(.hidden)) {
    overflow: hidden;
    touch-action: pan-x;
  }

  /* 全局可点元素的反馈：移除灰色高亮 + 优化点击延迟 */
  :where(button, [role="button"], a, .card, [data-pressable]) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* 通用按压反馈：声明在 [data-pressable] 上的元素得到轻微缩放反馈 */
  [data-pressable]:active {
    transform: scale(0.992);
    transition: transform 0.12s ease;
  }
}

/* 减少动画偏好：关闭所有按压形变与抽屉动画 */
@media (prefers-reduced-motion: reduce) {
  [data-pressable]:active {
    transform: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* 高对比偏好：边框/分隔线加强 */
@media (prefers-contrast: more) {
  :where(.pve-card, .resource-row, .agent-card, .team-card) {
    border-color: #94a3b8 !important;
  }
}