/* ============================================================
   多人聊天室 —— 公共样式（液态玻璃 Liquid Glass）
   主题：明亮（默认 :root）/ 暗黑（html[data-theme="dark"]）
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- 基础色板 · 明亮 ---- */
  --bg: #eef1f9;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.5);
  --surface-3: rgba(255, 255, 255, 0.9);
  --border: rgba(126, 141, 180, 0.18);
  --border-strong: rgba(126, 141, 180, 0.34);
  --text: #1b2030;
  --text-2: #4e5769;
  --text-3: #7d879b;
  --brand: #4f6ef7;
  --brand-dark: #3d58d6;
  --brand-soft: rgba(79, 110, 247, 0.13);
  --green: #16a34a;
  --green-soft: rgba(22, 163, 74, 0.13);
  --amber: #b45309;
  --amber-soft: rgba(217, 119, 6, 0.14);
  --red: #e03e3e;
  --red-soft: rgba(224, 62, 62, 0.13);

  /* ---- 玻璃质感 ---- */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-bg-soft: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-hi: rgba(255, 255, 255, 0.85);
  --glass-blur: 22px;
  --glass-shadow: 0 10px 34px rgba(28, 38, 74, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --glass-shadow-sm: 0 4px 16px rgba(28, 38, 74, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- 圆角（液态玻璃：更大更圆润） ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 8px rgba(28, 38, 74, 0.07);
  --shadow: 0 12px 32px rgba(28, 38, 74, 0.12);
  --shadow-lg: 0 24px 64px rgba(28, 38, 74, 0.2);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---- 暗黑模式：同一套变量名，整体换成深色玻璃 ---- */
html[data-theme='dark'] {
  color-scheme: dark;

  --bg: #070a14;
  --surface: rgba(30, 36, 58, 0.66);
  --surface-2: rgba(50, 58, 88, 0.5);
  --surface-3: rgba(38, 45, 70, 0.84);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --text: #eef1f9;
  --text-2: #b8c0d6;
  --text-3: #8791a9;
  --brand: #6b84ff;
  --brand-dark: #5568d8;
  --brand-soft: rgba(107, 132, 255, 0.2);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.18);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.18);
  --red: #ff6b6b;
  --red-soft: rgba(255, 107, 107, 0.18);

  --glass-bg: rgba(28, 34, 55, 0.6);
  --glass-bg-strong: rgba(36, 43, 68, 0.8);
  --glass-bg-soft: rgba(44, 52, 80, 0.4);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.09);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.62);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------- 内容保护 ---------------------------
   全站默认不可选中 / 复制（配合 content-guard.js）；
   仅编辑框与聊天消息正文放开选中。 */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
select,
[contenteditable='true'],
.allow-copy,
.allow-copy *,
.msg-text,
.msg-image-caption,
.msg-log .row,
.msg-log .row * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font-family: inherit;
  font-size: inherit;
}

.hidden {
  display: none !important;
}

/* ------------------------------ 通用控件 ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s, color 0.15s;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 110, 247, 0.28);
}

.btn-primary:hover {
  background: var(--brand-dark);
}

.btn-primary:disabled {
  background: #b9c4f5;
  box-shadow: none;
  cursor: not-allowed;
}

.btn-ghost {
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  background: var(--surface);
}

.btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn-danger {
  background: #e34d4d;
  color: #fff;
  box-shadow: 0 2px 8px rgba(227, 77, 77, 0.28);
}

.btn-danger:hover {
  background: #c93434;
}

.btn-danger:disabled {
  background: #e9b9b9;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}

/* 复选框（自定义外观，用于表格多选 / 弹窗内） */
.cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.cb input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.cb span {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: inline-block;
  transition: all 0.15s;
  position: relative;
}
.cb input:checked + span {
  background: var(--brand);
  border-color: var(--brand);
}
.cb input:checked + span::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cb input:indeterminate + span {
  background: var(--brand);
  border-color: var(--brand);
}
.cb input:indeterminate + span::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 10px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.cb:hover span {
  border-color: var(--brand);
}

/* 批量删除列表（弹窗内显示待删除的频道） */
.rbd-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.rbd-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.rbd-row:last-child {
  border-bottom: none;
}
.rbd-row .rbd-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rbd-row .rbd-id {
  color: var(--text-3);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.rbd-row .rbd-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

.btn-block {
  width: 100%;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}

.input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder {
  color: var(--text-3);
}

.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---- 个人资料：禁止修改字段的灰色遮罩层 ---- */
.locked-field {
  position: relative;
}

.locked-field .input {
  display: block;
  cursor: not-allowed;
  color: var(--text-2);
}

.locked-mask {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: rgba(126, 141, 180, 0.24);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  pointer-events: none;
}

.locked-mask .locked-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--text-2);
}

html[data-theme='dark'] .locked-mask {
  background: rgba(255, 255, 255, 0.12);
}

.alert {
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}

.alert.show {
  display: block;
}

.alert-error {
  background: var(--red-soft);
  color: #a32121;
}

.alert-ok {
  background: var(--green-soft);
  color: #106b34;
}

/* --------------------------- 登录 / 注册页 --------------------------- */

.auth-wrap {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(1200px 600px at 15% -10%, #e8ecfd 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 110%, #e6f6ef 0%, transparent 55%), var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 32px 30px 28px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.auth-logo .dot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), #7c8ffb);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.auth-card h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.auth-sub {
  color: var(--text-3);
  font-size: 13px;
  margin: 0 0 22px;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 22px;
}

.tab {
  flex: 1;
  height: 34px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.tab.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.auth-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 删掉默认管理员提示后只剩一个链接，仍保持靠右对齐，与原两元素布局视觉一致 */
.auth-foot > a:only-child {
  margin-left: auto;
}

.auth-hint code {
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  color: var(--text-2);
}

/* ------------------------------ 应用外壳 ------------------------------ */

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  height: 56px;
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
}

.topbar .brand .dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #7c8ffb);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.pill .live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.pill.warn .live {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.spacer {
  flex: 1;
}

.me {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 auto;
  user-select: none;
}

/* ------------------------------ 主体布局 ------------------------------ */

.main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sidebar {
  width: 232px;
  flex: 0 0 auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 聊天框右侧：频道成员面板（在线 + 离线成员；频道会话时显示，私聊时隐藏） */
.members-panel {
  width: 200px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}

.sidebar-head {
  padding: 14px 16px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-3);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  transition: background 0.12s;
}

.user-item:hover {
  background: var(--surface-2);
}

.user-item .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-item .tag {
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
}

/* 旧的品牌蓝身份标签已废弃，站方统一走 .tag.official（透黑底「官方」） */
.user-item .tag.admin {
  color: #fff;
  border-color: rgba(20, 20, 24, 0.85);
  background: rgba(20, 20, 24, 0.68);
}

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sys-line {
  align-self: center;
  font-size: 12px;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 12px;
  margin: 8px 0;
}

.msg {
  display: flex;
  gap: 10px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  max-width: 78%;
  /* 气泡宽度跟随内容，不再被纵向 flex 拉伸成整行 */
  align-self: flex-start;
  width: fit-content;
}

.msg:hover {
  background: rgba(255, 255, 255, 0.6);
}

.msg-body {
  min-width: 0;
}

.msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 1px;
}

.msg-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.msg-time {
  font-size: 11px;
  color: var(--text-3);
}

.msg-text {
  font-size: 14px;
  word-break: break-word;
  white-space: pre-wrap;
}

.msg.self {
  align-self: flex-end;
  flex-direction: row-reverse;
  background: var(--brand-soft);
}

.msg.self .msg-meta {
  flex-direction: row-reverse;
}

.msg.self .msg-name {
  color: var(--brand-dark);
}

.typing-line {
  height: 20px;
  padding: 0 24px 6px;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 16px 14px;
}

.composer-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.composer textarea {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 140px;
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.composer textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.composer-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 7px;
  padding: 0 2px;
}

/* ---------- 输入区工具按钮（表情 / 图片） ---------- */
.tool-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.tool-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.tool-btn:active { transform: scale(0.94); }
.tool-btn:disabled { opacity: 0.5; cursor: wait; }

/* ---------- 输入区工具栏（QQ 风格：小按钮置于输入框上方） ---------- */
.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 7px;
}

.tool-btn.sm {
  width: 28px;
  height: 28px;
  font-size: 15px;
  border-radius: 6px;
  border-color: transparent;
  background: transparent;
}

.tool-btn.sm:hover {
  background: var(--surface-2);
  border-color: transparent;
}

.toolbar-tip {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 待发送图片预览 ---------- */
.pending-image {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 8px;
}

.pending-image-box {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: visible;
}

.pending-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 1px);
  display: block;
}

.pending-image-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s;
}

.pending-image-remove:hover { transform: scale(1.12); }

.pending-image-tip {
  font-size: 11.5px;
  color: var(--text-3);
}

/* 图文混合消息：图片下方的配文 */
.msg-image-caption {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

/* ---------- 频道邀请卡片（消息里识别到频道分享链接） ---------- */
.room-invite-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding: 10px 12px;
  max-width: 300px;
  border: 1px solid var(--glass-border, var(--border));
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-soft, var(--surface-2));
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
}

.room-invite-card:hover {
  background: var(--surface-2);
  box-shadow: var(--glass-shadow, 0 6px 18px rgba(20, 30, 60, 0.12));
}

