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

/* 亮色 */
::-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;
}

@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;
  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;
}

.mergeforward-media {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.mergeforward-media .yw-multi-media-container {
  max-width: 450px;
}

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

/* 修复图片显示问题：限制为 70vh，保持等比contain */
.yw-mergeforwardmessagelist img {
  max-width: 100%;
  max-height: 70vh;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.yw-mergeforwardmessagelist .yw-multi-media-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 视频容器样式 */
.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;
}

.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;
}

/* 通用内容样式 */
.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);
}

/* 多媒体内容样式 */
.yw-multi-media-container {
  min-width: 200px;
  max-width: 400px;
}

.yw-multi-media-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--yw-text-primary);
  margin-top: 8px;
  line-height: 1.4;
  word-break: break-word;
  white-space: break-spaces;
}

.yw-multi-media-grid-custom {
  border-radius: 8px;
  overflow: hidden;
}

.yw-multi-media-row {
  display: flex;
  gap: 2px;
}

.yw-multi-media-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-color: #f5f5f5;
  aspect-ratio: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multi-media-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.yw-multi-media-video {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multi-media-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
}

.yw-multi-media-video-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  font-family: monospace;
}

.yw-multi-media-loading,
.yw-multi-media-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #666;
  font-size: 12px;
}

.yw-multi-media-error {
  color: #999;
}

.yw-multi-media-more {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

/* 多媒体预览模态框样式 */
.yw-multi-media-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multi-media-preview-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multi-media-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 1000;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.yw-multi-media-preview-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.yw-multi-media-preview-prev {
  left: 16px;
}

.yw-multi-media-preview-next {
  right: 16px;
}

.yw-multi-media-preview-nav::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  opacity: 0.9;
}

.yw-multi-media-preview-prev::after {
  transform: rotate(-135deg);
  right: 12px;
}

.yw-multi-media-preview-next::after {
  transform: rotate(45deg);
  left: 12px;
}

.yw-multi-media-preview-image,
.yw-multi-media-preview-video {
  /* 统一媒体预览的展示方式：等比完整 contain，不裁切 */
  position: static;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.yw-multi-media-preview-error {
  padding: 20px;
  color: #ff4d4f;
  text-align: center;
}

/* 暗黑模式适配 */
body[theme-mode="dark"] .yw-multi-media-title {
  color: var(--semi-color-text-0);
}

body[theme-mode="dark"] .yw-multi-media-item {
  background-color: rgba(255, 255, 255, 0.05);
}

body[theme-mode="dark"] .yw-multi-media-loading,
body[theme-mode="dark"] .yw-multi-media-error {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}

body[theme-mode="dark"] .yw-multi-media-error {
  color: rgba(255, 255, 255, 0.4);
}

/* 图片预览模态框样式 */
.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-modal .semi-modal-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.yw-image-preview-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 72vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.yw-image-preview-image {
  /* 与多媒体预览保持一致，避免被父级裁切 */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  display: block;
}

.yw-image-preview-error {
  padding: 20px;
  color: #ff4d4f;
  text-align: center;
} 
: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改为padding，避免影响Virtuoso高度计算 */
  padding-right: 5px;
}

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

.yw-message-base-recv {
  /* 将margin改为padding，避免影响Virtuoso高度计算 */
  padding-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-multi-media {
  background-color: var(--yw-bg-base);
}

.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;
  position: relative;
  padding: 2px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.messageFail:hover {
  background-color: rgba(255, 0, 0, 0.1);
}

.messageFail img {
  width: 14px;
  height: 14px;
  display: block;
}

.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);
  white-space: break-spaces;
}

.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;
}


/* 合并转发弹窗：确保显示右上角关闭按钮（覆盖全局 .yw-base-modal 的隐藏规则） */
.yw-mergeforward-modal .semi-modal-close {
  display: inline-flex !important; /* 必须使用 !important 覆盖 .yw-base-modal 的 display:none */
}

: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: 1rem;
  --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-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: 1rem;
  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 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-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);
  }
}

/* 高亮定位消息样式（与 MessageItem 一致） */
.yw-message-highlight {
  background: rgb(245 248 219);
  box-shadow: inset 0 0 0 1px rgba(92, 175, 250, 0.35);
}
body[theme-mode="dark"] .yw-message-highlight {
  background: rgba(92, 175, 250, 0.12);
  box-shadow: inset 0 0 0 1px rgba(92, 175, 250, 0.45);
}

/* 右键菜单容器样式 */
.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;
}



.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 .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;
}

/* 优化视频展示 */
.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;
} 
.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; /* 为了防止文字太靠近，增加一些右边距 */
}

/* 群公告查看弹窗样式 */
.yw-group-announcement-modal {
  z-index: 1050;
}

.yw-group-announcement-modal .semi-modal-header {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
  margin: 0;
}

.yw-group-announcement-modal .semi-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.yw-group-announcement-modal .semi-modal-body {
  padding: 10px 0;
  min-height: 180px; /* 保持最小高度，避免内容切换时的高度跳跃 */
  max-height: 60vh; /* 使用视窗高度，避免在大屏幕上出现不必要的滚动条 */
  overflow-y: auto;
}

.group-announcement-modal-content {
  width: 100%;
}

/* 弹窗关闭按钮样式优化 */
.yw-group-announcement-modal .semi-modal-close {
  color: #666;
  transition: color 0.2s ease;
}

.yw-group-announcement-modal .semi-modal-close:hover {
  color: #333;
}

/* 编辑模式样式 - 始终可编辑设计 */
.group-announcement-textarea {
  width: 100%;
  resize: none;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  transition: all 0.2s ease;
  background-color: transparent;
  min-height: 120px; /* 固定最小高度，避免高度跳跃 */
  max-height: 50vh; /* 限制最大高度，避免在大屏幕上过高 */
}

.group-announcement-textarea textarea {
  padding: 6px 0 !important;
}

.semi-input-textarea-disabled, .semi-input-textarea-readonly {
  background-color: transparent !important;
  cursor: default !important;
  color: #333 !important;
  padding: 6px 0 !important;
}

/* 未焦点状态 - 看起来像普通文本 */
.group-announcement-textarea.unfocused {
  border: none;
  box-shadow: none;
  background-color: transparent;
  cursor: text;
}

/* 焦点状态 - 显示编辑样式 */
.group-announcement-textarea.focused,
.group-announcement-textarea:focus {
  border: none;
  background-color: #fff;
  /* box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.1); */
  outline: none;
}

/* 只读状态 */
.group-announcement-textarea.readonly {
  cursor: default;
  background-color: transparent;
  border: 1px solid transparent;
}

.group-announcement-textarea.readonly:focus {
  border: 1px solid transparent;
  box-shadow: none;
}

/* 弹窗底部按钮区域 */
.group-announcement-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
}

/* 优化保存按钮的禁用状态 */
.group-announcement-modal-footer .semi-button[disabled] {
  opacity: 0.5;
}

.group-announcement-modal-footer .semi-button {
  min-width: 80px;
  height: 36px;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.group-announcement-modal-footer .semi-button-primary {
  background-color: #0969da;
  border-color: #0969da;
}

.group-announcement-modal-footer .semi-button-primary:hover {
  background-color: #0860ca;
  border-color: #0860ca;
}

.group-announcement-modal-footer .semi-button-tertiary {
  color: #656d76;
  border-color: #d0d7de;
}

.group-announcement-modal-footer .semi-button-tertiary:hover {
  background-color: #f6f8fa;
  border-color: #d0d7de;
}

/* 弹窗footer区域样式调整 */
.yw-group-announcement-modal .semi-modal-footer {
  border-top: 1px solid #e0e0e0;
  padding: 16px 24px;
  margin: 0;
}
.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; */ /* 移除固定高度限制，使用JS动态计算 */
  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;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.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;
  min-height: 0 !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;
}

/* 上传进度条样式 */
.yw-message-file-progress {
  margin-top: 6px;
  position: relative;
  padding-right: 20px; /* 为取消按钮留出空间 */
}

