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


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

/* 页面容器 - 页面最外层容器，设置全屏尺寸和基础背景 */
.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;
}

/* ============================================================================
   三、大屏适配 - 暂不限制宽度，保持响应式
   ============================================================================ */

/* 大屏适配已移除 - 所有屏幕保持100%宽度响应式 */

@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: 233.33vw; /* 最大高度不超过背景图原始高度(2倍图的一半) */
    background: url('../img/bg_loop.png') no-repeat center top;
    background-size: 100% auto; /* 宽度填满，高度自适应 */
    z-index: -1;
    pointer-events: none;
}

/* 内容超长时（无论大屏小屏），背景图改为absolute定位并垂直平铺 */
@media (min-height: 967px) {
    .result-body::before,
    .plan-loading-body::before,
    .history-analysis-body::before {
        position: absolute; /* 改为绝对定位，随内容滚动 */
        background-repeat: repeat;
        background-size: 100% calc(100vw * 966 / 414);
        height: 100%; /* 跟随 body 内容高度 */
        min-height: 100vh; /* 至少填满视口 */
        max-height: none; /* 取消最大高度限制 */
    }
}

/* ========== 微信分享兜底方案 ========== */
/* 必须是 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: 9.66vw /* 原: 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;
    /* 使用 drop-shadow 按PNG透明形状显示阴影，上方金色光晕+下方紫色光晕 */
    filter: drop-shadow(0px -1px 5px rgba(255, 191, 0, 0.25)) drop-shadow(0px 1px 5px rgba(106, 0, 182, 0.5));
}

.ai-suggestion-card {
    width: 81.64%;
    background: #222222;
    border-radius: 2.42vw;
    padding: 4.83vw /* 原: 20px */;
    margin-top: -2.42vw; /* 10px / 414px，AI图标压住卡片10px */
    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: 4.83vw /* 原: 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;
    inset: 0;  /* 简写：top/left/right/bottom: 0 */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: safe center;  /* safe center 防止被键盘截断 */
    /* iOS键盘弹出时保持居中 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


/* ============================================================================
   六、工具类（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;
}


/* ============================================================================
   八、全局错误弹窗样式（用于 guard.js）
   ============================================================================ */

/* 错误弹窗遮罩层 */
.global-error-dialog-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 错误弹窗内容框 */
.global-error-dialog-box {
    max-width: 80%;
    background: #1f1f1f;
    border-radius: 2.90vw;
    padding: 3.86vw 4.83vw /* 原: 16px 20px */;
    color: #fff;
    font-size: 3.38vw;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   通用进度条样式（从 loading.css 迁移）
   ============================================================ */

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

/* 进度条实际进度 */
.progress-bar {
    width: 0%;
    height: 100%;
    background: #997F57;
    border-radius: 2.42vw;
    transition: width 0.3s ease;
}

/* 进度文字 */
.progress-text {
    font-size: 3.38vw;
    color: #876D46;
    text-align: center;
    margin-top: 2.42vw;
}

/* 全局文字颜色类 */
.text-gray {
    color: #888888;
}

/* 全局红色加粗 */
.text-red-bold {
    color: #870000;
    font-weight: bold;
}