/* KK IM 移动端样式 —— 对齐参考图: 白色顶栏 + 亮蓝 Navbar + 卡片列表 + 线性 Tab */
:root{
  --pri:#12b7f5;--pri-d:#0b8fd8;--bg:#f2f4f7;--card:#fff;
  --tx:#1a1a1a;--tx2:#8a94a6;--tx3:#b4bccb;--line:#eef0f4;
  --nav:#12b7f5;--nav-h:48px;
  --vip:#f5455c;--svip:#e6a23c;--lucky:#e93b3b;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--tx);font-size:15px;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
#app{position:fixed;top:0;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
img{display:block}
input,textarea,button,select{font-family:inherit;font-size:15px;outline:none;border:0}
::-webkit-scrollbar{width:0;height:0}

/* ---------- 顶部导航(参考图: 纯亮蓝 + 居中标题 + 右侧搜索/加号) ---------- */
.navbar{height:var(--nav-h);background:var(--nav);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex:0 0 auto;font-size:17px;position:relative}
/* 标题绝对居中, 不受左右两侧宽度影响 */
.navbar .nav-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:500;font-size:17px;letter-spacing:.5px;white-space:nowrap;max-width:56%;text-align:center;pointer-events:none}
/**
 * 标题文字 + 可选行内标签(如官方群的「官方」红标)。
 *
 * 坑: 标题整块用 translate(-50%) 绝对居中, 若把标签直接塞进标题里,
 * 居中的就是「群名 + 标签」这个整体, 群名本身被标签挤得偏左,
 * 看起来就是"官方跟名不居中"(截图现象)。
 * 解法: .nt-txt 只包住群名并负责省略号, 标签绝对定位挂在它右侧、
 * 不参与居中计算 —— 群名保持视觉居中, 标签紧贴其右。
 */