.yw-message-file-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.yw-message-file-progress-fill {
  height: 100%;
  background-color: #3370ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

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

.yw-message-file-error {
  font-size: 11px;
  color: #f53f3f;
  margin-top: 4px;
}

/* 取消上传按钮样式 */
.yw-message-file-cancel-btn {
  position: absolute;
  top: 2px; /* 与进度条对齐 */
  right: 2px; /* 稍微内缩，避免完全贴边 */
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 1; /* 确保按钮在进度条之上 */
}

.yw-message-file-cancel-btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.yw-message-file-cancel-btn:active {
  background-color: rgba(0, 0, 0, 0.3);
}
/* UploadProgressBubble 样式：用于消息气泡内的线性/圆形进度与取消按钮 */

.upb {
  font-size: var(--yw-font-size-sm);
  color: var(--yw-text-primary);
}

/* 圆形叠加（用于图片/视频缩略图上方） */
.upb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 允许内部按钮单独接管事件 */
  z-index: 3; /* 覆盖消息内所有元素（播放按钮/时长等）*/
}
.upb-overlay.uploading {
  background: var(--yw-bg-mask);
}
.upb-overlay.failed {
  background: var(--yw-bg-mask);
}

.upb-circle-wrap {
  position: relative;
  pointer-events: auto;
}
.upb-circle {
  display: block;
}
/* 圆形取消按钮默认隐藏，hover/focus 显示（不影响线性形态的 ghost 按钮） */
.upb-circle-wrap .upb-cancel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.upb-circle-wrap:hover .upb-cancel,
.upb-circle-wrap:focus-within .upb-cancel {
  opacity: 1;
  pointer-events: auto;
}

.upb-circle-progress {
  stroke: var(--yw-color-primary) !important;
}

.upb-circle-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* 始终让百分比居中 */
}
.upb-percent {
  color: #fff;
  font-weight: 700;
  font-size: var(--yw-font-size-lg); /* 放大字号 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* 让圆形取消按钮悬浮在圆心位置，不占据排版空间 */
.upb-circle-wrap .upb-cancel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; /* 圆形取消按钮更大 */
  height: 52px; /* 圆形取消按钮更大 */
  line-height: 52px; /* 垂直居中图标 */
  font-size: 30px; /* 放大“×”图标视觉大小 */
}

/* 取消按钮（圆形/线性通用） */
.upb-cancel {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 22px;
  height: 22px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
.upb-cancel:hover {
  background: rgba(255, 255, 255, 0.6);
}
/* 圆形态下提升取消按钮的对比度（不影响线性态 ghost 按钮） */
.upb-circle-wrap .upb-cancel {
  background: rgba(0, 0, 0, 0.6) !important; /* 深色底，提升可读性 */
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
}
.upb-circle-wrap .upb-cancel:hover {
  background: rgba(0, 0, 0, 0.75) !important;
}

.upb-cancel.ghost {
  background: transparent;
  color: var(--yw-text-secondary);
  border: 1px solid var(--yw-line-color);
  width: 20px;
  height: 20px;
  line-height: 18px;
}
.upb-cancel.ghost:hover {
  background: var(--yw-bg-hover);
}

.upb-failed-text {
  color: #fff;
  font-weight: 600;
}

/* 线性进度（用于文件类消息） */
.upb-linear.below {
  margin-top: 4px;
}
.upb-linear.compact {
  font-size: 12px;
}

.upb-linear-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px; /* 保留占位高度，避免成功后布局跳动 */
}
.upb-linear-bar {
  position: relative;
  flex: 1 1;
  /* width: 160px; */
  height: 4px;
  background: var(--yw-line-color);
  border-radius: var(--yw-border-radius-lg);
  overflow: hidden;
}
.upb-linear-fill {
  height: 100%;
  background: var(--yw-color-primary);
  border-radius: var(--yw-border-radius-lg);
  transition: width 180ms ease;
}
.upb-linear-text {
  color: var(--yw-text-secondary);
  white-space: nowrap;
}
.upb-linear-error {
  color: var(--yw-color-error);
}

.upb-linear-placeholder {
  visibility: hidden;
}

/* 分组面板样式 - 优化版本 */
.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-unread-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #f53f3f;
  color: #fff;
  border-radius: 6px;
  font-size: 9px;
  min-width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  padding: 0 2px;
  z-index: 1;
  box-shadow: 0 0 1px #fff;
  pointer-events: none;
  font-weight: 600;
}

.group-total-count {
  margin-left: 8px;
  color: #999;
  font-size: 12px;
  min-width: 24px;
  text-align: right;
  font-weight: 500;
}

/* 分组编辑按钮区域 */
.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-message-revoke {
  margin: 4px auto;
  position: relative;
  font-size: 13px;
}

/* 暗色模式下的撤回消息样式 */
body[theme-mode="dark"] .yw-message-revoke {
  color: #ccc;
}

/* 确保用户名样式在撤回消息中正确显示 */
.yw-message-revoke .yw-message-system-username {
  color: var(--yw-color-primary);
  font-weight: 600;
  margin-left: 4px;
  margin-right: 4px;
}

.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-conversationlist-item-reddot .semi-badge-count {
  background-color: var(--yw-color-primary) !important;
  background-color: var(--badge-bg, var(--yw-color-primary)) !important;
}

.yw-conversationlist-item-reddot .semi-badge-count.semi-badge-solid {
  background-color: var(--yw-color-primary) !important;
  background-color: var(--badge-bg, var(--yw-color-primary)) !important;
}

/* ===== 特殊标签样式 ===== */
.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-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-message-search-modal,
.yw-message-search-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.yw-message-search-input {
  padding: 8px 0 12px 0;
}

.yw-message-search-empty {
  width: 100%;
  height: 100%;
  padding: 24px 0;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.yw-message-search-list {
  flex: 1 1;
  overflow: auto;
}

/* ==== 分组列表样式（全局搜索） ==== */
.yw-message-search-group {
  margin: 10px 0;
  border: 1px solid var(--semi-color-border);
  border-radius: 8px;
  background: var(--semi-color-fill-0);
  overflow: hidden;
}

.yw-message-search-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--semi-color-bg-0);
  border-bottom: 1px solid var(--semi-color-border);
  cursor: pointer;
}

.yw-message-search-group-header:hover {
  background: var(--semi-color-fill-0);
}

.yw-message-search-group-header .yw-group-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 左侧语义箭头：收起为▶，展开为▶旋转90° */
.yw-group-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--semi-color-text-2);
  transition: transform 0.12s ease;
  margin-right: 6px;
}
.yw-group-caret.open {
  transform: rotate(90deg);
}

.yw-group-name {
  font-weight: 600;
}
.yw-group-count {
  color: var(--semi-color-text-2);
  font-weight: 400;
}

