* {
  box-sizing: border-box;
}

/* 图二参考：浅蓝灰底 + iOS 蓝主色 */
:root {
  --im-blue: #007aff;
  --im-blue-press: #0063db;
  --im-blue-soft: rgba(0, 122, 255, 0.12);
  --im-rail-bg: linear-gradient(180deg, #e8eef7 0%, #dfe9f5 100%);
  --im-rail-edge: #cfd9e8;
  --im-icon: #7e8b9e;
  --im-icon-active: #007aff;
  --im-shell: #eef1f6;
  --im-card: #ffffff;
  --im-line: #e6eaf0;
}

body {
  margin: 0;
  font-family:
    'Segoe UI',
    'PingFang SC',
    'Microsoft YaHei',
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 14px;
  color: #191919;
  background: var(--im-shell);
}
.hidden {
  display: none !important;
}

/* Auth — 左背景图 + 右表单（login_reg.jpg / png 置于 renderer/../assets/） */
#screen-auth {
  min-height: 100vh;
  background: #0d2847;
}
.auth-split {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: stretch;
}
.auth-visual {
  position: relative;
  flex: 1 1 46%;
  min-height: 320px;
  background-color: #1677ff;
  background-image: url('../assets/login_reg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.auth-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 40, 71, 0.45) 0%, rgba(22, 119, 255, 0.25) 50%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}
.auth-visual-brand {
  position: absolute;
  left: 36px;
  bottom: 48px;
  right: 36px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.auth-visual-logo {
  display: block;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.auth-visual-tagline {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.92;
}
.auth-main {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  background: linear-gradient(180deg, #f4f6fa 0%, #eef1f6 100%);
  overflow-y: auto;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow:
    0 4px 24px rgba(15, 35, 52, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.auth-face {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.auth-face-inner {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(145deg, #5cadff 0%, var(--im-blue, #007aff) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 28px rgba(0, 122, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.auth-face-svg {
  opacity: 0.95;
}
.auth-form-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #191919;
  text-align: center;
}
.auth-form-panel .auth-form-title {
  margin-top: 0;
}
.auth-srv-details {
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid #e8ecf2;
  font-size: 13px;
}
.auth-srv-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #434343;
  user-select: none;
}
.auth-srv-details summary::-webkit-details-marker {
  margin-right: 8px;
}
.auth-srv-details[open] summary {
  margin-bottom: 10px;
}
.auth-sub--tight {
  margin: 0 0 10px;
  font-size: 12px;
}
.auth-device-hint--compact {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.45;
}
.auth-sub {
  margin: 0 0 16px;
  font-size: 12px;
  color: #595959;
}
.auth-card label {
  display: block;
  font-size: 12px;
  color: #595959;
  margin-top: 8px;
}
.auth-srv-details > label:first-of-type {
  margin-top: 0;
}
.auth-form-panel > input:first-of-type {
  margin-top: 0;
}
.auth-card input {
  width: 100%;
  padding: 10px 12px;
  margin-top: 4px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}
.auth-card button {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #1677ff;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.auth-card button:hover {
  filter: brightness(1.03);
}
@media (max-width: 880px) {
  .auth-split {
    flex-direction: column;
  }
  .auth-visual {
    flex: 0 0 auto;
    min-height: 200px;
    max-height: 36vh;
  }
  .auth-visual-brand {
    left: 20px;
    bottom: 24px;
    right: 20px;
  }
  .auth-main {
    flex: 1;
    padding: 24px 16px 40px;
  }
}
.auth-links {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
}
.auth-links a {
  color: #1677ff;
  text-decoration: none;
}
.forgot-note {
  font-size: 13px;
  color: #434343;
  line-height: 1.6;
}
.forgot-note code {
  font-size: 12px;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}
.auth-device-hint {
  font-size: 12px;
  color: #595959;
  line-height: 1.5;
  margin: 0 0 12px;
}
.auth-device-hint code {
  font-size: 11px;
  background: #f5f5f5;
  padding: 1px 4px;
  border-radius: 3px;
}
.reg-advanced {
  margin: 10px 0;
  font-size: 12px;
  color: #434343;
}
.reg-advanced summary {
  cursor: pointer;
  color: #1677ff;
  margin-bottom: 8px;
}
.reg-advanced input {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}

.hint {
  margin-top: 12px;
  font-size: 13px;
  color: #cf1322;
  min-height: 1.2em;
}

/* Main shell — 微信 PC 风格 */
#screen-main.wc-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  background: var(--im-shell);
}

.wc-titlebar {
  flex-shrink: 0;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  background: linear-gradient(180deg, #eceff4 0%, #e4e9f1 100%);
  border-bottom: 1px solid var(--im-line);
  -webkit-app-region: drag;
  user-select: none;
}
.wc-titlebar-title {
  font-size: 13px;
  font-weight: 600;
  color: #4a5568;
}
.wc-titlebar-spacer {
  flex: 1;
}
.wc-win-btns {
  display: flex;
  align-items: center;
  gap: 0;
  -webkit-app-region: no-drag;
}
.wc-win-btn {
  width: 40px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #5c6573;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.wc-win-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.wc-win-close:hover {
  background: #e81123;
  color: #fff;
}

.wc-shell-main {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
}

.wc-rail {
  flex-shrink: 0;
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 14px;
  background: var(--im-rail-bg);
  border-right: 1px solid var(--im-rail-edge);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.75);
}
.wc-rail-user-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.wc-rail-ws.wc-rail-ws--peer {
  margin-top: 0;
  font-size: 12px;
}
.wc-rail-settings {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  padding: 0;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--im-icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.wc-rail-settings:hover {
  background: rgba(255, 255, 255, 0.72);
  color: #5a6678;
}
.wc-self-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  margin-bottom: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  background: linear-gradient(145deg, #3d9eff, var(--im-blue));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 3px 12px rgba(0, 122, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.wc-self-avatar:hover {
  box-shadow:
    0 4px 16px rgba(0, 122, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: scale(1.04);
}
.wc-self-avatar:active {
  transform: scale(0.98);
}
.wc-self-avatar .wc-self-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.wc-rail-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.wc-rail-spacer {
  flex: 1;
  min-height: 8px;
}
.wc-rail-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--im-icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}
.wc-rail-btn:hover {
  background: rgba(255, 255, 255, 0.72);
  color: #5a6678;
}
.wc-rail-btn.active {
  color: var(--im-blue);
  background: var(--im-blue-soft);
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.22);
}
.wc-rail-btn:active {
  transform: scale(0.96);
}
.wc-rail-tab-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}
.wc-ico {
  width: 24px;
  height: 24px;
}
.wc-rail-ws {
  font-size: 13px;
  line-height: 1;
  cursor: default;
  color: #c5cedd;
}
.wc-rail-ws.wc-ws-ok {
  color: #34c759;
}
.wc-rail-ws.wc-ws-bad {
  color: #ff3b30;
}
.wc-rail-ws.wc-ws-wait {
  color: #ff9500;
}

.wc-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.wc-secondary-head {
  flex-shrink: 0;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 600;
  background: #f5f5f5;
  border-bottom: 1px solid #e3e3e3;
  color: #191919;
}
.wc-secondary-head.hidden {
  display: none;
}

#main-body.wc-main-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.tab-page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tab-page.hidden {
  display: none;
}

.badge-num {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 8px;
  background: #fa5151;
  color: #fff;
  font-size: 11px;
}

/* 消息：会话列表 + 聊天 */
.msg-split.wc-msg-split {
  display: grid;
  grid-template-columns: minmax(268px, 300px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.wc-conv-col {
  background: var(--im-card);
  border-right: 1px solid var(--im-line);
}
.wc-chat-col {
  background: #f2f4f8;
}
.conv-col,
.chat-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wc-conv-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 14px 10px;
  box-sizing: border-box;
}
.wc-conv-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wc-title-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #cfcfcf;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.wc-title-dot--ok {
  background: var(--im-blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}
.wc-title-dot--bad {
  background: #fa5151;
}
.wc-title-dot--wait {
  background: #faad14;
}
.wc-icon-tool {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #576b95;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wc-icon-tool:hover {
  background: rgba(0, 0, 0, 0.06);
}
.wc-app-name {
  font-size: 17px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.02em;
}
.wc-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 12px;
}
.wc-search-plus {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: #e8ecf3;
  color: var(--im-blue);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}
.wc-search-plus:hover {
  background: var(--im-blue-soft);
}
.wc-search-plus:active {
  transform: scale(0.96);
}
.wc-search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  height: 34px;
  border-radius: 10px;
  background: #eef1f7;
  border: 1px solid #e4e9f2;
}
.wc-search-glyph {
  flex-shrink: 0;
  font-size: 14px;
  color: #9a9a9a;
  opacity: 0.85;
}
.wc-search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  color: #333;
  outline: none;
}
.wc-search-input::placeholder {
  color: #9d9d9d;
}

.wc-conv-list.list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f2f2f2;
  scrollbar-width: thin;
}
.wc-conv-item {
  display: flex;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  align-items: center;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.15s ease;
}
.wc-conv-item:hover {
  background: rgba(0, 0, 0, 0.035);
}
.wc-conv-item.wc-conv-active {
  background: #e8f1ff;
  box-shadow: inset 3px 0 0 var(--im-blue);
}
.wc-conv-pinned {
  position: relative;
}
.wc-conv-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.wc-conv-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.wc-conv-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wc-conv-avatar-letter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.wc-group-list-av .wc-req-av-img,
.wc-group-list-av .wc-req-av-letter {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.wc-conv-unread {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fa5151;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(250, 81, 81, 0.45);
}
.wc-conv-body {
  flex: 1;
  min-width: 0;
}
.wc-conv-line1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.wc-conv-name {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.wc-conv-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wc-conv-pin {
  flex-shrink: 0;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--im-blue-soft);
  color: var(--im-blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}
.wc-conv-time {
  flex-shrink: 0;
  font-size: 12px;
  color: #b0b0b0;
  font-variant-numeric: tabular-nums;
}
.wc-conv-preview {
  font-size: 13px;
  color: #888;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wc-chat-head.chat-head {
  flex-shrink: 0;
  height: 56px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--im-card);
  border-bottom: 1px solid var(--im-line);
}
.wc-chat-head-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.wc-chat-head-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.wc-chat-head-avatar--placeholder {
  background: linear-gradient(145deg, #c8c8c8, #a8a8a8) !important;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
}
.wc-chat-title {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wc-chat-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wc-head-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #576b95;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.wc-head-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}
.wc-head-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.wc-head-btn-text {
  font-size: 13px;
}

.wc-msg-area-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.wc-msg-area.messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 16px;
  background: #f2f4f8;
}
.wc-history-pull-overlay {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  font-weight: 500;
  color: #576b95;
  pointer-events: none;
}
.wc-history-pull-overlay.hidden {
  display: none;
}
.wc-history-pull-spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #e8ecf2;
  border-top-color: var(--im-blue);
  border-radius: 50%;
  animation: wc-history-spin 0.65s linear infinite;
}
@keyframes wc-history-spin {
  to {
    transform: rotate(360deg);
  }
}
.wc-chat-newmsg-chip {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 6;
  margin: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  max-width: min(240px, 42vw);
}
.wc-chat-newmsg-chip:hover {
  filter: brightness(0.98);
}
.wc-chat-newmsg-chip.hidden {
  display: none;
}
.wc-chat-newmsg-chip-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wc-chat-newmsg-arrow {
  color: var(--im-blue);
  font-weight: 700;
  line-height: 1;
}
.wc-composer-ico.wc-composer-ico--busy {
  opacity: 0.55;
  pointer-events: none;
}
.wc-msg-row {
  display: flex;
  margin-bottom: 12px;
}
.wc-msg-mine {
  justify-content: flex-end;
}
.wc-msg-other {
  justify-content: flex-start;
}
.wc-bubble {
  max-width: 72%;
  padding: 9px 12px;
  border-radius: 8px;
  word-break: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
/* 红包 / 转账卡片略宽于普通文字气泡 */
.wc-bubble:has(.wc-red-packet-card),
.wc-bubble:has(.wc-transfer-bubble--wc) {
  max-width: min(92%, 340px);
  padding: 8px 10px;
}
.wc-msg-other .wc-bubble {
  background: #fff;
  border: 1px solid #e8e8e8;
}
.wc-msg-mine .wc-bubble {
  background: linear-gradient(180deg, #4da3ff 0%, var(--im-blue) 100%);
  border: 1px solid #006be6;
  color: #fff;
}
.wc-msg-mine .wc-msg-text {
  color: #fff;
}
.wc-msg-img-wrap {
  margin-top: 4px;
  max-width: min(280px, 72vw);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}
.wc-msg-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.wc-msg-mine .wc-msg-img-wrap {
  margin-left: auto;
}
.wc-msg-gif-wrap img {
  image-rendering: auto;
}
.wc-msg-video-wrap {
  margin-top: 4px;
  max-width: min(320px, 80vw);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.wc-msg-video {
  display: block;
  width: 100%;
  max-height: 240px;
}
.wc-msg-mine .wc-msg-video-wrap {
  margin-left: auto;
}
.wc-voice-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  background: rgba(0, 0, 0, 0.06);
}
.wc-voice-speaker {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.88;
  color: inherit;
}
.wc-voice-speaker svg {
  display: block;
}
.wc-msg-mine .wc-voice-bubble {
  flex-direction: row-reverse;
  background: rgba(255, 255, 255, 0.25);
}
.wc-msg-mine .wc-voice-speaker {
  opacity: 0.95;
}
.wc-voice-bubble audio {
  display: none;
}
.wc-voice-waves {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.wc-voice-waves i {
  display: block;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: center bottom;
}
.wc-voice-playing .wc-voice-waves i {
  animation: wc-voice-bar 0.55s ease-in-out infinite alternate;
  opacity: 0.95;
}
.wc-voice-playing .wc-voice-waves i:nth-child(2) {
  animation-delay: 0.12s;
}
.wc-voice-playing .wc-voice-waves i:nth-child(3) {
  animation-delay: 0.24s;
}
.wc-voice-playing .wc-voice-waves i:nth-child(4) {
  animation-delay: 0.36s;
}
@keyframes wc-voice-bar {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: scaleY(1.65);
  }
}
.wc-voice-label {
  font-size: 13px;
  font-weight: 500;
}
.wc-msg-mine .wc-voice-label {
  color: #fff;
}
.wc-msg-other .wc-voice-bubble {
  color: #333;
}

.wc-pending-media {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(0, 107, 230, 0.35);
  background: rgba(77, 163, 255, 0.08);
}
.wc-pending-media.hidden {
  display: none !important;
}
.wc-pending-media-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f0f0;
  flex-shrink: 0;
}
.wc-pending-media-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.wc-pending-media-hint {
  font-size: 12px;
  color: #595959;
  line-height: 1.45;
}
.wc-pending-media-cancel {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
}
.wc-pending-media-cancel:hover {
  border-color: var(--im-blue);
  color: var(--im-blue);
}
.wc-pending-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.wc-pending-media-crop {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--im-blue);
  background: rgba(0, 107, 230, 0.06);
  color: var(--im-blue);
  cursor: pointer;
}
.wc-pending-media-crop:hover {
  background: rgba(0, 107, 230, 0.12);
}

.wc-card-pick-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-size: 14px;
}
.wc-card-pick-wrap {
  max-height: min(380px, 52vh);
  overflow-y: auto;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}
.wc-card-pick-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.wc-card-pick-row:last-child {
  border-bottom: none;
}
.wc-card-pick-row:hover {
  background: var(--im-blue-soft);
}
.wc-card-pick-name {
  font-size: 14px;
  color: #141414;
}
.wc-card-pick-sub {
  font-size: 12px;
  color: #8c8c8c;
}

.wc-contact-card-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  max-width: 260px;
  font: inherit;
}
.wc-msg-mine .wc-contact-card-bubble {
  background: #e8f4ff;
  border-color: #b7d9ff;
}
.wc-contact-card-av {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.wc-contact-card-av-ph {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.wc-contact-card-meta {
  min-width: 0;
}
.wc-contact-card-name {
  font-weight: 600;
  font-size: 15px;
  color: #141414;
}
.wc-contact-card-id {
  font-size: 12px;
  color: #8c8c8c;
  word-break: break-all;
}
.wc-contact-card-hint {
  font-size: 11px;
  color: #bfbfbf;
  margin-top: 2px;
}

.wc-user-peek {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 12px;
  text-align: center;
}
.wc-user-peek-av {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 12px;
}
.wc-user-peek-av-ph {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
}
.wc-user-peek-name {
  font-size: 18px;
  font-weight: 600;
  color: #141414;
}
.wc-user-peek-sub {
  margin-top: 6px;
  font-size: 13px;
  color: #8c8c8c;
  word-break: break-all;
}
.wc-user-peek-action {
  margin-top: 18px;
  min-width: 200px;
}

.wc-gfiles-hint {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.45;
  margin: 0 0 12px;
}
.wc-gfiles-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.wc-gfiles-tab {
  border: none;
  background: none;
  padding: 6px 2px;
  font-size: 14px;
  color: #595959;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -9px;
}
.wc-gfiles-tab:hover {
  color: var(--im-blue);
}
.wc-gfiles-tab--active {
  color: var(--im-blue);
  font-weight: 600;
  border-bottom-color: var(--im-blue);
}
.wc-gfiles-pane {
  min-height: 200px;
  max-height: min(480px, 52vh);
  overflow: auto;
}
.wc-gfiles-empty {
  text-align: center;
  color: #bfbfbf;
  padding: 36px 12px;
  font-size: 14px;
}
.wc-gfiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wc-gfiles-grid-cell {
  border: none;
  background: #fafafa;
  border-radius: 8px;
  padding: 0 0 6px;
  cursor: pointer;
  text-align: center;
  font: inherit;
  overflow: hidden;
}
.wc-gfiles-grid-cell:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.wc-gfiles-grid-thumb-wrap {
  display: block;
  position: relative;
  aspect-ratio: 1;
  background: #eee;
}
.wc-gfiles-grid-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wc-gfiles-grid-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #e8e8e8, #d0d0d0);
}
.wc-gfiles-grid-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.wc-gfiles-grid-meta {
  display: block;
  font-size: 11px;
  color: #8c8c8c;
  padding: 4px 4px 0;
}
.wc-gfiles-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wc-gfiles-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 6px;
  border: none;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  box-sizing: border-box;
}
.wc-gfiles-list-row:hover {
  background: var(--im-blue-soft);
}
.wc-gfiles-list-ico {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.wc-gfiles-list-main {
  flex: 1;
  min-width: 0;
}
.wc-gfiles-list-name {
  display: block;
  font-size: 14px;
  color: #141414;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-gfiles-list-sub {
  display: block;
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-gfiles-list-go {
  color: #bfbfbf;
  flex-shrink: 0;
}

.wc-inline-media-ov {
  position: fixed;
  inset: 0;
  z-index: 1100;
}
.wc-inline-media-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.wc-inline-media-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(920px, 96vw);
  max-height: 92vh;
}
.wc-inline-media-x {
  position: absolute;
  right: 0;
  top: -42px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.wc-inline-media-video {
  display: block;
  max-width: min(920px, 96vw);
  max-height: 88vh;
  border-radius: 8px;
  background: #000;
}
.wc-inline-media-audio {
  display: block;
  width: min(400px, 90vw);
}

.wc-crop-help {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 10px;
  line-height: 1.45;
}
.wc-crop-stage {
  display: flex;
  justify-content: center;
  overflow: auto;
  max-height: min(520px, 62vh);
}
.wc-crop-canvas {
  max-width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  vertical-align: middle;
}

.wc-msg-system {
  justify-content: center;
}
.wc-msg-system-inner {
  max-width: 92%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12px;
  color: #8c8c8c;
  text-align: center;
  line-height: 1.45;
}
.wc-msg-tip-text {
  font-size: 12px;
  color: #666;
}
.wc-msg-recalled .wc-bubble {
  opacity: 0.65;
}
.wc-msg-flash .wc-bubble {
  animation: wc-msg-flash-anim 1.2s ease-out;
}
@keyframes wc-msg-flash-anim {
  0%,
  40% {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.55);
    background: rgba(0, 122, 255, 0.15);
  }
  100% {
    box-shadow: none;
  }
}
.wc-msg-mine.wc-msg-flash .wc-bubble {
  animation: wc-msg-flash-anim-mine 1.2s ease-out;
}
@keyframes wc-msg-flash-anim-mine {
  0%,
  40% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
    filter: brightness(1.15);
  }
  100% {
    box-shadow: none;
    filter: none;
  }
}

