:root {
  --height-adustment: 110px;
  --app-vh: calc((var(--vh, 1vh) * 100));
  --chat-left-rail-width: 5.2rem;
  --chat-left-rail-width-mobile: 4.5rem;
  --chat-left-panel-width: 17.5rem;
  --chat-left-panel-private-width: 18.75rem;
  --chat-left-panel-effective-width: var(--chat-left-panel-width);
  --chat-right-panel-width: 20rem;
  --chat-right-panel-expanded-width: clamp(24rem, 31vw, 32rem);
  --chat-accent: var(--accent-color-strong, var(--accent-color, #3b82f6));
  --chat-left-surface-start: rgba(255, 255, 255, 0.94);
  --chat-left-surface-end: var(--panel-bg, #f2f3f5);
  --chat-left-rail-start: rgba(248, 250, 252, 0.98);
  --chat-left-rail-end: var(--panel-bg, #e3e5e8);
  --chat-accent-soft-strong: rgba(59, 130, 246, 0.17);
  --chat-accent-soft: rgba(59, 130, 246, 0.08);
  --chat-accent-border-strong: rgba(59, 130, 246, 0.42);
  --chat-accent-border-soft: rgba(59, 130, 246, 0.26);
  --chat-pill-active: var(--chat-accent);
  --chat-unread-indicator: var(--tblr-danger, #ef4444);
  --chat-room-unread-indicator: #6cb6ff;
}

.dark,
.trueblue {
  --chat-left-surface-start: var(--dark-bg, #232428);
  --chat-left-surface-end: var(--dark-bg, #232428);
  --chat-left-rail-start: var(--dark-bg, #232428);
  --chat-left-rail-end: var(--dark-bg, #232428);
  --chat-accent-soft-strong: rgba(56, 189, 248, 0.28);
  --chat-accent-soft: rgba(59, 130, 246, 0.16);
  --chat-accent-border-strong: rgba(125, 211, 252, 0.58);
  --chat-accent-border-soft: rgba(125, 211, 252, 0.32);
  --chat-pill-active: #7dd3fc;
}

@supports (color: color-mix(in srgb, #ffffff 50%, #000000 50%)) {
  :root {
    --chat-left-surface-start: color-mix(in srgb, var(--panel-bg, #f2f3f5) 88%, #ffffff 12%);
    --chat-left-rail-start: color-mix(in srgb, var(--panel-bg, #e3e5e8) 86%, #ffffff 14%);
    --chat-accent-soft-strong: color-mix(in srgb, var(--chat-accent) 18%, transparent);
    --chat-accent-soft: color-mix(in srgb, var(--chat-accent) 9%, transparent);
    --chat-accent-border-strong: color-mix(in srgb, var(--chat-accent) 42%, transparent);
    --chat-accent-border-soft: color-mix(in srgb, var(--chat-accent) 28%, transparent);
  }

  .dark,
  .trueblue {
    --chat-left-surface-start: color-mix(in srgb, var(--dark-bg, #232428) 90%, var(--chat-accent) 10%);
    --chat-left-rail-start: color-mix(in srgb, var(--dark-bg, #232428) 86%, var(--chat-accent) 14%);
    --chat-accent-soft-strong: color-mix(in srgb, var(--chat-accent) 30%, transparent);
    --chat-accent-soft: color-mix(in srgb, var(--chat-accent) 18%, transparent);
    --chat-accent-border-strong: color-mix(in srgb, var(--chat-accent) 58%, transparent);
    --chat-accent-border-soft: color-mix(in srgb, var(--chat-accent) 38%, transparent);
    --chat-pill-active: color-mix(in srgb, var(--chat-accent) 90%, white 10%);
  }
}

@supports (height: 100dvh) {
  :root {
    --app-vh: 100dvh;
  }
}

html {
  height: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  max-width: 100vw;
  --chat-left-panel-effective-width: var(--chat-left-panel-width);
}

body.sidebar-private-visible,
body.fast-sidebar-mode.sidebar-view-private {
  --chat-left-panel-effective-width: var(--chat-left-panel-private-width);
}

body.fast-sidebar-mode:not(.sidebar-view-private) {
  --chat-left-panel-effective-width: var(--chat-left-panel-width);
}

hr,
.hr {
  margin: 1.5rem 0;
}

.rtl {
  direction: rtl;
}

.ti {
  font-size: 16px;
  justify-content: center;
  align-items: center;
}

.icon {
  font-size: 1.25rem !important;
}

#wrapper,
.wrapper {
  overflow: hidden;
}

.sidebar-wrapper {
  min-height: var(--app-vh);
  margin-left: 0;
  width: var(--chat-left-panel-effective-width);
  min-width: var(--chat-left-panel-effective-width);
  max-width: var(--chat-left-panel-effective-width);
  transition:
    margin 0.25s ease-out,
    width 0.22s ease-out;
  background: linear-gradient(
    180deg,
    var(--chat-left-surface-start) 0%,
    var(--chat-left-surface-end) 100%
  );
  position: relative;
}

@media (min-width: 992px) {
  body.sidebar-private-visible #wrapper .sidebar-wrapper,
  body.fast-sidebar-mode.sidebar-view-private #wrapper .sidebar-wrapper {
    width: var(--chat-left-panel-private-width);
    min-width: var(--chat-left-panel-private-width);
    max-width: var(--chat-left-panel-private-width);
  }

  body.fast-sidebar-mode.sb-sidenav-toggled #wrapper .sidebar-wrapper {
    margin-left: calc(-1 * var(--chat-left-panel-effective-width));
  }

  .rtl body.fast-sidebar-mode.sb-sidenav-toggled #wrapper .sidebar-wrapper {
    margin-right: calc(-1 * var(--chat-left-panel-effective-width));
    margin-left: 0;
  }
}

body.fast-sidebar-mode #sidebar-wrapper .channel-bar {
  display: none !important;
}

body.fast-sidebar-mode.sidebar-view-room-stats #sidebar-wrapper .sidebar-room-stats,
body.fast-sidebar-mode.sidebar-view-room #sidebar-wrapper .sidebar-room,
body.fast-sidebar-mode.sidebar-view-private #sidebar-wrapper .sidebar-private,
body.fast-sidebar-mode.sidebar-view-explore #sidebar-wrapper .sidebar-discovery,
body.fast-sidebar-mode.sidebar-view-manage #sidebar-wrapper .sidebar-manage,
body.fast-sidebar-mode.sidebar-view-profile #sidebar-wrapper .sidebar-profile {
  display: block !important;
}

.fast-sidebar-tools {
  display: none;
}

body.fast-sidebar-mode .fast-sidebar-tools {
  display: block;
  margin-bottom: 0.72rem;
  padding: 0.62rem;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.28));
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    var(--panel-bg, #ffffff) 0%,
    color-mix(in srgb, var(--accent-color-strong, var(--accent-color, #3b82f6)) 10%, transparent) 100%
  );
}

@media (max-width: 991.98px) {
  body.fast-sidebar-mode .fast-sidebar-tools {
    display: none !important;
  }
}

body.fast-sidebar-mode .fast-sidebar-tools-title {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted-text-color, #64748b);
  margin-bottom: 0.48rem;
}

body.fast-sidebar-mode .fast-sidebar-tools .form-selectgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

body.fast-sidebar-mode .fast-sidebar-tools .form-selectgroup-item {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
}

body.fast-sidebar-mode .explore-fast-tools .disc-cat-row {
  border-radius: 999px;
  padding: 0.34rem 0.62rem;
  gap: 0.3rem;
}

body.fast-sidebar-mode .explore-fast-tools .disc-cat-icon {
  display: none;
}

body.fast-sidebar-mode .explore-fast-tools .disc-cat-name {
  font-size: 0.78rem;
  white-space: nowrap;
}

body.fast-sidebar-mode .manage-fast-tools .room-manage-row {
  min-width: 210px;
}

body.fast-sidebar-mode .manage-fast-tools .my-room-list {
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 0.15rem;
}

body.fast-sidebar-mode .manage-fast-tools .my-room-list::-webkit-scrollbar {
  width: 6px;
}

body.fast-sidebar-mode .manage-fast-tools .my-room-list::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.34);
  border-radius: 999px;
}

body.fast-sidebar-mode .fast-sidebar-tools.is-empty {
  display: none;
}

/* Theme-aware divider for left sidebar */
.sidebar-wrapper.border-end {
  border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}

/* Ensure utility borders are theme-aware in dark themes */
.dark .border-end,
.dark .border-start,
.trueblue .border-end,
.trueblue .border-start {
  border-color: var(--border-color, #3e4046) !important;
}

/* Force dark/trueblue sidebars to avoid white backgrounds */
.dark .sidebar-wrapper {
  background: linear-gradient(
    180deg,
    var(--chat-left-surface-start) 0%,
    var(--chat-left-surface-end) 100%
  ) !important;
}

.dark .room-bar {
  background: linear-gradient(
    180deg,
    var(--chat-left-rail-start) 0%,
    var(--chat-left-rail-end) 100%
  ) !important;
}

.dark .rightbar-wrapper {
  background-color: var(--dark-bg, #232428) !important;
}

.trueblue .sidebar-wrapper {
  background: linear-gradient(
    180deg,
    var(--chat-left-surface-start) 0%,
    var(--chat-left-surface-end) 100%
  ) !important;
}

.trueblue .room-bar {
  background: linear-gradient(
    180deg,
    var(--chat-left-rail-start) 0%,
    var(--chat-left-rail-end) 100%
  ) !important;
}

.trueblue .rightbar-wrapper {
  background-color: var(--dark-bg, #0a1628) !important;
}

html.trueblue .page-content-wrapper,
html.trueblue .main-panel,
html.trueblue .group-chat,
html.trueblue .private-chat {
  background-color: var(--dark-bg, #0a1628) !important;
}

/* Panel separators (stable defaults) */
.room-bar {
  border-right: 1px solid var(--border-color, #d8dee6);
}

.sidebar-wrapper,
.sidebar-wrapper.border-end {
  border-right: 1px solid var(--border-color, #d8dee6) !important;
}

.rightbar-wrapper,
.right-panel.border-start {
  border-left: 1px solid var(--border-color, #d8dee6) !important;
}

/* Theme-aware separator colors */
.dark .room-bar,
.dark .sidebar-wrapper,
.dark .sidebar-wrapper.border-end,
.dark .rightbar-wrapper,
.dark .right-panel.border-start,
.trueblue .room-bar,
.trueblue .sidebar-wrapper,
.trueblue .sidebar-wrapper.border-end,
.trueblue .rightbar-wrapper,
.trueblue .right-panel.border-start {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.rightbar-wrapper {
  min-height: calc(var(--app-vh) - 3rem);
  transition: margin 0.25s ease-in;
  min-width: var(--chat-right-panel-width);
  width: var(--chat-right-panel-width);
  margin-right: 0;
  background: var(--panel-bg, #f8fafc);
  z-index: 100;
  overflow: hidden;
}

.right-panel-switch {
  display: flex;
  gap: 8px;
  padding: 10px 12px 6px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-bg, #f8fafc);
}

.right-panel-switch-btn {
  flex: 1;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  border-radius: 999px;
  background: transparent;
  color: var(--default-text-color, #1f2937);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  transition: 0.2s ease;
}

.right-panel-switch-btn.active {
  background: var(--accent-color, #3b82f6);
  color: #fff;
  border-color: transparent;
}

.right-panel-section {
  padding: 0 0 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.right-panel-section.d-none {
  display: none !important;
}

.shared-links-card {
  padding: 10px 12px 16px;
}

.shared-links-head {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--default-text-color, #1f2937);
}

.shared-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.shared-links-empty {
  text-align: center;
  padding: 20px 10px;
  color: var(--muted-text-color, #6b7280);
  font-size: 12px;
}

.shared-links-empty i {
  font-size: 22px;
  display: block;
  margin-bottom: 6px;
}

.shared-link-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  background: var(--panel-bg, #ffffff);
  overflow: hidden;
  cursor: pointer;
  transition: 0.2s ease;
}

.shared-link-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.shared-link-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b1220;
}

.shared-link-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0b1220;
  overflow: hidden;
}

.shared-link-thumb-wrap .shared-link-thumb {
  width: 100%;
  height: 100%;
}

.shared-link-play-inline {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.35);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.shared-link-play-inline:hover {
  background: rgba(15, 23, 42, 0.5);
}

.shared-link-yt-iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.shared-link-meta {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shared-link-subline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shared-link-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--default-text-color, #111827);
  line-height: 1.3;
}

.shared-link-user-badge {
  align-self: auto;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-text-color, #6b7280);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  border-radius: 999px;
  padding: 2px 8px;
  max-width: calc(100% - 72px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-link-desc {
  font-size: 11px;
  color: var(--muted-text-color, #6b7280);
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
}

.shared-link-play,
.shared-link-open {
  border: 1px solid var(--accent-color, #ef4444);
  color: var(--accent-color, #ef4444);
  background: transparent;
  font-size: 11px;
  border-radius: 999px;
  padding: 4px 10px;
}

.shared-link-play:hover,
.shared-link-open:hover {
  background: var(--accent-color, #ef4444);
  color: #fff;
}

.shared-link-open {
  font-size: 10px;
  padding: 3px 8px;
}

.shared-link-open-yt {
  border-color: var(--border-color, rgba(148, 163, 184, 0.35));
  color: var(--muted-text-color, #6b7280);
}

.shared-link-open-yt:hover {
  border-color: var(--accent-color, #ef4444);
  color: #fff;
}

.shared-media-card {
  padding: 10px 12px 16px;
}

.shared-media-head,
.shared-media-subhead {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--default-text-color, #1f2937);
}

.shared-media-subhead {
  margin-top: 14px;
}

.shared-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.shared-media-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  cursor: pointer;
  background: var(--panel-bg, #ffffff);
}

.shared-media-user-badge {
  display: block;
  margin: 4px 6px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-text-color, #6b7280);
  background: rgba(148, 163, 184, 0.15);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-media-item img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  display: block;
}

.shared-media-item .shared-media-play {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  color: #fff;
  font-size: 18px;
}

.shared-media-empty {
  text-align: center;
  padding: 16px 10px;
  color: var(--muted-text-color, #6b7280);
  font-size: 12px;
  grid-column: 1 / -1;
}

.shared-media-empty i {
  font-size: 20px;
  display: block;
  margin-bottom: 6px;
}

/* Keep right panel separator consistent */
.right-panel.border-start {
  border-left: 1px solid var(--border-color, #d8dee6) !important;
}

.sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

body.sb-sidenav-toggled #wrapper .sidebar-wrapper {
  margin-left: calc(-1 * var(--chat-left-panel-effective-width));
}

body.sb-rightnav-toggled #wrapper .rightbar-wrapper {
  margin-right: calc(-1 * var(--chat-right-panel-width));
}

.page-content-wrapper {
  /* min-width: 100vw; */
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: var(--app-vh);
}

.main-panel {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(var(--app-vh) - 50px);
  min-height: 0;
}

.room-bar {
  width: var(--chat-left-rail-width);
  display: flex;
  height: var(--app-vh);
  background: linear-gradient(
    180deg,
    var(--chat-left-rail-start) 0%,
    var(--chat-left-rail-end) 100%
  );
  padding: 0.34rem 0.4rem 0.56rem;
  gap: 0.28rem;
  z-index: 1024;
}

.channel-bar {
  width: var(--chat-left-panel-width);
}

@media (min-width: 992px) {
  .sidebar-private.channel-bar {
    width: var(--chat-left-panel-private-width);
  }

  .sidebar-private .topbar-private {
    width: 100%;
    max-width: 100%;
  }
}

.mini-brand {
  padding: 10px;
  display: flex;
  justify-content: center;
}

.mini-brand img {
  height: 30px;
  width: auto;
  max-width: 130px;
}

.mini-brand-seperator {
  height: 2px;
  width: 32px;
  border-radius: 1px;
  background-color: var(--border-color, #141b20);
  margin-left: auto;
  margin-right: auto;
}

.room-list {
  padding: 0.18rem 0.14rem 0.4rem;
  margin-top: 0.45rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.room-list::-webkit-scrollbar {
  width: 6px;
}

.room-list::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.36);
  border-radius: 999px;
}

.room-list-label {
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted-text-color, #64748b);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.room-list .room-list-item {
  list-style: none;
  margin-bottom: 8px;
  display: flex;
  justify-content: stretch;
  position: relative;
  align-items: center;
  width: 100%;
}

.room-list-item .unread-indicator {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--chat-room-unread-indicator);
  position: absolute;
  top: 8px;
  left: 48px;
  right: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.78),
    0 0 0 2px rgba(59, 130, 246, 0.24);
}

.room-list-item .unread-indicator.active {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  opacity: 1;
}

.room-list-item:hover .room-card-modern {
  background-color: rgba(15, 23, 42, 0.08);
  border-color: var(--chat-accent-border-soft);
  transform: translateY(-1px);
}

.room-list-item.active .room-card-modern {
  background: linear-gradient(
    145deg,
    var(--chat-accent-soft-strong) 0%,
    var(--chat-accent-soft) 100%
  );
  border-color: var(--chat-accent-border-strong);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-accent) 20%, transparent);
}

.pill {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 0px;
  background: rgba(15, 23, 42, 0.38);
  background: color-mix(in srgb, var(--default-text-color, #0f172a) 42%, transparent);
  position: absolute;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  transition: 0.3s;
}

.private-item .pill,
.explore-room .pill,
.radio-container .pill,
.manage-room .pill {
  left: -10px;
}

.room-list-item:hover .pill,
.private-item:hover .pill,
.explore-room:hover .pill,
.manage-room:hover .pill,
.radio-container:hover .pill {
  height: 40px;
}

.room-list-item .pill.active,
.private-item .pill.active,
.explore-room .pill.active,
.manage-room .pill.active {
  height: 40px;
  background: var(--chat-pill-active);
}

.room-card-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background-color: rgba(255, 255, 255, 0.38);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.room-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}

.room-sidebar-badge {
  --badge-grad-start: #0e3158;
  --badge-grad-mid: #1764ab;
  --badge-grad-end: #104272;
  --badge-border-color: rgba(92, 210, 255, 0.28);
  --badge-ring-color: rgba(173, 232, 255, 0.08);
  --badge-glow-color: rgba(96, 223, 255, 0.28);
  --badge-text-color: #7fe9ff;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    150deg,
    var(--badge-grad-start) 0%,
    var(--badge-grad-mid) 52%,
    var(--badge-grad-end) 100%
  );
  border: 1px solid var(--badge-border-color);
  box-shadow:
    inset 0 0 0 1px var(--badge-ring-color),
    inset 0 -10px 16px rgba(2, 16, 35, 0.34);
  background-size: 210% 210%;
  background-position: 48% 52%;
  animation: roomSidebarBadgeGradientFlow 23s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.room-sidebar-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 15% 18%,
    var(--badge-glow-color),
    transparent 48%
  );
  opacity: 0.72;
  transform: translate3d(0, 0, 0) scale(1);
  animation: roomSidebarBadgeGlowDrift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

.room-sidebar-badge::after {
  content: "";
  position: absolute;
  inset: -68% -32%;
  background: linear-gradient(
    116deg,
    transparent 34%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 66%
  );
  opacity: 0.2;
  transform: translateX(-42%) rotate(7deg);
  animation: roomSidebarBadgeShimmerSweep 31s ease-in-out infinite;
  pointer-events: none;
}

.room-sidebar-badge-text {
  position: relative;
  z-index: 1;
  color: var(--badge-text-color);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: none;
  font-size: clamp(
    0.5rem,
    calc(1.06rem - (var(--badge-char-count, 2) * 0.085rem)),
    0.94rem
  );
  width: 100%;
  padding: 0 0.14rem;
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: clip;
  overflow: hidden;
}

.room-sidebar-badge.is-short .room-sidebar-badge-text {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.room-sidebar-badge.is-medium .room-sidebar-badge-text {
  text-transform: uppercase;
  letter-spacing: 0.014em;
}

.room-sidebar-badge.is-long .room-sidebar-badge-text,
.room-sidebar-badge.is-xlong .room-sidebar-badge-text {
  text-transform: none;
  letter-spacing: 0;
}

.room-sidebar-badge.badge-tone-1 {
  --badge-grad-start: #0e3158;
  --badge-grad-mid: #1764ab;
  --badge-grad-end: #104272;
  --badge-border-color: rgba(92, 210, 255, 0.28);
  --badge-ring-color: rgba(173, 232, 255, 0.08);
  --badge-glow-color: rgba(96, 223, 255, 0.28);
  --badge-text-color: #7fe9ff;
}

.room-sidebar-badge.badge-tone-2 {
  --badge-grad-start: #2a1d64;
  --badge-grad-mid: #5a3db5;
  --badge-grad-end: #3b2a87;
  --badge-border-color: rgba(188, 166, 255, 0.34);
  --badge-ring-color: rgba(229, 220, 255, 0.12);
  --badge-glow-color: rgba(194, 176, 255, 0.28);
  --badge-text-color: #d6c7ff;
}

.room-sidebar-badge.badge-tone-3 {
  --badge-grad-start: #0f3a3c;
  --badge-grad-mid: #1f7e7b;
  --badge-grad-end: #14595b;
  --badge-border-color: rgba(126, 242, 224, 0.34);
  --badge-ring-color: rgba(198, 255, 244, 0.1);
  --badge-glow-color: rgba(126, 242, 224, 0.3);
  --badge-text-color: #a6ffe9;
}

.room-sidebar-badge.badge-tone-4 {
  --badge-grad-start: #4a2d0f;
  --badge-grad-mid: #b56b22;
  --badge-grad-end: #704312;
  --badge-border-color: rgba(255, 196, 120, 0.34);
  --badge-ring-color: rgba(255, 232, 196, 0.1);
  --badge-glow-color: rgba(255, 199, 130, 0.28);
  --badge-text-color: #ffe1b6;
}

.room-sidebar-badge.badge-tone-5 {
  --badge-grad-start: #4d1734;
  --badge-grad-mid: #a63f77;
  --badge-grad-end: #68214a;
  --badge-border-color: rgba(255, 162, 206, 0.35);
  --badge-ring-color: rgba(255, 219, 239, 0.11);
  --badge-glow-color: rgba(255, 168, 211, 0.3);
  --badge-text-color: #ffc4e4;
}

.room-sidebar-badge.badge-tone-6 {
  --badge-grad-start: #243d12;
  --badge-grad-mid: #5f9a2d;
  --badge-grad-end: #365c1b;
  --badge-border-color: rgba(190, 255, 146, 0.34);
  --badge-ring-color: rgba(232, 255, 214, 0.1);
  --badge-glow-color: rgba(192, 255, 148, 0.28);
  --badge-text-color: #e0ffc6;
}

.room-sidebar-badge.badge-tone-7 {
  --badge-grad-start: #1b3f4d;
  --badge-grad-mid: #3283a5;
  --badge-grad-end: #25596d;
  --badge-border-color: rgba(143, 223, 255, 0.35);
  --badge-ring-color: rgba(209, 241, 255, 0.11);
  --badge-glow-color: rgba(144, 224, 255, 0.3);
  --badge-text-color: #bfeaff;
}

.room-sidebar-badge.badge-tone-8 {
  --badge-grad-start: #3a2255;
  --badge-grad-mid: #7d46b0;
  --badge-grad-end: #55307b;
  --badge-border-color: rgba(205, 162, 255, 0.34);
  --badge-ring-color: rgba(237, 219, 255, 0.1);
  --badge-glow-color: rgba(209, 172, 255, 0.29);
  --badge-text-color: #e2cbff;
}

@keyframes roomSidebarBadgeGradientFlow {
  0% {
    background-position: 0% 30%;
  }
  50% {
    background-position: 100% 70%;
  }
  100% {
    background-position: 35% 18%;
  }
}

@keyframes roomSidebarBadgeGlowDrift {
  0% {
    transform: translate3d(-2%, -2%, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(3%, 1%, 0) scale(1.07);
    opacity: 0.8;
  }
  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.02);
    opacity: 0.62;
  }
}

@keyframes roomSidebarBadgeShimmerSweep {
  0% {
    transform: translateX(-44%) rotate(7deg);
    opacity: 0;
  }
  20% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.16;
  }
  80% {
    opacity: 0.08;
  }
  100% {
    transform: translateX(42%) rotate(7deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-sidebar-badge,
  .room-sidebar-badge::before,
  .room-sidebar-badge::after {
    animation: none !important;
  }
}

.room-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--default-text-color, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.dark .room-list-label,
.trueblue .room-list-label {
  color: var(--muted-text-color, rgba(203, 213, 225, 0.86));
}

.dark .room-list::-webkit-scrollbar-thumb,
.trueblue .room-list::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.44);
}

.dark .room-card-modern,
.trueblue .room-card-modern {
  background-color: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.2);
}

.dark .room-list-item:hover .room-card-modern,
.trueblue .room-list-item:hover .room-card-modern {
  background-color: rgba(30, 41, 59, 0.62);
  border-color: var(--chat-accent-border-soft);
}

.dark .room-list-item.active .room-card-modern,
.trueblue .room-list-item.active .room-card-modern {
  background: linear-gradient(
    145deg,
    var(--chat-accent-soft-strong) 0%,
    var(--chat-accent-soft) 100%
  );
  border-color: var(--chat-accent-border-strong);
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.2),
    inset 0 0 0 1px color-mix(in srgb, var(--chat-accent) 30%, transparent),
    0 0 0 1px rgba(30, 41, 59, 0.2);
}

.dark .room-card-name,
.trueblue .room-card-name {
  color: #e2e8f0;
}

.dark .pill,
.trueblue .pill {
  background: rgba(148, 163, 184, 0.64);
}

.dark .room-list-item .pill.active,
.trueblue .room-list-item .pill.active {
  background: var(--chat-pill-active);
}

.room-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--chat-unread-indicator);
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--chat-unread-indicator) 30%, transparent);
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}

.room-list-item .unread-indicator {
  display: block;
}

@media (max-width: 768px) {
  .room-bar {
    width: var(--chat-left-rail-width-mobile);
    height: var(--app-vh);
    flex-direction: column;
    overflow: visible;
  }

  .mini-brand {
    padding: 8px;
  }

  .mini-brand-seperator {
    display: block;
  }

  .room-list-label {
    display: block;
  }

  .room-list {
    padding: 0;
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: clip;
  }

  .room-list .room-list-item {
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    width: auto;
    margin-bottom: 10px;
    overflow: visible;
  }

  .room-card-modern {
    flex-direction: column;
    max-width: 90px;
    padding: 4px;
    gap: 0;
    position: relative;
    overflow: visible;
  }

  .room-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .room-sidebar-badge-text {
    font-size: clamp(
      0.46rem,
      calc(0.84rem - (var(--badge-char-count, 2) * 0.08rem)),
      0.72rem
    );
  }

  .room-card-name {
    font-size: 9px;
    text-align: center;
    line-height: 1.2;
    display: none;
  }

  .room-list-item .unread-indicator {
    left: calc(50% + 17px);
    top: 6px;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .room-unread-badge {
    position: absolute;
    top: -4px;
    right: 0px;
    min-width: 18px;
    height: 18px;
    font-size: 8px;
    padding: 0 3px;
    border-radius: 9px;
  }

  .private-messages {
    overflow: visible;
  }

  .private-item .room-unread-badge {
    top: -4px;
    right: -4px;
  }
}

.action-list {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 0;
  padding-top: 10px;
  margin-top: auto;
}

.action-item {
  background: #eee;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  line-height: 1;
  position: relative;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}

.room-bar-profile-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.45rem;
  margin-bottom: 0.4rem;
}

.room-bar-profile-trigger {
  width: 56px;
  max-width: 100%;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.36));
  border-radius: 14px;
  padding: 0.34rem 0.24rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(226, 232, 240, 0.72) 100%);
  color: var(--default-text-color, #0f172a);
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.12);
}

.room-bar-profile-trigger:hover,
.room-bar-profile-trigger:focus-visible {
  border-color: var(--chat-accent-border-soft);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--chat-accent, var(--accent-color, #3b82f6)) 15%, #ffffff) 0%,
    color-mix(in srgb, var(--chat-accent, var(--accent-color, #3b82f6)) 8%, #e2e8f0) 100%
  );
  color: var(--default-text-color, #0f172a);
}

.room-bar-profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.52);
  background: #f8fafc;
}

.room-bar-profile-avatar.room-bar-profile-avatar-square {
  border-radius: 8px;
}

.room-bar-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-bar-profile-avatar .current-status.online-status {
  right: -1px;
  bottom: -1px;
  left: auto;
}

.room-bar-profile-avatar .online-status .ti {
  width: 10px;
  height: 10px;
  font-size: 8px;
}

.room-bar-profile-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.room-bar-profile-fallback .ti {
  font-size: 1.05rem;
}

.room-bar-profile-name {
  width: 100%;
  margin: 0;
  font-size: 9px;
  line-height: 1.12;
  text-align: center;
  color: var(--muted-text-color, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-bar-profile-dropdown {
  min-width: 220px;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  box-shadow: 0 16px 32px rgba(2, 8, 23, 0.22);
}

.room-bar-profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.76rem;
}

.room-bar-profile-dropdown-header img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.room-bar-profile-dropdown-avatar-wrap {
  width: 34px;
  height: 34px;
  min-width: 34px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.room-bar-profile-dropdown-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
}

.room-bar-profile-dropdown-status.current-status.online-status {
  right: -4px;
  bottom: -4px;
  left: auto;
  position: absolute;
  z-index: 2;
}

.room-bar-profile-dropdown-status.online-status .ti {
  width: 10px;
  height: 10px;
  font-size: 8px;
}

.room-bar-profile-dropdown-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.room-bar-profile-dropdown-meta strong {
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-bar-profile-dropdown-meta small {
  color: var(--muted-text-color, #64748b);
  line-height: 1.2;
}

.dark .room-bar-profile-trigger,
.trueblue .room-bar-profile-trigger {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--dark-bg, #232428) 88%, var(--chat-accent, #3b82f6) 12%) 0%,
    var(--dark-bg, #232428) 100%
  );
  border-color: color-mix(in srgb, var(--chat-accent, #3b82f6) 30%, transparent);
}

.dark .room-bar-profile-name,
.trueblue .room-bar-profile-name {
  color: color-mix(in srgb, var(--default-text-color, #e5e7eb) 80%, transparent);
}

@media (max-width: 768px) {
  .room-bar .action-list {
    padding-top: 2px;
    gap: 0.2rem;
  }

  .room-bar .action-list .action-item {
    display: none !important;
  }

  .room-bar .action-list .action-item.settings-item,
  .room-bar .action-list .action-item.explore-room {
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    margin-bottom: 4px !important;
    border-radius: 9px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(226, 232, 240, 0.78) 100%);
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.36));
  }

  .dark .room-bar .action-list .action-item.settings-item,
  .dark .room-bar .action-list .action-item.explore-room,
  .trueblue .room-bar .action-list .action-item.settings-item,
  .trueblue .room-bar .action-list .action-item.explore-room {
    background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--dark-bg, #232428) 88%, var(--chat-accent, #3b82f6) 12%) 0%,
      var(--dark-bg, #232428) 100%
    );
    border-color: color-mix(in srgb, var(--chat-accent, #3b82f6) 30%, transparent);
  }

  .room-bar .action-list .settings-item .ti {
    font-size: 0.94rem;
  }

  .room-bar .action-list .explore-room img {
    width: 20px !important;
    height: 20px !important;
  }

  .room-bar .action-list .action-item small {
    display: none !important;
  }

  .room-bar .room-bar-profile-menu {
    display: none !important;
  }
}

.room-name {
  width: 100%;
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  transition: 0.3s;
}

.room-name .dropdown-toggle {
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.room-name span {
  width: 88%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar {
  height: 3rem;
  min-height: 3rem;
  border-bottom: 1px solid rgba(98, 105, 118, 0.16);
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}

/* Keep /profile topbar minimal and consistent on mobile */
#main-profile .topbar {
  justify-content: flex-start;
}

#main-profile .topbar .open-inbox-middle,
#main-profile .topbar .google-play-badge-link {
  display: none !important;
}

#main-profile .topbar .chatrum-toggle-modern {
  margin-right: auto !important;
}

.google-play-badge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.google-play-badge-img {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
}

.google-play-badge-img--topbar {
  width: clamp(101px, 9.9vw, 133px);
}

.google-play-badge-link--dropdown {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.google-play-badge-img--dropdown {
  width: 156px;
}

.dating-cta--pc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--dating-accent-1), var(--dating-accent-2), var(--dating-accent-3));
  background-size: 200% 200%;
  animation: datingGradientShift 4s ease infinite;
  color: var(--dating-cta-text);
  border: none;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 12px var(--dating-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dating-cta--pc:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 18px var(--dating-shadow);
}

.dating-cta--pc i {
  font-size: 16px;
}

@keyframes datingGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Mobile dating CTA (top bar) */
.dating-cta--top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f43f5e, #e11d48, #be123c);
  background-size: 200% 200%;
  animation: datingGradientShift 4s ease infinite;
  color: #fff;
  border: none;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 11px;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.dating-cta--top:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 14px rgba(225, 29, 72, 0.5);
  color: #fff;
}

.dating-cta--top .icon-wrap {
  display: flex;
}

.dating-cta--top .icon-wrap img {
  width: 26px;
  height: 26px;
}

.dating-cta--top .icon-wrap i {
  font-size: 24px;
}

.dating-cta--top small {
  color: #fff;
  font-weight: 600;
}

.dating-cta--top small i {
}

body.hide-dating-ads .dating-banner,
body.hide-dating-ads .dating-card,
body.hide-dating-ads .dating-cta,
body.hide-dating-ads .scorchat-popup,
body.hide-dating-ads .scorchat-badge,
body.hide-dating-ads .dating-ad {
  display: none !important;
}

:root {
  --dating-accent-1: #e8437f;
  --dating-accent-2: #f56565;
  --dating-accent-3: #ed64a6;
  --dating-shadow: rgba(232, 67, 127, 0.3);
  --dating-text: #fff;
  --dating-text-muted: rgba(255, 255, 255, 0.92);
  --dating-cta-bg: rgba(255, 255, 255, 0.22);
  --dating-cta-bg-hover: rgba(255, 255, 255, 0.35);
  --dating-cta-text: #fff;
  --dating-dot: #4ade80;
  --dating-dot-glow: rgba(74, 222, 128, 0.5);
  --dating-dot-glow-soft: rgba(74, 222, 128, 0.3);
  --dating-label: var(--dating-accent-2);
}

.theme-light,
.theme-blue,
.theme-red,
.theme-green {
  --dating-accent-1: var(--accent-color);
  --dating-accent-2: var(--accent-color-strong);
  --dating-accent-3: var(--accent-color);
  --dating-shadow: rgba(15, 23, 42, 0.18);
  --dating-text: #fff;
  --dating-text-muted: rgba(255, 255, 255, 0.92);
  --dating-cta-bg: rgba(255, 255, 255, 0.25);
  --dating-cta-bg-hover: rgba(255, 255, 255, 0.4);
  --dating-cta-text: #fff;
  --dating-dot: var(--accent-color-strong);
  --dating-label: var(--accent-color-strong);
}

.dark {
  --dating-accent-1: #4b5563;
  --dating-accent-2: #374151;
  --dating-accent-3: #1f2937;
  --dating-shadow: rgba(0, 0, 0, 0.45);
  --dating-text: #f8fafc;
  --dating-text-muted: rgba(248, 250, 252, 0.85);
  --dating-cta-bg: rgba(255, 255, 255, 0.1);
  --dating-cta-bg-hover: rgba(255, 255, 255, 0.18);
  --dating-cta-text: #fff;
  --dating-dot: #60a5fa;
  --dating-label: var(--dating-text);
}

.trueblue {
  --dating-accent-1: #1b2838;
  --dating-accent-2: #2a3f5f;
  --dating-accent-3: #0d1b2a;
  --dating-shadow: rgba(14, 40, 70, 0.45);
  --dating-text: #e6f1ff;
  --dating-text-muted: rgba(230, 241, 255, 0.85);
  --dating-cta-bg: rgba(255, 255, 255, 0.12);
  --dating-cta-bg-hover: rgba(255, 255, 255, 0.2);
  --dating-cta-text: #e6f1ff;
  --dating-dot: #4fc3f7;
  --dating-label: var(--dating-text);
}

/* Dating stats bar */
.dating-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--dating-text-muted);
  letter-spacing: 0.2px;
}

.dating-stats i {
  margin-right: 2px;
  font-size: 11px;
}

.dating-stats__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dating-dot);
  animation: datingStatsPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes datingStatsPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--dating-dot-glow); }
  50% { opacity: 0.7; box-shadow: 0 0 6px 2px var(--dating-dot-glow-soft); }
}

.dating-banner {
  margin: 10px;
}

.dating-banner a {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--dating-accent-1), var(--dating-accent-2), var(--dating-accent-3));
  background-size: 200% 200%;
  animation: datingGradientShift 4s ease infinite;
  color: var(--dating-text);
  border: none;
  text-decoration: none;
  box-shadow: 0 3px 15px var(--dating-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dating-banner a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--dating-shadow);
}

.dating-banner__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--dating-text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.dating-banner__text {
  font-size: 12px;
  opacity: 0.92;
  line-height: 1.4;
  color: var(--dating-text-muted);
}

.dating-card__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--dating-text);
}

.dating-card__text {
  font-size: 12px;
  margin-top: 4px;
  color: var(--dating-text-muted);
}

.dating-banner__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--dating-cta-bg);
  backdrop-filter: blur(4px);
  color: var(--dating-cta-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: background 0.2s ease;
}

.dating-banner__cta:hover {
  background: var(--dating-cta-bg-hover);
}

.dating-card {
  margin: 8px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--dating-accent-1), var(--dating-accent-2), var(--dating-accent-3));
  background-size: 200% 200%;
  animation: datingGradientShift 4s ease infinite;
  border: none;
  color: var(--dating-text);
  box-shadow: 0 3px 15px var(--dating-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.dating-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--dating-shadow);
}

.dating-card__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--dating-text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.dating-card__text {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.92;
  line-height: 1.4;
  color: var(--dating-text-muted);
}

.dating-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--dating-cta-bg);
  backdrop-filter: blur(4px);
  color: var(--dating-cta-text);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.dating-card__btn:hover {
  background: var(--dating-cta-bg-hover);
  transform: scale(1.05);
}

/* Icon spacing inside dating elements */
.dating-banner__title i,
.dating-banner__text i,
.dating-banner__cta i,
.dating-card__title i,
.dating-card__text i,
.dating-card__btn i {
  margin-right: 4px;
}

.dating-banner__title img,
.dating-banner__text img,
.dating-card__title img,
.dating-card__text img {
  margin-right: 4px;
  width: 26px;
  height: 26px;
  vertical-align: -4px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dark .dating-cta--pc,
.trueblue .dating-cta--pc,
.dark .dating-banner a,
.trueblue .dating-banner a,
.dark .dating-card,
.trueblue .dating-card,
.dark .dating-card {
  color: var(--dating-text);
}

.theme-light .dating-cta--pc,
.theme-light .dating-banner a,
.theme-light .dating-card,
.theme-blue .dating-cta--pc,
.theme-blue .dating-banner a,
.theme-blue .dating-card,
.theme-red .dating-cta--pc,
.theme-red .dating-banner a,
.theme-red .dating-card,
.theme-green .dating-cta--pc,
.theme-green .dating-banner a,
.theme-green .dating-card {
  color: var(--dating-text);
}

.dark .dating-banner__cta,
.trueblue .dating-banner__cta,
.dark .dating-card__btn,
.trueblue .dating-card__btn,
.dark .dating-card__btn {
  color: var(--dating-cta-text);
}

/* Bottom nav dating CTA */
.dating-cta {
  text-decoration: none !important;
}

.dating-cta .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dating-accent-1), var(--dating-accent-2), var(--dating-accent-3));
  background-size: 200% 200%;
  animation: datingGradientShift 4s ease infinite;
  box-shadow: 0 2px 8px var(--dating-shadow);
  margin-bottom: 2px;
}

.dating-cta .icon-wrap i {
  font-size: 16px;
}

.dating-cta small {
  color: var(--dating-label);
  font-weight: 700;
  font-size: 10px;
}

.channel-cat {
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  padding-left: 10px;
  margin-bottom: 1px;
  margin-right: 3px;
  margin-left: 3px;
  border-radius: 5px;
  padding: 5px 10px;
  transition: 0.1s;
  display: flex;
}

.channel-cat:hover {
  background-color: #dfe1e5;
}

.channel-cat-actions {
  margin-left: auto;
}

.channel-item {
  padding: 10px 12px;
  cursor: pointer;
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 4px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

.channel-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
  color: #374151;
}

.channel-icon,
.top-channel-icon {
  display: flex;
  align-items: center;
  color: #6b7280;
}

.channel-item:hover {
  background-color: #ecfdf5;
  border-color: #10b981;
  transform: translateX(2px);
}

.channel-item:hover .channel-name {
  color: #059669;
}

.channel-item.active {
  background-color: #ecfdf5;
  border-color: #10b981;
  color: #10b981;
}

.channel-item.active .channel-name {
  color: #059669;
  font-weight: 600;
}

/* Dark mode styles */
.dark .channel-item {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .channel-name {
  color: #ffffff;
}

.dark .channel-icon,
.dark .top-channel-icon {
  color: #ffffff;
}

.dark .top-channel-name {
  color: #ffffff;
}

.dark .private-list .channel-user-name {
  color: #6eb5ff;
}

.dark .private-list .user-row[data-user-sex="1"] .channel-user-name {
  color: #2196f3;
}

.dark .private-list .user-row[data-user-sex="2"] .channel-user-name {
  color: #e91e63;
}

.dark .private-list .user-status {
  color: #8899aa;
}

.dark .topbar-private {
  background-color: #1f232b;
  border-bottom-color: #323844;
}

.dark .dm-user-search {
  background-color: #2a2f38 !important;
  color: #e5e7eb !important;
  border-color: #3d4553 !important;
}

.dark .dm-user-search::placeholder {
  color: #97a1b1;
}

.dark .dm-user-search:focus {
  border-color: #5b6473 !important;
  box-shadow: 0 0 0 0.12rem rgba(118, 128, 144, 0.28) !important;
}

.dark .topbar-private .input-icon-addon {
  color: #aeb7c5 !important;
  background: #2a2f38 !important;
  border-color: #3d4553 !important;
}

.dark .room-user-search,
.dark .group-user-search {
  background-color: #1b2838 !important;
  color: #e0e0e0 !important;
  border-color: #2a3f5f !important;
}

.dark .room-user-search::placeholder,
.dark .group-user-search::placeholder {
  color: #8899aa;
}

.dark .user-search-input .input-icon-addon,
.dark .user-search-input .clear-user-search {
  color: #8899aa;
}

.dark .private-list-header {
  color: #8899aa;
  border-bottom-color: #1a2d4a;
}

.dark .private-list-empty {
  color: #8899aa;
}

.dark .private-list-empty i {
  color: #8899aa !important;
}
.dark .private-list .dropdown-menu .dropdown-item:hover,
.dark .private-list .dropdown-menu .dropdown-item:focus {
  background: transparent;
  color: inherit;
}
html.trueblue .private-list .dropdown-menu .dropdown-item:hover,
html.trueblue .private-list .dropdown-menu .dropdown-item:focus {
  background: transparent;
  color: inherit;
}

/* Dark theme login / auth overrides */
.dark .login-selector .nav-link {
  background: #232428;
  color: #cbd5e1;
}

.dark .login-selector .nav-link.active {
  background: #464952;
  color: #ffffff;
}

.dark .non-login-message,
.dark .non-join-message,
.dark .non-chat-select,
.dark .user-restricted,
.dark .permission-denied-editor,
.dark .forward-selection {
  background-color: #1b2838;
  color: #e0e0e0;
}

.dark .non-login-message p,
.dark .non-join-message p,
.dark .non-chat-select p,
.dark .user-restricted p,
.dark .permission-denied-editor p {
  color: #e0e0e0;
}

.dark .non-login-message a,
.dark .non-join-message a {
  color: #6eb5ff;
}

.dark .alert-warning {
  background-color: #1b2838;
  border-color: #2a3f5f;
  color: #e0e0e0;
}

.dark .alert-warning strong {
  color: #f0c040;
}

.dark .alert-warning .btn-success {
  background-color: #2e7d32;
  border-color: #2e7d32;
}

.dark .alert-warning .btn-success:hover {
  background-color: #388e3c;
  border-color: #388e3c;
}

.dark .policy-agree-block .form-check-input {
  accent-color: #4fc3f7 !important;
  background-color: #1b2838 !important;
  border: 2px solid #4fc3f7 !important;
}

.dark .policy-agree-block .form-check-label {
  color: #e0e0e0;
}

.dark .policy-agree-block .form-check-label a {
  color: #4fc3f7;
}

.dark .policy-agree-block .form-check-label a:hover {
  color: #81d4fa;
}

.dark .auth-body {
  background-color: #0d1b2a;
}

.dark .auth-content {
  background: #0a1628;
  color: #e0e0e0;
  border-color: #1a2d4a;
}

.dark #main-login {
  background: #3a6ea5;
  color: #ffffff;
  border: none;
}

.dark #main-login:hover {
  background: #2a5a8a;
}

.dark .private-list .channel-user-image img,
.dark .private-list .channel-user-image .user-list-avatar {
  border-color: #2a3f5f;
}

.dark .private-list .user-row:hover .channel-user-image img,
.dark .private-list .user-row:hover .channel-user-image .user-list-avatar {
  border-color: #3a6ea5;
}

.dark .private-list .unread-indicator.active {
  box-shadow: 0 0 0 2px #0a1628;
}

.dark .mobile-hidden i {
  color: #ffffff !important;
}

.dark .mobile-hidden small {
  color: #d1d5db !important;
}

.dark .chatrum-label {
  color: #ffffff !important;
}

.dark .channel-item:hover {
  background-color: #064e3b;
  border-color: #34d399;
}

.dark .channel-item:hover .channel-name {
  color: #a7f3d0;
}

.dark .channel-item.active {
  background-color: #064e3b;
  border-color: #34d399;
}

.dark .channel-item.active .channel-name {
  color: #a7f3d0;
  font-weight: 600;
}

@media (max-width: 768px) {
  /* Mobile styles - no hover, so make active state very clear */
  .channel-item {
    padding: 12px 14px;
    min-height: 44px;
    background-color: #fff;
  }

  .channel-item.active {
    background-color: #ecfdf5;
    border-left: 4px solid #059669;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.15);
  }

  .channel-item.active .channel-name {
    color: #059669;
  }

  /* Dark mode mobile */
  .dark .channel-item {
    background-color: #1f2937;
  }

  .dark .channel-item .channel-name {
    color: #ffffff;
  }

  .dark .channel-item.active {
    background-color: #064e3b;
    border-left: 4px solid #34d399;
    box-shadow: 0 2px 4px rgba(52, 211, 153, 0.2);
  }

  .dark .channel-item.active .channel-name {
    color: #a7f3d0;
  }

  /* True Blue mobile */
  html.trueblue .channel-item {
    background-color: #1b2838;
  }

  html.trueblue .channel-item .channel-name {
    color: #ffffff;
  }

  html.trueblue .channel-item.active {
    background-color: #0d1b2a;
    border-left: 4px solid #4fc3f7;
    box-shadow: 0 2px 4px rgba(79, 195, 247, 0.2);
  }

  html.trueblue .channel-item.active .channel-name {
    color: #4fc3f7;
  }
}

/* Dark theme room cards */
.dark .room-card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .room-card .card-img-top {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .room-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

/* True Blue theme channel items */
html.trueblue .channel-item {
  background-color: transparent;
}

html.trueblue .channel-name {
  color: #ffffff;
}

html.trueblue .channel-item:hover {
  background-color: #1b2838;
  border-color: #4fc3f7;
}

html.trueblue .channel-item:hover .channel-name {
  color: #4fc3f7;
}

html.trueblue .channel-item.active {
  background-color: #1b2838;
  border-color: #4fc3f7;
}

html.trueblue .channel-item.active .channel-name {
  color: #4fc3f7;
  font-weight: 600;
}

/* True Blue theme room cards */
html.trueblue .room-card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}

html.trueblue .room-card .card-img-top {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html.trueblue .room-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

.channel-actions {
  margin-left: auto;
  font-size: 16px;
  padding-right: 5px;
  position: relative;
}

.channel-container {
  margin-top: -48px;
}

.sidebar-height-fix {
  overflow: auto;
  height: calc((var(--vh, 1vh) * 100) - 48px);
}

.sidebar-height-fix-mt48 {
  margin-top: 48px;
  height: calc((var(--vh, 1vh) * 100) - 96px);
  overflow-y: auto;
  overflow-x: hidden;
}

.channel-list {
  padding: 10px 0 10px 0px;
  background-color: #f2f3f5;
}

.channel-android-ad {
  padding: 8px 10px 12px;
  display: flex;
  justify-content: center;
}

.channel-android-ad .d-block {
  width: 100%;
  max-width: 210px;
}

.channel-android-ad-img {
  border-radius: 12px;
  display: block;
}

.topbar-channels {
  background-color: rgba(242, 243, 245, 0);
  z-index: 1;
}

.room-img-shown .room-name {
  color: #fff;
  /* -webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
	filter: drop-shadow(0 1px 1px hsla(0,0%,0%,.8)); */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: 0.3s;
}

.room-img:before {
  content: "";
  position: absolute;
  top: 0;

  left: 0;
  width: 100%;
  height: 58px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0.4)),
    to(transparent)
  );
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, transparent);
}

.room-img {
  position: relative;
  overflow: hidden;
  min-height: 48px;
}

.channel-list-bottom {
  height: 48px;
  display: flex;
}

#rpanel-tab .nav-link {
  display: block;
}

.btn-sm-round {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  align-self: center;
}

.page-content-wrapper .topbar {
  padding-left: 10px;
  padding-right: 10px;
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--panel-bg, #f8fafc);
}

.dark .page-content-wrapper .topbar,
.trueblue .page-content-wrapper .topbar {
  background: var(--dark-bg, #111827);
}

.rotate {
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.rotate.down {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.top-channel-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100% !important;
  width: auto;
}

.guest-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(95, 103, 115, 0.12);
  border: 1px solid rgba(95, 103, 115, 0.25);
  border-radius: 999px;
  padding: 2px 6px;
}

.guest-user-badge.guest-user-badge--inline {
  margin-left: 4px;
  vertical-align: middle;
}


.top-channel-name .guest-user-badge {
  margin-left: 6px;
}

.profile-popup-name .guest-user-badge {
  margin-left: 6px;
}

.hidden {
  display: none !important;
}

.cht {
  clear: both;
  float: left;
  width: 100%;
  font-size: 15.2px;
  display: flex;
  position: relative;
  margin-bottom: 6px;
  word-break: break-word;
}

.cht .message-data {
  display: inline-block;
  border-radius: 5px;
  max-width: 255px;
  line-height: 1;
  margin-bottom: 0px;
  position: relative;
}

@media (max-width: 768px) {
  .cht .message-data {
    max-width: 85vw;
  }
}

.cht.sent {
  justify-content: flex-end;
}

#main-room.chat-own-left-mode .cht.sent,
.group-chat.chat-own-left-mode .cht.sent {
  justify-content: flex-start;
}

.cht .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.cht.sent .avatar {
  margin-left: 8px;
  order: 3;
  flex-shrink: 0;
}

#main-room.chat-own-left-mode .cht.sent .avatar,
.group-chat.chat-own-left-mode .cht.sent .avatar {
  margin-left: 0;
  margin-right: 8px;
  order: 0;
}

.cht.replies .avatar {
  margin-right: 8px;
  order: 0;
  flex-shrink: 0;
}

.cht.sent .message-data,
.sent .video-link,
.sent .link-meta {
  color: #f5f5f5;
}

.cht.sent .message-data {
  order: 2;
  position: relative;
  flex-shrink: 1;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#main-room.chat-own-left-mode .cht.sent .message-data,
.group-chat.chat-own-left-mode .cht.sent .message-data {
  order: 1;
}

#main-room.chat-own-left-mode .cht.sent .chat-actions,
.group-chat.chat-own-left-mode .cht.sent .chat-actions {
  order: 2;
  margin-left: 10px !important;
  margin-right: 0 !important;
  align-self: center;
}

#main-room.chat-own-left-mode .cht.sent:hover .chat-actions,
.group-chat.chat-own-left-mode .cht.sent:hover .chat-actions {
  margin-left: 10px !important;
  margin-right: 0 !important;
}

#main-room.chat-own-left-mode .cht.sent .message-status,
.group-chat.chat-own-left-mode .cht.sent .message-status {
  position: static;
  right: auto;
  bottom: auto;
  order: 3;
  margin-left: 8px;
}

#main-room.chat-own-left-mode .cht.sent .message-time,
.group-chat.chat-own-left-mode .cht.sent .message-time {
  order: 4;
  margin-left: 8px;
  margin-right: 0;
}

#main-room.chat-own-left-mode .sent .message-data:before,
.group-chat.chat-own-left-mode .sent .message-data:before {
  display: none;
}

.message-data.grp small {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding-bottom: 3px;
}

.sent .message-data:before {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  right: -4px;
  left: auto;
  top: 0px;
  bottom: auto;
  border: 7px solid;
}

.replies .message-data:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: -4px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 7px solid;
}

.message-html,
.chat-img,
.chat-txt,
.chat-gif,
.chat-sticker {
  display: block;
  overflow: hidden;
}

:root {
  --chat-font-family: inherit;
  --chat-font-weight: 400;
  --chat-font-style: normal;
  --chat-font-size: 15px;
  --chat-media-scale: 0.75;
}

@media (max-width: 576px) {
  :root {
    --chat-media-scale: 0.8;
  }
}

.cht .message-data,
.cht .message-data .message-html,
.cht .message-data .chat-txt,
.cht .message-data .chat-code,
.cht .message-data .chat-fwd,
.cht .message-data .chat-replied-bubble,
.cht .message-data .file-caption,
.cht .message-data .link-meta,
.cht .message-data .link-meta-desc,
.cht .message-data .chat-link,
.cht .message-data .chat-link-block {
  font-family: var(--chat-font-family, inherit);
  font-weight: var(--chat-font-weight, 400);
  font-style: var(--chat-font-style, normal);
  font-size: var(--chat-font-size, 15px);
}

.message-status.read {
  color: #547fff;
}

.message-status {
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  color: #65676b;
  font-style: italic;
  margin-left: 4px;
  flex-shrink: 0;
}

.message-status-text {
  font-size: 11px;
  font-weight: 500;
}

.message-status.read .message-status-text {
  color: #547fff;
}

.message-edited {
  font-size: 10px;
  color: #6bb6ff;
  font-style: italic;
  margin-left: 6px;
  white-space: nowrap;
}

.message-edit-input {
  width: 100%;
  resize: vertical;
}

.message-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.message-edit-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--default-text-color, #1f2937);
}

.message-edit-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.message-edit-url-label {
  font-size: 11px;
  color: var(--muted-text-color, #6b7280);
  margin-bottom: -2px;
}

.message-edit-attachment {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-text-color, #6b7280);
  word-break: break-all;
}

.message-edit-attachment i {
  font-size: 14px;
}

.chat-font-settings {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 14px;
  padding-top: 14px;
}

.chat-font-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.chat-font-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.chat-font-row label {
  min-width: 90px;
  font-size: 13px;
  color: #6c757d;
}

.chat-font-toggles {
  gap: 16px;
}

.chat-font-preview {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  font-family: var(--chat-font-family, inherit);
  font-weight: var(--chat-font-weight, 400);
  font-style: var(--chat-font-style, normal);
  font-size: 13px;
  color: #111827;
}

html.dark .chat-font-preview,
html.trueblue .chat-font-preview {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Position status indicator like Facebook - under sent messages on the right */
.cht.sent {
  position: relative;
}

/* Match private chat spacing to group chats */
.private-chat .cht {
  margin-bottom: 22px;
}

/* Private chat: push first top message further down (double spacing) */
.private-chat .chat-scroll .messages.chats > .cht:first-child,
.private-chat .chat-scroll .messages.chats > .new-date:first-child + .cht {
  margin-top: 44px;
}

.cht.sent .message-status {
  position: absolute;
  right: 0;
  bottom: -18px;
  font-size: 11px;
}

.chat-txt {
  line-height: 19px;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  max-width: 100%;
  padding: 5px 10px 5px 10px;
  display: block;
  border-radius: 5px;
}

.chat-txt.join-announcement {
  color: #6495ed !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: 0.85em !important;
  text-align: center !important;
}

.cht .chat-txt.join-announcement {
  color: #6495ed !important;
}

/* Image and video notification links in group chats */
.image-notification-link,
.video-notification-link {
  color: #0066cc;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}

.image-notification-link:hover,
.video-notification-link:hover {
  color: #0052a3;
  text-decoration: underline;
}

/* Username mention highlighting - green and bold */
.username-mention {
  color: #28a745 !important;
  font-weight: bold !important;
}

.cht.replies .message-data small {
  color: #03a9f4 !important;
}

.cht .message-data small {
  display: block;
  font-weight: bold;
  color: #4e73df;
  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
}

.cht .message-data .sender-name {
  display: inline-block;
  width: auto;
  max-width: max-content;
  padding-right: 0;
}

.cht.replies[data-sender-user-type="1"] .sender-name,
.cht.replies[data-sender-user-type="1"] .username-mention,
.cht[data-chat-type="group"][data-sender-user-type="1"] .sender-name,
.cht[data-chat-type="group"][data-sender-user-type="1"] .username-mention {
  color: #ff8c00 !important;
}

.cht.sent .message-data .sender-name.sender-name-own-inline {
  display: inline;
  padding: 0 4px 0 6px;
  vertical-align: middle;
}

.cht.sent .message-data .sender-name.sender-name-own-inline + .message-html {
  display: inline-block;
  vertical-align: middle;
}

.message-data.grp .message-html > div {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  padding-top: 0px;
}

.sent .forward-check {
  margin-right: auto;
}

.forward-check {
  display: flex;
  padding-left: 8px;
}

.new-date p {
  text-align: center;
  width: 100%;
  max-width: unset !important;
}

figure {
  margin: 0;
}

.chat-img-grp .chat-img img {
  border-radius: 0px;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: center;
}

.chat-img-grp .chat-img:nth-child(1) img {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.chat-img-grp .chat-img:nth-child(2) img {
  border-bottom-left-radius: 5px;
}

.chat-img-grp .chat-img:nth-child(3) img {
  border-bottom-right-radius: 5px;
}

.chat-img-grp .chat-img:nth-child(n + 2) {
  display: inline-block;
  width: 50%;
}

.chat-img-grp .chat-img:nth-child(n + 2) img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: center;
}

.chat-img-sgl img {
  border-radius: 5px;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: center;
}

.chat-img-duo img {
  border-radius: 5px;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: center;
}

.chat-img-duo figure:nth-child(1) {
  margin-bottom: 5px;
}

.chat-img.more {
  position: relative;
}

.more-ovrlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f3f3f3;
  font-size: 24px;
  border-bottom-right-radius: 5px;
}

.chat-img-duo .chat-img:nth-child(1) {
  margin-bottom: 5px;
}

.chat-img-duo,
.chat-img-grp,
.chat-img-sgl,
.chat-gif {
  padding: 5px !important;
  border-radius: 5px;
}

.chat-gif {
  display: block;
  width: fit-content;
  max-width: calc(300px * var(--chat-media-scale, 1));
  box-sizing: border-box;
}

.cht.sent .chat-gif {
  margin-left: auto;
}

.chat-img-sgl {
  height: 100%;
}

.chat-img-duo {
  height: 100%;
}

.chat-img-grp {
  max-width: calc(240px * var(--chat-media-scale, 1));
  height: 100%;
}

.chat-gif img,
.sent div.chat-gif img {
  display: block;
  object-fit: contain !important;
  object-position: center;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(260px * var(--chat-media-scale, 1));
  box-sizing: border-box;
}

.chat-img-sgl img,
.chat-img-duo img,
.chat-img-grp .chat-img img,
.chat-img-grp .chat-img:nth-child(n + 2) img,
.chat-gif-img {
  object-fit: contain !important;
  object-position: center !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

.file-section {
  display: inline-block;
  padding: 10px !important;
  color: #fff;
  position: relative;
  width: 220px;
  border-radius: 5px;
  height: 52px;
}

.file-header {
  display: flex;
  outline: none;
}

.file-icon {
  min-width: 30px;
  margin-right: 5px;
  align-self: flex-start;
  position: relative;
  font-size: 32px;
}

.file-description {
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  width: 60%;
  line-height: 1.2;
}

.file-title {
  display: block;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  margin: -4px 0;
  display: -webkit-box;
  overflow: hidden;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.file-meta {
  line-height: 1;
}

.file-meta-entry {
  white-space: nowrap;
  margin-top: 4px;
}

.file-meta-swap {
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  white-space: nowrap;
  font-size: 12px;
}

.file-actions {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 10px;
}

.file-download-icon {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: #8bc34a;
}

.file-download-icon:hover {
  color: #47b9cc;
}

.file-action-buttons {
  text-decoration: none;
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  position: relative;
  background: rgba(0, 0, 0, 20%);
}

.chat-files-block:nth-child(n + 2) .file-section {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  margin-top: 3px;
}

.chat-code {
  padding: 5px;
  display: block;
  border-radius: 5px;
  line-height: 19px;
  white-space: pre-line;
  position: relative;
  overflow: hidden;
}

code[class*="language-"],
pre[class*="language-"] {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.chat-code > pre {
  border-radius: 5px !important;
  margin: 0 !important;
}

.code-caption {
  padding-top: 5px;
  display: flex;
  align-self: center;
}

.code-lang {
  display: inline-block;
  padding: 3px 5px;
  background: #36b9cc;
  font-size: 11px;
  line-height: 1;
  overflow: hidden;
  min-width: 30px;
  max-height: 17px;
  white-space: nowrap;
  color: #fff;
  border-radius: 2px;
}

.code-title {
  display: flex;
  align-self: center;
  margin-left: 5px;
}

@media screen and (min-width: 735px) {
  .cht .message-data {
    max-width: 100%;
  }
}

.green-audio-player {
  width: 200px;
  height: 32px;
  box-shadow: 0 4px 16px 0 rgb(0 0 0 / 7%);
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 4px !important;
  user-select: none;
  background-color: #fff;
  box-sizing: border-box;
  outline: none;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.green-audio-player.player-accessible .play-pause-btn:hover,
.green-audio-player.player-accessible .controls:hover,
.green-audio-player.player-accessible .volume__button:hover,
.green-audio-player.player-accessible .volume__controls:hover,
.green-audio-player.player-accessible .download:hover {
  outline: dotted 1px #999;
}

.green-audio-player svg,
.green-audio-player img {
  display: block;
  width: 10px;
}

.green-audio-player .holder {
  position: relative;
}

.green-audio-player .holder .loading .loading__spinner {
  position: absolute;
  left: -3px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  border: 2px solid #b0b0b0;
  border-right-color: rgba(0, 0, 0, 0);
  border-radius: 50%;
  animation: spin 0.4s linear infinite;
}

.green-audio-player .holder .play-pause-btn {
  visibility: hidden;
  cursor: pointer;
  outline: none;
}

.green-audio-player .holder .play-pause-btn:focus {
  outline: none;
}

.green-audio-player .slider {
  flex-grow: 1;
  background-color: #d8d8d8;
  cursor: pointer;
  position: relative;
}

.green-audio-player .slider .gap-progress {
  background-color: #44bfa3;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
}

.green-audio-player .slider .gap-progress .pin {
  height: 10px;
  width: 10px;
  border-radius: 8px;
  background-color: #44bfa3;
  position: absolute;
  pointer-events: all;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.32);
}

.green-audio-player .slider .gap-progress .pin::after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0);
  width: 200%;
  height: 200%;
  margin-left: -50%;
  margin-top: -50%;
  border-radius: 50%;
}

.green-audio-player .controls {
  font-size: 10px;
  line-height: 18px;
  color: #55606e;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  outline: none;
  position: relative;
  margin-top: -11px !important;
}

.green-audio-player .controls .controls__slider {
  margin-left: 16px;
  border-radius: 2px;
  height: 4px;
}

.green-audio-player .controls .controls__slider .controls__progress {
  width: 0;
  height: 100%;
}

.green-audio-player
  .controls
  .controls__slider
  .controls__progress
  .progress__pin {
  right: -8px;
  top: -3px;
}

.green-audio-player .controls span {
  cursor: default;
}

.green-audio-player .controls:focus {
  outline: none;
}

.green-audio-player .volume {
  position: relative;
  display: none;
}

.green-audio-player .volume .volume__button {
  cursor: pointer;
  outline: none;
}

.green-audio-player .volume .volume__button:focus {
  outline: none;
}

.green-audio-player .volume .volume__button.open path {
  fill: #44bfa3;
}

.green-audio-player .volume .volume__controls {
  width: 30px;
  height: 135px;
  background-color: rgba(0, 0, 0, 0.62);
  border-radius: 7px;
  position: absolute;
  left: -3px;
  bottom: 52px;
  flex-direction: column;
  align-items: center;
  display: flex;
  z-index: 2;
  outline: none;
}

.green-audio-player .volume .volume__controls .volume__slider {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 6px;
  border-radius: 3px;
}

.green-audio-player
  .volume
  .volume__controls
  .volume__slider
  .volume__progress {
  bottom: 0;
  height: 100%;
  width: 6px;
}

.green-audio-player
  .volume
  .volume__controls
  .volume__slider
  .volume__progress
  .volume__pin {
  left: -5px;
  top: -8px;
}

.green-audio-player .volume .volume__controls:focus {
  outline: none;
}

.green-audio-player .volume .volume__controls.hidden {
  display: none;
}

.green-audio-player .volume .volume__controls.top {
  bottom: 52px;
  left: -3px;
}

.green-audio-player .volume .volume__controls.middle {
  bottom: -54px;
  left: 54px;
}

.green-audio-player .volume .volume__controls.bottom {
  bottom: -164px;
  left: -3px;
}

.green-audio-player .download {
  display: none;
  margin-left: 16px;
  cursor: pointer;
  outline: none;
}

.green-audio-player .download:focus {
  outline: none;
}

.green-audio-player:focus {
  outline: none;
}

.message__offscreen {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

span.controls__current-time {
  position: absolute;
  bottom: -20px;
  left: 14px;
}

span.controls__total-time {
  position: absolute;
  bottom: -20px;
  right: 0;
}

.chat-audio {
  padding: 3px !important;
  position: relative;
  width: 220px;
  border-radius: 5px;
  height: 38px;
  display: flex;
  align-items: center;
}

.audio-icon {
  padding: 7px 10px;
  background: #44607b;
  margin: 0;
  color: #ffffff;
  border-radius: 5px;
  font-size: 18px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
}

.sent .audio-icon {
  background: #566574;
  color: #ffffff;
}

.chat-replied-bubble {
  padding-top: 5px;
  border-radius: 5px;
}

.fwd-label {
  font-style: italic;
  font-size: 12px;
  opacity: 0.8;
}

.chat-fwd {
  padding: 5px 10px 5px 10px;
  border-radius: 5px;
}

.chat-fwd > div {
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
}

.chat-link-block img {
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  max-width: calc(250px * var(--chat-media-scale, 1));
  height: auto;
  max-height: calc(141px * var(--chat-media-scale, 1));
  object-fit: contain;
  object-position: center;
}

.link-meta {
  display: inline-block;
  padding: 10px !important;
  background: #00bcd4;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 100%;
}

.link-preview {
  margin-top: 5px;
  cursor: pointer;
  width: calc(250px * var(--chat-media-scale, 1));
  position: relative;
}

.link-preview.preview-loading {
  overflow: hidden;
}

.link-preview.preview-loading:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 200% 100%;
  animation: loading-placeholder 1.2s ease-in-out infinite;
  pointer-events: none;
}

.chat-inline-youtube {
  margin-top: 5px;
  width: calc(250px * var(--chat-media-scale, 1));
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  background: #000;
}

.chat-inline-youtube iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.link-preview b {
  line-height: 1.2;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 32px;
}

.link-meta-desc {
  font-size: 12px;
  line-height: 1.2;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 32px;
  overflow: hidden;
}

.sent .link-preview {
  float: right;
}

.video-section {
  display: inline-block;
  padding: 5px !important;
  position: relative;
  border-radius: 5px;
  transition: 0.3s;
}

.video-link {
  color: #fff;
  transition: 0.3s;
}

.video-thumb {
  object-fit: cover;
  object-position: center;
  width: calc(255px * var(--chat-media-scale, 1));
  height: calc(155px * var(--chat-media-scale, 1));
  border-radius: 5px;
}

.video-section .video-link:before {
  top: 30%;
}

.video-link:before {
  font-family: "tabler-icons" !important;
  content: "\f691";
  position: absolute;
  z-index: 9;
  top: 20%;
  text-align: center;
  width: 100%;
  font-size: 64px;
  color: #36b9cc;
}

.flex-flow-col {
  display: flex !important;
  flex-flow: column;
  height: 100%;
}

.message-data:hover + .chat-actions {
  opacity: 1;
}

.reactions {
  position: relative;
}

.chat-reactions {
  line-height: 1;
}

.chat-reactions i:hover {
  opacity: 1 !important;
}

.reactions .reaction-btn {
  cursor: pointer;
}

.cht.reaction-pending .reaction-btn {
  opacity: 0.65;
  transform: scale(0.96);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.cht.reaction-pending .message-data {
  animation: reaction-pending-pulse 0.9s ease-in-out infinite;
}

@keyframes reaction-pending-pulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

.reactions .popover-body {
  padding: 0.5rem 0.75rem;
}

.reaction-box .reaction-icon {
  width: 33px;
  height: 33px;
  display: inline-block;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translate(0, 100px) scale(0);
  background-size: 33px 33px;
  cursor: pointer;
}

.reaction-box .reaction-icon label {
  padding: 3px 5px 3px 5px;
  position: relative;
  top: -24px;
  border-radius: 10px;
  font-size: 9px;
  color: #fff;
  background: #333;
  visibility: hidden;
  width: max-content;
}

.reaction-box .reaction-icon.show {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.reaction-box .reaction-icon:hover {
  transform: scale(1.4);
  transform-origin: bottom;
}

.reaction-icon.active {
  border-bottom: 2px solid #03a9f4;
}

.reaction-icon:hover label {
  visibility: visible;
}

.react-1 {
  background-image: url(../../media/reactions/react_1.gif);
}

.react-2 {
  background-image: url(../../media/reactions/react_2.gif);
}

.react-3 {
  background-image: url(../../media/reactions/react_3.gif);
}

.react-4 {
  background-image: url(../../media/reactions/react_4.gif);
}

.react-5 {
  background-image: url(../../media/reactions/react_5.gif);
}

.react-6 {
  background-image: url(../../media/reactions/react_6.gif);
}

.react-7 {
  background-image: url(../../media/reactions/react_7.gif);
}

.current-react {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  width: 18px;
  height: 18px;
  background-size: 18px;
  background-repeat: no-repeat;
  cursor: pointer;
  margin: 1px;
}

.list-react {
  position: relative;
  overflow: hidden;
  width: 22px;
  height: 22px;
  background-size: 22px;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-right: 3px;
  display: flex;
  align-items: center;
}

.current-react-1 {
  background-image: url(../../media/reactions/static_react_1.png);
}

.current-react-2 {
  background-image: url(../../media/reactions/static_react_2.png);
}

.current-react-3 {
  background-image: url(../../media/reactions/static_react_3.png);
}

.current-react-4 {
  background-image: url(../../media/reactions/static_react_4.png);
}

.current-react-5 {
  background-image: url(../../media/reactions/static_react_5.png);
}

.current-react-6 {
  background-image: url(../../media/reactions/static_react_6.png);
}

.current-react-7 {
  background-image: url(../../media/reactions/static_react_7.png);
}

.message-data.has-reactions {
  margin-bottom: 20px !important;
  padding-bottom: 5px;
}

.current-reacts-count {
  font-size: 11px;
  margin-left: 5px;
  margin-right: 5px;
  color: #ffffff;
}

.sent .current-reacts {
  float: right;
  right: 0;
  margin: auto 0px auto 3px;
}

.replies .current-reacts {
  left: 0;
  border-top-right-radius: 6px !important;
  border-top-left-radius: 6px !important;
  padding-top: 5px !important;
  margin: auto 3px auto 0px;
}

.current-reacts {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 3px 3px;
  border-radius: 6px;
  bottom: -20px;
  position: absolute;
  width: max-content;
  margin: auto 3px;
  background: #607d8b;
}

.filter-reaction-list {
  display: flex;
}

.filter-btn.active {
  box-shadow: 0px 0px 6px 2px #36b9cc;
}

.list-reacts {
  display: inline-flex;
  margin-left: auto;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 25px;
  margin-right: 5px;
  padding: 0px 6px;
  white-space: nowrap;
}

.filter-reaction {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.react-avatar {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  overflow: hidden;
  margin-right: 10px;
}

.remove-react {
  margin-left: 10px;
  transition: 0.3s;
  cursor: pointer;
}

.filter-reaction .list-react {
  margin-left: 10px;
  border-radius: 5px;
}

.chat-actions.active {
  opacity: 1;
  position: relative;
  z-index: 1060;
}

.chat-actions .dropdown-menu {
  z-index: 1061;
}

.cht.message-actions-open {
  z-index: 2005;
}

.sent .chat-actions {
  margin-right: 10px;
}

.chat-actions i {
  cursor: pointer;
  font-size: 20px;
  color: #626976;
}

.chat-actions i:hover {
  color: #1e293b;
}

.chat-actions {
  display: flex;
  align-items: center;
  color: #d1d5d7;
  opacity: 0;
  font-size: 18px;
  transition: 0.3s;
}

.replies .chat-actions {
  margin-left: 10px;
}

.replies:hover .chat-actions {
  opacity: 1;
  margin-left: 10px;
}

.sent:hover .chat-actions {
  opacity: 1;
  margin-right: 10px;
}

.chat-actions .fas.fa-ellipsis-v:hover {
  color: #607d8b;
}

#video-embed-content iframe,
#video-embed-content video {
  width: 100%;
}

#video-modal-2 .close,
#video-modal .close {
  padding: 0;
  background: #f44336;
  color: #fff;
  opacity: 1;
  font-weight: normal;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

#video-modal .modal-body,
#video-modal-2 .modal-body {
  position: relative;
  padding: 0px;
}

#video-modal .modal-content,
#video-modal-2 .modal-content {
  border: none;
  background: rgba(0, 0, 0, 0);
}

#video-iframe {
  width: 520px;
  height: 300px;
}

#video-modal-2 .modal-header,
#video-modal .modal-header {
  border: none;
  justify-content: end;
  background: none;
  padding: 0;
}

.file-uploader {
  display: none;
  position: absolute;
  background: #141b20;
  width: 60%;
  bottom: 0;
  height: calc((var(--vh, 1vh) * 100) - 60px);
  height: calc((var(--vh, 1vh) * 100) - 60px);
  padding: 5px;
  z-index: 999;
}

.file-uploader-close {
  position: absolute;
  right: 10px;
  z-index: 9;
}

.file-uploader-close i {
  padding: 5px;
  background: red;
  border-radius: 50%;
  line-height: 9px;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
}

a.uppy-Dashboard-poweredBy {
  display: none;
}

.message-time {
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  color: #6c757d;
  margin-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.cht.sent .message-time {
  order: 4;
  opacity: 0;
}

.cht.replies .message-time {
  order: 4;
  opacity: 0;
}

.cht.sent .message-status {
  margin-left: 8px;
  order: 5;
  flex-shrink: 0;
}

.cht.replies .message-status {
  margin-left: 8px;
  order: 5;
  flex-shrink: 0;
}

/* Desktop: Show timestamp on hover */
@media (min-width: 769px) {
  .cht:hover .message-time,
  .cht.active .message-time {
    opacity: 0.7;
  }
}

/* Mobile: Always show timestamp */
@media (max-width: 768px) {
  .cht .message-time,
  .cht:hover .message-time,
  .cht.active .message-time {
    opacity: 0.7;
  }
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
  /* Mobile: Always show timestamp */
  .cht .message-time,
  .cht:hover .message-time,
  .cht.active .message-time {
    opacity: 1 !important;
    font-size: 9px;
  }

  .cht.sent .message-time {
    margin-left: 4px;
  }

  .cht.replies .message-time {
    margin-right: 4px;
  }

  /* Mobile: Hide all chat actions completely for full-width messages */
  .chat-actions {
    display: none !important;
  }

  .cht.sent .message-status {
    margin-left: 4px;
  }

  .cht.replies .message-status {
    margin-right: 4px;
  }
}

.messages {
  padding: 15px;
  padding-bottom: 2px;
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  min-width: 320px;
}

img.img-profile {
  width: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  height: 32px;
}

.user-row {
  padding: 5px 8px;
  cursor: pointer;
  transition: 0.3s;
}

.private-list .user-row {
  position: relative;
}

.private-list {
  padding: 6px 8px 12px;
}

.private-list .user-row {
  background: #ffffff;
  border: none;
  border-radius: 12px;
  margin: 0;
  padding: 9px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.private-list .user-row:hover {
  background: #f5f7fb;
  border-color: transparent;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
}

.private-list .user-row.is-active {
  background: #e7f3ff;
  box-shadow: 0 0 0 1px rgba(24, 119, 242, 0.22), 0 4px 10px rgba(24, 119, 242, 0.12);
}

.private-list .user-row .d-flex {
  align-items: flex-start;
  width: 100%;
}

.private-favorites-block,
.private-conversations-block {
  margin-bottom: 10px;
}

.private-favorites-header,
.private-conversations-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-text-color, #64748b);
  padding: 6px 10px;
}

.private-favorites-list,
.private-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.private-list > .user-row + .user-row {
  margin-top: 9px;
}

.private-list .private-favorites-block {
  background: var(--panel-bg, #f7f8fa);
  border-radius: 12px;
  padding: 6px;
}

.private-list .private-favorites-block .user-row {
  background: var(--input-bg, #ffffff);
  border-radius: 8px;
}

.private-list .private-bulk-select-cell {
  display: inline-flex;
  align-items: flex-start;
  flex: 0 0 auto;
}

.private-list .private-bulk-checkbox {
  cursor: pointer;
}

.private-list.private-bulk-mode .user-row {
  opacity: 0.72;
  box-shadow: none;
}

.private-list.private-bulk-mode .user-row.private-bulk-selected {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--tblr-primary);
}

.private-list.private-bulk-mode .user-row.private-bulk-selected:hover {
  box-shadow: 0 0 0 2px var(--tblr-primary);
}

.private-actions {
  display: none;
  align-items: center;
  gap: 6px;
}

.private-list .private-actions {
  display: flex;
}

.private-actions button {
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 8px;
  color: #94a3b8;
  line-height: 1;
}

.private-actions button:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #1e293b;
}

.private-favorite-toggle.is-active {
  color: #f59e0b;
}

.room-users .private-actions,
.group-users .private-actions {
  display: none;
}

.private-actions-menu,
.mobile-dm-conversation-actions {
  position: relative;
}

.private-actions-menu > .dropdown-menu {
  z-index: 1092;
}

@media (max-width: 991.98px) {
  .private-actions-menu > .dropdown-menu {
    top: 0 !important;
    left: auto !important;
    right: calc(100% + 6px) !important;
    margin-top: 0 !important;
    max-width: calc(100vw - 16px);
  }
}

.private-list .channel-user-image {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  position: relative;
}

.private-list .channel-user-image img,
.private-list .channel-user-image .user-list-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #e4e6eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
  object-fit: cover;
  transition: border-color 0.15s ease;
}

.private-list .user-row:hover .channel-user-image img,
.private-list .user-row:hover .channel-user-image .user-list-avatar {
  border-color: #c0c4cc;
}

.private-list .channel-user-details {
  gap: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 6px;
}

.private-list .channel-user-name {
  font-weight: 700;
  font-size: 13px;
  color: #6eb5ff;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  max-height: calc(1.2em * 3);
  min-width: 0;
  max-width: 100%;
}

.private-list .guest-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(95, 103, 115, 0.12);
  border: 1px solid rgba(95, 103, 115, 0.25);
  border-radius: 999px;
  padding: 2px 6px;
  margin-left: 4px;
}

.guest-user-badge-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.guest-user-badge-line .guest-user-badge {
  margin-left: 0;
}

.room-users .guest-user-badge,
.group-users .guest-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(95, 103, 115, 0.12);
  border: 1px solid rgba(95, 103, 115, 0.25);
  border-radius: 999px;
  padding: 2px 6px;
  margin-left: 4px;
}

