/* KWC 스타일 구조 안내 / KWC style guide
 * 이 파일은 공개 채팅, DM, 그룹, 검색, 핀, 설정 modal이 공유하는 런타임 CSS다. 테마별 차이는 가능한 한 CSS custom property로 전달하고 컴포넌트 selector 자체를 중복하지 않는다.
 * This is the shared runtime CSS for public chat, DM, groups, search, pins, and settings modals. Theme differences should flow through CSS custom properties instead of duplicating component selectors.
 *
 * 8개 map/standalone 사본은 byte-identical하게 유지한다. 한 사본만 수정하면 adapter마다 UI가 달라지므로 변경 후 모든 chat.css를 동기화하고 hash를 확인한다.
 * Keep all eight map/standalone copies byte-identical. Editing only one copy creates adapter-specific UI drift, so synchronize every chat.css and verify hashes after changes.
 */

#kwc-root {
  position: fixed;
  right: 8px;
  bottom: 8px;
  width: 340px;
  max-width: calc(100vw - 16px);
  height: 430px;
  max-height: calc(100vh - 16px);
  z-index: 1000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f4f4;
}

#kwc-root.kwc-minimized {
  height: auto;
}

.kwc-panel {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(18, 18, 22, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.kwc-header {
  display: flex;
  cursor: move;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  user-select: none;
}

.kwc-title {
  font-size: 14px;
  font-weight: 700;
}

.kwc-status {
  font-size: 11px;
  opacity: 0.75;
  margin-left: 6px;
}

.kwc-actions {
  display: flex;
  gap: 5px;
}

.kwc-button {
  border: 0;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
  color: #fff;
  background: rgba(255,255,255,0.13);
  cursor: pointer;
}

.kwc-button:hover {
  background: rgba(255,255,255,0.22);
}

.kwc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  font-size: 13px;
  line-height: 1.35;
  overflow-anchor: none;
}

.kwc-msg {
  margin-bottom: 8px;
  word-break: break-word;
  overflow-anchor: none;
}

.kwc-meta {
  font-size: 11px;
  opacity: 0.72;
  margin-bottom: 2px;
}

.kwc-sender {
  font-weight: 700;
}

.kwc-role-ADMIN .kwc-sender {
  color: #ffcf5a;
}

.kwc-role-MODERATOR .kwc-sender {
  color: #74c7ff;
}

.kwc-source-guest .kwc-sender {
  color: #b9ff9a;
}

.kwc-text {
  white-space: pre-wrap;
}

.kwc-form {
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.12);
}

.kwc-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.kwc-row:last-child {
  margin-bottom: 0;
}

.kwc-input {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 7px;
  color: #fff;
  background: rgba(0,0,0,0.24);
  outline: none;
  font-size: 12px;
}

.kwc-input:focus {
  border-color: rgba(130,190,255,0.65);
}

/* 5.1.0: chat composers use one-line textarea controls on Android/Chromium.
   Chrome for Android can show password/payment/address Autofill keyboard
   accessories on ordinary HTML input elements even with autocomplete=off.
   Textarea keeps the same value/selection APIs while avoiding that input path. */
.kwc-chat-composer {
  box-sizing: border-box;
  resize: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  line-height: normal !important;
}

.kwc-send {
  min-width: 54px;
}

.kwc-captcha {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.95;
}

.kwc-captcha.kwc-show {
  display: flex;
}

.kwc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kwc-modal {
  width: 340px;
  max-width: calc(100vw - 30px);
  background: #1d1d24;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  padding: 16px;
}

.kwc-modal h3 {
  margin: 0 0 12px;
  font-size: 17px;
}

.kwc-modal p {
  margin: 8px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
}

.kwc-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.kwc-tab {
  flex: 1;
}

.kwc-code {
  font-size: 28px;
  letter-spacing: 3px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0;
  font-weight: 800;
}

.kwc-hidden {
  display: none !important;
}


.kwc-mini-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: baseline;
}

.kwc-mini-action {
  margin-left: 0;
  border: 0;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.25;
  color: #fff;
  background: rgba(255,255,255,0.12);
  cursor: pointer;
}

.kwc-mini-action:hover {
  background: rgba(255,80,80,0.45);
}

.kwc-deleted .kwc-text {
  opacity: 0.55;
  font-style: italic;
}

.kwc-admin-modal {
  width: 560px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kwc-admin-modal-head { flex: 0 0 auto; margin-bottom: 10px; }
.kwc-admin-scroll-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 8px; scrollbar-gutter: stable; }

.kwc-admin-drag-handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.kwc-admin-drag-handle.kwc-dragging { cursor: grabbing; }

.kwc-admin-online-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px 14px;
  max-height: 240px;
}

.kwc-game-modal { width: min(500px, calc(100vw - 30px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.kwc-game-summary { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.07); }
.kwc-game-summary > strong { font-size: 16px; }
.kwc-game-summary > span { font-size: 12px; opacity: .78; }
.kwc-game-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.kwc-game-create-form, .kwc-game-create-form label { display: flex; flex-direction: column; gap: 6px; }
.kwc-game-create-form { gap: 10px; }
/* Event create fields use the native hidden contract for type-specific controls.
 * The generic label/grid display rules above must never force hidden fields visible. */
.kwc-game-create-form [hidden] { display: none !important; }
.kwc-game-number-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kwc-game-participants h4 { margin-bottom: 7px; }
.kwc-game-participant-list { max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 5px 12px; padding: 7px; border-radius: 7px; background: rgba(255,255,255,.045); scrollbar-gutter: stable; }
.kwc-game-participant { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 4px 5px; }
.kwc-game-participant-number { flex: 0 0 auto; min-width: 1.6em; opacity: .65; text-align: right; }
.kwc-game-participant .kwc-sender { min-width: 0; overflow-wrap: anywhere; }
.kwc-game-chat-link { margin-left: 8px; padding: 2px 7px; vertical-align: baseline; }
.kwc-game-winners { display: flex; flex-wrap: wrap; gap: 6px; }
.kwc-game-winners > span { padding: 4px 8px; border-radius: 999px; background: rgba(255,205,64,.18); font-weight: 700; }

.kwc-admin-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  font-size: 13px;
}

.kwc-admin-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  font-size: 13px;
}

.kwc-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.kwc-admin-item:last-child {
  border-bottom: 0;
}

.kwc-admin-setting-item > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kwc-admin-setting-item > .kwc-input {
  width: min(230px, 45%);
}

.kwc-admin-save-row {
  align-items: center;
  margin-top: 8px;
}

.kwc-admin-result {
  min-width: 0;
  overflow-wrap: anywhere;
  opacity: .82;
}

.kwc-filter-settings-list {
  max-height: 300px;
}

.kwc-filter-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.kwc-filter-section-head h4 {
  margin: 0 !important;
}

.kwc-filter-section-head .kwc-row {
  margin: 0;
  align-items: center;
}

.kwc-filter-rule-count {
  opacity: .72;
  font-size: 11px;
  white-space: nowrap;
}

.kwc-filter-rule-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}

.kwc-filter-rule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255,255,255,0.045);
}

.kwc-filter-rule-card-main {
  min-width: 0;
  flex: 1 1 auto;
}

.kwc-filter-rule-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 3px;
}

.kwc-filter-rule-card-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kwc-filter-rule-card-main small {
  display: block;
  opacity: .72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kwc-filter-rule-badge,
.kwc-filter-rule-disabled {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255,255,255,0.10);
}

.kwc-filter-rule-disabled {
  opacity: .7;
}

.kwc-filter-rule-card-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
}

.kwc-filter-empty {
  padding: 10px 6px;
  text-align: center;
  opacity: .7;
}

.kwc-filter-editor-card,
.kwc-filter-test-card {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}

.kwc-filter-editor-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(120px, .8fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 9px;
}

.kwc-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
}

.kwc-filter-editor-top .kwc-filter-field {
  margin-top: 0;
}

.kwc-filter-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 4px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}

.kwc-filter-field textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 82px;
  line-height: 1.4;
}

.kwc-filter-replace-options[hidden] {
  display: none !important;
}

.kwc-filter-replace-options {
  margin-top: 9px;
  padding-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.kwc-filter-mode-field .kwc-input {
  width: min(220px, 100%);
  flex: 0 0 auto;
}

.kwc-filter-editor-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.kwc-filter-editor-actions .kwc-admin-result {
  flex: 1 1 180px;
}

.kwc-filter-test-hint {
  display: block;
  margin-bottom: 8px;
  opacity: .72;
  line-height: 1.35;
}

.kwc-filter-test-row {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.kwc-filter-test-result {
  margin-top: 8px;
  padding: 8px;
  min-height: 34px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  overflow-wrap: anywhere;
  font-size: 11px;
}

.kwc-filter-test-result:empty {
  display: none;
}

.kwc-filter-test-result strong,
.kwc-filter-test-result small,
.kwc-filter-test-result div {
  display: block;
}

.kwc-filter-test-result small {
  margin-top: 3px;
  opacity: .72;
}

.kwc-filter-test-result div {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
  white-space: pre-wrap;
}

@media (max-width: 620px) {
  .kwc-admin-modal .kwc-tabs {
    flex-wrap: wrap;
  }
  .kwc-admin-modal .kwc-tab {
    flex: 1 1 auto;
    white-space: nowrap;
  }
  .kwc-filter-editor-top {
    grid-template-columns: 1fr 1fr;
  }
  .kwc-filter-toggle {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .kwc-admin-setting-item {
    align-items: flex-start;
  }
  .kwc-admin-setting-item > .kwc-input {
    width: 46%;
  }
  .kwc-filter-editor-top,
  .kwc-filter-test-row {
    grid-template-columns: 1fr;
  }
  .kwc-filter-rule-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .kwc-filter-rule-card-actions {
    align-self: flex-end;
  }
}

.kwc-admin-emoji-tools {
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 8px;
}

.kwc-admin-emoji-tools small {
  display: block;
  opacity: 0.75;
  font-size: 11px;
}

.kwc-admin-emoji-upload-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.kwc-admin-emoji-tools .kwc-input,
.kwc-admin-emoji-tools .kwc-button {
  min-height: 32px;
  box-sizing: border-box;
}

.kwc-admin-emoji-tools .kwc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.kwc-admin-emoji-tools input[type="file"].kwc-input {
  padding-top: 5px;
  padding-bottom: 5px;
}

.kwc-admin-emoji-file-name {
  margin: 0 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kwc-admin-emoji-upload-stage {
  margin: 6px 0;
}

.kwc-admin-emoji-upload-stage-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.kwc-admin-emoji-upload-stage .kwc-upload-progress-head > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kwc-admin-emoji-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  align-content: start;
  max-height: min(360px, 45vh);
  overflow-y: auto;
  padding-right: 2px;
}

.kwc-admin-emoji-item {
  display: grid;
  grid-template-columns: auto 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}

.kwc-admin-emoji-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.kwc-admin-emoji-item-label {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 32px;
  text-align: left;
}

.kwc-admin-emoji-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.kwc-admin-emoji-empty {
  grid-column: 1 / -1;
  text-align: center;
  white-space: nowrap;
  line-height: 1.25;
  opacity: 0.72;
  font-size: 12px;
  padding: 8px;
}

#kwc-root.kwc-theme-light .kwc-admin-emoji-tools,
#kwc-root.kwc-theme-system .kwc-admin-emoji-tools,
#kwc-root.kwc-theme-light .kwc-admin-emoji-item,
#kwc-root.kwc-theme-system .kwc-admin-emoji-item {
  background: rgba(15,23,42,0.045);
}

.kwc-modal h4 {
  margin: 12px 0 6px;
}


/* Account modal: keep the legacy single-row account actions while still allowing
   detached modal theme variables to style the surface. */
.kwc-account-modal {
  width: min(460px, calc(100vw - 30px)) !important;
  max-width: calc(100vw - 30px) !important;
}
.kwc-account-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.kwc-account-actions .kwc-button {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .kwc-account-actions {
    flex-wrap: wrap;
  }
}


/* minimized header should only show title + restore button.
   Account/Admin/Login buttons open clipped modals in minimized iframe, so hide them. */
#kwc-root.kwc-minimized .kwc-status,
#kwc-root.kwc-minimized #kwc-admin,
#kwc-root.kwc-minimized #kwc-dm,
#kwc-root.kwc-minimized #kwc-login {
  display: none !important;
}

#kwc-root.kwc-minimized {
  width: 340px;
  height: 48px !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  height: 48px !important;
  overflow: hidden;
}

#kwc-root.kwc-minimized .kwc-header {
  height: 48px;
  box-sizing: border-box;
  border-bottom: 0;
}

#kwc-root.kwc-minimized .kwc-actions {
  margin-left: auto;
}

#kwc-root.kwc-minimized #kwc-min {
  display: inline-block !important;
}


/* compact minimized width */
#kwc-root.kwc-minimized {
  width: 220px !important;
  max-width: 220px !important;
  height: 48px !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  width: 220px !important;
  height: 48px !important;
}

#kwc-root.kwc-minimized .kwc-title {
  white-space: nowrap;
}


/* polished compact minimized pill */
.kwc-header {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#kwc-root.kwc-minimized {
  width: 148px !important;
  max-width: 148px !important;
  height: 46px !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  width: 148px !important;
  height: 46px !important;
  border-radius: 14px;
}

#kwc-root.kwc-minimized .kwc-header {
  height: 46px !important;
  padding: 8px 10px;
  border-bottom: 0;
}

#kwc-root.kwc-minimized .kwc-title {
  font-size: 14px;
  white-space: nowrap;
}

#kwc-root.kwc-minimized #kwc-min {
  min-width: 34px;
  padding: 5px 9px;
}


/* prettier minimized pill */
#kwc-root.kwc-minimized {
  width: 116px !important;
  max-width: 116px !important;
  height: 44px !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  width: 116px !important;
  height: 44px !important;
  border-radius: 16px !important;
  overflow: hidden;
}

#kwc-root.kwc-minimized .kwc-header {
  height: 44px !important;
  padding: 6px 8px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 0;
}

#kwc-root.kwc-minimized .kwc-header > div:first-child {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

#kwc-root.kwc-minimized .kwc-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
}

#kwc-root.kwc-minimized .kwc-actions {
  display: flex;
  align-items: center;
  gap: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 auto;
}

#kwc-root.kwc-minimized #kwc-min {
  min-width: 30px;
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 10px;
  line-height: 1;
  font-size: 18px;
}


/* fix clipped left corners in minimized mode.
   The full window keeps its normal inner 8px margin, but the minimized pill
   must sit at the iframe edge; otherwise the iframe clips the left radius. */
#kwc-root.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 48px !important;
  overflow: visible !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  width: 124px !important;
  height: 48px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#kwc-root.kwc-minimized .kwc-header {
  height: 48px !important;
  padding: 7px 8px 7px 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  border-bottom: 0 !important;
}

#kwc-root.kwc-minimized .kwc-header > div:first-child {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#kwc-root.kwc-minimized .kwc-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#kwc-root.kwc-minimized .kwc-actions {
  margin-left: 4px !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
}

#kwc-root.kwc-minimized #kwc-min {
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}


/* prevent the minimized + button glyph from being clipped */
#kwc-root.kwc-minimized #kwc-min {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

#kwc-root.kwc-minimized .kwc-actions {
  align-items: center !important;
}


/* fix bottom clipping in minimized pill.
   Previous minimized height matched content height too tightly; panel border/radius
   could be clipped by the iframe and the glyph looked top-heavy. */
#kwc-root.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 54px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  width: 124px !important;
  height: 48px !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#kwc-root.kwc-minimized .kwc-header {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 8px 0 11px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  border-bottom: 0 !important;
}

#kwc-root.kwc-minimized .kwc-header > div:first-child {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1 !important;
}

#kwc-root.kwc-minimized .kwc-title {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#kwc-root.kwc-minimized .kwc-actions {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin-left: 4px !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
}

#kwc-root.kwc-minimized #kwc-min {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  overflow: visible !important;
}


/* visual vertical-balance fix for minimized pill.
   The pill had enough outer height, but font glyphs were visually sitting too low.
   Move the title and restore button content upward instead of just increasing iframe height. */
#kwc-root.kwc-minimized .kwc-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#kwc-root.kwc-minimized .kwc-title {
  position: relative !important;
}

#kwc-root.kwc-minimized #kwc-min {
  position: relative !important;
}

#kwc-root.kwc-minimized .kwc-actions {
  align-items: center !important;
}


/* bottom clipping fix without forcing text/button upward.
   The actual pill is lifted inside a taller iframe, so the bottom radius has real room.
   This replaces the previous top:-7px visual shift. */
#kwc-root.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 62px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  width: 124px !important;
  height: 48px !important;
  margin-top: 7px !important;
  margin-bottom: 7px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#kwc-root.kwc-minimized .kwc-header {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 8px 0 11px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  border-bottom: 0 !important;
}

#kwc-root.kwc-minimized .kwc-header > div:first-child {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 1 !important;
}

#kwc-root.kwc-minimized .kwc-title {
  position: static !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

#kwc-root.kwc-minimized .kwc-actions {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin-left: 4px !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
}

#kwc-root.kwc-minimized #kwc-min {
  position: static !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  overflow: visible !important;
}


/* add exactly 6px more bottom slack to minimized mode.
   previous still clipped the lower radius on some browsers/device DPRs.
   Keep the pill itself 48px, but make the iframe/root 68px and place
   13px transparent slack below the pill. */
#kwc-root.kwc-minimized {
  height: 68px !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  height: 48px !important;
  margin-top: 7px !important;
  margin-bottom: 13px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#kwc-root.kwc-minimized .kwc-header {
  height: 46px !important;
  min-height: 46px !important;
}

#kwc-root.kwc-minimized .kwc-title,
#kwc-root.kwc-minimized #kwc-min {
  position: static !important;
  top: auto !important;
  transform: none !important;
}


/* add 3px more bottom slack compared with previous.
   previous: iframe/root 68px, bottom slack 13px.
   previous: iframe/root 71px, bottom slack 16px. */
#kwc-root.kwc-minimized {
  height: 71px !important;
}

#kwc-root.kwc-minimized .kwc-panel {
  height: 48px !important;
  margin-top: 7px !important;
  margin-bottom: 16px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#kwc-root.kwc-minimized .kwc-title,
#kwc-root.kwc-minimized #kwc-min {
  position: static !important;
  top: auto !important;
  transform: none !important;
}


/* login-only mode when guest chat is disabled */
#kwc-root.kwc-guest-hidden .kwc-messages,
#kwc-root.kwc-guest-hidden .kwc-form {
  display: none !important;
}

#kwc-root.kwc-guest-hidden .kwc-panel {
  height: 72px !important;
}

#kwc-root.kwc-guest-hidden .kwc-header {
  height: 72px !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden .kwc-status {
  display: none !important;
}

#kwc-root.kwc-guest-hidden #kwc-login {
  display: inline-block !important;
}


/* fix guest-hidden login-only with minimized state.
   The previous guest-hidden rule re-showed Login even while minimized.
   Minimized should show only Chat + restore button. */
#kwc-root.kwc-minimized #kwc-login,
#kwc-root.kwc-minimized #kwc-admin,
#kwc-root.kwc-minimized #kwc-dm,
#kwc-root.kwc-minimized .kwc-status {
  display: none !important;
}

/* Login is visible only when guest-hidden and NOT minimized. */
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-login {
  display: inline-block !important;
}

/* Login modal needs the full iframe height; JS expands the iframe when it opens. */
#kwc-root.kwc-guest-hidden .kwc-modal-backdrop {
  display: flex !important;
}


/* guest-hidden minimized should be identical to normal minimized.
   Previous guest-hidden panel/header 72px rules overrode minimized mode. */
#kwc-root.kwc-guest-hidden.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 71px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel {
  width: 124px !important;
  height: 48px !important;
  margin-top: 7px !important;
  margin-bottom: 16px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 8px 0 11px !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-login,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-admin,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-dm,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status {
  display: none !important;
}

/* guest-hidden expanded login-only view gets real bottom slack
   so pressing + from minimized does not show a squared/clipped lower edge. */
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) {
  right: 0 !important;
  bottom: 0 !important;
  width: 372px !important;
  max-width: 372px !important;
  height: 92px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-panel {
  width: 356px !important;
  height: 72px !important;
  margin: 8px 8px 12px 8px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-header {
  height: 70px !important;
  min-height: 70px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 0 !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-messages,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-form {
  display: none !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-login {
  display: inline-block !important;
}


/* guest-hidden expanded login-only bottom slack +3px.
   previous used 92px root height and 12px bottom margin.
   previous uses 95px root height and 15px bottom margin. */
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) {
  height: 95px !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-panel {
  height: 72px !important;
  margin: 8px 8px 15px 8px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-header {
  height: 70px !important;
  min-height: 70px !important;
}


/* guest-hidden expanded window uses the same size as logged-in expanded window.
   This prevents size/state breakage after login -> logout.
   Only the chat content/input are hidden for unauthenticated visitors. */
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) {
  right: 8px !important;
  bottom: 8px !important;
  width: 340px !important;
  max-width: calc(100vw - 16px) !important;
  height: 430px !important;
  max-height: calc(100vh - 16px) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-panel {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-header {
  height: auto !important;
  min-height: unset !important;
  padding: 9px 10px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-messages,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-form {
  display: none !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-login {
  display: inline-block !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-status {
  display: none !important;
}

/* Keep minimized guest-hidden identical to normal minimized mode. */
#kwc-root.kwc-guest-hidden.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 71px !important;
}


/* mobile landscape / short viewport support */
@media (max-height: 430px) {
  #kwc-root:not(.kwc-minimized) {
    right: 8px !important;
    bottom: 8px !important;
    height: calc(100vh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }

  #kwc-root:not(.kwc-minimized) .kwc-panel {
    height: 100% !important;
    min-height: 0 !important;
  }

  #kwc-root:not(.kwc-minimized) .kwc-header {
    flex: 0 0 auto;
  }

  #kwc-root:not(.kwc-minimized) .kwc-messages {
    flex: 1 1 auto !important;
    min-height: 48px !important;
    overflow-y: auto !important;
  }

  #kwc-root:not(.kwc-minimized) .kwc-form {
    flex: 0 0 auto;
  }
}


/* compact role/status badge.
   Long roles such as MODERATOR must not push the header/actions to a new line. */
.kwc-header {
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.kwc-header > div:first-child {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.kwc-title {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kwc-status {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: 54px !important;
  height: 18px !important;
  padding: 0 4px !important;
  margin-left: 5px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.10) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
}

.kwc-actions {
  flex: 0 0 auto !important;
  align-items: center !important;
  white-space: nowrap !important;
}


/* clickable URL styling */
.kwc-link {
  color: #8ecbff;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.kwc-link:hover {
  color: #b8ddff;
}


/* web-only image URL preview */
.kwc-image-previews {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.kwc-image-link {
  display: inline-block;
  max-width: 100%;
  width: fit-content;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

.kwc-image-preview {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.kwc-image-preview:not([src]),
.kwc-image-preview[src=""] {
  display: none;
}

.kwc-image-link.kwc-media-failed {
  width: min(100%, 360px);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.kwc-image-error {
  min-width: 180px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* file upload UI and video previews */
.kwc-file-input {
  display: none !important;
}

.kwc-upload {
  flex: 0 0 auto;
  min-width: 34px;
  padding-left: 7px;
  padding-right: 7px;
}

.kwc-video-preview {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: #000;
}

.kwc-video-link {
  width: 100%;
}


/* user-resizable chat window */
#kwc-root:not(.kwc-minimized) {
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px) !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) {
  width: calc(100vw - 16px) !important;
  height: calc(100vh - 16px) !important;
  max-width: none !important;
  max-height: none !important;
}

.kwc-resize-handle {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  z-index: 4;
  cursor: nwse-resize;
  touch-action: none;
}

#kwc-root.kwc-resizable:not(.kwc-minimized) .kwc-resize-handle {
  display: block;
}

#kwc-root.kwc-resizable:not(.kwc-minimized) .kwc-resize-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255,255,255,0.55);
  border-bottom: 2px solid rgba(255,255,255,0.55);
  border-radius: 1px;
}

@media (pointer: coarse) {
  .kwc-resize-handle {
    width: 26px;
    height: 26px;
  }

  #kwc-root.kwc-resizable:not(.kwc-minimized) .kwc-resize-handle::after {
    right: 5px;
    bottom: 5px;
    width: 12px;
    height: 12px;
  }
}

/* user-resizable chat window, safe internal sizing.
   Parent iframe owns the actual pixel size; iframe content only fills it. */
#kwc-root:not(.kwc-minimized) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-guest-hidden:not(.kwc-minimized) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: visible !important;
}

#kwc-root:not(.kwc-minimized) .kwc-panel {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.kwc-resize-handle {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  z-index: 4;
  cursor: nwse-resize;
  touch-action: none;
}

#kwc-root.kwc-resizable:not(.kwc-minimized) .kwc-resize-handle {
  display: block;
}

#kwc-root.kwc-resizable:not(.kwc-minimized) .kwc-resize-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255,255,255,0.55);
  border-bottom: 2px solid rgba(255,255,255,0.55);
  border-radius: 1px;
}

@media (pointer: coarse) {
  .kwc-resize-handle {
    width: 26px;
    height: 26px;
  }

  #kwc-root.kwc-resizable:not(.kwc-minimized) .kwc-resize-handle::after {
    right: 5px;
    bottom: 5px;
    width: 12px;
    height: 12px;
  }
}


/* make inner resize handle easier to hit; parent page also has a resize handle. */
.kwc-resize-handle {
  width: 28px !important;
  height: 28px !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}


/* inner handle starts resize; parent page captures movement after start. */
.kwc-resize-handle {
  width: 36px !important;
  height: 36px !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  cursor: nwse-resize !important;
  touch-action: none !important;
}


/* resize handles moved to left top and left bottom on parent page.
   Hide the old inner bottom-right handle so it does not block Send. */
#kwc-resize-handle,
.kwc-resize-handle {
  display: none !important;
  pointer-events: none !important;
}


/* audio preview and range-friendly media controls */
.kwc-audio-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  max-width: 100%;
}

.kwc-audio-preview {
  width: min(100%, 320px);
  max-width: 100%;
}

.kwc-audio-open {
  font-size: 11px;
  color: #9fd0ff;
  text-decoration: none;
  white-space: nowrap;
}


/* all four corners resize, invisible hit areas outside the chat edges. */
.kwc-parent-resize-handle {
  background: transparent !important;
}

#kwc-resize-handle,
.kwc-resize-handle {
  display: none !important;
  pointer-events: none !important;
}


/* configurable font sizes */
#kwc-root {
  font-size: var(--kwc-font-size, 13px) !important;
}

#kwc-root .kwc-message,
#kwc-root .kwc-text,
#kwc-root .kwc-meta,
#kwc-root .kwc-status,
#kwc-root .kwc-pinned-open,
#kwc-root .kwc-pinned-open span,
#kwc-root .kwc-pinned-item {
  font-size: var(--kwc-message-font-size, 13px) !important;
}

#kwc-root .kwc-input {
  font-size: var(--kwc-input-font-size, 13px) !important;
}

#kwc-root .kwc-button {
  font-size: var(--kwc-button-font-size, 12px) !important;
}

#kwc-root .kwc-role,
#kwc-root .kwc-badge {
  font-size: var(--kwc-badge-font-size, 10px) !important;
}

#kwc-root .kwc-history-end {
  font-family: inherit !important;
  font-size: max(10.5px, calc(var(--kwc-message-font-size, 13px) * 0.82)) !important;
  box-sizing: border-box !important;
  min-width: min(268px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#kwc-root .kwc-jump-latest {
  font-family: inherit !important;
  font-size: var(--kwc-button-font-size, 12px) !important;
}

/* All outer edges and corners are transparent resize hit areas. */
.kwc-parent-resize-handle {
  background: transparent !important;
}

/* Keep the old inner bottom-right resize handle hidden so Send/minimize are not blocked. */
#kwc-resize-handle,
.kwc-resize-handle {
  display: none !important;
  pointer-events: none !important;
}


/* themes, opacity, and font family */
#kwc-root {
  --kwc-panel-opacity: 0.92;
  --kwc-panel-bg-rgb: 18, 18, 22;
  --kwc-text-color: #ffffff;
  --kwc-muted-color: rgba(255,255,255,0.74);
  --kwc-border-color: rgba(255,255,255,0.14);
  --kwc-header-bg: rgba(255,255,255,0.08);
  --kwc-form-bg: rgba(0,0,0,0.12);
  --kwc-button-bg: rgba(255,255,255,0.13);
  --kwc-button-hover-bg: rgba(255,255,255,0.22);
  --kwc-button-text: #ffffff;
  --kwc-input-bg: rgba(0,0,0,0.24);
  --kwc-link-color: #9fd0ff;
  --kwc-modal-bg-rgb: 29, 29, 36;
  --kwc-shadow-color: rgba(0,0,0,0.35);
  --kwc-text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  --kwc-ui-text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

#kwc-root.kwc-theme-dark,
#kwc-root.kwc-theme-system {
  --kwc-panel-bg-rgb: 18, 18, 22;
  --kwc-text-color: #ffffff;
  --kwc-muted-color: rgba(255,255,255,0.74);
  --kwc-border-color: rgba(255,255,255,0.14);
  --kwc-header-bg: rgba(255,255,255,0.08);
  --kwc-form-bg: rgba(0,0,0,0.12);
  --kwc-button-bg: rgba(255,255,255,0.13);
  --kwc-button-hover-bg: rgba(255,255,255,0.22);
  --kwc-button-text: #ffffff;
  --kwc-input-bg: rgba(0,0,0,0.24);
  --kwc-link-color: #9fd0ff;
  --kwc-modal-bg-rgb: 29, 29, 36;
  --kwc-shadow-color: rgba(0,0,0,0.35);
}

#kwc-root.kwc-theme-light {
  --kwc-panel-bg-rgb: 255, 255, 255;
  --kwc-text-color: #0f172a;
  --kwc-muted-color: rgba(51,65,85,0.86);
  --kwc-border-color: rgba(71,85,105,0.42);
  --kwc-header-bg: rgba(var(--kwc-panel-bg-rgb), 0.88);
  --kwc-form-bg: rgba(var(--kwc-panel-bg-rgb), 0.90);
  --kwc-button-bg: rgba(226,232,240,0.98);
  --kwc-button-hover-bg: rgba(203,213,225,1.0);
  --kwc-button-text: #0f172a;
  --kwc-input-bg: rgba(255,255,255,0.96);
  --kwc-link-color: #0b5cad;
  --kwc-modal-bg-rgb: 255, 255, 255;
  --kwc-shadow-color: rgba(15,23,42,0.24);
}

#kwc-root.kwc-theme-high-contrast {
  --kwc-panel-bg-rgb: 0, 0, 0;
  --kwc-text-color: #ffffff;
  --kwc-muted-color: #ffffff;
  --kwc-border-color: #ffffff;
  --kwc-header-bg: #000000;
  --kwc-form-bg: #000000;
  --kwc-button-bg: #000000;
  --kwc-button-hover-bg: #222222;
  --kwc-button-text: #ffffff;
  --kwc-input-bg: #000000;
  --kwc-link-color: #00ffff;
  --kwc-modal-bg-rgb: 0, 0, 0;
  --kwc-shadow-color: rgba(255,255,255,0.30);
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system {
    --kwc-panel-bg-rgb: 255, 255, 255;
    --kwc-text-color: #0f172a;
    --kwc-muted-color: rgba(51,65,85,0.86);
    --kwc-border-color: rgba(71,85,105,0.42);
    --kwc-header-bg: rgba(var(--kwc-panel-bg-rgb), 0.88);
    --kwc-form-bg: rgba(var(--kwc-panel-bg-rgb), 0.90);
    --kwc-button-bg: rgba(226,232,240,0.98);
    --kwc-button-hover-bg: rgba(203,213,225,1.0);
    --kwc-button-text: #0f172a;
    --kwc-input-bg: rgba(255,255,255,0.96);
    --kwc-link-color: #0b5cad;
    --kwc-modal-bg-rgb: 255, 255, 255;
    --kwc-shadow-color: rgba(15,23,42,0.24);
  }
}

#kwc-root .kwc-panel {
  background: rgba(var(--kwc-panel-bg-rgb), var(--kwc-panel-opacity)) !important;
  color: var(--kwc-text-color) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: 0 8px 30px var(--kwc-shadow-color) !important;
}

#kwc-root .kwc-header {
  background: var(--kwc-header-bg) !important;
  border-bottom-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-form {
  background: var(--kwc-form-bg) !important;
  border-top-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-button {
  color: var(--kwc-button-text) !important;
  background: var(--kwc-button-bg) !important;
  border: 1px solid var(--kwc-border-color) !important;
}

#kwc-root .kwc-button:hover {
  background: var(--kwc-button-hover-bg) !important;
}

#kwc-root .kwc-input {
  color: var(--kwc-text-color) !important;
  background: var(--kwc-input-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-input::placeholder {
  color: var(--kwc-muted-color) !important;
}

#kwc-root .kwc-message,
#kwc-root .kwc-system,
#kwc-root .kwc-body,
#kwc-root .kwc-text,
#kwc-root .kwc-sender,
#kwc-root .kwc-meta,
#kwc-root .kwc-time,
#kwc-root .kwc-source-label,
#kwc-root .kwc-source-badge,
#kwc-root .kwc-role-badge,
#kwc-root .kwc-status,
#kwc-root .kwc-button,
#kwc-root .kwc-input,
#kwc-root .kwc-input::placeholder,
#kwc-root .kwc-upload,
#kwc-root .kwc-command,
#kwc-root .kwc-mini-action,
#kwc-root .kwc-pinned-open,
#kwc-root .kwc-pinned-item,
#kwc-root .kwc-history-end,
#kwc-root .kwc-jump-latest,
#kwc-root .kwc-pref-label,
#kwc-root .kwc-pref-hints,
#kwc-root .kwc-pref-font-help,
#kwc-root .kwc-pref-font-status {
  text-shadow: var(--kwc-text-shadow, none);
}

#kwc-root .kwc-meta,
#kwc-root .kwc-time,
#kwc-root .kwc-source-label,
#kwc-root .kwc-source-badge,
#kwc-root .kwc-role-badge,
#kwc-root .kwc-status,
#kwc-root .kwc-button,
#kwc-root .kwc-input,
#kwc-root .kwc-input::placeholder,
#kwc-root .kwc-upload,
#kwc-root .kwc-command,
#kwc-root .kwc-mini-action,
#kwc-root .kwc-pinned-open,
#kwc-root .kwc-pinned-item,
#kwc-root .kwc-history-end,
#kwc-root .kwc-jump-latest,
#kwc-root .kwc-pref-label,
#kwc-root .kwc-pref-hints,
#kwc-root .kwc-pref-font-help,
#kwc-root .kwc-pref-font-status {
  text-shadow: var(--kwc-ui-text-shadow, var(--kwc-text-shadow, none));
}

#kwc-root.kwc-text-shadow-none .kwc-message,
#kwc-root.kwc-text-shadow-none .kwc-system,
#kwc-root.kwc-text-shadow-none .kwc-body,
#kwc-root.kwc-text-shadow-none .kwc-text,
#kwc-root.kwc-text-shadow-none .kwc-sender,
#kwc-root.kwc-text-shadow-none .kwc-meta,
#kwc-root.kwc-text-shadow-none .kwc-time,
#kwc-root.kwc-text-shadow-none .kwc-source-label,
#kwc-root.kwc-text-shadow-none .kwc-source-badge,
#kwc-root.kwc-text-shadow-none .kwc-role-badge,
#kwc-root.kwc-text-shadow-none .kwc-status,
#kwc-root.kwc-text-shadow-none .kwc-button,
#kwc-root.kwc-text-shadow-none .kwc-input,
#kwc-root.kwc-text-shadow-none .kwc-input::placeholder,
#kwc-root.kwc-text-shadow-none .kwc-upload,
#kwc-root.kwc-text-shadow-none .kwc-command,
#kwc-root.kwc-text-shadow-none .kwc-mini-action,
#kwc-root.kwc-text-shadow-none .kwc-pinned-open,
#kwc-root.kwc-text-shadow-none .kwc-pinned-item,
#kwc-root.kwc-text-shadow-none .kwc-history-end,
#kwc-root.kwc-text-shadow-none .kwc-jump-latest,
#kwc-root.kwc-text-shadow-none .kwc-pref-label,
#kwc-root.kwc-text-shadow-none .kwc-pref-hints,
#kwc-root.kwc-text-shadow-none .kwc-pref-font-help,
#kwc-root.kwc-text-shadow-none .kwc-pref-font-status {
  text-shadow: none;
}

#kwc-root .kwc-status,
#kwc-root .kwc-meta,
#kwc-root .kwc-modal p {
  color: var(--kwc-muted-color) !important;
}

#kwc-root a,
#kwc-root .kwc-audio-open {
  color: var(--kwc-link-color) !important;
}

