/**
 * 灵犀 IM - Telegram + WeChat 融合风格
 * Mobile-first responsive design
 * rem-based (root font-size set by fontSize.js)
 */

/* ===== CSS Variables (Telegram-inspired) ===== */
:root {
  /* 主色调 - Telegram Blue */
  --tg-accent: #3390EC;
  --tg-accent-light: #6AB3F3;
  --tg-accent-dark: #2678C7;
  /* 背景色 */
  --tg-bg: #FFFFFF;
  --tg-chat-bg: #e6ebee;
  --tg-panel-bg: #FFFFFF;
  --tg-input-bg: #f4f4f5;
  /* 文字色 */
  --tg-text-primary: #000000;
  --tg-text-secondary: #707579;
  --tg-text-disabled: rgba(0, 0, 0, 0.38);
  /* 边框 */
  --tg-border: #DADCE0;
  /* 气泡 - WeChat 绿色保持 */
  --tg-bubble-sent: #EEFFDE;
  --tg-bubble-recv: #FFFFFF;
  --tg-bubble-sent-color: #000000;
  /* 徽章 */
  --tg-badge: #4DCD5E;
  --tg-badge-muted: #C4C9CC;
  --tg-online: #0AC630;
  /* 兼容旧变量 */
  --wc-green: #07C160;
  --wc-bg: #e6ebee;
  --wc-white: #FFFFFF;
  --wc-border: #DADCE0;
  --wc-text: #000000;
  --wc-text-light: #707579;
  --wc-text-hint: #8D969C;
  --wc-badge: #4DCD5E;
  --wc-bubble-sent: #EEFFDE;
  --wc-bubble-recv: #FFFFFF;
  --wc-input-bg: #f4f4f5;
  --vh: 1vh;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--wc-text);
  background: var(--wc-bg);
  -webkit-font-smoothing: antialiased;
}