.room-invite-card:active {
  transform: scale(0.99);
}

.room-invite-card .ric-head {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--brand);
}

.room-invite-card .ric-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.room-invite-card .ric-name {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-invite-card .ric-foot {
  font-size: 12px;
  color: var(--text-3);
}

/* 频道已被删除：卡片变灰、不可点击 */
.room-invite-card.missing {
  border-left-color: var(--border-strong, var(--border));
  cursor: default;
}

.room-invite-card.missing:hover {
  background: var(--glass-bg-soft, var(--surface-2));
  box-shadow: none;
}

.room-invite-card.missing .ric-main {
  font-size: 13px;
  color: var(--text-3);
}

/* ---------- 表情面板 ---------- */
.emoji-panel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  max-height: 168px;
  overflow-y: auto;
}
.emoji-item {
  border: none;
  background: transparent;
  font-size: 20px;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.12s, transform 0.1s;
}
.emoji-item:hover { background: var(--brand-soft); transform: scale(1.18); }

/* ---------- 消息里的图片与大表情 ---------- */
.msg-image {
  display: block;
  max-width: 260px;
  max-height: 260px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  background: var(--bg);
}
.msg.self .msg-image { border-color: var(--border-strong); }

.msg-text.emoji-big {
  font-size: 34px;
  line-height: 1.25;
  padding: 2px 0;
}

.conn-banner {
  display: none;
  padding: 7px 16px;
  font-size: 12.5px;
  background: var(--amber-soft);
  color: #8a5504;
  border-top: 1px solid #f6e3c4;
}

.conn-banner.show {
  display: block;
}

/* ------------------------------ 监控台 ------------------------------ */

.monitor {
  padding: 20px 22px 40px;
  overflow-y: auto;
  flex: 1;
}

.grid {
  display: grid;
  gap: 14px;
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  margin-top: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-pad {
  padding: 16px 18px;
}

.card h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card h2 .count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}

.stat-label {
  font-size: 12.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-value {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -0.5px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.stat-value.small {
  font-size: 17px;
  font-weight: 600;
}

.stat-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.table-wrap {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: auto; /* 表格列过多时显示横向滚动条（不让单元格换行） */
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: max-content; /* 表格按内容撑开，避免被父容器压扁后单元格换行 */
}

th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-3);
  padding: 8px 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  vertical-align: middle;
  white-space: nowrap; /* 单元格内容不换行；过长时由 table-wrap 出横向滚动条 */
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--surface-2);
}

td .nick {
  color: var(--text);
  font-weight: 500;
}

td .uname {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}

.state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.state.on {
  color: var(--green);
}

.state.on i {
  background: var(--green);
}

.state.off {
  color: var(--text-3);
}

.state.off i {
  background: #c6cad6;
}

.log {
  max-height: 340px;
  overflow-y: auto;
  padding: 8px 6px;
  font-size: 12.5px;
}

.log-item {
  display: flex;
  gap: 10px;
  padding: 5px 12px;
  border-radius: 6px;
}

.log-item:hover {
  background: var(--surface-2);
}

.log-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-3);
  flex: 0 0 auto;
  padding-top: 1px;
}

.log-text {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-item[data-type="online"] .log-text,
.log-item[data-type="register"] .log-text {
  color: #106b34;
}

.log-item[data-type="offline"] .log-text {
  color: var(--text-3);
}

.log-item[data-type="login-failed"] .log-text {
  color: #a32121;
}

.msg-log {
  max-height: 340px;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-log .row {
  display: flex;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.msg-log .row:hover {
  background: var(--surface-2);
}

.msg-log .who {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text-2);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-log .what {
  flex: 1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-log .when {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--text-3);
}

.empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.toolbar .input {
  height: 36px;
  width: 240px;
}

.toolbar .btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* ------------------------------ 滚动条（圆角细条 · 液态玻璃） ------------------------------ */

/* Firefox：细条 + 半透明 */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 130, 152, 0.38) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(122, 130, 152, 0.34);
  border-radius: 99px;
  border: 2px solid transparent; /* 透明留白让细条悬浮，视觉宽度约 4px */
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 130, 152, 0.58);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 720px) {
  .sidebar {
    display: none;
  }
  /* 窄屏连聊天框都放不下，成员面板随之隐藏 */
  .members-panel {
    display: none;
  }
  .emoji-panel {
    grid-template-columns: repeat(8, 1fr);
  }
  .msg-image {
    max-width: 200px;
    max-height: 200px;
  }
  .user-card-split {
    flex-direction: column;
  }
  .card-col.card-main {
    flex: 1 1 auto;
  }
  .card-col.card-moments {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    max-height: none;
  }
  .modal-wide {
    max-width: 420px;
  }
}

/* ------------------------------ 验证码 ------------------------------ */

.code-row {
  display: flex;
  gap: 8px;
}

.code-row .input {
  flex: 1;
  min-width: 0;
}

.code-row .btn {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 14px;
  font-size: 13px;
}

.code-row .btn:disabled {
  color: var(--text-3);
  border-color: var(--border);
  cursor: not-allowed;
}

/* --------------------------- 链接按钮 / 子表单 --------------------------- */

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.link-btn:hover {
  text-decoration: underline;
}

.form-links {
  text-align: center;
  margin-top: 12px;
}

.subform {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 14px;
  margin: 6px 0 16px;
}

/* ------------------------------ 头像图 ------------------------------ */

.avatar-img {
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  user-select: none;
  background: var(--surface-2);
}

.me {
  cursor: pointer;
}

.me .btn,
.me a.btn {
  cursor: pointer;
}

.me-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.me-card:hover {
  background: var(--surface-2);
}

.me-card .me-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}

.me-card .me-avatar .avatar,
.me-card .me-avatar .avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.me-card .me-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.me-card .me-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.me-card .me-name-line #meName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.me-card .me-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c3c8d4;
  flex: 0 0 auto;
}

.me-card .me-status.on {
  background: var(--green);
  box-shadow: 0 0 0 2px var(--green-soft);
}

.me-card .me-meta {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* ------------------------------ 弹窗 ------------------------------ */

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 40, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 24px;
  max-height: 92vh;
  overflow-y: auto;
  animation: modal-in 0.16s ease;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal h3 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 18px;
  color: var(--text-3);
  display: grid;
  place-items: center;
  line-height: 1;
}

.modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

.field-tip {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 5px;
}

.avatar-editor {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.avatar-editor .btn {
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
}

/* ----------------------------- 用户资料卡片 ----------------------------- */

/* 资料卡（双栏：左资料 + 右朋友圈） */
.modal-wide {
  max-width: 700px;
  padding: 26px 22px 20px;
}

.user-card-split {
  display: flex;
  gap: 18px;
  min-height: 0;
}

.card-col {
  min-width: 0;
}

.card-col.card-main {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
}

.card-col.card-moments {
  flex: 1;
  border-left: 1px solid var(--border);
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  max-height: 64vh;
}

.moments-head {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 2px 0 10px;
}

.moments-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.moment-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg);
}

.moment-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.moment-time {
  font-size: 11.5px;
  color: var(--text-3);
}

