@import url("base.css?v=20260920_modules_stage9");

:root {
  --wechat-bg: #ededed;
  --wechat-panel: #ffffff;
  --wechat-border: rgba(0, 0, 0, 0.08);
  --wechat-muted: rgba(0, 0, 0, 0.45);
  --wechat-text: #1f2329;
  --wechat-green: #95ec69;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --app-height: 100vh;
}

/* ===== App recent-chat parity (2026-07-29) ===== */
.page-history {
  z-index: 5;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  background: #f5f5f5;
}

.app.state-history .page-list,
.app.state-history .page-chat {
  transform: translateX(-100%);
}

.app.state-history .page-history {
  transform: translateX(0);
  pointer-events: auto;
}

.history-search-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.history-search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.history-search-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}

.history-search-clear {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.55);
}

.history-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.history-filter-card {
  position: relative;
  min-width: 0;
  min-height: 66px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  background: #fff;
  color: rgba(0, 0, 0, 0.62);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 18px;
}

.history-filter-card b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.history-filter-card.active {
  border-color: rgba(212, 194, 122, 0.82);
  background: rgba(212, 194, 122, 0.13);
  color: #725f22;
}

.history-date-card input,
.history-member-card select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.history-results {
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.history-result-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.055);
  background: #fff;
  text-align: left;
}

.history-result-row:last-child {
  border-bottom: 0;
}

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

.history-result-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(0, 0, 0, 0.46);
  font-size: 11px;
}

.history-result-sender,
.history-result-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-result-preview {
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.82);
  font-size: 14px;
}

.history-result-preview mark {
  padding: 0;
  background: transparent;
  color: #d17a00;
}

.history-empty,
.history-loading {
  padding: 42px 16px;
  color: rgba(0, 0, 0, 0.44);
  text-align: center;
  font-size: 14px;
}

.history-load-more {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #765f1f;
}

.message.history-anchor .bubble {
  animation: history-anchor-flash 1.8s ease-out;
  outline: 2px solid rgba(212, 194, 122, 0.9);
  outline-offset: 3px;
}

@keyframes history-anchor-flash {
  0%, 50% { background: #fff1a8; }
  100% { background: inherit; }
}

.scroll-bottom-btn {
  position: absolute;
  right: 14px;
  bottom: var(--chat-scroll-button-bottom, 76px);
  z-index: 24;
  min-height: 38px;
  max-width: calc(100vw - 28px);
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(0, 0, 0, 0.74);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(12px);
}

.scroll-bottom-arrow {
  color: #07c160;
  font-size: 18px;
}

.scroll-bottom-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.scroll-bottom-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fa5151;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.unread-jump-btn {
  position: absolute;
  right: 14px;
  z-index: 25;
  min-height: 36px;
  max-width: min(230px, calc(100vw - 28px));
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px 0 0 999px;
  background: rgba(255, 255, 255, 0.97);
  color: #576b95;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}

.initial-unread-btn {
  top: calc(66px + var(--safe-top));
}

.mention-unread-btn {
  top: calc(110px + var(--safe-top));
}

.unread-jump-btn > span:first-child {
  color: #07c160;
  font-size: 15px;
}

/* 文本发送保持气泡颜色与尺寸；慢网络提示放在气泡外，快速回执不闪现。 */
.message.me[data-media-type="text"] .bubble {
  /* WebKit 的 table/flex 首次布局与回执重排会相差两侧边框宽度。 */
  display: block;
}

.message.me.pending[data-media-type="text"] {
  opacity: 1;
}

.message.me.pending[data-media-type="text"] .bubble::before {
  content: "";
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  box-sizing: border-box;
  border: 1.5px solid rgba(17, 24, 39, 0.14);
  border-top-color: rgba(17, 24, 39, 0.48);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: message-send-reveal 0.15s ease 0.45s forwards, message-send-spin 0.9s linear infinite;
}

@keyframes message-send-reveal {
  to { opacity: 1; }
}

@keyframes message-send-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .message.me.pending[data-media-type="text"] .bubble::before {
    animation: message-send-reveal 0s linear 0.45s forwards;
  }
}

.message.failed {
  opacity: 1;
}

.message.failed .bubble {
  opacity: 0.72;
}

.message-review-state {
  margin-top: 5px;
  color: rgba(17, 24, 39, 0.48);
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}

.message-review-state.rejected {
  color: #fa5151;
  font-weight: 700;
}

.message-review-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #fa5151;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
}

.message.review-rejected .bubble {
  opacity: 0.62;
  box-shadow: 0 0 0 1px rgba(250, 81, 81, 0.18);
}

.message-retry-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fa5151;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(250, 81, 81, 0.28);
}

.message-upload-cancel-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(0, 0, 0, 0.58);
  font-size: 16px;
  line-height: 19px;
  text-align: center;
}

.message-discard-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  height: 22px;
  margin-inline-start: -3px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: rgba(0, 0, 0, 0.55);
  font-size: 16px;
  line-height: 19px;
  text-align: center;
}

.status-send-failed {
  color: #fa5151;
  font-weight: 700;
}

.status-send-failed-icon {
  margin-right: 4px;
  color: #fa5151;
}

.group-avatar-preview.composite {
  display: grid;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: #e5e5e5;
  overflow: hidden;
}

.group-avatar-preview.composite[data-count="1"] {
  grid-template-columns: 1fr;
}

.group-avatar-preview.composite[data-count="2"],
.group-avatar-preview.composite[data-count="3"],
.group-avatar-preview.composite[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

.group-avatar-preview.composite[data-count="5"],
.group-avatar-preview.composite[data-count="6"],
.group-avatar-preview.composite[data-count="7"],
.group-avatar-preview.composite[data-count="8"],
.group-avatar-preview.composite[data-count="9"] {
  grid-template-columns: repeat(3, 1fr);
}

.group-avatar-tile {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #d4c27a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.group-avatar-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-history-row,
.friend-sheet-history {
  cursor: pointer;
}

@media (max-width: 360px) {
  .history-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

html,
body {
  background: var(--wechat-bg);
  color: var(--wechat-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  overflow: hidden;
}

html {
  height: 100%;
}

/* Anchor body to the visual viewport (top + height tracked from JS) so the
   chat shell always lines up with the visible area, even while the iOS soft
   keyboard / autofill bar is open. Without this, body fills the full layout
   viewport (~1280px) and leaves a tall blank band below the composer. */
body {
  position: fixed;
  top: var(--app-top, 0);
  left: 0;
  right: 0;
  height: var(--app-height);
  margin: 0;
}

/* ===== SPA pages (List <-> Chat) ===== */
.app {
  position: relative;
  height: var(--app-height);
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  height: var(--app-height);
  overflow: hidden;
  min-height: 0;
  pointer-events: none;
}

.app:not(.state-chat):not(.state-requests) .page-list,
.app.state-chat .page-chat,
.app.state-requests .page-requests {
  pointer-events: auto;
}

.page-list {
  transform: translateX(0);
  transition: transform 0.28s ease;
  z-index: 2;
}

.page-chat {
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: var(--app-height);
  overflow: hidden;
  min-height: 0;
}

.page-requests {
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 4;
}

.app.state-chat .page-list {
  transform: translateX(-100%);
}

.app.state-chat .page-chat {
  transform: translateX(0);
}

.app.state-requests .page-list {
  transform: translateX(-100%);
}

.app.state-requests .page-requests {
  transform: translateX(0);
}

/* ===== Conversation list ===== */
.sidebar {
  width: 100%;
  background: var(--wechat-bg);
}

.sidebar-header {
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background: var(--wechat-panel);
  border-bottom: 1px solid var(--wechat-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-header-main {
  min-width: 0;
  flex: 1 1 auto;
}

.sidebar-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.conversation-tabs {
  display: grid;
  /* 最近聊天 / 通讯录 / 会议 三个页签一行放下 */
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 14px 8px;
  background: var(--wechat-panel);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.conversation-tab {
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.045);
  color: rgba(31, 35, 41, 0.62);
  font-size: 14px;
  font-weight: 900;
}

.conversation-tab.active {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.08);
}

.lang-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 118, 110, 0.14);
  background: rgba(15, 118, 110, 0.06);
  color: #0f766e;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.08);
}

.lang-select svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.lang-select select {
  border: 0;
  outline: none;
  background: transparent;
  color: #0b1f1e;
  font-size: 13px;
  font-weight: 700;
  min-width: 52px;
  padding-right: 8px;
  appearance: none;
  -webkit-appearance: none;
}

.new-friends-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.new-friends-entry:active {
  background: rgba(0, 0, 0, 0.05);
}

.new-friends-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
  flex: 0 0 auto;
}

.new-friends-body {
  flex: 1;
  min-width: 0;
}

.new-friends-title {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.2px;
}

.new-friends-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--wechat-muted);
}

.new-friends-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  flex: 0 0 auto;
}

.brand-title {
  font-weight: 900;
  font-size: 17px;
}

.brand-sub {
  font-size: 12px;
  color: var(--wechat-muted);
}

.sidebar-list {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0;
  background: var(--wechat-bg);
  min-height: 0;
}

.sidebar-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--wechat-panel);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-pagination.hidden {
  display: none;
}

.sidebar-pagination-summary {
  min-width: 0;
  font-size: 12px;
  color: var(--wechat-muted);
  white-space: nowrap;
}

.sidebar-pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-pagination-btn {
  min-width: 38px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--wechat-border);
  background: var(--wechat-panel);
  color: var(--wechat-text);
  font-size: 13px;
  font-weight: 700;
}

.sidebar-pagination-btn:disabled {
  opacity: 0.35;
}

.sidebar-search {
  height: 40px;
  margin: 10px 14px 10px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-search-icon {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}

.sidebar-search input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  color: var(--wechat-text);
}

.sidebar-search-clear {
  border: 0;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 28px;
  color: rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}

.sidebar-search-clear:active {
  background: rgba(0, 0, 0, 0.08);
}

.status-item {
  border-radius: 0;
  border: 0;
  padding: 12px 14px;
  background: var(--wechat-panel);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.status-item.active {
  background: rgba(0, 0, 0, 0.04);
}

.status-section-title {
  height: 42px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  background: var(--wechat-panel);
  color: rgba(31, 35, 41, 0.72);
  font-size: 15px;
  font-weight: 900;
  border-bottom: 1px solid rgba(0, 0, 0, 0.045);
}

.status-section-title.muted {
  background: #f1f1f1;
  color: rgba(31, 35, 41, 0.52);
  font-size: 14px;
  font-weight: 750;
}

.avatar-wrap {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
}

.avatar-wrap .avatar {
  width: 46px;
  height: 46px;
}

.badge-count,
.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--wechat-panel);
}

.badge-dot,
.badge-dot-mute {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3b30;
  border: 2px solid var(--wechat-panel);
}

.badge-mention {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #facc15;
  border: 2px solid var(--wechat-panel);
}

.status-body {
  flex: 1;
  min-width: 0;
}

.status-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.status-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-title {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-badge {
  flex: 0 0 auto;
  height: 17px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(29, 155, 91, 0.12);
  border: 1px solid rgba(29, 155, 91, 0.24);
  color: #16834c;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
}

.status-time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.status-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.status-preview {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-preview-mention {
  color: #b45309;
  font-weight: 600;
}

/* 仿微信静音铃铛图标 */
.icon-mute-bell {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #999;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zm-7.5-3l14.5 14.5 1.41-1.41L4.41 11.5 2.5 13.41z'/%3E%3Cline x1='3' y1='3' x2='21' y2='21' stroke='currentColor' stroke-width='2' /%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z'/%3E%3Cpath d='M2 2l20 20' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
  margin-left: 4px;
  vertical-align: middle;
}

.sidebar-footer {
  padding: 10px 14px calc(10px + var(--safe-bottom));
  background: var(--wechat-panel);
  border-top: 1px solid var(--wechat-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 0 0 auto;
  position: relative;
}

.lang-switcher-label {
  display: none;
}

.lang-compact-btn {
  min-width: 88px;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.lang-compact-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 116px;
  padding: 6px;
  border-radius: 14px;
  background: var(--wechat-panel);
  border: 1px solid var(--wechat-border);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  z-index: 40;
}

.lang-compact-menu.hidden {
  display: none;
}

.lang-compact-menu button {
  width: 100%;
  height: 38px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  text-align: left;
  padding: 0 12px;
  font-size: 13px;
  color: var(--wechat-text);
}

.lang-compact-menu button.active {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 700;
}

.lang-compact-menu button:active {
  background: rgba(0, 0, 0, 0.08);
}

.lang-switcher-select {
  width: 118px;
  min-width: 118px;
  flex: 0 0 118px;
  max-width: 100%;
  height: 36px;
  padding: 0 34px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--wechat-border);
  background: var(--wechat-panel);
  color: var(--wechat-text);
  font-size: 13px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.45) 50%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.45) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 15px,
    calc(100% - 12px) 15px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.lang-switcher-select:focus {
  border-color: rgba(0, 0, 0, 0.2);
}

#logoutBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ===== Chat header (WeChat-like) ===== */
.chat {
  width: 100%;
  background: var(--wechat-bg);
}

.chat-header.mobile-header {
  padding: calc(10px + var(--safe-top)) 10px 10px;
  background: var(--wechat-panel);
  border-bottom: 1px solid var(--wechat-border);
  align-items: center;
  gap: 10px;
}

.nav-back {
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.72);
  padding: 10px;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.nav-back .back-icon {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.nav-back:active {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.92);
}

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

.chat-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.72);
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

.chat-title {
  font-weight: 900;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-meta {
  font-size: 12px;
  color: var(--wechat-muted);
}

/* ===== Messages ===== */
.messages-scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  background: var(--wechat-bg);
  /* 关键：column-reverse 让 scrollTop=0 即「底部」。贴底时内容增长，浏览器
     原生保持贴底，无需 JS 滚动（程序化滚动会让安卓收起输入法）。
     关掉 scroll anchoring 防止与该机制叠加产生二次修正。 */
  display: flex;
  flex-direction: column-reverse;
  /* 注意：这里绝不能加 justify-content —— column-reverse + justify 会触发
     Chrome 的经典 quirk：溢出内容变为不可滚动（scrollHeight 恒等于
     clientHeight）。代价是消息不足一屏时内容贴底（Telegram 同款观感）。 */
  overflow-anchor: none;
}

.older-history-btn {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--wechat-muted);
  font-size: 12px;
  cursor: pointer;
}
.older-history-btn:disabled { cursor: default; }
.older-history-btn[data-state="error"] { color: #b42318; }

.messages {
  padding: 10px 12px;
  padding-bottom: 12px;
  height: auto;
  /* 压制 @import 进来的 pc/style.css 里 .messages{flex:1;overflow:auto;min-height:0}
     ——那会让内层自己滚动、外层滚动器失效（与附件区 height:92px 是同一类坑）。
     内层必须是不滚动的内容层，滚动只发生在 .messages-scroller。 */
  flex: 0 0 auto;
  overflow-y: visible;
  min-height: auto;
  background: none;
}

.bubble-footer {
  display: none;
}

.attachments,
.emoji-picker,
.more-panel,
.wechat-footer {
  flex-shrink: 0;
}

.wechat-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px calc(8px + var(--safe-bottom));
  min-height: 58px;
  background: #f7f7f7;
  border-top: 1px solid #dcdcdc;
  position: relative;
  z-index: 10;
}

.composer-clipboard-menu {
  position: fixed;
  z-index: 1600;
  min-width: 96px;
  max-width: calc(100vw - 16px);
  padding: 2px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fafafa;
  box-shadow: 0 2px 8px #00000014;
}
.composer-clipboard-menu[hidden] { display: none; }
.composer-clipboard-menu button {
  display: block;
  width: 100%;
  padding: 5px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #222;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: start;
  cursor: pointer;
}
.composer-clipboard-menu button:hover,
.composer-clipboard-menu button:focus,
.composer-clipboard-menu button:focus-visible,
.composer-clipboard-menu button:active { background: transparent; outline: none; box-shadow: none; }

#composerInput.wechat-input {
  /* 与改动前 autoResizeTextarea 里硬编码的 42/108 一致，移动端行为不变 */
  --composer-min-h: 42px;
  /* textarea 默认是等宽字体，恢复撤回原文时英文/数字会显得突兀，统一继承页面字体。 */
  font-family: inherit;
  --composer-max-h: 108px;
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid transparent;
  background: #eeeeee;
  border-radius: 21px;
  padding: 9px 14px;
  outline: none;
  font-size: 16px;
  line-height: 22px;
  height: 42px;
  min-height: 42px;
  max-height: 108px;
  color: rgba(0, 0, 0, 0.86);
  overflow-y: auto;
  box-sizing: border-box;
}

#composerInput.wechat-input:focus {
  border-color: #dedede;
  background: #ffffff;
  box-shadow: none;
}

.wechat-icon-btn {
  border: 0;
  background: transparent;
  width: 38px;
  height: 40px;
  border-radius: 20px;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.68);
}

.wechat-icon-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

.wechat-icon-btn.active {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.86);
}

.mention-trigger {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 25px;
  font-weight: 500;
}

.wechat-action-btn {
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 22px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.78);
}

.wechat-action-btn.more-open {
  background: rgba(0, 0, 0, 0.07);
}

.wechat-action-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

.wechat-action-btn.is-send {
  width: auto;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  background: #d4c27a;
  border-radius: 6px;
}

.wechat-action-btn.is-send:active {
  background: #c4b268;
}

.emoji-picker {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  height: 280px;
  max-height: min(280px, 42vh);
  overflow: hidden;
  background: #f7f7f7;
  border-top: 1px solid #dcdcdc;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 页签条：表情 / 收藏。容器本身不再是网格，网格下移到各自的 pane 里。 */
/* 页签按微信只放图标，选中项是浅灰圆角底 */
.emoji-pane-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid #e5e5e5;
}

.emoji-pane-tab {
  width: 44px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7a7a7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.emoji-pane-tab.is-active {
  background: #e6e6e6;
  color: #181818;
}

.emoji-pane-tab svg {
  width: 24px;
  height: 24px;
}

.emoji-pane {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 10px calc(10px + var(--safe-bottom));
}

.emoji-pane.hidden { display: none; }

.emoji-pane-emoji {
  display: block;
  padding: 8px 8px calc(62px + var(--safe-bottom));
}

.emoji-section.hidden { display: none; }

.emoji-section + .emoji-section {
  margin-top: 6px;
}

.emoji-section-title {
  padding: 2px 6px 6px;
  font-size: 12px;
  color: #8a8a8a;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px 0;
}

/* 宽屏（桌面双栏）下面板横跨整个聊天区，固定 8 列会稀疏，按格子宽度自动排满 */
@media (min-width: 768px) {
  .emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }
}

/* 表情页右下角悬浮的删除/发送；收藏页不显示 */
.emoji-pane-actions {
  position: absolute;
  right: 12px;
  bottom: calc(12px + var(--safe-bottom));
  display: flex;
  gap: 8px;
  padding-left: 18px;
  background: linear-gradient(90deg, rgba(247, 247, 247, 0), #f7f7f7 18px);
}

.emoji-picker:not([data-pane="emoji"]) .emoji-pane-actions {
  display: none;
}

.emoji-pane-tab img { width: 30px; height: 30px; object-fit: contain; }
.emoji-pane-phoenix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 90px;
  align-content: start;
  gap: 12px;
}
.phoenix-tile {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}
.phoenix-tile:active { background: rgba(0, 0, 0, 0.08); }
.phoenix-tile img {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
}

