.site-chat-launch, .site-chat {
  position: fixed;
  right: env(safe-area-inset-right, 0px);
  bottom: max(0px, env(safe-area-inset-bottom));
  z-index: 500;
  color: #fdfdfd;
  font: 14px/1.4 Roboto, sans-serif;
  text-shadow: 1px 1px #060606;
}
.site-chat-launch, .site-chat > header { background: rgb(230 83 68 / 90%); }
.site-chat-launch {
  top: calc(50% - 18px);
  right: calc(env(safe-area-inset-right, 0px) - 42px);
  bottom: auto;
  z-index: 501;
  width: 120px;
  height: 36px;
  padding: 0 0 0 25px;
  transform: rotate(-90deg);
  border: 0;
  border-radius: 3px 3px 0 0;
  background: #e65344;
  box-shadow: 0 0 30px #101010;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity .7s ease;
}
.site-chat-launch[inert] { opacity: 0; pointer-events: none; }
.site-chat { display: flex; flex-direction: column; width: min(clamp(240px, 17vw, 345px), calc(100vw - 12px)); height: min(900px, 70dvh); background: rgb(33 34 35 / 90%); box-shadow: 0 0 15px #060606; border-left: 1px solid #0007; border-radius: 2px 2px 0 0; transform: translateX(100%); transition: transform .7s ease, visibility .7s; visibility: hidden; }
.site-chat--open { transform: translateX(0); visibility: visible; }
.site-chat > header { position: relative; flex: 0 0 40px; box-shadow: 0 5px 5px #101010; border-radius: 2px 2px 0 0; z-index: 1; cursor: default; }
.site-chat > header .site-chat-title { display: flex; align-items: center; gap: 10px; height: 40px; padding: 2px 46px 0 10px; color: rgb(255 255 255 / 90%); }
.site-chat-bubble { display: inline-block; flex: 0 0 25px; width: 25px; height: 20px; background: url("/assets/legacy/new_sprite.png") -220px -71px no-repeat; }
.site-chat-launch .site-chat-bubble { position: absolute; top: 8px; left: 15px; }
.site-chat button { color: inherit; cursor: pointer; }
.site-chat-notice-close { background: transparent; border: 0; font-size: 24px; line-height: 1; padding: 4px; }
.site-chat button.site-chat-close { position: absolute; right: 3px; top: 0; width: 40px; height: 40px; padding: 0; border: 0; cursor: default; background: url("/assets/legacy/new_sprite.png") -209px -31px no-repeat; transition: transform .4s ease; }
.site-chat-close:hover, .site-chat-close:focus-visible { transform: rotate(-90deg); }
.site-chat-scroll-viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
}
.site-chat-messages {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden scroll;
  padding: 6px 0 0 5px;
  scrollbar-width: thin;
  scrollbar-color: #e86154ba transparent;
  font-family: "Open Sans", sans-serif;
}
@supports selector(::-webkit-scrollbar) {
  /* Clip the 15px scrollbar at the outer edge, as on the reference chat. */
  .site-chat-messages { margin-right: -13px; scrollbar-width: auto; scrollbar-color: auto; }
  .site-chat-messages::-webkit-scrollbar { width: 15px; }
  .site-chat-messages::-webkit-scrollbar-track { background: #212325; border-radius: 2px; }
  .site-chat-messages::-webkit-scrollbar-thumb { background: #e86154ba; border-radius: 2px; }
  .site-chat-messages::-webkit-scrollbar-thumb:hover { background: #e74c3c; }
  .site-chat-messages::-webkit-scrollbar-button { display: none; }
}
.site-chat-rows { width: min(100%, calc(100cqw - 5px)); padding: 0 4px 15px 0; }
.site-chat-message { display: flex; gap: 10px; padding: 10px 0 9px; border-top: 1px solid rgb(255 255 255 / 10%); }
.site-chat-avatar { width: 32px; height: 32px; position: relative; flex: 0 0 32px; }
.site-chat-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-chat-avatar--system { background: url("/assets/legacy/chat-system.png") 1px 0 / cover no-repeat; }
.site-chat-avatar span { position: absolute; top: -4px; left: -4px; width: 12px; height: 12px; background: #2ecc71; border-radius: 2px; }
.site-chat-avatar span[data-level="1"] { background: #ff9500; }
.site-chat-message-content { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 13px; color: rgb(255 255 255 / 90%); }
.site-chat-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.site-chat-meta :is(strong, button.site-chat-nickname) { display: block; min-width: 0; max-width: 63%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--chat-nickname-color, #b0c3d9); font: 700 14px/12px "Open Sans", sans-serif; padding: 0 0 2px; border: 0; background: transparent; text-shadow: inherit; text-align: left; }
.site-chat-meta strong.site-chat-system { color: #2fb75e; }
.site-chat-meta [data-tone="uncommon"] { --chat-nickname-color: #5e98d9; }
.site-chat-meta [data-tone="rare"] { --chat-nickname-color: #5b76ff; }
.site-chat-meta [data-tone="mythical"] { --chat-nickname-color: #945aff; }
.site-chat-meta [data-tone="legendary"] { --chat-nickname-color: #d32ce6; }
.site-chat-meta [data-tone="ancient"] { --chat-nickname-color: #eb4b4b; }
.site-chat-meta [data-tone="immortal"] { --chat-nickname-color: #e4ae33; }
.site-chat-meta time { color: rgb(255 255 255 / 70%); font-size: 10px; line-height: 10px; flex-shrink: 0; padding-right: 1px; }
.site-chat-message-body { padding: 3px 0 1px; }
.site-chat-balance { color: #e3b783; font-weight: 700; }
.site-chat-balance span { color: #48e58b; }
.site-chat-empty { padding: 15px; color: #ccd1d6; }
.site-chat-unread { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap; border: 0; border-radius: 10px; background: #e74c3c; padding: 5px 8px; box-shadow: 0 0 10px 2px #040404; font: inherit; }
.site-chat-unread:hover { background: #e76d3c; }
.site-chat-composer { display: flex; flex: 0 0 40px; margin: 0 7px 7px 5px; background: #565251; }
.site-chat-guest { flex: 0 0 40px; line-height: 40px; text-align: center; background: rgb(230 83 68 / 90%); }
.site-chat-send { position: relative; flex: 0 0 45px; height: 40px; border: 0; padding: 0; background: #e74c3c url("/assets/legacy/new_sprite.png") -317px -68px no-repeat; box-shadow: 1px 0 5px #101010; }
.site-chat-send:disabled { cursor: wait; }
.site-chat-send::before, .site-chat-send::after, .site-chat-send-corners::before, .site-chat-send-corners::after,
.site-chat-launch-corners::before, .site-chat-launch-corners::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border: solid #e74c3c;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 300ms, opacity 300ms;
}
.site-chat-send::before { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.site-chat-send::after { top: 0; left: 0; border-width: 1px 0 0 1px; }
.site-chat-send-corners::before { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.site-chat-send-corners::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
.site-chat-launch-corners::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.site-chat-launch-corners::after { top: 0; right: 0; border-width: 1px 1px 0 0; }
.site-chat-launch:is(:hover, :focus-visible) .site-chat-launch-corners::before { transform: translate(-7px, -7px); opacity: 1; }
.site-chat-launch:is(:hover, :focus-visible) .site-chat-launch-corners::after { transform: translate(7px, -7px); opacity: 1; }
.site-chat-send:is(:enabled:hover, :focus-visible)::before { transform: translate(-3px, 3px); opacity: 1; }
.site-chat-send:is(:enabled:hover, :focus-visible)::after { transform: translate(-3px, -3px); opacity: 1; }
.site-chat-send:is(:enabled:hover, :focus-visible) .site-chat-send-corners::before { transform: translate(3px, 3px); opacity: 1; }
.site-chat-send:is(:enabled:hover, :focus-visible) .site-chat-send-corners::after { transform: translate(3px, -3px); opacity: 1; }
.site-chat-composer textarea { display: block; box-sizing: border-box; flex: 1; min-width: 0; height: 40px; resize: none; overflow: hidden; color: #fdfdfd; background: transparent; border: 1px solid #8c4d46; border-radius: 0; padding: 8px; font: 400 16px monospace; }
.site-chat-composer textarea::placeholder { color: #fdfdfd; opacity: 1; }
.site-chat-composer textarea:focus { outline: none; border-color: #8c4d46; }
@media (max-width: 640px) {
  /* The inventory and chat can overlap on narrow screens. Keep chat controls reachable. */
  .site-chat, .site-chat-launch { z-index: 1112; }
  .site-chat { bottom: max(10dvh, env(safe-area-inset-bottom)); width: min(clamp(240px, 55vw, 345px), calc(100vw - 12px)); height: min(max(320px, 50dvh), 80dvh); }
}
@media (prefers-reduced-motion: reduce) {
  .site-chat, .site-chat-launch, .site-chat-close, .site-chat-launch-corners::before, .site-chat-launch-corners::after,
  .site-chat-send::before, .site-chat-send::after, .site-chat-send-corners::before, .site-chat-send-corners::after { transition: none; }
}
.site-chat-notice { position: absolute; right: min(50px, 4vw); bottom: calc(100% + 18px); width: min(538px, calc(100vw - 20px - min(50px, 4vw))); box-sizing: border-box; padding: 11px 32px 11px 15px; background: #ff5c00; box-shadow: 0 3px 14px #0009; border-radius: 2px; color: #fff; font-size: 16px; max-height: 27dvh; overflow: auto; }
.site-chat-notice-close { position: absolute; right: 4px; top: 4px; }
.site-chat-access-notice { position: fixed; top: 40px; right: 50px; z-index: 999999; width: max-content; max-width: calc(100vw - 60px); pointer-events: none; }
.site-chat-access-toast {
  box-sizing: border-box;
  /* Match the reference's intrinsic height: Chrome animates the padding around it. */
  interpolate-size: numeric-only;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  margin-bottom: 0;
  border-radius: 2px;
  color: #fff;
  background: transparent;
  font: 16px/1.5 Roboto, sans-serif;
  text-shadow: 1px 1px #060606;
  transition: height .6s ease, opacity .4s ease, background .6s ease, padding .4s ease, margin .4s ease;
  will-change: height, opacity, background;
  overflow: hidden;
  overflow-wrap: break-word;
}
.site-chat-access-toast--visible {
  height: auto;
  opacity: 1;
  padding: 10px 15px;
  margin-bottom: 5px;
  background: #ff5e00;
  box-shadow: 0 0 10px #101010;
  pointer-events: auto;
  cursor: pointer;
}
.site-chat-access-toast ul { margin: 0; padding-left: 25px; list-style: square; }
.site-chat-access-toast li::marker { color: #4d4e50; }
.site-chat-access-toast .site-chat-reset { margin-top: 24px; }
@media (max-width: 768px) {
  .site-chat-access-notice { left: 10px; right: 10px; width: auto; max-width: none; }
}
@media (max-width: 480px) {
  .site-chat-access-toast { font-size: 14px; }
  .site-chat-access-toast--visible { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-chat-access-toast { transition: none; }
}
.site-chat-reset { margin-top: 10px; }

.admin-chat-settings { display: grid; gap: 14px; }
.admin-chat-settings .admin-chat-card { padding: 18px clamp(14px, 2vw, 24px); }
.admin-chat-card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.admin-chat-card p { margin: 0; color: #e1e4e7; }
.admin-chat-rooms, .admin-chat-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-chat-rooms { margin-top: 14px; }
.admin-chat-room { min-width: 0; padding: 13px 15px; border: 1px solid #ffffff2b; background: #151a20aa; }
.admin-chat-room header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 12px; }
.admin-chat-room h3 { margin: 0; font-size: 14px; font-weight: 600; }
.admin-chat-room header span { color: #ffe0a8; }
.admin-chat-room header span[data-ready="true"] { color: #8fe5bb; }
.admin-chat-room dl { display: flex; gap: 12px 28px; margin: 10px 0; }
.admin-chat-room dt { color: #d4dbe0; }
.admin-chat-room dd { margin: 1px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-chat-room p { font-size: 12px; }
.admin-chat-room time { white-space: nowrap; }
.admin-chat-form { display: grid; gap: 12px; }
.admin-chat-visibility { display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; }
.admin-chat-visibility input { accent-color: #e65344; }
.admin-chat-fields label, .admin-chat-profiles { display: grid; align-content: end; gap: 5px; }
.admin-chat-fields input, .admin-chat-profiles textarea { box-sizing: border-box; width: 100%; min-width: 0; }
.admin-chat-profiles textarea { resize: vertical; }
.admin-chat-save { display: flex; }
.admin-chat-clear { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.admin-chat-clear .admin-button--danger {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e6847d;
  border-radius: 3px;
  background: #542826;
  color: #fff0ee;
  font-weight: 600;
}
.admin-chat-clear .admin-button--danger:hover:not(:disabled) { background: #723532; }
.admin-chat-clear .admin-button--danger:focus-visible { outline: 2px solid #ffaea7; outline-offset: 2px; }
.admin-chat-status { margin: 0; }
.admin-chat-status:empty { display: none; }
@media (max-width: 760px) {
  .admin-chat-rooms, .admin-chat-fields { grid-template-columns: 1fr; }
}

html:not(.admin-shell-active):has(.page-shell) {
  scrollbar-width: thin;
  scrollbar-color: #9093996b #212325;
}

@supports selector(::-webkit-scrollbar) {
  html:not(.admin-shell-active):has(.page-shell) { scrollbar-width: auto; scrollbar-color: auto; }
  html:not(.admin-shell-active):has(.page-shell)::-webkit-scrollbar,
  html:not(.admin-shell-active):has(.page-shell) > body::-webkit-scrollbar { width: 4px; height: 4px; }
  html:not(.admin-shell-active):has(.page-shell)::-webkit-scrollbar-track,
  html:not(.admin-shell-active):has(.page-shell) > body::-webkit-scrollbar-track { background: #212325; border-radius: 2px; }
  html:not(.admin-shell-active):has(.page-shell)::-webkit-scrollbar-thumb,
  html:not(.admin-shell-active):has(.page-shell) > body::-webkit-scrollbar-thumb { background: #9093996b; border-radius: 2px; }
  html:not(.admin-shell-active):has(.page-shell)::-webkit-scrollbar-thumb:hover,
  html:not(.admin-shell-active):has(.page-shell) > body::-webkit-scrollbar-thumb:hover { background: #e74c3c; }
  html:not(.admin-shell-active):has(.page-shell)::-webkit-scrollbar-button,
  html:not(.admin-shell-active):has(.page-shell) > body::-webkit-scrollbar-button { display: none; }
}