/* 基础样式 - base.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 🔥 全局Emoji优化 - 确保在Windows触摸屏上正确显示 */
body, html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

/* 🔥 Emoji专用字体配置 - 所有可能包含emoji的元素 */
.avatar-icon,
.agent-avatar,
.profile-avatar,
.form-icon,
.label-icon,
[class*="avatar"],
[class*="icon"] {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji", "EmojiOne Color", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========================================
   响应式字体大小 - 根据屏幕宽度自适应
   ======================================== */
/* 1. 基础rem配置（html根元素） */
html {
    /* 320px屏幕: 12px */
    font-size: 12px;
}

/* 375px屏幕（iPhone 6/7/8）: 14px */
@media screen and (min-width: 375px) {
    html {
        font-size: 14px;
    }
}

/* 414px屏幕（iPhone Plus）: 15px */
@media screen and (min-width: 414px) {
    html {
        font-size: 15px;
    }
}

/* 768px屏幕（iPad竖屏）: 16px */
@media screen and (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* 1024px屏幕（iPad横屏/小笔记本）: 18px */
@media screen and (min-width: 1024px) {
    html {
        font-size: 18px;
    }
}

/* 1440px屏幕（桌脸显示器）: 20px */
@media screen and (min-width: 1440px) {
    html {
        font-size: 20px;
    }
}

/* 1920px屏幕（Full HD）: 24px */
@media screen and (min-width: 1920px) {
    html {
        font-size: 24px;
    }
}

/* 2560px及以上屏幕（2K/4K - 55寸触摸屏）: 28px */
@media screen and (min-width: 2560px) {
    html {
        font-size: 28px;
    }
}

/* 3840px及以上屏幕（4K超清）: 32px */
@media screen and (min-width: 3840px) {
    html {
        font-size: 32px;
    }
}

/* 2. 定义字体大小变量 */
:root {
    --app-font-size: 1rem; /* 相对于html根元素 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    background: linear-gradient(180deg, #E5E1F0 0%, #F0EEF7 20%, #FAFAFA 50%, #FFFFFF 80%);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--app-font-size);
}

/* 3. 字体大小全局类（用户手动调节） */
body.font-size-standard {
    --app-font-size: 1rem;
}

body.font-size-large {
    --app-font-size: 1.125rem; /* 18/16 = 1.125 */
}

body.font-size-xlarge {
    --app-font-size: 1.25rem; /* 20/16 = 1.25 */
}

body.font-size-xxlarge {
    --app-font-size: 1.375rem; /* 22/16 = 1.375 */
}

.app-container {
    max-width: 100%; /* 改为100%自适应 */
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(180deg, #E5E1F0 0%, #F0EEF7 15%, #F8F7FB 35%, #FEFEFE 60%);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Home indicator - 精致版 */
.home-indicator {
    position: fixed;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 125px;
    height: 3.5px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 2px;
    opacity: 1;
}

/* 平板竖屏4K适配（2160×3840）*/
@media screen and (min-width: 2160px) and (max-width: 2560px) and (orientation: portrait) {
    .app-container {
        max-width: 100%; /* 改为100%自适应 */
        width: 100%;
        margin: 0 auto;
    }
    
    .home-indicator {
        width: 320px;
        height: 8px;
        bottom: 12px;
    }
}

/* 55寸触摸屏适配 - 1024px及以上使用全屏 (支持竖屏1080px) */
@media screen and (min-width: 1024px) and (max-width: 2159px) {
    .app-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }
    
    .home-indicator {
        width: 180px;
        height: 5px;
        bottom: 8px;
    }
}