:root {
  --bg-main: #f4f6fa;          /* 高级灰蓝主背景 */
  --surface: #ffffff;          /* 纯白 */
  --surface-hover: #f1f5f9;
  --primary: #1e88e5;          /* 晴空浅蓝色 */
  --primary-light: #e3f2fd;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border: #e2e8f0;
  --danger: #ef4444;
  --shadow-sm: 0 4px 12px rgba(15,23,42,0.04);
  --shadow-md: 0 8px 30px rgba(15,23,42,0.06);
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  user-select: none;
}

/* Standalone PWA 的安全区可能超出 phone-container 的 CSS 盒子，
   用独立底层让壁纸延伸到整个真实视口。 */
#standalone-wallpaper-surface {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-main);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 核心修复：自动撑开为全屏模式，并在全面屏设备下自适应安全区域 */
#phone-container {
  --phone-safe-top: env(safe-area-inset-top, 0px);
  width: min(390px, calc(100vw - 32px), calc((100vh - 32px) * 0.462));
  height: auto;
  aspect-ratio: 390 / 844;
  max-height: calc(100vh - 32px);
  background-color: var(--bg-main);
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
  border-radius: 32px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1;
}

/* 纯视觉的 iPhone 顶部状态栏，不参与页面布局。 */
#status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 20px 0;
  color: #0f172a;
  pointer-events: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.status-bar-time {
  min-width: 42px;
  text-align: left;
}

.status-bar-island {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 112px;
  height: 26px;
  border-radius: 999px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 3px rgba(15, 23, 42, 0.25);
  transform: translateX(-50%);
}

.status-bar-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 76px;
}

.status-icon {
  display: block;
  width: 17px;
  height: 15px;
}

.status-wifi {
  width: 17px;
  height: 15px;
}

.status-battery {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 23px;
  height: 12px;
  padding: 2px;
  border: 1.5px solid currentColor;
  border-radius: 3.5px;
}

.status-battery::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -3.5px;
  width: 2px;
  height: 5px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

.status-battery-level {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
}

#desktop {
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 58px 20px 20px 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 16px;
  min-height: 200px;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  cursor: grab;
  transition: transform 0.15s ease;
}
.app-icon:active {
  cursor: grabbing;
  transform: scale(0.95);
}
.edit-mode .app-icon {
  animation: desktop-icon-jiggle 0.62s ease-in-out infinite alternate;
  transform-origin: 50% 75%;
}
@keyframes desktop-icon-jiggle {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}
.icon-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary);
  margin-bottom: 8px;
  pointer-events: none;
}
.icon-wrapper svg {
  width: 28px;
  height: 28px;
}
.app-icon span {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

#dock {
  display: none;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)) 16px;
}
.dock-container {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  height: 78px;
  /* 统一与 #dock-grid 同源定位：使用 flex+center 让内部网格水平居中 */
  display: flex;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  /* 给 4 个图标预留固定内容宽度，杜绝容器随屏幕拉伸而偏移 */
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0 20px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  body { background-color: var(--bg-main); }
  #phone-container {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
}

/* iOS standalone uses a small dynamic viewport for 100dvh, while the real
   Home Screen surface is the large viewport. Extend the shell into that
   reserved bottom area only for the installed PWA. */
/* 桌面翻页指示器样式 */
#desktop-page-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  height: 24px;
}
.page-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(148, 163, 184, 0.4); /* 柔和未选中灰色 */
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-dot.active {
  width: 18px; /* 选中时演变为小长条 */
  height: 6px;
  border-radius: 3px;
  background-color: rgba(71, 85, 105, 0.85); /* 优雅的深石板灰色 */
}
.page-add-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #07c160;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 4px;
  line-height: 1;
}

/* 桌面浏览器中的手机模拟器增强层：不改变手机内的业务布局。 */
@media (min-width: 481px) {
  body {
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0.28) 26%, transparent 58%),
      linear-gradient(135deg, #d9e1ec 0%, #eef2f7 48%, #cbd5e1 100%);
  }

  #phone-container {
    width: min(390px, calc(100vw - 48px), calc((100vh - 48px) * 0.462));
    max-height: calc(100vh - 48px);
    border-radius: 42px;
    border: 8px solid #111827;
    background: var(--bg-main);
    box-shadow:
      0 2px 4px rgba(15, 23, 42, 0.18),
      0 20px 48px rgba(15, 23, 42, 0.24),
      0 34px 90px rgba(15, 23, 42, 0.16);
    padding-top: 28px;
    padding-bottom: 12px;
  }

  #phone-container[data-companion-shell-theme="sakura-tram"] {
    box-shadow:
      0 2px 4px rgba(117, 52, 63, .18),
      0 20px 48px rgba(164, 94, 116, .24),
      0 34px 90px rgba(164, 94, 116, .16);
  }

  #phone-container[data-companion-shell-theme="night-film"],
  #phone-container[data-companion-shell-theme="night-train"] {
    box-shadow:
      0 2px 4px rgba(117, 78, 24, .18),
      0 20px 48px rgba(194, 151, 38, .22),
      0 34px 90px rgba(194, 151, 38, .15);
  }

  #phone-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 100000;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: inherit;
    pointer-events: none;
  }

  #desktop {
    padding-top: 52px;
    padding-bottom: 18px;
  }

  #dock {
    position: relative;
    padding-bottom: 28px;
  }

  #dock::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 108px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    transform: translateX(-50%);
    pointer-events: none;
  }

  #dynamic-island-container {
    top: 12px !important;
  }
}

