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

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

::-webkit-scrollbar-thumb {
  background-color: #b8b8b8;
  background-color: var(--color-scroll-thumb, #b8b8b8);
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #878787;
  background-color: var(--color-scroll-thumb-hover, #878787);
}

/* 暗色 */
body[theme-mode="dark"] ::-webkit-scrollbar-thumb {
  background: #565656;
  background: var(--color-scroll-thumb-dark, #565656);
}

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

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border: 4px solid var(--color-spinner-track, #f3f3f3);
  border-top: 4px solid #1890ff;
  border-top: 4px solid var(--color-spinner-head, #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;
}

/* ===================================================================
 * Time 时间分割线组件
 * 支持主题切换
 * =================================================================== */

.yw-message-time-box {
  width: 100%;
  margin: 8px auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-message-time {
  padding: 4px 8px 0;
  white-space: nowrap;
  width: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.yw-message-time-line1 {
  background-image: linear-gradient(360deg, transparent, var(--color-border-muted));
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  top: 13px;
  width: 50%;
  display: none;
  position: relative;
}
.yw-message-time-line2 {
  background-image: linear-gradient(360deg, var(--color-border-muted), transparent);
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  top: 13px;
  width: 50%;
  display: none;
  position: relative;
}

/* ===================================================================
 * HistorySplit 历史分割线组件
 * 支持主题切换
 * =================================================================== */

.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: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.yw-message-split-line1 {
  background-image: linear-gradient(360deg, transparent, var(--color-border-muted));
  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, var(--color-border-muted), transparent);
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  top: 13px;
  width: 50%;
  display: table-cell;
  position: relative;
}

/* ===================================================================
 * WKAvatar 头像组件
 * 支持主题切换
 * =================================================================== */

.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: var(--state-default-bg);
  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;
}

/* ===================================================================
 * MergeforwardMessageList 合并转发消息列表组件
 * 支持主题切换
 * =================================================================== */

.yw-mergeforwardmessagelist {
  width: 100%;
  height: 100%;
  background: var(--color-bg-card);
  background: var(--mergeforward-modal-bg, var(--color-bg-card));
}

.yw-mergeforwardmessagelist-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  font-size: var(--font-size-lg);
}

.yw-mergeforwardmessagelist-content {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  background-color: var(--color-bg-card);
  background-color: var(--mergeforward-modal-bg, var(--color-bg-card));
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 12px;
  max-width: 660px;
  margin: 0 auto;
}

.yw-mergeforwardmessagelist-content-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
}

.yw-mergeforwardmessagelist-content-msgs {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-sm) var(--spacing-md);
  box-sizing: border-box;
}

.yw-mergeforwardmessagelist-content-msg {
  display: flex;
  width: 100%;
  padding: 0 var(--spacing-xs);
  flex-wrap: nowrap;
  align-items: flex-start;
  min-height: 48px;
  gap: var(--spacing-xs);
}

.yw-mergeforwardmessagelist-content-msg.with-avatar {
  gap: var(--spacing-sm);
}

.yw-mergeforwardmessagelist-content-msg.no-avatar {
  gap: 44px;
}

.yw-mergeforwardmessagelist-content-msg.is-self {
  flex-direction: row-reverse;
}

.yw-mergeforwardmessagelist-content-msg.is-self .yw-mergeforwardmessagelist-content-msg-info {
  align-items: flex-end;
}

.yw-mergeforwardmessagelist-content-msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  align-self: flex-start;
}

.yw-mergeforwardmessagelist-content-msg-avatar.placeholder {
  visibility: hidden;
}

.yw-mergeforwardmessagelist-content-msg-info {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--spacing-xxs);
  max-width: 78%;
  align-items: flex-start;
}

.yw-mergeforwardmessagelist-content-msg-meta {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-xss);
  min-height: 20px;
  margin-bottom: calc(var(--spacing-xss) / 2);
}

.yw-mergeforwardmessagelist-content-msg-name {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.yw-mergeforwardmessagelist-content-msg-bubble {
  display: inline-flex;
  flex-direction: column;
  background: #ffffff;
  background: var(--mergeforward-bubble-bg, #ffffff);
  border-radius: 8px;
  padding: 12px 14px;
  max-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
  align-self: flex-start;
  margin-top: 0;
}

.yw-mergeforwardmessagelist-content-msg.is-self .yw-mergeforwardmessagelist-content-msg-bubble {
  background: var(--color-accent);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-card);
  box-shadow: var(--mergeforward-self-shadow, var(--shadow-card));
  align-self: flex-end;
}

.yw-mergeforwardmessagelist-content-msg-text {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.yw-mergeforwardmessagelist-content-msg-text img,
.yw-mergeforwardmessagelist-content-msg-text video {
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-md);
  display: block;
}

.yw-mergeforwardmessagelist-content-msg-time {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  padding: var(--spacing-xss) var(--spacing-xs) 0;
}

.yw-mergeforwardmessagelist-content-msg.is-self .yw-mergeforwardmessagelist-content-msg-time {
  align-self: flex-end;
}

.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: var(--radius-sm);
  max-width: 100%;
  margin: var(--spacing-xs) 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: var(--radius-sm);
  overflow: hidden;
  background-color: var(--state-default-bg);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--spacing-xs) 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: var(--color-bg-chat);
}

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

.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(--color-accent);
  color: var(--svg-selected-color, var(--color-accent));
}

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

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

/* ===================================================================
 * Content 消息内容组件
 * 支持主题切换
 * =================================================================== */

/* 通用内容样式 */
.content-container {
  max-width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* 视频内容样式 */
.content-video-container {
  position: relative;
  border-radius: var(--radius-base);
  overflow: hidden;
  background-color: var(--color-bg-page);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  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: var(--radius-base);
  -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);
  background-color: var(--color-video-overlay, rgba(0, 0, 0, 0.6));
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

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

.content-video-duration {
  position: absolute;
  bottom: var(--spacing-sm);
  right: var(--spacing-sm);
  background-color: rgba(0, 0, 0, 0.6);
  background-color: var(--color-video-overlay, rgba(0, 0, 0, 0.6));
  color: var(--color-text-white);
  padding: var(--radius-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  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: var(--color-bg-mask);
  color: var(--color-text-white);
}

.content-loading-spinner {
  width: var(--control-height-md);
  height: var(--control-height-md);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  margin-bottom: var(--spacing-sm);
}

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

.content-loading-text,
.content-video-error-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.content-video-error-text {
  color: var(--color-danger);
}

.content-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-base);
  /* background-color: var(--color-bg-page); */
  max-width: 100%;
  margin: 0 auto;
}

.content-image {
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-base);
  display: block;
}

.content-file-container {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  background-color: var(--state-default-bg);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.content-file-icon {
  margin-right: var(--spacing-md);
  font-size: var(--font-size-3xl);
  color: var(--color-text-secondary);
}

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

.content-file-name {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--spacing-xs);
}

.content-file-size {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.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: var(--font-size-base);
}

/* 回复内容样式 */
.yw-message-text-reply {
  display: flex;
  color: var(--color-sender-text-secondary);
  font-size: var(--font-size-sm);
  flex-direction: column;
  cursor: pointer;
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-sender-text-disabled);
  width: 100%;
}

.yw-message-text-reply.yw-message-text-reply-recv {
  color: var(--color-text-muted);
  border-bottom: var(--color-border-line);
}

.yw-message-text-reply-author {
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--radius-xs);
  font-size: var(--font-size-sm);
}

.yw-message-text-reply-authoravatar {
  margin-right: var(--spacing-xs);
  display: flex;
  align-items: center;
}

.yw-message-text-reply-content {
  width: 100%;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1; /* 标准属性，提高兼容性 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-spaces;
  font-size: var(--font-size-sm);
}

/* 调试内容样式 */
.debug-content-container {
  padding: var(--spacing-md);
  background-color: var(--color-bg-page);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
  font-family: var(--font-family-mono);
}

.debug-section {
  margin-bottom: var(--spacing-md);
}

.debug-section h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.debug-item {
  display: flex;
  margin-bottom: var(--spacing-xs);
}

.debug-label {
  font-weight: var(--font-weight-bold);
  margin-right: var(--spacing-xs);
  color: var(--color-text-secondary);
  min-width: 100px;
}

.debug-value {
  color: var(--color-text-primary);
  word-break: break-all;
}

.debug-text-content {
  background-color: var(--color-bg-card);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-muted);
  margin-top: var(--spacing-md);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* 卡片内容样式 */
.content-card-container {
  width: 100%;
  border: var(--color-border-line);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.content-card-header {
  padding: var(--spacing-md);
  background-color: var(--state-default-bg);
  font-weight: var(--font-weight-medium);
}

.content-card-body {
  padding: var(--spacing-md);
}

/* 合并转发内容样式 */
.merge-forward-container {
  width: 100%;
  border: var(--color-border-line);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.merge-forward-header {
  padding: var(--spacing-md);
  background-color: var(--state-default-bg);
  font-weight: var(--font-weight-medium);
  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: var(--spacing-md);
  color: rgba(0, 0, 0, 0.5);
}

.merge-forward-body {
  padding: var(--spacing-md);
}

.merge-forward-preview-item {
  margin-bottom: var(--spacing-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

.yw-multi-media-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-top: var(--spacing-sm);
  line-height: 1.4;
  word-break: break-word;
  white-space: break-spaces;
}

.yw-multi-media-grid-custom {
  border-radius: var(--radius-base);
  overflow: hidden;
}

.yw-multi-media-row {
  display: flex;
  gap: var(--radius-xs);
}

.yw-multi-media-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--color-bg-page);
  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: var(--radius-full);
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  pointer-events: none;
}

.yw-multi-media-video-duration {
  position: absolute;
  bottom: var(--spacing-xs);
  right: var(--spacing-xs);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: var(--font-size-xs);
  padding: var(--radius-xs) var(--spacing-xs);
  border-radius: var(--radius-xs);
  font-family: var(--font-family-mono);
}

.yw-multi-media-loading,
.yw-multi-media-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-page);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.yw-multi-media-error {
  color: var(--color-text-muted);
}

.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: var(--font-size-xl);
  font-weight: var(--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: var(--control-height-lg);
  height: var(--control-height-lg);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
  z-index: 1000;
  outline: none;
  box-shadow: var(--shadow-base);
}

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

.yw-multi-media-preview-prev {
  left: var(--spacing-lg);
}

.yw-multi-media-preview-next {
  right: var(--spacing-lg);
}

.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: var(--spacing-xl);
  color: var(--color-danger);
  text-align: center;
}

/* 图片预览模态框样式 */
.yw-image-preview-modal.yw-base-modal .semi-modal-content {
  background: var(--semi-color-bg-0);
}

.yw-image-preview-modal .semi-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yw-image-preview-modal .semi-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  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: var(--spacing-xl);
}

.yw-image-preview-toolbar {
  display: flex;
  gap: var(--spacing-sm);
}

.yw-image-preview-toolbar-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--radius-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
}

.yw-image-preview-toolbar-btn:hover {
  background: var(--semi-color-fill-0);
}

.yw-image-preview-modal .semi-modal-body {
  padding: 0;
  /* 将内容区高度限制到视口，避免 body 自身出现滚动条 */
  max-height: 72vh;
  overflow: hidden;
}

.yw-image-preview-modal .semi-modal-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
}

.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: 72vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}

.yw-image-preview-error {
  padding: var(--spacing-xl);
  color: var(--color-danger);
  text-align: center;
} 
/* ===================================================================
 * Image 图片消息组件
 * 支持主题切换
 * =================================================================== */

/* 图片预览模态框样式 - 与视频预览保持一致 */
.yw-image-preview-modal.yw-base-modal .semi-modal-content {
  background: var(--semi-color-bg-0);
}

.yw-image-preview-modal .semi-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yw-image-preview-modal .semi-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  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: var(--spacing-xl);
}

/* 图片预览工具栏样式 */
.yw-image-preview-toolbar {
  display: flex;
  gap: var(--spacing-sm);
}

.yw-image-preview-toolbar-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--radius-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
}

.yw-image-preview-toolbar-btn:hover {
  background: var(--semi-color-fill-0);
}

.yw-image-preview-modal .semi-modal-body {
  padding: 0;
  /* 将内容区高度限制到视口，避免 body 自身出现滚动条 */
  max-height: 72vh;
  overflow: hidden;
}

.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-modal .semi-modal-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
}

.yw-image-preview-image {
  /* 保持等比完整展示图片 */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}

.yw-image-preview-error {
  padding: var(--spacing-xl);
  color: var(--color-danger);
  text-align: center;
}

/* 图片预览操作按钮 */
.yw-image-preview-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.yw-image-preview-action-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
}

.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: var(--color-border-line);
  overflow: hidden;
  border-radius: var(--radius-base);
}

.yw-message-image-container img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}

/* 小图标特殊处理 */
.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: var(--color-text-muted);
  font-size: var(--font-size-base);
  background-color: var(--state-default-bg);
  border-radius: var(--radius-base);
  position: relative;
}

/* 图片错误状态 */
.yw-message-image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--state-default-bg);
  border-radius: var(--radius-base);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.yw-message-image-error-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  text-align: center;
  padding: var(--spacing-md);
}

/* 图片上传进度条样式 */
.yw-message-image-progress {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 10;
}

.yw-message-image-progress-bar {
  width: 100%;
  height: var(--spacing-xs);
  background-color: var(--color-video-overlay);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.yw-message-image-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-xs);
  transition: width var(--transition-layer);
}

.yw-message-image-progress-text {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.yw-message-image-upload-error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  text-align: center;
  margin-top: var(--spacing-xs);
}

/* ===================================================================
 * Video 视频消息组件
 * 支持主题切换
 * =================================================================== */

.yw-message-video-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.yw-message-video-content-time {
  align-items: center;
  background-color: var(--color-video-overlay);
  border-radius: var(--radius-xl);
  color: var(--color-text-white);
  display: flex;
  font-size: var(--font-size-sm);
  height: 1.125rem;
  left: var(--spacing-sm);
  line-height: 1;
  padding: 0 var(--spacing-sm);
  position: absolute;
  top: var(--spacing-sm);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 2;
}

.yw-message-video-content-video img {
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.flexible-modal {
  position: absolute;
  z-index: 1;
  border: var(--color-border-line);
  background: var(--color-bg-card);
}
.flexible-modal-mask {
  position: fixed;
  height: 100%;
  background: var(--color-bg-mask);
  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 var(--color-text-secondary);
  border-right: solid 2px var(--color-text-secondary);
}
.flexible-modal-drag-area {
  background: var(--state-hover-bg);
  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: var(--state-default-bg);
  border-radius: var(--radius-base);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.yw-message-video-loading-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* 视频错误状态 */
.yw-message-video-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--state-default-bg);
  border-radius: var(--radius-base);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.yw-message-video-error-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* 视频容器样式 */
.yw-message-video {
  background-color: var(--state-default-bg);
  border-radius: var(--radius-base);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  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: var(--radius-base);
}

/* 确保视频元素不显示播放控件 */
.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 var(--transition-base);
}

.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: var(--state-default-bg);
  border-radius: var(--radius-base);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.yw-message-video-cover-loading-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* 视频预览模态框样式 */
.yw-video-preview-modal.yw-base-modal .semi-modal-content {
  background: var(--semi-color-bg-0);
}

.yw-video-preview-modal .semi-modal-header {
  padding: var(--spacing-lg) var(--spacing-xl) !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: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  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: var(--spacing-xl);
}

/* 视频预览工具栏样式 */
.yw-video-preview-toolbar {
  display: flex;
  gap: var(--spacing-sm);
}

.yw-video-preview-toolbar-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--radius-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
}

.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: var(--control-height-md);
  height: var(--control-height-md);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base);
}

.yw-video-preview-modal .semi-modal-close:hover {
  background-color: var(--state-active-bg);
}

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

.yw-video-preview-video {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-sm);
}

.yw-video-preview-error {
  padding: var(--spacing-xl);
  color: var(--color-danger);
  text-align: center;
}

/* 预览弹窗内的加载动画（旋转器） */
.yw-video-preview-spinner {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-text-white);
  border-radius: var(--radius-full);
  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: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.yw-video-preview-action-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
}

.yw-video-preview-action-btn:hover {
  background: var(--semi-color-fill-0);
}

/* 视频上传进度条样式 */
.yw-message-video-progress {
  position: absolute;
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 10;
}

.yw-message-video-progress-bar {
  width: 100%;
  height: var(--spacing-xs);
  background-color: var(--color-video-overlay);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.yw-message-video-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-xs);
  transition: width var(--transition-layer);
}

.yw-message-video-progress-text {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.yw-message-video-upload-error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  text-align: center;
  margin-top: var(--spacing-xs);
}

/* ===================================================================
 * Base 消息基础组件
 * 支持主题切换
 * =================================================================== */

:root {
  --layout-max-message-width: 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(--transition-layer);
}

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

.senderName {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  /* text-transform: capitalize; */
  padding-bottom: 1px;
}

.senderAvatar img {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: var(--radius-full);
}

.yw-message-base-box {
  display: flex;
  gap: var(--spacing-lg);
  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: block;
  text-align: center;
}

.yw-message-base-bubble-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  /* 移除固定最小宽度，改为自适应内容宽度 */
  width: -moz-fit-content;
  width: fit-content;
  /* 设置最大宽度限制，确保不会过宽 */
  max-width: min(540px, calc(100vw - 120px));
  max-width: min(var(--layout-max-message-width), 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: var(--spacing-sm);
}

/* 消息底部信息区域（时间+状态） */
.yw-message-base-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  padding-top: var(--spacing-xs);
}

/* 发送者消息底部右对齐 */
.yw-message-base-bubble-box.send .yw-message-base-bubble-footer {
  justify-content: flex-end;
}

/* 接收者消息底部左对齐 */
.yw-message-base-bubble-box.recv .yw-message-base-bubble-footer {
  justify-content: flex-start;
}

.yw-message-base-bubble {
  color: var(--color-text-primary);
  background-color: var(--color-message-bg);
  display: flex;
  /* margin-bottom: 4px; */
  padding: var(--spacing-md);
  position: relative;
  word-wrap: break-word;
  max-width: 100%;
  /* 设置最小宽度，确保短消息也有合理的显示效果 */
  min-width: 60px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: var(--font-size-base);
  /* 确保内容可以正确换行 */
  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(--color-message-sender-bg);
}

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

/* ===================================================================
 * 响应式设计 - 使用 data-screen-size 选择器与 WKLayout 保持一致
 * =================================================================== */

/* Tablet 平板模式 */
[data-screen-size="tablet"] .yw-message-base-bubble-box {
  max-width: min(540px, calc(100vw - 100px));
  max-width: min(var(--layout-max-message-width), calc(100vw - 100px));
}

/* Mobile 移动端模式 */
[data-screen-size="mobile"] .yw-message-base-bubble-box {
  max-width: calc(100vw - 80px);
}

[data-screen-size="mobile"] .yw-message-base-bubble-box-top {
  min-width: 100px;
}

[data-screen-size="mobile"] .yw-message-base-bubble {
  min-width: 50px;
  font-size: var(--font-size-base);  /* 移动端保持可读性 */
}

[data-screen-size="mobile"] .yw-message-base-recv {
  padding-left: 12px;  /* 移动端减小左侧 padding */
}

[data-screen-size="mobile"] .yw-message-base-send {
  padding-right: 12px;  /* 移动端减小右侧 padding */
}

[data-screen-size="mobile"] .yw-message-base-box {
  gap: 10px;  /* 移动端减小头像与气泡间距 */
}

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

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

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

.yw-message-base-bubble-box.recv .yw-message-base-bubble {
  border-radius: var(--radius-base);
}

.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(--color-message-sender-bg);
}

.yw-message-base-bubble-box.recv .svgAppendix .corner {
  fill: var(--color-message-bg);
}

/* .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(--transition-layer);
}

.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: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  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(--color-bg-card);
}

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

.messageTime {
  font-size: var(--font-size-sm);
  white-space: nowrap;
  color: var(--color-text-secondary);
  /* 确保时间文本不会被压缩 */
  flex-shrink: 0;
}

/* 接收者消息时间色 */
.yw-message-base-bubble-box.recv .messageTime {
  color: var(--color-text-secondary);
}

/* 发送者消息时间色 */
.yw-message-base-bubble-box.send .messageTime {
  color: var(--color-text-secondary);
}

.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: var(--font-weight-medium);
  color: var(--color-message-receiver-text);
  unicode-bidi: plaintext;
  /* 用户名占据剩余空间，确保与时间两端对齐 */
  flex: 1 1;
  /* 设置最小宽度，防止用户名被过度压缩 */
  min-width: 0;
}

/* 消息状态图标容器 */
.messageStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* 已读状态：蓝色背景 + 白色双勾 */
.messageStatus.status-read {
  background-color: var(--color-accent);
}

.icon-message-read {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text-white);
  letter-spacing: 0;
}

.icon-message-read::before {
  content: "";
  font-style: normal;
}

/* 已发送/未读状态：灰色背景 + 白色单勾 */
.messageStatus.status-sent {
  background-color: var(--color-text-muted);
}

.icon-message-succeeded {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
}

.icon-message-succeeded::before {
  content: "";
  font-style: normal;
}

/* 发送中状态：灰色背景 + 旋转动画 */
.messageStatus.status-pending {
  background-color: var(--color-text-muted);
}

.icon-message-pending {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-message-pending::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--color-text-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

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

/* 发送失败状态图标 */
.messageFail {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  border-radius: var(--radius-full);
  background-color: var(--color-danger);
  transition: background-color var(--transition-base);
  flex-shrink: 0;
}

.messageFail:hover {
  background-color: var(--color-danger-hover);
}

.messageFail img {
  width: 10px;
  height: 10px;
  display: block;
  filter: brightness(0) invert(1); /* 将图标变为白色 */
}

/* 发送失败原因 - 在 bubble-box 内部，自动与气泡右对齐 */
.yw-message-error-reason {
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
  color: var(--color-error);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  flex-wrap: nowrap;
  /* 确保宽度与父容器 bubble-box 一致 */
  width: 100%;
}

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

.yw-message-add-friend-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* 发送失败菜单容器样式 */
.yw-message-fail-menu-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  min-width: 100px;
}

/* 发送失败菜单项样式 */
.yw-message-fail-menu-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--semi-color-text-0);
  border-radius: var(--semi-border-radius-small);
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  min-height: 32px;
  white-space: nowrap;
}

.yw-message-fail-menu-item:hover {
  background-color: var(--semi-color-fill-0);
}

.yw-message-fail-menu-item:active {
  background-color: var(--semi-color-fill-1);
  transform: scale(0.98);
}

/* 删除按钮（危险操作）特殊样式 */
.yw-message-fail-menu-item-danger {
  color: #f53f3f;
}

.yw-message-fail-menu-item-danger:hover {
  background-color: rgba(245, 63, 63, 0.1);
  color: #f53f3f;
}

.yw-message-fail-menu-item-danger:active {
  background-color: rgba(245, 63, 63, 0.15);
}

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

.yw-message-item-pinned-icon {
  font-size: 8px;
  margin-right: var(--spacing-xs);
}

.yw-message-edited-mark {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-left: var(--spacing-xs);
  opacity: 0.7;
}

.yw-check {
  cursor: pointer;
}

/* ===================================================================
 * Mergeforward 合并转发消息组件
 * 支持主题切换
 * =================================================================== */

.yw-mergeforwards {
  width: var(--msg-card-width-standard);
  background-color: var(--msg-card-bg);
  border-radius: var(--radius-base);
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--transition-base);
}

.yw-mergeforwards-content {
  padding: var(--spacing-md);
  color: var(--msg-card-title);
}

.yw-mergeforwards-content-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--msg-card-title);
  white-space: break-spaces;
  transition: color var(--transition-base);
}

.yw-mergeforwards-content-items {
  padding-bottom: var(--spacing-xs);
}

.yw-mergeforwards-content-items .yw-mergeforwards-content-item {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  color: var(--msg-card-subtitle);
  transition: color var(--transition-base);
}

.yw-mergeforwards-content-tip {
  display: flex;
  justify-content: space-between;
  color: var(--msg-card-meta);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
  transition: color var(--transition-base);
}

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

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

/* 发送者样式覆盖（品牌色背景上） */

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

/* 弹窗整体背景 */
.yw-mergeforward-modal .semi-modal-content {
  background: var(--mergeforward-modal-bg);
}

/* ===================================================================
 * Conversation 聊天会话组件
 * 使用全局主题变量，保持一致性
 * =================================================================== */

:root {
  /* 组件级别变量 - 使用全局变量作为基础 */
  --conversation-padding: var(--spacing-lg);
  --conversation-gap: var(--spacing-md);
  --conversation-border-radius: var(--radius-lg);

  /* 布局高度变量 - 统一为228px */
  --footer-min-height: 228px;
  --reply-preview-height: 64px;

  /* 消息相关尺寸 */
  --message-padding-vertical: var(--spacing-xl);
  --message-reminder-width: var(--spacing-xs);
  --message-reminder-border-radius: var(--radius-xs);

  /* 拖拽遮罩相关 */
  --drag-mask-padding: var(--spacing-lg);
  --drag-mask-border-radius: var(--radius-sm);
  --drag-mask-font-size: var(--font-size-lg);
  --drag-mask-content-padding: var(--spacing-xl);

  /* 回复视图相关 */
  --reply-content-margin-left: var(--spacing-lg);
  --reply-content-margin-top: var(--radius-xs);
  --reply-userinfo-margin-left: var(--spacing-xs);
  --reply-close-padding: var(--spacing-xl);

  /* 多选面板相关 */
  --multiple-panel-height: 152px;
  --multiple-panel-item-margin: 60px;
  --multiple-panel-icon-size: 60px;
  --multiple-panel-icon-svg-size: var(--icon-size-lg);
  --multiple-panel-title-font-size: var(--font-size-base);
  --multiple-panel-title-margin-top: var(--spacing-xs);
  --multiple-panel-close-top: var(--spacing-xl);
  --multiple-panel-close-left: var(--control-height-lg);
  --multiple-panel-close-padding: var(--spacing-md);

  /* 定位按钮相关 */
  --position-view-bottom: var(--spacing-lg);
  --position-view-right: var(--spacing-lg);
  --position-item-size: 50px;
  --position-item-margin-bottom: var(--spacing-md);
  --position-item-img-size: var(--icon-size-md);
  --position-item-font-size: 1.75rem;

  /* 未读计数相关 */
  --unread-count-min-width: var(--spacing-2xl);
  --unread-count-height: var(--spacing-2xl);
  --unread-count-padding: 0 var(--spacing-sm);
  --unread-count-border-radius: var(--radius-xl);
  --unread-count-font-size: var(--font-size-base);
  --unread-count-top: -0.3rem;
  --unread-count-right: -0.3rem;

  /* 滚动条相关 */
  --scrollbar-width: var(--spacing-xs);
  --scrollbar-border-radius: var(--radius-xs);

  /* 动画时间 */
  --reminder-animation-duration: 1.5s;
  --reminder-move-animation-duration: 2s;
  --position-transition-duration: var(--transition-fast);
  --opacity-transition-duration: var(--transition-base);

  /* 响应式断点相关尺寸 - 统一为228px */
  --mobile-footer-margin: 0;
  --mobile-footer-min-height: 228px; /* mobile 与 desktop 保持一致 */
  --mobile-reply-margin: 0;
  --mobile-multiple-panel-height: 152px;
  --small-screen-footer-min-height: 228px; /* 与所有断点保持一致 */
  --small-screen-multiple-panel-height: 120px;
}

/* Conversation主容器 - 支持 Container Queries */
.yw-conversation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  /* 声明为容器查询上下文 */
  container-type: inline-size;
  container-name: conversation;
}


/* 消息内容区域 */
.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;
}

/* 系统公告会话内消息项：只保留向下间距，由父节点 padding-bottom 控制 */
.yw-conversation-body-system .yw-message-item-root {
  padding-top: 0;
  padding-bottom: 16px;
}

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

/* 输入框区域 */
.yw-conversation-footer {
  flex-shrink: 0;
  position: static;
  min-height: 228px;
  min-height: var(--footer-min-height);
  height: 228px;
  height: var(--footer-min-height); /* tablet/desktop 固定高度 268px */
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: all var(--transition-layer);
  border-top: var(--color-border-line);
}

/* mobile 尺寸下 footer 高度 198px */
.yw-layout[data-screen-size="mobile"] .yw-conversation-footer {
  min-height: 228px;
  min-height: var(--mobile-footer-min-height);
  height: 228px;
  height: var(--mobile-footer-min-height);
}

.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: var(--spacing-lg);
  padding: var(--drag-mask-padding);
}

.yw-conversation-content-fileupload-mask-content {
  width: 100%;
  height: 100%;
  border: 1px dashed var(--color-text-muted);
  border-radius: var(--radius-sm);
  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: var(--font-size-lg);
  font-size: var(--drag-mask-font-size);
  font-weight: 500;
  padding: var(--spacing-xl);
  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, var(--color-accent), var(--color-accent-4));
  border-radius: 0 2px 2px 0;
}

.yw-replyview-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: var(--spacing-lg);
  margin-left: var(--reply-content-margin-left);
  color: var(--color-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: var(--radius-xs);
  margin-top: var(--reply-content-margin-top);
}

.yw-replyview-content-second {
  margin-top: var(--radius-xs);
  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: var(--spacing-xs);
  margin-left: var(--reply-userinfo-margin-left);
}

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

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

.yw-replyview-close {
  height: 100%;
  padding: 0px var(--spacing-xl);
  padding: 0px var(--reply-close-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--color-border-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, var(--color-warning), var(--color-warning-hover));
  border-radius: 0 2px 2px 0;
}

.yw-editview-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: var(--spacing-lg);
  margin-left: var(--reply-content-margin-left);
  color: var(--color-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: var(--radius-xs);
  margin-top: var(--reply-content-margin-top);
}

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

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

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

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

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

/* 多选面板 - 统一与输入框的样式 */
.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(--state-default-border);
  background-color: var(--color-bg-card);
  /* box-shadow: 0.3rem -0.2rem 0.8rem 0.05rem rgb(114 114 114 / 5%); */
  transition: all var(--transition-layer);
}

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

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

.yw-multiplepanel {
  width: 100%;
  height: 100%;
  padding: var(--spacing-md);
  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(--color-bg-page);
  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: var(--icon-size-lg);
  width: var(--multiple-panel-icon-svg-size);
  height: var(--icon-size-lg);
  height: var(--multiple-panel-icon-svg-size);
  fill: var(--color-text-primary);
}
.yw-multiplepanel-content-item-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-size: var(--multiple-panel-title-font-size);
  margin-top: var(--spacing-xs);
  margin-top: var(--multiple-panel-title-margin-top);
}

.yw-multiplepanel-close {
  position: absolute;
  top: var(--spacing-xl);
  top: var(--multiple-panel-close-top);
  left: var(--control-height-lg);
  left: var(--multiple-panel-close-left);
  padding: var(--spacing-md);
  padding: var(--multiple-panel-close-padding);
  cursor: pointer;
}

.yw-conversationpositionview {
  position: absolute;
  bottom: var(--spacing-lg);
  bottom: var(--position-view-bottom);
  right: var(--spacing-lg);
  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(--color-bg-card);
  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 var(--transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity var(--transition-base) 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: var(--spacing-md);
  margin-bottom: var(--position-item-margin-bottom);
  position: relative;
}

/* 提醒消息按钮样式 */
.yw-conversationpositionview-item-reminder {
  background-color: var(--color-warning);
}

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

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

.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: var(--spacing-2xl);
  min-width: var(--unread-count-min-width);
  height: var(--spacing-2xl);
  height: var(--unread-count-height);
  padding: 0 var(--spacing-sm);
  padding: var(--unread-count-padding);
  border-radius: var(--radius-xl);
  border-radius: var(--unread-count-border-radius);
  font-size: var(--font-size-base);
  font-size: var(--unread-count-font-size);
  line-height: var(--spacing-2xl);
  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: var(--color-danger);
  color: var(--color-text-white);
  pointer-events: none;
}

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

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

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

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

/* ===================================================================
 * Container Queries - 基于聊天区域宽度的响应式
 * =================================================================== */

/* 窄容器布局 (< 600px) */
@container conversation (max-width: 600px) {
  .yw-conversation-footer,
  .yw-conversation-multiple-panel {
    margin: 0;
    margin: var(--mobile-footer-margin);
  }

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

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

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

  /* 窄容器下的定位按钮优化 */
  .yw-positionview {
    --position-view-right: 0.5rem;
    --position-view-bottom: 0.5rem;
  }

  .yw-positionview-item {
    --position-item-size: 42px;
  }
}