.modal-invite-qr-save { width: min(380px, calc(100vw - 32px)); text-align: center; }
.saved-invite-qr {
  display: block;
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
  background: #fff;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}
.modal-invite-qr-save p { color: #666; font-size: 13px; line-height: 1.5; }
.modal-invite-qr-save a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.modal-invite-qr-save a.hidden { display: none; }

.emoji-action-backspace,
.emoji-action-send {
  height: 38px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.emoji-action-backspace {
  width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #181818;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.emoji-action-send {
  min-width: 60px;
  padding: 0 14px;
  background: #07c160;
  color: #ffffff;
  font-size: 15px;
}

.emoji-action-backspace:disabled {
  color: #c4c4c4;
  box-shadow: none;
}

.emoji-action-send:disabled {
  background: #ededed;
  color: #b2b2b2;
}

/* 收藏页：格子比 emoji 大一档，够看清表情内容 */
.emoji-pane-sticker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.sticker-tile {
  border: 0;
  padding: 4px;
  background: transparent;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.sticker-tile:active { background: rgba(0, 0, 0, 0.08); }

.sticker-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sticker-add {
  font-size: 30px;
  color: #a8a8a8;
  line-height: 1;
  background: #ebebeb;
}

.sticker-empty {
  grid-column: 1 / -1;
  padding: 24px 8px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}

.emoji-picker .emoji-item {
  border: 0;
  background: transparent;
  border-radius: 6px;
  height: 42px;
  padding: 0;
  font-size: 28px;
  line-height: 42px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  cursor: pointer;
}

.emoji-picker .emoji-item:active {
  background: rgba(0, 0, 0, 0.08);
}

.more-panel {
  width: 100%;
  min-height: 132px;
  padding: 18px 16px calc(22px + var(--safe-bottom));
  background: #f7f7f7;
  border-top: 1px solid #e5e5e5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 12px;
}

.more-panel.hidden {
  display: none;
}

.more-panel-item {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #666666;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.more-panel-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  background: #ffffff;
  color: #333333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 100ms ease, background-color 100ms ease;
}

.more-panel-icon svg {
  width: 28px;
  height: 28px;
}

.more-panel-item:active .more-panel-icon {
  transform: scale(0.94);
  background: #eeeeee;
}

.more-panel-health-icon {
  color: #8c6be8;
  background: linear-gradient(145deg, #ffffff, #f5f0ff);
}

/* ===== Health archive authorization ===== */
.health-archive-sheet {
  position: fixed;
  inset: 0;
  z-index: 18100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.health-archive-sheet.hidden {
  display: none;
}

.health-archive-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(21, 16, 37, 0.48);
  backdrop-filter: blur(2px);
}

.health-archive-panel {
  position: relative;
  width: min(100%, 540px);
  max-height: min(82vh, 760px);
  padding: 0 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(circle at 88% 0%, rgba(177, 148, 255, 0.2), transparent 34%),
    #fbfaff;
  box-shadow: 0 -22px 52px rgba(27, 18, 53, 0.2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.health-archive-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 -4px;
  padding: 20px 4px 14px;
  background: linear-gradient(180deg, #fbfaff 84%, rgba(251, 250, 255, 0));
}

.health-archive-header h2 {
  margin: 0;
  color: #29213d;
  font-size: 19px;
  line-height: 1.35;
}

.health-archive-header p {
  margin: 4px 0 0;
  color: #817895;
  font-size: 12px;
  line-height: 1.55;
}

.health-archive-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-left: -6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #514965;
  font-size: 30px;
  line-height: 30px;
}

.health-archive-loading {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #7a708f;
  font-size: 13px;
}

.health-archive-loading.hidden,
.health-archive-content.hidden,
.health-archive-current.hidden,
.health-archive-primary.hidden,
.health-archive-danger.hidden {
  display: none;
}

.health-archive-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e6def8;
  border-top-color: #8869dc;
  border-radius: 50%;
  animation: health-archive-spin 760ms linear infinite;
}

@keyframes health-archive-spin {
  to { transform: rotate(360deg); }
}

.health-archive-section {
  padding: 14px;
  border: 1px solid #ece6f7;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.health-archive-section-title {
  margin-bottom: 10px;
  color: #39304f;
  font-size: 14px;
  font-weight: 800;
}

.health-archive-detectors {
  display: grid;
  gap: 8px;
}

.health-archive-detector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 9px 12px;
  border: 1px solid #eee9f6;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.health-archive-detector:has(input:checked) {
  border-color: #9a7ee4;
  background: #f7f3ff;
  box-shadow: 0 5px 15px rgba(126, 91, 207, 0.1);
}

.health-archive-detector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.health-archive-detector-avatar {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #efe8ff, #ddd0ff);
  color: #7054bd;
  font-weight: 800;
}

.health-archive-detector-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.health-archive-detector-copy {
  flex: 1;
  min-width: 0;
}

.health-archive-detector-name {
  overflow: hidden;
  color: #332a49;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-archive-detector-relation {
  margin-top: 2px;
  color: #8a819b;
  font-size: 12px;
}

.health-archive-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #cfc6dd;
  border-radius: 50%;
  color: transparent;
  font-size: 14px;
}

.health-archive-detector input:checked ~ .health-archive-check {
  border-color: #8462da;
  background: #8462da;
  color: #fff;
}

.health-archive-empty {
  padding: 22px 12px;
  color: #8d849c;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.health-archive-expiry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #ece6f7;
  border-radius: 16px;
  background: #fff;
  color: #403653;
  font-size: 14px;
  font-weight: 750;
}

.health-archive-expiry input {
  min-width: 138px;
  border: 0;
  outline: 0;
  background: #f5f1fc;
  padding: 8px 10px;
  border-radius: 10px;
  color: #66517f;
  font: inherit;
  font-size: 13px;
}

.health-archive-privacy {
  margin: 11px 2px 2px;
  color: #8b8298;
  font-size: 12px;
  line-height: 1.65;
}

.health-archive-current {
  padding: 16px;
  border: 1px solid #e6def5;
  border-radius: 18px;
  background: #fff;
}

.health-archive-current-badge {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eee8fb;
  color: #7657c6;
  font-size: 12px;
  font-weight: 800;
}

.health-archive-current-badge.active {
  background: #e4f7ec;
  color: #218251;
}

.health-archive-current h3 {
  margin: 12px 0 6px;
  color: #302744;
  font-size: 16px;
}

.health-archive-current p {
  margin: 4px 0;
  color: #766d86;
  font-size: 13px;
  line-height: 1.6;
}

.health-archive-current-people {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.health-archive-current-people span {
  padding: 6px 9px;
  border-radius: 9px;
  background: #f6f2fc;
  color: #5d4b79;
  font-size: 12px;
}

.health-archive-footer {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding-top: 14px;
  background: linear-gradient(0deg, #fbfaff 82%, rgba(251, 250, 255, 0));
}

.health-archive-primary,
.health-archive-danger {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
}

.health-archive-primary {
  background: linear-gradient(135deg, #9270ea, #7654d4);
  box-shadow: 0 9px 20px rgba(118, 84, 212, 0.23);
  color: #fff;
}

.health-archive-primary:disabled,
.health-archive-danger:disabled {
  opacity: 0.55;
}

.health-archive-danger {
  border: 1px solid #f1c9cc;
  background: #fff4f4;
  color: #c3434c;
}

/* Health archive card inside a direct conversation. */
.health-archive-message {
  width: min(72vw, 330px);
  overflow: hidden;
  border: 1px solid rgba(132, 98, 218, 0.16);
  border-radius: 16px;
  background: #fff;
  color: #332a47;
  box-shadow: 0 7px 22px rgba(50, 35, 81, 0.09);
}

.health-archive-message-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 10px;
  background: linear-gradient(135deg, #f2ecff, #faf8ff);
}

.health-archive-message-heart {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #8462da;
  color: #fff;
  font-size: 17px;
}

.health-archive-message-title {
  display: block;
  font-size: 14px;
  font-weight: 850;
}

.health-archive-message-status {
  display: block;
  margin-top: 2px;
  color: #7c7190;
  font-size: 11px;
}

.health-archive-message-copy {
  padding: 12px 14px 7px;
  color: #554a68;
  font-size: 13px;
  line-height: 1.58;
}

.health-archive-message-meta {
  padding: 0 14px 12px;
  color: #948aa3;
  font-size: 11px;
}

.health-archive-message-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}

.health-archive-message-btn {
  flex: 1;
  min-height: 38px;
  border: 1px solid #e3dcef;
  border-radius: 11px;
  background: #f7f4fb;
  color: #6b587e;
  font-size: 13px;
  font-weight: 750;
}

.health-archive-message-btn.primary {
  border-color: #8462da;
  background: #8462da;
  color: #fff;
}

.health-archive-message-btn:disabled {
  opacity: 0.55;
}

@media (max-width: 380px) {
  .wechat-footer {
    gap: 3px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .wechat-icon-btn {
    width: 34px;
  }

  .emoji-picker .emoji-item {
    font-size: 25px;
  }
}

.date-separator {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.date-separator span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.34);
  padding: 2px 8px;
  border-radius: 0;
  background: transparent;
}

.bubble-body .chat-text-link {
  color: #1264a3;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bubble-body .chat-text-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

.bubble-body .chat-md {
  display: block;
  white-space: normal;
  word-break: break-word;
  font-size: 15px;
  line-height: 1.68;
}

.bubble-body .chat-md p {
  margin: 8px 0;
}

.bubble-body .chat-md p:first-child,
.bubble-body .chat-md .md-heading:first-child,
.bubble-body .chat-md ul:first-child,
.bubble-body .chat-md ol:first-child {
  margin-top: 0;
}

.bubble-body .chat-md p:last-child,
.bubble-body .chat-md ul:last-child,
.bubble-body .chat-md ol:last-child {
  margin-bottom: 0;
}

.bubble-body .chat-md .md-heading {
  margin: 12px 0 7px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 850;
  line-height: 1.45;
}

.bubble-body .chat-md .md-h1 {
  font-size: 17px;
}

.bubble-body .chat-md .md-h2 {
  font-size: 16px;
}

.bubble-body .chat-md .md-h3 {
  font-size: 15px;
}

.bubble-body .chat-md ul,
.bubble-body .chat-md ol {
  margin: 7px 0;
  padding-left: 1.15em;
}

.bubble-body .chat-md li {
  margin: 4px 0;
  padding-left: 2px;
}

.bubble-body .chat-md strong {
  font-weight: 850;
  color: rgba(0, 0, 0, 0.92);
}

.bubble-body .chat-md em {
  font-style: normal;
  color: rgba(0, 0, 0, 0.78);
}

.bubble-body .chat-md code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.bubble-body .chat-md .md-divider {
  height: 1px;
  margin: 12px 0;
  background: rgba(0, 0, 0, 0.08);
}

.bubble-body .chat-md .md-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 8px 0;
}

.bubble-body .chat-md table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.93em;
}

.bubble-body .chat-md th,
.bubble-body .chat-md td {
  border: 1px solid rgba(0, 0, 0, 0.14);
  padding: 6px 9px;
  min-width: 4em;
  vertical-align: top;
}

.bubble-body .chat-md th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 700;
}

.bubble-body .chat-md .md-align-left { text-align: left; }
.bubble-body .chat-md .md-align-center { text-align: center; }
.bubble-body .chat-md .md-align-right { text-align: right; }

.translation-original .chat-md {
  font-size: 12px;
  line-height: 1.55;
}

.translation-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.translation-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.translation-toggle,
.translation-request {
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: rgba(7, 193, 96, 0.12);
  color: #04733a;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
}

.translation-toggle.active,
.translation-request:active {
  background: rgba(7, 193, 96, 0.2);
}

.translation-request:disabled {
  opacity: 0.72;
}

.translation-original {
  color: rgba(0, 0, 0, 0.56);
  padding-top: 2px;
}

/* ===== Modals (mobile scroll + safe areas) ===== */
#modalGroupProfile,
#modalGroupQr,
#modalGroupRemark,
#modalGroupInvite,
#modalComplaintReason,
#modalComplaintForm,
#modalForward {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  overflow: hidden;
  padding-bottom: 0;
}

.list-row {
  border: 1px solid var(--wechat-border);
  background: var(--wechat-panel);
}

.list-row:active {
  background: rgba(0, 0, 0, 0.04);
}

.group-settings-field {
  margin-top: 16px;
}

.group-settings-field > label {
  margin-bottom: 8px;
}

.group-settings-list {
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.group-setting-row {
  min-height: 58px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.group-setting-action {
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: #fff;
  font-family: inherit;
  text-align: left;
}

.group-setting-danger .group-setting-title {
  color: #ff3b30;
}

.group-setting-row:last-child {
  border-bottom: 0;
}

.group-setting-row:active {
  background: rgba(15, 23, 42, 0.04);
}

.group-setting-row:focus-visible {
  outline: 2px solid rgba(7, 193, 96, 0.36);
  outline-offset: -2px;
}

.group-setting-row.is-disabled {
  opacity: 0.72;
}

.group-setting-title {
  min-width: 0;
  color: rgba(0, 0, 0, 0.9);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  white-space: nowrap;
}

.wechat-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: #e5e5e5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: background 0.18s ease;
  cursor: pointer;
}

.wechat-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease;
}

.wechat-switch:checked {
  background: #07c160;
}

.wechat-switch:checked::before {
  transform: translateX(20px);
}

.wechat-switch:disabled {
  cursor: default;
}

.live-invite-card {
  display: block;
  width: min(248px, 72vw);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffaf4, #ffffff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  text-decoration: none;
  color: inherit;
}

.live-invite-copy {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.live-invite-title {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.92);
  word-break: break-word;
}

.live-invite-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(87, 107, 149, 0.12);
  color: #576b95;
  font-size: 12px;
  font-weight: 900;
}

.live-invite-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f5f5f5;
}

.group-name-field {
  margin-top: 16px;
}

.group-name-view,
.group-name-edit {
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-name-view {
  min-height: 46px;
  padding: 0 2px;
}

.group-name-display {
  flex: 1 1 auto;
  min-width: 0;
  color: #111827;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-name-edit-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  color: rgba(15, 23, 42, 0.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.group-name-edit-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.group-name-edit-btn:active {
  background: rgba(0, 0, 0, 0.04);
}

.group-name-edit input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
}

.group-name-edit .btn {
  height: 44px;
  min-width: 62px;
  padding: 0 14px;
  border-radius: 12px;
  white-space: nowrap;
}

.member-grid {
  gap: 10px 6px;
}

.member-tile .avatar,
.member-add-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.invite-list {
  max-height: none;
}

#modalGroupInfo .member-row {
  padding: 8px 0;
}

#modalGroupInfo .member-left {
  gap: 8px;
}

#modalGroupInfo .member-left .avatar {
  width: 40px;
  height: 40px;
}

/* Make every centered modal scrollable on mobile so taller content (e.g. a
   group with many members) no longer gets clipped above and below the
   visible area. The PC base rule only sets position:fixed + transform with
   no max-height; without this, content overflows the viewport invisibly. */
.modal {
  max-height: calc(var(--app-height) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Keep search and pagination visible: a 50-row invitation page must not
   push the next-page control below the whole dialog's scroll viewport. */
#modalGroupInvite:not(.hidden) {
  display: flex;
  flex-direction: column;
  height: min(680px, calc(100vh - 24px));
  height: min(680px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

#modalGroupInvite > .row,
#modalGroupInvite > .field,
#modalGroupInvite > .group-invite-footer {
  flex: 0 0 auto;
}

#modalGroupInvite .invite-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.group-invite-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
}

.group-invite-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 210px;
  min-width: 0;
}

#groupInviteMeta {
  flex: 1;
  text-align: center;
}

.group-invite-pagination .btn {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
}

#groupInviteSendBtn {
  flex: 1 0 auto;
}

.modal-friend-sheet {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100vw;
  max-width: none;
  max-height: calc(var(--app-height) - 64px);
  transform: none;
  padding: 0 0 calc(18px + var(--safe-bottom));
  border: 0;
  border-radius: 0;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.14);
  background: #f1f1f1;
}

.friend-sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 56px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.friend-sheet-head h3 {
  margin: 0;
  color: rgba(0, 0, 0, 0.86);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
}

.friend-sheet-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.72);
  font-size: 34px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.friend-sheet-close:active {
  background: rgba(0, 0, 0, 0.05);
}

.friend-sheet-section {
  margin-top: 10px;
  background: #fff;
}

.friend-sheet-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 12px;
  padding: 14px 20px;
  background: #fff;
}

.friend-profile-entry,
.friend-create-group-entry {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.82);
  font-family: inherit;
  cursor: pointer;
}

.friend-profile-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.friend-profile-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
}

.friend-profile-name {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-create-group-entry {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  font-size: 12px;
}

.friend-create-group-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(212, 194, 122, 0.78);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #b69e42;
  font-size: 24px;
  line-height: 1;
  background: rgba(212, 194, 122, 0.1);
}

.friend-profile-entry:active,
.friend-create-group-entry:active {
  opacity: 0.68;
}

.friend-sheet-space {
  margin-top: 10px;
}

.friend-sheet-settings {
  margin-top: 10px;
}

.friend-setting-row {
  cursor: pointer;
}

.friend-setting-row + .friend-setting-row,
.friend-sheet-clear-history {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.friend-sheet-clear-history {
  margin-top: 10px;
}

.modal-friend-sheet .remark-view {
  margin: 0;
}

.friend-sheet-row,
.friend-sheet-delete {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 76px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  font-size: 20px;
  line-height: 1.25;
  text-align: left;
}

.friend-sheet-row:active,
.friend-sheet-delete:active {
  background: #f7f7f7;
}

.friend-sheet-chevron {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.26);
  font-size: 34px;
  line-height: 1;
}

/* 设置备注行右侧的当前备注回显（对齐 App：灰字、超长省略） */
.modal-friend-sheet .remark-text {
  flex: 0 0 auto;
}

.modal-friend-sheet .remark-value {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  color: rgba(0, 0, 0, 0.38);
  font-size: 17px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-sheet-report {
  margin-top: 0;
  color: #ff9500; /* 对齐 App 橙色 */
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.friend-sheet-delete {
  justify-content: center;
  margin-top: 10px;
  color: #ff3b30; /* 对齐 App 红色 */
  text-align: center;
}

.modal-friend-sheet .remark-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-friend-sheet .remark-edit.hidden {
  display: none;
}

.modal-friend-sheet .remark-edit input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border-radius: 8px;
}

.modal-friend-sheet .remark-edit .btn {
  flex: 0 0 auto;
  min-width: 58px;
  height: 44px;
  padding: 0 10px;
}

.modal-group-transfer-owner {
  width: min(420px, calc(100vw - 36px));
}

.group-transfer-owner-list {
  max-height: min(58vh, 480px);
  margin-top: 12px;
  overflow-y: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
}

.group-transfer-owner-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 62px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: rgba(0, 0, 0, 0.86);
  font-family: inherit;
  text-align: left;
}

.group-transfer-owner-item:last-child {
  border-bottom: 0;
}

.group-transfer-owner-item:active {
  background: #f7f7f7;
}

.group-transfer-owner-item .avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

.group-transfer-owner-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-invite-friend {
  width: min(392px, calc(100vw - 64px));
  max-height: calc(var(--app-height) - 44px);
  padding: 28px 30px 32px;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  background: #fff;
}

.invite-modal-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.invite-modal-title-row h3 {
  margin: 0;
  color: #111827;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.25;
}

