:root{--qq-blue: #12b7f5;--qq-blue-dark: #0a9fd8;--qq-bg: #f2f3f5;--qq-panel: #ffffff;--qq-sidebar: #2e3238;--qq-sidebar-active: #3b4049;--qq-text: #1f2329;--qq-text-sub: #8a8f99;--qq-line: #e5e7eb;--qq-bubble-me: #12b7f5;--qq-bubble-other: #ffffff;--qq-danger: #f5222d;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Helvetica Neue,sans-serif;background:var(--qq-bg);color:var(--qq-text);font-size:15px;overscroll-behavior:none}#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}input,textarea{font-family:inherit;font-size:inherit}.auth-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#12b7f5,#0a9fd8 55%,#0b7fb0);padding:24px;gap:18px;position:relative;overflow:hidden}.auth-page:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#ffffff14;top:-140px;right:-120px}.auth-page:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:#ffffff0f;bottom:-100px;left:-80px}.auth-card{width:100%;max-width:380px;background:#fff;border-radius:18px;padding:30px 24px;box-shadow:0 18px 50px #00000038;position:relative;z-index:1}.auth-logo{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(135deg,#12b7f5,#0a9fd8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:700;box-shadow:0 8px 20px #12b7f566}.auth-title{text-align:center;font-size:21px;font-weight:600;margin:0 0 4px}.auth-sub{text-align:center;color:var(--qq-text-sub);font-size:13px;margin:0 0 22px}.field{margin-bottom:14px}.field label{display:block;font-size:13px;color:var(--qq-text-sub);margin-bottom:6px}.field input{width:100%;padding:13px 14px;border:1.5px solid var(--qq-line);border-radius:11px;outline:none;background:#fafbfc;transition:all .18s}.field input:focus{border-color:var(--qq-blue);background:#fff;box-shadow:0 0 0 3px #12b7f51f}.btn-primary{width:100%;padding:13px;border-radius:11px;background:var(--qq-blue);color:#fff;font-weight:600;font-size:16px;transition:all .18s}.btn-primary:active{transform:scale(.985)}.btn-primary:disabled{opacity:.55}.btn-ghost{width:100%;padding:12px;border-radius:11px;background:transparent;color:var(--qq-blue);font-weight:500}.auth-switch{text-align:center;margin-top:16px;font-size:14px;color:var(--qq-text-sub)}.auth-switch button{color:var(--qq-blue);font-weight:500}.auth-error{background:#fff1f0;border:1px solid #ffccc7;color:var(--qq-danger);padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:14px}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.topbar{height:52px;background:var(--qq-blue);color:#fff;display:flex;align-items:center;padding:0 12px;gap:10px;padding-top:var(--safe-top);flex-shrink:0;position:relative;z-index:20}.topbar-title{font-size:17px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;transition:background .15s;flex-shrink:0}.topbar-btn:active{background:#fff3}.topbar-badge{position:absolute;top:4px;right:4px;background:var(--qq-danger);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:68px}.list-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--qq-panel);border-bottom:1px solid var(--qq-line);transition:background .12s}.list-item:active{background:#f0f1f3}.avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:17px;overflow:hidden;background:linear-gradient(135deg,#12b7f5,#0a9fd8)}.avatar img{width:100%;height:100%;object-fit:cover}.avatar.sm{width:36px;height:36px;font-size:14px}.avatar.lg{width:64px;height:64px;font-size:24px}.online-dot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#52c41a;border:2px solid #fff}.item-main{flex:1;min-width:0}.item-name{font-weight:500;font-size:15.5px;display:flex;align-items:center;gap:6px}.item-name .tag{font-size:10px;padding:1px 5px;border-radius:4px;background:var(--qq-blue);color:#fff;font-weight:400}.item-name .tag.owner{background:#fa8c16}.item-name .tag.admin{background:#52c41a}.item-preview{color:var(--qq-text-sub);font-size:13px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-meta{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}.item-time{font-size:11.5px;color:var(--qq-text-sub)}.unread-badge{background:var(--qq-danger);color:#fff;font-size:11px;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}.unread-badge.muted{background:#c9ccd1}.group-title{padding:9px 14px;background:#eaebed;font-size:12.5px;color:var(--qq-text-sub);font-weight:500}.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--qq-text-sub);gap:10px;padding:40px 24px;text-align:center}.empty-icon{font-size:46px;opacity:.35}.empty-text{font-size:14px;line-height:1.6}.tabbar{position:fixed;bottom:0;left:0;right:0;height:58px;padding-bottom:var(--safe-bottom);background:#fffffff7;backdrop-filter:blur(12px);border-top:1px solid var(--qq-line);display:flex;z-index:30}.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;color:var(--qq-text-sub);position:relative}.tabbar-item.active{color:var(--qq-blue)}.tabbar-item .tab-icon{font-size:21px;line-height:1}.tabbar-item .tab-dot{position:absolute;top:5px;right:50%;margin-right:-20px;background:var(--qq-danger);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.chat-page{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--qq-bg)}.chat-body{flex:1;overflow-y:auto;padding:12px 12px 6px;-webkit-overflow-scrolling:touch}.msg-row{display:flex;gap:9px;margin-bottom:14px;align-items:flex-start}.msg-row.me{flex-direction:row-reverse}.msg-col{max-width:68%;display:flex;flex-direction:column}.msg-row.me .msg-col{align-items:flex-end}.msg-sender{font-size:11.5px;color:var(--qq-text-sub);margin-bottom:4px;padding:0 3px}.bubble{padding:9px 13px;border-radius:13px;background:var(--qq-bubble-other);word-break:break-word;white-space:pre-wrap;line-height:1.5;box-shadow:0 1px 2px #0000000f}.msg-row.me .bubble{background:var(--qq-bubble-me);color:#fff}.bubble img{max-width:100%;border-radius:9px;display:block}.bubble.file{display:flex;align-items:center;gap:10px;min-width:190px}.file-icon{font-size:26px}.file-info{min-width:0}.file-name{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:11.5px;color:var(--qq-text-sub)}.msg-row.me .file-size{color:#fffc}.msg-time{font-size:10.5px;color:#b6bac2;margin-top:4px;padding:0 3px}.sys-msg{text-align:center;font-size:12px;color:var(--qq-text-sub);margin:10px auto;background:#0000000b;padding:4px 11px;border-radius:9px;width:fit-content;max-width:82%}.date-sep{text-align:center;font-size:11.5px;color:var(--qq-text-sub);margin:12px 0;display:flex;align-items:center;gap:10px}.date-sep:before,.date-sep:after{content:"";flex:1;height:1px;background:var(--qq-line)}.typing-hint{font-size:12px;color:var(--qq-text-sub);padding:3px 12px 7px;min-height:22px;font-style:italic}.composer{background:var(--qq-panel);border-top:1px solid var(--qq-line);padding:8px 10px calc(8px + var(--safe-bottom));display:flex;gap:8px;align-items:flex-end;flex-shrink:0}.composer textarea{flex:1;border:none;outline:none;resize:none;padding:9px 12px;background:#f2f3f5;border-radius:18px;max-height:110px;min-height:38px;line-height:1.45;font-size:15px}.composer-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;transition:all .15s}.composer-btn.send{background:var(--qq-blue);color:#fff}.composer-btn.send:disabled{background:#d5d8dd;color:#fff}.composer-btn.plus{color:var(--qq-text-sub)}.composer-btn:active{transform:scale(.92)}.upload-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--qq-line);padding:10px 14px;z-index:40;font-size:13px;display:flex;align-items:center;gap:10px}.progress-track{flex:1;height:5px;background:#eef0f2;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--qq-blue);transition:width .2s}.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%);background:#000000d1;color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;z-index:100;max-width:84%;text-align:center;animation:toastIn .22s ease}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,8px)}}.toast.error{background:#f5222deb}.sheet-mask{position:fixed;inset:0;background:#0000006b;z-index:50;display:flex;align-items:flex-end;animation:fadeIn .18s}@keyframes fadeIn{0%{opacity:0}}.sheet{width:100%;background:#fff;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + var(--safe-bottom));max-height:76vh;overflow-y:auto;animation:slideUp .24s cubic-bezier(.2,.9,.3,1)}@keyframes slideUp{0%{transform:translateY(100%)}}.sheet-title{font-size:16px;font-weight:600;margin:0 0 14px;text-align:center}.sheet-action{padding:14px;text-align:center;border-radius:11px;font-size:15.5px;background:#f5f6f7;margin-bottom:8px;transition:background .12s}.sheet-action:active{background:#e9ebee}.sheet-action.danger{color:var(--qq-danger)}.sheet-action.cancel{background:#fff;border:1px solid var(--qq-line);margin-top:6px}.presence-text{font-size:11.5px;opacity:.9}.member-pick{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid var(--qq-line)}.checkbox{width:21px;height:21px;border-radius:50%;border:1.5px solid #ccd0d6;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:#fff}.checkbox.on{background:var(--qq-blue);border-color:var(--qq-blue)}@media(min-width:720px){.main{max-width:900px;margin:0 auto;width:100%}.tabbar{max-width:900px;left:50%;transform:translate(-50%)}.msg-col{max-width:58%}}