.moment-del {
  font-size: 11.5px;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.moment-del:hover { color: #e0603e; background: var(--surface-2); }

.moment-content {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.moment-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.moment-img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  background: var(--surface-2);
}
.moment-img:hover { border-color: var(--brand); }

/* 发布朋友圈弹窗 */
.moment-picker {
  margin: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.moment-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.moment-preview {
  position: relative;
  width: 72px;
  height: 72px;
}

.moment-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.moment-preview-del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e0603e;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.moment-preview-del:hover { background: #c74b2b; }

.user-card {
  padding: 6px 4px 2px;
  text-align: left;
}

/* 顶部：头像 + 右侧资料两行（昵称·V号 / 在线状态·IP归属） */
.user-card .card-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-card .big-avatar {
  flex: 0 0 auto;
}

.user-card .card-profile-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.user-card .cp-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-card .cp-nick {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card .cp-vid {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 1px 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.user-card .cp-vid:hover {
  border-color: var(--brand);
}

.user-card .cp-vid svg {
  opacity: 0.7;
}

html[data-theme='dark'] .user-card .cp-vid {
  color: #a9b8ff;
}

html[data-theme='dark'] .user-card .tag {
  color: #a9b8ff;
}

.user-card .cp-status {
  gap: 10px;
}

.user-card .cp-ip {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card .tag {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

.user-card .card-rows {
  margin-top: 16px;
  text-align: left;
  border-top: 1px solid var(--border);
}

.user-card .card-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.user-card .card-row:last-child {
  border-bottom: none;
}

.user-card .card-row .k {
  color: var(--text-3);
  flex: 0 0 auto;
}

.user-card .card-row .v {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------ 表格内头像 ------------------------------ */

.cell-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell-user .avatar,
.cell-user .avatar-img {
  width: 22px;
  height: 22px;
  font-size: 10px;
}


/* ------------------------- 管控相关（撤回/禁言/操作） ------------------------- */

/* 消息撤回按钮（仅自己的消息 meta 行） */
.msg-recall-btn {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 6px;
  line-height: 18px;
  user-select: none;
}

.msg-recall-btn:hover {
  color: var(--red);
  border-color: var(--red);
}

/* 已撤回的消息文本 */
.msg-text.recalled-text {
  color: var(--text-3);
  font-style: italic;
  font-size: 12.5px;
}

/* 在线列表「禁言」标签 */
.user-item .tag.muted {
  color: var(--amber);
  border-color: #f3d9ae;
  background: var(--amber-soft);
}

/* 监控台：表格操作按钮 */
.btn.mini {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 22px;
  border-radius: 5px;
}

.btn.mini.danger {
  color: var(--red);
  border-color: #f1c4c4;
}

.btn.mini.danger:hover {
  background: var(--red-soft);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 监控台：注册用户表的「频道」列 —— 可点击的频道数 */
.room-count-btn {
  min-width: 30px;
  height: 24px;
  padding: 0 9px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  background: var(--brand-soft, #eef1fe);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.room-count-btn:hover {
  background: #e2e7fd;
  border-color: #c9d2f8;
}

.room-count-btn.zero {
  color: var(--text-3);
  background: transparent;
  border-color: var(--border);
}

.room-count-btn.zero:hover {
  color: var(--brand);
  border-color: #c9d2f8;
}

/* 用户频道卡片 */
.ur-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.ur-list .empty {
  padding: 18px 12px;
  text-align: center;
}

.ur-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}

.ur-row:last-child {
  border-bottom: none;
}

.ur-main {
  flex: 1;
  min-width: 0;
}

.ur-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.ur-chip {
  flex: none;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.ur-chip.lock {
  color: #8a5a12;
  background: #fff8e8;
  border-color: #f2e3c0;
}

.ur-meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.ur-topic {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
  word-break: break-word;
}

.ur-ops {
  flex: none;
  display: flex;
  gap: 4px;
}

.ur-add {
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.ur-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ur-add-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

/* 监控台：消息行的操作按钮 */
.msg-log .row .ops {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.msg-log .row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 违禁词 textarea */
textarea.input {
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}

/* --------------------------- 多房间 / 私聊 --------------------------- */

/* 侧栏分组标题右侧的小按钮（创建房间） */
.head-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: color 0.12s, border-color 0.12s;
}

.head-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
}

/* 房间 / 私聊列表 */
.room-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 8px 12px;
}

/* ==================== 侧栏分类（顶部左右：频道 / 私聊） ==================== */
.side-tabs {
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.side-tab {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  height: 42px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.12s, background 0.12s;
}

.side-tab + .side-tab {
  border-left: 1px solid var(--border);
}

.side-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}

.side-tab.active {
  color: var(--brand);
  background: var(--brand-soft);
}

.side-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
}

.side-tab-badge {
  flex: 0 0 auto;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 9px;
  background: #f0554b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.side-panes {
  flex: 1;
  min-height: 0;
  display: flex;
}

.side-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ==================== 侧栏搜索（频道 / 好友：输入框 + 下拉结果） ==================== */
.side-search {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 8px 8px 4px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}

.side-search:focus-within {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.side-search .ss-mag {
  flex: 0 0 auto;
  font-size: 11.5px;
  line-height: 1;
  opacity: 0.55;
}

.side-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}

.side-search-input::placeholder {
  color: var(--text-3);
}

.side-search-clear {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s;
}

.side-search-clear:hover {
  color: var(--text);
  background: var(--brand-soft);
}

/* 下拉结果浮层：贴在输入框下方，滚动条沿用全局圆角细条 */
.side-search-drop {
  position: absolute;
  left: -9px;
  right: -9px;
  top: calc(100% + 5px);
  z-index: 60;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.sd-row:hover,
.sd-row.active {
  background: var(--brand-soft);
}

.sd-avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sd-name {
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-sub {
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.4;
}

.sd-dot.on {
  background: var(--green);
  opacity: 1;
  box-shadow: 0 0 0 3px var(--green-soft);
}

.sd-empty {
  padding: 12px 8px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

/* 可伸缩分组（我的频道 / 最近进入）：与私聊分组（.dm-group）保持一致的
   圆角边框 + 浅底，形成「分块卡片」风格，统一整站侧栏分组语言 */
.side-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color 0.14s;
  margin-bottom: 4px;
}

.side-section:last-child {
  margin-bottom: 0;
}

/* 展开态（默认 = not .collapsed）：边框 / 标题 / 箭头同步染品牌色
   与私聊 .dm-group.open 的「展开态统一语言」保持一致 */
.side-section:not(.collapsed) {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
}
.side-section:not(.collapsed) .ss-title {
  color: var(--brand);
}
.side-section:not(.collapsed) .ss-caret {
  color: var(--brand);
}

/* 分组头：上下居中、左右内边距让标题不贴卡片边 */
.side-sec-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  min-height: 32px;
}

.side-sec-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}

.side-sec-toggle:hover {
  color: var(--text);
  background: var(--surface-3);
}

.ss-caret {
  flex: 0 0 auto;
  font-size: 9px;
  color: var(--text-3);
  transition: transform 0.18s ease, color 0.14s;
}

.side-section.collapsed .ss-caret {
  transform: rotate(-90deg);
}

.ss-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.14s;
}

.ss-count {
  flex: 0 0 auto;
  min-width: 16px;
  height: 15px;
  padding: 0 5px;
  border-radius: 8px;
  /* 比 section 卡片（--surface-2）更深一档 --surface-3，
     在新带边框的卡片里仍能看清 */
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* body 与 head 之间用一根 1px 细线分隔（同 .dm-group-body 的分隔风格） */
.side-sec-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px 6px;
  border-top: 1px solid var(--border);
}

/* 在卡片底色（--surface-2）里，room-item:hover 用 --surface-3 才能给到反馈 */
.side-sec-body .room-item:hover {
  background: var(--surface-3);
}

.side-section.collapsed .side-sec-body {
  display: none;
}

.side-sec-empty {
  padding: 4px 8px 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

.room-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.room-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.room-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

/* 已封禁频道：灰显 + 鼠标变 not-allowed + 不再展示徽标红色 hover */
.room-item.banned {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.room-item.banned:hover {
  background: var(--surface-2); /* 不要激活色 */
  color: var(--text-2);
}
.room-item.banned .name {
  text-decoration: line-through;
  text-decoration-color: rgba(229, 72, 77, 0.55);
}
.room-item .room-banned-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(229, 72, 77, 0.12);
  color: var(--red, #e5484d);
  letter-spacing: 0.2px;
  vertical-align: middle;
}

.room-item .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 私聊列表项：头像更大、文字更大、头像右下角带状态圆点 ---- */
.room-item.dm-item {
  gap: 11px;
  padding: 9px 8px;
  font-size: 14.5px;
}

.room-item.dm-item .name {
  font-weight: 550;
}

/* 头像容器：作为右下角状态圆点的定位参考 */
.dm-avatar {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  line-height: 0;
}

/* 注意：不能把 .avatar 改成 display:block，否则首字母会掉到圆形左上角外侧 */
.dm-avatar .avatar {
  border-radius: 50%;
}

.dm-avatar .avatar-img {
  display: block;
  border-radius: 50%;
}

/* 右下角状态圆点：在线绿、离线灰；描边与侧栏底色一致形成「挖空」效果 */
.dm-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c3c8d4;
  border: 2px solid var(--surface-3);
  transition: background 0.15s;
}

.dm-dot.on {
  background: var(--green);
}

/* 暗黑主题：离线灰点调暗，避免在深色底上过亮 */
html[data-theme='dark'] .dm-dot {
  background: #5c6784;
}
html[data-theme='dark'] .dm-dot.on {
  background: var(--green);
}

/* ---- 私聊搜索行：搜索框右侧的「添加好友」按钮 ---- */
.dm-search-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 8px 4px;
}

.dm-search-row .side-search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.dm-add-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--brand);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.12s;
}

.dm-add-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-1px);
}

.dm-add-btn:active {
  transform: none;
}

/* ---- 好友分组（全部好友 / 在线好友 / 请求申请）：垂直排列，点标题展开 ---- */
.dm-groups {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 8px 6px;
  max-height: 54%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dm-group {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color 0.14s;
}

.dm-group.open {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
}

.dm-group-head {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}

.dm-group-head:hover {
  color: var(--text);
  background: var(--surface-3);
}

/* 折叠箭头：展开时顺时针转 90°（▸ → ▾） */
.dm-group-arrow {
  flex: 0 0 auto;
  width: 10px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-3);
  transition: transform 0.16s;
}

.dm-group.open .dm-group-arrow {
  transform: rotate(90deg);
  color: var(--brand);
}

.dm-group-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-group.open .dm-group-title {
  color: var(--brand);
}

.dm-group-count {
  flex: 0 0 auto;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 展开后的成员列表：自身可滚动，避免撑高整个侧栏 */
.dm-group-body {
  padding: 2px 4px 6px;
  border-top: 1px solid var(--border);
  max-height: 168px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dm-group-body .room-item {
  border-radius: 8px;
}

/* ---- 「私聊」区块大标题 ---- */
.dm-section-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 5px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-2);
}

.dm-section-head::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* ---- 好友申请行（请求申请分类）：头像 + 说明 + 同意 / 拒绝 ---- */
.room-item.dm-req-row {
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.req-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.req-main .req-name {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-main .req-sub {
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-req-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

.dm-req-btn {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.dm-req-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.dm-req-btn.accept {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.dm-req-btn.accept:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.dm-req-btn.reject:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}

/* 「取消申请」：平时低调，悬停时给出「撤回」的警示色 */
.dm-req-btn.cancel {
  color: var(--text-3);
}

.dm-req-btn.cancel:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}

.dm-req-tag {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ---- 添加好友弹窗 ---- */
.friend-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.friend-add-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.friend-add-row .btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
}

.friend-add-result {
  margin-top: 4px;
}

.fa-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.fa-avatar {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}

.fa-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fa-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}

.fa-name .fa-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fa-sub {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fa-act {
  flex: 0 0 auto;
}

.fa-act .btn {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.fa-act .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fa-hint {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 10px 0 2px;
}

.fa-hint.ok {
  color: var(--green);
}

.fa-hint.err {
  color: var(--red);
}

/* 频道头像（无图时显示彩色 # 号） */
.room-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  border-radius: 9px;
}

.room-avatar-img {
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: cover;
}

/* 频道两行布局：名称+角标 / ID+在线人数 */
.room-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.room-top .name {
  flex: 1;
}

.room-sub {
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.room-item.active .room-sub {
  color: var(--brand);
  opacity: 0.85;
}

/* ⋯ 更多按钮 */
.room-more {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.room-more:hover {
  background: var(--surface-2);
  color: var(--text);
}

.room-item.active .room-more:hover {
  background: rgba(79, 110, 247, 0.12);
  color: var(--brand);
}

/* 频道下方的在线成员面板：比频道卡片更小、缩进显示，可折叠可搜索 */
.room-members {
  margin: 2px 2px 6px 12px;
  padding: 1px 0 1px 8px;
  border-left: 2px solid var(--border);
}

.rm-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 2px 4px 0;
}

.rm-toggle {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  padding: 2px 5px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.rm-toggle:hover {
  background: var(--surface-2);
  color: var(--text-2);
}

.rm-search {
  flex: 1;
  min-width: 0;
  height: 22px;
  font-size: 11.5px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}

.rm-search:focus {
  border-color: var(--brand);
  background: var(--surface);
}

.rm-search::placeholder {
  color: var(--text-3);
}

.rm-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 208px;
  overflow-y: auto;
  padding-right: 2px;
}

.rm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  min-width: 0;
  transition: background 0.12s, color 0.12s;
}

.rm-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* 头像前的状态圆点：默认灰，在语音中点亮为绿色 */
.rm-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c3c8d4;
  transition: background 0.15s, box-shadow 0.15s;
}

.rm-dot.on {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.rm-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 列表中管理成员身份小色块：浅黑/浅紫/浅黄 */
.members-panel .rm-role {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  margin-left: 3px;
  padding: 0;
  box-sizing: border-box;
}

/* ---- 成员面板形态（聊天框右侧 #membersPanel 内）----
   大标题「频道成员列表」→ 搜索框 → 固定管理成员区（三类身份浅色框）→
   左右分类 tab（在线 / 离线）→ 列表（占满剩余空间，滚动到底加载下一页） */
.members-panel .room-members {
  margin: 0;
  padding: 0;
  border-left: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 大标题 */
.members-panel .rm-title {
  flex: 0 0 auto;
  padding: 12px 12px 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text);
}
/* 搜索框：位于大标题下方，高度加高避免遮挡框内文字 */
.members-panel .rm-search {
  display: block;
  flex: 0 0 auto;
  height: 32px;
  margin: 0 10px 4px;
  font-size: 13px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-xs, 8px);
}
/* 固定管理成员区：一直显示在搜索框下方（官方 / 频道主 / 频道管理） */
.members-panel .rm-manage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px 2px;
}
.members-panel .rm-manage.hidden {
  display: none;
}
.members-panel .rm-group-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 2px 0;
}
/* 管理成员胶囊：透黑框 = 官方，浅紫框 = 频道主，浅黄框 = 频道管理 */
.members-panel .rm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
}
.members-panel .rm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s;
}
.members-panel .rm-chip:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.members-panel .rm-chip .rm-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.members-panel .rm-chip.voice .rm-chip-name::after {
  content: '🎙';
  font-size: 10px;
  margin-left: 2px;
}
/* 透黑框：官方（层级最高） */
.members-panel .rm-chip-site,
.members-panel .rm-group-label.rm-chip-site {
  background: rgba(20, 20, 24, 0.06);
  border-color: rgba(20, 20, 24, 0.42);
  color: #33343a;
}
html[data-theme='dark'] .members-panel .rm-chip-site,
html[data-theme='dark'] .members-panel .rm-group-label.rm-chip-site {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.5);
  color: #e8e8ef;
}
/* 浅紫框：频道主 */
.members-panel .rm-chip-owner,
.members-panel .rm-group-label.rm-chip-owner {
  background: rgba(156, 107, 255, 0.12);
  border-color: rgba(156, 107, 255, 0.5);
  color: #6f3fd4;
}
html[data-theme='dark'] .members-panel .rm-chip-owner,
html[data-theme='dark'] .members-panel .rm-group-label.rm-chip-owner {
  background: rgba(156, 107, 255, 0.16);
  border-color: rgba(178, 140, 255, 0.55);
  color: #cbb2ff;
}
/* 浅黄框：频道管理 */
.members-panel .rm-chip-admin,
.members-panel .rm-group-label.rm-chip-admin {
  background: rgba(232, 176, 24, 0.13);
  border-color: rgba(214, 158, 20, 0.5);
  color: #9a710a;
}
html[data-theme='dark'] .members-panel .rm-chip-admin,
html[data-theme='dark'] .members-panel .rm-group-label.rm-chip-admin {
  background: rgba(232, 176, 24, 0.16);
  border-color: rgba(240, 196, 70, 0.55);
  color: #f2d488;
}
/* 左右分类 tab：在线 | 离线（各占一半） */
.members-panel .rm-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 6px 10px 4px;
}
.members-panel .rm-tab {
  flex: 1 1 50%;
  padding: 5px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs, 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.members-panel .rm-tab:hover {
  background: var(--surface-2);
  color: var(--text-2);
}
.members-panel .rm-tab.active {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
/* 成员列表：单个容器，滚动到底自动加载下一页 */
.members-panel .rm-list {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 2px 6px;
}
.members-panel .rm-item {
  padding: 5px 8px;
  font-size: 12.5px;
}
/* 离线成员：整体置灰区分 */
.members-panel .rm-item.offline {
  opacity: 0.55;
}
.members-panel .rm-item.offline:hover {
  opacity: 0.8;
}
/* 「上滑加载更多」提示行 */
.members-panel .rm-more {
  padding: 6px 0 4px;
  font-size: 11.5px;
  text-align: center;
  color: var(--text-3);
}

/* ⋯ 弹出的更多菜单 */
.room-menu-pop {
  position: fixed;
  z-index: 9200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  padding: 5px;
  min-width: 124px;
  display: flex;
  flex-direction: column;
}

.room-menu-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-2);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.room-menu-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.room-menu-item.danger {
  color: var(--red);
}

.room-menu-item.danger:hover {
  background: rgba(229, 72, 77, 0.1);
  color: var(--red);
}

/* 频道信息弹窗 */
.room-info-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.room-info-meta {
  font-size: 12px;
  color: var(--text-3);
  margin: 4px 0 12px;
}

/* 频道列表里的「已设密码」锁标 */
.room-lock {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

/* 创建频道：剩余配额提示 */
.room-quota {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-2);
}

.room-quota.full {
  color: var(--red);
  font-weight: 600;
}

/* 频道信息：清除密码勾选项 */
.field label.room-pass-clear {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-2);
  margin: 9px 0 0;
  cursor: pointer;
  user-select: none;
}