.yw-group-actions {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.yw-message-search-group-header:hover .yw-group-actions {
  opacity: 1;
}
.yw-group-locate {
  color: var(--semi-color-text-2);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.yw-group-locate:hover {
  background: var(--semi-color-fill-1);
  color: var(--semi-color-text-0);
}

.yw-message-search-group-footer {
  text-align: center;
  color: var(--semi-color-text-2);
  padding: 8px 0;
  cursor: pointer;
}
.yw-message-search-group-footer:hover {
  background: var(--semi-color-fill-0);
}

.yw-message-search-group-footer.yw-left {
  text-align: left;
  padding-left: 12px;
}

/* 高亮消息通用样式（气泡项需根据该类名渲染） */
.yw-message-highlight {
  background: rgb(245 248 219);
  /* border: 2px solid rgba(92, 175, 250, 0.35);
  border-radius: 6px;
  padding: 2px 0;
  margin: -2px; */
  box-sizing: border-box;
}

body[theme-mode="dark"] .yw-message-highlight {
  background: rgba(92, 175, 250, 0.12);
  border-color: rgba(92, 175, 250, 0.45);
}

/* 结果项样式（简洁） */
.yw-message-search-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 8px; /* 轻微内边距，hover 时更自然 */
  cursor: pointer;
  background: var(--semi-color-bg-0); /* 默认白色背景 */
  border-radius: 4px;
}

/* 行间分隔：不影响 hover 背景的连贯性 */
.yw-message-search-item + .yw-message-search-item {
  border-top: 1px solid var(--semi-color-border);
}

/* 统一 hover 效果（全局与频道内共用） */
.yw-message-search-item:hover {
  background: var(--semi-color-fill-0);
}

body[theme-mode="dark"] .yw-message-search-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.yw-message-search-item-avatar {
  margin-right: 10px;
}

.yw-message-search-item-meta {
  font-size: 12px;
  color: var(--semi-color-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.yw-message-search-item-summary {
  font-size: 13px;
  color: var(--semi-color-text-0);
}

/* 紧凑单行项 */
.yw-message-search-item--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yw-message-search-item--compact .compact-left {
  flex: 1 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.yw-message-search-item--compact .sender {
  color: var(--semi-color-text-2);
  margin-right: 8px;
}
.yw-message-search-item--compact .compact-right {
  color: var(--semi-color-text-2);
  font-size: 12px;
  margin-left: 12px;
  flex: 0 0 auto;
}

/* ==== 图片/视频宫格 ==== */
.yw-message-search-grid {
  padding-top: 4px;
}

.yw-media-month-header {
  width: 100%;
  padding: 8px 2px;
  color: var(--semi-color-text-2);
  font-size: 12px;
}

.yw-media-tile {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--semi-color-fill-0);
  cursor: pointer;
}

.yw-media-thumb {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.yw-media-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semi-color-text-2);
  font-size: 12px;
}

.yw-media-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.yw-media-locate {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
}

.yw-media-tile:hover .yw-media-locate {
  opacity: 1;
  cursor: pointer;
}

.yw-media-time {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
}

/* ==== 筛选器（统一外观 + 语义化宽度）==== */
.yw-filter {
  display: block;
  flex: 1 1;
  min-width: 0; /* 允许在 flex 容器中收缩，避免溢出 */
}
/* 让筛选输入占满父容器 */
.yw-filter .yw-filter-chip {
  width: 100%;
}
/* Semi Input wrapper 宽度 100% */
.yw-filter .semi-input-wrapper.yw-filter-chip {
  width: 100%;
}
/* 时间选择器固定宽度，剩余空间留给左侧输入 */
.yw-filter--time-wide {
  flex: 0 0 156px;
  width: 156px;
}
.yw-filter--time {
  flex: 0 0 156px;
  width: 156px;
}
.yw-filter--conv-type {
  flex: 0 0 120px;
  width: 120px;
}

/* 统一的筛选Chip外观（参考 Material 3：高度32px，圆角8px） */
.yw-filter-chip {
  border-radius: 8px;
  height: 32px;
  background: var(--semi-color-fill-0);
  border: 1px solid var(--semi-color-border);
  box-sizing: border-box;
  flex: 1 1;
}
/* Hover/Focus 态：与 Select 视觉保持一致 */
.semi-input-wrapper.yw-filter-chip:hover {
  background: var(--semi-color-fill-1);
}
.semi-input-wrapper.yw-filter-chip:focus-within {
  border-color: var(--semi-color-primary);
  box-shadow: 0 0 0 1px
    rgba(22, 119, 255, 0.18);
  box-shadow: 0 0 0 1px
    var(--semi-color-primary-outline, rgba(22, 119, 255, 0.18));
}
/* 下拉箭头颜色统一偏弱提示态 */
.semi-input-wrapper.yw-filter-chip .semi-input-suffix {
  color: var(--semi-color-text-2);
}

/* ==== 筛选器容器与弹层内容 ==== */
.yw-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}

/* Popover 通用容器：宽高固定，列布局 */
.yw-filter-popover {
  position: relative;
  width: 100%;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}
.yw-filter-popover__list {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.yw-filter-popover__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-1);
}

/* 最近会话列表项（Popover 内） */
.yw-filter-conv-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}
.yw-filter-conv-item .yw-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  margin-right: 8px;
}
.yw-ellipsis {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 成员选择（单聊） */
.yw-member-popover {
  padding: 12px;
  width: 240px;
}
.yw-member-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 10px; /* 提升可点击区域 */
  border-radius: 6px;
  gap: 8px;
}
/* hover 反馈：与其他列表项保持一致 */
.yw-member-item:hover {
  background: var(--semi-color-fill-1);
}
/* 邻接项行距 */
.yw-member-item + .yw-member-item {
  margin-top: 4px;
}
.yw-flex-1 {
  flex: 1 1;
}

/* ==== 通用工具类 ==== */
.yw-loading-gap-80 {
  height: 80px;
}
.yw-flex-1-min0 {
  flex: 1 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 24px;
}
.yw-overflow-hidden {
  overflow: hidden;
}
.yw-scroll-area {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.yw-h-100 {
  height: 100%;
}
.yw-pad-12 {
  padding: 12px;
}
.yw-center-note {
  text-align: center;
  padding: 8px;
  color: var(--semi-color-text-2);
}

/* ==== FixedPopover 默认样式 ==== */
.yw-fixed-popover-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--semi-color-bg-3);
  border: 1px solid var(--semi-color-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding: 8px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 列表项文本单行省略，避免横向滚动 */
.yw-filter-conv-item .yw-ellipsis {
  min-width: 0;
}

/* Modal body 高度统一（避免内联 bodyStyle） */
.yw-modal-body-70vh {
  height: 70vh;
  overflow: hidden;
}

/* 分组头小头像尺寸（全局搜索组头使用） */
.yw-group-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
}

/* ==== 媒体宫格统一样式（动态尺寸仅保留列宽/单元宽高内联） ==== */
.yw-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}
.yw-media-month-header {
  grid-column: 1 / -1;
  padding: 4px 2px;
  color: var(--semi-color-text-2);
}
.yw-media-thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.yw-video-player {
  width: 100%;
  max-height: 72vh;
  -o-object-fit: contain;
     object-fit: contain;
  background: black;
}

/* 文件项（文件Tab） */
.yw-message-search-item--file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.yw-file-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: auto;
  flex: 0 0 auto;
}
.yw-min0-flex1 {
  min-width: 0;
  flex: 1 1;
}
.yw-file-name {
  font-weight: 500;
  color: var(--semi-color-text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yw-file-size {
  font-size: 12px;
  color: var(--semi-color-text-2);
}
.yw-locate-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--semi-color-fill-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ==== 交互状态统一（hover）==== */
.yw-filter-conv-item:hover {
  background: var(--semi-color-fill-1);
}
.yw-locate-btn:hover {
  background: var(--semi-color-fill-2);
}

/* 结果项头像尺寸（非文件/媒体的消息结果单元） */
.yw-message-search-item-avatar .yw-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
}

.paginated-contacts-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden; /* 防止整体容器出现滚动条 */
}

.paginated-contacts-list .search-container {
  flex-shrink: 0;
  padding: 0 0 12px 0;
  width: 100%;
  box-sizing: border-box;
}

.paginated-contacts-list .search-input {
  width: 100%;
  box-sizing: border-box;
}

/* 虚拟列表容器 */
.paginated-contacts-list .contacts-list-container {
  flex: 1 1;
  min-height: 0;
  overflow: hidden; /* 让Virtuoso组件自己处理滚动 */
  width: 100%;
}

.paginated-contacts-list .loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: var(--semi-color-text-2);
  height: 200px;
}

/* 联系人项样式 */
.paginated-contacts-list .contact-item {
  padding: 8px 12px;
  border-bottom: none;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 56px; /* 确保固定高度 */
}

.paginated-contacts-list .contact-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
}

.paginated-contacts-list .contact-checkbox .semi-checkbox-inner {
  min-width: 16px;
  min-height: 16px;
}