#kwc-root .kwc-modal {
  background: rgba(var(--kwc-modal-bg-rgb), var(--kwc-panel-opacity)) !important;
  color: var(--kwc-text-color) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-code {
  color: var(--kwc-text-color) !important;
}

#kwc-root.kwc-theme-high-contrast .kwc-panel,
#kwc-root.kwc-theme-high-contrast .kwc-modal,
#kwc-root.kwc-theme-high-contrast .kwc-input,
#kwc-root.kwc-theme-high-contrast .kwc-button {
  border-width: 2px !important;
}


/* user-side opacity control */
#kwc-root .kwc-actions {
  align-items: center;
}

#kwc-root #kwc-opacity {
  min-width: 28px;
  padding-left: 7px;
  padding-right: 7px;
}

.kwc-opacity-modal {
  width: 320px;
}

.kwc-opacity-value,
.kwc-opacity-hints {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
  color: var(--kwc-muted-color, rgba(255,255,255,0.74));
  font-size: 12px;
}

.kwc-opacity-value strong {
  color: var(--kwc-text-color, #fff);
}

.kwc-opacity-range {
  width: 100%;
  accent-color: var(--kwc-link-color, #9fd0ff);
}

.kwc-opacity-note {
  margin: 8px 0 0;
  font-size: 11px;
}


/* logged-in username opens local user preferences */
.kwc-user-prefs-modal {
  width: 340px;
}

.kwc-pref-label,
.kwc-pref-hints {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  color: var(--kwc-muted-color, rgba(255,255,255,0.74));
  font-size: 12px;
}

.kwc-pref-label strong {
  color: var(--kwc-text-color, #fff);
}

.kwc-pref-range {
  width: 100%;
  accent-color: var(--kwc-link-color, #9fd0ff);
}

.kwc-pref-select {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.kwc-shadow-custom-panel {
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 10px;
  background: rgba(0,0,0,0.10);
}

.kwc-shadow-preview {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--kwc-text-color, #fff);
  font-family: inherit;
  font-size: var(--kwc-message-font-size, 13px);
  text-align: center;
}

.kwc-pref-note {
  margin: 8px 0 0;
  font-size: 11px;
}


/* restore compact minimized pill with no top blank area.
   Parent iframe now uses 48px height in minimized mode; keep inner root/panel exactly 48px. */
#kwc-root.kwc-minimized,
#kwc-root.kwc-guest-hidden.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 48px !important;
  max-height: 48px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-panel,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel {
  width: 124px !important;
  height: 48px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  height: 48px !important;
  min-height: 48px !important;
  padding: 7px 8px 7px 11px !important;
  border-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-status,
#kwc-root.kwc-minimized #kwc-admin,
#kwc-root.kwc-minimized #kwc-login,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-admin,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-login {
  display: none !important;
}

#kwc-root.kwc-minimized .kwc-title,
#kwc-root.kwc-minimized #kwc-min {
  position: static !important;
  top: auto !important;
  transform: none !important;
}


/* minimized rounded-corner repair.
   The parent iframe now clips with border-radius; inner panel also stays a true 124x48 pill. */
#kwc-root.kwc-minimized,
#kwc-root.kwc-guest-hidden.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 48px !important;
  max-height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-panel,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel {
  width: 124px !important;
  max-width: 124px !important;
  height: 48px !important;
  max-height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  width: 124px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 7px 8px 7px 11px !important;
  margin: 0 !important;
  border-bottom: 0 !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

#kwc-root #kwc-login {
  cursor: pointer;
  pointer-events: auto !important;
}


/* restore stable pre-preferences minimized pill.
   The outer iframe remains transparent with 71px height for bottom radius slack.
   The visible pill is the 124x48 panel lifted by margin-top, as in the old working layout. */
#kwc-root.kwc-minimized,
#kwc-root.kwc-guest-hidden.kwc-minimized {
  right: 0 !important;
  bottom: 0 !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 71px !important;
  max-height: 71px !important;
  overflow: visible !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-panel,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel {
  width: 124px !important;
  max-width: 124px !important;
  height: 48px !important;
  max-height: 48px !important;
  margin-top: 7px !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  width: 124px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 8px 0 11px !important;
  margin: 0 !important;
  border-bottom: 0 !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-minimized .kwc-status,
#kwc-root.kwc-minimized #kwc-admin,
#kwc-root.kwc-minimized #kwc-login,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-admin,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-login {
  display: none !important;
}

#kwc-root.kwc-minimized .kwc-title,
#kwc-root.kwc-minimized #kwc-min {
  position: static !important;
  top: auto !important;
  transform: none !important;
}


/* account modal settings button opens a real modal backdrop.
   Also make sure no leftover modal can leak into minimized pill. */
#kwc-root.kwc-minimized ~ .kwc-modal-backdrop,
#kwc-root.kwc-minimized ~ .kwc-modal-wrap {
  display: none !important;
}

.kwc-user-prefs-modal {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}


/* draggable user preferences modal */
.kwc-user-prefs-backdrop {
  background: rgba(0,0,0,0.12) !important;
  align-items: center;
  justify-content: center;
}

.kwc-user-prefs-backdrop.kwc-modal-dragging-ready {
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.kwc-modal-drag-handle {
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.kwc-draggable-modal {
  will-change: left, top;
}

.kwc-user-prefs-modal {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}


/* keep the header role/status badge independent from chat message font size.
   Message text can grow/shrink, but the role badge should stay compact. */
#kwc-root .kwc-status {
  font-size: 9px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* normalize header action button heights.
   Admin, user/login, and minimize buttons now share the same vertical size. */
#kwc-root:not(.kwc-minimized) .kwc-actions {
  align-items: center !important;
}

#kwc-root:not(.kwc-minimized) .kwc-actions .kwc-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

#kwc-root:not(.kwc-minimized) #kwc-admin,
#kwc-root:not(.kwc-minimized) #kwc-login {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#kwc-root:not(.kwc-minimized) #kwc-min {
  width: 30px !important;
  min-width: 30px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 16px !important;
}


/* virtualized chat list spacers. Keep total scroll height while only nearby messages are rendered. */
.kwc-virtual-spacer {
  flex: 0 0 auto;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
  overflow-anchor: none;
}

/* upload progress and compact click-to-load media cards. */
.kwc-upload-progress {
  margin-top: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
}

.kwc-upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.82);
}

.kwc-upload-cancel {
  flex: 0 0 auto;
  padding: 3px 7px;
  font-size: 11px;
}

.kwc-upload-progress-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
}

#kwc-upload-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: rgba(130,190,255,0.9);
  transition: width 120ms linear;
}

/* drag-and-drop upload overlay inside the chat panel. */
.kwc-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.46);
  border: 2px dashed rgba(130,190,255,0.82);
  border-radius: 12px;
  pointer-events: none;
  overflow-anchor: none;
}

.kwc-drop-box {
  max-width: 88%;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
  background: rgba(20, 24, 32, 0.94);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 32px rgba(0,0,0,0.35);
}

.kwc-drop-title {
  font-size: 15px;
  font-weight: 800;
}

.kwc-drop-subtitle {
  margin-top: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.76);
}

#kwc-root.kwc-minimized .kwc-drop-overlay,
#kwc-root.kwc-guest-hidden .kwc-drop-overlay {
  display: none !important;
}

/* compact media cards without external "open" shortcut. */
.kwc-media-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.kwc-media-load {
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  color: #fff;
  background: rgba(255,255,255,0.14);
  cursor: pointer;
  font: inherit;
}

.kwc-media-load:hover {
  background: rgba(255,255,255,0.22);
}

.kwc-media-error {
  display: inline-block;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
}

/* Pinned messages */
.kwc-pinned-bar {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255, 207, 90, 0.10);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.kwc-pinned-open {
  flex: 1 1 auto;
  width: auto;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  color: #fff;
  background: rgba(255,255,255,0.10);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: inherit;
  font-size: var(--kwc-message-font-size, 13px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.kwc-pinned-open > * {
  pointer-events: none;
  overflow-anchor: none;
}

.kwc-pinned-open:hover {
  background: rgba(255,255,255,0.18);
}

.kwc-pinned-open > #kwc-pinned-label,
.kwc-pinned-open > #kwc-group-pinned-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.kwc-pinned-summary-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kwc-pinned-summary-rest {
  flex: 0 0 auto;
  margin-left: 0.35em;
  white-space: nowrap;
}

.kwc-minimized .kwc-pinned-bar {
  display: none !important;
}

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

.kwc-modal-head h3 {
  margin: 0;
}

.kwc-pinned-modal {
  width: min(560px, calc(100vw - 30px));
  max-height: min(78vh, 620px);
  display: flex;
  flex-direction: column;
}

.kwc-pinned-list {
  overflow-y: auto;
  padding-right: 2px;
}

.kwc-pinned-item {
  margin: 0 0 10px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  font-family: inherit;
  font-size: var(--kwc-message-font-size, 13px);
}

.kwc-pinned-item:last-child {
  margin-bottom: 0;
}

.kwc-pinned-detail {
  opacity: 0.75;
}


.kwc-pinned-actions {
  margin-left: 6px;
}

.kwc-pinned-actions .kwc-mini-action[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 420px) {
  .kwc-pinned-bar {
    padding: 4px 6px;
  }
  .kwc-pinned-open {
    justify-content: center;
    text-align: center;
    min-height: 40px;
    padding: 8px 8px;
  }
  .kwc-pinned-modal {
    width: calc(100vw - 18px);
    max-height: 76vh;
    padding: 12px;
  }
}

/* complete theme foreground/surface mapping.
   Earlier theme switching changed the panel background but several newer UI pieces
   still carried hard-coded dark-theme text/surface colors. */
#kwc-root {
  --kwc-surface-bg: rgba(255,255,255,0.07);
  --kwc-surface-strong-bg: rgba(255,255,255,0.10);
  --kwc-surface-hover-bg: rgba(255,255,255,0.18);
  --kwc-progress-bg: rgba(0,0,0,0.35);
  --kwc-drop-backdrop: rgba(0,0,0,0.46);
  --kwc-drop-box-bg: rgba(20,24,32,0.94);
  --kwc-pinned-bg: rgba(255,207,90,0.10);
}

#kwc-root.kwc-theme-light {
  --kwc-surface-bg: rgba(241,245,249,0.96);
  --kwc-surface-strong-bg: rgba(226,232,240,0.98);
  --kwc-surface-hover-bg: rgba(203,213,225,1.0);
  --kwc-progress-bg: rgba(148,163,184,0.34);
  --kwc-drop-backdrop: rgba(248,250,252,0.78);
  --kwc-drop-box-bg: rgba(255,255,255,0.98);
  --kwc-pinned-bg: rgba(245,158,11,0.18);
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system {
    --kwc-surface-bg: rgba(241,245,249,0.96);
    --kwc-surface-strong-bg: rgba(226,232,240,0.98);
    --kwc-surface-hover-bg: rgba(203,213,225,1.0);
    --kwc-progress-bg: rgba(148,163,184,0.34);
    --kwc-drop-backdrop: rgba(248,250,252,0.78);
    --kwc-drop-box-bg: rgba(255,255,255,0.98);
    --kwc-pinned-bg: rgba(245,158,11,0.18);
  }
}

#kwc-root.kwc-theme-high-contrast {
  --kwc-surface-bg: #000000;
  --kwc-surface-strong-bg: #111111;
  --kwc-surface-hover-bg: #222222;
  --kwc-progress-bg: #222222;
  --kwc-drop-backdrop: rgba(0,0,0,0.82);
  --kwc-drop-box-bg: #000000;
  --kwc-pinned-bg: #000000;
}

#kwc-root,
#kwc-root .kwc-text,
#kwc-root .kwc-title,
#kwc-root .kwc-captcha,
#kwc-root .kwc-code,
#kwc-root .kwc-modal h3,
#kwc-root .kwc-modal h4,
#kwc-root .kwc-admin-grid,
#kwc-root .kwc-admin-list,
#kwc-root .kwc-admin-item,
#kwc-root .kwc-upload-progress,
#kwc-root .kwc-drop-box,
#kwc-root .kwc-media-card,
#kwc-root .kwc-pinned-open,
#kwc-root .kwc-pinned-item {
  color: var(--kwc-text-color) !important;
}

#kwc-root .kwc-status,
#kwc-root .kwc-meta,
#kwc-root .kwc-modal p,
#kwc-root .kwc-upload-progress-head,
#kwc-root .kwc-drop-subtitle,
#kwc-root .kwc-media-error,
#kwc-root .kwc-pinned-detail,
#kwc-root .kwc-pref-label,
#kwc-root .kwc-pref-hints,
#kwc-root .kwc-opacity-value,
#kwc-root .kwc-opacity-hints {
  color: var(--kwc-muted-color) !important;
}

#kwc-root .kwc-admin-grid,
#kwc-root .kwc-admin-list,
#kwc-root .kwc-upload-progress,
#kwc-root .kwc-media-card,
#kwc-root .kwc-media-error,
#kwc-root .kwc-pinned-item,
#kwc-root .kwc-pinned-open {
  background: var(--kwc-surface-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-admin-item {
  border-bottom-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-mini-action,
#kwc-root .kwc-media-load {
  color: var(--kwc-button-text) !important;
  background: var(--kwc-button-bg) !important;
  border: 1px solid var(--kwc-border-color) !important;
}

#kwc-root .kwc-mini-action:hover,
#kwc-root .kwc-media-load:hover,
#kwc-root .kwc-pinned-open:hover {
  background: var(--kwc-surface-hover-bg) !important;
}

#kwc-root .kwc-upload-progress-bar {
  background: var(--kwc-progress-bg) !important;
}

#kwc-root .kwc-drop-overlay {
  background: var(--kwc-drop-backdrop) !important;
  border-color: var(--kwc-link-color) !important;
}

#kwc-root .kwc-drop-box {
  background: var(--kwc-drop-box-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-pinned-bar {
  background: var(--kwc-pinned-bg) !important;
  border-bottom-color: var(--kwc-border-color) !important;
}


/* role/user-name contrast for light and system themes. */
#kwc-root {
  --kwc-admin-text: #ffd36a;
  --kwc-admin-bg: rgba(255, 207, 90, 0.16);
  --kwc-admin-border: rgba(255, 207, 90, 0.36);
  --kwc-mod-text: #8fd6ff;
  --kwc-mod-bg: rgba(116, 199, 255, 0.14);
  --kwc-mod-border: rgba(116, 199, 255, 0.34);
  --kwc-user-badge-text: var(--kwc-text-color);
  --kwc-user-badge-bg: var(--kwc-button-bg);
  --kwc-user-badge-border: var(--kwc-border-color);
}

#kwc-root.kwc-theme-light {
  --kwc-admin-text: #704600;
  --kwc-admin-bg: rgba(255, 193, 7, 0.28);
  --kwc-admin-border: rgba(160, 100, 0, 0.34);
  --kwc-mod-text: #004f7a;
  --kwc-mod-bg: rgba(14, 165, 233, 0.18);
  --kwc-mod-border: rgba(0, 95, 135, 0.28);
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system {
    --kwc-admin-text: #704600;
    --kwc-admin-bg: rgba(255, 193, 7, 0.28);
    --kwc-admin-border: rgba(160, 100, 0, 0.34);
    --kwc-mod-text: #004f7a;
    --kwc-mod-bg: rgba(14, 165, 233, 0.18);
    --kwc-mod-border: rgba(0, 95, 135, 0.28);
  }
}

#kwc-root.kwc-theme-high-contrast {
  --kwc-admin-text: #000000;
  --kwc-admin-bg: #ffff00;
  --kwc-admin-border: #ffffff;
  --kwc-mod-text: #000000;
  --kwc-mod-bg: #00ffff;
  --kwc-mod-border: #ffffff;
}

#kwc-root .kwc-role-ADMIN .kwc-sender {
  color: var(--kwc-admin-text) !important;
}

#kwc-root .kwc-role-MODERATOR .kwc-sender {
  color: var(--kwc-mod-text) !important;
}

#kwc-root #kwc-login.kwc-user-role-ADMIN,
#kwc-root #kwc-login.kwc-user-role-MODERATOR {
  color: var(--kwc-button-text) !important;
  background: var(--kwc-button-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-role-ADMIN .kwc-sender,
#kwc-root .kwc-role-MODERATOR .kwc-sender {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
}

#kwc-root #kwc-login.kwc-login-user {
  font-weight: 700;
  border: 1px solid var(--kwc-border-color) !important;
  text-shadow: var(--kwc-ui-text-shadow, var(--kwc-text-shadow, none)) !important;
}

/* interactive pre-approved server command panel */
.kwc-command {
  min-width: 32px;
  font-weight: 800;
}

.kwc-command-panel {
  max-height: 170px;
  overflow-y: auto;
  margin: 0 0 6px 0;
  padding: 6px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 9px;
  background: var(--kwc-surface-bg, rgba(0,0,0,0.18));
}

.kwc-command-inline-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  padding: 6px 8px;
  margin: 0 0 4px 0;
  color: var(--kwc-text-color, #fff);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.kwc-command-inline-item:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.14));
}

.kwc-command-label {
  font-weight: 700;
}

.kwc-command-preview {
  opacity: 0.72;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58%;
}

.kwc-command-modal {
  width: min(620px, calc(100vw - 28px));
  max-width: min(620px, calc(100vw - 28px));
}

.kwc-command-direct-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.kwc-command-direct-box .kwc-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.kwc-command-direct-box .kwc-button {
  flex: 0 0 auto;
  min-width: 64px;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .kwc-command-direct-box {
    gap: 6px;
  }

  .kwc-command-direct-box .kwc-button {
    min-width: 56px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

.kwc-command-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(420px, calc(100vh - 230px));
  overflow-y: auto;
  margin-top: 10px;
}

.kwc-command-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 10px;
  background: var(--kwc-surface-bg, rgba(0,0,0,0.16));
}

.kwc-command-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kwc-command-main small {
  color: var(--kwc-muted-color, rgba(255,255,255,0.68));
}

.kwc-command-main code {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--kwc-text-color, #fff);
  background: rgba(0,0,0,0.20);
}

.kwc-command-empty {
  color: var(--kwc-muted-color, rgba(255,255,255,0.68));
  padding: 8px;
  font-style: italic;
}

@media (max-width: 420px) {
  .kwc-command-preview {
    display: none;
  }
  .kwc-command-item {
    align-items: stretch;
    flex-direction: column;
  }
  .kwc-command-item .kwc-button {
    width: 100%;
  }
}

/* PIP duplicate window keeps only the full chat UI.
   Browser chrome already supplies window close/move, so only in-chat PIP/minimize
   controls are hidden in Document Picture-in-Picture mode. The resize handle stays visible. */
html.kwc-pip-mode,
body.kwc-pip-mode {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#kwc-root.kwc-pip-mode {
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

#kwc-root.kwc-pip-mode .kwc-panel {
  border-radius: 0 !important;
  border: 0 !important;
}

#kwc-root.kwc-pip-mode .kwc-header {
  cursor: default !important;
}

#kwc-root.kwc-pip-mode #kwc-pip,
#kwc-root.kwc-pip-mode #kwc-min {
  display: none !important;
}

#kwc-root.kwc-pip-mode ~ .kwc-user-prefs-backdrop {
  background: rgba(0,0,0,0.35) !important;
}

/* hard guard for disabled PIP button. */
#kwc-pip[hidden],
#kwc-pip[aria-hidden="true"] {
  display: none !important;
}

/* custom nickname identity hint. */
#kwc-root .kwc-sender-has-real {
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 0;
}

#kwc-root .kwc-sender-has-real:focus-visible {
  outline: 2px solid var(--kwc-link-color, rgba(130,190,255,0.85));
  outline-offset: 2px;
  border-radius: 4px;
}

/* direct command max-length hint. */
.kwc-command-limit {
  display: block;
  margin-top: 6px;
  color: var(--kwc-muted-color, rgba(255,255,255,0.68));
  font-size: 11px;
}

/* keep the logged-in user button visually consistent with other header buttons. */
#kwc-root:not(.kwc-minimized) #kwc-login.kwc-login-user {
  border: 1px solid var(--kwc-border-color) !important;
  box-sizing: border-box !important;
}

#kwc-root .kwc-time {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 2px;
  pointer-events: auto !important;
  user-select: none;
}

#kwc-root .kwc-time:hover,
#kwc-root .kwc-time:focus {
  background: rgba(255,255,255,0.10);
  outline: 1px solid rgba(255,255,255,0.18);
}

/* custom installed font input in preferences */
.kwc-pref-inline-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.kwc-pref-inline-row .kwc-input {
  flex: 1 1 auto;
  min-width: 0;
}
.kwc-pref-inline-row .kwc-button {
  flex: 0 0 auto;
}


/* installed font name helper/test in preferences */
.kwc-pref-font-help,
.kwc-pref-font-status {
  margin: 6px 0 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--kwc-muted-color, rgba(255,255,255,0.68));
}
.kwc-pref-font-status[data-state="detected"] {
  color: #9be28f;
}
.kwc-pref-font-status[data-state="notDetected"] {
  color: #ffcc7a;
}
.kwc-pref-font-status[data-state="generic"] {
  color: var(--kwc-link-color, #9fd0ff);
}


/* make color pickers consistent in PIP/standalone preferences */
.kwc-pref-color-input {
  width: 44px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: transparent;
  padding: 1px;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.kwc-pref-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.kwc-pref-color-input::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}
.kwc-pref-color-input::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}

/* User-configurable UI text color. This covers labels and small UI glyphs that
   are not part of the actual chat message body. */
#kwc-root .kwc-status,
#kwc-root .kwc-source-label,
#kwc-root .kwc-time,
#kwc-root .kwc-captcha,
#kwc-root .kwc-command-panel,
#kwc-root .kwc-command-empty,
#kwc-root .kwc-command-desc,
#kwc-root .kwc-upload-progress-head,
#kwc-root .kwc-upload-progress-text,
#kwc-root .kwc-upload,
#kwc-root .kwc-command,
#kwc-root .kwc-mini-action,
#kwc-root .kwc-pinned-open,
#kwc-root .kwc-pinned-open span,
#kwc-root .kwc-pinned-item,
#kwc-root .kwc-drop-box,
#kwc-root .kwc-pref-label,
#kwc-root .kwc-pref-hints,
#kwc-root .kwc-pref-font-help,
#kwc-root .kwc-pref-font-status,
#kwc-root .kwc-opacity-note {
  color: var(--kwc-ui-color, var(--kwc-muted-color)) !important;
}

#kwc-root .kwc-input::placeholder {
  color: var(--kwc-ui-color, var(--kwc-muted-color)) !important;
  opacity: 0.72;
}

#kwc-root .kwc-button.kwc-upload,
#kwc-root .kwc-button.kwc-command,
#kwc-root .kwc-mini-action {
  color: var(--kwc-ui-color, var(--kwc-button-text)) !important;
}

/* oldest-history notice and jump-to-latest affordance */
.kwc-history-end {
  flex: 0 0 auto;
  align-self: center;
  margin: 2px auto 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: inherit;
  font-size: max(10.5px, calc(var(--kwc-message-font-size, 13px) * 0.82));
  line-height: 1.25;
  color: var(--kwc-ui-text-color, rgba(255,255,255,0.72));
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
}

.kwc-jump-latest {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: calc(100% - 28px);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: var(--kwc-ui-text-color, #fff);
  background: rgba(28, 35, 48, 0.92);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--kwc-button-font-size, 12px);
  line-height: 1.2;
  white-space: nowrap;
}

.kwc-jump-latest:hover {
  background: rgba(42, 52, 70, 0.96);
}

.kwc-jump-latest-icon {
  font-size: 13px;
  line-height: 1;
}

#kwc-root.kwc-minimized .kwc-history-end,
#kwc-root.kwc-minimized .kwc-jump-latest,
#kwc-root.kwc-guest-hidden .kwc-history-end,
#kwc-root.kwc-guest-hidden .kwc-jump-latest {
  display: none !important;
}


/* Keep moderation actions next to the timestamp/source label. */
#kwc-root .kwc-mini-actions {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  margin-left: 6px;
  vertical-align: baseline;
  white-space: nowrap;
}

#kwc-root .kwc-mini-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

#kwc-root .kwc-history-end {
  position: relative;
  z-index: 1;
}


/* Stable inline moderation actions next to source/time labels.
   Keep this as normal flow (not right-aligned) so each action clearly belongs
   to the same message, but isolate the row from tiny inline/text-node
   reflow differences during virtual-scroll remounts. */
#kwc-root .kwc-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  column-gap: 4px !important;
  row-gap: 1px !important;
}

#kwc-root .kwc-meta-sep {
  flex: 0 0 auto;
  opacity: 0.82;
  user-select: none;
}

/* Server relay origin badge: intentionally stronger than the normal source label
   so messages from multiple connected servers are distinguishable at a glance. */
#kwc-root .kwc-server-badge,
.kwc-pinned-backdrop .kwc-server-badge {
  display: inline-flex;
  align-items: center;
  max-width: min(180px, 45vw);
  padding: 1px 6px;
  border: 1px solid hsla(var(--kwc-server-hue, 210), 78%, 68%, 0.82);
  border-radius: 999px;
  background: hsla(var(--kwc-server-hue, 210), 76%, 52%, 0.24);
  color: hsl(var(--kwc-server-hue, 210), 92%, 78%) !important;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.96;
}

#kwc-root.kwc-theme-light .kwc-server-badge,
#kwc-root.kwc-theme-system .kwc-server-badge,
.kwc-pinned-backdrop.kwc-theme-light .kwc-server-badge,
.kwc-pinned-backdrop.kwc-theme-system .kwc-server-badge {
  border-color: hsla(var(--kwc-server-hue, 210), 72%, 38%, 0.68);
  background: hsla(var(--kwc-server-hue, 210), 72%, 48%, 0.15);
  color: hsl(var(--kwc-server-hue, 210), 72%, 32%) !important;
}

/* A UUID-backed game/web sender can be opened directly from the
   "server · source" metadata without depending on recipient search. */
#kwc-root .kwc-message-dm-target,
.kwc-pinned-backdrop .kwc-message-dm-target {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}

#kwc-root .kwc-message-dm-target:hover .kwc-source-label,
#kwc-root .kwc-message-dm-target:focus-visible .kwc-source-label,
.kwc-pinned-backdrop .kwc-message-dm-target:hover .kwc-source-label,
.kwc-pinned-backdrop .kwc-message-dm-target:focus-visible .kwc-source-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

#kwc-root .kwc-message-dm-target:hover .kwc-server-badge,
#kwc-root .kwc-message-dm-target:focus-visible .kwc-server-badge,
.kwc-pinned-backdrop .kwc-message-dm-target:hover .kwc-server-badge,
.kwc-pinned-backdrop .kwc-message-dm-target:focus-visible .kwc-server-badge {
  filter: brightness(1.14);
}

#kwc-root .kwc-message-dm-target:focus-visible,
.kwc-pinned-backdrop .kwc-message-dm-target:focus-visible {
  outline: 1px solid rgba(130, 190, 255, 0.78);
  outline-offset: 2px;
}

#kwc-root .kwc-source-label,
#kwc-root .kwc-server-badge,
#kwc-root .kwc-time,
#kwc-root .kwc-mini-actions,
#kwc-root .kwc-mini-action {
  flex: 0 0 auto !important;
}

#kwc-root .kwc-meta > .kwc-sender,
#kwc-root .kwc-meta > .kwc-source-label,
#kwc-root .kwc-meta > .kwc-time-actions {
  margin: 0 !important;
}

#kwc-root .kwc-mini-actions {
  position: static !important;
  margin-left: 2px !important;
  transform: none !important;
}


/* Stable history-end notice and inline moderation action grouping. */
#kwc-root .kwc-history-end {
  flex: 0 0 auto !important;
  order: -1;
}

#kwc-root .kwc-time-actions {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: max-content !important;
}

#kwc-root .kwc-time-actions .kwc-mini-actions {
  margin-left: 2px !important;
}

/* Keep large media inside the visible chat viewport even when the configured
   preview max-height is very large or unlimited. Inline per-message max-height
   values are intentionally overridden here so images/videos/YouTube cards do
   not exceed the current chat window. */
#kwc-root .kwc-image-link,
#kwc-root .kwc-video-wrap,
#kwc-root .kwc-youtube-wrap,
#kwc-root .kwc-youtube-card,
#kwc-root .kwc-media-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#kwc-root .kwc-image-preview,
#kwc-root .kwc-video-preview {
  max-width: 100% !important;
  max-height: var(--kwc-media-viewport-max-height, min(720px, calc(100vh - 180px))) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

#kwc-root .kwc-youtube-wrap,
#kwc-root .kwc-youtube-card {
  max-height: var(--kwc-media-viewport-max-height, min(720px, calc(100vh - 180px))) !important;
}

#kwc-root .kwc-youtube-wrap,
#kwc-root .kwc-youtube-card {
  aspect-ratio: 16 / 9;
}

#kwc-root .kwc-youtube-card iframe,
#kwc-root .kwc-youtube-wrap iframe,
#kwc-root .kwc-media-card iframe {
  max-width: 100% !important;
  max-height: var(--kwc-media-viewport-max-height, min(720px, calc(100vh - 180px))) !important;
  box-sizing: border-box !important;
}

/* Theme-colored scroll affordances.  These two controls intentionally use the
   selected theme colors instead of the user-overridable UI text color so they
   remain readable even when chat/UI text colors are customized. */
#kwc-root {
  --kwc-affordance-text-color: #ffffff;
  --kwc-affordance-bg-rgb: 18, 18, 22;
}
#kwc-root.kwc-theme-dark,
#kwc-root.kwc-theme-system {
  --kwc-affordance-text-color: #ffffff;
  --kwc-affordance-bg-rgb: 18, 18, 22;
}
#kwc-root.kwc-theme-light {
  --kwc-affordance-text-color: #0f172a;
  --kwc-affordance-bg-rgb: 226, 232, 240;
}
#kwc-root.kwc-theme-high-contrast {
  --kwc-affordance-text-color: #ffffff;
  --kwc-affordance-bg-rgb: 0, 0, 0;
}
@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system {
    --kwc-affordance-text-color: #0f172a;
    --kwc-affordance-bg-rgb: 226, 232, 240;
  }
}

#kwc-root .kwc-history-end {
  position: absolute !important;
  top: var(--kwc-affordance-top, 54px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
  order: initial !important;
  color: var(--kwc-affordance-text-color) !important;
  background: rgba(var(--kwc-affordance-bg-rgb), 0.92) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: 0 4px 16px var(--kwc-shadow-color) !important;
  backdrop-filter: blur(8px);
}

#kwc-root .kwc-jump-latest {
  bottom: var(--kwc-affordance-bottom, 72px) !important;
  color: var(--kwc-affordance-text-color) !important;
  background: rgba(var(--kwc-affordance-bg-rgb), 0.92) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-jump-latest:hover {
  background: var(--kwc-header-bg) !important;
}


/* Stronger light-theme affordance and button contrast.  The original light
   palette was intentionally subtle, but against a bright map/background many
   buttons became hard to see.  Keep the dark theme unchanged and make light
   controls look like actual controls with stronger surfaces, borders and focus
   rings. */
#kwc-root.kwc-theme-light .kwc-button,
#kwc-root.kwc-theme-light .kwc-mini-action,
#kwc-root.kwc-theme-light .kwc-media-load,
#kwc-root.kwc-theme-light .kwc-command-inline-item,
#kwc-root.kwc-theme-light .kwc-jump-latest,
#kwc-root.kwc-theme-light .kwc-history-end {
  border-color: rgba(71,85,105,0.48) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.12) !important;
}

#kwc-root.kwc-theme-light .kwc-button:hover,
#kwc-root.kwc-theme-light .kwc-mini-action:hover,
#kwc-root.kwc-theme-light .kwc-media-load:hover,
#kwc-root.kwc-theme-light .kwc-command-inline-item:hover,
#kwc-root.kwc-theme-light .kwc-jump-latest:hover {
  border-color: rgba(51,65,85,0.58) !important;
  box-shadow: 0 2px 6px rgba(15,23,42,0.16) !important;
}

#kwc-root.kwc-theme-light .kwc-input:focus,
#kwc-root.kwc-theme-light .kwc-button:focus-visible,
#kwc-root.kwc-theme-light .kwc-mini-action:focus-visible,
#kwc-root.kwc-theme-light .kwc-command-inline-item:focus-visible {
  outline: 2px solid rgba(37,99,235,0.35) !important;
  outline-offset: 2px !important;
  border-color: rgba(37,99,235,0.72) !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-button,
  #kwc-root.kwc-theme-system .kwc-mini-action,
  #kwc-root.kwc-theme-system .kwc-media-load,
  #kwc-root.kwc-theme-system .kwc-command-inline-item,
  #kwc-root.kwc-theme-system .kwc-jump-latest,
  #kwc-root.kwc-theme-system .kwc-history-end {
    border-color: rgba(71,85,105,0.48) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.12) !important;
  }

  #kwc-root.kwc-theme-system .kwc-button:hover,
  #kwc-root.kwc-theme-system .kwc-mini-action:hover,
  #kwc-root.kwc-theme-system .kwc-media-load:hover,
  #kwc-root.kwc-theme-system .kwc-command-inline-item:hover,
  #kwc-root.kwc-theme-system .kwc-jump-latest:hover {
    border-color: rgba(51,65,85,0.58) !important;
    box-shadow: 0 2px 6px rgba(15,23,42,0.16) !important;
  }

  #kwc-root.kwc-theme-system .kwc-input:focus,
  #kwc-root.kwc-theme-system .kwc-button:focus-visible,
  #kwc-root.kwc-theme-system .kwc-mini-action:focus-visible,
  #kwc-root.kwc-theme-system .kwc-command-inline-item:focus-visible {
    outline: 2px solid rgba(37,99,235,0.35) !important;
    outline-offset: 2px !important;
    border-color: rgba(37,99,235,0.72) !important;
  }
}


/* Light theme admin indicators need a real edge.  Without a border they can
   look like plain white text/surface against the light chat background. */
#kwc-root.kwc-theme-light .kwc-status-role-ADMIN,
#kwc-root.kwc-theme-light .kwc-role-ADMIN .kwc-sender {
  display: inline-block !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  color: #5f3b00 !important;
  background: rgba(255, 193, 7, 0.28) !important;
  border: 1px solid rgba(132, 78, 0, 0.55) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
  line-height: 1.35 !important;
}

#kwc-root.kwc-theme-light .kwc-status-role-MODERATOR,
#kwc-root.kwc-theme-light .kwc-role-MODERATOR .kwc-sender {
  display: inline-block !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  color: #004f7a !important;
  background: rgba(14, 165, 233, 0.18) !important;
  border: 1px solid rgba(0, 95, 135, 0.42) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10) !important;
  line-height: 1.35 !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-status-role-ADMIN,
  #kwc-root.kwc-theme-system .kwc-role-ADMIN .kwc-sender {
    display: inline-block !important;
    padding: 0 5px !important;
    border-radius: 6px !important;
    color: #5f3b00 !important;
    background: rgba(255, 193, 7, 0.28) !important;
    border: 1px solid rgba(132, 78, 0, 0.55) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
    line-height: 1.35 !important;
  }

  #kwc-root.kwc-theme-system .kwc-status-role-MODERATOR,
  #kwc-root.kwc-theme-system .kwc-role-MODERATOR .kwc-sender {
    display: inline-block !important;
    padding: 0 5px !important;
    border-radius: 6px !important;
    color: #004f7a !important;
    background: rgba(14, 165, 233, 0.18) !important;
    border: 1px solid rgba(0, 95, 135, 0.42) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10) !important;
    line-height: 1.35 !important;
  }
}


/* polished light theme palette.
   Keep dark/high-contrast unchanged, but make light mode use one calm slate
   palette instead of mixed white/gray surfaces. */