/* 超窄容器布局 (< 400px) */
@container conversation (max-width: 400px) {
  .yw-conversation-footer {
    min-height: 228px;
    min-height: var(--small-screen-footer-min-height);
  }

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

/* 高度受限场景仍使用视口查询 */
@media screen and (max-height: 600px) {
  .yw-conversation-footer {
    min-height: 228px;
    min-height: var(--small-screen-footer-min-height);
  }

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

/* ===================================================================
 * Fallback: 不支持 Container Queries 的浏览器
 * =================================================================== */
@supports not (container-type: inline-size) {
  @media screen and (max-width: 640px) {
    .yw-conversation-footer,
    .yw-conversation-multiple-panel {
      margin: 0;
      margin: var(--mobile-footer-margin);
    }

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

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

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

/* 高亮定位消息样式（与 MessageItem 一致） */
.yw-message-highlight {
  background: var(--color-message-highlight-bg);
  box-shadow: inset 0 0 0 2px var(--color-message-highlight-border);
  border-radius: 8px;
  animation: yw-highlight-pulse 2s ease-out;
}

/* 高亮动画：闪烁两次后保持 */
@keyframes yw-highlight-pulse {
  0% {
    background: var(--color-message-highlight-bg);
    box-shadow: inset 0 0 0 2px var(--color-message-highlight-border), 0 0 12px var(--color-message-highlight-border);
  }
  25% {
    background: transparent;
    box-shadow: inset 0 0 0 2px transparent, 0 0 0 transparent;
  }
  50% {
    background: var(--color-message-highlight-bg);
    box-shadow: inset 0 0 0 2px var(--color-message-highlight-border), 0 0 12px var(--color-message-highlight-border);
  }
  75% {
    background: transparent;
    box-shadow: inset 0 0 0 2px transparent, 0 0 0 transparent;
  }
  100% {
    background: var(--color-message-highlight-bg);
    box-shadow: inset 0 0 0 2px var(--color-message-highlight-border);
  }
}

/* ===================================================================
 * ContextMenus 右键菜单组件
 * 支持主题切换
 * =================================================================== */

.yw-contextmenus {
  background-color: var(--color-bg-card) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: var(--spacing-sm) 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;
}

/* 子菜单面板需要高于一级菜单，避免小视窗下自动贴边/回弹时被遮挡 */
.yw-contextmenus--submenu {
  z-index: 10001 !important;
}

/* 菜单项样式 */
.yw-contextmenus .szh-menu__item {
  padding: 6px var(--spacing-lg) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-regular) !important;
  color: var(--color-text-primary) !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast) !important;
  min-height: var(--control-height-md) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.yw-contextmenus .szh-menu__item:hover {
  background-color: var(--color-bg-hover) !important;
}

.yw-contextmenus .szh-menu__item:focus {
  background-color: var(--color-bg-hover) !important;
  outline: none !important;
}

.yw-contextmenus .szh-menu__item:active {
  background-color: var(--color-bg-active) !important;
}

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

.yw-contextmenu-dangerous:hover {
  background-color: var(--color-error-bg) !important;
}

.yw-contextmenus-icon {
  flex-shrink: 0;
  margin-right: 4px;
}

.yw-contextmenus-text {
  flex: 1 1 auto;
  min-width: 0;
}

.yw-contextmenus .submenu-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yw-contextmenus .szh-menu__arrow {
  margin-left: auto;
}

/* ================= 全局覆盖 @szhsin/react-menu 主题 ================= */

/* 所有菜单（包含通过 Portal 渲染的子菜单）统一使用主题面板样式 */
.szh-menu {
  background-color: var(--color-bg-card) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: var(--shadow-dropdown) !important;
  padding: var(--spacing-sm) 0 !important;
}

/* 统一菜单项的基础样式，保证二级菜单与一级菜单一致 */
.szh-menu__item {
  padding: 6px var(--spacing-lg) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-regular) !important;
  color: var(--color-text-primary) !important;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  min-height: var(--control-height-md) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* 悬停 / 聚焦 / 活动态都走主题变量，兼容明亮 + 暗黑 */
.szh-menu__item--hover,
.szh-menu__item:hover,
.szh-menu__item:focus {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

.szh-menu__item--active {
  background-color: var(--color-bg-active) !important;
}

/* 父级菜单项在子菜单展开时保持与 hover 一致的高亮，不使用库默认的蓝色选中态 */
.szh-menu__item--open {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}


/* ===================================================================
 * Mention @提及组件
 * 支持主题切换
 * =================================================================== */

.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(--color-bg-card);
  border: var(--color-border-line);
  font-size: 10pt;
  overflow-y: auto;
}

.mentions__suggestions__item {
  padding: 5px 15px;
  border-bottom: var(--color-border-line);
}

.mentions__suggestions__item--focused {
  background-color: var(--state-hover-bg);
}

.mentions__mention {
  position: relative;
  z-index: 1;
  color: var(--color-accent);
  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: var(--color-scroll-thumb);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ===================================================================
 * MessageInput 消息输入组件
 * 支持响应式和主题切换
 * =================================================================== */

.yw-messageinput-box {
  width: 100%;
  height: 100%; /* 继承父容器高度，由 --footer-min-height 控制 */
  position: relative;
  display: flex;
  flex-direction: column;
  
  /* 声明为容器查询上下文 */
  container-type: inline-size;
  container-name: messageinput;
}

/* 输入框区域 - 全宽，不被发送按钮遮挡 */
.yw-messageinput-inputbox {
  flex: 1 1;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-xl);
  box-sizing: border-box;
  position: relative;
}

.yw-messageinput-input {
  height: 100%;
  width: 100%;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  overflow-y: auto;
  overflow-x: hidden;
  display: inline-block;
  -webkit-user-modify: read-write-plaintext-only;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-thumb) transparent;
}

/* Webkit浏览器滚动条样式 */
.yw-messageinput-input::-webkit-scrollbar {
  width: var(--spacing-sm);
}

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

.yw-messageinput-input::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: var(--radius-xs);
}

.yw-messageinput-input::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}

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

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

/* textarea的Webkit浏览器滚动条样式 */
.yw-messageinput-input textarea::-webkit-scrollbar {
  width: var(--spacing-sm);
}

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

.yw-messageinput-input textarea::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 3px;
}

.yw-messageinput-input textarea::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}

.yw-messageinput-input:empty:before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px); /* \u9884\u7559\u7a7a\u95f4\u907f\u514d\u622a\u65ad */
}

/* placeholder \u6837\u5f0f\u4f18\u5316 */
.yw-messageinput-input::-moz-placeholder {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yw-messageinput-input::placeholder {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-messageinput-input textarea::-moz-placeholder {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-messageinput-input textarea::placeholder {
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-messageinput-bar {
  height: 44px;
  min-height: 44px;
  width: 100%;
  display: flex;
  flex-shrink: 0;
}

.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-footer {
  height: 48px;
  min-height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--spacing-xl) var(--spacing-md);
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 发送按钮 */
.yw-messageinput-sendbtn {
  padding: 6px 24px !important;
  height: 32px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
}

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

.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(--color-text-secondary);
  /* background-color: #1264a3; */
}

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

.quickReplyPanel {
  position: absolute;
  box-shadow: var(--shadow-dropdown);
  max-height: 400px;
  overflow-x: hidden;
  bottom: 0;
  background-color: var(--color-bg-card);
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-border-muted);
}

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

.quickReplyPanel ul li {
  list-style-type: none;
  height: 60px;
  border-bottom: var(--color-border-line);
  cursor: pointer;
}

.quickReplyItem:hover {
  background-color: var(--color-bg-hover);
}

.quickReplySelect {
  background-color: var(--color-accent) !important;
  color: var(--color-text-white) !important;
}

.yw-messageinput-reply {
  margin: 10px 10px 0px 10px;
  background-color: var(--color-bg-page);
  display: flex;
  color: var(--color-text-secondary);
  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(--color-bg-page);
}

.yw-messageinput-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--color-bg-card);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}


.yw-messageinput-filebtn {
  margin-right: 8px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all 0.3s;
}

.yw-messageinput-filebtn:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* ===================================================================
 * 响应式设计 - 使用 Container Queries 基于输入框容器宽度
 * 保持高度固定，通过调整字号和内边距适配窄屏幕
 * =================================================================== */

/* 中等宽度 (400px - 600px) - 轻微收窄 */
@container messageinput (max-width: 600px) {
  .yw-messageinput-inputbox {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .yw-messageinput-toolbar {
    padding: 0 var(--spacing-md) 0 var(--spacing-md);
  }

  .yw-messageinput-actionitem {
    width: 36px;
    height: 36px;
  }

  .yw-messageinput-footer {
    padding: 0 var(--spacing-lg) var(--spacing-sm);
    height: 44px;
    min-height: 44px;
  }

  .yw-messageinput-sendbtn {
    padding: 5px 20px !important;
  }
}

/* 窄宽度 (< 400px) - 紧凑布局 */
@container messageinput (max-width: 400px) {
  .yw-messageinput-inputbox {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .yw-messageinput-toolbar {
    padding: 0 var(--spacing-sm) 0 var(--spacing-sm);
  }

  .yw-messageinput-actionitem {
    width: 32px;
    height: 32px;
  }

  .yw-messageinput-bar {
    height: 40px;
    min-height: 40px;
  }

  .yw-messageinput-footer {
    padding: 0 var(--spacing-md) var(--spacing-xs);
    height: 40px;
    min-height: 40px;
  }

  .yw-messageinput-sendbtn {
    padding: 4px 16px !important;
  }
}

/* 超窄宽度 (< 320px) - 极限紧凑 */
@container messageinput (max-width: 320px) {
  .yw-messageinput-inputbox {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .yw-messageinput-actionitem {
    width: 28px;
    height: 28px;
  }

  .yw-messageinput-bar {
    height: 36px;
    min-height: 36px;
  }

  .yw-messageinput-footer {
    height: 36px;
    min-height: 36px;
  }

  .yw-messageinput-sendbtn {
    padding: 4px 12px !important;
  }
}

/* Fallback: 不支持 Container Queries 的浏览器 */
@supports not (container-type: inline-size) {
  .yw-layout[data-screen-size="tablet"] .yw-messageinput-inputbox {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .yw-layout[data-screen-size="tablet"] .yw-messageinput-toolbar {
    padding: 0 var(--spacing-md) 0 var(--spacing-md);
  }

  .yw-layout[data-screen-size="tablet"] .yw-messageinput-actionitem {
    width: 36px;
    height: 36px;
  }

  .yw-layout[data-screen-size="tablet"] .yw-messageinput-footer {
    padding: 0 var(--spacing-lg) var(--spacing-sm);
    height: 44px;
    min-height: 44px;
  }

  .yw-layout[data-screen-size="mobile"] .yw-messageinput-inputbox {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .yw-layout[data-screen-size="mobile"] .yw-messageinput-toolbar {
    padding: 0 var(--spacing-sm) 0 var(--spacing-sm);
  }

  .yw-layout[data-screen-size="mobile"] .yw-messageinput-actionitem {
    width: 32px;
    height: 32px;
  }

  .yw-layout[data-screen-size="mobile"] .yw-messageinput-bar {
    height: 40px;
    min-height: 40px;
  }

  .yw-layout[data-screen-size="mobile"] .yw-messageinput-footer {
    padding: 0 var(--spacing-md) var(--spacing-xs);
    height: 40px;
    min-height: 40px;
  }
}

/* quickReplyPanel 响应式 */
@container messageinput (max-width: 400px) {
  .quickReplyPanel {
    max-height: 300px;
  }

  .quickReplyPanel ul li {
    height: 52px;
  }
}

/* ===================================================================
 * File 文件消息组件
 * 支持主题切换
 * =================================================================== */

.yw-message-file {
  position: relative;
  display: flex;
  cursor: pointer;
  width: var(--msg-card-width-compact);
  gap: var(--spacing-md);
  background-color: var(--msg-card-bg);
  border-radius: var(--radius-base);
  transition: background-color var(--transition-base);
}

.yw-message-file-icon {
  width: var(--icon-size-xl);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yw-message-file-info {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-sm);
}

.yw-message-file-name {
  font-size: var(--font-size-base);
  color: var(--msg-card-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.yw-message-file-size {
  font-size: var(--font-size-sm);
  color: var(--msg-card-meta);
  transition: color var(--transition-base);
}

.yw-message-file-preview {
  position: absolute;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
}

/* 上传进度条样式 */
.yw-message-file-progress {
  margin-top: var(--spacing-sm);
  position: relative;
  padding-right: var(--spacing-xl); /* 为取消按钮留出空间 */
}

.yw-message-file-progress-bar {
  width: 100%;
  height: var(--spacing-xs);
  background-color: var(--state-disabled-bg);
  border-radius: var(--radius-xs);
  overflow: hidden;
  margin-bottom: var(--spacing-xs);
}

.yw-message-file-progress-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: var(--radius-xs);
  transition: width var(--transition-base);
}

.yw-message-file-progress-text {
  font-size: var(--font-size-xs);
  color: var(--msg-card-meta);
}

.yw-message-file-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--spacing-xs);
}

/* 取消上传按钮样式 */
.yw-message-file-cancel-btn {
  position: absolute;
  top: var(--radius-xs);
  right: var(--radius-xs);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--state-hover-bg);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-base);
  z-index: 1;
}

.yw-message-file-cancel-btn:hover {
  background-color: var(--state-active-bg);
}

.yw-message-file-cancel-btn:active {
  background-color: var(--color-accent-soft);
}

/* 发送者样式覆盖（品牌色背景上） */
.yw-message-base-bubble-box.send .yw-message-file {
  background-color: transparent;
}

.yw-message-base-bubble-box.send .yw-message-file-progress-text {
  color: var(--msg-card-sender-meta);
}

/* ===================================================================
 * UploadProgressBubble 上传进度气泡组件
 * 用于消息气泡内的线性/圆形进度与取消按钮
 * 支持主题切换
 * =================================================================== */

.upb {
  font-size: var(--font-size-sm);
  color: var(--color-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(--color-bg-mask);
}
.upb-overlay.failed {
  background: var(--color-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(--color-accent) !important;
}

.upb-circle-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* 始终让百分比居中 */
}
.upb-percent {
  color: var(--color-text-white);
  font-weight: 700;
  font-size: var(--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: var(--color-text-white);
  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: var(--color-video-overlay) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: var(--color-text-white) !important;
}
.upb-circle-wrap .upb-cancel:hover {
  background: var(--color-video-overlay-hover) !important;
}

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

.upb-failed-text {
  color: var(--color-text-white);
  font-weight: 600;
}

/* 线性进度（用于文件类消息） */
.upb-linear.below {
  margin-top: var(--spacing-xs);
}
.upb-linear.compact {
  font-size: var(--font-size-sm);
}

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

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

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

.new-group-section {
  /* 固定在顶部，不参与滚动 */
  flex-shrink: 0;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: var(--color-border-line);
}

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

.section-title {
  /* 固定在顶部，不参与滚动 */
  flex-shrink: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.section-title::before {
  content: '📁';
  font-size: var(--font-size-lg);
}

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

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

.sortable-group-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  background: var(--color-bg-card);
  transition: all var(--transition-base);
}

.sortable-group-item:hover {
  border-color: var(--color-accent);
  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: var(--spacing-md);
  cursor: grab;
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
}

.drag-handle:hover {
  color: var(--color-accent);
  background-color: var(--color-bg-hover);
}

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

.sortable-group-content {
  flex: 1 1;
  min-width: 0;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base);
  /* 确保与输入框高度一致 */
  min-height: var(--control-height-md);
  display: flex;
  align-items: center;
}

.sortable-group-content:hover {
  background-color: var(--color-bg-hover);
}

.sortable-group-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  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;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  /* 确保内部文本垂直居中 */
  line-height: 24px;
  padding: 0 var(--spacing-sm);
  box-sizing: border-box;
  /* 恢复默认的边框和focus样式 */
  border: var(--color-border-line);
  border-radius: var(--radius-sm);
}

/* 移除自定义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: var(--spacing-xs);
  margin-left: var(--spacing-sm);
}

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

/* 空状态样式 */
.empty-groups {
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  color: var(--color-text-secondary);
}

.empty-groups-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}

.empty-groups-text {
  font-size: var(--font-size-base);
  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: var(--color-scroll-thumb);
  border-radius: 3px;
}

.group-edit-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}


/* 撤回消息特殊样式 */
.yw-message-revoke {
  margin: 4px auto;
  position: relative;
  font-size: var(--font-size-sm);
}

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

/* ===================================================================
 * EmptyState 空状态组件
 * 支持主题切换
 * =================================================================== */

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

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

.yw-empty-state-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

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

/* ===== 主容器样式 ===== */
.yw-conversationlist {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* 使同步条可在其内绝对定位悬浮 */
}

.conversation-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-xl);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--color-bg-card);
  transition: background var(--transition-fast);
}

.conversation-group-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.conversation-group-header-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.conversation-group-header.collapsed .conversation-group-header-arrow {
  transform: rotate(-45deg);
}

.conversation-group-header-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.conversation-group-header-name {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.conversation-group-header-unread {
  background: var(--color-danger);
  color: var(--color-text-white);
  border-radius: var(--radius-lg);
  padding: 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.conversation-group-header-right {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* 顶部同步/加载状态条 */
.yw-conversationlist-syncbar {
  position: absolute; /* 悬浮不占空间 */
  top: var(--spacing-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  gap: var(--spacing-sm);
  height: var(--control-height-sm);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-line);
  border-radius: 999px;
  box-shadow: var(--shadow-dropdown);
  color: var(--color-text-secondary);
  pointer-events: none; /* 不阻止列表交互 */
}

.yw-conversationlist-syncbar-text {
  font-size: 12.5px; /* 略大提升可读性 */
  line-height: 1;
}

/* 列表主体区域，占据剩余高度 */
.yw-conversationlist-body {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

/* react-virtuoso 滚动容器悬浮滚动条样式 */
/* 选择 Virtuoso 创建的滚动容器（直接子 div） */
.yw-conversationlist-body > div,
.yw-conversationlist-body [data-virtuoso-scroller="true"],
.yw-conversationlist-body [data-testid="virtuoso-scroller"] {
  /* Webkit/Electron 专用：滚动条悬浮在内容上，不占用空间 */
  overflow-y: overlay !important;
}

/* 悬浮滚动条样式 - 半透明窄滚动条 */
.yw-conversationlist-body > div::-webkit-scrollbar,
.yw-conversationlist-body [data-virtuoso-scroller="true"]::-webkit-scrollbar,
.yw-conversationlist-body [data-testid="virtuoso-scroller"]::-webkit-scrollbar {
  width: var(--spacing-sm);
  background: transparent;
}

.yw-conversationlist-body > div::-webkit-scrollbar-thumb,
.yw-conversationlist-body [data-virtuoso-scroller="true"]::-webkit-scrollbar-thumb,
.yw-conversationlist-body [data-testid="virtuoso-scroller"]::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: var(--radius-xs);
}

.yw-conversationlist-body > div::-webkit-scrollbar-thumb:hover,
.yw-conversationlist-body [data-virtuoso-scroller="true"]::-webkit-scrollbar-thumb:hover,
.yw-conversationlist-body [data-testid="virtuoso-scroller"]::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}

.yw-conversationlist-body > div::-webkit-scrollbar-track,
.yw-conversationlist-body [data-virtuoso-scroller="true"]::-webkit-scrollbar-track,
.yw-conversationlist-body [data-testid="virtuoso-scroller"]::-webkit-scrollbar-track {
  background: transparent;
}

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

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

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

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

/* 置顶状态的hover效果 */
.yw-conversationlist-item-top:hover {
  background-color: var(--color-conversationlist-top-bg);
  filter: brightness(0.98);
}

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

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

/* 选中状态下所有文字变白 */
.yw-conversationlist-item-selected .yw-conversationlist-item-time,
.yw-conversationlist-item-selected .yw-conversationlist-item-lastmsg,
.yw-conversationlist-item-selected .yw-conversationlist-item-name h3 {
  color: var(--state-selected-text);
}

/* 置顶+选中状态使用更淡的背景色 */
.yw-conversationlist-item-top.yw-conversationlist-item-selected {
  background-color: var(--state-selected-top-bg);
}

/* ===== 布局容器样式 ===== */
.yw-conversationlist-item-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.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: var(--spacing-xs);
}

.yw-conversationlist-item-right-second-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

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

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

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

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

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

/* 使用CSS变量覆盖Semi UI Badge背景色，支持免打扰灰色样式 */
.yw-conversationlist-item-reddot .semi-badge-count {
  background-color: var(--color-danger) !important;
  background-color: var(--badge-bg, var(--color-danger)) !important;
}

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

.yw-reminder {
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
  margin-right: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

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

/* ===== 在线状态徽章样式 ===== */
.yw-onlinestatusbadge {
  width: var(--spacing-md);
  height: var(--spacing-md);
  background-color: #ffffff;
  position: absolute;
  padding: 1.5px;
  right: var(--radius-xs);
  bottom: var(--radius-xs);
  border-radius: var(--radius-full);
  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: var(--color-success);
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-lg);
}

.yw-onlinestatusbadge-content-tip {
  padding: 0;
  font-size: var(--font-size-base);
  color: var(--color-success);
}

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

/* 在线状态悬停效果 */
.yw-onlinestatusbadge:hover .yw-onlinestatusbadge-content-tip {
  display: block;
  position: absolute;
  background-color: var(--color-bg-mask);
  color: var(--color-text-white);
  border-radius: var(--radius-sm);
  padding: var(--radius-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  bottom: 100%;
  white-space: nowrap;
  left: 50%;
  margin-bottom: var(--spacing-xs);
  transform: translateX(-50%);
  z-index: 1000;
}

/* ===================================================================
 * 响应式设计 - 使用 data-screen-size 选择器与 WKLayout 保持一致
 * =================================================================== */

/* Tablet 平板模式 */
[data-screen-size="tablet"] .yw-conversationlist-item {
  padding: 12px 12px;
}

[data-screen-size="tablet"] .yw-conversationlist-item-name h3 {
  font-size: 0.95rem;
}

[data-screen-size="tablet"] .yw-conversationlist-item-content {
  gap: 10px;
}

/* Mobile 移动端模式 */
[data-screen-size="mobile"] .yw-conversationlist-item {
  padding: 14px 16px;  /* 移动端增加 padding 提升触控体验 */
}

[data-screen-size="mobile"] .yw-conversationlist-item-name h3 {
  font-size: 1rem;
}

[data-screen-size="mobile"] .yw-conversationlist-item-time {
  font-size: 0.75rem;
}

[data-screen-size="mobile"] .yw-conversationlist-item-lastmsg {
  font-size: var(--font-size-base);
}

[data-screen-size="mobile"] .yw-conversationlist-item-content {
  gap: 12px;
}

/* 移动端会话分组头部优化 */
[data-screen-size="mobile"] .conversation-group-header {
  padding: 14px 16px;
}

[data-screen-size="mobile"] .conversation-group-header-name {
  max-width: none;  /* 移动端不限制宽度 */
}

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

.yw-conversationlist-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .yw-conversationlist-item {
    animation: none;
    transition: none;
  }
}

/* ===== 会话项包装器样式 ===== */
.yw-conversationlist-item-wrapper {
  position: relative;
} 

/* ===================================================================
 * 会话容器 - 支持 Container Queries
 * 容器会根据自身宽度而非视口宽度进行自适应
 * =================================================================== */

/* 会话容器整体：单列排版 + 容器查询上下文 */
/* 宽度由父容器 WKLayout 控制，此处使用 100% 继承 */
.conversation-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background: var(--color-bg-conversation);
  
  /* 声明为容器查询上下文 */
  container-type: inline-size;
  container-name: conversation-container;
}

/* 为内容区域添加内边距（会话列表面板除外） */
.conversation-container > .conversation-action-bar,
.conversation-container > .conversation-group-manage {
  margin: 0 var(--spacing-lg);
}

.conversation-container > .conversation-action-bar {
  margin-top: var(--spacing-lg);
}

.conversation-container > .conversation-group-manage {
  margin-top: var(--spacing-md);
}

.conversation-container > .conversation-list-panel {
  margin-top: var(--spacing-md);
}

/* =========================
   网络状态横幅（顶部全宽）
   ========================= */
.network-status-banner {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  /* 渐显动画 */
  animation: networkBannerSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes networkBannerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.network-status-text {
  flex: 1 1;
  text-align: center;
}

/* 严重程度：严重（网络断开） - 柔和的红色调 */
.network-status-banner--critical {
  background: var(--color-banner-critical-bg);
  color: var(--color-banner-critical-text);
}

/* 严重程度：警告（网络缓慢、正在重试） - 柔和的琥珀色调 */
.network-status-banner--warning {
  background: var(--color-banner-warning-bg);
  color: var(--color-banner-warning-text);
}

/* 严重程度：信息（连接中） - 柔和的蓝灰色调 */
.network-status-banner--info {
  background: var(--color-banner-info-bg);
  color: var(--color-banner-info-text);
}

/* 顶部操作区 */
.conversation-action-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.conversation-search-trigger {
  flex: 1 1;
  display: flex;
  padding: var(--spacing-md);
  border-radius: var(--radius-xl);
  background: var(--color-conversationlist-top-bg);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
  cursor: pointer;
  transition: box-shadow var(--transition-base);
}

.conversation-search-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.conversation-search-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  position: relative;
  margin-right: var(--spacing-md);
}