.paginated-contacts-list .contact-checkbox .semi-checkbox-inner-display {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.paginated-contacts-list .contact-content {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.paginated-contacts-list .contact-name {
  font-size: 14px;
  color: var(--semi-color-text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

.paginated-contacts-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--semi-color-text-2);
  height: 200px;
}

.paginated-contacts-list .empty-text {
  font-size: 14px;
}

.paginated-contacts-list .loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 8px;
  color: var(--semi-color-text-2);
  font-size: 14px;
  height: 56px;
  box-sizing: border-box;
}

/* 确保Virtuoso组件的滚动条样式 */
.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller] {
  scrollbar-width: thin;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar {
  width: 6px;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-track {
  background: transparent;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 暗色主题适配 */
[theme-mode="dark"] .paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

[theme-mode="dark"] .paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 全选操作区域样式 */
.paginated-contacts-list .select-all-section {
  flex-shrink: 0;
  padding: 8px 12px 12px 12px;
  border-bottom: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-1);
}

.paginated-contacts-list .select-all-button-container {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

.paginated-contacts-list .select-all-label {
  font-size: 14px;
  color: var(--semi-color-text-0);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.paginated-contacts-list .selection-info {
  font-size: 12px;
  color: var(--semi-color-text-1);
  background: var(--semi-color-primary-light-default);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.paginated-contacts-list .progress-text {
  font-size: 12px;
  color: var(--semi-color-text-2);
  white-space: nowrap;
} 
.yw-subscrierlist {
  background-color: var(--yw-color-theme);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.yw-subscrierlist-list-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.yw-subscrierlist-list-item:hover {
  background-color: var(--semi-color-fill-1);
}

.yw-subscrierlist-item-name {
  margin-left: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 7rem;
}

.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-subscrierlist-list {
  flex: 1 1;
  overflow: hidden;
}

.yw-subscrierlist-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  font-size: 14px;
}

.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-viewqueueheader-height);
  width: 100%;
  padding: 0px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--yw-line);
}

.yw-chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.yw-chat-refresh-route {
  padding: 5px;
}

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

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;
}

.yw-chat-network-status {
  font-size: 12px;
  color: rgb(251, 85, 60);
  padding: 2px 4px;
  border-radius: 4px;
  background-color: #f3f0ed;
}

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

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

.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: var(--yw-viewqueueheader-height);
  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;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.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 {
  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%;
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  border-left: var(--yw-line);
  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-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: var(--yw-viewqueueheader-height);
  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-copyable-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.yw-copyable-text-content {
  margin-right: 4px;
}

.yw-copyable-text-content.clickable {
  transition: opacity 0.2s ease;
}

.yw-copyable-text-content.clickable:hover {
  opacity: 0.8;
}

.yw-copyable-text-icon {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.yw-copyable-text-icon:hover {
  opacity: 1;
}

.yw-chat-empty-state {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(99, 102, 241, 0.03) 100%
  );
  background: linear-gradient(
    135deg,
    var(--yw-bg-base, #ffffff) 0%,
    rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.03) 100%
  );
  overflow: hidden;
}

.yw-chat-empty-state-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  max-width: 600px;
  padding: 32px 24px;
  width: 100%;
}

.yw-chat-empty-state-visual {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
}

/* 消息点容器（静态，无动画） */
.yw-message-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  background: rgba(99, 102, 241, 0.1);
  background: rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.1);
  border-radius: 24px;
  /* 移除 backdrop-filter，避免昂贵的模糊合成 */
  /* backdrop-filter: blur(12px); */
  /* 轻量静态阴影 */
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.10);
  box-shadow: 0 4px 16px rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.10);
}

.yw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    #6366f1 0%,
    rgba(99, 102, 241, 0.8) 100%
  );
  background: linear-gradient(135deg,
    var(--yw-color-primary, #6366f1) 0%,
    rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.8) 100%
  );
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  box-shadow: 0 2px 8px rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.3);
}


/* 文本内容 */
.yw-chat-empty-state-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.yw-chat-empty-state-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  color: var(--yw-text-primary, #1f2937);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.yw-chat-empty-state-subtitle {
  font-size: 16px;
  color: #6b7280;
  color: var(--yw-text-secondary, #6b7280);
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 装饰性背景元素 */
.yw-chat-empty-state-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.yw-decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08),
    rgba(99, 102, 241, 0.02)
  );
  background: linear-gradient(
    135deg,
    rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.08),
    rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.02)
  );
}

.yw-decoration-circle-1 {
  width: 140px;
  height: 140px;
  top: 12%;
  right: 15%;
  animation-delay: 0s;
}

.yw-decoration-circle-2 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 12%;
  animation-delay: 3s;
}

/* 现代化动画效果（性能优化：仅变换 transform，避免阴影动态变化） */
@keyframes containerFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.02);
  }
}

@keyframes modernTyping {
  0%, 70%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }
  20% {
    transform: translateY(-12px) scale(1.2);
    opacity: 1;
  }
  40% {
    transform: translateY(-6px) scale(1.1);
    opacity: 0.9;
  }
}

@keyframes titleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtitleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modernFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-20px) rotate(1deg) scale(1.05);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px) rotate(-1deg) scale(1.1);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-15px) rotate(0.5deg) scale(0.95);
    opacity: 0.7;
  }
}

/* 低功耗模式：统一暂停当前区域内所有动画（全局覆盖） */
.yw-reduced-motion * {
  animation-play-state: paused !important;
}

/* 遵循系统“减少动效”偏好（全局覆盖） */
@media (prefers-reduced-motion: reduce) {
  .yw-message-dots, .yw-dot, .yw-decoration-circle {
    animation: none !important;
  }
}

/* 响应式设计 - 宽屏优化 */
@media (min-width: 1200px) {
  .yw-chat-empty-state-content {
    max-width: 800px;
  }

  .yw-chat-empty-state-title {
    font-size: 28px;
  }

  .yw-chat-empty-state-subtitle {
    font-size: 18px;
    white-space: normal;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .yw-chat-empty-state-content {
    max-width: 700px;
  }

  .yw-chat-empty-state-subtitle {
    white-space: normal;
  }
}

/* 移动端响应式 */
@media (max-width: 767px) {
  .yw-chat-empty-state {
    min-height: 320px;
    padding: 20px;
  }

  .yw-chat-empty-state-content {
    max-width: 340px;
    padding: 24px 16px;
  }

  .yw-chat-empty-state-visual {
    margin-bottom: 24px;
  }

  .yw-chat-empty-state-title {
    font-size: 20px;
  }

  .yw-chat-empty-state-subtitle {
    font-size: 14px;
    white-space: normal;
  }

  .yw-message-dots {
    padding: 14px 18px;
    gap: 8px;
  }

  .yw-dot {
    width: 8px;
    height: 8px;
  }

  .yw-decoration-circle-1 {
    width: 100px;
    height: 100px;
  }

  .yw-decoration-circle-2 {
    width: 70px;
    height: 70px;
  }
}

/* 超小屏幕 */
@media (max-width: 480px) {
  .yw-chat-empty-state-content {
    max-width: 280px;
    padding: 20px 12px;
  }

  .yw-chat-empty-state-title {
    font-size: 18px;
  }

  .yw-chat-empty-state-subtitle {
    font-size: 13px;
  }
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .yw-chat-empty-state {
    background: linear-gradient(
      135deg,
      #1f2937 0%,
      rgba(99, 102, 241, 0.05) 100%
    );
    background: linear-gradient(
      135deg,
      var(--yw-bg-base, #1f2937) 0%,
      rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.05) 100%
    );
  }

  .yw-chat-empty-state-title {
    color: #f9fafb;
    color: var(--yw-text-primary, #f9fafb);
  }

  .yw-chat-empty-state-subtitle {
    color: #d1d5db;
    color: var(--yw-text-secondary, #d1d5db);
  }

  .yw-message-dots {
    background: rgba(99, 102, 241, 0.15);
    background: rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.15);
    box-shadow:
      0 8px 32px rgba(99, 102, 241, 0.2),
      0 0 0 1px rgba(99, 102, 241, 0.12);
    box-shadow:
      0 8px 32px rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.2),
      0 0 0 1px rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.12);
  }

  .yw-decoration-circle {
    background: linear-gradient(
      135deg,
      rgba(99, 102, 241, 0.12),
      rgba(99, 102, 241, 0.04)
    );
    background: linear-gradient(
      135deg,
      rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.12),
      rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.04)
    );
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .yw-message-dots {
    background: rgba(99, 102, 241, 0.2);
    background: rgba(var(--yw-color-primary-rgb, 99, 102, 241), 0.2);
    border: 2px solid #6366f1;
    border: 2px solid var(--yw-color-primary, #6366f1);
  }

  .yw-dot {
    background: #6366f1;
    background: var(--yw-color-primary, #6366f1);
  }
}

/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  .yw-message-dots,
  .yw-dot,
  .yw-decoration-circle,
  .yw-chat-empty-state-title,
  .yw-chat-empty-state-subtitle {
    animation: none;
    transform: none;
  }

  .yw-message-dots {
    transform: translateZ(0);
  }
}
.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-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: 60px;
  --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-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: 60px;
  --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;
  gap: 10px;
  padding: 8px 16px 8px 6px;
  cursor: pointer;
  align-items: center;
  border-radius: 8px;
  transition: background-color 0.15s;
  height: 56px;
  box-sizing: border-box;
  width: 100%;
}