#kwc-root.kwc-theme-light {
  color-scheme: light;
  --kwc-panel-bg-rgb: 248, 250, 252;
  --kwc-modal-bg-rgb: 248, 250, 252;
  --kwc-text-color: #111827;
  --kwc-muted-color: #64748b;
  --kwc-border-color: rgba(148, 163, 184, 0.46);
  --kwc-header-bg: rgba(var(--kwc-panel-bg-rgb), 0.94);
  --kwc-form-bg: rgba(var(--kwc-panel-bg-rgb), 0.96);
  --kwc-button-bg: rgba(241, 245, 249, 0.96);
  --kwc-button-hover-bg: rgba(226, 232, 240, 0.98);
  --kwc-button-text: #1e293b;
  --kwc-input-bg: rgba(255, 255, 255, 0.98);
  --kwc-link-color: #2563eb;
  --kwc-shadow-color: rgba(15, 23, 42, 0.18);
  --kwc-surface-bg: rgba(255, 255, 255, 0.70);
  --kwc-surface-strong-bg: rgba(241, 245, 249, 0.94);
  --kwc-surface-hover-bg: rgba(226, 232, 240, 0.94);
  --kwc-progress-bg: rgba(148, 163, 184, 0.26);
  --kwc-drop-backdrop: rgba(241, 245, 249, 0.76);
  --kwc-drop-box-bg: rgba(255, 255, 255, 0.98);
  --kwc-pinned-bg: rgba(251, 191, 36, 0.14);
  --kwc-affordance-text-color: #1e293b;
  --kwc-affordance-bg-rgb: 255, 255, 255;
  --kwc-admin-text: #7a4b00;
  --kwc-admin-bg: rgba(251, 191, 36, 0.20);
  --kwc-admin-border: rgba(180, 83, 9, 0.36);
  --kwc-mod-text: #075985;
  --kwc-mod-bg: rgba(14, 165, 233, 0.15);
  --kwc-mod-border: rgba(2, 132, 199, 0.32);
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system {
    color-scheme: light;
    --kwc-panel-bg-rgb: 248, 250, 252;
    --kwc-modal-bg-rgb: 248, 250, 252;
    --kwc-text-color: #111827;
    --kwc-muted-color: #64748b;
    --kwc-border-color: rgba(148, 163, 184, 0.46);
    --kwc-header-bg: rgba(var(--kwc-panel-bg-rgb), 0.94);
    --kwc-form-bg: rgba(var(--kwc-panel-bg-rgb), 0.96);
    --kwc-button-bg: rgba(241, 245, 249, 0.96);
    --kwc-button-hover-bg: rgba(226, 232, 240, 0.98);
    --kwc-button-text: #1e293b;
    --kwc-input-bg: rgba(255, 255, 255, 0.98);
    --kwc-link-color: #2563eb;
    --kwc-shadow-color: rgba(15, 23, 42, 0.18);
    --kwc-surface-bg: rgba(255, 255, 255, 0.70);
    --kwc-surface-strong-bg: rgba(241, 245, 249, 0.94);
    --kwc-surface-hover-bg: rgba(226, 232, 240, 0.94);
    --kwc-progress-bg: rgba(148, 163, 184, 0.26);
    --kwc-drop-backdrop: rgba(241, 245, 249, 0.76);
    --kwc-drop-box-bg: rgba(255, 255, 255, 0.98);
    --kwc-pinned-bg: rgba(251, 191, 36, 0.14);
    --kwc-affordance-text-color: #1e293b;
    --kwc-affordance-bg-rgb: 255, 255, 255;
    --kwc-admin-text: #7a4b00;
    --kwc-admin-bg: rgba(251, 191, 36, 0.20);
    --kwc-admin-border: rgba(180, 83, 9, 0.36);
    --kwc-mod-text: #075985;
    --kwc-mod-bg: rgba(14, 165, 233, 0.15);
    --kwc-mod-border: rgba(2, 132, 199, 0.32);
  }
}

#kwc-root.kwc-theme-light .kwc-panel {
  background: rgba(var(--kwc-panel-bg-rgb), var(--kwc-panel-opacity)) !important;
  border-color: rgba(148, 163, 184, 0.50) !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18) !important;
}

#kwc-root.kwc-theme-light .kwc-header,
#kwc-root.kwc-theme-light .kwc-form {
  background: var(--kwc-header-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root.kwc-theme-light .kwc-form {
  background: var(--kwc-form-bg) !important;
}

#kwc-root.kwc-theme-light .kwc-modal {
  background: rgba(var(--kwc-modal-bg-rgb), var(--kwc-panel-opacity)) !important;
  border-color: rgba(148, 163, 184, 0.52) !important;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.20) !important;
}

#kwc-root.kwc-theme-light .kwc-button,
#kwc-root.kwc-theme-light .kwc-mini-action,
#kwc-root.kwc-theme-light .kwc-media-load,
#kwc-root.kwc-theme-light .kwc-command-inline-item,
#kwc-root.kwc-theme-light .kwc-jump-latest,
#kwc-root.kwc-theme-light .kwc-history-end {
  color: var(--kwc-button-text) !important;
  background: var(--kwc-button-bg) !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.10) !important;
}

#kwc-root.kwc-theme-light .kwc-button:hover,
#kwc-root.kwc-theme-light .kwc-mini-action:hover,
#kwc-root.kwc-theme-light .kwc-media-load:hover,
#kwc-root.kwc-theme-light .kwc-command-inline-item:hover,
#kwc-root.kwc-theme-light .kwc-jump-latest:hover {
  background: var(--kwc-button-hover-bg) !important;
  border-color: rgba(100, 116, 139, 0.58) !important;
  box-shadow: 0 2px 7px rgba(15,23,42,0.14) !important;
}

#kwc-root.kwc-theme-light .kwc-input,
#kwc-root.kwc-theme-light .kwc-pref-input,
#kwc-root.kwc-theme-light .kwc-pref-select,
#kwc-root.kwc-theme-light .kwc-pref-color {
  color: var(--kwc-text-color) !important;
  background: var(--kwc-input-bg) !important;
  border-color: rgba(148, 163, 184, 0.54) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
}

#kwc-root.kwc-theme-light .kwc-input:focus,
#kwc-root.kwc-theme-light .kwc-pref-input:focus,
#kwc-root.kwc-theme-light .kwc-pref-select:focus,
#kwc-root.kwc-theme-light .kwc-button:focus-visible,
#kwc-root.kwc-theme-light .kwc-mini-action:focus-visible,
#kwc-root.kwc-theme-light .kwc-command-inline-item:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.20) !important;
  outline-offset: 2px !important;
  border-color: rgba(37, 99, 235, 0.55) !important;
}

#kwc-root.kwc-theme-light .kwc-admin-grid,
#kwc-root.kwc-theme-light .kwc-admin-list,
#kwc-root.kwc-theme-light .kwc-upload-progress,
#kwc-root.kwc-theme-light .kwc-media-card,
#kwc-root.kwc-theme-light .kwc-media-error,
#kwc-root.kwc-theme-light .kwc-pinned-item,
#kwc-root.kwc-theme-light .kwc-pinned-open,
#kwc-root.kwc-theme-light .kwc-code,
#kwc-root.kwc-theme-light .kwc-pref-preview,
#kwc-root.kwc-theme-light .kwc-pref-fieldset {
  background: var(--kwc-surface-bg) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

#kwc-root.kwc-theme-light .kwc-admin-item,
#kwc-root.kwc-theme-light .kwc-pinned-bar,
#kwc-root.kwc-theme-light .kwc-pref-row {
  border-color: var(--kwc-border-color) !important;
}

#kwc-root.kwc-theme-light .kwc-drop-overlay {
  background: var(--kwc-drop-backdrop) !important;
}

#kwc-root.kwc-theme-light .kwc-drop-box {
  background: var(--kwc-drop-box-bg) !important;
  border-color: rgba(37, 99, 235, 0.34) !important;
}

#kwc-root.kwc-theme-light .kwc-status-role-ADMIN,
#kwc-root.kwc-theme-light .kwc-role-ADMIN .kwc-sender {
  color: var(--kwc-admin-text) !important;
  background: var(--kwc-admin-bg) !important;
  border-color: var(--kwc-admin-border) !important;
  box-shadow: 0 1px 2px rgba(120, 53, 15, 0.10) !important;
}

#kwc-root.kwc-theme-light .kwc-status-role-MODERATOR,
#kwc-root.kwc-theme-light .kwc-role-MODERATOR .kwc-sender {
  color: var(--kwc-mod-text) !important;
  background: var(--kwc-mod-bg) !important;
  border-color: var(--kwc-mod-border) !important;
  box-shadow: 0 1px 2px rgba(7, 89, 133, 0.08) !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-panel {
    background: rgba(var(--kwc-panel-bg-rgb), var(--kwc-panel-opacity)) !important;
    border-color: rgba(148, 163, 184, 0.50) !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18) !important;
  }
  #kwc-root.kwc-theme-system .kwc-header,
  #kwc-root.kwc-theme-system .kwc-form {
    background: var(--kwc-header-bg) !important;
    border-color: var(--kwc-border-color) !important;
  }
  #kwc-root.kwc-theme-system .kwc-form {
    background: var(--kwc-form-bg) !important;
  }
  #kwc-root.kwc-theme-system .kwc-modal {
    background: rgba(var(--kwc-modal-bg-rgb), var(--kwc-panel-opacity)) !important;
    border-color: rgba(148, 163, 184, 0.52) !important;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.20) !important;
  }
  #kwc-root.kwc-theme-system .kwc-button,
  #kwc-root.kwc-theme-system .kwc-mini-action,
  #kwc-root.kwc-theme-system .kwc-media-load,
  #kwc-root.kwc-theme-system .kwc-command-inline-item,
  #kwc-root.kwc-theme-system .kwc-jump-latest,
  #kwc-root.kwc-theme-system .kwc-history-end {
    color: var(--kwc-button-text) !important;
    background: var(--kwc-button-bg) !important;
    border-color: rgba(148, 163, 184, 0.55) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.10) !important;
  }
  #kwc-root.kwc-theme-system .kwc-button:hover,
  #kwc-root.kwc-theme-system .kwc-mini-action:hover,
  #kwc-root.kwc-theme-system .kwc-media-load:hover,
  #kwc-root.kwc-theme-system .kwc-command-inline-item:hover,
  #kwc-root.kwc-theme-system .kwc-jump-latest:hover {
    background: var(--kwc-button-hover-bg) !important;
    border-color: rgba(100, 116, 139, 0.58) !important;
    box-shadow: 0 2px 7px rgba(15,23,42,0.14) !important;
  }
  #kwc-root.kwc-theme-system .kwc-input,
  #kwc-root.kwc-theme-system .kwc-pref-input,
  #kwc-root.kwc-theme-system .kwc-pref-select,
  #kwc-root.kwc-theme-system .kwc-pref-color {
    color: var(--kwc-text-color) !important;
    background: var(--kwc-input-bg) !important;
    border-color: rgba(148, 163, 184, 0.54) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
  }
  #kwc-root.kwc-theme-system .kwc-input:focus,
  #kwc-root.kwc-theme-system .kwc-pref-input:focus,
  #kwc-root.kwc-theme-system .kwc-pref-select:focus,
  #kwc-root.kwc-theme-system .kwc-button:focus-visible,
  #kwc-root.kwc-theme-system .kwc-mini-action:focus-visible,
  #kwc-root.kwc-theme-system .kwc-command-inline-item:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.20) !important;
    outline-offset: 2px !important;
    border-color: rgba(37, 99, 235, 0.55) !important;
  }
  #kwc-root.kwc-theme-system .kwc-admin-grid,
  #kwc-root.kwc-theme-system .kwc-admin-list,
  #kwc-root.kwc-theme-system .kwc-upload-progress,
  #kwc-root.kwc-theme-system .kwc-media-card,
  #kwc-root.kwc-theme-system .kwc-media-error,
  #kwc-root.kwc-theme-system .kwc-pinned-item,
  #kwc-root.kwc-theme-system .kwc-pinned-open,
  #kwc-root.kwc-theme-system .kwc-code,
  #kwc-root.kwc-theme-system .kwc-pref-preview,
  #kwc-root.kwc-theme-system .kwc-pref-fieldset {
    background: var(--kwc-surface-bg) !important;
    border-color: var(--kwc-border-color) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }
  #kwc-root.kwc-theme-system .kwc-admin-item,
  #kwc-root.kwc-theme-system .kwc-pinned-bar,
  #kwc-root.kwc-theme-system .kwc-pref-row {
    border-color: var(--kwc-border-color) !important;
  }
  #kwc-root.kwc-theme-system .kwc-drop-overlay {
    background: var(--kwc-drop-backdrop) !important;
  }
  #kwc-root.kwc-theme-system .kwc-drop-box {
    background: var(--kwc-drop-box-bg) !important;
    border-color: rgba(37, 99, 235, 0.34) !important;
  }
  #kwc-root.kwc-theme-system .kwc-status-role-ADMIN,
  #kwc-root.kwc-theme-system .kwc-role-ADMIN .kwc-sender {
    color: var(--kwc-admin-text) !important;
    background: var(--kwc-admin-bg) !important;
    border-color: var(--kwc-admin-border) !important;
    box-shadow: 0 1px 2px rgba(120, 53, 15, 0.10) !important;
  }
  #kwc-root.kwc-theme-system .kwc-status-role-MODERATOR,
  #kwc-root.kwc-theme-system .kwc-role-MODERATOR .kwc-sender {
    color: var(--kwc-mod-text) !important;
    background: var(--kwc-mod-bg) !important;
    border-color: var(--kwc-mod-border) !important;
    box-shadow: 0 1px 2px rgba(7, 89, 133, 0.08) !important;
  }
}

/* 3.1.0 correction: only the header role indicator gets a bordered badge.
   Message sender names keep their normal colored text without badge chrome. */
#kwc-root.kwc-theme-light .kwc-role-ADMIN .kwc-sender,
#kwc-root.kwc-theme-light .kwc-role-MODERATOR .kwc-sender {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: inherit !important;
}

#kwc-root.kwc-theme-light .kwc-role-ADMIN .kwc-sender {
  color: var(--kwc-admin-text, #704600) !important;
}

#kwc-root.kwc-theme-light .kwc-role-MODERATOR .kwc-sender {
  color: var(--kwc-mod-text, #004f7a) !important;
}

#kwc-root.kwc-theme-light .kwc-status-role-ADMIN,
#kwc-root.kwc-theme-light .kwc-status-role-MODERATOR {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  box-sizing: border-box !important;
  height: 18px !important;
  min-width: 34px !important;
  max-width: 62px !important;
  padding: 0 6px !important;
  margin-left: 6px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

#kwc-root.kwc-theme-light .kwc-status-role-ADMIN {
  color: var(--kwc-admin-text, #704600) !important;
  background: var(--kwc-admin-bg, rgba(255, 193, 7, 0.24)) !important;
  border: 1px solid var(--kwc-admin-border, rgba(160, 100, 0, 0.42)) !important;
  box-shadow: 0 1px 2px rgba(120, 53, 15, 0.10) !important;
}

#kwc-root.kwc-theme-light .kwc-status-role-MODERATOR {
  color: var(--kwc-mod-text, #004f7a) !important;
  background: var(--kwc-mod-bg, rgba(14, 165, 233, 0.16)) !important;
  border: 1px solid var(--kwc-mod-border, rgba(0, 95, 135, 0.36)) !important;
  box-shadow: 0 1px 2px rgba(7, 89, 133, 0.08) !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-role-ADMIN .kwc-sender,
  #kwc-root.kwc-theme-system .kwc-role-MODERATOR .kwc-sender {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: inherit !important;
  }

  #kwc-root.kwc-theme-system .kwc-role-ADMIN .kwc-sender {
    color: var(--kwc-admin-text, #704600) !important;
  }

  #kwc-root.kwc-theme-system .kwc-role-MODERATOR .kwc-sender {
    color: var(--kwc-mod-text, #004f7a) !important;
  }

  #kwc-root.kwc-theme-system .kwc-status-role-ADMIN,
  #kwc-root.kwc-theme-system .kwc-status-role-MODERATOR {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    box-sizing: border-box !important;
    height: 18px !important;
    min-width: 34px !important;
    max-width: 62px !important;
    padding: 0 6px !important;
    margin-left: 6px !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
  }

  #kwc-root.kwc-theme-system .kwc-status-role-ADMIN {
    color: var(--kwc-admin-text, #704600) !important;
    background: var(--kwc-admin-bg, rgba(255, 193, 7, 0.24)) !important;
    border: 1px solid var(--kwc-admin-border, rgba(160, 100, 0, 0.42)) !important;
    box-shadow: 0 1px 2px rgba(120, 53, 15, 0.10) !important;
  }

  #kwc-root.kwc-theme-system .kwc-status-role-MODERATOR {
    color: var(--kwc-mod-text, #004f7a) !important;
    background: var(--kwc-mod-bg, rgba(14, 165, 233, 0.16)) !important;
    border: 1px solid var(--kwc-mod-border, rgba(0, 95, 135, 0.36)) !important;
    box-shadow: 0 1px 2px rgba(7, 89, 133, 0.08) !important;
  }
}

/* Minimized mode is a compact title pill. Keep header role/status badges hidden
   even when later light/system theme badge rules use !important. */
#kwc-root.kwc-minimized .kwc-status,
#kwc-root.kwc-minimized .kwc-status-role-ADMIN,
#kwc-root.kwc-minimized .kwc-status-role-MODERATOR,
#kwc-root.kwc-minimized .kwc-status-role-USER,
#kwc-root.kwc-minimized .kwc-status-role-GUEST,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status-role-ADMIN,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status-role-MODERATOR,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status-role-USER,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status-role-GUEST {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}



/* keep history/network toast compact; explicit line breaks in i18n text become two centered lines */
#kwc-root .kwc-history-end {
  white-space: pre-line !important;
  text-align: center !important;
  width: max-content !important;
  min-width: min(260px, calc(100% - 20px)) !important;
  max-width: min(380px, calc(100% - 20px)) !important;
  box-sizing: border-box !important;
  padding: 2px 14px 3px !important;
  line-height: 1.32 !important;
  letter-spacing: 0.01em;
}


.kwc-emoji-button {
  min-width: 34px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 15px;
  line-height: 1;
}

.kwc-emoji-panel {
  margin: 0 0 6px 0;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  box-sizing: border-box;
  max-height: var(--kwc-emoji-panel-height, 180px);
  min-height: var(--kwc-emoji-panel-min-height, calc(var(--kwc-emoji-picker-size, 44px) + 74px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kwc-emoji-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 8px;
  box-sizing: border-box;
}

.kwc-emoji-resize-handle {
  flex: 0 0 12px;
  height: 12px;
  margin: 0;
  cursor: ns-resize;
  touch-action: none;
  position: relative;
  background: linear-gradient(to bottom, rgba(255,255,255,0.045), rgba(0,0,0,0.08));
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.kwc-emoji-resize-handle:not(.kwc-hidden) + .kwc-form {
  border-top: 0;
}

.kwc-emoji-resize-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.34);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.14);
}

.kwc-emoji-resize-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.kwc-emoji-resize-handle:hover::before,
body.kwc-emoji-resizing .kwc-emoji-resize-handle::before {
  background: rgba(130,190,255,0.82);
}

body.kwc-emoji-resizing {
  cursor: ns-resize !important;
  user-select: none !important;
}

.kwc-emoji-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 0 7px 0;
}

.kwc-emoji-tabs {
  display: flex;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--kwc-border-color, rgba(255,255,255,0.24)) transparent;
}

@supports selector(::-webkit-scrollbar) {
  .kwc-emoji-tabs {
    scrollbar-width: auto;
  }
}

.kwc-emoji-tabs::-webkit-scrollbar {
  height: 12px;
}

.kwc-emoji-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.kwc-emoji-tabs::-webkit-scrollbar-thumb {
  background-color: var(--kwc-border-color, rgba(255,255,255,0.24));
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.kwc-emoji-tabs::-webkit-scrollbar-thumb:hover {
  background-color: var(--kwc-link-color, rgba(130,190,255,0.65));
}

.kwc-emoji-search-toggle {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 999px;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13));
  color: var(--kwc-button-text, #fff);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
}

.kwc-emoji-search-toggle:hover,
.kwc-emoji-search-toggle.kwc-active {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22));
}

/* Emoji search is deliberately not another row inside the picker. The search
   button lives immediately before Recent, while the active search field floats
   over the current message composer so it is visually unambiguous that typing
   is filtering emojis rather than composing a message. */
#kwc-root .kwc-form {
  position: relative;
}

.kwc-emoji-search-overlay {
  position: absolute;
  z-index: 120;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  padding: 2px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.22));
  border-radius: 8px;
  background: rgb(var(--kwc-panel-bg-rgb, 18, 18, 22));
  box-shadow: 0 6px 18px var(--kwc-shadow-color, rgba(0,0,0,0.38));
}

.kwc-emoji-search-float-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  font-size: 13px;
  line-height: 1;
  opacity: .86;
}

.kwc-emoji-search-overlay .kwc-emoji-search-input {
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 31px !important;
  margin: 0 !important;
  background: rgb(var(--kwc-panel-bg-rgb, 18, 18, 22)) !important;
}

.kwc-emoji-tab {
  border: 0;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--kwc-button-text, #fff);
  background: var(--kwc-button-bg, rgba(255,255,255,0.13));
  cursor: pointer;
  white-space: nowrap;
}

.kwc-emoji-tab.kwc-active,
.kwc-emoji-tab:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22));
}

.kwc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--kwc-emoji-picker-size, 44px) + 20px), 1fr));
  gap: 7px;
  align-content: start;
  scroll-margin-top: 0;
  box-sizing: border-box;
}

.kwc-emoji-item-wrap {
  position: relative;
  min-width: 0;
}

.kwc-emoji-item-wrap > .kwc-emoji-item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.kwc-emoji-favorite-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18));
  border-radius: 999px;
  background: rgb(var(--kwc-panel-bg-rgb, 18, 18, 22));
  color: var(--kwc-button-text, #fff);
  box-shadow: 0 2px 7px var(--kwc-shadow-color, rgba(0,0,0,0.28));
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.9);
  transition: opacity .12s ease, transform .12s ease, background .12s ease;
}

.kwc-emoji-item-wrap:hover .kwc-emoji-favorite-toggle,
.kwc-emoji-item-wrap:focus-within .kwc-emoji-favorite-toggle {
  opacity: .82;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.kwc-emoji-favorite-toggle:hover,
.kwc-emoji-favorite-toggle:focus-visible {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22));
}

.kwc-emoji-favorite-toggle.kwc-active {
  font-weight: 800;
  color: #ffd54a;
}
.kwc-emoji-item-wrap:hover .kwc-emoji-favorite-toggle.kwc-active,
.kwc-emoji-item-wrap:focus-within .kwc-emoji-favorite-toggle.kwc-active {
  opacity: .96;
  color: #ffd54a;
}

.kwc-emoji-item {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 6px 5px 5px;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #fff));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.kwc-emoji-item:hover {
  background: rgba(255,255,255,0.13);
}

.kwc-emoji-item img {
  width: var(--kwc-emoji-picker-size, 44px);
  height: var(--kwc-emoji-picker-size, 44px);
  object-fit: contain;
  image-rendering: auto;
}

.kwc-emoji-item span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.2;
  min-height: 12px;
  opacity: 0.78;
}

.kwc-custom-emoji {
  display: inline-block;
  object-fit: contain;
  vertical-align: -0.33em;
  margin: 0;
  max-width: 1024px;
  max-height: 1024px;
}

.kwc-emoji-empty {
  font-size: 12px;
  opacity: 0.72;
  text-align: center;
  padding: 8px;
}

#kwc-root.kwc-theme-light .kwc-emoji-panel,
#kwc-root.kwc-theme-system .kwc-emoji-panel {
  background: rgba(241,245,249,0.92);
  border-color: rgba(148,163,184,0.38);
}

#kwc-root.kwc-theme-light .kwc-emoji-resize-handle,
#kwc-root.kwc-theme-system .kwc-emoji-resize-handle {
  background: rgba(15,23,42,0.055);
  border-top-color: rgba(15,23,42,0.10);
  border-bottom-color: rgba(15,23,42,0.12);
}

#kwc-root.kwc-theme-light .kwc-emoji-resize-handle::before,
#kwc-root.kwc-theme-system .kwc-emoji-resize-handle::before {
  background: rgba(71,85,105,0.38);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.28);
}

#kwc-root.kwc-theme-light .kwc-emoji-resize-handle:hover::before,
#kwc-root.kwc-theme-system .kwc-emoji-resize-handle:hover::before,
body.kwc-emoji-resizing #kwc-root.kwc-theme-light .kwc-emoji-resize-handle::before,
body.kwc-emoji-resizing #kwc-root.kwc-theme-system .kwc-emoji-resize-handle::before {
  background: rgba(59,130,246,0.74);
}

#kwc-root.kwc-theme-light .kwc-emoji-item,
#kwc-root.kwc-theme-system .kwc-emoji-item {
  background: rgba(255,255,255,0.74);
  border-color: rgba(148,163,184,0.28);
}

#kwc-root.kwc-theme-light .kwc-emoji-item:hover,
#kwc-root.kwc-theme-system .kwc-emoji-item:hover {
  background: rgba(226,232,240,0.95);
}

.kwc-admin-emoji-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
  max-height: 96px;
  overflow-y: auto;
  padding-right: 2px;
}

.kwc-admin-emoji-tab {
  flex: 0 1 auto;
}

.kwc-admin-emoji-tab.kwc-active {
  background: rgba(125, 180, 255, 0.35);
}

.kwc-admin-emoji-tab span {
  opacity: 0.72;
  margin-left: 3px;
}

.kwc-admin-emoji-pack-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 6px 0 8px;
  font-size: 12px;
}

.kwc-admin-emoji-pack-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  min-width: 0;
}

.kwc-admin-emoji-pack-summary #kwc-emoji-pack-select {
  flex: 0 1 380px;
  width: min(380px, calc(100% - 10em));
  max-width: min(380px, calc(100% - 10em));
  min-width: 140px;
}

.kwc-admin-emoji-pack-summary span {
  flex: 0 0 auto;
  min-width: 8em;
  margin-left: 0;
  opacity: 0.72;
  text-align: right;
  white-space: nowrap;
}

.kwc-admin-emoji-pack-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.kwc-admin-emoji-pack-buttons .kwc-button {
  min-height: 32px;
}

.kwc-admin-emoji-check {
  flex: 0 0 auto;
}

.kwc-admin-emoji-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  justify-self: end;
  width: 48px;
  min-width: 48px;
}

.kwc-admin-emoji-item .kwc-mini-action {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
}

/* Light header/form backgrounds intentionally derive from --kwc-panel-bg-rgb so
   the user background color affects the title area and input surrounding area
   just like it does in the dark theme. */

/* Align light/system-light user setting targets with the generic dark-theme mapping.
   Light mode used to add several extra hard-coded surface/border/shadow rules.
   That made user settings appear on different visual parts compared with dark
   mode.  Keep the light palette variables, but make the affected controls use
   the same variable-driven selectors and reset light-only shadows. */
#kwc-root .kwc-pref-input,
#kwc-root .kwc-pref-select,
#kwc-root .kwc-pref-color {
  color: var(--kwc-text-color) !important;
  background: var(--kwc-input-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-command-inline-item,
#kwc-root .kwc-emoji-tab,
#kwc-root .kwc-admin-emoji-tab {
  color: var(--kwc-button-text) !important;
  background: var(--kwc-button-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-command-inline-item:hover,
#kwc-root .kwc-emoji-tab:hover,
#kwc-root .kwc-emoji-tab.kwc-active,
#kwc-root .kwc-admin-emoji-tab:hover,
#kwc-root .kwc-admin-emoji-tab.kwc-active {
  background: var(--kwc-button-hover-bg) !important;
}

#kwc-root .kwc-code,
#kwc-root .kwc-pref-preview,
#kwc-root .kwc-pref-fieldset,
#kwc-root .kwc-admin-emoji-tools,
#kwc-root .kwc-admin-emoji-item,
#kwc-root .kwc-emoji-panel,
#kwc-root .kwc-emoji-item {
  background: var(--kwc-surface-bg) !important;
  border-color: var(--kwc-border-color) !important;
}

#kwc-root .kwc-emoji-item:hover {
  background: var(--kwc-surface-hover-bg) !important;
}

#kwc-root.kwc-theme-light .kwc-panel {
  background: rgba(var(--kwc-panel-bg-rgb), var(--kwc-panel-opacity)) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: 0 8px 30px var(--kwc-shadow-color) !important;
}

#kwc-root.kwc-theme-light .kwc-modal {
  background: rgba(var(--kwc-modal-bg-rgb), var(--kwc-panel-opacity)) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: 0 8px 40px var(--kwc-shadow-color) !important;
}

#kwc-root.kwc-theme-light .kwc-button,
#kwc-root.kwc-theme-light .kwc-mini-action,
#kwc-root.kwc-theme-light .kwc-media-load,
#kwc-root.kwc-theme-light .kwc-command-inline-item,
#kwc-root.kwc-theme-light .kwc-jump-latest,
#kwc-root.kwc-theme-light .kwc-history-end,
#kwc-root.kwc-theme-light .kwc-emoji-tab,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tab {
  color: var(--kwc-button-text) !important;
  background: var(--kwc-button-bg) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-button:hover,
#kwc-root.kwc-theme-light .kwc-mini-action:hover,
#kwc-root.kwc-theme-light .kwc-media-load:hover,
#kwc-root.kwc-theme-light .kwc-command-inline-item:hover,
#kwc-root.kwc-theme-light .kwc-jump-latest:hover,
#kwc-root.kwc-theme-light .kwc-emoji-tab:hover,
#kwc-root.kwc-theme-light .kwc-emoji-tab.kwc-active,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tab:hover,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tab.kwc-active {
  background: var(--kwc-button-hover-bg) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-input,
#kwc-root.kwc-theme-light .kwc-pref-input,
#kwc-root.kwc-theme-light .kwc-pref-select,
#kwc-root.kwc-theme-light .kwc-pref-color {
  color: var(--kwc-text-color) !important;
  background: var(--kwc-input-bg) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-admin-grid,
#kwc-root.kwc-theme-light .kwc-admin-list,
#kwc-root.kwc-theme-light .kwc-upload-progress,
#kwc-root.kwc-theme-light .kwc-media-card,
#kwc-root.kwc-theme-light .kwc-media-error,
#kwc-root.kwc-theme-light .kwc-pinned-item,
#kwc-root.kwc-theme-light .kwc-pinned-open,
#kwc-root.kwc-theme-light .kwc-code,
#kwc-root.kwc-theme-light .kwc-pref-preview,
#kwc-root.kwc-theme-light .kwc-pref-fieldset,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tools,
#kwc-root.kwc-theme-light .kwc-admin-emoji-item,
#kwc-root.kwc-theme-light .kwc-emoji-panel,
#kwc-root.kwc-theme-light .kwc-emoji-item {
  background: var(--kwc-surface-bg) !important;
  border-color: var(--kwc-border-color) !important;
  box-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-emoji-resize-handle {
  background: var(--kwc-surface-bg) !important;
  border-top-color: var(--kwc-border-color) !important;
  border-bottom-color: var(--kwc-border-color) !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-panel {
    background: rgba(var(--kwc-panel-bg-rgb), var(--kwc-panel-opacity)) !important;
    border-color: var(--kwc-border-color) !important;
    box-shadow: 0 8px 30px var(--kwc-shadow-color) !important;
  }

  #kwc-root.kwc-theme-system .kwc-modal {
    background: rgba(var(--kwc-modal-bg-rgb), var(--kwc-panel-opacity)) !important;
    border-color: var(--kwc-border-color) !important;
    box-shadow: 0 8px 40px var(--kwc-shadow-color) !important;
  }

  #kwc-root.kwc-theme-system .kwc-button,
  #kwc-root.kwc-theme-system .kwc-mini-action,
  #kwc-root.kwc-theme-system .kwc-media-load,
  #kwc-root.kwc-theme-system .kwc-command-inline-item,
  #kwc-root.kwc-theme-system .kwc-jump-latest,
  #kwc-root.kwc-theme-system .kwc-history-end,
  #kwc-root.kwc-theme-system .kwc-emoji-tab,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-tab {
    color: var(--kwc-button-text) !important;
    background: var(--kwc-button-bg) !important;
    border-color: var(--kwc-border-color) !important;
    box-shadow: none !important;
  }

  #kwc-root.kwc-theme-system .kwc-button:hover,
  #kwc-root.kwc-theme-system .kwc-mini-action:hover,
  #kwc-root.kwc-theme-system .kwc-media-load:hover,
  #kwc-root.kwc-theme-system .kwc-command-inline-item:hover,
  #kwc-root.kwc-theme-system .kwc-jump-latest:hover,
  #kwc-root.kwc-theme-system .kwc-emoji-tab:hover,
  #kwc-root.kwc-theme-system .kwc-emoji-tab.kwc-active,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-tab:hover,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-tab.kwc-active {
    background: var(--kwc-button-hover-bg) !important;
    border-color: var(--kwc-border-color) !important;
    box-shadow: none !important;
  }

  #kwc-root.kwc-theme-system .kwc-input,
  #kwc-root.kwc-theme-system .kwc-pref-input,
  #kwc-root.kwc-theme-system .kwc-pref-select,
  #kwc-root.kwc-theme-system .kwc-pref-color {
    color: var(--kwc-text-color) !important;
    background: var(--kwc-input-bg) !important;
    border-color: var(--kwc-border-color) !important;
    box-shadow: none !important;
  }

  #kwc-root.kwc-theme-system .kwc-admin-grid,
  #kwc-root.kwc-theme-system .kwc-admin-list,
  #kwc-root.kwc-theme-system .kwc-upload-progress,
  #kwc-root.kwc-theme-system .kwc-media-card,
  #kwc-root.kwc-theme-system .kwc-media-error,
  #kwc-root.kwc-theme-system .kwc-pinned-item,
  #kwc-root.kwc-theme-system .kwc-pinned-open,
  #kwc-root.kwc-theme-system .kwc-code,
  #kwc-root.kwc-theme-system .kwc-pref-preview,
  #kwc-root.kwc-theme-system .kwc-pref-fieldset,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-tools,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-item,
  #kwc-root.kwc-theme-system .kwc-emoji-panel,
  #kwc-root.kwc-theme-system .kwc-emoji-item {
    background: var(--kwc-surface-bg) !important;
    border-color: var(--kwc-border-color) !important;
    box-shadow: none !important;
  }

  #kwc-root.kwc-theme-system .kwc-emoji-resize-handle {
    background: var(--kwc-surface-bg) !important;
    border-top-color: var(--kwc-border-color) !important;
    border-bottom-color: var(--kwc-border-color) !important;
  }
}


/* Reply UI */
#kwc-root .kwc-reply-action,
#kwc-root .kwc-reaction-action {
  display: inline-block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#kwc-root .kwc-msg:hover .kwc-reply-action,
#kwc-root .kwc-msg:focus-within .kwc-reply-action,
#kwc-root .kwc-msg:hover .kwc-reaction-action,
#kwc-root .kwc-msg:focus-within .kwc-reaction-action,
#kwc-root .kwc-msg.kwc-reaction-touch-open .kwc-reaction-action {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#kwc-root .kwc-reply-ref {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 4px;
  padding: 4px 7px;
  border: 0;
  border-left: 3px solid rgba(255,255,255,0.28);
  border-radius: 7px;
  background: rgba(255,255,255,0.08);
  color: var(--kwc-text-color, #fff);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
#kwc-root .kwc-reply-ref:hover {
  background: rgba(255,255,255,0.13);
}
#kwc-root .kwc-reply-ref-sender {
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#kwc-root .kwc-reply-ref-preview {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  opacity: 0.78;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#kwc-root .kwc-reply-compose {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 5px 6px;
  border-left: 3px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
#kwc-root .kwc-reply-compose-main {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--kwc-text-color, #fff);
  text-align: left;
  padding: 0;
  cursor: pointer;
}
#kwc-root .kwc-reply-compose-label,
#kwc-root .kwc-reply-compose-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#kwc-root .kwc-reply-compose-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
#kwc-root .kwc-reply-compose-preview {
  margin-top: 1px;
  font-size: 11px;
  opacity: 0.78;
  line-height: 1.22;
}
#kwc-root .kwc-reply-cancel {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 20px;
}
#kwc-root .kwc-reply-highlight {
  animation: kwc-reply-highlight 2.4s ease-out;
}
@keyframes kwc-reply-highlight {
  0% { background: rgba(255, 230, 120, 0.34); }
  100% { background: transparent; }
}
#kwc-root.kwc-theme-light .kwc-reply-ref,
#kwc-root.kwc-theme-light .kwc-reply-compose {
  border-left-color: rgba(15, 23, 42, 0.22);
  background: rgba(15, 23, 42, 0.06);
}
#kwc-root.kwc-theme-light .kwc-reply-ref:hover {
  background: rgba(15, 23, 42, 0.1);
}
@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-reply-ref,
  #kwc-root.kwc-theme-system .kwc-reply-compose {
    border-left-color: rgba(15, 23, 42, 0.22);
    background: rgba(15, 23, 42, 0.06);
  }
  #kwc-root.kwc-theme-system .kwc-reply-ref:hover {
    background: rgba(15, 23, 42, 0.1);
  }
}

/* Show the no-more-messages toast at the bottom when the user pulls past the latest edge. */
#kwc-root .kwc-history-end.kwc-history-end-bottom {
  top: auto !important;
  bottom: var(--kwc-affordance-bottom, 72px) !important;
}
#kwc-root .kwc-history-end.kwc-history-end-top {
  top: var(--kwc-affordance-top, 54px) !important;
  bottom: auto !important;
}

/* Message search UI. The search button is an independent floating control
   inside the chat panel, so it does not change the input row or pinned bar layout. */
