:root {
  --green: #9f3f65;
  --green2: #bd5b80;
  --cream: #fff5f8;
  --ink: #4b2937;
  --muted: #9b7887;
  --line: #efd9e2;
  --gold: #f3b9cb;
  --danger: #b0445f;
}

body {
  background: linear-gradient(145deg, #fff8fa 0%, #fcedf3 100%);
}

.login {
  background:
    radial-gradient(circle at 72% 18%, #df86a8 0, transparent 30%),
    linear-gradient(145deg, #7f2f50, #b9577c);
}

.login-card,
.panel,
.cards article,
.notice,
.ticket,
.schedule-card,
.stat {
  border-color: #efd6e0;
  box-shadow: 0 8px 24px #8d3f5d0d;
}

.brand small,
.bot-state small,
nav button,
.logout {
  color: #f0c9d8;
}

.bot-state {
  border-color: #bc6d8a;
}

.logout {
  border-color: #c97997;
}

.user-row > em,
.staff > article > b {
  color: #9f3f65;
}

.bot-state i.online {
  background: #ffd1df;
  box-shadow: 0 0 0 4px #b05276;
}

.flash {
  background: #fae2eb;
  border-color: #eebdce;
}

.bot-preview {
  background: #f6dce6;
  border-color: #8e3c5d;
}

.menu-grid button,
.bubble,
.chat-title {
  color: #7d3652;
}

.user-row > span,
.logo {
  background: linear-gradient(145deg, #f3b9cb, #db789c);
}

.tag-on,
.permission-tags span {
  background: #f8dce7;
  color: #8e3c5d;
}

.file-drop {
  border-color: #d997b1;
  background: #fff8fa;
}

.wide-form input:focus,
.wide-form textarea:focus,
.wide-form select:focus,
.inline-form input:focus,
.dialog-fields input:focus,
.dialog-fields textarea:focus,
.dialog-fields select:focus {
  border-color: #c8688d;
  outline: 2px solid #f7d7e3;
}

.current-admin {
  padding: 10px 9px;
  border-top: 1px solid #bc6d8a;
  font-size: 11px;
}

.current-admin small {
  display: block;
  margin-top: 3px;
  color: #edbfd0;
}

.permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid #ead0da;
  border-radius: 10px;
}

.permissions legend {
  padding: 0 6px;
  color: #805066;
  font-size: 11px;
}

.permissions label {
  display: flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 5px;
}

.permissions input {
  width: auto;
}

.permission-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0;
}

.permission-tags span {
  padding: 4px 7px;
  border-radius: 7px;
  font-size: 9px;
}

.change-note {
  display: block;
  margin-top: 10px;
  color: #a06a80;
  font-size: 9px;
}

.audit-tools {
  display: grid;
  grid-template-columns: 180px 180px 1fr auto;
  gap: 8px;
}

.audit-tools select,
.audit-tools input {
  min-width: 0;
  padding: 10px;
  border: 1px solid #ead0da;
  border-radius: 8px;
  background: #fffafb;
  font: inherit;
  font-size: 11px;
}

.audit-detail {
  min-width: 260px;
  white-space: normal;
}

.log-ok,
.log-bad {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 9px;
}

.log-ok {
  background: #f7dbe6;
  color: #843750;
}

.log-bad {
  background: #f8d6d6;
  color: #a52f45;
}

.account-panel {
  max-width: 760px;
}

.edit-image {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
}

.edit-image input {
  width: 100%;
  padding: 9px;
  border: 1px solid #dbe3df;
  border-radius: 8px;
}

#edit-remove-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

#edit-remove-wrap input {
  width: auto;
}

.stats {
  grid-template-columns: repeat(6, 1fr);
}

.duty-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 2px solid #edbfd0;
  background: linear-gradient(135deg, #fff 0%, #fff1f6 100%);
}

.duty-panel h2 {
  color: #8e3c5d;
}

.duty-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.duty-toolbar span {
  padding: 8px 11px;
  border-radius: 999px;
  background: #f9dce7;
  color: #8e3c5d;
  font-size: 11px;
  font-weight: 700;
}

.duty-toolbar button {
  border: 0;
  border-radius: 8px;
  padding: 10px 13px;
  background: #9f3f65;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.duty-toolbar .secondary-btn {
  border: 1px solid #e4b7c8;
  background: #fff;
  color: #8e3c5d;
}

.duty-toolbar button:disabled {
  opacity: .55;
}

.staff article {
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.staff article.staff-on-duty {
  border: 2px solid #da7da0;
  box-shadow: 0 10px 28px #a640661f;
  transform: translateY(-2px);
}

.duty-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 9px;
  margin: -4px -4px 14px;
  padding: 11px;
  border: 1px solid #ead6de;
  border-radius: 10px;
  background: #f7f5f6;
  text-align: left;
}

.duty-controls.selected {
  border-color: #e09bb5;
  background: #fff0f5;
}

.duty-controls label {
  display: grid;
  gap: 5px;
  color: #805066;
  font-size: 10px;
}

.duty-controls input[data-duty-time] {
  min-width: 0;
  width: 100%;
  padding: 9px;
  border: 1px solid #dfc7d1;
  border-radius: 8px;
  background: #fff;
  color: #4b2937;
  font: inherit;
  font-size: 11px;
}

.duty-controls input[data-duty-time]:disabled {
  background: #eee9eb;
  color: #a28c95;
}

.duty-switch {
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  min-width: 92px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #eadfe3;
  cursor: pointer;
  font-weight: 700;
}

.duty-controls.selected .duty-switch {
  background: #d86f98;
  color: #fff;
}

.duty-switch input {
  width: auto;
  accent-color: #9f3f65;
}

/* 人员相册必须始终收在卡片内：窄卡片自动减少列数，操作按钮等宽缩放。 */
.staff > article {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.staff-gallery {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(105px, 100%), 1fr));
  align-items: start;
  overflow: hidden;
}