/* 小屏和 Android WebView 继续使用全屏手机内容，只保留安全区兼容。 */
@media (max-width: 480px) {
  #dock {
    position: relative;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  #dock::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: 108px;
    height: 4px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.52);
    transform: translateX(-50%);
    pointer-events: none;
  }
}

/* 手机模拟器尺寸与溢出收口：内容只在 phone-container 内布局。 */
html,
body {
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

#phone-container {
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}

/* 真机 Safari/Chrome 已经提供系统状态栏，页面不再重复绘制一层模拟系统栏。 */
#status-bar,
#dynamic-island-container {
  display: none !important;
}

@media (max-width: 480px) {
  #phone-container {
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100dvh;
    max-height: 100svh;
    min-height: 100svh;
    padding-top: 0;
    padding-bottom: 0;
  }

  #phone-container > #desktop {
    padding-top: 16px;
    padding-bottom: 0;
  }

  #phone-container > #desktop-page-indicator {
    margin-bottom: 0;
  }

  /* 隐藏网页模拟状态栏后，编辑工具栏必须回到真实可点击区域。 */
  #phone-container .home-desktop-shell.desktop-editing {
    padding-top: 0 !important;
  }

  #phone-container .desktop-edit-toolbar {
    top: 56px !important;
  }

}

#phone-container > #desktop {
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#phone-container > #desktop::-webkit-scrollbar,
#phone-container .win-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

#phone-container > #desktop-page-indicator {
  flex: 0 0 24px;
  min-height: 24px;
}

#phone-container > #dock {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
}

#phone-container > #dock {
  display: block !important;
}

#phone-container > #app-window-container {
  /* App 窗口贴合手机内容区顶部，安全区由系统页面边界负责，不整体推移 App。 */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#phone-container .app-window,
#phone-container .win-body {
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#phone-container .win-body {
  overflow-y: auto;
}

/* Desktop page track: one fixed 4x5 grid per page, with the shell and Dock
   participating in the same full-height phone layout on iOS and Android. */
#phone-container > #desktop {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-x;
}

#desktop .home-desktop-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

#desktop-pages-container {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  touch-action: pan-x;
}

#desktop-pages {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 260ms cubic-bezier(.22, .7, .28, 1);
  will-change: transform;
}

.desktop-page-panel {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.desktop-page-panel .home-apps-panel {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

#desktop-drag-layer {
  position: absolute;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

@media (max-width: 480px) {
  #phone-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    padding: 0;
  }

  #phone-container > #desktop {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 10px;
  }

  #desktop-pages-container,
  #desktop-pages,
  .desktop-page-panel {
    min-height: 0;
  }

  .desktop-page-panel .home-apps-panel {
    padding: 0;
  }

  #phone-container > #desktop-page-indicator {
    flex: 0 0 24px;
    margin: 0;
  }

  #phone-container > #dock {
    /* 手机端与电脑端保持同一枚悬浮 Dock：外层透明，下面露出壁纸。 */
    flex: 0 0 auto;
    min-height: calc(102px + env(safe-area-inset-bottom, 0px));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Real iOS supplies the Home Indicator. Keep the Dock as one floating
     capsule and leave the safe-area space below it transparent. */
  #phone-container > #dock::after {
    content: none !important;
    display: none !important;
  }

  #phone-container > #dock .dock-container {
    height: 78px;
    min-height: 78px;
    width: 100%;
    border-radius: 28px;
    border: 0;
  }
}

/* Keep this override after every generic mobile rule. iOS standalone reports
   100dvh/100svh below the real Home Screen surface, while 100lvh reaches the
   bottom safe-area region where the wallpaper must remain visible. */
@media (max-width: 480px) and (display-mode: standalone) {
  #standalone-wallpaper-surface {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100lvh;
  }

  #phone-container {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100lvh;
    min-height: 100lvh;
    max-height: none;
    padding: 0;
  }
}

/* Mobile Safari paints normal document content beneath its bottom browser
   chrome. Keep the mobile shell in that document layer instead of locking it
   to the smaller visual viewport used by position: fixed. */
@media (max-width: 480px) {
  html {
    height: auto;
    min-height: 100lvh;
    max-height: none;
    overflow: visible;
  }

  body {
    display: block;
    height: auto;
    min-height: 100lvh;
    max-height: none;
    overflow: visible;
  }

  #standalone-wallpaper-surface {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100lvh;
  }

  #phone-container {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100lvh;
    min-height: 100lvh;
    max-height: none;
    padding: 0;
  }
}