#kwc-root .kwc-search-float {
  position: absolute;
  top: 54px;
  right: 10px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0 !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16)) !important;
  border-radius: 999px;
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(28, 35, 48, 0.92)) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.24);
  backdrop-filter: blur(8px);
  text-align: center;
  font-size: max(14px, var(--kwc-button-font-size, 12px)) !important;
  line-height: 1;
}
#kwc-root.kwc-has-pinned-bar .kwc-search-float {
  top: 98px;
}
#kwc-root .kwc-search-float:hover,
#kwc-root .kwc-search-float:focus-visible {
  background: var(--kwc-button-hover-bg, rgba(42, 52, 70, 0.96)) !important;
  outline: none;
}
#kwc-root.kwc-minimized .kwc-search-button,
#kwc-root.kwc-guest-hidden .kwc-search-button {
  display: none !important;
}
.kwc-search-modal-backdrop {
  padding: 18px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  color: var(--kwc-text-color, #fff);
}
.kwc-search-modal {
  width: min(760px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--kwc-font-size, 13px);
  color: var(--kwc-text-color, #fff);
  background: rgba(var(--kwc-modal-bg-rgb, 29, 29, 36), var(--kwc-panel-opacity, 0.96));
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14));
  box-shadow: 0 10px 46px var(--kwc-shadow-color, rgba(0,0,0,0.45));
}
.kwc-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kwc-search-head h3 {
  margin: 0;
  font-size: max(16px, calc(var(--kwc-font-size, 13px) * 1.25));
}
.kwc-search-x {
  flex: 0 0 auto;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1;
}
.kwc-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.kwc-search-row .kwc-input {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--kwc-input-font-size, 13px) !important;
}
.kwc-search-row .kwc-button {
  min-height: 38px;
  white-space: nowrap;
  font-size: var(--kwc-button-font-size, 12px) !important;
}
.kwc-search-options {
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.12));
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.045));
  color: var(--kwc-text-color, #fff);
}
.kwc-search-options summary {
  cursor: pointer;
  user-select: none;
  font-weight: 650;
  color: var(--kwc-text-color, #fff);
}
.kwc-search-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}
.kwc-search-options-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  font-size: max(10.5px, calc(var(--kwc-message-font-size, 13px) * 0.82));
}
.kwc-search-options-grid .kwc-input {
  min-height: 34px;
  width: 100%;
  box-sizing: border-box;
}
.kwc-search-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  font-size: max(10.5px, calc(var(--kwc-message-font-size, 13px) * 0.84));
}
.kwc-search-check input {
  accent-color: var(--kwc-link-color, #60a5fa);
}
.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-options,
.kwc-search-modal-backdrop.kwc-theme-system .kwc-search-options {
  color: var(--kwc-text-color, #111827);
  background: var(--kwc-surface-bg, rgba(15,23,42,0.045));
}
.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-options summary,
.kwc-search-modal-backdrop.kwc-theme-system .kwc-search-options summary {
  color: var(--kwc-text-color, #111827);
}
.kwc-search-status {
  min-height: 18px;
  font-size: max(10.5px, calc(var(--kwc-message-font-size, 13px) * 0.82));
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
}
.kwc-search-results {
  flex: 1 1 auto;
  min-height: min(300px, 36vh);
  max-height: min(58vh, 540px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 4px 2px 0;
}
.kwc-search-result {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.12));
  border-radius: 10px;
  padding: 9px 10px;
  text-align: left;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.06));
  color: var(--kwc-text-color, #fff);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--kwc-message-font-size, 13px);
}
.kwc-search-result:hover,
.kwc-search-result:focus-visible {
  background: var(--kwc-surface-hover-bg, rgba(255,255,255,0.12));
  outline: none;
}
.kwc-search-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: max(10.5px, calc(var(--kwc-message-font-size, 13px) * 0.82));
  color: var(--kwc-muted-color, rgba(255,255,255,0.7));
}
.kwc-search-result-preview {
  display: block;
  font-size: var(--kwc-message-font-size, 13px);
  line-height: 1.38;
  white-space: pre-wrap;
  word-break: break-word;
}
.kwc-search-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.kwc-search-modal-backdrop .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
}
.kwc-search-modal-backdrop .kwc-button:hover,
.kwc-search-modal-backdrop .kwc-button:focus-visible {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
}
.kwc-search-modal-backdrop .kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
}
.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-modal,
.kwc-search-modal-backdrop.kwc-theme-system .kwc-search-modal {
  color: var(--kwc-text-color, #111827);
}
.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-result,
.kwc-search-modal-backdrop.kwc-theme-system .kwc-search-result {
  color: var(--kwc-text-color, #111827);
  background: var(--kwc-surface-bg, rgba(15,23,42,0.045));
}
.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-result:hover,
.kwc-search-modal-backdrop.kwc-theme-system .kwc-search-result:hover {
  background: var(--kwc-surface-hover-bg, rgba(15,23,42,0.09));
}
@media (max-width: 520px) {
  .kwc-search-modal-backdrop {
    padding: 10px;
  }
  .kwc-search-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  .kwc-search-row,
  .kwc-search-options-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .kwc-search-row .kwc-button {
    width: 100%;
  }
  .kwc-search-results {
    min-height: 260px;
    max-height: 58vh;
  }
}

/* Direct message thread inbox */
.kwc-dm-button {
  position: relative;
  min-width: 34px;
}

.kwc-dm-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff5d6c;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.kwc-dm-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  padding: 12px;
}

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

.kwc-dm-head h3 {
  margin: 0;
}

.kwc-dm-layout {
  min-height: 420px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 10px;
}

.kwc-dm-sidebar,
.kwc-dm-conversation {
  min-height: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);
}

.kwc-dm-sidebar {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
}

.kwc-dm-player-results {
  max-height: 110px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kwc-dm-player,
.kwc-dm-thread {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 7px 8px;
  color: inherit;
  background: rgba(255,255,255,0.08);
  text-align: left;
  cursor: pointer;
}

.kwc-dm-player:hover,
.kwc-dm-thread:hover,
.kwc-dm-thread.kwc-active {
  background: rgba(130,190,255,0.22);
}

.kwc-dm-thread-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kwc-dm-thread-name {
  display: inline-block;
  max-width: calc(100% - 36px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  vertical-align: bottom;
}

.kwc-dm-thread-preview {
  display: block;
  margin-top: 2px;
  opacity: 0.72;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kwc-dm-thread-badge {
  float: right;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 5px;
  background: #ff5d6c;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

.kwc-dm-conversation {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kwc-dm-title {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-weight: 700;
}

.kwc-dm-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.kwc-dm-message {
  margin-bottom: 9px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255,255,255,0.075);
  word-break: break-word;
}

.kwc-dm-message.kwc-mine {
  background: rgba(130,190,255,0.16);
}

.kwc-dm-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  opacity: 0.72;
  font-size: 11px;
}

.kwc-dm-message-body {
  white-space: pre-wrap;
  line-height: 1.35;
}

.kwc-dm-compose {
  display: flex;
  gap: 6px;
  padding: 9px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.kwc-dm-empty {
  opacity: 0.72;
  text-align: center;
  padding: 20px 8px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .kwc-dm-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .kwc-dm-sidebar {
    max-height: 220px;
  }
  .kwc-dm-modal {
    max-height: calc(100vh - 18px);
  }
}

/* Direct message modal refinements: fill the current chat window and inherit chat settings. */
.kwc-dm-modal-backdrop {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: rgba(0,0,0,0.18) !important;
  color: var(--kwc-text-color, #fff) !important;
  font-family: inherit !important;
  font-size: var(--kwc-font-size, 13px) !important;
  text-shadow: var(--kwc-ui-text-shadow, none);
}

.kwc-dm-modal {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  color: var(--kwc-text-color, #fff) !important;
  background: rgba(var(--kwc-modal-bg-rgb, 29, 29, 36), var(--kwc-panel-opacity, 0.96)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  box-shadow: 0 8px 40px var(--kwc-shadow-color, rgba(0,0,0,0.45)) !important;
}

.kwc-dm-head {
  flex: 0 0 auto;
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #fff));
  text-shadow: var(--kwc-ui-text-shadow, none);
}

.kwc-dm-head h3 {
  font-size: max(16px, calc(var(--kwc-font-size, 13px) * 1.25));
}

.kwc-dm-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(118px, 34%) minmax(0, 1fr) !important;
  gap: 8px !important;
}

.kwc-dm-sidebar,
.kwc-dm-conversation {
  min-height: 0 !important;
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.055)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.10)) !important;
}

.kwc-dm-sidebar {
  padding: 7px !important;
  gap: 7px !important;
}

.kwc-dm-title {
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #fff));
  border-bottom-color: var(--kwc-border-color, rgba(255,255,255,0.10)) !important;
  font-size: var(--kwc-message-font-size, 13px);
  text-shadow: var(--kwc-ui-text-shadow, none);
}

.kwc-dm-player,
.kwc-dm-thread {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.08)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.08)) !important;
  font-family: inherit !important;
  font-size: var(--kwc-message-font-size, 13px) !important;
  text-shadow: var(--kwc-text-shadow, none);
}

.kwc-dm-player:hover,
.kwc-dm-thread:hover,
.kwc-dm-thread.kwc-active {
  background: var(--kwc-surface-hover-bg, rgba(130,190,255,0.22)) !important;
}

.kwc-dm-thread-name,
.kwc-dm-thread-preview {
  color: inherit;
  text-shadow: var(--kwc-text-shadow, none);
}

.kwc-dm-thread-preview {
  font-size: max(10px, calc(var(--kwc-message-font-size, 13px) * 0.84)) !important;
}

.kwc-dm-thread-badge,
.kwc-dm-badge {
  font-size: var(--kwc-badge-font-size, 10px) !important;
}

.kwc-dm-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 9px !important;
  color: var(--kwc-text-color, #fff) !important;
  font-size: var(--kwc-message-font-size, 13px) !important;
  line-height: 1.38 !important;
  text-shadow: var(--kwc-text-shadow, none);
}

.kwc-dm-message {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.075)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.07));
  text-shadow: var(--kwc-text-shadow, none);
}

.kwc-dm-message.kwc-mine {
  background: var(--kwc-surface-hover-bg, rgba(130,190,255,0.16)) !important;
}

.kwc-dm-message-meta {
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  font-size: max(10px, calc(var(--kwc-message-font-size, 13px) * 0.82)) !important;
  opacity: 1 !important;
}

.kwc-dm-message-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--kwc-message-font-size, 13px) !important;
  line-height: 1.38 !important;
}

.kwc-dm-compose {
  flex: 0 0 auto;
  border-top-color: var(--kwc-border-color, rgba(255,255,255,0.10)) !important;
}

.kwc-dm-compose .kwc-input,
.kwc-dm-sidebar .kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  font-family: inherit !important;
  font-size: var(--kwc-input-font-size, 13px) !important;
}

.kwc-dm-compose .kwc-button,
.kwc-dm-head .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  font-family: inherit !important;
  font-size: var(--kwc-button-font-size, 12px) !important;
}

.kwc-dm-compose .kwc-button:hover,
.kwc-dm-head .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
}

.kwc-dm-empty {
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  font-size: max(11px, calc(var(--kwc-message-font-size, 13px) * 0.9)) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-modal,
.kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-modal {
  color: var(--kwc-text-color, #111827) !important;
}

@media (max-width: 320px) {
  .kwc-dm-layout {
    grid-template-columns: 1fr !important;
  }
  .kwc-dm-sidebar {
    max-height: 150px !important;
  }
}

/* Direct message inbox refinements: compact player search, message hide, chat-like compose. */
.kwc-dm-new {
  width: 100%;
  flex: 0 0 auto;
}

.kwc-dm-search-panel {
  position: absolute;
  z-index: 4;
  left: 10px;
  top: 54px;
  width: min(360px, calc(100% - 20px));
  max-height: calc(100% - 64px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  color: var(--kwc-text-color, #fff);
  background: rgba(var(--kwc-modal-bg-rgb, 29, 29, 36), var(--kwc-panel-opacity, 0.98));
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  box-shadow: 0 8px 32px var(--kwc-shadow-color, rgba(0,0,0,0.45));
}

.kwc-dm-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #fff));
  text-shadow: var(--kwc-ui-text-shadow, none);
}

.kwc-dm-search-panel .kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  font-family: inherit !important;
  font-size: var(--kwc-input-font-size, 13px) !important;
}

.kwc-dm-search-panel .kwc-dm-player-results {
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}

.kwc-dm-message {
  position: relative;
}

.kwc-private-message-delete {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  background: transparent;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.kwc-dm-message:hover .kwc-private-message-delete,
.kwc-private-message-delete:focus {
  opacity: 1;
  pointer-events: auto;
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.16));
}

.kwc-dm-compose.kwc-row {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.kwc-dm-compose .kwc-input {
  flex: 1 1 auto;
  min-width: 0;
}

.kwc-dm-compose .kwc-button {
  flex: 0 0 auto;
}

.kwc-dm-emoji-panel {
  flex: 0 0 auto;
  max-height: min(220px, 40vh);
  overflow: hidden;
  padding: 7px;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10));
  background: var(--kwc-surface-bg, rgba(255,255,255,0.055));
}

.kwc-dm-emoji-panel .kwc-emoji-scroll {
  max-height: calc(min(220px, 40vh) - 14px);
  overflow-y: auto;
}

.kwc-dm-emoji-panel .kwc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(42px, var(--kwc-emoji-picker-size, 44px)), 1fr));
  gap: 6px;
}

.kwc-dm-emoji-panel .kwc-emoji-item {
  min-width: 0;
}

@media (max-width: 360px) {
  .kwc-dm-search-panel {
    left: 6px;
    right: 6px;
    top: 50px;
    width: auto;
  }
  .kwc-dm-compose.kwc-row {
    gap: 4px;
  }
}

/* Direct message thread sidebar: collapsible vertical rail. */
.kwc-dm-layout {
  grid-template-columns: 22px minmax(118px, 34%) minmax(0, 1fr) !important;
  align-items: stretch;
}

.kwc-dm-sidebar-toggle {
  width: 22px;
  min-width: 22px;
  height: 100%;
  padding: 0;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 10px;
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  background: var(--kwc-surface-bg, rgba(255,255,255,0.055));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: max(10px, calc(var(--kwc-button-font-size, 12px) * 0.92));
  text-shadow: var(--kwc-ui-text-shadow, none);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  user-select: none;
}

.kwc-dm-sidebar-toggle:hover {
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #fff));
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.16));
}

.kwc-dm-sidebar-toggle-text {
  white-space: nowrap;
  transform: rotate(180deg);
}

.kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-layout {
  grid-template-columns: 22px 0 minmax(0, 1fr) !important;
  gap: 6px !important;
}

.kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
}

.kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-search-panel {
  left: 36px;
  width: min(360px, calc(100% - 46px));
}

/* DM emoji picker should use the normal chat emoji picker layout and settings. */
.kwc-dm-emoji-panel.kwc-emoji-panel {
  flex: 0 0 auto;
  height: var(--kwc-emoji-panel-height, 180px);
  max-height: min(420px, 45vh);
  min-height: var(--kwc-emoji-panel-min-height, 56px);
  overflow: hidden;
  padding: 7px;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10));
  background: var(--kwc-surface-bg, rgba(255,255,255,0.055));
}

.kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-scroll {
  max-height: none;
  height: 100%;
  overflow-y: auto;
}

.kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(42px, var(--kwc-emoji-picker-size, 44px)), 1fr));
  gap: 6px;
}

@media (max-width: 360px) {
  .kwc-dm-layout,
  .kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-layout {
    grid-template-columns: 20px minmax(0, 1fr) !important;
  }
  .kwc-dm-sidebar {
    display: none !important;
  }
  .kwc-dm-sidebar-toggle {
    width: 20px;
    min-width: 20px;
  }
}

/* DM final layout guard: keep the conversation list rail visible and make the picker inherit normal chat settings. */
.kwc-dm-modal {
  position: relative !important;
  overflow: hidden !important;
}
.kwc-dm-modal .kwc-dm-layout {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(112px, 34%) minmax(0, 1fr) !important;
  padding-left: 26px !important;
  gap: 8px !important;
}
.kwc-dm-modal .kwc-dm-sidebar-toggle {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 22px !important;
  min-width: 22px !important;
  height: auto !important;
  z-index: 20 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  box-shadow: 0 2px 10px var(--kwc-shadow-color, rgba(0,0,0,0.35)) !important;
}
.kwc-dm-modal .kwc-dm-sidebar-toggle-text {
  transform: rotate(180deg) !important;
  white-space: nowrap !important;
}
.kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-layout {
  grid-template-columns: 0 minmax(0, 1fr) !important;
  padding-left: 26px !important;
}
.kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-sidebar {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel {
  color: var(--kwc-text-color, #fff) !important;
  font-family: inherit !important;
  font-size: var(--kwc-font-size, 13px) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.055)) !important;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10)) !important;
  padding: 7px !important;
  overflow: hidden !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-scroll {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-grid {
  grid-template-columns: repeat(auto-fill, minmax(max(42px, var(--kwc-emoji-picker-size, 44px)), 1fr)) !important;
  gap: 6px !important;
}
@media (max-width: 360px) {
  .kwc-dm-modal .kwc-dm-layout,
  .kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-layout {
    grid-template-columns: 0 minmax(0, 1fr) !important;
    padding-left: 24px !important;
  }
  .kwc-dm-modal:not(.kwc-dm-sidebar-collapsed) .kwc-dm-layout {
    grid-template-columns: minmax(86px, 38%) minmax(0, 1fr) !important;
  }
  .kwc-dm-modal .kwc-dm-sidebar-toggle {
    width: 20px !important;
    min-width: 20px !important;
  }
}

/* DM sidebar/emoji final overrides. Keep the thread rail thin and make the DM emoji picker match the normal picker grid. */
.kwc-dm-modal .kwc-dm-layout {
  padding-left: 16px !important;
}
.kwc-dm-modal .kwc-dm-sidebar-toggle {
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
  overflow: hidden !important;
}
.kwc-dm-modal .kwc-dm-sidebar-toggle-text {
  transform: none !important;
  white-space: nowrap !important;
  display: block !important;
  line-height: 1 !important;
  font-size: 10px !important;
}
.kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-layout {
  padding-left: 16px !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel {
  height: var(--kwc-emoji-panel-height, 180px) !important;
  min-height: var(--kwc-emoji-panel-min-height, 56px) !important;
  max-height: var(--kwc-emoji-panel-height, 180px) !important;
  box-sizing: border-box !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-scroll {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--kwc-emoji-picker-size, 44px) + 20px), 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 7px !important;
  box-sizing: border-box !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-item {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: calc(var(--kwc-emoji-picker-size, 44px) + 28px) !important;
}
.kwc-dm-modal .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-item img {
  width: var(--kwc-emoji-picker-size, 44px) !important;
  height: var(--kwc-emoji-picker-size, 44px) !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
}

/* DM view mode: the header button switches between list+conversation and current conversation only. */
.kwc-dm-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.kwc-dm-head-actions .kwc-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.kwc-dm-modal .kwc-dm-sidebar-toggle {
  display: none !important;
}

.kwc-dm-modal .kwc-dm-layout,
.kwc-dm-modal.kwc-dm-sidebar-collapsed .kwc-dm-layout,
.kwc-dm-modal.kwc-dm-focus-mode .kwc-dm-layout {
  padding-left: 0 !important;
  gap: 8px !important;
}

.kwc-dm-modal .kwc-dm-layout,
.kwc-dm-modal:not(.kwc-dm-focus-mode) .kwc-dm-layout {
  grid-template-columns: minmax(118px, 34%) minmax(0, 1fr) !important;
}

.kwc-dm-modal.kwc-dm-focus-mode .kwc-dm-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

.kwc-dm-modal.kwc-dm-focus-mode .kwc-dm-sidebar {
  display: none !important;
}

.kwc-dm-modal.kwc-dm-focus-mode .kwc-dm-conversation {
  grid-column: 1 / -1;
}

.kwc-dm-modal.kwc-dm-focus-mode .kwc-dm-search-panel,
.kwc-dm-modal .kwc-dm-search-panel {
  left: 10px !important;
  width: min(360px, calc(100% - 20px)) !important;
}

@media (max-width: 360px) {
  .kwc-dm-modal .kwc-dm-layout,
  .kwc-dm-modal:not(.kwc-dm-focus-mode) .kwc-dm-layout,
  .kwc-dm-modal.kwc-dm-focus-mode .kwc-dm-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 0 !important;
  }
  .kwc-dm-modal:not(.kwc-dm-focus-mode) .kwc-dm-sidebar {
    display: flex !important;
    max-height: 160px !important;
  }
}

/* DM list/detail mode: show either the thread list or the selected conversation, never both. */
.kwc-dm-modal .kwc-dm-layout,
.kwc-dm-modal:not(.kwc-dm-thread-mode) .kwc-dm-layout,
.kwc-dm-modal.kwc-dm-thread-mode .kwc-dm-layout {
  display: block !important;
  grid-template-columns: none !important;
  padding-left: 0 !important;
  gap: 0 !important;
}

.kwc-dm-modal .kwc-dm-sidebar-toggle,
.kwc-dm-modal #kwc-dm-view-toggle {
  display: none !important;
}

.kwc-dm-modal:not(.kwc-dm-thread-mode) .kwc-dm-sidebar {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}

.kwc-dm-modal:not(.kwc-dm-thread-mode) .kwc-dm-conversation {
  display: none !important;
}

.kwc-dm-modal.kwc-dm-thread-mode .kwc-dm-sidebar {
  display: none !important;
}

.kwc-dm-modal.kwc-dm-thread-mode .kwc-dm-conversation {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}

.kwc-dm-title.kwc-dm-title-back {
  cursor: pointer;
  user-select: none;
}

.kwc-dm-title.kwc-dm-title-back:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.10));
}

.kwc-dm-title.kwc-dm-title-back:focus {
  outline: 1px solid var(--kwc-focus-color, rgba(130,190,255,0.65));
  outline-offset: -1px;
}

.kwc-dm-modal .kwc-dm-thread-list {
  min-height: 0;
  flex: 1 1 auto;
}

/* DM list/detail sizing guard for BlueMap/PIP iframes.
   The inbox has only one visible pane at a time; make that pane fill the
   available chat iframe instead of shrinking to its content height. */
.kwc-dm-modal-backdrop {
  min-height: 0 !important;
  overflow: hidden !important;
}
.kwc-dm-modal {
  min-height: 0 !important;
  overflow: hidden !important;
}
.kwc-dm-modal .kwc-dm-layout,
.kwc-dm-modal:not(.kwc-dm-thread-mode) .kwc-dm-layout,
.kwc-dm-modal.kwc-dm-thread-mode .kwc-dm-layout {
  flex: 1 1 auto !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.kwc-dm-modal:not(.kwc-dm-thread-mode) .kwc-dm-sidebar,
.kwc-dm-modal.kwc-dm-thread-mode .kwc-dm-conversation {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.kwc-dm-modal:not(.kwc-dm-thread-mode) .kwc-dm-sidebar {
  display: flex !important;
  flex-direction: column !important;
}
.kwc-dm-modal .kwc-dm-thread-list {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}
.kwc-dm-modal.kwc-dm-thread-mode .kwc-dm-messages {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}


/* DM final emoji setting inheritance.
   DM modals live outside #kwc-root, so the variables are copied by JS and used here directly. */
.kwc-dm-modal-backdrop .kwc-custom-emoji {
  width: auto;
  height: auto;
}
.kwc-dm-modal-backdrop .kwc-dm-message-body .kwc-custom-emoji,
.kwc-dm-modal-backdrop .kwc-dm-thread-preview .kwc-custom-emoji {
  max-width: 1024px;
  max-height: 1024px;
}
.kwc-dm-modal-backdrop .kwc-dm-emoji-panel.kwc-emoji-panel {
  height: var(--kwc-emoji-panel-height, 180px) !important;
  min-height: var(--kwc-emoji-panel-min-height, calc(var(--kwc-emoji-picker-size, 44px) + 74px)) !important;
  max-height: var(--kwc-emoji-panel-height, 180px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}
.kwc-dm-modal-backdrop .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}
.kwc-dm-modal-backdrop .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--kwc-emoji-picker-size, 44px) + 20px), 1fr)) !important;
  grid-auto-rows: max-content !important;
  gap: 7px !important;
  align-content: start !important;
  align-items: start !important;
}
.kwc-dm-modal-backdrop .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-item {
  min-width: 0 !important;
  min-height: calc(var(--kwc-emoji-picker-size, 44px) + 28px) !important;
  box-sizing: border-box !important;
}
.kwc-dm-modal-backdrop .kwc-dm-emoji-panel.kwc-emoji-panel .kwc-emoji-item img {
  width: var(--kwc-emoji-picker-size, 44px) !important;
  height: var(--kwc-emoji-picker-size, 44px) !important;
  flex: 0 0 auto !important;
}





/* DM detached modal visual parity.
   DM inbox/search is mounted outside #kwc-root, so root-scoped light-theme
   button/input/surface rules do not reach it. Keep all DM buttons outlined and
   make the light-theme player search/inbox surfaces use the same readable slate
   palette as the main chat window. */
.kwc-dm-modal-backdrop .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: var(--kwc-button-font-size, 12px) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}

.kwc-dm-modal-backdrop .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
}

.kwc-dm-modal-backdrop .kwc-button:focus-visible,
.kwc-dm-modal-backdrop .kwc-input:focus {
  outline: 2px solid rgba(37, 99, 235, 0.22) !important;
  outline-offset: 2px !important;
  border-color: rgba(37, 99, 235, 0.58) !important;
}

.kwc-dm-modal-backdrop .kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: var(--kwc-input-font-size, 13px) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
}

