/* ====== 基础重置 ====== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ====== 主题变量 ====== */
:root{
  --blue:#007AFF;--green:#34C759;--red:#FF3B30;--orange:#FF9500;--purple:#AF52DE;
  --bg:#F2F2F7;--gl:#E5E5EA;--gm:#8E8E93;--gd:#3A3A3C;
  --w:#FFF;--b:#000;--bs:#007AFF;--bo:#E5E5EA;
  --card:#FFF;--nav-bg:rgba(255,255,255,.9);--tab-bg:rgba(255,255,255,.85);
  --wx-name:#576B95;--wx-cmt-bg:#F7F7F7;--pinned-bg:#E8E8ED;
  --tab-h:84px;--st-h:44px;
}

/* ====== Body ====== */
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
  background:var(--bg);height:100vh;width:100vw;overflow:hidden;
  color:var(--b);font-size:16px;transition:background .3s,color .3s;
}
body.no-sb .status-bar{height:0;overflow:hidden;opacity:0}
body.no-sb .page-content{top:0}
body.no-sb .chat-nav,body.no-sb .sub-nav{margin-top:0}

/* ====== 状态栏 ====== */
.status-bar{
  height:var(--st-h);background:transparent;display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;font-size:14px;font-weight:600;
  position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s;
  pointer-events:none;
}
.status-bar .time{font-size:15px;font-weight:700}
.status-bar .icons{display:flex;gap:5px;align-items:center}
.battery-icon{display:inline-flex;align-items:center;gap:2px}
.battery-shell{
  width:22px;height:11px;border:1.5px solid var(--b);border-radius:2px;
  position:relative;display:flex;align-items:center;padding:1px;
}
.battery-shell::after{
  content:'';position:absolute;right:-4px;top:2px;width:2px;height:5px;
  background:var(--b);border-radius:0 1px 1px 0;
}
.battery-fill{height:100%;background:var(--green);border-radius:1px;transition:width .3s}
.battery-fill.low{background:var(--red)}
.battery-fill.mid{background:#FFD60A}
.battery-pct{font-size:11px;font-weight:600;margin-right:2px}
.signal-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.signal-dot.off{background:var(--red)}

/* ====== 页面容器 ====== */
.page-content{
  position:fixed;top:0;bottom:var(--tab-h);left:0;right:0;
  overflow:hidden;
}
.page{
  position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;
  display:none;background:var(--bg);-webkit-overflow-scrolling:touch;
}
.page.active{display:block}
.page-header{padding:6px 20px;padding-top:calc(var(--st-h) + 2px);background:var(--card);position:-webkit-sticky;position:sticky;top:0;z-index:10}
.page-header h1{font-size:34px;font-weight:800;letter-spacing:-.5px}

/* ====== Tab栏 ====== */
.tab-bar{
  height:var(--tab-h);background:var(--tab-bg);backdrop-filter:blur(20px);
  border-top:.5px solid var(--gl);display:flex;align-items:flex-start;
  justify-content:space-around;padding-top:8px;position:fixed;bottom:0;
  left:0;right:0;z-index:100;
}
.tab-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;position:relative}
.tab-item .tab-icon{font-size:26px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--gm)}
.tab-item .tab-label{font-size:10px;font-weight:500;color:var(--gm)}
.tab-item.active .tab-label,.tab-item.active .tab-icon{color:var(--blue)}
.tab-badge{
  position:absolute;top:-2px;right:-10px;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}

/* ====== 搜索 ====== */
#page-messages .search-wrap{margin:12px 16px 10px;position:relative}
.search-wrap{margin:0 16px 10px;position:relative}
.search-bar{
  padding:8px 12px 8px 32px;background:var(--gl);border-radius:10px;
  font-size:15px;border:none;outline:none;width:100%;color:var(--b);font-family:inherit;
}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--gm)}
.search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--gm);cursor:pointer;display:none}

/* ====== 聊天列表 ====== */
.chat-item-wrap{position:relative;overflow:hidden}
.chat-item{
  display:flex;align-items:center;padding:10px 16px;gap:12px;cursor:pointer;
  background:var(--bg);transition:transform .25s;position:relative;z-index:1;
}
.chat-item.pinned{background:var(--pinned-bg)}
.chat-swipe-actions{position:absolute;right:0;top:0;bottom:0;display:flex;z-index:0}
.swipe-btn{
  display:flex;align-items:center;justify-content:center;width:80px;
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;background:var(--blue);
}
.av{
  width:56px;height:56px;border-radius:50%;background:var(--gl);flex-shrink:0;
  position:relative;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--gm);
}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.av.sm{width:48px;height:48px;font-size:18px}
.av.lg{width:64px;height:64px;font-size:26px}
.chat-info{flex:1;min-width:0;border-bottom:.5px solid var(--gl);padding-bottom:10px}
.chat-info-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.chat-name{font-size:17px;font-weight:600}
.chat-time{font-size:14px;color:var(--gm)}
.chat-preview{font-size:15px;color:var(--gm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.unread-dot{
  width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* ====== 聊天页 ====== */
.chat-page{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--w);z-index:200;display:none;flex-direction:column}
.chat-page.active{display:flex}
.chat-nav{
  padding:0 8px;padding-top:var(--st-h);height:calc(var(--st-h) * 2);
  background:var(--card);border-bottom:.5px solid var(--gl);
  display:flex;align-items:center;justify-content:space-between;position:relative;flex-shrink:0;
}
.chat-nav-back{display:flex;align-items:center;gap:4px;color:var(--blue);font-size:17px;cursor:pointer;padding:8px}
.chat-nav-center{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.chat-nav-title{font-size:17px;font-weight:600;cursor:pointer}
.chat-nav-title:active{opacity:.6}
.chat-nav-right{padding:8px;cursor:pointer}
.dots-btn{
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--blue);
  display:flex;align-items:center;justify-content:center;color:var(--blue);
  font-size:14px;font-weight:700;letter-spacing:-1px;
}
.nav-status-row{display:flex;align-items:center;justify-content:center;gap:4px;height:14px;margin-top:1px}
.nav-status-dot{width:6px;height:6px;border-radius:50%;transition:background .5s}
.nav-status-text{font-size:11px;transition:color .5s}
.nav-typing-row{display:none;text-align:center}
.nav-typing-row.show{display:block}
.nav-typing-name{font-size:17px;font-weight:600;line-height:1.2}
.nav-typing-text{font-size:12px;color:var(--gm);margin-top:1px;animation:typingFadeIn .3s ease-out}
@keyframes typingFadeIn{0%{opacity:0;transform:translateY(3px)}100%{opacity:1;transform:translateY(0)}}

/* ====== 消息区域 ====== */
.msg-area-wrap{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.messages-container{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:6px;
  -webkit-overflow-scrolling:touch;position:relative;
}
.chat-bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none}
.messages-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.msg-row{display:flex;max-width:78%}
.msg-row.self{align-self:flex-end}
.msg-row.other{align-self:flex-start}
/* 禁止 Safari 长按选中文本变蓝 */
.msg-bubble, .btn, .nav-item, .stk-item, .moment-card, .plus-sidebar-item { 
    -webkit-user-select: none; 
    user-select: none; 
    -webkit-touch-callout: none; 
}
.msg-bubble{padding:9px 14px;border-radius:18px;font-size:16px;line-height:1.4;word-break:break-word}
.msg-row.self .msg-bubble{background:var(--bs);color:white;border-bottom-right-radius:4px}
.msg-row.other .msg-bubble{background:var(--bo);color:var(--b);border-bottom-left-radius:4px}
.has-bg .msg-row.other .msg-bubble{background:rgba(200,200,200,.85);backdrop-filter:blur(8px)}
.has-bg .msg-row.self .msg-bubble{background:rgba(0,122,255,.85)}
.msg-time-divider{text-align:center;font-size:12px;color:var(--gm);padding:10px 0}

/* 打字动画 */
.msg-typing{
  align-self:flex-start;padding:12px 18px;background:var(--bo);
  border-radius:18px;border-bottom-left-radius:4px;display:flex;gap:4px;align-items:center;
}
.msg-typing span{width:8px;height:8px;background:var(--gm);border-radius:50%;animation:tb 1.4s infinite ease-in-out}
.msg-typing span:nth-child(2){animation-delay:.2s}
.msg-typing span:nth-child(3){animation-delay:.4s}
@keyframes tb{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}

/* 消息类型 */
.msg-image{max-width:200px;max-height:200px;border-radius:12px;display:block}
.msg-img-desc{background:rgba(0,122,255,.08);border:1px dashed rgba(0,122,255,.3);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--gd)}
.msg-sticker{padding:4px}
.msg-sticker img{max-width:120px;max-height:120px;border-radius:8px;display:block}
.msg-quote{font-size:13px;color:var(--gm);border-left:3px solid var(--blue);padding:4px 8px;margin-bottom:6px;border-radius:2px;background:rgba(0,122,255,.05)}
.stream-cursor{display:inline-block;width:2px;height:1em;background:currentColor;animation:blk 1s step-end infinite;vertical-align:text-bottom;margin-left:1px}
@keyframes blk{0%,100%{opacity:1}50%{opacity:0}}

/* ====== 语音气泡 ====== */
.voice-bubble{padding:10px 14px;border-radius:18px;cursor:pointer;min-width:140px}
.msg-row.self .voice-bubble{background:var(--bs);border-bottom-right-radius:4px}
.msg-row.other .voice-bubble{background:var(--bo);border-bottom-left-radius:4px}
.voice-top{display:flex;align-items:center;gap:10px}
.voice-play{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;cursor:pointer;
}
.msg-row.self .voice-play{background:rgba(255,255,255,.25);color:white}
.msg-row.other .voice-play{background:rgba(0,0,0,.08);color:var(--gd)}
.voice-play svg{width:12px;height:12px}
.voice-wave{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.voice-bar{width:3px;border-radius:2px}
.msg-row.self .voice-bar{background:rgba(255,255,255,.5)}
.msg-row.other .voice-bar{background:rgba(0,0,0,.2)}
.voice-dur{font-size:13px;font-weight:500;flex-shrink:0}
.msg-row.self .voice-dur{color:rgba(255,255,255,.7)}
.msg-row.other .voice-dur{color:var(--gm)}
.voice-text{font-size:14px;margin-top:8px;padding-top:8px;line-height:1.5;display:none}
.voice-text.show{display:block}
.msg-row.self .voice-text{border-top:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.msg-row.other .voice-text{border-top:1px solid rgba(0,0,0,.08);color:var(--gd)}
.voice-hint{font-size:11px;margin-top:4px;text-align:center}
.msg-row.self .voice-hint{color:rgba(255,255,255,.4)}
.msg-row.other .voice-hint{color:var(--gm)}
.voice-playing .voice-bar{animation:vp .6s ease-in-out infinite}
@keyframes vp{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.5)}}
.voice-playing .voice-bar:nth-child(2n){animation-delay:.1s}

/* ====== 菜单覆盖层 ====== */
.ctx-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:250;display:none;
  background:rgba(0,0,0,.3);backdrop-filter:blur(6px);
}
.ctx-overlay.active{display:block}
.ctx-menu,.dots-menu{
  position:fixed;z-index:251;background:var(--card);border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.2);overflow:hidden;min-width:160px;
}
.ctx-item,.dots-menu-item{
  padding:13px 16px;font-size:15px;cursor:pointer;display:flex;align-items:center;
  gap:10px;border-bottom:.5px solid var(--gl);color:var(--b);
}
.ctx-item:last-child,.dots-menu-item:last-child{border-bottom:none}
.ctx-item:active,.dots-menu-item:active{background:var(--gl)}
.ctx-item.danger,.dots-menu-item.danger{color:var(--red)}
.dots-menu {
  position: fixed !important;
  z-index: 2000 !important;
  right: 10px !important;
  top: 80px !important;
  background: var(--card) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2) !important;
  overflow: hidden !important;
  min-width: 180px !important;
  max-height: 65vh !important; 
  overflow-y: auto !important; 
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dots-menu::-webkit-scrollbar { width: 4px !important; display: block !important; }
.dots-menu::-webkit-scrollbar-thumb { background: var(--gl); border-radius: 4px; }


