/* ========================================
   Responsive CSS - 响应式适配
   确保桌面预览时手机比例正确
   所有魔法数字已替换为 variables.css 变量
   ======================================== */

/* ---- 小屏桌面适配 ---- */
@media screen and (max-height: 900px) {
  body {
    padding: var(--spacing-lg) 0;
    align-items: flex-start;
  }

  .phone-shell {
    max-height: 95vh;
  }
}

/* ---- 移动端直接全屏展示 ---- */
@media screen and (max-width: 430px) {
  body {
    padding: 0;
    align-items: stretch;
  }

  .phone-shell {
    width: 100%;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 移动端取消背景层圆角，避免背景图两端被裁切 */
  .home-bg-layer {
    border-radius: 0;
  }

  /*
   * 安卓全屏 / 沉浸式 / 刘海屏适配
   * viewport-fit=cover 已在 <meta> 中声明，
   * 以下利用 env() 让内容避开系统 UI 区域。
   * 普通模式下 env() 值为 0，不产生额外空间。
   */

  /* 顶部：避开状态栏 / 刘海 / 挖孔区域 */
  .status-bar {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /*
   * 安卓底部手势区适配（通过 JS 添加 .android-device 类）
   * 仅在安卓设备上生效，不影响 iOS 布局
   */
  .android-device .home-indicator {
    margin-bottom: calc(var(--spacing-xs) + env(safe-area-inset-bottom, 0px));
  }

  /*
   * 安卓部分机型底栏堆叠修复
   * 问题：安卓浏览器全屏模式下，浏览器地址栏占据了部分视口高度，
   *       导致实际可用高度不足。page-content 内的子元素（封面 240px 固定高度等）
   *       总高度超出 phone-screen 可用空间，底部 APP 图标被 dock 栏遮挡。
   * 方案：让封面高度自适应视口，允许 flex 子项收缩，所有内容自然适应屏幕。
   *       不滚动、不裁切。
   */
  .android-device .phone-screen {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .android-device .page-content {
    overflow: hidden;
    min-height: 0;
  }

  /* 允许 profile 区域随可用空间收缩 */
  .android-device .profile-hero {
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* 封面高度：从固定 240px 改为自适应视口高度
   * 最小 100px，首选 22vh（~700px 视口 ≈ 154px），最大 240px */
  .android-device .profile-hero__cover {
    height: clamp(100px, 22vh, 240px);
  }

  /* 允许内容区域随可用空间收缩 */
  .android-device .content-area {
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* 安卓设备确保 dock 栏不被内容覆盖 */
  .android-device .dock-bar {
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-dock);
  }
}

/* ---- iOS standalone 模式（添加到桌面） ---- */
@media screen and (max-width: 430px) and (display-mode: standalone) {
  /*
   * standalone 模式下系统底部有手势条区域（约 34px），
   * 我们的 .home-indicator 元素正好占据这个位置，
   * 把它撑高一些，dock 就自然被推到手势区域上方。
   * 不使用 env(safe-area-inset-bottom) 避免产生过多空白。
   */
  .home-indicator {
    height: 6px;
    margin-bottom: 0;
    opacity: 0; /* 隐藏视觉样式，仅做占位 */
  }

  /*
   * standalone 模式下，系统已经为底部手势条预留了空间，
   * 各子页面底部导航栏不需要再用 safe-area-inset-bottom 撑开，
   * 只保留较小的 padding 即可，让底栏更贴近屏幕底部。
   */
  .messages-bottom-nav,
  .contacts-bottom-nav,
  .discover-bottom-nav,
  .me-bottom-nav {
    padding-bottom: 8px;
  }

  /*
   * standalone 模式下，全屏二级页面（新建联系人、编辑身份、短信等）
   * 需要使用 fixed 定位覆盖整个视口，避免：
   * 1. 顶部导航与系统状态栏重合无法点击
   * 2. 底部因 phone-screen 未延伸到视口底部而出现灰色遮挡
   */
  .cc-screen,
  .ie-screen,
  .sms-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ---- 中等屏幕微调 ---- */
@media screen and (min-width: 431px) and (max-width: 768px) {
  body {
    padding: var(--spacing-lg) 0;
  }
}

/* ---- 大屏桌面居中 ---- */
@media screen and (min-width: 769px) {
  body {
    padding: var(--spacing-2xl) 0;
  }

  .phone-shell {
    box-shadow: var(--shadow-shell-desktop);
  }
}

/* ---- 超宽屏 ---- */
@media screen and (min-width: 1400px) {
  body {
    padding: var(--spacing-3xl) 0;
  }
}

/* ---- 暗色模式预留（后续扩展） ---- */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #1a1a1a;
    --color-shell-bg:      #222222;
    --color-card-bg:       #2a2a2a;
    --color-card-muted:    #333333;
    --color-text-primary:  #e8e8e8;
    --color-text-secondary:#999999;
    --color-text-hint:     #666666;
  }
}
*/