/* 聊天记录搜索浮层 */
.wc-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.wc-history-overlay.hidden {
  display: none !important;
}
.wc-history-backdrop {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
}
.wc-history-panel {
  width: min(420px, 100vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}
.wc-history-head {
  flex-shrink: 0;
  height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;
  font-weight: 600;
}
.wc-history-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #888;
}
.wc-history-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.wc-history-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
}
.wc-history-clear-input {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  color: #666;
}
.wc-history-tabs {
  display: flex;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid #ebebeb;
}
.wc-history-tab {
  flex: 1;
  padding: 10px 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.wc-history-tab.active {
  color: var(--im-blue);
  font-weight: 600;
  border-bottom-color: var(--im-blue);
}
.wc-history-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
}
.wc-history-date {
  padding: 10px 14px 6px;
  font-size: 12px;
  color: #9aa3b2;
}
.wc-history-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f5f5f5;
}
.wc-history-item-main {
  flex: 1;
  min-width: 0;
}
.wc-history-nick {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.wc-history-snippet {
  font-size: 13px;
  color: #595959;
  word-break: break-word;
}
.wc-history-snippet mark.wc-hl {
  background: rgba(0, 122, 255, 0.22);
  color: #0063db;
  padding: 0 2px;
}
.wc-history-locate {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--im-blue);
  background: #fff;
  color: var(--im-blue);
  font-size: 12px;
  cursor: pointer;
}
.wc-history-locate:hover {
  background: var(--im-blue-soft);
}
.wc-history-empty {
  padding: 24px 16px;
  text-align: center;
  color: #bfbfbf;
  font-size: 13px;
}
.wc-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8c8c8c;
  margin-bottom: 4px;
}
.wc-msg-other .wc-msg-meta {
  justify-content: flex-start;
}
.wc-msg-mine .wc-msg-meta {
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0.82);
}
.wc-msg-readstate {
  font-size: 12px;
  opacity: 0.75;
  letter-spacing: -0.12em;
  user-select: none;
}
.wc-msg-readstate--read {
  opacity: 0.95;
}
.wc-msg-reply-ref {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.07);
  cursor: pointer;
  text-align: left;
  font: inherit;
  box-sizing: border-box;
}
.wc-msg-mine .wc-msg-reply-ref {
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.96);
}
.wc-msg-reply-ref-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wc-msg-reply-ref-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-msg-reply-ref-chevron {
  flex-shrink: 0;
  opacity: 0.55;
  font-size: 16px;
  line-height: 1;
}
.wc-msg-recall-tip.wc-msg-system {
  margin-top: 4px;
  margin-bottom: 4px;
}
.wc-msg-text {
  font-size: 14px;
  line-height: 1.45;
  color: #191919;
}