/* 动态操作菜单 */
.moment-actions{
  position:fixed;z-index:260;background:var(--card);border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.2);overflow:hidden;display:none;min-width:140px;
}
.moment-actions.show{display:block}
.moment-act-item{padding:12px 16px;font-size:15px;cursor:pointer;border-bottom:.5px solid var(--gl);color:var(--b)}
.moment-act-item:last-child{border-bottom:none}

/* ====== +号/模糊层 ====== */
.blur-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(255,255,255,.5);backdrop-filter:blur(12px);
  z-index:5;display:none;cursor:pointer;
}
.blur-overlay.active{display:block}
.plus-sidebar{
  position:absolute;bottom:0;left:6px;z-index:10;display:none;
  flex-direction:column;align-items:center;gap:6px;padding-bottom:58px;
  max-height:70vh;overflow-y:auto;padding-top:10px;
  -webkit-overflow-scrolling:touch;
}
.plus-sidebar::-webkit-scrollbar{display:none}
.plus-sidebar.active{display:flex}
.plus-sidebar-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  opacity:0;transform:translateY(20px) scale(.8);animation:popIn .25s ease forwards;
}
.plus-sidebar-item:nth-child(1){animation-delay:.05s}
.plus-sidebar-item:nth-child(2){animation-delay:.1s}
.plus-sidebar-item:nth-child(3){animation-delay:.15s}
.plus-sidebar-item:nth-child(4){animation-delay:.2s}
.plus-sidebar-item:nth-child(5){animation-delay:.25s}
@keyframes popIn{to{opacity:1;transform:translateY(0) scale(1)}}
.plus-sidebar-icon{
  width:52px;height:52px;border-radius:50%;background:var(--gl);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.plus-sidebar-label{font-size:11px;color:var(--gd);font-weight:500}
.photo-submenu{
  position:fixed;background:var(--card);border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);overflow:hidden;display:none;z-index:300;min-width:170px;
}
.photo-submenu.active{display:block}
.photo-submenu-item{padding:13px 16px;font-size:15px;cursor:pointer;border-bottom:.5px solid var(--gl);color:var(--b)}
.photo-submenu-item:last-child{border-bottom:none}

/* ====== 输入栏 ====== */
.quote-bar{
  padding:8px 12px;background:var(--bg);border-top:.5px solid var(--gl);
  display:none;align-items:center;gap:8px;font-size:13px;color:var(--gm);flex-shrink:0;
}
.quote-bar.active{display:flex}
.quote-bar-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quote-bar-close{cursor:pointer;font-size:18px}
.chat-input-bar{
  padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));
  background:var(--bg);border-top:.5px solid var(--gl);
  display:flex;align-items:flex-end;gap:6px;position:relative;z-index:6;flex-shrink:0;
}
.plus-btn{
  width:34px;height:34px;border:none;background:var(--gm);color:var(--w);
  border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-bottom:4px;
  transition:transform .25s,background .25s;line-height:1;
}
.plus-btn.open{transform:rotate(45deg);background:var(--blue)}
.input-wrap{
  flex:1;background:var(--card);border-radius:20px;border:.5px solid var(--gl);
  padding:8px 14px;display:flex;align-items:center;
}
.input-wrap textarea{
  flex:1;border:none;outline:none;font-size:16px;font-family:inherit;
  resize:none;max-height:100px;line-height:1.4;background:transparent;color:var(--b);
}
.send-btn{
  width:34px;height:34px;border:none;background:var(--blue);color:white;
  border-radius:50%;font-size:18px;cursor:pointer;display:none;
  align-items:center;justify-content:center;flex-shrink:0;margin-bottom:4px;
}
.send-btn.show{display:flex}
.mic-btn{
  width:34px;height:34px;border:none;background:transparent;color:var(--gm);
  border-radius:50%;cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-bottom:4px;
}
.mic-btn.hide{display:none}
.mic-btn svg{width:22px;height:22px}

/* ====== 底部面板 ====== */
.bottom-panel{max-height:0;overflow:hidden;transition:max-height .3s;background:var(--bg);flex-shrink:0}
.bottom-panel.active{max-height:280px;overflow-y:auto}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:10px}
.emoji-item{font-size:26px;text-align:center;padding:6px;cursor:pointer;border-radius:8px}
.emoji-item:active{background:var(--gl)}
.stk-panel-content{display:flex;flex-direction:column;height:250px}
.stk-panel-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px}
.stk-sel-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:4px;border-radius:8px}
.stk-sel-item:active{background:var(--gl)}
.stk-sel-item img{width:60px;height:60px;object-fit:contain;border-radius:6px}
.stk-sel-name{font-size:10px;color:var(--gm);margin-top:3px;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-panel-tabs{display:flex;border-top:.5px solid var(--gl);background:var(--card);flex-shrink:0;overflow-x:auto;padding:4px 6px}
.stk-panel-tabs::-webkit-scrollbar{display:none}
.stk-panel-tab{
  width:38px;height:38px;border-radius:8px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;margin:0 2px;border:2px solid transparent;
}
.stk-panel-tab.active{border-color:var(--blue);background:rgba(0,122,255,.08)}
.stk-panel-tab img{width:28px;height:28px;object-fit:contain}
.stk-empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--gm);font-size:14px}

/* ====== 心声 ====== */
.heart-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:280;
  background:rgba(0,0,0,.5);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:20px;cursor:pointer;
}
.heart-overlay.active{display:flex}
.heart-card{
  background:var(--card);border-radius:20px;padding:24px;max-width:320px;
  width:100%;box-shadow:0 10px 40px rgba(0,0,0,.3);cursor:default;text-align:center;
  max-height:80vh;overflow-y:auto;
}
.heart-avatar{
  width:70px;height:70px;border-radius:50%;margin:0 auto 10px;background:var(--gl);
  overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--gm);
}
.heart-avatar img{width:100%;height:100%;object-fit:cover}
.heart-name{font-size:18px;font-weight:700;margin-bottom:4px}
.heart-tz{font-size:13px;color:var(--gm);margin-bottom:16px}
.heart-section{text-align:left;margin-bottom:14px}
.heart-section-title{font-size:13px;font-weight:600;color:var(--gm);margin-bottom:6px}
.heart-section-text{font-size:15px;line-height:1.6;font-style:italic;padding:10px;background:var(--bg);border-radius:10px}
.heart-footer{font-size:12px;color:var(--gm);margin-top:12px}
.heart-loading{padding:40px;text-align:center;color:var(--gm)}

/* ====== 收款确认 ====== */
.receipt-card{
  background:linear-gradient(135deg,#34C759,#30D158);color:white;border-radius:12px;padding:12px 16px;display:flex;align-items:center;max-width:280px;margin:4px 0;
  box-shadow:0 2px 8px rgba(52,199,89,.3);cursor:default;
}
.receipt-icon{font-size:18px;margin-right:8px}
.receipt-text{font-size:14px;font-weight:500;flex:1;text-align:center}

/* ====== 子页面 ====== */
.sub-page{
  position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);
  z-index:210;display:none;flex-direction:column;
}
.sub-page::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:calc(var(--st-h) + var(--st-h));
  background:var(--card);z-index:-1;
}
.sub-page.active{display:flex}
.sub-nav{
  padding:0 12px;padding-top:var(--st-h);height:calc(var(--st-h) * 2);
  background:var(--card);border-bottom:.5px solid var(--gl);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.sub-nav-back{color:var(--blue);font-size:17px;cursor:pointer;padding:8px;min-width:60px}
.sub-nav-title{font-size:17px;font-weight:600}
.sub-nav-right{min-width:60px;text-align:right}
.sub-nav-btn{color:var(--blue);font-size:15px;cursor:pointer;padding:8px}
.sub-body{flex:1;overflow-y:auto;padding:50px 16px 40px;-webkit-overflow-scrolling:touch}

/* ====== 模态框 ====== */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);
  z-index:300;display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--card);border-radius:16px;width:100%;max-width:360px;
  max-height:85vh;overflow-y:auto;padding:24px 20px;
}
.modal h3{font-size:20px;font-weight:700;margin-bottom:20px;text-align:center}
.mf{margin-bottom:16px}
.mf label{display:block;font-size:13px;font-weight:600;color:var(--gm);text-transform:uppercase;margin-bottom:6px}
.mf-hint{font-size:12px;color:var(--gm);margin-top:4px}
.mf input,.mf textarea,.mf select{
  width:100%;padding:12px;border:1px solid var(--gl);border-radius:10px;
  font-size:16px;font-family:inherit;outline:none;background:var(--card);
  color:var(--b);-webkit-appearance:none;
}
.mf input:focus,.mf textarea:focus{border-color:var(--blue)}
.mf textarea{resize:vertical;min-height:80px}
.modal-buttons{display:flex;gap:10px;margin-top:20px}
.modal-buttons button{flex:1;padding:12px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer}
.btn-cancel{background:var(--gl);color:var(--b)}
.btn-save{background:var(--blue);color:white}
.btn-delete{background:var(--red);color:white}
.av-upload{
  width:80px;height:80px;border-radius:50%;background:var(--gl);margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  font-size:28px;color:var(--gm);
}
.av-upload img{width:100%;height:100%;object-fit:cover}

