/**
 * ============================================================================
 * global.css - 全局基础样式（每页必引）
 * ============================================================================
 *
 * 【文件说明】
 * 本文件包含所有页面都必须引入的基础样式，包括：
 * - 页面基础布局（page-container, bg-layer, content-layer）
 * - 大屏适配、字体定义
 * - Loading 层样式
 * - 全局背景样式
 * - 微信分享兜底样式
 *
 * 【引用页面】所有页面（在CSS中第一位引入）
 *
 * 【目录】
 * 一、页面基础布局
 * 二、全局变量与重置
 * 三、大屏适配
 * 四、Loading 层
 * 五、微信分享兜底方案
 * ============================================================================
 */


/* ============================================================================
   一、页面基础布局
   说明：页面最外层容器、背景层、内容层的基础结构
   使用页面：所有页面
   ============================================================================ */

/* 页面容器 - 页面最外层容器，设置全屏尺寸和基础背景 */
.page-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #fff;
}

/* 全局背景层 - 背景图片容器 */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 背景图片样式 */
.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* 渐变遮罩层 - 白色渐变遮罩效果 */
.mask-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, #FFF 29.15%);
    z-index: 2;
}

/* 内容层 - 页面主要内容容器，位于背景层之上 */
.content-layer {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ============================================================================
   二、全局变量与重置
   ============================================================================ */

/* ========== 全局背景样式 ========== */
/* 统一使用 fixed 背景，替代原先的 bg-loop 动态背景 */
:root {
    --base-width: 414px;
    --base-height: 808px;
    --container-width: 100vw;
    --container-height: 100vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================================
   三、大屏适配 - 桌面端限制最大宽度居中显示
   ============================================================================ */

/* 大屏容器限制 - 当屏幕宽度超过设计稿基准时，限制内容区域宽度 */
@media screen and (min-width: 768px) {
    /* 页面根元素限制 */
    html {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        background: #f5f5f5; /* 两侧留空区域背景色 */
    }
    
    /* body 限制最大宽度并居中 */
    body {
        width: 414px !important; /* 设计稿基准宽度 */
        max-width: 414px !important;
        min-height: 100vh;
        margin: 0 auto !important;
        position: relative;
        overflow-x: hidden;
        background: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 添加阴影区分边界 */
    }
    
    /* 页面容器同步限制 - 覆盖所有页面 */
    .page-container,
    #app,
    #main,
    .result-page-container,
    .background-layer,
    .gender-content,
    .loading-container,
    .error-page-container,
    .privacy-main,
    .history-analysis-container,
    .history-container,
    .upload-content,
    .plan-body,
    .loading-body,
    .result-body {
        width: 414px !important;
        max-width: 414px !important;
        margin: 0 auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* 首页背景图限制 */
    .main-bg,
    .bg-img {
        width: 414px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    /* 全局背景层伪元素限制 */
    .result-body::before,
    .plan-loading-body::before,
    .history-analysis-body::before {
        width: 414px !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
    
    /* 卡片容器限制 */
    .gender-card-wrapper,
    .loading-card-wrapper,
    .upload-card,
    .card-wrapper {
        max-width: 334px !important;
    }
    
    /* 弹窗容器限制 */
    .tips-modal,
    .tips-modal--golden,
    .upload-modal-content,
    .analyzed-avatar-sheet {
        max-width: 414px !important;
    }
}

/* 变量更新 - 大屏使用固定宽度 */
@media screen and (min-width: 768px) {
    :root {
        --container-width: 414px;
    }
}

@font-face {
    font-family: "Digital Numbers";
    src: url("../Digital%20Numbers.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Alternate Bold";
    src: url("../DIN%20Alternate%20Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 定义全局粗细 */
strong, b {
    font-weight: 500;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

/*
 * 长页面背景图方案：固定背景层 + 滚动内容层
 * 背景图宽度填满屏幕，高度等比自适应，fixed定位不随内容滚动
 */
.result-body,
.plan-loading-body,
.history-analysis-body {
    position: relative;
    background-color: #F9F5EB; /* 兜底背景色 */
}

/* 伪元素作为固定背景层
 * 背景图是2倍切图(828x1932)，实际显示尺寸按414x966计算
 * 从顶部开始显示，高度超过966px时平铺
 */
.result-body::before,
.plan-loading-body::before,
.history-analysis-body::before {
    content: '';
    position: fixed;
    top: 0; /* 从顶部开始 */
    left: 0;
    width: 100%;
    height: calc(100vw * 966 / 414); /* 按实际显示比例计算高度 */
    max-height: 966px; /* 最大高度不超过背景图原始高度(2倍图的一半) */
    background: url('../img/bg_loop.png') no-repeat center top;
    background-size: 100% auto; /* 宽度填满，高度自适应 */
    z-index: -1;
    pointer-events: none;
}

/* 屏幕高度超过966px时，背景图平铺填满整个屏幕 */
@media (min-height: 967px) {
    .result-body::before,
    .plan-loading-body::before,
    .history-analysis-body::before {
        background-repeat: repeat;
        background-size: 100% calc(100vw * 966 / 414);
        height: 100vh; /* 填满整个屏幕高度 */
        max-height: none; /* 取消最大高度限制 */
    }
}

/* ========== Loading 层 ========== */
.loading-container {
    position: fixed;
    inset: 0;
    background-image: url('../img/home_un_bg.png');
    background-color: #fff;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 8888;
    overflow-y: auto;
}

/* 文本背景区域 */
.loading-text-background {
    width: calc(100% - 80px);
    max-width: calc(100vw - 80px);
    border-radius: 30px;
    border: 2px solid #FFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, #FFF 30.39%);
    box-shadow: 0 0 20px 0 #FFF inset, 0 0 30px 0 rgba(184, 129, 0, 0.50);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    margin-top: auto;
    margin-bottom: 70px;
}

/* 主文本内容 */
.loading-main-text {
    font-size: 3.86vw;
    line-height: 5.8vw;
    color: #7F624D;
}

.loading-main-text strong {
    font-weight: bold;
}

/* Loading 进度区域 */
.loading-progress-section {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Loading 文本 */
.loading-progress-text {
    font-size: 3.38vw;
    line-height: 3.38vw;
    color: #876D46;
    text-align: center;
    margin-top: 15px;
}

/* Loading 进度条容器 */
.loading-progress-container {
    width: 100%;
    height: 5px;
    background: rgba(181, 153, 110, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

/* Loading 进度条 */
.loading-progress-bar {
    width: 0%;
    height: 100%;
    background: #997F57;
    border-radius: 10px;
    transition: width 0.1s linear;
}

/* ========== 微信分享兜底方案 ========== */
/* 必须是 body 内第一张图片，且尺寸大于 300px */
.wechat-share-fallback {
    margin: 0;
    padding: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.wechat-share-fallback .wechat-share-img {
    display: block;
}
/* ========== AI 建议区 - 共用样式 ========== */
.ai-suggestion-section {
    margin-top: 40px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ai-icon-img {
    width: 10.63vw;
    height: 10.63vw;
    z-index: 2;
}

.ai-suggestion-card {
    width: 81.64%;
    background: #222222;
    border-radius: 10px;
    padding: 20px;
    margin-top: -7px;
    z-index: 1;
}

.ai-suggestion-text {
    font-size: 3.86vw;      /* 16px / 414px * 100 ≈ 3.86vw */
    line-height: 6vw;     /* 24px / 414px * 100 ≈ 5.8vw */
    font-weight: 300;
    color: #FFFFFF;
    font-family: system-ui, -apple-system, sans-serif;
    text-align: justify;
}

.ai-suggestion-text p {
    margin-bottom: 20px;
}

.ai-suggestion-text p:last-child {
    margin-bottom: 0;
}

.highlight-green {
    color: #54FF9A;
    font-weight: 500;
}

.highlight-bold {
    font-weight: 500;
}

/* ========== 弹窗遮罩层 ========== */
/* 通用弹窗遮罩 - 所有页面共用 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ============================================================================
   六、工具类（Utility Classes）- 放在最后确保优先级
   ============================================================================ */

/* 全局隐藏类 - 必须放在文件最末尾，确保能覆盖前面所有的 display 设置
   使用 !important 确保优先级最高，这是工具类的正确用法
*/
.hidden {
    display: none !important;
}


/* ============================================================================
   七、全局滚动条样式（细滚动条，用于弹窗文字区等）
   ============================================================================ */

/* 细滚动条 - 用于弹窗内文字区域 */
.thin-scrollbar::-webkit-scrollbar,
[class*="-text-wrapper"]::-webkit-scrollbar,
[class*="-text-scroll"]::-webkit-scrollbar {
    width: 1.21vw;
    max-width: 5px;
}

.thin-scrollbar::-webkit-scrollbar-track,
[class*="-text-wrapper"]::-webkit-scrollbar-track,
[class*="-text-scroll"]::-webkit-scrollbar-track {
    background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-thumb,
[class*="-text-wrapper"]::-webkit-scrollbar-thumb,
[class*="-text-scroll"]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 1.21vw;
}

/* Firefox 滚动条 */
.thin-scrollbar,
[class*="-text-wrapper"],
[class*="-text-scroll"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}