/* 颜色变量 —— 深色是默认，body.light 是浅色主题 */
:root {
  --n-1e1f22: #1e1f22;
  --n-dbdee1: #dbdee1;
  --n-6d6f78: #6d6f78;
  --n-2b2d31: #2b2d31;
  --n-131416: #131416;
  --n-313338: #313338;
  --n-f2f3f5: #f2f3f5;
  --n-949ba4: #949ba4;
  --n-404249: #404249;
  --n-b5bac1: #b5bac1;
  --n-5865f2: #5865f2;
  --n-4752c4: #4752c4;
  --n-4a2226: #4a2226;
  --n-f8a2a8: #f8a2a8;
  --n-35373c: #35373c;
  --n-23a55a: #23a55a;
  --n-ed4245: #ed4245;
  --n-f0b232: #f0b232;
  --n-232428: #232428;
  --n-80848e: #80848e;
  --n-4e5058: #4e5058;
  --n-2a2b30: #2a2b30;
  --n-26282c: #26282c;
  --n-3f4147: #3f4147;
  --n-00a8fc: #00a8fc;
  --n-383a40: #383a40;
  --n-3a3d44: #3a3d44;
  --n-eb459e: #eb459e;
  --n-1a1b1e: #1a1b1e;
}

body.light {
  --n-1e1f22: #e3e5e8;
  --n-dbdee1: #2e3338;
  --n-6d6f78: #80848e;
  --n-2b2d31: #f7f8f9;
  --n-131416: #ffffff;
  --n-313338: #ffffff;
  --n-f2f3f5: #060607;
  --n-949ba4: #5c5e66;
  --n-404249: #e3e5e8;
  --n-b5bac1: #4e5058;
  --n-5865f2: #5865f2;
  --n-4752c4: #4752c4;
  --n-4a2226: #4a2226;
  --n-f8a2a8: #f8a2a8;
  --n-35373c: #f0f1f3;
  --n-23a55a: #23a55a;
  --n-ed4245: #ed4245;
  --n-f0b232: #f0b232;
  --n-232428: #eef0f2;
  --n-80848e: #6d6f78;
  --n-4e5058: #d4d7dc;
  --n-2a2b30: #2a2b30;
  --n-26282c: #e3e5e8;
  --n-3f4147: #d9dce1;
  --n-00a8fc: #0066cc;
  --n-383a40: #f0f1f3;
  --n-3a3d44: #e3e5e8;
  --n-eb459e: #eb459e;
  --n-1a1b1e: #c7ccd1;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--n-1e1f22);
  color: var(--n-dbdee1);
  overflow: hidden;
}

.hidden { display: none !important; }
button, input { font-family: inherit; }
.muted { color: var(--n-6d6f78); font-size: 13px; }

/* ==================== 登录 / 注册 ==================== */
.auth {
  height: 100%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 15%, var(--n-2b2d31), var(--n-131416) 65%);
}
.auth-card {
  width: min(420px, 92vw); background: var(--n-313338); padding: 36px 34px 30px;
  border-radius: 14px; box-shadow: 0 18px 55px rgba(0,0,0,.55); text-align: center;
}
.auth-logo { font-size: 38px; line-height: 1; }
.auth-card h1 { margin: 10px 0 6px; font-size: 22px; color: var(--n-f2f3f5); }
.auth-sub { margin: 0 0 22px; color: var(--n-949ba4); font-size: 13px; }
.tabs { display: flex; background: var(--n-1e1f22); border-radius: 9px; padding: 4px; margin-bottom: 20px; }
.tab {
  flex: 1; padding: 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--n-949ba4); font-size: 14px; font-weight: 600; cursor: pointer;
}
.tab.active { background: var(--n-404249); color: var(--n-f2f3f5); }
.auth-card label {
  display: block; text-align: left; font-size: 12px; font-weight: 700; color: var(--n-b5bac1);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 14px;
}
.auth-card label input {
  width: 100%; margin-top: 7px; padding: 12px 13px; border-radius: 8px;
  border: 1px solid var(--n-1e1f22); background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 15px;
  outline: none; text-transform: none; letter-spacing: 0;
}
.auth-card label input:focus { border-color: var(--n-5865f2); }
.primary {
  width: 100%; padding: 13px; border: 0; border-radius: 9px; background: var(--n-5865f2);
  color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.primary:hover { background: var(--n-4752c4); }
.primary:disabled { opacity: .6; cursor: default; }
.auth-error {
  background: var(--n-4a2226); color: var(--n-f8a2a8); border-radius: 7px; padding: 10px 12px;
  font-size: 13px; text-align: left; margin-bottom: 12px;
}
/* 这行小字只在手机上显示（桌面版的卡片不需要） */
.auth-note { display: none; }

/* ---------- 手机上：登录页是**整页**的，没有卡片、没有边框、没有阴影 ----------
   用户明确要求过："登录页面是一个全屏的页面，你还给我做了一个框，难看死了"。
   所以窄屏下把卡片拆掉，改成微信那种一行一条的整页登录。 */
@media (max-width: 680px) {
  .auth {
    display: block; padding: 0;
    background: var(--n-313338);
  }
  .auth-card {
    width: 100%; max-width: none; min-height: 100%;
    padding: 54px 26px 26px;
    border-radius: 0; box-shadow: none; background: transparent;
    display: flex; flex-direction: column; text-align: center;
  }
  .auth-logo { font-size: 30px; }
  .auth-card h1 { font-size: 19px; margin: 12px 0 6px; }
  .auth-sub { margin: 0 0 24px; }

  /* 表单撑满剩下的高度，大按钮自然落到底部附近（微信也靠下） */
  .auth-card form { display: flex; flex-direction: column; flex: 1; }

  /* 一行一条：左边写"用户名"，右边直接输，底下一条细线 */
  .auth-card label {
    display: flex; align-items: center; gap: 14px; margin: 0;
    padding: 16px 0; font-size: 16px; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: var(--n-f2f3f5);
    border-bottom: 1px solid var(--n-404249);
  }
  .auth-card label input {
    flex: 1; min-width: 0; width: auto; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent;
    font-size: 16px; color: var(--n-f2f3f5); text-align: left;
  }
  .auth-card label input:focus { border: 0; }
  .auth-card label input::placeholder { color: var(--n-6d6f78); }

  .auth-note {
    display: block; margin: 12px 0 0;
    font-size: 12.5px; color: var(--n-6d6f78); text-align: left;
  }
  .primary { margin-top: auto; padding: 15px; font-size: 17px; border-radius: 8px; }
  .auth-qr-btn { margin-top: 12px; padding: 13px; font-size: 15px; }
}

/* ==================== 骨架 ==================== */
.app { height: 100%; display: flex; position: relative; overflow: hidden; }
.menu-btn { display: none; font-size: 19px; }

/* ---------- 第一栏 ---------- */
.rail {
  width: 72px; background: var(--n-1e1f22); padding: 12px 0; display: flex;
  flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0;
}
.rail-sep { width: 32px; height: 2px; background: var(--n-35373c); border-radius: 1px; margin: 2px 0; }

/* Discord 那个"小竖条"：悬停时一小截，选中时变长 */
.rail-item {
  position: relative; width: 100%; display: flex;
  justify-content: center; flex-shrink: 0;
}
.rail-pill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 0; border-radius: 0 4px 4px 0;
  background: var(--n-f2f3f5);
  transition: height .16s ease;
}
.rail-item:hover .rail-pill { height: 20px; }
.rail-item.active .rail-pill { height: 40px; }
.rail-list {
  display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  align-items: center; width: 100%; flex: 0 1 auto; min-height: 0;
}
.rail-btn, .rail-server {
  width: 48px; height: 48px; border: 0; border-radius: 16px; background: var(--n-313338);
  color: var(--n-dbdee1); font-size: 17px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center; transition: border-radius .15s, background .15s;
}
/* ★ 这里以前是 overflow:hidden —— 它会把"服务器图标右上角那个未读红数字"裁掉
   （红数字是 append 到按钮里的，超出按钮的部分全被切了，用户看到的就是数字没了）。
   改成：按钮不裁，头像图片自己带圆角，效果一样但红数字完整露出来。 */
