/**
 * 微信视觉层 — 仅 UI/字体/配色/间距，不改任何功能逻辑
 */

/* ---------- 设计令牌 ---------- */
body.light {
  --wx-page: #ededed;
  --wx-card: #ffffff;
  --wx-input: #ffffff;
  --wx-search-pill: #ededed;
  --wx-border: #e5e5e5;
  --wx-border-chat: #d9d9d9;
  --wx-border-hair: rgba(0, 0, 0, 0.06);
  --wx-green: #07c160;
  --wx-link: #576b95;
  --wx-text: #000000;
  --wx-text-2: #888888;
  --wx-text-3: #b2b2b2;
  --wx-arrow: #b0b0b5;

  --bg: var(--wx-page);
  --bg-list: var(--wx-card);
  --bg-elev: var(--wx-search-pill);
  --bg-soft: var(--wx-page);
  --bg-card: var(--wx-card);
  --press: #ececec;
  --border: var(--wx-border);
  --text: #1a1a1a;
  --text-strong: var(--wx-text);
  --text2: var(--wx-text-2);
  --text3: var(--wx-text-3);
  --text4: #c8c8c8;
}

body:not(.light) {
  --wx-green: #07c160;
  --wx-link: #7d90b5;
}

/* ---------- 全局字体 ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

/* ---------- 顶栏：底色，非纯白（图2/图8） ---------- */
body.light .nav-bar,
body.light .nav-bar.main,
body.light #screen-chat > .nav-bar,
body.light .modal-page .nav-bar {
  background: var(--wx-page);
  border-bottom: 0.5px solid var(--wx-border);
}
.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--wx-text);
  letter-spacing: 0;
}
.nav-back {
  font-size: 22px;
  font-weight: 300;
  color: var(--wx-text);
}
body.light .nav-plus,
body.light .nav-ico {
  color: var(--wx-text);
}

/* ---------- 底部 Tab：微信式 — 未选中灰字灰图标，选中绿色 ---------- */
body.light .tabbar {
  background: var(--wx-page);
  border-top: 0.5px solid var(--wx-border);
}
.tab {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}
.tab:not(.active) {
  color: var(--wx-text-2);
}
.tab.active {
  color: var(--wx-green);
}
.tab:not(.active) img.tab-logo {
  opacity: 0.62;
  filter: grayscale(1) brightness(0.92);
}
.tab.active img.tab-logo {
  opacity: 1;
  filter: none;
  transform: translateY(-0.5px);
}

/* ---------- 主框架 ---------- */
body.light #screen-main {
  background: var(--wx-page);
}

/* 聊天列表：普通会话白底，置顶会话灰底（仿微信） */
body.light #page-chats .list {
  background: var(--wx-card);
}
body.light #page-chats .chat-item {
  background: var(--wx-card);
}
body.light #page-chats .chat-swipe.pinned,
body.light #page-chats .chat-swipe.pinned .chat-item {
  background: var(--wx-page) !important;
}
body.light #page-chats .chat-swipe.pinned .chat-item:active {
  background: #e3e3e3 !important;
}
body.light #page-chats .nav-bar.main {
  background: var(--wx-page);
}

/* 发现 / 我：灰底 + 白卡片分组 */
body.light #page-discover,
body.light #page-me {
  background: var(--wx-page);
}
body.light #page-discover .list,
body.light #page-me .list {
  background: transparent;
}
body.light #page-discover .list.gap,
body.light #page-me .list.gap {
  margin-top: 8px;
}
body.light #page-discover .list.gap .cell,
body.light #page-me .list.gap .cell {
  background: var(--wx-card);
}

/* ---------- 通讯录（图8）：顶栏/滚动区灰底，搜索框+联系人白底 ---------- */
body.light #page-contacts {
  background: var(--wx-page);
}
body.light #page-contacts .nav-bar.main {
  background: var(--wx-page);
}
body.light .contacts-body,
body.light .contacts-scroll {
  background: var(--wx-page);
}
body.light .contacts-scroll .search-fake {
  background: var(--wx-card);
  border-radius: 6px;
  margin: 8px 10px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--wx-text-3);
}
body.light #page-contacts .list,
body.light #page-contacts .cell,
body.light .contacts-scroll .cell {
  background: var(--wx-card);
}
body.light .contact-section {
  background: var(--wx-page);
  color: var(--wx-text-2);
  font-size: 13px;
}
body.light .contacts-count {
  background: var(--wx-card);
  color: var(--wx-text-2);
}

/* 通讯录 A~Z 好友区：整块白底直到「N个朋友」（图1/2） */
body.light .friend-list-wrap {
  background: var(--wx-card);
}
body.light .friend-list-wrap .contact-section {
  background: var(--wx-card);
  color: var(--wx-text-2);
}
body.light .friend-list-wrap .list,
body.light .friend-list-wrap .cell {
  background: var(--wx-card);
}

