/**
 * ============================================================
 *  os.css — 系统级 UI 样式表
 * ============================================================
 *  职责：
 *    1. 定义全局 CSS 变量（主题色、间距、圆角、毛玻璃参数）
 *    2. 重置浏览器默认样式，锁定视口为手机全屏
 *    3. 状态栏、桌面网格、Dock 栏、App 容器的布局与视觉
 * ============================================================
 */

/* ——————————————————————————————————————————————
 *  1. CSS 变量 —— 全局设计令牌
 * —————————————————————————————————————————————— */

:root {
  /* 安全区域变量 */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --total-header-height: calc(44px + var(--safe-area-top));
  --total-bottom-bar-height: calc(56px + var(--safe-area-bottom));

  /* 主题色 */
  --color-primary       : #007aff;
  --color-primary-light : #5ac8fa;
  --color-text          : #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.65);

  /* 背景 */
  --bg-gradient-start   : #0f0c29;
  --bg-gradient-mid     : #302b63;
  --bg-gradient-end     : #24243e;

  /* 毛玻璃 */
  --glass-bg            : rgba(255, 255, 255, 0.12);
  --glass-border        : rgba(255, 255, 255, 0.18);
  --glass-blur          : 20px;

  /* 间距 */
  --spacing-xs          : 4px;
  --spacing-sm          : 8px;
  --spacing-md          : 16px;
  --spacing-lg          : 24px;
  --spacing-xl          : 32px;

  /* 圆角 */
  --radius-icon         : 22.5%;   /* iOS 松鼠圆角 */
  --radius-md           : 14px;
  --radius-lg           : 20px;

  /* 状态栏 */
  --statusbar-height    : 44px;

  /* Dock */
  --dock-height         : 88px;
  --dock-bottom-padding : 8px;

  /* 图标 */
  --icon-size           : 60px;
  --icon-label-size     : 11px;
}

/* ——————————————————————————————————————————————
 *  2. 全局重置
 * —————————————————————————————————————————————— */

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

/* 禁止任何方向的滚动 & 原生滚动条 */
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;                 /* 模拟移动端，禁止选中 */
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ——————————————————————————————————————————————
 *  3. 手机壳 & 渐变背景
 * —————————————————————————————————————————————— */

#os-root {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--bg-gradient-start),
    var(--bg-gradient-mid),
    var(--bg-gradient-end)
  );
  display: flex;
  flex-direction: column;
}

/* ——————————————————————————————————————————————
 *  4. 顶部状态栏
 * —————————————————————————————————————————————— */

#status-bar {
  flex-shrink: 0;
  height: var(--statusbar-height);
  padding: 0 var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
}

#status-bar .status-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

#status-bar .status-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* 状态栏图标统一尺寸 */
#status-bar .status-right .status-icon {
  font-size: 15px;
  opacity: 0.9;
}

/* ——————————————————————————————————————————————
 *  5. 桌面网格区域
 * —————————————————————————————————————————————— */

#desktop {
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: min-content;
  gap: var(--spacing-lg) 0;
  align-content: start;
  justify-items: center;
  overflow: hidden;
}

/* 单个 App 图标容器 */
.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.app-icon:active {
  transform: scale(0.88);
  opacity: 0.75;
}

/* 图标方块 */
.app-icon .icon-img {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  /* 默认渐变，各 App 可覆盖 */
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* 图标下方文字 */
.app-icon .icon-label {
  font-size: var(--icon-label-size);
  color: var(--color-text);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  max-width: calc(var(--icon-size) + 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— 各 App 图标独立配色 —— */

.app-icon[data-app="line"] .icon-img {
  background: linear-gradient(135deg, #00b900 0%, #00d400 100%);
}

.app-icon[data-app="photos"] .icon-img {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}

.app-icon[data-app="settings"] .icon-img {
  background: linear-gradient(135deg, #8e8e93 0%, #636366 100%);
}

.app-icon[data-app="browser"] .icon-img {
  background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
}

/* ——————————————————————————————————————————————
 *  6. 底部 Dock 栏（毛玻璃）
 * —————————————————————————————————————————————— */

#dock {
  flex-shrink: 0;
  height: var(--dock-height);
  margin: 0 var(--spacing-sm) var(--dock-bottom-padding);
  padding: 0 var(--spacing-md);
  border-radius: var(--radius-lg);

  /* 毛玻璃核心 */
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));

  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

/* Dock 内图标复用 .app-icon 样式，但隐藏文字 */
#dock .app-icon .icon-label {
  display: none;
}

/* Dock 内图标稍小 */
#dock .app-icon .icon-img {
  width: 50px;
  height: 50px;
  font-size: 24px;
}

/* ——————————————————————————————————————————————
 *  7. App 全屏容器（遮罩层）
 * —————————————————————————————————————————————— */

#app-viewport {
  position: fixed;
  inset: 0;                          /* top/right/bottom/left = 0 */
  z-index: 9999;                     /* 最高层级 */
  background: var(--bg-gradient-start);
  display: none;                     /* 默认隐藏 */

  /* 打开时的入场动画准备 */
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#app-viewport.active {
  display: block;
  opacity: 1;
  transform: scale(1);
}

/* 为 App 内容提供安全区域 */
#app-viewport .app-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}