.wc-chat-conn-bar {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: #8a6d3b;
  background: #fff8e6;
  border-top: 1px solid #ffe4a3;
}

.wc-composer.composer {
  position: relative;
  flex-shrink: 0;
  background: #f7f8fa;
  border-top: 1px solid var(--im-line);
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 勿用 display:none：Electron/Chrome 下对 file input 调用 .click() 不会弹出选择框 */
input[type='file'].wc-file-input-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wc-emoji-popover {
  position: absolute;
  left: 8px;
  bottom: 100%;
  margin-bottom: 6px;
  width: min(360px, calc(100vw - 120px));
  max-height: 280px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--im-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  z-index: 80;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wc-emoji-popover.hidden {
  display: none !important;
}

.wc-composer-quick .wc-composer-quick-glyph {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.wc-quick-popover {
  position: absolute;
  left: 8px;
  right: 48px;
  bottom: 100%;
  margin-bottom: 6px;
  max-height: 240px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--im-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  z-index: 85;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wc-quick-popover.hidden {
  display: none !important;
}
.wc-quick-popover-head {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #595959;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.wc-quick-popover-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  max-height: 200px;
}
.wc-quick-item {
  padding: 10px 14px;
  font-size: 13px;
  color: #262626;
  cursor: pointer;
  line-height: 1.35;
}
.wc-quick-item:hover {
  background: var(--im-blue-soft);
}
.wc-quick-empty {
  padding: 14px;
  font-size: 13px;
  color: #8c8c8c;
}
.wc-emoji-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #eee;
}
.wc-emoji-tabs button {
  flex: 1;
  padding: 10px;
  border: none;
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  color: #595959;
}
.wc-emoji-tabs button.active {
  background: #fff;
  color: var(--im-blue);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--im-blue);
}
.wc-emoji-pane {
  padding: 10px;
  overflow-y: auto;
  max-height: 220px;
}
.wc-emoji-pane.hidden {
  display: none !important;
}
.wc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.wc-emoji-cell {
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1.2;
  padding: 6px 4px;
  cursor: pointer;
}
.wc-emoji-cell:hover {
  background: var(--im-blue-soft);
}
.wc-gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wc-gif-thumb {
  border: none;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #f0f0f0;
  aspect-ratio: 1;
}
.wc-gif-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wc-gif-url-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.wc-gif-url-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  font-size: 13px;
}
.wc-gif-url-row button {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: var(--im-blue);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}

.tab-favorites,
.tab-quickphrases {
  padding: 16px;
  background: var(--im-shell);
  min-height: 0;
  overflow: auto;
}
.fav-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.4;
}
.fav-meta-who {
  font-weight: 600;
  color: #595959;
}
.fav-meta-chat {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-meta-time {
  margin-left: auto;
  flex-shrink: 0;
}
.fav-toolbar {
  background: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--im-line);
}
.fav-toolbar button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--im-blue);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.fav-subsection-title {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #262626;
}
.fav-hint--compact {
  margin-top: 0;
  margin-bottom: 10px;
}
.fav-toolbar--tight {
  margin-bottom: 8px;
}
.wc-quick-manage-title {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 4px;
}
.wc-quick-manage-text {
  font-size: 14px;
  color: #262626;
  white-space: pre-wrap;
  word-break: break-word;
}