.yw-check {
  display: inline-flex;
  align-items: center;
}

.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;
}

.yw-conversationselect-content-searchContent .yw-search-input {
  margin: 0;
}

/* 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 {
  flex: 1 1;
  min-height: 200px; /* 确保最小高度 */
  padding: 0 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.yw-conversationselect-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1; /* 使用flex占满剩余空间 */
  width: 100%;
  color: #999;
}

.yw-conversationselect-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1; /* 使用flex占满剩余空间 */
  width: 100%;
  color: #999;
  font-size: 14px;
}

/* 虚拟列表容器样式 */
.yw-conversationselect-virtuoso-container {
  display: flex;
  flex: 1 1;
  width: 100%;
  overflow: hidden;
}

/* 底部固定区域 */
.yw-conversationselect-footer {
  background: var(--yw-color-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  /* 移除sticky定位，使用flex布局确保不遮挡内容 */
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  min-height: 64px; /* 确保footer有足够的最小高度 */
}

/* 确认按钮样式 */
.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 {
    min-height: 180px; /* 调整最小高度 */
  }
}

@media screen and (max-height: 600px) {
  .yw-conversationselect {
    max-height: 450px;
  }

  .yw-conversationselect-content-tabpane {
    min-height: 150px; /* 进一步调整最小高度 */
  }
}
.yw-conversationselect-content-box-data {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1;
}

.yw-conversationselect-content-box-name {
  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-conversationselect-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.yw-conversationselect-select-all span {
  cursor: pointer;
  font-size: 14px;
  color: #1890ff;
  transition: color 0.2s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.yw-conversationselect-select-all span:hover {
  color: #40a9ff;
}


.yw-search-input {
  display: flex;
  align-items: center;
  background: var(--semi-color-fill-0);
  border: 1px solid var(--semi-color-border);
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.2s ease;
  position: relative;
}

.yw-search-input:hover {
  border-color: var(--semi-color-primary);
}

.yw-search-input.focused {
  border-color: var(--semi-color-primary);
  box-shadow: 0 0 0 2px var(--semi-color-primary-light-active);
}

.yw-search-input-icon {
  display: flex;
  align-items: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.yw-search-input .semi-input-wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  flex: 1 1;
}

.yw-search-input .semi-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 16px;
}

.yw-search-input .semi-input:focus {
  border: none !important;
  box-shadow: none !important;
}

/* 深色主题适配 */
[theme-mode="dark"] .yw-search-input {
  background: var(--semi-color-bg-2);
  border-color: var(--semi-color-border);
}

[theme-mode="dark"] .yw-search-input:hover {
  border-color: var(--semi-color-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .yw-search-input {
    padding: 6px 10px;
  }
  
  .yw-search-input .semi-input {
    font-size: 14px;
  }
} 
.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-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-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: 90vh;
  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);
}

/* 样式已移动到下方的flex布局定义中 */

.yw-indextable-section-title {
  background-color: var(--yw-color-secondary);
  margin-left: 15px;
}

.yw-indextable-item {
  display: flex;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  min-height: 60px;
}

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: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f4f4f5;
  z-index: 10;
}

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



.yw-indextable-checkbox {
  margin-right: 10px;
}

.yw-indextable-search-box {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 10px 15px;
  background-color: #f4f4f5;
  border-bottom: 1px solid #e5e5e5;
}

body[theme-mode="dark"] .yw-indextable-search-box {
  background-color: var(--yw-color-secondary-2);
  border-bottom: 1px solid var(--yw-color-border);
}

.yw-indextable-selected-box {
  display: flex;
  overflow-x: auto;
  padding: 10px 15px;
  min-height: 70px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e5e5e5;
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.yw-indextable-selected-box::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

body[theme-mode="dark"] .yw-indextable-selected-box {
  border-bottom: 1px solid var(--yw-color-border);
}

.yw-indextable-search-icon {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.yw-indextable-search-input {
  flex: 1 1;
  display: flex;
  align-items: center;
}

.yw-indextable-search-input input {
  flex: 1 1;
  height: 32px;
  font-size: 16px;
  line-height: 20px;
  background-color: transparent;
  color: #1f2329;
  outline: none;
  border: none;
  padding: 0;
}

.yw-indextable-search-input input::-moz-placeholder {
  color: #bbbfc4;
  font-size: 16px;
}

.yw-indextable-search-input input::placeholder {
  color: #bbbfc4;
  font-size: 16px;
}

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

body[theme-mode="dark"] .yw-indextable-search-input input::-moz-placeholder {
  color: #666;
}

body[theme-mode="dark"] .yw-indextable-search-input input::placeholder {
  color: #666;
}

.yw-indextable-select-user {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.yw-indextable-select-user img,
.yw-indextable-select-user .yw-avatar {
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
}

/* 选中用户的删除按钮样式 */
.yw-indextable-select-user::after {
  content: '×';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.yw-indextable-contacts {
  width: 100%;
  flex: 1 1;
  overflow: hidden;
}

/* 让主容器使用flex布局 */
.yw-indextable {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.yw-indextable-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  font-size: 14px;
}

.yw-indextable-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 14px;
}

.yw-indextable-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #666;
  font-size: 14px;
}

.yw-indextable-no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #999;
  font-size: 12px;
}

.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-message-call-record {
  display: flex;
  align-items: center;
  gap: 4px;
  word-wrap: break-word;
  word-break: break-all;
  width: 100%;
}

/* 发送消息：图标在右侧 */
.yw-message-call-record.sender {
  justify-content: space-between;
}

/* 接收消息：图标在左侧 */
.yw-message-call-record.receiver {
  justify-content: flex-start;
}

.yw-message-call-record-text {
  flex: 1 1;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  line-height: 1.3125;
  text-align: left;
  text-align: initial;
  unicode-bidi: plaintext;
}

.yw-message-call-record-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

/* 图片预览模态框样式 - 与视频预览保持一致 */
.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%;
  /* 与多媒体预览一致，固定可用高度，内部媒体自适应 */
  height: 72vh;
  overflow: 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 {
  /* 保持等比完整展示图片 */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  display: block;
}

.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: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 小图标特殊处理 */
.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-message-image-progress {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 10;
}

.yw-message-image-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.yw-message-image-progress-fill {
  height: 100%;
  background-color: #3370ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.yw-message-image-progress-text {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.yw-message-image-error {
  color: #ff4d4f;
  font-size: 12px;
  text-align: center;
  margin-top: 4px;
}

.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-invite-detail-modal {
  max-height: 90vh;
  overflow: hidden;
}

.yw-invite-detail-modal .semi-modal-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}

.yw-invite-detail-modal .semi-modal-body {
  padding: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.invite-detail-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  max-height: 80vh;
  overflow: hidden;
}

.invite-detail-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  text-align: center;
}

.invite-detail-header .yw-main-sider-avatar-img {
  margin-bottom: 8px;
}