/* Gender colors for private conversation list */
.private-list .user-row[data-user-sex="1"] .channel-user-name {
  color: #2196f3;
}

.private-list .user-row[data-user-sex="2"] .channel-user-name {
  color: #e91e63;
}

.private-list .user-row[data-user-user_type="1"] .channel-user-name {
  color: #ff8c00;
}

.private-list .user-status {
  font-size: 12px;
  color: #5f6773;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-height: calc(1.25em * 2);
  max-width: 100%;
}

.private-list .online-status .ti {
  font-size: 9px;
}

.private-list .unread-indicator.active {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1877f2;
  box-shadow: 0 0 0 2px #fff;
}

.private-list .user-mute-icon {
  display: none;
}

.private-list .user-name-row {
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 2px;
  gap: 5px;
}

.private-list .private-message-time {
  font-size: 11px;
  font-weight: 600;
  color: #8a94a6;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.private-list .user-row.is-active .private-message-time {
  color: #2f5f9e;
}

html.dark .private-list .user-row,
html.trueblue .private-list .user-row {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

html.dark .private-list .user-row:hover,
html.trueblue .private-list .user-row:hover {
  background: rgba(255, 255, 255, 0.09);
}

html.dark .private-list .user-row.is-active,
html.trueblue .private-list .user-row.is-active {
  background: rgba(24, 119, 242, 0.25);
  box-shadow: 0 0 0 1px rgba(24, 119, 242, 0.4);
}

/* User actions dropdown */
.user-actions-dropdown {
  padding: 2px 6px;
  min-width: auto;
}

.user-actions-dropdown i {
  font-size: 14px;
}

.dropdown-menu .dropdown-item {
  padding: 4px 12px;
  font-size: 13px;
}

.dropdown-menu .dropdown-item i {
  font-size: 16px;
}

.height-scroll {
  height: calc((var(--vh, 1vh) * 100) - 48px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.height-scroll-rpanel {
  height: calc((var(--vh, 1vh) * 100) - 90px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.user-status {
  font-size: 12px;
}

.channel-user-image {
  display: flex;
  align-items: center;
  position: relative;
}

.channel-user-details {
  align-items: center;
  display: flex;
}

.user-type-badge {
  text-transform: UPPERCASE;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1;
  vertical-align: middle;
  color: #fff;
}

.user-type-badge.admin {
  background: #b34700;
  color: #ffffff;
  font-size: 10px;
  padding: 2px 6px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.user-type-badge.mod {
  background: #ff7043;
}

.user-type-badge.creator {
  background: #4e73df;
}

.user-type-badge.room-mod {
  background: #1cc88a;
}

.user-type-badge.vip {
  background: #28a745;
}

/* VIP User Display Name - Green */
.channel-user-details .vip-user {
  color: #28a745 !important;
  font-weight: 600;
}

.fa-gender.fa-venus {
  color: #e91e63;
}

.fa-gender.fa-mars {
  color: #00bcd4;
}

.user-row:hover {
  background: #caced2;
}

.user-popover .popover-body {
  padding: 0;
}

.user-popover .card {
  border: none;
}

.user-popover {
  overflow: hidden;
}

.user-popover-image {
  position: absolute;
  top: 90px;
  width: 40px;
  height: 40px;
  right: 15px;
  border: 2px solid #fff;
  border-radius: 5px;
}

.user-info-panel .user-card {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.user-info-panel {
  padding-top: 0;
}

.private-right-panel {
  padding-top: 0;
  box-sizing: border-box;
  position: relative;
}

.private-right-panel .user-info-panel {
  margin-top: 0;
  padding-top: 0;
}

.private-right-panel .user-card .card-body {
  padding-top: 0.75rem;
}

.user-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f4f6f8;
}

.user-card-title .user-title {
  font-size: 18px;
  margin: 0 0 4px;
}

.user-card-status {
  font-size: 12px;
  line-height: 1.35;
}

.user-badges-row {
  gap: 8px;
  row-gap: 8px;
}

.user-meta-row {
  padding: 4px 0;
}

.user-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.webcam-panel {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.webcam-title {
  font-size: 16px;
  font-weight: 700;
}

.webcam-title .ti {
  font-size: 18px;
}

.webcam-action {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.private-quick-actions {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.quick-actions-title {
  font-size: 16px;
  font-weight: 700;
}

.quick-actions-help,
.quick-actions-target {
  line-height: 1.35;
}

.private-quick-btn {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  border-radius: 10px;
  color: #111;
}

@media (max-width: 768px) {
  body.sb-rightnav-toggled #wrapper .private-right-panel::after {
    content: "\2304";
    position: absolute;
    left: 50%;
    bottom: calc(54px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    color: var(--muted-text-color, #64748b);
    background: color-mix(in srgb, var(--panel-bg, #ffffff) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color, #d8dee6) 75%, transparent);
    pointer-events: none;
    z-index: 3;
    animation: privateSwipeHintBounce 1.25s ease-in-out infinite;
  }

  .private-right-panel .user-info-panel {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .private-right-panel .private-quick-actions {
    margin-top: 0.5rem !important;
    padding: 0.5rem !important;
  }

  .private-right-panel .private-quick-actions .d-grid.gap-2 {
    gap: 0.4rem !important;
  }

  .private-right-panel .webcam-action,
  .private-right-panel .private-quick-btn {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
  }

  .private-right-panel .webcam-action i,
  .private-right-panel .private-quick-btn i {
    font-size: 14px;
  }
}

@keyframes privateSwipeHintBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) translateY(4px);
    opacity: 1;
  }
}

.webcam-action i,
.private-quick-btn i {
  color: currentColor;
}

html.dark .private-right-panel .webcam-action,
html.dark .private-right-panel .private-quick-btn,
html.trueblue .private-right-panel .webcam-action,
html.trueblue .private-right-panel .private-quick-btn {
  color: #fff;
}

html.light .private-right-panel .webcam-action,
html.light .private-right-panel .private-quick-btn,
body.theme-light .private-right-panel .webcam-action,
body.theme-light .private-right-panel .private-quick-btn {
  color: #111;
}

.private-quick-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.private-messages {
  padding: 10px;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.sidebarToggle {
  min-width: 72px;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  background: linear-gradient(155deg, #ffffff 0%, #e8edf5 100%);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--panel-bg, #ffffff) 92%, #ffffff 8%) 0%,
    color-mix(in srgb, var(--panel-bg, #ffffff) 84%, var(--chat-accent, var(--accent-color, #3b82f6)) 16%) 100%
  );
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sidebarToggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
}

.sidebarToggle .sidebar-toggle-icon {
  color: var(--default-text-color, #1f2937);
}

.sidebarToggle .chatrum-label {
  color: var(--muted-text-color, #64748b) !important;
  font-weight: 700;
}

.sidebarToggle.is-left-collapsed {
  background: linear-gradient(155deg, #eaf2ff 0%, #dbeafe 100%);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--panel-bg, #ffffff) 82%, var(--chat-accent, var(--accent-color, #3b82f6)) 18%) 0%,
    color-mix(in srgb, var(--panel-bg, #ffffff) 74%, var(--chat-accent, var(--accent-color, #3b82f6)) 26%) 100%
  );
}

.sidebarToggle.chatrum-toggle-modern {
  border-color: rgba(47, 179, 68, 0.34);
  background: linear-gradient(155deg, #f3fff5 0%, #dcfce7 100%);
  box-shadow:
    0 8px 18px rgba(22, 101, 52, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  width: 42px;
  height: 42px;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebarToggle.chatrum-toggle-modern.is-left-collapsed {
  background: linear-gradient(155deg, #ecfdf1 0%, #d1fae5 100%);
}

.sidebarToggle.chatrum-toggle-modern .sidebar-toggle-icon {
  color: #2f9e44 !important;
  filter: drop-shadow(0 1px 2px rgba(34, 139, 56, 0.3));
  font-size: 1.18rem !important;
  line-height: 1;
  margin: 0 !important;
}

.sidebarToggle.chatrum-toggle-modern .chatrum-label {
  display: none !important;
}

.open-inbox-middle {
  border-radius: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.open-inbox-middle:not(.is-left-collapsed) {
  background-color: rgba(59, 130, 246, 0.12);
  background-color: color-mix(in srgb, var(--chat-accent, var(--accent-color, #3b82f6)) 12%, transparent);
}

.dark .sidebarToggle,
.trueblue .sidebarToggle {
  background: linear-gradient(160deg, #1f2937 0%, var(--dark-bg, #232428) 100%);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--dark-bg, #232428) 90%, var(--chat-accent, #3b82f6) 10%) 0%,
    var(--dark-bg, #232428) 100%
  );
  border-color: rgba(125, 211, 252, 0.34);
  border-color: color-mix(in srgb, var(--chat-accent, #3b82f6) 34%, transparent);
}

.dark .sidebarToggle .sidebar-toggle-icon,
.trueblue .sidebarToggle .sidebar-toggle-icon {
  color: var(--accent-color-strong, var(--chat-accent, #7dd3fc));
}

.dark .sidebarToggle.chatrum-toggle-modern,
.trueblue .sidebarToggle.chatrum-toggle-modern {
  border-color: rgba(74, 222, 128, 0.42);
  background: linear-gradient(160deg, rgba(22, 101, 52, 0.36) 0%, rgba(15, 23, 42, 0.88) 100%);
}

.dark .sidebarToggle.chatrum-toggle-modern .chatrum-label,
.trueblue .sidebarToggle.chatrum-toggle-modern .chatrum-label {
  display: none !important;
}

.private-messages .private-item {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eee;
  border: 1px solid rgba(148, 163, 184, 0.34);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
}

.play-download-shortcut {
  overflow: visible;
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.play-shortcut-item {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.34);
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.play-shortcut-item .pill {
  left: -8px;
}

.play-shortcut-item:hover .pill {
  height: 34px;
}

.play-shortcut-icon-shell {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(226, 232, 240, 0.96) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 14px rgba(30, 64, 175, 0.24);
}

.play-shortcut-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.play-shortcut-label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(7px, 2vw, 10px);
  color: #999;
  display: block;
  text-align: center;
}

.private-inbox-icon-shell {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    150deg,
    var(--chat-accent, var(--accent-color, #3b82f6)) 0%,
    var(--accent-color-strong, var(--chat-accent, #3b82f6)) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 14px rgba(30, 64, 175, 0.32);
}

.private-inbox-icon {
  font-size: 1.44rem;
  line-height: 1;
  color: #f8fafc;
}

.dark .private-messages .private-item,
.trueblue .private-messages .private-item {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--dark-bg, #232428) 88%, var(--chat-accent, #3b82f6) 12%) 0%,
    var(--dark-bg, #232428) 100%
  );
}

.dark .play-shortcut-item,
.trueblue .play-shortcut-item {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--dark-bg, #232428) 88%, var(--chat-accent, #3b82f6) 12%) 0%,
    var(--dark-bg, #232428) 100%
  );
}

.private-messages .private-item .unread-indicator {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--chat-room-unread-indicator);
  position: absolute;
  top: 8px;
  right: 2px;
  left: auto;
  transform: none;
  opacity: 0;
  pointer-events: none;
  display: block;
}

.private-messages .private-item .unread-indicator.active {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  opacity: 1;
}

.private-messages .private-item .room-unread-badge {
  display: none !important;
}

.private-item .room-unread-badge {
  top: -4px;
  right: -2px;
}

.main-tab-pane {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.main-tab-content {
  width: 100%;
}

.main-tab-pane.active {
  display: flex;
}

body.chat-window-mode #wrapper {
  height: var(--app-vh);
}

.chat-window-mode .room-bar,
.chat-window-mode #sidebar-wrapper,
.chat-window-mode .rightbar-wrapper,
body.chat-window-mode {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.chat-window-mode #wrapper {
  height: var(--app-vh);
  width: 100%;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-window-mode .room-bar,
.chat-window-mode #sidebar-wrapper,
.chat-window-mode .rightbar-wrapper,
.chat-window-mode .mobile-rightbar-toggle,
.chat-window-mode .navbar.topbar,
.chat-window-mode .mobile-bottom-nav {
  display: none !important;
}

.chat-window-mode .page-content-wrapper {
  height: var(--app-vh) !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.chat-window-mode .main-panel {
  height: var(--app-vh) !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.chat-window-mode .wrapper {
  height: var(--app-vh) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-window-mode .group-chat,
.chat-window-mode .private-chat {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.chat-window-mode .alert {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 8px 15px !important;
}

.chat-window-mode .room-notice {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-window-mode .chat-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

.chat-window-mode .messages {
  padding: 10px 15px;
  display: block;
  margin: 0;
  width: 100%;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.chat-window-mode .empty-state-message {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.chat-window-mode .room-editor {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #e0e3e6;
  background: #fff;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  min-height: 40px;
  z-index: 1000;
}

.chat-window-mode .editor-container {
  margin: 0 !important;
  padding: 6px 8px !important;
  min-height: 40px !important;
  height: auto !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  border: none !important;
  gap: 8px;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: nowrap;
}

.chat-window-mode .note-editor.note-frame {
  border-radius: 0 !important;
  border: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.chat-window-mode .note-editor.note-airframe .note-editing-area .note-editable,
.chat-window-mode .note-editor.note-frame .note-editing-area .note-editable {
  padding: 4px 6px !important;
  min-height: 24px !important;
  font-size: 15px !important;
  width: 100% !important;
}

.chat-window-mode .note-editor.note-frame .note-toolbar {
  display: none !important;
}

.chat-window-mode .note-editor.note-frame .note-statusbar {
  display: none !important;
}

.chat-window-mode .attachment-col,
.chat-window-mode .emoji-col {
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  flex-shrink: 0 !important;
  min-width: auto;
}

.chat-window-mode .attachments-container {
  display: none !important;
}

.chat-window-mode .editor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  html.chat-window-mode,
  body.chat-window-mode {
    height: 100%;
    width: 100%;
  }

  .chat-window-mode .editor-container {
    padding: 4px 6px !important;
    min-height: 36px !important;
  }

  .chat-window-mode .note-editor.note-airframe .note-editing-area .note-editable,
  .chat-window-mode .note-editor.note-frame .note-editing-area .note-editable {
    padding: 3px 4px !important;
    min-height: 20px !important;
    font-size: 14px !important;
  }

  .chat-window-mode .editor-icon {
    font-size: 18px !important;
  }

  .chat-window-mode .room-editor {
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
}

.editor-container {
  padding: 5px 10px;
  /* border: 1px solid #e0e3e6; */
  border-radius: 10px;
  margin: 15px;
  display: flex;
  align-items: center;
  background-color: #ebedef;
  min-height: 42px;
  gap: 8px;
}

.note-editor.note-frame .note-statusbar {
  display: none;
}

.note-editable p {
  margin-bottom: 0;
}

.editor-container .note-editor.note-airframe .note-editing-area .note-editable,
.note-editor.note-frame .note-editing-area .note-editable {
  padding: 6px 8px 6px 10px !important;
  min-height: 24px;
}

.editor-container .note-editor.note-frame {
  border: none;
}

.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.editor-col {
  width: 100%;
}

.emoji-col {
  display: flex;
  align-items: center;
  gap: 4px;
}

.attachments-container {
  margin: 15px 15px 0px;
  border: 1px solid #e0e3e6;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
}

.attachments-container .tab-pane.active {
  height: 300px;
  display: flex !important;
  flex-flow: column;
}

.editor-icon {
  color: #4f5660;
  cursor: pointer;
  transition: 0.3s;
}

.editor-icon:hover {
  color: #2e3338;
}

@media (max-width: 768px) {
  .editor-container {
    margin: 4px 0 0 0;
    padding: 3px 8px;
    min-height: 36px;
    border-radius: 0;
  }

  .editor-container .note-editor.note-airframe .note-editing-area .note-editable,
  .note-editor.note-frame .note-editing-area .note-editable {
    padding: 3px 6px 3px 8px !important;
  }

  .attachment-col svg,
  .emoji-col svg,
  .editor-icon {
    width: 20px;
    height: 20px;
  }

  .attachments-container {
    margin: 10px 8px 0;
    padding: 8px;
  }
}

.dropup-menu-arrow:before {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0.75rem;
  display: block;
  background: inherit;
  width: 14px;
  height: 14px;
  transform: rotate(225deg);
  transform-origin: center;
  border: 1px solid;
  border-color: inherit;
  z-index: -1;
  clip: rect(0px, 9px, 9px, 0px);
}

.dropup-menu-arrow.dropup-menu-end:before {
  right: 0.75rem;
  left: auto;
}

.gifs {
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 5px;
}

.attachments-container #pills-gifs.tab-pane.active {
  display: flex !important;
  flex-direction: column;
}

.attachments-container #pills-gifs .gifs {
  flex: 1 1 auto;
  min-height: 220px;
}

.send-gif {
  border-radius: 5px;
  overflow: hidden;
  padding: 5px;
  height: max-content;
  cursor: pointer;
}

.send-gif img {
  border-radius: 5px;
}

.send-gif img:hover {
  border: 3px solid #03a9f4;
  border-radius: 5px;
}

.send-sticker img:hover {
  animation: pulse 1s;
}

.send-sticker {
  display: inline;
  cursor: pointer;
}

.sticker-list {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.attachments-container .nav-pills .nav-link.active,
.attachments-container .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #4f5660;
}

.attachments-container .nav-link {
  padding: 0.2rem 0.75rem;
}

.attachment-col svg {
  cursor: pointer;
}

.date-dropdowns {
  display: flex;
}

.day.form-select,
.month.form-select,
.year.form-select {
  margin-right: 8px;
}

.login-selector .nav-link {
  background: #eee;
}

.login-selector .nav-link.active {
  color: #ffffff;
  background-color: #393939;
}

.auth-body {
  background-color: #fff;
  overflow-y: auto !important;
}

/* Auth page logo sizing */
.auth-body .logo {
  max-height: 60px;
  width: auto;
  max-width: 280px;
}

/* Policy agree blocks (age + data consent checkboxes) */
.policy-agree-block .form-check-input {
  width: 18px;
  height: 18px;
  border: 2px solid #333 !important;
  background-color: #ffffff !important;
  accent-color: #10b981;
}

.policy-agree-block .form-check-label {
  color: #333;
  font-size: 12px;
  line-height: 1.4;
}

.policy-agree-block .form-check-label a {
  color: #0d6efd;
  text-decoration: underline;
}

.policy-agree-block .form-check-label a:hover {
  color: #0a58ca;
}

.ms-container {
  width: 100%;
}

.channel-options,
.cat-settings,
.cat-channel {
  opacity: 0;
}

.channel-item:hover .channel-options,
.channel-cat:hover .cat-settings,
.channel-cat:hover .cat-channel {
  opacity: 1;
}

.channel-options:hover i,
.cat-settings:hover i,
.cat-channel:hover i {
  font-weight: bold;
}

.channel-main.dropdown-open {
  z-index: 20;
}

.channel-main.dropdown-open .channel-options {
  opacity: 1;
}

.channel-main.dropdown-open .dropdown-menu {
  z-index: 1060;
}

.sidebar-room,
.sidebar-private,
.sidebar-room-stats,
.sidebar-discovery,
.sidebar-profile,
.sidebar-manage {
  display: none;
}

.topbar-private {
  position: relative;
  top: auto;
  background-color: #f8fafc;
  margin-left: 0;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disc-cat-row {
  color: #4e5058;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.disc-cat-row:hover {
  background-color: #e3e5e8;
}

.disc-cat-row.active {
  background-color: #5461f5;
  color: #ffffff;
}

.disc-cat-icon {
  display: flex;
  align-items: center;
}

.disc-cat-icon .ti {
  font-size: 22px;
}

.disc-cat-name {
  font-size: 16px;

  font-weight: 500;
  margin-left: 10px;
}

.disc-header {
  padding: 15px 15px 0px;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.disc-cat-list {
  margin: 8px;
}

.disc-slider .carousel {
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 3rem;
}

.disc-slider .carousel-item {
  height: 40rem;
}

.disc-slider .bd-placeholder-img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 40rem;
  object-fit: cover;
}

.slider-search-input {
  position: absolute;
  z-index: 999;
  width: 40%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.profile-section {
  padding: 1.75rem;
}

.room-list-row {
  margin-top: 16px;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.room-image {
  position: absolute;
  top: -30px;
  width: 48px;
  height: 48px;
  left: 15px;
  border: 4px solid #fff;
  border-radius: 15px;
}

.room-card .card-body {
  padding-top: 2rem;
  position: relative;
}

.room-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.room-card .card-img-top {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #f5f5f5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  height: auto;
}

.room-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

.chatroom-badge-overlay {
  display: inline-flex;
  width: auto;
  height: 48px;
  min-width: 60px;
  max-width: 220px;
  padding: 0 20px;
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.90);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  line-height: 48px;
  letter-spacing: 0.8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.chatroom-badge-overlay:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  background: rgba(11, 18, 32, 0.95);
}

.user-image {
  position: absolute;
  top: -35px;
  width: 70px;
  height: 70px;
  left: 15px;
  border: 4px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}

/* Override for private message profile area */
.pvt-profile-avatar-section .user-image {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
}

.user-title {
  position: absolute;
  top: 6px;
  left: 90px;
}

/* Override for private message profile area */
.pvt-profile-avatar-section .user-title {
  position: relative;
  top: auto;
  left: auto;
  margin-bottom: 10px;
}

.user-card .card-body {
  padding-top: 2rem;
  position: relative;
}

/* Override card-body padding for private message profile */
.pvt-profile-avatar-section {
  padding-top: 1.5rem !important;
}

.user-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: none;
}

.popover .user-card {
  display: block;
}

.user-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

/* Private right panel profile: keep avatar fully visible and centered */
.private-right-panel .user-card-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.private-right-panel .user-card-header .user-image,
.private-right-panel .user-card-header .user-card-avatar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto;
}

.private-right-panel .user-card-header .user-title,
.private-right-panel .user-card .user-title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0;
  text-align: center;
}

.room-stats {
  font-size: 12px;
}

.disc-panel-name,
.room-manage-icon,
.room-manage-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}

.carousel-caption {
  display: none;
}

.carousel-item {
  max-height: 400px;
}

.bd-placeholder-img {
  object-fit: cover;
  max-height: 400px;
}

.search-content {
  color: #ffffff;
}

.room-loop-link {
  text-decoration: none;
  color: inherit;
}

.room-loop-link:hover {
  text-decoration: none;
}

#rpanel-tab {
  background-color: #ebedef;
}

.right-panel .nav-pills .nav-link.active,
.right-panel .nav-pills .show > .nav-link {
  color: #ffffff;
  background-color: #a5a5a5;
  border-radius: 0;
}

.room-bar .ti {
  font-size: 22px;
}

.ti-12 {
  font-size: 12px;
}

.ti-24 {
  font-size: 24px;
}

.ti-22 {
  font-size: 22px;
}

.ti-20 {
  font-size: 20px;
}

.ti-18 {
  font-size: 18px;
}

.ti-bold {
  font-weight: bold;
}

.message-status .ti {
  font-size: 14px;
}

.top-channel-name .ti {
  font-size: 18px;
}

.form-selectgroup-input:checked + .room-cat-select-label {
  background: #5461f5;
  color: #fff;
}

.room-cat-select-label {
  width: 100%;
}

.flex-fill {
  flex: 1 1 auto !important;
}

label .icon {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  vertical-align: bottom;
  color: inherit;
}

.uppy-Dashboard--modal .uppy-Dashboard-inner {
  z-index: 2005;
}

.uppy-Dashboard--modal .uppy-Dashboard-overlay {
  background-color: #00000080;
  z-index: 2000;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (max-width: 576px) {
  .uppy-Dashboard--modal .uppy-Dashboard-inner {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc((var(--vh, 1vh) * 100) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .uppy-Dashboard--modal .uppy-Dashboard-innerWrap {
    min-height: auto !important;
    max-height: inherit !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .uppy-Dashboard--modal .uppy-Dashboard-AddFiles-title {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }

  .uppy-Dashboard--modal .uppy-Dashboard-note {
    display: none !important;
  }

  .uppy-Dashboard--modal .uppy-Dashboard-AddFiles,
  .uppy-Dashboard--modal .uppy-Dashboard-content,
  .uppy-Dashboard--modal .uppy-Dashboard-files {
    padding: 0.35rem !important;
  }

  .uppy-Dashboard--modal .uppy-Dashboard-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .uppy-Dashboard--modal .uppy-Dashboard-files {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .uppy-Dashboard--modal .uppy-StatusBar {
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0px)) !important;
    position: static !important;
    z-index: 2 !important;
    background: inherit !important;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.25)) !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  .uppy-Dashboard--modal .uppy-StatusBar-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .uppy-Dashboard--modal .uppy-StatusBar-actions {
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .uppy-Dashboard--modal .uppy-u-reset.uppy-c-btn,
  .uppy-Dashboard--modal .uppy-c-btn {
    min-height: 42px !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.84rem !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .uppy-Dashboard--modal .uppy-Dashboard-close {
    width: 40px !important;
    height: 40px !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    z-index: 3 !important;
  }

  .uppy-Dashboard--modal .uppy-caption {
    max-width: 100% !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
    padding: 0.35rem 0.45rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 380px) {
  .uppy-Dashboard--modal .uppy-Dashboard-inner {
    height: calc((var(--vh, 1vh) * 100) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

.modal-blur {
  background-color: #00000080;
}

.auth-center {
  width: 100%;
  max-width: 560px;
  margin: 32px auto;
  padding: 0 16px;
}

.auth-cover {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #f5f5f5;
  margin-bottom: 16px;
}

.auth-cover.auth-cover-small {
  height: 40px;
  margin: 8px auto 16px;
}

.auth-content {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.non-login-message,
.non-join-message,
.non-chat-select,
.user-restricted,
.permission-denied-editor,
.forward-selection {
  padding: 10px 10px;
  border-radius: 10px;
  margin: 15px;
  display: flex;
  align-items: center;
  background-color: #ebedef;
}

.non-login-message p,
.non-join-message p,
.non-chat-select p,
.user-restricted p,
.permission-denied-editor p,
.forward-selection p {
  margin-bottom: 6px;
  margin-top: 6px;
  align-self: center;
  margin-left: 15px;
}

.non-login-message img,
.non-join-message img,
.non-chat-select img,
.user-restricted img,
.permission-denied-editor img {
  width: 32px;
  align-self: center;
}

img.editor-emoji,
img.emoji {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  margin-right: 2px;
}

.is-typing {
  background: #ebedef;
  display: none;
  padding: 2px 15px 4px 15px;
  color: #607d8b;
  font-size: 12px;
  border-radius: 5px;
  margin-left: 15px;
  position: absolute;
  top: -27px;
}

.is-typing:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 6px solid #ebedef;
  border-right: 3px solid transparent;
  border-top: 6px solid #ebedef;
  border-bottom: 6px solid transparent;
  left: 0;
  bottom: -5px;
}

.unread-indicator.active {
  height: 10px;
}

.unread-indicator {
  height: 0px;
  width: 10px;
  border-radius: 0 5px 5px 0;
  position: absolute;
  left: 0;
  top: 50%;
  background-color: #060607;
  transform: translate(-50%, -50%);
}

.private-item .unread-indicator {
  left: -10px;
}

.channel-main {
  justify-content: center;
  position: relative;
  display: flex;
  flex-direction: column;
}

.chat-txt.deleted {
  font-size: 12px;
  font-style: italic;
}

.chat-txt.hidden {
  font-size: 12px;
  font-style: italic;
  background-color: #f8f9fa;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 5px 0;
}

.chat-txt.hidden .unhide-user-link {
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

.chat-txt.hidden .unhide-user-link:hover {
  color: #0a58ca;
}

.reply-msg-row {
  align-items: flex-end;
  background-color: #ebedef;
  box-sizing: border-box;
  display: flex;
  transition: transform 0.25s;
  padding: 5px 5px 10px 5px;
  margin: 15px 15px -22px 15px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.reply-msg-row-show {
  display: flex;
}

.reply-msg-row-hide {
  display: none;
}

.reply-msg-row .replied-to {
  width: 100%;
  text-align: left;
  color: #425158;
  display: flex;
  background-color: #dbdee0;
}

.reply-msg-row .close-reply-msg {
  background: transparent;
  border: 0;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  align-self: center;
}

.reply-msg-row .close-reply-msg i {
  font-size: 20px;
}

.replied-to {
  background-color: rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  overflow: hidden;
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
  border-radius: 5px !important;
}

.replies .replied-to {
  background-color: #fafafa;
  margin-bottom: 5px;
}

.grp .replied-to {
  margin-top: 5px !important;
  margin-bottom: 0;
}

.replied-border {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  flex: none;
  width: 4px;
  background-color: #7b7bd2;
}

.replied-content {
  padding: 4px 12px 8px 8px !important;
  display: flex;
  flex-grow: 1;
  align-items: center;
  min-height: 42px;
  max-height: 82px;
  overflow: hidden;
}

.replied-content-data {
  flex-grow: 1;
  overflow: hidden;
}

.replied-user {
  display: inline-flex;
  max-width: 100%;
  font-weight: 500;
  font-size: 12.8px;
  line-height: 22px;
}

.replied-html {
  display: -webkit-box;
  max-height: 44px;
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.replied-preview img {
  width: 60px;
  height: 60px;
}

.forwarding .cht:hover,
.forwarding .selected {
  background: #ccc !important;
}

.forwarding .cht {
  transition: 0.3s;
  border-radius: 5px;
  cursor: pointer;
}

.forward-selection-close {
  align-self: center;
  background: transparent;
  border: 0;
  padding-left: 0px;
}

.forward-selection-name {
  align-self: center;
}

.forward-selection-button-container {
  align-self: center;
  margin-left: auto;
  margin-right: 10px;
}

.forward-selected {
  align-self: center;
  background: transparent;
  border: 0;
  padding-left: 0px;
}

.forward-modal .recent-chat {
  border-radius: 0px;
  display: flex;
  padding: 3px 10px;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}

.channel-check {
  align-self: center;
  width: 24px;
}

.user-list-item {
  display: flex;
  width: 100%;
  position: relative;
}

.forward-online-list {
  height: calc((var(--vh, 1vh) * 100) - var(--height-adustment));
  overflow: auto;
}

.forward-online-list .user-row {
  width: 100%;
}

.forward-actions {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #46b9cc;
  z-index: 999;
  display: flex;
  height: 40px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.forward-name {
  align-self: center;
  padding: 10px;
  color: #ffffff;
}

.forward-button-container {
  position: absolute;
  top: -16px;
  right: 16px;
}

.forward-button {
  background: #09e85e;
  color: #ffffff;
}

.forward-modal .modal-body {
  padding: 0;
}

.profile-header {
  border-radius: 12px;
  width: 100%;
  box-shadow: rgb(30 41 59 / 4%) 0 2px 4px 0;
  border: 1px solid rgba(98, 105, 118, 0.16);
}

.profile-header .profile-header-cover {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 300px;
}

.profile-header .profile-header-info {
  padding-bottom: 20px;
  position: relative;
  background: #f2f3f5;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.profile-header-user-avatar {
  width: 164px;
  height: 164px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: -50px;
  border-radius: 50%;
  border: 10px solid #fff;
  overflow: hidden;
}

.profile-header-user-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0px;
}

.profile-header-desc {
  padding-top: 40px;
}

.profile-header-user-sub-title {
  text-align: center;
  margin-bottom: 0px;
}

.user-badge {
  width: 40px;
  height: 40px;
  margin-right: 5px;
}

#main-profile {
  min-height: calc((var(--vh, 1vh) * 100));
  height: auto;
}

@media (max-width: 991.98px) {
  #main-profile {
    height: var(--app-vh);
    min-height: var(--app-vh);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  #main-profile .page-content-wrapper {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #main-profile #v-profile-tabContent.profile-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: 0.9rem 0.9rem calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
  }

  #main-profile .profile-page-modern,
  #main-profile .profile-settings-modern {
    max-width: 100%;
    margin: 0;
    padding: 0.8rem;
  }

  #main-profile .verification-pose-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  #main-profile .verification-pose-image,
  #main-profile .verification-upload-preview {
    max-height: min(50vh, 340px);
  }

  #main-profile .verification-upload-actions,
  #main-profile .verification-preview-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  #main-profile .verification-upload-actions .btn,
  #main-profile .verification-preview-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.radio-stations {
  font-weight: 700;
}

.radio-station:hover {
  font-weight: bold;
}

.radio-thumb img {
  width: 100%;
  border-radius: 50%;
}

.radio-thumb {
  align-self: center;
  margin-right: 0 !important;
  border-radius: 50%;
  overflow: hidden;
  width: 48px;
  height: 48px;
}

.radio-controls {
  align-self: center;
  width: 54px;
  text-align: center;
  line-height: 12px;
  cursor: pointer;
  position: absolute;
  color: #fff;
  filter: drop-shadow(2px 2px 6px black);
}

.radio-title {
  font-size: 14px;
  font-weight: 600;
}

.radio-desc {
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 170px;
}

.radio-info {
  align-self: center;
  padding-left: 10px;
}

.radio-switcher {
  margin-left: auto;
  margin-right: 5px;
  align-self: center;
  line-height: 12px;
  cursor: pointer;
}

.radio-panel {
  position: absolute;
  bottom: 0px;
  border-radius: 0;
  width: 100%;
  left: 0;
  background: #ebedef;
  padding: 0;
  display: none;
  color: #39393d;
  box-shadow: 0px -2px 9px 1px rgba(0, 0, 0, 0.2);
}

.radio-station {
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 3px;
}

.radio-volume {
  display: flex;
  padding: 5px 15px 10px;
}

.radio-volume-display {
  align-self: center;
}

.radio-volume-control {
  align-self: center;
  display: flex;
  width: 100%;
  margin-left: 10px;
}

#radio-volume-control {
  align-self: center;
  width: 100%;
  cursor: pointer;
}

.radio-thumb.radio-playing img {
  animation: radiospin 5s linear infinite;
}

@keyframes radiospin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.recent-img {
  padding: 1px;
}

.recent-img img {
  border-radius: 5px;
}

.recent-img .img-responsive {
  width: 100%;
  padding: 0px;
}

.media-row {
  padding: 10px;
}

.media-tab .chat-files-block {
  overflow: hidden;
  width: 100%;
  padding: 0;
}

.media-tab .file-section {
  width: 100%;
  background-color: #ebedef;
}

.media-tab .file-header {
  color: #1e293bb3;
}

.more-actions {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.media-tab img.recent-link-preview {
  width: 40px;
  margin-right: 5px;
  height: 34px;
  object-fit: cover;
  border-radius: 5px;
}

.media-tab .video-link:before {
  font-size: 24px;
}

.media-tab .video-thumb {
  height: 65px;
}

.media-tab .chat-video-block {
  padding: 0;
}

.profile-header-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gradient-anim-bg {
  background: linear-gradient(320deg, #0081ff, #fd4430, #dc00ff);
  background-size: 300% 300%;
  -webkit-animation: gradientanim 30s ease infinite;
  -moz-animation: gradientanim 30s ease infinite;
  animation: gradientanim 30s ease infinite;
  color: #fff;
  background-position: center;
}

@-webkit-keyframes gradientanim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes gradientanim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradientanim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.username-bottom {
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

.form-selectgroup-input:checked + .room-manage-label {
  background: #5461f5;
  color: #fff;
}

.room-manage-label {
  width: 100%;
}

.room-manage-row {
  color: #4e5058;
  display: flex;
  align-items: center;
  padding: 4px 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.room-manage-icon {
  display: flex;
  align-items: center;
}

.room-manage-image {
  border-radius: 5px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
  display: block;
  background-size: cover;
}

.room-manage-image img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  object-position: center;
}

.room-manage-image i {
  font-size: 30px;
  object-fit: cover;
  object-position: center;
}

.room-manage-name {
  font-weight: 500;
  width: 165px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.room-coverimage-preview {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-position: center center;
  border: 1px solid;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.room-cover-thumbnail-preview {
  width: 96px;
  height: 54px;
  border-radius: 8px;
}

.room-coverimage-preview img,
.room-bgimage-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

.room-bgimage-preview {
  height: 50px;
  width: 50px;
  border-radius: 2px;
  background-position: center center;
  border: 1px solid;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: inline-block;
}

.room-bgimage-remove {
  padding: 0;
  line-height: 1;
  margin-top: -40px;
  padding: 1px 2px;
  font-size: 10px;
}

#v-profile-home .card {
  border-radius: 12px;
}

.sidebar-profile .nav-link {
  color: #4e5058;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0.5rem 0.5rem 0;
}

.sidebar-profile .nav-link.active {
  background: #5461f5 !important;
  color: #fff !important;
}

.sidebar-profile .nav-link:hover {
  background-color: #e3e5e8;
}

.sidebar-profile .ti {
  font-size: 22px;
}

.ms-selectable .search-input,
.ms-selection .search-input {
  margin-bottom: 5px;
}

.ms-selectable .custom-footer,
.ms-selection .custom-footer {
  margin-top: 5px;
}

.form-switch .form-check-input {
  cursor: pointer;
}

/* Facebook-style inbox toggle bar — theme-safe */
.inbox-toggles {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08));
}

.inbox-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 14px;
}

.inbox-toggle-item + .inbox-toggle-item {
  border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
}

.inbox-toggle-info {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--default-text-color, #444);
  line-height: 1;
  flex-wrap: wrap;
}

.inbox-toggle-info span {
  line-height: 1;
}

.inbox-toggle-hint {
  display: block;
  width: 100%;
  font-size: 10px;
  font-weight: 400;
  color: #8899aa;
  margin-top: 1px;
  padding-left: 21px;
  line-height: 1.3;
}

/* Private list header */
.private-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #374151;
  border-bottom: 0;
}

.private-list-count-badge {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.private-list-header i {
  font-size: 14px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
}

.inbox-room-info-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

.inbox-room-stats-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100% - 82px);
  overflow-y: auto;
  padding: 10px 10px 14px;
}

.inbox-room-identity-card {
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
  border-radius: 12px;
  padding: 10px;
}

.inbox-room-identity-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 4px;
}

.inbox-room-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inbox-room-name {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
  word-break: break-word;
}

.inbox-room-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 55%, #3b82f6 100%);
  box-shadow: 0 6px 14px rgba(14, 165, 233, 0.28);
  white-space: nowrap;
}

.inbox-room-live-badge .ti {
  font-size: 12px;
}

.inbox-room-channel {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #475569;
  line-height: 1.3;
  word-break: break-word;
}

.inbox-room-channel .ti {
  font-size: 12px;
  opacity: 0.85;
}

.inbox-room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.inbox-room-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  color: #334155;
  background: rgba(148, 163, 184, 0.14);
}

.inbox-room-tag .ti {
  font-size: 12px;
}

.inbox-room-tag-category {
  border-color: rgba(59, 130, 246, 0.34);
  color: #1d4ed8;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(14, 165, 233, 0.12));
}

.inbox-room-tag-visibility.is-public {
  border-color: rgba(16, 185, 129, 0.35);
  color: #047857;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.17), rgba(34, 197, 94, 0.12));
}

.inbox-room-tag-visibility.is-private {
  border-color: rgba(124, 58, 237, 0.35);
  color: #6d28d9;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(236, 72, 153, 0.11));
}

.inbox-room-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.inbox-room-stat-card {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.96);
  padding: 8px;
}

.inbox-room-stat-card.stat-members {
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16) 0%, rgba(59, 130, 246, 0.06) 100%);
}

.inbox-room-stat-card.stat-online {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.06) 100%);
}

.inbox-room-stat-card.stat-channels {
  border-color: rgba(249, 115, 22, 0.34);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.06) 100%);
}

.inbox-room-stat-card.stat-categories {
  border-color: rgba(168, 85, 247, 0.34);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.06) 100%);
}

.inbox-room-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.inbox-room-stat-label .ti {
  font-size: 12px;
}

.inbox-room-stat-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #1f2937;
}

.inbox-room-private-channels-card {
  border: 1px solid rgba(22, 163, 74, 0.24);
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.95) 0%, rgba(240, 253, 250, 0.88) 100%);
}

.inbox-room-private-channels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inbox-room-private-channels-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #065f46;
}

.inbox-room-private-channels-title .ti {
  font-size: 12px;
}

.inbox-room-private-channels-count {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.34);
  font-size: 11px;
  font-weight: 800;
  color: #047857;
}

.inbox-room-private-channel-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.inbox-room-private-channel-btn {
  width: 100%;
  border: 1px solid rgba(16, 185, 129, 0.24);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.inbox-room-private-channel-btn:hover {
  border-color: rgba(5, 150, 105, 0.5);
  background: rgba(236, 253, 245, 0.9);
  transform: translateY(-1px);
}

.inbox-room-private-channel-btn.is-active {
  border-color: rgba(22, 163, 74, 0.5);
  background: linear-gradient(135deg, rgba(187, 247, 208, 0.72), rgba(167, 243, 208, 0.4));
}

.inbox-room-private-channel-icon {
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
}

.inbox-room-private-channel-icon .ti {
  font-size: 12px;
}

.inbox-room-private-channel-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #14532d;
}

.inbox-room-private-channel-state {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #065f46;
  background: rgba(16, 185, 129, 0.14);
}

.inbox-room-private-channel-state .ti {
  font-size: 10px;
}

.inbox-room-private-channel-empty {
  margin-top: 8px;
  font-size: 11px;
  color: #64748b;
}

.inbox-room-private-channels-card.has-items .inbox-room-private-channel-empty {
  display: none;
}

.inbox-room-help-card {
  border: 1px dashed rgba(148, 163, 184, 0.48);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(241, 245, 249, 0.62);
}

.inbox-room-help-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 6px;
}

.inbox-room-help-title .ti {
  font-size: 12px;
}

.inbox-room-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.inbox-room-help-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: #475569;
}

.inbox-room-help-list li .ti {
  margin-top: 1px;
  font-size: 10px;
  color: #64748b;
}

.private-search-wrap .input-icon {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.private-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.private-search-wrap .dm-user-search {
  border-radius: 10px;
  border-color: #d5dde8;
  background: #ffffff;
}

.private-search-wrap .input-icon-addon {
  color: #677487;
}

.private-search-clear {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  padding: 0;
  flex: 0 0 auto;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.private-search-clear.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.private-search-clear:hover {
  transform: translateY(-1px);
}

html.dark .topbar-private .private-list-header,
body.theme-dark .topbar-private .private-list-header,
.theme-dark .topbar-private .private-list-header,
html.trueblue .topbar-private .private-list-header,
body.theme-trueblue .topbar-private .private-list-header,
.theme-trueblue .topbar-private .private-list-header {
  color: #c7ced8;
}

html.dark .inbox-room-info-subtitle,
body.theme-dark .inbox-room-info-subtitle,
.theme-dark .inbox-room-info-subtitle,
html.trueblue .inbox-room-info-subtitle,
body.theme-trueblue .inbox-room-info-subtitle,
.theme-trueblue .inbox-room-info-subtitle {
  color: #a8b3c2;
}

html.dark .inbox-room-identity-card,
body.theme-dark .inbox-room-identity-card,
.theme-dark .inbox-room-identity-card,
html.trueblue .inbox-room-identity-card,
body.theme-trueblue .inbox-room-identity-card,
.theme-trueblue .inbox-room-identity-card {
  border-color: rgba(148, 163, 184, 0.36);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.93), rgba(15, 23, 42, 0.9));
}

html.dark .inbox-room-identity-label,
body.theme-dark .inbox-room-identity-label,
.theme-dark .inbox-room-identity-label,
html.trueblue .inbox-room-identity-label,
body.theme-trueblue .inbox-room-identity-label,
.theme-trueblue .inbox-room-identity-label {
  color: #94a3b8;
}

html.dark .inbox-room-name,
body.theme-dark .inbox-room-name,
.theme-dark .inbox-room-name,
html.trueblue .inbox-room-name,
body.theme-trueblue .inbox-room-name,
.theme-trueblue .inbox-room-name {
  color: #e2e8f0;
}

html.dark .inbox-room-channel,
body.theme-dark .inbox-room-channel,
.theme-dark .inbox-room-channel,
html.trueblue .inbox-room-channel,
body.theme-trueblue .inbox-room-channel,
.theme-trueblue .inbox-room-channel {
  color: #cbd5e1;
}

html.dark .inbox-room-live-badge,
body.theme-dark .inbox-room-live-badge,
.theme-dark .inbox-room-live-badge,
html.trueblue .inbox-room-live-badge,
body.theme-trueblue .inbox-room-live-badge,
.theme-trueblue .inbox-room-live-badge {
  box-shadow: 0 8px 16px rgba(14, 165, 233, 0.22);
}

html.dark .inbox-room-tag,
body.theme-dark .inbox-room-tag,
.theme-dark .inbox-room-tag,
html.trueblue .inbox-room-tag,
body.theme-trueblue .inbox-room-tag,
.theme-trueblue .inbox-room-tag {
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.16);
}

html.dark .inbox-room-tag-category,
body.theme-dark .inbox-room-tag-category,
.theme-dark .inbox-room-tag-category,
html.trueblue .inbox-room-tag-category,
body.theme-trueblue .inbox-room-tag-category,
.theme-trueblue .inbox-room-tag-category {
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.42);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(14, 165, 233, 0.2));
}

html.dark .inbox-room-tag-visibility.is-public,
body.theme-dark .inbox-room-tag-visibility.is-public,
.theme-dark .inbox-room-tag-visibility.is-public,
html.trueblue .inbox-room-tag-visibility.is-public,
body.theme-trueblue .inbox-room-tag-visibility.is-public,
.theme-trueblue .inbox-room-tag-visibility.is-public {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.42);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(34, 197, 94, 0.2));
}

html.dark .inbox-room-tag-visibility.is-private,
body.theme-dark .inbox-room-tag-visibility.is-private,
.theme-dark .inbox-room-tag-visibility.is-private,
html.trueblue .inbox-room-tag-visibility.is-private,
body.theme-trueblue .inbox-room-tag-visibility.is-private,
.theme-trueblue .inbox-room-tag-visibility.is-private {
  color: #e9d5ff;
  border-color: rgba(167, 139, 250, 0.46);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(236, 72, 153, 0.24));
}

html.dark .inbox-room-stat-card,
body.theme-dark .inbox-room-stat-card,
.theme-dark .inbox-room-stat-card,
html.trueblue .inbox-room-stat-card,
body.theme-trueblue .inbox-room-stat-card,
.theme-trueblue .inbox-room-stat-card {
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(30, 41, 59, 0.74);
}

html.dark .inbox-room-stat-label,
body.theme-dark .inbox-room-stat-label,
.theme-dark .inbox-room-stat-label,
html.trueblue .inbox-room-stat-label,
body.theme-trueblue .inbox-room-stat-label,
.theme-trueblue .inbox-room-stat-label {
  color: #9fb0c8;
}

html.dark .inbox-room-stat-value,
body.theme-dark .inbox-room-stat-value,
.theme-dark .inbox-room-stat-value,
html.trueblue .inbox-room-stat-value,
body.theme-trueblue .inbox-room-stat-value,
.theme-trueblue .inbox-room-stat-value {
  color: #f1f5f9;
}

html.dark .inbox-room-private-channels-card,
body.theme-dark .inbox-room-private-channels-card,
.theme-dark .inbox-room-private-channels-card,
html.trueblue .inbox-room-private-channels-card,
body.theme-trueblue .inbox-room-private-channels-card,
.theme-trueblue .inbox-room-private-channels-card {
  border-color: rgba(74, 222, 128, 0.34);
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.2) 0%, rgba(15, 23, 42, 0.52) 100%);
}

html.dark .inbox-room-private-channels-title,
body.theme-dark .inbox-room-private-channels-title,
.theme-dark .inbox-room-private-channels-title,
html.trueblue .inbox-room-private-channels-title,
body.theme-trueblue .inbox-room-private-channels-title,
.theme-trueblue .inbox-room-private-channels-title {
  color: #bbf7d0;
}

html.dark .inbox-room-private-channels-count,
body.theme-dark .inbox-room-private-channels-count,
.theme-dark .inbox-room-private-channels-count,
html.trueblue .inbox-room-private-channels-count,
body.theme-trueblue .inbox-room-private-channels-count,
.theme-trueblue .inbox-room-private-channels-count {
  color: #bbf7d0;
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.44);
}

html.dark .inbox-room-private-channel-btn,
body.theme-dark .inbox-room-private-channel-btn,
.theme-dark .inbox-room-private-channel-btn,
html.trueblue .inbox-room-private-channel-btn,
body.theme-trueblue .inbox-room-private-channel-btn,
.theme-trueblue .inbox-room-private-channel-btn {
  border-color: rgba(74, 222, 128, 0.36);
  background: rgba(15, 23, 42, 0.62);
}

html.dark .inbox-room-private-channel-btn:hover,
body.theme-dark .inbox-room-private-channel-btn:hover,
.theme-dark .inbox-room-private-channel-btn:hover,
html.trueblue .inbox-room-private-channel-btn:hover,
body.theme-trueblue .inbox-room-private-channel-btn:hover,
.theme-trueblue .inbox-room-private-channel-btn:hover {
  border-color: rgba(110, 231, 183, 0.58);
  background: rgba(16, 185, 129, 0.2);
}

html.dark .inbox-room-private-channel-btn.is-active,
body.theme-dark .inbox-room-private-channel-btn.is-active,
.theme-dark .inbox-room-private-channel-btn.is-active,
html.trueblue .inbox-room-private-channel-btn.is-active,
body.theme-trueblue .inbox-room-private-channel-btn.is-active,
.theme-trueblue .inbox-room-private-channel-btn.is-active {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.3), rgba(16, 185, 129, 0.18));
  border-color: rgba(110, 231, 183, 0.62);
}

html.dark .inbox-room-private-channel-icon,
body.theme-dark .inbox-room-private-channel-icon,
.theme-dark .inbox-room-private-channel-icon,
html.trueblue .inbox-room-private-channel-icon,
body.theme-trueblue .inbox-room-private-channel-icon,
.theme-trueblue .inbox-room-private-channel-icon {
  color: #6ee7b7;
}

html.dark .inbox-room-private-channel-name,
body.theme-dark .inbox-room-private-channel-name,
.theme-dark .inbox-room-private-channel-name,
html.trueblue .inbox-room-private-channel-name,
body.theme-trueblue .inbox-room-private-channel-name,
.theme-trueblue .inbox-room-private-channel-name {
  color: #e2e8f0;
}

html.dark .inbox-room-private-channel-state,
body.theme-dark .inbox-room-private-channel-state,
.theme-dark .inbox-room-private-channel-state,
html.trueblue .inbox-room-private-channel-state,
body.theme-trueblue .inbox-room-private-channel-state,
.theme-trueblue .inbox-room-private-channel-state {
  color: #bbf7d0;
  background: rgba(16, 185, 129, 0.22);
}

html.dark .inbox-room-private-channel-empty,
body.theme-dark .inbox-room-private-channel-empty,
.theme-dark .inbox-room-private-channel-empty,
html.trueblue .inbox-room-private-channel-empty,
body.theme-trueblue .inbox-room-private-channel-empty,
.theme-trueblue .inbox-room-private-channel-empty {
  color: #cbd5e1;
}

html.dark .inbox-room-help-card,
body.theme-dark .inbox-room-help-card,
.theme-dark .inbox-room-help-card,
html.trueblue .inbox-room-help-card,
body.theme-trueblue .inbox-room-help-card,
.theme-trueblue .inbox-room-help-card {
  border-color: rgba(148, 163, 184, 0.44);
  background: rgba(30, 41, 59, 0.58);
}

html.dark .inbox-room-help-title,
body.theme-dark .inbox-room-help-title,
.theme-dark .inbox-room-help-title,
html.trueblue .inbox-room-help-title,
body.theme-trueblue .inbox-room-help-title,
.theme-trueblue .inbox-room-help-title {
  color: #dbeafe;
}

html.dark .inbox-room-help-list li,
body.theme-dark .inbox-room-help-list li,
.theme-dark .inbox-room-help-list li,
html.trueblue .inbox-room-help-list li,
body.theme-trueblue .inbox-room-help-list li,
.theme-trueblue .inbox-room-help-list li {
  color: #cbd5e1;
}

html.dark .inbox-room-help-list li .ti,
body.theme-dark .inbox-room-help-list li .ti,
.theme-dark .inbox-room-help-list li .ti,
html.trueblue .inbox-room-help-list li .ti,
body.theme-trueblue .inbox-room-help-list li .ti,
.theme-trueblue .inbox-room-help-list li .ti {
  color: #93c5fd;
}

html.dark .topbar-private .private-list-count-badge,
body.theme-dark .topbar-private .private-list-count-badge,
.theme-dark .topbar-private .private-list-count-badge,
html.trueblue .topbar-private .private-list-count-badge,
body.theme-trueblue .topbar-private .private-list-count-badge,
.theme-trueblue .topbar-private .private-list-count-badge {
  background: rgba(79, 70, 229, 0.25);
  color: #c7d2fe;
}

html.dark .topbar-private .private-list-header i,
body.theme-dark .topbar-private .private-list-header i,
.theme-dark .topbar-private .private-list-header i,
html.trueblue .topbar-private .private-list-header i,
body.theme-trueblue .topbar-private .private-list-header i,
.theme-trueblue .topbar-private .private-list-header i {
  background: rgba(79, 70, 229, 0.22);
  color: #c7d2fe;
}

html.dark .private-search-wrap .dm-user-search,
body.theme-dark .private-search-wrap .dm-user-search,
.theme-dark .private-search-wrap .dm-user-search,
html.trueblue .private-search-wrap .dm-user-search,
body.theme-trueblue .private-search-wrap .dm-user-search,
.theme-trueblue .private-search-wrap .dm-user-search {
  background: #2a2f38;
  border-color: #3d4553;
  color: #e5e7eb;
}

html.dark .private-search-wrap .dm-user-search::placeholder,
body.theme-dark .private-search-wrap .dm-user-search::placeholder,
.theme-dark .private-search-wrap .dm-user-search::placeholder,
html.trueblue .private-search-wrap .dm-user-search::placeholder,
body.theme-trueblue .private-search-wrap .dm-user-search::placeholder,
.theme-trueblue .private-search-wrap .dm-user-search::placeholder {
  color: #97a1b1;
}

html.dark .private-search-wrap .input-icon-addon,
body.theme-dark .private-search-wrap .input-icon-addon,
.theme-dark .private-search-wrap .input-icon-addon,
html.trueblue .private-search-wrap .input-icon-addon,
body.theme-trueblue .private-search-wrap .input-icon-addon,
.theme-trueblue .private-search-wrap .input-icon-addon {
  color: #aeb7c5;
}

html.dark .private-search-clear,
body.theme-dark .private-search-clear,
.theme-dark .private-search-clear,
html.trueblue .private-search-clear,
body.theme-trueblue .private-search-clear,
.theme-trueblue .private-search-clear {
  color: #b7c0cf;
}

/* Private list empty state */
.private-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #8899aa;
  text-align: center;
}

.private-list-empty i {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.private-list-empty p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.private-list-empty h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #4b5563;
}

.private-list-empty .btn {
  margin-top: 12px;
  border-radius: 999px;
  padding-left: 12px;
  padding-right: 12px;
}

html.dark .private-list-empty h4,
body.theme-dark .private-list-empty h4,
.theme-dark .private-list-empty h4,
html.trueblue .private-list-empty h4,
body.theme-trueblue .private-list-empty h4,
.theme-trueblue .private-list-empty h4 {
  color: #d6deea;
}

.inbox-toggle-info i {
  font-size: 15px;
  color: var(--muted-text-color, #65676b);
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.inbox-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
  margin: 0 0 0 10px;
}

.inbox-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.inbox-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #bcc0c4;
  border-radius: 18px;
  transition: background 0.2s;
}

.inbox-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.inbox-switch input:checked + .inbox-slider {
  background: #0084ff;
}

.inbox-switch input:checked + .inbox-slider::before {
  transform: translateX(16px);
}

.v-profile-tab-item {
  display: flex;
}

.room-manage-row:hover {
  background-color: #e3e5e8;
}

.message-html figure a {
  display: block;
}

.main-block-padding {
  padding: 1.75rem;
}

.ad-space {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  overflow: hidden;
  width: 100%;
}

.send-sticker img {
  width: 75px;
  cursor: pointer;
}

.chat-sticker img {
  width: 128px;
}

.cookiealert {
  display: none;
}

.cookiealert.show {
  display: block;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99999;
  margin: 0;
  background-color: #f8f9fa;
  color: #5a5a5a;
  border-top: 1px solid #e9ecef;
  padding: 1rem;
  pointer-events: auto;
  touch-action: auto;
}

/* Dark mode cookie notification styling */
.dark .cookiealert.show {
  background-color: #464952;
  color: #ffffff;
  border-top: 1px solid #5c5f66;
}

.cookiealert.show a {
  color: #1976d2;
  text-decoration: underline;
}

.dark .cookiealert.show a {
  color: #65afff;
}

html.trueblue .cookiealert.show,
body.trueblue .cookiealert.show,
.trueblue .cookiealert.show {
  background-color: #0f2540;
  color: #eef6ff;
  border-top: 1px solid #2d5a7b;
}

html.trueblue .cookiealert.show a,
body.trueblue .cookiealert.show a,
.trueblue .cookiealert.show a {
  color: #8cc9ff;
  text-decoration: underline;
}

.cookiealert .acceptcookies {
  margin-left: 1rem;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html.trueblue .cookiealert .acceptcookies,
body.trueblue .cookiealert .acceptcookies,
.trueblue .cookiealert .acceptcookies {
  background-color: #1f6fd0;
  border-color: #1f6fd0;
  color: #ffffff;
}

html.trueblue .cookiealert .acceptcookies:hover,
body.trueblue .cookiealert .acceptcookies:hover,
.trueblue .cookiealert .acceptcookies:hover,
html.trueblue .cookiealert .acceptcookies:focus,
body.trueblue .cookiealert .acceptcookies:focus,
.trueblue .cookiealert .acceptcookies:focus {
  background-color: #1b63bb;
  border-color: #1b63bb;
  color: #ffffff;
}

/* Mobile cookie alert improvements */
@media (max-width: 768px) {
  .cookiealert.show {
    padding: 1rem 0.75rem;
    font-size: 14px;
    text-align: center;
  }
  
  .cookiealert .acceptcookies {
    margin-left: 0;
    margin-top: 0.75rem;
    display: block;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem 1.5rem;
    font-size: 16px;
    min-height: 44px;
  }
}

img.uppy-DashboardItem-previewImg {
  position: absolute;
  z-index: 999;
  height: 100%;
  object-fit: contain;
  background: black;
}

#rpanel-videos .video-section {
  padding: 0px 3px 3px 0px !important;
}

.media-row .row {
  margin-left: -5px;
  margin-right: -5px;
}

/* #rpanel-videos .more-actions {
    margin-top: 50px;
} */

div[data-msg-type="5"] .message-data {
  background-color: transparent !important;
  box-shadow: none !important;
}

.chat-link {
  color: #2fb344;
}

.online-status {
  position: absolute;
  bottom: 0;
  left: 0;
}

.online {
  color: #1cc88a;
}

.offline {
  color: #c8c8c7;
}

.busy {
  color: #e74a3b;
}

.away {
  color: #f6c23e;
}

.online-status .ti {
  border-radius: 50%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 12px;
  height: 12px;
  background: rgb(248 250 252);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.online-status.online .ti,
.current-status.online-status.online .ti,
i.online,
.ti.online,
.ti-circle-filled.online {
  color: #1cc88a;
}

.online-status.offline .ti,
.current-status.online-status.offline .ti,
i.offline,
.ti.offline,
.ti-circle-filled.offline {
  color: #c8c8c7;
}

.online-status.busy .ti,
.current-status.online-status.busy .ti,
i.busy,
.ti.busy,
.ti-circle-filled.busy {
  color: #e74a3b;
}

.online-status.away .ti,
.current-status.online-status.away .ti,
i.away,
.ti.away,
.ti-circle-filled.away {
  color: #f6c23e;
}

.user-row:hover .online-status .ti {
  background: #caced2;
}

.social-login-container {
  display: block;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.social-provider {
  margin: 0px 5px;
  display: inline-block;
  margin-top: 10px;
}

.social-provider img {
  width: 32px;
  cursor: pointer;
}

.social-seperator {
  position: relative;
  margin-top: 30px;
}

.social-seperator div {
  position: absolute;
  top: -7px;
  font-size: 10px;
  background: #fafbfc;
  padding: 0 8px;
  left: calc(50% - 44px);
  color: #969696;
}

.social-seperator hr {
  margin-top: 0px;
  margin-bottom: 10px;
}

.rtl .unread-indicator {
  right: 0;
  border-radius: 5px 0px 0px 5px;
  transform: translate(50%, -50%);
}

.rtl .channel-item {
  padding-left: 0px;
  padding-right: 7px;
  margin-left: 7px;
  margin-right: 10px;
}

.rtl .pill {
  right: 0;
  transform: translate(50%, -50%);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rtl .private-item .pill {
  right: -10px;
}

.rtl body.sb-sidenav-toggled #wrapper .sidebar-wrapper {
  margin-right: calc(-1 * var(--chat-left-panel-effective-width));
  margin-left: 0;
}

@media (min-width: 992px) {
  body.sidebar-private-visible.sb-sidenav-toggled #wrapper .sidebar-wrapper {
    margin-left: calc(-1 * var(--chat-left-panel-effective-width));
  }

  .rtl body.sidebar-private-visible.sb-sidenav-toggled #wrapper .sidebar-wrapper {
    margin-right: calc(-1 * var(--chat-left-panel-effective-width));
    margin-left: 0;
  }
}

.rtl body.sb-rightnav-toggled #wrapper .rightbar-wrapper {
  margin-left: calc(-1 * var(--chat-right-panel-width));
  margin-right: 0rem;
}

.rtl .replies .message-data:after {
  right: -4px;
  left: auto;
}

.rtl .sent .message-data:before {
  left: -4px;
  right: auto;
}

.rtl .messages .sent .avatar {
  margin-right: 8px;
  margin-left: 0px;
}

.rtl .sent .chat-txt:before {
  left: -4px;
  right: auto;
}

.rtl .replies .chat-txt:after {
  right: -4px;
  left: auto;
}

.rtl .messages .replies .avatar {
  float: right;
  margin-left: 8px;
  margin-right: 0px;
}

.rtl .sent .link-preview {
  float: left;
}

.rtl .replies .link-preview {
  float: right;
}

.rtl .media-tab img.recent-link-preview {
  margin-left: 4px;
  margin-right: 0px;
}

.rtl .file-actions {
  left: 10px;
  right: auto;
}

.rtl .editor-controller p {
  margin-left: 0px;
  margin-right: 15px;
}

.rtl .disc-cat-name {
  margin-left: 0px;
  margin-right: 10px;
}

.rtl .input-icon-addon-custom.input-group-flat .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.rpanel-search-group input,
.rpanel-search-group span {
  border-radius: 0 !important;
}

.rpanel-search-group {
  margin-top: -3px;
}

.editor-wrap {
  position: relative;
}

.mention {
  color: #3ca9ff !important;
  cursor: pointer;
  transition: 0.3s;
}

.own-username-highlight {
  color: #28a745 !important;
  font-weight: bold;
}

/* User Profile Modal Styles */
.user-profile-container {
  padding: 10px;
}

.user-profile-header {
  margin-bottom: 20px;
}

.user-profile-avatar {
  position: relative;
}

/* Profile Avatar in Modal */
.profile-avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-avatar-container img {
  border: 3px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.online-status-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid white;
  z-index: 1;
}

.online-status-indicator i {
  font-size: 10px;
}

.online-status-indicator.online {
  background-color: #28a745;
  color: white;
}

.online-status-indicator.busy {
  background-color: #dc3545;
  color: white;
}

.online-status-indicator.away {
  background-color: #ffc107;
  color: white;
}

.online-status-indicator.offline {
  background-color: #6c757d;
  color: white;
}

#profile-badges .badge {
  font-size: 12px;
  padding: 4px 8px;
}

.profile-info-item {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.profile-about h6 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-about p {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.stat-item h5 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-item small {
  font-size: 11px;
  text-transform: uppercase;
}

.user-profile-actions .btn {
  padding: 10px 20px;
  font-weight: 500;
}

/* Private Message Profile Avatar Styling */
.pvt-profile-avatar-section {
  padding: 20px 15px !important;
}

.pvt-avatar-container {
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border: 3px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pvt-avatar-container .user-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.user-card .user-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

/* Make user rows clickable */
.user-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.user-row:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.user-row:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.08);
}

.noti-item {
  margin-bottom: 5px;
  padding-bottom: 5px;
  background: #d1e8ff;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  transition: 0.3s;
  cursor: pointer;
}

.noti-item.noti-read {
  background: #ebedef;
}

.noti-item:hover {
  background: #ebedef;
}

.noti-icon img {
  border-radius: 50%;
}

.notifications-panel-card {
  min-width: 300px;
}

.card-body.notifications {
  padding: 0;
}

.noti-time {
  font-size: 12px;
  color: #2275d7;
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 2px;
}

.noti-content {
  font-size: 14px;
  color: #585858;
  line-height: 1.3;
  display: block;
}

.noti-count {
  right: -8px;
  top: 6px;
  font-size: 9px;
  position: absolute !important;
  display: none;
}

#notifications-panel {
  position: relative;
}

.offcanvas-header {
  padding: 10px;
  height: 48px;
}

.offcanvas-header .input-icon {
  width: 100%;
  margin-bottom: 0 !important;
}

#offcanvasSearch .offcanvas-header {
  height: auto;
  align-items: flex-start;
  gap: 10px;
}

#offcanvasSearch .btn-close {
  margin-top: 4px;
}

.chat-search-toolbar {
  flex: 1;
  min-width: 0;
}

.chat-search-toolbar .input-icon {
  margin-bottom: 8px !important;
}

.chat-search-scope-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-search-scope-btn {
  border: 1px solid #cfd8e3;
  background: #f6f9fc;
  color: #3d4c63;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 10px;
}

.chat-search-scope-btn:hover,
.chat-search-scope-btn:focus {
  border-color: #7aa2d8;
  color: #1f3f69;
}

.chat-search-scope-btn.is-active {
  background: #2f6db3;
  border-color: #2f6db3;
  color: #fff;
}

.chat-search-scope-btn:disabled,
.chat-search-scope-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.chat-search-room-group {
  margin-bottom: 12px;
}

.chat-search-room-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 6px;
}

.chat-search-room-group-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #3f587d;
  text-transform: uppercase;
}

.chat-search-room-group-action {
  border: 1px solid #c7d5e6;
  background: #ffffff;
  color: #25527f;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.1;
  padding: 4px 8px;
}

.chat-search-room-group-action:hover,
.chat-search-room-group-action:focus {
  border-color: #5f90c8;
  color: #1d4470;
}

.chat-search-room-group-results .chat-search-result {
  margin-bottom: 6px;
}

.chat-search-room-group--flat {
  margin-top: 2px;
}

.chat-search-result {
  padding: 10px 15px;
  background: #ebedef;
  margin-bottom: 5px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 5px;
}

.chat-search-result:hover {
  background-color: #dfe1e5;
}

.res-chat-time {
  font-size: 10px;
  margin: 0;
  line-height: 1;
  margin-bottom: 5px;
  font-weight: 500;
}

.res-chat-room {
  font-size: 11px;
  margin: 0 0 5px;
  line-height: 1.25;
  color: #5c6676;
  font-weight: 600;
}

.res-chat-txt {
  font-size: 14px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-search-state {
  padding: 12px 10px;
  border-radius: 6px;
  background: #eef2f7;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.3;
}

.chat-search-state--hint {
  background: #edf5ff;
  color: #375a7f;
}

.chat-search-state--error {
  background: #fee2e2;
  color: #991b1b;
}

.right-user-row-no-avatar .channel-user-details {
  width: 100%;
}

.place-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50% !important;
}

.place-joined-rooms {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

/* Modern chat loading skeleton */
.chat-skeleton-wrap {
  --chat-skeleton-base: rgba(115, 131, 157, 0.25);
  --chat-skeleton-highlight: rgba(255, 255, 255, 0.7);
  --chat-skeleton-received: rgba(118, 136, 166, 0.2);
  --chat-skeleton-sent: rgba(54, 185, 204, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 4px 10px;
}

html.dark .chat-skeleton-wrap,
body.theme-dark .chat-skeleton-wrap,
.theme-dark .chat-skeleton-wrap,
html.trueblue .chat-skeleton-wrap,
body.theme-trueblue .chat-skeleton-wrap,
.theme-trueblue .chat-skeleton-wrap {
  --chat-skeleton-base: rgba(98, 116, 150, 0.4);
  --chat-skeleton-highlight: rgba(181, 203, 239, 0.24);
  --chat-skeleton-received: rgba(72, 89, 120, 0.5);
  --chat-skeleton-sent: rgba(46, 154, 204, 0.36);
}

.chat-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 11px;
  animation: chat-skeleton-enter 220ms ease-out both;
}

.chat-skeleton-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 84%;
}

.chat-skeleton-row.is-sent {
  margin-left: auto;
  justify-content: flex-end;
  max-width: 74%;
}

.chat-skeleton-avatar,
.chat-skeleton-line {
  position: relative;
  overflow: hidden;
  background: var(--chat-skeleton-base);
}

.chat-skeleton-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 34px;
}

.chat-skeleton-bubble {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 16px;
}

.chat-skeleton-row.is-received .chat-skeleton-bubble {
  background: var(--chat-skeleton-received);
  border-top-left-radius: 8px;
}

.chat-skeleton-row.is-sent .chat-skeleton-bubble {
  background: var(--chat-skeleton-sent);
  border-top-right-radius: 8px;
}

.chat-skeleton-line {
  height: 8px;
  border-radius: 999px;
}

.chat-skeleton-avatar::after,
.chat-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, var(--chat-skeleton-highlight) 46%, transparent 78%);
  transform: translateX(-120%);
  animation: chat-skeleton-shimmer 1.25s ease-in-out infinite;
}

.chat-skeleton-row:nth-child(2) .chat-skeleton-avatar::after,
.chat-skeleton-row:nth-child(2) .chat-skeleton-line::after {
  animation-delay: 0.12s;
}

.chat-skeleton-row:nth-child(3) .chat-skeleton-avatar::after,
.chat-skeleton-row:nth-child(3) .chat-skeleton-line::after {
  animation-delay: 0.24s;
}

.chat-skeleton-row:nth-child(4) .chat-skeleton-avatar::after,
.chat-skeleton-row:nth-child(4) .chat-skeleton-line::after {
  animation-delay: 0.36s;
}

.chat-skeleton-private-loader {
  margin-top: 4px;
}

.chat-loader-alt-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 8px 0;
}

.chat-loader-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-loader-alt .lds-ellipsis {
  width: 52px;
  height: 18px;
  margin: 0;
}

.chat-loader-alt .lds-ellipsis div {
  top: 5px;
  width: 8px;
  height: 8px;
  box-shadow: 0 1px 5px rgba(54, 185, 204, 0.28);
}

.chat-loader-alt .lds-ellipsis div:nth-child(1) {
  left: 4px;
}

.chat-loader-alt .lds-ellipsis div:nth-child(2) {
  left: 4px;
}

.chat-loader-alt .lds-ellipsis div:nth-child(3) {
  left: 22px;
}

.chat-loader-alt .lds-ellipsis div:nth-child(4) {
  left: 40px;
}

/* Sidebar users/channels loading skeleton */
.panel-skeleton-wrap {
  --panel-skeleton-base: rgba(115, 131, 157, 0.26);
  --panel-skeleton-highlight: rgba(255, 255, 255, 0.65);
  --panel-skeleton-surface: rgba(137, 152, 176, 0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

html.dark .panel-skeleton-wrap,
body.theme-dark .panel-skeleton-wrap,
.theme-dark .panel-skeleton-wrap,
html.trueblue .panel-skeleton-wrap,
body.theme-trueblue .panel-skeleton-wrap,
.theme-trueblue .panel-skeleton-wrap {
  --panel-skeleton-base: rgba(98, 116, 150, 0.5);
  --panel-skeleton-highlight: rgba(186, 206, 238, 0.24);
  --panel-skeleton-surface: rgba(68, 84, 113, 0.44);
}

.panel-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: chat-skeleton-enter 220ms ease-out both;
}

.panel-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: var(--panel-skeleton-surface);
}

.panel-skeleton-row.is-user {
  padding: 8px 9px;
}

.panel-skeleton-row.is-channel {
  padding: 7px 8px;
}

.panel-skeleton-avatar,
.panel-skeleton-bullet,
.panel-skeleton-line,
.panel-skeleton-presence {
  position: relative;
  overflow: hidden;
  background: var(--panel-skeleton-base);
}

.panel-skeleton-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 30px;
}