/* 底部弹窗 */
.bottom-modal-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:309;display:none}
.bottom-modal-bg.show{display:block}
.bottom-modal{
  position:fixed;bottom:0;left:0;right:0;background:var(--card);
  border-radius:16px 16px 0 0;padding:20px;
  padding-bottom:max(20px,env(safe-area-inset-bottom));z-index:310;display:none;
  animation:slideUp .3s ease;
}
.bottom-modal.show{display:block}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.bm-input{
  width:100%;padding:14px;border:1.5px solid var(--gl);border-radius:12px;
  font-size:16px;font-family:inherit;outline:none;resize:none;min-height:60px;
  background:var(--card);color:var(--b);margin:12px 0;
}
.bm-input:focus{border-color:var(--blue)}
.bm-btns{display:flex;gap:10px}
.bm-btns button{flex:1;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer}
.bm-cancel{background:var(--gl);color:var(--b)}
.bm-send{background:var(--blue);color:white}
.bm-send:disabled{opacity:.4}

/* ====== 开关 ====== */
.toggle{
  width:51px;height:31px;border-radius:16px;background:var(--gl);
  position:relative;cursor:pointer;transition:background .3s;flex-shrink:0;
}
.toggle.on{background:var(--green)}
.toggle-knob{
  width:27px;height:27px;border-radius:50%;background:#fff;position:absolute;
  top:2px;left:2px;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle.on .toggle-knob{transform:translateX(20px)}

/* ====== 设置 ====== */
.settings-group{background:var(--card);border-radius:12px;margin:0 16px 16px;overflow:hidden}
.settings-item{
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:.5px solid var(--gl);cursor:pointer;
}
.settings-item:last-child{border-bottom:none}
.settings-item:active{background:var(--gl)}
.settings-label{font-size:16px;display:flex;align-items:center;gap:8px}
.settings-value{font-size:15px;color:var(--gm)}
.settings-section-title{padding:24px 16px 8px;font-size:13px;color:var(--gm);text-transform:uppercase;font-weight:600}
.profile-card{
  background:var(--card);border-radius:12px;margin:0 16px 16px;padding:16px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
}
.profile-info{flex:1}
.profile-name{font-size:20px;font-weight:700}
.profile-sign{font-size:14px;color:var(--gm);margin-top:2px}
.sel-val{border:none;background:transparent;text-align:right;color:var(--gm);font-size:15px;padding:4px;outline:none;-webkit-appearance:none}
.section-label{padding:20px 16px 8px;font-size:13px;color:var(--gm);font-weight:600;text-transform:uppercase}

/* ====== 世界书 ====== */
.wb-book{background:var(--card);border-radius:14px;margin:0 16px 12px;overflow:hidden}
.wb-book-header{padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer}
.wb-book-header:active{opacity:.8}
.wb-book-info{flex:1;min-width:0}
.wb-book-name{font-size:17px;font-weight:600}
.wb-book-meta{font-size:12px;color:var(--gm);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap}
.wb-badge{font-size:11px;padding:2px 8px;border-radius:8px;font-weight:500}
.wb-badge.blue{background:rgba(0,122,255,.1);color:var(--blue)}
.wb-badge.orange{background:rgba(255,149,0,.1);color:var(--orange)}
.wb-badge.green{background:rgba(52,199,89,.1);color:var(--green)}
.wb-book-btns{display:flex;gap:6px;flex-shrink:0}
.wb-book-btns button{
  width:30px;height:30px;border:none;border-radius:8px;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;
}
.wb-b-edit{background:rgba(0,122,255,.1);color:var(--blue)}
.wb-b-del{background:rgba(255,59,48,.1);color:var(--red)}
.wb-book-arrow{color:var(--gm);font-size:18px;transition:transform .3s;flex-shrink:0}
.wb-book-arrow.open{transform:rotate(90deg)}
.wb-book-body{display:none;border-top:.5px solid var(--gl);padding:10px 16px}
.wb-book-body.open{display:block}
.wb-chunk{background:var(--bg);border-radius:10px;padding:10px;margin-bottom:8px;border-left:3px solid var(--gl)}
.wb-chunk.hit{border-left-color:var(--green);background:rgba(52,199,89,.05)}
.wb-chunk-kws{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.wb-kw{padding:2px 8px;border-radius:8px;font-size:12px;background:rgba(0,122,255,.08);color:var(--blue)}
.wb-kw.hit{background:rgba(52,199,89,.15);color:var(--green)}
.wb-chunk-text{font-size:13px;line-height:1.5;color:var(--gd);max-height:50px;overflow:hidden}

/* 模拟测试 */
.sim-box{margin:0 16px 16px;padding:14px;background:var(--card);border-radius:14px}
.sim-title{font-size:16px;font-weight:700;margin-bottom:4px}
.sim-desc{font-size:13px;color:var(--gm);margin-bottom:10px}
.sim-chars{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.sim-char-btn{padding:6px 12px;border-radius:10px;border:1.5px solid var(--gl);font-size:14px;cursor:pointer;background:var(--card)}
.sim-char-btn.sel{border-color:var(--blue);background:rgba(0,122,255,.05);color:var(--blue);font-weight:600}
.sim-row{display:flex;gap:8px;margin-bottom:10px}
/* 增加 min-width:0 和 box-sizing 防止撑破弹性容器 */
.sim-input{flex:1;padding:10px;border:1px solid var(--gl);border-radius:10px;font-size:15px;outline:none;background:var(--card);color:var(--b);min-width:0;box-sizing:border-box}
/* 增加 flex-shrink:0 防止按钮被挤压变形 */
.sim-go{padding:10px 16px;background:var(--green);color:white;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;flex-shrink:0}
.sim-result{background:var(--bg);border-radius:12px;padding:12px;display:none}
.sim-result.show{display:block}
.sim-res-item{padding:8px 10px;background:var(--card);border-radius:8px;margin-bottom:6px;border-left:3px solid var(--green);font-size:13px;line-height:1.5}
.sim-res-item strong{display:block;margin-bottom:2px}
.sim-res-skip{font-size:13px;color:var(--gm);margin-top:6px}

/* ====== 数据管理 ====== */
.storage-card{background:var(--card);border-radius:14px;margin:0 16px 16px;padding:16px}
.storage-header{display:flex;justify-content:space-between;margin-bottom:12px}
.storage-title{font-size:16px;font-weight:600}
.storage-total{font-size:14px;color:var(--gm)}
.storage-track{height:10px;background:var(--gl);border-radius:5px;overflow:hidden;margin-bottom:12px}
.storage-fill-wrap{height:100%;display:flex;border-radius:5px}
.sf-chat{background:var(--blue)}
.sf-img{background:var(--orange)}
.sf-wb{background:var(--green)}
.sf-other{background:var(--gm)}
.storage-legend{display:flex;flex-wrap:wrap;gap:10px}
.legend-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gd)}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.storage-warn{margin-top:10px;padding:10px;background:rgba(255,149,0,.1);border-radius:8px;font-size:13px;color:var(--orange);display:none}
.storage-warn.show{display:block}
.export-option{padding:14px 16px;background:var(--card);border-radius:12px;margin:0 16px 10px;cursor:pointer;display:flex;align-items:center;gap:12px}
.export-option:active{background:var(--gl)}
.export-icon{font-size:28px;flex-shrink:0}
.export-info{flex:1}
.export-name{font-size:16px;font-weight:600}
.export-desc{font-size:13px;color:var(--gm);margin-top:2px}
.import-zone{border:2px dashed var(--gl);border-radius:14px;padding:30px 20px;text-align:center;cursor:pointer;margin:0 16px 16px}
.import-zone:active{border-color:var(--blue)}

/* ====== 表情包管理 ====== */
.stk-group-card{background:var(--card);border-radius:14px;margin:0 16px 12px;overflow:hidden}
.stk-group-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.stk-group-header:active{opacity:.8}
.stk-group-name{font-size:16px;font-weight:600}
.stk-group-count{font-size:14px;color:var(--gm);margin-left:6px}
.stk-group-acts{display:flex;gap:10px;font-size:14px}
.stk-group-acts span{cursor:pointer;padding:2px}
.stk-group-arrow{color:var(--gm);font-size:16px;transition:transform .3s;margin-left:8px}
.stk-group-arrow.open{transform:rotate(90deg)}
.stk-group-body{display:none;padding:10px 16px 16px;border-top:.5px solid var(--gl)}
.stk-group-body.open{display:block}
/* 表情包库改为自适应网格，解决显示不全 */
.stk-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(65px, 1fr));gap:8px}
.stk-item{display:flex;flex-direction:column;align-items:center;position:relative;width:100%}.stk-thumb{width:54px;height:54px;border-radius:8px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.stk-thumb img{width:100%;height:100%;object-fit:contain;padding:2px}
.stk-item-name{font-size:10px;color:var(--gm);margin-top:2px;max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-item-del{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--red);color:white;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.stk-add-item{width:54px;height:54px;border-radius:8px;border:1.5px dashed var(--gm);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--gm);cursor:pointer}
.stk-preview{width:80px;height:80px;margin:0 auto 12px;border-radius:10px;background:var(--gl);overflow:hidden;display:flex;align-items:center;justify-content:center}
.stk-preview img{width:100%;height:100%;object-fit:contain}
.stk-upload-row{display:flex;gap:8px;margin-bottom:12px}
.stk-upload-btn{flex:1;padding:10px;border:1px solid var(--gl);border-radius:8px;background:var(--card);text-align:center;cursor:pointer;font-size:14px;color:var(--blue)}
.batch-list{max-height:300px;overflow-y:auto}
.batch-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid var(--gl)}
.batch-thumb{width:48px;height:48px;border-radius:8px;object-fit:contain;background:var(--gl);flex-shrink:0}
.batch-name-input{flex:1;padding:8px;border:1px solid var(--gl);border-radius:8px;font-size:14px;outline:none;background:var(--card);color:var(--b)}
.batch-remove{color:var(--red);font-size:20px;cursor:pointer;padding:4px}