.conversation-search-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.conversation-search-placeholder {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.conversation-action-buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.conversation-action-btn {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  border-radius: var(--radius-xl);
  border: none;
  background: var(--color-conversationlist-top-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
  transition: box-shadow var(--transition-base);
}

.conversation-action-btn:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.conversation-action-plus {
  position: relative;
  width: 16px;
  height: 2px;
  background: var(--color-text-primary);
}

.conversation-action-plus::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -7px;
  width: 2px;
  height: 16px;
  background: var(--color-text-primary);
}

/* 分组管理按钮（位于ActionBar下方） */
.conversation-group-manage {
  width: auto; /* 自动计算宽度，配合 margin 使用 */
  box-sizing: border-box;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  padding: var(--spacing-md) var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.conversation-group-manage:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

/* 会话列表面板：铺满容器宽度 */
.conversation-list-panel {
  flex: 1 1;
  min-height: 0;
  background: var(--color-bg-card);
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conversation-list-panel .yw-conversationlist {
  height: 100%;
}

/* ===================================================================
 * 响应式 - 使用 data-screen-size 选择器（由 WKLayout 控制）
 * 注意：.conversation-container 宽度已完全继承父容器，无需额外设置
 * =================================================================== */

/* ===================================================================
 * Container Queries - 基于容器自身宽度的响应式
 * 相比 media queries，container queries 更适合组件级响应式
 * =================================================================== */

/* 窄容器布局 (< 380px) */
@container conversation-container (max-width: 380px) {
  .conversation-action-bar,
  .conversation-group-manage {
    margin-left: 12px;
    margin-right: 12px;
  }

  .conversation-action-bar {
    margin-top: 12px;
    gap: 8px;
  }

  /* 网络状态横幅优化 */
  .network-status-banner {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  /* 缩小按钮尺寸 */
  .conversation-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .conversation-search-trigger {
    padding: 10px;
    border-radius: 10px;
  }

  .conversation-search-trigger:hover {
    box-shadow: inset 0 0 0 1px var(--color-accent);;
  }

  .conversation-group-manage {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }
}

/* 超窄容器布局 (< 320px) - 极端情况 */
@container conversation-container (max-width: 320px) {
  .conversation-search-icon {
    display: none;  /* 隐藏搜索图标节省空间 */
  }
}

/* ===================================================================
 * Mobile 尺寸下隐藏搜索框和分组管理
 * =================================================================== */
.yw-layout[data-screen-size="mobile"] .conversation-action-bar,
.yw-layout[data-screen-size="mobile"] .conversation-group-manage {
  display: none;
}

/* mobile 尺寸下会话列表顶部边距调整 */
.yw-layout[data-screen-size="mobile"] .conversation-list-panel {
  margin-top: 0;
}

/* ===================================================================
 * Fallback: 不支持 Container Queries 的浏览器使用 media queries
 * =================================================================== */
@supports not (container-type: inline-size) {
  @media (max-width: 768px) {
    .conversation-container {
      max-width: none;
      min-width: 320px;
    }
  }

  @media (max-width: 480px) {
    .conversation-container > .conversation-action-bar,
    .conversation-container > .conversation-group-manage {
      margin-left: 12px;
      margin-right: 12px;
    }

    .conversation-container > .conversation-action-bar {
      margin-top: 12px;
    }

    .network-status-banner {
      padding: var(--spacing-sm) var(--spacing-md);
      font-size: var(--font-size-sm);
    }

    .conversation-action-btn {
      width: 36px;
      height: 36px;
    }
  }
}

/* ===================================================================
 * LoadingDataComponent 数据加载组件
 * 支持主题切换
 * =================================================================== */

.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;
  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: var(--color-text-primary);
  font-size: var(--font-size-base);
  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(--color-accent) 80%
    ),
    radial-gradient(
      var(--r1) var(--r2) at bottom,
      var(--color-accent) 79.5%,
      #0000 80%
    ),
    radial-gradient(
      var(--r1) var(--r2) at top,
      #0000 79.5%,
      var(--color-accent) 80%
    ),
    var(--color-border-muted);
  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%;
  }
}

/* ===================================================================
 * MessageSearch 消息搜索组件
 * 支持主题切换
 * =================================================================== */

/* ===================== 频道消息搜索弹窗 ===================== */

/* 弹窗容器 */
.yw-channel-search-modal .semi-modal-content {
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  background: var(--yw-search-bg, #FFFFFF);
}

body[theme-mode="dark"] .yw-channel-search-modal .semi-modal-content {
  background: #FFFFFF;
  background: var(--yw-search-bg, #1F1F1F);
}

/* 移除弹窗 body 默认上下边距 */
.yw-channel-search-modal .semi-modal-body-wrapper {
  margin: 0;
}

/* 弹窗内容 */
.yw-channel-search-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Tab 栏 + 关闭按钮 */
.yw-channel-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 0;
  flex-shrink: 0;
}

/* Tab 容器 */
.yw-channel-search-tabs {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Tab 项 */
.yw-channel-search-tab {
  font-size: 15px;
  font-weight: 500;
  padding: 8px 0;
  margin-right: 24px;
  cursor: pointer;
  position: relative;
  color: #646A73;
  color: var(--yw-search-text-secondary, #646A73);
  transition: color 0.15s;
}

body[theme-mode="dark"] .yw-channel-search-tab {
  color: #646A73;
  color: var(--yw-search-text-secondary, #A0A4A8);
}

.yw-channel-search-tab:hover {
  color: #1F2329;
  color: var(--yw-search-text-primary, #1F2329);
}

body[theme-mode="dark"] .yw-channel-search-tab:hover {
  color: #1F2329;
  color: var(--yw-search-text-primary, #FFFFFF);
}

/* Tab 激活态 */
.yw-channel-search-tab.active {
  color: #0084FE;
  color: var(--yw-search-primary, #0084FE);
}

.yw-channel-search-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #0084FE;
  background: var(--yw-search-primary, #0084FE);
  border-radius: 1px;
}

/* 关闭按钮 */
.yw-channel-search-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  color: #86909C;
  color: var(--yw-search-text-tertiary, #86909C);
  transition: background 0.15s, color 0.15s;
}

.yw-channel-search-close:hover {
  background: #F5F5F5;
  background: var(--yw-search-fill-hover, #F5F5F5);
  color: #1F2329;
  color: var(--yw-search-text-primary, #1F2329);
}

body[theme-mode="dark"] .yw-channel-search-close:hover {
  background: #F5F5F5;
  background: var(--yw-search-fill-hover, #2A2C2F);
  color: #1F2329;
  color: var(--yw-search-text-primary, #FFFFFF);
}

/* 搜索输入框容器 */
.yw-channel-search-modal-content .yw-message-search-input {
  padding: 16px 20px 0;
  flex-shrink: 0;
}

.yw-channel-search-modal-content .yw-message-search-input .semi-input-wrapper {
  height: 40px;
  border-radius: 8px;
  background: #F5F5F5;
  background: var(--yw-search-fill, #F5F5F5);
  border: 1px solid #E5E5E5;
  border: 1px solid var(--yw-search-border, #E5E5E5);
  transition: border-color 0.15s, box-shadow 0.15s;
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-message-search-input .semi-input-wrapper {
  background: #F5F5F5;
  background: var(--yw-search-fill, #2A2C2F);
  border-color: #E5E5E5;
  border-color: var(--yw-search-border, #3D3D3D);
}

.yw-channel-search-modal-content .yw-message-search-input .semi-input-wrapper:hover {
  border-color: #D0D0D0;
  border-color: var(--yw-search-border-hover, #D0D0D0);
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-message-search-input .semi-input-wrapper:hover {
  border-color: #D0D0D0;
  border-color: var(--yw-search-border-hover, #4A4A4A);
}

.yw-channel-search-modal-content .yw-message-search-input .semi-input-wrapper:focus-within {
  border-color: #0084FE;
  border-color: var(--yw-search-primary, #0084FE);
  box-shadow: 0 0 0 2px rgba(0, 132, 254, 0.12);
}

/* 筛选器栏 */
.yw-channel-search-filter-bar {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  flex-shrink: 0;
}

.yw-channel-search-filter-bar .yw-filter {
  flex: 1 1;
}

.yw-channel-search-filter-bar .yw-filter-chip,
.yw-channel-search-filter-bar .semi-select {
  height: 36px;
  border-radius: 8px;
  background: #F5F5F5;
  background: var(--yw-search-fill, #F5F5F5);
  border: 1px solid #E5E5E5;
  border: 1px solid var(--yw-search-border, #E5E5E5);
}

body[theme-mode="dark"] .yw-channel-search-filter-bar .yw-filter-chip,
body[theme-mode="dark"] .yw-channel-search-filter-bar .semi-select {
  background: #F5F5F5;
  background: var(--yw-search-fill, #2A2C2F);
  border-color: #E5E5E5;
  border-color: var(--yw-search-border, #3D3D3D);
}

.yw-channel-search-filter-bar .yw-filter-chip:hover,
.yw-channel-search-filter-bar .semi-select:hover {
  border-color: #D0D0D0;
  border-color: var(--yw-search-border-hover, #D0D0D0);
}

body[theme-mode="dark"] .yw-channel-search-filter-bar .yw-filter-chip:hover,
body[theme-mode="dark"] .yw-channel-search-filter-bar .semi-select:hover {
  border-color: #D0D0D0;
  border-color: var(--yw-search-border-hover, #4A4A4A);
}

/* 日期分组头（贯穿式下划线） */
.yw-channel-search-modal-content .yw-date-header {
  padding: 12px 20px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #86909C;
  color: var(--yw-search-text-tertiary, #86909C);
  background: #FFFFFF;
  background: var(--yw-search-bg, #FFFFFF);
  border-bottom: 1px solid #F0F0F0;
  border-bottom: 1px solid var(--yw-search-border-light, #F0F0F0);
  position: sticky;
  top: 0;
  z-index: 1;
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-date-header {
  background: #FFFFFF;
  background: var(--yw-search-bg, #1F1F1F);
  border-bottom-color: #F0F0F0;
  border-bottom-color: var(--yw-search-border-light, #333333);
}

/* 内容区域滚动 */
.yw-channel-search-modal-content .yw-scroll-area {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  width: 100%;
  box-sizing: border-box;
}

.yw-channel-search-modal-content .yw-message-search-list {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* 空状态 */
.yw-channel-search-modal-content .yw-message-search-empty {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* 空状态内部样式（匹配设计规范） */
.yw-channel-search-modal-content .yw-message-search-empty .yw-empty-state {
  padding: 0;
}

.yw-channel-search-modal-content .yw-message-search-empty .yw-empty-state-icon {
  width: 154px;
  height: 146px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-channel-search-modal-content .yw-message-search-empty .yw-empty-state-icon svg {
  width: 154px;
  height: 146px;
}

.yw-channel-search-modal-content .yw-message-search-empty .yw-empty-state-text {
  font-size: 14px;
  color: #86909C;
  color: var(--yw-search-text-tertiary, #86909C);
}

/* 消息列表项样式优化 */
.yw-channel-search-modal-content .yw-message-search-item {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  margin: 8px 12px;
  cursor: pointer;
  position: relative;
  background: transparent;
  border-radius: 8px;
  transition: background 0.15s;
}

.yw-channel-search-modal-content .yw-message-search-item:hover {
  background: #F5F5F5;
  background: var(--yw-search-fill-hover, #F5F5F5);
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-message-search-item:hover {
  background: #F5F5F5;
  background: var(--yw-search-fill-hover, #2A2C2F);
}

/* 消息项分割线（在 hover 区域外，位于两个列表项之间） */
.yw-channel-search-modal-content .yw-message-search-item--compact + .yw-message-search-item--compact::before {
  content: '';
  position: absolute;
  left: 64px; /* 头像40px + gap12px + padding12px */
  right: 12px;
  top: -8px; /* 在上一个item的margin区域 */
  height: 1px;
  background: #F0F0F0;
  background: var(--yw-search-border-light, #F0F0F0);
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-message-search-item--compact + .yw-message-search-item--compact::before {
  background: #F0F0F0;
  background: var(--yw-search-border-light, #333333);
}

/* 文件列表项样式优化 */
.yw-channel-search-modal-content .yw-message-search-item--file {
  padding: 8px 12px;
}

.yw-channel-search-modal-content .yw-message-search-item--file .yw-file-icon-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.yw-channel-search-modal-content .yw-message-search-item--file .yw-file-icon-box svg {
  width: 44px;
  height: auto;
}

/* 文件项分割线（在 hover 区域外，位于两个列表项之间） */
.yw-channel-search-modal-content .yw-message-search-item--file + .yw-message-search-item--file::before {
  content: '';
  position: absolute;
  left: 68px; /* 图标44px + gap12px + padding12px */
  right: 12px;
  top: -8px; /* 在上一个item的margin区域 */
  height: 1px;
  background: #F0F0F0;
  background: var(--yw-search-border-light, #F0F0F0);
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-message-search-item--file + .yw-message-search-item--file::before {
  background: #F0F0F0;
  background: var(--yw-search-border-light, #333333);
}

/* 文件元信息 */
.yw-channel-search-modal-content .yw-file-meta {
  font-size: 12px;
  color: #86909C;
  color: var(--yw-search-text-tertiary, #86909C);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.yw-channel-search-modal-content .yw-file-meta span + span::before {
  content: ' \00B7 ';
  margin-right: 4px;
}

/* 媒体宫格样式优化 */
.yw-channel-search-modal-content .yw-media-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 8px;
  gap: 8px;
  padding: 0 20px;
  box-sizing: border-box;
}

.yw-channel-search-modal-content .yw-media-month-header {
  grid-column: 1 / -1;
  padding: 12px 0 8px;
  font-size: 13px;
  color: #86909C;
  color: var(--yw-search-text-tertiary, #86909C);
}

/* ImageDisplay 容器：让 grid 控制尺寸 */
.yw-channel-search-modal-content .yw-media-grid .yw-message-image-container {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
}

.yw-channel-search-modal-content .yw-media-tile {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #F5F5F5;
  background: var(--yw-search-fill, #F5F5F5);
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-media-tile {
  background: #F5F5F5;
  background: var(--yw-search-fill, #2A2C2F);
}

/* 媒体缩略图样式 */
.yw-channel-search-modal-content .yw-media-tile .yw-media-thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* 媒体宫格定位按钮（右上角） */
.yw-channel-search-modal-content .yw-media-tile .yw-media-locate {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.yw-channel-search-modal-content .yw-media-tile:hover .yw-media-locate {
  opacity: 1;
}

/* 视频播放按钮 */
.yw-channel-search-modal-content .yw-media-tile .yw-media-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Hover 定位按钮 */
.yw-channel-search-modal-content .yw-locate-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #F5F5F5;
  background: var(--yw-search-fill, #EBEBEB);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-locate-btn {
  background: #F5F5F5;
  background: var(--yw-search-fill, #353739);
}

.yw-channel-search-modal-content .yw-message-search-item:hover .yw-locate-btn {
  opacity: 1;
}

.yw-channel-search-modal-content .yw-locate-btn:hover {
  background: #E0E0E0;
  background: var(--yw-search-fill-2, #E0E0E0);
}

body[theme-mode="dark"] .yw-channel-search-modal-content .yw-locate-btn:hover {
  background: #E0E0E0;
  background: var(--yw-search-fill-2, #404244);
}

/* 加载和空状态提示 */
.yw-channel-search-modal-content .yw-center-note {
  text-align: center;
  padding: 12px;
  color: #86909C;
  color: var(--yw-search-text-tertiary, #86909C);
  font-size: 13px;
}

/* CSS 变量定义 */
:root {
  --yw-search-primary: #0084FE;
  --yw-search-bg: #FFFFFF;
  --yw-search-fill: #F5F5F5;
  --yw-search-fill-hover: #F5F5F5;
  --yw-search-fill-2: #E0E0E0;
  --yw-search-border: #E5E5E5;
  --yw-search-border-light: #F0F0F0;
  --yw-search-border-hover: #D0D0D0;
  --yw-search-text-primary: #1F2329;
  --yw-search-text-secondary: #646A73;
  --yw-search-text-tertiary: #86909C;
}

body[theme-mode="dark"] {
  --yw-search-bg: #1F1F1F;
  --yw-search-fill: #2A2C2F;
  --yw-search-fill-hover: #2A2C2F;
  --yw-search-fill-2: #404244;
  --yw-search-border: #3D3D3D;
  --yw-search-border-light: #333333;
  --yw-search-border-hover: #4A4A4A;
  --yw-search-text-primary: #FFFFFF;
  --yw-search-text-secondary: #A0A4A8;
  --yw-search-text-tertiary: #86909C;
}

/* ===================== 原有样式 ===================== */

.yw-message-search-modal,
.yw-message-search-drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.yw-message-search-empty {
  width: 100%;
  height: 100%;
  padding: var(--spacing-2xl) 0;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.yw-message-search-list {
  flex: 1 1;
  overflow: auto;
  /* 防滚动链：列表滚动到边界时，不再把滚动事件传给外层（修复小窗口下弹窗被整体卷走的问题） */
  overscroll-behavior: contain;
  /* 在 flex 布局下允许被压缩，避免计算高度后仍被撑开 */
  min-height: 0;
}

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

.yw-message-search-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  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: var(--spacing-sm);
}

/* 左侧语义箭头：收起为▶，展开为▶旋转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 var(--transition-fast);
  margin-right: var(--spacing-sm);
}
.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: var(--font-size-sm);
  padding: var(--radius-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.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: var(--spacing-sm) 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: var(--spacing-md);
}

/* 高亮消息通用样式（气泡项需根据该类名渲染） */
.yw-message-highlight {
  background: var(--color-message-highlight-bg);
  box-shadow: inset 0 0 0 2px var(--color-message-highlight-border);
  border-radius: 8px;
  box-sizing: border-box;
  animation: yw-highlight-pulse 2s ease-out;
}

/* 高亮动画：闪烁两次后保持 */
@keyframes yw-highlight-pulse {
  0% {
    background: var(--color-message-highlight-bg);
    box-shadow: inset 0 0 0 2px var(--color-message-highlight-border), 0 0 12px var(--color-message-highlight-border);
  }
  25% {
    background: transparent;
    box-shadow: inset 0 0 0 2px transparent, 0 0 0 transparent;
  }
  50% {
    background: var(--color-message-highlight-bg);
    box-shadow: inset 0 0 0 2px var(--color-message-highlight-border), 0 0 12px var(--color-message-highlight-border);
  }
  75% {
    background: transparent;
    box-shadow: inset 0 0 0 2px transparent, 0 0 0 transparent;
  }
  100% {
    background: var(--color-message-highlight-bg);
    box-shadow: inset 0 0 0 2px var(--color-message-highlight-border);
  }
}

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

/* 行间分隔：不影响 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);
}

.yw-message-search-item-avatar {
  margin-right: var(--spacing-md);
}

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

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

/* 紧凑模式 - 根据 Figma 设计稿优化（带头像布局） */
.yw-message-search-item--compact {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 36px 8px 12px; /* 右侧预留36px为定位按钮留空间 */
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  position: relative;
}
.yw-message-search-item--compact:hover {
  background: var(--semi-color-fill-0);
  background: var(--ui-surface-muted, var(--semi-color-fill-0));
}
/* 左侧头像 */
.yw-message-search-item--compact .compact-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.yw-message-search-item--compact .compact-avatar .yw-avatar {
  width: 40px !important;
  height: 40px !important;
}
/* 右侧内容区 */
.yw-message-search-item--compact .compact-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 第一行：发送人 + 时间 */
.yw-message-search-item--compact .compact-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.yw-message-search-item--compact .sender {
  font-size: 12px;
  font-weight: 400;
  color: var(--semi-color-text-2);
  color: var(--ui-text-weak, var(--semi-color-text-2));
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.yw-message-search-item--compact .compact-time {
  font-size: 12px;
  color: var(--semi-color-text-2);
  color: var(--ui-text-weak, var(--semi-color-text-2));
  line-height: 20px;
  flex-shrink: 0;
}
/* 第二行：消息内容 */
.yw-message-search-item--compact .content {
  font-size: 14px;
  color: var(--semi-color-text-0);
  color: var(--ui-text, var(--semi-color-text-0));
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 关键词高亮样式 */
.yw-message-search-item--compact .content mark {
  color: #0084fe;
  color: var(--ui-primary, #0084fe);
  background: none;
  font-weight: 500;
}

.yw-message-search-item .yw-item-desc {
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* ===================== 全局搜索配色（局部） ===================== */
.message-search-modal {
  --ui-primary: #0084fe;
  --ui-surface: var(--semi-color-bg-0);
  --ui-surface-muted: var(--semi-color-fill-0);
  --ui-text: var(--semi-color-text-0);
  --ui-text-weak: var(--semi-color-text-2);
}
body.dark .message-search-modal,
.dark .message-search-modal {
  --ui-surface: #1f1f1f;
  --ui-surface-muted: #2a2c2f;
  --ui-text: #ffffff;
  --ui-text-weak: rgba(255, 255, 255, 0.55);
}

/* 消息搜索弹窗特定样式（继承全局弹窗样式） */
.message-search-modal .semi-modal-content {
  background: var(--ui-surface);
}
.message-search-modal .semi-modal-header-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--ui-text);
}
/* 关闭按钮样式 */
.message-search-modal .semi-modal-close .semi-icon {
  color: var(--ui-text-weak);
}
.message-search-modal .semi-modal-close:hover .semi-icon {
  color: var(--ui-text);
}
/* 内容区特定样式 */
.message-search-modal .semi-modal-body {
  background: var(--ui-surface);
  overflow: hidden;
}
.yw-message-search-input .semi-input-wrapper {
  height: 40px;
  border-radius: 8px;
  background: var(--ui-surface-muted);
  border: var(--color-border-line);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.yw-message-search-input .semi-input-wrapper:hover {
  border-color: rgba(0, 132, 254, 0.4);
}
.yw-message-search-input .semi-input-wrapper:focus-within {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 2px rgba(0, 132, 254, 0.12);
}
body.dark .yw-message-search-input .semi-input-wrapper:hover,
.dark .yw-message-search-input .semi-input-wrapper:hover {
  border-color: rgba(0, 132, 254, 0.5);
}
body.dark .yw-message-search-input .semi-input-wrapper:focus-within,
.dark .yw-message-search-input .semi-input-wrapper:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 132, 254, 0.2);
}
.yw-message-search-input .semi-input-prefix svg,
.yw-message-search-input .semi-input-suffix svg {
  width: 16px;
  height: 16px;
  color: var(--ui-text-weak);
}
/* 清除按钮样式 */
.yw-message-search-input .semi-input-clearbtn {
  color: var(--ui-text-weak);
}
.yw-message-search-input .semi-input-clearbtn:hover {
  color: var(--ui-text);
}

/* ===================== 左右分栏布局 ===================== */
.ui-pane-split {
  display: flex;
  gap: 0;
}
.ui-pane-left {
  width: 240px;
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
  flex-shrink: 0;
}
.ui-pane-divider {
  width: 1px;
  background: var(--color-border-strong);
  flex-shrink: 0;
  margin: 0;
}
.ui-pane-right {
  flex: 1 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: 12px;
}

/* 窄屏响应式：左右分栏改为上下堆叠 */
@media screen and (max-width: 540px) {
  .ui-pane-split {
    flex-direction: column;
  }
  .ui-pane-left {
    width: 100%;
    max-height: 40%;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-strong);
  }
  .ui-pane-divider {
    display: none;
  }
  .ui-pane-right {
    flex: 1 1;
    min-height: 0;
    padding-left: 0;
    padding-top: 8px;
  }
}

/* 左列卡片 - 根据 Figma 设计稿优化 */
.ui-pane-left-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--ui-text);
  background: transparent;
  margin-bottom: 0;
}
.ui-pane-left-item:hover {
  background: var(--ui-surface-muted);
}
.ui-pane-left-item--active {
  background: var(--ui-surface-muted);
}
.ui-pane-left-avatar {
  flex-shrink: 0;
}
.ui-pane-left-avatar .yw-avatar {
  width: 40px !important;
  height: 40px !important;
}
.ui-pane-left-meta {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ui-pane-left-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
}
.ui-pane-left-desc {
  font-size: 12px;
  color: var(--ui-text-weak);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}

/* 右列顶部提示 - 根据 Figma 设计稿优化 */
.ui-pane-right-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 12px;
  color: var(--ui-text-weak);
  font-size: 12px;
  line-height: 20px;
}
.ui-pane-right-tip {
  color: var(--ui-text-weak);
}
.ui-pane-enter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-text-weak);
  cursor: pointer;
  transition: color 0.15s;
}
.ui-pane-enter:hover {
  color: var(--ui-primary);
}
.ui-pane-enter::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath fill=%27none%27 stroke=%27currentColor%27 stroke-width=%271.2%27 d=%27M5.25 3.5L8.75 7L5.25 10.5%27/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.6;
}
.ui-pane-enter:hover::after {
  opacity: 1;
}

/* 右列消息卡 - 根据 Figma 设计稿优化 */
.ui-pane-message-card {
  background: transparent;
  border-radius: 8px;
  padding: 0;
  transition: background 0.15s;
}
.ui-pane-message-card:hover {
  background: var(--ui-surface-muted);
}
.ui-pane-right-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 0;
}

/* 高亮文本 */
.ui-text-highlight {
  color: var(--ui-primary);
  background: none;
  font-weight: 600;
}

/* ==== 图片/视频宫格 ==== */
.yw-message-search-grid {
  padding-top: var(--spacing-xs);
}

.yw-media-month-header {
  width: 100%;
  padding: var(--spacing-sm) var(--radius-xs);
  color: var(--semi-color-text-2);
  font-size: var(--font-size-sm);
}

.yw-media-tile {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: var(--radius-base);
  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: var(--font-size-sm);
}

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

.yw-media-locate {
  position: absolute;
  right: var(--radius-xs);
  top: var(--radius-xs);
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  border-radius: var(--radius-sm);
  background: var(--color-video-overlay-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

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

.yw-media-time {
  position: absolute;
  right: var(--spacing-sm);
  bottom: var(--spacing-sm);
  background: var(--color-video-overlay);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  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);
}

/* 底部按钮样式 - 清空选择和关闭 */
.yw-filter-popover__footer [role="button"] {
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--semi-border-radius-small);
  font-size: var(--semi-font-size-small);
  transition: all 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px; /* 确保最小可点击区域 */
}

/* 清空选择按钮 - 次要操作（保持内联样式的颜色，只添加交互效果） */
.yw-filter-popover__footer [role="button"]:hover {
  background-color: var(--semi-color-fill-0);
}

.yw-filter-popover__footer [role="button"]:active {
  background-color: var(--semi-color-fill-1);
  transform: scale(0.98);
}

/* 关闭按钮特殊样式 - 主要操作 */
.yw-filter-popover__footer [role="button"]:last-child:hover {
  background-color: var(--semi-color-primary-light-default);
  color: var(--semi-color-primary) !important; /* 使用 !important 覆盖内联样式 */
}

.yw-filter-popover__footer [role="button"]:last-child:active {
  background-color: var(--semi-color-primary-light-active);
  color: var(--semi-color-primary) !important;
}

/* 禁用状态 */
.yw-filter-popover__footer [role="button"][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

/* 焦点状态 - 键盘导航可访问性 */
.yw-filter-popover__footer [role="button"]:focus-visible {
  outline: 2px solid var(--semi-color-primary);
  outline-offset: 2px;
}

/* 最近会话列表项（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: var(--shadow-popup);
  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-message-search-modal {
  overscroll-behavior: contain;
}

/* 分组头小头像尺寸（全局搜索组头使用） */
.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 {
  max-height: 72vh;
  overflow-y: auto;
  overflow-x: hidden;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 文件项（文件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: var(--font-size-sm);
  color: var(--semi-color-text-2);
}
.yw-locate-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* hover时显示定位按钮 */
.yw-message-search-item:hover .yw-locate-btn,
.ui-pane-message-card:hover .yw-locate-btn {
  opacity: 1;
}

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

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

/* ===================== Tabs 组件样式优化 ===================== */
.message-search-modal .semi-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.message-search-modal .semi-tabs-bar {
  padding: 0;
  margin-bottom: 12px;
}
.message-search-modal .semi-tabs-tab {
  padding: 8px 0;
  margin-right: 24px;
  font-size: 14px;
  color: var(--ui-text-weak);
  transition: color 0.15s;
}
.message-search-modal .semi-tabs-tab:hover {
  color: var(--ui-text);
}
.message-search-modal .semi-tabs-tab-active {
  color: var(--ui-text);
  font-weight: 500;
}
.message-search-modal .semi-tabs-ink-bar {
  background: var(--ui-primary);
  height: 2px;
}
.message-search-modal .semi-tabs-content {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}
.message-search-modal .semi-tabs-pane {
  height: 100%;
}

/* ===================== 联系人/群组搜索结果项样式 ===================== */
.yw-message-search-item .yw-item-main {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yw-message-search-item .yw-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--semi-color-text-0);
  color: var(--ui-text, var(--semi-color-text-0));
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yw-message-search-item .yw-item-title mark {
  color: #0084fe;
  color: var(--ui-primary, #0084fe);
  background: none;
  font-weight: 600;
}
.yw-message-search-item .yw-item-desc {
  font-size: 12px;
  color: var(--semi-color-text-2);
  color: var(--ui-text-weak, var(--semi-color-text-2));
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================== 虚拟列表加载提示 ===================== */
.yw-vlist-footer {
  padding: 12px;
  text-align: center;
  color: var(--ui-text-weak);
  font-size: 12px;
}

/* ===================== 查看更多按钮样式优化 ===================== */
.yw-message-search-group-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: var(--ui-text-weak);
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.15s;
}
.yw-message-search-group-footer:hover {
  color: var(--ui-primary);
}
.yw-message-search-group-footer svg {
  transition: transform 0.15s;
}
.yw-message-search-group-footer:hover svg {
  transform: translateY(2px);
}

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

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

.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: var(--spacing-3xl) var(--spacing-xl);
  gap: var(--spacing-md);
  color: var(--semi-color-text-2);
  height: 200px;
}

/* 联系人项样式 */
.paginated-contacts-list .contact-item {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: none;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--list-item-height-md);
}

.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: var(--font-size-base);
  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: var(--spacing-4xl) var(--spacing-xl);
  color: var(--semi-color-text-2);
  height: 200px;
}

.paginated-contacts-list .empty-text {
  font-size: var(--font-size-base);
}

.paginated-contacts-list .loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  gap: var(--spacing-sm);
  color: var(--semi-color-text-2);
  font-size: var(--font-size-base);
  height: var(--list-item-height-md);
  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: var(--color-scroll-thumb);
  border-radius: 3px;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scroll-thumb-hover);
}

/* 全选操作区域样式 */
.paginated-contacts-list .select-all-section {
  flex-shrink: 0;
  padding: var(--spacing---spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
  background: var(--semi-color-bg-1);
  margin-top: var(--spacing-md);
}

.paginated-contacts-list .select-all-button-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: var(--control-height-md);
}

.paginated-contacts-list .select-all-label {
  font-size: var(--font-size-base);
  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: var(--font-size-sm);
  color: var(--semi-color-text-1);
  background: var(--semi-color-primary-light-default);
  padding: var(--radius-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.paginated-contacts-list .progress-text {
  font-size: var(--font-size-sm);
  color: var(--semi-color-text-2);
  white-space: nowrap;
} 
/* ===================================================================
 * Subscribers 订阅者列表组件
 * 适配频道设置二级视图UI设计
 * =================================================================== */

.yw-subscrierlist {
  background-color: var(--channel-setting-bg);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
  gap: 8px;
}

.yw-subscrierlist .yw-indextable-search-box {
  height: 44px;
  border-radius: 12px;
  padding: 0 14px;
  background: var(--color-conversationlist-top-bg);
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.yw-subscrierlist .yw-indextable-search-box:hover {
  border-color: rgba(0, 132, 254, 0.35);
}

.yw-subscrierlist .yw-indextable-search-box:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 132, 254, 0.12);
}

.yw-subscrierlist .yw-indextable-search-icon {
  margin-right: 0;
  color: var(--color-text-tertiary);
}

.yw-subscrierlist .yw-indextable-search-input input {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.yw-subscrierlist .yw-indextable-search-input input::-moz-placeholder {
  color: var(--color-text-tertiary);
}

.yw-subscrierlist .yw-indextable-search-input input::placeholder {
  color: var(--color-text-tertiary);
}

.yw-subscrierlist-list-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.yw-subscrierlist-list-item:hover {
  background-color: var(--channel-setting-item-hover-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* 列表项之间的分割线 */
.yw-subscrierlist-list-item + .yw-subscrierlist-list-item {
  margin-top: 8px;
}

.yw-subscrierlist-item-avatar {
  flex-shrink: 0;
}

.yw-subscrierlist-item-name {
  margin-left: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex: 1 1;
  font-size: var(--channel-setting-item-title-size);
  color: var(--channel-setting-item-title-color);
}

.yw-subscrierlist-item-content {
  display: flex;
  flex: 1 1;
  align-items: center;
  margin-left: 12px;
  min-width: 0;
}

.yw-subscrierlist-item-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.yw-subscrierlist-item-extra {
  margin-left: var(--spacing-sm);
  color: var(--semi-color-danger);
}

.yw-subscrierlist-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid transparent;
}

.yw-subscrierlist-role-badge.owner {
  color: var(--channel-setting-role-owner-color);
  background: var(--channel-setting-role-owner-bg);
  border-color: rgba(0, 132, 254, 0.35);
}

.yw-subscrierlist-role-badge.manager {
  color: var(--channel-setting-role-manager-color);
  background: var(--channel-setting-role-manager-bg);
  border-color: rgba(255, 152, 0, 0.3);
}

.yw-subscrierlist-item-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: var(--spacing-md);
}

.yw-subscrierlist-list-item:hover .yw-subscrierlist-item-action {
  opacity: 1;
}

.yw-subscrierlist-item-desc .online-status {
  color: var(--color-success);
  margin-left: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.yw-subscrierlist-item-desc .offline-status {
  color: var(--color-text-muted);
  margin-left: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.yw-subscrierlist-list {
  flex: 1 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

/* 弹窗内的列表容器去掉内边距，内容与外层保持齐平 */
.yw-group-modal .yw-subscrierlist {
  padding: 0;
}

.yw-subscrierlist-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* ===================================================================
 * Chat 页面布局样式
 * 响应式断点（与 WKLayout 保持一致）:
 *   - desktop: > 1024px (三栏布局，标准宽度)
 *   - tablet:  641px - 1024px (三栏布局，会话面板收窄)
 *   - mobile:  <= 640px (全屏切换模式)
 * =================================================================== */

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

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

/* 左侧会话列表区域 - 继承父容器宽度（由 WKLayout 控制响应式） */
.yw-chat-content-left {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

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

.yw-chat-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

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

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

.yw-chat-title {
  width: 250px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.yw-chat-network-status {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  padding: var(--radius-xs) var(--spacing-xs);
  border-radius: var(--radius-sm);
  background-color: var(--color-error-bg);
}

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

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

/* ===================================================================
 * Tablet 平板模式 (641px - 1024px)
 * =================================================================== */
.yw-layout[data-screen-size="tablet"] .yw-chat-title {
  width: 200px;
  font-size: var(--font-size-lg);
}

/* ===================================================================
 * Mobile 移动端模式 (<= 640px)
 * 由 WKLayout 控制整体布局切换，此处处理内部细节
 * =================================================================== */
.yw-layout[data-screen-size="mobile"] .yw-chat-title {
  width: auto;
  flex: 1 1;
  min-width: 0;
}

/* 移动端显示返回按钮 */
.yw-layout[data-screen-size="mobile"] .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(--layout-channel-setting-width));
}

/* 头部容器 - 支持垂直布局 */
.yw-chat-conversation-header {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 11;
  position: relative;
  box-sizing: border-box;
  border-bottom: var(--color-border-line);
}

/* 头部内容区域 - 固定高度 */
.yw-chat-conversation-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--layout-viewqueue-header-height);
  padding: 0.5rem 0.8125rem 0.5rem 1.5rem;
  box-sizing: border-box;
}

.yw-chat-conversation-header-content.is-clickable {
  cursor: pointer;
}

/* 通知区域：群公告和置顶消息Toast - 位于header内部 */
.yw-chat-conversation-notifications {
  max-width: 65%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px 12px;
  flex-shrink: 0;
}

.yw-chat-conversation-notifications:empty {
  display: none;
}

/* 会话内容区域占据剩余空间 */
.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(--color-bg-sidebar);
}

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

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

.yw-chat-conversation-header-left {
  display: flex;
  align-items: center;
  flex: 1 1;
  min-width: 0; /* 允许flex子项收缩以触发省略 */
  overflow: hidden; /* 确保内容不会溢出 */
}

/* ===== 返回按钮（移动端显示） ===== */
.yw-chat-conversation-header-back {
  width: 44px; /* 增加触控区域，符合 44px 最小触控目标 */
  height: 44px;
  display: none;
  position: relative;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  margin-right: 4px;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

/* 返回按钮 hover/active 状态 */
.yw-chat-conversation-header-back:hover {
  background-color: rgba(0, 0, 0, 0.05);
  background-color: var(--state-hover-bg, rgba(0, 0, 0, 0.05));
}

.yw-chat-conversation-header-back:active {
  background-color: rgba(0, 0, 0, 0.1);
  background-color: var(--state-active-bg, rgba(0, 0, 0, 0.1));
}

.yw-chat-conversation-header-back-icon {
  position: absolute;
  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: var(--color-text-secondary);
  transition: transform var(--transition-slide);
}

.yw-chat-conversation-header-channel {
  flex: 1 1;
  min-width: 0; /* 允许flex子项收缩以触发省略 */
  display: flex;
  gap: var(--spacing-md);
  overflow: hidden; /* 确保内容不会溢出 */
}

.yw-chat-conversation-header-channel-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 防止头像被压缩 */
}

.yw-chat-conversation-header-channel-avatar.is-userinfo-trigger {
  cursor: pointer;
}

.yw-chat-conversation-header-channel-avatar img {
  width: auto;
  height: var(--control-height-lg);
  border-radius: var(--radius-full);
}

.yw-chat-conversation-header-channel-info {
  flex: 1 1;
  min-width: 0; /* 允许flex子项收缩以触发省略 */
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
  overflow: hidden; /* 确保内容不会溢出 */
}

.yw-chat-conversation-header-channel-info-name-row {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 6px;
  overflow: hidden; /* 确保内容不会溢出 */
  flex: 1 1; /* 占据可用空间 */
  min-width: 0; /* 允许收缩以触发省略 */
}

.yw-chat-conversation-header-channel-info-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  /* 最多显示1行，超过显示... */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%; /* 确保文本省略生效 */
}

.yw-chat-conversation-header-edit-icon {
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
}

.yw-chat-conversation-header-edit-icon:hover {
  color: var(--color-text-secondary);
}

.yw-chat-conversation-header-right {
  display: flex;
  align-items: center;
  gap: 4px; /* 统一右侧操作图标间距 */
  flex-shrink: 0; /* 防止在空间不足时被压缩 */
}

.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(--layout-channel-setting-width);
  height: 100%;
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  border-left: var(--color-border-line);
  background-color: var(--color-bg-sidebar);
  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(114, 114, 114, 0.25098);
  border-left: none;
}

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

.yw-chatmenuspopover li {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-md);
}

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

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

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

.yw-chatmenuspopover-title {
  margin-left: var(--spacing-xs);
  font-size: var(--font-size-base);
}

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

.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: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--radius-xs);
  overflow: hidden; /* 防止溢出 */
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%; /* 确保文本省略生效 */
}

.yw-chat-conversation-header-channel-info-tip .online-status {
  color: var(--color-success);
}

.yw-chat-conversation-header-channel-info-tip .offline-status {
  color: var(--color-text-muted);
}

/* 群聊状态样式 */
.yw-chat-conversation-header-channel-info-tip .group-status {
  color: var(--color-text-muted);
}

.yw-chat-conversation-header-channel-info-tip .online-count {
  margin-left: var(--spacing-xs);
  color: var(--color-success);
}

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

/* 两位数的样式 */
.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;
}

/* ===================================================================
 * Sections 分区组件
 * 通用样式 + 频道设置专用样式（通过上下文选择器区分）
 * =================================================================== */

/* ======================== 通用样式 ======================== */

.yw-sections {
  /* 通用容器样式 */
}

.yw-section {
  margin-top: var(--spacing-sm);
}

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

.yw-section-rows {
  /* 行容器 - 由子元素撑开 */
  display: block;
}

.yw-section-title {
  padding: 8px 16px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.yw-section-row {
  /* 单行容器 - 由子元素撑开 */
  display: block;
}

.yw-section-subtitle {
  padding: 8px 16px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* ======================== 频道设置专用样式 ======================== */
/* 仅当 Sections 在 .yw-channelsetting-content 容器内时应用 */

.yw-channelsetting-content .yw-section {
  margin-top: var(--channel-setting-section-margin);
}

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

.yw-channelsetting-content .yw-section-rows {
  background-color: var(--channel-setting-section-bg);
  border-radius: var(--channel-setting-section-radius);
  overflow: hidden;
}

.yw-channelsetting-content .yw-section-title {
  padding: 12px 16px 8px 16px;
  color: var(--channel-setting-label-color);
  font-size: var(--channel-setting-label-size);
}

.yw-channelsetting-content .yw-section-subtitle {
  padding: 8px 16px 12px 16px;
  color: var(--channel-setting-label-color);
  font-size: var(--channel-setting-label-size);
}

/* 频道设置中分区内多行之间的分割线 */
.yw-channelsetting-content .yw-section-rows > .yw-section-row + .yw-section-row {
  position: relative;
}

.yw-channelsetting-content .yw-section-rows > .yw-section-row + .yw-section-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: var(--color-border-strong);
  opacity: 0.5;
}

/* ===================================================================
 * ChannelSetting 频道设置组件
 * 支持响应式和主题切换
 * =================================================================== */

:root {
  --layout-channel-setting-header: 80px;
}

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

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

.yw-channelsetting-close {
  width: var(--control-height-xl);
  height: var(--control-height-xl);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-full);
}

.yw-channelsetting-close:hover {
  background-color: var(--state-hover-bg);
}

.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: var(--color-text-secondary);
  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(--layout-channel-setting-header));
  overflow: hidden;
  position: relative;
}

.yw-channelsetting-content {
  width: 100%;
  height: 100%;
  background-color: var(--channel-setting-bg);
  padding: var(--channel-setting-section-margin);
  overflow: auto;
  padding-top: var(--channel-setting-section-margin);
  padding-bottom: 24px;
  box-sizing: border-box;
}

.yw-channelsetting-channel-info {
  display: flex;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--color-bg-card);
}

.yw-channelsetting-avatar {
  /* 高宽比率 */
  width: var(--avatar-size-xl);
  height: var(--avatar-size-xl);
  position: relative;
}

.yw-channelsetting-avatar img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-full);
}

.yw-channelsetting-name {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-left: var(--spacing-md);
}

.yw-channelsetting-header-title-box {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  flex: 1 1;
  min-width: 0; /* 允许文字截断 */
}

/* .yw-channelsetting-header-title-box-open 样式由子元素选择器控制 */

.yw-channelsetting-header-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-left: 1.375rem;
  color: var(--color-text-primary);
}

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

.yw-channelsetting-header-title-route {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-left: 1.375rem;
  color: var(--color-text-primary);
  position: absolute;
  transform: translate3d(100vw, 0, 0);
  transition: transform var(--transition-layer);
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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(--channel-setting-bg);
  position: absolute;
  top: 0px;
  overflow: hidden;
  transform: translate3d(100vw, 0, 0);
  transition: transform var(--transition-layer);
}

.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: var(--spacing-md);
}

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

/* ===================================================================
 * 响应式设计 - 使用 data-screen-size 选择器
 * =================================================================== */

/* Tablet 平板模式 */
[data-screen-size="tablet"] .yw-channelsetting-header {
  padding: 0.4rem 0.6rem;
}

[data-screen-size="tablet"] .yw-channelsetting-header-title,
[data-screen-size="tablet"] .yw-channelsetting-header-title-route {
  font-size: var(--font-size-lg);
  margin-left: 1rem;
}

[data-screen-size="tablet"] .yw-channelsetting-avatar {
  width: 56px;
  height: 56px;
}

/* Mobile 移动端模式 */
[data-screen-size="mobile"] .yw-channelsetting {
  /* 移动端设置面板占满全屏 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px;
  bottom: var(--layout-tab-mobile-height, 64px);
  z-index: 20;
}

[data-screen-size="mobile"] .yw-channelsetting-header {
  height: 60px;
  padding: 0.3rem 0.5rem;
}

[data-screen-size="mobile"] .yw-channelsetting-header-title,
[data-screen-size="mobile"] .yw-channelsetting-header-title-route {
  font-size: var(--font-size-lg);
  margin-left: 0.75rem;
}

[data-screen-size="mobile"] .yw-channelsetting-close {
  width: 40px;
  height: 40px;
}

[data-screen-size="mobile"] .yw-channelsetting-avatar {
  width: 52px;
  height: 52px;
}

[data-screen-size="mobile"] .yw-channelsetting-name {
  font-size: var(--font-size-base);
}

[data-screen-size="mobile"] .yw-channelsetting-channel-info {
  padding: var(--spacing-md);
}

/* ===================================================================
 * RoutePage 路由页面组件
 * 支持主题切换
 * =================================================================== */

.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(--color-bg-card);
  border-bottom: var(--color-border-line);
}

/* 弹窗模式 */
.yw-route-header--modal {
  height: var(--layout-modal-header-height);
  padding: 0 var(--spacing-lg);
  background-color: var(--modal-header-bg);
}

/* 设置页面模式 */
.yw-route-header--setting {
  height: var(--layout-viewqueue-header-height);
  padding: 0 var(--spacing-xl);
}

/* 聊天详情模式 */
.yw-route-header--chat {
  height: 64px;
  padding: 0 var(--spacing-lg);
}

/* 左侧区域 */
.yw-route-header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1 1;
  min-width: 0;
}

/* 返回按钮 */
.yw-route-header-back {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-sm);
  margin-right: var(--spacing-xs);
}

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

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

/* 右侧区域 */
.yw-route-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* 关闭按钮 */
.yw-route-header-close {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-sm);
}

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

.yw-route-content {
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-sidebar);
  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(--transition-layer);
}

.yw-route-content-next {
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-sidebar);
  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: var(--radius-full);
}

.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: var(--color-text-secondary);
  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: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.yw-route-header-title-next {
  margin-left: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.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 var(--transition-base);
}

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

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

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

.yw-route-header-action {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base);
}

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

.yw-route-header-action-left {
  margin-right: var(--spacing-md);
}

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

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

  .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(--transition-layer);
  overflow: hidden;
  background-color: var(--color-bg-conversation);
  z-index: 1; /* 确保视图队列中的视图在联系人索引导航条之上 */
}

.yw-viewqueue-view-last {
  background-color: var(--color-bg-chat);
  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 {
  flex: 1 1;
  display: inline-flex;
  justify-content: space-between;
  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;
}

/* ===================================================================
 * PinnedMessageToast 置顶消息提示组件
 * 支持主题切换 - 基于Figma设计稿优化
 * =================================================================== */

.pinned-message-toast {
  display: flex;
  align-items: center;
  padding: var(--notification-toast-padding);
  background-color: var(--notification-toast-bg);
  border-radius: var(--notification-toast-radius);
  gap: var(--notification-toast-gap);
  cursor: pointer;
  box-sizing: border-box;
  max-width: 100%;
}

.pinned-message-content {
  display: flex;
  align-items: center;
  flex: 1 1;
  overflow: hidden;
  min-width: 0;
  gap: var(--notification-toast-gap);
}

.pinned-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--notification-toast-icon-color);
}

.pinned-text {
  flex: 1 1;
  overflow: hidden;
  min-width: 0;
  font-size: 14px;
  line-height: 1.29;
  color: var(--notification-toast-text-color);
}

/* 确保消息预览组件占满父容器宽度 */
.pinned-text .message-preview {
  display: block;
  width: 100%;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pinned-actions {
  display: flex;
  align-items: center;
  gap: var(--notification-toast-gap);
  flex-shrink: 0;
}

.pinned-count {
  font-size: 14px;
  color: var(--notification-toast-count-color);
  flex-shrink: 0;
}

.show-all-pinned {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--notification-toast-count-color);
  transition: color 0.2s ease;
}

.show-all-pinned:hover {
  color: var(--notification-toast-icon-color);
}

.close-btn {
  cursor: pointer;
  color: var(--notification-toast-count-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.close-btn:hover {
  color: var(--color-danger);
}

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

/* ================================================================
 * 弹窗主题变量（明/暗） - 对齐 Figma 视觉
 * ================================================================ */
.yw-pinned-messages-modal {
  --pinned-modal-bg: var(--color-bg-page);
  --pinned-modal-border: 1px solid rgba(0, 0, 0, 0.1);
  --pinned-modal-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
  --pinned-divider: 1px solid rgba(0, 0, 0, 0.08);
  --pinned-card-bg: var(--state-default-bg);
  --pinned-card-border: 1px solid var(--state-default-border);
  --pinned-card-radius: 8px;
  --pinned-title-color: var(--color-text-primary);
  --pinned-meta-color: var(--color-text-muted);
  --pinned-remove-color: var(--color-link, #0084fe);
}

body:not([theme-mode="dark"]) .yw-pinned-messages-modal {
  --pinned-modal-bg: #f8f8f8;
  --pinned-modal-border: 1px solid rgba(0, 0, 0, 0.1);
  --pinned-modal-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
  --pinned-divider: 1px solid rgba(0, 0, 0, 0.08);
  --pinned-card-bg: #ffffff;
  --pinned-card-border: 1px solid rgba(0, 0, 0, 0.05);
  --pinned-meta-color: rgba(26, 28, 30, 0.5);
}

body[theme-mode="dark"] .yw-pinned-messages-modal {
  --pinned-modal-bg: #1f1f1f;
  --pinned-modal-border: 1px solid rgba(255, 255, 255, 0.1);
  --pinned-modal-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  --pinned-divider: 1px solid rgba(255, 255, 255, 0.12);
  --pinned-card-bg: #323436;
  --pinned-card-border: 1px solid rgba(255, 255, 255, 0.08);
  --pinned-title-color: var(--color-text-white);
  --pinned-meta-color: rgba(255, 255, 255, 0.5);
}

/* ================================================================
 * 弹窗外框与标题
 * ================================================================ */
.yw-pinned-messages-modal .semi-modal-content {
  width: 520px;
  max-width: 90vw;
  background: var(--pinned-modal-bg);
  border: var(--pinned-modal-border) !important;
  border-radius: 12px;
  box-shadow: var(--pinned-modal-shadow);
  overflow: hidden;
}

.yw-pinned-messages-modal .semi-modal-header {
  background: var(--pinned-modal-bg);
  border-bottom: var(--pinned-divider) !important;
  padding: 16px 20px;
}

.yw-pinned-messages-modal .semi-modal-title {
  color: var(--pinned-title-color);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.yw-pinned-messages-modal .semi-modal-close {
  color: var(--pinned-title-color);
}

.yw-pinned-messages-modal .semi-modal-body-wrapper,
.yw-pinned-messages-modal .semi-modal-body {
  background: var(--pinned-modal-bg);
  padding: 16px 20px !important;
}

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

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

.pinned-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--pinned-meta-color);
}

.pinned-empty-title {
  color: var(--pinned-title-color);
  font-size: 16px;
  margin-bottom: 8px;
}

.pinned-empty-desc {
  font-size: 13px;
}

/* ================================================================
 * 列表卡片
 * ================================================================ */
.pinned-message-item {
  border-radius: var(--pinned-card-radius);
  margin-bottom: 12px;
  background-color: var(--pinned-card-bg);
  border: var(--pinned-card-border);
  position: relative;
  overflow: hidden;
  padding: 10px 12px 12px;
  box-shadow: none;
}

.pinned-message-item:last-child {
  margin-bottom: 0;
}

.pinned-message-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: var(--pinned-divider);
  -moz-column-gap: 8px;
       column-gap: 8px;
}

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

.pinned-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.sender-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sender-name {
  font-weight: var(--font-weight-semibold);
  margin-right: 4px;
  margin-right: var(--spacing-xxs, 4px);
  color: var(--pinned-title-color);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.send-time {
  color: var(--pinned-meta-color);
  font-size: 12px;
  white-space: nowrap;
}

.pinned-remove {
  border: none;
  background: transparent;
  color: var(--pinned-remove-color);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1.4;
  align-self: flex-start;
  font-family: inherit;
  font-weight: 500;
  font-weight: var(--font-weight-medium, 500);
}

.pinned-remove:hover {
  color: #0084fe;
  color: var(--color-accent-hover, #0084fe);
  text-decoration: underline;
}

.pinned-message-item-content {
  padding: 10px 2px 0;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
}

.yw-pinned-messages-modal .message-content {
  padding-right: 0;
  color: var(--pinned-title-color);
  line-height: 1.6;
  flex: 1 1;
  min-width: 0;
}

/* 为 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%;
}

/* 文本内容行距与颜色 */
.yw-pinned-messages-modal .yw-message-text {
  background-color: transparent;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--pinned-title-color);
  max-width: 100%;
  word-break: break-word;
}

/* 媒体内容约束 */
.pinned-message-item .content-video-container,
.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-video-container video,
.pinned-message-item .content-image {
  width: 100%;
  height: 100%;
  -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%;
}

.message-preview {
  font-size: var(--font-size-base);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 1.4;
  display: block;
} 
.group-announcement-toast {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  padding: var(--notification-toast-padding);
  background-color: var(--notification-toast-bg);
  border-radius: var(--notification-toast-radius);
  gap: var(--notification-toast-gap);
  cursor: pointer;
  box-sizing: border-box;
}

.group-announcement-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--notification-toast-icon-color);
}

/* 群公告文本样式 */
.group-announcement-text {
  flex: 1 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.29;
  color: var(--notification-toast-text-color);
}

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

.yw-group-announcement-modal .semi-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.yw-group-announcement-modal .semi-modal-body {
  padding: var(--spacing-md) 0;
  min-height: 180px;
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.yw-group-announcement-modal .semi-modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

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

/* 弹窗关闭按钮样式优化 */
.yw-group-announcement-modal .semi-modal-close {
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.yw-group-announcement-modal .semi-modal-close:hover {
  color: var(--color-text-primary);
}

/* 编辑模式样式 - 始终可编辑设计 */
.group-announcement-textarea {
  width: 100%;
  resize: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: 1.6;
  transition: all var(--transition-base);
  background-color: transparent;
  min-height: 120px;
  max-height: 50vh;
}

.group-announcement-textarea textarea {
  padding: 0 !important;
  scrollbar-width: none;
}

.group-announcement-textarea textarea::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.semi-input-textarea-disabled, .semi-input-textarea-readonly {
  background-color: transparent !important;
  cursor: default !important;
  color: var(--color-text-primary) !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: var(--color-bg-card);
  /* 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: var(--spacing-sm);
  padding: 0;
}

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

.group-announcement-modal-footer .semi-button {
  min-width: 80px;
  height: var(--control-height-base);
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.group-announcement-modal-footer .semi-button-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.group-announcement-modal-footer .semi-button-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.group-announcement-modal-footer .semi-button-tertiary {
  color: var(--color-text-secondary);
  border-color: var(--color-border-muted);
}

.group-announcement-modal-footer .semi-button-tertiary:hover {
  background-color: var(--state-hover-bg);
  border-color: var(--color-border-muted);
}

/* 弹窗footer区域样式调整 */
.yw-group-announcement-modal .semi-modal-footer {
  border-top: var(--color-border-line);
  padding: var(--spacing-lg) var(--spacing-2xl);
  margin: 0;
}

.yw-chat-empty-state {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  background-color: var(--color-bg-chat);
}

.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: var(--spacing-3xl) var(--spacing-2xl);
  width: 100%;
}

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

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

/* 消息点容器（静态，无动画） */
.yw-message-dots {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-2xl);
  background: rgba(var(--color-accent-rgb), 0.1);
  border-radius: var(--spacing-2xl);
  /* 移除 backdrop-filter，避免昂贵的模糊合成 */
  /* backdrop-filter: blur(12px); */
  /* 轻量静态阴影 */
  box-shadow: var(--shadow-dropdown);
}

.yw-dot {
  width: var(--spacing-md);
  height: var(--spacing-md);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg,
    var(--color-accent) 0%,
    rgba(var(--color-accent-rgb), 0.8) 100%
  );
  box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
}


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

.yw-chat-empty-state-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 4px;
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.yw-chat-empty-state-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-base);
  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(var(--color-accent-rgb), 0.08),
    rgba(var(--color-accent-rgb), 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: var(--font-size-2xl);
  }

  .yw-chat-empty-state-subtitle {
    font-size: var(--font-size-xl);
    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: var(--spacing-xl);
  }

  .yw-chat-empty-state-content {
    max-width: 340px;
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .yw-chat-empty-state-visual {
    margin-bottom: var(--spacing-2xl);
  }

  .yw-chat-empty-state-title {
    font-size: var(--font-size-xl);
  }

  .yw-chat-empty-state-subtitle {
    font-size: var(--font-size-base);
    white-space: normal;
  }

  .yw-message-dots {
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-sm);
  }

  .yw-dot {
    width: var(--spacing-sm);
    height: var(--spacing-sm);
  }

  .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: var(--spacing-xl) var(--spacing-md);
  }

  .yw-chat-empty-state-title {
    font-size: var(--font-size-xl);
  }

  .yw-chat-empty-state-subtitle {
    font-size: var(--font-size-sm);
  }
}

/* 减少动画偏好设置 */
@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);
  }
}
/* ===================================================================
 * LoadingComponent 加载组件
 * 支持主题切换
 * =================================================================== */

.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;
  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: var(--color-text-primary);
  font-size: var(--font-size-base);
  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(--color-accent);
  -webkit-mask: repeating-linear-gradient(#000 0 5px, #0000 0 10px);
  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);
  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));
  }
}

/**
 * 主题系统 - 公共变量（主题无关）
 * 
 * 包含所有与主题颜色无关的变量：
 * - 字体系统 (Font System)
 * - 间距系统 (Spacing System)
 * - 圆角系统 (Border Radius System)
 * - 布局系统 (Layout System)
 * - 动画系统 (Transition System)
 * - 组件尺寸系统 (Component Size System)
 * 
 * 这些变量在亮色和暗色主题中保持一致
 */

:root {
  /* ========================================================
   * 一、字体系统 (Font System)
   * ======================================================== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family: var(--font-family-base);       /* 简写别名 */
  --font-family-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;
  
  /* ---------- 1.1 字号 ---------- */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  
  /* ---------- 1.2 字重 ---------- */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ---------- 1.3 行高 ---------- */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-base-px: 20px;
  --line-height-relaxed-px: 22px;

  /* ========================================================
   * 二、间距系统 (Spacing System)
   * 用于 padding/margin/gap 等
   * ======================================================== */
  --spacing-xss: 4px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 48px;
  --spacing-base: 12px;    /* 常用基准间距 */

  /* ========================================================
   * 三、圆角系统 (Border Radius System)
   * ======================================================== */
  --radius-xs: 2px;        /* 极小圆角：进度条、细节 */
  --radius-sm: 4px;        /* 小圆角：按钮、标签 */
  --radius-md: 6px;        /* 中圆角：输入框、小卡片 */
  --radius-base: 8px;      /* 基准圆角：消息气泡 */
  --radius-lg: 10px;       /* 大圆角：卡片、面板 */
  --radius-xl: 12px;       /* 超大圆角：模态框 */
  --radius-2xl: 16px;      /* 特大圆角：大气泡 */
  --radius-full: 50%;      /* 圆形：头像、图标按钮 */

  /* ========================================================
   * 四、布局系统 (Layout System)
   * ======================================================== */
  --layout-header-height: 60px;
  --layout-sider-width: 220px;
  --layout-sider-compact-width: 60px;
  --layout-content-left-width: 321px;
  --layout-chat-header-height: 80px;
  --layout-channel-setting-width: 340px;
  --layout-modal-body-height: 580px;
  --layout-modal-header-height: 60px;
  --layout-viewqueue-header-height: 60px;
  
  /* ---------- 4.1 响应式断点（与 theme/index.ts 同步） ---------- */
  --breakpoint-desktop-xl: 1600px;  /* 超大屏 2K/4K */
  --breakpoint-desktop: 1360px;     /* 桌面基准 */
  --breakpoint-laptop: 1280px;      /* 笔记本 */
  --breakpoint-tablet: 1024px;      /* 平板横屏 */
  --breakpoint-mini-tablet: 768px;  /* 平板竖屏/大手机横屏 */
  --breakpoint-mobile: 640px;       /* 移动端（确保三栏最小宽度） */
  
  /* ---------- 4.2 布局宽度 ---------- */
  /* 会话面板响应式宽度（参考 Material Design + BrowserStack 2025）：
   * - Desktop (> 1024px): clamp(280px, 25%, 380px)
   * - Tablet (641-1024px): clamp(240px, 30%, 300px)
   * - Mobile (<= 640px): 100%（全屏切换模式）
   * 三栏最小宽度: 72(Tab) + 240(会话) + 320(消息) = 632px
   * 实际宽度由 WKLayout/index.css 中的 clamp() 控制
   */
  
  /* 侧边栏宽度 */
  --layout-tab-width: 60px;
  --layout-tab-mobile-height: 64px;

  /* ========================================================
   * 五、动画系统 (Transition System)
   * ======================================================== */
  --transition-layer: 300ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-slide: 450ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* ========================================================
   * 六、透明度系统 (Opacity System)
   * ======================================================== */
  --opacity-1: 0.05;
  --opacity-2: 0.15;
  --opacity-3: 0.25;
  --opacity-4: 0.45;
  --opacity-5: 0.65;
  --opacity-6: 0.85;
  --opacity-7: 1;

  /* ========================================================
   * 七、组件尺寸系统 (Component Size System)
   * ======================================================== */
  
  /* ---------- 7.1 图标尺寸 ---------- */
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-base: 18px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  
  /* ---------- 7.2 头像尺寸 ---------- */
  --avatar-size-xs: 24px;  /* 极小：内联提及 */
  --avatar-size-sm: 32px;  /* 小：消息列表 */
  --avatar-size-base: 36px;/* 基准：会话列表 */
  --avatar-size-md: 40px;  /* 中：详情页 */
  --avatar-size-lg: 48px;  /* 大：个人资料 */
  --avatar-size-xl: 64px;  /* 超大：设置页 */
  --avatar-size-2xl: 80px; /* 特大：个人中心 */
  
  /* ---------- 7.3 控件高度 ---------- */
  --control-height-xs: 24px;
  --control-height-sm: 28px;
  --control-height-md: 32px;
  --control-height-base: 36px;
  --control-height-lg: 40px;
  --control-height-xl: 44px;
  
  /* ---------- 7.4 列表项高度 ---------- */
  --list-item-height-sm: 44px;
  --list-item-height-md: 56px;
  --list-item-height-lg: 72px;
  
  /* ---------- 7.5 模态框宽度 ---------- */
  --modal-width-sm: 400px;
  --modal-width-md: 520px;
  --modal-width-lg: 650px;
  --modal-width-xl: 800px;

  /* ---------- 7.6 消息卡片宽度 ---------- */
  --msg-card-width-standard: 280px;  /* 标准卡片：名片、位置、合并转发 */
  --msg-card-width-compact: 240px;   /* 紧凑卡片：文件消息 */
  --msg-card-width-wide: 320px;      /* 宽幅卡片：预留，用于复杂内容卡片 */
  --msg-card-min-width: 200px;       /* 最小宽度：保证内容可读 */
  --msg-card-max-width: 360px;       /* 最大宽度：不超过气泡最大宽度的 2/3 */
}

/**
 * 主题系统 - 亮色主题
 * 
 * 仅包含颜色相关变量，公共变量（字体、间距、圆角、布局、动画等）在 base.css 中定义
 * 
 * 变量命名规范：
 * - 背景色：--color-bg-*
 * - 文字色：--color-text-*
 * - 边框色：--color-border-*
 * - 状态色：--color-success/warning/error/danger
 * - 品牌色：--color-accent-*
 * - 交互状态：--state-*
 * - 阴影：--shadow-*
 * - 组件色：--color-message-*/--button-*/--info-*
 */

:root {
  /* ========================================================
   * 一、颜色系统 (Color System)
   * ======================================================== */

  /* ---------- 1.1 背景色 ---------- */
  --color-bg-page: #ECEEF0;
  --color-bg-card: #ffffff;
  --color-bg-sidebar: #ececec;
  --color-bg-conversation: #ffffff;
  --color-bg-chat: #f2f2f2;
  --color-bg-header: rgba(255, 255, 255, 0.95);
  --color-bg-search: rgba(26, 28, 30, 0.04);
  --color-bg-search-hover: rgba(26, 28, 30, 0.08);
  --color-bg-active: #ffffff;
  --color-bg-hover: rgba(0, 132, 254, 0.1);
  --color-bg-mask: rgba(0, 0, 0, 0.45);
  --color-bg-mask-light: rgba(255, 255, 255, 0.7);
  --color-bg-spotlight: rgba(0, 0, 0, 0.85);
  --color-bg-workspace: #ffffff;

  /* ---------- 1.2 文字色 ---------- */
  --color-text-primary: #1a1c1e;
  --color-text-secondary: #676E75;
  --color-text-muted: #676E75;
  --color-text-tertiary: #666666;
  --color-text-disabled: #c0c4cc;
  --color-text-white: #ffffff;
  --color-text-inverse: #ffffff;
  --color-link: #0084fe;

  /* ---------- 1.3 品牌与状态色 ---------- */
  --color-accent: #0084fe;
  --color-accent-rgb: 0, 132, 254;              /* 品牌色 RGB 值，用于 rgba() */
  --color-accent-soft: rgba(0, 132, 254, 0.1);
  --color-accent-hover: rgba(0, 132, 254, 0.85);
  --color-brand-secondary: #3bfff5;

  --color-success: #26e78b;
  --color-success-bg: rgba(38, 231, 139, 0.12);
  --color-warning: #fa9e3b;
  --color-warning-hover: #e8912f;
  --color-warning-bg: rgba(250, 158, 59, 0.12);
  --color-error: #f74c30;
  --color-error-bg: rgba(247, 76, 48, 0.12);
  --color-danger: #ff4d4d;
  --color-danger-hover: rgba(255, 77, 77, 0.85);
  --color-danger-dark: #fb2e2d;
  --color-danger-mid: #f72322;
  --color-danger-deep: #d51110;
  --color-info: #3bfff5;
  --color-info-bg: rgba(59, 255, 245, 0.12);

  /* ---------- 1.4 网络状态横幅色 ---------- */
  --color-banner-critical-bg: rgba(255, 77, 79, 0.12);
  --color-banner-critical-text: #d63031;
  --color-banner-warning-bg: rgba(250, 173, 20, 0.12);
  --color-banner-warning-text: #d68910;
  --color-banner-info-bg: rgba(24, 144, 255, 0.08);
  --color-banner-info-text: #1890ff;

  /* ---------- 1.5 边框色 ---------- */
  --color-border-strong: #E9EAEB;
  --color-border-muted: #c5c5c5;
  --color-border-checkbox: #d3d9de;
  --color-border-line: 1px solid #dadada;

  /* ---------- 1.6 滚动条色 ---------- */
  --color-scroll-thumb: #c5c5c5;
  --color-scroll-thumb-hover: #999999;
  --color-scroll-thumb-dark: #999999;
  --color-scroll-thumb-dark-hover: #666666;

  /* ---------- 1.7 媒体覆盖层色 ---------- */
  --color-video-overlay: rgba(0, 0, 0, 0.6);
  --color-video-overlay-hover: rgba(0, 0, 0, 0.8);

  /* ---------- 1.8 品牌色阶 ---------- */
  --color-accent-1: #e6f2ff;
  --color-accent-2: #cce5ff;
  --color-accent-3: #99ccff;
  --color-accent-4: #66b2ff;
  --color-accent-5: #0084fe;
  --color-accent-6: #006acc;
  --color-accent-7: #004b99;

  /* ========================================================
   * 二、交互状态系统 (Interaction States)
   * ======================================================== */

  /* ---------- 2.1 默认态 ---------- */
  --state-default-bg: #ffffff;
  --state-default-text: #1a1c1e;
  --state-default-border: rgba(0, 0, 0, 0.10);

  /* ---------- 2.2 悬停态 ---------- */
  --state-hover-bg: rgba(0, 132, 254, 0.1);
  --state-hover-text: rgba(26, 28, 30, 0.85);
  --state-hover-border: rgba(0, 132, 254, 0.2);

  /* ---------- 2.3 选中态 ---------- */
  --state-selected-bg: #0084fe;
  --state-selected-text: #ffffff;
  --state-selected-border: rgba(0, 132, 254, 0.3);
  --state-selected-top-bg: #3399fe;

  /* ---------- 2.4 激活态 ---------- */
  --state-active-bg: rgba(0, 132, 254, 0.16);
  --state-active-text: #1a1c1e;
  --state-active-border: rgba(0, 132, 254, 0.35);

  /* ---------- 2.5 禁用态 ---------- */
  --state-disabled-bg: rgba(26, 28, 30, 0.04);
  --state-disabled-text: rgba(26, 28, 30, 0.3);
  --state-disabled-border: rgba(26, 28, 30, 0.08);

  /* ========================================================
   * 三、图标颜色 (Icon Colors)
   * ======================================================== */
  --icon-primary: #303133;
  --icon-secondary: #999999;
  --icon-active: #0084fe;
  --icon-disabled: rgba(26, 28, 30, 0.35);
  --icon-hover: rgba(0, 132, 254, 0.8);

  /* ========================================================
   * 四、阴影系统 (Shadow System)
   * ======================================================== */
  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-mobile-panel: -8px 0 24px rgba(0, 0, 0, 0.12);

  /* ========================================================
   * 五、消息相关 (Message System)
   * ======================================================== */
  --color-message-bg: #FFFFFF;
  --color-message-sender-bg: #0084fe;
  --color-message-receiver-text: #1A1C1E;
  --color-chat-badge-bg: rgba(0, 132, 254, 0.14);
  --color-sender-text-primary: #ffffff;
  --color-sender-text-secondary: rgba(255, 255, 255, 0.85);
  --color-sender-text-disabled: rgba(255, 255, 255, 0.6);
  --color-sender-link: #3BFFF5;
  --color-message-highlight-bg: rgb(245, 248, 219);
  --color-message-highlight-border: rgba(92, 175, 250, 0.35);

  /* 合并转发弹窗专用 */
  --mergeforward-modal-bg: #f8f8f8;
  --mergeforward-bubble-bg: #ffffff;
  --mergeforward-bubble-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  --mergeforward-self-shadow: 0 8px 22px rgba(76, 141, 255, 0.25);

  --announcement-card-bg: #ffffff;
  --announcement-title-text: #1a1c1e;
  --announcement-meta-text: rgba(26, 28, 30, 0.5);

  /* ========================================================
   * 六、会话列表 (Conversation List)
   * ======================================================== */
  --color-conversationlist-top-bg: #F0F0F0;
  --color-conversationlist-hover-bg: rgba(0, 0, 0, 0.04);
  --color-time-text: #676E75;

  /* ========================================================
   * 七、按钮系统 (Button System)
   * ======================================================== */
  --button-light-bg: #ffffff;
  --button-light-text: rgba(26, 28, 30, 0.5);
  --button-light-border: rgba(0, 0, 0, 0.10);
  --button-primary-bg: #0084fe;
  --button-primary-text: #ffffff;
  --button-primary-border: #0084fe;

  /* ========================================================
   * 八、开关组件 (Switch Component)
   * ======================================================== */
  --color-switch-checked: #26e78b;

  /* ========================================================
   * 九、信息面板 (Info Panel)
   * ======================================================== */
  --info-panel-bg: #f8f8f8;
  --info-panel-border: rgba(0, 0, 0, 0.04);
  --info-panel-shadow: 0px 5px 20px rgba(0, 0, 0, 0.12);
  --info-card-bg: #ffffff;
  --info-card-border: rgba(0, 0, 0, 0.08);
  --info-row-bg: #ffffff;
  --info-row-border: rgba(0, 0, 0, 0.06);
  --info-row-hover: rgba(0, 132, 254, 0.08);
  --info-muted-text: rgba(26, 28, 30, 0.5);
  --modal-header-bg: #f8f8f8;

  /* ========================================================
   * 十、确认弹窗 (Confirm Modal)
   * ======================================================== */
  --confirm-modal-width: 480px;
  --confirm-modal-bg: #ffffff;
  --confirm-modal-border: none;
  --confirm-modal-cancel-border: rgba(0, 0, 0, 0.1);

  /* ========================================================
   * 十一、设置面板 (Settings Panel)
   * ======================================================== */
  --settings-panel-bg: #ffffff;
  --settings-panel-shadow: 0px 5px 20px rgba(0, 0, 0, 0.12);
  --settings-panel-border: none;
  --settings-item-bg: #F6F8FB;
  --settings-item-hover-bg: rgba(0, 0, 0, 0.08);

  /* ========================================================
   * 十二、频道设置 (Channel Setting)
   * ======================================================== */
  /* 页面背景 */
  --channel-setting-bg: #F5F5F5;
  
  /* 分区卡片 */
  --channel-setting-section-bg: #ffffff;
  --channel-setting-section-radius: 8px;
  --channel-setting-section-margin: 8px;
  
  /* 分区标题 */
  --channel-setting-label-color: rgba(26, 28, 30, 0.5);
  --channel-setting-label-size: 12px;
  
  /* 列表项 */
  --channel-setting-item-bg: #ffffff;
  --channel-setting-item-hover-bg: rgba(0, 0, 0, 0.04);
  --channel-setting-item-padding: 12px 16px;
  --channel-setting-item-title-color: #1a1c1e;
  --channel-setting-item-title-size: 14px;
  --channel-setting-item-subtitle-color: #676E75;
  --channel-setting-item-subtitle-size: 14px;
  
  /* 群成员区域 */
  --channel-setting-members-header-color: #1a1c1e;
  --channel-setting-members-link-color: #676E75;
  --channel-setting-members-avatar-size: 32px;
  --channel-setting-members-name-color: #1a1c1e;
  --channel-setting-members-name-size: 12px;
  --channel-setting-members-add-bg: #F5F5F5;
  --channel-setting-members-add-icon-color: #999999;
  
  /* 箭头图标 */
  --channel-setting-arrow-color: #999999;
  --channel-setting-arrow-size: 14px;
  
  /* 开关组件 */
  --channel-setting-switch-checked: #26e78b;
  --channel-setting-switch-unchecked: #E0E0E0;
  
  /* 危险操作按钮 */
  --channel-setting-danger-color: #E9446A;
  --channel-setting-danger-hover-bg: rgba(233, 68, 106, 0.08);
  
  /* 角色标签 */
  --channel-setting-role-owner-color: #0084FE;
  --channel-setting-role-owner-bg: rgba(0, 132, 254, 0.1);
  --channel-setting-role-manager-color: #F17E13;
  --channel-setting-role-manager-bg: rgba(241, 126, 19, 0.1);

  /* ========================================================
   * 十三、通知Toast (Notification Toast)
   * 置顶消息和群公告Toast样式
   * ======================================================== */
  --notification-toast-bg: #EAEAEA;
  --notification-toast-radius: 8px;
  --notification-toast-padding: 8px 12px;
  --notification-toast-gap: 8px;
  --notification-toast-icon-color: #0084FE;
  --notification-toast-text-color: #1A1C1E;
  --notification-toast-count-color: #999999;

  /* ========================================================
   * 十四、消息卡片 (Message Card)
   * 名片、文件、位置、合并转发等卡片类消息样式
   * ======================================================== */
  /* 卡片基础样式 */
  --msg-card-bg: #ffffff;
  --msg-card-border: rgba(0, 0, 0, 0.08);
  --msg-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --msg-card-divider: rgba(0, 0, 0, 0.08);

  /* 卡片文字颜色 */
  --msg-card-title: #1A1C1E;
  --msg-card-subtitle: rgba(26, 28, 30, 0.7);
  --msg-card-meta: rgba(26, 28, 30, 0.5);
  --msg-card-action: #0084fe;

  /* 发送者卡片专用（品牌色背景上的内容） */
  --msg-card-sender-bg: rgba(255, 255, 255, 0.15);
  --msg-card-sender-title: #ffffff;
  --msg-card-sender-subtitle: rgba(255, 255, 255, 0.85);
  --msg-card-sender-meta: rgba(255, 255, 255, 0.6);
  --msg-card-sender-divider: rgba(255, 255, 255, 0.2);
  --msg-card-sender-action: #3BFFF5;

  /* ========================================================
   * 十五、认证页面 (Auth Pages)
   * 登录、注册、忘记密码页面专用样式
   * ======================================================== */
  --color-auth-banner-bg: #7c42ff;
  --color-auth-card-bg: #ffffff;
  --color-auth-card-shadow: 0 4px 20px rgba(124, 66, 255, 0.1);
  --color-auth-content-bg: #f7f7f7;
  --color-auth-input-bg: #ffffff;
  --color-auth-input-disabled-bg: #f5f5f5;
  --color-auth-input-border: #e5e5e5;
  --color-auth-input-border-focus: #333333;
  --color-auth-tab-border: #e5e5e5;
  --color-auth-text-primary: #333333;
  --color-auth-text-secondary: #666666;
  --color-auth-text-muted: #999999;
  --color-auth-dropdown-bg: #ffffff;
  --color-auth-dropdown-border: #e5e5e5;
  --color-auth-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --color-auth-dropdown-item-hover: #f8f9fa;
  --color-auth-dropdown-item-selected: #e6f7ff;
  --color-auth-dropdown-divider: #f0f0f0;
  --color-auth-dropdown-search-bg: #fafafa;
  --color-auth-qrcode-overlay-bg: rgba(255, 255, 255, 0.9);
  --color-auth-version-text: rgba(0, 0, 0, 0.45);
  --color-auth-captcha-bg: #ffffff;
  --color-auth-captcha-border: #f0f0f0;
  --color-auth-captcha-close: #999999;
}

/**
 * 明亮主题选择器
 * 当 body 有 theme-mode="light" 属性时，使用与 :root 相同的变量值
 * 这确保与暗色主题 body[theme-mode="dark"] 有相同的 CSS 特异性
 * 注意：此部分与 :root 内容相同，是为了保证主题切换时的正确覆盖
 */
body[theme-mode="light"] {
  /* 背景色 */
  --color-bg-page: #ECEEF0;
  --color-bg-card: #ffffff;
  --color-bg-sidebar: #ececec;
  --color-bg-conversation: #ffffff;
  --color-bg-chat: #f2f2f2;
  --color-bg-header: rgba(255, 255, 255, 0.95);
  --color-bg-search: rgba(26, 28, 30, 0.04);
  --color-bg-search-hover: rgba(26, 28, 30, 0.08);
  --color-bg-active: #ffffff;
  --color-bg-hover: rgba(0, 132, 254, 0.1);
  --color-bg-mask: rgba(0, 0, 0, 0.45);
  --color-bg-mask-light: rgba(255, 255, 255, 0.7);
  --color-bg-spotlight: rgba(0, 0, 0, 0.85);
  --color-bg-workspace: #ffffff;

  /* 文字色 */
  --color-text-primary: #1a1c1e;
  --color-text-secondary: #676E75;
  --color-text-muted: #676E75;
  --color-text-tertiary: #666666;
  --color-text-disabled: #c0c4cc;
  --color-text-white: #ffffff;
  --color-text-inverse: #ffffff;
  --color-link: #0084fe;

  /* 品牌与状态色 */
  --color-accent: #0084fe;
  --color-accent-rgb: 0, 132, 254;
  --color-accent-soft: rgba(0, 132, 254, 0.1);
  --color-accent-hover: rgba(0, 132, 254, 0.85);
  --color-brand-secondary: #3bfff5;
  --color-success: #26e78b;
  --color-success-bg: rgba(38, 231, 139, 0.12);
  --color-warning: #fa9e3b;
  --color-warning-hover: #e8912f;
  --color-warning-bg: rgba(250, 158, 59, 0.12);
  --color-error: #f74c30;
  --color-error-bg: rgba(247, 76, 48, 0.12);
  --color-danger: #ff4d4d;
  --color-danger-hover: rgba(255, 77, 77, 0.85);
  --color-danger-dark: #fb2e2d;
  --color-danger-mid: #f72322;
  --color-danger-deep: #d51110;
  --color-info: #3bfff5;
  --color-info-bg: rgba(59, 255, 245, 0.12);

  /* 网络状态横幅色 */
  --color-banner-critical-bg: rgba(255, 77, 79, 0.12);
  --color-banner-critical-text: #d63031;
  --color-banner-warning-bg: rgba(250, 173, 20, 0.12);
  --color-banner-warning-text: #d68910;
  --color-banner-info-bg: rgba(24, 144, 255, 0.08);
  --color-banner-info-text: #1890ff;

  /* 边框色 */
  --color-border-strong: #E9EAEB;
  --color-border-muted: #c5c5c5;
  --color-border-checkbox: #d3d9de;
  --color-border-line: 1px solid #dadada;

  /* 滚动条色 */
  --color-scroll-thumb: #c5c5c5;
  --color-scroll-thumb-hover: #999999;
  --color-scroll-thumb-dark: #999999;
  --color-scroll-thumb-dark-hover: #666666;

  /* 媒体覆盖层色 */
  --color-video-overlay: rgba(0, 0, 0, 0.6);
  --color-video-overlay-hover: rgba(0, 0, 0, 0.8);

  /* 品牌色阶 */
  --color-accent-1: #e6f2ff;
  --color-accent-2: #cce5ff;
  --color-accent-3: #99ccff;
  --color-accent-4: #66b2ff;
  --color-accent-5: #0084fe;
  --color-accent-6: #006acc;
  --color-accent-7: #004b99;

  /* 交互状态 */
  --state-default-bg: #ffffff;
  --state-default-text: #1a1c1e;
  --state-default-border: rgba(0, 0, 0, 0.10);
  --state-hover-bg: rgba(0, 132, 254, 0.1);
  --state-hover-text: rgba(26, 28, 30, 0.85);
  --state-hover-border: rgba(0, 132, 254, 0.2);
  --state-selected-bg: #0084fe;
  --state-selected-text: #ffffff;
  --state-selected-border: rgba(0, 132, 254, 0.3);
  --state-selected-top-bg: #3399fe;
  --state-active-bg: rgba(0, 132, 254, 0.16);
  --state-active-text: #1a1c1e;
  --state-active-border: rgba(0, 132, 254, 0.35);
  --state-disabled-bg: rgba(26, 28, 30, 0.04);
  --state-disabled-text: rgba(26, 28, 30, 0.3);
  --state-disabled-border: rgba(26, 28, 30, 0.08);

  /* 图标颜色 */
  --icon-primary: #303133;
  --icon-secondary: #999999;
  --icon-active: #0084fe;
  --icon-disabled: rgba(26, 28, 30, 0.35);
  --icon-hover: rgba(0, 132, 254, 0.8);

  /* 阴影系统 */
  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-mobile-panel: -8px 0 24px rgba(0, 0, 0, 0.12);

  /* 消息相关 */
  --color-message-bg: #FFFFFF;
  --color-message-sender-bg: #0084fe;
  --color-message-receiver-text: #1A1C1E;
  --color-chat-badge-bg: rgba(0, 132, 254, 0.14);
  --color-sender-text-primary: #ffffff;
  --color-sender-text-secondary: rgba(255, 255, 255, 0.85);
  --color-sender-text-disabled: rgba(255, 255, 255, 0.6);
  --color-sender-link: #3BFFF5;
  --color-message-highlight-bg: rgb(245, 248, 219);
  --color-message-highlight-border: rgba(92, 175, 250, 0.35);

  /* 合并转发弹窗专用 */
  --mergeforward-modal-bg: #f8f8f8;
  --mergeforward-bubble-bg: #ffffff;
  --mergeforward-bubble-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  --mergeforward-self-shadow: 0 8px 22px rgba(76, 141, 255, 0.25);

  /* 系统公告消息 (System Announcement Message) */
  --announcement-card-bg: #ffffff;
  --announcement-title-text: #1a1c1e;
  --announcement-meta-text: rgba(26, 28, 30, 0.5);

  /* 会话列表 */
  --color-conversationlist-top-bg: #F0F0F0;
  --color-conversationlist-hover-bg: rgba(0, 0, 0, 0.04);
  --color-time-text: #676E75;

  /* 侧边栏菜单 */
  --sidebar-menu-bg: transparent;
  --sidebar-menu-selected-bg: rgba(0, 132, 254, 0.10);
  --sidebar-menu-hover-bg: rgba(0, 0, 0, 0.04);
  --sidebar-menu-size: 44px;
  --sidebar-menu-radius: 10px;

  /* 按钮系统 */
  --button-light-bg: #ffffff;
  --button-light-text: rgba(26, 28, 30, 0.5);
  --button-light-border: rgba(0, 0, 0, 0.10);
  --button-primary-bg: #0084fe;
  --button-primary-text: #ffffff;
  --button-primary-border: #0084fe;

  /* 开关组件 */
  --color-switch-checked: #26e78b;

  /* 信息面板 */
  --info-panel-bg: #f8f8f8;
  --info-panel-border: rgba(0, 0, 0, 0.04);
  --info-panel-shadow: 0px 5px 20px rgba(0, 0, 0, 0.12);
  --info-card-bg: #ffffff;
  --info-card-border: rgba(0, 0, 0, 0.08);
  --info-row-bg: #ffffff;
  --info-row-border: rgba(0, 0, 0, 0.06);
  --info-row-hover: rgba(0, 132, 254, 0.08);
  --info-muted-text: rgba(26, 28, 30, 0.5);
  --modal-header-bg: #f8f8f8;

  /* 确认弹窗 */
  --confirm-modal-width: 480px;
  --confirm-modal-bg: #ffffff;
  --confirm-modal-border: none;
  --confirm-modal-cancel-border: rgba(0, 0, 0, 0.1);

  /* 设置面板 */
  --settings-panel-bg: #ffffff;
  --settings-panel-shadow: 0px 5px 20px rgba(0, 0, 0, 0.12);
  --settings-panel-border: none;
  --settings-item-bg: #F6F8FB;
  --settings-item-hover-bg: rgba(0, 0, 0, 0.08);

  /* 频道设置 */
  --channel-setting-bg: #F5F5F5;
  --channel-setting-section-bg: #ffffff;
  --channel-setting-section-radius: 8px;
  --channel-setting-section-margin: 8px;
  --channel-setting-label-color: rgba(26, 28, 30, 0.5);
  --channel-setting-label-size: 12px;
  --channel-setting-item-bg: #ffffff;
  --channel-setting-item-hover-bg: rgba(0, 0, 0, 0.04);
  --channel-setting-item-padding: 12px 16px;
  --channel-setting-item-title-color: #1a1c1e;
  --channel-setting-item-title-size: 14px;
  --channel-setting-item-subtitle-color: #676E75;
  --channel-setting-item-subtitle-size: 14px;
  --channel-setting-members-header-color: #1a1c1e;
  --channel-setting-members-link-color: #676E75;
  --channel-setting-members-avatar-size: 32px;
  --channel-setting-members-name-color: #1a1c1e;
  --channel-setting-members-name-size: 12px;
  --channel-setting-members-add-bg: #F5F5F5;
  --channel-setting-members-add-icon-color: #999999;
  --channel-setting-arrow-color: #999999;
  --channel-setting-arrow-size: 14px;
  --channel-setting-switch-checked: #26e78b;
  --channel-setting-switch-unchecked: #E0E0E0;
  --channel-setting-danger-color: #E9446A;
  --channel-setting-danger-hover-bg: rgba(233, 68, 106, 0.08);
  --channel-setting-role-owner-color: #0084FE;
  --channel-setting-role-owner-bg: rgba(0, 132, 254, 0.1);
  --channel-setting-role-manager-color: #F17E13;
  --channel-setting-role-manager-bg: rgba(241, 126, 19, 0.1);

  /* 通知Toast (Notification Toast)置顶消息和群公告Toast样式 */
  --notification-toast-bg: #EAEAEA;
  --notification-toast-radius: 8px;
  --notification-toast-padding: 8px 12px;
  --notification-toast-gap: 8px;
  --notification-toast-icon-color: #0084FE;
  --notification-toast-text-color: #1A1C1E;
  --notification-toast-count-color: #999999;

  /* 消息卡片 (Message Card) */
  --msg-card-bg: #ffffff;
  --msg-card-border: rgba(0, 0, 0, 0.08);
  --msg-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --msg-card-divider: rgba(0, 0, 0, 0.08);
  --msg-card-title: #1A1C1E;
  --msg-card-subtitle: rgba(26, 28, 30, 0.7);
  --msg-card-meta: rgba(26, 28, 30, 0.5);
  --msg-card-action: #0084fe;
  --msg-card-sender-bg: rgba(255, 255, 255, 0.15);
  --msg-card-sender-title: #ffffff;
  --msg-card-sender-subtitle: rgba(255, 255, 255, 0.85);
  --msg-card-sender-meta: rgba(255, 255, 255, 0.6);
  --msg-card-sender-divider: rgba(255, 255, 255, 0.2);
  --msg-card-sender-action: #3BFFF5;

  /* 认证页面 (Auth Pages) */
  --color-auth-banner-bg: #7c42ff;
  --color-auth-card-bg: #ffffff;
  --color-auth-card-shadow: 0 4px 20px rgba(124, 66, 255, 0.1);
  --color-auth-content-bg: #f7f7f7;
  --color-auth-input-bg: #ffffff;
  --color-auth-input-disabled-bg: #f5f5f5;
  --color-auth-input-border: #e5e5e5;
  --color-auth-input-border-focus: #333333;
  --color-auth-tab-border: #e5e5e5;
  --color-auth-text-primary: #333333;
  --color-auth-text-secondary: #666666;
  --color-auth-text-muted: #999999;
  --color-auth-dropdown-bg: #ffffff;
  --color-auth-dropdown-border: #e5e5e5;
  --color-auth-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --color-auth-dropdown-item-hover: #f8f9fa;
  --color-auth-dropdown-item-selected: #e6f7ff;
  --color-auth-dropdown-divider: #f0f0f0;
  --color-auth-dropdown-search-bg: #fafafa;
  --color-auth-qrcode-overlay-bg: rgba(255, 255, 255, 0.9);
  --color-auth-version-text: rgba(0, 0, 0, 0.45);
  --color-auth-captcha-bg: #ffffff;
  --color-auth-captcha-border: #f0f0f0;
  --color-auth-captcha-close: #999999;
}

/**
 * 主题系统 - 暗黑主题
 * 
 * 变量命名规范与 light.css 保持一致
 * 仅覆盖颜色相关变量，布局/字体/动画等变量继承自 :root
 */

body[theme-mode="dark"] {
  /* ========================================================
   * 一、颜色系统 (Color System)
   * ======================================================== */

  /* ---------- 1.1 背景色 ---------- */
  --color-bg-page: #1A1C1E;                       /* 页面主背景 */
  --color-bg-card: #1A1C1E;                       /* 卡片/内容区域背景 */
  --color-bg-sidebar: #303030;                    /* 侧边栏背景 */
  --color-bg-conversation: #1B1B1B;               /* 会话面板背景 */
  --color-bg-chat: #111111;                       /* 聊天区域背景 */
  --color-bg-header: rgba(28, 28, 30, 0.95);      /* 顶部区域背景 */
  --color-bg-search: rgba(255, 255, 255, 0.08);   /* 搜索输入背景 */
  --color-bg-search-hover: rgba(255, 255, 255, 0.12); /* 搜索 hover 背景 */
  --color-bg-active: #0084fe;                     /* 激活区域背景 */
  --color-bg-hover: rgba(0, 132, 254, 0.1);       /* hover 高亮背景 */
  --color-bg-mask: rgba(0, 0, 0, 0.55);           /* 遮罩背景 */
  --color-bg-mask-light: rgba(0, 0, 0, 0.5);      /* 浅色遮罩背景（暗黑模式用深色） */
  --color-bg-spotlight: rgba(0, 0, 0, 0.85);      /* 聚焦遮罩背景 */
  --color-bg-workspace: #2c2c2e;                  /* 工作区背景 */

  /* ---------- 1.2 文字色 ---------- */
  --color-text-primary: #ffffff;                  /* 主要文字 */
  --color-text-secondary: rgba(255, 255, 255, 0.5); /* 次要文字 */
  --color-text-muted: #999999;                    /* 辅助/禁用文字 */
  --color-text-tertiary: #999999;                 /* 三级文字（兼容） */
  --color-text-disabled: #5c5c5c;                 /* 禁用文字 */
  --color-text-white: #ffffff;                    /* 纯白文字 */
  --color-text-inverse: #1a1c1e;                  /* 反色文字 */
  --color-link: #3bfff5;                          /* 链接色 */

  /* ---------- 1.3 品牌与状态色 ---------- */
  --color-accent: #0084fe;                        /* 品牌主色 */
  --color-accent-rgb: 0, 132, 254;                /* 品牌色 RGB 值，用于 rgba() */
  --color-accent-soft: rgba(0, 132, 254, 0.16);   /* 品牌弱化背景 */
  --color-accent-hover: rgba(0, 132, 254, 0.85);  /* 品牌 hover 色 */
  --color-brand-secondary: #3bfff5;               /* 品牌辅助色 */

  --color-success: #26e78b;                       /* 成功/在线 */
  --color-success-bg: rgba(38, 231, 139, 0.18);   /* 成功背景 */
  --color-warning: #fa9e3b;                       /* 警告 */
  --color-warning-hover: #ffb347;                 /* 警告 hover */
  --color-warning-bg: rgba(250, 158, 59, 0.18);   /* 警告背景 */
  --color-error: #f74c30;                         /* 错误 */
  --color-error-bg: rgba(247, 76, 48, 0.18);      /* 错误背景 */
  --color-danger: #ff4d4d;                        /* 危险基础色 */
  --color-danger-hover: rgba(255, 77, 77, 0.85);  /* 危险 hover */
  --color-danger-dark: #fb2e2d;                   /* 危险深色 */
  --color-danger-mid: #f72322;                    /* 危险中间态 */
  --color-danger-deep: #d51110;                   /* 危险重度 */
  --color-info: #3bfff5;                          /* 信息色 */
  --color-info-bg: rgba(59, 255, 245, 0.18);      /* 信息背景 */

  /* ---------- 1.3.1 网络状态横幅色 ---------- */
  --color-banner-critical-bg: rgba(255, 77, 79, 0.18);
  --color-banner-critical-text: #ff7875;
  --color-banner-warning-bg: rgba(250, 173, 20, 0.18);
  --color-banner-warning-text: #ffc53d;
  --color-banner-info-bg: rgba(24, 144, 255, 0.15);
  --color-banner-info-text: #69c0ff;

  /* ---------- 1.4 边框色 ---------- */
  --color-border-strong: #3A3D40;                 /* 强边框/分割线 */
  --color-border-muted: #3c3c3e;                  /* 次级边框 */
  --color-border-checkbox: #4c4c4e;               /* 复选框边框 */
  --color-border-line: 1px solid #353535; /* 标准分割线 */

  /* ---------- 1.5 滚动条色 ---------- */
  --color-scroll-thumb: #565656;
  --color-scroll-thumb-hover: #6e6e6e;
  --color-scroll-thumb-dark: #565656;
  --color-scroll-thumb-dark-hover: #424242;

  /* ---------- 1.6 媒体覆盖层色 ---------- */
  --color-video-overlay: rgba(0, 0, 0, 0.7);
  --color-video-overlay-hover: rgba(0, 0, 0, 0.85);

  /* ---------- 1.7 品牌色阶（用于渐变等场景） ---------- */
  --color-accent-1: rgba(0, 132, 254, 0.08);
  --color-accent-2: rgba(0, 132, 254, 0.16);
  --color-accent-3: rgba(0, 132, 254, 0.28);
  --color-accent-4: rgba(0, 132, 254, 0.44);
  --color-accent-5: #0084fe;
  --color-accent-6: #2f9cf7;
  --color-accent-7: #0a6cd8;

  /* ========================================================
   * 二、交互状态系统 (Interaction States)
   * ======================================================== */

  /* ---------- 2.1 默认态 ---------- */
  --state-default-bg: #2c2c2e;
  --state-default-text: #ffffff;
  --state-default-border: rgba(255, 255, 255, 0.1);

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

  /* ---------- 2.3 选中态 ---------- */
  --state-selected-bg: #0084fe;                    /* 选中背景纯色 */
  --state-selected-text: #ffffff;                  /* 选中文字白色 */
  --state-selected-border: rgba(0, 132, 254, 0.35);
  --state-selected-top-bg: #3399fe;                /* 置顶+选中背景（更淡） */

  /* ---------- 2.4 激活态 ---------- */
  --state-active-bg: rgba(0, 132, 254, 0.38);
  --state-active-text: #ffffff;
  --state-active-border: rgba(0, 132, 254, 0.45);

  /* ---------- 2.5 禁用态 ---------- */
  --state-disabled-bg: rgba(255, 255, 255, 0.08);
  --state-disabled-text: rgba(255, 255, 255, 0.35);
  --state-disabled-border: rgba(255, 255, 255, 0.12);

  /* ========================================================
   * 三、图标系统 (Icon System)
   * ======================================================== */
  --icon-primary: #ffffff;
  --icon-secondary: #999999;
  --icon-active: #0084fe;
  --icon-disabled: rgba(255, 255, 255, 0.28);
  --icon-hover: rgba(59, 255, 245, 0.8);

  /* ========================================================
   * 四、阴影系统 (Shadow System) - 暗黑主题需要更深的阴影
   * ======================================================== */
  --shadow-base: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.65);
  --shadow-popup: 0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-mobile-panel: -8px 0 24px rgba(0, 0, 0, 0.45);

  /* ========================================================
   * 五、消息相关变量 (Message System)
   * ======================================================== */
  --color-message-bg: #262626;                    /* 接收者消息背景 */
  --color-message-sender-bg: #0084fe;             /* 发送者消息背景 */
  --color-message-receiver-text: #ffffff;         /* 接收者消息文字 */
  --color-chat-badge-bg: rgba(0, 132, 254, 0.3);
  --color-sender-text-primary: rgba(255, 255, 255, 1);
  --color-sender-text-secondary: rgba(255, 255, 255, 0.85);
  --color-sender-text-disabled: rgba(255, 255, 255, 0.6);
  --color-sender-link: #3BFFF5;                    /* 发送者消息链接色 */
  --color-message-highlight-bg: rgba(92, 175, 250, 0.25);
  --color-message-highlight-border: rgba(92, 175, 250, 0.65);

  /* 合并转发弹窗专用 */
  --mergeforward-modal-bg: #1f1f1f;
  --mergeforward-bubble-bg: #262626;
  --mergeforward-bubble-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  --mergeforward-self-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);

  --announcement-card-bg: #262626;
  --announcement-title-text: #ffffff;
  --announcement-meta-text: rgba(255, 255, 255, 0.5);

  /* ========================================================
   * 六、会话列表相关 (Conversation List)
   * ======================================================== */
  --color-conversationlist-top-bg: #252525;        /* 置顶会话背景 */
  --color-conversationlist-hover-bg: rgba(255, 255, 255, 0.06); /* 会话悬停背景 */
  --color-time-text: rgba(255, 255, 255, 0.5);     /* 时间戳文字 */

  /* ========================================================
   * 七、侧边栏菜单 (Sidebar Menu)
   * ======================================================== */
  --sidebar-menu-bg: transparent;
  --sidebar-menu-selected-bg: #4A4B4A;
  --sidebar-menu-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-menu-size: 44px;
  --sidebar-menu-radius: 10px;

  /* ========================================================
   * 七、按钮系统 (Button System)
   * ======================================================== */
  --button-light-bg: #1f1f21;
  --button-light-text: rgba(255, 255, 255, 0.6);
  --button-light-border: #3c3c3e;
  --button-primary-bg: #0084fe;
  --button-primary-text: #ffffff;
  --button-primary-border: #0084fe;

  /* ========================================================
   * 八、开关组件 (Switch Component)
   * ======================================================== */
  --color-switch-checked: #26e78b;

  /* ========================================================
   * 九、信息面板 (Info Panel)
   * ======================================================== */
  --info-panel-bg: #1f1f1f;
  --info-panel-border: rgba(255, 255, 255, 0.1);
  --info-panel-shadow: 0px 5px 30px rgba(0, 0, 0, 0.55);
  --info-card-bg: #2b2b2e;
  --info-card-border: rgba(255, 255, 255, 0.08);
  --info-row-bg: #323436;
  --info-row-border: rgba(255, 255, 255, 0.08);
  --info-row-hover: rgba(255, 255, 255, 0.06);
  --info-muted-text: rgba(255, 255, 255, 0.6);
  --modal-header-bg: #1f1f1f;

  /* ========================================================
   * 十、确认弹窗 (Confirm Modal)
   * ======================================================== */
  --confirm-modal-width: 480px;
  --confirm-modal-bg: #1F1F1F;
  --confirm-modal-border: 1px solid rgba(255, 255, 255, 0.1);
  --confirm-modal-cancel-border: rgba(255, 255, 255, 0.1);

  /* ========================================================
   * 十一、设置面板 (Settings Panel)
   * ======================================================== */
  --settings-panel-bg: #1F1F1F;
  --settings-panel-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
  --settings-panel-border: 1px solid rgba(255, 255, 255, 0.1);
  --settings-item-bg: #323436;
  --settings-item-hover-bg: rgba(255, 255, 255, 0.12);

  /* ========================================================
   * 十二、频道设置 (Channel Setting)
   * ======================================================== */
  /* 页面背景 */
  --channel-setting-bg: #1A1C1E;
  
  /* 分区卡片 */
  --channel-setting-section-bg: #262626;
  --channel-setting-section-radius: 8px;
  --channel-setting-section-margin: 8px;
  
  /* 分区标题 */
  --channel-setting-label-color: rgba(255, 255, 255, 0.5);
  --channel-setting-label-size: 12px;
  
  /* 列表项 */
  --channel-setting-item-bg: #262626;
  --channel-setting-item-hover-bg: rgba(255, 255, 255, 0.06);
  --channel-setting-item-padding: 12px 16px;
  --channel-setting-item-title-color: #ffffff;
  --channel-setting-item-title-size: 14px;
  --channel-setting-item-subtitle-color: rgba(255, 255, 255, 0.5);
  --channel-setting-item-subtitle-size: 14px;
  
  /* 群成员区域 */
  --channel-setting-members-header-color: #ffffff;
  --channel-setting-members-link-color: rgba(255, 255, 255, 0.5);
  --channel-setting-members-avatar-size: 32px;
  --channel-setting-members-name-color: #ffffff;
  --channel-setting-members-name-size: 12px;
  --channel-setting-members-add-bg: #3A3A3C;
  --channel-setting-members-add-icon-color: #999999;
  
  /* 箭头图标 */
  --channel-setting-arrow-color: #666666;
  --channel-setting-arrow-size: 14px;
  
  /* 开关组件 */
  --channel-setting-switch-checked: #26e78b;
  --channel-setting-switch-unchecked: #3A3A3C;
  
  /* 危险操作按钮 */
  --channel-setting-danger-color: #E9446A;
  --channel-setting-danger-hover-bg: rgba(233, 68, 106, 0.12);
  
  /* 角色标签 */
  --channel-setting-role-owner-color: #3bfff5;
  --channel-setting-role-owner-bg: rgba(59, 255, 245, 0.15);
  --channel-setting-role-manager-color: #ffb347;
  --channel-setting-role-manager-bg: rgba(255, 179, 71, 0.15);

  /* ========================================================
   * 十三、通知Toast (Notification Toast)
   * 置顶消息和群公告Toast样式
   * ======================================================== */
  --notification-toast-bg: #262626;
  --notification-toast-radius: 8px;
  --notification-toast-padding: 8px 12px;
  --notification-toast-gap: 8px;
  --notification-toast-icon-color: #0084FE;
  --notification-toast-text-color: #FFFFFF;
  --notification-toast-count-color: rgba(255, 255, 255, 0.5);

  /* ========================================================
   * 十四、消息卡片 (Message Card)
   * 名片、文件、位置、合并转发等卡片类消息样式
   * ======================================================== */
  /* 卡片基础样式 */
  --msg-card-bg: #2A2A2C;
  --msg-card-border: rgba(255, 255, 255, 0.1);
  --msg-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  --msg-card-divider: rgba(255, 255, 255, 0.1);

  /* 卡片文字颜色 */
  --msg-card-title: #ffffff;
  --msg-card-subtitle: rgba(255, 255, 255, 0.7);
  --msg-card-meta: rgba(255, 255, 255, 0.5);
  --msg-card-action: #3bfff5;

  /* 发送者卡片专用（品牌色背景上的内容） */
  --msg-card-sender-bg: rgba(255, 255, 255, 0.1);
  --msg-card-sender-title: #ffffff;
  --msg-card-sender-subtitle: rgba(255, 255, 255, 0.85);
  --msg-card-sender-meta: rgba(255, 255, 255, 0.6);
  --msg-card-sender-divider: rgba(255, 255, 255, 0.15);
  --msg-card-sender-action: #3BFFF5;

  /* ========================================================
   * 十五、认证页面 (Auth Pages)
   * 登录、注册、忘记密码页面专用样式
   * ======================================================== */
  --color-auth-banner-bg: #7c42ff;
  --color-auth-card-bg: #262626;
  --color-auth-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --color-auth-content-bg: #1a1c1e;
  --color-auth-input-bg: #1f1f21;
  --color-auth-input-disabled-bg: #2a2a2c;
  --color-auth-input-border: #3c3c3e;
  --color-auth-input-border-focus: #ffffff;
  --color-auth-tab-border: #3c3c3e;
  --color-auth-text-primary: #ffffff;
  --color-auth-text-secondary: rgba(255, 255, 255, 0.6);
  --color-auth-text-muted: rgba(255, 255, 255, 0.4);
  --color-auth-dropdown-bg: #2a2a2c;
  --color-auth-dropdown-border: #3c3c3e;
  --color-auth-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  --color-auth-dropdown-item-hover: #353537;
  --color-auth-dropdown-item-selected: rgba(0, 132, 254, 0.2);
  --color-auth-dropdown-divider: #3c3c3e;
  --color-auth-dropdown-search-bg: #1f1f21;
  --color-auth-qrcode-overlay-bg: rgba(26, 28, 30, 0.9);
  --color-auth-version-text: rgba(255, 255, 255, 0.45);
  --color-auth-captcha-bg: #262626;
  --color-auth-captcha-border: #3c3c3e;
  --color-auth-captcha-close: rgba(255, 255, 255, 0.5);
}

/* 主题变量：统一从设计稿映射，避免重复定义 */
/* 公共变量（主题无关）：字体、间距、圆角、布局、动画等 */
/* 亮色主题：颜色相关变量 */
/* 暗色主题：仅覆盖颜色变量 */

*,
*: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;
}

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

body {
  height: 100%;
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* 添加主题相关的默认值 */
  background-color: var(--color-bg-card);
  color: var(--color-text-primary);
}

/* 全局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: var(--icon-secondary);
}

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

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

svg[data-type="disabled"] path {
  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: var(--color-bg-page);
}

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

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

.semi-button-light,
.semi-button-primary.semi-button-light {
  background-color: var(--button-light-bg);
  color: var(--button-light-text);
  border: 1px solid var(--button-light-border) !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: var(--color-accent) !important;
}

.semi-button-primary:hover {
  background-color: var(--color-accent-hover) !important;
}

.semi-button-primary.semi-button-light:hover {
  background-color: var(--color-accent-hover) !important;
}

.semi-switch-checked {
  background-color: var(--color-switch-checked) !important;
}

/* ===================================================================
 * 全局无障碍支持 - 减少动效偏好
 * 当用户系统设置"减少动效"时，禁用所有过渡和动画
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
}

/* ===================================================================
 * 全局焦点样式 - 无障碍键盘导航
 * =================================================================== */
/* 移除鼠标点击时的焦点环，仅保留键盘导航时的焦点指示 */
:focus:not(:focus-visible) {
  outline: none;
}

/* ===================================================================
 * 全局Popover样式覆盖
 * =================================================================== */
.semi-popover-wrapper {
  background-color: #fff !important;
  background-color: var(--settings-panel-bg, #fff) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  box-shadow: var(--settings-panel-shadow, none) !important;
  max-width: 320px !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* ===================================================================
 * 全局Modal样式覆盖
 * =================================================================== */
.semi-modal-wrap .semi-modal-content {
  box-shadow: none !important;
}

.semi-modal-wrap .semi-modal-header {
  border-bottom: var(--color-border-line) !important;
}

/* ===================================================================
 * 全局Drawer样式覆盖
 * =================================================================== */
.semi-sidesheet-header {
  border-bottom: var(--color-border-line) !important;
}

.semi-radio-addon-buttonRadio {
  color: var(--color-text-secondary) !important;
}

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

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

.yw-channelqrcode-qrcode-mask {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.yw-channelqrcode-qrcode-mask p {
  font-size: var(--font-size-md);
  margin: 0;
  color: var(--color-text-secondary);
}

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

.yw-channelqrcode-close {
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.18s ease;
}

.yw-channelqrcode-close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 统一二维码弹窗样式（与 QRCodeMy 共用 class 名） */
.yw-qrcode-modal-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
}

.yw-qrcode-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  text-align: left;
}

.yw-qrcode-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.yw-qrcode-userinfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yw-qrcode-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.yw-qrcode-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.yw-qrcode-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
}

.yw-qrcode-tip {
  font-size: 13px;
  text-align: center;
  color: var(--color-text-secondary);
}

.yw-qrcode-tip--channel {
  margin-top: 12px;
}

/* ===================================================================
 * InputEdit 输入编辑组件
 * 适配频道设置二级视图UI设计
 * =================================================================== */

.yw-inputedit {
  width: 100%;
  height: 100%;
  background: var(--channel-setting-bg);
  padding: var(--channel-setting-section-margin);
  box-sizing: border-box;
}

.yw-inputedit-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--channel-setting-label-color);
  margin-bottom: 8px;
  padding: 0 8px;
}

.yw-inputedit .semi-input-textarea-wrapper {
  background-color: var(--channel-setting-section-bg);
  border-radius: var(--channel-setting-section-radius);
  border: none;
  padding: 12px 16px;
}

.yw-inputedit .semi-input-textarea {
  padding: 0;
  font-size: var(--channel-setting-item-title-size);
  color: var(--channel-setting-item-title-color);
}

.yw-inputedit-placeholder {
  font-size: var(--font-size-sm);
  color: var(--channel-setting-label-color);
  margin: 8px 8px 0 8px;
}

.yw-inputedit-counter {
  text-align: right;
  margin-top: 8px;
  padding: 0 8px;
  color: var(--channel-setting-label-color);
  font-size: var(--font-size-sm);
}

/* ===================================================================
 * ListItem 列表项组件
 * 通用样式 + 频道设置专用样式（通过上下文选择器区分）
 * =================================================================== */

/* ======================== 通用样式 ======================== */

.yw-list-item {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  background-color: var(--color-bg-card);
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 48px;
  transition: background-color 0.2s ease;
}

.yw-list-item:hover {
  background-color: var(--color-bg-hover);
}

.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, var(--color-text-muted) 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.5;
  transition: 0s;
}

.yw-list-item-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.yw-list-item-action {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
  margin-left: auto;
}

.yw-list-item-subtitle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1 1;
  margin-left: 16px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: end;
  min-width: 0;
}

.yw-list-item-subtitle-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 多行文本列表项 */
.yw-list-item-multiline .yw-list-item-subtitle-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  text-align: right;
}

.yw-list-item-subtitle-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  -o-object-fit: cover;
     object-fit: cover;
}

/* 箭头图标样式 */
.yw-list-item-arrow-icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-left: 4px;
}

.yw-list-item-arrow {
  margin-right: calc(-1 * var(--spacing-md));
}

.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(--color-text-tertiary);
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-card);
  padding: 12px 16px;
}

/* 危险操作按钮样式 */
.yw-list-item-danger .yw-list-item-title {
  color: var(--color-danger);
}

.yw-list-item-danger:hover {
  background-color: rgba(233, 68, 106, 0.08);
  background-color: var(--color-danger-bg, rgba(233, 68, 106, 0.08));
}

/* ======================== 频道设置专用样式 ======================== */
/* 仅当 ListItem 在 .yw-channelsetting-content 容器内时应用 */

.yw-channelsetting-content .yw-list-item {
  padding: var(--channel-setting-item-padding);
  background-color: var(--channel-setting-item-bg);
}

.yw-channelsetting-content .yw-list-item:hover {
  background-color: var(--channel-setting-item-hover-bg);
}

.yw-channelsetting-content .yw-list-item-title {
  font-size: var(--channel-setting-item-title-size);
  color: var(--channel-setting-item-title-color);
}

.yw-channelsetting-content .yw-list-item-subtitle {
  font-size: var(--channel-setting-item-subtitle-size);
  color: var(--channel-setting-item-subtitle-color);
}

/* 群设置页的多行副标题统一单行省略，满足群公告展示需求 */
.yw-channelsetting-content .yw-list-item-multiline .yw-list-item-subtitle-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}

.yw-channelsetting-content .yw-list-item-arrow-icon {
  width: var(--channel-setting-arrow-size);
  height: var(--channel-setting-arrow-size);
  color: var(--channel-setting-arrow-color);
}

.yw-channelsetting-content .yw-list-item-tip {
  color: var(--channel-setting-label-color);
  font-size: var(--channel-setting-label-size);
  background-color: var(--channel-setting-item-bg);
}

.yw-channelsetting-content .yw-list-item-danger .yw-list-item-title {
  color: var(--channel-setting-danger-color);
}

.yw-channelsetting-content .yw-list-item-danger:hover {
  background-color: var(--channel-setting-danger-hover-bg);
}

/* ===================================================================
 * Subscribers 订阅者组件
 * 支持主题切换 - 适配频道设置UI设计
 * =================================================================== */

.yw-subscribers {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--channel-setting-section-bg);
  border-radius: var(--channel-setting-section-radius);
  overflow: hidden;
}

/* 群成员头部：标题 + 查看全部链接 */
.yw-subscribers-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 8px 16px;
}

.yw-subscribers-header-title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--channel-setting-members-header-color);
}