.field label.room-pass-clear input {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand);
}

.field label.room-pass-clear input:disabled {
  cursor: not-allowed;
}

/* 删除频道弹窗 */
.room-del-tip {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 6px;
}

.room-del-tip.sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 14px;
}

.unread-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.empty.small {
  padding: 10px 12px;
  font-size: 12px;
}

/* 聊天区会话标题栏
   注意：这里必须用 center 而不是 baseline —— 首个元素是大厅/频道头像，
   头像为图片（img）时其基线是图片底边，会把整栏基线拉到底部，
   导致「ID · 在线人数」相对头像昵称上下偏移。 */
.chat-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.chat-head .chat-title {
  font-size: 15px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat-head .chat-title .room-avatar,
.chat-head .chat-title img,
.chat-head .chat-title .avatar {
  border-radius: 6px;
}

/* 私聊标题里的「昵称 + 官方标签 + · 私聊」：用普通行内流排版，
   这样标签前后是自然间距，而不是标题栏 flex 的 8px 间距 */
.chat-head .chat-title .chat-title-name,
.chat-head .chat-title .chat-title-userbtn .chat-title-name {
  display: inline;
}

.chat-head .chat-title .chat-title-name .tag.official {
  margin: 0 4px;
  vertical-align: middle;
}

/* 私聊顶部「头像 + 昵称」整段可点击（弹出对方资料卡） */
.chat-head .chat-title .chat-title-userbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin: -4px -8px;          /* 抵消 padding，让布局不挤掉原标题位置 */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.chat-head .chat-title .chat-title-userbtn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.chat-head .chat-title .chat-title-userbtn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.chat-head .chat-title .chat-title-userbtn:active {
  background: var(--brand-soft, var(--surface-2));
}

.chat-head .chat-sub {
  font-size: 12.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 频道 ID + 后面的分享图标（点击复制频道链接） */
.chat-head .chat-id {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.chat-head .chat-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--glass-bg-soft, var(--surface-2));
  color: var(--text-3);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.12s, background 0.12s, border-color 0.12s, transform 0.12s;
}

.chat-head .chat-share-btn svg {
  display: block;
}

.chat-head .chat-share-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}

