vue-chat-kit 0.3.2 → 0.3.5
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/dist/vue-chat-kit.css +1 -1
- package/dist/vue-chat-kit.es.js +1524 -1389
- package/dist/vue-chat-kit.umd.js +1 -1
- package/package.json +2 -2
- package/src/components/AvatarCrop.vue +475 -170
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-4e4a992b]{display:flex;flex-direction:column;gap:20px}.crop-area[data-v-4e4a992b]{position:relative;width:100%;height:300px;overflow:hidden;background:#f5f5f5;border-radius:8px}.crop-image[data-v-4e4a992b]{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;max-width:none}.crop-overlay[data-v-4e4a992b]{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.crop-box[data-v-4e4a992b]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px}.crop-border[data-v-4e4a992b]{width:100%;height:100%;border:2px solid #fff;box-shadow:0 0 0 9999px #00000080;border-radius:8px}.crop-mask[data-v-4e4a992b]{position:absolute;top:0;right:0;bottom:0;left:0;cursor:move}.zoom-controls[data-v-4e4a992b]{padding:0 20px}.chat-panel[data-v-f5908195]{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-f5908195]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-f5908195]{margin-top:16px;margin-bottom:16px;cursor:pointer}.sidebar-avatar-img[data-v-f5908195]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb;object-fit:cover}.sidebar-nav-item[data-v-f5908195]{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-f5908195]{background-color:#dcfce7;color:#07c160}.sidebar-nav-item-inactive[data-v-f5908195]{color:#6b7280}.sidebar-nav-item-inactive[data-v-f5908195]:hover{background-color:#f3f4f6}.sidebar-nav-badge[data-v-f5908195]{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-f5908195]{flex:1}.chat-content-panel[data-v-f5908195]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-search-bar[data-v-f5908195]{padding:12px}.chat-search-input[data-v-f5908195]{width:100%}.chat-content-scroll[data-v-f5908195]{flex:1;overflow-y:auto;min-height:0}.chat-list-item[data-v-f5908195]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-list-item[data-v-f5908195]:hover{background-color:#e5e5e5}.chat-list-item-active[data-v-f5908195]{background-color:#d6d6d6}.chat-list-avatar-wrapper[data-v-f5908195]{position:relative;flex-shrink:0}.chat-list-avatar[data-v-f5908195]{width:44px;height:44px;border-radius:50%;object-fit:cover}.chat-list-online-indicator[data-v-f5908195]{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-f5908195]{background-color:#9ca3af}.chat-list-info[data-v-f5908195]{margin-left:12px;flex:1;overflow:hidden}.chat-list-header[data-v-f5908195]{display:flex;justify-content:space-between;align-items:center}.chat-list-name[data-v-f5908195]{font-weight:500;color:#1f2937;font-size:14px}.chat-list-time[data-v-f5908195]{font-size:12px;color:#9ca3af}.chat-list-preview[data-v-f5908195]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.chat-list-last-msg[data-v-f5908195]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.chat-list-unread[data-v-f5908195]{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-f5908195]{padding:12px}.add-friend-btn[data-v-f5908195]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-f5908195]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-f5908195]{width:44px;height:44px;background-color:#07c160;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-f5908195]{font-size:14px;color:#1f2937}.friend-request-item[data-v-f5908195]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-f5908195]:hover{background-color:#e5e5e5}.friend-request-info[data-v-f5908195]{display:flex;align-items:center}.friend-request-avatar[data-v-f5908195]{width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-request-details[data-v-f5908195]{margin-left:12px}.friend-request-username[data-v-f5908195]{font-weight:500;color:#1f2937;font-size:14px}.friend-request-desc[data-v-f5908195]{font-size:12px;color:#6b7280;margin-top:4px}.chat-main-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-f5908195]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-f5908195]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-f5908195]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.profile-status-dot[data-v-f5908195]{width:8px;height:8px;border-radius:50%}.profile-status-online[data-v-f5908195]{background-color:#22c55e}.profile-status-offline[data-v-f5908195]{background-color:#9ca3af}.profile-start-chat-btn[data-v-f5908195]{width:160px}.chat-window-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window-header[data-v-f5908195]{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-f5908195]{display:flex;align-items:center;gap:12px}.chat-window-name[data-v-f5908195]{font-weight:500;color:#1f2937}.chat-window-status[data-v-f5908195]{font-size:12px;padding:2px 8px;border-radius:4px}.chat-window-status-online[data-v-f5908195]{background-color:#dcfce7;color:#16a34a}.chat-window-status-offline[data-v-f5908195]{background-color:#f3f4f6;color:#6b7280}.chat-window-actions[data-v-f5908195]{display:flex;align-items:center;gap:12px;color:#6b7280}.chat-action-icon[data-v-f5908195]{cursor:pointer}.chat-action-icon[data-v-f5908195]:hover{color:#374151}.chat-messages-container[data-v-f5908195]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar{width:6px}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar-track{background:transparent}.message-wrapper[data-v-f5908195]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-f5908195]{flex-direction:row-reverse}.message-other[data-v-f5908195]{flex-direction:row}.message-avatar[data-v-f5908195]{flex-shrink:0}.message-avatar-img[data-v-f5908195]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content[data-v-f5908195]{display:flex;flex-direction:column;max-width:75%}.message-content-self[data-v-f5908195]{margin-right:12px;align-items:flex-end}.message-content-other[data-v-f5908195]{margin-left:12px;align-items:flex-start}.message-sender-name[data-v-f5908195]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-f5908195]{position:relative}.message-bubble[data-v-f5908195]{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-f5908195]{background-color:#95ec69;color:#1f2937;position:relative}.message-bubble-self[data-v-f5908195]: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-f5908195]{background-color:#fff;color:#1f2937;position:relative}.message-bubble-other[data-v-f5908195]: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-f5908195]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px;padding:0}.message-image[data-v-f5908195]{width:100%;height:auto;display:block}.message-image-size[data-v-f5908195]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.message-file-bubble[data-v-f5908195]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.message-file-content[data-v-f5908195]{display:flex;align-items:center;gap:12px;padding:12px 16px}.message-file-icon[data-v-f5908195]{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-f5908195]{color:#374151}.message-bubble-other .message-file-icon[data-v-f5908195]{color:#6b7280}.message-file-info[data-v-f5908195]{flex:1;min-width:0}.message-file-name[data-v-f5908195]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.message-bubble-self .message-file-name[data-v-f5908195],.message-bubble-other .message-file-name[data-v-f5908195]{color:#1f2937}.message-file-meta[data-v-f5908195]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.message-bubble-self .message-file-meta[data-v-f5908195]{color:#4b5563}.message-bubble-other .message-file-meta[data-v-f5908195]{color:#6b7280}.message-time[data-v-f5908195]{font-size:10px;color:#9ca3af;margin-top:4px}.message-time-right[data-v-f5908195]{text-align:right}.message-time-left[data-v-f5908195]{text-align:left}.chat-input-area[data-v-f5908195]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files-area[data-v-f5908195]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file-item[data-v-f5908195]{position:relative}.pending-image-wrapper[data-v-f5908195]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-f5908195]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-f5908195]{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-f5908195]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-f5908195]{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-f5908195]{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-f5908195]:hover{background-color:#000000b3}.input-toolbar[data-v-f5908195]{display:flex;align-items:center;padding:12px;gap:8px}.input-toolbar-icon[data-v-f5908195]{color:#6b7280;cursor:pointer;font-size:20px}.input-toolbar-icon[data-v-f5908195]:hover{color:#374151}.input-textarea-wrapper[data-v-f5908195]{padding:0 12px 12px}.message-input-textarea[data-v-f5908195]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px;font-family:inherit}.input-send-wrapper[data-v-f5908195]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-message-btn[data-v-f5908195]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-message-btn[data-v-f5908195]:hover{background-color:#06ad56}.hidden-file-input[data-v-f5908195]{display:none}.chat-empty-state[data-v-f5908195]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-state-icon[data-v-f5908195]{color:#d1d5db;margin-bottom:8px}.empty-state-text[data-v-f5908195]{color:#9ca3af;font-size:14px}.chat-detail-panel[data-v-f5908195]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-detail-header[data-v-f5908195]{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-f5908195]{flex:1;padding:16px}.chat-detail-profile[data-v-f5908195]{display:flex;flex-direction:column;align-items:center}.chat-detail-avatar[data-v-f5908195]{width:80px;height:80px;border-radius:50%;object-fit:cover}.chat-detail-name[data-v-f5908195]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.chat-detail-actions[data-v-f5908195]{margin-top:24px;width:100%}.chat-detail-action-item[data-v-f5908195]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff;font-size:14px;color:#374151}.chat-detail-action-item[data-v-f5908195]:hover{background-color:#f9fafb}.chat-detail-action-item[data-v-f5908195]:first-child{border-radius:8px 8px 0 0}.chat-detail-action-item[data-v-f5908195]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.add-friend-search-wrapper[data-v-f5908195]{margin-bottom:16px}.add-friend-search-input[data-v-f5908195]{width:100%}.add-friend-users-list[data-v-f5908195]{max-height:400px;overflow-y:auto}.add-friend-user-item[data-v-f5908195]{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-f5908195]:hover{background-color:#f9fafb}.add-friend-user-info[data-v-f5908195]{display:flex;align-items:center}.add-friend-user-avatar[data-v-f5908195]{width:40px;height:40px;border-radius:50%;object-fit:cover}.add-friend-user-name[data-v-f5908195]{margin-left:12px;font-weight:500;color:#1f2937;font-size:14px}.chat-settings-dialog[data-v-f5908195] .el-dialog{border-radius:16px;overflow:hidden}.chat-settings-dialog[data-v-f5908195] .el-dialog__header{padding:24px 24px 0;margin:0}.chat-settings-dialog[data-v-f5908195] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-settings-container[data-v-f5908195]{display:flex;flex-direction:column}.chat-settings-avatar-section[data-v-f5908195]{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-f5908195]{position:relative;margin-bottom:16px}.chat-settings-avatar[data-v-f5908195]{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-f5908195]{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-f5908195]:hover{background-color:#06ad56}.chat-settings-avatar-icon[data-v-f5908195]{color:#fff}.hidden-avatar-input[data-v-f5908195]{display:none}.chat-settings-user-display[data-v-f5908195]{text-align:center}.chat-settings-nickname[data-v-f5908195]{font-weight:600;color:#1f2937;font-size:20px}.chat-settings-username[data-v-f5908195]{font-size:14px;color:#6b7280;margin-top:4px}.chat-settings-form-section[data-v-f5908195]{gap:20px}.chat-settings-form-header[data-v-f5908195]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chat-settings-form-title[data-v-f5908195]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}.chat-settings-edit-btn[data-v-f5908195]{border-radius:9999px}.chat-settings-form[data-v-f5908195]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.chat-settings-form-item[data-v-f5908195]{display:flex;flex-direction:column}.chat-settings-form-label[data-v-f5908195]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.chat-settings-form-value[data-v-f5908195]{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-f5908195]{min-height:80px}.chat-settings-form-actions[data-v-f5908195]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.chat-context-menu[data-v-f5908195]{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-f5908195]{padding:8px 16px;cursor:pointer;font-size:14px;color:#374151}.chat-context-menu-item[data-v-f5908195]: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}.chat-panel[data-v-f5908195]{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-f5908195]{width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#f9fafb;border-right:1px solid #e5e7eb}.sidebar-avatar[data-v-f5908195]{margin-top:16px;margin-bottom:16px;cursor:pointer}.sidebar-avatar-img[data-v-f5908195]{width:40px;height:40px;border-radius:50%;border:2px solid #e5e7eb;object-fit:cover}.sidebar-nav-item[data-v-f5908195]{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-f5908195]{background-color:#dcfce7;color:#07c160}.sidebar-nav-item-inactive[data-v-f5908195]{color:#6b7280}.sidebar-nav-item-inactive[data-v-f5908195]:hover{background-color:#f3f4f6}.sidebar-nav-badge[data-v-f5908195]{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-f5908195]{flex:1}.chat-content-panel[data-v-f5908195]{width:288px;background-color:#f5f5f5;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-search-bar[data-v-f5908195]{padding:12px}.chat-search-input[data-v-f5908195]{width:100%}.chat-content-scroll[data-v-f5908195]{flex:1;overflow-y:auto;min-height:0}.chat-list-item[data-v-f5908195]{display:flex;align-items:center;padding:12px;cursor:pointer;transition:background-color .2s}.chat-list-item[data-v-f5908195]:hover{background-color:#e5e5e5}.chat-list-item-active[data-v-f5908195]{background-color:#d6d6d6}.chat-list-avatar-wrapper[data-v-f5908195]{position:relative;flex-shrink:0}.chat-list-avatar[data-v-f5908195]{width:44px;height:44px;border-radius:50%;object-fit:cover}.chat-list-online-indicator[data-v-f5908195]{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-f5908195]{background-color:#9ca3af}.chat-list-info[data-v-f5908195]{margin-left:12px;flex:1;overflow:hidden}.chat-list-header[data-v-f5908195]{display:flex;justify-content:space-between;align-items:center}.chat-list-name[data-v-f5908195]{font-weight:500;color:#1f2937;font-size:14px}.chat-list-time[data-v-f5908195]{font-size:12px;color:#9ca3af}.chat-list-preview[data-v-f5908195]{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.chat-list-last-msg[data-v-f5908195]{font-size:12px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;flex:1}.chat-list-unread[data-v-f5908195]{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-f5908195]{padding:12px}.add-friend-btn[data-v-f5908195]{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer}.add-friend-btn[data-v-f5908195]:hover{background-color:#e5e5e5}.add-friend-icon[data-v-f5908195]{width:44px;height:44px;background-color:#07c160;border-radius:8px;display:flex;align-items:center;justify-content:center}.add-friend-text[data-v-f5908195]{font-size:14px;color:#1f2937}.friend-request-item[data-v-f5908195]{display:flex;align-items:center;justify-content:space-between;padding:12px}.friend-request-item[data-v-f5908195]:hover{background-color:#e5e5e5}.friend-request-info[data-v-f5908195]{display:flex;align-items:center}.friend-request-avatar[data-v-f5908195]{width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-request-details[data-v-f5908195]{margin-left:12px}.friend-request-username[data-v-f5908195]{font-weight:500;color:#1f2937;font-size:14px}.friend-request-desc[data-v-f5908195]{font-size:12px;color:#6b7280;margin-top:4px}.chat-main-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#fff}.friend-profile-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background-color:#f5f5f5}.profile-avatar[data-v-f5908195]{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:24px}.profile-name[data-v-f5908195]{font-size:20px;font-weight:500;color:#1f2937;margin-bottom:8px}.profile-status[data-v-f5908195]{display:flex;align-items:center;gap:8px;margin-bottom:32px}.profile-status-dot[data-v-f5908195]{width:8px;height:8px;border-radius:50%}.profile-status-online[data-v-f5908195]{background-color:#22c55e}.profile-status-offline[data-v-f5908195]{background-color:#9ca3af}.profile-start-chat-btn[data-v-f5908195]{width:160px}.chat-window-area[data-v-f5908195]{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window-header[data-v-f5908195]{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-f5908195]{display:flex;align-items:center;gap:12px}.chat-window-name[data-v-f5908195]{font-weight:500;color:#1f2937}.chat-window-status[data-v-f5908195]{font-size:12px;padding:2px 8px;border-radius:4px}.chat-window-status-online[data-v-f5908195]{background-color:#dcfce7;color:#16a34a}.chat-window-status-offline[data-v-f5908195]{background-color:#f3f4f6;color:#6b7280}.chat-window-actions[data-v-f5908195]{display:flex;align-items:center;gap:12px;color:#6b7280}.chat-action-icon[data-v-f5908195]{cursor:pointer}.chat-action-icon[data-v-f5908195]:hover{color:#374151}.chat-messages-container[data-v-f5908195]{flex:1;overflow-y:auto;padding:16px;background-color:#f5f5f5;min-height:0}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar{width:6px}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.chat-messages-container[data-v-f5908195]::-webkit-scrollbar-track{background:transparent}.message-wrapper[data-v-f5908195]{display:flex;margin-bottom:24px;align-items:flex-start}.message-self[data-v-f5908195]{flex-direction:row-reverse}.message-other[data-v-f5908195]{flex-direction:row}.message-avatar[data-v-f5908195]{flex-shrink:0}.message-avatar-img[data-v-f5908195]{width:40px;height:40px;border-radius:8px;object-fit:cover}.message-content[data-v-f5908195]{display:flex;flex-direction:column;max-width:75%}.message-content-self[data-v-f5908195]{margin-right:12px;align-items:flex-end}.message-content-other[data-v-f5908195]{margin-left:12px;align-items:flex-start}.message-sender-name[data-v-f5908195]{font-size:12px;color:#6b7280;margin-bottom:4px;margin-left:4px}.message-bubble-wrapper[data-v-f5908195]{position:relative}.message-bubble[data-v-f5908195]{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-f5908195]{background-color:#95ec69;color:#1f2937;position:relative}.message-bubble-self[data-v-f5908195]: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-f5908195]{background-color:#fff;color:#1f2937;position:relative}.message-bubble-other[data-v-f5908195]: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-f5908195]{border-radius:8px;position:relative;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;max-width:300px;padding:0}.message-image[data-v-f5908195]{width:100%;height:auto;display:block}.message-image-size[data-v-f5908195]{position:absolute;left:4px;bottom:0;color:#fff;font-size:10px}.message-file-bubble[data-v-f5908195]{border-radius:8px;box-shadow:0 1px 2px #0000000d;cursor:pointer;overflow:hidden;min-width:200px}.message-file-content[data-v-f5908195]{display:flex;align-items:center;gap:12px;padding:12px 16px}.message-file-icon[data-v-f5908195]{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-f5908195]{color:#374151}.message-bubble-other .message-file-icon[data-v-f5908195]{color:#6b7280}.message-file-info[data-v-f5908195]{flex:1;min-width:0}.message-file-name[data-v-f5908195]{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:1.2}.message-bubble-self .message-file-name[data-v-f5908195],.message-bubble-other .message-file-name[data-v-f5908195]{color:#1f2937}.message-file-meta[data-v-f5908195]{font-size:12px;margin-top:4px;display:flex;align-items:center;gap:8px}.message-bubble-self .message-file-meta[data-v-f5908195]{color:#4b5563}.message-bubble-other .message-file-meta[data-v-f5908195]{color:#6b7280}.message-time[data-v-f5908195]{font-size:10px;color:#9ca3af;margin-top:4px}.message-time-right[data-v-f5908195]{text-align:right}.message-time-left[data-v-f5908195]{text-align:left}.chat-input-area[data-v-f5908195]{background-color:#fff;border-top:1px solid #e5e7eb}.pending-files-area[data-v-f5908195]{padding:8px 12px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:8px}.pending-file-item[data-v-f5908195]{position:relative}.pending-image-wrapper[data-v-f5908195]{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.pending-image[data-v-f5908195]{width:100%;height:100%;object-fit:cover}.pending-file-wrapper[data-v-f5908195]{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-f5908195]{color:#9ca3af;font-size:28px;margin-bottom:4px}.pending-file-name[data-v-f5908195]{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-f5908195]{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-f5908195]:hover{background-color:#000000b3}.input-toolbar[data-v-f5908195]{display:flex;align-items:center;padding:12px;gap:8px}.input-toolbar-icon[data-v-f5908195]{color:#6b7280;cursor:pointer;font-size:20px}.input-toolbar-icon[data-v-f5908195]:hover{color:#374151}.input-textarea-wrapper[data-v-f5908195]{padding:0 12px 12px}.message-input-textarea[data-v-f5908195]{width:100%;resize:none;border:none;outline:none;font-size:14px;height:80px;font-family:inherit}.input-send-wrapper[data-v-f5908195]{display:flex;justify-content:flex-end;padding:0 12px 12px}.send-message-btn[data-v-f5908195]{background-color:#07c160;border:none;font-size:14px;padding:8px 24px}.send-message-btn[data-v-f5908195]:hover{background-color:#06ad56}.hidden-file-input[data-v-f5908195]{display:none}.chat-empty-state[data-v-f5908195]{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:#f5f5f5}.empty-state-icon[data-v-f5908195]{color:#d1d5db;margin-bottom:8px}.empty-state-text[data-v-f5908195]{color:#9ca3af;font-size:14px}.chat-detail-panel[data-v-f5908195]{width:256px;background-color:#f5f5f5;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.chat-detail-header[data-v-f5908195]{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-f5908195]{flex:1;padding:16px}.chat-detail-profile[data-v-f5908195]{display:flex;flex-direction:column;align-items:center}.chat-detail-avatar[data-v-f5908195]{width:80px;height:80px;border-radius:50%;object-fit:cover}.chat-detail-name[data-v-f5908195]{margin-top:12px;font-weight:500;color:#1f2937;font-size:18px}.chat-detail-actions[data-v-f5908195]{margin-top:24px;width:100%}.chat-detail-action-item[data-v-f5908195]{padding:12px;border-bottom:1px solid #f3f4f6;cursor:pointer;background-color:#fff;font-size:14px;color:#374151}.chat-detail-action-item[data-v-f5908195]:hover{background-color:#f9fafb}.chat-detail-action-item[data-v-f5908195]:first-child{border-radius:8px 8px 0 0}.chat-detail-action-item[data-v-f5908195]:last-child{border-bottom:none;border-radius:0 0 8px 8px}.add-friend-search-wrapper[data-v-f5908195]{margin-bottom:16px}.add-friend-search-input[data-v-f5908195]{width:100%}.add-friend-users-list[data-v-f5908195]{max-height:400px;overflow-y:auto}.add-friend-user-item[data-v-f5908195]{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-f5908195]:hover{background-color:#f9fafb}.add-friend-user-info[data-v-f5908195]{display:flex;align-items:center}.add-friend-user-avatar[data-v-f5908195]{width:40px;height:40px;border-radius:50%;object-fit:cover}.add-friend-user-name[data-v-f5908195]{margin-left:12px;font-weight:500;color:#1f2937;font-size:14px}.chat-settings-dialog[data-v-f5908195] .el-dialog{border-radius:16px;overflow:hidden}.chat-settings-dialog[data-v-f5908195] .el-dialog__header{padding:24px 24px 0;margin:0}.chat-settings-dialog[data-v-f5908195] .el-dialog__title{font-size:20px;font-weight:600;color:#1f2937}.chat-settings-container[data-v-f5908195]{display:flex;flex-direction:column}.chat-settings-avatar-section[data-v-f5908195]{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-f5908195]{position:relative;margin-bottom:16px}.chat-settings-avatar[data-v-f5908195]{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-f5908195]{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-f5908195]:hover{background-color:#06ad56}.chat-settings-avatar-icon[data-v-f5908195]{color:#fff}.hidden-avatar-input[data-v-f5908195]{display:none}.chat-settings-user-display[data-v-f5908195]{text-align:center}.chat-settings-nickname[data-v-f5908195]{font-weight:600;color:#1f2937;font-size:20px}.chat-settings-username[data-v-f5908195]{font-size:14px;color:#6b7280;margin-top:4px}.chat-settings-form-section[data-v-f5908195]{gap:20px}.chat-settings-form-header[data-v-f5908195]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.chat-settings-form-title[data-v-f5908195]{color:#374151;font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}.chat-settings-edit-btn[data-v-f5908195]{border-radius:9999px}.chat-settings-form[data-v-f5908195]{background-color:#f9fafb;border-radius:16px;padding:24px;gap:20px;display:flex;flex-direction:column}.chat-settings-form-item[data-v-f5908195]{display:flex;flex-direction:column}.chat-settings-form-label[data-v-f5908195]{display:block;font-size:14px;color:#4b5563;margin-bottom:8px;font-weight:500}.chat-settings-form-value[data-v-f5908195]{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-f5908195]{min-height:80px}.chat-settings-form-actions[data-v-f5908195]{display:flex;gap:12px;justify-content:flex-end;padding-top:8px}.chat-context-menu[data-v-f5908195]{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-f5908195]{padding:8px 16px;cursor:pointer;font-size:14px;color:#374151}.chat-context-menu-item[data-v-f5908195]: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}
|