body.overflow { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
input, button, textarea { font-family: inherit; font-size: inherit; outline: none; }
button { cursor: pointer; border: none; background: none; }

/* ===== Utility Classes ===== */
.clearfix::after { content: ''; display: table; clear: both; }
.flexbox { display: flex; }
.flex__direction-column { flex-direction: column; }
.flex1 { flex: 1; min-width: 0; }
.flex-alignc { align-items: center; }
.flex-selft { align-self: center; }

/* ===== Split Lines & Shadows ===== */
.splitline::after {
  content: ''; border-right: 1px solid var(--wc-border);
  position: absolute; top: .25rem; bottom: .25rem; right: 0;
}
.splitlineL::after {
  content: ''; border-left: 1px solid var(--wc-border);
  position: absolute; top: .25rem; bottom: .25rem; left: 0;
}
.shadowB { box-shadow: 0 .01rem .1rem rgba(100,100,100,.1); }
.transit { transition: all .3s; }

/* ===== Touch Feedback ===== */
.wc__material-cell:active { background-color: #f0f0f0 !important; }

/* ===== Badge ===== */
.wc__badge {
  background-color: #F85542;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  font-family: -apple-system, sans-serif;
  font-weight: 500;
  text-align: center;
  padding: 2px 6px;
  line-height: 1.2;
  min-width: 18px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(248, 85, 66, 0.3);
}
.wc__badge-dot { padding: 5px; min-width: 0; }

/* ===== Border Lines (1px hairline) ===== */
.wc__borT, .wc__borB { position: relative; }
.wc__borT::before {
  content: ''; height: 1px; width: 100%;
  position: absolute; left: 0; top: 0;
  background: var(--wc-border);
  transform: scaleY(0.5);
}
.wc__borB::after {
  content: ''; height: 1px; width: 100%;
  position: absolute; left: 0; bottom: 0;
  background: var(--wc-border);
  transform: scaleY(0.5);
}

/* ===== Arrow ===== */
.wc__arr::after {
  content: ''; border-color: #d9d9d9;
  border-style: solid; border-width: .06rem .06rem 0 0;
  display: inline-block; vertical-align: middle;
  margin-right: -.07rem; height: .45rem; width: .45rem;
  position: relative;
  transform: rotate(45deg) scale(.5);
}

/* ===== Primary Button ===== */
.wc__btn-primary {
  display: block; width: 100%; height: 44px;
  background: var(--wc-green); color: #fff;
  border: none; border-radius: 4px;
  font-size: 16px; text-align: center;
  line-height: 44px; cursor: pointer;
}
.wc__btn-primary:active { opacity: .85; }


/* ============================================================
 * LOGIN PAGE
 * ============================================================ */
.login-page {
  min-height: 100dvh; background: var(--wc-white);
  display: flex; flex-direction: column;
  padding: 0 30px;
  justify-content: center;
}
.login-logo {
  text-align: center; padding: 80px 0 40px;
}
.login-logo .icon { font-size: 48px; line-height: 1.2; }
.login-logo h1 {
  font-size: 24px; color: var(--wc-text);
  margin: 10px 0 5px; font-weight: 600;
}
.login-logo p { font-size: 14px; color: var(--wc-text-light); }
.login-form { width: 100%; max-width: 360px; margin: 0 auto; }
.login-form input {
  width: 100%; height: 48px;
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  font-size: 15px; padding: 0 16px;
  margin-bottom: 12px; background: var(--tg-bg);
  color: var(--tg-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-form input:focus {
  border-color: var(--tg-accent);
  box-shadow: 0 0 0 3px rgba(51, 144, 236, 0.12);
  outline: none;
}
.login-form input::placeholder { color: var(--wc-text-hint); }
.login-form .login-btn {
  width: 100%; height: 48px;
  background: var(--tg-accent); color: #fff;
  border: none; border-radius: 24px;
  font-size: 15px; font-weight: 500;
  margin-top: 16px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(51, 144, 236, 0.3);
  transition: all 0.2s;
}
.login-form .login-btn:active {
  opacity: .9; transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(51, 144, 236, 0.2);
}
.login-footer {
  text-align: center; color: var(--wc-text-light);
  font-size: 12px; margin-top: auto;
  padding: 20px 0;
}


/* ============================================================
 * MAIN LAYOUT
 * ============================================================ */
.wc__home-wrapper {
  height: calc(var(--vh, 1vh) * 100); position: relative;
}


/* ===== Header Bar ===== */
.wc__headerBar .inner {
  height: .9rem; width: 100%; z-index: 999; position: absolute;
}
.wc__headerBar.fixed { padding-bottom: .9rem; }
.wc__headerBar.fixed .inner {
  max-width: 750px; width: 100%;
  position: fixed; top: 0;
  background-color: #f7f7fa;
}
.wc__headerBar .inner a:active { background-color: rgba(255,255,255,.15); }
.wc__headerBar .inner .barTit {
  color: #252525; font-size: .3rem;
  line-height: .9rem; position: relative;
}
.wc__headerBar .inner .barTxt {
  color: #fff; font-size: .24rem;
  padding: 0 .35rem; line-height: .9rem; position: relative;
}
.wc__headerBar .inner .batBtn {
  color: var(--tg-accent); font-size: .24rem; font-weight: 500;
  padding: 0 .35rem; line-height: .9rem; position: relative;
}
.wc__headerBar .inner .barTitLg {
  font-size: .44rem; padding-left: .25rem;
  font-weight: 900; color: #121212;
}
.wc__headerBar .inner .close {
  background: url(../img/topbar/icon__close-white.png) no-repeat center;
  background-size: .36rem; width: .85rem; position: relative;
}
.wc__headerBar .inner .back {
  background: url(../img/topbar/icon__back-white.png) no-repeat center;
  background-size: .36rem; width: .85rem; position: relative;
}
.wc__headerBar .inner .barIco { width: 1.15rem; position: relative; }
.wc__headerBar .inner .u-one {
  background: url(../img/topbar/icon__user.png) no-repeat center;
  background-size: .36rem;
}
.wc__headerBar .inner .u-qun {
  background: url(../img/topbar/icon__users.png) no-repeat center;
  background-size: .36rem;
}
.wc__headerBar .inner .sear {
  background: url(../img/topbar/icon__sear.png) no-repeat center;
  background-size: .36rem;
}
.wc__headerBar .inner .add {
  background: url(../img/topbar/icon__add.png) no-repeat center;
  background-size: .36rem;
}


/* ===== Header Popup Menu ===== */
.wc__popup-topbar { position: relative; display: none; }
.wrap__topbar-mask {
  background: rgba(100,100,100,0); height: 100%; width: 100%;
  position: fixed; left: 0; top: 0; z-index: 2008;
}
.wrap__topbar-menu {
  max-width: 750px; width: 100%;
  position: fixed; top: 1rem; z-index: 2008;
}
.wrap__topbar-menu ul {
  background: #fff; border-radius: .03rem;
  box-shadow: 0 .05rem .2rem rgba(0,0,0,.2);
  position: absolute; right: .1rem;
}
.wrap__topbar-menu ul li {
  color: #666; font-size: .28rem;
  padding: .3rem; position: relative;
}
.wrap__topbar-menu ul li::after {
  content: ''; background-color: #e2e2e2;
  height: 1px; position: absolute;
  left: .2rem; right: .2rem; bottom: 0;
  transform: scaleY(0.5);
}
.wrap__topbar-menu ul li:last-child::after { display: none; }
.wrap__topbar-menu ul li .ico {
  display: inline-block; vertical-align: top;
  margin-right: .2rem; height: .48rem; width: .48rem; position: relative;
}
.wrap__topbar-menu ul li .ico.i1 {
  background: url(../img/topbar/icon__qun-chat.png) no-repeat center;
  background-size: .48rem;
}
.wrap__topbar-menu ul li .ico.i2 {
  background: url(../img/topbar/icon__add-friend.png) no-repeat center;
  background-size: .48rem;
}
.wrap__topbar-menu ul li .ico.i3 {
  background: url(../img/topbar/icon__help.png) no-repeat -.02rem center;
  background-size: .48rem;
}


/* ===== Swiper Tab Bar ===== */
.wc__swiper-tabBar .swiper-slide {
  height: calc(calc(var(--vh, 1vh) * 100) - 2rem); position: relative; z-index: 11;
}
.wc__scrolling-panel {
  overflow: auto; -webkit-overflow-scrolling: touch;
  height: 100%; position: relative;
}


/* ===== Chat Record List (Tab 1) ===== */
.wc__recordChat-list ul li {
  padding: .2rem .3rem; padding-top: 15px; position: relative;
}
.wc__recordChat-list ul li::before {
  content: ''; height: 100%; width: 100%;
  position: absolute; left: 0; top: 0;
}
.wc__recordChat-list ul li::after {
  content: ''; height: 1px; width: 100%;
  position: absolute; left: 0; bottom: 0;
  background: var(--wc-border);
  transform: scaleY(.5);
}
.wc__recordChat-list ul li .img {
  margin-right: .3rem; height: .9rem; width: .9rem; position: relative;
}
.wc__recordChat-list ul li .img img {
  float: left; height: 100%; width: 100%;
  object-fit: contain; border-radius: 6px;
}
.wc__recordChat-list ul li .imgs {
  background: #e9e9e9; border-radius: 6px;
}
.wc__recordChat-list ul li .imgs img {
  margin-left: .03rem; margin-top: .03rem;
  height: .26rem; width: .26rem;
}
.wc__recordChat-list ul li .img .wc__badge {
  position: absolute; top: -5px; right: -10px;
}
.wc__recordChat-list ul li .title { color: #333; font-size: .3rem; }
.wc__recordChat-list ul li .desc {
  color: #999; font-size: .05rem;
  font-family: Verdana, sans-serif; margin-top: .1rem;
}
.wc__recordChat-list ul li .time {
  color: #ccc; font-size: .2rem;
  font-family: Verdana, sans-serif;
  margin-top: .1rem; text-align: right; min-width: 1rem;
}


/* ===== Address Book (Tab 2) ===== */
.wc__addrFriend-showletter {
  background: rgba(0,0,0,.5); border-radius: .05rem;
  color: #fff; font-size: .32rem;
  font-family: Verdana, sans-serif;
  text-align: center; margin: -.5rem 0 0 -.5rem;
  height: 1rem; line-height: 1rem; width: 1rem;
  position: absolute; left: 50%; top: 50%;
  z-index: 11; display: none;
}
.wc__addrFriend-floatletter {
  color: #666; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; width: .4rem;
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 11;
}
.wc__addrFriend-floatletter em {
  flex: 1; font-size: .24rem; font-family: arial;
  text-align: center; height: 3.846%;
  align-self: center; width: 100%;
}
.wc__addrFriend-list ul li .initial {
  font-size: .24rem; font-family: Verdana, sans-serif; padding: 0 .3rem;
}
.wc__addrFriend-list ul li:first-child .initial::before { display: none; }
.wc__addrFriend-list ul li .row {
  background: #fff; padding: .15rem .3rem; position: relative;
}
.wc__addrFriend-list ul li .row::after {
  content: ''; background-color: #e3e3e3;
  height: 1px; width: auto;
  position: absolute; left: .3rem; right: .4rem; bottom: 0;
  transform: scaleY(.5);
}
.wc__addrFriend-list ul li .row:last-child::after { display: none; }
.wc__addrFriend-list ul li .row .uimg {
  display: inline-block; vertical-align: top;
  margin-right: .2rem; height: .7rem; width: .7rem;
}
.wc__addrFriend-list ul li .row .name { color: #333; font-size: .28rem; }
.wc__addrFriend-list .total {
  color: #999; font-size: .28rem;
  font-family: arial; padding: .4rem 0; text-align: center;
}


/* ===== User Center (Tab 3) ===== */
.wc__ucenter-list { padding-bottom: .35rem; }
.wc__ucenter-list ul li { margin-top: .35rem; }
.wc__ucenter-list ul li .item {
  background: #fff; padding: .25rem .3rem; position: relative;
}
.wc__ucenter-list ul li .item::after {
  content: ''; background-color: #e3e3e3;
  height: 1px; width: auto;
  position: absolute; left: .3rem; right: .3rem; bottom: 0;
  transform: scaleY(0.5);
}
.wc__ucenter-list ul li .item:last-child::after { display: none; }
.wc__ucenter-list ul li .item .uimg {
  display: inline-block; margin-right: .4rem;
  vertical-align: top; height: 1.1rem; width: 1.1rem;
}
.wc__ucenter-list ul li .item .icon {
  display: inline-block; margin-left: .1rem;
  vertical-align: top; margin-right: .4rem;
  height: .5rem; width: .5rem;
}
.wc__ucenter-list ul li .item .txt { color: #333; font-size: .28rem; }
.wc__ucenter-list ul li .item .txt i {
  color: #aaa; display: block;
  font-size: .24rem; font-family: Verdana, sans-serif;
  margin-top: .1rem;
}
.wc__ucenter-list ul li .item .lbl { color: #999; font-size: .24rem; }
.wc__ucenter-list ul li .item .qrcode { position: relative; }
.wc__ucenter-list ul li .item .qrcode img {
  vertical-align: middle; height: .5rem; width: .5rem;
}


/* ===== Bottom Tab Bar ===== */
.wechat__tabBar .bottomfixed {
  background: #f7f7fa; max-width: 750px;
  height: 1.1rem; width: 100%; z-index: 1001;
}
.wechat__tabBar ul { text-align: center; height: 1.1rem; }
.wechat__tabBar ul li {
  background: none; border-radius: 0; opacity: 1;
  height: 1.1rem; width: auto;
}
.wechat__tabBar ul li .ico {
  display: inline-block; vertical-align: top;
  margin-top: .15rem; height: .48rem; width: .48rem; position: relative;
}
.wechat__tabBar ul li .ico.i1 {
  background: url(../img/tabbar/icon_chat.png) no-repeat center; background-size: .41rem;
}
.wechat__tabBar ul li .ico.i2 {
  background: url(../img/tabbar/icon_abook.png) no-repeat center; background-size: .5rem;
}
.wechat__tabBar ul li .ico.i3 {
  background: url(../img/tabbar/icon_explore.png) no-repeat center; background-size: .42rem;
}
.wechat__tabBar ul li .ico.i4 {
  background: url(../img/tabbar/icon_me.png) no-repeat center; background-size: .42rem;
}
.wechat__tabBar ul li .ico.i5 {
  background: url(../img/tabbar/icon_dt.png) no-repeat center; background-size: .49rem;
}

/* Tab bar active states */
.wechat__tabBar ul li.on .ico.i1,
.wechat__tabBar ul li.swiper-pagination-bullet-active .ico.i1 {
  background: url(../img/tabbar/icon_chat_HL.png) no-repeat center; background-size: .5rem;
}
.wechat__tabBar ul li.on .ico.i2,
.wechat__tabBar ul li.swiper-pagination-bullet-active .ico.i2 {
  background: url(../img/tabbar/icon_abook_HL.png) no-repeat center; background-size: .57rem;
}
.wechat__tabBar ul li.on .ico.i3,
.wechat__tabBar ul li.swiper-pagination-bullet-active .ico.i3 {
  background: url(../img/tabbar/icon_explore_HL.png) no-repeat center; background-size: .49rem;
}
.wechat__tabBar ul li.on .ico.i4,
.wechat__tabBar ul li.swiper-pagination-bullet-active .ico.i4 {
  background: url(../img/tabbar/icon_me_HL.png) no-repeat center; background-size: .49rem;
}
.wechat__tabBar ul li.on .ico.i5,
.wechat__tabBar ul li.swiper-pagination-bullet-active .ico.i5 {
  background: url(../img/tabbar/icon_dt_HL.png) no-repeat center; background-size: .55rem;
}
.wechat__tabBar ul li .ico .wc__badge { position: absolute; top: -3px; right: -18px; }
.wechat__tabBar ul li .ico .wc__badge-dot { right: -6px; }
.wechat__tabBar ul li span {
  color: #acb5be; display: block;
  font-size: .24rem; margin-top: .1rem;
}
.wechat__tabBar ul li.on span { color: #45c00c; }
.wechat__tabBar ul li.swiper-pagination-bullet-active span { color: var(--tg-accent); }

/* Touch-friendly minimum target sizes */
.wechat__tabBar li { min-height: 44px; }
.wc__recordChat-list ul li { min-height: 56px; }
.wc__ucenter-list ul li .item { min-height: 56px; }
.wc__ucinfo-detail ul li .item { min-height: 56px; }


/* ============================================================
 * CHAT PAGE
 * ============================================================ */
.wc__chat-wrapper {
  position: absolute; z-index: 2;
  height: 100%; max-width: 750px; width: 100%;
}
.wc__chatMsg-panel {
  overflow: auto; -webkit-overflow-scrolling: touch;
  width: 100%; position: relative;
}
.wc__chatMsg-panel .chatMsg-cnt { padding: .15rem; position: relative; }

/* Chat message items */
.chatMsg-cnt ul li {
  display: flex; margin-bottom: .25rem;
}
.chatMsg-cnt ul li.time { padding-top: .25rem; }
.chatMsg-cnt ul li.time span {
  background: rgba(0,0,0,.1); color: #fff;
  border-radius: .05rem; display: block;
  font-size: .22rem; font-family: Verdana, sans-serif;
  overflow: hidden; margin: 0 auto;
  padding: .05rem .1rem; line-height: normal; max-width: 90%;
}
.chatMsg-cnt ul li.notice span {
  color: #797979; border-radius: .05rem;
  display: block; font-size: .24rem;
  font-family: Verdana, sans-serif;
  overflow: hidden; margin: 0 auto;
  padding: .1rem; line-height: normal; max-width: 90%;
}
.chatMsg-cnt ul li.notice span a { color: #22a7ff; }
.chatMsg-cnt ul li .avatar {
  display: block; overflow: hidden;
  height: .8rem; width: .8rem; position: relative;
  border-radius: 6px;
}
.chatMsg-cnt ul li .avatar img {
  vertical-align: top; height: 100%; width: 100%;
}
.chatMsg-cnt ul li .avatar::after {
  background-color: transparent; content: "";
  height: 100%; width: 100%;
  position: absolute; left: 0; top: 0;
}
.chatMsg-cnt ul li .content { flex: 1; min-width: 0; }
.chatMsg-cnt ul li .content .author {
  color: #aaa; font-size: .2rem; margin: 0 .2rem;
}
.chatMsg-cnt ul li .content .msg {
  border-style: solid; border-width: 1px;
  border-radius: .07rem; color: #333;
  float: left; font-size: .28rem;
  margin: 0 .2rem; padding: .2rem;
  word-wrap: break-word; word-break: break-all;
  min-height: .6rem; max-width: 5.4rem;
  position: relative; transition: all .3s;
}
.chatMsg-cnt ul li .content .msg .face { vertical-align: top; height: .4rem; }
.chatMsg-cnt ul li .content .msg .lg-face { vertical-align: top; max-height: 2.5rem; max-width: 2.5rem; }
.chatMsg-cnt ul li .content .msg a { color: #22a7ff; font-family: arial; }
.chatMsg-cnt ul li .content .msg a:active { background-color: #c2e6fd; }

/* Received messages */
.chatMsg-cnt ul li.others .content .msg {
  background-color: var(--wc-bubble-recv); border-color: #f0f0f0;
}
.chatMsg-cnt ul li.others .content .msg:active,
.chatMsg-cnt ul li.others .content .msg.taped {
  background-color: #e9e9e9; border-color: #dedede;
}
/* Sent messages */
.chatMsg-cnt ul li.me .content .author { text-align: right; }
.chatMsg-cnt ul li.me .content .msg {
  float: right;
  background-color: var(--tg-bubble-sent);
  border-color: #c8e6c9;
}
.chatMsg-cnt ul li.me .content .msg:active,
.chatMsg-cnt ul li.me .content .msg.taped {
  background-color: #c8e6c9; border-color: #a5d6a7;
}

/* Chat bubble arrows */
.chatMsg-cnt ul li.others .content .msg::before {
  background: inherit; border-color: inherit;
  left: -.115rem;
  transform: translate(0, -50%) rotate(-135deg);
}
.chatMsg-cnt ul li.me .content .msg::before {
  background: inherit; border-color: inherit;
  right: -.11rem;
  transform: translate(0, -50%) rotate(45deg);
}

/* Picture & video messages */
.chatMsg-cnt ul li .content .picture::before,
.chatMsg-cnt ul li .content .video::before { display: none; }
.chatMsg-cnt ul li .content .picture,
.chatMsg-cnt ul li .content .video {
  background-color: transparent !important;
  border-width: 0; border-radius: .07rem;
  padding: 0; overflow: hidden; position: relative;
}
.chatMsg-cnt ul li .content .picture.taped,
.chatMsg-cnt ul li .content .video.taped { opacity: .5; }
.chatMsg-cnt ul li .content .picture .img__pic,
.chatMsg-cnt ul li .content .video .img__video {
  vertical-align: top; pointer-events: auto;
  max-height: 5.4rem; max-width: 5.4rem;
}
.chatMsg-cnt ul li .content .video::after {
  content: '';
  background: url(../img/wchat/icon-play.png) no-repeat center;
  background-size: .6rem; height: 100%; width: 100%;
  position: absolute; left: 0; top: 0;
}
.chatMsg-cnt ul li .content .lgface {
  background-color: transparent !important;
  border-width: 0; border-radius: 0;
  padding: 0; overflow: hidden; position: relative;
}
.onez-at { color: #006efe; }

/* New message notification */
.wc__chatMsg-panel .chatMsg-notice {
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
  color: #12b7f5; font-size: .24rem;
  font-family: arial; padding: 0 .25rem;
  line-height: .7rem;
  position: fixed; top: 1.6rem; right: 0;
}

/* Long-press context menu */
.wc__chatTapMenu { display: inline-block; }
.wc__chatTapMenu .menu {
  background: #313131; border-radius: .07rem;
  overflow: hidden; padding: 0 .1rem; text-align: center;
}
.wc__chatTapMenu .menu::before {
  content: ""; border-style: solid dashed dashed dashed;
  border-width: .16rem; font-size: 0;
  overflow: hidden; height: 0; width: 0;
  position: absolute; left: 50%; bottom: -.14rem;
  border-color: #313131 transparent transparent transparent;
  transform: translate(-50%, 50%);
}
.wc__chatTapMenu .menu a {
  color: #fff; font-size: .2rem;
  display: inline-block; vertical-align: top;
  padding: .07rem .3rem;
}
.wc__chatTapMenu .menu a:active { background-color: #515151; }
.wc__chatTapMenu .menu a .ico {
  display: block; margin: .03rem auto;
  height: .45rem; width: .45rem;
}
.wc__chatTapMenu .menu a .ico.i1 { background: url(../img/wchat/icon__chat-copy.png) no-repeat; background-size: cover; }
.wc__chatTapMenu .menu a .ico.i2 { background: url(../img/wchat/icon__chat-collect.png) no-repeat; background-size: cover; }
.wc__chatTapMenu .menu a .ico.i3 { background: url(../img/wchat/icon__chat-save.png) no-repeat; background-size: cover; }
.wc__chatTapMenu .menu a .ico.i4 { background: url(../img/wchat/icon__chat-revoke.png) no-repeat; background-size: cover; }
.wc__chatTapMenu .menu a .ico.i5 { background: url(../img/wchat/icon__chat-del.png) no-repeat; background-size: cover; }


/* ===== Footer Tool Panel ===== */
.wc__footTool-panel {
  background: #f6f7f9; max-width: 750px;
  width: 100%; z-index: 1005;
}

/* Editor */
.wc__editor-panel { padding: .15rem .2rem; align-items: flex-end; }
.wc__editor-panel::before { border-top-color: #d9d9d9; }
.wc__editor-panel .wrap-editor { max-width: 100%; }
.wc__editor-panel .wrap-editor .editor {
  background: none; color: #333; caret-color: #12b7f5;
  font-size: .28rem; padding: .1rem .15rem;
  overflow-y: auto; overflow-x: hidden;
  word-wrap: break-word; word-break: break-all;
  line-height: .4rem; max-height: 2.3rem;
  max-width: 100%; position: relative;
}
.wc__editor-panel .wrap-editor .editor::after {
  content: ''; border-bottom: 1px solid #d9d9d9;
  height: 1px; width: 100%;
  position: absolute; left: 0; bottom: 0;
  transform: scaleY(0.5); transition: border-color .3s;
}
.wc__editor-panel .wrap-editor .editor:focus::after { border-bottom-color: #12b7f5; }
.wc__editor-panel .wrap-editor .editor .face { vertical-align: middle; height: .4rem; }
.wc__editor-panel .btn { margin-left: .1rem; height: .7rem; width: .7rem; }
.wc__editor-panel .btn-emotion { background: url(../img/wchat/icon__emotion.png) no-repeat; background-size: cover; }
.wc__editor-panel .btn-choose { background: url(../img/wchat/icon__choose.png) no-repeat; background-size: cover; }
.wc__editor-panel .btn-submit {
  background: #ededed; border: 0; color: #252525;
  font-size: .28rem; outline: none;
  margin-left: .15rem; margin-bottom: .05rem;
  padding: 0 .15rem; height: .6rem;
}

/* Choose panel (emotion / stickers / actions) */
.wc__choose-panel { height: 5.8rem; }
.wc__choose-panel::before { border-top-color: #d9d9d9; }
.wc__choose-panel .wrap-emotion { height: 100%; }
.wc__choose-panel .wrap-emotion .emotion__cells { height: 100%; }
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .swiper-container { height: 100%; }
/* Small stickers */
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__sm-list {
  display: inline-block; margin-right: -.15rem; padding: .25rem .15rem 0;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__sm-list span {
  float: left; text-align: center; margin-top: .35rem;
  margin-right: .15rem; height: .9rem; width: .9rem;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__sm-list span:active {
  background-color: #f3f3f3; border-radius: .07rem;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__sm-list span img {
  margin-top: .15rem; height: .6rem; width: .6rem;
}
/* Large stickers */
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__lg-list {
  display: inline-block; margin-right: -.366rem; padding: .25rem .2rem 0;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__lg-list span {
  float: left; text-align: center; margin-top: .35rem;
  margin-right: .366rem; height: 1.5rem; width: 1.5rem;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__lg-list span:active {
  background-color: #f3f3f3; border-radius: .07rem;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .face__lg-list span img {
  margin-top: .1rem; height: 1.3rem; width: 1.3rem;
}
/* Pagination dots */
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .pagination-emotion {
  text-align: center; position: absolute; bottom: .1rem; z-index: 11;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .pagination-emotion .swiper-pagination-bullet {
  opacity: .1; height: 6px; width: 6px;
}
.wc__choose-panel .wrap-emotion .emotion__cells-swiper .pagination-emotion .swiper-pagination-bullet-active {
  background: #999; opacity: 1; transform: scale(1.3);
}
/* Sticker category footer */
.wc__choose-panel .wrap-emotion .emotion__cells-footer {
  border-top: 1px solid #e9e9e9; white-space: nowrap;
  overflow: hidden; overflow-x: auto;
  -webkit-overflow-scrolling: touch; height: .75rem; width: 100%;
}
.wc__choose-panel .wrap-emotion .emotion__cells-footer ul { font-size: 0; }
.wc__choose-panel .wrap-emotion .emotion__cells-footer ul li {
  border-left: 1px solid #e9e9e9; display: inline-block;
  padding: .1rem 0; text-align: center; height: .75rem; width: 1.26rem;
}
.wc__choose-panel .wrap-emotion .emotion__cells-footer ul li:last-child { border-right: 1px solid #e9e9e9; }
.wc__choose-panel .wrap-emotion .emotion__cells-footer ul li.cur { background-color: #e9e9e9; }
.wc__choose-panel .wrap-emotion .emotion__cells-footer ul li img { height: 100%; }
.wc__choose-panel .wrap-emotion .emotion__cells-footer ul li.swiperTmplSet img { height: 100%; }
.wc__choose-panel .wrap-emotion .emotion__cells-footer::-webkit-scrollbar { display: none; }

/* Action grid (camera, album, etc.) */
.wc__choose-panel .wrap-choose ul { display: inline-block; padding: 0 .4rem; width: 100%; }
.wc__choose-panel .wrap-choose ul li {
  float: left; text-align: center; margin-top: .8rem; width: 25%;
}
.wc__choose-panel .wrap-choose ul li a { display: inline-block; }
.wc__choose-panel .wrap-choose ul li a .img {
  display: inline-block; height: 1.2rem; width: 1.2rem; position: relative;
}
.wc__choose-panel .wrap-choose ul li a .img::before {
  content: ''; background-color: #fff;
  border: 1px solid #e9e9e9; border-radius: .25rem;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
}
.wc__choose-panel .wrap-choose ul li a .img:active::before { background-color: #f3f3f3; }
.wc__choose-panel .wrap-choose ul li a .img img {
  margin-top: .25rem; height: .7rem; width: .7rem; position: relative; z-index: 9;
}
.wc__choose-panel .wrap-choose ul li a .img input[type="file"] {
  opacity: 0; height: 100%; width: 100%;
  position: absolute; left: 0; top: 0; z-index: 11;
}
.wc__choose-panel .wrap-choose ul li a em {
  color: #999; display: block; font-size: .2rem; margin-top: .1rem;
}


/* ===== WeUI Picker Overrides ===== */
.weui-picker__hd { font-size: 14px !important; }
.weui-picker__hd .weui-picker__action { color: #00c1de; }
.weui-picker__item { font-size: 14px; }
.weui-picker { z-index: 10005 !important; }
.weui-mask, .weui-mask_transparent { z-index: 10004 !important; }


/* ===== Popup Templates (red envelope, tipping, etc.) ===== */
.wc__popupTmpl { text-align: left; }
.wc__popupTmpl .wc-xclose {
  background: url(../img/icon__wc-close.png) no-repeat;
  background-size: 12px; height: 12px; width: 12px;
  position: absolute; top: 10px; right: 10px;
}
.wc__popupTmpl .hdTit { color: #333; font-size: 16px; margin-bottom: 20px; text-align: center; }
.wc__popupTmpl .item {
  background: #fff; border-radius: 4px;
  margin-bottom: 20px; padding: 0 10px;
  align-items: center; height: 50px;
}
.wc__popupTmpl .item-area { height: 60px; }
.wc__popupTmpl .item-upload { background: none; padding: 0; height: auto; }
.wc__popupTmpl .item-gift { height: auto; }
.wc__popupTmpl .item label.txt { color: #333; font-size: 14px; }
.wc__popupTmpl .item label.txt .time { color: #999; display: block; font-size: 12px; margin-top: 2px; }
.wc__popupTmpl .item .unit { color: #333; font-size: 14px; margin-left: 10px; }
.wc__popupTmpl .item .ipt-txt {
  border: 0; font-size: 14px; outline: none;
  text-align: right; padding: 10px 0; min-width: 50px;
}
.wc__popupTmpl .item .describe {
  border: 0; font-size: 14px; font-family: arial;
  outline: none; resize: none; padding: 10px 0;
  height: 100%; width: 100%;
}
.wc__popupTmpl .tips { color: #999; font-size: 12px; font-family: helvetica; margin: -15px 0 15px; padding-left: 9px; }
.wc__popupTmpl .amountTotal { color: #333; font-size: 14px; text-align: center; }
.wc__popupTmpl .amountTotal .num { font-size: 28px; font-family: helvetica; vertical-align: middle; }
.wc__popupTmpl .item-gift .gift {
  align-items: center; justify-content: space-between;
  height: 50px; position: relative;
}
.wc__popupTmpl .item-gift .gift::after {
  content: ''; background-color: #e3e3e3;
  height: 1px; width: 100%;
  position: absolute; left: 0; bottom: 0;
  transform: scaleY(0.5);
}
.wc__popupTmpl .item-gift .gift:last-child::after { display: none; }
.wc__popupTmpl .item-gift .gift .amount { color: #333; font-size: 12px; font-family: arial; }
.wc__popupTmpl .item-gift .gift .amount em { font-size: 15px; }
.wc__popupTmpl .item-gift .gift .amount .chkbox {
  background: #fff; border: 1px solid #00c1de;
  border-radius: 50%; display: inline-block;
  margin-left: 10px; height: 12px; width: 12px;
}
.wc__popupTmpl .item-gift .gift.selected .amount .chkbox { background: #00c1de; }

/* Recharge template */
.wc__popupTmpl.tmpl-recharge .item { border-radius: 0; padding: 0; height: auto; }
.wc__popupTmpl.tmpl-recharge .item .itembox { padding: 15px 0; position: relative; }
.wc__popupTmpl.tmpl-recharge .item .bankLbl { width: 90px; }
.wc__popupTmpl.tmpl-recharge .item .bankName { color: #f90; font-size: 14px; }
.wc__popupTmpl.tmpl-recharge .item .bankQuota { color: #999; font-size: 12px; margin-top: 5px; }
.wc__popupTmpl.tmpl-recharge .item .ipt-txt { font-size: 40px; text-align: left; padding: 0; }
.wc__popupTmpl.tmpl-recharge .item .unit { color: #333; font-size: 40px; margin-left: 0; margin-right: 15px; }
#bankRecharge .popui__panel-btn::after { display: none; }

/* Uploader */
.wc__uploader-panel {
  background: #fff; border: 1px dashed #bbb;
  border-radius: 4px; height: 120px; width: 100%; position: relative;
}
.wc__uploader-panel .wc__uploader-input {
  opacity: 0; height: 100%; width: 100%;
  position: absolute; top: 0; left: 0; z-index: 1;
}
.wc__uploader-panel .wc__uploader-tips {
  color: #bbb; font-size: 14px;
  transform: translate(-50%, -50%);
  padding-top: 35px;
  position: absolute; top: 50%; left: 50%;
}
.wc__uploader-panel .wc__uploader-tips i::before,
.wc__uploader-panel .wc__uploader-tips i::after {
  content: ""; background: #bebebe; border-radius: 20px;
  transform: translate(-50%, -50%);
  position: absolute; top: 30%; left: 50%;
}
.wc__uploader-panel .wc__uploader-tips i::before { height: 30px; width: 6px; }
.wc__uploader-panel .wc__uploader-tips i::after { height: 6px; width: 30px; }


/* ===== Muted / Forbidden ===== */
.wc__talk-notAllowed {
  background: #fff; color: #e64240;
  font-size: .28rem; text-align: center;
  padding: .15rem .2rem; line-height: .7rem;
}
.wc__talk-notAllowed::before { border-top-color: #d9d9d9; }


/* ============================================================
 * FRIEND PROFILE DETAIL
 * ============================================================ */
.wc__ucinfo-detail { padding-bottom: .35rem; }
.wc__ucinfo-detail ul li { margin-top: .35rem; }
.wc__ucinfo-detail ul li .item {
  background: #fff; padding: .25rem .3rem; position: relative;
}
.wc__ucinfo-detail ul li .item::after {
  content: ''; background-color: #e3e3e3;
  height: 1px; width: auto;
  position: absolute; left: .3rem; right: .3rem; bottom: 0;
  transform: scaleY(0.5);
}
.wc__ucinfo-detail ul li .item:last-child::after { display: none; }
.wc__ucinfo-detail ul li .item .uimg {
  display: block; margin-right: .4rem;
  height: 1.1rem; width: 1.1rem;
}
.wc__ucinfo-detail ul li .item .lbl { color: #333; font-size: .28rem; min-width: 1.5rem; }
.wc__ucinfo-detail ul li .item .lbl i {
  color: #aaa; display: block;
  font-size: .24rem; font-family: Verdana, sans-serif;
  margin-top: .1rem;
}
.wc__ucinfo-detail ul li .item .cnt { font-size: .24rem; line-height: .4rem; }
.wc__ucinfo-detail ul li .item .cnt img {
  object-fit: cover; vertical-align: top;
  margin-right: .1rem; height: 1.1rem; width: 1.1rem;
}
.wc__btns-panel { padding: 0 .3rem .3rem; }
.wc__btns-panel a { display: block; margin-bottom: .3rem; }


/* ============================================================
 * PERSONAL INFO / WALLET / BANK CARDS
 * ============================================================ */
.wc__ucinfo-personal ul li { margin-top: .35rem; }
.wc__ucinfo-personal ul li .item {
  background: #fff; padding: .25rem .3rem; position: relative;
}
.wc__ucinfo-personal ul li .item::after {
  content: ''; background-color: #e3e3e3;
  height: 1px; width: auto;
  position: absolute; left: .3rem; right: .3rem; bottom: 0;
  transform: scaleY(0.5);
}
.wc__ucinfo-personal ul li .item:last-child::after { display: none; }
.wc__ucinfo-personal ul li .item .uimg { display: block; height: 1.1rem; width: 1.1rem; }
.wc__ucinfo-personal ul li .item .lbl { color: #333; font-size: .28rem; }
.wc__ucinfo-personal ul li .item .val {
  background: transparent; border: none;
  color: #999; font-size: .24rem; outline: none;
  padding: .1rem 0; text-align: right;
}
.wc__ucinfo-personal ul li .item .area {
  background: transparent; border: none;
  color: #999; font-size: .24rem;
  font-family: arial; outline: none; padding: .1rem 0;
}
.wc__ucinfo-personal ul li .item .chooseImg {
  opacity: 0; height: 100%; width: 100%;
  position: absolute; left: 0; top: 0; z-index: 1;
}

/* Wallet quick actions */
.wc__wallet-quick ul li { padding: .5rem 0; text-align: center; }
.wc__wallet-quick ul li:active { background: #d1c08f !important; }
.wc__wallet-quick ul li .icon { display: block; margin: 0 auto; height: .7rem; width: .7rem; }
.wc__wallet-quick ul li .txt { color: #f8f8f8; display: block; font-size: .28rem; margin-top: .15rem; }
.wc__wallet-quick ul li .txt .num { color: #fff; display: block; font-size: .32rem; font-family: Verdana, sans-serif; }

/* Wallet services grid */
.wc__wallet-services { margin-top: .1rem; }
.wc__wallet-services .tit { font-size: .28rem; padding: .2rem; }
.wc__wallet-services ul { border-top: 1px solid #e9e9e9; flex-wrap: wrap; }
.wc__wallet-services ul li {
  border-left: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;
  padding: .3rem 0; text-align: center;
  min-width: 33.3%; max-width: 33.3%; width: 33.3%;
}
.wc__wallet-services ul li:nth-of-type(3n+1) { border-left: 0; }
.wc__wallet-services ul li .icon { display: block; margin: 0 auto; height: .5rem; width: .5rem; }
.wc__wallet-services ul li .txt { color: #333; display: block; font-size: .28rem; margin-top: .15rem; }

/* Balance */
.wc__wallet-lingqian { text-align: center; }
.wc__wallet-lingqian .icon { display: block; margin: .5rem auto 0; height: 1.5rem; width: 1.5rem; }
.wc__wallet-lingqian p { color: #333; font-size: .28rem; margin-top: .1rem; }
.wc__wallet-lingqian p.num { font-size: .6rem; font-family: Verdana, sans-serif; }
.wc__wallet-lingqian .wc__btns-panel { margin-top: .5rem; }
.wc__wallet-lingqian .wc__btns-panel a { font-size: .3rem; }

/* Bank cards */
.wc__bankCard-list ul { padding-top: .2rem; }
.wc__bankCard-list ul li {
  background: #c64f58; border-radius: .07rem;
  margin: .15rem .15rem 0; height: 2rem;
}
.wc__bankCard-list ul li .bklogo {
  background: rgba(255,255,255,.7); border-radius: 50%;
  margin: .3rem .1rem 0 .3rem; overflow: hidden;
  padding: .1rem; height: .725rem; width: .725rem;
}
.wc__bankCard-list ul li .bkinfo { padding-top: .3rem; }
.wc__bankCard-list ul li .bkinfo h2 { color: #fff; font-size: .28rem; }
.wc__bankCard-list ul li .bkinfo h5 { color: #ddd; font-size: .24rem; }
.wc__bankCard-list ul li .bkinfo .bknum {
  color: #fff; display: block;
  font-size: .36rem; font-family: arial; margin-top: .15rem;
}
.wc__bankCard-add {
  background: url(../img/icon__add.png) no-repeat .3rem center;
  background-size: .45rem; color: #fff;
  font-size: .32rem; margin: .5rem 0;
  padding-left: .9rem; height: 1rem;
}
.wc__bankCard-add.wc__borB::after { border-bottom-color: #4a4f58; }
.wc__bankCard-add:active { background-color: #4a4f58 !important; }

/* Receivables QR code */
.wc__receivables-qrcode { background: #fff; border-radius: .05rem; margin: .2rem; }
.wc__receivables-qrcode .head {
  background: #f8f8f8;
  border-top-left-radius: .05rem; border-top-right-radius: .05rem;
  height: 1rem;
}
.wc__receivables-qrcode .head .lbl {
  background: url(../img/wallet/icon__wallet-shoukuan-color.png) no-repeat .2rem center;
  background-size: .5rem; color: #ccae56;
  font-size: .28rem; padding-left: .9rem;
}
.wc__receivables-qrcode .head .intro {
  background: url(../img/icon__dot.png) no-repeat center;
  background-size: .5rem; display: block;
  height: 1rem; width: 1rem;
}
.wc__receivables-qrcode .cnt .pay-qrcode { padding: .5rem 0; text-align: center; }
.wc__receivables-qrcode .cnt .pay-qrcode .qrcode { width: 3rem; }
.wc__receivables-qrcode .foot { padding: .3rem .2rem; position: relative; }
.wc__receivables-qrcode .foot::before {
  content: ''; border-top: 1px solid #e9e9e9;
  height: 1px; width: auto;
  position: absolute; left: .3rem; right: .3rem; top: 0;
  transform: scaleY(0.5);
}
.wc__receivables-qrcode .foot .img-bank { height: .4rem; width: .4rem; margin-right: .2rem; }
.wc__receivables-qrcode .foot h2 { color: #333; font-size: .28rem; }
.wc__receivables-qrcode .foot h5 { color: #999; font-size: .2rem; }

/* Receivables list */
.wc__receivables-list { margin: .2rem .2rem .5rem; }
.wc__receivables-list ul { background: #d1bf88; border-radius: .05rem; }
.wc__receivables-list ul li { position: relative; }
.wc__receivables-list ul li::after {
  content: ''; border-bottom: 1px solid #e4d6ad;
  height: 1px; width: auto;
  position: absolute; left: .3rem; right: .3rem; bottom: 0;
  transform: scaleY(0.5);
}
.wc__receivables-list ul li:last-child::after { display: none; }
.wc__receivables-list ul li .item {
  padding: .15rem .3rem; min-height: 1.1rem; position: relative;
}
.wc__receivables-list ul li .item:active { background-color: #d6c48e !important; }
.wc__receivables-list ul li .item .lbl { color: #fff; font-size: .28rem; min-width: 1.5rem; }

/* Group members */
.wc__ucinfo-qunMember { padding: 0 .15rem; }
.wc__ucinfo-qunMember ul li {
  float: left; text-align: center;
  margin-top: .3rem; width: 20%;
}
.wc__ucinfo-qunMember ul li .uimg {
  height: 1.1rem; width: 1.1rem;
  object-fit: cover; border-radius: 6px;
}
.wc__ucinfo-qunMember ul li .name {
  color: #999; display: block; font-size: .24rem;
  margin-top: .05rem; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}


/* ============================================================
 * MOMENTS (FRIEND ZONE)
 * ============================================================ */
.wc__friendZone .head { height: 5rem; position: relative; }
.wc__friendZone .head .cover {
  height: 5rem; width: 100%;
  object-fit: cover;
  position: absolute; left: 0; top: 0;
}
.wc__friendZone .head .uname {
  color: #fff; font-size: .3rem; font-weight: 700;
  text-shadow: 0 1px 1px #000;
  padding-left: .3rem; text-align: right;
  position: absolute; right: 2.3rem; bottom: .2rem;
}
.wc__friendZone .head .avator {
  background: #fff; display: block; padding: 2px;
  height: 1.8rem; width: 1.8rem;
  position: absolute; right: 10px; bottom: -.6rem;
}
.wc__friendZone .head .avator img { display: block; height: 100%; width: 100%; }
.wc__friendZone .cont .inner { padding: .2rem 0 .1rem; }

.wc__cmtlist li { padding: .2rem 0; position: relative; }
.wc__cmtlist li::before {
  content: ''; border-top: 1px solid #d9d9d9;
  height: 1px; width: 100%;
  position: absolute; left: 0; top: 0;
  transform: scaleY(0.5);
}
.wc__cmtlist li:first-child { margin-top: .5rem; }
.wc__cmtlist li:first-child::before { display: none; }
.wc__cmtlist li .wrap-avt { margin: 0 .2rem; }
.wc__cmtlist li .wrap-avt img { height: .8rem; width: .8rem; }
.wc__cmtlist li .wrap-cmt { padding-left: 1.2rem; padding-right: .2rem; }
.wc__cmtlist li .wrap-cmt .u-name { color: #576b95; font-size: .28rem; margin-top: .05rem; }
.wc__cmtlist li .wrap-cmt .post__cnt {
  color: #333; font-size: .28rem;
  margin-top: .05rem; padding-bottom: .2rem; line-height: .32rem;
}
.wc__cmtlist li .wrap-cmt .post__cnt img {
  float: left; margin-right: .1rem; margin-top: .15rem;
  max-height: 3rem; max-width: 3rem;
}
.wc__cmtlist li .wrap-cmt .post__cnt .list-img {
  object-fit: cover; max-height: 1.5rem; max-width: 1.5rem;
  height: 1.5rem; width: 30%;
}
.wc__cmtlist li .wrap-cmt .reply__box { position: relative; }
.wc__cmtlist li .wrap-cmt .reply__box .btn-reply {
  background: url(../img/wchat/icon__wcZone-cmts.png) no-repeat center;
  background-size: .4rem; height: .4rem; width: .4rem;
}
.wc__cmtlist li .wrap-cmt .reply__box .btn-reply:active { opacity: .7; }
.wc__cmtlist li .wrap-cmt .reply__box .wc__cmtbox {
  display: none; background: #313131; border-radius: .07rem;
  margin-top: -.1rem; overflow: hidden;
  height: .6rem; position: absolute; top: 0; right: .6rem;
}
.wc__cmtlist li .wrap-cmt .reply__box .wc__cmtbox a {
  color: #ccc; float: left; font-size: .24rem;
  text-align: center; line-height: .62rem;
  width: 1.5rem; position: relative;
}
.wc__cmtlist li .wrap-cmt .reply__box .wc__cmtbox a:active { background: #515151; }
.wc__cmtlist li .wrap-cmt .reply__box .wc__cmtbox a:first-child::after {
  content: ''; border-right: 1px solid #515151;
  position: absolute; right: 0; top: .12rem; bottom: .12rem;
}
.wc__cmtlist li .wrap-cmt .reply__box .wc__cmtbox a i {
  display: inline-block; vertical-align: top;
  margin: .15rem .1rem 0 0; height: .3rem; width: .3rem;
}
.wc__cmtlist li .wrap-cmt .reply__box .wc__cmtbox a.like i {
  background: url(../img/wchat/icon__wcZone-like-white.png) no-repeat center; background-size: cover;
}
.wc__cmtlist li .wrap-cmt .reply__box .wc__cmtbox a.cmt i {
  background: url(../img/wchat/icon__wcZone-cmt-white.png) no-repeat center; background-size: cover;
}
.wc__cmtlist li .wrap-cmt .arr {
  border-bottom: 8px solid #e9e9e9;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  margin: 5px 0 0 10px; width: 1px;
}
.wc__cmtlist li .wrap-cmt .cmt-bd { background: #e9e9e9; width: 100%; }
.wc__cmtlist li .wrap-cmt .cmt-bd .like {
  background: url(../img/wchat/icon__wcZone-like.png) no-repeat .18rem .12rem;
  background-size: .3rem; color: #576b95;
  padding: .1rem .1rem 0 .6rem;
}
.wc__cmtlist li .wrap-cmt .cmt-bd .reply-list { color: #333; padding: .1rem; }
.wc__cmtlist li .wrap-cmt .cmt-bd .reply-list p { padding-top: .05rem; }
.wc__cmtlist li .wrap-cmt .cmt-bd .reply-list p span { color: #3b5384; }


/* ============================================================
 * OVERLAYS & POPUPS
 * ============================================================ */

/* Image preview */
.wc__popup-imgPreview {
  background: rgba(0,0,0,1); height: 100%; width: 100%;
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 2003;
}
.wc__popup-imgPreview .swiper-container { height: 100%; max-width: 750px; }
.wc__popup-imgPreview .swiper-slide {
  display: flex; align-items: center;
}
.wc__popup-imgPreview .swiper-slide img {
  max-height: 100%; max-width: 100%; width: 100%;
  transition: all .3s; transform: scale(.8);
}
.wc__popup-imgPreview .swiper-slide-active img { transform: scale(1); }

/* Video preview */
.wc__popup-videoPreview {
  background: rgba(0,0,0,1); height: 100%; width: 100%;
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 2003;
}
.wc__popup-videoPreview::after {
  content: '';
  background-image: linear-gradient(-180deg, rgba(0,0,0,.6), transparent);
  height: 1.2rem; width: 100%;
  position: absolute; top: 0; left: 0;
}
.wc__popup-videoPreview .wc__videoClose {
  margin-left: -.25rem; height: .5rem; width: .5rem;
  position: absolute; top: .3rem; left: 50%; z-index: 2003;
}
.wc__popup-videoPreview .wc__videoClose::before,
.wc__popup-videoPreview .wc__videoClose::after {
  content: ""; background: #fff;
  transform: translate(50%, -50%) rotate(45deg) scale(.9);
  position: absolute; top: 50%; right: 50%;
}
.wc__popup-videoPreview .wc__videoClose::before { height: .5rem; width: 2px; }
.wc__popup-videoPreview .wc__videoClose::after { height: 2px; width: .5rem; }


/* ============================================================
 * CUSTOM KEYBOARD PANEL
 * ============================================================ */
.keyboardPanel { max-width: 750px; width: 100%; position: fixed; bottom: 0; z-index: 10005; }
.keyboardPanel .keyboard-result {
  background: #f8f8f8; border-top: 1px solid #e9e9e9;
  color: #00c1de; font-size: .28rem; font-weight: 700;
  text-align: center; height: .5rem; line-height: .5rem;
}
.keyboardPanel .keyboard-xclose {
  background: url(../img/icon__keyboard-xclose.png) no-repeat center #f8f8f8;
  background-size: .4rem; height: .5rem;
  border-top: 1px solid #e9e9e9;
}
.keyboardPanel .keyboard-xclose:active { background-color: #e9e9e9; }
.keyboardPanel ul {
  display: flex; align-items: center; flex-wrap: wrap;
}
.keyboardPanel ul li {
  background: #fff; border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
  color: #333; font-size: .5rem; font-family: arial;
  text-align: center; height: 1.25rem; line-height: 1.25rem;
  min-width: 33.3%; width: 33.3%; flex: 1;
}
.keyboardPanel ul li:nth-of-type(3n+1) { border-left: 0; }
.keyboardPanel ul li.del {
  background: url(../img/icon__keyboard-del.png) no-repeat center;
  background-size: .64rem;
}
.keyboardPanel ul li.float,
.keyboardPanel ul li.del { background-color: #f8f8f8; }
.keyboardPanel ul li:active { background-color: #e9e9e9; }


/* ===== iPhone Safe Area Support ===== */
@supports (padding-top: env(safe-area-inset-top)) {
  .wc__headerBar.fixed .inner {
    padding-top: calc(env(safe-area-inset-top));
  }
  .wechat__tabBar {
    padding-bottom: calc(env(safe-area-inset-bottom));
  }
  .login-page {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: calc(30px + env(safe-area-inset-left));
    padding-right: calc(30px + env(safe-area-inset-right));
  }
}