.kwc-dm-modal-backdrop .kwc-input::placeholder {
  color: var(--kwc-muted-color, rgba(255,255,255,0.72)) !important;
  opacity: 1 !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-modal {
  background: rgba(var(--kwc-modal-bg-rgb, 248,250,252), var(--kwc-panel-opacity, 0.96)) !important;
  color: var(--kwc-text-color, #111827) !important;
  border-color: rgba(148, 163, 184, 0.52) !important;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.20) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-head,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-title,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-search-head,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-search-head strong {
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #111827)) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-sidebar,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-conversation,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-search-panel,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-emoji-panel {
  color: var(--kwc-text-color, #111827) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.82)) !important;
  border-color: rgba(148, 163, 184, 0.50) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-search-panel {
  background: rgba(var(--kwc-modal-bg-rgb, 248,250,252), 0.98) !important;
  box-shadow: 0 12px 34px rgba(15,23,42,0.20) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-player,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-thread,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-message {
  color: var(--kwc-text-color, #111827) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.78)) !important;
  border-color: rgba(148, 163, 184, 0.48) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-player:hover,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-thread:hover,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-thread.kwc-active,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-message.kwc-mine {
  background: var(--kwc-surface-hover-bg, rgba(226,232,240,0.96)) !important;
  border-color: rgba(100, 116, 139, 0.54) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-button {
  color: var(--kwc-button-text, #1e293b) !important;
  background: var(--kwc-button-bg, rgba(241,245,249,0.96)) !important;
  border-color: rgba(148, 163, 184, 0.58) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.10) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(226,232,240,0.98)) !important;
  border-color: rgba(100, 116, 139, 0.62) !important;
  box-shadow: 0 2px 7px rgba(15,23,42,0.14) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-input {
  color: var(--kwc-text-color, #111827) !important;
  background: var(--kwc-input-bg, rgba(255,255,255,0.98)) !important;
  border-color: rgba(148, 163, 184, 0.58) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-thread-preview,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-message-meta,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-empty {
  color: var(--kwc-muted-color, #64748b) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-private-message-delete {
  color: var(--kwc-muted-color, #64748b) !important;
  border: 1px solid transparent !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-private-message-delete:hover,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-private-message-delete:focus {
  color: var(--kwc-text-color, #111827) !important;
  background: var(--kwc-button-hover-bg, rgba(226,232,240,0.98)) !important;
  border-color: rgba(148, 163, 184, 0.58) !important;
}

@media (prefers-color-scheme: light) {
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-modal {
    background: rgba(var(--kwc-modal-bg-rgb, 248,250,252), var(--kwc-panel-opacity, 0.96)) !important;
    color: var(--kwc-text-color, #111827) !important;
    border-color: rgba(148, 163, 184, 0.52) !important;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.20) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-head,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-title,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-search-head,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-search-head strong {
    color: var(--kwc-ui-text-color, var(--kwc-text-color, #111827)) !important;
    text-shadow: var(--kwc-ui-text-shadow, none) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-sidebar,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-conversation,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-search-panel,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-emoji-panel {
    color: var(--kwc-text-color, #111827) !important;
    background: var(--kwc-surface-bg, rgba(255,255,255,0.82)) !important;
    border-color: rgba(148, 163, 184, 0.50) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-search-panel {
    background: rgba(var(--kwc-modal-bg-rgb, 248,250,252), 0.98) !important;
    box-shadow: 0 12px 34px rgba(15,23,42,0.20) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-player,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-thread,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-message {
    color: var(--kwc-text-color, #111827) !important;
    background: var(--kwc-surface-bg, rgba(255,255,255,0.78)) !important;
    border-color: rgba(148, 163, 184, 0.48) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-player:hover,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-thread:hover,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-thread.kwc-active,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-message.kwc-mine {
    background: var(--kwc-surface-hover-bg, rgba(226,232,240,0.96)) !important;
    border-color: rgba(100, 116, 139, 0.54) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-button {
    color: var(--kwc-button-text, #1e293b) !important;
    background: var(--kwc-button-bg, rgba(241,245,249,0.96)) !important;
    border-color: rgba(148, 163, 184, 0.58) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.10) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-button:hover {
    background: var(--kwc-button-hover-bg, rgba(226,232,240,0.98)) !important;
    border-color: rgba(100, 116, 139, 0.62) !important;
    box-shadow: 0 2px 7px rgba(15,23,42,0.14) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-input {
    color: var(--kwc-text-color, #111827) !important;
    background: var(--kwc-input-bg, rgba(255,255,255,0.98)) !important;
    border-color: rgba(148, 163, 184, 0.58) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-thread-preview,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-message-meta,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-empty {
    color: var(--kwc-muted-color, #64748b) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-private-message-delete {
    color: var(--kwc-muted-color, #64748b) !important;
    border: 1px solid transparent !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-private-message-delete:hover,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-private-message-delete:focus {
    color: var(--kwc-text-color, #111827) !important;
    background: var(--kwc-button-hover-bg, rgba(226,232,240,0.98)) !important;
    border-color: rgba(148, 163, 184, 0.58) !important;
  }
}

/* DM/custom emoji final inheritance.
   DM modals are detached from #kwc-root, so JS copies --kwc-emoji-render-size here.
   Force both public and DM custom emojis to use the same render-size-px setting and
   keep pointer events enabled so the emoji display-name tooltip can appear. */
.kwc-custom-emoji {
  width: var(--kwc-emoji-render-size, 32px) !important;
  height: var(--kwc-emoji-render-size, 32px) !important;
  pointer-events: auto;
}
.kwc-dm-modal-backdrop .kwc-custom-emoji,
.kwc-dm-modal-backdrop .kwc-dm-message-body .kwc-custom-emoji,
.kwc-dm-modal-backdrop .kwc-dm-thread-preview .kwc-custom-emoji {
  width: var(--kwc-emoji-render-size, 32px) !important;
  height: var(--kwc-emoji-render-size, 32px) !important;
  max-width: 1024px;
  max-height: 1024px;
  pointer-events: auto;
}

/* DM compose final sync with public chat settings.
   Hide the detached DM emoji panel and buttons completely when the shared feature is off. */
.kwc-dm-modal-backdrop .kwc-dm-emoji-panel.kwc-hidden,
.kwc-dm-modal-backdrop .kwc-dm-emoji-panel.kwc-emoji-panel.kwc-hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}
.kwc-dm-modal-backdrop .kwc-dm-emoji-button.kwc-hidden,
.kwc-dm-modal-backdrop .kwc-dm-upload.kwc-hidden {
  display: none !important;
}
.kwc-dm-modal.kwc-dm-drag-over {
  outline: 2px dashed rgba(130,190,255,0.75);
  outline-offset: -8px;
}

/* DM window parity patch: header drag affordance, emoji resize handle, and edge toast. */
.kwc-dm-modal .kwc-dm-head {
  cursor: move;
  user-select: none;
  touch-action: none;
}
.kwc-dm-modal .kwc-dm-head button,
.kwc-dm-modal .kwc-dm-head input,
.kwc-dm-modal .kwc-dm-head select,
.kwc-dm-modal .kwc-dm-head textarea,
.kwc-dm-modal .kwc-dm-head a {
  cursor: pointer;
}
.kwc-dm-modal .kwc-dm-emoji-resize {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: 7px;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
  position: relative;
}
.kwc-dm-modal .kwc-dm-emoji-resize::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--kwc-border-color, rgba(255,255,255,0.24));
  opacity: 0.7;
}
.kwc-dm-modal .kwc-dm-emoji-resize:hover::before,
.kwc-dm-modal .kwc-dm-emoji-resize:focus::before {
  opacity: 1;
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.36));
}
.kwc-dm-modal .kwc-dm-emoji-resize.kwc-hidden,
.kwc-dm-modal-backdrop .kwc-dm-emoji-resize.kwc-hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.kwc-dm-conversation {
  position: relative;
}
.kwc-dm-edge-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: calc(100% - 24px);
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--kwc-ui-text-color, #fff);
  background: var(--kwc-button-bg, rgba(0,0,0,0.62));
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16));
  box-shadow: 0 4px 14px var(--kwc-shadow-color, rgba(0,0,0,0.32));
  font-size: max(11px, calc(var(--kwc-font-size, 13px) * 0.86));
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.96;
}
.kwc-dm-edge-toast.kwc-dm-edge-top {
  top: calc(var(--kwc-font-size, 13px) + 18px);
}
.kwc-dm-edge-toast.kwc-dm-edge-bottom {
  bottom: 48px;
}

/* DM retention badge in the title bar */
.kwc-dm-main-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.kwc-dm-retention {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 2px 7px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  color: var(--kwc-muted-color, #b8c0cc);
  font-size: max(10px, calc(var(--kwc-font-size, 13px) * 0.78));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-retention,
.kwc-theme-light .kwc-dm-modal .kwc-dm-retention {
  border-color: rgba(71, 85, 105, 0.30);
  background: rgba(241, 245, 249, 0.96);
  color: #475569;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08);
}
@media (prefers-color-scheme: light) {
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-retention {
    border-color: rgba(71, 85, 105, 0.30);
    background: rgba(241, 245, 249, 0.96);
    color: #475569;
    box-shadow: 0 1px 2px rgba(15,23,42,0.08);
  }
}

/* Light theme contrast audit patch.
   Keep dark theme unchanged, but make light/system-light detached UI, media
   controls, and edge toasts use readable text, visible outlines, and stronger
   surfaces. */
#kwc-root.kwc-theme-light .kwc-history-end {
  color: #0f172a !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(51,65,85,0.42) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-button,
#kwc-root.kwc-theme-light .kwc-mini-action,
#kwc-root.kwc-theme-light .kwc-command-inline-item,
#kwc-root.kwc-theme-light .kwc-jump-latest,
#kwc-root.kwc-theme-light .kwc-search-float,
#kwc-root.kwc-theme-light .kwc-emoji-tab,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tab {
  color: #1e293b !important;
  background: rgba(241,245,249,0.97) !important;
  border: 1px solid rgba(100,116,139,0.48) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.12) !important;
  text-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-button:hover,
#kwc-root.kwc-theme-light .kwc-mini-action:hover,
#kwc-root.kwc-theme-light .kwc-command-inline-item:hover,
#kwc-root.kwc-theme-light .kwc-jump-latest:hover,
#kwc-root.kwc-theme-light .kwc-search-float:hover,
#kwc-root.kwc-theme-light .kwc-emoji-tab:hover,
#kwc-root.kwc-theme-light .kwc-emoji-tab.kwc-active,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tab:hover,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tab.kwc-active {
  color: #0f172a !important;
  background: rgba(226,232,240,0.98) !important;
  border-color: rgba(71,85,105,0.62) !important;
  box-shadow: 0 2px 7px rgba(15,23,42,0.16) !important;
}

#kwc-root.kwc-theme-light .kwc-input,
#kwc-root.kwc-theme-light .kwc-pref-input,
#kwc-root.kwc-theme-light .kwc-pref-select,
#kwc-root.kwc-theme-light .kwc-pref-color {
  color: #111827 !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(100,116,139,0.44) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.05) !important;
  text-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-input::placeholder,
#kwc-root.kwc-theme-light .kwc-pref-input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

#kwc-root.kwc-theme-light .kwc-media-card,
#kwc-root.kwc-theme-light .kwc-media-error,
#kwc-root.kwc-theme-light .kwc-emoji-panel,
#kwc-root.kwc-theme-light .kwc-emoji-item,
#kwc-root.kwc-theme-light .kwc-admin-grid,
#kwc-root.kwc-theme-light .kwc-admin-list,
#kwc-root.kwc-theme-light .kwc-admin-emoji-tools,
#kwc-root.kwc-theme-light .kwc-admin-emoji-item,
#kwc-root.kwc-theme-light .kwc-pref-fieldset,
#kwc-root.kwc-theme-light .kwc-pref-preview,
#kwc-root.kwc-theme-light .kwc-pinned-item,
#kwc-root.kwc-theme-light .kwc-pinned-open {
  color: #111827 !important;
  background: rgba(255,255,255,0.90) !important;
  border-color: rgba(100,116,139,0.38) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.08) !important;
  text-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-media-load {
  color: #0f172a !important;
  background: rgba(241,245,249,0.98) !important;
  border: 1px solid rgba(71,85,105,0.52) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.14) !important;
  text-shadow: none !important;
}

#kwc-root.kwc-theme-light .kwc-media-load:hover {
  background: rgba(226,232,240,1) !important;
  border-color: rgba(51,65,85,0.66) !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-edge-toast {
  color: #0f172a !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(51,65,85,0.42) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-modal,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-result,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-search-options {
  color: #111827 !important;
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(100,116,139,0.40) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.12) !important;
  text-shadow: none !important;
}

.kwc-search-modal-backdrop.kwc-theme-light .kwc-button,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-input,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-pref-input,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-pref-select {
  color: #111827 !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(100,116,139,0.48) !important;
  text-shadow: none !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-history-end {
    color: #0f172a !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(51,65,85,0.42) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  #kwc-root.kwc-theme-system .kwc-button,
  #kwc-root.kwc-theme-system .kwc-mini-action,
  #kwc-root.kwc-theme-system .kwc-media-load,
  #kwc-root.kwc-theme-system .kwc-command-inline-item,
  #kwc-root.kwc-theme-system .kwc-jump-latest,
  #kwc-root.kwc-theme-system .kwc-search-float,
  #kwc-root.kwc-theme-system .kwc-emoji-tab,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-tab {
    color: #1e293b !important;
    background: rgba(241,245,249,0.97) !important;
    border: 1px solid rgba(100,116,139,0.48) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.12) !important;
    text-shadow: none !important;
  }

  #kwc-root.kwc-theme-system .kwc-input,
  #kwc-root.kwc-theme-system .kwc-pref-input,
  #kwc-root.kwc-theme-system .kwc-pref-select,
  #kwc-root.kwc-theme-system .kwc-pref-color {
    color: #111827 !important;
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid rgba(100,116,139,0.44) !important;
    text-shadow: none !important;
  }

  #kwc-root.kwc-theme-system .kwc-media-card,
  #kwc-root.kwc-theme-system .kwc-media-error,
  #kwc-root.kwc-theme-system .kwc-emoji-panel,
  #kwc-root.kwc-theme-system .kwc-emoji-item,
  #kwc-root.kwc-theme-system .kwc-admin-grid,
  #kwc-root.kwc-theme-system .kwc-admin-list,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-tools,
  #kwc-root.kwc-theme-system .kwc-admin-emoji-item,
  #kwc-root.kwc-theme-system .kwc-pref-fieldset,
  #kwc-root.kwc-theme-system .kwc-pref-preview,
  #kwc-root.kwc-theme-system .kwc-pinned-item,
  #kwc-root.kwc-theme-system .kwc-pinned-open {
    color: #111827 !important;
    background: rgba(255,255,255,0.90) !important;
    border-color: rgba(100,116,139,0.38) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08) !important;
    text-shadow: none !important;
  }

  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-edge-toast {
    color: #0f172a !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(51,65,85,0.42) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}



/* Loaded media players intentionally use the same dark/default styles in every theme.
   Do not recolor .kwc-video-wrap/.kwc-audio-wrap/.kwc-youtube-wrap for light mode;
   only the pre-load open buttons/cards are adjusted below. */

/* Light theme media open trigger contrast guard.
   The loaded media viewer stays dark, but the pre-load "open/play" trigger is
   just a normal button/card and can disappear on light surfaces, especially in
   detached DM/search modals that are outside #kwc-root. Keep the trigger area
   dark and strongly outlined for light and system-light themes. */
#kwc-root.kwc-theme-light .kwc-media-card,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-media-card,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-media-card {
  color: #e5edf7 !important;
  background: linear-gradient(180deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98)) !important;
  border: 1px solid rgba(15,23,42,0.62) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

#kwc-root.kwc-theme-light .kwc-media-load,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-media-load,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-media-load {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, #475569, #1e293b) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.55) !important;
}

#kwc-root.kwc-theme-light .kwc-media-load:hover,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-media-load:hover,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-media-load:hover {
  color: #ffffff !important;
  background: linear-gradient(180deg, #64748b, #334155) !important;
  border-color: rgba(255,255,255,0.42) !important;
  box-shadow: 0 3px 12px rgba(15,23,42,0.34), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

#kwc-root.kwc-theme-light .kwc-media-load:focus-visible,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-media-load:focus-visible,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-media-load:focus-visible {
  outline: 2px solid rgba(37,99,235,0.55) !important;
  outline-offset: 2px !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-media-card,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-media-card,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-media-card {
    color: #e5edf7 !important;
    background: linear-gradient(180deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98)) !important;
    border: 1px solid rgba(15,23,42,0.62) !important;
    box-shadow: 0 2px 10px rgba(15,23,42,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }

  #kwc-root.kwc-theme-system .kwc-media-load,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-media-load,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-media-load {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #475569, #1e293b) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.55) !important;
  }

  #kwc-root.kwc-theme-system .kwc-media-load:hover,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-media-load:hover,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-media-load:hover {
    color: #ffffff !important;
    background: linear-gradient(180deg, #64748b, #334155) !important;
    border-color: rgba(255,255,255,0.42) !important;
    box-shadow: 0 3px 12px rgba(15,23,42,0.34), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  }

  #kwc-root.kwc-theme-system .kwc-media-load:focus-visible,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-media-load:focus-visible,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-media-load:focus-visible {
    outline: 2px solid rgba(37,99,235,0.55) !important;
    outline-offset: 2px !important;
  }
}

/* DM identity toggle parity with public chat.
   DM modal is detached from #kwc-root, so the normal sender identity hint styles
   do not reach DM thread/header/message names. */
.kwc-dm-modal-backdrop .kwc-dm-identity.kwc-sender-has-real,
.kwc-dm-modal-backdrop .kwc-sender.kwc-sender-has-real {
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 0;
  pointer-events: auto;
}

.kwc-dm-modal-backdrop .kwc-dm-identity.kwc-sender-has-real:focus-visible,
.kwc-dm-modal-backdrop .kwc-sender.kwc-sender-has-real:focus-visible {
  outline: 2px solid var(--kwc-link-color, rgba(37,99,235,0.55));
  outline-offset: 2px;
  border-radius: 4px;
}

.kwc-dm-title .kwc-dm-title-name,
.kwc-dm-thread-name.kwc-dm-identity {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Strong light-theme visibility for click-to-load media triggers.
   This targets the unloaded/open buttons/cards, not the actual media viewer,
   which intentionally remains dark after it opens. */
#kwc-root.kwc-theme-light .kwc-media-card,
#kwc-root.kwc-theme-light .kwc-social-card,
#kwc-root.kwc-theme-light .kwc-youtube-card,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-media-card,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-social-card,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-youtube-card,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-media-card,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-social-card,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-youtube-card {
  background-color: #0f172a !important;
  border: 1px solid rgba(15,23,42,0.76) !important;
  box-shadow: 0 3px 12px rgba(15,23,42,0.28), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

#kwc-root.kwc-theme-light .kwc-media-load.kwc-button,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-media-load.kwc-button,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-media-load.kwc-button {
  color: #ffffff !important;
  background: linear-gradient(180deg, #64748b, #1e293b) !important;
  border: 1px solid rgba(255,255,255,0.44) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.36), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.70) !important;
}

#kwc-root.kwc-theme-light .kwc-media-load.kwc-button:hover,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-media-load.kwc-button:hover,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-media-load.kwc-button:hover {
  background: linear-gradient(180deg, #94a3b8, #334155) !important;
  border-color: rgba(255,255,255,0.62) !important;
}

#kwc-root.kwc-theme-light .kwc-youtube-play,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-youtube-play,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-youtube-play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(15,23,42,0.78) !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.80) !important;
}

#kwc-root.kwc-theme-light .kwc-youtube-label,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-youtube-label,
.kwc-search-modal-backdrop.kwc-theme-light .kwc-youtube-label {
  color: #ffffff !important;
  background: rgba(15,23,42,0.78) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  border-radius: 7px !important;
  padding: 3px 7px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.80) !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-media-card,
  #kwc-root.kwc-theme-system .kwc-social-card,
  #kwc-root.kwc-theme-system .kwc-youtube-card,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-media-card,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-social-card,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-youtube-card,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-media-card,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-social-card,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-youtube-card {
    background-color: #0f172a !important;
    border: 1px solid rgba(15,23,42,0.76) !important;
    box-shadow: 0 3px 12px rgba(15,23,42,0.28), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }

  #kwc-root.kwc-theme-system .kwc-media-load.kwc-button,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-media-load.kwc-button,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-media-load.kwc-button {
    color: #ffffff !important;
    background: linear-gradient(180deg, #64748b, #1e293b) !important;
    border: 1px solid rgba(255,255,255,0.44) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.36), inset 0 1px 0 rgba(255,255,255,0.22) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.70) !important;
  }

  #kwc-root.kwc-theme-system .kwc-youtube-play,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-youtube-play,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-youtube-play {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: rgba(15,23,42,0.78) !important;
    border: 1px solid rgba(255,255,255,0.42) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.20) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.80) !important;
  }

  #kwc-root.kwc-theme-system .kwc-youtube-label,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-youtube-label,
  .kwc-search-modal-backdrop.kwc-theme-system .kwc-youtube-label {
    color: #ffffff !important;
    background: rgba(15,23,42,0.78) !important;
    border: 1px solid rgba(255,255,255,0.32) !important;
    border-radius: 7px !important;
    padding: 3px 7px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.80) !important;
  }
}

/* Group chat first-pass UI */
.kwc-group-modal .kwc-dm-main-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.kwc-group-modal .kwc-group-invites {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

.kwc-group-modal .kwc-group-invite {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--kwc-border, rgba(255,255,255,0.14));
  background: var(--kwc-surface-2, rgba(255,255,255,0.06));
  font-size: 12px;
}

.kwc-group-modal .kwc-group-invite-actions,
.kwc-group-modal .kwc-group-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.kwc-group-modal .kwc-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kwc-group-modal .kwc-group-title-label {
  font-weight: 700;
}

.kwc-group-modal .kwc-group-title-meta,
.kwc-group-modal .kwc-group-room-meta,
.kwc-group-modal .kwc-group-join-hint {
  opacity: 0.74;
  font-size: 11px;
}

.kwc-group-modal .kwc-group-room-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kwc-group-modal .kwc-group-room-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--kwc-accent, #60a5fa);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.kwc-group-modal .kwc-group-message-hidden {
  opacity: 0.5;
}

#kwc-root.kwc-theme-light .kwc-group-modal .kwc-group-invite,
.kwc-group-modal-backdrop.kwc-theme-light .kwc-group-invite {
  background: #ffffff;
  border-color: rgba(15,23,42,0.18);
  color: #0f172a;
}

/* Group chat room form */
.kwc-group-form-modal {
  width: min(420px, calc(100vw - 32px));
}
.kwc-group-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 9px 0;
  font-size: 12px;
}
.kwc-group-form-field > span {
  opacity: 0.82;
  font-weight: 700;
}
.kwc-group-form-actions {
  justify-content: flex-end;
  margin-top: 12px;
}
.kwc-group-room-icon {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-form-modal,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-modal {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15,23,42,0.18);
}
@media (prefers-color-scheme: light) {
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-form-modal,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-modal {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15,23,42,0.18);
  }
}

/* Group chat fixes: list/detail mode and compact room form */
.kwc-group-modal.kwc-dm-thread-mode .kwc-dm-conversation {
  display: flex !important;
}
.kwc-group-modal.kwc-dm-thread-mode .kwc-dm-sidebar {
  display: none !important;
}
.kwc-group-form-modal {
  width: min(360px, calc(100vw - 24px)) !important;
  padding: 12px !important;
  box-sizing: border-box;
}
.kwc-group-form-modal .kwc-group-form-head h3,
.kwc-group-form-modal h3 {
  margin: 0 0 8px !important;
  font-size: 15px !important;
  line-height: 1.2;
}
.kwc-group-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.kwc-group-form-field {
  gap: 3px !important;
  margin: 0 !important;
}
.kwc-group-form-field > span {
  font-size: 11px;
}
.kwc-group-form-field .kwc-input,
.kwc-group-form-field select.kwc-input {
  min-height: 30px;
  padding: 6px 8px;
  box-sizing: border-box;
}
.kwc-group-form-actions {
  margin-top: 9px !important;
}

/* DM/group compose parity with normal chat: upload progress and picker placement. */
.kwc-dm-modal .kwc-upload-progress {
  flex: 0 0 auto;
  margin: 6px 10px 10px;
}

.kwc-dm-modal .kwc-upload-progress-bar > div,
.kwc-upload-progress-bar > div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: rgba(130,190,255,0.9);
}

.kwc-dm-modal .kwc-dm-compose + .kwc-dm-emoji-panel.kwc-emoji-panel {
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10));
  border-bottom: 0;
}

.kwc-dm-modal .kwc-dm-compose {
  order: 20;
}

.kwc-dm-modal .kwc-dm-emoji-panel {
  order: 21;
}

.kwc-dm-modal .kwc-upload-progress {
  order: 22;
}


/* Group chat polish patch: invite confirmation, bottom-edge toast parity, compact room form, and light-theme readability. */
.kwc-group-form-backdrop {
  align-items: center !important;
  justify-content: center !important;
}
.kwc-group-form-modal {
  width: min(320px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 32px) !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.kwc-group-form-head {
  display: flex !important;
  align-items: center !important;
  min-height: 0 !important;
}
.kwc-group-form-modal .kwc-group-form-head h3,
.kwc-group-form-modal h3 {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.kwc-group-form-grid {
  gap: 6px !important;
}
.kwc-group-form-field {
  gap: 3px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.kwc-group-form-field > span {
  color: var(--kwc-muted-color, rgba(255,255,255,0.78)) !important;
  opacity: 1 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.kwc-group-form-field .kwc-input,
.kwc-group-form-field select.kwc-input {
  min-height: 28px !important;
  padding: 5px 7px !important;
  box-sizing: border-box !important;
}
.kwc-group-form-actions {
  margin-top: 2px !important;
  gap: 6px !important;
  justify-content: flex-end !important;
}
.kwc-group-form-actions .kwc-button {
  min-height: 28px !important;
  padding: 5px 9px !important;
}

.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-modal,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-modal *,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-modal,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-modal * {
  text-shadow: none !important;
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-title,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-title span,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-title small,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-invite-title,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-invite span,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-room-icon,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-join-hint,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-head h3,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-field > span {
  color: #0f172a !important;
  opacity: 1 !important;
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-title small,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-join-hint,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-field > span {
  color: #475569 !important;
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-invite,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-modal {
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(100,116,139,0.44) !important;
  color: #111827 !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.18) !important;
}
.kwc-group-form-backdrop.kwc-theme-light .kwc-input,
.kwc-group-form-backdrop.kwc-theme-light select.kwc-input,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-modal .kwc-input {
  color: #111827 !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(100,116,139,0.50) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.05) !important;
}
.kwc-group-form-backdrop.kwc-theme-light .kwc-button,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-modal .kwc-button {
  color: #1e293b !important;
  background: rgba(241,245,249,0.98) !important;
  border: 1px solid rgba(100,116,139,0.52) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.12) !important;
}
.kwc-group-form-backdrop.kwc-theme-light .kwc-button:hover,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-group-modal .kwc-button:hover {
  color: #0f172a !important;
  background: rgba(226,232,240,0.98) !important;
  border-color: rgba(71,85,105,0.62) !important;
}

@media (prefers-color-scheme: light) {
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-modal,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-modal *,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-modal,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-modal * {
    text-shadow: none !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-title,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-title span,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-title small,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-invite-title,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-invite span,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-room-icon,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-join-hint,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-head h3,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-field > span {
    color: #0f172a !important;
    opacity: 1 !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-title small,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-join-hint,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-field > span {
    color: #475569 !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-invite,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-modal {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(100,116,139,0.44) !important;
    color: #111827 !important;
    box-shadow: 0 8px 28px rgba(15,23,42,0.18) !important;
  }
  .kwc-group-form-backdrop.kwc-theme-system .kwc-input,
  .kwc-group-form-backdrop.kwc-theme-system select.kwc-input,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-modal .kwc-input {
    color: #111827 !important;
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid rgba(100,116,139,0.50) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.05) !important;
  }
  .kwc-group-form-backdrop.kwc-theme-system .kwc-button,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-group-modal .kwc-button {
    color: #1e293b !important;
    background: rgba(241,245,249,0.98) !important;
    border: 1px solid rgba(100,116,139,0.52) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.12) !important;
  }
}

/* Group chat / private metadata moderation UI */
.kwc-group-button {
  position: relative;
  min-width: 34px;
}
.kwc-admin-meta-title {
  margin: 10px 6px 5px;
  padding: 4px 6px;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.12));
  color: var(--kwc-ui-muted, rgba(255,255,255,0.72));
  font-size: 11px;
  font-weight: 700;
}
.kwc-admin-meta-row {
  cursor: default !important;
  opacity: 0.92;
}
.kwc-admin-meta-row:hover {
  transform: none !important;
}
.kwc-admin-meta-note {
  color: var(--kwc-ui-muted, rgba(255,255,255,0.72));
  font-size: 12px;
  margin: 4px 0 10px;
}
.kwc-group-manage-modal {
  width: min(520px, calc(100vw - 32px));
}
.kwc-group-member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(58vh, 420px);
  overflow: auto;
  margin: 8px 0 12px;
}
.kwc-group-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10));
  border-radius: 10px;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.07));
  color: var(--kwc-text-color, #fff);
}
.kwc-group-member-row small {
  display: block;
  color: var(--kwc-ui-muted, rgba(255,255,255,0.68));
  margin-top: 2px;
}
.kwc-group-member-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
#kwc-root.kwc-theme-light .kwc-admin-meta-title,
#kwc-root.kwc-theme-light .kwc-admin-meta-note,
.kwc-modal-backdrop.kwc-theme-light .kwc-admin-meta-title,
.kwc-modal-backdrop.kwc-theme-light .kwc-admin-meta-note,
.kwc-theme-light .kwc-group-member-row small {
  color: rgba(30, 41, 59, 0.74) !important;
}
#kwc-root.kwc-theme-light .kwc-group-member-row,
.kwc-modal-backdrop.kwc-theme-light .kwc-group-member-row {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(15,23,42,0.16) !important;
  color: #0f172a !important;
}

/* Detached admin/group management modals should inherit chat theme and user UI settings. */
.kwc-modal-backdrop.kwc-theme-dark .kwc-modal,
.kwc-modal-backdrop.kwc-theme-light .kwc-modal,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-modal,
.kwc-modal-backdrop.kwc-theme-system .kwc-modal {
  color: var(--kwc-text-color, #fff) !important;
  background: rgba(var(--kwc-modal-bg-rgb, 29, 29, 36), var(--kwc-panel-opacity, 0.96)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  box-shadow: 0 8px 40px var(--kwc-shadow-color, rgba(0,0,0,0.45)) !important;
  font-family: inherit !important;
  font-size: var(--kwc-font-size, 13px) !important;
}

.kwc-modal-backdrop.kwc-theme-dark .kwc-admin-grid,
.kwc-modal-backdrop.kwc-theme-dark .kwc-admin-list,
.kwc-modal-backdrop.kwc-theme-dark .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-dark .kwc-group-member-row,
.kwc-modal-backdrop.kwc-theme-light .kwc-admin-grid,
.kwc-modal-backdrop.kwc-theme-light .kwc-admin-list,
.kwc-modal-backdrop.kwc-theme-light .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-light .kwc-group-member-row,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-admin-grid,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-admin-list,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-group-member-row,
.kwc-modal-backdrop.kwc-theme-system .kwc-admin-grid,
.kwc-modal-backdrop.kwc-theme-system .kwc-admin-list,
.kwc-modal-backdrop.kwc-theme-system .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-system .kwc-group-member-row {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.07)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.10)) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
}

.kwc-modal-backdrop.kwc-theme-dark .kwc-button,
.kwc-modal-backdrop.kwc-theme-light .kwc-button,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-button,
.kwc-modal-backdrop.kwc-theme-system .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  font-family: inherit !important;
  font-size: var(--kwc-button-font-size, 12px) !important;
}

.kwc-modal-backdrop.kwc-theme-dark .kwc-button:hover,
.kwc-modal-backdrop.kwc-theme-light .kwc-button:hover,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-button:hover,
.kwc-modal-backdrop.kwc-theme-system .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
}

.kwc-modal-backdrop.kwc-theme-dark .kwc-input,
.kwc-modal-backdrop.kwc-theme-light .kwc-input,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-input,
.kwc-modal-backdrop.kwc-theme-system .kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  font-family: inherit !important;
  font-size: var(--kwc-input-font-size, 13px) !important;
}

/* Metadata rows: keep DM/group admin metadata inside the modal width. */
.kwc-admin-meta-row,
.kwc-group-hidden-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name actions" "preview preview";
  column-gap: 6px;
  row-gap: 2px;
  overflow: hidden !important;
}
.kwc-admin-meta-row .kwc-dm-thread-name,
.kwc-group-hidden-row .kwc-dm-thread-name {
  grid-area: name;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}