.rail-server, .rail-btn { overflow: visible; }
.rail-server .rail-img, .rail-btn .rail-img { border-radius: inherit; }
.rail-btn:hover, .rail-server:hover { border-radius: 14px; background: var(--n-5865f2); color: #fff; }
.rail-server.active { border-radius: 14px; background: var(--n-5865f2); color: #fff; }
.rail-home { font-size: 20px; }
.rail-home.active { border-radius: 14px; background: var(--n-5865f2); color: #fff; }
.rail-add { color: var(--n-23a55a); }
.rail-add:hover { background: var(--n-23a55a); color: #fff; }
.rail-out { margin-top: auto; font-size: 15px; color: var(--n-6d6f78); }
.rail-out:hover { background: var(--n-ed4245); color: #fff; }
.rail-admin { font-size: 16px; color: var(--n-949ba4); }
.rail-admin:hover { background: var(--n-f0b232); color: var(--n-1e1f22); }
.rail-discover { font-size: 17px; }

/* 未读小红点 */
.unread {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--n-ed4245); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0; margin-left: 4px;
}
.rail-server { position: relative; }
.rail-dot {
  position: absolute; top: -2px; right: -2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--n-ed4245); border: 2px solid var(--n-1e1f22);
}
.rail-item { position: relative; }
.rail-badge {
  position: absolute; top: -4px; right: -6px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--n-ed4245); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid var(--n-1e1f22);
  pointer-events: none; line-height: 1;
}
/* 私信那个红数字是挂在"外层"(.rail-item，整栏宽 72px)上的，
   所以 right:-6px 会把它推到栏外面去 —— 这里把它拉回图标的右上角。
   （服务器那个红数字挂在按钮里，仍用上面的 -6px，位置正好。） */
.rail-item > .rail-badge { right: 6px; }

/* ---------- 第二栏 ---------- */
.channels { width: 240px; background: var(--n-2b2d31); display: flex; flex-direction: column; flex-shrink: 0; }
.server-head {
  height: 50px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; font-weight: 700; color: var(--n-f2f3f5); font-size: 15px;
  border-bottom: 1px solid var(--n-232428); box-shadow: 0 1px 0 rgba(0,0,0,.2);
  flex-shrink: 0; white-space: nowrap; overflow: hidden;
}
.server-head span:first-child { overflow: hidden; text-overflow: ellipsis; }
.side-chev { font-size: 15px; padding: 2px 6px; color: var(--n-b5bac1); }

/* 顶部搜索框（Discord 那种） */
.chat-search {
  width: 190px; padding: 5px 10px; margin-right: 6px;
  border-radius: 5px; border: 0; background: var(--n-1e1f22);
  color: var(--n-dbdee1); font-size: 12.5px; outline: none; cursor: pointer;
}
.chat-search:hover { background: var(--n-232428); }
.chat-search::placeholder { color: var(--n-6d6f78); }

/* 输入框改成 Discord 那种"一条圆角框里放 + / 输入 / 表情" */
.composer-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  position: relative;
  background: var(--n-383a40); border-radius: 9px; padding: 2px 7px;
}
.composer-box input,
.post-comment-box input {
  flex: 1; min-width: 0; background: transparent !important;
  border: 0; padding: 11px 4px; color: var(--n-f2f3f5);
  font-size: 15px; outline: none;
}
.composer-tool {
  border: 0; background: transparent; color: var(--n-b5bac1);
  cursor: pointer; border-radius: 6px; padding: 5px 5px;
  font-size: 12px; font-weight: 800; line-height: 1; flex-shrink: 0;
}
.composer-tool:hover { background: var(--n-3f4147); color: var(--n-f2f3f5); }
.emoji-btn {
  border: 0; background: transparent; cursor: pointer; font-size: 18px;
  padding: 3px 6px; border-radius: 6px; line-height: 1; flex-shrink: 0;
}
.emoji-btn:hover { background: var(--n-3f4147); }
.composer-toast {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px);
  background: var(--n-111214); color: var(--n-f2f3f5); border: 1px solid var(--n-2b2d31);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: .16s ease;
}
.composer-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 社区菜单 */
.side-menu {
  position: absolute; z-index: 130; width: 210px;
  background: var(--n-232428); border-radius: 10px; padding: 6px;
  border: 1px solid var(--n-1e1f22); box-shadow: 0 12px 36px rgba(0,0,0,.6);
}

/* ---------- 编辑个人资料（左设置 + 右预览）---------- */
.editor-card {
  width: min(1000px, 96vw); max-height: 90vh;
  background: var(--n-313338); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--n-1e1f22);
}
.editor-head h2 { margin: 0; font-size: 18px; color: var(--n-f2f3f5); }
.editor-body { flex: 1; display: flex; min-height: 0; }
.editor-left {
  width: 340px; flex-shrink: 0; overflow-y: auto;
  padding: 18px 20px; border-right: 1px solid var(--n-1e1f22);
}
.editor-right {
  flex: 1; min-width: 0; overflow-y: auto; padding: 18px 20px;
  background: var(--n-2b2d31);
}
.ed-sec {
  font-size: 11.5px; font-weight: 700; color: var(--n-949ba4);
  letter-spacing: .4px; margin: 16px 0 8px;
}
.ed-sec:first-child { margin-top: 0; }
.ed-row { display: flex; align-items: center; gap: 10px; }
.ed-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--n-5865f2); background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 700;
}
.ed-banner {
  width: 120px; height: 62px; border-radius: 8px; flex-shrink: 0;
  background: var(--n-5865f2); background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; font-size: 11px; opacity: .95;
}
.ed-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-swatch {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent;
}
.ed-swatch:hover { filter: brightness(1.15); }
.ed-swatch.on { border-color: var(--n-f2f3f5); }
.ed-color-input {
  width: 46px; height: 38px; padding: 0; border: 0; border-radius: 8px;
  background: var(--n-1e1f22); cursor: pointer;
}
.ed-hex {
  width: 96px; padding: 9px 10px; border-radius: 8px; border: 0;
  background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 13px; outline: none;
}
.ed-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 0;
  background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 14px; outline: none;
}
.ed-preview-label {
  font-size: 11.5px; font-weight: 700; color: var(--n-949ba4);
  letter-spacing: .4px; margin-bottom: 10px;
}
.ed-preview { width: 320px; }
.ed-preview .profile-pop { position: static; box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.editor-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--n-1e1f22);
  background: var(--n-2b2d31);
}

@media (max-width: 820px) {
  .editor-body { flex-direction: column; }
  .editor-left { width: auto; border-right: 0; border-bottom: 1px solid var(--n-1e1f22); }
  .ed-preview { width: auto; }
}
.channel-scroll { flex: 1; overflow-y: auto; padding: 12px 8px; }

.cat {
  font-size: 11px; font-weight: 700; color: var(--n-949ba4); letter-spacing: .5px;
  padding: 16px 8px 6px; display: flex; align-items: center; gap: 6px;
}
.cat:first-child { padding-top: 4px; }
.cat.clickable { cursor: pointer; user-select: none; }
.cat.clickable:hover { color: var(--n-dbdee1); }
.cat-arrow {
  display: inline-block; width: 10px; transition: transform .15s;
  font-size: 10px; color: var(--n-6d6f78);
}
.cat.collapsed .cat-arrow { transform: rotate(-90deg); }
.cat-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-add {
  flex-shrink: 0; width: 20px; height: 20px; margin-left: auto;
  display: grid; place-items: center; border: 0; border-radius: 5px;
  background: transparent; color: var(--n-949ba4); cursor: pointer;
  font: 700 17px/1 inherit; padding: 0; opacity: .85;
  transition: background .12s, color .12s, opacity .12s;
}
.cat-add:hover {
  background: var(--n-35373c); color: var(--n-f2f3f5); opacity: 1;
}
.cat .badge {
  background: var(--n-ed4245); color: #fff; font-size: 10px; padding: 1px 6px;
  border-radius: 999px; margin-left: auto;
}

/* 好友分组：比频道分类紧凑一点，跟「好友 — N」拉开层次 */
.cat.fgroup { padding: 9px 8px 3px; }

/* ---------- 频道图标：预设 + 自己上传 ---------- */
.invite-card {
  background: #fff; border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* 邀请卡片可能从「社区设置 / 群设置」里弹出来，必须压在那两个窗口上面 */
#inviteModal { z-index: 70; }
.invite-who { display: flex; align-items: center; gap: 10px; width: 100%; }
.invite-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #5865f2; background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 700;
}
/* 群用的是预设 emoji 图标时：圆形底换成深色，让 emoji 本身显示出来 */
.invite-av.emoji {
  background: #2b2d31; font-size: 22px; font-weight: 400;
}
.invite-av.letter { color: #fff; }
.invite-name { font-size: 16px; font-weight: 800; color: #14161a; line-height: 1.3; }
.invite-sub { font-size: 12px; color: #6b7280; }
.invite-qr { line-height: 0; }
.invite-qr svg { display: block; }
.invite-line { display: flex; gap: 8px; align-items: center; }
.invite-line input {
  flex: 1; min-width: 0; padding: 9px 10px; border: 0; border-radius: 7px;
  background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 12.5px; outline: none;
}

.chan-icon-pick { margin-top: 14px; }
.cip-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--n-949ba4); margin-bottom: 8px;
}
.cip-now {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  background: var(--n-1e1f22); color: var(--n-f2f3f5);
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.cip-now.is-img { font-size: 0; }
.cip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cip-item {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid transparent; background: var(--n-2b2d31);
  color: var(--n-dbdee1); font-size: 17px; line-height: 1;
  display: grid; place-items: center; padding: 0;
  transition: background .12s, border-color .12s;
}
.cip-item:hover { background: var(--n-35373c); }
.cip-item.on { border-color: var(--n-5865f2); background: var(--n-35373c); }
.cip-item.cip-default { font-weight: 800; color: var(--n-949ba4); font-size: 15px; }
.cip-actions { display: flex; gap: 8px; margin-top: 10px; }
.cip-actions label { cursor: pointer; }

.channel {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px; margin: 1px 0;
  border-radius: 6px; color: var(--n-949ba4); font-size: 14.5px; cursor: pointer;
  user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.channel:hover { background: var(--n-35373c); color: var(--n-dbdee1); }
.channel.active { background: var(--n-404249); color: var(--n-f2f3f5); font-weight: 600; }
.channel .ico { opacity: .65; font-size: 15px; flex-shrink: 0; }
.channel .ico.ico-img {
  width: 16px; height: 16px; border-radius: 4px; opacity: 1;
  background-size: cover; background-position: center;
}
.chan-icon.chan-icon-img { color: transparent; border-radius: 5px; }

.friend {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px;
  border-radius: 6px; cursor: pointer; color: var(--n-949ba4); font-size: 14.5px;
  user-select: none;
}
.friend:hover { background: var(--n-35373c); color: var(--n-dbdee1); }
.friend.active { background: var(--n-404249); color: var(--n-f2f3f5); font-weight: 600; }
.friend .avatar { width: 30px; height: 30px; font-size: 13px; }
.friend .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--n-80848e); flex-shrink: 0;
}
.friend .dot.on { background: var(--n-23a55a); }

/* ---------- 未读：一眼就能看见（跟微信一个思路） ---------- */
/* 头像右上角的小红点（img 里放不了子元素，所以套了一层壳） */
.av-wrap { position: relative; display: flex; flex-shrink: 0; }
.av-red {
  position: absolute; top: -2px; right: -3px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--n-ed4245);
  border: 2px solid var(--n-2b2d31); z-index: 1;
}
/* 有未读的会话：名字加粗变白 */
.friend.has-unread .fname { color: var(--n-f2f3f5); font-weight: 700; }
.friend.has-unread .avatar, .friend.has-unread .group-avatar { filter: brightness(1.12); }
.channel.has-unread { color: var(--n-f2f3f5); font-weight: 600; }

