/* css/global.css */

:root {
    /* --- 暖色系调色板 --- */
    --bg-warm-1: #fdfbf7;      /* 米白底色 */
    --accent-orange: #ff9a8b;  /* 暖橙强调色 */
    --accent-pink: #ff6a88;    /* 暖粉渐变 */
    --text-main: #4a4a4a;      /* 深灰文字（比纯黑柔和） */
    --text-light: #8b8b8b;     /* 浅灰文字 */
    
    /* --- 磨砂玻璃参数 --- */
    --glass-bg: rgba(255, 255, 255, 0.45); /* 半透明白 */
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    --blur-amount: 12px;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 网页大背景：可以是深色或者虚化的暖色，为了突出中间的小手机 */
    background: #e0e0e0; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 核心容器：这就是你的“手机屏幕” */
/* --- 原有的固定态容器 --- */
#app-screen {
    width: 360px;
    height: 800px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fdfbf7 0%, #fff1eb 100%);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    transition: width 0.3s, height 0.3s; /* 增加切换时的丝滑过渡 */
}

/* --- 🆕 开启自适应后的全屏流动伸缩态 --- */
#app-screen.is-fluid-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 隐藏滚动条但保留功能 */
::-webkit-scrollbar {
    display: none; 
}

#vue-app {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 这一行也很重要 */
}

.notification-banner {
    position: absolute;
    top: 10px; /* 顶部留一点空隙 */
    left: 10px; right: 10px; /* 左右留边 */
    height: 70px;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    
    display: flex;
    align-items: center;
    padding: 10px 15px;
    box-sizing: border-box;
    gap: 12px;
    
    z-index: 9999;
    cursor: pointer;
    
    /* 进场动画：从上掉下来 */
    animation: bannerSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bannerSlideIn {
    from { transform: translateY(-100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.notify-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #eee;
    overflow: hidden;
    flex-shrink: 0;
}
.notify-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notify-placeholder { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight: bold; color: #999; }

.notify-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.notify-title { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 2px; }
.notify-text { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.notify-time { font-size: 10px; color: #bbb; align-self: flex-start; margin-top: 5px; }