/* ===========================================================
   哔哔赖赖 · 商用化设计层  v1
   独立样式表，最后加载。只做视觉与布局收敛，不改 DOM 结构。
   已有的 8 个 bibi-*.js 补丁里也注入了样式，这里的选择器要么更具体，
   要么显式 !important。
   注意：CSS 注释不能嵌套，注释里再写一对斜杠星号会让注释提前闭合，
   后面的内容被当成 CSS 解析，直接吃掉紧随其后的规则块（栽过一次）。
   =========================================================== */

:root {
  /* 品牌色：橙色只做强调，大面积走中性色 */
  --bb-brand:        #e8590c;
  --bb-brand-hover:  #d24f08;
  --bb-brand-soft:   #fff1e8;
  --bb-brand-line:   #ffd9c2;

  /* 背景层次 */
  --bb-bg:           #ffffff;
  --bb-bg-sub:       #f7f8fa;
  --bb-bg-rail:      #f2f3f5;
  --bb-bg-hover:     #f2f3f5;
  --bb-bg-active:    #e8eaed;
  --bb-bg-chat:      #f5f6f7;

  /* 文字 */
  --bb-fg:           #1f2329;
  --bb-fg-2:         #646a73;
  --bb-fg-3:         #8f959e;
  --bb-fg-inv:       #ffffff;

  /* 线与形 */
  --bb-line:         #e5e6eb;
  --bb-line-soft:    #eff0f1;
  --bb-r-sm:         6px;
  --bb-r:            8px;
  --bb-r-lg:         12px;
  --bb-shadow:       0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --bb-shadow-sm:    0 1px 3px rgba(0,0,0,.08);

  /* 气泡 */
  --bb-bubble-recv:  #ffffff;
  --bb-bubble-send:  #e8590c;
  --bb-bubble-send-fg: #ffffff;

  --bb-danger:       #f53f3f;
  --bb-online:       #00b42a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bb-bg:         #17171a;
    --bb-bg-sub:     #1d1d20;
    --bb-bg-rail:    #202024;
    --bb-bg-hover:   #26262b;
    --bb-bg-active:  #2e2e34;
    --bb-bg-chat:    #141417;

    --bb-fg:         #e8e8ea;
    --bb-fg-2:       #a9a9b0;
    --bb-fg-3:       #7a7a82;

    --bb-line:       #2c2c32;
    --bb-line-soft:  #232328;

    --bb-bubble-recv:#26262b;
    --bb-brand-soft: #3a2113;
    --bb-brand-line: #5c3418;
    --bb-shadow:     0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.4);
    --bb-shadow-sm:  0 1px 3px rgba(0,0,0,.35);
  }
}

/* ---------- 全局排版 ---------- */
.wk-base, .wk-base input, .wk-base textarea, .wk-base button {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wk-base { color: var(--bb-fg); background: var(--bb-bg); }

/* 滚动条收敛 */
.wk-base *::-webkit-scrollbar { width: 8px; height: 8px; }
.wk-base *::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,.28); border-radius: 4px; border: 2px solid transparent;
  background-clip: padding-box;
}
.wk-base *::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,.45); background-clip: padding-box; }
.wk-base *::-webkit-scrollbar-track { background: transparent; }

/* ===========================================================
   1. 左侧导航栏
   =========================================================== */
.wk-layout-tab { width: 64px !important; }
.wk-main-sider {
  width: 64px !important;
  background: var(--bb-bg-rail);
  border-right: 1px solid var(--bb-line);
  box-sizing: border-box;
}
.wk-main-sider-content { padding-top: 14px; gap: 2px; }

.wk-main-sider-avatar {
  width: 40px !important; height: 40px !important;
  border-radius: var(--bb-r) !important;
  margin: 0 auto 16px !important;
  box-shadow: var(--bb-shadow-sm);
  overflow: hidden;
}
.wk-main-sider-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* 导航项：从 32px 裸图标 → 44px 可点区 + 悬停底色 */
.wk-main-sider-item {
  width: 44px !important; height: 44px !important;
  border-radius: var(--bb-r) !important;
  display: flex !important; align-items: center; justify-content: center;
  margin: 2px auto !important;
  position: relative;
  transition: background .14s ease;
  cursor: pointer;
}
/* 设置按钮上游是 position:absolute; bottom:30px —— 钉在侧栏底部。
   千万别改它的 position 和 margin，否则它会掉回文档流压住上面的图标。 */
