/* 福利吧门户 · 微信群分享 Tab（网盘 / 购物 / 流量卡）—— 精修微信聊天样式
   浅灰聊天底 + 白气泡 + 胶囊时间条；主色沿用站点红（--tb--main / #ff5e52）。深色跟随站点的 html.darking。 */

/* ---------- Tab 栏（替换原「最新福利」标题行） ---------- */
.wxs-tabs.excerpts-title{display:flex;align-items:flex-end;gap:28px;margin-bottom:0;padding:17px 20px 0;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--tb--line);border-radius:6px 6px 0 0;background-color:var(--tb--white)}
.wxs-tabs::-webkit-scrollbar{display:none}
.wxs-tab{position:relative;flex:none;display:inline-block;padding:0 0 12px;font-size:17px;line-height:1.4;color:var(--tb--gray);text-decoration:none;transition:color .15s}
.wxs-tab:hover{color:var(--tb--main)}
.wxs-tab.on{color:var(--tb--base);font-weight:bold}
.wxs-tab:after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:3px;border-radius:3px;background-color:var(--tb--main);transition:left .2s,right .2s}
.wxs-tab.on:after{left:0;right:0}
.wxs-badge{display:inline-block;min-width:16px;margin-left:4px;padding:0 5px;box-sizing:border-box;border-radius:8px;background:#ff5e52;color:#fff;font-size:11px;font-style:normal;font-weight:normal;line-height:16px;text-align:center;vertical-align:5px;box-shadow:0 1px 3px rgba(255,94,82,.35)}
.wxs-badge[hidden]{display:none}
.wxs-tab:focus-visible,.wxs-copy:focus-visible,.wxs-bub a:focus-visible,.wxs-img:focus-visible,.wxs-hot-i:focus-visible,.wxs-loadmore:focus-visible{outline:2px solid var(--tb--main);outline-offset:2px}

/* ---------- 聊天区 ---------- */
.wxs-pane[hidden],.wxs-pane [hidden]{display:none!important}
.wxs-chat{padding:4px 20px 18px;border-radius:0 0 6px 6px;background:#f3f4f6}
/* 时间条：居中灰色小胶囊 */
.wxs-time{display:table;margin:20px auto 6px;padding:0 10px;border-radius:10px;background:rgba(0,0,0,.05);font-size:12px;line-height:20px;color:#8a8f99}
.wxs-m{display:flex;align-items:flex-start;gap:10px;margin:14px 0}
.wxs-av{flex:none;display:block;width:40px;height:40px;border-radius:6px;object-fit:cover;background:#d5d8dc;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wxs-mb{min-width:0;flex:0 1 auto;max-width:560px}
.wxs-nick{margin-bottom:4px;font-size:12px;line-height:16px;color:#9a9ea6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wxs-bub{display:inline-block;max-width:100%;box-sizing:border-box;padding:9px 13px;border-radius:4px 12px 12px 12px;background:#fff;color:#1f2329;font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(0,0,0,.05);-webkit-user-select:text;user-select:text}
.wxs-bub a{color:#3e5a9e;text-decoration:none}
.wxs-bub a:hover{text-decoration:underline}
.wxs-copy{display:inline-block;margin:0 0 0 6px;padding:0 9px;border:0;border-radius:10px;background:#eef1f6;color:#3e5a9e;font-size:12px;line-height:20px;vertical-align:1px;cursor:pointer;white-space:nowrap;transition:background .15s}
.wxs-copy:hover{background:#e2e7f0}
.wxs-copy.ok{background:#27ae60;color:#fff}
.wxs-img{display:block;width:160px;overflow:hidden;border-radius:8px;background:#e6e8eb;cursor:zoom-in;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wxs-img img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;transition:opacity .15s}
.wxs-img:hover img{opacity:.92}
/* 视频：封面 + 居中播放按钮，点了弹层播放 */
.wxs-vid{position:relative;display:block;width:160px;overflow:hidden;border-radius:8px;background:#1f2329;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wxs-vid img{display:block;width:100%;height:100%;object-fit:cover}
.wxs-play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(0,0,0,.5)}
.wxs-play:after{content:"";position:absolute;left:17px;top:12px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.wxs-vid:hover .wxs-play{background:rgba(0,0,0,.65)}
/* 搞笑图文：图片 / 视频上方的说明文字（黄瓜吧帖子标题），和图片同宽 */
.wxs-cap{width:160px;margin-bottom:4px;font-size:13px;line-height:1.5;color:#1f2329;word-wrap:break-word;overflow-wrap:anywhere}
.wxs-vid:focus-visible{outline:2px solid var(--tb--main);outline-offset:2px}
/* 搞笑图文：大图。外层最宽 480，手机上随屏幕缩小；按原图比例占位，长图最高 640 裁掉下面 */
.wxs-big .wxs-mb{flex:1 1 auto;max-width:480px}
.wxs-big .wxs-cap{width:auto;font-size:14px}
.wxs-big .wxs-img,.wxs-big .wxs-vid{position:relative;width:100%;max-height:640px}
.wxs-big .wxs-img img{width:100%;height:auto;max-height:640px;object-fit:cover;object-position:top}
.wxs-big .wxs-vid{min-height:120px}
.wxs-big .wxs-play{width:56px;height:56px;margin:-28px 0 0 -28px}
.wxs-big .wxs-play:after{left:22px;top:16px;border-width:12px 0 12px 20px}
/* 购物分享：右边有热门榜，放大得小一些：最宽 320，长图最高 420 */
.wxs-big-s .wxs-mb{max-width:320px}
.wxs-big-s .wxs-img,.wxs-big-s .wxs-vid,.wxs-big-s .wxs-img img{max-height:420px}
/* 搞笑图文：被裁掉的长图底部提示条 */
.wxs-longbar{position:absolute;left:0;right:0;bottom:0;padding:18px 0 6px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));color:#fff;font-size:13px;font-style:normal;line-height:18px;text-align:center;pointer-events:none}
/* 大图弹层的长图模式：宽度撑满（最宽 690，即原图宽），从顶部开始上下滚动；按钮固定在窗口上不跟着滚 */
.wxs-lb.wxs-lb-long{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;text-align:center}
.wxs-lb.wxs-lb-long[hidden]{display:none}
.wxs-lb.wxs-lb-long img{display:block;width:100%;max-width:690px;max-height:none;height:auto;margin:0 auto;object-fit:initial;cursor:default}
.wxs-lb.wxs-lb-long button,.wxs-lb.wxs-lb-long .wxs-lb-c{position:fixed}
.wxs-lb.wxs-lb-long .wxs-lb-x{background:rgba(0,0,0,.45);border-radius:50%;padding:0 10px}
.wxs-long{position:absolute;right:6px;bottom:6px;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-style:normal;line-height:18px;pointer-events:none}

.wxs-empty,.wxs-loading{padding:64px 0;text-align:center;font-size:14px;color:#9a9ea6}
.wxs-loading.err{cursor:pointer;color:#e67e22}
/* 加载更多：描边胶囊按钮 */
.wxs-loadmore{display:block;width:140px;margin:16px auto 2px;padding:0;border:1px solid #dfe2e7;border-radius:17px;background:#fff;text-align:center;font-size:13px;line-height:32px;color:#666;text-decoration:none;transition:color .15s,border-color .15s}
.wxs-loadmore:hover{border-color:var(--tb--main);color:var(--tb--main)}
.wxs-loadmore.busy{pointer-events:none;opacity:.6}

/* ---------- 有右侧栏的板块（购物分享）：左边消息、右边 2 / 6 / 12 小时热门（从上到下三个框） ---------- */
.wxs-has-side{container-type:inline-size}
.wxs-body{display:flex;align-items:flex-start;gap:20px}
.wxs-main{flex:1 1 auto;min-width:0}
/* 吸顶：三个框整体放得进窗口时才吸，放不下时 wxshare.js 改成 static 跟着页面滚 */
.wxs-side{flex:0 0 240px;width:240px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;position:-webkit-sticky;position:sticky;top:80px;margin-top:54px}
.wxs-hotbox{overflow:hidden;border:1px solid #eceef1;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.wxs-side-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:11px 14px 10px;background:#fff4ef;border-bottom:1px solid #fde4d9}
.wxs-side-ti{font-size:15px;line-height:22px;font-weight:bold;color:#e8562a}
.wxs-side-sub{flex:none;font-size:11px;color:#c79a87}
.wxs-side-empty{margin:0;padding:22px 14px;font-size:13px;line-height:1.7;text-align:center;color:#9a9ea6}
.wxs-hot{margin:0;padding:6px 0;list-style:none}
.wxs-hot li{margin:0;padding:0;list-style:none}
.wxs-hot-i{display:flex;align-items:flex-start;gap:9px;padding:8px 14px;color:#333;font-size:13px;line-height:20px;text-decoration:none;transition:background .15s}
.wxs-hot-i:hover{background:#f6f7f9;text-decoration:none}
.wxs-hot-i:hover .wxs-hot-t{color:var(--tb--main)}
.wxs-hot-n{flex:none;width:20px;height:20px;border-radius:50%;background:#eef0f3;color:#8a8f99;font-size:12px;font-style:normal;font-weight:bold;line-height:20px;text-align:center}
.wxs-hot-n.r1{background:linear-gradient(135deg,#ffd34d,#f5a700);color:#fff}
.wxs-hot-n.r2{background:linear-gradient(135deg,#c9d0da,#9aa4b2);color:#fff}
.wxs-hot-n.r3{background:linear-gradient(135deg,#e8ad7c,#c97a3e);color:#fff}
.wxs-hot-t{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;transition:color .15s}
/* 板块宽度放不下（手机、窄窗口）时不显示右侧栏；不支持容器查询的旧浏览器按屏幕宽度兜底 */
@container (max-width:759px){.wxs-side{display:none}}
@media (max-width:760px){.wxs-side{display:none}}

/* ---------- 手机 ---------- */
@media (max-width:600px){
	.wxs-tabs.excerpts-title{gap:20px;padding:12px 15px 0;border-radius:0}
	.wxs-tab{padding-bottom:10px;font-size:15px}
	.wxs-chat{padding:2px 12px 14px;border-radius:0}
	.wxs-mb{max-width:calc(100% - 50px)}
	.wxs-av{width:36px;height:36px}
}

/* ---------- 大图查看 ---------- */
.wxs-lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);-webkit-user-select:none;user-select:none}
.wxs-lb[hidden]{display:none}
.wxs-lb img{max-width:94vw;max-height:86vh;object-fit:contain}
.wxs-lb button{position:absolute;padding:0 14px;border:0;background:transparent;color:#fff;font-size:36px;line-height:1;cursor:pointer;opacity:.8}
.wxs-lb button:hover{opacity:1}
.wxs-lb button[hidden]{display:none}
.wxs-lb-x{top:12px;right:8px}
.wxs-lb-p{left:4px;top:50%;margin-top:-24px}
.wxs-lb-n{right:4px;top:50%;margin-top:-24px}
.wxs-lb-c{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#ccc;font-size:13px}
/* 视频编码不支持（H.265）的提示：放在画面上方居中，醒目一点 */
.wxs-lb-c.wxs-vtip{left:50%;right:auto;bottom:auto;top:16px;max-width:86vw;transform:translateX(-50%);padding:8px 14px;border-radius:6px;background:rgba(230,126,34,.92);color:#fff;font-size:14px;line-height:1.5;text-align:center;-webkit-user-select:text;user-select:text}
.wxs-lb video{max-width:94vw;max-height:86vh;background:#000;-webkit-user-select:auto;user-select:auto}

/* ---------- 热门弹窗：标题栏 + 一条消息的完整气泡 ---------- */
@keyframes wxs-pop-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.wxs-pop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.5)}
.wxs-pop[hidden]{display:none}
.wxs-pop-box{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:520px;max-height:86vh;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.25);animation:wxs-pop-in .18s ease-out}
.wxs-pop-h{flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 8px 10px 18px;background:#fff4ef;border-bottom:1px solid #fde4d9}
.wxs-pop-ti{font-size:15px;line-height:24px;font-weight:bold;color:#e8562a}
.wxs-pop-x{padding:0 8px;border:0;background:transparent;color:#b9a097;font-size:26px;line-height:1;cursor:pointer}
.wxs-pop-x:hover{color:#e8562a}
.wxs-pop .wxs-pop-c{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 18px 18px;border-radius:0}
.wxs-pop .wxs-time{margin-top:14px}
@media (prefers-reduced-motion:reduce){.wxs-pop-box{animation:none}.wxs-tab:after{transition:none}}

/* ---------- 深色（对照电脑版微信深色） ---------- */
html.darking .wxs-chat{background:#161411}
html.darking .wxs-time{background:rgba(255,255,255,.06);color:#958c7d}
html.darking .wxs-nick,html.darking .wxs-empty,html.darking .wxs-loading{color:#958c7d}
html.darking .wxs-bub{background:#26221c;color:#ddd6c9;box-shadow:none}
html.darking .wxs-bub a{color:#c9a96e}
html.darking .wxs-copy{background:#332d25;color:#c9a96e}
html.darking .wxs-copy:hover{background:#3d362c}
html.darking .wxs-copy.ok{background:#27ae60;color:#f3ecdf}
html.darking .wxs-img{background:#26221c;box-shadow:none}
html.darking .wxs-vid{box-shadow:none}
html.darking .wxs-cap{color:#ddd6c9}
html.darking .wxs-av{background:#332d25;box-shadow:none}
html.darking .wxs-loadmore{border-color:#3a3329;background:#1f1c18;color:#958c7d}
html.darking .wxs-loadmore:hover{border-color:var(--tb--main);color:var(--tb--main)}
html.darking .wxs-hotbox{border-color:#2e2a23;background:#1f1c18;box-shadow:none}
html.darking .wxs-side-h,html.darking .wxs-pop-h{background:#2a2419;border-bottom-color:#3d3427}
html.darking .wxs-side-ti,html.darking .wxs-pop-ti{color:#c9a96e}
html.darking .wxs-side-sub{color:#958c7d}
html.darking .wxs-side-empty{color:#958c7d}
html.darking .wxs-hot-i{color:#c9c1b3}
html.darking .wxs-hot-i:hover{background:#26221c}
html.darking .wxs-hot-n{background:#332d25;color:#958c7d}
html.darking .wxs-hot-n.r1,html.darking .wxs-hot-n.r2,html.darking .wxs-hot-n.r3{color:#f3ecdf;opacity:.9}
html.darking .wxs-pop-box{background:#1f1c18}
html.darking .wxs-pop-x{color:#958c7d}
html.darking .wxs-pop-x:hover{color:#c9a96e}
/* ---------- 置顶信息：消息列表最上方，图片 + 文字（后台「板块设置」里填，不能关） ---------- */
.wxs-pin{margin:14px 0 4px;padding:12px;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.wxs-pin-img{display:block;overflow:hidden;border-radius:8px;background:#e6e8eb}
.wxs-pin-img img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
a.wxs-pin-img:hover img{opacity:.92}
.wxs-pin-img+.wxs-pin-txt{margin-top:10px}
.wxs-pin-txt{color:#1f2329;font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.wxs-pin-txt a{color:#3e5a9e;text-decoration:none}
.wxs-pin-txt a:hover{text-decoration:underline}
html.darking .wxs-pin{background:#26221c;box-shadow:none}
html.darking .wxs-pin-img{background:#1d1a16}
html.darking .wxs-pin-txt{color:#ddd6c9}
html.darking .wxs-pin-txt a{color:#c9a96e}