/* Material 3 system theme for the whole app */
:root {
  /* unified app tokens */
  --brand-primary: #4f7ef5;
  --brand-primary-hover: #3f70ee;
  --brand-primary-soft: #e9efff;
  --brand-success: #16a34a;
  --brand-warning: #f59e0b;
  --brand-danger: #dc2626;
  --ui-text: #111827;
  --ui-text-muted: #6b7280;
  --ui-text-soft: #9ca3af;
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-hover: #f1f5f9;
  --ui-border: #e5e7eb;
  --ui-border-strong: #cbd5e1;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-shadow-1: 0 2px 8px rgba(15, 23, 42, 0.06);
  --ui-shadow-2: 0 6px 16px rgba(15, 23, 42, 0.1);
  --ui-transition-fast: 120ms ease;
  --ui-transition: 180ms ease;

  color-scheme: light;
  --md-sys-color-primary: var(--brand-primary);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: var(--brand-primary-soft);
  --md-sys-color-on-primary-container: var(--ui-text);
  --md-sys-color-secondary: var(--ui-text-muted);
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-surface: var(--ui-bg);
  --md-sys-color-surface-container: #f1f5f9;
  --md-sys-color-surface-container-high: #e9eef5;
  --md-sys-color-surface-container-highest: #dfe7f0;
  --md-sys-color-on-surface: var(--ui-text);
  --md-sys-color-on-surface-variant: var(--ui-text-muted);
  --md-sys-color-outline: var(--ui-border-strong);
  --md-sys-color-outline-variant: var(--ui-border);
  --md-sys-color-error: var(--brand-danger);
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-success: var(--brand-success);
  --md-elevation-1: var(--ui-shadow-1);
  --md-elevation-2: var(--ui-shadow-2);
  --md-elevation-3: 0 10px 24px rgba(15, 23, 42, 0.14);
  --md-shape-corner-sm: var(--ui-radius-sm);
  --md-shape-corner-md: var(--ui-radius-md);
  --md-shape-corner-lg: var(--ui-radius-lg);
  /* legacy aliases for existing inline styles/scripts */
  --accent: var(--md-sys-color-primary);
  --accent-hover: var(--brand-primary-hover);
  --text-primary: var(--md-sys-color-on-surface);
  --text-secondary: var(--md-sys-color-on-surface-variant);
  --border: var(--md-sys-color-outline-variant);
  --bg-card: var(--md-sys-color-surface);
  --bg-input: var(--md-sys-color-surface-container);
  --bg-dark: var(--md-sys-color-surface);
  --danger: var(--md-sys-color-error);
  --link-color: var(--md-sys-color-primary);
  --link-hover: color-mix(in srgb, var(--md-sys-color-primary) 80%, black);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Microsoft YaHei", "微软雅黑", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
}

.material-symbols-outlined {
  font-family: "Microsoft YaHei", "微软雅黑", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-variation-settings: normal;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}

a {
  color: var(--md-sys-color-primary);
}

.main-content {
  min-height: calc(100vh - 56px);
  padding-top: 56px;
}

/* top app bar */
.beijing-time-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--md-sys-color-surface) 88%, white);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  backdrop-filter: blur(8px);
}

.beijing-time-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--md-sys-color-on-surface-variant);
}

.beijing-time-label {
  font-size: 12px;
}

.beijing-time-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.site-nav a {
  text-decoration: none;
  color: var(--md-sys-color-on-surface-variant);
  padding: 8px 12px;
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}

.site-nav a:hover {
  color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}

.site-nav .notif-badge-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: 11px;
  font-weight: 700;
}

/* shared controls */
.btn,
button,
input[type="submit"] {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 10px 18px;
  font: inherit;
  cursor: pointer;
}

.btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.btn-primary:hover {
  filter: brightness(.97);
  box-shadow: var(--md-elevation-1);
}

.btn-secondary {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}

.btn-secondary:hover {
  background: var(--md-sys-color-surface-container-high);
}

.btn-danger {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.btn-small,
.f-btn-xs {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

input,
textarea,
select,
.f-input,
.f-select,
.f-textarea,
.search-input,
.user-search-input {
  width: 100%;
  border-radius: var(--md-shape-corner-sm);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: color-mix(in srgb, var(--md-sys-color-surface-container) 85%, white);
  color: var(--md-sys-color-on-surface);
  padding: 10px 12px;
  font: inherit;
}

textarea {
  resize: vertical;
  min-height: 76px;
}

/* flash + toast + modal */
.flash-messages {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  width: min(92vw, 760px);
}

.flash {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-shape-corner-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}

.flash-error {
  background: var(--md-sys-color-error-container);
  border-color: color-mix(in srgb, var(--md-sys-color-error) 30%, white);
}

.toast-container {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-item {
  border-radius: 10px;
  padding: 9px 14px;
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
}

.toast-item.toast-success {
  background: var(--md-sys-color-success);
}

.toast-item.toast-error {
  background: var(--md-sys-color-error);
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, .36);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.active {
  display: flex;
}

.modal-content,
.preview-modal-content {
  width: min(96vw, 560px);
  border-radius: var(--md-shape-corner-md);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-elevation-3);
  padding: 18px;
}

.modal-content h3 {
  margin: 0 0 12px;
  font-size: 20px;
}

.preview-modal .preview-modal-content {
  width: auto;
  max-width: 92vw;
  max-height: 90vh;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.preview-close {
  position: absolute;
  right: 0;
  top: -42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  line-height: 1;
}

.site-nav a.active {
  color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 13%, transparent);
  font-weight: 700;
}

.preview-body {
  display: grid;
  place-items: center;
}

.preview-media {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
}
.preview-image.is-zoomed { max-width: none; max-height: none; width: auto; height: auto; transform: scale(1.8); transform-origin: center; cursor: zoom-out; }

@media (max-width: 760px) {
  .preview-modal { padding: 0; }
  .preview-modal .preview-modal-content { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
  .preview-modal .preview-body { width: 100%; height: 100%; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
  .preview-modal .preview-media { max-width: 100%; max-height: 100%; border-radius: 0; }
  .preview-modal .preview-close { position: fixed; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; }
  .preview-image.is-zoomed { transform: scale(1.45); }
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

#roomFilesModal .modal-content,
.room-highlights-modal,
.room-schedule-modal {
  width: min(96vw, 980px);
  max-height: 86vh;
  overflow: auto;
}

.schedule-cal-nav,
.schedule-cal-weekdays,
.schedule-cal-grid,
.schedule-day-list,
.room-highlights-list,
#roomFilesList {
  border-radius: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
}

.schedule-cal-nav,
.schedule-cal-weekdays,
.schedule-cal-grid {
  padding: 10px;
}

.schedule-cal-weekdays,
.schedule-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.schedule-cal-cell {
  min-height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--md-sys-color-surface);
  border: 1px solid transparent;
}

.schedule-cal-day {
  cursor: pointer;
}

.schedule-cal-day:hover {
  border-color: var(--md-sys-color-primary);
}

.schedule-cal-day.is-selected {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.schedule-day-list,
.room-highlights-list,
#roomFilesList {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  max-height: 280px;
  overflow: auto;
}

.schedule-day-item,
.room-highlight-item,
.room-files-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

/* auth */
.auth-container {
  min-height: calc(100vh - 56px);
  display: grid;
  place-items: center;
  padding: 20px;
}

.auth-card {
  width: min(100%, 440px);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-shape-corner-lg);
  box-shadow: var(--md-elevation-2);
  padding: 28px 24px;
}

.auth-title {
  margin: 0;
  font-size: 30px;
}

.auth-subtitle {
  margin: 8px 0 18px;
  color: var(--md-sys-color-on-surface-variant);
}

.auth-form .form-group,
.profile-form .form-group,
.modal-content .form-group {
  margin-bottom: 14px;
}

.auth-form label,
.profile-form label,
.modal-content label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
}

.auth-footer {
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  margin: 12px 0 0;
}

/* profile */
.profile-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px 36px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.profile-title {
  margin: 0;
  font-size: 28px;
}

.profile-card {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-shape-corner-lg);
  box-shadow: var(--md-elevation-1);
  padding: 22px;
}

.profile-hero {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.profile-avatar-wrap,
.profile-avatar,
.profile-avatar-placeholder {
  width: 92px;
  height: 92px;
  border-radius: 50%;
}

.profile-avatar-placeholder {
  display: grid;
  place-items: center;
  font-size: 34px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 10px;
}

.profile-avatar-pick {
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  padding: 0;
}

.profile-avatar-pick.is-current {
  border-color: var(--md-sys-color-primary);
}

.profile-avatar-pick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.form-group-full {
  grid-column: 1 / -1;
}

.profile-forum-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* chat */
.chat-layout {
  height: calc(100vh - 56px);
  display: flex;
  overflow: hidden;
}

.chat-sidebar {
  width: 308px;
  min-width: 308px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
}

.sidebar-header {
  padding: 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sidebar-header h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

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

.user-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.user-avatar-small {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.user-avatar-placeholder {
  display: inline-grid;
  place-items: center;
  background: var(--md-sys-color-primary-container);
}

.btn-link,
.btn-logout {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
}

.btn-link:hover,
.btn-logout:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
}

.sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.tab-btn {
  border-radius: 999px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface-variant);
}

.tab-btn.active {
  background: var(--md-sys-color-secondary);
  color: var(--md-sys-color-on-secondary);
  border-color: var(--md-sys-color-secondary);
}

.tab-content {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}

.tab-content.active {
  display: flex;
}

.btn-create-room {
  margin: 10px;
  border-radius: 999px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.room-list,
.online-list,
.user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.room-item,
.user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  cursor: pointer;
}

.room-item:hover,
.room-item.active,
.user-item:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}

.room-item.active {
  border-left: 3px solid var(--md-sys-color-primary);
}

.btn-pin {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  border-radius: 8px;
}

.private-section-title,
.online-count {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
}

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

.chat-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--md-sys-color-on-surface-variant);
}

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

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: color-mix(in srgb, var(--md-sys-color-surface) 92%, white);
}

.chat-room-name {
  margin: 0;
  flex: 1;
  font-size: 18px;
}

.btn-back {
  display: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
}

.chat-header-actions {
  display: flex;
  gap: 4px;
}

.chat-header-actions button {
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
  padding: 7px;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
}

.chat-header-actions button:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}