.chat-head .chat-share-btn:active {
  transform: scale(0.92);
}

/* 监控台消息流的会话来源标记 */
.msg-log .row .msg-tag {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 17px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-log .row .msg-tag.dm {
  color: var(--amber);
  background: var(--amber-soft);
}

/* --------------------------- 监控台：分类布局 --------------------------- */

.admin-shell {
  flex: 1;
  display: flex;
  min-height: 0;
}

.admin-nav {
  width: 208px;
  flex: 0 0 auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 12px 10px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-group {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-3);
  padding: 12px 9px 4px;
  text-transform: uppercase;
  user-select: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-2);
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.nav-ico {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex: 0 0 auto;
}

.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  border-radius: 999px;
  padding: 0 7px;
  line-height: 18px;
}

.nav-item.active .nav-badge {
  background: var(--surface);
  color: var(--brand);
  border-color: #d3dafb;
}

.admin-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden; /* 表格溢出交给内部 table-wrap 处理，避免后台整体出现横向滚动条 */
  padding: 18px 22px 40px;
}

/* 独占一屏的面板里，表格 / 日志可以更高一些 */
.admin-content .table-wrap,
.admin-content .log,
.admin-content .msg-log {
  max-height: calc(100vh - 300px);
  min-height: 180px;
}

@media (max-width: 860px) {
  .admin-shell {
    flex-direction: column;
  }

  .admin-nav {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .nav-group {
    display: none;
  }

  .nav-item {
    width: auto;
    flex: 0 0 auto;
    padding: 7px 12px;
  }

  .nav-label {
    flex: 0 0 auto;
  }
}

/* ============================================================
   频道语音
   ============================================================ */

/* 顶栏「🎧 语音」入口 */
.voice-entry {
  margin-left: 10px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  transition: all 0.15s;
}
.voice-entry:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.voice-entry.on {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}
/* 私聊「通话」按钮：与频道语音入口区分开 */
.voice-entry.dm {
  border-color: #b9e3c6;
  background: #f0fbf3;
  color: #2f9e44;
}
.voice-entry.dm:hover {
  border-color: #2f9e44;
  color: #1f7a33;
}
.voice-entry.dm.on {
  background: #d8f5e0;
  border-color: #2f9e44;
  color: #1f7a33;
}

/* 语音控制条 */
.voice-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #f2f6ff 0%, #f7faff 100%);
  border-bottom: 1px solid var(--border);
}

.vb-scope {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  padding-right: 4px;
  border-right: 1px solid var(--border);
  margin-right: 2px;
  white-space: nowrap;
}

/* 私聊语音来电横幅 */
.call-incoming {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9400;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 92vw;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface, #fff);
  border: 1px solid #b9e3c6;
  box-shadow: 0 14px 40px rgba(15, 40, 25, 0.2);
  animation: ciIn 0.18s ease;
}
@keyframes ciIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
.call-incoming .ci-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #e8f8ee;
  color: #2f9e44;
  flex: 0 0 auto;
  overflow: hidden;
}
.call-incoming .ci-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.call-incoming .ci-body {
  flex: 1 1 auto;
  min-width: 0;
}
.call-incoming .ci-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-incoming .ci-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.call-incoming .ci-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.12s;
}
.call-incoming .ci-btn:hover {
  filter: brightness(1.06);
}
.call-incoming .ci-btn.accept {
  background: #2f9e44;
  color: #fff;
}
.call-incoming .ci-btn.decline {
  background: var(--surface-2, #f0f1f4);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.vb-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vb-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  transition: all 0.15s;
}
.vb-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.vb-btn.off {
  background: var(--red-soft);
  border-color: #f3b9bd;
  color: var(--red);
}
/* 按住说话按下中 */
.vb-btn.ptt {
  min-width: 96px;
  font-weight: 600;
}
.vb-btn.talking {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* 发言模式切换 */
.vb-seg {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.vb-seg-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--text-2);
  background: transparent;
  transition: all 0.15s;
}
.vb-seg-btn + .vb-seg-btn {
  border-left: 1px solid var(--border);
}
.vb-seg-btn.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* 热键设置按钮 */
.vb-key {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text-2);
  font-size: 12.5px;
}
.vb-key kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 3px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
}
.vb-key.capturing {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.vb-key.capturing kbd {
  border-color: var(--brand);
  color: var(--brand);
}

.vb-status {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

/* 语音成员列表 */
.vb-roster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 160px;
  min-width: 0;
}

.vb-person {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 3px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.vb-person.speaking {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.14);
}
.vb-person.muted {
  opacity: 0.6;
}
.vb-name {
  font-size: 12.5px;
  color: var(--text);
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vb-badge {
  font-size: 11px;
  line-height: 1;
}
/* 说话时的跳动小点 */
.vb-wave {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: vbPulse 0.9s ease-in-out infinite;
}
@keyframes vbPulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

.vb-leave {
  margin-left: auto;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #f3b9bd;
  background: var(--red-soft);
  color: var(--red);
  font-size: 12.5px;
  white-space: nowrap;
}
.vb-leave:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

@media (max-width: 720px) {
  .voice-bar {
    padding: 8px 10px;
  }
  .vb-status {
    display: none;
  }
  .vb-name {
    max-width: 68px;
  }
}

/* ============================ 监控台：靓号 ID ============================ */

.vanity-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}

.vanity-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s, background 0.12s;
}
.vanity-rule:hover {
  background: var(--surface-2);
}
.vanity-rule.on {
  border-color: #c9d4fb;
  background: var(--brand-soft);
}
.vanity-rule input {
  margin-top: 2px;
  flex: 0 0 auto;
}
.vanity-rule .vr-body {
  min-width: 0;
  flex: 1;
}
.vanity-rule .vr-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.vanity-rule .vr-pattern {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--brand);
  background: #eef2ff;
  border: 1px solid #d9e0fd;
  border-radius: 4px;
  padding: 0 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vanity-rule .vr-desc {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
}

.vanity-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.vanity-candidates:empty {
  margin-top: 0;
}
.vanity-cand {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid #d9e0fd;
  background: #f4f6ff;
  color: var(--brand);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vanity-cand:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.vanity-cand.used {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-3);
  cursor: default;
}
.vanity-cand.used:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-3);
}

#vanityUsedBody .vn-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.5px;
}
#vanityUsedBody .vn-tag {
  display: inline-block;
  margin: 1px 4px 1px 0;
  font-size: 11px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid #d3dafb;
  border-radius: 4px;
  padding: 0 5px;
}

/* ============================ 频道顶部公告 ============================ */
.room-notice {
  display: flex;
  flex-direction: column;
  padding: 9px 14px 0;
  background: linear-gradient(180deg, #fff8e8 0%, #fffdf6 100%);
  border-bottom: 1px solid #f2e3c0;
}
.rn-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.rn-icon {
  font-size: 16px;
  line-height: 1.4;
  flex: none;
}
.rn-body {
  flex: 1;
  min-width: 0;
}
.rn-text {
  font-size: 13px;
  line-height: 1.55;          /* 每行 20.15px → 10 行 = 15.5em */
  color: #8a5a12;
  white-space: pre-wrap;
  word-break: break-word;
  /* 最多展示 10 行，超出显示滚动条，避免公告条把聊天区顶掉 */
  max-height: 15.5em;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 207, 154, 0.5) transparent;
  padding-right: 2px;
}
.rn-text::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.rn-text::-webkit-scrollbar-track {
  background: transparent;
}
.rn-text::-webkit-scrollbar-thumb {
  background: rgba(230, 207, 154, 0.45);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.rn-text::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 172, 85, 0.75);
  background-clip: content-box;
}
.rn-text.empty {
  color: var(--text-3);
  font-style: italic;
}
.rn-meta {
  margin-top: 3px;
  font-size: 11px;
  color: #b08a4a;
}
/* 编辑公告：固定在公告右上角 */
.rn-edit {
  flex: none;
  align-self: flex-start;
  margin-top: -1px;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
  color: #8a5a12;
  background: #fff;
  border: 1px solid #eccf92;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.rn-edit:hover {
  background: #fff4dc;
  border-color: #d9ac55;
}
/* 底部中间的伸缩扁按钮：收起 / 展开公告 */
.rn-toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 17px;
  margin: 5px 0 6px;
  padding: 0 18px;
  font-size: 11px;
  line-height: 1;
  color: #a9822f;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #efe0bd;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.rn-toggle:hover {
  background: #fff;
  border-color: #d9ac55;
  color: #8a5a12;
}
.rn-toggle:active {
  transform: scaleY(0.9);
}
.rn-toggle:focus-visible {
  outline: 2px solid #d9ac55;
  outline-offset: 1px;
}
.rn-toggle-ico {
  font-size: 9px;
  transition: transform 0.18s ease;
}
/* 收起状态：整行内容（📢 + 正文 + 更新时间 + 编辑入口）全部隐藏，
   公告条只剩底部中间那枚伸缩扁按钮，高度约 25px */