.req {
  display: flex; align-items: center; gap: 8px; padding: 8px;
  border-radius: 7px; background: var(--n-35373c); margin-bottom: 6px;
}
.req .avatar { width: 28px; height: 28px; font-size: 12px; }
.req .rname { flex: 1; font-size: 13.5px; color: var(--n-f2f3f5); overflow: hidden; text-overflow: ellipsis; }
.minibtn {
  border: 0; border-radius: 5px; padding: 5px 9px; font-size: 12px;
  font-weight: 600; cursor: pointer; color: #fff; background: var(--n-23a55a);
}
.minibtn.gray { background: var(--n-4e5058); }
.minibtn.danger { background: var(--n-ed4245); }
.minibtn.danger:hover { filter: brightness(1.1); }
.minibtn:hover { filter: brightness(1.12); }
.minibtn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

.add-friend {
  display: flex; align-items: center; gap: 7px; padding: 9px 8px; margin-top: 6px;
  border-radius: 6px; cursor: pointer; color: var(--n-23a55a); font-size: 14px; font-weight: 600;
}
.add-friend:hover { background: var(--n-35373c); }

.empty-note { color: var(--n-6d6f78); font-size: 13px; padding: 10px 8px; line-height: 1.7; }

.me-bar {
  /* Discord 那种"悬浮卡片"：四周留边、圆角、带阴影 */
  height: 52px; background: var(--n-232428);
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; flex-shrink: 0;
  /* 向左延伸盖住左栏底部 —— Discord 的用户栏是跟服务器那一列连成一整块的 */
  margin: 0 8px 8px -64px;
  position: relative;
  z-index: 6;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.me-bar:hover { background: var(--n-2a2b30); }
.me-avatar-wrap { position: relative; flex-shrink: 0; }
.me-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 3px solid var(--n-232428); background: var(--n-23a55a);
}
.me-dot.away { background: var(--n-f0b232); }
.me-dot.dnd { background: var(--n-ed4245); }
.me-dot.invisible { background: var(--n-80848e); }
.me-avatar-btn, .me-info-btn { border: 0; background: transparent; padding: 0; cursor: pointer; }
.me-info-btn { flex: 1; min-width: 0; text-align: left; display: block; }
.me-info { flex: 1; min-width: 0; line-height: 1.25; }
.me-name { font-size: 13.5px; font-weight: 600; color: var(--n-f2f3f5); overflow: hidden; text-overflow: ellipsis; }
.me-status { font-size: 11.5px; color: var(--n-23a55a); }
.me-btn {
  border: 0; background: transparent; color: var(--n-b5bac1); font-size: 16px;
  cursor: pointer; padding: 6px; border-radius: 6px;
}
.me-btn:hover { background: var(--n-35373c); color: var(--n-f2f3f5); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--n-5865f2);
  object-fit: cover;
}
.avatar[src] { object-fit: cover; background: var(--n-232428); }
/* 注意：这里必须用绝对定位。
   父元素是 display:grid + place-items:center，如果只用 width/height:100%，
   grid 的隐式轨道会先按内容算尺寸，和百分比形成循环依赖，
   浏览器会算出一个错误的大小（实测是 36x46 而不是 48x48，头像会被压扁）。 */
.rail-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.group-avatar { object-fit: cover; }

/* ---------- 第三栏 ---------- */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--n-313338); position: relative; }
.chat-head {
  height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid var(--n-26282c); color: var(--n-f2f3f5); flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.hash { color: var(--n-80848e); font-size: 20px; font-weight: 700; }

/* 聊天区标题左边的小图标：频道是 #，私聊是对方头像，群聊是群头像 */
.chan-icon { display: flex; align-items: center; flex-shrink: 0; }
.chan-icon.hash { color: var(--n-80848e); font-size: 20px; font-weight: 700; }
.chan-avatar { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.chan-avatar-img {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background-size: cover; background-position: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.chan-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--n-313338); background: var(--n-23a55a);
}
.chan-dot.away { background: var(--n-f0b232); }
.chan-dot.dnd { background: var(--n-ed4245); }
.chan-dot.off { background: var(--n-80848e); }
.chat-head-note { color: var(--n-6d6f78); font-size: 13px; }
.chat-head-right { margin-left: auto; }
/* 频道图标 + 会话名字，当成一组（手机上整体居中） */
.chat-head-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pill {
  background: var(--n-23a55a); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.pill.gray { background: var(--n-4e5058); }

.messages { flex: 1; overflow-y: auto; padding: 20px 16px 8px; }
.date-line {
  display: flex; align-items: center; gap: 10px; color: var(--n-6d6f78);
  font-size: 12px; margin: 18px 0 10px;
}
.date-line::before, .date-line::after { content: ""; flex: 1; height: 1px; background: var(--n-3f4147); }
.sys { color: var(--n-6d6f78); font-size: 13.5px; padding: 8px 0; }

.msg { display: flex; gap: 14px; padding: 4px 0; }
.msg.grouped { padding-top: 0; }
.msg .avatar { margin-top: 2px; }
.msg .body { min-width: 0; flex: 1; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; }
.msg .who { font-weight: 600; font-size: 14.5px; }
.msg .time { font-size: 11px; color: var(--n-6d6f78); }
.msg .text {
  font-size: 15px; line-height: 1.55; white-space: pre-wrap;
  word-break: break-word; color: var(--n-dbdee1);
}
.msg .spacer { width: 32px; height: 1px; flex-shrink: 0; }

.composer {
  position: relative; display: flex; gap: 10px;
  padding: 12px 16px; flex-shrink: 0;
}
.clip {
  border: 0; background: transparent; color: var(--n-b5bac1); font-size: 20px;
  cursor: pointer; padding: 0 8px; border-radius: 8px; flex-shrink: 0;
}
.clip:hover { background: var(--n-3f4147); color: var(--n-f2f3f5); }

.msg-image {
  max-width: min(420px, 60vw); max-height: 320px; border-radius: 9px;
  margin-top: 6px; display: block; cursor: pointer; background: var(--n-232428);
}
.msg-file {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
  padding: 10px 14px; background: var(--n-2b2d31); border: 1px solid var(--n-3f4147);
  border-radius: 9px; color: var(--n-00a8fc); text-decoration: none; font-size: 14px;
}
.msg-file:hover { background: var(--n-35373c); }
.msg-file .fmeta { color: var(--n-6d6f78); font-size: 12px; }

.field {
  display: block; font-size: 12px; font-weight: 700; color: var(--n-b5bac1);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px;
}
.field input {
  width: 100%; margin-top: 7px; padding: 11px 13px; border-radius: 8px;
  border: 0; background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 15px; outline: none;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.hr { border: 0; border-top: 1px solid var(--n-3f4147); margin: 20px 0 14px; }
.row { display: flex; gap: 8px; }
.row input {
  flex: 1; padding: 10px 12px; border-radius: 8px; border: 0;
  background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 14px; outline: none;
}
.row select {
  padding: 10px; border-radius: 8px; border: 0; background: var(--n-1e1f22);
  color: var(--n-f2f3f5); font-size: 14px; outline: none;
}
.admin-list { max-height: 240px; overflow-y: auto; }
.admin-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 6px; }
.admin-row:hover { background: var(--n-35373c); }
.admin-row .avatar { width: 28px; height: 28px; font-size: 12px; }
.admin-row .aname { flex: 1; font-size: 14px; color: var(--n-f2f3f5); }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--n-4e5058); color: var(--n-dbdee1); }
.tag.owner { background: var(--n-f0b232); color: var(--n-1e1f22); font-weight: 700; }
.tag.admin { background: var(--n-5865f2); color: #fff; }

.avatar-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.field-select {
  width: 100%; margin-top: 7px; padding: 11px 13px; border-radius: 8px;
  border: 0; background: var(--n-1e1f22); color: var(--n-f2f3f5);
  font-size: 15px; outline: none; font-weight: 400; text-transform: none;
}

.empty-state { padding: 60px 20px; text-align: center; color: var(--n-6d6f78); }
.es-icon { font-size: 44px; opacity: .5; margin-bottom: 14px; }
.es-title { font-size: 16px; color: var(--n-b5bac1); font-weight: 600; margin-bottom: 8px; }
.es-sub { font-size: 13.5px; line-height: 1.7; white-space: pre-line; }

.msg-link { color: var(--n-00a8fc); text-decoration: none; word-break: break-all; }
.msg-link:hover { text-decoration: underline; }

/* ---------- 聊天消息上的新东西 ---------- */
.typing-bar { color: var(--n-23a55a); font-size: 12.5px; margin-left: 8px; }

.msg { position: relative; }
.msg.mentioned { background: rgba(240, 178, 50, .10); border-left: 3px solid var(--n-f0b232); border-radius: 6px; }
.mention {
  background: rgba(88, 101, 242, .28); color: var(--n-00a8fc);
  padding: 1px 5px; border-radius: 4px; font-weight: 600;
}
.mention.me { background: var(--n-f0b232); color: #1e1f22; }
.edited { color: var(--n-6d6f78); font-size: 11px; margin-left: 4px; }
.text.deleted { color: var(--n-6d6f78); font-style: italic; font-size: 13.5px; }

/* "新成员加入"卡片（Discord 的 WELCOME 频道那种） */
.join-card {
  display: flex; align-items: center; gap: 16px;
  margin: 10px 0; padding: 16px 20px;
  background: var(--n-2b2d31); border-radius: 10px;
  border-left: 4px solid var(--n-23a55a);
}
.join-card .join-avatar { width: 56px !important; height: 56px !important; font-size: 22px; }
.join-name { font-size: 15px; font-weight: 700; color: var(--n-23a55a); }
.join-sub { font-size: 12.5px; color: var(--n-6d6f78); margin-top: 4px; }

.msg-tools {
  position: absolute; top: -14px; right: 12px; display: none; gap: 2px;
  background: var(--n-2b2d31); border: 1px solid var(--n-3f4147);
  border-radius: 8px; padding: 2px; z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.msg:hover .msg-tools { display: flex; }
.mtool {
  border: 0; background: transparent; cursor: pointer; font-size: 14px;
  padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.mtool:hover { background: var(--n-3f4147); }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reaction {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  background: var(--n-2b2d31); border: 1px solid var(--n-3f4147);
  border-radius: 999px; padding: 2px 8px; font-size: 13px; color: var(--n-b5bac1);
}
.reaction:hover { border-color: var(--n-5865f2); }
.reaction.mine { background: rgba(88,101,242,.22); border-color: var(--n-5865f2); color: var(--n-f2f3f5); }
.rcount { font-size: 11.5px; font-weight: 700; color: var(--n-dbdee1); }
.reaction { min-height: 22px; }

.emoji-pop {
  position: fixed; z-index: 200; display: flex; gap: 2px;
  background: var(--n-2b2d31); border: 1px solid var(--n-3f4147);
  border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.emoji-pop button {
  border: 0; background: transparent; font-size: 19px; cursor: pointer;
  padding: 5px 7px; border-radius: 7px; line-height: 1;
}
.emoji-pop button:hover { background: var(--n-3f4147); }

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.88);
  display: grid; place-items: center; cursor: zoom-out;
}
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

.mention-box {
  position: fixed; z-index: 210; background: var(--n-2b2d31);
  border: 1px solid var(--n-3f4147); border-radius: 9px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); max-height: 220px; overflow-y: auto;
}
.mention-box button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--n-dbdee1); padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 14px; white-space: nowrap;
}
.mention-box button:hover, .mention-box button.sel { background: var(--n-5865f2); color: #fff; }

.newline-divider {
  display: flex; align-items: center; gap: 10px; color: var(--n-ed4245);
  font-size: 12px; margin: 14px 0 8px; font-weight: 600;
}
.newline-divider::before, .newline-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--n-ed4245); opacity: .5;
}