.yw-subscribers-header-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--channel-setting-members-link-color);
  cursor: pointer;
  transition: color 0.2s ease;
}

.yw-subscribers-header-link:hover {
  color: var(--color-accent);
}

.yw-subscribers-header-link svg {
  width: 14px;
  height: 14px;
}

.yw-subscribers-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 12px 16px 12px;
  grid-gap: 8px;
  gap: 8px;
  position: relative;
  min-height: 80px;
}

.yw-subscribers-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-mask-light);
  z-index: 1;
  gap: 8px;
  pointer-events: none;
}

.yw-subscribers-loading-spin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-subscribers-loading-text {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* 群成员单项：头像 + 名称 */
.yw-subscribers-item {
  width: 52px;
  font-size: var(--channel-setting-members-name-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.yw-subscribers-item:hover {
  opacity: 0.8;
}

.yw-subscribers-item img {
  width: var(--channel-setting-members-avatar-size);
  height: var(--channel-setting-members-avatar-size);
  border-radius: var(--radius-full);
}

.yw-subscribers-item-avatar {
  position: relative;
  width: var(--channel-setting-members-avatar-size);
  height: var(--channel-setting-members-avatar-size);
}

.yw-subscribers-item-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  -o-object-fit: cover;
     object-fit: cover;
}

.yw-subscribers-item-online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  border: 1.5px solid var(--channel-setting-section-bg);
}

/* 暗黑模式下在线状态绿点边框颜色为白色 */
body[theme-mode="dark"] .yw-subscribers-item-online-status {
  border-color: #ffffff;
}

.yw-subscribers-item-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  width: 100%;
}