.fav-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.5;
}
.fav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fav-empty {
  padding: 32px 16px;
  text-align: center;
  color: #bfbfbf;
  font-size: 13px;
  line-height: 1.6;
}
.fav-row {
  background: #fff;
  border: 1px solid var(--im-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fav-row-body {
  font-size: 14px;
  word-break: break-all;
  color: #333;
  max-height: 120px;
  overflow: auto;
}
.fav-row-body img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 8px;
  display: block;
}
.fav-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fav-row-actions button {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  background: #fafafa;
  cursor: pointer;
  font-size: 12px;
}
.fav-row-actions button.fav-act-primary {
  background: var(--im-blue-soft);
  border-color: rgba(0, 122, 255, 0.35);
  color: var(--im-blue);
}
.fav-row-actions button.fav-act-danger {
  border-color: #ffccc7;
  color: #cf1322;
  background: #fff;
}
.wc-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}
.wc-composer-toolbar-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.wc-composer-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #8a93a3;
  cursor: pointer;
}
.wc-composer-ico:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
  color: #5c6573;
}
.wc-composer-ico:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.wc-composer-scissors .wc-composer-scissors-icon {
  font-size: 15px;
  line-height: 1;
}
.wc-composer-history-ico {
  flex-shrink: 0;
}
.wc-composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 100px;
  max-height: 220px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #e4e7ec;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.wc-composer textarea::placeholder {
  color: #c4c9d1;
}
.wc-composer textarea:focus {
  border-color: rgba(0, 122, 255, 0.45);
}
.wc-composer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.wc-composer-hint {
  font-size: 11px;
  color: #c4c9d1;
  white-space: nowrap;
  margin-right: auto;
}
.wc-composer-hint.wc-composer-hint--warn {
  color: #e65100;
  white-space: normal;
  line-height: 1.35;
  max-width: 72%;
}
.wc-send-btn {
  flex-shrink: 0;
  padding: 8px 22px;
  border: none;
  border-radius: 10px;
  background: var(--im-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35);
}
.wc-send-btn:hover:not(:disabled) {
  background: var(--im-blue-press);
}
.wc-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* 通讯录 · 微信式双栏 */
.wc-tab-contacts {
  flex-direction: column;
}
.wc-contacts-split {
  display: grid;
  grid-template-columns: minmax(268px, 300px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  background: var(--im-card);
}
.wc-contacts-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--im-line);
  background: #fafbfd;
}
.wc-contacts-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 14px 10px;
  padding: 0 12px;
  height: 36px;
  border-radius: 10px;
  background: #eef1f7;
  border: 1px solid #e4e9f2;
}
.wc-contacts-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  outline: none;
}
.wc-contacts-nav {
  flex-shrink: 0;
  padding: 4px 10px 8px;
}
.wc-cn-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  margin-bottom: 2px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 15px;
  color: #111;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.wc-cn-row:hover {
  background: rgba(0, 122, 255, 0.06);
}
.wc-cn-row.wc-cn-active {
  background: var(--im-blue-soft);
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.15);
}
.wc-cn-row--danger .wc-cn-label {
  color: #e54d42;
}
.wc-cn-label {
  flex: 1;
}
.wc-cn-muted {
  font-size: 13px;
  color: #9aa3b2;
}
.wc-cn-badge {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.wc-cn-chevron {
  color: #c5cbd6;
  font-size: 18px;
  font-weight: 300;
}
.wc-contacts-friends-head {
  flex-shrink: 0;
  padding: 10px 18px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #9aa3b2;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wc-contact-alpha-list {
  list-style: none;
  margin: 0;
  padding: 0 6px 12px;
  overflow-y: auto;
  flex: 1;
}
.wc-alpha-sticky {
  list-style: none;
  padding: 8px 14px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--im-blue);
  background: linear-gradient(180deg, #fafbfd 70%, transparent);
  position: sticky;
  top: 0;
  z-index: 1;
}
.wc-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 4px 2px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  transition: background 0.12s ease;
}
.wc-contact-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
.wc-contact-row.wc-contact-active {
  background: var(--im-blue-soft);
}
.wc-contact-row-av {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.wc-contact-row-name {
  font-size: 15px;
  font-weight: 500;
  color: #111;
}
.wc-contacts-detail {
  min-width: 0;
  min-height: 0;
  background: var(--im-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wc-cd-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #b4bcc8;
  padding: 24px;
}
.wc-cd-ph-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #c5ced9;
}
.wc-cd-ph-sub {
  margin: 8px 0 0;
  font-size: 14px;
}
.wc-cd-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
}
.wc-cd-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.wc-cd-tool-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--im-line);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #444;
}
.wc-cd-tool-btn:hover {
  background: #f5f8fc;
}
.wc-cd-tool-btn--primary {
  background: var(--im-blue);
  color: #fff;
  border-color: transparent;
}
.wc-cd-tool-btn--primary:hover {
  background: var(--im-blue-press);
}
.wc-cd-subtitle {
  margin: 16px 0 8px;
  font-size: 13px;
  color: #9aa3b2;
  font-weight: 600;
}
.wc-cd-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: #9aa3b2;
}
.wc-cd-add-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.wc-cd-add-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--im-line);
  font-size: 14px;
}
.wc-cd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wc-cd-list > li {
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f6;
  font-size: 14px;
}