.kwc-admin-meta-row .kwc-dm-thread-preview,
.kwc-group-hidden-row .kwc-dm-thread-preview {
  grid-area: preview;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.kwc-admin-meta-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.kwc-admin-meta-actions .kwc-button {
  white-space: nowrap;
  max-width: 120px;
}
.kwc-admin-meta-user {
  display: inline !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.kwc-admin-meta-separator {
  opacity: 0.7;
  margin: 0 2px;
}
.kwc-admin-meta-danger {
  color: #fff !important;
  background: rgba(220, 38, 38, 0.72) !important;
  border-color: rgba(248, 113, 113, 0.65) !important;
}
.kwc-admin-meta-danger:hover {
  background: rgba(185, 28, 28, 0.86) !important;
}

/* Detached modals should match the same theme/font treatment as chat settings. */
.kwc-modal-backdrop.kwc-user-prefs-backdrop,
.kwc-modal-backdrop.kwc-user-prefs-backdrop * {
  box-sizing: border-box;
  font-family: inherit;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal {
  color: var(--kwc-text-color, #fff) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
  background: rgba(var(--kwc-modal-bg-rgb, 29, 29, 36), var(--kwc-panel-opacity, 0.96)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  box-shadow: 0 8px 40px var(--kwc-shadow-color, rgba(0,0,0,0.45)) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal h3,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal h4,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal p,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-label,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-font-help,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-opacity-note,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-group-form-field > span {
  color: var(--kwc-text-color, #fff) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-button,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-input,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-select,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-code {
  font-family: inherit !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-input,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-select,
.kwc-modal-backdrop.kwc-user-prefs-backdrop textarea.kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-admin-grid,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-admin-list,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-admin-item,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-group-member-row,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-group-invite,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-command-item {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.07)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10)) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
}
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-modal {
  color: #0f172a !important;
  background: rgba(255,255,255,var(--kwc-panel-opacity,0.96)) !important;
  border-color: rgba(100,116,139,0.44) !important;
  box-shadow: 0 12px 38px rgba(15,23,42,0.20) !important;
}
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-button {
  border-color: rgba(100,116,139,0.52) !important;
}
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-input,
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-pref-select {
  border-color: rgba(100,116,139,0.50) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.05) !important;
}

/* v4.5.0 follow-up: admin metadata rows must not inherit normal thread truncation/wrapping. */
.kwc-admin-meta-row,
.kwc-group-hidden-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "name actions" "preview preview" !important;
  column-gap: 6px !important;
  row-gap: 3px !important;
  overflow: hidden !important;
  cursor: default !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-name,
.kwc-group-hidden-row > .kwc-dm-thread-name {
  grid-area: name !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.kwc-admin-meta-identities {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}
.kwc-admin-meta-user {
  display: inline !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.kwc-admin-meta-user .kwc-mc-seg,
.kwc-admin-meta-user span {
  white-space: nowrap !important;
}
.kwc-admin-meta-separator {
  flex: 0 0 auto !important;
  opacity: 0.72 !important;
  margin: 0 2px !important;
}
.kwc-admin-meta-actions {
  grid-area: actions !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.kwc-admin-meta-actions .kwc-button {
  white-space: nowrap !important;
  max-width: 120px !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-preview,
.kwc-group-hidden-row > .kwc-dm-thread-preview {
  grid-area: preview !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}
.kwc-group-modal .kwc-dm-sidebar,
.kwc-group-modal .kwc-dm-thread-list,
.kwc-group-modal .kwc-dm-thread,
.kwc-group-modal .kwc-dm-thread-name,
.kwc-group-modal .kwc-dm-thread-preview {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.kwc-group-modal .kwc-dm-thread-list {
  overflow-x: hidden !important;
}

/* Detached user settings/account/password modals inherit the same variable-driven theme. */
.kwc-modal-backdrop.kwc-user-prefs-backdrop {
  color: var(--kwc-text-color, #fff) !important;
  font-family: var(--kwc-font-family, inherit) !important;
  font-size: var(--kwc-font-size, 13px) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal {
  color: var(--kwc-text-color, #fff) !important;
  background: rgba(var(--kwc-modal-bg-rgb, 29, 29, 36), var(--kwc-panel-opacity, 0.96)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  box-shadow: 0 8px 40px var(--kwc-shadow-color, rgba(0,0,0,0.45)) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal h3,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal h4,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal p,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-label,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-hints,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-font-help,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-font-status,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-opacity-note {
  color: var(--kwc-text-color, #fff) !important;
  text-shadow: var(--kwc-text-shadow, none) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-input,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-select,
.kwc-modal-backdrop.kwc-user-prefs-backdrop textarea.kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  box-shadow: none !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  box-shadow: none !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-code,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-preview,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-fieldset,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-shadow-custom-panel,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-shadow-preview {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.07)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.10)) !important;
}

/* DM-style light surfaces for group player search and public edge toasts.
   Group search lives inside the same detached DM modal shell, but older
   group-specific input rules were stronger than the DM search rules. Keep the
   group player search visually identical to the DM player search. */
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-search-panel,
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-search-panel .kwc-dm-search-head,
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-search-panel .kwc-dm-search-head strong {
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #111827)) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-search-panel {
  background: rgba(var(--kwc-modal-bg-rgb, 248,250,252), 0.98) !important;
  border-color: rgba(148, 163, 184, 0.50) !important;
  box-shadow: 0 12px 34px rgba(15,23,42,0.20) !important;
}
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-search-panel .kwc-input {
  color: var(--kwc-text-color, #111827) !important;
  background: var(--kwc-input-bg, rgba(255,255,255,0.98)) !important;
  border-color: rgba(148, 163, 184, 0.58) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
}
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-player-results .kwc-dm-player {
  color: var(--kwc-text-color, #111827) !important;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.78)) !important;
  border-color: rgba(148, 163, 184, 0.48) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
}
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-player-results .kwc-dm-player:hover {
  background: var(--kwc-surface-hover-bg, rgba(226,232,240,0.96)) !important;
  border-color: rgba(100, 116, 139, 0.54) !important;
}

#kwc-root.kwc-theme-light .kwc-history-end {
  color: #0f172a !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(51,65,85,0.42) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
@media (prefers-color-scheme: light) {
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-search-panel,
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-search-panel .kwc-dm-search-head,
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-search-panel .kwc-dm-search-head strong {
    color: var(--kwc-ui-text-color, var(--kwc-text-color, #111827)) !important;
    text-shadow: var(--kwc-ui-text-shadow, none) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-search-panel {
    background: rgba(var(--kwc-modal-bg-rgb, 248,250,252), 0.98) !important;
    border-color: rgba(148, 163, 184, 0.50) !important;
    box-shadow: 0 12px 34px rgba(15,23,42,0.20) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-search-panel .kwc-input {
    color: var(--kwc-text-color, #111827) !important;
    background: var(--kwc-input-bg, rgba(255,255,255,0.98)) !important;
    border-color: rgba(148, 163, 184, 0.58) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-player-results .kwc-dm-player {
    color: var(--kwc-text-color, #111827) !important;
    background: var(--kwc-surface-bg, rgba(255,255,255,0.78)) !important;
    border-color: rgba(148, 163, 184, 0.48) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06) !important;
  }
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-player-results .kwc-dm-player:hover {
    background: var(--kwc-surface-hover-bg, rgba(226,232,240,0.96)) !important;
    border-color: rgba(100, 116, 139, 0.54) !important;
  }
  #kwc-root.kwc-theme-system .kwc-history-end {
    color: #0f172a !important;
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(51,65,85,0.42) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

/* Toast visual parity patch.
   Keep every edge/end toast on the same pill style used by the DM window.
   Behavior is still controlled by the normal chat edge/retry logic in JS. */
#kwc-root .kwc-history-end,
.kwc-dm-edge-toast {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: var(--kwc-ui-text-color, var(--kwc-button-text, #fff)) !important;
  background: var(--kwc-button-bg, rgba(0,0,0,0.62)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16)) !important;
  box-shadow: 0 4px 14px var(--kwc-shadow-color, rgba(0,0,0,0.32)) !important;
  backdrop-filter: blur(8px) !important;
  font-family: inherit !important;
  font-size: max(11px, calc(var(--kwc-font-size, 13px) * 0.86)) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  white-space: pre-line !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.96 !important;
}

#kwc-root .kwc-history-end.kwc-history-end-top {
  top: var(--kwc-affordance-top, 54px) !important;
  bottom: auto !important;
}
#kwc-root .kwc-history-end.kwc-history-end-bottom {
  top: auto !important;
  bottom: var(--kwc-affordance-bottom, 72px) !important;
}

#kwc-root.kwc-theme-light .kwc-history-end,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-edge-toast,
.kwc-modal-backdrop.kwc-theme-light .kwc-dm-edge-toast {
  color: #0f172a !important;
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(51,65,85,0.42) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#kwc-root.kwc-theme-high-contrast .kwc-history-end,
.kwc-dm-modal-backdrop.kwc-theme-high-contrast .kwc-dm-edge-toast,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-dm-edge-toast {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1px #000000, 0 0 0 2px #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-history-end,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-edge-toast,
  .kwc-modal-backdrop.kwc-theme-system .kwc-dm-edge-toast {
    color: #0f172a !important;
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(51,65,85,0.42) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

/* Admin retention cleanup preview cards. */
.kwc-admin-cleanup-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  background: var(--kwc-surface-bg, rgba(255,255,255,0.07));
  color: var(--kwc-ui-text-color, var(--kwc-text-color, inherit));
  font-size: 12px;
  line-height: 1.3;
  box-sizing: border-box;
}
.kwc-admin-cleanup-preview strong {
  font-size: 12px;
}
.kwc-admin-cleanup-preview span {
  opacity: 0.82;
}


/* v4.5.0 follow-up: keep admin DM/group metadata readable in narrow sidebars. */
.kwc-admin-meta-row,
.kwc-group-hidden-row {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "name" "preview" "actions" !important;
  align-items: start !important;
  overflow: visible !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-name,
.kwc-group-hidden-row > .kwc-dm-thread-name {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  flex-wrap: wrap !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
.kwc-admin-meta-identities {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  max-width: 100% !important;
}
.kwc-admin-meta-user {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
.kwc-admin-meta-actions {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
.kwc-admin-meta-actions .kwc-button {
  max-width: none !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-preview,
.kwc-group-hidden-row > .kwc-dm-thread-preview {
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* Compose input background preference scope.
   ui.input-background-color / user input background color should affect only
   the actual message compose boxes.  Generic .kwc-input is used by search,
   settings, moderation metadata, system/time UI, and several toolbar controls,
   so those controls must keep the normal theme input/surface colors. */
#kwc-root #kwc-message,
.kwc-dm-modal-backdrop #kwc-dm-input,
.kwc-dm-modal-backdrop #kwc-group-input {
  background: var(--kwc-compose-input-bg, var(--kwc-input-bg, rgba(0,0,0,0.24))) !important;
}
#kwc-root.kwc-theme-light #kwc-message,
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-dm-input,
.kwc-dm-modal-backdrop.kwc-theme-light #kwc-group-input {
  background: var(--kwc-compose-input-bg, var(--kwc-input-bg, rgba(255,255,255,0.98))) !important;
}
@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system #kwc-message,
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-dm-input,
  .kwc-dm-modal-backdrop.kwc-theme-system #kwc-group-input {
    background: var(--kwc-compose-input-bg, var(--kwc-input-bg, rgba(255,255,255,0.98))) !important;
  }
}

/* v4.5.0 light-theme visibility follow-up.
   Keep the input-background preference scoped to compose boxes, but make title,
   pinned, DM, group, and detached modal text/buttons obey the configured text
   shadow, border, and theme surface variables. */
#kwc-root .kwc-title,
#kwc-root .kwc-header,
#kwc-root .kwc-header *,
#kwc-root .kwc-pinned-open,
#kwc-root .kwc-pinned-open *,
#kwc-root .kwc-pinned-item,
#kwc-root .kwc-pinned-item *,
#kwc-root .kwc-system,
#kwc-root .kwc-time,
#kwc-root .kwc-meta,
.kwc-modal-backdrop .kwc-modal,
.kwc-modal-backdrop .kwc-modal h3,
.kwc-modal-backdrop .kwc-modal h4,
.kwc-modal-backdrop .kwc-modal p,
.kwc-modal-backdrop .kwc-modal-head,
.kwc-modal-backdrop .kwc-modal-head *,
.kwc-dm-modal-backdrop .kwc-dm-head,
.kwc-dm-modal-backdrop .kwc-dm-head *,
.kwc-dm-modal-backdrop .kwc-dm-title,
.kwc-dm-modal-backdrop .kwc-dm-main-title,
.kwc-dm-modal-backdrop .kwc-dm-thread-name,
.kwc-dm-modal-backdrop .kwc-dm-thread-preview,
.kwc-dm-modal-backdrop .kwc-dm-message,
.kwc-dm-modal-backdrop .kwc-dm-message *,
.kwc-dm-modal-backdrop .kwc-group-title,
.kwc-dm-modal-backdrop .kwc-group-title *,
.kwc-dm-modal-backdrop .kwc-group-room-meta,
.kwc-dm-modal-backdrop .kwc-group-join-hint,
.kwc-dm-modal-backdrop .kwc-group-invite,
.kwc-dm-modal-backdrop .kwc-group-invite *,
.kwc-group-form-backdrop .kwc-group-form-modal,
.kwc-group-form-backdrop .kwc-group-form-modal * {
  text-shadow: var(--kwc-ui-text-shadow, var(--kwc-text-shadow, none)) !important;
}

#kwc-root .kwc-text,
#kwc-root .kwc-sender,
#kwc-root .kwc-body,
.kwc-dm-modal-backdrop .kwc-dm-message-text,
.kwc-dm-modal-backdrop .kwc-dm-message-body {
  text-shadow: var(--kwc-text-shadow, none) !important;
}

#kwc-root.kwc-text-shadow-none .kwc-title,
#kwc-root.kwc-text-shadow-none .kwc-header,
#kwc-root.kwc-text-shadow-none .kwc-header *,
#kwc-root.kwc-text-shadow-none .kwc-pinned-open,
#kwc-root.kwc-text-shadow-none .kwc-pinned-open *,
#kwc-root.kwc-text-shadow-none .kwc-pinned-item,
#kwc-root.kwc-text-shadow-none .kwc-pinned-item * {
  text-shadow: none !important;
}

.kwc-modal-backdrop .kwc-modal {
  color: var(--kwc-text-color, #fff) !important;
  background: rgba(var(--kwc-modal-bg-rgb, 29, 29, 36), var(--kwc-panel-opacity, 0.96)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  box-shadow: 0 8px 40px var(--kwc-shadow-color, rgba(0,0,0,0.45)) !important;
}

.kwc-modal-backdrop .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16)) !important;
  box-shadow: 0 1px 2px var(--kwc-shadow-color, rgba(0,0,0,0.22)) !important;
  text-shadow: var(--kwc-ui-text-shadow, var(--kwc-text-shadow, none)) !important;
  box-sizing: border-box !important;
}
.kwc-modal-backdrop .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
}
.kwc-modal-backdrop .kwc-input,
.kwc-modal-backdrop textarea.kwc-input,
.kwc-modal-backdrop select.kwc-input {
  color: var(--kwc-text-color, #fff) !important;
  background: var(--kwc-input-bg, rgba(0,0,0,0.24)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  text-shadow: var(--kwc-ui-text-shadow, var(--kwc-text-shadow, none)) !important;
  box-sizing: border-box !important;
}

#kwc-root.kwc-theme-light .kwc-title,
#kwc-root.kwc-theme-light .kwc-status,
#kwc-root.kwc-theme-light .kwc-header,
#kwc-root.kwc-theme-light .kwc-header *,
#kwc-root.kwc-theme-light .kwc-pinned-open,
#kwc-root.kwc-theme-light .kwc-pinned-open *,
#kwc-root.kwc-theme-light .kwc-pinned-item,
#kwc-root.kwc-theme-light .kwc-pinned-item *,
.kwc-modal-backdrop.kwc-theme-light .kwc-modal,
.kwc-modal-backdrop.kwc-theme-light .kwc-modal *,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-modal,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-dm-modal *,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-modal,
.kwc-group-form-backdrop.kwc-theme-light .kwc-group-form-modal * {
  text-shadow: var(--kwc-ui-text-shadow, var(--kwc-text-shadow, none)) !important;
}

#kwc-root.kwc-theme-light .kwc-pinned-open,
#kwc-root.kwc-theme-light .kwc-pinned-item,
.kwc-modal-backdrop.kwc-theme-light .kwc-button,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-button,
.kwc-group-form-backdrop.kwc-theme-light .kwc-button {
  color: var(--kwc-button-text, var(--kwc-text-color, #111827)) !important;
  background: var(--kwc-button-bg, rgba(241,245,249,0.96)) !important;
  border: 1px solid var(--kwc-border-color, rgba(100,116,139,0.52)) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.10) !important;
}
#kwc-root.kwc-theme-light .kwc-pinned-open:hover,
.kwc-modal-backdrop.kwc-theme-light .kwc-button:hover,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-button:hover,
.kwc-group-form-backdrop.kwc-theme-light .kwc-button:hover {
  background: var(--kwc-button-hover-bg, rgba(226,232,240,0.98)) !important;
  border-color: rgba(100,116,139,0.62) !important;
}

.kwc-pinned-backdrop #kwc-pinned-close,
.kwc-pinned-backdrop .kwc-modal-head .kwc-button {
  min-height: 30px !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16)) !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-title,
  #kwc-root.kwc-theme-system .kwc-status,
  #kwc-root.kwc-theme-system .kwc-header,
  #kwc-root.kwc-theme-system .kwc-header *,
  #kwc-root.kwc-theme-system .kwc-pinned-open,
  #kwc-root.kwc-theme-system .kwc-pinned-open *,
  #kwc-root.kwc-theme-system .kwc-pinned-item,
  #kwc-root.kwc-theme-system .kwc-pinned-item *,
  .kwc-modal-backdrop.kwc-theme-system .kwc-modal,
  .kwc-modal-backdrop.kwc-theme-system .kwc-modal *,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-modal,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-dm-modal *,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-modal,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-group-form-modal * {
    text-shadow: var(--kwc-ui-text-shadow, var(--kwc-text-shadow, none)) !important;
  }

  #kwc-root.kwc-theme-system .kwc-pinned-open,
  #kwc-root.kwc-theme-system .kwc-pinned-item,
  .kwc-modal-backdrop.kwc-theme-system .kwc-button,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-button,
  .kwc-group-form-backdrop.kwc-theme-system .kwc-button {
    color: var(--kwc-button-text, var(--kwc-text-color, #111827)) !important;
    background: var(--kwc-button-bg, rgba(241,245,249,0.96)) !important;
    border: 1px solid var(--kwc-border-color, rgba(100,116,139,0.52)) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.10) !important;
  }
}


/* v4.5.0 follow-up: minimized mode shows only title + restore button. */
#kwc-root.kwc-minimized #kwc-group,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-group {
  display: none !important;
}

/* v4.5.0 follow-up: admin DM/group metadata uses a two-line layout:
   left metadata on two lines, right-side action buttons. */
.kwc-admin-meta-row,
.kwc-group-hidden-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "name actions"
    "preview actions" !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-name,
.kwc-group-hidden-row > .kwc-dm-thread-name {
  grid-area: name !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.kwc-admin-meta-identities {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
.kwc-admin-meta-user {
  display: inline-block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(16em, 42%) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.kwc-admin-meta-user .kwc-mc-seg,
.kwc-admin-meta-user span {
  white-space: nowrap !important;
}
.kwc-admin-meta-separator {
  flex: 0 0 auto !important;
  opacity: 0.72 !important;
  margin: 0 2px !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-preview,
.kwc-group-hidden-row > .kwc-dm-thread-preview {
  grid-area: preview !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  line-height: 1.25 !important;
}
.kwc-admin-meta-actions {
  grid-area: actions !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  gap: 4px !important;
  min-width: max-content !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}
.kwc-admin-meta-actions .kwc-button {
  white-space: nowrap !important;
  max-width: none !important;
  min-width: auto !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
@media (max-width: 520px) {
  .kwc-admin-meta-row,
  .kwc-group-hidden-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "name"
      "preview"
      "actions" !important;
    overflow: visible !important;
  }
  .kwc-admin-meta-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
}

/* v4.5.0 follow-up: DM/group/admin metadata lists must scroll instead of shrinking rows.
   The thread list is a column flex container; flex children shrink by default,
   which compressed admin metadata rows when the list became taller than the
   current chat window.  Keep each list item at its natural height so overflow-y
   can create the scrollbar. */
.kwc-dm-modal .kwc-dm-thread-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}
.kwc-dm-modal .kwc-dm-thread-list > .kwc-dm-thread,
.kwc-dm-modal .kwc-dm-thread-list > .kwc-admin-meta-row,
.kwc-dm-modal .kwc-dm-thread-list > .kwc-group-hidden-row,
.kwc-dm-modal .kwc-dm-thread-list > .kwc-admin-meta-title,
.kwc-dm-modal .kwc-dm-thread-list > .kwc-admin-cleanup-preview,
.kwc-dm-modal .kwc-dm-thread-list > .kwc-dm-empty {
  flex: 0 0 auto !important;
}
.kwc-group-modal .kwc-group-invites {
  flex: 0 0 auto !important;
  max-height: min(180px, 34%) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.kwc-group-modal .kwc-group-invites > * {
  flex: 0 0 auto !important;
}


/* v4.5.0 follow-up: keep standalone/full-window layout inside the visible viewport.
   Standalone pages can be taller than the real visible area on mobile browsers when
   100vh includes browser chrome.  The parent frame now uses the VisualViewport
   height, and these rules make the iframe content shrink internally so the input
   row stays visible instead of being pushed below the screen. */
html.kwc-standalone-mode,
body.kwc-standalone-mode {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#kwc-root {
  box-sizing: border-box !important;
}
#kwc-root .kwc-panel {
  min-height: 0 !important;
  box-sizing: border-box !important;
}
#kwc-root .kwc-header,
#kwc-root .kwc-pinned-bar,
#kwc-root .kwc-form {
  flex: 0 0 auto !important;
}
#kwc-root .kwc-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
#kwc-root.kwc-standalone-mode:not(.kwc-minimized) {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}
#kwc-root.kwc-standalone-mode:not(.kwc-minimized) .kwc-panel {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* v4.5.0 follow-up: scope user Chat Settings to real chat content only.
   Menus, settings windows, sidebars, metadata management lists, search fields,
   buttons, and other UI chrome keep the selected theme defaults. */
#kwc-root .kwc-messages {
  background: var(--kwc-chat-background-color, transparent) !important;
}

#kwc-root .kwc-messages .kwc-msg,
#kwc-root .kwc-messages .kwc-system,
.kwc-dm-modal-backdrop .kwc-dm-messages,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-dm-message {
  font-family: var(--kwc-chat-font-family, inherit) !important;
  font-size: var(--kwc-chat-message-font-size, var(--kwc-message-font-size, 13px)) !important;
  text-shadow: var(--kwc-chat-text-shadow, var(--kwc-text-shadow, none)) !important;
}

#kwc-root .kwc-messages .kwc-text,
#kwc-root .kwc-messages .kwc-body,
#kwc-root .kwc-messages .kwc-system,
.kwc-dm-modal-backdrop .kwc-dm-message-body,
.kwc-dm-modal-backdrop .kwc-dm-message-text {
  color: var(--kwc-chat-text-color, var(--kwc-text-color, #fff)) !important;
}

#kwc-root .kwc-messages .kwc-text,
#kwc-root .kwc-messages .kwc-body,
#kwc-root .kwc-messages .kwc-meta,
#kwc-root .kwc-messages .kwc-time,
#kwc-root .kwc-messages .kwc-source-label,
#kwc-root .kwc-messages .kwc-server-badge:not([style*="--kwc-server-hue"]),
#kwc-root .kwc-messages .kwc-source-badge,
#kwc-root .kwc-messages .kwc-role-badge,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-dm-message-body,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-dm-message-text,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-dm-message-meta,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-source-label,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-time {
  font-family: var(--kwc-chat-font-family, inherit) !important;
  font-size: var(--kwc-chat-message-font-size, var(--kwc-message-font-size, 13px)) !important;
  text-shadow: var(--kwc-chat-text-shadow, var(--kwc-text-shadow, none)) !important;
}

#kwc-root .kwc-messages .kwc-time,
#kwc-root .kwc-messages .kwc-source-label,
#kwc-root .kwc-messages .kwc-server-badge:not([style*="--kwc-server-hue"]),
#kwc-root .kwc-messages .kwc-source-badge,
#kwc-root .kwc-messages .kwc-role-badge,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-time,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-source-label,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-source-badge,
.kwc-dm-modal-backdrop .kwc-dm-messages .kwc-role-badge {
  color: var(--kwc-chat-ui-text-color, var(--kwc-muted-color, rgba(255,255,255,0.74))) !important;
}

.kwc-dm-modal-backdrop .kwc-dm-messages {
  background: var(--kwc-chat-background-color, transparent) !important;
}

/* Do not force .kwc-sender color here; Minecraft/name color-code spans must keep
   their own rendered colors. */
#kwc-root #kwc-message,
.kwc-dm-modal-backdrop #kwc-dm-input,
.kwc-dm-modal-backdrop #kwc-group-input {
  background: var(--kwc-compose-input-bg, var(--kwc-input-bg, rgba(0,0,0,0.24))) !important;
}

/* v4.5.0 follow-up: keep message metadata formatting consistent everywhere.
   General chat, DM, group chat, and pinned-message rows use the same left-to-right
   flow with visible middle-dot separators. Names keep their own Minecraft/user
   color rendering; chat UI color is only applied to separators, source labels,
   timestamps, and pinned metadata details. */
#kwc-root .kwc-meta,
.kwc-dm-modal-backdrop .kwc-dm-message-meta,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  column-gap: 4px !important;
  row-gap: 1px !important;
  text-align: left !important;
}

#kwc-root .kwc-meta-sep,
.kwc-dm-modal-backdrop .kwc-meta-sep,
.kwc-pinned-backdrop .kwc-meta-sep {
  flex: 0 0 auto !important;
  opacity: 0.82 !important;
  user-select: none !important;
  color: var(--kwc-chat-ui-text-color, var(--kwc-muted-color, rgba(255,255,255,0.74))) !important;
}

.kwc-dm-modal-backdrop .kwc-dm-message-meta {
  gap: 4px !important;
  margin-bottom: 3px !important;
}

.kwc-dm-modal-backdrop .kwc-dm-message-meta > .kwc-sender,
.kwc-dm-modal-backdrop .kwc-dm-message-meta > .kwc-time,
.kwc-dm-modal-backdrop .kwc-dm-message-meta > .kwc-meta-sep,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-meta > .kwc-sender,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-meta > .kwc-source-label,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-meta > .kwc-time-actions,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-meta > .kwc-pinned-detail,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-meta > .kwc-meta-sep {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.kwc-dm-modal-backdrop .kwc-dm-message-meta .kwc-time,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-source-label,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-time,
.kwc-pinned-backdrop .kwc-pinned-item .kwc-pinned-detail {
  color: var(--kwc-chat-ui-text-color, var(--kwc-muted-color, rgba(255,255,255,0.74))) !important;
}

/* Pinned message contents are real chat contents, so they follow Chat Settings.
   Modal headers, buttons, and surrounding management UI still keep theme defaults. */
.kwc-pinned-backdrop .kwc-pinned-list {
  background: var(--kwc-chat-background-color, transparent) !important;
}

.kwc-pinned-backdrop .kwc-pinned-list .kwc-pinned-item,
.kwc-pinned-backdrop .kwc-pinned-list .kwc-pinned-item .kwc-meta,
.kwc-pinned-backdrop .kwc-pinned-list .kwc-pinned-item .kwc-text {
  font-family: var(--kwc-chat-font-family, inherit) !important;
  font-size: var(--kwc-chat-message-font-size, var(--kwc-message-font-size, 13px)) !important;
  text-shadow: var(--kwc-chat-text-shadow, var(--kwc-text-shadow, none)) !important;
}

.kwc-pinned-backdrop .kwc-pinned-list .kwc-pinned-item .kwc-text {
  color: var(--kwc-chat-text-color, var(--kwc-text-color, #fff)) !important;
}


/* v4.5.0 follow-up: normalize themed control affordances across all themes.
   Pinned-message action buttons live in a detached modal, so #kwc-root scoped
   button rules do not reach them.  Give root controls and detached modal
   controls the same visible surface, border, hover and focus treatment. */
#kwc-root .kwc-pinned-open,
#kwc-root .kwc-pinned-item,
#kwc-root .kwc-mini-action,
#kwc-root .kwc-media-load,
.kwc-modal-backdrop.kwc-theme-dark .kwc-mini-action,
.kwc-modal-backdrop.kwc-theme-light .kwc-mini-action,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-mini-action,
.kwc-modal-backdrop.kwc-theme-system .kwc-mini-action,
.kwc-modal-backdrop.kwc-theme-dark .kwc-media-load,
.kwc-modal-backdrop.kwc-theme-light .kwc-media-load,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-media-load,
.kwc-modal-backdrop.kwc-theme-system .kwc-media-load {
  box-sizing: border-box !important;
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(255,255,255,0.13)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  box-shadow: 0 1px 2px var(--kwc-control-shadow, rgba(0,0,0,0.14)) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}

#kwc-root .kwc-pinned-open:hover,
#kwc-root .kwc-mini-action:hover,
#kwc-root .kwc-media-load:hover,
.kwc-modal-backdrop.kwc-theme-dark .kwc-mini-action:hover,
.kwc-modal-backdrop.kwc-theme-light .kwc-mini-action:hover,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-mini-action:hover,
.kwc-modal-backdrop.kwc-theme-system .kwc-mini-action:hover,
.kwc-modal-backdrop.kwc-theme-dark .kwc-media-load:hover,
.kwc-modal-backdrop.kwc-theme-light .kwc-media-load:hover,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-media-load:hover,
.kwc-modal-backdrop.kwc-theme-system .kwc-media-load:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.22)) !important;
  border-color: var(--kwc-border-color, rgba(255,255,255,0.22)) !important;
}

#kwc-root .kwc-pinned-open:focus-visible,
#kwc-root .kwc-mini-action:focus-visible,
#kwc-root .kwc-media-load:focus-visible,
.kwc-modal-backdrop.kwc-theme-dark .kwc-mini-action:focus-visible,
.kwc-modal-backdrop.kwc-theme-light .kwc-mini-action:focus-visible,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-mini-action:focus-visible,
.kwc-modal-backdrop.kwc-theme-system .kwc-mini-action:focus-visible,
.kwc-modal-backdrop.kwc-theme-dark .kwc-media-load:focus-visible,
.kwc-modal-backdrop.kwc-theme-light .kwc-media-load:focus-visible,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-media-load:focus-visible,
.kwc-modal-backdrop.kwc-theme-system .kwc-media-load:focus-visible {
  outline: 2px solid var(--kwc-link-color, rgba(130,190,255,0.65)) !important;
  outline-offset: 2px !important;
}

#kwc-root.kwc-theme-light,
#kwc-root.kwc-theme-system,
.kwc-modal-backdrop.kwc-theme-light,
.kwc-modal-backdrop.kwc-theme-system {
  --kwc-control-shadow: rgba(15,23,42,0.12);
}

#kwc-root.kwc-theme-light .kwc-pinned-open,
#kwc-root.kwc-theme-light .kwc-pinned-item,
#kwc-root.kwc-theme-light .kwc-mini-action,
.kwc-modal-backdrop.kwc-theme-light .kwc-pinned-item,
.kwc-modal-backdrop.kwc-theme-light .kwc-mini-action {
  border-color: rgba(71,85,105,0.50) !important;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system .kwc-pinned-open,
  #kwc-root.kwc-theme-system .kwc-pinned-item,
  #kwc-root.kwc-theme-system .kwc-mini-action,
  .kwc-modal-backdrop.kwc-theme-system .kwc-pinned-item,
  .kwc-modal-backdrop.kwc-theme-system .kwc-mini-action {
    border-color: rgba(71,85,105,0.50) !important;
  }
}

#kwc-root.kwc-theme-high-contrast .kwc-pinned-open,
#kwc-root.kwc-theme-high-contrast .kwc-pinned-item,
#kwc-root.kwc-theme-high-contrast .kwc-mini-action,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-pinned-item,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-mini-action {
  border-color: #ffffff !important;
  box-shadow: none !important;
}

.kwc-pinned-backdrop .kwc-pinned-list .kwc-pinned-item {
  background: var(--kwc-surface-bg, rgba(255,255,255,0.07)) !important;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14)) !important;
  border-radius: 10px !important;
}

.kwc-pinned-backdrop .kwc-pinned-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin-left: 6px !important;
  vertical-align: baseline !important;
}

.kwc-pinned-backdrop .kwc-pinned-actions .kwc-mini-action {
  min-width: 24px !important;
  min-height: 20px !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.kwc-pinned-backdrop .kwc-pinned-actions .kwc-mini-action[disabled],
#kwc-root .kwc-pinned-actions .kwc-mini-action[disabled] {
  opacity: 0.48 !important;
  cursor: default !important;
  pointer-events: none !important;
  filter: grayscale(0.2) !important;
}

.kwc-pinned-backdrop .kwc-pinned-actions .kwc-mini-action[data-unpin] {
  min-width: 44px !important;
}

.kwc-pref-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}

.kwc-notification-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16));
}

.kwc-pref-button-row .kwc-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* v4.5.0 follow-up: resize lock, admin badge action, and local chat-setting presets. */



#kwc-root:not(.kwc-resizable) .kwc-resize-handle {
  display: none !important;
}

#kwc-root .kwc-status.kwc-status-admin-action {
  cursor: pointer !important;
  max-width: 70px !important;
  min-width: 44px !important;
  min-height: 26px !important;
  height: 26px !important;
  max-height: 26px !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
  font-size: 10px !important;
  justify-content: center !important;
}

#kwc-root .kwc-status.kwc-status-admin-action:hover,
#kwc-root .kwc-status.kwc-status-admin-action:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid var(--kwc-link-color, rgba(130,190,255,0.65));
  outline-offset: 2px;
}

.kwc-preset-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16));
}

.kwc-preset-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
}

.kwc-preset-row .kwc-button {
  white-space: nowrap;
}

@media (max-width: 520px) {
  .kwc-preset-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .kwc-preset-row #kwc-prefs-preset-save,
  .kwc-preset-row #kwc-prefs-preset-load,
  .kwc-preset-row #kwc-prefs-preset-delete {
    width: 100%;
  }
}

/* v4.5.0 follow-up: keep the clickable admin badge visually identical to the
   existing badge. Hover should not create an extra marker/outline at the side. */
#kwc-root .kwc-status.kwc-status-admin-action:hover {
  outline: none !important;
  outline-offset: 0 !important;
  filter: none !important;
}

#kwc-root .kwc-status.kwc-status-admin-action:focus-visible {
  outline: 2px solid var(--kwc-link-color, rgba(130,190,255,0.65)) !important;
  outline-offset: 2px !important;
}


#kwc-root .kwc-notify-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 8px;
  margin: 4px 0 8px;
}

#kwc-root .kwc-notify-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--kwc-muted-color, rgba(230, 235, 245, 0.72));
  font-size: 12px;
  line-height: 1.35;
}

#kwc-root .kwc-notify-option input {
  margin: 0;
  flex: 0 0 auto;
}

#kwc-root .kwc-notify-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  #kwc-root .kwc-notify-options {
    grid-template-columns: 1fr;
  }
}

/* v4.5.0 follow-up: keep settings modal scrollbars inside the modal and hide bulky optional sections by default. */
.kwc-user-prefs-modal {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
}

.kwc-user-prefs-modal > .kwc-modal-head {
  flex: 0 0 auto !important;
}

.kwc-user-prefs-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--kwc-border-color, rgba(255,255,255,0.24)) transparent !important;
  box-sizing: border-box !important;
  padding-right: 8px !important;
  margin-right: -2px !important;
}

.kwc-user-prefs-scroll::-webkit-scrollbar {
  width: 10px;
}

.kwc-user-prefs-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.kwc-user-prefs-scroll::-webkit-scrollbar-thumb {
  background-color: var(--kwc-border-color, rgba(255,255,255,0.24));
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.kwc-user-prefs-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--kwc-link-color, rgba(130,190,255,0.65));
}


/* v4.5.0 follow-up: color inputs need a visible swatch edge on light backgrounds. */
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-color-input {
  border-color: var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
  box-shadow: 0 1px 2px var(--kwc-control-shadow, rgba(0,0,0,0.10)) !important;
}

.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-color-input::-webkit-color-swatch {
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
}

.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-color-input::-moz-color-swatch {
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18)) !important;
}

.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-pref-color-input,
.kwc-modal-backdrop.kwc-theme-system.kwc-user-prefs-backdrop .kwc-pref-color-input {
  border-color: rgba(100, 116, 139, 0.64) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-pref-color-input::-webkit-color-swatch,
.kwc-modal-backdrop.kwc-theme-system.kwc-user-prefs-backdrop .kwc-pref-color-input::-webkit-color-swatch {
  border-color: rgba(71, 85, 105, 0.72) !important;
}

.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-pref-color-input::-moz-color-swatch,
.kwc-modal-backdrop.kwc-theme-system.kwc-user-prefs-backdrop .kwc-pref-color-input::-moz-color-swatch {
  border-color: rgba(71, 85, 105, 0.72) !important;
}

.kwc-modal-backdrop.kwc-theme-high-contrast.kwc-user-prefs-backdrop .kwc-pref-color-input,
.kwc-modal-backdrop.kwc-theme-high-contrast.kwc-user-prefs-backdrop .kwc-pref-color-input::-webkit-color-swatch,
.kwc-modal-backdrop.kwc-theme-high-contrast.kwc-user-prefs-backdrop .kwc-pref-color-input::-moz-color-swatch {
  border-color: #ffffff !important;
}

.kwc-pref-collapsible {
  display: block;
}

.kwc-pref-collapsible > summary {
  cursor: pointer;
  color: var(--kwc-text-color, #fff);
  font-weight: 700;
  margin: 0 0 8px;
  user-select: none;
}

.kwc-pref-collapsible > summary:focus-visible {
  outline: 2px solid var(--kwc-link-color, rgba(130,190,255,0.65));
  outline-offset: 2px;
  border-radius: 6px;
}

.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-collapsible > summary {
  color: var(--kwc-text-color, #fff) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}

.kwc-preset-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
}

.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-notify-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 8px;
  margin: 4px 0 8px;
}

.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-notify-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}

.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-notify-option input {
  margin: 0;
  flex: 0 0 auto;
}

.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-notify-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-notify-options {
    grid-template-columns: 1fr;
  }
}

/* v4.5.0 follow-up: grouped settings and light-theme readability. */
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-hints,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-pref-hints span,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-notify-option,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-notify-option span {
  color: var(--kwc-muted-text-color, rgba(255,255,255,0.70)) !important;
  text-shadow: var(--kwc-ui-text-shadow, none) !important;
}
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-pref-hints,
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-pref-hints span,
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-notify-option,
.kwc-modal-backdrop.kwc-theme-light.kwc-user-prefs-backdrop .kwc-notify-option span,
.kwc-modal-backdrop.kwc-theme-system.kwc-user-prefs-backdrop .kwc-pref-hints,
.kwc-modal-backdrop.kwc-theme-system.kwc-user-prefs-backdrop .kwc-pref-hints span,
.kwc-modal-backdrop.kwc-theme-system.kwc-user-prefs-backdrop .kwc-notify-option,
.kwc-modal-backdrop.kwc-theme-system.kwc-user-prefs-backdrop .kwc-notify-option span {
  color: rgba(71,85,105,0.86) !important;
}

/* v4.5.0 follow-up: let DM/group inbox names use remaining row width before truncating. */
.kwc-dm-modal .kwc-dm-thread-list > .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  column-gap: 6px !important;
}
.kwc-dm-modal .kwc-dm-thread-list > .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-name {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.kwc-dm-modal .kwc-dm-thread-list > .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-badge {
  grid-column: 2 !important;
  grid-row: 1 !important;
  float: none !important;
  align-self: start !important;
}
.kwc-dm-modal .kwc-dm-thread-list > .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-preview {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

.kwc-pref-section-title {
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--kwc-ui-text-color, var(--kwc-text-color, inherit));
}

.kwc-notify-option-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kwc-notify-option-disabled input {
  cursor: not-allowed;
}

.kwc-pref-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  resize: vertical;
}

.kwc-group-title-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

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

.kwc-group-member-counts {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.82;
  padding: 1px 6px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18));
  border-radius: 999px;
  white-space: nowrap;
}

.kwc-group-visibility-badge,
.kwc-group-password-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.82;
  padding: 1px 6px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18));
  border-radius: 999px;
  white-space: nowrap;
  user-select: none;
}
.kwc-group-password-badge { padding-inline: 5px; }

.kwc-group-online-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kwc-group-online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #56d364;
  box-shadow: 0 0 0 2px rgba(86, 211, 100, 0.14);
}

.kwc-group-online-dot.kwc-offline {
  background: rgba(160, 160, 170, 0.65);
  box-shadow: none;
}

/* 5.3.0: unified Game/Web presence for compact lists and user profiles. */
.kwc-presence-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: 10px;
  line-height: 1.25;
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  white-space: nowrap;
  vertical-align: middle;
}

.kwc-presence-compact[role="button"] { cursor: pointer; }
.kwc-presence-compact[role="button"]:hover,
.kwc-presence-compact[role="button"]:focus {
  color: var(--kwc-link-color, #74c7ff);
  outline: none;
}

.kwc-presence-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--kwc-border-color, rgba(255,255,255,0.25));
}

.kwc-presence-game .kwc-presence-dot {
  background: var(--kwc-link-color, #74c7ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kwc-link-color, #74c7ff) 18%, transparent);
}

.kwc-presence-web .kwc-presence-dot {
  background: var(--kwc-text-color, #f4f4f4);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kwc-text-color, #f4f4f4) 14%, transparent);
}

.kwc-presence-offline .kwc-presence-dot { box-shadow: none; }

.kwc-user-profile-modal { width: min(390px, calc(100vw - 30px)); }
.kwc-user-profile-identity { margin-bottom: 12px; }
.kwc-user-profile-presence {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}
.kwc-user-profile-presence > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 7px;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.05));
}

/* v4.5.0 follow-up: keyword alert apply/status line. */
.kwc-pref-keyword-actions {
  align-items: center;
}

.kwc-pref-inline-status {
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  font-size: 11px;
  line-height: 1.35;
}


/* v4.5.0 follow-up: allow DM/group list names and metadata to use the available row width. */
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "name badge" "preview preview" !important;
  align-items: center !important;
  column-gap: 6px !important;
  row-gap: 2px !important;
}
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-name {
  grid-area: name !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-badge {
  grid-area: badge !important;
  justify-self: end !important;
}
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-preview {
  grid-area: preview !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-name,
.kwc-group-hidden-row > .kwc-dm-thread-name,
.kwc-group-title,
.kwc-group-title-main,
.kwc-group-title-name,
.kwc-admin-meta-identities {
  min-width: 0 !important;
  max-width: 100% !important;
}
.kwc-admin-meta-identities {
  width: 100% !important;
}
.kwc-admin-meta-user {
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}
.kwc-group-title-main {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.kwc-group-title-name {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.kwc-group-member-counts {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}


/* v4.5.0 follow-up fix: keyword/settings and DM/group metadata layout. */
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "name badge" "preview preview" !important;
  column-gap: 6px !important;
  row-gap: 2px !important;
  align-items: center !important;
}
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-name {
  grid-area: name !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-badge {
  grid-area: badge !important;
  float: none !important;
  justify-self: end !important;
}
.kwc-dm-modal .kwc-dm-thread:not(.kwc-admin-meta-row):not(.kwc-group-hidden-row) > .kwc-dm-thread-preview {
  grid-area: preview !important;
}
.kwc-admin-meta-row > .kwc-dm-thread-name,
.kwc-group-hidden-row > .kwc-dm-thread-name {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
.kwc-admin-meta-identities {
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.kwc-group-member-counts {
  cursor: pointer !important;
  user-select: none !important;
}
.kwc-group-member-counts:hover,
.kwc-group-member-counts:focus-visible {
  opacity: 1 !important;
  background: var(--kwc-surface-hover-bg, rgba(130,190,255,0.20)) !important;
  outline: none !important;
}


/* v4.5.0 final follow-up: avoid premature ellipsis in DM/group metadata identity rows. */
.kwc-dm-modal .kwc-admin-meta-row,
.kwc-dm-modal .kwc-group-hidden-row {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "name" "preview" "actions" !important;
  overflow: visible !important;
}
.kwc-dm-modal .kwc-admin-meta-row > .kwc-dm-thread-name,
.kwc-dm-modal .kwc-group-hidden-row > .kwc-dm-thread-name {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
.kwc-dm-modal .kwc-admin-meta-identities {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
.kwc-dm-modal .kwc-admin-meta-user {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
.kwc-dm-modal .kwc-admin-meta-actions {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
}


/* v4.5.0 follow-up: keep settings header actions fixed at the top and prevent preset empty text from being squeezed. */
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal-head h3 {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-modal-head-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-preset-row-stacked,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-preset-row.kwc-preset-row-stacked {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: stretch !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-preset-actions {
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-preset-actions-primary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-preset-actions-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-preset-actions .kwc-button {
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop #kwc-prefs-preset-select {
  width: 100% !important;
  min-width: 0 !important;
}


.kwc-notification-button {
  position: relative;
}

.kwc-notification-inbox-modal {
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kwc-notification-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: min(420px, 58vh);
}

.kwc-notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  color: inherit;
  padding: 8px 10px;
  cursor: pointer;
}

.kwc-notification-row:hover {
  background: var(--kwc-surface-hover-bg, rgba(255,255,255,0.12));
}

.kwc-notification-row.kwc-notification-unread {
  border-color: var(--kwc-focus-color, rgba(130,190,255,0.72));
  background: var(--kwc-surface-hover-bg, rgba(255,255,255,0.12));
}

.kwc-notification-row.kwc-notification-read {
  opacity: 0.68;
}

.kwc-notification-row.kwc-notification-unread .kwc-notification-row-title {
  font-weight: 800;
}

.kwc-notification-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.kwc-notification-row-body {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.82;
  font-size: 12px;
}

.kwc-notification-row-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.kwc-notification-row-state {
  font-size: 10px;
  font-weight: 700;
  color: var(--kwc-muted-color, currentColor);
}

.kwc-notification-unread .kwc-notification-row-state {
  color: var(--kwc-focus-color, currentColor);
}

.kwc-notification-row-time {
  opacity: 0.68;
  font-size: 11px;
  white-space: nowrap;
}

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

/* v4.5.1: emoji folder move controls. */
.kwc-admin-emoji-move-select {
  min-width: 130px;
  max-width: 220px;
  flex: 0 1 180px;
}

.kwc-admin-emoji-item-actions {
  flex-wrap: wrap;
}


/* 4.5.1 hotfix: minimized pill must stay clean.
   Only the title and restore button are allowed here; all other header buttons
   belong to the expanded chat window. */
#kwc-root.kwc-minimized .kwc-actions > :not(#kwc-min),
#kwc-root.kwc-minimized #kwc-dm,
#kwc-root.kwc-minimized #kwc-group,
#kwc-root.kwc-minimized #kwc-notifications,
#kwc-root.kwc-minimized #kwc-login,
#kwc-root.kwc-minimized #kwc-admin,
#kwc-root.kwc-minimized #kwc-pip,
#kwc-root.kwc-minimized #kwc-search-open {
  display: none !important;
}

#kwc-root.kwc-minimized .kwc-actions > #kwc-min {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.kwc-admin-meta-open {
  cursor: pointer;
}

.kwc-admin-meta-open:hover,
.kwc-admin-meta-open:focus-visible {
  background: rgba(255,255,255,0.11);
}

.kwc-admin-audit-notice {
  margin-bottom: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  font-size: 11px;
  line-height: 1.35;
}

/* Private-message delivery/read state (4.6.2): keep it beside the timestamp. */
.kwc-private-meta-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 2px;
  white-space: nowrap;
}
.kwc-delivery-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  opacity: .78;
  white-space: nowrap;
}
.kwc-delivery-pending { font-style: italic; }
.kwc-delivery-failed { opacity: 1; font-weight: 600; }
.kwc-delivery-retry {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.kwc-delivery-retry:hover,
.kwc-delivery-retry:focus-visible { opacity: .8; }

.kwc-read-receipt {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  opacity: .72;
  user-select: none;
  white-space: nowrap;
}
.kwc-read-receipt-group { font-variant-numeric: tabular-nums; }


/* Responsive KWC expanded header.
   Keep one row only while a useful title slot, status/admin control and all
   actions fit. RC22 intentionally wraps before the title disappears. In wrapped
   mode row 1 is identity + window controls and row 2 groups chat/event/notice
   actions separately from the login/account action. */
#kwc-root:not(.kwc-minimized) .kwc-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* On the one-row layout, flatten the primary wrapper so the visual order stays
   identity, DM/group/notification/login, PIP/min. */
#kwc-root:not(.kwc-minimized) .kwc-header-primary {
  display: contents !important;
}

#kwc-root:not(.kwc-minimized) .kwc-header-identity {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  order: 1 !important;
}

/* The title gives up space first. It is intentionally allowed to disappear at
   very small one-row widths so the status/admin control remains usable. */
#kwc-root:not(.kwc-minimized) .kwc-header-identity .kwc-title {
  /* Keep the status/admin control physically attached to the visible end of
     the title. The title may shrink to zero, but it must not grow to consume
     spare row width and push the admin control toward the center/right. */
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Status becomes the admin button for eligible users, so never shrink it. */
#kwc-root:not(.kwc-minimized) .kwc-header-identity .kwc-status {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#kwc-root:not(.kwc-minimized) .kwc-actions-secondary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  order: 2 !important;
}

#kwc-root:not(.kwc-minimized) .kwc-actions-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: 0 !important;
  order: 3 !important;
}

/* Dynamic two-row fallback. This is not tied to a fixed pixel breakpoint; the
   frontend enables it only when the non-shrinkable status/admin control would
   otherwise be clipped by the visible action buttons. */
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-header {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px !important;
}

#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-header-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-header-identity {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-actions-primary {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-actions-secondary {
  justify-content: flex-end !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* Only wrapped mode has the extra header row, so only wrapped mode moves the
   floating search controls down by the extra ~29px. */
#kwc-root.kwc-header-wrapped .kwc-search-float { top: 83px; }
#kwc-root.kwc-header-wrapped.kwc-has-pinned-bar .kwc-search-float { top: 127px; }

/* Preserve the original compact minimized pill: title + restore only. */
#kwc-root.kwc-minimized .kwc-header {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

#kwc-root.kwc-minimized .kwc-header-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
}

#kwc-root.kwc-minimized .kwc-header-identity {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#kwc-root.kwc-minimized .kwc-actions-secondary {
  display: none !important;
}

/* 5.0.0: bulk filter-word list management. */
.kwc-filter-list-hint {
  display: block;
  margin: 6px 0;
  opacity: .72;
  line-height: 1.35;
  font-size: 11px;
}

.kwc-filter-list-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}

.kwc-filter-list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255,255,255,0.045);
}

.kwc-filter-list-card-main {
  min-width: 0;
  flex: 1 1 auto;
}

.kwc-filter-list-card-main small {
  display: block;
  opacity: .72;
  line-height: 1.35;
}

.kwc-filter-list-editor {
  margin-top: 7px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}

.kwc-filter-list-editor[hidden] {
  display: none !important;
}

.kwc-filter-list-editor-top {
  grid-template-columns: minmax(0, 1fr) auto;
}

.kwc-filter-mode-field small {
  margin-top: 2px;
  opacity: .68;
  font-weight: 400;
  line-height: 1.3;
}

@media (max-width: 420px) {
  .kwc-filter-list-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .kwc-filter-list-card .kwc-filter-rule-card-actions {
    align-self: flex-end;
    flex-wrap: wrap;
  }
  .kwc-filter-list-editor-top {
    grid-template-columns: 1fr;
  }
}

/* 5.0.0 admin Filter/Settings grouping. */
.kwc-admin-section-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kwc-admin-section-card {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10));
  border-radius: 10px;
  background: var(--kwc-surface-bg, rgba(255,255,255,0.055));
  color: var(--kwc-text-color, inherit);
}

.kwc-admin-section-stack > .kwc-admin-section-card {
  margin-top: 0;
}

.kwc-admin-section-title,
.kwc-admin-subsection-title {
  font-weight: 700;
  line-height: 1.3;
}