.invite-modal-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d2bf6d;
  background: rgba(212, 194, 122, 0.12);
}

.invite-modal-icon svg,
.invite-share-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.invite-qr-card {
  padding: 28px 18px 24px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) inset;
  text-align: center;
}

.invite-qr-title {
  margin-bottom: 22px;
  color: #111827;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

.invite-qr {
  width: clamp(160px, 54vw, 238px);
  height: clamp(160px, 54vw, 238px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: rgba(17, 24, 39, 0.55);
  font-size: 14px;
  font-weight: 700;
}

.invite-qr canvas,
.invite-qr img,
.invite-qr svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.invite-qr-hint {
  margin-top: 24px;
  color: rgba(17, 24, 39, 0.48);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
}

.invite-link-store {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.invite-share-btn,
.invite-close-btn {
  width: 100%;
  min-height: 58px;
  margin-top: 22px;
  border-radius: 13px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.invite-share-btn {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #d4c27a;
  color: #fff;
}

.invite-share-btn:disabled {
  opacity: 0.72;
  cursor: default;
}

.invite-close-btn {
  margin-top: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: rgba(17, 24, 39, 0.66);
}

#modalGroupInfo {
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 36px));
  max-height: calc(var(--app-height) - 28px);
  padding: 12px;
  border-radius: 18px;
  overflow-y: auto;
}

#modalGroupInfo .field {
  margin: 8px 0;
  gap: 5px;
}

#modalGroupInfo #groupMembersList {
  /* --app-height 在非 iOS 端为 100%；弹窗内的百分比高度无法约束此列表。 */
  max-height: clamp(92px, calc(100vh - 540px), 240px);
  max-height: clamp(92px, calc(100dvh - 540px), 240px);
  min-height: 88px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 2px;
}

.group-members-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.group-members-search-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #555;
  cursor: pointer;
}

.group-members-search-btn:disabled { opacity: .4; cursor: default; }

#modalGroupMembersSearch {
  inset: 0;
  transform: none;
  width: 100%;
  height: var(--app-height);
  max-height: var(--app-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #ededed;
}

.group-members-search-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: calc(56px + var(--safe-top));
  padding: var(--safe-top) 8px 0 16px;
  box-sizing: border-box;
  background: #fff;
}

.group-members-search-box {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 36px;
  padding-left: 10px;
  border-radius: 6px;
  color: #999;
  background: #f0f0f0;
}

.group-members-search-box svg { flex-shrink: 0; }
.group-members-search-box:focus-within { outline: 2px solid #ccc; outline-offset: 1px; }

#groupMembersSearchInput {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: #111;
  font: inherit;
  font-size: 16px;
}

#groupMembersSearchInput::-webkit-search-cancel-button { -webkit-appearance: none; }

#groupMembersSearchClear,
.group-members-search-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #777;
  font-size: 26px;
  cursor: pointer;
}

.group-members-search-body {
  position: relative;
  height: calc(100% - 56px - var(--safe-top));
  padding-bottom: var(--safe-bottom);
  box-sizing: border-box;
}

#groupMembersSearchList {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 24px;
}

.group-members-search-section {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #666;
  font-size: 13px;
}

.group-members-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #eee;
  background: #fff;
  text-align: left;
  color: #111;
  cursor: pointer;
}

.group-members-search-row .avatar { flex: 0 0 44px; width: 44px; height: 44px; }
.group-members-search-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.group-members-search-owner { flex-shrink: 0; color: #b59a50; font-size: 12px; }
.group-members-search-empty { padding: 60px 16px; text-align: center; color: #666; }

#groupMembersSearchAlphabet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--safe-bottom);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 24px;
}

#groupMembersSearchAlphabet button {
  flex: 0 1 20px;
  min-height: 10px;
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #222;
  font-size: 10px;
  cursor: pointer;
}

#groupMembersSearchAlphabet button:disabled { color: #aaa; cursor: default; }

@media (min-width: 900px) {
  #modalGroupMembersSearch {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 48px));
    height: min(720px, calc(100dvh - 96px));
    max-height: calc(var(--app-height) - 96px);
    border-radius: 16px;
  }
}

