* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; height: 100vh; overflow: hidden; }
        
        /* 页面切换 */
        .page { display: none; height: 100vh; }
        .page.active { display: flex; }
        
        /* 登录页 */
        #loginPage { 
            align-items: center; 
            justify-content: center; 
            background: linear-gradient(135deg, var(--wmh-gradient-start, #FFB6C1) 0%, var(--wmh-gradient-mid, #FF91A4) 50%, var(--wmh-gradient-end, #FFC0CB) 100%);
            position: relative;
            overflow: hidden;
        }
        #loginPage::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: float 20s linear infinite;
        }
        @keyframes float {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }
        .auth-box { 
            width: 400px; 
            background: #fff; 
            border-radius: 20px; 
            padding: 40px; 
            box-shadow: 0 20px 60px rgba(0,0,0,.3);
            position: relative;
            z-index: 1;
            animation: fadeIn 0.5s ease-out;
        }
        .auth-box h2 { 
            text-align: center; 
            margin-bottom: 30px; 
            color: #333;
            font-size: 28px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .auth-box h2 i {
            color: var(--wmh-primary, #FF91A4);
            font-size: 32px;
        }
        .auth-box .nav-tabs { 
            margin-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }
        .auth-box .nav-tabs .nav-link {
            border: none;
            border-bottom: 2px solid transparent;
            color: #666;
            padding: 12px 20px;
            transition: all 0.3s;
        }
        .auth-box .form-control { 
            height: 48px; 
            border-radius: 12px;
            border: 2px solid #e5e5e5;
            padding: 12px 16px;
            font-size: 15px;
            transition: all 0.3s;
        }
        .auth-box .form-control:focus {
            border-color: var(--wmh-primary, #FF91A4);
            box-shadow: 0 0 0 3px rgba(var(--wmh-primary-rgb, 255,145,164), 0.1);
        }
        .auth-box .btn-primary { 
            height: 48px; 
            border-radius: 12px; 
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(var(--wmh-primary-rgb, 255,145,164), 0.3);
        }
        .auth-box .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(var(--wmh-primary-rgb, 255,145,164), 0.4);
        }
        .auth-box .btn-primary:active {
            transform: translateY(0);
        }
        
        /* 主界面 */
        #mainPage { flex-direction: row; position: relative; }
        
        /* 新：左侧导航栏（仅图标） */
        .nav-rail {
            width: 64px;
            background: #fafafa;
            border-right: 1px solid #e5e5e5;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 0;
            gap: 12px;
            flex-shrink: 0;
        }
        .nav-rail .nav-btn {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #555;
            position: relative;
            transition: all .2s;
        }
        .nav-rail .nav-btn.active {
            background: var(--wmh-primary-soft, #FFE4E1);
            color: var(--wmh-primary, #FF91A4);
        }
        .nav-rail .nav-btn:hover { background: #f0f0f0; }
        .nav-rail .nav-btn .dot {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff4d4f;
            display: none;
        }
        .nav-rail .nav-btn .dot.show { display: block; }
        .nav-rail .rail-spacer { flex: 1; }

        /* 超管：左上角“+”快捷菜单（QQ风格） */
        .quick-plus-wrap { position: relative; display: flex; align-items: center; }
        .quick-plus-btn { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
        .quick-plus-btn i { font-size: 20px; line-height: 1; }
        .quick-plus-menu {
            position: absolute;
            top: 42px;
            right: 0;
            min-width: 180px;
            background: #fff;
            border: 1px solid rgba(0,0,0,.08);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,.12);
            padding: 8px 0;
            display: none;
            z-index: 9999;
        }
        .quick-plus-menu.show { display: block; }
        .quick-plus-menu::before {
            content: '';
            position: absolute;
            top: -8px;
            right: 12px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
            filter: drop-shadow(0 -1px 0 rgba(0,0,0,.08));
        }
        .quick-plus-item {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            user-select: none;
        }
        .quick-plus-item:hover { background: #f5f7fa; }
        .quick-plus-item i { font-size: 18px; color: #333; width: 18px; text-align: center; }
        .quick-plus-item span { font-size: 14px; color: #333; }
        
        /* 左侧边栏（列表区） */
        .sidebar { width: 320px; background: #fff; border-right: 1px solid #e5e5e5; display: flex; flex-direction: column; }
        .sidebar-header { 
            padding: 16px; 
            border-bottom: 1px solid #e5e5e5; 
            display: flex; 
            align-items: center; 
            justify-content: space-between;
            background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
        }
        .sidebar-header .user-info {
            transition: transform 0.2s;
        }
        .sidebar-header .user-info:active {
            transform: scale(0.95);
        }
        .user-info { display: flex; align-items: center; gap: 12px; cursor: pointer; }
        .user-avatar { 
            width: 40px; 
            height: 40px; 
            border-radius: 50%; 
            background: linear-gradient(135deg, var(--wmh-gradient-start, #FFB6C1) 0%, var(--wmh-gradient-mid, #FF91A4) 100%);
            color: #fff; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(var(--wmh-primary-rgb, 255,145,164), 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .user-avatar:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(var(--wmh-primary-rgb, 255,145,164), 0.4);
        }
        .user-name { font-weight: 600; }
        .user-level { font-size: 12px; color: #888; }
        
        /* 主菜单（消息/联系人）隐藏，改走左侧图标入口 */
        .main-menu { display: none !important; }
        
        /* 联系人子菜单（好友/群聊） */
        .sub-menu { display: flex; gap: 8px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; }
        .sub-menu-btn { flex: 1; padding: 8px 12px; text-align: center; border-radius: 4px; cursor: pointer; transition: all .2s; border: 1px solid transparent; }
        .sub-menu-btn.active { background: var(--wmh-primary, #FF91A4); color: #fff; border-color: var(--wmh-primary, #FF91A4); }
        .sub-menu-btn:not(.active) { background: #f5f5f5; color: #666; }
        .sub-menu-btn:not(.active):hover { background: #e8e8e8; }

        /* 联系人：好友通知/群通知入口（QQ风格简化） */
        .contacts-notify-bar { padding: 10px 16px; background: #fff; border-bottom: 1px solid #e5e5e5; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
        .contacts-notify-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; cursor: pointer; user-select: none; background: #f7f9fc; }
        .contacts-notify-item:hover { background: #eef3fb; }
        .contacts-notify-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
        .contacts-notify-title { font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .contacts-notify-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; display: none; flex-shrink: 0; }
        .contacts-notify-arrow { color: #999; }

        /* 通知列表 */
        .notify-list { flex: 1; overflow-y: auto; padding: 12px 14px; background: #f6f7fb; }
        .notify-card { background: #fff; border-radius: 12px; padding: 12px 12px; display: flex; gap: 12px; align-items: center; margin-bottom: 12px; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
        .notify-avatar { width: 44px; height: 44px; border-radius: 50%; background: #ddd; flex-shrink: 0; }
        .notify-main { flex: 1; min-width: 0; }
        .notify-main .line1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
        .notify-name { font-weight: 700; color: var(--wmh-primary, #FF91A4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .notify-date { font-size: 12px; color: #999; flex-shrink: 0; }
        .notify-text { font-size: 12px; color: #666; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .notify-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
        .notify-status { font-size: 12px; color: #999; }
        .notify-btns { display: flex; gap: 8px; }
        .notify-btn { font-size: 12px; padding: 4px 10px; border-radius: 10px; border: 1px solid #d0d7e2; background: #fff; cursor: pointer; }
        .notify-btn.primary { background: var(--wmh-primary, #FF91A4); color: #fff; border-color: var(--wmh-primary, #FF91A4); }
        .notify-btn:disabled { opacity: .6; cursor: not-allowed; }
        .notify-page-header { display:flex; align-items:center; justify-content:space-between; padding: 4px 2px 12px; }
        .notify-back { cursor:pointer; color:#1677ff; font-size:14px; user-select:none; }
        .notify-title { font-weight:700; font-size:16px; color:#333; }
        
        /* 消息列表（会话列表） */
        .message-session-list { flex: 1; overflow-y: auto; }
        .session-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background .2s; }
        .session-item:hover { background: #f5f5f5; }
        .session-item.active { background: var(--wmh-primary-soft, #FFE4E1); }
        /* 置顶会话：轻微底色区分（像 QQ） */
        .session-item.pinned { background: #f7f7f7; }
        .session-item.pinned:hover { background: #f0f0f0; }
        .session-avatar { 
            width: 48px; 
            height: 48px; 
            border-radius: 12px; 
            background: linear-gradient(135deg, var(--wmh-gradient-start, #FFB6C1) 0%, var(--wmh-gradient-mid, #FF91A4) 100%);
            color: #fff; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 20px; 
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(var(--wmh-primary-rgb, 255,145,164), 0.2);
            transition: transform 0.2s;
        }
        .session-item:hover .session-avatar {
            transform: scale(1.05);
        }
        .session-info { flex: 1; min-width: 0; }
        .session-name { font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .session-preview { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .session-badge { background: #ff4d4f; color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 11px; min-width: 18px; text-align: center; }
        
        /* 群组列表 */
        .group-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; }
        .group-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background .2s; margin: 0; position: relative; }
        .group-item:hover { background: #f5f5f5; }
        .group-item.active { background: var(--wmh-primary-soft, #FFE4E1); }
        .group-avatar { 
            width: 48px; 
            height: 48px; 
            border-radius: 12px; 
            background: linear-gradient(135deg, var(--wmh-gradient-start, #FFB6C1) 0%, var(--wmh-gradient-mid, #FF91A4) 100%);
            color: #fff; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 20px;
            box-shadow: 0 2px 8px rgba(var(--wmh-primary-rgb, 255,145,164), 0.2);
            transition: transform 0.2s;
        }
        .group-item:hover .group-avatar {
            transform: scale(1.05);
        }
        .group-info { flex: 1; min-width: 0; }
        .group-name { font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .group-desc { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .group-badge { position: absolute; top: 8px; right: 16px; background: #ff4d4f; color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 11px; min-width: 18px; text-align: center; }
        
        /* 好友列表 */
        .friend-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; }
        .friend-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background .2s; position: relative; margin: 0; }
        .friend-item:hover { background: #f5f5f5; }
        .friend-item.active { background: var(--wmh-primary-soft, #FFE4E1); }
        .friend-avatar { 
            width: 48px; 
            height: 48px; 
            border-radius: 50%; 
            background: linear-gradient(135deg, var(--wmh-gradient-start, #FFB6C1) 0%, var(--wmh-gradient-mid, #FF91A4) 100%);
            color: #fff; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 18px; 
            font-weight: bold;
            box-shadow: 0 2px 8px rgba(var(--wmh-primary-rgb, 255,145,164), 0.2);
            transition: transform 0.2s;
        }
        .friend-item:hover .friend-avatar {
            transform: scale(1.05);
        }
        .user-avatar img,
        .friend-avatar img,
        .session-avatar img,
        .msg-avatar img,
        .group-avatar img,
        .profile-avatar img,
        .account-avatar img,
        .user-avatar-large img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            display: block;
        }
        .friend-info { flex: 1; min-width: 0; }
        .friend-name { font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .friend-status { font-size: 12px; color: #888; }
        .friend-status.online { color: #52c41a; }
        .friend-badge { position: absolute; top: 8px; right: 16px; background: #ff4d4f; color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 11px; min-width: 18px; text-align: center; }
        
        /* 聊天区域 */
        .chat-area { flex: 1; display: flex; flex-direction: column; background: #f0f2f5; height: 100vh; overflow: hidden; position: relative; }
        #chatContent,
        #privateChatContent { 
            display: none !important; 
            flex-direction: column !important; 
            height: 100% !important; 
        }
        #chatContent.show,
        #privateChatContent.show { 
            display: flex !important; 
        }
        .chat-header { padding: 16px 20px; background: #fff; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: space-between; }
        .chat-title { font-size: 18px; font-weight: 600; }
        .chat-actions button { margin-left: 8px; }
        
        /* 消息列表 */
        .message-list { flex: 1; overflow-y: auto; padding: 20px; min-height: 0; max-height: 100%; }
        .message-item { 
            display: flex !important; 
            margin-bottom: 8px !important; 
            margin-top: 0 !important;
        }
        .message-item:last-child { margin-bottom: 0 !important; }
        #privateMessageList .message-item,
        #messageList .message-item,
        .message-list .message-item { 
            margin-bottom: 8px !important; 
            margin-top: 0 !important;
            padding: 0 !important;
        }
        .message-item.self { flex-direction: row-reverse; }
        .msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--wmh-primary, #FF91A4); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
        .msg-content { max-width: 60%; margin: 0 12px; }
        .msg-header { font-size: 12px; color: #888; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
        /* 头衔+等级合并徽章（按角色/是否有专属头衔变色） */
        .rank-badge { padding: 0 6px; border-radius: 4px; font-size: 10px; display: inline-flex; align-items: center; height: 16px; line-height: 16px; font-weight: 600; }
        .rank-badge.member { background: #bdbdbd; color: #fff; }
        .rank-badge.member.titled { background: #9c27b0; color: #fff; }
        .rank-badge.admin { background: #07c160; color: #fff; }
        .rank-badge.super_admin { background: #f1c40f; color: #333; }
        .msg-bubble { 
            background: #fff; 
            padding: 12px 16px; 
            border-radius: 16px; 
            box-shadow: 0 2px 8px rgba(0,0,0,.08); 
            word-break: break-word;
            position: relative;
            transition: all 0.2s;
        }
        .msg-bubble::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border: 6px solid transparent;
        }
        .message-item.self .msg-bubble { 
            background: linear-gradient(135deg, var(--wmh-gradient-mid, #FF91A4) 0%, var(--wmh-gradient-end, #FFC0CB) 100%);
            color: #fff;
            border-top-right-radius: 4px;
        }
        .message-item.self .msg-bubble::before {
            right: -12px;
            top: 12px;
            border-left-color: var(--wmh-gradient-end, #FFC0CB);
        }
        .message-item:not(.self) .msg-bubble {
            border-top-left-radius: 4px;
        }
        .message-item:not(.self) .msg-bubble::before {
            left: -12px;
            top: 12px;
            border-right-color: #fff;
        }
        .message-item.self .msg-header { flex-direction: row-reverse; }
        .msg-time { font-size: 11px; color: #999; margin-top: 4px; }
        .message-item.self .msg-time { text-align: right; }
        .msg-bubble img { max-width: 200px; border-radius: 8px; cursor: pointer; }
        .msg-bubble video { max-width: 300px; border-radius: 8px; }

        /* 图片/视频消息：不要显示气泡边缘（去背景/去padding/去阴影），媒体自身圆角裁切 */
        .message-item[data-msg-type="image"] .msg-bubble,
        .message-item[data-msg-type="video"] .msg-bubble,
        .message-item[data-msg-type="image_OLD"] .msg-bubble {
            background: transparent !important;
            padding: 0 !important;
            box-shadow: none !important;
            border-radius: 12px;
            overflow: hidden;
        }
        .message-item[data-msg-type="image"] .msg-bubble img,
        .message-item[data-msg-type="image_OLD"] .msg-bubble img {
            display: block;
            max-width: 300px !important;
            border-radius: 12px !important;
        }
        .message-item[data-msg-type="video"] .msg-bubble video {
            display: block;
            max-width: 400px !important;
            border-radius: 12px !important;
        }
        .msg-system { text-align: center; color: #888; font-size: 12px; padding: 8px; }
        .msg-mention { color: var(--wmh-primary, #FF91A4); font-weight: 500; }
        
        /* 合并转发卡片样式 */
        .forward-record-card {
            background: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 12px;
            margin: 8px 0;
            cursor: pointer;
            transition: background 0.2s;
            max-width: 400px;
        }
        .forward-record-card:hover {
            background: #e8e8e8;
        }
        .forward-record-header {
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
            font-size: 14px;
        }
        .forward-record-preview {
            color: #666;
            font-size: 13px;
            margin-bottom: 4px;
            line-height: 1.5;
        }

        /* 左侧菜单弹窗 */
        .nav-popup {
            position: absolute;
            left: 72px;
            bottom: 20px;
            width: 240px;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,.12);
            display: none;
            z-index: 20;
            overflow: hidden;
        }
        .nav-popup.show { display: block; }
        .nav-popup .item {
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background .15s;
        }
        .nav-popup .item:hover { background: #f5f5f5; }
        .nav-popup .item .label { flex: 1; }
        .nav-popup .item .badge {
            background: #ff4d4f;
            color: #fff;
            border-radius: 10px;
            padding: 2px 8px;
            font-size: 11px;
        }
        .nav-popup .section-title {
            padding: 8px 14px;
            font-size: 12px;
            color: #999;
            background: #fafafa;
            border-top: 1px solid #f2f2f2;
        }
        /* 账号切换 */
        .account-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #f5f5f5; cursor:pointer; }
        .account-item:hover { background:#f8f8f8; }
        .account-avatar { width:42px; height:42px; border-radius:12px; background:var(--wmh-primary, #FF91A4); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; }
        .account-main { flex:1; min-width:0; }
        .account-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .account-email { font-size:12px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .account-actions { display:flex; gap:8px; }

        /* 安全管理 */
        .security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
        .security-card {
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: border-color .15s, box-shadow .15s;
        }
        .security-card:hover { border-color: var(--wmh-primary, #FF91A4); box-shadow: 0 6px 18px rgba(var(--wmh-primary-rgb, 255,145,164), .2); }
        .security-card .icon {
            width: 36px; height: 36px; border-radius: 10px;
            background: var(--wmh-primary-soft, #FFE4E1); color: var(--wmh-primary, #FF91A4);
            display: flex; align-items: center; justify-content: center; font-size: 18px;
        }
        .security-card .title { font-weight: 600; }
        .security-card .desc { font-size: 12px; color: #888; }
        /* 注册头像 */
        .avatar-upload { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
        .avatar-preview {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            overflow: hidden;
            background: #f7f7f7;
            border: 1px dashed #d8d8d8;
            color: #9aa0a6;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            user-select: none;
            position: relative;
        }
        .avatar-preview .avatar-preview-label {
            padding: 0 6px;
            font-size: 12px;
            line-height: 1.2;
        }
        .avatar-preview.has-image {
            border-style: solid;
            border-color: rgba(0,0,0,.06);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .avatar-preview.has-image .avatar-preview-label {
            opacity: 0;
        }
        .forward-record-footer {
            color: #999;
            font-size: 12px;
            text-align: center;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #ddd;
        }
        .forward-record-detail {
            display: none;
            max-height: 400px;
            overflow-y: auto;
            margin-top: 8px;
            padding: 8px;
            background: #fff;
            border-radius: 4px;
        }
        .forward-record-detail.show {
            display: block;
        }
        .forward-record-detail-item {
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }
        .forward-record-detail-item:last-child {
            border-bottom: none;
        }
        .forward-record-detail-sender {
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 4px;
            font-size: 13px;
        }
        .forward-record-detail-content {
            color: #333;
            font-size: 13px;
        }
        
        /* 多选模式样式 */
        .message-item.multi-select-mode { cursor: pointer; position: relative; padding-left: 30px; }
        .message-item.multi-select-mode::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-radius: 4px;
            background: #fff;
        }
        .message-item.multi-select-mode.selected::before {
            background: #1890ff;
            border-color: #1890ff;
            content: '✓';
            color: #fff;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
        }
        
        /* 输入区域 */
        .input-area { background: #fff; border-top: 1px solid #e5e5e5; padding: 12px 20px; position: relative; flex-shrink: 0; }
        .input-toolbar { display: flex; gap: 16px; margin-bottom: 12px; }
        .input-toolbar button { background: none; border: none; font-size: 20px; color: #666; cursor: pointer; padding: 4px; }
        .input-toolbar button:hover { color: var(--wmh-primary, #FF91A4); }
        .input-row { display: flex; gap: 12px; }
        .input-row textarea { flex: 1; border: 1px solid var(--wmh-primary-border, #FFC0CB); border-radius: 8px; padding: 12px; resize: none; height: 48px; font-size: 14px; }
        .input-row textarea:focus { outline: none; border-color: var(--wmh-primary, #FF91A4); }
        .input-row .btn-send { width: 80px; }
        
        /* 表情面板 */
        .emoji-panel { display: none; position: absolute; bottom: 80px; left: 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.15); padding: 12px; width: 360px; z-index: 100; }
        .emoji-panel.show { display: block; }
        .emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-height: 200px; overflow-y: auto; }
        .emoji-grid span { font-size: 22px; cursor: pointer; text-align: center; padding: 4px; border-radius: 4px; }
        .emoji-grid span:hover { background: #f0f0f0; }
        
        /* 表情Tab */
        .emoji-panel { padding: 8px; }
        .emoji-tabs { display: flex; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #eee; margin-bottom: 8px; }
        .emoji-tab { background: #f5f5f5; border: 1px solid #eee; color: #666; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
        .emoji-tab.active { background: var(--wmh-primary-soft, #FFE4E1); border-color: var(--wmh-primary, #FF91A4); color: var(--wmh-primary, #FF91A4); }
        .emoji-tab i { font-size: 16px; }
        .emoji-page { width: 100%; }
        
        /* 收藏表情 */
        .fav-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 8px; }
        .fav-title { font-size: 13px; font-weight: 600; color: #333; }
        .fav-manage-btn { background: none; border: none; color: var(--wmh-primary, #FF91A4); cursor: pointer; font-size: 13px; }
        .fav-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 220px; overflow-y: auto; padding: 2px; }
        .fav-item { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f5f5f5; border-radius: 10px; overflow: hidden; cursor: pointer; border: 1px solid #eee; }
        .fav-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .fav-add { display: flex; align-items: center; justify-content: center; color: #999; font-size: 28px; background: #fafafa; }
        .fav-item.selectable::after { content: ''; position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.9); border: 2px solid #ddd; }
        .fav-item.selected::after { background: var(--wmh-primary, #FF91A4); border-color: var(--wmh-primary, #FF91A4); }
        .fav-item.selected::before { content: '✓'; position: absolute; right: 9px; top: 4px; color: #fff; font-size: 12px; font-weight: 700; }
        .fav-toolbar { margin-top: 8px; display: flex; justify-content: flex-end; }
        .fav-delete-btn { background: #ff4d4f; border: none; color: #fff; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
        .fav-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        
        /* @提及面板 */
        .mention-panel { display: none; position: absolute; bottom: 80px; left: 20px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.15); max-height: 200px; overflow-y: auto; min-width: 200px; z-index: 100; }
        .mention-panel.show { display: block; }
        .mention-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
        .mention-item:hover { background: #f5f5f5; }
        
        /* 签到弹窗 */
        .checkin-result { text-align: center; padding: 20px; }
        .checkin-result .icon { font-size: 60px; color: #52c41a; }
        .checkin-result .days { font-size: 32px; font-weight: bold; color: var(--wmh-primary, #FF91A4); margin: 16px 0; }
        .checkin-result .exp { color: #ff9800; }
        
        /* 欢迎页 */
        .welcome-page { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #888; }
        .welcome-page i { font-size: 80px; margin-bottom: 20px; opacity: .3; }
        .welcome-page p { font-size: 18px; }
        
        /* 聊天内容区（修复） */
        #chatContent { display: none; flex-direction: column; flex: 1; height: 100%; overflow: hidden; }
        #chatContent.show { display: flex; height: 100%; }
        
        /* 成员列表 */
        .member-panel { width: 280px; background: #fff; border-left: 1px solid #e5e5e5; display: none; flex-direction: column; }
        .member-panel.show { display: flex; }
        .member-header { padding: 16px; border-bottom: 1px solid #e5e5e5; font-weight: 600; }
        .member-list { flex: 1; overflow-y: auto; }
        .member-item { padding: 10px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .member-item:hover { background: #f9f9f9; }
        .member-role { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
        .role-super_admin { background: #9b59b6; color: #fff; }
        .role-admin { background: #e74c3c; color: #fff; }
        .role-member { background: #95a5a6; color: #fff; }
        .member-title { font-size: 10px; color: #ff9800; }
        
        /* 个人资料弹窗 */
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--wmh-gradient-start, #FFB6C1);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin: 0 auto 16px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            user-select: none;
        }
        .profile-avatar.has-image { color: transparent; }
        .profile-avatar .profile-avatar-edit {
            position: absolute;
            right: 2px;
            bottom: 2px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(0, 0, 0, .45);
            border: 2px solid rgba(255, 255, 255, .95);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
            pointer-events: none;
        }
        .profile-avatar.loading { opacity: .7; }
        .profile-avatar.loading::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, .25);
        }

        /* 用户资料卡（QQ风格简化版） */
        .user-card-modal .modal-content { border-radius: 16px; overflow: hidden; }
        .user-card-top {
            padding: 18px 18px 14px;
            background: linear-gradient(135deg, #f0f5ff 0%, #e6f7ff 60%, #ffffff 100%);
            position: relative;
        }
        .user-card-close {
            position: absolute;
            right: 10px;
            top: 10px;
            opacity: .7;
        }
        .user-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .user-card-avatar {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: var(--wmh-gradient-start, #FFB6C1);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            flex-shrink: 0;
            overflow: hidden;
        }
        .user-card-meta { min-width: 0; }
        .user-card-name { font-weight: 700; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .user-card-sub { margin-top: 4px; font-size: 12px; color: #666; }
        .user-card-body { padding: 14px 18px 10px; }
        .user-card-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
        .user-card-row:last-child { border-bottom: none; }
        .user-card-label { width: 52px; color: #888; flex-shrink: 0; }
        .user-card-value { color: #333; flex: 1; min-width: 0; }
        .user-card-actions { display: flex; gap: 12px; padding: 12px 18px 16px; }
        .user-card-actions .btn { flex: 1; border-radius: 10px; }
        
        /* 群设置 */
        .group-settings .setting-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
        /* 右键菜单 */
        .context-menu { position: fixed; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.2); z-index: 1000; min-width: 120px; display: none; }
        .context-menu.show { display: block; }
        .context-menu-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
        .context-menu-item:hover { background: #f5f5f5; }
        .context-menu-item.danger { color: #e74c3c; }
        .context-menu-divider { height: 1px; background: #eee; margin: 4px 0; }
        /* 公告弹窗 */
        .announcement-banner { background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px 16px; margin-bottom: 0; cursor: pointer; }
        .announcement-banner:hover { background: #fff8e1; }
        /* 右键菜单 */
        .announcement-banner:hover { background: #fff8e1; }
        /* 设置菜单 */
        .menu-btn { background: none; border: none; font-size: 24px; cursor: pointer; padding: 8px; color: #666; }
        .menu-btn:hover { color: #333; }
        /* 移动端聊天页“返回列表”按钮：仅手机显示 */
        .mobile-back-btn { display: none; }
        .settings-panel { position: fixed; top: 0; right: -320px; width: 320px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,.1); z-index: 1000; transition: right 0.3s; display: flex; flex-direction: column; }
        .settings-panel.show { right: 0; }
        .settings-header { padding: 16px 20px; background: var(--wmh-primary, #FF91A4); color: #fff; display: flex; align-items: center; justify-content: space-between; }
        .settings-header h3 { margin: 0; font-size: 18px; }
        .settings-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
        .settings-body { flex: 1; overflow-y: auto; }
        .settings-section { border-bottom: 8px solid #f5f5f5; }
        .settings-section-title { padding: 12px 20px; font-size: 14px; color: #888; background: #f9f9f9; }
        .settings-item { padding: 14px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid #eee; }
        .settings-item:hover { background: #f5f5f5; }
        .settings-item i { font-size: 20px; color: var(--wmh-primary, #FF91A4); width: 24px; }
        .settings-members { max-height: 300px; overflow-y: auto; }
        .settings-member { padding: 10px 20px; display: flex; align-items: center; gap: 10px; }
        .settings-member img { width: 40px; height: 40px; border-radius: 50%; }
        .settings-member-info { flex: 1; }
        .settings-member-name { font-weight: 500; }
        .settings-member-role { font-size: 12px; color: #888; }
        .settings-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 999; display: none; }
        .settings-overlay.show { display: block; }
        .nickname-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-top: 10px; }
        /* 群公告弹窗 */
        .announcement-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; justify-content: center; align-items: center; }
        .announcement-modal.show { display: flex; }
        .announcement-container { background: #f5f5f5; width: 100%; max-width: 500px; height: 80%; max-height: 600px; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
        .announcement-header { background: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; }
        .announcement-header h3 { margin: 0; font-size: 18px; flex: 1; text-align: center; }
        .announcement-header .back-btn { cursor: pointer; font-size: 16px; color: #333; }
        .announcement-header .edit-btn { cursor: pointer; font-size: 20px; color: var(--wmh-primary, #FF91A4); }
        .announcement-body { flex: 1; overflow-y: auto; padding: 20px; }
        .announcement-empty { text-align: center; padding: 60px 20px; }
        .announcement-empty-icon { font-size: 80px; color: #ddd; margin-bottom: 20px; }
        .announcement-empty h4 { color: #999; margin-bottom: 10px; }
        .announcement-empty p { color: #bbb; font-size: 14px; margin-bottom: 30px; }
        .announcement-empty .create-btn { background: var(--wmh-primary, #FF91A4); color: #fff; border: none; padding: 14px 60px; border-radius: 8px; font-size: 16px; cursor: pointer; }
        .announcement-content { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
        .announcement-content .time { color: #999; font-size: 12px; margin-bottom: 8px; }
        .announcement-content .text { color: #333; line-height: 1.6; white-space: pre-wrap; }
        /* 编辑弹窗 */
        .announcement-edit { background: #fff; padding: 20px; }
        .announcement-edit textarea { width: 100%; height: 200px; border: 1px solid #eee; border-radius: 8px; padding: 12px; font-size: 14px; resize: none; }
        .announcement-edit textarea:focus { outline: none; border-color: var(--wmh-primary, #FF91A4); }
        .announcement-edit .char-count { text-align: right; color: #999; font-size: 12px; margin-top: 8px; }
        /* 管理群弹窗 */
        .manage-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; justify-content: center; align-items: center; }
        .manage-modal.show { display: flex; }
        .manage-container { background: #f5f5f5; width: 100%; max-width: 500px; height: 85%; max-height: 700px; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
        .manage-header { background: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; }
        .manage-header h3 { margin: 0; font-size: 18px; flex: 1; text-align: center; }
        .manage-header .back-btn { cursor: pointer; font-size: 16px; color: #333; }
        .manage-body { flex: 1; overflow-y: auto; padding: 16px; }
        .manage-section { margin-bottom: 16px; }
        .manage-section-title { font-size: 13px; color: #999; padding: 8px 0; }
        .manage-card { background: #fff; border-radius: 12px; overflow: hidden; }
        .manage-item { padding: 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .manage-item:last-child { border-bottom: none; }
        .manage-item:hover { background: #fafafa; }
        .manage-item-left { display: flex; align-items: center; gap: 12px; }
        .manage-item-right { color: #999; display: flex; align-items: center; gap: 4px; }
        .manage-item-right i { font-size: 14px; }
        /* 管理群：成员列表（头像 + 名字） */
        .manage-member-avatar { flex-shrink: 0; }
        .manage-member-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .manage-member-name { font-size: 14px; color: #333; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .manage-member-sub { font-size: 12px; color: #999; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .manage-input { width: 100%; padding: 12px; border: 1px solid #eee; border-radius: 8px; font-size: 14px; }
        .manage-input:focus { outline: none; border-color: var(--wmh-primary, #FF91A4); }
        .manage-avatar { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; cursor: pointer; }
        .manage-btn { background: var(--wmh-primary, #FF91A4); color: #fff; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; }
        .manage-btn-danger { background: #e74c3c; }

        /* 举报弹窗（QQ风格） */
        .report-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2500; display: none; justify-content: center; align-items: center; }
        .report-overlay.show { display: flex; }
        .report-container { background: #f5f5f5; width: 100%; max-width: 720px; height: 85%; max-height: 760px; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
        .report-header { background: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; }
        .report-header h3 { margin: 0; font-size: 18px; flex: 1; text-align: center; }
        .report-header .back-btn { cursor: pointer; font-size: 16px; color: #333; }
        .report-body { flex: 1; overflow-y: auto; padding: 20px; }
        .report-section { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .report-label { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .report-label .required { color: #ff4d4f; }
        .report-reasons { display: flex; flex-wrap: wrap; gap: 10px; }
        .report-reason-btn { background: #fff; border: 1px solid #e5e5e5; color: #333; border-radius: 8px; padding: 10px 14px; cursor: pointer; font-size: 13px; }
        .report-reason-btn.active { border-color: var(--wmh-primary, #FF91A4); color: var(--wmh-primary, #FF91A4); background: var(--wmh-primary-soft, #FFE4E1); }
        .report-field { margin-top: 12px; }
        .report-field label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
        .report-desc textarea { width: 100%; min-height: 120px; resize: none; }
        .report-count { text-align: right; color: #999; font-size: 12px; margin-top: 6px; }
        .report-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
        .report-image-item { width: 78px; height: 78px; border-radius: 10px; background: #f5f5f5; border: 1px solid #eee; position: relative; overflow: hidden; }
        .report-image-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .report-image-remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #ff4d4f; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; border: 2px solid #fff; }
        .report-image-add { display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
        .report-image-add i { font-size: 28px; color: #999; }
        .report-submit { width: 100%; height: 44px; border-radius: 10px; }

        /* 查找聊天记录（QQ风格） */
        .chatsearch-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2600; display: none; justify-content: center; align-items: center; }
        .chatsearch-modal.show { display: flex; }
        .chatsearch-container { background: #f5f5f5; width: 100%; max-width: 720px; height: 85%; max-height: 760px; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
        .chatsearch-header { background: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; }
        .chatsearch-header h3 { margin: 0; font-size: 18px; flex: 1; text-align: center; }
        .chatsearch-header .back-btn { cursor: pointer; font-size: 16px; color: #333; }
        .chatsearch-header .media-btn { cursor: pointer; font-size: 14px; color: #999; white-space: nowrap; }
        .chatsearch-body { flex: 1; overflow-y: auto; padding: 16px; }
        .chatsearch-searchbar { background: #fff; border-radius: 999px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid #eee; }
        .chatsearch-searchbar input { border: none; outline: none; flex: 1; font-size: 14px; background: transparent; }
        .chatsearch-searchbar .clear { color: #bbb; cursor: pointer; display: none; }
        .chatsearch-filters { display: none; gap: 8px; padding: 12px 4px 6px; overflow-x: auto; }
        .chatsearch-filter { background: #fff; border: 1px solid #eee; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
        .chatsearch-filter.active { background: var(--wmh-primary-soft, #FFE4E1); border-color: var(--wmh-primary, #FF91A4); color: var(--wmh-primary, #FF91A4); }
        .chatsearch-hint { color: #999; text-align: center; padding: 18px 0; font-size: 13px; }
        .chatsearch-item { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
        .chatsearch-item:hover { background: #fafafa; }
        .chatsearch-item .meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #999; font-size: 12px; margin-bottom: 6px; }
        .chatsearch-item .content { color: #333; font-size: 14px; line-height: 1.5; word-break: break-word; }
        .chatsearch-item mark { background: #fff3cd; padding: 0 2px; border-radius: 2px; }
        .chatsearch-thumb { margin-top: 8px; border-radius: 10px; overflow: hidden; border: 1px solid #eee; max-width: 320px; }
        .chatsearch-thumb img, .chatsearch-thumb video { width: 100%; display: block; }
        .chatsearch-loadmore { width: 100%; height: 40px; border-radius: 10px; }
        .chatsearch-target { outline: 2px solid var(--wmh-primary, #FF91A4); border-radius: 12px; box-shadow: 0 0 0 4px rgba(var(--wmh-primary-rgb, 255,145,164), 0.15); }
        /* 禁言提示样式 */
        .mute-notice { display: none; background: #f5f5f5; padding: 16px 20px; text-align: center; color: #999; border-top: 1px solid #e5e5e5; }
        .mute-notice.show { display: block; }
        .mute-notice .mute-icon { font-size: 20px; margin-right: 8px; }
        .mute-notice-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 20px 40px; border-radius: 8px; z-index: 9999; display: none; text-align: center; }
        .mute-notice-toast.show { display: block; }
        .mute-notice-toast .admin-name { color: var(--wmh-primary, #FF91A4); font-weight: bold; }
        
        /* 置顶公告样式 - 紧凑型 + 可折叠 */
        .pinned-announcement {
            background: var(--wmh-primary-soft, #FFE4E1);
            border-bottom: 1px solid var(--wmh-primary-border, #FFC0CB);
            padding: 8px 12px;  /* 紧凑型：缩小内边距 */
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        .pinned-announcement-content {
            display: flex;
            align-items: center;
            gap: 8px;  /* 紧凑型：缩小间距 */
            width: 100%;
            cursor: pointer;  /* 可点击展开 */
        }
        .pinned-announcement-text {
            flex: 1;
            min-width: 0;
        }
        .pinned-title {
            font-weight: 500;  /* 紧凑型：降低字重 */
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;  /* 紧凑型：缩小字体 */
        }
        .pinned-full-content {
            margin-top: 8px;
            font-size: 13px;
            color: #666;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .pinned-full-content img {
            max-width: 100%;
            border-radius: 6px;
            margin-top: 8px;
            max-height: 120px;
            object-fit: cover;
        }
        .pinned-toggle-icon {
            color: #999;
            font-size: 14px;
            flex-shrink: 0;
            transition: transform 0.2s;
            cursor: pointer;
        }
        .btn-view-pinned {
            background: var(--wmh-primary, #FF91A4);
            color: #fff;
            border: none;
            padding: 4px 10px;  /* 紧凑型：缩小按钮 */
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;  /* 紧凑型：缩小字体 */
            flex-shrink: 0;
            margin-left: 8px;
        }
        .btn-view-pinned:hover {
            background: var(--wmh-primary-hover, #FF7A8F);
        }
        
        /* 更新通知动画 */
        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }
        
        /* 公告列表样式增强 */
        .announcement-content {
            position: relative;
        }
        .pinned-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: var(--wmh-primary, #FF91A4);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            z-index: 1;
        }
        .announcement-image {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 12px;
            max-height: 300px;
            object-fit: cover;
        }
        .announcement-confirm {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .btn-confirm {
            background: var(--wmh-primary, #FF91A4);
            color: #fff;
            border: none;
            padding: 6px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
        }
        .btn-confirm:hover {
            background: var(--wmh-primary-hover, #FF7A8F);
        }
        .confirm-stats {
            font-size: 12px;
            color: #999;
        }
        .announcement-actions {
            display: flex;
            gap: 8px;
        }
        .btn-edit, .btn-delete {
            background: none;
            border: 1px solid;
            padding: 4px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
        }
        .btn-edit {
            border-color: var(--wmh-primary-border, #FFC0CB);
            color: var(--wmh-primary, #FF91A4);
        }
        .btn-edit:hover {
            background: var(--wmh-primary-soft, #FFE4E1);
        }
        .btn-delete {
            border-color: #ff4d4f;
            color: #ff4d4f;
        }
        .btn-delete:hover {
            background: #fff1f0;
        }
        
        /* Bootstrap 按钮颜色覆盖 - 浅粉色主题 */
        .btn-primary {
            background-color: var(--wmh-primary, #FF91A4) !important;
            border-color: var(--wmh-primary, #FF91A4) !important;
            color: #fff !important;
        }
        .btn-primary:hover {
            background-color: var(--wmh-primary-hover, #FF7A8F) !important;
            border-color: var(--wmh-primary-hover, #FF7A8F) !important;
        }
        .btn-outline-primary {
            color: var(--wmh-primary, #FF91A4) !important;
            border-color: var(--wmh-primary, #FF91A4) !important;
        }
        .btn-outline-primary:hover {
            background-color: var(--wmh-primary, #FF91A4) !important;
            border-color: var(--wmh-primary, #FF91A4) !important;
            color: #fff !important;
        }
        .nav-tabs .nav-link.active {
            color: var(--wmh-primary, #FF91A4) !important;
            border-color: var(--wmh-primary, #FF91A4) var(--wmh-primary, #FF91A4) #fff !important;
        }
        .nav-tabs .nav-link:hover {
            border-color: var(--wmh-primary-soft, #FFE4E1) var(--wmh-primary-soft, #FFE4E1) var(--wmh-primary, #FF91A4) !important;
            color: var(--wmh-primary, #FF91A4) !important;
        }
        
        /* ==================== 响应式设计（移动端适配） ==================== */
        
        /* 平板设备（768px - 1024px） */
        @media screen and (max-width: 1024px) {
            .sidebar {
                width: 280px;
            }
            .auth-box {
                width: 90%;
                max-width: 400px;
            }
        }
        
        /* 手机设备（小于 768px） */
        @media screen and (max-width: 768px) {
            /* 登录页适配 */
            #loginPage {
                padding: 20px;
            }
            .auth-box {
                width: 100%;
                max-width: 100%;
                padding: 30px 20px;
                border-radius: 12px;
            }
            
            /* 主界面：改为垂直布局 */
            #mainPage {
                flex-direction: column;
            }
            
            /* 隐藏左侧导航栏，改为底部导航栏 */
            .nav-rail {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                /* 抬高底部Tab，避免被浏览器/系统底栏遮住 */
                height: calc(60px + env(safe-area-inset-bottom) + 12px);
                flex-direction: row;
                justify-content: space-around;
                box-sizing: border-box;
                padding: 0 0 calc(env(safe-area-inset-bottom) + 12px) 0;
                border-right: none;
                border-top: 1px solid #e5e5e5;
                /* 保持底部 Tab 始终在最上层（更像手机 QQ） */
                z-index: 300;
                background: #fff;
                box-shadow: 0 -2px 10px rgba(0,0,0,.1);
            }
            .nav-rail .rail-spacer {
                display: none;
            }
            .nav-rail .nav-btn {
                width: 50px;
                height: 50px;
            }

            /* 聊天页返回按钮（手机QQ风格：左上角返回列表） */
            .mobile-back-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 12px;
                padding: 0;
            }
            
            /* 侧边栏全屏显示 */
            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                /* 主页就是列表（像 QQ）：固定铺满屏幕，底部给 Tab 预留空间 */
                bottom: calc(60px + env(safe-area-inset-bottom) + 12px);
                z-index: 200;
                transform: none;
                transition: none;
                padding-bottom: env(safe-area-inset-bottom);
                width: 100% !important;
                max-width: 100% !important;
            }

            /* 不再使用“抽屉遮罩” */
            .sidebar-overlay { display: none !important; }
            
            /* 聊天页：覆盖在列表之上（右侧滑入），更接近手机 QQ */
            .chat-area {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 400;
                transform: translateX(100%);
                transition: transform 0.25s ease;
                will-change: transform;
                padding-bottom: env(safe-area-inset-bottom);
            }

            /* 默认（列表页）不让 chat-area 接收点击 */
            .chat-area { pointer-events: none; }
            body.mobile-chat-open .chat-area { pointer-events: auto; }

            body.mobile-chat-open .chat-area { transform: translateX(0); }
            body.mobile-chat-open .sidebar { display: none; }
            body.mobile-chat-open .nav-rail { display: none; }

            /* 底部菜单弹窗也抬高，避免被底栏遮住 */
            .nav-popup {
                /* 关键：必须浮在列表之上，否则会被 sidebar(200) 压住导致“看不到菜单” */
                position: fixed;
                left: auto;
                right: 10px;
                bottom: calc(70px + env(safe-area-inset-bottom) + 12px);
                width: min(240px, calc(100vw - 20px));
                z-index: 1000;
            }
            
            /* 消息气泡宽度调整 */
            .msg-content {
                max-width: 75%;
            }
            
            /* 输入区域优化 */
            .input-area {
                padding: 10px 16px;
            }
            .input-toolbar {
                gap: 12px;
            }
            
            /* 表情面板全屏 */
            .emoji-panel {
                width: 100%;
                left: 0;
                border-radius: 12px 12px 0 0;
            }
            
            /* 成员面板全屏 */
            .member-panel {
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: 450;
                transform: translateX(100%);
                transition: transform 0.3s;
            }
            .member-panel.show {
                transform: translateX(0);
            }
            
            /* 模态框全屏 */
            .modal-dialog {
                margin: 0;
                max-width: 100%;
                height: 100%;
            }
            .modal-content {
                height: 100%;
                border-radius: 0;
            }
            
            /* 用户卡片优化 */
            .user-card-modal .modal-dialog {
                margin: 0;
                max-width: 100%;
            }
            
            /* 公告、管理、举报弹窗全屏 */
            .announcement-container,
            .manage-container,
            .report-container,
            .chatsearch-container {
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                border-radius: 0;
            }
            
            /* 菜单弹窗位置调整 */
            .nav-popup {
                left: auto;
                right: 10px;
                bottom: 70px;
                width: 200px;
            }
            
            /* 隐藏部分按钮文字，只显示图标 */
            .quick-plus-item span {
                font-size: 13px;
            }
        }
        
        /* 小屏手机（小于 480px） */
        @media screen and (max-width: 480px) {
            .auth-box {
                padding: 24px 16px;
            }
            .auth-box h2 {
                font-size: 24px;
            }
            
            .msg-content {
                max-width: 80%;
            }
            
            .input-row textarea {
                font-size: 16px; /* 防止 iOS 自动缩放 */
            }
            
            .chat-title {
                font-size: 16px;
            }
            
            .session-name,
            .group-name,
            .friend-name {
                font-size: 14px;
            }
        }
        
        /* ==================== UI 优化和动画 ==================== */
        
        /* 加载动画 */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .loading {
            display: inline-block;
            animation: spin 1s linear infinite;
        }
        
        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }
        
        /* 消息发送动画 */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .message-item {
            animation: slideInUp 0.3s ease-out;
        }
        
        /* 按钮点击反馈 */
        .nav-btn:active,
        .btn:active,
        .menu-btn:active {
            transform: scale(0.95);
            transition: transform 0.1s;
        }
        
        /* 输入框焦点效果 */
        .form-control:focus,
        textarea:focus {
            box-shadow: 0 0 0 3px rgba(var(--wmh-primary-rgb, 255,145,164), 0.1);
            border-color: var(--wmh-primary, #FF91A4);
        }
        
        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* 头像加载动画 */
        .user-avatar,
        .friend-avatar,
        .session-avatar,
        .msg-avatar,
        .group-avatar {
            background: linear-gradient(135deg, var(--wmh-gradient-start, #FFB6C1) 0%, var(--wmh-gradient-mid, #FF91A4) 100%);
            position: relative;
            overflow: hidden;
        }
        .user-avatar::before,
        .friend-avatar::before,
        .session-avatar::before,
        .msg-avatar::before,
        .group-avatar::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
            animation: shimmer 2s infinite;
        }
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        .user-avatar img ~ ::before,
        .friend-avatar img ~ ::before,
        .session-avatar img ~ ::before,
        .msg-avatar img ~ ::before,
        .group-avatar img ~ ::before {
            display: none;
        }
        
        /* 消息气泡优化 */
        .msg-bubble {
            position: relative;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .msg-bubble:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
        }
        
        /* 会话项优化 */
        .session-item,
        .group-item,
        .friend-item {
            transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
            position: relative;
        }
        .session-item::before,
        .group-item::before,
        .friend-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--wmh-primary, #FF91A4);
            transform: scaleY(0);
            transition: transform 0.2s;
        }
        .session-item:hover::before,
        .group-item:hover::before,
        .friend-item:hover::before {
            transform: scaleY(1);
        }
        .session-item.active::before,
        .group-item.active::before,
        .friend-item.active::before {
            transform: scaleY(1);
        }
        .session-item:active,
        .group-item:active,
        .friend-item:active {
            transform: scale(0.98);
        }
        .session-item.active,
        .group-item.active,
        .friend-item.active {
            box-shadow: inset 3px 0 0 var(--wmh-primary, #FF91A4);
        }
        
        /* 底部导航栏遮罩（移动端） */
        @media screen and (max-width: 768px) {
            .sidebar-overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.5);
                z-index: 199;
                display: none;
            }
            .sidebar-overlay.show {
                display: block;
            }
        }
        
        /* 触摸优化 */
        @media (hover: none) {
            .session-item:hover,
            .group-item:hover,
            .friend-item:hover {
                background: transparent;
            }
            .session-item.pinned { background: #f7f7f7; }
            .session-item:active,
            .group-item:active,
            .friend-item:active {
                background: #f5f5f5;
            }
        }