.inviter-name {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  color: var(--yw-text-primary, #333);
}

.invite-message {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
  color: var(--yw-text-secondary, #666);
}

.invite-remark {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  color: var(--yw-text-secondary, #666);
  font-style: italic;
}

.invite-detail-divider {
  flex-shrink: 0;
  background-color: #eee;
  background-color: var(--yw-color-border, #eee);
  height: 1px;
  margin: 0 20px;
}

.invite-detail-content {
  flex: 1 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

.invite-members-list {
  flex: 1 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  justify-items: center;
  align-content: start;
  max-width: 90%;
}

.invite-member-item {
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center; /* 在grid中居中对齐 */
  flex-shrink: 0;
}

.invite-member-item img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 6px !important; /* 统一圆角样式 */
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  transition: transform 0.2s ease; /* 添加悬停效果 */
}

.invite-member-item:hover img {
  transform: scale(1.05); /* 悬停时轻微放大 */
}

.member-name {
  font-size: 12px;
  text-align: center;
  width: 100%; /* 使用100%宽度，让文字在容器内居中 */
  max-width: 58px;
  color: #666;
  color: var(--yw-text-secondary, #666);
  margin-top: 6px; /* 增加间距 */
  word-break: break-all;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical;
}

.invite-detail-footer {
  flex-shrink: 0;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  border-top: 1px solid var(--yw-color-border, #f0f0f0);
  background-color: #fff;
  background-color: var(--yw-color-theme, #fff);
}

.invite-confirm-button {
  width: 100%;
  padding: 12px 16px;
  background: #2e82ff;
  background: var(--yw-color-primary, #2e82ff);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s;
}

.invite-confirm-button:hover:not(.disabled) {
  background: #1c6dd0;
  background: var(--yw-color-primary-hover, #1c6dd0);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 130, 255, 0.3);
}

.invite-confirm-button.disabled {
  background: #ccc;
  background: var(--yw-color-disabled, #ccc);
  cursor: not-allowed;
  opacity: 0.6;
}

@media screen and (max-height: 600px) {
  .invite-detail-container {
    min-height: 300px;
  }

  .invite-detail-header {
    padding: 16px;
  }

  .invite-members-list {
    padding: 16px;
    gap: 14px;
  }

  .invite-detail-footer {
    padding: 16px;
  }
}

@media screen and (max-height: 500px) {
  .invite-detail-container {
    min-height: 250px;
  }

  .invite-detail-header {
    padding: 12px;
  }

  .invite-members-list {
    padding: 12px;
    gap: 12px;
  }

  .invite-detail-footer {
    padding: 12px;
  }

  .invite-confirm-button {
    padding: 10px 16px;
    font-size: 15px;
  }
}

/* 暗黑模式适配 */
body[theme-mode="dark"] .invite-detail-container {
  background-color: #1c1c1c;
  background-color: var(--yw-color-secondary, #1c1c1c);
}

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

body[theme-mode="dark"] .invite-message,
body[theme-mode="dark"] .invite-remark,
body[theme-mode="dark"] .member-name {
  color: #999;
  color: var(--yw-text-secondary-dark, #999);
}

body[theme-mode="dark"] .invite-detail-divider {
  background-color: #333;
  background-color: var(--yw-color-border-dark, #333);
}

body[theme-mode="dark"] .invite-detail-footer {
  border-color: #333;
  border-color: var(--yw-color-border-dark, #333);
  background-color: #1c1c1c;
  background-color: var(--yw-color-secondary, #1c1c1c);
}

.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;
  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%;
  height: 72vh;
  overflow: hidden;
}

.yw-video-preview-video {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}

.yw-video-preview-error {
  padding: 20px;
  color: #ff4d4f;
  text-align: center;
}

/* 预览弹窗内的加载动画（旋转器） */
.yw-video-preview-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: yw-video-spin 1s linear infinite;
}

@keyframes yw-video-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 视频预览操作按钮 */
.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-video-progress {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 10;
}

.yw-message-video-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.yw-message-video-progress-fill {
  height: 100%;
  background-color: #3370ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.yw-message-video-progress-text {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.yw-message-video-upload-error {
  color: #ff4d4f;
  font-size: 12px;
  text-align: center;
  margin-top: 4px;
}

.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;
}

/* Multi-media container */
.yw-multi-media-container {
  min-width: 200px;
  max-width: 400px;
}

.yw-multi-media-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--yw-text-primary);
  line-height: 1.4;
  word-break: break-word;
  white-space: break-spaces;
}

/* Media grid layout */
.yw-multi-media-grid {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  border-radius: 8px;
  overflow: hidden;
}

.yw-multi-media-grid.single {
  grid-template-columns: 1fr;
}

.yw-multi-media-grid.small {
  grid-template-columns: repeat(2, 1fr);
}

.yw-multi-media-grid.large {
  grid-template-columns: repeat(3, 1fr);
}

/* New custom grid layout based on PDF specifications */
.yw-multi-media-grid-custom {
  border-radius: 8px;
  overflow: hidden;
}

/* 自己发送的消息内，标题保持白色以适配深色气泡 */
.yw-message-base-bubble-box.send .yw-multi-media-title {
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 0;
}

.yw-multi-media-row {
  display: flex;
  gap: 2px;
}

/* Media item */
.yw-multi-media-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-color: #f5f5f5;
  aspect-ratio: 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image */
.yw-multi-media-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Video */
.yw-multi-media-video {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multi-media-video-element {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.yw-multi-media-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
}

.yw-multi-media-video-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  font-family: monospace;
}

/* Loading and error states */
.yw-multi-media-loading,
.yw-multi-media-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #666;
  font-size: 12px;
}

.yw-multi-media-error {
  color: #999;
}

/* More indicator */
.yw-multi-media-more {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

/* Progress overlay */
.yw-multi-media-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.yw-multi-media-progress-bar {
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.yw-multi-media-progress-fill {
  height: 100%;
  background: #1890ff;
  transition: width 0.3s ease;
}

.yw-multi-media-progress-text {
  font-size: 12px;
  text-align: center;
}

/* 多媒体预览模态框样式 - 与单图预览保持一致 */
.yw-multi-media-preview-modal.yw-base-modal .semi-modal-content {
  background: var(--semi-color-bg-0);
}

.yw-multi-media-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-multi-media-preview-modal .semi-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--semi-color-text-0);
  width: 100%;
}

/* 多媒体预览头部样式 */
.yw-multi-media-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-right: 20px;
}

/* 多媒体预览工具栏样式 */
.yw-multi-media-preview-toolbar {
  display: flex;
  gap: 8px;
}

.yw-multi-media-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-multi-media-preview-toolbar-btn:hover {
  background: var(--semi-color-fill-0);
}

.yw-multi-media-preview-modal .semi-modal-body {
  padding: 0;
}

/* 增强关闭图标的可见度 */
.yw-multi-media-preview-modal .semi-modal-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.yw-multi-media-preview-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 固定可用高度，内部用 flex 划分内容区与缩略图 */
  height: calc(100vh - 120px);
  overflow: hidden;
}

.yw-multi-media-preview-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 占据剩余空间，确保缩略图始终可见 */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* 占满可用宽度，保证左右切换按钮固定在内容区域的两侧 */
  width: 100%;
}

.yw-multi-media-preview-image,
.yw-multi-media-preview-video {
  /* 保持等比完整展示（相对内容区高度自适应） */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  display: block;
}

/* MultiMedia 使用了 .yw-image-preview-image 类名渲染图片，这里限定在内容区内按 100% 高度自适应 */
.yw-multi-media-preview-content .yw-image-preview-image {
  max-height: 100%;
}

.yw-multi-media-preview-error {
  padding: 20px;
  color: #ff4d4f;
  text-align: center;
}

/* Navigation buttons */
.yw-multi-media-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 1000;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.yw-multi-media-preview-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.yw-multi-media-preview-prev {
  left: 16px;
}

.yw-multi-media-preview-next {
  right: 16px;
}

/* 为导航按钮添加更强的视觉效果 */
.yw-multi-media-preview-nav::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  opacity: 0.9;
}

.yw-multi-media-preview-prev::after {
  transform: rotate(-135deg);
  right: 12px;
}

.yw-multi-media-preview-next::after {
  transform: rotate(45deg);
  left: 12px;
}

/* Thumbnails */
.yw-multi-media-preview-thumbnails {
  display: flex;
  gap: 8px;
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--semi-color-bg-1);
  justify-content: center;
  border-top: 1px solid var(--semi-color-border);
  /* 固定在底部区域，不参与与内容区的竞争高度 */
  flex: 0 0 auto;
}

.yw-multi-media-preview-thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--semi-color-border);
  transition: all 0.2s ease;
}

.yw-multi-media-preview-thumbnail.active {
  border-color: var(--semi-color-primary);
  box-shadow: 0 0 0 1px var(--semi-color-primary);
}

.yw-multi-media-preview-thumbnail:hover {
  border-color: var(--semi-color-primary);
}

.yw-multi-media-preview-thumbnail img,
.yw-multi-media-preview-thumbnail video {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.yw-multi-media-thumbnail-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.yw-message-chance-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 160px;
  padding: 4px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.yw-message-chance-game__media {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  /* background: var(--semi-color-fill-0); */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.yw-message-chance-game__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  pointer-events: none;
}

.yw-message-chance-game__media--placeholder {
  width: 100%;
  height: 100%;
  background: var(--semi-color-fill-1);
  border-radius: inherit;
}

.yw-message-chance-game__caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--semi-color-text-0);
}

.yw-message-chance-game__label {
  font-weight: 600;
}

.yw-message-chance-game__extra {
  font-size: 12px;
  color: var(--semi-color-text-2);
}

.yw-message-chance-game--sender .yw-message-chance-game__caption {
  color: var(--semi-color-text-0);
}

.yw-message-chance-game--animating .yw-message-chance-game__media img {
  image-rendering: auto;
}

.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);
}