.navbar .nav-title .nt-txt{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.navbar .nav-title .nt-wrap{position:relative;display:inline-block;max-width:100%}
.navbar .nav-title .nav-tag{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:5px}
.navbar .nav-side{min-width:44px;display:flex;align-items:center;gap:16px;font-size:15px;position:relative;z-index:1}
.navbar .nav-side.right{margin-left:auto;justify-content:flex-end}
.navbar .nav-side .ni{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.navbar .nav-side .ni svg{width:22px;height:22px;display:block}
.navbar .nav-side .ni.big svg{width:25px;height:25px}
.navbar.dark{background:#fff;color:var(--tx);border-bottom:1px solid var(--line)}
.navbar.dark .nav-side .ni svg{stroke:var(--tx)}
.page{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg)}
.page.no-scroll{overflow:hidden}

/* ---------- 底部 Tab(参考图: 白底 + 灰/蓝线性图标 + 标签) ---------- */
.tabbar{height:calc(56px + var(--safe-b));padding-bottom:var(--safe-b);background:#fff;border-top:1px solid #e8ebef;display:flex;flex:0 0 auto}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8a94a6;font-size:11px;gap:3px;position:relative}
.tabbar .tab .ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.tabbar .tab .ico svg{width:23px;height:23px;display:block}
.tabbar .tab.on{color:var(--pri)}
.badge-dot{position:absolute;top:3px;left:56%;min-width:17px;height:17px;line-height:17px;background:#fa5151;color:#fff;border-radius:9px;font-size:11px;padding:0 4px;text-align:center}

/* ---------- 列表(参考图: 白底大方形图标 + 主文案 + 右侧 › ) ---------- */
.list{background:#fff}
.cell{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);gap:11px;position:relative;background:#fff}
.cell:active{background:#f7f9fb}
.cell .ava{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#e8eef5}
.cell .ava.round{border-radius:50%}
.cell .mid{flex:1;min-width:0}
.cell .mid .t1{font-size:16px;display:flex;align-items:center;gap:5px}
.cell .mid .t2{font-size:13px;color:var(--tx2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell .side{font-size:12px;color:var(--tx3);text-align:right;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.cell .side .unread{display:inline-block;min-width:18px;height:18px;line-height:18px;background:#fa5151;color:#fff;border-radius:9px;font-size:11px;padding:0 5px;text-align:center}
.cell .side .unread.gray{background:#c8cdd6}
.grp-title{padding:5px 14px;font-size:13px;color:var(--tx2);background:var(--bg)}
.sec{margin-top:9px;background:#fff}
.sec:first-child{margin-top:0}
.mt9{margin-top:9px}

/* 彩色方形图标(参考图通讯录/发现入口) */
.sq-ico{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;font-size:21px}
.sq-ico svg{width:23px;height:23px;stroke:#fff;fill:none}
.sq-ico.orange{background:linear-gradient(135deg,#ffb25e,#ff8f1f)}
.sq-ico.green{background:linear-gradient(135deg,#5ad07a,#22b94f)}
.sq-ico.gray{background:linear-gradient(135deg,#cdd3dc,#b3bbc7)}
.sq-ico.blue{background:linear-gradient(135deg,#4fc3f7,#12b7f5)}
.sq-ico.purple{background:linear-gradient(135deg,#a98cf8,#7a5cf0)}
/**
 * teal —— 交易中心的图标底色。
 *
 * 上一轮给「发现」页加交易中心入口时用了 class="sq-ico teal", 但这个配色
 * **从来没在这个文件里定义过**。.sq-ico 的基础样式是 `color:#fff` +
 * `svg{stroke:#fff}`, 配上没有背景 => 白色图标画在白色卡片上, 整个入口看起来
 * 「没有图标」(用户反馈截图里那一行就是空的)。
 * 这里补上定义。以后再加图标色, 记得同时在 .sq-ico 系列里登记。
 */
.sq-ico.teal{background:linear-gradient(135deg,#4fd1c5,#0fb5a6)}
.sq-ico.rainbow{background:conic-gradient(from 210deg,#ff8a3d,#ffd93d,#6ddb5c,#4bc0ff,#a06cff,#ff5fa2,#ff8a3d)}
.sq-ico.speaker{background:#fff;color:#5a6472}
.sq-ico.speaker svg{stroke:#5a6472}
.sq-ico.du{background:#fff}
.sq-ico.du svg{width:26px;height:26px}

/* 列表右箭头 */
.arw{width:9px;height:9px;border-right:1.6px solid #c4cad4;border-top:1.6px solid #c4cad4;transform:rotate(45deg);flex:0 0 auto;margin-left:2px}

/* ---------- 标识 ---------- */
/**
 * 身份徽标(靓号 / 会员 / 客服 / 官方)。
 * 间距说明: 原来是 padding 0 4px + 相邻 margin-left 4px, 多个徽标并排时
 * 视觉上过散、显得和昵称脱节, 这里收窄到 3px; 同时新增 .tags 容器统一控制间距,
 * 让「靓号 会员 客服」这一组整体紧凑地贴在昵称右侧。
 */
.tag{display:inline-block;padding:0 3px;border-radius:3px;font-size:10px;line-height:15px;color:#fff;vertical-align:middle;font-weight:400}
/* 相邻徽标之间留出间距(会员/靓号/客服紧挨着会糊成一团) */
.tag+.tag{margin-left:3px}
/* 统一徽标容器: 用 gap 控制间距, 避免各处 inline 元素之间出现叠加 margin */
.tags{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-left:3px}
.tags>.tag{margin-left:0}
.tag.vip{background:var(--vip)}.tag.svip{background:var(--svip)}.tag.lucky{background:var(--lucky)}.tag.svc{background:#3bbf6b}
.tag.official{background:#3a5bd9}
.nickname.vip{color:var(--vip)}.nickname.svip{color:#c88a16;font-weight:600}
.lv-icon{font-size:11px;margin-left:2px}

/* ---------- 聊天 ---------- */
.chat-wrap{flex:1;display:flex;flex-direction:column;background:#f2f4f7;overflow:hidden}
.msg-list{flex:1;overflow-y:auto;padding:12px 12px 4px;-webkit-overflow-scrolling:touch}
.msg{display:flex;margin-bottom:14px;align-items:flex-start;gap:8px}
.msg.me{flex-direction:row-reverse}
.msg .msg-ava{width:38px;height:38px;border-radius:6px;object-fit:cover;background:#e8eef5;flex:0 0 auto}
/* 气泡外层: 让 flex 子项可撑开并约束最大宽度, 修复文字两字就换行 */
.msg>div{max-width:72%;min-width:0;display:flex;flex-direction:column}
.msg.me>div{align-items:flex-end}
.msg .bubble{max-width:100%;width:fit-content;background:#fff;border-radius:8px;padding:9px 12px;position:relative;font-size:15px;line-height:1.45;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.msg.me .bubble{background:#95ec69}
.msg .bubble::before{content:'';position:absolute;top:12px;border:6px solid transparent}
.msg:not(.me) .bubble::before{left:-11px;border-right-color:#fff}
.msg.me .bubble::before{right:-11px;border-left-color:#95ec69}
/* 自带背景的气泡(红包/文件): 去掉外层底色与内边距, 避免露出一圈绿边 */
.msg .bubble.bare{background:transparent!important;padding:0;box-shadow:none}
.msg .bubble.bare::before{display:none}
/* 裸气泡里的媒体元素自成一体, 靠自身圆角/阴影即可 */
.msg .bubble.bare .msg-img,
.msg .bubble.bare video{display:block;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.msg.sys{justify-content:center}
.msg.sys .sys-txt{background:rgba(0,0,0,.06);color:#6b7684;font-size:12px;padding:3px 10px;border-radius:4px;text-align:center;max-width:80%}
.msg-img{max-width:150px;border-radius:6px;cursor:pointer}
.msg-voice{display:flex;align-items:center;gap:6px;min-width:70px}
.msg-voice .wave{font-size:13px}
.msg-file{display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:10px}
.msg .sender{font-size:11px;color:var(--tx2);margin-bottom:3px}
.msg-time{text-align:center;font-size:12px;color:var(--tx3);margin:8px 0}

/* 站点公告横幅 */
.notice-bar{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#fff8e6;border-bottom:1px solid #ffe9b8;font-size:13px;color:#8a6d1f;overflow:hidden}
.notice-bar:active{background:#fff3d6}
.notice-bar .nb-ico{flex:0 0 auto;font-size:14px}
.notice-bar .nb-txt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;position:relative}
.notice-bar .nb-txt span{display:inline-block;padding-left:100%;animation:nbScroll 14s linear infinite}
@keyframes nbScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* 输入区 */
.input-bar{background:#f7f8fa;border-top:1px solid var(--line);padding:6px 8px;flex:0 0 auto}
.input-row{display:flex;align-items:center;gap:6px}
.input-row .ic-btn{width:32px;height:36px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:6px}
.input-row .ic-btn:active{background:rgba(0,0,0,.05)}
.input-row .ic-btn svg{width:24px;height:24px;display:block}
.input-row textarea{flex:1;background:#fff;border-radius:6px;padding:8px 10px;max-height:90px;min-height:36px;resize:none;font-size:15px;line-height:20px;border:1px solid #e6e9ee}
.input-row .send-btn{background:var(--pri);color:#fff;border-radius:6px;padding:0 14px;height:36px;line-height:36px;font-size:14px;flex:0 0 auto}
.tools{display:flex;padding:6px 0 2px}
.tools .tool{flex:1;text-align:center;font-size:22px;color:#6b7684;padding:4px 0}
.tools .tool .ti{display:flex;align-items:center;justify-content:center;height:26px}
.tools .tool .ti svg{width:24px;height:24px}
.tools .tool:active{opacity:.6}
.emoji-box{height:200px;overflow-y:auto;background:#f7f8fa;display:none;padding:8px}
.emoji-box.show{display:block}
.emoji-box .row{display:flex;flex-wrap:wrap;gap:2px}
.emoji-box span{width:12.5%;text-align:center;font-size:24px;padding:4px 0}
.press-cover{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-direction:column;gap:10px}

/* ---------- 按钮/表单 ---------- */
.btn{display:block;width:100%;height:44px;line-height:44px;text-align:center;background:var(--pri);color:#fff;border-radius:8px;font-size:16px}
.btn:active{opacity:.85}
.btn.gray{background:#d5d9e0;color:#fff}
.btn.out{background:#fff;color:var(--pri);border:1px solid var(--pri)}
.btn.mini{display:inline-block;width:auto;height:26px;line-height:26px;padding:0 12px;font-size:12px;border-radius:13px}
.btn-row{display:flex;gap:10px;padding:0 14px}
.form-item{display:flex;align-items:center;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line);gap:10px}
.form-item .lb{width:78px;color:var(--tx2);font-size:14px;flex:0 0 auto}
.form-item input,.form-item textarea,.form-item select{flex:1;font-size:15px;background:transparent}
.form-item .arw{color:var(--tx3)}

/* ---------- 卡片/弹层 ---------- */
.popup-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:flex-end;justify-content:center}
.popup{background:#fff;width:100%;max-width:640px;border-radius:14px 14px 0 0;padding:16px;animation:up .22s ease;max-height:80vh;overflow:auto}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.popup.center{align-self:center;border-radius:12px;width:80%;max-width:320px;margin:auto}
.popup h3{margin:0 0 12px;font-size:16px;text-align:center}

/* ---------- 图片查看器(点消息里的照片放大的那个) ----------
 * 用户反馈「发出去的照片点进去看太歪了往左侧, 而且四周白边严重」。
 * 原因: 之前图片预览是复用普通弹窗(KC.popup 的 .popup.center)——
 *   1) .popup.center 有 width:80% / max-width:320px, 图片被压进这个窄盒子里,
 *      而弹窗自身在 flex 里 align-self:center, 视觉上图片整体偏左;
 *   2) .popup 有 16px padding + 白底, 图片四周就围了一圈白色边框,
 *      一张普通竖图看起来像被贴在一张白纸中间。
 * 正确做法是按查看器的通用形态做: 全屏黑底、图片居中、等比缩放,
 * 不裁剪不拉伸, 点击任意处或按 ESC 关闭。
 */
.img-viewer{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.img-viewer img{max-width:96vw;max-height:92vh;width:auto;height:auto;
  object-fit:contain;border-radius:0;box-shadow:none;display:block;margin:auto}
.img-viewer .iv-close{position:absolute;top:14px;right:16px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.img-viewer .iv-close:active{background:rgba(255,255,255,.3)}
.img-viewer .iv-load{position:absolute;color:rgba(255,255,255,.8);font-size:13px}
.toast{position:fixed;top:32%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.8);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;z-index:999;max-width:80%;text-align:center}
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.4);z-index:500;color:#6b7684}

/* ---------- 我的 / 资料卡 ---------- */
.profile-head{background:linear-gradient(160deg,#4fc9f7,#12b7f5);color:#fff;padding:16px 14px 22px;display:flex;gap:12px;align-items:center}
.profile-head .big-ava{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.7);object-fit:cover;background:#fff}
.profile-head .info{flex:1;min-width:0}
.profile-head .nm{font-size:19px;font-weight:600;display:flex;align-items:center;gap:5px}
.profile-head .no{font-size:13px;opacity:.9;margin-top:3px}
.exp-wrap{margin-top:6px}
.exp-bar{height:5px;background:rgba(255,255,255,.35);border-radius:3px;overflow:hidden}
.exp-bar i{display:block;height:100%;background:#ffd34e;border-radius:3px;transition:width .4s}
.exp-txt{font-size:11px;margin-top:3px;opacity:.92}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;text-align:center;padding:12px 0}
.grid4 .it{font-size:12px;color:var(--tx2)}
.grid4 .it .n{font-size:18px;color:var(--tx);margin-bottom:2px;display:flex;align-items:center;justify-content:center;height:24px}
.grid4 .it .n svg{width:22px;height:22px;display:block}

/* ---------- 动态 ---------- */
.moment{padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.moment .mh{display:flex;gap:10px;align-items:flex-start}
.moment .mh .ava{width:42px;height:42px;border-radius:6px;object-fit:cover;background:#e8eef5}
.moment .mn{font-size:15px;color:#3b6da8;font-weight:500}
.moment .mc{margin:5px 0;font-size:15px;line-height:1.5;word-break:break-word;color:var(--tx)}
.moment .imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.moment .imgs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;background:#eee}
.moment .mf{display:flex;justify-content:space-between;margin-top:8px;color:var(--tx2);font-size:13px}
.moment .mf .acts span{margin-left:14px}
.moment .likes,.moment .cmts{background:#f4f6f9;padding:7px 9px;border-radius:4px;margin-top:7px;font-size:13px;line-height:1.6}
.moment .cmt b{color:#3b6da8;font-weight:500}

/* ---------- 排行榜 / 靓号 ---------- */
.rank-item{display:flex;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);gap:11px;background:#fff}
.rank-item .rk{width:30px;text-align:center;font-weight:600;color:var(--tx2);font-size:16px}
.rank-item .rk.g1{color:#e6a23c;font-size:20px}
.rank-item .rk.g2{color:#9aa3b0;font-size:19px}
.rank-item .rk.g3{color:#c87a3a;font-size:18px}
.rank-item .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#e8eef5}
.rank-item .info{flex:1;min-width:0}
.rank-item .exp{font-size:13px;color:var(--tx2)}
.rank-item.self{background:#fff8e8}
.lucky-item{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:#fff}
.lucky-item .num{font-size:19px;font-weight:600;letter-spacing:1px}
.lucky-item .price{color:#f56c6c;font-weight:600}
.filter-bar{display:flex;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.filter-bar span{flex:0 0 auto;padding:5px 14px;background:#f2f4f7;border-radius:14px;font-size:13px;color:var(--tx2)}
.filter-bar span.on{background:var(--pri);color:#fff}

/* ---------- 搜索框 / 空态 / 索引 ---------- */
.search-bar{padding:8px 12px;background:#fff;border-bottom:1px solid var(--line)}
.search-bar input{width:100%;background:#f2f4f7;border-radius:18px;padding:8px 12px;font-size:14px;color:var(--tx)}
.empty-tip{padding:60px 20px;text-align:center;color:var(--tx3);font-size:14px}
.section-title{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;color:var(--tx2);background:var(--bg)}
.center-links{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;background:#fff;padding:14px 0 4px}
.center-links .it{font-size:12px;color:var(--tx2);padding-bottom:12px}
.center-links .it .i{font-size:24px;margin-bottom:4px}
.letter-index{position:fixed;right:2px;top:50%;transform:translateY(-50%);z-index:20;font-size:10px;color:var(--tx2);text-align:center;line-height:1.5;padding:4px;background:rgba(255,255,255,.6);border-radius:8px}
.letter-index b{display:block;font-weight:500}
.friend-count{text-align:center;padding:14px 0;color:var(--tx3);font-size:13px;background:#fff}
.money{color:#f56c6c;font-weight:600}
.red-packet{background:linear-gradient(160deg,#f8b62d,#f6722d);color:#fff;border-radius:8px;padding:10px 14px;min-width:190px;max-width:230px}
.red-packet .rp-t{font-size:14px;margin-bottom:4px;display:flex;align-items:center;line-height:1.35}
.red-packet .rp-ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:5px;background:rgba(255,255,255,.22);border-radius:4px;flex:0 0 auto}
.red-packet .rp-ico svg{width:15px;height:15px}
.red-packet .rp-d{font-size:11px;opacity:.9;border-top:1px solid rgba(255,255,255,.3);padding-top:4px;margin-top:4px}
.msg video{max-width:180px;max-height:240px;display:block;border-radius:6px;background:#000}
.voice-play{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8a94a6}
.navi-abs{position:absolute;right:14px;top:0;bottom:0;display:flex;align-items:center;color:var(--tx3)}

/* 开关 */
.switch{display:inline-flex;align-items:center}
.switch .sw{width:44px;height:24px;border-radius:12px;background:#d8dde5;position:relative;transition:.2s;display:inline-block}
.switch .sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch .sw.on{background:#12b7f5}
.switch .sw.on::after{left:22px}

/* 登录页「7天内免登录」勾选框 */
.rmb-box{width:20px;height:20px;border-radius:4px;border:1.5px solid #c4ccd8;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.15s;color:#fff}
.rmb-box svg{width:13px;height:13px;opacity:0;transition:.15s}
.rmb-box.on{background:#12b7f5;border-color:#12b7f5}
.rmb-box.on svg{opacity:1}

/* ==========================================================================
   电脑端自适应 —— 仿微信桌面版三栏布局
   --------------------------------------------------------------------------
   手机端(#app 固定 640px 居中)原样保留, 所有桌面规则都关在 @media 里,
   窄屏/移动浏览器看到的字节级一致, 不存在"改大屏把手机端弄坏"的风险。

   之前的问题是: 宽屏下只是把手机版**拉宽**, 结果一行列表横跨 1100px、
   正文大片留白, 看着就是"放大的手机页", 很难看。微信桌面版的做法是
   **分栏**: 最左一条窄导航竖条, 中间是会话/列表栏, 右边是内容区。
   这里照这个思路重做:

     [ dRail 56px ] [ dList 300px ] [ view 自适应 ]

   窄屏时 dRail / dList 整体 display:none, #view 独占全屏 —— 即原来的手机版。

   断点取 900px: 低于它仍按手机端渲染。平板竖屏(768px)离手机的使用姿势更近,
   铺成三栏反而更难用; 900px 往上基本可以确认是桌面浏览器。
   ========================================================================== */
@media (min-width:900px){
  /* ---- 外层: 三栏横向排布, 整体不再有 1240px 的居中限宽 ---- */
  #app{max-width:100%;flex-direction:row;

    /* 桌面版的配色比手机端更"灰"一些, 大色块下更耐看, 也更接近微信 */
    --bg:#f7f7f7;
  }

  /* ---------- 最左侧: 导航竖条(头像 + 四个入口 + 底部设置) ---------- */
  .d-rail{display:flex;flex-direction:column;align-items:center;flex:0 0 58px;
    background:#2e2e2e;padding:14px 0 12px;gap:6px;position:relative;z-index:3}

  /**
   * 登录/注册页: 强制收起左竖条与中栏, 让内容区独占整屏。
   *
   * 用户反馈「电脑端登录注册页不适配」——截图里左侧一片空白、表单被挤到偏右且拉得很宽。
   * 根因是这两栏虽然 JS 会去清空, 但清空依赖 Desktop.sync() 的执行时机;
   * 只要有任何一次渲染顺序不对(例如直接在地址栏打开 #/login), 就会残留。
   * 这里用 CSS 做兜底: 只要 #app 上带了 on-auth 类, 这两栏一律不占位、不显示,
   * 不依赖任何 JS 时序, 从根上杜绝"左侧大空白"。
   */
  #app.on-auth .d-rail,
  #app.on-auth .d-list{display:none !important}

  /* 登录/注册卡片在桌面端居中且限宽, 不再被拉成一长条 */
  #app.on-auth #view{align-items:stretch}
  #app.on-auth #view .auth-shell{width:100%;max-width:420px;margin:0 auto}
  .d-rail .dr-ava{width:36px;height:36px;border-radius:6px;object-fit:cover;
    background:#3a3a3a;margin-bottom:10px;cursor:pointer;border:0}
  .d-rail .dr-item{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;
    justify-content:center;color:#9a9a9a;cursor:pointer;transition:.14s;position:relative}
  .d-rail .dr-item:hover{background:rgba(255,255,255,.09);color:#e8e8e8}
  .d-rail .dr-item.on{color:#07c160}
  .d-rail .dr-item.on::before{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
    width:3px;height:20px;border-radius:2px;background:#07c160}
  .d-rail .dr-item svg{width:22px;height:22px}
  .d-rail .dr-badge{position:absolute;top:5px;right:4px;min-width:16px;height:16px;padding:0 4px;
    border-radius:8px;background:#fa5151;color:#fff;font-size:10px;line-height:16px;text-align:center}
  .d-rail .dr-spacer{flex:1}

  /* ---------- 中间: 会话/列表栏 ---------- */
  .d-list{display:flex;flex-direction:column;flex:0 0 300px;background:#fafafa;
    border-right:1px solid #e7e7e7;overflow:hidden;position:relative;z-index:2}
  .d-list .dl-head{flex:0 0 auto;height:56px;display:flex;align-items:center;gap:8px;
    padding:0 12px;background:#ededed;border-bottom:1px solid #e2e2e2}
  .d-list .dl-head input{flex:1;height:30px;border-radius:6px;background:#fff;border:0;
    padding:0 10px;font-size:13px;min-width:0}
  .d-list .dl-head .dl-add{width:30px;height:30px;flex:0 0 auto;border-radius:6px;background:#fff;
    display:flex;align-items:center;justify-content:center;color:#666;cursor:pointer}
  .d-list .dl-head .dl-add:hover{background:#e2e2e2}
  .d-list .dl-body{flex:1;overflow-y:auto;overflow-x:hidden}
  /* 列表行: 与手机端 .cell 视觉一致, 但更紧凑, 符合桌面列表的密度 */
  .d-list .dl-row{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;
    border-bottom:1px solid #f0f0f0;position:relative}
  .d-list .dl-row:hover{background:#efefef}
  .d-list .dl-row.on{background:#e2e2e2}
  .d-list .dl-row .dl-ava{width:38px;height:38px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:#dcdcdc}
  .d-list .dl-row .dl-mid{flex:1;min-width:0}
  .d-list .dl-row .dl-t1{font-size:14px;color:#1a1a1a;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
  .d-list .dl-row .dl-t2{font-size:12px;color:#a0a0a0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;margin-top:3px}
  .d-list .dl-row .dl-badge{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:#fa5151;color:#fff;font-size:11px;line-height:18px;text-align:center}
  .d-list .dl-title{padding:9px 12px 5px;font-size:12px;color:#9a9a9a;background:#fafafa}
  .d-list .dl-empty{padding:40px 16px;text-align:center;color:#b0b0b0;font-size:13px}

  /* ---------- 右侧内容区 ---------- */
  /* 内容区不再限宽居中 —— 三栏本身已经把宽度切好了, 再限宽会又出现大片留白 */
  #view{background:#f7f7f7}
  #view .navbar{background:#ededed;color:#1a1a1a;border-bottom:1px solid #e2e2e2}
  #view .navbar .nav-side .ni{color:#4a4a4a}
  #view .navbar .nav-title{font-size:16px;font-weight:600}

  /* 手机端的底部 Tab 栏在桌面必须彻底隐藏 ——
     它的入口已经由最左侧竖条承担了, 留着不仅多余, 还会和右栏内容抢位置
     (之前截图里它被挤成右上角一小撮图标, 就是这个原因)。 */
  .tabbar{display:none !important}

  /* 右侧内容里的列表铺满即可, 但正文块给一个舒服的上限, 免得一行太长 */
  #discoverBody .sec,#contactBody .sec{max-width:100%;margin:0}
  #discoverBody .grp-title,#contactBody .grp-title,
  #discoverBody .friend-count,#contactBody .friend-count{max-width:100%;margin-left:0;margin-right:0}

  /* 聊天区: 铺满剩余宽度, 输入框不要横跨整个屏幕 */
  .chat-wrap{max-width:100%;margin:0}

  /* 顶栏高度沿用桌面尺寸 */
  :root{--nav-h:56px}
  .navbar{padding:0 16px}
  .navbar .nav-side{gap:16px}
  .navbar .nav-side .ni svg{width:22px;height:22px}
  .navbar .nav-side .ni.big svg{width:24px;height:24px}

  /* 悬停反馈: 手机上是 :active, 电脑上鼠标划过就该有反应 */
  .cell:hover{background:#f5f5f5}
  .btn:hover{opacity:.9}

  /* 弹层: 手机端是底部抽屉(占满宽度), 电脑端改成居中卡片更像弹窗 */
  .popup-bg{align-items:center}
  .popup{max-width:460px;border-radius:10px;max-height:82vh}
  .popup.center{max-width:420px}

  /* 消息气泡在宽屏下限制得更窄一些, 否则一行太长不便阅读 */
  .msg>div{max-width:56%}
  .msg-img{max-width:220px}
  .msg video{max-width:300px;max-height:340px}

  /* 「我的」页资料头 */
  .profile-head{padding:20px 24px 26px}
  .profile-head .big-ava{width:76px;height:76px}
}

/* 窄屏(<900px): 三栏骨架整体隐藏, 回到纯手机版 */
@media (max-width:899px){
  .d-rail,.d-list{display:none}
}

/* ---------- 下载页 ----------
 * 整页就是一张设计稿图片(原图 1036x1382, 宽高比 ≈ 0.75)。
 * 用户反馈「下面没铺过去」—— 图片没有占满屏幕, 底部露出 #eef6fb 背景。
 * 改为让 .dl-art 撑满整个 .page, 图片用 object-fit:cover 铺满容器,
 * 这样无论手机还是桌面都不会再有上下留白。百分比热区仍相对于 .dl-art,
 * 只要图片居中裁剪, 热区与按钮的对应关系保持不变。
 */
.dl-art{position:relative;width:100%;height:100%;max-width:100%;margin:0 auto;background:#eef6fb;
  display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:hidden}
.dl-art picture{display:flex;width:100%;height:100%;justify-content:center}
.dl-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

@media (min-width:900px){
  /* 桌面: 图片铺满右侧内容区, 不再限制 max-height, 避免上下留白 */
  .dl-art{align-items:center;padding:0;flex:1;min-height:0}
  .dl-art picture{width:100%;height:100%;max-width:100%}
  .dl-art img{width:100%;height:100%;object-fit:cover;object-position:center;
    border-radius:0;box-shadow:none}
}

/* ---------- 商品网格(交易中心) ----------
 * 手机 2 列(参考图5: 一行三个的密度在小屏上放不下, 2 列可读性最好);
 * 电脑端随宽度增到 3 / 4 列。用 auto-fill + minmax 而不是写死列数,
 * 这样卡片宽度始终不小于 165px, 不会出现又扁又长的卡片。
 */
.goods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px 12px 24px}
@media (min-width:900px){
  .goods-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;padding:14px 18px 28px}
}

/* ---------- 宽屏下的多列排布 ----------
 * 注意: 这些规则作用在**右侧内容区内部**。三栏布局(见文件上方)已经把
 * 内容区的宽度切到合理范围了, 所以这里不需要再加 max-width 限宽 ——
 * 再限一次反而会在内容区里又留一圈空白, 就是之前"看着很难看"的原因之一。
 */
@media (min-width:900px){
  /* 动态(朋友圈)图片: 手机是 3 列, 宽屏给 4 列 */
  .moment .imgs{grid-template-columns:repeat(4,1fr)}

  /* 我的页四宫格、客服入口四宫格: 4 列铺满内容区即可 */
  .grid4,.center-links{max-width:620px;width:100%}
}