.wk-main-sider-setting-box {
  width: 44px !important; height: 44px !important;
  border-radius: var(--bb-r) !important;
  display: flex !important; align-items: center; justify-content: center;
  left: 10px !important;
  transition: background .14s ease;
  cursor: pointer;
}
.wk-main-sider-setting {
  width: 44px !important; height: 44px !important;
  border-radius: var(--bb-r) !important;
  display: flex !important; align-items: center; justify-content: center;
  transition: background .14s ease;
  cursor: pointer;
}
.wk-main-sider-item:hover,
.wk-main-sider-setting-box:hover,
.wk-main-sider-setting:hover { background: var(--bb-bg-active); }

.wk-main-sider-item svg,
.wk-main-sider-item img,
.wk-main-sider-setting svg {
  width: 22px; height: 22px; opacity: .78;
}
.wk-main-sider-item:hover svg, .wk-main-sider-item:hover img { opacity: 1; }

/* 未读角标 */
.wk-main-sider-item-badge {
  min-width: 17px !important; height: 17px !important; padding: 0 5px;
  border-radius: 9px !important;
  background: var(--bb-danger) !important;
  color: #fff !important;
  font-size: 11px !important; line-height: 17px !important; font-weight: 600;
  box-shadow: 0 0 0 2px var(--bb-bg-rail);
  top: 2px !important; right: 2px !important;
}

/* 悬停文字提示（由 bibi-ui.js 写入 data-bb-tip） */
.wk-main-sider-item[data-bb-tip]:hover::after,
.wk-main-sider-setting-box[data-bb-tip]:hover::after {
  content: attr(data-bb-tip);
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  background: rgba(31,35,41,.92); color: #fff;
  font-size: 12px; line-height: 1; white-space: nowrap;
  padding: 7px 10px; border-radius: var(--bb-r-sm);
  pointer-events: none; z-index: 9999;
  box-shadow: var(--bb-shadow);
}

/* ===========================================================
   2. 会话列表
   =========================================================== */
.wk-layout-content-left { border-right: 1px solid var(--bb-line); }
.wk-chat-content-left, .wk-chat, .wk-chat-content { background: var(--bb-bg); }

/* 顶部：标题 + 搜索 */
.wk-chat-search {
  height: 58px !important;
  border-bottom: 1px solid var(--bb-line-soft);
  padding: 0 14px !important;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
}
.wk-chat-title {
  font-size: 17px !important; font-weight: 600 !important;
  color: var(--bb-fg) !important; letter-spacing: .2px;
}
.wk-chat-search-add {
  width: 30px !important; height: 30px !important;
  border-radius: var(--bb-r-sm) !important;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s ease;
}
.wk-chat-search-add:hover { background: var(--bb-bg-hover); }

/* 会话行：80px → 64px，信息密度提上去 */
.wk-conversationlist-item {
  height: 64px !important;
  padding: 0 8px !important;
  margin: 1px 6px !important;
  width: auto !important;
  border-radius: var(--bb-r) !important;
  box-sizing: border-box;
  transition: background .12s ease;
}
.wk-conversationlist-item:hover { background: var(--bb-bg-hover); }

/* 选中态：柔和高亮，不要整块橙 */          /* [覆盖补丁] */
.wk-conversationlist-item-selected,
.wk-conversationlist .wk-conversationlist-item-selected {
  background: var(--bb-brand-soft) !important;
  height: 64px !important;
  border-radius: var(--bb-r) !important;
  width: auto !important;
  box-shadow: inset 0 0 0 1px var(--bb-brand-line);
}
.wk-conversationlist-item-selected .wk-conversationlist-item-name { color: var(--bb-fg) !important; }
.wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg,
.wk-conversationlist-item-selected .wk-conversationlist-item-time { color: var(--bb-fg-2) !important; }