.panel-skeleton-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}

.panel-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}

.panel-skeleton-line {
  display: block;
  height: 7px;
  width: 100%;
  border-radius: 999px;
}

.panel-skeleton-presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  margin-left: auto;
}

.panel-skeleton-avatar::after,
.panel-skeleton-bullet::after,
.panel-skeleton-line::after,
.panel-skeleton-presence::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, var(--panel-skeleton-highlight) 46%, transparent 78%);
  transform: translateX(-120%);
  animation: chat-skeleton-shimmer 1.25s ease-in-out infinite;
}

.panel-skeleton-list .panel-skeleton-row:nth-child(2) .panel-skeleton-avatar::after,
.panel-skeleton-list .panel-skeleton-row:nth-child(2) .panel-skeleton-bullet::after,
.panel-skeleton-list .panel-skeleton-row:nth-child(2) .panel-skeleton-line::after,
.panel-skeleton-list .panel-skeleton-row:nth-child(2) .panel-skeleton-presence::after {
  animation-delay: 0.1s;
}

.panel-skeleton-list .panel-skeleton-row:nth-child(3) .panel-skeleton-avatar::after,
.panel-skeleton-list .panel-skeleton-row:nth-child(3) .panel-skeleton-bullet::after,
.panel-skeleton-list .panel-skeleton-row:nth-child(3) .panel-skeleton-line::after,
.panel-skeleton-list .panel-skeleton-row:nth-child(3) .panel-skeleton-presence::after {
  animation-delay: 0.2s;
}