/* ---------- 列表字体（图7） ---------- */
body.light .cell-body,
body.light .ci-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--wx-text);
}
body.light .cell-note {
  font-size: 13px;
  color: var(--wx-text-3);
}
body.light .ci-last {
  font-size: 13px;
  color: var(--wx-text-2);
}
body.light .ci-time {
  font-size: 11px;
  color: var(--wx-text-2);
  white-space: nowrap;
}
body.light .chat-item {
  padding: 11px 16px;
}
body.light .cell {
  padding: 11px 16px;
  min-height: 54px;
  border-bottom-color: var(--wx-border-hair);
}
body.light .chat-item {
  border-bottom-color: var(--wx-border-hair);
}

/* ---------- 右箭头：再大一点、略粗（图9） ---------- */
body.light .cell-arrow {
  font-size: 30px;
  font-weight: 400;
  color: var(--wx-arrow);
  line-height: 1;
  margin-right: -3px;
  transform: scaleX(0.9);
}

/* ---------- 聊天页（图5/6）：仅输入框白底 ---------- */
body.light #screen-chat {
  background: var(--wx-page);
}
body.light #screen-chat > .nav-bar {
  background: var(--wx-page);
  border-bottom: 0.5px solid var(--wx-border-chat);
}
body.light .chat-body {
  background: var(--wx-page);
}
body.light .chat-body.has-chat-bg {
  background-color: var(--wx-page);
}
body.light .bubble {
  background: #ffffff;
  color: #121212;
  border-radius: 4px;
  font-size: calc(16px * var(--fs-scale));
  font-weight: 400;
  line-height: 1.47;
  padding: 9px 12px;
}
body.light .msg-row.me .bubble {
  background: #95ec69;
  color: #121212;
}
/* 图片消息：无气泡包裹，仅图片圆角（仿微信） */
body.light .bubble.img,
body.light .msg-row.me .bubble.img,
body.light .msg-row:not(.me) .bubble.img {
  background: transparent !important;
  padding: 0 !important;
}
body.light .bubble.img img {
  border-radius: 4px;
  display: block;
  max-width: min(200px, 48vw);
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
}
body.light .bubble.img.has-caption {
  background: transparent !important;
  padding: 0 !important;
}
body.light .bubble.img.has-caption img {
  border-radius: 4px;
}
body.light .bubble.img.has-caption .bot-caption {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--wx-card);
  color: var(--wx-text);
}
body.light .msg-row.me .bubble.img.has-caption .bot-caption {
  background: #95ec69;
  color: #121212;
}
/* 聊天视频：指定框内 cover 拉满，不要黑边 */
body.light .bubble.video,
body.light .msg-row.me .bubble.video {
  width: 152px;
  height: 202px;
  max-width: min(200px, 48vw);
  max-height: 280px;
  background: #000 !important;
}
body.light .bubble.video video,
body.light .bubble.video .video-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
body.light .msg-time {
  color: var(--wx-text-3);
  font-size: 12px;
}
body.light .msg-sys:not(.msg-sys-rp):not(.msg-sys-gift):not(.msg-sys-whisper):not(.msg-sys-plain) {
  color: var(--wx-text-3, #b2b2b2);
  font-size: 14px;
  font-weight: 400;
  background: rgba(0, 0, 0, .04) !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
}
body.light .msg-sys-plain {
  color: var(--wx-text-3, #b2b2b2);
  font-size: 12px;
  background: none !important;
  border: none !important;
}
body.light .msg-sys-rp {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--wx-text-3, #b2b2b2);
  font-size: 12px;
  font-weight: 400;
}
body.light .msg-sys-gift,
body.light .msg-sys-whisper {
  background: rgba(0, 0, 0, .04) !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
}

/* 输入栏：整条灰底，只有输入框白底 */
body.light .chat-input-bar {
  background: var(--wx-page);
  border-top: 0.5px solid var(--wx-border-chat);
}
body.light .chat-muteall-tip {
  background: var(--wx-page);
  border-top: 0.5px solid var(--wx-border-chat);
}
body.light .chat-pin-bar {
  background: var(--wx-page);
  border-bottom: 0.5px solid var(--wx-border-chat);
}
body.light #chat-input,
body.light #btn-voice-hold {
  background: var(--wx-card);
  border-radius: 4px;
  font-size: 16px;
  color: var(--wx-text);
}
body.light .ci-btn {
  color: #191919;
}
body.light .chat-panel,
body.light .emoji-panel {
  background: var(--wx-page);
  border-top: 0.5px solid var(--wx-border);
}
body.light .cp-item .cp-ico {
  background: var(--wx-card);
  border-radius: 8px;
}

/* ---------- 「我」页 / 发现：选项白底（图3/4/5） ---------- */
body.light .me-head {
  background: var(--wx-card);
}
body.light #page-discover .list.gap .cell,
body.light #page-me .list.gap .cell {
  background: var(--wx-card);
}