.wc-cd-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wc-cd-search-result .wc-cd-search-av .wc-conv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 15px;
}
.wc-cd-search-meta {
  flex: 1;
  min-width: 0;
}
.wc-cd-search-name {
  font-weight: 600;
  font-size: 14px;
  color: #191919;
}
.wc-cd-search-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #8a9299;
}
.wc-cd-search-add-btn {
  flex-shrink: 0;
}

.wc-friend-apply-hint {
  margin: 0 0 8px;
  font-size: 14px;
  color: #5c6370;
}
.wc-friend-apply-ta {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--im-line);
  font-size: 14px;
  resize: vertical;
  min-height: 72px;
}
.wc-cd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #f0f2f6;
}
.wc-cd-row-name {
  flex: 1;
  font-weight: 500;
}
.wc-cd-row-action {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--im-line);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: var(--im-blue);
}

.wc-req-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid #f0f2f6;
}
.wc-req-av {
  flex-shrink: 0;
}
.wc-req-av-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  background: #eee;
}
.wc-req-av-letter {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.wc-req-body {
  flex: 1;
  min-width: 0;
}
.wc-req-name {
  font-weight: 600;
  font-size: 15px;
  color: #111;
}
.wc-req-sub {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 2px;
}
.wc-req-verify {
  font-size: 12px;
  color: #595959;
  margin-top: 6px;
  line-height: 1.4;
}
.wc-req-side {
  flex-shrink: 0;
  align-self: center;
}
.wc-req-actions {
  display: flex;
  gap: 8px;
}
.wc-req-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--im-line);
  font-size: 13px;
  cursor: pointer;
  background: #fff;
}
.wc-req-btn--no {
  color: #595959;
}
.wc-req-btn--ok {
  background: var(--im-blue);
  color: #fff;
  border-color: var(--im-blue);
}
.wc-req-done {
  font-size: 13px;
  color: #8c8c8c;
  white-space: nowrap;
}

.wc-group-modal-footer {
  padding: 12px 0 0;
  margin-top: 16px;
  border-top: 1px solid #ebebeb;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.wc-group-modal-footer button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.wc-group-modal-footer button.primary {
  background: var(--im-blue);
  color: #fff;
  border-color: var(--im-blue);
}
.wc-group-modal-footer button.wc-group-footer-muted {
  border-style: dashed;
  color: #8c8c8c;
  font-size: 12px;
}

.wc-friend-detail {
  max-width: 360px;
  margin: 40px auto;
  text-align: center;
  padding: 0 16px;
}
.wc-friend-detail-av {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.wc-friend-detail-name {
  font-size: 22px;
  font-weight: 600;
  color: #111;
}
.wc-friend-detail-sub {
  margin-top: 8px;
  font-size: 13px;
  color: #9aa3b2;
}
.wc-friend-detail-msg {
  margin-top: 28px;
  width: 100%;
  max-width: 240px;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  background: var(--im-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
}
.wc-friend-detail-msg:hover {
  background: var(--im-blue-press);
}

/* 单聊 · 右侧抽屉 */
.wc-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 960;
  visibility: hidden;
  pointer-events: none;
}
.wc-drawer-overlay:not(.hidden) {
  visibility: visible;
  pointer-events: auto;
}
.wc-drawer-overlay.wc-drawer--open .wc-drawer-backdrop {
  opacity: 1;
}
.wc-drawer-overlay.wc-drawer--open .wc-drawer-panel {
  transform: translateX(0);
}
.wc-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.wc-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 100%);
  max-width: 100vw;
  background: #f7f7f7;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  border-left: 1px solid #e8e8e8;
}
.wc-drawer-head {
  flex-shrink: 0;
  height: 52px;
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f5f5;
  border-bottom: 1px solid #e8e8e8;
  font-size: 16px;
  font-weight: 600;
  color: #111;
}
.wc-drawer-x {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #888;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.wc-drawer-x:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}
.wc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 24px;
}
.wc-drawer-peer {
  text-align: center;
  padding: 8px 0 20px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
}
.wc-drawer-peer-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.wc-drawer-peer-name {
  font-size: 17px;
  font-weight: 600;
  color: #111;
}
.wc-drawer-peer-sub {
  margin-top: 4px;
  font-size: 13px;
  color: #888;
}
.wc-drawer-peer-id {
  margin-top: 8px;
  font-size: 12px;
  color: #b0b0b0;
}
.wc-drawer-section {
  margin-bottom: 18px;
}
.wc-drawer-label {
  display: block;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}
.wc-drawer-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
  background: #fff;
  font-size: 14px;
  outline: none;
}
.wc-drawer-input:focus {
  border-color: var(--im-blue);
}
.wc-drawer-linkbtn {
  margin-top: 10px;
  padding: 8px 0;
  border: none;
  background: none;
  color: #576b95;
  font-size: 14px;
  cursor: pointer;
}
.wc-drawer-linkbtn:hover {
  color: var(--im-blue);
}
.wc-drawer-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}
.wc-drawer-rows {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ececec;
  overflow: hidden;
}
.wc-drawer-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  font-size: 15px;
  color: #222;
  border-bottom: 1px solid #f0f0f0;
}
.wc-drawer-switch-row:last-child {
  border-bottom: none;
}
.wc-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.wc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.wc-switch i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #ddd;
  cursor: pointer;
  transition: background 0.2s ease;
}
.wc-switch i::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}
.wc-switch input:checked + i {
  background: var(--im-blue);
}
.wc-switch input:checked + i::before {
  transform: translateX(20px);
}
.wc-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wc-drawer-btn {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.wc-drawer-btn--muted {
  color: #555;
}
.wc-drawer-btn--muted:hover {
  background: #fafafa;
}
.wc-drawer-btn--warn {
  color: #fa5151;
  border-color: #ffc9c9;
  background: #fff8f8;
}
.wc-drawer-btn--danger {
  color: #fa5151;
  border-color: #ffb3b3;
  background: #fff;
}
.wc-drawer-footnote {
  margin-top: 12px;
  font-size: 11px;
  color: #aaa;
  line-height: 1.45;
}

.toolbar button,
.subpanel > button,
.moments-toolbar button {
  margin-right: 8px;
  margin-bottom: 4px;
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tab-page .list {
  overflow-y: auto;
  flex: 1;
}
.tab-page:not(#tab-msg) .list li {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.tab-page:not(#tab-msg) .list li:hover {
  background: #fafafa;
}

/* Contacts */
.subtabs {
  display: flex;
  gap: 6px;
  padding: 8px;
  flex-shrink: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}
.subtab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 13px;
}
.subtab.active {
  background: var(--im-blue);
  color: #fff;
}
.subpanel {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
}
.section-title {
  font-size: 13px;
  color: #8c8c8c;
  margin: 12px 0 6px;
}
.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.search-row input {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
}

/* Moments */
.moments-toolbar {
  padding: 8px;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.moment-feed {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.moment-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.moment-head {
  font-weight: 600;
  margin-bottom: 6px;
}
.moment-body {
  color: #262626;
  white-space: pre-wrap;
  margin-bottom: 8px;
}
.moment-media img {
  max-width: 100%;
  border-radius: 8px;
  margin-right: 6px;
  margin-bottom: 6px;
  max-height: 200px;
  object-fit: cover;
}
.moment-meta {
  font-size: 12px;
  color: #8c8c8c;
}
.moment-actions button {
  margin-right: 8px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
}
.moments-more {
  padding: 8px;
  text-align: center;
}

/* Me */
.me-card {
  background: #fff;
  padding: 16px;
  border-radius: 10px;
}
#tab-me.tab-page {
  overflow-y: auto;
  align-items: stretch;
}
#tab-me > .me-card {
  margin-left: 8px;
  margin-right: 8px;
  flex-shrink: 0;
}
#tab-me > .me-card:first-child {
  margin-top: 8px;
}
#tab-me > .me-card + .me-card {
  margin-top: 24px;
}
/* 本设备 → 资料 间距固定 30px（避免 flex 子项把空白撑开造成过大空隙） */
#tab-me > .me-card:nth-child(2) {
  margin-top: 30px;
}
#tab-me > .me-card:last-child {
  margin-bottom: 16px;
}