.dot.away { background: var(--n-f0b232); }
.dot.dnd { background: var(--n-ed4245); }

.check-row { display: block; margin-top: 8px; }

/* ---------- 个人资料弹窗 ---------- */
.profile-pop {
  position: fixed; z-index: 120; width: 300px;
  background: var(--n-232428); border-radius: 12px;
  /* 注意：这里不能写 overflow: hidden —— 状态的弹出子菜单会被裁掉。
     圆角改由横幅自己处理。 */
  overflow: visible;
  border: 1px solid var(--n-1e1f22);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .6);
}
.pp-banner {
  height: 78px; background: var(--n-5865f2);
  background-size: cover; background-position: center;
  border-radius: 11px 11px 0 0;
}
.pp-head { padding: 0 14px 4px; }
.pp-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  border: 6px solid var(--n-232428); margin-top: -44px;
  background-size: cover; background-position: center;
  background-color: var(--n-5865f2); color: #fff;
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
  position: relative;
}
/* 点自己资料卡上的头像/横幅能进编辑页，鼠标放上去给点反馈 */
.pp-avatar[title]:hover, .pp-banner[title]:hover { filter: brightness(1.12); }
.pp-banner[title]:hover::after {
  content: '点这里改横幅'; position: absolute; inset: 0;
  display: grid; place-items: center; background: rgba(0,0,0,.35);
  font-size: 12px; color: #fff;
}
.pp-dot {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  border-radius: 50%; border: 5px solid var(--n-232428);
  background: var(--n-23a55a);
}
.pp-dot.away { background: var(--n-f0b232); }
.pp-dot.dnd { background: var(--n-ed4245); }
.pp-dot.off { background: var(--n-80848e); }
.pp-name { margin: 10px 0 2px; font-size: 19px; font-weight: 700; color: var(--n-f2f3f5); }
.pp-user { font-size: 12.5px; color: var(--n-949ba4); }
.pp-bio {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--n-1e1f22);
  font-size: 13px; color: var(--n-b5bac1); line-height: 1.6;
}
.pp-label {
  font-size: 11px; font-weight: 700; color: var(--n-949ba4);
  letter-spacing: .4px; padding: 10px 10px 4px;
}
.pp-body { padding: 6px 8px 10px; }
.pp-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  /* Discord 那种"填色小块"：每行一个底色块，块之间有缝 */
  border: 0; background: var(--n-2b2d31); color: var(--n-b5bac1);
  padding: 10px 10px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-family: inherit;
  margin-bottom: 6px;
}
.pp-item:hover { background: var(--n-35373c); color: var(--n-f2f3f5); }
.pp-item.danger { color: var(--n-ed4245); }
.pp-item.danger:hover { background: var(--n-ed4245); color: #fff; }
.pp-item .ico { width: 18px; text-align: center; flex-shrink: 0; }
.pp-sep { height: 1px; background: var(--n-1e1f22); margin: 6px 8px; }
.pp-status-row { display: flex; gap: 6px; padding: 4px 6px 2px; }
.pp-status-row button {
  flex: 1; border: 1px solid var(--n-3f4147); background: var(--n-2b2d31);
  color: var(--n-b5bac1); border-radius: 8px; padding: 7px 4px;
  font-size: 12px; cursor: pointer; font-family: inherit;
}
.pp-status-row button:hover { border-color: var(--n-5865f2); color: var(--n-f2f3f5); }
.pp-status-row button.on { border-color: var(--n-5865f2); background: var(--n-5865f2); color: #fff; }

/* ---------- 资料卡：自定义状态气泡 ---------- */
.pp-avatar-row { display: flex; align-items: flex-end; gap: 10px; margin-top: -44px; }
.pp-status-bubble {
  flex: 1; min-width: 0; margin-bottom: 6px;
  background: var(--n-1e1f22); border-radius: 14px 14px 14px 4px;
  padding: 7px 12px; font-size: 12.5px; color: var(--n-dbdee1);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pp-status-bubble .e { flex-shrink: 0; }
.pp-status-bubble .t { overflow: hidden; text-overflow: ellipsis; }
.pp-avatar-row .pp-avatar { margin-top: 0; }

/* ---------- 资料卡：可展开的菜单行 ---------- */
.pp-item .chev { margin-left: auto; color: var(--n-6d6f78); font-size: 15px; }
.pp-item .sub { color: var(--n-6d6f78); font-size: 11.5px; margin-left: 27px; }

/* 顶部那张推广卡（Discord 是 Nitro，我们换成换头像/换横幅） */
.pp-promo {
  border: 1px solid var(--n-5865f2); border-radius: 10px;
  padding: 10px; margin: 0 0 10px;
}
.pp-promo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.pp-promo-title { font-size: 13px; font-weight: 700; color: var(--n-f2f3f5); }
.pp-promo-x {
  border: 0; background: transparent; color: var(--n-b5bac1);
  font-size: 13px; cursor: pointer; padding: 2px 5px; border-radius: 5px; line-height: 1;
}
.pp-promo-x:hover { background: var(--n-3f4147); color: var(--n-f2f3f5); }
.pp-promo-btns { display: flex; gap: 8px; }
.pp-promo-btns button {
  flex: 1; border: 0; border-radius: 8px; background: var(--n-4e5058);
  color: var(--n-f2f3f5); padding: 9px 6px; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.pp-promo-btns button:hover { background: var(--n-5d6069); }
.pp-item-wrap { position: relative; }
.pp-flyout {
  position: absolute; left: calc(100% + 6px); bottom: 0; z-index: 130;
  width: 250px; background: var(--n-232428); border-radius: 10px;
  border: 1px solid var(--n-1e1f22); padding: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .6);
}
.pp-flyout .row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--n-b5bac1);
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-family: inherit;
}
.pp-flyout .row:hover { background: var(--n-35373c); color: var(--n-f2f3f5); }
.pp-flyout .dot2 { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.pp-flyout .txt { flex: 1; min-width: 0; }
.pp-flyout .t1 { font-size: 13.5px; }
.pp-flyout .t2 { font-size: 11px; color: var(--n-6d6f78); margin-top: 2px; }
.pp-flyout .tick { color: var(--n-23a55a); font-weight: 700; }
@media (max-width: 700px) {
  .pp-flyout { left: 0; right: 0; bottom: auto; top: calc(100% + 4px); width: auto; }
}
.chk {
  display: flex !important; align-items: center; gap: 8px; margin: 6px 0;
  font-size: 13.5px; color: var(--n-b5bac1); text-transform: none;
  letter-spacing: 0; font-weight: 400; cursor: pointer;
}
.chk input { width: 16px; height: 16px; accent-color: var(--n-5865f2); cursor: pointer; }
.avatar-big {
  width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--n-5865f2); color: #fff;
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
}
.avatar-big.round-square { border-radius: 22px; }
.banner-preview {
  width: 150px; height: 76px; border-radius: 10px; flex-shrink: 0;
  background: var(--n-5865f2); background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; font-size: 12px; opacity: .95;
}

.stats {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  font-size: 12px; color: var(--n-6d6f78); border-top: 1px solid var(--n-26282c);
  background: var(--n-2b2d31); flex-shrink: 0;
}
.stats strong { color: var(--n-b5bac1); }
.stats .zero { color: var(--n-23a55a); font-size: 14px; }
.stats .sep { color: var(--n-3f4147); }
.why {
  margin-left: auto; cursor: pointer; color: var(--n-5865f2);
  border-bottom: 1px dotted var(--n-5865f2); user-select: none;
}

/* ---------- 第四栏 ---------- */
.members { width: 220px; background: var(--n-2b2d31); padding: 14px 10px; overflow-y: auto; flex-shrink: 0; }
.members-title {
  font-size: 11px; font-weight: 700; color: var(--n-949ba4); letter-spacing: .5px; padding: 0 8px 10px;
}
.members-list { list-style: none; margin: 0; padding: 0; }
.members-list li {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 6px; color: var(--n-b5bac1); font-size: 14px;
}
.members-list li:hover { background: var(--n-35373c); }
.members-list li.online .mname { color: var(--n-f2f3f5); }
.members-list .avatar { width: 28px; height: 28px; font-size: 12px; }
.members-list .avatar.dim { filter: grayscale(1) brightness(.6); }
.dot-online { width: 8px; height: 8px; border-radius: 50%; background: var(--n-23a55a); margin-left: auto; flex-shrink: 0; }
.member-group {
  font-size: 11px; font-weight: 700; color: var(--n-949ba4);
  letter-spacing: .4px; padding: 12px 8px 4px; cursor: default;
}
.member-group:hover { background: transparent !important; }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: grid; place-items: center; z-index: 50;
}
.modal-card {
  width: min(460px, 92vw); background: var(--n-313338); border-radius: 12px;
  padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  /* 内容变多（比如加了频道图标选择器）时，别把按钮挤出屏幕：超高就自己滚动 */
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 18px; color: var(--n-f2f3f5); }
.x {
  border: 0; background: transparent; color: var(--n-b5bac1); font-size: 16px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.x:hover { background: var(--n-404249); color: var(--n-f2f3f5); }
#searchInput {
  width: 100%; padding: 12px 14px; border-radius: 8px; border: 0;
  background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 15px; outline: none;
}
.search-results { margin-top: 14px; max-height: 320px; overflow-y: auto; }
.srow {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-radius: 7px;
}
.srow:hover { background: var(--n-35373c); }
.srow .avatar { width: 32px; height: 32px; font-size: 14px; }
.srow .sinfo { flex: 1; min-width: 0; }
.srow .sname { font-size: 14.5px; color: var(--n-f2f3f5); font-weight: 600; }
.srow .suser { font-size: 12px; color: var(--n-6d6f78); }

