.group-item{height:50px;display:flex;position:relative;padding:5px 10px;align-items:center;white-space:nowrap;cursor:pointer}.group-item:hover{background-color:var(--im-background-active)}.group-item.active{background-color:var(--im-background-active-dark)}.group-item .group-name{padding-left:10px;height:100%;text-align:left;line-height:50px;white-space:nowrap;overflow:hidden;font-size:var(--im-font-size)}.friend-item{height:50px;display:flex;position:relative;padding:5px 10px;align-items:center;white-space:nowrap;cursor:pointer}.friend-item:hover{background-color:var(--im-background-active)}.friend-item.active{background-color:var(--im-background-active-dark)}.friend-item .friend-avatar{display:flex;justify-content:center;align-items:center}.friend-item .friend-info{flex:1;display:flex;flex-direction:column;padding-left:10px;text-align:left}.friend-item .friend-info .friend-name{font-size:var(--im-font-size);white-space:nowrap;overflow:hidden}.friend-item .friend-info .friend-online .online{font-weight:700;padding-right:2px;font-size:16px;position:relative}.friend-item .friend-info .friend-online .online-icon{position:absolute;right:0;bottom:0;width:6px;height:6px;background:#32cd32;border-radius:50%;border:1px solid #fff}.friend-page[data-v-11f7420c]{height:100%;background-color:#f5f7fa}.friend-page .page-header[data-v-11f7420c]{width:385px;height:56px;display:flex;align-items:center;justify-content:center;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.friend-page .page-header .notification[data-v-11f7420c]{display:flex;align-items:center;font-size:16px}.friend-page .page-header .notification .el-icon-message[data-v-11f7420c]{font-size:20px;margin-right:6px;color:#409eff}.friend-page .page-header .notification .notification-text[data-v-11f7420c]{margin-right:4px;color:#606266}.friend-page .page-header .notification .notification-badge .el-badge__content[data-v-11f7420c]{background-color:#f56c6c}.friend-page .friend-list-box[data-v-11f7420c]{background:#fff;border-radius:4px;margin:16px;box-shadow:0 1px 3px rgba(0,0,0,.1)}.friend-page .friend-list-box .friend-list-items[data-v-11f7420c]{padding:12px}.friend-page .friend-list-box .request-item[data-v-11f7420c]{padding:12px;background:#fafafa;border-radius:4px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;transition:background .3s}.friend-page .friend-list-box .request-item .group-tag[data-v-11f7420c]{white-space:nowrap;font-weight:500}.friend-page .friend-list-box .request-item[data-v-11f7420c]:hover{background:#f0f0f0}.friend-page .friend-list-box .request-item[data-v-11f7420c] .friend-item{flex:1}.friend-page .friend-list-box .request-actions[data-v-11f7420c]{display:flex;gap:8px}.group-page .search-results{margin-top:12px;max-height:300px;overflow-y:auto}.group-page .search-results .search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--el-border-color)}.group-page .search-results .search-result-item:last-child{border-bottom:none}.group-page .no-results{margin:16px 0;text-align:center}.group-page .group-list-box{display:flex;flex-direction:column;background:var(--im-background)}.group-page .group-list-box .friend-section{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--el-border-color)}.group-page .group-list-box .section-title{font-weight:500;font-size:14px}.group-page .group-list-box .section-badge{background-color:var(--el-color-primary);color:#fff}.group-page .group-list-box .el-badge__content{top:10px;right:20px}.group-page .group-list-box .no-qr{color:#909399;font-size:14px}.group-page .group-list-box .group-list-header{height:50px;display:flex;align-items:center;padding:0 8px}.group-page .group-list-box .group-list-header .add-btn{padding:5px!important;margin:5px;font-size:16px;border-radius:50%}.group-page .group-list-box .group-list-items .group-notification{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;margin-bottom:8px;border-radius:4px;cursor:pointer;transition:background-color .2s}.group-page .group-list-box .group-list-items .group-notification.active{background-color:#f0f9eb}.group-page .group-list-box .group-list-items .group-notification:hover{background-color:#f5f7fa}.group-page .group-list-box .group-list-items .group-notification .notification-left{display:flex;align-items:center}.group-page .group-list-box .group-list-items .group-notification .notification-left .notification-icon{font-size:18px;color:#409eff;margin-right:6px}.group-page .group-list-box .group-list-items .group-notification .notification-left .notification-text{font-size:14px;font-weight:500;color:#303133}.group-page .group-list-box .group-list-items .group-notification .notification-right{display:flex;align-items:center}.group-page .group-list-box .group-list-items .group-notification .notification-right .notification-badge{margin-right:6px}.group-page .group-list-box .group-list-items .group-notification .notification-right .notification-badge .el-badge__content{background-color:#f56c6c;color:#fff}.group-page .group-list-box .group-list-items .group-notification .notification-right .arrow-icon{transition:transform .2s}.group-page .group-list-box .group-list-items .group-notification .notification-right .arrow-icon.open{transform:rotate(90deg)}.group-page .group-box{display:flex;flex-direction:column}.group-page .group-box .group-header{display:flex;justify-content:space-between;padding:0 12px;line-height:50px;font-size:var(--im-font-size-larger);border-bottom:var(--im-border)}.group-page .group-box .el-divider--horizontal{margin:16px 0}.group-page .group-box .group-container{overflow:auto;padding:20px;flex:1}.group-page .group-box .group-container .group-info{display:flex;padding:5px 20px}.group-page .group-box .group-container .group-info .group-form{flex:1;padding-left:40px;max-width:700px}.group-page .group-box .group-container .group-info .avatar-uploader{--width:160px;text-align:left}.group-page .group-box .group-container .group-info .avatar-uploader .el-upload{border:1px dashed #d9d9d9!important;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.group-page .group-box .group-container .group-info .avatar-uploader .el-upload:hover{border-color:#409eff}.group-page .group-box .group-container .group-info .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:var(--width);height:var(--width);line-height:var(--width);text-align:center}.group-page .group-box .group-container .group-info .avatar-uploader .avatar{width:var(--width);height:var(--width);display:block}.group-page .group-box .group-container .group-info .send-btn{margin-top:12px}.group-page .group-box .group-container .group-member-list{padding:0 12px;display:flex;align-items:center;flex-wrap:wrap;text-align:center}.group-page .group-box .group-container .group-member-list .group-member{margin-right:5px}.group-page .group-box .group-container .group-member-list .group-invite{display:flex;flex-direction:column;align-items:center;width:60px}.group-page .group-box .group-container .group-member-list .group-invite .invite-member-btn{width:38px;height:38px;line-height:38px;border:var(--im-border);font-size:14px;cursor:pointer;box-sizing:border-box}.group-page .group-box .group-container .group-member-list .group-invite .invite-member-btn:hover{border:1px solid #aaa}.group-page .group-box .group-container .group-member-list .group-invite .invite-member-text{font-size:var(--im-font-size-smaller);text-align:center;width:100%;height:30px;line-height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}