/* 九派IM 桌面端样式 · 三栏布局(图标栏/会话列表/聊天区) */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --rail-bg: #26303f;
  --rail-fg: #9aa5b5;
  --rail-active: #ffffff;
  --accent: #2e6cf6;
  --accent-weak: #e8f0ff;
  --sb-bg: #f6f7f9;
  --line: #e5e7eb;
  --txt: #1f2329;
  --txt2: #8a919f;
  --bubble-own: #d6e4ff;
  --bubble-other: #f2f3f5;
  --danger: #e5484d;
}
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 14px; color: var(--txt); background: #fff;
  user-select: none;
}
.hidden { display: none !important; }

/* ---------------- 标题栏 ---------------- */
#titlebar {
  height: 32px; display: flex; align-items: center; justify-content: space-between;
  background: var(--rail-bg); color: #b9c2d0; font-size: 12px;
  -webkit-app-region: drag; position: relative; z-index: 50;
}
.tb-title { padding-left: 12px; letter-spacing: 1px; }
.tb-controls { display: flex; -webkit-app-region: no-drag; }
.tb-btn {
  width: 42px; height: 32px; border: none; background: transparent; color: #b9c2d0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tb-btn:hover { background: rgba(255,255,255,.12); }
.tb-close:hover { background: var(--danger); color: #fff; }
body.no-frame-controls .tb-controls { display: none; }

/* ---------------- 登录页 ---------------- */
#loginView {
  height: calc(100% - 32px); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef3fc 0%, #f8fafd 60%, #eef6ff 100%);
}
.login-card {
  width: 360px; background: #fff; border-radius: 14px; padding: 40px 36px 32px;
  box-shadow: 0 12px 40px rgba(30,60,120,.12); text-align: center;
}
.login-logo {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), #6c9bff);
  color: #fff; font-size: 34px; font-weight: 700; line-height: 64px;
}
img.login-logo { background: none; border-radius: 0; display: block; object-fit: contain; }
.login-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.login-sub { font-size: 12px; color: var(--txt2); margin-bottom: 26px; }
.login-input {
  width: 100%; height: 42px; margin-bottom: 14px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px; outline: none;
}
.login-input:focus { border-color: var(--accent); }
.login-err { color: var(--danger); font-size: 12px; min-height: 18px; margin-bottom: 6px; }
.login-btn {
  width: 100%; height: 42px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 15px; letter-spacing: 4px;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn:disabled { opacity: .6; cursor: default; }
.login-btn-ding {
  margin-top: 10px; letter-spacing: 1px;
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
}
.login-btn-ding:hover { background: rgba(22, 119, 255, .12); filter: none; }
.login-server-toggle { margin-top: 16px; font-size: 12px; color: var(--txt2); cursor: pointer; }
.login-server-toggle:hover { color: var(--accent); }

/* ---------------- 主布局 ---------------- */
#mainView { height: calc(100% - 32px); display: flex; }

/* 图标栏 */
#rail {
  width: 64px; background: var(--rail-bg); display: flex; flex-direction: column;
  align-items: center; padding: 14px 0 10px; gap: 6px;
}
#railAvatar { margin-bottom: 10px; cursor: pointer; }
.rail-item {
  width: 52px; padding: 7px 0 5px; border-radius: 8px; cursor: pointer; text-align: center;
  color: var(--rail-fg); position: relative;
}
.rail-item svg { width: 22px; height: 22px; display: block; margin: 0 auto 2px; }
.rail-item span { font-size: 11px; }
.rail-item:hover { color: #d7dde8; background: rgba(255,255,255,.07); }
.rail-item.active { color: var(--rail-active); background: rgba(255,255,255,.14); }
.rail-spacer { flex: 1; }
.badge {
  position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: 8px; font-size: 10px;
  line-height: 16px; font-style: normal; text-align: center;
}

/* 头像 */
.avatar {
  border-radius: 50%; color: #fff; font-weight: 500; text-align: center;
  flex-shrink: 0; overflow: hidden; background-size: cover; background-position: center;
}
.av-32 { width: 34px; height: 34px; line-height: 34px; font-size: 13px; }
.av-40 { width: 40px; height: 40px; line-height: 40px; font-size: 14px; }
.av-36 { width: 36px; height: 36px; line-height: 36px; font-size: 13px; }
.av-sq { border-radius: 8px; }

/* ---------------- 中栏 ---------------- */
#sidebar { width: 268px; background: var(--sb-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
#sidebarChat, #sidebarContacts { display: flex; flex-direction: column; height: 100%; }
.sb-head { display: flex; gap: 8px; padding: 12px 12px 8px; position: relative; }
.search-box {
  flex: 1; display: flex; align-items: center; gap: 6px; background: #ebedf0;
  border-radius: 6px; padding: 0 10px; color: var(--txt2); height: 30px;
}
.search-box input { border: none; outline: none; background: transparent; width: 100%; font-size: 13px; }
.plus-btn {
  width: 30px; height: 30px; border: none; border-radius: 6px; background: #ebedf0;
  font-size: 18px; color: #51565e; cursor: pointer; line-height: 1;
}
.plus-btn:hover { background: #e0e3e8; }
.pop-menu {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 5px; z-index: 300; min-width: 130px;
}
#newChatMenu { top: 44px; right: 10px; }
.pop-item { padding: 8px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pop-item:hover { background: #f2f4f7; }
.pop-item.danger { color: var(--danger); }

#convList, #contactList { flex: 1; overflow-y: auto; padding: 2px 6px 10px; }

/* 会话条目 */
.conv-item {
  display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  align-items: center; position: relative;
}
.conv-item:hover { background: #ececf0; }
.conv-item.active { background: var(--accent-weak); }
.conv-item.pinned { background: #eef1f5; }
.conv-item.pinned.active { background: var(--accent-weak); }
.conv-mid { flex: 1; min-width: 0; }
.conv-name { display: flex; align-items: center; gap: 4px; }
.conv-name b { font-weight: 500; font-size: var(--msg-fs, 14px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-preview {
  font-size: var(--msg-fs-sub, 12px); color: var(--txt2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-top: 3px;
}
.conv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.conv-time { font-size: 11px; color: #b4bac4; }
.conv-unread {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger);
  color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.conv-unread.muted-dot { background: #c3c9d4; }
.mute-ico { color: #b4bac4; font-size: 11px; }
.pin-ico { color: var(--accent); font-size: 10px; }

/* 通讯录 */
.dept-group { margin: 4px 4px 2px; }
.dept-title {
  font-size: 12px; color: var(--txt2); padding: 8px 8px 4px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
.dept-title .arr { transition: transform .15s; font-size: 10px; }
.dept-group.closed .arr { transform: rotate(-90deg); }
.dept-group.closed .contact-item { display: none; }
.contact-item {
  display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; cursor: pointer;
}
.contact-item:hover { background: #ececf0; }
.contact-name { font-size: 14px; }
.contact-dept { font-size: 11px; color: var(--txt2); margin-top: 2px; }
.online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34c759; margin-left: auto;
}

/* ---------------- 聊天区 ---------------- */
#chatPane { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#chatEmpty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #b9c0cc; gap: 14px;
}
.empty-logo {
  width: 72px; height: 72px; border-radius: 18px; background: #eef1f6; color: #c3cbd9;
  font-size: 38px; font-weight: 700; line-height: 72px; text-align: center;
}
#chatMain { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#chatHeader {
  height: 56px; border-bottom: 1px solid var(--line); display: flex; align-items: center;
  justify-content: space-between; padding: 0 18px;
}
#chatTitle { font-size: 16px; font-weight: 600; }
#chatSub { font-size: 12px; color: var(--txt2); margin-top: 2px; }
.ch-actions { display: flex; gap: 6px; }
.icon-btn {
  border: none; background: transparent; cursor: pointer; color: #51565e;
  width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.icon-btn:hover { background: #f0f2f5; }

#msgList { flex: 1; overflow-y: auto; padding: 14px 18px; background: #fff; }
.msg-day { text-align: center; margin: 14px 0 10px; font-size: 11px; color: #b4bac4; }
.msg-sys { text-align: center; margin: 8px 0; font-size: 12px; color: var(--txt2); }
.msg-row { display: flex; gap: 10px; margin-bottom: 14px; }
.msg-row.own { flex-direction: row-reverse; }
.msg-body { max-width: 62%; min-width: 0; }
.msg-meta { font-size: 12px; color: var(--txt2); margin-bottom: 4px; display: flex; gap: 8px; }
.msg-row.own .msg-meta { justify-content: flex-end; }
.bubble {
  padding: 9px 12px; border-radius: 10px; background: var(--bubble-other);
  white-space: pre-wrap; word-break: break-word; font-size: var(--msg-fs, 14px); line-height: 1.55;
  user-select: text; position: relative;
}
.msg-row.own .bubble { background: var(--bubble-own); }
.bubble.recalled-b { color: var(--txt2); font-style: italic; }
.bubble img.msg-img { max-width: 260px; max-height: 280px; border-radius: 6px; display: block; cursor: zoom-in; }
.bubble.img-b { padding: 4px; background: transparent; }
.reply-quote {
  border-left: 3px solid #c6cedb; padding: 2px 8px; margin-bottom: 6px; font-size: 12px;
  color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.file-card {
  display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line);
  padding: 10px 12px; border-radius: 8px; cursor: pointer; min-width: 200px;
}
.file-ico {
  width: 36px; height: 36px; border-radius: 8px; background: var(--accent-weak); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.file-name { font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: 11px; color: var(--txt2); margin-top: 2px; }
.msg-state { font-size: 11px; color: #b4bac4; margin-top: 3px; text-align: right; }
.msg-state.read { color: var(--accent); }

/* 回复栏 */
#replyBar {
  display: flex; align-items: center; gap: 10px; padding: 6px 18px; background: #f6f7f9;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--txt2);
}
#replyBarText { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#replyBarClose { cursor: pointer; padding: 2px 6px; }

/* 输入区 */
#inputArea { border-top: 1px solid var(--line); padding: 6px 12px 10px; position: relative; }
#inputToolbar { display: flex; gap: 2px; padding: 2px 0 4px; }
#msgInput {
  width: 100%; min-height: 64px; max-height: 180px; border: none; outline: none; resize: none;
  font-size: var(--msg-fs, 14px); font-family: inherit; line-height: 1.6; background: transparent;
}
#inputFooter { display: flex; justify-content: flex-end; }
#sendBtn {
  border: none; background: var(--accent); color: #fff; border-radius: 6px; padding: 6px 22px;
  cursor: pointer; font-size: 13px;
}
#sendBtn:hover { filter: brightness(1.08); }
#emojiPanel {
  position: absolute; bottom: 100%; left: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.14); padding: 10px; z-index: 200;
  width: 320px; display: flex; flex-wrap: wrap; gap: 2px;
}
.emoji-i { font-size: 20px; padding: 4px; cursor: pointer; border-radius: 5px; }
.emoji-i:hover { background: #f0f2f5; }

/* ---------------- 抽屉 ---------------- */
#drawerMask { position: absolute; inset: 0; z-index: 100; }
#convDrawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 300px; background: #fff;
  border-left: 1px solid var(--line); z-index: 110; box-shadow: -6px 0 24px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
}
.drawer-head {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.close-x { cursor: pointer; color: var(--txt2); padding: 4px 6px; }
#drawerBody { flex: 1; overflow-y: auto; padding: 14px 16px; }
.dw-section { margin-bottom: 18px; }
.dw-label { font-size: 12px; color: var(--txt2); margin-bottom: 8px; }
.dw-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.dw-name-edit { display: flex; gap: 8px; }
.dw-name-edit input {
  flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; outline: none;
}
.member-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.member-cell { width: 56px; text-align: center; position: relative; cursor: pointer; }
.member-cell .avatar { margin: 0 auto; }
.member-cell .mc-name {
  font-size: 11px; color: var(--txt2); margin-top: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.member-cell .mc-x {
  position: absolute; top: -4px; right: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 10px; line-height: 16px; display: none;
}
.member-grid.removing .member-cell .mc-x { display: block; }
.mc-add {
  width: 36px; height: 36px; border-radius: 50%; border: 1px dashed #c3c9d4; color: #9aa2af;
  font-size: 18px; line-height: 34px; margin: 0 auto;
}
.dw-btn {
  width: 100%; padding: 9px 0; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; margin-top: 8px; font-size: 13px;
}
.dw-btn:hover { background: #f6f7f9; }
.dw-btn.danger { color: var(--danger); border-color: #f3c6c8; }
.dw-btn.danger:hover { background: #fdf3f3; }

/* switch */
.switch { width: 38px; height: 22px; border-radius: 11px; background: #d4d9e0; position: relative; cursor: pointer; transition: background .15s; }
.switch.on { background: var(--accent); }
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: left .15s;
}
.switch.on::after { left: 18px; }

/* ---------------- 弹窗 ---------------- */
#modalMask {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 400;
  display: flex; align-items: center; justify-content: center;
}
#modalBox {
  background: #fff; border-radius: 12px; width: 560px; max-width: 92%; max-height: 86%;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15px;
}
.modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.m-btn { padding: 7px 20px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 13px; }
.m-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.m-btn.primary:disabled { opacity: .5; cursor: default; }
.m-input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  outline: none; font-size: 14px; margin-bottom: 12px;
}
.m-input:focus { border-color: var(--accent); }

/* 选人组件 */
.picker-wrap { display: flex; gap: 14px; height: 360px; }
.picker-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.picker-list { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; }
.picker-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; }
.picker-item:hover { background: #f6f7f9; }
.picker-item input { accent-color: var(--accent); }
.picker-dept { font-size: 12px; color: var(--txt2); padding: 8px 12px 2px; }
.picker-right { width: 170px; border-left: 1px solid var(--line); padding-left: 14px; overflow-y: auto; }
.picked-title { font-size: 12px; color: var(--txt2); margin-bottom: 8px; }
.picked-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.picked-item .rm { margin-left: auto; cursor: pointer; color: var(--txt2); }

/* 个人卡片 */
.person-card { text-align: center; padding: 8px 0 2px; }
.person-card .avatar { margin: 0 auto 10px; }
.pc-name { font-size: 17px; font-weight: 600; }
.pc-dept { font-size: 12px; color: var(--txt2); margin: 4px 0 16px; }

/* toast / 右键菜单 / 图片预览 */
#toast {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(30,36,50,.92); color: #fff; padding: 9px 20px; border-radius: 8px;
  font-size: 13px; z-index: 600;
}
#ctxMenu { position: fixed; z-index: 500; }
#imgPreviewFull {
  position: fixed; inset: 0; margin: auto; max-width: 86%; max-height: 86%; z-index: 700;
  box-shadow: 0 0 80px rgba(0,0,0,.5); cursor: zoom-out; border-radius: 4px;
}
body.previewing::after {
  content: ''; position: fixed; inset: 0; background: rgba(10,14,22,.7); z-index: 650;
}

/* 设置菜单 */
#settingsMenu { left: 70px; bottom: 16px; top: auto; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d4d9e0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #bfc6d0; }
::-webkit-scrollbar-track { background: transparent; }

/* 新消息分割线 */
.unread-divider {
  display: flex; align-items: center; gap: 10px; color: var(--danger); font-size: 11px; margin: 10px 0;
}
.unread-divider::before, .unread-divider::after { content: ''; flex: 1; height: 1px; background: #f3c6c8; }

/* ---------------- 内嵌页面 & 小图标 ---------------- */
.rail-cicon {
  width: 24px; height: 24px; border-radius: 7px; margin: 0 auto 2px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 600;
}
#webPane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
#webPaneBar {
  height: 46px; flex: none; display: flex; align-items: center; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: #fff;
}
#webPaneTitle { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-actions { display: flex; gap: 6px; flex: none; }
/* 后退/前进无历史可走时置灰(did-navigate 事件驱动) */
.wp-actions .icon-btn:disabled { color: #c3c9d4; cursor: default; }
.wp-actions .icon-btn:disabled:hover { background: transparent; }
/* 窄屏(≤520, m-acct 内容区仅约330px): 工具条收紧成紧凑图标钮, 单行不换行不溢出 */
@media (max-width: 520px) {
  #webPaneBar { padding: 0 4px; }
  #webPaneBar .icon-btn { width: 28px; height: 28px; flex: none; }
  #webPaneTitle { font-size: 13px; margin: 0 2px; }
  .wp-actions { gap: 0; }
}
#webPaneHost { flex: 1; position: relative; min-height: 0; }
.web-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
webview.web-embed { display: flex; }

.sbset-hint { font-weight: 400; color: #8a919f; font-size: 12px; margin-left: 6px; }

/* ---------------- 中栏通用标题 ---------------- */
.sb-title {
  font-size: 17px; font-weight: 600; padding: 14px 16px 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.sb-hint { font-size: 11px; color: var(--txt2); padding: 2px 16px 6px; line-height: 1.5; }
#sidebarAccounts { display: flex; flex-direction: column; height: 100%; }

/* ---------------- 通讯录目录树 (飞书式) ---------------- */
#contactsDir { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.cd-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--txt);
}
.cd-item:hover { background: #ececf0; }
.cd-item.active { background: var(--accent-weak); color: var(--accent); }
.cd-item svg { flex: none; }
.cd-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-cnt { font-size: 11px; color: #b4bac4; }
.cd-arr {
  width: 14px; flex: none; font-size: 10px; color: var(--txt2); text-align: center;
  transition: transform .15s; cursor: pointer;
}
.cd-arr.open { transform: rotate(90deg); }
.cd-dept { padding-left: 30px; font-size: 13px; }
.cd-l { color: #c3c9d4; font-size: 11px; flex: none; }
.cd-corp {
  width: 18px; height: 18px; border-radius: 5px; background: var(--accent); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none;
}
.cd-company { padding-left: 22px; font-weight: 500; }

/* ---------------- 通讯录右侧面板 ---------------- */
#contactsPane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
#cpHeader {
  height: 56px; flex: none; display: flex; align-items: center; padding: 0 24px;
  border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600;
}
#cpCrumb { flex: none; padding: 12px 24px 4px; font-size: 13px; color: var(--txt2); min-height: 18px; }
.crumb-link { color: var(--accent); cursor: pointer; }
.crumb-link:hover { text-decoration: underline; }
.crumb-sep { margin: 0 6px; color: #c3c9d4; }
.crumb-cur { color: var(--txt); }
#cpBody { flex: 1; overflow-y: auto; padding: 6px 16px 20px; }
.cp-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px;
  cursor: pointer;
}
.cp-row:hover { background: #f4f6f9; }
.cp-mid { flex: 1; min-width: 0; }
.cp-name { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.cp-sub { font-size: 12px; color: var(--txt2); margin-top: 3px; }
.cp-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--accent-weak);
  color: var(--accent); font-weight: 500;
}
.cp-tag.self { background: #eef7ee; color: #34a853; }
.cp-star { color: #f5a623; font-size: 12px; }
.cp-online { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.cp-cnt { font-size: 12px; color: #b4bac4; flex: none; }
.cp-chat {
  border: none; background: transparent; color: #a6adba; cursor: pointer;
  width: 30px; height: 30px; border-radius: 6px; display: none;
  align-items: center; justify-content: center; flex: none;
}
.cp-row:hover .cp-chat { display: flex; }
.cp-chat:hover { background: var(--accent-weak); color: var(--accent); }
.cp-fico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex: none; }
.cp-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #b4bac4; font-size: 13px; padding: 80px 0 40px; text-align: center;
}
.cp-empty svg { width: 42px; height: 42px; opacity: .5; }
.pc-star-btn { cursor: pointer; color: #c3c9d4; font-size: 17px; }
.pc-star-btn.on, .pc-star-btn:hover { color: #f5a623; }

/* ---------------- 工作台 (飞书式应用网格) ---------------- */
#wbPane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #f6f7f9; }
#wbHeader {
  height: 56px; flex: none; display: flex; align-items: center; padding: 0 28px;
  border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; background: #fff;
}
#wbBody { flex: 1; overflow-y: auto; padding: 18px 28px 30px; }
.wb-sec {
  font-size: 14px; font-weight: 600; margin: 18px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.wb-sec:first-child { margin-top: 0; }
.wb-hint { font-weight: 400; font-size: 12px; color: var(--txt2); }
.wb-add { padding: 3px 12px; font-size: 12px; }
.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.wb-tile {
  background: #fff; border-radius: 12px; padding: 16px 8px 12px; text-align: center;
  cursor: pointer; position: relative; border: 1px solid transparent;
  transition: box-shadow .12s, border-color .12s;
}
.wb-tile:hover { border-color: #dfe5ee; box-shadow: 0 4px 16px rgba(30,60,120,.08); }
.wb-ico {
  width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 600;
}
.wb-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-ops { position: absolute; top: 6px; right: 6px; display: none; gap: 4px; }
.wb-tile:hover .wb-ops { display: flex; }
.wb-op {
  width: 20px; height: 20px; border-radius: 50%; background: #eef1f6; color: #51565e;
  font-size: 12px; line-height: 20px; text-align: center; cursor: pointer;
}
.wb-op:hover { background: var(--accent); color: #fff; }
.wb-op.on { background: #d9ead9; color: #34a853; cursor: default; }
.wb-op.on:hover { background: #d9ead9; color: #34a853; }
.wb-empty {
  background: #fff; border: 1px dashed #d6dce6; border-radius: 12px; padding: 22px;
  text-align: center; color: #9aa2af; font-size: 13px;
}

/* ---------------- 账号管家 ---------------- */
#acctList { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.acct-group { font-size: 11px; color: var(--txt2); padding: 10px 10px 4px; font-weight: 600; }
.acct-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer;
}
.acct-item:hover { background: #ececf0; }
.acct-item.active { background: var(--accent-weak); }
.acct-item .rail-cicon { margin: 0; width: 30px; height: 30px; font-size: 13px; flex: none; }
.acct-mid { flex: 1; min-width: 0; }
.acct-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-url { font-size: 11px; color: #b4bac4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.acct-empty { text-align: center; color: #9aa2af; font-size: 13px; padding: 40px 14px; line-height: 2; }
#wpPlaceholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; color: #b9c0cc;
  font-size: 13px; background: #fff; z-index: 1; overflow-y: auto; padding: 36px 20px;
}
/* ---- 账号管家首页 (空态改版: 品牌头+三步上手+功能说明) ---- */
.ah-wrap { width: 100%; max-width: 660px; margin: auto; display: flex; flex-direction: column; gap: 22px; text-align: left; }
.ah-head { text-align: center; }
.ah-logo {
  width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #3370ff, #5a8bff); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(51, 112, 255, .25);
}
.ah-title { font-size: 20px; font-weight: 700; color: #1f2329; }
.ah-sub { font-size: 13px; color: #8f959e; margin-top: 4px; }
.ah-steps { display: flex; gap: 10px; }
.ah-step { flex: 1; display: flex; gap: 9px; align-items: flex-start; background: #f5f7fa; border-radius: 10px; padding: 12px; }
.ah-stepn {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: #3370ff; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; margin-top: 1px;
}
.ah-step b, .ah-feat b { display: block; font-size: 13px; color: #1f2329; font-weight: 600; line-height: 1.5; }
.ah-step small, .ah-feat small { display: block; font-size: 12px; color: #8f959e; line-height: 1.6; margin-top: 2px; }
.ah-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ah-feat { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #eceef1; border-radius: 10px; padding: 11px 12px; background: #fff; }
.ah-feat > span { font-size: 17px; line-height: 1.4; flex: none; }
.ah-actions { display: flex; gap: 10px; justify-content: center; padding-bottom: 8px; }
.ah-actions .m-btn { min-width: 128px; }
@media (max-width: 700px) {
  .ah-steps { flex-direction: column; }
  .ah-grid { grid-template-columns: 1fr; }
  #wpPlaceholder { padding: 24px 14px; }
}

/* ================= 移动端适配 (安卓壳/窄屏浏览器: 两屏切换 + 底部导航条) ================= */
.m-only { display: none !important; }
@media (max-width: 520px) {
  #titlebar { display: none; }
  #mainView { height: 100%; flex-direction: column; }
  /* 图标栏变底部导航 */
  #rail {
    flex-direction: row; width: 100%; height: 54px; order: 2;
    padding: 0 4px; align-items: center; justify-content: space-around;
    overflow-x: auto; overflow-y: hidden; flex-shrink: 0;
  }
  #rail::-webkit-scrollbar { display: none; }
  #railAvatar { display: none; }
  .rail-spacer { display: none; }
  #rail .rail-item { width: auto; min-width: 56px; height: 48px; padding: 4px 6px; margin: 0; flex-shrink: 0; }
  /* 默认只显示列表屏; 打开会话后整屏切聊天 */
  #sidebar { width: 100%; flex: 1; border-right: none; min-height: 0; }
  #chatPane { display: none; }
  body.m-chat #sidebar { display: none; }
  body.m-chat #chatPane { display: flex; flex: 1; min-height: 0; }
  /* 一级导航恒在: 聊天中底部导航条不隐藏 (全局规则「任何界面不藏一级边栏」) */
  #chatBack.m-only { display: flex !important; }
  /* 内嵌页/工作台占满 */
  #webPane:not(.hidden) { flex: 1; min-height: 0; }
  #wbPane:not(.hidden) { flex: 1; min-height: 0; }
  #wbBody { padding: 14px 14px 24px; }
  /* 通讯录: 目录屏⇄成员面板两屏切换 (m-cp) */
  #contactsPane { display: none !important; }
  body.m-cp #sidebar { display: none; }
  body.m-cp #contactsPane:not(.hidden) { display: flex !important; flex: 1; min-height: 0; }
  #cpHeader, #cpCrumb { padding-left: 16px; padding-right: 16px; }
  body.m-cp #cpBack.m-only { display: flex !important; margin-right: 6px; }
  /* 抽屉/弹窗全宽 */
  #convDrawer { width: 100% !important; }
  #modalBox { max-width: 94vw; max-height: 86vh; overflow: auto; }
  .picker-wrap { flex-direction: column; }
  .picker-right { max-height: 90px; overflow-y: auto; }
  .msg-body { max-width: 78%; }
  #msgInput { font-size: max(16px, var(--msg-fs, 14px)); }  /* 移动端保底16px防输入放大, 字号档更大时跟随 */
}

/* ===== 中屏(折叠屏展开/小平板 521-900px): 维持桌面三栏, 一二栏恒在, 第二栏收窄 ===== */
@media (min-width: 521px) and (max-width: 900px) {
  #sidebar { width: 224px; }
  #docsList { width: 220px; }
  #btbList { width: 220px; }
}

/* ================= 飞书对齐二期: 消息增强/公告/置顶/文档/语音/@提及 ================= */

/* 群公告条 */
#annBar {
  display: flex; align-items: center; gap: 8px; padding: 7px 18px;
  background: #fff7e8; color: #8a5a00; font-size: 12px; border-bottom: 1px solid #f5e3bd;
  cursor: pointer; flex: none;
}
#annBar svg { color: #e8a23a; flex: none; }
#annBarText { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#annBarClose { cursor: pointer; padding: 0 4px; color: #c9a86a; }
#annBarClose:hover { color: #8a5a00; }

/* 输入中提示 */
#typingHint { padding: 0 18px 4px; font-size: 12px; color: var(--txt2); flex: none; }

/* 消息悬停操作条 */
.msg-body { position: relative; }
.msg-acts {
  position: absolute; top: -14px; right: 0; display: none; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.1); padding: 2px; z-index: 5;
}
.msg-row.own .msg-acts { right: auto; left: 0; }
.msg-row:hover .msg-acts { display: flex; }
.ma-btn {
  width: 26px; height: 26px; border: none; background: transparent; border-radius: 6px;
  cursor: pointer; font-size: 14px; color: #51565e; display: flex; align-items: center; justify-content: center;
}
.ma-btn:hover { background: #f0f2f5; }

/* 表情回应 chips */
.react-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-row.own .react-chips { justify-content: flex-end; }
.react-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px;
  background: #f2f4f7; border: 1px solid var(--line); font-size: 12px; cursor: pointer;
  user-select: none;
}
.react-chip:hover { border-color: var(--accent); }
.react-chip.mine { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }

/* 快捷表情回应浮层 */
#quickReactPop {
  position: fixed; z-index: 520; background: #fff; border: 1px solid var(--line);
  border-radius: 20px; box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: 4px 8px;
  display: flex; gap: 2px;
}
#quickReactPop .emoji-i { font-size: 18px; }

/* 已编辑标记 / 重新编辑 */
.edited-tag { font-size: 11px; color: #b4bac4; margin-left: 4px; }
.reedit-link { color: var(--accent); cursor: pointer; margin-left: 6px; }

/* 已读状态(群) */
.msg-state { cursor: default; }
.msg-state.rd-click { cursor: pointer; }
.msg-state.rd-click:hover { text-decoration: underline; }

/* 置顶消息 */
.pin-cnt {
  position: absolute; top: 0; right: 0; min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--accent); color: #fff; border-radius: 7px; font-size: 9px;
  line-height: 14px; font-style: normal;
}
#btnPins { position: relative; }
#pinPanel {
  position: absolute; top: 56px; right: 12px; width: 360px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; z-index: 150;
  box-shadow: 0 10px 36px rgba(0,0,0,.14);
}
.pin-head { padding: 12px 14px 6px; font-weight: 600; font-size: 13px; }
.pin-item { padding: 9px 14px; cursor: pointer; border-top: 1px solid #f2f4f7; position: relative; }
.pin-item:hover { background: #f7f9fc; }
.pin-item-meta { font-size: 11px; color: var(--txt2); margin-bottom: 3px; display: flex; gap: 8px; }
.pin-item-body { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-x { position: absolute; right: 10px; top: 8px; color: #b4bac4; cursor: pointer; display: none; padding: 2px 5px; }
.pin-item:hover .pin-x { display: block; }
.pin-x:hover { color: var(--danger); }
.pin-empty { padding: 26px 0; text-align: center; color: #b4bac4; font-size: 12px; }

/* @提及 */
#mentionPop {
  position: absolute; bottom: 100%; left: 12px; width: 260px; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; z-index: 210;
  box-shadow: 0 8px 30px rgba(0,0,0,.14); padding: 4px;
}
.mention-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px;
}
.mention-item:hover, .mention-item.sel { background: var(--accent-weak); }
.mention-item .md { color: var(--txt2); font-size: 11px; margin-left: auto; }
.at-token { color: var(--accent); font-weight: 500; }
.bubble.at-me { background: #fff3d6; }
.conv-at { color: var(--danger); }
.draft-tag { color: var(--danger); }

/* 消息跳转高亮 */
@keyframes msgFlash { 0% { background: #fff3d6; } 100% { background: transparent; } }
.msg-row.flash .bubble { animation: msgFlash 2s ease-out; }
.msg-link { color: var(--accent); text-decoration: underline; word-break: break-all; }

/* 语音消息: 气泡播放器(播放/暂停+可拖进度+时长) + 折叠转写 + 录音状态条 */
.voice-bubble { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 170px; }
.voice-play { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(51,112,255,.12);
  color: var(--accent); display: flex; align-items: center; justify-content: center; }
.voice-play .vp-pause { display: none; }
.voice-bubble.playing .voice-play .vp-pause { display: block; }
.voice-bubble.playing .voice-play .vp-play { display: none; }
.voice-track { flex: 1; height: 14px; min-width: 70px; display: flex; align-items: center;
  cursor: pointer; touch-action: none; position: relative; }
.voice-track::before { content: ''; position: absolute; left: 0; right: 0; top: 5.5px; height: 3px;
  border-radius: 2px; background: rgba(120,130,150,.35); }
.voice-prog { position: absolute; left: 0; top: 5.5px; height: 3px; width: 0;
  border-radius: 2px; background: var(--accent); pointer-events: none; }
.voice-dur { font-size: 12px; color: var(--txt2); flex: none; }
.voice-bubble.playing { color: var(--accent); }
.voice-tr { margin-top: 5px; font-size: 12px; }
.voice-tr-na { color: var(--txt2); opacity: .75; }
.voice-tr-toggle { color: var(--accent); cursor: pointer; user-select: none; }
.voice-tr-text { margin-top: 4px; padding: 6px 8px; border-radius: 6px;
  background: rgba(120,130,150,.12); color: var(--txt); line-height: 1.5; white-space: pre-wrap; }
#btnVoice.recording { background: #fde8e8; color: var(--danger); }
#recPill { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px;
  color: var(--txt); border-bottom: 1px solid var(--line); }
#recPill .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  animation: recBlink 1s infinite; }
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
#recPill #recHint { color: var(--txt2); }
#recPill.rec-cancel { background: #fde8e8; }
#recPill.rec-cancel #recHint { color: var(--danger); font-weight: 600; }

/* 文档卡片消息 */
.doc-card {
  display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line);
  padding: 10px 12px; border-radius: 8px; cursor: pointer; min-width: 210px;
}
.doc-card:hover { border-color: var(--accent); }
.doc-card-ico {
  width: 36px; height: 36px; border-radius: 8px; background: #e8f4ff; color: #2f88ff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.doc-card-title { font-size: 13px; font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-sub { font-size: 11px; color: var(--txt2); margin-top: 2px; }

/* ---------------- 文档面板 ---------------- */
#docsPane { flex: 1; display: flex; min-width: 0; background: #fff; }
#docsList { width: 300px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--sb-bg); }
.docs-head {
  padding: 14px 16px 8px; font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
#docsListBody { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.doc-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.doc-item:hover { background: #ececf0; }
.doc-item.active { background: var(--accent-weak); }
.doc-item-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.doc-item-sub { font-size: 11px; color: var(--txt2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-share-tag { font-size: 10px; padding: 0 5px; border-radius: 4px; background: #e8f4ff; color: #2f88ff; flex: none; }
.docs-empty { text-align: center; color: #9aa2af; font-size: 13px; padding: 50px 14px; line-height: 2; }
#docEditor { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#docEditor.hidden + #docEmpty { display: flex; }
.doc-ed-bar {
  height: 52px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--line);
}
#docTitle { flex: 1; border: none; outline: none; font-size: 16px; font-weight: 600; min-width: 0; }
#docSaveState { font-size: 11px; color: #b4bac4; flex: none; }
#docContent {
  flex: 1; border: none; outline: none; padding: 18px 24px 60px;
  font-size: 14px; line-height: 1.8; font-family: inherit; user-select: text;
  overflow-y: auto; max-width: 860px; width: 100%; margin: 0 auto;
}
#docContent:empty::before { content: attr(data-ph); color: #b4bac4; pointer-events: none; }
#docContent h1 { font-size: 24px; margin: 14px 0 8px; }
#docContent h2 { font-size: 19px; margin: 12px 0 6px; }
#docContent h3 { font-size: 16px; margin: 10px 0 5px; }
#docContent blockquote {
  margin: 8px 0; padding: 4px 14px; border-left: 3px solid var(--accent);
  background: #f4f6f9; color: #4a5160; border-radius: 0 6px 6px 0;
}
#docContent pre {
  margin: 8px 0; padding: 10px 14px; background: #f3f4f6; border: 1px solid var(--line);
  border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px; white-space: pre-wrap; word-break: break-all;
}
#docContent img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
#docContent a { color: var(--accent); }
#docContent ul, #docContent ol { padding-left: 26px; margin: 6px 0; }
#docToolbar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
  padding: 6px 16px; border-bottom: 1px solid var(--line); background: #fafbfc;
}
.dtb-btn {
  border: none; background: none; padding: 4px 9px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; color: #4a5160; line-height: 1.5; white-space: nowrap;
}
.dtb-btn:hover { background: #ececf0; }
.dtb-btn.active { background: var(--accent-weak); color: var(--accent); }
.dtb-sep { width: 1px; height: 16px; background: var(--line); margin: 0 6px; flex: none; }
#docWordCount { margin-left: auto; font-size: 11px; color: #b4bac4; flex: none; }
.docs-sec {
  font-size: 11px; color: #9aa2af; padding: 12px 12px 4px; font-weight: 500;
  position: sticky; top: 0; background: var(--sb-bg);
}
#docsPlaceholder {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: #b9c0cc; font-size: 13px;
}

/* 搜索聊天记录(弹窗内) */
.sr-item { padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.sr-item:hover { background: #f4f6f9; }
.sr-meta { font-size: 11px; color: var(--txt2); display: flex; gap: 8px; margin-bottom: 3px; }
.sr-body { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-body b { color: var(--accent); font-weight: 600; }
.sr-conv { color: var(--accent); }
.sr-empty { text-align: center; color: #b4bac4; padding: 30px 0; font-size: 13px; }
.conv-search-msgs {
  padding: 8px 12px; font-size: 12px; color: var(--accent); cursor: pointer; border-radius: 8px;
}
.conv-search-msgs:hover { background: #ececf0; }

/* 已读详情弹窗 */
.rd-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.rd-tab { padding: 8px 14px; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--txt2); }
.rd-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.rd-list { max-height: 320px; overflow-y: auto; }

/* 群公告弹窗 */
.ann-view { white-space: pre-wrap; font-size: 14px; line-height: 1.8; user-select: text; min-height: 80px; }
.ann-meta { font-size: 12px; color: var(--txt2); margin-top: 14px; }
#annEdit { width: 100%; min-height: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.7; outline: none; resize: vertical; }
#annEdit:focus { border-color: var(--accent); }

/* 转发目标选择 */
.fw-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; border-radius: 8px; }
.fw-item:hover { background: #f6f7f9; }
.fw-item input { accent-color: var(--accent); }
.fw-sub { font-size: 11px; color: var(--txt2); margin-left: auto; }

/* 移动端补充 */
@media (max-width: 520px) {
  #docsPane { display: none !important; }
  body.m-doc #docsPane:not(.hidden) { display: flex !important; flex: 1; min-height: 0; }
  #docsPane:not(.hidden) { flex: 1; min-height: 0; }
  #docsList { width: 100%; }
  body.m-doc-ed #docsList { display: none; }
  #docEditor { display: none; }
  body.m-doc-ed #docEditor:not(.hidden) { display: flex; }
  #pinPanel { right: 6px; left: 6px; width: auto; }
  .msg-acts { display: none !important; } /* 手机端用长按/右键菜单 */
}

/* ================= 账号管家 · 紧凑第二栏(纯文字行列表, 2026-11-08 去图标) ================= */
#sidebar.acct-compact { width: 148px; min-width: 148px; }
#sidebar.acct-compact #sidebarAccounts {
  display: flex; flex-direction: column; align-items: stretch; height: 100%;
  padding: 10px 8px 8px; gap: 4px; overflow: hidden;
}
.acct-rail-btn {
  width: 40px; height: 36px; border: none; border-radius: 8px; background: #ebedf0;
  color: #51565e; font-size: 19px; cursor: pointer; line-height: 1; flex: none;
  display: flex; align-items: center; justify-content: center; align-self: center;
}
.acct-rail-btn:hover { background: #e0e3e8; color: var(--accent); }
.acct-rail-set { margin-top: auto; }
#sidebar.acct-compact #acctList {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; width: 100%;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0;
}
#sidebar.acct-compact #acctList::-webkit-scrollbar { width: 0; }
.acct-cgroup {
  width: 100%; font-size: 10px; color: #9aa2af; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 8px 6px 2px; border-top: 1px solid var(--line);
  margin-top: 4px; flex: none;
}
.acct-cgroup:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
.acct-citem {
  width: 100%; padding: 8px 9px; border-radius: 7px; cursor: pointer; text-align: left;
  flex: none; position: relative; display: flex; align-items: center; gap: 4px;
}
.acct-citem:hover { background: #ececf0; }
.acct-citem.active { background: var(--accent-weak); }
.acct-citem .acct-cname {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--txt); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-citem.active .acct-cname { color: var(--accent); font-weight: 600; }
.acct-citem .acct-cext {
  position: static; flex: none; font-size: 10px; color: #b4bac4;
}
.acct-cempty { font-size: 10px; color: #9aa2af; text-align: center; padding: 14px 4px; line-height: 1.7; }
.acct-cfoot { display: none; flex: none; font-size: 11px; color: #9aa2af; text-align: center; padding: 16px 8px; }

/* ================= 账号管家 · 设置中心(搬自九派账号管理系统) ================= */
#modalBox.acct-settings { width: 860px; max-width: 94%; height: 620px; max-height: 88%; }
.as-wrap { display: flex; flex: 1; min-height: 0; }
.as-nav {
  width: 150px; flex: none; background: var(--sb-bg); border-right: 1px solid var(--line);
  padding: 14px 8px; display: flex; flex-direction: column; gap: 3px;
}
.as-nav .as-tab {
  border: none; background: transparent; text-align: left; font-size: 13px; font-weight: 600;
  color: var(--txt); padding: 9px 11px; border-radius: 8px; cursor: pointer;
}
.as-nav .as-tab:hover { background: #ececf0; }
.as-nav .as-tab.active { background: var(--accent); color: #fff; }
.as-pane { flex: 1; overflow-y: auto; padding: 18px 22px 24px; min-width: 0; }
.as-pane h4 { margin: 0 0 4px; font-size: 17px; }
.as-desc { font-size: 12px; color: var(--txt2); margin: 0 0 14px; line-height: 1.6; }
.as-cttl { font-size: 11px; font-weight: 700; color: #9aa2af; letter-spacing: .6px; margin: 16px 2px 6px; }
.as-card { border: 1px solid var(--line); border-radius: 10px; padding: 2px 14px; margin-bottom: 12px; background: #fff; }
.as-opt { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.as-card .as-opt:last-child { border-bottom: none; }
.as-opt .as-lab { flex: 1; min-width: 0; }
.as-opt .as-lab b { display: block; font-size: 13px; font-weight: 600; }
.as-opt .as-lab small { display: block; color: var(--txt2); font-size: 11px; margin-top: 2px; line-height: 1.4; }
/* 链接清单行: 显示勾选+名称+分组+账号+密码+外部+排序+删除 */
.as-trow { display: flex; align-items: center; gap: 5px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.as-card .as-trow:last-child { border-bottom: none; }
.as-trow input[type=checkbox].as-vis { width: 15px; height: 15px; flex: none; accent-color: var(--accent); margin: 0; }
.as-trow .as-in { border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font-size: 12px; outline: none; background: #fff; min-width: 0; }
.as-trow .as-in:focus { border-color: var(--accent); }
.as-trow .as-tname { flex: 1 1 110px; font-weight: 600; }
.as-trow .as-tcat { flex: 0 0 100px; font-size: 11.5px; color: var(--txt2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 4px; background: #fff; }
.as-trow .as-tuser, .as-trow .as-tpw { flex: 1 1 86px; }
.as-trow .as-turl { flex: 1 1 100%; font-size: 11.5px; color: var(--txt2); }
.as-trow .as-mv {
  border: none; background: #ebedf0; color: #51565e; width: 21px; height: 21px; border-radius: 6px;
  cursor: pointer; font-size: 10px; line-height: 1; flex: none; padding: 0;
}
.as-trow .as-mv:hover { background: #e0e3e8; }
.as-trow .as-rm { color: var(--danger); cursor: pointer; font-weight: 700; font-size: 12px; padding: 0 3px; flex: none; }
.as-extw { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--txt2); cursor: pointer; white-space: nowrap; flex: none; }
.as-extw input { width: 14px; height: 14px; accent-color: var(--accent); margin: 0; }
/* 分类行 */
.as-catrow { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.as-card .as-catrow:last-child { border-bottom: none; }
.as-catrow .as-cname { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; font-weight: 600; outline: none; }
.as-catrow .as-cname:focus { border-color: var(--accent); }
.as-catrow .as-lnk { border: none; background: #ebedf0; color: var(--accent); height: 24px; border-radius: 6px; cursor: pointer; font-size: 11px; padding: 0 8px; font-weight: 600; }
.as-assign { display: none; flex-wrap: wrap; gap: 5px 14px; padding: 9px 4px 10px; border-bottom: 1px solid var(--line); }
.as-assign.show { display: flex; }
.as-assign label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.as-assign input { width: 14px; height: 14px; accent-color: var(--accent); margin: 0; }
.as-addbox { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.as-addbox input, .as-addbox select { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 12.5px; outline: none; }
.as-addbox input:focus { border-color: var(--accent); }

/* 手机端(安卓壳/窄屏): 账号管家列表铺满全宽 —— 大号文字行(类设置列表), 不留空腰 */
@media (max-width: 520px) {
  #sidebar.acct-compact { width: 100%; min-width: 0; }
  #sidebar.acct-compact #sidebarAccounts { flex-direction: column; padding: 10px; }
  #sidebar.acct-compact #acctList { gap: 2px; }
  .acct-cgroup { font-size: 11px; padding: 10px 6px 3px; }
  .acct-citem { padding: 12px 12px; border-radius: 9px; }
  .acct-citem .acct-cname { font-size: 14.5px; }
  .acct-cfoot { display: block; }
  .acct-rail-btn { align-self: flex-end; }
  .acct-rail-set { margin-top: 0; }
  #modalBox.acct-settings { width: 94vw; height: 86vh; }
  .as-nav { width: 92px; padding: 10px 4px; }
  .as-nav .as-tab { font-size: 12px; padding: 8px 6px; }
  .as-pane { padding: 12px; }
}

/* ---- 个人信息卡资料行 (通讯录飞书化) ---- */
.pc-lines { width: 100%; margin: 10px 0 2px; border-top: 1px solid var(--border, #e5e6eb); padding-top: 8px; }
.pc-line { display: flex; align-items: baseline; gap: 12px; padding: 5px 2px; font-size: 13px; }
.pc-k { flex: 0 0 60px; color: #8a8f99; text-align: left; }
.pc-v { flex: 1; color: var(--text, #1f2329); word-break: break-all; text-align: left; }

/* ================= Pin 顶部标签条 (聊天窗口顶部一排置顶快捷按钮) ================= */
#pinBar {
  display: flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: #f7f9fc; border-bottom: 1px solid var(--line); flex: none;
  overflow-x: auto; scrollbar-width: none;
}
#pinBar::-webkit-scrollbar { display: none; }
.pinbar-ico { font-size: 12px; flex: none; }
.pin-tab {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  font-size: 12px; color: #41464e; cursor: pointer; white-space: nowrap; flex: none;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.pin-tab:hover { border-color: var(--accent); color: var(--accent); }
.pin-tab-more { color: var(--accent); font-weight: 500; }
@media (max-width: 520px) { .pin-tab { max-width: 120px; } }

/* 链接预览卡片 (飞书式: 标题/摘要/域名 + 右侧缩略图) */
.link-preview {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  margin-top: 6px; padding: 9px 11px; max-width: 360px;
  background: #fff; border: 1px solid #e4e7ed; border-radius: 8px;
}
.link-preview:empty { display: none; }
.link-preview:hover { border-color: var(--accent); }
.lp-txt { flex: 1; min-width: 0; }
.lp-title {
  font-size: 13px; font-weight: 600; color: var(--txt); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-desc {
  font-size: 12px; color: var(--txt2); margin-top: 3px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-host { font-size: 11px; color: var(--txt2); margin-top: 5px; opacity: .8; }
.lp-img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
@media (max-width: 520px) { .link-preview { max-width: 100%; } }

/* ================= P1 三件套: 代码块高亮 / 稍后处理 / 消息多选 ================= */
/* 代码块卡片 (```lang 渲染, 轻量自高亮) */
.code-card {
  margin: 4px 0; border: 1px solid #e4e7ed; border-radius: 8px; overflow: hidden;
  background: #f8f9fb; max-width: 560px; min-width: 220px; text-align: left;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px; background: #eff1f5; border-bottom: 1px solid #e4e7ed;
}
.code-lang { font-size: 11px; color: var(--txt2); text-transform: lowercase; letter-spacing: .5px; }
.code-copy {
  border: none; background: transparent; color: var(--txt2); font-size: 11px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.code-copy:hover { background: #e0e4ea; color: var(--txt); }
.code-pre {
  margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.6;
  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  white-space: pre; overflow-x: auto; user-select: text; color: #383a42; max-height: 420px; overflow-y: auto;
}
.tk-k { color: #a626a4; }           /* 关键字 */
.tk-s { color: #50a14f; }           /* 字符串 */
.tk-c { color: #a0a1a7; font-style: italic; } /* 注释 */
.tk-n { color: #b76b01; }           /* 数字 */

/* 稍后处理入口 (会话列表顶部小条目, 中性色角标不打扰) */
#laterEntry {
  display: flex; align-items: center; gap: 7px; margin: 0 8px 4px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--txt2); flex: none;
}
#laterEntry:hover { background: #ececf0; color: var(--txt); }
#laterEntry svg { flex: none; }
.later-cnt {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #c7ccd6; color: #fff; font-size: 11px; font-style: normal;
  display: flex; align-items: center; justify-content: center;
}
.later-row { display: flex; align-items: center; gap: 8px; }
.later-row .sr-body { flex: 1; min-width: 0; }
.later-done { padding: 3px 12px; font-size: 12px; flex: none; }
.later-done:hover { border-color: var(--accent); color: var(--accent); }

/* 消息多选态: 左侧勾选圈 + 底部操作条 */
.msel-ck { display: none; }
#msgList.multisel .msg-row { position: relative; padding-left: 34px; cursor: pointer; }
#msgList.multisel .msel-ck {
  display: flex; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; border: 1.8px solid #b9c0cc; border-radius: 50%;
  background: #fff; align-items: center; justify-content: center; flex: none;
}
#msgList.multisel .msel-ck.on { background: var(--accent); border-color: var(--accent); }
#msgList.multisel .msel-ck.on::after { content: '✓'; color: #fff; font-size: 12px; line-height: 1; }
#msgList.multisel .msg-acts { display: none !important; }
#msgList.multisel .bubble, #msgList.multisel .msg-img, #msgList.multisel .file-card { pointer-events: none; }
#mselBar {
  flex: none; display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 12px; border-top: 1px solid var(--line); background: #fff;
}
#mselCount { font-size: 13px; color: var(--txt2); margin-right: 8px; }

/* 合并转发聊天记录卡片 */
.merged-card {
  min-width: 220px; max-width: 340px; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid #e4e7ed; border-radius: 8px; padding: 9px 11px;
}
.merged-card:hover { border-color: var(--accent); }
.mg-title { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.mg-line {
  font-size: 12px; color: var(--txt2); line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mg-foot { font-size: 11px; color: var(--txt2); border-top: 1px solid #eef0f3; margin-top: 7px; padding-top: 6px; }
.mg-rec { padding: 8px 4px; border-bottom: 1px solid #f0f2f5; }
.mg-rec:last-child { border-bottom: none; }
.mg-rec-meta { font-size: 12px; color: var(--txt2); display: flex; gap: 8px; margin-bottom: 2px; }
.mg-rec-meta b { color: var(--txt); font-weight: 500; }
.mg-rec-body { font-size: 13px; white-space: pre-wrap; word-break: break-word; user-select: text; }

/* ---------- 自定义边栏弹窗 ---------- */
.railset-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px; font-size: 14px; border-bottom: 1px solid #f0f2f5; }
.railset-row:last-child, #railsetList .railset-row:last-child { border-bottom: none; }
#railsetList { border-bottom: 1px solid #f0f2f5; }
.railset-row input { width: 16px; height: 16px; accent-color: #3370ff; cursor: pointer; }
.railset-lab { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 3px 0; min-width: 0; }
.railset-grip { color: #c2c7d0; font-size: 14px; cursor: grab; flex: none; user-select: none; }
.railset-fixed .railset-grip { visibility: hidden; }
.railset-mv { display: flex; gap: 4px; flex: none; }
.railset-btn { width: 26px; height: 26px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; color: #51565e; font-size: 13px; line-height: 1; padding: 0; }
.railset-btn:hover { color: var(--accent); border-color: var(--accent); }
.railset-row.dragging { opacity: .45; background: #eef3ff; }
.railset-fixed { color: #8a919f; cursor: default; }
.railset-fixed .railset-lab { cursor: default; }

/* ================================================================
   1:1 飞书 移动端(≤520) / 折叠屏(521-900) 布局  +  深浅色主题
   布局与主题解耦: 布局走 @media, 配色走 CSS 变量 + body.theme-dark
   ================================================================ */
:root { --navbg: #ffffff; --nav-fg: #5f6672; --m-inp: #f2f3f5; --hov: #ececf0; --card: #ffffff; --pop: #ffffff; }

/* ---------- 列表页头部 mHead (仅≤900显示) ---------- */
#mHead { display: none; }
#pinnedRow { display: none; }

@media (max-width: 900px) {
  /* 头部: 头像+姓名+部门+搜索+⊕ */
  #mHead { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; flex: none; }
  #mHead .avatar { width: 42px; height: 42px; line-height: 42px; font-size: 15px; cursor: pointer; }
  .mh-mid { flex: 1; min-width: 0; }
  #mHeadName { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mHeadSub { font-size: 11px; color: var(--txt2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mh-btn {
    width: 36px; height: 36px; border: none; background: transparent; border-radius: 50%;
    color: var(--txt); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none;
  }
  .mh-btn:active { background: rgba(125,135,155,.2); }
  /* 搜索行默认收起, 点放大镜展开 */
  #sidebarChat .sb-head { display: none; }
  body.m-search #sidebarChat .sb-head { display: flex; }

  /* 置顶会话 = 顶部圆形头像快捷排 (飞书式), 下方列表不再重复 */
  #pinnedRow { display: flex; gap: 12px; padding: 6px 14px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
  #pinnedRow::-webkit-scrollbar { display: none; }
  .pr-item { width: 58px; flex: none; text-align: center; cursor: pointer; position: relative; }
  .pr-item .avatar { width: 48px; height: 48px; line-height: 48px; font-size: 16px; border-radius: 50% !important; margin: 0 auto; }
  .pr-name { font-size: 11px; color: var(--txt2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pr-item.active .pr-name { color: var(--accent); }
  .pr-badge {
    position: absolute; top: -3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; line-height: 16px;
    font-style: normal; text-align: center;
  }
  .pr-badge.muted { background: #c3c9d4; }
  #convList .conv-item.pinned { display: none; }

  /* 会话行 1:1: 大头像 / 名称16px / 右侧时间+角标+免打扰铃 */
  .conv-item { padding: 9px 14px; gap: 12px; border-radius: 10px; }
  .conv-item .avatar { width: 48px; height: 48px; line-height: 48px; font-size: 16px; }
  .conv-item:hover { background: transparent; }
  .conv-item:active { background: var(--hov); }
  .conv-name b { font-size: 16px; font-weight: 500; }
  .conv-preview { font-size: 13px; margin-top: 4px; }
  .conv-time { font-size: 12px; }
  .conv-right { min-height: 40px; justify-content: space-between; }
  #laterEntry { margin: 0 10px 2px; }

  /* 聊天页: 居中标题 + 居中副标题(n名群成员) */
  #chatHeader { position: relative; justify-content: center; height: 52px; padding: 0 112px; }
  #chatHeader > div:not(.ch-actions) { text-align: center; min-width: 0; }
  #chatTitle { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #chatSub { font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #chatBack { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); }
  .ch-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

  /* 气泡微调 */
  .bubble { border-radius: 12px; }

  /* 输入区 1:1: 圆角「发送给 xxx」输入条 + 图标行(表情/@/语音/图片/文件) + 圆形发送钮 */
  #inputArea { display: flex; flex-direction: column; padding: 8px 12px; }
  #msgInput {
    order: 1; min-height: 22px; max-height: 120px; background: var(--m-inp);
    border-radius: 21px; padding: 10px 16px; font-size: 16px; color: var(--txt);
  }
  #inputToolbar { order: 2; align-items: center; justify-content: space-between; padding: 6px 50px 0 2px; }
  #inputToolbar .icon-btn { width: 38px; height: 38px; font-size: 20px; color: var(--txt2); }
  #inputToolbar .icon-btn svg { width: 22px; height: 22px; }
  #inputFooter { order: 3; position: absolute; right: 12px; bottom: 11px; }
  #sendBtn {
    width: 37px; height: 37px; border-radius: 50%; padding: 0; font-size: 0; line-height: 0;
    display: flex; align-items: center; justify-content: center;
  }
  #sendBtn::after { content: '➤'; font-size: 15px; line-height: 1; margin-left: 2px; }
}

/* ---------- 手机(≤520): 底部导航 1:1 飞书 ---------- */
@media (max-width: 520px) {
  #rail {
    height: 58px; background: var(--navbg); border-top: 1px solid var(--line); padding: 0 2px;
  }
  #rail .rail-item { min-width: 52px; height: 52px; padding: 6px 4px 2px; border-radius: 10px; color: var(--nav-fg); }
  #rail .rail-item svg { width: 23px; height: 23px; margin-bottom: 1px; }
  #rail .rail-item span { font-size: 10px; }
  #rail .rail-item:hover { background: transparent; color: var(--nav-fg); }
  #rail .rail-item.active { background: transparent; color: var(--accent); }
}

/* ---------- 折叠屏(521-900): 1:1 飞书分屏 = 左列表 + 右聊天, 底部导航在左列下方恒在 ---------- */
@media (min-width: 521px) and (max-width: 900px) {
  #mainView { display: grid; grid-template-columns: clamp(248px, 36%, 330px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 58px; }
  #rail {
    grid-row: 2; grid-column: 1; width: auto; height: 58px;
    flex-direction: row; align-items: center; justify-content: space-around;
    padding: 0 2px; gap: 0; overflow-x: auto; overflow-y: hidden;
    background: var(--navbg); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  }
  #rail::-webkit-scrollbar { display: none; }
  #railAvatar, .rail-spacer { display: none; }
  #rail .rail-item { width: auto; min-width: 52px; height: 52px; padding: 6px 4px 2px; margin: 0; flex: none; color: var(--nav-fg); }
  #rail .rail-item svg { width: 23px; height: 23px; margin-bottom: 1px; }
  #rail .rail-item span { font-size: 10px; }
  #rail .rail-item:hover { background: transparent; color: var(--nav-fg); }
  #rail .rail-item.active { background: transparent; color: var(--accent); }
  #sidebar { grid-row: 1; grid-column: 1; width: auto !important; min-width: 0; }
  #chatPane, #contactsPane, #wbPane, #docsPane, #webPane { grid-row: 1 / 3; grid-column: 2; }
  /* 第二栏隐藏的页面(文档/工作台网格/九派AI整站): 内容占满, 导航横跨全宽 */
  #mainView:has(> #sidebar.hidden) { grid-template-columns: 1fr 0; }
  #mainView:has(> #sidebar.hidden) #rail { grid-column: 1 / 3; border-right: none; }
  #mainView:has(> #sidebar.hidden) > :is(#chatPane, #contactsPane, #wbPane, #docsPane, #webPane) { grid-row: 1; grid-column: 1 / 3; }
  /* 账号管家: 第二栏保持 72px 小图标窄栏(不随分屏左列撑宽), 底部导航横跨全宽 */
  #mainView:has(> #sidebar.acct-compact) { grid-template-columns: 148px minmax(0, 1fr); }
  #mainView:has(> #sidebar.acct-compact) #rail { grid-column: 1 / 3; border-right: none; }
  #mainView:has(> #sidebar.acct-compact) > :is(#chatPane, #contactsPane, #wbPane, #docsPane, #webPane) { grid-row: 1; grid-column: 2; }
}

/* ================= 深色主题 body.theme-dark (设置→深色模式) ================= */
body.theme-dark {
  --rail-bg: #17181b; --rail-fg: #8f949e; --rail-active: #ffffff;
  --accent: #4e83fd; --accent-weak: #263754;
  --sb-bg: #141518; --line: #27292e; --txt: #e8eaee; --txt2: #8f949e;
  --bubble-own: #2a3f66; --bubble-other: #242529;
  --navbg: #121315; --nav-fg: #8f949e; --m-inp: #232529; --hov: #1e2024; --card: #1e2024; --pop: #1f2127;
  background: #121315; color: var(--txt);
}
body.theme-dark #msgList,
body.theme-dark #chatPane, body.theme-dark #contactsPane, body.theme-dark #webPane,
body.theme-dark #wpPlaceholder { background: #121315; }
body.theme-dark .ah-title, body.theme-dark .ah-step b, body.theme-dark .ah-feat b { color: #e8eaed; }
body.theme-dark .ah-sub, body.theme-dark .ah-step small, body.theme-dark .ah-feat small { color: #8a9099; }
body.theme-dark .ah-step { background: #1b1d21; }
body.theme-dark .ah-feat { background: #17191c; border-color: #26292e; }
body.theme-dark #wbPane { background: #141518; }
body.theme-dark #wbHeader, body.theme-dark #mselBar { background: #141518; }
body.theme-dark #webPaneBar { background: #141518; }
body.theme-dark .search-box, body.theme-dark .plus-btn, body.theme-dark .acct-rail-btn { background: #232529; color: #aeb4bf; }
body.theme-dark .plus-btn:hover, body.theme-dark .acct-rail-btn:hover { background: #2a2d33; }
body.theme-dark .conv-item:hover, body.theme-dark .contact-item:hover, body.theme-dark .cd-item:hover,
body.theme-dark .acct-item:hover, body.theme-dark .acct-citem:hover, body.theme-dark .cp-row:hover,
body.theme-dark .sr-item:hover, body.theme-dark .doc-item:hover, body.theme-dark #laterEntry:hover,
body.theme-dark .conv-search-msgs:hover, body.theme-dark .dtb-btn:hover, body.theme-dark .emoji-i:hover,
body.theme-dark .ma-btn:hover, body.theme-dark .icon-btn:hover, body.theme-dark .pop-item:hover,
body.theme-dark .picker-item:hover, body.theme-dark .fw-item:hover { background: var(--hov); }
body.theme-dark .conv-item.pinned { background: #1a1c20; }
body.theme-dark .conv-item.active, body.theme-dark .conv-item.pinned.active { background: var(--accent-weak); }
body.theme-dark .icon-btn, body.theme-dark .dtb-btn { color: #aeb4bf; }
body.theme-dark .wp-actions .icon-btn:disabled { color: #4a4e57; }
body.theme-dark .wp-actions .icon-btn:disabled:hover { background: transparent; }
body.theme-dark .pop-menu, body.theme-dark #quickReactPop, body.theme-dark .msg-acts, body.theme-dark #emojiPanel,
body.theme-dark #pinPanel, body.theme-dark #mentionPop { background: var(--pop); border-color: #34363c; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
body.theme-dark .mention-item:hover, body.theme-dark .mention-item.sel { background: var(--accent-weak); }
body.theme-dark #modalBox, body.theme-dark #convDrawer { background: #1c1d21; }
body.theme-dark .m-btn, body.theme-dark .dw-btn { background: #26282d; color: var(--txt); border-color: #34363c; }
body.theme-dark .m-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
body.theme-dark .m-btn:hover:not(.primary), body.theme-dark .dw-btn:hover { background: #2c2f35; }
body.theme-dark .m-input, body.theme-dark #annEdit, body.theme-dark .dw-name-edit input,
body.theme-dark .as-trow .as-in, body.theme-dark .as-trow .as-tcat, body.theme-dark .as-catrow .as-cname,
body.theme-dark .as-addbox input, body.theme-dark .as-addbox select { background: #1b1d21; color: var(--txt); border-color: #34363c; }
body.theme-dark .file-card, body.theme-dark .doc-card, body.theme-dark .link-preview,
body.theme-dark .merged-card, body.theme-dark .as-card { background: var(--card); border-color: #34363c; }
body.theme-dark .file-ico { background: var(--accent-weak); }
body.theme-dark .doc-card-ico { background: #1d2c45; }
body.theme-dark .react-chip { background: #232529; border-color: #34363c; color: #c6cbd4; }
body.theme-dark .react-chip.mine { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }
body.theme-dark #pinBar { background: #17181b; }
body.theme-dark .pin-tab { background: #232529; border-color: #34363c; color: #c6cbd4; }
body.theme-dark .pin-item:hover { background: #1e2024; }
body.theme-dark .pin-item { border-top-color: #232529; }
body.theme-dark #annBar { background: #2c2514; color: #d7b45e; border-bottom-color: #3c331c; }
body.theme-dark #annBarClose { color: #9a8449; }
body.theme-dark .bubble.at-me { background: #3b3115; }
body.theme-dark .code-card { background: #1b1d21; border-color: #34363c; }
body.theme-dark .code-head { background: #26282d; border-bottom-color: #34363c; }
body.theme-dark .code-copy:hover { background: #33363d; color: var(--txt); }
body.theme-dark .code-pre { color: #ccd1da; }
body.theme-dark .tk-k { color: #c678dd; } body.theme-dark .tk-s { color: #98c379; }
body.theme-dark .tk-c { color: #7f848e; } body.theme-dark .tk-n { color: #d19a66; }
body.theme-dark .wb-tile { background: var(--card); }
body.theme-dark .wb-tile:hover { border-color: #3a3d44; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
body.theme-dark .wb-empty { background: #1a1c20; border-color: #34363c; }
body.theme-dark .wb-op { background: #2a2d33; color: #aeb4bf; }
body.theme-dark .empty-logo { background: #1e2024; color: #4c515b; }
body.theme-dark .switch { background: #3a3d44; }
body.theme-dark .switch.on { background: var(--accent); }
body.theme-dark ::-webkit-scrollbar-thumb { background: #34373e; }
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #41454e; }
body.theme-dark .unread-divider::before, body.theme-dark .unread-divider::after { background: #4b2a2e; }
body.theme-dark .later-cnt { background: #4a4e57; }
body.theme-dark .pr-badge.muted { background: #4a4e57; }
body.theme-dark #msgList.multisel .msel-ck { background: #232529; border-color: #4a4e57; }
body.theme-dark #msgList.multisel .msel-ck.on { background: var(--accent); border-color: var(--accent); }
body.theme-dark #docToolbar { background: #17181b; }
body.theme-dark #docContent blockquote { background: #1e2024; color: #b9bfc9; }
body.theme-dark #docContent pre { background: #1b1d21; border-color: #34363c; }
body.theme-dark #docTitle { background: transparent; color: var(--txt); }
body.theme-dark .doc-share-tag { background: #1d2c45; }
body.theme-dark #recPill.rec-cancel { background: #3a1e20; }
body.theme-dark #btnVoice.recording { background: #3a1e20; }
body.theme-dark .cp-tag { background: var(--accent-weak); }
body.theme-dark .cp-tag.self { background: #1d3323; color: #5fbf77; }
body.theme-dark .cd-corp { background: var(--accent); }
body.theme-dark .mg-foot { border-top-color: #2c2e34; }
body.theme-dark .mg-rec { border-bottom-color: #26282d; }
body.theme-dark .msg-state.read { color: var(--accent); }
body.theme-dark .search-box input { color: var(--txt); }
body.theme-dark .search-box input::placeholder, body.theme-dark #msgInput::placeholder { color: #6e737d; }
body.theme-dark #msgInput { color: var(--txt); }
body.theme-dark .as-nav .as-tab { color: var(--txt); }
body.theme-dark .as-nav .as-tab:hover { background: #1e2024; }
body.theme-dark .railset-row, body.theme-dark #railsetList { border-bottom-color: #26282d; }
body.theme-dark .railset-btn { background: #232529; border-color: #34363c; color: #aeb4bf; }
body.theme-dark .railset-row.dragging { background: var(--accent-weak); }

/* 折叠屏(521-900) 非Electron壳(安卓/网页, body.no-frame-controls): 无需窗口拖拽条, 隐藏顶部标题栏 1:1 全屏 */
@media (min-width: 521px) and (max-width: 900px) {
  body.no-frame-controls #titlebar { display: none; }
  body.no-frame-controls #mainView, body.no-frame-controls #loginView { height: 100%; }
}

/* 移动端/折叠屏 1:1 细节: 会话头像一律圆形(含群), 名称旁成员数隐藏 */
@media (max-width: 900px) {
  .conv-item .avatar, #convList .avatar { border-radius: 50% !important; }
  .conv-name .conv-cnt { display: none; }
}

/* ---------------- 独立「九派账号管家」应用模式 (/acct, body.standalone-acct) ---------------- */
/* rail(一级边栏)整体隐藏 —— 桌面三栏变两栏, 移动端底部导航(就是rail本身)一并隐藏 */
body.standalone-acct #rail { display: none !important; }
/* 独立应用的第二栏菜单按钮(≡): 与齿轮同款 */
body.standalone-acct #acctAppMenuBtn { font-size: 18px; line-height: 1; }
/* 手机独立模式(≤520, 2026-11-08 用户拍板「不要整屏平铺, 左侧窄条」): 恒定两栏 = 左 88px 文字窄条(恒在, 任何模式不被顶掉/盖住 — 用户硬规则) + 内容区(未开链接时显首页说明), 不再两屏切换 */
@media (max-width: 520px) {
  body.standalone-acct #mainView { flex-direction: row; }
  body.standalone-acct #sidebar.acct-compact { width: 88px; min-width: 88px; flex: none; border-right: 1px solid var(--line); }
  body.standalone-acct #sidebar.acct-compact #sidebarAccounts { flex-direction: column; align-items: stretch; padding: 8px 4px 6px; }
  body.standalone-acct #sidebar.acct-compact #acctList {
    flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;
    align-items: stretch; align-content: stretch; gap: 2px; padding: 4px 0;
  }
  body.standalone-acct .acct-cgroup { width: 100%; text-align: left; font-size: 9px; padding: 6px 4px 1px; margin-top: 3px; }
  body.standalone-acct .acct-citem { padding: 7px 6px; border-radius: 7px; }
  body.standalone-acct .acct-citem .acct-cname {
    font-size: 11px; line-height: 1.25; white-space: normal; word-break: break-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.standalone-acct .acct-cext { display: none; }
  body.standalone-acct .acct-cfoot { display: none; }
  body.standalone-acct .acct-rail-btn { align-self: center; width: 36px; }
  body.standalone-acct .acct-rail-set { margin-top: auto; }
  body.standalone-acct #webPane:not(.hidden) { display: flex; flex: 1; min-width: 0; min-height: 0; }
}
/* 两栏恒定并存, 任何宽度都无需返回钮(◁) */
body.standalone-acct #wpBack { display: none !important; }
/* 折叠屏展开/中屏独立模式(521-900): 两栏并存 —— 列表栏收窄(紧凑版200px, 参照主IM中屏档手法)文字行列表, 内容区占余下 */
@media (min-width: 521px) and (max-width: 900px) {
  /* rail 已整体隐藏: 去掉底部导航占位行, 列表+内容两栏占满全高 */
  body.standalone-acct #mainView { grid-template-rows: minmax(0, 1fr) 0; }
  body.standalone-acct #mainView:has(> #sidebar.acct-compact) { grid-template-columns: 200px minmax(0, 1fr); }
  body.standalone-acct #sidebar.acct-compact { width: 200px; }
  body.standalone-acct #sidebar.acct-compact #sidebarAccounts { padding: 8px; }
  body.standalone-acct #sidebar.acct-compact #acctList { gap: 2px; }
  body.standalone-acct .acct-cgroup { font-size: 10.5px; }
  body.standalone-acct .acct-citem { padding: 9px 10px; }
  body.standalone-acct .acct-cname { font-size: 13px; }
  body.standalone-acct .acct-rail-btn { align-self: flex-end; }
  body.standalone-acct .acct-rail-set { margin-top: 0; }
}

/* ---------------- 账号管家 · 启动口令锁 (仅本机校验) ---------------- */
#acctLockGate {
  position: fixed; inset: 0; z-index: 450; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
#acctLockGate .alg-box { display: flex; flex-direction: column; gap: 10px; align-items: center; width: min(320px, 86vw); }
#acctLockGate .alg-title { font-size: 17px; font-weight: 600; }
#acctLockGate .alg-sub { font-size: 12px; color: var(--txt2); }
#acctLockGate input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bubble-other);
  padding: 10px 12px; font-size: 14px; text-align: center; letter-spacing: 2px; color: var(--txt); outline: none;
}
#acctLockGate input:focus { border-color: var(--accent); }
#acctLockGate .alg-err { font-size: 12px; color: var(--danger); height: 16px; }
#acctLockGate .alg-btns { display: flex; gap: 10px; }
#acctLockGate .alg-btns .m-btn { min-width: 96px; }
body.standalone-acct #algBack { display: none; }  /* 独立账号管家没有别处可回 */
body.theme-dark #acctLockGate { background: #121315; }

/* ================= 设置中心 (飞书式左分类+右内容, 复用账号管家 as-* 体系) ================= */
#modalBox.im-settings { width: 760px; max-width: 94%; height: 560px; max-height: 88%; }
#modalBox.im-settings .as-pane h4 { margin-bottom: 2px; }
/* 档位按钮组 (界面缩放/消息字号) */
.sc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sc-seg-b {
  border: none; background: #fff; color: var(--txt); padding: 6px 11px; font-size: 12px;
  cursor: pointer; border-left: 1px solid var(--line); white-space: nowrap;
}
.sc-seg-b:first-child { border-left: none; }
.sc-seg-b:hover:not(.active):not(:disabled) { background: #f0f2f5; }
.sc-seg-b.active { background: var(--accent); color: #fff; }
.sc-seg-b:disabled { opacity: .45; cursor: default; }
/* 窄屏/长按钮组: 标签在上, 按钮组换行在下 */
.as-opt.sc-opt-col { flex-wrap: wrap; }
/* 危险按钮(退出登录) */
.m-btn.sc-danger { color: var(--danger); border-color: #f3c6c8; }
.m-btn.sc-danger:hover { background: #fdf3f3; }
/* 字号实时预览: 一段示例消息气泡 */
.sc-preview { background: var(--sb-bg); border-radius: 10px; padding: 12px 14px 2px; margin: 2px 0 10px; }
.sc-preview .msg-body { max-width: 86%; }
.sc-about { padding-top: 10px; }
/* 消息字号四档: 基准 12/14/16/18px, 次级(会话摘要)同步缩放; 与配色解耦, 深浅色共用 */
:root { --msg-fs: 14px; --msg-fs-sub: 12px; }
body.font-small  { --msg-fs: 12px; --msg-fs-sub: 11px; }
body.font-large  { --msg-fs: 16px; --msg-fs-sub: 13px; }
body.font-xlarge { --msg-fs: 18px; --msg-fs-sub: 14px; }
/* 手机端(≤520): 设置中心全屏, 左分类栏改顶部横向 tab */
@media (max-width: 520px) {
  #modalBox.im-settings { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  #modalBox.im-settings .as-wrap { flex-direction: column; }
  #modalBox.im-settings .as-nav {
    width: 100%; flex: none; flex-direction: row; gap: 6px; padding: 8px 10px;
    border-right: none; border-bottom: 1px solid var(--line); overflow-x: auto;
  }
  #modalBox.im-settings .as-nav .as-tab { white-space: nowrap; flex: none; }
}
/* 深色皮肤 */
body.theme-dark .sc-seg { border-color: #34363c; }
body.theme-dark .sc-seg-b { background: #26282d; color: var(--txt); border-color: #34363c; }
body.theme-dark .sc-seg-b:hover:not(.active):not(:disabled) { background: #2c2f35; }
body.theme-dark .sc-seg-b.active { background: var(--accent); color: #fff; }
body.theme-dark .m-btn.sc-danger { border-color: #5a3034; }
body.theme-dark .m-btn.sc-danger:hover { background: #3a2529; }
body.theme-dark .sc-preview { background: var(--sb-bg); }
/* ================= 群治理 (管理员/禁言/入群审批/邀请链接) ================= */
#msgInput:disabled { background: transparent; color: var(--txt2); cursor: not-allowed; }
.dw-row.dw-click { cursor: pointer; }
.dw-row.dw-click:hover { background: var(--hov); }
.dw-badge { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.mc-adm { display: inline-block; margin-right: 2px; padding: 0 3px; border-radius: 3px;
  background: var(--accent-weak); color: var(--accent); font-size: 10px; line-height: 14px; vertical-align: 1px; }
.inv-link { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sb-bg); font-size: 12px; word-break: break-all; user-select: text; }
/* ================= 消息效率三件套: 加急/定时发送/翻译 (feat/msg-express) ================= */
.urgent-tag { background: #fdebec; color: #d93a3f; border-radius: 4px; padding: 0 5px;
  font-size: 11px; font-weight: 600; cursor: pointer; flex: none; }
#btnUrgent { font-size: 13px; font-weight: 700; }
#btnUrgent.on { color: #d93a3f; background: #fdebec; }
.conv-urgent { color: #d93a3f; font-weight: 600; }
#urgentEntry { display: flex; align-items: center; gap: 7px; margin: 0 8px 4px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  color: #d93a3f; flex: none; }
#urgentEntry:hover { background: #ececf0; }
#urgentEntry .ue-bolt { flex: none; }
.urgent-cnt { background: #d93a3f; }
#urgentStack { position: fixed; top: 46px; right: 14px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 28px)); }
.ug-card { background: #fff; border: 1px solid #f3c2c4; border-left: 4px solid #d93a3f;
  border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.ug-head { color: #d93a3f; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.ug-body { font-size: 13px; color: var(--txt); margin-bottom: 8px; word-break: break-all; }
.ug-foot { display: flex; gap: 8px; justify-content: flex-end; }
.ug-more { font-size: 12px; color: #d93a3f; cursor: pointer; text-align: right; }
.ug-st-row { cursor: default; display: flex; justify-content: space-between; }
.ug-st-ok { color: var(--accent); }
.ug-st-no { color: var(--txt2); }
.msg-trans { margin-top: 5px; font-size: 12px; }
.msg-trans-toggle { color: var(--accent); cursor: pointer; user-select: none; }
.msg-trans-text { margin-top: 4px; padding: 6px 8px; border-radius: 6px;
  background: rgba(120,130,150,.12); color: var(--txt); line-height: 1.5; white-space: pre-wrap; }
.sched-draft { background: rgba(120,130,150,.12); border-radius: 6px; padding: 6px 8px;
  font-size: 13px; margin-bottom: 8px; word-break: break-all; color: var(--txt); }
.sched-row { display: flex; gap: 8px; }
.sched-row .m-input { flex: 1; min-width: 0; }
.sched-row .m-btn { flex: none; }
.sched-sub { font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
.sched-sub-tip { color: var(--txt2); font-weight: 400; font-size: 12px; }
.sched-item { cursor: default; }
/* 深色主题 (body.theme-dark) */
body.theme-dark .urgent-tag, body.theme-dark #btnUrgent.on { background: #3a1e20; color: #ff7b81; }
body.theme-dark .conv-urgent, body.theme-dark #urgentEntry, body.theme-dark .ug-head,
body.theme-dark .ug-more { color: #ff7b81; }
body.theme-dark #urgentEntry:hover { background: var(--hov); }
body.theme-dark .ug-card { background: #1e2024; border-color: #4a2a2d; border-left-color: #d93a3f; }
body.theme-dark .urgent-cnt { background: #a8333a; }
body.theme-dark .msg-trans-text, body.theme-dark .sched-draft { background: #1b1d21; }