/* ========== OS 视觉系统 (Tingsu Edition) ========== */

/* 1. 桌面容器：纯白，深邃 */
#os-desktop-layer {
    background: #FFFFFF;
    padding: 60px 24px;
    box-sizing: border-box;
    /* 动画基准：让桌面在切换时能产生缩放效果 */
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
          opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. 应用图标网格 */
.os-app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行4个 */
    gap: 20px;
    width: 100%;
}

  .os-app-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 强制水平居中 */
    width: 72px; /* 给定一个明确宽度，比图标宽，才有居中的空间 */
    gap: 8px;
    cursor: pointer;
    /* 点击时的微缩反馈 */
    transition: transform 0.1s;
}
.os-app-item:active {
    transform: scale(0.9);
}

.os-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 18px; /* 超椭圆 */
    box-shadow: 
        inset 0 0 0 1px rgba(0,0,0,0.03), /* 内描边 */
        0 10px 20px rgba(0,0,0,0.02);     /* 极淡的投影 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #546E7A; /* 听诉灰 */
    position: relative;
    overflow: hidden;
}

/* 图标内的高光流光（增加高级感） */
.os-icon-box::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
    opacity: 0.5;
}

.os-app-name {
    font-family: var(--font-sans);
    font-size: 10px;
    color: #90A4AE;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    text-align: center;
}

/* 4. 应用容器通用状态 (App Window) */
/* 所有 App (包括原来的记录流) 都共用这个类 */
.os-app-window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #FFFFFF;
    z-index: 10;
    
    /* 默认隐藏状态：缩小并变透明 (营造它是从图标里长出来的错觉) */
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none; /* 隐藏时不可点 */
    
    /* 核心动画：贝塞尔曲线模拟物理阻尼 */
    transition: 
        opacity 0.3s ease,
        transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 激活状态：App 充满屏幕 */
.os-app-window.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* 当 App 打开时，桌面缩放退场 */
.desktop-zoomed-out {
    transform: scale(1.1); /* 桌面稍微放大一点点变淡，制造纵深 */
    opacity: 0;
    pointer-events: none;
}