/* ====== 人设 ====== */
.persona-card{background:var(--card);border-radius:14px;margin:0 16px 12px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.persona-info{flex:1;min-width:0}
.persona-name{font-size:16px;font-weight:600}
.persona-preview{font-size:13px;color:var(--gm);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona-acts span{font-size:14px;cursor:pointer;padding:4px;margin-left:6px}

/* ====== 朋友圈 ====== */
/* 向上微移1px盖住白边缝隙 */
.wx-cover{height:280px;position:relative;margin-bottom:50px;background-size:cover;background-position:center;margin-top:-1px}
.wx-cover-name{position:absolute;bottom:14px;right:92px;color:#fff;font-size:18px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.wx-cover-avatar{
  position:absolute;bottom:-28px;right:16px;width:66px;height:66px;border-radius:10px;
  background:var(--w);border:3px solid var(--w);overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--gm);
}
.wx-cover-avatar img{width:100%;height:100%;object-fit:cover}
.wx-cover-sign{position:absolute;bottom:-48px;right:16px;font-size:13px;color:var(--gm)}
.wx-list{margin:0 12px 20px;border-radius:12px;overflow:hidden}
.wx-moment{padding:14px 16px;border-bottom:.5px solid var(--gl);display:flex;gap:10px;background:var(--card)}
.wx-m-av{width:42px;height:42px;border-radius:6px;background:var(--gl);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gm)}
.wx-m-av img{width:100%;height:100%;object-fit:cover}
.wx-m-body{flex:1;min-width:0}
.wx-m-name{font-size:15px;font-weight:600;color:var(--wx-name);margin-bottom:4px}
.wx-m-text{font-size:15px;line-height:1.5;margin-bottom:8px;white-space:pre-wrap}
.wx-m-bottom{display:flex;align-items:center;justify-content:space-between}
.wx-m-time{font-size:12px;color:#B2B2B2}
.wx-m-btn{padding:3px 8px;background:var(--wx-cmt-bg);border-radius:4px;font-size:16px;cursor:pointer}
.wx-m-comments{background:var(--wx-cmt-bg);border-radius:4px;padding:8px 10px;margin-top:8px}
.wx-m-likes{font-size:13px;color:var(--wx-name);padding-bottom:6px;border-bottom:.5px solid var(--gl);margin-bottom:6px}
.wx-m-comment{font-size:14px;line-height:1.5;margin-bottom:4px}
.wx-m-comment:last-child{margin-bottom:0}
.wx-m-comment strong{color:var(--wx-name)}

/* ====== 聊天记录 ====== */
.history-date{font-size:14px;font-weight:600;color:var(--gm);padding:16px 16px 6px}
.history-msg{padding:8px 16px;display:flex;gap:8px;font-size:14px;line-height:1.5}
.history-role{font-weight:600;flex-shrink:0;min-width:30px}
.history-role.me{color:var(--blue)}
.history-role.other{color:var(--orange)}
.history-content{flex:1;min-width:0;color:var(--gd);word-break:break-word}

/* ====== 归档 ====== */
.archive-item{display:flex;align-items:center;padding:12px 16px;gap:10px;background:var(--card);border-radius:12px;margin-bottom:8px;cursor:pointer}
.archive-item:active{opacity:.8}
.archive-check{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--gl);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:white;flex-shrink:0;
}
.archive-check.on{background:var(--blue);border-color:var(--blue)}

/* ====== 背景选择 ====== */
.bg-colors{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.bg-color-item{width:40px;height:40px;border-radius:50%;cursor:pointer;border:3px solid transparent}
.bg-color-item.sel{border-color:var(--blue)}
.bg-grads{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.bg-grad-item{height:50px;border-radius:10px;cursor:pointer;border:3px solid transparent}
.bg-grad-item.sel{border-color:var(--blue)}
.bg-preview{width:100%;height:80px;border-radius:10px;margin-bottom:12px;background:var(--gl);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gm)}
.bg-preview img{width:100%;height:100%;object-fit:cover}
.cover-preview{width:100%;height:100px;border-radius:10px;margin-bottom:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--gm);background-size:cover;background-position:center}

/* ====== 通用 ====== */
.contact-item{display:flex;align-items:center;padding:12px 16px;gap:12px;cursor:pointer;background:var(--bg)}
.contact-item:active{background:var(--gl)}
.add-full-btn{
  margin:0 16px;padding:14px;background:var(--blue);color:white;border:none;
  border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;width:calc(100% - 32px);
}
.add-full-btn:active{opacity:.8}
.spacer{height:40px}
::-webkit-scrollbar{width:0}
.slide-in{animation:si .3s ease forwards}
@keyframes si{from{transform:translateX(100%)}to{transform:translateX(0)}}
.toast{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.75);color:#fff;padding:10px 20px;border-radius:10px;
  z-index:999;font-size:14px;pointer-events:none;opacity:0;transition:opacity .3s;
}
.toast.show{opacity:1}

/* ====== 正在输入气泡 ====== */
.typing-bubble-wrap{display:none;align-self:flex-start;animation:typingFadeIn .3s ease-out}
.typing-bubble-wrap.show{display:flex}
.typing-bubble{
  background:var(--bo);border-radius:18px;border-bottom-left-radius:4px;
  padding:12px 18px;display:flex;align-items:center;gap:5px;
}
.typing-bubble .td{
  width:7px;height:7px;border-radius:50%;background:var(--gm);
  animation:tb 1.4s ease-in-out infinite;
}
.typing-bubble .td:nth-child(2){animation-delay:.2s}
.typing-bubble .td:nth-child(3){animation-delay:.4s}

/* ====== 已读未读 ====== */
.msg-read-status{display:flex;justify-content:flex-end;padding:0 4px;margin-bottom:6px;margin-top:-2px}
.msg-read-status.read{font-size:11px;color:var(--blue)}
.msg-read-status.unread{font-size:11px;color:var(--gm)}