.me-avatar-edit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f6;
}
.me-avatar-preview-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, #4ecdc4, #44a08d);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.me-avatar-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.me-avatar-preview-img.hidden {
  display: none;
}
.me-avatar-preview-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}
.me-avatar-preview-ph.hidden {
  display: none;
}
.me-avatar-edit-meta {
  flex: 1;
  min-width: 0;
}
#tab-me .me-card .me-avatar-pick-btn {
  margin-top: 0;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--im-line);
  background: #fff;
  color: var(--im-blue);
  font-size: 14px;
  cursor: pointer;
}
#tab-me .me-card .me-avatar-pick-btn:hover {
  background: #f5f9ff;
}
.me-avatar-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.45;
}
.me-card h2 {
  margin: 0 0 12px;
  font-size: 16px;
}
.me-card label {
  display: block;
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 8px;
}
.me-card input {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
}
.me-card button {
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--im-blue);
  color: #fff;
  cursor: pointer;
}
.me-summary {
  font-size: 13px;
  color: #595959;
  line-height: 1.5;
}
.btn-danger {
  display: block;
  width: calc(100% - 16px);
  margin: 16px 8px 32px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #ff4d4f;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

#tab-contacts,
#tab-me {
  background: #fff;
}
#tab-moments {
  background: #f7f7f7;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay.hidden {
  display: none;
}
.modal-box {
  background: #fff;
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-box:has(.wc-gfiles) {
  max-width: min(720px, 96vw);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
}
.modal-x {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #8c8c8c;
}
.modal-body {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
}
.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.modal-footer button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
}
.modal-footer button.primary {
  background: var(--im-blue);
  color: #fff;
  border-color: var(--im-blue);
}

.wc-debug-hint {
  font-size: 12px;
  color: #595959;
  margin: 0 0 10px;
  line-height: 1.55;
}
.wc-debug-hint code {
  font-size: 11px;
  background: #f0f0f0;
  padding: 1px 5px;
  border-radius: 4px;
}
.wc-debug-pre {
  margin: 0;
  padding: 10px 12px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: min(420px, 55vh);
  overflow: auto;
}

