/* Vuplore Community Hub body stylesheet.
   Global nav, site banners, staff clock, and footer stay owned by style.css/siteBanner.js. */

body.vuplore-comms-template {
  --comms-bg: #0f1317;
  --comms-bg-2: #151a20;
  --comms-bg-3: #1b2128;
  --comms-panel: rgba(27, 32, 39, 0.84);
  --comms-panel-soft: rgba(32, 38, 46, 0.74);
  --comms-line: rgba(255, 255, 255, 0.08);
  --comms-line-strong: rgba(255, 255, 255, 0.13);
  --comms-line-red: rgba(238, 35, 40, 0.55);
  --comms-text: #edf0f5;
  --comms-muted: #a4abb6;
  --comms-subtle: #7e8793;
  --comms-silver: var(--vuplore-silver, #91918C);
  --comms-blue: var(--vuplore-blue, #122D6E);
  --comms-red: var(--vuplore-red, #871212);
  --comms-red-dark: color-mix(in srgb, var(--comms-red) 72%, #050608);
  --comms-red-soft: color-mix(in srgb, var(--comms-red) 18%, transparent);
  --comms-green: var(--vuplore-green, #125F37);
  --comms-gold: var(--vuplore-yellow, #9B7016);
  --comms-purple: #a59cff;
  --comms-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --comms-shell-gap-top: 10px;
  --comms-shell-gap-bottom: 10px;

  min-height: 100dvh;
  color: var(--comms-text);
  background:
    radial-gradient(circle at 50% -120px, rgba(80, 95, 105, 0.18), transparent 34%),
    radial-gradient(circle at 76% 22%, rgba(30, 40, 52, 0.35), transparent 24%),
    linear-gradient(180deg, #0b0e11 0%, #11161b 38%, #0d1115 100%);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

body.vuplore-comms-template > .site-seasonal-layer {
  display: none !important;
}

body.vuplore-comms-template::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 74%, transparent);
  opacity: 0.28;
}

body.vuplore-comms-template .community-comms-shell {
  position: relative;
  z-index: 1;
  width: calc(100vw - 12px) !important;
  max-width: none !important;
  height: clamp(540px, calc(100dvh - var(--global-nav-height, 72px) - var(--site-banner-height, 0px) - var(--staff-clock-height, 0px) - 88px), 840px);
  min-height: 0;
  margin: var(--comms-shell-gap-top) max(6px, calc((100% - 100vw) / 2 + 6px)) var(--comms-shell-gap-bottom) !important;
  padding: 12px 14px 14px;
  display: grid !important;
  grid-template-columns: 430px minmax(680px, 1fr) 390px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 14px !important;
  color: var(--comms-text);
  overflow: hidden !important;
  box-sizing: border-box;
}

body.vuplore-comms-template .community-comms-shell *,
body.vuplore-comms-template .community-comms-shell *::before,
body.vuplore-comms-template .community-comms-shell *::after {
  box-sizing: border-box;
}

body.vuplore-comms-template .community-comms-shell :is(button, input, textarea) {
  font: inherit;
}

body.vuplore-comms-template .community-comms-shell :is(button, a, summary) {
  -webkit-tap-highlight-color: transparent;
}

body.vuplore-comms-template .community-comms-shell a {
  color: inherit;
}

body.vuplore-comms-template .panel,
body.vuplore-comms-template .chat-panel,
body.vuplore-comms-template .right-card {
  background:
    linear-gradient(180deg, rgba(31, 37, 45, 0.83), rgba(21, 26, 32, 0.84)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.05), transparent 30%);
  border: 1px solid var(--comms-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--comms-shadow);
}

body.vuplore-comms-template .sidebar {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 20px 16px 12px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

body.vuplore-comms-template .side-section {
  min-height: 0;
}

body.vuplore-comms-template .section-head {
  min-height: 34px;
  margin: 2px 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  color: #b9c0cb;
  font-size: 15px;
  letter-spacing: 0.07em;
  font-weight: 900;
}

body.vuplore-comms-template .section-head small,
body.vuplore-comms-template .right-title small {
  min-width: 30px;
  color: #cfd5df;
  font-size: 11px;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}

body.vuplore-comms-template .add-btn {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #c2c7cf;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.03);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

body.vuplore-comms-template .community-channel-list,
body.vuplore-comms-template .community-hub-dm-list {
  min-height: 0;
  display: grid;
  gap: 1px;
  overflow: auto;
  padding-right: 2px;
}

body.vuplore-comms-template .community-channel-list {
  max-height: 306px;
}

body.vuplore-comms-template .community-hub-dm-list {
  max-height: 256px;
  gap: 4px;
}

body.vuplore-comms-template .community-channel,
body.vuplore-comms-template .community-hub-dm-row,
body.vuplore-comms-template .dm,
body.vuplore-comms-template .utility-row {
  width: 100%;
  border: 0;
  text-decoration: none;
  color: #d8dde5;
  position: relative;
  cursor: pointer;
}

body.vuplore-comms-template .community-channel {
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

body.vuplore-comms-template .community-channel::before {
  content: "#";
  color: currentColor;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

body.vuplore-comms-template .community-channel::after {
  content: none !important;
  display: none !important;
}

body.vuplore-comms-template .community-channel span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: lowercase !important;
}

body.vuplore-comms-template .community-channel-favorite {
  margin-left: auto;
  color: #f0f3f7;
  font-size: 13px;
  line-height: 1;
}

body.vuplore-comms-template .community-channel .badge {
  width: 22px;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  font-size: 12px;
}

body.vuplore-comms-template .community-channel-favorite + .badge {
  margin-left: 0;
}

body.vuplore-comms-template .community-channel small {
  display: none;
}

body.vuplore-comms-template .community-channel:hover,
body.vuplore-comms-template .community-hub-dm-row:hover,
body.vuplore-comms-template .utility-row:hover {
  background: rgba(255, 255, 255, 0.055);
}

body.vuplore-comms-template .community-channel.active,
body.vuplore-comms-template .community-channel.is-active,
body.vuplore-comms-template .community-channel[aria-selected="true"],
body.vuplore-comms-template .community-hub-dm-row.active {
  background: linear-gradient(90deg, var(--comms-red), color-mix(in srgb, var(--comms-red) 62%, #050608)) !important;
  color: #fff !important;
}

body.vuplore-comms-template .community-hub-dm-row.is-empty {
  cursor: default;
}

body.vuplore-comms-template .community-channel.locked .lock {
  margin-left: auto;
  color: #aeb6c2;
  font-size: 12px;
}

body.vuplore-comms-template .badge,
body.vuplore-comms-template .community-channel-count {
  margin-left: auto;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--comms-red);
  color: #fff;
  box-shadow: none;
  font-size: 14px;
  font-weight: 900;
  font-style: normal;
}

body.vuplore-comms-template .badge {
  width: 28px;
  min-width: 28px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
}

body.vuplore-comms-template .divider {
  height: 1px;
  margin: 16px 0;
  flex: 0 0 auto;
  background: var(--comms-line);
}

body.vuplore-comms-template .community-hub-dm-row,
body.vuplore-comms-template .dm {
  min-height: 50px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  text-align: left;
  overflow: hidden;
}

body.vuplore-comms-template .community-hub-dm-row > div,
body.vuplore-comms-template .dm-text {
  min-width: 0;
  overflow: hidden;
}

body.vuplore-comms-template .community-hub-dm-row strong,
body.vuplore-comms-template .dm-name {
  display: block;
  color: #eef2f8;
  font-size: 16px;
  line-height: 1.05;
  font-weight: 800;
  text-transform: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vuplore-comms-template .community-hub-dm-row small,
body.vuplore-comms-template .dm-state {
  margin-top: 4px;
  color: #b8bec8;
  font-size: 13px;
  display: block;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vuplore-comms-template .community-hub-social-nav {
  display: grid;
  gap: 2px;
}

body.vuplore-comms-template .utility-row {
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
}

body.vuplore-comms-template .utility-row.active {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

body.vuplore-comms-template .utility-symbol {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #dce1e8;
  font-size: 13px;
  font-weight: 900;
}

body.vuplore-comms-template .utility-symbol svg,
body.vuplore-comms-template .view-friends svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.vuplore-comms-template .notice {
  margin-top: auto;
  border-radius: 8px;
  border: 1px solid rgba(237, 31, 40, 0.42);
  background: linear-gradient(120deg, rgba(237, 31, 40, 0.12), rgba(255, 255, 255, 0.035));
  padding: 18px;
  color: #dfe4ec;
  font-size: 16px;
  line-height: 1.35;
}

body.vuplore-comms-template .notice-title {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 13px;
  align-items: start;
  font-weight: 800;
  margin-bottom: 12px;
}

body.vuplore-comms-template .notice p {
  margin: 0;
}

body.vuplore-comms-template .notice strong,
body.vuplore-comms-template .notice a {
  color: var(--comms-red);
  font-weight: 900;
  text-decoration: none;
}

body.vuplore-comms-template .community-toast-stack {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9999;
  width: min(380px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

body.vuplore-comms-template .community-toast {
  --toast-tone: var(--comms-blue);
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--toast-tone) 42%, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--toast-tone) 18%, #151a20), #10151b);
  color: var(--comms-text);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(calc(100% + 32px));
  transition: opacity 220ms ease, transform 260ms ease;
}

body.vuplore-comms-template .community-toast.visible {
  opacity: 1;
  transform: translateX(0);
}

body.vuplore-comms-template .community-toast.success {
  --toast-tone: var(--comms-green);
}

body.vuplore-comms-template .community-toast.error {
  --toast-tone: var(--comms-red);
}

body.vuplore-comms-template .community-toast-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--toast-tone);
}

body.vuplore-comms-template .community-toast-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.vuplore-comms-template .community-toast-copy b {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.vuplore-comms-template .community-toast-copy small {
  color: #d8dde5;
  font-size: 12px;
  line-height: 1.35;
}

body.vuplore-comms-template .community-toast-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--comms-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

body.vuplore-comms-template .community-toast-close:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

body.vuplore-comms-template .avatar,
body.vuplore-comms-template .community-hub-avatar,
body.vuplore-comms-template .community-message-avatar,
body.vuplore-comms-template .community-active-avatar {
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent !important;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

body.vuplore-comms-template .avatar.small,
body.vuplore-comms-template .community-hub-avatar {
  width: 38px;
  height: 38px;
}

body.vuplore-comms-template .avatar.large {
  width: 92px;
  height: 92px;
}

body.vuplore-comms-template .avatar.star-avatar,
body.vuplore-comms-template .community-hub-avatar.star-avatar,
body.vuplore-comms-template .community-message-avatar.star-avatar {
  background:
    radial-gradient(circle at 50% 50%, #ff2532 0 22%, transparent 24%),
    conic-gradient(from 18deg, #18222b, #ed1f28, #1d2740, #ed1f28, #18222b) !important;
  box-shadow: none !important;
}

body.vuplore-comms-template .avatar.star-avatar::before,
body.vuplore-comms-template .community-hub-avatar.star-avatar::before,
body.vuplore-comms-template .community-message-avatar.star-avatar::before {
  content: "\2605";
  color: #071015;
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.45);
}

body.vuplore-comms-template .avatar.small.star-avatar::before,
body.vuplore-comms-template .community-hub-avatar.star-avatar::before {
  font-size: 16px;
}

body.vuplore-comms-template .avatar.large.star-avatar::before {
  font-size: 30px;
}

body.vuplore-comms-template .deleted-avatar.star-avatar {
  background:
    radial-gradient(circle at 50% 50%, #d6a900 0 23%, transparent 25%),
    conic-gradient(from 18deg, #4e4107, #b99704, #756202, #b99704, #4e4107) !important;
  box-shadow: none !important;
}

body.vuplore-comms-template .deleted-avatar.star-avatar::before {
  color: #775f00;
  text-shadow: 0 1px 10px rgba(255, 240, 128, 0.55);
}

body.vuplore-comms-template .avatar.nova,
body.vuplore-comms-template .community-hub-avatar.nova {
  background: linear-gradient(135deg, #48d8ff, #313a62 52%, #141820);
}

body.vuplore-comms-template .avatar.wolf,
body.vuplore-comms-template .community-hub-avatar.wolf {
  background: linear-gradient(135deg, #9aa6b6, #303844 48%, #11161c);
}

body.vuplore-comms-template .avatar.aviator,
body.vuplore-comms-template .community-hub-avatar.aviator {
  background: linear-gradient(135deg, #ffc466, #8b3344 50%, #171c23);
}

body.vuplore-comms-template .avatar.silent,
body.vuplore-comms-template .community-hub-avatar.silent {
  background: linear-gradient(135deg, #7e8793, #272d36 54%, #11161c);
}

body.vuplore-comms-template .avatar img,
body.vuplore-comms-template .community-hub-avatar img,
body.vuplore-comms-template .community-message-avatar img,
body.vuplore-comms-template .community-active-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

body.vuplore-comms-template .online-dot,
body.vuplore-comms-template .avatar .online-dot {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #151a20;
  background: var(--comms-green);
  box-shadow: none;
}

body.vuplore-comms-template .community-presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 3;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #91918c;
  box-shadow: 0 0 0 2px #151a20;
  pointer-events: none;
}

body.vuplore-comms-template .community-message-avatar .community-presence-dot,
body.vuplore-comms-template .community-active-avatar .community-presence-dot {
  width: 13px;
  height: 13px;
}

body.vuplore-comms-template .community-hub-profile-avatar .community-presence-dot,
body.vuplore-comms-template .avatar.large .community-presence-dot {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 3px #151a20;
}

body.vuplore-comms-template .community-presence-dot.is-online {
  background: #125f37;
}

body.vuplore-comms-template .community-presence-dot.is-dnd {
  background: #871212;
}

body.vuplore-comms-template .community-presence-dot.is-offline {
  background: #91918c;
}

body.vuplore-comms-template .status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--comms-green);
  box-shadow: none;
  display: inline-block;
  flex: 0 0 auto;
}

body.vuplore-comms-template .state-away {
  background: var(--comms-gold);
}

body.vuplore-comms-template .state-dnd {
  background: var(--comms-red);
}

body.vuplore-comms-template .state-offline {
  background: #8d96a1;
}

body.vuplore-comms-template .mini-icon {
  width: 22px;
  height: 22px;
  color: currentColor;
}

body.vuplore-comms-template .chat-panel {
  min-width: 0;
  height: 100%;
  border-radius: 7px;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

body.vuplore-comms-template .chat-head {
  padding: 26px 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

body.vuplore-comms-template .chat-title-line {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

body.vuplore-comms-template .chat-title {
  margin: 0;
  min-width: 0;
  color: #f3f6fb;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  text-transform: none !important;
}

body.vuplore-comms-template .chat-title .hash {
  color: #c2c7d1;
  margin-right: 12px;
  font-weight: 500;
}

body.vuplore-comms-template .community-hub-chat:not([data-center-mode="channel"]) .chat-title .hash {
  display: none;
}

body.vuplore-comms-template .star {
  color: #929aa6;
  font-size: 29px;
  margin-right: 0;
  line-height: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

body.vuplore-comms-template .star.active {
  color: #f0f3f7;
}

body.vuplore-comms-template .head-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-left: auto;
  color: #d2d7de;
  font-size: 16px;
  flex-wrap: nowrap;
}

body.vuplore-comms-template .community-cooldown-status {
  margin-right: auto;
  min-width: 0;
  color: color-mix(in srgb, var(--comms-gold) 72%, #fff);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

body.vuplore-comms-template .icon-tool,
body.vuplore-comms-template .learn,
body.vuplore-comms-template .profile-button,
body.vuplore-comms-template .view-friends,
body.vuplore-comms-template .community-hub-friend-actions button,
body.vuplore-comms-template .community-request-actions button,
body.vuplore-comms-template .community-add-friend-form button {
  min-height: 38px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.055);
  color: #edf1f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

body.vuplore-comms-template .icon-tool {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.vuplore-comms-template .icon-tool.member-count {
  width: auto;
  gap: 8px;
}

body.vuplore-comms-template .icon-tool svg,
body.vuplore-comms-template .search svg,
body.vuplore-comms-template .attach svg,
body.vuplore-comms-template .shield svg {
  width: 22px;
  height: 22px;
}

body.vuplore-comms-template .search {
  width: 212px;
  height: 50px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #c9cfd8;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  overflow: hidden;
  box-shadow: none;
}

body.vuplore-comms-template .search input {
  width: 100%;
  border: 0;
  border-bottom: 0 !important;
  outline: 0;
  background: transparent;
  color: var(--comms-text);
  font-size: 15px;
  box-shadow: none !important;
  appearance: none;
}

body.vuplore-comms-template .search input::-webkit-search-decoration,
body.vuplore-comms-template .search input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}

body.vuplore-comms-template .chat-subtitle {
  margin: 13px 0 0 5px;
  color: #e3e7ee;
  font-size: 16px;
}

body.vuplore-comms-template .chat-subtitle a {
  color: var(--comms-red);
  text-decoration: none;
}

body.vuplore-comms-template .community-channel-code {
  display: none;
}

body.vuplore-comms-template .messages-wrap {
  min-height: 0;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.vuplore-comms-template .safety-banner {
  margin: 8px 20px 0;
  min-height: 86px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(90deg, rgba(44, 51, 62, 0.9), rgba(28, 34, 42, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.vuplore-comms-template .shield {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #dfe4eb;
  flex: 0 0 auto;
}

body.vuplore-comms-template .safety-banner strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

body.vuplore-comms-template .safety-banner small {
  display: block;
  color: #e3e8ef;
  font-size: 15px;
}

body.vuplore-comms-template .learn {
  width: 122px;
  height: 44px;
  margin-left: auto;
  background: rgba(24, 29, 38, 0.8);
  border-color: rgba(158, 174, 222, 0.45);
  font-size: 16px;
}

body.vuplore-comms-template .community-hub-chat:not([data-center-mode="channel"]) .safety-banner {
  display: none;
}

body.vuplore-comms-template .messages,
body.vuplore-comms-template .community-message-list {
  position: relative;
  min-height: auto;
  height: auto !important;
  max-height: none !important;
  padding: 18px 22px 24px;
  display: block;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vuplore-comms-template .community-hub-chat[data-center-mode="channel"] .messages::after {
  display: none;
}

body.vuplore-comms-template .community-message {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 9px 0 24px;
  align-items: start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vuplore-comms-template .community-message::before {
  content: "";
  position: absolute;
  inset: -8px 10px -8px -10px;
  z-index: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.042);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

body.vuplore-comms-template .community-message:hover::before,
body.vuplore-comms-template .community-message:focus-within::before,
body.vuplore-comms-template .community-message.show-actions::before {
  opacity: 1;
}

body.vuplore-comms-template .community-message > * {
  position: relative;
  z-index: 1;
}

body.vuplore-comms-template .community-message-avatar {
  width: 52px;
  height: 52px;
  align-self: start !important;
  margin-top: 1px !important;
}

body.vuplore-comms-template .community-message-main {
  min-width: 0;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vuplore-comms-template .community-message-meta {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin-bottom: 10px;
  min-width: 0;
  color: #929aa5;
  font-size: 15px;
}

body.vuplore-comms-template .community-message-meta a {
  color: #f1f4f9;
  font-size: 17px;
  font-weight: 900;
  text-transform: none !important;
  text-decoration: none;
}

body.vuplore-comms-template .community-message-meta a.author-red {
  color: var(--comms-red);
}

body.vuplore-comms-template .community-message-meta time {
  color: #929aa5;
  font-size: 15px;
  font-weight: 500;
}

body.vuplore-comms-template .community-badges {
  display: inline-flex;
  gap: 5px;
}

body.vuplore-comms-template .community-badges span,
body.vuplore-comms-template .community-message-system-pill,
body.vuplore-comms-template .community-message-system-label {
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(237, 31, 40, 0.13);
  color: #ffbdc0;
  font-size: 11px;
  font-weight: 900;
}

body.vuplore-comms-template .community-message-main p,
body.vuplore-comms-template .community-message-text,
body.vuplore-comms-template .staff-empty p {
  margin: 0;
  color: #f0f4fa;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
}

body.vuplore-comms-template .community-message-reply {
  margin: 0 0 10px;
  border-left: 2px solid rgba(237, 31, 40, 0.6);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  background: rgba(255, 255, 255, 0.045);
  color: #cdd4df;
  font-size: 13px;
}

body.vuplore-comms-template .community-message-actions {
  display: none;
}

body.vuplore-comms-template .community-message-quick-actions {
  position: absolute;
  right: 38px;
  top: -5px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 150ms ease, transform 150ms ease;
}

body.vuplore-comms-template .community-message:hover .community-message-quick-actions,
body.vuplore-comms-template .community-message:focus-within .community-message-quick-actions,
body.vuplore-comms-template .community-message.show-actions .community-message-quick-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.vuplore-comms-template .community-message-action-button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.075);
  color: #bfc7d2;
  display: grid;
  place-items: center;
  cursor: pointer;
}

body.vuplore-comms-template .community-message-action-button:hover,
body.vuplore-comms-template .community-message-action-button:focus-visible {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  outline: 0;
}

body.vuplore-comms-template .community-message-action-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.vuplore-comms-template .community-message-menu,
body.vuplore-comms-template .community-reaction-menu {
  position: relative;
  z-index: 1;
}

body.vuplore-comms-template .community-message-menu[open],
body.vuplore-comms-template .community-reaction-menu[open] {
  z-index: 60;
}

body.vuplore-comms-template .community-message-menu summary,
body.vuplore-comms-template .community-reaction-menu summary {
  width: 30px;
  height: 30px;
  list-style: none;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #a6adba;
  cursor: pointer;
}

body.vuplore-comms-template .community-message-menu summary::-webkit-details-marker,
body.vuplore-comms-template .community-reaction-menu summary::-webkit-details-marker {
  display: none;
}

body.vuplore-comms-template .community-message-menu-panel,
body.vuplore-comms-template .community-reaction-panel {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 70;
  width: 238px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--comms-line-strong);
  background: #171d24;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

body.vuplore-comms-template .community-message-menu.is-drop-up .community-message-menu-panel,
body.vuplore-comms-template .community-reaction-menu.is-drop-up .community-reaction-panel {
  top: auto;
  bottom: 34px;
}

body.vuplore-comms-template .community-message-menu-section,
body.vuplore-comms-template .community-reaction-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

body.vuplore-comms-template .community-message-menu-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--comms-line);
}

body.vuplore-comms-template .community-message-menu-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.vuplore-comms-template .community-message-menu-panel button,
body.vuplore-comms-template .community-reaction-button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #dfe5ed;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

body.vuplore-comms-template .community-message-menu-panel button.is-report-action {
  background: color-mix(in srgb, var(--comms-red) 22%, transparent);
  color: color-mix(in srgb, var(--comms-red) 58%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--comms-red) 44%, transparent);
}

body.vuplore-comms-template .community-message-menu-section--mod {
  border-top-color: color-mix(in srgb, var(--comms-gold) 34%, transparent);
}

body.vuplore-comms-template .community-message-menu-section--mod button {
  background: color-mix(in srgb, var(--comms-gold) 18%, transparent);
  color: color-mix(in srgb, var(--comms-gold) 62%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--comms-gold) 42%, transparent);
}

body.vuplore-comms-template .community-reaction-button.active {
  background: var(--comms-red-soft);
  color: #fff;
}

body.vuplore-comms-template .community-reaction-button b {
  margin-left: 5px;
}

@media (hover: none) {
  body.vuplore-comms-template .community-message:hover::before {
    opacity: 0;
  }

  body.vuplore-comms-template .community-message:hover .community-message-quick-actions {
    opacity: 0;
    pointer-events: none;
  }

  body.vuplore-comms-template .community-message.show-actions::before,
  body.vuplore-comms-template .community-message:focus-within::before {
    opacity: 1;
  }

  body.vuplore-comms-template .community-message.show-actions .community-message-quick-actions,
  body.vuplore-comms-template .community-message:focus-within .community-message-quick-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

body.vuplore-comms-template .community-message.deleted-message,
body.vuplore-comms-template .community-message.hidden-message {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  border-radius: 8px;
  padding: 10px 14px 14px 14px !important;
}

body.vuplore-comms-template .community-message.deleted-message {
  border: 1px solid rgba(92, 173, 255, 0.5) !important;
  background: linear-gradient(90deg, rgba(40, 104, 170, 0.2), rgba(28, 64, 105, 0.12), rgba(255, 255, 255, 0.03)) !important;
  color: #cfe8ff;
}

body.vuplore-comms-template .community-message.hidden-message {
  border: 1px solid rgba(255, 196, 0, 0.45) !important;
  background: linear-gradient(90deg, rgba(255, 196, 0, 0.14), rgba(255, 196, 0, 0.07), rgba(255, 255, 255, 0.03)) !important;
  color: #ffd21a;
}

body.vuplore-comms-template .community-message.protected-message,
body.vuplore-comms-template .community-message.system-message {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  border-radius: 8px;
  padding: 10px 14px 14px 14px !important;
}

body.vuplore-comms-template .community-message.protected-message {
  border: 1px solid rgba(145, 145, 140, 0.45) !important;
  background: linear-gradient(90deg, rgba(145, 145, 140, 0.16), rgba(145, 145, 140, 0.07), rgba(255, 255, 255, 0.03)) !important;
}

body.vuplore-comms-template .community-message.system-message {
  border: 1px solid rgba(92, 173, 255, 0.34) !important;
  background: linear-gradient(90deg, rgba(92, 173, 255, 0.13), rgba(92, 173, 255, 0.055), rgba(255, 255, 255, 0.03)) !important;
}

body.vuplore-comms-template .community-message.deleted-message :is(.community-message-meta a, .community-message-meta time, p, .community-message-text) {
  color: #cfe8ff;
}

body.vuplore-comms-template .community-message.hidden-message :is(.community-message-meta a, .community-message-meta time, p, .community-message-text) {
  color: #ffd21a;
}

body.vuplore-comms-template .community-message.protected-message :is(.community-message-meta a, .community-message-meta time, p, .community-message-text) {
  color: #e2e5de;
}

body.vuplore-comms-template .community-message.system-message :is(.community-message-meta a, .community-message-meta time, p, .community-message-text) {
  color: #d9ecff;
}

body.vuplore-comms-template .community-mention {
  border-radius: 5px;
  padding: 1px 5px;
  background: rgba(237, 31, 40, 0.18);
  color: #ff6a72;
  font-weight: 900;
  text-decoration: none;
}

body.vuplore-comms-template .community-mention.is-own-mention {
  background: rgba(237, 31, 40, 0.34);
  color: #fff;
}

body.vuplore-comms-template .community-mention-role {
  cursor: default;
}

body.vuplore-comms-template .community-inline-code {
  border-radius: 5px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.35);
  color: #e7ecf5;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}

body.vuplore-comms-template .community-code-block {
  margin: 8px 0 0;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.32);
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre-wrap;
}

body.vuplore-comms-template .community-code-block code {
  font-family: "Cascadia Mono", Consolas, monospace;
  color: #e7ecf5;
}

body.vuplore-comms-template .community-spoiler {
  border-radius: 4px;
  background: #05070a;
  color: transparent;
  padding: 1px 5px;
}

body.vuplore-comms-template .community-spoiler:hover,
body.vuplore-comms-template .community-spoiler:focus {
  color: #eef2f7;
}

body.vuplore-comms-template .view-deleted {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffd21a;
  font-weight: 900;
}

body.vuplore-comms-template .view-deleted button {
  width: 96px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: #494e56;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

body.vuplore-comms-template .community-attachments {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

body.vuplore-comms-template .community-attachment-image img,
body.vuplore-comms-template .community-attachment-video {
  max-width: min(520px, 100%);
  max-height: 280px;
  border-radius: 8px;
  border: 1px solid var(--comms-line);
  object-fit: cover;
}

body.vuplore-comms-template .community-attachment-file {
  max-width: min(520px, 100%);
  border-radius: 8px;
  border: 1px solid var(--comms-line);
  background: rgba(255, 255, 255, 0.055);
  padding: 12px;
  display: grid;
  gap: 10px;
}

body.vuplore-comms-template .community-attachment-file a {
  color: #dce3ec;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.vuplore-comms-template .community-attachment-file audio {
  width: 100%;
}

body.vuplore-comms-template .community-attachment-link,
body.vuplore-comms-template .community-attachment-link-card {
  max-width: 520px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--comms-line);
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  gap: 4px;
  color: #dce3ec;
  text-decoration: none;
}

body.vuplore-comms-template .staff-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--comms-muted);
}

body.vuplore-comms-template .composer {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  padding: 0 22px 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 2;
}

body.vuplore-comms-template .composer.hidden,
body.vuplore-comms-template .community-message-form.hidden {
  display: none !important;
}

body.vuplore-comms-template .new-messages {
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  color: var(--comms-red);
  font-weight: 900;
  font-size: 16px;
  margin: 0 12px 18px;
  white-space: nowrap;
}

body.vuplore-comms-template .new-messages.is-visible {
  display: grid;
}

body.vuplore-comms-template .new-messages::before,
body.vuplore-comms-template .new-messages::after {
  content: "";
  height: 1px;
  background: var(--comms-red);
  box-shadow: 0 0 8px rgba(237, 31, 40, 0.3);
}

body.vuplore-comms-template .community-unread-divider {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
  align-items: center;
  gap: 18px;
  margin: 6px 0 20px;
  color: #ff4c55;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.vuplore-comms-template .community-unread-divider::before,
body.vuplore-comms-template .community-unread-divider::after {
  content: "";
  height: 1px;
  background: var(--comms-red);
  box-shadow: 0 0 8px rgba(135, 18, 18, 0.36);
}

body.vuplore-comms-template .community-unread-divider span {
  white-space: nowrap;
}

body.vuplore-comms-template .composer-box {
  height: 82px;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(35, 41, 49, 0.88), rgba(24, 29, 35, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.045), transparent 34%);
  display: grid !important;
  grid-template-columns: 42px 1px minmax(0, 1fr) 42px 119px 22px !important;
  align-items: center;
  gap: 14px;
  padding: 0 13px 0 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 24px rgba(0, 0, 0, 0.16);
}

body.vuplore-comms-template .message-input-shell {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  isolation: isolate;
  border-radius: 6px;
  background: rgba(3, 7, 11, 0.1);
  box-shadow: none;
}

body.vuplore-comms-template .attach,
body.vuplore-comms-template .emoji {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #c6ccd4;
  display: grid;
  place-items: center;
  cursor: pointer;
}

body.vuplore-comms-template .attach svg {
  width: 32px;
  height: 32px;
}

body.vuplore-comms-template .emoji {
  border-radius: 50%;
  border: 0;
  color: #b9c0ca;
  font-size: 31px;
  font-weight: 900;
}

body.vuplore-comms-template .emoji span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

body.vuplore-comms-template .emoji svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.vuplore-comms-template .input-line {
  width: 1px;
  height: 45px;
  background: rgba(255, 255, 255, 0.24);
}

body.vuplore-comms-template #communityMessageInput {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 50px;
  max-height: 120px;
  resize: none;
  border: 0;
  border-bottom: 0 !important;
  outline: 0;
  background: transparent;
  color: #edf1f7;
  padding: 13px 66px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none !important;
  overflow: hidden;
  box-shadow: none !important;
  appearance: none;
}

body.vuplore-comms-template .message-live-preview {
  position: absolute;
  inset: 0 66px 0 0;
  z-index: 1;
  min-height: 50px;
  max-height: 120px;
  padding: 13px 0 0;
  color: #edf1f7;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none !important;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  pointer-events: none;
}

body.vuplore-comms-template .message-live-preview:empty {
  display: none;
}

body.vuplore-comms-template .message-input-shell.has-live-format #communityMessageInput {
  color: transparent;
  caret-color: #edf1f7;
}

body.vuplore-comms-template .message-input-shell.has-live-format #communityMessageInput::selection {
  color: transparent;
  background: rgba(145, 145, 140, 0.32);
}

body.vuplore-comms-template #communityMessageInput::placeholder {
  color: #aeb5bf;
}

body.vuplore-comms-template .message-live-preview :is(strong, em, u, s, code, span, a) {
  font-size: inherit;
  text-transform: none !important;
  letter-spacing: 0;
}

body.vuplore-comms-template .message-live-preview strong {
  font-weight: 800;
}

body.vuplore-comms-template .message-live-preview em {
  font-weight: 400;
}

body.vuplore-comms-template .message-live-preview .community-mention {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #ff6a72;
  font-weight: 700;
}

body.vuplore-comms-template .message-live-preview .community-mention.is-own-mention {
  background: transparent;
  box-shadow: none;
  color: #ff8d93;
}

body.vuplore-comms-template .message-live-preview .community-format-mark {
  color: color-mix(in srgb, #edf1f7 58%, transparent);
  font-weight: inherit;
  text-decoration: none !important;
}

body.vuplore-comms-template .message-live-preview .community-code-block {
  margin: 0;
  padding: 1px 5px;
  display: inline;
  white-space: pre-wrap;
}

body.vuplore-comms-template .send {
  width: 119px;
  height: 52px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #e42730, #bd161e);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(237, 31, 40, 0.22);
}

body.vuplore-comms-template .send:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

body.vuplore-comms-template .hint-row {
  display: none;
  margin: 0;
  align-items: center;
  gap: 9px;
}

body.vuplore-comms-template .hint {
  color: #a6adb8;
  font-size: 15px;
  margin: 0;
  display: block;
  white-space: nowrap;
}

body.vuplore-comms-template .format-help {
  width: 22px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #aeb7c3;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  justify-self: center;
}

body.vuplore-comms-template .format-help:hover,
body.vuplore-comms-template .format-help:focus-visible {
  color: #fff;
  outline: 0;
}

body.vuplore-comms-template .message-count {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #7f8894;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

body.vuplore-comms-template .community-media-tools {
  margin: 8px 0 0 4px;
  display: block;
}

body.vuplore-comms-template .community-media-tools input {
  display: none;
}

body.vuplore-comms-template #communityMediaSummary {
  min-height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #aeb6c2;
  font-size: 12px;
  font-weight: 700;
}

body.vuplore-comms-template #communityMediaSummary:empty {
  display: none;
}

body.vuplore-comms-template .community-format-preview,
body.vuplore-comms-template .community-format-legend {
  margin: 8px 0 0 4px;
  border-radius: 8px;
  border: 1px solid var(--comms-line-strong);
  background: rgba(255, 255, 255, 0.045);
  color: #dbe2ec;
  padding: 10px 12px;
}

body.vuplore-comms-template .community-format-preview > b,
body.vuplore-comms-template .community-format-legend > b {
  display: block;
  margin-bottom: 6px;
  color: #aab3c0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.vuplore-comms-template .community-format-preview .community-message-text {
  font-size: 14px;
}

body.vuplore-comms-template .community-format-legend {
  position: absolute;
  z-index: 9;
  right: 18px;
  bottom: 68px;
  width: min(360px, calc(100% - 36px));
  display: grid;
  gap: 6px;
  background: #171d24;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

body.vuplore-comms-template .community-format-legend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #dce3ec;
  font-size: 13px;
}

body.vuplore-comms-template .community-format-legend code {
  color: #ffbdc0;
  font-family: "Cascadia Mono", Consolas, monospace;
}

body.vuplore-comms-template .community-reply-box,
body.vuplore-comms-template .community-post-lock,
body.vuplore-comms-template .community-mention-menu,
body.vuplore-comms-template .community-emoji-menu {
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px solid var(--comms-line-strong);
  background: rgba(255, 255, 255, 0.055);
  color: #dbe2ec;
  padding: 10px 12px;
}

body.vuplore-comms-template .community-mention-menu,
body.vuplore-comms-template .community-emoji-menu {
  position: absolute;
  z-index: 8;
  bottom: 110px;
  left: 80px;
  width: min(360px, calc(100% - 160px));
  display: grid;
  gap: 6px;
  background: #171d24;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
}

body.vuplore-comms-template .community-emoji-menu {
  left: auto;
  right: 142px;
  width: min(328px, calc(100% - 36px));
  max-height: 296px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

body.vuplore-comms-template .community-emoji-search {
  width: 100%;
  height: 36px;
  border: 1px solid var(--comms-line);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
  color: #edf1f7;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  outline: 0;
}

body.vuplore-comms-template .community-emoji-search:focus {
  border-color: color-mix(in srgb, var(--comms-red) 65%, var(--comms-line));
}

body.vuplore-comms-template .community-emoji-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

body.vuplore-comms-template .community-emoji-grid .micro {
  grid-column: 1 / -1;
  padding: 8px 4px;
}

body.vuplore-comms-template .community-mention-menu button,
body.vuplore-comms-template .community-emoji-menu button {
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.055);
  color: #edf1f7;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

body.vuplore-comms-template .community-emoji-grid button {
  min-height: 34px;
  justify-content: center;
  font-size: 19px;
}

body.vuplore-comms-template .community-mention-menu button.active {
  background: var(--comms-red-soft);
}

body.vuplore-comms-template .rightbar {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px;
  overflow: hidden !important;
}

body.vuplore-comms-template .right-card {
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(32, 38, 47, 0.88), rgba(22, 27, 34, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

body.vuplore-comms-template .profile-card {
  padding: 24px 22px 14px;
}

body.vuplore-comms-template .profile-top {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

body.vuplore-comms-template .profile-name {
  display: block;
  color: var(--comms-red);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vuplore-comms-template .profile-role {
  display: block;
  color: #c7cdd6;
  font-size: 16px;
  margin-bottom: 10px;
}

body.vuplore-comms-template .id-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b3bbc6;
  font-size: 13px;
}

body.vuplore-comms-template .id-pill {
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #d3d8df;
  font-weight: 800;
  font-size: 13px;
}

body.vuplore-comms-template .profile-edit {
  color: #a8b0bb;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: 800;
  text-decoration: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}

body.vuplore-comms-template .profile-edit svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.vuplore-comms-template .profile-card hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 15px 0 16px;
}

body.vuplore-comms-template .profile-button {
  width: 100%;
  height: 52px;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  font-size: 16px;
}

body.vuplore-comms-template .friends-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 18px 18px 16px;
}

body.vuplore-comms-template .right-title {
  color: #bfc5cf;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

body.vuplore-comms-template .community-hub-friends-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
}

body.vuplore-comms-template .community-hub-friend-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
}

body.vuplore-comms-template .rightbar .community-hub-friend-row {
  height: 45px;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.vuplore-comms-template .community-hub-friend-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

body.vuplore-comms-template .community-hub-friend-main strong,
body.vuplore-comms-template .friend-name {
  color: #edf0f5;
  font-size: 16px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vuplore-comms-template .community-hub-friend-main small,
body.vuplore-comms-template .friend-state {
  margin-top: 4px;
  color: #a9b0ba;
  font-size: 13px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vuplore-comms-template .rightbar .community-hub-friend-actions {
  display: none;
}

body.vuplore-comms-template .view-friends {
  margin-top: 9px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: #b6b3ff;
  background: transparent;
  font-size: 16px;
}

body.vuplore-comms-template .safety-card,
body.vuplore-comms-template .crypto-card {
  padding: 18px;
}

body.vuplore-comms-template .safety-row {
  width: 100%;
  min-height: 43px;
  border: 0;
  background: transparent;
  text-decoration: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: #dce2e9;
  font-size: 16px;
  cursor: pointer;
  text-align: left;
}

body.vuplore-comms-template .safety-row span:last-child {
  color: #8c95a2;
  font-size: 24px;
}

body.vuplore-comms-template .crypto-card {
  border-color: rgba(166, 156, 255, 0.23);
  background: linear-gradient(180deg, rgba(35, 39, 57, 0.86), rgba(22, 27, 37, 0.88));
}

body.vuplore-comms-template .crypto-head {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #e5e1ff;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 8px;
}

body.vuplore-comms-template .soon {
  display: inline-flex;
  margin-left: 0;
  border-radius: 5px;
  border: 1px solid rgba(165, 156, 255, 0.55);
  padding: 3px 7px;
  color: #d8d2ff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

body.vuplore-comms-template .crypto-card p {
  color: #c7cce4;
  font-size: 14px;
  line-height: 1.45;
  margin: 12px 0 0;
}

body.vuplore-comms-template .crypto-card a {
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

body.vuplore-comms-template .community-template-footer {
  position: relative;
  z-index: 1;
  min-height: 54px;
  height: 54px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(3, 7, 11, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

body.vuplore-comms-template .community-template-footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 34px;
  min-width: 0;
}

body.vuplore-comms-template .community-template-footer a {
  color: #fff;
  text-decoration: none;
}

body.vuplore-comms-template .community-center-surface {
  min-height: 100%;
  padding: 10px 4px 18px;
  display: grid;
  align-content: start;
  gap: 18px;
}

body.vuplore-comms-template .community-center-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #eef2f8;
  font-size: 20px;
  font-weight: 900;
}

body.vuplore-comms-template .community-center-title strong {
  min-width: 38px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--comms-red);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
}

body.vuplore-comms-template .community-center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

body.vuplore-comms-template .messages .community-hub-friend-row,
body.vuplore-comms-template .community-request-card,
body.vuplore-comms-template .community-settings-card,
body.vuplore-comms-template .community-add-friend-form,
body.vuplore-comms-template .community-request-section {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  padding: 14px;
}

body.vuplore-comms-template .messages .community-hub-friend-row {
  min-height: 76px;
}

body.vuplore-comms-template .community-hub-friend-actions,
body.vuplore-comms-template .community-request-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.vuplore-comms-template .community-hub-friend-actions button,
body.vuplore-comms-template .community-request-actions button,
body.vuplore-comms-template .community-add-friend-form button {
  min-height: 34px;
  padding: 0 12px;
}

body.vuplore-comms-template .community-request-surface {
  gap: 16px;
}

body.vuplore-comms-template .community-add-friend-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.vuplore-comms-template .community-add-friend-form label {
  display: grid;
  gap: 8px;
  color: #cfd5df;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.vuplore-comms-template .community-vuplore-input-wrap {
  height: 54px;
  border-radius: 8px;
  border: 1px solid var(--comms-line-strong);
  background: rgba(255, 255, 255, 0.045);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

body.vuplore-comms-template .community-vuplore-input-wrap b {
  color: #dfe4ec;
}

body.vuplore-comms-template .community-vuplore-input-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
}

body.vuplore-comms-template .community-friend-preview,
body.vuplore-comms-template .community-request-user {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

body.vuplore-comms-template .community-friend-preview > .micro {
  grid-column: 1 / -1;
  margin: 0;
}

body.vuplore-comms-template .community-request-status {
  min-height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cfd5df;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

body.vuplore-comms-template .community-request-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

body.vuplore-comms-template .community-request-user strong,
body.vuplore-comms-template .community-friend-preview strong,
body.vuplore-comms-template .community-settings-card strong {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

body.vuplore-comms-template .community-request-user small,
body.vuplore-comms-template .community-friend-preview small,
body.vuplore-comms-template .community-settings-card small,
body.vuplore-comms-template .micro {
  color: var(--comms-muted);
  font-size: 13px;
  line-height: 1.45;
}

body.vuplore-comms-template .community-settings-surface {
  grid-template-columns: minmax(0, 1fr);
}

body.vuplore-comms-template .community-settings-card {
  display: grid;
  gap: 12px;
}

body.vuplore-comms-template .community-settings-card.community-danger-card {
  border-color: rgba(237, 31, 40, 0.35);
  background: rgba(237, 31, 40, 0.08);
}

body.vuplore-comms-template .community-settings-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

body.vuplore-comms-template .community-mode-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.vuplore-comms-template .community-settings-option,
body.vuplore-comms-template .community-mode-control button {
  min-height: 70px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  color: #dfe4ec;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}

body.vuplore-comms-template .community-settings-option.active,
body.vuplore-comms-template .community-mode-control button.active {
  border-color: rgba(237, 31, 40, 0.42);
  background: rgba(237, 31, 40, 0.12);
}

body.vuplore-comms-template .community-settings-option b,
body.vuplore-comms-template .community-mode-control b {
  color: #f4f7fb;
  font-size: 14px;
}

body.vuplore-comms-template .community-settings-option span,
body.vuplore-comms-template .community-mode-control span {
  color: var(--comms-muted);
  font-size: 12px;
}

body.vuplore-comms-template .community-channel-settings-form {
  display: grid;
  gap: 12px;
}

body.vuplore-comms-template .community-settings-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #f4f7fb;
  font-size: 13px;
  font-weight: 900;
}

body.vuplore-comms-template .community-settings-field .input {
  width: 100%;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
  color: var(--comms-text);
  padding: 11px 12px;
  font: inherit;
  font-weight: 700;
}

body.vuplore-comms-template .community-settings-field textarea.input {
  min-height: 94px;
  resize: vertical;
  line-height: 1.45;
}

body.vuplore-comms-template .community-settings-check {
  position: relative;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
}

body.vuplore-comms-template .community-settings-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--comms-red);
  grid-row: 1 / span 2;
}

body.vuplore-comms-template .community-settings-check.disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

body.vuplore-comms-template .community-settings-select {
  min-height: 70px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  padding: 12px;
}

body.vuplore-comms-template .community-channel-settings-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

body.vuplore-comms-template .community-moderation-drawer {
  margin-top: 12px;
  border-radius: 8px;
  border: 1px solid var(--comms-line);
  background: rgba(255, 255, 255, 0.04);
  padding: 10px;
}

body.vuplore-comms-template .community-moderation-drawer summary {
  cursor: pointer;
  color: #fff;
  font-weight: 800;
}

body.vuplore-comms-template .community-admin-form,
body.vuplore-comms-template .community-channel-manager,
body.vuplore-comms-template .community-flag-panel,
body.vuplore-comms-template .community-audit-panel {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

body.vuplore-comms-template .hidden {
  display: none !important;
}

body.vuplore-comms-template ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

body.vuplore-comms-template ::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.09));
}

body.vuplore-comms-template ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
}

/* Compact desktop sizing from the supplied Comms mockup. */
body.vuplore-comms-template .community-comms-shell {
  width: calc(100vw - 12px) !important;
  max-width: none !important;
  height: clamp(560px, calc(100dvh - var(--global-nav-height, 72px) - var(--site-banner-height, 0px) - var(--staff-clock-height, 0px) - 68px), 820px);
  min-height: 0;
  padding: 0 12px;
  grid-template-columns: 360px minmax(620px, 1fr) 320px !important;
  gap: 10px !important;
}

body.vuplore-comms-template .sidebar {
  padding: 14px 12px 10px;
}

body.vuplore-comms-template .side-section {
  flex: 0 0 auto;
}

body.vuplore-comms-template .section-head {
  min-height: 28px;
  margin: 2px 12px 8px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: none;
  font-size: 13px;
}

body.vuplore-comms-template .add-btn {
  width: 28px;
  height: 28px;
  font-size: 20px;
}

body.vuplore-comms-template .community-channel-list,
body.vuplore-comms-template .community-hub-dm-list {
  max-height: none;
  gap: 0;
}

body.vuplore-comms-template .community-channel-list {
  max-height: clamp(170px, 22vh, 204px);
  overflow: auto;
  padding-right: 2px;
}

body.vuplore-comms-template .community-hub-dm-list {
  max-height: clamp(118px, 16vh, 152px);
  overflow: auto;
  padding-right: 2px;
}

body.vuplore-comms-template .community-channel,
body.vuplore-comms-template .community-hub-dm-row,
body.vuplore-comms-template .dm,
body.vuplore-comms-template .utility-row {
  font-size: 14px;
}

body.vuplore-comms-template .community-channel {
  height: 34px;
  gap: 10px;
  padding: 0 11px;
}

body.vuplore-comms-template .community-channel::before {
  font-size: 22px;
}

body.vuplore-comms-template .badge,
body.vuplore-comms-template .community-channel-count {
  min-width: 24px;
  height: 22px;
  font-size: 12px;
}

body.vuplore-comms-template .badge {
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
}

body.vuplore-comms-template .divider {
  margin: 10px 0;
}

body.vuplore-comms-template .community-hub-dm-row,
body.vuplore-comms-template .dm {
  min-height: 38px;
  height: 38px;
  gap: 9px;
  padding: 0 8px;
}

body.vuplore-comms-template .community-hub-dm-row strong,
body.vuplore-comms-template .dm-name {
  font-size: 13px;
}

body.vuplore-comms-template .community-hub-dm-row small,
body.vuplore-comms-template .dm-state {
  font-size: 11px;
  margin-top: 2px;
}

body.vuplore-comms-template .community-hub-social-nav {
  flex: 0 0 auto;
  gap: 0;
}

body.vuplore-comms-template .utility-row {
  height: 33px;
  padding: 0 10px;
}

body.vuplore-comms-template .notice {
  flex: 0 0 auto;
  margin: auto 0 0 10px;
  padding: 12px 14px;
  font-size: 12px;
}

body.vuplore-comms-template .notice-title {
  margin-bottom: 8px;
}

body.vuplore-comms-template .chat-head {
  padding: 20px 22px 14px;
}

body.vuplore-comms-template .chat-title {
  font-size: 24px;
}

body.vuplore-comms-template .star {
  font-size: 23px;
}

body.vuplore-comms-template .head-tools {
  gap: 16px;
  font-size: 13px;
}

body.vuplore-comms-template .search {
  width: 170px;
  height: 38px;
  gap: 9px;
  padding: 0 11px;
}

body.vuplore-comms-template .chat-subtitle {
  margin-top: 10px;
  font-size: 13px;
}

body.vuplore-comms-template .safety-banner {
  min-height: 64px;
  margin: 8px 18px 0;
  gap: 14px;
  padding: 13px 15px;
}

body.vuplore-comms-template .shield {
  width: 36px;
  height: 36px;
}

body.vuplore-comms-template .safety-banner strong {
  font-size: 15px;
  margin-bottom: 3px;
}

body.vuplore-comms-template .safety-banner small,
body.vuplore-comms-template .safety-banner span {
  font-size: 12px;
}

body.vuplore-comms-template .learn {
  width: 98px;
  height: 34px;
  font-size: 13px;
}

body.vuplore-comms-template .messages,
body.vuplore-comms-template .community-message-list {
  padding: 13px 18px 0;
}

body.vuplore-comms-template .community-hub-chat[data-center-mode="channel"] .messages::after {
  top: 100px;
  right: 9px;
  width: 7px;
  height: min(520px, calc(100% - 112px));
}

body.vuplore-comms-template .community-message {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  margin: 6px 0 17px;
}

body.vuplore-comms-template .community-message-avatar {
  width: 46px;
  height: 46px;
}

body.vuplore-comms-template .community-message-meta {
  gap: 10px;
  margin-bottom: 6px;
}

body.vuplore-comms-template .community-message-meta a {
  font-size: 14px;
}

body.vuplore-comms-template .community-message-meta time {
  font-size: 12px;
}

body.vuplore-comms-template .community-message-main p,
body.vuplore-comms-template .community-message-text,
body.vuplore-comms-template .staff-empty p {
  font-size: 14px;
  line-height: 1.35;
}

body.vuplore-comms-template .community-message-actions {
  gap: 16px;
  margin-right: 32px;
}

body.vuplore-comms-template .community-reaction-row {
  margin-top: 8px;
}

body.vuplore-comms-template .community-reaction-button {
  min-width: 50px;
  height: 30px;
  font-size: 13px;
}

body.vuplore-comms-template .community-message.deleted-message,
body.vuplore-comms-template .community-message.hidden-message,
body.vuplore-comms-template .community-message.protected-message,
body.vuplore-comms-template .community-message.system-message {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  padding: 8px 14px 10px 10px !important;
}

body.vuplore-comms-template .community-message-system-label {
  font-size: 11px;
}

body.vuplore-comms-template .view-deleted {
  font-size: 13px;
}

body.vuplore-comms-template .view-deleted button {
  width: 96px;
  height: 34px;
  font-size: 13px;
}

body.vuplore-comms-template .new-messages {
  gap: 24px;
  font-size: 13px;
  margin: 14px 10px 18px;
}

body.vuplore-comms-template .composer {
  padding: 0 18px 10px !important;
}

body.vuplore-comms-template .composer-box {
  height: 58px;
  grid-template-columns: 34px 1px minmax(0, 1fr) 34px 92px 20px !important;
  gap: 14px;
  padding: 0 11px 0 14px;
}

body.vuplore-comms-template .attach {
  font-size: 28px;
}

body.vuplore-comms-template .attach svg {
  width: 27px;
  height: 27px;
}

body.vuplore-comms-template .input-line {
  height: 34px;
}

body.vuplore-comms-template #communityMessageInput,
body.vuplore-comms-template .message-live-preview,
body.vuplore-comms-template .placeholder {
  font-size: 14px;
}

body.vuplore-comms-template .emoji {
  width: 34px;
  height: 34px;
  border: 0;
  font-size: 27px;
}

body.vuplore-comms-template .send {
  width: 92px;
  height: 38px;
  font-size: 15px;
}

body.vuplore-comms-template .hint {
  font-size: 12px;
  margin-top: 8px;
}

body.vuplore-comms-template .rightbar {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px;
}

body.vuplore-comms-template .profile-card {
  padding: 18px 18px 12px;
}

body.vuplore-comms-template .profile-top {
  grid-template-columns: 76px minmax(0, 1fr) 18px;
  gap: 14px;
}

body.vuplore-comms-template .profile-name {
  font-size: 16px;
  margin-bottom: 3px;
}

body.vuplore-comms-template .profile-role {
  font-size: 13px;
  margin-bottom: 8px;
}

body.vuplore-comms-template .id-line,
body.vuplore-comms-template .id-pill {
  font-size: 11px;
}

body.vuplore-comms-template .profile-card hr {
  margin: 12px 0;
}

body.vuplore-comms-template .profile-button {
  height: 42px;
  font-size: 13px;
}

body.vuplore-comms-template .friends-card,
body.vuplore-comms-template .safety-card {
  padding: 14px;
}

body.vuplore-comms-template .friends-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

body.vuplore-comms-template .community-hub-friends-list {
  overflow: auto;
  gap: 2px;
}

body.vuplore-comms-template .right-title {
  font-size: 13px;
  margin-bottom: 9px;
}

body.vuplore-comms-template .rightbar .community-hub-friend-row {
  min-height: 36px;
  height: 36px;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px;
}

body.vuplore-comms-template .rightbar .community-hub-friend-row > span:last-child {
  min-width: 0;
}

body.vuplore-comms-template .rightbar .community-hub-friend-row strong {
  font-size: 13px;
}

body.vuplore-comms-template .rightbar .community-hub-friend-row small {
  font-size: 11px;
  margin-top: 2px;
}

body.vuplore-comms-template .view-friends,
body.vuplore-comms-template .safety-row {
  font-size: 13px;
}

body.vuplore-comms-template .safety-row {
  min-height: 34px;
  height: 34px;
  gap: 11px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

body.vuplore-comms-template .crypto-card {
  padding: 15px 16px 16px;
}

body.vuplore-comms-template .crypto-head {
  font-size: 16px;
  margin-bottom: 6px;
}

body.vuplore-comms-template .soon {
  margin-left: 30px;
  font-size: 12px;
}

body.vuplore-comms-template .crypto-card p {
  font-size: 13px;
  margin-top: 12px;
}

body.vuplore-comms-template .avatar,
body.vuplore-comms-template .community-hub-avatar,
body.vuplore-comms-template .community-message-avatar {
  width: 46px;
  height: 46px;
}

body.vuplore-comms-template .avatar.small,
body.vuplore-comms-template .community-hub-avatar {
  width: 32px;
  height: 32px;
}

body.vuplore-comms-template .avatar.large {
  width: 74px;
  height: 74px;
}

body.vuplore-comms-template .avatar .online-dot,
body.vuplore-comms-template .profile-top .online-dot {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

body.vuplore-comms-template .community-template-footer {
  height: 54px;
  grid-template-columns: 300px minmax(0, 1fr);
  padding: 0 24px;
  font-size: 13px;
}

body.vuplore-comms-template .community-template-footer .footer-links {
  gap: 30px;
}

@media (max-width: 1500px) {
  body.vuplore-comms-template .community-comms-shell {
    grid-template-columns: 320px minmax(0, 1fr) 290px !important;
    height: clamp(540px, calc(100dvh - var(--global-nav-height, 72px) - var(--site-banner-height, 0px) - var(--staff-clock-height, 0px) - 68px), 780px);
  }

  body.vuplore-comms-template .sidebar {
    padding: 18px 14px 12px;
  }

  body.vuplore-comms-template .section-head {
    min-height: 30px;
    margin-bottom: 8px;
    font-size: 13px;
  }

  body.vuplore-comms-template .add-btn {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }

  body.vuplore-comms-template .community-channel-list {
    max-height: 150px;
  }

  body.vuplore-comms-template .community-hub-dm-list {
    max-height: 138px;
  }

  body.vuplore-comms-template .community-channel {
    height: 36px;
    font-size: 16px;
  }

  body.vuplore-comms-template .community-channel::before {
    font-size: 24px;
  }

  body.vuplore-comms-template .community-hub-dm-row,
  body.vuplore-comms-template .dm {
    min-height: 42px;
  }

  body.vuplore-comms-template .community-hub-dm-row strong,
  body.vuplore-comms-template .dm-name {
    font-size: 14px;
  }

  body.vuplore-comms-template .community-hub-dm-row small,
  body.vuplore-comms-template .dm-state {
    font-size: 11px;
    margin-top: 2px;
  }

  body.vuplore-comms-template .divider {
    margin: 10px 0;
  }

  body.vuplore-comms-template .utility-row {
    height: 36px;
    font-size: 15px;
  }

  body.vuplore-comms-template .badge {
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    font-size: 12px;
  }

  body.vuplore-comms-template .notice {
    padding: 12px 14px;
    font-size: 13px;
  }

  body.vuplore-comms-template .notice-title {
    margin-bottom: 8px;
  }

  body.vuplore-comms-template .head-tools {
    gap: 14px;
  }

  body.vuplore-comms-template .search {
    width: 172px;
  }
}

@media (max-width: 1220px) {
  body.vuplore-comms-template .community-comms-shell {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  body.vuplore-comms-template .rightbar {
    display: none;
  }
}

@media (max-width: 900px) {
  body.vuplore-comms-template .community-comms-shell {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 10px;
  }

  body.vuplore-comms-template .sidebar,
  body.vuplore-comms-template .chat-panel {
    min-height: 520px;
  }

  body.vuplore-comms-template .chat-title-line,
  body.vuplore-comms-template .head-tools,
  body.vuplore-comms-template .safety-banner {
    flex-wrap: wrap;
  }

  body.vuplore-comms-template .star {
    margin-right: 0;
  }

  body.vuplore-comms-template .head-tools {
    justify-content: flex-start;
  }

  body.vuplore-comms-template .search {
    width: 100%;
  }

  body.vuplore-comms-template .composer-box {
    height: auto;
    min-height: 82px;
    grid-template-columns: 42px 1px minmax(0, 1fr) 42px 22px !important;
    padding-block: 12px;
  }

  body.vuplore-comms-template .send {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  body.vuplore-comms-template .format-help {
    grid-column: 5;
    grid-row: 1;
  }
}

@media (max-width: 560px) {
  body.vuplore-comms-template .chat-head,
  body.vuplore-comms-template .messages,
  body.vuplore-comms-template .composer {
    padding-inline: 14px;
  }

  body.vuplore-comms-template .chat-title {
    font-size: 24px;
  }

  body.vuplore-comms-template .community-message,
  body.vuplore-comms-template .community-message.deleted-message,
  body.vuplore-comms-template .community-message.hidden-message,
  body.vuplore-comms-template .community-message.protected-message,
  body.vuplore-comms-template .community-message.system-message {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  body.vuplore-comms-template .community-message-avatar {
    width: 42px;
    height: 42px;
  }

  body.vuplore-comms-template .community-message-menu {
    right: 0;
  }

  body.vuplore-comms-template .community-message-quick-actions {
    right: 0;
  }

  body.vuplore-comms-template .community-message-menu-panel,
  body.vuplore-comms-template .community-reaction-panel {
    width: min(238px, calc(100vw - 70px));
  }
}

/* Phone layout: keep the desktop mockup intact, but make Comms feel native on small screens. */
@media (max-width: 900px) {
  body.vuplore-comms-template {
    overflow-x: hidden;
  }

  body.vuplore-comms-template .community-comms-shell {
    width: min(calc(100% - 12px), 720px);
    height: auto;
    min-height: 0;
    margin: 8px auto 10px;
    padding: 6px;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body.vuplore-comms-template .sidebar,
  body.vuplore-comms-template .chat-panel {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  body.vuplore-comms-template .sidebar {
    height: auto;
    padding: 12px;
    overflow: visible !important;
  }

  body.vuplore-comms-template .side-section {
    min-height: 0;
  }

  body.vuplore-comms-template .section-head {
    min-height: 28px;
    margin: 0 2px 7px;
  }

  body.vuplore-comms-template .community-channel-list,
  body.vuplore-comms-template .community-hub-dm-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(168px, 58vw);
    gap: 6px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 6px;
    overscroll-behavior-x: contain;
    scrollbar-gutter: auto;
    scroll-snap-type: x proximity;
  }

  body.vuplore-comms-template .community-channel,
  body.vuplore-comms-template .community-hub-dm-row,
  body.vuplore-comms-template .dm {
    scroll-snap-align: start;
  }

  body.vuplore-comms-template .community-channel {
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
  }

  body.vuplore-comms-template .community-channel::before {
    font-size: 23px;
  }

  body.vuplore-comms-template .community-hub-dm-row,
  body.vuplore-comms-template .dm {
    min-height: 50px;
    height: 50px;
    padding: 0 10px;
  }

  body.vuplore-comms-template .community-hub-dm-row .community-hub-avatar,
  body.vuplore-comms-template .dm .avatar,
  body.vuplore-comms-template .dm-avatar {
    width: 34px;
    height: 34px;
  }

  body.vuplore-comms-template .divider {
    margin: 8px 0;
  }

  body.vuplore-comms-template .community-hub-social-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.vuplore-comms-template .utility-row {
    height: 40px;
    min-width: 0;
    padding: 0 8px;
    gap: 8px;
    font-size: 13px;
  }

  body.vuplore-comms-template .utility-symbol {
    width: 24px;
    height: 24px;
  }

  body.vuplore-comms-template .notice {
    margin: 10px 0 0;
    padding: 12px;
    font-size: 12px;
  }

  body.vuplore-comms-template .chat-panel {
    height: clamp(560px, calc(100dvh - var(--global-nav-height, 64px) - var(--site-banner-height, 0px) - var(--staff-clock-height, 0px) - 42px), 720px);
    border-radius: 7px;
    overflow: hidden !important;
  }

  body.vuplore-comms-template .chat-head {
    padding: 16px 14px 12px;
  }

  body.vuplore-comms-template .chat-title-line {
    gap: 10px;
  }

  body.vuplore-comms-template .chat-title {
    min-width: 0;
    font-size: 22px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  body.vuplore-comms-template .star {
    font-size: 19px;
  }

  body.vuplore-comms-template .head-tools {
    width: 100%;
    gap: 8px;
    justify-content: flex-start;
  }

  body.vuplore-comms-template .icon-tool {
    width: 36px;
    height: 36px;
  }

  body.vuplore-comms-template .icon-tool.member-count {
    width: auto;
    min-width: 58px;
  }

  body.vuplore-comms-template .search {
    order: 5;
    flex: 1 0 100%;
    width: 100%;
    height: 38px;
  }

  body.vuplore-comms-template .chat-subtitle {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  body.vuplore-comms-template .safety-banner {
    min-height: 0;
    margin: 8px 12px 0;
    padding: 12px;
    gap: 10px;
    align-items: flex-start;
  }

  body.vuplore-comms-template .shield {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  body.vuplore-comms-template .safety-banner strong {
    font-size: 14px;
  }

  body.vuplore-comms-template .safety-banner small,
  body.vuplore-comms-template .safety-banner span {
    font-size: 12px;
    line-height: 1.35;
  }

  body.vuplore-comms-template .learn {
    width: auto;
    min-width: 96px;
    height: 34px;
    margin-left: auto;
    padding: 0 12px;
    font-size: 12px;
  }

  body.vuplore-comms-template .messages,
  body.vuplore-comms-template .community-message-list {
    padding: 12px 14px 0;
  }

  body.vuplore-comms-template .messages-wrap {
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.vuplore-comms-template .community-message,
  body.vuplore-comms-template .community-message.deleted-message,
  body.vuplore-comms-template .community-message.hidden-message,
  body.vuplore-comms-template .community-message.protected-message,
  body.vuplore-comms-template .community-message.system-message {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 8px 0 18px;
  }

  body.vuplore-comms-template .community-message-avatar {
    width: 38px;
    height: 38px;
  }

  body.vuplore-comms-template .community-message-meta {
    gap: 7px;
    margin-bottom: 5px;
    flex-wrap: wrap;
  }

  body.vuplore-comms-template .community-message-meta a {
    font-size: 13px;
  }

  body.vuplore-comms-template .community-message-meta time {
    font-size: 11px;
  }

  body.vuplore-comms-template .community-message-main p,
  body.vuplore-comms-template .community-message-text,
  body.vuplore-comms-template .staff-empty p {
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.vuplore-comms-template .community-message-attachment {
    max-width: 100%;
  }

  body.vuplore-comms-template .community-message-attachment img,
  body.vuplore-comms-template .community-message-attachment video {
    max-width: 100%;
    height: auto;
  }

  body.vuplore-comms-template .community-message-quick-actions {
    right: 0;
  }

  body.vuplore-comms-template .community-message-menu {
    right: 0;
  }

  body.vuplore-comms-template .new-messages {
    gap: 12px;
    margin: 10px 0 12px;
    font-size: 12px;
  }

  body.vuplore-comms-template .composer {
    padding: 0 12px 10px !important;
  }

  body.vuplore-comms-template .composer-box {
    min-height: 58px;
    height: auto;
    grid-template-columns: 34px 1px minmax(0, 1fr) 34px 82px 20px !important;
    gap: 10px;
    padding: 8px 10px;
  }

  body.vuplore-comms-template .attach,
  body.vuplore-comms-template .emoji {
    width: 34px;
    height: 34px;
  }

  body.vuplore-comms-template .attach svg {
    width: 25px;
    height: 25px;
  }

  body.vuplore-comms-template .input-line {
    height: 36px;
  }

  body.vuplore-comms-template #communityMessageInput,
  body.vuplore-comms-template .message-live-preview,
  body.vuplore-comms-template .placeholder {
    font-size: 14px;
  }

  body.vuplore-comms-template .send {
    grid-column: auto;
    width: 82px;
    height: 38px;
    font-size: 14px;
  }

  body.vuplore-comms-template .hint {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    margin-top: 7px;
    font-size: 11px;
  }

  body.vuplore-comms-template .community-template-footer {
    height: auto;
    min-height: 66px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-align: center;
  }

  body.vuplore-comms-template .community-template-footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
  }
}

@media (max-width: 560px) {
  body.vuplore-comms-template .community-comms-shell {
    width: calc(100% - 8px);
    margin-top: 6px;
    padding: 4px;
    gap: 6px !important;
  }

  body.vuplore-comms-template .sidebar {
    padding: 10px;
  }

  body.vuplore-comms-template .community-channel-list,
  body.vuplore-comms-template .community-hub-dm-list {
    grid-auto-columns: minmax(146px, 78vw);
  }

  body.vuplore-comms-template .community-channel {
    height: 40px;
    font-size: 14px;
  }

  body.vuplore-comms-template .community-hub-dm-row,
  body.vuplore-comms-template .dm {
    min-height: 48px;
    height: 48px;
  }

  body.vuplore-comms-template .community-hub-social-nav {
    grid-template-columns: 1fr;
  }

  body.vuplore-comms-template .utility-row {
    height: 38px;
    font-size: 14px;
  }

  body.vuplore-comms-template .notice {
    padding: 11px;
    font-size: 11px;
  }

  body.vuplore-comms-template .chat-panel {
    height: clamp(540px, calc(100dvh - var(--global-nav-height, 62px) - var(--site-banner-height, 0px) - var(--staff-clock-height, 0px) - 34px), 660px);
  }

  body.vuplore-comms-template .chat-head {
    padding: 14px 12px 10px;
  }

  body.vuplore-comms-template .chat-title {
    font-size: 20px;
  }

  body.vuplore-comms-template .head-tools {
    gap: 7px;
  }

  body.vuplore-comms-template .icon-tool {
    width: 34px;
    height: 34px;
  }

  body.vuplore-comms-template .icon-tool.member-count {
    min-width: 54px;
  }

  body.vuplore-comms-template .safety-banner {
    margin: 8px 10px 0;
    padding: 10px;
  }

  body.vuplore-comms-template .safety-banner > div:nth-child(2) {
    min-width: 0;
  }

  body.vuplore-comms-template .learn {
    width: 100%;
    min-width: 0;
    margin: 2px 0 0 44px;
  }

  body.vuplore-comms-template .messages,
  body.vuplore-comms-template .community-message-list {
    padding: 11px 12px 0;
  }

  body.vuplore-comms-template .community-message,
  body.vuplore-comms-template .community-message.deleted-message,
  body.vuplore-comms-template .community-message.hidden-message,
  body.vuplore-comms-template .community-message.protected-message,
  body.vuplore-comms-template .community-message.system-message {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 9px !important;
    margin-bottom: 16px;
  }

  body.vuplore-comms-template .community-message-avatar {
    width: 34px;
    height: 34px;
  }

  body.vuplore-comms-template .community-message-actions {
    margin-right: 0;
  }

  body.vuplore-comms-template .community-message-menu-panel,
  body.vuplore-comms-template .community-reaction-panel {
    width: min(246px, calc(100vw - 34px));
  }

  body.vuplore-comms-template .composer {
    padding: 0 10px 9px !important;
  }

  body.vuplore-comms-template .composer-box {
    grid-template-columns: 32px 1px minmax(0, 1fr) 32px 20px !important;
    gap: 8px;
    padding: 8px;
  }

  body.vuplore-comms-template .attach,
  body.vuplore-comms-template .emoji {
    width: 32px;
    height: 32px;
  }

  body.vuplore-comms-template .send {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 38px;
  }

  body.vuplore-comms-template .format-help {
    grid-column: 5;
    grid-row: 1;
  }

  body.vuplore-comms-template #communityMessageInput,
  body.vuplore-comms-template .message-live-preview,
  body.vuplore-comms-template .placeholder {
    font-size: 16px;
  }

  body.vuplore-comms-template .community-template-footer {
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  body.vuplore-comms-template .section-head {
    font-size: 12px;
  }

  body.vuplore-comms-template .community-channel-list,
  body.vuplore-comms-template .community-hub-dm-list {
    grid-auto-columns: minmax(136px, 84vw);
  }

  body.vuplore-comms-template .chat-title {
    font-size: 18px;
  }

  body.vuplore-comms-template .safety-banner {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
  }

  body.vuplore-comms-template .learn {
    grid-column: 1 / -1;
    margin-left: 0;
  }
}

/* Final Community Hub footer, ad slot, and compact DM preview polish. */
body.vuplore-comms-template .community-hub-dm-row small :where(strong, em, u, s, code, span) {
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

body.vuplore-comms-template .community-hub-dm-row small strong {
  color: #eef2f8;
  font-weight: 800;
}

body.vuplore-comms-template .community-hub-dm-row small .community-mention {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #ff6a72;
  font-weight: 800;
}

body.vuplore-comms-template .community-hub-dm-row.active small .community-mention {
  color: #fff;
}

body.vuplore-comms-template .community-hub-dm-row small .community-inline-code {
  display: inline;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: #e8ecf3;
  font-size: 0.95em;
}

body.vuplore-comms-template .community-hub-dm-row small .community-spoiler {
  display: inline;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
}

body.vuplore-comms-template .community-comms-shell {
  height: clamp(520px, calc(100dvh - var(--global-nav-height, 72px) - var(--site-banner-height, 0px) - var(--staff-clock-height, 0px) - 114px), 820px) !important;
}

body.vuplore-comms-template .community-ad-slot {
  position: relative;
  z-index: 1;
  width: calc(100vw - 24px) !important;
  max-width: none !important;
  min-height: 34px;
  margin: 0 max(12px, calc((100% - 100vw) / 2 + 12px)) 8px !important;
  border: 1px dashed rgba(145, 145, 140, 0.34);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(18, 45, 110, 0.1), rgba(135, 18, 18, 0.08)),
    rgba(7, 10, 14, 0.58);
  color: var(--comms-silver);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

body.vuplore-comms-template .community-ad-slot:is(:empty, .hidden) {
  display: none;
}

body.vuplore-comms-template .community-ad-slot a,
body.vuplore-comms-template .community-ad-slot span {
  color: inherit;
  text-decoration: none;
}

body.vuplore-comms-template .community-ad-slot[data-ad-state="live"] {
  border-style: solid;
  border-color: rgba(155, 112, 22, 0.46);
  color: #f0e0bc;
  background:
    linear-gradient(90deg, rgba(155, 112, 22, 0.13), rgba(18, 45, 110, 0.1)),
    rgba(7, 10, 14, 0.66);
}

body.vuplore-comms-template .community-ad-slot.has-image {
  min-height: 58px;
  height: clamp(58px, 4.8vw, 86px);
  overflow: hidden;
  padding: 0;
  border-color: rgba(145, 145, 140, 0.36);
  background: #05070a;
  letter-spacing: 0;
  text-transform: none;
}

body.vuplore-comms-template .community-ad-slot.has-image a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

body.vuplore-comms-template .community-ad-slot.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.vuplore-comms-template .community-ad-slot.has-image .community-ad-caption {
  position: absolute;
  left: 12px;
  bottom: 8px;
  max-width: min(760px, calc(100% - 24px));
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(3, 5, 8, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.vuplore-comms-template .community-template-footer {
  position: relative;
  z-index: 1;
  min-height: 38px !important;
  height: auto !important;
  display: block !important;
  padding: 0 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 7, 11, 0.86);
  color: #b9c0cb;
  font-size: 11px !important;
  font-weight: 700;
}

body.vuplore-comms-template .community-template-footer .footer-inner {
  width: 100%;
  max-width: none;
  min-height: 38px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.vuplore-comms-template .community-template-footer .footer-left,
body.vuplore-comms-template .community-template-footer .footer-right,
body.vuplore-comms-template .community-template-footer .footer-socials {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

body.vuplore-comms-template .community-template-footer .footer-left {
  justify-content: flex-start;
}

body.vuplore-comms-template .community-template-footer .footer-right {
  justify-content: flex-end;
}

body.vuplore-comms-template .footer-brand {
  color: #d6dbe4;
  font-weight: 800;
  white-space: nowrap;
}

body.vuplore-comms-template .footer-sep {
  color: #5b6370;
  font-weight: 800;
}

body.vuplore-comms-template .community-template-footer .footer-link,
body.vuplore-comms-template .community-template-footer .vuplore-cookie-footer-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: #c4cad4;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

body.vuplore-comms-template .community-template-footer .footer-link:hover,
body.vuplore-comms-template .community-template-footer .vuplore-cookie-footer-link:hover {
  color: #fff;
}

body.vuplore-comms-template .footer-social {
  min-height: 22px;
  border: 1px solid rgba(145, 145, 140, 0.45);
  border-radius: 4px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #d7d9df;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

body.vuplore-comms-template .footer-social:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

body.vuplore-comms-template .community-footer-pill {
  min-height: 22px;
  border: 1px solid rgba(135, 18, 18, 0.5);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(135, 18, 18, 0.16);
  color: #f3d6d8;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 1500px) {
  body.vuplore-comms-template .community-comms-shell {
    height: clamp(520px, calc(100dvh - var(--global-nav-height, 72px) - var(--site-banner-height, 0px) - var(--staff-clock-height, 0px) - 98px), 760px) !important;
  }
}

@media (max-width: 900px) {
  body.vuplore-comms-template .community-comms-shell {
    height: auto !important;
  }

  body.vuplore-comms-template .community-ad-slot {
    width: min(calc(100% - 12px), 720px);
    min-height: 32px;
    margin-bottom: 6px;
    font-size: 10px;
  }

  body.vuplore-comms-template .community-template-footer {
    min-height: 0 !important;
    padding: 9px 12px !important;
    text-align: center;
  }

  body.vuplore-comms-template .community-template-footer .footer-inner {
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  body.vuplore-comms-template .community-template-footer .footer-left,
  body.vuplore-comms-template .community-template-footer .footer-right,
  body.vuplore-comms-template .community-template-footer .footer-socials {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  body.vuplore-comms-template .footer-brand {
    white-space: normal;
  }

  body.vuplore-comms-template .community-template-footer {
    font-size: 11px !important;
  }
}

body.vuplore-comms-template .community-message.mentioned-message::before {
  background:
    linear-gradient(90deg, rgba(135, 18, 18, 0.20), rgba(135, 18, 18, 0.075) 58%, rgba(135, 18, 18, 0.025)),
    rgba(255, 255, 255, 0.025);
  opacity: 1;
}

body.vuplore-comms-template .community-reaction-panel {
  width: 286px;
  max-height: min(330px, calc(100vh - 180px));
  overflow: auto;
}

body.vuplore-comms-template .community-reaction-picker {
  display: grid;
  grid-template-columns: repeat(6, 34px);
  gap: 8px;
}

body.vuplore-comms-template .community-reaction-emoji {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.075);
  color: #eef2f8;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

body.vuplore-comms-template .community-reaction-emoji:hover {
  background: rgba(145, 145, 140, 0.18);
}

body.vuplore-comms-template .community-message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

body.vuplore-comms-template .community-message-reaction-chip {
  min-height: 28px;
  border: 1px solid rgba(145, 145, 140, 0.28);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.055);
  color: #dfe5ed;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 800;
}

body.vuplore-comms-template .community-message-reaction-chip.active {
  border-color: rgba(135, 18, 18, 0.7);
  background: rgba(135, 18, 18, 0.34);
  color: #fff;
}

body.vuplore-comms-template .community-message-reaction-chip b {
  color: #c7ced9;
  font-size: 11px;
}

body.vuplore-comms-template .community-reaction-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.42);
  display: grid;
  place-items: center;
  padding: 18px;
}

body.vuplore-comms-template .community-reaction-detail {
  width: min(520px, 100%);
  max-height: min(620px, calc(100vh - 48px));
  border: 1px solid var(--comms-line-strong);
  border-radius: 8px;
  background: #151b22;
  color: #eef2f8;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

body.vuplore-comms-template .community-reaction-detail-head {
  min-height: 62px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--comms-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.vuplore-comms-template .community-reaction-detail-head small {
  color: var(--comms-silver);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body.vuplore-comms-template .community-reaction-detail-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.1;
}

body.vuplore-comms-template .community-reaction-detail-close,
body.vuplore-comms-template .community-reaction-detail button {
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #eef2f8;
  cursor: pointer;
  font-weight: 900;
}

body.vuplore-comms-template .community-reaction-detail-close {
  width: 34px;
  height: 34px;
}

body.vuplore-comms-template .community-reaction-detail-actions {
  padding: 10px 16px 0;
}

body.vuplore-comms-template .community-reaction-detail-actions:empty {
  display: none;
}

body.vuplore-comms-template .community-reaction-detail-body {
  min-height: 0;
  padding: 14px 16px 16px;
  overflow: auto;
  display: grid;
  gap: 12px;
}

body.vuplore-comms-template .community-reaction-detail-group {
  border: 1px solid var(--comms-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

body.vuplore-comms-template .community-reaction-detail-group header {
  min-height: 42px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--comms-line);
  display: flex;
  align-items: center;
  gap: 9px;
}

body.vuplore-comms-template .community-reaction-detail-group header span {
  font-size: 20px;
}

body.vuplore-comms-template .community-reaction-detail-group header button {
  margin-left: auto;
  min-height: 28px;
  padding: 0 10px;
  color: #f0e0bc;
  background: rgba(155, 112, 22, 0.22);
}

body.vuplore-comms-template .community-reaction-user-row {
  min-height: 48px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

body.vuplore-comms-template .community-reaction-user-row + .community-reaction-user-row {
  border-top: 1px solid var(--comms-line);
}

body.vuplore-comms-template .community-reaction-user-row > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

body.vuplore-comms-template .community-reaction-user-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

body.vuplore-comms-template .community-reaction-user-row strong,
body.vuplore-comms-template .community-reaction-user-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vuplore-comms-template .community-reaction-user-row small {
  color: #9da6b4;
  font-size: 11px;
}

body.vuplore-comms-template .community-reaction-user-row button {
  min-height: 28px;
  padding: 0 9px;
  color: #ffd7db;
  background: rgba(135, 18, 18, 0.24);
}

@media (max-width: 560px) {
  body.vuplore-comms-template .community-reaction-panel {
    width: min(286px, calc(100vw - 34px));
  }

  body.vuplore-comms-template .community-reaction-picker {
    grid-template-columns: repeat(5, 34px);
  }

  body.vuplore-comms-template .community-reaction-detail-backdrop {
    align-items: end;
    padding: 10px;
  }

  body.vuplore-comms-template .community-reaction-detail {
    max-height: min(620px, calc(100vh - 20px));
  }
}