tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

package/dist/styles/index.css

@@ -119,73 +119,73 @@
   width: 16px;
   height: 16px;
   border-width: 3px;
-}.avatar[data-v-06122a77] {
+}._avatar_bq44a_1 {
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   flex-shrink: 0;
   user-select: none;
 }
-.avatar--shape-circular[data-v-06122a77] {
+._avatar--shape-circular_bq44a_10 {
   border-radius: 50%;
 }
-.avatar--shape-square[data-v-06122a77] {
+._avatar--shape-square_bq44a_13 {
   border-radius: 0;
 }
-.avatar.size-xs[data-v-06122a77] {
+._avatar_bq44a_1._size-xs_bq44a_16 {
   width: 24px;
   height: 24px;
 }
-.avatar.size-sm[data-v-06122a77] {
+._avatar_bq44a_1._size-sm_bq44a_20 {
   width: 32px;
   height: 32px;
 }
-.avatar.size-md[data-v-06122a77] {
+._avatar_bq44a_1._size-md_bq44a_24 {
   width: 40px;
   height: 40px;
 }
-.avatar.size-lg[data-v-06122a77] {
+._avatar_bq44a_1._size-lg_bq44a_28 {
   width: 48px;
   height: 48px;
 }
-.avatar.size-xl[data-v-06122a77] {
+._avatar_bq44a_1._size-xl_bq44a_32 {
   width: 64px;
   height: 64px;
 }
-.avatar.size-xxl[data-v-06122a77] {
+._avatar_bq44a_1._size-xxl_bq44a_36 {
   width: 96px;
   height: 96px;
 }
-.avatar--shape-rounded[data-v-06122a77] {
+._avatar--shape-rounded_bq44a_40 {
   border-radius: 4px;
 }
-.avatar--shape-rounded.size-xs[data-v-06122a77] {
+._avatar--shape-rounded_bq44a_40._size-xs_bq44a_16 {
   border-radius: 4px;
 }
-.avatar--shape-rounded.size-sm[data-v-06122a77] {
+._avatar--shape-rounded_bq44a_40._size-sm_bq44a_20 {
   border-radius: 4px;
 }
-.avatar--shape-rounded.size-md[data-v-06122a77] {
+._avatar--shape-rounded_bq44a_40._size-md_bq44a_24 {
   border-radius: 8px;
 }
-.avatar--shape-rounded.size-lg[data-v-06122a77] {
+._avatar--shape-rounded_bq44a_40._size-lg_bq44a_28 {
   border-radius: 8px;
 }
-.avatar--shape-rounded.size-xl[data-v-06122a77] {
+._avatar--shape-rounded_bq44a_40._size-xl_bq44a_32 {
   border-radius: 8px;
 }
-.avatar--shape-rounded.size-xxl[data-v-06122a77] {
+._avatar--shape-rounded_bq44a_40._size-xxl_bq44a_36 {
   border-radius: 12px;
 }
-.avatar__image[data-v-06122a77] {
+._avatar__image_bq44a_61 {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: flex;
 }
-.avatar__fallback[data-v-06122a77] {
+._avatar__fallback_bq44a_67 {
   width: 100%;
   height: 100%;
   display: flex;
@@ -196,7 +196,7 @@
   background-color: var(--uikit-color-theme-6);
   color: #fff;
 }
-.avatar__skeleton[data-v-06122a77] {
+._avatar__skeleton_bq44a_78 {
   width: 100%;
   height: 100%;
   background-color: #e6e6e6;
@@ -205,7 +205,7 @@
   left: 0;
   z-index: 1;
 }
-.avatar__skeleton[data-v-06122a77]::after {
+._avatar__skeleton_bq44a_78::after {
   content: "";
   position: absolute;
   top: 0;
@@ -213,16 +213,16 @@
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-  animation: shimmer-06122a77 1.2s ease-in-out infinite;
+  animation: _shimmer_bq44a_1 1.2s ease-in-out infinite;
 }
-@keyframes shimmer-06122a77 {
+@keyframes _shimmer_bq44a_1 {
 0% {
     transform: translateX(-100%);
 }
 100% {
     transform: translateX(100%);
 }
-}.setting-item[data-v-dce9a70b] {
+}._setting-item_bjdj6_1 {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -231,71 +231,72 @@
   border-bottom: 0.5px solid var(--stroke-color-module);
   gap: 8px;
 }
-.setting-item[data-v-dce9a70b]:last-child {
+._setting-item_bjdj6_1:last-child {
   border-bottom: none;
 }
-.setting-item--disabled[data-v-dce9a70b] {
+._setting-item--disabled_bjdj6_13 {
   color: var(--text-color-disabled);
   pointer-events: none;
 }
-.setting-item--disabled .setting-item__switch-slider[data-v-dce9a70b] {
+._setting-item--disabled_bjdj6_13 ._setting-item__switch-slider_bjdj6_17 {
   background-color: var(--fill-color-disabled);
 }
-.setting-item--switch[data-v-dce9a70b] {
+._setting-item--switch_bjdj6_20 {
   gap: 16px;
   flex-direction: row;
   justify-content: space-between;
 }
-.setting-item__label[data-v-dce9a70b] {
+._setting-item__label_bjdj6_25 {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-color-primary);
 }
-.setting-item__content-wrapper[data-v-dce9a70b] {
+._setting-item__content-wrapper_bjdj6_30 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 24px;
 }
-.setting-item__content[data-v-dce9a70b] {
+._setting-item__content_bjdj6_30 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex: 1;
   gap: 8px;
 }
-.setting-item__value[data-v-dce9a70b] {
+._setting-item__value_bjdj6_43 {
   flex: 1;
   font-size: 14px;
   word-break: break-word;
   color: var(--text-color-secondary);
 }
-.setting-item__placeholder[data-v-dce9a70b] {
-  color: var(--text-color-placeholder);
+._setting-item__value--placeholder_bjdj6_49 {
+  font-style: italic;
+  color: var(--text-color-tertiary);
 }
-.setting-item__switch[data-v-dce9a70b] {
+._setting-item__switch_bjdj6_17 {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 20px;
   cursor: pointer;
 }
-.setting-item__switch-input[data-v-dce9a70b] {
+._setting-item__switch-input_bjdj6_60 {
   opacity: 0;
   width: 0;
   height: 0;
 }
-.setting-item__switch-input:checked + .setting-item__switch-slider[data-v-dce9a70b] {
+._setting-item__switch-input_bjdj6_60:checked + ._setting-item__switch-slider_bjdj6_17 {
   background-color: var(--switch-color-on);
 }
-.setting-item__switch-input:checked + .setting-item__switch-slider[data-v-dce9a70b]:before {
+._setting-item__switch-input_bjdj6_60:checked + ._setting-item__switch-slider_bjdj6_17:before {
   transform: translateX(20px);
 }
-.setting-item__switch-input:disabled + .setting-item__switch-slider[data-v-dce9a70b] {
+._setting-item__switch-input_bjdj6_60:disabled + ._setting-item__switch-slider_bjdj6_17 {
   cursor: not-allowed;
   background-color: var(--fill-color-disabled);
 }
-.setting-item__switch-slider[data-v-dce9a70b] {
+._setting-item__switch-slider_bjdj6_17 {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -306,7 +307,7 @@
   transition: 0.2s;
   background-color: var(--switch-color-off);
 }
-.setting-item__switch-slider[data-v-dce9a70b]:before {
+._setting-item__switch-slider_bjdj6_17:before {
   position: absolute;
   content: "";
   height: 16px;
@@ -317,13 +318,13 @@
   transition: 0.2s;
   background-color: white;
 }
-.setting-item__edit-container[data-v-dce9a70b] {
+._setting-item__edit-container_bjdj6_97 {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%;
 }
-.setting-item__input[data-v-dce9a70b], .setting-item__textarea[data-v-dce9a70b] {
+._setting-item__input_bjdj6_103, ._setting-item__textarea_bjdj6_103 {
   width: 100%;
   padding: 8px 12px;
   border-radius: 4px;
@@ -333,31 +334,31 @@
   border: 1px solid var(--stroke-color-module);
   color: var(--text-color-primary);
 }
-.setting-item__input[data-v-dce9a70b]:focus, .setting-item__textarea[data-v-dce9a70b]:focus {
+._setting-item__input_bjdj6_103:focus, ._setting-item__textarea_bjdj6_103:focus {
   outline: none;
   border-color: var(--primary-color);
 }
-.setting-item__input[data-v-dce9a70b]::placeholder, .setting-item__textarea[data-v-dce9a70b]::placeholder {
+._setting-item__input_bjdj6_103::placeholder, ._setting-item__textarea_bjdj6_103::placeholder {
   color: var(--text-color-placeholder);
 }
-.setting-item__input--error[data-v-dce9a70b], .setting-item__textarea--error[data-v-dce9a70b] {
+._setting-item__input--error_bjdj6_120, ._setting-item__textarea--error_bjdj6_120 {
   border-color: var(--error-color);
 }
-.setting-item__textarea[data-v-dce9a70b] {
+._setting-item__textarea_bjdj6_103 {
   resize: vertical;
   min-height: 60px;
 }
-.setting-item__error[data-v-dce9a70b] {
+._setting-item__error_bjdj6_127 {
   font-size: 12px;
   margin-top: 4px;
   color: var(--error-color);
 }
-.setting-item__actions[data-v-dce9a70b] {
+._setting-item__actions_bjdj6_132 {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
 }
-.setting-item__btn--cancel[data-v-dce9a70b], .setting-item__btn--confirm[data-v-dce9a70b] {
+._setting-item__btn--cancel_bjdj6_137, ._setting-item__btn--confirm_bjdj6_137 {
   min-width: 60px;
   height: 32px;
   font-size: 12px;
@@ -869,21 +870,21 @@
 }
 .group-actions__button[data-v-52ab1c35] {
   width: 100%;
-}.group-info__item[data-v-34eb1395] {
+}.group-info__item[data-v-24700623] {
   padding: 10px 0;
   border-bottom: 0.5px solid var(--stroke-color-module);
 }
-.group-info__item[data-v-34eb1395]:last-child {
+.group-info__item[data-v-24700623]:last-child {
   border-bottom: none;
 }
-.group-info__label[data-v-34eb1395] {
+.group-info__label[data-v-24700623] {
   font-size: 14px;
   font-weight: bold;
   line-height: 1.4;
   margin-bottom: 8px;
   color: var(--text-color-primary);
 }
-.group-info__value[data-v-34eb1395] {
+.group-info__value[data-v-24700623] {
   flex: 1;
   font-size: 14px;
   line-height: 1.5;
@@ -1174,7 +1175,7 @@
   *   @include multi-line-ellipsis(3);
   * }
   */
-.chat-setting[data-v-a1f959d8] {
+.chat-setting[data-v-4b04ef29] {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -1183,130 +1184,13 @@
   overflow: auto;
   -ms-overflow-style: none;
 }
-.chat-setting[data-v-a1f959d8]::-webkit-scrollbar {
+.chat-setting[data-v-4b04ef29]::-webkit-scrollbar {
   display: none;
 }
 @supports (scrollbar-width: none) {
-.chat-setting[data-v-a1f959d8] {
+.chat-setting[data-v-4b04ef29] {
     scrollbar-width: none;
 }
-}._conversationPlaceHolder_15avc_1 {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: var(--text-color-secondary, #666);
-  font-size: 14px;
-}
-._conversationPlaceHolder__icon_15avc_10 {
-  margin-bottom: 16px;
-}
-._conversationPlaceHolder__label_15avc_13 {
-  margin-bottom: 16px;
-  text-align: center;
-}
-._conversationPlaceHolder__loading_15avc_18 {
-  width: 42px;
-  height: 42px;
-  animation: _spin_15avc_1 1s linear infinite;
-}
-._conversationPlaceHolder-empty_15avc_24 ._conversationPlaceHolder__emptyIcon_15avc_24 {
-  width: 42px;
-  height: 42px;
-  opacity: 0.5;
-  color: var(--text-color-secondary, #666);
-}
-._conversationPlaceHolder-error_15avc_31 ._conversationPlaceHolder__errorIcon_15avc_31 {
-  width: 42px;
-  height: 42px;
-  opacity: 0.5;
-  color: var(--text-color-secondary, #666);
-}
-@keyframes _spin_15avc_1 {
-0% {
-    transform: rotate(0deg);
-}
-100% {
-    transform: rotate(360deg);
-}
-}._popup_milgd_1 {
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  max-width: 300px;
-  max-height: 400px;
-  overflow: auto;
-}
-.popup-enter-active,
-.popup-leave-active {
-  transition: opacity 0.2s ease;
-}
-.popup-enter-from,
-.popup-leave-to {
-  opacity: 0;
-}._conversationActions_15ko6_1 {
-  position: relative;
-}
-._conversationActions__popup-icon_15ko6_4 {
-  padding: 4px 8px;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-}
-._conversationActions__popup-icon_15ko6_4:hover {
-  background-color: var(--hover-bg-color, #f0f0f0);
-}
-._conversationActions__popup-icon_15ko6_4 ._more-icon_15ko6_13 {
-  font-size: 16px;
-  color: var(--text-color-secondary, #666);
-  font-weight: bold;
-}
-._conversationActions__container_15ko6_18 {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  border-radius: 4px;
-  box-shadow: 0 0 10px var(--shadow-color);
-  background-color: var(--bg-color-operate);
-  z-index: 100;
-  min-width: 120px;
-}
-._conversationActions__h5__container_15ko6_28 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--bg-color-operate);
-  border-radius: 8px 8px 0 0;
-  box-shadow: 0 0 10px var(--shadow-color);
-  z-index: 100;
-  padding: 16px;
-}
-._conversationActions__item_15ko6_39 {
-  padding: 8px 12px;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--text-color-primary, #333);
-  border-bottom: 1px solid var(--stroke-color-primary, #f0f0f0);
-  transition: background-color 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-._conversationActions__item_15ko6_39:hover {
-  background-color: var(--dropdown-color-active, #f8f9fa);
-}
-._conversationActions__item_15ko6_39:last-child {
-  border-bottom: none;
-}
-._conversationActions__item--delete_15ko6_56 {
-  color: var(--text-color-error, #dc3545);
-}
-._conversationActions__item_15ko6_39 ._action-icon_15ko6_59 {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
 }:root[tui-theme-mode=dark],
 ._tui-theme-dark_1ismi_2 {
   --uikit-color-theme-1: #1C2333;
@@ -4164,7 +4048,7 @@ to {
 ._SearchBar--h5_1ob40_391 {
   padding: 10px;
 }:root[tui-theme-mode=dark],
-._tui-theme-dark_52nci_2 {
+._tui-theme-dark_nedju_2 {
   --uikit-color-theme-1: #1C2333;
   --uikit-color-theme-2: #243047;
   --uikit-color-theme-3: #2F4875;
@@ -4301,7 +4185,7 @@ to {
   --tab-color-option: var(--uikit-color-gray-4);
 }
 :root[tui-theme-mode=light],
-._tui-theme-light_52nci_140 {
+._tui-theme-light_nedju_140 {
   --uikit-color-theme-1: #EBF3FF;
   --uikit-color-theme-2: #CCE2FF;
   --uikit-color-theme-3: #ADCFFF;
@@ -4454,27 +4338,27 @@ to {
   --tui-toast-round-radius: 8px;
   --tui-dialog-round-radius: 20px;
 }
-._conversationItem_52nci_295 {
+._conversationItem_nedju_295 {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   width: 100%;
 }
-._avatarWrapper_52nci_302 {
+._avatarWrapper_nedju_302 {
   flex-shrink: 0;
 }
-._conversationContent_52nci_306 {
+._conversationContent_nedju_306 {
   flex: 1;
   min-width: 0;
   max-width: 100%;
 }
-._conversationHeader_52nci_312 {
+._conversationHeader_nedju_312 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 4px;
 }
-._name_52nci_319 {
+._name_nedju_319 {
   font-weight: 500;
   font-size: 14px;
   overflow: hidden;
@@ -4482,7 +4366,7 @@ to {
   white-space: nowrap;
   color: var(--text-color-primary);
 }
-._showText_52nci_328 {
+._showText_nedju_328 {
   font-size: 12px;
   line-height: 1.5;
   overflow: hidden;
@@ -4492,13 +4376,6 @@ to {
   -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
-}
-.highlight {
-  background-color: var(--bg-color-operate);
-  color: var(--text-color-link);
-  padding: 0 2px;
-  border-radius: 2px;
-  font-weight: 500;
 }:root[tui-theme-mode=dark],
 ._tui-theme-dark_vb7mm_2 {
   --uikit-color-theme-1: #1C2333;
@@ -6531,7 +6408,7 @@ to {
     transform: rotate(360deg);
 }
 }:root[tui-theme-mode=dark],
-._tui-theme-dark_1vpet_2 {
+._tui-theme-dark_o1nv0_2 {
   --uikit-color-theme-1: #1C2333;
   --uikit-color-theme-2: #243047;
   --uikit-color-theme-3: #2F4875;
@@ -6668,7 +6545,7 @@ to {
   --tab-color-option: var(--uikit-color-gray-4);
 }
 :root[tui-theme-mode=light],
-._tui-theme-light_1vpet_140 {
+._tui-theme-light_o1nv0_140 {
   --uikit-color-theme-1: #EBF3FF;
   --uikit-color-theme-2: #CCE2FF;
   --uikit-color-theme-3: #ADCFFF;
@@ -6821,7 +6698,7 @@ to {
   --tui-toast-round-radius: 8px;
   --tui-dialog-round-radius: 20px;
 }
-._SearchResults_1vpet_295 {
+._SearchResults_o1nv0_295 {
   flex: 1;
   overflow: hidden;
   padding-right: 8px;
@@ -6830,7 +6707,7 @@ to {
   gap: 20px;
   background-color: var(--bg-color-dialog);
 }
-._SearchResults__section-header_1vpet_305 {
+._SearchResults__section-header_o1nv0_305 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -6840,16 +6717,16 @@ to {
   z-index: 1;
   background-color: var(--bg-color-operate);
 }
-._SearchResults__section-header_1vpet_305 h3 {
+._SearchResults__section-header_o1nv0_305 h3 {
   margin: 0;
   font-size: 14px;
   font-weight: 400;
   color: var(--text-color-secondary);
 }
-._SearchResults__item-border_1vpet_322 {
+._SearchResults__item-border_o1nv0_322 {
   position: relative;
 }
-._SearchResults__item-border_1vpet_322::before {
+._SearchResults__item-border_o1nv0_322::before {
   content: "";
   position: absolute;
   bottom: 0;
@@ -6858,7 +6735,7 @@ to {
   height: 1px;
   background-color: var(--shadow-color);
 }
-._SearchResults__load-more-button_1vpet_335 {
+._SearchResults__load-more-button_o1nv0_335 {
   border: none;
   background: none;
   color: var(--text-color-link);
@@ -6868,11 +6745,11 @@ to {
   line-height: 20px;
   padding: 20px 20px 10px;
 }
-._SearchResults__load-more-button_1vpet_335:disabled {
+._SearchResults__load-more-button_o1nv0_335:disabled {
   color: var(--text-color-disabled);
   cursor: not-allowed;
 }
-._SearchResults__list_1vpet_350 {
+._SearchResults__list_o1nv0_350 {
   flex: 1;
   overflow-y: auto;
   display: flex;
@@ -6881,39 +6758,39 @@ to {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-._SearchResults__list_1vpet_350::-webkit-scrollbar {
+._SearchResults__list_o1nv0_350::-webkit-scrollbar {
   display: none;
 }
-._SearchResults__error_1vpet_363 {
+._SearchResults__error_o1nv0_363 {
   padding: 16px;
   text-align: center;
   color: var(--text-color-error);
 }
-._SearchResults__load-more-container_1vpet_369 {
+._SearchResults__load-more-container_o1nv0_369 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
 }
-._SearchResults__load-more-error_1vpet_376 {
+._SearchResults__load-more-error_o1nv0_376 {
   color: var(--text-color-error);
   font-size: 12px;
   text-align: center;
 }
-._SearchResults__section-header-title_1vpet_382 {
+._SearchResults__section-header-title_o1nv0_382 {
   font-size: 14px;
   color: var(--text-color-secondary);
   margin: 0;
   padding: 0 12px;
 }
-._SearchResults__highlight_1vpet_389 {
+._SearchResults__highlight_o1nv0_389 {
   color: var(--text-color-link);
   font-weight: normal;
 }
-._SearchResults__item--active_1vpet_394 {
+._SearchResults__item--active_o1nv0_394 {
   background-color: var(--list-color-focused);
 }
-._SearchResults__section-header-action_1vpet_398 {
+._SearchResults__section-header-action_o1nv0_398 {
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -6923,14 +6800,14 @@ to {
   cursor: pointer;
   padding: 0;
 }
-._SearchResults--embedded_1vpet_409 {
+._SearchResults--embedded_o1nv0_409 {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--bg-color-dialog);
 }
-._SearchResults__message-detail-page_1vpet_417 {
+._SearchResults__message-detail-page_o1nv0_417 {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -6941,7 +6818,7 @@ to {
   z-index: 1000;
   background: var(--bg-color-dialog);
 }
-._SearchResults__message-detail-header_1vpet_429 {
+._SearchResults__message-detail-header_o1nv0_429 {
   display: flex;
   align-items: center;
   padding: 12px;
@@ -6951,17 +6828,7 @@ to {
   top: 0;
   z-index: 1;
 }
-._SearchResults__back-button_1vpet_440 {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-color-primary);
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-._SearchResults__message-detail-title_1vpet_451 {
+._SearchResults__message-detail-title_o1nv0_440 {
   flex: 1;
   font-size: 14px;
   color: var(--text-color-secondary);
@@ -6972,26 +6839,30 @@ to {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._SearchResults__message-detail-content_1vpet_463 {
+._SearchResults__message-detail-content_o1nv0_452 {
   flex: 1;
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
-._SearchResults__message-detail-content_1vpet_463::-webkit-scrollbar {
+._SearchResults__message-detail-content_o1nv0_452::-webkit-scrollbar {
   display: none;
 }
-._SearchResults__result-section_1vpet_473 {
+._SearchResults__result-section_o1nv0_462 {
   display: flex;
   flex-direction: column;
 }
-._SearchResults__result-items_1vpet_478 {
+._SearchResults__result-items_o1nv0_467 {
   display: flex;
   flex-direction: column;
 }
-._SearchResults__section-footer_1vpet_483 {
+._SearchResults__section-footer_o1nv0_472 {
   display: flex;
   padding: 10px 0;
+}
+.highlight {
+  color: var(--text-color-link);
+  font-weight: 500;
 }:root[tui-theme-mode=dark],
 ._tui-theme-dark_9g3ao_2 {
   --uikit-color-theme-1: #1C2333;
@@ -7291,379 +7162,1359 @@ to {
   background-color: var(--bg-color-operate);
   border-radius: 8px;
   overflow: hidden;
-}._conversationSearch_1cu1j_1 {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
+}.contact-search[data-v-891f06be] {
   position: relative;
-  overflow: hidden;
   background-color: var(--bg-color-operate);
+}
+.contact-search__pre-search[data-v-891f06be] {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  gap: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.contact-search__add[data-v-891f06be] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background-color: var(--bg-color-input);
   color: var(--text-color-primary);
 }
-._conversationSearch__bar_1cu1j_11 {
-  padding-left: 0;
-  padding-right: 0;
+.contact-search__label[data-v-891f06be] {
+  font-size: 14px;
+  color: var(--text-color-primary);
 }
-._conversationSearch--active_1cu1j_15 {
+.contact-search--active[data-v-891f06be] {
+  background-color: var(--bg-color-operate);
   position: absolute;
-  width: 100%;
-  height: 100%;
+  z-index: 10;
   top: 0;
   left: 0;
-  z-index: 11;
-}
-._conversationSearch--active_1cu1j_15 ._SearchBar_1cu1j_23 {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-._conversationSearch__box_1cu1j_27 {
+  width: 100%;
   height: 100%;
 }
-._conversationSearch__advanced_1cu1j_30 {
-  width: 960px !important;
-  height: 600px;
+[data-v-891f06be] .contact-search__search-bar-box {
+  display: flex;
+  align-items: center;
+  padding: 2px 20px 2px 0;
 }
-._conversationSearch__advanced--h5_1cu1j_34 {
-  width: 100% !important;
-  height: 100% !important;
-  max-width: 100% !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
+[data-v-891f06be] .contact-search__search-bar {
+  flex: 1;
 }
-._searchBtn_1cu1j_42 {
-  display: flex;
-  justify-content: flex-end;
+[data-v-891f06be] .contact-search__cancel {
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+[data-v-891f06be] .contact-search__cancel:hover {
+  color: var(--text-color-primary);
+}.groupApplicationItem[data-v-3454fabc] {
   padding: 12px 20px;
-}._conversation-create-button_1i56h_1 {
   display: flex;
   align-items: center;
+  gap: 16px;
   cursor: pointer;
-  color: var(--text-color-link);
-  margin-right: 10px;
-}._conversationGroupTypeInfo_b57tz_1 {
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px;
-  overflow-y: scroll;
-  color: var(--text-color-primary);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  transition: background-color 0.2s ease;
 }
-._conversationGroupTypeInfo_b57tz_1::-webkit-scrollbar {
-  display: none;
+.groupApplicationItem[data-v-3454fabc]:hover {
+  background-color: var(--list-color-focused);
+}
+.groupApplicationItem--active[data-v-3454fabc] {
+  background-color: var(--list-color-hover);
+}
+.groupApplicationItem[data-v-3454fabc]:last-child {
+  border-bottom: none;
+}
+.groupApplicationItem__avatar[data-v-3454fabc] {
+  flex-shrink: 0;
 }
-._conversationGroupTypeInfo__box_b57tz_13 {
+.groupApplicationItem__content[data-v-3454fabc] {
   display: flex;
+  gap: 4px;
   flex-direction: column;
-  gap: 8px;
-  border-radius: 16px;
-  padding: 12px 16px;
-  margin-top: 12px;
-  cursor: pointer;
-  background-color: var(--bg-color-operate);
-  border: 1px solid var(--stroke-color-primary);
+  flex: 1;
+  min-width: 0;
 }
-._conversationGroupTypeInfo__box_b57tz_13:hover {
-  border: 1px solid var(--text-color-link);
+.groupApplicationItem__name[data-v-3454fabc] {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color-primary);
 }
-._conversationGroupTypeInfo__box--active_b57tz_27 {
-  border: 1px solid var(--text-color-link);
+.groupApplicationItem__text[data-v-3454fabc] {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color-tertiary);
 }
-._conversationGroupTypeInfo__title_b57tz_30 {
-  font-size: 16px;
+.groupApplicationItem__actions[data-v-3454fabc] {
+  display: flex;
+  align-items: flex-start;
+}.friendApplicationItem[data-v-c8f99e49] {
+  padding: 12px 20px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
 }
-._conversationGroupTypeInfo__description_b57tz_36 {
-  font-size: 12px;
-  line-height: 16px;
-  text-align: justify;
-  hyphens: auto;
+.friendApplicationItem[data-v-c8f99e49]:hover {
+  background-color: var(--list-color-focused);
 }
-._conversationGroupTypeInfo__document_b57tz_42 {
-  font-size: 16px;
-  text-align: justify;
-  text-decoration: none;
-  margin: 1rem auto;
+.friendApplicationItem--active[data-v-c8f99e49] {
+  background-color: var(--list-color-hover);
 }
-._conversationGroupTypeInfo__document_b57tz_42:link, ._conversationGroupTypeInfo__document_b57tz_42:active, ._conversationGroupTypeInfo__document_b57tz_42:visited {
-  color: var(--text-color-link);
+.friendApplicationItem[data-v-c8f99e49]:last-child {
+  border-bottom: none;
 }
-._conversationGroupTypeInfo__activeIcon_b57tz_51 {
-  fill: var(--text-color-link) !important;
-}._conversationCreateGroupDetail__nextContainer_17evk_1 {
-  width: 100%;
+.friendApplicationItem__avatar[data-v-c8f99e49] {
   display: flex;
-  justify-content: center;
-  margin: 20px auto 10px;
-}
-._conversationCreateGroupDetail__next_17evk_1 {
-  cursor: pointer;
-  text-align: center;
-  border-radius: 31px;
-  font-size: 14px;
-  padding: 12px 36px;
-  background-color: var(--text-color-link);
+  align-items: center;
 }
-._conversationCreateGroupDetail__main_17evk_15 {
+.friendApplicationItem__content[data-v-c8f99e49] {
   display: flex;
+  gap: 4px;
   flex-direction: column;
-  padding: 0 10px;
-  overflow-y: auto;
-  color: var(--text-color-primary);
-}
-._conversationCreateGroupDetail__box_17evk_22 {
-  padding: 10px 0;
+  flex: 1;
+  min-width: 0;
+}
+.friendApplicationItem__name[data-v-c8f99e49] {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color-primary);
+}
+.friendApplicationItem__text[data-v-c8f99e49] {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color-tertiary);
+}
+.friendApplicationItem__actions[data-v-c8f99e49] {
+  display: flex;
+  align-items: flex-start;
+}.blacklist-item[data-v-2ae9597c] {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+.blacklist-item[data-v-2ae9597c]:hover {
+  background-color: var(--bg-color-secondary);
+}
+.blacklist-item[data-v-2ae9597c]:focus {
+  outline: none;
+  background-color: var(--bg-color-secondary);
+}
+.blacklist-item--active[data-v-2ae9597c] {
+  background-color: var(--list-color-hover);
+}
+.blacklist-item__avatar[data-v-2ae9597c] {
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+.blacklist-item__content[data-v-2ae9597c] {
+  flex: 1;
+  min-width: 0;
+}
+.blacklist-item__name[data-v-2ae9597c] {
+  font-size: 14px;
+  color: var(--text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.group-item[data-v-35660a00] {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+.group-item[data-v-35660a00]:hover {
+  background-color: var(--bg-color-secondary);
+}
+.group-item[data-v-35660a00]:focus {
+  outline: none;
+  background-color: var(--bg-color-secondary);
+}
+.group-item--active[data-v-35660a00] {
+  background-color: var(--list-color-hover);
+}
+.group-item__avatar[data-v-35660a00] {
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+.group-item__content[data-v-35660a00] {
+  flex: 1;
+  min-width: 0;
+}
+.group-item__name[data-v-35660a00] {
+  font-size: 14px;
+  color: var(--text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.friend-item[data-v-af605c50] {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+.friend-item[data-v-af605c50]:hover {
+  background-color: var(--bg-color-secondary);
+}
+.friend-item[data-v-af605c50]:focus {
+  outline: none;
+  background-color: var(--bg-color-secondary);
+}
+.friend-item--active[data-v-af605c50] {
+  background-color: var(--list-color-hover);
+}
+.friend-item__avatar[data-v-af605c50] {
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+.friend-item__content[data-v-af605c50] {
+  flex: 1;
+  min-width: 0;
+}
+.friend-item__name[data-v-af605c50] {
+  font-size: 14px;
+  color: var(--text-color-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.contact-list[data-v-67413a61] {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-operate);
+}
+.contact-list__container[data-v-67413a61] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.contact-list__main[data-v-67413a61] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.contact-list__search[data-v-67413a61] {
+  padding: 12px;
+  border-bottom: 1px solid var(--divider-color);
+}
+.contact-list__content[data-v-67413a61] {
+  flex: 1;
+  overflow-y: auto;
+  overflow: auto;
+  -ms-overflow-style: none;
+  padding: 6px 0;
+  display: flex;
+  flex-direction: column;
+}
+.contact-list__content[data-v-67413a61]::-webkit-scrollbar {
+  display: none;
+}
+@supports (scrollbar-width: none) {
+.contact-list__content[data-v-67413a61] {
+    scrollbar-width: none;
+}
+}
+.contact-list__group[data-v-67413a61] {
+  margin-bottom: 8px;
+}
+.contact-list__group-header[data-v-67413a61] {
+  padding: 8px 20px;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.2s;
+}
+.contact-list__group-header[data-v-67413a61]:hover {
+  background-color: var(--bg-color-secondary);
+}
+.contact-list__group-header[data-v-67413a61]:focus {
+  outline: none;
+  background-color: var(--bg-color-secondary);
+}
+.contact-list__group-title[data-v-67413a61] {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  gap: 8px;
+  flex: 1;
+}
+.contact-list__group-icon[data-v-67413a61] {
+  color: var(--text-color-secondary);
+  transform: rotate(-90deg);
+  transition: transform 0.2s ease;
+}
+.contact-list__group-icon--expanded[data-v-67413a61] {
+  transform: rotate(0deg);
+}
+.contact-list__group-name[data-v-67413a61] {
+  flex: 1;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 400;
+}
+.contact-list__unread-badge[data-v-67413a61] {
+  background-color: var(--text-color-error);
+  color: var(--bg-color-topbar);
+  border-radius: 16px;
+  padding: 2px 6px;
+  font-size: 12px;
+  min-width: 16px;
+  height: 16px;
+  text-align: center;
+  margin-left: 8px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+}
+.contact-list__group-content[data-v-67413a61] {
+  background-color: var(--bg-color-operate);
+  padding: 0;
+}
+.contact-list__empty[data-v-67413a61] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--text-color-tertiary);
+  flex-direction: column;
+}
+.contact-list__empty-text[data-v-67413a61] {
+  font-size: 14px;
+  margin-top: 16px;
+}/**
+  * Multi-line ellipsis
+  * @param {Number} $lines - The number of lines to show. Default is 2.
+  * @usage
+  * .class {
+  *   @include multi-line-ellipsis();
+  * }
+  * .class {
+  *   @include multi-line-ellipsis(3);
+  * }
+  */
+.contact-search-group-info[data-v-2b2eb5ec] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+.contact-search-group-info__header[data-v-2b2eb5ec] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.contact-search-group-info__main-info[data-v-2b2eb5ec] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+.contact-search-group-info__name[data-v-2b2eb5ec] {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.contact-search-group-info__id[data-v-2b2eb5ec],
+.contact-search-group-info__intro[data-v-2b2eb5ec] {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.contact-search-group-info__status[data-v-2b2eb5ec] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  text-align: center;
+  font-size: 14px;
+}
+.contact-search-group-info__status--success[data-v-2b2eb5ec] {
+  background-color: var(--success-color-bg);
+  color: var(--success-color);
+}
+.contact-search-group-info__status--error[data-v-2b2eb5ec] {
+  background-color: var(--error-color-bg);
+  color: var(--error-color);
+}
+.contact-search-group-info__form[data-v-2b2eb5ec] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.contact-search-group-info__form-label[data-v-2b2eb5ec] {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+}
+.contact-search-group-info__form-input-wrapper[data-v-2b2eb5ec] {
   position: relative;
+  background-color: var(--bg-color-operate);
+}
+.contact-search-group-info__form-input[data-v-2b2eb5ec] {
+  width: 100%;
+  height: 80px;
+  padding: 8px 12px;
+  border: none;
+  font-size: 14px;
+  color: var(--text-color-primary);
+  resize: none;
+  overflow: auto;
+  -ms-overflow-style: none;
+}
+.contact-search-group-info__form-input[data-v-2b2eb5ec]::-webkit-scrollbar {
+  display: none;
+}
+@supports (scrollbar-width: none) {
+.contact-search-group-info__form-input[data-v-2b2eb5ec] {
+    scrollbar-width: none;
+}
+}
+.contact-search-group-info__form-input[data-v-2b2eb5ec]:focus {
+  outline: none;
+  border: none;
+}
+.contact-search-group-info__form-counter[data-v-2b2eb5ec] {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: var(--text-color-secondary);
+}
+.contact-search-group-info__actions[data-v-2b2eb5ec] {
+  padding-top: 64px;
+  display: flex;
+  justify-content: center;
+}/**
+  * Multi-line ellipsis
+  * @param {Number} $lines - The number of lines to show. Default is 2.
+  * @usage
+  * .class {
+  *   @include multi-line-ellipsis();
+  * }
+  * .class {
+  *   @include multi-line-ellipsis(3);
+  * }
+  */
+.contact-search-user-info[data-v-59ef3830] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+.contact-search-user-info__header[data-v-59ef3830] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.contact-search-user-info__main-info[data-v-59ef3830] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+.contact-search-user-info__name[data-v-59ef3830] {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.contact-search-user-info__id[data-v-59ef3830],
+.contact-search-user-info__intro[data-v-59ef3830] {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.contact-search-user-info__status[data-v-59ef3830] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  text-align: center;
+  font-size: 14px;
+}
+.contact-search-user-info__status--success[data-v-59ef3830] {
+  background-color: var(--success-color-bg);
+  color: var(--success-color);
+}
+.contact-search-user-info__status--error[data-v-59ef3830] {
+  background-color: var(--error-color-bg);
+  color: var(--error-color);
+}
+.contact-search-user-info__form[data-v-59ef3830] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.contact-search-user-info__form-label[data-v-59ef3830] {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+}
+.contact-search-user-info__form-input-wrapper[data-v-59ef3830] {
+  position: relative;
+  background-color: var(--bg-color-operate);
+}
+.contact-search-user-info__form-input[data-v-59ef3830] {
+  width: 100%;
+  height: 80px;
+  padding: 8px 12px;
+  border: none;
+  font-size: 14px;
+  color: var(--text-color-primary);
+  resize: none;
+  overflow: auto;
+  -ms-overflow-style: none;
+}
+.contact-search-user-info__form-input[data-v-59ef3830]::-webkit-scrollbar {
+  display: none;
+}
+@supports (scrollbar-width: none) {
+.contact-search-user-info__form-input[data-v-59ef3830] {
+    scrollbar-width: none;
+}
+}
+.contact-search-user-info__form-input[data-v-59ef3830]:focus {
+  outline: none;
+  border: none;
+}
+.contact-search-user-info__form-counter[data-v-59ef3830] {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: var(--text-color-secondary);
+}
+.contact-search-user-info__actions[data-v-59ef3830] {
+  padding-top: 64px;
+  display: flex;
+  justify-content: center;
+}/**
+  * Multi-line ellipsis
+  * @param {Number} $lines - The number of lines to show. Default is 2.
+  * @usage
+  * .class {
+  *   @include multi-line-ellipsis();
+  * }
+  * .class {
+  *   @include multi-line-ellipsis(3);
+  * }
+  */
+.contact-group-application-info[data-v-8608f244] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+.contact-group-application-info__header[data-v-8608f244] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.contact-group-application-info__main-info[data-v-8608f244] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+.contact-group-application-info__name[data-v-8608f244] {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.contact-group-application-info__id[data-v-8608f244],
+.contact-group-application-info__intro[data-v-8608f244] {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.contact-group-application-info__rows[data-v-8608f244] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding: 32px 0 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.contact-group-application-info__row[data-v-8608f244] {
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+  gap: 20px;
+}
+.contact-group-application-info__row-label[data-v-8608f244] {
+  font-size: 14px;
+  color: var(--text-color-tertiary);
+  font-weight: 400;
+}
+.contact-group-application-info__row-value[data-v-8608f244] {
+  flex: 1;
+  width: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.contact-group-application-info__actions[data-v-8608f244] {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+}/**
+  * Multi-line ellipsis
+  * @param {Number} $lines - The number of lines to show. Default is 2.
+  * @usage
+  * .class {
+  *   @include multi-line-ellipsis();
+  * }
+  * .class {
+  *   @include multi-line-ellipsis(3);
+  * }
+  */
+.contact-friend-application-info[data-v-307dfce7] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+.contact-friend-application-info__header[data-v-307dfce7] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.contact-friend-application-info__main-info[data-v-307dfce7] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+.contact-friend-application-info__name[data-v-307dfce7] {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.contact-friend-application-info__id[data-v-307dfce7],
+.contact-friend-application-info__intro[data-v-307dfce7] {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.contact-friend-application-info__rows[data-v-307dfce7] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding: 32px 0 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.contact-friend-application-info__row[data-v-307dfce7] {
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+  gap: 20px;
+}
+.contact-friend-application-info__row-label[data-v-307dfce7] {
+  font-size: 14px;
+  color: var(--text-color-tertiary);
+  font-weight: 400;
+}
+.contact-friend-application-info__row-value[data-v-307dfce7] {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.contact-friend-application-info__actions[data-v-307dfce7] {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+}/**
+  * Multi-line ellipsis
+  * @param {Number} $lines - The number of lines to show. Default is 2.
+  * @usage
+  * .class {
+  *   @include multi-line-ellipsis();
+  * }
+  * .class {
+  *   @include multi-line-ellipsis(3);
+  * }
+  */
+.contact-blacklist-info[data-v-a0fb4b4a] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+.contact-blacklist-info__header[data-v-a0fb4b4a] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.contact-blacklist-info__main-info[data-v-a0fb4b4a] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+.contact-blacklist-info__name[data-v-a0fb4b4a] {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.contact-blacklist-info__id[data-v-a0fb4b4a],
+.contact-blacklist-info__intro[data-v-a0fb4b4a] {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.contact-blacklist-info__actions[data-v-a0fb4b4a] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  justify-content: center;
+}/**
+  * Multi-line ellipsis
+  * @param {Number} $lines - The number of lines to show. Default is 2.
+  * @usage
+  * .class {
+  *   @include multi-line-ellipsis();
+  * }
+  * .class {
+  *   @include multi-line-ellipsis(3);
+  * }
+  */
+.contact-group-info[data-v-8f45a224] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+.contact-group-info__header[data-v-8f45a224] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.contact-group-info__main-info[data-v-8f45a224] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+.contact-group-info__name[data-v-8f45a224] {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.contact-group-info__id[data-v-8f45a224],
+.contact-group-info__intro[data-v-8f45a224] {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.contact-group-info__actions[data-v-8f45a224] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}/**
+  * Multi-line ellipsis
+  * @param {Number} $lines - The number of lines to show. Default is 2.
+  * @usage
+  * .class {
+  *   @include multi-line-ellipsis();
+  * }
+  * .class {
+  *   @include multi-line-ellipsis(3);
+  * }
+  */
+.contact-friend-info[data-v-5772bab5] {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+.contact-friend-info__header[data-v-5772bab5] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+.contact-friend-info__main-info[data-v-5772bab5] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+.contact-friend-info__name[data-v-5772bab5] {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.contact-friend-info__id[data-v-5772bab5],
+.contact-friend-info__intro[data-v-5772bab5] {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.contact-friend-info__rows[data-v-5772bab5] {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding: 32px 0 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.contact-friend-info__row[data-v-5772bab5] {
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+  gap: 20px;
+}
+.contact-friend-info__row-label[data-v-5772bab5] {
+  font-size: 14px;
+  color: var(--text-color-tertiary);
+  font-weight: 400;
+}
+.contact-friend-info__row-value[data-v-5772bab5] {
+  flex: 1;
+  width: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.remark-edit[data-v-5772bab5] {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+.remark-edit-icon[data-v-5772bab5] {
+  min-width: 16px;
+}
+.contact-friend-info__actions[data-v-5772bab5] {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}.contact-info[data-v-8050fa88] {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-operate);
+}
+.contact-info__empty[data-v-8050fa88] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-color-secondary);
+}
+.contact-info__header[data-v-8050fa88] {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
 }
-._conversationCreateGroupDetail__inputText_17evk_26 {
-  font-weight: 600;
-  font-size: 16px !important;
-  border-bottom: 1px solid var(--stroke-color-primary);
+.contact-info__title[data-v-8050fa88] {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  line-height: 100%;
+  font-weight: 500;
+  padding-right: 24px;
   color: var(--text-color-primary);
+}._conversationPlaceHolder_15avc_1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--text-color-secondary, #666);
+  font-size: 14px;
 }
-._conversationCreateGroupDetail__inputText_17evk_26::placeholder {
-  font-weight: 400;
+._conversationPlaceHolder__icon_15avc_10 {
+  margin-bottom: 16px;
+}
+._conversationPlaceHolder__label_15avc_13 {
+  margin-bottom: 16px;
+  text-align: center;
+}
+._conversationPlaceHolder__loading_15avc_18 {
+  width: 42px;
+  height: 42px;
+  animation: _spin_15avc_1 1s linear infinite;
+}
+._conversationPlaceHolder-empty_15avc_24 ._conversationPlaceHolder__emptyIcon_15avc_24 {
+  width: 42px;
+  height: 42px;
+  opacity: 0.5;
+  color: var(--text-color-secondary, #666);
+}
+._conversationPlaceHolder-error_15avc_31 ._conversationPlaceHolder__errorIcon_15avc_31 {
+  width: 42px;
+  height: 42px;
+  opacity: 0.5;
+  color: var(--text-color-secondary, #666);
+}
+@keyframes _spin_15avc_1 {
+0% {
+    transform: rotate(0deg);
+}
+100% {
+    transform: rotate(360deg);
+}
+}._conversationActions_1whlo_1 {
+  position: relative;
+}
+._conversationActions__popup-icon_1whlo_4 {
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+._conversationActions__popup-icon_1whlo_4:hover {
+  background-color: var(--hover-bg-color, #f0f0f0);
+}
+._conversationActions__popup-icon_1whlo_4 ._more-icon_1whlo_13 {
   font-size: 16px;
-  color: var(--text-color-tertiary) 40%;
+  color: var(--text-color-secondary, #666);
+  font-weight: bold;
 }
-._conversationCreateGroupDetail__inputReadonly_17evk_37 {
-  position: absolute;
-  z-index: 1;
+._conversationActions__h5_1whlo_18 {
+  z-index: 5;
+  position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background: var(--bg-color-mask);
+}
+._conversationActions__h5__container_1whlo_30 {
+  background-color: var(--bg-color-operate);
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 0 10px var(--shadow-color);
 }
-._conversationCreateGroupDetail__inputTitle_17evk_45 {
+._conversationActions__h5__container_1whlo_30 ._conversationActions__item_1whlo_35 {
+  text-align: center;
   font-weight: 400;
-  font-size: 16px;
-  padding: 0 10px 0 6px;
-  color: var(--text-color-tertiary) 40%;
+  font-size: 17px;
+  line-height: 22px;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--stroke-color-primary);
+  color: var(--button-color-primary-default);
 }
-._conversationCreateGroupDetail__illustrate_17evk_51 {
-  font-size: 12px;
-  line-height: 16px;
-  text-align: justify;
-  padding: 0 14px;
-  hyphens: auto;
-  color: var(--text-color-tertiary) 40%;
+._conversationActions__h5__container_1whlo_30 ._conversationActions__item_1whlo_35:last-child {
+  border-bottom: none;
+  color: var(--text-color-error);
 }
-._conversationCreateGroupDetail__portraitTitle_17evk_59 {
-  font-weight: 600;
+._conversationActions__item_1whlo_35 {
   font-size: 14px;
-  padding: 12px 0 12px 10px;
+  line-height: 19px;
+  padding: 9px 16px;
+  cursor: pointer;
+  font-weight: 400;
+  box-sizing: border-box;
   color: var(--text-color-primary);
 }
-._conversationCreateGroupDetail__portraitInfoContainer_17evk_65 {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-bottom: 10px;
-  padding: 0 10px;
+._conversationActions__item_1whlo_35:hover {
+  background-color: var(--dropdown-color-active);
 }
-._conversationCreateGroupDetail__portraitInfo_17evk_65 {
-  align-items: center;
+._conversationActions__item--delete_1whlo_60 {
+  color: var(--text-color-error);
+}._conversationSearch_1cu1j_1 {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  padding: 6px;
   box-sizing: border-box;
-}
-._conversationCreateGroupDetail__portraitInfoNick_17evk_79 {
-  font-size: 12px;
-  margin-top: 6px;
-  max-width: 48px;
+  position: relative;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}._conversationCreateSelectView_1uvwz_1 {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: flex-start;
-  margin-bottom: 10px;
+  background-color: var(--bg-color-operate);
   color: var(--text-color-primary);
 }
-._conversationCreateSelectView__item_1uvwz_9 {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: calc((100% - 40px) / 5);
-  padding: 6px;
-  box-sizing: border-box;
-  position: relative;
+._conversationSearch__bar_1cu1j_11 {
+  padding-left: 0;
+  padding-right: 0;
 }
-._conversationCreateSelectView__close_1uvwz_19 {
+._conversationSearch--active_1cu1j_15 {
   position: absolute;
-  right: 12px;
+  width: 100%;
+  height: 100%;
   top: 0;
-  z-index: 2;
-  color: var(--text-color-primary);
+  left: 0;
+  z-index: 11;
 }
-._conversationCreateSelectView__nick_1uvwz_26 {
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  text-align: center;
-}._conversationCreateUserSelectList_4afm2_1 {
-  display: flex;
-  flex-direction: column;
+._conversationSearch--active_1cu1j_15 ._SearchBar_1cu1j_23 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+._conversationSearch__box_1cu1j_27 {
   height: 100%;
 }
-._conversationCreateUserSelectList__searchInput_4afm2_6 {
-  padding: 8px 16px;
+._conversationSearch__advanced_1cu1j_30 {
+  width: 960px !important;
+  height: 600px;
 }
-._conversationCreateUserSelectList__user_4afm2_9 {
-  padding: 8px 16px;
+._conversationSearch__advanced--h5_1cu1j_34 {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+}
+._searchBtn_1cu1j_42 {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 20px;
+}._conversation-create-button_1102w_1 {
   display: flex;
   align-items: center;
-  text-align: center;
-  gap: 8px;
   cursor: pointer;
-  color: var(--text-color-link);
+  margin-right: 10px;
 }
-._conversationCreateUserSelectList__user_4afm2_9:hover {
-  background-color: var(--list-color-hover);
+._conversation-create-dropdown_1102w_8 {
+  display: flex;
+  justify-content: center;
+  padding: 5px 10px;
 }
-._conversationCreateUserSelectList__user--active_4afm2_21 {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--text-color-link);
+._conversation-create-list_1102w_14 {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 5px 0;
+  gap: 10px;
 }
-._conversationCreateUserSelectList__userName_4afm2_26 {
-  flex: 1;
-  font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-  text-align: left;
+._conversation-create-list--detail_1102w_23 {
+  padding: 10px 20px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+._conversation-create-item_1102w_30 {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
   color: var(--text-color-primary);
 }
-._conversationCreateUserSelectList__userName--active_4afm2_35 {
-  font-weight: 600;
+._conversation-create-text_1102w_40 {
   font-size: 14px;
-  color: var(--text-color-link);
+  font-weight: 400;
+}._conversationGroupTypeInfo_btocv_1 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: scroll;
+  overflow: auto;
+  -ms-overflow-style: none;
+  color: var(--text-color-primary);
+}
+._conversationGroupTypeInfo_btocv_1::-webkit-scrollbar {
+  display: none;
+}
+@supports (scrollbar-width: none) {
+._conversationGroupTypeInfo_btocv_1 {
+    scrollbar-width: none;
+}
 }
-._conversationCreateUserSelectList__userCheckbox_4afm2_40 {
+._conversationGroupTypeInfo__box_btocv_19 {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-radius: 16px;
+  padding: 12px 16px;
   cursor: pointer;
-  color: var(--text-color-primary);
+  background-color: var(--bg-color-operate);
+  border: 1px solid var(--stroke-color-primary);
+}
+._conversationGroupTypeInfo__box_btocv_19:hover {
+  border: 1px solid var(--text-color-link);
+}
+._conversationGroupTypeInfo__box--active_btocv_32 {
+  border: 1px solid var(--text-color-link);
+}
+._conversationGroupTypeInfo__header_btocv_35 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+._conversationGroupTypeInfo__title_btocv_40 {
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+._conversationGroupTypeInfo__description_btocv_46 {
+  font-size: 12px;
+  line-height: 16px;
+  text-align: justify;
+  hyphens: auto;
+}
+._conversationGroupTypeInfo__document_btocv_52 {
+  font-size: 12px;
+  line-height: 16px;
+  text-decoration: none;
 }
-._conversationCreateUserSelectList__activeIcon_4afm2_44 {
+._conversationGroupTypeInfo__document_btocv_52:link, ._conversationGroupTypeInfo__document_btocv_52:active, ._conversationGroupTypeInfo__document_btocv_52:visited {
   color: var(--text-color-link);
 }
-._conversationCreateUserSelectList__nextContainer_4afm2_47 {
+._conversationGroupTypeInfo__activeIcon_btocv_60 {
+  color: var(--checkbox-color-selected);
+}._conversationCreateGroupDetail_198df_1 {
+  flex: 1;
+  height: 640px;
+  display: flex;
+}
+._conversationCreateGroupDetail--h5_198df_6 {
+  height: 100%;
+}
+._conversationCreateGroupDetail__nextContainer_198df_9 {
   width: 100%;
   display: flex;
   justify-content: center;
   margin: 20px auto 10px;
 }
-._conversationCreateUserSelectList__next_4afm2_47 {
+._conversationCreateGroupDetail__next_198df_9 {
   cursor: pointer;
   text-align: center;
   border-radius: 31px;
   font-size: 14px;
-  color: #fff;
   padding: 12px 36px;
   background-color: var(--text-color-link);
 }
-._conversationCreateUserSelectList__container_4afm2_62 {
-  height: 0;
-  overflow-y: auto;
-  flex: 1 1 auto;
+._conversationCreateGroupDetail__main_198df_23 {
+  display: flex;
+  flex-direction: column;
   padding: 0 10px;
-  scrollbar-width: none;
+  overflow-y: auto;
+  overflow: auto;
   -ms-overflow-style: none;
+  color: var(--text-color-primary);
 }
-._conversationCreateUserSelectList__container_4afm2_62::-webkit-scrollbar {
-  display: none;
-}
-._conversationCreateUserSelectList__list_4afm2_73 {
-  position: relative;
-}
-._conversationCreateUserSelectList__groupContainer_4afm2_76 {
-  width: 100%;
-}
-._conversationCreateUserSelectList__title_4afm2_79 {
-  font-weight: 600;
-  font-size: 12px;
-  padding: 8px 10px;
-  text-align: left;
-  color: var(--text-color-secondary);
+._conversationCreateGroupDetail__main_198df_23::-webkit-scrollbar {
+  display: none;
 }
-._conversationCreateUserSelectList__groupBox_4afm2_86 {
-  width: 100%;
+@supports (scrollbar-width: none) {
+._conversationCreateGroupDetail__main_198df_23 {
+    scrollbar-width: none;
 }
-._conversationCreateUserSelectList__userAvatar_4afm2_89 {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  margin-right: 8px;
 }
-._conversationCreateUserSelectList__userInfo_4afm2_95 {
-  flex: 1;
+._conversationCreateGroupDetail__box_198df_40 {
+  padding: 10px 0;
+  position: relative;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: left;
+  gap: 10px;
+  justify-content: flex-start;
+  align-items: center;
 }
-._conversationCreateUserSelectList__userName_4afm2_26 {
-  font-size: 14px;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+._conversationCreateGroupDetail__inputText_198df_48 {
+  flex: 1;
+  border-bottom: 1px solid var(--stroke-color-primary);
   color: var(--text-color-primary);
 }
-._conversationCreateUserSelectList__userID_4afm2_110 {
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-color-secondary);
-}._conversationCreate__container_sxyih_1 {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-._conversationCreate__main_sxyih_6 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--bg-color-operate);
+._from__label_198df_54 {
+  min-width: 85px;
+  font-weight: 400;
+  font-size: 14px;
   color: var(--text-color-primary);
-  z-index: 100;
+}._conversationCreateUserSelectList_pa6me_1 {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 640px;
 }
-._conversationCreate__header_sxyih_18 {
+._conversationCreateUserSelectList--h5_pa6me_7 {
+  height: 100%;
+  padding: 0 20px;
+}.conversationCreate__container[data-v-bdcdab3b] {
   display: flex;
-  align-items: center;
-  padding: 12px;
-  background-color: var(--bg-color-topbar, #f5f5f5);
+  flex-direction: column;
+  justify-content: center;
 }
-._conversationCreate__icon_sxyih_24 {
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-  color: var(--text-color-link, #e0e0e0);
+.conversationCreate__detail[data-v-bdcdab3b] {
+  flex: 1;
 }
-._conversationCreate__title_sxyih_31 {
-  margin-left: 12px;
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--text-color-primary, #333);
+[data-v-bdcdab3b] .conversationCreate__dialog {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  border-radius: 0;
 }
-._conversationCreate__content_sxyih_37 {
-  flex: 1;
-  overflow: hidden;
+[data-v-bdcdab3b] .conversationCreate__dialog .dialog-body {
+  height: 0;
 }._conversationPreview_87t7r_1 {
   display: flex;
   align-items: center;
@@ -8164,22 +9015,27 @@ to {
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}._conversationListContent_1dzbn_1 {
+}._conversationListContent_1o134_1 {
   flex: 1;
   display: flex;
   overflow-y: auto;
   flex-direction: column;
   background-color: var(--bg-color-operate, #f5f5f5);
   color: var(--text-color-primary, #333);
-  scrollbar-width: none;
+  overflow: auto;
   -ms-overflow-style: none;
 }
-._conversationListContent_1dzbn_1::-webkit-scrollbar {
+._conversationListContent_1o134_1::-webkit-scrollbar {
   display: none;
 }
-._conversationListContent_1dzbn_1 ._placeholder-error_1dzbn_14,
-._conversationListContent_1dzbn_1 ._placeholder-loading_1dzbn_15,
-._conversationListContent_1dzbn_1 ._placeholder-empty_1dzbn_16 {
+@supports (scrollbar-width: none) {
+._conversationListContent_1o134_1 {
+    scrollbar-width: none;
+}
+}
+._conversationListContent_1o134_1 ._placeholder-error_1o134_19,
+._conversationListContent_1o134_1 ._placeholder-loading_1o134_20,
+._conversationListContent_1o134_1 ._placeholder-empty_1o134_21 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8207,8 +9063,9 @@ to {
   flex: 1;
   display: flex;
   align-items: center;
-}._conversationList_crxdy_1 {
+}._conversationList_y4ydr_1 {
   width: 100%;
+  height: 100%;
   flex-shrink: 1;
   box-sizing: border-box;
   overflow: hidden;
@@ -8220,34 +9077,9 @@ to {
   background-color: var(--bg-color-operate, #f5f5f5);
   color: var(--text-color-primary, #333);
 }
-._conversationList__content_crxdy_14 {
+._conversationList__content_y4ydr_15 {
   flex: 1;
   overflow-y: auto;
-}._emoji-picker__icon_kyu4g_1 {
-  cursor: pointer;
-}
-._emoji-picker__list_kyu4g_4 {
-  display: flex;
-  flex-flow: row wrap;
-  gap: 8px;
-  width: 310px;
-  border-radius: 16px;
-  padding: 16px;
-  margin-bottom: 10px;
-  background-color: var(--dropdown-color-default);
-  box-shadow: 0 0 10px 0 var(--shadow-color);
-}
-._emoji-picker__list-item_kyu4g_15 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-}.disabled[data-v-01fb363c] {
-  cursor: not-allowed;
-  user-select: none;
-  pointer-events: none;
 }._attachment-picker_1b1ig_1 {
   flex: 0 0 auto;
   align-items: center;
@@ -8294,70 +9126,34 @@ to {
 }
 ._attachment-picker__item-icon_1b1ig_45 {
   cursor: pointer;
-}._quoted__message__preview_1u7zw_1 {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 16px;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 100%;
-  padding: 8px 16px;
-  animation: _slide-in_1u7zw_1 0.2s ease-out;
-  transform-origin: bottom;
-  background-color: var(--bg-color-input);
-}
-._quoted__message__preview__content_1u7zw_15 {
-  width: 100%;
-  position: relative;
-  padding: 8px 12px;
-  background: var(--chat-hover-bg);
-  background-color: var(--bg-color-operate);
-  border-left: 6px solid var(--text-color-tertiary);
+}._emoji-picker__icon_kyu4g_1 {
+  cursor: pointer;
 }
-._quoted__message__preview__content--header_1u7zw_23 {
+._emoji-picker__list_kyu4g_4 {
   display: flex;
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 500;
-}
-._quoted__message__preview__content--title_1u7zw_29 {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-color-primary);
-}
-._quoted__message__preview__content--text_1u7zw_34 {
-  font-size: 14px;
-  word-break: break-all;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  color: var(--text-color-secondary);
+  flex-flow: row wrap;
+  gap: 8px;
+  width: 310px;
+  border-radius: 16px;
+  padding: 16px;
+  margin-bottom: 10px;
+  background-color: var(--dropdown-color-default);
+  box-shadow: 0 0 10px 0 var(--shadow-color);
 }
-._quoted__message__preview__close_1u7zw_44 {
+._emoji-picker__list-item_kyu4g_15 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
-  transition: color 0.2s ease;
-  color: var(--text-color-secondary);
-}
-._quoted__message__preview__close_1u7zw_44:hover {
-  color: var(--chat-text-color);
-}
-
-@keyframes _slide-in_1u7zw_1 {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}.tiptap.ProseMirror {
+}.disabled[data-v-01fb363c] {
+  cursor: not-allowed;
+  user-select: none;
+  pointer-events: none;
+}.message-input .tiptap.ProseMirror {
   height: auto;
-  flex: 1 0 auto;
+  flex: 1;
   word-wrap: break-word;
   word-break: break-word;
   white-space: pre-wrap;
@@ -8368,40 +9164,40 @@ to {
   outline: none !important;
   overflow: auto;
 }
-.tiptap.ProseMirror::-webkit-scrollbar {
+.message-input .tiptap.ProseMirror::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-.tiptap.ProseMirror::-webkit-scrollbar-track {
+.message-input .tiptap.ProseMirror::-webkit-scrollbar-track {
   background-color: transparent;
 }
-.tiptap.ProseMirror::-webkit-scrollbar-thumb {
+.message-input .tiptap.ProseMirror::-webkit-scrollbar-thumb {
   background-color: var(--scroll-bar-color-default, rgba(144, 147, 153, 0.3));
   border-radius: 4px;
 }
-.tiptap.ProseMirror::-webkit-scrollbar-thumb:hover {
+.message-input .tiptap.ProseMirror::-webkit-scrollbar-thumb:hover {
   background-color: var(--scroll-bar-color-hover, rgba(144, 147, 153, 0.6));
 }
-.tiptap.ProseMirror:disabled {
+.message-input .tiptap.ProseMirror:disabled {
   cursor: not-allowed;
 }
-.tiptap.ProseMirror p {
+.message-input .tiptap.ProseMirror p {
   margin: 0;
   padding: 0;
   font-style: normal;
   outline: none !important;
 }
-.tiptap.ProseMirror img.ProseMirror-selectednode {
+.message-input .tiptap.ProseMirror img.ProseMirror-selectednode {
   outline: 2px solid #68cef8;
 }
-.tiptap.ProseMirror .message-emoji {
+.message-input .tiptap.ProseMirror .message-emoji {
   display: inline-block;
   width: 20px;
   height: 20px;
   user-select: text;
   pointer-events: none;
 }
-.tiptap.ProseMirror .message-image {
+.message-input .tiptap.ProseMirror .message-image {
   display: inline-block;
   width: 100px;
   user-select: text;
@@ -8413,7 +9209,7 @@ to {
   float: left;
   height: 0;
   pointer-events: none;
-}._input-wrapper_d6wpx_1 {
+}._input-wrapper_ihh75_1 {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -8423,52 +9219,114 @@ to {
   line-height: 1.5;
   color: var(--text-color-primary);
 }
-._input-wrapper_d6wpx_1._disabled_d6wpx_11 {
+._input-wrapper_ihh75_1._disabled_ihh75_11 {
   cursor: not-allowed;
 }
 
-._input-prefix_d6wpx_15,
-._input-suffix_d6wpx_16 {
+._input-prefix_ihh75_15,
+._input-suffix_ihh75_16 {
   display: flex;
   align-items: center;
 }
 
-._editor_d6wpx_21 {
+._editor_ihh75_21 {
   flex: 1;
   display: flex;
-}._message-input_1p3x8_1 {
+  flex-direction: column;
+}._quoted__message__preview_1u7zw_1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  padding: 8px 16px;
+  animation: _slide-in_1u7zw_1 0.2s ease-out;
+  transform-origin: bottom;
+  background-color: var(--bg-color-input);
+}
+._quoted__message__preview__content_1u7zw_15 {
+  width: 100%;
+  position: relative;
+  padding: 8px 12px;
+  background: var(--chat-hover-bg);
+  background-color: var(--bg-color-operate);
+  border-left: 6px solid var(--text-color-tertiary);
+}
+._quoted__message__preview__content--header_1u7zw_23 {
+  display: flex;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 500;
+}
+._quoted__message__preview__content--title_1u7zw_29 {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-color-primary);
+}
+._quoted__message__preview__content--text_1u7zw_34 {
+  font-size: 14px;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: var(--text-color-secondary);
+}
+._quoted__message__preview__close_1u7zw_44 {
+  cursor: pointer;
+  transition: color 0.2s ease;
+  color: var(--text-color-secondary);
+}
+._quoted__message__preview__close_1u7zw_44:hover {
+  color: var(--chat-text-color);
+}
+
+@keyframes _slide-in_1u7zw_1 {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}._message-input_v23we_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   background-color: var(--bg-color-operate);
   height: 160px;
   flex-shrink: 0;
-  padding: 3px 10px 10px;
+  padding: 10px;
   gap: 4px;
 }
-._message-input__toolbar_1p3x8_11 {
+._message-input__toolbar_v23we_11 {
   display: flex;
   flex-direction: row;
   align-items: center;
   color: var(--text-color-secondary);
   gap: 8px;
 }
-._message-input__wrapper_1p3x8_18 {
+._message-input__wrapper_v23we_18 {
   display: flex;
   flex: 1 1 auto;
   min-height: 0;
 }
-._message-input__leftInline_1p3x8_23, ._message-input__rightInline_1p3x8_23 {
+._message-input__leftInline_v23we_23, ._message-input__rightInline_v23we_23 {
   display: flex;
   align-items: center;
 }
-._message-input__actions_1p3x8_27 {
+._message-input__actions_v23we_27 {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 4px;
 }
-._message-input__footerToolbar_1p3x8_33 {
+._message-input__footerToolbar_v23we_33 {
   display: flex;
   justify-content: end;
 }.modal-overlay[data-v-1d8533fb] {
@@ -9133,7 +9991,7 @@ to {
     opacity: 0;
     transform: scale(0.96);
   }
-}.message-action-dropdown__item[data-v-617704f8] {
+}.message-action-dropdown__item[data-v-2fb5c178] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -9148,10 +10006,10 @@ to {
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
-.message-action-dropdown__item[data-v-617704f8]:hover {
+.message-action-dropdown__item[data-v-2fb5c178]:hover {
   background-color: var(--dropdown-color-hover);
 }
-.message-action-dropdown__item[data-v-617704f8]:active {
+.message-action-dropdown__item[data-v-2fb5c178]:active {
   background-color: var(--dropdown-color-active);
 }.message-bubble[data-v-034907a5] {
   border-radius: 8px;
@@ -9204,27 +10062,27 @@ from {
 to {
     transform: rotate(360deg);
 }
-}.message-meta[data-v-88438504] {
+}._message-meta_rk5t7_1 {
   gap: 4px;
   font-size: 12px;
   color: var(--text-color-secondary);
 }
-.message-meta__read-status[data-v-88438504] {
+._message-meta__read-status_rk5t7_6 {
   font-size: 12px;
 }
-.message-meta__group-unread[data-v-88438504] {
+._message-meta__group-unread_rk5t7_9 {
   font-size: 12px;
   color: var(--text-color-link);
   cursor: pointer;
 }
-.message-meta__group-unread[data-v-88438504]:hover {
+._message-meta__group-unread_rk5t7_9:hover {
   text-decoration: underline;
   color: var(--text-color-link-hover);
 }
-.message-meta__group-all-read[data-v-88438504] {
+._message-meta__group-all-read_rk5t7_18 {
   font-size: 12px;
 }
-.message-meta__time[data-v-88438504] {
+._message-meta__time_rk5t7_21 {
   font-size: 12px;
 }/**
   * Multi-line ellipsis
@@ -9237,23 +10095,23 @@ to {
   *   @include multi-line-ellipsis(3);
   * }
   */
-.message-layout[data-v-4a97019b] {
+.message-layout[data-v-9e509377] {
   display: flex;
   flex-direction: row;
   width: 100%;
   position: relative;
   gap: 8px;
 }
-.message-layout--left[data-v-4a97019b] {
+.message-layout--left[data-v-9e509377] {
   flex-direction: row;
 }
-.message-layout--right[data-v-4a97019b] {
+.message-layout--right[data-v-9e509377] {
   flex-direction: row-reverse;
 }
-.message-layout__avatar[data-v-4a97019b] {
+.message-layout__avatar[data-v-9e509377] {
   flex: 0 0 auto;
 }
-.message-layout__nick[data-v-4a97019b] {
+.message-layout__nick[data-v-9e509377] {
   font-size: 12px;
   min-width: min(70%, 200px);
   color: var(--text-color-tertiary);
@@ -9262,46 +10120,46 @@ to {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.message-layout__wrapper[data-v-4a97019b] {
+.message-layout__wrapper[data-v-9e509377] {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
   flex: 1 1 auto;
 }
-.message-layout__wrapper--left[data-v-4a97019b] {
+.message-layout__wrapper--left[data-v-9e509377] {
   align-items: flex-start;
 }
-.message-layout__wrapper--right[data-v-4a97019b] {
+.message-layout__wrapper--right[data-v-9e509377] {
   align-items: flex-end;
 }
-.message-layout__wrapper--aggregated.message-layout__wrapper--left[data-v-4a97019b] {
+.message-layout__wrapper--aggregated.message-layout__wrapper--left[data-v-9e509377] {
   padding-left: calc(40px + 8px);
 }
-.message-layout__wrapper--aggregated.message-layout__wrapper--right[data-v-4a97019b] {
+.message-layout__wrapper--aggregated.message-layout__wrapper--right[data-v-9e509377] {
   padding-right: calc(40px + 8px);
 }
-.message-layout__wrapper--aggregated.message-layout__wrapper--no-padding[data-v-4a97019b] {
+.message-layout__wrapper--aggregated.message-layout__wrapper--no-padding[data-v-9e509377] {
   padding: 0;
 }
-.message-layout__bubble[data-v-4a97019b] {
+.message-layout__bubble[data-v-9e509377] {
   flex: 1 1 auto;
   max-width: 90%;
 }
 @media (min-width: 768px) {
-.message-layout__bubble[data-v-4a97019b] {
+.message-layout__bubble[data-v-9e509377] {
     max-width: 80%;
 }
 }
 @media (min-width: 1024px) {
-.message-layout__bubble[data-v-4a97019b] {
+.message-layout__bubble[data-v-9e509377] {
     max-width: 70%;
 }
 }
-.message-layout__meta[data-v-4a97019b] {
+.message-layout__meta[data-v-9e509377] {
   flex: 1 1 auto;
 }
-.message-layout__failed[data-v-4a97019b] {
+.message-layout__failed[data-v-9e509377] {
   color: #ff584c;
   margin-left: 8px;
   cursor: pointer;
@@ -9358,13 +10216,13 @@ to {
   *   @include multi-line-ellipsis(3);
   * }
   */
-.forward-header[data-v-bed0bb4e] {
+.forward-header[data-v-913cb71e] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--text-color-primary);
 }
-.forward-header__close[data-v-bed0bb4e] {
+.forward-header__close[data-v-913cb71e] {
   width: 28px;
   height: 28px;
   flex: 0 0 auto;
@@ -9373,17 +10231,17 @@ to {
   border-radius: 4px;
   transition: background-color 0.2s ease;
 }
-.forward-header__close[data-v-bed0bb4e]:hover {
+.forward-header__close[data-v-913cb71e]:hover {
   background-color: var(--hover-bg-color, rgba(0, 0, 0, 0.04));
 }
-.forward-header__title[data-v-bed0bb4e] {
+.forward-header__title[data-v-913cb71e] {
   flex: 1;
   margin: 0;
   text-align: center;
   font-size: 18px;
   font-weight: bold;
 }
-.forward-header__placeholder[data-v-bed0bb4e] {
+.forward-header__placeholder[data-v-913cb71e] {
   width: 28px;
   height: 28px;
 }.message-time-divider[data-v-1f3e276c] {
@@ -9391,7 +10249,30 @@ to {
   margin: 10px 0;
   font-size: 12px;
   color: var(--text-color-tertiary);
-}.message-list[data-v-e0764a88] {
+}._scroll-to-bottom__button_1dasy_1 {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  padding: 0;
+  box-shadow: 0 12px 26px 0 var(--shadow-color), 0 8px 12px 0 var(--shadow-color);
+  background: var(--dropdown-color-default);
+}
+._scroll-to-bottom__button_1dasy_1:hover {
+  background: var(--dropdown-color-hover);
+}
+._scroll-to-bottom__button_1dasy_1:active {
+  background: get(dropdown-color-active);
+  box-shadow: none;
+}
+._scroll-to-bottom__button--icon_1dasy_22 {
+  color: var(--text-color-link);
+}.message-list[data-v-7ced8e4a] {
   position: relative;
   display: flex;
   flex: 1 1 auto;
@@ -9399,7 +10280,7 @@ to {
   overflow: hidden;
   background-color: var(--bg-color-operate);
 }
-.message-list-container[data-v-e0764a88] {
+.message-list-container[data-v-7ced8e4a] {
   flex: 1;
   height: 100%;
   padding: 0 10px;
@@ -9407,41 +10288,41 @@ to {
   overflow: auto;
   -ms-overflow-style: none;
 }
-.message-list-container[data-v-e0764a88]::-webkit-scrollbar {
+.message-list-container[data-v-7ced8e4a]::-webkit-scrollbar {
   display: none;
 }
 @supports (scrollbar-width: none) {
-.message-list-container[data-v-e0764a88] {
+.message-list-container[data-v-7ced8e4a] {
     scrollbar-width: none;
 }
 }
-.message-chunk--container[data-v-e0764a88] {
+.message-chunk--container[data-v-7ced8e4a] {
   margin-top: 10px;
 }
-.message-chunk[data-v-e0764a88] {
+.message-chunk[data-v-7ced8e4a] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.message-action-mask[data-v-e0764a88] {
+.message-action-mask[data-v-7ced8e4a] {
   position: absolute;
   width: 100%;
   height: 100%;
   background: transparent;
 }
-.message-action-container[data-v-e0764a88] {
+.message-action-container[data-v-7ced8e4a] {
   position: absolute;
 }
-@keyframes shadow-blink-e0764a88 {
+@keyframes shadow-blink-7ced8e4a {
 50% {
     box-shadow: rgb(255, 156, 25) 0 0 10px 0;
 }
 }
-.highlight-shadow[data-v-e0764a88] {
+.highlight-shadow[data-v-7ced8e4a] {
   box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
-  animation: shadow-blink-e0764a88 1s linear 3;
+  animation: shadow-blink-7ced8e4a 1s linear 3;
 }
-.new-message-notification[data-v-e0764a88] {
+.new-message-notification[data-v-7ced8e4a] {
   position: absolute;
   bottom: 20px;
   left: 50%;
@@ -9456,8 +10337,13 @@ to {
   z-index: 10;
   transition: all 0.3s ease;
 }
-.new-message-notification[data-v-e0764a88]:hover {
+.new-message-notification[data-v-7ced8e4a]:hover {
   background-color: var(--primary-color-hover, #0057cc);
+}
+.scroll-to-bottom[data-v-7ced8e4a] {
+  position: absolute;
+  bottom: 105px;
+  right: 8px;
 }.icon-button-container[data-v-77a70aa9] {
   position: relative;
   display: flex;
@@ -10042,11 +10928,19 @@ to {
 .live-message-input .disabled[data-v-634306b9] {
   cursor: not-allowed;
   user-select: none;
-}.live-message-input-h5[data-v-995197ec] {
+}.live-message-input-h5[data-v-11c76a53] {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
+}
+.live-message-input-h5[data-v-11c76a53] .message-input-container-h5 {
+  height: 36px;
+  max-height: 140px;
+  min-height: 36px;
+  padding: 2px 12px;
+  border-radius: 100px;
+  border: 1px solid var(--stroke-color-primary);
 }.face-message[data-v-95a91415] {
   width: 150px;
   height: 150px;
@@ -10113,7 +11007,7 @@ to {
   cursor: pointer;
   text-decoration: underline;
   color: var(--text-color-link);
-}.text-message[data-v-df01dc37] {
+}.text-message[data-v-10eaf041] {
   font-size: 14px;
   display: flex;
   flex-direction: column;
@@ -10124,7 +11018,7 @@ to {
   font-weight: 500;
   color: var(--text-color-primary);
 }
-.text-message__reference[data-v-df01dc37] {
+.text-message__reference[data-v-10eaf041] {
   margin-bottom: 8px;
   padding: 10px 16px;
   background-color: rgba(0, 0, 0, 0.05);
@@ -10132,7 +11026,7 @@ to {
   position: relative;
   border-radius: 4px;
 }
-.text-message__reference[data-v-df01dc37]::before {
+.text-message__reference[data-v-10eaf041]::before {
   content: "";
   position: absolute;
   left: 0;
@@ -10143,12 +11037,12 @@ to {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-.text-message__reference__header[data-v-df01dc37] {
+.text-message__reference__header[data-v-10eaf041] {
   font-size: 12px;
   color: var(--text-color-primary);
   margin-bottom: 4px;
 }
-.text-message__reference__content[data-v-df01dc37] {
+.text-message__reference__content[data-v-10eaf041] {
   font-size: 13px;
   color: var(--text-color-secondary);
   overflow: hidden;
@@ -10158,7 +11052,7 @@ to {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-.text-message__content[data-v-df01dc37] {
+.text-message__content[data-v-10eaf041] {
   display: inline-block;
   word-break: break-word;
   white-space: pre-wrap;
@@ -10169,21 +11063,17 @@ to {
   word-spacing: 0.2em;
   letter-spacing: 0.1em;
 }
-.text-message__content__nick[data-v-df01dc37] {
-  color: var(--text-color-link);
+.text-message__content__nick[data-v-10eaf041] {
+  color: var(--uikit-color-theme-8);
   cursor: pointer;
 }
-.text-message__content__nick[data-v-df01dc37]:hover {
-  color: var(--text-color-link-active);
-  font-weight: 600;
-}
-.text-message__content__text[data-v-df01dc37] {
+.text-message__content__text[data-v-10eaf041] {
   display: inline;
   word-break: break-all;
   white-space: pre-wrap;
   line-height: 1.8;
 }
-.text-message__content__img[data-v-df01dc37] {
+.text-message__content__img[data-v-10eaf041] {
   display: inline;
   width: 20px;
   height: 20px;
@@ -10191,11 +11081,11 @@ to {
   line-height: 1;
   margin: 0 1px;
 }
-.text-danger[data-v-df01dc37] {
+.text-danger[data-v-10eaf041] {
   color: var(--text-color-error);
   background-color: var(--toast-color-error);
 }
-.text-danger[data-v-df01dc37]::before {
+.text-danger[data-v-10eaf041]::before {
   background-color: var(--text-color-error);
 }.message-bubble[data-v-2548c596] {
   border-radius: 8px;
@@ -10234,17 +11124,17 @@ to {
 50% {
     box-shadow: 0 1px 20px 0 rgb(255, 150, 13);
 }
-}.message-meta__status--unSend[data-v-570fe2c0] {
-  animation: rotate-infinite-570fe2c0 1s linear infinite;
+}.message-meta__status--unSend[data-v-a4ba2853] {
+  animation: rotate-infinite-a4ba2853 1s linear infinite;
 }
-@keyframes rotate-infinite-570fe2c0 {
+@keyframes rotate-infinite-a4ba2853 {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
-}.message-meta[data-v-9a18686c] {
+}.message-meta[data-v-fbbde202] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -10253,10 +11143,10 @@ to {
   color: #999;
   margin-top: 4px;
 }
-.message-meta .time[data-v-9a18686c] {
+.message-meta .time[data-v-fbbde202] {
   line-height: 1;
 }
-.message-meta__status[data-v-9a18686c] {
+.message-meta__status[data-v-fbbde202] {
   color: #2a7bfa;
 }/**
   * Multi-line ellipsis
@@ -10269,35 +11159,35 @@ to {
   *   @include multi-line-ellipsis(3);
   * }
   */
-.message-layout[data-v-7cdd355a] {
+.message-layout[data-v-cd1d60a2] {
   display: flex;
   flex-direction: row;
   width: 100%;
   position: relative;
 }
-.message-layout--not-last[data-v-7cdd355a] {
+.message-layout--not-last[data-v-cd1d60a2] {
   padding-left: 40px;
 }
-.message-layout__wrapper[data-v-7cdd355a] {
+.message-layout__wrapper[data-v-cd1d60a2] {
   display: flex;
   flex-direction: row;
   gap: 8px;
   flex: 1 1 auto;
 }
-.message-layout__wrapper__middle[data-v-7cdd355a] {
+.message-layout__wrapper__middle[data-v-cd1d60a2] {
   flex-direction: row;
   display: flex;
   gap: 4px;
   position: relative;
   align-items: flex-start;
 }
-.message-layout__wrapper__middle__bubble[data-v-7cdd355a] {
+.message-layout__wrapper__middle__bubble[data-v-cd1d60a2] {
   flex: 1 1 auto;
 }
-.message-layout__avatar[data-v-7cdd355a] {
+.message-layout__avatar[data-v-cd1d60a2] {
   flex: 0 0 auto;
 }
-.message-layout__nick[data-v-7cdd355a] {
+.message-layout__nick[data-v-cd1d60a2] {
   font-size: 12px;
   color: #7cd7f1;
   display: block;
@@ -10305,22 +11195,21 @@ to {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.message-layout__bubble[data-v-7cdd355a] {
+.message-layout__bubble[data-v-cd1d60a2] {
   background-color: yellow;
   display: flex;
   flex: 1 1 auto;
 }
-.message-layout__bubble--last[data-v-7cdd355a] {
+.message-layout__bubble--last[data-v-cd1d60a2] {
   border-bottom-left-radius: 8px;
 }
-.message-layout__bubble--last--self[data-v-7cdd355a] {
+.message-layout__bubble--last--self[data-v-cd1d60a2] {
   border-bottom-right-radius: 8px;
 }
-.message-layout__meta[data-v-7cdd355a] {
+.message-layout__meta[data-v-cd1d60a2] {
   flex: 0 0 auto;
-  align-self: flex-end;
 }
-.message-layout__failed[data-v-7cdd355a] {
+.message-layout__failed[data-v-cd1d60a2] {
   color: #ff584c;
   margin-left: 8px;
   cursor: pointer;
@@ -10643,7 +11532,7 @@ to {
 }
 .action-menu-list .action-menu-item[data-v-b065d361]:hover {
   background: var(--uikit-color-gray-4);
-}.message-list[data-v-aab4e5c8] {
+}.message-list[data-v-022ab526] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10652,36 +11541,36 @@ to {
   overflow: hidden;
   background-color: var(--bg-color-operate);
 }
-.message-list-container[data-v-aab4e5c8] {
+.message-list-container[data-v-022ab526] {
   flex: 1;
   height: 100%;
   padding: 10px;
   overflow: auto;
 }
-.message-list-container[data-v-aab4e5c8]::-webkit-scrollbar {
+.message-list-container[data-v-022ab526]::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-.message-list-container[data-v-aab4e5c8]::-webkit-scrollbar-track {
+.message-list-container[data-v-022ab526]::-webkit-scrollbar-track {
   background-color: transparent;
 }
-.message-list-container[data-v-aab4e5c8]::-webkit-scrollbar-thumb {
+.message-list-container[data-v-022ab526]::-webkit-scrollbar-thumb {
   background-color: var(--scroll-bar-color-default, rgba(144, 147, 153, 0.3));
   border-radius: 2px;
 }
-.message-list-container[data-v-aab4e5c8]::-webkit-scrollbar-thumb:hover {
+.message-list-container[data-v-022ab526]::-webkit-scrollbar-thumb:hover {
   background-color: var(--scroll-bar-color-hover, rgba(144, 147, 153, 0.6));
 }
-.message-chunk--container[data-v-aab4e5c8] {
+.message-chunk--container[data-v-022ab526] {
   margin-top: 10px;
 }
-.message-chunk[data-v-aab4e5c8] {
+.message-chunk[data-v-022ab526] {
   display: flex;
   flex-direction: column;
   gap: 8px;
   height: 0;
 }
-.empty-message[data-v-aab4e5c8] {
+.empty-message[data-v-022ab526] {
   text-align: center;
   color: var(--text-color-secondary);
   font-size: 14px;
@@ -10690,25 +11579,25 @@ to {
   align-items: center;
   height: 100%;
 }
-.message-action-mask[data-v-aab4e5c8] {
+.message-action-mask[data-v-022ab526] {
   position: absolute;
   width: 100%;
   height: 100%;
   background: transparent;
 }
-.message-action-container[data-v-aab4e5c8] {
+.message-action-container[data-v-022ab526] {
   position: absolute;
 }
-@keyframes shadow-blink-aab4e5c8 {
+@keyframes shadow-blink-022ab526 {
 50% {
     box-shadow: rgb(255, 156, 25) 0 0 10px 0;
 }
 }
-.highlight-shadow[data-v-aab4e5c8] {
+.highlight-shadow[data-v-022ab526] {
   box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
-  animation: shadow-blink-aab4e5c8 1s linear 3;
+  animation: shadow-blink-022ab526 1s linear 3;
 }
-.new-message-notification[data-v-aab4e5c8] {
+.new-message-notification[data-v-022ab526] {
   position: absolute;
   bottom: 20px;
   left: 50%;
@@ -10723,10 +11612,10 @@ to {
   z-index: 10;
   transition: all 0.3s ease;
 }
-.new-message-notification[data-v-aab4e5c8]:hover {
+.new-message-notification[data-v-022ab526]:hover {
   background-color: var(--primary-color-hover, #0057cc);
 }
-.message-group-tip[data-v-aab4e5c8] {
+.message-group-tip[data-v-022ab526] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -10737,9 +11626,9 @@ to {
   word-spacing: 0.2em;
   letter-spacing: 0.1em;
 }
-.message-group-tip .message-group-tip-name[data-v-aab4e5c8] {
-  color: var(--text-color-link);
-}.message-list[data-v-5a38aa5a] {
+.message-group-tip .message-group-tip-name[data-v-022ab526] {
+  color: var(--uikit-color-theme-8);
+}.message-list[data-v-2787bca3] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10747,35 +11636,35 @@ to {
   height: 100%;
   overflow: hidden;
 }
-.message-list-container[data-v-5a38aa5a] {
+.message-list-container[data-v-2787bca3] {
   flex: 1;
   height: 100%;
   padding: 10px;
   overflow: auto;
 }
-.message-list-container[data-v-5a38aa5a]::-webkit-scrollbar {
+.message-list-container[data-v-2787bca3]::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-.message-list-container[data-v-5a38aa5a]::-webkit-scrollbar-track {
+.message-list-container[data-v-2787bca3]::-webkit-scrollbar-track {
   background-color: transparent;
 }
-.message-list-container[data-v-5a38aa5a]::-webkit-scrollbar-thumb {
+.message-list-container[data-v-2787bca3]::-webkit-scrollbar-thumb {
   background-color: var(--scroll-bar-color-default, rgba(144, 147, 153, 0.3));
   border-radius: 2px;
 }
-.message-list-container[data-v-5a38aa5a]::-webkit-scrollbar-thumb:hover {
+.message-list-container[data-v-2787bca3]::-webkit-scrollbar-thumb:hover {
   background-color: var(--scroll-bar-color-hover, rgba(144, 147, 153, 0.6));
 }
-.message-chunk--container[data-v-5a38aa5a] {
+.message-chunk--container[data-v-2787bca3] {
   margin-top: 10px;
 }
-.message-chunk[data-v-5a38aa5a] {
+.message-chunk[data-v-2787bca3] {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
-.empty-message[data-v-5a38aa5a] {
+.empty-message[data-v-2787bca3] {
   text-align: center;
   color: var(--text-color-secondary);
   font-size: 14px;
@@ -10784,25 +11673,25 @@ to {
   align-items: center;
   height: 100%;
 }
-.message-action-mask[data-v-5a38aa5a] {
+.message-action-mask[data-v-2787bca3] {
   position: absolute;
   width: 100%;
   height: 100%;
   background: transparent;
 }
-.message-action-container[data-v-5a38aa5a] {
+.message-action-container[data-v-2787bca3] {
   position: absolute;
 }
-@keyframes shadow-blink-5a38aa5a {
+@keyframes shadow-blink-2787bca3 {
 50% {
     box-shadow: rgb(255, 156, 25) 0 0 10px 0;
 }
 }
-.highlight-shadow[data-v-5a38aa5a] {
+.highlight-shadow[data-v-2787bca3] {
   box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
-  animation: shadow-blink-5a38aa5a 1s linear 3;
+  animation: shadow-blink-2787bca3 1s linear 3;
 }
-.new-message-notification[data-v-5a38aa5a] {
+.new-message-notification[data-v-2787bca3] {
   position: absolute;
   bottom: 20px;
   left: 50%;
@@ -10817,10 +11706,10 @@ to {
   z-index: 10;
   transition: all 0.3s ease;
 }
-.new-message-notification[data-v-5a38aa5a]:hover {
+.new-message-notification[data-v-2787bca3]:hover {
   background-color: var(--primary-color-hover, #0057cc);
 }
-.message-group-tip[data-v-5a38aa5a] {
+.message-group-tip[data-v-2787bca3] {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -10831,15 +11720,15 @@ to {
   word-spacing: 0.2em;
   letter-spacing: 0.1em;
 }
-.message-group-tip .message-group-tip-name[data-v-5a38aa5a] {
-  color: var(--text-color-link);
+.message-group-tip .message-group-tip-name[data-v-2787bca3] {
+  color: var(--uikit-color-theme-8);
 }
-[data-v-5a38aa5a] .message-bubble {
+[data-v-2787bca3] .message-bubble {
   background-color: var(--uikit-color-black-6);
   border-radius: 12px;
   padding: 2px 6px;
 }
-[data-v-5a38aa5a] .message-chunk {
+[data-v-2787bca3] .message-chunk {
   gap: 4px;
 }.camera-button[data-v-cc8bbaca] {
   cursor: pointer;
@@ -11269,15 +12158,142 @@ to {
   opacity: 0;
   display: none;
   z-index: 2;
-}.live-list-panel[data-v-30bab3d5] {
+}.stream-cover[data-v-9237082b] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.stream-cover .no-video-container[data-v-9237082b] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.stream-cover .no-video-container .canvas-mask[data-v-9237082b] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.stream-cover .no-video-container .mask[data-v-9237082b] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--uikit-color-gray-3);
+}
+.stream-cover .user-details[data-v-9237082b] {
+  text-align: center;
+  position: absolute;
+  bottom: 6px;
+  left: 6px;
+  display: flex;
+  align-items: center;
+  background-color: var(--uikit-color-black-5);
+  padding: 2px 8px;
+  border-radius: 100px;
+  max-width: 80%;
+  box-sizing: border-box;
+}
+.stream-cover .user-details .audio-icon[data-v-9237082b] {
+  zoom: 0.6;
+}
+.stream-cover .user-details .username[data-v-9237082b] {
+  font-size: 12px;
+  font-weight: 500;
+  margin-left: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.stream-cover .empty-position[data-v-9237082b] {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--uikit-color-gray-2);
+  color: #fff;
+  font-weight: bold;
+  pointer-events: auto;
+}
+.stream-cover .empty-position .number[data-v-9237082b] {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+.stream-cover .empty-position .text[data-v-9237082b] {
+  font-size: 14px;
+  max-width: 80%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}.live-core-view-container[data-v-42a8fbdc] {
+  width: 100%;
+  height: 100%;
+  display: flex;
   overflow: hidden;
   align-items: center;
+  justify-content: center;
+}
+.live-core-view-container .live-core-view[data-v-42a8fbdc] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.live-core-view-container .live-core-view .live-core-placeholder[data-v-42a8fbdc] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.live-core-view-container .live-core-view .live-core-placeholder .placeholder-text[data-v-42a8fbdc] {
+  color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+}
+.live-core-view-container .live-core-view .stream-content[data-v-42a8fbdc] {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.live-core-view-container .live-core-view .live-core-ui[data-v-42a8fbdc] {
   width: 100%;
   height: 100%;
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+}.live-list-panel[data-v-b8540cae] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  align-items: center;
+  margin: 0px 16px;
+  width: calc(100% - 32px);
+  height: 100%;
 }
-.live-list[data-v-30bab3d5] {
+.live-list[data-v-b8540cae] {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -11285,57 +12301,57 @@ to {
   overflow: auto;
   align-items: center;
 }
-.live-list[data-v-30bab3d5]::-webkit-scrollbar {
+.live-list[data-v-b8540cae]::-webkit-scrollbar {
   width: 6px;
   background: transparent;
 }
-.live-list[data-v-30bab3d5]::-webkit-scrollbar-track {
+.live-list[data-v-b8540cae]::-webkit-scrollbar-track {
   background: transparent;
 }
-.live-list[data-v-30bab3d5]::-webkit-scrollbar-thumb {
+.live-list[data-v-b8540cae]::-webkit-scrollbar-thumb {
   background: var(--uikit-color-gray-3);
   border-radius: 3px;
   border: 2px solid transparent;
   background-clip: padding-box;
 }
-.live-list[data-v-30bab3d5]::-webkit-scrollbar-thumb:hover {
+.live-list[data-v-b8540cae]::-webkit-scrollbar-thumb:hover {
   background: var(--uikit-color-gray-3);
 }
-.live-list-items[data-v-30bab3d5] {
+.live-list-items[data-v-b8540cae] {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 356px);
+  grid-template-columns: repeat(auto-fill, var(--4d975fe5));
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
 }
-.live-item[data-v-30bab3d5] {
+.live-item[data-v-b8540cae] {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  width: 356px;
-  height: 270px;
+  width: var(--4d975fe5);
+  height: var(--4b85a2e8);
   white-space: nowrap;
   text-overflow: ellipsis;
   gap: 5px;
   border-radius: 10px;
 }
-.live-item[data-v-30bab3d5] :hover {
+.live-item[data-v-b8540cae] :hover {
   cursor: pointer;
 }
-.live-item .live-room-cover[data-v-30bab3d5] {
+.live-item .live-room-cover[data-v-b8540cae] {
   position: relative;
-  width: 356px;
-  height: 210px;
+  width: var(--3688f7de);
+  height: var(--ce33f788);
   overflow: hidden;
 }
-.live-item .live-room-cover img[data-v-30bab3d5] {
+.live-item .live-room-cover img[data-v-b8540cae] {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 10px;
 }
-.live-item .live-room-cover .header[data-v-30bab3d5] {
+.live-item .live-room-cover .header[data-v-b8540cae] {
   position: absolute;
   display: flex;
   top: 5px;
@@ -11347,82 +12363,78 @@ to {
   font-weight: 400;
   align-items: center;
 }
-.live-item .live-room-cover .header .left[data-v-30bab3d5] {
+.live-item .live-room-cover .header .left[data-v-b8540cae] {
   display: flex;
   margin-left: 10px;
   align-items: center;
   gap: 5px;
 }
-.live-item .live-room-cover .header .right[data-v-30bab3d5] {
+.live-item .live-room-cover .header .right[data-v-b8540cae] {
   display: flex;
   float: right;
   margin-right: 10px;
   gap: 2px;
 }
-.live-item .live-name[data-v-30bab3d5] {
+.live-item .live-name[data-v-b8540cae] {
   margin: 5px 0px;
+  height: 18px;
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--text-color-primary);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
-.live-item .owner-info[data-v-30bab3d5] {
+.live-item .owner-info[data-v-b8540cae] {
   height: 24px;
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--text-color-secondary);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
-.live-item .owner-info .owner-name[data-v-30bab3d5] {
+.live-item .owner-info .owner-name[data-v-b8540cae] {
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.live-item .owner-info img[data-v-30bab3d5] {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}
-.bottom-text-no-more[data-v-30bab3d5] {
+.bottom-text-no-more[data-v-b8540cae] {
   flex: 1;
   min-height: 30px;
   position: relative;
 }
-.bottom-text-no-more span[data-v-30bab3d5] {
+.bottom-text-no-more span[data-v-b8540cae] {
   width: 200px;
   position: absolute;
   bottom: 5px;
   text-align: center;
   transform: translate(-50%, 0);
-  color: var(--text-color-primary);
+  color: var(--text-color-tertiary);
   font-size: 14px;
   font-weight: 400;
 }
-.bottom-text[data-v-30bab3d5] {
+.bottom-text[data-v-b8540cae] {
   padding: 8px;
   color: var(--text-color-primary);
   font-size: 14px;
   font-weight: 400;
 }
-.load-more-lives[data-v-30bab3d5]:hover {
+.load-more-lives[data-v-b8540cae]:hover {
   cursor: pointer;
 }
-.no-live[data-v-30bab3d5] {
+.no-live[data-v-b8540cae] {
   display: flex;
   flex-direction: column;
   flex: 1;
   align-items: center;
   justify-content: center;
 }
-.no-live span[data-v-30bab3d5] {
+.no-live span[data-v-b8540cae] {
   color: var(--text-color-primary);
   font-size: 12px;
   font-weight: 400;
-}.live-list-panel-h5[data-v-2aa05875] {
+}.live-list-panel-h5[data-v-b716be94] {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -11430,7 +12442,7 @@ to {
   width: 100%;
   height: 100%;
 }
-.live-list[data-v-2aa05875] {
+.live-list[data-v-b716be94] {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -11439,59 +12451,59 @@ to {
   align-items: center;
   scrollbar-width: none;
 }
-.live-list[data-v-2aa05875]::-webkit-scrollbar {
+.live-list[data-v-b716be94]::-webkit-scrollbar {
   width: 0px;
   display: none;
 }
-.live-list[data-v-2aa05875]::-webkit-scrollbar-track {
+.live-list[data-v-b716be94]::-webkit-scrollbar-track {
   background: transparent;
 }
-.live-list[data-v-2aa05875]::-webkit-scrollbar-thumb {
+.live-list[data-v-b716be94]::-webkit-scrollbar-thumb {
   background: var(--uikit-color-gray-3);
   border-radius: 3px;
   border: 2px solid transparent;
   background-clip: padding-box;
 }
-.live-list[data-v-2aa05875]::-webkit-scrollbar-thumb:hover {
+.live-list[data-v-b716be94]::-webkit-scrollbar-thumb:hover {
   background: var(--uikit-color-gray-3);
 }
-.live-list-items[data-v-2aa05875] {
+.live-list-items[data-v-b716be94] {
   flex: 1;
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, var(--2ddc729c));
+  grid-template-columns: repeat(auto-fill, var(--11f6a5ce));
   flex-wrap: wrap;
   justify-content: center;
   gap: 5px;
 }
-.live-item[data-v-2aa05875] {
+.live-item[data-v-b716be94] {
   position: relative;
   display: flex;
   overflow: hidden;
   flex-direction: column;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: var(--2ddc729c);
-  height: var(--1f5815bb);
+  width: var(--11f6a5ce);
+  height: var(--607c0798);
   gap: 5px;
   border-radius: 10px;
 }
-.live-item[data-v-2aa05875] :hover {
+.live-item[data-v-b716be94] :hover {
   cursor: pointer;
 }
-.live-item .live-room-cover[data-v-2aa05875] {
+.live-item .live-room-cover[data-v-b716be94] {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-.live-item .live-room-cover img[data-v-2aa05875] {
+.live-item .live-room-cover img[data-v-b716be94] {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 10px;
 }
-.live-item .header[data-v-2aa05875] {
+.live-item .header[data-v-b716be94] {
   position: absolute;
   display: flex;
   top: 5px;
@@ -11503,7 +12515,7 @@ to {
   font-weight: 400;
   align-items: center;
 }
-.live-item .live-name[data-v-2aa05875] {
+.live-item .live-name[data-v-b716be94] {
   position: absolute;
   bottom: 35px;
   height: 20px;
@@ -11513,10 +12525,10 @@ to {
   align-items: center;
   margin-left: 10px;
   color: var(--text-color-primary);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
-.live-item .owner-info[data-v-2aa05875] {
+.live-item .owner-info[data-v-b716be94] {
   position: absolute;
   bottom: 10px;
   height: 20px;
@@ -11526,46 +12538,46 @@ to {
   margin-left: 10px;
   gap: 4px;
   color: var(--text-color-secondary);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
 }
-.live-item .owner-info .owner-name[data-v-2aa05875] {
+.live-item .owner-info .owner-name[data-v-b716be94] {
   max-width: 80px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.bottom-text-no-more[data-v-2aa05875] {
+.bottom-text-no-more[data-v-b716be94] {
   flex: 1;
   min-height: 30px;
   position: relative;
 }
-.bottom-text-no-more span[data-v-2aa05875] {
+.bottom-text-no-more span[data-v-b716be94] {
   width: 200px;
   position: absolute;
   bottom: 5px;
   text-align: center;
   transform: translate(-50%, 0);
-  color: var(--text-color-primary);
+  color: var(--text-color-tertiary);
   font-size: 14px;
   font-weight: 400;
 }
-.bottom-text[data-v-2aa05875] {
+.bottom-text[data-v-b716be94] {
   margin: 8px;
   color: var(--text-color-primary);
   font-size: 14px;
   font-weight: 400;
 }
-.load-more-lives[data-v-2aa05875]:hover {
+.load-more-lives[data-v-b716be94]:hover {
   cursor: pointer;
 }
-.no-live[data-v-2aa05875] {
+.no-live[data-v-b716be94] {
   display: flex;
   flex-direction: column;
   flex: 1;
   align-items: center;
   justify-content: center;
 }
-.no-live span[data-v-2aa05875] {
+.no-live span[data-v-b716be94] {
   color: var(--text-color-primary);
   font-size: 12px;
   font-weight: 400;
@@ -11954,139 +12966,13 @@ to {
 }
 .actions-section .add-material-btn .add-icon[data-v-68776105] {
   font-size: 14px;
-  font-weight: bold;
-}
-.actions-section .clear-btn[data-v-68776105] {
-  color: red;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}.stream-cover[data-v-4091c326] {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  box-sizing: border-box;
-}
-.stream-cover .no-video-container[data-v-4091c326] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-.stream-cover .no-video-container .canvas-mask[data-v-4091c326] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.stream-cover .no-video-container .mask[data-v-4091c326] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--uikit-color-gray-3);
-}
-.stream-cover .user-details[data-v-4091c326] {
-  text-align: center;
-  position: absolute;
-  bottom: 6px;
-  left: 6px;
-  display: flex;
-  align-items: center;
-  background-color: var(--uikit-color-black-5);
-  padding: 2px 8px;
-  border-radius: 100px;
-  max-width: 80%;
-  box-sizing: border-box;
-}
-.stream-cover .user-details .audio-icon[data-v-4091c326] {
-  zoom: 0.6;
-}
-.stream-cover .user-details .username[data-v-4091c326] {
-  font-size: 12px;
-  font-weight: 500;
-  margin-left: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.stream-cover .empty-position[data-v-4091c326] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: var(--uikit-color-gray-2);
-  color: #fff;
-  font-weight: bold;
-  pointer-events: auto;
-}
-.stream-cover .empty-position .number[data-v-4091c326] {
-  font-size: 18px;
-  margin-bottom: 10px;
-}
-.stream-cover .empty-position .text[data-v-4091c326] {
-  font-size: 14px;
-  max-width: 80%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}.live-stream-view-container[data-v-a84f78de] {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-}
-.live-stream-view-container .live-stream-view[data-v-a84f78de] {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.live-stream-view-container .live-stream-view .live-stream-placeholder[data-v-a84f78de] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.live-stream-view-container .live-stream-view .live-stream-placeholder .placeholder-text[data-v-a84f78de] {
-  color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px;
-}
-.live-stream-view-container .live-stream-view .stream-content[data-v-a84f78de] {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
+  font-weight: bold;
 }
-.live-stream-view-container .live-stream-view .live-stream-ui[data-v-a84f78de] {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  left: 0;
+.actions-section .clear-btn[data-v-68776105] {
+  color: red;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }.audio-icon-container[data-v-43c1f65f] {
   position: relative;
   width: 24px;
@@ -12127,7 +13013,7 @@ to {
   position: absolute;
   right: 0;
   bottom: 0;
-}.mixer-control[data-v-f2286717] {
+}.mixer-control[data-v-6c6a65c2] {
   display: flex;
   flex-direction: row;
   background-color: #ffffff;
@@ -12136,7 +13022,7 @@ to {
   gap: 16px;
   pointer-events: auto;
 }
-.mixer-control .mixer-control-item[data-v-f2286717] {
+.mixer-control .mixer-control-item[data-v-6c6a65c2] {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -12145,15 +13031,15 @@ to {
   cursor: pointer;
   border-radius: 4px;
 }
-.mixer-control .mixer-control-item[data-v-f2286717]:hover {
+.mixer-control .mixer-control-item[data-v-6c6a65c2]:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
-.mixer-control .mixer-control-item .mixer-control-item-icon[data-v-f2286717] {
+.mixer-control .mixer-control-item .mixer-control-item-icon[data-v-6c6a65c2] {
   width: 18px;
   height: 18px;
   color: #0F1014;
 }
-.mixer-control .mixer-control-item .mixer-control-item-name[data-v-f2286717] {
+.mixer-control .mixer-control-item .mixer-control-item-name[data-v-6c6a65c2] {
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
@@ -12161,34 +13047,32 @@ to {
   white-space: nowrap;
   margin-top: 2px;
 }
-.mixer-control .mixer-control-item.disable[data-v-f2286717] {
+.mixer-control .mixer-control-item.disable[data-v-6c6a65c2] {
   color: rgba(0, 0, 0, 0.25);
   cursor: not-allowed;
 }
-.mixer-control .mixer-control-item.disable .mixer-control-item-icon[data-v-f2286717] {
+.mixer-control .mixer-control-item.disable .mixer-control-item-icon[data-v-6c6a65c2] {
   color: rgba(0, 0, 0, 0.25);
-}.local-mixer-container[data-v-d5530943] {
+}.local-mixer-container[data-v-efcb7caf] {
   width: 100%;
   height: 100%;
   position: relative;
   background-color: #000;
 }
-.local-mixer-container .local-mixer-content[data-v-d5530943] {
+.local-mixer-container .local-mixer-content[data-v-efcb7caf] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
-.local-mixer-container .mixer-control-container[data-v-d5530943] {
+.local-mixer-container .mixer-control[data-v-efcb7caf] {
   position: absolute;
-  pointer-events: none;
-}
-.local-mixer-container .mixer-control-container .mixer-control[data-v-d5530943] {
-  position: absolute;
-  left: 50%;
+  top: 0;
+  left: 0;
+  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.local-mixer-container .local-mixer-placeholder[data-v-d5530943] {
+.local-mixer-container .local-mixer-placeholder[data-v-efcb7caf] {
   position: absolute;
   top: 0;
   left: 0;
@@ -12198,7 +13082,7 @@ to {
   align-items: center;
   justify-content: center;
 }
-.local-mixer-container .local-mixer-placeholder .placeholder-text[data-v-d5530943] {
+.local-mixer-container .local-mixer-placeholder .placeholder-text[data-v-efcb7caf] {
   color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
   font-size: 14px;
   font-style: normal;
@@ -12961,10 +13845,7 @@ to {
 }.select[data-v-227f6582] {
   width: 100%;
   font-size: 14px;
-}.select[data-v-a2b6951d] {
-  width: 100%;
-  font-size: 14px;
-}.video-preview-container[data-v-33b33ca9] {
+}.video-preview-container[data-v-773a253c] {
   position: relative;
   width: 100%;
   height: 100%;
@@ -12972,14 +13853,14 @@ to {
   background-color: var(--base-color-black-1);
   border-radius: 8px;
 }
-.video-preview-container .video-preview[data-v-33b33ca9] {
+.video-preview-container .video-preview[data-v-773a253c] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }
-.video-preview-container .attention-info[data-v-33b33ca9] {
+.video-preview-container .attention-info[data-v-773a253c] {
   position: absolute;
   top: 0;
   left: 0;
@@ -12989,45 +13870,48 @@ to {
   width: 100%;
   height: 100%;
 }
-.video-preview-container .attention-info .off-camera-info[data-v-33b33ca9] {
+.video-preview-container .attention-info .off-camera-info[data-v-773a253c] {
   font-size: 22px;
   font-weight: 400;
   line-height: 34px;
   color: var(--base-color-gray-7);
 }
-.video-preview-container .attention-info .loading[data-v-33b33ca9] {
-  animation: loading-rotate-33b33ca9 2s linear infinite;
+.video-preview-container .attention-info .loading[data-v-773a253c] {
+  animation: loading-rotate-773a253c 2s linear infinite;
 }
-@keyframes loading-rotate-33b33ca9 {
+@keyframes loading-rotate-773a253c {
 0% {
     transform: rotate(0deg);
 }
 100% {
     transform: rotate(360deg);
 }
-}.video-setting-panel[data-v-01c8fe83] {
+}.select[data-v-cbbcc0aa] {
+  width: 100%;
+  font-size: 14px;
+}.video-setting-panel[data-v-c4df466f] {
   color: var(--tui-color-text-primary);
 }
-.video-setting-panel .section[data-v-01c8fe83] {
+.video-setting-panel .section[data-v-c4df466f] {
   margin-bottom: 32px;
 }
-.video-setting-panel .section .section-title[data-v-01c8fe83] {
+.video-setting-panel .section .section-title[data-v-c4df466f] {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 16px;
 }
-.video-setting-panel .section .row[data-v-01c8fe83] {
+.video-setting-panel .section .row[data-v-c4df466f] {
   display: flex;
   align-items: center;
   margin-bottom: 16px;
 }
-.video-setting-panel .section .row .label[data-v-01c8fe83] {
+.video-setting-panel .section .row .label[data-v-c4df466f] {
   width: 96px;
 }
-.video-setting-panel .section .preview-container[data-v-01c8fe83] {
+.video-setting-panel .section .preview-container[data-v-c4df466f] {
   margin-top: 8px;
 }
-.video-setting-panel .section .preview-container .video-preview[data-v-01c8fe83] {
+.video-setting-panel .section .preview-container .video-preview[data-v-c4df466f] {
   position: relative;
   width: 100%;
   height: 0;
@@ -13036,127 +13920,10 @@ to {
   border-radius: 8px;
   background: #222;
 }
-.video-setting-panel .divider[data-v-01c8fe83] {
+.video-setting-panel .divider[data-v-c4df466f] {
   height: 1px;
   background: var(--uikit-color-gray-4);
   margin: 32px 0;
-}.tui-input[data-v-770959d6] {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-input[data-v-770959d6] {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 10px 0 10px 16px;
-  font-size: 14px;
-  border-radius: 8px;
-  background-color: var(--bg-color-input);
-  color: var(--text-color-primary);
-  border: 1px solid var(--stroke-color-module);
-}
-input[data-v-770959d6]:focus {
-  outline: 0;
-  border-color: var(--text-color-link);
-}
-input[data-v-770959d6]:disabled {
-  background-color: var(--button-color-primary-disable);
-}
-.tui-input.no-border input[data-v-770959d6] {
-  padding: 0;
-  background-color: transparent;
-  border: none;
-}
-.suffix-icon[data-v-770959d6] {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  display: flex;
-  align-items: center;
-  transform: translateY(-50%);
-}
-.results[data-v-770959d6] {
-  position: absolute;
-  z-index: 2;
-  width: 100%;
-  max-height: 254px;
-  padding: 7px 0;
-  overflow: auto;
-  border-radius: 4px;
-  background-color: var(--bg-color-input);
-  border: 1px solid var(--stroke-color-module);
-}
-.results-item[data-v-770959d6] {
-  display: flex;
-  align-items: center;
-  padding: 6px 15px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.results-item[data-v-770959d6]:hover {
-  background-color: var(--text-color-button-disable);
-  color: var(--text-color-link);
-}.tui-input[data-v-afdf5f1b] {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-}
-input[data-v-afdf5f1b] {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 10px 0 10px 16px;
-  font-size: 14px;
-  border-radius: 8px;
-  background-color: var(--bg-color-input);
-  color: var(--text-color-primary);
-  border: 1px solid var(--stroke-color-module);
-}
-input[data-v-afdf5f1b]:focus {
-  outline: 0;
-  border-color: var(--text-color-link);
-}
-input[data-v-afdf5f1b]:disabled {
-  background-color: var(--button-color-primary-disable);
-}
-.tui-input.no-border input[data-v-afdf5f1b] {
-  padding: 0;
-  background-color: transparent;
-  border: none;
-}
-.suffix-icon[data-v-afdf5f1b] {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  display: flex;
-  align-items: center;
-  transform: translateY(-50%);
-}
-.results[data-v-afdf5f1b] {
-  position: fixed;
-  z-index: 2;
-  width: 100%;
-  max-width: 12rem;
-  max-height: 254px;
-  padding: 7px 0;
-  overflow: auto;
-  border-radius: 4px;
-  background-color: var(--bg-color-input);
-  border: 1px solid var(--stroke-color-module);
-}
-.results-item[data-v-afdf5f1b] {
-  display: flex;
-  align-items: center;
-  padding: 6px 15px;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.results-item[data-v-afdf5f1b]:hover {
-  background-color: var(--uikit-color-gray-7);
-  color: var(--text-color-link);
 }.message-box-overlay[data-v-92a9b340] {
   position: fixed;
   top: 0;
@@ -13283,6 +14050,123 @@ input[data-v-afdf5f1b]:disabled {
   text-align: center;
   background-color: var(--bg-color-dialog);
   border: none;
+}.tui-input[data-v-770959d6] {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+input[data-v-770959d6] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px 0 10px 16px;
+  font-size: 14px;
+  border-radius: 8px;
+  background-color: var(--bg-color-input);
+  color: var(--text-color-primary);
+  border: 1px solid var(--stroke-color-module);
+}
+input[data-v-770959d6]:focus {
+  outline: 0;
+  border-color: var(--text-color-link);
+}
+input[data-v-770959d6]:disabled {
+  background-color: var(--button-color-primary-disable);
+}
+.tui-input.no-border input[data-v-770959d6] {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+.suffix-icon[data-v-770959d6] {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+}
+.results[data-v-770959d6] {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  max-height: 254px;
+  padding: 7px 0;
+  overflow: auto;
+  border-radius: 4px;
+  background-color: var(--bg-color-input);
+  border: 1px solid var(--stroke-color-module);
+}
+.results-item[data-v-770959d6] {
+  display: flex;
+  align-items: center;
+  padding: 6px 15px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.results-item[data-v-770959d6]:hover {
+  background-color: var(--text-color-button-disable);
+  color: var(--text-color-link);
+}.tui-input[data-v-afdf5f1b] {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+input[data-v-afdf5f1b] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px 0 10px 16px;
+  font-size: 14px;
+  border-radius: 8px;
+  background-color: var(--bg-color-input);
+  color: var(--text-color-primary);
+  border: 1px solid var(--stroke-color-module);
+}
+input[data-v-afdf5f1b]:focus {
+  outline: 0;
+  border-color: var(--text-color-link);
+}
+input[data-v-afdf5f1b]:disabled {
+  background-color: var(--button-color-primary-disable);
+}
+.tui-input.no-border input[data-v-afdf5f1b] {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+.suffix-icon[data-v-afdf5f1b] {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+}
+.results[data-v-afdf5f1b] {
+  position: fixed;
+  z-index: 2;
+  width: 100%;
+  max-width: 12rem;
+  max-height: 254px;
+  padding: 7px 0;
+  overflow: auto;
+  border-radius: 4px;
+  background-color: var(--bg-color-input);
+  border: 1px solid var(--stroke-color-module);
+}
+.results-item[data-v-afdf5f1b] {
+  display: flex;
+  align-items: center;
+  padding: 6px 15px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.results-item[data-v-afdf5f1b]:hover {
+  background-color: var(--uikit-color-gray-7);
+  color: var(--text-color-link);
 }.dialog-content[data-v-62a1745b] {
   display: flex;
   align-items: center;