.wk-conversationlist {
  height: 100%;
  overflow-y: auto;
  padding: 0; /* 去掉左右 padding，让 item 背景撑满 */
  background: var(--wk-bg-base);
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s;
}

.wk-conversationlist:hover {
  scrollbar-color: color-mix(in srgb, var(--wk-text-primary) 15%, transparent)
    transparent;
}

/* TODO: dark mode temporarily disabled, keep for future */
body[theme-mode="dark"] .wk-conversationlist:hover {
  scrollbar-color: color-mix(in srgb, var(--wk-color-white) 15%, transparent)
    transparent;
}

/* WebKit */
.wk-conversationlist::-webkit-scrollbar {
  width: 4px;
}

.wk-conversationlist::-webkit-scrollbar-track {
  background: transparent;
}

.wk-conversationlist::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--wk-r-full);
  transition: background 0.3s;
}

.wk-conversationlist:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--wk-text-primary) 15%, transparent);
}

/* TODO: dark mode temporarily disabled, keep for future */
body[theme-mode="dark"] .wk-conversationlist:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--wk-color-white) 15%, transparent);
}

/* ── Section label ── */
.wk-conv-section {
  font-size: 11px;
  font-weight: 600;
  color: var(--semi-color-text-2);
  padding: var(--wk-sp-2) var(--wk-sp-1) var(--wk-sp-1);
  letter-spacing: 0.3px;
}

/* ── 列表项（design v3.1 最近 tab .wk-conv-im 对标） ── */
.wk-conversationlist {
  padding: 0 var(--wk-sp-2) var(--wk-sp-2);
}

.wk-conversationlist-item {
  width: 100%;
  cursor: pointer;
  padding: 7px var(--wk-sp-2);
  box-sizing: border-box;
  border-radius: var(--wk-r-sm);
  margin-bottom: 1px;
  position: relative;
  transition: background var(--wk-dur) var(--wk-ease);
}

.wk-conversationlist-item:hover {
  background: var(--wk-bg-item-hover);
}

.wk-conversationlist .wk-conversationlist-item-top {
  /* 置顶 item 不做特殊背景处理 */
}

.wk-conversationlist-item-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.wk-conversationlist-item-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wk-sp-0-5);
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.wk-conversationlist-item-avatar-box {
  position: relative;
  width: 32px;
  height: 32px;
}

/* design v3.1：群组/子区头像 32x32 + 6px 圆角；DM 维持圆形 */
.wk-conversationlist-item-avatar-box .wk-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--wk-r-sm);
}
.wk-conversationlist-item-dm .wk-conversationlist-item-avatar-box .wk-avatar {
  border-radius: var(--wk-r-circle);
}

.wk-conversationlist-item-right-first-line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--wk-sp-1-5);
  overflow: hidden;
}

.wk-conversationlist-item-right-second-line {
  display: flex;
  align-items: center;
  margin-top: 0;
}

.wk-conversationlist-item-name {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--wk-sp-1-5);
}

.wk-conversationlist-item-name h3 {
  font-size: var(--wk-text-size-base);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--wk-text-strong);
}

/* 选中态：background-only 高亮（design v3.1 无左侧指示条） */
.wk-conversationlist-item-selected,
.wk-conversationlist-item-selected:hover {
  background: var(--wk-brand-tint-06);
  box-shadow: none;
}

.wk-conversationlist-item-time {
  color: var(--wk-icon-default);
  flex-shrink: 0;
  font-size: var(--wk-text-size-xs);
  font-family: var(--wk-font-sans);
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  margin-left: auto;
  white-space: nowrap;
}

.wk-conversationlist-item-lastmsg {
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wk-icon-default);
  overflow: hidden;
  font-size: var(--wk-text-size-sm);
  font-weight: 400;
  font-family: var(--wk-font-sans);
}

/* 未读时预览不再加深（与 design v3.1 timeline 低打扰一致） */

.wk-conversationlist-item-unread .wk-conversationlist-item-name h3 {
  font-weight: 600;
}

/* 静音状态：名字 / 预览 / 计数提示降为 icon-muted */
.wk-conversationlist-item-muted .wk-conversationlist-item-name h3,
.wk-conversationlist-item-muted .wk-conversationlist-item-lastmsg,
.wk-conversationlist-item-muted .wk-conv-count-hint {
  color: var(--wk-icon-muted);
}

