/**
* =====================================
* 滚动条美化
**/

/* 亮色 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #b8b8b8;
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #878787;
}

/* 暗色 */
body[theme-mode="dark"] ::-webkit-scrollbar-thumb {
  background: #565656;
}

body[theme-mode="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #424242; /* 更深的灰色 */
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.titlebar {
  -webkit-app-region: drag;
  height: 32px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  cursor: move;
}

/* 对于需要在标题栏中放置的按钮，需要设置为不可拖拽 */
.titlebar button {
  -webkit-app-region: no-drag;
  cursor: pointer;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 禁止所有图片拖拽 */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.yw-message-time-box {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  display: table;
}

.yw-message-time {
  padding: 5px 8px 0;
  white-space: nowrap;
  width: auto;
  font-size: 12px;
  font-weight: 600;
}
body[theme-mode="dark"] .yw-message-time {
  color: #999;
}

.yw-message-time-line1 {
  background-image: linear-gradient(360deg, transparent, rgba(9, 30, 66, 0.12));
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  top: 13px;
  width: 50%;
  display: table-cell;
  position: relative;
}

.yw-message-time-line2 {
  background-image: linear-gradient(360deg, rgba(9, 30, 66, 0.12), transparent);
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  top: 13px;
  width: 50%;
  display: table-cell;
  position: relative;
}

.yw-message-split-box {
  width: 85%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  display: table;
}

.yw-message-split-content {
  padding: 5px 8px 0;
  white-space: nowrap;
  width: auto;
  font-size: 12px;
  font-weight: 600;
}

.yw-message-split-line1 {
  background-image: linear-gradient(360deg, transparent, rgba(9, 30, 66, 0.12));
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  top: 13px;
  width: 50%;
  display: table-cell;
  position: relative;
}

.yw-message-split-line2 {
  background-image: linear-gradient(360deg, rgba(9, 30, 66, 0.12), transparent);
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  top: 13px;
  width: 50%;
  display: table-cell;
  position: relative;
}

.yw-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #f5f5f5;
  transition: opacity 0.3s ease;
}

/* 确保在列表项中的头像正确显示 */
.yw-list-item-subtitle-icon.yw-avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 4px !important;
}

/* 确保在频道头像中的头像正确显示 */
.yw-channelavatar-avatar-img.yw-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
}

/* 确保图片在加载时有占位符 */
.yw-avatar[src=""], 
.yw-avatar:not([src]) {
  opacity: 0;
}

/* 确保图片加载完成后显示 */
.yw-avatar[src]:not([src=""]) {
  opacity: 1;
}

.yw-mergeforwardmessagelist {
  width: 100%;
  height: 100%;
}

.yw-mergeforwardmessagelist-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-size: 16px;
}

.yw-mergeforwardmessagelist-content {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  background-color: var(--yw-color-secondary);
  overflow-x: hidden;
  overflow-y: auto;
}

.yw-mergeforwardmessagelist-content-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
}

.yw-mergeforwardmessagelist-content-msgs {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.yw-mergeforwardmessagelist-content-msg {
  display: flex;
  width: 100%;
  padding: 15px;
  background-color: var(--yw-bg-secondary);
  flex-wrap: nowrap;
  align-items: flex-start;
}

.yw-mergeforwardmessagelist-content-msg-info {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.yw-mergeforwardmessagelist-content-msg-info-first {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0px 15px;
}

.yw-mergeforwardmessagelist-content-msg-info-first-name {
  font-size: 14px;
  color: #999;
}

.yw-mergeforwardmessagelist-content-msg-info-first-time {
  font-size: 12px;
  color: #999;
}

.yw-mergeforwardmessagelist-content-msg-info-second-msgcontent {
  padding: 0px 15px;
  margin-top: 5px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  max-width: 100%;
  overflow-wrap: break-word;
}

.yw-mergeforwardmessagelist-content-msg-info-second-msgcontent img {
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 添加图片容器样式 */
.yw-mergeforward-image-container {
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
  max-width: 100%;
  margin: 4px 0;
}

/* 修复图片显示问题 */
.yw-mergeforwardmessagelist img {
  max-width: 100%;
  max-height: 300px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/* 视频容器样式 */
.yw-mergeforward-video-container {
  border-radius: 4px;
  overflow: hidden;
  background-color: #f5f5f5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
}

.yw-mergeforward-video-container img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.yw-mergeforward-video-container video {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: #000;
}

:root {
  --yw-width-max-message: 540px;
}

.yw-message-base {
  width: 100%;
  height: 100%;
  display: flex;
  /* 确保消息基础容器不会产生横向滚动 */
  overflow: hidden;
}

.yw-message-base-check-open {
  cursor: pointer;
}

.yw-message-base-check-open.yw-message-not-selectable {
  cursor: not-allowed;
  opacity: 0.2;
}

.yw-message-base-send,
.yw-message-base-recv {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 确保消息容器不会超出父容器宽度 */
  min-width: 0;
  overflow: hidden;
}

.yw-message-base-send {
  align-items: flex-end;
  margin-right: 5px;
}

/* 发送消息的气泡容器右对齐 */
.yw-message-base-send .yw-message-base-bubble-box {
  align-self: flex-end;
}

.yw-message-base-recv {
  margin-left: 20px;
  transform: translate3d(0, 0, 0);
  transition: all var(--yw-layer-transition);
}

.yw-message-base-check-open .yw-message-base-recv {
  /* transform: translate3d(30px, 0, 0); */
  margin-left: 50px;
}

.senderName {
  color: rgba(9, 30, 66, 0.74);
  font-size: 12px;
  font-weight: 400;
  /* text-transform: capitalize; */
  padding-bottom: 1px;
}

.senderAvatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.yw-message-base-box {
  display: flex;
  gap: 16px;
  position: relative;
  /* 确保消息框不会超出容器宽度 */
  min-width: 0;
  overflow: hidden;
}

.yw-message-base-send .yw-message-base-box {
  flex-direction: row-reverse;
  justify-content: center;
  margin-left: 0px;
  margin-right: 10px;
}

.yw-message-base-send .senderName {
  padding-right: 41px;
}

.yw-message-base-recv .senderName {
  padding-left: 41px;
}

.yw-message-base-send .senderAvatar {
  display: none;
  text-align: center;
}

.yw-message-base-bubble-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* 移除固定最小宽度，改为自适应内容宽度 */
  width: -moz-fit-content;
  width: fit-content;
  /* 设置最大宽度限制，确保不会过宽 */
  max-width: min(540px, calc(100vw - 120px));
  max-width: min(var(--yw-width-max-message), calc(100vw - 120px));
  /* 确保气泡容器可以收缩 */
  min-width: 0;
  overflow: hidden;
}

/* 确保接收消息的气泡容器左对齐 */
.yw-message-base-recv .yw-message-base-bubble-box {
  align-self: flex-start;
}

.yw-message-base-bubble-box-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 确保用户名和时间相对于消息内容两端对齐 */
  width: 100%;
  gap: 8px;
}

.yw-message-base-bubble {
  color: var(--yw-text-primary);
  background-color: var(--yw-bg-message-item);
  display: flex;
  /* margin-bottom: 4px; */
  padding: 10px;
  position: relative;
  word-wrap: break-word;
  max-width: 100%;
  /* 设置最小宽度，确保短消息也有合理的显示效果 */
  min-width: 60px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 15px;
  /* 确保内容可以正确换行 */
  overflow-wrap: break-word;
  word-break: break-word;
  /* 确保气泡内容不会溢出 */
  overflow: hidden;
}

/* video和image消息不要padding */
.yw-message-base-bubble.yw-message-type-small-video,
.yw-message-base-bubble.yw-message-type-image {
  padding: 0px;
  background-color: transparent !important;
  box-shadow: none;
}

.yw-message-base-bubble-box.send .yw-message-base-bubble {
  background-color: var(--yw-sender-text-primary);
}

.yw-message-base-bubble-box.hide .yw-message-base-bubble {
  padding: 0px;
}

body[theme-mode="dark"] .yw-message-base-bubble {
  box-shadow: none;
}

@media screen and (max-width: 640px) {
  .yw-message-base-bubble-box {
    max-width: calc(100vw - 80px);
  }

  .yw-message-base-bubble-box-top {
    /* 移动端减小最小宽度 */
    min-width: 100px;
  }

  .yw-message-base-bubble {
    /* 移动端减小最小宽度 */
    min-width: 50px;
  }
}

.yw-message-base-bubble-box.send .yw-message-base-bubble {
  background-color: var(--yw-color-primary);
  color: white;
  border-radius: 12px 0 12px 12px;
}

.yw-message-base-bubble-box.send .yw-message-base-bubble.yw-message-type-file {
  background-color: var(--yw-bg-base);
}

.yw-message-base-bubble-box.recv .yw-message-base-bubble {
  border-radius: 0 12px 12px 12px;
}

.yw-message-base-bubble-box.hide .yw-message-base-bubble {
  background-color: transparent !important;
  box-shadow: none;
}

.svgAppendix {
  display: none;
  overflow: hidden;
  position: absolute;
  width: 0.5625rem;
  height: 1.125rem;
  font-size: 1rem !important;
  bottom: -1px;
}

.yw-message-base-bubble-box.last .svgAppendix {
  display: block;
}

.yw-message-base-bubble-box.single .svgAppendix {
  display: block;
}

.yw-message-base-bubble-box.send .svgAppendix {
  right: -0.551rem;
}

.yw-message-base-bubble-box.recv .svgAppendix {
  left: -0.52rem;
}

.yw-message-base-bubble-box.send .svgAppendix .corner {
  fill: var(--yw-text-primary);
}

.yw-message-base-bubble-box.recv .svgAppendix .corner {
  fill: white;
}

body[theme-mode="dark"] .yw-message-base-bubble-box.recv .svgAppendix .corner {
  fill: var(--yw-color-secondary);
}

/* .yw-message-base-recv .yw-message-base-bubble {
    margin-left: 5px;
    background-color: #bedbf5;
}

.yw-message-base-send .yw-message-base-bubble {
    margin-right: 5px;
    background-color: #fff;
    box-shadow: -1px 1px 1px rgba(0,0,0,.12);
    color: rgba(9,30,66,.87) !important;
    border-radius: 20px 4px 8px 20px;
}*/

.messageNameBox {
  display: flex;
  margin-bottom: 1px;
}

.yw-message-base-send .messageNameBox {
  flex-direction: row-reverse;
  justify-content: end;
}

.yw-message-base-recv .messageNameBox {
  flex-direction: row;
}

.yw-message-base-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 确保消息内容可以正确收缩 */
  min-width: 0;
  overflow: hidden;
}

.popupMenusContaner {
  display: none;
}

.yw-message-base-box:hover .popupMenusContaner {
  display: block;
}

.yw-message-base-checkBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: translate3d(-10px, 0, 0);
  transition: transform var(--yw-layer-transition);
}

.yw-message-base-check-open {
  cursor: pointer;
}

.yw-message-base-check-open .yw-message-base-checkBox {
  transform: translate3d(25px, 0, 0);
}

.yw-message-base-checkBox .yw-check {
  position: absolute;
  top: 9px;
}

.yw-message-sender .yw-message-base-checkBox .yw-check {
  top: 50%;
  transform: translateY(-50%);
}

.yw-message-base-send .checkBox {
  left: auto;
  right: -30px;
}

.yw-message-base-send .yw-message-base-box.checked {
  margin-left: 0;
  margin-right: 30px;
}

.yw-message-base-recv .yw-message-base-box.checked .senderAvatar {
  left: -30px;
}

.replyBox {
  width: 100%;
}

.reply {
  position: relative;
  color: #666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 12px;
  margin-bottom: 4px;
  max-width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

.reply::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  border-radius: 50px;
  background-color: var(--yw-color-theme);
}

.messageMeta {
  display: flex;
  align-items: center;
  /* 确保时间区域不会被压缩 */
  flex-shrink: 0;
}

.messageTime {
  margin-inline-end: 0.1875rem;
  font-size: 0.75rem;
  white-space: nowrap;
  /* 确保时间文本不会被压缩 */
  flex-shrink: 0;
}

.yw-message-base-bubble-box.recv .messageTime {
  color: var(--yw-state-default-text);
}

.yw-message-base-bubble-box.send .messageTime {
  color: var(--yw-state-default-text);
}

.yw-message-text-commontext {
  line-height: 1.5;
}

.textTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(1rem - 0.125rem);
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
  font-weight: 500;
  color: var(--yw-chat-message-receiver-color);
  unicode-bidi: plaintext;
  /* 用户名占据剩余空间，确保与时间两端对齐 */
  flex: 1 1;
  /* 设置最小宽度，防止用户名被过度压缩 */
  min-width: 0;
}

.icon-message-read::before {
  content: "";
  color: var(--yw-state-default-text);
}

.icon-message-succeeded::before {
  content: "";
  color: var(--yw-state-default-text);
}

.icon-message-pending::before {
  content: "";
}

.messageStatus {
  overflow: hidden;
  display: inline-block;
  line-height: 1;
  margin-left: -0.1875rem;
  font-size: 1.1875rem;
  border-radius: 0.625rem;
}

.messageFail {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messageFail img {
  width: 14px;
  height: 14px;
  /* margin-left: 10px; */
}

.yw-message-error-reason {
  font-size: 13px;
  margin-right: 10px;
  margin-top: 5px;
  color: var(--yw-text-secondary);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px; /* 减小间距 */
  flex-wrap: nowrap;
}

/* 发送验证请求链接样式 */
.yw-message-add-friend-link {
  color: var(--yw-color-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

.yw-message-add-friend-link:hover {
  color: #6a35e8;
  color: var(--yw-color-primary-hover, #6a35e8);
  text-decoration: underline;
}

.yw-message-item-pinned {
  position: relative;
}

.yw-message-item-pinned-icon {
  font-size: 8px;
  margin-right: 4px;
}

.yw-message-edited-mark {
  font-size: 12px;
  color: var(--yw-text-tertiary);
  margin-left: 4px;
  opacity: 0.7;
}

.yw-check {
  cursor: pointer;
}

.yw-mergeforwards {
  width: 300px;
  background-color: var(--yw-color-theme);
  border-radius: 8px;
  cursor: pointer;
}

.yw-mergeforwards-content {
  padding: 10px 10px 4px 10px;
  color: var(--yw-text-primary);
}

.yw-mergeforwards-content-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--yw-text-primary);
}

.yw-mergeforwards-content-items {
  padding-bottom: 5px;
}

.yw-mergeforwards-content-items .yw-mergeforwards-content-item {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--yw-text-secondary) !important;
}

.yw-mergeforwards-content-tip {
  display: flex;
  justify-content: space-between;
  color: var(--yw-text-secondary) !important;
  font-size: 13px;
  padding: 2px 0px;
}

.yw-mergeforwards-content-tip p {
  margin-bottom: 0px;
}

/* .yw-mergeforwards-content-tip p:last-child {
  margin-top: -4px;
} */

.yw-mergeforwards-content-line {
  width: 100%;
  background-color: var(--yw-line-color);
  height: 1px;
}

:root {
  /* 统一的间距和尺寸规范 */
  --conversation-padding: 15px;
  --conversation-gap: 10px;
  --conversation-border-radius: 10px;

  /* 保留必要的高度变量 */
  --footer-min-height: 152px;
  --notification-height: 42px;
  --reply-preview-height: 64px;

  /* 消息相关尺寸 */
  --message-padding-vertical: 20px;
  --message-reminder-width: 4px;
  --message-reminder-border-radius: 2px;

  /* 拖拽遮罩相关 */
  --drag-mask-padding: 15px;
  --drag-mask-border-radius: 4px;
  --drag-mask-font-size: 16px;
  --drag-mask-content-padding: 20px;

  /* 回复视图相关 */
  --reply-content-margin-left: 15px;
  --reply-content-margin-top: 2px;
  --reply-userinfo-margin-left: 5px;
  --reply-close-padding: 20px;

  /* 多选面板相关 */
  --multiple-panel-height: 152px;
  --multiple-panel-item-margin: 60px;
  --multiple-panel-icon-size: 60px;
  --multiple-panel-icon-svg-size: 24px;
  --multiple-panel-title-font-size: 14px;
  --multiple-panel-title-margin-top: 4px;
  --multiple-panel-close-top: 20px;
  --multiple-panel-close-left: 40px;
  --multiple-panel-close-padding: 10px;

  /* 定位按钮相关 */
  --position-view-bottom: 1rem;
  --position-view-right: 1.5rem;
  --position-item-size: 50px;
  --position-item-margin-bottom: 10px;
  --position-item-img-size: 20px;
  --position-item-font-size: 1.75rem;

  /* 未读计数相关 */
  --unread-count-min-width: 1.5rem;
  --unread-count-height: 1.5rem;
  --unread-count-padding: 0 0.45rem;
  --unread-count-border-radius: 0.75rem;
  --unread-count-font-size: 0.875rem;
  --unread-count-top: -0.3rem;
  --unread-count-right: -0.3rem;

  /* 滚动条相关 */
  --scrollbar-width: 4px;
  --scrollbar-border-radius: 3px;

  /* 动画时间 */
  --reminder-animation-duration: 1.5s;
  --reminder-move-animation-duration: 2s;
  --position-transition-duration: 0.25s;
  --opacity-transition-duration: 0.2s;

  /* 响应式断点相关尺寸 */
  --mobile-footer-margin: 5px 10px;
  --mobile-footer-min-height: 120px;
  --mobile-reply-margin: 0 10px 5px;
  --mobile-multiple-panel-height: 120px;
  --small-screen-footer-min-height: 100px;
  --small-screen-multiple-panel-height: 100px;
}

/* Conversation主容器 */
.yw-conversation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--yw-color-secondary-2);
}

/* 通知区域 */
.yw-conversation-notifications {
  flex-shrink: 0;
}

/* 消息内容区域 */
.yw-conversation-content {
  flex: 1 1;
  min-height: 0;
  position: relative;
}

/* 系统会话的特殊处理 */
.yw-conversation-content.yw-conversation-content-system {
  flex: 1 1;
}

/* ConversationBody组件的样式 */
.yw-conversation-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 系统会话的ConversationBody特殊处理 */
.yw-conversation-body.yw-conversation-body-system {
  position: relative;
}

/* 回复预览区域 */
.yw-conversation-reply-preview {
  flex-shrink: 0;
}

/* 编辑预览区域 - 与回复预览区域样式统一 */
.yw-conversation-edit-preview {
  flex-shrink: 0;
}

.yw-conversation-messages {
  width: 100%;
  height: 100%;
}

.yw-message-item {
  width: 100%;
  display: flex;
  position: relative;
}

.yw-message-item-root {
  padding: 10px 0;
}

.yw-message-item-reminder {
  animation: yw-message-item-reminder-flash 1.5s ease-in-out 3;
  animation: yw-message-item-reminder-flash var(--reminder-animation-duration) ease-in-out 3;
  position: relative;
}

.yw-message-item-reminder::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  width: var(--message-reminder-width);
  background-color: var(--yw-color-primary);
  border-radius: 2px;
  border-radius: var(--message-reminder-border-radius);
}

@keyframes yw-message-item-reminder-flash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(24, 144, 255, 0.1);
  }
  100% {
    background-color: transparent;
  }
}

.yw-conversation-dragover .yw-message-item {
  pointer-events: none;
}

/* 输入框区域 */
.yw-conversation-footer {
  flex-shrink: 0;
  max-height: 200px;
  position: static;
  /* margin: var(--conversation-gap) var(--conversation-padding); */
  min-height: 152px;
  min-height: var(--footer-min-height);
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* border-radius: var(--conversation-border-radius); */
  border-top: 1px solid var(--yw-state-default-border);
  background-color: var(--yw-color-theme);
  /* box-shadow: 0.3rem -0.2rem 0.8rem 0.05rem rgb(114 114 114 / 5%); */
  transition: all var(--yw-layer-transition);
}

.yw-conversation-footer-system {
  display: none;
}

.yw-conversation-footer-content {
  width: 100%;
  height: 100%;
}

.yw-conversation-chattoolbars {
  height: 100%;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}

.yw-conversation-chattoolbars-item {
  cursor: pointer;
}

.yw-conversation-content-fileupload-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  padding: 15px;
  padding: var(--drag-mask-padding);
}

.yw-conversation-content-fileupload-mask-content {
  width: 100%;
  height: 100%;
  border: 1px dashed #999;
  border-radius: 4px;
  border-radius: var(--drag-mask-border-radius);
  background-color: rgb(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-size: var(--drag-mask-font-size);
  font-weight: 500;
  padding: 20px;
  padding: var(--drag-mask-content-padding);
}

.yw-replyview {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

/* 回复状态的左侧彩色边框 */
.yw-replyview::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  border-radius: 0 2px 2px 0;
}

.yw-replyview-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
  margin-left: var(--reply-content-margin-left);
  color: var(--yw-text-secondary);
  flex: 1 1;
  min-width: 0;
}

.yw-replyview-content-msg {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-replyview-content-first {
  width: 100%;
  margin-top: 2px;
  margin-top: var(--reply-content-margin-top);
}

.yw-replyview-content-second {
  margin-top: 2px;
  margin-top: var(--reply-content-margin-top);
}

.yw-replyview-content-userinfo {
  display: flex;
}

.yw-replyview-content-userinfo-name {
  display: flex;
  align-items: center;
  margin-left: 5px;
  margin-left: var(--reply-userinfo-margin-left);
}

/* 回复视图 */
.yw-conversation-topview {
  height: 64px;
  height: var(--reply-preview-height);
  background-color: var(--yw-color-theme);
  /* border-radius: var(--conversation-border-radius); */
  border-top: var(--yw-line);
  /* box-shadow: 0.3rem -0.2rem 0.8rem 0.05rem rgb(114 114 114 / 5%); */
  transition: all var(--yw-layer-transition);
}

body[theme-mode="dark"] .yw-conversation-topview {
  background-color: var(--yw-color-secondary);
}

/* 深色模式下的输入框和多选面板样式 */
body[theme-mode="dark"] .yw-conversation-footer,
body[theme-mode="dark"] .yw-conversation-multiple-panel {
  background-color: var(--yw-color-secondary);
}

/* 简化输入框样式 */
.yw-conversation-hasreply .yw-messageinput-box {
  box-shadow: none;
}

.yw-replyview-close {
  height: 100%;
  padding: 0px 20px;
  padding: 0px var(--reply-close-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--yw-line);
  cursor: pointer;
}

/* 编辑视图样式 - 通过左侧边框颜色和标题前缀与回复组件区分 */
.yw-editview {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

/* 编辑状态的左侧彩色边框 */
.yw-editview::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  border-radius: 0 2px 2px 0;
}

.yw-editview-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
  margin-left: var(--reply-content-margin-left);
  color: var(--yw-text-secondary);
  flex: 1 1;
  min-width: 0;
}