/* 文件上传进度覆盖层 - 定位在右侧 */
.yw-file-upload-progress-overlay {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  pointer-events: auto;
}

/* 多媒体对话框样式 */
.yw-multi-media-dialog {
  min-width: 500px;
  max-width: 600px;
}

.yw-multi-media-title-input {
  margin-bottom: 16px;
}

.yw-multi-media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.yw-multi-media-preview-item {
  position: relative;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  cursor: grab;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

/* 校验失败覆盖层 */
.yw-multi-media-invalid-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multi-media-invalid-badge {
  background: #ff4d4f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.yw-multi-media-preview-item:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.yw-multi-media-preview-item:active {
  cursor: grabbing;
}

.yw-multi-media-preview-img,
.yw-multi-media-preview-video-element {
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.yw-multi-media-preview-video {
  position: relative;
  width: 100%;
  /* height: 120px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-multi-media-preview-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
}

.yw-multi-media-preview-video-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  font-family: monospace;
}

.yw-multi-media-preview-info {
  padding: 8px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.yw-multi-media-preview-filename {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yw-multi-media-preview-filesize {
  font-size: 11px;
  color: #666;
}

.yw-multi-media-summary {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  border-left: 3px solid #1890ff;
}

.yw-multi-media-summary-text {
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
}

.yw-multi-media-summary-size {
  font-size: 12px;
  color: #666;
}

/* 删除按钮 */
.yw-multi-media-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 77, 79, 0.9);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 10;
  transition: all 0.2s ease;
  opacity: 0;
}

.yw-multi-media-preview-item:hover .yw-multi-media-delete-btn {
  opacity: 1;
}

.yw-multi-media-delete-btn:hover {
  background: #ff4d4f;
  transform: scale(1.1);
}

/* 拖拽指示器 */
.yw-multi-media-drag-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 10;
  transition: all 0.2s ease;
  opacity: 0;
}

.yw-multi-media-preview-item:hover .yw-multi-media-drag-handle {
  opacity: 1;
}

.yw-multi-media-drag-handle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.yw-multi-media-drag-handle:active {
  cursor: grabbing;
}

/* 序号指示器 */
.yw-multi-media-index-indicator {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background: rgba(24, 144, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
  z-index: 10;
}

/* @dnd-kit 拖拽状态样式 */
.yw-multi-media-preview-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}


/* 整个媒体项都可以拖拽 */
.yw-multi-media-preview-item {
  cursor: grab;
}

.yw-multi-media-preview-item:active {
  cursor: grabbing;
}


/* 防止子元素阻止拖拽 */
.yw-multi-media-preview-item * {
  pointer-events: none;
}

.yw-multi-media-preview-item .yw-multi-media-delete-btn {
  pointer-events: auto;
}

/* 拖拽手柄现在只是视觉指示器，不需要pointer-events */
.yw-multi-media-preview-item .yw-multi-media-drag-handle {
  pointer-events: none;
}

/* 拖拽时的视觉反馈 */
.yw-multi-media-preview-item:hover {
  border-color: #1890ff;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

/* 拖拽过程中的样式 */
.yw-multi-media-preview-item[data-dragging="true"] {
  opacity: 0.5;
  transform: rotate(5deg);
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 文件上传进度覆盖层 - 定位在右侧 */
.yw-file-upload-progress-overlay {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  pointer-events: auto;
}
.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-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: 16px 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-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 {
  flex: 1 1;
  margin-left: 10px;
}

.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-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-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-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-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;
  position: relative;
}

.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-version {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  width: 100%;
}

.yw-auth-version span {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
}

.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: space-between;
  align-items: center;
  margin-top: 10px;
}

/* 记住账号密码复选框 */
.yw-login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
}

.yw-login-remember input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* 内容区域切换 */
.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-login-username-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.yw-login-username-wrapper input {
  padding-right: 40px; /* 为下拉箭头留出空间 */
  margin-bottom: 0;
}

/* 下拉箭头 */
.yw-login-username-dropdown-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  z-index: 1;
  transition: transform 0.2s ease;
}

.yw-login-username-dropdown-arrow:hover {
  color: #333;
}

.yw-login-username-wrapper.show-dropdown .yw-login-username-dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* 下拉菜单 */
.yw-login-username-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 300px; /* 增加最大高度，支持更多账号显示 */
  overflow-y: auto;
  overflow-x: hidden; /* 隐藏水平滚动条 */
  margin-top: 4px;
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

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

.yw-login-username-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.yw-login-username-dropdown::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.yw-login-username-dropdown::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

/* 当下拉菜单可滚动时的视觉提示 */
.yw-login-username-dropdown.has-scroll::before {
  content: '';
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
  z-index: 1;
  pointer-events: none;
}

.yw-login-username-dropdown.has-scroll::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
  z-index: 1;
  pointer-events: none;
}

/* 下拉菜单项 */
.yw-login-username-dropdown-item {
  padding: 10px 12px; /* 稍微减少垂直间距以在相同高度内显示更多账号 */
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px; /* 确保每个项目有最小高度 */
  white-space: nowrap; /* 防止用户名换行 */
}

.yw-login-username-dropdown-item:last-child {
  border-bottom: none;
}

.yw-login-username-dropdown-item:hover {
  background-color: #f8f9fa;
}

/* 选中状态样式（键盘导航） */
.yw-login-username-dropdown-item.selected {
  background-color: #e6f7ff;
  border-left: 3px solid #7c42ff;
  border-left: 3px solid var(--semi-color-primary, #7c42ff);
}

.yw-login-username-dropdown-item.selected:hover {
  background-color: #e6f7ff;
}

/* 账号文本部分 */
.yw-login-username-dropdown-item-text {
  flex: 1 1;
  cursor: pointer;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 防止换行 */
  margin-right: 8px; /* 与删除按钮保持间距 */
}

/* 删除按钮 */
.yw-login-username-dropdown-item-delete {
  opacity: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.yw-login-username-dropdown-item:hover .yw-login-username-dropdown-item-delete {
  opacity: 1;
}

.yw-login-username-dropdown-item-delete:hover {
  background-color: #fff2f0;
}

.yw-login-username-dropdown-item-delete:hover svg path {
  fill: #ff4d4f;
}

/* 搜索框容器 */
.yw-login-username-dropdown-search {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

/* 搜索框输入 */
.yw-login-username-dropdown-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.yw-login-username-dropdown-search-input:focus {
  border-color: #7c42ff;
  border-color: var(--semi-color-primary, #7c42ff);
  box-shadow: 0 0 0 2px rgba(124, 66, 255, 0.1);
}

.yw-login-username-dropdown-search-input::-moz-placeholder {
  color: #999;
}

.yw-login-username-dropdown-search-input::placeholder {
  color: #999;
}

/* 搜索框清除按钮 */
.yw-login-username-dropdown-search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.yw-login-username-dropdown-search-clear:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.yw-login-username-dropdown-search-clear:hover svg path {
  stroke: #666;
}

/* 空状态 */
.yw-login-username-dropdown-empty {
  padding: 16px 12px;
  text-align: center;
  color: #999;
  font-size: 14px;
  font-style: italic;
}

/* 滚动条样式 */
.yw-login-username-dropdown::-webkit-scrollbar {
  width: 6px;
}

.yw-login-username-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.yw-login-username-dropdown::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.yw-login-username-dropdown::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.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: var(--yw-viewqueueheader-height);
}

/* 为注册和忘记密码页面的手机号输入框添加样式 */
.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-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);
}

.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-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: var(--yw-viewqueueheader-height);
  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;
}