.staff-photo {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.staff-thumb {
  display: block;
  max-width: 100%;
}

.staff-photo > .photo-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.staff-photo > .photo-actions button,
.photo-action-placeholder {
  display: block;
  width: 100%;
  min-width: 0;
}

.staff-photo > .photo-actions button {
  padding: 4px 1px;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
}

#broadcast-users {
  min-height: 170px;
  padding: 8px;
}

.emoji-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.emoji-picker button {
  width: 38px;
  min-width: 38px;
  padding: 6px;
  font-size: 20px;
  line-height: 1;
}

.emoji-picker small {
  color: var(--muted);
}

.compact-cards {
  margin-top: 14px;
}

.reviews-list {
  display: grid;
  gap: 12px;
}

.reviews-list .notice {
  margin: 0;
}

.reviews-list b {
  color: #8f3158;
}
.ticket-meta { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.conversation-card { min-width: 0; overflow: hidden; }
.consulting-staff { margin: 10px 0; padding: 9px 11px; border-radius: 9px; background: #fff3f8; color: #8e315d; font-weight: 700; }
.chat-history { min-width: 0; margin: 14px 0; padding: 12px; border: 1px solid #eed9e3; border-radius: 12px; background: #fcfafb; }
.chat-history h3 { margin: 0 0 12px; color: #7e3455; font-size: 13px; }
.chat-row { display: flex; width: 100%; margin: 8px 0; }
.chat-row.customer { justify-content: flex-start; }
.chat-row.admin { justify-content: flex-end; }
.chat-bubble { width: fit-content; max-width: min(78%, 680px); padding: 9px 11px; border-radius: 5px 12px 12px; background: #fff; box-shadow: 0 2px 8px #4d17350d; overflow-wrap: anywhere; word-break: break-word; }
.chat-row.admin .chat-bubble { border-radius: 12px 5px 12px 12px; background: #f5e8ef; }
.chat-bubble small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble.send-failed { border: 1px solid #df9a9a; background: #fff1f1; }
.send-status { display: block; margin-top: 6px; color: #a33; font-size: 10px; }
.chat-empty { color: var(--muted); font-size: 11px; text-align: center; }
.reply { align-items: center; flex-wrap: wrap; }
.reply > input[type="text"], .reply > input:not([type]) { min-width: 220px; }
.reply-image-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 11px; border: 1px solid #d9a8bf; border-radius: 8px; background: #fff7fa; color: #8e315d; font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.reply-image-name { max-width: 180px; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

td a {
  color: #a22e61;
  font-weight: 700;
}

@media (max-width: 800px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .audit-tools {
    grid-template-columns: 1fr;
  }

  .duty-panel {
    display: block;
  }

  .duty-toolbar {
    justify-content: stretch;
  }

  .duty-toolbar button {
    flex: 1 1 140px;
  }

  .duty-toolbar span {
    flex: 1 1 100%;
    margin-bottom: 4px;
    text-align: center;
  }

  .duty-controls {
    grid-template-columns: 1fr;
  }

  .staff-gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(92px, 100%), 1fr));
  }
}
.app-version {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 20;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: #8f365e;
  font-size: 11px;
  pointer-events: none;
}

.seo-weekdays { border: 1px solid var(--border, #ead4dd); border-radius: 12px; padding: 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.seo-weekdays label { display: inline-flex; align-items: center; gap: 5px; }
.seo-time-row { margin-top: 16px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.seo-time-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e7b3c7; border-radius: 999px; padding: 5px 8px 5px 12px; background: #fff8fb; }
.seo-time-chip.off, .seo-content-card.disabled, .seo-image-card.disabled { opacity: .55; }
.seo-time-chip button { padding: 5px 8px; min-height: auto; }
.seo-content-list { display: grid; gap: 12px; margin-top: 16px; }
.seo-content-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; border: 1px solid #f0d4df; border-radius: 14px; padding: 14px; background: #fff; overflow: hidden; }
.seo-content-card p { white-space: normal; overflow-wrap: anywhere; }
.seo-content-card .card-actions { grid-column: 1 / -1; }
.seo-content-thumb { width: 110px; height: 110px; border-radius: 10px; object-fit: cover; }
.seo-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 16px; }
.seo-image-card { display: flex; min-width: 0; flex-direction: column; gap: 8px; border: 1px solid #f0d4df; border-radius: 14px; padding: 10px; background: #fff; }
.seo-material-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.seo-image-card b, .seo-image-card small { overflow-wrap: anywhere; }
.seo-keyword-stat { min-width: min(100%, 320px); }
.seo-keyword-stat small { line-height: 1.7; }
#seo-logs details { max-width: 420px; white-space: normal; overflow-wrap: anywhere; }
#seo-logs summary { cursor: pointer; color: #a5295c; }
.seo-preview { width: min(680px, 82vw); max-height: 72vh; overflow: auto; }
.seo-preview img, .seo-preview video { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 12px; margin: 12px 0; }
.seo-preview p { line-height: 1.8; overflow-wrap: anywhere; }

/* 群发和人员媒体：手机端充分利用可用宽度，媒体选择可清楚预览及移除。 */
.selected-preview figure { position: relative; }
.selected-preview img, .selected-preview video { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; }
.selected-preview figure > button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #a33; color: #fff; cursor: pointer; }
.staff-thumb { display: block; background: #111; }
@media (max-width: 700px) {
  #page-broadcast { width: 100%; }
  #page-broadcast .panel { margin-left: -6px; margin-right: -6px; padding: 15px 10px; border-radius: 10px; }
  #page-broadcast .wide-form { width: 100%; }
  #page-broadcast textarea { min-height: 150px; }
  #broadcast-file-preview { width: 100%; overflow-x: auto; }
}

@media (max-width: 700px) {
  .seo-content-card { grid-template-columns: 1fr; }
  .seo-content-thumb { width: 100%; height: auto; max-height: 260px; }
  .seo-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-time-chip { border-radius: 12px; flex-wrap: wrap; }
  #seo-logs table { min-width: 900px; }
}

/* Telegram 富文本群发编辑器 */
.rich-editor-wrap { display: grid; gap: 7px; min-width: 0; }
.rich-editor-wrap > label { font-size: 11px; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid #dbe3df; border-bottom: 0; border-radius: 9px 9px 0 0; background: #f5f8f6; }
.rich-toolbar button { min-width: 34px; padding: 7px 10px; border: 1px solid #cfdbd6; border-radius: 7px; background: #fff; color: var(--green); font-size: 11px; cursor: pointer; }
.rich-toolbar button:hover, .rich-toolbar button:focus-visible { background: #e5f0eb; outline: 2px solid #8fb7aa; outline-offset: 1px; }
.rich-editor { width: 100%; min-height: 150px; max-height: 50vh; overflow: auto; padding: 12px; border: 1px solid #dbe3df; border-radius: 0 0 9px 9px; background: #fbfcfb; color: var(--ink); font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.rich-editor:focus { border-color: #76a899; box-shadow: 0 0 0 3px #76a89922; }
.rich-editor:empty::before { content: attr(data-placeholder); color: #8c9994; pointer-events: none; }
.rich-editor blockquote { margin: 8px 0; padding: 7px 11px; border-left: 3px solid #76a899; background: #f1f6f4; }
.rich-editor .tg-spoiler { border-radius: 3px; background: #5d6a66; color: transparent; }
.rich-editor .tg-spoiler:hover { color: #fff; }
.rich-help { color: var(--muted); font-size: 10px; line-height: 1.55; }
.rich-help span { float: right; color: #397568; font-variant-numeric: tabular-nums; }
.broadcast-template-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; padding: 11px; border: 1px solid #ead6df; border-radius: 10px; background: #fff7fa; }
.broadcast-template-tools label { min-width: 180px; }
.broadcast-template-tools .secondary { background: #fff; color: #8e315d; border: 1px solid #d9a8bf; }
.broadcast-button-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 11px; border: 1px dashed #d9a8bf; border-radius: 10px; background: #fffafb; }
.broadcast-button-editor label { display: grid; gap: 5px; }
.broadcast-telegram-preview { min-height: 280px; padding: 24px; background: linear-gradient(145deg, #e7eee9, #dbe8e3); }
.broadcast-preview-bubble { width: min(520px, 94%); margin: auto; padding: 16px; border-radius: 8px 16px 16px 16px; background: #fff; color: #273832; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 8px 24px #19362f18; }
.broadcast-preview-buttons { width: min(520px, 94%); margin: 7px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.broadcast-preview-buttons.one-column { grid-template-columns: 1fr; }
.broadcast-preview-buttons.three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.broadcast-preview-buttons span { padding: 10px 8px; border-radius: 8px; background: #fff; color: #9b3e68; text-align: center; font-size: 12px; box-shadow: 0 3px 10px #19362f12; }
.settings-rich { display: grid; gap: 0; min-width: 0; }
.settings-rich > label { margin-bottom: 6px; }
.settings-rich-editor { min-height: 105px; max-height: 300px; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 10px; }
.header-tools label { display: inline-flex; align-items: center; gap: 5px; }
.header-tools select { width: auto; min-width: 72px; padding: 5px 7px; border: 1px solid #dbe3df; border-radius: 7px; background: #fff; color: var(--ink); font: inherit; }
#auto-refresh-state { color: #397568; }
.support-alert-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.support-alert-settings > div { margin-right: auto; }
.support-alert-settings h2, .support-alert-settings p { margin-bottom: 0; }
.support-alert-settings label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.support-alert-settings input { accent-color: var(--green); }

.invite-ops-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.invite-rule-card { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; width: 100%; }
.invite-rule-card label { display: grid; gap: 5px; min-width: 0; }
.invite-rule-card .full { grid-column: 1 / -1; }
.invite-rule-card small { align-self: center; color: var(--muted); }
#invite-announcement-preview { width: 100%; min-height: 260px; margin-bottom: 10px; }
.compact-cards > form { padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; }
.support-toast-container { position: fixed; z-index: 1000; top: 18px; right: 18px; width: min(370px, calc(100vw - 28px)); display: grid; gap: 10px; pointer-events: none; }
.support-toast { pointer-events: auto; border: 1px solid #d5a4bc; border-left: 5px solid #c55d8d; border-radius: 14px; padding: 14px 38px 14px 15px; background: #fff8fb; color: var(--ink); box-shadow: 0 16px 42px #5d18362e; cursor: pointer; position: relative; animation: support-toast-in .2s ease-out; }
.support-toast strong { display: block; color: #8e315d; font-size: 13px; margin-bottom: 5px; }
.support-toast p { margin: 0; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.support-toast small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
.support-toast button { position: absolute; top: 7px; right: 8px; border: 0; background: transparent; color: #95677d; cursor: pointer; font-size: 18px; }
.ticket-highlight { border-color: #c55d8d !important; box-shadow: 0 0 0 4px #c55d8d22, 0 12px 30px #5d18361c !important; }
.ticket-unread { border-left: 5px solid #c55d8d !important; background: #fff9fc; }
.quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.quick-reply-chip, [data-quick-fill] { width: auto; padding: 7px 10px; border: 1px solid #e2b8cc; border-radius: 999px; background: #fff7fb; color: #8e315d; cursor: pointer; }
.quick-reply-delete { width: 28px; padding: 5px; border-radius: 50%; background: #fff; color: #a33; border: 1px solid #ebcbd9; }
.support-workbench { display: grid; grid-template-columns: minmax(260px, 30%) minmax(0, 70%); grid-template-rows: minmax(0, 1fr); height: clamp(440px, calc(100dvh - 180px), 720px); min-height: 0; overflow: hidden; border: 1px solid #ead6df; border-radius: 15px; background: #fff; box-shadow: 0 5px 18px #5d18360d; }
.support-inbox { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid #ead6df; background: #fffafb; }
.support-list-tools { display: grid; gap: 9px; padding: 12px; border-bottom: 1px solid #ead6df; }
.support-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.support-filters button { min-width: 0; padding: 7px 3px; border: 1px solid #e5bfce; border-radius: 7px; background: #fff; color: #835069; font-size: 9px; cursor: pointer; }
.support-filters button.active { border-color: #a64269; background: #a64269; color: #fff; }
#support-search { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #dfc7d1; border-radius: 8px; background: #fff; font: inherit; font-size: 10px; }
.support-conversation-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.support-conversation { display: grid; gap: 4px; width: 100%; min-width: 0; padding: 12px; border: 0; border-bottom: 1px solid #f0dfe6; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.support-conversation:hover, .support-conversation.active { background: #f7e9ef; }
.support-conversation.unread { border-left: 4px solid #c55d8d; background: #fff5f9; }
.support-conversation-head, .support-last { display: flex; align-items: center; min-width: 0; gap: 6px; }
.support-conversation-head b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.support-conversation-head time { margin-left: auto; color: var(--muted); font-size: 9px; white-space: nowrap; }
.support-conversation small { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.support-maid { color: #a23d68; font-size: 10px; }
.support-last em { flex: 1; min-width: 0; overflow: hidden; color: #68515b; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.support-last strong { flex: 0 0 auto; font-size: 9px; }
.support-status { width: fit-content; padding: 3px 6px; border-radius: 999px; background: #f4e7ed; color: #87566c; font-size: 8px; white-space: nowrap; }
.support-status.completed { background: #e7f1ed; color: #36705e; }
.support-status.following { background: #fff3d6; color: #8b6821; }
.support-list-empty { padding: 35px 15px; color: var(--muted); font-size: 11px; text-align: center; }
.support-chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; background: linear-gradient(150deg,#fcfafb,#f8f2f5); }
.support-chat-empty { display: grid; place-items: center; min-height: 100%; color: var(--muted); font-size: 12px; }
.support-chat-header { z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 15px; border-bottom: 1px solid #ead6df; background: #fff; }
.support-chat-header h2 { margin: 0 0 3px; font-size: 15px; }
.support-chat-header small, .support-chat-header strong { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.support-chat-header strong { color: #a23d68; }
.support-chat-header label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; }
.support-chat-header select { padding: 6px 8px; border: 1px solid #dfc7d1; border-radius: 7px; background: #fff; font: inherit; font-size: 10px; }
.support-more { position: relative; display: grid; gap: 4px; }
.support-more button, .support-back, .load-earlier { padding: 7px 9px; border: 1px solid #e1bdcc; border-radius: 7px; background: #fff; color: #8e315d; font-size: 9px; cursor: pointer; }
.support-more .danger { position: absolute; z-index: 5; top: 100%; right: 0; width: max-content; margin-top: 4px; color: #a33; box-shadow: 0 8px 24px #4d173525; }
.support-back { display: none; }
.support-history-scroll { min-height: 0; overflow-y: auto; padding: 14px 18px; overscroll-behavior: contain; }
.load-earlier { display: block; margin: 0 auto 14px; }
.support-composer { position: relative; z-index: 2; min-width: 0; padding: 10px 13px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #ead6df; background: #fff; }
.support-composer-note { margin: 0 0 7px; color: var(--muted); font-size: 9px; text-align: center; }
.support-composer .quick-replies { max-height: 80px; overflow-y: auto; }
.support-composer .quick-replies-label { align-self: center; color: var(--muted); font-size: 9px; white-space: nowrap; }
.support-composer .reply { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 7px; min-width: 0; }
.support-composer textarea { width: 100%; min-width: 0; min-height: 42px; max-height: 120px; padding: 9px 10px; border: 1px solid #dbe3df; border-radius: 8px; background: #fbfcfb; font: inherit; font-size: 11px; line-height: 1.45; resize: vertical; }
.support-composer [data-reply] { min-height: 40px; white-space: nowrap; }
.support-composer .reply-image-name { display: none; grid-column: 1 / -1; max-width: 100%; }
.support-composer .reply-image-name:not(:empty) { display: block; }
.chat-bubble { position: relative; }
.chat-delete { display: none; margin-top: 6px; padding: 3px 6px; border: 0; border-radius: 5px; background: #ffffffaa; color: #a33; font-size: 8px; cursor: pointer; }
.chat-bubble:hover .chat-delete, .chat-delete:focus-visible { display: block; }

.staff-view-toolbar { display: flex; justify-content: flex-end; gap: 7px; margin: -2px 0 12px; }
.staff-view-toolbar button, [data-staff-expand] { padding: 8px 11px; border: 1px solid #dfb5c6; border-radius: 8px; background: #fff; color: #8e315d; font: inherit; font-size: 10px; cursor: pointer; }
.staff { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.staff-card { text-align: left !important; }
.staff-card.expanded { grid-column: 1 / -1; }
.staff-card.collapsed .staff-details { display: none; }
.staff-summary { display: grid; gap: 10px; }
.staff-summary-title { display: flex; align-items: baseline; min-width: 0; gap: 8px; }
.staff-summary-title h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-summary-title b { color: #397568; font-size: 10px; }
.staff-summary .duty-controls { margin: 0; }
.staff-summary-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #6e5a63; font-size: 10px; }
.staff-summary-meta button { margin-left: auto; }
.staff-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eedce4; text-align: center; }
.message-center { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
.message-card { display: grid; gap: 10px; min-width: 0; }
.message-card textarea { width: 100%; min-height: 125px; resize: vertical; }
.blacklist-group-picker { border: 1px solid #dbe3df; border-radius: 10px; padding: 12px; }
.blacklist-group-picker legend { padding: 0 6px; font-size: 11px; color: var(--muted); }
#blacklist-groups { display: flex; gap: 10px 18px; flex-wrap: wrap; }
#blacklist-groups label { display: inline-flex; align-items: center; gap: 6px; }
#blacklist-groups input { width: auto; }
.blacklist-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) auto auto auto auto; gap: 8px; align-items: center; }
.blacklist-toolbar input,.blacklist-toolbar select { border: 1px solid #dbe3df; background: #fbfcfb; border-radius: 8px; padding: 10px; font: inherit; font-size: 11px; min-width: 0; }
.blacklist-group-result { margin-bottom: 6px; }
.blacklist-group-result small { display: block; max-width: 360px; color: var(--muted); overflow-wrap: anywhere; }
.blacklist-success { color: #26745a; }
.blacklist-failed,.blacklist-permission_denied { color: #a33; }
.blacklist-sync-groups { display: flex; gap: 8px; flex-wrap: wrap; }
#blacklist-table button { border: 1px solid #cad9d3; background: #fff; color: var(--green); border-radius: 7px; padding: 7px; font-size: 10px; cursor: pointer; margin: 2px; }
#blacklist-table button.danger { color: var(--danger); }
#nickname-blacklist-table button { border: 1px solid #cad9d3; background: #fff; color: var(--green); border-radius: 7px; padding: 7px; font-size: 10px; cursor: pointer; margin: 2px; }
#nickname-blacklist-table button.danger { color: var(--danger); }
.message-card details { border-top: 1px solid #eedce5; padding-top: 8px; }
.message-card summary { cursor: pointer; color: #8e315d; }
.message-card.is-deleted { opacity: .62; }
@keyframes support-toast-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 700px) {
  .blacklist-toolbar { grid-template-columns: 1fr; }
  .invite-ops-grid { grid-template-columns: 1fr; }
  .invite-rule-card { grid-template-columns: 1fr 1fr; }
  .invite-rule-card .full { grid-column: 1 / -1; }
  #page-invite-ops .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rich-toolbar { gap: 5px; }
  .rich-toolbar button { flex: 1 0 auto; min-height: 38px; }
  .rich-editor { min-height: 190px; font-size: 14px; }
  .settings-rich-editor { min-height: 135px; }
  .content > header { align-items: flex-start; gap: 8px; }
  .header-tools { max-width: 190px; gap: 5px; text-align: right; }
  #auto-refresh-state { flex-basis: 100%; }
  .support-alert-settings { align-items: flex-start; }
  .support-alert-settings > div { flex-basis: 100%; }
  .support-toast-container { top: 10px; right: 10px; }
  .broadcast-button-editor { grid-template-columns: 1fr; }
  .message-center { grid-template-columns: 1fr; }
  .message-card .card-actions button { min-height: 42px; flex: 1 1 45%; }
  .support-workbench { display: block; height: calc(100dvh - 16px); min-height: 0; max-width: 100%; }
  .support-inbox, .support-chat-panel { height: 100%; }
  .support-chat-panel { display: none; }
  .support-workbench.chat-open .support-inbox { display: none; }
  .support-workbench.chat-open .support-chat-panel { display: grid; }
  .support-chat-header { grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 10px; }
  .support-chat-header > label { grid-column: 2; }
  .support-chat-header .support-more { grid-column: 2; justify-self: end; }
  .support-back { display: block; align-self: start; }
  .support-history-scroll { padding: 10px; }
  .support-composer { position: relative; bottom: auto; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .support-composer .reply { grid-template-columns: minmax(0, 1fr) auto; }
  .support-composer textarea { grid-column: 1 / -1; resize: none; }
  .support-composer .reply-image-name { grid-column: 1 / -1; }
  .chat-history { padding: 9px; }
  .chat-bubble { max-width: 88%; }
  .support-composer .reply > * { min-width: 0; max-width: 100%; }
  .support-composer .reply-image-button { width: 100%; white-space: normal; }
  .ticket-quick { max-width: 100%; overflow: hidden; }
  .ticket-quick button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .chat-delete { display: block; min-height: 30px; }
  .staff { grid-template-columns: 1fr; }
  .staff-card.expanded { grid-column: auto; }
  .staff-summary-title { flex-wrap: wrap; }
  .staff-summary .duty-controls { grid-template-columns: 1fr; }
  .staff-summary-meta button { min-height: 38px; }
  .broadcast-template-tools > * { width: 100%; }
}