/* 移动端性能优化 CSS - 安全版本 */

/* 1. 优化滚动性能 */
.chat-messages,
.character-list,
.overflow-y-auto,
.overflow-y-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* 2. iPhone X 刘海屏适配 */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .fixed-bottom,
    .sticky-bottom {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .fixed-top,
    .sticky-top {
        padding-top: max(12px, env(safe-area-inset-top));
    }
}

/* 3. 防止 iOS 输入框放大 */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px !important;
    }
}

/* 4. 优化图片加载 */
img {
    content-visibility: auto;
}

/* 5. 优化长列表渲染 */
.chat-message,
.character-card {
    contain: layout style paint;
    content-visibility: auto;
}

/* 6. 防止内容闪现 */
[v-cloak] {
    display: none !important;
}

/* 7. 减少移动端输入延迟 */
input,
textarea,
select,
button {
    touch-action: manipulation;
}

/* 8. iPhone X 专属优化 - 简化复杂效果 */
@media only screen
  and (device-width: 375px)
  and (device-height: 812px)
  and (-webkit-device-pixel-ratio: 3) {

    /* 简化阴影 */
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    /* 简化模糊效果 */
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg {
        backdrop-filter: blur(4px) !important;
    }
}