/* v2.9：全屏自适应 / 薄状态栏 / 设置页错位修复 / 添加到桌面 */

/* ---------- 尺寸变量 ---------- */
:root { --sat: env(safe-area-inset-top, 0px); --sb-h: 34px; --top-h: calc(var(--sat) + var(--sb-h)); }
html.xfull { --sb-h: 24px; }
html.xfull.sb-off { --sb-h: 0px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }

/* ---------- 手机外框模式（电脑 / 平板）：随屏幕高度在 375~430 宽之间自适应 ---------- */
.phone { width: clamp(375px, calc(96dvh * .46), 430px); height: min(900px, 96dvh); }
.phone::before { top: 6px; height: 24px; width: 96px; margin-left: -48px; }

/* ---------- 全屏模式（手机 / 已添加到桌面）：撑满整个屏幕，不留黑边 ---------- */
html.xfull body { background: var(--bg-color); }
html.xfull .phone {
    position: fixed; inset: 0; width: auto; height: auto; max-height: none;
    border: none; border-radius: 0; box-shadow: none;
}
html.xfull .phone::before, html.xfull .phone::after { display: none; }

/* ---------- 状态栏：变薄，可隐藏 ---------- */
.status-bar {
    height: var(--top-h); padding: var(--sat) 26px 0 30px; align-items: center;
    font-size: 13px; line-height: 1;
}
html.sb-off .status-bar { visibility: hidden; }

/* 所有原来写死 48px 的顶部留白，统一跟着状态栏高度走 */
.app-screen, .fx-dm, .hl-char { padding-top: var(--top-h); }
.mt-chat { padding-top: calc(var(--top-h) - 4px); }
.ic-add .hd { padding-top: var(--top-h); }
.stg-bar { padding-top: calc(var(--top-h) - 4px); }
.al-vt { padding-top: calc(var(--top-h) - 2px) !important; }
.phone-banner { top: calc(var(--top-h) - 4px); }
.peek-banner.show { top: calc(var(--top-h) - 2px); }
.hm-bar { top: calc(var(--top-h) - 10px); }
.desktop { padding-top: calc(var(--top-h) + 20px); }
.lock-screen { padding-top: calc(var(--top-h) + 32px); }
.app-header { min-height: 40px; }

/* ---------- 设置页长度错位：标签被下拉框挤成竖排 ---------- */
.cell-item > span:first-child { min-width: 0; }
.cell-item:has(> select) > span:first-child,
.cell-item:has(> input.input-text) > span:first-child { flex: 0 0 auto; max-width: 58%; margin-right: 10px; }
.cell-item > select, .cell-item > input.input-text { min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; }
.cell-item > select { max-width: 100%; }
.ios-switch { flex: none; }

/* ---------- 流畅度 ---------- */
.scroll-area, .chat-box, .stg-body, .desktop-grid { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.app-header { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* 顶栏本来就不盖在内容上，模糊白白耗性能 */

/* ---------- 添加到桌面提示 ---------- */
.pwa-mask { position: absolute; inset: 0; z-index: 99985; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; justify-content: center; }
.pwa-sheet { width: 100%; max-height: 86%; overflow-y: auto; background: var(--card-bg, #fff); color: var(--text-main, #333); border-radius: 20px 20px 0 0; padding: 18px 18px 24px; box-sizing: border-box; }
.pwa-sheet h3 { margin: 0 0 10px; font-size: 16px; text-align: center; }
.pwa-sheet p { font-size: 14px; line-height: 1.75; margin: 6px 2px; }
.pwa-sheet .pwa-ic { display: block; width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.pwa-sheet button { display: block; width: 100%; margin-top: 16px; padding: 12px; border: none; border-radius: 14px; background: var(--theme-color, #e8a0b8); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }

/* ---------- 聊天输入栏：发送键被挤出屏幕 / 挤成竖排（输入框有最小宽度，把按钮顶出去了） ---------- */
.input-area > * { min-width: 0; }
.input-area input[type="text"] { min-width: 0; flex: 1 1 0; width: 0; }
.input-area .attach-btn { flex: none; min-width: 34px; }
.input-area #sendBtn { flex: none; white-space: nowrap; min-width: 56px; }

/* ---------- 页面整体：不允许文档自己再滚动（否则底部输入栏会被浏览器工具栏盖住，聊天"滑不到底"） ---------- */
html.xfull, html.xfull body { height: 100%; min-height: 0; overflow: hidden; }

/* ---------- 键盘弹出：整个手机跟着"可视区域"走，输入框始终在键盘上方 ---------- */
html.xfull.kb .phone { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); }