/* ============================================================
   discover.css — 发现 tab / 视频号 / 扫一扫 / 摇一摇 / 看一看 / 附近的人 / 购物 / 小游戏
   依赖 base.css 的设计令牌与 .wx-cell / .tab-page 等基础类
   ============================================================ */

/* ---------- 发现页分组列表 ---------- */
.disc-page{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--wx-bg);padding-bottom:18px;}
.disc-page::-webkit-scrollbar{display:none;}

.disc-group{background:#fff;margin-top:12px;}
.disc-group:first-child{margin-top:0;}

.disc-row{
  display:flex;align-items:center;gap:14px;
  background:#fff;padding:12px 15px;position:relative;cursor:pointer;
}
.disc-row + .disc-row::before{
  content:"";position:absolute;left:54px;right:0;top:0;height:.5px;background:var(--wx-line-soft);
}
.disc-row:active{background:#EBEBEB;}
.disc-row .disc-icon{
  width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
}
.disc-row .disc-label{flex:1;font-size:16px;}
.disc-row .disc-arrow{color:#C7C7CC;font-size:20px;flex:none;line-height:1;}

/* 发现页顶部标题（非导航栏，仿微信列表顶标题） */
.disc-header{
  padding:22px 16px 6px;font-size:22px;font-weight:600;color:#000;
}

/* ============================================================
   视频号（全屏上下滑动 feed）
   ============================================================ */
.channels-feed{
  position:absolute;inset:0;background:#000;overflow:hidden;
}
.channels-scroll{
  height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;
}
.channels-scroll::-webkit-scrollbar{display:none;}
.channel-card{
  position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;display:flex;align-items:flex-end;min-height:100%;
}
.channel-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.channel-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.92);}
.channel-media .channel-gradient{
  position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));
}
.channel-info{position:relative;z-index:2;padding:0 60px 26px 16px;color:#fff;}
.channel-info .ch-author{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.channel-info .ch-author img{width:38px;height:38px;border-radius:50%;border:1.5px solid #fff;object-fit:cover;}
.channel-info .ch-name{font-size:15px;font-weight:600;}
.channel-info .ch-follow{
  margin-left:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.6);
  color:#fff;font-size:12px;padding:2px 10px;border-radius:4px;
}
.channel-info .ch-follow.on{background:var(--wx-green);border-color:var(--wx-green);}
.channel-info .ch-desc{font-size:14px;line-height:1.45;opacity:.96;}
.channel-info .ch-tags{margin-top:6px;font-size:13px;color:#cde9ff;}

/* 右侧操作栏 */
.ch-side{
  position:absolute;right:10px;bottom:90px;z-index:3;display:flex;
  flex-direction:column;align-items:center;gap:20px;color:#fff;
}
.ch-side .ch-act{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;}
.ch-side .ch-act .ch-act-ic{font-size:30px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.ch-side .ch-act .ch-act-num{font-size:12px;opacity:.9;}
.ch-side .ch-avatar{
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;object-fit:cover;
}
.ch-side .ch-follow-badge{
  margin-top:-14px;width:20px;height:20px;border-radius:50%;background:var(--wx-red);
  color:#fff;font-size:14px;line-height:18px;text-align:center;border:2px solid #fff;
}

/* 评论弹层 */
.ch-comments{
  position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:62%;
  background:#fff;border-radius:14px 14px 0 0;display:flex;flex-direction:column;
  transform:translateY(102%);transition:transform .28s ease;
}
.ch-comments.open{transform:translateY(0);}
.ch-comments .cc-head{padding:14px;text-align:center;font-size:15px;font-weight:600;border-bottom:.5px solid var(--wx-line-soft);}
.ch-comments .cc-list{flex:1;overflow-y:auto;padding:6px 14px;}
.ch-comments .cc-item{display:flex;gap:10px;padding:10px 0;}
.ch-comments .cc-item img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;}
.ch-comments .cc-item .cc-name{font-size:13px;color:var(--wx-text-sub);}
.ch-comments .cc-item .cc-text{font-size:15px;margin-top:2px;}
.ch-comments .cc-input{
  display:flex;gap:8px;padding:10px 12px;border-top:.5px solid var(--wx-line-soft);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.ch-comments .cc-input input{
  flex:1;background:#F2F2F2;border-radius:18px;padding:9px 14px;font-size:15px;
}
.ch-comments .cc-input button{
  background:var(--wx-green);color:#fff;border-radius:18px;padding:0 16px;font-size:15px;
}
.ch-back{
  position:absolute;left:12px;top:calc(10px + env(safe-area-inset-top));z-index:7;
  color:#fff;font-size:26px;width:34px;height:34px;line-height:30px;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* ============================================================
   扫一扫
   ============================================================ */
.scan-page{position:absolute;inset:0;background:#000;overflow:hidden;}
.scan-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;}
.scan-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.scan-frame{
  width:220px;height:220px;border:2px solid var(--wx-green);border-radius:12px;position:relative;
  box-shadow:0 0 0 2000px rgba(0,0,0,.45);
}
.scan-line{
  position:absolute;left:6px;right:6px;height:2px;background:var(--wx-green);border-radius:2px;
  animation:scanMove 2.2s ease-in-out infinite;
}
@keyframes scanMove{0%,100%{top:8px;}50%{top:calc(100% - 10px);}}
.scan-tip{position:absolute;bottom:120px;left:0;right:0;text-align:center;color:#fff;font-size:14px;opacity:.9;}
.scan-bars{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;
  padding:16px 0 calc(20px + env(safe-area-inset-bottom));background:rgba(0,0,0,.5);
}
.scan-bars .scan-opt{color:#fff;text-align:center;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.scan-bars .scan-opt .so-ic{font-size:26px;}

/* ============================================================
   摇一摇
   ============================================================ */
.shake-page{
  position:absolute;inset:0;background:linear-gradient(180deg,#2b3a55,#1b2740);
  display:flex;flex-direction:column;align-items:center;color:#fff;overflow:hidden;
}
.shake-orb{
  margin-top:18vh;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#7aa8ff,#3d6bd6);
  display:flex;align-items:center;justify-content:center;font-size:56px;
  box-shadow:0 0 60px rgba(120,160,255,.6);transition:transform .25s;
}
.shake-orb.tilt{transform:rotate(-18deg) scale(1.08);}
.shake-title{margin-top:26px;font-size:20px;font-weight:600;}
.shake-sub{margin-top:8px;font-size:13px;opacity:.7;}
.shake-btn{
  margin-top:40px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  color:#fff;padding:11px 34px;border-radius:22px;font-size:15px;
}
.shake-btn:active{background:rgba(255,255,255,.26);}
.shake-result{
  position:absolute;left:16px;right:16px;bottom:40px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:16px;
  display:none;flex-direction:column;align-items:center;
}
.shake-result.show{display:flex;}
.shake-result img{width:64px;height:64px;border-radius:50%;object-fit:cover;}
.shake-result .sr-name{margin-top:10px;font-size:17px;font-weight:600;}
.shake-result .r-sig{margin-top:4px;font-size:13px;opacity:.8;}
.shake-result .sr-act{
  margin-top:14px;width:100%;background:var(--wx-green);color:#fff;text-align:center;
  padding:10px 0;border-radius:8px;font-size:15px;
}

/* ============================================================
   看一看（资讯流）
   ============================================================ */
.kankan-page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--wx-bg);}
.kankan-list{flex:1;overflow-y:auto;}
.kan-card{background:#fff;margin:10px 12px;border-radius:10px;overflow:hidden;}
.kan-cover{width:100%;height:160px;object-fit:cover;}
.kan-body{padding:12px 14px;}
.kan-title{font-size:16px;line-height:1.4;font-weight:600;}
.kan-meta{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--wx-text-sub);font-size:13px;}
.kan-meta img{width:22px;height:22px;border-radius:50%;object-fit:cover;}
.kan-meta .kan-read{flex:1;}
.kan-like{display:flex;align-items:center;gap:4px;cursor:pointer;}
.kan-like.on{color:var(--wx-red);}
.kan-tabbar{
  display:flex;background:#fff;border-top:.5px solid var(--wx-line-soft);flex:none;
}
.kan-tabbar .ktab{flex:1;text-align:center;padding:10px 0;font-size:15px;color:var(--wx-text-sub);}
.kan-tabbar .ktab.on{color:var(--wx-text-main);font-weight:600;}

/* ============================================================
   附近的人
   ============================================================ */
.nearby-page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--wx-bg);}
.nearby-list{flex:1;overflow-y:auto;}
.nearby-row{display:flex;align-items:center;gap:12px;background:#fff;padding:11px 14px;cursor:pointer;}
.nearby-row + .nearby-row{border-top:.5px solid var(--wx-line-soft);}
.nearby-row img{width:48px;height:48px;border-radius:8px;object-fit:cover;}
.nearby-row .nb-main{flex:1;min-width:0;}
.nearby-row .nb-name{font-size:16px;}
.nearby-row .nb-sub{font-size:13px;color:var(--wx-text-sub);margin-top:2px;}
.nearby-row .nb-dist{color:var(--wx-green);font-size:13px;flex:none;}

/* ============================================================
   购物（京东/拼多多风商品流）
   ============================================================ */
.shop-page{position:absolute;inset:0;display:flex;flex-direction:column;background:#f5f5f5;}
.shop-search{
  background:#fff;display:flex;align-items:center;gap:8px;padding:9px 12px;flex:none;
}
.shop-search .shop-searchbox{
  flex:1;background:#f2f2f2;border-radius:16px;padding:7px 14px;font-size:14px;color:#999;
}
.shop-grid{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.shop-card{background:#fff;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.shop-card .sc-img{width:100%;height:140px;object-fit:cover;}
.shop-card .sc-body{padding:8px 10px 10px;flex:1;display:flex;flex-direction:column;}
.shop-card .sc-title{font-size:14px;line-height:1.35;height:2.8em;overflow:hidden;}
.shop-card .sc-price{color:#e4393c;font-size:18px;font-weight:700;margin-top:6px;}
.shop-card .sc-price small{font-size:12px;font-weight:400;}
.shop-card .sc-tag{
  align-self:flex-start;margin-top:6px;font-size:11px;color:#e4393c;border:1px solid #e4393c;
  border-radius:3px;padding:1px 4px;
}
.shop-card .sc-cart{
  margin-top:8px;background:#ff5000;color:#fff;text-align:center;border-radius:14px;
  padding:6px 0;font-size:13px;
}

/* ============================================================
   小游戏入口卡片（发现页内嵌）
   ============================================================ */
.mini-game-row{display:flex;align-items:center;gap:14px;}
.mini-game-row .mg-icon{
  width:46px;height:46px;border-radius:10px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:24px;color:#fff;
}
.mg-icon.g2048{background:linear-gradient(135deg,#edc22e,#f96);}
.mg-icon.rps{background:linear-gradient(135deg,#5b86e5,#36d1dc);}
.mini-game-row .mg-main{flex:1;}
.mini-game-row .mg-name{font-size:16px;}
.mini-game-row .mg-sub{font-size:12px;color:var(--wx-text-sub);margin-top:2px;}

/* 视频号/扫一扫/摇一摇等子页顶部返回按钮通用 */
.sub-back-btn{
  position:absolute;left:10px;top:calc(10px + env(safe-area-inset-top));z-index:20;
  width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.sub-back-btn.light{background:rgba(255,255,255,.85);color:#333;}

/* 扫码框四角高亮 */
.scan-frame::before,.scan-frame::after{
  content:"";position:absolute;width:18px;height:18px;border:3px solid var(--wx-green);
}
.scan-frame::before{left:-3px;top:-3px;border-right:none;border-bottom:none;border-radius:4px 0 0 0;}
.scan-frame::after{right:-3px;bottom:-3px;border-left:none;border-top:none;border-radius:0 0 4px 0;}
.scan-frame .scan-corner-tr,.scan-frame .scan-corner-bl{
  position:absolute;width:18px;height:18px;border:3px solid var(--wx-green);
}
.scan-frame .scan-corner-tr{right:-3px;top:-3px;border-left:none;border-bottom:none;}
.scan-frame .scan-corner-bl{left:-3px;bottom:-3px;border-right:none;border-top:none;}

/* 双击点赞爆心动画 */
.ch-burst{
  position:absolute;z-index:4;font-size:60px;pointer-events:none;
  animation:burstUp .8s ease forwards;transform:translate(-50%,-50%);
}
@keyframes burstUp{
  0%{opacity:0;scale:.4;}
  30%{opacity:1;scale:1.25;}
  100%{opacity:0;scale:1.6;translate:0 -40px;}
}

/* 视频号顶部标题条 */
.ch-top-title{
  position:absolute;top:calc(6px + env(safe-area-inset-top));left:0;right:0;z-index:5;
  text-align:center;color:#fff;font-size:17px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* 购物顶部分类条 */
.shop-cats{
  display:flex;background:#fff;border-top:.5px solid var(--wx-line);flex:none;
  overflow-x:auto;no-scrollbar:false;
}
.shop-cats::-webkit-scrollbar{display:none;}
.shop-cats .scat{flex:none;padding:9px 14px;font-size:14px;color:#555;}
.shop-cats .scat.on{color:#ff5000;font-weight:600;border-bottom:2px solid #ff5000;}

/* 购物车角标 */
.shop-cart-badge{
  position:fixed;right:14px;bottom:84px;z-index:9;
  background:var(--wx-red);color:#fff;border-radius:18px;padding:6px 12px;font-size:13px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* 摇一摇底部模式切换 */
.shake-modes{
  position:absolute;left:0;right:0;bottom:120px;display:flex;justify-content:center;gap:26px;
}
.shake-modes .smode{color:rgba(255,255,255,.6);font-size:14px;}
.shake-modes .smode.on{color:#fff;font-weight:600;position:relative;}
.shake-modes .smode.on::after{
  content:"";position:absolute;left:20%;right:20%;bottom:-5px;height:2px;background:var(--wx-green);
}

/* 看一看空 tab / 加载 */
.kan-skeleton{
  background:#fff;margin:10px 12px;border-radius:10px;height:120px;
  display:flex;align-items:center;justify-content:center;color:#ccc;
}

/* 附近的人顶部地图占位 */
.nearby-banner{
  height:110px;background:linear-gradient(135deg,#7ec8e3,#5aa9e6);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;
}

/* 小游戏入口底部说明 */
.mini-game-foot{
  padding:8px 15px 4px;font-size:12px;color:var(--wx-text-sub);
}

/* 横屏/窄屏适配 */
@media (max-width:380px){
  .channel-info{padding-right:56px;}
  .ch-side{gap:16px;bottom:80px;}
}
@media (min-width:900px){
  .channel-card{min-height:560px;}
  .shop-grid{grid-template-columns:repeat(3,1fr);}
}

/* ============================================================
   discover.css 补充：动效 / 细节 / 暗色视频号控件
   ============================================================ */

/* 视频号右侧头像悬浮上漂 */
.ch-side .ch-avatar{transition:transform .2s;}
.ch-side .ch-avatar:active{transform:scale(1.08);}

/* 关注按钮渐变 */
.ch-follow{transition:all .18s;}
.ch-follow:active{transform:scale(.95);}

/* 购物按钮按下 */
.shop-card .sc-cart:active{background:#e04400;}
.shop-card .sc-img{transition:transform .3s;}
.shop-card:active .sc-img{transform:scale(1.03);}

/* 看一看卡片阴影 */
.kan-card{box-shadow:0 1px 4px rgba(0,0,0,.05);transition:box-shadow .2s;}
.kan-card:active{box-shadow:0 2px 10px rgba(0,0,0,.12);}
.kan-like{transition:transform .15s;}
.kan-like:active{transform:scale(1.2);}

/* 附近的人行头像悬停 */
.nearby-row img{transition:transform .2s;}
.nearby-row:active img{transform:scale(.96);}

/* 摇一摇球体呼吸 */
@keyframes shakeBreathe{0%,100%{box-shadow:0 0 40px rgba(120,160,255,.4);}50%{box-shadow:0 0 80px rgba(120,160,255,.8);}}
.shake-orb{animation:shakeBreathe 3s ease-in-out infinite;}

/* 扫码线颜色渐变 */
.scan-line{background:linear-gradient(90deg,transparent,var(--wx-green),transparent);}

/* 发现页分组标题与间距 */
.disc-group{border-radius:0;}
.disc-header{letter-spacing:1px;}

/* 视频号评论弹层遮罩（点空白关闭由 JS 控制） */
.ch-comments-mask{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.3);}

/* 购物搜索框聚焦态 */
.shop-search .shop-searchbox{transition:background .2s;}
.shop-search .shop-searchbox:active{background:#e9e9e9;}

/* 小游戏图标悬浮 */
.mg-icon{box-shadow:0 2px 6px rgba(0,0,0,.15);}

/* 视频号信息进入动画 */
.channel-info{animation:chInfoIn .4s ease;}
@keyframes chInfoIn{from{opacity:0;translate:0 12px;}to{opacity:1;translate:0 0;}}

/* 横屏时视频号信息贴左 */
@media (orientation:landscape) and (max-height:500px){
  .channel-info{bottom:12px;padding-bottom:12px;}
  .ch-side{bottom:60px;}
}

/* PC 端发现页限宽 */
@media (min-width:900px){
  .disc-page{max-width:420px;margin:0 auto;}
  .channel-card{min-height:560px;}
}

/* 额外细节：发现页空状态 / 占位 */
.disc-empty{text-align:center;color:#B2B2B2;font-size:13px;padding:30px 0;}
.disc-divider{height:8px;background:var(--wx-bg);}
.ch-top-tab{position:absolute;top:calc(8px + env(safe-area-inset-top));left:0;right:0;z-index:5;
  display:flex;justify-content:center;gap:24px;color:rgba(255,255,255,.65);font-size:15px;}
.ch-top-tab .ct{padding:4px 2px;}
.ch-top-tab .ct.on{color:#fff;font-weight:600;border-bottom:2px solid #fff;}