/* SecureChat 应用交互层：叠加在 design.css（UI 稿设计系统）之上 */

html, body { height: 100%; }
body.app-body {
  padding: 0; margin: 0; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
}
#phone-wrap { padding: 18px 0; }
#phone-wrap .dev { height: min(844px, 100dvh - 54px); width: 396px; }
/* 安全区变量：真机/App 内自动取系统值；桌面浏览器为 0，也便于注入数值做布局自测 */
.dev { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }

/* 真机 / App 内 WebView：去掉手机壳并做刘海与 Home 指示条安全区适配 */
@media (max-width: 560px) {
  html, body.app-body { height: 100%; overflow: hidden; }
  #phone-wrap { padding: 0; width: 100%; height: 100%; }
  #phone-wrap .bez { padding: 0; border-radius: 0; box-shadow: none; background: none; height: 100%; }
  #phone-wrap .bez::before, #phone-wrap .bez::after { display: none; }
  /* 高度用 100% 链式继承：dvh / -webkit-fill-available 在 WKWebView 里取值不一致会把输入栏挤出屏幕 */
  #phone-wrap .dev { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  #phone-wrap .dev::after { display: none; }
  .sb { display: none !important; }
  /* 安全区：在设备容器上统一留白，覆盖所有页面（含无导航栏的 Tab 页） */
  #phone-wrap .dev {
    padding-top: var(--sat); padding-bottom: var(--sab);
    box-sizing: border-box; background: var(--chrome);
  }
  .dev .cta { margin-left: 14px; margin-right: 14px; }
  .home { display: none; } /* 真机有系统 Home 条，不再画假的 */
}
/* 小屏（iPhone SE 等）密度微调 */
@media (max-width: 380px) {
  .r .n { font-size: 15px; }
  .r .s { font-size: 12px; }
  .bub { font-size: 15px; }
}

/* ---------- 屏幕栈 ---------- */
.dev { user-select: none; -webkit-user-select: none; }
/* iOS Safari：祖先 user-select:none 会阻断输入框聚焦打字，必须显式恢复 */
.dev input, .dev textarea, .dev select, .dev [contenteditable] {
  -webkit-user-select: text !important; user-select: text !important;
  touch-action: manipulation;
}
@media (pointer: coarse) { /* 移动端输入字号 ≥16px，避免 iOS 聚焦自动放大 */
  .dev input, .dev textarea { font-size: 16px !important; }
}
.field select.cc {
  border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink);
  width: 92px; flex: none; -webkit-appearance: none; appearance: none; padding: 0;
}
.dev .scr { overscroll-behavior: contain; }
.screen-anim { animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(26px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .screen-anim { animation: none; } }
.r, .tab, .nav .a, .cta, .menu .mi, .sw, .abtn, .fchip, .sendb, .pickc { cursor: pointer; }
.r:active { background: #EDEFF1; }
.tap { cursor: pointer; }

/* ---------- 真实输入控件 ---------- */
.tf input, .tf textarea {
  border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--ink);
  font-size: 15px; min-width: 0; resize: none; padding: 0;
}
.field input, .field textarea, .field select {
  border: 0; outline: 0; background: transparent; flex: 1; font: inherit; font-size: 15.5px; color: var(--ink); min-width: 0;
}
.field input::placeholder { color: var(--ink4); }
.sinput input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; font-size: 14.5px; color: var(--ink); }
textarea.plain {
  width: 100%; border: 0; outline: 0; background: #fff; font: inherit; font-size: 15.5px;
  line-height: 1.6; padding: 14px 16px; resize: none; color: var(--ink);
}

