/* --- 基础设置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; 
}

/* --- 基础设置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; 
}

/* 🌟 恢复原样并使用温和的防回弹 */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: var(--bg-color);
}

/* 🌟 全新专用背景层，彻底解决移动端 fixed 导致壁纸疯狂放大的 Bug */
.global-bg-layer {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100dvh;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none; /* 防止阻挡点击 */
}





:root {
    --bg-color: #f9f9f9;
    --white-card-bg: #ffffff;
    --avatar-top-text: #333333;
    --quote-bg: #ffffff;
    --quote-color: #b3b3b3; 
    --avatar-bottom-text: #777777;
    --bubble-right-bg: #f2f2f2; 
    --bubble-right-text: #555555;
    --bubble-left-bg: #ffffff;
    --bubble-left-text: #333333;
    --bubble-name-color: #888888;
    --lyric-color: #000000;
    --progress-fill: #d1d1d1; 
    --progress-dot: #000000;  
    --blog-bar-bg: #f5f5f5; 
    --blog-line: #d1d1d1;   
    --blog-heart: #d1d1d1;
    
    /* 🌟 新增：博客卡片高度自定义变量 */
    --blog-bg: #ffffff;
    --blog-icon-color: #666666;
    --polaroid-bg: #ffffff;
    --polaroid-border: #ffffff;
    
    /* 🌟 全局安全区适配变量 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}


.mobile-container {
    width: 100%;
    height: 100%;
    padding: calc(5px + var(--safe-top)) 20px 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: hidden; 
    touch-action: none; 
    overscroll-behavior: none;
    padding-bottom: var(--safe-bottom); /* 🌟 修复：只保留原生的安全区高度，不再把Dock栏往上顶 */
}


.mobile-container::-webkit-scrollbar { display: none; }

/* 🌟 新增：底层锁死类，防止键盘顶飞与滚动穿透 */
.mobile-container.no-scroll { overflow: hidden !important; }


/* --- 1. 白色卡片区域 --- */
.white-card {
    background: var(--white-card-bg);
    width: 94%; 
    height: 150px;
    border-radius: 20px;
    margin-top: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; 
    padding-bottom: 55px; 
    z-index: 1;
    flex-shrink: 0;
    transition: background 0.3s;
}

.profile-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--avatar-top-text);
    z-index: 2;
    margin-bottom: 0; 
    margin-top: 5px;
}

/* --- 2. 悬浮内容区 --- */
.floating-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: -50px; 
    z-index: 10;
    flex-shrink: 0;
}

.avatar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; 
}

.quote-circle {
    width: 37px; height: 37px; 
    background: var(--quote-bg); 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
}
.quote-mark { font-size: 22px; color: var(--quote-color); font-family: serif; margin-top: 4px; }

.avatar-img {
    width: 85px; height: 85px; border-radius: 12px; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); background: #fff;
    cursor: pointer;
    transition: transform 0.2s;
}
.avatar-img:active { transform: scale(0.95); }

.profile-id {
    font-size: 14px; color: var(--avatar-bottom-text); margin-top: 13px;
    letter-spacing: 0.5px; font-weight: 500;
}

