/* =========================================================
   v1.5.0 好友 · 私信（互通私信）
   ---------------------------------------------------------
   与全站风格一致：复用 --card / --line / --tx / --brand 等变量，
   圆角 18px，iOS 风。三个子页：搜索 / 会话列表 / 聊天。
   ========================================================= */

/* ---------- 全屏子页容器（覆盖在 App 之上） ---------- */
.soc-page{position:fixed;inset:0;z-index:9990;background:var(--bg);display:none;flex-direction:column}
.soc-page.on{display:flex;animation:socIn .22s var(--ios-ease)}
@keyframes socIn{from{transform:translateX(22px);opacity:0}to{transform:none;opacity:1}}

/* 顶栏 */
.soc-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 12px;
  background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:2}
.soc-back{width:38px;height:38px;flex:0 0 38px;border:none;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx)}
.soc-back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.soc-back:active{transform:scale(.92)}
.soc-title{font-size:16.5px;font-weight:800;color:var(--tx);font-family:var(--sans);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soc-bar .soc-act{flex:0 0 auto;border:none;background:none;font-size:13.5px;font-weight:700;color:var(--brand);cursor:pointer;padding:8px}

/* ---------- 内容区 ---------- */
.soc-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.soc-empty{padding:70px 30px;text-align:center;color:var(--ink-3);font-size:13.5px;font-family:var(--sans);line-height:2}
.soc-empty .se-ic{font-size:44px;display:block;margin-bottom:12px;opacity:.85}

/* ---------- 搜索框 ---------- */
.soc-search{padding:14px 14px 6px}
.soc-sbox{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:11px 14px}
.soc-sbox svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round}
.soc-sbox input{flex:1;border:none;background:none;outline:none;font-size:15px;color:var(--tx);font-family:var(--sans);min-width:0}
.soc-sbox input::placeholder{color:var(--ink-3)}

/* ---------- 用户行 / 会话行 ---------- */
.soc-list{list-style:none;margin:0;padding:8px 14px 24px}
.soc-row{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--card);border-radius:18px;
  margin-bottom:10px;border:1px solid var(--line);cursor:pointer;transition:transform .12s var(--ios-ease)}
.soc-row:active{transform:scale(.985)}
.soc-ava{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden;position:relative}
.soc-ava img{width:100%;height:100%;object-fit:cover;display:block}
.soc-ava .dot{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#ef4444;color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--card)}
.soc-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.soc-name{font-size:15px;font-weight:700;color:var(--tx);font-family:var(--sans);
  display:flex;align-items:center;gap:5px;min-width:0}
.soc-name b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:8.5em}
.soc-nick{font-size:11px;font-style:normal;color:var(--ink-3);flex:0 0 auto}
.soc-last{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans)}
.soc-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}

/* 关注按钮（小尺寸，行内） */
.soc-fbtn{flex:0 0 auto;padding:7px 15px;border-radius:999px;border:none;font-size:12.5px;font-weight:800;
  cursor:pointer;font-family:var(--sans);background:linear-gradient(135deg,#667eea,#4a5fc1);color:#fff;
  transition:transform .12s var(--ios-ease)}
.soc-fbtn:active{transform:scale(.94)}
.soc-fbtn.mutual{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand)}
.soc-fbtn.done{background:var(--card);color:var(--ink-3);border:1px solid var(--line)}

/* ---------- 聊天 ---------- */
.soc-msgs{flex:1;overflow-y:auto;padding:16px 14px 8px;-webkit-overflow-scrolling:touch}
.soc-tip{text-align:center;font-size:11.5px;color:var(--ink-3);font-family:var(--sans);padding:10px 30px 16px;line-height:1.8}
.soc-tip .tt-box{display:inline-block;background:var(--brand-soft);color:var(--brand);border-radius:12px;
  padding:9px 14px;font-size:11.5px;line-height:1.7;font-weight:600;max-width:100%}
.soc-msg{display:flex;margin-bottom:12px;align-items:flex-end;gap:8px}
.soc-msg.me{flex-direction:row-reverse}
.soc-bub{max-width:74%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.55;color:var(--tx);
  background:var(--card);border:1px solid var(--line);word-break:break-word;font-family:var(--sans);position:relative}
.soc-msg.me .soc-bub{background:linear-gradient(135deg,#667eea,#4a5fc1);color:#fff;border-color:transparent;
  border-bottom-right-radius:5px}
.soc-msg.you .soc-bub{border-bottom-left-radius:5px}
.soc-bub .meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:3px;
  font-size:10px;opacity:.72;font-family:var(--sans)}
.soc-tick{font-size:12px;letter-spacing:-2px;font-weight:800;line-height:1}
.soc-tick.read{color:#38bdf8;letter-spacing:-2px}
.soc-msg.you .soc-tick{display:none}

/* 输入栏 */
.soc-input{flex:0 0 auto;display:flex;align-items:flex-end;gap:9px;padding:10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);
  border-top:1px solid var(--line);background:var(--bg)}
.soc-input textarea{flex:1;resize:none;max-height:110px;min-height:42px;padding:11px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);color:var(--tx);font-size:14.5px;font-family:var(--sans);
  outline:none;line-height:1.4;box-sizing:border-box}