.chat-search-panel {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.messages-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.messages-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.message-item {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.message-item.own {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

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

.message-body {
  max-width: min(72%, 720px);
  display: flex;
  flex-direction: column;
}

.message-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
  margin: 2px 4px;
}

.message-content {
  border-radius: 18px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  padding: 9px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-item.own .message-content {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.message-item.own .message-meta {
  justify-content: flex-end;
}

.message-reply {
  margin-bottom: 6px;
  border-radius: 10px;
  padding: 6px 8px;
  border-left: 3px solid var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
}

.msg-image,
.msg-video-thumb {
  width: auto;
  height: auto;
  max-width: min(280px, 68vw);
  max-height: min(280px, 46vh);
  border-radius: 12px;
  object-fit: contain;
  display: block;
}

.auth-choice-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}

.auth-choice-divider::before,
.auth-choice-divider::after {
  height: 1px;
  flex: 1;
  background: var(--md-sys-color-outline-variant);
  content: '';
}

.lounge-guest-entry {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  color: #9a3412;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.lounge-guest-entry:hover {
  border-color: #fb923c;
  box-shadow: 0 9px 24px rgba(194, 65, 12, .13);
  transform: translateY(-1px);
}

.lounge-guest-entry-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f97316;
  color: #fff;
  box-shadow: 0 7px 15px rgba(249, 115, 22, .23);
}

.lounge-guest-entry-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lounge-guest-entry > span:nth-child(2) { min-width: 0; }
.lounge-guest-entry strong,
.lounge-guest-entry small { display: block; }
.lounge-guest-entry strong { font-size: 15px; }
.lounge-guest-entry small { margin-top: 3px; color: #9a6a4a; font-size: 11px; line-height: 1.4; }
.lounge-guest-entry > b { font-size: 22px; }

.chat-input-area {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  padding: 10px 12px;
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.btn-attach,
.btn-emoji,
.btn-voice {
  border-radius: 999px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

#messageInput {
  flex: 1;
  min-height: 68px;
}

.emoji-picker {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 8px);
  width: min(380px, calc(100% - 24px));
  border-radius: var(--md-shape-corner-md);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-elevation-2);
  padding: 10px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  max-height: 240px;
  overflow: auto;
}

.emoji-item {
  border-radius: 8px;
  padding: 4px;
  text-align: center;
}

.emoji-item:hover {
  background: var(--md-sys-color-surface-container-high);
}

/* admin */
.admin-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}

.admin-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-nav a {
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

.admin-nav .admin-logout {
  margin-left: auto;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.admin-stat-card {
  border-radius: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  padding: 16px;
}

.admin-table-wrap {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 16px;
  overflow: auto;
  background: var(--md-sys-color-surface);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.admin-table th {
  background: var(--md-sys-color-surface-container);
}

.admin-form-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.admin-form-inline input,
.admin-form-inline select {
  width: auto;
  min-width: 160px;
}

.admin-pagination {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* responsive */
@media (max-width: 1024px) {
  .f-index-layout,
  .f-thread-layout,
  .f-board-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .chat-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 1100;
    transform: translateX(0);
    transition: transform .2s ease;
    box-shadow: var(--md-elevation-2);
  }
  .chat-sidebar.hidden {
    transform: translateX(-100%);
  }
  .btn-back {
    display: inline-grid;
  }
  .message-body {
    max-width: 86%;
  }
}

@media (max-width: 640px) {
  .beijing-time-bar {
    padding: 0 10px;
    gap: 8px;
  }
  .site-nav {
    gap: 4px;
  }
  .site-nav a {
    padding: 6px 9px;
    font-size: 12px;
  }
  .chat-sidebar {
    width: 100%;
    min-width: 100%;
  }
  .chat-search-panel {
    flex-wrap: wrap;
  }
  .chat-search-panel .search-input,
  .btn-search-go {
    width: 100%;
  }
  .profile-form-grid {
    grid-template-columns: 1fr;
  }
  .f-post {
    flex-direction: column;
  }
  .f-post-author {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }
}
/* 聊天室 - 响应式设计（仅白天模式），固定微软雅黑 14px */
:root {
    --bg-dark: #f5f5f5;
    --bg-card: #ffffff;
    --bg-input: #eeeeee;
    --accent: #1976d2;
    --accent-hover: #1565c0;
    --text-primary: #212121;
    --text-secondary: #757575;
    --border: #e0e0e0;
    --success: #2e7d32;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --link-color: #1565c0;
    --link-hover: #0d47a1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 14px;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.beijing-time-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: #ffeb3b;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.site-nav a {
    color: #1a1a2e;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
}

.site-nav a:hover {
    background: rgba(0, 0, 0, 0.1);
}

.site-nav a.site-nav-schedule {
    font-weight: 600;
}

.beijing-time-label {
    font-size: 0.9rem;
}

.beijing-time-value {
    font-variant-numeric: tabular-nums;
}

.main-content {
    padding-top: 48px;
    min-height: calc(100vh - 48px);
}

/* 登录/注册 */
.auth-container {
    min-height: calc(100vh - 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.auth-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.auth-form select,
.auth-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
}

.auth-form textarea {
    resize: vertical;
    min-height: 80px;
}

.profile-row {
    display: flex;
    gap: 16px;
}

.form-group-half {
    flex: 1;
}

.form-group-half label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.form-group-half input,
.form-group-half select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

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

.btn-block {
    width: 100%;
    margin-top: 0.5rem;
}

/* 个人资料页 */
/* 个人资料页 - 完整布局 */
.profile-page {
    min-height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    padding: 0 20px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 8px;
}

.profile-back {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.profile-back:hover {
    text-decoration: underline;
}

.profile-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.profile-container {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

.profile-card {
    width: 100%;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
}

.profile-avatar-wrap {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
    background: var(--accent);
    color: white;
}

.profile-hero-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.profile-user-id {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.btn-avatar {
    align-self: flex-start;
}

.avatar-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 10px;
    max-width: 440px;
}

.profile-avatar-pick {
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-input);
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-avatar-pick img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-pick:hover {
    border-color: var(--accent);
}

.profile-avatar-pick.is-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.25);
}

.profile-section {
    margin-bottom: 28px;
}

.profile-section:last-of-type {
    margin-bottom: 0;
}

.profile-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.profile-forum-stats {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.profile-forum-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.profile-forum-links a {
    color: var(--accent);
    text-decoration: none;
}

.profile-forum-links a:hover {
    text-decoration: underline;
}

.profile-ban-notice {
    margin-top: 8px;
    padding: 8px 12px;
    background: #ffebee;
    color: #c62828;
    border-radius: 8px;
    font-size: 0.9rem;
}

.profile-ban-notice .ban-reason {
    opacity: 0.9;
}

.profile-form .form-group {
    margin-bottom: 1.25rem;
}

.profile-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.profile-form input,
.profile-form select,
.profile-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
}

.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.profile-form textarea {
    resize: vertical;
    min-height: 80px;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.profile-form-grid .form-group-full {
    grid-column: 1 / -1;
}

.btn-save {
    margin-top: 8px;
}

.profile-readonly {
    background: var(--bg-input) !important;
    cursor: default;
    color: var(--text-secondary);
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--accent);
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.auth-footer.admin-entry {
    margin-top: 0.75rem;
}

.auth-footer.admin-entry a {
    color: var(--accent);
}

/* Flash 消息 */
.flash-messages {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.flash {
    padding: 12px 24px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.flash-error {
    border-color: var(--accent);
}

/* 聊天布局 */
.chat-layout {
    display: flex;
    height: calc(100vh - 48px);
    overflow: hidden;
}

.chat-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h2 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.user-profile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.user-profile-link:hover .user-name {
    color: var(--accent);
}

.user-avatar-small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}

.user-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.btn-link {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0;
}

.btn-link:hover {
    color: var(--accent);
}

.btn-sessions {
    margin-left: 4px;
}

.btn-notifications {
    margin-left: 2px;
}

.btn-link:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.btn-notifications[data-push-tone="on"] {
    color: var(--success, #2e7d32);
    font-weight: 600;
}

.btn-notifications[data-push-tone="pending"] {
    color: var(--accent);
}

.btn-logout {
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
}

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

.sidebar-tabs {
    display: flex;
    padding: 0 12px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}

.tab-btn {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.tab-btn.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    margin-bottom: -1px;
}

.tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.tab-content.active {
    display: flex;
}

.btn-create-room {
    margin: 12px;
    padding: 10px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}

.btn-create-room:hover {
    background: var(--accent-hover);
}

.room-list, .online-list {
    list-style: none;
    overflow-y: auto;
    flex: 1;
}

.room-item {
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-item.pinned {
    background: linear-gradient(to right, rgba(255, 107, 53, 0.05), transparent);
    border-left: 3px solid var(--accent);
}

.room-item:hover, .room-item.active {
    background: var(--bg-input);
}

.room-item.active {
    border-left: 3px solid var(--accent);
}

.btn-pin {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1rem;
    opacity: 0.7;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.btn-pin:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.1);
}

.btn-pin:active {
    transform: scale(0.95);
}

/* 未置顶状态 - 灰色 */
.room-item .btn-pin {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* 已置顶状态 - 醒目的红橙色，带动画 */
.room-item.pinned .btn-pin {
    filter: none;
    opacity: 1;
    animation: pin-bounce 0.5s ease;
}

@keyframes pin-bounce {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3) rotate(-10deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    75% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* 置顶状态的脉冲效果 */
.room-item.pinned .btn-pin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.2);
    animation: pin-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pin-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }
}

.room-item .btn-pin {
    position: relative;
}

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

/* secure E2EE chat */
.secure-chat-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: calc(100dvh - 56px);
  background: #f7fafc;
}

.secure-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ui-border);
  background: #ffffff;
}

.secure-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ui-border);
}

.secure-sidebar-head h2 {
  margin: 0;
  font-size: 18px;
}

.secure-sidebar-actions,
.secure-device-actions {
  display: flex;
  gap: 8px;
}

.secure-privacy-note,
.secure-device-warning {
  max-width: 620px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: var(--ui-radius-sm);
  background: #fffbeb;
  color: #78350f;
  font-size: 13px;
  line-height: 1.55;
}

.secure-empty .secure-privacy-note {
  margin: 0 20px;
}

.secure-key-status {
  margin-top: 3px;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.secure-key-status.is-ok {
  color: #15803d;
}

.secure-key-status.is-error {
  color: var(--brand-danger);
}

.secure-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #ffffff;
  color: var(--ui-text-muted);
}

.secure-icon-btn:hover {
  background: var(--ui-hover);
  color: var(--brand-primary);
}

.secure-search-row {
  padding: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.secure-search-row input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #f8fafc;
}

.secure-list-section {
  min-height: 0;
  padding: 10px;
}

.secure-contact-section {
  flex: 1;
  overflow-y: auto;
}

.secure-section-title {
  padding: 4px 6px 8px;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.secure-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.secure-list-item {
  margin: 0 0 4px;
}

.secure-list-item button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: var(--ui-text);
  text-align: left;
}

.secure-list-item button:hover,
.secure-list-item button.active {
  background: #edf4ff;
}

.secure-list-item button:disabled {
  cursor: not-allowed;
  color: var(--ui-text-soft);
}

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

.secure-list-meta {
  flex: 0 0 auto;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.secure-empty-row {
  padding: 12px 8px;
  color: var(--ui-text-muted);
  font-size: 13px;
}

.secure-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.secure-empty {
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--ui-text-muted);
}

.secure-empty-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: #ffffff;
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 800;
}

.secure-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.secure-chat-head {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.secure-back-btn {
  display: none;
}

.secure-peer-meta {
  min-width: 0;
  flex: 1;
}

.secure-peer-meta h3 {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secure-peer-meta div {
  margin-top: 2px;
  color: #15803d;
  font-size: 12px;
}

.secure-peer-meta div.is-warning {
  color: #dc2626;
  font-weight: 700;
}

.secure-peer-meta div.is-muted {
  color: var(--ui-text-muted);
}

.secure-chat-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.secure-safety-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #ffffff;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 800;
}

.secure-safety-btn[hidden],
.secure-key-warning[hidden] {
  display: none !important;
}

.secure-safety-btn:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.secure-safety-btn.is-warning {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.secure-key-warning {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-bottom: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  font-weight: 700;
}

.secure-network-status {
  padding: 8px 16px;
  border-bottom: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
}

.secure-network-status[hidden],
.secure-new-messages[hidden],
.secure-reply-bar[hidden] {
  display: none !important;
}

.secure-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.secure-message-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.secure-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.secure-message.mine {
  align-items: flex-end;
}

.secure-message.theirs {
  align-items: flex-start;
}

.secure-message-bubble {
  max-width: min(680px, 78%);
  padding: 10px 12px;
  border-radius: var(--ui-radius-md);
  background: #ffffff;
  color: var(--ui-text);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--ui-shadow-1);
}

.secure-message.mine .secure-message-bubble {
  background: #2563eb;
  color: #ffffff;
}

.secure-message.failed .secure-message-bubble {
  background: #fee2e2;
  color: #991b1b;
}

.secure-message.is-highlighted .secure-message-bubble {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

.secure-reply-quote {
  display: block;
  width: 100%;
  margin: 0 0 7px;
  padding: 6px 8px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid currentColor;
  border-radius: 4px;
  background: rgba(255,255,255,.18);
  color: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secure-message-bubble.secure-attachment-bubble {
  width: min(520px, 82%);
  max-width: min(520px, 82%);
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.secure-message.mine .secure-message-bubble.secure-attachment-bubble {
  background: transparent;
  color: var(--ui-text);
}

.secure-attachment-card {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: #ffffff;
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-1);
}

.secure-message.failed .secure-attachment-card {
  border-color: #fecaca;
  background: #fff1f2;
}

.secure-attachment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.secure-attachment-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: var(--ui-radius-sm);
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 800;
}

.secure-attachment-info {
  min-width: 0;
  flex: 1;
}

.secure-attachment-title {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secure-attachment-detail {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secure-attachment-caption {
  padding: 0 10px 10px;
  color: var(--ui-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.secure-attachment-preview {
  color: var(--ui-text-muted);
  font-size: 13px;
}

.secure-attachment-preview.is-loading,
.secure-attachment-preview:not(:empty) {
  padding: 0 10px 10px;
}

.secure-attachment-preview img,
.secure-attachment-preview video {
  display: block;
  width: 100%;
  max-height: 360px;
  border-top: 1px solid var(--ui-border);
  object-fit: contain;
  background: #0f172a;
}

.secure-attachment-preview audio {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
}

.secure-attachment-actions {
  display: flex;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid #eef2f7;
}

.secure-attachment-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #f8fafc;
  color: var(--ui-text);
  font-weight: 700;
}

.secure-attachment-actions button:hover:not(:disabled) {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.secure-attachment-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.secure-message-meta {
  padding: 0 4px;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.secure-retry-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: #dc2626;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
}

.secure-new-messages {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 82px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #fff;
  color: #1d4ed8;
  box-shadow: var(--ui-shadow-1);
  font-weight: 800;
}

.secure-active { position: relative; }

.secure-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-top: 1px solid var(--ui-border);
  background: #f8fafc;
}

.secure-reply-text {
  flex: 1;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secure-reply-bar button { border: 0; background: transparent; font-size: 20px; }

.secure-device-panel {
  position: fixed;
  z-index: 10020;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,.55);
}

.secure-device-panel[hidden] { display: none !important; }

.secure-media-viewer {
  position: fixed;
  z-index: 10030;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(2,6,23,.94);
  touch-action: none;
}

.secure-media-viewer[hidden] { display: none !important; }
.secure-media-viewer > button { position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; }
.secure-media-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .18s ease; transform: scale(var(--secure-image-scale, 1)); }
.secure-media-viewer.is-zoomed img { --secure-image-scale: 2; }

.secure-device-dialog {
  width: min(620px, 100%);
  max-height: min(82dvh, 720px);
  overflow-y: auto;
  border-radius: var(--ui-radius-md);
  background: #fff;
  box-shadow: var(--ui-shadow-2);
}

.secure-device-dialog > .secure-device-warning,
.secure-device-dialog > .secure-privacy-note,
.secure-device-actions,
.secure-device-list { margin: 12px; }

.secure-device-actions button,
.secure-device-list button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #f8fafc;
  font-weight: 700;
}

.secure-device-list { list-style: none; padding: 0; }
.secure-device-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
.secure-device-list .device-info { flex: 1; min-width: 0; }
.secure-device-list strong, .secure-device-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secure-device-list small { margin-top: 3px; color: var(--ui-text-muted); }

.secure-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ui-border);
  background: #ffffff;
}

.secure-burn-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 16px 8px;
  background: #ffffff;
  color: var(--ui-text-muted);
  font-size: 12px;
}

.secure-compose textarea {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #f8fafc;
  line-height: 1.5;
}

.secure-tool-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #f8fafc;
  color: var(--ui-text-muted);
  font-size: 22px;
  font-weight: 700;
}

.secure-tool-btn:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.secure-send-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--brand-primary);
  color: #ffffff;
  font-size: 18px;
}

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

.secure-safety-panel {
  flex: 0 0 auto;
  margin: 10px 16px 0;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: #ffffff;
  box-shadow: var(--ui-shadow-1);
}

.secure-safety-panel[hidden] {
  display: none !important;
}

.secure-safety-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ui-border);
}

.secure-safety-head h3 {
  margin: 0;
  font-size: 17px;
}

.secure-safety-notice {
  margin: 12px 12px 0;
  padding: 9px 10px;
  border: 1px solid #bbf7d0;
  border-radius: var(--ui-radius-sm);
  background: #f0fdf4;
  color: #166534;
  font-size: 13px;
  line-height: 1.45;
}

.secure-safety-notice.is-warning {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.secure-safety-code {
  margin: 12px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: var(--ui-radius-sm);
  background: #eff6ff;
  color: #1e3a8a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  word-spacing: 4px;
}

.secure-safety-fields {
  display: grid;
  gap: 8px;
  margin: 0 12px 12px;
}

.secure-safety-fields div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #f8fafc;
}

.secure-safety-fields span {
  flex: 0 0 auto;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.secure-safety-fields strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secure-safety-copy {
  width: calc(100% - 24px);
  min-height: 42px;
  margin: 0 12px 12px;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--brand-primary);
  color: #ffffff;
  font-weight: 800;
}

.secure-safety-copy:hover {
  background: var(--brand-primary-hover);
}