.kwc-admin-section-title {
  margin: 0 0 7px;
  font-size: 12px;
}

.kwc-admin-subsection-title {
  margin: 10px 0 6px;
  padding-top: 9px;
  border-top: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10));
  font-size: 11px;
  opacity: .88;
}

.kwc-admin-group-list {
  max-height: none;
  overflow: visible;
  padding: 0 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.08));
}

.kwc-filter-management-card > .kwc-filter-section-head:first-child {
  margin-top: 0;
}

.kwc-filter-management-card .kwc-filter-list-list,
.kwc-filter-management-card .kwc-filter-rule-list {
  max-height: 210px;
}

.kwc-filter-test-card-grouped {
  margin-top: 0;
}

@media (max-width: 420px) {
  .kwc-admin-section-card {
    padding: 8px;
  }
  .kwc-filter-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .kwc-filter-section-head .kwc-row {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* 5.0.0: borderless admin record/filter-setting rows.
   Account/session lists and the Filter settings groups use the same visual
   grammar as filter-word list cards: spacing and subtle surfaces instead of
   table-like cell borders. */
#kwc-root {
  --kwc-admin-list-bg: rgba(255,255,255,0.06);
  --kwc-admin-row-bg: rgba(255,255,255,0.045);
}

#kwc-root.kwc-theme-dark,
#kwc-root.kwc-theme-system {
  --kwc-admin-list-bg: rgba(255,255,255,0.06);
  --kwc-admin-row-bg: rgba(255,255,255,0.045);
}

#kwc-root.kwc-theme-light {
  --kwc-admin-list-bg: rgba(148,163,184,0.16);
  --kwc-admin-row-bg: rgba(255,255,255,0.72);
}

#kwc-root.kwc-theme-high-contrast {
  --kwc-admin-list-bg: #111111;
  --kwc-admin-row-bg: #000000;
}

@media (prefers-color-scheme: light) {
  #kwc-root.kwc-theme-system {
    --kwc-admin-list-bg: rgba(148,163,184,0.16);
    --kwc-admin-row-bg: rgba(255,255,255,0.72);
  }
}

/* Keep the already-clean filter-word list as the visual reference. */
.kwc-filter-list-list,
.kwc-admin-record-list,
.kwc-filter-settings-stack .kwc-admin-group-list {
  background: var(--kwc-admin-list-bg, rgba(255,255,255,0.06)) !important;
}

.kwc-admin-record-list,
.kwc-filter-settings-stack .kwc-admin-group-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kwc-filter-settings-stack .kwc-admin-group-list {
  padding: 7px;
  border: 0 !important;
}

.kwc-filter-list-card,
.kwc-admin-record-list .kwc-admin-item,
.kwc-filter-settings-stack .kwc-admin-item {
  background: var(--kwc-admin-row-bg, rgba(255,255,255,0.045)) !important;
  border: 0 !important;
  border-radius: 7px;
  box-shadow: none !important;
}

.kwc-admin-record-list .kwc-admin-item,
.kwc-filter-settings-stack .kwc-admin-item {
  padding: 8px;
}

/* Detached admin modal: keep the resolved user theme on the new surfaces. */
.kwc-modal-backdrop.kwc-theme-dark .kwc-filter-list-list,
.kwc-modal-backdrop.kwc-theme-dark .kwc-admin-record-list,
.kwc-modal-backdrop.kwc-theme-dark .kwc-filter-settings-stack .kwc-admin-group-list,
.kwc-modal-backdrop.kwc-theme-light .kwc-filter-list-list,
.kwc-modal-backdrop.kwc-theme-light .kwc-admin-record-list,
.kwc-modal-backdrop.kwc-theme-light .kwc-filter-settings-stack .kwc-admin-group-list,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-filter-list-list,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-admin-record-list,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-filter-settings-stack .kwc-admin-group-list,
.kwc-modal-backdrop.kwc-theme-system .kwc-filter-list-list,
.kwc-modal-backdrop.kwc-theme-system .kwc-admin-record-list,
.kwc-modal-backdrop.kwc-theme-system .kwc-filter-settings-stack .kwc-admin-group-list {
  background: var(--kwc-admin-list-bg, var(--kwc-surface-bg, rgba(255,255,255,0.06))) !important;
  border-color: transparent !important;
}

.kwc-modal-backdrop.kwc-theme-dark .kwc-filter-list-card,
.kwc-modal-backdrop.kwc-theme-dark .kwc-admin-record-list .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-dark .kwc-filter-settings-stack .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-light .kwc-filter-list-card,
.kwc-modal-backdrop.kwc-theme-light .kwc-admin-record-list .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-light .kwc-filter-settings-stack .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-filter-list-card,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-admin-record-list .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-filter-settings-stack .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-system .kwc-filter-list-card,
.kwc-modal-backdrop.kwc-theme-system .kwc-admin-record-list .kwc-admin-item,
.kwc-modal-backdrop.kwc-theme-system .kwc-filter-settings-stack .kwc-admin-item {
  background: var(--kwc-admin-row-bg, rgba(255,255,255,0.045)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 5.0.0: unified account/session panel + rounded admin setting groups.
   Filter and Settings use the same visual grammar as the filter-word list:
   one rounded list surface, spaced rounded rows, and no table-like dividers. */
.kwc-filter-settings-stack .kwc-admin-group-list,
.kwc-settings-stack .kwc-admin-group-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 7px !important;
  background: var(--kwc-admin-list-bg, rgba(255,255,255,0.06)) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.kwc-filter-settings-stack .kwc-admin-setting-item,
.kwc-settings-stack .kwc-admin-setting-item,
.kwc-modal-backdrop .kwc-filter-settings-stack .kwc-admin-setting-item,
.kwc-modal-backdrop .kwc-settings-stack .kwc-admin-setting-item {
  margin: 0 !important;
  padding: 8px !important;
  background: var(--kwc-admin-row-bg, rgba(255,255,255,0.045)) !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.kwc-filter-settings-stack .kwc-admin-setting-item::before,
.kwc-filter-settings-stack .kwc-admin-setting-item::after,
.kwc-settings-stack .kwc-admin-setting-item::before,
.kwc-settings-stack .kwc-admin-setting-item::after {
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kwc-admin-account-session-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kwc-admin-record-section > h4 {
  margin: 0 0 6px;
}

.kwc-admin-account-session-stack .kwc-admin-record-list {
  margin: 0;
}

/* Keep the accepted account/session card design unchanged. */
.kwc-admin-account-session-stack .kwc-admin-record-list .kwc-admin-item {
  border: 0 !important;
  box-shadow: none !important;
}

/* 5.0.0: admin emoji workspace layout.
   Keep upload limits beside upload actions, and keep folder actions next to
   the folder they affect instead of collecting unrelated buttons in one row. */
.kwc-admin-emoji-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
}

.kwc-admin-emoji-toolbar .kwc-admin-emoji-upload-row {
  margin-bottom: 0;
}

.kwc-admin-emoji-limit-lines {
  min-width: 0;
  justify-self: start;
  align-self: center;
  text-align: left;
  line-height: 1.35;
}

.kwc-admin-emoji-limit-lines small {
  white-space: nowrap;
}

.kwc-admin-emoji-reaction-actions {
  justify-self: end;
  display: flex;
  align-items: center;
}

.kwc-admin-reaction-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kwc-admin-reaction-heading h4 {
  margin: 0 !important;
}

/* Reaction behavior uses the same rounded Settings form grammar as the rest
   of Web Admin. The checkbox belongs inside the rounded row; no special
   text-only box or square outer surface is drawn here. */
.kwc-admin-reaction-settings-stack {
  margin: 9px 0 12px;
}

.kwc-admin-reaction-options-card {
  margin-top: 0;
}

.kwc-admin-reaction-options .kwc-admin-setting-item > span {
  flex: 1 1 auto;
}

.kwc-admin-reaction-options .kwc-admin-setting-item small {
  opacity: .72;
  font-weight: 400;
  line-height: 1.3;
}

.kwc-reaction-admin-aliases {
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
  resize: vertical;
  line-height: 1.45;
}

.kwc-admin-emoji-pack-actions {
  gap: 7px;
}

.kwc-admin-emoji-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 10px;
  min-width: 0;
}

.kwc-admin-emoji-control-main,
.kwc-admin-emoji-control-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kwc-admin-emoji-control-main {
  flex-wrap: nowrap;
}

.kwc-admin-emoji-control-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kwc-admin-emoji-control-actions:empty {
  display: none;
}

.kwc-admin-emoji-control-label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12px;
}

.kwc-admin-emoji-selected-row #kwc-emoji-pack-select {
  flex: 1 1 210px;
  width: auto;
  max-width: 290px;
  min-width: 120px;
}

.kwc-admin-emoji-pack-count {
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: 0.72;
}

.kwc-admin-emoji-move-row .kwc-admin-emoji-move-select {
  flex: 1 1 180px;
  width: auto;
  min-width: 120px;
  max-width: 240px;
}

.kwc-admin-emoji-control-row .kwc-button {
  min-height: 32px;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .kwc-admin-emoji-toolbar {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .kwc-admin-emoji-limit-lines {
    justify-self: stretch;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 12px;
  }
  .kwc-admin-emoji-reaction-actions {
    justify-self: stretch;
  }
  .kwc-admin-emoji-reaction-actions .kwc-button {
    width: 100%;
  }
  .kwc-admin-emoji-control-row {
    grid-template-columns: 1fr;
  }
  .kwc-admin-emoji-control-actions {
    justify-content: flex-start;
    padding-left: 0;
  }
}

@media (max-width: 440px) {
  .kwc-admin-emoji-control-main {
    flex-wrap: wrap;
  }
  .kwc-admin-emoji-control-label {
    flex-basis: 100%;
  }
  .kwc-admin-emoji-selected-row #kwc-emoji-pack-select,
  .kwc-admin-emoji-move-row .kwc-admin-emoji-move-select {
    flex: 1 1 180px;
    max-width: none;
  }
}

/* Custom content-filter rule examples. */
.kwc-filter-rule-guide {
  margin: 7px 0 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  font-size: 11px;
}

.kwc-filter-rule-guide > summary {
  cursor: pointer;
  font-weight: 700;
}

.kwc-filter-rule-guide-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.kwc-filter-rule-guide-body p,
.kwc-filter-rule-guide-body small {
  margin: 0;
  line-height: 1.45;
  opacity: .82;
}

.kwc-filter-rule-guide-example {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kwc-filter-rule-guide-example code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(0,0,0,0.20);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  line-height: 1.4;
}

.kwc-filter-rule-guide-test {
  padding-top: 2px;
}

/* 5.1.0: compact configured newline-token rows.
   Empty rows keep one normal blank line, while emoji-only rows remove the
   font leading that otherwise leaves a visible gap between stacked emojis. */
.kwc-token-line {
  display: block;
  margin: 0;
  padding: 0;
}
.kwc-token-line-empty {
  min-height: 1em;
  line-height: 1em;
}
.kwc-token-line-emoji-only {
  min-height: 0;
  line-height: 0;
}
.kwc-token-line-emoji-only .kwc-custom-emoji {
  vertical-align: top;
}

/* Private DM/group reply + reaction actions. Detached private-chat modals live
   outside #kwc-root, so mirror the public hover model explicitly. Keep the
   action group in layout but invisible/non-clickable until hover/focus/touch.
   Reserving its width also prevents Reply from moving underneath a pointer that
   was pressed on React. Child action rules inherit the group's visibility state;
   they must never force themselves visible independently. */
.kwc-dm-modal-backdrop .kwc-dm-message .kwc-dm-message-meta .kwc-mini-actions {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.kwc-dm-modal-backdrop .kwc-dm-message:hover .kwc-dm-message-meta .kwc-mini-actions,
.kwc-dm-modal-backdrop .kwc-dm-message:focus-within .kwc-dm-message-meta .kwc-mini-actions,
.kwc-dm-modal-backdrop .kwc-dm-message.kwc-reaction-touch-open .kwc-dm-message-meta .kwc-mini-actions {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.kwc-dm-modal-backdrop .kwc-dm-message .kwc-mini-actions .kwc-reply-action,
.kwc-dm-modal-backdrop .kwc-dm-message .kwc-mini-actions .kwc-reaction-action {
  display: inline-block !important;
  visibility: inherit !important;
  opacity: inherit !important;
  pointer-events: inherit !important;
}
.kwc-dm-modal-backdrop .kwc-dm-message-meta .kwc-time-actions {
  /* Do not keep time/reply/read-state in one reserved flex block. Let each
     item participate in the metadata flow so long dates wrap naturally. */
  display: contents !important;
}
.kwc-dm-modal-backdrop .kwc-reply-ref {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 4px;
  padding: 4px 7px;
  border: 0;
  border-left: 3px solid rgba(255,255,255,0.28);
  border-radius: 7px;
  background: rgba(255,255,255,0.08);
  color: var(--kwc-text-color, #fff);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.kwc-dm-modal-backdrop .kwc-reply-ref:hover {
  background: rgba(255,255,255,0.13);
}
.kwc-dm-modal-backdrop .kwc-reply-ref-sender {
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kwc-dm-modal-backdrop .kwc-reply-ref-preview {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  opacity: 0.78;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kwc-dm-modal-backdrop .kwc-reply-compose {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 9px 6px;
  padding: 5px 6px;
  border-left: 3px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
.kwc-dm-modal-backdrop .kwc-reply-compose.kwc-hidden {
  display: none !important;
}
.kwc-dm-modal-backdrop .kwc-reply-compose-main {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--kwc-text-color, #fff);
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.kwc-dm-modal-backdrop .kwc-reply-compose-label,
.kwc-dm-modal-backdrop .kwc-reply-compose-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kwc-dm-modal-backdrop .kwc-reply-compose-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.kwc-dm-modal-backdrop .kwc-reply-compose-preview {
  margin-top: 1px;
  font-size: 11px;
  opacity: 0.78;
  line-height: 1.22;
}
.kwc-dm-modal-backdrop .kwc-reply-cancel {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 14px;
  line-height: 20px;
}
.kwc-dm-modal-backdrop .kwc-reply-highlight {
  animation: kwc-reply-highlight 2.4s ease-out;
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-reply-ref,
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-reply-compose {
  border-left-color: rgba(15, 23, 42, 0.22);
  background: rgba(15, 23, 42, 0.06);
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-reply-ref:hover {
  background: rgba(15, 23, 42, 0.1);
}
@media (prefers-color-scheme: light) {
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-reply-ref,
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-reply-compose {
    border-left-color: rgba(15, 23, 42, 0.22);
    background: rgba(15, 23, 42, 0.06);
  }
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-reply-ref:hover {
    background: rgba(15, 23, 42, 0.1);
  }
}

/* Group-room membership events are persistent room events, not ordinary chat messages. */
.kwc-group-form-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
}

.kwc-group-form-toggle input {
  margin: 0;
}

.kwc-group-membership-event {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 7px 0;
  padding: 3px 6px;
  opacity: .78;
  text-align: center;
  font-family: var(--kwc-chat-font-family, inherit);
  font-size: var(--kwc-chat-message-font-size, var(--kwc-message-font-size, 13px));
  text-shadow: var(--kwc-chat-text-shadow, var(--kwc-text-shadow, none));
}

.kwc-group-membership-event-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kwc-group-membership-event-time {
  flex: 0 0 auto;
  opacity: .72;
  font-family: inherit;
  font-size: inherit;
  text-shadow: inherit;
}

/* 5.1.0: compact custom emoji sizing for notification inbox and pinned-message UI. */
/* Compact custom-emoji contexts use glyph-like sizing when text is mixed in.
   Emoji-only notification rows and the collapsed pinned preview use natural image
   size with a cap; smaller source images are never enlarged to the cap. */
.kwc-notification-inbox-backdrop .kwc-notification-row-title .kwc-custom-emoji,
.kwc-notification-inbox-backdrop .kwc-notification-row-body .kwc-custom-emoji {
  width: auto !important;
  height: 1.3em !important;
  max-width: none !important;
  max-height: 1.3em !important;
  vertical-align: -0.22em;
}

.kwc-notification-inbox-backdrop .kwc-notification-row-title.kwc-emoji-only,
.kwc-notification-inbox-backdrop .kwc-notification-row-body.kwc-emoji-only {
  overflow: hidden;
  text-overflow: clip;
  line-height: normal;
}

.kwc-notification-inbox-backdrop .kwc-notification-row-title.kwc-emoji-only .kwc-custom-emoji,
.kwc-notification-inbox-backdrop .kwc-notification-row-body.kwc-emoji-only .kwc-custom-emoji {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 50px !important;
  vertical-align: middle;
}

#kwc-root .kwc-pinned-open .kwc-custom-emoji {
  width: auto !important;
  height: 1.3em !important;
  max-width: none !important;
  max-height: 1.3em !important;
  vertical-align: -0.22em;
}

#kwc-root .kwc-pinned-open #kwc-pinned-label.kwc-emoji-only .kwc-custom-emoji,
#kwc-root .kwc-pinned-open #kwc-group-pinned-label.kwc-emoji-only .kwc-custom-emoji,
#kwc-root .kwc-pinned-open #kwc-pinned-label .kwc-pinned-summary-title.kwc-emoji-only .kwc-custom-emoji,
#kwc-root .kwc-pinned-open #kwc-group-pinned-label .kwc-pinned-summary-title.kwc-emoji-only .kwc-custom-emoji {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--kwc-pinned-emoji-max-height, 28px) !important;
  vertical-align: middle;
}

#kwc-root .kwc-pinned-open #kwc-pinned-label .kwc-pinned-summary-title.kwc-emoji-only,
#kwc-root .kwc-pinned-open #kwc-group-pinned-label .kwc-pinned-summary-title.kwc-emoji-only {
  display: flex;
  align-items: center;
  line-height: normal;
}

.kwc-pinned-backdrop .kwc-pinned-item .kwc-custom-emoji {
  width: auto !important;
  height: 1.3em !important;
  max-width: none !important;
  max-height: 1.3em !important;
  vertical-align: -0.22em;
}

/* 5.2.0 public message reactions */
.kwc-msg { position: relative; }
.kwc-reactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  min-height: 0;
}
.kwc-reactions:empty { display: none; }
.kwc-reaction-wrap { position: relative; display: inline-flex; align-items: center; }
.kwc-reaction-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: inherit;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: default;
}
.kwc-reaction-pill.kwc-active {
  border-color: rgba(120,185,255,0.72);
  background: rgba(90,155,230,0.18);
  cursor: pointer;
}
.kwc-reaction-pill.kwc-active:hover { background: rgba(255,255,255,0.14); }
.kwc-reactions-disabled .kwc-reaction-pill { cursor: default; pointer-events: none; }
/* New reactions are opened from the message-level Reaction action beside
   Reply. Empty messages therefore render no reaction row and keep the original
   8px message spacing. Existing chips stay below the message; only a chip that
   belongs to the current user is clickable, and clicking it removes that
   reaction. */
.kwc-reaction-count { opacity: .88; }
.kwc-reaction-emoji {
  width: 17px;
  height: 17px;
  object-fit: contain;
  vertical-align: middle;
}
.kwc-reaction-tooltip {
  display: none;
  position: absolute;
  z-index: 1000007;
  left: 0;
  bottom: calc(100% + 5px);
  width: max-content;
  min-width: 112px;
  max-width: min(260px, calc(100vw - 20px));
  padding: 6px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 7px;
  background: rgba(20,20,24,.98);
  color: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,.36);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}
.kwc-reaction-wrap:hover > .kwc-reaction-tooltip,
.kwc-reaction-wrap:focus-within > .kwc-reaction-tooltip { display: block; }
.kwc-reaction-tooltip-title { display: block; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwc-reaction-actors {
  display: block;
  max-height: calc(1.35em * 4 + 8px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.kwc-reaction-actor-row { display: block; min-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwc-reaction-picker {
  /* 5.3.0 RC27: reaction choices must remain comfortably tappable/readable.
     Do not squeeze the picker back to tiny cells just to avoid scrollbars; both
     axes may scroll when a mobile viewport cannot fit the full reaction grid. */
  --kwc-reaction-picker-cell: clamp(36px, 10vw, 40px);
  --kwc-reaction-picker-icon: clamp(21px, 6vw, 24px);
  position: fixed;
  z-index: 1000005;
  width: min(380px, calc(100vw - 12px));
  max-height: min(420px, calc(100vh - 12px));
  overflow: auto;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9px;
  background: rgba(20,20,24,0.99);
  color: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.42);
  font-family: inherit;
}
.kwc-reaction-categories {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  padding-bottom: 2px;
}
.kwc-reaction-category,
.kwc-reaction-choice {
  min-width: var(--kwc-reaction-picker-cell);
  height: var(--kwc-reaction-picker-cell);
  border: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.08);
  color: inherit;
  cursor: pointer;
  font-size: var(--kwc-reaction-picker-icon);
}
.kwc-reaction-category {
  flex: 0 0 var(--kwc-reaction-picker-cell);
  font-size: clamp(19px, 5.5vw, 22px);
}
.kwc-reaction-category.kwc-active { outline: 2px solid rgba(120,185,255,.75); outline-offset: -2px; background: rgba(90,155,230,.18); }
.kwc-reaction-category:hover,
.kwc-reaction-choice:hover { background: rgba(255,255,255,0.16); }
.kwc-reaction-input-row {
  display: flex;
  gap: 5px;
  margin: 7px 0;
}
.kwc-reaction-input { min-width: 0; flex: 1 1 auto; }
.kwc-reaction-search { flex: 0 0 auto; }
.kwc-reaction-grid {
  display: grid;
  grid-template-columns: repeat(8, var(--kwc-reaction-picker-cell));
  grid-auto-rows: var(--kwc-reaction-picker-cell);
  justify-content: start;
  align-content: start;
  gap: 5px;
  max-height: min(252px, 48vh);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 0 2px;
}
.kwc-reaction-choice .kwc-reaction-emoji {
  width: clamp(26px, 7vw, 28px);
  height: clamp(26px, 7vw, 28px);
}
.kwc-reaction-empty { grid-column: 1 / -1; padding: 18px 8px; text-align: center; opacity: .7; font-size: 11px; }
.kwc-reaction-admin-list { width: 100%; box-sizing: border-box; resize: vertical; min-height: 68px; font-size: 18px; line-height: 1.5; }
#kwc-root.kwc-theme-light ~ .kwc-reaction-picker,
.kwc-theme-light .kwc-reaction-picker,
#kwc-root.kwc-theme-light ~ * .kwc-reaction-tooltip,
.kwc-theme-light .kwc-reaction-tooltip {
  background: rgba(250,250,252,0.99);
  color: #17171b;
  border-color: rgba(0,0,0,0.14);
}
/* KWC 5.2.0 conversation archive + event-driven typing indicators. */
.kwc-typing-anchor {
  position: relative;
}
.kwc-typing-indicator {
  position: absolute;
  left: 4px;
  bottom: calc(100% + 5px);
  z-index: 36;
  max-width: calc(100% - 8px);
  min-height: 20px;
  padding: 3px 10px 4px;
  box-sizing: border-box;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 999px;
  background: rgba(var(--kwc-panel-bg-rgb, 18,18,22), 0.97);
  box-shadow: 0 3px 12px var(--kwc-shadow-color, rgba(0,0,0,0.34));
  opacity: 0.98;
  font-size: var(--kwc-typing-font-size, 13px);
  line-height: 1.25;
  color: var(--kwc-ui-text-color, var(--kwc-text-color, #fff));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kwc-typing-identity[data-real-sender] {
  cursor: pointer;
  font-weight: 650;
}
.kwc-typing-identity[data-real-sender]:hover,
.kwc-typing-identity[data-real-sender]:focus {
  text-decoration: underline;
}
.kwc-private-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding-right: 10px;
  border-bottom: 1px solid var(--kwc-border-color, rgba(255,255,255,0.10));
}
.kwc-private-title-row > .kwc-dm-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 0 !important;
}
/* Match the group-chat title bar: the Back hover surface spans the full title row,
   including the settings-button area, instead of stopping at a visual seam before the button. */
.kwc-private-title-row.kwc-private-title-row-back:hover {
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.10));
}
.kwc-private-title-row.kwc-private-title-row-back > .kwc-dm-title.kwc-dm-title-back:hover {
  background: transparent;
}
.kwc-private-title-row > .kwc-private-title-actions {
  min-width: 0;
}
.kwc-private-title-actions,
.kwc-group-actions {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.kwc-group-modal .kwc-group-title:not(.kwc-admin-meta-row):not(.kwc-group-title-audit) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "main actions" !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-audit {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "main meta" !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.kwc-group-modal .kwc-group-title > .kwc-group-title-main { grid-area: main; overflow: hidden; }
.kwc-group-modal .kwc-group-title > .kwc-group-actions { grid-area: actions; }
.kwc-group-modal .kwc-group-title > small { grid-area: meta; min-width: 0; max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwc-group-modal .kwc-group-title-main { width: 100%; min-width: 0 !important; }
.kwc-group-modal .kwc-group-title-name { min-width: 0 !important; flex: 1 1 auto !important; }
.kwc-archive-selection-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.18));
  border-radius: 8px;
  background: var(--kwc-surface-2, rgba(255,255,255,0.07));
  font-size: 12px;
}
.kwc-archive-selecting .kwc-msg { cursor: pointer !important; }
.kwc-msg.kwc-archive-range-start,
.kwc-msg.kwc-archive-range-end,
.kwc-msg.kwc-archive-range-selected {
  outline: 2px solid var(--kwc-link-color, #60a5fa);
  outline-offset: -1px;
}
.kwc-msg.kwc-archive-range-selected { background: color-mix(in srgb, var(--kwc-link-color, #60a5fa) 10%, transparent) !important; }
.kwc-archive-list { display: flex; flex-direction: column; gap: 7px; max-height: min(60vh, 520px); overflow: auto; }
.kwc-archive-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; align-items: center; padding: 9px; border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14)); border-radius: 9px; }
.kwc-archive-row-main { min-width: 0; }
.kwc-archive-row-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwc-archive-row-meta { font-size: 11px; opacity: .72; }
.kwc-archive-row-actions { display: inline-flex; flex-wrap: nowrap; gap: 5px; }
.kwc-archive-viewer { width: min(780px, 94vw); max-height: 92vh; }
.kwc-archive-view-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kwc-archive-view-head > div:first-child { min-width: 0; }
.kwc-archive-view-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwc-archive-view-meta { font-size: 11px; opacity: .72; }
.kwc-archive-messages { overflow: auto; max-height: 70vh; padding: 8px 3px; }
.kwc-archive-date-separator { text-align: center; font-size: 11px; opacity: .68; margin: 14px 0 8px; }
.kwc-archive-message { position: relative; margin-bottom: 8px; }
.kwc-archive-identity { font-weight: 700; }
.kwc-archive-server-badge { font-size: 10px; opacity: .76; margin-right: 4px; }
.kwc-archive-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kwc-archive-reactions .kwc-reaction-pill { pointer-events: none; }
.kwc-archive-image { display: block; max-width: min(100%, 720px); max-height: 720px; object-fit: contain; margin-top: 6px; border-radius: 8px; }
.kwc-archive-attachment-lost { font-size: 11px; opacity: .72; margin-top: 4px; }
.kwc-archive-reply { border-left: 3px solid var(--kwc-border-color, rgba(255,255,255,.24)); padding: 3px 7px; margin: 4px 0; font-size: 11px; opacity: .82; }
.kwc-archive-reply-sender { font-weight: 700; margin-bottom: 1px; }
@media print {
  .kwc-archive-print .kwc-button, .kwc-archive-print .kwc-private-message-delete, .kwc-archive-print .kwc-mini-actions { display: none !important; }
  .kwc-archive-print .kwc-archive-messages { max-height: none !important; overflow: visible !important; }
  .kwc-archive-print .kwc-archive-message { break-inside: avoid; page-break-inside: avoid; }
  .kwc-archive-print .kwc-archive-image { max-height: 680px; break-inside: avoid; }
}

/* KWC 5.2.0: reaction identity toggle and group-room polish. */
.kwc-reaction-actor-toggle {
  cursor: pointer;
  border-radius: 3px;
}
.kwc-reaction-actor-toggle:hover,
.kwc-reaction-actor-toggle:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* The group conversation Settings menu has more actions than the generic
   account-action row. Keep every button inside the modal at all widths. */
.kwc-conversation-settings-modal {
  width: min(360px, calc(100vw - 24px)) !important;
  box-sizing: border-box !important;
}
.kwc-conversation-settings-modal .kwc-account-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.kwc-conversation-settings-modal .kwc-account-actions .kwc-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
@media (max-width: 330px) {
  .kwc-conversation-settings-modal .kwc-account-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 5.3.0 private-conversation header tools. */
.kwc-private-window-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.kwc-private-window-tool {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.kwc-private-title-actions,
.kwc-group-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kwc-private-search-scope {
  margin-top: 2px;
  max-width: min(58vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kwc-muted-color, rgba(255,255,255,0.68));
  font-size: 12px;
  font-weight: 500;
}



/* 5.3.0 RC5: manual Busy presence and profile-owned name display selector. */
.kwc-presence-busy .kwc-presence-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

.kwc-user-profile-name-mode {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 10px 0;
}

.kwc-user-profile-status-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr);
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.kwc-user-profile-name-mode-actions {
  display: inline-flex;
  gap: 5px;
}

.kwc-user-profile-name-mode-actions .kwc-button.kwc-active {
  font-weight: 700;
  outline: 1px solid currentColor;
}

/* 5.3.0 account/profile entry */
.kwc-account-profile-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.kwc-account-profile-name {
  min-width: 0;
  flex: 1 1 auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.17em;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kwc-account-profile-name:hover,
.kwc-account-profile-name:focus-visible {
  text-decoration: none;
}

/* 5.3.0 profile card */
.kwc-user-profile-modal { width: min(430px, calc(100vw - 30px)); }
.kwc-user-profile-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.kwc-user-profile-top-main { min-width: 0; flex: 1 1 auto; }
.kwc-user-profile-avatar { width: 82px; height: 82px; flex: 0 0 82px; position: relative; overflow: hidden; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); display: grid; place-items: center; }
.kwc-user-profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.kwc-user-profile-avatar-placeholder { font-size: 30px; font-weight: 800; opacity: .72; }
.kwc-user-profile-avatar-mode, .kwc-user-profile-about-edit { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; font-size: 12px; font-weight: 700; }
.kwc-user-profile-avatar-actions { margin: 0 0 10px; }
.kwc-user-profile-about { margin: 10px 0; padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,0.06); }
.kwc-user-profile-about > span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; opacity: .72; }
.kwc-user-profile-about p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kwc-user-profile-about-edit textarea { box-sizing: border-box; width: 100%; min-height: 72px; resize: vertical; line-height: 1.4; }

/* 5.3.0 web @mention autocomplete */
.kwc-mention-autocomplete {
  position: fixed;
  z-index: 1000005;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.14));
  border-radius: 9px;
  background: rgba(var(--kwc-modal-bg-rgb, 29,29,36), 0.98);
  color: var(--kwc-text-color, #fff);
  box-shadow: 0 10px 28px var(--kwc-shadow-color, rgba(0,0,0,0.35));
  backdrop-filter: blur(10px);
}

.kwc-mention-option {
  width: 100%;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.kwc-mention-option:hover,
.kwc-mention-option.kwc-active {
  background: var(--kwc-surface-hover-bg, rgba(255,255,255,0.14));
}
.kwc-mention-option.kwc-active {
  outline: 1px solid var(--kwc-border-color, rgba(255,255,255,0.24));
  outline-offset: -1px;
}

.kwc-mention-option-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.kwc-mention-option-meta {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kwc-muted-color, rgba(255,255,255,0.72));
  font-size: 11px;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .kwc-mention-autocomplete { max-height: 196px; }
  .kwc-mention-option { min-height: 46px; padding: 7px 9px; }
}


/* RC15 profile blocking and moderation controls */
.kwc-pref-subsection { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
.kwc-pref-blocked-users { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.kwc-pref-blocked-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kwc-user-profile-identity-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kwc-user-profile-block { margin-left: 2px; }
.kwc-admin-user-controls, .kwc-admin-moderator-permissions { display: flex; flex-direction: column; gap: 8px; }
.kwc-admin-user-control > div,
.kwc-admin-moderator-permissions > .kwc-admin-item > div { width: 100%; }
.kwc-admin-capability-grid {
  /* Moderator capabilities are intentionally split into two balanced groups
     (5/4 for the current nine capabilities) instead of relying on auto-flow. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0;
}
.kwc-admin-capability-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kwc-admin-capability-grid label, .kwc-admin-user-control label { display: inline-flex; align-items: center; gap: 5px; }
.kwc-admin-user-controls > .kwc-admin-item,
.kwc-admin-moderator-permissions > .kwc-admin-item {
  /* 로그인 사용자 제한과 모데레이터 권한은 하나의 스크롤 표이므로 행마다 중첩 카드 외곽선을 만들지 않는다.
     Signed-in restrictions and moderator permissions are single scrolling tables, so rows must not render nested card outlines. */
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
}
.kwc-moderator-real-name { margin-left: 6px; font-size: .9em; opacity: .72; }

@media (max-width: 420px) {
  .kwc-admin-capability-grid { grid-template-columns: minmax(0, 1fr); }
}

#kwc-root .kwc-msg.kwc-has-delete-action { position: relative; }
#kwc-root .kwc-public-message-delete {
  position: absolute;
  top: 5px;
  right: 6px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
#kwc-root .kwc-msg:hover > .kwc-public-message-delete,
#kwc-root .kwc-msg:focus-within > .kwc-public-message-delete,
#kwc-root .kwc-public-message-delete:focus {
  opacity: 1;
  pointer-events: auto;
  background: var(--kwc-button-hover-bg, rgba(255,255,255,0.16));
}

/* Public, DM and group actions use the same hover-only presentation. */
#kwc-root .kwc-msg > .kwc-meta .kwc-mini-actions,
.kwc-dm-modal-backdrop .kwc-dm-message > .kwc-dm-message-meta .kwc-mini-actions {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#kwc-root .kwc-msg:hover > .kwc-meta .kwc-mini-actions,
#kwc-root .kwc-msg:focus-within > .kwc-meta .kwc-mini-actions,
#kwc-root .kwc-msg.kwc-reaction-touch-open > .kwc-meta .kwc-mini-actions,
.kwc-dm-modal-backdrop .kwc-dm-message:hover > .kwc-dm-message-meta .kwc-mini-actions,
.kwc-dm-modal-backdrop .kwc-dm-message:focus-within > .kwc-dm-message-meta .kwc-mini-actions,
.kwc-dm-modal-backdrop .kwc-dm-message.kwc-reaction-touch-open > .kwc-dm-message-meta .kwc-mini-actions {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.kwc-group-membership-event:hover > .kwc-private-message-delete,
.kwc-group-membership-event:focus-within > .kwc-private-message-delete {
  opacity: 1;
  pointer-events: auto;
}

/* RC16 follow-up: balanced admin scrolling, persistent pin controls, and independent chat windows. */
.kwc-admin-scroll-area {
  margin-right: -6px;
  padding-right: 6px;
  scrollbar-gutter: auto;
}
.kwc-pinned-backdrop .kwc-pinned-actions {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
}
#kwc-group-messages > .kwc-group-empty-event {
  font-family: var(--kwc-chat-font-family, inherit) !important;
  font-size: var(--kwc-chat-message-font-size, var(--kwc-message-font-size, 13px)) !important;
  text-shadow: var(--kwc-chat-text-shadow, var(--kwc-text-shadow, none)) !important;
}
.kwc-dm-modal-backdrop {
  padding: 12px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  background: transparent !important;
  pointer-events: none !important;
}
.kwc-dm-modal-backdrop > .kwc-dm-modal {
  pointer-events: auto !important;
  position: absolute;
  width: min(720px, calc(100vw - 24px)) !important;
  height: min(620px, calc(100vh - 24px)) !important;
  min-width: min(320px, calc(100vw - 24px)) !important;
  min-height: min(300px, calc(100vh - 24px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 16px) !important;
  margin: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.38) !important;
}
.kwc-chat-window-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  z-index: 30;
  touch-action: none;
}
.kwc-chat-window-resize-handle::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .58;
}
#kwc-root.kwc-standalone-mode:not(.kwc-minimized) {
  inset: auto 12px 12px auto !important;
  width: var(--kwc-standalone-width, 372px) !important;
  height: var(--kwc-standalone-height, 462px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  border-radius: 12px !important;
}
#kwc-root.kwc-standalone-mode.kwc-standalone-positioned:not(.kwc-minimized) {
  left: var(--kwc-standalone-left, 12px) !important;
  top: var(--kwc-standalone-top, 12px) !important;
  right: auto !important;
  bottom: auto !important;
}
#kwc-root.kwc-standalone-mode:not(.kwc-minimized) .kwc-panel {
  border-radius: 12px !important;
}
@media (max-width: 640px) {
  #kwc-root.kwc-standalone-mode:not(.kwc-minimized) {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
  #kwc-root.kwc-standalone-mode:not(.kwc-minimized) .kwc-panel { border-radius: 0 !important; }
  .kwc-dm-modal-backdrop { padding: 4px !important; }
  .kwc-dm-modal-backdrop > .kwc-dm-modal {
    left: 4px !important;
    top: 4px !important;
    width: calc(100vw - 8px) !important;
    height: calc(100vh - 8px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .kwc-chat-window-resize-handle { display: none; }
}

/* 5.3.0 RC16: separate high-level administration from day-to-day operations. */
.kwc-admin-nav-groups { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.kwc-admin-nav-group { min-width:0; }
.kwc-admin-nav-label { margin:0 0 4px 2px; font-size:10px; font-weight:700; opacity:.62; }
.kwc-admin-nav-group .kwc-tabs { margin-bottom:0; flex-wrap:wrap; }
.kwc-admin-nav-group .kwc-tab { flex:1 1 110px; }
.kwc-user-profile-role,
.kwc-user-profile-role-control { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; }
.kwc-user-profile-management,
.kwc-user-profile-blocked-section { display:flex; flex-direction:column; gap:7px; margin:10px 0; padding:9px; border-radius:8px; background:rgba(255,255,255,.06); }
.kwc-user-profile-presence > [data-presence-dm-uuid] { cursor:pointer; }
.kwc-user-profile-presence > [data-presence-dm-uuid]:hover { background:rgba(255,255,255,.06); }

/* 5.3.0 RC17: unified movable/resizable chat windows and owner-scoped overlays. */
.kwc-chat-window-resize-handle { display: none !important; }
.kwc-window-resize-zone {
  position: fixed !important;
  display: block;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  touch-action: none !important;
  z-index: 2147483646;
}
.kwc-window-resize-zone-n, .kwc-window-resize-zone-s { cursor: ns-resize; }
.kwc-window-resize-zone-e, .kwc-window-resize-zone-w { cursor: ew-resize; }
.kwc-window-resize-zone-ne, .kwc-window-resize-zone-sw { cursor: nesw-resize; }
.kwc-window-resize-zone-nw, .kwc-window-resize-zone-se { cursor: nwse-resize; }
.kwc-dm-head h3, #kwc-root .kwc-header { user-select: none; }
.kwc-dm-modal-backdrop > .kwc-dm-modal.kwc-private-child-modal {
  width: min(620px, calc(100vw - 24px)) !important;
  height: min(560px, calc(100vh - 24px)) !important;
}
.kwc-private-child-body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.kwc-private-child-body > .kwc-dm-conversation {
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.kwc-private-conversation-snapshot { pointer-events: none !important; user-select: none; }
.kwc-private-conversation-snapshot .kwc-private-window-tools,
.kwc-private-conversation-snapshot .kwc-group-actions,
.kwc-private-conversation-snapshot .kwc-dm-compose,
.kwc-private-conversation-snapshot .kwc-reply-compose,
.kwc-private-conversation-snapshot .kwc-emoji-panel,
.kwc-private-conversation-snapshot .kwc-emoji-resize-handle { display: none !important; }
.kwc-dm-modal.kwc-private-multi-list > .kwc-dm-layout { grid-template-columns: minmax(250px, 1fr) !important; }
.kwc-dm-modal.kwc-private-multi-list > .kwc-dm-layout > .kwc-dm-sidebar { display: flex !important; width: 100% !important; }
.kwc-dm-modal.kwc-private-multi-list > .kwc-dm-layout > .kwc-dm-conversation { display: none !important; }
.kwc-private-back-to-list { flex: 0 0 auto; }
.kwc-dm-title.kwc-dm-title-back { cursor: default !important; }
.kwc-dm-title.kwc-dm-title-back:hover { background: transparent !important; }

/* A popup belongs to the chat window that opened it. It never blocks sibling chat windows. */
.kwc-modal.kwc-window-owner { isolation: isolate; }
#kwc-root.kwc-window-owner { isolation: isolate; }
.kwc-window-owned-overlay.kwc-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  background: rgba(0,0,0,.34) !important;
  z-index: 120 !important;
  border-radius: inherit;
  overflow: auto;
}
.kwc-window-owned-overlay.kwc-modal-backdrop > .kwc-modal {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(560px, calc(100% - 16px)) !important;
  max-width: calc(100% - 16px) !important;
  max-height: calc(100% - 16px) !important;
  margin: auto !important;
  pointer-events: auto !important;
}
.kwc-window-owned-overlay.kwc-group-form-backdrop > .kwc-group-form-modal { pointer-events: auto !important; }

/* Keep the surrounding list/section surfaces. Only the innermost per-user row
   rectangle is flattened so the user name does not sit inside another boxed card. */
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-admin-user-controls > .kwc-admin-item,
.kwc-modal-backdrop.kwc-user-prefs-backdrop .kwc-admin-moderator-permissions > .kwc-admin-item {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


@media (max-width: 899px), (max-height: 479px) {
  .kwc-window-resize-zone:not(.kwc-root-resize-zone) { display: none !important; }
  .kwc-private-child-backdrop { display: none !important; }
  .kwc-dm-modal-backdrop[data-kwc-private-list-window] { padding: 4px !important; }
  .kwc-dm-modal-backdrop[data-kwc-private-list-window] > .kwc-dm-modal {
    left: 4px !important;
    top: 4px !important;
    width: calc(100vw - 8px) !important;
    height: calc(100vh - 8px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

/* RC19: unified desktop window chrome. Resize is available whenever uiResizable is enabled; no resize-lock control is rendered. */
/* Maximized chat windows occupy the complete viewport; only normal windows keep rounded corners/gaps. */
.kwc-dm-modal[data-kwc-maximized="1"] {
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}
#kwc-root.kwc-standalone-mode.kwc-window-maximized:not(.kwc-minimized) {
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}
#kwc-root.kwc-standalone-mode.kwc-window-maximized:not(.kwc-minimized) .kwc-panel {
  border-radius: 0 !important;
}


/* 5.3.0 RC20: minimized chat is a single restore (+) control.
   No title, PiP, login/account, notification, or secondary action reserves space. */
#kwc-root.kwc-minimized,
#kwc-root.kwc-guest-hidden.kwc-minimized {
  width: 48px !important;
  max-width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  min-height: 48px !important;
}
#kwc-root.kwc-minimized .kwc-panel,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
}
#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 9px !important;
  gap: 0 !important;
  justify-content: center !important;
}
#kwc-root.kwc-minimized .kwc-header-identity,
#kwc-root.kwc-minimized .kwc-actions-secondary,
#kwc-root.kwc-minimized .kwc-actions-primary > :not(#kwc-min),
#kwc-root.kwc-minimized #kwc-pip,
#kwc-root.kwc-minimized #kwc-login,
#kwc-root.kwc-minimized #kwc-notifications,
#kwc-root.kwc-minimized #kwc-dm,
#kwc-root.kwc-minimized #kwc-group,
#kwc-root.kwc-minimized #kwc-game,
#kwc-root.kwc-minimized #kwc-search-open {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#kwc-root.kwc-minimized .kwc-header-primary,
#kwc-root.kwc-minimized .kwc-actions-primary {
  width: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}
#kwc-root.kwc-minimized #kwc-min {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Standalone public chat uses the same edge policy as embedded adapters:
   collapse to the lower-left or lower-right viewport edge based on the
   pre-minimize window center. Restore keeps the pre-minimize normal geometry. */
#kwc-root.kwc-standalone-mode.kwc-minimized[data-kwc-minimized-side="left"] {
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
}
#kwc-root.kwc-standalone-mode.kwc-minimized[data-kwc-minimized-side="right"],
#kwc-root.kwc-standalone-mode.kwc-minimized:not([data-kwc-minimized-side]) {
  left: auto !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
}


