:root{
--bg:#EDEDED;--panel:#FFF;--bubble-green:#95EC69;--brand:#07C160;
--text:#181818;--text-2:#888;--divider:#DCDCDC;--red:#FA5151;--input-bg:#F7F7F7;
--nav-h:48px;--tab-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"PingFang SC","Noto Sans SC",-apple-system,"Microsoft YaHei",sans-serif;
color:var(--text);background:#1C1C1E;overscroll-behavior:none;user-select:none;
-webkit-user-select:none;overflow:hidden}
img{pointer-events:none}
.hidden{display:none!important}
/* 手机壳：桌面与平板 */
#stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#phone{position:relative;border-radius:55px;background:#1A1A1A;padding:12px;
box-shadow:0 30px 80px rgba(0,0,0,.35)}
#screen{position:relative;width:393px;height:852px;border-radius:44px;overflow:hidden;
background:var(--bg);display:flex;flex-direction:column}
#statusbar{position:relative;height:48px;flex:none;display:flex;align-items:flex-end;
justify-content:space-between;padding:0 28px 6px;font-size:14px;font-weight:600;
background:transparent;z-index:5;color:var(--text)}
.sb-right{display:flex;align-items:center;gap:5px;fill:currentColor;color:inherit}
#homebar{position:absolute;left:0;right:0;bottom:0;height:22px;z-index:60;
display:flex;align-items:center;justify-content:center;pointer-events:none}
.hi{width:134px;height:5px;border-radius:3px;background:rgba(0,0,0,.35)}
/* 移动端：无外框全屏 */
@media (max-width:767px){
body{background:var(--bg)}
#stage{display:block}
#phone{padding:0;border-radius:0;box-shadow:none;background:none;width:100%;height:100%}
#screen{width:100%;height:100dvh;border-radius:0}
#statusbar{display:none}
#homebar{display:none}
}
@media (min-width:768px) and (max-width:1023px){#phone{transform-origin:center}}
/* 启动页与解锁遮罩（absolute，禁 fixed） */
#splash{position:absolute;inset:0;z-index:200;background:#000;color:#FFF;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.sp-main{font-size:28px;letter-spacing:2px}
.sp-sub{font-size:12px;color:#888;position:absolute;bottom:60px}
#unlock{position:absolute;inset:0;z-index:190;background:rgba(0,0,0,.55);
display:flex;align-items:center;justify-content:center}
.ul-card{background:var(--panel);border-radius:12px;padding:22px 44px;font-size:17px}
/* App 骨架 */
#app{position:relative;flex:1;overflow:hidden}
.page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);
animation:push .3s cubic-bezier(.25,.1,.25,1)}
@keyframes push{from{transform:translateX(60px);opacity:.4}to{transform:none;opacity:1}}
.navbar{position:relative;height:var(--nav-h);flex:none;display:flex;align-items:center;
justify-content:center;background:var(--bg);border-bottom:.5px solid var(--divider)}
.nav-title{font-size:17px;font-weight:500}
.nav-back,.nav-act{position:absolute;top:0;height:100%;display:flex;align-items:center;
padding:0 14px;font-size:16px;color:var(--text);cursor:pointer;background:none;border:none}
.nav-back{left:0}.nav-act{right:0}
.nav-ai{position:absolute;right:14px;top:100%;font-size:10px;color:var(--text-2)}
.content{position:relative;flex:1;overflow-y:auto;overflow-x:hidden}
/* 底部 Tab */
.tabbar{position:relative;flex:none;height:calc(var(--tab-h) + 34px);padding-bottom:34px;
display:flex;background:var(--input-bg);border-top:.5px solid var(--divider)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2px;font-size:11px;color:var(--text-2);cursor:pointer}
.tab.on{color:var(--brand)}
.tab svg{width:26px;height:26px}
.tab .dot{position:absolute;margin:-26px 0 0 22px;min-width:16px;height:16px;border-radius:8px;
background:var(--red);color:#fff;font-size:10px;display:flex;align-items:center;
justify-content:center;padding:0 4px}
/* 会话列表 */
.empty-tip{padding:120px 0;text-align:center;color:var(--text-2);font-size:14px}
.conv{display:flex;align-items:center;gap:10px;height:64px;padding:0 14px;
background:var(--panel);cursor:pointer}
.conv+.conv{border-top:.5px solid var(--divider)}
.conv .av{width:48px;height:48px;border-radius:6px;background:#C9C9C9;flex:none;
object-fit:cover;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.conv .mid{flex:1;min-width:0}
.conv .nm{font-size:16px}
.conv .pv{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;margin-top:2px}
.conv .rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.conv .tm{font-size:12px;color:var(--text-2)}
.badge{min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;
font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* 聊天页 */
.chat-ai-tip{position:absolute;top:2px;left:0;right:0;text-align:center;
font-size:10px;color:var(--text-2);pointer-events:none;z-index:2}
.msg-time{text-align:center;font-size:12px;color:var(--text-2);margin:14px 0 4px}
.msg-sys{text-align:center;font-size:12px;color:#B2B2B2;margin:10px 20px;line-height:1.6}
.msg{display:flex;align-items:flex-start;gap:8px;padding:0 12px;margin-top:16px}
.msg.same{margin-top:4px}
.msg .av{width:40px;height:40px;border-radius:4px;background:#C9C9C9;flex:none;
object-fit:cover;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff}
.msg .bwrap{max-width:70%;display:flex;flex-direction:column}
.bubble{position:relative;padding:10px 14px;font-size:17px;line-height:1.4;
border-radius:4px;word-break:break-word;user-select:text;-webkit-user-select:text;
animation:bin .12s ease-out}
@keyframes bin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg.him .bubble{background:var(--panel)}
.msg.me{flex-direction:row-reverse}
.msg.me .bwrap{align-items:flex-end}
.msg.me .bubble{background:var(--bubble-green)}
.msg.him .bubble::before,.msg.me .bubble::before{content:"";position:absolute;top:10px;
width:0;height:0;border:5px solid transparent}
.msg.him .bubble::before{left:-9px;border-right-color:var(--panel)}
.msg.me .bubble::before{right:-9px;border-left-color:var(--bubble-green)}
.typing-tip{position:absolute;top:calc(var(--nav-h) + 4px);left:0;right:0;text-align:center;
font-size:12px;color:var(--text-2);z-index:3;transition:opacity .3s}
/* 输入栏 */
.inputbar{position:relative;flex:none;display:flex;align-items:center;gap:8px;
padding:8px 10px calc(8px + 34px);background:var(--input-bg);
border-top:.5px solid var(--divider)}
.ib-ic{width:30px;height:30px;flex:none;color:#555;display:flex;align-items:center;cursor:pointer}
.ib-ic svg{width:28px;height:28px}
.ib-input{flex:1;height:38px;border:none;border-radius:6px;background:var(--panel);
padding:0 10px;font-size:17px;outline:none;user-select:text;-webkit-user-select:text}
.ib-fake{flex:1;height:38px;border-radius:6px;background:var(--panel);
display:flex;align-items:center;padding:0 10px;font-size:17px;color:var(--text-2);cursor:pointer}
.ib-send{flex:none;height:38px;padding:0 14px;border:none;border-radius:6px;
background:var(--brand);color:#fff;font-size:15px;cursor:pointer}
/* 长按菜单 / 浮层通用 */
.mask{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:100;
display:flex;align-items:center;justify-content:center}
.ctxmenu{position:absolute;z-index:120;background:rgba(40,40,40,.96);border-radius:8px;
display:flex;overflow:hidden}
.ctxmenu button{background:none;border:none;color:#fff;font-size:14px;padding:10px 18px;
cursor:pointer}
.ctxmenu button+button{border-left:.5px solid rgba(255,255,255,.15)}
/* 底部弹层（登录/付费墙/+菜单） */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:110;background:var(--panel);
border-radius:14px 14px 0 0;padding:26px 24px calc(24px + 34px);
animation:up .28s ease-out;max-height:86%;overflow-y:auto}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet h3{text-align:center;font-size:17px;font-weight:500;margin-bottom:18px}
.sheet .x{position:absolute;top:14px;left:16px;background:none;border:none;
font-size:15px;color:var(--text-2);cursor:pointer}
.plus-menu{position:absolute;top:calc(var(--nav-h) + 6px);right:8px;z-index:110;
background:rgba(40,40,40,.96);border-radius:8px;overflow:hidden;min-width:150px}
.plus-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;
border:none;color:#fff;font-size:15px;padding:12px 16px;cursor:pointer;text-align:left}
.plus-menu button+button{border-top:.5px solid rgba(255,255,255,.12)}
.plus-menu svg{width:20px;height:20px;flex:none}
/* 表单 */
.f-group{background:var(--panel);border-radius:10px;margin:12px;overflow:hidden}
.f-row{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:16px}
.f-row+.f-row{border-top:.5px solid var(--divider)}
.f-row .lab{flex:none;color:var(--text)}
.f-row input,.f-row textarea,.f-row select{flex:1;border:none;outline:none;font-size:16px;
background:none;text-align:right;color:var(--text);user-select:text;-webkit-user-select:text}
.f-row textarea{text-align:left;resize:none}
.f-row .val{flex:1;text-align:right;color:var(--text-2);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.f-row .arrow{color:#C7C7CC;font-size:18px}
.f-note{margin:6px 18px;font-size:12px;color:var(--text-2);line-height:1.6}
.f-safe{margin:10px 18px;font-size:12px;color:#B2B2B2;line-height:1.6}
/* 单元格列表（设置/发现/我） */
.cell-group{background:var(--panel);margin:10px 0}
.cell{display:flex;align-items:center;gap:12px;padding:13px 16px;font-size:16px;
cursor:pointer;background:var(--panel);width:100%;border:none;text-align:left}
.cell+.cell{border-top:.5px solid var(--divider)}
.cell svg{width:24px;height:24px;flex:none}
.cell .lb{flex:1}
.cell .rt{color:var(--text-2);font-size:14px;display:flex;align-items:center;gap:6px}
.cell.red{color:var(--red);justify-content:center}
.btn{display:block;width:calc(100% - 24px);margin:14px 12px;padding:14px 0;border:none;
border-radius:10px;background:var(--brand);color:#fff;font-size:17px;cursor:pointer}
.btn.ghost{background:var(--panel);color:var(--text)}
.btn:disabled{opacity:.5}
.btn-sm{padding:8px 18px;font-size:14px;width:auto;display:inline-block;margin:0}
/* 头像大块（我/资料页） */
.me-head{display:flex;align-items:center;gap:14px;background:var(--panel);
padding:18px 16px;margin-bottom:10px}
.me-head .av{width:60px;height:60px;border-radius:6px;background:#C9C9C9;object-fit:cover;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
.me-head .nm{font-size:20px}
.me-head .sub{font-size:13px;color:var(--text-2);margin-top:4px}
/* 通话页 */
.call-page{background:#0B0B0C;color:#fff}
.call-canvas{position:absolute;inset:0;width:100%;height:100%}
.call-top{position:absolute;top:56px;left:0;right:0;text-align:center;z-index:5}
.call-name{font-size:20px;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.call-st{font-size:13px;color:rgba(255,255,255,.75);margin-top:6px}
.call-sub{position:absolute;left:20px;right:20px;bottom:128px;z-index:5;text-align:center;
font-size:16px;text-shadow:0 1px 6px rgba(0,0,0,.7);line-height:1.6}
.call-btns{position:absolute;left:0;right:0;bottom:calc(20px + 34px);z-index:5;
display:flex;justify-content:space-around;padding:0 26px}
.cb{width:60px;display:flex;flex-direction:column;align-items:center;gap:8px;
font-size:12px;color:rgba(255,255,255,.85);background:none;border:none;cursor:pointer}
.cb .ci{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);
display:flex;align-items:center;justify-content:center}
.cb .ci svg{width:26px;height:26px}
.cb.end .ci{background:var(--red)}
.cb.on .ci{background:rgba(255,255,255,.85);color:#111}
.call-self{position:absolute;top:100px;right:14px;width:96px;height:132px;border-radius:8px;
background:#2C2C2E;z-index:5;overflow:hidden}
/* 付费墙 */
.paywall{background:rgba(255,255,255,.97)}
.pw-title{text-align:center;font-size:19px;font-weight:500;margin:8px 0 4px}
.pw-sub{text-align:center;font-size:14px;color:var(--text-2);margin-bottom:18px}
.pw-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--divider);
border-radius:10px;padding:15px 16px;margin-bottom:10px;cursor:pointer;position:relative}
.pw-opt.on{border-color:var(--brand)}
.pw-opt .pr{flex:1}
.pw-opt .pr b{font-size:17px}
.pw-opt .pr span{font-size:13px;color:var(--text-2);margin-left:8px}
.pw-opt .tag{position:absolute;top:-9px;right:12px;background:var(--brand);color:#fff;
font-size:10px;padding:2px 8px;border-radius:8px}
.pw-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--divider)}
.pw-opt.on .pw-radio{border-color:var(--brand);background:var(--brand);
box-shadow:inset 0 0 0 3.5px #fff}
.pw-note{text-align:center;font-size:12px;color:var(--text-2);margin:4px 0 14px}
.pw-links{display:flex;justify-content:space-between;margin-top:14px}
.pw-links button{background:none;border:none;font-size:14px;color:var(--text-2);cursor:pointer}
/* 登录 */
.lg-agree{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-2);
margin:14px 2px;line-height:1.6;user-select:none}
.lg-agree .ck{width:16px;height:16px;flex:none;border:1px solid var(--divider);border-radius:50%;
margin-top:2px;cursor:pointer;position:relative}
.lg-agree .ck.on{border-color:var(--brand)}
.lg-agree .ck.on::after{content:"";position:absolute;inset:3px;border-radius:50%;
background:var(--brand)}
.lg-agree a{color:#576B95;text-decoration:none}
.lg-alt{text-align:center;font-size:13px;color:#576B95;margin-top:10px;cursor:pointer}
/* 其余杂项 */
.toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:300;
background:rgba(30,30,30,.88);color:#fff;font-size:14px;padding:11px 20px;border-radius:8px;
max-width:78%;text-align:center;line-height:1.5;animation:bin .15s}
.search-box{margin:10px 12px;background:var(--panel);border-radius:8px;display:flex;
align-items:center;padding:9px 12px;gap:8px}
.search-box input{flex:1;border:none;outline:none;font-size:16px;background:none;
user-select:text;-webkit-user-select:text}
.search-box svg{width:18px;height:18px;color:var(--text-2);flex:none}
.add-row{display:flex;align-items:center;gap:12px;background:var(--panel);padding:13px 16px;
font-size:16px;cursor:pointer;width:100%;border:none;text-align:left}
.add-row+.add-row{border-top:.5px solid var(--divider)}
.add-row .ai{width:36px;height:36px;border-radius:6px;display:flex;align-items:center;
justify-content:center;color:#fff;flex:none}
.add-row .ai svg{width:22px;height:22px}
.add-row .tx .t1{font-size:15px}
.add-row .tx .t2{font-size:12px;color:var(--text-2);margin-top:2px}
.center-page{display:flex;flex-direction:column;align-items:center;padding-top:150px;gap:8px}
.center-page .big{font-size:17px;color:var(--text)}
.center-page .sm{font-size:13px;color:var(--text-2)}
.undo-link{position:absolute;bottom:60px;left:0;right:0;text-align:center;font-size:13px;
color:var(--text-2);background:none;border:none;cursor:pointer}
.undo-link b{color:#576B95;font-weight:400}
/* 通讯录 / 朋友圈 / 照片格 */
.idx-bar{position:absolute;right:2px;top:50%;transform:translateY(-50%);z-index:5;
display:flex;flex-direction:column;font-size:11px;color:var(--text-2);gap:3px;padding:4px}
.idx-head{padding:4px 12px;font-size:13px;color:var(--text-2);background:var(--bg)}
.photo-grid{display:flex;flex-wrap:wrap;gap:6px;padding:6px}
.photo-grid .ph{width:calc((100% - 18px)/4);aspect-ratio:1;border-radius:4px;background:#D8D8D8;
object-fit:cover;cursor:pointer;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px}
.photo-grid .ph.add{background:var(--input-bg);border:.5px dashed #C7C7CC;color:#C7C7CC;
font-size:28px;cursor:pointer}
.moment{background:var(--panel);padding:14px 16px;margin-bottom:10px}
.moment .m-time{font-size:12px;color:var(--text-2);margin-bottom:8px}
.moment img{width:100%;border-radius:4px;display:block}
.moment .m-ph{width:100%;aspect-ratio:4/3;border-radius:4px;background:#D8D8D8;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px}
.step-bar{display:flex;gap:6px;justify-content:center;padding:14px 0 2px}
.step-bar i{width:22px;height:3px;border-radius:2px;background:var(--divider)}
.step-bar i.on{background:var(--brand)}
.skip-row{text-align:center;margin:14px 0}
.skip-row button{background:none;border:none;font-size:14px;color:var(--text-2);cursor:pointer}
.gray-foot{position:absolute;bottom:14px;left:0;right:0;text-align:center;
font-size:11px;color:#C0C0C0}
@media (hover:hover){.conv:hover,.cell:hover,.add-row:hover{background:#F5F5F5}}
/*@@END@@*/