.yw-subscribers-item-name {
  font-size: var(--channel-setting-members-name-size);
  color: var(--channel-setting-members-name-color);
  text-overflow: ellipsis;
  width: 100%;
  height: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  line-height: 16px;
}

/* 角色标签样式 */
.yw-subscribers-item-role {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 2px;
  margin-top: 2px;
  line-height: 14px;
}

/* 群主标签 */
.yw-subscribers-item-role-2 {
  color: var(--channel-setting-role-owner-color);
  background: var(--channel-setting-role-owner-bg);
}

/* 管理员标签 */
.yw-subscribers-item-role-1 {
  color: var(--channel-setting-role-manager-color);
  background: var(--channel-setting-role-manager-bg);
}

/* 添加/删除成员按钮 */
.yw-subscribers-item-add,
.yw-subscribers-item-remove {
  width: var(--channel-setting-members-avatar-size);
  height: var(--channel-setting-members-avatar-size);
  border-radius: var(--radius-full);
  background-color: var(--channel-setting-members-add-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.yw-subscribers-item-add:hover,
.yw-subscribers-item-remove:hover {
  background-color: var(--state-hover-bg);
}

.yw-subscribers-item-add svg,
.yw-subscribers-item-remove svg {
  width: 16px;
  height: 16px;
  color: var(--channel-setting-members-add-icon-color);
}

/* 查看更多群成员按钮 - 移到头部 */
.yw-subscribers-more {
  display: none;
}

/* ===================================================================
 * ConversationSelect 会话选择组件
 * 支持主题切换和响应式
 * =================================================================== */

.yw-conversationselect {
  max-height: 600px;
  max-width: 90vw;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-popup);
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--color-bg-sidebar);
}

