/* ============================================================
   base.css — 微信设计令牌 + 全局基础组件（所有分片必须遵守）
   配色严格对齐微信：
   主绿 #07C160 / 己方气泡 #95EC69 / 页面底 #EDEDED / 输入区 #F7F7F7
   ============================================================ */
:root{
  /* 主色 */
  --wx-green:#07C160;
  --wx-green-dark:#06AD56;
  --wx-green-light:#95EC69;      /* 己方气泡 */
  --wx-blue:#576B95;             /* 微信链接蓝 */
  --wx-red:#FA5151;              /* 未读/提醒红 */
  --wx-gold:#F7B500;             /* 红包金 */
  /* 中性 */
  --wx-bg:#EDEDED;               /* 页面底色 */
  --wx-bg-panel:#F7F7F7;         /* 输入区/设置项底色 */
  --wx-white:#FFFFFF;
  --wx-line:#E5E5E5;
  --wx-line-soft:#EBEBEB;
  /* 文字 */
  --wx-text:#1A1A1A;
  --wx-text-main:#000000;
  --wx-text-sub:#888888;
  --wx-text-faint:#B2B2B2;
  --wx-text-white:#FFFFFF;
  /* 尺寸 */
  --wx-tabbar-h:52px;
  --wx-navbar-h:44px;
  --wx-radius-bubble:5px;
  --wx-radius-card:8px;
  --wx-avatar:42px;
  --wx-avatar-sm:34px;
  --wx-avatar-lg:64px;
  /* 字体 */
  --wx-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* 阴影 */
  --wx-shadow-msg:0 1px 2px rgba(0,0,0,.08);
  --wx-shadow-pop:0 4px 16px rgba(0,0,0,.12);
  /* 动画 */
  --wx-fast:.18s;
  --wx-mid:.28s;

  /* ===== 主题令牌（浅色/深色统一入口） ===== */
  --bg-page:#EDEDED;
  --bg-card:#FFFFFF;
  --bg-input:#F7F7F7;
  --text-primary:#191919;
  --text-secondary:#888888;
  --border:#E5E5E5;
  --bubble-me:#95EC69;
  --bubble-other:#FFFFFF;
  --navbar-bg:#EDEDED;
  --tabbar-bg:#F7F7F7;
  --panel-bg:#FFFFFF;
}

/* ===== 深色模式：body.dark 覆盖全部令牌 ===== */
body.dark{
  --bg-page:#1C1C1E;
  --bg-card:#2C2C2E;
  --bg-input:#3A3A3C;
  --text-primary:#FFFFFF;
  --text-secondary:#8E8E93;
  --border:#38383A;
  --bubble-me:#07C160;
  --bubble-other:#2C2C2E;
  --navbar-bg:#1C1C1E;
  --tabbar-bg:#1C1C1E;
  --panel-bg:#2C2C2E;
  /* 同步旧令牌，让所有页面自动变暗 */
  --wx-bg:#1C1C1E;
  --wx-bg-panel:#1C1C1E;
  --wx-white:#2C2C2E;
  --wx-line:#38383A;
  --wx-line-soft:#38383A;
  --wx-text:#FFFFFF;
  --wx-text-main:#FFFFFF;
  --wx-text-sub:#8E8E93;
  --wx-text-faint:#636366;
  --wx-green-light:#07C160;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--wx-font);
  background:var(--bg-page);
  color:var(--text-primary);
  font-size:16px;
  line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}
img{display:block;max-width:100%;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
input,textarea{font-family:inherit;outline:none;border:none;}
ul,li{list-style:none;}
a{color:var(--wx-blue);text-decoration:none;}

/* ---------- 头像 ---------- */
.wx-avatar{
  width:var(--wx-avatar);height:var(--wx-avatar);
  border-radius:6px;object-fit:cover;background:#d8d8d8;flex:none;
}
.wx-avatar.sm{width:var(--wx-avatar-sm);height:var(--wx-avatar-sm);border-radius:4px;}
.wx-avatar.lg{width:var(--wx-avatar-lg);height:var(--wx-avatar-lg);border-radius:8px;}
.wx-avatar.xl{width:88px;height:88px;border-radius:10px;}
/* 未读红点角标 */
.wx-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--wx-red);color:#fff;font-size:12px;line-height:18px;
  text-align:center;flex:none;
}
.wx-badge.dot{min-width:8px;width:8px;height:8px;padding:0;border-radius:50%;}
.wx-badge.small{min-width:16px;height:16px;line-height:16px;font-size:11px;}

