/**
 * 一人一册（一人一册）浏览器兼容性样式
 * @author  云蓝图科技
 * @date    2024年12月26日
 * @version 1.0.0
 * 
 * 兼容目标：
 * - iOS Safari 12+
 * - Android Chrome 70+
 * - 微信内置浏览器
 */

/* ================================
   iOS Safari 兼容性
================================ */

/* iOS 100vh 问题修复 */
@supports (-webkit-touch-callout: none) {
    .wrce-html,
    .auth-page,
    .user-page,
    .photo-viewer {
        min-height: -webkit-fill-available;
    }
}

/* iOS 滚动回弹 */
.wrce-content,
.album-list,
.photo-grid,
.user-page {
    -webkit-overflow-scrolling: touch;
}

/* iOS 点击高亮去除 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* iOS 输入框样式重置 */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* iOS 输入框聚焦时页面缩放问题 */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
    font-size: 16px; /* 防止 iOS 自动缩放 */
}

/* iOS 软键盘弹出时 fixed 定位问题 */
.wrce-tabbar {
    max-width:960px;
    width:100%;
    position: fixed;
    bottom: 0;
    /* iOS 需要使用 transform 而不是 bottom 来优化性能 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* iOS 安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .wrce-tabbar {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(56px + env(safe-area-inset-bottom));
    }
    
    .wrce-content {
        padding-bottom: calc(56px + 16px + env(safe-area-inset-bottom));
    }
    
    .user-page {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
    
    /* 悬浮按钮 */
    .wrce-fab {
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
    
    /* 弹窗底部 */
    .album-picker-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* 照片查看器 */
    .photo-viewer-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* ================================
   Android Chrome 兼容性
================================ */

/* Android 字体渲染优化 */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Android 图片渲染 */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* ================================
   微信内置浏览器兼容性
================================ */

/* 微信浏览器字体调整 */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 微信浏览器滚动条隐藏 */
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 微信浏览器 flexbox 兼容 - 仅对 flex 布局元素添加前缀 */
.wrce-html,
.wrce-main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* 注意：.album-list, .photo-grid, .home-modules 使用 grid 布局，不要覆盖 */

/* ================================
   Flexbox 兼容性前缀
================================ */

/* flex 容器 */
.flex,
.wrce-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

/* flex 方向 */
.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* flex 对齐 */
.flex-center,
.wrce-flex-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-between,
.wrce-flex-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/* flex 项目 */
.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.flex-shrink-0 {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* ================================
   Grid 兼容性
================================ */

/* Grid 在旧版浏览器的回退 */
@supports not (display: grid) {
    .album-list,
    .photo-grid,
    .home-modules,
    .home-stats {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .album-list .album-card,
    .photo-grid .photo-item {
        width: calc(50% - 6px);
        margin: 3px;
    }
    
    .home-modules .home-module-item {
        width: 25%;
    }
    
    .home-stats .home-stat-card {
        width: calc(50% - 6px);
        margin: 3px;
    }
}

/* ================================
   Transform 兼容性前缀
================================ */

.scale-on-tap:active {
    -webkit-transform: scale(0.98);
    -ms-transform: scale(0.98);
    transform: scale(0.98);
}

/* ================================
   Transition 兼容性前缀
================================ */

.transition-all {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ================================
   Animation 兼容性前缀
================================ */

@-webkit-keyframes wrce-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes wrce-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.wrce-loading-spinner {
    -webkit-animation: wrce-spin 0.8s linear infinite;
    animation: wrce-spin 0.8s linear infinite;
}

@-webkit-keyframes skeleton-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes skeleton-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ================================
   Aspect Ratio 兼容性
================================ */

/* 旧版浏览器不支持 aspect-ratio 的回退方案 */
@supports not (aspect-ratio: 1) {
    .photo-item,
    .home-recent-item,
    .user-recent-item {
        position: relative;
        padding-top: 100%; /* 1:1 比例 */
    }
    
    .photo-item img,
    .home-recent-item img,
    .user-recent-item img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .album-cover {
        position: relative;
        padding-top: 75%; /* 4:3 比例 */
    }
    
    .album-cover img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ================================
   Object-fit 兼容性
================================ */

/* 部分旧浏览器不支持 object-fit */
.photo-item img,
.album-cover img,
.home-recent-item img,
.user-avatar img,
.home-family-avatar img {
    -o-object-fit: cover;
    object-fit: cover;
}

/* ================================
   CSS Calc 兼容性
================================ */

/* 使用 CSS 变量前确保回退值 */
.wrce-content {
    padding-bottom: 72px; /* 回退值 */
    padding-bottom: calc(56px + 16px);
    padding-bottom: calc(var(--wrce-tabbar-height, 56px) + var(--wrce-spacing, 16px));
}

/* ================================
   特殊场景处理
================================ */

/* 防止横屏键盘遮挡 */
@media screen and (orientation: landscape) and (max-height: 450px) {
    .wrce-tabbar {
        display: none;
    }
    
    .wrce-content {
        padding-bottom: 16px;
    }
}

/* 刘海屏适配 */
@media screen and (display-mode: standalone) {
    .wrce-header {
        padding-top: env(safe-area-inset-top, 0);
    }
}

/* ================================
   性能优化
================================ */

/* 开启 GPU 加速 */
.wrce-tabbar,
.wrce-header,
.photo-viewer,
.album-picker-content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 优化滚动性能 */
.wrce-content,
.album-list,
.photo-grid {
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

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

/* ================================
   软键盘弹出处理
================================ */

/* 键盘弹出时隐藏底部导航 */
.keyboard-visible,
.wrce-tabbar.keyboard-visible,
.wrce-fab.keyboard-visible {
    display: none !important;
}

/* 键盘弹出时调整内容区域 */
body.keyboard-open .wrce-content {
    padding-bottom: 16px;
}

/* 微信浏览器特殊处理 */
html.wx-browser .wrce-content {
    -webkit-overflow-scrolling: touch;
}

html.wx-browser input,
html.wx-browser textarea {
    /* 防止微信浏览器输入框样式问题 */
    -webkit-user-select: text;
    user-select: text;
}

/* ================================
   打印样式
================================ */

@media print {
    .wrce-tabbar,
    .wrce-header,
    .wrce-fab {
        display: none !important;
    }
    
    .wrce-content {
        padding: 0;
    }
}