/* 头像右上角未读数字 badge（非静音） */
.wk-conv-unread-num {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--wk-sp-1);
  background: var(--wk-color-danger);
  color: var(--wk-color-white);
  border: 2px solid var(--wk-bg-base);
  border-radius: 9px;
  font-size: var(--wk-text-size-tiny);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 头像右上角小红点（静音 + 有未读，低打扰提示） */
.wk-conv-unread-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: var(--wk-r-circle);
  background: var(--wk-color-danger);
  border: 2px solid var(--wk-bg-base);
  box-sizing: border-box;
}

/* name 行内的免打扰小图标 */
.wk-conv-mute-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--wk-icon-muted);
}

/* 静音 + 多条未读：[N 条] 红字提示前置预览 */
.wk-conv-count-hint {
  color: var(--wk-color-danger);
  font-weight: 500;
  margin-right: var(--wk-sp-1);
  flex-shrink: 0;
}

/* AI 协作中预览 */
.wk-ai-collab-preview {
  display: flex;
  align-items: center;
  gap: var(--wk-sp-1);
  min-width: 0;
}

.wk-ai-collab-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.wk-ai-collab-tag {
  font-size: var(--wk-text-size-xs);
  padding: 1px 5px;
  border-radius: var(--wk-r-xs);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--wk-brand-primary) 12%, transparent),
    color-mix(in srgb, var(--wk-color-success) 12%, transparent)
  );
  color: var(--wk-brand-primary);
  font-weight: 600;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: var(--wk-sp-1);
}

.wk-ai-collab-pulse {
  width: 5px;
  height: 5px;
  border-radius: var(--wk-r-circle);
  background: var(--wk-color-success);
  animation: wk-collab-pulse 2s ease-in-out infinite;
}

@keyframes wk-collab-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.8);
  }
}

/* @我 mention badge：红底白字小色块，紧跟预览右侧 */
.wk-mention {
  font-size: var(--wk-text-size-tiny);
  font-weight: 600;
  color: var(--wk-color-error);
  background: color-mix(in srgb, var(--wk-color-error) 10%, transparent);
  padding: 0 var(--wk-sp-1);
  border-radius: var(--wk-r-xs);
  flex-shrink: 0;
  margin-right: var(--wk-sp-1);
}

/* 草稿、提醒 */
.wk-reminder {
  font-size: var(--wk-text-size-xs);
  font-weight: 500;
  color: var(--wk-color-error);
  flex-shrink: 0;
  margin-right: var(--wk-sp-1);
}

/* ── 在线状态 badge（design v3.1：固定 9x9 绿点 + 白边，不显示 tip 文字） ── */
.wk-onlinestatusbadge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: var(--wk-r-circle);
  background: var(--wk-color-success);
  border: 2px solid var(--wk-bg-base);
  box-sizing: border-box;
  padding: 0;
}

.wk-onlinestatusbadge-content,
.wk-onlinestatusbadge-content-tip {
  display: none;
}

.wk-onlinestatusbadge-empty {
  /* 维持上面默认形态即可 */
}

/* Thread prefix */
.wk-thread-prefix {
  color: var(--wk-text-accent);
  margin-right: var(--wk-sp-0-5);
  font-weight: 600;
}

/* 最近 tab 扁平子区行：父频道名作为面包屑出现在子区名上方 */
.wk-conv-breadcrumb {
  font-size: var(--wk-text-size-xs);
  color: var(--wk-icon-default);
  line-height: 1;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thread conversation item — 已废弃。
 * 非 compact 模式（最近 tab）现在子区扁平展示，不再套此类；
 * compact 模式（关注 tab）使用 .wk-conv-compact-item--thread 走另一套缩进+树形线样式。
 * 保留下方 .wk-conversationlist-thread-overflow 控件以防其他地方仍引用。 */

/* Thread overflow indicator */
.wk-conversationlist-thread-overflow {
  padding: 4px 8px 4px 48px;
  font-size: 12px;
  color: var(--semi-color-text-2);
  cursor: pointer;
  position: relative;
}

/* +N个子区 树形连接线 └── */
.wk-conversationlist-thread-overflow::after {
  content: "";
  position: absolute;
  left: 24px; /* 父频道 icon 中心 */
  top: 0;
  height: 50%;
  width: 10px;
  border-left: 2px solid var(--wk-border-default);
  border-bottom: 2px solid var(--wk-border-default);
  border-bottom-left-radius: 4px;
}

.wk-conversationlist-thread-overflow:hover {
  color: var(--wk-brand-primary);
}

/* 会话列表频道 icon */
.wk-conv-channel-icon {
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 3px;
  margin-top: -1px;
  color: var(--wk-text-secondary);
}
.wk-conv-thread-icon {
  color: var(--wk-text-tertiary);
}
.wk-conv-hash-icon {
  color: var(--wk-text-secondary);
}

/* 有子区的主群聊头像右下角 Hash badge */
.wk-conv-group-hash-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: var(--wk-r-circle);
  background: var(--wk-bg-elevated);
  border: 1.5px solid var(--wk-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wk-text-secondary);
}