.yw-conversationselect-main {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.yw-conversationselect-content {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
  cursor: pointer;
  align-items: center;
  border-radius: var(--radius-base);
  transition: background-color var(--transition-fast);
  height: var(--list-item-height-md);
  box-sizing: border-box;
  width: 100%;
}

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

.yw-conversationselect-content:hover {
  background-color: var(--state-hover-bg);
}

.yw-conversationselect-content.selected {
  background-color: var(--color-accent-soft);
}

.yw-conversationselect-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--color-bg-sidebar);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  padding: var(--spacing-xl);
  border-bottom: var(--color-border-line);
  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: var(--spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base);
}

.yw-conversationselect-close:hover {
  background-color: var(--state-hover-bg);
}

.yw-conversationselect-content-searchBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-sm);
  flex-wrap: wrap;
  flex-shrink: 0;
  z-index: 9;
  background-color: var(--color-bg-sidebar);
  position: sticky;
  top: 0;
}

.yw-conversationselect-content-selectedChannel {
  display: flex;
  flex-wrap: nowrap;
  max-height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-sm);
  white-space: nowrap;
}

/* 隐藏选中头像区域的滚动条 */
.yw-conversationselect-content-selectedChannel::-webkit-scrollbar {
  width: var(--spacing-xs);
  height: var(--spacing-xs);
}

.yw-conversationselect-content-selectedChannel::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll-thumb);
  border-radius: var(--radius-sm);
}

.yw-conversationselect-content-selectedAvatar {
  padding: 3px;
  cursor: pointer;
  transition: transform var(--transition-base);
  position: relative;
}

.yw-conversationselect-content-selectedAvatar:hover {
  transform: scale(1.05);
}

.yw-conversationselect-content-selectedAvatar::after {
  content: '×';
  position: absolute;
  top: -2px;
  right: -2px;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  background-color: var(--color-video-overlay);
  color: var(--color-text-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.yw-conversationselect-content-selectedAvatar:hover::after {
  opacity: 1;
}

.yw-conversationselect-clear {
  margin-left: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  cursor: pointer;
  padding: var(--radius-xs) var(--spacing-sm);
  border-radius: var(--radius-lg);
  background-color: var(--color-accent-soft);
  transition: background-color var(--transition-base);
}

.yw-conversationselect-clear:hover {
  background-color: var(--color-accent-2);
}

.yw-conversationselect-content-searchContent {
  display: flex;
  min-width: 200px;
  height: var(--control-height-xl);
}

.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 var(--spacing-xl);
  border-bottom: var(--color-border-line);
}

.yw-conversationselect-tab {
  display: flex;
  align-items: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.yw-conversationselect-content-tabpane {
  flex: 1 1;
  min-height: 200px; /* 确保最小高度 */
  padding: 0 var(--spacing-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.yw-conversationselect-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1;
  width: 100%;
  color: var(--color-text-muted);
}

.yw-conversationselect-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1;
  width: 100%;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

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

/* 底部固定区域 - 与创建群聊弹窗保持一致 */
.yw-conversationselect-footer {
  background: var(--color-bg-sidebar);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: var(--color-border-line);
  flex-shrink: 0;
  z-index: 100;
  gap: var(--spacing-md);
}

/* 底部按钮统一样式 - 与创建群聊弹窗保持一致 */
.yw-conversationselect-footer .semi-button {
  height: var(--control-height-lg) !important;
  min-width: 80px !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  border-radius: var(--radius-base) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  transition: all var(--transition-base) !important;
}

/* 确认按钮样式 */
.yw-conversationselect-footer .yw-but-ok {
  border-radius: var(--radius-base) !important;
}

.yw-conversationselect-content-selectedAvatar img,
.yw-conversationselect-content-box-data img {
  width: var(--avatar-size-base) !important;
  height: var(--avatar-size-base) !important;
  border-radius: var(--radius-full) !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: var(--spacing-xs);
  flex: 1 1;
}

.yw-conversationselect-content-box-name {
  display: flex;
  align-items: center;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.section-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-left: var(--spacing-xs);
  font-weight: var(--font-weight-regular);
}

/* 添加更多头像指示器样式 */
.yw-conversationselect-more-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: var(--radius-full);
  background-color: var(--state-default-bg);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin: 0 3px;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.yw-conversationselect-more-avatars:hover {
  background-color: var(--state-hover-bg);
}

/* 全选功能样式 */
.yw-conversationselect-select-all {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
  border-bottom: var(--color-border-line);
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}

.yw-conversationselect-select-all span {
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-accent);
  transition: color var(--transition-base);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.yw-conversationselect-select-all span:hover {
  color: var(--color-accent-hover);
}


/* ===================================================================
 * SearchInput 搜索输入框组件
 * 支持主题切换和响应式
 * =================================================================== */

.yw-search-input {
  display: flex;
  align-items: center;
  background: var(--color-bg-search);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  padding: var(--spacing-sm) var(--spacing-md);
  height: var(--control-height-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

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

.yw-search-input.focused {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 132, 254, 0.12);
}

.yw-search-input-icon {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-sm);
  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: var(--font-size-base);
  color: var(--color-text-primary);
}

.yw-search-input .semi-input::-moz-placeholder {
  color: var(--color-text-muted);
}

.yw-search-input .semi-input::placeholder {
  color: var(--color-text-muted);
}

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

/* 深色主题适配 - 使用统一主题变量，无需额外覆盖 */

/* 响应式设计 */
@media (max-width: 768px) {
  .yw-search-input {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .yw-search-input .semi-input {
    font-size: var(--font-size-base);
  }
} 
/* ===================================================================
 * FriendApply 好友申请组件
 * 支持主题切换
 * =================================================================== */

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

.yw-friendapply-content {
  padding: var(--spacing-md);
}

.yw-friendapply-content-tip {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-md);
}

/* 文本域样式优化 */
.yw-friendapply-content-message .semi-textarea {
  border-radius: var(--radius-base);
  border: 1px solid var(--color-border-strong);
  transition: all var(--transition-base);
  padding: var(--spacing-md);
  min-height: 80px;
  font-size: var(--font-size-base);
}

.yw-friendapply-content-message .semi-textarea:focus,
.yw-friendapply-content-message .semi-textarea:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.1);
}


/* ===================================================================
 * InfoPanel 信息面板组件
 * 支持主题切换和响应式
 * =================================================================== */

.yw-info-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-xl);
  background: var(--info-panel-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--info-panel-shadow);
  overflow: hidden;
}

.yw-info-panel__content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  overflow-y: auto;
  padding-right: var(--spacing-xs);
}

.yw-info-panel__content::-webkit-scrollbar {
  width: var(--spacing-xs);
}

.yw-info-panel__content::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: var(--radius-sm);
}

.yw-info-panel__footer {
  padding-top: var(--spacing-md);
}

.yw-info-panel__footer button {
  width: 100%;
  height: var(--control-height-lg);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.yw-info-panel-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-xl);
  background: var(--info-card-bg);
  border: 1px solid var(--info-card-border);
}

.yw-info-panel-card__avatar {
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.yw-info-panel-card__meta {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.yw-info-panel-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.yw-info-panel-card__desc {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.yw-info-panel-sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.yw-info-panel .yw-sections {
  background: transparent;
}

.yw-info-panel .yw-section-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.yw-info-panel .yw-section {
  margin: 0;
}

.yw-info-panel .yw-section + .yw-section {
  margin-top: var(--spacing-md);
}

.yw-info-panel .yw-section-row {
  position: relative;
}

.yw-info-panel .yw-section-title,
.yw-info-panel .yw-section-subtitle {
  padding: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
  color: var(--color-text-muted);
}

.yw-info-panel-status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  border-radius: var(--radius-xl);
  background: var(--info-card-bg);
  border: 1px dashed var(--info-card-border);
  color: var(--color-text-secondary);
}

.yw-info-panel-error {
  color: var(--color-danger);
  background: var(--color-error-bg);
  border-color: var(--color-danger);
}

.yw-info-card-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text-muted);
}

.yw-info-card-copy svg,
.yw-info-card-copy .yw-svg-icon {
  cursor: pointer;
}

.yw-info-panel .yw-list-item-tip {
  background: var(--color-error-bg);
  border-radius: var(--radius-base);
}

/* ===================================================================
 * 响应式设计
 * =================================================================== */

/* Tablet 平板模式 */
[data-screen-size="tablet"] .yw-info-panel {
  padding: var(--spacing-lg);
}

[data-screen-size="tablet"] .yw-info-panel-card {
  padding: var(--spacing-md) var(--spacing-md);
}

[data-screen-size="tablet"] .yw-info-panel-card__avatar {
  width: 48px;
  height: 48px;
}

[data-screen-size="tablet"] .yw-info-panel-card__name {
  font-size: var(--font-size-lg);
}

/* Mobile 移动端模式 */
[data-screen-size="mobile"] .yw-info-panel {
  padding: var(--spacing-md);
  border-radius: 0;
}

[data-screen-size="mobile"] .yw-info-panel-card {
  padding: var(--spacing-md) var(--spacing-md);
  border-radius: var(--radius-lg);
}

[data-screen-size="mobile"] .yw-info-panel-card__avatar {
  width: 44px;
  height: 44px;
}

[data-screen-size="mobile"] .yw-info-panel-card__name {
  font-size: var(--font-size-lg);
}

[data-screen-size="mobile"] .yw-info-panel-card__desc {
  font-size: var(--font-size-sm);
}

.yw-userinfo-card__name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.yw-userinfo-card__name span {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yw-userinfo-card__desc {
  font-size: var(--font-size-base);
}

.yw-anchored-popover-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
}

.yw-anchored-popover-panel {
  overflow: hidden;
}

/* ===================================================================
 * Profile panels (MeInfo/UserInfo) container
 * Used as panelClassName for AnchoredPopover
 * =================================================================== */
.yw-profile-popover {
  width: min(400px, calc(100vw - 16px));
  height: min(var(--layout-modal-body-height), calc(100vh - 16px));
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-bg-sidebar);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-modal);
}

/* ===================================================================
 * WKBase 基础组件
 * 支持主题切换
 * =================================================================== */

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

.yw-base-modal .semi-modal-wrap {
  overflow: visible;
}

.yw-base-modal .semi-modal-wrap-center {
  justify-content: center; /* centered 模式下水平也居中 */
}

/* 非 centered 的小弹窗：沿用历史的 20vh 顶部留白布局；
 * centered 的弹窗由 Semi 的 .semi-modal-wrap-center + .semi-modal-centered 负责垂直居中 */
.yw-base-modal .semi-modal.semi-modal-small:not(.semi-modal-centered) {
  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(--layout-modal-body-height);
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}

/* 转发弹窗专用样式 */
.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-confirm-modal
 * 基于 Figma 设计稿：居中显示，主题适配
 * =================================================================== */

/* 确保弹窗居中显示 */
.yw-confirm-modal .semi-modal-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.yw-confirm-modal .semi-modal {
  width: 480px !important;
  width: var(--confirm-modal-width, 480px) !important;
  max-width: 90vw !important;
  margin: 0 !important;
  top: 0 !important;
  padding-bottom: 0 !important;
}

.yw-confirm-modal .semi-modal-content {
  background-color: var(--confirm-modal-bg) !important;
  border: var(--confirm-modal-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 0 !important;
  box-shadow: var(--shadow-modal) !important;
}

/* 弹窗头部 - 标题 */
.yw-confirm-modal .semi-modal-header {
  padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl) !important;
  margin: 0 !important;
  border: none !important;
}

.yw-confirm-modal .semi-modal-header .semi-modal-title {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text-primary) !important;
  line-height: 1.5 !important;
}

/* 隐藏标题图标 */
.yw-confirm-modal .semi-modal-header .semi-modal-title-icon {
  display: none !important;
}

/* 弹窗内容 */
.yw-confirm-modal .semi-modal-body-wrapper {
  margin: 0 !important;
}

.yw-confirm-modal .semi-modal-body {
  padding: var(--spacing-md) var(--spacing-xl) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-regular) !important;
  color: var(--color-text-primary) !important;
  line-height: 1.57 !important;
}

/* 弹窗底部 - 按钮区域 */
.yw-confirm-modal .semi-modal-footer {
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: var(--spacing-sm) !important;
  border: none !important;
}

/* 取消按钮 */
.yw-confirm-modal .semi-modal-footer .semi-button:not(.semi-button-primary) {
  background-color: transparent !important;
  border: 1px solid var(--confirm-modal-cancel-border) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--radius-base) !important;
  padding: 5px 16px !important;
  height: auto !important;
  min-width: 60px !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-regular) !important;
}

.yw-confirm-modal .semi-modal-footer .semi-button:not(.semi-button-primary):hover {
  background-color: var(--state-hover-bg) !important;
}

/* 确定按钮 */
.yw-confirm-modal .semi-modal-footer .semi-button-primary {
  background-color: var(--color-accent) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: var(--radius-base) !important;
  padding: 5px 16px !important;
  height: auto !important;
  min-width: 60px !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-regular) !important;
}

.yw-confirm-modal .semi-modal-footer .semi-button-primary:hover {
  background-color: var(--color-accent-hover) !important;
}

/* 隐藏关闭按钮 */
.yw-confirm-modal .semi-modal-close {
  display: none !important;
}

/* 统一弹窗遮罩层样式 */
.yw-confirm-modal + .semi-modal-mask,
.yw-base-modal + .semi-modal-mask {
  background-color: var(--color-bg-mask) !important;
}

/* 内容区域中的复选框、选择框等组件样式 */
.yw-confirm-modal .semi-modal-body .semi-checkbox {
  color: var(--color-text-primary) !important;
}

.yw-confirm-modal .semi-modal-body .semi-select {
  margin-top: var(--spacing-sm) !important;
}

.yw-confirm-modal .semi-modal-body p {
  margin: 0 0 var(--spacing-xs) 0 !important;
}

/* ===================================================================
 * 全局弹窗通用样式
 * 适用于所有使用 Semi Modal 的弹窗
 * 统一内边距 20px、响应式设计、圆角等
 * =================================================================== */

/* 弹窗响应式设计：最大宽高 80%，最小宽度 320px */
.semi-modal-wrap .semi-modal {
  max-width: 80vw !important;
  max-height: 80vh !important;
  min-width: 320px;
}

/* 弹窗内容区容器 */
.semi-modal-wrap .semi-modal-content {
  border-radius: 12px !important;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* 弹窗标题区 - 统一内边距 20px */
.semi-modal-wrap .semi-modal-header {
  padding: 20px !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* 弹窗内容区 - 统一内边距 20px */
.semi-modal-wrap .semi-modal-body {
  padding:20px;
  flex: 1 1;
  min-height: 0;
  overflow: auto;
}

/* 弹窗底部区 - 统一内边距 20px */
.semi-modal-wrap .semi-modal-footer {
  padding: 20px !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* 暗黑主题下的边框颜色 */
body.dark .semi-modal-content,
.dark .semi-modal-content {
  border-color: rgba(255, 255, 255, 0.1);
}

.yw-direct-friend-apply {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-card);
  border-radius: 8px;
  overflow: hidden;
}

.yw-direct-friend-apply-footer {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border-strong);
  margin-top: auto;
}

/* 模态框样式优化 */
.yw-direct-friend-apply-modal {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-popup);
}

.yw-direct-friend-apply-modal .semi-modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.yw-direct-friend-apply-modal .semi-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.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: var(--state-hover-bg);
}

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


/* ===================================================================
 * IndexTable 索引表组件
 * 适配频道设置二级视图UI设计
 * =================================================================== */

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

.yw-indextable-section-title {
  padding: 12px 16px 8px 16px;
  font-size: var(--channel-setting-label-size);
  color: var(--channel-setting-label-color);
}

.yw-indextable-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  min-height: 56px;
  background-color: var(--channel-setting-section-bg);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.yw-indextable-item:hover {
  background-color: var(--channel-setting-item-hover-bg);
}

/* 列表项之间的分割线 */
.yw-indextable-item + .yw-indextable-item {
  position: relative;
}

.yw-indextable-item + .yw-indextable-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: var(--color-border-strong);
  opacity: 0.5;
}

.yw-indextable-item-avatar img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.yw-indextable-item-name {
  margin-left: 12px;
  font-size: var(--channel-setting-item-title-size);
  color: var(--channel-setting-item-title-color);
}

.yw-indextable-search {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 10;
}

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

.yw-indextable-search-box {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 8px 16px;
  background-color: var(--color-conversationlist-top-bg);
  border-bottom: 1px solid var(--color-border-strong);
}

.yw-indextable-selected-box {
  display: flex;
  overflow-x: auto;
  padding: 12px 16px;
  min-height: 70px;
  align-items: center;
  gap: 8px;
  background-color: var(--channel-setting-section-bg);
  border-bottom: 1px solid var(--color-border-strong);
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

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

.yw-indextable-search-icon {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-sm);
}

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

.yw-indextable-search-input input {
  flex: 1 1;
  height: var(--control-height-md);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
  background-color: transparent;
  color: var(--color-text-primary);
  outline: none;
  border: none;
  padding: 0;
}

.yw-indextable-search-input input::-moz-placeholder {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.yw-indextable-search-input input::placeholder {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}

.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: var(--icon-size-base);
  height: var(--icon-size-base);
  background-color: var(--color-danger);
  color: var(--color-text-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.yw-indextable-contacts {
  width: 100%;
  flex: 1 1;
  overflow: hidden;
  background-color: var(--channel-setting-section-bg);
}

.yw-indextable-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-base);
  background-color: var(--channel-setting-bg);
}

.yw-indextable-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-base);
  background-color: var(--channel-setting-bg);
}

.yw-indextable-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  background-color: var(--channel-setting-section-bg);
}

.yw-indextable-no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  background-color: var(--channel-setting-section-bg);
}

.yw-viewqueueheader {
  width: 100%;
  height: var(--layout-viewqueue-header-height);
  position: relative;
  border-bottom: var(--color-border-line);
}

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

.yw-viewqueueheader-content-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.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(--layout-viewqueue-header-height));
}

/* ===================================================================
 * Card 名片消息组件
 * 支持主题切换
 * =================================================================== */

.yw-message-card {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
}

.yw-message-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: var(--msg-card-width-standard);
  background-color: var(--msg-card-bg);
  border-radius: var(--radius-base);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.yw-message-card-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
}

.yw-message-card-avatar {
  flex-shrink: 0;
}

.yw-message-card-content img {
  width: auto;
  height: 42px;
  border-radius: var(--radius-full);
}

.yw-message-card-info {
  flex: 1 1;
  overflow: hidden;
}

.yw-message-card-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--msg-card-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yw-message-card-content-name {
  margin-left: var(--spacing-xl);
  color: var(--msg-card-title);
}

.yw-message-card-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--msg-card-divider);
}

.yw-message-card-bottom-flag {
  font-size: var(--font-size-sm);
  color: var(--msg-card-meta);
}

.yw-message-card-bottom-action {
  font-size: var(--font-size-sm);
  color: var(--msg-card-action);
}

.yw-message-card-bottom-time {
  position: absolute;
  right: var(--spacing-md);
  top: calc(var(--spacing-xs) * -1);
  color: var(--msg-card-meta) !important;
}

/* 发送者样式覆盖（品牌色背景上） */
.yw-message-base-bubble-box.send .yw-message-card-content {
  background-color: transparent;
}

.yw-message-base-bubble-box.send .yw-message-card-name {
  color: var(--msg-card-sender-title);
}

.yw-message-base-bubble-box.send .yw-message-card-bottom {
  border-top-color: var(--msg-card-sender-divider);
}

.yw-message-base-bubble-box.send .yw-message-card-bottom-flag {
  color: var(--msg-card-sender-meta);
}

.yw-message-base-bubble-box.send .yw-message-card-bottom-action {
  color: var(--msg-card-sender-action);
}

/* ===================================================================
 * CallRecord 通话记录消息组件
 * 支持主题切换
 * =================================================================== */

.yw-message-call-record {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  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;
  transition: color var(--transition-base);
}

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

.yw-join-oraganization {
  background-color: var(--color-bg-card);
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
}

.yw-join-oraganization-content {
  display: flex;
  padding: 10px;
  align-items: center;
}

.yw-join-oraganization-content-name {
  margin-left: 20px;
  color: var(--color-text-primary);
}

.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: var(--font-size-sm);
  color: var(--color-text-muted);
}

.yw-join-oraganization-bottom-time {
  position: absolute;
  right: 10px;
  top: -5px;
  color: var(--color-text-muted) !important;
}

/* ===================================================================
 * System 系统消息组件
 * 支持主题切换
 * =================================================================== */

.yw-message-system {
  width: 92%;
  margin: 0 auto;
  text-align: center;
  font-size: var(--font-size-sm);
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
.yw-message-system-invite {
  color: var(--color-accent);
  cursor: pointer;
  display: inline;
  margin-left: var(--spacing-sm);
}

.yw-message-system-username {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

/* 邀请详情弹窗样式 */
.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: var(--spacing-xl);
  text-align: center;
}

.invite-detail-header .yw-main-sider-avatar-img {
  margin-bottom: var(--spacing-sm);
}

.inviter-name {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.invite-message {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.invite-remark {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-style: italic;
}

.invite-detail-divider {
  flex-shrink: 0;
  background-color: var(--color-border-muted);
  height: 1px;
  margin: 0 var(--spacing-xl);
}

.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: var(--spacing-lg);
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  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: var(--font-size-sm);
  text-align: center;
  width: 100%; /* 使用100%宽度，让文字在容器内居中 */
  max-width: 58px;
  color: var(--color-text-secondary);
  margin-top: 6px; /* 增加间距 */
  word-break: break-all;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.invite-detail-footer {
  flex-shrink: 0;
  padding: var(--spacing-xl);
  border-top: var(--color-border-line);
  background-color: var(--color-bg-card);
}

.invite-confirm-button {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-accent);
  color: var(--color-text-white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
}

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

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

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

  .invite-detail-header {
    padding: var(--spacing-lg);
  }

  .invite-members-list {
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
  }

  .invite-detail-footer {
    padding: var(--spacing-lg);
  }
}

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

  .invite-detail-header {
    padding: var(--spacing-md);
  }

  .invite-members-list {
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .invite-detail-footer {
    padding: var(--spacing-md);
  }

  .invite-confirm-button {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
}

.yw-announcement-message-card {
  max-width: 437px;
  width: calc(100% - 32px);
  margin: 0 auto;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--announcement-card-bg);
  text-align: left;
}

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

.yw-announcement-message-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--announcement-title-text);
}

.yw-announcement-message-time {
  font-size: var(--font-size-sm);
  color: var(--announcement-meta-text);
}

.yw-announcement-message-body {
  font-size: var(--font-size-base);
  line-height: 1.57;
  color: var(--announcement-meta-text);
  word-wrap: break-word;
  word-break: break-all;
}

.yw-announcement-message-line + .yw-announcement-message-line {
  margin-top: 4px;
}