/* 
 * 最近联系人列表样式
 * 直接复用 PaginatedContactsList 的样式，确保UI风格一致
 */

/* 主容器样式 - 与 PaginatedContactsList 完全一致 */
.paginated-contacts-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden; /* 防止整体容器出现滚动条 */
}

.paginated-contacts-list .search-container {
  flex-shrink: 0;
  padding: 0 0 12px 0;
  width: 100%;
  box-sizing: border-box;
}

.paginated-contacts-list .search-input {
  width: 100%;
  box-sizing: border-box;
}

/* 虚拟列表容器 */
.paginated-contacts-list .contacts-list-container {
  flex: 1 1;
  min-height: 0;
  overflow: hidden; /* 让Virtuoso组件自己处理滚动 */
  width: 100%;
}

.paginated-contacts-list .loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 12px;
  color: var(--semi-color-text-2);
  height: 200px;
}

/* 联系人项样式 */
.paginated-contacts-list .contact-item {
  padding: 8px 12px;
  border-bottom: none;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.paginated-contacts-list .contact-item:hover {
  background-color: var(--semi-color-fill-1);
}

.paginated-contacts-list .contact-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
}

.paginated-contacts-list .contact-checkbox .semi-checkbox-inner-display {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.paginated-contacts-list .contact-content {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.paginated-contacts-list .contact-name {
  font-size: 14px;
  color: var(--semi-color-text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

.paginated-contacts-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--semi-color-text-2);
  height: 200px;
}

.paginated-contacts-list .empty-text {
  font-size: 14px;
}

.paginated-contacts-list .loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 8px;
  color: var(--semi-color-text-2);
  font-size: 14px;
  height: 56px;
  box-sizing: border-box;
}

/* 确保Virtuoso组件的滚动条样式 */
.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller] {
  scrollbar-width: thin;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar {
  width: 6px;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-track {
  background: transparent;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 暗色主题适配 */
[theme-mode="dark"] .paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

[theme-mode="dark"] .paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 全选操作区域样式 */
.paginated-contacts-list .select-all-section {
  flex-shrink: 0;
  padding: 8px 12px 12px 12px;
  border-bottom: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-1);
}

.paginated-contacts-list .select-all-button-container {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}

.paginated-contacts-list .select-all-label {
  font-size: 14px;
  color: var(--semi-color-text-0);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.paginated-contacts-list .selection-info {
  font-size: 12px;
  color: var(--semi-color-text-1);
  background: var(--semi-color-primary-light-default);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.paginated-contacts-list .progress-text {
  font-size: 12px;
  color: var(--semi-color-text-2);
  white-space: nowrap;
}
.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;
  max-height: calc(100vh - 200px);
  border-radius: 8px;
  border: var(--yw-line);
}

.yw-organizational-group-new-left {
  width: 50%;
  height: 100%;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  border-right: var(--yw-line);
  min-height: 0;
}

.yw-organizational-group-new-left .group-new-left-main {
  flex: 1 1 auto;
  overflow: hidden; /* 移除外层滚动，让虚拟列表组件自己处理 */
  min-height: 0;
}

/* 移除不再需要的滚动条样式，因为已经让虚拟列表组件自己处理滚动 */

/* 当好友列表内容较少时，确保不会出现不必要的滚动条 */
.friend-opt-main .semi-checkboxGroup-vertical:not(:has(.semi-checkbox)) {
  height: auto;
  overflow: visible;
}

/* 优化空状态显示 */
.friend-opt-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  min-height: 200px;
  color: var(--semi-color-text-2);
}

.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;
  margin-left: 0;
}

.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;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* 现代化选择控制栏 */
.selection-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border: 1px solid #e1e6ff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.selection-actions {
  display: flex;
  align-items: center;
}

.select-all-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-all-label {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1890ff;
  color: var(--yw-color-primary, #1890ff);
  cursor: pointer;
}

.selection-summary {
  display: flex;
  align-items: center;
}

.total-friends-count {
  font-size: 12px;
  color: #666;
  background-color: #f0f0f0;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 右侧已选择成员区域 */
.selected-members-header {
  margin-bottom: 16px;
}

.header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--semi-color-text-0);
}

.selection-limit-info {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 16px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #e9ecef;
}

.selected-count {
  color: #1890ff;
  transition: color 0.2s ease;
  font-weight: 700;
}

.selected-count.warning {
  color: #fa8c16;
}

.selected-count.error {
  color: #ff4d4f;
  animation: pulse 2s infinite;
}

.limit-separator {
  color: #999;
  margin: 0 2px;
}

.max-limit {
  color: #666;
  font-weight: 500;
}

.limit-label {
  color: #666;
  margin-left: 2px;
  font-weight: 500;
}

.selection-status {
  font-size: 12px;
  flex: 1 1;
  margin-left: 4px;
  margin-top: 2px;
}

.status-hint {
  color: #999;
}

.status-normal {
  color: #52c41a;
}

.status-warning {
  color: #fa8c16;
  font-weight: 500;
}

.status-error {
  color: #ff4d4f;
  font-weight: 600;
}

/* 已选择成员网格布局 */
.selected-members-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

.selected-member-chip {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
}

.selected-member-chip:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.member-avatar {
  flex-shrink: 0;
  margin-right: 8px;
}

.member-info {
  flex: 1 1;
  min-width: 0;
}

.member-name {
  font-size: 14px;
  color: var(--semi-color-text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.remove-member-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px;
}

.remove-member-btn:hover {
  background-color: #ff4d4f;
  color: white;
}

/* 空状态优化 */
.empty-selection-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  min-height: 200px;
}

.empty-icon {
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--semi-color-text-1);
  margin-bottom: 8px;
}

.empty-subtitle {
  font-size: 14px;
  color: var(--semi-color-text-2);
}

/* 右侧区域整体样式 */
.yw-organizational-group-new-right {
  width: 50%;
  height: 100%;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.selected-members-body {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 确保flex子元素可以正确收缩 */
}

.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;
}

/* 统一底部按钮样式 */
.organizational-group-new-footer .semi-button {
  height: 40px !important;
  min-width: 80px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
}

/* 覆盖yw-but-ok的圆角样式，保持与取消按钮一致 */
.organizational-group-new-footer .yw-but-ok {
  border-radius: 8px !important;
}

.friend-opt-empty,
.organizational-opt-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 联系人标签页样式 */
.contact-tabs {
  display: flex;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--semi-color-border);
  background-color: var(--semi-color-fill-0);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.contact-tabs .tab-item {
  flex: 1 1;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--semi-color-text-1);
  background-color: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.contact-tabs .tab-item:hover {
  background-color: var(--semi-color-fill-1);
  color: var(--semi-color-text-0);
}

.contact-tabs .tab-item.active {
  color: var(--yw-color-primary);
  background-color: var(--semi-color-primary-light-default);
  border-bottom-color: var(--yw-color-primary);
}

.contact-tabs .tab-count {
  margin-left: 4px;
  font-size: 12px;
  opacity: 0.8;
  font-weight: normal;
}

/* 响应式标签页 */
@media (max-width: 768px) {
  .contact-tabs .tab-item {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* 暗色主题标签页样式 */
@media (prefers-color-scheme: dark) {
  .contact-tabs .tab-item:hover {
    background-color: var(--semi-color-fill-2);
  }
  
  .contact-tabs .tab-item.active {
    background-color: var(--semi-color-primary-light-active);
  }
}

.yw-blacklist {
  width: 100%;
  height: 100%;
  background-color: var(--yw-bg-base);
}

.yw-blacklist-content ul li {
  height: var(--yw-viewqueueheader-height);
  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-contacts-search {
  margin: 0;
  border-radius: 0;
}
#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;
}

.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: 0;
  right: 2px;
}

.yw-main-sider-item-badge-icon {
  width: 12px;
  height: 12px;
  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);
}