:root {
    --primary: #07C160;
    --primary-dark: #06ad56;
    --primary-light: #e8f8ee;
    --danger: #e74c3c;
    --danger-soft: #fdecea;
    --warning: #f5a623;
    --info: #4a90d9;
    --bg: #f5f5f5;
    --bg-white: #ffffff;
    --bg-gray: #f0f0f0;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border: #e8e8e8;
    --tab-bar-line: #c8c8c8;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --radius: 10px;
    --radius-lg: 16px;
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    --bubble-received: #ffffff;
    --bubble-sent: #95ec69;
    --bubble-sent-border: #b2e085;
    --bubble-sent-text: #333333;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--text-primary); }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#d0d0d0; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#bbb; }

input, textarea, select, button { font-family:inherit; }
a { color:var(--primary); text-decoration:none; }

.toast {
    position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-100px);
    background:rgba(0,0,0,0.75); color:#fff; padding:10px 24px; border-radius:8px;
    font-size:14px; z-index:10000; transition:transform 0.3s ease; pointer-events:none;
    max-width:80%; text-align:center;
}
.toast.show { transform:translateX(-50%) translateY(0); }

.notification-popup {
    position:fixed; top:20px; right:20px; background:#fff; border-radius:12px;
    padding:14px 18px; box-shadow:var(--shadow-lg); z-index:9999; max-width:320px;
    animation:slideInRight 0.3s ease;
}
@keyframes slideInRight { from{opacity:0;transform:translateX(100px)} to{opacity:1;transform:translateX(0)} }

.popup-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.5); z-index:9998; display:flex;
    align-items:center; justify-content:center; animation:fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.confirm-overlay { z-index:11000; }