/* ===================================================================
 * Text 文本消息组件
 * 支持主题切换
 * =================================================================== */

.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;
  margin-left: 4px;
  margin-right: 4px;
  color: var(--color-danger) !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(var(--color-accent-rgb), 0.2);
}

.yw-message-text-richmention.yw-message-text-send {
  color: white !important;
}

.yw-message-text-recv {
  color: var(--color-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: var(--font-size-base);
  flex-direction: column;
  cursor: pointer;
}

.yw-message-text-reply.yw-message-text-reply-recv {
  color: var(--color-text-muted);
}

.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: var(--color-accent) !important;
}

.yw-message-text-richlink.yw-message-text-recv:hover {
  color: var(--color-accent-hover) !important;
}

/* 发送消息中的链接样式 */
.yw-message-text-richlink.yw-message-text-send {
  color: var(--color-sender-link);
}

.yw-message-text-richlink.yw-message-text-send:hover {
  color: var(--color-text-white);
}


/* ===================================================================
 * Voice 语音消息组件
 * 支持主题切换
 * =================================================================== */

.icon-play::before {
  content: "";
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  transition: color var(--transition-base);
}

.icon-pause::before {
  content: "";
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  transition: color var(--transition-base);
}

.voicePlay {
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  background-color: var(--msg-card-bg);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

/* 接收者样式 - 使用统一的卡片背景 */
.yw-message-base-bubble-box.recv .voicePlay {
  background-color: var(--msg-card-bg);
}

/* 发送者样式 - 在品牌色背景上使用半透明白色 */
.yw-message-base-bubble-box.send .voicePlay {
  background-color: var(--msg-card-sender-bg);
}

.yw-message-base-bubble-box.send .icon-play::before,
.yw-message-base-bubble-box.send .icon-pause::before {
  color: var(--msg-card-sender-title);
}

.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: var(--spacing-md);
}

.yw-message-voice-info-status {
  display: flex;
}

.yw-message-voice-info-time {
  display: flex;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: color var(--transition-base);
}

/* 发送者时间文字颜色 */
.yw-message-base-bubble-box.send .yw-message-voice-info-time {
  color: var(--msg-card-sender-title);
}

.yw-message-voice-info-tail {
  position: absolute;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
}

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

/* ===================================================================
 * Location 位置消息组件
 * 支持主题切换
 * =================================================================== */

.yw-message-location {
  cursor: pointer;
  width: 100%;
}

.yw-message-location-content {
  width: var(--msg-card-width-standard);
  background-color: var(--msg-card-bg);
  border-radius: var(--radius-base);
  overflow: hidden;
  transition: background-color var(--transition-base);
}

.yw-message-location-content-title {
  color: var(--msg-card-title);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.yw-message-location-content-address {
  color: var(--msg-card-subtitle);
  font-size: var(--font-size-sm);
  padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.yw-message-location-content-locationimg {
  width: 100%;
  height: 100px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--msg-card-divider);
}

/* 发送者样式覆盖（品牌色背景上） */
.yw-message-base-bubble-box.send .yw-message-location-content {
  background-color: var(--msg-card-sender-bg);
}

.yw-message-base-bubble-box.send .yw-message-location-content-title {
  color: var(--msg-card-sender-title);
}

.yw-message-base-bubble-box.send .yw-message-location-content-address {
  color: var(--msg-card-sender-subtitle);
}

.yw-message-base-bubble-box.send .yw-message-location-content-locationimg {
  border-top-color: var(--msg-card-sender-divider);
}

/* ===================================================================
 * MultiMedia 多媒体消息组件
 * 支持主题切换
 * =================================================================== */

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

.yw-multi-media-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-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: var(--radius-xs);
  gap: var(--radius-xs);
  border-radius: var(--radius-base);
  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: var(--radius-base);
  overflow: hidden;
}

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

.yw-multi-media-row {
  display: flex;
  gap: var(--radius-xs);
}

/* Media item */
.yw-multi-media-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--state-default-bg);
  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: var(--color-video-overlay);
  border-radius: var(--radius-full);
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  pointer-events: none;
}

.yw-multi-media-video-duration {
  position: absolute;
  bottom: var(--spacing-xs);
  right: var(--spacing-xs);
  background: var(--color-video-overlay);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  padding: var(--radius-xs) var(--spacing-xs);
  border-radius: var(--radius-xs);
  font-family: var(--font-family-mono);
}

/* 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: var(--state-default-bg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.yw-multi-media-error {
  color: var(--color-text-muted);
}

/* More indicator */
.yw-multi-media-more {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-video-overlay);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

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

.yw-multi-media-progress-bar {
  width: 80%;
  height: var(--spacing-xs);
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xs);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.yw-multi-media-progress-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width var(--transition-layer);
}

.yw-multi-media-progress-text {
  font-size: var(--font-size-sm);
  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: var(--spacing-lg) var(--spacing-xl) !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: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  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: var(--spacing-xl);
}

/* 多媒体预览工具栏样式 */
.yw-multi-media-preview-toolbar {
  display: flex;
  gap: var(--spacing-sm);
}

.yw-multi-media-preview-toolbar-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--radius-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--semi-color-border);
  background: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all var(--transition-base);
}

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

.yw-multi-media-preview-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 72vh;
  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: var(--radius-sm);
  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: var(--spacing-xl);
  color: var(--color-danger);
  text-align: center;
}

/* Navigation buttons */
.yw-multi-media-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-video-overlay);
  border: none;
  color: var(--color-text-white);
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
  z-index: 1000;
  outline: none;
  box-shadow: var(--shadow-card);
}

.yw-multi-media-preview-nav:hover {
  background: var(--color-video-overlay-hover);
}

.yw-multi-media-preview-prev {
  left: var(--spacing-lg);
}

.yw-multi-media-preview-next {
  right: var(--spacing-lg);
}

/* 为导航按钮添加更强的视觉效果 */
.yw-multi-media-preview-nav::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-text-white);
  border-right: 2px solid var(--color-text-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: var(--spacing-sm);
  padding: var(--spacing-lg);
  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: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--semi-color-border);
  transition: all var(--transition-base);
}

.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: var(--color-video-overlay);
  border-radius: var(--radius-full);
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  pointer-events: none;
  box-shadow: var(--shadow-card);
}
/* ===================================================================
 * ChanceGame 随机游戏消息组件
 * 支持主题切换
 * =================================================================== */

.yw-message-chance-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  max-width: 160px;
  padding: var(--spacing-xs) 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.yw-message-chance-game__media {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-xl);
  /* 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: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--semi-color-text-0);
}

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

.yw-message-chance-game__extra {
  font-size: var(--font-size-sm);
  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(--color-bg-page);
  position: absolute;
  left: 0;
  top: calc(-372px);
  border-radius: 10px;
  z-index: 999;
  border: var(--color-border-line);
}

/* 响应式：小视窗高度时限制表情面板高度，避免与header覆盖 */
@media screen and (max-height: 650px) {
  .yw-emojitoolbar-emojipanel {
    height: 220px;
    top: calc(-220px);
  }
}

.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(--color-bg-sidebar);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: var(--color-border-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(--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(--state-hover-bg);
}

.yw-emojipanel-tab-item-selected {
  background-color: var(--color-bg-card);
}

.yw-emojipanel-tab-item-selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px 2px 0 0;
}

.yw-emojitoolbar-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 998;
  cursor: default;
}

/* ===================================================================
 * StickerUploader 贴纸上传组件
 * 支持主题切换
 * =================================================================== */

.sticker-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sticker-uploader-button {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: var(--state-default-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px dashed var(--color-border-line);
  margin: 6px;
}

.sticker-uploader-button:hover {
  background-color: var(--state-hover-bg);
}

.sticker-uploader-button.uploading {
  cursor: not-allowed;
  opacity: 0.7;
}

.sticker-uploader-loading {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-line);
  border-top: 2px solid var(--color-bg-card);
  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(--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(--color-text-secondary);
}

.sticker-list-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--color-border-line);
  border-top: 3px solid var(--color-bg-card);
  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(--color-text-secondary);
  font-size: var(--font-size-base);
}

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

/* ===================================================================
 * ChannelAvatar 频道头像组件
 * 支持主题切换
 * =================================================================== */

.yw-channelavatar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: var(--control-height-lg);
  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: var(--radius-base);
}

.yw-channelavatar-upload {
  margin-top: var(--spacing-xl);
}

.yw-channelavatar-loading,
.yw-channelavatar-error {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--state-default-bg);
  border-radius: var(--radius-base);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.yw-channelavatar-error {
  background-color: var(--color-error-bg);
  color: var(--color-danger);
}

/* ===================================================================
 * ImageToolbar 图片工具栏组件
 * 支持主题切换
 * =================================================================== */

.yw-imagetoolbar {
  position: relative;
}

.yw-imagetoolbar-content {
  padding: var(--spacing-md);
}

.yw-imagetoolbar-content-icon img {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.yw-imagetoolbar-content-icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.yw-imagedialog-modal .semi-modal-body {
  padding: 0;
}

/* Semi Modal footer 容器本身不加额外间距/边框，使用自定义 footer 样式 */
.yw-imagedialog-modal .semi-modal-footer {
  padding: 0 !important;
}

.yw-imagedialog-content-body {
  padding: var(--spacing-lg) var(--spacing-xl);
}

.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: var(--radius-sm);
}

.yw-imagedialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-xl);
  border-top: 1px solid var(--semi-color-border);
}

.yw-imagedialog-modal .semi-modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--semi-color-text-0);
}

/* Modal 关闭按钮样式 */
.yw-imagedialog-modal .semi-modal-close {
  top: var(--spacing-lg);
  right: var(--spacing-lg);
}

.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: var(--spacing-md);
}

.yw-imagedialog-content-filename {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  word-break: break-all;
  margin-bottom: var(--spacing-xs);
}

.yw-imagedialog-content-filesize {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

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

.yw-multi-media-title-input {
  margin-bottom: var(--spacing-lg);
}

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

.yw-multi-media-preview-item {
  position: relative;
  background: var(--state-default-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  cursor: grab;
  transition: all var(--transition-base);
  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: var(--color-danger);
  color: var(--color-text-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
}

.yw-multi-media-preview-item:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px var(--color-accent-2);
}

.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: var(--radius-base) var(--radius-base) 0 0;
}

.yw-multi-media-preview-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 环形预处理徽标（视频项中心显示） */
.yw-multi-media-preprocess-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  z-index: 16;
  pointer-events: none;
}

.yw-multi-media-preprocess-ring svg {
  width: 56px;
  height: 56px;
}

.yw-multi-media-preprocess-ring .ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 4;
}

.yw-multi-media-preprocess-ring .ring-fg {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dasharray 0.2s ease;
}

.yw-multi-media-preprocess-ring .ring-text {
  fill: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* 环形下方的提示文案（放在环形外部居中展示） */
.yw-multi-media-preprocess-ring .ring-label {
  position: absolute;
  top: 60px; /* 位于环形下方 */
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.yw-multi-media-preview-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-video-overlay);
  border-radius: var(--radius-full);
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  pointer-events: none;
}

.yw-multi-media-preview-video-duration {
  position: absolute;
  bottom: var(--spacing-xs);
  right: var(--spacing-xs);
  background: var(--color-video-overlay);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  padding: var(--radius-xs) var(--spacing-xs);
  border-radius: var(--radius-xs);
  font-family: monospace;
}

.yw-multi-media-preview-info {
  padding: var(--spacing-sm);
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.yw-multi-media-preview-filename {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yw-multi-media-preview-filesize {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.yw-multi-media-summary {
  background: var(--state-default-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  border-left: 3px solid var(--color-accent);
}

.yw-multi-media-summary-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.yw-multi-media-summary-size {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* 删除按钮 */
.yw-multi-media-delete-btn {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  border: none;
  background: var(--color-danger);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  z-index: 10;
  transition: all var(--transition-base);
  opacity: 0;
}

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

.yw-multi-media-delete-btn:hover {
  background: var(--color-danger-hover);
  transform: scale(1.1);
}

/* 拖拽指示器 */
.yw-multi-media-drag-handle {
  position: absolute;
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  background: var(--color-video-overlay);
  border-radius: var(--radius-sm);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  z-index: 10;
  transition: all var(--transition-base);
  opacity: 0;
}

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

.yw-multi-media-drag-handle:hover {
  background: var(--color-video-overlay-hover);
}

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

/* 序号指示器 */
.yw-multi-media-index-indicator {
  position: absolute;
  bottom: var(--spacing-xs);
  left: var(--spacing-xs);
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  font-size: var(--font-size-sm);
  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: var(--shadow-dropdown);
}


/* 整个媒体项都可以拖拽 */
.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[data-dragging="true"] {
  opacity: 0.5;
  transform: rotate(5deg);
  z-index: 1000;
  box-shadow: var(--shadow-dropdown);
}

/* 文件上传进度覆盖层 - 定位在右侧 */
.yw-file-upload-progress-overlay {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  pointer-events: auto;
}
/* ===================================================================
 * GroupManagement 群组管理组件
 * 适配频道设置二级视图UI设计
 * =================================================================== */

.group-management {
  height: calc(100vh - var(--layout-viewqueue-header-height));
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--channel-setting-bg);
  padding: var(--channel-setting-section-margin);
  box-sizing: border-box;
}

/* 继承频道设置的Section样式 */
.group-management .yw-section {
  margin-top: var(--channel-setting-section-margin);
}

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

.group-management .yw-section-rows {
  background-color: var(--channel-setting-section-bg);
  border-radius: var(--channel-setting-section-radius);
  overflow: hidden;
}

/* 继承频道设置的ListItem样式 */
.group-management .yw-list-item {
  padding: var(--channel-setting-item-padding);
  background-color: var(--channel-setting-item-bg);
}

.group-management .yw-list-item:hover {
  background-color: var(--channel-setting-item-hover-bg);
}

.group-management .yw-list-item-title {
  font-size: var(--channel-setting-item-title-size);
  color: var(--channel-setting-item-title-color);
}

.group-management .yw-list-item-danger .yw-list-item-title {
  color: var(--channel-setting-danger-color);
}

.group-management .yw-list-item-danger:hover {
  background-color: var(--channel-setting-danger-hover-bg);
}

/* 分割线样式 */
.group-management .yw-section-rows > .yw-section-row + .yw-section-row {
  position: relative;
}

.group-management .yw-section-rows > .yw-section-row + .yw-section-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: var(--color-border-strong);
  opacity: 0.5;
}

/* 管理员列表区域 */
.admin-list-section {
  padding: 16px;
  background: var(--channel-setting-section-bg);
  border-radius: var(--channel-setting-section-radius);
}

.admin-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.admin-list-header span {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.admin-list-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.admin-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--semi-color-bg-1);
  border-radius: var(--radius-base);
}

.admin-info {
  flex: 1 1;
  margin-left: var(--spacing-md);
}

.admin-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--semi-color-text-0);
}

.admin-role {
  font-size: var(--font-size-sm);
  color: var(--semi-color-text-2);
  margin-top: var(--spacing-xs);
}

.admin-item .semi-button {
  margin-left: var(--spacing-sm);
}

.admin-list-header .semi-button {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-bg-sidebar);
  border: none;
}

.admin-list-header .semi-button span {
  font-size: var(--font-size-base);
  margin-left: 0;
  color: var(--color-text-primary);
}

.admin-list-header .semi-button .semi-icon {
  margin-right: var(--spacing-xs);
}

.admin-remove-btn {
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.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 var(--transition-base);
  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-group-modal .semi-modal {
  width: 640px !important;
  max-width: 90vw !important;
  border-radius: var(--channel-setting-section-radius) !important;
  box-shadow: var(--shadow-modal) !important;
}

.yw-group-modal .semi-modal-content {
  border: none !important;
  padding: 0 !important;
  background-color: var(--channel-setting-section-bg) !important;
}

.yw-group-modal .semi-modal-body-wrapper {
  margin: 0 !important;
  padding: var(--spacing-lg) var(--spacing-xl) !important;
  max-height: 80vh;
  overflow-y: auto;
}

.yw-group-modal .semi-modal-footer {
  padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) !important;
  margin-top: 0 !important;
  border: none !important;
  display: flex !important;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  background-color: var(--channel-setting-section-bg);
}

.yw-group-modal .semi-modal-footer .semi-button {
  border-radius: var(--radius-base) !important;
  padding: 6px 16px !important;
}

.yw-group-modal .semi-modal-close {
  display: inline-flex !important;
}

/* 赋予虚拟列表可用高度，保证内容渲染 */
.yw-group-modal .yw-indextable {
  height: 520px;
  display: flex;
  flex-direction: column;
}

.yw-group-modal .yw-indextable-search {
  padding: 0;
}

.yw-group-modal .yw-indextable-search-box {
  border-radius: 8px;
  margin-bottom: var(--spacing-sm);
  height: 44px;
  padding: 0 var(--spacing-md);
  background: var(--color-conversationlist-top-bg);
  border: 1px solid var(--color-border-strong);
  box-shadow: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  gap: var(--spacing-sm);
  display: flex;
  align-items: center;
}

.yw-group-modal .yw-indextable-search-box:hover {
  border-color: rgba(0, 132, 254, 0.35);
}

.yw-group-modal .yw-indextable-search-box:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 132, 254, 0.12);
}

.yw-group-modal .yw-indextable-search-icon {
  margin-right: 0;
  color: var(--color-text-tertiary);
}

.yw-group-modal .yw-indextable-search-input input {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.yw-group-modal .yw-indextable-search-input input::-moz-placeholder {
  color: var(--color-text-tertiary);
}

.yw-group-modal .yw-indextable-search-input input::placeholder {
  color: var(--color-text-tertiary);
}

.yw-group-modal .yw-indextable-contacts {
  flex: 1 1;
  min-height: 360px;
  border-radius: var(--channel-setting-section-radius);
  overflow: hidden;
}

.yw-group-modal .yw-subscrierlist {
  height: 560px;
  display: flex;
  flex-direction: column;
  background-color: var(--channel-setting-section-bg);
  border-radius: var(--channel-setting-section-radius);
  overflow: hidden;
}

.yw-group-modal .yw-subscrierlist-list {
  flex: 1 1;
  min-height: 400px;
}

/* 适配暗色主题 */
[data-theme="dark"] .yw-group-modal .yw-group-modal-content {
  border-color: var(--color-border-strong);
}

/* ===================================================================
 * InfoPanelRow 信息面板行组件
 * 支持主题切换
 * =================================================================== */

.yw-info-row {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--control-height-lg);
  padding: 0 var(--spacing-md);
  border-radius: var(--radius-base);
  background: var(--info-row-bg);
  gap: var(--spacing-md);
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--info-row-border);
}

.yw-info-row + .yw-info-row {
  margin-top: var(--spacing-md);
}

.yw-info-row--clickable {
  cursor: pointer;
}

.yw-info-row--clickable:hover {
  background: var(--info-row-hover);
}

.yw-info-row--danger .yw-info-row__label,
.yw-info-row--danger .yw-info-row__value {
  color: var(--color-danger);
}

.yw-info-row--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.yw-info-row__icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.yw-info-row__label {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.yw-info-row__value {
  margin-left: auto;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  max-width: 50%;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yw-info-row__placeholder {
  color: var(--color-text-muted);
}

.yw-info-row__arrow {
  margin-left: var(--spacing-sm);
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.yw-info-row__desc {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding-top: var(--radius-xs);
}

/* ===================================================================
 * WKLayout 主布局组件样式
 * 响应式断点（参考 Material Design + BrowserStack 2025）:
 *   - desktop: > 1024px (三栏布局，标准宽度)
 *   - tablet:  641px - 1024px (三栏布局，会话面板收窄)
 *   - mobile:  <= 640px (全屏切换模式，底部 Tab)
 * 三栏最小宽度: 72(Tab) + 240(会话) + 320(消息) = 632px
 * =================================================================== */

.yw-layout {
  --layout-tab-min-height: 60px;
  --transition-layer: 300ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-slide: 450ms cubic-bezier(0.25, 1, 0.5, 1);

  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

/* ===== 侧边Tab栏 ===== */
.yw-layout-tab {
  height: 100%;
  width: 72px;
  width: var(--layout-tab-width, 72px);
  min-width: 72px;
  min-width: var(--layout-tab-width, 72px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-bg-sidebar);
  padding: 24px 8px;
}

.fullscreen-mode .yw-layout-tab {
  padding: 16px 8px;
}

/* ===== 内容区域 ===== */
.yw-layout-content {
  width: 100%;
  height: 100%;
  display: flex;
  min-width: 0; /* 允许 flex 子项收缩 */
}

/* 左侧内容区：会话列表等 */
/* Desktop 模式 (> 1024px): 会话面板 280-380px */
.yw-layout-content-left {
  height: 100%;
  width: clamp(280px, 25%, 380px);
  flex-shrink: 0;
  background-color: var(--color-bg-sidebar);
  border-right: var(--color-border-line);
}

/* 右侧内容区：聊天界面等 */
.yw-layout-content-right {
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  flex: 1 1;
  min-width: 0; /* 允许收缩 */
}

/* ===================================================================
 * Tablet 平板模式 (641px - 1024px)
 * 三栏布局，会话面板宽度收窄：240-300px
 * =================================================================== */
.yw-layout[data-screen-size="tablet"] .yw-layout-content-left {
  width: clamp(240px, 30%, 300px);
}

/* ===================================================================
 * Mobile 移动端模式 (<= 640px)
 * 全屏切换：左侧列表占满，点击后右侧滑入覆盖
 * 底部 Tab 栏仅显示：会话、联系人
 * 非一级页面（如聊天详情）时隐藏底部 Tab 栏
 * =================================================================== */
.yw-layout[data-screen-size="mobile"] {
  flex-direction: column;
}

/* 移动端Tab栏：底部横向排列 */
.yw-layout[data-screen-size="mobile"] .yw-layout-tab {
  width: 100%;
  min-width: 100%;
  height: 64px;
  height: var(--layout-tab-mobile-height, 64px);
  flex-direction: row;
  justify-content: center;
  border-right: none;
  border-top: var(--color-border-line);
  padding: 0;
  order: 2; /* 移动到底部 */
  transition: transform var(--transition-layer);
}

.yw-layout[data-screen-size="mobile"] .yw-layout-content {
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  order: 1;
}

/* 移动端左侧：全宽显示 */
.yw-layout[data-screen-size="mobile"] .yw-layout-content-left {
  width: 100%;
  min-width: 100%;
  max-width: none;
  flex: 1 1;
  border-right: none;
  background: var(--color-bg-sidebar);
  background: var(--color-bg-page, var(--color-bg-sidebar));
  overflow-y: auto;
  z-index: 1;
}

/* 移动端右侧：固定定位，默认隐藏在屏幕右侧 */
.yw-layout[data-screen-size="mobile"] .yw-layout-content-right {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0; /* 占满整个高度，因为 Tab 栏会同步隐藏 */
  right: 0;
  transform: translate3d(100%, 0, 0);
  transition: transform var(--transition-layer);
  background: #fff;
  background: var(--color-bg-card, #fff);
  z-index: 10;
  /* 移除左边框，使用阴影代替 */
  border-left: none;
}

/* 移动端右侧展开状态：滑入显示 */
.yw-layout[data-screen-size="mobile"] .yw-layout-content.yw-layout-open .yw-layout-content-right {
  transform: translate3d(0, 0, 0);
}

/* 移动端非一级页面（消息面板打开时）隐藏底部 Tab 栏 */
.yw-layout[data-screen-size="mobile"] .yw-layout-content.yw-layout-open ~ .yw-layout-tab {
  transform: translateY(100%);
  pointer-events: none;
}

/* ===================================================================
 * 无障碍：减少动效偏好
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .yw-layout[data-screen-size="mobile"] .yw-layout-content-right,
  .yw-layout[data-screen-size="mobile"] .yw-layout-tab {
    transition: none;
  }
}

.yw-search-box {
  display: flex;
  min-width: 200px;
  height: 45px;
  background-color: var(--color-bg-page);
  border-radius: 25px;
}

.yw-search-icon {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.yw-search-input {
  flex: 1 1;
}

.yw-search-input input {
  flex: 1 1;
  height: var(--control-height-md);
  font-size: var(--font-size-sm);
  line-height: 18px;
  background-color: transparent;
  color: var(--color-text-primary);
  padding: 0;
  outline: none;
  border: none;
  height: 100%;
}

.yw-search-input .semi-input-wrapper {
  height: 100%;
  background-color: var(--color-bg-card);
}

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

.yw-search-input .semi-input-wrapper-focus:active {
  border-color: none !important;
}

.yw-qrcodemy {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg-card);
}

.yw-qrcodemy--modal {
  min-width: 0;
}

.yw-qrcodemy-modal .semi-modal-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.yw-qrcodemy-modal .semi-modal {
  margin: 0 !important;
}

.yw-qrcodemy-modal .semi-modal-content {
  border-radius: 12px !important;
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: var(--shadow-modal) !important;
}

.yw-qrcodemy-modal .semi-modal-header {
  padding: 14px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
}

.yw-qrcodemy-modal .semi-modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

body[theme-mode="dark"] .yw-qrcodemy-modal .semi-modal-content,
body[theme-mode="dark"] .yw-qrcodemy-modal .semi-modal-header {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 统一的二维码弹窗体样式 */
.yw-qrcode-modal-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
}

.yw-qrcode-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  text-align: left;
}

.yw-qrcode-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.yw-qrcode-userinfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yw-qrcode-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.yw-qrcode-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.yw-qrcode-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 0;
}

.yw-qrcode-tip {
  font-size: 13px;
  text-align: center;
  color: var(--color-text-secondary);
}

.yw-iconlistitem {
  height: 44px;
  width: 100%;
  cursor: pointer;
  position: relative;
}

.yw-iconlistitem:hover {
  background-color: var(--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: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin-left: var(--spacing-md);
}

.yw-iconlistitem--noicon .yw-iconlistitem-content-title {
  margin-left: 0;
}

.yw-iconlistitem-content-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.yw-iconlistitem-content-badge {
  display: flex;
  align-items: center;
}

.yw-iconlistitem-content-arrow {
  width: 7px;
  height: 7px;
  border: solid var(--color-text-tertiary);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  opacity: 0.9;
}

.yw-auth {
  display: flex;
  width: 100%;
  height: 100vh;
  min-width: 360px;
}

.yw-auth-banner {
  flex: 1 1;
  min-width: 320px;
  position: relative;
  background-color: #7c42ff;
  background-color: var(--color-auth-banner-bg, #7c42ff);
  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;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  background-color: var(--color-bg-card, #fff);
  background-image: url(../../static/media/auth-form.3996f843467b231724be.svg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  position: relative;
  padding: 20px 0;
}

.yw-auth-content {
  flex: 1 1;
  width: 100%;
  max-width: 478px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  min-height: 0;
}

.yw-auth-card {
  width: 100%;
  max-width: 420px;
  /* 自适应高度：优先使用可用空间，避免出现滚动条 */
  height: auto;
  max-height: calc(100vh - 100px);
  background: var(--color-auth-card-bg);
  border-radius: 12px;
  box-shadow: var(--color-auth-card-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 卡片头部导航区域 */
.yw-auth-card-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 8px;
  margin-left: -8px;
}

/* 返回按钮样式 - 现代简洁风格 */
.yw-auth-back-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px 0 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.2s ease;
  color: #666;
  color: var(--color-text-secondary, #666);
}

.yw-auth-back-button:hover {
  background: rgba(124, 66, 255, 0.08);
  background: var(--color-auth-back-hover-bg, rgba(124, 66, 255, 0.08));
  color: #7c42ff;
  color: var(--color-accent, #7c42ff);
}

.yw-auth-back-button:active {
  background: rgba(124, 66, 255, 0.12);
  background: var(--color-auth-back-active-bg, rgba(124, 66, 255, 0.12));
  transform: scale(0.98);
}

.yw-auth-back-button:focus-visible {
  outline: 2px solid #7c42ff;
  outline: 2px solid var(--color-accent, #7c42ff);
  outline-offset: 2px;
}

/* SVG 图标样式 */
.yw-auth-back-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.yw-auth-back-button:hover .yw-auth-back-icon {
  transform: translateX(-2px);
}

/* 返回文案样式 */
.yw-auth-back-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.yw-auth-card-body {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 改为 overflow: visible 避免与子元素下拉菜单产生双滚动条 */
  overflow: visible;
}

/* 登录页面版本号显示样式 */
.yw-auth-version {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 100%;
  flex-shrink: 0;
}

.yw-auth-version span {
  font-size: 12px;
  color: var(--color-auth-version-text);
  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(--color-accent);
  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: var(--color-auth-text-secondary);
  text-align: center;
}

input[type="checkbox"].yw-auth-agreement-checkbox {
  margin: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.yw-auth-agreement-text {
  color: var(--color-auth-text-secondary);
  line-height: 20px;
}

.yw-auth-register {
  text-align: center;
  color: var(--color-auth-text-secondary);
}

/* 响应式设计 */
@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;
    padding: 16px 0;
  }

  .yw-auth-content {
    padding: 0 12px;
  }

  .yw-auth-card {
    padding: 16px;
  }

  .yw-auth-card-header {
    margin-left: -4px;
  }

  .yw-auth-back-button {
    padding: 0 10px 0 6px;
  }
}

/* Electron 小窗口优化（登录窗口 470x780）*/
@media screen and (max-height: 800px) {
  .yw-auth-panel {
    padding: 12px 0;
  }

  .yw-auth-card {
    padding: 16px;
    max-height: calc(100vh - 80px);
  }

  .yw-auth-card-header {
    margin-bottom: 4px;
  }

  .yw-auth-version {
    height: 28px;
  }
}

/* ================= macOS(Electron) 登录页拖拽区域 ================= */
/* 除表单卡片外的所有区域可拖拽窗口 */
body.is-electron-mac .yw-auth { -webkit-app-region: drag; }

/* 表单卡片及其内部交互控件禁用拖拽，保证正常点击/输入 */
body.is-electron-mac .yw-auth-card,
body.is-electron-mac .yw-auth-card *,
body.is-electron-mac .yw-auth-card input,
body.is-electron-mac .yw-auth-card button,
body.is-electron-mac .yw-auth-card a,
body.is-electron-mac .yw-auth-card select,
body.is-electron-mac .yw-auth-card textarea {
  -webkit-app-region: no-drag;
}

/* 登录特有的标签切换 */
.yw-login-tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--color-auth-tab-border);
  margin-bottom: 20px;
}

.yw-login-tab-item {
  flex: 1 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: var(--color-auth-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.yw-login-tab-item.active {
  color: var(--color-auth-text-primary);
}

.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 var(--color-auth-input-border);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 12px;
  background-color: var(--color-auth-input-bg);
  color: var(--color-auth-text-primary);
}

.yw-login-form input.yw-login-password {
  margin-bottom: 0;
}

.yw-login-form input:focus {
  border-color: var(--semi-color-primary);
  outline: none;
}

.yw-login-form input::-moz-placeholder {
  color: var(--color-auth-text-muted);
}

.yw-login-form input::placeholder {
  color: var(--color-auth-text-muted);
}

.yw-login-button {
  margin-top: 24px;
}

/* 登录选项 */
.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: var(--color-auth-text-secondary);
  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(--color-text-muted);
}

.yw-login-qrcode-tip .highlight {
  color: var(--color-accent);
  /* 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: var(--color-auth-qrcode-overlay-bg);
  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: var(--color-auth-text-secondary);
  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: var(--color-auth-text-secondary);
  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: var(--color-auth-text-secondary);
}

.yw-login-register {
  color: var(--color-auth-text-secondary);
}

.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 var(--color-auth-input-border);
  font-size: 14px;
  background-color: var(--color-auth-input-disabled-bg);
  color: var(--color-auth-text-primary);
}

.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: 12px;
}

.yw-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-auth-text-secondary);
  z-index: 1;
}

.yw-password-toggle:hover {
  color: var(--color-auth-text-primary);
}

/* 账号输入框容器 */
.yw-login-username-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.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: var(--color-auth-text-secondary);
  z-index: 1;
  transition: transform 0.2s ease;
}

.yw-login-username-dropdown-arrow:hover {
  color: var(--color-auth-text-primary);
}

.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: var(--color-auth-dropdown-bg);
  border: 1px solid var(--color-auth-dropdown-border);
  border-radius: 4px;
  box-shadow: var(--color-auth-dropdown-shadow);
  z-index: 100; /* 提高z-index确保在其他元素之上 */
  max-height: min(300px, max(120px, calc(100vh - 400px))); /* 动态计算最大高度，避免超出视窗 */
  overflow-y: auto;
  overflow-x: hidden; /* 隐藏水平滚动条 */
  margin-top: 4px;
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-thumb) 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: var(--color-scroll-thumb);
  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: var(--color-scroll-thumb-hover);
}

/* 当下拉菜单可滚动时的视觉提示 */
.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 var(--color-auth-dropdown-divider);
  transition: background-color 0.2s ease;
  color: var(--color-auth-text-primary);
  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: var(--color-auth-dropdown-item-hover);
}

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

.yw-login-username-dropdown-item.selected:hover {
  background-color: var(--color-auth-dropdown-item-selected);
}

/* 账号文本部分 */
.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: var(--color-error-bg);
}

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

/* 搜索框容器 */
.yw-login-username-dropdown-search {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--color-auth-dropdown-divider);
  background: var(--color-auth-dropdown-search-bg);
}

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

.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: var(--color-auth-text-muted);
}