.room-notice.collapsed {
  padding: 4px 14px;
}
.room-notice.collapsed .rn-head {
  display: none;
}
.room-notice.collapsed .rn-toggle {
  margin: 0;
}
.room-notice.collapsed .rn-toggle-ico {
  transform: rotate(180deg);
}

/* ============ 频道全员禁言状态条 ============
 * 与频道公告同级；muted=true 时显示。
 * 普通成员只看到提示文字；频道主 / 频道管理右侧多一颗「解除禁言」按钮。 */
.room-mute-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 16px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 196, 86, 0.16), rgba(255, 196, 86, 0.08));
  border: 1px solid rgba(255, 168, 38, 0.35);
  color: var(--text-1, #2c2f36);
  font-size: 13px;
  line-height: 1.4;
}
.room-mute-notice .rmn-icon {
  font-size: 16px;
  flex: 0 0 auto;
}
.room-mute-notice .rmn-text {
  flex: 1 1 auto;
}
.room-mute-notice .rmn-act {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 168, 38, 0.6);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-1, #2c2f36);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.room-mute-notice .rmn-act:hover {
  background: rgba(255, 220, 150, 0.95);
}

/* ============ 私聊：对方还不是好友的提示条 ============
 * 位置在私聊顶栏（对方头像 / 昵称那一行）正下方；
 * 配色沿用频道公告（.room-notice）的琥珀色渐变底 + 棕色文字，
 * 文案后紧跟一枚「添加好友」按钮，一键发出好友申请。 */
.dm-stranger-notice {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #fff8e8 0%, #fffdf6 100%);
  border-bottom: 1px solid #f2e3c0;
  font-size: 13px;
  color: #8a5a12;
}

.dsn-icon {
  flex: none;
  font-size: 15px;
  line-height: 1;
}

/* 提示文字不撑满整行，好让「添加好友」按钮紧跟其后 */
.dsn-text {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.5;
  word-break: break-word;
}

/* 「添加好友」按钮：紧跟提示文字之后 */
.dsn-add {
  flex: none;
  height: 26px;
  padding: 0 12px;
  border: 1px solid #d9ac55;
  border-radius: 999px;
  background: #fff;
  color: #8a5a12;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s, opacity 0.14s;
}

.dsn-add:hover:not(:disabled) {
  background: #f6c453;
  border-color: #d9ac55;
  color: #5e3c07;
}

.dsn-add:disabled {
  opacity: 0.6;
  cursor: default;
}

/* 暗黑主题：与暗色公告共用同一套琥珀色 */
html[data-theme='dark'] .dm-stranger-notice {
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.16) 0%,
    rgba(251, 191, 36, 0.06) 100%
  );
  border-bottom-color: rgba(251, 191, 36, 0.24);
  color: #f2d08a;
}

html[data-theme='dark'] .dsn-add {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.42);
  color: #f2d08a;
}

html[data-theme='dark'] .dsn-add:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.26);
  border-color: rgba(251, 191, 36, 0.62);
  color: #ffe6b0;
}