/* ====== 在线状态点 ====== */
.online-dot{
  position:absolute;bottom:0;right:0;width:14px;height:14px;
  border-radius:50%;border:2.5px solid var(--bg);z-index:2;
}
.online-dot.on{background:#34C759}
.online-dot.away{background:#FFD60A}
.online-dot.off{background:var(--gm)}

/* ====== 开屏动画 ====== */
.splash{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e8edf5 0%,#d5dce8 50%,#c8d0df 100%);
  transition:opacity 1s ease-out;
}
.splash.hide{opacity:0;pointer-events:none}
.splash-bubble-group{position:relative;width:120px;height:120px;margin-bottom:24px}
.splash-bubble{position:absolute;border-radius:50%;animation:splashBubbleIn 1.2s ease-out forwards;opacity:0}
.sb-1{width:80px;height:80px;background:rgba(0,122,255,.18);top:10px;left:0;animation-delay:.1s}
.sb-2{width:60px;height:60px;background:rgba(0,122,255,.28);top:0;right:0;animation-delay:.4s}
.sb-3{width:50px;height:50px;background:rgba(0,122,255,.35);bottom:0;left:20px;animation-delay:.7s}
.sb-4{width:40px;height:40px;background:rgba(0,122,255,.5);bottom:10px;right:10px;animation-delay:1s}
@keyframes splashBubbleIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15);opacity:1}75%{transform:scale(.95);opacity:1}100%{transform:scale(1);opacity:1}}
.splash-icon{
  width:60px;height:60px;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);border-radius:50%;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,122,255,.2);
  animation:splashIconPop .8s ease-out 1.4s both;
}
@keyframes splashIconPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}75%{transform:translate(-50%,-50%) scale(.95);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.splash-title{font-size:30px;font-weight:700;color:#1a1a2e;letter-spacing:2px;animation:splashFadeUp .9s ease-out 2s both}
.splash-sub{font-size:14px;color:#6b7b8d;margin-top:8px;letter-spacing:1px;animation:splashFadeUp .9s ease-out 2.5s both}
.splash-line{width:0;height:2.5px;border-radius:2px;background:linear-gradient(90deg,transparent,#007AFF,transparent);margin-top:20px;animation:splashLineGrow 1s ease-out 3s both}
@keyframes splashLineGrow{0%{width:0}100%{width:60px}}
@keyframes splashFadeUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.splash-bottom{position:absolute;bottom:50px;font-size:11px;color:#a0a8b4;letter-spacing:1px;animation:splashFadeUp .8s ease-out 3.5s both}
[data-theme="dark"] .splash{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)}
[data-theme="dark"] .splash-title{color:#e8e8e8}
[data-theme="dark"] .splash-sub{color:#8899aa}

/* ====== 颜文字面板 ====== */
.kao-panel-content{display:flex;flex-direction:column;height:260px}
.kao-tabs{
  display:flex;padding:8px 8px 4px;gap:4px;flex-shrink:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-bottom:.5px solid var(--gl);
}
.kao-tabs::-webkit-scrollbar{height:0}
.kao-tabs{scrollbar-width:none}
.kao-tab{
  flex-shrink:0;padding:5px 10px;border-radius:14px;
  font-size:13px;cursor:pointer;white-space:nowrap;
  background:transparent;color:var(--gm);border:none;
  transition:all .2s;
}
.kao-tab.active{background:var(--blue);color:white}
.kao-tab:active{opacity:.7}
.kao-grid-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.kao-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  padding:6px 8px 16px;
}
.kao-item{
  padding:10px 4px;border-radius:10px;text-align:center;
  font-size:13px;cursor:pointer;line-height:1.3;
  word-break:break-all;overflow:hidden;
  transition:background .15s;
}
.kao-item:active{background:rgba(0,122,255,.12)}

/* ====== 语音通话 ====== */
.call-page{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:500;
  display:none;flex-direction:column;color:#2e3640;
  transition:all .4s ease-in-out;
}
.call-page.active{display:flex}
.call-page.hidden{opacity:0;pointer-events:none;transform:scale(.9)}
.call-page.day{background:linear-gradient(180deg,#c4ccd4,#b4bcc8,#a4acb8)}
.call-page.night{background:linear-gradient(180deg,#2c2c3a,#3a3a4a,#4a4a5a);color:#e0e0e8}
.call-header{padding:50px 20px 4px;text-align:center;flex-shrink:0}
.call-status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;opacity:.6}
.call-status-dot{width:7px;height:7px;border-radius:50%;background:#34C759;animation:callPulse 1.5s infinite}
@keyframes callPulse{0%,100%{opacity:1}50%{opacity:.3}}
.call-timer{font-size:32px;font-weight:200;letter-spacing:2px;margin-top:2px}
.call-avatar-area{text-align:center;padding:4px 0;flex-shrink:0}
.call-avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 6px;
  display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;
}
.call-page.day .call-avatar{background:rgba(255,255,255,.4);border:2px solid rgba(128,128,128,.15)}
.call-page.night .call-avatar{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.1)}
.call-avatar img{width:100%;height:100%;object-fit:cover}
.call-name{font-size:18px;font-weight:600}
.call-action-status{font-size:12px;opacity:.55;margin-top:4px;font-style:italic;padding:0 50px;line-height:1.4}
.call-action-tag{
  display:inline-block;padding:2px 8px;border-radius:8px;
  font-size:11px;font-weight:500;font-style:normal;margin-bottom:3px;
}
.call-page.day .call-action-tag{background:rgba(52,199,89,.12);color:#34C759}
.call-page.night .call-action-tag{background:rgba(52,199,89,.2);color:#5cdb7f}
.call-chat-area{flex:1;overflow-y:auto;padding:8px 16px;-webkit-overflow-scrolling:touch}
.call-chat-inner{display:flex;flex-direction:column;gap:6px}
.call-msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:15px;line-height:1.5;word-break:break-word}
.call-msg.self{align-self:flex-end;border-bottom-right-radius:4px}
.call-msg.other{align-self:flex-start;border-bottom-left-radius:4px}
.call-page.day .call-msg.self{background:rgba(70,90,120,.16)}
.call-page.day .call-msg.other{background:rgba(255,255,255,.5)}
.call-page.night .call-msg.self{background:rgba(100,120,180,.2)}
.call-page.night .call-msg.other{background:rgba(255,255,255,.1)}
.call-msg-name{font-size:11px;opacity:.5;margin-bottom:2px}
.call-msg.new{animation:callMsgIn .3s ease-out}
@keyframes callMsgIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.call-input-bar{padding:6px 10px;display:flex;align-items:flex-end;gap:6px;flex-shrink:0}
.call-page.day .call-input-bar{border-top:1px solid rgba(60,80,100,.08)}
.call-page.night .call-input-bar{border-top:1px solid rgba(255,255,255,.06)}
.call-input-wrap{flex:1;border-radius:18px;padding:7px 12px}
.call-page.day .call-input-wrap{background:rgba(255,255,255,.42);border:1px solid rgba(60,80,100,.1)}
.call-page.night .call-input-wrap{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.call-input-wrap textarea{
  width:100%;border:none;outline:none;font-size:15px;font-family:inherit;
  resize:none;line-height:1.4;background:transparent;color:inherit;
}
.call-send-btn{
  width:32px;height:32px;border:none;background:var(--blue);
  color:white;border-radius:50%;cursor:pointer;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
}
.call-bottom{padding:6px 20px 30px;flex-shrink:0}
.call-btn-group{display:flex;justify-content:center;gap:36px;align-items:center}
.call-action-btn{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.call-action-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.call-page.day .call-action-icon{background:rgba(60,80,100,.06)}
.call-page.night .call-action-icon{background:rgba(255,255,255,.08)}
.call-action-icon svg{width:18px;height:18px}
.call-action-label{font-size:11px;opacity:.5}
.call-hangup-icon{
  width:50px;height:50px;border-radius:50%;background:#FF3B30;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 14px rgba(255,59,48,.3);
}
.call-hangup-icon svg{width:22px;height:22px}
.call-minimize-btn{
  position:absolute;top:50px;left:14px;width:36px;height:36px;border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;
}
.call-page.day .call-minimize-btn{background:rgba(0,0,0,.08);color:#2e3640}
.call-page.night .call-minimize-btn{background:rgba(255,255,255,.1);color:#e0e0e8}

/* ====== 悬浮窗 ====== */
.call-float{
  position:fixed;top:50px;left:50%;transform:translateX(-50%);
  z-index:600;display:none;cursor:pointer;animation:floatIn .4s ease-out;
}
.call-float.show{display:flex}
@keyframes floatIn{0%{opacity:0;transform:translateX(-50%) scale(.5)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes floatShake{0%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% + 4px))}50%{transform:translateX(calc(-50% - 4px))}75%{transform:translateX(calc(-50% + 2px))}100%{transform:translateX(-50%)}}
.float-pill{
  display:flex;align-items:center;gap:8px;
  background:rgba(52,199,89,.95);padding:6px 14px 6px 8px;
  border-radius:22px;box-shadow:0 4px 20px rgba(0,0,0,.2);backdrop-filter:blur(20px);
}
.float-avatar{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;
}
.float-avatar img{width:100%;height:100%;object-fit:cover}
.float-info{display:flex;flex-direction:column}
.float-name{font-size:13px;font-weight:600;color:white;line-height:1.2}
.float-timer{font-size:11px;color:rgba(255,255,255,.8)}
.float-wave{width:16px;height:16px;display:flex;align-items:center;gap:2px;margin-left:4px}
.float-wave-bar{width:3px;border-radius:2px;background:rgba(255,255,255,.7);animation:fwBar 1.2s ease-in-out infinite}
.float-wave-bar:nth-child(1){height:8px;animation-delay:0s}
.float-wave-bar:nth-child(2){height:14px;animation-delay:.2s}
.float-wave-bar:nth-child(3){height:10px;animation-delay:.4s}
@keyframes fwBar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.float-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  border-radius:9px;background:#FF3B30;color:white;font-size:11px;
  font-weight:700;display:none;align-items:center;justify-content:center;padding:0 5px;
}
.float-badge.show{display:flex}
/* ====== 表情回应 ====== */
.react-emoji-bar{
  display:flex;gap:2px;padding:8px 10px;border-bottom:.5px solid var(--gl);
  justify-content:center;
}
.react-emoji-btn{
  width:40px;height:40px;border-radius:50%;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .15s;
}
.react-emoji-btn:active{transform:scale(1.3)}
.react-emoji-btn.picked{background:rgba(0,122,255,.12)}
.msg-reactions{display:flex;gap:2px;margin-top:2px;flex-wrap:wrap}
.msg-row.self .msg-reactions{justify-content:flex-end}
.reaction-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px;border-radius:10px;font-size:13px;
  background:rgba(0,0,0,.06);cursor:pointer;
  animation:reactPop .3s ease-out;
  border:1.5px solid transparent;
}
.reaction-badge.mine{border-color:var(--blue);background:rgba(0,122,255,.08)}
.reaction-badge:active{transform:scale(.9)}
.reaction-count{font-size:11px;color:var(--gm);font-weight:600}
@keyframes reactPop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ====== 已读不回 ====== */
.msg-read-status.seen{font-size:11px;color:var(--blue);font-style:italic}

/* ====== 通话卡片（聊天里的） ====== */
.call-card{
  padding:12px 16px;border-radius:14px;min-width:160px;
  display:flex;align-items:center;gap:10px;cursor:pointer;
}
.msg-row.self .call-card{background:rgba(0,122,255,.15);border-bottom-right-radius:4px}
.msg-row.other .call-card{background:rgba(0,0,0,.06);border-bottom-left-radius:4px}
.call-card-icon{font-size:22px;flex-shrink:0}
.call-card-info{flex:1}
.call-card-title{font-size:14px;font-weight:600}
.msg-row.self .call-card-title{color:white}
.msg-row.other .call-card-title{color:var(--b)}
.call-card-detail{font-size:12px;margin-top:2px}
.msg-row.self .call-card-detail{color:rgba(255,255,255,.7)}
.msg-row.other .call-card-detail{color:var(--gm)}

/* ====== 通话记录页 ====== */
.log-card{background:var(--card);border-radius:14px;margin:0 16px 12px;overflow:hidden}
.log-header{padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer}
.log-header:active{opacity:.8}
.log-av{width:44px;height:44px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden}
.log-av img{width:100%;height:100%;object-fit:cover}
.log-info{flex:1}
.log-name{font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px}
.log-call-icon{color:var(--green);font-size:14px}
.log-meta{font-size:13px;color:var(--gm);margin-top:2px;display:flex;gap:8px}
.log-duration{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;background:rgba(52,199,89,.1);color:var(--green);font-size:12px;font-weight:500}
.log-declined{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:8px;background:rgba(255,59,48,.1);color:var(--red);font-size:12px;font-weight:500}
.log-arrow{color:var(--gm);font-size:16px;transition:transform .3s;flex-shrink:0}
.log-arrow.open{transform:rotate(90deg)}
.log-body{display:none;border-top:.5px solid var(--gl);padding:12px 16px;background:var(--bg);max-height:400px;overflow-y:auto}
.log-body.open{display:block}
.log-msg{padding:4px 0;font-size:14px;line-height:1.5;display:flex;gap:8px}
.log-msg-name{font-weight:600;flex-shrink:0;min-width:32px}
.log-msg-name.me{color:var(--blue)}
.log-msg-name.other{color:var(--orange)}
.log-msg-text{flex:1;color:var(--gd)}
.log-empty{text-align:center;padding:12px;color:var(--gm);font-size:13px;font-style:italic}
.log-expand{text-align:center;padding:8px;color:var(--blue);font-size:13px;cursor:pointer}
.log-expand:active{opacity:.6}

/* ====== 聊天统计 ====== */
.stat-hero{
  background:linear-gradient(135deg,#667eea,#764ba2);
  border-radius:20px;padding:24px;color:white;text-align:center;margin:0 16px 16px;
}
.stat-hero-av{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.25);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.stat-hero-av img{width:100%;height:100%;object-fit:cover}
.stat-hero-name{font-size:20px;font-weight:700}
.stat-hero-days{font-size:14px;opacity:.8;margin-top:4px}
.stat-hero-big{font-size:48px;font-weight:200;margin:12px 0 4px;letter-spacing:2px}
.stat-hero-label{font-size:13px;opacity:.7}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 16px}
.stat-card{background:var(--card);border-radius:14px;padding:16px;text-align:center}
.stat-num{font-size:28px;font-weight:700;color:var(--blue)}
.stat-num.green{color:var(--green)}
.stat-num.orange{color:var(--orange)}
.stat-num.purple{color:var(--purple)}
.stat-label{font-size:13px;color:var(--gm);margin-top:4px}
.stat-icon{font-size:24px;margin-bottom:6px}
.ratio-card{background:var(--card);border-radius:14px;padding:16px;margin:0 16px 16px}
.ratio-title{font-size:15px;font-weight:600;margin-bottom:12px}
.ratio-bar{height:24px;border-radius:12px;display:flex;overflow:hidden;background:var(--gl)}
.ratio-me{background:var(--blue);display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:600;transition:width 1s ease-out}
.ratio-other{background:var(--orange);display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:600;transition:width 1s ease-out}
.ratio-legend{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--gm)}
.hour-card{background:var(--card);border-radius:14px;padding:16px;margin:0 16px 16px}
.hour-title{font-size:15px;font-weight:600;margin-bottom:12px}
.hour-chart{display:flex;align-items:flex-end;gap:3px;height:100px;padding:0 4px}
.hour-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.hour-bar{width:100%;border-radius:3px 3px 0 0;background:var(--gl);transition:height 1s ease-out;min-height:2px}
.hour-bar.active{background:var(--blue)}
.hour-bar.peak{background:var(--orange)}
.hour-label{font-size:8px;color:var(--gm)}
.hour-peak-tag{text-align:center;margin-top:8px;font-size:13px;color:var(--orange);font-weight:500}
.type-card{background:var(--card);border-radius:14px;padding:16px;margin:0 16px 16px}
.type-title{font-size:15px;font-weight:600;margin-bottom:12px}
.type-row{display:flex;align-items:center;padding:8px 0;border-bottom:.5px solid var(--gl)}
.type-row:last-child{border:none}
.type-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0}
.type-name{flex:1;font-size:15px}
.type-count{font-size:15px;font-weight:600;color:var(--blue)}

/* ====== 来电界面 ====== */
.incoming-call{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:550;
  display:none;align-items:center;justify-content:center;
}
.incoming-call.show{display:flex}
.ic-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
}
.ic-content{
  position:relative;z-index:1;text-align:center;color:white;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  animation:icFadeIn .5s ease-out;
}
@keyframes icFadeIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
.ic-pulse{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.ic-pulse-ring{
  position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:50%;border:2px solid rgba(52,199,89,.4);
  animation:icPulse 2s ease-out infinite;
}
.ic-pulse-ring.r2{animation-delay:.5s}
.ic-pulse-ring.r3{animation-delay:1s}
@keyframes icPulse{
  0%{transform:scale(.8);opacity:1}
  100%{transform:scale(1.6);opacity:0}
}
.ic-avatar{
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;overflow:hidden;position:relative;z-index:2;
}
.ic-avatar img{width:100%;height:100%;object-fit:cover}
.ic-name{font-size:28px;font-weight:700;margin-top:8px}
.ic-status{font-size:16px;opacity:.6;animation:icDots 1.5s infinite}
@keyframes icDots{0%{opacity:.4}50%{opacity:.8}100%{opacity:.4}}
.ic-buttons{
  display:flex;gap:60px;margin-top:40px;
}
.ic-btn{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.ic-btn:active{transform:scale(.9)}
.ic-btn-icon{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
}
.ic-decline .ic-btn-icon{background:#FF3B30;box-shadow:0 4px 20px rgba(255,59,48,.4)}
.ic-accept .ic-btn-icon{background:#34C759;box-shadow:0 4px 20px rgba(52,199,89,.4);animation:icAcceptPulse 1.5s ease-in-out infinite}
@keyframes icAcceptPulse{0%,100%{box-shadow:0 4px 20px rgba(52,199,89,.4)}50%{box-shadow:0 4px 30px rgba(52,199,89,.7)}}
.ic-btn-label{font-size:14px;opacity:.8}
/* ====== 通话正在输入 ====== */
.call-typing{
  align-self:flex-start;padding:9px 16px;border-radius:14px;
  border-bottom-left-radius:4px;display:flex;align-items:center;gap:4px;
  animation:callMsgIn .3s ease-out;
}
.call-page.day .call-typing{background:rgba(255,255,255,.5)}
.call-page.night .call-typing{background:rgba(255,255,255,.1)}
.call-typing .ctd{
  width:6px;height:6px;border-radius:50%;background:var(--gm);
  animation:tb 1.4s ease-in-out infinite;
}
.call-typing .ctd:nth-child(2){animation-delay:.2s}
.call-typing .ctd:nth-child(3){animation-delay:.4s}
/* ====== 消息撤回 ====== */
.msg-recalled{
  text-align:center;font-size:13px;color:var(--gm);
  padding:6px 0;font-style:italic;user-select:none;
}
.recall-peek{
  color:var(--blue);cursor:pointer;margin-left:4px;
  font-style:normal;font-size:12px;
}
.recall-peek:active{opacity:.5}
.recall-content{
  background:var(--bg);border-radius:10px;padding:8px 12px;
  margin:4px auto;font-size:14px;color:var(--gd);font-style:normal;
  max-width:240px;text-align:left;
  animation:recallFade .3s ease;
}
@keyframes recallFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ====== 统计排行 ====== */
.rank-section{background:var(--card);border-radius:14px;margin:0 16px 16px;overflow:hidden}
.rank-title{padding:14px 16px 8px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.rank-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:.5px solid var(--gl)}
.rank-pos{font-size:18px;font-weight:800;width:28px;text-align:center;flex-shrink:0}
.rank-pos.p1{color:#FFD700}
.rank-pos.p2{color:#C0C0C0}
.rank-pos.p3{color:#CD7F32}
.rank-av{width:36px;height:36px;border-radius:50%;background:var(--gl);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gm)}
.rank-av img{width:100%;height:100%;object-fit:cover}
.rank-name{flex:1;font-size:15px;font-weight:600}
.rank-val{font-size:15px;font-weight:600;color:var(--blue)}
.rank-val.green{color:var(--green)}
.rank-val.orange{color:var(--orange)}
.all-stat-header{padding:20px 16px;text-align:center}
.all-stat-total{font-size:42px;font-weight:200;letter-spacing:2px;color:var(--blue)}
.all-stat-label{font-size:14px;color:var(--gm);margin-top:4px}
/* ====== 红包/转账 ====== */
.rp-card{
  width:220px;border-radius:12px;overflow:hidden;cursor:pointer;
  transition:transform .15s;
}
.rp-card:active{transform:scale(.97)}
.msg-row.self .rp-card{margin-left:auto}
.rp-top{
  background:linear-gradient(135deg,#E84118,#C23616);
  padding:14px 16px;color:white;display:flex;align-items:center;gap:10px;
}
.rp-icon{font-size:32px;flex-shrink:0}
.rp-info{flex:1}
.rp-msg{font-size:14px;line-height:1.4}
.rp-label{font-size:11px;opacity:.7;margin-top:2px}
.rp-bottom{
  background:linear-gradient(135deg,#C23616,#A01010);
  padding:6px 16px;font-size:11px;color:rgba(255,255,255,.6);
  text-align:right;
}
.rp-opened .rp-top{background:linear-gradient(135deg,#999,#777)}
.rp-opened .rp-bottom{background:linear-gradient(135deg,#777,#666)}
.tf-card{
  width:220px;border-radius:12px;overflow:hidden;cursor:pointer;
  transition:transform .15s;
}
.tf-card:active{transform:scale(.97)}
.msg-row.self .tf-card{margin-left:auto}
.tf-top{
  background:linear-gradient(135deg,#FF9500,#E08600);
  padding:14px 16px;color:white;display:flex;align-items:center;gap:10px;
}
.tf-icon{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.tf-icon svg{width:24px;height:24px}
.tf-amount{font-size:22px;font-weight:600}
.tf-note{font-size:12px;opacity:.8;margin-top:2px}
.tf-bottom{
  background:linear-gradient(135deg,#E08600,#C07000);
  padding:6px 16px;font-size:11px;color:rgba(255,255,255,.6);
  text-align:right;
}
.tf-accepted .tf-top, .tf-returned .tf-top{background:linear-gradient(135deg,#999,#777)}
.tf-accepted .tf-bottom, .tf-returned .tf-bottom{background:linear-gradient(135deg,#777,#666)}
.rp-result{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:400;
  background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;
}
.rp-result.show{display:flex}
.rp-result-card{
  background:linear-gradient(180deg,#E84118 0%,#C23616 60%,#A01010 100%);
  border-radius:20px;width:280px;padding:30px 20px;text-align:center;color:white;
  animation:rpPop .4s ease-out;
}
.rp-result-card.transfer{background:linear-gradient(180deg,#FF9500 0%,#E08600 60%,#C07000 100%)}
@keyframes rpPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.rp-result-icon{font-size:48px;margin-bottom:10px}
.rp-result-from{font-size:16px;opacity:.8;margin-bottom:6px}
.rp-result-amount{font-size:42px;font-weight:200;letter-spacing:2px;margin-bottom:4px}
.rp-result-unit{font-size:14px;opacity:.7}
.rp-result-msg{font-size:14px;margin-top:12px;opacity:.8;font-style:italic}
.rp-result-close{
  margin-top:20px;padding:10px 30px;background:rgba(255,255,255,.2);
  border:none;border-radius:20px;color:white;font-size:15px;cursor:pointer;
}

/* ====== 钱包 ====== */
.wallet-card{
  background:linear-gradient(135deg,#667eea,#764ba2);
  border-radius:16px;margin:0 16px 16px;padding:20px;color:white;
}
.wallet-label{font-size:13px;opacity:.7}
.wallet-amount{font-size:36px;font-weight:200;letter-spacing:1px;margin:6px 0}
.wallet-unit{font-size:14px;opacity:.7;font-weight:400}
.wallet-actions{display:flex;gap:10px;margin-top:14px}
.wallet-btn{
  flex:1;padding:10px;border:none;border-radius:10px;
  background:rgba(255,255,255,.2);color:white;font-size:14px;
  font-weight:600;cursor:pointer;text-align:center;
}
.wallet-btn:active{background:rgba(255,255,255,.3)}
.wallet-log{background:var(--card);border-radius:14px;margin:0 16px 16px;overflow:hidden}
.wallet-log-title{padding:14px 16px 8px;font-size:16px;font-weight:700}
.wallet-log-item{
  display:flex;align-items:center;padding:10px 16px;border-top:.5px solid var(--gl);gap:10px;
}
.wallet-log-icon{font-size:24px;flex-shrink:0}
.wallet-log-info{flex:1}
.wallet-log-name{font-size:15px;font-weight:500}
.wallet-log-time{font-size:12px;color:var(--gm);margin-top:2px}
.wallet-log-amt{font-size:16px;font-weight:600}
.wallet-log-amt.plus{color:var(--green)}
.wallet-log-amt.minus{color:var(--red)}

/* ====== 朋友圈点赞改版 ====== */
.wx-m-likes-new{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-bottom:6px;border-bottom:.5px solid var(--gl);margin-bottom:6px}
.wx-like-heart{width:14px;height:14px;flex-shrink:0;color:var(--red)}
.wx-like-names{font-size:13px;color:var(--wx-name)}
/* ====== 好感度 ====== */
.aff-page-hero{
  background:linear-gradient(135deg,#ff6b6b,#ee5a24);
  border-radius:20px;margin:0 16px 16px;padding:24px;color:white;text-align:center;
}
.aff-hero-av{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.25);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.aff-hero-av img{width:100%;height:100%;object-fit:cover}
.aff-hero-name{font-size:20px;font-weight:700}
.aff-hero-val{font-size:48px;font-weight:200;letter-spacing:2px;margin:8px 0 4px}
.aff-hero-label{font-size:14px;opacity:.8}
.aff-bar-wrap{margin:0 16px 16px;background:var(--card);border-radius:14px;padding:16px}
.aff-bar-title{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between}
.aff-bar-track{height:12px;background:var(--gl);border-radius:6px;overflow:hidden}
.aff-bar-fill{height:100%;border-radius:6px;transition:width 1s ease-out}
.aff-bar-fill.cold{background:linear-gradient(90deg,#74b9ff,#0984e3)}
.aff-bar-fill.warm{background:linear-gradient(90deg,#fdcb6e,#e17055)}
.aff-bar-fill.hot{background:linear-gradient(90deg,#e17055,#d63031)}
.aff-bar-fill.love{background:linear-gradient(90deg,#fd79a8,#e84393)}
.aff-milestones{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--gm)}
.aff-effects{background:var(--card);border-radius:14px;margin:0 16px 16px;padding:16px}
.aff-effects-title{font-size:15px;font-weight:600;margin-bottom:10px}
.aff-effect-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:.5px solid var(--gl);font-size:14px}
.aff-effect-row:last-child{border:none}
.aff-effect-name{color:var(--gd)}
.aff-effect-val{font-weight:600}
.aff-history{background:var(--card);border-radius:14px;margin:0 16px 16px;padding:16px}
.aff-history-title{font-size:15px;font-weight:600;margin-bottom:10px}
.aff-history-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:.5px solid var(--gl);font-size:13px}
.aff-history-item:last-child{border:none}
.aff-change{font-weight:700;width:36px;text-align:center;flex-shrink:0}
.aff-change.up{color:var(--green)}
.aff-change.down{color:var(--red)}
.aff-change.zero{color:var(--gm)}
.aff-reason{flex:1;color:var(--gd)}
.aff-htime{color:var(--gm);font-size:11px;flex-shrink:0}

/* 好感度总览 */
.aff-overview-card{
  background:var(--card);border-radius:14px;margin:0 16px 12px;
  padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;
}
.aff-overview-card:active{opacity:.8}
.aff-ov-info{flex:1}
.aff-ov-name{font-size:16px;font-weight:600}
.aff-ov-label{font-size:13px;color:var(--gm);margin-top:2px}
.aff-ov-bar{height:6px;background:var(--gl);border-radius:3px;margin-top:6px;overflow:hidden}
.aff-ov-fill{height:100%;border-radius:3px}
.aff-ov-val{font-size:22px;font-weight:700;flex-shrink:0;width:44px;text-align:center}

/* 心声页好感度 */
.heart-aff{
  display:flex;align-items:center;gap:8px;margin:12px 0;
  padding:10px;background:var(--bg);border-radius:10px;
}
.heart-aff-bar{flex:1;height:8px;background:var(--gl);border-radius:4px;overflow:hidden}
.heart-aff-fill{height:100%;border-radius:4px}
.heart-aff-val{font-size:14px;font-weight:700;flex-shrink:0}
.heart-aff-label{font-size:12px;color:var(--gm)}
/* ====== 关系网 ====== */
.rel-page-desc{padding:0 16px 12px;font-size:13px;color:var(--gm);line-height:1.5}
.rel-card{background:var(--card);border-radius:14px;margin:0 16px 12px;overflow:hidden}
.rel-card-header{padding:14px 16px;display:flex;align-items:center;gap:12px}
.rel-card-info{flex:1}
.rel-card-name{font-size:16px;font-weight:600}
.rel-card-count{font-size:13px;color:var(--gm);margin-top:2px}
.rel-card-arrow{color:var(--gm);font-size:16px;transition:transform .3s;cursor:pointer}
.rel-card-arrow.open{transform:rotate(90deg)}
.rel-card-body{display:none;border-top:.5px solid var(--gl);padding:10px 16px}
.rel-card-body.open{display:block}
.rel-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid var(--gl)}
.rel-item:last-child{border:none}
.rel-item-av{width:32px;height:32px;border-radius:50%;background:var(--gl);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gm);flex-shrink:0}
.rel-item-av img{width:100%;height:100%;object-fit:cover}
.rel-item-name{flex:1;font-size:14px;font-weight:500}
.rel-item-type{font-size:12px;color:var(--blue);background:rgba(0,122,255,.08);padding:2px 8px;border-radius:8px}
.rel-item-del{color:var(--red);font-size:16px;cursor:pointer;padding:4px}
.rel-add-row{display:flex;gap:8px;margin-top:10px}
.rel-add-sel{flex:1;padding:8px;border:1px solid var(--gl);border-radius:8px;font-size:14px;background:var(--card);color:var(--b)}
.rel-add-btn{padding:8px 14px;background:var(--blue);color:white;border:none;border-radius:8px;font-size:14px;cursor:pointer}

/* 关系网可视化 */
.rel-vis{margin:0 16px 16px;background:var(--card);border-radius:14px;padding:16px;min-height:200px;position:relative;overflow:hidden}
.rel-vis-title{font-size:15px;font-weight:600;margin-bottom:12px}
.rel-vis-canvas{position:relative;width:100%;height:300px}
.rel-vis-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;transition:transform .2s;z-index:2;
}
.rel-vis-node:active{transform:scale(.9)}
.rel-vis-node-av{width:40px;height:40px;border-radius:50%;background:var(--gl);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gm);border:2px solid var(--card);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.rel-vis-node-av img{width:100%;height:100%;object-fit:cover}
.rel-vis-node-name{font-size:11px;font-weight:600;max-width:60px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel-vis-me{z-index:3}
.rel-vis-me .rel-vis-node-av{border-color:var(--blue);box-shadow:0 2px 12px rgba(0,122,255,.3)}
.rel-vis-line{position:absolute;z-index:1;pointer-events:none}
.rel-vis-line-label{position:absolute;font-size:10px;color:var(--gm);background:var(--card);padding:1px 4px;border-radius:4px;z-index:1}
/* ====== 生日特效 ====== */
.birthday-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;
  pointer-events:none;overflow:hidden;
}
.birthday-overlay.active{pointer-events:auto}
.confetti{
  position:absolute;width:10px;height:10px;border-radius:2px;
  animation:confettiFall 3s ease-in forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}
.birthday-banner{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,#ff6b6b,#ee5a24,#fdcb6e);
  border-radius:20px;padding:30px;text-align:center;color:white;
  z-index:9999;animation:bdPop .5s ease-out;
  box-shadow:0 10px 40px rgba(0,0,0,.3);max-width:300px;width:90%;
}
@keyframes bdPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.bd-icon{font-size:48px;margin-bottom:10px}
.bd-title{font-size:22px;font-weight:700;margin-bottom:6px}
.bd-sub{font-size:14px;opacity:.8}
.bd-close{margin-top:16px;padding:10px 24px;background:rgba(255,255,255,.25);border:none;border-radius:14px;color:white;font-size:15px;cursor:pointer}

/* 生日设置 */
.bd-type-row{display:flex;gap:8px;margin-bottom:8px}
.bd-type-btn{
  flex:1;padding:8px;border:1.5px solid var(--gl);border-radius:8px;
  text-align:center;font-size:14px;cursor:pointer;background:var(--card);color:var(--b);
}
.bd-type-btn.active{border-color:var(--blue);background:rgba(0,122,255,.05);color:var(--blue)}
/* ====== 纪念日 ====== */
.anni-page-hero{
  background:linear-gradient(135deg,#a18cd1,#fbc2eb);
  border-radius:20px;margin:0 16px 16px;padding:24px;color:white;text-align:center;
}
.anni-hero-days{font-size:48px;font-weight:200;letter-spacing:2px;margin:8px 0 4px}
.anni-hero-label{font-size:14px;opacity:.8}
.anni-card{background:var(--card);border-radius:14px;margin:0 16px 12px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.anni-card-icon{font-size:28px;flex-shrink:0}
.anni-card-info{flex:1}
.anni-card-name{font-size:16px;font-weight:600}
.anni-card-date{font-size:13px;color:var(--gm);margin-top:2px}
.anni-card-countdown{font-size:15px;font-weight:700;flex-shrink:0}
.anni-card-countdown.today{color:var(--red)}
.anni-card-countdown.soon{color:var(--orange)}
.anni-card-countdown.normal{color:var(--blue)}
.anni-card-acts{display:flex;gap:8px;flex-shrink:0}
.anni-card-acts span{font-size:14px;cursor:pointer;padding:4px}
.anni-add-section{padding:0 16px;margin-top:8px}
.anni-icon-opt{
  font-size:24px;padding:6px;cursor:pointer;border-radius:8px;
  border:2px solid transparent;transition:all .15s;
}
.anni-icon-opt:active{transform:scale(.9)}
.anni-icon-opt.sel{border-color:var(--blue);background:rgba(0,122,255,.08)}/* ====== 红包领取动画 ====== */
.rp-open-anim{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:450;
  background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  animation:rpAnimFadeIn .3s ease;
}
@keyframes rpAnimFadeIn{from{opacity:0}to{opacity:1}}
.rp-open-card{
  width:260px;background:linear-gradient(180deg,#E84118,#C23616,#A01010);
  border-radius:20px;padding:30px 20px;text-align:center;color:white;
  position:relative;overflow:hidden;
}
.rp-open-icon{font-size:60px;animation:rpOpenBounce .6s ease-out}
@keyframes rpOpenBounce{0%{transform:scale(0) rotate(-30deg)}50%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.rp-open-from{font-size:15px;opacity:.8;margin-top:10px}
.rp-open-msg{font-size:14px;opacity:.6;margin-top:6px;font-style:italic}
.rp-open-amount{font-size:48px;font-weight:200;letter-spacing:2px;margin:16px 0 4px;animation:rpAmtIn .5s ease-out .3s both}
@keyframes rpAmtIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.rp-open-unit{font-size:14px;opacity:.7}
.rp-open-btn{
  margin-top:20px;padding:12px 30px;background:rgba(255,255,255,.2);
  border:none;border-radius:20px;color:white;font-size:16px;font-weight:600;
  cursor:pointer;animation:rpBtnIn .4s ease-out .5s both;
}
@keyframes rpBtnIn{from{opacity:0}to{opacity:1}}
.rp-open-confetti{position:absolute;width:8px;height:8px;border-radius:2px;animation:rpConfetti 1s ease-out forwards}
@keyframes rpConfetti{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-100px) scale(0);opacity:0}}
#rpOpenAnim{position:fixed;top:0;left:0;right:0;bottom:0;z-index:500}

/* ====== 游戏系统 ====== */
.game-bar{
  padding:8px 12px;background:var(--blue);color:white;
  display:none;align-items:center;justify-content:space-between;
  font-size:14px;font-weight:500;flex-shrink:0;
}
.game-bar.active{display:flex}
.game-bar-info{display:flex;align-items:center;gap:6px}
.game-bar-end{padding:4px 12px;background:rgba(255,255,255,.25);border:none;border-radius:8px;color:white;font-size:13px;cursor:pointer}
.game-bar-end:active{background:rgba(255,255,255,.4)}
.game-card{
  background:var(--card);border-radius:14px;padding:16px;margin:4px 0;
  border:1px solid var(--gl);text-align:center;
}
.game-card-title{font-size:15px;font-weight:700;margin-bottom:10px}
.game-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.game-btn{
  padding:10px 18px;border:none;border-radius:10px;font-size:15px;
  font-weight:600;cursor:pointer;background:var(--blue);color:white;
}
.game-btn:active{opacity:.8}
.game-btn.rps{font-size:28px;padding:12px 20px;background:var(--gl);color:var(--b)}
.game-btn.rps:active{background:var(--blue);color:white}
.game-result{
  text-align:center;padding:12px;margin:4px 0;border-radius:14px;font-size:15px;font-weight:600;
}
.game-result.win{background:rgba(52,199,89,.1);color:var(--green)}
.game-result.lose{background:rgba(255,59,48,.1);color:var(--red)}
.game-result.draw{background:rgba(255,149,0,.1);color:var(--orange)}
.game-score{font-size:13px;color:var(--gm);margin-top:4px;font-weight:400}
.game-submenu{
  position:absolute;left:66px;bottom:0;background:var(--card);border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);overflow:hidden;display:none;z-index:11;min-width:170px;
}
.game-submenu.active{display:block}
.game-submenu-item{padding:13px 16px;font-size:15px;cursor:pointer;border-bottom:.5px solid var(--gl);color:var(--b)}
.game-submenu-item:last-child{border-bottom:none}
.game-submenu-item:active{background:var(--gl)}
.bet-modal-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.bet-btn{
  padding:8px 16px;border:1.5px solid var(--gl);border-radius:10px;
  font-size:15px;cursor:pointer;background:var(--card);color:var(--b);
}
.bet-btn:active,.bet-btn.sel{border-color:var(--blue);background:rgba(0,122,255,.05);color:var(--blue)}

/* ====== 宠物系统 ====== */
.pet-card{
  background:var(--card);border-radius:16px;margin:0 16px 16px;padding:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);position:relative;overflow:hidden;
}
.pet-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pet-avatar{
  width:60px;height:60px;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:32px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.05);
}
.pet-info{flex:1}
.pet-name{font-size:18px;font-weight:700;display:flex;align-items:center;gap:6px}
.pet-level{font-size:11px;background:var(--blue);color:white;padding:2px 6px;border-radius:6px;font-weight:600}
.pet-type{font-size:13px;color:var(--gm);margin-top:2px}
.pet-stats{display:flex;flex-direction:column;gap:8px}
.pet-stat-row{display:flex;align-items:center;gap:8px;font-size:13px}
.pet-stat-icon{width:20px;text-align:center}
.pet-stat-bar{flex:1;height:8px;background:var(--gl);border-radius:4px;overflow:hidden}
.pet-stat-fill{height:100%;border-radius:4px;transition:width .3s,background .3s}
.pet-stat-fill.food{background:var(--orange)}
.pet-stat-fill.clean{background:var(--blue)}
.pet-stat-fill.mood{background:var(--red)}
.pet-stat-val{width:30px;text-align:right;font-weight:600;font-size:12px;color:var(--gm)}
.pet-warning{
  background:rgba(255,59,48,.1);color:var(--red);padding:8px 12px;
  border-radius:8px;font-size:13px;margin-top:12px;display:none;
}
.pet-warning.show{display:block}
.pet-owners{display:flex;align-items:center;gap:4px;margin-top:16px;padding-top:12px;border-top:.5px solid var(--gl);font-size:12px;color:var(--gm)}
.pet-owner-av{width:20px;height:20px;border-radius:50%;background:var(--gl);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:10px}
.pet-owner-av img{width:100%;height:100%;object-fit:cover}

/* 领养/互动弹窗 */
.pet-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.pet-type-item{
  background:var(--bg);border:2px solid transparent;border-radius:12px;
  padding:12px 8px;text-align:center;cursor:pointer;transition:all .2s;
}
.pet-type-item.sel{border-color:var(--blue);background:rgba(0,122,255,.05)}
.pet-type-icon{font-size:32px;margin-bottom:4px}
.pet-type-name{font-size:13px;font-weight:600}
.pet-type-desc{font-size:10px;color:var(--gm);margin-top:2px;line-height:1.3}

.pet-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.pet-action-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 8px;background:var(--bg);border-radius:16px;cursor:pointer;
  border:none;color:var(--b);font-family:inherit;
}
.pet-action-btn:active{transform:scale(.95)}
.pet-action-icon{font-size:28px}
.pet-action-name{font-size:13px;font-weight:600}
.pet-action-cost{font-size:11px;color:var(--gm)}

@keyframes bottleFloat{
  0%,100%{transform:translateY(0) rotate(-10deg)}
  50%{transform:translateY(-15px) rotate(10deg)}
}

body:not(.no-sb) .main-header{padding-top:calc(var(--st-h) + 10px) !important}

/* 修复主页面头部重叠与样式 */
.main-header {
    margin-bottom: 12px; /* 强行把下面的搜索框、列表往下推，防止重叠 */
}
/* 单独取消动态页头部的下边距，完美解决封面图缝隙问题 */
#page-moments .main-header {
    margin-bottom: 0 !important;
}
.main-header h1 {
    margin: 0 !important; /* 清除 h1 自带的巨大外边距 */
    line-height: 1.2;
}

/* 顺便修复 iOS 状态栏的背景延伸（因为我们把 page-header 换成了 main-header） */
.main-header::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 80px;
    background: inherit;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    z-index: -1;
    pointer-events: none;
}

/* 文本框容器，用于定位放大按钮 */
.textarea-container {
  position: relative;
  width: 100%;
}

/* 放大按钮：小巧、半透明、不突兀 */
.textarea-expand-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--gl);
  transition: all 0.2s;
  z-index: 2;
}
.textarea-expand-icon:active { transform: scale(0.9); background: var(--gl); }
.textarea-expand-icon svg { width: 14px; height: 14px; color: var(--blue); opacity: 0.8; }

/* 浮窗编辑器：精致的卡片感 */
.editor-modal {
  background: var(--card);
  border-radius: 24px;
  width: 92%;
  max-width: 500px;
  height: 70vh; /* 高度占屏幕70%，不至于顶满 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: editorPop 0.3s cubic-bezier(0.17, 0.89, 0.32, 1.28);
}
@keyframes editorPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#editorTextArea {
  flex: 1;
  width: 100%;
  padding: 20px;
  border: none;
  outline: none;
  font-size: 16px;
  line-height: 1.7;
  font-family: inherit;
  resize: none;
  background: transparent;
  color: var(--b);
}

/* 视频通话设置按钮点击效果 */
.vcall-header div:active { transform: scale(0.9); opacity: 0.8; }

/* 视频通话背景层级修正 */
#vCallBg {
  filter: blur(6px); /* 默认模糊度 */
  transform: scale(1.1); /* 防止边缘白边 */
}

/* 视频通话内容遮罩优化，确保文字清晰 */
#vCallStream {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* ====== 智能翻译专项 UI ====== */
.tr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  width: 30px;
  height: 20px;
  background: rgba(0, 122, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 0.5px solid rgba(0, 122, 255, 0.1);
  color: var(--blue);
}
.tr-badge:active { transform: scale(0.9); }
.tr-badge.active { background: var(--blue); color: white; border-color: var(--blue); }
.tr-badge svg { width: 14px; height: 14px; }

.tr-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.tr-wrapper.show { grid-template-rows: 1fr; }

.tr-content {
  overflow: hidden;
  font-size: 13px;
  color: var(--gm);
  line-height: 1.6;
  font-style: italic;
}
.tr-wrapper.show .tr-content {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 0.5px solid rgba(0,0,0,0.05);
}

/* 视频通话翻译字幕 */
.vcall-trans-line {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(255,255,255,0.2);
}

/* ====== 网易云歌词视图 ====== */
.wyy-fs-view-disc {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 60px; transition: 0.4s ease; width: 100%;
}
.wyy-fs-view-lyrics {
  position: absolute; inset: 0; 
  flex-direction: column; padding: 40px 30px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* 顶部和底部渐变透明，制造淡入淡出效果 */
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.wyy-fs-view-lyrics::-webkit-scrollbar { display: none; }

.wyy-lyric-container {
  padding: 150px 0; /* 上下留白，确保第一句和最后一句能滚到中间 */
  transition: transform 0.3s ease-out; /* 平滑滚动动画 */
}

.lyric-line {
  color: rgba(255,255,255,0.4); 
  font-size: 16px; 
  line-height: 2.2;
  text-align: center; 
  transition: all 0.3s ease;
  min-height: 35px;
}
.lyric-line.active {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  transform: scale(1.05);
}

/* ====== 网易云全屏播放器优化 ====== */
.wyy-fs-swipe-container {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.wyy-fs-page {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 还原精致唱针 */
.wyy-fs-needle {
  width: 100px; height: 140px; position: absolute; top: 10px; left: 50%;
  transform-origin: 15px 15px; transform: rotate(-30deg);
  transition: transform 0.5s ease; z-index: 10;
  pointer-events: none;
}
.wyy-fs-needle.playing { transform: rotate(0deg); }

.wyy-fs-disc-wrap {
  margin-top: 70px;
  display: flex; justify-content: center; align-items: center;
  width: 100%;
  cursor: pointer;
}

/* 歌词容器 */
#wyyViewLyrics {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  padding: 0 30px;
}
#wyyViewLyrics::-webkit-scrollbar { display: none; }

.wyy-lyric-container {
  padding: 50vh 0; /* 确保首尾都能滚到中间 */
  transition: transform 0.3s ease-out;
  width: 100%;
  cursor: pointer;
}

/* 静态歌词模式（无时间轴时，取消平滑滚动，允许手动滑动） */
.wyy-lyric-container.static-mode {
  padding: 40px 0;
  transition: none;
  transform: translateY(0) !important;
}

.lyric-line {
  color: rgba(255,255,255,0.4); 
  font-size: 16px; 
  line-height: 2.2;
  text-align: center; 
  transition: all 0.3s ease;
  min-height: 35px;
}
.lyric-line.active {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  transform: scale(1.05);
}

/* 歌词编辑按钮 (右上角) */
.wyy-lyric-edit-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  z-index: 20;
  transition: background 0.2s;
}
.wyy-lyric-edit-btn:active { background: rgba(255,255,255,0.3); }
.wyy-lyric-edit-btn svg { width: 18px; height: 18px; }