.chat-loading-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #5f6f86;
  font-size: 12px;
  font-weight: 600;
  animation: chat-loading-breathe 1.9s ease-in-out infinite;
}

.chat-loading-notice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36b9cc;
  box-shadow: 0 0 0 0 rgba(54, 185, 204, 0.45);
  animation: chat-loading-dot-ping 1.4s ease-out infinite;
}

html.dark .chat-loading-notice,
body.theme-dark .chat-loading-notice,
.theme-dark .chat-loading-notice,
html.trueblue .chat-loading-notice,
body.theme-trueblue .chat-loading-notice,
.theme-trueblue .chat-loading-notice {
  color: #c5d0e5;
  background: rgba(72, 88, 116, 0.46);
}

.chat-empty-notice {
  max-width: 460px;
  margin: 20px auto;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(120, 138, 165, 0.45);
  background: rgba(120, 138, 165, 0.1);
  color: #5a677c;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

html.dark .chat-empty-notice,
body.theme-dark .chat-empty-notice,
.theme-dark .chat-empty-notice,
html.trueblue .chat-empty-notice,
body.theme-trueblue .chat-empty-notice,
.theme-trueblue .chat-empty-notice {
  color: #bec9dd;
  border-color: rgba(105, 126, 164, 0.52);
  background: rgba(77, 96, 129, 0.25);
}

@keyframes chat-skeleton-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chat-skeleton-shimmer {
  to {
    transform: translateX(120%);
  }
}

@keyframes chat-loading-breathe {
  0%,
  100% {
    opacity: 0.88;
  }

  50% {
    opacity: 1;
  }
}

@keyframes chat-loading-dot-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(54, 185, 204, 0.45);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(54, 185, 204, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(54, 185, 204, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-skeleton-stack,
  .panel-skeleton-list,
  .chat-loading-notice,
  .chat-loading-notice-dot,
  .chat-skeleton-avatar::after,
  .chat-skeleton-line::after,
  .panel-skeleton-avatar::after,
  .panel-skeleton-bullet::after,
  .panel-skeleton-line::after,
  .panel-skeleton-presence::after {
    animation: none !important;
    transform: none !important;
  }
}

/*** Loader ***/
.loadingoverlay {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.loadingoverlay .loadingoverlay_element {
  margin: 0 !important;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 24px;
}

.lds-ellipsis div {
  position: absolute;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #36b9cc;
  box-shadow: 0 2px 8px rgba(54, 185, 204, 0.34);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.72s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.72s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.72s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 46px;
  animation: lds-ellipsis3 0.72s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(20px, 0);
  }
}

/*** Loader End ***/

.chats .animate__animated {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  --animate-duration: 0s;
}

/* Keep chat message rendering instant even when animate classes are attached. */
.chats .cht.animate__animated {
  -webkit-animation: none !important;
  animation: none !important;
}

.chats .animate__animated.animate__slow {
  -webkit-animation-duration: calc(var(--animate-duration) * 1.35);
  animation-duration: calc(var(--animate-duration) * 1.35);
}

.chats .animate__animated.animate__slower {
  -webkit-animation-duration: calc(var(--animate-duration) * 1.8);
  animation-duration: calc(var(--animate-duration) * 1.8);
}

.main-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.video-call-container {
  display: none;
  position: relative;
  --call-main-preview-height: clamp(196px, 30vh, 320px);
  --call-main-preview-height-mobile: clamp(170px, 34vh, 250px);
  --call-self-preview-width: 56px;
  padding: 10px;
  border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  background: linear-gradient(
    170deg,
    rgba(10, 17, 30, 0.96) 0%,
    rgba(20, 31, 48, 0.94) 100%
  );
}

.dark .video-call-container,
.trueblue .video-call-container {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.video-call-dock-host {
  display: none;
  width: 100%;
}

.video-call-mobile-host {
  width: 100%;
  padding: 0 0 8px;
}

.video-call-active .rightbar-wrapper.video-call-panel-expanded .video-call-dock-host {
  display: block;
}

.video-call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.video-call-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
}

.video-call-title i {
  color: #7dd3fc;
}

.video-call-subtitle {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.7);
}

.voice-channel-container {
  height: 82px;
  display: none;
  align-items: center;
  padding: 0 8px;
  width: 20rem;
  background: #f8fafc;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid #dbdde1;
}

.voice-channel-name {
  flex: 1;
  margin-left: 5px;
}

.voice-name {
  width: 15em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.in-voice .voice-channel-container {
  display: flex;
}

.voice-member-list {
  padding-left: 30px;
  padding-right: 30px;
  display: none;
}

.voice-member {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.voice-member .dropdown-toggle {
  padding: 0 2px;
  color: inherit;
}

.voice-member .dropdown-menu {
  min-width: 130px;
}

.voice-member-name {
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-member.speaking .voice-avatar {
  box-shadow: 0 0 0 2px #2275d7;
}

.voice-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
}

.in-voice .main-panel,
.in-voice .height-scroll-rpanel,
.in-voice .page-content-wrapper {
  height: auto;
}

.in-voice .rightbar-wrapper {
  min-height: unset;
}

.launch-call {
  border: 0;
}

.call-alert,
.group-call-alert {
  position: fixed;
  right: 22px;
  top: 84px;
  display: flex;
  z-index: 9999;
  padding: 12px 14px;
  min-width: 300px;
  max-width: min(92vw, 390px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, rgba(15, 54, 109, 0.97), rgba(31, 111, 199, 0.96));
  color: #f8fbff;
  box-shadow: 0 18px 44px rgba(2, 13, 32, 0.45);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  overflow: hidden;
}

.call-alert.is-visible,
.group-call-alert.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.call-alert .animbox,
.group-call-alert .animbox {
  width: 78px;
  min-width: 78px;
  justify-content: center;
  display: flex;
  align-items: center;
  position: relative;
}

.call-alert .call-avatar-wrap,
.group-call-alert .call-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  z-index: 2;
}

.call-alert .call-avatar,
.group-call-alert .call-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  justify-content: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(14, 40, 84, 0.28);
}

.call-alert .call-actions,
.group-call-alert .call-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  line-height: 1;
  margin-left: 12px;
  gap: 8px;
}

