.community-chat-page {
  padding-block: 42px 68px;
}

.community-chat-hero,
.community-chat-panel,
.community-chat-side-card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.community-chat-hero {
  align-items: center;
  background: linear-gradient(135deg, #07142a 0%, #0b2346 62%, #0b57d7 180%);
  border-radius: 16px;
  color: #fff;
  display: flex;
  gap: 22px;
  justify-content: space-between;
  margin-bottom: 22px;
  overflow: hidden;
  padding: 28px 32px;
  position: relative;
}

.community-chat-hero::after {
  background: radial-gradient(circle, rgba(78, 150, 255, 0.32) 0%, transparent 66%);
  content: '';
  height: 320px;
  pointer-events: none;
  position: absolute;
  right: -40px;
  top: -150px;
  width: 320px;
}

.community-chat-hero > * { position: relative; z-index: 1; }
.community-chat-hero .eyebrow { color: #8ebaff; margin-bottom: 5px; }
.community-chat-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); margin: 0; }
.community-chat-hero h1 i { color: #72a8ff; font-size: 0.7em; margin-right: 8px; }
.community-chat-hero p:not(.eyebrow) { color: #c3d5f0; margin: 8px 0 0; }

.community-chat-online {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 7px;
  padding: 10px 14px;
  white-space: nowrap;
}
.community-chat-online i,
.community-chat-side-card header span i { color: #36d47c; font-size: 0.55rem; }

.community-chat-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 300px; }
.community-chat-panel, .community-chat-side-card { background: var(--surface); border-radius: 14px; }
.community-chat-panel { overflow: hidden; }
.community-chat-panel-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 20px 22px; }
.community-chat-panel-header h2, .community-chat-side-card h2 { color: var(--ink); font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.01em; margin: 0; }
.community-chat-panel-header p { align-items: center; color: var(--muted); display: flex; font-size: 0.76rem; gap: 7px; margin: 4px 0 0; }
.community-chat-live-dot { background: #2ccf70; border-radius: 50%; box-shadow: 0 0 0 3px rgba(44, 207, 112, 0.14); height: 7px; width: 7px; }
.community-chat-refresh { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; color: var(--blue); display: inline-flex; height: 36px; justify-content: center; width: 36px; }
.community-chat-refresh:hover, .community-chat-refresh:focus-visible { background: var(--surface-soft); color: var(--blue); border-color: var(--blue); }
.community-chat-notice { margin: 14px 20px 0; }

.community-chat-messages { display: grid; max-height: 620px; min-height: 390px; overflow-y: auto; padding: 8px 22px; }
.community-chat-message { align-items: flex-start; border-bottom: 1px solid rgba(219, 228, 238, 0.8); display: flex; gap: 12px; padding: 16px 0; }
.community-chat-message:last-child { border-bottom: 0; }
.community-chat-avatar, .community-chat-member-avatar { align-items: center; background: linear-gradient(135deg, #155dfc, #73a4ff); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; justify-content: center; overflow: hidden; }
.community-chat-avatar { height: 40px; width: 40px; }
.community-chat-avatar img, .community-chat-member-avatar img { height: 100%; object-fit: cover; width: 100%; }
.community-chat-message-body { flex: 1; min-width: 0; }
.community-chat-message-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.community-chat-message-meta > a { color: var(--ink); font-size: 0.86rem; font-weight: 800; }
.community-chat-message-meta time { color: var(--muted); font-size: 0.72rem; }
.community-chat-staff { background: #e8f1ff; border: 1px solid #cfe0ff; border-radius: 999px; color: var(--blue); font-size: 0.62rem; font-weight: 800; padding: 3px 7px; text-transform: uppercase; }
.community-chat-message p { color: var(--text); font-size: 0.87rem; line-height: 1.5; margin: 5px 0 0; overflow-wrap: anywhere; }
.community-chat-delete { align-self: center; opacity: 0; transition: opacity 0.18s ease; }
.community-chat-message:hover .community-chat-delete { opacity: 1; }
.community-chat-delete button { color: #bd4450; font-size: 0.78rem; padding: 8px; }
.community-chat-empty { align-content: center; color: var(--muted); display: grid; justify-items: center; min-height: 300px; text-align: center; }
.community-chat-empty i { color: var(--blue); font-size: 2.1rem; margin-bottom: 10px; }
.community-chat-empty strong { color: var(--ink); }
.community-chat-empty span { font-size: 0.82rem; margin-top: 4px; }

.community-chat-compose { border-top: 1px solid var(--line); padding: 16px 20px; position: relative; }
.community-chat-compose textarea { border: 1px solid var(--line); border-radius: 10px; font: inherit; min-height: 70px; padding: 13px; resize: vertical; width: 100%; }
.community-chat-compose textarea:focus { border-color: var(--blue); outline: 3px solid rgba(7, 93, 242, 0.12); }
.community-chat-compose-actions { align-items: center; display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.community-chat-character-count { color: var(--muted); font-size: 0.72rem; margin-right: auto; }
.community-chat-emoji-wrap { position: relative; }
.community-chat-emoji-trigger { align-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); display: inline-flex; font-size: 1rem; height: 38px; justify-content: center; width: 38px; }
.community-chat-emoji-picker { background: #fff; border: 1px solid var(--line); border-radius: 10px; bottom: calc(100% + 10px); box-shadow: 0 14px 34px rgba(12, 24, 43, 0.16); display: grid; gap: 3px; grid-template-columns: repeat(8, 1fr); padding: 8px; position: absolute; width: 270px; z-index: 4; }
.community-chat-emoji-picker[hidden] { display: none !important; }
.community-chat-emoji-picker button { border-radius: 6px; font-size: 1.15rem; padding: 5px; }
.community-chat-emoji-picker button:hover { background: #edf4ff; }
.community-chat-login-prompt { align-items: center; background: var(--surface-soft); border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 0.86rem; gap: 9px; padding: 18px 22px; }
.community-chat-login-prompt i, .community-chat-login-prompt a { color: var(--blue); }
.community-chat-login-prompt a { font-weight: 800; }

.community-chat-sidebar { display: grid; gap: 18px; }
.community-chat-side-card { padding: 18px; }
.community-chat-side-card header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 13px; }
.community-chat-side-card header h2 { font-size: 1.15rem; }
.community-chat-side-card header span { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.community-chat-online-members { display: grid; margin-top: 10px; }
.community-chat-online-members a { align-items: center; border-radius: 8px; display: flex; font-size: 0.83rem; font-weight: 700; gap: 10px; padding: 7px 4px; }
.community-chat-online-members a:hover { background: var(--surface-soft); color: var(--blue); }
.community-chat-member-avatar { height: 30px; position: relative; width: 30px; }
.community-chat-member-avatar i { background: #2ccf70; border: 2px solid #fff; border-radius: 50%; bottom: -1px; height: 10px; position: absolute; right: -2px; width: 10px; }
.community-chat-side-empty { color: var(--muted); font-size: 0.8rem; line-height: 1.5; margin: 14px 0 4px; }
.community-chat-rules header h2 i { color: var(--blue); margin-right: 6px; }
.community-chat-rules ol { counter-reset: rules; display: grid; gap: 11px; list-style: none; margin: 15px 0 0; padding: 0; }
.community-chat-rules li { color: var(--muted); counter-increment: rules; font-size: 0.78rem; line-height: 1.4; padding-left: 28px; position: relative; }
.community-chat-rules li::before { align-items: center; background: #edf4ff; border-radius: 50%; color: var(--blue); content: counter(rules); display: inline-flex; font-size: 0.65rem; font-weight: 800; height: 20px; justify-content: center; left: 0; position: absolute; top: 0; width: 20px; }

@media (max-width: 920px) {
  .community-chat-layout { grid-template-columns: 1fr; }
  .community-chat-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .community-chat-page { padding-block: 22px 40px; }
  .community-chat-hero { align-items: flex-start; flex-direction: column; padding: 23px; }
  .community-chat-hero h1 { font-size: 2rem; }
  .community-chat-sidebar { grid-template-columns: 1fr; }
  .community-chat-messages { max-height: none; min-height: 300px; padding-inline: 16px; }
  .community-chat-panel-header, .community-chat-compose { padding-inline: 16px; }
  .community-chat-delete { opacity: 1; }
}

/* Community Chat expansion */
.community-chat-pinned { align-items: center; background: rgba(142,186,255,.08); border-bottom: 1px solid var(--line); display: flex; gap: 12px; padding: 12px 20px; }
.community-chat-pinned > i { color: #f0bf35; }.community-chat-pinned span { display: grid; gap: 2px; min-width: 0; }.community-chat-pinned strong { color: var(--ink); font-size: .8rem; }.community-chat-pinned small { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.community-chat-pinned form { margin-left: auto; }
.community-chat-role { border: 1px solid var(--role-color); border-radius: 999px; color: var(--role-color); font-size: .58rem; font-weight: 800; padding: 2px 6px; text-transform: uppercase; }.community-chat-edited { color: var(--muted); font-size: .65rem; }
.community-chat-reply-preview { background: var(--surface-soft); border-left: 2px solid var(--blue); color: var(--muted); display: grid; font-size: .72rem; gap: 2px; margin-top: 6px; padding: 5px 8px; text-decoration: none; }.community-chat-reply-preview strong { color: var(--ink); }
.community-chat-reactions { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }.community-chat-reactions form { margin: 0; }.community-chat-reactions button, .community-chat-reactions summary { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .75rem; padding: 3px 7px; }.community-chat-reactions button.active { border-color: var(--blue); color: var(--blue); }.community-chat-reactions details { position: relative; }.community-chat-reactions details > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: flex; gap: 4px; padding: 6px; position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; }
.community-chat-message-actions { align-items: center; display: flex; gap: 5px; opacity: 0; transition: opacity .18s ease; }.community-chat-message:hover .community-chat-message-actions { opacity: 1; }.community-chat-message-actions button,.community-chat-message-actions summary { color: var(--muted); cursor: pointer; font-size: .68rem; list-style: none; }.community-chat-message-actions details { position: relative; }.community-chat-message-actions details > form,.community-chat-moderation-menu { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: grid; gap: 6px; padding: 8px; position: absolute; right: 0; top: calc(100% + 4px); width: 190px; z-index: 7; }.community-chat-message-actions textarea,.community-chat-message-actions input,.community-chat-message-actions select { font: inherit; max-width: 100%; padding: 5px; }.community-chat-message-actions button { text-align: left; }
.community-chat-message.is-grouped { padding-top: 2px; }.community-chat-message.is-grouped .community-chat-avatar { opacity: 0; pointer-events: none; }.community-chat-header-actions { align-items: center; display: flex; gap: 8px; }.community-chat-message-search { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; display: flex; gap: 6px; padding: 0 8px; }.community-chat-message-search i { color: var(--muted); font-size: .7rem; }.community-chat-message-search input { background: transparent; border: 0; color: var(--ink); font: inherit; font-size: .72rem; outline: 0; padding: 7px 0; width: 150px; }
.community-chat-replying { align-items: center; background: var(--surface-soft); border-left: 3px solid var(--blue); display: flex; font-size: .72rem; justify-content: space-between; margin-bottom: 8px; padding: 6px 8px; }.community-chat-replying button { color: var(--muted); }
.community-chat-composer-field { flex: 1; min-width: 0; position: relative; }.community-chat-composer-field textarea { width: 100%; }.community-chat-mention-results { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; bottom: calc(100% + 7px); box-shadow: var(--shadow); left: 0; max-height: 175px; overflow-y: auto; position: absolute; width: min(290px, 100%); z-index: 12; }.community-chat-mention-results button { background: transparent; color: var(--ink); display: block; font: inherit; font-size: .75rem; padding: 8px 10px; text-align: left; width: 100%; }.community-chat-mention-results button:hover { background: var(--surface-soft); }
.community-chat-member-tools { border-top: 1px solid var(--line); display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; }.community-chat-member-tools nav { display: grid; gap: 4px; grid-template-columns: repeat(3,1fr); }.community-chat-member-tools nav button { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .64rem; padding: 6px 3px; }.community-chat-member-tools nav button.active { background: var(--blue); border-color: var(--blue); color: #fff; }.community-chat-member-tools label { align-items: center; border: 1px solid var(--line); border-radius: 7px; display: flex; gap: 6px; padding: 0 8px; }.community-chat-member-tools input { background: transparent; border: 0; color: var(--ink); font: inherit; font-size: .72rem; min-width: 0; outline: 0; padding: 7px 0; width: 100%; }.community-chat-admin-tools { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }.community-chat-admin-tools summary { color: var(--muted); cursor: pointer; font-size: .72rem; }.community-chat-admin-tools form { margin-top: 8px; }.community-chat-admin-tools button { color: #c85463; font-size: .72rem; }

/* The public chat deliberately shares one compact surface with its live member list. */
.community-chat-page.content-container {
  margin-inline: auto;
  padding-block: 30px 44px;
  width: min(100% - 48px, var(--container));
}
.community-chat-hero { display: none; }
.community-chat-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr);
  overflow: hidden;
}
.community-chat-shell .community-chat-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}
.community-chat-online-panel {
  border-left: 1px solid var(--line);
  min-width: 0;
  padding: 18px;
}
.community-chat-online-panel > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-bottom: 13px;
}
.community-chat-online-panel h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  margin: 0;
}
.community-chat-online-panel header span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.community-chat-online-panel header span i { color: #36d47c; font-size: 0.55rem; }

@media (max-width: 920px) {
  .community-chat-shell { grid-template-columns: 1fr; }
  .community-chat-online-panel { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .community-chat-page.content-container { padding-block: 22px 40px; width: min(100% - 32px, var(--container)); }
}

/* Compact conversation layout. 1560px intentionally matches the public footer. */
.community-chat-page.content-container {
  width: min(100% - 48px, 1560px);
}
.community-chat-messages {
  align-content: start;
  max-height: 290px;
  min-height: 250px;
  padding: 4px 22px;
  scrollbar-color: rgba(111, 150, 214, 0.52) transparent;
  scrollbar-width: thin;
}
.community-chat-messages.is-empty { align-items: center; display: flex; justify-content: center; overflow: hidden; }
.community-chat-messages.is-empty .community-chat-empty { min-height: 0; }
.community-chat-messages::-webkit-scrollbar { width: 6px; }
.community-chat-messages::-webkit-scrollbar-thumb { background: rgba(111, 150, 214, 0.52); border-radius: 99px; }
.community-chat-message {
  border-bottom: 0;
  gap: 10px;
  padding: 9px 0;
}
.community-chat-avatar { height: 32px; width: 32px; }
.community-chat-message-meta { gap: 6px; }
.community-chat-message-meta > a { font-size: 0.82rem; }
.community-chat-message-meta time { font-size: 0.68rem; }
.community-chat-message p { font-size: 0.82rem; line-height: 1.35; margin-top: 2px; }
.community-chat-staff { display: none; }
.community-chat-compose { padding: 12px 20px; }
.community-chat-compose-row { align-items: center; display: flex; gap: 10px; }
.community-chat-compose textarea {
  min-height: 42px;
  padding: 10px 12px;
  resize: none;
}
.community-chat-compose .button { flex: 0 0 auto; min-height: 42px; padding-inline: 18px; }
.community-chat-compose-actions, .community-chat-character-count { display: none; }
.community-chat-emoji-wrap { flex: 0 0 auto; }
.community-chat-emoji-trigger { height: 42px; width: 42px; }
.community-chat-emoji-picker {
  background: #263a57;
  border-color: #4a6388;
  bottom: calc(100% + 10px);
  display: block;
  max-height: 244px;
  right: 0;
  width: 344px;
}
.community-chat-emoji-grid { display: grid; gap: 3px; grid-template-columns: repeat(8, minmax(0, 1fr)); max-height: 176px; overflow-x: hidden; overflow-y: auto; padding-right: 2px; scrollbar-color: rgba(142, 186, 255, 0.65) transparent; scrollbar-width: thin; }
.community-chat-emoji-grid::-webkit-scrollbar { width: 5px; }
.community-chat-emoji-grid::-webkit-scrollbar-thumb { background: rgba(142, 186, 255, 0.65); border-radius: 99px; }
.community-chat-emoji-grid button { background: transparent; border-radius: 6px; font-size: 1.1rem; min-height: 31px; min-width: 0; padding: 3px; width: 100%; }
.community-chat-emoji-grid button:hover { background: rgba(142, 186, 255, 0.16); }
.community-chat-emoji-categories { border-top: 1px solid #3a4d69; display: flex; gap: 3px; margin-top: 7px; padding-top: 7px; }
.community-chat-emoji-categories button { align-items: center; background: transparent; border-bottom: 2px solid transparent; border-radius: 5px; color: #9eb0c9; display: inline-flex; font-size: 0.78rem; height: 28px; justify-content: center; padding: 0; width: 32px; }
.community-chat-emoji-categories button:hover, .community-chat-emoji-categories button.active { background: rgba(142, 186, 255, 0.13); border-bottom-color: #8ebaff; color: #8ebaff; }
.community-chat-online-members { gap: 8px; margin-top: 14px; }
.community-chat-online-members a {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  gap: 8px;
  padding: 7px 8px;
}
.community-chat-member-avatar { height: 28px; position: static; width: 28px; }
.community-chat-member-avatar i { display: none; }
.community-chat-member-details { display: grid; gap: 2px; min-width: 0; }
.community-chat-member-details b { color: var(--ink); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-chat-member-details small { color: var(--muted); font-size: 0.64rem; font-weight: 700; text-transform: capitalize; }

@media (max-width: 640px) {
  .community-chat-page.content-container { width: min(100% - 28px, 1560px); }
  .community-chat-messages { max-height: 280px; min-height: 220px; padding-inline: 16px; }
  .community-chat-compose { padding-inline: 16px; }
  .community-chat-compose-row { gap: 7px; }
  .community-chat-compose .button { font-size: 0.72rem; padding-inline: 12px; }
  .community-chat-message-search { display: none; }
  .community-chat-emoji-picker { right: 0; }
}

/* Community Chat interaction refinement */
.community-chat-replying[hidden], .community-chat-mention-results[hidden] { display: none !important; }
.community-chat-message-search { background: #14253c; border-color: #304968; box-sizing: border-box; height: 36px; }
.community-chat-message-search input { color: #d5e3f5; height: 34px; line-height: 34px; }
.community-chat-message-search input::placeholder { color: #9fb2ca; opacity: 1; }
.community-chat-header-moderation, .community-chat-message-menu, .community-chat-reaction-picker { position: relative; }
.community-chat-header-moderation summary, .community-chat-message-menu > summary, .community-chat-reaction-picker > summary { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; display: inline-flex; height: 36px; justify-content: center; list-style: none; width: 36px; }
.community-chat-header-moderation summary::-webkit-details-marker, .community-chat-message-menu > summary::-webkit-details-marker, .community-chat-reaction-picker > summary::-webkit-details-marker { display: none; }
.community-chat-header-moderation > div { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 7px; position: absolute; right: 0; top: calc(100% + 6px); width: 150px; z-index: 20; }
.community-chat-header-moderation button { color: #c85463; font-size: .75rem; text-align: left; width: 100%; }
.community-chat-reaction-picker > summary { height: 26px; opacity: 0; width: 26px; }
.community-chat-message:hover .community-chat-reaction-picker > summary, .community-chat-reaction-picker[open] > summary { opacity: 1; }
.community-chat-reactions .community-chat-reaction-picker > div { background: #203653; border: 1px solid #476184; border-radius: 8px; bottom: calc(100% + 6px); box-shadow: 0 10px 24px rgba(5, 14, 29, .38); display: flex; gap: 4px; left: 0; padding: 5px; position: absolute; right: auto; top: auto; z-index: 18; }
.community-chat-reaction-picker > div button { background: transparent; border: 0; padding: 4px; }
.community-chat-reaction-picker > div button:hover { background: rgba(142, 186, 255, .18); }
.community-chat-message-actions { align-self: flex-start; margin-top: 1px; }
.community-chat-message-menu-popover { background: #1c304a; border: 1px solid #476184; border-radius: 9px; box-shadow: 0 12px 28px rgba(5, 14, 29, .38); display: grid; gap: 2px; padding: 6px; position: absolute; right: 0; top: calc(100% + 6px); width: 205px; z-index: 22; }
.community-chat-message-menu-popover > button, .community-chat-message-menu-popover > form > button, .community-chat-message-menu-popover details > summary { background: transparent; border: 0; border-radius: 6px; color: #d7e5f6; cursor: pointer; display: block; font: inherit; font-size: .74rem; padding: 7px 8px; text-align: left; width: 100%; }
.community-chat-message-menu-popover > button:hover, .community-chat-message-menu-popover > form > button:hover, .community-chat-message-menu-popover details > summary:hover { background: rgba(142, 186, 255, .14); }
.community-chat-message-menu-popover button.danger { color: #ff9da7; }.community-chat-menu-divider { border-top: 1px solid rgba(142, 186, 255, .18); margin: 4px 0; }
.community-chat-message-menu-popover details > form { display: grid; gap: 6px; padding: 6px 2px 2px; position: static; width: auto; }.community-chat-message-menu-popover textarea, .community-chat-message-menu-popover input, .community-chat-message-menu-popover select { background: #14253c; border: 1px solid #3e5878; border-radius: 6px; color: #e5effb; font: inherit; font-size: .72rem; max-width: 100%; padding: 7px; }.community-chat-message-menu-popover textarea { min-height: 72px; resize: vertical; }.community-chat-message-menu-popover details > form button { background: var(--blue); border-radius: 6px; color: #fff; font-size: .7rem; padding: 7px; text-align: center; }
.community-chat-role { display: none; }
@media (max-width: 640px) { .community-chat-message-actions { opacity: 1; }.community-chat-message-search { display: none; } }
 
/* Message controls and online-member moderation. */
.community-chat-page [hidden] { display: none !important; }
.community-chat-search-control { display: flex; align-items: center; gap: 0; }
.community-chat-search-control input[type="search"] { box-sizing: border-box; height: 36px; min-height: 36px; min-width: 0; width: 0; padding: 0; margin-left: 0; opacity: 0; pointer-events: none; background: var(--surface-soft); color: var(--ink); border: 0 solid var(--line); border-radius: 8px; font: inherit; font-size: .75rem; transition: width 250ms ease, padding 250ms ease, margin 250ms ease, opacity 250ms ease; }
.community-chat-search-control.is-open input[type="search"] { width: min(190px, 30vw); padding: 0 10px; margin-left: 8px; opacity: 1; pointer-events: auto; border-width: 1px; }
.chat-inline-actions { display: flex; gap: 12px; align-items: start; margin-top: 5px; flex-wrap: wrap; }
.chat-inline-actions button, .chat-inline-actions summary, .chat-message-moderation button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: .72rem; padding: 3px 0; list-style: none; }
.chat-inline-actions summary::-webkit-details-marker { display: none; }
.chat-inline-actions details[open] { flex: 1 1 100%; }
.chat-inline-actions form { display: grid; gap: 7px; margin-top: 6px; max-width: 420px; }
.chat-inline-actions input, .chat-inline-actions textarea { width: 100%; box-sizing: border-box; background: var(--surface-soft); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: inherit; }
.chat-inline-actions form button { justify-self: start; color: var(--blue); }
.community-chat-messages > .community-chat-message { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 10px; row-gap: 0; width: 100%; box-sizing: border-box; padding: 10px 0; border-radius: 8px; transition: background-color 180ms ease; }
.community-chat-messages > .community-chat-message > .community-chat-avatar { margin-left: 10px; }
.community-chat-message > .community-chat-message-body { margin-right: 10px; }
.community-chat-messages > .community-chat-message:hover { background: var(--surface-soft); }
.community-chat-message:has(.chat-message-moderation) { cursor: pointer; }
.chat-message-moderation { grid-column: 1 / -1; display: flex; align-items: start; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); margin-top: 8px; padding: 8px 10px 0; min-width: 0; cursor: default; }
.chat-message-edit > summary { color: var(--muted); cursor: pointer; list-style: none; font-size: .72rem; padding: 3px 0; }
.chat-message-edit > summary::-webkit-details-marker { display: none; }
.chat-message-edit[open] { flex: 1 1 100%; }
.chat-message-edit form { display: grid; gap: 8px; margin-top: 8px; }
.chat-message-edit textarea { box-sizing: border-box; width: 100%; min-height: 64px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: inherit; resize: vertical; }
.chat-message-edit form button { justify-self: start; color: var(--blue); }
.community-chat-message:has(.chat-message-moderation:not([hidden])) { background: var(--surface-soft); border-radius: 8px; }
.community-chat-message:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
.community-chat-online-members .chat-online-row { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; }
.community-chat-online-members .chat-online-row > a { border: 0; margin: 0; min-width: 0; padding-right: 46px; background: transparent; }
.chat-online-row { position: relative; }
.chat-member-moderation { display: block; }
.chat-member-moderation[open] { grid-column: 1 / -1; }
.chat-member-moderation[open] > summary { position: absolute; right: 0; top: 0; }
.chat-member-moderation > summary { position: absolute; top: 0; right: 0; margin: 7px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); list-style: none; cursor: pointer; color: var(--muted); padding: 0; font-size: .8rem; }
.chat-online-header-actions { display: flex; align-items: center; gap: 10px; }
.chat-online-header-actions .community-chat-header-moderation > summary { width: 30px; height: 30px; background: var(--surface-soft); }
.chat-online-header-actions .community-chat-header-moderation > summary i { color: var(--muted); font-size: .8rem; }
.chat-member-moderation > summary:hover, .chat-member-moderation[open] > summary, .chat-online-header-actions summary:hover { color: var(--blue); border-color: var(--blue); }
@media (max-width: 640px) { .community-chat-panel-header { flex-wrap: wrap; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .community-chat-search-control input[type="search"], .community-chat-messages > .community-chat-message { transition: none; } }
.chat-member-moderation > summary::-webkit-details-marker { display: none; }
.chat-member-moderation > form { grid-column: 1 / -1; display: grid; gap: 10px; padding: 10px; border-top: 1px solid var(--line); font-size: .75rem; min-width: 0; }
.chat-member-moderation:not([open]) > form { display: none; }
.chat-member-moderation fieldset { display: grid; gap: 8px; padding: 0; margin: 0; border: 0; min-width: 0; }
.chat-member-moderation legend { margin-bottom: 7px; color: var(--muted); }
.chat-member-moderation label { color: var(--ink); display: flex; align-items: center; gap: 7px; font-size: .75rem; }
.chat-member-moderation input[type="radio"] { width: 14px; height: 14px; min-height: 0; margin: 0; accent-color: var(--blue); }
.chat-member-moderation label:has(input[type="datetime-local"]) { display: grid; gap: 5px; }
.chat-member-moderation input[type="datetime-local"] { box-sizing: border-box; width: 100%; min-width: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px; font: inherit; }
.chat-member-moderation button { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); padding: 7px 10px; cursor: pointer; font: inherit; }

/* Edge-to-edge message highlights; spacing belongs inside each row. */
.community-chat-page .community-chat-messages { padding: 4px 0; }
.community-chat-page .community-chat-messages > .community-chat-message { grid-template-columns: 54px minmax(0, 1fr); border-radius: 0; }
.community-chat-page .community-chat-message > .community-chat-avatar { margin-left: 22px; }
.community-chat-page .community-chat-message > .community-chat-message-body { margin-right: 22px; }
.community-chat-page .community-chat-message:has(.chat-message-moderation:not([hidden])) { border-radius: 0; }
.community-chat-page .chat-message-moderation { padding-inline: 22px; }
.chat-clear-form { margin: 0; display: flex; }
.chat-member-mute-trigger, .chat-member-unmute > button { position: absolute; right: 7px; top: 7px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; }
.chat-member-unmute { margin: 0; }
.chat-member-unmute > button { color: var(--blue); }
.chat-member-mute-trigger:hover, .chat-member-unmute > button:hover { border-color: var(--blue); color: var(--blue); }
.chat-duration-menu { inset: auto; position: fixed; margin: 0; width: 180px; max-width: calc(100vw - 24px); padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
.chat-duration-menu strong { display: block; padding: 6px; font-size: .78rem; overflow-wrap: anywhere; }
.chat-duration-menu form { margin: 0; }
.chat-duration-menu button { display: flex; width: 100%; gap: 9px; align-items: center; padding: 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .8rem; }
.chat-duration-menu button:hover, .chat-duration-menu button:focus-visible { background: var(--surface-soft); color: var(--blue); }
.chat-send-notice { margin: 0 0 9px; color: var(--ink); font-size: .8rem; }
.community-chat-widget.community-chat-widget-live { display: block; padding: 0; overflow: hidden; }
.community-chat-page.is-embedded { width: 100%; margin: 0; padding: 0; }
.is-embedded { container: chat-widget / inline-size; }
.is-embedded .community-chat-shell { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; }
.is-embedded .community-chat-online-panel { contain: none; border-left: 0; border-top: 1px solid var(--line); padding: 12px; }
.is-embedded .community-chat-online-panel h2 { font-size: .95rem; }
.is-embedded .community-chat-online-panel .community-chat-online-members { max-height: 172px; }
@container chat-widget (min-width: 640px) {
  .is-embedded .community-chat-shell { grid-template-columns: minmax(0, 1fr) 204px; }
  .is-embedded .community-chat-online-panel { contain: size; border-top: 0; border-left: 1px solid var(--line); }
  .is-embedded .community-chat-online-panel .community-chat-online-members { max-height: none; }
}
.is-embedded .community-chat-panel-header { padding: 16px; flex-wrap: wrap; gap: 10px; }
.is-embedded .community-chat-panel-header h2 { font-size: 1.1rem; }
.is-embedded .community-chat-messages { height: 260px; min-height: 260px; max-height: 260px; }
.is-embedded .community-chat-compose { padding: 12px; }
.is-embedded .community-chat-compose-row { gap: 6px; }
.is-embedded .community-chat-compose .button { padding-inline: 12px; }
.is-embedded .community-chat-emoji-picker { max-width: calc(100vw - 72px); }
.community-chat-widget-live > .community-chat-widget-action { display: block; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-member-mute-trigger.is-muted { color: var(--blue); }
.chat-duration-menu .chat-mute-remaining { margin: 4px 6px 9px; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.community-chat-page .chat-report-form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; }
.community-chat-page .chat-report-form input[name="reason"] { flex: 1; min-width: 0; height: 34px; min-height: 34px; padding: 6px 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: .78rem; }
.community-chat-page .chat-report-form input[name="reason"]:focus { background: var(--surface); color: var(--ink); border-color: var(--blue); outline: 1px solid var(--blue); }
.community-chat-page .chat-report-form button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 6px 10px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); color: var(--surface); font-size: .75rem; font-weight: 700; }
.community-chat-pinned button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.community-chat-pinned button:hover, .community-chat-pinned button:focus-visible { color: var(--blue); background: var(--surface-soft); border-color: var(--line); }
/* The member list scrolls independently; an expanded mute card cannot size the chat. */
.community-chat-online-panel { display: flex; flex-direction: column; min-height: 0; }
.community-chat-online-panel > header { flex: 0 0 auto; }
.community-chat-online-panel .community-chat-online-members { align-content: start; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(111,150,214,.52) transparent; }
@media (min-width: 921px) { .community-chat-online-panel { contain: size; } }
@media (max-width: 920px) { .community-chat-online-panel .community-chat-online-members { max-height: 320px; } }
.chat-member-moderation .chat-mute-heading { display: flex; gap: 9px; align-items: center; }
.chat-mute-heading > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--surface); color: var(--blue); }
.chat-mute-heading > div { display: grid; gap: 2px; min-width: 0; }
.chat-mute-heading span { color: var(--muted); overflow-wrap: anywhere; }
.chat-mute-card p, .chat-mute-card small { color: var(--muted); font-size: .72rem; margin: 0; line-height: 1.4; }
.chat-member-moderation .chat-mute-card > button { display: flex; gap: 7px; align-items: center; justify-content: center; }
.chat-member-moderation .is-muted > i { color: #e5a351; }
@media (max-width: 640px) {
  .community-chat-page .community-chat-messages > .community-chat-message { grid-template-columns: 48px minmax(0, 1fr); }
  .community-chat-page .community-chat-message > .community-chat-avatar { margin-left: 16px; }
  .community-chat-page .community-chat-message > .community-chat-message-body { margin-right: 16px; }
  .community-chat-page .chat-message-moderation { padding-inline: 16px; }
}

/* One compact baseline for the composer, emoji control and Send button. */
.community-chat-page img.cms-custom-emoji { display: inline-block; width: 24px; height: 24px; max-width: 24px; object-fit: contain; vertical-align: middle; margin: 0 2px; }
.community-chat-custom-emoji-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap:3px; max-height:176px; overflow-y:auto; }
.community-chat-custom-emoji-grid button { display:grid; place-items:center; background:transparent; padding:3px; min-width:0; border-radius:6px; height:31px; }
.community-chat-custom-emoji-grid button:hover { background:#ffffff18; }
.community-chat-custom-emoji-grid img { width:24px; height:24px; object-fit:contain; }
.community-chat-custom-emoji-grid p { grid-column:1 / -1; color:var(--muted); font-size:.8rem; }
.community-chat-emoji-grid[hidden],.community-chat-custom-emoji-grid[hidden] { display:none !important; }
.community-chat-page .community-chat-compose-row textarea,
.community-chat-page .community-chat-compose-row > .button,
.community-chat-page .community-chat-emoji-trigger {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
}
.community-chat-page .community-chat-compose-row textarea { display: block; line-height: 18px; padding: 9px 12px; }
.community-chat-page .community-chat-compose-row > .button { display: inline-flex; align-items: center; justify-content: center; padding-block: 0; }
.community-chat-page .community-chat-emoji-trigger { display: flex; align-items: center; justify-content: center; padding: 0; width: 38px; }
.is-embedded .chat-online-header-actions > span { white-space: nowrap; }
.community-chat-online-panel > header h2 { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.community-chat-online-panel .community-chat-live-dot { flex: 0 0 7px; width: 7px; height: 7px; margin: 0; }
.community-chat-online-panel > header { gap: 8px; }
.community-chat-online-panel .chat-online-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 25px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--blue); font-size: .78rem; line-height: 1; }
.chat-action-notice { padding: 8px 16px; margin: 0; color: var(--ink); background: var(--surface-soft); font-size: .8rem; }
.chat-confirm-dialog { box-sizing: border-box; width: min(420px, calc(100vw - 32px)); margin: auto; padding: 26px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 70px #0008; }
.chat-confirm-dialog::backdrop { background: #050d19b8; backdrop-filter: blur(3px); }
.chat-confirm-dialog .chat-confirm-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-soft); color: #efb75b; margin-bottom: 16px; font-size: 1.25rem; }
.chat-confirm-dialog h2 { margin: 0 0 10px; font-size: 1.2rem; color: var(--ink); }
.chat-confirm-dialog p { color: var(--muted); font-size: .88rem; line-height: 1.6; margin: 0 0 22px; }
.chat-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.chat-confirm-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.chat-confirm-actions [data-chat-confirm-accept] { background: #a82e42; border-color: #c34258; color: #fff; }
.chat-confirm-actions button:hover { filter: brightness(1.15); }
.chat-confirm-actions button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (min-width: 921px) {
  .home-chat-column { display: grid; }
  .home-chat-column .community-chat-widget-live { display: flex; min-height: 0; }
  .home-chat-column .community-chat-page.is-embedded { display: flex; }
  .home-chat-column .community-chat-shell { flex: 1; min-width: 0; }
  .home-chat-column .community-chat-panel { display: flex; flex-direction: column; min-height: 0; }
  .home-chat-column .community-chat-panel > :not(.community-chat-messages) { flex-shrink: 0; }
  .home-chat-column .is-embedded .community-chat-messages { flex: 1 1 0; height: auto; min-height: 200px; max-height: none; }
}