/* Chat Window */
.chat-window {
    height:100vh; height:100dvh; display:flex; flex-direction:column; background:#ebebeb;
    position:relative;  /* 作为「回到最新消息」按钮的定位上下文 */
}

/* 「回到最新消息」浮动按钮：作为「输入区」的子元素（.chat-input-area / .pc-input-area，
   由 chat.js 动态挂载），position:absolute + bottom:100% 直接锚在输入区顶边上方 12px。
   这样输入区随内容长高时（多行文字 / 表情面板 / +号面板 / 语音面板）按钮自动跟着上抬，
   不用 JS 参与计算 —— 输入区自己的高度就是定位基准，两端表现一致。
   挂在输入区而非消息容器，是为了让按钮不随消息内容上下滚动。
   注意：输入区有 .banned/.muted 的 pointer-events:none，按钮要单独恢复点击。 */
.scroll-to-bottom-btn {
    position:absolute; right:16px; bottom:calc(100% + 12px);
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.95); color:var(--primary);
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    display:none; align-items:center; justify-content:center;
    cursor:pointer; z-index:5; font-size:20px;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* 输入区被禁言/禁发时整体 pointer-events:none，按钮要继续可点（翻历史消息不受影响） */
.chat-input-area.banned .scroll-to-bottom-btn,
.chat-input-area.muted .scroll-to-bottom-btn { pointer-events:auto; }
.scroll-to-bottom-btn:hover {
    background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.18);
    transform:translateY(-1px);
}
.scroll-to-bottom-btn:active { transform:translateY(0); }
/* PC 端输入区左右留白更宽，按钮往右让一点 */
.pc-input-area .scroll-to-bottom-btn { right:20px; }