.yw-editview-content-msg {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-editview-content-first {
  width: 100%;
  margin-top: 2px;
  margin-top: var(--reply-content-margin-top);
}

.yw-editview-content-second {
  margin-top: 2px;
  margin-top: var(--reply-content-margin-top);
}

.yw-editview-content-userinfo {
  display: flex;
  align-items: center;
}

.yw-editview-content-userinfo-avatar {
  margin-right: 5px;
  margin-right: var(--reply-userinfo-margin-left);
}

.yw-editview-content-userinfo-name {
  display: flex;
  align-items: center;
  color: var(--yw-text-primary);
  font-weight: 400;
}

.yw-editview-close {
  height: 100%;
  padding: 0px 20px;
  padding: 0px var(--reply-close-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--yw-line);
  cursor: pointer;
}

/* 深色模式下的回复和编辑视图样式 */
body[theme-mode="dark"] .yw-replyview::before {
  background: linear-gradient(135deg, #4096ff, #69b1ff);
}

body[theme-mode="dark"] .yw-editview::before {
  background: linear-gradient(135deg, #ff8a50, #ffb347);
}

/* 多选面板 - 统一与输入框的样式 */
.yw-conversation-multiple-panel {
  flex-shrink: 0;
  position: static;
  /* margin: var(--conversation-gap) var(--conversation-padding); */
  height: 152px;
  height: var(--multiple-panel-height);
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* border-radius: var(--conversation-border-radius); */
  border-top: 1px solid var(--yw-state-default-border);
  background-color: var(--yw-color-theme);
  /* box-shadow: 0.3rem -0.2rem 0.8rem 0.05rem rgb(114 114 114 / 5%); */
  transition: all var(--yw-layer-transition);
}

/* 多选面板显示时的动画效果 */
.yw-conversation-multiple-panel.entering {
  transform: translateY(100%);
}

.yw-conversation-multiple-panel.entered {
  transform: translateY(0);
}

.yw-multiplepanel {
  width: 100%;
  height: 100%;
  padding: 10px;
  padding: var(--conversation-gap);
}

.yw-multiplepanel-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multiplepanel-content-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 60px;
  margin-left: var(--multiple-panel-item-margin);
  cursor: pointer;
}

.yw-multiplepanel-content-item:first-child {
  margin-left: 0px;
}

.yw-multiplepanel-content-item-icon {
  background-color: var(--yw-bg-secondary);
  width: 60px;
  width: var(--multiple-panel-icon-size);
  height: 60px;
  height: var(--multiple-panel-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multiplepanel-content-item-icon-svg {
  width: 24px;
  width: var(--multiple-panel-icon-svg-size);
  height: 24px;
  height: var(--multiple-panel-icon-svg-size);
  fill: var(--yw-text-item);
}
.yw-multiplepanel-content-item-title {
  color: var(--yw-text-item);
  font-size: 14px;
  font-size: var(--multiple-panel-title-font-size);
  margin-top: 4px;
  margin-top: var(--multiple-panel-title-margin-top);
}

.yw-multiplepanel-close {
  position: absolute;
  top: 20px;
  top: var(--multiple-panel-close-top);
  left: 40px;
  left: var(--multiple-panel-close-left);
  padding: 10px;
  padding: var(--multiple-panel-close-padding);
  cursor: pointer;
}

.yw-conversationpositionview {
  position: absolute;
  bottom: 1rem;
  bottom: var(--position-view-bottom);
  right: 1.5rem;
  right: var(--position-view-right);
}

.yw-conversationpositionview ul {
  margin-bottom: 0px;
}

.yw-conversationpositionview-item {
  width: 50px;
  width: var(--position-item-size);
  height: 50px;
  height: var(--position-item-size);
  border-radius: 50%;
  background-color: var(--yw-color-theme);
  box-shadow: 0 1px 2px rgba(114, 114, 114, 0.25098);
  color: rgba(112, 117, 121, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: scale(0.5, 0.5);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
  transition: transform var(--position-transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity var(--opacity-transition-duration) ease;
  opacity: 0;
  margin-bottom: 10px;
  margin-bottom: var(--position-item-margin-bottom);
  position: relative;
}

/* 提醒消息按钮样式 */
.yw-conversationpositionview-item-reminder {
  background-color: #ff9800;
}

/* 未读消息按钮样式 */
.yw-conversationpositionview-item-unread {
  background-color: var(--yw-color-theme);
}

/* 滚动到底部按钮样式 */
.yw-conversationpositionview-item-scroll {
  background-color: #e0e0e0;
}

.yw-conversationpositionview-item img {
  width: 20px;
  width: var(--position-item-img-size);
  height: 20px;
  height: var(--position-item-img-size);
}

/* 提醒消息计数样式 */
.yw-conversation-reminder-count {
  background-color: #ff5722 !important;
}

body[theme-mode="dark"] .yw-conversationpositionview-item {
  background-color: var(--yw-color-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body[theme-mode="dark"] .yw-conversationpositionview-item-reminder {
  background-color: #e65100;
}

body[theme-mode="dark"] .yw-conversationpositionview-item-scroll {
  background-color: #424242;
}

.yw-conversationpositionview-item.yw-reveale {
  transform: scale(1, 1);
  opacity: 1;
  pointer-events: all;
}

.yw-conversationpositionview-item i {
  font-size: 1.75rem;
  font-size: var(--position-item-font-size);
}

.icon-arrow-down::before {
  content: "";
}

.yw-conversationpositionview-item .yw-conversation-unread-count {
  min-width: 1.5rem;
  min-width: var(--unread-count-min-width);
  height: 1.5rem;
  height: var(--unread-count-height);
  padding: 0 0.45rem;
  padding: var(--unread-count-padding);
  border-radius: 0.75rem;
  border-radius: var(--unread-count-border-radius);
  font-size: 0.875rem;
  font-size: var(--unread-count-font-size);
  line-height: 1.5rem;
  line-height: var(--unread-count-height);
  font-weight: 500;
  text-align: center;
  position: absolute;
  top: -0.3rem;
  top: var(--unread-count-top);
  right: -0.3rem;
  right: var(--unread-count-right);
  background: red;
  color: #fff;
  pointer-events: none;
}

.yw-conversationpositionview ul li {
  margin-top: 20px;
  margin-top: var(--message-padding-vertical);
}

.yw-message-item-reminder {
  animation: yw-message-item-reminder-move 2s;
  animation: yw-message-item-reminder-move var(--reminder-move-animation-duration);
  -webkit-animation: yw-message-item-reminder-move 2s;
  -webkit-animation: yw-message-item-reminder-move var(--reminder-move-animation-duration);
}

@keyframes yw-message-item-reminder-move {
  to {
    background-color: var(--yw-color-theme);
  }
}

/*Safari 和 Chrome:*/

/* 自定义滚动条样式 */
.yw-conversation-messages::-webkit-scrollbar {
  width: 4px;
  width: var(--scrollbar-width);
}

.yw-conversation-messages::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  border-radius: var(--scrollbar-border-radius);
}

.yw-conversation-messages::-webkit-scrollbar-track {
  background: transparent;
}

/* 响应式布局优化 */
@media screen and (max-width: 640px) {
  .yw-conversation-footer,
  .yw-conversation-multiple-panel {
    margin: 5px 10px;
    margin: var(--mobile-footer-margin);
  }

  .yw-conversation-footer {
    min-height: 120px;
    min-height: var(--mobile-footer-min-height);
  }

  .yw-conversation-multiple-panel {
    height: 120px;
    height: var(--mobile-multiple-panel-height);
  }

  .yw-conversation-reply-preview {
    margin: 0 10px 5px;
    margin: var(--mobile-reply-margin);
  }
}

@media screen and (max-height: 600px) {
  .yw-conversation-footer {
    min-height: 100px;
    min-height: var(--small-screen-footer-min-height);
  }

  .yw-conversation-multiple-panel {
    height: 100px;
    height: var(--small-screen-multiple-panel-height);
  }
}

/* 右键菜单容器样式 */
.yw-contextmenus {
  background-color: var(--yw-color-theme) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--yw-color-border, rgba(0, 0, 0, 0.1)) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  padding: 6px 0 !important;
  min-width: 140px !important;
  max-width: 280px !important;
  z-index: 10000 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body[theme-mode="dark"] .yw-contextmenus {
  background-color: var(--yw-color-secondary) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--yw-color-border-dark, rgba(255, 255, 255, 0.1)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* 菜单项样式 */
.yw-contextmenus .szh-menu__item {
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #333 !important;
  color: var(--yw-text-primary, #333) !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.yw-contextmenus .szh-menu__item:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  background-color: var(--yw-color-hover, rgba(0, 0, 0, 0.06)) !important;
}

.yw-contextmenus .szh-menu__item:focus {
  background-color: rgba(0, 0, 0, 0.08) !important;
  background-color: var(--yw-color-focus, rgba(0, 0, 0, 0.08)) !important;
  outline: none !important;
}

.yw-contextmenus .szh-menu__item:active {
  background-color: rgba(0, 0, 0, 0.1) !important;
  background-color: var(--yw-color-active, rgba(0, 0, 0, 0.1)) !important;
}

/* 危险操作菜单项样式 */
.yw-contextmenu-dangerous {
  color: #ff4d4f !important;
  color: var(--yw-color-danger, #ff4d4f) !important;
}

.yw-contextmenu-dangerous:hover {
  background-color: rgba(255, 77, 79, 0.1) !important;
  background-color: var(--yw-color-danger-bg, rgba(255, 77, 79, 0.1)) !important;
}

/* 暗黑模式下的菜单项样式 */
body[theme-mode="dark"] .yw-contextmenus .szh-menu__item {
  color: #fff !important;
  color: var(--yw-text-primary, #fff) !important;
}

body[theme-mode="dark"] .yw-contextmenus .szh-menu__item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-color: var(--yw-color-hover-dark, rgba(255, 255, 255, 0.08)) !important;
}

body[theme-mode="dark"] .yw-contextmenus .szh-menu__item:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  background-color: var(--yw-color-focus-dark, rgba(255, 255, 255, 0.12)) !important;
}

body[theme-mode="dark"] .yw-contextmenus .szh-menu__item:active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  background-color: var(--yw-color-active-dark, rgba(255, 255, 255, 0.15)) !important;
}

body[theme-mode="dark"] .yw-contextmenu-dangerous {
  color: #ff7875 !important;
  color: var(--yw-color-danger-dark, #ff7875) !important;
}

body[theme-mode="dark"] .yw-contextmenu-dangerous:hover {
  background-color: rgba(255, 120, 117, 0.15) !important;
  background-color: var(--yw-color-danger-bg-dark, rgba(255, 120, 117, 0.15)) !important;
}



.yw-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.yw-svg-icon-img {
  width: 100%;
  height: auto;
  transition: filter 0.2s ease;
}

.yw-svg-icon svg {
  width: 100%;
  height: 100%;
}

.yw-svg-icon-clickable {
  cursor: pointer;
}

/* 移除 hover 滤镜，现在由 React 状态控制 */

.yw-svg-icon-selected {
  color: var(--yw-color-primary);
  color: var(--svg-selected-color, var(--yw-color-primary));
}

.yw-svg-icon-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.yw-svg-icon-disabled:hover {
  transform: none;
}

.pinned-message-toast {
  /* position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%); */
  display: flex;
  align-items: center;
  /* border-radius: 8px; */
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  z-index: 1;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.pinned-message-content {
  display: flex;
  align-items: center;
  flex: 1 1;
  overflow: hidden;
  min-width: 0;
}

.pinned-message-content:hover {
  background: var(--semi-color-fill-0);
  border-radius: 6px;
}

.pinned-icon {
  margin-right: 10px;
  flex-shrink: 0;
}

.pinned-text {
  flex: 1 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pinned-actions {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.pinned-count {
  font-size: 12px;
  color: #999;
  margin-right: 8px;
}

.show-all-pinned {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  margin-left: 8px;
}

.show-all-pinned:hover {
  color: #333;
}

.close-btn {
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.close-btn:hover {
  color: #666;
}

/* 置顶消息弹窗样式 */
.yw-pinned-messages-modal {
  .semi-modal-content {
    padding: 0;
  }

  .semi-modal-header {
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--semi-color-border);
  }
}

.yw-pinned-messages-content {
  position: relative;
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.yw-pinned-messages-body {
  padding: 16px;
}

.pinned-message-item {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  position: relative;
}

.pinned-message-item:hover {
  background-color: #f9f9f9;
}

.pinned-message-item:last-child {
  border-bottom: none;
}

.pinned-message-item-content {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.message-content {
  flex: 1 1;
  overflow: hidden;
  min-width: 0;
  padding-right: 16px; /* 为关闭按钮留出空间 */
}

/* 为MessageCell提供样式支持 */
.yw-pinned-messages-modal .yw-message-base {
  padding: 0;
  margin: 0;
}

.yw-pinned-messages-modal .yw-message-content {
  max-width: 100%;
}

/* 内容组件样式调整 */
.pinned-message-item .content-image-container,
.pinned-message-item .content-video-container,
.pinned-message-item .content-text-container {
  max-width: 100%;
}

/* 删除按钮样式 */
.pinned-message-item .close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
  margin-left: 8px;
  opacity: 0;  /* 默认隐藏 */
  transition: all 0.2s ease;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.pinned-message-item .close-btn:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
  color: #666;
}

.pinned-message-item:hover .close-btn {
  opacity: 0.7;
}

/* 置顶消息列表样式改进 */
.yw-pinned-messages-modal .yw-pinned-messages-body {
  max-height: 70vh;
  overflow-y: auto;
}

.yw-pinned-messages-modal .pinned-message-item {
  margin: 8px 4px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.yw-pinned-messages-modal .pinned-message-item:hover {
  background-color: #eaeaea;
}

.yw-pinned-messages-modal .pinned-message-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.yw-pinned-messages-modal .sender-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.yw-pinned-messages-modal .sender-name {
  font-weight: 600;
  color: #333;
}

.yw-pinned-messages-modal .send-time {
  font-size: 12px;
  color: #888;
}

.yw-pinned-messages-modal .close-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.yw-pinned-messages-modal .close-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.yw-pinned-messages-modal .pinned-message-item-content {
  position: relative;
}

.yw-pinned-messages-modal .message-content {
  width: 100%;
}

/* 居中内容样式 */
.yw-pinned-messages-modal .centered-content {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 8px 0;
}

/* 优化置顶消息列表样式 */
.yw-pinned-messages-modal .semi-modal-content {
  max-width: 650px;
  width: 650px;
}

.yw-pinned-messages-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0 5px;
}

.pinned-message-item {
  border-radius: 8px;
  margin-bottom: 12px;
  background-color: rgba(245, 247, 250, 0.8);
  border: 1px solid #eaedf3;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.pinned-message-item:hover {
  background-color: rgba(237, 241, 247, 0.9);
  border-color: #dce2ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pinned-message-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px 4px;
  border-bottom: 1px solid rgba(220, 226, 237, 0.5);
}

.sender-info {
  display: flex;
  align-items: center;
  max-width: 85%;
}

.sender-name {
  font-weight: 600;
  margin-right: 8px;
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.send-time {
  color: #8592a6;
  font-size: 12px;
  white-space: nowrap;
}

.pinned-message-item-content {
  padding: 8px 12px 12px;
  width: 100%;
  position: relative;
}

/* 优化文本消息样式 */
.yw-pinned-messages-modal .yw-message-text {
  background-color: transparent;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  max-width: 100%;
  word-break: break-word;
}

/* 优化图片和视频容器 */
.centered-content {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

/* 优化视频展示 */
.pinned-message-item .content-video-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pinned-message-item .content-video-container video {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
}

/* 优化图片展示 */
.pinned-message-item .content-image-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pinned-message-item .content-image {
  max-width: 100%;
  max-height: 400px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
}

/* 优化其他类型消息 */
.yw-pinned-messages-modal .yw-message-file,
.yw-pinned-messages-modal .yw-message-audio,
.yw-pinned-messages-modal .yw-message-location,
.yw-pinned-messages-modal .yw-sticker,
.yw-pinned-messages-modal .yw-message-merge-forward {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

/* 优化关闭按钮 */
.pinned-message-item .close-btn {
  opacity: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 10;
}

.pinned-message-item .close-btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.pinned-message-item:hover .close-btn {
  opacity: 1;
}

.message-preview {
  font-size: 14px;
  color: inherit;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.4;
} 
/* 通用内容样式 */
.content-container {
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

/* 视频内容样式 */
.content-video-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f0f0f0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.content-video-player {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
}

.content-video-cover {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.content-video-cover img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  -o-object-fit: contain;
     object-fit: contain;
}

.content-video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.content-video-cover:hover .content-video-play-button {
  background-color: rgba(0, 0, 0, 0.8);
}

.content-video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1;
}

.content-video-loading,
.content-video-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

.content-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.content-loading-text,
.content-video-error-text {
  font-size: 14px;
  font-weight: 500;
}

.content-video-error-text {
  color: #ff6b6b;
}

.content-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  /* background-color: #f0f0f0; */
  max-width: 100%;
  margin: 0 auto;
}

.content-image {
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  display: block;
}

.content-file-container {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.content-file-icon {
  margin-right: 12px;
  font-size: 24px;
  color: #666;
}

.content-file-info {
  flex: 1 1;
  overflow: hidden;
}

.content-file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.content-file-size {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

.content-text-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.content-text {
  width: 100%;
  word-break: break-word;
  line-height: 1.3125;
  text-align: left;
  text-align: initial;
  unicode-bidi: plaintext;
  font-size: 14px;
}

/* 回复内容样式 */
.yw-message-text-reply {
  display: flex;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  flex-direction: column;
  cursor: pointer;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
}

.yw-message-text-reply.yw-message-text-reply-recv {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.yw-message-text-reply-author {
  display: flex;
  align-items: center;
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 12px;
}

.yw-message-text-reply-authoravatar {
  margin-right: 4px;
  display: flex;
  align-items: center;
}

.yw-message-text-reply-content {
  width: 100%;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces;
  font-size: 12px;
}

/* 调试内容样式 */
.debug-content-container {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px;
  font-family: monospace;
}

.debug-section {
  margin-bottom: 10px;
}

.debug-section h3 {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.debug-item {
  display: flex;
  margin-bottom: 5px;
}

.debug-label {
  font-weight: bold;
  margin-right: 5px;
  color: #555;
  min-width: 100px;
}

.debug-value {
  color: #333;
  word-break: break-all;
}

.debug-text-content {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

.debug-json {
  background-color: #282c34;
  color: #abb2bf;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.5;
}

.debug-json .key {
  color: #e06c75;
}

.debug-json .string {
  color: #98c379;
}

.debug-json .number {
  color: #d19a66;
}

.debug-json .boolean {
  color: #56b6c2;
}

/* 卡片内容样式 */
.content-card-container {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.content-card-header {
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.05);
  font-weight: 500;
}

.content-card-body {
  padding: 12px;
}

/* 合并转发内容样式 */
.merge-forward-container {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.merge-forward-header {
  padding: 12px;
  background-color: rgba(0, 0, 0, 0.05);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.merge-forward-title {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-forward-count {
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.5);
}

.merge-forward-body {
  padding: 12px;
}

.merge-forward-preview-item {
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.merge-forward-empty {
  color: rgba(0, 0, 0, 0.5);
  font-style: italic;
}

/* 暗黑模式适配 */
body[theme-mode="dark"] .yw-message-text-reply.yw-message-text-reply-recv {
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body[theme-mode="dark"] .content-file-container {
  background-color: rgba(255, 255, 255, 0.05);
}

body[theme-mode="dark"] .content-file-size {
  color: rgba(255, 255, 255, 0.5);
}

body[theme-mode="dark"] .content-card-container,
body[theme-mode="dark"] .merge-forward-container {
  border-color: rgba(255, 255, 255, 0.1);
}

body[theme-mode="dark"] .content-card-header,
body[theme-mode="dark"] .merge-forward-header {
  background-color: rgba(255, 255, 255, 0.05);
}

body[theme-mode="dark"] .merge-forward-count,
body[theme-mode="dark"] .merge-forward-empty {
  color: rgba(255, 255, 255, 0.5);
} 
.group-announcement-toast {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  z-index: 1;
  width: 100%;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease;
}

.group-announcement-toast:hover {
  background-color: #f0f0f0;
}

.group-announcement-icon {
  margin-right: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}

.group-announcement-content-container {
  flex: 1 1;
  overflow: hidden;
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
}

/* 静态文本样式 */
.group-announcement-static-text {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
  line-height: 20px;
  letter-spacing: 0.02em;
}

/* 隐藏文本用于测量长度，不显示 */
.group-announcement-hidden-text {
  position: absolute;
  visibility: hidden;
  height: 0;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* react-fast-marquee 自定义样式 */
.group-announcement-marquee {
  font-size: 14px;
  color: #333;
  height: 20px;
  line-height: 20px;
  letter-spacing: 0.02em;
}

/* 让marquee组件适应容器 */
.group-announcement-marquee > div {
  height: 100%;
  display: flex;
  align-items: center;
}

/* 自定义marquee内容样式 */
.group-announcement-marquee > div > div {
  padding-right: 30px; /* 为了防止文字太靠近，增加一些右边距 */
} 
.mentions {
  margin: 1em 0;
}

.mentions--singleLine .mentions__control {
  display: inline-block;
  width: 130px;
}
.mentions--singleLine .mentions__highlighter {
  padding: 1px;
  border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
  padding: 1px;
  border: 2px inset;
}

.mentions--multiLine .mentions__control {
  font-family: monospace;
  font-size: 14pt;
}
.mentions--multiLine .mentions__highlighter {
  border: 1px solid transparent;
  padding: 9px;
  min-height: 63px;
}
.mentions--multiLine .mentions__input {
  border: 1px solid silver;
  padding: 9px;
  outline: 0;
}

.mentions__suggestions__list {
  background-color: var(--yw-color-theme);
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 10pt;
  max-height: 150px !important;
  overflow-y: auto;
  /* box-shadow: 15px 0px 15px -15px #eee, -15px 0px 15px -15px #eee; */
}

.mentions__suggestions__item {
  padding: 5px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.mentions__suggestions__item--focused {
  background-color: #cee4e5;
}

.mentions__mention {
  position: relative;
  z-index: 1;
  color: var(--yw-color-primary);
  text-shadow: none;
  /* text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
      -1px -1px 1px white; */
  /* text-decoration: underline; */
  pointer-events: none;
}

.yw-messageinput-box {
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: 0.3rem -0.2rem 0.8rem 0.05rem rgb(114 114 114 / 5%);
  border-left: none;
  display: flex;
  flex-direction: column-reverse;
}

.yw-messageinput-inputbox {
  height: calc(100% - 44px);
  width: 100%;
  padding: 20px 20px 10px 20px;
  box-sizing: border-box;
}

.yw-messageinput-input {
  height: 100%;
  width: 100%;
  border: none;
  color: var(--yw-text-primary);
  font-size: 14px;
  overflow-y: auto; /* 改为auto，只在需要时显示滚动条 */
  display: inline-block;
  -webkit-user-modify: read-write-plaintext-only;
  outline: none;
  /* 优化滚动条样式 - 不占用容器空间的overlay滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Webkit浏览器滚动条样式 */
.yw-messageinput-input::-webkit-scrollbar {
  width: 6px;
}

.yw-messageinput-input::-webkit-scrollbar-track {
  background: transparent;
}

.yw-messageinput-input::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.yw-messageinput-input::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

body[theme-mode="dark"] .yw-messageinput-input {
  color: var(--yw-text-primary);
  /* 暗色主题下的滚动条样式 */
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 暗色主题下的Webkit滚动条样式 */
body[theme-mode="dark"] .yw-messageinput-input::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

body[theme-mode="dark"] .yw-messageinput-input::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

body[theme-mode="dark"] .yw-messageinput-input textarea {
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

body[theme-mode="dark"] .yw-messageinput-input textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

body[theme-mode="dark"] .yw-messageinput-input textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.yw-messageinput-input__highlighter {
  height: 100% !important;
  padding: 0 !important;
}

.yw-messageinput-input textarea {
  outline: none;
  border: 1px solid transparent;
  color: var(--yw-text-primary);
  padding: 0 !important;
  height: 100% !important;
  /* 确保textarea也有正确的滚动行为 */
  overflow-y: auto;
  resize: none; /* 禁止手动调整大小 */
  /* 优化滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* textarea的Webkit浏览器滚动条样式 */
.yw-messageinput-input textarea::-webkit-scrollbar {
  width: 6px;
}

.yw-messageinput-input textarea::-webkit-scrollbar-track {
  background: transparent;
}

.yw-messageinput-input textarea::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.yw-messageinput-input textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.yw-messageinput-input:empty:before {
  content: attr(data-placeholder);
  position: absolute;
  color: #a9a9a9;
}

.yw-messageinput-bar {
  height: 44px;
  width: 100%;
  display: flex;
  top: 0px;
  border-top: var(--yw-line);
}

.yw-messageinput-tabs {
  height: 100%;
  width: 50%;
}

.yw-messageinput-toolbar {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 10px;
}

.yw-messageinput-actionbox {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}

.yw-messageinput-actionitem {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.yw-messageinput-sendbtn {
  padding: 7px 10px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 6px !important;
}

.yw-messageinput-hasValue {
  background-color: var(--yw-color-theme);
}

.yw-messageinput-member {
  height: 100%;
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.yw-messageinput-iconbox {
  margin-right: 8px;
}

.yw-messageinput-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

.yw-messageinput-selected {
  color: var(--yw-text-thrid);
  /* background-color: #1264a3; */
}

.yw-messageinput-input__suggestions {
  left: -20px !important;
  right: -20px !important;
  border-radius: 10px !important;
}

.quickReplyPanel {
  position: absolute;
  box-shadow: 1px -1px 12px -2px rgb(0 0 0 / 28%);
  max-height: 400px;
  overflow-x: hidden;
  bottom: 0;
  background-color: var(--yw-color-theme);
  width: 100%;
  border-radius: 4px;
}

.quickReplyPanel ul {
  margin: 0;
  padding: 0;
}

.quickReplyPanel ul li {
  list-style-type: none;
  height: 60px;
  border-bottom: 1px solid rgba(9, 30, 66, 0.12);
  cursor: pointer;
}

.quickReplyItem:hover {
  background-color: #f4f5f7;
}

.quickReplySelect {
  background-color: #5d657a !important;
  color: #fff !important;
}

.yw-messageinput-reply {
  margin: 10px 10px 0px 10px;
  background-color: #f5f6f7;
  display: flex;
  color: #8f959e;
  align-items: center;
}

.yw-messageinput-closeicon {
  margin: 0px 6px;
  cursor: pointer;
}

.yw-messageinput-replycontent {
  overflow: hidden;
  text-overflow: ellipsis;
  height: 22px;
}

.yw-messageinput-input__control {
  background-color: transparent;
}

.yw-messageinput-input__suggestions {
  background-color: var(--yw-bg-secondary);
}

body[theme-mode="dark"] .yw-messageinput-input__input {
  color: var(--yw-text-primary);
}

.yw-messageinput-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--yw-color-theme);
  color: #999;
  font-size: 14px;
  border-radius: 10px;
}


.yw-messageinput-filebtn {
  margin-right: 8px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
}

.yw-messageinput-filebtn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #333;
}



.yw-message-file {
  position: relative;
  display: flex;
  cursor: pointer;
  min-width: 240px;
  gap: 10px;
  background-color: #f0f0f3;
  padding: 10px 12px;
  border-radius: 8px;
}

.yw-message-file-icon {
  width: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-message-file-info {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.yw-message-file-name {
  font-size: 14px;
  color: var(--yw-text-thrid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yw-message-file-size {
  font-size: 12px;
  color: var(--yw-text-forth);
}

.yw-message-file-preview {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

/* 分组面板样式 - 优化版本 */
.conversation-group-panel {
  width: 120px; /* 使用100%宽度，由父容器控制 */
  display: flex;
  flex-direction: column;
  background: var(--yw-color-theme);
  height: 100%;
  min-height: 0; /* 确保flex子元素可以收缩 */
  border-right: var(--yw-line);
}

.group-list {
  flex: 1 1; /* 占据可用空间 */
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: 1px solid var(--yw-color-border);
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--yw-color-border) transparent; /* Firefox */
}

/* 自定义滚动条样式 */
.group-list::-webkit-scrollbar {
  width: 4px;
}

.group-list::-webkit-scrollbar-track {
  background: transparent;
}

.group-list::-webkit-scrollbar-thumb {
  background-color: var(--yw-color-border);
  border-radius: 2px;
}

.group-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--yw-color-border-hover);
}

.conversation-group-item {
  display: flex;
  align-items: center;
  padding: 12px 10px; /* 优化padding提升点击体验 */
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  min-height: 36px; /* 确保最小点击区域 */
}

.conversation-group-item:hover {
  background-color: rgba(0, 0, 0, 0.08);
  background-color: var(--yw-color-hover, rgba(0, 0, 0, 0.08));
}

.conversation-group-item-selected {
  background-color: rgba(228, 99, 66, 0.12);
  background-color: var(--yw-color-primary-light, rgba(228, 99, 66, 0.12));
  color: #E46342;
  color: var(--yw-color-primary, #E46342);
  font-weight: 600; /* 选中时字体加粗 */
}

.conversation-group-item-selected .group-icon {
  color: #E46342;
  color: var(--yw-color-primary, #E46342);
}

.conversation-group-item-selected:hover {
  background-color: rgba(228, 99, 66, 0.16);
  background-color: var(--yw-color-primary-light, rgba(228, 99, 66, 0.16));
  transform: none; /* 选中状态不需要hover动画 */
}

.group-icon {
  margin-right: 8px; /* 增加图标间距 */
  flex-shrink: 0;
  color: #666;
  color: var(--yw-text-secondary, #666);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; /* 固定宽度确保对齐 */
  height: 16px;
}

.group-content {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.group-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  color: var(--yw-text-primary, #333);
  flex: 1 1;
  line-height: 1.3;
}

.conversation-group-item-selected .group-name {
  color: #E46342;
  color: var(--yw-color-primary, #E46342);
  font-weight: 600; /* 选中时字体稍微加粗 */
}

/* 分组计数徽章（如果需要的话） */
.group-badge {
  background: var(--yw-color-primary-light);
  color: var(--yw-color-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  margin-left: 4px;
}

.conversation-group-item-selected .group-badge {
  background: var(--yw-color-primary);
  color: white;
}

/* 分组编辑按钮区域 */
.group-edit-section {
  padding: 8px 4px;
  border-top: 1px solid var(--yw-color-border);
  background: var(--yw-color-theme);
  flex-shrink: 0;
}

.group-actions-row {
  display: flex;
  gap: 4px;
}

.group-edit-section .semi-button {
  font-size: 12px;
  padding: 6px 8px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--yw-color-border);
  background: var(--yw-color-theme);
  color: var(--yw-text-secondary);
  transition: all 0.2s ease;
}

.group-edit-section .semi-button:hover {
  background: var(--yw-color-hover);
  color: var(--yw-text-primary);
  border-color: var(--yw-color-primary-light);
}

/* 暗黑模式适配 */
body[theme-mode="dark"] .conversation-group-panel {
  background: var(--yw-color-secondary);
}

body[theme-mode="dark"] .group-list {
  border-color: var(--yw-color-border-dark);
}

body[theme-mode="dark"] .conversation-group-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

body[theme-mode="dark"] .conversation-group-item-selected {
  background-color: rgba(228, 99, 66, 0.2);
}

body[theme-mode="dark"] .conversation-group-item-selected:hover {
  background-color: rgba(228, 99, 66, 0.25);
}

body[theme-mode="dark"] .group-icon {
  color: #999;
  color: var(--yw-text-secondary-dark, #999);
}

body[theme-mode="dark"] .group-name {
  color: #ddd;
  color: var(--yw-text-primary-dark, #ddd);
}

body[theme-mode="dark"] .group-edit-section {
  background: var(--yw-color-secondary);
  border-color: var(--yw-color-border-dark);
}

body[theme-mode="dark"] .group-edit-section .semi-button {
  background: var(--yw-color-secondary);
  border-color: var(--yw-color-border-dark);
  color: var(--yw-text-secondary-dark);
}

body[theme-mode="dark"] .group-edit-section .semi-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--yw-text-primary-dark);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .conversation-group-item {
    padding: 10px 8px;
    margin: 1px 2px;
  }
  
  .group-icon {
    margin-right: 6px;
  }
  
  .group-name {
    font-size: 12px;
  }
  
  .group-edit-section .semi-button {
    font-size: 11px;
    padding: 4px 6px;
    height: 28px;
  }
}

/* 加载状态 */
.group-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--yw-text-secondary);
}

/* 聚焦状态改善可访问性 */
.conversation-group-item:focus {
  outline: 2px solid var(--yw-color-primary);
  outline-offset: -2px;
}

.conversation-group-item:focus:not(.conversation-group-item-selected) {
  background-color: rgba(0, 0, 0, 0.08);
  background-color: var(--yw-color-hover, rgba(0, 0, 0, 0.08));
}

/* 分组编辑弹窗样式 */
.group-edit-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 500px; /* 增加最大高度 */
}

.new-group-section {
  /* 固定在顶部，不参与滚动 */
  flex-shrink: 0;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--yw-color-border, rgba(0, 0, 0, 0.1));
}

.group-edit-content {
  /* 可滚动的内容区域 */
  flex: 1 1;
  overflow-y: auto;
  /* 增加右侧padding为滚动条留出空间 */
  padding-right: 8px;
  margin-right: -8px;
}

.section-title {
  /* 固定在顶部，不参与滚动 */
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  color: var(--yw-text-primary, #333);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: '📁';
  font-size: 16px;
}

.sortable-section {
  /* 移除上边距，因为标题已经在外面了 */
  margin-top: 0;
}

.sortable-group-list {
  min-height: 200px;
}

.sortable-group-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: 1px solid var(--yw-color-border, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  margin-bottom: 8px;
  background: #fff;
  background: var(--yw-color-theme, #fff);
  transition: all 0.2s ease;
}

.sortable-group-item:hover {
  border-color: rgba(228, 99, 66, 0.3);
  border-color: var(--yw-color-primary-light, rgba(228, 99, 66, 0.3));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sortable-group-item-dragging {
  opacity: 0.8;
  transform: rotate(2deg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.drag-handle {
  margin-right: 12px;
  cursor: grab;
  color: #999;
  color: var(--yw-text-tertiary, #999);
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.drag-handle:hover {
  color: #E46342;
  color: var(--yw-color-primary, #E46342);
  background-color: rgba(0, 0, 0, 0.06);
  background-color: var(--yw-color-hover, rgba(0, 0, 0, 0.06));
}

.drag-handle:active {
  cursor: grabbing;
}

.sortable-group-content {
  flex: 1 1;
  min-width: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
  /* 确保与输入框高度一致 */
  min-height: 32px;
  display: flex;
  align-items: center;
}

.sortable-group-content:hover {
  background-color: rgba(0, 0, 0, 0.06);
  background-color: var(--yw-color-hover, rgba(0, 0, 0, 0.06));
}

.sortable-group-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  color: var(--yw-text-primary, #333);
  width: 100%;
  /* 确保文本垂直居中 */
  line-height: 1.5;
  /* 防止文本溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 编辑状态的输入框样式 */
.sortable-group-input {
  /* 填充整个父容器宽度 */
  width: 100%;
  /* 移除默认边距，让输入框与父容器对齐 */
  margin: 0;
}

.sortable-group-input .semi-input {
  /* 确保输入框高度与默认状态一致 */
  height: 24px; /* 32px(父容器最小高度) - 8px(上下padding) = 24px */
  font-size: 14px;
  font-weight: 500;
  /* 确保内部文本垂直居中 */
  line-height: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  /* 恢复默认的边框和focus样式 */
  border: 1px solid #d0d7de;
  border: 1px solid var(--semi-color-border, #d0d7de);
  border-radius: 4px;
}

/* 移除自定义focus样式，使用Semi Design默认样式 */

/* 编辑状态下禁用父容器的hover效果 */
.sortable-group-content:has(.sortable-group-input) {
  cursor: default;
}

.sortable-group-content:has(.sortable-group-input):hover {
  background-color: transparent;
}

.group-actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.group-actions .semi-button {
  padding: 4px;
  min-width: 28px;
  height: 28px;
}

/* 暗黑模式适配 */
body[theme-mode="dark"] .new-group-section {
  border-color: rgba(255, 255, 255, 0.1);
  border-color: var(--yw-color-border-dark, rgba(255, 255, 255, 0.1));
}

body[theme-mode="dark"] .section-title {
  color: #fff;
  color: var(--yw-text-primary-dark, #fff);
}

body[theme-mode="dark"] .sortable-group-item {
  background: #2a2a2a;
  background: var(--yw-color-secondary, #2a2a2a);
  border-color: rgba(255, 255, 255, 0.1);
  border-color: var(--yw-color-border-dark, rgba(255, 255, 255, 0.1));
}

body[theme-mode="dark"] .sortable-group-item:hover {
  border-color: rgba(228, 99, 66, 0.5);
  border-color: var(--yw-color-primary-light-dark, rgba(228, 99, 66, 0.5));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body[theme-mode="dark"] .drag-handle {
  color: #ccc;
  color: var(--yw-text-tertiary-dark, #ccc);
}

body[theme-mode="dark"] .drag-handle:hover {
  color: #E46342;
  color: var(--yw-color-primary, #E46342);
  background-color: rgba(255, 255, 255, 0.08);
  background-color: var(--yw-color-hover-dark, rgba(255, 255, 255, 0.08));
}

body[theme-mode="dark"] .sortable-group-content:hover {
  background-color: rgba(255, 255, 255, 0.08);
  background-color: var(--yw-color-hover-dark, rgba(255, 255, 255, 0.08));
}

body[theme-mode="dark"] .sortable-group-name {
  color: #fff;
  color: var(--yw-text-primary-dark, #fff);
}

/* 暗黑模式下使用Semi Design默认的输入框样式 */

/* 空状态样式 */
.empty-groups {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  color: var(--yw-text-secondary, #999);
}

.empty-groups-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-groups-text {
  font-size: 14px;
  line-height: 1.5;
}

/* 滚动条样式 */
.group-edit-content::-webkit-scrollbar {
  width: 6px;
}

.group-edit-content::-webkit-scrollbar-track {
  background: transparent;
}

.group-edit-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  background: var(--yw-color-border, rgba(0, 0, 0, 0.1));
  border-radius: 3px;
}

.group-edit-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
  background: var(--yw-color-border-hover, rgba(0, 0, 0, 0.2));
}

body[theme-mode="dark"] .group-edit-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  background: var(--yw-color-border-dark, rgba(255, 255, 255, 0.1));
}

body[theme-mode="dark"] .group-edit-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
  background: var(--yw-color-border-hover-dark, rgba(255, 255, 255, 0.2));
}





.yw-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  height: 100%;
}

.yw-empty-state-icon {
  margin-bottom: 16px;
}

.yw-empty-state-text {
  color: #8f959e;
  font-size: 14px;
}

/* 重构后的会话列表样式文件 */

/* ===== 主容器样式 ===== */
.yw-conversationlist {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ===== 会话项基础样式 ===== */
.yw-conversationlist-item {
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
  border-bottom: var(--yw-line);
  padding: 15px 14px;
}

.yw-conversationlist-item:last-child {
  border-bottom: none;
}

/* hover状态 - 比选中状态更浅的背景色 */
.yw-conversationlist-item:hover {
  background-color: var(--yw-bg-hover);
}

/* 选中状态的hover效果保持不变 */
.yw-conversationlist-item-selected:hover {
  background-color: var(--yw-state-selected-bg);
}

/* ===== 主题相关样式 ===== */
body[theme-mode="dark"] .yw-conversationlist-item {
  background-color: var(--yw-color-secondary);
}

/* 深色主题下的hover状态 - 更浅的背景色 */
body[theme-mode="dark"] .yw-conversationlist-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* 深色主题下选中状态的hover效果保持不变 */
body[theme-mode="dark"] .yw-conversationlist-item-selected:hover {
  background-color: var(--yw-state-selected-bg);
}

body[theme-mode="dark"] .yw-conversationlist-item-name h3 {
  color: var(--yw-text-primary);
}

/* ===== 置顶状态样式 ===== */
.yw-conversationlist-item-top {
  background-color: var(--yw-conversationlist-top-item-bg);
}

/* ===== 选中状态样式 ===== */
.yw-conversationlist-item-selected {
  background-color: var(--yw-state-selected-bg);
}

.yw-conversationlist-item-selected .yw-conversationlist-item-time {
  color: var(--yw-state-selected-text);
}

/* ===== 布局容器样式 ===== */
.yw-conversationlist-item-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.yw-conversationlist-item-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-conversationlist-item-right {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-width: 0; /* 确保flex子项可以收缩 */
}

/* ===== 头像容器样式 ===== */
.yw-conversationlist-item-avatar-box {
  position: relative;
  display: flex;
  align-items: center;
}

/* ===== 内容行样式 ===== */
.yw-conversationlist-item-right-first-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.yw-conversationlist-item-right-second-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* ===== 标题区域样式 ===== */
.yw-conversationlist-item-name {
  display: flex;
  align-items: center;
  flex: 1 1;
  min-width: 0;
  gap: 4px;
}

.yw-conversationlist-item-name h3 {
  font-size: 1rem;
  line-height: 1.6875rem;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}

/* ===== 时间显示样式 ===== */
.yw-conversationlist-item-time {
  color: var(--yw-text-forth);
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ===== 最后消息样式 ===== */
.yw-conversationlist-item-lastmsg {
  flex: 1 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--yw-text-thrid);
  overflow: hidden;
  font-size: 14px;
  min-height: 22px;
  line-height: 22px;
}

/* ===== 徽章区域样式 ===== */
.yw-conversationlist-item-reddot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ===== 特殊标签样式 ===== */
.yw-mention {
  color: red;
  font-weight: 500;
}

.yw-reminder {
  color: red;
  font-weight: 500;
  margin-right: 4px;
  font-size: 12px;
}

/* ===== 输入状态样式 ===== */
.yw-typing {
  display: flex;
  align-items: center;
  color: var(--yw-text-primary);
  font-style: italic;
}

/* ===== 在线状态徽章样式 ===== */
.yw-onlinestatusbadge {
  width: 10px;
  height: 10px;
  background-color: var(--yw-bg-secondary);
  position: absolute;
  padding: 1.5px;
  right: 2px;
  bottom: 2px;
  border-radius: 50%;
  display: none;
}

.yw-onlinestatusbadge-empty.yw-onlinestatusbadge {
  display: block;
  border-radius: 50%;
  right: 2px;
  bottom: 2px;
}

.yw-onlinestatusbadge-content {
  width: 100%;
  height: 100%;
  background-color: #20c6ad;
  padding: 0px 5px;
  border-radius: 10px;
}

.yw-onlinestatusbadge-content-tip {
  padding: 0px;
  font-size: 14px;
  color: #20c6ad;
}

.yw-onlinestatusbadge-empty .yw-onlinestatusbadge-content {
  background-color: rgb(124, 208, 83);
  border-radius: 50%;
  padding: 0px;
}

.yw-onlinestatusbadge-empty .yw-onlinestatusbadge-content-tip {
  padding: 8px;
}

/* 在线状态悬停效果 */
.yw-onlinestatusbadge:hover .yw-onlinestatusbadge-content-tip {
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  bottom: 100%;
  white-space: nowrap;
  left: 50%;
  margin-bottom: 5px;
  transform: translateX(-50%);
  z-index: 1000;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
  .yw-conversationlist-item {
    padding: 12px 10px;
  }
  
  .yw-conversationlist-item-name h3 {
    font-size: 0.9rem;
  }
  
  .yw-conversationlist-item-time {
    font-size: 0.7rem;
  }
  
  .yw-conversationlist-item-lastmsg {
    font-size: 13px;
  }
}

/* ===== 无障碍支持 ===== */
.yw-conversationlist-item:focus {
  outline: 2px solid var(--yw-color-primary);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .yw-conversationlist-item {
    animation: none;
    transition: none;
  }
}

/* ===== 会话项包装器样式 ===== */
.yw-conversationlist-item-wrapper {
  position: relative;
} 
/* 会话容器样式 - 优化版本 */
.conversation-container {
  width: 100%; /* 改为100%，支持动态宽度 */
  min-width: 380px; /* 设置最小宽度确保可用性 */
  max-width: 480px; /* 设置最大宽度，避免过宽 */
  height: 100%;
  display: flex;
  background: var(--yw-color-theme);
  border-right: 1px solid var(--yw-color-border);
  min-height: 0; /* 确保flex子元素可以收缩 */
  position: relative;
}

/* 分组面板容器 */
.conversation-group-panel-container {
  width: 160px; /* 增加宽度，提供更好的用户体验 */
  flex-shrink: 0; /* 防止被压缩 */
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--yw-color-border);
  background: var(--yw-color-theme);
  z-index: 1;
}

/* 会话列表面板 - 优化布局 */
.conversation-list-panel {
  flex: 1 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内容溢出 */
  background: var(--yw-color-theme);
}

.conversation-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px; /* 优化padding */
  border-bottom: 1px solid var(--yw-color-border);
  background: var(--yw-color-theme);
  flex-shrink: 0;
  min-height: 48px; /* 确保标题栏高度一致 */
}

.group-title {
  font-size: 16px; /* 增加字体大小，提升可读性 */
  font-weight: 600;
  margin: 0;
  color: var(--yw-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1; /* 占据可用空间 */
  min-width: 0; /* 允许收缩 */
}

.conversation-list-wrapper {
  flex: 1 1;
  overflow: hidden;
  position: relative;
  min-height: 0; /* 确保可以收缩 */
  display: flex;
  flex-direction: column;
}


/* 空状态样式优化 */
.conversation-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--yw-text-secondary);
  padding: 20px;
  text-align: center;
}

.conversation-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.conversation-empty-state > div:last-child {
  font-size: 14px;
  line-height: 1.4;
}

/* 暗黑模式适配 */
body[theme-mode="dark"] .conversation-container {
  background: var(--yw-color-secondary);
  border-color: var(--yw-color-border-dark);
}

body[theme-mode="dark"] .conversation-list-header {
  background: var(--yw-color-secondary);
  border-color: var(--yw-color-border-dark);
}

body[theme-mode="dark"] .group-title {
  color: var(--yw-text-primary-dark);
}

body[theme-mode="dark"] .conversation-group-panel-container {
  background: var(--yw-color-secondary);
  border-color: var(--yw-color-border-dark);
}

/* 响应式设计优化 */
@media (max-width: 768px) {
  .conversation-container {
    width: 100%;
    max-width: none;
    min-width: 320px;
  }
  
  .conversation-group-panel-container {
    width: 120px; /* 移动端减少分组面板宽度 */
  }
  
  .group-title {
    font-size: 15px;
    max-width: 120px;
  }
}

@media (max-width: 480px) {
  .conversation-container {
    min-width: 280px;
  }
  
  .conversation-group-panel-container {
    width: 100px;
  }
  
  .conversation-list-header {
    padding: 10px 12px;
  }
  
  .group-title {
    font-size: 14px;
  }
}

/* 分组切换动画 */
.conversation-list-panel-entering {
  opacity: 0;
  transform: translateX(10px);
}

.conversation-list-panel-entered {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 200ms ease, transform 200ms ease;
}

.conversation-list-panel-exiting {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* 分组面板优化 */
.conversation-group-panel-container:hover {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

body[theme-mode="dark"] .conversation-group-panel-container:hover {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* 确保会话列表组件在容器内正确显示 */
.conversation-list-wrapper .yw-conversationlist {
  height: 100%;
}

/* 滚动条样式统一 */
.conversation-list-wrapper::-webkit-scrollbar {
  width: 6px;
}

.conversation-list-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-list-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  background: var(--yw-color-border, rgba(0, 0, 0, 0.1));
  border-radius: 3px;
}

.conversation-list-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
  background: var(--yw-color-border-hover, rgba(0, 0, 0, 0.2));
}

body[theme-mode="dark"] .conversation-list-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  background: var(--yw-color-border-dark, rgba(255, 255, 255, 0.1));
}

body[theme-mode="dark"] .conversation-list-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
  background: var(--yw-color-border-hover-dark, rgba(255, 255, 255, 0.2));
}

.yw-chat {
  width: 100%;
  height: 100%;
}

.yw-chat-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.yw-chat-content-left {
  width: 420px; /* 从380px增加到420px以容纳优化后的分组面板和会话列表 */
  height: 100%;
  flex-shrink: 0; /* 防止在小屏幕上被压缩 */
  min-width: 420px; /* 确保最小宽度 */
}

.yw-chat-search {
  height: var(--yw-height-chat-search);
  width: 100%;
  padding: 0px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--yw-line);
}

.yw-chat-search-add {
  padding: 5px;
  cursor: pointer;
}

body[theme-mode="dark"] .yw-chat-search-add {
  color: var(--yw-text-primary);
}

.yw-chat-title {
  width: 250px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

body[theme-mode="dark"] .yw-chat-title {
  color: var(--yw-text-primary);
}

.yw-chat-conversation-list {
  width: 100%;
  height: calc(100% - var(--yw-height-chat-search));
}

.yw-chat-content-right {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

@media screen and (max-width: 640px) {
  .yw-chat-content-right {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
    transition: transform var(--yw-layer-transition);
  }

  .yw-chat-content:not(.yw-conversation-open) .yw-chat-content-right {
    transform: translate3d(100vw, 0, 0);
  }

  .yw-chat-content-left {
    width: 100%;
  }

  .yw-chat-conversation-header-back {
    display: flex !important;
  }
}

/* 阶段一：优化主聊天容器布局 - 改用Flexbox */
.yw-chat-content-chat {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: width 150ms ease-in-out 0s;
}

.yw-chat-content-right.yw-chat-channelsetting-open .yw-chat-content-chat {
  width: calc(100% - var(--yw-wdith-chat-channelsetting));
}

/* 头部固定高度，不再使用CSS变量计算 */
.yw-chat-conversation-header {
  flex-shrink: 0;
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 11;
  padding: 0.5rem 0.8125rem 0.5rem 1.5rem;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--yw-bg-base);
  border-bottom: var(--yw-line);
}

/* 会话内容区域占据剩余空间 */
.yw-chat-conversation {
  flex: 1 1;
  min-height: 0; /* 重要：允许flex子项收缩 */
  width: 100%;
}

.yw-chat-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--yw-color-secondary);
}

.yw-chat-empty img {
  height: 120px;
}

/* 头部样式已移动到上面的flex布局部分 */

body[theme-mode="dark"] .yw-chat-conversation-header {
  background-color: var(--yw-color-secondary);
}

.yw-chat-conversation-header-left {
  display: flex;
  align-items: center;
  flex: 1 1;
  min-width: 0;
}

.yw-chat-conversation-header-back {
  width: 40px;
  height: 40px;
  display: none;
  position: relative;
  justify-content: center;
  align-items: center;
}

.yw-chat-conversation-header-back-icon {
  position: absolute;
  /* transform: rotate(-45deg); */
  transform: rotate(180deg);
}

.yw-chat-conversation-header-back-icon::before,
.yw-chat-conversation-header-back-icon::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}

.yw-chat-conversation-header-back-icon::after {
  transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}

.yw-chat-conversation-header-back-icon::before {
  transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.yw-chat-conversation-header-back-icon,
.yw-chat-conversation-header-back-icon::before,
.yw-chat-conversation-header-back-icon::after {
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background-color: rgb(112, 117, 121);
  transition: transform var(--yw-slide-transition);
}

.yw-chat-conversation-header-channel {
  width: 100%;
  display: flex;
  gap: 10px;
}

.yw-chat-conversation-header-channel-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-chat-conversation-header-channel-avatar img {
  width: auto;
  height: 40px;
  border-radius: 50%;
}

.yw-chat-conversation-header-channel-info {
  flex: 1 1;
  min-width: 0;
}

.yw-chat-conversation-header-channel-info-name {
  font-size: 14px;
  font-weight: 600;
  /* 最多显示1行，超过显示... */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[theme-mode="dark"] .yw-chat-conversation-header-channel-info-name {
  color: var(--yw-text-primary);
}

.yw-chat-conversation-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.yw-chat-conversation-header-right {
  display: flex;
  align-items: center;
}

.yw-chat-conversation-header-right div {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.yw-chat-conversation-header-right div:last-child {
  margin-right: 0px;
}

.yw-chat-conversation-header-setting {
  display: flex;
  align-items: center;
}

.yw-chat-channelsetting {
  pointer-events: auto;
  width: var(--yw-wdith-chat-channelsetting);
  height: 100%;
  transition: margin-right 150ms ease-in-out 0s;
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  border-left: var(--yw-line);
  margin-right: calc(0px - var(--yw-wdith-chat-channelsetting));
  background-color: var(--yw-color-secondary);

  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(114, 114, 114, 0.25098);
  border-left: none;
}

body[theme-mode="dark"] .yw-chat-channelsetting {
  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.25098);
}

.yw-chat-content-right.yw-chat-channelsetting-open .yw-chat-content-chat {
  width: 100%;
}

.yw-chat-content-right.yw-chat-channelsetting-open .yw-chat-channelsetting {
  margin-right: 0px;
}

.yw-chat-conversation-list-loading {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.yw-chatmenuspopover {
  width: 100%;
  height: 100%;
}

.yw-chatmenuspopover ul {
  margin-bottom: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
}

body[theme-mode="dark"] .yw-chat-popover {
  background-color: var(--yw-color-secondary);
  color: var(--yw-text-primary);
  --color-popover-bg-default: red;
}

.yw-chatmenuspopover li {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
}

.yw-chatmenuspopover li:hover {
  background-color: var(--yw-bg-hover);
}

.yw-chatmenuspopover li:first-child {
  margin-top: 0px;
}

.yw-chatmenuspopover li img {
  width: 20px;
  height: 20px;
  color: var(--yw-text-primary);
}

.yw-chatmenuspopover-title {
  margin-left: 10px;
  font-size: 14px;
}

.yw-chat-conversation-header-right-item {
  position: relative;
}

.yw-conversation-header-mask {
  background-color: rgb(0, 0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  border-radius: 100%;
}

.yw-conversation-header-mask:hover {
  background-color: rgb(0, 0, 0, 0.1);
}

.yw-chat-conversation-header-channel-info-tip {
  font-size: 12px;
  color: #8e8e8e;
  margin-top: 2px;
}

.yw-chat-conversation-header-channel-info-tip .online-status {
  color: #52c41a;
}

.yw-chat-conversation-header-channel-info-tip .offline-status {
  color: #8e8e8e;
}

/* 群聊状态样式 */
.yw-chat-conversation-header-channel-info-tip .group-status {
  color: #8e8e8e;
}

.yw-chat-conversation-header-channel-info-tip .online-count {
  margin-left: 4px;
  color: #52c41a;
}

.yw-chat-badge .semi-badge-danger.semi-badge-solid {
  background-color: var(--yw-chat-badge-bg) !important;
  color: var(--yw-color-primary);
  font-weight: 500;
  font-size: 12px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* 两位数的样式 */
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 1"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 2"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 3"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 4"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 5"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 6"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 7"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 8"],
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 9"] {
  width: 28px;
  height: 28px;
}

/* 99+ 的样式 */
.yw-chat-badge .semi-badge-danger.semi-badge-solid[style*="--data-count: 99+"] {
  width: 32px;
  height: 32px;
}

.yw-chatmenuspopover-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-sections {
  background-color: var(--yw-bg-secondary);
}

.yw-section {
  margin-top: 10px;
}

.yw-section:first-child {
  margin-top: 0px;
}

.yw-section-rows {
}

.yw-section-title {
  padding: 5px 15px;
  color: var(--yw-text-secondary);
  font-size: 13px;
}

.yw-section-row {
}

.yw-section-subtitle {
  padding: 5px 15px;
  color: var(--yw-text-secondary);
  font-size: 13px;
}

:root {
  --yw-channelsetting-header: 80px;
}

.yw-channelsetting {
  width: 100%;
  height: 100%;
  background-color: var(--yw-color-secondary);
}

.yw-channelsetting-header {
  width: 100%;
  height: 80px;
  height: var(--yw-channelsetting-header);
  padding: 0.5rem 0.8125rem;
  display: flex;
  align-items: center;
}

.yw-channelsetting-close {
  width: 44px;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}

.yw-channelsetting-close:hover {
  background-color: rgb(112, 117, 121, 0.08);
}

.yw-channelsetting-close-icon {
  position: absolute;
  transform: rotate(-45deg);
}

.yw-channelsetting-close-icon,
.yw-channelsetting-close-icon::before,
.yw-channelsetting-close-icon::after {
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background-color: rgb(112, 117, 121);
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.yw-channelsetting-close-icon::before {
  transform: rotate(90deg);
}

.yw-channelsetting-close-icon::before,
.yw-channelsetting-close-icon::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}

.yw-state-back {
  transform: rotate(180deg);
}

.yw-state-back::before {
  transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.yw-state-back::after {
  transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}

.yw-channelsetting-box {
  width: 100%;
  height: calc(100% - 80px);
  height: calc(100% - var(--yw-channelsetting-header));
  overflow: hidden;
  position: relative;
}

.yw-channelsetting-content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.yw-channelsetting-channel-info {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: var(--yw-color-theme);
}

.yw-channelsetting-avatar {
  /* 高宽比率 */
  width: 64px;
  height: 64px;
  position: relative;
}

.yw-channelsetting-avatar img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.yw-channelsetting-name {
  color: var(--yw-text-primary);
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  font-weight: 500;
}

.yw-channelsetting-header-title-box {
  color: #999;
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  flex: 1 1;
}

.yw-channelsetting-header-title-box-open {
}

.yw-channelsetting-header-title {
  font-size: 18px;
  font-weight: 500;
  margin-left: 1.375rem;
  color: black;
}

.yw-channelsetting-header-title-box-open .yw-channelsetting-header-title {
  display: none;
}

.yw-channelsetting-header-title-route {
  font-size: 18px;
  font-weight: 500;
  margin-left: 1.375rem;
  color: black;
  position: absolute;

  transform: translate3d(100vw, 0, 0);
  transition: transform var(--yw-layer-transition);
  width: 240px;
}

.yw-channelsetting-header-title-box-open .yw-channelsetting-header-title-route {
  transform: translate3d(0, 0, 0);
}

.yw-channelsetting-route {
  width: 100%;
  height: 100%;
  background-color: var(--yw-color-secondary);
  position: absolute;
  top: 0px;
  overflow: hidden;
  transform: translate3d(100vw, 0, 0);
  transition: transform var(--yw-layer-transition);
}

.yw-channelsetting-route-open {
  transform: translate3d(0, 0, 0);
}

.yw-channelsetting-route-content {
  width: 100%;
  height: 100%;
}

.yw-channelsetting-header-right-view {
  opacity: 0;
  transition: opacity 500ms ease-out;
}

.yw-channelsetting-header-right-view-open {
  opacity: 1;
}

.yw-channelsetting-content-loading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.yw-channelmanage {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.yw-route {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 基础样式 */
.yw-route-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--yw-bg-base);
  border-bottom: var(--yw-line);
}

/* 弹窗模式 */
.yw-route-header--modal {
  height: 56px;
  padding: 0 16px;
}

/* 设置页面模式 */
.yw-route-header--setting {
  height: 80px;
  padding: 0 20px;
}

/* 聊天详情模式 */
.yw-route-header--chat {
  height: 64px;
  padding: 0 16px;
}

/* 左侧区域 */
.yw-route-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
  min-width: 0;
}

/* 返回按钮 */
.yw-route-header-back {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  margin-right: 4px;
}

/* 标题区域 */
.yw-route-header-title {
  flex: 1 1;
  min-width: 0;
}

.yw-route-header-title-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--yw-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* 右侧区域 */
.yw-route-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 关闭按钮 */
.yw-route-header-close {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
}

/* 内容区域 */
.yw-route-box {
  flex: 1 1;
  overflow: hidden;
}

.yw-route-content {
  width: 100%;
  height: 100%;
  background-color: var(--yw-color-secondary);
  position: relative;
  /* opacity: 1; */
  /* transition: opacity 150ms ease-in 0s; */
}

.yw-route-content-route {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform: translate3d(100vw, 0, 0);
  transition: transform var(--yw-layer-transition);
}

.yw-route-content-next {
  width: 100%;
  height: 100%;
  background-color: var(--yw-color-secondary);
  overflow: auto;
  /* transition: opacity 350ms ease-in 0s; */
}

.yw-route-header-close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}

.yw-route-header-close:hover {
  background-color: rgb(112, 117, 121, 0.08);
}

.yw-route-header-close-icon {
  position: absolute;
  transform: rotate(-45deg);
}

.yw-route-header-close-icon,
.yw-route-header-close-icon::before,
.yw-route-header-close-icon::after {
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background-color: rgb(112, 117, 121);
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.yw-route-header-close-icon::before {
  transform: rotate(90deg);
}

.yw-route-header-close-icon::before,
.yw-route-header-close-icon::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}

.yw-state-back {
  transform: rotate(180deg);
}

.yw-state-back::before {
  transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.yw-state-back::after {
  transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}

.yw-route-header-title-box {
  flex: 1 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.yw-route-header-title-box-open {
}

.yw-route-header-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--yw-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[theme-mode="dark"] .yw-route-header-title {
  color: var(--yw-text-primary);
}

.yw-route-header-title-box-open .yw-route-header-title {
  display: none;
}

.yw-route-header-title-next {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--yw-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.3s;
}

body[theme-mode="dark"] .yw-route-header-title-next {
  color: var(--yw-text-primary);
}

.yw-route-header-title-box-open .yw-route-header-title-next {
  opacity: 1;
}

.yw-route-content-route-open .yw-route-content {
  /* opacity: 0; */
}

.yw-route-content-route-open .yw-route-content-route {
  transform: translate3d(0, 0, 0);
}

.yw-route-content-route-open .yw-route-content-next {
  /* opacity: 1; */
}

.yw-route-header-right-view {
  margin-left: auto;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s;
}

.yw-route-header-right-view-open {
  opacity: 1;
  transform: translateX(0);
}

body[theme-mode="dark"] .yw-route-header-action:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.semi-button-primary,
.semi-button-primary.semi-button-outline,
.semi-button-primary.semi-button-borderless {
  color: var(--yw-color-secondary);
}

.semi-button-primary.semi-button-light:hover,
.semi-button-primary.semi-button-outline:hover,
.semi-button-primary.semi-button-borderless:hover {
  background-color: var(--yw-color-primary-6);
  color: var(--yw-color-secondary);
}

.yw-route-header-action {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.yw-route-header-action:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.yw-route-header-action-left {
  margin-right: 12px;
}

.yw-route-header-action-right {
  margin-left: auto;
}

/* 响应式处理 */
@media screen and (max-width: 640px) {
  .yw-route-header {
    padding: 0 12px;
  }

  .yw-route-header--chat {
    height: 56px;
  }
}

.yw-viewqueue {
  width: 100%;
  height: 100%;
  position: relative;
}

.yw-viewqueue-route {
  width: 100%;
  height: 100%;
  position: relative;
}

.yw-viewqueue-view {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform var(--yw-layer-transition);
  overflow: hidden;
  background-color: var(--yw-bg-secondary);
  z-index: 1; /* 确保视图队列中的视图在联系人索引导航条之上 */
}

.yw-viewqueue-view-last {
  background-color: var(--yw-bg-secondary);
  z-index: 1; /* 最后一个视图（当前显示的视图）具有最高的z-index */
}

.yw-viewqueue-view-in {
  animation: routeAnimationIn 0.15s ease-out;
  -webkit-animation: routeAnimationIn 0.15s ease-out; /* Safari 与 Chrome */
  /* 确保动画期间视图保持在正确位置 */
  transform: translate3d(0, 0, 0);
}

.yw-viewqueue-view-out {
  animation: routeAnimationOut 0.15s ease-in;
  -webkit-animation: routeAnimationOut 0.15s ease-in; /* Safari 与 Chrome */
  /* 确保动画期间视图保持在正确位置 */
  transform: translate3d(0, 0, 0);
}

@keyframes routeAnimationOut {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0.8;
  }
}

@keyframes routeAnimationIn {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0.8;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.yw-loading-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.yw-loading-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.yw-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-in-out;
  z-index: 1000;
}

.yw-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 12px;
  transform: scale(1.2);
}

.yw-loading-tip {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: var(--yw-color-primary);
  -webkit-mask: repeating-linear-gradient(#000 0 5px, #0000 0 10px);
  animation: l35 1.5s infinite;
}
.loader:after {
  -webkit-mask: repeating-linear-gradient(#0000 0 5px, #000 0 10px);
  --s: -1;
}
@keyframes l35 {
  0%,
  10% {
    transform: translate(0) rotate(0);
  }
  35% {
    transform: translate(calc(1 * 50%)) rotate(0);
    transform: translate(calc(var(--s, 1) * 50%)) rotate(0);
  }
  66% {
    transform: translate(calc(1 * 50%))
      rotate(calc(1 * 180deg));
    transform: translate(calc(var(--s, 1) * 50%))
      rotate(calc(var(--s, 1) * 180deg));
  }
  90%,
  100% {
    transform: translate(0) rotate(calc(1 * 180deg));
    transform: translate(0) rotate(calc(var(--s, 1) * 180deg));
  }
}

:root {
  /* 主题色 */
  --yw-color-theme: #ffffff;
  /* 主色 */
  --yw-color-primary: #7c42ff;
  --yw-color-danger: #e9446a;
  --yw-color-primary-hover: rgba(124, 66, 255, 0.6);
  --yw-color-danger-hover: rgba(233, 68, 106, 0.6);

  --yw-color-primary-1: #f5f0ff; /* 最浅，用于背景 */
  --yw-color-primary-2: #e6d6ff; /* 用于hover背景 */
  --yw-color-primary-3: #c4a3ff; /* 用于特殊状态 */
  --yw-color-primary-4: #9e70ff; /* 用于次要强调 */
  --yw-color-primary-5: #7c42ff; /* 主色调，当前使用色 */
  --yw-color-primary-6: #6535cc; /* 用于hover状态 */
  --yw-color-primary-7: #4d2899; /* 用于active状态 */
  /* 次色 */
  --yw-color-secondary: #fbfcfe;
  --yw-color-secondary-2: #f0f4f8;
  /* 基础背景色 */
  --yw-bg-base: #ffffff;
  --yw-bg-secondary: #fbfcfe;
  --yw-bg-secondary-2: #f0f4f8;
  --yw-bg-hover: rgba(0, 0, 0, 0.03);
  --yw-bg-active: rgba(0, 0, 0, 0.1);
  --yw-bg-mask: rgba(0, 0, 0, 0.45);
  --yw-bg-spotlight: rgba(0, 0, 0, 0.85);
  --yw-bg-message-item: #ffffff;
  --yw-bg-message-sender-item: #f5f5f5;
  /* 文字色 */
  --yw-text-menu-selected: #ffffff;
  --yw-text-primary: rgba(0, 0, 0, 0.85);
  --yw-text-secondary: rgba(0, 0, 0, 0.55);
  --yw-text-disabled: rgba(0, 0, 0, 0.35);
  --yw-text-thrid: #333;
  --yw-text-forth: #666;
  --yw-text-fifth: #999;
  --yw-text-link: var(--yw-color-primary);
  --yw-text-item: #000000;

  --yw-text-primary-hover: rgba(0, 0, 0, 0.85);
  --yw-text-primary-active: rgba(0, 0, 0, 1);

  /* 线 */
  --yw-line: 1px solid rgba(0, 0, 0, 0.1);
  --yw-line-color: rgba(0, 0, 0, 0.1);
  /* 圆角 */
  --yw-border-radius-base: 4px;
  --yw-border-radius-sm: 2px;
  --yw-border-radius-lg: 8px;
  /* 阴影 */
  --yw-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
  --yw-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
    0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
  --yw-shadow-popup: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  /* 头部高度 */
  --yw-header-height: 60px;
  /* 侧边栏宽度 */
  --yw-sider-width: 220px;
  /* 间距 */
  --yw-spacing-base: 8px;
  --yw-spacing-lg: 24px;
  --yw-spacing-sm: 12px;
  /* 字体大小 */
  --yw-font-size-base: 14px;
  --yw-font-size-lg: 16px;
  --yw-font-size-sm: 12px;
  /* 行高 */
  --yw-line-height-base: 1.5715;

  /* 透明度 */
  --yw-opacity-1: 0.05; /* 最轻微的视觉效果 */
  --yw-opacity-2: 0.15; /* hover态 */
  --yw-opacity-3: 0.25; /* 禁用态 */
  --yw-opacity-4: 0.45; /* 次要文本 */
  --yw-opacity-5: 0.65; /* 重要文本 */
  --yw-opacity-6: 0.85; /* 主要文本 */
  --yw-opacity-7: 1; /* 完全不透明 */

  /* 建议添加功能色 */
  --yw-color-success: #52c41a;
  --yw-color-warning: #faad14;
  --yw-color-error: #ff4d4f;
  --yw-color-info: #1890ff;

  /* 每个功能色都应该有其配套的浅色背景 */
  --yw-color-success-bg: rgba(82, 196, 26, 0.1);
  --yw-color-warning-bg: rgba(250, 173, 20, 0.1);
  --yw-color-error-bg: rgba(255, 77, 79, 0.1);
  --yw-color-info-bg: rgba(24, 144, 255, 0.1);

  /* 基础状态 - Base State */
  --yw-state-default-bg: #fff;
  --yw-state-default-text: rgba(0, 0, 0, 0.85);
  --yw-state-default-border: rgba(0, 0, 0, 0.1);

  /* 悬停状态 - Hover State */
  --yw-state-hover-bg: rgba(0, 0, 0, 0.06);
  --yw-state-hover-text: rgba(0, 0, 0, 0.95);
  --yw-state-hover-border: rgba(0, 0, 0, 0.2);

  /* 选中状态 - Selected State */
  --yw-state-selected-bg: #eee;
  --yw-state-selected-text: var(--yw-text-forth);
  --yw-state-selected-border: var(--yw-text-forth);

  /* 激活状态 - Active State */
  --yw-state-active-bg: rgba(0, 0, 0, 0.1);
  --yw-state-active-text: rgba(0, 0, 0, 1);
  --yw-state-active-border: rgba(0, 0, 0, 0.3);

  /* 禁用状态 - Disabled State */
  --yw-state-disabled-bg: rgba(0, 0, 0, 0.04);
  --yw-state-disabled-text: rgba(0, 0, 0, 0.25);
  --yw-state-disabled-border: rgba(0, 0, 0, 0.08);

  --yw-width-layout-content-left: 321px;
  --yw-height-chat-search: 80px;
  --yw-height-chat-conversation-header: 80px;
  --yw-wdith-chat-channelsetting: 340px;
  --yw-layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
  --yw-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

  /* 图标 */
  --icon-primary: rgba(0, 0, 0, 0.65);
  --icon-secondary: rgba(0, 0, 0, 0.35);
  --icon-disabled: rgba(0, 0, 0, 0.25);
  --icon-active: var(--yw-color-primary);
  --icon-hover: var(--yw-color-primary-hover);

  /* 添加新的颜色值 */
  --yw-chat-badge-bg: rgba(124, 66, 255, 0.2);
  --yw-chat-message-receiver-color: #666666;
  --yw-sender-text-primary: rgba(255, 255, 255, 1);
  --yw-sender-text-secondary: rgba(255, 255, 255, 0.8);
  --yw-sender-text-disabled: rgba(255, 255, 255, 0.6);
  --yw-viewqueueheader-height: 80px;
  --yw-modal-body-height: 580px;
  --yw-conversationlist-top-item-bg: #f5f0ff;
  --yw-bg-switch-checked: #20c6a3;

  --yw-button-light-bg: #fff;
  --yw-button-light-color: #666;
  --yw-button-light-border-color: #dddfe2;

  --yw-button-primary-bg: #7c42ff;
  --yw-button-primary-color: #fff;
  --yw-button-primary-border-color: #7c42ff;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* 允许文本消息内容被选择复制 */
.yw-message-text-content,
.yw-message-text-commontext,
.yw-message-text-richtext {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

[theme-mode="dark"] {
  /* 主题色 */
  --yw-color-theme: #121212;
  /* 主色 */
  --yw-color-primary: #7c42ff;
  --yw-color-danger: #e9446a;
  --yw-color-primary-hover: rgba(124, 66, 255, 0.5);
  --yw-color-danger-hover: rgba(233, 68, 106, 0.5);
  /* 次色 */
  --yw-color-secondary: #0f0f0f;
  --yw-color-secondary-2: rgb(33, 33, 33);

  --yw-color-primary-1: rgba(124, 66, 255, 0.1); /* 最浅，用于背景 */
  --yw-color-primary-2: rgba(124, 66, 255, 0.2); /* 用于hover背景 */
  --yw-color-primary-3: rgba(124, 66, 255, 0.3); /* 用于特殊状态 */
  --yw-color-primary-4: rgba(124, 66, 255, 0.4); /* 用于次要强调 */
  --yw-color-primary-5: #7c42ff; /* 主色调保持不变 */
  --yw-color-primary-6: #8f5cff; /* 用于hover状态，略亮 */
  --yw-color-primary-7: #a276ff; /* 用于active状态，更亮 */

  /* 基础背景色 */
  --yw-bg-base: #000;
  --yw-bg-secondary: #141414;
  --yw-bg-hover: rgba(255, 255, 255, 0.08);
  --yw-bg-active: rgba(255, 255, 255, 0.12);
  --yw-bg-mask: rgba(0, 0, 0, 0.45);
  --yw-bg-spotlight: rgba(0, 0, 0, 0.85);
  --yw-bg-message-item: #0b0d0e;
  --yw-bg-message-sender-item: #7c42ff;
  /* 文字色 */
  --yw-text-primary: rgba(255, 255, 255, 0.9);
  --yw-text-secondary: rgba(255, 255, 255, 0.7);
  --yw-text-disabled: rgba(255, 255, 255, 0.5);
  --yw-text-link: #177ddc;
  --yw-text-item: white;

  --yw-text-primary-hover: rgba(255, 255, 255, 1);
  --yw-text-primary-active: rgba(255, 255, 255, 1);

  /* 线 */
  --yw-line: 1px solid rgba(159, 166, 173, 0.16);
  --yw-line-color: rgba(159, 166, 173, 0.16);
  /* 圆角 */
  --yw-border-radius-base: 4px;
  --yw-border-radius-sm: 2px;
  --yw-border-radius-lg: 8px;
  /* 阴影 */
  --yw-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.65);
  --yw-shadow-card: 0 1px 2px -2px rgba(0, 0, 0, 0.64),
    0 3px 6px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 4px rgba(0, 0, 0, 0.36);
  --yw-shadow-popup: 0 3px 6px -4px rgba(0, 0, 0, 0.48),
    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
  /* 头部高度 */
  --yw-header-height: 60px;
  /* 侧边栏宽度 */
  --yw-sider-width: 220px;
  /* 间距 */
  --yw-spacing-base: 8px;
  --yw-spacing-lg: 24px;
  --yw-spacing-sm: 12px;
  /* 字体大小 */
  --yw-font-size-base: 14px;
  --yw-font-size-lg: 16px;
  --yw-font-size-sm: 12px;
  /* 行高 */
  --yw-line-height-base: 1.5715;

  /* 透明度 */
  --yw-opacity-1: 0.05; /* 最轻微的视觉效果 */
  --yw-opacity-2: 0.15; /* hover态 */
  --yw-opacity-3: 0.25; /* 禁用态 */
  --yw-opacity-4: 0.45; /* 次要文本 */
  --yw-opacity-5: 0.65; /* 重要文本 */
  --yw-opacity-6: 0.85; /* 主要文本 */
  --yw-opacity-7: 1; /* 完全不透明 */

  /* 建议添加功能色 */
  --yw-color-success: #52c41a;
  --yw-color-warning: #faad14;
  --yw-color-error: #ff4d4f;
  --yw-color-info: #1890ff;

  /* 每个功能色都应该有其配套的浅色背景 */
  --yw-color-success-bg: rgba(82, 196, 26, 0.1);
  --yw-color-warning-bg: rgba(250, 173, 20, 0.1);
  --yw-color-error-bg: rgba(255, 77, 79, 0.1);
  --yw-color-info-bg: rgba(24, 144, 255, 0.1);

  /* 基础状态 - Base State */
  --yw-state-default-bg: #141414;
  --yw-state-default-text: rgba(255, 255, 255, 0.85);
  --yw-state-default-border: rgba(255, 255, 255, 0.1);

  /* 悬停状态 - Hover State */
  --yw-state-hover-bg: rgba(255, 255, 255, 0.08);
  --yw-state-hover-text: rgba(255, 255, 255, 0.95);
  --yw-state-hover-border: rgba(255, 255, 255, 0.2);

  /* 选中状态 - Selected State */
  --yw-state-selected-bg: rgba(11, 107, 203, 0.2);
  --yw-state-selected-text: #177ddc;
  --yw-state-selected-border: #177ddc;

  /* 激活状态 - Active State */
  --yw-state-active-bg: rgba(255, 255, 255, 0.12);
  --yw-state-active-text: rgba(255, 255, 255, 1);
  --yw-state-active-border: rgba(255, 255, 255, 0.3);

  /* 禁用状态 - Disabled State */
  --yw-state-disabled-bg: rgba(255, 255, 255, 0.08);
  --yw-state-disabled-text: rgba(255, 255, 255, 0.25);
  --yw-state-disabled-border: rgba(255, 255, 255, 0.08);

  --yw-width-layout-content-left: 321px;
  --yw-height-chat-search: 80px;
  --yw-height-chat-conversation-header: 80px;
  --yw-wdith-chat-channelsetting: 340px;
  --yw-layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
  --yw-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

  /* 图标 */
  --icon-primary: rgba(255, 255, 255, 0.85);
  --icon-secondary: rgba(255, 255, 255, 0.45);
  --icon-disabled: rgba(255, 255, 255, 0.25);
  --icon-active: var(--yw-color-primary);
  --icon-hover: var(--yw-color-primary-hover);

  /* 补充缺失的变量 */
  --yw-text-menu-selected: #ffffff;
  --yw-text-thrid: rgba(255, 255, 255, 0.7);
  --yw-text-forth: rgba(255, 255, 255, 0.5);

  /* 补充聊天相关变量 */
  --yw-chat-badge-bg: rgba(124, 66, 255, 0.3);
  --yw-chat-message-receiver-color: rgba(255, 255, 255, 0.7);
  --yw-sender-text-primary: rgba(255, 255, 255, 1);
  --yw-sender-text-secondary: rgba(255, 255, 255, 0.8);
  --yw-sender-text-disabled: rgba(255, 255, 255, 0.6);
  --yw-viewqueueheader-height: 80px;
  --yw-modal-body-height: 580px;
  --yw-conversationlist-top-item-bg: #f5f0ff;
  --yw-bg-switch-checked: #20c6a3;
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%;
  margin: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji",
    "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-size: var(--yw-font-size-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* 添加主题相关的默认值 */
  background-color: #ffffff;
  background-color: var(--yw-bg-base);
  color: rgba(0, 0, 0, 0.85);
  color: var(--yw-text-primary);

  /* 过渡效果 */
  transition: background-color 0.15s ease;
}

/* 主题切换时的过渡效果 */
[theme-mode] * {
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

/* 全局SVG规则 */
/* svg {
  fill: var(--icon-primary);
  transition: fill 0.15s ease;
} */

/* svg path {
  fill: var(--icon-primary);
  transition: fill 0.15s ease;
} */

svg[data-type="secondary"] {
  fill: rgba(0, 0, 0, 0.35);
  fill: var(--icon-secondary);
}

svg[data-type="secondary"] path {
  fill: rgba(0, 0, 0, 0.35);
  fill: var(--icon-secondary);
}

svg[data-type="disabled"] {
  fill: rgba(0, 0, 0, 0.25);
  fill: var(--icon-disabled);
}

svg[data-type="disabled"] path {
  fill: rgba(0, 0, 0, 0.25);
  fill: var(--icon-disabled);
}

div {
  outline: none; /** 让div没有焦点边框 不加这个 第一次打开Modal会聚焦**/
}

#root {
  height: 100%;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.page {
  width: 100%;
  height: 100%;
  background-color: rgb(236, 239, 243);
}

.pageContent {
  padding: 0px 40px;
  overflow-y: auto;
}

.pageContent.space {
  padding-top: 40px;
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: "icomoon";
  src: url(../../static/media/icomoon.536087723585cc76b849.woff2);
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul {
  list-style-type: none;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}

.yw-loading {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px 0px;
}

.yw-text-oneline {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[theme-mode="dark"] .semi-badge-count {
  color: rgba(0, 0, 0, 0.85);
  color: var(--yw-text-primary);
}

/* 覆盖semi-ui的badge样式 */
.semi-badge-count {
  background-color: #7c42ff !important;
  background-color: var(--yw-color-primary) !important;
}

.semi-badge-count.semi-badge-solid {
  background-color: #7c42ff !important;
  background-color: var(--yw-color-primary) !important;
}

/* 覆盖semi-ui的button样式 */
.semi-button-primary {
  background-color: #7c42ff;
  background-color: var(--yw-button-primary-bg);
  color: #fff;
  color: var(--yw-button-primary-color);
  border-color: #7c42ff;
  border-color: var(--yw-button-primary-border-color);
  border-radius: 8px;
}

.semi-button-light,
.semi-button-primary.semi-button-light {
  background-color: #fff;
  background-color: var(--yw-button-light-bg);
  color: #666;
  color: var(--yw-button-light-color);
  border: 1px solid #dddfe2 !important;
  border: 1px solid var(--yw-button-light-border-color) !important;
  border-radius: 8px;
}

.semi-button-primary.semi-button-light:hover,
.semi-button-primary.semi-button-outline:hover,
.semi-button-primary.semi-button-borderless:hover {
  background-color: #7c42ff !important;
  background-color: var(--yw-color-primary) !important;
}

.semi-button-primary:hover {
  background-color: rgba(124, 66, 255, 0.6) !important;
  background-color: var(--yw-color-primary-hover) !important;
}

.semi-button-primary.semi-button-light:hover {
  background-color: rgba(124, 66, 255, 0.6) !important;
  background-color: var(--yw-color-primary-hover) !important;
}

.semi-switch-checked {
  background-color: #20c6a3 !important;
  background-color: var(--yw-bg-switch-checked) !important;
}

.yw-channelqrcode {
  width: 100%;
  height: 100%;
  padding: 15px;
}

.yw-channelqrcode-box {
  width: 100%;
  background-color: var(--yw-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-direction: column;
}

.yw-channelqrcode-info-avatar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-channelqrcode-info-avatar img {
  width: auto;
  height: 60px;
  border-radius: 50%;
}

.yw-channelqrcode-qrcode {
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
}

.yw-channelqrcode-expire {
  font-size: 12px;
  color: #666;
  text-align: center;
  padding: 20px 0px;
}

.yw-channelqrcode-info-name {
  text-align: center;
  color: var(--yw-text-item);
}

.yw-channelqrcode-qrcode-box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-top: 20px;
}

.yw-channelqrcode-qrcode-mask {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255, 0.98);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

body[theme-mode="dark"] .yw-channelqrcode-qrcode-mask {
  background-color: rgb(0, 0, 0, 0.98);
}

.yw-channelqrcode-qrcode-mask p {
  font-size: 18px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #666;
}

.yw-channelqrcode-qrcode-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-inputedit {
  width: 100%;
  background: var(--yw-bg-base);
}

.yw-inputedit-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--yw-text-primary);
  margin-bottom: 16px;
}

.yw-inputedit .semi-input-textarea-wrapper {
  background-color: var(--yw-bg-base);
  border-radius: 6px;
  border: none;
  padding: 16px;
}

.yw-inputedit .semi-input-textarea {
  padding: 0;
}

.yw-inputedit-placeholder {
  font-size: 13px;
  color: var(--yw-text-secondary);
  margin: 8px 0 0 0;
}

.yw-inputedit-counter {
  text-align: right;
  margin-top: 8px;
  color: var(--yw-text-secondary);
  font-size: 12px;
}

.yw-list-item {
  width: 100%;
  padding: 14px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  background-color: var(--yw-color-theme);
  justify-content: space-between;
  box-sizing: border-box;
}

body[theme-mode="dark"] .yw-list-item {
  background-color: var(--yw-color-secondary-2);
}

.yw-list-item:hover {
  background-color: #eee;
}

.yw-list-item-ripple {
  position: relative;
  overflow: hidden;
}

.yw-list-item-ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.7s, opacity 0.5s;
}

.yw-list-item-ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.7;
  transition: 0s;
}

.yw-list-item-title {
  font-size: 15px;
  font-weight: 400;
  color: var(--yw-text-primary);
}

.yw-list-item-action {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
  margin-left: auto;
}

.yw-list-item-subtitle {
  display: flex;
  justify-content: end;
  flex: 1 1;
  margin-left: 20px;
  font-size: 14px;
  color: var(--yw-text-secondary);
  text-align: end;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yw-list-item-subtitle-icon {
  width: auto;
  height: 24px;
  border-radius: 50%;
}

.yw-list-item-subtitle-oneline {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-list-item-subtitle-muliteline {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
}

.yw-list-item-arrow {
  margin-right: -10px;
}

.yw-list-item-arrow img {
  width: 9px;
  height: 14px;
}

.yw-list-item-tip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yw-text-secondary);
  font-size: 13px;
  background-color: var(--yw-bg-base);
  padding: 10px 0;
}

.yw-subscribers {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px 0 0 0;
}

.yw-subscribers-content {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
  gap: 20px;
  justify-content: flex-start;
}

.yw-subscribers-item {
  width: calc((100% - 80px) / 5);
  min-width: 44px;
  max-width: 80px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.yw-subscribers-item img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.yw-subscribers-item-name {
  font-size: 12px;
  color: rgba(9, 30, 66, 0.87);
  text-overflow: ellipsis;
  width: 100%;
  height: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  margin-top: 5px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px; /* 你可以根据实际需要调整这个值 */
}

body[theme-mode="dark"] .yw-subscribers-item-name {
  color: var(--yw-text-primary);
}

.yw-subscribers-more {
  font-size: 14px;
  margin-top: 16px;
  margin-bottom: 4px;
  color: var(--yw-text-primary);
  cursor: pointer;
  text-align: center;
}

.yw-subscribers-item-avatar {
  position: relative;
  width: 40px;
  height: 40px;
}

.yw-subscribers-item-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.yw-subscribers-item-online-status {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #52c41a;
  border: 1px solid #fff;
}
.yw-subscribers-item-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.yw-subscribers-item-role {
  font-size: 12px;
  padding: 0 4px;
  border-radius: 2px;
  margin-top: 2px;
}

.yw-subscribers-item-role-2 {
  color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
}

.yw-subscribers-item-role-1 {
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}

.yw-conversationselect {
  max-height: 600px;
  max-width: 90vw;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.yw-conversationselect-main {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.yw-conversationselect-content {
  display: flex;
  padding: 8px 16px 8px 6px;
  cursor: pointer;
  align-items: center;
  border-radius: 8px;
  margin: 2px 0;
  transition: background-color 0.15s;
  height: 56px;
  box-sizing: border-box;
  width: 100%;
}

.yw-conversationselect-content:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.yw-conversationselect-content.selected {
  background-color: rgba(24, 144, 255, 0.08);
}

.yw-conversationselect-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--yw-color-secondary);
  font-weight: bold;
  font-size: 18px;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  flex-shrink: 0;
  z-index: 10;
}

.yw-conversationselect-content-title-close {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.yw-conversationselect-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.yw-conversationselect-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.yw-conversationselect-content-searchBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 20px 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  z-index: 9;
  background-color: var(--yw-color-secondary);
  position: sticky;
  top: 0;
}

.yw-conversationselect-content-selectedChannel {
  display: flex;
  flex-wrap: nowrap;
  max-height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  align-items: center;
  margin-bottom: 8px;
  white-space: nowrap;
}

/* 隐藏选中头像区域的滚动条 */
.yw-conversationselect-content-selectedChannel::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.yw-conversationselect-content-selectedChannel::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.yw-conversationselect-content-selectedAvatar {
  padding: 3px;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
}

.yw-conversationselect-content-selectedAvatar:hover {
  transform: scale(1.05);
}

.yw-conversationselect-content-selectedAvatar::after {
  content: '×';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.yw-conversationselect-content-selectedAvatar:hover::after {
  opacity: 1;
}

.yw-conversationselect-clear {
  margin-left: 8px;
  font-size: 13px;
  color: #1890ff;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: rgba(24, 144, 255, 0.1);
  transition: background-color 0.2s;
}

.yw-conversationselect-clear:hover {
  background-color: rgba(24, 144, 255, 0.2);
}

.yw-conversationselect-content-searchContent {
  display: flex;
  min-width: 200px;
  height: 42px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 21px;
  padding: 0 12px;
  background-color: rgba(0, 0, 0, 0.02);
}

.yw-conversationselect-content-searchContent input {
  flex: 1 1;
  height: 100%;
  font-size: 14px;
  line-height: 20px;
  background-color: transparent;
  color: #1f2329;
  padding: 0;
  outline: none;
  border: none;
}

.yw-conversationselect-content-searchIcon {
  display: flex;
  align-items: center;
}

.yw-conversationselect-content-searchInput {
  margin-left: 10px;
  width: 100%;
}

/* Tab容器样式 */
.yw-conversationselect-content-tabcontainer {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tab样式 */
.yw-conversationselect-tabs {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.yw-conversationselect-tabs .semi-tabs-content {
  flex: 1 1;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.yw-conversationselect-tabs .semi-tabs-bar {
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.yw-conversationselect-tab {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}

.yw-conversationselect-content-tabpane {
  height: 360px;
  padding: 0 20px;
  overflow: hidden;
}

.yw-conversationselect-content-tabpane.has-selected-items {
  height: 300px;
}

.yw-conversationselect-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: #999;
}

.yw-conversationselect-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: #999;
  font-size: 14px;
}

/* 底部固定区域 */
.yw-conversationselect-footer {
  background: var(--yw-color-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* 确认按钮样式 */
.yw-but-ok {
  height: 40px !important;
  min-width: 120px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  transition: all 0.3s !important;
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2) !important;
}

.yw-but-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3) !important;
}

.yw-conversationselect-content-selectedAvatar img,
.yw-conversationselect-content-box-data img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 36px !important;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 响应式布局 */
@media screen and (max-height: 700px) {
  .yw-conversationselect {
    max-height: 520px;
  }
  
  .yw-conversationselect-content-tabpane {
    height: 320px;
  }
  
  .yw-conversationselect-content-tabpane.has-selected-items {
    height: 270px;
  }
}

@media screen and (max-height: 600px) {
  .yw-conversationselect {
    max-height: 450px;
  }
  
  .yw-conversationselect-content-tabpane {
    height: 250px;
  }
  
  .yw-conversationselect-content-tabpane.has-selected-items {
    height: 200px;
  }
}

@media screen and (max-width: 480px) {
  .yw-conversationselect {
    max-width: 100vw;
    border-radius: 0;
  }
  
  .yw-conversationselect-content-box-name {
    max-width: 120px;
  }
}

.yw-conversationselect-content-box-data {
  display: flex;
  margin-left: 10px;
  align-items: center;
  flex: 1 1;
}

.yw-conversationselect-content-box-name {
  margin-left: 12px;
  display: flex;
  align-items: center;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.section-count {
  font-size: 13px;
  color: #999;
  margin-left: 4px;
  font-weight: normal;
}

/* 添加更多头像指示器样式 */
.yw-conversationselect-more-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f0f1f2;
  color: #1890ff;
  font-size: 13px;
  font-weight: 500;
  margin: 0 3px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.yw-conversationselect-more-avatars:hover {
  background-color: #e0e3e9;
}


.yw-userinfo {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--yw-bg-base);
  padding: 20px;
  overflow-x: hidden;
}

.yw-userinfo-content {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.yw-userinfo-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 10px 0;
  background: var(--yw-color-theme);
}

.yw-userinfo-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.yw-userinfo-user-avatar {
  width: 82px;
  height: 82px;
  margin-bottom: 14px;
}

.yw-userinfo-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.yw-userinfo-user-avatar img.avatar-error {
  background-color: var(--yw-color-secondary);
  -o-object-fit: contain;
     object-fit: contain;
}

.yw-userinfo-user-info {
  text-align: center;
}

.yw-userinfo-user-info-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--yw-text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.yw-userinfo-user-info-others {
  color: var(--yw-text-secondary);
}

.yw-userinfo-user-info-others ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yw-userinfo-user-info-others li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--yw-text-secondary);
}

.yw-userinfo-sections {
  padding: 0;
}

.yw-userinfo-sections .yw-section {
  margin: 0;
  /* border-bottom: var(--yw-line); */
}

.yw-userinfo-mute-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--yw-bg-secondary);
  border-radius: 8px;
}

.yw-userinfo-mute-section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--yw-text-primary);
}

.yw-userinfo-mute-section-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yw-text-secondary);
  font-size: 14px;
}

.yw-userinfo-footer {
  padding: 16px 0;
  border-top: 1px solid var(--yw-border-color);
}

.yw-userinfo-footer-sendbutton {
  width: 100%;
}

.yw-userinfo-footer-sendbutton button {
  width: 100%;
  height: 44px;
  border-radius: 27px;
  font-size: 16px;
  font-weight: 500;
}

/* Loading state */
.yw-userinfo-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.yw-userinfo-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #ff4d4f;
  font-size: 14px;
  background: #fff2f0;
  border-radius: 4px;
  margin: 16px;
}

.yw-friendapply {
  width: 100%;
  height: 100%;
  background-color: white;
}

body[theme-mode="dark"] .yw-friendapply {
  background-color: #1c1c1c;
  background-color: var(--yw-color-secondary, #1c1c1c);
}

.yw-friendapply-content {
  padding: 12px;
}

.yw-friendapply-content-tip {
  color: #666;
  color: var(--yw-text-secondary, #666);
  font-size: 14px;
  margin-bottom: 12px;
}

/* 文本域样式优化 */
.yw-friendapply-content-message .semi-textarea {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--yw-line-color, #e0e0e0);
  transition: all 0.2s;
  padding: 12px;
  min-height: 80px;
  font-size: 14px;
}

.yw-friendapply-content-message .semi-textarea:focus,
.yw-friendapply-content-message .semi-textarea:hover {
  border-color: #7c42ff;
  border-color: var(--yw-color-primary, #7c42ff);
  box-shadow: 0 0 0 2px rgba(124, 66, 255, 0.1);
}

body[theme-mode="dark"] .yw-friendapply-content-message .semi-textarea {
  border-color: #2c2c2c;
  border-color: var(--yw-line-color-dark, #2c2c2c);
  background-color: #1c1c1c;
  background-color: var(--yw-color-secondary, #1c1c1c);
  color: #e0e0e0;
  color: var(--yw-text-primary, #e0e0e0);
}

body[theme-mode="dark"] .yw-friendapply-content-message .semi-textarea:focus,
body[theme-mode="dark"] .yw-friendapply-content-message .semi-textarea:hover {
  border-color: #7c42ff;
  border-color: var(--yw-color-primary, #7c42ff);
  box-shadow: 0 0 0 2px rgba(124, 66, 255, 0.2);
}

.yw-copyable-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.yw-copyable-text-content {
  margin-right: 4px;
}

.yw-copyable-text-icon {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.yw-copyable-text-icon:hover {
  opacity: 1;
}

.yw-base {
  width: 100%;
  height: 100%;
}

.yw-base-modal .semi-modal-wrap {
  overflow: visible;
}

.yw-base-modal .semi-modal.semi-modal-small {
  margin: 20vh auto;
}

.yw-base-modal .semi-modal.semi-modal-small .semi-modal-header {
  margin: 24px 20px;
}

.yw-base-modal .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.yw-base-modal .semi-modal-close {
  display: none;
}

.yw-base-modal .semi-modal-body-wrapper {
  margin: 0px;
}

.yw-base-modal-userinfo .semi-modal-body {
  height: var(--yw-modal-body-height);
}

/* 转发弹窗专用样式 */
.yw-base-modal-conversationselect {
  max-height: 90vh !important;
}

.yw-base-modal-conversationselect .semi-modal-body {
  max-height: calc(90vh - 80px);
  overflow: hidden;
  padding: 0 !important;
}

/* 加入组织 */
.yw-base-modal-join-org .semi-modal-content {
  border: none !important;
  padding: 12px !important;
}
.yw-base-modal-join-org .semi-modal-header {
  margin: 12px !important;
}
.yw-base-modal-join-org .semi-modal-body-wrapper {
  margin: 0px;
}
.yw-base-modal-join-org .semi-modal-body {
  height: 420px;
}

.semi-button.semi-button-primary:focus-visible,
.semi-button.semi-button-secondary:focus-visible,
.semi-button.semi-button-tertiary:focus-visible,
.semi-button.semi-button-warning:focus-visible,
.semi-button.semi-button-danger:focus-visible {
  outline: none;
}

.yw-base-modal-alert .semi-modal-content {
  padding: 20px !important;
}

.yw-base-modal-alert .semi-modal-header,
.yw-base-modal-alert .semi-modal-footer {
  margin: 0px !important;
  font-size: 16px !important;
}

.yw-base-modal-alert .semi-modal-header {
  border-bottom: var(--yw-line) !important;
  padding-bottom: 16px !important;
}

h5.semi-typography,
.semi-typography-h5.semi-typography {
  font-size: 16px !important;
}

.yw-base-modal-alert .semi-modal-body {
  margin-top: 16px !important;
  margin-bottom: 38px !important;
}

.yw-base-modal-alert .semi-modal-footer .semi-button-primary {
  background-color: var(--yw-color-danger) !important;
}

.yw-base-modal-alert .semi-modal-footer .semi-button-primary:hover {
  background-color: var(--yw-color-danger-hover) !important;
}

.yw-direct-friend-apply {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.yw-direct-friend-apply-footer {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f0f0f0;
  border-top: 1px solid var(--yw-line-color, #f0f0f0);
  margin-top: auto;
}

/* 模态框样式优化 */
.yw-direct-friend-apply-modal {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.yw-direct-friend-apply-modal .semi-modal-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  border-bottom: 1px solid var(--yw-line-color, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.yw-direct-friend-apply-modal .semi-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  color: var(--yw-text-primary, #333);
}

.yw-direct-friend-apply-modal .semi-modal-close {
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.yw-direct-friend-apply-modal .semi-modal-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.yw-direct-friend-apply-modal .semi-modal-content {
  padding: 0 !important;
}

.yw-direct-friend-apply-modal .semi-modal-body {
  padding: 0;
}

/* 按钮样式优化 */
.yw-direct-friend-apply-footer .semi-button {
  border-radius: 6px;
  font-weight: 500;
  padding: 8px 16px;
  height: auto;
}

/* 暗黑模式适配 */
body[theme-mode="dark"] .yw-direct-friend-apply {
  background-color: #1c1c1c;
  background-color: var(--yw-color-secondary, #1c1c1c);
}

body[theme-mode="dark"] .yw-direct-friend-apply-footer {
  border-top: 1px solid #2c2c2c;
  border-top: 1px solid var(--yw-line-color-dark, #2c2c2c);
}

body[theme-mode="dark"] .yw-direct-friend-apply-modal .semi-modal-title {
  color: #e0e0e0;
  color: var(--yw-text-primary, #e0e0e0);
}

body[theme-mode="dark"] .yw-direct-friend-apply-modal .semi-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.yw-subscrierlist {
  background-color: var(--yw-color-theme);
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.yw-subscrierlist-list-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.yw-subscrierlist-item-name {
  margin-left: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 10rem;
}

.yw-subscrierlist-item-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.yw-subscrierlist-item-desc {
  font-size: 14px;
  color: #666;
}

.yw-subscrierlist-item-extra {
  margin-left: 8px;
  color: var(--semi-color-danger);
}

.yw-subscrierlist-item-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 12px;
}

.yw-subscrierlist-list-item:hover .yw-subscrierlist-item-action {
  opacity: 1;
}

.yw-subscrierlist-item-desc .online-status {
  color: #52c41a;
  margin-left: 8px;
  font-size: 12px;
}

.yw-subscrierlist-item-desc .offline-status {
  color: #8e8e8e;
  margin-left: 8px;
  font-size: 12px;
}

.yw-indextable {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.yw-indextable-section-title {
  background-color: var(--yw-color-secondary);
  margin-left: 15px;
}

.yw-indextable-item {
  display: flex;
  align-items: center;
  padding: 15px 15px 15px 0px;
  cursor: pointer;
}

body[theme-mode="dark"] .yw-indextable-item {
  background-color: var(--yw-color-secondary);
}

.yw-indextable-item:hover {
  background-color: var(--yw-color-hover);
}

.yw-indextable-item-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.yw-indextable-item-name {
  margin-left: 15px;
}

body[theme-mode="dark"] .yw-indextable-item-name {
  color: var(--yw-text-primary);
}

.yw-indextable-search {
  padding: 10px 0px;
  display: flex;
  overflow: hidden;
  width: 100%;
  background-color: #f4f4f5;
  z-index: 10;
}

body[theme-mode="dark"] .yw-indextable-search {
  background-color: var(--yw-color-secondary-2);
}

.yw-indextable-item-index {
  width: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

body[theme-mode="dark"] .yw-indextable-item-index {
  color: var(--yw-text-primary);
}

.yw-indextable-checkbox {
  margin-right: 10px;
}

.yw-indextable-search-box {
  display: flex;
  min-width: 100px;
  height: 50px;
  background-color: #f4f4f5;
}

body[theme-mode="dark"] .yw-indextable-search-box {
  background-color: var(--yw-color-secondary-2);
}

.yw-indextable-selected-box {
  display: flex;
  overflow-x: scroll;
}

.yw-indextable-search-icon {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.yw-indextable-search-input {
  margin-left: -20px;
  max-width: 100px;
}

.yw-indextable-search-input input {
  flex: 1 1;
  height: 32px;
  font-size: 12px;
  line-height: 18px;
  background-color: transparent;
  color: #1f2329;
  outline: none;
  border: none;
  height: 100%;
  padding-left: 25px;
}

body[theme-mode="dark"] .yw-indextable-search-input input {
  color: var(--yw-text-primary);
}

.yw-indextable-select-user {
  padding: 0px 5px;
  cursor: pointer;
}

.yw-indextable-search .yw-indextable-select-user img {
  border-radius: 50%;
}

.yw-indextable-contacts {
  width: 100%;
  height: calc(100% - 70px);
  overflow-y: auto;
}

.yw-viewqueueheader {
  width: 100%;
  height: var(--yw-viewqueueheader-height);
  position: relative;
  border-bottom: var(--yw-line);
}

.yw-viewqueueheader-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-viewqueueheader-content-title {
  font-size: 17px;
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

body[theme-mode="dark"] .yw-viewqueueheader-content-title {
  color: var(--yw-text-primary);
}

.yw-viewqueueheader-back {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0px 15px;
}

.yw-viewqueueheader-back img {
  width: 10px;
  height: 15px;
}

.yw-viewqueueheader-content-action {
  position: absolute;
  right: 15px;
}

.yw-userselect {
  width: 100%;
  height: 100%;
}

.yw-contactsselect {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.yw-contactsselect-content {
  width: 100%;
  height: calc(100% - var(--yw-height-viewqueueheader));
}

.yw-message-card {
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
  display: flex;
  align-items: center;
}

body[theme-mode="dark"] .yw-message-card {
  background-color: var(--yw-color-secondary);
}

.yw-message-card-content {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 10px;
  gap: 10px;
}

.yw-message-card-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.yw-message-card-content img {
  width: auto;
  height: 42px;
  border-radius: 50%;
}

.yw-message-card-content-name {
  margin-left: 20px;
  color: var(--yw-text-item);
}

.yw-message-card-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yw-message-card-bottom-flag {
  font-size: 12px;
  color: #999;
}

.yw-message-card-bottom-time {
  position: absolute;
  right: 10px;
  top: -5px;
  color: #999 !important;
}

/* 图片预览模态框样式 - 与视频预览保持一致 */
.yw-image-preview-modal.yw-base-modal .semi-modal-content {
  background: var(--semi-color-bg-0);
}

.yw-image-preview-modal .semi-modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--semi-color-border);
  margin: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yw-image-preview-modal .semi-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--semi-color-text-0);
  width: 100%;
}

/* 图片预览头部样式 */
.yw-image-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-right: 20px;
}

/* 图片预览工具栏样式 */
.yw-image-preview-toolbar {
  display: flex;
  gap: 8px;
}

.yw-image-preview-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 12px;
  border-radius: 4px;
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.yw-image-preview-toolbar-btn:hover {
  background: var(--semi-color-fill-0);
}

.yw-image-preview-modal .semi-modal-body {
  padding: 0;
}

.yw-image-preview-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* 增强关闭图标的可见度 */
.yw-image-preview-modal .semi-modal-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.yw-image-preview-image {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}

.yw-image-preview-error {
  padding: 20px;
  color: #ff4d4f;
  text-align: center;
}

/* 图片预览操作按钮 */
.yw-image-preview-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.yw-image-preview-action-btn {
  padding: 6px 16px;
  border-radius: 4px;
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.yw-image-preview-action-btn:hover {
  background: var(--semi-color-fill-0);
}

/* 新增样式 */
.yw-message-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  overflow: hidden;
  border-radius: 8px;
}

.yw-message-image-container img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 小图标特殊处理 */
.yw-message-image-container.small-icon {
  min-width: 180px;
  min-height: 180px;
}

/* 图片加载状态 */
.yw-message-image-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #999;
  font-size: 14px;
  background-color: #f5f5f5;
  border-radius: 8px;
  position: relative;
}

/* 图片错误状态 */
.yw-message-image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.yw-message-image-error-text {
  color: #999;
  font-size: 14px;
  text-align: center;
  padding: 10px;
}

.yw-join-oraganization {
  background-color: var(--yw-color-theme);
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
}

body[theme-mode="dark"] .yw-join-oraganization {
  background-color: var(--yw-color-secondary);
}

.yw-join-oraganization-content {
  display: flex;
  padding: 10px;
  align-items: center;
}

.yw-join-oraganization-content-name {
  margin-left: 20px;
  color: var(--yw-text-item);
}

.yw-join-oraganization-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px 5px 10px;
}

.yw-join-oraganization-bottom-flag {
  font-size: 12px;
  color: #999;
}

.yw-join-oraganization-bottom-time {
  position: absolute;
  right: 10px;
  top: -5px;
  color: #999 !important;
}

.yw-message-system {
  width: 92%;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
body[theme-mode="dark"] .yw-message-system {
  color: #999;
}

.yw-message-system-invite {
  color: var(--yw-color-primary);
  cursor: pointer;
  display: inline;
  margin-left: 8px;
}

.yw-message-system-username {
  color: var(--yw-color-primary);
  font-weight: 500;
  margin-left: 4px;
  margin-right: 4px;
}

.yw-message-text {
  word-wrap: break-word;
  word-break: break-all;
  width: 100%;
}

.yw-message-text pre {
  margin-bottom: 0;
  white-space: pre-wrap; /*css-3*/
  white-space: -moz-pre-wrap; /*Mozilla,since1999*/
  white-space: -pre-wrap; /*Opera4-6*/
  white-space: -o-pre-wrap; /*Opera7*/
  word-wrap: break-word; /*InternetExplorer5.5+*/
  font-family: Helvetica;
}

.yw-message-text-richtext {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.yw-message-text-richmention {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: pointer;
  text-decoration: none;
  /* text-underline-offset: 2px; */
  margin-left: 4px;
  margin-right: 4px;
  color: #ff5757aa !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* @所有人的特殊样式 */
.yw-message-text-richmention[data-mention-all="true"] {
  pointer-events: none;
}

.yw-message-text-richmention:hover {
  background-color: rgba(116, 79, 226, 0.2);
  background-color: rgba(var(--yw-color-primary-rgb, 116, 79, 226), 0.2);
}

.yw-message-text-richmention.yw-message-text-send {
  color: white !important;
}

.yw-message-text-recv {
  color: black;
}

body[theme-mode="dark"] .yw-message-text-recv {
  color: var(--yw-text-primary);
}

.yw-message-text-richemoji {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.yw-message-text-richemoji img {
  width: 18px;
  height: 18px;
}

.yw-message-text-reply {
  display: flex;
  color: rgb(255, 255, 255, 0.5);
  font-size: 14px;
  flex-direction: column;
  cursor: pointer;
}

.yw-message-text-reply.yw-message-text-reply-recv {
  color: rgb(0, 0, 0, 0.5);
}

.yw-message-text-reply-author {
  display: flex;
  align-items: center;
}

.yw-message-text-reply-authoravatar {
  margin-right: 4px;
}

.yw-message-text-reply-content {
  width: 100%;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yw-message-text-content {
  margin: 0;
  word-break: break-word;
  line-height: 1.3125;
  text-align: left;
  text-align: initial;
  unicode-bidi: plaintext;
  display: inline-block; /* 修改为 inline-block */
  width: 100%;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: text;
}

.yw-message-text-commontext {
  display: inline;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.yw-message-text-richemoji {
  display: inline-flex;
  align-items: center;
  vertical-align: middle; /* 添加垂直对齐 */
}

/* 链接样式 */
.yw-message-text-richlink {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  cursor: pointer;
  transition: all 0.2s ease;
  word-break: break-all;
  -webkit-text-decoration: solid;
          text-decoration: solid;
}

/* 链接hover样式 */
.yw-message-text-richlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 接收消息中的链接样式 */
.yw-message-text-richlink.yw-message-text-recv {
  color: #7c42ff !important;
  color: var(--yw-color-primary, #7c42ff) !important;
}

.yw-message-text-richlink.yw-message-text-recv:hover {
  color: #6a35e8 !important;
  color: var(--yw-color-primary-hover, #6a35e8) !important;
}

/* 发送消息中的链接样式 */
.yw-message-text-richlink.yw-message-text-send {
  color: rgba(255, 255, 255, 0.9) !important;
}

.yw-message-text-richlink.yw-message-text-send:hover {
  color: white !important;
}

/* 暗黑模式下接收消息的链接样式 */
body[theme-mode="dark"] .yw-message-text-richlink.yw-message-text-recv {
  color: #8b5cf6 !important;
  color: var(--yw-color-primary, #8b5cf6) !important;
}

body[theme-mode="dark"] .yw-message-text-richlink.yw-message-text-recv:hover {
  color: #a78bfa !important;
  color: var(--yw-color-primary-hover, #a78bfa) !important;
}

.icon-play::before {
  content: "";
  color: var(--yw-text-primary);
  font-size: 20px;
}

.icon-pause::before {
  content: "";
  font-size: 20px;
  color: var(--yw-text-primary);
}

.voicePlay {
  width: 48px;
  height: 48px;
  background-color: var(--yw-color-theme);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: flex;
}

.yw-message-base-bubble-box.recv .voicePlay {
  background-color: var(--yw-color-secondary-2);
}

.voicePlay .icon-play {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voicePlay .icon-pause {
  opacity: 0;
  transform: scale(0.5);
}

.voicePlay i {
  position: absolute;
}

.voicePlaying .icon-pause {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voicePlaying .icon-play {
  opacity: 0;
  transform: scale(0.5);
}

.mediaLoading {
  position: absolute;
  cursor: pointer;
}

.voiceDownloading .icon-pause {
  opacity: 0;
  transform: scale(0.5);
}

.voiceDownloading .icon-play {
  opacity: 0;
  transform: scale(0.5);
}

.progressSpinner {
  width: auto;
  height: auto;
  background: transparent
    url(data:image/svg+xml;base64,PHN2ZyAgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIzMTkiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PHBhdGggZD0iTTU2Mi4yODExNzMgNTEwLjgwMDY4NWwyOTQuOTk2NjY0LTI5My40NjY4MjFjMTMuOTQ5NzEtMTMuODc4MDc5IDE0LjAyMDMxOC0zNi4zNjcyNzkgMC4xNDIyNC01MC4zMTY5ODktMTMuOTEzODk0LTEzLjk4NDUwMy0zNi4zNjcyNzktMTQuMDIwMzE4LTUwLjMxNjk4OS0wLjE0MjI0TDUxMi4wMzQ3OTIgNDYwLjM3NzI3MiAyMTkuNTI4ODU1IDE2Ni45ODIwODJjLTEzLjg0MjI2My0xMy44NzgwNzktMzYuMzY3Mjc5LTEzLjk0OTcxLTUwLjMxNjk4OS0wLjA3MTYzMS0xMy45MTM4OTQgMTMuODc4MDc5LTEzLjk0ODY4NyAzNi40MDMwOTUtMC4wNzE2MzEgNTAuMzUyODA1TDQ2MS41NzY1ODcgNTEwLjU4NzgzNyAxNjYuNzIxMTM5IDgwMy44NzY2MDRjLTEzLjk0OTcxIDEzLjg3ODA3OS0xNC4wMjAzMTggMzYuMzY3Mjc5LTAuMTQyMjQgNTAuMzE2OTg5IDYuOTM5MDM5IDYuOTc0ODU1IDE2LjA4NDMyNyAxMC40OTcwNzUgMjUuMjI5NjE0IDEwLjQ5NzA3NSA5LjA3MzY1NiAwIDE4LjE0ODMzNS0zLjQ1MTYxMiAyNS4wODczNzUtMTAuMzU0ODM1bDI5NC45MjYwNTYtMjkzLjM2MDM5OCAyOTUuMTc0NzIgMjk2LjA2NDk5NmM2LjkzOTAzOSA2Ljk3NDg1NSAxNi4wNDg1MTEgMTAuNDYyMjgzIDI1LjE5Mzc5OSAxMC40NjIyODMgOS4xMDk0NzIgMCAxOC4xODQxNTEtMy40ODc0MjggMjUuMTIzMTktMTAuMzkwNjUxIDEzLjkxMzg5NC0xMy44NzgwNzkgMTMuOTQ5NzEtMzYuMzY3Mjc5IDAuMDcxNjMxLTUwLjMxNjk4OUw1NjIuMjgxMTczIDUxMC44MDA2ODV6IiAgZmlsbD0iIzJmNzBmNSI+PC9wYXRoPjwvc3ZnPg==)
    no-repeat 49% 49%;
}

.progressSpinner svg {
  display: block;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: 4s linear 0s infinite ProgressSpinnerAnimation;
}

.progressSpinner svg circle {
  transition: stroke-dashoffset 0.5s;
}

@keyframes ProgressSpinnerAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.yw-message-voice {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.yw-message-voice-info {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.yw-message-voice-info-status {
  display: flex;
}

.yw-message-voice-info-time {
  display: flex;
  font-size: 14px;
}

.yw-message-voice-info-tail {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.yw-message-voice-waveform {
  position: relative;
  width: 100%;
  height: 100%;
}

.yw-message-voice-lightWavform {
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  transition: width 100ms ease-in-out;
  width: 0%;
}

.yw-message-video-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.yw-message-video-content-time {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  color: #fff;
  display: flex;
  font-size: 12px;
  height: 1.125rem;
  left: 6px;
  line-height: 1;
  padding: 0 6px;
  position: absolute;
  top: 6px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2;
}

.yw-message-video-content-video img {
  border-radius: 4px;
  cursor: pointer;
}

.flexible-modal {
  position: absolute;
  z-index: 1;
  border: 1px solid #ccc;
  background: white;
}
.flexible-modal-mask {
  position: fixed;
  height: 100%;
  background: rgba(55, 55, 55, 0.6);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.flexible-modal-resizer {
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: se-resize;
  margin: 5px;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
}
.flexible-modal-drag-area {
  background: rgba(22, 22, 333, 0.2);
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: move;
}

/* 视频加载状态 */
.yw-message-video-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.yw-message-video-loading-text {
  color: #999;
  font-size: 14px;
}

/* 视频错误状态 */
.yw-message-video-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.yw-message-video-error-text {
  color: #999;
  font-size: 14px;
}

/* 视频容器样式 */
.yw-message-video {
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 100%;
}

/* 视频封面样式 */
.yw-message-video-cover {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}

/* 确保视频元素不显示播放控件 */
.yw-message-video-cover video::-webkit-media-controls {
  display: none !important;
}

.yw-message-video-cover video::-webkit-media-controls-enclosure {
  display: none !important;
}

.yw-message-video-cover video::-webkit-media-controls-panel {
  display: none !important;
}

/* 播放按钮样式 */
.yw-message-video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.yw-message-video-play-button:hover {
  opacity: 1;
}

/* 视频封面加载状态 */
.yw-message-video-cover-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.yw-message-video-cover-loading-text {
  color: #999;
  font-size: 14px;
}

/* 视频预览模态框样式 */
.yw-video-preview-modal.yw-base-modal .semi-modal-content {
  background: var(--semi-color-bg-0);
}

.yw-video-preview-modal .semi-modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--semi-color-border);
  margin: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yw-video-preview-modal .semi-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--semi-color-text-0);
  width: 100%;
}

/* 视频预览头部样式 */
.yw-video-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-right: 20px;
}

/* 视频预览工具栏样式 */
.yw-video-preview-toolbar {
  display: flex;
  gap: 8px;
}

.yw-video-preview-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 12px;
  border-radius: 4px;
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.yw-video-preview-toolbar-btn:hover {
  background: var(--semi-color-fill-0);
}

/* 增强关闭图标的可见度 */
.yw-video-preview-modal .semi-modal-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}

.yw-video-preview-modal .semi-modal-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.yw-video-preview-modal .semi-modal-body {
  padding: 0;
}

.yw-video-preview-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
}

.yw-video-preview-video {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}

.yw-video-preview-error {
  padding: 20px;
  color: #ff4d4f;
  text-align: center;
}

/* 视频预览操作按钮 */
.yw-video-preview-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.yw-video-preview-action-btn {
  padding: 6px 16px;
  border-radius: 4px;
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.yw-video-preview-action-btn:hover {
  background: var(--semi-color-fill-0);
}

.yw-message-location {
  cursor: pointer;
}

.yw-message-location-content {
  width: 250px;
  background-color: var(--yw-color-theme);
  border-radius: 4px;
}

body[theme-mode="dark"] .yw-message-location-content {
  background-color: var(--yw-color-secondary);
}

.yw-message-location-content-title {
  color: var(--yw-text-item);
  font-size: 16px;
  padding: 5px 5px 0px 5px;
}

.yw-message-location-content-address {
  color: #666;
  font-size: 12px;
  padding: 0px 5px 5px 5px;
}

.yw-message-location-content-locationimg {
  width: 250px;
  height: 100px;
  overflow: hidden;
  background-size: cover;
}

.yw-iconclick {
  padding: 10px;
}

.yw-iconclick img {
  width: 20px;
  height: 20px;
}

.yw-emojitoolbar {
  padding: 10px;
}

.yw-emojitoolbar-emojipanel {
  width: 100%;
  height: 372px;
  background-color: var(--yw-bg-secondary);
  position: absolute;
  left: 0;
  top: calc(-372px);
  border-radius: 10px;
  z-index: 999;
  border: var(--yw-line);
}

body[theme-mode="dark"] .yw-emojitoolbar-emojipanel {
  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.85098);
}

.yw-emojitoolbar-emojipanel-visible {
  display: block;
}

.yw-emojitoolbar-emojipanel-hidden {
  display: none;
}

.yw-emojipanel {
  width: 100%;
  height: 100%;
}

.yw-emojipanel-tab {
  width: 100%;
  height: 40px;
  background-color: var(--yw-color-secondary);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: var(--yw-line);
}

.yw-emojipanel-content {
  width: 100%;
  height: calc(100% - 40px);
  overflow: hidden;
  overflow-y: auto;
}

.yw-emojipanel-content ul {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  justify-content: flex-start;
  width: 100%;
}

.yw-emojipanel-content ul li {
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.2s;
  margin: 6px;
}

.yw-emojipanel-content ul li:hover {
  background-color: var(--yw-state-hover-bg);
}

.yw-emojipanel-content ul li img {
  height: 100%;
  width: 100%;
  display: block;
  transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  -webkit-transition: transform 0.3s;
  -o-transition: transform 0.3s;
}

.yw-emojipanel-tab-item {
  width: 60px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.yw-emojipanel-tab-item:hover {
  background-color: var(--yw-state-hover-bg);
}

.yw-emojipanel-tab-item-selected {
  background-color: var(--yw-color-theme);
}

.yw-emojipanel-tab-item-selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background-color: var(--yw-color-primary);
  border-radius: 2px 2px 0 0;
}

body[theme-mode="dark"] .yw-emojipanel-tab-item-selected {
  background-color: var(--yw-color-secondary-2);
}

body[theme-mode="dark"] .yw-emojipanel-tab-item-selected::after {
  background-color: var(--yw-color-primary);
}

.yw-emojitoolbar-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 998;
  cursor: default;
}

.sticker-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sticker-uploader-button {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #ebebeb;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px dashed var(--yw-color-border);
  margin: 6px;
}

.sticker-uploader-button:hover {
  background-color: #d9d9d9;
}

.sticker-uploader-button.uploading {
  cursor: not-allowed;
  opacity: 0.7;
}

.sticker-uploader-loading {
  width: 24px;
  height: 24px;
  border: 2px solid var(--yw-color-border);
  border-top: 2px solid var(--yw-color-theme);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sticker-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.sticker-list ul {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  box-sizing: border-box;
  overflow-y: auto;
  justify-content: flex-start;
}

.sticker-list ul li {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px;
  transition: all 0.2s;
}

.sticker-list ul li:hover {
  background-color: var(--yw-state-hover-bg);
}

.sticker-list ul li img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.sticker-list-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 100%;
  color: var(--yw-color-text-2);
}

.sticker-list-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--yw-color-border);
  border-top: 3px solid var(--yw-color-theme);
  border-radius: 50%;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
}

.sticker-list-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 100%;
  color: var(--yw-color-text-2);
  font-size: 14px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.yw-channelavatar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: 40px;
  flex-direction: column;
}

.yw-channelavatar-avatar {
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.yw-channelavatar-avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

.yw-channelavatar-upload {
  margin-top: 20px;
}

.yw-channelavatar-loading,
.yw-channelavatar-error {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
}

.yw-channelavatar-error {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.yw-imagetoolbar {
}

.yw-imagetoolbar-content {
  padding: 10px;
}

.yw-imagetoolbar-content-icon img {
  width: 20px;
  height: 20px;
}

.yw-imagetoolbar-content-icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Modal 样式 */
.yw-imagedialog-modal .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.yw-imagedialog-modal .semi-modal-body {
  padding: 0;
}

.yw-imagedialog-content-body {
  padding: 16px 20px;
}

.yw-imagedialog-content-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-height: 80vh;
  overflow: hidden;
}

.yw-imagedialog-content-previewImg,
.yw-imagedialog-content-previewVideo {
  max-width: 100%;
  max-height: 400px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}

.yw-imagedialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--semi-color-border);
}

.yw-imagedialog-footer button {
  padding: 6px 24px;
  border-radius: 4px;
  border: 1px solid var(--semi-color-border);
  background: white;
  cursor: pointer;
}

.yw-imagedialog-footer button:hover {
  background: var(--semi-color-fill-0);
}

.yw-imagedialog-footer-okbtn {
  color: white;
  border: none !important;
}

.yw-imagedialog-footer-okbtn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Modal 标题栏样式 */
.yw-imagedialog-modal .semi-modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--semi-color-border);
  margin: 0 !important;
}

.yw-imagedialog-modal .semi-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--semi-color-text-0);
}

/* Modal 关闭按钮样式 */
.yw-imagedialog-modal .semi-modal-close {
  top: 16px;
  right: 16px;
}

.yw-imagedialog-modal .semi-modal-close:hover {
  background-color: var(--semi-color-fill-0);
}

.yw-imagedialog-modal .semi-modal-close {
  display: inline-flex;
}

.yw-imagedialog-content-info {
  margin-top: 12px;
}

.yw-imagedialog-content-filename {
  font-size: 14px;
  color: var(--yw-text-thrid);
  word-break: break-all;
  margin-bottom: 4px;
}

.yw-imagedialog-content-filesize {
  font-size: 12px;
  color: var(--yw-text-forth);
}


.group-management {
  height: calc(100vh - var(--yw-viewqueueheader-height));
  overflow-x: hidden;
  overflow-y: overlay;
}

.admin-list-section {
  padding: 16px;
  background: var(--semi-color-bg-0);
}

.admin-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.admin-list-header span {
  font-size: 15px;
  font-weight: 400;
  color: var(--yw-text-primary);
}

.admin-list-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: var(--semi-color-bg-1);
  border-radius: 8px;
}

.admin-info {
  flex: 1 1;
  margin-left: 12px;
}

.admin-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--semi-color-text-0);
}

.admin-role {
  font-size: 12px;
  color: var(--semi-color-text-2);
  margin-top: 4px;
}

.admin-item .semi-button {
  margin-left: 8px;
}

.admin-list-header .semi-button {
  padding: 4px 12px;
  background: var(--yw-bg-secondary-2);
  border: none;
}

.admin-list-header .semi-button span {
  font-size: 14px;
  margin-left: 0;
  color: var(--yw-text-primary);
}

.admin-list-header .semi-button .semi-icon {
  margin-right: 4px;
}

.admin-remove-btn {
  opacity: 0.6;
  transition: opacity 0.2s;
}

.admin-remove-btn:hover {
  opacity: 1;
  background-color: var(--semi-color-fill-0);
}

.admin-item:hover .admin-remove-btn {
  opacity: 1;
}

/* 适配暗色主题 */
[data-theme="dark"] .admin-list-section {
  background: var(--semi-color-bg-1);
}

[data-theme="dark"] .admin-item {
  background: var(--semi-color-bg-2);
}

[data-theme="dark"] .admin-remove-btn:hover {
  background-color: var(--semi-color-fill-1);
}

.admin-remove-icon {
  opacity: 0.6;
  transition: opacity 0.2s;
  cursor: pointer;
  color: var(--semi-color-text-2);
}

.admin-remove-icon:hover {
  opacity: 1;
  color: var(--semi-color-danger);
}

.admin-item:hover .admin-remove-icon {
  opacity: 1;
}

.yw-auth {
  display: flex;
  width: 100%;
  height: 100vh;
  min-width: 360px;
}

.yw-auth-banner {
  flex: 1 1;
  min-width: 320px;
  position: relative;
  background-image: url(../../static/media/login-bg.d2ed4b079aa7555c61e9.png);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: #fff;
}

.yw-auth-banner-header {
  position: relative;
  z-index: 1;
  padding: 60px 40px;
  transform-origin: left top;
  transition: all 0.3s ease;
}

.fullscreen-mode .yw-auth-banner-header {
  padding: 40px;
}

.yw-auth-banner-header .yw-auth-logo {
  margin-bottom: 45px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.yw-auth-banner-header .yw-auth-slogan {
  font-size: 30px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-auth-banner h1 {
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 0;
}

.yw-auth-banner img {
  width: 56px;
  height: 56px;
  margin-right: 12px;
}

.yw-auth-panel {
  flex: 1 1;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.yw-auth-content {
  width: 100%;
  max-width: 478px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.yw-auth-card {
  width: 100%;
  max-width: 420px;
  min-height: 520px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px #7c42ff1a;
  padding: 24px;
}

.yw-auth-module-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  background: linear-gradient(to right, #986eff, #03a9f4);
  border-color: #6c5ce7;
  color: #fff;
  opacity: 0.4;
}

.yw-auth-module-button:hover {
  opacity: 0.6;
}

.yw-auth-module-link {
  color: var(--yw-color-primary);
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.yw-auth-module-link:hover {
  text-decoration: underline;
}

/* 底部协议和注册样式 */
.yw-auth-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.yw-auth-agreement {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 20px 0 12px 0;
  color: #666;
  text-align: center;
}

input[type="checkbox"].yw-auth-agreement-checkbox {
  margin: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.yw-auth-agreement-text {
  color: #666;
  line-height: 20px;
}

.yw-auth-register {
  text-align: center;
  color: #666;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .yw-auth-banner-header {
    transform: scale(0.9);
    padding: 60px 35px;
  }

  .fullscreen-mode .yw-auth-banner-header {
    padding: 35px;
  }
}

@media screen and (max-width: 992px) {
  .yw-auth-banner-header {
    transform: scale(0.85);
    padding: 60px 32px;
  }

  .fullscreen-mode .yw-auth-banner-header {
    padding: 32px;
  }
}

@media screen and (max-width: 768px) {
  .yw-auth-banner-header {
    transform: scale(0.8);
    padding: 60px 30px;
    .fullscreen-mode .yw-auth-banner-header {
      padding: 30px;
    }
  }
}

@media screen and (max-width: 576px) {
  .yw-auth-banner-header {
    transform: scale(0.7);
    padding: 60px 25px;
    .fullscreen-mode .yw-auth-banner-header {
      padding: 25px;
    }
  }
}

@media screen and (max-width: 720px) {
  .yw-auth-banner {
    display: none;
  }

  .yw-auth-panel {
    flex: 1 1;
    min-width: auto;
  }

  .yw-auth-content {
    padding: 16px;
  }

  .yw-auth-card {
    padding: 20px;
  }
}

/* 登录特有的标签切换 */
.yw-login-tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 32px;
}

.yw-login-tab-item {
  flex: 1 1;
  text-align: center;
  padding: 16px 0;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.yw-login-tab-item.active {
  color: #333;
}

.yw-login-tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--semi-color-primary);
}

/* 登录表单 */
.yw-login-form {
  width: 100%;
  max-width: 400px;
}

.yw-login-form input {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 16px;
}

.yw-login-form input.yw-login-password {
  margin-bottom: 0;
}

.yw-login-form input:focus {
  border-color: #333;
  outline: none;
}

.yw-login-button {
  margin-top: 100px;
}

/* 登录选项 */
.yw-login-options {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}

/* 内容区域切换 */
.yw-login-content-container {
  position: relative;
  width: 100%;
}

.yw-login-content-phonelogin,
.yw-login-content-scanlogin {
  display: none;
}

.yw-login-content-phonelogin-show,
.yw-login-content-scanlogin-show {
  display: block;
}

/* 扫码登录样式 */
.yw-login-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.yw-login-qrcode-tip {
  text-align: center;
  margin-bottom: 24px;
  color: var(--yw-text-fifth);
}

.yw-login-qrcode-tip .highlight {
  color: var(--yw-color-primary);
  /* margin: 0 4px; */
}

.yw-login-content-scanlogin-qrcode {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 手动刷新按钮悬浮层 */
.yw-login-qrcode-refresh-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  z-index: 10;
}

.yw-login-qrcode-refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.yw-login-qrcode-refresh-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .yw-login-verify-code {
    gap: 8px;
  }

  .yw-login-verify-code .verify-code-btn {
    width: 100px;
    font-size: 13px;
  }
}

.yw-login-bottom {
  margin: 16px 0;
  font-size: 12px;
  color: #666;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yw-login-agreement {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 20px 0 16px 0;
  color: #666;
  text-align: center;
}

.yw-login-agreement label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.yw-login-agreement input[type="checkbox"] {
  margin: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.yw-login-agreement-text {
  font-size: 12px;
  color: #666;
}

.yw-login-register {
  color: #666;
}

.yw-login-company {
  display: flex;
  margin-bottom: 16px;
}

.yw-login-company input {
  flex: 1 1;
  margin-bottom: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 44px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  background-color: #f5f5f5;
}

.yw-login-company input:disabled {
  cursor: not-allowed;
}

.yw-login-company-change {
  width: 120px;
  height: 44px;
  white-space: nowrap;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 密码输入框容器 */
.yw-login-password-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.yw-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  z-index: 1;
}

.yw-password-toggle:hover {
  color: #333;
}

.yw-register {
  display: flex;
  height: 100vh;
  background: #fff;
}

.yw-register-panel {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.yw-register-content-header {
  width: 100%;
  padding: 40px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yw-register-content-logo {
  display: flex;
  align-items: center;
}

.yw-register-content-logo img {
  height: 48px;
  width: auto;
  margin-right: 12px;
}

.yw-register-content-logo-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.yw-register-content-slogan {
  color: #666;
  font-size: 16px;
}

.yw-register-content {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background: #f7f7f7;
}

.yw-register-card {
  width: 100%;
  max-width: 420px;
  min-height: 520px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 32px;
}

/* 注册表单 */
.yw-register-form {
  width: 100%;
  max-width: 400px;
}

.yw-register-form input {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 16px;
}

.yw-register-verify-code {
  display: flex;
  margin-bottom: 20px;
}

.yw-register-verify-code input {
  flex: 1 1;
  margin-bottom: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.yw-register-verify-code .verify-code-btn {
  width: 120px;
  height: 44px;
  white-space: nowrap;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.yw-register-button {
  margin-top: 50px;
}

.yw-register-options {
  text-align: center;
  margin-top: 16px;
}

.yw-register-form input:focus {
  border-color: #333;
  outline: none;
}

.yw-register-options a:hover {
  text-decoration: underline;
}

/* 注册标签切换 */
.yw-register-tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 32px;
}

.yw-register-tab-item {
  flex: 1 1;
  text-align: center;
  padding: 16px 0;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.yw-register-tab-item.active {
  color: #333;
}

.yw-register-tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--semi-color-primary);
}

/* Header 样式 */
.yw-register-header {
  width: 100%;
  padding: 24px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.yw-register-logo {
  display: flex;
  align-items: center;
}

.yw-register-logo img {
  height: 36px;
  width: auto;
  margin-right: 8px;
}

.yw-register-logo-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.yw-register-slogan {
  color: #666;
  font-size: 14px;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .yw-register-header {
    padding: 16px 20px;
  }

  .yw-register-logo img {
    height: 28px;
  }

  .yw-register-logo-title {
    font-size: 18px;
  }

  .yw-register-content {
    padding: 0 16px;
  }

  .yw-register-card {
    padding: 24px 16px;
    box-shadow: none;
    min-height: auto;
  }

  .yw-register-verify-code .verify-code-btn {
    width: 100px;
    font-size: 13px;
  }

  .yw-register-tabs {
    margin-bottom: 24px;
  }

  .yw-register-tab-item {
    font-size: 14px;
    padding: 12px 0;
  }

  .phone-input-container {
    width: 100%;
  }
  
  .phone-input-container .country-code-select {
    min-width: 80px;
  }
}

@media screen and (max-width: 480px) {
  .yw-register-slogan {
    display: none;
  }
}

/* 添加对新增区号选择的样式支持 */
.yw-register-content-form .phone-input-container {
  margin-bottom: 20px;
}

.yw-register-content-form .phone-input-container .country-code-select {
  height: 40px;
  border-color: #e0e0e0;
  border-color: var(--yw-color-border, #e0e0e0);
}

.yw-register-content-form .phone-input-container input {
  height: 40px;
}

/* 确保验证码输入框样式一致 */
.yw-register-verify-code {
  margin-bottom: 20px;
}

/* 密码输入框容器样式 */
.yw-password-container {
  position: relative;
  margin-bottom: 16px;
}

.yw-password-container input {
  width: 100%;
  padding-right: 40px; /* 为图标腾出空间 */
  margin-bottom: 0; /* 覆盖默认的margin-bottom */
}

.yw-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  z-index: 1;
}

.yw-password-toggle:hover {
  color: #333;
}

.image-captcha-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.image-captcha-container {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-captcha-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.image-captcha-header span {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.image-captcha-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.image-captcha-content {
  width: 326px;
  height: 350px;
  /* padding: 16px; */
}

.country-code-select {
  position: relative;
  display: inline-flex;
  min-width: 90px;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
}

.selected-country {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  width: 100%;
  height: 100%;
}

/* 支持图片格式的国旗 */
.country-flag-img {
  width: 18px;
  height: 12px;
  margin-right: 5px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 支持emoji格式的国旗 */
.country-flag-emoji {
  font-size: 16px;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-height: 300px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 4px;
}

.search-container input {
  margin-bottom: 0;
}

.search-container {
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.search-container input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  outline: none;
}

.countries-list {
  max-height: 220px;
  overflow-y: auto;
}

.country-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}

.country-item:hover {
  background-color: #f5f5f5;
}

.country-item.selected {
  background-color: #f0f0f0;
}

.country-name {
  flex: 1 1;
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-code {
  color: #666;
}

.loading-container, .no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

/* 为注册和忘记密码页面的手机号输入框添加样式 */
.phone-input-container {
  display: flex;
  width: 100%;
}

.phone-input-container input {
  flex: 1 1;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.phone-input-container .country-code-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
} 
.yw-forget-title {
  text-align: center;
}
/* 忘记密码表单 */
.yw-forget-form {
  width: 100%;
  max-width: 400px;
}

.yw-forget-form input {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 16px;
}

.yw-forget-form input:focus {
  border-color: #333;
  outline: none;
}

/* 验证码区域 */
.yw-forget-verify-code {
  display: flex;
  margin-bottom: 20px;
}

.yw-forget-verify-code input {
  flex: 1 1;
  margin-bottom: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.yw-forget-verify-code .verify-code-btn {
  width: 120px;
  height: 44px;
  white-space: nowrap;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.yw-forget-button {
  margin-top: 90px;
}

/* 底部链接 */
.yw-forget-options {
  text-align: center;
  margin-top: 16px;
}

/* 响应式设计 - 仅保留相关部分 */
@media screen and (max-width: 768px) {
  .yw-forget-verify-code .verify-code-btn {
    width: 100px;
    font-size: 13px;
  }
}

/* 添加对新增区号选择的样式支持 */
.yw-forget-form .phone-input-container {
  margin-bottom: 20px;
}

.yw-forget-form .phone-input-container .country-code-select {
  height: 40px;
  border-color: #e0e0e0;
  border-color: var(--yw-color-border, #e0e0e0);
}

.yw-forget-form .phone-input-container input {
  height: 40px;
}

/* 确保在手机模式下区号选择器正常显示 */
@media (max-width: 768px) {
  .phone-input-container {
    width: 100%;
  }
  
  .phone-input-container .country-code-select {
    min-width: 80px;
  }
}

/* 密码输入框容器 */
.yw-password-container {
  position: relative;
  margin-bottom: 16px;
}

.yw-password-container input {
  width: 100%;
  padding-right: 40px; /* 为图标腾出空间 */
  margin-bottom: 0; /* 覆盖默认的margin-bottom */
}

.yw-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  z-index: 1;
}

.yw-password-toggle:hover {
  color: #333;
}

.yw-auth-card {
  min-height: auto;
}

.yw-company-input {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.yw-company-input-form {
  background: white;
  padding: 32px;
  /* border-radius: 8px; */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  width: 100%;
  max-width: 400px;
  /* margin-top: 180px; */
  /* margin-top: 50%;
  transform: translateY(-50%); */
}

.yw-company-input-form h2 {
  text-align: center;
  margin-bottom: 32px;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.yw-company-input-form input {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 24px;
}

.yw-company-input-form input:focus {
  border-color: var(--semi-color-primary);
  outline: none;
}

/* 复用登录页面的按钮样式 */
.yw-company-input-form .yw-auth-module-button {
  width: 100%;
  margin-top: 8px;
  height: 44px;
  font-size: 16px;
}

.yw-config-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.yw-config-error-content {
  text-align: center;
  max-width: 480px;
}

.yw-config-error-icon {
  font-size: 48px;
}

.yw-config-error-title {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.85);
}

.yw-config-error-desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.yw-config-error-desc ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.yw-config-error-desc li {
  margin-bottom: 8px;
}

.yw-config-error-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.yw-config-error-actions .semi-button {
  min-width: 120px;
}

.yw-iconlistitem {
  height: 70px;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.yw-iconlistitem:hover {
  background-color: var(--yw-state-hover-bg);
}

.yw-iconlistitem-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0px 20px;
}

.yw-iconlistitem-content-icon img {
  width: 32px;
  height: 32px;
}

.yw-iconlistitem-content-title {
  font-size: 14px;
  font-weight: 500;
  margin-left: 15px;
}

body[theme-mode="dark"] .yw-iconlistitem-content-title {
  color: var(--yw-state-default-text);
}

.yw-iconlistitem-content-badge {
  position: absolute;
  right: 15px;
}


.yw-loading-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.yw-loading-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.yw-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-in-out;
  z-index: 1000;
}

.yw-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 12px;
  transform: scale(1.2);
}

.yw-loading-tip {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

/* HTML: <div class="loader"></div> */
.data-loader {
  --r1: 154%;
  --r2: 68.5%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
      var(--r1) var(--r2) at top,
      #0000 79.5%,
      var(--yw-color-primary) 80%
    ),
    radial-gradient(
      var(--r1) var(--r2) at bottom,
      var(--yw-color-primary) 79.5%,
      #0000 80%
    ),
    radial-gradient(
      var(--r1) var(--r2) at top,
      #0000 79.5%,
      var(--yw-color-primary) 80%
    ),
    #ccc;
  background-size: 50.5% 220%;
  background-position: -100% 0%, 0% 0%, 100% 0%;
  background-repeat: no-repeat;
  animation: l9 2s infinite linear;
}
@keyframes l9 {
  33% {
    background-position: 0% 33%, 100% 33%, 200% 33%;
  }
  66% {
    background-position: -100% 66%, 0% 66%, 100% 66%;
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%;
  }
}

.yw-qrcodemy {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.yw-qrcodemy-content-qrcodebox {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-qrcodemy-content-qrcodeinfo {
  background-color: var(--yw-color-theme);
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body[theme-mode="dark"] .yw-qrcodemy-content-qrcodeinfo {
  background-color: var(--yw-color-secondary-2);
}

.yw-qrcodemy-content-userinfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 15px;
}

.yw-qrcodemy-content-userinfo-avatar img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}

.yw-qrcodemy-content-qrcode {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 210px;
}

.yw-qrcodemy-content-tip {
  font-size: 12px;
  text-align: center;
  color: #666;
  margin: 16px 0;
}

.yw-qrcodemy-content-userinfo-name {
  font-size: 24px;
  font-weight: 500;
  margin: 12px 0;
}

body[theme-mode="dark"] .yw-qrcodemy-content-userinfo-name {
  color: var(--yw-text-primary);
}

.yw-sex-select {
  width: 98%;
  height: 100%;
  margin: 6px auto 1px auto;
  background-color: var(--yw-bg-base);
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
  padding: 12px 18px;
  border-radius: 12px;
}

.yw-sex-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.yw-sex-select-item:hover {
  background-color: var(--yw-bg-hover);
}

.yw-sex-select-item .checked {
  color: var(--yw-text-primary);
}

.yw-sex-select-item .sex {
}

.yw-meinfo {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--yw-bg-base);
  padding: 20px;
  overflow-x: hidden;
}

.avatar-label {
  position: relative;
  cursor: pointer;
}

.avatar-label .avatar-label-upload {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 100%;
  height: 100%;
}

.yw-meinfo-content {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.yw-meinfo-content::-webkit-scrollbar {
  width: 4px;
}

.yw-meinfo-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.yw-meinfo-content::-webkit-scrollbar-track {
  background: transparent;
}

.yw-meinfo-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.yw-meinfo-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 20px 0;
  background: var(--yw-color-theme);
  margin: 0 -20px;
}

.yw-meinfo-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.yw-meinfo-user-avatar {
  width: 82px;
  height: 82px;
  margin-bottom: 14px;
}

.yw-meinfo-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.yw-meinfo-user-avatar img.avatar-error {
  background-color: var(--yw-color-secondary);
  -o-object-fit: contain;
     object-fit: contain;
}

.yw-meinfo-user-info {
  text-align: center;
}

.yw-meinfo-user-info-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--yw-text-primary);
  margin-bottom: 8px;
}

.yw-meinfo-user-info-others {
  color: var(--yw-text-secondary);
}

.yw-meinfo-user-info-others ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yw-meinfo-user-info-others li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--yw-text-secondary);
}

.yw-meinfo-sections {
  padding: 0;
}

.yw-meinfo-sections .yw-list-item {
  padding: 10px 14px;
}

.yw-meinfo-sections .yw-section {
  margin: 0;
}

.sex-select-container {
  position: relative;
  background: var(--yw-bg-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
  margin-top: 1px;
}

.sex-select-row {
  position: relative;
}

.yw-listitem {
  position: relative;
}

.yw-meinfo-sex-select-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.yw-meinfo-sex-select-container {
  background: var(--yw-bg-base);
  border-radius: 8px;
  padding: 20px;
  min-width: 300px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.style_yw-popupmenus__RPJSa {
  background-color: var(--yw-color-theme);
  border-radius: 4px;
  box-shadow: -5px 5px 20px 0px #eee, 0px 20px 20px -15px #eee;
  display: flex;
  height: 30px;
  align-items: center;
  padding: 0px 0px;
}
.style_yw-popupmenus-item__0bjTZ {
  align-items: center;
  display: flex;
  margin: 10px 10px 10px 0px;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.style_yw-popupmenus-item__0bjTZ:first-child {
  margin-left: 10px;
}

.style_yw-popupmenus-comment__QgYwp {
  /* webpackIgnore: true */
  background-image: url(./icons/comment.png);
  background-size: cover;
}

.style_yw-popupmenus-comment__QgYwp:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAASAAAAACQMUbvAAAE4klEQVR4Ae2bTWwbRRSA39u1Exriv5iGqi2Nk0pIpRdUkBoQEmc4cEDZ/ABCCNQWOPRAKoTEBQ4cWolDhQQICcSB0iYO4sqBQ4UQVK0qQLSqKqCx2wpEkzqx07jQ2Pt4s83GZnfjsZEdjHkjJTPvb2fel7djZ7wGkCYEhIAQEAJCQAgIASEgBIRA4wSwVshlK/6EDfajADhUy+8/ayPIAdDZSHfok+SxXCEoj0BA16zNvUX6c5oAHgsK6jgd4uUQkHVPunDam5vhVSh5GW69/b+BoxIm2lEinJ57/q6IEqtbqFpQ4ytWtK9EtL+ix8Ng4KmK3Dkjg6ifgN4kgi1MaaC4tDLB2X1QnaEPkI24h4k6Pgh4MjWTf606oNPGs1bMZDjvqrxsgAe8+flvMRsSVU5zVeOOHBoE825iSH/L3VH7Abne0gugempAKkhDSQAJIA0BjVkqSABpCGjMUkECSENAY5YKEkAaAhqzVJAA0hDQmKWCNIB850Ea/0Dz1We3JUvFGz97jXwYNTc4U7jXq/fKGSv6DRDu8urDGB7elp6/6NVXyxkrdgQI9lXrnDHCoVQ6/6FP36CiKYDMm2VjBSgeMPetAJ1fRRBlmL74Eth8mKVphD0Eti+Wz3a6NZF1meUW02ASQAJIQ0BjlgrSAGrKJr1l+rf5hdE+30ZZjpj8QYG+9WD3cAhKvg05sfvgEqTfqHkB6o0fii3nX/c6JWDrTYDzXnXDclMAIfJrBkC+4dlXA/rTczcCYzVwVMzgx5k/uFM/nrbgkf+ZKLeYhpsAEkAaAhqzVJAA0hDQmKWCBJCGgMYsFSSANAQ0ZqkgAaQhoDFLBTUMCPmE1238kKI77NjeqOTIiVdyX03YV0Fk4i9rMAj2zD6XumNN7sCBTfSwm5aBcMkdu73vuGMguvNcNvfTdUaZ5IP0IVxeuDA7Ev1h9UjDjaunL/EhyPTATD5djzMRYXYsPsl/Q7Xgjalc9Rjw7fmcJfKpzUnvWgMXwkDG2fG417lRmS/OacPjg+nCF7rY7EjsVRvosM6vVXYugM/5Y6Invdf33WLKgT/LOmEijiNWHpH1BtYjcxXyJfDYr0/FB2r5XxlP7uVqfauWT6tsvECb6/WoCZGng+YIrCDXkSzLvApf3kcGDZWp/rLnSQ0o01FOertzLcQzKdj+CKbP+z4ny1mJWAHs7/kWSylfjv2W0DjixLX4F5/x5jb1hr7b/NH80npT1QS0XlA9+tmxvmGwS1/xnhJW/vxi8T7vRy95YzMjMf7SDFlKz9W22NWF92/9dDHr9fu35MBbrBmLGZzKneKn2Cfda/H+8mJ2NPGMK6s+a8X2u3AcvYkvtBMctaaWVZCTMP/KjMaOk01q01cVUjRMY++OqYVz2Ym+3VQqn+Fba5NjQ3yPN8mX1bidWssqyE2yh7r28b5yQclcLT1lu/zZ7xP9d9NKacqFwxvPj3Rn4hU3pp36lleQSjYzltzF+9FpBtKrZJ7UeZ91e4xFMEMPpqauOxCVrp1ayytIJauSZzhrj6ioN6FrEBAOtisctcYNAaQmUu+t0DDeUWO3oYEnmvEMj3u9VvQbBkgtfiC+c5L3o6+dRBAuRsLmgVYk1cxrbsgeVL1g9c8vFhcfioSNs+t907jaX8ZCQAgIASEgBISAEGgRgb8A57BPQY2qtgcAAAAASUVORK5CYII=);
}

.style_yw-popupmenus-like__4hHP4 {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-like__4hHP4:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAASAAAAACQMUbvAAAIdUlEQVR4Ae2bf2wcRxXH5+3enX/Q+hzXSRoTe8/9AVKTAFIFqkCQUgEqKDhSk3PitLSIP4qSUqCtRFW1IAMiEkGIVkUViNJSWvzr0rS9GtqKCqq2SDRQUYpBpaX1ndOaxDb2XUhs34+d4Tt3mfVmb++CHa99ze1KvnlvZnZn3mfnzczOjBnzL5+AT8An4BPwCfgEfAI+AZ+ACwFyiau6qPEb2xqzqdk7GOcZY8O6H9C9/8qsVCW1lSpoqeWI3l4tO31iUHB+l2Dsu8ljUz9f6rOWcl/VA0qM/Gg/wGxTxgHUtclo07eU7nVY1S6W2Nl0LeA84oSASgud2BXtseOHnWnLrVdtCzoSbfoII3a/MhhQXiOiUakDGpmM3SOE8PwFVyWgsd2tbQDwmBCsXgIhRik9VNdFmvZVqcsLaVeM9TRfVdS8+606QKNfjNSbZu5xAGiTZhMxE3/d7X2TbxiDM8NoRU9bOPJspyV7JFQdIJpN3Y/m8WFlLzHtNiOW/q3SGYlhJQsSW5XsVVhVgJLd4dvlKKWMhWs9YMRS9yhdhhoxq2NGF7TRnuaFXDWAkrvWbEOnu18ZCbf6g0Eb9yrdConQRxcv5Ako2auwKgAloy2XcZP3od8p1odorL6+4RqK/T3rNJxz+oAtbtwmeyKuOiAM5y2CmXGMS+dLC+FWs/jdfuHDxybcLRaftsW/ZJM9EVcVkOi9MmAyisG1LpbWyQkg3OaGzljqFTdr397V/EHGxS6VBmd7XMlehasKKDnyyt2Ac5UyTmjadzBiHVS6M8yZ4oCcJMp4DPcjHZtvedSZZ7l1z2ei5SqcjIZv5EL8VKXDtQ5hxNoJw61OWKXJcGxX83bT5FaLIdK3RWIzv7bn8UJelRY01t38Cc7Ejy2DiP5a31B/fTk4crnDNIU13CPf71YCjqzfigMa3d0c4YI/ig+qYAEQscm6YKFTPmkBcwi56ZNfQfdknIrOBFlwnyOLZ+qKApqIrj2PmSKO4by1YBGxnK7rO9r6UslyFoqbL6nDjPkWK53YT94bm/qnpXssuE60xnvaWuu0+ewFv5o+vlzlyy/vZHfzw/iM2KKeSYL2dQzMvKB0t3Ds2OT1AHqhTMMIx+Few8melk1ueRcTF8hr+bZNm9+k3ufyle4r6aTRee4UTAzABQRq9ALsimshETf60m9VelCltCN71l6az2V+iCd+XuXDl/m9kaGU9XWu4p0h1oRG0GufNRDnc6UO2HN4Yc+FQtrecq24BFAiGpbzkpKvZDxsBAbG9UAgvrF/6jB019HGXhE5CcTrkat/+3Bvsc8pVuxZg33maorFsKpR/pLulTw6MWvNsMtnPauUwnJKUNva3j/zqvNBJYBGo01PwJguZ0a7jqZ+FFO6J0nX4rwh/GznLxLz9nQR3RRK0Ds3kRDfBOw19jTIL2kh+ixa5Iwj3lXFCzuADvpmQCqsDblmWo5Iouc7Y+mtzkdVBIRW8jJuaIGRnc4bLZ0oDXfpiQzOPCXjjn5h/br5+bnfw6DLrDwQAHVcCO2uyOavP0S9vdyethqyiEb1BD3TzTjrU+XrOl3SMZh+U+kyrDyKCeqPxNIXYaTZQhrdCSsPg+jpriVEmJn8G+qhc5n5a+xwAPkkCunFx+f7Og+mHqwGOLKu0r07h473Y17+uqo7F9ShZBW6jmIqUYUdgzMjkOXf/sR1rRu0bE4uTdwAEB8r5CHWpPIC4HkWQaK/aXrw6o6BKXx1L9uAqIpalhAjaaMcj+SFLqGER0nEmUqNPDL1b+T5GRa30oBUBFTuJiHeKsIpl2H14zHHWqd8Qgtox5w1quxiztznmJ7cE14DOCFlVjAQOqpkFdY0IC4C6xUIOQldf/HeKaWrsKYBBfKmBQi90KTbAFLTgDgJCxDmdSX9j2xFNQ0Iq5MLgIj5gFS/okKs71qAMMT7gBQYKyRmAcKGmw/IAnNKwDxuAZDwXczJB7rdxfwWVApILLgYadx3MSchLGlZLmaK0s8Mmb9mh/np6JqwfY2J6gJ+C7K3oBM6v9TSiWWNzCddt7prtgWJPLtcAcKS6+vlln9rFxBbAARX+4eC5QxrEtDkl1rPx0rijgUYtmN9C5EFadELZo7735XqieM5uVPbIisP95p9T1Og7IGJmmtB7+xuaScmbrPerMYG1z4w9V9Ldwg1BUiuIObM/NNY+7lAcsCGwnSDXneHg8lpas0AkttRIiuGHTsut67vn3Cd/yhKNQEo0R3eMTc/J7ewP6oMxzbWfcZQ6iGllwvP6U5ankMyOb9VcLH9NAAaHYgMpW8/La6Mcs4BGt/TbGRy4nOwdy/gWCdJpP3Ys8tj1LrTGEpjO/v/u961gLCWQ0d61m7gjEdEnr+fNPFxbOFcmcnyTlfTif7EdPqyMZD6i2t6mcglA8I2baNzF9pZBt7WFhyGuNsZvyidqB7LoSiLGlBeIxbXG7HZtwEbl4b9Y1OU2+2X2+UafT8ymDq0qHJPZV4UIHkMNy94Fyq5XQh++ZkKxJbuRXirXztTvorpoFDcGC7+Fl4KRKW53YvhexRLGU/g1OwvI4tsMc7nVQSEqoXwpj6Fk1Rd6Oi6ciY3ig8oqd5rtgeP2mTPRcCYA8M3SGMv48TSHxnTXzRi02W/rRZboYqAMOP8HueybysBUihHHmnBktIhCgp5SKpwGWjKOKV2E1ziQyru7ELCvyPwLEBk4Fo4TEVTmJtMQp/QNW20rf8/b0N2r+DZFVy4uyIglAo4zotehU/HNeLx9oH0n52VO6Xf57zLM33ApYrLWFgJIHSsk8rrC+XgJCqOiDwvoXCNxTsHUgmr/EFvK2eVs4pCCaCgrn87x3k9DjeCixgOC/03LQdn0qtYR79on4BPwCfgE/AJ+ASWROB/N1Lg2G2c6yIAAAAASUVORK5CYII=);
}

.style_yw-popupmenus-forward__z6ic- {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-forward__z6ic-:hover {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-delete__WKOrV {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-delete__WKOrV:hover {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-mulselect__tPsDM {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-mulselect__tPsDM:hover {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-revoke__o2yw2 {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-revoke__o2yw2:hover {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-favorites__UWFW\+ {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAB/lJREFUeF7tnAesrEUVgD96UaoIwYj0ohBpggZQkF4NGFCBBOkIKE2pwUACBJDelWpEBaRjoSMGla5BSigqYlQgaCRKDRDI93LmZt7/7t6/zL27e9+7J9ncfbsz85/5dv45Z845/5uNKRmTwGxTfMYmMEyAPgX8FXhrmH60YQF0NfBV4P/AicD3hgXSMAA6FTiiAmQX4KphgDRoQGsBjwDq8TKwREDxs3WmAMGFwP4B4gRg3wzS3sBlg4Y0yBX0aeBRYM7Ye9ykBfTdgPIg8LlZGdB5wDcDwJnAt4GPA38EFovP9wB+OEhIg1pBq8bqmQd4F1gNeCZAnAQcE+9/D6w/KwI6Gzg4Jv79bB/yo6VjFS0S3+8GXDkoSINYQavE6pk/Jq0l87bK5RTgyPjgPuALsxKgM4DDYsI/Ar4+yuSXC2gLxne7Aj8dBKR+r6AVY/UsEJP9PPDbHhM/DfhOfPdrYONZAZBHiMNjotcCXxlj0isBfwA+FG2+BlzTb0j9XEHeNnrIafPdArijZsKa/0OjzV3AZjMzoJOBo2KCvwC2azDZT8Yqmjfa7ghc36DfuDXp1wrSdLt6kgP4ZeDGhrM4Bzgo2t4ObNmw37g06xcgz1nHhsZ3A5u20F4n0r1oruizA3BTi/5FTfsByOODqyed1LuEMs4HDoyZ/grYpmjWLTr3A9DxwHGhU9ejwxrhHswe43wJ+HmLeXZuOtGANgJuAzxzKXsBl3fU1iPJftH3yXARnuo4VuNuEwnIjVhnT/Ou1Pk9dUqvGU5lOqIIySPJj+s6lnw/HoA+ASxbeXneyiOCbwJpYiX6uiL1qnPRP3oe+Fv89f1fgFdKLpT6NgE0R0zelVAF4b+T6e6lj0ExA/IqPR6imTfS+LGawV7MgAnvz9nrpaaKVAFtm0HIgaSzU9NxbecmqkN4cZtODdsuGdHHnQBjS23l1VhxQvOHS/DurQ6UAG0ffsraLa9ksMtQhfvBc8Cz2V9vq37IooCH4NFeC7VUQP0PAPTVpomAjA17Jkp+ymhjej8LwtcTGYj/tlRgEM2Ndets+lo5A/nhHsoIyXYjgPKNz1UgBD1X//4JaHy/DmL2hdf04Jzg6Yim23Vk6/GNTpiWYeG4mKbz6MILT6burrCfZXBMEpgsGFlBvjkEOCub1blZzHgyTbatrsK5DjBqoLiXaqi0etMB8h9mEswoJLkU2KftFSdRe+H8ElgmdHY70R15Op9D1cwb4tT7TWIc2HjwzCbCcVtZPCbmnisczf10Mpqj+C3AWyyJoQVDDDOLCOcBIPl2DwccPfAZpJcnbQr4B1lr3QBDpJNdhPNYpLudi6BcOX/vNbGxjhq7A1dkHc0+mIWYrCIcN+Ekzkc4/xprQnVnsZ0r+Sjv1bbe9jAArcL5TcCx5GZMqQNkZ8MWVoClkKe7fDKLdeMPw/dVOPcEnH83Ua4JIMcxxCmk5J57zxqIH3apwnEvNb/W+IjUFJAgzEkJycOh4i/w0SEm5Akhz/nfmtVBNla7DSAHtYhASIYblDeyzGfji/ah4XrA77LrGHZxQ1bfVtIWkIN/NiAlD9TPuozTStEWjatRx5sDztstxhhp2nVixoetQk1hgdJ4cxfdR+vjyrZ0b6n40iysK+e9rhfoCsjrWddjGidlLEwlu5QHKXmK6X7AW61ISgB54TzfbnLPY8og5aEsWWDliCu7SEoBfQbwLKOY/9qqSJvyzq9lRqN0btO0KR3E2h2VUgx4f7F8jkUjvJ/1Lp3buADSkqVTcF9z5j0w+qxHcmZNSY0EvrpiL6W8dQSdvL61h6lkrqs+pf0s+NwgBtH790crklJAltOlJ3NK8u5Fk8g651UgPiCTB/86XaMUkOEQwyKKJlXTOkjx+Y5LQoHpgu9dlSoFlJtVUyhmLAcp1gOok6J1XbdUmVJAyay6UacqjlKdSvobRv1fDPB6tmF3HrMEUG7Bhikka+Y3JQCLLVkJoNyCDYMXnVbJTwDL/JRiS1YCKLdgpm19OG4YJNer2JKVAMotmI8JVAubmsDywOtpe8MoKrCP9QGmmu6MusQm4+RtPDTfMl6WrARQsmC694YZagPg2SwsVXHV+UCdBVqjieNeBFib+HgLSo5thca4WLISQMmCTVcuUjMRS2yE4isVS9TN3UCXoHylidf1+WdUoBVbsq6AcgvW5LEC6xNdMVbMWzedxOD5BVGNZtrXMl+DcHvGKwfhOUtI7nUv1BDyiJEiC0WWrCug3IKl50176fyNqBSxsDPJOwFGODPkw6OR+5JQLbPL5T8Byr69apdOj2dg7VdkyboCyi2Fj3W7T1TFogcfu6w+/24BppOrPmXYC7DlKIKqPqNhkaYrShejmsbJjxxFlqwroNyCbQKYjEtiFbz1RtXYkM96CcYTdxcxnyWodFpPY3i7edsJKmUtbJOuU3Qm6wooWTA30BWAfwQQwQgoF/cDwRSHHmJQa5YEtXrlOroHXkdQngtNbs5XeibrCihZMN16N1TBJO816e0vqMIT8ZTg3AFJUMtXQFmgICTDL4aEiyxZV0AptHlD5O5zHd1bBNOP/1biIxmoVAyVdLHQQkdU6TrPzh3zA2FSSGskGF9aqX6KdQL6Vq4ob6tcDLtq6jtJV7KbR7TOGmuXtOlowTQuCuikbX0nS3qFZB2T4Rdvb1M/nfe/roCSqlZPTPgjSfVcJq5FKaCJ02xIRp4CVPNDTAGqAfQB5mVuWFT3ffkAAAAASUVORK5CYII=);
  background-size: cover;
}

.style_yw-popupmenus-favorites__UWFW\+:hover {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.style_yw-popupmenus-copy__erJau {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAABA5JREFUeF7tnFuITVEYx3/zxJMiL0LuNZOQ3EVRLjMjD+SaEokpGUUeyAMeREkKKXdKuRWl3KIINeTygCJ34sEL5U0p+tfeWmedc+acOXutM/vsWavOy9l7f9+3fvvb397rW2t9dRRu3YGB0W8o0LvIeZ3x9xfgA/Ap+nm1oa6A9NXAVmCAV81uhN8DNgJP3YjLl2IDOgms8KXMo9wW4IgP+SagXcBmH0qqJHMi8Mi1rhjQGOCJJfwUcDB63n+6VpxAXh9gMLAHmGTI+Q70A/4kkJ13aQzoFjDDODofuOxSkSdZ24Fthuy9wCaXugRoAvDQELoDkOJaaVeAuZGxX4H+Lg0XoFZgvyF0JPDCpRLPstYAhw0do4DnrnQK0BlgWSRQ3xaDXAmvkhx9p701dOkz5Zgr3QJ0B5gWCbwLTHclvIpy/voKEQFQibuYFUAvgeFRXxcBF115b1YA6a2r2KMhx1pAbzMnLSuAnMAoJCQA6iIxKHiQNwLBg5KhDTEoRR7UEA2MlcpNS9PQSjmkV8UM8u1B3YB9QFOU304LGNsOgboObAB+mwd9AlocpUF7pJVKAbt+AcoOnI+P+QI0G7hRQ2BsUxuBm/rTByClSzQtY7bHwCFA2QK5c1qa4qEyGRqejLOMUlr3ow9AV4FmQ1mtZCjt9O01YI5rQKL+3oBzDliaFncpw46zwBLjvCGuASnxrwmAuE0FHpRhWFpOmQLcN4yZ6RqQnR/WNMy3tPS+DDv6WqmSFteA7Oe40NR2GXZ26ik56dsAKP9eBEAl/DMACoCShbDgQcGDggclIxA8KBm/EIOCBwUPSkYgeFAyfiEGBQ8KHpSMQEc9yFxdr3Sp1vxV2jKZD1plLXrUDOjrCgllEtBo4JkB5AQgaJW0TAISCC0k14LyuM2yku/lwsosoHnAJYvC7mg7wjvgR5mEMgtI/T8NLC8DxHFA8ATObpkGpM5qO5S2RZVq64EDGQV0AVgY9a2x0LSM4o+2QQ1rh9JkoC2jgDQTvCB6QnYWm7fSnlVNI8e/XgYMLTjSWppCLQuPWE6/XE/sBUAlglMAFACVen+1fzx4UBfwIK1I0WZhbYhpC0E6/46be2CbA6B8QHkp12RRJ/fqLMSgAKiERwRAnQlonTWI1RAlTWUtSoWTnlZqp9V1kNYKdXOcNtZn6ZpSva3guF3DpMk1oHpr54wKpKyswNDOusQuD9TgGpCyAEr4m8WZaqVQip1V/QzUuwakO6/t2XaxI73+ldJNY02QEYBuol3QRWu+j/oAJEjFKllVpe5YB57PuE6bfcn/0OALkBTWakUr5du3xMR8ApIOvRWk0Cze1IEbXNVTb0c5+ZyCcb4BxT3UnNv4aO5N+yHS0t5EnyGCUrCS3j9tpBamGTRC8QAAAABJRU5ErkJggg==);
  background-size: cover;
  width: 16px;
  height: 16px;
}

.style_yw-popupmenus-copy__erJau:hover {
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.yw-search-box {
  display: flex;
  min-width: 200px;
  height: 45px;
  background-color: #f4f4f5;
  border-radius: 25px;
}

body[theme-mode="dark"] .yw-search-box {
  background-color: var(--yw-color-secondary-2);
}

.yw-search-icon {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.yw-search-input {
  margin-left: 10px;
  max-width: 100px;
}

.yw-search-input input {
  flex: 1 1;
  height: 32px;
  font-size: 12px;
  line-height: 18px;
  background-color: transparent;
  color: #1f2329;
  padding: 0;
  outline: none;
  border: none;
  height: 100%;
}

body[theme-mode="dark"] .yw-search-input input {
  color: var(--yw-text-primary);
}

.yw-search-input .semi-input-wrapper {
  height: 100%;
  background-color: var(--yw-color-theme);
}

body[theme-mode="dark"] .yw-search-input .semi-input-wrapper {
  background-color: var(--yw-color-secondary-2);
}

.yw-search-input .semi-input-wrapper-focus {
  border: none !important;
}

.yw-search-input .semi-input-wrapper-focus:active {
  border-color: none !important;
}

.yw-smalltableedit {
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

.yw-smalltableedit-content-item {
  display: flex;
  padding: 5px 15px;
  background-color: var(--yw-bg-secondary);
}

.yw-smalltableedit-content-item-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.yw-smalltableedit-content-item-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.yw-smalltableedit-content-item-name {
  margin-left: 15px;
  max-width: 200px;
  line-height: 40px;
  color: var(--yw-text-item);
}

.yw-smalltableedit-content-item-action {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.yw-layout {
  --yw-height-layout-tab-min: 60px;
  --yw-layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
  --yw-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.yw-layout-tab {
  height: 100%;
  background-color: var(--yw-bg-secondary);
  border-right: var(--yw-line);
  padding: 30px 12px 20px;
}

.fullscreen-mode .yw-layout-tab {
  padding: 20px 12px;
}

.yw-layout-content {
  width: 100%;
  height: 100%;
  display: flex;
}

.yw-layout-content-left {
  height: 100%;
  min-width: 420px;
  background-color: var(--yw-color-secondary);
  border-right: var(--yw-line);
}

.yw-layout-content-right {
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  flex: 1 1;
}

@media screen and (max-width: 640px) {
  .yw-layout-content-right {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
    transition: transform var(--yw-layer-transition);
  }

  .yw-layout-content:not(.yw-layout-open) .yw-layout-content-right {
    transform: translate3d(100vw, 0, 0);
  }

  .yw-layout-content-left {
    width: 100%;
  }
}

.yw-navheader {
  width: 100%;
  height: var(--yw-viewqueueheader-height);
  border-bottom: var(--yw-line);
}

.yw-navheader-content {
  padding: 0px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yw-navheader-content-left-title {
  font-size: 18px;
  font-weight: 500;
}

body[theme-mode="dark"] .yw-navheader-content-left-title {
  color: var(--yw-text-primary);
}




.yw-friendadd {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--yw-bg-base);
}

.yw-friendadd .yw-search-box {
  border-radius: 0px;
  background-color: var(--yw-color-theme);
}

.yw-friendadd .yw-search-input {
  max-width: 100%;
}

.yw-friendadd .yw-search-input input {
  width: 250px;
}

.yw-friendadd-content-qrcode {
  margin-top: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[theme-mode="dark"] .yw-friendadd-content-qrcode {
  color: var(--yw-text-primary);
}

.yw-friendadd-content-qrcode img {
  margin-left: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* 保存的群组件样式 - 参考会话列表样式 */

.yw-groupsave {
  width: 100%;
  height: 100%;
  background-color: var(--yw-bg-base);
  display: flex;
  flex-direction: column;
}

.yw-groupsave-content {
  width: 100%;
  overflow-y: auto; /* 修复滚动问题 */
  flex: 1 1; /* 适应父容器高度 */
}

/* 重置ul默认样式 */
.yw-groupsave-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 群组列表项样式 - 参考会话列表 */
.yw-groupsave-content li {
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
  padding: 15px 14px; /* 与会话列表保持一致 */
  display: flex;
  align-items: center;
  gap: 14px; /* 头像与标题间距 */
  background-color: transparent; /* 默认透明背景 */
  transition: background-color 0.2s ease; /* 平滑过渡效果 */
}

.yw-groupsave-content li:last-child {
  border-bottom: none;
}

/* hover状态 - 参考会话列表 */
.yw-groupsave-content li:hover {
  background-color: var(--yw-bg-hover);
}

/* 选中状态（如果需要的话） */
.yw-groupsave-content li.selected {
  background-color: var(--yw-state-selected-bg);
}

.yw-groupsave-content li.selected:hover {
  background-color: var(--yw-state-selected-bg);
}

/* 深色主题支持 */
body[theme-mode="dark"] .yw-groupsave-content li {
  background-color: var(--yw-color-secondary);
}

body[theme-mode="dark"] .yw-groupsave-content li:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

body[theme-mode="dark"] .yw-groupsave-content li.selected:hover {
  background-color: var(--yw-state-selected-bg);
}

/* 头像容器样式 */
.yw-groupsave-content-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 移除原有的img样式，让WKAvatar组件自己处理 */

/* 标题样式 - 参考会话列表 */
.yw-groupsave-content-title {
  flex: 1 1;
  font-size: 1rem; /* 16px，与会话列表保持一致 */
  line-height: 1.6875rem;
  font-weight: 400; /* 调整字重 */
  color: var(--yw-text-primary); /* 使用主要文本颜色 */
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0; /* 确保可以收缩 */
}

/* 深色主题下的标题颜色 */
body[theme-mode="dark"] .yw-groupsave-content-title {
  color: var(--yw-text-primary);
}

/* 无障碍支持 */
.yw-groupsave-content li:focus {
  outline: 2px solid var(--yw-color-primary);
  outline-offset: -2px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .yw-groupsave-content li {
    padding: 12px 10px;
  }

  .yw-groupsave-content-title {
    font-size: 0.9rem;
  }
}

/* 减少动画效果（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  .yw-groupsave-content li {
    transition: none;
  }
}

.yw-newfriend {
  width: 100%;
  height: 100%;
  background-color: var(--yw-bg-base);
  position: relative;
}

/* 修复：确保新朋友组件内不显示联系人索引导航条 */
.yw-newfriend .yw-contacts-index-navigation {
  display: none !important;
}

.yw-newfriend-content {
  height: calc(100% - var(--yw-height-viewqueueheader));
  width: 100%;
  overflow-y: auto;
}

.yw-newfriend-content li {
  display: flex;
  width: 100%;
  height: 80px;
  background-color: var(--yw-bg-secondary);
  align-items: center;
}

.yw-newfriend-content-avatar {
  margin-left: 15px;
}

.yw-newfriend-content-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.yw-newfriend-content-title {
  margin-left: 15px;
  font-size: 15px;
  font-weight: 500;
  color: var(--yw-text-item);
}

.yw-newfriend-content-title-remark {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.yw-newfriend-content-action {
  margin-right: 10px;
  margin-left: auto;
}

.yw-main-modal-organizational-group-new .semi-modal-body-wrapper {
  margin: 0;
}
.yw-main-modal-organizational-group-new .semi-modal-close {
  display: none;
}
.yw-main-modal-organizational-group-new .semi-modal-body {
  width: 100%;
  height: var(--yw-modal-body-height);
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  background-color: white;
  overflow: hidden;
  gap: 12px;
}
.yw-main-modal-organizational-group-new .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.yw-organizational-group-new-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yw-organizational-group-new-header-title {
  font-size: 16px;
  font-weight: bold;
}

.yw-organizational-group-new-content {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 8px;
  border: var(--yw-line);
}

.yw-organizational-group-new-left {
  width: 50%;
  height: 100%;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  border-right: var(--yw-line);
}

.yw-organizational-group-new-left .group-new-left-main {
  flex: 1 1 auto;
  overflow-y: auto;
}

.yw-organizational-group-new-left .group-new-left-search {
  margin-bottom: 12px;
}
.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input {
  border: var(--yw-line);
  background-color: transparent;
  border-radius: 6px;
}

.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input
  .semi-input-default {
  border-radius: 6px;
}
/* 好友选择 */
.friend-opt-main .semi-checkboxGroup-vertical {
  gap: 0;
}
.group-new-left-main .friend-opt .organization-name {
  display: flex;
  align-items: center;
  padding: 8px;
  color: var(--semi-color-text-0);
  cursor: pointer;
}
.group-new-left-main .friend-opt .organization-name:hover {
  background-color: var(--yw-bg-secondary);
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item {
  display: flex;
  align-items: center;
  padding: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--semi-color-text-0);
  row-gap: 0;
  min-width: 0;
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item:hover {
  background-color: var(--yw-bg-secondary);
}

.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item .semi-checkbox-content {
  min-width: 0;
}

.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item-name {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 覆盖svg颜色 */
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item svg path {
  fill: var(--yw-color-theme) !important;
}

/* 组织架构选择 */
.group-new-left-main .organizational-opt {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.group-new-left-main .organizational-opt-header {
  height: 44px;
  margin-bottom: 12px;
  border-radius: 4px;
}
.group-new-left-main .organizational-opt-header .yw-viewqueueheader {
  background-color: var(--yw-bg-secondary);
  height: 100%;
}
.group-new-left-main .organizational-opt-main {
  flex: 1 1 auto;
  overflow-y: auto;
}
.organizational-tree {
  width: 100%;
  height: 100%;
}
.organizational-tree .semi-input-wrapper-focus {
  border: var(--yw-state-default-border) solid 1px;
}
.organizational-tree .semi-input-wrapper-focus:active {
  border: var(--yw-state-default-border) solid 1px;
}
.organizational-tree .semi-tree-option-list {
  padding-top: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.organizational-tree .semi-tree-option-list li.semi-tree-option {
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}

.semi-checkbox-indeterminate .semi-checkbox-inner-display,
.semi-checkbox-checked .semi-checkbox-inner-display {
  background: var(--yw-color-primary);
  box-shadow: inset 0 0 0 1px var(--yw-color-primary);
}

.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--yw-bg-hover);
  box-shadow: inset 0 0 0 1px var(--yw-color-primary);
}

.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--yw-color-primary-hover);
  border-color: var(--yw-border-primary);
  color: var(--semi-color-white);
}

.organizational-tree .semi-tree-option-list-block .department-icon {
  color: var(--yw-border-primary);
}
.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected
  .department-icon {
  color: #fff;
}

.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected {
  background-color: var(--yw-color-theme);
  color: #fff;
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected:hover {
  background-color: var(--yw-color-theme);
  color: #fff;
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected
  .semi-tree-option-expand-icon {
  color: #fff;
}

.yw-organizational-group-new-right {
  width: 50%;
  height: 100%;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
}
.yw-organizational-group-new-right .organizational-group-new-right-title {
  font-size: 15px;
  font-weight: bold;
}
.yw-organizational-group-new-right .organizational-group-new-right-body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 12px 0;
}
.yw-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item {
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  word-break: break-word;
  color: var(--yw-text-primary);
}

.yw-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .user-info {
  display: flex;
  align-items: center;
}

.yw-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon {
  display: flex;
  align-items: center;
}

.yw-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon
  .semi-icon {
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon
  .semi-icon:hover {
  background-color: rgb(112, 117, 121, 0.08);
}

.organizational-group-new-footer {
  display: flex;
  justify-content: flex-end;
}

.friend-opt-empty,
.organizational-opt-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.yw-blacklist {
  width: 100%;
  height: 100%;
  background-color: var(--yw-bg-base);
}

.yw-blacklist-content ul li {
  height: 80px;
  width: 100%;
  background-color: var(--yw-bg-secondary);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.yw-blacklist-content-avatar {
  margin-left: 15px;
}

.yw-blacklist-content-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.yw-blacklist-content-title {
  margin-left: 15px;
  font-size: 15px;
  font-weight: 500;
  color: var(--yw-text-item);
}

.yw-contacts {
  width: 100%;
  height: 100%;
}

.yw-contacts-content-header {
  width: 100%;
  background-color: var(--yw-color-secondary);
}

.yw-contacts-content {
  width: 100%;
  height: calc(100% - var(--yw-viewqueueheader-height));
  overflow: auto;
}

.yw-contacts-content-contacts {
  width: 100%;
  /* height: calc(100vh - 335px); */
  height: calc(100vh - 270px); /* 减去头部和搜索框的高度 */
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* 修复：联系人列表容器布局 */
.yw-contacts-list-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.yw-contacts-section-item-index {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--yw-color-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}

body[theme-mode="dark"] .yw-contacts-section-item-index {
  color: var(--yw-text-primary);
  background-color: var(--yw-color-secondary);
}

/* 修复：隐藏联系人列表的滚动条 */
.yw-contacts-content-contacts .ReactVirtualized__List::-webkit-scrollbar,
.yw-contacts-content-contacts *::-webkit-scrollbar {
  display: none;
}

/* 兼容Firefox */
.yw-contacts-content-contacts .ReactVirtualized__List,
.yw-contacts-content-contacts * {
  scrollbar-width: none;
}

/* 兼容IE */
.yw-contacts-content-contacts .ReactVirtualized__List,
.yw-contacts-content-contacts * {
  -ms-overflow-style: none;
}

/* 修复：右侧字母索引导航条样式 */
.yw-contacts-index-navigation {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 8px 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-height: calc(100vh - 200px); /* 使用calc确保不溢出 */
  overflow: hidden; /* 改为hidden，通过JS控制显示 */
  min-width: 32px;
  transition: all 0.3s ease; /* 添加过渡效果 */
  /* 确保在小屏幕下不会超出视口 */
  max-width: 40px;
}

body[theme-mode="dark"] .yw-contacts-index-navigation {
  background: rgba(40, 40, 40, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.yw-contacts-index-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  border-radius: 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 2px 0;
  position: relative;
  transition: all 0.2s ease;
}

.yw-contacts-index-item:hover {
  background-color: rgba(0, 122, 255, 0.15);
  color: #007AFF;
}

.yw-contacts-index-item:active {
  background-color: #007AFF;
  color: white;
}

.yw-contacts-index-item.active {
  background-color: #007AFF;
  color: white;
  font-weight: 700;
}

body[theme-mode="dark"] .yw-contacts-index-item {
  color: #999;
}

body[theme-mode="dark"] .yw-contacts-index-item:hover {
  background-color: rgba(0, 122, 255, 0.2);
  color: #007AFF;
}



/* 响应式优化 - 动态调整字母项大小 */
@media screen and (max-height: 800px) {
  .yw-contacts-index-navigation {
    max-height: calc(100vh - 200px); /* 更精确的高度计算 */
    padding: 6px 3px;
  }

  .yw-contacts-index-item {
    width: 16px;
    height: 16px;
    font-size: 11px;
    margin: 1px 0;
  }
}

@media screen and (max-height: 600px) {
  .yw-contacts-index-navigation {
    max-height: calc(100vh - 180px);
    padding: 4px 2px;
  }

  .yw-contacts-index-item {
    width: 14px;
    height: 14px;
    font-size: 10px;
    margin: 0.5px 0;
  }
}

@media screen and (max-height: 480px) {
  .yw-contacts-index-navigation {
    max-height: calc(100vh - 160px);
    padding: 3px 2px;
  }

  .yw-contacts-index-item {
    width: 12px;
    height: 12px;
    font-size: 9px;
    margin: 0px;
  }
}

/* 超小屏幕优化 */
@media screen and (max-height: 400px) {
  .yw-contacts-index-navigation {
    max-height: calc(100vh - 140px);
    padding: 2px 1px;
  }

  .yw-contacts-index-item {
    width: 10px;
    height: 10px;
    font-size: 8px;
    margin: 0px;
  }
}

/* 极小屏幕优化 */
@media screen and (max-height: 350px) {
  .yw-contacts-index-navigation {
    max-height: calc(100vh - 120px);
    padding: 1px;
  }

  .yw-contacts-index-item {
    width: 8px;
    height: 8px;
    font-size: 7px;
    margin: 0px;
    border-radius: 2px; /* 小尺寸下使用小圆角 */
  }
}

/* 针对您图片中的情况 - 高度约700-900px的设备 */
@media screen and (min-height: 700px) and (max-height: 900px) {
  .yw-contacts-index-navigation {
    max-height: calc(100vh - 250px); /* 更保守的高度限制 */
    padding: 6px 3px;
  }

  .yw-contacts-index-item {
    width: 15px;
    height: 15px;
    font-size: 10px;
    margin: 1px 0;
  }
}

/* 强制限制最大高度，防止任何情况下的溢出 */
.yw-contacts-index-navigation {
  /* 使用 min() 函数确保取最小值 */
  max-height: min(70vh, calc(100vh - 200px)) !important;
}

/* 确保每个项目都正确填充可用宽度并不溢出 */
.yw-contacts-section-item {
  box-sizing: border-box;
  width: 100%;
  padding-right: 35px; /* 为索引导航条保留空间，不再需要为滚动条保留空间 */
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
}

/* .yw-contacts-section-item:hover {
    background-color: var(--yw-color-hover);
    border-radius: 10px;
} */

.yw-contacts-section-item-selected {
  background-color: var(--yw-state-selected-bg);
  color: var(--yw-state-selected-text);
}

.yw-contacts-section-item:hover {
  background-color: var(--yw-state-hover-bg);
}

.yw-contacts-section-item-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.yw-contacts-section-item-name {
  margin-left: 15px;
}

body[theme-mode="dark"] .yw-contacts-section-item-name {
  color: var(--yw-text-primary);
}

.yw-contacts-content-fnc {
  width: 100%;
}

.yw-contacts-content-header .yw-search-box {
  background-color: var(--yw-color-theme);
  width: 100%;
  border-radius: 4px;
}

#root {
  width: 100%;
  height: 100%;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: var(--yw-text-primary);
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:root {
  --sider-width: 220px;
}

.yw-main {
  width: 100%;
  height: 100%;
  display: flex;
}

.yw-main-content {
  width: calc(100% - 220px);
  width: calc(100% - var(--sider-width));
  height: 100%;
  background-color: var;
}

.yw-main-sider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: 100%;
}

/* Header styles */
.yw-main-sider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  height: 64px;
  border-bottom: var(--yw-line);
}

.yw-main-sider-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yw-main-sider-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.yw-main-sider-setting-menu-btn {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important; /* 确保始终显示为可点击状态 */
  border-radius: 10px;
  background: var(--yw-bg-base);
  color: var(--yw-text-secondary);
  transition: all 0.2s ease;
  pointer-events: auto !important; /* 确保始终可点击 */
  border: var(--yw-line);
}

.yw-main-sider-setting-menu-btn:hover {
  background: var(--yw-bg-hover);
}

.yw-main-sider-logo-img {
  width: 30px;
  height: auto;
}

.yw-main-sider-logo-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--yw-text-secondary);
}

.yw-main-sider-content {
  flex: 1 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.yw-main-sider-avatar {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
  margin-top: auto;
}

.yw-main-sider-avatar-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.yw-main-sider-avatar-edit {
  position: absolute;
  top: 32px;
  right: 2px;
}

/* 最多显示两行 */
.yw-main-sider-avatar-name {
  max-width: 48px;
  font-size: 12px;
  color: var(--yw-text-secondary);
  text-align: center;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yw-main-sider-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.yw-main-sider-item {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  color: var(--yw-state-default-text);
  border-radius: 10px;
  margin-bottom: 10px;
  /* border: 1px solid var(--yw-state-default-border); */
}

.yw-main-sider-item::last-child {
  margin-bottom: 0;
}

.yw-main-sider-item.selected {
  background: var(--yw-color-primary);
  color: var(--yw-text-menu-selected);
}

.yw-main-sider-item:hover {
  background: var(--yw-color-primary-hover);
  color: var(--yw-text-menu-selected);
  /* border: 1px solid var(--yw-state-hover-border); */
}

.yw-main-sider-item.selected svg path,
.yw-main-sider-item:hover svg path {
  fill: var(--yw-text-menu-selected);
  stroke: var(--yw-text-menu-selected);
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.yw-main-sider-item img {
  width: 24px;
  height: 24px;
}

.yw-main-sider-setting {
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.yw-sider-setting-position-re {
  position: relative;
}

.yw-icon-bar {
  width: 24px;
  height: 2px;
  margin: 5px 10px 0;
  background-color: #999;
}

.yw-icon-bar:nth-child(2n-1) {
  transform: rotateZ(0deg);
  transition: background-color 0.2s, transform 0.2s;
}

.yw-main-sider-setting.collapsed .yw-icon-bar:nth-child(1) {
  top: 7px;
  transform: rotateZ(45deg);
}

.yw-main-sider-setting.collapsed .yw-icon-bar:nth-child(2) {
  background-color: transparent;
}

.yw-main-sider-setting.collapsed .yw-icon-bar:nth-child(3) {
  top: -7px;
  transform: rotateZ(-45deg);
}

.yw-sider-setting-list {
  position: absolute;
  left: 100%;
  bottom: 0;
  z-index: 1001; /* 增加层级确保在最上层 */
  width: 140px;
  box-shadow: rgb(0 0 0 / 50%) 2px 5px 8px;
  color: var(--yw-text-secondary);
  background-color: var(--yw-bg-secondary);
  border-radius: 4px;
  padding: 10px 0;
  transform: scale(0);
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.2, 0, 0.2, 1) !important;
  transform-origin: left bottom;
  pointer-events: auto !important; /* 确保菜单项可点击 */
}

.yw-sider-setting-list.open {
  transform: scale(1);
}

.yw-sider-setting-list li {
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  cursor: pointer !important;
  pointer-events: auto !important; /* 确保菜单项可点击 */
}

.yw-main-sider-item-badge {
  position: absolute;
  top: -2px;
  right: 2px;
}

.yw-main-sider-item-badge-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: #dd3939;
  border-radius: 50%;
}

.semi-badge-danger.semi-badge-solid {
  background-color: var(--yw-color-primary);
}

.yw-versioncheckview-updateinfo {
  font-weight: 500;
}

.yw-versioncheckview-updateinfo li {
  margin-bottom: 10px;
}

.yw-versioncheckview-tip {
  border-top: var(--yw-line);
}

.yw-versioncheckview-tip-title {
  margin-top: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}

.yw-versioncheckview-tip-content {
  margin-bottom: 40px;
}

.yw-versioncheckview-tip-content li {
  margin-bottom: 10px;
}

.yw-main-sider-setting-badge {
  position: absolute;
  right: 5px;
  top: -10px;
}

.yw-main-sider-modal .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.yw-main-sider-modal .semi-modal-close {
  display: none;
}

.yw-main-sider-modal .semi-modal-body-wrapper {
  margin: 0px;
}

.yw-main-sider-meinfo .semi-modal-body {
  height: var(--yw-modal-body-height);
}