.group-remark-row-label {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.86);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.group-remark-row-main {
  min-width: 0;
  flex: 1 1 auto;
  color: rgba(0, 0, 0, 0.56);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.modal-group-remark {
  background: #fff;
  max-width: none;
  width: 100%;
  height: var(--app-height);
  max-height: var(--app-height);
  border-radius: 0;
  padding: 0;
}

.group-remark-head {
  height: calc(58px + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
}

.group-remark-back {
  margin-left: 8px;
}

.group-remark-body {
  padding: 96px 30px calc(24px + var(--safe-bottom));
  text-align: center;
}

.group-remark-body h3 {
  margin: 0;
  color: #111827;
  font-size: 23px;
  font-weight: 950;
}

.group-remark-body p {
  margin: 24px auto 56px;
  max-width: 310px;
  color: rgba(0, 0, 0, 0.72);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 650;
}

.group-remark-editor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.group-remark-avatar {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.group-remark-editor input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
}

.group-remark-clear {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.group-remark-save {
  width: min(220px, 72vw);
  height: 48px;
  margin-top: 96px;
  border-radius: 12px;
  font-size: 16px;
}

/* ===== Group profile ===== */
.modal-group-profile {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: var(--app-height);
  padding-bottom: calc(14px + var(--safe-bottom));
}

.modal-group-profile > .row {
  flex: 0 0 auto;
}

.group-profile-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px calc(16px + var(--safe-bottom));
}

.group-profile-grid > .small {
  grid-column: 1 / -1;
}

.group-profile-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.group-profile-item .avatar {
  width: 44px;
  height: 44px;
}

.group-profile-name {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.72);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Group member detail ===== */
.modal-member-info {
  width: 100vw;
  max-width: none;
  min-height: var(--app-height);
  max-height: var(--app-height);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: #ededed;
}

.member-info-head {
  height: calc(54px + var(--safe-top));
  padding: calc(8px + var(--safe-top)) 14px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.member-info-back,
.member-info-more {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.member-info-more {
  font-size: 26px;
  line-height: 1;
}

.member-info-profile {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 28px 24px 30px;
  background: #fff;
}

.member-info-avatar {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.member-info-main {
  min-width: 0;
  flex: 1 1 auto;
}

.member-info-name {
  color: #111;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.member-info-line {
  margin-top: 6px;
  color: rgba(0, 0, 0, 0.56);
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}

.member-gender-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.member-gender-icon.male {
  background: #4f8df7;
}

.member-gender-icon.female {
  background: #f06292;
}

.member-gender-icon.unknown {
  background: #b8bec8;
  font-size: 11px;
}

.member-info-section {
  margin-top: 10px;
  background: #fff;
}

.member-info-row {
  min-height: 54px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #111;
  font-size: 17px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.member-info-row:last-child {
  border-bottom: 0;
}

.member-info-row-muted {
  color: rgba(0, 0, 0, 0.48);
}

.member-info-row-muted span:last-child {
  flex: 1 1 auto;
  color: rgba(0, 0, 0, 0.82);
  text-align: left;
  word-break: break-word;
}

.member-info-action-area {
  margin-top: 10px;
  background: #fff;
  padding-bottom: calc(6px + var(--safe-bottom));
}

.member-info-primary {
  width: 100%;
  min-height: 58px;
  border: 0;
  background: transparent;
  color: #576b95;
  font-size: 18px;
  font-weight: 700;
}

.member-info-primary:active {
  background: rgba(0, 0, 0, 0.04);
}

.member-info-status {
  padding: 18px 24px;
  color: rgba(0, 0, 0, 0.48);
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
}

.member-tile[role="button"],
.group-profile-item[role="button"] {
  cursor: pointer;
}

.modal-complaint {
  width: 100vw;
  max-width: none;
  min-height: var(--app-height);
  border-radius: 0;
  border: 0;
  box-shadow: none;
  padding: 0;
  background:
    linear-gradient(180deg, #ffffff 0, #ffffff 108px, #f7f7f8 108px, #f7f7f8 100%);
  display: flex;
  flex-direction: column;
}

.complaint-page-head {
  display: flex;
  align-items: center;
  min-height: calc(50px + var(--safe-top));
  padding: calc(8px + var(--safe-top)) 14px 8px;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.complaint-page-head-reason {
  justify-content: flex-start;
}

.complaint-page-head-form {
  justify-content: space-between;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}

.complaint-page-head-fill {
  flex: 1;
}

.complaint-nav-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(15, 23, 42, 0.82);
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.complaint-nav-btn:active {
  background: rgba(15, 23, 42, 0.06);
}

.complaint-nav-btn-back {
  font-size: 28px;
}

.complaint-page-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.2px;
}

.complaint-page-body {
  flex: 1;
  min-height: 0;
}

.complaint-page-body-reason {
  display: flex;
  flex-direction: column;
  padding: 8px 0 calc(22px + var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.complaint-page-body-form {
  padding: 10px 14px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.complaint-tip {
  margin: 0;
  padding: 6px 16px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.42);
}

.complaint-reason-list {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.complaint-reason-item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 19px 16px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
}

.complaint-reason-item:active {
  background: rgba(15, 23, 42, 0.04);
}

.complaint-reason-item:last-child {
  border-bottom: 0;
}

.complaint-reason-label {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
  color: #111827;
}

.complaint-reason-arrow {
  font-size: 24px;
  color: rgba(148, 163, 184, 0.92);
}

.complaint-notice-link {
  margin: auto auto 0;
  padding: 16px 12px 0;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
}

.complaint-notice-link:active {
  opacity: 0.72;
}

.complaint-field-block {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.complaint-field-block label {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.72);
}

.complaint-selected-reason {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(250, 204, 21, 0.26);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf4 0%, #fff8e7 100%);
  font-weight: 700;
  color: #92400e;
}

.complaint-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.complaint-evidence-item,
.complaint-evidence-add {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.complaint-evidence-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.complaint-evidence-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 16px;
}

.complaint-evidence-add {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: rgba(148, 163, 184, 0.86);
  cursor: pointer;
}

.complaint-field-hint {
  margin-top: 10px;
  color: rgba(15, 23, 42, 0.42);
}

.complaint-field-block textarea {
  min-height: 146px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #fcfcfd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.complaint-count {
  margin-top: 10px;
  text-align: right;
  color: rgba(15, 23, 42, 0.42);
}

.complaint-form-footer {
  position: sticky;
  bottom: 0;
  padding: 10px 14px calc(14px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(247, 247, 248, 0) 0%, #f7f7f8 24%, #f7f7f8 100%);
}

.complaint-submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(34, 197, 94, 0.16);
}

.requests-body {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--wechat-bg);
}

.request-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--wechat-panel);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.request-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* 已添加的好友：点整行直接进入单聊 */
.request-item.is-openable {
  cursor: pointer;
}

.request-item.is-openable:active {
  background: #f2f2f2;
}

/* 右侧「已添加」是禁用按钮，浏览器不会把点它的点击交给整行；让点击穿透到行上。 */
.request-item.is-openable .request-actions .btn:disabled {
  pointer-events: none;
}

@media (hover: hover) {
  .request-item.is-openable:hover {
    background: #f5f5f5;
  }
}

.request-text {
  min-width: 0;
}

.request-name {
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--wechat-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.request-actions {
  display: inline-flex;
  gap: 8px;
  flex: 0 0 auto;
}

.request-actions .btn {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.media-image-wrap {
  position: relative;
  display: inline-block;
  max-width: min(248px, 66vw);
  vertical-align: top;
}

.media-image {
  display: block;
  max-width: min(248px, 66vw);
  max-height: 320px;
  border-radius: 8px;
  object-fit: cover;
  cursor: zoom-in;
}

/* 单张长图从顶部显示；预览页保留原图比例和纵向拖动。 */
.media-image-wrap--tall { width: min(180px, 50vw); }
.media-image-wrap--tall .media-image { width: 100%; height: 240px; object-position: top center; }
.image-group .media-image-wrap--tall .media-image { height: auto; }

.image-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-width: min(260px, 70vw);
}

.image-group .media-image-wrap,
.image-group .media-image {
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
}

.media-file-card {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: min(270px, 72vw);
}

/* Portrait clips must not shrink to 80px under the inherited max-height:180px.
   Keep the timeline on its own full-width row, outside native shadow controls. */
.chat-video-player {
  width: min(320px, 64vw);
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #121b18;
  color: #fff;
  word-break: normal;
}
.chat-video-player .media-video,
.chat-video-player .forward-record-video {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 120px;
  max-height: 360px;
  object-fit: contain;
  background: #0b100e;
  border-radius: 0;
}
.chat-video-controls { padding: 0 8px 4px; }
.chat-video-seek {
  display: block;
  width: 100%;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  touch-action: none;
  accent-color: #9de0ad;
}
.chat-video-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 9px; background: linear-gradient(to right, #9de0ad var(--played, 0%), #53605b var(--played, 0%)); }
.chat-video-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; margin-top: -5px; background: #fff; border: 0; }
.chat-video-seek::-moz-range-track { height: 4px; background: #53605b; border-radius: 9px; }
.chat-video-seek::-moz-range-progress { height: 4px; background: #9de0ad; }
.chat-video-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.chat-video-toolbar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.chat-video-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.chat-video-toolbar button:hover { background: rgba(255,255,255,.12); }
.chat-video-toolbar svg { width: 20px; height: 20px; }
.chat-video-time { flex: 1; min-width: 0; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; }
.chat-video-status { padding: 5px 4px; font-size: 12px; line-height: 1.5; color: #e0e9e2; }
.chat-video-status a { color: #b7e6c0; text-decoration: underline; }
.chat-video-player [hidden] { display: none; }
.chat-video-player :focus-visible { outline: 2px solid #9de0ad; outline-offset: -2px; }
.chat-video-player:fullscreen { width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
.chat-video-player:fullscreen video { flex: 1; min-height: 0; max-height: none; height: 0; }
.chat-video-player:fullscreen .chat-video-controls { flex: 0 0 auto; padding: 0 20px calc(8px + env(safe-area-inset-bottom)); }
@media (max-width: 359px) {
  .chat-video-toolbar button { width: 30px; flex-basis: 30px; padding: 6px; }
  .chat-video-time { font-size: 10px; }
}

.media-file {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  background: #fff;
  color: #1f2329;
  text-decoration: none;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.message.me .media-file {
  background: #fff;
}

/* PC 基础样式会通过 ::before 自动补一个回形针；移动端卡片右侧已有类型角标。 */
.media-file::before {
  content: none;
}

.media-file-icon {
  display: none;
}

.media-file-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 参考微信：文件名最多两行、按字符折行，超出省略；大小灰字在下一行。 */
.media-file-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: #1f2329;
}

.media-file-meta {
  min-height: 14px;
  font-size: 12px;
  line-height: 1.2;
  color: #8a9199;
}

.media-file-badge {
  flex: 0 0 auto;
  width: 38px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background: #9aa4ad;
}

.media-file-badge-pdf { background: #e5473f; }
.media-file-badge-doc { background: #3d7ff3; }
.media-file-badge-xls { background: #2fb56a; }
.media-file-badge-ppt { background: #f0873a; }
.media-file-badge-txt { background: #8f9aa6; }
.media-file-badge-zip { background: #8e6fd8; }
.media-file-badge-other { background: #c4cbd2; }

.message.action-selected {
  position: relative;
  border-radius: 10px;
  background: rgba(7, 193, 96, 0.16);
}

.message.action-selected .avatar {
  box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.34);
}

.message.action-selected .bubble {
  outline: 2px solid rgba(7, 193, 96, 0.42);
  outline-offset: 2px;
}

.message-action-menu {
  position: fixed;
  z-index: 3300;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  min-width: 0;
  max-width: calc(100vw - 20px);
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: #2c2c2c;
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transform-origin: var(--action-arrow-x, 50%) 100%;
  animation: message-action-menu-in 120ms ease-out;
}

.message-action-menu.below {
  transform-origin: var(--action-arrow-x, 50%) 0;
}

@keyframes message-action-menu-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

.message-action-menu.hidden {
  display: none;
}

.message-action-menu::after {
  content: "";
  position: absolute;
  left: var(--action-arrow-x, 50%);
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #2c2c2c;
  transform: translateX(-50%) rotate(45deg);
}

.message-action-menu.below::after {
  top: -6px;
  bottom: auto;
}

.message-action-menu.floating::after {
  display: none;
}

.message-action-btn {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: var(--action-item-width, 84px);
  flex: 0 0 var(--action-item-width, 84px);
  padding: 7px 2px 6px;
  min-height: 58px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.message-action-btn:hover,
.message-action-btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.message-action-btn:active {
  background: rgba(255, 255, 255, 0.16);
}

.message-action-label {
  line-height: 1.15;
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: center;
}

.message-action-icon {
  font-size: 21px;
  line-height: 1;
}

/* 群聊头像右键 @：白色小菜单贴着光标出现（对齐微信电脑版）。 */
.avatar-mention-menu {
  position: fixed;
  z-index: 3300;
  box-sizing: border-box;
  min-width: 160px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05);
  transform-origin: 0 0;
  animation: avatar-mention-menu-in 110ms ease-out;
}

.avatar-mention-menu.hidden {
  display: none;
}

@keyframes avatar-mention-menu-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

.avatar-mention-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #1f1f1f;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.avatar-mention-item:hover,
.avatar-mention-item:focus-visible {
  background: #f2f3f5;
  outline: none;
}

.avatar-mention-item:active {
  background: #e8e9eb;
}

.avatar-mention-at {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
}

.avatar-mention-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 长按头像用于 @：屏蔽 iOS 图片长按菜单与文字选择。 */
#messages .message-avatar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-mention-menu { animation: none; }
}

/* 窄屏与 App 长按菜单一致：紧凑按钮，六个常用操作一行放下。 */
.message-action-menu.compact .message-action-btn {
  min-height: 54px;
  padding: 6px 1px 5px;
  gap: 4px;
  font-size: 12px;
}

.message-action-menu.compact .message-action-icon {
  font-size: 19px;
}

@media (prefers-reduced-motion: reduce) {
  .message-action-menu { animation: none; }
}

.media-preview {
  position: fixed;
  inset: 0;
  z-index: 3200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 图片只在顶部按钮与底部工具栏之间的安全区内显示，缩放/旋转后也不会盖住关闭按钮。 */
  padding: calc(64px + var(--safe-top)) 72px calc(96px + var(--safe-bottom));
}

.media-preview.hidden {
  display: none;
}

.media-preview-stage {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.media-preview-img {
  display: block;
  max-width: none;
  max-height: none;
  flex: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.media-preview-close {
  position: fixed;
  z-index: 2;
  top: calc(12px + var(--safe-top));
  left: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.media-preview-actions {
  position: fixed;
  z-index: 2;
  left: 12px;
  right: 12px;
  bottom: calc(24px + var(--safe-bottom));
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  pointer-events: none;
}


.invite-qr-recognize {
  display: block;
  width: 100%;
  margin-top: 16px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.invite-qr-recognize[hidden] { display: none !important; }
.modal-invite-qr-save .invite-qr-recognize {
  margin: 12px 0 4px;
}

.media-preview-qr {
  position: fixed;
  z-index: 3;
  left: 16px;
  right: 16px;
  bottom: calc(86px + var(--safe-bottom));
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.media-preview-qr[hidden] { display: none !important; }
.media-preview.has-image-qr {
  padding-bottom: calc(156px + var(--safe-bottom));
}

.media-preview-action {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.media-preview-close svg,
.media-preview-action svg,
.media-preview-nav svg {
  display: block;
  pointer-events: none;
}

.media-preview-close:hover,
.media-preview-action:hover:not(:disabled),
.media-preview-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.26);
}

.media-preview-counter {
  position: fixed;
  z-index: 2;
  top: calc(22px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.media-preview-counter[hidden] { display: none; }
.media-preview-nav {
  position: fixed;
  z-index: 2;
  top: 50%;
  width: 44px;
  height: 56px;
  margin-top: -28px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.media-preview-nav.previous { left: 14px; }
.media-preview-nav.next { right: 14px; }
.media-preview-nav[hidden] { display: none; }
.media-preview button:disabled { opacity: .3; cursor: default; }
.media-preview button:focus-visible { outline: 2px solid #d4c27a; outline-offset: 2px; }
.media-preview-stage.zoomed { cursor: grab; }
.media-preview-stage.zoomed:active { cursor: grabbing; }
.media-preview-error { color: rgba(255, 255, 255, 0.72); text-align: center; font-size: 14px; }
/* 切换图片时淡入；缩放时在中央短暂显示比例，确认缩放已生效。 */
.media-preview-img { animation: media-preview-in 160ms ease-out; }
@keyframes media-preview-in { from { opacity: 0; } to { opacity: 1; } }
.media-preview-zoom {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.media-preview-zoom.visible { opacity: 1; }

@media (max-width: 640px) {
  .media-preview { padding-left: 0; padding-right: 0; }
  .media-preview-nav { width: 36px; height: 48px; margin-top: -24px; background: rgba(0, 0, 0, 0.38); }
  .media-preview-nav.previous { left: 6px; }
  .media-preview-nav.next { right: 6px; }
  .media-preview-actions { gap: 12px; }
}

/* 触屏与微信一致：左右滑动翻页、单击关闭，不显示左右箭头。 */
@media (hover: none) and (pointer: coarse) {
  .media-preview-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .media-preview-img { transition: none !important; animation: none; }
  .media-preview-zoom { transition: none; }
}

.document-preview { position: fixed; inset: 0; z-index: 3300; background: #f4f5f6; display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.document-preview header { display: flex; align-items: center; gap: 8px; background: #fff; padding: 12px; flex-wrap: wrap; }
.document-preview header strong { flex: 1; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-preview button { border: 1px solid #ddd; border-radius: 7px; background: #fff; padding: 9px 12px; color: #333; font: inherit; cursor: pointer; }
.document-preview iframe { flex: 1; min-height: 0; width: 100%; border: 0; }
.document-preview-note { color: #777; margin: 8px 12px; font-size: 12px; }
.document-preview-status { padding: 20px; text-align: center; color: #666; }

/* 撤回提示：灰色说明 + 同字号的“重新编辑”，点击区域向外扩展，排版不变。 */
.message[data-status="recalled"] { align-self: center; justify-content: center; max-width: 100%; }
.message[data-status="recalled"] > .avatar, .message[data-status="recalled"] .bubble-name { display: none; }
#messages .message[data-status="recalled"] .bubble { background: transparent; border: 0; box-shadow: none; color: #999; text-align: center; padding: 2px 8px; }
#messages .message[data-status="recalled"] .bubble-body { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 6px; font-size: 13px; line-height: 1.5; }
#messages .message[data-status="recalled"] .msg-status-placeholder { color: #999; font-style: normal; font-size: 13px; padding: 0; }
.message-reedit { position: relative; display: inline; border: 0; background: transparent; color: #576b95; cursor: pointer; margin: 0; padding: 0; font: inherit; font-size: 13px; line-height: inherit; }
.message-reedit::before { content: ""; position: absolute; inset: -12px -8px; }
.message-reedit:hover { text-decoration: underline; text-underline-offset: 3px; }
.message-reedit:focus-visible { outline: 2px solid rgba(87, 107, 149, 0.45); outline-offset: 3px; border-radius: 3px; }

/* 微信式确认框：替代浏览器原生 confirm。 */
.chat-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
  animation: chat-confirm-fade 140ms ease-out;
}
.chat-confirm {
  width: min(320px, 100%);
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  animation: chat-confirm-pop 160ms ease-out;
}
.chat-confirm-message {
  margin: 0;
  padding: 28px 22px 24px;
  font-size: 16px;
  line-height: 1.55;
  text-align: center;
  word-break: break-word;
  text-wrap: balance;
}
.chat-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.chat-confirm-actions button {
  min-height: 52px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.chat-confirm-actions button + button { border-left: 1px solid rgba(0, 0, 0, 0.08); }
.chat-confirm-cancel { color: #1f1f1f; }
.chat-confirm-ok { color: #576b95; font-weight: 600; }
.chat-confirm-actions button:hover { background: rgba(0, 0, 0, 0.03); }
.chat-confirm-actions button:active { background: rgba(0, 0, 0, 0.06); }
.chat-confirm-actions button:focus-visible { outline: 2px solid rgba(87, 107, 149, 0.5); outline-offset: -4px; }
@keyframes chat-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chat-confirm-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chat-confirm-backdrop, .chat-confirm { animation: none; }
}

/* 提示条需浮在图片查看、文件预览和操作菜单之上；纯文字提示不拦截点击。 */
#toast {
  z-index: 3500;
  pointer-events: none;
}

.modal-forward {
  width: 100%;
  max-width: none;
  height: var(--app-height);
  max-height: var(--app-height);
  border-radius: 0;
  padding: 0;
  background: #f5f6f7;
  overflow: hidden;
}

.forward-head {
  height: calc(52px + var(--safe-top));
  padding: var(--safe-top) 14px 0;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  background: #f5f6f7;
  color: #111827;
}

.forward-title {
  text-align: center;
  font-size: 17px;
  font-weight: 850;
}

.forward-close,
.forward-multi {
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 15px;
  padding: 8px 0;
}

.forward-close {
  text-align: left;
}

.forward-multi {
  text-align: right;
  color: #16a34a;
}

.forward-body {
  height: calc(var(--app-height) - 52px - var(--safe-top));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(18px + var(--safe-bottom));
}

.forward-search {
  margin: 8px 12px 12px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  color: rgba(17, 24, 39, 0.44);
}

.forward-search input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}

.forward-section {
  background: #fff;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 10px;
}

.forward-section-title {
  padding: 11px 14px 8px;
  color: rgba(17, 24, 39, 0.52);
  font-size: 13px;
  font-weight: 700;
}

.forward-recent-list {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 14px 14px;
}

.forward-recent-item,
.forward-chat-row {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.forward-recent-item {
  width: 58px;
  flex: 0 0 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.forward-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.forward-recent-name {
  width: 58px;
  text-align: center;
  font-size: 12px;
  color: rgba(17, 24, 39, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forward-chat-row {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.forward-chat-main {
  min-width: 0;
  flex: 1 1 auto;
}

.forward-chat-title {
  font-size: 15px;
  font-weight: 820;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forward-chat-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(17, 24, 39, 0.48);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forward-current {
  margin-left: 5px;
  color: rgba(17, 24, 39, 0.38);
  font-size: 12px;
  font-weight: 700;
}

.forward-empty {
  padding: 18px 14px;
  color: rgba(17, 24, 39, 0.48);
  font-size: 14px;
}

@media (max-width: 360px) {
  .sidebar-header {
    gap: 8px;
  }

  .sidebar-header-tools {
    gap: 8px;
  }

  .lang-select {
    padding: 0 8px;
  }

  .lang-select select {
    min-width: 44px;
    font-size: 12px;
  }

  .group-profile-grid {
    gap: 8px 6px;
  }

  .sidebar-footer {
    align-items: center;
  }

  .sidebar-footer-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .sidebar-pagination {
    gap: 8px;
    padding: 8px 12px;
  }

  .sidebar-pagination-summary {
    font-size: 11px;
  }
}

/* ---- Multi-select forwarding: circular checkbox on the left -------- */
.messages.select-mode .message {
  position: relative;
  cursor: pointer;
  padding-left: 34px;
}
.messages.select-mode .message .bubble,
.messages.select-mode .message .avatar,
.messages.select-mode .message video,
.messages.select-mode .message audio,
.messages.select-mode .message .voice-msg {
  pointer-events: none;
}
.messages.select-mode .message::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 1.5px solid #c8c8c8;
  border-radius: 50%;
  background: #fff;
}
.messages.select-mode .message.msg-selected {
  border-radius: 0;
  background: transparent;
}
.messages.select-mode .message.msg-selected .bubble {
  outline: none;
  outline-offset: 0;
}
.messages.select-mode .message.msg-selected::before {
  border-color: #07c160;
  background: #07c160;
}
.messages.select-mode .message.msg-selected::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.select-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3400;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.select-toolbar.hidden {
  display: none;
}
.select-toolbar button {
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
}
.select-toolbar .select-cancel,
.select-toolbar .select-all {
  background: #f2f2f2;
  color: #333;
}
.select-toolbar .select-count {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #555;
}
.select-toolbar .select-forward {
  background: #07c160;
  color: #fff;
  font-weight: 600;
}
.select-toolbar .select-forward:disabled {
  background: #b7e6c8;
  cursor: not-allowed;
}
.select-toolbar .select-delete {
  background: #ff3b30;
  color: #fff;
  font-weight: 600;
}
.select-toolbar .select-delete:disabled {
  background: #ffb3b0;
  cursor: not-allowed;
}
.select-toolbar .select-delete.hidden,
.select-toolbar .select-forward.hidden {
  display: none;
}

.forward-mode-sheet {
  position: fixed;
  inset: 0;
  z-index: 3600;
}

.forward-mode-sheet.hidden {
  display: none;
}

.forward-mode-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
}

.forward-mode-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #f7f7f7;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.forward-mode-option,
.forward-mode-cancel {
  width: 100%;
  height: 58px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  color: #111827;
  font-size: 18px;
  font-weight: 500;
}

.forward-mode-cancel {
  margin-top: 8px;
  border-bottom: 0;
}

.modal-forward-confirm {
  width: min(90vw, 360px);
  max-width: 360px;
  border-radius: 10px;
  padding: 18px 22px 20px;
  background: #f7f7f7;
  color: #111827;
  overflow: hidden;
}

.forward-confirm-title {
  font-size: 15px;
  font-weight: 750;
  margin-bottom: 12px;
}

.forward-confirm-target {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.forward-confirm-target-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 800;
}

.forward-confirm-arrow {
  color: rgba(17, 24, 39, 0.34);
  font-size: 26px;
}

.forward-confirm-preview {
  margin: 12px 0 16px;
  display: flex;
  justify-content: center;
}

.forward-confirm-list {
  width: 100%;
  display: grid;
  gap: 8px;
}

.forward-confirm-line {
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(17, 24, 39, 0.72);
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forward-confirm-line.muted {
  color: rgba(17, 24, 39, 0.48);
}

.forward-confirm-media-thumb {
  width: 82px;
  height: 82px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.forward-confirm-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.forward-confirm-card-preview .forward-record-card {
  width: 240px;
  transform: scale(0.92);
  transform-origin: center;
}

.forward-confirm-compose {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
}

.forward-confirm-compose textarea {
  min-width: 0;
  flex: 1 1 auto;
  max-height: 110px;
  border: 0;
  outline: 0;
  resize: none;
  font: inherit;
  background: transparent;
  line-height: 1.35;
}

.forward-confirm-emoji {
  width: 30px;
  height: 30px;
  border: 2px solid #111827;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #111827;
}

.forward-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.forward-confirm-actions button {
  height: 48px;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 750;
}

.forward-confirm-cancel {
  background: #e9e9e9;
  color: #111827;
}

.forward-confirm-send {
  background: #07c160;
  color: #fff;
}

.forward-confirm-send:disabled {
  opacity: 0.65;
}

.forward-record-card {
  width: min(260px, 72vw);
  display: block;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  text-align: left;
  padding: 12px 12px 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.message.me .forward-record-card {
  background: rgba(255, 255, 255, 0.86);
}

.forward-record-card-title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 780;
  margin-bottom: 8px;
}

.forward-record-card-lines {
  display: grid;
  gap: 3px;
  color: rgba(17, 24, 39, 0.58);
  font-size: 13px;
  line-height: 1.25;
}

.forward-record-card-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.forward-record-card-footer {
  margin-top: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: rgba(17, 24, 39, 0.45);
  font-size: 12px;
}

.modal-forward-record {
  width: 100%;
  max-width: none;
  height: var(--app-height);
  max-height: var(--app-height);
  border-radius: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.forward-record-head {
  height: calc(58px + var(--safe-top));
  padding: var(--safe-top) 12px 0;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.forward-record-back {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 34px;
  line-height: 1;
}

.forward-record-head-main {
  min-width: 0;
  text-align: center;
}

.forward-record-page-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 850;
}

.forward-record-date {
  margin-top: 2px;
  color: rgba(17, 24, 39, 0.52);
  font-size: 12px;
}

.forward-record-list {
  height: calc(var(--app-height) - 58px - var(--safe-top));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 22px calc(22px + var(--safe-bottom));
  background: #fff;
}

.forward-record-entry {
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.forward-record-entry-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  color: rgba(17, 24, 39, 0.58);
  font-size: 14px;
  margin-bottom: 8px;
}

.forward-record-entry-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forward-record-entry-head time {
  color: rgba(17, 24, 39, 0.38);
}

.forward-record-text {
  color: #111827;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.forward-record-image {
  display: block;
  max-width: min(210px, 58vw);
  max-height: 320px;
  object-fit: contain;
  border-radius: 4px;
  cursor: zoom-in;
}

.forward-record-audio {
  display: block;
  width: min(320px, 76vw);
  max-width: 100%;
}

.forward-record-video {
  display: block;
  width: min(320px, 76vw);
  max-width: 100%;
  max-height: 420px;
  border-radius: 8px;
  background: #111;
}

.forward-record-file {
  max-width: 100%;
  width: min(268px, 100%);
}

.forward-record-media {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f5f6f7;
  color: #111827;
  font-size: 14px;
}

.forward-record-media > span:first-child {
  color: #07c160;
  font-weight: 800;
}

/* ---- WAP group creation / QR additions ------------------------------ */
#modalCreateGroup {
  width: min(430px, calc(100vw - 28px));
  top: calc(var(--app-top, 0px) + var(--app-height) * 0.5);
  max-height: calc(var(--app-height) - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
}

#modalCreateGroup > .row.space-between:first-child {
  flex: 0 0 auto;
  margin: 0;
  padding: calc(12px + var(--safe-top)) 14px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.create-group-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 12px;
  padding: 14px;
}

#modalCreateGroup > .row.space-between:first-child h3 {
  margin: 0;
  font-size: 17px;
}

.create-group-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 0;
}

.group-avatar-picker {
  flex: 0 0 auto;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(31, 35, 41, 0.72);
  font-size: 12px;
  cursor: pointer;
}

/* Caption wraps inside the avatar column so long locales (EN/RU) never spill
   over the avatar tile or the name field. */
.group-avatar-picker .small {
  width: 100%;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.create-group-name {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.create-group-name label {
  font-size: 12px;
  color: var(--muted);
}

.create-group-name input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
  background: #fff;
}

.create-group-name input:focus {
  border-color: rgba(196, 149, 106, 0.55);
}

/* Allow-recommend toggle, visually separated from the avatar/name block. */
.create-group-allow {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.group-avatar-preview {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background: #f3f4f6;
  border: 1px dashed rgba(15, 23, 42, 0.24);
  color: rgba(15, 23, 42, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  overflow: hidden;
}

.group-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-group-members {
  margin-top: 14px;
}

/* Combined box: selected friends (avatars only) + search input flow together,
   wrapping onto new lines — like the WeChat "发起群聊" picker. */
.create-group-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
}

.create-group-picker:focus-within {
  border-color: rgba(196, 149, 106, 0.55);
}

.create-selected-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.create-selected-strip:empty {
  display: none;
}

.create-selected-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.create-selected-avatar.locked {
  cursor: default;
}

.create-selected-avatar .avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.create-selected-avatar b {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.6);
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 0 0 1.5px #fff;
}

.avatar.tiny {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.create-group-search {
  flex: 1 1 120px;
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
}

.create-group-search-ico {
  flex: 0 0 auto;
  color: rgba(15, 23, 42, 0.4);
  font-size: 13px;
}

.create-group-search input {
  min-width: 0;
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
}

.create-group-friend-list {
  max-height: min(42vh, 360px);
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

.create-group-friend-list .invite-row {
  min-height: 56px;
}

.create-group-pager {
  margin-top: 8px;
}

/* 弹层打开时收起底部导航：导航是 fixed 且 z-index(100) 高于弹层(60)，
   不收起会盖住弹层底部固定的主按钮。 */
body.modal-open .wl-chat-nav {
  display: none !important;
}

/* 短提示只有文字，不应截获点击，避免上传失败时挡住弹窗的关闭按钮。 */
body.modal-open #toast {
  pointer-events: none;
}

.create-group-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
  padding: 10px 14px calc(12px + var(--safe-bottom));
  background: #fff;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.025);
}

/* 参考微信「完成(4)」：主按钮通栏、常驻底部，随选择人数更新。 */
.create-group-actions .btn.primary {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
}

.group-avatar-edit {
  border: 0;
  padding: 0;
  overflow: hidden;
}

.group-avatar-edit:not(:disabled) {
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.18);
}

.group-avatar-edit:disabled {
  cursor: default;
  opacity: 1;
}

.invite-scan-btn,
.group-qr-scan,
.group-friend-greeting-send {
  margin-top: 10px;
  width: 100%;
}

.modal-group-friend-greeting textarea {
  min-height: 96px;
}

.message .message-avatar {
  border: 0;
  padding: 0;
  flex: 0 0 auto;
}

.friend-info-avatar,
.member-info-avatar,
#friendInfoAvatar,
#groupMemberInfoAvatar {
  cursor: pointer;
}

@media (max-width: 420px) {
  #modalCreateGroup {
    top: var(--app-top, 0px);
    transform: translateX(-50%);
    width: 100vw;
    max-height: var(--app-height);
    height: var(--app-height);
    border-radius: 0;
  }

  .create-group-top {
    gap: 12px;
  }

  .group-avatar-picker {
    width: 68px;
  }

  .group-avatar-preview {
    width: 56px;
    height: 56px;
  }

  .create-group-friend-list {
    max-height: 34vh;
  }
}


/* 撤回/删除消息占位样式 */
.msg-status-placeholder {
  display: inline-block;
  font-style: italic;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  padding: 2px 0;
  user-select: none;
}

.message.me .msg-status-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.quote-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f7f7f7;
  border-top: 1px solid #e5e5e5;
}
.quote-bar.hidden { display: none; }
.quote-line { width: 3px; height: 30px; border-radius: 3px; background: #22c55e; }
.quote-body { min-width: 0; flex: 1; }
.quote-title { font-size: 12px; color: #6b7280; line-height: 16px; }
.quote-content { font-size: 13px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote-close { border: none; background: transparent; font-size: 20px; line-height: 1; color: #6b7280; padding: 4px 8px; }

.quote-preview-msg {
  display: flex;
  gap: 7px;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.quote-preview-line { width: 3px; border-radius: 3px; background: #d4c27a; flex-shrink: 0; }
.quote-preview-body { min-width: 0; flex: 1; }
.quote-preview-sender { font-size: 12px; color: #d4c27a; line-height: 16px; }
.quote-preview-text { font-size: 13px; color: #6b7280; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 引用图片：昵称与缩略图并排一行（对齐微信）。缩略图给固定尺寸 + object-fit:cover，
   免得长图把引用块撑成一条竖带。 */
.quote-preview-msg.has-thumb .quote-preview-body {
  display: flex;
  align-items: center;
  gap: 6px;
}
.quote-preview-msg.has-thumb .quote-preview-sender {
  flex-shrink: 0;
}
.quote-preview-thumb {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
}
/* 自己发的气泡是绿底，引用块原来的浅金字（#d4c27a）压上去几乎看不清。
   给它一层浅白底 + 深灰字，两种气泡下都读得动。 */
.message.me .quote-preview-msg {
  background: rgba(255, 255, 255, 0.62);
}
.message.me .quote-preview-sender,
.message.me .quote-preview-text {
  color: #4b5563;
}
.message.me .quote-preview-line {
  background: #16a34a;
}

/* 表情消息：不套气泡底色、不加内边距，像微信那样直接贴一张图。
   气泡由 .message[data-media-type="sticker"] 整体去背景，避免出现
   "绿色小方块里嵌一张透明 GIF"的怪样子。 */
.message[data-media-type="sticker"] .bubble {
  padding: 0;
  background: transparent;
  box-shadow: none;
  /* 自己发的媒体气泡带一圈绿描边（图片/视频用得着），但表情按微信惯例是
     "光一张图"，加框反而像贴了张卡片。 */
  border: 0;
}
.message[data-media-type="sticker"] .bubble::after {
  display: none;
}
.sticker-image {
  display: block;
  width: auto;
  max-width: 132px;
  max-height: 132px;
  border-radius: 6px;
}

.quote-content-sender { color: #6b7280; }
.quote-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  vertical-align: middle;
  background: rgba(0, 0, 0, 0.08);
}

.bubble-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0 2px 4px;
  color: rgba(17, 24, 39, 0.56);
  font-size: 12px;
  line-height: 16px;
}

.bubble-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble-role-tag,
.bubble-ai-tag {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(212, 194, 122, 0.18);
  color: #8c742d;
  font-size: 10px;
  line-height: 14px;
}

.bubble-role-tag.role-owner {
  background: rgba(250, 173, 20, 0.18);
  color: #b76e00;
}

.bubble-role-tag.role-admin {
  background: rgba(7, 193, 96, 0.12);
  color: #078f4a;
}

.bubble-ai-tag {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  font-weight: 700;
}

/* ===== @ mention picker ===== */
.mention-sheet {
  position: fixed;
  inset: 0;
  z-index: 3700;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mention-sheet.hidden {
  display: none;
}

.mention-sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
}

.mention-sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 66vh;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mention-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.mention-sheet-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(17, 24, 39, 0.72);
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mention-sheet-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-sheet-mode {
  border: 0;
  background: transparent;
  color: #0f766e;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 4px;
  white-space: nowrap;
}

.mention-sheet-search {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.mention-sheet-input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #f7f7f7;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

.mention-sheet-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 8px 16px 16px;
}

.mention-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.mention-sheet-item:first-child {
  margin-top: 0;
}

.mention-sheet-item:active {
  background: rgba(0, 0, 0, 0.04);
}

.mention-sheet-all {
  color: #0f766e;
  font-weight: 700;
}

.mention-sheet-all .mention-sheet-avatar {
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
  font-size: 16px;
  font-weight: 800;
}

.mention-sheet-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(17, 24, 39, 0.55);
  font-size: 14px;
  font-weight: 700;
}

.mention-sheet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mention-sheet-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-sheet-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  position: relative;
}

.mention-sheet-check.is-checked {
  background: #0f766e;
  border-color: #0f766e;
}

.mention-sheet-check.is-checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mention-sheet-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  flex-shrink: 0;
}

.mention-sheet-confirm.hidden {
  display: none;
}

.mention-sheet-count {
  font-size: 14px;
  color: rgba(17, 24, 39, 0.62);
}

.mention-sheet-confirm-btn {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #d4c27a, #bfa85f);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 22px;
  box-shadow: 0 4px 14px rgba(212, 194, 122, 0.32);
}

.mention-sheet-empty {
  padding: 24px 0;
  text-align: center;
  color: rgba(17, 24, 39, 0.45);
  font-size: 14px;
}

/* @ mention bubble tint */
.bubble.mention {
  background: #fff9c4;
  border-color: #fde047;
}

/* Mention highlight fallback */
/* @提及：微信/主流 IM 的做法是纯色文字，不加底色。
   原来的荧光黄底 #fde047 在浅绿气泡（自己发的）上尤其刺眼，
   一条消息里 @ 多个人时整行像被荧光笔涂过。改为品牌绿加粗，
   保留极轻的圆角背景仅用于提升可点性边界。 */
.bubble-body .mention-highlight {
  color: #07c160;
  font-weight: 600;
  background-color: rgba(7, 193, 96, 0.1);
  border-radius: 3px;
  padding: 0 3px;
}

/* 对方气泡是白底、自己气泡是浅绿底；在浅绿底上把背景去掉，
   否则绿上加绿会糊成一片。 */
.message.me .bubble-body .mention-highlight {
  color: #05803f;
  background-color: transparent;
  padding: 0;
}

/* ===== LiveKit one-to-one calls ===== */
.call-type-sheet {
  position: fixed;
  inset: 0;
  z-index: 18000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.call-type-sheet.hidden {
  display: none;
}

.call-sheet-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.46);
}

.call-sheet-panel {
  position: relative;
  width: min(100%, 540px);
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0;
  background: #f5f5f5;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.call-sheet-title {
  padding: 8px 16px 12px;
  text-align: center;
  color: rgba(0, 0, 0, 0.46);
  font-size: 13px;
}

.call-sheet-option,
.call-sheet-cancel {
  width: 100%;
  min-height: 58px;
  border: 0;
  background: #fff;
  color: #111;
  font-size: 17px;
}

.call-sheet-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.call-sheet-option:first-of-type {
  border-radius: 12px 12px 0 0;
}

.call-sheet-option:nth-of-type(2) {
  border-radius: 0 0 12px 12px;
}

.call-sheet-cancel {
  margin-top: 8px;
  border-radius: 12px;
  font-weight: 600;
}

.call-sheet-option:active,
.call-sheet-cancel:active {
  background: #ececec;
}

.call-sheet-option-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #07c160;
  font-size: 20px;
}

.call-sheet-option-icon svg,
.rtc-control-circle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rtc-call {
  --rtc-safe-top: env(safe-area-inset-top, 0px);
  --rtc-safe-bottom: env(safe-area-inset-bottom, 0px);
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: #fff;
  background: #1b1d20;
  isolation: isolate;
}

.rtc-call.hidden {
  display: none;
}

.rtc-call-backdrop {
  position: absolute;
  inset: -24px;
  z-index: -3;
  background-color: #25282c;
  background-position: center;
  background-size: cover;
  filter: blur(24px) brightness(0.42);
  transform: scale(1.12);
}

.rtc-call-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 12, 16, 0.28), rgba(9, 12, 16, 0.62));
}

.rtc-call-topbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 48px 1fr 48px 48px;
  align-items: center;
  min-height: calc(56px + var(--rtc-safe-top));
  padding: var(--rtc-safe-top) 12px 0;
}

.rtc-top-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.rtc-top-btn svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rtc-network {
  grid-column: 2;
  justify-self: center;
  padding: 4px 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.rtc-switch-camera {
  grid-column: 4;
  justify-self: end;
  font-size: 24px;
}

.rtc-invite-btn {
  grid-column: 3;
  justify-self: end;
}

.rtc-invite-btn svg {
  width: 27px;
  height: 27px;
  stroke-width: 2;
}

.call-invite-sheet {
  position: fixed;
  inset: 0;
  z-index: 22000;
  display: flex;
  flex-direction: column;
  color: #16181b;
  background: #f3f3f3;
}

.call-invite-sheet.hidden {
  display: none;
}

.call-invite-header {
  display: grid;
  grid-template-columns: 62px 1fr 72px;
  align-items: center;
  min-height: calc(55px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 10px 0;
  background: #ededed;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.call-invite-header h2 {
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 650;
}

.call-invite-back,
.call-invite-confirm {
  min-height: 38px;
  border: 0;
  background: transparent;
}

.call-invite-back {
  justify-self: start;
  color: #222;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
}

.call-invite-confirm {
  justify-self: end;
  border-radius: 5px;
  padding: 0 13px;
  color: #fff;
  background: #07c160;
  font-size: 14px;
}

.call-invite-confirm:disabled {
  color: rgba(255, 255, 255, 0.72);
  background: #9bd8b4;
}

.call-invite-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 12px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 7px;
  color: #8b8b8b;
  background: #fff;
}

.call-invite-search-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #222;
  background: transparent;
  font-size: 15px;
}

.call-invite-meta {
  padding: 7px 18px 8px;
  color: #8a8a8a;
  font-size: 13px;
}

.call-invite-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}

.call-invite-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 8px 17px;
  border: 0;
  color: #222;
  background: #fff;
  text-align: left;
}

.call-invite-row::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 77px;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  transform: scaleY(0.5);
}

.call-invite-row:disabled {
  opacity: 0.48;
}

.call-invite-avatar {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #9ca3aa;
  font-size: 18px;
  font-weight: 700;
}

.call-invite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-invite-person {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.call-invite-person strong,
.call-invite-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-invite-person strong {
  font-size: 16px;
  font-weight: 500;
}

.call-invite-person small {
  color: #999;
  font-size: 12px;
}

.call-invite-check {
  width: 23px;
  height: 23px;
  border: 1px solid #c8c8c8;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
}

.call-invite-row.is-selected .call-invite-check {
  border-color: #07c160;
  background: #07c160;
}

.call-invite-empty {
  padding: 72px 24px;
  color: #999;
  text-align: center;
  font-size: 14px;
}

.rtc-participant-grid {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(110px, 1fr);
  gap: 3px;
  padding: 8px 8px 12px;
  overflow-y: auto;
  /* 两三个人时格子只占屏幕上半截，下面空一大片。垂直居中好看得多。
     用 safe center：人一多需要滚动时退回顶部对齐，不会把第一行顶出可视区。 */
  align-content: safe center;
}

.rtc-participant-grid.hidden {
  display: none;
}

.rtc-participant-tile {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.11);
}

.rtc-participant-tile video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rtc-participant-avatar {
  width: clamp(54px, 16vw, 78px);
  height: clamp(54px, 16vw, 78px);
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-size: 25px;
  font-weight: 700;
}

.rtc-participant-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rtc-participant-shade {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.58));
  pointer-events: none;
}

.rtc-participant-name,
.rtc-participant-status {
  position: absolute;
  z-index: 3;
  bottom: 7px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.rtc-participant-name {
  left: 8px;
}

.rtc-participant-status {
  top: 7px;
  right: 7px;
  bottom: auto;
  border-radius: 999px;
  padding: 3px 7px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.3);
}

.rtc-call.is-multi-party .rtc-call-backdrop::after {
  background: linear-gradient(180deg, rgba(9, 12, 16, 0.38), rgba(9, 12, 16, 0.78));
}

.rtc-call.is-multi-party .rtc-active-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(66px, 1fr));
  gap: 4px;
  padding-right: 8px;
  padding-left: 8px;
}

.rtc-call.is-multi-party .rtc-active-actions.hidden {
  display: none;
}

.rtc-call.is-multi-party .rtc-active-actions #rtcMuteBtn { order: 1; }
.rtc-call.is-multi-party .rtc-active-actions #rtcSpeakerBtn { order: 2; }
.rtc-call.is-multi-party .rtc-active-actions #rtcCameraBtn { order: 3; }
.rtc-call.is-multi-party .rtc-active-actions #rtcHangupBtn { order: 4; }

.rtc-call.is-multi-party .rtc-control {
  min-width: 0;
  font-size: 11px;
}

.rtc-call.is-multi-party .rtc-control-circle {
  width: 56px;
  height: 56px;
}

.rtc-remote-media {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 430px) {
  .rtc-participant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rtc-video-stage {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #090b0d;
}

.rtc-video-stage.hidden {
  display: none;
}

.rtc-remote-video,
.rtc-video-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111417;
}

.rtc-video-placeholder {
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: brightness(0.62);
}

.rtc-remote-video {
  z-index: 1;
  background: transparent;
}

.rtc-local-video {
  position: absolute;
  z-index: 3;
  top: calc(72px + var(--rtc-safe-top));
  right: 14px;
  width: min(29vw, 132px);
  height: min(39vw, 176px);
  border-radius: 12px;
  object-fit: cover;
  background: #202328;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transform: scaleX(-1);
}

/* Before the peer publishes video, the already-authorized local camera is the
   main stage (matching the native/WeChat dialing screen). Once remote video is
   subscribed, it transitions to the familiar picture-in-picture layout. */
.rtc-call.is-video:not(.is-connected):not(.has-remote-video) .rtc-local-video:not(.hidden) {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

.rtc-call-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(92px, 18vh, 176px) 22px 16px;
  text-align: center;
}

.rtc-call.is-video .rtc-call-content {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 20px;
  text-align: left;
  pointer-events: none;
}

.rtc-peer-avatar {
  width: 106px;
  height: 106px;
  border-radius: 18px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.25);
  font-size: 36px;
  font-weight: 700;
}

.rtc-peer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rtc-call.is-video .rtc-peer-avatar {
  width: 88px;
  height: 88px;
  border-radius: 15px;
  font-size: 30px;
}

.rtc-call.is-video:not(.has-remote-video) .rtc-call-content {
  align-items: center;
  padding-top: clamp(68px, 12vh, 122px);
  text-align: center;
}

.rtc-call.is-video.has-remote-video .rtc-peer-avatar,
.rtc-call.is-video.has-remote-video .rtc-peer-name,
.rtc-call.is-video.has-remote-video .rtc-call-status {
  display: none;
}

.rtc-call.is-video.has-remote-video .rtc-call-content {
  align-items: center;
  padding-top: 18px;
  text-align: center;
}

.rtc-peer-name {
  max-width: 82vw;
  margin: 22px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 25px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.rtc-call.is-video .rtc-peer-name {
  margin: 16px 0 0;
  font-size: 20px;
}

.rtc-call-status,
.rtc-call-timer {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.rtc-call-timer {
  margin-top: 8px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.rtc-controls {
  position: relative;
  z-index: 5;
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 10px;
  width: 100%;
  padding: 14px 16px calc(34px + var(--rtc-safe-bottom));
}

.rtc-controls.hidden {
  display: none;
}

.rtc-control {
  min-width: 68px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}

.rtc-control-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.19);
  font-size: 26px;
  backdrop-filter: blur(14px);
  transition: transform 100ms ease, background 140ms ease, color 140ms ease;
}

.rtc-control-circle svg {
  width: 27px;
  height: 27px;
}

.rtc-route-circle {
  position: relative;
}

.rtc-route-icon-bluetooth,
.rtc-route-icon-phone {
  display: none;
}

.rtc-route-circle.route-bluetooth .rtc-route-icon-speaker,
.rtc-route-circle.route-earpiece .rtc-route-icon-speaker,
.rtc-route-circle.route-wired .rtc-route-icon-speaker,
.rtc-route-circle.route-system .rtc-route-icon-speaker {
  display: none;
}

.rtc-route-circle.route-bluetooth .rtc-route-icon-bluetooth {
  display: block;
}

.rtc-route-circle.route-earpiece .rtc-route-icon-phone,
.rtc-route-circle.route-wired .rtc-route-icon-phone,
.rtc-route-circle.route-system .rtc-route-icon-phone {
  display: block;
}

.rtc-route-badge {
  position: absolute;
  top: -4px;
  right: -7px;
  min-width: 25px;
  height: 18px;
  border: 2px solid rgba(20, 23, 27, 0.85);
  border-radius: 9px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #1677ff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

.rtc-route-badge.hidden {
  display: none;
}

.rtc-control:active .rtc-control-circle {
  transform: scale(0.92);
}

.rtc-control-circle.is-active {
  color: #121417;
  background: #fff;
}

.rtc-control-circle.rtc-danger {
  background: #f04444;
  transform: rotate(135deg);
}

.rtc-control:active .rtc-control-circle.rtc-danger {
  transform: rotate(135deg) scale(0.92);
}

.rtc-control-circle.rtc-accept {
  background: #07c160;
}

.rtc-audio-route-sheet {
  position: fixed;
  inset: 0;
  z-index: 23000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
}

.rtc-audio-route-sheet.hidden {
  display: none;
}

.rtc-audio-route-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(2px);
}

.rtc-audio-route-panel {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100dvh - 36px - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 24px;
  padding: 14px;
  color: #111;
  background: rgba(240, 240, 240, 0.9);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  display: flex;
  flex-direction: column;
}

.rtc-audio-route-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 13px;
}

.rtc-audio-route-header-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  background: rgba(255, 255, 255, 0.7);
}

.rtc-audio-route-header-icon svg,
.rtc-audio-route-option-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rtc-audio-route-header strong,
.rtc-audio-route-header small {
  display: block;
}

.rtc-audio-route-header strong {
  font-size: 18px;
  font-weight: 750;
}

.rtc-audio-route-header small {
  margin-top: 3px;
  color: rgba(17, 17, 17, 0.55);
  font-size: 12px;
  line-height: 1.35;
}

.rtc-audio-route-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rtc-playback-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  flex-shrink: 0;
  margin: 0 0 12px;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.rtc-playback-copy { min-width: 0; }
.rtc-playback-copy strong, .rtc-playback-copy small { display: block; }
.rtc-playback-copy strong { font-size: 15px; line-height: 1.4; }
.rtc-playback-copy small { margin-top: 4px; font-size: 12px; line-height: 1.4; color: #666; }
.rtc-playback-switch { flex: 0 0 44px; height: 26px; border-radius: 16px; background: #a8abb0; padding: 3px; }
.rtc-playback-switch::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.rtc-playback-toggle[aria-checked="true"] .rtc-playback-switch { background: #07c160; }
.rtc-playback-toggle[aria-checked="true"] .rtc-playback-switch::after { transform: translateX(18px); }
.rtc-playback-toggle:focus-visible { outline: 2px solid #078b47; outline-offset: 2px; }
.rtc-route-circle.is-playback-muted { opacity: .55; }

.rtc-audio-route-option {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: 18px;
  padding: 9px 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  color: #111;
  background: rgba(255, 255, 255, 0.54);
  text-align: left;
}

.rtc-audio-route-option:active {
  background: rgba(255, 255, 255, 0.8);
}

.rtc-audio-route-option.is-selected {
  color: #fff;
  background: rgba(41, 34, 30, 0.82);
}

.rtc-audio-route-option:disabled {
  opacity: 0.72;
}

.rtc-audio-route-option-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rtc-audio-route-option-main {
  min-width: 0;
}

.rtc-audio-route-option-main strong,
.rtc-audio-route-option-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rtc-audio-route-option-main strong {
  font-size: 17px;
  font-weight: 650;
}

.rtc-audio-route-option-main small {
  margin-top: 2px;
  color: rgba(17, 17, 17, 0.52);
  font-size: 12px;
}

.rtc-audio-route-option.is-selected .rtc-audio-route-option-main small {
  color: rgba(255, 255, 255, 0.7);
}

.rtc-audio-route-check {
  justify-self: end;
  font-size: 22px;
  font-weight: 700;
}

.rtc-audio-route-cancel {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  border: 0;
  border-radius: 16px;
  color: #111;
  background: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 650;
}

.rtc-incoming-actions,
.rtc-outgoing-actions {
  padding-bottom: calc(52px + var(--rtc-safe-bottom));
}

.rtc-call:not(.is-video) .rtc-outgoing-actions .rtc-outgoing-camera {
  display: none;
}

.rtc-call:not(.is-video) .rtc-outgoing-actions #rtcOutgoingMuteBtn {
  order: 1;
}

.rtc-call:not(.is-video) .rtc-outgoing-actions #rtcCancelBtn {
  order: 2;
}

.rtc-call:not(.is-video) .rtc-outgoing-actions #rtcOutgoingSpeakerBtn {
  order: 3;
}

.rtc-call:not(.is-video) .rtc-active-actions #rtcMuteBtn {
  order: 1;
}

.rtc-call:not(.is-video) .rtc-active-actions #rtcHangupBtn {
  order: 2;
}

.rtc-call:not(.is-video) .rtc-active-actions #rtcSpeakerBtn {
  order: 3;
}

.rtc-call.is-video .rtc-active-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  row-gap: 18px;
}

.rtc-call.is-video .rtc-active-actions.hidden {
  display: none;
}

.rtc-call.is-video .rtc-active-actions #rtcMuteBtn {
  grid-column: 1;
  grid-row: 1;
}

.rtc-call.is-video .rtc-active-actions #rtcSpeakerBtn {
  grid-column: 2;
  grid-row: 1;
}

.rtc-call.is-video .rtc-active-actions #rtcCameraBtn {
  grid-column: 3;
  grid-row: 1;
}

.rtc-call.is-video .rtc-active-actions #rtcHangupBtn {
  grid-column: 2;
  grid-row: 2;
}

.rtc-call.is-multi-party:not(.is-video) .rtc-active-actions #rtcMuteBtn { order: 1; }
.rtc-call.is-multi-party:not(.is-video) .rtc-active-actions #rtcSpeakerBtn { order: 2; }
.rtc-call.is-multi-party:not(.is-video) .rtc-active-actions #rtcCameraBtn { order: 3; }
.rtc-call.is-multi-party:not(.is-video) .rtc-active-actions #rtcHangupBtn { order: 4; }

.rtc-incoming-actions {
  justify-content: space-around;
}

.rtc-mini-call {
  position: fixed;
  z-index: 15000;
  top: 30%;
  left: 8px;
  width: 82px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #07b95a;
  background: #fff;
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.17);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  touch-action: none;
  user-select: none;
}

.rtc-mini-call.hidden {
  display: none;
}

.rtc-mini-restore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 82px;
  padding: 13px 4px 9px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: grab;
  touch-action: none;
}
.rtc-mini-phone { width: 27px; height: 27px; fill: currentColor; }
.rtc-mini-controls { display: flex; background: #f8f8f8; border-top: 1px solid #f0f0f0; }
.rtc-mini-controls button { flex: 1; padding: 8px 4px; min-height: 34px; border: 0; color: #a0a0a0; background: transparent; }
.rtc-mini-controls button.is-on { color: #07b95a; }
.rtc-mini-controls svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rtc-mini-controls button:disabled { opacity: 0.45; }

.group-call-banner { flex: 0 0 auto; margin: 8px 12px 2px; border-radius: 10px; background: #f1f1f1; overflow: hidden; color: #353535; }
.group-call-banner.hidden, .group-call-details.hidden, .group-call-confirm.hidden { display: none; }
.group-call-banner-toggle { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 53px; padding: 12px 16px; border: 0; color: inherit; background: transparent; text-align: start; font: inherit; font-size: 15px; cursor: pointer; }
.group-call-banner-toggle > span { flex: 1; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.group-call-phone { flex-shrink: 0; width: 24px; height: 24px; fill: #07c160; }
.group-call-chevron { flex-shrink: 0; width: 19px; height: 19px; stroke: #999; stroke-width: 1.8; fill: none; transition: transform 160ms ease; }
.group-call-banner-toggle[aria-expanded="true"] .group-call-chevron { transform: rotate(180deg); }
.group-call-details { margin: 0 12px 12px; border-radius: 8px; background: #fff; overflow: hidden; }
.group-call-avatars { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 22px 16px 16px; max-height: 220px; overflow-y: auto; }
.group-call-person { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 50px; min-width: 0; }
.group-call-avatar { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #54725f; background: #e5eee9; font-size: 20px; }
.group-call-avatar img { width: 100%; height: 100%; object-fit: cover; }
.group-call-person > span { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #888; font-size: 11px; line-height: 1.3; }
.group-call-join { display: block; width: 100%; min-height: 49px; padding: 12px 16px; border: 0; border-top: 1px solid #eee; background: transparent; color: #576b95; font: inherit; font-size: 16px; cursor: pointer; }
.group-call-join:disabled { color: #999; cursor: wait; }
.status-group-call { display: inline-flex; align-items: center; flex-shrink: 0; margin-inline-start: 8px; color: #07b95a; }
.status-group-call svg { width: 17px; height: 17px; fill: currentColor; }
.group-call-confirm { position: fixed; inset: 0; z-index: 16000; display: grid; place-items: center; padding: 24px; }
.group-call-confirm-mask { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); border: 0; }
.group-call-confirm-card { position: relative; width: min(100%, 340px); border-radius: 13px; background: #fff; color: #222; overflow: hidden; box-shadow: 0 12px 50px rgba(0, 0, 0, 0.14); }
.group-call-confirm-card p { margin: 0; padding: 29px 25px; text-align: center; line-height: 1.6; font-size: 16px; overflow-wrap: anywhere; }
.group-call-confirm-actions { display: flex; border-top: 1px solid #eee; }
.group-call-confirm-actions button { flex: 1; min-width: 0; min-height: 53px; padding: 12px; border: 0; background: transparent; color: #576b95; font: inherit; font-size: 16px; }
.group-call-confirm-actions button:first-child { border-inline-end: 1px solid #eee; color: #555; }
.group-call-banner button:focus-visible, .group-call-confirm button:focus-visible, .rtc-mini-call button:focus-visible { outline: 2px solid #07c160; outline-offset: -3px; }
@media (min-width: 900px) {
  .group-call-banner { margin: 10px 20px 4px; }
  .group-call-avatars { padding-block: 18px 14px; }
}
@media (prefers-color-scheme: dark) {
  .group-call-banner { background: #2b2b2b; color: #ddd; }
  .group-call-details { background: #202020; }
  .group-call-join { border-color: #303030; color: #95acc7; }
  .group-call-confirm-card { background: #2b2b2b; color: #eee; }
  .group-call-confirm-actions, .group-call-confirm-actions button:first-child { border-color: #383838; }
  .group-call-confirm-actions button { color: #95acc7; }
  .group-call-confirm-actions button:first-child { color: #bbb; }
  .rtc-mini-call { background: #2b2b2b; }
  .rtc-mini-controls { background: #252525; border-color: #383838; }
}

.rtc-mini-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #07c160;
  box-shadow: 0 0 0 4px rgba(7, 193, 96, 0.18);
}

.call-summary-card {
  min-width: 176px;
  max-width: min(240px, 68vw);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 1px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.call-summary-card:active {
  opacity: 0.68;
}

.call-summary-icon {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #202124;
}

.call-summary-svg {
  width: 23px;
  height: 23px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (orientation: landscape) and (max-height: 520px) {
  .rtc-call-content {
    padding-top: 8px;
  }

  .rtc-peer-avatar {
    width: 70px;
    height: 70px;
  }

  .rtc-peer-name {
    margin-top: 10px;
    font-size: 20px;
  }

  .rtc-control-circle {
    width: 52px;
    height: 52px;
  }

  .rtc-controls {
    padding-bottom: calc(12px + var(--rtc-safe-bottom));
  }
}

/* WeChat-style call record bubble (design d758e104): both direct and group
   summaries stay on one line; the icon sits toward the bubble tail. */
.message[data-media-type="call"] {
  gap: 8px;
}

.message[data-media-type="call"] .message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

.message[data-media-type="call"] .bubble.media {
  overflow: visible;
  padding: 8px 12px;
  border: 0;
  border-radius: 5px;
}

.message[data-media-type="call"] .bubble::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 7px solid var(--bubble-other);
  border-bottom: 6px solid transparent;
}

.message.me[data-media-type="call"] .bubble::after {
  right: -7px;
  left: auto;
  border-right: 0;
  border-left: 7px solid var(--bubble-me);
}

.call-summary-card.call-summary-inline {
  min-width: 0;
  max-width: min(300px, 68vw);
  gap: 8px;
  padding: 0;
}

.call-summary-inline .call-summary-inline-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  line-height: 23px;
  white-space: nowrap;
  color: #202124;
}

.message.me .call-summary-card.call-summary-inline {
  flex-direction: row-reverse;
}

/* Count-driven blocky grid (WeChat-style): 2–4 people = two large columns,
   3rd tile of a trio centers on its own row; 5+ fall back to three columns. */
.rtc-participant-grid[data-count="2"],
.rtc-participant-grid[data-count="3"],
.rtc-participant-grid[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, 38vh);
}
.rtc-participant-grid[data-count="3"] > .rtc-participant-tile:nth-child(3) {
  grid-column: 1 / -1;
  width: calc(50% - 2px);
  justify-self: center;
}

/* Invite picker: letter section headers + right-side index rail */
.call-invite-section {
  padding: 6px 14px 4px;
  font-size: 12px;
  color: #8a8f99;
  background: #f7f7f7;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Group-start picker: the initiator row is pre-selected and locked. */
.call-invite-row.is-locked {
  pointer-events: none;
}
.call-invite-row.is-locked .call-invite-check {
  opacity: 0.55;
}

/* 健康报告详情一键直达按钮（Fohow 助理测后关怀消息） */
.health-report-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.22);
  color: #0f766e;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}
.health-report-link:active {
  background: rgba(15, 118, 110, 0.16);
}
.health-report-icon {
  flex: 0 0 auto;
  font-size: 16px;
}
.health-report-label {
  flex: 1;
  min-width: 0;
}
.health-report-arrow {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 900;
}

/* ---- 聊天里的作品分享卡片：封面 + 标题 + 主播，点击进作品详情 ---- */
.live-work-card {
  display: flex;
  gap: 10px;
  width: 250px;
  max-width: 100%;
  padding: 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  cursor: pointer;
}

.message.mine .live-work-card {
  background: rgba(255, 255, 255, 0.18);
}

.live-work-card-cover {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f7a4e, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-work-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-work-card-fallback {
  color: #fff;
  font-size: 26px;
}

.live-work-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-work-card-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
}

.live-work-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.live-work-card-tag {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(254, 44, 85, 0.12);
  color: #fe2c55;
  font-size: 11px;
  font-weight: 800;
}

.message.mine .live-work-card-tag {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.live-work-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 生活号卡片：金色标签与 App 一致。 */
.live-work-card.is-life .live-work-card-cover {
  background: linear-gradient(135deg, #c9a46a, #8a6a32);
}

.live-work-card.is-life .live-work-card-tag {
  background: rgba(161, 123, 62, 0.14);
  color: #8a6a32;
}

.live-work-card-host,
.live-work-card-open {
  font-size: 12px;
  opacity: 0.66;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 生活号推送提醒“某某发布了新作品”最多两行，避免只剩“发布了…”。 */
.live-work-card.is-life .live-work-card-host {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* ===== Contact card parity with the App ===== */
.contact-card-message {
  width: min(230px, calc(100vw - 116px));
  padding: 14px 14px 9px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
  color: #222;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.contact-card-message:active {
  background: #f7f7f7;
}

.contact-card-message-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 12px;
}

.contact-card-message-avatar,
.contact-card-picker-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(212, 194, 122, 0.2);
  color: #aa9040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
}

.contact-card-message-avatar img,
.contact-card-picker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-card-message-avatar .avatar-fallback,
.contact-card-picker-avatar .avatar-fallback {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.contact-card-message-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card-message-label {
  padding-top: 8px;
  border-top: 1px solid #ececec;
  color: #888;
  font-size: 12px;
}

.modal-contact-card-picker {
  width: 100vw;
  max-width: none;
  min-height: var(--app-height);
  max-height: var(--app-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.contact-card-picker-head {
  min-height: calc(54px + var(--safe-top));
  padding: calc(7px + var(--safe-top)) 12px 7px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-card-picker-head h3 {
  margin: 0;
  color: #111;
  font-size: 17px;
  text-align: center;
}

.contact-card-picker-back {
  padding: 0;
}

.contact-card-picker-search {
  margin: 12px 16px 8px;
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 9px;
  background: #fff;
  color: #888;
}

.contact-card-picker-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #222;
  font-size: 15px;
}

.contact-card-picker-hint {
  padding: 0 18px 10px;
  color: #888;
  font-size: 12px;
  line-height: 1.45;
}

.contact-card-picker-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.contact-card-picker-row {
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid #ededed;
  background: #fff;
  color: #222;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.contact-card-picker-row:active {
  background: #f3f3f3;
}

.contact-card-picker-copy {
  min-width: 0;
  flex: 1;
}

.contact-card-picker-name,
.contact-card-picker-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-card-picker-name {
  font-size: 16px;
  font-weight: 700;
}

.contact-card-picker-sub {
  margin-top: 3px;
  color: #999;
  font-size: 12px;
}

.contact-card-picker-arrow {
  color: #aaa;
  font-size: 22px;
}

.contact-card-picker-empty {
  padding: 72px 20px;
  color: #888;
  text-align: center;
}

/* ===== 微信式顶部连接状态（连接中… / 收取中…） ===== */
.conn-status {
  display: none;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.conn-status .conn-status-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conn-status-list {
  font-weight: 900;
  font-size: 17px;
}
.conn-status-chat {
  font-weight: 900;
  font-size: 16px;
}
.conn-spinner {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(17, 17, 17, 0.16);
  border-top-color: rgba(17, 17, 17, 0.55);
  animation: conn-spin 0.8s linear infinite;
}
body[data-conn] .conn-status { display: inline-flex; }
body[data-conn] .sidebar-header .brand-title { display: none; }
body[data-conn] .chat-header-main .chat-title { display: none; }
body[data-conn] .chat-header-main .chat-meta { display: none; }
@keyframes conn-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   PC / 平板自适应（2026-08-28）
   --------------------------------------------------------------------------
   聊天页在移动端是「列表 / 会话」左右滑动的单栏 SPA：
   .page-list 与 .page-chat 是同级绝对定位层，靠 .app.state-chat 切换
   transform: translateX() 来回滑。

   桌面端把这两层就地摊平成 grid 双栏（左侧会话列表 + 右侧当前会话），
   即本项目 /chat/pc 已有的形态；纯 CSS 完成，不改任何 JS：
     · .app 变 grid，两层各占一列，transform 归零
     · .page-requests（好友请求）仍覆盖在右栏之上
     · 未选中会话时右栏显示一个无文案的占位图形
       （本页支持 9 种语言，占位用图形而非 content 文案，避免写死中文）
   ========================================================================== */

@media (min-width: 900px) {
  :root {
    --pc-list-w: 340px;
    --pc-pane-gap: 1px;
  }

  body {
    background: #e6e2dc;
  }

  .app {
    display: grid;
    grid-template-columns: var(--pc-list-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--pc-pane-gap);
    background: rgba(17, 24, 39, 0.08);
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* 两层就地摊平：取消绝对定位与横滑位移 */
  .app .page-list,
  .app .page-chat,
  .app .page-requests,
  .app .page-history {
    position: relative;
    inset: auto;
    transform: none;
    transition: none;
    height: auto;
    min-height: 0;
    pointer-events: auto;
  }

  .app .page-list {
    grid-area: 1 / 1;
    z-index: 2;
  }

  .app .page-chat,
  .app .page-requests,
  .app .page-history {
    grid-area: 1 / 2;
  }

  /* 移动端这些状态会把列表推出屏幕，桌面端列表必须始终留在左栏 */
  .app.state-chat .page-list,
  .app.state-requests .page-list,
  .app.state-history .page-list,
  .app.state-history .page-chat {
    transform: none;
  }

  /* 未打开会话时隐藏右栏内容，露出下方占位图形 */
  .app:not(.state-chat) .page-chat {
    visibility: hidden;
  }

  .app:not(.state-requests) .page-requests,
  .app:not(.state-history) .page-history {
    visibility: hidden;
  }

  /* 历史消息页的搜索框同样限制阅读列宽 */
  .app .page-history .history-search-box {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 右栏空态占位：纯图形，无文案（多语言安全） */
  .app::after {
    content: '';
    grid-area: 1 / 2;
    z-index: 1;
    background-color: var(--wechat-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%23b9bfc7' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
  }

  /* @提及选择面板：移动端是贴底通栏的抽屉，在 1440px 上会拉成一条
     1440px 宽的长条，每行只有一个名字孤零零地横贯整屏（见反馈截图）。
     桌面端收成居中对话框，与同套里 .modal-friend-sheet 等保持一致。 */
  .mention-sheet {
    justify-content: center;
    align-items: center;
  }

  .mention-sheet-panel {
    width: min(420px, calc(100vw - 48px));
    max-height: min(70vh, 560px);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    padding-bottom: 0;
  }

  /* 会话流限制阅读列宽：右栏可达 1000px+，整行铺满会让每行超过 100 字 */
  .app .page-chat .messages {
    padding-left: max(12px, (100% - 900px) / 2);
    padding-right: max(12px, (100% - 900px) / 2);
  }

  /* 桌面端不需要会话页的「返回」按钮——列表始终可见 */
  .app .page-chat > .chat-header .nav-back,
  .app .page-chat > .chat-header .back-icon {
    display: none;
  }

  /* 底部固定的用户条属于列表栏，限制在左栏宽度内 */
  .app .page-list {
    border-right: 0;
  }
}

@media (min-width: 1280px) {
  :root {
    --pc-list-w: 380px;
  }
}

@media (min-width: 900px) {
  /* 移动端的「底部弹层 / 全屏详情页」在桌面会横贯整个视口（实测 1440px 宽），
     而同一套里普通 .modal 早就是居中对话框（430px + translate(-50%,-50%)）。
     这里让这 5 个跟上同一形态，避免同一应用里两种弹层观感割裂。
     它们都是纯 display 切换、无进出场动画，覆盖 transform 不会破坏交互。 */
  /* 注意特异度：上面 1955 行那条 `#modalGroupProfile, ... { inset:0 }` 是 ID
     选择器(1,0,0)，会压过类选择器(0,1,0)。所以这里必须把那 7 个 id 一并写上，
     否则宽度收得住、位置却收不住（实测：width 生效但 left 仍为 0）。 */
  .modal-friend-sheet,
  .modal-member-info,
  .modal-complaint,
  .modal-contact-card-picker,
  .modal-group-profile,
  #modalGroupProfile,
  #modalGroupQr,
  #modalGroupRemark,
  #modalGroupInvite,
  #modalComplaintReason,
  #modalComplaintForm,
  #modalForward {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(460px, calc(100vw - 48px));
    max-width: none;
    /* 这几个在移动端是「全屏详情页」，带 min-height:var(--app-height)；
       min-height 会压过 max-height，不解除的话桌面上仍是满屏高。 */
    min-height: 0;
    max-height: min(calc(var(--app-height) - 96px), 720px);
    transform: translate(-50%, -50%);
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  }
}


/* 桌面转发操作条位于输入框上方，相关弹窗对齐右侧会话区域。 */
@media (min-width: 900px) {
  :root {
    --pc-chat-center: calc(50% + (var(--pc-list-w) + var(--pc-pane-gap)) / 2);
    --pc-chat-width: calc(min(100vw, 1600px) - var(--pc-list-w) - var(--pc-pane-gap));
  }

  .page-chat > .select-toolbar {
    position: relative;
    inset: auto;
    z-index: auto;
    flex: 0 0 auto;
    padding: 10px 14px;
  }

  #modalForward,
  #modalForwardConfirm {
    left: var(--pc-chat-center);
  }

  #modalForward {
    width: min(460px, calc(var(--pc-chat-width) - 32px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #modalForward .forward-head {
    flex: 0 0 auto;
  }

  #modalForward .forward-body {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  #modalForwardConfirm,
  .forward-mode-panel {
    width: min(360px, calc(var(--pc-chat-width) - 32px));
  }

  .forward-mode-panel {
    left: var(--pc-chat-center);
    right: auto;
    top: calc(var(--app-top, 0px) + var(--app-height) * 0.5);
    bottom: auto;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  }
}

/* ==========================================================================
   PC 微信风格输入区（2026-08-28）
   --------------------------------------------------------------------------
   移动端的 42px 胶囊输入框被拉到 1060px 宽，又扁又长，打字空间还只有一行。
   参照 PC 微信改成：输入区独占一行且很高，工具按钮排在它下方，白底平面、
   不再是灰胶囊。

   不改 HTML：footer 本来就是 flex 行，给它 flex-wrap，再把 textarea 设成
   `flex: 1 0 100%` + `order: -1`，它就独占第一行，其余按钮自然折到第二行。
   高度上下限走 --composer-min-h/--composer-max-h，由 autoResizeTextarea 读取。
   ========================================================================== */

@media (min-width: 900px) {
  .wechat-footer {
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 8px 14px 10px;
    min-height: 0;
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
  }

  #composerInput.wechat-input {
    --composer-min-h: 132px;
    --composer-max-h: 260px;
    flex: 1 0 100%;
    order: -1;
    height: 132px;
    min-height: 132px;
    max-height: 260px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 6px 2px 8px;
    font-size: 15px;
    line-height: 24px;
  }

  #composerInput.wechat-input:focus {
    background: transparent;
    border-color: transparent;
  }

  /* 发送按钮推到工具行最右，与 PC 微信一致 */
  .wechat-footer .wechat-action-btn {
    margin-left: auto;
  }
}

/* ===== 待发送附件区（选中即预上传，带进度）===== */
.attachments {
  padding: 8px 10px;
  background: #f7f7f7;
  border-top: 1px solid #e4e4e4;
}

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

.attachments-title {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.45);
}

.attachments-header .btn.ghost {
  padding: 2px 8px;
  font-size: 12px;
  line-height: 18px;
  min-height: 0;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  border: 1px solid #dcdcdc;
}

.attachments-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.attachment-item {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  /* 覆盖 @import 进来的 pc/style.css 里的 .attachment-item{height:92px}，
     否则文件名/进度那一行会被固定高裁掉 */
  height: auto;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.attachment-item.is-error {
  border-color: #e35d5d;
}

.attachment-thumb {
  position: relative;
  width: 100%;
  height: 68px;
  background: #f2f2f2;
  overflow: hidden;
}

.attachment-thumb img,
.attachment-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachment-file-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

/* 未上传部分的遮罩，高度 = 剩余百分比，随进度自上而下退去 */
.attachment-progress-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  transition: height 0.15s linear;
  pointer-events: none;
}

.attachment-item.is-done .attachment-progress-mask,
.attachment-item.is-error .attachment-progress-mask {
  display: none;
}

.attachment-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: attachmentSpin 0.8s linear infinite;
  pointer-events: none;
  display: none;
}

.attachment-item.is-uploading .attachment-spinner {
  display: block;
}

@keyframes attachmentSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .attachment-spinner { animation: none; }
}

.attachment-retry {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(227, 93, 93, 0.92);
  color: #fff;
  font-size: 15px;
  line-height: 26px;
  cursor: pointer;
  display: none;
}

.attachment-item.is-error .attachment-retry {
  display: block;
}

.attachment-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.15);
}

.attachment-item.is-done .attachment-progress {
  display: block;
}

.attachment-progress-bar {
  height: 100%;
  width: 0;
  background: #07c160;
  transition: width 0.15s linear;
}

.attachment-item.is-error .attachment-progress-bar {
  background: #e35d5d;
}

.attachment-meta {
  padding: 3px 4px 4px;
}

.attachment-name {
  font-size: 11px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-status {
  font-size: 10px;
  line-height: 13px;
  color: rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-item.is-uploading .attachment-status {
  color: #07c160;
}

.attachment-item.is-done .attachment-status::before {
  content: '\2713 ';
  color: #07c160;
}

.attachment-item.is-error .attachment-status {
  color: #e35d5d;
}

.attachment-remove {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

/* 上传未完成时的发送按钮：保持"发送"外形但明确不可点 */
.wechat-action-btn.is-send.is-blocked {
  opacity: 0.45;
  cursor: not-allowed;
}

.wechat-action-btn.is-send.is-uploading {
  font-variant-numeric: tabular-nums;
}

.wechat-action-btn.is-send.is-blocked:active {
  background: #d4c27a;
}

@media (min-width: 768px) {
  .attachments {
    padding: 10px 14px;
  }
  .attachment-item {
    width: 82px;
  }
  .attachment-thumb {
    height: 82px;
  }
  .attachment-name {
    font-size: 12px;
    line-height: 15px;
  }
  .attachment-status {
    font-size: 11px;
  }
  .attachment-remove {
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
}

/* ==========================================================================
   联系人资料 v2：微信式紧凑分组卡片
   ========================================================================== */
.modal.modal-friend-sheet {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100vw;
  max-width: none;
  max-height: calc(var(--app-height) - 16px);
  padding: 0;
  transform: none;
  overflow: hidden;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: #f5f5f7;
  color: #1f2329;
  box-shadow: 0 -18px 56px rgba(15, 23, 42, 0.2);
}

.modal-friend-sheet .friend-sheet-head {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 58px;
  padding: 10px 56px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.modal-friend-sheet .friend-sheet-head h3 {
  margin: 0;
  color: #1f2329;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}

.modal-friend-sheet .friend-sheet-close {
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f2f4;
  color: #5b616b;
  font-size: 0;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.modal-friend-sheet .friend-sheet-close svg,
.modal-friend-sheet .friend-row-icon svg,
.modal-friend-sheet .friend-create-group-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-friend-sheet .friend-sheet-close:active {
  transform: translateY(-50%) scale(0.94);
  background: #e7e9ec;
}

.friend-sheet-body {
  max-height: calc(var(--app-height) - 78px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px calc(18px + var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-friend-sheet .friend-sheet-card {
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.055);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.035);
}

.modal-friend-sheet .friend-sheet-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 10px;
  padding: 16px;
}

.modal-friend-sheet .friend-sheet-profile.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.modal-friend-sheet .friend-profile-entry {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 66px;
  padding: 0;
  border-radius: 10px;
}

.modal-friend-sheet .friend-profile-avatar {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.08);
}

.friend-profile-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modal-friend-sheet .friend-profile-name {
  display: block;
  color: #181b20;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
}

.friend-profile-meta {
  display: block;
  overflow: hidden;
  color: #8a9099;
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-profile-meta.hidden {
  display: none;
}

.friend-profile-chevron {
  margin-left: auto;
}

.modal-friend-sheet .friend-create-group-entry {
  align-self: stretch;
  min-height: 66px;
  gap: 6px;
  border-radius: 11px;
  background: #f7f8f9;
  color: #666d77;
  font-size: 12px;
  transition: background 0.16s ease;
}

.modal-friend-sheet .friend-create-group-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #eaf7ee;
  color: #20a957;
}

.modal-friend-sheet .friend-create-group-icon svg {
  width: 18px;
  height: 18px;
}

.modal-friend-sheet .friend-sheet-row,
.modal-friend-sheet .friend-sheet-delete {
  min-height: 58px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #252930;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}

.modal-friend-sheet .friend-row-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-friend-sheet .friend-row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-friend-sheet .friend-row-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #f1f3f5;
  color: #68717d;
}

.modal-friend-sheet .friend-row-icon svg {
  width: 17px;
  height: 17px;
}

.modal-friend-sheet .friend-row-icon-space,
.modal-friend-sheet .friend-row-icon-remark {
  background: #eef8f1;
  color: #20a957;
}

.modal-friend-sheet .friend-row-icon-history,
.modal-friend-sheet .friend-row-icon-pin {
  background: #eef5ff;
  color: #4d83c7;
}

.modal-friend-sheet .friend-row-icon-mute {
  background: #f4f1fb;
  color: #7969ac;
}

.modal-friend-sheet .friend-row-icon-clear {
  background: #f3f4f6;
  color: #68717d;
}

.modal-friend-sheet .friend-row-icon-report {
  background: #fff7e9;
  color: #bc7a22;
}

.modal-friend-sheet .friend-row-icon-delete {
  background: #fff0ef;
  color: #d54941;
}

.friend-sheet-navigation > * + *,
.friend-sheet-settings > * + *,
.friend-sheet-actions > * + * {
  border-top: 1px solid #f0f1f3;
}

.friend-sheet-navigation > .hidden + * {
  border-top: 0;
}

.modal-friend-sheet .friend-sheet-space,
.modal-friend-sheet .friend-sheet-settings,
.modal-friend-sheet .friend-sheet-clear-history,
.modal-friend-sheet .friend-sheet-report {
  margin-top: 0;
}

.modal-friend-sheet .remark-view {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.modal-friend-sheet .remark-value {
  max-width: 42%;
  margin-left: auto;
  color: #9a9fa7;
  font-size: 14px;
}

.modal-friend-sheet .friend-sheet-chevron {
  color: #c5c9cf;
  font-size: 24px;
  font-weight: 300;
}

.modal-friend-sheet .friend-setting-row {
  cursor: pointer;
}

.modal-friend-sheet .remark-edit {
  min-height: 66px;
  gap: 8px;
  padding: 11px 12px;
  border-top: 0;
  background: #fff;
}

.modal-friend-sheet .remark-edit input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #dfe2e6;
  border-radius: 10px;
  background: #fff;
  color: #1f2329;
  font-size: 14px;
  outline: none;
}

.modal-friend-sheet .remark-edit input:focus {
  border-color: #67c98b;
  box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.1);
}

.modal-friend-sheet .remark-edit .btn {
  height: 42px;
  min-width: 54px;
  padding: 0 11px;
  border-radius: 10px;
  box-shadow: none;
}

.modal-friend-sheet .remark-edit .btn.primary {
  border-color: #07c160;
  background: #07c160;
  color: #fff;
}

.modal-friend-sheet .friend-sheet-report {
  color: #9a651f;
}

.modal-friend-sheet .friend-sheet-delete {
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: #d54941;
  text-align: center;
}

.modal-friend-sheet .friend-sheet-delete:disabled {
  cursor: wait;
  opacity: 0.55;
}

.modal-friend-sheet .friend-sheet-row:active,
.modal-friend-sheet .friend-sheet-delete:active,
.modal-friend-sheet .friend-profile-entry:active,
.modal-friend-sheet .friend-create-group-entry:active {
  background: #f4f5f6;
  opacity: 1;
}

.modal-friend-sheet .friend-sheet-row:focus-visible,
.modal-friend-sheet .friend-sheet-delete:focus-visible,
.modal-friend-sheet .friend-profile-entry:focus-visible,
.modal-friend-sheet .friend-create-group-entry:focus-visible,
.modal-friend-sheet .friend-sheet-close:focus-visible {
  outline: 3px solid rgba(7, 193, 96, 0.2);
  outline-offset: -3px;
}

@media (hover: hover) {
  .modal-friend-sheet .friend-sheet-row:hover,
  .modal-friend-sheet .friend-sheet-delete:hover,
  .modal-friend-sheet .friend-profile-entry:hover,
  .modal-friend-sheet .friend-create-group-entry:hover {
    background: #f7f8f9;
  }

  .modal-friend-sheet .friend-sheet-close:hover {
    background: #e7e9ec;
    color: #1f2329;
  }
}

@media (max-width: 360px) {
  .friend-sheet-body {
    padding-right: 10px;
    padding-left: 10px;
  }

  .modal-friend-sheet .friend-sheet-profile {
    padding: 14px;
  }

  .modal-friend-sheet .friend-sheet-row,
  .modal-friend-sheet .friend-sheet-delete {
    padding: 0 12px;
  }
}

@media (min-width: 900px) {
  .modal.modal-friend-sheet {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(480px, calc(100vw - 48px));
    max-height: min(calc(var(--app-height) - 72px), 740px);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25);
  }

  .modal-friend-sheet .friend-sheet-head {
    padding-right: 58px;
    padding-left: 58px;
  }

  .friend-sheet-body {
    max-height: min(calc(var(--app-height) - 130px), 682px);
    padding: 14px 16px 18px;
  }
}

/* ---- 会员身份徽章（2026-09-02 会员身份体系重构）----
   徽章本体的样式在 /assets/js/identity-badges.js 里统一注入，
   这里只管它在各个位置的落位与间距。容器带 .fi-empty 时自动隐藏，
   所以无身份的用户不会留下一道空白。 */
.friend-profile-identity {
  display: flex;
  margin-top: 6px;
}
/* 编号与级别占资料卡整行，避免被「发起群聊」按钮挤窄。 */
.modal-friend-sheet .friend-sheet-profile > .friend-profile-identity {
  grid-column: 1 / -1;
  margin-top: 0;
}

.member-info-identity {
  display: flex;
  /* 资料卡是「左头像、右信息」，徽章跟昵称一样左对齐（与 App 一致）；
     居中会落到信息栏正中，宽屏上离头像一百多像素。 */
  justify-content: flex-start;
  margin: 8px 0 2px;
}
.add-friend-identity {
  display: flex;
  margin-top: 6px;
}
.friend-profile-identity.fi-empty,
.member-info-identity.fi-empty,
.add-friend-identity.fi-empty { display: none; }

/* ==========================================================================
   通话界面：控件分行 + PC 自适应（2026-09-04）
   --------------------------------------------------------------------------
   起因有三：
   1) 视频通话最多 5 个控件（麦克风/扬声器/摄像头/翻转摄像头/挂断），
      390px 宽一行放不下（5×68 + 4×10 gap + 32 padding = 412），
      原来靠 flex 溢出，摄像头那个正好压在本地预览小窗上，是错位的。
   2) 群语音在 PC 上每格被拉到 480×350，里面只有一个 78px 的头像，空得离谱。
   3) 控件行 width:100% + space-evenly，在 1440px 上摊成一条横贯全屏的稀疏行。
   控件数由 renderCallUI 写进 data-control-count，不用 :has() ——
   群语音里成员一开摄像头也会变成 5 个，按 is-video 判断会漏掉那种情况。
   ========================================================================== */

/* 4~5 个控件时改成 3 列网格。用网格而不是 flex 换行，是因为要把挂断**定位到
   中列**（与 App 的排布一致：麦克风/扬声器/摄像头 换行 [空]/挂断/翻转摄像头）。
   flex 只能把次行整体居中，做不到"挂断恰好在中间那一列"。 */
#rtcActiveActions[data-control-count="4"],
#rtcActiveActions[data-control-count="5"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  row-gap: 20px;
  column-gap: 8px;
}

#rtcActiveActions[data-control-count="4"] > #rtcHangupBtn,
#rtcActiveActions[data-control-count="5"] > #rtcHangupBtn {
  grid-column: 2;
  grid-row: 2;
}

#rtcActiveActions[data-control-count="5"] > #rtcSwitchCameraBtn {
  grid-column: 3;
  grid-row: 2;
}

/* 群通话那条 .rtc-call.is-multi-party .rtc-active-actions 写死了 4 列
   （麦克风/扬声器/摄像头/挂断），但摄像头键只在 canEnableCamera 时才出现，
   平时只有 3 个键占前 3 列，整行就朝左偏了小半格 —— 390px 上行中心落在 148
   而不是 195，1440px 上落在 652 而不是 720。列数跟着实际键数走即可。
   4~5 个键的情况由上面那条 #rtcActiveActions[data-control-count] 接管
   （id 特异度高于这里的三个 class）。 */
.rtc-call.is-multi-party #rtcActiveActions[data-control-count="2"] {
  grid-template-columns: repeat(2, minmax(66px, 1fr));
}

.rtc-call.is-multi-party #rtcActiveActions[data-control-count="3"] {
  grid-template-columns: repeat(3, minmax(66px, 1fr));
}

/* 上面 .rtc-call:not(.is-video) 那三条 order 是给纯语音三键排的
   （麦克风 / 挂断 / 扬声器，挂断居中）。群语音里成员一开摄像头，摄像头与
   翻转两个键没有 order（默认 0）会整体跳到挂断前面，行序就乱了。
   一旦变成 4~5 个键，统一回到 DOM 顺序。选择器特异度与那三条持平，靠后置生效。 */
.rtc-call #rtcActiveActions[data-control-count="4"] > .rtc-control,
.rtc-call #rtcActiveActions[data-control-count="5"] > .rtc-control {
  order: 0;
}

/* 单聊视频的本地预览小窗原先固定在右上，正好落在换行后的控件上方。
   控件行变两行后要给它让位，否则第二行会压住画面。 */
.rtc-call.is-video .rtc-controls {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.42) 38%);
}

@media (min-width: 600px) {
  /* PC 上控件不该横贯全屏：收进一条居中的窄带，五个键仍并成一行。 */
  .rtc-controls {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: calc(28px + var(--rtc-safe-bottom));
  }

  #rtcActiveActions[data-control-count="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #rtcActiveActions[data-control-count="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* 一行放得下就不必再把挂断钉在第二行中列 */
  #rtcActiveActions[data-control-count="4"] > #rtcHangupBtn,
  #rtcActiveActions[data-control-count="5"] > #rtcHangupBtn,
  #rtcActiveActions[data-control-count="5"] > #rtcSwitchCameraBtn {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (min-width: 900px) {
  /* 宫格收窄并垂直居中：格子按 16:10 定高，不再被拉成整屏高度的大色块。 */
  .rtc-participant-grid {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    align-content: center;
    grid-auto-rows: minmax(150px, 210px);
    gap: 10px;
    padding: 18px 18px 22px;
  }

  .rtc-participant-tile {
    border-radius: 12px;
  }

  .rtc-participant-grid[data-count="2"],
  .rtc-participant-grid[data-count="3"],
  .rtc-participant-grid[data-count="4"] {
    max-width: 720px;
    grid-auto-rows: minmax(180px, 260px);
  }
}

/* 纯语音的格子里没有画面，只有一个头像和一行角落里的名字，看着像空块。
   改成头像居中、名字紧跟在下方，并把头像做成圆形——语音通话的格子本质上
   是一张"名片"，不是一块被裁掉的视频。有画面时（.has-video）保持原样。 */
.rtc-participant-tile:not(.has-video) {
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px;
}

.rtc-participant-tile:not(.has-video) .rtc-participant-avatar {
  border-radius: 50%;
  width: clamp(48px, 14vw, 72px);
  height: clamp(48px, 14vw, 72px);
}

.rtc-participant-tile:not(.has-video) .rtc-participant-shade {
  display: none;
}

.rtc-participant-tile:not(.has-video) .rtc-participant-name {
  position: static;
  max-width: 100%;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  text-shadow: none;
}
.status-draft-label { color: #d9534f; }
/* 聊天页自行控制底部导航，避免共享导航脚本延迟加载时挡住恢复的草稿/发送按钮。 */
body.chat-composer-visible .wl-chat-nav { display: none !important; }

/* 只读群沿用撤回提示的灰色居中文字；保留顶部历史入口。 */
.group-readonly-notice { display: block; text-align: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #f5f5f5; }
.member-action { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.member-action .member-add-box { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.member-action:disabled { opacity: .4; cursor: default; }
#modalGroupRemove .invite-list { overflow-y: auto; max-height: 55vh; }
.call-device-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel, #f1f1f1);
  font-size: 14px;
  flex-shrink: 0;
}
.call-device-banner button, .rtc-resume-audio {
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  background: #07c160;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.call-device-banner button { flex-shrink: 0; max-width: 50%; }
.call-device-banner button:disabled { opacity: .55; cursor: default; }
.rtc-resume-audio { position: relative; z-index: 2; margin-top: 12px; }

/* 文件传输助手：完整附件缓存后才显示本地可用。 */
.assistant-intro { margin:0; padding:8px 16px; background:#eef7f1; color:#486453; font-size:12px; text-align:center; }
.assistant-attachment { min-width:190px; max-width:285px; display:grid; gap:6px; padding:4px; overflow-wrap:anywhere; }
.assistant-attachment strong { font-size:14px; font-weight:500; }
.assistant-attachment small,.assistant-expiry { color:#68766e; font-size:11px; margin:0; line-height:1.5; }
.assistant-attachment-preview img { display:block; max-width:100%; max-height:220px; border-radius:8px; object-fit:contain; cursor:pointer; }
.assistant-file-actions { display:flex; flex-wrap:wrap; gap:8px; }
.assistant-file-actions button { border:0; border-radius:5px; padding:6px 9px; font:inherit; font-size:12px; color:#276b44; background:#edf6ef; cursor:pointer; }
.assistant-settings,.assistant-preview { border:0; border-radius:14px; padding:20px; max-width:calc(100vw - 36px); box-sizing:border-box; color:#26332c; }
.assistant-settings { width:360px; }
.assistant-settings h2 { margin:0; font-size:19px; }
.assistant-settings p { font-size:13px; line-height:1.6; color:#68766e; }
.assistant-settings button { width:100%; padding:13px; margin-top:8px; border:0; border-radius:8px; font:inherit; text-align:start; color:#276b44; background:#edf6ef; }
.assistant-settings::backdrop,.assistant-preview::backdrop { background:rgba(0,0,0,.65); }
.assistant-preview img,.assistant-preview video { display:block; max-width:100%; max-height:75vh; margin-top:12px; }
.assistant-preview audio { display:block; max-width:100%; margin-top:18px; }
.assistant-preview button { border:0; padding:10px 16px; border-radius:6px; margin-right:8px; font:inherit; }

/* 私有附件复用普通聊天媒体，不增加文件名或助手专属背景。 */
.assistant-attachment { min-width:0; padding:0; gap:4px; }
.assistant-expiry:empty { display:none; }
.assistant-image,.assistant-video { max-width:260px; }
.assistant-sticker { max-width:150px; }
.assistant-media-placeholder { display:block; width:200px; height:150px; border:0; border-radius:8px; background:#ededed; color:#777; font-size:36px; cursor:pointer; }
.assistant-sticker .assistant-media-placeholder { width:150px; background:transparent; }
.assistant-cancel { border:0; background:transparent; color:#68766e; cursor:pointer; }
.assistant-attachment .voice-msg { border:0; font:inherit; cursor:pointer; }
.assistant-attachment .media-video { max-width:100%; }

/* 群公告与群管理（与 App 的群公告/群管理页对齐） */
.group-announcement-banner { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 8px 12px 2px; padding: 0 6px 0 0; border-radius: 10px; background: #fff7e6; color: #6b4d12; }
.group-announcement-banner.hidden { display: none; }
.group-announcement-banner-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 10px 12px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.group-announcement-banner-tag { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; background: #f0c674; color: #4a3608; font-size: 12px; }
.group-announcement-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-announcement-banner-close { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.announcement-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.announcement-footer-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 100%; margin-inline-start: auto; }
.announcement-content { margin-top: 8px; max-height: 42vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
#groupAnnouncementInput { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #e3e3e3; border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.6; resize: vertical; }
.group-admins-count { margin-left: auto; margin-right: 6px; color: #9b9b9b; }
.announcement-unread-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.group-admin-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.group-admin-row .group-admin-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .group-announcement-banner { background: #3a3222; color: #e8d4a8; }
  .group-announcement-banner-tag { background: #6b5426; color: #f0e2c0; }
  #groupAnnouncementInput { border-color: #3a3a3a; background: #1f1f1f; color: #ddd; }
}

/* FOHOW 助理：首次欢迎卡片和输入框上方快捷问题，与 App 对齐。 */
.fohow-topics { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ece3c9; width: 100%; min-width: 0; box-sizing: border-box; }
.fohow-topics-title { color: #78672d; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.fohow-topic { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px; margin: 0 0 6px; border: 1px solid #eee6ce; border-radius: 10px; background: #faf7ed; color: #675521; font: inherit; font-size: 14px; line-height: 1.4; text-align: start; cursor: pointer; touch-action: manipulation; box-sizing: border-box; }
.fohow-topic > span:nth-child(2) { min-width: 0; flex: 1; white-space: normal; overflow-wrap: anywhere; }
.fohow-topic-number { flex: 0 0 18px; font-size: 12px; text-align: center; color: #85723b; }
.fohow-topic-arrow { flex: 0 0 auto; font-size: 20px; }
.fohow-topic:hover:not(:disabled) { background: #f2ead4; }
.fohow-topic:focus-visible { outline: 2px solid #9c8338; outline-offset: 2px; }
.fohow-topic:disabled { opacity: .58; cursor: wait; }
.fohow-topics-waiting { font-size: 12px; line-height: 1.5; color: #78672d; margin-top: 6px; }
.fohow-topics-waiting[hidden] { display: none; }
#assistantQuickQuestions { flex: 0 0 auto; min-width: 0; width: 100%; box-sizing: border-box; padding: 12px 16px 8px; background: var(--bg, #f7f7f7); container-type: inline-size; }
.fohow-quick-scroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fohow-quick-scroll .fohow-topic { width: 100%; min-width: 0; min-height: 58px; margin: 0; padding: 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; text-align: start; white-space: normal; overflow-wrap: anywhere; background: #fffdf7; border: 1px solid #ebe4d3; box-shadow: 0 2px 6px #6d552b06; transition: background .15s, border-color .15s; }
.fohow-quick-label { flex: 1; }
.fohow-quick-scroll .fohow-topic-number { flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #f1eada; color: #8a743b; font-size: 11px; }
.fohow-quick-scroll .fohow-topic-arrow { color: #ab9a72; font-size: 18px; }
@container (max-width: 540px) { .fohow-quick-scroll { grid-template-columns: 1fr; gap: 6px; } .fohow-quick-scroll .fohow-topic { min-height: 44px; padding: 8px 10px; } }
@media (max-width: 600px) { #assistantQuickQuestions { padding: 8px 10px 6px; } }
/* 常用问题栏顶部：左侧小标题、右侧关闭；关闭后在「+」里可以重新打开。 */
.fohow-quick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 6px; min-height: 28px; }
.fohow-quick-title { color: #8a7a4a; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.fohow-quick-close { flex: none; width: 28px; height: 28px; margin-inline-end: -6px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #9a9384; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fohow-quick-close svg { width: 16px; height: 16px; }
.fohow-quick-close:hover { background: rgba(0, 0, 0, .06); color: #5f574a; }
.fohow-quick-close:focus-visible { outline: 2px solid #9c8338; outline-offset: 1px; }
@media (max-width: 600px) { .fohow-quick-head { margin: -2px 0 4px; } }
.message.group-membership-notice { justify-content: center; align-self: stretch; margin: 14px 12px; color: #8a8a8a; text-align: center; }
.group-membership-notice .bubble-body { max-width: 90%; padding: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* TCM health journey: consent and limited health access, separate from archive sharing. */
.more-panel-journey-icon { background: #e4f3eb; color: #247658; }
.health-journey-card { border-color: #d1e7da; }
.health-journey-card .health-archive-message-head { background: linear-gradient(135deg, #e2f2e8, #faf8ed); }
.health-journey-card .health-archive-message-copy { color: #355b47; }
.health-journey-symbol { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; border-radius:11px; color:#fff; background:#328261; font-size:22px; }
.health-journey-sheet .health-archive-panel { background:#fbfdf9; }
.health-journey-sheet .health-archive-header { background:#fbfdf9; }
.health-journey-sheet .health-archive-header h2 { color:#214d39; }
.health-journey-intro { display:flex; gap:10px; align-items:center; padding:14px 0 8px; color:#356448; }
.health-journey-tools { padding:14px; border:1px solid #d8e9da; border-radius:14px; line-height:1.9; color:#3a6149; background:#eff6ee; font-size:14px; }
.health-journey-expiry { display:grid; gap:9px; margin-top:18px; color:#294934; font-size:14px; font-weight:600; }
.health-journey-expiry input { box-sizing:border-box; width:100%; min-width:0; padding:12px; border:1px solid #cfdfd1; border-radius:10px; background:#fff; color:#2d503a; font:inherit; -webkit-text-fill-color:#2d503a; }
.health-journey-expiry input:disabled { opacity:1; background:#f2f4ef; }
.health-journey-durations { display:flex; gap:10px; margin-top:10px; }
.health-journey-durations button { flex:1; border:1px solid #d7e2d5; background:#fff; color:#356448; padding:9px; border-radius:10px; }
.health-journey-hint { font-size:12px; color:#73836f; line-height:1.6; }
.health-journey-sheet .health-archive-privacy { color:#6a755e; background:#f4f1e6; border-radius:10px; padding:12px; }
.health-journey-actions { display:grid; gap:10px; margin:12px 0 8px; }
.health-journey-actions button { min-height:44px; }
.health-journey-card .primary, .health-journey-sheet .primary { background:#2e7d59; border-color:#2e7d59; }
.health-journey-error { font-size:13px; color:#a84433; line-height:1.5; }

/* App parity: accessible sheets and stable, reusable business controls. */
.parity-dialog{width:min(560px,calc(100% - 24px));max-height:88dvh;border:0;border-radius:20px;padding:0;background:#f7f8fa;color:#202932;box-shadow:0 18px 70px #102e3a33;font:inherit;overscroll-behavior:contain}
.parity-dialog::backdrop{background:#152b3b70;backdrop-filter:blur(3px)}
.parity-dialog>header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:#fff;border-bottom:1px solid #e9edef}
.parity-dialog h2{font-size:18px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.parity-dialog button,.parity-dialog input,.parity-dialog textarea{font:inherit}
.parity-dialog button{cursor:pointer;border:1px solid #dce5e5;border-radius:12px;background:#fff;color:#234448;padding:10px 14px;min-height:44px}
.parity-dialog button:disabled{opacity:.45;cursor:default}
.parity-dialog button:focus-visible,.parity-search:focus-visible{outline:2px solid #278d82;outline-offset:2px}
.parity-dialog [hidden],.group-transfer-owner-item[hidden]{display:none!important}
.parity-body{padding:16px 20px 24px;display:flex;flex-direction:column;gap:12px;overflow-wrap:anywhere}
.parity-row{display:flex;flex-direction:column;gap:9px;width:100%;padding:14px;margin:0 0 10px;border:1px solid #e1e8e9;border-radius:14px;background:#fff;box-sizing:border-box;text-align:start;color:inherit;text-decoration:none}
.parity-row small,.parity-empty{color:#687b80;line-height:1.65;font-size:13px;white-space:pre-wrap}
.parity-row[aria-pressed=true]{border-color:#267f74;background:#edf7f4}
.parity-search{width:100%;box-sizing:border-box;min-height:44px;padding:10px 14px;border:1px solid #dce5e5;border-radius:12px;background:#fff;font:inherit}
.parity-toggle{flex-direction:row;align-items:center;justify-content:space-between;min-height:56px}
.parity-toggle input{width:22px;height:22px;accent-color:#287b70;flex-shrink:0}
.parity-actions{display:flex;gap:8px;flex-wrap:wrap}
.parity-dialog .parity-primary{background:#256e65;color:#fff;border-color:#256e65}
.parity-entry{padding:13px 18px;min-height:56px;text-align:start;flex-shrink:0;gap:10px;color:#235e59;background:#f2f8f6;border-bottom:1px solid #e0ece7;font-size:14px}
.parity-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.parity-conversation{display:flex;align-items:center;gap:10px;text-align:start}
.parity-message{padding:12px 14px;border-radius:14px;background:#fff;margin:10px 30px 10px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.parity-message.mine{margin:10px 0 10px 30px;background:#e4f2e9}
.parity-message.notice{background:none;color:#687b80;font-size:13px;margin-inline:0;text-align:center}
.parity-message small{display:block;color:#718087;font-size:11px;margin-top:8px}
.parity-message img,.parity-message video{display:block;max-width:100%;max-height:260px;border-radius:9px;object-fit:contain}
.parity-message audio{max-width:100%}
.parity-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:10px;border-top:1px solid #dce5e5}
.parity-compose textarea{min-width:0;border:1px solid #dce5e5;border-radius:12px;padding:10px;resize:vertical}
.parity-compose input[type=file]{grid-column:1/-1;max-width:100%;font-size:13px}
.parity-location-card{display:flex;flex-direction:column;gap:8px;min-width:160px;max-width:260px;text-align:start;border:0;border-radius:12px;padding:14px;background:#f1f7f2;color:#274c44;cursor:pointer}
.parity-location-card>span{font-size:32px}.parity-location-card small{font-size:12px;color:#55736c}
.parity-speech{padding:10px 16px;color:#7a5c30;background:#fff7e8;font-size:13px;text-align:center}
[data-request-count]::after{content:attr(data-request-count);display:inline-flex;align-items:center;justify-content:center;margin-inline-start:6px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;color:#fff;background:#df4a4a;font-size:11px;vertical-align:middle;box-sizing:border-box}
@media(max-width:480px){.parity-dialog{width:100%;max-width:100%;max-height:93dvh;margin:auto 0 0;border-radius:20px 20px 0 0}.parity-body{padding:14px 16px calc(20px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:no-preference){.parity-dialog[open]{animation:parity-sheet-in .16s ease-out}@keyframes parity-sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
.parity-search-entry{border:0;background:transparent;color:#43645a;min-width:40px;min-height:40px;font-size:24px;cursor:pointer}
.media-preview-action[hidden]{display:none!important}
.parity-recent{display:flex;align-items:center}.parity-recent>.status-item{flex:1;min-width:0}.parity-recent-menu{border:0;background:transparent;min-width:36px;min-height:44px;font-size:20px;color:#6b8580;cursor:pointer}

.parity-message{position:relative;padding-inline-end:36px}.parity-dialog .parity-message-menu{position:absolute;top:3px;right:2px;min-height:36px;padding:4px 7px;background:transparent;border:0;font-size:18px;color:#6b8580}
.parity-compose-tools,.parity-voice-draft{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.parity-voice-draft audio{max-width:100%}
.parity-stickers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.parity-stickers button{min-width:0;padding:6px;font-size:24px}.parity-stickers img{width:100%;max-height:90px;object-fit:contain}
.date-separator[role=button]{cursor:pointer}.date-separator[role=button]:focus-visible{outline:2px solid #278d82;outline-offset:2px}

.parity-scanner{display:block;width:100%;max-height:55dvh;object-fit:cover;border-radius:16px;background:#142424}
.parity-scanner-stage{overflow:hidden;border-radius:16px;max-height:55dvh}

.app-download-link {
  color: var(--wechat-green, #07c160);
  text-decoration: none;
  white-space: nowrap;
}
.meeting-room-main { position: relative; }
.meeting-room.minimized .meeting-flip-fab { display: none; }
.meeting-flip-fab {
  position: absolute;
  right: 12px;
  bottom: calc(var(--meeting-bar-height, 96px) + 12px);
  z-index: 6;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 24px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meeting-audio-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meeting-audio-help-head button { border: 0; background: transparent; color: inherit; min-width: 44px; min-height: 44px; font-size: 24px; cursor: pointer; }
.meeting-audio-help-body { margin: 0 0 12px; font-size: 13px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.meeting-flip-fab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
/* Keep the call overlay fixed; anchor the camera control to its toolbar. */
.rtc-call #rtcActiveActions > #rtcSwitchCameraBtn {
  position: absolute;
  grid-area: auto;
  right: 12px;
  bottom: calc(100% + 12px);
  z-index: 8;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  gap: 0;
}
.rtc-call #rtcSwitchCameraBtn .rtc-control-circle { width: 48px; height: 48px; }
.rtc-call #rtcSwitchCameraBtn [data-call-action-label] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 600px) {
  .rtc-call #rtcActiveActions[data-control-count="5"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.live-flip-fab {
  position: fixed;
  right: 12px;
  bottom: 108px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 22px;
}

/* Company directory: same hierarchy and touch targets as native contacts. */
.enterprise-home{flex:none;padding:12px 16px 8px;background:#fff;border-bottom:8px solid #f4f5f6}
.enterprise-home h3{margin:0 0 8px;font-size:13px;color:#7a8593;font-weight:500}.enterprise-home p{font-size:13px;color:#7a8593}
.enterprise-company,.enterprise-member{display:flex;align-items:center;gap:12px;width:100%;border:0;background:#fff;text-align:start;color:#202c3a;cursor:pointer;min-height:64px;padding:10px 0}
.enterprise-company>span:nth-child(2),.enterprise-member-text{flex:1;min-width:0;overflow-wrap:anywhere}
.enterprise-building{width:44px;height:44px;border-radius:10px;background:#2578db;color:white;font-size:32px;text-align:center;line-height:44px}
.modal-enterprise-directory{width:min(520px,96vw);height:min(780px,90dvh);padding:0;display:flex;flex-direction:column;overflow:hidden;background:#f5f6f7;border-radius:16px}
.enterprise-head{display:flex;align-items:center;justify-content:space-between;background:white;padding:12px 16px}.enterprise-head h3{font-size:17px;margin:0}.enterprise-head>span{width:32px}
#enterpriseCompanyName{font-size:20px;margin:0;padding:8px 20px 16px;background:white;overflow-wrap:anywhere}
#enterpriseSearch{margin:0 16px 12px;width:calc(100% - 32px);padding:12px 14px;border:1px solid #e6e9ee;border-radius:12px;min-height:44px;font-size:15px;background:white}
.enterprise-list{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}.enterprise-list h4{font-size:13px;color:#687687;font-weight:500;margin:16px 20px 8px}
.enterprise-member{padding:12px 20px;border-bottom:1px solid #f4f5f6}.enterprise-member .avatar{width:48px;height:48px;border-radius:10px;flex:none}.enterprise-member-text strong{font-size:16px;font-weight:500;display:block}.enterprise-member-text small{font-size:13px;color:#7a8593;display:block;margin-top:5px}
.enterprise-footer{padding:8px 16px max(8px,env(safe-area-inset-bottom));text-align:center}.enterprise-footer p{font-size:12px;color:#7a8593;margin:4px}.enterprise-info-row{gap:20px}.enterprise-info-row strong{text-align:end;font-size:14px;font-weight:500;overflow-wrap:anywhere}
.enterprise-footer [hidden]{display:none!important}
@media(max-width:600px){.modal-enterprise-directory{width:100%;height:100dvh;max-height:100dvh;max-width:100%;border-radius:0;inset:0;transform:none}}

#enterpriseSearch:focus{outline:2px solid #4b8ee5;outline-offset:1px}