/* 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 :is(input[type="text"],textarea) { 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: calc(var(--vvh, 100%) - var(--kb-acc, 0px)); }

/* ===== v2.9.2：查手机翻译（页面标题右侧的小「译」，译文以淡色小字跟在原文下面） ===== */
.sw-trb{margin-left:auto;border:1px solid var(--border-color,rgba(128,128,128,.3));background:transparent;color:var(--text-sub,#999);font-size:11px;line-height:1;padding:4px 8px;border-radius:999px;cursor:pointer;opacity:.8}
.sw-trb.on{background:var(--accent-soft,rgba(255,150,180,.2));color:var(--accent-text,#d6567a);border-color:transparent;opacity:1}
.sw-trb.busy{opacity:.55;animation:swTrPulse 1s ease-in-out infinite}
@keyframes swTrPulse{50%{opacity:.25}}
.sw-tr{display:block;margin-top:4px;padding-top:4px;border-top:1px dashed rgba(128,128,128,.28);font-size:11.5px;font-weight:400;font-style:normal;line-height:1.45;opacity:.72;word-break:break-word;white-space:normal}

/* ===== v2.9.2：顶栏标题真正居中 =====
   原因：顶栏里「左按钮 / 标题 / 右侧」宽度不一样，右侧还常常是一个同样 flex:1 的 span，标题只是在自己那一份里居中，看起来偏左。
   做法：只对「正好三段」的顶栏，让左右两段等宽、标题放中间；聊天室顶栏（有头像、状态）保持原样；不改任何按钮和点击行为。 */
.app-header > :first-child:nth-last-child(3):not(#chatRoomApp *) { flex: 1 1 0; text-align: left; }
.app-header > :first-child:nth-last-child(3):not(#chatRoomApp *) + * { flex: 0 1 auto; max-width: 62%; }
.app-header > :first-child:nth-last-child(3):not(#chatRoomApp *) ~ :last-child { flex: 1 1 0; text-align: right; padding-left: 4px; padding-right: 4px; }   /* 和左边按钮的左右内边距一致，两边才真正等宽 */
/* ---------- v3.0：朋友圈清理 / 接口预设 / 卡片美化 / TA 买东西弹窗 ---------- */
.moment-orphan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin: 0 0 10px; border-radius: 12px; font-size: 12px; background: color-mix(in srgb, var(--theme-color) 12%, var(--card-bg)); color: var(--text-sub); }
.pr-sub { display: block; font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.pr-ops { display: flex; gap: 6px; flex: none; }
.cs-preview { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 8px; background: var(--chat-bg, var(--bg-color)); }
.cs-preview .msg-card { max-width: 260px; }
.cs-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
.cs-sw { border: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.cs-color { width: 44px; height: 30px; padding: 0; border: none; background: none; flex: none; }
.ta-card-mask { position: absolute; inset: 0; z-index: 99984; background: rgba(0,0,0,.38); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; animation: taIn .22s ease-out; }
@keyframes taIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes taPop { from { transform: translateY(14px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.ta-card { width: 100%; max-width: 320px; background: var(--card-bg, #fff); color: var(--text-main, #333); border-radius: 22px; padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0,0,0,.28); animation: taPop .26s cubic-bezier(.2,.9,.3,1.2); }
.ta-card .tc-head { display: flex; align-items: center; gap: 10px; }
.ta-card .tc-head b { display: block; font-size: 15px; }
.ta-card .tc-head small { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
.ta-card .tc-item { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--theme-color) 12%, var(--card-bg, #fff)); }
.ta-card .tc-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--theme-color) 25%, var(--card-bg, #fff)); }
.ta-card .tc-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--theme-dark, #5b3a4a); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ta-card .tc-it { min-width: 0; }
.ta-card .tc-it b { display: block; font-size: 14px; word-break: break-all; }
.ta-card .tc-it small { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
.ta-card .tc-say { font-size: 14px; line-height: 1.7; margin: 6px 2px 12px; white-space: pre-wrap; }
.ta-card .tc-btns { display: flex; gap: 10px; }
.ta-card .tc-btns button { flex: 1; padding: 11px; border-radius: 14px; border: none; font-size: 14px; cursor: pointer; background: color-mix(in srgb, var(--theme-color) 14%, var(--card-bg, #fff)); color: var(--theme-dark, #5b3a4a); }
.ta-card .tc-btns button.ok { background: var(--theme-color, #e8a0b8); color: #fff; font-weight: 600; }

/* v3.3：「正在输入…」占位气泡不显示时间和已读状态 */
.message.typing-ph .bubble-time{display:none!important}
.xf-busy .xf-chip{opacity:.6}

/* v3.3：深色模式下「查手机」等页面里浅色底的气泡 / 小块看不清字 —— 底色混进卡片色，字用主文字色，亮暗两种主题都清楚 */
.sw-b:not(.self){background:color-mix(in srgb,var(--accent-soft) 38%,var(--card-bg));color:var(--theme-dark)}
.sw-kv div,.wx-tags span{background:color-mix(in srgb,var(--accent-soft) 38%,var(--card-bg));color:var(--theme-dark)}
.sw-b:not(.self) .sw-tr,.sw-kv div .sw-tr{opacity:.8}