/* ── Compact 模式（关注 Tab）紧凑频道列表 — design v3.1 .wk-conv-compact 对标 ── */
.wk-conv-compact-item {
  display: flex;
  align-items: center;
  gap: var(--wk-sp-2);
  padding: 5px var(--wk-sp-2);
  border-radius: var(--wk-r-xs);
  cursor: pointer;
  min-height: 30px;
  height: auto;
  box-sizing: border-box;
  position: relative;
  transition: background 120ms;
}

.wk-conv-compact-item:hover:not(.wk-conv-compact-item--selected) {
  background: var(--wk-bg-item-hover);
}

.wk-conv-compact-item--selected {
  background: var(--wk-brand-tint-06);
  border-radius: var(--wk-r-xs);
  box-shadow: none;
}

/* 旧式 padding，已在下方的 position:relative 版本合并，保留 fallback */

.wk-conv-compact-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wk-icon-default);
  position: relative;
}

/* design v3.1：群组头像 22x22 + 5px 圆角，DM 维持圆形（由 WKAvatar 自身样式决定） */
.wk-conv-compact-icon .wk-avatar {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}
.wk-conv-compact-icon .wk-avatar:not(.wk-avatar-group) {
  border-radius: var(--wk-r-circle);
}

/* Figma: emoji/icon 左上角 6x6 红色小圆点（有未读消息时显示） */
.wk-conv-compact-icon--reddot::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 6px;
  height: 6px;
  border-radius: var(--wk-r-circle);
  background: var(--wk-color-danger);
  border: 1px solid var(--wk-color-white);
}

.wk-conv-compact-name {
  flex: 1;
  font-size: var(--wk-text-size-base);
  font-weight: 500;
  color: var(--wk-text-strong);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 子区名称 skeleton：channelInfo 未加载时显示灰色占位条 */
.wk-conv-compact-name-skeleton {
  display: inline-block;
  width: 80px;
  height: 12px;
  border-radius: var(--wk-r-xs);
  background: linear-gradient(
    90deg,
    var(--wk-bg-elevated) 25%,
    var(--wk-bg-hover) 50%,
    var(--wk-bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: wk-skeleton-shimmer 1.2s infinite;
  vertical-align: middle;
}

@keyframes wk-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.wk-conv-compact-item--unread .wk-conv-compact-name {
  font-weight: 600;
  color: var(--wk-text-primary);
}

.wk-conv-compact-badges {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.wk-conv-compact-badge {
  min-width: 16px;
  height: 16px;
  border-radius: var(--wk-r-full);
  background: var(--wk-badge-danger-bg);
  color: var(--wk-badge-danger-text);
  font-family: var(--wk-font-sans);
  font-size: var(--wk-text-size-tiny);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--wk-sp-1);
  flex-shrink: 0;
}

/* 拖拽 handle */
.wk-conv-compact-drag-handle {
  flex-shrink: 0;
  width: 14px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wk-icon-muted);
  cursor: grab;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
  margin-left: -4px;
}

.wk-conv-compact-item:hover .wk-conv-compact-drag-handle {
  opacity: 1;
  pointer-events: auto;
}

.wk-conv-compact-drag-handle:active {
  cursor: grabbing;
}

.wk-conv-compact-item--dragging {
  opacity: 0.4;
}

/* DragOverlay ghost 样式 */
.wk-conv-compact-item--ghost {
  background: var(--wk-bg-base);
  border: 1px solid var(--wk-brand-from);
  border-radius: var(--wk-r-sm);
  box-shadow: var(--wk-shadow-md);
  opacity: 0.9;
}

/* compact 模式子区 — design v3.1：仅缩进 + 🧵 icon，无树形连接线 */
.wk-conv-compact-item.wk-conv-compact-item--thread {
  position: relative;
  padding-left: 36px;
  min-height: 26px;
  height: auto;
  gap: var(--wk-sp-1-5);
}

/* 子区名称比父群组小且不加粗，视觉层级区分 */
.wk-conv-compact-item--thread .wk-conv-compact-name {
  font-size: var(--wk-text-size-base);
  font-weight: 400;
  color: var(--wk-icon-default);
}

/* 未读子区：保持加粗（防止被上面的 fw400 覆盖） */
.wk-conv-compact-item--thread.wk-conv-compact-item--unread
  .wk-conv-compact-name {
  font-weight: 500;
  color: var(--wk-text-strong);
}

.wk-conv-compact-item--thread:hover .wk-conv-compact-name,
.wk-conv-compact-item--thread.wk-conv-compact-item--selected .wk-conv-compact-name {
  color: var(--wk-text-strong);
}

/* 子区 icon 容器 14px 宽 */
.wk-conv-compact-item--thread .wk-conv-compact-icon {
  width: 14px;
  height: 14px;
  color: var(--wk-icon-muted);
}

/* compact 模式「+N 个子区」/ 「收起」 overflow 控件 */
.wk-conv-compact-thread-overflow {
  display: flex;
  align-items: center;
  gap: var(--wk-sp-1);
  padding: 3px var(--wk-sp-2) 3px 36px;
  font-size: var(--wk-text-size-xs);
  color: var(--wk-icon-muted);
  cursor: pointer;
  border-radius: var(--wk-r-xs);
  transition: color 150ms;
  position: relative;
}

.wk-conv-compact-thread-overflow:hover {
  color: var(--wk-text-strong);
}

.wk-conv-compact-thread-overflow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--wk-sp-1);
  font-size: var(--wk-text-size-tiny);
  font-weight: 600;
  color: var(--wk-color-error);
  background: color-mix(in srgb, var(--wk-color-error) 10%, transparent);
  border-radius: var(--wk-r-full);
  margin-left: auto;
}