.wk-conversationlist-item-left { width: 56px !important; }
.wk-conversationlist-item-avatar-box,
.wk-conversationlist-item-avatar-box .wk-avatar {
  width: 42px !important; height: 42px !important;
  border-radius: var(--bb-r) !important; overflow: hidden;
}
.wk-conversationlist-item-avatar-box img,
.wk-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.wk-conversationlist-item-right { height: 64px !important; justify-content: center; gap: 3px; }
.wk-conversationlist-item-right-first-line,
.wk-conversationlist-item-right-second-line { height: auto !important; }

.wk-conversationlist-item-name {
  font-size: 14.5px !important; font-weight: 500 !important;
  color: var(--bb-fg) !important; line-height: 20px !important;
  height: auto !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-conversationlist-item-lastmsg {
  font-size: 12.5px !important; color: var(--bb-fg-3) !important;
  line-height: 18px !important; height: auto !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-conversationlist-item-time {
  font-size: 11.5px !important; color: var(--bb-fg-3) !important;
  height: auto !important; white-space: nowrap; flex: none;
}

/* 未读红点 */
.wk-conversationlist-item-reddot > * {
  background: var(--bb-danger) !important;
  min-width: 17px; height: 17px; border-radius: 9px;
  font-size: 11px; font-weight: 600; line-height: 17px; padding: 0 5px;
  color: #fff;
}

/* 在线状态点 */
.wk-onlinestatusbadge-content-tip { background: var(--bb-online) !important; box-shadow: 0 0 0 2px var(--bb-bg); }

/* ===========================================================
   3. 会话头部
   =========================================================== */
.wk-chat-conversation-header {
  height: 58px !important;
  border-bottom: 1px solid var(--bb-line-soft);
  background: var(--bb-bg);
  padding: 0 16px !important; box-sizing: border-box;
}
.wk-chat-conversation-header-channel-avatar,
.wk-chat-conversation-header-channel-avatar .wk-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: var(--bb-r-sm) !important; overflow: hidden;
}
.wk-chat-conversation-header-channel-info-name {
  font-size: 15.5px !important; font-weight: 600 !important; color: var(--bb-fg) !important;
}
.wk-chat-conversation-header-channel-info-tip {
  font-size: 12px !important; color: var(--bb-fg-3) !important;
}
.wk-chat-conversation-header-right-item {
  border-radius: var(--bb-r-sm); transition: background .14s ease;
}
.wk-chat-conversation-header-right-item:hover { background: var(--bb-bg-hover); }

/* ===========================================================
   4. 消息区
   =========================================================== */
.wk-conversation-content,
.wk-conversation-messages {
  background: var(--bb-bg-chat) !important;
  background-image: none !important;          /* 去掉廉价花纹 */
}
.wk-conversation-messages { padding: 8px 0 !important; }

.wk-message-item { padding: 2px 18px !important; }

/* 时间分割线 */
.wk-message-time { margin: 14px auto !important; }
.wk-message-time > * {
  font-size: 11.5px !important; color: var(--bb-fg-3) !important;
  background: rgba(127,127,127,.10); padding: 3px 10px; border-radius: 10px;
}
.wk-message-time-line1, .wk-message-time-line2 { background: none !important; }

/* 气泡 */
.wk-message-base-bubble {
  border-radius: var(--bb-r-lg) !important;
  padding: 8px 12px !important;
  box-shadow: var(--bb-shadow-sm);
  font-size: 14.5px; line-height: 1.55;
  max-width: min(560px, 64%);
  word-break: break-word;
}
.wk-message-base-recv .wk-message-base-bubble {
  background: var(--bb-bubble-recv) !important;
  color: var(--bb-fg) !important;
  border-top-left-radius: var(--bb-r-sm) !important;
}
.wk-message-base-send .wk-message-base-bubble {
  background: var(--bb-bubble-send) !important;
  color: var(--bb-bubble-send-fg) !important;
  border-top-right-radius: var(--bb-r-sm) !important;
}
.wk-message-base-send .wk-message-base-bubble a { color: #fff; text-decoration: underline; }

/* 头像 */
.wk-message-base .wk-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: var(--bb-r-sm) !important; overflow: hidden;
}

/* ---- 视频消息：修 0×0 ----
   根因在服务端（注入时 width/height 传 0），这里做 CSS 兜底，
   让任何宽高异常的视频都退回到一个合理尺寸而不是消失。 */
.wk-message-video,
.wk-message-video-content,
.wk-message-video-content-video {
  min-width: 240px !important;
  height: auto !important;
}
.wk-message-video video {
  display: block;
  width: 100%; max-width: 380px;
  min-width: 240px;
  height: auto; max-height: 420px;
  border-radius: var(--bb-r) !important;
  background: #000;
  object-fit: contain;
}
.wk-message-video-content { position: relative; }
.wk-message-video-content-time {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 11.5px; line-height: 1; padding: 4px 7px; border-radius: 4px;
  pointer-events: none;
}
/* 下载按钮：原来文字被挤成竖排 */
.bb-dl, .wk-message-video .bb-download, [class*="download"][class*="bibi"] {
  white-space: nowrap !important; writing-mode: horizontal-tb !important;
}

/* 空状态 */
.wk-chat-empty { background: var(--bb-bg-chat) !important; }

/* ===========================================================
   5. 底部输入区
   =========================================================== */
.wk-conversation-footer,
.wk-conversation-footer-content,
.wk-messageinput-box {
  background: var(--bb-bg) !important;
  border-top: 1px solid var(--bb-line-soft);
}

/* 工具栏溢出修复：actionbox 被钳在 332px，内容 398px */
.wk-messageinput-bar { width: 100% !important; overflow: visible !important; }
.wk-messageinput-actionbox,
.wk-messageinput-toolbar {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
}
.wk-conversation-chattoolbars {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 2px;
  width: 100% !important;
  overflow: visible !important;
  padding: 4px 10px !important;
  box-sizing: border-box;
}

/* 工具栏按钮：统一成一种风格（原来灰图标和橙色 pill 两种混排） */
.wk-conversation-chattoolbars-item,
.wk-emojitoolbar, .wk-imagetoolbar, .wk-iconclick {
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 8px !important;
  border-radius: var(--bb-r-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--bb-fg-2) !important;
  font-size: 12.5px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
  transition: background .14s ease, color .14s ease;
  cursor: pointer;
  box-shadow: none !important;
}
.wk-conversation-chattoolbars-item:hover,
.wk-emojitoolbar:hover, .wk-imagetoolbar:hover, .wk-iconclick:hover {
  background: var(--bb-bg-hover) !important;
  color: var(--bb-fg) !important;
}
.wk-conversation-chattoolbars-item svg,
.wk-emojitoolbar svg, .wk-imagetoolbar svg,
.wk-imagetoolbar-content-icon { width: 19px !important; height: 19px !important; opacity: .85; }

/* 输入框 */
.wk-messageinput-inputbox {
  padding: 2px 14px 10px !important;
  box-sizing: border-box;
}
.wk-messageinput-input__input,
.wk-messageinput-input__highlighter {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: var(--bb-fg) !important;
  caret-color: var(--bb-brand);
}
.wk-messageinput-input__input::placeholder { color: var(--bb-fg-3) !important; }
.wk-messageinput-input__input:focus { outline: none !important; }

/* 面板 / 弹层 */
.wk-emojipanel {
  border-radius: var(--bb-r-lg) !important;
  box-shadow: var(--bb-shadow) !important;
  border: 1px solid var(--bb-line);
  overflow: hidden;
  background: var(--bb-bg) !important;
}
.wk-emojipanel-tab { border-bottom: 1px solid var(--bb-line-soft); background: var(--bb-bg-sub) !important; }
.wk-emojipanel-tab-item-selected { background: var(--bb-bg) !important; color: var(--bb-brand) !important; }

/* 右键菜单 */
.wk-contextmenus {
  border-radius: var(--bb-r) !important;
  box-shadow: var(--bb-shadow) !important;
  border: 1px solid var(--bb-line);
  background: var(--bb-bg) !important;
  padding: 4px !important;
  overflow: hidden;
}
.wk-contextmenus > * { border-radius: var(--bb-r-sm); font-size: 13.5px; }
.wk-contextmenus > *:hover { background: var(--bb-bg-hover) !important; }

/* ===========================================================
   6. 右侧设置面板
   =========================================================== */
.wk-route, .wk-route-box, .wk-route-content { background: var(--bb-bg) !important; }
.wk-route-header {
  height: 58px !important;
  border-bottom: 1px solid var(--bb-line-soft);
}
.wk-route-header-title { font-size: 15.5px !important; font-weight: 600 !important; color: var(--bb-fg) !important; }
.wk-section, .wk-sections { background: var(--bb-bg) !important; }
.wk-list-item { border-radius: var(--bb-r-sm); transition: background .12s ease; }
.wk-list-item:hover { background: var(--bb-bg-hover); }
.wk-list-item-title { font-size: 14px !important; color: var(--bb-fg) !important; }
.wk-list-item-subtitle { font-size: 12.5px !important; color: var(--bb-fg-3) !important; }

/* ===========================================================
   7. 按钮通用
   =========================================================== */
.wk-base button:not([class*="wk-"]),
.bb-btn {
  border-radius: var(--bb-r-sm);
  font-size: 14px;
  transition: background .14s ease, opacity .14s ease;
}

/* ===========================================================
   8. 窄屏（手机网页）—— 只做不与 bibi-mobile.js 冲突的收敛
   =========================================================== */
@media (max-width: 768px) {
  .wk-conversationlist-item { height: 64px !important; margin: 1px 4px !important; }
  .wk-message-base-bubble { max-width: 78% !important; }
  .wk-message-video video { max-width: 72vw; min-width: 180px; }
  .wk-message-video, .wk-message-video-content, .wk-message-video-content-video { min-width: 180px !important; }
  .wk-conversation-chattoolbars { padding: 4px 6px !important; }
  .wk-conversation-chattoolbars-item { padding: 0 6px !important; }
}

/* ===========================================================
   v2 修正
   =========================================================== */

/* 聊天背景的花纹在 .wk-conversation 上，不在 content/messages 上 */
.wk-conversation {
  background-image: none !important;
  background-color: var(--bb-bg-chat) !important;
}

/* 输入框字体：原来是 monospace */
.wk-messageinput-input__input,
.wk-messageinput-input__highlighter,
.wk-messageinput-input__control {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Segoe UI", Roboto, sans-serif !important;
}

/* 工具栏文字：统一次级灰，hover 才上色 */
.wk-conversation-chattoolbars-item {
  color: var(--bb-fg-2) !important;
  gap: 4px;
}
.wk-conversation-chattoolbars-item:hover { color: var(--bb-brand) !important; }
.wk-conversation-chattoolbars-item * { color: inherit !important; }

/* 视频消息不要气泡底色（视频自己就是内容） */
.wk-message-base-bubble:has(.wk-message-video),
.wk-message-base-send .wk-message-base-bubble:has(.wk-message-video),
.wk-message-base-recv .wk-message-base-bubble:has(.wk-message-video) {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 下载按钮原来钉在 right:8 bottom:8，正好压住原生进度条 */
.wk-message-video .bibi-vdl {
  top: 8px !important;
  bottom: auto !important;
  right: 8px !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  border: none !important;
  opacity: 0;
  transition: opacity .15s ease;
}
.wk-message-video:hover .bibi-vdl { opacity: 1; }
/* 触屏没有 hover，常驻显示 */
@media (hover: none) {
  .wk-message-video .bibi-vdl { opacity: .85; }
}

/* 时长角标让位给下载按钮 */
.wk-message-video-content-time { left: 8px !important; right: auto !important; }

/* ===========================================================
   v3 修正：选中态的白字
   上游选中态是整块橙底，所以把文字写成白色 —— 而且是写在
   .wk-conversationlist-item-name 里层的 span 上，不是这个元素本身。
   底色改柔和之后白字就等于看不见，必须连子元素一起压。
   =========================================================== */
.wk-conversationlist-item-selected .wk-conversationlist-item-name,
.wk-conversationlist-item-selected .wk-conversationlist-item-name * {
  color: var(--bb-fg) !important;
}
.wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg,
.wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg *,
.wk-conversationlist-item-selected .wk-conversationlist-item-time,
.wk-conversationlist-item-selected .wk-conversationlist-item-time * {
  color: var(--bb-fg-2) !important;
}
/* 草稿标记原来是纯红 #f00 */
.wk-reminder { color: var(--bb-brand) !important; font-size: 12.5px; }

/* 消息里的发送者名字 */
.wk-message-base-name, .wk-message-base .wk-message-base-nickname {
  font-size: 12px !important; color: var(--bb-fg-3) !important; margin-bottom: 3px;
}

/* ===========================================================
   v4 修正：左栏图标是白色单色 SVG
   上游给的是 HomeTabSelected.svg 这类纯白图标（原本配深色侧栏），
   放在浅色侧栏上完全看不见 —— 看着像"空方块"。
   单色图标统一用 filter 压成中性灰，hover/选中再加深。
   =========================================================== */
.wk-main-sider-item img,
.wk-main-sider-setting img {
  filter: brightness(0) saturate(100%) invert(42%) !important;
  opacity: 1 !important;
  transition: filter .14s ease;
}
.wk-main-sider-item:hover img,
.wk-main-sider-setting:hover img {
  filter: brightness(0) saturate(100%) invert(18%) !important;
}
/* 汉堡那三条杠也是白的 */
.wk-icon-bar, .wk-sider-setting-position-re {
  background: var(--bb-fg-2) !important;
}

/* ===========================================================
   v5：手机端左栏收窄
   375px 屏上 64px 侧栏吃掉 17% 宽度。结构性地改成底部 tab bar
   风险较大（要判断当前在列表页还是聊天页），这一轮只收窄。
   =========================================================== */
@media (max-width: 767.98px) {
  .wk-layout-tab { width: 52px !important; }
  .wk-main-sider { width: 52px !important; }
  .wk-main-sider-avatar { width: 34px !important; height: 34px !important; margin-bottom: 12px !important; }
  .wk-main-sider-item,
  .wk-main-sider-setting-box,
  .wk-main-sider-setting { width: 40px !important; height: 40px !important; }
  .wk-main-sider-item img, .wk-main-sider-setting img { width: 20px; height: 20px; }

  .wk-conversationlist-item { margin: 1px 3px !important; padding: 0 6px !important; }
  .wk-conversationlist-item-left { width: 50px !important; }
  .wk-conversationlist-item-avatar-box,
  .wk-conversationlist-item-avatar-box .wk-avatar { width: 40px !important; height: 40px !important; }
  .wk-chat-search { height: 52px !important; padding: 0 10px !important; }

  /* 未读红点别压住文字 */
  .wk-conversationlist-item-reddot { flex: none; margin-left: 6px; }
}

/* ===========================================================
   v6：多选复选框一直挂在消息区左边
   .wk-message-base-checkBox 平时宽度是 0，但里面的 .wk-check 有 20px，
   直接溢出到容器外，看着就是两个凭空浮着的空心圆。
   裁掉溢出即可 —— 进多选模式时容器会撑开，复选框照常显示。
   =========================================================== */
.wk-message-base-checkBox { overflow: hidden !important; }

/* 消息区留出左右呼吸 */
.wk-message-item { padding-left: 14px !important; padding-right: 14px !important; }

/* ===========================================================
   v7：所有消息统一左对齐
   上游给「自己发的」写了 7 条镜像规则（右对齐 + 头像藏起来 + 名字右缩进
   + 复选框挪到右边），老板要求全部靠左，逐条还原成跟收到的一样。
   其中 .senderAvatar{display:none} 是「自己发的有时候看不到」的主因之一——
   没有头像做视觉锚点，一条消息孤零零贴在右边很容易被忽略。
   =========================================================== */
.wk-message-base-send {
  align-items: flex-start !important;
  margin-right: 0 !important;
  margin-left: 15px !important;
}
.wk-message-base-send .wk-message-base-box {
  flex-direction: row !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wk-message-base-send .senderName {
  padding-right: 0 !important;
  padding-left: 41px !important;
}
/* 自己发的也要有头像 */
.wk-message-base-send .senderAvatar { display: block !important; text-align: center; }
.wk-message-base-send .messageNameBox {
  flex-direction: row !important;
  justify-content: flex-start !important;
}
/* 多选框跟着回左边 */
.wk-message-base-send .checkBox { left: -30px !important; right: auto !important; }
.wk-message-base-send .wk-message-base-box.checked {
  margin-left: 30px !important; margin-right: 0 !important;
}

/* 气泡：两边都是深色字，自己发的用浅橙底区分，保证任何情况下都读得清 */
.wk-message-base-send .wk-message-base-bubble {
  background: var(--bb-brand-soft) !important;
  color: var(--bb-fg) !important;
  border-top-left-radius: var(--bb-r-sm) !important;
  border-top-right-radius: var(--bb-r-lg) !important;
  box-shadow: inset 0 0 0 1px var(--bb-brand-line), var(--bb-shadow-sm);
}
.wk-message-base-send .wk-message-base-bubble a { color: var(--bb-brand) !important; }
.wk-message-base-send .wk-message-base-bubble * { color: var(--bb-fg) !important; }

/* ===========================================================
   v8：左对齐的收尾
   =========================================================== */

/* 那几个"红色小三角"是气泡的尖角尾巴 .svgAppendix。
   气泡从右边挪到左边之后，尾巴还钉在右侧，变成孤零零飘着的小三角。
   现代 IM（飞书/Slack）气泡都不带尾巴，两边一起去掉最干净。 */
.svgAppendix { display: none !important; }

/* 自己发的消息 React 不渲染 .senderAvatar 节点，由 bibi-ui.js 补一个。
   这里只负责让它和对方的头像同尺寸同间距，左边缘才能真正对齐。 */
.senderAvatar {
  width: 34px !important; height: 34px !important;
  flex: 0 0 34px !important;
  margin-right: 8px !important;
  border-radius: var(--bb-r-sm) !important;
  overflow: hidden;
  align-self: flex-end;
}
.senderAvatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 气泡盒左右边距归零，左边缘由头像决定 */
.wk-message-base-bubble-box.send,
.wk-message-base-bubble-box.recv { margin-left: 0 !important; margin-right: 0 !important; }

/* 发送者名字：对方的是随机彩色，统一成次级灰 */
.textTitle {
  color: var(--bb-fg-3) !important;
  font-size: 12px !important;
  font-weight: 500;
  margin-bottom: 2px;
}
/* 气泡内的时间戳 */
.messageMeta, .messageTime { color: var(--bb-fg-3) !important; font-size: 11px !important; }
.wk-message-base-send .messageMeta, .wk-message-base-send .messageTime { color: var(--bb-fg-3) !important; }

/* ===========================================================
   v9：头像被气泡盖住 + 气泡被压窄
   两个都是「百分比/绝对定位相对谁算」的问题：

   1. .senderAvatar 是 position:absolute（上游靠 .checked 改 left 就能看出来）。
      我把气泡盒的 margin-left 清零后，气泡正好压在头像上，两者 x 都是 393。
      改成：消息盒 position:relative + padding-left 给头像留位，头像钉 left:0。

   2. 气泡 max-width 写的是 64%，而它的包含块是气泡盒（324px），
      不是聊天区 —— 所以所有气泡都被钳在 207px，十个字就折行。
      换成固定像素，再用气泡盒兜住上限。
   =========================================================== */
.wk-message-base-box {
  position: relative !important;
  padding-left: 42px !important;
  align-items: flex-end !important;
}
.senderAvatar {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  margin: 0 !important;
}
.wk-message-base-bubble-box.send,
.wk-message-base-bubble-box.recv {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: calc(100% - 8px) !important;
}
.wk-message-base-bubble {
  max-width: 560px !important;
  width: auto !important;
}
/* 多选打开时头像要跟着让位 */
.wk-message-base-check-open .wk-message-base-box { padding-left: 72px !important; }
.wk-message-base-check-open .senderAvatar { left: 30px !important; }

/* v10：气泡内时间戳用 --bb-fg-3 只有 2.73:1，小字不达标（WCAG AA 要 4.5:1），换深一档 */
.messageMeta, .messageTime,
.wk-message-base-send .messageMeta, .wk-message-base-send .messageTime {
  color: var(--bb-fg-2) !important;
  font-size: 11px !important;
  opacity: .85;
}