yx-web-sdk 0.0.4

package/dist/style.css

@@ -0,0 +1,1359 @@
+@charset "UTF-8";:root {
+  --im-img-msg-width: 230px;
+  --im-img-msg-height: 160px;
+}
+
+.ant-btn-primary {
+  background-color: var(--theme-primary);
+}
+
+.ant-btn-primary:not(:disabled):hover {
+  background-color: var(--theme-primary);
+}
+
+.ant-modal .ant-modal-content {
+  padding: 0;
+}
+
+.ant-modal-header {
+  padding: 16px 16px 0 16px;
+}
+
+.ant-modal-body {
+  padding: 16px 16px 0 16px;
+}
+
+.ant-modal-footer {
+  padding: 0 16px 16px 16px;
+}
+
+.ant-image-img.imgMsg {
+  width: var(--im-img-msg-width, 230px);
+  height: var(--im-img-msg-height, 160px);
+  border-radius: 8px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: transparent;
+  padding: 2px 0;
+  cursor: pointer;
+}.yx-common-avatar-container {
+  display: inline-block;
+  border-radius: 50%;
+}
+.yx-common-avatar-container .image {
+  display: inline-block;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+}
+.yx-common-avatar-container .text {
+  display: inline-block;
+  border-radius: 50%;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--theme-light-text);
+  text-align: center;
+  line-height: 70px;
+}
+.yx-chatCardWrapper {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+.yx-chatCardWrapper:not(:first-child) {
+  margin-top: 10px;
+}
+.yx-chatCardWrapper.reverse {
+  flex-direction: row-reverse;
+}
+.yx-chatCardWrapper.reverse .chatCardContent {
+  flex-direction: row-reverse;
+  margin-left: 0;
+  margin-right: 12px;
+}
+.yx-chatCardWrapper.reverse .chatCardInfo {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.yx-chatCardWrapper.reverse .chatCardMainContent {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.yx-chatCardWrapper.reverse .chatCardStatus {
+  margin-right: 10px;
+  margin-left: 0;
+}
+.yx-chatCardWrapper .chatCardContent {
+  flex: 1;
+  margin-left: 12px;
+  display: flex;
+  align-items: center;
+}
+.yx-chatCardWrapper .chatCardInfo {
+  font-size: 12px;
+  color: var(--theme-text, #252b3a);
+  text-align: left;
+  margin-bottom: 3px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.yx-chatCardWrapper .chatCardInfo .chatCardInfoName {
+  color: var(--theme-text, #252b3a);
+  font-weight: 500;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  max-width: 375px;
+}
+.yx-chatCardWrapper .chatCardInfo .chatCardInfoTime {
+  color: var(--theme-placeholder, #9c9db4);
+  font-size: 14px;
+}
+.yx-chatCardWrapper .chatCardStatus {
+  margin-left: 10px;
+}
+.yx-chatCardWrapper .chatCardMainContent.myMsg .textMsg {
+  color: var(--theme-light-text, #fff);
+  background-color: var(--theme-btn-primary, #000);
+}
+.yx-chatCardWrapper .chatCardMainContent.otherMsg .textMsg {
+  background-color: var(--theme-area, #f1f1f8);
+}
+.yx-chatCardWrapper .textMsg {
+  font-size: 16px;
+  padding: 12px 16px;
+  color: var(--theme-text, #252b3a);
+  word-break: break-all;
+  white-space: pre-wrap;
+  text-align: left;
+  border-radius: 8px;
+  max-width: 100%;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.yx-chatCardWrapper .textMsg a {
+  color: var(--theme-link, #2951e0) !important;
+}
+.yx-chatCardWrapper .chatCardQuoteMsg {
+  margin-top: 8px;
+  font-size: 16px;
+  padding: 12px 16px;
+  background-color: var(--theme-home-tab-bg-color, #f2f2f2);
+  border-radius: 8px;
+}
+.yx-chatCardWrapper .chatCardQuoteMsg .quoteMsgText {
+  color: var(--theme-text, #252b3a);
+  word-break: break-all;
+  white-space: pre-wrap;
+  text-align: left;
+  max-width: 100%;
+  width: -moz-fit-content;
+  width: fit-content;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.yx-chatCardWrapper .chatCardQuoteMsg .quoteMsgImg {
+  user-drag: none;
+  -webkit-user-drag: none;
+}
+.yx-chatCardWrapper .fileMsg {
+  width: -moz-fit-content;
+  width: fit-content;
+  background-color: #23252c;
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 8px;
+}
+.yx-chatCardWrapper .fileMsg .fileMsgContent {
+  min-width: 175px;
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.yx-chatCardWrapper .fileMsg .fileMsgName {
+  color: var(--theme-text);
+}
+.yx-chatCardWrapper .fileMsg .fileMsgSize {
+  color: #6e6f74;
+}
+
+/* 文本消息自定义右键菜单（Teleport 到 body，根节点 yx- 前缀，不嵌套以便选中 body 下节点） */
+.yx-chatCardTextMsgContextMenu {
+  position: fixed;
+  z-index: 9999;
+  min-width: 100px;
+  padding: 4px 0;
+  background: var(--theme-default-bg, #fff);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--theme-line, #e3e3ee);
+}
+.yx-chatCardTextMsgContextMenu .yx-chatCardTextMsgContextMenu-item {
+  padding: 6px 12px;
+  font-size: 14px;
+  color: var(--theme-text, #252b3a);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.yx-chatCardTextMsgContextMenu .yx-chatCardTextMsgContextMenu-item:hover {
+  background: var(--theme-area, #f5f5f5);
+}
+
+/* 闪烁动画：只执行一次 */
+.yx-flash-a-moment .flash-target {
+  animation: flash-a-moment 1s ease-in-out 1 forwards;
+}
+@keyframes flash-a-moment {
+0% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.6;
+}
+100% {
+    opacity: 1;
+}
+}
+/* @ 提及弹框：位置由 @floating-ui/dom 计算并应用 */
+.yx-ait-person-popover[data-v-11993b55] {
+  position: fixed;
+  z-index: 1050;
+  min-width: 200px;
+  max-height: 280px;
+  overflow-y: auto;
+  background: var(--theme-default-bg, #fff);
+  border-radius: 4px;
+  border: 1px solid var(--theme-dividing-line, #f1f1f8);
+  box-shadow: var(--theme-chat-input-shadow, 0px 1px 3px 0px rgba(29, 31, 58, 0.0196078431), 0px 2px 6px 0px rgba(29, 31, 58, 0.0196078431), 0px 4px 12px 0px rgba(29, 31, 58, 0.0196078431), 0px 8px 24px 0px rgba(29, 31, 58, 0.0392156863));
+}
+.yx-ait-person-popover .ait-person-popover-content[data-v-11993b55] {
+  padding: 4px 0;
+}
+.yx-ait-person-popover .ait-person-item[data-v-11993b55] {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  gap: 8px;
+}
+.yx-ait-person-popover .ait-person-item[data-v-11993b55]:hover {
+  background-color: var(--theme-area, #f1f1f8);
+}
+.yx-ait-person-popover .ait-person-item--selected[data-v-11993b55] {
+  background-color: var(--theme-area, #f1f1f8);
+}
+.yx-ait-person-popover .ait-person-item-name[data-v-11993b55] {
+  font-size: 14px;
+  color: var(--theme-text, #252b3a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.yx-channel-notice {
+  background: var(--theme-im-n-bg, #dbe2fa);
+  border-radius: 6px;
+  padding: 13px 16px;
+  color: var(--theme-primary, #000);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  max-width: 100%;
+  width: 100%;
+}
+.yx-channel-notice .yx-channel-notice-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+.yx-channel-notice .yx-channel-notice-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.yx-channel-notice .yx-channel-notice-text-inner {
+  line-height: 22px;
+  display: inline-flex;
+  white-space: nowrap;
+}
+.yx-channel-notice .yx-channel-notice-text-inner.yx-channel-notice-text--scroll {
+  animation: yx-notice-scroll var(--yx-notice-duration, 15s) linear infinite;
+}
+.yx-channel-notice .yx-channel-notice-text-item {
+  flex-shrink: 0;
+  padding-right: 2em; /* 两段文字之间的间隔 */
+}
+@keyframes yx-notice-scroll {
+0% {
+    transform: translateX(0);
+}
+100% {
+    transform: translateX(-50%);
+}
+}.yx-chatroomWrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.yx-chatroomWrapper .chatroomContent {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+.yx-chatroomWrapper .chatroomContent.is-scroll-locked {
+  overflow: hidden;
+}
+.yx-chatroomWrapper .chatroomContentNoMore {
+  text-align: center;
+  height: 21px;
+  line-height: 21px;
+}
+.yx-chatroomWrapper .emptyChatroomContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.yx-chatroomWrapper .emptyChatroomContent h1 {
+  color: var(--theme-text);
+  margin: 0;
+  font-size: 24px;
+}
+.yx-chatroomWrapper .emptyChatroomContent div {
+  font-size: 16px;
+  color: #b3b7bc;
+}
+.yx-chatroomWrapper .chatroomControllerContainer {
+  padding: 0px 12px 12px;
+  width: 100%;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper {
+  font-size: 16px;
+  color: var(--theme-text-secondary, #9c9db4);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border-bottom: 1px solid var(--theme-line, #e3e3ee);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  position: relative;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteDeleteBtn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  color: var(--theme-text, #252b3a);
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText .chatroomInputQuoteTextName {
+  color: var(--theme-text, #252b3a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .chatroomInputQuoteText .chatroomInputQuoteTextBody {
+  color: var(--theme-text, #252b3a);
+  word-break: break-all;
+  white-space: pre-wrap;
+  text-align: left;
+  max-width: 100%;
+  width: -moz-fit-content;
+  width: fit-content;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+}
+.yx-chatroomWrapper .chatroomInputQuoteWrapper .quoteImg {
+  user-drag: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
+}
+.yx-chatroomWrapper {
+  --input-controller-height: 34px;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper {
+  padding: 12px;
+  border-radius: 8px;
+  background-color: var(--theme-default-bg, #fff);
+  width: 100%;
+  color: var(--theme-line, #e3e3ee);
+  border: 1px solid var(--theme-line, #e3e3ee);
+  box-shadow: var(--theme-chat-input-shadow, 0px 1px 3px 0px rgba(29, 31, 58, 0.0196078431), 0px 2px 6px 0px rgba(29, 31, 58, 0.0196078431), 0px 4px 12px 0px rgba(29, 31, 58, 0.0196078431), 0px 8px 24px 0px rgba(29, 31, 58, 0.0392156863));
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputWrapper {
+  display: flex;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputLeft {
+  align-self: flex-end;
+  min-height: var(--input-controller-height);
+  display: flex;
+  align-items: center;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInputLeft .chatroomButtonSmile {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .lineSeparator {
+  width: 1px;
+  height: 24px;
+  background-color: var(--theme-line, #e3e3ee);
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp {
+  width: var(--input-controller-height);
+  height: var(--input-controller-height);
+  padding: 0;
+  background-color: var(--theme-btn-primary, #000);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp[disabled] {
+  background-color: var(--theme-disabled-tag-border1, #cccccc);
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomButtonArrowUp [aria-label=arrow-up] {
+  color: var(--theme-light-text, #fff);
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput {
+  align-self: center;
+  flex: 1;
+  height: 100%;
+  line-height: 100%;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  resize: none;
+  color: var(--theme-text, #252b3a);
+  background-color: var(--theme-default-bg, #fff);
+  font-size: 16px;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput::-moz-placeholder {
+  color: var(--theme-placeholder, #9c9db4);
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:-ms-input-placeholder {
+  color: var(--theme-placeholder, #9c9db4);
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput::placeholder {
+  color: var(--theme-placeholder, #9c9db4);
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:active, .yx-chatroomWrapper .chatroomControllerWrapper .chatroomInput:focus {
+  border: none;
+  outline: none;
+  box-shadow: none;
+}
+.yx-chatroomWrapper .chatroomControllerWrapper .chatroomController {
+  min-height: var(--input-controller-height);
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}.yx-chat-page-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--theme-default-bg, #fff);
+}
+.yx-chat-page-container .header-wrap {
+  display: flex;
+  justify-content: space-between;
+  padding: 22px 20px;
+  height: 68px;
+  align-items: center;
+  border-bottom: 1px solid var(--theme-dividing-line, #f1f1f8);
+  font-size: 16px;
+  box-sizing: border-box;
+}
+.yx-chat-page-container .header-wrap .left {
+  display: flex;
+  align-items: center;
+}
+.yx-chat-page-container .header-wrap .left .symbol {
+  margin-right: 6px;
+  font-size: 16px;
+}
+.yx-chat-page-container .header-wrap .left .name {
+  margin-right: 16px;
+  font-weight: bold;
+}
+.yx-chat-page-container .header-wrap .left .divider {
+  width: 1px;
+  height: 28px;
+  margin-right: 16px;
+  background: #464a54;
+}
+.yx-chat-page-container .header-wrap .left .title {
+  font-size: 14px;
+  color: var(--theme-head-title-link);
+}
+.yx-chat-page-container .header-wrap .right {
+  color: #464a54;
+  font-size: 26px;
+}
+.yx-chat-page-container .header-wrap .right.active {
+  color: #a3a4a9;
+}
+.yx-chat-page-container .content-wrap {
+  display: inline-flex;
+  flex-direction: row;
+  height: calc(100% - 68px);
+}
+.yx-chat-page-container .content-wrap .main {
+  flex: 1;
+  height: 100%;
+  max-width: 100%;
+}
+.yx-chat-page-container .content-wrap .members-wrap {
+  position: relative;
+  width: 208px;
+  height: 100%;
+  padding: 2px 0;
+  background-color: var(--theme-bg-default, #fff);
+  border-left: 1px solid var(--theme-line-border, #f1f1f8);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask {
+  position: fixed;
+  top: 55px;
+  right: 0;
+  width: 208px;
+  height: auto;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .ant-list-item {
+  padding: 0;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .ant-list-header {
+  position: fixed;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask.expand {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask.expand .mask-content {
+  top: 55px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 208px;
+  max-height: calc(100vh - 55px);
+  overflow-y: scroll;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .load-more-wrap {
+  padding: 4px 0;
+  color: var(--theme-text);
+  border: 1px solid var(--theme-line-border);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  font-size: 14px;
+  color: var(--theme-text);
+  cursor: pointer;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item.selected {
+  background-color: #212326;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .avatar {
+  margin-right: 8px;
+  margin-left: 14px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .nick-name {
+  margin-right: 8px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .nick-name .ant-typography {
+  color: var(--theme-text);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-item .owner {
+  color: #ffbd3e;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap {
+  position: fixed;
+  width: 300px;
+  top: 93px;
+  right: 220px;
+  min-height: 318px;
+  border-radius: 8px;
+  background-color: #18191c;
+  text-align: left;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .header-background {
+  width: 100%;
+  height: 80px;
+  border-radius: 8px 8px 0 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap {
+  margin-top: -35px;
+  padding: 0 20px 36px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .avatar-wrap {
+  height: 70px;
+  border-radius: 50%;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .avatar-wrap img {
+  display: inline-block;
+  width: 70px;
+  height: 70px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid #18191c;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .name-wrap {
+  margin-top: 17px;
+  margin-right: 8px;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 26px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .accid-wrap {
+  margin-top: 6px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .divider {
+  height: 1px;
+  margin-top: 16px;
+  background-color: var(--theme-line-border);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .roles-title {
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 16px;
+  color: #6e6f74;
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .roles-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  color: var(--theme-text);
+}
+.yx-chat-page-container .content-wrap .members-wrap .mask .mask-content .member-detail-wrap .body-wrap .roles-wrap .role-item {
+  padding: 4px 8px;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  border-radius: 8px;
+  background-color: #282a2f;
+}.sidebar-container[data-v-2cae689d] {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+.user-panel-float[data-v-2cae689d] {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  width: 342px;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  background-color: var(--theme-global-bg);
+  border: 1px solid var(--theme-line-border);
+  z-index: 10;
+  gap: 10px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 3px 0px rgba(29, 31, 58, 0.0196078431);
+}
+.user-panel-float .user-avatar[data-v-2cae689d] {
+  position: relative;
+  flex-shrink: 0;
+}
+.user-panel-float .user-avatar .online-indicator[data-v-2cae689d] {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  background-color: var(--theme-success-text);
+  border: 3px solid #1a1b1e;
+  border-radius: 50%;
+}
+.user-panel-float .user-info[data-v-2cae689d] {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+.user-panel-float .user-info .user-name[data-v-2cae689d] {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--theme-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.user-panel-float .user-info .user-status[data-v-2cae689d] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--theme-success-text);
+}
+.user-panel-float .user-info .user-status .status-dot[data-v-2cae689d] {
+  width: 8px;
+  height: 8px;
+  background-color: var(--theme-success-text);
+  border-radius: 50%;
+}
+.user-panel-float .user-actions[data-v-2cae689d] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.user-panel-float .user-actions .action-btn[data-v-2cae689d] {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #b9bbbe;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 16px;
+  outline: none;
+}
+.user-panel-float .user-actions .action-btn[data-v-2cae689d]:hover {
+  background-color: var(--theme-icon-hover);
+  color: var(--theme-text);
+}
+.user-panel-float .user-actions .action-btn[data-v-2cae689d]:focus {
+  outline: none;
+}
+.server-sidebar[data-v-2cae689d] {
+  display: flex;
+  flex-direction: column;
+  width: 72px;
+  background-color: var(--theme-table-header-bg);
+  padding: 16px 0;
+  padding-bottom: 60px;
+}
+.server-sidebar .server-list[data-v-2cae689d] {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-right: 1px solid var(--theme-line);
+}
+.server-sidebar .server-list[data-v-2cae689d]::-webkit-scrollbar {
+  width: 0;
+}
+.server-sidebar .logo-wrap[data-v-2cae689d] {
+  margin: 0 16px;
+  border-bottom: 1px solid var(--theme-line-split);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+}
+.server-sidebar .logo-wrap .logo[data-v-2cae689d] {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background-color: rgba(218, 32, 62, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
+}
+.server-sidebar .server-item[data-v-2cae689d] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 16px 16px;
+  cursor: pointer;
+}
+.server-sidebar .server-item .server-icon[data-v-2cae689d] {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-line-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
+}
+.server-sidebar .server-item .server-icon img[data-v-2cae689d] {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.server-sidebar .server-item .server-icon .server-initial[data-v-2cae689d] {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--theme-text);
+}
+.server-sidebar .server-item:hover .server-icon[data-v-2cae689d], .server-sidebar .server-item.active .server-icon[data-v-2cae689d] {
+  border-radius: 16px;
+  background-color: var(--theme-form-control-line-active);
+}
+.server-sidebar .server-item:hover .server-icon .server-initial[data-v-2cae689d], .server-sidebar .server-item.active .server-icon .server-initial[data-v-2cae689d] {
+  color: var(--theme-light-text);
+}
+.server-sidebar .server-item .unread-badge[data-v-2cae689d] {
+  position: absolute;
+  bottom: -4px;
+  right: 4px;
+}
+.server-sidebar .server-item.add-server[data-v-2cae689d] {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 2px solid var(--theme-global-bg);
+}
+.server-sidebar .server-item.add-server .add-server-btn[data-v-2cae689d] {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--theme-global-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: border-radius 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
+  color: var(--theme-success-text);
+  font-size: 20px;
+}
+.server-sidebar .server-item.add-server .add-server-btn[data-v-2cae689d]:hover {
+  border-radius: 16px;
+  background-color: var(--theme-success-text);
+  color: var(--theme-text);
+}
+.channel-sidebar[data-v-2cae689d] {
+  display: flex;
+  flex-direction: column;
+  width: 294px;
+  box-sizing: border-box;
+  background-color: var(--theme-table-header-bg);
+  border-right: 1px solid var(--theme-line);
+  padding-bottom: 60px;
+}
+.channel-sidebar .server-header[data-v-2cae689d] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22px 20px;
+  border-bottom: 1px solid var(--theme-line);
+}
+.channel-sidebar .server-header .server-name[data-v-2cae689d] {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--theme-stress-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.channel-sidebar .server-header .server-setting[data-v-2cae689d] {
+  color: #b9bbbe;
+  cursor: pointer;
+  font-size: 16px;
+}
+.channel-sidebar .server-header .server-setting[data-v-2cae689d]:hover {
+  color: #dcddde;
+}
+.channel-sidebar .channel-list[data-v-2cae689d] {
+  flex: 1;
+  overflow-y: auto;
+}
+.channel-sidebar .channel-list[data-v-2cae689d]::-webkit-scrollbar {
+  width: 4px;
+}
+.channel-sidebar .channel-list[data-v-2cae689d]::-webkit-scrollbar-thumb {
+  background-color: var(--theme-line);
+  border-radius: 2px;
+}
+.channel-sidebar .channel-item[data-v-2cae689d] {
+  display: flex;
+  align-items: center;
+  padding: 16px 22px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 2px;
+  color: var(--theme-icon-fill-weak);
+}
+.channel-sidebar .channel-item[data-v-2cae689d]:hover {
+  background-color: var(--theme-icon-hover);
+  color: var(--theme-text);
+}
+.channel-sidebar .channel-item:hover .channel-setting[data-v-2cae689d] {
+  opacity: 1;
+}
+.channel-sidebar .channel-item.active[data-v-2cae689d] {
+  background-color: var(--theme-icon-hover);
+  color: var(--theme-text);
+  font-weight: 500;
+  font-size: 16px;
+}
+.channel-sidebar .channel-item .channel-icon[data-v-2cae689d] {
+  margin-right: 6px;
+  font-size: 20px;
+  font-weight: 400;
+  color: #8e9297;
+}
+.channel-sidebar .channel-item .channel-name[data-v-2cae689d] {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+.channel-sidebar .channel-item .channel-unread[data-v-2cae689d] {
+  margin-left: 4px;
+}
+.channel-sidebar .channel-item .channel-setting[data-v-2cae689d] {
+  opacity: 0;
+  margin-left: 8px;
+  font-size: 14px;
+  color: #8e9297;
+  cursor: pointer;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+}
+.channel-sidebar .channel-item .channel-setting[data-v-2cae689d]:hover {
+  color: var(--theme-text);
+}
+.channel-sidebar .add-channel-item[data-v-2cae689d] {
+  display: flex;
+  align-items: center;
+  padding: 12px 22px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 4px;
+  color: var(--theme-link);
+}
+.channel-sidebar .add-channel-item .channel-icon[data-v-2cae689d] {
+  margin-right: 6px;
+  font-size: 16px;
+  color: var(--theme-link);
+  transition: color 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.channel-sidebar .add-channel-item .channel-name[data-v-2cae689d] {
+  font-size: 14px;
+}
+[data-v-2cae689d] .ant-modal .ant-modal-content {
+  background-color: var(--theme-global-bg);
+  border-radius: 8px;
+}
+[data-v-2cae689d] .ant-modal .ant-modal-header {
+  background-color: var(--theme-global-bg);
+  border-bottom: none;
+}
+[data-v-2cae689d] .ant-modal .ant-modal-title {
+  color: var(--theme-text);
+}
+[data-v-2cae689d] .ant-modal .ant-modal-close-x {
+  color: #b9bbbe;
+}
+[data-v-2cae689d] .ant-modal .ant-form-item-label > label {
+  color: #b9bbbe;
+}
+[data-v-2cae689d] .ant-modal .ant-input {
+  background-color: var(--theme-line);
+  border-color: #040405;
+  color: #dcddde;
+}
+[data-v-2cae689d] .ant-modal .ant-input::-moz-placeholder {
+  color: #72767d;
+}
+[data-v-2cae689d] .ant-modal .ant-input:-ms-input-placeholder {
+  color: #72767d;
+}
+[data-v-2cae689d] .ant-modal .ant-input::placeholder {
+  color: #72767d;
+}
+[data-v-2cae689d] .ant-modal .ant-input:hover,[data-v-2cae689d] .ant-modal .ant-input:focus {
+  border-color: #5865f2;
+}
+[data-v-2cae689d] .ant-modal .ant-tabs-tab {
+  color: #b9bbbe;
+}
+[data-v-2cae689d] .ant-modal .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: var(--theme-text);
+}
+[data-v-2cae689d] .ant-modal .ant-tabs-ink-bar {
+  background-color: #5865f2;
+}
+.footer-container[data-v-2cae689d] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.invite-btn[data-v-2cae689d] {
+  cursor: pointer;
+  color: var(--theme-icon-fill-weak);
+  transition: color 0.15s ease;
+}
+.invite-btn[data-v-2cae689d]:hover {
+  color: var(--theme-text);
+}.channel-modal .ant-modal-header {
+  background-color: var(--theme-table-header-bg);
+  padding: 16px;
+  margin-bottom: 0;
+}
+.channel-modal .ant-modal-close {
+  display: none;
+}
+.channel-modal .header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.channel-modal .header-container .header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+.channel-modal .header-container .header-close {
+  cursor: pointer;
+  color: #b9bbbe;
+  font-size: 14px;
+  padding: 4px;
+}
+.channel-modal .header-container .header-close:hover {
+  color: var(--theme-text);
+}
+.invite-modal .ant-modal-content {
+  border-radius: 8px;
+  padding: 0;
+}
+.invite-modal .ant-modal-header {
+  background-color: var(--theme-table-header-bg);
+  padding: 20px 24px 16px;
+  margin-bottom: 0;
+  border-bottom: none;
+}
+.invite-modal .ant-modal-body {
+  padding: 24px;
+}
+.invite-modal .ant-modal-close {
+  display: none;
+}
+.invite-modal .header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.invite-modal .header-container .header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+.invite-modal .invite-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.invite-modal .invite-header .invite-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.invite-modal .invite-header .invite-title-row .invite-icon {
+  font-size: 18px;
+  color: var(--theme-text);
+}
+.invite-modal .invite-header .invite-title-row .invite-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--theme-text);
+}
+.invite-modal .invite-header .invite-close {
+  cursor: pointer;
+  color: var(--theme-icon-fill-weak);
+  font-size: 16px;
+  padding: 4px;
+  transition: color 0.15s ease;
+}
+.invite-modal .invite-header .invite-close:hover {
+  color: var(--theme-text);
+}
+.invite-modal .invite-content .invite-subtitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--theme-text);
+  margin-bottom: 12px;
+}
+.invite-modal .invite-content .invite-subtitle .channel-tag {
+  color: var(--theme-text);
+}
+.invite-modal .invite-content .invite-desc {
+  font-size: 14px;
+  color: var(--theme-icon-fill-weak);
+  margin-bottom: 16px;
+}
+.invite-modal .invite-content .invite-link-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid var(--theme-line-border);
+  border-radius: 6px;
+  padding: 8px 8px 8px 16px;
+}
+.invite-modal .invite-content .invite-link-wrap .invite-link-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--theme-text);
+  font-size: 14px;
+  padding: 0;
+  box-shadow: none;
+}
+.invite-modal .invite-content .invite-link-wrap .invite-link-input:focus, .invite-modal .invite-content .invite-link-wrap .invite-link-input:hover {
+  border: none;
+  box-shadow: none;
+}
+.invite-modal .invite-content .invite-link-wrap .invite-link-input.ant-input {
+  background: transparent;
+}
+.invite-modal .invite-content .invite-link-wrap .copy-btn {
+  flex-shrink: 0;
+  background-color: var(--theme-stress-text);
+  border: none;
+  color: var(--theme-light-text);
+  font-weight: 500;
+  padding: 6px 20px;
+  height: auto;
+  border-radius: 4px;
+}
+.invite-modal .invite-content .invite-link-wrap .copy-btn:hover {
+  background-color: var(--theme-text);
+  opacity: 0.9;
+}
+.delete-channel-modal .ant-modal-body {
+  padding-bottom: 16px;
+}.yx-members-sidebar[data-v-472a2fa7] {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  background-color: var(--theme-table-header-bg);
+  border-left: 1px solid var(--theme-dividing-line, #f1f1f8);
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+.yx-members-sidebar.collapsed[data-v-472a2fa7] {
+  width: 50px;
+}
+.yx-members-sidebar.collapsed .members-header[data-v-472a2fa7] {
+  justify-content: center;
+  border-bottom: 1px solid var(--theme-dividing-line, #f1f1f8);
+}
+.yx-members-sidebar.collapsed .members-list[data-v-472a2fa7] {
+  padding: 8px 6px;
+}
+.yx-members-sidebar.collapsed .member-item[data-v-472a2fa7] {
+  justify-content: center;
+  padding: 6px 0;
+}
+.yx-members-sidebar.collapsed .member-item .member-avatar[data-v-472a2fa7] {
+  margin-right: 0;
+}
+.yx-members-sidebar .members-header[data-v-472a2fa7] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 22px 20px;
+  border-bottom: 1px solid var(--theme-dividing-line, #f1f1f8);
+  gap: 8px;
+}
+.yx-members-sidebar .members-header .members-title[data-v-472a2fa7] {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--theme-icon-fill-weak);
+  flex: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.yx-members-sidebar .members-header .members-count[data-v-472a2fa7] {
+  font-size: 12px;
+  color: var(--theme-icon-fill-weak);
+  background-color: var(--theme-global-bg);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+.yx-members-sidebar .members-header .toggle-btn[data-v-472a2fa7] {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--theme-icon-fill-weak);
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+.yx-members-sidebar .members-header .toggle-btn[data-v-472a2fa7]:hover {
+  background-color: var(--theme-icon-hover);
+  color: var(--theme-text);
+}
+.yx-members-sidebar .members-list[data-v-472a2fa7] {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+.yx-members-sidebar .members-list[data-v-472a2fa7]::-webkit-scrollbar {
+  width: 4px;
+}
+.yx-members-sidebar .members-list[data-v-472a2fa7]::-webkit-scrollbar-thumb {
+  background-color: var(--theme-line);
+  border-radius: 2px;
+}
+.yx-members-sidebar .member-item[data-v-472a2fa7] {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: default;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  margin-bottom: 2px;
+}
+.yx-members-sidebar .member-item[data-v-472a2fa7]:hover {
+  background-color: var(--theme-icon-hover);
+}
+.yx-members-sidebar .member-item.offline[data-v-472a2fa7] {
+  opacity: 0.5;
+}
+.yx-members-sidebar .member-item.offline[data-v-472a2fa7]:hover {
+  opacity: 0.8;
+}
+.yx-members-sidebar .member-item.offline .member-name[data-v-472a2fa7] {
+  color: var(--theme-icon-fill-weak);
+}
+.yx-members-sidebar .member-item .member-avatar[data-v-472a2fa7] {
+  position: relative;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+.yx-members-sidebar .member-item .member-avatar .online-dot[data-v-472a2fa7] {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  background-color: #52c41a;
+  border: 2px solid var(--theme-table-header-bg);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+.yx-members-sidebar .member-item .member-avatar .owner-badge[data-v-472a2fa7] {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 16px;
+  height: 16px;
+  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+.yx-members-sidebar .member-item .member-info[data-v-472a2fa7] {
+  flex: 1;
+  overflow: hidden;
+}
+.yx-members-sidebar .member-item .member-info .member-name[data-v-472a2fa7] {
+  font-size: 14px;
+  color: var(--theme-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.15s ease;
+}
+.yx-members-sidebar .loading-more[data-v-472a2fa7] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 0;
+}.qchat-container[data-v-9c960781] {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  color: var(--theme-text);
+  font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.loading-wrap[data-v-9c960781],
+.error-wrap[data-v-9c960781],
+.init-wrap[data-v-9c960781] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.loading-wrap[data-v-9c960781] .ant-spin-text,
+.error-wrap[data-v-9c960781] .ant-spin-text,
+.init-wrap[data-v-9c960781] .ant-spin-text {
+  color: #dcddde;
+}
+.loading-wrap[data-v-9c960781] .ant-result-title,
+.loading-wrap[data-v-9c960781] .ant-result-subtitle,
+.error-wrap[data-v-9c960781] .ant-result-title,
+.error-wrap[data-v-9c960781] .ant-result-subtitle,
+.init-wrap[data-v-9c960781] .ant-result-title,
+.init-wrap[data-v-9c960781] .ant-result-subtitle {
+  color: #dcddde;
+}
+.loading-wrap[data-v-9c960781] .ant-empty-description,
+.error-wrap[data-v-9c960781] .ant-empty-description,
+.init-wrap[data-v-9c960781] .ant-empty-description {
+  color: #72767d;
+}
+.chat-main[data-v-9c960781] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--theme-global-bg);
+  overflow: hidden;
+  min-width: 300px;
+}
+.chat-main .no-channel[data-v-9c960781] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.chat-main .no-channel[data-v-9c960781] .ant-empty-description {
+  color: #72767d;
+}