.call-alert .caller-name,
.group-call-alert .caller-name {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.call-alert .caller-state,
.group-call-alert .caller-state {
  margin: 0;
  font-size: 12px;
  color: rgba(231, 243, 255, 0.9);
}

.call-alert .call-controlls,
.group-call-alert .call-controlls {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.call-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-alert .call-controll,
.group-call-alert .call-controll {
  border: 0;
  border-radius: 999px;
  min-width: 108px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.call-alert .call-controll:hover,
.group-call-alert .call-controll:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.call-alert .answer,
.group-call-alert .answer {
  box-shadow: 0 10px 24px rgba(16, 181, 120, 0.32);
}

.call-alert .hangup,
.group-call-alert .hangup {
  box-shadow: 0 10px 24px rgba(217, 63, 70, 0.34);
}

.call-anim {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  position: absolute;
  background: transparent;
  animation: incoming-call-wave 2.4s ease-out infinite;
}

@keyframes incoming-call-wave {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes incoming-call-avatar-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.circle1 {
  animation-delay: 0s;
}

.circle2 {
  animation-delay: 0.75s;
}

.circle3 {
  animation-delay: 1.5s;
}

.call-alert.is-visible .call-avatar-wrap,
.group-call-alert.is-visible .call-avatar-wrap {
  animation: incoming-call-avatar-pop 1.15s ease-in-out infinite;
}

@media (max-width: 767.98px) {
  .call-alert,
  .group-call-alert {
    right: 10px;
    left: 10px;
    top: 72px;
    min-width: 0;
    max-width: none;
    padding: 12px;
  }

  .call-alert .call-controll,
  .group-call-alert .call-controll {
    min-width: 0;
    flex: 1 1 0;
  }
}

#media-div {
  position: relative;
  display: block;
  width: 100%;
  height: var(--call-main-preview-height);
  min-height: var(--call-main-preview-height);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #04070d;
}

.local-video {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  width: var(--call-self-preview-width);
  max-width: var(--call-self-preview-width);
  min-height: 74px;
  aspect-ratio: 3 / 4;
  z-index: 5;
  border-radius: 10px;
  overflow: hidden;
  background: #04070d;
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 10px 20px rgba(2, 6, 12, 0.45);
}

.video-caller-name {
  position: absolute;
  font-size: 11px;
  background: rgba(2, 6, 12, 0.76);
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
  opacity: 0.94;
  left: 7px;
  top: 7px;
  z-index: 100;
}

.remote-video .video-caller-name {
  top: auto;
  bottom: 8px;
}

.local-video .video-caller-name {
  font-size: 10px;
  top: 6px;
  left: 6px;
}

.call-msg {
  position: static;
  color: rgba(226, 232, 240, 0.86);
  font-size: 12px;
  margin: 0 0 8px;
}

.call-controllers {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-top: 8px;
  z-index: 2;
  opacity: 1;
  transition: 0.3s;
  background: transparent;
}

.call-controllers:hover {
  opacity: 1;
}

.remote-video {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
}

#media-div .remote-video + .remote-video {
  display: none;
}

.remote-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.livekit-player {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.livekit-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

#local-player {
  width: auto;
  height: auto;
}

#media-div > #local-player.local-video,
#media-div .local-video#local-player:not(:only-child) {
  width: var(--call-self-preview-width) !important;
  max-width: var(--call-self-preview-width) !important;
  height: auto !important;
  min-height: 74px !important;
  aspect-ratio: 3 / 4 !important;
}

#media-div .local-video:only-child {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  width: var(--call-self-preview-width) !important;
  max-width: var(--call-self-preview-width) !important;
  min-height: 74px;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(2, 6, 12, 0.45);
}