@media (max-width: 760px) {
  .secure-chat-shell {
    grid-template-columns: 1fr;
    height: calc(100dvh - 56px);
    overflow: hidden;
  }

  .secure-sidebar {
    min-height: 0;
    height: 100%;
    border-right: 0;
  }

  .secure-main {
    display: none;
    min-height: 0;
  }

  .secure-chat-shell.is-chat-open .secure-sidebar {
    display: none;
  }

  .secure-chat-shell.is-chat-open .secure-main {
    display: flex;
    height: 100%;
  }

  .secure-back-btn {
    display: inline-grid;
    flex: 0 0 40px;
  }

  .secure-sidebar-head,
  .secure-chat-head {
    min-height: 58px;
    padding: 9px 10px;
  }

  .secure-peer-meta h3 {
    font-size: 16px;
  }

  .secure-peer-meta div {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .secure-safety-btn {
    min-height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .secure-key-warning {
    padding: 7px 10px;
    font-size: 12px;
  }

  .secure-list-section {
    padding: 8px;
  }

  .secure-contact-section {
    flex: 1;
  }

  .secure-list-item button {
    min-height: 52px;
  }

  .secure-messages {
    padding: 10px 10px 12px;
    overscroll-behavior: contain;
  }

  .secure-message-bubble {
    max-width: 86%;
    font-size: 14px;
  }

  .secure-message-bubble.secure-attachment-bubble {
    width: 90%;
    max-width: 90%;
  }

  .secure-attachment-preview img,
  .secure-attachment-preview video {
    max-height: 300px;
  }

  .secure-compose {
    gap: 6px;
    padding: 8px;
  }

  .secure-burn-toggle {
    padding: 0 10px calc(7px + env(safe-area-inset-bottom));
  }

  .secure-compose textarea {
    min-height: 42px;
    max-height: 108px;
    padding: 9px 10px;
  }

  .secure-send-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .secure-tool-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .secure-safety-panel {
    margin: 8px 10px 0;
    max-height: min(36dvh, 360px);
    overflow-y: auto;
    border-radius: var(--ui-radius-md);
  }

  .secure-safety-code {
    font-size: 19px;
  }

  .secure-new-messages { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .secure-network-status { padding: 7px 10px; font-size: 12px; }
  .secure-device-panel { padding: 0; place-items: end center; }
  .secure-device-dialog { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

@media (prefers-color-scheme: dark) {
  .secure-chat-shell, .secure-main { background: #0f172a; }
  .secure-sidebar, .secure-chat-head, .secure-compose, .secure-burn-toggle, .secure-device-dialog, .secure-attachment-card, .secure-message-bubble, .secure-icon-btn, .secure-safety-panel { background: #111827; color: #e5e7eb; }
  .secure-message.theirs .secure-message-bubble, .secure-compose textarea, .secure-search-row input { background: #1f2937; color: #e5e7eb; }
  .secure-privacy-note, .secure-device-warning { background: #292211; color: #fde68a; }
}

@media (max-width: 420px) {
  .secure-sidebar-head h2 {
    font-size: 17px;
  }

  .secure-icon-btn {
    width: 36px;
    height: 36px;
  }

  .secure-message-bubble {
    max-width: 92%;
    padding: 9px 10px;
  }

  .secure-message-bubble.secure-attachment-bubble {
    width: 96%;
    max-width: 96%;
    padding: 0;
  }

  .secure-attachment-actions {
    flex-wrap: wrap;
  }

  .secure-attachment-actions button {
    flex: 1 1 110px;
  }

  .secure-safety-code {
    font-size: 17px;
    word-spacing: 2px;
  }

  .secure-safety-fields div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .secure-safety-fields strong {
    max-width: 100%;
  }
}

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

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

.room-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.room-preview {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-item .room-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.room-item .room-unread.dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
}

.private-section {
    margin-bottom: 28px;
}

.private-section-title {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 16px 4px;
}

.private-room-list .room-item {
    padding-left: 16px;
}

.private-room-list .room-item .room-name {
    padding-left: 0;
}

.private-room-list .room-item.room-item-admin-chat {
    border: 2px solid #d4af37;
    border-radius: 8px;
    margin: 2px 4px;
    box-sizing: border-box;
}

.user-search-wrap {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}

.user-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.user-search-input:focus {
    border-color: var(--accent);
}

.user-list {
    list-style: none;
    overflow-y: auto;
}

.user-item-empty {
    padding: 12px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

.user-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.user-item:hover {
    background: var(--bg-input);
}

/* 私聊联系人：与超级管理员联系黄色高亮 */
.user-item.user-item-admin-chat {
    border: 2px solid #d4af37;
    border-radius: 10px;
    margin: 6px 8px;
    background: rgba(212, 175, 55, 0.10);
    font-weight: 700;
}

.user-item.user-item-admin-chat:hover {
    background: rgba(212, 175, 55, 0.16);
}

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

.search-input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 120px;
}

.chat-search-panel {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}

.chat-search-panel .search-input {
    width: auto;
    min-width: 120px;
    flex: 1 1 160px;
}

.chat-search-panel input[type="date"].search-input {
    flex: 0 0 150px;
}

.btn-search-go {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-search-go:hover {
    background: var(--accent-hover);
}

@media (max-width: 900px) {
    .chat-search-panel {
        flex-wrap: wrap;
    }

    .chat-search-panel .search-input {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }

    .chat-search-panel input[type="date"].search-input {
        flex: 1 1 calc(50% - 6px);
    }

    .btn-search-go {
        width: 100%;
    }
}

.btn-search, .btn-announcement, .btn-delete-room {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
}

.btn-room-highlights, .btn-room-files, .btn-room-settings, .btn-room-members {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
}

.btn-room-highlights:hover, .btn-room-files:hover, .btn-room-settings:hover, .btn-room-members:hover {
    color: var(--accent);
}

.btn-search:hover, .btn-announcement:hover {
    color: var(--accent);
}

.btn-delete-room:hover {
    color: #e94560;
}

.upload-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.upload-progress-filename {
    flex: 0 0 auto;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.upload-progress-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.upload-progress-pct {
    flex: 0 0 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.btn-upload-cancel {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 0.85rem;
    background: var(--border);
    color: var(--text-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-upload-cancel:hover {
    background: var(--accent);
    color: white;
}

.pending-file-send-wrap {
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
}

.pasted-image-drafts {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pasted-image-draft {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(320px, 100%);
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
}

.pasted-image-draft img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}

.pasted-image-draft-info {
    min-width: 0;
    flex: 1;
}

.pasted-image-draft-name {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pasted-image-draft-meta {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.pasted-image-draft-remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--border);
    color: var(--text-primary);
    flex: 0 0 auto;
    line-height: 1;
}

.message-caption {
    margin-top: 6px;
}

.pending-file-send-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pending-file-send-icon {
    flex: 0 0 auto;
    font-size: 1.35rem;
    line-height: 1.2;
    opacity: 0.9;
}

.pending-file-send-info {
    flex: 1;
    min-width: 0;
}

.pending-file-send-name {
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.pending-file-send-meta {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.pending-file-send-hint {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

.pending-file-send-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.btn-pending-file-send {
    padding: 6px 14px;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
}

.btn-pending-file-send:hover {
    filter: brightness(1.05);
}

.btn-pending-file-remove {
    padding: 6px 14px;
    font-size: 0.85rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: var(--border);
    color: var(--text-primary);
}

.btn-pending-file-remove:hover {
    background: var(--text-secondary);
    color: #fff;
}

@media (max-width: 520px) {
    .pending-file-send-main {
        flex-wrap: wrap;
    }
    .pending-file-send-actions {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
    }
}

.announcement-modal .announcement-content {
    padding: 16px;
    background: var(--bg-input);
    border-radius: 8px;
    margin: 16px 0;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.announcement-countdown {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.search-result-list {
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.search-result-item:hover {
    background: var(--bg-input);
}

.search-result-preview {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.search-result-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.modal-hint {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.search-result-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
}

#announcementInput {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    margin-bottom: 16px;
}

.online-count {
    padding: 12px 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.online-list .room-item {
    border-bottom: none;
}

/* 主聊天区 */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    min-width: 0;
}

.chat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.chat-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.chat-header {
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
}

.chat-room-name {
    font-size: 1.1rem;
    flex: 1;
}

.chat-room-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-room-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.chat-room-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.chat-room-description {
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-room-meta-sep {
    opacity: 0.6;
}

.typing-indicator {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast-item {
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    max-width: 90vw;
    animation: toast-in 0.25s ease;
}

.toast-item.toast-success { background: var(--success, #2e7d32); }
.toast-item.toast-error { background: var(--danger, #c62828); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 新消息气泡放在打字框上侧 */
.new-message-bubble-wrap {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 96px;
    z-index: 20;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.new-message-bubble-wrap.visible {
    display: flex;
}

.new-message-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--accent);
    color: white;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    pointer-events: auto;
}

.new-message-bubble:hover {
    background: var(--accent-hover);
}

.new-message-bubble-arrow {
    font-size: 1rem;
    opacity: 0.9;
}

.messages-load-more {
    text-align: center;
    padding: 8px;
}

.btn-load-more {
    padding: 8px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-load-more:hover {
    background: var(--border);
}

.messages-list {
    list-style: none;
}

.message-day-divider {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
}

.message-day-divider span {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 12px;
}

.message-item {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    animation: msgIn 0.3s ease;
}

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-item.own {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

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

.message-avatar-clickable {
    cursor: pointer;
}

.message-avatar-clickable:hover {
    opacity: 0.9;
}

.message-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.message-avatar-name {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 80px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.message-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(68%, 640px);
    width: auto;
}

.message-item.own .message-body {
    align-items: flex-end;
}

/* 他人消息的主体布局：确保元信息在上方 */
.message-item:not(.own) .message-body {
    align-items: flex-start;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    justify-content: center;
}

/* 自己发送的消息：元信息在气泡下方居中 */
.message-item.own .message-meta {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0;
    margin-top: 4px;
}

/* 他人消息：元信息在气泡上方居中 */
.message-item:not(.own) .message-meta {
    justify-content: center;
}

.message-sender {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.message-item.own .message-sender {
    color: #000000;
}

/* 群聊中的发送者名字：使用强调色 */
.message-item:not(.own) .message-sender {
    color: var(--accent);
    font-size: 0.82rem;
}

.message-time {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.message-read-status {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.message-read-status.read {
    color: var(--success);
    font-weight: 600;
}

.message-send-status {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.message-send-status.sending {
    opacity: 0.9;
    color: #1976d2;
}

.message-send-status.failed {
    color: var(--danger);
    font-weight: 600;
}

.message-send-status.sent {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.message-item:hover .message-send-status.sent,
.message-item:focus-within .message-send-status.sent {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.message-retry-btn,
.message-delete-pending-btn {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.72rem;
    cursor: pointer;
}

.message-retry-btn:hover,
.message-delete-pending-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.message-delete-pending-btn {
    color: var(--danger);
}

.message-item.own .message-send-status {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

.message-item.own .message-send-status.sent {
    color: #166534;
    font-weight: 700;
}

.message-item.own .message-send-status.failed {
    color: #ff6b6b;
    font-weight: 700;
}

/* 自己消息的时间戳和已读状态样式 */
.message-item.own .message-time {
    color: #64748b;
    font-weight: 500;
}

.message-item.own .message-read-status {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

.message-item.own .message-read-status.read {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.message-item.own .message-retry-btn,
.message-item.own .message-delete-pending-btn {
    border-color: #000000;
    color: #000000;
}

.message-item.own .message-retry-btn:hover,
.message-item.own .message-delete-pending-btn:hover {
    border-color: #333333;
    color: #000000;
}

/* 引用、撤回按钮：桌面端 hover 消息气泡时显示，移动端常显 */
.message-actions .btn-reply,
.message-actions .btn-recall-msg {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.message-item:hover .message-actions .btn-reply,
.message-item:hover .message-actions .btn-recall-msg {
    opacity: 1;
}

@media (max-width: 768px) {
    .message-actions .btn-reply,
    .message-actions .btn-recall-msg {
        opacity: 1;
    }
}

.message-content {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    background: var(--bg-card);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    word-break: break-word;
    line-height: 1.5;
    color: var(--text-primary);
    align-self: flex-start;
}

/* 自己发送的消息气泡：居中对齐 */
.message-item.own .message-content {
    align-self: flex-end;
}

/* 纯文本消息保留用户输入的空格与换行（避免 HTML 默认折叠空白） */
.message-content.message-text {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.message-content.msg-media-box--image,
.message-content.msg-media-box--video {
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
}

.message-content .msg-image,
.message-content .msg-video-thumb {
    vertical-align: bottom;
}

/* 自己发的消息气泡：背景为强调色，文字统一反色以便各主题下易读 */
.message-item.own .message-content {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.message-item.own .message-content.msg-media-box--image,
.message-item.own .message-content.msg-media-box--video {
    background: transparent;
    border-color: transparent;
    color: inherit;
}

.message-item.own .message-content .message-reply {
    color: #000000;
    background: rgba(0, 0, 0, 0.1);
}

.message-item.own .message-content .message-reply-sender {
    color: #333333;
}

.message-item.own .message-content .message-recalled {
    color: #000000;
}

.message-item.own .message-content .msg-action-btn {
    color: #000000;
}

.message-item.own .message-content .msg-action-btn:hover {
    color: #333333;
}

.message-item-system {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.message-item-system .message-system {
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 12px;
    border-radius: 4px;
}

.msg-voice audio {
    max-width: 240px;
    height: 36px;
}

.msg-voice audio::-webkit-media-controls-panel {
    background: var(--bg-input);
}

.msg-video a {
    position: relative;
    display: inline-block;
}

.msg-video-thumb {
    max-width: 280px;
    max-height: 220px;
    border-radius: 12px;
    display: block;
    cursor: pointer;
}

.msg-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.msg-previewable {
    cursor: pointer;
}

/* 预览弹窗 */
.preview-modal .preview-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: transparent;
    border: none;
    padding: 0;
}

.preview-close {
    position: absolute;
    top: -40px;
    right: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1;
    line-height: 1;
}

.preview-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.preview-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    place-items: center;
    width: 44px;
    height: 64px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.preview-nav:hover {
    background: rgba(0, 0, 0, 0.72);
}

.preview-nav-prev {
    left: -58px;
}

.preview-nav-next {
    right: -58px;
}

.preview-counter {
    position: absolute;
    left: 50%;
    bottom: -36px;
    transform: translateX(-50%);
    display: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .preview-nav {
        width: 38px;
        height: 54px;
        font-size: 34px;
    }

    .preview-nav-prev {
        left: 8px;
    }

    .preview-nav-next {
        right: 8px;
    }

    .preview-close {
        top: 8px;
        right: 8px;
        z-index: 3;
    }

    .preview-counter {
        bottom: 10px;
    }
}

.preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-media {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.preview-video {
    width: 100%;
}

.message-reply {
    background: rgba(0, 0, 0, 0.15);
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent);
    color: inherit;
}

.message-reply:hover {
    background: rgba(0, 0, 0, 0.22);
}

.message-item.jump-highlight {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 10px;
}

.message-search-mark {
    border-radius: 4px;
    padding: 0 2px;
    background: #fff176;
    color: #1a1a2e;
}

.message-reply-sender {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.message-recalled {
    color: var(--text-secondary);
    font-style: italic;
}

.msg-image {
    width: auto;
    height: auto;
    max-width: min(280px, 68vw);
    max-height: min(280px, 46vh);
    border-radius: 12px;
    display: block;
    object-fit: contain;
}

.msg-file {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
}

.msg-file:hover {
    text-decoration: underline;
    color: var(--link-hover);
}

.message-item.own .msg-file {
    color: rgba(255, 255, 255, 0.95);
}

.message-item.own .msg-file:hover {
    color: #fff;
}

.msg-file-missing {
    color: var(--text-secondary);
    cursor: default;
    text-decoration: none;
}

.msg-file-missing:hover {
    text-decoration: none;
    color: var(--text-secondary);
}

.msg-missing-hint {
    font-size: 0.85em;
    color: var(--text-secondary);
    font-weight: normal;
}

.message-item.own .msg-missing-hint {
    color: rgba(255, 255, 255, 0.75);
}

.msg-file-size {
    font-size: 0.85em;
    color: var(--text-secondary);
    font-weight: normal;
}

.message-item.own .msg-file-size {
    color: rgba(255, 255, 255, 0.8);
}

.msg-media-size-hint {
    opacity: 0.9;
}

/* 图片/视频/语音：加载层与占位 */
.msg-media-box {
    position: relative;
    display: inline-block;
    max-width: 100%;
    width: fit-content;
    height: fit-content;
    vertical-align: bottom;
}

.msg-media-box:not(.is-loaded) {
    min-width: min(180px, 54vw);
    min-height: 112px;
}

.msg-media-box--image:not(.is-loaded) {
    background: rgba(0, 0, 0, 0.04);
}

.message-item.own .msg-media-box--image:not(.is-loaded) {
    background: rgba(0, 0, 0, 0.15);
}

.msg-media-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.06);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.message-item.own .msg-media-loading {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);
}

.msg-media-box.is-loaded .msg-media-loading {
    display: none;
}

.msg-media-box--image .msg-image-link {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    z-index: 0;
}

.msg-media-box--video .msg-previewable {
    position: relative;
    z-index: 0;
}

/* 语音：加载提示在控件上方一行，避免压住播放器 */
.msg-media-box--voice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    min-height: 0;
}

.msg-media-box--voice:not(.is-loaded) {
    min-height: auto;
}

.msg-media-loading--inline {
    position: static;
    inset: auto;
    width: 100%;
    min-height: 0;
    padding: 2px 0;
    background: transparent;
    justify-content: flex-start;
}

.message-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
}

.msg-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 6px;
}

.msg-action-btn:hover {
    color: var(--accent);
}

/* 输入区 */
.chat-input-area {
    padding: 12px 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    position: relative;
}

.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent);
}

.reply-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-cancel-reply {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.input-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.btn-attach {
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.btn-attach:hover, .btn-voice:hover {
    background: var(--border);
    color: var(--text-primary);
}

.btn-voice {
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.1rem;
}

.btn-emoji {
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.btn-emoji:hover {
    background: var(--border);
}

.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 16px;
    right: 16px;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 12px;
    z-index: 100;
    margin-bottom: 8px;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    user-select: none;
}

.emoji-item:hover {
    background: var(--bg-input);
}

.btn-voice.recording {
    background: var(--accent);
    color: white;
    animation: pulse-voice 1s ease-in-out infinite;
}

@keyframes pulse-voice {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.voice-recording {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 8px;
    margin-top: 8px;
}

.voice-recording-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.voice-recording-duration {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.btn-voice-stop {
    padding: 6px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-voice-stop:hover {
    background: var(--accent-hover);
}

.voice-draft {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
}

.voice-draft-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-draft-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    flex: 0 0 auto;
}

.voice-draft-info {
    min-width: 0;
    flex: 1;
}

.voice-draft-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.voice-draft-meta {
    margin: 2px 0 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.voice-draft audio {
    width: min(320px, 100%);
    height: 34px;
}

.voice-draft-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.btn-voice-draft-send,
.btn-voice-draft-secondary {
    min-height: 32px;
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-voice-draft-send {
    background: var(--accent);
    color: #fff;
}

.btn-voice-draft-secondary {
    background: var(--border);
    color: var(--text-primary);
}

#messageInput {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    min-height: 4.5em;
    line-height: 1.5;
    max-height: 160px;
}

#messageInput:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-send {
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.btn-send .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
}

.input-tool-icon {
    display: inline-grid;
    place-items: center;
    width: 1.25em;
    height: 1.25em;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 20px;
    line-height: 1;
}

.input-tool-icon-send {
    font-size: 19px;
    transform: translateX(1px);
}

.btn-send:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.input-actions {
    margin-top: 8px;
}

.btn-recall {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-recall:hover {
    color: var(--accent);
}

/* 弹窗 */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border);
}

/* 聊天：文件发送前确认 */
#confirmModal .confirm-modal-title {
    margin: 0 0 10px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

#confirmModal .confirm-modal-body {
    margin-bottom: 18px;
}

#confirmModal .confirm-file-send-body {
    text-align: left;
}

#confirmModal .confirm-file-lead {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

#confirmModal .confirm-file-name {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 15px;
    word-break: break-word;
    color: var(--text-primary);
}

#confirmModal .confirm-file-meta {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

#confirmModal .confirm-file-hint {
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: 10px;
    border: 1px solid var(--border);
}

#confirmModal .confirm-file-hint strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* 房间文件：更大、更完整 */
#roomFilesModal .modal-content {
    max-width: 980px;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#roomFilesModal #roomFilesList {
    list-style: none;
    overflow: auto;
    max-height: calc(82vh - 140px);
    margin: 6px 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.room-files-group-title {
    padding: 12px 4px 8px;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), transparent);
    position: sticky;
    top: 0;
    z-index: 1;
}

.room-files-item {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.room-files-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px;
}

.room-files-main {
    min-width: 0;
}

.room-files-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-files-meta {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}

.room-files-actions {
    white-space: nowrap;
}

.room-files-unavailable {
    color: var(--text-secondary);
}

.modal-content h3 {
    margin-bottom: 20px;
}

.modal-content .form-group {
    margin-bottom: 16px;
}

.modal-content label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.modal-content input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.room-members-modal .room-members-list {
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    margin: 12px 0;
}

.room-schedule-modal {
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
}

.schedule-page {
    width: min(1180px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 24px 0 48px;
}

.schedule-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
}

.schedule-page-header h1 {
    margin: 0;
    font-size: 28px;
}

.schedule-page-header p,
.schedule-preview-head p {
    margin: 4px 0 0;
    color: var(--text-secondary);
}

.schedule-page-actions,
.schedule-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.schedule-preview-head {
    justify-content: space-between;
    margin-bottom: 12px;
}

.schedule-preview-head h3 {
    margin: 0;
}

.schedule-reminder-toggle,
.schedule-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.schedule-reminder-toggle {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
}

.schedule-workspace {
    display: grid;
    grid-template-columns: minmax(300px, .95fr) minmax(300px, 1fr) minmax(300px, .95fr);
    gap: 16px;
    align-items: start;
}

.schedule-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 18px;
    min-width: 0;
}

.schedule-side-panel {
    position: sticky;
    top: 72px;
}

.schedule-panel h2 {
    margin: 0 0 10px;
    font-size: 17px;
}

.schedule-panel-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.schedule-side-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.schedule-side-head h2,
.schedule-side-head p {
    margin: 0;
}

.schedule-side-head p {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 13px;
}

.schedule-side-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.schedule-detail-empty {
    padding: 18px;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: 10px;
}

.schedule-detail-card h3 {
    margin: 0;
    font-size: 18px;
    word-break: break-word;
}

.schedule-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.schedule-detail-list {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px 12px;
    margin: 0;
}

.schedule-detail-list dt {
    color: var(--text-secondary);
}

.schedule-detail-list dd {
    margin: 0;
    word-break: break-word;
    white-space: pre-wrap;
}

.schedule-preview-modal {
    max-width: 560px;
    padding: 0;
    overflow: hidden;
}

.schedule-preview-list {
    max-height: 360px;
    margin: 0 18px 18px;
    border-radius: 14px;
}

.schedule-preview-modal .schedule-preview-head {
    margin: 0;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.12), rgba(0, 150, 136, 0.10));
}

.schedule-preview-modal .modal-actions {
    padding: 0 18px 18px;
}

.schedule-preview-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
}

.schedule-preview-summary span {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.schedule-preview-item {
    cursor: default;
    border-left-color: rgba(25, 118, 210, 0.35);
}

.schedule-preview-item:hover {
    background: var(--bg-card);
}

.schedule-preview-state {
    display: inline-flex;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
}

.schedule-cal-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0 12px;
    padding: 12px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-input) 100%);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 2;
}

.schedule-cal-label {
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.schedule-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 8px 0;
}

.schedule-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
    padding: 8px;
    background: var(--bg-input);
    border-radius: 12px;
}

.schedule-cal-cell {
    min-height: 44px;
    min-width: 0;
    width: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: all 0.2s ease;
}

.schedule-cal-empty {
    visibility: hidden;
    pointer-events: none;
}

.schedule-cal-day {
    padding: 0;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: inherit;
}

.schedule-cal-day:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(25, 118, 210, 0.15);
}

.schedule-cal-day.is-today {
    font-weight: 700;
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-card) 0%, #e3f2fd 100%);
    position: relative;
}

.schedule-cal-day.is-today::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.schedule-cal-day.is-selected {
    background: linear-gradient(135deg, var(--accent) 0%, #1565c0 100%);
    color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    transform: scale(1.05);
}

.schedule-cal-count {
    position: absolute;
    right: 5px;
    bottom: 5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
}

.schedule-cal-day.is-selected .schedule-cal-count {
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent);
}

.schedule-selected-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.schedule-selected-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -6px 0 12px;
}

.schedule-selected-preview span {
    max-width: 150px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-day-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.schedule-day-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.schedule-day-item {
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    transition: background 0.15s ease, border-left-color 0.15s ease;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.schedule-day-item:hover {
    background: var(--bg-input);
    border-left-color: var(--accent);
}

.schedule-day-item:focus-visible,
.schedule-day-item.is-selected {
    outline: none;
    background: var(--bg-input);
    border-left-color: var(--accent);
}

.schedule-day-item:last-child {
    border-bottom: none;
}

/* 日程状态样式 */
.schedule-day-item.schedule-completed {
    opacity: 0.6;
    background: #f8f9fa;
    border-left-color: #2e7d32;
}

.schedule-day-item.schedule-cancelled {
    opacity: 0.5;
    text-decoration: line-through;
    background: #f0f0f0;
    border-left-color: #c62828;
}

.schedule-status-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.schedule-status-badge.status-completed {
    background: #d4edda;
    color: #155724;
}

.schedule-status-badge.status-cancelled {
    background: #f8d7da;
    color: #721c24;
}

.schedule-status-badge.status-pending {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.btn-status {
    min-width: 32px;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
}

.btn-status-active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.schedule-item-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.schedule-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.schedule-item-loc,
.schedule-item-desc {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.schedule-item-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.schedule-item-more {
    position: relative;
}

.schedule-item-more summary {
    list-style: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
}

.schedule-item-more summary::-webkit-details-marker {
    display: none;
}

.schedule-item-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    min-width: 112px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

.schedule-item-menu button {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.schedule-item-menu button:hover {
    background: var(--bg-input);
}

.schedule-item-menu button.danger {
    color: var(--danger);
}

.schedule-editor {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    margin-top: 6px;
}

.schedule-editor-title {
    margin: 0 0 10px;
    font-size: 15px;
}

.schedule-editor .form-group label.schedule-end-date-label,
.schedule-editor .form-group label.schedule-end-dt-label {
    margin-top: 8px;
    display: block;
}

.schedule-range-row.is-hidden,
.schedule-timed-row.is-hidden,
.schedule-detail-card.is-hidden,
.schedule-detail-empty.is-hidden,
.schedule-detail-view.is-hidden,
.schedule-editor.is-hidden {
    display: none !important;
}

.schedule-editor-actions {
    margin-top: 12px;
}

.schedule-editor .form-group input,
.schedule-editor .form-group textarea,
.schedule-editor .form-group select {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-input);
}

.schedule-editor .form-group input:focus,
.schedule-editor .form-group textarea:focus,
.schedule-editor .form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.schedule-field-hint { min-height: 18px; margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; }
.schedule-field-hint.is-error { color: var(--danger); font-weight: 600; }

.btn-small {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.2;
}

@media (max-width: 900px) {
    .schedule-workspace {
        grid-template-columns: 1fr;
    }

    .schedule-calendar-panel,
    .schedule-side-panel {
        grid-column: auto;
        grid-row: auto;
        position: static;
    }

    .schedule-page-header {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .schedule-page {
        width: min(100vw - 20px, 1180px);
        padding-top: 16px;
    }

    .schedule-panel {
        padding: 14px;
    }

    .schedule-detail-list {
        grid-template-columns: 1fr;
    }

    .schedule-side-panel {
        position: static;
        max-height: none;
        overflow: visible;
        border-radius: 12px;
        box-shadow: var(--shadow);
        transform: none;
        transition: none;
    }

    .schedule-side-panel:not(.is-open) .schedule-detail-view,
    .schedule-side-panel:not(.is-open) .schedule-editor {
        display: none;
    }

    .schedule-side-head {
        cursor: pointer;
    }

    .schedule-day-list {
        max-height: none;
    }

    .schedule-item-menu {
        right: auto;
        left: 0;
    }
}

.room-highlights-modal {
    max-width: 760px;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.room-highlights-editor {
    margin-bottom: 12px;
}

#highlightContentInput {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
}

.room-highlights-upload-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#highlightAttachmentInfo {
    margin: 0;
    font-size: 0.85rem;
}

.room-highlights-list {
    overflow-y: auto;
    max-height: calc(82vh - 220px);
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

.room-highlight-item {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
}

.room-highlight-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.room-highlight-content {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    margin-bottom: 8px;
}

.room-highlight-file a {
    color: var(--link-color);
    text-decoration: none;
}

.room-highlight-file a:hover {
    text-decoration: underline;
}

.room-highlight-actions {
    display: flex;
    gap: 8px;
}

.room-members-modal .room-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.room-members-modal .room-member-item:last-child {
    border-bottom: none;
}

.room-members-modal .member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-input);
}

.room-members-modal .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-members-modal .member-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    color: var(--text-secondary);
}

.room-members-modal .member-info {
    flex: 1;
    min-width: 0;
}

.room-members-modal .member-name {
    display: block;
    font-weight: 500;
}

.room-members-modal .member-role {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 6px;
}

.room-members-modal .member-muted {
    font-size: 12px;
    color: var(--accent);
    margin-left: 6px;
}

.room-members-modal .member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.room-members-modal .btn-kick-member,
.room-members-modal .btn-member-role,
.room-members-modal .btn-member-mute {
    flex-shrink: 0;
    font-size: 12px;
    padding: 4px 10px;
}

.room-members-actions {
    flex-wrap: wrap;
}

.room-members-actions .btn-leave-room {
    margin-right: auto;
}

.sessions-modal .sessions-list {
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    margin: 12px 0;
    padding: 0;
}

/* 移动端论坛：搜索前置，帖子信息单列，关键操作保持可触达。 */
.f-mobile-search { display: none; }
.f-mobile-search-form { display: flex; gap: 8px; align-items: center; }
.f-mobile-search-form input { flex: 1; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--f-border); border-radius: 999px; background: var(--f-card-bg); color: var(--f-text); font: inherit; }
.f-mobile-search-form .f-btn { min-height: 44px; }
.f-board-mobile-search { display: none; }

@media (max-width: 760px) {
  .f-mobile-search { display: block; margin-bottom: 12px; }
  .f-board-mobile-search { display: flex; margin-bottom: 12px; }
  .f-boards-grid { grid-template-columns: 1fr; gap: 10px; }
  .f-board-card { padding: 13px; gap: 11px; }
  .f-board-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .f-thread-row { padding: 12px 0; gap: 7px; }
  .f-thread-row-main { align-items: flex-start; }
  .f-thread-title { font-size: .95rem; line-height: 1.45; }
  .f-thread-row-meta { font-size: .75rem; gap: 8px; }
  .f-sort-tabs { position: sticky; top: 56px; z-index: 3; padding: 5px 0; margin-left: -2px; margin-right: -2px; background: color-mix(in srgb, var(--f-bg) 92%, transparent); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .f-sort-tabs::-webkit-scrollbar { display: none; }
  .f-sort-tab { min-height: 40px; display: inline-flex; align-items: center; }
  .f-thread-card { align-items: flex-start; }
  .f-tc-tags { max-height: 25px; overflow: hidden; }
  .f-tc-meta { row-gap: 4px; }
  .f-tc-stats { justify-content: space-between; }
  .f-post-op .f-post-footer { position: sticky; bottom: 0; z-index: 2; margin-left: -14px; margin-right: -14px; padding: 9px 14px max(9px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--f-card-bg) 94%, transparent); backdrop-filter: blur(10px); }
  .f-post-actions { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .f-post-actions::-webkit-scrollbar { display: none; }
  .f-action-btn { min-height: 40px; white-space: nowrap; }
  .f-post-content { font-size: .98rem; line-height: 1.8; }
  .f-post-content img.forum-inline-img { display: block; max-height: 62vh; object-fit: contain; }
  .f-replies-header { flex-wrap: wrap; gap: 8px; }
  .f-reply-form-section { scroll-margin-top: 70px; scroll-margin-bottom: 24px; }
  .f-wrap .f-editor-toolbar { top: 56px; display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .f-wrap .f-editor-toolbar::-webkit-scrollbar { display: none; }
  .f-toolbar-btn { flex: 0 0 auto; min-width: 40px; min-height: 40px; }
  .f-textarea { min-height: 150px; font-size: 16px; }
  .f-wrap .f-reply-form-footer { position: sticky; bottom: 0; z-index: 2; margin: 10px -14px -14px; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--f-card-bg) 94%, transparent); backdrop-filter: blur(10px); }
}

/* 移动端日程：当天列表优先，详情/编辑使用底部抽屉。 */
@media (max-width: 560px) {
  .schedule-workspace { display: flex; flex-direction: column; gap: 12px; }
  .schedule-list-panel { order: 1; }
  .schedule-calendar-panel { order: 2; }
  .schedule-side-panel { order: 3; }
  .schedule-page-header { gap: 10px; margin-bottom: 12px; }
  .schedule-page-header h1 { font-size: 24px; }
  .schedule-page-actions { justify-content: space-between; }
  .schedule-panel-title-row { align-items: center; }
  #btnScheduleResetForm { position: sticky; right: 0; min-height: 42px; }
  .schedule-day-list { max-height: none; box-shadow: none; }
  .schedule-day-item { padding: 14px 12px; }
  .schedule-item-actions .btn { min-height: 40px; }
  .schedule-calendar-panel { padding: 10px; }
  .schedule-cal-nav { margin: 0 0 8px; padding: 7px; }
  .schedule-cal-cell { min-height: 38px; border-radius: 8px; }
  .schedule-cal-grid { gap: 3px; padding: 5px; margin-bottom: 0; }
  .schedule-cal-weekdays { gap: 3px; padding: 5px 0; margin-bottom: 3px; }
  .schedule-cal-count { right: 2px; bottom: 2px; min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; }
  .schedule-side-panel:not(.is-open) { display: none; }
  .schedule-side-panel.is-open { position: fixed; z-index: 1800; left: 0; right: 0; bottom: 0; max-height: min(86dvh, 720px); overflow-y: auto; margin: 0; padding: 16px 14px max(16px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgba(15, 23, 42, .24); background: var(--bg-card); }
  .schedule-side-panel.is-open::before { content: ''; display: block; width: 42px; height: 4px; margin: -7px auto 12px; border-radius: 999px; background: var(--border); }
  .schedule-side-head { position: sticky; top: -16px; z-index: 2; margin: -16px -14px 12px; padding: 16px 14px 12px; background: color-mix(in srgb, var(--bg-card) 94%, transparent); backdrop-filter: blur(10px); }
  .schedule-editor-actions { position: sticky; bottom: 0; margin-left: -14px; margin-right: -14px; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-card) 94%, transparent); }
  .schedule-editor-actions .btn { min-height: 44px; }
  .schedule-editor .form-group input, .schedule-editor .form-group textarea, .schedule-editor .form-group select { min-height: 44px; font-size: 16px; }
}

.sessions-modal .sessions-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 6px;
}

.sessions-modal .sessions-section {
    margin-top: 12px;
}

.sessions-modal .sessions-section h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.sessions-modal .session-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.sessions-modal .session-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sessions-modal .session-item:last-child {
    border-bottom: none;
}

.sessions-modal .session-label {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sessions-modal .session-time {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.sessions-modal .session-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.sessions-modal .sessions-loading,
.sessions-modal .sessions-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 16px 0;
}

@media (max-width: 640px) {
    .sessions-modal .session-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .sessions-modal .session-actions,
    .sessions-modal .sessions-toolbar {
        justify-content: flex-start;
    }
}

.user-info-modal .user-info-body {
    margin: 16px 0;
}

.user-info-modal .user-info-row {
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.user-info-modal .user-info-label {
    color: var(--text-secondary);
    margin-right: 6px;
}

.user-detail-modal .user-detail-body {
    margin: 16px 0;
}

.user-detail-modal .user-detail-avatar-wrap {
    text-align: center;
    margin-bottom: 20px;
}

.user-detail-modal .user-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.user-detail-modal .user-detail-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    font-size: 2rem;
    font-weight: 600;
}

.user-detail-modal .user-detail-loading {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.user-detail-modal .user-detail-fields {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.user-detail-modal .user-detail-row {
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.user-detail-modal .user-detail-label {
    color: var(--text-secondary);
    margin-right: 8px;
    min-width: 4em;
}

.user-detail-modal .user-detail-value {
    color: var(--text-primary);
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-danger {
    background: #c62828;
    color: white;
}

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

/* 移动端适配 */
@media (max-width: 768px) {
    .chat-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(0);
        transition: transform 0.3s;
    }

    .chat-sidebar.hidden {
        transform: translateX(-100%);
    }

    .chat-main {
        width: 100%;
    }

    .chat-active .chat-header .btn-back {
        display: block;
    }

    .chat-header {
        gap: 8px;
        padding: 10px 12px;
    }

    .chat-header-actions {
        max-width: 50vw;
        overflow-x: auto;
        flex-shrink: 0;
        scrollbar-width: none;
    }

    .chat-header-actions::-webkit-scrollbar {
        display: none;
    }

    .chat-header-actions button {
        flex: 0 0 36px;
    }

    .message-item {
        gap: 8px;
        margin-bottom: 10px;
    }

    .message-avatar {
        width: 32px;
        height: 32px;
    }

    .message-avatar-name {
        max-width: 56px;
        font-size: 0.7rem;
    }

    .message-body {
        max-width: 82%;
        width: fit-content;
    }

    .message-content {
        padding: 9px 12px;
    }

    .msg-image,
    .msg-video-thumb {
        max-width: min(72vw, 280px);
        max-height: 260px;
    }

    .new-message-bubble-wrap {
        bottom: 86px;
        left: 12px;
        right: 12px;
    }

    .new-message-bubble {
        padding: 8px 14px;
        font-size: 0.84rem;
    }

    .input-row {
        gap: 8px;
    }

    .btn-attach,
    .btn-voice,
    .btn-emoji,
    .btn-send {
        width: 40px;
        height: 40px;
        padding: 0;
        display: inline-grid;
        place-items: center;
    }

    .auth-card {
        padding: 24px;
    }

    /* 个人资料页 - 平板/手机 */
    .profile-page {
        padding: 0 16px 20px;
    }

    .profile-header {
        padding: 12px 0;
    }

    .profile-title {
        font-size: 1.25rem;
    }

    .profile-card {
        padding: 24px 20px;
    }

    .profile-hero {
        flex-direction: column;
        text-align: center;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .profile-hero-info {
        align-items: center;
    }

    .profile-avatar-wrap {
        width: 88px;
        height: 88px;
    }

    .profile-avatar-placeholder {
        font-size: 2.2rem;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .profile-section-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .profile-form .form-group {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .chat-sidebar {
        width: 100%;
        min-width: 100%;
    }

    .sidebar-header h2 {
        font-size: 1.1rem;
    }

    /* 个人资料页 - 小屏手机 */
    .profile-page {
        padding: 0 12px 16px;
    }

    .profile-card {
        padding: 20px 16px;
    }

    .profile-header {
        padding: 10px 0;
    }

    .profile-back {
        font-size: 0.9rem;
    }

    .profile-title {
        font-size: 1.15rem;
    }

    .profile-avatar-wrap {
        width: 72px;
        height: 72px;
    }

    .profile-avatar-placeholder {
        font-size: 1.8rem;
    }

    .profile-form input,
    .profile-form select,
    .profile-form textarea {
        padding: 10px 14px;
        font-size: 16px; /* 防止 iOS 缩放 */
    }
}

/* ========== 管理后台 ========== */
.admin-wrap {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.admin-nav a {
    color: var(--link-color);
    text-decoration: none;
}

.admin-nav a:hover {
    text-decoration: underline;
}

.admin-nav .admin-logout {
    margin-left: auto;
    color: var(--accent);
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.admin-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.admin-stat-card .num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
}

.admin-stat-card .label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.admin-table-wrap {
    overflow-x: auto;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.admin-table th {
    background: var(--bg-input);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
}

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

.admin-table .btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
    margin-right: 6px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.admin-table .btn-danger {
    background: #c62828;
    color: white;
}

.admin-table .btn-secondary {
    background: var(--border);
    color: var(--text-primary);
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.admin-pagination a,
.admin-pagination span {
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    text-decoration: none;
    border: 1px solid var(--border);
}

.admin-pagination a:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.admin-pagination .current {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.admin-pagination-ellipsis {
    padding: 8px 6px;
    color: var(--text-secondary);
    user-select: none;
}

.admin-form-inline {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-form-inline input,
.admin-form-inline select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.admin-form-inline button {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: white;
    cursor: pointer;
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-table th, .admin-table td {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   论坛样式 (全新重写)
   ============================================================ */

/* --- 基础变量 --- */
:root {
  --f-primary: var(--brand-primary);
  --f-primary-hover: var(--brand-primary-hover);
  --f-primary-light: var(--brand-primary-soft);
  --f-bg: var(--ui-bg);
  --f-card-bg: var(--ui-surface);
  --f-border: var(--ui-border);
  --f-text: var(--ui-text);
  --f-text-muted: var(--ui-text-muted);
  --f-text-link: var(--brand-primary);
  --f-danger: var(--brand-danger);
  --f-success: var(--brand-success);
  --f-warn: var(--brand-warning);
  --f-pin-color: #e67e22;
  --f-star-color: #f1c40f;
  --f-lock-color: #95a5a6;
  --f-radius: var(--ui-radius-md);
  --f-radius-sm: var(--ui-radius-sm);
  --f-shadow: var(--ui-shadow-1);
  --f-shadow-hover: var(--ui-shadow-2);
  --f-transition: var(--ui-transition);
}

/* --- 页面外框 --- */
.f-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}
.f-wrap [id] { scroll-margin-top: 72px; }

/* --- 面包屑 --- */
.f-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--f-text-muted);
  margin-bottom: 18px;
}
.f-breadcrumb a { color: var(--f-text-link); text-decoration: none; }
.f-breadcrumb a:hover { text-decoration: underline; }
.f-bc-sep { color: var(--f-border); }

/* --- 页面标题 --- */
.f-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--f-text);
  margin: 0;
}
.f-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.f-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--f-text);
  margin: 0;
}
.f-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- 通用按钮 --- */
.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 18px;
  border-radius: var(--f-radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background var(--f-transition), border-color var(--f-transition),
              color var(--f-transition), box-shadow var(--f-transition);
  white-space: nowrap;
}
.f-btn:focus-visible { outline: 3px solid var(--f-primary); outline-offset: 2px; }
.f-btn-primary { background: var(--f-primary); color: #fff; border-color: var(--f-primary); }
.f-btn-primary:hover { background: var(--f-primary-hover); border-color: var(--f-primary-hover); }
.f-btn-outline { background: transparent; color: var(--f-primary); border-color: var(--f-primary); }
.f-btn-outline:hover { background: var(--f-primary-light); }
.f-btn-ghost { background: transparent; color: var(--f-text-muted); border-color: var(--f-border); }
.f-btn-ghost:hover { background: var(--f-bg); color: var(--f-text); }
.f-btn-danger { background: var(--f-danger); color: #fff; border-color: var(--f-danger); }
.f-btn-danger:hover { background: #c0392b; border-color: #c0392b; }
.f-btn-sm { padding: 5px 12px; font-size: 0.82rem; }
.f-btn-xs { padding: 3px 8px; font-size: 0.78rem; }
.f-btn-lg { padding: 11px 26px; font-size: 1rem; }
.f-btn-full { width: 100%; display: flex; }

/* --- section --- */
.f-section {
  background: var(--f-card-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--f-shadow);
}
.f-section .f-section-header { margin-bottom: 14px; }

/* ============================================================
   论坛首页
   ============================================================ */
.f-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: 20px;
  align-items: start;
}
.f-index-layout > .f-index-main,
.f-index-layout > .f-index-aside {
  min-width: 0;
}
.f-index-aside {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 800px) {
  .f-index-layout { grid-template-columns: 1fr; }
  .f-index-aside { max-width: 100%; }
}

/* 版块卡片网格 */
.f-boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}
.f-boards-grid > * {
  min-width: 0;
}
.f-board-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--f-card-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  text-decoration: none;
  color: var(--f-text);
  transition: box-shadow var(--f-transition), border-color var(--f-transition), transform var(--f-transition);
  box-shadow: var(--f-shadow);
}
.f-board-card:hover {
  box-shadow: var(--f-shadow-hover);
  border-color: var(--f-primary);
  transform: translateY(-2px);
}
.f-board-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.f-board-info { flex: 1; min-width: 0; }
.f-board-icon-link { text-decoration: none; color: inherit; display: inline-flex; }
.f-board-name-link { text-decoration: none; color: inherit; display: inline-block; max-width: 100%; }
.f-board-name-link:hover .f-board-name { color: var(--f-primary); text-decoration: underline; text-underline-offset: 2px; }
.f-board-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.f-board-desc { font-size: 0.82rem; color: var(--f-text-muted); margin-bottom: 8px; line-height: 1.4; }
.f-board-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: var(--f-text-muted); }
.f-board-last a { color: var(--f-text-link); text-decoration: none; }
.f-board-last a:hover { text-decoration: underline; }

/* 近期帖子列表（首页） */
.f-thread-list { list-style: none; margin: 0; padding: 0; }
.f-thread-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--f-border);
  gap: 12px;
}
.f-thread-row:last-child { border-bottom: none; }
.f-thread-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.f-thread-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--f-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .f-thread-row {
    flex-direction: column;
    align-items: stretch;
  }
  .f-thread-row-meta {
    white-space: normal;
    flex-wrap: wrap;
    flex-shrink: 1;
  }
}
.f-thread-title { font-size: 0.93rem; font-weight: 500; color: var(--f-text); text-decoration: none; flex: 1; min-width: 0; }
.f-thread-title:hover { color: var(--f-primary); }
.f-thread-board {
  font-size: 0.75rem;
  color: var(--f-text-muted);
  background: var(--f-bg);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ============================================================
   侧边栏
   ============================================================ */
.f-aside-card {
  background: var(--f-card-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--f-shadow);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.f-index-aside .f-aside-card:last-child {
  margin-bottom: 0;
}
.f-aside-title { font-weight: 700; font-size: 0.93rem; margin-bottom: 12px; color: var(--f-text); }
.f-aside-user { text-align: center; }
.f-aside-user-avatar { display: flex; justify-content: center; margin-bottom: 10px; }
.f-aside-user-avatar img,
.f-aside-user-avatar .f-aside-avatar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.f-aside-user-avatar .f-aside-avatar-circle.f-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.f-aside-user-name { font-weight: 600; margin-bottom: 12px; }
.f-aside-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 100%;
}
.f-aside-quick-links a {
  font-size: 0.82rem; color: var(--f-primary); text-decoration: none;
  padding: 4px 10px; border-radius: 10px; background: var(--f-primary-light);
}
.f-aside-quick-links a:hover { background: var(--f-primary); color: #fff; }
.f-aside-list { list-style: none; margin: 0; padding: 0; }
.f-aside-list li { padding: 6px 0; border-bottom: 1px solid var(--f-border); font-size: 0.85rem; }
.f-aside-list li:last-child { border-bottom: none; }
.f-aside-list a { color: var(--f-text); text-decoration: none; }
.f-aside-list a:hover { color: var(--f-primary); }
.f-aside-meta { display: block; font-size: 0.75rem; color: var(--f-text-muted); margin-top: 2px; }
.f-aside-thread-title {
  font-size: 0.85rem;
  color: var(--f-text);
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.f-aside-thread-title:hover { color: var(--f-primary); }
.f-aside-stat-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 5px 0; border-bottom: 1px solid var(--f-border); }
.f-aside-stat-row:last-child { border-bottom: none; }
.f-aside-stat-row a { color: var(--f-primary); text-decoration: none; }
.f-aside-search { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-aside-search-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  font-size: 0.85rem;
  outline: none;
}
.f-aside-search-input:focus { border-color: var(--f-primary); }
.f-aside-search .f-btn { align-self: flex-start; max-width: 100%; }
.f-notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--f-danger); color: #fff; font-size: 0.7rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px; margin-left: 4px;
}

/* ============================================================
   版块页 (board)
   ============================================================ */
.f-board-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 760px) {
  .f-board-layout { grid-template-columns: 1fr; }
  .f-board-aside { display: none; }
}

.f-board-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.f-board-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; }
.f-board-header-desc { font-size: 0.88rem; color: var(--f-text-muted); margin: 0; }

/* 排序标签 */
.f-sort-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.f-sort-tab {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--f-text-muted);
  text-decoration: none;
  border: 1px solid var(--f-border);
  background: var(--f-card-bg);
  transition: all var(--f-transition);
  white-space: nowrap;
}
.f-sort-tab:hover { border-color: var(--f-primary); color: var(--f-primary); }
.f-sort-tab.active { background: var(--f-primary); color: #fff; border-color: var(--f-primary); }

/* 帖子列表容器 */
.f-thread-list-container { }

/* 帖子卡片 */
.f-thread-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--f-card-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  margin-bottom: 10px;
  transition: box-shadow var(--f-transition), border-color var(--f-transition);
  box-shadow: var(--f-shadow);
}
.f-thread-card:hover { box-shadow: var(--f-shadow-hover); border-color: var(--f-primary); }
.f-thread-card.is-pinned { border-left: 4px solid var(--f-pin-color); }

.f-tc-avatar { flex-shrink: 0; }
.f-tc-body { flex: 1; min-width: 0; }
.f-tc-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.f-tc-title { font-size: 1rem; font-weight: 600; color: var(--f-text); text-decoration: none; flex: 1; min-width: 0; }
.f-tc-title:hover { color: var(--f-primary); }
.f-tc-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: var(--f-text-muted); }
.f-tc-last-reply { color: var(--f-text-muted); font-size: 0.78rem; }
.f-tc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }

.f-tc-stats { display: flex; gap: 18px; flex-shrink: 0; }
.f-tc-stat { text-align: center; }
.f-tc-stat-num { display: block; font-size: 1rem; font-weight: 700; color: var(--f-text); }
.f-tc-stat-label { display: block; font-size: 0.72rem; color: var(--f-text-muted); }
.f-tc-stat.liked .f-tc-stat-num { color: var(--f-primary); }

@media (max-width: 560px) {
  .f-thread-card { flex-wrap: wrap; }
  .f-tc-stats { gap: 12px; }
}

/* --- 标签 badge --- */
.f-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  background: var(--f-primary-light);
  color: var(--f-primary);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--f-transition);
}
.f-tag:hover { background: var(--f-primary); color: #fff; }

.f-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.f-badge-pin { background: #fff0e0; color: var(--f-pin-color); }
.f-badge-star { background: #fffbe0; color: #c0960a; }
.f-badge-lock { background: var(--f-bg); color: var(--f-lock-color); }
.f-badge-solved { background: #e9f9ee; color: #198754; }

/* ============================================================
   帖子详情页
   ============================================================ */
.f-thread-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .f-thread-layout { grid-template-columns: 1fr; }
  .f-thread-aside { display: none; }
}

/* --- 帖子/回复卡片 --- */
.f-post {
  display: flex;
  gap: 0;
  background: var(--f-card-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--f-shadow);
}
.f-post-op { border-left: 4px solid var(--f-primary); }

.f-post-author {
  width: 96px;
  flex-shrink: 0;
  background: var(--f-bg);
  padding: 16px 10px;
  border-right: 1px solid var(--f-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 0.8rem;
}
.f-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.f-author-name { font-weight: 600; color: var(--f-text); font-size: 0.82rem; word-break: break-all; }
.f-author-extra { color: var(--f-text-muted); font-size: 0.72rem; }
.f-post-floor { font-size: 0.72rem; color: var(--f-text-muted); background: var(--f-border); border-radius: 8px; padding: 2px 7px; }

.f-post-body { flex: 1; min-width: 0; padding: 16px 20px; display: flex; flex-direction: column; }
.f-post-header { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--f-border); }
.f-post-title { font-size: 1.35rem; font-weight: 700; color: var(--f-text); margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-post-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--f-text-muted); }
.f-post-content { flex: 1; font-size: 0.95rem; line-height: 1.75; color: var(--f-text); word-break: break-word; }
.f-post-footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--f-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.f-post-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.f-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 11px;
  border-radius: var(--f-radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  color: var(--f-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--f-transition);
}
.f-action-btn:hover { background: var(--f-primary-light); border-color: var(--f-primary); color: var(--f-primary); }
.f-action-btn.active { background: var(--f-primary-light); border-color: var(--f-primary); color: var(--f-primary); }
.f-action-danger:hover { background: #fde; border-color: var(--f-danger); color: var(--f-danger); }
.f-action-select {
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  background: var(--f-card-bg);
  color: var(--f-text-muted);
  padding: 4px 8px;
  font-size: 0.82rem;
}

/* 帖子正文内容样式 */
.f-post-content h1, .f-post-content h2, .f-post-content h3 { font-weight: 700; margin: 1.2em 0 0.5em; color: var(--f-text); }
.f-post-content h1 { font-size: 1.4em; } .f-post-content h2 { font-size: 1.2em; } .f-post-content h3 { font-size: 1.05em; }
.f-post-content p { margin: 0.6em 0; }
.f-post-content ul, .f-post-content ol { padding-left: 1.6em; margin: 0.6em 0; }
.f-post-content li { margin: 0.3em 0; }
.f-post-content code { background: #f0f2f7; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; font-family: 'Courier New', monospace; color: #c0392b; }
.f-post-content pre { background: #f0f2f7; padding: 14px 16px; border-radius: var(--f-radius-sm); overflow-x: auto; margin: 0.8em 0; }
.f-post-content pre code { background: none; padding: 0; color: inherit; }
.f-post-content blockquote { border-left: 3px solid var(--f-primary); margin: 0.8em 0; padding: 8px 16px; background: var(--f-primary-light); border-radius: 0 var(--f-radius-sm) var(--f-radius-sm) 0; }
.f-post-content a { color: var(--f-primary); }
.f-post-content img.forum-inline-img { max-width: 100%; height: auto; border-radius: var(--f-radius-sm); cursor: zoom-in; }
.f-post-content strong, .f-post-content b { font-weight: 700; }

/* 回复可见保护 */
.f-content-gated {
  text-align: center;
  padding: 30px 20px;
  background: var(--f-bg);
  border-radius: var(--f-radius);
  border: 2px dashed var(--f-border);
  color: var(--f-text-muted);
}
.f-content-gated p { margin: 0 0 12px; }

/* 回复区 */
.f-replies-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 14px;
  border-bottom: 2px solid var(--f-border);
  margin-bottom: 14px;
}
.f-replies-count { font-weight: 600; color: var(--f-text); }
.f-reply-sort { display: flex; gap: 8px; }

/* 楼中楼 */
.f-sub-replies { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--f-border); display: flex; flex-direction: column; gap: 8px; }
.f-sub-reply { background: var(--f-bg); border-radius: var(--f-radius-sm); padding: 8px 12px; font-size: 0.88rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.f-sub-author { font-weight: 600; color: var(--f-primary); }
.f-sub-content * { display: inline; font-size: 0.88rem; }

/* 锁定提示 */
.f-locked-notice {
  text-align: center; padding: 20px; background: var(--f-bg);
  border: 1px solid var(--f-border); border-radius: var(--f-radius);
  color: var(--f-text-muted); margin-top: 20px;
}

/* 引用预览 */
.f-quote-preview {
  background: var(--f-primary-light);
  border: 1px solid var(--f-primary);
  border-radius: var(--f-radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--f-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.f-quote-cancel { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--f-primary); padding: 0 4px; }

/* 回复表单区 */
.f-reply-form-section {
  background: var(--f-card-bg);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius);
  padding: 20px;
  margin-top: 20px;
  box-shadow: var(--f-shadow);
}
.f-reply-form-title { font-size: 1rem; font-weight: 600; margin: 0 0 14px; color: var(--f-text); }
.f-reply-form-footer { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.f-login-prompt {
  text-align: center; padding: 20px; margin-top: 20px;
  background: var(--f-card-bg); border: 1px solid var(--f-border); border-radius: var(--f-radius);
}
.f-login-prompt a { color: var(--f-primary); font-weight: 600; text-decoration: none; }

/* 头像占位符 */
.f-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--f-primary-light);
  color: var(--f-primary);
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
.f-avatar-sm.f-avatar-placeholder { width: 40px; height: 40px; font-size: 1rem; }
img.f-avatar-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ============================================================
   编辑器（通用）
   ============================================================ */
.f-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  background: var(--f-bg);
  border: 1px solid var(--f-border);
  border-bottom: none;
  border-radius: var(--f-radius-sm) var(--f-radius-sm) 0 0;
}
.f-toolbar-btn {
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--f-border);
  background: var(--f-card-bg);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--f-text-muted);
  transition: all var(--f-transition);
}
.f-toolbar-btn:hover { background: var(--f-primary-light); border-color: var(--f-primary); color: var(--f-primary); }
.f-toolbar-sep { width: 1px; height: 20px; background: var(--f-border); margin: 0 4px; }
.f-upload-status { font-size: 0.8rem; color: var(--f-text-muted); padding: 0 6px; }
.f-editor-area { position: relative; }
.f-textarea {
  width: 100%; display: block; padding: 12px 14px;
  border: 1px solid var(--f-border); border-radius: 0 0 var(--f-radius-sm) var(--f-radius-sm);
  font-family: inherit; font-size: 0.93rem; line-height: 1.7; resize: vertical; color: var(--f-text);
  background: var(--f-card-bg); outline: none; box-sizing: border-box;
  transition: border-color var(--f-transition);
}
.f-textarea:focus { border-color: var(--f-primary); }
.f-preview-panel {
  border: 1px solid var(--f-border);
  border-radius: 0 0 var(--f-radius-sm) var(--f-radius-sm);
  padding: 12px 14px; min-height: 120px;
  background: var(--f-card-bg);
}
.f-upload-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.f-upload-preview-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--f-bg); border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm); padding: 6px 10px; font-size: 0.82rem;
}
.f-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.f-rm-upload {
  background: none; border: none; cursor: pointer; color: var(--f-danger);
  font-size: 1rem; padding: 0 4px;
}

/* ============================================================
   表单通用
   ============================================================ */
.f-form-wrap { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; }
.f-form-card {
  background: var(--f-card-bg); border: 1px solid var(--f-border);
  border-radius: var(--f-radius); padding: 28px 32px;
  box-shadow: var(--f-shadow);
}
.f-form-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 24px; color: var(--f-text); }
.f-form { display: flex; flex-direction: column; gap: 18px; }
.f-form-group { display: flex; flex-direction: column; gap: 6px; }
.f-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.f-form-group-half { flex: 1; min-width: 180px; }
.f-label { font-size: 0.9rem; font-weight: 600; color: var(--f-text); display: flex; align-items: center; justify-content: space-between; }
.f-required { color: var(--f-danger); }
.f-char-counter { font-size: 0.78rem; font-weight: 400; color: var(--f-text-muted); }
.f-input, .f-select {
  padding: 9px 13px; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm);
  font-family: inherit; font-size: 0.93rem; color: var(--f-text);
  background: var(--f-card-bg); outline: none; width: 100%; box-sizing: border-box;
  transition: border-color var(--f-transition);
}
.f-input:focus, .f-select:focus { border-color: var(--f-primary); }
.f-select-sm { width: auto; padding: 6px 10px; font-size: 0.85rem; }
.f-checkbox-label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; cursor: pointer; color: var(--f-text); }
.f-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.f-draft-hint { font-size: 0.8rem; color: var(--f-success); }

/* ============================================================
   通知页
   ============================================================ */
.f-notif-list { display: flex; flex-direction: column; gap: 10px; }
.f-notif-item {
  display: flex; gap: 14px; padding: 14px 16px;
  background: var(--f-card-bg); border: 1px solid var(--f-border);
  border-radius: var(--f-radius); position: relative;
  box-shadow: var(--f-shadow);
  transition: box-shadow var(--f-transition);
}
.f-notif-item:not(.is-read) {
  border-left: 4px solid var(--f-primary);
  background: #fafcff;
}
.f-notif-item.is-read { opacity: 0.75; }
.f-notif-avatar img,
.f-notif-avatar .f-notif-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 1rem;
  flex-shrink: 0;
}
.f-notif-avatar .f-notif-avatar-img.f-avatar-placeholder,
.f-notif-avatar .f-avatar-placeholder.f-notif-avatar-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--f-primary-light);
  color: var(--f-primary);
  font-weight: 700;
}
.f-notif-body { flex: 1; min-width: 0; }
.f-notif-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.f-notif-kind {
  display: inline-block; padding: 1px 7px; border-radius: 8px;
  font-size: 0.72rem; font-weight: 700;
}
.f-notif-kind-reply { background: #e8f4fd; color: #2980b9; }
.f-notif-kind-mention { background: #fef9e7; color: #c0960a; }
.f-notif-kind-like { background: #fde8e8; color: #c0392b; }
.f-notif-kind-system { background: var(--f-bg); color: var(--f-text-muted); }
.f-notif-content { font-size: 0.88rem; color: var(--f-text-muted); margin-bottom: 6px; }
.f-notif-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.f-notif-dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--f-primary); }

/* ============================================================
   搜索页
   ============================================================ */
.f-search-form { background: var(--f-card-bg); border: 1px solid var(--f-border); border-radius: var(--f-radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--f-shadow); }
.f-search-input-row { display: flex; gap: 10px; margin-bottom: 12px; }
.f-search-input { flex: 1; }
.f-search-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.f-search-summary { color: var(--f-text-muted); font-size: 0.88rem; margin-bottom: 12px; }
.f-search-reply-excerpts { margin: 6px 0; }
.f-search-excerpt {
  font-size: 0.82rem; color: var(--f-text-muted); background: var(--f-bg);
  border-radius: var(--f-radius-sm); padding: 5px 10px; margin-bottom: 4px;
}
.f-excerpt-label { font-weight: 600; color: var(--f-primary); }
.f-search-excerpt a { color: var(--f-text-muted); text-decoration: none; }
.f-search-excerpt a:hover { color: var(--f-primary); }
.f-search-excerpt mark { background: #fff3cd; border-radius: 2px; }

/* ============================================================
   分页
   ============================================================ */
.f-pagination {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 20px; padding: 14px 0;
}
.f-page-btn, .f-page-num {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; border-radius: var(--f-radius-sm);
  font-size: 0.85rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--f-border); background: var(--f-card-bg); color: var(--f-text-muted);
  transition: all var(--f-transition);
}
.f-page-btn:hover:not(.disabled), .f-page-num:hover { background: var(--f-primary-light); border-color: var(--f-primary); color: var(--f-primary); }
.f-page-num.active { background: var(--f-primary); color: #fff; border-color: var(--f-primary); }
.f-page-btn.disabled { opacity: 0.45; cursor: default; }
.f-page-ellipsis { color: var(--f-text-muted); padding: 0 4px; }
.f-page-info { font-size: 0.8rem; color: var(--f-text-muted); margin-left: 8px; }

/* ============================================================
   杂项工具
   ============================================================ */
.f-time { font-size: 0.8rem; color: var(--f-text-muted); white-space: nowrap; }
.f-edited { font-size: 0.78rem; color: var(--f-text-muted); font-style: italic; }
.f-muted { color: var(--f-text-muted); font-style: italic; }
.f-link-muted { font-size: 0.85rem; color: var(--f-text-muted); text-decoration: none; }
.f-link-muted:hover { color: var(--f-primary); }
.f-empty {
  text-align: center; padding: 48px 20px; color: var(--f-text-muted);
  background: var(--f-card-bg); border: 1px solid var(--f-border);
  border-radius: var(--f-radius); box-shadow: var(--f-shadow);
}
.f-empty p { margin: 0 0 14px; font-size: 0.95rem; }
.f-reply-card .f-reply-excerpt {
  font-size: 0.85rem; color: var(--f-text-muted); margin: 4px 0 6px;
  background: var(--f-bg); border-radius: var(--f-radius-sm); padding: 5px 10px;
}
.f-reply-flash {
  animation: replyFlash 1.6s ease;
  border-color: var(--f-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 126, 245, 0.18);
}
@keyframes replyFlash {
  0% { background: rgba(79, 126, 245, 0.13); }
  100% { background: var(--f-card-bg); }
}
.f-report-target { background: var(--f-bg); border-radius: var(--f-radius-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 0.9rem; }
.f-report-target a { color: var(--f-primary); font-weight: 600; text-decoration: none; }

/* 通知导航角标 */
.site-nav .notif-badge-nav {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--f-danger); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px;
  margin-left: 3px; vertical-align: middle;
}

/* ============================================================
   论坛布局增强（2026-04）
   ============================================================ */
.f-wrap {
  padding-top: 26px;
}

.f-section,
.f-aside-card,
.f-thread-card,
.f-post,
.f-form-card,
.f-search-form,
.f-notif-item {
  border-color: #dfe5f1;
}

.f-section,
.f-aside-card {
  box-shadow: 0 3px 10px rgba(20, 35, 90, 0.05);
}

.f-board-header,
.f-section-header {
  align-items: center;
}

.f-thread-list-container {
  min-width: 0;
}

.f-thread-card {
  border-radius: 12px;
  margin-bottom: 12px;
}

.f-thread-card .f-tc-title {
  line-height: 1.45;
  word-break: break-word;
}

.f-thread-card .f-tc-meta {
  row-gap: 6px;
}

.f-tc-stats {
  padding-left: 10px;
  border-left: 1px dashed var(--f-border);
}

.f-tc-stat-num {
  font-variant-numeric: tabular-nums;
}

.f-post {
  border-radius: 12px;
}

.f-post-header-meta {
  row-gap: 8px;
}

.f-post-footer .f-time {
  font-variant-numeric: tabular-nums;
}

.f-post-actions form {
  display: inline-flex !important;
  margin: 0;
}

.f-action-btn {
  border-radius: 999px;
}

.f-thread-aside,
.f-board-aside {
  position: sticky;
  top: 84px;
}

.f-aside-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f-inline-form {
  display: inline-flex;
}

.f-hidden {
  display: none;
}

.f-bulk-form {
  margin-bottom: 14px;
}

.f-form-row-end {
  align-items: flex-end;
}

.f-help-text-sm {
  font-size: 12px;
}

.f-thread-select-cell {
  padding-right: 8px;
  display: flex;
  align-items: flex-start;
}

.f-thread-select-input {
  margin-top: 8px;
}

.f-action-select-merge {
  width: 100px;
}

.f-accepted-notice {
  margin-top: 8px;
}

.f-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
}

.f-textarea,
.f-input,
.f-select {
  border-radius: 10px;
}

.f-textarea:focus,
.f-input:focus,
.f-select:focus,
.f-aside-search-input:focus {
  box-shadow: 0 0 0 3px rgba(79, 126, 245, 0.16);
}

.f-notif-item {
  border-radius: 12px;
}

.f-search-results .f-thread-card {
  align-items: stretch;
}

@media (max-width: 560px) {
  .f-wrap {
    padding-top: 16px;
  }
  .f-thread-aside,
  .f-board-aside {
    position: static;
    top: auto;
  }
  .f-thread-card {
    padding: 12px;
    gap: 10px;
  }
  .f-tc-stats {
    width: 100%;
    padding-left: 0;
    border-left: none;
    border-top: 1px dashed var(--f-border);
    padding-top: 8px;
    justify-content: flex-start;
  }
  .f-post {
    flex-direction: column;
  }
  .f-post-author {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--f-border);
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px;
    gap: 10px;
  }
  .f-post-body {
    padding: 14px;
  }
  .f-post-title {
    font-size: 1.15rem;
  }
  .f-form-actions {
    align-items: stretch;
  }
  .f-form-actions .f-btn {
    width: 100%;
    justify-content: center;
  }
  .f-form-card { padding: 18px 14px; }
  .f-author-avatar { width: 38px; height: 38px; }
}

/* ===== 修复：按钮图标居中 + 日程布局错乱（优先级兜底） ===== */
.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  pointer-events: none;
}

.chat-header-actions .btn-search,
.chat-header-actions .btn-call-audio,
.chat-header-actions .btn-call-video,
.chat-header-actions .btn-room-files,
.chat-header-actions .btn-room-highlights,
.chat-header-actions .btn-announcement,
.chat-header-actions .btn-room-settings,
.chat-header-actions .btn-room-members,
.chat-header-actions .btn-delete-room,
.btn-back,
.btn-attach,
.btn-voice,
.btn-emoji,
.btn-pin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.chat-header-actions .btn-search,
.chat-header-actions .btn-call-audio,
.chat-header-actions .btn-call-video,
.chat-header-actions .btn-room-files,
.chat-header-actions .btn-room-highlights,
.chat-header-actions .btn-announcement,
.chat-header-actions .btn-room-settings,
.chat-header-actions .btn-room-members,
.chat-header-actions .btn-delete-room,
.btn-back {
  width: 36px;
  height: 36px;
  padding: 0 !important;
}

.btn-attach,
.btn-voice,
.btn-emoji {
  width: 42px;
  height: 42px;
  padding: 0 !important;
}

/* ===== Chat visual refresh: focused app surface ===== */
:root {
  --chat-bg: #eef3f8;
  --chat-bg-soft: #f6f8fb;
  --chat-panel: #ffffff;
  --chat-panel-muted: #f8fafc;
  --chat-border: #dbe3ee;
  --chat-border-soft: #e8edf5;
  --chat-text: #111827;
  --chat-muted: #687386;
  --chat-faint: #94a3b8;
  --chat-primary: #3867d6;
  --chat-primary-hover: #2f58ba;
  --chat-primary-soft: #e7efff;
  --chat-success-soft: #e7f6ed;
  --chat-success: #15803d;
  --chat-warning-soft: #fff7df;
  --chat-warning: #d97706;
  --chat-danger-soft: #fee2e2;
  --chat-input-area-height: 96px;
  --chat-call-input-gap: 14px;
  --chat-radius: 8px;
  --chat-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --chat-shadow-pop: 0 18px 46px rgba(15, 23, 42, 0.16);
}

.chat-layout {
  height: calc(100dvh - 56px);
  background: var(--chat-bg);
}

@supports not (height: 100dvh) {
  .chat-layout {
    height: calc(100vh - 56px);
  }
}

.chat-sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--chat-panel-muted);
  border-right: 1px solid var(--chat-border);
}

.sidebar-header {
  padding: 16px 16px 14px;
  background: var(--chat-panel);
  border-bottom: 1px solid var(--chat-border-soft);
}

.sidebar-header h2 {
  margin: 0 0 12px;
  color: var(--chat-text);
  font-size: 20px;
  font-weight: 700;
}

.sidebar-home-link {
  color: inherit;
  text-decoration: none;
}

.sidebar-home-link:hover {
  color: var(--chat-primary);
}

.user-info {
  min-width: 0;
  align-items: center;
}

.user-profile-link {
  min-width: 0;
  flex: 1;
  padding: 5px;
  border-radius: var(--chat-radius);
}

.user-profile-link:hover {
  background: var(--chat-bg-soft);
}

.user-name {
  min-width: 0;
  overflow: hidden;
  color: var(--chat-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-avatar-small,
.user-avatar-placeholder {
  width: 32px;
  height: 32px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.btn-link,
.btn-logout {
  color: var(--chat-muted);
  font-size: 12px;
}

.btn-link:hover,
.btn-logout:hover {
  color: var(--chat-primary);
  background: var(--chat-primary-soft);
}

.sidebar-tabs {
  gap: 4px;
  padding: 10px 12px;
  background: var(--chat-panel);
  border-bottom: 1px solid var(--chat-border-soft);
}

.tab-btn {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--chat-radius);
  background: transparent;
  color: var(--chat-muted);
  font-size: 13px;
  font-weight: 600;
}

.tab-btn:hover {
  background: var(--chat-bg-soft);
  color: var(--chat-text);
}

.tab-btn.active {
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
}

.btn-create-room {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 12px;
  border-radius: var(--chat-radius);
  background: var(--chat-primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(56, 103, 214, 0.22);
}

.btn-create-room:hover {
  background: var(--chat-primary-hover);
}

.room-list,
.online-list,
.user-list {
  padding: 6px 0 10px;
}

.room-item,
.user-item {
  position: relative;
  min-height: 58px;
  margin: 2px 8px;
  padding: 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--chat-radius);
  color: var(--chat-text);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.room-item:hover,
.user-item:hover {
  background: var(--chat-panel);
  border-color: var(--chat-border-soft);
}

.room-item.active {
  background: var(--chat-panel);
  border-color: #c7d6f8;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.room-item.active::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--chat-primary);
}

.room-item.pinned {
  background: color-mix(in srgb, var(--chat-warning-soft) 64%, var(--chat-panel));
}

.room-item.pinned .btn-pin::after {
  display: none;
}

.btn-pin {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--chat-radius);
  background: transparent;
  color: var(--chat-faint);
  font-size: 14px;
}

.btn-pin .material-symbols-outlined,
.room-lock-icon {
  font-size: 18px;
}

.room-lock-icon {
  flex: 0 0 auto;
  color: var(--chat-faint);
}

.room-item.pinned .btn-pin,
.btn-pin:hover {
  color: var(--chat-primary);
  background: var(--chat-primary-soft);
}

.room-main {
  min-width: 0;
  gap: 5px;
}

.room-line,
.room-subline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.room-name {
  min-width: 0;
  overflow: hidden;
  color: var(--chat-text);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  background: var(--chat-success-soft);
  color: var(--chat-success);
  font-size: 11px;
  font-weight: 700;
}

.room-preview {
  min-width: 0;
  flex: 1;
  color: var(--chat-muted);
  font-size: 12px;
}

.room-time {
  flex: 0 0 auto;
  color: var(--chat-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.room-state {
  display: inline-flex;
  min-width: 28px;
  justify-content: flex-end;
}

.room-item .room-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--chat-primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(56, 103, 214, 0.24);
}

.presence-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--chat-faint);
  box-shadow: 0 0 0 2px var(--chat-panel-muted);
}

.presence-dot.is-online {
  background: #16a34a;
}

.presence-dot.is-offline {
  background: #a8b1c0;
}

.user-item-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-item-status {
  flex: 0 0 auto;
  color: var(--chat-faint);
  font-size: 12px;
}

.user-item.is-online .user-item-status {
  color: var(--chat-success);
}

.chat-header-actions .btn-call-audio.is-peer-offline,
.chat-header-actions .btn-call-video.is-peer-offline {
  color: var(--chat-faint);
  background: var(--chat-warning-soft);
}

.private-section {
  margin-bottom: 18px;
}

.private-section-title,
.online-count {
  padding: 12px 16px 6px;
  color: var(--chat-muted);
  font-size: 12px;
  font-weight: 700;
}

.user-search-wrap {
  padding: 8px 12px;
  border-bottom: 0;
}

.user-search-input,
.search-input {
  border-color: var(--chat-border);
  background: var(--chat-panel);
  color: var(--chat-text);
}

.private-room-list .room-item.room-item-admin-chat {
  border: 1px solid color-mix(in srgb, #d4af37 52%, var(--chat-border));
  border-radius: var(--chat-radius);
  background: var(--chat-warning-soft);
}

.chat-main {
  background: var(--chat-bg);
}

.chat-empty {
  background: var(--chat-bg);
}

.chat-empty-state {
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--chat-muted);
  text-align: center;
}

.chat-empty-state .material-symbols-outlined {
  width: 56px;
  height: 56px;
  border-radius: var(--chat-radius);
  background: var(--chat-panel);
  color: var(--chat-primary);
  font-size: 30px;
  box-shadow: var(--chat-shadow-soft);
}

.chat-empty-state p {
  margin: 0;
  font-weight: 600;
}

.chat-header {
  min-height: 64px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--chat-border);
  backdrop-filter: blur(10px);
}

.chat-room-heading {
  min-width: 0;
}

.chat-room-name {
  min-width: 0;
  overflow: hidden;
  color: var(--chat-text);
  font-size: 17px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.chat-room-badge {
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
  font-weight: 700;
}

.typing-indicator {
  color: var(--chat-muted);
  font-size: 12px;
  white-space: nowrap;
}

.chat-header-actions {
  position: relative;
  align-items: center;
  gap: 6px;
  overflow: visible;
}

.chat-header-actions button[style*="display:none"],
.chat-header-actions button[style*="display: none"],
.input-row button[style*="display:none"],
.input-row button[style*="display: none"] {
  display: none !important;
}

.chat-header-actions .btn-search,
.chat-header-actions .btn-call-audio,
.chat-header-actions .btn-call-video,
.chat-header-actions .btn-room-members,
.chat-header-actions .btn-header-more,
.btn-back {
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--chat-radius);
  background: transparent;
  color: var(--chat-muted);
}

.chat-header-actions .btn-search:hover,
.chat-header-actions .btn-call-audio:hover,
.chat-header-actions .btn-call-video:hover,
.chat-header-actions .btn-room-members:hover,
.chat-header-actions .btn-header-more:hover,
.chat-header-more.is-open .btn-header-more,
.btn-back:hover {
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
}

.chat-header-actions .btn-call-audio:disabled,
.chat-header-actions .btn-call-video:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.chat-header-actions .btn-call-audio,
.chat-header-actions .btn-call-video,
.btn-voice,
.btn-voice-stop {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.chat-header-actions .btn-call-audio > *,
.chat-header-actions .btn-call-video > *,
.btn-voice > * {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.btn-voice-stop {
  min-width: 58px;
  height: 32px;
  padding: 0 14px !important;
}

.chat-header-more {
  position: relative;
  display: none;
}

.chat-header-more.has-visible-items {
  display: inline-flex;
}

.chat-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: none;
  width: 184px;
  padding: 6px;
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius);
  background: var(--chat-panel);
  box-shadow: var(--chat-shadow-pop);
}

.chat-header-more.is-open .chat-more-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-more-menu > button {
  width: 100% !important;
  height: 36px !important;
  display: flex !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 0 10px !important;
  border: 0;
  border-radius: var(--chat-radius);
  background: transparent;
  color: var(--chat-text);
  text-align: left;
}

.chat-more-menu > button:hover {
  background: var(--chat-bg-soft);
  color: var(--chat-primary);
}

.chat-more-menu > button[style*="display:none"],
.chat-more-menu > button[style*="display: none"] {
  display: none !important;
}

.header-more-label {
  font-size: 13px;
  font-weight: 650;
}

.chat-search-panel {
  padding: 10px 14px;
  border-bottom: 1px solid var(--chat-border);
  background: var(--chat-panel);
}

.chat-search-panel.is-open {
  display: grid !important;
  grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(130px, auto) minmax(130px, auto) auto;
  gap: 8px;
}

.btn-search-go {
  min-height: 40px;
  border-radius: var(--chat-radius);
  background: var(--chat-primary);
  color: #ffffff;
  font-weight: 700;
}

.messages-container {
  padding: 18px 22px;
  background: var(--chat-bg);
  scrollbar-color: #b9c4d5 transparent;
}

.messages-list {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 4px 0 16px;
}

.message-item {
  width: 100%;
  margin-bottom: 14px;
  gap: 10px;
}

.message-item.own {
  justify-content: flex-start;
}

.message-avatar {
  width: 36px;
  height: 36px;
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.message-avatar-clickable:hover {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(56, 103, 214, 0.14);
}

.message-body {
  max-width: min(70%, 680px);
}

.message-item.own .message-body {
  align-items: flex-end;
}

.message-item:not(.own) .message-body {
  align-items: flex-start;
}

.message-meta {
  gap: 6px;
  margin: 0 2px 5px;
  color: var(--chat-muted);
}

.message-item.own .message-meta {
  justify-content: flex-end;
  margin: 5px 2px 0;
}

.message-item:not(.own) .message-meta {
  justify-content: flex-start;
}

.message-sender {
  color: var(--chat-primary);
  font-size: 12px;
  font-weight: 700;
}

.message-time,
.message-read-status,
.message-send-status {
  color: var(--chat-faint);
  font-size: 11px;
  font-weight: 600;
}

.message-read-status.read,
.message-send-status.sent {
  color: var(--chat-success);
}

.message-send-status.sent {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--chat-success-soft);
  color: var(--chat-success);
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.message-item:hover .message-send-status.sent,
.message-item:focus-within .message-send-status.sent {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.message-send-status.failed {
  color: #dc2626;
}

.message-content {
  max-width: 100%;
  border: 1px solid var(--chat-border-soft);
  border-radius: 16px 16px 16px 5px;
  background: var(--chat-panel);
  color: var(--chat-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.message-item.own .message-content {
  border-color: var(--chat-primary);
  border-radius: 16px 16px 5px 16px;
  background: var(--chat-primary);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(56, 103, 214, 0.18);
}

.message-content.message-text {
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.message-reply {
  max-width: 100%;
  margin-bottom: 6px;
  border: 1px solid #cbd8f4;
  border-left: 3px solid var(--chat-primary);
  border-radius: var(--chat-radius);
  background: var(--chat-primary-soft);
  color: var(--chat-text);
}

.message-item.own .message-reply {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.message-reply-sender {
  color: var(--chat-primary);
  font-weight: 800;
}

.message-item.own .message-reply-sender {
  color: #ffffff;
}

.message-day-divider span,
.message-item-system .message-system {
  padding: 5px 11px;
  border: 1px solid var(--chat-border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--chat-muted);
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.message-content.msg-media-box--image,
.message-content.msg-media-box--video {
  border-radius: var(--chat-radius);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.message-content .msg-image,
.message-content .msg-video-thumb {
  border-radius: var(--chat-radius);
}

.msg-file-card {
  min-width: min(340px, 70vw);
  padding: 0;
  overflow: hidden;
}

.msg-file {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.msg-file-icon,
.msg-file-download {
  color: var(--chat-primary);
}

.message-item.own .msg-file-icon,
.message-item.own .msg-file-download {
  color: #ffffff;
}

.msg-file-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.msg-file-name {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.message-item.own .msg-file-size {
  color: rgba(255, 255, 255, 0.74);
}

.msg-file-missing {
  background: var(--chat-danger-soft);
  color: #991b1b;
}

.new-message-bubble-wrap {
  bottom: 104px;
}

.new-message-bubble {
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: var(--chat-primary);
  box-shadow: 0 10px 24px rgba(56, 103, 214, 0.26);
}

.chat-input-area {
  padding: 12px 18px 14px;
  background: var(--chat-panel);
  border-top: 1px solid var(--chat-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.04);
}

.input-row {
  gap: 8px;
  align-items: flex-end;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 7px;
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius);
  background: var(--chat-panel-muted);
}

.btn-attach,
.btn-voice,
.btn-emoji,
.btn-send {
  width: 42px;
  height: 42px;
  border-radius: var(--chat-radius);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.btn-attach,
.btn-voice,
.btn-emoji {
  border: 0;
  background: transparent;
  color: var(--chat-muted);
}

.btn-attach:hover,
.btn-voice:hover,
.btn-emoji:hover {
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
}

.btn-voice.recording {
  background: #dc2626;
  color: #ffffff;
}

#messageInput {
  min-height: 42px;
  max-height: 152px;
  padding: 10px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--chat-text);
  font-size: 14px;
  line-height: 1.55;
  box-shadow: none;
}

#messageInput:focus {
  border-color: transparent;
  box-shadow: none;
}

.btn-send {
  border: 0;
  background: var(--chat-primary);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(56, 103, 214, 0.2);
}

.btn-send:hover {
  background: var(--chat-primary-hover);
  transform: translateY(-1px);
}

.input-row .input-tool-icon {
  width: 1em;
  height: 1em;
  font-family: "Microsoft YaHei", "微软雅黑", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 22px;
  font-variation-settings: normal;
}

.input-tool-icon-send {
  transform: none;
}

.reply-preview,
.upload-progress-wrap,
.pending-file-send-wrap,
.pasted-image-drafts,
.voice-recording {
  width: min(100%, 980px);
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--chat-radius);
}

.emoji-picker {
  left: max(18px, calc((100% - 980px) / 2 + 18px));
  right: auto;
  border-color: var(--chat-border);
  border-radius: var(--chat-radius);
  background: var(--chat-panel);
  box-shadow: var(--chat-shadow-pop);
}

.emoji-item {
  border-radius: var(--chat-radius);
}

.modal-content,
.preview-modal-content {
  border-color: var(--chat-border);
  border-radius: var(--chat-radius);
}

.toast-item {
  border-radius: var(--chat-radius);
  box-shadow: var(--chat-shadow-soft);
}

.call-panel {
  position: fixed;
  right: 22px;
  bottom: calc(var(--chat-input-area-height, 96px) + var(--chat-call-input-gap, 14px) + env(safe-area-inset-bottom));
  z-index: 120;
  width: min(360px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius);
  background: #111827;
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
}

.call-panel.is-expanded {
  top: 18px;
  left: 50%;
  right: auto;
  bottom: calc(var(--chat-input-area-height, 96px) + var(--chat-call-input-gap, 14px) + env(safe-area-inset-bottom));
  display: flex !important;
  flex-direction: column;
  width: min(960px, calc(100vw - 48px));
  height: auto;
  max-height: calc(100dvh - var(--chat-input-area-height, 96px) - 48px - env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

.call-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  background: rgba(255, 255, 255, 0.06);
}

.call-peer {
  min-width: 0;
}

.call-peer-name {
  overflow: hidden;
  font-size: 15px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-status {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.call-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.call-media-state {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 700;
}

.call-network-quality {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.call-network-quality[data-tone="good"] {
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
}

.call-network-quality[data-tone="warn"] {
  background: rgba(245, 158, 11, 0.22);
  color: #fde68a;
}

.call-network-quality[data-tone="bad"] {
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
}

.call-video-stage {
  position: relative;
  display: grid;
  min-height: 210px;
  background: #0f172a;
}

.call-panel.is-expanded .call-video-stage {
  flex: 1;
  min-height: 0;
}

.call-panel.is-audio .call-video-stage {
  min-height: 170px;
}

.call-remote-video {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  background: #0f172a;
}

.call-panel.is-audio .call-remote-video {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.call-remote-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background:
    linear-gradient(145deg, rgba(37, 99, 235, 0.28), rgba(16, 185, 129, 0.22)),
    #111827;
}

.call-avatar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 28px;
  font-weight: 800;
}

.call-placeholder-meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.call-local-tile {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 104px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: calc(var(--chat-radius) - 2px);
  background: #020617;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 4;
}

.call-local-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-panel.is-audio .call-local-tile {
  display: none;
}

.call-local-off {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  background: rgba(2, 6, 23, 0.8);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.call-panel.is-local-primary .call-local-tile {
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  z-index: 1;
}

.call-panel.is-local-primary .call-local-video {
  object-fit: contain;
  background: #020617;
}

.call-panel.is-local-primary .call-remote-video {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: 104px;
  height: 78px;
  min-height: 0;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: calc(var(--chat-radius) - 2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.call-stage-error {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(15, 23, 42, 0.94);
  text-align: center;
}

.call-stage-error button {
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  font-weight: 750;
}

.call-stage-error-hint {
  max-width: 280px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.call-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.96);
}

.call-icon-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  appearance: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-variant-emoji: emoji;
}

.call-cancel-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.call-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.call-icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.call-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.call-icon-btn.is-active {
  background: rgba(59, 130, 246, 0.85);
}

.call-icon-btn.is-off {
  background: #f59e0b;
  color: #111827;
}

.call-quality-select {
  flex: 0 0 auto;
  height: 34px;
  min-width: 96px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.call-quality-select:focus {
  outline: 2px solid rgba(255, 255, 255, 0.42);
  outline-offset: 2px;
}

.call-quality-select option {
  background: #111827;
  color: #ffffff;
}

.call-hangup,
.call-close-btn {
  background: #dc2626;
}

.call-close-btn {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  font-family: "Microsoft YaHei", "微软雅黑", "Segoe UI", Arial, sans-serif;
}

.preview-close,
.pasted-image-draft-remove,
.btn-cancel-reply,
.call-close-btn {
  display: grid;
  place-items: center;
}

.call-settings-panel[hidden] {
  display: none;
}

.call-settings-panel {
  padding: 0 12px 12px;
  background: rgba(15, 23, 42, 0.96);
}

.call-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
}

.call-settings-row.is-disabled {
  opacity: 0.58;
}

.call-device-row span {
  flex: 0 0 52px;
}

.call-device-select {
  min-width: 0;
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.call-device-select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.call-device-select option {
  background: #111827;
  color: #ffffff;
}

.call-settings-hint {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 1.45;
}

.call-volume-row {
  margin: 10px 0 0;
}

.call-volume-row span,
.call-volume-row strong {
  flex: 0 0 auto;
}

.call-volume-slider {
  min-width: 0;
  flex: 1;
  accent-color: #60a5fa;
}

.call-audio-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.call-audio-settings label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.call-audio-settings label.is-disabled {
  opacity: 0.58;
}

.call-audio-settings input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #60a5fa;
}

.incoming-call-card {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 1350;
  width: min(390px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius);
  background: #ffffff;
  color: var(--chat-text);
  box-shadow: var(--chat-shadow-pop);
}

.incoming-call-card[hidden] {
  display: none !important;
}

.incoming-call-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.incoming-call-kind {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
  font-size: 18px;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-variant-emoji: emoji;
}

.incoming-call-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
  font-size: 22px;
  font-weight: 850;
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.25);
}

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

.incoming-call-copy {
  min-width: 0;
  flex: 1;
}

.incoming-call-copy h3 {
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incoming-call-copy p {
  margin: 3px 0 0;
  color: var(--chat-muted);
  font-size: 13px;
  font-weight: 750;
}

.incoming-call-copy span {
  display: block;
  margin-top: 3px;
  color: var(--chat-faint);
  font-size: 12px;
}

.incoming-call-mute {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: #ffffff;
  padding: 0;
  color: var(--chat-warning);
  font-size: 18px;
  line-height: 1;
  text-align: center;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-variant-emoji: emoji;
}

.incoming-call-mute.is-muted {
  background: var(--chat-warning-soft);
}

.incoming-call-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.incoming-call-actions .btn {
  min-width: 94px;
}

.message-system-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(520px, 92vw);
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}

.message-system-call-icon {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
}

.message-system-call-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.message-system-call-text strong {
  color: var(--chat-text);
  font-size: 12px;
}

.message-system-call-text span {
  overflow: hidden;
  color: var(--chat-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .chat-sidebar {
    width: 300px;
    min-width: 300px;
  }

  .chat-search-panel.is-open {
    grid-template-columns: 1fr 1fr;
  }

  .btn-search-go {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .chat-layout {
    height: calc(100dvh - 56px);
  }

  .chat-sidebar {
    top: 56px;
    bottom: 0;
    width: min(88vw, 330px);
    min-width: 0;
    height: calc(100dvh - 56px);
    box-shadow: var(--chat-shadow-pop);
  }

  .chat-header {
    min-height: 58px;
    padding: 8px 10px;
  }

  .chat-header-actions {
    max-width: none;
    flex-shrink: 0;
    overflow: visible;
  }

  .chat-header-actions button {
    flex: 0 0 38px;
  }

  .call-panel {
    left: 10px;
    right: 10px;
    bottom: calc(var(--chat-input-area-height, 96px) + 10px + env(safe-area-inset-bottom));
    width: auto;
  }

  .call-video-stage,
  .call-remote-video {
    min-height: 190px;
  }

  .call-local-tile,
  .call-panel.is-local-primary .call-remote-video {
    width: 88px;
    height: 66px;
  }

  .call-panel.is-local-primary .call-local-tile {
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }

  .call-panel.is-video {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: calc(var(--chat-input-area-height, 96px) + 10px + env(safe-area-inset-bottom));
    display: flex !important;
    flex-direction: column;
    width: auto;
    height: auto;
    border-radius: var(--chat-radius);
    transform: none;
  }

  .call-panel.is-video .call-video-stage {
    flex: 1;
    min-height: 0;
  }

  .call-panel.is-video .call-controls {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .incoming-call-card {
    top: auto;
    right: 10px;
    bottom: calc(var(--chat-input-area-height, 96px) + 10px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    padding: 14px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius);
  }

  .incoming-call-actions {
    justify-content: stretch;
  }

  .incoming-call-actions .btn {
    flex: 1;
    min-height: 44px;
  }

  .chat-more-menu {
    right: 0;
    width: 176px;
  }

  .messages-container {
    padding: 12px 10px;
  }

  .message-item {
    gap: 8px;
  }

  .message-avatar {
    width: 32px;
    height: 32px;
  }

  .message-body {
    max-width: 82%;
  }

  .chat-input-area {
    padding: 9px 10px 10px;
  }

  .input-row {
    padding: 6px;
    gap: 5px;
  }

  .btn-attach,
  .btn-voice,
  .btn-emoji,
  .btn-send {
    width: 40px;
    height: 40px;
  }

  #messageInput {
    min-height: 40px;
    padding: 9px 4px;
  }

  .new-message-bubble-wrap {
    bottom: 88px;
  }
}

@media (max-width: 520px) {
  .site-nav {
    gap: 2px;
  }

  .site-nav a {
    padding: 7px 8px;
  }

  .beijing-time-label {
    display: none;
  }

  .chat-room-description,
  .chat-room-meta-sep {
    display: none;
  }

  .chat-search-panel.is-open {
    grid-template-columns: 1fr;
  }

  .chat-more-menu {
    position: fixed;
    top: 112px;
    right: 10px;
  }

  .message-body {
    max-width: 86%;
  }

  .input-row .input-tool-icon {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-item,
  .toast-item,
  .new-message-bubble,
  .btn-send,
  .room-item,
  .user-item,
  .btn-voice.recording {
    animation: none !important;
    transition: none !important;
  }
}

/* Final chat media normalization: keep image bubbles fitted to the image itself. */
.message-content.msg-media-box--image {
  display: inline-flex;
  align-items: flex-start;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: min(420px, 78vw);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}

.message-content.msg-media-box--image:not(.is-loaded) {
  min-width: min(180px, 54vw);
  min-height: 112px;
  background: rgba(15, 23, 42, 0.04);
}

.message-content.msg-media-box--image.is-loaded {
  min-width: 0;
  min-height: 0;
}

.message-item.own .message-content.msg-media-box--image {
  border-color: transparent;
  background: transparent;
  color: inherit;
}

.message-content.msg-media-box--image .msg-image-link {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  line-height: 0;
  font-size: 0;
}

.message-content.msg-media-box--image .msg-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(420px, 78vw);
  max-height: min(360px, 52vh);
  object-fit: contain;
}

.message-read-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.message-read-status.read {
  background: #dcfce7;
  color: #166534;
}

.message-item.own .message-read-status,
.message-item.own .message-read-status.read {
  color: inherit;
}

.message-item.own .message-read-status {
  background: rgba(148, 163, 184, 0.22);
  color: #64748b;
}

.message-item.own .message-read-status.read {
  background: #dcfce7;
  color: #166534;
}

.emoji-picker {
  width: min(520px, calc(100vw - 28px), calc(100% - 24px));
  max-width: none;
  max-height: min(370px, 56vh);
  padding: 8px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.emoji-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 4px;
  margin-bottom: 7px;
  padding: 1px 0 2px;
  overflow: hidden;
  scrollbar-width: none;
}

.emoji-tabs::-webkit-scrollbar {
  display: none;
}

.emoji-tab {
  min-width: 0;
  min-height: 26px;
  padding: 0 6px;
  border: 1px solid var(--chat-border, var(--border));
  border-radius: 8px;
  background: var(--chat-bg-soft, var(--bg-input));
  color: var(--chat-muted, var(--text-secondary));
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.emoji-tab[aria-selected="true"] {
  border-color: var(--chat-primary, var(--accent));
  background: var(--chat-primary-soft, rgba(59, 130, 246, 0.12));
  color: var(--chat-primary, var(--accent));
}

.emoji-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  color: var(--chat-muted, var(--text-secondary));
  font-size: 13px;
  font-weight: 700;
}

.emoji-empty[hidden] {
  display: none !important;
}

.emoji-grid {
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 3px;
  max-height: min(285px, calc(56vh - 76px));
  padding: 2px 1px 2px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.emoji-item {
  appearance: none;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.emoji-item:hover {
  background: var(--chat-bg-soft, var(--bg-input));
}

.centered-icon-glyph,
.input-tool-icon,
.chat-header-actions .material-symbols-outlined {
  display: inline-grid !important;
  place-items: center !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1 !important;
  text-align: center !important;
}

.centered-icon-glyph {
  transform: translateY(0.025em);
}

.call-icon-svg {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-header-actions .call-icon-svg,
.incoming-call-kind .call-icon-svg,
.incoming-call-mute .call-icon-svg,
.message-system-call-icon .call-icon-svg {
  width: 18px;
  height: 18px;
}

.call-icon-btn[data-icon="settings"] .call-icon-svg {
  width: 22px;
  height: 22px;
}

.call-close-btn .call-icon-svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.call-close-btn .centered-icon-glyph,
.preview-close,
.pasted-image-draft-remove,
.btn-cancel-reply {
  transform: none;
  font-family: "Microsoft YaHei", "微软雅黑", "Segoe UI", Arial, sans-serif;
}

.btn-attach,
.btn-voice,
.btn-emoji,
.btn-send,
.chat-header-actions .btn-call-audio,
.chat-header-actions .btn-call-video,
.call-icon-btn,
.incoming-call-kind,
.incoming-call-mute,
.message-system-call-icon {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.top-home-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 50%;
  color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.top-home-button:hover,
.top-home-button:focus-visible {
  color: var(--chat-primary, var(--accent));
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
  outline: none;
}

.top-home-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-reveal-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-reveal-field > input {
  padding-right: 46px !important;
}

.password-reveal-button {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text-secondary, #667085);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .16s ease, color .16s ease;
}

.password-reveal-button:hover,
.password-reveal-button:focus-visible,
.password-reveal-field.is-password-visible .password-reveal-button {
  color: var(--accent, var(--chat-primary));
  background: color-mix(in srgb, currentColor 12%, transparent);
  outline: none;
}

.password-reveal-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}