/* ---------- 通用导航栏 ---------- */
.wx-navbar{
  height:var(--wx-navbar-h);
  background:var(--navbar-bg);
  display:flex;align-items:center;justify-content:center;
  position:relative;flex:none;
  border-bottom:.5px solid var(--wx-line-soft);
  font-size:17px;font-weight:600;
}
.wx-navbar .nav-left,.wx-navbar .nav-right{
  position:absolute;top:0;height:100%;display:flex;align-items:center;
  font-size:16px;font-weight:400;color:var(--wx-text-main);
}
.wx-navbar .nav-left{left:12px;}
.wx-navbar .nav-right{right:12px;}
.wx-navbar .nav-title{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wx-navbar.plain{background:var(--bg-card);border-bottom:.5px solid var(--border);}

/* ---------- 列表单元格（微信设置/通讯录风） ---------- */
.wx-cell{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);padding:11px 15px;position:relative;
}
.wx-cell + .wx-cell::before{
  content:"";position:absolute;left:60px;right:0;top:0;height:.5px;background:var(--wx-line-soft);
}
.wx-cell .cell-icon{width:24px;height:24px;border-radius:4px;flex:none;}
.wx-cell .cell-label{flex:1;font-size:16px;}
.wx-cell .cell-value{color:var(--wx-text-sub);font-size:15px;}
.wx-cell .cell-arrow{color:#C7C7CC;font-size:18px;flex:none;}
.wx-cell:active{background:var(--wx-active,#D9D9D9);}
body.dark .wx-cell:active{background:#3A3A3C;}
.wx-cell-group{background:var(--bg-card);margin-top:10px;}
.wx-cell-group:first-child{margin-top:0;}
.wx-cell-group .group-title{padding:6px 15px 4px;font-size:13px;color:var(--wx-text-sub);}

/* ---------- 灰色胶囊系统提示 ---------- */
.wx-sysmsg{
  text-align:center;margin:14px auto;
}
.wx-sysmsg span{
  display:inline-block;background:#C7C7CC;color:#fff;
  font-size:12px;line-height:18px;padding:2px 8px;border-radius:4px;
  max-width:80%;
}
.wx-sysmsg.dark span{background:#9A9A9A;}

/* ---------- 按钮 ---------- */
.wx-btn{
  display:block;width:100%;padding:10px 0;text-align:center;
  background:var(--wx-green);color:#fff;border-radius:6px;font-size:17px;
}
.wx-btn:active{background:var(--wx-green-dark);}
.wx-btn.plain{background:var(--bg-card);color:var(--text-primary);}
.wx-btn.gray{background:var(--bg-input);color:var(--text-primary);}
.wx-btn.danger{background:var(--wx-red);}
.wx-btn[disabled]{opacity:.5;}

/* ---------- Toast ---------- */
.wx-toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(40,40,40,.85);color:#fff;border-radius:8px;
  padding:14px 20px;font-size:15px;z-index:9999;max-width:70%;
  text-align:center;animation:wxFadeIn .2s;
}
.wx-toast .toast-icon{font-size:32px;display:block;margin-bottom:6px;}
@keyframes wxFadeIn{from{opacity:0;transform:translate(-50%,-48%);}to{opacity:1;transform:translate(-50%,-50%);}}

/* ---------- ActionSheet ---------- */
.wx-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:900;
  animation:wxFadeIn .2s;
}
.wx-actionsheet{
  position:fixed;left:0;right:0;bottom:0;z-index:901;
  background:var(--bg-card);border-radius:12px 12px 0 0;overflow:hidden;
  animation:wxSheetUp .25s ease;
}
@keyframes wxSheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.wx-actionsheet .sheet-item{
  padding:14px 0;text-align:center;font-size:17px;color:var(--text-primary);
  border-bottom:.5px solid var(--border);
}
.wx-actionsheet .sheet-item.danger{color:var(--wx-red);}
.wx-actionsheet .sheet-item:active{background:var(--wx-active,#F2F2F2);}
body.dark .wx-actionsheet .sheet-item:active{background:#3A3A3C;}
.wx-actionsheet .sheet-cancel{
  margin-top:8px;background:var(--bg-card);color:var(--text-primary);padding:14px 0;text-align:center;font-size:17px;
}

/* ---------- Modal 对话框 ---------- */
.wx-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;max-width:320px;background:var(--bg-card);color:var(--text-primary);border-radius:14px;z-index:910;
  overflow:hidden;animation:wxPop .2s;
}
@keyframes wxPop{from{opacity:0;transform:translate(-50%,-48%) scale(.95);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.wx-modal .modal-body{padding:22px 16px 18px;text-align:center;}
.wx-modal .modal-title{font-size:17px;font-weight:600;}
.wx-modal .modal-text{font-size:15px;color:var(--wx-text-sub);margin-top:8px;line-height:1.5;}
.wx-modal .modal-footer{display:flex;border-top:.5px solid var(--wx-line-soft);}
.wx-modal .modal-btn{flex:1;padding:12px 0;text-align:center;font-size:16px;}
.wx-modal .modal-btn + .modal-btn{border-left:.5px solid var(--wx-line-soft);}
.wx-modal .modal-btn.primary{color:var(--wx-green);font-weight:500;}

/* ---------- 空状态 ---------- */
.wx-empty{text-align:center;color:var(--wx-text-faint);padding:60px 20px;font-size:14px;}
.wx-empty .empty-icon{font-size:48px;display:block;margin-bottom:10px;opacity:.5;}

/* ---------- 通用小工具 ---------- */
.hidden{display:none!important;}
.flex1{flex:1;min-width:0;}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.flex-row{display:flex;align-items:center;}
.muted{color:var(--wx-text-sub);}
.faint{color:var(--wx-text-faint);}

/* ---------- 正在输入... ---------- */
.wx-typing{display:inline-flex;align-items:center;gap:3px;padding:4px 2px;}
.wx-typing i{width:5px;height:5px;border-radius:50%;background:#999;animation:wxBlink 1.2s infinite;}
.wx-typing i:nth-child(2){animation-delay:.2s;}
.wx-typing i:nth-child(3){animation-delay:.4s;}
@keyframes wxBlink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

/* ---------- 滚动条隐藏 ---------- */
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{scrollbar-width:none;}