/* 红包 msg_type=8：卡片分区 + 底栏文案（对齐常见 IM 红包样式） */
.wc-red-packet-card {
  width: 100%;
  max-width: 308px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.wc-red-packet-card--wc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: #f4e3d4;
  color: #5c4033;
}
.wc-rp-wc-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(145deg, #fa9d3b 0%, #ff6b4a 55%, #f05545 100%);
  color: #fff;
}
.wc-red-packet-card--wc.wc-red-packet-card--done .wc-rp-wc-top,
.wc-red-packet-card--wc.wc-red-packet-card--expired .wc-rp-wc-top {
  background: linear-gradient(145deg, #e8e8e8 0%, #c8c8c8 100%);
  color: #434343;
}
.wc-rp-wc-env {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}
.wc-rp-wc-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.wc-rp-wc-greeting {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.wc-rp-wc-badge {
  font-size: 12px;
  opacity: 0.92;
}
.wc-rp-wc-amt {
  font-size: 13px;
  opacity: 0.88;
  font-weight: 500;
}
.wc-rp-wc-subbar {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  background: linear-gradient(180deg, #fde8dc 0%, #fcdfd0 100%);
  color: #c65d4a;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.wc-red-packet-card--wc.wc-red-packet-card--done .wc-rp-wc-subbar,
.wc-red-packet-card--wc.wc-red-packet-card--expired .wc-rp-wc-subbar {
  background: #ebebeb;
  color: #8c8c8c;
}
.wc-rp-wc-foot {
  padding: 6px 14px 8px;
  font-size: 11px;
  color: #bfbfbf;
  background: #fffaf6;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.wc-red-packet-card--wc.wc-red-packet-card--done .wc-rp-wc-foot,
.wc-red-packet-card--wc.wc-red-packet-card--expired .wc-rp-wc-foot {
  background: #f5f5f5;
}

.wc-transfer-bubble {
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.wc-transfer-bubble--wc {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 308px;
  min-width: 240px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #edd2b4;
  background: #fffdf9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.wc-transfer-bubble--wc:hover {
  filter: brightness(0.99);
}
.wc-tf-wc-inner {
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, #fffbf6 0%, #fdebd6 55%, #fadcb8 100%);
}
.wc-tf-wc-status-top {
  font-size: 13px;
  font-weight: 600;
  color: #c09040;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.wc-tf-wc-amt {
  font-size: 24px;
  font-weight: 700;
  color: #6b3f18;
  line-height: 1.2;
}
.wc-tf-wc-remark {
  font-size: 13px;
  color: #434343;
  margin-top: 10px;
  line-height: 1.35;
}
.wc-tf-wc-foot {
  padding: 6px 14px 8px;
  font-size: 11px;
  color: #bfbfbf;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fffdf9;
}
.wc-tf-detail-amt {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #262626;
}
.wc-tf-detail .wc-tf-meta {
  margin: 8px 0 0;
  font-size: 14px;
  color: #595959;
  line-height: 1.45;
}
.wc-tf-meta--muted {
  font-size: 12px !important;
  color: #8c8c8c !important;
}
.wc-composer-rp-glyph {
  font-size: 18px;
  line-height: 1;
}

.me-summary--muted {
  font-size: 13px;
  color: #8c8c8c;
}
.wc-rp-rec-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.wc-rp-rec-tab {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.wc-rp-rec-tab.active {
  border-color: var(--im-blue);
  color: var(--im-blue);
  font-weight: 600;
}
.wc-rp-rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.wc-rp-rec-amt--out {
  color: #cf1322;
}
.wc-rp-rec-amt--in {
  color: #389e0d;
}

/* 红包详情（居中卡片，便于点返回） */
.wc-rp-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}
.wc-rp-detail-sheet {
  width: 100%;
  max-width: 380px;
  max-height: min(640px, 88vh);
  background: #f5f6f7;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
}
.wc-rp-detail-top {
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(180deg, #e6453a 0%, #c93427 55%, #b82e22 100%);
  color: #fff;
  padding: 14px 16px 28px;
  text-align: center;
}
.wc-rp-detail-back {
  position: absolute;
  left: 6px;
  top: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.wc-rp-detail-back:hover {
  background: rgba(255, 255, 255, 0.18);
}
.wc-rp-detail-avatar {
  margin: 28px auto 12px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
}
.wc-rp-detail-av-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.wc-rp-detail-from {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.96;
}
.wc-rp-detail-greeting {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.88;
}
.wc-rp-detail-status {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wc-rp-detail-sumline {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.85;
}
.wc-rp-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: -14px;
  background: #fff;
  border-radius: 14px 14px 0 0;
  padding: 10px 0 72px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
}
.wc-rp-detail-recs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wc-rp-detail-rec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.wc-rp-detail-rec-av {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.wc-rp-detail-rec-mid {
  flex: 1;
  min-width: 0;
}
.wc-rp-detail-rec-name {
  font-size: 15px;
  font-weight: 500;
  color: #262626;
}
.wc-rp-detail-rec-time {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 2px;
}
.wc-rp-detail-rec-amt {
  font-size: 16px;
  font-weight: 700;
  color: #262626;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wc-rp-detail-best {
  font-size: 15px;
}
.wc-rp-detail-empty-banner {
  padding: 32px 16px;
  text-align: center;
  color: #bfbfbf;
  font-size: 14px;
}
.wc-rp-detail-foot {
  position: sticky;
  bottom: 0;
  padding: 12px 16px 20px;
  background: linear-gradient(180deg, transparent, #fff 40%);
}
.wc-rp-detail-grab {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.wc-rp-detail-grab.primary {
  background: var(--im-blue);
  color: #fff;
}

/* 钱包 · 双栏（对齐通讯录） */
.wc-tab-wallet {
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}
.tab-wallet {
  background: var(--im-shell);
  min-height: 0;
}
.wc-wallet-split {
  display: grid;
  grid-template-columns: minmax(268px, 300px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  background: var(--im-card);
}
.wc-wallet-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--im-line);
  background: #fafbfd;
  padding: 12px 12px 16px;
  gap: 12px;
  overflow-y: auto;
}
.wc-wallet-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wc-wallet-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #eef0f4;
  font-size: 15px;
  color: #111;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.wc-wallet-nav-btn:hover {
  background: rgba(0, 122, 255, 0.06);
}
.wc-wallet-nav-btn.active {
  background: var(--im-blue-soft);
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.2);
}
.wc-wn-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0e7ff;
  color: #722ed1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wc-wn-ico--round {
  font-size: 20px;
  font-weight: 300;
}
.wc-wn-txt {
  flex: 1;
}
.wc-wn-chev {
  color: #c5cbd6;
  font-size: 18px;
  font-weight: 300;
}
.wc-wallet-detail {
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  padding: 16px 18px 24px;
}
.wc-wallet-pane.hidden {
  display: none !important;
}
.wc-wallet-pane-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  color: #262626;
}
.wc-wallet-pane-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: #8c8c8c;
  text-align: center;
}
.wc-wallet-pane-ph-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #595959;
}
.wc-wallet-pane-ph-sub {
  margin: 0;
  font-size: 14px;
}
.wc-wallet-form {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-wallet-form label {
  font-size: 13px;
  color: #595959;
}
.wc-wallet-form input[type='text'],
.wc-wallet-form input[type='password'],
.wc-wallet-form select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  font-size: 14px;
}
.wc-wallet-form input[type='file'] {
  font-size: 13px;
}
.wc-wallet-form-submit {
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--im-blue);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.wc-wallet-tx-list--pane {
  max-height: calc(100vh - 260px);
}
.wc-rp-rec-list--pane {
  max-height: calc(100vh - 260px);
}
.wc-quick-add-panel {
  max-width: 520px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--im-line);
  background: #fafbfd;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-quick-add-label {
  font-size: 13px;
  color: #595959;
}
.wc-quick-add-input,
.wc-quick-add-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  font-size: 14px;
  font-family: inherit;
}
.wc-quick-add-submit {
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: var(--im-blue);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.wc-img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 11500;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.wc-img-lightbox.hidden {
  display: none !important;
}
.wc-img-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.wc-img-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.wc-img-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.wc-msg-img-wrap img {
  cursor: zoom-in;
}
.wc-wallet-balance-card {
  background: linear-gradient(135deg, #2f80ed 0%, #1c6fd6 100%);
  color: #fff;
  border-radius: 14px;
  padding: 18px 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(47, 128, 237, 0.35);
}
.wc-wallet-sidebar .wc-wallet-balance-card {
  margin-bottom: 0;
}
.wc-wallet-balance-label {
  font-size: 13px;
  opacity: 0.9;
}
.wc-wallet-balance-num {
  margin-top: 8px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wc-wallet-balance-sub {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.85;
}
.wc-wallet-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--im-line);
  overflow: hidden;
}
.wc-wallet-menu li + li {
  border-top: 1px solid #f0f0f0;
}
.wc-wallet-menu-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  color: #262626;
}
.wc-wallet-menu-btn:hover {
  background: #fafafa;
}
.wc-wm-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f0e7ff;
  color: #722ed1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wc-wm-ico--round {
  font-size: 20px;
  font-weight: 300;
}
.wc-wm-txt {
  flex: 1;
  text-align: left;
}
.wc-wm-chev {
  color: #bfbfbf;
  font-size: 18px;
}
.wc-wallet-sub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.wc-wallet-back {
  border: none;
  background: #fff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.wc-wallet-sub-title {
  font-size: 17px;
  font-weight: 600;
}
.wc-wallet-tx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.wc-wallet-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e4e7ec;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.wc-wallet-chip.active {
  background: #722ed1;
  border-color: #722ed1;
  color: #fff;
}
.wc-wallet-tx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--im-line);
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.wc-wallet-tx-row {
  padding: 12px 14px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}
.wc-wallet-tx-row:last-child {
  border-bottom: none;
}
.wc-wallet-tx-title {
  font-size: 15px;
  font-weight: 500;
  color: #262626;
}
.wc-wallet-tx-sub {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 4px;
}
.wc-wallet-tx-amt {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.wc-wallet-tx-amt--pos {
  color: #389e0d;
}
.wc-wallet-tx-amt--neg {
  color: #cf1322;
}
.wc-wallet-tx-time {
  font-size: 11px;
  color: #bfbfbf;
  margin-top: 4px;
  text-align: right;
}
.wc-wallet-pwd-form {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--im-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wc-wallet-pwd-form label {
  font-size: 13px;
  color: #595959;
}
.wc-wallet-pwd-form input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  font-size: 14px;
}
.wc-wallet-pwd-save {
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--im-blue);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
#tab-wallet .wc-rp-rec-list {
  max-height: calc(100vh - 200px);
}

.wc-rp-rec-row {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.wc-rp-rec-row:hover {
  background: #fafafa;
}
.wc-rp-rec-main {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.wc-rp-rec-g {
  font-weight: 500;
}
.wc-rp-rec-amt {
  color: #d48806;
  font-weight: 600;
}
.wc-rp-rec-sub {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 4px;
}
.wc-rp-rec-loading {
  padding: 16px;
  color: #8c8c8c;
  font-size: 13px;
}
.wc-rp-detail-head {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.wc-rp-detail-sum {
  font-size: 14px;
  color: #595959;
  margin-bottom: 12px;
}
.wc-rp-detail-recs {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
}
.wc-rp-detail-empty {
  color: #8c8c8c;
  font-size: 13px;
}

/* Modal inner forms */
.form-row {
  margin-bottom: 10px;
}
.form-row label {
  display: block;
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 4px;
}
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
}
.member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
  gap: 8px;
}
.member-row span {
  flex: 1;
  font-size: 13px;
}
.member-row .mini-actions button {
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 11px;
}

.event-log-modal {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 50vh;
  overflow-y: auto;
}
.event-line {
  margin-bottom: 8px;
  padding: 8px;
  background: #fafafa;
  border-radius: 6px;
  border-left: 3px solid #fa8c16;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  max-width: 90%;
  text-align: center;
  font-size: 13px;
}
.toast.toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.toast-err {
  background: rgba(207, 19, 34, 0.92);
}

/* 登录页语言 */
.auth-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.auth-lang-row label {
  font-size: 13px;
  color: #595959;
}
.auth-lang-row select {
  flex: 1;
  max-width: 160px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  font-size: 13px;
}

/* 消息长按菜单 */
.wc-msg-ctx-menu {
  position: fixed;
  z-index: 2500;
  min-width: 148px;
  padding: 6px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.wc-msg-ctx-menu.hidden {
  display: none !important;
}
.wc-msg-ctx-menu button {
  display: block;
  width: 100%;
  padding: 11px 18px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  color: #262626;
  cursor: pointer;
}
.wc-msg-ctx-menu button:hover {
  background: rgba(0, 122, 255, 0.08);
}

/* 回复引用条 */
.wc-reply-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 122, 255, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(0, 122, 255, 0.2);
  font-size: 12px;
  color: #595959;
}
.wc-reply-bar.hidden {
  display: none !important;
}
.wc-reply-bar-text {
  flex: 1;
  line-height: 1.4;
  word-break: break-all;
}
.wc-reply-bar-x {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #8c8c8c;
  padding: 0 4px;
}

/* 多选工具条 */
.wc-msg-multi-bar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #fffbf0 0%, #fff7e6 100%);
  border-top: 1px solid #ffe58f;
}
.wc-msg-multi-bar.hidden {
  display: none !important;
}
.wc-multi-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.wc-multi-btn-primary {
  border-color: rgba(0, 122, 255, 0.45);
  background: var(--im-blue-soft);
  color: var(--im-blue);
}

