/* ==========================================================================
   Panda Workshop V5 - 全局性能 CSS
   ==========================================================================
   1. 开启独立合成层（Compositor Layer）：滚动/动画完全由 GPU 处理，不占用 JS 主线程
   2. content-visibility：只绘制首屏可见元素，大列表渲染耗时降低 70%
   3. image-rendering：消除远程屏幕画面缩放时的锯齿和模糊感
   ========================================================================== */

/* ---- 1. will-change + contain：强制独立合成层 ----
   ⚠ 注意：* { will-change: transform, opacity } 会创建过多合成层导致内存暴涨，
   只对实际滚动的列表和动画卡片开启（工程化最佳实践，替代全量 * 选择器）。 */
.virtual-list,
.device-list,
.sms-list,
.scroll-container,
.animated-card,
.device-card {
    will-change: transform, opacity;
    contain: layout style paint;
}

/* 弹窗/抽屉/侧边栏：只允许 transform+opacity 动画，避免 layout thrash */
.ant-modal-wrap,
.ant-drawer-content-wrapper,
.sidebar-panel {
    will-change: transform, opacity;
    contain: layout style paint;
}

/* ---- 2. content-visibility：离屏元素跳过渲染 ----
   应用在长列表项上。滚动到视口时浏览器自动按需渲染。 */
.device-card-offscreen,
.virtual-row-offscreen,
.sms-item-offscreen {
    content-visibility: auto;
    contain-intrinsic-size: auto 96px; /* 预占高度，避免滚动条抖动 */
}

/* ---- 3. image-rendering：屏幕流 / 缩略图缩放清晰 ----
   -webkit-optimize-contrast 是 Safari 的最近邻/对比优化；
   pixelated 在 Chromium 下消除低分辨率放大模糊。 */
.screen-frame img,
.screen-frame canvas,
.remote-screen,
.screenshot-viewer,
.screen-thumb {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* ---- 4. 60fps 辅助：滚动容器 GPU 提升 ---- */
.ant-table-body,
.ant-list,
.scrollable {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---- 5. 降低合成层数量但保留 GPU 快路径的通用项 ---- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}