*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","SimSun",Tahoma,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden;position:relative;background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%)}
body::before,body::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:0.4;animation:bgfloat 8s ease-in-out infinite;z-index:0}
body::before{width:350px;height:350px;background:#ff6b9d;top:-80px;left:-80px}
body::after{width:300px;height:300px;background:#4facfe;bottom:-60px;right:-60px;animation-delay:3s}
@keyframes bgfloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,-25px) scale(1.1)}}
.chat-window{width:100%;max-width:1000px;height:92vh;max-height:780px;background:#ECE9D8;border:1px solid rgba(255,255,255,0.3);border-radius:12px;box-shadow:0 25px 60px -15px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.1);display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}
.title-bar{background:linear-gradient(to right,#0A246A 0%,#3A6EA5 50%,#0A246A 100%);color:#fff;padding:5px 8px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:bold;text-shadow:1px 1px 1px rgba(0,0,0,0.5);user-select:none}
.title-left{display:flex;align-items:center;gap:6px}.title-icon{font-size:16px}
.title-right{display:flex;gap:4px;align-items:center}
.lang-switch-top{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);color:#fff;padding:2px 10px;border-radius:3px;cursor:pointer;font-size:11px;font-weight:bold}
.lang-switch-top:hover{background:rgba(255,255,255,0.4)}
.win-btn{width:22px;height:20px;background:linear-gradient(to bottom,#ECE9D8,#B8B4A8);border:1px solid #888;border-radius:2px;font-size:11px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:bold}
.win-btn:hover{background:linear-gradient(to bottom,#fff,#D0CCC0)}.win-btn.close:hover{background:linear-gradient(to bottom,#FF6B6B,#E04040);color:#fff}
.menu-bar{background:#ECE9D8;padding:3px 8px;font-size:12px;border-bottom:1px solid #B8B4A8;display:flex;align-items:center;gap:14px}
.menu-item{padding:2px 6px;cursor:pointer;border-radius:2px;color:#333}.menu-item:hover{background:#316AC5;color:#fff}
.menu-logout{margin-left:auto;color:#c0392b;font-weight:bold}.menu-logout:hover{background:#e74c3c;color:#fff}
.menu-user{margin-left:auto;font-size:12px;color:#555;display:flex;align-items:center;gap:6px}
.admin-badge{background:linear-gradient(to bottom,#FFD700,#FFA500);color:#8B4513;font-size:10px;padding:1px 6px;border-radius:8px;font-weight:bold;border:1px solid #DAA520}
.main-area{flex:1;display:flex;overflow:hidden}
.chat-area{flex:1;display:flex;flex-direction:column;border-right:1px solid #B8B4A8;min-width:0}
.room-info{background:linear-gradient(to bottom,#F5F4EA,#E8E4D4);padding:5px 10px;font-size:12px;border-bottom:1px solid #B8B4A8;display:flex;gap:14px;color:#444;align-items:center}
.room-info b{color:#0A246A}.room-topic{margin-left:auto;opacity:0.8}
.messages{flex:1;overflow-y:auto;padding:10px 12px;background:#fff;font-size:13px;line-height:1.8;scroll-behavior:smooth}
.messages::-webkit-scrollbar{width:16px}.messages::-webkit-scrollbar-track{background:#F0F0F0;border-left:1px solid #ccc}.messages::-webkit-scrollbar-thumb{background:linear-gradient(to right,#D0D0D0,#A0A0A0);border:1px solid #888;border-radius:2px}
.msg-row{margin-bottom:3px;word-wrap:break-word;word-break:break-all;padding:2px 0;position:relative}
.msg-time{color:#999;font-size:11px;margin-right:4px}
.msg-name{font-weight:bold;cursor:pointer;text-decoration:none}.msg-name:hover{text-decoration:underline}
.msg-say{color:#666;margin:0 3px}.msg-content{display:inline}
.msg-translate-btn{display:inline-block;font-size:10px;padding:0 5px;margin-left:6px;background:linear-gradient(to bottom,#F5F4EA,#E0DCC8);border:1px solid #B8B4A8;border-radius:2px;color:#0A246A;cursor:pointer;vertical-align:middle;line-height:16px;opacity:0.5;transition:opacity .2s}
.msg-row:hover .msg-translate-btn{opacity:1}.msg-translate-btn:hover{background:linear-gradient(to bottom,#5A9BD5,#2E75B6);color:#fff;border-color:#1F5C99}
.msg-translation{display:block;margin-top:2px;margin-left:60px;padding:4px 8px;background:#F0F7FF;border-left:3px solid #5A9BD5;border-radius:0 3px 3px 0;font-size:12px;color:#2A5A8A;line-height:1.6}
.msg-translation .trans-label{display:inline-block;font-size:10px;background:#5A9BD5;color:#fff;padding:0 4px;border-radius:2px;margin-right:5px;vertical-align:middle}
.sys-msg{color:#888;font-size:12px;text-align:center;padding:4px 0;font-style:italic}.sys-msg.welcome{color:#0A246A;font-weight:bold;font-style:normal}
.whisper-row .msg-name{color:#800080!important}.whisper-row .whisper-label{color:#800080;font-size:11px;background:#FFF0FF;border:1px solid #D8BFD8;padding:0 4px;border-radius:2px;margin-right:4px}
.msg-self .msg-name{text-decoration:underline}
.toolbar{background:linear-gradient(to bottom,#F5F4EA,#E8E4D4);padding:4px 8px;border-top:1px solid #B8B4A8;border-bottom:1px solid #B8B4A8;display:flex;align-items:center;gap:4px;flex-wrap:wrap;position:relative}
.tool-select{padding:2px 4px;font-size:12px;border:2px inset #B8B4A8;background:#fff;border-radius:2px;cursor:pointer}
.tool-btn{width:26px;height:24px;background:linear-gradient(to bottom,#FDFCF8,#E0DCC8);border:1px solid #B8B4A8;border-radius:2px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;color:#333}
.tool-btn:hover{background:linear-gradient(to bottom,#fff,#E8E4D4);border-color:#0A246A}
.tool-btn.active{background:linear-gradient(to bottom,#D0D0D0,#B0B0B0);border-color:#888;box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2)}
.tool-btn.translate-active{background:linear-gradient(to bottom,#5A9BD5,#2E75B6);color:#fff;border-color:#1F5C99}
.color-btn{border:2px solid #333}
.tool-tip{font-size:12px;color:#800080;margin-left:8px}.auto-tr-tip{color:#2A5A8A}
.color-panel{display:none;position:absolute;top:100%;left:120px;background:#fff;border:1px solid #888;padding:4px;display:none;grid-template-columns:repeat(5,1fr);gap:2px;z-index:100;box-shadow:2px 2px 6px rgba(0,0,0,0.2)}
.color-panel.show{display:grid}.color-cell{width:20px;height:20px;border:1px solid #ccc;cursor:pointer;border-radius:2px}.color-cell:hover{border-color:#0A246A;transform:scale(1.1)}
.emoticon-panel{display:none;position:absolute;top:100%;left:160px;background:#fff;border:1px solid #888;padding:6px;grid-template-columns:repeat(8,1fr);gap:3px;z-index:100;box-shadow:2px 2px 6px rgba(0,0,0,0.2);max-width:280px}
.emoticon-panel.show{display:grid}.emoticon-item{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border-radius:3px}.emoticon-item:hover{background:#E8F0FF}
.input-area{background:#fff;padding:6px 8px 4px;border-top:1px solid #B8B4A8}
#msgInput{width:100%;height:70px;border:2px inset #B8B4A8;padding:6px 8px;font-size:13px;resize:none;outline:none;font-family:inherit;border-radius:2px;line-height:1.5}
#msgInput:focus{border-color:#0A246A}
.input-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.char-count{font-size:11px;color:#999}
.send-btn{background:linear-gradient(to bottom,#5A9BD5,#2E75B6);color:#fff;border:1px solid #1F5C99;padding:5px 20px;font-size:13px;border-radius:3px;cursor:pointer;font-weight:bold;text-shadow:1px 1px 1px rgba(0,0,0,0.3)}
.send-btn:hover{background:linear-gradient(to bottom,#6FA8DC,#3A85C6)}
.user-panel{width:210px;display:flex;flex-direction:column;background:#F5F4EA}
.user-panel-title{background:linear-gradient(to bottom,#3A6EA5,#2A5A8A);color:#fff;padding:5px 10px;font-size:12px;font-weight:bold;display:flex;justify-content:space-between;align-items:center}
#userCountBadge{background:#fff;color:#2A5A8A;padding:0 6px;border-radius:8px;font-size:11px;min-width:18px;text-align:center}
.user-list{flex:1;overflow-y:auto;padding:4px}
.user-list::-webkit-scrollbar{width:12px}.user-list::-webkit-scrollbar-track{background:#E8E4D4}.user-list::-webkit-scrollbar-thumb{background:linear-gradient(to right,#D0D0D0,#A0A0A0);border:1px solid #888;border-radius:2px}
.user-item{display:flex;align-items:center;gap:6px;padding:5px 6px;cursor:pointer;border-radius:3px;font-size:12px}
.user-item:hover{background:#D8E4F0}.user-item.self{background:#E8F0FF}
.user-avatar{width:26px;height:26px;background:linear-gradient(135deg,#FFD700,#FFA500);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:1px solid #DAA520}
.user-info{flex:1;min-width:0}
.user-name{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-region{font-size:10px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.user-empty{text-align:center;color:#999;padding:20px;font-size:12px}
.user-panel-footer{padding:4px 8px;font-size:10px;color:#888;border-top:1px solid #B8B4A8;display:flex;justify-content:space-around;background:#E8E4D4}
.status-bar{background:linear-gradient(to bottom,#E8E4D4,#D8D4C4);padding:3px 10px;font-size:11px;color:#555;border-top:1px solid #B8B4A8;display:flex;gap:14px}
.status-item{display:flex;align-items:center;gap:3px}.status-item::before{content:'';width:6px;height:6px;background:#4CAF50;border-radius:50%;display:inline-block}
.context-menu{display:none;position:fixed;background:#fff;border:1px solid #888;box-shadow:2px 2px 8px rgba(0,0,0,0.2);z-index:1000;min-width:140px;padding:2px}
.context-menu.show{display:block}.ctx-item{padding:6px 12px;font-size:12px;cursor:pointer;border-radius:2px}.ctx-item:hover{background:#316AC5;color:#fff}
@media(max-width:700px){.chat-window{height:95vh;max-height:none}.user-panel{width:140px}.room-info{font-size:11px;gap:8px}.menu-bar{display:none}.room-topic{display:none}}

/* ===== v3.2 新增：图片消息 ===== */
.msg-img{max-width:280px;max-height:200px;border-radius:8px;margin:4px 0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:transform .2s;display:block}
.msg-img:hover{transform:scale(1.02)}
.img-uploading{display:inline-block;padding:8px 16px;background:#f0f0f0;border-radius:6px;font-size:12px;color:#666}
.img-uploading .spin{display:inline-block;animation:spin 1s linear infinite;margin-right:5px}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== 背景主题面板 ===== */
.bg-panel{display:none;position:absolute;top:100%;right:10px;background:#fff;border:1px solid rgba(0,0,0,0.1);padding:8px;border-radius:10px;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,0.15);grid-template-columns:repeat(6,1fr);gap:6px;width:300px;max-height:400px;overflow-y:auto}
.bg-panel.show{display:grid}
.bg-panel-title{grid-column:1/-1;font-size:11px;color:#86868b;font-weight:600;padding:2px 4px 4px}
.bg-item{width:100%;height:32px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative}
.bg-item:hover{transform:scale(1.05);border-color:rgba(0,0,0,0.2)}
.bg-item.active{border-color:#007aff;box-shadow:0 0 0 2px rgba(0,122,255,0.2)}
.bg-item.active::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,0.5)}

/* 聊天区域背景主题 */
.messages.bg-default{background:#fff}
.messages.bg-ocean{background:linear-gradient(135deg,#e0e7ff 0%,#f3e8ff 50%,#fce7f3 100%)}
.messages.bg-sunset{background:linear-gradient(135deg,#fce7f3 0%,#ffe4e6 50%,#fef3c7 100%)}
.messages.bg-forest{background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 50%,#ccfbf1 100%)}
.messages.bg-night{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%);color:#e0e0e0}
.messages.bg-night .msg-time{color:#999}
.messages.bg-night .msg-say{color:#aaa}
.messages.bg-night .sys-msg{color:#aaa}
.messages.bg-peach{background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 50%,#fed7aa 100%)}

/* ===== 会员资料弹窗 ===== */
.profile-mask{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);z-index:2000;align-items:center;justify-content:center}
.profile-mask.show{display:flex}
.profile-card{width:340px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,0.3);animation:popIn .3s ease;position:relative}
@keyframes popIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
.profile-close{position:absolute;top:12px;right:14px;font-size:22px;color:#999;cursor:pointer;z-index:10;line-height:1}
.profile-close:hover{color:#333}
.profile-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);padding:30px 24px 20px;text-align:center;position:relative}
.profile-avatar{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.profile-name-row{display:flex;align-items:center;justify-content:center;gap:6px}
.profile-name{font-size:20px;font-weight:700;color:#fff}
.profile-badge{font-size:16px}
.profile-status{font-size:12px;color:rgba(255,255,255,0.85);margin-top:4px}
.profile-body{padding:18px 24px}
.profile-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:13px}
.profile-row:last-child{border-bottom:none}
.profile-row .label{color:#999}
.profile-row .value{color:#333;font-weight:500;text-align:right;max-width:60%}
.profile-actions{display:flex;gap:10px;padding:0 24px 20px}
.pf-btn{flex:1;padding:10px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.pf-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.pf-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}
.pf-btn:not(.pf-primary){background:#f0f0f0;color:#666}
.pf-btn:not(.pf-primary):hover{background:#e0e0e0}

/* 图片预览大图 */
.img-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:3000;align-items:center;justify-content:center;cursor:pointer}
.img-lightbox.show{display:flex}
.img-lightbox img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,0.5)}

/* ===== v3.3 气泡消息样式（覆盖旧行式） ===== */
.msg-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;word-wrap:break-word;word-break:break-word;position:relative;animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-row .msg-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.msg-row .msg-main{flex:1;min-width:0;max-width:70%}
.msg-row .msg-meta{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-size:11px}
.msg-row .msg-name{font-weight:bold;cursor:pointer;color:#333}
.msg-row .msg-name:hover{text-decoration:underline}
.msg-row .msg-time{color:#999}
.msg-row .msg-bubble{display:inline-block;background:#fff;padding:8px 14px;border-radius:4px 14px 14px 14px;box-shadow:0 2px 8px rgba(0,0,0,0.08);line-height:1.6;word-wrap:break-word;max-width:100%}
.msg-row .msg-bubble .msg-content{display:inline}
.msg-row .msg-actions{margin-top:4px}
.msg-row .msg-translate-btn{display:inline-block;font-size:10px;padding:1px 7px;background:rgba(102,126,234,0.1);border:1px solid rgba(102,126,234,0.3);border-radius:10px;color:#667eea;cursor:pointer;line-height:16px;opacity:0.6;transition:all .2s}
.msg-row:hover .msg-translate-btn{opacity:1}
.msg-row .msg-translate-btn:hover{background:#667eea;color:#fff}
.msg-row .msg-translation{margin-top:6px;padding:6px 10px;background:rgba(90,155,213,0.08);border-left:3px solid #5A9BD5;border-radius:0 8px 8px 0;font-size:12px;color:#2A5A8A;line-height:1.5}
.msg-row .msg-translation .trans-label{display:inline-block;font-size:10px;background:#5A9BD5;color:#fff;padding:0 5px;border-radius:8px;margin-right:5px;vertical-align:middle}
/* 自己的消息靠右 */
.msg-row.msg-self{flex-direction:row-reverse}
.msg-row.msg-self .msg-main{text-align:right}
.msg-row.msg-self .msg-meta{flex-direction:row-reverse}
.msg-row.msg-self .msg-bubble{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:14px 4px 14px 14px}
.msg-row.msg-self .msg-bubble .msg-content{color:#fff}
.msg-row.msg-self .msg-name{color:#764ba2}
.msg-row.msg-self .msg-translate-btn{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.4);color:#fff}
/* 私聊消息 */
.msg-row.whisper-row .msg-bubble{background:linear-gradient(135deg,#f3e8ff,#fce7f3);border:1px solid #e9d5ff}
.msg-row.whisper-row .whisper-label{display:inline-block;font-size:10px;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;padding:1px 6px;border-radius:8px;margin-right:6px;vertical-align:middle}
/* 系统消息 */
.msg-row.sys-msg{justify-content:center;display:flex}
.msg-row.sys-msg .sys-text{background:rgba(0,0,0,0.06);color:#888;font-size:11px;padding:3px 12px;border-radius:10px;font-style:italic}
.msg-row.sys-msg.welcome .sys-text{background:rgba(102,126,234,0.12);color:#667eea;font-weight:bold;font-style:normal}
/* 图片在气泡中 */
.msg-bubble .msg-img{max-width:240px;max-height:180px;border-radius:8px;margin:2px 0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:transform .2s;display:block}
.msg-bubble .msg-img:hover{transform:scale(1.02)}

/* ===== v3.4 恢复QQ经典行式消息（覆盖气泡） ===== */
.msg-row{display:block;margin-bottom:2px;padding:3px 6px;border-radius:4px;word-wrap:break-word;word-break:break-word;position:relative;animation:none}
.msg-row:hover{background:#f5f8ff}
.msg-row.msg-self{background:#eef5ff}
.msg-row.msg-self:hover{background:#e0eeff}
.msg-row .msg-avatar{display:none}
.msg-row .msg-main{display:inline;max-width:none}
.msg-row .msg-meta{display:inline;margin:0}
.msg-row .msg-name{font-weight:bold;cursor:pointer;text-decoration:none}
.msg-row .msg-name:hover{text-decoration:underline}
.msg-row .msg-time{color:#999;font-size:11px;margin-right:4px}
.msg-row .msg-bubble{display:inline;background:none;padding:0;border-radius:0;box-shadow:none;line-height:1.8}
.msg-row .msg-bubble .msg-content{display:inline;color:inherit}
.msg-row.msg-self .msg-bubble{background:none;color:inherit}
.msg-row.msg-self .msg-name{color:#0A246A}
.msg-row .msg-actions{display:inline;margin:0}
.msg-row .msg-translate-btn{display:inline-block;font-size:10px;padding:0 5px;margin-left:6px;background:linear-gradient(to bottom,#F5F4EA,#E0DCC8);border:1px solid #B8B4A8;border-radius:2px;color:#0A246A;cursor:pointer;vertical-align:middle;line-height:16px;opacity:0.5;transition:opacity .2s}
.msg-row:hover .msg-translate-btn{opacity:1}
.msg-row .msg-translate-btn:hover{background:linear-gradient(to bottom,#5A9BD5,#2E75B6);color:#fff;border-color:#1F5C99}
.msg-row .msg-translation{display:block;margin-top:2px;margin-left:60px;padding:4px 8px;background:#F0F7FF;border-left:3px solid #5A9BD5;border-radius:0 3px 3px 0;font-size:12px;color:#2A5A8A;line-height:1.6}
.msg-row .msg-translation .trans-label{display:inline-block;font-size:10px;background:#5A9BD5;color:#fff;padding:0 4px;border-radius:2px;margin-right:5px;vertical-align:middle}
.msg-row.whisper-row .msg-name{color:#800080!important}
.msg-row.whisper-row .whisper-label{color:#800080;font-size:11px;background:#FFF0FF;border:1px solid #D8BFD8;padding:0 4px;border-radius:2px;margin-right:4px}
.msg-row.sys-msg{text-align:center;padding:4px 0}
.msg-row.sys-msg .sys-text{background:rgba(0,0,0,0.05);color:#888;font-size:12px;padding:2px 12px;border-radius:10px;font-style:italic}
.msg-row.sys-msg.welcome .sys-text{background:rgba(10,36,106,0.08);color:#0A246A;font-weight:bold;font-style:normal}
.msg-row .msg-img{max-width:280px;max-height:200px;border-radius:6px;margin:4px 0;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);display:block}
.msg-row .msg-img:hover{transform:scale(1.01)}

/* ===== v4.0 苹果 macOS/iOS 风格（全面覆盖） ===== */
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif}
.chat-window{background:#fff;background:rgba(255,255,255,0.92);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,0.5);border-radius:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,0.35),0 0 0 0.5px rgba(0,0,0,0.1);overflow:hidden;position:relative;min-width:580px;min-height:400px}
/* 窗口缩放手柄 */
.resize-handle{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:100;background:linear-gradient(135deg,transparent 50%,rgba(0,122,255,0.4) 50%);border-radius:0 0 16px 0}
.resize-handle:hover{background:linear-gradient(135deg,transparent 50%,rgba(0,122,255,0.7) 50%)}
/* 标题栏 */
.title-bar{background:#f6f6f8;background:rgba(246,246,248,0.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,0.08);height:38px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;color:#333;font-size:13px;font-weight:600;text-shadow:none}
.title-left,.title-right{display:flex;align-items:center;gap:8px}
.title-center{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;color:#333;display:flex;align-items:center;gap:5px}
.title-icon{font-size:15px}
.traffic-lights{display:flex;gap:8px;align-items:center}
.traffic-lights .light{width:12px;height:12px;border-radius:50%;cursor:pointer;transition:opacity .2s;border:none}
.traffic-lights .light.red{background:#ff5f57}
.traffic-lights .light.yellow{background:#febc2e}
.traffic-lights .light.green{background:#28c840}
.traffic-lights:hover .light{opacity:0.5}
.traffic-lights .light:hover{opacity:1}
.lang-switch-top{background:rgba(0,0,0,0.06);border:none;color:#333;padding:3px 12px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;transition:background .2s}
.lang-switch-top:hover{background:rgba(0,0,0,0.1)}
.win-btn{display:none}
/* 菜单栏 */
.menu-bar{background:#f6f6f8;background:rgba(246,246,248,0.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,0.06);padding:4px 14px;font-size:12px;gap:18px}
.menu-item{padding:3px 8px;border-radius:5px;color:#444;font-weight:500}
.menu-item:hover{background:rgba(0,0,0,0.08);color:#000}
.menu-logout{color:#ff3b30}
.menu-logout:hover{background:rgba(255,59,48,0.1);color:#ff3b30}
.menu-user{font-size:12px;color:#666}
.admin-badge{background:linear-gradient(135deg,#ffcc00,#ff9500);color:#fff;font-size:10px;padding:1px 7px;border-radius:8px;border:none;font-weight:600}
/* 房间信息 */
.room-info{background:rgba(246,246,248,0.6);border-bottom:1px solid rgba(0,0,0,0.06);padding:6px 14px;font-size:12px;color:#666}
.room-info b{color:#007aff}
/* 聊天区域 */
.messages{background:#f5f5f7;padding:16px;line-height:1.5}
.messages::-webkit-scrollbar{width:8px}
.messages::-webkit-scrollbar-track{background:transparent}
.messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:4px;border:none}
.messages::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25)}
/* iOS气泡消息 */
.msg-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:10px;padding:0;animation:msgPop .25s ease}
@keyframes msgPop{from{opacity:0;transform:translateY(6px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.msg-row .msg-avatar{display:none}
.msg-row .msg-main{max-width:70%;display:flex;flex-direction:column}
.msg-row .msg-meta{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:11px}
.msg-row .msg-name{font-weight:600;color:#333;cursor:pointer}
.msg-row .msg-time{color:#999}
.msg-row .msg-bubble{display:inline-block;padding:9px 14px;border-radius:18px;font-size:14px;line-height:1.4;word-wrap:break-word;max-width:100%;position:relative}
.msg-row .msg-bubble .msg-content{display:inline}
.msg-row .msg-actions{margin-top:3px}
.msg-row .msg-translate-btn{font-size:10px;padding:1px 8px;background:rgba(0,122,255,0.1);border:none;border-radius:8px;color:#007aff;cursor:pointer;opacity:0.5;transition:all .2s}
.msg-row:hover .msg-translate-btn{opacity:1}
.msg-row .msg-translate-btn:hover{background:#007aff;color:#fff}
.msg-row .msg-translation{margin-top:5px;padding:6px 10px;background:rgba(0,122,255,0.06);border-left:2px solid #007aff;border-radius:0 8px 8px 0;font-size:12px;color:#555}
.msg-row .msg-translation .trans-label{font-size:10px;background:#007aff;color:#fff;padding:0 5px;border-radius:6px;margin-right:5px}
/* 自己的消息靠右蓝色 */
.msg-row.msg-self{flex-direction:row-reverse}
.msg-row.msg-self .msg-main{align-items:flex-end}
.msg-row.msg-self .msg-bubble{background:#007aff;color:#fff;border-bottom-right-radius:4px}
.msg-row.msg-self .msg-name{color:#007aff}
.msg-row.msg-self .msg-translate-btn{background:rgba(255,255,255,0.2);color:#fff}
/* 别人的消息靠左灰色 */
.msg-row:not(.msg-self):not(.sys-msg) .msg-bubble{background:#fff;color:#333;border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.06)}
/* 私聊 */
.msg-row.whisper-row .msg-bubble{background:#f3e8ff}
.msg-row.whisper-row .whisper-label{font-size:10px;background:#af52de;color:#fff;padding:1px 6px;border-radius:6px;margin-right:4px}
/* 系统消息 */
.msg-row.sys-msg{justify-content:center}
.msg-row.sys-msg .sys-text{background:rgba(0,0,0,0.06);color:#888;font-size:11px;padding:3px 12px;border-radius:10px}
.msg-row.sys-msg.welcome .sys-text{background:rgba(0,122,255,0.1);color:#007aff;font-weight:600}
/* 图片 */
.msg-row .msg-img{max-width:220px;max-height:160px;border-radius:12px;margin:0}
/* 工具栏 */
.toolbar{background:#f6f6f8;background:rgba(246,246,248,0.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,0.06);border-bottom:1px solid rgba(0,0,0,0.06);padding:6px 12px;gap:5px}
.tool-select{padding:4px 8px;font-size:12px;border:1px solid rgba(0,0,0,0.1);background:#fff;border-radius:6px;cursor:pointer;outline:none}
.tool-select:focus{border-color:#007aff}
.tool-btn{width:30px;height:28px;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:6px;cursor:pointer;font-size:14px;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.tool-btn:hover{background:#f0f0f0;border-color:rgba(0,0,0,0.15);transform:translateY(-1px)}
.tool-btn.active{background:#007aff;color:#fff;border-color:#007aff}
.tool-btn.translate-active{background:#007aff;color:#fff;border-color:#007aff}
.color-btn{border:2px solid #333}
.color-panel,.emoticon-panel,.bg-panel{border-radius:10px;border:1px solid rgba(0,0,0,0.1);box-shadow:0 10px 30px rgba(0,0,0,0.15)}
/* 输入区 */
.input-area{background:#f6f6f8;background:rgba(246,246,248,0.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,0.06);padding:8px 12px}
#msgInput{border:1px solid rgba(0,0,0,0.1);border-radius:10px;padding:8px 12px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s;background:#fff}
#msgInput:focus{border-color:#007aff;box-shadow:0 0 0 3px rgba(0,122,255,0.1)}
.send-btn{background:#007aff;color:#fff;border:none;padding:7px 24px;font-size:13px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .15s}
.send-btn:hover{background:#0066d6;transform:translateY(-1px)}
.send-btn:active{transform:translateY(0)}
/* 用户面板 */
.user-panel{background:#f6f6f8;background:rgba(246,246,248,0.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:1px solid rgba(0,0,0,0.06)}
.user-panel-title{background:transparent;color:#333;padding:8px 12px;font-size:12px;font-weight:600;border-bottom:1px solid rgba(0,0,0,0.06)}
#userCountBadge{background:#007aff;color:#fff;padding:0 7px;border-radius:9px;font-size:11px}
.user-item{padding:7px 10px;border-radius:8px;margin:2px 4px}
.user-item:hover{background:rgba(0,122,255,0.08)}
.user-item.self{background:rgba(0,122,255,0.1)}
.user-avatar{background:linear-gradient(135deg,#007aff,#5856d6);border:none;border-radius:8px}
.user-region{color:#999}
.user-panel-footer{background:transparent;border-top:1px solid rgba(0,0,0,0.06);color:#999}
/* 状态栏 */
.status-bar{background:#f6f6f8;background:rgba(246,246,248,0.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,0.06);padding:5px 14px;font-size:11px;color:#888}
.status-item::before{background:#34c759}
/* 右键菜单 */
.context-menu{background:#fff;background:rgba(255,255,255,0.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,0.1);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,0.15);padding:4px}
.ctx-item{padding:7px 14px;border-radius:6px;font-size:13px}
.ctx-item:hover{background:#007aff;color:#fff}
/* 资料弹窗 */
.profile-card{border-radius:18px}
.profile-header{background:linear-gradient(135deg,#007aff,#5856d6,#af52de)}
.pf-primary{background:#007aff}
.pf-primary:hover{box-shadow:0 4px 12px rgba(0,122,255,0.4)}
/* 背景主题适配 */
.messages.bg-ocean{background:linear-gradient(160deg,#e8f0fe,#f3e8ff,#fce7f3)}
.messages.bg-sunset{background:linear-gradient(160deg,#fce7f3,#ffe4e6,#fef3c7)}
.messages.bg-forest{background:linear-gradient(160deg,#d1fae5,#a7f3d0,#ccfbf1)}
.messages.bg-night{background:linear-gradient(160deg,#1c1c1e,#2c2c2e,#1c1c1e)}
.messages.bg-night .msg-row:not(.msg-self):not(.sys-msg) .msg-bubble{background:#3a3a3c;color:#fff}
.messages.bg-night .msg-name{color:#ddd}
.messages.bg-night .msg-time{color:#888}
.messages.bg-peach{background:linear-gradient(160deg,#fff7ed,#ffedd5,#fed7aa)}
.messages.bg-sky{background:linear-gradient(160deg,#e3f2fd,#bbdefb,#e1f5fe)}
.messages.bg-lavender{background:linear-gradient(160deg,#f3e5f5,#e1bee7,#e8eaf6)}
.messages.bg-mint{background:linear-gradient(160deg,#e8f5e9,#c8e6c9,#e0f2f1)}
.messages.bg-rose{background:linear-gradient(160deg,#ffebee,#f8bbd0,#fce4ec)}
.messages.bg-coffee{background:linear-gradient(160deg,#efebe9,#d7ccc8,#eceff1)}
.messages.bg-gold{background:linear-gradient(160deg,#fff8e1,#ffecb3,#fff3e0)}
/* 精美图片背景（带半透明遮罩） */
.messages.bg-img1{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1018/1200/800');background-size:cover;background-position:center}
.messages.bg-img2{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1015/1200/800');background-size:cover;background-position:center}
.messages.bg-img3{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1019/1200/800');background-size:cover;background-position:center}
.messages.bg-img4{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1011/1200/800');background-size:cover;background-position:center}
.messages.bg-img5{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1036/1200/800');background-size:cover;background-position:center}
/* 新增渐变皮肤 */
.messages.bg-aurora{background:linear-gradient(135deg,#00c9ff,#92fe9d)}
.messages.bg-sakura{background:linear-gradient(135deg,#ffecd2,#fcb69f,#ff9a9e)}
.messages.bg-starry{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}
.messages.bg-desert{background:linear-gradient(135deg,#f12711,#f5af19)}
.messages.bg-candy{background:linear-gradient(135deg,#ff9a9e,#fecfef,#fecfef)}
.messages.bg-matcha{background:linear-gradient(135deg,#d4fc79,#96e6a1)}
.messages.bg-grape{background:linear-gradient(135deg,#a18cd1,#fbc2eb)}
.messages.bg-rainbow{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082)}
.messages.bg-ocean2{background:linear-gradient(135deg,#2193b0,#6dd5ed)}
.messages.bg-sunset2{background:linear-gradient(135deg,#ff512f,#f09819)}
.messages.bg-mint2{background:linear-gradient(135deg,#a8edea,#fed6e3)}
/* 新增图片皮肤 */
.messages.bg-img6{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1043/1200/800');background-size:cover;background-position:center}
.messages.bg-img7{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1039/1200/800');background-size:cover;background-position:center}
.messages.bg-img8{background-image:linear-gradient(rgba(255,255,255,0.88),rgba(255,255,255,0.88)),url('https://picsum.photos/id/1040/1200/800');background-size:cover;background-position:center}

/* ===== 封禁管理 ===== */
.ban-manage-btn{margin-left:auto;background:transparent;border:none;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:background .15s}
.ban-manage-btn:hover{background:rgba(0,0,0,0.08)}
.ban-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center}
.ban-mask.show{display:flex}
.ban-card{background:#fff;border-radius:16px;width:420px;max-width:90vw;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.ban-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #f0f0f0;font-size:16px;font-weight:700;color:#1d1d1f}
.ban-close{background:transparent;border:none;font-size:20px;color:#86868b;cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ban-close:hover{background:#f5f5f7;color:#1d1d1f}
.ban-list{padding:12px;max-height:500px;overflow-y:auto}
.ban-empty{text-align:center;color:#86868b;padding:40px 20px;font-size:14px}
.ban-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;margin-bottom:8px;background:#fafafa;border:1px solid #f0f0f0;transition:background .15s}
.ban-item:hover{background:#f5f5f7}
.ban-info{flex:1;min-width:0}
.ban-name{font-weight:700;color:#1d1d1f;font-size:14px}
.ban-meta{color:#86868b;font-size:11px;margin-top:2px}
.ban-unban-btn{padding:6px 14px;background:#34c759;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s;flex-shrink:0}
.ban-unban-btn:hover{background:#28a745}

/* QQ经典头像 */
.user-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#f0f0f0}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.msg-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;margin-right:8px;display:flex;align-items:center;justify-content:center;background:#f0f0f0}
.msg-avatar img{width:100%;height:100%;object-fit:cover}
.msg-row{display:flex;align-items:flex-start}
@media(max-width:700px){.title-center{display:none}.chat-window{border-radius:0}}

/* ===== 全浏览器兼容兜底 ===== */
/* 不支持backdrop-filter时用纯色背景（已在各元素中设置） */
/* flex布局兜底 */
.main-area{display:-webkit-box;display:-ms-flexbox;display:flex}
.chat-area{-webkit-box-flex:1;-ms-flex:1;flex:1}
.user-panel{-ms-flex-negative:0;flex-shrink:0}
.messages{-webkit-box-flex:1;-ms-flex:1;flex:1}
/* grid面板兜底为inline-block */
.color-panel{display:none}
.color-panel.show{display:grid;display:-ms-grid}
@supports not (display:grid){.color-panel.show{display:block}.color-cell{display:inline-block;margin:1px}}
.emoticon-panel{display:none}
.emoticon-panel.show{display:grid}
@supports not (display:grid){.emoticon-panel.show{display:block}.emoticon-item{display:inline-block}}
.bg-panel{display:none}
.bg-panel.show{display:grid}
@supports not (display:grid){.bg-panel.show{display:block}.bg-item{display:inline-block}}
/* 渐变兜底 */
.messages{background-color:#f5f5f7}
/* 动画兜底 */
@media (prefers-reduced-motion:reduce){.msg-row{animation:none}body::before,body::after{animation:none}}
/* 打印样式 */
@media print{.toolbar,.input-area,.user-panel,.status-bar,.menu-bar{display:none}.chat-window{box-shadow:none;border:1px solid #ccc}}

/* 私聊按钮 */
.user-whisper-btn{width:26px;height:26px;border:none;background:rgba(0,122,255,0.1);border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;margin-left:auto}
.user-whisper-btn:hover{background:#007aff;color:#fff;transform:scale(1.1)}
.user-item{position:relative}
/* @用户高亮 */
.mention{background:rgba(0,122,255,0.12);color:#007aff;padding:0 4px;border-radius:4px;font-weight:600;cursor:pointer}
.mention:hover{background:rgba(0,122,255,0.2)}
.mention-me{background:rgba(255,59,48,0.15);color:#ff3b30;animation:mentionPulse 1s ease}
@keyframes mentionPulse{0%{background:rgba(255,59,48,0.4)}100%{background:rgba(255,59,48,0.15)}}
/* 用户分组 */
.user-group-header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 4px;font-size:11px;font-weight:700;color:#86868b;letter-spacing:0.5px}
.user-group-header.offline{margin-top:6px;padding-top:10px;border-top:1px solid rgba(0,0,0,0.06)}
.user-group-count{background:rgba(0,0,0,0.08);color:#666;padding:0 7px;border-radius:8px;font-size:10px;font-weight:600}
/* 离线用户 */
.user-item.offline{opacity:0.55}
.user-item.offline .user-avatar{background:linear-gradient(135deg,#c7c7cc,#aeaeb2);filter:grayscale(0.5)}
.user-item.offline:hover{background:rgba(0,0,0,0.03)}
/* @按钮 */
.user-whisper-btn{width:24px;height:24px;border:none;background:rgba(0,122,255,0.1);border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;color:#007aff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;margin-left:auto}
.user-whisper-btn:hover{background:#007aff;color:#fff;transform:scale(1.1)}