/* QQ风格聊天通讯录 - 样式 */
#qq-chat-launcher{position:fixed;left:16px;top:12px;width:44px;height:44px;border-radius:50%;background:#2780e3;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.2);cursor:pointer;z-index:2147483647}
#qq-chat-launcher:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.24)}
#qq-chat-drawer{position:fixed;left:0;right:0;top:0;height:0;overflow:hidden;z-index:2147483646;transition:height .35s ease;pointer-events:none}
#qq-chat-drawer.open{height:60vh;pointer-events:auto}
.qq-chat-panel{height:100%;min-height:0;background:rgba(28,34,46,.96);color:#eaf1ff;backdrop-filter:blur(8px);display:grid;grid-template-columns:260px 1fr;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.qq-chat-panel *{pointer-events:auto}
.qq-sec-hd{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer;margin-top:6px}
.qq-sec-hd .qq-sec-title{font-size:13px;color:#eaf1ff}
.qq-sec-hd .qq-caret{margin-left:auto;transition:transform .2s ease;color:#aeb7c6}
.qq-sec-hd.collapsed .qq-caret{transform:rotate(-90deg)}
.qq-chat-contacts{border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px;padding:10px;position:relative;z-index:2147483645}
#qq-chat-search{width:100%;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eaf1ff;padding:0 10px;outline:none}
.qq-chat-toolbar{display:flex;gap:8px;align-items:center;margin:8px 0;position:relative;z-index:2147483646}
.qq-chat-toolbar input{flex:1;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eaf1ff;padding:0 10px;outline:none}
.qq-chat-toolbar button{height:42px;width:36px;border-radius:8px;border:0;padding:0 10px;color:#fff;cursor:pointer}
#qq-add-btn{background:#10b981}
#qq-del-btn{background:#ef4444}
/* 请求入口与红点 */
#qq-req-entry{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer}
#qq-req-entry:hover{background:rgba(255,255,255,.06)}
#qq-req-entry .qq-caret{margin-left:auto;transition:transform .2s ease;color:#aeb7c6}
#qq-req-entry.collapsed .qq-caret{transform:rotate(-90deg)}
.qq-badge{min-width:18px;height:18px;line-height:18px;border-radius:9px;background:#ff4d4f;color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
#qq-requests{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.qq-req-title{font-size:12px;color:#aeb7c6;margin:6px 0 0}
.qq-req-list{display:flex;flex-direction:column;gap:6px}
.qq-req-item{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.qq-req-item .avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#4b5563}
.qq-req-item .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qq-req-item .status{font-size:12px;color:#aeb7c6}
.qq-req-item .btn{height:26px;border-radius:6px;border:0;padding:0 10px;color:#fff;cursor:pointer}
.qq-req-accept{background:#2780e3}
.qq-req-reject{background:#ef4444}
#qq-contact-list,#qq-conv-list{list-style:none;margin:0;padding:0;overflow:auto}
.qq-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;position:relative;z-index:2147483645}
.qq-item:hover{background:rgba(255,255,255,.06)}
/* 会话删除图标 */
.qq-conv-del{margin-left:auto;font-size:14px;color:#aeb7c6;padding:0 6px;cursor:pointer}
.qq-conv-del:hover{color:#ff6b6b}
.qq-avatar{width:28px;height:28px;border-radius:50%;background:#4b5563;object-fit:cover}
.qq-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qq-unread{min-width:18px;height:18px;border-radius:9px;background:#ff4d4f;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.qq-chat-conv{display:grid;grid-template-rows:48px 1fr 64px;min-height:0}
.qq-chat-conv-header,.qq-chat-conv-input{display:flex;align-items:center;padding:0 12px}
.qq-chat-conv-header{border-bottom:1px solid rgba(255,255,255,.06)}
.qq-chat-conv-body{overflow-y:auto;padding:12px}
.qq-msg{margin:6px 0;display:flex;gap:8px;align-items:flex-end}
.qq-msg .qq-avatar-img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#4b5563}
.qq-msg .qq-bubble-wrap{max-width:80%;display:flex;flex-direction:column}
.qq-msg.me{justify-content:flex-end}
.qq-msg.me .qq-avatar-img{order:2}
.qq-msg.me .qq-bubble-wrap{order:1;align-items:flex-end}
.qq-bubble{max-width:100%;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.qq-msg.me .qq-bubble{background:#2780e3;border-color:#2780e3;color:#fff}
#qq-chat-input{flex:1;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eaf1ff;padding:8px 10px;outline:none;resize:none}
#qq-chat-send{margin-left:8px;height:42px;padding:0 14px;border-radius:10px;border:0;background:#2780e3;color:#fff;cursor:pointer;position:relative;z-index:2147483647}
#qq-chat-send:disabled{opacity:.6;cursor:not-allowed}
#qq-chat-upload{margin-right:8px;height:36px;width:36px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eaf1ff;cursor:pointer;display:flex;align-items:center;justify-content:center}
#qq-chat-upload:hover{background:rgba(255,255,255,.12)}
.qq-chat-conv-input #qq-chat-emoji,.qq-chat-conv-input #qq-chat-sticker{margin-right:8px;height:36px;width:36px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#eaf1ff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qq-chat-conv-input #qq-chat-emoji:hover,.qq-chat-conv-input #qq-chat-sticker:hover{background:rgba(255,255,255,.12)}
.qq-image{max-width:52vw;max-height:40vh;border-radius:10px;display:block}
.qq-sticker{max-width:36vw;max-height:36vh;border-radius:10px;display:block}
.qq-file{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:8px;color:#eaf1ff;text-decoration:none}
.qq-file:hover{text-decoration:underline}
@media (max-width:768px){.qq-chat-panel{grid-template-columns:1fr}}

/* Lightbox */
#qq-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2147483647;align-items:center;justify-content:center;cursor:zoom-out}
#qq-lightbox .qq-lightbox-inner{max-width:92vw;max-height:92vh;display:flex;align-items:center;justify-content:center;padding:2vh}
#qq-lightbox .qq-lightbox-inner img{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* Emoji & Sticker Panels */
.qq-panel{position:absolute;right:12px;bottom:72px;width:320px;max-height:220px;overflow:auto;background:rgba(28,34,46,.98);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:2147483646}
.qq-panel-inner{padding:8px}
.qq-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.qq-emoji-item{height:36px;width:36px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}
.qq-emoji-item:hover{background:rgba(255,255,255,.12)}
.qq-tabs{display:flex;gap:6px;margin-bottom:8px}
.qq-tab{padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;color:#eaf1ff;font-size:12px}
.qq-tab.active{background:#2780e3;border-color:#2780e3}
.qq-packs{display:block}
.qq-pack{display:none;gap:8px;flex-wrap:wrap}
.qq-pack.active{display:flex}
.qq-sticker-item{height:72px;width:72px;border-radius:8px;border:1px solid rgba(255,255,255,.12);object-fit:cover;background:#111;cursor:pointer}

/* Drawer resizer */
#qq-chat-resizer{position:fixed;left:0;right:0;top:60vh;height:10px;cursor:ns-resize;z-index:2147483647;display:none}
#qq-chat-drawer.open + #qq-chat-resizer{display:block}
body.qq-resizing{cursor:ns-resize}

/* Toast */
#qq-toast-box{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:2147483647;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.qq-toast{min-width:200px;max-width:64vw;padding:10px 14px;border-radius:10px;background:rgba(30,41,59,.92);border:1px solid rgba(255,255,255,.12);color:#eaf1ff;opacity:0;transform:translateY(-6px);transition:all .18s ease;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.qq-toast.show{opacity:1;transform:translateY(0)}
.qq-toast.info{background:rgba(37,99,235,.92);border-color:rgba(37,99,235,.92)}
.qq-toast.warning{background:rgba(234,179,8,.92);border-color:rgba(234,179,8,.92);color:#1f2937}
.qq-toast.error{background:rgba(239,68,68,.92);border-color:rgba(239,68,68,.92)}

/* Profile Card */
#qq-profile-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2147483647;align-items:center;justify-content:center}
#qq-profile-mask .qq-profile{width:320px;max-width:92vw;border-radius:12px;background:rgba(28,34,46,.98);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.35);padding:12px}
#qq-profile-mask .qq-profile-hd{display:flex;align-items:center;gap:10px;position:relative}
#qq-profile-mask .qq-profile-hd .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#4b5563}
#qq-profile-mask .qq-profile-hd .meta{display:flex;flex-direction:column}
#qq-profile-mask .qq-profile-hd .name{font-size:16px;color:#eaf1ff}
#qq-profile-mask .qq-profile-hd .sub{font-size:12px;color:#aeb7c6}
#qq-profile-mask .qq-profile-hd .close{position:absolute;right:6px;top:0;cursor:pointer;color:#aeb7c6}
#qq-profile-mask .qq-profile-extra{margin-top:10px;display:flex;flex-direction:column;gap:6px}
#qq-profile-mask .qq-profile-extra .row{display:flex;gap:8px;align-items:flex-start}
#qq-profile-mask .qq-profile-extra .row .k{min-width:56px;font-size:12px;color:#aeb7c6}
#qq-profile-mask .qq-profile-extra .row .v{flex:1;font-size:13px;color:#eaf1ff;word-break:break-all}
#qq-profile-mask .qq-profile-actions{display:flex;gap:8px;margin-top:12px}
#qq-profile-mask .qq-profile-actions button{flex:1;height:36px;border-radius:8px;border:0;background:#2780e3;color:#fff;cursor:pointer}
#qq-profile-mask .qq-profile-actions [data-act="remove"]{background:#ef4444}