#local-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agora-player {
  width: 100%;
  height: 100%;
}

.call-controll {
  margin: 0 !important;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.call-controll i {
  font-size: 18px !important;
}

@media (min-width: 992px) {
  .video-call-active .rightbar-wrapper.video-call-panel-expanded {
    width: var(--chat-right-panel-expanded-width);
    min-width: var(--chat-right-panel-expanded-width);
    max-width: var(--chat-right-panel-expanded-width);
  }

  body.video-call-active.sb-rightnav-toggled #wrapper .rightbar-wrapper.video-call-panel-expanded {
    margin-right: calc(-1 * var(--chat-right-panel-expanded-width));
  }

  .rtl body.video-call-active.sb-rightnav-toggled #wrapper .rightbar-wrapper.video-call-panel-expanded {
    margin-left: calc(-1 * var(--chat-right-panel-expanded-width));
    margin-right: 0;
  }
}

/* Mobile responsive video sizing */
@media (max-width: 768px) {
  .video-call-container {
    padding: 8px;
  }

  #media-div {
    height: var(--call-main-preview-height-mobile);
    min-height: var(--call-main-preview-height-mobile);
    border-radius: 10px;
  }

  .video-call-subtitle {
    display: none;
  }

  #media-div .remote-video {
    border-radius: 10px;
  }

  .local-video {
    width: 48px;
    max-width: 48px;
    min-height: 62px;
    top: 8px;
    right: 8px;
    left: auto;
    border-radius: 8px;
  }

  .call-controllers {
    gap: 6px;
    margin-top: 6px;
  }

  .call-controll {
    width: 32px;
    height: 32px;
  }

  .video-call-mobile-active .page-content-wrapper .topbar {
    z-index: 1200;
  }

  .video-call-mobile-active .video-call-mobile-host .video-call-container {
    border-radius: 12px;
    overflow: hidden;
  }
}