.chat-header {
    display:flex; align-items:center; padding:10px 16px;
    background:var(--bg-white); border-bottom:1px solid var(--border);
    min-height:56px; flex-shrink:0;
}
.chat-header-info { flex:1; min-width:0; }
.chat-header-info h3 {
    display:flex; align-items:center; gap:6px;
    font-size:16px; font-weight:600;
    max-width:100%; min-width:0;
}
.chat-header-info h3 .chat-name-text {
    min-width:0; max-width:100%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-header-info h3 .secretary-tag {
    margin-left:0;
}
.chat-status { font-size:12px; color:var(--text-muted); }
.chat-header-actions { display:flex; gap:4px; }

/* Messages container */
.chat-messages {
    flex:1; overflow-y:auto; padding:16px; display:flex;
    flex-direction:column; gap:4px;
    background:linear-gradient(180deg,#ebebeb 0%,#e8e8e8 100%);
}

.load-more {
    text-align:center; padding:12px; color:var(--text-muted);
    font-size:13px; cursor:pointer; transition:var(--transition);
}
.load-more:hover { color:var(--primary); }

/* Message item */
.msg-item {
    display:flex; gap:10px; max-width:75%; animation:msgIn 0.2s ease;
}
@keyframes msgIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.msg-item.self { flex-direction:row-reverse; margin-left:auto; }

.msg-avatar {
    width:40px; height:40px; flex-shrink:0; position:relative;
    cursor:pointer;
}
.msg-avatar img { width:100%; height:100%; object-fit:cover; border-radius:6px; }

.msg-body { display:flex; flex-direction:column; }

.msg-nickname {
    font-size:12px; color:var(--text-muted); margin-bottom:2px;
    max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-item.self .msg-nickname { text-align:right; }

.msg-bubble {
    position:relative; background:var(--bubble-received,#fff); border-radius:6px; padding:10px 14px;
    font-size:15px; line-height:1.5; word-break:break-word;
    box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.msg-item.self .msg-bubble {
    background:var(--bubble-sent,#95ec69);
    color:var(--bubble-sent-text,#333);
}

/* Bubble arrows */
.msg-bubble::before {
    content:''; position:absolute; top:12px; width:0; height:0;
    border:6px solid transparent;
}
.msg-item:not(.self) .msg-bubble::before {
    left:-11px; border-right-color:var(--bubble-received,#fff);
}
.msg-item.self .msg-bubble::before {
    right:-11px; border-left-color:var(--bubble-sent,#95ec69);
}

.msg-time {
    font-size:11px; color:var(--text-muted); margin-top:4px;
}
.msg-item.self .msg-time { text-align:right; }

/* 已读/未读状态：未读为灰色单勾，已读为固定绿色双勾（不跟随主题色） */
.msg-read {
    margin-left:4px; font-size:12px; color:#bbb;
    vertical-align:middle; line-height:1;
    transition:color .2s ease;
}
.msg-read.is-read { color:#07C160; }

/* Message actions */
.msg-more-btn {
    background:none; border:none; color:#b0b0b0; font-size:14px;
    padding:0 2px; margin-left:6px; cursor:pointer; border-radius:3px;
    vertical-align:middle; opacity:0; transition:var(--transition); line-height:1;
}
.msg-item:hover .msg-more-btn { opacity:1; }
.msg-more-btn:hover { color:var(--primary); }
@media (hover:none) { .msg-more-btn { opacity:.6; } }

/* Message action menu (forward / copy / recall) - 微信风格 */
#msgActionMenu {
    position: fixed;
    z-index: 2000;
    display: flex;
    align-items: stretch;
    background: #2D2D30;
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    animation: msgIn 0.15s ease;
    overflow: visible;
}

/* 指向下方消息的倒三角箭头（位置跟随消息气泡中心） */
#msgActionMenu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--arrow-x, 50%);
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #2D2D30;
}

/* 显示在下方时箭头翻转，向上指向消息 */
#msgActionMenu.below::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #2D2D30;
}

.msg-action-item {
    position: relative;
    flex: 1;
    padding: 9px 20px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    transition: background 0.15s;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 短竖条分隔符：垂直居中的短直线 */
.msg-action-item + .msg-action-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.22);
}

.msg-action-item:hover,
.msg-action-item:active {
    background: rgba(255, 255, 255, 0.12);
}

.msg-action-item.danger:hover,
.msg-action-item.danger:active {
    background: #FA5151;
}

/* Image message */
.msg-image {
    max-width:240px; border-radius:6px; overflow:hidden; cursor:pointer;
}
.msg-image img { width:100%; display:block; }

/* Video message */
.msg-video {
    max-width:240px; border-radius:6px; overflow:hidden; cursor:pointer;
    background:#000;
}
.msg-video video { width:100%; display:block; max-height:300px; }

/* Voice message */
.msg-voice {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 80px;
    max-width: 200px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s;
}
.msg-other .msg-voice,
.msg-item:not(.self) .msg-voice {
    background: var(--bubble-received,#fff);
    border: 1px solid var(--border);
    color: #333;
    border-radius: 4px 18px 18px 18px;
}
.msg-item.self .msg-voice {
    background: var(--bubble-sent,#95ec69);
    border: 1px solid var(--bubble-sent-border,#b2e085);
    color: var(--bubble-sent-text,#333);
    border-radius: 18px 4px 18px 18px;
    justify-content: flex-end;
}
.msg-voice:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.msg-voice i {
    font-size: 20px;
    color: #333;
    flex-shrink: 0;
}
.msg-voice .duration {
    font-size: 13px;
    color: #333;
    flex-shrink: 0;
}
.msg-voice .voice-bars {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}
.msg-voice .voice-bar {
    width: 2px;
    background: currentColor;
    border-radius: 1px;
}
.msg-voice.playing i {
    display: none;
}
.msg-voice.playing .voice-bars {
    display: flex;
}
.msg-voice.playing .voice-bar {
    animation: voiceBar 0.6s ease-in-out infinite alternate;
}
@keyframes voiceBar {
    from { height: 6px; }
    to { height: 3px; }
}
.voice-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.voice-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.voice-bar:nth-child(3) { height: 16px; animation-delay: 0.3s; }
.voice-bar:nth-child(4) { height: 9px; animation-delay: 0.45s; }
@keyframes voiceBar { to{height:4px} }

/* File message */
.msg-file {
    display:flex; align-items:center; gap:10px; padding:8px;
    background:var(--bg-gray); border-radius:6px; min-width:200px;
    cursor:pointer;
}
.msg-file i { font-size:32px; color:var(--info); }
.msg-file .file-info { flex:1; min-width:0; }
.msg-file .file-name { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file .file-size { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* 红包配色。气泡和详情弹窗共用同一组变量，改一处两边一起变 */
:root {
    --rp-red-1:#f9574a;    /* 高光侧 */
    --rp-red-2:#e8342c;    /* 主色 */
    --rp-red-deep:#c0271c; /* 描边和深红 */
    --rp-gold-1:#ffe8b0;
    --rp-gold-2:#f2b63d;
    --rp-gold-deep:#dd9c26;
}

/* Red packet message */
.msg-redpacket {
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,var(--rp-red-1) 0%,var(--rp-red-2) 100%);
    border-radius:10px; padding:12px 16px; min-width:200px; cursor:pointer;
    color:#fff; position:relative; overflow:hidden;
    box-shadow:0 2px 10px rgba(199,39,28,.28);
    transition:transform .15s ease, box-shadow .15s ease;
}
.msg-redpacket:active { transform:scale(.97); box-shadow:0 1px 4px rgba(199,39,28,.3); }
/* 斜向高光。箭头和高光装饰抢同一个 ::before：arrow 规则是
   .msg-item(.self) .msg-bubble::before（三个类），比 .msg-redpacket::before 具体，
   只写低优先级的那条会被箭头压住、border-right-color 漏出来变成白色斜杠。
   border / width / height 都要显式写回去 */
.msg-item:not(.self) .msg-redpacket::before,
.msg-item.self .msg-redpacket::before {
    content:''; position:absolute;
    top:-55%; left:-25%; right:auto; bottom:auto;
    width:85%; height:115%;
    border:none; border-radius:50%; transform:none; pointer-events:none;
    background:radial-gradient(ellipse at 32% 62%,rgba(255,255,255,.20),rgba(255,255,255,0) 68%);
}
/* 右下角的金币 */
.msg-item .msg-redpacket::after {
    content:''; position:absolute; right:-20px; bottom:-20px;
    width:58px; height:58px; border-radius:50%;
    background:radial-gradient(circle at 34% 30%,var(--rp-gold-1),var(--rp-gold-2) 62%,var(--rp-gold-deep));
    opacity:.3; pointer-events:none;
}
/* 左侧金色封口印章 */
.msg-redpacket i {
    flex-shrink:0; z-index:1; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:22px;
    color:var(--rp-red-deep);
    background:linear-gradient(145deg,var(--rp-gold-1) 0%,var(--rp-gold-2) 55%,var(--rp-gold-deep) 100%);
    box-shadow:0 2px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.45);
}
.msg-redpacket .rp-info { z-index:1; min-width:0; }
.msg-redpacket .rp-wish {
    font-size:15px; font-weight:600; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-redpacket .rp-tag { font-size:11px; opacity:.82; margin-top:3px; }
/* 已领取：褪成暗红，别再用金色，金色看着像还能领 */
.msg-redpacket.claimed {
    background:linear-gradient(135deg,#d99a94 0%,#c9807a 100%);
    box-shadow:none;
}
.msg-redpacket.claimed i {
    background:linear-gradient(145deg,#f0e7d9,#cdbfa9);
    box-shadow:none; color:#a08a74;
}
.msg-redpacket.claimed .rp-tag { opacity:.9; }

/* 自己发的红包也保持红包色。.msg-item.self .msg-bubble 那条微信绿是三个类选择器，
   比 .msg-redpacket 具体，会把红色整个盖掉。这里用同样三个类的选择器再写一份 */
.msg-item.self .msg-redpacket {
    background:linear-gradient(135deg,var(--rp-red-1) 0%,var(--rp-red-2) 100%);
    color:#fff !important;
}
.msg-item.self .msg-redpacket.claimed {
    background:linear-gradient(135deg,#d99a94 0%,#c9807a 100%);
}

/* ============================================
   名片气泡（type=8）
   左头像 + 中间昵称/标签 + 右名片图标
   收到的：白底 + 蓝色标签/图标（中性，跟普通文本气泡一致）
   发出的：浅蓝底 + 绿色标签/图标（浅蓝有「我发出去」的归属感，跟白底区分）
   ============================================ */
.msg-card {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:#ffffff; border-radius:8px; min-width:220px; max-width:280px;
    cursor:pointer; transition:background .15s ease, transform .1s ease;
}
.msg-card:hover { background:#f7f7f7; }
.msg-card:active { transform:scale(.98); }
.msg-card-avatar {
    width:42px; height:42px; border-radius:6px; object-fit:cover; flex-shrink:0;
    background:#fff;
}
.msg-card-info { flex:1; min-width:0; }
.msg-card-name {
    font-size:14px; font-weight:600; color:#1a1a1a; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-card-tag {
    font-size:11px; color:#5b8def; margin-top:3px;
}
.msg-card-icon {
    font-size:22px; color:#5b8def; flex-shrink:0;
}

/* ============================================
   转账气泡（type=9）—— 横条式，四状态四配色
   tr-send  转出待收款：#fa9d43 → #f28c2e（微信橙）
   tr-recv  转入待收款：#ffb86b → #fa9d43（浅一档的橙）
   tr-done  已收款/已退回：#ffd9b3 → #ffc38a（淡化版）
   PC 端只是外层换成 .pc-msg-transfer、尺寸略大，.tr-* 内部类完全复用

   注意小尖角：border-width 决定尖角朝左还是朝右，border-color 必须跟着同一个
   规则写。分成两条规则的话，两条的选择器优先级不同，靠后的那条会拿到错的
   border-color，尖角就会指向气泡内部——所以每个方向的配色都单独写全。
   ============================================ */
/* ---------- 移动端外壳 ---------- */
.msg-transfer, .pc-msg-transfer {
    display:flex; align-items:stretch; justify-content:space-between;
    border-radius:14px; padding:0 0 0 12px; cursor:pointer;
    width:fit-content; position:relative; overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.04);
    transition:transform .15s ease, box-shadow .15s ease;
}
.msg-transfer { min-width:196px; max-width:236px; }
.pc-msg-transfer { min-width:232px; max-width:288px; }
.msg-transfer:active, .pc-msg-transfer:active { transform:scale(.97); }
.pc-msg-transfer:hover { box-shadow:0 4px 12px rgba(0,0,0,.14); }

/* ---------- 配色（背景 + 文字）---------- */
.msg-transfer.tr-send, .pc-msg-transfer.tr-send {
    background:linear-gradient(135deg, #fa9d43, #f28c2e); color:#4a2200;
}
.msg-transfer.tr-recv, .pc-msg-transfer.tr-recv {
    background:linear-gradient(135deg, #ffb86b, #fa9d43); color:#4a2200;
}
.msg-transfer.tr-done, .pc-msg-transfer.tr-done {
    background:linear-gradient(135deg, #ffd9b3, #ffc38a); color:#8a4a10;
}

/* ---------- 小尖角：靠左（对方发来的消息）---------- */
.msg-item:not(.self) .msg-transfer::before,
.pc-msg-item:not(.self) .pc-msg-transfer::before {
    content:''; position:absolute; top:50%; left:-6px; transform:translateY(-50%);
    width:0; height:0; border-style:solid; border-width:5px 7px 5px 0;
}
.msg-item:not(.self) .msg-transfer.tr-send::before,
.pc-msg-item:not(.self) .pc-msg-transfer.tr-send::before { border-color:transparent #f28c2e transparent transparent; }
.msg-item:not(.self) .msg-transfer.tr-recv::before,
.pc-msg-item:not(.self) .pc-msg-transfer.tr-recv::before { border-color:transparent #fa9d43 transparent transparent; }
.msg-item:not(.self) .msg-transfer.tr-done::before,
.pc-msg-item:not(.self) .pc-msg-transfer.tr-done::before { border-color:transparent #ffc38a transparent transparent; }

/* ---------- 小尖角：靠右（自己发出去的消息）---------- */
.msg-item.self .msg-transfer::before,
.pc-msg-item.self .pc-msg-transfer::before {
    content:''; position:absolute; top:50%; right:-6px; transform:translateY(-50%);
    width:0; height:0; border-style:solid; border-width:5px 0 5px 7px;
}
.msg-item.self .msg-transfer.tr-send::before,
.pc-msg-item.self .pc-msg-transfer.tr-send::before { border-color:transparent transparent transparent #f28c2e; }
.msg-item.self .msg-transfer.tr-recv::before,
.pc-msg-item.self .pc-msg-transfer.tr-recv::before { border-color:transparent transparent transparent #fa9d43; }
.msg-item.self .msg-transfer.tr-done::before,
.pc-msg-item.self .pc-msg-transfer.tr-done::before { border-color:transparent transparent transparent #ffc38a; }

/* ---------- 内部结构（两端共用同一批 .tr-* 类）---------- */
.msg-transfer .tr-left, .pc-msg-transfer .tr-left {
    display:flex; align-items:center; gap:9px; padding:9px 0; flex:1; min-width:0;
}
.msg-transfer .tr-icon, .pc-msg-transfer .tr-icon {
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#fff;
    background:rgba(255,255,255,.3);
    box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.msg-transfer .tr-body, .pc-msg-transfer .tr-body {
    display:flex; flex-direction:column; gap:1px; min-width:0;
}
.msg-transfer .tr-title, .pc-msg-transfer .tr-title {
    font-size:12px; font-weight:500; opacity:.9; letter-spacing:.2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-transfer .tr-amt, .pc-msg-transfer .tr-amt {
    font-size:20px; font-weight:700; line-height:1.15;
    display:flex; align-items:baseline; gap:1px;
}
.msg-transfer .tr-cur, .pc-msg-transfer .tr-cur { font-size:13px; font-weight:600; opacity:.9; }
.msg-transfer .tr-dec, .pc-msg-transfer .tr-dec { font-size:14px; font-weight:600; }
.msg-transfer .tr-note, .pc-msg-transfer .tr-note {
    font-size:11px; opacity:.8;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px;
}
.pc-msg-transfer .tr-title { font-size:12.5px; }
.pc-msg-transfer .tr-note { max-width:160px; }

/* ---------- 右侧按钮 ---------- */
.msg-transfer .tr-right, .pc-msg-transfer .tr-right {
    padding:9px 10px 9px 8px; flex-shrink:0; display:flex; align-items:center;
}
.msg-transfer .tr-btn, .pc-msg-transfer .tr-btn {
    font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px;
    letter-spacing:.3px; white-space:nowrap;
}
.msg-transfer .tr-btn i, .pc-msg-transfer .tr-btn i { margin-right:2px; font-size:13px; }
/* ---------- 三套配色下的标题/留言/按钮 ---------- */
.msg-transfer.tr-send .tr-title, .pc-msg-transfer.tr-send .tr-title { color:#6b3800; }
.msg-transfer.tr-send .tr-note, .pc-msg-transfer.tr-send .tr-note { color:#6b3800; }
.msg-transfer.tr-send .tr-btn, .pc-msg-transfer.tr-send .tr-btn { background:#f3dfcc; color:#a55207; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.msg-transfer.tr-recv .tr-title, .pc-msg-transfer.tr-recv .tr-title { color:#6b3800; }
.msg-transfer.tr-recv .tr-note, .pc-msg-transfer.tr-recv .tr-note { color:#6b3800; }
.msg-transfer.tr-recv .tr-btn, .pc-msg-transfer.tr-recv .tr-btn { background:#f3dfcc; color:#a55207; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.msg-transfer.tr-done .tr-title, .pc-msg-transfer.tr-done .tr-title { color:#8a4a10; }
.msg-transfer.tr-done .tr-note, .pc-msg-transfer.tr-done .tr-note { color:#9a5420; }
.msg-transfer.tr-done .tr-icon, .pc-msg-transfer.tr-done .tr-icon { background:rgba(255,255,255,.5); color:#a05a1a; }
.msg-transfer.tr-done .tr-btn, .pc-msg-transfer.tr-done .tr-btn { background:rgba(255,255,255,.65); color:#a05a1a; box-shadow:none; }

/* ============================================
   转账详情弹窗
   ============================================ */
.tr-modal {
    background:#fff; border-radius:16px; max-width:340px; width:90%;
    padding:0; overflow:hidden; position:relative;
}
.tr-close {
    position:absolute; top:12px; right:12px; z-index:10;
    background:rgba(0,0,0,.12); border:none; border-radius:50%;
    width:28px; height:28px; cursor:pointer; font-size:16px; color:#fff;
    display:flex; align-items:center; justify-content:center;
}
.tr-hero {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding:30px 24px 24px; text-align:center; color:#fff;
}
.tr-seal i { font-size:48px; color:rgba(255,255,255,.9); margin-bottom:8px; display:block; }
.tr-amount { font-size:32px; font-weight:700; letter-spacing:1px; }
.tr-amount-num { font-size:40px; }
.tr-status-row { font-size:13px; opacity:.85; margin-top:8px; }
.tr-info {
    padding:16px 24px; border-bottom:1px solid #f0f0f0;
}
.tr-info-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; font-size:13px;
}
.tr-info-label { color:#999; }
.tr-info-value { color:#333; font-weight:500; text-align:right; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-action { padding:16px 24px; }
.tr-claim-btn {
    width:100%; background:var(--primary); color:#fff; border:none; border-radius:24px;
    padding:12px; font-size:16px; font-weight:600; cursor:pointer;
    transition:background .2s;
}
.tr-claim-btn:hover { background:var(--primary-dark); }
.tr-claim-btn:active { background:var(--primary-dark); }
.tr-pending-text {
    text-align:center; color:#999; font-size:13px; padding:8px 0;
}
.tr-pending-text i { margin-right:4px; vertical-align:middle; }
.tr-error { padding:24px; text-align:center; color:#e74c3c; font-size:14px; }
/* 自己发的名片：浅蓝底 + 绿色标签/图标，和收到的白底形成对比 */
.msg-item.self .msg-card { background:#e8f0fe; }
.msg-item.self .msg-card:hover { background:#dbe5fc; }
.msg-item.self .msg-card-tag { color:#3a9b50; }
.msg-item.self .msg-card-icon { color:#3a9b50; }

/* System message */
.msg-system {
    text-align:center; padding:8px 16px; max-width:100%;
}
.msg-system span {
    font-size:12px; color:var(--text-muted); background:rgba(0,0,0,0.04);
    padding:4px 12px; border-radius:4px; display:inline-flex; align-items:center; gap:4px;
}
/* 系统提示里带图标的（火字）：flex 父容器已经把图标和文字垂直居中，
   这里再把 icon 大小和颜色定一下，跟文字 baseline 不打架 */
.msg-system span > i { font-size:13px; color:#e53935; line-height:1; }

/* Typing indicator */
.typing-indicator {
    padding:4px 16px; font-size:12px; color:var(--text-muted);
    display:flex; align-items:center; gap:4px;
}
.typing-indicator span {
    width:4px; height:4px; background:var(--text-muted); border-radius:50%;
    animation:typingDot 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }
@keyframes typingDot { 0%,60%,100%{opacity:0.3} 30%{opacity:1} }

/* Chat input area */
.chat-input-area {
    background:var(--bg-gray); border-top:1px solid var(--border);
    flex-shrink:0; padding-bottom:env(safe-area-inset-bottom);
    position:relative;
}

.chat-input-row {
    display:flex; align-items:flex-end; padding:8px 10px; gap:6px;
}
/* 语音模式下左侧"语音/键盘切换"按钮和大圆按钮并排，改成居中对齐更好看 */
.chat-input-row.voice-mode { align-items: center; }

/* 群被封禁：输入区整体禁用（按钮/输入框不可点不可输入），面板强制隐藏 */
/* 禁言/封禁：整体禁点；仅压暗周围功能按钮，输入框本体保持不透明以便红色禁言提示清晰可见 */
.chat-input-area.banned { pointer-events:none; }
.chat-input-area.banned .chat-icon-btn,
.chat-input-area.banned .chat-plus-btn,
.chat-input-area.banned .voice-hold { opacity:.5; }
.chat-input-area.banned .rich-input { background:var(--bg-gray); }
.chat-plus-panel.banned, .emoji-panel.banned { display:none !important; }

/* 输入框两侧的图标按钮（语音 / 表情） */
.chat-icon-btn {
    width:34px; height:34px; flex-shrink:0; border:none; background:none;
    color:var(--text-secondary); font-size:24px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px; transition:var(--transition);
    -webkit-tap-highlight-color:transparent; padding:0;
}
.chat-icon-btn:active { background:rgba(0,0,0,0.06); }
/* 语音模式下变成"返回键盘"，高亮提示可点击 */
.chat-icon-btn.active { color:var(--primary); }

/* 语音模式下的 X：收起"按住讲话"面板。
   位置在输入框右侧，比普通图标按钮小一圈、颜色更淡，避免和"发送"抢视觉。 */
.voice-close-btn {
    width:26px; height:26px;
    font-size:18px;
    color:var(--text-muted, #b2b2b2);
    align-self:flex-end;
    margin-bottom:5px;   /* 和输入框文字基线大致对齐 */
}
.voice-close-btn i { font-weight:400 !important; }
.voice-close-btn:active {
    background:var(--primary, #07C160);
    color:#fff;
}

/* +号按钮（输入框为空时占用发送按钮位置） */
.chat-plus-btn {
    width:34px; height:34px; flex-shrink:0; border:none; background:none;
    color:var(--text-secondary); font-size:26px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border-radius:8px; transition:var(--transition);
    -webkit-tap-highlight-color:transparent; padding:0;
}
.chat-plus-btn:active { background:rgba(0,0,0,0.06); }
.chat-plus-btn.open { color:#e74c3c; transform:rotate(45deg); }

.chat-input-row textarea {
    flex:1; border:none; background:#fff; border-radius:6px; padding:8px 12px;
    font-size:15px; resize:none; max-height:120px; outline:none;
    line-height:1.4; min-height:38px;
}

/* 富文本输入框（contenteditable，支持表情图片） */
/* min-height 需 ≥ 上下padding(16px) + 一行行高(21px)=37px，否则空输入框占位符
   会溢出 1px 触发 overflow-y:auto 渲染出右侧滚动条竖条 */
.rich-input {
    flex:1; border:none; background:#fff; border-radius:6px; padding:8px 12px;
    font-size:15px; max-height:120px; min-height:38px; outline:none;
    line-height:1.4; overflow-y:auto; white-space:pre-wrap; word-break:break-word;
    user-select:text; -webkit-user-select:text;
    scrollbar-width:none; -ms-overflow-style:none;
}
/* 移动端输入框内不显示滚动条（触摸滑动仍可滚动），避免空内容时出现竖条 */
.rich-input::-webkit-scrollbar { display:none; width:0; height:0; }
.rich-input:empty::before {
    content:attr(data-placeholder); color:#999; pointer-events:none;
}
/* 禁言/封禁时输入框提示文字固定红色（倒计时/群禁言提示），不跟随主题色；移动端字号比正常输入小一号 */
.chat-input-area.banned .rich-input:empty::before { color:#f76560; font-size:14px; }
.rich-input .chat-emote-input {
    width:24px; height:24px; vertical-align:-6px; margin:0 1px;
    display:inline-block; pointer-events:none;
}

.send-btn {
    width: auto;
    min-width: 50px;
    height: 36px;
    padding: 0 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
    flex-shrink: 0;
}
.send-btn span {
    display: block;
}
.send-btn:hover { background: var(--primary-dark); }
.send-btn:disabled { background: #a8dfb8; cursor: not-allowed; color: #fff; }

/* Voice record - 微信样式：输入框位置变成"按住说话"按钮 */
.voice-hold {
    flex:1; min-height:36px; padding:0 14px;
    border:none; border-radius:6px; background:#fff; color:#333;
    font-size:15px; font-weight:500; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
    user-select:none; -webkit-user-select:none;
    touch-action:none; outline:none; -webkit-tap-highlight-color:transparent;
    transition:background .15s, color .15s;
}
.voice-hold i {
    font-size:19px; font-weight:300 !important; color:var(--primary, #07C160);
}
.voice-hold:active { background:#f2f2f2; }
.voice-hold.recording {
    background:var(--primary, #07C160); color:#fff;
}
.voice-hold.recording i { color:#fff; }
.voice-hold.cancel-mode {
    background:#f56c6c; color:#fff;
}
.voice-hold.cancel-mode i { color:#fff; }
.voice-timer {
    font-size:13px; font-weight:600; color:var(--text-muted);
    font-variant-numeric:tabular-nums; display:none;
}
.voice-timer.show { display:inline; }
.voice-hold.recording .voice-timer { color:rgba(255,255,255,.9); }
.voice-hold.cancel-mode .voice-timer { color:rgba(255,255,255,.9); }

/* ===== 移动端"按住说话"语音面板 =====
   参考电脑端 .pc-voice-record：取消提示在按钮上方、大圆按钮居中、计时/提示在按钮下方。
   改造 2：现在面板在输入栏下方，是独立块；输入栏（含输入框 + 发送按钮）在它上方保留显示。 */
.voice-record {
    width: 100%;
    min-height: 96px;
    padding: 8px 12px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-top: 1px solid var(--border, #ededed);
    background: var(--bg-gray, #f7f7f7);
}
.voice-cancel-hint {
    height: 16px;
    font-size: 12px;
    color: #999;
    opacity: 0;
    transition: opacity .15s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.voice-cancel-arrow {
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}
.voice-hint-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: #aaa;
    font-weight: 500;
    line-height: 1;
    min-height: 16px;
}
.voice-hint-row #voiceTimer {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: #aaa;
    display: none;
}
.voice-hint-row #voiceTimer.show {
    display: inline-block;
    color: #07C160;
}

/* 圆按钮主体：参考 .pc-voice-hold-btn（电脑端 112x112，移动端稍小 88x88 适配触屏） */
.voice-record .voice-hold {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(7, 192, 96, 0.12);
    color: #07C160;
    border: none;
    padding: 0;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.voice-record .voice-hold i {
    font-size: 36px;
    font-weight: 300 !important;
    color: #07C160;
    line-height: 1;
}
.voice-record .voice-hold .voice-hold-text {
    font-size: 11px;
    font-weight: 600;
    color: #07C160;
    line-height: 1;
}
.voice-record .voice-hold:active {
    transform: scale(0.94);
}
.voice-record .voice-hold.recording {
    background: #07C160;
    color: #fff;
    box-shadow: 0 6px 18px rgba(7, 192, 96, 0.35);
    transform: scale(1.05);
}
.voice-record .voice-hold.recording i,
.voice-record .voice-hold.recording .voice-hold-text {
    color: #fff;
}
.voice-record .voice-hold.cancel-mode {
    background: rgba(245, 108, 108, 0.15);
    color: #f56c6c;
    box-shadow: 0 6px 18px rgba(245, 108, 108, 0.28);
    transform: scale(1.05);
}
.voice-record .voice-hold.cancel-mode i,
.voice-record .voice-hold.cancel-mode .voice-hold-text {
    color: #f56c6c;
}
/* 录音时显示"↑ 取消发送"提示；:has() 在所有主流浏览器（Chromium / Safari 15.4+ / Firefox 121+）都支持 */
.voice-record:has(.voice-hold.recording) .voice-cancel-hint { opacity: 1; }
/* 用户滑动到取消区域时，提示文字跟着变红提示"取消发送中" */
.voice-record:has(.voice-hold.cancel-mode) .voice-cancel-hint { opacity: 1; color: #f56c6c; }

/* 小屏手机（< 360px）按钮再缩一点，避免把左侧语音切换按钮挤没 */
@media (max-width: 360px) {
    .voice-record .voice-hold {
        width: 76px;
        height: 76px;
    }
    .voice-record .voice-hold i { font-size: 32px; }
}
.msg-voice i,
.pc-msg-voice i {
    font-weight: 300 !important;
}

/* 录音提示气泡：悬浮在输入栏正上方，小三角指向"按住说话"按钮 */
.voice-record-hint {
    position:absolute; left:0; right:0; bottom:100%;
    display:flex; flex-direction:column; align-items:center;
    padding:0 12px 6px; z-index:6; pointer-events:none;
}
.voice-hint-bubble {
    --bubble-top:rgba(32,34,40,.92);
    --bubble-bottom:rgba(18,20,25,.92);
    display:flex; flex-direction:column; align-items:center; gap:7px;
    min-width:158px; padding:12px 20px 11px;
    border-radius:16px; color:#fff; text-align:center;
    background:linear-gradient(180deg,var(--bubble-top),var(--bubble-bottom));
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.09);
    animation:voiceHintPop .18s cubic-bezier(.2,.9,.3,1.25);
    transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* 指向下方按钮的小三角 */
.voice-hint-tail {
    width:0; height:0; margin-top:-1px;
    border-left:7px solid transparent; border-right:7px solid transparent;
    border-top:9px solid rgba(18,20,25,.92);
    transition:border-top-color .18s ease;
}
.voice-hint-icon {
    font-size:25px; line-height:1; color:#fff;
    animation:voiceHintFloat 1.5s ease-in-out infinite;
}
.voice-hint-text {
    font-size:13.5px; font-weight:500; letter-spacing:.2px;
    line-height:1.3; white-space:nowrap;
}
/* 上滑进度：越往上越满，到顶进入取消区 */
.voice-hint-track {
    width:90px; height:3px; border-radius:99px;
    background:rgba(255,255,255,.22); overflow:hidden;
}
.voice-hint-progress {
    display:block; height:100%; border-radius:99px;
    width:calc(var(--hint-p, 0) * 100%);
    background:rgba(255,255,255,.85);
    transition:width .08s linear, background .18s ease;
}
/* 上滑进入取消区：整体变红、箭头翻转 */
.voice-record-hint.cancel .voice-hint-bubble {
    --bubble-top:rgba(242,86,76,.96);
    --bubble-bottom:rgba(214,58,48,.96);
    box-shadow:0 10px 28px rgba(214,58,48,.40), inset 0 1px 0 rgba(255,255,255,.20);
    transform:scale(1.04);
}
.voice-record-hint.cancel .voice-hint-tail { border-top-color:rgba(214,58,48,.96); }
.voice-record-hint.cancel .voice-hint-icon {
    transform:rotate(180deg); animation:none;
}
.voice-record-hint.cancel .voice-hint-progress { background:#fff; }
@keyframes voiceHintPop {
    from { opacity:0; transform:translateY(10px) scale(.88); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes voiceHintFloat {
    0%,100% { transform:translateY(3px); opacity:.8; }
    50%     { transform:translateY(-3px); opacity:1; }
}

/* +号功能面板 - 输入框下方弹出 */
.chat-plus-panel {
    background:var(--bg-white); border-top:1px solid var(--border);
    max-height:0; overflow:hidden; padding:0 10px;
    transition:max-height .25s ease, padding .25s ease;
}
.chat-plus-panel.open {
    max-height:220px; padding:14px 10px;
    box-shadow:0 -4px 24px rgba(0,0,0,.10);
}
.plus-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.plus-item {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.plus-icon {
    width:54px; height:54px; border-radius:10px;
    background:var(--bg-gray); color:var(--text-secondary);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; transition:var(--transition);
}
.plus-item:active .plus-icon { background:#e6e6e6; }
.plus-label { font-size:12px; color:var(--text-secondary); }

/* 后台"功能配置"开关：JS 给 body 加 [data-feature-off="..."] 标记后立即隐藏对应入口。
   兜底用，JS 异常 / 网络慢 / 老缓存时也能保证开关关了就不可见 */
body[data-feature-off="wallet"]    [data-feature="wallet"],
body[data-feature-off="wallet"]    [data-feature="redpacket"],
body[data-feature-off="wallet"]    [data-feature="transfer"],
body[data-feature-off="wallet"]    [data-feature="txn"],
body[data-feature-off="wallet"]    [data-feature="paid-join"],
body[data-feature-off="redpacket"] [data-feature="redpacket"],
body[data-feature-off="transfer"]  [data-feature="transfer"],
body[data-feature-off="txn"]       [data-feature="txn"],
body[data-feature-off="paid-join"] [data-feature="paid-join"] {
    display:none !important;
}

/* 转账弹窗 */
.transfer-user {
    display:flex; align-items:center; gap:12px;
    padding:12px; margin-bottom:16px;
    background:var(--bg-gray); border-radius:10px;
}
.transfer-user img {
    width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0;
}
.transfer-user-info { min-width:0; }
.transfer-user-name {
    font-size:15px; font-weight:600; color:var(--text-primary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.transfer-user-balance { font-size:12px; color:var(--text-muted); margin-top:3px; }
.transfer-quick {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:-4px 0 14px;
}
.transfer-quick .transfer-quick-btn {
    height:32px; border:1px solid var(--border); border-radius:6px;
    background:#fff; font-size:13px; color:var(--text-secondary); cursor:pointer;
    transition:var(--transition);
}
.transfer-quick .transfer-quick-btn:active { border-color:var(--primary); color:var(--primary); }
/* 转账快捷留言按钮 */
.transfer-remark-quick {
    display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.transfer-remark-quick .remark-quick-btn {
    display:inline-flex; align-items:center;
    padding:6px 12px; border:1px solid var(--border); border-radius:16px;
    background:#f8f8f8; font-size:12px; color:#666; cursor:pointer;
    transition:all .15s ease;
}
.transfer-remark-quick .remark-quick-btn:hover {
    border-color:var(--primary); color:var(--primary); background:#e8f5e9;
}
.transfer-remark-quick .remark-quick-btn:active {
    background:var(--primary); color:#fff; border-color:var(--primary);
}
.transfer-remark-quick .remark-quick-btn.active {
    background:var(--primary); color:#fff; border-color:var(--primary);
}

/* Emoji panel - 从底部向上弹出 */
.emoji-panel {
    background:var(--bg-white); border-top:1px solid var(--border);
    display:grid; grid-template-columns:repeat(8,1fr); gap:4px;
    overflow-y:auto; overflow-x:hidden;
    max-height:0; padding:0 10px;
    transition:max-height .25s ease, padding .25s ease;
}
.emoji-panel.open {
    max-height:220px; padding:10px;
    box-shadow:0 -4px 24px rgba(0,0,0,.10);
}
.emoji-panel .emoji {
    text-align:center; padding:4px; cursor:pointer;
    border-radius:6px; transition:var(--transition);
}
.emoji-panel .emoji:hover { background:var(--bg-gray); }
.emoji-panel .emoji img {
    width: 68%;
    aspect-ratio: 1/1;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

/* 聊天气泡内 gif 表情 */
.chat-emote {
    width:28px; height:28px; object-fit:contain;
    vertical-align:middle; margin:0 2px; display:inline-block;
}

/* Red packet form */
.red-packet-modal .modal-card { border:2px solid var(--rp-red-2); }

/* ============ 红包详情弹窗 ============ */
/* 整体按红包本身的样子做：上半部分整块红纸，下缘一道圆弧收口，
   领取明细压在白色卡片里，像从红包口子里抽出来的一沓名单 */
.rp-modal {
    max-width:340px; width:92%; overflow:hidden; padding:0; border:none;
    box-shadow:0 12px 40px rgba(120,20,15,.35);
    /* .modal-card 和这里都没设 position，.rp-close 是 absolute，
       包含块会一路往上落到 .popup-overlay（position:fixed），
       于是 top/right:8px 是相对整个视口算的，× 直接跑到页面右上角去了。
       这里补上定位基准，× 才落在红包卡片自己右上角 */
    position:relative;
}
.rp-modal .modal-body { padding:0; }
/* 弹窗里的类全部挂在 .rp-modal 下面。曾经 .rp-wish 是裸写的，
   结果被上面聊天气泡里的 .rp-wish 命中：弹窗要的是 17px + 14px 下边距，
   气泡要的是 15px + 无边距，后者定义在前面被覆盖，气泡里两行字就撑开了。
   PC 端用的是 .pc-msg-redpacket-wish，不叫这个名字，所以一直没暴露 */
.rp-modal .rp-close {
    position:absolute; top:8px; right:8px; z-index:5;
    width:30px; height:30px; padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,.18); color:#fff; font-size:19px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .15s ease;
}
.rp-modal .rp-close:hover { background:rgba(255,255,255,.32); }

.rp-modal .rp-hero {
    position:relative; overflow:hidden; text-align:center; color:#fff;
    padding:42px 20px 34px;
    background:linear-gradient(160deg,var(--rp-red-1) 0%,var(--rp-red-2) 52%,#cf2a23 100%);
}
/* 顶部一团暖光，把金色印章衬出来 */
.rp-modal .rp-hero::before {
    content:''; position:absolute; left:50%; top:-70px; transform:translateX(-50%);
    width:240px; height:240px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle at 50% 62%,rgba(255,228,165,.32),rgba(255,228,165,0) 70%);
}
/* 下缘圆弧，和微信红包封口的弧线一致 */
.rp-modal .rp-hero::after {
    content:''; position:absolute; left:-12%; right:-12%; bottom:-40px;
    height:56px; pointer-events:none;
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    background:#fff;
}
.rp-modal .rp-seal {
    position:relative; z-index:1;
    width:54px; height:54px; margin:0 auto 12px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:31px;
    color:var(--rp-red-deep);
    background:linear-gradient(145deg,var(--rp-gold-1) 0%,var(--rp-gold-2) 55%,var(--rp-gold-deep) 100%);
    box-shadow:0 3px 12px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.55);
}
.rp-modal .rp-wish {
    position:relative; z-index:1;
    font-size:17px; font-weight:600; margin-bottom:14px;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.rp-modal .rp-amount-label { position:relative; z-index:1; font-size:12px; opacity:.85; }
/* 大金额：拆成数值和单位两段，单位小一号跟着基线走 */
.rp-modal .rp-amount {
    position:relative; z-index:1; margin-top:4px;
    font-size:36px; font-weight:700; letter-spacing:.5px;
    text-shadow:0 2px 4px rgba(0,0,0,.22);
}
.rp-modal .rp-amount em { font-style:normal; font-size:15px; font-weight:600; margin-left:3px; }
.rp-modal .rp-from {
    position:relative; z-index:1; margin-top:10px;
    font-size:12.5px; opacity:.9; display:inline-flex; align-items:center; gap:5px;
}
.rp-modal .rp-notice {
    position:relative; z-index:1; margin-top:8px;
    font-size:12.5px; color:#ffe0b2;
}

/* 「开」按钮。没领过的红包才有，居中放在祝福语下面 */
.rp-modal .rp-open-wrap { position:relative; z-index:1; margin:4px 0 8px; }
.rp-modal .rp-open-btn {
    width:76px; height:76px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(145deg,var(--rp-gold-1) 0%,var(--rp-gold-2) 52%,var(--rp-gold-deep) 100%);
    color:#b3271d; font-size:30px; font-weight:700; letter-spacing:2px; font-family:inherit;
    box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.14);
    transition:transform .12s ease, box-shadow .12s ease;
}
.rp-modal .rp-open-btn:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.14); }
.rp-modal .rp-open-btn:active { transform:scale(.94); }
.rp-modal .rp-open-btn:disabled { opacity:.75; cursor:default; transform:none; }

/* 领取明细 */
.rp-modal .rp-list { padding:18px 18px 20px; }
.rp-modal .rp-list-title {
    display:flex; align-items:baseline; gap:6px;
    font-size:13px; color:var(--text-secondary); margin-bottom:4px;
}
.rp-modal .rp-list-title span { font-size:12px; color:var(--text-muted); }
.rp-modal .rp-row {
    display:flex; align-items:center; gap:10px; padding:9px 0;
    border-bottom:1px solid #f2f2f2;
}
.rp-modal .rp-row:last-child { border-bottom:none; }
.rp-modal .rp-row img { width:32px; height:32px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.rp-modal .rp-row .rp-nick {
    flex:1; font-size:14px; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rp-modal .rp-row .rp-time { font-size:12px; color:var(--text-muted); flex-shrink:0; }
.rp-modal .rp-row .rp-amt { font-size:15px; font-weight:600; color:var(--rp-red-2); flex-shrink:0; }
.rp-modal .rp-empty { padding:26px 0 10px; text-align:center; color:var(--text-muted); font-size:13px; }
/* 没人领的时候给个金色空封口，不然列表区空一大块 */
.rp-modal .rp-empty i { display:block; font-size:40px; color:#f0e0c0; margin-bottom:8px; }

/* ============ 发红包面板 ============ */
/* 和上面的红包详情保持一套视觉：红色渐变 + 金色点缀，
   区别是详情页是"看"，这里要"填"，所以表单区留白更松、控件更高 */
.rp-form-card { max-width:400px; }
.rp-form-hero {
    position:relative; overflow:hidden; text-align:center; color:#fff;
    padding:26px 20px 22px; flex-shrink:0;
    background:linear-gradient(160deg,var(--rp-red-1) 0%,var(--rp-red-2) 55%,#cf2a23 100%);
}
/* 和详情页同一束顶光，把中间的金色礼盒衬出来 */
.rp-form-hero::before {
    content:''; position:absolute; left:50%; top:-80px; transform:translateX(-50%);
    width:260px; height:260px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle at 50% 62%,rgba(255,228,165,.3),rgba(255,228,165,0) 70%);
}
.rp-form-hero h3 {
    position:relative; z-index:1; margin:10px 0 4px;
    font-size:17px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.rp-form-sub {
    position:relative; z-index:1; margin:0;
    font-size:12px; opacity:.88;
}
.rp-form-seal {
    position:relative; z-index:1;
    width:48px; height:48px; margin:0 auto; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:27px;
    color:var(--rp-red-deep);
    background:linear-gradient(145deg,var(--rp-gold-1) 0%,var(--rp-gold-2) 55%,var(--rp-gold-deep) 100%);
    box-shadow:0 3px 12px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.55);
}
/* 关闭键压在红底上，得给半透明白底，不然和金色礼盒糊在一起 */
.rp-form-close {
    position:absolute; top:10px; right:10px; z-index:2;
    width:30px; height:30px; padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,.16); color:#fff; font-size:20px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.rp-form-close:hover { background:rgba(255,255,255,.32); }

/* 类型切换：分段控件比原生下拉好看，触屏也好点 */
.rp-type-seg { display:flex; gap:8px; }
.rp-type-opt {
    flex:1; height:40px; border:1.5px solid var(--border); border-radius:9px;
    background:#f8f8f8; color:var(--text-secondary);
    font-size:14px; cursor:pointer; transition:var(--transition);
}
.rp-type-opt:hover { border-color:var(--rp-red-2); color:var(--rp-red-2); }
.rp-type-opt.active {
    border-color:var(--rp-red-2); color:#fff;
    background:linear-gradient(135deg,var(--rp-red-1),var(--rp-red-2));
    box-shadow:0 3px 10px rgba(217,45,32,.25);
}

/* 表单标签内嵌进输入框：绝对定位前缀 + input 左内边距，
   --prefix-pad 由每个字段按前缀字数自己给，
   「金额」会变成三字的「总金额」，所以按三字预留。 */
.rp-prefix-box { position:relative; }
.rp-prefix {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    font-size:13px; color:var(--text-secondary); pointer-events:none; white-space:nowrap;
}
.rp-prefix-box input { padding-left:var(--prefix-pad, 61px) !important; }
/* 金额是主字段，字号和字重比另外两个字段大一档 */
#rpAmount { font-size:16px; font-weight:600; }
.rp-hint { font-size:12px; color:var(--text-muted); margin-top:0px; min-height:10px; }
.rp-hint.rp-hint-warn { color:#e67e22; }

/* 祝福语快捷短语，省得每次都手打 */
.rp-wish-chips { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.rp-wish-chips button {
    padding:5px 12px; border:1px solid var(--border); border-radius:999px;
    background:#f8f8f8; color:var(--text-secondary); font-size:12px; cursor:pointer;
    transition:var(--transition);
}
.rp-wish-chips button:hover { border-color:var(--rp-red-2); color:var(--rp-red-2); }
.rp-wish-chips button.active {
    border-color:var(--rp-red-2); color:#fff;
    background:linear-gradient(135deg,var(--rp-red-1),var(--rp-red-2));
}

/* 「发给谁」假输入框：不能手动填，整块可点，靠 hover/已选态提示可交互 */
.rp-target-picker {
    display:flex; align-items:center; gap:6px;
    padding:10px 12px; border:1px solid var(--border);
    border-radius:8px; background:var(--bg-white); cursor:pointer;
    transition:var(--transition);
}
.rp-target-picker:hover { border-color:var(--rp-red-2); }
.rp-target-picker:active { background:#fafafa; }
.rp-picker-label { font-size:14px; color:var(--text-muted); flex:1; min-width:0; }
.rp-picker-name {
    font-size:14px; color:var(--text-primary); font-weight:500;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rp-picker-list, .rp-target-list {
    max-height:320px; overflow-y:auto; border:1px solid var(--border);
    border-radius:8px; padding:6px;
}
/* 弹窗里的群成员：整行可点，单选，选中项带对勾 */
.rp-target-item {
    display:flex; align-items:center; gap:10px; padding:8px;
    cursor:pointer; border-radius:8px; transition:var(--transition);
}
.rp-target-item:hover { background:#f7f7f7; }
.rp-target-item.selected { background:#fdf3ea; }
.rp-target-item img { width:32px; height:32px; border-radius:6px; flex-shrink:0; }
.rp-target-item span {
    font-size:14px; min-width:0; flex:1;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rp-target-item i { font-size:18px; color:var(--rp-red-2); flex-shrink:0; }
.rp-target-empty { padding:14px 8px; text-align:center; color:var(--text-muted); font-size:13px; }
/* 专属红包把个数锁死成 1，输入框置灰并禁用 */
#rpCount:disabled { background:#f0f0f0; color:#999; cursor:not-allowed; }
/* 吸底操作区：塞钱进红包 + 退款说明。
   它是 .modal-card 里 .modal-body 的兄弟节点，.modal-card 本身是 flex 列向、
   .modal-body 是唯一的滚动区（flex:1 + overflow-y:auto），footer 只要不伸缩
   就永远贴在卡片底部，内容再长也不会把它顶走。
   flex-shrink:0 是关键：否则空间不够时它会被压扁。 */
.rp-form-footer {
    flex-shrink:0;
    padding:12px 18px 16px;
    background:var(--bg-white);
    border-top:1px solid var(--border);
}
.rp-refund-note {
    margin:10px 0 0; text-align:center;
    font-size:12px; color:var(--text-muted); line-height:1.5;
}
.rp-send-btn {
    height:46px; display:flex; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(135deg,var(--rp-red-1),var(--rp-red-2));
    box-shadow:0 4px 14px rgba(217,45,32,.28);
}
.rp-send-btn:hover { box-shadow:0 6px 20px rgba(217,45,32,.38); }
.rp-send-btn i { font-size:18px; }

/* Notification dot for new messages */
.msg-item.new-msg {
    animation:msgIn 0.3s ease;
}

/* Red packet opened animation */
@keyframes rpOpen {
    0%{transform:scale(0.5);opacity:0}
    50%{transform:scale(1.1)}
    100%{transform:scale(1);opacity:1}
}
.rp-opened { animation:rpOpen 0.4s ease; }

/* Group member mention */
.msg-mention {
    color:var(--primary); font-weight:500;
}