.msg-multi-mode .wc-msg-row[data-msg-id] {
  cursor: pointer;
}
.wc-msg-row.wc-msg-selected .wc-bubble {
  outline: 2px solid var(--im-blue);
  outline-offset: 2px;
}

/* 译文（腾讯式叠在气泡下方） */
.wc-msg-translated {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 13px;
  color: #434343;
  line-height: 1.45;
}
.wc-msg-translated-label {
  display: block;
  font-size: 11px;
  color: #8c8c8c;
  margin-bottom: 4px;
}
.wc-msg-mine .wc-msg-translated {
  border-top-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.95);
}
.wc-msg-mine .wc-msg-translated-label {
  color: rgba(255, 255, 255, 0.75);
}

.fwd-pick-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
}
.fwd-pick-ul li {
  margin: 0;
  padding: 0;
}
.fwd-pick-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.fwd-pick-item:hover {
  background: var(--im-blue-soft);
}

/* ---------- 群「聊天信息」侧滑（参考微信布局） ---------- */
.wc-drawer-group {
  padding-bottom: 12px;
}
.wc-ginfo-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
}
.wc-ginfo-av-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: visible;
}
.wc-ginfo-av-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.wc-ginfo-edit-av {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--im-blue);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.wc-ginfo-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}
.wc-ginfo-name-input {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #141414;
}
.wc-ginfo-name-input:disabled {
  color: #141414;
  opacity: 1;
}
.wc-ginfo-edit-name {
  border: none;
  background: none;
  color: #8c8c8c;
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
}
.wc-group-section {
  margin-bottom: 14px;
}
.wc-group-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #595959;
  margin-bottom: 8px;
}
.wc-group-inline-link {
  border: none;
  background: none;
  font-size: 13px;
  color: #576b95;
  cursor: pointer;
  padding: 0;
}
.wc-gcell-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.wc-gcell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
}
.wc-gcell-wrap {
  min-width: 0;
}
.wc-gcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}
button.wc-gcell.wc-gcell-peer {
  border: none;
  background: transparent;
  padding: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
  font: inherit;
  color: inherit;
}
button.wc-gcell.wc-gcell-peer:hover {
  background: rgba(0, 107, 230, 0.06);
}
button.wc-gcell.wc-gcell-peer:focus-visible {
  outline: 2px solid var(--im-blue);
  outline-offset: 2px;
}
.wc-gcell-av {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.wc-gcell-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
  line-height: 1.3;
}
.wc-gcell-badge--owner {
  background: linear-gradient(135deg, #9254de, #722ed1);
}
.wc-gcell-badge--admin {
  background: linear-gradient(135deg, #fa8c16, #d46b08);
}
.wc-gcell-name {
  font-size: 11px;
  color: #434343;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-gcell-add {
  border: 1px dashed #bfbfbf;
  background: #fafafa;
  border-radius: 10px;
  width: 48px;
  height: 88px;
  cursor: pointer;
  justify-content: center;
  padding: 8px 0;
}
.wc-gcell-add-plus {
  font-size: 22px;
  color: #8c8c8c;
  line-height: 1;
}
.wc-group-empty {
  font-size: 12px;
  color: #bfbfbf;
}
.wc-group-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 12px 4px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  background: none;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  color: #141414;
}
.wc-group-row-k {
  flex-shrink: 0;
  color: #434343;
}
.wc-group-row-val {
  flex: 1;
  text-align: right;
  font-size: 13px;
  color: #8c8c8c;
  word-break: break-all;
}
.wc-group-row-copy {
  flex-shrink: 0;
  color: #576b95;
  font-size: 16px;
}
.wc-group-row-stack {
  flex-wrap: wrap;
  cursor: default;
}
.wc-group-row-label {
  width: 100%;
  font-size: 13px;
  color: #8c8c8c;
  margin-bottom: 6px;
}
.wc-group-ann {
  width: 100%;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}
.wc-group-nick-input {
  width: 100%;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  box-sizing: border-box;
}
.wc-chevron {
  margin-left: auto;
  color: #bfbfbf;
}
.wc-group-pad {
  margin-top: 8px;
}
.wc-group-admin-note {
  font-size: 12px;
  color: #8c8c8c;
  margin: 14px 0 8px;
}
.wc-group-admin-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #434343;
}
.wc-group-danger-zone {
  margin-top: 16px;
  padding-top: 8px;
}
.wc-group-row-warn {
  color: #d48806;
}
.wc-group-row-danger {
  color: #cf1322;
}

.wc-group-foot-hint {
  margin: 16px 4px 0;
  font-size: 12px;
  line-height: 1.45;
  color: #bfbfbf;
}

.wc-group-manage-sheet {
  max-height: min(520px, 70vh);
  overflow-y: auto;
  text-align: left;
}
.wc-group-manage-sheet .wc-group-inset.wc-gm-card {
  margin-bottom: 0;
}
.wc-gm-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  background: #fafafa;
}
.wc-gm-switch-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
}
.wc-gm-switch-text {
  flex: 1;
  min-width: 0;
}
.wc-gm-switch-title {
  font-size: 15px;
  color: #141414;
  font-weight: 500;
}
.wc-gm-switch-desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #8c8c8c;
}
.wc-gm-hr {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 0;
}

/* 群成员全列表 + ⋮ 菜单 */
.wc-gml-list {
  max-height: min(420px, 62vh);
  overflow-y: auto;
}
.wc-gml-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}
.wc-gml-row:hover {
  background: rgba(0, 107, 230, 0.04);
}
.wc-gml-av .wc-gcell-av {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 15px;
}
.wc-gml-main {
  flex: 1;
  min-width: 0;
}
.wc-gml-name {
  font-size: 15px;
  color: #141414;
}
.wc-gml-sub {
  font-size: 12px;
  color: #bfbfbf;
  margin-top: 2px;
}
.wc-gml-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  color: #fff;
}
.wc-gml-badge--owner {
  background: #722ed1;
}
.wc-gml-badge--admin {
  background: #fa8c16;
}
.wc-gml-dots {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 20px;
  color: #8c8c8c;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
}
.wc-gmember-pop {
  position: fixed;
  z-index: 14000;
  min-width: 148px;
  padding: 6px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  border: 1px solid #f0f0f0;
}
.wc-gmember-pop button {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 15px;
  color: #262626;
  cursor: pointer;
}
.wc-gmember-pop button:hover {
  background: #f5f5f5;
}
.wc-gmember-pop-d {
  color: #cf1322 !important;
}

.wc-msg-tick {
  letter-spacing: -0.08em;
}