.call-toggle-cam,
.call-toggle-mic,
.call-toggle-fc,
.call-toggle-height {
  background: #2e2e2e;
  border-color: #2e2e2e;
  transition: 0.3s;
}

figure.gif::after {
  z-index: 99;
  width: max-content;
  height: max-content;
  content: "GIF ▶️";
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgb(25, 28, 30);
  padding: 3px 5px;
  border-radius: 3px;
}

.lazyload {
  background-color: #585f6a;
  display: inline-block;
  position: relative;
  -webkit-animation: loading-placeholder 2s ease-in-out infinite;
  animation: loading-placeholder 2s ease-in-out infinite;
}

@-webkit-keyframes loading-placeholder {
  50% {
    opacity: 0.1;
  }
}

@keyframes loading-placeholder {
  50% {
    opacity: 0.1;
  }
}

.lazyloaded {
  background: none;
  animation: none;
}

div[data-msg-type="4"] .message-data {
  background-color: transparent !important;
  box-shadow: none !important;
}

.cht[data-msg-type="4"] .message-data:before,
.cht[data-msg-type="4"] .message-data:after {
  display: none;
}

.emoji-only img.emoji {
  width: 30px;
  height: 30px;
}

.channel-list-bottom .dropdown-toggle:after {
  display: none;
}

.channel-list-bottom .dropdown-toggle {
  border-radius: 5px;
  transition: 0.3s;
}

.channel-list-bottom .dropdown-toggle:hover {
  background-color: #dfe1e5;
}

#selected-lang-toggle {
  display: flex;
}

.link-dark:hover,
.link-dark:focus {
  color: #626976;
}

.current-status.online-status {
  bottom: 0px;
  right: 0;
  left: unset;
}

.channel-list-bottom .dropdown-item {
  padding: 0.3rem 0.75rem;
}

.hashtag {
  color: #51b0ff;
  cursor: pointer;
}

.uppy-caption {
  width: 100%;
  padding: 10px;
}

.file-caption {
  padding: 0px 10px 5px 10px;
  border-radius: 5px;
  margin-top: 0px;
  max-width: 220px;
  line-height: 18px;
  white-space: pre-wrap;
}

.icon-lock {
  display: inline-block;
  width: 8px;
  height: 9px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="%231e293b" height="800px" width="800px" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve"><g id="XMLID_518_"><path id="XMLID_519_" d="M65,330h200c8.284,0,15-6.716,15-15V145c0-8.284-6.716-15-15-15h-15V85c0-46.869-38.131-85-85-85 S80.001,38.131,80.001,85v45H65c-8.284,0-15,6.716-15,15v170C50,323.284,56.716,330,65,330z M110.001,85 c0-30.327,24.673-55,54.999-55c30.327,0,55,24.673,55,55v45H110.001V85z"/></g></svg>');
}

