/*!
 * 移动端布局接管 —— 把 WKIM 左侧竖向 rail 改成微信式底部 Tab。
 *
 * 背景：WKIM 自带的 max-width:640px 规则里，「.wk-layout 转 column-reverse」
 * 和「.wk-layout-tab 横向化」两段被官方整段注释掉（见 main.*.css），
 * 于是窄屏下左侧 rail 仍占 64px 竖边，会话列表被迫压窄，
 * 图标看着就像串进了对话栏。本文件只做布局归位与微信风格配色，不碰任何脚本逻辑。
 */

@media screen and (max-width: 640px) {
  /* —— 1. 主框架：Tab 移到底部 —— */
  /* 只靠 order 决定上下：DOM 顺序是 tab 在前、content 在后，
     tab 给 order:2 即落到底部。不要再用 column-reverse，否则与 order 双重反转。 */
  .wk-layout {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .wk-layout-tab {
    width: 100% !important;
    height: var(--wk-height-layout-tab-min, 60px) !important;
    flex: 0 0 auto;
    order: 2;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
    background: #f7f7f7;
    border-top: 1px solid #e5e5e5;
  }
  .wk-layout-content {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  /* —— 2. 侧栏本体：竖排改横排 —— */
  .wk-main-sider {
    width: 100% !important;
    height: 100% !important;
    background: #f7f7f7 !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }
  .wk-main-sider-content {
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    height: 100% !important;
    width: 100% !important;
  }
  .wk-main-sider-avatar {
    margin-top: 0 !important;
    width: auto !important;
    height: 100% !important;
    flex: 1 1 0;
    min-width: 0;
  }
  .wk-main-sider-avatar img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }
  .wk-main-sider-item {
    margin-top: 0 !important;
    width: auto !important;
    height: 100% !important;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0 !important;
    background: transparent !important;
  }
  /* 原先绝对定位钉在侧栏底部，横排后会压在图标上 */
  .wk-main-sider-setting-box {
    position: static !important;
    bottom: auto !important;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* —— 3. 图标与选中态：微信绿 —— */
  .wk-main-sider-item img {
    width: 24px !important;
    height: 24px !important;
    filter: grayscale(1) brightness(0.45);
  }
  .wk-main-sider-item.selected,
  .wk-main-sider-item.wk-main-sider-item-selected {
    background: transparent !important;
    position: relative;
  }
  .wk-main-sider-item.selected img,
  .wk-main-sider-item.wk-main-sider-item-selected img {
    /* 先把图标压成纯黑再染成微信绿 #07c160 */
    filter: brightness(0) saturate(100%) invert(57%) sepia(72%) saturate(1900%)
      hue-rotate(93deg) brightness(97%) contrast(92%);
  }
  .wk-main-sider-item.selected::after,
  .wk-main-sider-item.wk-main-sider-item-selected::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 1px;
    background: #07c160;
  }

  /* —— 4. 会话列表：微信尺寸与节奏 —— */
  .wk-conversationlist,
  .wk-conversationlist-content {
    background: #fff !important;
  }
  .wk-conversationlist-item {
    min-height: 64px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .wk-conversationlist-item img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
  }

  /* —— 5. 聊天页：微信底色与安全区 —— */
  .wk-chat-content,
  .wk-message-list,
  .wk-chat-messages {
    background: #ededed !important;
  }
  .wk-chat-content-right,
  .wk-layout-content-right {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .wk-message-base-bubble {
    max-width: calc(100vw - 96px) !important;
  }

  /* —— 6. 触控可用性 —— */
  /* iOS 上字号小于 16px 会在聚焦时自动放大页面 */
  .wk-inputedit,
  .wk-inputedit textarea,
  .wk-message-input textarea,
  input[type='text'],
  input[type='search'],
  input[type='password'] {
    font-size: 16px !important;
  }
  /* 可点区域一律不低于 44px，避免误触 */
  .wk-contextmenus li,
  .kefu-gm-menu button,
  .kefu-conv-del-menu button {
    min-height: 44px;
    line-height: 44px;
  }
  /* 弹层留出刘海与底栏空间 */
  .kefu-dlg-mask,
  .kefu-gm-member-page,
  .kefu-tb-page,
  .kefu-fold-page {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* 窄横屏（如手机横放）：底部 Tab 再压扁一点 */
@media screen and (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .wk-layout-tab {
    height: 48px !important;
  }
}
/* ============================================================
 * 移动端收尾：rail 移到底部之后，原先为它让位的固定偏移全部失效。
 * .kefu-fold-page / .kefu-workspace 原本是 left:68px（窄屏 56px），
 * 那是给左侧 64px rail 留的空间；现在 rail 在底部，左偏移必须归零，
 * 同时底部要避开 60px 的 Tab 栏（含 iPhone 安全区）。
 * ============================================================ */
@media screen and (max-width: 640px) {
  .kefu-fold-page,
  .kefu-workspace {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .kefu-fold-page {
    width: auto !important;
    border-right: 0 !important;
  }

  /* 会话列表向微信看齐：灰底标题栏 + 64px 行高 + 44px 圆角头像 */
  .kefu-fold-bar {
    height: 48px;
    background: #ededed;
    border-bottom: 1px solid #dcdcdc;
    font-size: 15px;
  }
  .kefu-fold-item {
    height: 64px;
    padding: 0 16px;
  }
  .kefu-fold-item img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
  }
  .kefu-fold-body {
    background: #fff;
    -webkit-overflow-scrolling: touch;
  }

  /* 工具箱侧栏在窄屏已改为纵向堆叠，补足行高与触控区 */
  .kefu-tb-chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kefu-tb-tab {
    min-height: 44px;
  }
}
/* ============================================================
 * 暗色模式适配。
 *
 * 本文件前面的亮色值里有 4 处带 !important（#f7f7f7 / #fff / #ededed），
 * 由于 kefu-mobile.css 加载在 kefu-theme.css 之后，这些 !important
 * 会把 theme 里已有的 body[theme-mode="dark"] 规则整段盖掉，
 * 于是暗色下底部 Tab 和聊天背景仍是亮色。这里逐条给出暗色对应，
 * 颜色一律取自项目既有变量（--kf-*），不另造色板。
 * ============================================================ */
@media screen and (max-width: 640px) {
  /* —— 底部 Tab：沿用侧栏原本的墨青底，保持品牌一致 —— */
  body[theme-mode='dark'] .wk-layout-tab {
    background: var(--kf-ink);
    border-top-color: var(--kf-line);
  }
  body[theme-mode='dark'] .wk-main-sider {
    background: var(--kf-ink) !important;
  }

  /* 暗色下不染绿：未选中压暗、选中提亮，另用青绿指示条表达激活，
     比在暗底上强行染一个饱和绿更耐看，也不受图标原色干扰 */
  body[theme-mode='dark'] .wk-main-sider-item img {
    filter: grayscale(1) brightness(0.62);
  }
  body[theme-mode='dark'] .wk-main-sider-item.selected img,
  body[theme-mode='dark'] .wk-main-sider-item.wk-main-sider-item-selected img {
    filter: grayscale(1) brightness(1.9);
  }
  body[theme-mode='dark'] .wk-main-sider-item.selected::after,
  body[theme-mode='dark'] .wk-main-sider-item.wk-main-sider-item-selected::after {
    background: var(--kf-live);
  }
  body[theme-mode='dark'] .wk-main-sider-avatar img {
    box-shadow: 0 0 0 1px var(--kf-line) !important;
  }

  /* —— 会话列表 —— */
  body[theme-mode='dark'] .kefu-fold-bar {
    background: var(--kf-slate);
    border-bottom-color: var(--kf-line);
    color: var(--kf-text);
  }
  body[theme-mode='dark'] .kefu-fold-body {
    background: var(--kf-desk);
  }
  body[theme-mode='dark'] .kefu-fold-item:hover {
    background: var(--kf-lift);
  }
  body[theme-mode='dark'] .wk-conversationlist,
  body[theme-mode='dark'] .wk-conversationlist-content {
    background: var(--kf-desk) !important;
  }

  /* —— 聊天区 —— */
  body[theme-mode='dark'] .wk-chat-content,
  body[theme-mode='dark'] .wk-message-list,
  body[theme-mode='dark'] .wk-chat-messages {
    background: var(--kf-desk) !important;
  }

  /* —— 弹层与菜单：亮色写死了 44px 行高，暗色只需补色 —— */
  body[theme-mode='dark'] .wk-contextmenus,
  body[theme-mode='dark'] .wk-contextmenus ul {
    background: var(--kf-slate) !important;
    border-color: var(--kf-line) !important;
  }
  body[theme-mode='dark'] .wk-contextmenus li {
    color: var(--kf-text) !important;
  }
  body[theme-mode='dark'] .wk-contextmenus li:hover {
    background: var(--kf-lift) !important;
  }
}
/* ============================================================
 * 自建面板：移动端适配 + 暗色补齐
 *
 * 上一轮只处理了主框架（rail / 会话列表 / 聊天区），而积分、我的资料、
 * 语音浮层、群成员管理等自建页面仍旧零 media query：
 *   .kefu-ck-mask 用 padding:24px 居中，.kefu-ck-panel 用
 *   max-height: calc(100vh - 80px) —— 移动端 100vh 含地址栏，内容会被截断。
 * 暗色侧则漏了 kefu-my-profile-bd 与 kefu-voice-mask-card（各自 0 条 dark）。
 * 颜色一律取项目既有变量（--kf-*）。
 * ============================================================ */
@media screen and (max-width: 640px) {
  /* —— 居中弹窗改底部上滑面板 —— */
  .kefu-ck-mask,
  .kefu-dlg-mask,
  .kefu-my-profile-mask {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .kefu-ck-panel,
  .kefu-dlg,
  .kefu-my-profile-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 86vh !important;
    max-height: 86dvh !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .kefu-ck-body,
  .kefu-my-profile-bd,
  .kefu-dlg-bd,
  .kefu-gm-page-body {
    -webkit-overflow-scrolling: touch;
  }

  /* —— 语音 / 视频浮层：居中卡片留边，别贴屏 —— */
  .kefu-voice-mask-card,
  .kefu-video-dialog-card {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
  }

  /* —— 全屏页类面板：避开底部 60px Tab 与安全区 —— */
  .kefu-gm-page,
  .kefu-gfold {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* —— 自绘菜单：长按位置常贴边，限制宽度避免溢出 —— */
  .kefu-gm-menu,
  .kefu-conv-del-menu,
  .kefu-gfold-menu {
    max-width: calc(100vw - 24px);
  }
}

/* —— 暗色补齐：原先完全没有 dark 规则的两处 —— */
body[theme-mode='dark'] .kefu-my-profile-bd {
  background: var(--kf-desk);
  color: var(--kf-text);
}
body[theme-mode='dark'] .kefu-voice-mask-card {
  background: var(--kf-slate);
  color: var(--kf-text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
body[theme-mode='dark'] .kefu-voice-mask-tip,
body[theme-mode='dark'] .kefu-voice-mask-time {
  color: var(--kf-mute);
}
/* 暗色下遮罩压深一档，弹窗层级别更清楚 */
body[theme-mode='dark'] .kefu-my-profile-mask,
body[theme-mode='dark'] .kefu-dlg-mask,
body[theme-mode='dark'] .kefu-ck-mask,
body[theme-mode='dark'] .kefu-voice-mask {
  background: rgba(0, 0, 0, 0.62);
}
/* 会话折叠页内层 */
body[theme-mode='dark'] .kefu-fold-item {
  color: var(--kf-text);
}
body[theme-mode='dark'] .kefu-fold-empty {
  color: var(--kf-mute);
}
body[theme-mode='dark'] .kefu-gm-page-body,
body[theme-mode='dark'] .kefu-ck-body,
body[theme-mode='dark'] .kefu-my-profile-bd {
  background: var(--kf-desk) !important;
}
/* ============================================================
 * 积分面板：小屏字号与触控区
 * 7 列格子（repeat(7,1fr)）保留 —— 那正是「7 天周期」的语义，
 * 改成 4 列会让用户看不出是七天。只压缩间距与字号。
 * ============================================================ */
@media screen and (max-width: 640px) {
  .kefu-ck-days { gap: 4px; }
  .kefu-ck-day { padding: 8px 0 7px; }
  .kefu-ck-balance { padding: 18px 14px 16px; }
  .kefu-ck-balance b { font-size: 28px; }
  .kefu-ck-sec { padding: 14px; }
  /* 触控区补到 44px，原 38px 在手机上偏难点中 */
  .kefu-ck-btn { height: 44px !important; font-size: 15px; }
  .kefu-ck-row { padding: 12px 0; min-height: 44px; }
  .kefu-ck-tip { font-size: 12px; }
}

/* 暗色下明细行的分隔线与文字（原 dark 只覆盖了 row-name） */
body[theme-mode='dark'] .kefu-ck-row { border-bottom-color: #2c3036; }
body[theme-mode='dark'] .kefu-ck-row-time,
body[theme-mode='dark'] .kefu-ck-tip,
body[theme-mode='dark'] .kefu-ck-balance i,
body[theme-mode='dark'] .kefu-ck-balance em {
  color: var(--kf-mute);
}
body[theme-mode='dark'] .kefu-ck-empty {
  color: var(--kf-mute);
}
/* ============================================================
 * 高度链：html/body/#root 必须逐级 100%，否则 .wk-layout 的
 * height:100dvh 与固定定位面板在移动端会出现底部留白或截断。
 * ============================================================ */
@media screen and (max-width: 640px) {
  html,
  body {
    height: 100%;
    margin: 0;
    -webkit-text-size-adjust: 100%;
  }
  #root {
    height: 100%;
  }
  /* 长按菜单弹出时抑制 iOS 的文本选择与放大镜 */
  .kefu-gm-menu,
  .kefu-conv-del-menu,
  .kefu-gfold-menu,
  .wk-contextmenus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}
/* ============================================================
 * 修正轮：两处「特异性被压」+ 一处设计错误
 *
 * 1) .wk-main-sider 宽度
 *    kefu-theme.css 用 body[theme-mode="dark"] .wk-main-sider 声明 width:68px!important，
 *    特异性 (0,2,1)；本文件原写 .wk-main-sider{width:100%!important} 只有 (0,1,0)。
 *    两者都带 !important 时高特异性胜出 —— 于是亮色正常、暗色被打回 68px，
 *    表现就是右侧留一条深色空带、底部 Tab 图标全挤在左边。
 *
 * 2) 会话列表底色
 *    kefu-surface.css 用 body:not([theme-mode="dark"]) .wk-conversationlist
 *    声明 background:#ebebeb!important，同为 (0,2,1)；单类选择器压不过，
 *    所以「微信白底」从未生效，列表一直是灰的。
 *
 * 3) 图标不为选中态染色
 *    侧栏图标由宿主按 selectedIcon 动态提供（非固定 img），且 filter/opacity
 *    加在父级会连同未读红标一起处理，子元素无法豁免。改为淡绿底 + 指示条。
 * ============================================================ */
@media screen and (max-width: 640px) {
  /* —— 1. 暗色下补回侧栏尺寸（同等特异性 + 后加载） —— */
  body[theme-mode='dark'] .wk-main-sider {
    width: 100% !important;
    height: 100% !important;
    background: var(--kf-ink) !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }

  /* —— 2. 会话列表白底；顶部栏保留微信灰，与列表区分层次 —— */
  body:not([theme-mode='dark']) .wk-conversationlist,
  body:not([theme-mode='dark']) .wk-conversationlist-content {
    background: #fff !important;
  }
  body:not([theme-mode='dark']) .wk-chat-title,
  body:not([theme-mode='dark']) .wk-chat-search {
    background: #ededed !important;
    border-color: #d6d6d6 !important;
    box-shadow: none !important;
  }
  /* 会话项分隔线：微信是整行通铺的细分隔，且没有卡片阴影 */
  body:not([theme-mode='dark']) .wk-conversationlist-item {
    background: transparent !important;
    border-bottom: 1px solid #f0f0f0;
  }

  /* —— 3. 撤销图标染色，改淡绿底表达选中 —— */
  .wk-main-sider-item img {
    filter: none !important;
  }
  .wk-main-sider-item.selected,
  .wk-main-sider-item.wk-main-sider-item-selected {
    background: rgba(7, 193, 96, 0.12) !important;
    border-radius: 10px !important;
  }
  body[theme-mode='dark'] .wk-main-sider-item.selected,
  body[theme-mode='dark'] .wk-main-sider-item.wk-main-sider-item-selected {
    background: rgba(94, 234, 212, 0.16) !important;
  }
  /* 未读红标保持原色，不被任何滤镜影响 */
  .wk-main-sider-item-badge {
    filter: none !important;
    opacity: 1 !important;
  }
}
/* ============================================================
 * 暗色色系统一。
 * kefu-surface.css 把顶部栏定为中性 #191919，而会话列表用 --kf-desk(#121722)
 * 带蓝调，body 又是 #111 —— 三套黑并排会显脏。统一到项目的墨青色板。
 * ============================================================ */
@media screen and (max-width: 640px) {
  body[theme-mode='dark'] .wk-chat-title,
  body[theme-mode='dark'] .wk-chat-search {
    background: var(--kf-slate) !important;
    color: var(--kf-text) !important;
    border-color: var(--kf-line) !important;
    box-shadow: none !important;
  }
}
body[theme-mode='dark'] {
  background: var(--kf-desk) !important;
}
/* ============================================================
 * 底部 Tab 可读性修正。
 *
 * 上一轮我犯了方向性错误：WKIM 侧栏用 HomeTabSelected.svg / ContactsTab.svg
 * 两套独立 SVG 表达选中，设计语言是蓝色；我却给选中项加了微信绿底 + 青绿指示条，
 * 蓝图标配绿底互为干扰，反而更难辨认。这里撤掉自造配色，跟随宿主体系。
 *
 * 另外 .kefu-rail-item（我自建的两个入口）写死了 color:#b7c2d6 —— 那是浅蓝灰，
 * 只在暗色下成立，亮色下几乎看不见；且 width/margin-top/border-radius 都是
 * 竖排时代的残留，横排后全部错位。一并按 WKIM 原生图标的尺寸与配色对齐。
 * ============================================================ */
@media screen and (max-width: 640px) {
  /* —— 1. 撤销自造选中态，交还给宿主的两套图标 —— */
  .wk-main-sider-item.selected,
  .wk-main-sider-item.wk-main-sider-item-selected {
    background: transparent !important;
    border-radius: 0 !important;
  }
  .wk-main-sider-item.selected::after,
  .wk-main-sider-item.wk-main-sider-item-selected::after {
    display: none !important;
  }
  body[theme-mode='dark'] .wk-main-sider-item.selected,
  body[theme-mode='dark'] .wk-main-sider-item.wk-main-sider-item-selected {
    background: transparent !important;
  }

  /* —— 2. 自建入口对齐原生图标：同尺寸、无底色、弹性等分 —— */
  .kefu-rail-item {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    gap: 2px;
    border-radius: 0 !important;
    background: transparent !important;
    /* 亮色：中性灰，保证浅底上够清楚 */
    color: #6b7280;
  }
  .kefu-rail-item svg {
    width: 24px !important;
    height: 24px !important;
  }
  .kefu-rail-item span {
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .kefu-rail-item:hover {
    background: transparent !important;
    color: #6b7280;
  }
  /* 选中态跟随 WKIM 的蓝色体系 */
  .kefu-rail-item.is-on {
    background: transparent !important;
    color: var(--wk-color-theme, #2d8cf0) !important;
  }

  /* —— 3. 暗色下提亮，避免深底上看不清 —— */
  body[theme-mode='dark'] .kefu-rail-item {
    color: #c8d3e2;
  }
  body[theme-mode='dark'] .kefu-rail-item:hover {
    color: #e8eef6;
  }
  body[theme-mode='dark'] .kefu-rail-item.is-on {
    color: #5aa9ff !important;
  }
  /* 宿主图标在暗色下若偏暗，统一提亮一档 */
  body[theme-mode='dark'] .wk-main-sider-item img {
    filter: brightness(1.15);
  }
}
/* ============================================================
 * 自建 rail 入口的前景色修正（覆盖上一节的不足）。
 *
 * 实测 getComputedStyle 结果：我那条 .kefu-rail-item{color:#6b7280}
 * 是 (0,1,0)，压不过宿主继承下来的 color:#fff —— 于是内联
 * <svg fill="currentColor"> 渲染成纯白，在浅灰底上完全看不见。
 * 改用 ID 选择器 (1,0,0) + !important 强制，两个入口一起覆盖。
 * ============================================================ */
@media screen and (max-width: 640px) {
  .kefu-rail-item,
  #kefu-checkin-rail,
  #kefu-rail-toolbox {
    color: #5b6472 !important;
  }
  .kefu-rail-item svg,
  #kefu-checkin-rail svg,
  #kefu-rail-toolbox svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
    stroke: currentColor;
  }
  .kefu-rail-item span,
  #kefu-checkin-rail span,
  #kefu-rail-toolbox span {
    color: inherit !important;
  }
  /* 选中态用宿主的蓝色体系，不再自造青绿 */
  .kefu-rail-item.is-on,
  #kefu-checkin-rail.is-on,
  #kefu-rail-toolbox.is-on {
    color: #2d8cf0 !important;
    background: transparent !important;
  }

  /* 暗色下提亮，深底才看得清 */
  body[theme-mode='dark'] .kefu-rail-item,
  body[theme-mode='dark'] #kefu-checkin-rail,
  body[theme-mode='dark'] #kefu-rail-toolbox {
    color: #c8d3e2 !important;
  }
  body[theme-mode='dark'] .kefu-rail-item.is-on,
  body[theme-mode='dark'] #kefu-checkin-rail.is-on,
  body[theme-mode='dark'] #kefu-rail-toolbox.is-on {
    color: #5aa9ff !important;
  }
}
/* ============================================================
 * 聊天页打开时隐藏底部 Tab。
 *
 * 实测层级：.wk-layout-content-right 是 position:fixed，而 .wk-layout-tab
 * 是 static + z-index:auto —— fixed 必然盖住 static，所以聊天页全屏时
 * Tab 栏整体被覆盖，唯独自建的内联 <svg> 入口会漏在聊天界面之上
 * （截图里聊天页底部浮着那颗「积分」星星就是这么来的）。
 *
 * 微信在会话页同样不显示底部 Tab，所以直接整体隐藏，比逐个压制更彻底。
 * :has() 需要 iOS 15.4+ / Chrome 105+，低于此版本时退化为原状，不会更糟。
 * ============================================================ */
@media screen and (max-width: 640px) {
  .wk-layout:has(> .wk-layout-content.wk-layout-open) > .wk-layout-tab {
    display: none !important;
  }
}
/* ============================================================
 * 会话项「挤」的修正 —— 根因是我自己加的 padding。
 *
 * 原生结构：.wk-conversationlist-item 高 72px、padding:0，
 * 其子元素 .wk-conversationlist-item-content 是 height:100%，
 * 靠 .wk-conversationlist-item-right 的 flex column + justify-content:center 居中。
 *
 * 我上一轮给 item 加了 padding-top/bottom:10px，content 这个 100% 高度
 * 立刻被扣掉 20px；暗色下又叠了 theme 里 content 的 12px 上下 padding，
 * 再扣 24px —— 两行文字最后只剩 48px，于是发挤。
 * 另外我加的 border-bottom 与原生 ::after 分隔线是重复的，一并撤掉。
 * ============================================================ */
@media screen and (max-width: 640px) {
  .wk-conversationlist-item {
    min-height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* 分隔线交还原生的 content::after，避免双线 */
  body:not([theme-mode='dark']) .wk-conversationlist-item {
    border-bottom: 0 !important;
  }
  /* 暗色下 content 的 12px 上下 padding 在 72px 里过于奢侈，收敛到原生节奏 */
  body[theme-mode='dark'] .wk-conversationlist-item-content {
    padding: 8px 14px !important;
  }
  /* 名称行与预览行之间给出呼吸感 */
  .wk-conversationlist-item-right-second-line {
    margin-top: 3px;
  }
  .wk-conversationlist-item-lastmsg {
    line-height: 1.35;
  }
  /* 暗色下预览文字提亮一档，和名称拉开层次而不是糊在一起 */
  body[theme-mode='dark'] .wk-conversationlist-item-lastmsg {
    color: #9aa5b8 !important;
  }
  /* 时间不再顶到上沿 */
  .wk-conversationlist-item-time {
    align-self: flex-start;
    margin-top: 1px;
  }
}