.voice-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: var(--n-1e1f22); flex-shrink: 0;
  margin: 0 8px 6px -64px; border-radius: 10px;
  position: relative; z-index: 6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.voice-info { flex: 1; min-width: 0; line-height: 1.3; }
.vtitle { font-size: 13px; font-weight: 600; color: var(--n-23a55a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtitle .ico-phone { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; }
.vsub { font-size: 11px; color: var(--n-6d6f78); }
.me-btn.danger:hover { background: var(--n-ed4245); color: #fff; }
.voice-code {
  display: block; font-size: 10.5px; color: var(--n-23a55a); padding: 1px 0 2px 26px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voice-code.me { color: var(--n-f2f3f5); font-weight: 600; }

/* ---------- 群语音 / 私聊语音 ---------- */
/* 电话图标（内联 SVG）：大小和对齐 */
.ico-phone { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }

/* 输入框旁边那个「开启语音」按钮（就排在表情左边） */
.voice-call-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 7px; color: var(--n-b5bac1);
}
.voice-call-btn.on { background: var(--n-23a55a); color: #fff; }
.voice-call-btn.on:hover { background: var(--n-23a55a); color: #fff; }

/* 聊天顶部的「群语音已开放，是否加入？」 */
/* 来电弹窗：飘在窗口中间偏上，带一点点"呼吸"提示 */
.voice-banner {
  position: fixed; z-index: 30; top: 74px; left: 50%;
  width: min(470px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #2c3b5e, #202a45);
  border: 1px solid rgba(35, 165, 90, .55); border-radius: 14px;
  transform: translateX(-50%);
  animation: vbPop .22s cubic-bezier(.2, .9, .3, 1.2), vbPulse 1.8s ease-in-out .3s infinite;
}
@keyframes vbPop {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.97); }
}
@keyframes vbPulse {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 0 rgba(35, 165, 90, .45); }
  50% { box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 9px rgba(35, 165, 90, 0); }
}
.voice-banner .vb-join, .voice-banner .vb-decline {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 0; cursor: pointer; border-radius: 9px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 800; color: #fff;
}
.voice-banner .vb-join { background: #23a55a; }
.voice-banner .vb-join:hover { background: #1e8f4d; }
.voice-banner .vb-decline { background: #ed4245; }
.voice-banner .vb-decline:hover { background: #d13a3d; }
.voice-banner .vb-join .ico-phone,
.voice-banner .vb-decline .ico-phone { width: 15px; height: 15px; vertical-align: 0; }
/* 挂断 = 接听图标转 135°（电话筒朝下） */
.ico-phone.down { transform: rotate(135deg); }
@media (max-width: 520px) {
  .voice-banner { top: 62px; gap: 8px; padding: 10px 12px; }
  .voice-banner .vb-join span, .voice-banner .vb-decline span { display: none; }
  .voice-banner .vb-join, .voice-banner .vb-decline { padding: 9px 12px; }
}
.voice-banner .vb-ico { display: flex; align-items: center; color: var(--n-23a55a); }
.voice-banner .vb-text {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--n-f2f3f5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voice-banner .vb-join {
  border: 0; cursor: pointer; border-radius: 7px; padding: 6px 14px;
  background: var(--n-23a55a); color: #fff; font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.voice-banner .vb-join:hover { filter: brightness(1.1); }
.voice-banner .vb-close {
  border: 0; background: transparent; color: var(--n-949ba4); cursor: pointer;
  font-size: 13px; padding: 4px 6px; border-radius: 6px; flex-shrink: 0;
}
.voice-banner .vb-close:hover { background: var(--n-404249); color: var(--n-f2f3f5); }

/* 侧栏里那个小小的「🔊2」 */
.voice-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; line-height: 1; color: var(--n-23a55a);
  background: rgba(35, 165, 90, .16); border-radius: 999px;
  padding: 3px 6px; margin-left: 4px; flex-shrink: 0;
}
.voice-pill .ico-phone { width: 12px; height: 12px; vertical-align: 0; }

.pick-list { max-height: 260px; overflow-y: auto; }
.pick-row {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 7px; cursor: pointer; user-select: none;
}
.pick-row:hover { background: var(--n-35373c); }
.pick-row .avatar { width: 30px; height: 30px; font-size: 13px; }
.pick-row .pname { flex: 1; font-size: 14.5px; color: var(--n-f2f3f5); }
.pick-row input { width: 17px; height: 17px; accent-color: var(--n-5865f2); cursor: pointer; }
.pick-row.checked { background: var(--n-3a3d44); }

.group-avatar {
  border-radius: 50%; display: grid; place-items: center; color: #fff;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  background: linear-gradient(135deg, var(--n-5865f2), var(--n-eb459e));
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--n-1a1b1e); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) { .members { display: none; } .channels { width: 190px; } }
@media (max-width: 680px) {
  .me-bar { margin: 0 6px 6px; padding: 0 6px; }
  .voice-bar { margin: 0 6px 4px; }
  .rail { width: 54px; }
  .rail-btn, .rail-server { width: 40px; height: 40px; border-radius: 13px; font-size: 15px; }
  .rail-sep { width: 24px; }

  /* 手机上频道栏改成"抽屉"：平时藏起来，点 ☰ 滑出来 */
  .channels {
    position: absolute; left: 54px; top: 0; bottom: 0; width: 232px;
    z-index: 40; transform: translateX(-118%); transition: transform .22s ease;
    box-shadow: 8px 0 26px rgba(0,0,0,.55);
  }
  .channels.open { transform: translateX(0); }
  .menu-btn { display: grid; }
  .me-status { display: none; }

  .server-head { padding: 0 10px; font-size: 14px; }
  .channel, .friend { font-size: 13.5px; padding: 6px; }
  .chat-head-note { display: none; }
  .chat-head { padding: 0 10px; gap: 6px; }
  .messages { padding: 12px 10px 6px; }
  .msg { gap: 8px; }
  .msg .text { font-size: 14.5px; }
  .msg-image { max-width: 68vw; }
  .composer { padding: 10px; gap: 6px; }
  .composer-box { gap: 0; padding: 2px 4px; }
  .composer-box input,
  .post-comment-box input { padding: 11px 3px; font-size: 14px; }
  .composer-tool { padding: 5px 3px; font-size: 10.5px; }
  .clip { font-size: 17px; padding: 0 4px; }
  .stats { font-size: 11px; gap: 6px; flex-wrap: wrap; padding: 7px 10px; }
  .stats .why { margin-left: 0; }
}

/* ---------- 论坛频道 / 帖子 ---------- */
.forum-view {
  flex: 1; overflow-y: auto; padding: 18px 16px 8px;
}
body.forum-mode #searchInline,
body.forum-mode #btnClearLocal,
body.forum-mode #btnMembers,
body.forum-mode #chanNote,
body.forum-mode #onlinePill {
  display: none !important;
}
.forum-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.forum-search {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--n-1e1f22);
  color: var(--n-f2f3f5);
  font-size: 14px;
  outline: none;
}
.forum-search:focus {
  box-shadow: 0 0 0 2px rgba(88,101,242,.45);
}
.forum-toolbar {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.forum-toolbar-title { font-size: 18px; font-weight: 700; color: var(--n-f2f3f5); }
.forum-perm-note { margin: 0 0 12px; }
.forum-list { display: flex; flex-direction: column; gap: 10px; }
.forum-post-card {
  background: var(--n-2b2d31); border: 1px solid var(--n-3f4147); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; transition: background .12s, border-color .12s;
  display: flex;
  align-items: stretch;
  gap: 18px;
}
.forum-post-card:hover { background: var(--n-35373c); border-color: var(--n-4e5058); }
.forum-post-main { flex: 1; min-width: 0; }
.forum-post-author {
  display: flex; align-items: center; gap: 8px; color: var(--n-b5bac1);
  font-size: 13px; margin-bottom: 6px;
}
.forum-post-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--n-f2f3f5); }
.forum-post-preview {
  margin: 0 0 10px; color: var(--n-b5bac1); font-size: 13.5px; line-height: 1.6;
  max-height: 3.2em; overflow: hidden;
}
.forum-post-meta { display: flex; gap: 14px; color: var(--n-6d6f78); font-size: 12px; }
.forum-post-thumb {
  width: 112px;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  align-self: center;
  background: var(--n-1e1f22);
}

.field textarea {
  width: 100%; margin-top: 7px; padding: 11px 13px; border-radius: 8px; border: 0;
  background: var(--n-1e1f22); color: var(--n-f2f3f5); font-size: 14px; outline: none;
  resize: vertical; font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.post-file-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.post-detail-panel {
  width: min(480px, 42vw);
  min-width: 320px;
  height: 100%;
  background: var(--n-313338);
  border-left: 1px solid var(--n-232428);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: -12px 0 30px rgba(0,0,0,.22);
  z-index: 30;
}
.post-detail-head {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--n-232428);
}
.post-detail-head h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--n-f2f3f5);
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}
.post-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 10px;
}
.post-view-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -8px 0 12px;
}
.post-view-meta { color: var(--n-6d6f78); font-size: 12.5px; min-width: 0; }
.post-view-body {
  color: var(--n-dbdee1); font-size: 14.5px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word;
}
.post-view-image { max-width: 100%; max-height: 420px; border-radius: 10px; margin-top: 12px; }
.post-view-filelink { color: var(--n-00a8fc); }
.post-comments-head { font-weight: 700; color: var(--n-f2f3f5); font-size: 14px; margin-bottom: 10px; }
.post-comments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.post-comment { display: block; }
.post-comment-row { display: flex; gap: 9px; align-items: flex-start; }

