/* ============================================================
   social.css — 社交扩展：在线状态 / 聊天主题 / 装扮商店 /
                人设广场 / 状态墙 / 戳一戳动画 / 互动等级
   设计令牌沿用 base.css：#07C160 / #95EC69 / #EDEDED
   ============================================================ */

/* ============================================================
   1. 在线状态小圆点（挂在会话列表 / 通讯录头像上）
   ============================================================ */
.wx-status-dot{
  position:absolute;
  width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 2px rgba(0,0,0,.15);
  z-index:3;
}
/* 让头像容器可定位 */
.chat-row, .ct-row{ position:relative; }
.chat-row .chat-avatar, .ct-row .ct-avatar{ position:relative; }
/* 圆点锚定在头像右下角 */
.chat-row .wx-status-dot{ right:-3px; bottom:-3px; }
.ct-row .wx-status-dot{ right:-3px; bottom:-3px; }

.wx-status-dot.s-online{ background:#07C160; }
.wx-status-dot.s-busy{ background:#FA5151; }
.wx-status-dot.s-dnd{ background:#F7B500; }
.wx-status-dot.s-invisible{ background:#C7C7CC; }
.wx-status-dot.s-offline{ background:#D8D8D8; }

/* 状态文字小胶囊（状态墙 / 个人面板用） */
.wx-status-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;line-height:18px;padding:1px 9px;border-radius:9px;
  background:#F2F2F2;color:#666;
}
.wx-status-chip i{ width:7px;height:7px;border-radius:50%; }
.wx-status-chip.t-online i{ background:#07C160; }
.wx-status-chip.t-busy i{ background:#FA5151; }
.wx-status-chip.t-dnd i{ background:#F7B500; }
.wx-status-chip.t-invisible i{ background:#C7C7CC; }
.wx-status-chip.t-offline i{ background:#D8D8D8; }

/* ============================================================
   2. 在线状态面板（个人状态选择）
   ============================================================ */
.st-panel{
  background:#fff;border-radius:12px;margin:10px;overflow:hidden;
}
.st-panel-title{
  padding:14px 15px 6px;font-size:13px;color:var(--wx-text-sub);
}
.st-opt{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;position:relative;
}
.st-opt + .st-opt::before{
  content:"";position:absolute;left:60px;right:0;top:0;height:.5px;background:var(--wx-line-soft);
}
.st-opt .st-dot{ width:12px;height:12px;border-radius:50%;flex:none; }
.st-opt .st-name{ flex:1;font-size:16px; }
.st-opt .st-check{ color:var(--wx-green);font-size:18px;opacity:0; }
.st-opt.on .st-check{ opacity:1; }
.st-opt:active{ background:#F2F2F2; }
.st-custom-input{
  margin:0 15px 14px;padding:9px 12px;background:#F4F4F4;
  border-radius:8px;font-size:15px;width:calc(100% - 30px);
}

/* ============================================================
   3. 好友状态墙
   ============================================================ */
.sw-wrap{ flex:1;overflow-y:auto;padding-bottom:20px; }
.sw-me{
  margin:10px;background:#fff;border-radius:12px;
  padding:14px 15px;display:flex;align-items:center;gap:12px;
}
.sw-me img{ width:48px;height:48px;border-radius:8px; }
.sw-me .sw-mname{ font-size:16px;font-weight:600; }
.sw-me .sw-mstatus{ font-size:13px;color:var(--wx-text-sub);margin-top:2px; }

.sw-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:0 10px;
}
.sw-card{
  background:#fff;border-radius:12px;padding:14px 12px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;
}
.sw-card .sw-cav{
  position:relative;width:56px;height:56px;
}
.sw-card .sw-cav img{ width:56px;height:56px;border-radius:50%;object-fit:cover; }
.sw-card .sw-cav .wx-status-dot{ right:-2px;bottom:-2px; }
.sw-card .sw-cname{ font-size:15px;font-weight:500; }
.sw-card .sw-csig{
  font-size:12px;color:var(--wx-text-sub);text-align:center;
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sw-card .sw-cact{
  margin-top:4px;font-size:12px;color:var(--wx-green);
  border:1px solid var(--wx-green);border-radius:12px;
  padding:2px 12px;
}
.sw-card:active{ background:#F7F7F7; }

/* ============================================================
   4. 人设广场
   ============================================================ */
.pm-wrap{ flex:1;overflow-y:auto;padding-bottom:24px; }
.pm-banner{
  margin:10px;background:linear-gradient(135deg,#07C160 0%,#06AD56 100%);
  border-radius:12px;padding:18px 16px;color:#fff;
}
.pm-banner h2{ font-size:18px;margin-bottom:4px; }
.pm-banner p{ font-size:13px;opacity:.9; }
.pm-search{
  margin:10px;background:#fff;border-radius:8px;
  padding:8px 12px;display:flex;align-items:center;gap:8px;
}
.pm-search input{ flex:1;font-size:15px; }
.pm-list{ padding:0 10px; }
.pm-card{
  background:#fff;border-radius:12px;margin-bottom:10px;
  padding:14px;display:flex;gap:12px;align-items:center;
}
.pm-card img{
  width:54px;height:54px;border-radius:8px;object-fit:cover;flex:none;
  background:#eee;
}
.pm-info{ flex:1;min-width:0; }
.pm-name{ font-size:16px;font-weight:600;display:flex;align-items:center;gap:6px; }
.pm-tag{
  font-size:10px;color:var(--wx-green);background:rgba(7,193,96,.1);
  padding:1px 6px;border-radius:4px;font-weight:400;
}
.pm-sig{
  font-size:13px;color:var(--wx-text-sub);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pm-pers{ font-size:12px;color:#999;margin-top:2px; }
.pm-actions{ display:flex;flex-direction:column;gap:6px;flex:none; }
.pm-btn{
  font-size:13px;padding:5px 12px;border-radius:14px;
  border:1px solid var(--wx-green);color:var(--wx-green);
  background:#fff;white-space:nowrap;
}
.pm-btn.solid{ background:var(--wx-green);color:#fff; }
.pm-btn.added{ border-color:#C7C7CC;color:#C7C7CC; }
.pm-btn:active{ opacity:.7; }

/* ============================================================
   5. 装扮商店
   ============================================================ */
.sk-wrap{ flex:1;overflow-y:auto;padding-bottom:30px; }
.sk-sec{ margin:12px 10px 0; }
.sk-sec-title{
  font-size:14px;color:var(--wx-text-sub);padding:0 4px 8px;
}
.sk-panel{ background:#fff;border-radius:12px;overflow:hidden; }
.sk-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;position:relative;
}
.sk-row + .sk-row::before{
  content:"";position:absolute;left:70px;right:0;top:0;height:.5px;background:var(--wx-line-soft);
}
.sk-row .sk-label{ flex:1;font-size:15px; }
.sk-row .sk-check{ color:var(--wx-green);font-size:18px; }

/* 头像挂件预览圆 */
.sk-frame-preview{
  width:52px;height:52px;border-radius:50%;position:relative;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.sk-frame-preview img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
}
/* 挂件样式（实际挂在头像外层） */
.frame-none{ box-shadow:none; }
.frame-star{ box-shadow:0 0 0 2px #F7B500; }
.frame-star::after{
  content:"★";position:absolute;top:-4px;right:-2px;font-size:14px;color:#F7B500;
}
.frame-flower{ box-shadow:0 0 0 2px #FF8FB1; }
.frame-flower::after{
  content:"❀";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  font-size:14px;color:#FF8FB1;
}
.frame-ring{ box-shadow:0 0 0 3px rgba(7,193,96,.6); }
.frame-neon{ box-shadow:0 0 8px 2px rgba(87,107,149,.8); }
.frame-crown::after{
  content:"♛";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:16px;color:#F7B500;
}
.frame-bear::after{
  content:"🐻";position:absolute;top:-6px;right:-2px;font-size:16px;
}

/* 气泡配色预览 */
.bubble-preview{
  width:70px;height:34px;border-radius:6px;position:relative;flex:none;
}
.bubble-preview.mine{ background:var(--wx-green-light); }
.bubble-preview.other{ background:#fff; }

/* 聊天背景缩略图 */
.sk-bg-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;
}
.sk-bg-item{
  aspect-ratio:9/14;border-radius:8px;position:relative;overflow:hidden;
  border:2px solid transparent;
}
.sk-bg-item.on{ border-color:var(--wx-green); }
.sk-bg-item .sk-bg-name{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.45);color:#fff;font-size:11px;
  text-align:center;line-height:20px;
}
.sk-bg-item .sk-bg-tick{
  position:absolute;top:4px;right:4px;width:18px;height:18px;
  background:var(--wx-green);color:#fff;border-radius:50%;
  font-size:12px;line-height:18px;text-align:center;display:none;
}
.sk-bg-item.on .sk-bg-tick{ display:block; }

/* ============================================================
   6. 戳一戳动画（全屏遮罩 + 头像放大抖动）
   ============================================================ */
.poke-overlay{
  position:fixed;inset:0;z-index:1200;
  background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.poke-avatar{
  width:120px;height:120px;border-radius:16px;object-fit:cover;
  box-shadow:0 8px 40px rgba(0,0,0,.4);
  animation:pokeShake 1s ease-in-out infinite;
}
.poke-text{
  position:absolute;bottom:22%;left:0;right:0;text-align:center;
  color:#fff;font-size:16px;letter-spacing:2px;
  animation:pokeFade 3s ease forwards;
}
@keyframes pokeShake{
  0%,100%{ transform:scale(1) rotate(0); }
  20%{ transform:scale(1.18) rotate(-6deg); }
  40%{ transform:scale(1.18) rotate(6deg); }
  60%{ transform:scale(1.12) rotate(-4deg); }
  80%{ transform:scale(1.12) rotate(4deg); }
}
@keyframes pokeFade{
  0%{ opacity:0; transform:translateY(10px); }
  20%{ opacity:1; transform:translateY(0); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

/* ============================================================
   7. 互动等级徽章
   ============================================================ */
.lv-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;padding:3px 10px;border-radius:12px;
  background:rgba(7,193,96,.1);color:var(--wx-green);
}
.lv-badge .lv-icon{ font-size:15px; }
.lv-bar{
  flex:1;height:5px;background:#EBEBEB;border-radius:3px;overflow:hidden;margin:0 10px;
}
.lv-bar i{ display:block;height:100%;background:var(--wx-green);border-radius:3px; }
.lv-row{
  display:flex;align-items:center;background:#fff;
  padding:11px 15px;
}
.lv-row .lv-label{ font-size:14px;color:var(--wx-text-sub);width:70px; }
.lv-next{ font-size:12px;color:var(--wx-text-faint); }

/* 等级图标颜色递进 */
.lv-badge.lv-spark{ background:rgba(247,181,0,.12);color:#C98A00; }
.lv-badge.lv-boat{ background:rgba(87,107,149,.12);color:#576B95; }
.lv-badge.lv-ship{ background:rgba(250,81,81,.12);color:#FA5151; }
.lv-badge.lv-soul{ background:linear-gradient(90deg,rgba(199,92,255,.15),rgba(7,193,96,.12));color:#8a3fd1; }

/* ============================================================
   8. 气泡主题（body 类切换我方气泡颜色）
   ============================================================ */
body.skin-bubble-peach .cw-row.right .cw-bubble{ background:#ffd6c2; }
body.skin-bubble-peach .cw-row.right .cw-bubble::before{ border-left-color:#ffd6c2; }
body.skin-bubble-blue .cw-row.right .cw-bubble{ background:#bcd7ff; }
body.skin-bubble-blue .cw-row.right .cw-bubble::before{ border-left-color:#bcd7ff; }
body.skin-bubble-mint .cw-row.right .cw-bubble{ background:#c2f0d2; }
body.skin-bubble-mint .cw-row.right .cw-bubble::before{ border-left-color:#c2f0d2; }
body.skin-bubble-lav .cw-row.right .cw-bubble{ background:#e3d0ff; }
body.skin-bubble-lav .cw-row.right .cw-bubble::before{ border-left-color:#e3d0ff; }
body.skin-bubble-rose .cw-row.right .cw-bubble{ background:#ffc9d6; }
body.skin-bubble-rose .cw-row.right .cw-bubble::before{ border-left-color:#ffc9d6; }
body.skin-bubble-cream .cw-row.right .cw-bubble{ background:#fff3c4; }
body.skin-bubble-cream .cw-row.right .cw-bubble::before{ border-left-color:#fff3c4; }
body.skin-bubble-graphite .cw-row.right .cw-bubble{ background:#dcdfe6; }
body.skin-bubble-graphite .cw-row.right .cw-bubble::before{ border-left-color:#dcdfe6; }
body.skin-bubble-sky .cw-row.right .cw-bubble{ background:#bfe9ff; }
body.skin-bubble-sky .cw-row.right .cw-bubble::before{ border-left-color:#bfe9ff; }
body.skin-bubble-cherry .cw-row.right .cw-bubble{ background:#ffb3c1; }
body.skin-bubble-cherry .cw-row.right .cw-bubble::before{ border-left-color:#ffb3c1; }

/* 头像挂件实际生效（挂在 .cw-avatar / 通用头像外的包裹） */
.wx-frame-wrap{ position:relative;display:inline-block; }
.wx-frame-wrap img{ display:block; }
.wx-frame-wrap.f-star::after{ content:"★";position:absolute;top:-6px;right:-6px;font-size:15px;color:#F7B500; }
.wx-frame-wrap.f-flower::after{ content:"❀";position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:15px;color:#FF8FB1; }
.wx-frame-wrap.f-ring::before{
  content:"";position:absolute;inset:-3px;border-radius:8px;
  border:2px solid rgba(7,193,96,.6);
}
.wx-frame-wrap.f-neon::before{
  content:"";position:absolute;inset:-3px;border-radius:8px;
  box-shadow:0 0 8px 2px rgba(87,107,149,.8);
}
.wx-frame-wrap.f-crown::after{ content:"♛";position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:16px;color:#F7B500; }
.wx-frame-wrap.f-bear::after{ content:"🐻";position:absolute;top:-8px;right:-6px;font-size:16px; }

/* 页面通用工具 */
.social-page{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--wx-bg);
}
.social-scroll{ flex:1;overflow-y:auto; }

/* ============================================================
   9. 补充动效与细节
   ============================================================ */

/* 状态面板弹入 */
.st-panel{ animation:wxSheetUp .25s ease; }
@keyframes wxSheetUp{ from{ transform:translateY(-12px);opacity:0; } to{ transform:translateY(0);opacity:1; } }

/* 圆点呼吸（在线） */
@keyframes wxPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(7,193,96,.45); }
  50%{ box-shadow:0 0 0 4px rgba(7,193,96,0); }
}
.wx-status-dot.s-online{ animation:wxPulse 2s infinite; }

/* 人设卡片入场 */
@keyframes pmIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.pm-card{ animation:pmIn .25s ease both; }
.pm-card:nth-child(2){ animation-delay:.03s; }
.pm-card:nth-child(3){ animation-delay:.06s; }
.pm-card:nth-child(4){ animation-delay:.09s; }
.pm-card:nth-child(5){ animation-delay:.12s; }
.pm-card:nth-child(6){ animation-delay:.15s; }
.pm-card:nth-child(7){ animation-delay:.18s; }
.pm-card:nth-child(8){ animation-delay:.21s; }

/* 状态墙卡片入场 */
@keyframes swIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
.sw-card{ animation:swIn .22s ease both; }
.sw-card:nth-child(odd){ animation-delay:.04s; }
.sw-card:nth-child(even){ animation-delay:.08s; }

/* 装扮选中态 */
.sk-row.on .sk-label{ color:var(--wx-green); }
.sk-bg-item:active{ transform:scale(.97); }
.sk-bg-item{ transition:transform .12s; }

/* 等级进度条动画 */
.lv-bar i{ transition:width .6s ease; }

/* 戳一戳遮罩淡入 */
.poke-overlay{ animation:wxFadeIn .2s; }

/* 小屏适配 */
@media (max-width:360px){
  .sw-grid{ grid-template-columns:1fr; }
  .pm-card img{ width:46px;height:46px; }
  .sk-bg-grid{ grid-template-columns:repeat(2,1fr); }
}

/* 暗黑主题下状态墙微调 */
@media (prefers-color-scheme:dark){
  .sw-card, .pm-card, .sk-panel{ background:#fff; }
}

/* 长按头像提示 */
.poke-hint{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
  background:rgba(40,40,40,.85);color:#fff;font-size:13px;
  padding:6px 14px;border-radius:14px;z-index:1100;
  animation:wxFadeIn .2s;
}

/* 等级升级提示条 */
.lv-up{
  position:fixed;left:50%;top:80px;transform:translateX(-50%);
  background:linear-gradient(90deg,#8a3fd1,#07C160);color:#fff;
  padding:8px 18px;border-radius:20px;font-size:14px;z-index:1150;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  animation:wxPop .3s;
}