/* 父群聊有子区时，# icon 下方延伸竖线，连接下面的子区 */
.wk-conv-compact-item--has-threads {
  position: relative;
}

.wk-conv-compact-thread-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--wk-r-xs);
  margin-left: var(--wk-sp-0-5);
  cursor: pointer;
  opacity: 0.85;
  transition: background 0.15s, opacity 0.15s;
}

.wk-conv-compact-thread-tag:hover {
  opacity: 1;
  background: var(--wk-purple-alpha-12);
}

/* 父群聊有子区：不画竖线，连接线靠子区自身的 ::after L 形体现 */

/* 头像 wrapper，用于叠加子区角标 */
.wk-conv-compact-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* 右下角子区标识角标 */
.wk-conv-compact-thread-badge {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: var(--wk-r-xs);
  background: var(--wk-bg-navrail);
  border: 1px solid var(--wk-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wk-text-tertiary);
  pointer-events: none;
}

body[theme-mode="dark"] .wk-conv-compact-thread-badge {
  background: var(--wk-bg-deep);
  border-color: var(--wk-border-subtle);
}

/* compact 模式 mute 状态 */
.wk-conv-compact-item--muted .wk-conv-compact-name {
  opacity: 0.45;
  color: var(--wk-text-tertiary);
  font-weight: 400;
}

.wk-conv-compact-mute-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: var(--wk-sp-0-5);
  opacity: 0.6;
}

/* @ 未读 mention 徽章（design v3.1：红底白字色块） */
.wk-mention-badge {
  background: var(--wk-color-danger);
  color: var(--wk-color-white);
  padding: 0 var(--wk-sp-1);
  height: 14px;
  border-radius: var(--wk-r-xs);
  font-size: var(--wk-text-size-tiny);
  font-weight: 600;
  font-family: var(--wk-font-sans);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
  margin-left: var(--wk-sp-1);
}

/* ── 外部群角标 ── */
/* 常规会话列表：群名后显示「外部」Tag（紫色，对齐 Subscribers/SubscriberList 视觉） */
.wk-conversationlist-item-external-tag {
  margin-left: var(--wk-sp-1);
  font-size: var(--wk-text-size-tiny);
  flex-shrink: 0;
}

/* 紧凑群聊 Tab：mini 「外部」标识（12px 字号，圆角紫色淡底） */
.wk-conv-compact-external-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--wk-sp-1);
  padding: 0 4px;
  height: 14px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  border-radius: 3px;
  color: var(--semi-color-purple-6, #7b41e1);
  background: color-mix(
    in srgb,
    var(--semi-color-purple-6, #7b41e1) 12%,
    transparent
  );
  user-select: none;
  white-space: nowrap;
}