/* --- 3. 聊天列表 --- */
.chat-list {
    width: 100%;
    margin-top: 20px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.message-row { display: flex; align-items: flex-end; }
.message-row.right { justify-content: flex-end; }
.message-row.left { justify-content: flex-start; }

.time-stamp { font-size: 10px; color: #999; margin: 0 6px 5px 6px; }

.bubble { 
    padding: 6px 14px; border-radius: 15px; font-size: 13px; line-height: 1.4; 
    max-width: 75%; box-shadow: 0 1px 3px rgba(0,0,0,0.02); word-break: break-all;
}
.bubble.gray { background-color: var(--bubble-right-bg); color: var(--bubble-right-text); }
.bubble.white { background-color: var(--bubble-left-bg); color: var(--bubble-left-text); }

.left-info { display: flex; flex-direction: column; margin-right: 8px; }
.sender-name { font-size: 11px; color: var(--bubble-name-color); margin-left: 45px; margin-bottom: 2px; }
.small-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #eee; }
.small-avatar img { width: 100%; height: 100%; object-fit: cover; }
.read-status { font-size: 9px; color: #ccc; margin-left: 4px; margin-bottom: 2px; }

/* --- 4. 音乐播放器 --- */
.music-player {
    width: 90%;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.music-lyric {
    font-family: "Courier New", monospace;
    font-size: 14px;
    color: var(--lyric-color); 
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-weight: 500;
}

.progress-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 10px;
}

.time-text { font-size: 12px; font-weight: 700; color: #555; }

.progress-bar-bg {
    flex-grow: 1; height: 3px; background-color: #eee; margin: 0 10px;
    border-radius: 2px; position: relative; display: flex; align-items: center; 
}

.progress-bar-fill {
    width: 50%; height: 100%; 
    background-color: var(--progress-fill); 
    border-radius: 2px; position: relative;
}

.slider-dot {
    width: 9px; height: 9px; 
    background-color: var(--progress-dot); 
    border-radius: 50%;
    position: absolute; right: -4.5px; top: 50%; transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* --- 5. 中间混合区域 --- */
.middle-mix-section {
    width: 100%;
    margin-top: 25px;
    padding: 0 5px;
    display: flex;
    gap: 15px; 
    align-items: flex-start;
    flex-shrink: 0; 
}

.blog-wrapper {
    flex: 1.4;
    transform: scale(0.85);
    transform-origin: top left;
    margin-bottom: -30px; 
    margin-right: -20px;
}

.blog-card {
    background: var(--blog-bg);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}


.browser-bar {
    background-color: var(--blog-bar-bg);
    border-radius: 20px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; 
    margin-bottom: 10px;
}

.browser-text { font-size: 9px; color: #555; }
.refresh-icon { font-size: 9px; margin-left: auto;}

.blog-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.blog-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.blog-info { display: flex; flex-direction: column; }
.blog-user { font-size: 11px; font-weight: bold; color: #333; }
.blog-date { font-size: 9px; color: #999; }
.blog-menu { margin-left: auto; color: #999; font-size: 12px; }

.blog-content { display: flex; gap: 6px; margin-bottom: 12px; z-index: 2; }
.gray-line { width: 3px; background-color: var(--blog-line); border-radius: 2px; flex-shrink: 0; }
.blog-text { font-size: 10px; line-height: 1.5; color: #555; }

.device-info { font-size: 9px; color: #888; font-weight: 500; margin-bottom: 6px; }

.action-icons { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.icon-svg { display: block; }
.heart-icon path { fill: var(--blog-heart); }

.polaroid-img {
    position: absolute; right: -8px; bottom: 20px; width: 60px; height: 80px;
    background: var(--polaroid-bg); padding: 3px 3px 12px 3px; box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    border: 1px solid var(--polaroid-border);
    transform: rotate(8deg); z-index: 1;
}

.polaroid-img img { width: 100%; height: 100%; object-fit: cover; }

.apps-grid {
    flex: 1; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px 10px; 
    margin-top: 13px; 
}

.app-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; }

.app-icon-card {
    width: 55px; height: 40px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 6px;
    overflow: hidden;
}
.app-icon-card img { width: 100%; height: 100%; object-fit: cover; }
.app-name { font-size: 12px; color: #444; font-weight: 500; }

.search-section {
    width: 100%; display: flex; justify-content: center; margin-top: 25px; padding-bottom: 20px; flex-shrink: 0;
}

.search-capsule {
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px);
    padding: 4px 18px; border-radius: 50px; display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid rgba(255,255,255,1);
}

.search-text { color: #888888; font-size: 13px; font-weight: 500; letter-spacing: 1px; }

.dock-container {
    position: fixed; bottom: 20px; left: 0; width: 100%; display: flex; justify-content: center; z-index: 90;
}

.dock-bar {
    background-color: rgba(240, 240, 240, 0.75); backdrop-filter: blur(10px);
    width: 95%; height: 75px; border-radius: 35px; display: flex; align-items: center; justify-content: space-evenly; padding: 0 10px;
}

.dock-icon {
    width: 48px; height: 48px; background-color: #ffffff; border-radius: 14px;
    box-shadow: none; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
}
.dock-icon img { width: 100%; height: 100%; object-fit: cover; }


/* ======================================================== */
/* ⬇️ 全局 App Overlay 动画与容器框架 (复用) ⬇️ */
/* ======================================================== */

.app-overlay {
    position: fixed; top: 0; left: 0; width: 100%; 
    height: 100vh; /* 🌟 修复：只用100vh，不让系统地址栏逻辑干扰聊天应用高度 */
    background-color: #ffffff; 
    z-index: 999;
    display: flex; flex-direction: column;
    box-sizing: border-box;


    opacity: 0;
    transform: scale(0.2); 
    pointer-events: none;
    visibility: hidden; /* 🌟 加入物理隐身，绝杀 Safari 残留渲染导致主页白屏、点不动 Bug */
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s ease-out, visibility 0.4s;
}

.app-overlay.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.05), opacity 0.2s ease-in, visibility 0s;
}

.app-close-btn {
    position: absolute; 
    /* 🌟 极致压缩：全局所有页面的关闭按钮距离灵动岛 5px */
    top: calc(5px + var(--safe-top)); 
    right: 15px;
    width: 26px; height: 26px; border-radius: 50%;
    background: #f0f0f0; 
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10;
}

.app-close-btn svg { width: 14px; height: 14px; }

/* 🌟 全局终极修复：隐藏所有多余的原生滚动条，保持极简纯净视觉 */
.screen-body::-webkit-scrollbar,
.chat-settings-body::-webkit-scrollbar,
.api-main-container::-webkit-scrollbar,
.icity-body::-webkit-scrollbar,
.msg-list-container::-webkit-scrollbar,
.chat-room-body::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar,
.wb-content-area::-webkit-scrollbar,
.voice-layout-wrapper::-webkit-scrollbar,
.sticker-page::-webkit-scrollbar,
.char-scroll-track::-webkit-scrollbar {
    display: none;
}

.screen-body,
.chat-settings-body,
.api-main-container,
.icity-body,
.msg-list-container,
.chat-room-body,
.modal-content,
.sheet-body,
.wb-content-area,
.voice-layout-wrapper,
.sticker-page,
.char-scroll-track {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ======================================================== */
/* 🌟 顶部白色长条通知 (Toast) 动画与纯白药丸样式 */
/* ======================================================== */
.top-notification-pill {
    position: fixed;
    top: -100px; /* 默认隐藏在屏幕上方 */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 380px;
    background: #ffffff; /* 纯白色 */
    border-radius: 50px; /* 药丸形状 */
    display: flex;
    align-items: center;
    padding: 5px 15px 5px 5px; /* 左边间距小一点，紧贴头像 */
    z-index: 10000;
    box-shadow: none; /* 听你的，绝对没有任何阴影 */
    border: none;     /* 绝对没有任何描边 */
    transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15); /* 丝滑下拉果冻回弹 */
    pointer-events: none;
}

.top-notification-pill.show {
    top: calc(15px + var(--safe-top)); /* 丝滑下拉到安全区下方 */
}

.top-notif-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    background: #f0f0f0;
    flex-shrink: 0;
}

.top-notif-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
}

.top-notif-name {
    font-size: 14px;
    font-weight: 800;
    color: #000000; /* 黑色名字 */
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-notif-desc {
    font-size: 12px;
    color: #888888; /* 浅灰字体 */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 内容过多显示省略号 */
}