/* 带引用的那条（跟 Discord 一样）：
   引用单独占一行挂在最上面，左边一条「带圆角的折线」从大头像顶端拐上来、
   横着接到小头像左边 —— 也就是那条线是挂在「我的头像」上的。
   注意：这条线只到大头像顶部为止，不会一路拉到正文底下。 */
.post-comment.has-quote { position: relative; }
.post-comment.has-quote .post-comment-quote { margin: 0 0 6px 43px; }
.post-comment-line {
  position: absolute;
  left: 11px;   /* 大头像（24px）的水平中心，线宽 2px */
  top: 9px;     /* 引用那一行的垂直中心 */
  width: 31px;  /* 一直伸到小头像左边 */
  height: 15px; /* 到大头像顶端为止 */
  border-left: 2px solid var(--n-4e5058);
  border-top: 2px solid var(--n-4e5058);
  border-top-left-radius: 7px;
  pointer-events: none;
}
.post-comment.has-quote:has(.post-comment-quote:hover) .post-comment-line {
  border-color: var(--n-5865f2);
}
.post-comment-main {
  flex: 1; min-width: 0; background: var(--n-2b2d31); border-radius: 8px; padding: 8px 10px;
}
.post-comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 3px; }
.post-comment-head strong { color: var(--n-f2f3f5); font-size: 13px; }
.post-comment-head span { color: var(--n-6d6f78); font-size: 11px; }
.post-comment-main p {
  margin: 0; color: var(--n-dbdee1); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
}
.post-comment-del {
  float: right; border: 0; background: transparent; color: var(--n-6d6f78);
  cursor: pointer; font-size: 12px;
}
.post-comment-del:hover { color: var(--n-ed4245); }
.post-comment-composer { display: flex; gap: 8px; margin-top: 10px; }
.post-comment-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  background: var(--n-383a40); border-radius: 9px; padding: 2px 6px;
}
.post-comment-box input {
  flex: 1; min-width: 0; padding: 10px 4px; border: 0;
  background: transparent; color: var(--n-f2f3f5); outline: none;
}
.post-view-actions { margin-top: 12px; }

.text-emoji-picker {
  position: absolute; z-index: 220; width: 320px; max-width: calc(100vw - 16px);
  background: var(--n-232428); border: 1px solid var(--n-1e1f22);
  border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.62);
  padding: 10px; overflow: hidden;
}
.text-emoji-title {
  color: var(--n-f2f3f5); font-size: 13px; font-weight: 700;
  margin: 0 2px 8px;
}
.text-emoji-grid {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  max-height: 220px; overflow-y: auto; padding-right: 2px;
}
.text-emoji-item {
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 5px 0;
}
.text-emoji-item:hover { background: var(--n-3f4147); transform: scale(1.12); }

@media (max-width: 700px) {
  .forum-view { padding: 12px 10px 6px; }
  .forum-controls { gap: 8px; }
  .forum-toolbar-title { font-size: 16px; }
  .post-detail-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    z-index: 60;
  }
}

/* ---------- 帖子回复里右键头像/名字弹出的用户菜单 ---------- */
.ctx-menu {
  position: fixed; z-index: 200; width: 236px;
  background: var(--n-232428); border-radius: 10px; padding: 6px;
  border: 1px solid var(--n-1e1f22);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .6);
}
.ctx-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--n-b5bac1);
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 14px; font-family: inherit;
}
.ctx-item:hover { background: var(--n-35373c); color: var(--n-f2f3f5); }
.ctx-item.danger { color: var(--n-ed4245); }
.ctx-item.danger:hover { background: var(--n-ed4245); color: #fff; }
.ctx-item .ico { width: 18px; text-align: center; flex-shrink: 0; }
.ctx-item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ctx-item .t2 { font-size: 11.5px; color: var(--n-6d6f78); margin-top: 2px; }
.ctx-item .chev { color: var(--n-6d6f78); font-size: 15px; }
.ctx-sep { height: 1px; background: var(--n-1e1f22); margin: 5px 8px; }
.ctx-wrap { position: relative; }
.ctx-sub {
  position: absolute; left: calc(100% + 4px); top: 0; z-index: 210; width: 216px;
  background: var(--n-232428); border-radius: 10px; padding: 6px;
  border: 1px solid var(--n-1e1f22);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .6);
}
.ctx-sub .ctx-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--n-b5bac1); text-align: left;
}
.ctx-sub .ctx-row.btn {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
}
.ctx-sub .ctx-row.btn:hover { background: var(--n-35373c); color: var(--n-f2f3f5); }
.ctx-menu.near-right .ctx-sub { left: auto; right: calc(100% + 4px); }

/* 帖子底部：被屏蔽 / 被忽略的说明条 */
.post-hidden-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--n-2b2d31); color: var(--n-949ba4); font-size: 12.5px;
}
.post-hidden-note button {
  border: 0; border-radius: 6px; background: var(--n-4e5058); color: var(--n-f2f3f5);
  padding: 5px 10px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.post-hidden-note button:hover { background: var(--n-5d6069); }

@media (max-width: 700px) {
  .ctx-sub { left: 0; top: calc(100% + 4px); width: auto; }
}

/* ---------- 帖子回复：Discord 那种"引用条" ---------- */
.post-comment-quote {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 6px; padding: 0;
  font-size: 12.5px; color: var(--n-b5bac1);
  cursor: pointer; min-width: 0; max-width: 100%;
}
.post-comment-quote:hover { color: var(--n-f2f3f5); }
.post-comment-quote .q-avatar {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; font-size: 9px;
}
.post-comment-quote .q-name { flex-shrink: 0; color: var(--n-b5bac1); font-weight: 500; }
.post-comment-quote:hover .q-name { color: var(--n-f2f3f5); }
.post-comment-quote .q-body {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.post-comment-quote .q-body.muted-q { opacity: .6; }
.post-comment-quote.is-deleted { cursor: default; color: var(--n-6d6f78); }

/* 被引用的那条跳过去时闪一下 */
@keyframes postFlash {
  0%   { background: rgba(88, 101, 242, .28); }
  100% { background: transparent; }
}
.post-comment.flash .post-comment-main { animation: postFlash 1.1s ease-out; }

/* ---------- 回复框上方的"正在回复"提示条 ---------- */
.post-reply-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; padding: 6px 10px;
  background: var(--n-2b2d31); border-left: 3px solid var(--n-5865f2);
  border-radius: 6px; font-size: 12.5px; color: var(--n-b5bac1);
}
.post-reply-bar .prb-tip { color: var(--n-949ba4); flex-shrink: 0; }
.post-reply-bar .prb-text {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--n-f2f3f5);
}
.post-reply-bar .prb-x {
  border: 0; background: transparent; color: var(--n-949ba4);
  cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 5px; line-height: 1;
}
.post-reply-bar .prb-x:hover { background: var(--n-3f4147); color: var(--n-f2f3f5); }