.confirm-card {
    max-width:300px; padding:26px 22px 20px; text-align:center; align-items:center;
}
.confirm-icon {
    width:48px; height:48px; border-radius:50%; margin-bottom:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; background:var(--danger-soft); color:var(--danger);
    animation:confirmPop 0.25s ease;
}
.confirm-icon.info { background:var(--primary-light); color:var(--primary); }
@keyframes confirmPop {
    from{ transform:scale(0.5); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}
.confirm-title {
    font-size:17px; font-weight:600; color:var(--text-primary); margin-bottom:8px;
}
.confirm-text {
    font-size:14px; color:var(--text-secondary); line-height:1.6; word-break:break-word;
}
.confirm-actions { display:flex; gap:10px; margin-top:22px; width:100%; }
.confirm-btn {
    flex:1; height:42px; border-radius:10px; font-size:15px; font-weight:500;
    cursor:pointer; transition:var(--transition);
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
}
.confirm-btn.ghost {
    background:#f5f5f5; color:#666; border:1px solid transparent;
}
.confirm-btn.ghost:hover { background:#ebebeb; }
.confirm-btn.primary {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff; border:none;
}
.confirm-btn.primary:hover { box-shadow:0 4px 14px rgba(7,193,96,0.3); }
.confirm-btn.danger { background:var(--danger); color:#fff; border:none; }
.confirm-btn.danger:hover { background:#d63f2f; box-shadow:0 4px 14px rgba(231,76,60,0.3); }
.confirm-btn:active { transform:scale(0.98); }

.modal-card {
    background:#fff; border-radius:var(--radius-lg); width:90%; max-width:400px;
    max-height:85vh; overflow:hidden; animation:scaleIn 0.2s ease;
    display:flex; flex-direction:column;
}
.modal-card.wide { max-width:480px; }
@keyframes scaleIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }

.modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--border);
}
.modal-header h3 { font-size:17px; font-weight:600; }
.modal-body {
    padding:18px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; min-width:0;
}
.modal-footer {
    padding:12px 18px; border-top:1px solid var(--border); flex-shrink:0;
}
/* 入群验证/修改密码等弹窗的底部按钮和 modal-footer 一起拉到卡片底部固定住，
   之前每处都是 inline 写 width:100%;margin-top:6/10，统一一下 */
.modal-footer .btn-primary { width:100%; height:42px; font-size:15px; }
.modal-search {
    padding:12px 18px 0; flex-shrink:0;
}

.modal-input, .modal-textarea {
    width:100%; border:1.5px solid #d9d9d9; border-radius:8px;
    padding:10px 12px; font-size:14px; color:#333; background:#fff;
    outline:none; transition:var(--transition);
}
.modal-input { height:42px; display:block; }
.modal-textarea { min-height:120px; line-height:1.6; resize:none; display:block; }
.modal-input::placeholder, .modal-textarea::placeholder { color:#bbb; }
.modal-input:focus, .modal-textarea:focus {
    border-color:#bfbfbf; box-shadow:0 0 0 3px rgba(0,0,0,0.05);
}

.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
    width:100%; height:42px; border:1.5px solid var(--border); border-radius:8px;
    padding:0 12px; font-size:14px; transition:var(--transition); background:#f8f8f8;
    outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(7,193,96,0.1);
}

.btn-primary {
    width:100%; height:44px; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600;
    cursor:pointer; transition:var(--transition);
}
.btn-primary:hover { box-shadow:0 4px 16px rgba(7,193,96,0.3); }
.btn-primary:active { transform:scale(0.98); }
.btn-danger {
    width:100%; height:44px; background:#fff; color:var(--danger);
    border:1.5px solid var(--danger); border-radius:10px; font-size:15px;
    cursor:pointer; transition:var(--transition);
}
.btn-danger:hover { background:var(--danger); color:#fff; }
.btn-danger.is-blocked {
    background:#f5f5f5; color:#bbb; border-color:#e0e0e0;
    cursor:not-allowed;
}
.btn-danger.is-blocked:hover { background:#f5f5f5; color:#bbb; border-color:#e0e0e0; }
.btn-outline-danger {
    width:100%; background:transparent; color:var(--danger);
    border:1px solid var(--danger); border-radius:10px; font-size:15px;
    cursor:pointer; transition:var(--transition);
}
.btn-outline-danger:hover { background:var(--danger); color:#fff; }
.btn-danger:hover { background:var(--danger); color:#fff; }
.btn-text { background:none; border:none; color:var(--primary); font-size:15px; font-weight:600; cursor:pointer; padding:4px 8px; }
.btn-text:disabled { color:#ccc; }

.icon-btn {
    background:none; border:none; cursor:pointer; color:var(--text-secondary);
    font-size:22px; padding:6px; border-radius:8px; transition:var(--transition);
    display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.icon-btn:hover { background:var(--bg-gray); color:var(--text-primary); }

.badge {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--danger); color:#fff; font-size:11px; min-width:18px; height:18px;
    border-radius:10px; padding:0 5px; font-weight:600;
}

.app-container {
    display:flex; height:100vh; height:100dvh; width:100vw; overflow:hidden;
}

.left-panel {
    width:320px; min-width:320px; height:100vh; height:100dvh; background:var(--bg-white);
    border-right:1px solid var(--border); display:flex; flex-direction:column;
    z-index:10;
}

/* 嵌入模式：iframe 打开时让 leftPanel 只露出底部 tab-bar，背景透明不挡 iframe */
.left-panel.embed-mode {
    background: transparent;
    border-right: 0;
    pointer-events: none; /* 中间空白区域不拦截点击，让 iframe 收到事件 */
}
.left-panel.embed-mode > *:not(.tab-bar) {
    display: none !important;
}
.left-panel.embed-mode > .tab-bar {
    pointer-events: auto; /* 但 tab-bar 自己仍然可点 */
    position: fixed; /* 双保险：强制贴底，不依赖 leftPanel 的 flex 布局 */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--bg-white);
    border-top: 1px solid var(--tab-bar-line);
}

.left-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 16px 10px; background:var(--bg-white);
}
.left-header-actions { display:flex; gap:4px; }
.mobile-page-title {
    font-size:18px; font-weight:700; color:#1a1a1a; cursor:pointer;
}

.user-avatar-small {
    width:40px; height:40px; cursor:pointer;
    position:relative; flex-shrink:0;
}
.user-avatar-small img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.online-dot {
    position:absolute; bottom:-1px; right:-1px; width:10px; height:10px;
    background:var(--primary); border-radius:50%; border:2px solid #fff;
}

.search-bar {
    display:flex; align-items:center; background:var(--bg-gray); margin:0 12px 10px;
    border-radius:8px; padding:0 12px; gap:8px;
}
.search-bar i { color:var(--text-muted); font-size:16px; flex-shrink:0; }
.search-bar input {
    flex:1; height:36px; border:none; background:transparent; outline:none; font-size:14px;
}

.search-bar .search-clear, .pc-search-box .search-clear {
    cursor:pointer; color:#c8c8c8; transition:color .15s; flex-shrink:0;
}
.search-bar .search-clear:hover, .pc-search-box .search-clear:hover { color:#999; }

.search-section-title { font-size:12px; color:#999; padding:8px 16px 4px; background:#fafafa; }
.search-item-tag { margin-left:auto; font-size:11px; color:#bbb; flex-shrink:0; }
.search-msg-main { flex:1; min-width:0; }
.search-msg-top { display:flex; justify-content:space-between; align-items:center; }
.search-msg-peer { font-size:14px; color:#333; }
.search-msg-time { font-size:11px; color:#bbb; margin-left:8px; flex-shrink:0; }
.search-msg-content { font-size:13px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.search-hl { color:var(--primary,#07C160); font-weight:600; }

.search-results {
    flex:1; min-height:0; overflow-y:auto; background:#fff;
    display:none;
}

.tab-bar {
    position: relative;
    display:flex; border-top:1px solid var(--tab-bar-line); padding:0 8px 2px;
    background:var(--bg-white); flex-shrink:0;
    /* 图标槽位高度（图标盒高 = 字号，因为 .tab i 用了 line-height:1）。
       左右两侧 tab 的图标和中间凸起按钮的占位块 .tab-fab::before 必须共用同一个值，
       三者的文字才会落在同一条水平线上。
       移动端在 responsive.css 里整体改成 --m-tab-icon（图标放大时占位块跟着放大）。 */
    --tab-icon-box: 22px;
}

.tab-bar.has-fab {
    border-top-color: transparent;
}
.tab-bar > svg.fab-top-border {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 50px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.tab {
    flex:1; text-align:center; padding:8px 0; cursor:pointer; position:relative;
    color:var(--text-muted); font-size:11px; transition:var(--transition);
    display:flex; flex-direction:column; align-items:center; gap:2px;
}
/* line-height:1 让图标盒高等于字号（默认 normal 会多出上下行距），
   这样 .tab-fab::before 的占位块才能用同一个数值顶开同样的高度，文字才对得齐 */
.tab i { font-size: var(--tab-icon-box, 22px); line-height: 1; }
.tab.active { color:var(--primary); }
.tab.active::after {
    content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:24px; height:3px; background:var(--primary); border-radius:2px;
}
.tab .badge { position:absolute; top:2px; right:calc(50% - 22px); }

.tab-fab {
    margin-top: 0;
    padding: 8px 0;
    gap: 2px;
    position: relative;
    overflow: visible;
    /* 必须高于 .tab-bar > svg.fab-top-border (z-index:1)，
       否则在某些 WebView 下会被 SVG path 拦截点击 */
    z-index: 2;
    pointer-events: auto;
    /* 取消移动端 300ms tap 延迟（iOS Safari / 部分 WebView） */
    touch-action: manipulation;
    /* 明确可点击 */
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* 重置 <a> 默认样式 */
    text-decoration: none;
    color: inherit;
    -webkit-user-select: none;
    user-select: none;
}

/* 中间凸起按钮的文字占位：圆形按钮是 position:absolute（不占文档流），
   用这个等高占位块把文字顶到和左右两侧 tab 同一水平线。
   高度必须跟着 --tab-icon-box 走，不能写死，否则移动端图标放大后文字就会错位。 */
.tab-fab::before {
    content: '';
    display: block;
    width: 100%;
    height: var(--tab-icon-box, 22px);
    flex-shrink: 0;
}

.tab-fab .tab-fab-circle {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #07C160), var(--primary-dark, #06A050));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 1px var(--tab-bar-line, #c8c8c8),
        0 4px 12px rgba(7, 193, 96, .35),
        inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tab-fab .tab-fab-circle i {
    color: #fff;
    font-size: 27px;
    line-height: 1;
}
.tab-fab #mobileNavFabLabel {
    color: var(--text-muted, #999);
}
.tab-fab:hover .tab-fab-circle {
    transform: translate(-50%, -1px);
    box-shadow:
        0 0 0 1px var(--border, #e8e8e8),
        0 6px 16px rgba(7, 193, 96, .45),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.tab-fab:active .tab-fab-circle {
    transform: translate(-50%, 0);
    box-shadow:
        0 0 0 1px var(--border, #e8e8e8),
        0 2px 6px rgba(7, 193, 96, .35),
        inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tab-fab.active .tab-fab-circle {
    box-shadow:
        0 0 0 1px var(--border, #e8e8e8),
        0 4px 14px rgba(7, 193, 96, .55),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.tab-fab.active #mobileNavFabLabel { color: var(--primary, #07C160); font-weight: 600; }
/* 选中态横条沿用 .tab.active::after（左右两侧按钮就是这条），
   之前这里有一句 .tab-fab.active::after { display:none } 把凸起按钮的横条关掉了，
   导致点它的时候底部没有指示条、和左右两侧不一致，已移除。 */

.tab-content { flex:1; overflow-y:auto; }
.tab-content.active { display:block; }

/* 移动端会话筛选 tab：参考 PC 端 .pc-tab-bar 的视觉（白底横排 + 选中绿色 + 底部短下划线），
   移动端尺寸稍紧凑：高度 38px、字号 13px，整体更轻巧。
   三个标签等分（flex:1），底部 1px 分割线跟 PC 端一致。 */
.mobile-session-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 2;
}
.mobile-session-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    user-select: none;
}
.mobile-session-tab.active {
    color: var(--primary, #07C160);
    font-weight: 600;
}
.mobile-session-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: var(--primary, #07C160);
    border-radius: 2px;
}

.session-list { padding:0; }
.session-item {
    display:flex; align-items:center; padding:12px 16px; cursor:pointer;
    transition:var(--transition); gap:12px; position:relative;
}
.session-item:hover { background:var(--bg-gray); }
.session-item.active { background:var(--bg-gray); }
.session-item::after {
    content:''; position:absolute; bottom:0; right:16px; left:68px;
    height:1px; background:var(--border);
}
.session-item .pin-badge {
    position:absolute; top:-2px; right:-2px;
    width:16px; height:16px;
    background:#FA9D3B; color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; z-index:2;
    box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.session-avatar {
    width:46px; height:46px; flex-shrink:0; position:relative;
    background:var(--bg-gray);
}
.session-avatar img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.session-info { flex:1; min-width:0; }
.session-name {
    font-size:15px; font-weight:500; white-space:nowrap;
    margin-bottom:4px;
    display:flex; align-items:center; gap:6px;
    min-width:0;
}
.session-name .session-name-text {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    min-width:0;
}
.session-name .secretary-tag { margin-left:0; }
.session-last {
    font-size:13px; color:var(--text-muted); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
}
.session-meta { text-align:right; flex-shrink:0; }
.session-time { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.session-badge { display:inline-flex; }

.contact-section { padding:8px 0; }
.contact-item {
    display:flex; align-items:center; padding:12px 16px; gap:12px;
    cursor:pointer; transition:var(--transition);
}
.contact-item:hover { background:var(--bg-gray); }
.contact-icon {
    width:36px; height:36px; border-radius:8px; display:flex;
    align-items:center; justify-content:center; color:#fff; font-size:18px;
}
.contact-item span { font-size:15px; flex:1; }
.contact-item .badge { margin-left:auto; }

.contact-toggle {
    display:flex; margin:10px 12px 8px;
    background:#e3e3e3; border-radius:8px; padding:3px;
    position:relative;
}
.contact-toggle-slider {
    position:absolute; top:3px; bottom:3px; left:3px;
    width:calc(50% - 3px);
    background:#fff; border-radius:6px;
    box-shadow:0 1px 3px rgba(0,0,0,.12);
    transition:transform .25s ease;
    z-index:1;
}
.contact-toggle.on-groups .contact-toggle-slider { transform:translateX(100%); }
.contact-toggle-btn {
    flex:1; padding:6px 0; border:none; border-radius:6px;
    background:transparent; color:#666;
    font-size:14px; cursor:pointer; transition:color .2s ease;
    font-family:inherit; position:relative; z-index:2;
}
.contact-toggle-btn.active {
    color:#000; font-weight:500;
}

.contact-list { padding:0; }
.contact-group-header {
    padding:8px 16px; font-size:13px; color:var(--text-muted);
    background:var(--bg-gray); font-weight:500;
}
.contact-friend-item {
    display:flex; align-items:center; padding:10px 16px; gap:12px;
    cursor:pointer; transition:var(--transition);
}
.contact-friend-item:hover { background:var(--bg-gray); }
.contact-friend-item img { width:36px; height:36px; border-radius:8px; object-fit:cover; }

.contact-avatar-wrap {
    position:relative; width:36px; height:36px; flex-shrink:0; display:inline-block;
}
.contact-avatar-wrap img { display:block; width:36px; height:36px; border-radius:8px; object-fit:cover; }

.session-avatar .group-icon,
.contact-avatar-wrap .group-icon {
    position:absolute; bottom:-2px; right:-2px;
    width:18px; height:18px;
    background:#07C160; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #f5f5f5;
}
.session-avatar .group-icon i,
.contact-avatar-wrap .group-icon i {
    font-size:10px; color:#fff;
}

.friend-avatar-wrap { position:relative; display:inline-block; width:36px; height:36px; flex-shrink:0; }
.friend-avatar-wrap img { display:block; }
.online-dot {
    position:absolute; right:-2px; bottom:-2px;
    width:10px; height:10px; border-radius:50%;
    background:#07C160; border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,0.05);
}

.discover-list { padding:8px 0; }
.discover-item {
    display:flex; align-items:center; padding:14px 16px; gap:12px;
    cursor:pointer; transition:var(--transition); border-bottom:1px solid var(--border);
}
.discover-item:hover { background:var(--bg-gray); }
.discover-icon { width:36px; height:36px; border-radius:8px; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:18px; }
.discover-icon i { color:#fff; }
.discover-item span { flex:1; font-size:15px; }
.discover-item > i:last-child { color:var(--text-muted); }

.me-card {
    display:flex; align-items:center; padding:20px 16px; gap:14px;
    background:var(--bg-white); border-bottom:1px solid var(--border); cursor:pointer;
}
.me-avatar { width:60px; height:60px; border-radius:10px; object-fit:cover; }
.me-info { flex:1; }
.me-name { font-size:18px; font-weight:600; margin-bottom:4px; }
.me-id { font-size:13px; color:var(--text-muted); }
.me-card > i { color:var(--text-muted); }

.me-list { padding:8px 0; }
.me-item {
    display:flex; align-items:center; padding:14px 16px; gap:12px;
    cursor:pointer; transition:var(--transition); border-bottom:1px solid var(--border);
}
.me-item:hover { background:var(--bg-gray); }
.me-item i:first-child { font-size:22px; }
.me-item span { flex:1; font-size:15px; }
.me-item-extra { color:var(--text-muted); font-size:13px !important; flex:none !important; }
.me-icon-gradient {
    background: linear-gradient(135deg, #ff9500, #fa5151, #6467ef, #07c160);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.me-item > i:last-child { color:var(--text-muted); }

.right-panel {
    flex:1; height:100vh; height:100dvh; background:var(--bg); position:relative; min-width:0;
}

/* 友情链接内部打开（移动端 rightPanel 嵌入 iframe）
   保留左侧栏 + 底部 tab-bar；iframe 顶替右侧主内容 */
.mobile-embed-frame {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    z-index: 50;
}
.mobile-embed-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.mobile-embed-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 500;
    overflow: hidden;
}
.mobile-embed-title i { color: var(--primary, #07C160); flex-shrink: 0; }
.mobile-embed-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-embed-frame iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

.chat-placeholder {
    height:100%; display:flex; align-items:center; justify-content:center;
}
.placeholder-content { text-align:center; }

.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }

.add-menu {
    position:absolute; top:60px; right:80px; background:#fff; border-radius:12px;
    box-shadow:var(--shadow-lg); padding:8px 0; min-width:160px;
    animation:scaleIn 0.2s ease;
}
.add-menu-item {
    display:flex; align-items:center; gap:10px; padding:12px 20px;
    cursor:pointer; transition:var(--transition); font-size:14px;
}
.add-menu-item:hover { background:var(--bg-gray); }
.add-menu-item i { font-size:20px; color:var(--primary); }
@media (min-width: 769px) {
    .add-menu-item-scan { display: none; }
}

.balance-card {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius:var(--radius); padding:24px; text-align:center;
    color:#fff; margin-bottom:20px;
}
.balance-label { font-size:13px; opacity:0.8; display:block; margin-bottom:8px; }
.balance-amount { font-size:36px; font-weight:700; letter-spacing:1px; }

/* 余额卡片（带右侧操作）：左侧余额文本，右侧白色 QR 图标 + 箭头 */
.balance-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 12px;
}
.balance-card-row .balance-card-main { flex: 1; min-width: 0; }
.balance-card-row .balance-label { margin-bottom: 4px; }
.balance-card-row .balance-amount { display: block; }
.balance-card-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .18);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.balance-card-action:hover { background: rgba(255, 255, 255, .28); }
.balance-card-action:active { transform: scale(.96); }
.balance-card-action i { color: #fff; font-size: 22px; line-height: 1; }
.balance-card-action .balance-card-action-arrow { font-size: 18px; opacity: .9; }

.recharge-options h4, .transfer-section h4 {
    font-size:15px; font-weight:600; margin-bottom:12px; color:var(--text-primary);
}
.amount-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px;
}
.amount-btn {
    height:40px; border:1.5px solid var(--border); border-radius:8px;
    background:#fff; font-size:14px; cursor:pointer; transition:var(--transition);
}
.amount-btn:hover, .amount-btn.active { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.amount-custom {
    grid-column:span 2; height:40px; border:1.5px solid var(--border); border-radius:8px;
    padding:0 10px; font-size:14px; background:#fff; outline:none; transition:var(--transition);
    width:100%; box-sizing:border-box;
}
.amount-custom:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(7,193,96,0.1); }

.pay-type-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
.pay-card {
    display:flex; align-items:center; justify-content:center; gap:6px;
    height:44px; border:1.5px solid var(--border); border-radius:10px;
    cursor:pointer; font-size:14px; transition:var(--transition); background:#fff;
}
.pay-card i { font-size:20px; }
.pay-card input[type="radio"] { display:none; }
.pay-card.active { border-color:var(--primary); background:var(--primary-light); }

.wallet-txn-link { text-align:center; font-size:12px; color:#999; margin-top:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:2px; }
.wallet-txn-link:active { color:#666; }

.transfer-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }

.profile-overlay { z-index:10008; background:rgba(0,0,0,0.5); }
.profile-card {
    background:#fff; border-radius:16px; width:90%; max-width:420px;
    max-height:85vh; display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,0.15);
}

.pc-profile-wrap {
    display:flex; flex-direction:column; height:100%;
    background:#fff; overflow:hidden;
}
.pc-profile-wrap .profile-card {
    width:100%; max-width:100%; max-height:100%;
    border-radius:0; box-shadow:none;
    height:100%;
}
.pc-profile-back {
    display:flex; align-items:center; gap:6px;
    padding:10px 14px; border-bottom:1px solid #f0f0f0;
    font-size:14px; color:#555; cursor:pointer; flex-shrink:0;
    background:#fafafa;
}
.pc-profile-back:hover { color:var(--primary); }
.pc-profile-back i { font-size:18px; }
.profile-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid #f0f0f0; flex-shrink:0;
    background:#fff;
}
.profile-header h3 { font-size:17px; font-weight:600; color:#1a1a1a; margin:0; }
.profile-header i { font-size:22px; color:#999; cursor:pointer; }
.profile-header i:hover { color:#333; }

.profile-scroll { flex:1; overflow-y:auto; padding:0; }

.profile-top {
    display:flex; align-items:center; gap:14px; padding:20px;
    background:linear-gradient(135deg, #f7f8fa 0%, #fff 100%);
}
.profile-avatar {
    width:64px; height:64px; border-radius:12px; position:relative;
    cursor:pointer; flex-shrink:0; overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-avatar-cam {
    position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,0.55);
    color:#fff; border-radius:50%; padding:3px; font-size:14px;
}
.profile-top-info { flex:1; min-width:0; }
.profile-nickname {
    display:flex; align-items:center; gap:6px; cursor:pointer;
    font-size:16px; font-weight:600; color:#1a1a1a;
}
.profile-nickname:hover { color:var(--primary); }
.profile-edit-icon { font-size:14px; color:#bbb; }
.profile-account {
    font-size:13px; color:#999; margin-top:4px;
    display:flex; align-items:center; gap:4px;
}
.profile-copy-icon-sm { font-size:13px; padding:2px; }
.profile-qrcode-btn {
    width:40px; height:40px; border-radius:50%; background:#f5f5f5;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:#666; font-size:20px; flex-shrink:0;
}
.profile-qrcode-btn:hover { background:#eee; color:var(--primary); }

.profile-cards { padding:12px 16px; }
.profile-card-item {
    display:flex; align-items:center; gap:12px; padding:8px 3px;
    background:#f7f8fa; border-radius:12px; margin-bottom:2px;
    border-bottom:1px solid #e3e3e3;
    cursor:pointer; transition:background 0.2s;
}
.profile-card-item:last-child { border-bottom:0; }
.profile-card-item:hover { background:#f0f1f3; }
.profile-card-icon {
    width:32px; height:32px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.profile-card-icon i {
    font-size:20px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.profile-card-icon .ri-quill-pen-line   { background-image: linear-gradient(135deg, #e85d3d, #f89552); }
.profile-card-icon .ri-men-line         { background-image: linear-gradient(135deg, #2a8ef0, #00c6de); }
.profile-card-icon .ri-mail-line        { background-image: linear-gradient(135deg, #8a68c7, #ee90d2); }
.profile-card-icon .ri-gift-line        { background-image: linear-gradient(135deg, #dd66ee, #ea3352); }
.profile-card-icon .ri-lock-password-line { background-image: linear-gradient(135deg, #24cc5f, #16cfad); }
.profile-card-label { font-size:15px; color:#333; min-width:70px; }
.profile-card-value { flex:1; display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:15px; color:#999; }
.profile-value-text { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-arrow { font-size:18px; color:#ccc; }
.profile-copy-icon { font-size:16px; color:#999; cursor:pointer; padding:4px; border-radius:4px; transition:color 0.2s, background 0.2s; }
.profile-copy-icon:hover { color:var(--primary); background:rgba(0,0,0,0.05); }
.profile-copy-icon.copied { color:var(--primary,#07C160); background:rgba(7,193,96,0.08); }
.profile-copy-icon.copied::before { content: "\eb7b"; }

/* ===== 修改密码弹窗：登录密码/支付密码切换（参考通讯录 好友/群聊 滑块样式） ===== */
.pwd-type-toggle {
    display:flex; margin:0 0 14px;
    background:#e3e3e3; border-radius:8px; padding:3px;
    position:relative;
}
.pwd-type-toggle-slider {
    position:absolute; top:3px; bottom:3px; left:3px;
    width:calc(50% - 3px);
    background:#fff; border-radius:6px;
    box-shadow:0 1px 3px rgba(0,0,0,.12);
    transition:transform .25s ease;
    z-index:1;
}
.pwd-type-toggle.on-fund .pwd-type-toggle-slider { transform:translateX(100%); }
.pwd-type-toggle-btn {
    flex:1; padding:7px 0; border:none; border-radius:6px;
    background:transparent; color:#666;
    font-size:14px; cursor:pointer; transition:color .2s ease;
    font-family:inherit; position:relative; z-index:2;
}
.pwd-type-toggle-btn.active { color:#000; font-weight:500; }

/* 首次设置提示条 */
.fund-first-tip {
    display:flex; align-items:center; gap:6px;
    background:rgba(7,193,96,.08); color:var(--primary,#07C160);
    font-size:13px; padding:8px 12px; border-radius:8px; margin-bottom:12px;
}

/* 支付密码 6 位方格输入 */
.pin-input { display:flex; gap:8px; justify-content:center; }
.pin-input input {
    width:40px; height:40px; text-align:center;
    font-size:20px; line-height:1;
    border:1.5px solid #d0d0d0; border-radius:8px;
    outline:none; background:#fff; padding:0;
    caret-color:var(--primary,#07C160);
    transition:border-color .15s ease, box-shadow .15s ease;
    font-family:inherit; color:#333;
    flex-shrink:0;
}
.pin-input input:focus {
    border-color:var(--primary,#07C160);
    box-shadow:0 0 0 3px rgba(7,193,96,.12);
}
.pin-input-sm input { width:34px; height:34px; font-size:18px; border-radius:6px; }

/* 提现支付密码验证方格（更精致的样式） */
.wd-pin-input { display:flex; gap:12px; justify-content:center; }
.wd-pin-input input {
    width:46px; height:50px; text-align:center;
    font-size:24px; font-weight:600; line-height:1;
    border:2px solid #e5e5e5; border-radius:10px;
    outline:none; background:#fafafa; padding:0;
    caret-color:var(--primary,#07C160);
    transition:all .2s ease;
    font-family:inherit; color:#333;
    flex-shrink:0;
}
.wd-pin-input input:focus {
    border-color:var(--primary,#07C160);
    background:#fff;
    box-shadow:0 0 0 4px rgba(7,193,96,.1);
}

/* 旧支付密码行：方格输入变窄，右侧留出「忘记了？」按钮 */
.fund-old-row { display:flex; align-items:center; gap:10px; }
.fund-old-row .pin-input { flex:1; min-width:0; }
.btn-forgot {
    flex-shrink:0; border:none; background:transparent;
    color:var(--primary,#07C160); font-size:13px;
    cursor:pointer; padding:6px 4px; font-family:inherit;
    white-space:nowrap;
}
.btn-forgot:hover { opacity:.75; }

.profile-select {
    border:1px solid #e0e0e0; border-radius:8px; padding:6px 12px;
    font-size:15px; background:#fff; color:#333; outline:none; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
    padding-right:30px;
}
.profile-select:focus { border-color:var(--primary); }

.profile-nickname input,
.profile-card-value input {
    border:1px solid var(--primary); border-radius:8px; padding:6px 10px;
    font-size:15px; outline:none; width:100%; max-width:200px;
}

.profile-footer {
    display:flex; gap:12px; padding:14px 20px; border-top:1px solid #f0f0f0;
    flex-shrink:0; background:#fff;
}
.profile-save-btn {
    flex:1; padding:12px; border:none; border-radius:10px;
    background:var(--primary); color:#fff; font-size:15px; font-weight:500;
    cursor:pointer; transition:opacity 0.2s; width:100%;
}
.profile-save-btn:hover { opacity:0.9; }
.profile-logout-btn {
    flex:1; padding:12px; border:1px solid #e0e0e0; border-radius:10px;
    background:#fff; color:#e74c3c; font-size:15px; font-weight:500;
    cursor:pointer; transition:background 0.2s;
}
.profile-logout-btn:hover { background:#fff5f5; }
.profile-logout-card:active { background:#fff0f0; }

.profile-header-centered { position: relative; justify-content: center; }
button.profile-back-btn {
    position: absolute !important;
    left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: inline-flex !important;
}
button.profile-close-btn {
    position: absolute !important;
    right: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: none !important;
}
button.profile-back-btn:hover, button.profile-close-btn:hover { color: #333; }

@media (max-width: 768px) {
    .profile-overlay {
        background: transparent;
        align-items: stretch;
    }
    .profile-overlay .profile-card {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    .profile-overlay .profile-footer {
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 769px) {
    button.profile-back-btn { display: none !important; }
    button.profile-close-btn { display: inline-flex !important; }
}

.email-edit-card { max-width:380px; }
.code-row { display:flex; gap:8px; }
.code-row input { flex:1; }

.image-preview { cursor:pointer; }
.image-preview img { max-width:90%; max-height:90vh; border-radius:8px; object-fit:contain; }

.media-preview { cursor:pointer; }
.media-preview-content { max-width:92vw; max-height:90vh; display:flex; align-items:center; justify-content:center; }
.media-preview-content img { max-width:100%; max-height:90vh; border-radius:8px; object-fit:contain; display:block; }
.media-preview-content video { max-width:100%; max-height:90vh; border-radius:8px; display:block; background:#000; }
.media-preview-file {
    background:#fff; border-radius:12px; padding:18px 22px; min-width:260px; max-width:80vw;
    display:flex; align-items:center; gap:14px; box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
.media-preview-file i { font-size:42px; color:var(--primary); flex-shrink:0; }
.media-preview-file-info { min-width:0; }
.media-preview-file-name { font-size:15px; color:#222; word-break:break-all; margin-bottom:6px; }
.media-preview-file-meta { font-size:12px; color:#888; margin-bottom:10px; }
.media-preview-file-btn {
    display:inline-block; padding:6px 14px; background:var(--primary); color:#fff;
    border-radius:16px; font-size:13px; text-decoration:none;
}

.select-friends-list { max-height:300px; overflow-y:auto; padding-right:20px; }
.empty-tip {
    padding: 32px 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #999);
}
.select-friend-item {
    display:flex; align-items:center; gap:10px; padding:10px 0;
    border-bottom:1px solid var(--border); cursor:pointer;
    position: relative;
}
.select-friend-item img { width:36px; height:36px; border-radius:8px; object-fit:cover; }
.select-friend-item span { flex:1; font-size:14px; }
.select-friend-item input[type="checkbox"] { accent-color:var(--primary); width:18px; height:18px; }
.select-friend-item.selected { background: var(--primary-light); }

#forwardFriendsList .select-friend-item { padding: 10px 12px; }
#forwardFriendsList .select-friend-item:hover {
    background: var(--bg-gray);
    border-radius: 8px;
}
#forwardFriendsList .select-friend-item input[type="checkbox"] { display: none; }
#forwardFriendsList .select-friend-item::after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #D3D3D9;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
#forwardFriendsList .select-friend-item.selected {
    background: var(--primary-light);
    border-radius: 8px;
    border-bottom-color: transparent;
}
#forwardFriendsList .select-friend-item.selected:hover { background: var(--primary-light); }
#forwardFriendsList .select-friend-item.selected::after {
    border-color: var(--primary);
    background: var(--primary);
}
#forwardFriendsList .select-friend-item.selected::before {
    content: '';
    position: absolute;
    right: 17px;
    top: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: transparent;
    transform: translateY(-60%) rotate(45deg);
    z-index: 1;
}

.forward-preview {
    background: var(--bg-gray);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}
.forward-preview-content {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-all;
}

.friend-request-item {
    display:flex; align-items:center; gap:12px; padding:12px 0;
    border-bottom:1px solid var(--border);
}
.friend-request-item:last-child { border-bottom:none; }
.friend-req-avatar { width:50px; height:50px; border-radius:50%; object-fit:cover; flex-shrink:0; margin-top:-1px; }
.friend-request-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fri-row { display:flex; align-items:center; gap:4px; font-size:12px; line-height:1.3; }
.fri-label { color:#999; flex-shrink:0; }
.fri-value { color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 验证消息：允许换行、左侧加竖线像引用块，加点底色突出 */
.fri-msg { align-items:flex-start; background:#f7f8fa; border-left:3px solid var(--primary); padding:6px 8px; border-radius:0 4px 4px 0; margin-top:4px; }
.fri-msg .fri-label { padding-top:1px; }
.fri-msg .fri-msg-text { white-space:normal; word-break:break-word; color:#555; font-size:13px; line-height:1.5; max-width:100%; }
.friend-request-actions { display:flex; gap:6px; flex-shrink:0; margin-left:auto; align-items:center; }
.friend-request-actions button {
    padding:4px 10px; border-radius:5px; border:none; font-size:13px; line-height:1.4; cursor:pointer;
}
.friend-request-actions .accept { background:var(--primary); color:#fff; }
.friend-request-actions .reject { background:#ff4d4f; color:#fff; }

.friend-card {
    display:flex; align-items:center; gap:12px; padding:14px; background:var(--bg-gray);
    border-radius:10px; margin-bottom:14px;
}
.friend-card img { width:50px; height:50px; border-radius:10px; object-fit:cover; }
.friend-card .info .name { font-size:16px; font-weight:600; }
.friend-card .info .detail { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* 添加好友搜索结果：每张卡片下方直接挂验证消息 + 添加按钮，省去「先点卡片再填消息」的中间步骤。
   视觉上比 contact-friend-item 稍大一点（带卡片背景 + 圆角），跟表单放一起更协调。
   表单内部：输入框独占一行，按钮单独一行，避在手机宽度下被挤成一团。 */
.add-friend-result-item {
    background: var(--bg-gray);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}
.add-friend-result-item:last-child { margin-bottom: 0; }
.add-friend-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
}
.add-friend-result-card img {
    width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.add-friend-result-info { flex: 1; min-width: 0; }
.add-friend-result-name { font-size: 15px; font-weight: 500; line-height: 1.3; }
.add-friend-result-detail {
    font-size: 12px; color: var(--text-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.add-friend-result-form { margin-top: 10px; }
.add-friend-result-msg {
    display: block; width: 100%;
    height: 36px; padding: 0 12px;
    border: 1px solid #e8e8e8; border-radius: 6px;
    background: #fff; font-size: 13px; color: #333;
    outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.add-friend-result-msg:focus { border-color: var(--primary, #07C160); }
.add-friend-result-msg:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }
.add-friend-result-btn {
    display: block; width: 100%;
    margin-top: 8px;
    height: 36px; line-height: 36px;
    font-size: 14px; font-weight: 500;
    border: none; border-radius: 6px;
    background: var(--primary, #07C160); color: #fff;
    cursor: pointer; transition: opacity 0.2s;
    text-align: center;
}
.add-friend-result-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.chat-info-section { margin-bottom:16px; }
.chat-info-divider { border-top: 1px solid #e8e8e8; }
.chat-info-section.chat-info-divider { margin-bottom: 0; }
.group-info-row.group-mgmt-entry { padding-bottom: 0; }
.chat-info-section h4 { font-size:13px; color:var(--text-muted); margin-bottom:8px; }
.chat-info-member {
    display:flex; align-items:center; gap:10px; padding:8px 0;
}
.chat-info-member img { width:36px; height:36px; border-radius:8px; object-fit:cover; }

.toast {
    position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-100px);
    background:rgba(0,0,0,0.75); color:#fff; padding:10px 24px; border-radius:8px;
    font-size:14px; z-index:10020; transition:transform 0.3s ease;
    pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); }

.toast.toast-error {
    background: #e74c3c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
}
.toast.toast-error::before {
    content: '\eb99';
    font-family: 'remixicon';
    font-size: 14px;
    color: #ffd2cc;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.toast.toast-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
}
.toast.toast-success::before {
    content: '\eb7b';
    font-family: 'remixicon';
    font-size: 13px;
    color: #6cf39a;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
/* 自定义图标的 toast：调用方传了 icon 参数时启用，让 <i> 和文本并排 */
.toast.toast-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
}
.toast.toast-with-icon > i {
    font-size: 15px;
    color: #fff;       /* 默认白色：适合「对方不想收到你的消息」这种禁止类提示 */
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
/* 绿色专用：与 .toast-success 默认的勾选色保持一致，给「已移出黑名单」这类成功提示用 */
.toast.toast-with-icon.toast-icon-success > i { color: #6cf39a; }
/* 红色专用：error 场景（如「对方不想收到你的消息」）用红色更醒目 */
.toast.toast-with-icon.toast-icon-error > i { color: #ff8a8a; }

.moments-panel { align-items:stretch; }
.moments-fullscreen {
    width:100%; height:100%; background:var(--bg); display:flex; flex-direction:column;
}
.moments-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; background:var(--bg-white); border-bottom:1px solid var(--border);
}
.moments-header h3 { font-size:17px; font-weight:600; }

.balance-header {
    position: relative;
    justify-content: center;
}
button.wallet-back-btn {
    position: absolute !important;
    left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: inline-flex !important;
    background: none; border: none; padding: 6px; cursor: pointer;
    color: var(--text-secondary, #666); font-size: 22px; line-height: 1;
    align-items: center; justify-content: center;
}
button.wallet-close-btn {
    position: absolute !important;
    right: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: none !important;
    background: none; border: none; padding: 6px; cursor: pointer;
    color: var(--text-secondary, #666); font-size: 22px; line-height: 1;
    align-items: center; justify-content: center;
}
button.wallet-back-btn:hover, button.wallet-close-btn:hover { color: #333; }
@media (min-width: 769px) {
    button.wallet-back-btn { display: none !important; }
    button.wallet-close-btn { display: inline-flex !important; }
}

.txn-header {
    position: relative;
    justify-content: center;
}
button.txn-back-btn {
    position: absolute !important;
    left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: inline-flex !important;
    background: none; border: none; padding: 6px; cursor: pointer;
    color: var(--text-secondary, #666); font-size: 22px; line-height: 1;
    align-items: center; justify-content: center;
}
button.txn-close-btn {
    position: absolute !important;
    right: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: none !important;
    background: none; border: none; padding: 6px; cursor: pointer;
    color: var(--text-secondary, #666); font-size: 22px; line-height: 1;
    align-items: center; justify-content: center;
}
button.txn-back-btn:hover, button.txn-close-btn:hover { color: #333; }
@media (min-width: 769px) {
    button.txn-back-btn { display: none !important; }
    button.txn-close-btn { display: inline-flex !important; }
}

/* 记录中心单选选项卡：交易记录 | 提现记录 */
.records-tab-bar {
    display: flex;
    flex-shrink: 0;
    margin: 0 18px 2px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.records-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.records-tab.active {
    background: #fff;
    color: var(--primary, #07C160);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.records-tab:active { opacity: .8; }

.page-panel { width:100%; height:100%; background:var(--bg); display:flex; flex-direction:column; }
.page-panel-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
@media (min-width: 769px) {
    .page-panel {
        width:480px; max-width:92vw; height:auto; max-height:calc(70vh + 35px);
        border-radius:16px; overflow:hidden; background:#fff;
        box-shadow:0 10px 40px rgba(0,0,0,0.15);
        padding-bottom: 20px;
    }
    /* 支付密码弹窗被聊天内转账/发红包唤起时，宽度跟着发起方弹窗走（都是 400px），
       避免「从小窗里弹出一个大窗」的突兀感。提现自己调起时保持默认 480px。 */
    .page-panel.pwd-panel-match-modal {
        width:400px;
    }
}

.withdraw-footer {
    flex-shrink:0; padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:#fff; border-top:1px solid var(--border);
    box-shadow:0 -2px 8px rgba(0,0,0,0.04);
}
.wd-history-link {
    margin-top:10px; text-align:center; font-size:13px; color:var(--primary);
    cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; gap:4px;
}
.wd-history-link i { font-size:14px; }
.wd-history-link:hover { opacity:.85; }

.wd-history-section {
    padding:0 16px;
}
.wd-history-section + .wd-history-section {
    border-top:8px solid #f5f5f5;
    margin-top:8px;
    padding-top:14px;
}
.wd-history-section-title {
    font-size:14px; color:#333; font-weight:600; margin:6px 0 10px;
    display:flex; align-items:center; justify-content:space-between;
}
.wd-history-section-title .wd-count {
    font-size:12px; color:#999; font-weight:400;
}
.wd-history-empty {
    padding:24px 0; text-align:center; color:#aaa; font-size:13px;
}
.wd-history-item {
    display:flex; justify-content:space-between; padding:12px 14px;
    border:1px solid #eee; border-radius:10px; margin-bottom:8px;
    background:#fafafa; align-items:center; gap:10px;
}
.wd-history-item .wd-item-main { min-width:0; flex:1; }
.wd-history-item .wd-item-amount { font-size:14px; font-weight:600; color:#333; }
.wd-history-item .wd-item-meta { font-size:12px; color:#888; margin-top:4px; }
.wd-history-item .wd-item-time { font-size:12px; color:#bbb; margin-top:4px; }
.wd-history-item .wd-status-tag {
    font-size:12px; padding:3px 10px; border-radius:10px;
    background:rgba(0,0,0,.04); flex-shrink:0;
}
.wd-history-item .wd-cancel-btn {
    margin-top:8px; padding:5px 12px; border:1px solid #ddd; border-radius:6px;
    background:#fff; color:#e74c3c; font-size:12px; cursor:pointer;
}
.moments-list { flex:1; overflow-y:auto; padding:12px; }
.moments-loading { text-align:center; padding:20px; color:var(--text-muted); font-size:13px; }

.moment-card {
    background:#fff; border-radius:12px; padding:16px; margin-bottom:12px;
    box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.moment-header {
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.moment-header img { width:42px; height:42px; border-radius:8px; object-fit:cover; }
.moment-header .info .name { font-size:15px; font-weight:600; color:var(--primary); }
.moment-header .info .time { font-size:12px; color:var(--text-muted); }
.moment-content { font-size:15px; line-height:1.6; margin-bottom:10px; }
.moment-images {
    display:grid; gap:4px; margin-bottom:10px;
}
.moment-images.grid-1 { grid-template-columns:1fr; max-width:240px; }
.moment-images.grid-2 { grid-template-columns:1fr 1fr; max-width:300px; }
.moment-images.grid-3 { grid-template-columns:1fr 1fr 1fr; max-width:360px; }
.moment-images.grid-4 { grid-template-columns:1fr 1fr; max-width:300px; }
.moment-images.grid-more { grid-template-columns:1fr 1fr 1fr; max-width:360px; }
.moment-images img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; cursor:pointer; }
.moment-location { font-size:12px; color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:4px; }

.moment-actions-bar {
    display:flex; align-items:center; justify-content:flex-end; gap:4px;
    padding-top:10px; border-top:1px solid var(--border);
}
.moment-actions-bar button {
    background:none; border:none; cursor:pointer; color:var(--text-muted);
    font-size:18px; padding:4px 8px; border-radius:4px; transition:var(--transition);
}
.moment-actions-bar button:hover { background:var(--bg-gray); }

.moment-comments { margin-top:10px; }
.moment-comment {
    font-size:13px; padding:6px 0; line-height:1.5;
}
.moment-comment .author { color:var(--primary); font-weight:500; }
.moment-comment .reply { color:var(--text-muted); }

.moment-likes { margin-top:8px; }
.moment-likes .like-author { font-size:13px; color:var(--primary); font-weight:500; }

.no-data { text-align:center; padding:40px; color:var(--text-muted); font-size:14px; }

.loading { text-align:center; padding:20px; }
.loading::after {
    content:''; display:inline-block; width:24px; height:24px;
    border:3px solid var(--border); border-top-color:var(--primary);
    border-radius:50%; animation:spin 0.6s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

.moment-images-preview {
    display:flex; flex-wrap:wrap; gap:8px; margin:12px 0;
}
.moment-images-preview img {
    width:80px; height:80px; object-fit:cover; border-radius:8px;
}
.moment-actions {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:12px; border-top:1px solid var(--border);
}
.moment-action-left {
    display:flex; align-items:center; gap:4px;
}
.moment-upload-hint {
    font-size:12px; color:#999;
}
.moment-publish-btn {
    width:100%; height:40px; border-radius:8px; font-size:15px; font-weight:600;
    border:none; background:var(--primary,#07C160); color:#fff; cursor:pointer;
}
.moment-publish-btn:disabled { background:#b6e3c8; cursor:not-allowed; }

.notify-card { max-width:420px; max-height:70vh; padding-bottom:20px; }
.notify-header-actions { display:flex; align-items:center; gap:14px; }
.notify-read-all {
    background:none; border:none; color:#07C160; font-size:13px;
    cursor:pointer; padding:4px 6px; border-radius:6px; transition:var(--transition);
}
.notify-read-all:hover { background:rgba(7,193,96,0.1); }
.notify-read-all i { margin-right:3px; vertical-align:-1px; }
.notify-close { cursor:pointer; font-size:20px; color:var(--text-muted); }
.notify-close:hover { color:#333; }
.notice-item { cursor:pointer; }
.notice-line {
    display:flex; align-items:baseline;
    font-size:13px; color:#666; line-height:1.5;
}
.notice-text {
    flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.notice-line.notice-expanded .notice-text {
    white-space:normal; overflow:visible; text-overflow:clip;
}
.notice-toggle {
    flex-shrink:0; color:var(--primary); margin-left:4px;
    display:none;
}
.notify-list { flex:1; overflow-y:auto; padding:8px 0; -webkit-overflow-scrolling:touch; }

.notify-tabs {
    display:flex; align-items:center; padding:10px 14px 0; gap:8px;
    border-bottom:1px solid var(--border);
}
.notify-tab {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:9px 0; font-size:13px; color:#666; cursor:pointer;
    border-bottom:2px solid transparent; transition:var(--transition);
    position:relative; user-select:none;
}
.notify-tab i { font-size:16px; }
.notify-tab:hover { color:#333; }
.notify-tab.active {
    color:var(--primary, #07C160);
    border-bottom-color:var(--primary, #07C160);
    font-weight:600;
}
.notify-tab-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; font-size:11px; font-weight:500;
    color:#fff; border-radius:9px; line-height:1;
}
/* 按 id 区分语义色：未读=红、已读=绿，激活/非激活都不变 */
#notifyUnreadCount { background:#FA5151; }
#notifyReadCount   { background:#07C160; }

.notify-item {
    display:flex; align-items:flex-start; gap:12px; padding:14px 20px;
    cursor:pointer; border-bottom:1px solid var(--border); transition:var(--transition);
    position:relative;
}
.notify-item:hover { background:var(--bg-gray); }
.notify-item.is-read .notify-title { color:#888; font-weight:500; }
.notify-item.is-read .notify-content { color:#999; }
.notify-item.is-read .notify-time { color:#bbb; }
.notify-item.is-read { background:#fafafa; }
.notify-icon {
    flex-shrink:0; width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px;
}
.notify-item.is-read .notify-icon { opacity:0.7; }
.notify-body { flex:1; min-width:0; }
.notify-title { font-size:14px; font-weight:600; color:#1a1a1a; margin-bottom:4px; }
.notify-content { font-size:13px; color:#666; line-height:1.5; word-break:break-all; }
.notify-time { font-size:12px; color:#aaa; margin-top:4px; }
.notify-dot {
    position:absolute; top:20px; right:16px; width:8px; height:8px;
    border-radius:50%; background:#FA5151;
}
.notify-dot.read { background:#07C160; }
.notify-empty {
    text-align:center; color:#ccc; padding:48px 0; font-size:14px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
}
.notify-empty i {
    font-size:38px; color:#dcdfe6;
}

.settings-card { max-width:440px; }
.settings-body { padding:20px; }

.settings-header-centered { position: relative; justify-content: center; }
button.settings-back-btn {
    position: absolute !important;
    left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: inline-flex !important;
}
button.settings-close-btn {
    position: absolute !important;
    right: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: none !important;
}
button.settings-back-btn:hover, button.settings-close-btn:hover { color: #333; }

@media (max-width: 768px) {
    #settingsOverlay {
        background: transparent;
        align-items: stretch;
    }
    #settingsOverlay .settings-card {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    #settingsOverlay .settings-body { padding: 14px 16px; }
}

@media (min-width: 769px) {
    button.settings-back-btn { display: none !important; }
    button.settings-close-btn { display: inline-flex !important; }
}

/* ===== 一键群发面板 =====
   PC 端是居中卡片弹窗，移动端是整页（无遮罩），和个人性化设置面板同一套做法。 */
.broadcast-card { max-width:440px; }
.broadcast-header { position:relative; justify-content:center; }
button.broadcast-back-btn {
    position:absolute !important;
    left:14px !important; top:50% !important; transform:translateY(-50%) !important;
    display:inline-flex !important;
}
button.broadcast-close-btn {
    position:absolute !important;
    right:14px !important; top:50% !important; transform:translateY(-50%) !important;
    display:none !important;
}
button.broadcast-back-btn:hover, button.broadcast-close-btn:hover { color:#333; }

.broadcast-body { padding:20px; }
.broadcast-hint {
    display:flex; align-items:flex-start; gap:8px;
    padding:10px 12px; margin-bottom:16px;
    font-size:12px; line-height:1.6; color:#888;
    background:#f7f8fa; border-radius:10px;
}
.broadcast-hint i { font-size:15px; color:var(--primary); flex-shrink:0; margin-top:1px; }
.broadcast-label { font-size:13px; font-weight:600; color:#333; margin-bottom:8px; }
.broadcast-textarea {
    width:100%; box-sizing:border-box; resize:vertical;
    min-height:120px; padding:12px;
    font-size:14px; line-height:1.6; font-family:inherit; color:#333;
    background:#f7f8fa; border:1.5px solid #e8eaed; border-radius:10px;
    outline:none; transition:var(--transition);
}
.broadcast-textarea:focus { background:#fff; border-color:var(--primary); }
.broadcast-count { margin-top:6px; font-size:12px; color:#aaa; text-align:right; }

.broadcast-footer {
    display:flex; gap:10px; padding:0 20px 20px;
}
/* 取消按钮：前台没有 .btn-secondary，这里补一个次要按钮样式 */
.broadcast-footer .btn-secondary {
    flex:0 0 96px; height:44px; background:#f2f3f5; color:#555;
    border:none; border-radius:10px; font-size:15px; font-weight:600;
    cursor:pointer; transition:var(--transition);
}
.broadcast-footer .btn-secondary:hover { background:#e8e9eb; }
.broadcast-footer .btn-primary { flex:1; }
.broadcast-footer .btn-primary:disabled { opacity:0.6; cursor:not-allowed; }

@media (max-width: 768px) {
    #broadcastOverlay {
        background: transparent;
        align-items: stretch;
    }
    #broadcastOverlay .broadcast-card {
        width:100%; max-width:100%;
        height:100%; max-height:100%;
        border-radius:0; box-shadow:none;
    }
    #broadcastOverlay .broadcast-body { padding:14px 16px; }
    /* 移动端底部按钮贴到安全区上方，避免被 Home Indicator 挡住 */
    #broadcastOverlay .broadcast-footer {
        padding:0 16px calc(16px + env(safe-area-inset-bottom));
    }
    #broadcastOverlay .broadcast-footer .btn-secondary { flex:0 0 88px; }
}
@media (min-width: 769px) {
    button.broadcast-back-btn { display:none !important; }
    button.broadcast-close-btn { display:inline-flex !important; }
}
.settings-section { margin-bottom:14px; position:relative; }
.settings-label {
    position:absolute; top:-11px; left:14px; z-index:6;
    margin:0; padding:4px 12px;
    font-size:12px; font-weight:600; color:#fff; letter-spacing:0.5px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,0.18);
    opacity:0; transform:translateY(6px) scale(0.85); transform-origin:left bottom;
    pointer-events:none; transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.settings-section:hover .settings-label {
    opacity:1; transform:translateY(0) scale(1);
}
.settings-hint { font-size:12px; color:#aaa; margin-top:8px; }
.theme-color-picker { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.theme-color-btn {
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    position:relative; transition:var(--transition); border:2px solid transparent;
}
.theme-color-btn:hover { transform:scale(1.15); }
.theme-color-btn.active {
    border-color:#333;
}
.theme-color-btn.active::after {
    content: '\eb7b';
    font-family: 'remixicon';
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    color:#fff; font-size:18px; line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
.custom-color-btn {
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff; box-shadow:0 0 0 1px #ddd; position:relative; overflow:hidden;
    transition:transform 0.15s ease;
}
.custom-color-btn:hover { transform:scale(1.15); }
.custom-color-btn i { color:#fff; font-size:18px; text-shadow:0 1px 2px rgba(0,0,0,0.5); pointer-events:none; }
.custom-color-btn input {
    position:absolute; inset:0; width:36px; height:36px; opacity:0; cursor:pointer;
}
.bg-setting-row { display:flex; align-items:center; gap:14px; }
.bg-preview {
    flex-shrink:0; width:64px; height:108px; border-radius:8px;
    background:#f5f5f5; border:1px dashed #d5d5d5;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.bg-preview i { font-size:26px; color:#ccc; }
.bg-preview img { width:100%; height:100%; object-fit:cover; }
.bg-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.btn-sm-primary {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff; border:none; border-radius:8px; font-size:13px;
    padding:7px 16px; cursor:pointer; transition:var(--transition);
}
.btn-sm-primary:hover { box-shadow:0 4px 12px rgba(7,193,96,0.3); }
.btn-sm-primary i { margin-right:4px; }
.btn-sm-danger {
    background:transparent; color:var(--danger); border:1px solid var(--danger);
    border-radius:8px; font-size:13px; padding:6px 16px; cursor:pointer;
    transition:var(--transition);
}
.btn-sm-danger:hover { background:var(--danger); color:#fff; }
.btn-sm-danger i { margin-right:4px; }
.save-settings-btn { margin-top:8px; }

.settings-footer {
    flex-shrink:0;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    background:#fff;
}
.settings-footer .save-settings-btn { width:100%; margin:0; }

.settings-card-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border:1px solid var(--border); border-radius:12px;
    background:#fafafa; transition:var(--transition); cursor:pointer;
}
.settings-card-row:hover { border-color:var(--primary); background:#fff; }
.scr-preview {
    flex-shrink:0; width:52px; height:52px; border-radius:10px;
    background:#f0f0f0; border:1px dashed #d5d5d5; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.scr-preview i { font-size:22px; color:#ccc; }
.scr-preview img { width:100%; height:100%; object-fit:cover; }
.scr-info { flex:1; min-width:0; }
.scr-title { font-size:14px; color:#1a1a1a; font-weight:500; }
.scr-sub { font-size:12px; color:#aaa; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scr-arrow { color:#ccc; font-size:20px; flex-shrink:0; }
.scr-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.scr-bubble-preview { flex-direction:column; justify-content:center; gap:4px; padding:6px; background:#f5f6f8; border-style:solid; }
.mini-bubble { display:block; height:9px; border-radius:5px; }
.mini-recv { width:26px; background:var(--bubble-received,#fff); border:1px solid #e2e2e2; }
.mini-sent { width:32px; background:var(--bubble-sent,#95ec69); align-self:flex-end; }

.bubble-modal-card { max-width:440px; }
.bubble-modal-card .modal-body { overflow-y:auto; max-height:70vh; }
.bubble-chat-preview {
    background:#ededed; border-radius:12px; padding:16px 14px;
    display:flex; flex-direction:column; gap:12px; margin-bottom:16px;
}
.bcp-row { display:flex; align-items:flex-start; gap:8px; }
.bcp-row.self { justify-content:flex-end; }
.bcp-avatar {
    width:34px; height:34px; border-radius:6px; background:#c0c4cc; color:#fff;
    font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.bcp-row.self .bcp-avatar { background:var(--primary); }
.bcp-bubble {
    max-width:72%; padding:9px 13px; border-radius:6px; font-size:14px;
    line-height:1.5; position:relative; word-break:break-word;
    box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.bcp-recv { background:var(--bubble-received,#fff); color:#1a1a1a; }
.bcp-sent { background:var(--bubble-sent,#95ec69); color:var(--bubble-sent-text,#333); }
.bubble-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.bubble-preset {
    border:2px solid var(--border); border-radius:10px; padding:10px 6px 8px;
    cursor:pointer; text-align:center; position:relative; transition:var(--transition);
    background:#fff;
}
.bubble-preset:hover { border-color:#c8c8c8; transform:translateY(-2px); }
.bubble-preset.active { border-color:var(--primary); }
.bp-bubbles { display:flex; flex-direction:column; gap:5px; margin-bottom:6px; }
.bp-bubble { display:block; height:14px; border-radius:7px; border:1px solid rgba(0,0,0,0.08); }
.bp-recv { width:78%; margin-right:auto; }
.bp-sent { width:78%; margin-left:auto; }
.bp-name { font-size:11px; color:#888; }
.bp-check { position:absolute; top:5px; right:5px; font-size:16px; color:var(--primary); display:none; }
.bubble-preset.active .bp-check { display:block; }

.sound-modal-card { max-width:380px; }
.sound-row { display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--border); }
.sound-row:last-child { border-bottom:none; }
.sound-info { flex:1; min-width:0; }
.sound-title { font-size:14px; color:#1a1a1a; font-weight:500; }
.sound-sub { font-size:12px; color:#aaa; margin-top:2px; }
.cb-color-input {
    width:48px; height:34px; padding:0; border:1px solid var(--border);
    border-radius:8px; background:#fff; cursor:pointer; flex-shrink:0;
}
.cb-color-input::-webkit-color-swatch-wrapper { padding:2px; }
.cb-color-input::-webkit-color-swatch { border:none; border-radius:6px; }

.group-info-header {
    display:flex; align-items:center; gap:14px; flex:0 0 auto;
    padding:16px 18px; background:#fff;
    border-bottom:1px solid var(--border);
}
.group-info-avatar {
    position:relative; flex-shrink:0; width:56px; height:56px; border-radius:12px;
    overflow:hidden; cursor:default;
}
.group-info-avatar[onclick] { cursor:pointer; }
.group-info-avatar img { width:100%; height:100%; object-fit:cover; }
.group-info-avatar i {
    position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.45);
    color:#fff; font-size:14px; padding:3px 0; text-align:center; display:none;
}
.group-info-avatar[onclick]:hover i { display:block; }
.group-info-main { flex:1; min-width:0; }
.group-info-name { font-size:17px; font-weight:700; color:#1a1a1a; word-break:break-all; }
.group-info-name i.ri-edit-line { font-size:14px; color:var(--primary); cursor:pointer; margin-left:6px; }
.group-info-no { font-size:13px; color:#666; margin-top:4px; }
.group-info-no i.ri-file-copy-line { cursor:pointer; color:var(--primary); font-size:14px; margin-left:4px; }
.group-info-count { font-size:12px; color:#999; margin-top:4px; }
.group-info-edit-row { display:flex; gap:8px; align-items:center; }
.group-info-edit-row input { flex:1; height:34px; border:1.5px solid var(--primary); border-radius:8px; padding:0 10px; font-size:14px; }
.chat-info-sec-head { display:flex; align-items:center; justify-content:space-between; }
.chat-info-sec-head h4 { margin:0; }
.chat-info-sec-head i.ri-edit-line { cursor:pointer; color:var(--primary); font-size:15px; }
.group-info-ann { font-size:13px; color:#666; line-height:1.6; margin-top:8px; word-break:break-all; }
.join-mode-row {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.join-mode-title { font-size:14px; font-weight:600; color:#1a1a1a; }
.join-mode-sub { font-size:12px; color:#999; margin-top:2px; }
.switch {
    width:46px; height:26px; border-radius:13px; background:#d8d8d8; position:relative;
    cursor:pointer; transition:background 0.2s ease; flex-shrink:0;
}
.switch span {
    position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:#fff; transition:left 0.2s ease;
}
.switch.on { background:var(--primary); }
.switch.on span { left:23px; }

.modal-close-btn {
    flex-shrink:0; width:28px; height:28px; padding:0; border:none; border-radius:8px;
    background:transparent; color:var(--text-secondary); font-size:20px; line-height:1;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    transition:var(--transition);
}
.modal-close-btn:hover { background:var(--bg-gray); color:var(--text-primary); }
.modal-inline-head {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:12px;
}
.modal-inline-head h4 { font-size:17px; font-weight:600; }
.friend-profile-panel {
    display:flex; flex-direction:column; flex:1; min-height:100%; min-width:0;
}
.friend-profile { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; min-width:0; }
.friend-profile-head {
    display:flex; align-items:center; gap:14px; padding:10px 0 16px;
    border-bottom:1px solid var(--border);
}
.friend-profile-avatar {
    width:56px; height:56px; border-radius:12px; flex-shrink:0;
    object-fit:cover; background:var(--bg-gray);
}
.friend-profile-main { flex:1; min-width:0; }
.friend-profile-name { font-size:17px; font-weight:700; color:#1a1a1a; word-break:break-all; }
.friend-profile-alias { font-size:13px; color:var(--text-muted); margin-top:4px; word-break:break-all; }
.friend-profile-rows { padding-top:4px; }
.friend-profile-row { display:flex; align-items:center; gap:12px; padding:4px 0; }
.friend-profile-row .k {
    width:64px; flex-shrink:0; font-size:14px; color:var(--text-muted);
}
.friend-profile-row-burn {
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding-top: 6px;
}
/* 「黑名单」卡片：在「阅后即焚」和「黑名单」之间加一条分割线 */
.friend-profile-row-block {
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding-top: 6px;
}
/* 「阅后即焚」/「黑名单」卡片里的切换按钮靠右：value 容器撑满剩余空间后右对齐 */
.friend-profile-row-burn .v,
.friend-profile-row-block .v {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* 小秘书的「黑名单」卡片整体置灰：开关禁用 + 不可点击 */
.friend-profile-row-block.is-secretary-block {
    opacity: 0.45;
    cursor: not-allowed;
}
.friend-profile-row-block.is-secretary-block .switch-btn {
    cursor: not-allowed;
}
.friend-profile-row .v { flex:1; min-width:0; font-size:14px; color:#1a1a1a; word-break:break-word; }
.friend-profile-clear {
    display:flex; flex-direction:column; gap:8px;
    margin-top:6px; padding-top:14px; border-top:1px solid var(--border);
}
.clear-btn {
    width:100%; max-width:100%; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:10px 8px; border-radius:10px; font-size:13px; cursor:pointer;
    background:#e8e8e8a3; color:var(--text-secondary); border:1px solid transparent;
    transition:var(--transition);
}
.clear-btn i { font-size:15px; }
.clear-btn:hover { background:#dcdcdc; color:var(--text-primary); }
.clear-btn.danger { background:var(--danger-soft); color:var(--danger); }
.clear-btn.danger:hover { background:var(--danger); color:#fff; }

.switch-btn {
    display:inline-flex; align-items:center;
    padding:4px 2px; background:none; border:none; cursor:pointer; font-size:13px;
}
.switch-track {
    position:relative; display:inline-block;
    width:56px; height:24px; box-sizing:border-box;
    background:#e74c3c; border-radius:12px; transition:background .2s ease;
}
.switch-label {
    position:absolute; top:50%; transform:translateY(-50%);
    right:9px; font-size:12px; color:#fff; line-height:1; user-select:none;
}
.switch-dot {
    position:absolute; top:3px; left:3px; width:18px; height:18px;
    background:#fff; border-radius:50%; transition:left .2s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch-btn.on .switch-track { background:#07C160; }
.switch-btn.on .switch-dot { left:35px; }
.switch-btn.on .switch-label { right:auto; left:9px; }

.msg-burn-wrap, .pc-msg-burn-wrap {
    position:relative; display:inline-block; max-width:100%;
}
.msg-burn-real, .pc-msg-burn-real { visibility:hidden; }
.msg-burn-wrap.burn-locked, .pc-msg-burn-wrap.burn-locked { min-width:100px; }
.msg-burn-cover, .pc-msg-burn-cover {
    position:absolute; inset:0; z-index:1;
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:6px 14px;
    background:#fff4e8; color:#d4380d; cursor:pointer; font-style:italic;
    font-size:13px; border-radius:12px; line-height:1.4;
    white-space:nowrap;
}
.msg-burn-cover i, .pc-msg-burn-cover i,
.msg-burn-flag i, .pc-msg-burn-flag i { color:#d4380d; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .msg-burn-cover i, .pc-msg-burn-cover i,
    .msg-burn-flag i, .pc-msg-burn-flag i {
        background:linear-gradient(180deg, #ffd54a 0%, #ff8f1f 42%, #e53935 72%, #8e1b12 100%);
        -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent; color:transparent;
    }
}
.msg-burn-cover i, .pc-msg-burn-cover i { font-size:15px; }
.msg-burn-flag i, .pc-msg-burn-flag i { font-size:11px; }
.msg-burn, .pc-msg-burn { box-shadow: inset 0 0 0 1px rgba(198,40,40,.32); }
.burn-timer {
    display:inline-block; margin:0 5px 0 0; padding:0 6px;
    background:linear-gradient(180deg, #e53935, #b71c1c); color:#fff; border-radius:8px;
    font-size:11px; line-height:16px; vertical-align:middle; font-style:normal;
}
.msg-burn-flag, .pc-msg-burn-flag { margin:0 4px; vertical-align:middle; }
.friend-profile-actions {
    padding-top:16px; margin-top:16px; border-top:1px solid var(--border);
}
.friend-profile-actions .btn-danger {
    display:flex; align-items:center; justify-content:center; gap:6px;
    min-width:0; max-width:100%; margin-bottom:20px;
}
.btn-mini {
    font-size:12px; padding:4px 10px; border-radius:6px; border:1px solid var(--primary);
    background:#fff; color:var(--primary); cursor:pointer; white-space:nowrap;
}
.btn-mini:hover { background:var(--primary); color:#fff; }
.btn-mini.danger { border-color:var(--danger); color:var(--danger); }
.btn-mini.danger:hover { background:var(--danger); color:#fff; }
.btn-sm-ghost {
    background:transparent; border:1px solid #ddd; color:#666; border-radius:8px;
    font-size:13px; padding:6px 12px; cursor:pointer;
}
.btn-sm-ghost:hover { background:#f5f5f5; }
.join-group-card { display:flex; align-items:center; gap:12px; padding:12px; margin-top:12px; }
.join-group-card img { width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.join-group-card .info { flex:1; min-width:0; }
.join-group-card .name { font-size:15px; font-weight:600; }
.join-group-card .detail { font-size:12px; color:#999; margin-top:3px; }

#inviteToGroupPanel { z-index:10006; }

#chatInfoPanel .modal-card.group-layout-card { height:85vh; }
#chatInfoContent.group-layout { display:flex; overflow:hidden; padding:0; }
.group-info-panel { display:flex; flex-direction:column; flex:1; min-height:0; }
.group-info-scroll {
    flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:4px 18px 16px;
}
.group-info-footer {
    flex:0 0 auto; padding:10px 18px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border); background:#fff;
}

#groupDetailBody { display:flex; flex-direction:column; overflow:hidden; }
#groupDetailBody .group-info-panel { flex:1 1 auto; min-height:0; }

#friendDetailBody { display:flex; flex-direction:column; overflow:hidden; }
#friendDetailBody .friend-profile-panel { flex:1 1 auto; min-height:0; }
#friendDetailBody .friend-profile-actions { flex:0 0 auto; }
#friendDetailBody .friend-profile,
#friendDetailBody .friend-profile-actions { padding-left:18px; padding-right:18px; }

.group-mgmt-inline .group-mgmt-option { border-bottom:1px solid #e8e8e8; }
.group-mgmt-inline .group-mgmt-option:last-of-type { border-bottom:none; }
.group-mgmt-inline .group-mgmt-mute-group { border-bottom:1px solid #e8e8e8; padding:0 0 4px; }
.group-mgmt-inline .group-mgmt-radio:last-child { padding-bottom:12px; }
.group-info-footer .btn-danger {
    display:flex; align-items:center; justify-content:center; gap:6px;
}

.group-info-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; font-size:14px; color:#333; cursor:pointer;
}
.group-info-row i.ri-arrow-right-s-line { color:#ccc; font-size:16px; }
.group-info-row:active, .group-info-row:hover { color:var(--primary); }
.group-info-row:active i.ri-arrow-right-s-line,
.group-info-row:hover i.ri-arrow-right-s-line { color:var(--primary); }
/* 「清空群内所有消息记录」卡片：与普通行区分开，hover 时加深红 + 浅红底，提示这是危险操作 */
.group-clear-row { background: transparent; border-radius: 10px; transition: var(--transition); }
.group-clear-row:active, .group-clear-row:hover { background: var(--danger-soft); color: var(--danger) !important; }
.group-clear-row:active i, .group-clear-row:hover i { color: var(--danger) !important; }
.group-clear-row:active > i.ri-arrow-right-s-line,
.group-clear-row:hover > i.ri-arrow-right-s-line { color: var(--danger) !important; }

.qr-overlay { background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); }
.qr-overlay .modal-card {
    max-width:340px; border-radius:24px; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.4);
    background:linear-gradient(180deg, #fff 0%, #fafbff 100%);
    display:flex; flex-direction:column;
    max-height:90vh;
}
.qr-overlay .modal-header {
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, var(--primary)) 100%);
    color:#fff; padding:14px 20px; position:relative; overflow:hidden;
    flex-shrink:0;
}
.qr-overlay .modal-header::after {
    content:''; position:absolute; top:-30px; right:-30px;
    width:100px; height:100px; border-radius:50%;
    background:rgba(255,255,255,0.1);
}
.qr-overlay .modal-header h3 { color:#fff; font-size:16px; font-weight:600; position:relative; z-index:1; }
.qr-overlay .modal-header .icon-btn { color:#fff; position:relative; z-index:1; }
.qr-overlay .modal-header .icon-btn:hover { background:rgba(255,255,255,0.2); }
.qr-body {
    text-align:center; padding:10px 24px;
    flex:1; overflow-y:auto;
}
.qr-avatar {
    width:48px; height:48px; border-radius:50%; object-fit:cover;
    margin:0 auto 4px; display:block;
    box-shadow:0 4px 16px rgba(0,0,0,0.15);
    border:3px solid #fff;
}
.qr-name {
    font-size:15px; font-weight:600; color:#1a1a1a;
    margin-bottom:6px;
}
.qr-canvas-wrap {
    display:inline-block; padding:5px; background:#fff; border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    border:1px solid #f0f0f0;
}
.qr-canvas {
    width:220px; height:220px; max-width:100%; image-rendering:pixelated;
    display:block;
}
.qr-hint {
    font-size:12px; color:#666; margin:6px 0 0;
    text-align:center;
}
.qr-footer {
    padding:8px 24px 10px; flex-shrink:0;
    background:#fff; border-top:1px solid #f0f0f0;
}
.qr-download {
    width:100%; padding:12px; border:none; border-radius:12px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark, var(--primary)));
    color:#fff; font-size:15px; font-weight:500; cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
    box-shadow:0 4px 14px rgba(0,0,0,0.15);
}
.qr-download:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.2); }
.qr-download:active { transform:translateY(0); }
.qr-download:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.balance-qr-entry {
    display:flex; align-items:center; gap:10px; width:100%;
    margin:14px 0; padding:12px 14px;
    background:var(--bg-gray, #f7f7f7); border:none; border-radius:10px;
    font-size:14px; color:#333; cursor:pointer; text-align:left;
}
.balance-qr-entry .balance-qr-icon  { font-size:20px; color:var(--primary); }
.balance-qr-entry span { flex:1; }
.balance-qr-entry .balance-qr-arrow { color:#ccc; font-size:16px; }
.balance-qr-entry:active { background:#eee; }

/* PC端隐藏充值弹窗里的快捷入口按钮（PC端在钱包页面有独立入口） */
@media (min-width: 769px) {
    .wallet-shortcut-btn { display: none !important; }
}

/* 我的钱包页面：5 个方块图标卡片导航 */
.wallet-quick-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin: 14px 0;
}
.wallet-quick-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 4px 10px;
    background: #e7e5e5d6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    color: #333;
    font-size: 11px;
    line-height: 1.2;
    min-width: 0;
}
.wallet-quick-item:active { background: #eee; }
.wallet-quick-item i {
    font-size: 34px;
    color: var(--primary, #07C160);
}
.wallet-quick-item span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* 电脑端钱包是弹窗：提现/支付密码/交易记录/提现记录另有 PC 独立入口，
   这四个方块卡片只在移动端显示 */
@media (min-width: 769px) {
    .wallet-quick-nav { display: none; }
}

.scan-action-user {
    display:flex; align-items:center; gap:12px;
    padding:14px; margin-bottom:16px;
    background:var(--bg-gray, #f7f7f7); border-radius:10px;
}
.scan-action-user img { width:48px; height:48px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.scan-action-info { flex:1; min-width:0; }
.scan-action-name { font-size:16px; font-weight:500; color:#333; }
.scan-action-sub { font-size:13px; color:var(--text-muted); margin-top:3px; word-break:break-all; }

.scanner-overlay {
    position:fixed; inset:0; z-index:10010;
    display:flex; align-items:center; justify-content:center;
    background:#000; overflow:hidden;
}
.scanner-video {
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover; background:#000;
}
.scanner-mask {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    pointer-events:none;
}
.scanner-frame {
    position:relative; width:min(70vw, 260px); aspect-ratio:1/1;
}
.scanner-corner {
    position:absolute; width:28px; height:28px;
    border-color:#fff; border-style:solid; border-width:0;
}
.scanner-corner.tl { top:0; left:0; border-top-width:3px; border-left-width:3px; border-radius:6px 0 0 0; }
.scanner-corner.tr { top:0; right:0; border-top-width:3px; border-right-width:3px; border-radius:0 6px 0 0; }
.scanner-corner.bl { bottom:0; left:0; border-bottom-width:3px; border-left-width:3px; border-radius:0 0 0 6px; }
.scanner-corner.br { bottom:0; right:0; border-bottom-width:3px; border-right-width:3px; border-radius:0 0 6px 0; }
.scanner-line {
    position:absolute; left:6px; right:6px; height:2px;
    background:linear-gradient(90deg,transparent,#07C160,transparent);
    box-shadow:0 0 8px rgba(7,193,96,.8);
    animation:scannerSweep 2.2s ease-in-out infinite;
}
@keyframes scannerSweep {
    0%, 100% { top:8px; }
    50% { top:calc(100% - 10px); }
}
.scanner-hint {
    margin-top:26px; padding:0 24px; text-align:center;
    font-size:14px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.scanner-actions {
    position:absolute; left:0; right:0; bottom:0;
    display:flex; justify-content:center; gap:28px;
    padding:24px 20px; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(transparent,rgba(0,0,0,.55));
}
.scanner-btn {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:none; border:none; color:#fff; font-size:12px; cursor:pointer;
}
.scanner-btn i { font-size:26px; }
.scanner-btn:active { opacity:.6; }

.scanner-fallback {
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:32px; text-align:center; background:#111;
}
.scanner-fallback i { font-size:56px; color:#555; }
.scanner-fallback-title { font-size:17px; color:#fff; margin:0; }
.scanner-fallback-text { font-size:13px; color:#999; margin:0 0 8px; line-height:1.6; }

.scanner-result {
    position:absolute; inset:0; z-index:3;
    display:flex; align-items:center; justify-content:center;
    padding:24px; background:rgba(0,0,0,.78);
}
.scanner-result-card {
    width:100%; max-width:320px; padding:22px 20px;
    background:#fff; border-radius:14px; text-align:center;
}
.scanner-result-title { font-size:16px; font-weight:600; color:#333; }
.scanner-result-desc { font-size:13px; color:#888; margin-top:8px; }
.scanner-result-raw {
    margin-top:12px; padding:8px; max-height:80px; overflow-y:auto;
    font-size:11px; color:#999; background:#f7f7f7; border-radius:6px;
    word-break:break-all; text-align:left;
}
.scanner-result-btns { display:flex; gap:10px; margin-top:18px; }
.scanner-result-btns > button { flex:1; }

.app-confirm {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center; justify-content: center;
    z-index: 10060;
    padding: 20px;
}
.app-confirm.show { display: flex; }
.app-confirm-card {
    width: 320px; max-width: 100%;
    background: #fff; border-radius: 16px;
    padding: 28px 24px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: appConfirmPop 0.2s ease-out;
}
@keyframes appConfirmPop { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
.app-confirm-icon { font-size: 48px; color: var(--danger); margin-bottom: 10px; }
.app-confirm-title { font-size: 17px; font-weight: 600; color: #222; margin-bottom: 6px; }
.app-confirm-text { font-size: 14px; color: #888; line-height: 1.6; margin-bottom: 20px; }
.app-confirm-actions { display: flex; gap: 10px; }
.app-confirm-actions > button {
    flex: 1; height: 42px; border-radius: 10px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; border: none;
}
.app-confirm-cancel { background: #f2f3f5; color: #666; }
.app-confirm-cancel:hover { background: #e8e9eb; }
.app-confirm-ok { background: var(--primary); color: #fff; }
.app-confirm-ok:hover { background: var(--primary-dark); }

.rich-input .mention-tag,
.pc-input-rich .mention-tag {
    display: inline-block;
    background: #e8f7ef;
    color: var(--primary);
    border-radius: 4px;
    padding: 1px 4px;
    margin: 0 1px;
    font-weight: 600;
    user-select: all;
}
.mention-highlight {
    background: #e8f7ef;
    color: var(--primary);
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 600;
}
.msg-link {
    color: var(--primary);
    text-decoration: underline;
    word-break: break-all;
}
.mention-flag {
    color: #fa5151;
    font-weight: 600;
    margin-right: 2px;
}
.mention-panel {
    position: fixed;
    z-index: 10010;
    display: none;
    min-width: 220px;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.16);
    border: 1px solid #eee;
    padding: 6px 0;
}
.mention-panel-title {
    font-size: 12px;
    color: #999;
    padding: 6px 14px 4px;
}
.mention-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}
.mention-panel-item:hover { background: #f5f7f6; }
.mention-panel-item img {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mention-panel-item .friend-avatar-wrap { width:30px; height:30px; }
.msg-avatar img.mention-lp-active,
.pc-msg-avatar img.mention-lp-active {
    transform: scale(0.85);
    opacity: 0.7;
    transition: transform 0.1s, opacity 0.1s;
}

.favorites-list { flex:1; overflow-y:auto; padding:8px 12px; -webkit-overflow-scrolling:touch; }
.fav-loading { padding:40px 0; text-align:center; }

.fav-card {
    background:#f7f8fa; border-radius:10px; padding:9px 12px;
    margin-bottom:7px; cursor:pointer; transition:background .15s;
    user-select:none; -webkit-user-select:none;
}
.fav-card:last-child { margin-bottom:0; }
.fav-card:hover { background:#eef1f4; }
.fav-card-body { font-size:14px; color:#222; word-break:break-word; }
.fav-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:5px; }
.fav-type-tag { font-size:11px; color:var(--primary); background:rgba(7,193,96,0.1); padding:1px 7px; border-radius:8px; }
.fav-time { font-size:11px; color:#aaa; }

.fav-text { white-space:pre-wrap; }
.fav-emote { width:22px; height:22px; vertical-align:-5px; }

.fav-media-row { display:flex; align-items:center; gap:10px; min-height:56px; }
.fav-thumb-wrap {
    position:relative; flex-shrink:0; width:64px; height:64px; border-radius:8px; overflow:hidden;
    background:#e9ecef; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.fav-thumb-wrap:hover { opacity:.85; }
.fav-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.fav-thumb-play {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.28); color:#fff; font-size:22px; pointer-events:none;
}
.fav-thumb-file {
    position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#e3f2fd,#bbdefb); color:#1976d2; font-size:26px;
}
.fav-thumb-file .fav-thumb-file-ext {
    position:absolute; right:3px; bottom:3px; font-size:9px; font-weight:600;
    color:#fff; background:rgba(0,0,0,0.55); padding:1px 4px; border-radius:3px; letter-spacing:.3px;
}
.fav-thumb-file.pdf { background:linear-gradient(135deg,#ffebee,#ef9a9a); color:#c62828; }
.fav-thumb-file.doc, .fav-thumb-file.docx { background:linear-gradient(135deg,#e3f2fd,#64b5f6); color:#fff; }
.fav-thumb-file.xls, .fav-thumb-file.xlsx, .fav-thumb-file.csv { background:linear-gradient(135deg,#e8f5e9,#81c784); color:#fff; }
.fav-thumb-file.ppt, .fav-thumb-file.pptx { background:linear-gradient(135deg,#fff3e0,#ffb74d); color:#fff; }
.fav-thumb-file.zip, .fav-thumb-file.rar, .fav-thumb-file.7z, .fav-thumb-file.tar, .fav-thumb-file.gz { background:linear-gradient(135deg,#ede7f6,#9575cd); color:#fff; }
.fav-thumb-file.mp3, .fav-thumb-file.wav, .fav-thumb-file.aac, .fav-thumb-file.flac, .fav-thumb-file.m4a, .fav-thumb-file.ogg { background:linear-gradient(135deg,#fce4ec,#f06292); color:#fff; }

.fav-media-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.fav-media-name {
    font-size:13px; color:#333; word-break:break-all; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fav-media-meta { font-size:11px; color:#999; }

.fav-image { max-width:100%; max-height:150px; border-radius:8px; display:block; }
.fav-card-body > .fav-image { max-height:140px; width:auto; }
.fav-voice { display:inline-flex; align-items:center; gap:6px; color:#333; cursor:pointer; }
.fav-voice.playing { color:var(--primary); }
.fav-media-tag, .fav-file, .fav-rp, .fav-card-msg, .fav-loc {
    display:inline-flex; align-items:center; gap:6px; color:#444;
}
.fav-rp { color:#e67e22; }
.fav-na { color:#bbb; }
.fav-load-more {
    text-align:center; padding:10px; color:var(--primary); font-size:13px; cursor:pointer;
}
.fav-load-more:hover { background:#f5f7f6; border-radius:8px; }

.pc-fav-list { padding:8px 10px; }

.fav-hint {
    text-align:center;
    padding:18px 0 22px;
    font-size:12px;
    color:#b3b3b3;
    user-select:none;
    -webkit-user-select:none;
    background:transparent;
    flex-shrink:0;
}
.fav-hint i {
    font-size:14px;
    margin-right:4px;
    color:#cccccc;
    vertical-align:-1px;
}
.fav-hint-empty { display:none !important; }
.pc-fav-hint { display:none; }

.pc-fav-sidebar-head {
    padding:12px 16px; font-size:12px; color:#999; background:#f9f9f9;
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid #e3e3e3;
}
.pc-fav-sidebar-title { font-weight:600; color:#333; font-size:13px; }
.pc-fav-sidebar-total { font-size:11px; color:#999; }

.pc-fav-categories { padding:0; }
.pc-fav-cat-item {
    position:relative;
    display:flex; align-items:center; gap:12px;
    padding:14px 18px; margin-bottom:0;
    background:transparent; border:none; border-radius:0;
    cursor:pointer; transition:background .12s;
    -webkit-tap-highlight-color:transparent;
    user-select:none; -webkit-user-select:none;
}
.pc-fav-cat-item::before {
    content:'';
    position:absolute;
    left:20px; right:20px;
    top:0; height:1px;
    background:#e3e3e3;
    pointer-events:none;
}
.pc-fav-cat-item:hover { background:#f3f3f3; }
.pc-fav-cat-item.active { background:#eaf7ef; }
.pc-fav-cat-item.active .pc-fav-cat-label { color:var(--primary, #07C160); }
.pc-fav-cat-item.active .pc-fav-cat-arrow { color:var(--primary, #07C160); opacity:.9; }
.pc-fav-cat-item.active .pc-fav-cat-icon,
.pc-fav-cat-item.active .pc-fav-cat-icon i { color:var(--primary, #07C160); }

.pc-fav-cat-icon {
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#323131; flex-shrink:0;
    background:none; border-radius:0;
    font-weight:400;
}
.pc-fav-cat-icon i { color:#323131; font-size:18px; line-height:1; font-weight:400; }
.pc-fav-cat-icon,
.pc-fav-cat-icon.cat-all,
.pc-fav-cat-icon.cat-recent,
.pc-fav-cat-icon.cat-text,
.pc-fav-cat-icon.cat-image,
.pc-fav-cat-icon.cat-video,
.pc-fav-cat-icon.cat-file { background:none !important; }

.pc-fav-cat-label {
    flex:1; font-size:14px; color:#323131; font-weight:400;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pc-fav-cat-arrow {
    color:#999; font-size:16px; opacity:.7;
    transition:color .12s, opacity .12s, transform .12s;
}
.pc-fav-cat-item.active .pc-fav-cat-arrow { transform:translateX(2px); }

.mobile-fav-categories {
    display:flex; align-items:stretch;
    gap:2px;
    padding:8px 8px 10px;
    background:#fff;
    border-bottom:1px solid #e3e3e3;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.mobile-fav-categories::-webkit-scrollbar { display:none; }
.mobile-fav-categories:empty { display:none; }
.mobile-fav-cat-item {
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    min-width:44px; padding:4px 6px;
    background:transparent; border:none; border-radius:14px;
    color:#323131; cursor:pointer; transition:background .15s, color .15s;
    -webkit-tap-highlight-color:transparent;
    user-select:none; -webkit-user-select:none;
}
.mobile-fav-cat-item:nth-child(1),
.mobile-fav-cat-item:nth-child(2) {
    min-width:68px; padding:4px 10px;
}
.mobile-fav-cat-item:active { background:rgba(0,0,0,0.04); }
.mobile-fav-cat-label {
    font-size:13px; color:#323131; font-weight:400; line-height:1.2;
    white-space:nowrap;
    transition:color .15s;
}
.mobile-fav-cat-item.active { background:#eaf7ef; }
.mobile-fav-cat-item.active .mobile-fav-cat-label { color:var(--primary, #07C160); }

.fav-action-menu {
    position:fixed; z-index:99999; display:flex; flex-direction:column;
    background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,0.18);
    overflow:hidden; min-width:110px; padding:4px 0;
}
.fav-action-item {
    display:flex; align-items:center; gap:8px; padding:9px 16px;
    font-size:14px; color:#333; cursor:pointer; white-space:nowrap;
}
.fav-action-item:hover { background:#f5f7f6; }
.fav-action-item.danger { color:#e74c3c; }
.fav-action-item i { font-size:16px; }

.session-ctx-menu { animation: ctxMenuIn .12s ease-out; }
.session-ctx-item {
    display:flex; align-items:center; gap:8px; padding:9px 16px;
    font-size:14px; color:#333; cursor:pointer; white-space:nowrap;
    transition:background .12s;
}
.session-ctx-item:hover { background:#f5f7f6; }
.session-ctx-item.danger { color:#e74c3c; }
.session-ctx-item i { font-size:16px; }
@keyframes ctxMenuIn {
    from { opacity: 0; transform: scale(.95) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.chat-fav-modal-card { max-width:380px; }
.chat-fav-modal-list { min-height:280px; }
.chat-fav-modal-card .modal-header i { cursor:pointer; font-size:20px; color:#999; }
.chat-fav-modal-card .modal-header i:hover { color:#333; }

.chat-fav-tabs {
    position:relative;
    display:flex; align-items:stretch;
    padding:6px 6px 8px;
    border-bottom:1px solid var(--border, #ececec);
    background:#fafafa;
    flex-shrink:0;
}
.chat-fav-tab {
    flex:0 0 auto;
    min-width:0;
    text-align:center;
    padding:4px 8px;
    font-size:12px;
    color:#555;
    background:#fff;
    border:1px solid transparent;
    border-radius:14px;
    margin:0 2px;
    cursor:pointer;
    white-space:nowrap;
    transition:background .12s, color .12s, border-color .12s;
    user-select:none;
}
.chat-fav-tab:first-child { margin-left:0; }
.chat-fav-tab:hover { color:#333; background:#f0f0f0; }
.chat-fav-tab.active {
    color:var(--primary, #07C160);
    background:#eaf7ef;
    border-color:#cde9d6;
    font-weight:500;
}
.chat-fav-tab-more {
    flex:0 0 auto;
    width:26px;
    display:flex; align-items:center; justify-content:center;
    margin-left:auto;
    border-radius:14px;
    background:#fff;
    color:#666;
    cursor:pointer;
    font-size:15px;
    transition:background .12s, color .12s;
    position:relative;
    z-index:6;
}
.chat-fav-tab-more:hover { background:#f0f0f0; color:#333; }
.chat-fav-tab-more.open { background:#eaf7ef; color:var(--primary, #07C160); }
.chat-fav-more-dropdown {
    position:absolute;
    top:calc(100% - 6px);
    right:6px;
    min-width:110px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 6px 24px rgba(0,0,0,0.18);
    padding:4px 0;
    z-index:5;
    animation:fadeIn .15s ease;
}
.chat-fav-more-dropdown .chat-fav-tab {
    display:block;
    margin:0;
    border-radius:0;
    background:transparent;
    border:none;
    text-align:left;
    padding:8px 14px;
    font-size:13px;
    color:#333;
}
.chat-fav-more-dropdown .chat-fav-tab:hover { background:#f3f3f3; }
.chat-fav-more-dropdown .chat-fav-tab.active {
    color:var(--primary, #07C160);
    background:#eaf7ef;
    font-weight:500;
}

.favorite-detail-card { max-width:420px; }
.fav-detail-meta { background:#f8f8f8; border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.fav-detail-row { display:flex; font-size:13px; margin-bottom:6px; }
.fav-detail-row:last-child { margin-bottom:0; }
.fav-detail-label { color:#999; width:64px; flex-shrink:0; }
.fav-detail-value { color:#333; word-break:break-word; }
.fav-detail-content { font-size:15px; color:#222; word-break:break-word; }
.fav-detail-content .fav-image { max-height:240px; }
.fav-video { max-width:100%; max-height:240px; border-radius:8px; display:block; }

.me-logout-btn {
    display:flex; align-items:center; justify-content:center; gap:5px;
    margin:22px auto 6px; width:fit-content; padding:6px 12px;
    color:#e74c3c; font-size:14px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.me-logout-btn i { font-size:18px; }
.me-logout-btn:active { opacity:.6; }

.moment-comment-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:10030;
    display:flex; align-items:center; justify-content:center; padding:20px;
    animation:fadeIn 0.2s ease;
}
.moment-comment-card {
    background:#fff; border-radius:16px; width:100%; max-width:400px;
    overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.18);
    animation:scaleIn 0.22s cubic-bezier(0.34,1.3,0.64,1);
    display:flex; flex-direction:column;
}
.moment-comment-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:15px 18px 13px; border-bottom:1px solid #f0f0f0;
}
.moment-comment-head h4 { margin:0; font-size:16px; font-weight:600; color:#1a1a1a; }
.moment-comment-head .mc-close {
    width:30px; height:30px; border:none; background:#f5f5f5; border-radius:50%;
    color:#999; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.moment-comment-head .mc-close:hover { background:#ebebeb; color:#333; transform:rotate(90deg); }
.moment-comment-body { padding:16px 18px 6px; }
.moment-comment-body textarea {
    width:100%; min-height:96px; max-height:180px; resize:none; border:1.5px solid #e8e8e8;
    border-radius:10px; padding:12px; font-size:15px; line-height:1.5; outline:none;
    background:#f8f8f8; transition:all .2s; font-family:inherit; box-sizing:border-box;
}
.moment-comment-body textarea:focus {
    border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(7,193,96,0.1);
}
.moment-comment-count { text-align:right; font-size:12px; color:#bbb; padding:6px 2px 0; }
.moment-comment-foot {
    display:flex; gap:10px; padding:12px 18px 16px;
}
.mc-btn {
    flex:1; height:42px; border-radius:10px; font-size:15px; font-weight:500;
    cursor:pointer; transition:all .2s; border:none;
}
.mc-btn.cancel { background:#f5f5f5; color:#666; }
.mc-btn.cancel:hover { background:#ebebeb; }
.mc-btn.send {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff;
}
.mc-btn.send:hover:not(:disabled) { box-shadow:0 4px 14px rgba(7,193,96,0.3); }
.mc-btn.send:disabled { opacity:0.5; cursor:not-allowed; }
.mc-btn:active:not(:disabled) { transform:scale(0.97); }

.group-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    padding: 10px 8px 2px;
}
.group-grid-item {
    width: 60px;
    text-align: center;
    padding: 4px 0;
    position: relative;
    cursor: pointer;
}
.group-grid-item.empty {
    cursor: default;
    visibility: hidden;
}
.group-grid-item-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    border: 1px solid #eee;
}
.group-grid-item-name {
    font-size: 11px;
    color: #333;
    margin: 3px auto 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}
.group-grid-item-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 8px;
    line-height: 16px;
    color: #fff;
    font-weight: 500;
}
.group-grid-item-badge.owner { background: #FF9500; }
.group-grid-item-badge.admin { background: #576B95; }

.group-grid-item.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.group-grid-item.action-btn .group-grid-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 1px dashed #ccc;
    margin: 0 auto;
}
.group-grid-item.action-btn i {
    font-size: 18px;
    color: #999;
}
.group-grid-item-label {
    font-size: 11px;
    color: #999;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}
.group-grid-item.add-btn:hover .group-grid-item-icon {
    background: var(--primary);
    border-color: var(--primary);
}
.group-grid-item.add-btn:hover i {
    color: #fff;
}
.group-grid-item.remove-btn:hover .group-grid-item-icon {
    background: #FA5151;
    border-color: #FA5151;
}
.group-grid-item.remove-btn:hover i {
    color: #fff;
}

.group-more-link {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 8px 0 6px;
    cursor: pointer;
    margin: 0 8px 10px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.group-more-link i {
    margin-left: 2px;
}

.member-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
}
.member-profile-card {
    position: fixed;
    width: 240px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: mpPop 0.18s ease-out;
}
@keyframes mpPop {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
}
@keyframes mpPopCenter {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}
.member-profile-card-mobile {
    animation: mpPopCenter 0.18s ease-out;
}
.member-profile-card .mp-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
}
.member-profile-card .mp-name {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-profile-card .mp-username {
    margin-top: 3px;
    font-size: 12px;
    color: #999;
}
.member-profile-card .mp-signature {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
    text-align: center;
}
.member-profile-card .mp-btn {
    margin-top: 14px;
    width: 100%;
    height: 36px;
    border: none;
    border-radius: 18px;
    background: var(--primary, #07C160);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: opacity .15s;
}
.member-profile-card .mp-btn:hover { opacity: .9; }
.member-profile-card .mp-btn.disabled,
.member-profile-card .mp-btn:disabled {
    background: #e5e5e5;
    color: #999;
    cursor: default;
}

.all-members-box {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.all-members-box.open {
    max-height: 3000px;
}
.all-members-box .group-grid { padding-top: 2px; }

.member-action-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
}
.member-action-menu {
    background: #fff;
    border-radius: 12px;
    width: 240px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.member-action-menu .ma-title {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #999;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-action-menu .ma-btn {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    background: none;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}
.member-action-menu .ma-btn:hover { background: #f5f5f5; }
.member-action-menu .ma-btn + .ma-btn { border-top: 1px solid #f0f0f0; }
.member-action-menu .ma-btn.danger { color: #FA5151; }
.member-action-menu .ma-btn.ma-cancel { color: #888; }
.member-action-menu .ma-btn.blocked {
    color: #bbb;
    cursor: not-allowed;
}
.member-action-menu .ma-btn.blocked:hover { background: none; }

.group-mgmt-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
}
.group-mgmt-option:last-of-type { border-bottom: none; }
.group-mgmt-text { flex: 1; padding-right: 16px; }
.group-mgmt-title {
    font-size: 15px;
    color: #222;
    font-weight: 500;
    margin-bottom: 3px;
}
.group-mgmt-sub {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}

.group-mgmt-option-clickable { cursor: pointer; }
.group-mgmt-option-clickable:hover .group-mgmt-title { color: var(--primary); }
.group-mgmt-option-clickable:hover > i.ri-arrow-right-s-line { color: var(--primary); }
/* 群昵称卡片：仅标题 hover 时变主题色，不影响副标题 */
.group-info-row:hover .group-mgmt-title-hov { color: var(--primary) !important; }
.group-info-row:hover > i.ri-arrow-right-s-line { color: var(--primary); }

.switch.green-fix {
    width: 48px;
    height: 26px;
    background: #e5e5e5;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.switch.green-fix span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch.green-fix.on { background: #07C160; }
.switch.green-fix.on span { left: 25px; }
.switch.green-fix.loading { opacity: 0.6; pointer-events: none; }

.group-mgmt-mute-group {
    padding: 0 0 10px;
    border-bottom: 1px solid #f5f5f5;
}
.group-mgmt-mute-group .group-mgmt-radio {
    display: flex;
    align-items: center;
    padding: 11px 0;
    cursor: pointer;
    user-select: none;
}
.group-mgmt-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ddd;
    margin-right: 10px;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.group-mgmt-radio-label {
    font-size: 14px;
    color: #333;
}
.group-mgmt-radio.active .group-mgmt-radio-dot {
    border-color: var(--primary);
}
.group-mgmt-radio.active .group-mgmt-radio-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--primary);
    border-radius: 50%;
}
.group-mgmt-radio.active .group-mgmt-radio-label {
    color: var(--primary);
    font-weight: 500;
}

.mm-modal-body { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.mm-fixed { flex-shrink: 0; }
#mmMemberList { flex: 0 1 auto; height: 220px; max-height: 42vh; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mm-submit-btn, .mm-unmute-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; border-radius: 8px; }
.mm-unmute-btn {
    height: 44px;
    background: #fff; color: var(--primary);
    border: 1px solid var(--primary);
    cursor: pointer; font-size: 15px; font-weight: 600;
    transition: opacity 0.15s;
}
.mm-unmute-btn:hover { opacity: 0.85; }
.mm-submit-btn:disabled, .mm-unmute-btn:disabled,
.mm-submit-btn.is-disabled, .mm-unmute-btn.is-disabled {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.mm-unmute-btn:disabled, .mm-unmute-btn.is-disabled { color: #999; border-color: #ddd; }
.mm-dur-btn {
    border: 1px solid #e8e8e8;
    background: #fff;
    color: #333;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 16px;
    cursor: pointer;
    white-space: nowrap;
    flex: 1;
    transition: all 0.15s;
}
.mm-dur-btn:hover { border-color: var(--primary); color: var(--primary); }
.mm-dur-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.mm-dur-input {
    flex: 1 1 0; min-width: 0;
    border: 1px solid #e8e8e8;
    background: #fff;
    color: #333;
    font-size: 12px;
    padding: 6px 6px;
    border-radius: 16px;
    text-align: center;
    outline: none;
    transition: all 0.15s;
}
.mm-dur-input::placeholder { color: #bbb; }
.mm-dur-input:focus { border-color: var(--primary); }
.mm-dur-input.active { border-color: var(--primary); background: rgba(7,193,96,0.08); color: var(--primary); }
.mm-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.mm-member-row:hover { background: #fafafa; }
.mm-member-row img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mm-member-info { flex: 1; min-width: 0; }
.mm-member-name { font-size: 14px; color: #333; }
.mm-member-tag { font-size: 11px; color: #999; margin-top: 2px; }
.mm-member-tag.muted { color: #fa5151; }
.mm-member-row input[type="checkbox"] { width:18px; height:18px; cursor:pointer; flex-shrink:0; }
.mm-member-row.disabled { opacity: 0.5; cursor: not-allowed; }
.mm-member-row.disabled input[type="checkbox"] { cursor: not-allowed; }
.mm-member-row.is-blocked { opacity: 0.55; }
.mm-member-row.is-blocked:hover { background: #fafafa; }
.mm-member-row.is-blocked input[type="checkbox"] { cursor: not-allowed; }

.forward-modal-header {
    justify-content:space-between;
}
.forward-modal-header h3 {
    font-size:16px;
    font-weight:600;
    margin:0;
    text-align:left;
}
.forward-close-btn {
    color:#999;
    font-size:20px;
    padding:4px;
    border-radius:6px;
}
.forward-close-btn:hover { background:#f0f0f0; color:#555; }

#forwardPanel .modal-footer {
    padding:12px 16px;
    border-top:1px solid var(--border);
}
#forwardPanel .modal-footer .btn-primary {
    width:100%;
    height:42px;
    font-size:15px;
}

.card-picker-card { width:380px; max-height:60vh; display:flex; flex-direction:column; padding:0 0 20px; }
.card-picker-search {
    position:relative; padding:10px 16px; border-bottom:1px solid var(--border);
}
.card-picker-search i {
    position:absolute; left:26px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); font-size:16px; pointer-events:none;
}
.card-picker-search input {
    width:100%; height:34px; padding:0 10px 0 32px;
    background:var(--bg-gray,#f5f5f5); border:1px solid transparent;
    border-radius:8px; font-size:14px; outline:none;
    transition:border-color .15s ease;
}
.card-picker-search input:focus { border-color:var(--primary); background:#fff; }
.card-picker-list {
    flex:1; overflow-y:auto; padding:6px 0;
    -webkit-overflow-scrolling:touch;
}
.card-picker-item {
    display:flex; align-items:center; gap:12px; padding:10px 16px;
    cursor:pointer; transition:background .12s ease;
}
.card-picker-item:hover { background:var(--bg-gray,#f5f5f5); }
.card-picker-item:active { background:#ececec; }
.card-picker-avatar {
    width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0;
    background:#fff;
}
.card-picker-info { flex:1; min-width:0; }
.card-picker-name {
    font-size:14px; font-weight:500; color:#1a1a1a; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-picker-sign {
    font-size:12px; color:var(--text-muted); margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-picker-arrow { color:var(--text-muted); font-size:18px; }
.card-picker-loading, .card-picker-empty {
    text-align:center; padding:30px 16px; color:var(--text-muted); font-size:13px;
}

.card-preview-card { width:340px; padding:0; overflow:hidden; }
.card-preview-body {
    padding:24px 20px 20px;
    background:linear-gradient(180deg, #f3f6fb 0%, #ffffff 100%);
    min-height:220px;
}
.card-preview-inner {
    display:flex; flex-direction:column; align-items:center; text-align:center;
}
.card-preview-avatar {
    width:72px; height:72px; border-radius:10px; object-fit:cover;
    border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.08);
    margin-bottom:12px; background:#fff;
}
.card-preview-name {
    font-size:18px; font-weight:600; color:#1a1a1a; line-height:1.3;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-preview-meta {
    display:flex; gap:8px; justify-content:center; margin-top:6px;
    font-size:12px; color:var(--text-muted);
}
.card-preview-gender {
    padding:1px 8px; background:#f0f4fa; color:#5b8def; border-radius:4px;
}
.card-preview-sign {
    margin-top:14px; padding:10px 12px;
    background:#f7f8fa; border-radius:8px;
    font-size:13px; color:var(--text-secondary); line-height:1.5;
    width:100%; box-sizing:border-box; word-break:break-word;
    min-height:36px;
}
.card-preview-sign-empty { color:var(--text-muted); font-style:italic; }
.card-preview-loading {
    padding:60px 20px; text-align:center; color:var(--text-muted); font-size:13px;
}
.card-preview-actions {
    padding:12px 16px; border-top:1px solid var(--border);
    display:flex; gap:10px;
}
.card-send-btn {
    flex:1; height:42px; border:none; border-radius:10px;
    background:var(--primary); color:#fff; font-size:15px; font-weight:500;
    cursor:pointer; transition:opacity .15s ease;
}
.card-send-btn:hover { opacity:.88; }
.card-send-btn:active { opacity:.75; }
.card-send-btn:disabled { opacity:.5; cursor:not-allowed; }

.secretary-badge {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: normal; padding: 1px 7px; border-radius: 10px;
    background: #e0f4e8; color: #07C160; flex-shrink: 0;
}
.secretary-badge i { font-size: 12px; }
.secretary-tag {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: normal; padding: 1px 7px; border-radius: 10px;
    background: #e0f4e8; color: #07C160; margin-left: 8px; flex-shrink: 0;
}

/* ========== 支付密码设置（PC 端弹窗 / 移动端整页，参考设计稿） ==========
   说明：弹窗遮罩沿用 .popup-overlay 的 rgba(0,0,0,.5) 调暗背景，
   不要覆盖，否则 PC 端弹窗会变成不透明灰色，遮住底层页面（看起来像跳转页面而不是弹窗）。  
   PC 端弹窗卡片样式由通用的 .page-panel 控制（width:480px、白色背景、阴影、圆角）。*/

/* 弹窗内页背景（PC 端弹窗卡片本身仍用白色，由 .page-panel 控制；这里仅做移动端整页的浅灰底） */
@media (max-width: 768px) {
    #fundPwdPagePanel .page-panel { background: #f5f5f5; }
}

.fundpwd-body { padding: 14px 16px; }

.fundpwd-card {
    background-color: #ffffff;
    width: 100%;
    border-radius: 16px;
    padding: 22px 18px 18px;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
}

.fundpwd-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #191919;
    margin-bottom: 6px;
    line-height: 1.3;
}

.fundpwd-subtitle {
    font-size: 14px;
    color: #888888;
    margin-bottom: 22px;
    line-height: 1.5;
    font-weight: 400;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 14px;
}

.fundpwd-wrapper { margin-bottom: 18px; }
.fundpwd-wrapper:last-of-type { margin-bottom: 14px; }

.fundpwd-label {
    font-size: 15px;
    font-weight: 500;
    color: #191919;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fundpwd-label .hint-icon { font-size: 13px; color: #b2b2b2; font-weight: 400; }

/* 6 位方格输入：白底独立方格（去掉旧版灰色容器） */
.fundpwd-digits-container {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}
/* 6 位方格输入：白底独立方格（去掉旧版灰色容器）。
   适用范围包括「设置支付密码」和「找回支付密码」两个弹窗。 */
.fundpwd-digit-box {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #191919;
    padding: 0;
    outline: none;
    box-shadow: none;
    overflow: hidden;
    caret-color: var(--primary, #07c160);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fundpwd-digit-box:focus {
    border-color: var(--primary, #07c160);
    box-shadow: 0 0 0 3px rgba(7, 193, 96, .12);
}
.fundpwd-digit-box.filled::after {
    content: "●";
    font-size: 18px;
    color: #191919;
    opacity: 0.85;
}

/* 密码强度指示条（动态：弱/中/强） */
.fundpwd-strength {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding: 0 2px;
    align-items: center;
}
.fundpwd-strength-bar {
    height: 4px;
    flex: 1;
    background-color: #eaeaea;
    border-radius: 4px;
    transition: background-color .2s ease;
}
.fundpwd-strength.weak .fundpwd-strength-bar.active { background-color: #e74c3c; }
.fundpwd-strength.medium .fundpwd-strength-bar.active { background-color: #f5a623; }
.fundpwd-strength.strong .fundpwd-strength-bar.active { background-color: var(--primary, #07c160); }
.fundpwd-strength-text {
    font-size: 12px;
    color: #a0a0a0;
    margin-left: 6px;
    white-space: nowrap;
}

/* 提交按钮 */
.fundpwd-submit { margin-top: 4px; }

/* 底部辅助信息（重置模式） */
.fundpwd-footer {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: #576b95;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.5;
    cursor: pointer;
}
.fundpwd-footer-sep { opacity: 0.4; }

/* 底部导航（仅移动端显示）
   外层挂 .tab-bar 让钱包/支付密码页面复用主 tab-bar 全套样式（含 .tab / .tab-fab / has-fab 弧形 SVG 顶边）。
   这里只补 safe-area 适配和 PC 隐藏。 */
.fundpwd-tab-bar {
    padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 769px) {
    .fundpwd-tab-bar { display: none; }
}

/* PC 端：居中弹窗 480px */
@media (min-width: 769px) {
    #fundPwdPagePanel .page-panel {
        width: 480px;
        max-width: 92vw;
        height: auto;
        max-height: calc(70vh + 35px);
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        padding-bottom: 0;
    }
    #fundPwdPagePanel .fundpwd-body { padding: 20px 22px; }
    #fundPwdPagePanel .fundpwd-card {
        border-radius: 12px;
        padding: 12px 4px 4px;
        border: none;
    }
    #fundPwdPagePanel .fundpwd-title { font-size: 20px; }
    #fundPwdPagePanel .fundpwd-subtitle { margin-bottom: 26px; padding-bottom: 16px; }
    #fundPwdPagePanel .fundpwd-wrapper { margin-bottom: 20px; }
    /* PC 端：两个支付密码相关弹窗（设置 / 找回）的方格统一放大 */
    .fundpwd-digits-container { gap: 8px; }
    .fundpwd-digit-box { font-size: 24px; }
    .fundpwd-digit-box.filled::after { font-size: 20px; }
}

@media (max-width: 359px) {
    .fundpwd-digits-container { gap: 4px; }
    .fundpwd-digit-box { font-size: 18px; }
}
.secretary-tag i { font-size: 12px; }
.secretary-notice {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; font-size: 13px; color: #5e6470;
    background: #f5f7fa; border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.secretary-notice i { color: #07C160; font-size: 16px; }