/* ==========================================================
   移动端性能优化补丁 (perf-tuning.css)
   ----------------------------------------------------------
   目的：让手机端使用更丝滑，减少滑动 / 切换页面的卡顿。
   思路：
     1. 给主滑动轨道开 GPU 合成层（transform/translateZ）
     2. 全部 *-page 容器开启触摸惯性滚动
     3. 移动端关闭高成本的 backdrop-filter
     4. 长列表项 contain layout 避免父级 reflow 风暴
     5. 高频动画用 transform/opacity，不用 left/top
   零业务影响：纯样式，删了不会坏功能。
   ========================================================== */

/* ----- 1. 首页 / 主滑动容器 GPU 合成层 ----- */
.home-pages-track,
.home-page,
.home-page-continuity-hub,
#home-pages-viewport,
#home-pages-track {
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* ----- 2. 所有页面容器：触摸惯性 + 滚动锁定 ----- */
[class$="-page"],
[id$="-page"],
[class*="-list"],
[class*="-feed"],
[class*="-scroll"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ----- 3. 移动端关闭 backdrop-filter（高 GPU 成本） ----- */
/* 注:之前用 universal selector(`*, *::before, *::after`) 强制 none, 但 universal selector
   会让浏览器对每个 DOM 节点(数千个)都跑这条规则,反而拖累渲染。改成只针对实际用了
   backdrop-filter 的常见组件 class。如果以后发现某个组件背景模糊残留,加 class 即可。*/
@media (max-width: 768px) {
  .modal-content, .chat-detail-header, .qq-header, .home-page-dock,
  .douban-header, .lofter-header, .qzone-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ----- 4. 长列表条目隔离渲染（避免一处变化引发整列 reflow） ----- */
.chat-messages > *,
.contacts-list > *,
[class*="-feed"] > [class*="-item"],
[class*="-list"] > [class*="-item"],
[class*="-card"]:not(:hover) {
  contain: layout style;
}

/* ----- 5. 触摸交互的容器：禁用文字选中 + 加触摸回馈 ----- */
[role="button"],
button,
.tap,
.btn,
[class*="-btn"],
[class*="-button"],
[class*="-tab"],
.contact-item,
.home-page-dot {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ----- 6. img 默认懒加载  ----- */
/* 不要给 img 加 content-visibility: auto —— 那会让头像/壁纸只在滚到视口附近才渲染,
   用户体验是"滑到哪里图才出现"。content-visibility 是激进的懒渲染优化,不适合常见图片。 */

/* ----- 7. 滚动条简化（移动端默认就细，桌面也不要太粗）----- */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }
}

/* ----- 8. 减少不必要的合成层（will-change 不要全局滥用）----- */
/* 注意：will-change 太多反而占内存。只给真的需要动画的元素 */
.chat-detail-page.is-animating,
.douban-page.is-animating {
  will-change: transform, opacity;
}
.chat-detail-page:not(.is-animating),
.douban-page:not(.is-animating) {
  will-change: auto;
}

/* ----- 9. 字体平滑（视觉丝滑感）----- */
/* 移除 text-rendering: optimizeLegibility —— Chrome 官方明确反对在 html/body 这么用,
   它会对所有文字启用昂贵的字距+连字处理,在长聊天列表上明显卡顿。
   保留 font-smoothing 即可,那个开销很小。 */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- 10. 防止移动端键盘弹起把视口抬升导致 layout 抖动 ----- */
@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}