.channel-icon {
  position: relative;
}

.pvt-cnl {
  background: #f2f3f5;
  height: 12px;
  width: 12px;
  position: absolute;
  top: -3px;
  left: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  line-height: 1;
}

.channel-item.active {
  background: #dfe1e5;
}

.active .pvt-cnl,
.channel-item:hover .pvt-cnl {
  background: #dfe1e5;
}

.top-channel-icon {
  position: relative;
}

.top-channel-icon .pvt-cnl {
  background: #f8fafc;
}

.dark .top-channel-icon .icon-lock {
}

.logo.logo-sticky {
  max-height: 32px;
}

.sb-sidenav-toggled .topbar-private {
  position: relative;
}

.voice-container-title {
  color: #2fb344;
  font-weight: 500;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.voice-channel-controls {
  margin-top: 5px;
}

.voice-active .sidebar-height-fix-mt48 {
  height: calc((var(--vh, 1vh) * 100) - 179px);
}

.voice-active .sidebar-height-fix {
  height: calc((var(--vh, 1vh) * 100) - 131px);
}

.dark .alert {
  color: #ffffff;
  background: #464952;
}

/* Override alert-danger for better visibility in dark theme */
.dark .alert-danger {
  background-color: #d63939;
  border-color: #c42e2e;
  color: #ffffff;
}

/* Override alert-success for better visibility in dark theme */
.dark .alert-success {
  background-color: #14532d;
  border-color: #166534;
  color: #bbf7d0;
}

/* Override alert-warning for better visibility in dark theme */
.dark .alert-warning {
  background-color: #713f12;
  border-color: #854d0e;
  color: #fde047;
}

/* Image Censorship / Blur Safety Feature */
.censored-image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;
}

.censored-image-container img {
  filter: blur(25px);
  -webkit-filter: blur(25px);
  transition:
    filter 0.3s ease,
    -webkit-filter 0.3s ease;
  min-width: 100px;
  min-height: 100px;
  object-fit: cover;
}

.censored-image-container.revealed img {
  filter: blur(0);
  -webkit-filter: blur(0);
}

.censored-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.censored-btn {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: #ffffff;
  font-size: 18px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.censored-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
  border-color: #fff;
}

.censored-btn i {
  pointer-events: none;
}

/* Animation for clicking */
.censored-image-container:active {
  transform: scale(0.98);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.censored-image-container:not(.revealed) .censored-overlay {
  animation: pulse 2s ease-in-out infinite;
}

.censored-image-container .censored-buttons {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.rpanel-censored-image-container {
  display: block;
}

.rpanel-censored-image-container img {
  min-width: 0;
  min-height: 0;
}

.rpanel-censored-image-container .censored-buttons {
  top: 6px;
  left: 6px;
  gap: 6px;
}

.rpanel-censored-image-container .censored-btn {
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-width: 1px;
}

.censored-image-container:not(.revealed) .censored-buttons {
  animation: pulse 2s ease-in-out infinite;
}

/* Video Censorship - Always Blurred Thumbnails */
.censored-video-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;
  max-width: 100%;
}

.censored-video-container .video-thumb {
  filter: blur(20px);
  -webkit-filter: blur(20px);
  min-width: 200px;
  min-height: 150px;
  max-width: 100%;
  object-fit: cover;
}

.censored-video-container.revealed .video-thumb {
  filter: blur(0);
  -webkit-filter: blur(0);
}

.censored-video-buttons {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

.censored-video-container:not(.revealed) .censored-video-buttons {
  animation: pulse 2s ease-in-out infinite;
}

.shared-media-video.censored-video-container .censored-btn {
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-width: 1px;
}

.shared-media-video.censored-video-container {
  display: block;
  width: 100%;
  max-width: 100%;
}

.shared-media-video.censored-video-container .video-thumb {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 70px;
  object-fit: cover;
}

/* Hidden Users Section */
.hidden-users-container {
  max-height: 500px;
  overflow-y: auto;
}

.hidden-users-list {
  padding: 10px 0;
}

.hidden-user-item {
  transition: all 0.2s ease;
}

.hidden-user-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hidden-user-avatar .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.hidden-user-name {
  font-size: 1rem;
  color: #333;
}

.hidden-user-username {
  font-size: 0.85rem;
}

.hidden-user-date {
  font-size: 0.8rem;
  margin-top: 2px;
}

.hidden-user-actions .btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.v-profile-tab-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #495057;
  text-decoration: none;
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
}

.v-profile-tab-item:hover {
  background-color: #f8f9fa;
  color: #495057;
}

.v-profile-tab-item.active {
  background-color: #e7f5ff;
  color: #1971c2;
}

.v-profile-tab-item i {
  margin-right: 0.5rem;
}

/* Navigation Badges */
.nav-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: white;
  z-index: 10;
}

.k-badge {
  background-color: #3b82f6;
}

.b-badge {
  background-color: #22c55e;
}

/* Mobile User List Width */
@media (max-width: 768px) {
  .rightbar-wrapper {
    min-width: 85vw;
    width: 85vw;
    max-width: calc(100vw - var(--chat-left-rail-width-mobile));
    overflow-x: hidden;
  }

  body.sb-rightnav-toggled #wrapper .rightbar-wrapper {
    margin-right: 0;
  }
}

/* ===== Toast Notification Quick Reply Styles ===== */
:root {
  --toast-surface: var(--panel-bg, #ffffff);
  --toast-border-color: var(--border-color, rgba(148, 163, 184, 0.25));
  --toast-title-color: var(--default-text-color, #0f172a);
  --toast-body-color: var(--default-text-color, #1f2937);
  --toast-muted-color: var(--muted-text-color, #64748b);
  --toast-shadow-color: rgba(15, 23, 42, 0.22);
  --toast-input-bg: var(--panel-bg, #f8fafc);
  --toast-input-border: var(--border-color, rgba(100, 116, 139, 0.3));
  --toast-input-text: var(--default-text-color, #0f172a);
  --toast-focus-ring: rgba(32, 107, 196, 0.2);
  --toast-primary-accent: var(--accent-color-strong, var(--accent-color, #3b82f6));
  --toast-pill-bg: var(--accent-color-strong, var(--accent-color, #3b82f6));
  --toast-pill-text: #ffffff;
  --toast-close-filter: brightness(0) invert(1);
  --toast-close-opacity: 0.78;
  --toast-close-opacity-hover: 0.96;
}

.dark,
.trueblue {
  --toast-surface: var(--panel-bg, #1f2937);
  --toast-border-color: var(--border-color, rgba(148, 163, 184, 0.35));
  --toast-title-color: var(--default-text-color, #f8fafc);
  --toast-body-color: var(--default-text-color, #e2e8f0);
  --toast-muted-color: var(--muted-text-color, #94a3b8);
  --toast-shadow-color: rgba(0, 0, 0, 0.45);
  --toast-input-bg: rgba(15, 23, 42, 0.5);
  --toast-input-border: var(--border-color, rgba(148, 163, 184, 0.45));
  --toast-input-text: var(--default-text-color, #f8fafc);
  --toast-focus-ring: rgba(96, 165, 250, 0.28);
  --toast-primary-accent: var(--accent-color-strong, var(--accent-color, #60a5fa));
  --toast-pill-bg: var(--accent-color-strong, var(--accent-color, #60a5fa));
  --toast-pill-text: #f8fafc;
  --toast-close-filter: brightness(0) invert(1);
  --toast-close-opacity: 0.86;
  --toast-close-opacity-hover: 1;
}

.toast.toast-modern {
  min-width: 350px;
  max-width: 450px;
  border-radius: 14px;
  background: var(--toast-surface);
  color: var(--toast-body-color);
  border: 1px solid var(--toast-border-color);
  border-left: 4px solid var(--toast-accent, #3b82f6);
  box-shadow: 0 12px 30px var(--toast-shadow-color);
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.toast.toast-modern.toast-modern--primary {
  --toast-accent: var(--toast-primary-accent);
}

.toast.toast-modern.toast-modern--success {
  --toast-accent: #16a34a;
}

.toast.toast-modern.toast-modern--danger,
.toast.toast-modern.toast-modern--error {
  --toast-accent: #ef4444;
}

.toast.toast-modern.toast-modern--warning {
  --toast-accent: #f59e0b;
}

.toast.toast-modern.toast-modern--info {
  --toast-accent: #06b6d4;
}

.toast.toast-modern.toast-modern--secondary {
  --toast-accent: #64748b;
}

.dark .toast.toast-modern.toast-modern--primary,
.trueblue .toast.toast-modern.toast-modern--primary {
  --toast-accent: var(--accent-color, #60a5fa);
}

.dark .toast.toast-modern.toast-modern--success,
.trueblue .toast.toast-modern.toast-modern--success {
  --toast-accent: #15803d;
}

.dark .toast.toast-modern.toast-modern--danger,
.dark .toast.toast-modern.toast-modern--error,
.trueblue .toast.toast-modern.toast-modern--danger,
.trueblue .toast.toast-modern.toast-modern--error {
  --toast-accent: #f87171;
}

.dark .toast.toast-modern.toast-modern--warning,
.trueblue .toast.toast-modern.toast-modern--warning {
  --toast-accent: #fbbf24;
}

.dark .toast.toast-modern.toast-modern--info,
.trueblue .toast.toast-modern.toast-modern--info {
  --toast-accent: #22d3ee;
}

.dark .toast.toast-modern.toast-modern--secondary,
.trueblue .toast.toast-modern.toast-modern--secondary {
  --toast-accent: #94a3b8;
}

.toast.toast-modern .toast-header {
  padding: 0.6rem 0.75rem;
  align-items: center;
  background-color: var(--toast-accent, #3b82f6) !important;
  border-bottom: 1px solid var(--toast-border-color);
}

.toast-modern .toast-avatar {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.toast-modern .toast-title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.toast-modern .toast-pill-new {
  font-size: 0.68rem;
  padding: 0.24rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background-color: var(--toast-pill-bg) !important;
  color: var(--toast-pill-text) !important;
}

.toast.toast-modern .toast-header .btn-close-white {
  filter: var(--toast-close-filter);
  opacity: var(--toast-close-opacity);
}

.toast.toast-modern .toast-header .btn-close-white:hover {
  opacity: var(--toast-close-opacity-hover);
}

.toast.toast-modern .toast-body {
  word-wrap: break-word;
  padding: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--toast-body-color);
}

.toast-modern .toast-message-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.8em;
  color: var(--toast-body-color);
}

.toast-modern .toast-quick-reply {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.toast-modern .toast-quick-reply-modern {
  border-top: 1px solid var(--toast-border-color);
}

.toast-modern .toast-quick-reply .input-group {
  gap: 0.25rem;
}

.toast-modern .toast-quick-reply input.form-control {
  font-size: 0.875rem;
  padding: 0.5rem 0.6rem;
  color: var(--toast-input-text);
  border: 1px solid var(--toast-input-border);
  border-radius: 0.5rem !important;
  background: var(--toast-input-bg);
}

.toast-modern .toast-quick-reply input.form-control:focus {
  border-color: var(--toast-primary-accent);
  box-shadow: 0 0 0 0.18rem var(--toast-focus-ring);
  outline: none;
}

.toast-modern .toast-quick-reply .btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.toast-modern .toast-quick-reply .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.toast-modern .toast-quick-reply .btn i {
  font-size: 1rem;
}

.toast-modern .toast-body .alert-sm {
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
  animation: slideDown 0.3s ease-out;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsive toast */
@media (max-width: 576px) {
  .toast.toast-modern {
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    border-radius: 12px;
  }

  .toast-modern .toast-quick-reply .btn {
    padding: 0.4rem 0.6rem;
  }

  .toast-modern .toast-header img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ========================================
   Mobile Message Dropdown Menu Styles
   ======================================== */

/* Visual feedback for message press on mobile */
@media (max-width: 768px) {
  .cht .message-data {
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .cht .message-data::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .cht .message-data:active::after {
    opacity: 1;
  }
}

.mobile-message-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mobile-message-dropdown.show {
  visibility: visible;
  opacity: 1;
}

.mobile-dropdown-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
}

.mobile-dropdown-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f0f0f0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (prefers-reduced-motion: reduce) {
  .rotate,
  .mobile-message-dropdown,
  .mobile-dropdown-content,
  .cht .message-data::after {
    transition: none !important;
    animation: none !important;
  }
}

.mobile-message-dropdown.show .mobile-dropdown-content {
  transform: translateY(0);
}

.mobile-dropdown-handle {
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  margin: 12px auto 8px;
}

.mobile-dropdown-section {
  padding: 0;
}

.mobile-dropdown-header {
  padding: 12px 20px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tblr-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-reaction-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 16px 16px;
  gap: 8px;
  flex-wrap: wrap;
}

.mobile-reaction-row .reaction-icon {
  width: 48px;
  height: 48px;
  background-size: cover;
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.3s ease;
  opacity: 0;
  transform: scale(0.5);
  border: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.mobile-reaction-row .reaction-icon.show {
  opacity: 1;
  transform: scale(1);
}

.mobile-reaction-row .reaction-icon:active {
  transform: scale(0.85);
  border-color: var(--tblr-primary);
}

.mobile-message-dropdown .dropdown-item {
  padding: 14px 20px;
  font-size: 16px;
  color: var(--tblr-body-color);
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.mobile-message-dropdown .dropdown-item.mobile-open-image {
  font-weight: 700;
  background: #e8f1ff;
  color: #0f3d9e;
  border-left: 4px solid #3b82f6;
}

.mobile-message-dropdown .dropdown-item:active {
  background-color: var(--tblr-active-bg);
}

.mobile-message-dropdown .dropdown-item i {
  font-size: 20px;
  width: 24px;
  min-width: 24px;
}

.mobile-message-dropdown .dropdown-item.text-danger {
  color: var(--tblr-danger);
}

.mobile-message-dropdown .dropdown-divider {
  margin: 8px 0;
  border-top: 1px solid var(--tblr-border-color);
}

/* Dark mode adjustments */
.dark .mobile-dropdown-handle {
  background: rgba(255, 255, 255, 0.2);
}

.dark .mobile-dropdown-content {
  background: var(--tblr-bg-surface-dark, #1e293b);
}

.dark .mobile-dropdown-backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.dark .mobile-message-dropdown .dropdown-item.mobile-open-image {
  background: rgba(56, 139, 253, 0.18);
  color: #dbeafe;
  border-left-color: #60a5fa;
}

/* True Blue theme adjustments - treat as dark theme */
html.trueblue .mobile-dropdown-handle {
  background: rgba(255, 255, 255, 0.2);
}

html.trueblue .mobile-dropdown-content {
  background: #0a1628;
}

html.trueblue .mobile-dropdown-backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.dark .cht .message-data::after {
  background: rgba(96, 165, 250, 0.15);
}

/* Smooth scrolling for overflow */
.mobile-dropdown-content {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.mobile-dropdown-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Animation for reaction icons */
@keyframes reactionPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Ensure mobile dropdown works on all screen sizes up to tablet */
@media (max-width: 768px) {
  .mobile-message-dropdown {
    display: block;
  }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .mobile-message-dropdown {
    display: none !important;
  }
}

/* Mobile navbar theme and rules selector styling */
#mobile-theme-select,
#navbar-theme-select {
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  #mobile-theme-select {
    width: 100%;
    margin-bottom: 10px;
  }

  .navbar-collapse .nav-item.d-md-none {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding-top: 10px;
  }

  .navbar-collapse .nav-item.d-md-none:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }

  .nav-item.d-md-none .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Navbar top icons styling */
.navbar .d-flex.d-md-none {
  gap: 8px !important;
  margin-right: 8px;
}

.navbar .btn-ghost-light {
  border: none;
  background: transparent;
  color: #000 !important;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .btn-ghost-light:hover {
  opacity: 0.7;
}

html.dark .navbar .btn-ghost-light {
  color: #fff !important;
}

html.light .navbar .btn-ghost-light {
  color: #000 !important;
}

html.blue .navbar .btn-ghost-light {
  color: #000 !important;
}

html.red .navbar .btn-ghost-light {
  color: #000 !important;
}

html.green .navbar .btn-ghost-light {
  color: #000 !important;
}

/* Theme dropdown positioning */
#navbar-theme-dropdown {
  background: white;
  border: 1px solid #e0e3e6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  position: absolute !important;
  top: 50px !important;
  right: 8px !important;
  min-width: 180px;
  max-width: 200px;
}

html.dark #navbar-theme-dropdown {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#navbar-theme-dropdown .dropdown-item {
  padding: 10px 12px;
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  color: #000;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s;
}

html.dark #navbar-theme-dropdown .dropdown-item {
  color: #fff;
}

#navbar-theme-dropdown .dropdown-item:hover {
  background: #f0f0f0;
}

html.dark #navbar-theme-dropdown .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

#navbar-theme-dropdown .dropdown-item i {
  min-width: 18px;
}

/* Enhanced navbar toggler (hamburger menu) visibility */
.navbar-toggler {
  border: none;
  opacity: 1;
  padding: 8px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 28px;
  height: 28px;
  background-size: cover;
}

html.dark .navbar-toggler-icon,
html.trueblue .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html.light .navbar-toggler-icon,
html.blue .navbar-toggler-icon,
html.red .navbar-toggler-icon,
html.green .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.15);
}

html.dark .navbar-toggler:focus,
html.trueblue .navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* ===== Scorchat Badge Advertisement ===== */
.scorchat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #ff6b9d 0%, #c94b4b 100%);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(255, 107, 157, 0.3);
  animation: pulse-badge 2s ease-in-out infinite;
}

.scorchat-badge-emoji {
  font-size: 14px;
  line-height: 1;
  animation: beat 1.5s ease-in-out infinite;
}

.scorchat-badge-text {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.3px;
}

.scorchat-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.5);
  background: linear-gradient(135deg, #ff7ba8 0%, #d85a5a 100%);
  text-decoration: none;
}

/* Top nav variation - text only */
.scorchat-badge-top {
  padding: 5px 12px;
  border-radius: 12px;
}

.scorchat-badge-top .scorchat-badge-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Bottom nav variation */
.scorchat-badge-bottom {
  flex-direction: column;
  padding: 4px 8px;
  gap: 2px;
  border-radius: 8px;
}

.scorchat-badge-bottom .scorchat-badge-emoji {
  font-size: 18px;
}

.scorchat-badge-bottom .scorchat-badge-text {
  font-size: 10px;
  font-weight: 700;
}

@keyframes pulse-badge {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(255, 107, 157, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(255, 107, 157, 0.6);
  }
}

@keyframes beat {
  0%, 100% {
    transform: scale(1);
  }
  10%, 30% {
    transform: scale(1.1);
  }
  20%, 40% {
    transform: scale(0.95);
  }
}
html.trueblue .modal-content {
  background-color: #1a3a52;
  color: #fff;
  border: 1px solid #2d5a7b;
}

html.trueblue .modal-header {
  background-color: #0f2540;
  border-bottom: 1px solid #2d5a7b;
  color: #fff;
}

html.trueblue .modal-body {
  color: #fff;
}

html.trueblue .modal-title {
  color: #fff;
}

html.trueblue .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* =================================================================
   TABLET-SPECIFIC OPTIMIZATIONS (768px - 1024px)
   ================================================================= */

/* Tablet breakpoint: Optimized for iPad, Android tablets, and desktop mode */
@media (min-width: 768px) and (max-width: 1024px) {
  
  /* Touch targets: Ensure all interactive elements are at least 44x44px */
  button, .btn, a.btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
    touch-action: manipulation;
  }

  /* Form controls: Better sizing for tablet touch input */
  .form-control, .form-select, input[type="text"], input[type="email"], 
  input[type="password"], input[type="number"], textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 0.75rem 1rem;
  }

  textarea {
    min-height: 88px; /* 2x touch target height */
  }

  /* Chat interface: Better spacing and sizing */
  .chat-scroll {
    padding: 1rem;
  }

  .cht {
    margin-bottom: 0.75rem;
  }

  /* Message bubbles: Slightly larger on tablets */
  .cht .message-content {
    padding: 0.75rem 1rem;
    font-size: 15px;
    line-height: 1.5;
  }

  /* User list: Optimized width for tablet landscape */
  .user-list {
    max-width: 280px;
  }

  /* Modals: Better sizing for tablet screens */
  .modal-dialog {
    max-width: 600px;
    margin: 2rem auto;
  }

  .modal-content {
    border-radius: 12px;
  }

  /* Navigation: Improved spacing */
  .navbar {
    padding: 0.75rem 1.5rem;
  }

  .nav-link {
    padding: 0.75rem 1rem;
    font-size: 16px;
  }

  /* Dropdowns: Larger touch targets */
  .dropdown-item {
    padding: 0.75rem 1.5rem;
    font-size: 15px;
    min-height: 44px;
  }

  /* Tables: Better spacing */
  .table td, .table th {
    padding: 0.875rem;
  }

  /* Cards: Improved padding */
  .card-body {
    padding: 1.5rem;
  }

  /* Emoji picker: Larger targets */
  .emoji-picker .emoji-item {
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
  }

  /* Image thumbnails: Appropriate size for tablets */
  .changelog-thumbnail {
    width: 200px;
    height: 200px;
  }

  /* Lightbox: Full screen on tablets */
  .lightbox-overlay {
    padding: 2rem;
  }

  .lightbox-overlay img {
    max-width: 90%;
    max-height: 90vh;
  }

  /* Chat actions: Show on tablets like desktop */
  .chat-actions {
    display: flex !important;
  }

  /* Message timestamps: Always visible on tablets */
  .cht .message-time {
    opacity: 0.7;
    font-size: 11px;
  }

  /* Voice/video call controls: Better spacing */
  .call-controls button {
    min-width: 56px;
    min-height: 56px;
    margin: 0 0.5rem;
  }

  /* File upload: Larger drop zone */
  .file-upload-area {
    min-height: 120px;
    padding: 2rem;
  }

  /* Settings panels: Better layout */
  .settings-panel {
    padding: 1.5rem;
  }

  /* Search bars: Optimized height */
  .search-bar input {
    height: 44px;
    font-size: 16px;
  }

  /* Avatar sizes: Appropriate for tablets */
  .avatar {
    width: 44px;
    height: 44px;
  }

  .avatar-lg {
    width: 64px;
    height: 64px;
  }

  /* Room list: Better grid layout */
  .room-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  /* Badges and tags: Larger text */
  .badge, .tag {
    font-size: 13px;
    padding: 0.375rem 0.75rem;
  }

  /* Tooltips: Slightly larger text */
  .tooltip {
    font-size: 13px;
  }

  /* Context menus: Improved spacing */
  .context-menu {
    min-width: 200px;
  }

  .context-menu-item {
    padding: 0.75rem 1.25rem;
    min-height: 44px;
  }

  /* Notifications: Better sizing */
  .notification {
    padding: 1rem 1.5rem;
    font-size: 15px;
  }

  /* Admin tables: Horizontal scroll with better spacing */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* VIP upgrade cards: Optimized layout */
  .vip-card {
    padding: 1.5rem;
  }

  /* Changelog: Better image grid */
  .changelog-images {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
  }
}

/* Tablet landscape optimization (orientation-specific) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Maximize horizontal space in landscape mode */
  .chat-container {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 0;
  }

  /* Side panels: Fixed width in landscape */
  .left-panel, .right-panel {
    width: 280px;
  }

  /* Chat area: Fill remaining space */
  .chat-main {
    flex: 1;
  }

  /* Modal: Utilize horizontal space */
  .modal-dialog {
    max-width: 720px;
  }
}

/* Tablet portrait optimization (orientation-specific) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Stack vertically in portrait mode */
  .chat-container {
    display: flex;
    flex-direction: column;
  }

  /* Navigation: Full width */
  .navbar {
    width: 100%;
  }

  /* User list: Collapsible in portrait */
  .user-list {
    max-height: 40vh;
    overflow-y: auto;
  }

  /* Modal: Full width with margins */
  .modal-dialog {
    margin: 1rem;
    max-width: calc(100% - 2rem);
  }
}

/* High DPI tablets (Retina displays) */
@media (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2),
       (min-width: 768px) and (max-width: 1024px) and (min-resolution: 192dpi) {
  /* Sharper borders on high DPI screens */
  .card, .modal-content, .dropdown-menu {
    border-width: 0.5px;
  }

  /* Crisper text rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}


```