/* ---------- 邀请链接 ---------- */
.invite-notice {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(88, 101, 242, .16);
  border: 1px solid var(--n-5865f2);
  color: var(--n-f2f3f5); font-size: 14px; line-height: 1.5;
}
.invite-notice b { color: #fff; }
.invite-notice .sub { color: var(--n-b5bac1); font-size: 12.5px; }
.invite-notice.bad {
  background: rgba(237, 66, 69, .14);
  border-color: var(--n-ed4245);
}
.invite-box {
  margin-top: 10px; padding: 10px; border-radius: 8px;
  background: var(--n-1e1f22); font-size: 13px; color: var(--n-b5bac1);
}
.invite-line { display: flex; gap: 8px; align-items: center; }
.invite-line input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 0; border-radius: 6px;
  background: var(--n-2b2d31); color: var(--n-f2f3f5); font-size: 12.5px; outline: none;
}
.invite-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 2px; border-bottom: 1px solid var(--n-2b2d31);
}
.invite-row:last-child { border-bottom: 0; }
.invite-row .t1 { font-family: ui-monospace, Consolas, monospace; color: var(--n-f2f3f5); }
.invite-row .t2 { flex: 1; min-width: 0; color: var(--n-6d6f78); font-size: 11.5px; }

/* ---------- 断线提示条（WebSocket 掉线时贴在窗口最上面） ---------- */
.conn-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 6px 12px; text-align: center;
  background: var(--n-f0b232); color: #1e1f22;
  font-size: 12.5px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* ---------- 下载 APP 弹窗（照 Discord 那个做的） ---------- */
.dl-card {
  width: min(880px, 96vw); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--n-313338); border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.dl-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 4px;
}
.dl-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--n-f2f3f5); }
.dl-head .x {
  border: 0; background: transparent; color: var(--n-b5bac1);
  font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1;
}
.dl-head .x:hover { color: var(--n-f2f3f5); background: var(--n-35373c); }
.dl-body {
  padding: 10px 24px 22px; overflow-y: auto;
}
.dl-sec { color: var(--n-b5bac1); font-size: 15px; margin: 14px 0 12px; }
.dl-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dl-row-2 { grid-template-columns: repeat(2, 1fr); }