/* ============================ 频道成员管理 ============================ */
.mg-list {
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.mg-item,
.mg-cand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.mg-cand {
  background: var(--surface);
}
.mg-mid {
  flex: 1;
  min-width: 0;
}
.mg-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-sub {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mg-tag {
  flex: none;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 500;
}
.mg-tag.owner {
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
}
.mg-tag.admin {
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid #d3dafb;
}
.mg-remove,
.mg-add-btn {
  flex: none;
  height: 26px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.mg-remove {
  color: var(--red);
  background: #fff;
  border: 1px solid var(--red-soft);
}
.mg-remove:hover {
  background: var(--red-soft);
}
.mg-add-btn {
  color: var(--brand);
  background: #fff;
  border: 1px solid #d3dafb;
}
.mg-add-btn:hover {
  background: var(--brand-soft);
}
.mg-remove:disabled,
.mg-add-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.mg-add {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.mg-search-row {
  margin-bottom: 8px;
}
.mg-candidates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

/* ============================================================
   私聊（主聊天区全屏显示）—— 顶栏「返回频道」按钮
   ============================================================ */

.chat-back {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid #d3dafb;
}
.chat-back:hover {
  background: #e3e8fd;
}

/* 私聊视图下给「你所在频道」一个轻量标记（人没退出频道） */
.room-item.in-room .room-sub {
  color: var(--green);
}

/* 私聊标题里的「对方所在频道」入口：点击询问是否进入 */
.chat-sub .peer-room-chip {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid #d3dafb;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 6px;
  padding: 0 6px;
  margin: 0 1px;
  font-size: 12px;
  line-height: 18px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.chat-sub .peer-room-chip:hover {
  background: #e3e8fd;
  text-decoration: underline;
}

/* ============================================================
   ✅ 液态玻璃主题层（Liquid Glass）
   —— 极光底 + 磨砂玻璃面板 + 大圆角 + 明亮/暗黑双主题
   ============================================================ */

/* ---------------- 0. 动态极光背景：给玻璃「可折射」的底色 ---------------- */
body::before {
  content: '';
  position: fixed;
  inset: -25vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 14% 6%, rgba(79, 110, 247, 0.42), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 10%, rgba(168, 85, 247, 0.32), transparent 62%),
    radial-gradient(44vmax 44vmax at 80% 90%, rgba(14, 165, 233, 0.3), transparent 62%),
    radial-gradient(36vmax 36vmax at 16% 94%, rgba(244, 114, 182, 0.24), transparent 62%);
  animation: lg-aurora 30s ease-in-out infinite alternate;
}
html[data-theme='dark'] body::before {
  background:
    radial-gradient(38vmax 38vmax at 14% 6%, rgba(79, 110, 247, 0.45), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 10%, rgba(147, 51, 234, 0.38), transparent 62%),
    radial-gradient(44vmax 44vmax at 80% 90%, rgba(6, 182, 212, 0.3), transparent 62%),
    radial-gradient(36vmax 36vmax at 16% 94%, rgba(219, 39, 119, 0.28), transparent 62%);
}
@keyframes lg-aurora {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 2%, 0) scale(1.14);
  }
}

/* 页面外壳抬到极光之上 */
.app,
.auth-wrap {
  position: relative;
  z-index: 1;
}

/* ---------------- 1. 玻璃面板：结构层 ---------------- */
.topbar,
.sidebar,
.chat,
.admin-nav,
.side-tabs,
.members-panel,
.chat-head,
.composer,
.voice-bar,
.room-notice,
.emoji-panel,
.ur-list,
.card,
.modal,
.auth-card,
.call-incoming,
.room-menu-pop,
.side-search-drop,
.conn-banner {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}

/* 更「实」的玻璃：弹窗、登录卡、悬浮菜单、来电横幅 */
.modal,
.auth-card,
.room-menu-pop,
.side-search-drop,
.call-incoming,
.emoji-panel {
  background: var(--glass-bg-strong);
}

/* 外层浮动面板：描边 + 投影 + 大圆角 */
.topbar,
.sidebar,
.members-panel,
.chat,
.card,
.modal,
.auth-card,
.call-incoming,
.room-menu-pop,
.side-search-drop {
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.topbar,
.sidebar,
.members-panel,
.chat,
.card,
.auth-card {
  border-radius: var(--radius);
}
.modal {
  border-radius: var(--radius-lg);
}
.room-menu-pop {
  border-radius: var(--radius-sm);
}
.call-incoming {
  border-radius: var(--radius);
}

/* 应用外壳：浮起的玻璃面板之间留缝 */
.app {
  padding: 10px;
  gap: 10px;
}
.main {
  gap: 10px;
}

/* 内部面板：与外壳圆角贴合，不再各自描边 */
.side-tabs {
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
/* 页签自身也要圆角：选中态的 1px 内描边与悬停底色会跟随自身圆角绘制，
   否则首尾页签贴合容器圆角处会露出直角外框 */
.side-tab:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}
.side-tab:last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}
.chat-head {
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.composer {
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
.room-notice,
.voice-bar {
  box-shadow: none;
}

/* 监控台侧栏（窄屏下走横向布局，不套圆角，避免覆盖媒体查询） */
@media (min-width: 861px) {
  .admin-shell {
    gap: 10px;
  }
  .admin-nav {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
  }
}
@media (max-width: 860px) {
  .admin-shell {
    gap: 10px;
  }
}

/* ---------------- 2. 控件：圆润 + 玻璃 ---------------- */
.input,
.composer textarea,
select.input {
  background: var(--glass-bg-strong);
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
}

.btn {
  border-radius: var(--radius-sm);
}
.btn-primary {
  box-shadow: 0 6px 18px rgba(79, 110, 247, 0.32);
}
html[data-theme='dark'] .btn-primary {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.btn-ghost {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: var(--surface-2);
}

.pill,
.voice-entry,
.room-count-btn,
.ss-count,
.nav-badge,
.ur-chip,
.tag {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---- 站方标识「官方」（原「系统管理员 / 管理员」）----
   全站统一：透黑底 + 文字「官方」。
   出现在：聊天页在线列表、用户资料卡、后台在线/注册用户表格。 */
.tag.official,
.user-item .tag.official,
.user-card .tag.official {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2px;
  padding: 0 6px;
  border-radius: 4px;
  color: #fff;
  background: rgba(20, 20, 24, 0.68);
  border: 1px solid rgba(20, 20, 24, 0.85);
}
html[data-theme='dark'] .tag.official,
html[data-theme='dark'] .user-item .tag.official,
html[data-theme='dark'] .user-card .tag.official,
html[data-theme='dark'] .user-item .tag.admin {
  color: #eaeaef;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.room-item,
.nav-item {
  border-radius: var(--radius-sm);
}
.room-item:hover,
.nav-item:hover,
.user-item:hover,
.log-item:hover,
.msg-log .row:hover {
  background: var(--glass-bg-soft);
}
.room-item.active,
.nav-item.active,
.side-tab.active {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(79, 110, 247, 0.22);
}
html[data-theme='dark'] .room-item.active,
html[data-theme='dark'] .nav-item.active,
html[data-theme='dark'] .side-tab.active {
  box-shadow: inset 0 0 0 1px rgba(107, 132, 255, 0.32);
}

/* 消息气泡：玻璃感 */
.msg {
  border-radius: var(--radius-sm);
}
.msg:hover {
  background: var(--glass-bg-soft);
}
.msg.self {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(79, 110, 247, 0.18);
}
html[data-theme='dark'] .msg.self {
  box-shadow: inset 0 0 0 1px rgba(107, 132, 255, 0.26);
}
html[data-theme='dark'] .msg.self .msg-name {
  color: #b9c6ff;
}

/* ---- 他人消息气泡底色：默认透灰；管理身份按层级着色，与成员列表分级色一致 ----
   官方 = 透黑（site）｜频道主 = 透紫（owner）｜频道管理 = 透橙/琥珀（admin）
   自己的消息（.msg.self）不受影响，保持品牌色。 */
.msg:not(.self) {
  background: rgba(126, 141, 180, 0.1);
}
.msg:not(.self).tier-site {
  background: rgba(20, 20, 24, 0.06);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 24, 0.2);
}
.msg:not(.self).tier-owner {
  background: rgba(156, 107, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(156, 107, 255, 0.3);
}
.msg:not(.self).tier-admin {
  background: rgba(232, 176, 24, 0.13);
  box-shadow: inset 0 0 0 1px rgba(214, 158, 20, 0.3);
}
/* 悬停：在各自底色上略微加深（覆盖通用 .msg:hover 的玻璃白） */
.msg:not(.self):hover {
  background: rgba(126, 141, 180, 0.16);
}
.msg:not(.self).tier-site:hover {
  background: rgba(20, 20, 24, 0.11);
}
.msg:not(.self).tier-owner:hover {
  background: rgba(156, 107, 255, 0.18);
}
.msg:not(.self).tier-admin:hover {
  background: rgba(232, 176, 24, 0.19);
}

html[data-theme='dark'] .msg:not(.self) {
  background: rgba(150, 165, 205, 0.1);
}
html[data-theme='dark'] .msg:not(.self).tier-site {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
html[data-theme='dark'] .msg:not(.self).tier-owner {
  background: rgba(156, 107, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(178, 140, 255, 0.28);
}
html[data-theme='dark'] .msg:not(.self).tier-admin {
  background: rgba(232, 176, 24, 0.16);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 70, 0.28);
}
html[data-theme='dark'] .msg:not(.self):hover {
  background: rgba(150, 165, 205, 0.16);
}
html[data-theme='dark'] .msg:not(.self).tier-site:hover {
  background: rgba(255, 255, 255, 0.11);
}
html[data-theme='dark'] .msg:not(.self).tier-owner:hover {
  background: rgba(156, 107, 255, 0.22);
}
html[data-theme='dark'] .msg:not(.self).tier-admin:hover {
  background: rgba(232, 176, 24, 0.22);
}

.sys-line {
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 表格：更柔和的玻璃分隔 */
th {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
td {
  border-bottom-color: var(--border);
}

/* 原本写死 #fff 的小按钮 / 徽标：改成随主题的玻璃 */
.vb-btn,
.vb-seg,
.vb-key,
.vb-person,
.rn-edit,
.rn-toggle,
.mg-remove,
.mg-add-btn,
.mg-cand {
  background: var(--glass-bg-strong);
}
.rn-edit:hover,
.rn-toggle:hover,
.mg-remove:hover,
.mg-add-btn:hover {
  background: var(--surface-2);
}

/* 弹窗遮罩：更浓的磨砂 */
.modal-mask {
  background: rgba(18, 22, 38, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-theme='dark'] .modal-mask {
  background: rgba(3, 5, 12, 0.6);
}

/* UI 弹窗（UIDialog 运行时注入，用更高优先级覆盖） */
html[data-theme] .uid-mask {
  -webkit-backdrop-filter: blur(9px) saturate(160%);
  backdrop-filter: blur(9px) saturate(160%);
}
html[data-theme] .uid-box {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}
html[data-theme] .uid-btn {
  border-radius: var(--radius-xs);
}

/* ---------------- 3. 主题色块（公告条 / 语音条 / 频道语音） ---------------- */
html[data-theme] .room-notice {
  background: linear-gradient(
    180deg,
    rgba(255, 206, 108, 0.24) 0%,
    rgba(255, 236, 190, 0.12) 100%
  );
  border-bottom-color: rgba(214, 174, 92, 0.34);
}
html[data-theme='dark'] .room-notice {
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.16) 0%,
    rgba(251, 191, 36, 0.06) 100%
  );
  border-bottom-color: rgba(251, 191, 36, 0.24);
}
html[data-theme='dark'] .rn-text {
  color: #f2d08a;
}
html[data-theme='dark'] .rn-meta {
  color: #c9ad74;
}
html[data-theme='dark'] .rn-edit {
  color: #f2d08a;
  border-color: rgba(251, 191, 36, 0.34);
}
html[data-theme='dark'] .rn-toggle {
  color: #e5c78b;
  border-color: rgba(251, 191, 36, 0.26);
}
html[data-theme='dark'] .rn-tip,
html[data-theme='dark'] .rn-toggle-txt {
  color: #d9bd85;
}

html[data-theme] .voice-bar {
  background: linear-gradient(
    180deg,
    rgba(140, 170, 255, 0.2) 0%,
    rgba(140, 170, 255, 0.07) 100%
  );
}
html[data-theme='dark'] .voice-bar {
  background: linear-gradient(
    180deg,
    rgba(107, 132, 255, 0.16) 0%,
    rgba(107, 132, 255, 0.05) 100%
  );
}

html[data-theme='dark'] .voice-entry.dm {
  border-color: rgba(52, 211, 153, 0.36);
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
}
html[data-theme='dark'] .voice-entry.dm:hover,
html[data-theme='dark'] .voice-entry.dm.on {
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(52, 211, 153, 0.22);
  color: #a7f3d0;
}
html[data-theme='dark'] .call-incoming {
  border-color: rgba(52, 211, 153, 0.36);
}
html[data-theme='dark'] .call-incoming .ci-avatar {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
}

/* ---------------- 4. 暗黑模式：把写死的浅色文案补齐 ---------------- */
html[data-theme='dark'] .auth-wrap {
  background: radial-gradient(1200px 600px at 15% -10%, rgba(79, 110, 247, 0.2) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(16, 185, 129, 0.16) 0%, transparent 55%),
    transparent;
}
html[data-theme='light'] .auth-wrap,
html:not([data-theme]) .auth-wrap {
  background: radial-gradient(1200px 600px at 15% -10%, rgba(79, 110, 247, 0.16) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(16, 185, 129, 0.14) 0%, transparent 55%),
    transparent;
}

html[data-theme='dark'] .alert-error {
  color: #ffb4b4;
}
html[data-theme='dark'] .alert-ok {
  color: #86efac;
}
html[data-theme='dark'] .field-tip,
html[data-theme='dark'] .stat-sub {
  color: var(--text-3);
}
html[data-theme='dark'] .log-item[data-type='online'] .log-text,
html[data-theme='dark'] .log-item[data-type='register'] .log-text {
  color: #6ee7a8;
}
html[data-theme='dark'] .log-item[data-type='login-failed'] .log-text {
  color: #ff9b9b;
}
html[data-theme='dark'] .state.off i {
  background: #4a5268;
}
html[data-theme='dark'] .conn-banner {
  color: #f5cf7a;
  border-top-color: rgba(251, 191, 36, 0.28);
}
html[data-theme='dark'] .btn-primary:disabled {
  background: rgba(107, 132, 255, 0.32);
}
html[data-theme='dark'] .nav-item.active .nav-badge,
html[data-theme='dark'] .mg-tag.admin,
html[data-theme='dark'] .chat-back,
html[data-theme='dark'] .chat-sub .peer-room-chip,
html[data-theme='dark'] .mg-add-btn {
  border-color: rgba(107, 132, 255, 0.4);
}
html[data-theme='dark'] .room-count-btn:hover,
html[data-theme='dark'] .room-count-btn.zero:hover,
html[data-theme='dark'] .chat-back:hover,
html[data-theme='dark'] .chat-sub .peer-room-chip:hover {
  background: rgba(107, 132, 255, 0.24);
  border-color: rgba(107, 132, 255, 0.5);
}
html[data-theme='dark'] .ur-chip.lock {
  color: #f2d08a;
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.3);
}
html[data-theme='dark'] .mg-tag.owner {
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.3);
}
html[data-theme='dark'] .btn.mini.danger,
html[data-theme='dark'] .vb-btn.off {
  border-color: rgba(255, 107, 107, 0.4);
}
html[data-theme='dark'] .user-item .tag.muted {
  border-color: rgba(251, 191, 36, 0.34);
}
html[data-theme='dark'] .mg-remove {
  border-color: rgba(255, 107, 107, 0.35);
}
html[data-theme='dark'] .emoji-panel {
  background: var(--glass-bg-strong);
}
html[data-theme='dark'] .auth-hint code {
  background: rgba(255, 255, 255, 0.08);
}

/* 滚动条跟随主题（液态玻璃细条） */
html[data-theme='dark'] {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
html[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  background-clip: content-box;
}
html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.34);
  background-clip: content-box;
}
html[data-theme='dark'] ::-webkit-scrollbar-corner,
html[data-theme='dark'] ::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------- 5. 主题切换按钮（右上角） ---------------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 30px;
  padding: 3px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg-soft);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: var(--glass-shadow-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.theme-toggle:hover {
  border-color: var(--brand);
}
.theme-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 2px 8px rgba(79, 110, 247, 0.45);
  transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
}
html[data-theme='dark'] .theme-toggle::before {
  transform: translateX(30px);
}
.theme-toggle .tt-opt {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  opacity: 0.5;
  filter: grayscale(0.5);
  transition: opacity 0.2s, filter 0.2s;
}
html[data-theme='light'] .theme-toggle .tt-light,
html:not([data-theme='dark']) .theme-toggle .tt-light,
html[data-theme='dark'] .theme-toggle .tt-dark {
  opacity: 1;
  filter: none;
}
/* 未登录页：固定在视口右上角 */
.theme-toggle.fixed {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 300;
}

/* ---------------- 6. 窄屏适配 & 无障碍 ---------------- */
@media (max-width: 720px) {
  .app {
    padding: 6px;
    gap: 6px;
  }
  .main {
    gap: 6px;
  }
  .theme-toggle.fixed {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
  .theme-toggle::before {
    transition: none;
  }
}

/* 浏览器不支持 backdrop-filter 时的兜底：用更实的底色保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar,
  .sidebar,
  .members-panel,
  .chat,
  .admin-nav,
  .side-tabs,
  .chat-head,
  .composer,
  .voice-bar,
  .room-notice,
  .emoji-panel,
  .ur-list,
  .card,
  .modal,
  .auth-card,
  .call-incoming,
  .room-menu-pop,
  .side-search-drop {
    background: var(--surface-3);
  }
}

/* ============================ 首页（发现频道） ============================ */

/* 侧栏：频道列表最顶部的「首页」大标题入口 */
.side-home {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 2px 0 8px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.4px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.side-home:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.side-home.active {
  background: var(--brand-soft);
  border-color: rgba(79, 110, 247, 0.4);
  color: var(--brand);
}

.side-home .sh-icon {
  font-size: 16px;
  line-height: 1;
}

.side-home .sh-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* 停在首页时：聊天头 / 公告 / 提示条 / 语音条 / 消息区 / 输入区 全部让位给首页 */
.chat.home-mode .chat-head,
.chat.home-mode .room-notice,
.chat.home-mode .dm-stranger-notice,
.chat.home-mode .voice-bar,
.chat.home-mode .messages,
.chat.home-mode .typing-line,
.chat.home-mode .composer {
  display: none !important;
}

.chat-home-ico {
  font-size: 15px;
  line-height: 1;
}

.home-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 26px 32px;
}

/* ---- 顶部：大标题 + 大搜索框 ---- */
.home-hero {
  max-width: 720px;
  margin: 0 auto 22px;
  text-align: center;
}

.home-hero-title {
  margin: 4px 0 6px;
  font-size: 28px;
  font-weight: 750;
  letter-spacing: 1px;
  color: var(--text);
}

.home-hero-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-3);
}

.home-search {
  position: relative;
}

.home-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.home-search-field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

.home-search-field .hs-mag {
  flex: 0 0 auto;
  font-size: 16px;
  opacity: 0.7;
}

.home-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

.home-search-input::placeholder {
  color: var(--text-3);
}

.home-search-clear {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.home-search-clear:hover {
  color: var(--text);
  background: var(--border);
}

/* ---- 搜索结果：有输入时在搜索框正下方展开（替换默认三段） ---- */
.home-search-drop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.home-search-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.home-search-row:hover {
  background: var(--brand-soft);
}

/* 搜索结果中已封禁的频道：灰显、禁用品牌色高亮 */
.home-search-row.banned {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.home-search-row.banned:hover {
  background: var(--surface-2);
}
.home-search-row .home-search-ban-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(229, 72, 77, 0.12);
  color: var(--red, #e5484d);
  letter-spacing: 0.2px;
  vertical-align: middle;
}

.hsr-mid {
  flex: 1 1 auto;
  min-width: 0;
}

.hsr-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hsr-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-3);
}

.home-search-empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

/* ---- 默认三段：官方频道 / 热门频道 / 最新创建 ---- */
.home-sections {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 首页分组容器（官方 / 热门 / 最新）：与私聊分组（.dm-group）保持一致的
   圆角边框 + 浅底，形成"分块卡片"风格，统一整站分组语言 */
.home-sec {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 14px 14px 16px;
  transition: border-color 0.14s;
}

.home-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.home-sec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.home-sec-tip {
  font-size: 11.5px;
  color: var(--text-3);
}

.home-refresh {
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.home-refresh:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}

.home-sec-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 10px;
}

.home-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.home-card:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* 首页卡片：已被封禁频道灰显，去掉 hover 抬升效果 */
.home-card.banned {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.home-card.banned:hover {
  background: var(--surface-2);
  border-color: var(--border);
  transform: none;
}
.home-card .home-card-ban-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(229, 72, 77, 0.12);
  color: var(--red, #e5484d);
  letter-spacing: 0.2px;
  vertical-align: middle;
}

.home-card-mid {
  flex: 1 1 auto;
  min-width: 0;
}

.home-card-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
}

/* 暗黑主题：卡片 / 搜索框用深色玻璃，文字保持浅色 */
html[data-theme='dark'] .home-search-field {
  background: rgba(38, 45, 70, 0.66);
}

html[data-theme='dark'] .home-search-field:focus-within {
  border-color: var(--brand);
}

html[data-theme='dark'] .home-card {
  background: rgba(50, 58, 88, 0.42);
}

html[data-theme='dark'] .home-card:hover {
  background: rgba(60, 70, 104, 0.58);
}

html[data-theme='dark'] .side-home {
  background: rgba(50, 58, 88, 0.4);
}

html[data-theme='dark'] .side-home.active {
  background: var(--brand-soft);
  border-color: rgba(107, 132, 255, 0.44);
}

@media (max-width: 640px) {
  .home-scroll {
    padding: 18px 14px 26px;
  }

  .home-hero-title {
    font-size: 23px;
  }

  .home-sec-body {
    grid-template-columns: 1fr;
  }
}

/* ============ 消息 / 频道公告里的站外链接（点击先确认，同意后新标签打开） ============
   .msg-link 是 <span role="link">（刻意不带 href）：右键「在新标签页打开」、中键点击
   都绕不过确认流程；只有点击 / 回车才走 openExternalLink()。
   气泡底色（他人透灰 / 官方透黑 / 频道主透紫 / 频道管理透橙 / 自己品牌浅底）都是
   低饱和半透明底色，因此标题色品牌色在明暗两套主题下都可读。 */
.msg-link {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all; /* 长链接强制换行，不撑破气泡 */
  border-radius: 3px;
}
.msg-link:hover {
  color: var(--brand-dark);
  text-decoration-thickness: 2px;
}
.msg-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
/* 自己的消息气泡本身就是品牌浅底（--brand-soft），链接改用更深的品牌色保证对比度 */
.msg.self .msg-link { color: var(--brand-dark); }
.msg.self .msg-link:hover { color: var(--brand-dark); }
html[data-theme='dark'] .msg-link { color: #8fb0ff; }
html[data-theme='dark'] .msg-link:hover { color: #aec6ff; }

/* ============ 站点品牌（后台「网站设置」：LOGO 替换「聊」字标） ============
   登录页 .auth-logo .dot 与聊天页 .topbar .brand .dot 都带 data-site-logo，
   site.js 上传后再补 has-logo 类，这里把渐变底去掉、图片填满圆角方块。 */
.dot.has-logo {
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
.dot.has-logo .site-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ============ 后台「网站设置」：LOGO / 图标预览 ============ */
.site-asset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.site-asset-preview {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
}
.site-asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.site-asset-preview.has-img { border-style: solid; border-color: var(--brand); }
.site-asset-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   监控台：通用分页器
   ============================================================ */
.admin-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 12.5px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.admin-pager .pager-info {
  flex: 0 0 auto;
  margin-right: 4px;
}
.admin-pager .pager-info b { color: var(--text); font-weight: 600; }
.admin-pager .pager-pages {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.admin-pager .pager-pages button {
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.admin-pager .pager-pages button:hover:not(:disabled):not(.active) {
  border-color: var(--brand);
  color: var(--brand);
}
.admin-pager .pager-pages button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  cursor: default;
}
.admin-pager .pager-pages button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-pager .pager-pages .pager-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  color: var(--text-3);
  font-size: 12px;
  user-select: none;
}
.admin-pager .pager-size {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-pager .pager-size select {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s;
}
.admin-pager .pager-size select:hover { border-color: var(--brand); }
.admin-pager .pager-size select:focus { border-color: var(--brand); }