/* ============================================================
   chat.css — 会话列表 + 聊天窗口 + 转账/红包/零钱账单样式
   配色严格微信：主绿 #07C160 / 己方气泡 #95EC69 / 底 #EDEDED
   ============================================================ */

/* ============ 1. 会话列表（tab-chats） ============ */
.chats-navbar{
  height:var(--wx-navbar-h);flex:none;background:var(--navbar-bg);
  display:flex;align-items:center;justify-content:center;position:relative;
  border-bottom:.5px solid var(--border);
  font-size:17px;font-weight:600;
}
.chats-navbar .nav-title{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chats-navbar .nav-right{position:absolute;right:14px;top:0;height:100%;display:flex;align-items:center;
  font-size:22px;color:var(--text-primary);font-weight:400;line-height:1;}
.chats-list{flex:1;overflow-y:auto;background:var(--bg-page);}
.chats-list::-webkit-scrollbar{display:none;}
.chat-row{display:flex;align-items:center;gap:11px;background:var(--bg-card);
  padding:10px 12px;position:relative;cursor:pointer;border-bottom:.5px solid var(--border);}
.chat-row:active{background:var(--wx-active,#EBEBEB);}
body.dark .chat-row:active{background:#3A3A3C;}
.chat-row.pinned{background:var(--bg-input);}
.chat-row .chat-avatar{width:var(--wx-avatar);height:var(--wx-avatar);border-radius:6px;
  object-fit:cover;background:#d8d8d8;flex:none;}
.chat-row .chat-main{flex:1;min-width:0;}
.chat-row .chat-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.chat-row .chat-name{font-size:16px;line-height:1.3;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-row .chat-time{font-size:12px;color:var(--wx-text-faint);flex:none;}
.chat-row .chat-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.chat-row .chat-msg{flex:1;min-width:0;font-size:13px;color:var(--wx-text-sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-row .chat-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--wx-red);color:#fff;font-size:11px;line-height:18px;text-align:center;flex:none;}
.chat-row .chat-badge.hidden{display:none;}
.chat-empty{padding:80px 20px;text-align:center;color:var(--wx-text-faint);font-size:14px;}

/* ============ 2. 聊天窗口骨架 ============ */
.cw-navbar{
  height:var(--wx-navbar-h);flex:none;background:var(--navbar-bg);
  display:flex;align-items:center;justify-content:center;position:relative;
  border-bottom:.5px solid var(--border);font-size:17px;font-weight:600;
}
.cw-navbar .cw-back{position:absolute;left:6px;top:0;height:100%;display:flex;align-items:center;
  padding:0 6px;color:var(--text-primary);}
.cw-navbar .cw-more{position:absolute;right:10px;top:0;height:100%;display:flex;align-items:center;
  padding:0 6px;color:var(--text-primary);}
.cw-navbar .cw-title{max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;}

/* 消息流 */
.cw-body{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg-page);padding:10px 10px 6px;}
.cw-body::-webkit-scrollbar{display:none;}
.cw-time{text-align:center;margin:12px auto 8px;}
.cw-time span{font-size:12px;color:var(--text-secondary);}

.cw-row{display:flex;gap:8px;margin-bottom:16px;align-items:flex-start;}
.cw-row.right{flex-direction:row-reverse;}
.cw-avatar{width:38px;height:38px;border-radius:5px;object-fit:cover;background:#d8d8d8;flex:none;}
.cw-col{max-width:68%;display:flex;flex-direction:column;min-width:0;}
.cw-row.right .cw-col{align-items:flex-end;}
.cw-name{font-size:12px;color:var(--wx-text-sub);margin:0 2px 3px;}

.cw-bubble{position:relative;background:var(--bubble-other);border-radius:var(--wx-radius-bubble);
  padding:9px 11px;font-size:16px;line-height:1.45;word-break:break-word;
  box-shadow:var(--wx-shadow-msg);max-width:100%;color:var(--text-primary);}
.cw-row.right .cw-bubble{background:var(--bubble-me);}
/* 气泡尖角 */
.cw-bubble::before{content:"";position:absolute;top:12px;width:0;height:0;
  border:7px solid transparent;}
.cw-row:not(.right) .cw-bubble::before{left:-12px;border-right-color:var(--bubble-other);border-left:none;}
.cw-row.right .cw-bubble::before{right:-12px;border-left-color:var(--bubble-me);border-right:none;}
.cw-bubble img{border-radius:5px;max-width:220px;cursor:pointer;}

/* 引用回复条 */
.cw-quote{background:rgba(127,127,127,.12);border-left:3px solid #c8c8c8;border-radius:3px;
  padding:5px 8px;margin-bottom:6px;font-size:13px;color:var(--text-secondary);max-width:100%;}
.cw-quote .q-name{font-size:12px;color:var(--text-secondary);margin-bottom:1px;}
.cw-quote .q-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 语音气泡 */
.cw-voice{display:flex;align-items:center;gap:7px;min-width:80px;cursor:pointer;}
.cw-voice .vc-play{display:flex;align-items:center;color:var(--text-secondary);}
.cw-row.right .cw-voice .vc-play{color:#0b3d1f;}
.cw-voice .vc-bars{display:flex;align-items:flex-end;gap:2px;height:16px;}
.cw-voice .vc-bars i{width:3px;background:var(--text-secondary);border-radius:1px;height:6px;}
.cw-row.right .cw-voice .vc-bars i{background:#0b3d1f;}
.cw-voice .vc-dur{font-size:14px;color:var(--text-secondary);}
.cw-voice.playing .vc-bars i{animation:vcWave .7s ease-in-out infinite;}
.cw-voice.playing .vc-bars i:nth-child(2){animation-delay:.12s;}
.cw-voice.playing .vc-bars i:nth-child(3){animation-delay:.24s;}
.cw-voice.playing .vc-bars i:nth-child(4){animation-delay:.36s;}
.cw-voice.playing .vc-bars i:nth-child(5){animation-delay:.48s;}
@keyframes vcWave{0%,100%{height:5px;}50%{height:15px;}}

/* 位置 / 文件卡片 */
.cw-loc{width:210px;overflow:hidden;}
.cw-loc .lc-top{display:flex;align-items:center;gap:8px;padding:2px 2px 8px;}
.cw-loc .lc-add{font-size:14px;line-height:1.3;}
.cw-loc .lc-map{height:64px;border-radius:4px;background:
  linear-gradient(135deg,#cfe8cf,#a8d5a8);position:relative;display:flex;
  align-items:center;justify-content:center;overflow:hidden;}
.cw-loc .lc-map span{font-size:12px;color:#2f6b3a;background:rgba(255,255,255,.7);
  padding:2px 8px;border-radius:3px;}
.cw-loc .lc-map i{position:absolute;width:120%;height:1px;background:rgba(255,255,255,.6);top:30%;}
.cw-loc .lc-map i:nth-child(2){top:60%;transform:rotate(-8deg);}
.cw-loc .lc-map i:nth-child(3){top:45%;transform:rotate(12deg);}
.cw-file{width:210px;display:flex;align-items:center;gap:10px;}
.cw-file .fc-ico{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;}
.cw-file .fc-meta{min-width:0;}
.cw-file .fc-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cw-file .fc-size{font-size:12px;color:var(--text-secondary);margin-top:2px;}

/* 正在输入 */
.cw-typing-bubble{background:var(--bubble-other);border-radius:5px;padding:12px 14px;box-shadow:var(--wx-shadow-msg);}
.cw-typing-bubble i{width:6px;height:6px;border-radius:50%;background:var(--text-secondary);display:inline-block;
  margin:0 2px;animation:typingDot 1.2s infinite;}
.cw-typing-bubble i:nth-child(2){animation-delay:.2s;}
.cw-typing-bubble i:nth-child(3){animation-delay:.4s;}
@keyframes typingDot{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

/* 撤回 */
.cw-recall{font-size:13px;color:#999;text-align:center;margin:10px auto;}

/* ============ 3. 底部输入区 ============ */
.cw-inputbar{flex:none;background:var(--tabbar-bg);border-top:.5px solid var(--border);
  padding:7px 8px calc(7px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:7px;}
.cw-ibtn{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--text-primary);}
.cw-ibtn svg{display:block;}
.cw-ibtn:active{background:rgba(127,127,127,.25);}
.cw-ibtn.on{background:var(--bg-card);}
.cw-textarea{flex:1;min-height:38px;max-height:120px;background:var(--bg-card);border-radius:6px;
  padding:8px 9px;font-size:16px;line-height:22px;resize:none;overflow-y:auto;color:var(--text-primary);}
.cw-sendbtn{flex:none;background:var(--wx-green);color:#fff;border-radius:5px;
  padding:0 14px;height:38px;font-size:15px;}
.cw-sendbtn:active{background:var(--wx-green-dark);}
.cw-holdtalk{flex:1;height:38px;background:var(--bg-card);border-radius:6px;font-size:16px;
  color:var(--text-primary);user-select:none;-webkit-user-select:none;touch-action:none;}
.cw-holdtalk:active{background:var(--wx-active,#e6e6e6);}

/* 弹出面板（表情 / 加号） */
.cw-panel{flex:none;height:0;overflow:hidden;background:var(--panel-bg);
  transition:height .22s ease;display:flex;flex-direction:column;}
.cw-panel.open{height:calc(256px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:.5px solid var(--border);}

/* ---- 表情面板 ---- */
.emoji-panel .emo-pages{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.emoji-panel .emo-pages::-webkit-scrollbar{display:none;}
.emoji-panel .emo-page{flex:0 0 100%;scroll-snap-align:start;overflow-y:auto;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;align-content:start;padding:10px 6px;}
.emoji-panel .emo-page::-webkit-scrollbar{display:none;}
.emoji-panel .emo-cell{display:flex;align-items:center;justify-content:center;
  height:42px;border-radius:6px;cursor:pointer;touch-action:none;}
.emoji-panel .emo-cell:active{background:var(--wx-active,#dcdcdc);}
body.dark .emoji-panel .emo-cell:active{background:#3A3A3C;}
.emoji-panel .emo-empty{flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);font-size:14px;}
.emo-dots{flex:none;display:flex;justify-content:center;gap:5px;padding:2px 0;}
.emo-dot{width:5px;height:5px;border-radius:50%;background:#C7C7CC;}
.emo-dot.on{background:var(--wx-green);}
.emo-bar{flex:none;height:46px;border-top:.5px solid var(--border);
  display:flex;align-items:stretch;}
.emo-tab{flex:1;color:var(--text-secondary);font-size:14px;position:relative;}
.emo-tab.on{color:var(--wx-green);}
.emo-tab.on::before{content:"";position:absolute;left:20%;right:20%;bottom:0;height:2px;background:var(--wx-green);}
.emo-send{width:70px;background:var(--wx-green);color:#fff;font-size:15px;}
.emo-send:active{background:var(--wx-green-dark);}

/* ---- 加号面板（黑色半透明宫格） ---- */
.plus-panel{background:rgba(0,0,0,.85);}
.plus-panel .plus-pages{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.plus-panel .plus-pages::-webkit-scrollbar{display:none;}
.plus-panel .plus-page{flex:0 0 100%;scroll-snap-align:start;
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  gap:14px 8px;padding:20px 16px;align-content:center;}
.plus-cell{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;}
.plus-cell .pc-ico{width:54px;height:54px;background:#D8D8D8;border-radius:9px;
  display:flex;align-items:center;justify-content:center;}
.plus-cell:active .pc-ico{background:#b8b8b8;}
.plus-cell .pc-label{font-size:12px;color:#fff;}
.plus-dots{flex:none;display:flex;justify-content:center;gap:5px;padding:6px 0 10px;}
.plus-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);}
.plus-dot.on{background:#fff;}

/* 引用条 */
.cw-replybar{flex:none;background:var(--bg-input);border-top:.5px solid var(--border);
  padding:4px 12px;display:flex;align-items:center;gap:8px;font-size:13px;}
.cw-replybar .rb-body{flex:1;min-width:0;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cw-replybar .rb-close{color:var(--text-secondary);font-size:18px;padding:0 4px;}

/* 录音浮层 */
.cw-rec-mask{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:960;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.cw-rec-mask.show{display:flex;}
.cw-rec-mask .rec-mic,.cw-rec-mask .rec-cancel-ic{width:96px;height:96px;border-radius:14px;
  background:rgba(60,60,60,.95);display:flex;align-items:center;justify-content:center;}
.cw-rec-mask .rec-cancel-ic{display:none;}
.cw-rec-mask.cancel .rec-mic{display:none;}
.cw-rec-mask.cancel .rec-cancel-ic{display:flex;}
.cw-rec-mask .rec-wave{display:flex;align-items:flex-end;gap:4px;height:48px;}
.cw-rec-mask .rec-wave i{width:5px;border-radius:2px;background:var(--wx-green);height:8px;
  transition:height .1s linear;}
.cw-rec-mask.cancel .rec-wave i{background:#FA5151;}
.cw-rec-mask .rec-tip{color:#fff;font-size:14px;}
.cw-rec-mask.cancel .rec-tip{color:#FA5151;}

/* 图片预览浮层 */
.cw-img-preview{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:970;
  display:none;align-items:center;justify-content:center;}
.cw-img-preview.show{display:flex;}
.cw-img-preview img{max-width:94%;max-height:80%;}
.cw-img-preview .ip-send{position:absolute;right:16px;bottom:28px;background:var(--wx-green);
  color:#fff;border-radius:6px;padding:9px 20px;font-size:15px;}
.cw-img-preview .ip-close{position:absolute;left:16px;top:20px;color:#fff;font-size:22px;}

/* ============ 4. 转账卡片 ============ */
.xf-card{width:230px;border-radius:8px;overflow:hidden;box-shadow:var(--wx-shadow-msg);cursor:pointer;}
.xf-head{background:var(--wx-green);color:#fff;padding:12px 14px;}
.xf-amt{font-size:22px;font-weight:600;font-family:"SF Mono",ui-monospace,Menlo,monospace;}
.xf-note{font-size:12px;opacity:.9;margin-top:4px;}
.xf-foot{background:#fff;padding:7px 14px;font-size:12px;color:#999;
  display:flex;align-items:center;gap:6px;}
.xf-foot .xf-dot{width:16px;height:16px;border-radius:50%;background:var(--wx-green);
  color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;}
.xf-card.received .xf-head{background:#fff;color:#1a1a1a;}
.xf-card.received .xf-amt{color:var(--wx-green);}

/* ============ 5. 红包卡片 ============ */
.hb-card{width:230px;border-radius:8px;overflow:hidden;box-shadow:var(--wx-shadow-msg);cursor:pointer;
  background:#FA523E;}
.hb-top{padding:14px 14px 12px;color:#fff;display:flex;align-items:center;gap:10px;}
.hb-seal{width:34px;height:34px;border-radius:50%;background:#F7B500;color:#7A4A00;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;flex:none;}
.hb-txt .hb-title{font-size:15px;}
.hb-txt .hb-sub{font-size:11px;opacity:.85;margin-top:2px;}
.hb-bottom{background:#fff;padding:6px 14px;font-size:12px;color:#999;}
.hb-card.opened{background:#EDEDED;}
.hb-card.opened .hb-top{background:#D8D8D8;color:#888;}
.hb-card.opened .hb-seal{background:#c4c4c4;color:#888;}

/* 红包炸开遮罩 */
.hb-open-mask{position:fixed;inset:0;z-index:965;background:radial-gradient(circle at 50% 42%,#F7B500 0%,#FA523E 60%,#c0392b 100%);
  display:none;align-items:center;justify-content:center;flex-direction:column;color:#fff;}
.hb-open-mask.show{display:flex;animation:hbZoom .5s ease;}
@keyframes hbZoom{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
.hb-open-mask .hb-ring{width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;
  animation:hbPulse 1.6s infinite;}
@keyframes hbPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5);}50%{box-shadow:0 0 0 22px rgba(255,255,255,0);}}
.hb-open-mask .hb-result{text-align:center;}
.hb-open-mask .hb-amt-big{font-size:46px;font-weight:700;margin:14px 0 4px;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;}
.hb-open-mask .hb-greet{font-size:14px;opacity:.9;}
.hb-open-mask .hb-close{margin-top:30px;font-size:14px;border:1px solid rgba(255,255,255,.7);
  padding:7px 26px;border-radius:18px;}

/* ============ 6. 转账 / 红包 / 零钱页 ============ */
.tk-page{background:var(--wx-bg);}
.tk-peerbar{background:#fff;padding:16px 16px;display:flex;align-items:center;gap:12px;}
.tk-peerbar img{width:46px;height:46px;border-radius:7px;object-fit:cover;}
.tk-peerbar .tk-pname{font-size:17px;}
.tk-amount{background:#fff;padding:26px 16px;text-align:center;}
.tk-amount .tk-cur{font-size:20px;color:#333;}
.tk-amount .tk-num{font-size:46px;font-weight:600;color:#111;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;min-height:56px;}
.tk-amount .tk-num.empty{color:#ccc;}
.tk-note{background:#fff;padding:12px 16px;border-top:.5px solid var(--wx-line-soft);
  font-size:14px;color:#666;display:flex;}
.tk-note input{flex:1;font-size:14px;}
.tk-keypad{flex:1;background:#D9D9D9;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;gap:1px;}
.tk-key{background:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;color:#111;}
.tk-key:active{background:#cfcfcf;}
.tk-key.func{background:#EBEBEB;}
.tk-key.confirm{grid-row:span 2;background:var(--wx-green);color:#fff;font-size:18px;}
.tk-key.confirm:active{background:var(--wx-green-dark);}
.tk-key.confirm[disabled]{background:#9fd9b8;}

/* 零钱页 */
.wallet-hero{background:linear-gradient(135deg,#07C160,#06AD56);color:#fff;padding:26px 20px 30px;}
.wallet-hero .wh-label{font-size:13px;opacity:.9;}
.wallet-hero .wh-balance{font-size:40px;font-weight:600;margin-top:8px;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;}
.wallet-hero .wh-unit{font-size:16px;margin-left:6px;opacity:.9;}
.bill-list{background:#fff;margin-top:10px;}
.bill-row{display:flex;align-items:center;padding:13px 15px;border-bottom:.5px solid #F2F2F2;}
.bill-row .bill-info{flex:1;min-width:0;}
.bill-row .bill-title{font-size:15px;}
.bill-row .bill-time{font-size:12px;color:#999;margin-top:2px;}
.bill-row .bill-amt{font-size:17px;font-weight:600;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;}
.bill-row .bill-amt.in{color:var(--wx-green);}
.bill-row .bill-amt.out{color:#111;}
.bill-empty{padding:70px 20px;text-align:center;color:#999;font-size:14px;}

/* 选择好友（转账/红包群内选人） */
.pick-list{background:#fff;}
.pick-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:.5px solid #F2F2F2;cursor:pointer;}
.pick-row:active{background:#EBEBEB;}
.pick-row img{width:42px;height:42px;border-radius:6px;object-fit:cover;}
.pick-row .pr-name{font-size:16px;}

/* 小屏高度适配 */
@media (max-height:700px){
  .cw-panel.open{height:210px;}
}