/* ---------- 朋友圈发表/选择：选项白底（图2） ---------- */
body.light .modal-page .pub-text,
body.light .modal-page .pub-grid {
  background: var(--wx-card);
}
body.light .modal-page .pub-opts {
  background: var(--wx-page);
  margin-top: 8px;
}
body.light .modal-page .pub-opt {
  background: var(--wx-card);
  border-bottom-color: var(--wx-border-hair);
}
body.light .modal-page .pub-opt:first-child {
  border-top: 0;
}
body.light .modal-page .mo-pick-foot {
  background: var(--wx-card);
  border-top-color: var(--wx-border-hair);
}
body.light .modal-page .list .cell {
  background: var(--wx-card);
}
body.light .modal-page .form-page-body {
  background: var(--wx-page);
}

/* ---------- 链接色 ---------- */
.auth-links a,
.auth-bottom a,
.auth-agree a,
.rp-kind a {
  color: var(--wx-link);
}
.msg-remind-card .acts .ok {
  background: var(--wx-green);
}

/* ---------- 弹层页 ---------- */
body.light .modal-page {
  background: var(--wx-page);
}

/* ---------- 朋友圈 ---------- */
body.light .mo-name {
  color: var(--wx-link);
  font-weight: 500;
}
body.light .mo-text {
  color: var(--wx-text);
  font-size: calc(16px * var(--fs-scale));
  line-height: 1.5;
}

/* ---------- Toast / 系统提示：统一灰色 ---------- */
body.light #toast,
body:not(.light) #toast,
#toast {
  background: rgba(120, 120, 120, .94) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
  padding: 10px 18px;
  text-shadow: none;
}
#toast-loading,
body.light #toast-loading {
  background: rgba(120, 120, 120, .94) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
}
body.light .msg-sys:not(.msg-sys-rp):not(.msg-sys-gift):not(.msg-sys-whisper):not(.msg-sys-plain) {
  color: var(--wx-text-3, #b2b2b2);
  font-weight: 400;
}

/* ---------- 红包/转账气泡：恢复 260；空间不足时 max-width:100% 防叠头像 ---------- */
body.light .bubble.rp,
body.light .bubble.tf,
.bubble.rp,
.bubble.tf {
  width: 260px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
body.light .msg-content .bubble.rp,
body.light .msg-content .bubble.tf,
.msg-content .bubble.rp,
.msg-content .bubble.tf {
  width: 260px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
body.light .bubble.rp.opened,
body.light .bubble.tf.opened,
body.light .msg-row.me .bubble.rp.opened,
body.light .msg-row.me .bubble.tf.opened,
.bubble.rp.opened,
.bubble.tf.opened,
.msg-row.me .bubble.rp.opened,
.msg-row.me .bubble.tf.opened {
  background: #d0b392 !important;
}
body.light .msg-row.me .bubble.rp.opened::after,
body.light .msg-row.me .bubble.tf.opened::after,
.msg-row.me .bubble.rp.opened::after,
.msg-row.me .bubble.tf.opened::after {
  border-left-color: #d0b392 !important;
  border-right-color: transparent !important;
}
body.light .msg-row:not(.me) .bubble.rp.opened::after,
body.light .msg-row:not(.me) .bubble.tf.opened::after,
.msg-row:not(.me) .bubble.rp.opened::after,
.msg-row:not(.me) .bubble.tf.opened::after {
  border-right-color: #d0b392 !important;
  border-left-color: transparent !important;
}
body.light .rp-body,
.rp-body {
  padding: 11px 12px 10px !important;
  min-height: 52px !important;
  box-sizing: border-box;
}
body.light .rp-ico,
.rp-ico {
  width: 34px !important;
  height: 34px !important;
}
body.light .rp-ico .wx-rp-svg,
body.light .rp-ico .wx-tf-svg,
body.light .rp-ico .wx-pay-ico,
.rp-ico .wx-rp-svg,
.rp-ico .wx-tf-svg,
.rp-ico .wx-pay-ico {
  width: 34px !important;
  height: 34px !important;
}
body.light .rp-note,
.rp-note {
  font-size: 15px !important;
  line-height: 1.32 !important;
}
body.light .rp-state,
.rp-state {
  font-size: 11px !important;
  margin-top: 3px !important;
}
body.light .rp-foot,
.rp-foot {
  padding: 5px 12px 7px !important;
  font-size: 11px !important;
  border-top-color: rgba(255, 255, 255, .18) !important;
}
body.light .bubble.rp.opened .rp-foot,
body.light .bubble.tf.opened .rp-foot,
.bubble.rp.opened .rp-foot,
.bubble.tf.opened .rp-foot {
  border-top-color: rgba(255, 255, 255, .16) !important;
}