.yw-login-username-dropdown-search-input::placeholder {
  color: var(--color-auth-text-muted);
}

/* 搜索框清除按钮 */
.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: var(--color-auth-text-muted);
  font-size: 14px;
  font-style: italic;
}

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

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

.yw-login-username-dropdown::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 3px;
}

.yw-login-username-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}

.yw-register {
  display: flex;
  height: 100vh;
  background: var(--color-auth-card-bg);
}

.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: var(--color-auth-text-primary);
}

.yw-register-content-slogan {
  color: var(--color-auth-text-secondary);
  font-size: 16px;
}

.yw-register-content {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background: var(--color-auth-content-bg);
}

.yw-register-card {
  width: 100%;
  max-width: 420px;
  min-height: 520px;
  background: var(--color-auth-card-bg);
  border-radius: 12px;
  box-shadow: var(--color-auth-card-shadow);
  padding: 32px;
}

/* 注册表单 */
.yw-register-form {
  width: 100%;
  max-width: 400px;
}

.yw-register-form input {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: 1px solid var(--color-auth-input-border);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 12px;
  background-color: var(--color-auth-input-bg);
  color: var(--color-auth-text-primary);
}

.yw-register-verify-code {
  display: flex;
  margin-bottom: 12px;
}

.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: 10px;
}

.yw-register-options {
  text-align: center;
  margin-top: 16px;
}

.yw-register-form input:focus {
  border-color: var(--semi-color-primary);
  outline: none;
}

.yw-register-form input::-moz-placeholder {
  color: var(--color-auth-text-muted);
}

.yw-register-form input::placeholder {
  color: var(--color-auth-text-muted);
}

.yw-register-options a:hover {
  text-decoration: underline;
}

/* 注册标签切换 */
.yw-register-tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--color-auth-tab-border);
  margin-bottom: 20px;
}

.yw-register-tab-item {
  flex: 1 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  color: var(--color-auth-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.yw-register-tab-item.active {
  color: var(--color-auth-text-primary);
}

.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: var(--color-auth-card-bg);
  border-bottom: 1px solid var(--color-auth-dropdown-divider);
}

.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: var(--color-auth-text-primary);
}

.yw-register-slogan {
  color: var(--color-auth-text-secondary);
  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;
}

.yw-register-content-form .phone-input-container input {
  height: 40px;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 确保验证码输入框样式一致 */
.yw-register-verify-code {
  margin-bottom: 20px;
}

/* 密码输入框容器样式 */
.yw-password-container {
  position: relative;
  margin-bottom: 12px;
}

.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: var(--color-auth-text-secondary);
  z-index: 1;
}

.yw-password-toggle:hover {
  color: var(--color-auth-text-primary);
}

.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: var(--color-auth-captcha-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--color-auth-dropdown-shadow);
}

.image-captcha-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-auth-captcha-border);
}

.image-captcha-header span {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-auth-text-primary);
}

.image-captcha-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--color-auth-captcha-close);
  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 var(--color-auth-input-border);
  border-radius: 4px;
  background-color: var(--color-auth-input-bg);
  cursor: pointer;
}

.selected-country {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  width: 100%;
  height: 100%;
  color: var(--color-auth-text-primary);
}

/* 支持图片格式的国旗 */
.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;
  padding-top: 3px;
}

.country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-height: 300px;
  background-color: var(--color-auth-dropdown-bg);
  border: 1px solid var(--color-auth-dropdown-border);
  border-radius: 4px;
  box-shadow: var(--color-auth-dropdown-shadow);
  z-index: 1000;
  margin-top: 4px;
}

.search-container {
  padding: 10px;
  border: none;
}

.search-container .semi-input-wrapper-default {
  width: 100%;
  height: auto;
  border: none;
  box-shadow: none;
}

.search-container input {
  margin-bottom: 0;
  height: 40px;
  border-radius: 4px;
  border: var(--color-border-line);
  background: #2A2C2F;
  background: var(--yw-search-fill, #2A2C2F);
  border-color: #3D3D3D;
  border-color: var(--yw-search-border, #3D3D3D);
  outline: none;
}

.countries-list {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-thumb) transparent;
}

.countries-list::-webkit-scrollbar {
  width: 6px;
}

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

.countries-list::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll-thumb);
  border-radius: 3px;
}

.countries-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scroll-thumb-hover);
}

.country-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}

.country-item:hover {
  background-color: var(--color-auth-dropdown-item-hover);
}

.country-item.selected {
  background-color: var(--color-auth-dropdown-item-selected);
}

.country-name {
  flex: 1 1;
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-auth-text-primary);
}

.country-code {
  color: var(--color-auth-text-secondary);
}

.loading-container, .no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--layout-viewqueue-header-height);
  color: var(--color-auth-text-muted);
}

/* 为注册和忘记密码页面的手机号输入框添加样式 */
.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 var(--color-auth-input-border);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 12px;
  background-color: var(--color-auth-input-bg);
  color: var(--color-auth-text-primary);
}

.yw-forget-form input:focus {
  border-color: var(--semi-color-primary);
  outline: none;
}

.yw-forget-form input::-moz-placeholder {
  color: var(--color-auth-text-muted);
}

.yw-forget-form input::placeholder {
  color: var(--color-auth-text-muted);
}

/* 验证码区域 */
.yw-forget-verify-code {
  display: flex;
  margin-bottom: 12px;
}

.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: 20px;
}

/* 底部链接 */
.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;
}

.yw-forget-form .phone-input-container input {
  height: 40px;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 确保在手机模式下区号选择器正常显示 */
@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: 12px;
}

.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: var(--color-auth-text-secondary);
  z-index: 1;
}

.yw-password-toggle:hover {
  color: var(--color-auth-text-primary);
}

.yw-auth-card {
  min-height: auto;
}

.yw-company-input {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--color-auth-content-bg);
}

.yw-company-input-form {
  background: var(--color-auth-card-bg);
  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: var(--color-auth-text-primary);
  font-size: 24px;
  font-weight: 500;
}

.yw-company-input-form input {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: 1px solid var(--color-auth-input-border);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 24px;
  background-color: var(--color-auth-input-bg);
  color: var(--color-auth-text-primary);
}

.yw-company-input-form input:focus {
  border-color: var(--semi-color-primary);
  outline: none;
}

.yw-company-input-form input::-moz-placeholder {
  color: var(--color-auth-text-muted);
}

.yw-company-input-form input::placeholder {
  color: var(--color-auth-text-muted);
}

/* 复用登录页面的按钮样式 */
.yw-company-input-form .yw-auth-module-button {
  width: 100%;
  margin-top: 8px;
  height: 44px;
  font-size: 16px;
}

/* ===================================================================
 * ConfigErrorPage 配置错误页面组件
 * 支持主题切换
 * =================================================================== */

.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: var(--font-size-2xl);
  color: var(--color-text-primary);
}

.yw-config-error-desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--spacing-2xl);
}

.yw-config-error-desc ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0 0;
}

.yw-config-error-desc li {
  margin-bottom: var(--spacing-sm);
}

.yw-config-error-actions {
  display: flex;
  gap: var(--spacing-lg);
  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(--color-bg-card);
  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(--color-bg-hover);
}

.yw-sex-select-item .checked {
  color: var(--color-text-primary);
}

.yw-sex-select-item .sex {
}

/* ===================================================================
 * MeInfo 个人信息组件
 * 支持主题切换
 * =================================================================== */

.avatar-label {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.avatar-label-upload {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--color-bg-mask-light);
  border-radius: var(--radius-full);
  padding: var(--spacing-xs);
}

.yw-meinfo-card {
  align-items: center;
}

.yw-meinfo-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.yw-meinfo-card__desc {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

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

.yw-smalltableedit-content-item {
  display: flex;
  padding: 5px 15px;
  background-color: var(--color-bg-page);
}

.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(--color-text-primary);
}

.yw-smalltableedit-content-item-action {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.yw-friendadd-modal .semi-modal-content {
  border-radius: 12px !important;
  box-shadow: var(--shadow-modal) !important;
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border-strong) !important;
}

.yw-friendadd-modal .semi-modal-wrap,
.yw-friendadd-verify-modal .semi-modal-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.yw-friendadd-verify-modal .semi-modal {
  margin: 0 !important;
}

body[theme-mode="dark"] .yw-friendadd-modal .semi-modal-content {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.yw-friendadd-modal .semi-modal-header {
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
  background: var(--color-bg-card) !important;
}

body[theme-mode="dark"] .yw-friendadd-modal .semi-modal-header {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.yw-friendadd-modal .semi-modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.yw-friendadd-modal .semi-modal-body {
  padding: 0 !important;
}

.yw-friendadd {
  padding: 16px 20px 24px;
  background: var(--color-bg-card);
  min-height: 360px;
}

.yw-friendadd-search .semi-input-wrapper {
  height: 44px;
  border-radius: 8px;
  background: var(--color-bg-search);
  border: 1px solid var(--color-border-strong);
  transition: all var(--transition-base);
  padding: 8px 12px;
}

.yw-friendadd-search .semi-input-prefix {
  margin-right: 8px;
  color: var(--icon-secondary);
}

.yw-friendadd-search .semi-input-wrapper:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-search-hover);
}

.yw-friendadd-search .semi-input-wrapper-focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.12);
  background: var(--color-bg-card);
}

.yw-friendadd-meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.yw-friendadd-meta-qrcode {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-search);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background var(--transition-base);
}

.yw-friendadd-meta-qrcode:hover {
  background: var(--color-bg-search-hover);
}

.yw-friendadd-result {
  margin-top: 26px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.yw-friendadd-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.yw-friendadd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-search);
  flex-shrink: 0;
}

.yw-friendadd-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.yw-friendadd-userinfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.yw-friendadd-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.yw-friendadd-account {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.yw-friendadd-addbtn {
  min-width: 74px;
  height: 32px;
  border-radius: 8px !important;
}

.yw-friendadd-addbtn.semi-button-light {
  background: transparent;
}

.yw-friendadd-empty {
  margin-top: 32px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.yw-friendadd-verify-modal .semi-modal-content {
  border-radius: 12px !important;
  border: 1px solid var(--color-border-strong) !important;
  background: var(--color-bg-card) !important;
  box-shadow: var(--shadow-modal) !important;
}

body[theme-mode="dark"] .yw-friendadd-verify-modal .semi-modal-content {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.yw-friendadd-verify-modal .semi-modal-header {
  padding: 14px 16px 12px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
  background: var(--color-bg-card) !important;
}

body[theme-mode="dark"] .yw-friendadd-verify-modal .semi-modal-header {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.yw-friendadd-verify-modal .semi-modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.yw-friendadd-verify-modal .semi-modal-body {
  padding: 12px 16px 18px !important;
}

.yw-friendadd-verify {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yw-friendadd-verify-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.yw-friendadd-verify-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-search);
  flex-shrink: 0;
}

.yw-friendadd-verify-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.yw-friendadd-verify-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.yw-friendadd-verify-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yw-friendadd-verify-label {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.yw-friendadd-verify-field .semi-textarea,
.yw-friendadd-verify-field .semi-input-wrapper {
  background: var(--color-bg-search);
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  transition: all var(--transition-base);
}

.yw-friendadd-verify-field .semi-textarea:focus-within,
.yw-friendadd-verify-field .semi-input-wrapper-focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.12);
  background: var(--color-bg-card);
}

.yw-friendadd-verify-field .semi-textarea textarea {
  background: transparent;
  color: var(--color-text-primary);
  font-size: 14px;
}

.yw-friendadd-verify-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 保存的群组件样式 - 参考会话列表样式 */

.yw-groupsave {
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-card);
  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(--color-bg-hover);
}

/* 选中状态（如果需要的话） */
.yw-groupsave-content li.selected {
  background-color: var(--state-selected-bg);
}

.yw-groupsave-content li.selected:hover {
  background-color: var(--state-selected-bg);
}

/* 深色主题支持 */
body[theme-mode="dark"] .yw-groupsave-content li {
  background-color: var(--color-bg-sidebar);
}

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(--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(--color-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(--color-text-primary);
}

/* 无障碍支持 */
.yw-groupsave-content li:focus {
  outline: 2px solid var(--color-accent);
  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%;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.yw-newfriend-layout {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

.yw-newfriend-container {
  width: 100%;
  max-width: 600px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.yw-newfriend-header {
  display: flex;
  align-items: center;
  padding: 18px 16px;
  border-bottom: var(--color-border-line);
}

/* 返回按钮 - 默认隐藏，移动端显示 */
.yw-newfriend-header-back {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  margin-right: 8px;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
  color: var(--color-text-secondary);
}

.yw-newfriend-header-back:hover {
  background-color: rgba(0, 0, 0, 0.05);
  background-color: var(--state-hover-bg, rgba(0, 0, 0, 0.05));
}

/* 移动端显示返回按钮 */
.yw-layout[data-screen-size="mobile"] .yw-newfriend-header-back {
  display: flex;
}

.yw-newfriend-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.yw-newfriend-empty {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 4px 24px;
  color: var(--color-text-secondary);
  text-align: center;
}

.yw-newfriend-empty-icon {
  opacity: 0.95;
}

.yw-newfriend-empty-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.yw-newfriend-loading {
  flex: 1 1;
}

.yw-newfriend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yw-newfriend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background-color: var(--color-bg-card);
  border-radius: 12px;
}

.yw-newfriend-item-avatar {
  flex-shrink: 0;
  margin-top: 2px;
}

.yw-newfriend-item-body {
  flex: 1 1;
  min-width: 0;
}

.yw-newfriend-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yw-newfriend-item-title-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.yw-newfriend-item-name {
  color: var(--color-link);
  font-weight: 600;
  cursor: pointer;
}

.yw-newfriend-item-desc {
  color: var(--color-text-primary);
  font-size: 13px;
}

.yw-newfriend-item-time {
  flex-shrink: 0;
  color: var(--msg-card-meta);
  font-size: 12px;
}

.yw-newfriend-item-remark {
  margin-top: 6px;
  font-size: 12px;
  color: var(--msg-card-meta);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.yw-newfriend-item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.yw-newfriend-item-action-split {
  display: flex;
  align-items: center;
}

.yw-newfriend-item-action-split button {
  background-color: transparent !important;
  border: var(--color-border-line);
  border-radius: var(--semi-border-radius-small);
  color: var(--color-text-primary)
}

.yw-newfriend-split-left {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.yw-newfriend-split-right {
  width: 40px;
  padding: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.yw-newfriend-item-status {
  color: var(--color-text-secondary);
  font-size: 13px;
}

/* 
 * 最近联系人列表样式
 * 直接复用 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;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0;
}

.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: var(--spacing-3xl) var(--spacing-xl);
  gap: var(--spacing-md);
  color: var(--semi-color-text-2);
  height: 200px;
}

/* 联系人项样式 */
.paginated-contacts-list .contact-item {
  padding: var(--spacing-sm) var(--spacing-md);
  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: var(--font-size-base);
  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: var(--spacing-4xl) var(--spacing-xl);
  color: var(--semi-color-text-2);
  height: 200px;
}

.paginated-contacts-list .empty-text {
  font-size: var(--font-size-base);
}

.paginated-contacts-list .loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  gap: var(--spacing-sm);
  color: var(--semi-color-text-2);
  font-size: var(--font-size-base);
  height: var(--list-item-height-md);
  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: var(--color-scroll-thumb);
  border-radius: 3px;
}

.paginated-contacts-list .contacts-list-container [data-virtuoso-scroller]::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scroll-thumb-hover);
}

/* 全选操作区域样式 */
.paginated-contacts-list .select-all-section {
  flex-shrink: 0;
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
  background: var(--semi-color-bg-1);
  margin-top: var(--spacing-md);
}

.paginated-contacts-list .select-all-button-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: var(--control-height-md);
}

.paginated-contacts-list .select-all-label {
  font-size: var(--font-size-base);
  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: var(--font-size-sm);
  color: var(--semi-color-text-1);
  background: var(--semi-color-primary-light-default);
  padding: var(--radius-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.paginated-contacts-list .progress-text {
  font-size: var(--font-size-sm);
  color: var(--semi-color-text-2);
  white-space: nowrap;
}
.yw-main-modal-organizational-group-new .semi-modal {
  width: -webkit-fill-available;
}
.yw-main-modal-organizational-group-new .semi-modal-content {
  border: none !important;
  padding: 0px !important;
  height: 80vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.yw-main-modal-organizational-group-new .semi-modal-header {
  padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl) !important;
  margin: 0 !important;
}

.yw-main-modal-organizational-group-new .semi-modal-body-wrapper {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.yw-main-modal-organizational-group-new .semi-modal-body {
  width: 100%;
  padding: var(--spacing-xl);
  background-color: var(--color-bg-card);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.yw-main-modal-organizational-group-new .semi-modal-footer {
  padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) !important;
  margin: 0 !important;
  border: none !important;
  display: flex !important;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  background-color: var(--color-bg-card);
}

.yw-main-modal-organizational-group-new .semi-modal-close {
  display: inline-flex !important;
}

.yw-organizational-group-new-content {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 8px;
  border: var(--color-border-line);
}

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

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

.yw-organizational-group-new-left .group-new-left-main .friend-opt {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.yw-organizational-group-new-left .group-new-left-main .friend-opt .friend-opt-main {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1;
}

/* 当好友列表内容较少时，确保不会出现不必要的滚动条 */
.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: var(--spacing-md);
}

.yw-organizational-group-new-left .group-new-left-search:empty {
  display: none;
}

.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input {
  background-color: var(--color-bg-search);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  margin-left: 0;
  height: var(--control-height-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input:hover {
  border-color: var(--color-border-muted);
}

.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input.semi-input-wrapper-focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 132, 254, 0.12);
}

.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input
  .semi-input-default {
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: transparent;
}

.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input
  .semi-input::-moz-placeholder {
  color: var(--color-text-muted);
}

.yw-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input
  .semi-input::placeholder {
  color: var(--color-text-muted);
}
/* 好友选择 */
.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: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  background: var(--color-accent-soft);
  border: 1px solid var(--state-default-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-base);
}

.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: var(--color-accent);
  cursor: pointer;
}

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

.total-friends-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background-color: var(--state-default-bg);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
}

@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: var(--spacing-sm);
}

.title-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.selection-limit-info {
  display: flex;
  align-items: center;
  background-color: var(--state-default-bg);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border: 1px solid var(--state-default-border);
}

.selected-count {
  color: var(--color-accent);
  transition: color var(--transition-base);
  font-weight: var(--font-weight-bold);
}

.selected-count.warning {
  color: var(--color-warning);
}

.selected-count.error {
  color: var(--color-danger);
  animation: pulse 2s infinite;
}

.limit-separator {
  color: var(--color-text-muted);
  margin: 0 2px;
}

.max-limit {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.limit-label {
  color: var(--color-text-secondary);
  margin-left: 2px;
  font-weight: var(--font-weight-medium);
}

.selection-status {
  font-size: var(--font-size-sm);
  flex: 1 1;
  margin-left: var(--spacing-xs);
  margin-top: 2px;
}

.status-hint {
  color: var(--color-text-muted);
}

.status-normal {
  color: var(--color-success);
}

.status-warning {
  color: var(--color-warning);
  font-weight: var(--font-weight-medium);
}

.status-error {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

/* 已选择成员网格布局 */
.selected-members-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  height: 100%;
  overflow-y: auto;
  padding-right: var(--spacing-xs);
}

.selected-member-chip {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--state-default-bg);
  border: 1px solid var(--state-default-border);
  border-radius: var(--radius-base);
  transition: all var(--transition-base);
  position: relative;
}

.selected-member-chip:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px var(--color-accent-soft);
}

.member-avatar {
  flex-shrink: 0;
  margin-right: var(--spacing-sm);
}

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

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

.remove-member-btn {
  flex-shrink: 0;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  border-radius: var(--radius-full);
  background-color: var(--state-disabled-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  margin-left: var(--spacing-sm);
}

.remove-member-btn:hover {
  background-color: var(--color-danger);
  color: var(--color-text-white);
}

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

.empty-icon {
  margin-bottom: var(--spacing-lg);
  opacity: 0.6;
}

.empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.empty-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

/* 右侧区域整体样式 */
.yw-organizational-group-new-right {
  width: 50%;
  height: 100%;
  padding: var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-card);
}

.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: var(--spacing-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}
.group-new-left-main .friend-opt .organization-name:hover {
  background-color: var(--color-bg-page);
}

.group-new-left-main .friend-opt .friend-opt-main .semi-checkbox-content {
  min-width: 0;
}

/* 组织架构选择 */
.group-new-left-main .organizational-opt {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.group-new-left-main .organizational-opt-header {
  height: var(--control-height-xl);
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-sm);
}
.group-new-left-main .organizational-opt-header .yw-viewqueueheader {
  background-color: var(--color-bg-page);
  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(--state-default-border) solid 1px;
}
.organizational-tree .semi-input-wrapper-focus:active {
  border: var(--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: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.semi-checkbox-indeterminate .semi-checkbox-inner-display,
.semi-checkbox-checked .semi-checkbox-inner-display {
  background: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--color-bg-hover);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--color-accent-hover);
  border-color: var(--color-accent);
  color: var(--semi-color-white);
}

.organizational-tree .semi-tree-option-list-block .department-icon {
  color: var(--color-accent);
}
.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(--color-bg-card);
  color: #fff;
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected:hover {
  background-color: var(--color-bg-card);
  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 .organizational-group-new-right-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.yw-organizational-group-new-right .organizational-group-new-right-body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: var(--spacing-md) 0;
}
.yw-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item {
  padding: var(--spacing-sm) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base-px);
  word-break: break-word;
  color: var(--color-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: var(--icon-size-lg);
  height: var(--icon-size-lg);
  border-radius: var(--radius-md);
  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: var(--state-hover-bg);
}

/* 统一底部按钮样式 */
.yw-main-modal-organizational-group-new .semi-modal-footer .semi-button {
  height: var(--control-height-lg) !important;
  min-width: 80px !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-medium) !important;
  border-radius: var(--radius-base) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  transition: all var(--transition-base) !important;
}

/* 覆盖yw-but-ok的圆角样式，保持与取消按钮一致 */
.yw-main-modal-organizational-group-new .semi-modal-footer .yw-but-ok {
  border-radius: var(--radius-base) !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: var(--spacing-md);
  border-bottom: var(--color-border-line);
  background-color: transparent;
  overflow: hidden;
}

.contact-tabs .tab-item {
  flex: 1 1;
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background-color: transparent;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-base);
  position: relative;
}

.contact-tabs .tab-item:hover {
  background-color: var(--state-hover-bg);
  color: var(--color-text-primary);
}

.contact-tabs .tab-item.active {
  color: var(--color-accent);
  background-color: transparent;
  border-bottom-color: var(--color-accent);
}

.contact-tabs .tab-count {
  margin-left: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

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

@media (max-width: 768px) {
  .yw-main-modal-organizational-group-new .semi-modal-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .yw-main-modal-organizational-group-new .semi-modal-wrap .semi-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
  }

  .yw-main-modal-organizational-group-new .semi-modal-body {
    overflow-y: auto;
  }

  .yw-organizational-group-new-content {
    flex-direction: column;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .yw-organizational-group-new-left,
  .yw-organizational-group-new-right {
    width: 100%;
    height: auto;
  }

  .yw-organizational-group-new-left {
    border-right: none;
    border-bottom: var(--color-border-line);
  }

  .yw-organizational-group-new-left .group-new-left-main {
    height: 60vh;
    min-height: 320px;
  }

  .selected-members-grid {
    max-height: 40vh;
  }
}

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

.yw-blacklist-content ul li {
  height: var(--layout-viewqueue-header-height);
  width: 100%;
  background-color: var(--color-bg-page);
  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(--color-text-primary);
}

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

.yw-contacts-content-header {
  width: 100%;
  padding: var(--spacing-md);
}

.yw-contacts-action-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.yw-contacts-search {
  flex: 1 1;
  min-width: 0;
}

.yw-contacts-action-btn {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  border-radius: var(--radius-xl);
  border: none;
  background: var(--color-conversationlist-top-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
  transition: box-shadow var(--transition-base);
  flex-shrink: 0;
}

.yw-contacts-action-btn:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.yw-contacts-action-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.yw-contacts-action-plus {
  position: relative;
  width: 16px;
  height: 2px;
  background: var(--color-text-primary);
}

.yw-contacts-action-plus::after {
  content: "";
  position: absolute;
  left: 7px;
  top: -7px;
  width: 2px;
  height: 16px;
  background: var(--color-text-primary);
}

.yw-contacts-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.yw-contacts-content-body {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.yw-contacts-entry {
  width: 100%;
}

.yw-contacts-group {
  width: 100%;
}

/* 联系人分组（最后一个）需要占满剩余高度 */
.yw-contacts-group:last-child {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.yw-contacts-group-header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.yw-contacts-group-header:hover {
  background-color: var(--state-hover-bg);
}

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

.yw-contacts-group-header-left .yw-svg-icon {
  cursor: default;
}

.yw-contacts-group-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yw-contacts-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.yw-contacts-group-count {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.yw-contacts-group-chevron {
  width: 8px;
  height: 8px;
  border: solid var(--color-text-tertiary);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.yw-contacts-group-header.expanded .yw-contacts-group-chevron {
  transform: rotate(45deg);
}

.yw-contacts-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
}

.yw-contacts-group-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
}

.yw-contacts-group-item:hover {
  background-color: var(--state-hover-bg);
}

.yw-contacts-group-item.selected {
  background-color: var(--state-selected-bg);
  color: var(--state-selected-text);
}

.yw-contacts-group-item-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.yw-contacts-group-item-title {
  margin-left: 12px;
  font-size: 14px;
}

.yw-contacts-content-contacts {
  width: 100%;
  flex: 1 1;
  min-height: 0;
  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(--color-bg-conversation);
  color: var(--color-text-primary);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* 修复：隐藏联系人列表的滚动条 */
.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: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  max-height: calc(100vh - 200px); /* 使用calc确保不溢出 */
  overflow: hidden; /* 改为hidden，通过JS控制显示 */
  min-width: 32px;
  /* 确保在小屏幕下不会超出视口 */
  max-width: 40px;
}

.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%;
  height: 62px;
  padding-right: 35px; /* 为索引导航条保留空间，不再需要为滚动条保留空间 */
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
}

.yw-contacts-section-item-selected {
  background-color: var(--state-selected-bg);
  color: var(--state-selected-text);
}

.yw-contacts-section-item:hover {
  background-color: var(--state-hover-bg);
}

.yw-contacts-section-item .yw-contacts-section-item-avatar {
  width: 32px;
  height: 32px;
}

.yw-contacts-section-item-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.yw-contacts-section-item-name {
  flex: 1 1;
  margin-left: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

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

/* 联系人搜索样式：对齐会话列表顶部搜索视觉 */
.yw-contacts-search.yw-search-input {
  width: 100%;
  border: none;
  border-radius: var(--radius-xl);
  background: var(--color-conversationlist-top-bg);
  box-shadow: inset 0 0 0 1px var(--color-border-muted);
  padding: var(--spacing-md);
}

.yw-contacts-search.yw-search-input:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.yw-contacts-search.yw-search-input.focused {
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.yw-contacts-search.yw-search-input .semi-input {
  font-size: var(--font-size-base);
}

#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(--color-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: 24px;
  height: 100%;
  width: 100%;
  container-type: inline-size;
  container-name: main-sider;
}

/* Header styles */
.yw-main-sider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  height: 64px;
  border-bottom: var(--color-border-line);
}

.yw-main-sider-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yw-main-sider-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 使底部区域贴底，无需新增容器 */
  margin-top: auto;
}

.yw-main-sider-route {
  display: flex;
  align-items: center;
  justify-content: center;
}

.yw-main-sider-route svg.rotating {
  animation: sider-rotate 1s linear infinite;
}

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

.yw-main-sider-setting-menu-btn {
  position: relative;
  padding: 8px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important; /* 确保始终显示为可点击状态 */
  border-radius: 10px;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
  pointer-events: auto !important; /* 确保始终可点击 */
  /* background: var(--color-bg-card);
  border: var(--color-border-line); */
}

.yw-main-sider-setting-menu-btn:hover {
  background: var(--color-bg-hover);
}

.yw-main-sider-logo-img {
  width: 30px;
  height: auto;
}

.yw-main-sider-logo-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.yw-main-sider-content {
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yw-main-sider-avatar {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
}

.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(--color-text-secondary);
  text-align: center;
  display: -webkit-box;
  word-break: break-all;
  line-clamp: 2;
  -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;
  padding: 8px;
  color: var(--color-text-secondary);
  background: transparent;
  background: var(--sidebar-menu-bg, transparent);
  border-radius: 10px;
  border-radius: var(--sidebar-menu-radius, 10px);
  margin: 0 auto;
  transition: background 0.15s ease, color 0.15s ease;
}

.yw-main-sider-item::last-child {
  margin-bottom: 0;
}

.yw-main-sider-item.selected {
  background: #E9EBEE;
  background: var(--sidebar-menu-selected-bg, #E9EBEE);
  color: var(--color-text-primary);
}

.yw-main-sider-item:hover {
  background: rgba(0, 0, 0, 0.04);
  background: var(--sidebar-menu-hover-bg, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary);
}

.yw-main-sider-item.selected svg path {
  fill: var(--color-accent);
  stroke: var(--color-accent);
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.yw-main-sider-item:hover svg path {
  fill: var(--color-text-primary);
  stroke: var(--color-text-primary);
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.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 {
  width: 280px; /* 扩展宽度以容纳文字与控件 */
  box-shadow: var(--settings-panel-shadow);
  color: var(--color-text-secondary);
  background-color: var(--settings-panel-bg);
  border-radius: 12px; /* 设计稿圆角 */
  padding: 12px; /* 设计稿内边距 */
  pointer-events: auto !important; /* 确保菜单项可点击 */
}

.yw-sider-setting-list li {
  /* 作为兜底规则，具体布局由 .yw-settings-item 覆盖 */
  height: auto;
  min-height: 30px;
  display: block;
  padding: 0 0 0 0;
  cursor: default;
  pointer-events: auto !important;
}

/* 新的设置项结构：左右布局，标签+控件 */
.yw-sider-setting-list .yw-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  line-height: 1.4;
  cursor: default;
  background-color: var(--settings-item-bg);
  border-radius: 8px;
  transition: background-color 0.2s ease;
  margin-bottom: 8px;
}

.yw-sider-setting-list .yw-settings-item:last-child {
  margin-bottom: 0;
}

.yw-sider-setting-list .yw-settings-item.clickable {
  cursor: pointer !important;
}

.yw-sider-setting-list .yw-settings-item.clickable:hover {
  background-color: var(--settings-item-hover-bg);
}

.yw-sider-setting-list .yw-settings-item-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.yw-sider-setting-list .yw-settings-item-block .semi-radioGroup-buttonRadio {
  background-color: transparent;
}

/* 策略单选组：不换行，避免按钮折行导致的视觉跳变 */
.yw-sider-setting-list .semi-radio-group.semi-radio-group-button {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.yw-sider-setting-list .semi-radio-group.semi-radio-group-button .semi-radio-button {
  flex: 0 0 auto;
}

.yw-sider-setting-list .yw-settings-item-label {
  flex: 1 1;
  color: var(--color-text-primary);
}

.yw-sider-setting-list .yw-settings-item-value {
  color: var(--color-text-secondary);
}

.yw-main-sider-item-badge {
  position: absolute;
  top: -2px;
  right: 0;
  z-index: 1;
}

.yw-main-sider-item-badge-count {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-danger);
  color: var(--color-text-white);
  border-radius: 8px;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.yw-versioncheckview-updateinfo {
  font-weight: 500;
}

.yw-versioncheckview-updateinfo li {
  margin-bottom: 10px;
}

.yw-versioncheckview-tip {
  border-top: var(--color-border-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-body {
  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(--layout-modal-body-height);
}

.yw-main-tab {
  width: 100%;
  height: 64px;
  background-color: #fff;
  background-color: var(--color-bg-card, #fff);
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 1px solid var(--color-border-muted, rgba(0, 0, 0, 0.08));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.05);
  z-index: 5;
}
.yw-main-tab-content {
  width: 100%;
  height: 100%;
}
.yw-main-tab-content ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100%;
  list-style: none;
}

.yw-main-tab-content ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  cursor: pointer;
  font-size: 12px;
  color: #4e5a73;
  color: var(--color-text-secondary, #4e5a73);
  transition: color 0.15s ease;
}

.yw-main-tab-content ul li.active {
  color: #2f88ff;
  color: var(--color-accent, #2f88ff);
}

.yw-main-tab-content ul li img,
.yw-main-tab-content ul li svg {
  width: 24px;
  height: 24px;
}

.yw-main-tab-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.yw-main-tab-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  z-index: 1;
}

.yw-main-tab-badge-count {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-danger);
  color: var(--color-text-white);
  border-radius: 8px;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.tab-label {
  margin-top: 4px;
}