/**
 * xychat - iPhone外框样式
 * 模拟iPhone设备外观
 */

/* 壁纸设置已移至 variables.css，支持日间/夜间模式切换 */

/* === Phone容器 === */
.phone-container {
  width: var(--phone-width);
  height: var(--phone-height);
  background: var(--bg-primary);
  border-radius: var(--phone-radius);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  box-shadow: 
    0 0 0 1px #353535,
    0 0 0 3px #454545;
  overflow: hidden;
  z-index: var(--z-phone);
  /* 允许phone内部的触摸操作 */
  touch-action: pan-y pan-x;
  /* 确保在所有情况下都能居中 */
  margin: 0;
  padding: 0;
}

/* === 自适应设备尺寸 === */
@media (max-width: 414px) {
  .phone-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* 使用动态视口高度,避免地址栏影响 */
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    position: fixed;
    overflow: hidden;
  }
}

@media (max-height: 900px) and (min-width: 415px) {
  .phone-container {
    transform: translate(-50%, -50%) scale(calc(min(100vh / var(--phone-height), 1)));
    transform-origin: center center;
  }
}

/* === 确保在更大屏幕上也能正确居中 === */
@media (min-height: 901px) and (min-width: 415px) {
  .phone-container {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
  }
}

/* === 随设备缩放模式（上限调大，支持竖屏平板） === */
/* 当添加了 phone-size-auto 类时，自动适应屏幕，上限支持到 1200px 高度 */
.phone-container.phone-size-auto {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: min(100vh, 1200px) !important;
  max-height: min(100dvh, 1200px) !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 414px) and (max-height: 900px) {
  .phone-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    position: fixed;
    overflow: hidden;
  }
}

/* === 屏幕区域 === */
.phone-screen {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: var(--bg-screen);
  position: relative;
  overflow: hidden;
  z-index: var(--z-screen);
}

/* === 屏幕内容容器 === */
.screen-content {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* 统一壁纸背景：日间模式使用日间壁纸，如果没有设置则使用状态栏颜色 */
  background: var(--desktop-wallpaper-day, var(--statusbar-system-color));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === 夜间模式壁纸 === */
[data-theme="dark"] .screen-content {
  background: var(--desktop-wallpaper-night, var(--statusbar-system-color));
}

/* === 内容主体区域 === */
.content-area {
  flex: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 0; /* 重要: 允许flex子元素正确收缩 */
  /* 透明，让screen-content的背景显示 */
  background: transparent;
}

/* === 适配安全区域 === */
.safe-area-top {
  padding-top: var(--statusbar-height);
}

.safe-area-bottom {
  padding-bottom: 8px;
}

/* === APP容器 === */
.app-container {
  position: absolute;
  top: var(--statusbar-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--statusbar-height));
  background: var(--bg-primary);
  z-index: 1000;
  overflow: hidden;
}