.dl-item {
  border: 1px solid var(--n-3f4147); border-radius: 10px;
  background: var(--n-2b2d31); padding: 16px 12px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.dl-item.cur { border-color: var(--n-5865f2); box-shadow: 0 0 0 1px var(--n-5865f2) inset; }
.dl-item .ico {
  font-size: 52px; line-height: 1; height: 62px;
  display: flex; align-items: center; justify-content: center;
  /* Discord 那边图标是灰白单色的，这里把彩色 emoji 去色调亮，靠得更近 */
  filter: grayscale(1) brightness(1.75) contrast(1.05);
}
.dl-item .nm { font-size: 17px; font-weight: 800; color: var(--n-f2f3f5); }
.dl-item button {
  width: 100%; border: 0; border-radius: 6px;
  background: var(--n-5865f2); color: #fff;
  padding: 11px 8px; font-size: 14.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.dl-item button:hover { background: var(--n-4752c4); }
.dl-item button.ghost { background: var(--n-4e5058); }
.dl-item button.ghost:hover { background: var(--n-5d6069); }

.dl-hint {
  margin-top: 16px; padding: 12px 14px; border-radius: 8px;
  background: var(--n-2b2d31); border-left: 3px solid var(--n-5865f2);
  color: var(--n-dbdee1); font-size: 13.5px; line-height: 1.7;
  white-space: pre-wrap;
}
.dl-note {
  margin: 18px 0 0; color: var(--n-949ba4); font-size: 12.5px; line-height: 1.6;
}
.dl-note a { color: var(--n-00a8fc); }

/* ---------- 群图标：预设 emoji 选择器 ---------- */
.icon-presets {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px;
  margin-bottom: 6px;
}
.icon-preset {
  aspect-ratio: 1 / 1; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; background: var(--n-2b2d31);
  font-size: 20px; line-height: 1; padding: 0;
  display: grid; place-items: center;
}
.icon-preset:hover { background: var(--n-35373c); transform: scale(1.08); }
.icon-preset.on { border-color: var(--n-5865f2); background: var(--n-35373c); }
.group-avatar.emoji { background: var(--n-2b2d31); }
@media (max-width: 700px) {
  .icon-presets { grid-template-columns: repeat(7, 1fr); }
  .icon-preset { font-size: 18px; }
}

@media (max-width: 700px) {
  .dl-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dl-row-2 { grid-template-columns: 1fr; }
  .dl-item .ico { font-size: 40px; height: 48px; }
  .dl-item .nm { font-size: 15px; }
  .dl-head h2 { font-size: 19px; }
}

/* ---------- 手机上的频道顶栏：别再挤成一团 ----------
   窄屏（安卓客户端 / 手机浏览器，宽度 412px 左右）时，顶栏里塞了
   搜索框 + 清空 + 成员 + 在线人数 + 设置，结果标题被挤到换行、
   搜索框直接被切掉。这里把搜索框收成一个放大镜图标、藏掉不常用的
   「清空本机记录」和在线人数，并让标题单行省略。 */
@media (max-width: 680px) {
  .chat-head { min-width: 0; }
  /* 聊天页的标题也跟微信一样居中：← 在左，图标+名字在正中间，按钮在右 */
  .chat-head { position: relative; }
  .chat-head-title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: calc(100% - 150px); justify-content: center;
  }
  #chanName {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chat-head-right { gap: 2px; flex-shrink: 0; }
  #onlinePill { display: none; }
  #btnClearLocal { display: none; }
  .chat-search {
    width: 32px; padding: 6px 0; text-indent: -9999px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23949ba4'><path d='M10 2a8 8 0 105.3 14l4.3 4.4 1.4-1.4-4.4-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  }
}

/* ---------- 登录页：扫码登录 ---------- */
.auth-qr-btn {
  width: 100%; margin-top: 12px; padding: 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--n-404249); background: transparent; color: var(--n-b5bac1);
  font: 600 14px/1 inherit;
}
.auth-qr-btn:hover { background: var(--n-404249); color: var(--n-f2f3f5); }
.auth-qr-panel {
  margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.qr-title { font-size: 14px; font-weight: 700; color: var(--n-f2f3f5); }
.qr-box {
  background: #fff; border-radius: 12px; padding: 10px; line-height: 0; min-height: 120px;
  display: grid; place-items: center;
}
.qr-box svg { display: block; }
.qr-box .muted { color: #6d6f78; }
.qr-tip { font-size: 12.5px; color: var(--n-949ba4); line-height: 1.7; text-align: center; }
.qr-actions { display: flex; gap: 8px; }

/* ==================== 手机版（微信式）外壳 ====================
   底部 4 个 Tab：消息 / 通讯录 / 发现 / 我。
   只在窄屏（安卓客户端、手机浏览器 ≤680px）生效，桌面宽度下这两个元素不参与布局。 */
.m-pages, .m-tabs { display: none; }
.m-back { display: none; }

@media (max-width: 680px) {
  /* ---- 底部 Tab 栏 ---- */
  .m-tabs {
    display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
    z-index: 60; background: var(--n-2b2d31);
    border-top: 1px solid var(--n-232428);
  }
  .m-tab {
    flex: 1; position: relative; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: var(--n-6d6f78); padding: 7px 0 5px; font-family: inherit;
  }
  .m-tab .m-ico { font-size: 20px; line-height: 1; filter: grayscale(1) opacity(.6); }
  .m-tab .m-lbl { font-size: 11px; }
  .m-tab.active { color: var(--n-5865f2); }
  .m-tab.active .m-ico { filter: none; }
  .m-dot {
    position: absolute; top: 5px; left: 50%; margin-left: 6px;
    min-width: 9px; height: 9px; border-radius: 50%; background: var(--n-ed4245);
  }
  .m-dot.hidden { display: none; }

  /* ---- 四个 Tab 的整页 ---- */
  .m-pages {
    display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 56px;
    background: var(--n-313338); overflow: hidden; z-index: 20;
  }
  body.m-chat .m-pages, body.m-chat .m-tabs,
  body.m-channels .m-pages, body.m-channels .m-tabs { display: none !important; }

  /* 手机上不要左边那条图标栏（微信没有） */
  .rail { display: none !important; }

  /* 频道列表：在手机上就是一整页 */
  .channels {
    display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
    z-index: 30; transform: none; box-shadow: none;
  }
  body.m-channels .channels { display: flex; }
  body.m-channels .chat, body.m-channels .members { display: none !important; }
  .m-back { display: grid; }

  /* 聊天页：整页盖在最上面 */
  .chat { display: none; }
  body.m-chat .chat { display: flex; position: absolute; inset: 0; z-index: 40; }
  body.m-chat .members { display: none !important; }

  /* ---- 列表通用样式 ---- */
  .m-head {
    position: absolute; left: 0; right: 0; top: 0; height: 50px; z-index: 3;
    display: flex; align-items: center; gap: 4px; padding: 0 10px;
    background: var(--n-2b2d31); border-bottom: 1px solid var(--n-232428);
  }
  .m-title {
    flex: 1; min-width: 0; text-align: center; font-size: 16.5px; font-weight: 700;
    color: var(--n-f2f3f5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-hbtn {
    border: 0; background: transparent; color: var(--n-dbdee1); font-size: 17px;
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  }
  .m-hbtn:active { background: var(--n-35373c); }
  .m-body {
    position: absolute; left: 0; right: 0; top: 50px; bottom: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-group { background: var(--n-313338); margin-top: 8px; }
  .m-group.first { margin-top: 0; }
  .m-row {
    display: flex; align-items: center; gap: 11px; padding: 10px 14px;
    cursor: pointer; position: relative; background: var(--n-313338);
    border-bottom: 1px solid var(--n-232428);
  }
  .m-row:last-child { border-bottom: 0; }
  .m-row:active { background: var(--n-35373c); }
  .m-av { width: 44px; height: 44px; flex-shrink: 0; position: relative; line-height: 0; }
  .m-av .avatar, .m-av .group-avatar {
    width: 44px !important; height: 44px !important; border-radius: 10px; font-size: 18px;
  }
  .m-av .m-badge { position: absolute; top: -5px; right: -5px; }
  .m-main { flex: 1; min-width: 0; }
  .m-l1 { display: flex; align-items: baseline; gap: 8px; }
  .m-name {
    flex: 1; min-width: 0; font-size: 16px; color: var(--n-f2f3f5);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-time { font-size: 11.5px; color: var(--n-6d6f78); flex-shrink: 0; }
  .m-l2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
  .m-prev {
    flex: 1; min-width: 0; font-size: 13.5px; color: var(--n-80848e);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; flex-shrink: 0;
    background: var(--n-ed4245); color: #fff; font-size: 11px; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
  }
  .m-badge.dot { min-width: 9px; height: 9px; padding: 0; border-radius: 50%; }
  .m-badge.gray { background: var(--n-4e5058); }
  .m-entry-ico {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center; font-size: 20px; color: #fff;
  }
  .m-sub { flex: 1; min-width: 0; font-size: 13.5px; color: var(--n-6d6f78); text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-chev { color: var(--n-6d6f78); font-size: 15px; flex-shrink: 0; }
  .m-section { padding: 9px 14px 5px; font-size: 12px; color: var(--n-6d6f78); }
  .m-empty { padding: 40px 22px; text-align: center; color: var(--n-6d6f78); font-size: 14px; line-height: 2; }
  .m-note { padding: 12px 14px; font-size: 12.5px; color: var(--n-6d6f78); }

  .m-me-head { display: flex; align-items: center; gap: 14px; padding: 22px 16px 18px; cursor: pointer; }
  .m-me-head .avatar { width: 62px; height: 62px; border-radius: 12px; font-size: 24px; }
  .m-me-name { font-size: 21px; font-weight: 700; color: var(--n-f2f3f5); }
  .m-me-sub { margin-top: 6px; font-size: 13px; color: var(--n-6d6f78); }

  /* 底部弹出的动作面板 */
  .m-sheet-mask { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 80; }
  .m-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 81;
    background: var(--n-2b2d31); border-radius: 14px 14px 0 0; padding: 6px 0 10px;
  }
  .m-sheet button {
    display: block; width: 100%; border: 0; background: transparent; color: var(--n-f2f3f5);
    font: 400 16px/1 inherit; padding: 16px 10px; text-align: center; cursor: pointer;
  }
  .m-sheet button:active { background: var(--n-35373c); }

  /* 右上角 ＋ 的弹出菜单（就是微信那个：发起群聊 / 添加朋友 / 扫一扫…） */
  .m-pop-mask { position: absolute; inset: 0; z-index: 82; background: transparent; }
  .m-pop {
    position: absolute; z-index: 83; min-width: 154px;
    background: #3a3c42; border-radius: 10px; padding: 4px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
  }
  .m-pop-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border: 0; background: transparent; color: var(--n-f2f3f5);
    font: 400 15.5px/1 inherit; padding: 13px 16px; cursor: pointer; text-align: left;
  }
  .m-pop-item + .m-pop-item { border-top: 1px solid rgba(255,255,255,.07); }
  .m-pop-item:active { background: var(--n-35373c); border-radius: 0; }
  .m-pop-ico { width: 22px; text-align: center; font-size: 19px; flex-shrink: 0; }
  .m-pop-lbl { flex: 1; min-width: 0; }
}

/* ===========================================================================
   产品主页（访客先看到这个）
   =========================================================================== */
/* 首帧就定好显示谁：主页 or 登录框（避免刷新时先闪一下登录页） */
html.lp-first #landing { display: block !important; }
html.lp-first #auth { display: none !important; }
html.lp-app #landing { display: none !important; }

.landing {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; color: #eef0ff;
  background:
    radial-gradient(1100px 620px at 12% 8%, #2b3ea8 0%, rgba(43,62,168,0) 62%),
    radial-gradient(900px 560px at 88% 22%, #4a2f8f 0%, rgba(74,47,143,0) 60%),
    linear-gradient(180deg, #10173c 0%, #0d1330 45%, #0a0f26 100%);
  background-attachment: fixed;
  font-family: inherit;
}
.landing::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(#fff 1px, transparent 1.4px), radial-gradient(#cfe0ff 1px, transparent 1.4px);
  background-size: 190px 190px, 320px 320px; background-position: 0 0, 90px 130px;
}
.lp-nav {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 18px;
  padding: 16px 40px; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,15,38,.92), rgba(10,15,38,.55));
}
.lp-brand { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.lp-logo { font-size: 20px; }
.lp-links { display: flex; gap: 22px; margin-left: 22px; flex: 1; }
.lp-links a { color: #c3caf0; text-decoration: none; font-size: 14.5px; padding: 6px 2px; }
.lp-links a:hover { color: #fff; }
.lp-open {
  border: 0; cursor: pointer; border-radius: 999px; padding: 10px 22px;
  background: #fff; color: #131a3a; font-size: 14.5px; font-weight: 800;
}
.lp-open:hover { background: #e7ecff; }
.lp-open.small { padding: 8px 16px; font-size: 13px; }

.lp-hero {
  display: flex; gap: 40px; align-items: center; justify-content: center;
  padding: 70px 40px 90px; max-width: 1240px; margin: 0 auto; flex-wrap: wrap;
}
.lp-hero-text { flex: 1 1 500px; min-width: 320px; }
.lp-hero h1 {
  margin: 0 0 20px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.12;
  color: #fff; letter-spacing: -.5px;
}
.lp-sub { margin: 0 0 28px; font-size: 16px; line-height: 1.85; color: #c3caf0; }
.lp-sub b { color: #fff; }
.lp-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.lp-btn {
  border: 0; cursor: pointer; border-radius: 12px; padding: 15px 26px;
  font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; width: auto; max-width: 100%;
}
.lp-btn.primary { background: #fff; color: #131a3a; }
.lp-btn.primary:hover { background: #e7ecff; }
.lp-btn.ghost { background: #5865f2; color: #fff; }
.lp-btn.ghost:hover { background: #4752c4; }
.lp-tip { margin: 14px 0 0; font-size: 12.5px; color: #8e97c8; }

/* 右边的"聊天窗口"示意图（纯 CSS，不用图片） */
.lp-art { flex: 1.1 1 460px; min-width: 300px; display: flex; justify-content: center; align-items: center; }
.lp-hero-img {
  width: 100%; max-width: 660px; height: auto; display: block;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .5));
}
.lp-card .lp-ic { width: 48px; height: 48px; display: block; border-radius: 13px; }
.lp-dlc-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.lp-plat-ic { height: 34px; width: auto; display: block; }
.lp-win {
  width: 100%; max-width: 520px; border-radius: 16px; overflow: hidden;
  background: #1b2140; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px rgba(0,0,0,.55); transform: rotate(-1.2deg);
}
.lp-win-bar { display: flex; gap: 7px; padding: 12px 14px; background: #151a35; }
.lp-win-bar span { width: 11px; height: 11px; border-radius: 50%; background: #3b4270; }
.lp-win-bar span:first-child { background: #ed4245; }
.lp-win-body { display: flex; min-height: 260px; }
.lp-side { width: 132px; padding: 14px 10px; background: #171c38; display: flex; flex-direction: column; gap: 8px; }
.lp-side i { font-style: normal; font-size: 12.5px; color: #939bc7; padding: 6px 8px; border-radius: 7px; }
.lp-side i.on { background: #2b3260; color: #fff; }
.lp-msgs { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.lp-m { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #cfd5f5; }
.lp-m .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; flex-shrink: 0; }
.lp-m .a1 { background: #5865f2; } .lp-m .a2 { background: #eb459e; } .lp-m .a3 { background: #23a55a; }
.lp-m b { color: #fff; }
.lp-m em { font-style: normal; color: #a8b0d8; }
.lp-m.me em { color: #6ee7a8; }

.lp-sec { max-width: 1120px; margin: 0 auto; padding: 70px 40px; }
.lp-sec.alt { max-width: none; padding-left: 0; padding-right: 0;
  background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.lp-sec h2 { margin: 0 0 12px; font-size: 30px; color: #fff; text-align: center; }
.lp-lead { margin: 0 0 34px; text-align: center; color: #a8b0d8; font-size: 15px; }
.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 34px; }
.lp-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 22px 20px;
}
.lp-card:hover { background: rgba(255,255,255,.08); }
.lp-card .ic { font-size: 26px; }
.lp-card h3 { margin: 12px 0 8px; font-size: 17px; color: #fff; }
.lp-card p { margin: 0; font-size: 13.5px; line-height: 1.75; color: #aab2da; }
.lp-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; padding: 0 40px; }
.lp-dl { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-width: 1180px; }
.lp-dlc {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 20px; text-align: center;
}
.lp-dlc .ic { font-size: 30px; }
.lp-dlc h3 { margin: 10px 0 14px; font-size: 16px; color: #fff; }
.lp-dlc button {
  width: 100%; border: 0; cursor: pointer; border-radius: 9px; padding: 11px;
  background: #5865f2; color: #fff; font-size: 14px; font-weight: 700;
}
.lp-dlc button:hover { background: #4752c4; }
.lp-dlc .qr { margin-top: 12px; line-height: 0; background: #fff; border-radius: 10px; padding: 8px; display: inline-block; }
.lp-dlc .qr svg { width: 108px; height: 108px; display: block; }
.lp-dlc .sub { margin: 10px 0 0; font-size: 12px; color: #8e97c8; }
.lp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px 40px 40px; color: #8e97c8; font-size: 13px; flex-wrap: wrap;
}
@media (max-width: 760px) {
  .lp-nav { padding: 14px 18px; gap: 10px; }
  .lp-links { display: none; }
  .lp-hero { padding: 40px 20px 60px; }
  .lp-sec { padding: 50px 20px; }
  .lp-dl { padding: 0 20px; }
  .lp-foot { padding: 22px 20px 34px; }
}