.soc-input textarea:disabled{opacity:.55}
.soc-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#667eea,#4a5fc1);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .12s var(--ios-ease)}
.soc-send:active{transform:scale(.9)}
.soc-send:disabled{background:var(--line);cursor:not-allowed}
.soc-send svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 我的页入口行的小红点 */
.mi-dot{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;
  font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}

/* ---------- v1.6.0 骨架屏（会话列表加载中） ---------- */
.soc-skel{pointer-events:none}
.soc-skel .sk{
  background:linear-gradient(90deg,var(--line) 25%,var(--bg-soft) 37%,var(--line) 63%);
  background-size:400% 100%;animation:socShimmer 1.3s ease infinite;border-radius:8px;
}
.soc-skel .soc-ava.sk{width:46px;height:46px;border-radius:50%}
.soc-skel .sk-t{height:13px;width:38%;margin:3px 0 7px}
.soc-skel .sk-s{height:11px;width:72%}
@keyframes socShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* v1.6.0 侧滑返回：页面跟手位移时禁用内部滚动干扰 */
.soc-page{will-change:transform;touch-action:pan-y}

/* v1.6.3 侧滑返回加固
   ---------------------------------------------------------
   安卓系统的「边缘返回手势」会抢在网页之前被系统消费，
   导致侧滑直接退出 App。这里做两件事：
     ① 在页面左边缘铺一条「手势热区」，用 touch-action:none +
        overscroll-behavior 抑制系统/浏览器的横向回退行为，
        把横向触摸优先让给我们的 bindSwipeBack()；
     ② 键盘弹出时不占位（避免遮住输入框）。
   注意：热区 pointer-events 必须是 auto 才能收到 touch 事件，
   但内部元素需可点击，故热区只做 10px 宽的窄条。 */
.soc-edge{
  position:fixed;top:0;left:0;bottom:0;width:20px;z-index:9995;
  touch-action:none;overscroll-behavior-x:contain;
  background:transparent;
}
.soc-page{overscroll-behavior-x:contain}

/* =========================================================
   v1.7.2 名片页
   ---------------------------------------------------------
   从「找人」/ 会话列表 / 聊天页顶栏点头像或昵称进入。
   沿用全站 CSS 变量，圆角 18px，iOS 风。
   ========================================================= */
.card-wrap{padding:8px 14px calc(env(safe-area-inset-bottom,0px) + 30px)}
.card-hero{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px 18px 20px;background:var(--card);border:1px solid var(--line);
  border-radius:22px;position:relative;overflow:hidden}
.card-hero::before{content:'';position:absolute;top:-70px;left:50%;transform:translateX(-50%);
  width:230px;height:150px;border-radius:50%;background:radial-gradient(closest-side,var(--brand-soft),transparent);
  pointer-events:none}
.card-ava.big{width:82px;height:82px;flex:0 0 82px;border-radius:50%;font-size:42px;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden;
  box-shadow:0 8px 22px rgba(43,127,212,.22)}
.card-ava.big img{width:100%;height:100%;object-fit:cover;display:block}
.card-nm{display:flex;align-items:center;gap:5px;position:relative;z-index:1;max-width:100%}
.card-nm b{font-size:19px;font-weight:800;color:var(--tx);font-family:var(--sans);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11em}
.card-uid{font-size:12.5px;color:var(--ink-3);font-family:var(--sans);position:relative;z-index:1}
.card-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:11px}
.card-cell{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:13px 6px;text-align:center;display:flex;flex-direction:column;gap:3px}
.card-cell b{font-size:17px;font-weight:800;color:var(--brand);font-family:var(--sans)}
.card-cell span{font-size:11.5px;color:var(--ink-3);font-family:var(--sans)}
.card-sec{margin-top:11px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:15px 16px}
.card-sec-t{font-size:13px;font-weight:800;color:var(--ink-2);font-family:var(--sans);
  margin-bottom:9px;letter-spacing:.3px}
.card-line{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;font-size:13.5px;font-family:var(--sans);color:var(--ink-2)}
.card-line + .card-line{border-top:1px solid var(--line)}
.card-line b{font-weight:700;color:var(--tx)}
.card-acts{display:flex;gap:10px;margin-top:13px}
.card-btn{flex:1;height:47px;border-radius:15px;border:1px solid var(--line);
  background:var(--card);color:var(--tx);font-size:15px;font-weight:800;font-family:var(--sans);
  cursor:pointer;transition:transform .12s var(--ios-ease)}
.card-btn:active{transform:scale(.97)}
.card-btn.primary{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#667eea,#4a5fc1)}
.card-btn.primary.done{background:var(--bg-soft);color:var(--ink-2);border-color:var(--line)}
.card-btn.primary.mutual{background:linear-gradient(135deg,#38bdf8,#2b7fd4)}
.card-self{flex:1;text-align:center;padding:14px;font-size:13px;color:var(--ink-3);
  font-family:var(--sans);background:var(--bg-soft);border-radius:15px}
/* 顶栏可点的昵称（聊天页 → 名片） */
.soc-title[style*="cursor"]{transition:opacity .12s var(--ios-ease)}
.soc-title[style*="cursor"]:active{opacity:.6}