/* 5.3.0 RC21: restore the legacy compact minimized pill and guest-only chrome policy.
   Minimized keeps the localized title so the collapsed window is identifiable;
   the restore (+) control is the only action button left visible. */
#kwc-root.kwc-minimized,
#kwc-root.kwc-guest-hidden.kwc-minimized {
  width: 124px !important;
  max-width: 124px !important;
  min-width: 124px !important;
  height: 48px !important;
  max-height: 48px !important;
  min-height: 48px !important;
}
#kwc-root.kwc-minimized .kwc-panel,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel {
  width: 124px !important;
  height: 48px !important;
  min-width: 124px !important;
  min-height: 48px !important;
  margin: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  width: 124px !important;
  height: 48px !important;
  min-width: 124px !important;
  min-height: 48px !important;
  padding: 0 8px 0 11px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  border-bottom: 0 !important;
}
#kwc-root.kwc-minimized .kwc-header-primary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header-primary {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#kwc-root.kwc-minimized .kwc-header-identity,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header-identity {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#kwc-root.kwc-minimized .kwc-title,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-title {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#kwc-root.kwc-minimized .kwc-status,
#kwc-root.kwc-minimized .kwc-actions-secondary,
#kwc-root.kwc-minimized .kwc-actions-primary > :not(#kwc-min),
#kwc-root.kwc-minimized #kwc-pip,
#kwc-root.kwc-minimized #kwc-login,
#kwc-root.kwc-minimized #kwc-notifications,
#kwc-root.kwc-minimized #kwc-dm,
#kwc-root.kwc-minimized #kwc-group,
#kwc-root.kwc-minimized #kwc-game,
#kwc-root.kwc-minimized #kwc-search-open {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#kwc-root.kwc-minimized .kwc-actions-primary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-actions-primary {
  display: flex !important;
  width: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
#kwc-root.kwc-minimized #kwc-min,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-min {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* When guest chat is disabled and hidden, match the 5.2.1 login-only surface:
   keep title + Login + minimize, but expose no account-only/private controls or chat body. */
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-dm,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-group,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-game,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-notifications,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-pip,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-search-open,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-pinned-bar,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-jump-latest,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) .kwc-status {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-login,
#kwc-root.kwc-guest-hidden:not(.kwc-minimized) #kwc-min {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 5.3.0 RC22: semantic header clusters + mobile private-chat visual viewport fit. */
#kwc-root:not(.kwc-minimized):not(.kwc-header-wrapped) .kwc-action-cluster {
  display: contents !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-actions-secondary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-chat {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-account {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-header-identity .kwc-title {
  min-width: 72px !important;
}
.kwc-dm-modal-backdrop.kwc-private-mobile-viewport {
  overflow: hidden !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overscroll-behavior: none !important;
}
.kwc-dm-modal-backdrop.kwc-private-mobile-viewport > .kwc-dm-modal {
  box-sizing: border-box !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
}
.kwc-dm-modal-backdrop.kwc-private-mobile-viewport .kwc-dm-layout,
.kwc-dm-modal-backdrop.kwc-private-mobile-viewport .kwc-dm-conversation,
.kwc-dm-modal-backdrop.kwc-private-mobile-viewport .kwc-dm-sidebar {
  min-height: 0 !important;
}


/* 5.3.0 RC26: event list / multi-event browser. */
.kwc-game-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kwc-game-list > h4, .kwc-game-create-form > h4 { margin: 0 0 2px; }
.kwc-game-list-body { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; scrollbar-gutter: stable; }
.kwc-game-list-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.055); }
.kwc-game-list-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.kwc-game-list-main > strong, .kwc-game-list-main > span, .kwc-game-list-main > small { min-width: 0; overflow-wrap: anywhere; }
.kwc-game-list-main > span, .kwc-game-list-main > small { font-size: 12px; opacity: .78; }
@media (max-width: 520px) { .kwc-game-list-row { align-items: stretch; flex-direction: column; } .kwc-game-list-row > .kwc-button { align-self: flex-end; } }


/* 5.3.0 RC26: responsive group-chat title bar.
   Preserve room identity/member counts on row 1 and move interaction controls
   to row 2 when the resizable group window no longer has enough horizontal room. */
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped:not(.kwc-admin-meta-row) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "main"
    "actions" !important;
  align-items: stretch !important;
  row-gap: 6px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  white-space: normal !important;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-title-main {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions > .kwc-button,
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions > .kwc-private-window-tools {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions > .kwc-button {
  padding-left: 9px !important;
  padding-right: 9px !important;
}

/* RC26: the public header's second row should visually occupy the available
   width instead of leaving a large empty center gap after wrapping. */
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-chat > .kwc-button {
  flex: 1 1 46px !important;
  min-width: 42px !important;
  max-width: 64px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  justify-content: center !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-account > .kwc-button {
  min-width: 76px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  justify-content: center !important;
}

/* 5.3.0 RC26: mobile standalone is a fixed visual-viewport surface.
   Use JS-provided visualViewport pixels instead of 100vh so browser chrome,
   orientation changes, and edge-navigation gestures cannot leave a resized window. */
#kwc-root.kwc-standalone-mode.kwc-window-maximized.kwc-mobile-window-locked:not(.kwc-minimized) {
  left: var(--kwc-standalone-left, 0px) !important;
  top: var(--kwc-standalone-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--kwc-standalone-width, 100vw) !important;
  height: var(--kwc-standalone-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}
#kwc-root.kwc-standalone-mode.kwc-mobile-window-locked:not(.kwc-minimized) .kwc-panel {
  border-radius: 0 !important;
}
#kwc-root.kwc-standalone-mode.kwc-mobile-window-locked:not(.kwc-minimized) .kwc-header {
  cursor: default !important;
}

/* 5.3.0 RC28: blocking modal affordance, non-sticky modal dragging, responsive headers, and compact event history. */
.kwc-modal-backdrop.kwc-user-prefs-backdrop {
  background: rgba(0,0,0,0.56) !important;
  backdrop-filter: blur(1.5px);
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop > .kwc-modal > .kwc-modal-head,
.kwc-modal-backdrop.kwc-user-prefs-backdrop > .kwc-modal > .kwc-modal-head > h3 {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none;
}
.kwc-modal-backdrop.kwc-user-prefs-backdrop > .kwc-modal > .kwc-modal-head.kwc-dragging,
.kwc-modal-backdrop.kwc-user-prefs-backdrop > .kwc-modal > .kwc-modal-head.kwc-dragging > h3,
.kwc-modal-drag-handle.kwc-dragging {
  cursor: grabbing !important;
}

/* Wrapped public header: row 1 window controls should grow with row 2 instead of
   looking unchanged, while row 2 uses a real grid so buttons never overlap. */
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-actions-primary > .kwc-button {
  width: 36px !important;
  min-width: 36px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  font-size: max(15px, var(--kwc-button-font-size, 12px)) !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-actions-secondary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-chat {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-chat > .kwc-button {
  width: auto !important;
  flex: 1 1 36px !important;
  min-width: 26px !important;
  max-width: 54px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  overflow: hidden !important;
  justify-content: center !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-account {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}
#kwc-root #kwc-login.kwc-login-user {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-account > #kwc-login.kwc-login-user {
  box-sizing: border-box !important;
  width: min(calc(16ch + 22px), 44vw) !important;
  min-width: min(calc(16ch + 22px), 44vw) !important;
  max-width: min(calc(16ch + 22px), 44vw) !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  justify-content: center !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-account > #kwc-login:not(.kwc-login-user) {
  min-width: 68px !important;
  max-width: min(96px, 32vw) !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Wrapped group title: keep identity/counts on row 1 and let the action row scroll
   horizontally rather than overlap or clip buttons when the window is very narrow. */
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions {
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding-bottom: 2px;
}
/* Preserve the original right-aligned action row while there is spare width.
   The spacer shrinks to zero before horizontal overflow begins, so very narrow
   group windows can still scroll from the first action instead of overlapping. */
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions::before {
  content: "";
  flex: 1 1 auto;
  min-width: 0;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions > .kwc-button,
.kwc-group-modal .kwc-group-title.kwc-group-title-wrapped > .kwc-group-actions > .kwc-private-window-tools {
  flex: 0 0 auto !important;
}

/* Event history is expected to accumulate. Keep rows compact and scroll the list;
   details remain in the selected event view. Local event managers get explicit
   Open/Delete text buttons instead of reusing the hover-only message-delete affordance. */
.kwc-game-list-body {
  max-height: min(46vh, 340px) !important;
  gap: 4px !important;
  overflow-y: auto !important;
  padding-right: 2px;
}
.kwc-game-list-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px;
  padding: 6px 7px !important;
}
.kwc-game-list-main {
  min-width: 0;
  gap: 1px !important;
  justify-content: center;
}
.kwc-game-list-main > strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.kwc-game-list-main > span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}
.kwc-game-list-actions {
  display: flex;
  align-items: center;
  align-self: center;
  justify-self: end;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
}
.kwc-game-list-actions > .kwc-button {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 6px !important;
  white-space: nowrap;
  box-sizing: border-box;
}
.kwc-game-list-delete {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex: 0 0 52px !important;
}
.kwc-game-chat-link-unavailable {
  cursor: default !important;
  opacity: 0.72;
}
@media (max-width: 420px) {
  .kwc-game-list-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  .kwc-game-list-actions {
    gap: 4px;
  }
  .kwc-game-list-actions > .kwc-button {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
  .kwc-game-list-delete {
    flex-basis: 48px !important;
  }
}

/* 5.3.0 RC30: DM/group message search follows the public-chat search affordance.
   Keep it out of the title/action row and float it over the message surface.
   The zero-height anchor is placed after the pinned bar for groups, so a visible
   pinned notice naturally stays above Search without hard-coded title heights. */
.kwc-private-search-float-row {
  position: relative;
  flex: 0 0 0;
  width: 100%;
  height: 0;
  min-height: 0;
  overflow: visible;
  z-index: 9;
  pointer-events: none;
}
.kwc-private-search-float {
  position: absolute !important;
  top: 8px;
  right: 10px;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kwc-border-color, rgba(255,255,255,0.16)) !important;
  border-radius: 999px !important;
  color: var(--kwc-button-text, var(--kwc-text-color, #fff)) !important;
  background: var(--kwc-button-bg, rgba(28,35,48,0.92)) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.24);
  text-align: center;
  font-size: max(14px, var(--kwc-button-font-size, 12px)) !important;
  line-height: 1;
  z-index: 10;
  pointer-events: auto;
}
.kwc-private-search-float:hover,
.kwc-private-search-float:focus-visible {
  background: var(--kwc-button-hover-bg, rgba(42,52,70,0.96)) !important;
  outline: none;
}

/* 5.3.0 RC29: unread badges belong above their header buttons, not inside the
   button clipping box. Keep the badge readable for 1..99+ while preserving the
   compact wrapped header. */
#kwc-root:not(.kwc-minimized) .kwc-actions-secondary,
#kwc-root:not(.kwc-minimized) .kwc-action-cluster-chat {
  overflow: visible !important;
}
#kwc-root:not(.kwc-minimized) #kwc-dm,
#kwc-root:not(.kwc-minimized) #kwc-group,
#kwc-root:not(.kwc-minimized) #kwc-notifications {
  position: relative !important;
  overflow: visible !important;
}
#kwc-root:not(.kwc-minimized) #kwc-dm-badge,
#kwc-root:not(.kwc-minimized) #kwc-group-badge,
#kwc-root:not(.kwc-minimized) #kwc-notification-badge {
  top: 0 !important;
  right: 0 !important;
  transform: translate(42%, -42%) !important;
  z-index: 12 !important;
  min-width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* 5.3.0 RC29 final: audit headers, wrapped admin indicator, and unclipped unread badges. */
/* The actual DM audit conversation has no extra separator line. The audit label
   and identity share one row while there is room; the identity naturally drops
   under the audit label before it is reduced to an unusable single ellipsis. */
.kwc-private-title-row.kwc-private-title-row-audit {
  border-bottom: 0 !important;
}
/* Reuse the normal private-title-row vertical alignment for audit actions.
   Do not add an audit-only pixel offset; the Back button should inherit the
   same top/bottom inset behavior as the other title-row action buttons. */
.kwc-private-title-row > .kwc-dm-title.kwc-dm-title-audit-layout {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px 7px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}
.kwc-private-audit-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 650;
}
.kwc-dm-audit-identity {
  flex: 1 1 168px;
  min-width: min(168px, 100%);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kwc-dm-audit-identity > * {
  max-width: 100%;
}

/* Group audit uses the same compact badge vocabulary, but deliberately adds no
   audit-specific border/line to the group title. */
.kwc-group-audit-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 650;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-audit > .kwc-group-title-main {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 6px !important;
  min-width: 0 !important;
}
.kwc-group-modal .kwc-group-title.kwc-group-title-audit .kwc-group-title-name {
  flex: 1 1 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Wrapped public header: PIP/minimize keep their ordinary button geometry. Only
   the clickable administrator status gets a modestly larger hit target. */
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-actions-primary > .kwc-button {
  width: revert !important;
  min-width: revert !important;
  height: revert !important;
  min-height: revert !important;
  max-height: revert !important;
  padding: revert !important;
  font-size: revert !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-pip,
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-min {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-min {
  width: 30px !important;
  min-width: 30px !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-status.kwc-status-admin-action {
  /* Height/font stay identical to the one-row state; wrapped mode only gives the badge more horizontal room. */
  min-width: 50px !important;
  max-width: 78px !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
}

/* Badges intentionally overhang the header buttons. Do not let the second-row
   grid or chat cluster clip 1..99+ text. */
#kwc-root:not(.kwc-minimized) .kwc-actions-secondary,
#kwc-root:not(.kwc-minimized) .kwc-action-cluster-chat,
#kwc-root:not(.kwc-minimized) .kwc-action-cluster-chat > .kwc-button {
  overflow: visible !important;
}
#kwc-root:not(.kwc-minimized) #kwc-dm-badge,
#kwc-root:not(.kwc-minimized) #kwc-group-badge,
#kwc-root:not(.kwc-minimized) #kwc-notification-badge {
  top: 0 !important;
  right: 0 !important;
  transform: translate(45%, -45%) !important;
  z-index: 30 !important;
  min-width: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
  padding: 0 4px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* RC29 correction: explicitly restore pre-wrap window-control geometry rather
   than using CSS revert, which would cross the author-origin boundary. */
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-pip {
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-min {
  width: 30px !important;
  min-width: 30px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
}

/* 5.3.0 RC33: final public minimized chrome contract.
   Later historical rules must not reintroduce the title or any secondary action:
   a minimized public-chat window is exactly one 48px restore (+) control. */
#kwc-root.kwc-minimized,
#kwc-root.kwc-guest-hidden.kwc-minimized {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
#kwc-root.kwc-minimized .kwc-panel,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel,
#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  padding: 9px !important;
  gap: 0 !important;
  justify-content: center !important;
}
#kwc-root.kwc-minimized .kwc-header-identity,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header-identity,
#kwc-root.kwc-minimized .kwc-actions-secondary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-actions-secondary,
#kwc-root.kwc-minimized .kwc-actions-primary > :not(#kwc-min),
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-actions-primary > :not(#kwc-min) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#kwc-root.kwc-minimized .kwc-header-primary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header-primary,
#kwc-root.kwc-minimized .kwc-actions-primary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-actions-primary {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}
#kwc-root.kwc-minimized #kwc-min,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-min {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}


/* 5.3.0 RC34: public-header live-feedback correction.
   In one-row mode the four icon actions may shrink only down to the 30px
   window-control/PIP footprint. JS wraps only after that compact geometry no
   longer fits, and unwraps only after the normal one-row geometry fits again. */
#kwc-root:not(.kwc-minimized):not(.kwc-header-wrapped) .kwc-action-cluster-chat > .kwc-button {
  box-sizing: border-box !important;
  width: 36px !important;
  min-width: 30px !important;
  max-width: 36px !important;
  flex: 0 1 36px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  justify-content: center !important;
}

/* The account button uses its actual (already <=16-code-point) label width.
   Never reserve a 16ch box for a short username. */
#kwc-root #kwc-login.kwc-login-user,
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-account > #kwc-login.kwc-login-user {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 1 auto !important;
}

/* Wrapped unread counts overhang the icon exactly as they do in one-row mode.
   Negative offsets are used instead of a transform so a flex/grid resize cannot
   make the badge appear buried inside the button. */
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-dm-badge,
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-group-badge,
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) #kwc-notification-badge {
  top: -6px !important;
  right: -6px !important;
  transform: none !important;
  z-index: 40 !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-actions-secondary,
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-chat,
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-chat > .kwc-button {
  overflow: visible !important;
}

/* Event rows must not reserve an empty scrollbar gutter when there is no
   scrollbar; that reservation made Delete look shifted left relative to Close. */
.kwc-game-list-body {
  scrollbar-gutter: auto !important;
  padding-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.kwc-game-list-row {
  padding-right: 0 !important;
}
.kwc-game-list-actions {
  justify-self: end !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* First-come normally keeps this field visible as a disabled mirror. The class
   remains only as a compatibility guard for older generated markup. */
.kwc-game-max-field-firstcome-hidden {
  display: none !important;
}


/* 5.3.0 RC35: public-header shrink order and icon legibility hotfix.
   Keep the KOKOTO WebChat identity intact in one-row mode. The secondary action
   area is the shrinkable region: its four icon buttons contract from 36px to
   the 30px PIP/minimize footprint before the existing RC34 wrap threshold is
   allowed to move the actions to row 2. The wrapped-to-one-row threshold stays
   unchanged. Button boxes and spacing are unchanged; only glyph/text size is
   increased slightly for legibility. */
#kwc-root:not(.kwc-minimized):not(.kwc-header-wrapped) .kwc-header-identity {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  overflow: visible !important;
}
#kwc-root:not(.kwc-minimized):not(.kwc-header-wrapped) .kwc-header-identity .kwc-title {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#kwc-root:not(.kwc-minimized):not(.kwc-header-wrapped) .kwc-actions-secondary {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}
#kwc-root:not(.kwc-minimized):not(.kwc-header-wrapped) .kwc-action-cluster-account > #kwc-login {
  flex: 0 0 auto !important;
}

/* Increase only the contents of existing controls; do not enlarge their boxes. */
#kwc-root:not(.kwc-minimized) #kwc-dm,
#kwc-root:not(.kwc-minimized) #kwc-group,
#kwc-root:not(.kwc-minimized) #kwc-game,
#kwc-root:not(.kwc-minimized) #kwc-notifications {
  font-size: max(15px, var(--kwc-button-font-size, 12px)) !important;
}
#kwc-root:not(.kwc-minimized) #kwc-login {
  font-size: max(13px, var(--kwc-button-font-size, 12px)) !important;
}
#kwc-root:not(.kwc-minimized) .kwc-header-identity .kwc-status {
  font-size: max(10px, calc(var(--kwc-button-font-size, 12px) - 1px)) !important;
}
#kwc-root .kwc-emoji-button {
  font-size: max(17px, var(--kwc-button-font-size, 12px)) !important;
}
#kwc-root .kwc-button.kwc-upload {
  font-size: max(16px, var(--kwc-button-font-size, 12px)) !important;
}
#kwc-root .kwc-send {
  font-size: max(13px, var(--kwc-button-font-size, 12px)) !important;
}


/* 5.3.0 RC37: public-header action sizing/threshold correction.
   Use the wrapped-row menu footprint as the normal size in both layouts.
   In one-row mode the four chat/event/notification buttons may shrink from
   46px to the 30px PIP/minimize footprint; only when 30px no longer fits does
   the header wrap. Wrapped mode uses the same 30px floor, so returning to one
   row can happen as soon as four PIP-sized buttons fit. */
#kwc-root:not(.kwc-minimized):not(.kwc-header-wrapped) .kwc-action-cluster-chat > .kwc-button {
  box-sizing: border-box !important;
  width: 46px !important;
  min-width: 30px !important;
  max-width: 46px !important;
  flex: 0 1 46px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
#kwc-root.kwc-header-wrapped:not(.kwc-minimized) .kwc-action-cluster-chat > .kwc-button {
  box-sizing: border-box !important;
  flex: 1 1 46px !important;
  min-width: 30px !important;
  max-width: 54px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* 5.3.0 RC38 window hotfix: minimized title + restore button contract.
   Keep the collapsed chat identifiable. The title remains visible and the +
   button is the only action; later RC33 restore-only rules are overridden here. */
#kwc-root.kwc-minimized,
#kwc-root.kwc-guest-hidden.kwc-minimized,
#kwc-root.kwc-minimized .kwc-panel,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-panel,
#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
#kwc-root.kwc-minimized .kwc-header,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header {
  padding: 0 8px 0 11px !important;
  gap: 4px !important;
  justify-content: space-between !important;
}
#kwc-root.kwc-minimized .kwc-header-primary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header-primary {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
}
#kwc-root.kwc-minimized .kwc-header-identity,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-header-identity {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#kwc-root.kwc-minimized .kwc-title,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-title {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#kwc-root.kwc-minimized .kwc-status,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-status,
#kwc-root.kwc-minimized .kwc-actions-secondary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-actions-secondary,
#kwc-root.kwc-minimized .kwc-actions-primary > :not(#kwc-min),
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-actions-primary > :not(#kwc-min) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#kwc-root.kwc-minimized .kwc-actions-primary,
#kwc-root.kwc-guest-hidden.kwc-minimized .kwc-actions-primary {
  display: flex !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  flex: 0 0 30px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
#kwc-root.kwc-minimized #kwc-min,
#kwc-root.kwc-guest-hidden.kwc-minimized #kwc-min {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}


/* 5.3.2 CP6R3R9: event option layout polish.
 * Check/label controls stay left-aligned. Automatic-end value controls use the
 * remaining row width: response count keeps its established 92px width at the
 * right edge, while datetime is compacted to the width its native value needs.
 * Wrapping remains available for genuinely narrow map/PiP/mobile surfaces. */
.kwc-game-option-stack,
.kwc-game-auto-end-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
}
.kwc-game-create-form .kwc-game-check-option {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.kwc-game-create-form .kwc-game-check-option > input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.kwc-game-create-form .kwc-game-check-option > span {
  min-width: 0 !important;
}
.kwc-game-create-form .kwc-game-inline-option,
.kwc-game-auto-response-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.kwc-game-create-form .kwc-game-inline-option > span {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.kwc-game-poll-max-field {
  padding-left: 24px !important;
}
.kwc-game-poll-max-field #kwc-game-poll-max,
.kwc-game-auto-end-card #kwc-game-auto-response-count {
  width: 92px !important;
  min-width: 72px !important;
  max-width: 120px !important;
  flex: 0 0 92px !important;
}
.kwc-game-poll-max-field #kwc-game-poll-max:disabled,
.kwc-game-auto-end-card #kwc-game-auto-response-count:disabled {
  opacity: 0.65;
}
.kwc-game-auto-response-line {
  width: 100% !important;
  justify-content: space-between !important;
}
.kwc-game-auto-response-line > .kwc-game-check-option {
  flex: 1 1 auto !important;
  align-self: center !important;
}
.kwc-game-auto-response-line #kwc-game-auto-response-count {
  margin-left: auto !important;
}
.kwc-game-auto-date-field {
  width: 100% !important;
  justify-content: space-between !important;
}
.kwc-game-auto-date-field #kwc-game-auto-end-at {
  width: 184px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 184px !important;
  margin-left: auto !important;
}
.kwc-game-option-help {
  display: block !important;
  margin: 0 !important;
}

/* Font Awesome Free 6.7.2 icon normalization.
 * Artwork: CC BY 4.0; see THIRD_PARTY_NOTICES.md.
 * Keep presentation copies byte-identical. */
/* Font Awesome SVGs are used in both #kwc-root and detached DM/group/admin
 * modals appended directly to document.body. Keep the normalization global to
 * KWC-owned class names so every presentation uses the same geometry. */
.kwc-fa-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  overflow: hidden;
  color: currentColor;
}

.kwc-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kwc-icon-button > .kwc-fa-icon,
.kwc-actions .kwc-fa-icon,
.kwc-private-window-tool .kwc-fa-icon,
.kwc-emoji-search-toggle .kwc-fa-icon {
  width: 1.08em;
  height: 1.08em;
}

.kwc-pinned-icon,
.kwc-jump-latest-icon,
.kwc-emoji-search-float-icon,
.kwc-admin-meta-title,
.kwc-admin-audit-notice,
.kwc-private-audit-badge,
.kwc-group-audit-badge,
.kwc-dm-thread-name,
.kwc-group-password-badge,
.kwc-read-receipt,
.kwc-status {
  align-items: center;
}

.kwc-pinned-icon .kwc-fa-icon,
.kwc-jump-latest-icon .kwc-fa-icon,
.kwc-status-icon {
  width: 0.95em;
  height: 0.95em;
}

/* Audit/admin shields are compact badges beside text, never action artwork.
 * Use a fixed small box so inherited modal/title font sizes cannot inflate them. */
.kwc-private-audit-badge,
.kwc-group-audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kwc-admin-meta-title .kwc-fa-icon,
.kwc-admin-audit-notice .kwc-fa-icon {
  margin-right: 4px;
}
.kwc-admin-meta-title .kwc-fa-icon,
.kwc-admin-audit-notice .kwc-fa-icon,
.kwc-private-audit-badge .kwc-fa-icon,
.kwc-group-audit-badge .kwc-fa-icon {
  width: 11px;
  height: 11px;
  max-width: 11px;
  max-height: 11px;
  vertical-align: 0;
}

/* Detached private-chat controls match the public-chat action geometry. */
.kwc-private-search-float {
  overflow: hidden;
}
.kwc-private-search-float .kwc-fa-icon {
  width: 15px;
  height: 15px;
  max-width: 15px;
  max-height: 15px;
  vertical-align: 0;
}
.kwc-private-message-delete {
  overflow: hidden;
}
.kwc-private-message-delete .kwc-fa-icon {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  vertical-align: 0;
}
.kwc-dm-compose .kwc-icon-button {
  min-width: 34px;
  width: 34px;
  max-width: 34px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 1 !important;
}
/* Public compose uses 17px Emoji and 16px Attach artwork. Keep DM and Group
 * exactly on those visual sizes even though their base button font is 12px. */
.kwc-dm-compose .kwc-dm-emoji-button {
  font-size: max(17px, var(--kwc-button-font-size, 12px)) !important;
}
.kwc-dm-compose .kwc-dm-upload {
  font-size: max(16px, var(--kwc-button-font-size, 12px)) !important;
}
.kwc-dm-compose .kwc-dm-emoji-button .kwc-fa-icon {
  width: 17px;
  height: 17px;
  max-width: 17px;
  max-height: 17px;
  vertical-align: 0;
}
.kwc-dm-compose .kwc-dm-upload .kwc-fa-icon {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  vertical-align: 0;
}
/* Group pin uses the same compact pin vocabulary as public pinned messages. */
.kwc-group-modal .kwc-pinned-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kwc-group-modal .kwc-pinned-icon .kwc-fa-icon {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.08em;
}

.kwc-media-load .kwc-fa-icon {
  margin-right: 0.35em;
}

.kwc-youtube-play .kwc-fa-icon {
  width: 1em;
  height: 1em;
}

/* 5.3.2 CP4: minimized Standalone may be dragged, but its position is transient.
   Normal standalone coordinates remain untouched and are restored on expand. */
#kwc-root.kwc-standalone-mode.kwc-minimized.kwc-minimized-positioned {
  left: var(--kwc-minimized-left, 0px) !important;
  top: var(--kwc-minimized-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
}

/* Private-history parity: DM/group reuse the public Jump to latest affordance. */
.kwc-dm-conversation > .kwc-private-jump-latest {
  bottom: 48px;
}
.kwc-dm-modal-backdrop.kwc-theme-light .kwc-private-jump-latest,
.kwc-modal-backdrop.kwc-theme-light .kwc-private-jump-latest {
  color: #0f172a !important;
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(51,65,85,0.42) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
  text-shadow: none !important;
}
.kwc-dm-modal-backdrop.kwc-theme-high-contrast .kwc-private-jump-latest,
.kwc-modal-backdrop.kwc-theme-high-contrast .kwc-private-jump-latest {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1px #000000, 0 0 0 2px #ffffff !important;
  text-shadow: none !important;
}
@media (prefers-color-scheme: light) {
  .kwc-dm-modal-backdrop.kwc-theme-system .kwc-private-jump-latest,
  .kwc-modal-backdrop.kwc-theme-system .kwc-private-jump-latest {
    color: #0f172a !important;
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(51,65,85,0.42) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.18) !important;
    text-shadow: none !important;
  }
}


/* 5.3.2 CP6R3R5: mobile private chat shares the public-chat root viewport. */
#kwc-root > .kwc-dm-modal-backdrop.kwc-private-root-mounted {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 1000000 !important;
}
/* 5.3.2 CP6R3R6: mobile private chat and notification inbox lifecycle placement.
   DM/Group single-pane overlays are mounted inside the physically working public
   .kwc-panel so software-keyboard clipping uses exactly the same live surface. */
#kwc-root > .kwc-panel > .kwc-dm-modal-backdrop.kwc-private-panel-mounted {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
}
.kwc-notification-inbox-option {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 2px 2px;
  color: var(--kwc-text-color, inherit);
  font-size: var(--kwc-font-size, 13px);
  line-height: 1.35;
}
.kwc-notification-inbox-option input {
  flex: 0 0 auto;
  margin-top: 2px;
}