/* ============================================================
   app.css — 主框架：移动端单栏 + 底部 Tab；PC 端三栏布局
   ============================================================ */
.wx-root{
  position:absolute;inset:0;display:flex;
  background:var(--wx-bg);
  max-width:1400px;margin:0 auto;
}

/* ---------- 移动端：list-column 与 main-column 叠放，页面切换 ---------- */
.list-column,.main-column{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--wx-bg);
  overflow:hidden;
}
.main-column{transform:translateX(100%);transition:transform var(--wx-mid) ease;background:var(--wx-bg);z-index:5;}
.main-column.open{transform:translateX(0);}
.main-column .page-back{position:absolute;left:0;top:0;bottom:0;width:100%;} /* 占位，实际返回按钮在navbar */

/* ---------- 移动端 TabBar ---------- */
.mobile-tabbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--wx-tabbar-h);
  background:var(--tabbar-bg);border-top:.5px solid var(--border);
  display:flex;z-index:800;
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-tabbar .tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:#8A8A8A;font-size:10px;position:relative;
}
.mobile-tabbar .tab-item.active{color:var(--text-primary);}
.mobile-tabbar .tab-item svg{width:26px;height:26px;}
.mobile-tabbar .tab-item .tab-badge{
  position:absolute;top:4px;left:calc(50% + 2px);
}

/* ---------- 列表页（会话/通讯录/发现/我）公共 ---------- */
.tab-page{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--wx-bg);no-scrollbar:false;}
.tab-page::-webkit-scrollbar{display:none;}
.list-row{
  display:flex;align-items:center;gap:12px;background:var(--bg-card);
  padding:9px 12px;position:relative;cursor:pointer;
}
.list-row:active{background:var(--wx-active,#EBEBEB);}
body.dark .list-row:active{background:#3A3A3C;}
.list-row .row-main{flex:1;min-width:0;}
.list-row .row-title{font-size:16px;line-height:1.3;}
.list-row .row-sub{font-size:13px;color:var(--wx-text-sub);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-row .row-time{font-size:12px;color:var(--wx-text-faint);flex:none;}
.list-row .row-badge{position:absolute;top:10px;right:12px;}

/* ---------- PC 端（≥900px）三栏 ---------- */
.pc-sidebar{display:none;}
@media (min-width:900px){
  body{background:#D6D6D6;}
  .wx-root{box-shadow:0 0 24px rgba(0,0,0,.15);}
  .pc-sidebar{
    display:flex;flex-direction:column;width:88px;background:#2E2E2E;color:#ADADAD;
    flex:none;
  }
  .pc-side-user{padding:18px 0;text-align:center;}
  .pc-side-user .wx-avatar{margin:0 auto;}
  .pc-side-nav{flex:1;display:flex;flex-direction:column;}
  .pc-side-nav .pc-nav-item{
    height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:11px;color:#ADADAD;cursor:pointer;position:relative;
  }
  .pc-side-nav .pc-nav-item svg{width:24px;height:24px;}
  .pc-side-nav .pc-nav-item.active{color:#fff;background:#000;}
  .pc-side-nav .pc-nav-item .tab-badge{position:absolute;top:8px;left:50%;margin-left:4px;}
  .list-column{position:relative;width:280px;flex:none;border-right:.5px solid var(--wx-line-soft);}
  .main-column{
    position:relative;transform:none;flex:1;animation:none;
  }
  .main-column.hidden-on-pc{display:none;}
  .mobile-tabbar{display:none;}
  body.pc-no-chat .list-column{border-right:none;}
}
@media (max-width:899px){
  .pc-sidebar{display:none;}
  /* 进入全屏覆盖页（聊天/朋友圈/详情等）时隐藏底部 TabBar，让输入栏贴底 */
  body.has-overlay .mobile-tabbar{display:none;}
  /* 双保险：打开的覆盖页整体层级抬到 TabBar(800) 之上，无论从哪个入口进入都盖住 TabBar，
     避免底部 TabBar 遮挡聊天输入栏；返回时 .open 移除、层级回落，TabBar 自然露出 */
  .main-column.open{z-index:900;}
}

/* ---------- 搜索栏 ---------- */
.wx-searchbar{
  padding:8px 12px;background:var(--wx-bg);flex:none;
}
.wx-searchbar .search-inner{
  background:var(--bg-card);border-radius:6px;text-align:center;color:#9A9A9A;
  font-size:14px;padding:6px 0;position:relative;
}
.wx-searchbar .search-inner::before{
  content:"";display:inline-block;width:12px;height:12px;border:1.5px solid #B2B2B2;
  border-radius:50%;vertical-align:-1px;margin-right:5px;position:relative;
}

/* ---------- 通讯录字母索引 ---------- */
.abc-index{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  z-index:10;display:flex;flex-direction:column;gap:1px;
}
.abc-index .abc{font-size:10px;color:#576B95;padding:1px 3px;text-align:center;}

/* ---------- 通知横幅 ---------- */
.notify-banner{
  position:fixed;left:50%;top:0;transform:translate(-50%,-120%);
  background:rgba(30,30,30,.92);color:#fff;z-index:950;
  padding:8px 16px;border-radius:0 0 10px 10px;font-size:13px;
  transition:transform .3s;max-width:90%;
}
.notify-banner.show{transform:translate(-50%,0);}

/* ---------- 页面切换进入动画（移动端） ---------- */
@media (max-width:899px){
  .main-column.slide-in{animation:wxSlideIn .25s ease;}
  @keyframes wxSlideIn{from{transform:translateX(30%);}to{transform:translateX(0);}}
}

/* ---------- 启动页 ---------- */
#splash{
  position:fixed;inset:0;background:#07C160;z-index:9998;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  transition:opacity .5s;
}
#splash.hide{opacity:0;pointer-events:none;}
#splash .splash-logo{
  width:84px;height:84px;border-radius:18px;background:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;
}
#splash .splash-name{font-size:22px;}
#splash .splash-foot{position:absolute;bottom:40px;font-size:12px;opacity:.8;}

/* ---------- 文字大小全局缩放（设置真实生效） ---------- */
body.font-small{font-size:14px;}
body.font-normal{font-size:16px;}
body.font-large{font-size:18px;}
body.font-xlarge{font-size:20px;}

/* ---------- 深色模式补充 ---------- */
body.dark{background:#000;}
body.dark .wx-root{background:var(--bg-page);}
@media (min-width:900px){
  body.dark{background:#000;}
  body.dark .pc-sidebar{background:#161616;}
}
body.dark .abc-index .abc{color:#8E8E93;}
body.dark a{color:#6B9BD1;}