vue-chat-kit 0.3.7 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -4
- package/dist/vue-chat-kit.css +1 -1
- package/dist/vue-chat-kit.es.js +3392 -2122
- package/dist/vue-chat-kit.umd.js +1 -1
- package/package.json +1 -1
- package/src/components/ChatPanel.vue +1570 -57
- package/src/components/EmojiPicker.vue +197 -0
- package/src/composables/useChat.js +157 -613
- package/src/composables/useChatCore.js +207 -0
- package/src/composables/useFriendChat.js +423 -0
- package/src/composables/useGroupChat.js +748 -0
- package/src/config/index.js +21 -4
- package/src/core/adapter-example.js +90 -20
- package/src/core/api.js +189 -13
- package/src/core/websocket.js +25 -9
- package/src/index.js +0 -4
- package/src/components/ChatWindow.vue +0 -2094
package/README.md
CHANGED
|
@@ -168,8 +168,6 @@ const chatConfig = createChatConfig({
|
|
|
168
168
|
agreeFriend: '/your-custom-path/agree',
|
|
169
169
|
setChatStatus: '/your-custom-path/chat-status',
|
|
170
170
|
getAvailableUsers: '/your-custom-path/available-users',
|
|
171
|
-
getUserInfo: '/your-custom-path/user-info',
|
|
172
|
-
updateUserInfo: '/your-custom-path/update-info',
|
|
173
171
|
getUserAvatar: '/your-custom-path/avatar',
|
|
174
172
|
uploadAvatar: '/your-custom-path/avatar-upload'
|
|
175
173
|
}
|
|
@@ -198,8 +196,6 @@ const customAdapter = {
|
|
|
198
196
|
async setChatStatus(currentUser, friendUser, status) { /* ... */ },
|
|
199
197
|
|
|
200
198
|
// ==================== 用户相关 ====================
|
|
201
|
-
async getUserInfo(username) { /* ... */ },
|
|
202
|
-
async updateUserInfo(username, data) { /* ... */ },
|
|
203
199
|
async getUserAvatar(username) { /* ... */ },
|
|
204
200
|
async uploadAvatar(file, username) { /* ... */ },
|
|
205
201
|
}
|
package/dist/vue-chat-kit.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,*:before,*:after{box-sizing:border-box}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}::-webkit-scrollbar-track{background:transparent}.avatar-crop-container[data-v-594eeaf3]{min-height:200px}.crop-wrapper[data-v-594eeaf3]{display:flex;flex-direction:column;gap:16px}.crop-area[data-v-594eeaf3]{position:relative;overflow:hidden;background:#f5f7fa;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid #e4e7ed}.crop-box[data-v-594eeaf3]{position:absolute;border:2px solid #409eff;box-shadow:0 0 0 9999px #00000080;cursor:move;box-sizing:border-box}.crop-handle[data-v-594eeaf3]{position:absolute;width:14px;height:14px;background:#409eff;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003}.crop-handle.nw[data-v-594eeaf3]{top:-7px;left:-7px;cursor:nw-resize}.crop-handle.n[data-v-594eeaf3]{top:-7px;left:50%;transform:translate(-50%);cursor:n-resize}.crop-handle.ne[data-v-594eeaf3]{top:-7px;right:-7px;cursor:ne-resize}.crop-handle.e[data-v-594eeaf3]{right:-7px;top:50%;transform:translateY(-50%);cursor:e-resize}.crop-handle.se[data-v-594eeaf3]{bottom:-7px;right:-7px;cursor:se-resize}.crop-handle.s[data-v-594eeaf3]{bottom:-7px;left:50%;transform:translate(-50%);cursor:s-resize}.crop-handle.sw[data-v-594eeaf3]{bottom:-7px;left:-7px;cursor:sw-resize}.crop-handle.w[data-v-594eeaf3]{left:-7px;top:50%;transform:translateY(-50%);cursor:w-resize}.preview-wrapper[data-v-594eeaf3]{display:flex;align-items:center;justify-content:center;gap:16px}.preview-label[data-v-594eeaf3]{font-size:14px;color:#606266;font-weight:500}.preview-box[data-v-594eeaf3]{border-radius:50%;overflow:hidden;border:3px solid #e4e7ed;background:#fff;box-shadow:0 2px 8px #0000001a}.preview-canvas[data-v-594eeaf3]{display:block;width:100%;height:100%}.dialog-footer[data-v-594eeaf3]{display:flex;justify-content:center;gap:12px}.chat-panel[data-v-c08932e1]{display:flex;height:680px;background-color:#fff;overflow:hidden;border-radius:12px;box-shadow:0 4px 20px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chat-sidebar[data-v-c08932e1]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-c08932e1]{margin-top:16px;margin-bottom:16px;cursor:pointer}.sidebar-avatar-img[data-v-c08932e1]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb;object-fit:cover}.sidebar-nav-item[data-v-c08932e1]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .2s;position:relative}.sidebar-nav-item-active[data-v-c08932e1]{background-color:#dcfce7;color:#07c160}.sidebar-nav-item-inactive[data-v-c08932e1]{color:#6b7280}.sidebar-nav-item-inactive[data-v-c08932e1]:hover{background-color:#f3f4f6}.sidebar-nav-badge[data-v-c08932e1]{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background-color:#ef4444;border-radius:50%;font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center}.sidebar-spacer[data-v-c08932e1]{flex:1}.chat-content-panel[data-v-c08932e1]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-search-bar[data-v-c08932e1]{padding:12px}.chat-search-input[data-v-c08932e1]{width:100%}.chat-content-scroll[data-v-c08932e1]{flex:1;overflow-y:auto;min-height:0}.chat-list-item[data-v-c08932e1]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-list-item[data-v-c08932e1]:hover{background-color:#e5e5e5}.chat-list-item-active[data-v-c08932e1]{background-color:#d6d6d6}.chat-list-avatar-wrapper[data-v-c08932e1]{position:relative;flex-shrink:0}.chat-list-avatar[data-v-c08932e1]{width:44px;height:44px;border-radius:50%;object-fit:cover}.chat-list-online-indicator[data-v-c08932e1]{position:absolute;bottom:0;right:0;width:12px;height:12px;background-color:#22c55e;border-radius:50%;border:2px solid white}.chat-list-online-indicator.chat-list-offline[data-v-c08932e1]{background-color:#9ca3af}.chat-list-info[data-v-c08932e1]{margin-left:12px;flex:1;overflow:hidden}.chat-list-header[data-v-c08932e1]{display:flex;justify-content:space-between;align-items:center}.chat-list-name[data-v-c08932e1]{font-weight:500;color:#1f2937;font-size:14px}.chat-list-time[data-v-c08932e1]{font-size:12px;color:#9ca3af}.chat-list-preview[data-v-c08932e1]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.chat-list-last-msg[data-v-c08932e1]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.chat-list-unread[data-v-c08932e1]{background-color:#ef4444;color:#fff;font-size:10px;border-radius:9999px;padding:2px 6px;min-width:18px;min-height:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1}.add-friend-section[data-v-c08932e1]{padding:12px}.add-friend-btn[data-v-c08932e1]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-c08932e1]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-c08932e1]{width:44px;height:44px;background-color:#07c160;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-c08932e1]{font-size:14px;color:#1f2937}.friend-request-item[data-v-c08932e1]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-c08932e1]:hover{background-color:#e5e5e5}.friend-request-info[data-v-c08932e1]{display:flex;align-items:center}.friend-request-avatar[data-v-c08932e1]{width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-request-details[data-v-c08932e1]{margin-left:12px}.friend-request-username[data-v-c08932e1]{font-weight:500;color:#1f2937;font-size:14px}.friend-request-desc[data-v-c08932e1]{font-size:12px;color:#6b7280;margin-top:4px}.chat-main-area[data-v-c08932e1]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile-area[data-v-c08932e1]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-c08932e1]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-c08932e1]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-c08932e1]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.profile-status-dot[data-v-c08932e1]{width:8px;height:8px;border-radius:50%}.profile-status-online[data-v-c08932e1]{background-color:#22c55e}.profile-status-offline[data-v-c08932e1]{background-color:#9ca3af}.profile-start-chat-btn[data-v-c08932e1]{width:160px}.chat-window-area[data-v-c08932e1]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window-header[data-v-c08932e1]{height:56px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background-color:#fff}.chat-window-title[data-v-c08932e1]{display:flex;align-items:center;gap:12px}.chat-window-name[data-v-c08932e1]{font-weight:500;color:#1f2937}.chat-window-status[data-v-c08932e1]{font-size:12px;padding:2px 8px;border-radius:4px}.chat-window-status-online[data-v-c08932e1]{background-color:#dcfce7;color:#16a34a}.chat-window-status-offline[data-v-c08932e1]{background-color:#f3f4f6;color:#6b7280}.chat-window-actions[data-v-c08932e1]{display:flex;align-items:center;gap:12px;color:#6b7280}.chat-action-icon[data-v-c08932e1]{cursor:pointer}.chat-action-icon[data-v-c08932e1]:hover{color:#374151}.chat-messages-container[data-v-c08932e1]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.chat-messages-container[data-v-c08932e1]::-webkit-scrollbar{width:6px}.chat-messages-container[data-v-c08932e1]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.chat-messages-container[data-v-c08932e1]::-webkit-scrollbar-track{background:transparent}.message-wrapper[data-v-c08932e1]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-c08932e1]{flex-direction:row-reverse}.message-other[data-v-c08932e1]{flex-direction:row}.message-avatar[data-v-c08932e1]{flex-shrink:0}.message-avatar-img[data-v-c08932e1]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content[data-v-c08932e1]{display:flex;flex-direction:column;max-width:75%}.message-content-self[data-v-c08932e1]{margin-right:12px;align-items:flex-end}.message-content-other[data-v-c08932e1]{margin-left:12px;align-items:flex-start}.message-sender-name[data-v-c08932e1]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-c08932e1]{position:relative}.message-bubble[data-v-c08932e1]{padding:8px 12px;font-size:14px;word-break:break-all;white-space:pre-wrap;border-radius:8px;box-shadow:0 1px 2px #0000000d}.message-bubble-self[data-v-c08932e1]{background-color:#95ec69;color:#1f2937;position:relative}.message-bubble-self[data-v-c08932e1]:after{content:"";position:absolute;right:-5px;top:10px;width:10px;height:10px;background-color:#95ec69;transform:rotate(45deg);box-shadow:2px -2px 2px #0000000d}.message-bubble-other[data-v-c08932e1]{background-color:#fff;color:#1f2937;position:relative}.message-bubble-other[data-v-c08932e1]:after{content:"";position:absolute;left:-5px;top:10px;width:10px;height:10px;background-color:#fff;transform:rotate(45deg);box-shadow:-2px 2px 2px #0000000d}.message-image-bubble[data-v-c08932e1]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px;padding:0}.message-image[data-v-c08932e1]{width:100%;height:auto;display:block}.message-image-size[data-v-c08932e1]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.message-file-bubble[data-v-c08932e1]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.message-file-content[data-v-c08932e1]{display:flex;align-items:center;gap:12px;padding:12px 16px}.message-file-icon[data-v-c08932e1]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.message-bubble-self .message-file-icon[data-v-c08932e1]{color:#374151}.message-bubble-other .message-file-icon[data-v-c08932e1]{color:#6b7280}.message-file-info[data-v-c08932e1]{flex:1;min-width:0}.message-file-name[data-v-c08932e1]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.message-bubble-self .message-file-name[data-v-c08932e1],.message-bubble-other .message-file-name[data-v-c08932e1]{color:#1f2937}.message-file-meta[data-v-c08932e1]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.message-bubble-self .message-file-meta[data-v-c08932e1]{color:#4b5563}.message-bubble-other .message-file-meta[data-v-c08932e1]{color:#6b7280}.message-time[data-v-c08932e1]{font-size:10px;color:#9ca3af;margin-top:4px}.message-time-right[data-v-c08932e1]{text-align:right}.message-time-left[data-v-c08932e1]{text-align:left}.chat-input-area[data-v-c08932e1]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files-area[data-v-c08932e1]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file-item[data-v-c08932e1]{position:relative}.pending-image-wrapper[data-v-c08932e1]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-c08932e1]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-c08932e1]{position:relative;width:96px;height:80px;border-radius:8px;border:1px solid #e5e7eb;background-color:#f9fafb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}.pending-file-icon[data-v-c08932e1]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-c08932e1]{font-size:10px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;padding:0 4px}.pending-file-remove-btn[data-v-c08932e1]{position:absolute;top:4px;right:4px;width:20px;height:20px;background-color:#00000080;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;font-size:14px;border:none}.pending-file-remove-btn[data-v-c08932e1]:hover{background-color:#000000b3}.input-toolbar[data-v-c08932e1]{display:flex;align-items:center;padding:12px;gap:8px}.input-toolbar-icon[data-v-c08932e1]{color:#6b7280;cursor:pointer;font-size:20px}.input-toolbar-icon[data-v-c08932e1]:hover{color:#374151}.input-textarea-wrapper[data-v-c08932e1]{padding:0 12px 12px}.message-input-textarea[data-v-c08932e1]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px;font-family:inherit}.input-send-wrapper[data-v-c08932e1]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-message-btn[data-v-c08932e1]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-message-btn[data-v-c08932e1]:hover{background-color:#06ad56}.hidden-file-input[data-v-c08932e1]{display:none}.chat-empty-state[data-v-c08932e1]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-state-icon[data-v-c08932e1]{color:#d1d5db;margin-bottom:8px}.empty-state-text[data-v-c08932e1]{color:#9ca3af;font-size:14px}.chat-detail-panel[data-v-c08932e1]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-detail-header[data-v-c08932e1]{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e5e7eb;font-weight:500;color:#374151;font-size:14px}.chat-detail-content[data-v-c08932e1]{flex:1;padding:16px}.chat-detail-profile[data-v-c08932e1]{display:flex;flex-direction:column;align-items:center}.chat-detail-avatar[data-v-c08932e1]{width:80px;height:80px;border-radius:50%;object-fit:cover}.chat-detail-name[data-v-c08932e1]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.chat-detail-actions[data-v-c08932e1]{margin-top:24px;width:100%}.chat-detail-action-item[data-v-c08932e1]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff;font-size:14px;color:#374151}.chat-detail-action-item[data-v-c08932e1]:hover{background-color:#f9fafb}.chat-detail-action-item[data-v-c08932e1]:first-child{border-radius:8px 8px 0 0}.chat-detail-action-item[data-v-c08932e1]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.add-friend-search-wrapper[data-v-c08932e1]{margin-bottom:16px}.add-friend-search-input[data-v-c08932e1]{width:100%}.add-friend-users-list[data-v-c08932e1]{max-height:400px;overflow-y:auto}.add-friend-user-item[data-v-c08932e1]{display:flex;align-items:center;justify-content:space-between;padding:12px;margin-bottom:8px;border-radius:8px;transition:background-color .2s}.add-friend-user-item[data-v-c08932e1]:hover{background-color:#f9fafb}.add-friend-user-info[data-v-c08932e1]{display:flex;align-items:center}.add-friend-user-avatar[data-v-c08932e1]{width:40px;height:40px;border-radius:50%;object-fit:cover}.add-friend-user-name[data-v-c08932e1]{margin-left:12px;font-weight:500;color:#1f2937;font-size:14px}.chat-settings-dialog[data-v-c08932e1] .el-dialog{border-radius:16px;overflow:hidden}.chat-settings-dialog[data-v-c08932e1] .el-dialog__header{padding:24px 24px 0;margin:0}.chat-settings-dialog[data-v-c08932e1] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-settings-container[data-v-c08932e1]{display:flex;flex-direction:column}.chat-settings-avatar-section[data-v-c08932e1]{display:flex;flex-direction:column;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #f3f4f6}.chat-settings-avatar-wrapper[data-v-c08932e1]{position:relative;margin-bottom:16px}.chat-settings-avatar[data-v-c08932e1]{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 10px 15px -3px #0000001a}.chat-settings-avatar-edit[data-v-c08932e1]{position:absolute;bottom:-4px;right:-4px;width:40px;height:40px;background-color:#07c160;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;box-shadow:0 4px 6px -1px #0000001a}.chat-settings-avatar-edit[data-v-c08932e1]:hover{background-color:#06ad56}.chat-settings-avatar-icon[data-v-c08932e1]{color:#fff}.hidden-avatar-input[data-v-c08932e1]{display:none}.chat-settings-user-display[data-v-c08932e1]{text-align:center}.chat-settings-nickname[data-v-c08932e1]{font-weight:600;color:#1f2937;font-size:20px}.chat-settings-username[data-v-c08932e1]{font-size:14px;color:#6b7280;margin-top:4px}.chat-settings-form-section[data-v-c08932e1]{gap:20px}.chat-settings-form-header[data-v-c08932e1]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chat-settings-form-title[data-v-c08932e1]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}.chat-settings-edit-btn[data-v-c08932e1]{border-radius:9999px}.chat-settings-form[data-v-c08932e1]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.chat-settings-form-item[data-v-c08932e1]{display:flex;flex-direction:column}.chat-settings-form-label[data-v-c08932e1]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.chat-settings-form-value[data-v-c08932e1]{color:#1f2937;background-color:#fff;border-radius:8px;padding:12px 16px;border:1px solid #e5e7eb;font-size:14px}.chat-settings-form-value.bio-value[data-v-c08932e1]{min-height:80px}.chat-settings-form-actions[data-v-c08932e1]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.chat-context-menu[data-v-c08932e1]{position:fixed;background-color:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;padding:4px 0;z-index:1000}.chat-context-menu-item[data-v-c08932e1]{padding:8px 16px;cursor:pointer;font-size:14px;color:#374151}.chat-context-menu-item[data-v-c08932e1]:hover{background-color:#f3f4f6}.chat-dialog[data-v-a76a4ef3] .el-dialog{padding:0;border-radius:12px;overflow:hidden}.chat-dialog[data-v-a76a4ef3] .el-dialog__header{display:none}.chat-dialog[data-v-a76a4ef3] .el-dialog__body{padding:0}.bubble-self[data-v-a76a4ef3]{position:relative;background-color:#95ec69!important}.bubble-self[data-v-a76a4ef3]:after{content:"";position:absolute;right:-5px;top:10px;width:10px;height:10px;background-color:#95ec69;transform:rotate(45deg);box-shadow:2px -2px 2px #0000000d}.bubble-other[data-v-a76a4ef3]{position:relative;background-color:#fff!important}.bubble-other[data-v-a76a4ef3]:after{content:"";position:absolute;left:-5px;top:10px;width:10px;height:10px;background-color:#fff;transform:rotate(45deg);box-shadow:-2px 2px 2px #0000000d}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar{width:6px}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.messages-container[data-v-a76a4ef3]::-webkit-scrollbar-track{background:transparent}.settings-dialog[data-v-a76a4ef3] .el-dialog{border-radius:16px;overflow:hidden}.settings-dialog[data-v-a76a4ef3] .el-dialog__header{padding:24px 24px 0;margin:0}.settings-dialog[data-v-a76a4ef3] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-container[data-v-a76a4ef3]{display:flex;height:680px;background-color:#fff;overflow:hidden}.sidebar-nav[data-v-a76a4ef3]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-a76a4ef3]{margin-top:16px;margin-bottom:16px;cursor:pointer}.avatar-img[data-v-a76a4ef3]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb}.nav-item[data-v-a76a4ef3]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .2s;position:relative}.nav-item-active[data-v-a76a4ef3]{background-color:#f0fdf4;color:#16a34a}.nav-item-inactive[data-v-a76a4ef3]{color:#6b7280}.nav-item-inactive[data-v-a76a4ef3]:hover{background-color:#f3f4f6}.nav-badge[data-v-a76a4ef3]{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background-color:#ef4444;border-radius:50%;font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center}.nav-spacer[data-v-a76a4ef3]{flex:1}.content-panel[data-v-a76a4ef3]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.search-bar[data-v-a76a4ef3]{padding:12px}.content-scroll[data-v-a76a4ef3]{flex:1;overflow-y:auto;min-height:0}.chat-item[data-v-a76a4ef3]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-item[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.chat-item-active[data-v-a76a4ef3]{background-color:#d6d6d6}.friend-avatar-wrapper[data-v-a76a4ef3]{position:relative;flex-shrink:0}.friend-avatar[data-v-a76a4ef3]{width:44px;height:44px;border-radius:50%;object-fit:cover}.online-indicator[data-v-a76a4ef3]{position:absolute;bottom:0;right:0;width:12px;height:12px;background-color:#22c55e;border-radius:50%;border:2px solid white}.online-indicator.offline[data-v-a76a4ef3]{background-color:#9ca3af}.friend-info[data-v-a76a4ef3]{margin-left:12px;flex:1;overflow:hidden}.friend-header[data-v-a76a4ef3]{display:flex;justify-content:space-between;align-items:center}.friend-name[data-v-a76a4ef3]{font-weight:500;color:#1f2937;font-size:14px}.last-time[data-v-a76a4ef3]{font-size:12px;color:#9ca3af}.friend-preview[data-v-a76a4ef3]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.last-msg[data-v-a76a4ef3]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.unread-badge[data-v-a76a4ef3]{background-color:#ef4444;color:#fff;font-size:10px;border-radius:9999px;padding:2px 6px;min-width:18px;text-align:center}.add-friend-section[data-v-a76a4ef3]{padding:12px}.add-friend-btn[data-v-a76a4ef3]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-a76a4ef3]{width:44px;height:44px;background-color:#22c55e;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-a76a4ef3]{font-size:14px;color:#1f2937}.friend-request-item[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-a76a4ef3]:hover{background-color:#e5e5e5}.request-info[data-v-a76a4ef3]{display:flex;align-items:center}.request-avatar[data-v-a76a4ef3]{width:44px;height:44px;border-radius:50%;object-fit:cover}.request-details[data-v-a76a4ef3]{margin-left:12px}.request-username[data-v-a76a4ef3]{font-weight:500;color:#1f2937;font-size:14px}.request-desc[data-v-a76a4ef3]{font-size:12px;color:#6b7280;margin-top:4px}.chat-area[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-a76a4ef3]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-a76a4ef3]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-a76a4ef3]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.status-dot[data-v-a76a4ef3]{width:8px;height:8px;border-radius:50%}.status-online[data-v-a76a4ef3]{background-color:#22c55e}.status-offline[data-v-a76a4ef3]{background-color:#9ca3af}.start-chat-btn[data-v-a76a4ef3]{width:160px}.chat-window[data-v-a76a4ef3]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-header[data-v-a76a4ef3]{height:56px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background-color:#fff}.chat-title[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px}.chat-name[data-v-a76a4ef3]{font-weight:500;color:#1f2937}.status-badge[data-v-a76a4ef3]{font-size:12px;padding:2px 8px;border-radius:4px}.status-badge-online[data-v-a76a4ef3]{background-color:#dcfce7;color:#16a34a}.status-badge-offline[data-v-a76a4ef3]{background-color:#f3f4f6;color:#6b7280}.chat-actions[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px;color:#6b7280}.action-icon[data-v-a76a4ef3]{cursor:pointer}.action-icon[data-v-a76a4ef3]:hover{color:#374151}.messages-container[data-v-a76a4ef3]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.message-wrapper[data-v-a76a4ef3]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-a76a4ef3]{flex-direction:row-reverse}.message-other[data-v-a76a4ef3]{flex-direction:row}.message-avatar[data-v-a76a4ef3]{flex-shrink:0}.avatar-sm[data-v-a76a4ef3]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content-wrapper[data-v-a76a4ef3]{display:flex;flex-direction:column;max-width:75%}.content-self[data-v-a76a4ef3]{margin-right:12px;align-items:flex-end}.content-other[data-v-a76a4ef3]{margin-left:12px;align-items:flex-start}.sender-name[data-v-a76a4ef3]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-a76a4ef3]{position:relative}.message-bubble[data-v-a76a4ef3]{padding:8px 12px;font-size:14px;word-break:break-all;white-space:pre-wrap;border-radius:8px;box-shadow:0 1px 2px #0000000d}.image-bubble[data-v-a76a4ef3]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px}.message-image[data-v-a76a4ef3]{width:100%;height:auto;display:block}.image-size[data-v-a76a4ef3]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.file-bubble[data-v-a76a4ef3]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.file-content[data-v-a76a4ef3]{display:flex;align-items:center;gap:12px;padding:12px 16px}.file-icon[data-v-a76a4ef3]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.bubble-self .file-icon[data-v-a76a4ef3]{color:#374151}.bubble-other .file-icon[data-v-a76a4ef3]{color:#6b7280}.file-info[data-v-a76a4ef3]{flex:1;min-width:0}.file-name[data-v-a76a4ef3]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.bubble-self .file-name[data-v-a76a4ef3],.bubble-other .file-name[data-v-a76a4ef3]{color:#1f2937}.file-meta[data-v-a76a4ef3]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.bubble-self .file-meta[data-v-a76a4ef3]{color:#4b5563}.bubble-other .file-meta[data-v-a76a4ef3]{color:#6b7280}.message-time[data-v-a76a4ef3]{font-size:10px;color:#9ca3af;margin-top:4px}.time-right[data-v-a76a4ef3]{text-align:right}.time-left[data-v-a76a4ef3]{text-align:left}.input-area[data-v-a76a4ef3]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files[data-v-a76a4ef3]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file[data-v-a76a4ef3]{position:relative}.pending-image-wrapper[data-v-a76a4ef3]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-a76a4ef3]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-a76a4ef3]{position:relative;width:96px;height:80px;border-radius:8px;border:1px solid #e5e7eb;background-color:#f9fafb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}.pending-file-icon[data-v-a76a4ef3]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-a76a4ef3]{font-size:10px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;padding:0 4px}.remove-file-btn[data-v-a76a4ef3]{position:absolute;top:4px;right:4px;width:20px;height:20px;background-color:#00000080;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;font-size:14px;border:none}.remove-file-btn[data-v-a76a4ef3]:hover{background-color:#000000b3}.input-actions[data-v-a76a4ef3]{display:flex;align-items:center;padding:12px;gap:8px}.input-wrapper[data-v-a76a4ef3]{padding:0 12px 12px}.message-input[data-v-a76a4ef3]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px}.send-btn-wrapper[data-v-a76a4ef3]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-btn[data-v-a76a4ef3]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-btn[data-v-a76a4ef3]:hover{background-color:#06ad56}.hidden-file-input[data-v-a76a4ef3]{display:none}.empty-state[data-v-a76a4ef3]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-icon[data-v-a76a4ef3]{color:#d1d5db;margin-bottom:8px}.empty-text[data-v-a76a4ef3]{color:#9ca3af}.detail-panel[data-v-a76a4ef3]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.detail-header[data-v-a76a4ef3]{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #e5e7eb;font-weight:500;color:#374151}.detail-content[data-v-a76a4ef3]{flex:1;padding:16px}.detail-profile[data-v-a76a4ef3]{display:flex;flex-direction:column;align-items:center}.detail-avatar[data-v-a76a4ef3]{width:80px;height:80px;border-radius:50%;object-fit:cover}.detail-name[data-v-a76a4ef3]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.detail-actions[data-v-a76a4ef3]{margin-top:24px;width:100%}.detail-action-item[data-v-a76a4ef3]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff}.detail-action-item[data-v-a76a4ef3]:hover{background-color:#f9fafb}.detail-action-item[data-v-a76a4ef3]:first-child{border-radius:8px 8px 0 0}.detail-action-item[data-v-a76a4ef3]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.search-users-wrapper[data-v-a76a4ef3]{margin-bottom:16px}.search-users-input[data-v-a76a4ef3]{position:relative}.users-list-scroll[data-v-a76a4ef3]{max-height:400px;overflow-y:auto}.available-user-item[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;padding:12px;margin-bottom:8px;border-radius:8px;transition:background-color .2s}.available-user-item[data-v-a76a4ef3]:hover{background-color:#f9fafb}.available-user-info[data-v-a76a4ef3]{display:flex;align-items:center}.available-user-avatar[data-v-a76a4ef3]{width:40px;height:40px;border-radius:50%;object-fit:cover}.available-user-name[data-v-a76a4ef3]{margin-left:12px;font-weight:500;color:#1f2937}.settings-container[data-v-a76a4ef3]{display:flex;flex-direction:column}.settings-avatar-section[data-v-a76a4ef3]{display:flex;flex-direction:column;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #f3f4f6}.settings-avatar-wrapper[data-v-a76a4ef3]{position:relative;margin-bottom:16px}.settings-avatar[data-v-a76a4ef3]{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 10px 15px -3px #0000001a}.settings-avatar-edit[data-v-a76a4ef3]{position:absolute;bottom:-4px;right:-4px;width:40px;height:40px;background-color:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;box-shadow:0 4px 6px -1px #0000001a}.settings-avatar-edit[data-v-a76a4ef3]:hover{background-color:#16a34a}.settings-avatar-icon[data-v-a76a4ef3]{color:#fff}.hidden-avatar-input[data-v-a76a4ef3]{display:none}.settings-user-display[data-v-a76a4ef3]{text-align:center}.settings-nickname[data-v-a76a4ef3]{font-weight:600;color:#1f2937;font-size:20px}.settings-username[data-v-a76a4ef3]{font-size:14px;color:#6b7280;margin-top:4px}.settings-form-section[data-v-a76a4ef3]{gap:20px}.settings-form-header[data-v-a76a4ef3]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.settings-form-title[data-v-a76a4ef3]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px}.settings-edit-btn[data-v-a76a4ef3]{border-radius:9999px}.settings-form[data-v-a76a4ef3]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.settings-form-item[data-v-a76a4ef3]{display:flex;flex-direction:column}.settings-form-label[data-v-a76a4ef3]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.settings-form-value[data-v-a76a4ef3]{color:#1f2937;background-color:#fff;border-radius:8px;padding:12px 16px;border:1px solid #e5e7eb}.bio-value[data-v-a76a4ef3]{min-height:80px}.settings-form-actions[data-v-a76a4ef3]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.context-menu[data-v-a76a4ef3]{position:fixed;background-color:#fff;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;padding:4px 0;z-index:1000}.context-menu-item[data-v-a76a4ef3]{padding:8px 16px;cursor:pointer;font-size:14px}.context-menu-item[data-v-a76a4ef3]:hover{background-color:#f3f4f6}
|
|
1
|
+
*,*:before,*:after{box-sizing:border-box}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}::-webkit-scrollbar-track{background:transparent}.avatar-crop-container[data-v-594eeaf3]{min-height:200px}.crop-wrapper[data-v-594eeaf3]{display:flex;flex-direction:column;gap:16px}.crop-area[data-v-594eeaf3]{position:relative;overflow:hidden;background:#f5f7fa;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid #e4e7ed}.crop-box[data-v-594eeaf3]{position:absolute;border:2px solid #409eff;box-shadow:0 0 0 9999px #00000080;cursor:move;box-sizing:border-box}.crop-handle[data-v-594eeaf3]{position:absolute;width:14px;height:14px;background:#409eff;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003}.crop-handle.nw[data-v-594eeaf3]{top:-7px;left:-7px;cursor:nw-resize}.crop-handle.n[data-v-594eeaf3]{top:-7px;left:50%;transform:translate(-50%);cursor:n-resize}.crop-handle.ne[data-v-594eeaf3]{top:-7px;right:-7px;cursor:ne-resize}.crop-handle.e[data-v-594eeaf3]{right:-7px;top:50%;transform:translateY(-50%);cursor:e-resize}.crop-handle.se[data-v-594eeaf3]{bottom:-7px;right:-7px;cursor:se-resize}.crop-handle.s[data-v-594eeaf3]{bottom:-7px;left:50%;transform:translate(-50%);cursor:s-resize}.crop-handle.sw[data-v-594eeaf3]{bottom:-7px;left:-7px;cursor:sw-resize}.crop-handle.w[data-v-594eeaf3]{left:-7px;top:50%;transform:translateY(-50%);cursor:w-resize}.preview-wrapper[data-v-594eeaf3]{display:flex;align-items:center;justify-content:center;gap:16px}.preview-label[data-v-594eeaf3]{font-size:14px;color:#606266;font-weight:500}.preview-box[data-v-594eeaf3]{border-radius:50%;overflow:hidden;border:3px solid #e4e7ed;background:#fff;box-shadow:0 2px 8px #0000001a}.preview-canvas[data-v-594eeaf3]{display:block;width:100%;height:100%}.dialog-footer[data-v-594eeaf3]{display:flex;justify-content:center;gap:12px}.emoji-picker[data-v-6ca53096]{position:absolute;bottom:100%;left:0;width:320px;background:#ffffffe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;box-shadow:0 10px 40px #00000026;border:1px solid rgba(255,255,255,.3);overflow:hidden;z-index:1000;margin-bottom:8px}.emoji-header[data-v-6ca53096]{display:flex;padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.08);gap:4px}.emoji-category-tab[data-v-6ca53096]{padding:8px 12px;cursor:pointer;border-radius:8px;transition:all .2s;font-size:18px;line-height:1}.emoji-category-tab[data-v-6ca53096]:hover{background:#0000000d}.emoji-category-tab.active[data-v-6ca53096]{background:#07c1601a}.emoji-body[data-v-6ca53096]{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:12px;max-height:240px;overflow-y:auto}.emoji-body[data-v-6ca53096]::-webkit-scrollbar{width:6px}.emoji-body[data-v-6ca53096]::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.emoji-item[data-v-6ca53096]{font-size:24px;padding:8px;text-align:center;cursor:pointer;border-radius:8px;transition:all .15s;line-height:1}.emoji-item[data-v-6ca53096]:hover{background:#00000014;transform:scale(1.2)}.chat-panel[data-v-d3ae5bc1]{display:flex;height:680px;background:#ffffffb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;border-radius:20px;box-shadow:0 8px 32px #0000001f,0 2px 12px #00000014;border:1px solid rgba(255,255,255,.3);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.chat-sidebar[data-v-d3ae5bc1]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background:#f9fafb99;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-right:1px solid rgba(229,231,235,.5)}.sidebar-avatar[data-v-d3ae5bc1]{margin-top:16px;margin-bottom:16px;cursor:pointer}.sidebar-avatar-img[data-v-d3ae5bc1]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb;object-fit:cover}.sidebar-nav-item[data-v-d3ae5bc1]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .2s;position:relative}.sidebar-nav-item-active[data-v-d3ae5bc1]{background-color:#dcfce7;color:#07c160}.sidebar-nav-item-inactive[data-v-d3ae5bc1]{color:#6b7280}.sidebar-nav-item-inactive[data-v-d3ae5bc1]:hover{background-color:#f3f4f6}.sidebar-nav-badge[data-v-d3ae5bc1]{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background-color:#ef4444;border-radius:50%;font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center}.sidebar-spacer[data-v-d3ae5bc1]{flex:1}.chat-content-panel[data-v-d3ae5bc1]{width:288px;background:#f5f5f580;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-right:1px solid rgba(229,231,235,.5);display:flex;flex-direction:column}.chat-search-bar[data-v-d3ae5bc1]{padding:12px}.chat-search-input[data-v-d3ae5bc1]{width:100%}.chat-content-scroll[data-v-d3ae5bc1]{flex:1;overflow-y:auto;min-height:0}.chat-list-item[data-v-d3ae5bc1]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s;border-radius:8px;margin:0 8px}.chat-list-item[data-v-d3ae5bc1]:hover{background:#e5e5e599}.chat-list-item-active[data-v-d3ae5bc1]{background:#07c16026}.chat-list-avatar-wrapper[data-v-d3ae5bc1]{position:relative;flex-shrink:0}.chat-list-avatar[data-v-d3ae5bc1]{width:44px;height:44px;border-radius:50%;object-fit:cover}.group-avatar-grid[data-v-d3ae5bc1]{width:44px;height:44px;border-radius:8px;overflow:hidden;display:flex;flex-wrap:wrap;background-color:#f3f4f6}.group-avatar-item[data-v-d3ae5bc1]{overflow:hidden;box-sizing:border-box;border:.5px solid rgba(255,255,255,.3)}.group-avatar-img[data-v-d3ae5bc1]{width:100%;height:100%;object-fit:cover}.chat-list-online-indicator[data-v-d3ae5bc1]{position:absolute;bottom:0;right:0;width:12px;height:12px;background-color:#22c55e;border-radius:50%;border:2px solid white}.chat-list-online-indicator.chat-list-offline[data-v-d3ae5bc1]{background-color:#9ca3af}.chat-list-info[data-v-d3ae5bc1]{margin-left:12px;flex:1;overflow:hidden}.chat-list-header[data-v-d3ae5bc1]{display:flex;justify-content:space-between;align-items:center}.chat-list-name[data-v-d3ae5bc1]{font-weight:500;color:#1f2937;font-size:14px}.chat-list-time[data-v-d3ae5bc1]{font-size:12px;color:#9ca3af}.chat-list-preview[data-v-d3ae5bc1]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.chat-list-last-msg[data-v-d3ae5bc1]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.chat-list-unread[data-v-d3ae5bc1]{background-color:#ef4444;color:#fff;font-size:10px;border-radius:9999px;padding:2px 6px;min-width:18px;min-height:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1}.add-friend-section[data-v-d3ae5bc1]{padding:12px}.add-friend-btn[data-v-d3ae5bc1]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-d3ae5bc1]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-d3ae5bc1]{width:44px;height:44px;background-color:#07c160;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-d3ae5bc1]{font-size:14px;color:#1f2937}.friend-request-item[data-v-d3ae5bc1]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-d3ae5bc1]:hover{background-color:#e5e5e5}.friend-request-info[data-v-d3ae5bc1]{display:flex;align-items:center}.friend-request-avatar[data-v-d3ae5bc1]{width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-request-details[data-v-d3ae5bc1]{margin-left:12px}.friend-request-username[data-v-d3ae5bc1]{font-weight:500;color:#1f2937;font-size:14px}.friend-request-desc[data-v-d3ae5bc1]{font-size:12px;color:#6b7280;margin-top:4px}.chat-main-area[data-v-d3ae5bc1]{flex:1;display:flex;flex-direction:column;min-width:0;background:#ffffff80;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.friend-profile-area[data-v-d3ae5bc1]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background:#f5f5f566}.profile-avatar[data-v-d3ae5bc1]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-d3ae5bc1]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-d3ae5bc1]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.profile-status-dot[data-v-d3ae5bc1]{width:8px;height:8px;border-radius:50%}.profile-status-online[data-v-d3ae5bc1]{background-color:#22c55e}.profile-status-offline[data-v-d3ae5bc1]{background-color:#9ca3af}.profile-start-chat-btn[data-v-d3ae5bc1]{width:160px}.chat-window-area[data-v-d3ae5bc1]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window-header[data-v-d3ae5bc1]{height:56px;border-bottom:1px solid rgba(229,231,235,.5);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#ffffff4d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.chat-window-title[data-v-d3ae5bc1]{display:flex;align-items:center;gap:12px}.chat-window-name[data-v-d3ae5bc1]{font-weight:500;color:#1f2937}.chat-window-status[data-v-d3ae5bc1]{font-size:12px;padding:2px 8px;border-radius:4px}.chat-window-status-online[data-v-d3ae5bc1]{background-color:#dcfce7;color:#16a34a}.chat-window-status-offline[data-v-d3ae5bc1]{background-color:#f3f4f6;color:#6b7280}.chat-window-actions[data-v-d3ae5bc1]{display:flex;align-items:center;gap:12px;color:#6b7280}.chat-action-icon[data-v-d3ae5bc1]{cursor:pointer}.chat-action-icon[data-v-d3ae5bc1]:hover{color:#374151}.chat-messages-container[data-v-d3ae5bc1]{flex:1;overflow-y:auto;padding:16px;background:#f5f5f54d;min-height:0}.chat-messages-container[data-v-d3ae5bc1]::-webkit-scrollbar{width:6px}.chat-messages-container[data-v-d3ae5bc1]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.chat-messages-container[data-v-d3ae5bc1]::-webkit-scrollbar-track{background:transparent}.message-wrapper[data-v-d3ae5bc1]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-d3ae5bc1]{flex-direction:row-reverse}.message-other[data-v-d3ae5bc1]{flex-direction:row}.message-avatar[data-v-d3ae5bc1]{flex-shrink:0}.message-avatar-img[data-v-d3ae5bc1]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content[data-v-d3ae5bc1]{display:flex;flex-direction:column;max-width:75%}.message-content-self[data-v-d3ae5bc1]{margin-right:12px;align-items:flex-end}.message-content-other[data-v-d3ae5bc1]{margin-left:12px;align-items:flex-start}.message-sender-name[data-v-d3ae5bc1]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-d3ae5bc1]{position:relative}.message-bubble[data-v-d3ae5bc1]{padding:8px 12px;font-size:14px;word-break:break-all;white-space:pre-wrap;border-radius:8px;box-shadow:0 1px 2px #0000000d}.message-bubble-self[data-v-d3ae5bc1]{background-color:#95ec69;color:#1f2937;position:relative}.message-bubble-self[data-v-d3ae5bc1]:after{content:"";position:absolute;right:-5px;top:10px;width:10px;height:10px;background-color:#95ec69;transform:rotate(45deg);box-shadow:2px -2px 2px #0000000d}.message-bubble-other[data-v-d3ae5bc1]{background-color:#fff;color:#1f2937;position:relative}.message-bubble-other[data-v-d3ae5bc1]:after{content:"";position:absolute;left:-5px;top:10px;width:10px;height:10px;background-color:#fff;transform:rotate(45deg);box-shadow:-2px 2px 2px #0000000d}.message-image-bubble[data-v-d3ae5bc1]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px;padding:0}.message-image[data-v-d3ae5bc1]{width:100%;height:auto;display:block}.message-image-size[data-v-d3ae5bc1]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.message-file-bubble[data-v-d3ae5bc1]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.message-file-content[data-v-d3ae5bc1]{display:flex;align-items:center;gap:12px;padding:12px 16px}.message-file-icon[data-v-d3ae5bc1]{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}.message-bubble-self .message-file-icon[data-v-d3ae5bc1]{color:#374151}.message-bubble-other .message-file-icon[data-v-d3ae5bc1]{color:#6b7280}.message-file-info[data-v-d3ae5bc1]{flex:1;min-width:0}.message-file-name[data-v-d3ae5bc1]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.message-bubble-self .message-file-name[data-v-d3ae5bc1],.message-bubble-other .message-file-name[data-v-d3ae5bc1]{color:#1f2937}.message-file-meta[data-v-d3ae5bc1]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.message-bubble-self .message-file-meta[data-v-d3ae5bc1]{color:#4b5563}.message-bubble-other .message-file-meta[data-v-d3ae5bc1]{color:#6b7280}.message-time[data-v-d3ae5bc1]{font-size:10px;color:#9ca3af;margin-top:4px}.message-time-right[data-v-d3ae5bc1]{text-align:right}.message-time-left[data-v-d3ae5bc1]{text-align:left}.chat-input-area[data-v-d3ae5bc1]{background:#fff9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(229,231,235,.5);position:relative}.emoji-button-wrapper[data-v-d3ae5bc1]{position:relative;display:inline-block}.pending-files-area[data-v-d3ae5bc1]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file-item[data-v-d3ae5bc1]{position:relative}.pending-image-wrapper[data-v-d3ae5bc1]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-d3ae5bc1]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-d3ae5bc1]{position:relative;width:96px;height:80px;border-radius:8px;border:1px solid #e5e7eb;background-color:#f9fafb;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px}.pending-file-icon[data-v-d3ae5bc1]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-d3ae5bc1]{font-size:10px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;padding:0 4px}.pending-file-remove-btn[data-v-d3ae5bc1]{position:absolute;top:4px;right:4px;width:20px;height:20px;background-color:#00000080;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;font-size:14px;border:none}.pending-file-remove-btn[data-v-d3ae5bc1]:hover{background-color:#000000b3}.input-toolbar[data-v-d3ae5bc1]{display:flex;align-items:center;padding:12px;gap:8px}.input-toolbar-icon[data-v-d3ae5bc1]{color:#6b7280;cursor:pointer;font-size:20px}.input-toolbar-icon[data-v-d3ae5bc1]:hover{color:#374151}.input-textarea-wrapper[data-v-d3ae5bc1]{padding:0 12px 12px}.message-input-textarea[data-v-d3ae5bc1]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px;font-family:inherit}.input-send-wrapper[data-v-d3ae5bc1]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-message-btn[data-v-d3ae5bc1]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-message-btn[data-v-d3ae5bc1]:hover{background-color:#06ad56}.hidden-file-input[data-v-d3ae5bc1]{display:none}.chat-empty-state[data-v-d3ae5bc1]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-state-icon[data-v-d3ae5bc1]{color:#d1d5db;margin-bottom:8px}.empty-state-text[data-v-d3ae5bc1]{color:#9ca3af;font-size:14px}.chat-detail-panel[data-v-d3ae5bc1]{width:256px;background:#f5f5f580;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-left:1px solid rgba(229,231,235,.5);display:flex;flex-direction:column}.chat-detail-header[data-v-d3ae5bc1]{height:56px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(229,231,235,.5);font-weight:500;color:#374151;font-size:14px}.chat-detail-content[data-v-d3ae5bc1]{flex:1;padding:16px}.chat-detail-profile[data-v-d3ae5bc1]{display:flex;flex-direction:column;align-items:center}.chat-detail-avatar[data-v-d3ae5bc1]{width:80px;height:80px;border-radius:50%;object-fit:cover}.chat-detail-name[data-v-d3ae5bc1]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.chat-detail-actions[data-v-d3ae5bc1]{margin-top:24px;width:100%}.chat-detail-action-item[data-v-d3ae5bc1]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff;font-size:14px;color:#374151}.chat-detail-action-item[data-v-d3ae5bc1]:hover{background-color:#f9fafb}.chat-detail-action-item[data-v-d3ae5bc1]:first-child{border-radius:8px 8px 0 0}.chat-detail-action-item[data-v-d3ae5bc1]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.add-friend-search-wrapper[data-v-d3ae5bc1]{margin-bottom:16px}.add-friend-search-input[data-v-d3ae5bc1]{width:100%}.add-friend-users-list[data-v-d3ae5bc1]{max-height:400px;overflow-y:auto}.add-friend-user-item[data-v-d3ae5bc1]{display:flex;align-items:center;justify-content:space-between;padding:12px;margin-bottom:8px;border-radius:8px;transition:background-color .2s}.add-friend-user-item[data-v-d3ae5bc1]:hover{background-color:#f9fafb}.add-friend-user-info[data-v-d3ae5bc1]{display:flex;align-items:center}.add-friend-user-avatar[data-v-d3ae5bc1]{width:40px;height:40px;border-radius:50%;object-fit:cover}.add-friend-user-name[data-v-d3ae5bc1]{margin-left:12px;font-weight:500;color:#1f2937;font-size:14px}.chat-settings-dialog[data-v-d3ae5bc1] .el-dialog{border-radius:16px;overflow:hidden}.chat-settings-dialog[data-v-d3ae5bc1] .el-dialog__header{padding:24px 24px 0;margin:0}.chat-settings-dialog[data-v-d3ae5bc1] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-settings-container[data-v-d3ae5bc1]{display:flex;flex-direction:column}.chat-settings-avatar-section[data-v-d3ae5bc1]{display:flex;flex-direction:column;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid #f3f4f6}.chat-settings-avatar-wrapper[data-v-d3ae5bc1]{position:relative;margin-bottom:16px}.chat-settings-avatar[data-v-d3ae5bc1]{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid white;box-shadow:0 10px 15px -3px #0000001a}.chat-settings-avatar-edit[data-v-d3ae5bc1]{position:absolute;bottom:-4px;right:-4px;width:40px;height:40px;background-color:#07c160;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;box-shadow:0 4px 6px -1px #0000001a}.chat-settings-avatar-edit[data-v-d3ae5bc1]:hover{background-color:#06ad56}.chat-settings-avatar-icon[data-v-d3ae5bc1]{color:#fff}.hidden-avatar-input[data-v-d3ae5bc1]{display:none}.chat-settings-user-display[data-v-d3ae5bc1]{text-align:center}.chat-settings-nickname[data-v-d3ae5bc1]{font-weight:600;color:#1f2937;font-size:20px}.chat-settings-username[data-v-d3ae5bc1]{font-size:14px;color:#6b7280;margin-top:4px}.chat-settings-form-section[data-v-d3ae5bc1]{gap:20px}.chat-settings-form-header[data-v-d3ae5bc1]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chat-settings-form-title[data-v-d3ae5bc1]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}.chat-settings-edit-btn[data-v-d3ae5bc1]{border-radius:9999px}.chat-settings-form[data-v-d3ae5bc1]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.chat-settings-form-item[data-v-d3ae5bc1]{display:flex;flex-direction:column}.chat-settings-form-label[data-v-d3ae5bc1]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.chat-settings-form-value[data-v-d3ae5bc1]{color:#1f2937;background-color:#fff;border-radius:8px;padding:12px 16px;border:1px solid #e5e7eb;font-size:14px}.chat-settings-form-value.bio-value[data-v-d3ae5bc1]{min-height:80px}.chat-settings-form-actions[data-v-d3ae5bc1]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.chat-context-menu[data-v-d3ae5bc1]{position:fixed;background:#ffffffe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;box-shadow:0 10px 40px #00000026;border:1px solid rgba(255,255,255,.3);padding:4px 0;z-index:1000}.chat-context-menu-item[data-v-d3ae5bc1]{padding:8px 16px;cursor:pointer;font-size:14px;color:#374151;margin:2px 4px;border-radius:8px;transition:background-color .2s}.chat-context-menu-item[data-v-d3ae5bc1]:hover{background-color:#f3f4f6cc}.create-group-form[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:20px}.form-item[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:8px}.form-label[data-v-d3ae5bc1]{font-size:14px;font-weight:500;color:#374151}.member-selection[data-v-d3ae5bc1]{border:1px solid #e5e7eb;border-radius:8px;padding:12px;background-color:#f9fafb}.member-list[data-v-d3ae5bc1]{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.member-item[data-v-d3ae5bc1]{display:flex;flex-direction:column;align-items:center;padding:12px 8px;border-radius:8px;cursor:pointer;transition:background-color .2s;border:2px solid transparent}.member-item[data-v-d3ae5bc1]:hover{background-color:#f3f4f6cc}.member-item.member-selected[data-v-d3ae5bc1]{border-color:#07c160;background-color:#07c1600d}.member-item img[data-v-d3ae5bc1]{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:8px}.member-item span[data-v-d3ae5bc1]{font-size:13px;color:#374151;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.member-check[data-v-d3ae5bc1]{color:#07c160;margin-top:4px}.group-detail-content[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:16px}.group-info-item[data-v-d3ae5bc1]{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.info-value[data-v-d3ae5bc1]{font-size:14px;color:#1f2937;font-weight:500}.group-members-list[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.group-member-item[data-v-d3ae5bc1]{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;background-color:#fff;transition:background-color .2s}.group-member-item[data-v-d3ae5bc1]:hover{background-color:#f9fafb}.group-member-avatar[data-v-d3ae5bc1]{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.group-member-name[data-v-d3ae5bc1]{font-size:14px;color:#1f2937;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-sidebar[data-v-d3ae5bc1]{width:320px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column;height:100%;overflow:hidden}.slide-enter-active[data-v-d3ae5bc1],.slide-leave-active[data-v-d3ae5bc1]{transition:transform .3s ease}.slide-enter-from[data-v-d3ae5bc1],.slide-leave-to[data-v-d3ae5bc1]{transform:translate(100%)}.group-sidebar-header[data-v-d3ae5bc1]{height:56px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;border-bottom:1px solid #e5e7eb;background-color:#fff}.group-sidebar-title[data-v-d3ae5bc1]{font-size:16px;font-weight:500;color:#1f2937}.group-sidebar-close[data-v-d3ae5bc1]{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:background-color .2s;color:#6b7280}.group-sidebar-close[data-v-d3ae5bc1]:hover{background-color:#f3f4f6;color:#374151}.group-sidebar-content[data-v-d3ae5bc1]{flex:1;overflow-y:auto;padding:16px}.group-members-avatar-section[data-v-d3ae5bc1]{margin-bottom:16px}.group-members-grid[data-v-d3ae5bc1]{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.group-member-avatar-item[data-v-d3ae5bc1]{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:4px;border-radius:8px;transition:background-color .2s}.group-member-avatar-item[data-v-d3ae5bc1]:hover{background-color:#0000000d}.group-member-avatar-small[data-v-d3ae5bc1]{width:48px;height:48px;border-radius:50%;object-fit:cover;margin-bottom:4px}.group-member-add-icon[data-v-d3ae5bc1]{width:48px;height:48px;border-radius:50%;background-color:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#6b7280;margin-bottom:4px}.group-member-nickname[data-v-d3ae5bc1]{font-size:12px;color:#6b7280;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.group-divider[data-v-d3ae5bc1]{height:12px;background-color:transparent;border-top:1px solid #e5e7eb;margin:16px 0}.group-settings-section[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:4px}.group-setting-item[data-v-d3ae5bc1]{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background-color:#fff;cursor:pointer;transition:background-color .2s;border-radius:8px;margin-bottom:4px}.group-setting-item[data-v-d3ae5bc1]:hover{background-color:#f9fafb}.group-setting-item.danger[data-v-d3ae5bc1]{color:#ef4444;margin-top:8px}.group-setting-item.danger[data-v-d3ae5bc1]:hover{background-color:#fef2f2}.group-setting-label[data-v-d3ae5bc1]{font-size:14px;color:#1f2937}.group-setting-item.danger .group-setting-label[data-v-d3ae5bc1]{color:#ef4444}.group-setting-value[data-v-d3ae5bc1]{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:14px}.group-setting-value-text[data-v-d3ae5bc1]{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-setting-value-wrapper[data-v-d3ae5bc1]{display:flex;flex:1;justify-content:flex-end}.group-edit-wrapper[data-v-d3ae5bc1]{width:100%;display:flex;flex-direction:column;gap:12px}.group-edit-buttons[data-v-d3ae5bc1]{display:flex;justify-content:flex-end;gap:8px}.group-input-edit[data-v-d3ae5bc1]{flex:1}.group-edit-actions[data-v-d3ae5bc1]{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.msg-read-users-content[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:20px}.read-users-section[data-v-d3ae5bc1],.unread-users-section[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:12px}.users-list[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:8px}.users-tag-list[data-v-d3ae5bc1]{display:flex;flex-wrap:wrap;gap:8px}.user-tag[data-v-d3ae5bc1]{padding:6px 12px;background-color:#f3f4f6;border-radius:9999px;font-size:13px;color:#374151;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.member-item[data-v-d3ae5bc1]{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .2s;border:2px solid transparent;background-color:#fff}.member-item[data-v-d3ae5bc1]:hover{background-color:#f3f4f6}.member-selected[data-v-d3ae5bc1]{background-color:#07c1601a;border-color:#07c160}.member-avatar[data-v-d3ae5bc1]{width:40px;height:40px;border-radius:50%;object-fit:cover}.member-name[data-v-d3ae5bc1]{flex:1;font-size:14px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-check[data-v-d3ae5bc1]{color:#07c160;font-size:20px}.group-detail-content[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:20px}.group-info-section[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:12px}.group-info-item[data-v-d3ae5bc1]{display:flex;justify-content:space-between;align-items:center;padding:12px;background-color:#f9fafb;border-radius:8px}.info-label[data-v-d3ae5bc1]{font-size:14px;color:#6b7280}.info-value[data-v-d3ae5bc1]{font-size:14px;color:#374151;font-weight:500}.group-members-section[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:12px}.section-header[data-v-d3ae5bc1]{display:flex;justify-content:space-between;align-items:center}.section-title[data-v-d3ae5bc1]{font-size:14px;font-weight:500;color:#374151}.group-members-list[data-v-d3ae5bc1]{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;max-height:300px;overflow-y:auto}.group-member-item[data-v-d3ae5bc1]{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:8px;background-color:#f9fafb;text-align:center}.group-member-avatar[data-v-d3ae5bc1]{width:50px;height:50px;border-radius:50%;object-fit:cover}.group-member-name[data-v-d3ae5bc1]{font-size:12px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.invite-member-content[data-v-d3ae5bc1]{display:flex;flex-direction:column;gap:16px}
|