/* ============================================================
 * 思径 · 电脑端演示外壳（iPhone 模拟器）—— 只在电脑浏览器生效
 * ============================================================
 * 三层分工（2026-10-15 用户要求核查后的最终分类）：
 *   app.css         = 两端共用基线（原始字号）
 *   app-mobile.css  = 手机端字号放大层（只在宽 <500px 生效）
 *   simulator.css   = 本文件，电脑壳外观 + 壳内压缩（只在宽 ≥500px 生效）
 * 手机加载本文件但不产生任何效果；手机再改字号只动 app-mobile.css，电脑端不受影响
 * 改电脑壳外观（机身/灵动岛/Home 横条/状态栏/组件压缩比例）→ 只动本文件
 * 视觉基准：原型图（iPhone 15 390×844，深蓝画布，Navy #1A4A8A）
 */
@media (min-width: 500px) {
  /* ===== 电脑端：按原型图还原的 iPhone 展示（给老师演示用） ===== */
  html { background: radial-gradient(1200px 700px at 20% -10%, #1a3a68 0%, #0b1524 48%); } /* 原型图同款深蓝画布 */
  body { display: grid; place-items: center; min-height: 100vh; }
  .app {
    /* 按窗口高度等比缩小，保证整台"手机"一眼看全；390×844 = 原型图 iPhone 15 基准 */
    width: min(390px, calc((100vh - 56px) * 0.4621), 92vw);
    aspect-ratio: 390 / 844;
    height: auto;
    overflow: hidden;
    --safe-t: 62px; /* 桌面模拟真机灵动岛安全区 */
    --safe-b: 12px; /* 桌面只给 Home 横条留位置（无手指操作区，不照搬真机 34px，省出内容空间） */
    border-radius: 54px;
    /* 用户拍板：细机身——6px 黑色机身 + 白色微光描边 + 大投影 */
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.06), 0 0 0 6px #0b0d0c, 0 40px 80px rgba(8, 24, 48, 0.45);
  }
  .app::before { /* 灵动岛（用户拍板：缩小版，无摄像头点） */
    content: ''; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
    width: 108px; height: 30px; border-radius: 16px; z-index: 60;
    background: #0b0d0c;
  }
  .app::after { /* Home 横条（原型图尺寸） */
    content: ''; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    width: 134px; height: 5px; border-radius: 99px; z-index: 60;
    background: #1a1a1a; opacity: 0.85;
  }
  /* 屏幕内状态栏（原型图同款：时间 + 信号/Wi-Fi/电量；元素写在 index.html，手机上隐藏） */
  .status-bar {
    display: flex; position: absolute; top: 0; left: 0; right: 0; height: 62px;
    align-items: flex-end; justify-content: space-between; padding: 0 28px 9px;
    font-size: 14px; font-weight: 600; color: var(--ink); z-index: 55; pointer-events: none;
  }
  .status-icons { display: flex; gap: 6px; align-items: center; }
  .status-icons svg { width: 17px; height: 12px; }
  /* 汉堡菜单在电脑壳里同步压缩（2026-10-15：底部 tab 栏已移除） */
  .menu { right: 20px; min-width: 132px; }
  .menu .tab { font-size: 14px; padding: 9px 10px; }

  /* 用户拍板：输入框字体/高度压小；底部预留 Home 横条位置（tab 栏移除后输入框是最后一行） */
  .composer { padding: 6px 16px calc(8px + var(--safe-b, 0px)); }
  .composer input { height: 36px; font-size: 14px; border-radius: 12px; }
  .send { width: 36px; height: 36px; border-radius: 12px; }
  /* 追问框输入字号与主对话框一致（电脑端 14px；手机上两处都保持 16px 防 iOS 聚焦缩放） */
  .kp-chat-form input { font-size: 14px; }
  /* 用户拍板：顶部品牌栏压缩（思径 + 拍照按钮都变小） */
  .nav-title { padding: calc(10px + var(--safe-t, 0px)) 16px 6px; }
  /* 裁剪页顶部栏：给假状态栏（62px 灵动岛）让位，与 .nav-title 同理（2026-10-17 框题功能） */
  .crop-topbar { padding-top: calc(10px + var(--safe-t, 0px)); }
  /* 裁剪页底部操作区：给 Home 横条让位，与 .composer 同理（2026-10-17 按原型图重做） */
  .crop-actions { padding-bottom: calc(20px + var(--safe-b, 0px)); }
  /* 相机页：顶部给假灵动岛让位、底部给 Home 横条让位（2026-10-19 仿原生相机） */
  .cam-topbar { padding-top: calc(10px + var(--safe-t, 0px)); }
  .cam-bottombar { padding-bottom: calc(26px + var(--safe-b, 0px)); }
  /* 意见反馈弹层：顶部给假灵动岛让位、底部给 Home 横条让位（2026-10-19 部署上线配套） */
  .fb-topbar { padding-top: calc(10px + var(--safe-t, 0px)); }
  .fb-body { padding-bottom: calc(20px + var(--safe-b, 0px)); }
  .brand { gap: 8px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 10px; }
  .brand-mark svg { width: 16px; height: 16px; }
  .brand h3 { font-size: 16px; }
  .brand p { font-size: 9px; }
  .icon-btn { width: 30px; height: 30px; border-radius: 10px; }
  .icon-btn svg { width: 15px; height: 15px; }
}