/* ---------- 通用浮层 ---------- */
.ovl { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end; }
.ovl .mask { position: absolute; inset: 0; background: rgba(16,21,26,.45); backdrop-filter: blur(2px); animation: fdin .15s; }
@keyframes fdin { from { opacity: 0; } }
.sheet {
  position: relative; z-index: 2; background: var(--chrome); border-radius: 16px 16px 0 0;
  padding-bottom: 14px; animation: sheetup .2s ease-out; max-height: 86%; overflow-y: auto;
}
@keyframes sheetup { from { transform: translateY(40%); } }
.sheet .sh-t { text-align: center; font-size: 13px; color: var(--ink3); padding: 13px 0 7px; }
.sheet .r { background: var(--surf); }
.center-modal { position: absolute; inset: 0; z-index: 32; display: flex; align-items: center; justify-content: center; padding: 0 26px; }
.center-modal .box { position: relative; z-index: 2; background: #fff; border-radius: 14px; width: 100%; padding: 20px 18px 14px; box-shadow: 0 22px 50px -18px rgba(10,15,20,.5); }
.center-modal .box h3 { font-size: 16.5px; text-align: center; margin-bottom: 8px; }
.center-modal .box p { font-size: 13.5px; color: var(--ink2); text-align: center; line-height: 1.6; }
.center-modal .btns { display: flex; gap: 10px; margin-top: 16px; }
.center-modal .btns .b { flex: 1; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.center-modal .btns .b.g { background: #EFF1F3; color: var(--ink2); }
.center-modal .btns .b.p { background: linear-gradient(180deg,#15BC8F,#0B8E6B); color: #fff; }
.center-modal .btns .b.r { background: #FFF0F0; color: var(--red); }
.center-modal .box input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; font: inherit; font-size: 14.5px; outline: none; margin-top: 10px; }
.center-modal .box input:focus { border-color: var(--brand); }

/* toast */
.toast {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); z-index: 60;
  background: rgba(16,21,26,.82); color: #fff; font-size: 13.5px; padding: 10px 18px; border-radius: 10px;
  max-width: 78%; text-align: center; line-height: 1.5; animation: fdin .18s; pointer-events: none;
}

/* ---------- 会话列表补充 ---------- */
.conn-banner { background: #F0F4F6; padding: 8px 14px; display: flex; align-items: center; gap: 9px; border-bottom: .5px solid var(--line); font-size: 12.5px; color: var(--ink2); }
.r .draft { color: var(--red); }
.r .secret-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--brand-d); font-size: 11px; background: var(--brand-l); border-radius: 4px; padding: 1px 5px; margin-right: 4px; vertical-align: 1px; }
.odot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 99px; background: #2ECC71; border: 2px solid #fff; }

/* ---------- 聊天页补充 ---------- */
.msgs-wrap { padding-bottom: 6px; }
.msg .mb { user-select: none; }
.msg .bub { user-select: text; }
.meta .tick { color: var(--brand-d); font-weight: 600; }
.msg.sending .meta::before { content: ""; width: 10px; height: 10px; border: 1.6px solid var(--ink4); border-top-color: transparent; border-radius: 99px; display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.imgb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voice.played { opacity: .75; }
.burn-chip { display: inline-flex; align-items: center; gap: 3px; background: rgba(250,81,81,.1); color: #D83A3A; font-size: 10px; padding: 1.5px 6px; border-radius: 99px; font-family: var(--mono); }
.inbar .tf { min-height: 36px; height: auto; padding: 7px 11px; }
.inbar .tf textarea { max-height: 88px; line-height: 1.4; }
.inbar .ib-ic { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; }

/* 语音模式：输入框整条换成「按住 说话」，和微信一样是个开关而不是长按小图标 */
.holdb { display: none; flex: 1 1 auto; min-width: 0; height: 36px; background: #fff; border-radius: 8px;
  align-items: center; justify-content: center; font-size: 15px; color: var(--ink);
  user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer; }
.inbar.voice .tf { display: none; }
.inbar.voice .holdb { display: flex; }
.holdb.on { background: #D6DADE; }

/* 面板高度贴近软键盘，避免面板一开聊天区跳一大截 */
.kbpanel { background: var(--chrome); border-top: .5px solid var(--line);
  height: 258px; padding-bottom: var(--sab, 0px); display: flex; flex-direction: column; }
.panel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 6px; padding: 22px 14px; align-content: start; }
.panel-grid .pi { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: var(--ink2); cursor: pointer; }
.panel-grid .pi i { width: 56px; height: 56px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; color: #6B7278; box-shadow: 0 1px 2px rgba(16,21,26,.05); }
.panel-grid .pi i .ic { width: 26px; height: 26px; stroke-width: 1.5; }
.panel-grid .pi:active i { background: #EDF0F2; }

/* 表情面板：上面是可滚的格子，下面固定一条分类栏 + 退格 + 发送 */
.emo-panel { padding-bottom: 0; }
.emo-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.emo-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 10px 8px 14px; }
.emo-grid .ec { font-size: 27px; line-height: 1; text-align: center; padding: 6px 0; cursor: pointer; border-radius: 8px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.emo-grid .ec:active { background: #DFE3E6; }
.emo-empty { text-align: center; color: var(--ink3); font-size: 12.5px; line-height: 1.9; padding: 54px 0; }
.emo-tabs { flex: none; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 8px;
  border-top: .5px solid var(--line); background: #EDEFF1; padding-bottom: var(--sab, 0px); box-sizing: content-box; }
.emo-tabs-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.emo-tabs-l::-webkit-scrollbar { display: none; }
.emo-tabs .et { flex: none; width: 34px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; border-radius: 6px; cursor: pointer; }
.emo-tabs .et.on { background: #DADEE1; }
.emo-tabs-r { flex: none; display: flex; align-items: center; gap: 8px; }
.emo-tabs .et-del { width: 34px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink2); border-radius: 6px; }
.emo-tabs .et-del:active { background: #DADEE1; }
.emo-tabs .sendb.off { background: #C3C8CC; box-shadow: none; pointer-events: none; }
/* 长按放大预览：手指盖住小格子时看不见自己点的是哪个 */
.emo-pv { position: fixed; transform: translate(-50%, -100%); z-index: 90; pointer-events: none;
  background: #fff; border-radius: 12px; padding: 8px 12px; font-size: 40px; line-height: 1;
  box-shadow: 0 6px 22px rgba(16,21,26,.22); animation: pop .12s ease-out; }
@keyframes pop { from { transform: translate(-50%,-100%) scale(.7); opacity: 0 } }
/* ---------- 发送前确认条 ---------- */
.sendsheet { background: var(--chrome); border-top: .5px solid var(--line); }
.ss-row { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
.ss-row::-webkit-scrollbar { display: none; }
.ss-thumb { position: relative; flex: none; width: 66px; height: 66px; border-radius: 6px; overflow: hidden; background: #fff; }
.ss-thumb img, .ss-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-thumb .ss-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ss-thumb .ss-file { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
.ss-thumb .ss-file b { font-size: 12px; color: var(--brand); font-family: var(--mono); }
.ss-thumb .ss-file span { font-size: 9px; color: var(--ink3); text-align: center; line-height: 1.2;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.ss-x { position: absolute; top: 0; right: 0; width: 20px; height: 20px; display: flex; align-items: center;
  justify-content: center; background: rgba(16,21,26,.55); border-bottom-left-radius: 6px; color: #fff; cursor: pointer; }
.ss-x .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.ss-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px 10px; border-top: .5px solid var(--line); }
.ss-orig { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.ss-orig input { position: absolute; opacity: 0; pointer-events: none; }
.ss-orig i { width: 16px; height: 16px; border-radius: 99px; border: 1.5px solid var(--ink3); flex: none; }
.ss-orig input:checked + i { background: var(--brand); border-color: var(--brand);
  box-shadow: inset 0 0 0 2.5px var(--chrome); }
.ss-orig span { color: var(--ink3); font-size: 11.5px; }
.ss-cnt { font-size: 12px; color: var(--ink3); }
.ss-bar .ss-cancel { margin-left: auto; font-size: 13.5px; color: var(--ink2); padding: 6px 10px; cursor: pointer; }
.ss-orig ~ .ss-cancel { margin-left: auto; }

/* 上传进度环：盖在图片/视频气泡上 */
.up-wrap { position: relative; display: inline-block; max-width: 100%; }
.up-ring { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16,21,26,.34); border-radius: inherit; pointer-events: none; }
.up-ring::before { content: ''; position: absolute; width: 44px; height: 44px; border-radius: 99px;
  background: conic-gradient(#fff calc(var(--p,0) * 1%), rgba(255,255,255,.28) 0); mask: radial-gradient(circle, transparent 16px, #000 17px); -webkit-mask: radial-gradient(circle, transparent 16px, #000 17px); }
.up-ring span { position: relative; font-size: 11px; color: #fff; font-family: var(--mono); font-weight: 600; }
.up-wrap .imgb, .up-wrap .bub { border-radius: 6px; }

.quote-bar { display: flex; align-items: center; gap: 8px; background: var(--chrome); border-top: .5px solid var(--line); padding: 7px 12px; font-size: 12.5px; color: var(--ink2); }
.quote-bar .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--brand); padding-left: 8px; }
.read-n { cursor: default; }
.notice-banner { background: #FFF6E2; padding: 9px 14px; display: flex; gap: 8px; align-items: flex-start; }
.notice-banner .txt { font-size: 12.5px; color: #8A6518; line-height: 1.55; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.secret-banner { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 8px 22px 12px; background: #FFF6E2; color: #9A7220; font-size: 11.5px; padding: 7px 11px; border-radius: 8px; line-height: 1.5; }
.recall-edit-link { color: var(--brand-d); margin-left: 6px; cursor: pointer; }

/* 长按菜单（4.2.6） */
.ctx-menu { position: absolute; z-index: 40; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(10,15,20,.42); overflow: hidden; width: 210px; }
.ctx-menu .mi { display: flex; align-items: center; gap: 11px; padding: 11px 14px; font-size: 14.5px; cursor: pointer; }
.ctx-menu .mi:active { background: #F2F4F6; }
.ctx-menu .mi + .mi { border-top: .5px solid var(--line2); }
.ctx-menu .mi.warn { color: var(--red); }
.ctx-menu .mi .sub { margin-left: auto; font-size: 11px; color: var(--ink3); }

/* ---------- 通讯录：字母索引条（加大热区，可拖动滑选） ---------- */
.idx-bar {
  position: absolute; right: 0; top: 96px; bottom: 32px; width: 30px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-size: 11px; color: var(--ink2); font-weight: 600; align-items: center; z-index: 4;
  touch-action: none; user-select: none;
}
.idx-bar span { width: 26px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 9px; }
.idx-bar span.hit { background: var(--brand); color: #fff; }
.idx-bar b { color: var(--brand); }
.idx-toast {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); z-index: 20;
  width: 74px; height: 74px; border-radius: 18px; background: rgba(16,21,26,.78); color: #fff;
  font-size: 34px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.badge-cell { margin-left: auto; }
.req-btns { display: flex; gap: 8px; }
.req-btns .b { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 7px; cursor: pointer; }
.req-btns .b.acc { background: linear-gradient(180deg,#15BC8F,#0B8E6B); color: #fff; }
.req-btns .b.dec { background: #EFF1F3; color: var(--ink2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px; background: var(--surf); }

/* ---------- 朋友圈 ---------- */
.pimgs .pp { cursor: pointer; }
.pimgs img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
.mom-input { display: flex; gap: 8px; padding: 9px 12px; background: #fff; border-top: .5px solid var(--line); }
.mom-input input { flex: 1; background: #F2F3F5; border: 0; outline: 0; border-radius: 8px; height: 34px; padding: 0 11px; font: inherit; font-size: 13.5px; }
.vis-opt { display: flex; align-items: center; gap: 10px; }
.media-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 16px 12px; }
.media-pick .mp { aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; box-shadow: inset 0 0 0 .5px rgba(16,21,26,.1); }
.media-pick .mp svg { width: 100%; height: 100%; display: block; }
.media-pick .mp.sel::after { content: "✓"; position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; background: var(--brand); color: #fff; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.media-pick .mp.add { display: flex; align-items: center; justify-content: center; background: #F2F3F5; color: var(--ink3); box-shadow: none; border: 1.2px dashed var(--ink4); }

/* WebView 容器（4.4.6） */
.wv-frame { flex: 1; border: 0; width: 100%; background: #fff; }

/* ---------- 设置矩阵 ---------- */
.seg { display: flex; background: #E9ECEF; border-radius: 8px; padding: 3px; font-size: 12.5px; }
.seg span { padding: 5px 12px; border-radius: 6px; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.seg .on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16,21,26,.12); }
/* 8 个色块在 360px 窄屏放不下，改为可横向滚动并允许收缩 */
.color-dots { display: flex; gap: 10px; padding: 6px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; }
.color-dots::-webkit-scrollbar { display: none; }
.color-dots i { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; cursor: pointer; position: relative; }
.color-dots i.sel::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.dev-row-risk { font-size: 10.5px; padding: 2px 7px; border-radius: 5px; background: #FFEBEB; color: #D83A3A; font-weight: 600; }

/* ---------- 深色模式（4.5.7 一期"可用"级）---------- */
.dev.darkmode { --bg:#11161B; --chrome:#171D23; --surf:#1C232A; --ink:#ECEFF2; --ink2:#9AA6B0; --ink3:#71808C; --ink4:#4A5560; --line:#262E36; --line2:#232B33; --chat:#10161C; background: #11161B; color: var(--ink); }
.dev.darkmode .nav, .dev.darkmode .tabs { background: #171D23; }
.dev.darkmode .grp { box-shadow: none; }
.dev.darkmode .bub { background: #222B33; color: #ECEFF2; }
.dev.darkmode .msg:not(.me) .mb>.bub::before { background: #222B33; }
.dev.darkmode .msg.me .bub { background: #0E5C46; color: #E8FFF6; }
.dev.darkmode .msg.me .mb>.bub::before { background: #0E5C46; }
.dev.darkmode .sinput, .dev.darkmode .fchip { background: #232B33; color: var(--ink2); }
.dev.darkmode .tf { background: #232B33; }
.dev.darkmode .tf input, .dev.darkmode .tf textarea { color: #ECEFF2; }
.dev.darkmode .sheet .r, .dev.darkmode .sheet { background: #1C232A; }
.dev.darkmode .card { background: #222B33; color: #ECEFF2; }
.dev.darkmode .home { background: #171D23 !important; }
.dev.darkmode .home::after { background: #fff; opacity: .5; }

/* ---------- 登录栈 ---------- */
.auth-hero { display: flex; flex-direction: column; align-items: center; padding: 64px 0 26px; }
.auth-title { font-size: 22px; font-weight: 680; margin-top: 18px; letter-spacing: .3px; }
.auth-sub { font-size: 12.5px; color: var(--ink3); margin-top: 7px; }
.demo-accounts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; padding: 14px 20px 0; }
.demo-accounts .da { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--ink2); cursor: pointer; }
.oauth-row { display: flex; gap: 14px; justify-content: center; padding: 18px 0 8px; }
.oauth-row .ob { width: 46px; height: 46px; border-radius: 99px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.otp-boxes { display: flex; gap: 9px; justify-content: center; padding: 22px 0 8px; }
.otp-boxes i { width: 42px; height: 50px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 650; font-style: normal; }
.otp-boxes i.cur { border-color: var(--brand); }

/* 空态 */
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 30px; color: var(--ink3); font-size: 13px; text-align: center; }
.empty svg { opacity: .4; }

/* ══════════════════════════════════════════════
   v1.3 移动端体感优化：触摸热区 / 边缘滑动返回 / 区号选择器
   ══════════════════════════════════════════════ */

/* —— 触摸热区：用伪元素向外扩展点击区，不改变视觉布局（Apple HIG 44×44）—— */
.nav .a > svg.ic, .nav .a > .tap, .nav [data-act="back"] { position: relative; }
.nav .a > svg.ic::after, .nav .a > .tap::after, .nav [data-act="back"]::after {
  content: ""; position: absolute; inset: -12px -9px; border-radius: 10px;
}
.tab { min-height: 46px; padding-top: 2px; }
/* 列表行最小高度：限定在真正的列表容器内，避免误伤 .nav/.sb 里同名的 .r（right 标记） */
.grp .r, .sheet .r, .cc-list .r { min-height: 48px; }
/* design.css 的 .r 兼作列表行(白底)与导航栏右侧标记，此处消除类名冲突导致的白块 */
.nav .a.r, .sb .r, .tgl-top .r { background: transparent; padding: 0; min-height: 0; box-shadow: none; }
.nav .a.r::before, .sb .r::before { display: none; }

/* —— 边缘滑动返回：跟手时禁用内部滚动与选中 —— */
#screen-root { position: relative; overflow: hidden; }
#screen-root > .screen { will-change: transform; background: var(--bg); }
#screen-root > .screen.swiping { overflow: hidden; }
#screen-root > .screen.swiping .scr { overflow: hidden !important; }

/* —— 区号按钮（登录/注册）—— */
.cc-btn {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 10px 7px 8px; margin-right: 4px; border-radius: 9px;
  background: #F1F3F5; min-height: 38px;
}
.cc-btn:active { background: #E6E9EC; }
.cc-btn .flag { font-size: 19px; line-height: 1; }
.cc-btn .code { font-size: 15.5px; font-weight: 600; letter-spacing: .2px; }
.cc-btn .cv { color: var(--ink4); }
.field:has(.cc-btn) { padding-left: 12px; }

/* —— 国家选择面板 —— */
.cc-sheet { height: 78%; display: flex; flex-direction: column; }
.cc-sheet .cc-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cc-row .flag { font-size: 24px; line-height: 1; flex: none; width: 30px; text-align: center; }
.cc-row.on { background: var(--brand-l); }
.cc-row.on .n { color: var(--brand-d); font-weight: 600; }
.cc-sheet .sinput { height: 38px; }

/* —— 列表与按钮的按压反馈更明确 —— */
.cta:active { transform: scale(.985); filter: brightness(.96); }
.sendb:active, .nav .btn:active { filter: brightness(.94); }
.req-btns .b:active { filter: brightness(.94); }

/* 键盘弹出时：隐藏底部 Tab 栏，把可视空间让给输入框（微信同款行为） */
body.kb-open .dev .tabs { display: none; }
body.kb-open #phone-wrap .dev { padding-bottom: 0; }

/* 输入框高度兜底：避免 JS 在元素入 DOM 前算出 0 导致点不到 */
.inbar .tf textarea, .inbar .tf input { min-height: 22px; }
.inbar .tf { cursor: text; }

/* 图形验证码 */
.cap-img { flex: none; width: 112px; height: 40px; border-radius: 8px; overflow: hidden; background: #F4F6F8; display: flex; align-items: center; justify-content: center; }
.cap-img svg { width: 100%; height: 100%; display: block; }
#l-cap { text-transform: uppercase; letter-spacing: 3px; font-weight: 600; }
#l-inv { text-transform: uppercase; letter-spacing: 2px; }
.seg span.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16,21,26,.12); }

/* 语音录制浮层：微信那个带尾巴的绿气泡 + 跟着说话声起伏的波形 */
.rec-ov { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; }
.rec-bub { position: relative; min-width: 138px; height: 78px; border-radius: 14px; background: #95EC69;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(16,21,26,.2);
  transition: background .16s; }
/* 尾巴：和消息气泡同一个语言，指向下面的输入栏 */
.rec-bub::after { content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -8px;
  border: 8px solid transparent; border-top-color: #95EC69; border-bottom: 0; transition: border-top-color .16s; }
.rec-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.rec-wave i { display: block; width: 3px; height: 4px; border-radius: 2px; background: #2B3A22; transition: height .06s linear; }
@keyframes recbar { 50% { height: 22px } }
.rec-cancel-ic { display: none; color: #fff; }
.rec-cancel-ic .ic { width: 34px; height: 34px; stroke-width: 2.4; }
.rec-count { position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  font-size: 22px; font-weight: 600; font-family: var(--mono); color: #FA5151; }
.rec-ov .rec-hint { font-size: 12.5px; color: #fff; background: rgba(16,21,26,.55);
  padding: 5px 12px; border-radius: 99px; }
/* 上滑取消：气泡变红、波形换成叉 —— 一眼看出松手是取消不是发送 */
.rec-ov.cancel .rec-bub { background: #E15241; }
.rec-ov.cancel .rec-bub::after { border-top-color: #E15241; }
.rec-ov.cancel .rec-wave { display: none; }
.rec-ov.cancel .rec-cancel-ic { display: block; }
.rec-ov.cancel .rec-hint { background: rgba(225,82,65,.92); }
.rec-ov .rec-acts { display: none; gap: 26px; }
.rec-ov.tapmode .rec-acts { display: flex; }
.rec-ov .rec-acts span { background: rgba(16,21,26,.6); color: #fff; font-size: 13px; padding: 8px 22px; border-radius: 99px; }

/* 旧的 .wave 条形波已经换成喇叭图标（见 design.css 的 .voice） */
/* 文本内链接 */
.bub .lnk { color: #2E7CD6; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; word-break: break-all; }
/* 应用内浏览器 */
.wv-full { justify-content: stretch; }
.wv-panel { position: relative; z-index: 2; background: #fff; height: 100%; display: flex; flex-direction: column; animation: sheetup .22s ease-out; }
.wv-panel .wv-frame { flex: 1; border: 0; width: 100%; background: #fff; }
.wv-panel .wv-bar i { transition: width .35s, opacity .3s; }

/* ══ v2.1 真机适配修复 ══════════════════════════ */

/* P0-1 iOS：锁死窗口滚动，防止键盘弹出时整页被顶到状态栏上方 */
html, body.app-body { overscroll-behavior: none; }
@media (max-width: 560px) {
  html, body.app-body { position: fixed; inset: 0; width: 100%; overflow: hidden; }
}

/* P0-2 安卓：输入栏在窄屏/ColorOS 上溢出导致右侧按钮被裁 */
.dev, #phone-wrap { max-width: 100vw; overflow-x: hidden; }
.inbar { min-width: 0; flex-wrap: nowrap; padding-left: 8px; padding-right: 8px; gap: 8px; }
.inbar > svg.ic, .inbar > span, .inbar > .sendb { flex: 0 0 auto; }
.inbar .tf { flex: 1 1 auto; min-width: 0; }
.inbar .sendb { padding: 7px 12px; white-space: nowrap; }
@media (max-width: 400px) {
  .inbar { gap: 6px; padding-left: 6px; padding-right: 6px; }
  .inbar > svg.ic { width: 21px; height: 21px; }
  .inbar .sendb { padding: 6px 10px; font-size: 13.5px; }
}

/* P0-3 应用内浏览器：顶部让开安全区（之前贴到灵动岛下） */
.wv-panel { padding-top: var(--sat); box-sizing: border-box; }
.wv-panel .wv-nav { padding-bottom: var(--sab); }

/* 相机扫码 */
.scan-full { justify-content: stretch; }
.scan-panel { position: relative; z-index: 2; background: #0B0F13; height: 100%; display: flex; flex-direction: column; padding-top: var(--sat); box-sizing: border-box; }
.scan-panel .nav { background: rgba(11,15,19,.9); border-bottom-color: rgba(255,255,255,.08); }
.scan-panel .nav .t, .scan-panel .nav .a { color: #fff; }
.scan-view { flex: 1; position: relative; overflow: hidden; background: #000; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: 62vw; max-width: 260px; aspect-ratio: 1; }
.scan-frame i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--brand); }
.scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.scan-line { position: absolute; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg,transparent,var(--brand),transparent); animation: scanmove 2.2s ease-in-out infinite; }
@keyframes scanmove { 0%,100% { top: 4%; } 50% { top: 94%; } }
.scan-tip { position: absolute; left: 0; right: 0; bottom: calc(16% + var(--sab)); text-align: center; color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.7; padding: 0 30px; }

/* 头像上传 */
.av-upload { position: relative; }
.av-upload::after { content: "更换"; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: rgba(0,0,0,.45); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }

/* 朋友圈配图网格：已选图缩略图 + 删除角标（sel 的 ✓ 角标让位给删除键） */
.media-pick .mp[style*="url("].sel::after { content: none; }
.media-pick .mp-del {
  position: absolute; right: 3px; top: 3px; width: 20px; height: 20px;
  background: rgba(16,21,26,.62); color: #fff; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-style: normal; line-height: 1;
}
.media-pick .mp.add[hidden] { display: none; }
/* 聊天背景预设色块选中态 */
.media-pick .mp.add.sel { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand-d); }

/* 协议 / 说明文档排版 */
.doc { padding: 6px 18px 40px; color: var(--ink); font-size: 14.5px; line-height: 1.85; }
.doc h1 { font-size: 20px; font-weight: 660; margin: 18px 0 10px; }
.doc h2 { font-size: 16.5px; font-weight: 640; margin: 24px 0 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 14.5px; font-weight: 640; margin: 16px 0 6px; color: var(--ink2); }
.doc p { margin: 8px 0; }
.doc ul, .doc ol { margin: 8px 0 8px 20px; }
.doc li { margin: 5px 0; }
.doc b { font-weight: 640; }
.doc a { color: var(--brand-d); word-break: break-all; }
.doc blockquote { margin: 10px 0; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; font-size: 13.5px; color: var(--ink2); }
.doc code { font-family: var(--mono); font-size: 12.5px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
/* 表格在窄屏内部横向滚动，页面本身不出现横向滚动条 */
.doc-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
.doc-tw table { border-collapse: collapse; width: 100%; min-width: 340px; font-size: 13px; }
.doc-tw th, .doc-tw td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
.doc-tw th { background: var(--bg); font-weight: 620; white-space: nowrap; }

/* 兜底操作按钮的样式并到上面 .rec-ov 那一段了（只在 tapmode 下出现） */
.rec-ov .rec-acts [data-rec="send"] { background: var(--brand); font-weight: 600; }

/* 群数据统计 */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 16px 2px; }
.sc-card { background: #fff; border-radius: 12px; padding: 14px 10px; text-align: center; box-shadow: 0 1px 2px rgba(16,21,26,.06); }
.sc-card .v { font-size: 22px; font-weight: 660; font-family: var(--mono); }
.sc-card .v small { font-size: 12px; color: var(--ink3); font-weight: 400; }
.sc-card .k { font-size: 11.5px; color: var(--ink3); margin-top: 4px; }
.hbars { display: flex; align-items: flex-end; gap: 2px; height: 92px; }
.hbars i { flex: 1; background: var(--brand); opacity: .34; border-radius: 2px 2px 0 0; min-height: 2px; }
.hbars i.peak { opacity: 1; }
.hbar-x { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink4); margin-top: 5px; font-family: var(--mono); }
.rank-no { width: 24px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--ink3); flex: none; }
.rank-no.hi { color: var(--brand-d); font-weight: 700; }
/* 机器人消息标记 */
.mb .bot-tag, .tgbub .bot-tag {
  display: inline-block; font-size: 9.5px; padding: 0 4px; border-radius: 3px;
  background: #5B6CF0; color: #fff; vertical-align: 2px; margin-left: 4px; font-weight: 600;
}

/* 斜杠命令提示（群内装了机器人时出现） */
.cmd-hint { background: #fff; border-top: 1px solid var(--line); max-height: 208px; overflow-y: auto; }
.cmd-hint .ch-row { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.cmd-hint .ch-row:last-child { border-bottom: 0; }
.cmd-hint b { font-family: var(--mono); font-size: 13.5px; color: var(--brand-d); flex: none; }
.cmd-hint span { flex: 1; font-size: 12.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-hint i { font-size: 10.5px; color: var(--ink4); font-style: normal; flex: none; }

/* design.css 里 .r 同时是「列表行」和「红色修饰类」：写成 class="pill r" 时会吃到列表行的
   padding/背景/最小高度，在 .grp 内被撑成一整块色块。这里把 pill 的盒模型显式还原。
   （同类坑此前已出现在导航栏 .nav .a.r 白块上） */
.pill.r, .grp .pill.r, .sheet .pill.r {
  display: inline-block; align-self: center; flex: 0 0 auto;
  padding: 2px 7px; min-height: 0; gap: 0;
  background: #FFEBEB; color: #D83A3A; border-radius: 5px; box-shadow: none;
}

/* 网络异常横幅：会话仍在，只是连不上服务器 */
.net-banner {
  position: absolute; left: 0; right: 0; top: var(--sat); z-index: 90;
  background: #D8A33A; color: #fff; font-size: 12.5px; text-align: center;
  padding: 7px 12px; display: flex; align-items: center; justify-content: center; gap: 12px;
  animation: nbin .2s;
}
.net-banner span { text-decoration: underline; }
@keyframes nbin { from { transform: translateY(-100%); } to { transform: none; } }

/* 地区选择器搜索框（复用区号面板的版式） */
.cc-sheet .cc-search { padding: 8px 16px 10px; }
.cc-sheet .cc-search input {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 14px;
  background: var(--bg); outline: none;
}
.cc-sheet .cc-search input:focus { border-color: var(--brand); background: #fff; }
.cc-list .r.on { background: var(--brand-l); }

/* 应用内消息横幅（前台收到其他会话的新消息时） */
.ia-toast {
  position: absolute; left: 10px; right: 10px; top: calc(var(--sat) + 8px); z-index: 95;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.97); border-radius: 14px; padding: 10px 13px;
  box-shadow: 0 8px 28px rgba(16,21,26,.2), 0 0 0 .5px rgba(16,21,26,.06);
  transform: translateY(-140%); transition: transform .24s cubic-bezier(.2,.9,.3,1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ia-toast.in { transform: none; }
.ia-toast .m { flex: 1; min-width: 0; }
.ia-toast .n { font-size: 14px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-toast .s { font-size: 12.5px; color: var(--ink2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.darkmode .ia-toast { background: rgba(38,44,52,.97); }
.darkmode .ia-toast .s { color: #A9B2BC; }

/* 视频消息缩略图：无封面时用 video 元素显示首帧 */
.imgb.vidb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #10151A; }
.imgb.vidb { background: #10151A; }


/* ---------- 媒体全屏查看（视频照微信那套：顶部信息 / 底部进度 + 倍速 / 五个操作） ---------- */
.mv { position: absolute; inset: 0; z-index: 50; background: #000; }
.mv-btn { color: #fff; font-size: 13px; padding: 8px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; }
.mv-video { display: flex; flex-direction: column; }
/* 全局是 border-box，height 把 padding 算进去了 ——
   刘海屏上 --sat 有 59px，52px 的高度减掉之后内容框成了负数，
   返回键和标题被挤进状态栏里，看起来就是「被遮住了」。改成 min-height 让它自己撑开。 */
.mv-top { flex: none; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: calc(var(--sat) + 8px) 14px 8px; color: #fff; }
.mv-top .mv-back { display: flex; align-items: center; gap: 2px; font-size: 15px; flex: none; }
.mv-top .mv-back svg { width: 22px; height: 22px; }
.mv-title { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.mv-title b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-title small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); font-family: var(--mono); }
.mv-mute { flex: none; }
.mv-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.mv-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.mv-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%; background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); }
.mv-big[hidden] { display: none; }
.mv-bottom { flex: none; padding: 0 16px calc(var(--sab) + 10px); color: #fff; }
.mv-bar { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 6px 0 2px; }
.mv-time { font-family: var(--mono); color: rgba(255,255,255,.85); }
.mv-rate { color: rgba(255,255,255,.85); padding: 4px 8px; }
.mv-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; display: block; }
.mv-seek::-webkit-slider-runnable-track { height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.3); }
.mv-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; margin-top: -4.5px; }
.mv-acts { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 2px; }
.mv-acts > span { position: relative; color: #fff; display: flex; align-items: center; justify-content: center; }
.mv-acts svg { width: 25px; height: 25px; }
.mv-acts i { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-45%);
  font-size: 8.5px; font-style: normal; text-align: center; font-family: var(--mono); }
#mv-b10 svg { transform: scaleX(-1); }
.mv-play svg { width: 30px; height: 30px; }
.mv-pause { display: flex; gap: 4px; }
.mv-pause i { position: static; transform: none; width: 4px; height: 22px; background: #fff; border-radius: 1.5px; }