/* chat_room inline style block 1 */
@media (prefers-reduced-motion: reduce) {
  .chats .animate__animated {
    -webkit-animation-duration: var(--animate-duration, 1s) !important;
    animation-duration: var(--animate-duration, 1s) !important;
    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
  .chats .animate__animated.animate__fast {
    -webkit-animation-duration: calc(
      var(--animate-duration, 1s) * 0.8
    ) !important;
    animation-duration: calc(var(--animate-duration, 1s) * 0.8) !important;
  }
  .chats .animate__animated.animate__slow {
    -webkit-animation-duration: calc(
      var(--animate-duration, 1s) * 2
    ) !important;
    animation-duration: calc(var(--animate-duration, 1s) * 2) !important;
  }
  .chats .animate__animated.animate__slower {
    -webkit-animation-duration: calc(
      var(--animate-duration, 1s) * 3
    ) !important;
    animation-duration: calc(var(--animate-duration, 1s) * 3) !important;
  }
}

/* chat_room inline style block 2 */
html.android-app-view,
html.android-app-view body {
  height: 100%;
  overflow: hidden;
}

html.android-app-view .room-bar,
html.android-app-view #sidebar-wrapper,
html.android-app-view .navbar.topbar,
html.android-app-view .private-list-header,
html.android-app-view .radio-popup,
html.android-app-view .action-list {
  display: none !important;
}

html.android-app-view #wrapper,
html.android-app-view .main-container,
html.android-app-view .main-tab-content,
html.android-app-view .page-content-wrapper,
html.android-app-view .container-fluid.p-0.group-chat,
html.android-app-view .wrapper,
html.android-app-view .main-panel {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.android-app-view .chat-msg-list {
  border-radius: 0 !important;
}

.explore-room-directory {
  --explore-room-surface: #ffffff;
  --explore-room-border: #d5deea;
  --explore-room-text: #0f172a;
  --explore-room-muted: #64748b;
  --explore-room-accent: var(
    --accent-color-strong,
    var(--accent-color, #0f6fdb)
  );
  --explore-room-accent-soft: rgba(15, 111, 219, 0.08);
  --explore-room-accent-strong: rgba(15, 111, 219, 0.18);
  --explore-room-success: var(--tblr-success, #0f9d58);
  margin-top: 0.8rem;
}

.dark .explore-room-directory,
.trueblue .explore-room-directory {
  --explore-room-surface: rgba(15, 23, 42, 0.82);
  --explore-room-border: rgba(148, 163, 184, 0.28);
  --explore-room-text: #e2e8f0;
  --explore-room-muted: #94a3b8;
  --explore-room-accent: var(
    --accent-color-strong,
    var(--accent-color, #7dd3fc)
  );
  --explore-room-accent-soft: rgba(56, 189, 248, 0.15);
  --explore-room-accent-strong: rgba(56, 189, 248, 0.26);
  --explore-room-success: var(--tblr-success, #4ade80);
}

@supports (color: color-mix(in srgb, #ffffff 50%, #000000 50%)) {
  .explore-room-directory {
    --explore-room-accent-soft: color-mix(
      in srgb,
      var(--explore-room-accent) 10%,
      transparent
    );
    --explore-room-accent-strong: color-mix(
      in srgb,
      var(--explore-room-accent) 22%,
      transparent
    );
  }

  .dark .explore-room-directory,
  .trueblue .explore-room-directory {
    --explore-room-accent-soft: color-mix(
      in srgb,
      var(--explore-room-accent) 20%,
      transparent
    );
    --explore-room-accent-strong: color-mix(
      in srgb,
      var(--explore-room-accent) 34%,
      transparent
    );
  }
}

.explore-room-directory .explore-directory-controls {
  border: 1px solid var(--explore-room-border);
  border-radius: 12px;
  background: linear-gradient(
    150deg,
    var(--explore-room-surface) 0%,
    var(--explore-room-accent-soft) 100%
  );
  padding: 0.65rem;
  margin-bottom: 0.6rem;
}

.explore-room-directory .explore-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 0.5rem;
  align-items: center;
}

.explore-room-directory .explore-control-search .form-control,
.explore-room-directory .explore-control-sort {
  border: 1px solid var(--explore-room-border);
  background: var(--explore-room-surface);
  color: var(--explore-room-text);
  min-height: 40px;
}

.explore-room-directory .explore-control-search .input-icon-addon {
  color: var(--explore-room-muted);
}

.explore-room-directory .forum-topic-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 100px 96px;
  gap: 0.5rem;
  padding: 0.46rem 0.58rem;
  border: 1px solid var(--explore-room-border);
  border-radius: 10px;
  background: var(--explore-room-surface);
  color: var(--explore-room-muted);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.45rem;
}

.explore-room-directory .forum-topic-head i {
  color: var(--explore-room-accent);
}

.explore-room-directory .room-list-row {
  display: flex;
  flex-direction: column;
  gap: 0.58rem;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.explore-room-directory .forum-room-card {
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--explore-room-border);
  border-radius: 12px;
  background: linear-gradient(
    150deg,
    var(--explore-room-surface) 0%,
    var(--explore-room-accent-soft) 100%
  );
  padding: 0.62rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 0.66rem;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.explore-room-directory .forum-room-card:hover {
  border-color: var(--explore-room-accent-strong);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.explore-room-directory .forum-room-main {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 0.58rem;
  min-width: 0;
}

.explore-room-directory .forum-room-cover {
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid var(--explore-room-border);
  overflow: hidden;
  background: linear-gradient(
    140deg,
    var(--explore-room-accent-strong) 0%,
    var(--explore-room-accent-soft) 100%
  );
}

.explore-room-directory .forum-room-cover-badge,
.explore-room-directory .room-card-cover-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  border: 1px solid rgba(147, 197, 253, 0.34);
  background: linear-gradient(155deg, #113f7a 0%, #1769b5 54%, #1b8fd0 100%);
  color: #e0f2fe;
  text-align: center;
  padding: 0.5rem;
  overflow: hidden;
}

.explore-room-directory .forum-room-cover-badge.badge-tone-2,
.explore-room-directory .room-card-cover-badge.badge-tone-2 {
  background: linear-gradient(155deg, #3b205f 0%, #6d28d9 56%, #7c3aed 100%);
}
.explore-room-directory .forum-room-cover-badge.badge-tone-3,
.explore-room-directory .room-card-cover-badge.badge-tone-3 {
  background: linear-gradient(155deg, #0f5132 0%, #198754 56%, #20c997 100%);
}
.explore-room-directory .forum-room-cover-badge.badge-tone-4,
.explore-room-directory .room-card-cover-badge.badge-tone-4 {
  background: linear-gradient(155deg, #4a3210 0%, #b45309 56%, #f59e0b 100%);
}
.explore-room-directory .forum-room-cover-badge.badge-tone-5,
.explore-room-directory .room-card-cover-badge.badge-tone-5 {
  background: linear-gradient(155deg, #7f1d1d 0%, #dc2626 56%, #ef4444 100%);
}
.explore-room-directory .forum-room-cover-badge.badge-tone-6,
.explore-room-directory .room-card-cover-badge.badge-tone-6 {
  background: linear-gradient(155deg, #164e63 0%, #0891b2 56%, #06b6d4 100%);
}
.explore-room-directory .forum-room-cover-badge.badge-tone-7,
.explore-room-directory .room-card-cover-badge.badge-tone-7 {
  background: linear-gradient(155deg, #14532d 0%, #22c55e 56%, #4ade80 100%);
}
.explore-room-directory .forum-room-cover-badge.badge-tone-8,
.explore-room-directory .room-card-cover-badge.badge-tone-8 {
  background: linear-gradient(155deg, #1e293b 0%, #334155 56%, #475569 100%);
}

.explore-room-directory .forum-room-cover-badge-text,
.explore-room-directory .room-card-cover-badge-text {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.01em;
  font-size: clamp(
    0.6rem,
    calc(1.45rem - (var(--badge-char-count, 10) * 0.05rem)),
    1.32rem
  );
  text-wrap: balance;
  max-width: 100%;
}

.explore-room-directory
  .forum-room-cover-badge.is-short
  .forum-room-cover-badge-text,
.explore-room-directory
  .room-card-cover-badge.is-short
  .room-card-cover-badge-text {
  font-size: clamp(0.82rem, 1.7vw, 1.38rem);
}
.explore-room-directory
  .forum-room-cover-badge.is-medium
  .forum-room-cover-badge-text,
.explore-room-directory
  .room-card-cover-badge.is-medium
  .room-card-cover-badge-text {
  font-size: clamp(0.68rem, 1.48vw, 1.2rem);
}
.explore-room-directory
  .forum-room-cover-badge.is-long
  .forum-room-cover-badge-text,
.explore-room-directory
  .room-card-cover-badge.is-long
  .room-card-cover-badge-text {
  font-size: clamp(0.58rem, 1.26vw, 0.98rem);
}
.explore-room-directory
  .forum-room-cover-badge.is-xlong
  .forum-room-cover-badge-text,
.explore-room-directory
  .room-card-cover-badge.is-xlong
  .room-card-cover-badge-text {
  font-size: clamp(0.5rem, 1.1vw, 0.86rem);
}

.explore-room-directory .forum-room-content {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  align-content: center;
}

.explore-room-directory .forum-room-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.48rem;
}

.explore-room-directory .forum-room-title {
  margin: 0;
  font-size: 1.02rem;
  color: var(--explore-room-text);
  line-height: 1.2;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-room-directory .room-enter-cta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--explore-room-accent);
  border: 1px solid var(--explore-room-accent-strong);
  border-radius: 999px;
  padding: 0.22rem 0.54rem;
  background: var(--explore-room-accent-soft);
  white-space: nowrap;
}

.explore-room-directory .forum-room-enter-hint {
  width: 1.56rem;
  height: 1.56rem;
  border-radius: 999px;
  border: 1px solid var(--explore-room-accent-strong);
  color: var(--explore-room-accent);
  background: var(--explore-room-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(148, 197, 253, 0.28) inset;
  animation: exploreRoomEnterNudge 1.8s ease-in-out infinite;
}

.explore-room-directory .forum-room-enter-hint i {
  font-size: 0.84rem;
  line-height: 1;
}

.explore-room-directory .forum-room-card:hover .forum-room-enter-hint,
.explore-room-directory .forum-room-card:focus-visible .forum-room-enter-hint {
  animation-play-state: paused;
  transform: translateX(1px);
}

@keyframes exploreRoomEnterNudge {
  0%,
  100% {
    transform: translateX(0);
  }

  45%,
  55% {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-room-directory .forum-room-enter-hint {
    animation: none !important;
  }
}

.explore-room-directory .forum-room-desc {
  margin: 0;
  font-size: 0.83rem;
  color: var(--explore-room-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.explore-room-directory .forum-room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.explore-room-directory .forum-room-tag {
  border: 1px solid var(--explore-room-border);
  border-radius: 999px;
  padding: 0.14rem 0.48rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--explore-room-muted);
  background: rgba(148, 163, 184, 0.1);
}

.explore-room-directory .forum-room-tag.is-public {
  border-color: var(--explore-room-accent-strong);
  color: var(--explore-room-accent);
  background: var(--explore-room-accent-soft);
}

.explore-room-directory .forum-room-tag.is-private {
  border-color: rgba(168, 85, 247, 0.34);
  color: #7c3aed;
  background: rgba(168, 85, 247, 0.12);
}

.explore-room-directory .forum-room-tag.is-online {
  border-color: rgba(16, 185, 129, 0.34);
  color: var(--explore-room-success);
  background: rgba(16, 185, 129, 0.12);
}

.explore-room-directory .forum-room-stats {
  border-left: 1px dashed var(--explore-room-border);
  padding-left: 0.72rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  align-content: center;
}

.explore-room-directory .forum-room-stat-number {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.24rem;
  color: var(--explore-room-text);
  font-weight: 800;
  line-height: 1.1;
}

.explore-room-directory .forum-room-stat-number.is-online {
  color: var(--explore-room-success);
}

.explore-room-directory .forum-room-stat-label {
  display: block;
  color: var(--explore-room-muted);
  font-size: 0.72rem;
  line-height: 1.15;
}

@media (max-width: 991.98px) {
  .explore-room-directory {
    margin-top: 0.4rem;
  }

  .explore-room-directory .forum-topic-head {
    display: none;
  }

  .explore-room-directory .forum-room-card {
    grid-template-columns: 1fr;
    gap: 0.54rem;
  }

  .explore-room-directory .forum-room-main {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 0.5rem;
  }

  .explore-room-directory .forum-room-cover {
    width: 108px;
  }

  .explore-room-directory .forum-room-stats {
    border-left: 0;
    border-top: 1px dashed var(--explore-room-border);
    padding-left: 0;
    padding-top: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explore-room-directory .forum-room-stat-number {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .explore-room-directory .forum-room-main {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .explore-room-directory .forum-room-cover {
    width: 96px;
  }

  .explore-room-directory .forum-room-title {
    font-size: 0.96rem;
  }

  .explore-room-directory .forum-room-desc {
    font-size: 0.79rem;
  }
}

/* chat_room inline style block 3 */
.mobile-bottom-nav .mk-mobile-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* chat_room inline style block 4 */
.hidden-users-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
/* Theme-aware hidden users table */
.hidden-users-container .table {
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
  table-layout: fixed;
  width: 100% !important;
}
.hidden-users-container .table thead th {
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--tblr-border-color);
  padding: 0.65rem 0.85rem;
}
.hidden-users-container .table tbody td {
  background: transparent !important;
  border-bottom: 1px solid var(--tblr-border-color);
  padding: 0.6rem 0.85rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hidden-users-container .table tbody tr:hover td {
  background: var(--tblr-bg-surface) !important;
}
/* Override all striping */
#hidden_users_table tbody tr:nth-of-type(even) > *,
#hidden_users_table tbody tr:nth-of-type(odd) > *,
#hidden_users_table.dataTable tbody tr.odd > *,
#hidden_users_table.dataTable tbody tr.even > *,
#hidden_me_users_table tbody tr:nth-of-type(even) > *,
#hidden_me_users_table tbody tr:nth-of-type(odd) > *,
#hidden_me_users_table.dataTable tbody tr.odd > *,
#hidden_me_users_table.dataTable tbody tr.even > * {
  background-color: transparent !important;
  background: transparent !important;
}
#hidden_users_table tbody tr:hover > *,
#hidden_me_users_table tbody tr:hover > * {
  background: var(--tblr-bg-surface) !important;
}
/* Avatar styling */
.hidden-users-container .rounded-circle {
  border: 2px solid var(--tblr-border-color);
}
/* Unhide button */
.hidden-users-container .unhide-user-btn {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  color: var(--tblr-body-color);
  border-radius: 6px;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  transition: all 0.15s;
}
.hidden-users-container .unhide-user-btn:hover {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #fff;
}
/* DataTables info/pagination */
.hidden-users-container .dataTables_info {
  color: var(--tblr-secondary);
  font-size: 0.8rem;
  padding-top: 0.75rem;
}
.hidden-users-container .dataTables_paginate .paginate_button {
  color: var(--tblr-body-color) !important;
  border: 1px solid var(--tblr-border-color) !important;
  background: var(--tblr-bg-surface) !important;
  border-radius: 6px !important;
  margin: 0 2px;
  font-size: 0.8rem;
}
.hidden-users-container .dataTables_paginate .paginate_button.current,
.hidden-users-container .dataTables_paginate .paginate_button:hover {
  background: var(--tblr-primary) !important;
  border-color: var(--tblr-primary) !important;
  color: #fff !important;
}
.hidden-users-container .dataTables_processing {
  color: var(--tblr-secondary);
}
.hidden-users-container .dataTables_empty {
  color: var(--tblr-secondary);
  font-size: 0.9rem;
  padding: 2rem 0 !important;
}
.hidden-users-container .profile-list-block {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hidden-users-container .profile-list-block + .profile-list-block {
  margin-top: 1.5rem;
}
.hidden-users-container .profile-list-title {
  margin-bottom: 0.75rem;
}
.hidden-users-container .profile-list-block .table {
  margin-bottom: 0;
}
.hidden-users-container .dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* chat_room inline style block 5 */
.blocked-users-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
/* Theme-aware blocked users table */
.blocked-users-container .table {
  color: var(--tblr-body-color);
  border-color: var(--tblr-border-color);
  table-layout: fixed;
  width: 100% !important;
}
.blocked-users-container .table thead th {
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--tblr-border-color);
  padding: 0.65rem 0.85rem;
}
.blocked-users-container .table tbody td {
  background: transparent !important;
  border-bottom: 1px solid var(--tblr-border-color);
  padding: 0.6rem 0.85rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.blocked-users-container .table tbody tr:hover td {
  background: var(--tblr-bg-surface) !important;
}
/* Override all striping */
#blocked_users_table tbody tr:nth-of-type(even) > *,
#blocked_users_table tbody tr:nth-of-type(odd) > *,
#blocked_users_table.dataTable tbody tr.odd > *,
#blocked_users_table.dataTable tbody tr.even > *,
#blocked_me_users_table tbody tr:nth-of-type(even) > *,
#blocked_me_users_table tbody tr:nth-of-type(odd) > *,
#blocked_me_users_table.dataTable tbody tr.odd > *,
#blocked_me_users_table.dataTable tbody tr.even > * {
  background-color: transparent !important;
  background: transparent !important;
}
#blocked_users_table tbody tr:hover > *,
#blocked_me_users_table tbody tr:hover > * {
  background: var(--tblr-bg-surface) !important;
}
/* Avatar styling */
.blocked-users-container .rounded-circle {
  border: 2px solid var(--tblr-border-color);
}
/* Unblock button */
.blocked-users-container .unblock-user-btn {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  color: var(--tblr-body-color);
  border-radius: 6px;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  transition: all 0.15s;
}
.blocked-users-container .unblock-user-btn:hover {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #fff;
}
/* DataTables info/pagination */
.blocked-users-container .dataTables_info {
  color: var(--tblr-secondary);
  font-size: 0.8rem;
  padding-top: 0.75rem;
}
.blocked-users-container .dataTables_paginate .paginate_button {
  color: var(--tblr-body-color) !important;
  border: 1px solid var(--tblr-border-color) !important;
  background: var(--tblr-bg-surface) !important;
  border-radius: 6px !important;
  margin: 0 2px;
  font-size: 0.8rem;
}
.blocked-users-container .dataTables_paginate .paginate_button.current,
.blocked-users-container .dataTables_paginate .paginate_button:hover {
  background: var(--tblr-primary) !important;
  border-color: var(--tblr-primary) !important;
  color: #fff !important;
}
.blocked-users-container .dataTables_processing {
  color: var(--tblr-secondary);
}
.blocked-users-container .dataTables_empty {
  color: var(--tblr-secondary);
  font-size: 0.9rem;
  padding: 2rem 0 !important;
}
.blocked-users-container .profile-list-block {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.blocked-users-container .profile-list-block + .profile-list-block {
  margin-top: 1.5rem;
}
.blocked-users-container .profile-list-title {
  margin-bottom: 0.75rem;
}
.blocked-users-container .profile-list-block .table {
  margin-bottom: 0;
}
.blocked-users-container .dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* chat_room inline style block 6 */
/* report actions are now always visible */

/* chat_room inline style block 7 */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
.user-list-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.01)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 1rem;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
body.theme-light .user-list-card {
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.08),
    rgba(13, 110, 253, 0.02)
  );
  border-color: rgba(13, 110, 253, 0.12);
}
.user-list-header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.user-list-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.user-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--tblr-primary, #2fb344) 0%,
    rgba(47, 179, 68, 0.85) 100%
  );
  color: #fff;
  box-shadow: 0 2px 8px rgba(47, 179, 68, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 28px;
}
body.theme-light .user-count-badge {
  background: linear-gradient(
    135deg,
    #0d6efd 0%,
    rgba(13, 110, 253, 0.85) 100%
  );
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}
.user-list-subtitle {
  font-size: 0.8rem;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.6));
  margin: 0;
  margin-top: auto;
  padding-top: 0.75rem;
}
body.theme-light .user-list-subtitle {
  color: #111827;
}
.user-list-actions .refresh-user-list {
  color: var(--tblr-muted, rgba(255, 255, 255, 0.6));
}
.user-list-actions .refresh-user-list:hover {
  color: var(--tblr-primary, #2fb344);
}
.user-list-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}
.user-list-setting-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  padding: 0.28rem 0.8rem;
  transition: all 0.2s ease;
}
.user-list-setting-static {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(47, 179, 68, 0.45);
  background: rgba(47, 179, 68, 0.12);
  color: #9be8aa;
  font-size: 0.72rem;
  padding: 0.28rem 0.8rem;
}
.user-list-setting-static .ti {
  font-size: 0.9rem;
}
body.theme-light .user-list-setting-static {
  color: #146c43;
  border-color: rgba(20, 108, 67, 0.45);
  background: rgba(25, 135, 84, 0.12);
}
.user-list-setting-btn .ti {
  font-size: 0.9rem;
}
body.theme-light .user-list-setting-btn {
  border-color: rgba(13, 110, 253, 0.2);
}
.user-search-row {
  margin-bottom: 0.75rem;
}
.user-list-discovery-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
.user-list-discovery-toolbar .form-select {
  min-height: 32px;
  padding: 0.2rem 1.8rem 0.2rem 0.55rem;
  font-size: 0.75rem;
  border-radius: 10px;
}
.user-list-discovery-meta {
  min-height: 18px;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.67));
}
.user-list-discovery-meta.is-warning {
  color: #f59f00;
}
.user-list-discovery-meta.is-info {
  color: #5ea7ff;
}
.user-search-input {
  position: relative;
}
.user-search-input .clear-user-search {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.6));
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.user-search-input input:not(:placeholder-shown) ~ .clear-user-search,
.user-search-input input:focus ~ .clear-user-search {
  opacity: 0.85;
  pointer-events: auto;
}
.user-search-input .clear-user-search:hover {
  color: var(--tblr-danger, #f03d3d);
}

.user-list-card--discord {
  padding: 0.62rem 0.62rem 0.52rem;
  gap: 0.42rem;
}

.user-list-card--discord .user-list-compact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.user-list-card--discord .user-list-title {
  margin-bottom: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.user-search-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: rgba(15, 23, 42, 0.18);
  color: var(--tblr-muted, rgba(255, 255, 255, 0.82));
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.33rem 0.52rem;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease;
}

body.theme-light .user-search-collapse-toggle {
  background: rgba(241, 245, 249, 0.9);
  color: rgba(15, 23, 42, 0.8);
}

.user-search-collapse-toggle:hover {
  border-color: rgba(94, 167, 255, 0.72);
  background: rgba(94, 167, 255, 0.12);
}

.user-search-collapse-toggle .label-expanded {
  display: none;
}

.user-search-collapse-toggle.is-expanded .label-collapsed {
  display: none;
}

.user-search-collapse-toggle.is-expanded .label-expanded {
  display: inline;
}

.user-search-collapse-toggle .toggle-chevron {
  transition: transform 0.18s ease;
}

.user-search-collapse-toggle.is-expanded .toggle-chevron {
  transform: rotate(180deg);
}

.user-search-shell {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.18);
  padding: 0.46rem;
  position: relative;
  z-index: 1;
  transition:
    padding 0.18s ease,
    background-color 0.18s ease;
}

body.theme-light .user-search-shell {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.34);
}

.user-search-shell .user-list-discovery-toolbar {
  margin-bottom: 0;
}

.user-search-shell .user-list-discovery-toolbar--stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.42rem;
}

.user-advanced-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 0.4rem;
  margin-top: 0.42rem;
}

.user-age-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.26rem;
}

.user-age-range-divider {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.72));
}

body.theme-light .user-age-range-divider {
  color: rgba(15, 23, 42, 0.58);
}

.user-age-filter .form-control,
.user-gender-filter-wrap .form-select {
  min-height: 30px;
  padding-top: 0.16rem;
  padding-bottom: 0.16rem;
  font-size: 0.72rem;
}

.user-age-missing-note {
  margin-top: 0.32rem;
  font-size: 0.64rem;
  color: #f6c453;
  min-height: 14px;
}

body.theme-light .user-age-missing-note {
  color: #b45309;
}

.user-discovery-control {
  min-width: 0;
}

.user-discovery-label {
  display: inline-flex;
  margin-bottom: 0.2rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.8));
}

body.theme-light .user-discovery-label {
  color: rgba(15, 23, 42, 0.72);
}

.user-search-shell .form-select,
.user-search-shell .form-control {
  min-width: 0;
}

.user-search-shell.is-collapsed {
  padding: 0.34rem;
}

.user-search-shell.is-collapsed .user-discovery-label {
  display: none;
}

.user-search-shell.is-collapsed .user-list-discovery-toolbar--stacked {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.34rem;
}

.user-search-shell.is-collapsed .user-search-input .form-control,
.user-search-shell.is-collapsed .user-room-view-selector {
  min-height: 30px;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 0.74rem;
}

.user-search-shell.is-collapsed .user-advanced-filters {
  display: none;
}

.user-search-shell.is-collapsed .user-age-missing-note {
  margin-top: 0.24rem;
}

.user-list-card--discord .user-filter-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  width: 100%;
  border-radius: 10px;
  padding: 0.2rem;
  gap: 0.2rem;
  margin-bottom: 0.36rem;
}

.user-list-card--discord .user-filter-chip {
  width: 100%;
  justify-content: center;
  padding: 0.32rem 0.2rem;
  min-height: 24px;
  border-radius: 8px;
}

.user-list-card--discord .user-list-discovery-meta {
  min-height: 15px;
  margin-bottom: 0.28rem;
  font-size: 0.66rem;
}

.user-list-content .user-row {
  min-height: 48px;
  content-visibility: auto;
  contain: layout paint;
  contain-intrinsic-size: 48px;
}

.user-list-content .user-row:active {
  transform: translateY(0) scale(0.992);
}

.channel-user-details {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  gap: 0.1rem;
}

.user-name-row {
  min-width: 0;
  gap: 0.2rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
  text-align: left;
}

.user-name-row .channel-user-name {
  min-width: 0;
  flex: 0 1 auto;
}

.user-name-row .online-status,
.user-name-row .verified-user-icon-inline,
.user-name-row .guest-user-badge,
.user-name-row .user-role-badge,
.user-name-row .flag {
  flex: 0 0 auto;
}

.user-name-row .online-status {
  margin-left: 0.18rem;
  width: 0.62rem;
  height: 0.62rem;
  min-width: 0.62rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.82);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.34);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: #64748b;
}

body.theme-light .user-name-row .online-status {
  border-color: rgba(248, 250, 252, 0.96);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2);
}

.user-name-row .online-status .ti {
  display: none;
}

.user-name-row .online-status.online {
  background: #22c55e;
}

.user-name-row .online-status.away {
  background: #f59e0b;
}

.user-name-row .online-status.busy {
  background: #ef4444;
}

.user-name-row .online-status.offline {
  background: #64748b;
}

.user-list-content .user-status {
  margin-top: 0.08rem;
  font-size: 0.63rem;
  line-height: 1.2;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.68));
  display: block;
  min-width: 0;
  width: 100%;
  text-align: left;
}

body.theme-light .user-list-content .user-status {
  color: rgba(15, 23, 42, 0.58);
}

.user-name-row .verified-user-icon-inline {
  margin-left: 0;
}

.user-name-row .guest-user-badge {
  margin-left: 0;
  padding: 0.06rem 0.34rem;
  font-size: 0.56rem;
  line-height: 1;
  align-self: center;
}

.user-profile-preview {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.61rem;
  line-height: 1.22;
  opacity: 0.9;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: 0.16rem 0.34rem;
  margin-left: 0.16rem;
  text-transform: uppercase;
}

.user-role-badge-admin {
  color: #ffb347;
  border-color: rgba(255, 179, 71, 0.45);
  background: rgba(255, 179, 71, 0.14);
}

.user-role-badge-moderator {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(14, 116, 144, 0.22);
}

.user-role-badge-member {
  color: rgba(226, 232, 240, 0.9);
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.12);
}

body.theme-light .user-role-badge-member {
  color: rgba(15, 23, 42, 0.62);
}

.user-presence-group,
.user-room-group {
  margin-bottom: 0.32rem;
}

.user-presence-group-toggle,
.user-room-group-toggle {
  border-radius: 8px;
  padding: 0.28rem 0.42rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-presence-group-body,
.user-room-group-body {
  padding-top: 0.2rem;
}

@media (max-width: 640px) {
  .user-list-card--discord {
    padding: 0.5rem;
    gap: 0.34rem;
  }

  .user-search-shell.is-collapsed .user-list-discovery-toolbar--stacked {
    grid-template-columns: 1fr;
  }

  .user-advanced-filters {
    grid-template-columns: 1fr;
  }

  .user-role-badge-member {
    display: none;
  }

  .user-list-content .user-row {
    min-height: 38px;
    padding: 0.32rem 0.38rem;
  }
}
.user-filter-pills {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-bottom: 0.45rem;
  padding: 0.22rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.12);
}
.user-list-grouping-controls {
  display: none;
}
.user-group-mode-btn {
  display: none;
}
.user-group-mode-btn.active {
  display: none;
}
.user-role-grouping-toggle {
  display: none;
}
.user-role-grouping-toggle input {
  display: none;
}
.user-filter-chip {
  border-radius: 999px;
  border: 0;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.72));
  background: transparent;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  padding: 0.34rem 0.64rem;
  min-height: 26px;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}
body.theme-light .user-filter-chip {
  color: rgba(15, 23, 42, 0.7);
}
.user-filter-chip.active {
  background: #2f6fed;
  color: #fff;
  box-shadow: 0 5px 12px rgba(47, 111, 237, 0.26);
}
.user-filter-chip.active[data-filter="online"] {
  background: #1f9d57;
  box-shadow: 0 5px 12px rgba(31, 157, 87, 0.24);
}
.user-filter-chip.active[data-filter="away"] {
  background: #d98a1a;
  box-shadow: 0 5px 12px rgba(217, 138, 26, 0.24);
}
.user-filter-chip.active[data-filter="offline"] {
  background: #5f6b7a;
  box-shadow: 0 5px 12px rgba(95, 107, 122, 0.24);
}
.user-row.dropdown {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.user-list-content .user-row {
  margin-bottom: 0.34rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  padding: 0.38rem 0.44rem;
  background: rgba(15, 23, 42, 0.16);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}
body.theme-light .user-list-content .user-row {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.35);
}
.user-list-content .user-row:hover,
.user-list-content .user-row:focus {
  border-color: rgba(94, 167, 255, 0.82);
  background: rgba(30, 41, 59, 0.24);
}
body.theme-light .user-list-content .user-row:hover,
body.theme-light .user-list-content .user-row:focus {
  background: rgba(231, 241, 255, 0.92);
}
.user-list-content .user-row .d-flex.align-items-center {
  align-items: flex-start !important;
}
.channel-user-details {
  min-width: 0;
  flex: 1 1 auto;
}
.channel-user-name {
  font-size: 0.8rem;
  line-height: 1.12;
  font-weight: 650;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row-enter {
  animation: userRowEnter 200ms ease-out;
}
@keyframes userRowEnter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.user-row .online-status {
  position: static;
  margin-left: 0.4rem;
  display: inline-flex;
  align-items: center;
}
.user-row .online-status .ti {
  width: 12px;
  height: 12px;
  font-size: 10px;
}
.user-row .online-status.online .ti {
  animation: userPresencePulse 1.7s ease-in-out infinite;
}
@keyframes userPresencePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.user-presence-group,
.user-room-group {
  margin-bottom: 0.42rem;
}
.user-presence-group-toggle,
.user-room-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(94, 167, 255, 0.2);
  background: rgba(94, 167, 255, 0.08);
  color: inherit;
  border-radius: 10px;
  padding: 0.36rem 0.48rem;
  font-size: 0.72rem;
  font-weight: 650;
  text-align: left;
}
.user-presence-group-toggle .ti,
.user-room-group-toggle .ti {
  font-size: 0.84rem;
}
.user-presence-group-body,
.user-room-group-body {
  padding-top: 0.3rem;
}
.user-presence-group.is-collapsed .user-presence-group-body,
.user-room-group.is-collapsed .user-room-group-body {
  display: none;
}
.user-role-subgroup-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--tblr-muted, rgba(255, 255, 255, 0.58));
  margin: 0.35rem 0 0.2rem;
  padding-left: 0.2rem;
}
body.theme-dark .chatrum-label,
.theme-dark .chatrum-label,
.dark .chatrum-label {
  color: #fff !important;
}
.user-row:not([data-is-private-list="true"]) .start-private-call {
  display: none;
}
/* Keep right-panel user dropdown menu inside each row (not detached/floating). */
.room-users .user-row.dropdown > .dropdown-menu,
.group-users .user-row.dropdown > .dropdown-menu {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: 100%;
  min-width: 0;
  margin-top: 0.34rem;
  max-height: 220px;
  overflow-y: auto;
}
.height-scroll-rpanelx {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.user-list-content,
.room-users,
.group-users {
  overflow-y: auto;
  overflow-x: hidden;
}
.height-scroll-rpanelx.room-users-row,
.height-scroll-rpanelx.group-users-row {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.channel-user-image {
  display: none;
  align-items: center;
}
.user-list-card.user-list-avatars-enabled .channel-user-image {
  display: flex;
}
.user-list-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
body.theme-light .user-list-avatar {
  border-color: rgba(13, 110, 253, 0.25);
}
.user-list-setting-btn.toggle-user-avatars.active {
  color: var(--tblr-primary, #2fb344);
  border-color: var(--tblr-primary, #2fb344);
  background: rgba(47, 179, 68, 0.12);
  box-shadow: 0 3px 8px rgba(47, 179, 68, 0.2);
}
.user-list-setting-btn.toggle-user-colors.active {
  color: #f06595;
  border-color: #f06595;
  background: rgba(240, 101, 149, 0.12);
  box-shadow: 0 3px 8px rgba(240, 101, 149, 0.2);
}
.user-list-card.user-list-colored-names-enabled .channel-user-name {
  transition: color 0.2s ease;
}
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="female" i]
  .channel-user-name,
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="2"]
  .channel-user-name {
  color: #f06595;
}
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="male" i]
  .channel-user-name,
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="1"]
  .channel-user-name {
  color: #2196f3;
}
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="trans" i]
  .channel-user-name,
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="3"]
  .channel-user-name {
  color: #c026d3;
}
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="par" i]
  .channel-user-name,
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="couple" i]
  .channel-user-name,
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="4"]
  .channel-user-name {
  color: #22c55e;
}
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="other" i]
  .channel-user-name,
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="andet" i]
  .channel-user-name,
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-sex="5"]
  .channel-user-name {
  color: #14b8a6;
}
.user-list-card.user-list-colored-names-enabled
  .user-row[data-user-user_type="1"]
  .channel-user-name {
  color: #ff8c00;
}
.messages .sender-name {
  cursor: pointer;
}
.messages .sender-name:focus {
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .messages .sender-name:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    opacity: 0.92;
  }
}
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="female" i]
  .sender-name,
body.chat-message-colored-names-enabled .cht[data-sender-sex="2"] .sender-name,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="female" i]
  .username-mention,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="2"]
  .username-mention {
  color: #f06595;
}
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="male" i]
  .sender-name,
body.chat-message-colored-names-enabled .cht[data-sender-sex="1"] .sender-name,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="male" i]
  .username-mention,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="1"]
  .username-mention {
  color: #2196f3;
}
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="trans" i]
  .sender-name,
body.chat-message-colored-names-enabled .cht[data-sender-sex="3"] .sender-name,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="trans" i]
  .username-mention,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="3"]
  .username-mention {
  color: #c026d3;
}
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="par" i]
  .sender-name,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="couple" i]
  .sender-name,
body.chat-message-colored-names-enabled .cht[data-sender-sex="4"] .sender-name,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="par" i]
  .username-mention,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="couple" i]
  .username-mention,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="4"]
  .username-mention {
  color: #22c55e;
}
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="other" i]
  .sender-name,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="andet" i]
  .sender-name,
body.chat-message-colored-names-enabled .cht[data-sender-sex="5"] .sender-name,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="other" i]
  .username-mention,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="andet" i]
  .username-mention,
body.chat-message-colored-names-enabled
  .cht[data-sender-sex="5"]
  .username-mention {
  color: #14b8a6;
}
body.chat-message-colored-names-enabled
  .sender-name[data-sender-sex="female" i],
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="2"] {
  color: #f06595 !important;
}
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="male" i],
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="1"] {
  color: #2196f3 !important;
}
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="trans" i],
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="3"] {
  color: #c026d3 !important;
}
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="par" i],
body.chat-message-colored-names-enabled
  .sender-name[data-sender-sex="couple" i],
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="4"] {
  color: #22c55e !important;
}
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="other" i],
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="andet" i],
body.chat-message-colored-names-enabled .sender-name[data-sender-sex="5"] {
  color: #14b8a6 !important;
}
.messages .cht.replies[data-sender-user-type="1"] .sender-name,
.messages .cht.replies[data-sender-user-type="1"] .username-mention,
.messages .cht[data-chat-type="group"][data-sender-user-type="1"] .sender-name,
.messages
  .cht[data-chat-type="group"][data-sender-user-type="1"]
  .username-mention,
body.chat-message-colored-names-enabled
  .messages
  .cht.replies[data-sender-user-type="1"]
  .sender-name,
body.chat-message-colored-names-enabled
  .messages
  .cht.replies[data-sender-user-type="1"]
  .username-mention,
body.chat-message-colored-names-enabled
  .messages
  .cht[data-chat-type="group"][data-sender-user-type="1"]
  .sender-name,
body.chat-message-colored-names-enabled
  .messages
  .cht[data-chat-type="group"][data-sender-user-type="1"]
  .username-mention,
body.chat-message-colored-names-enabled
  .messages
  .sender-name[data-sender-user-type="1"] {
  color: #ff8c00 !important;
}
.user-sort-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.user-list-content {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-right: 0.25rem;
  margin-bottom: 0.6rem;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0.5rem;
}
.user-list-empty {
  color: var(--tblr-muted, rgba(255, 255, 255, 0.6));
}
.user-list-empty i {
  font-size: 1.5rem;
  opacity: 0.6;
}

textarea#room_notice_message {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.user-list-load-more {
  display: flex;
  justify-content: stretch;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.4rem 0.35rem 0.35rem;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--chat-modern-border, rgba(148, 163, 184, 0.32));
  background: transparent;
}

.user-list-load-more.hidden {
  display: none !important;
}

.user-list-load-more-btn .ti-loader {
  display: none;
}

.user-list-load-more-btn,
.user-list-load-all-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(47, 111, 237, 0.18);
  border: 1px solid rgba(47, 111, 237, 0.6);
  background: linear-gradient(
    135deg,
    rgba(47, 111, 237, 0.98),
    rgba(47, 179, 255, 0.95)
  );
  color: #fff;
}
.user-list-load-more-btn:hover,
.user-list-load-all-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(47, 111, 237, 0.25);
  color: #fff;
}
.user-list-load-more-btn:disabled,
.user-list-load-all-btn:disabled {
  filter: grayscale(0.2);
  opacity: 0.75;
  box-shadow: none;
}

.user-list-load-more-btn .ms-1,
.user-list-load-all-btn .ms-1 {
  margin-left: 0 !important;
}

.private-right-panel .user-card {
  border-radius: 12px;
  overflow: hidden;
}

.private-right-panel .user-card .card-body {
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.private-right-panel .user-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
}

.private-right-panel .user-avatar-stack {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.private-right-panel .user-card-avatar {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--tblr-border-color);
  flex-shrink: 0;
}

.private-right-panel .user-card-title {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.private-right-panel .user-avatar-stack .card-title {
  margin: 0;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tblr-body-color);
  word-break: break-word;
}

.private-right-panel .user-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  text-align: center;
  max-width: 100%;
}

.private-right-panel .user-info-sections {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.2rem;
  width: 100%;
}

.private-right-panel .user-section {
  border: 1px solid var(--tblr-border-color);
  border-radius: 10px;
  background: var(--tblr-bg-surface);
  padding: 0.6rem;
}

.private-right-panel .user-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  margin-bottom: 0.5rem;
}

.private-right-panel .user-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.private-right-panel .user-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface-secondary);
}

.private-right-panel .user-badge .badge-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.private-right-panel .user-meta-grid {
  display: grid;
  gap: 0.4rem;
}

.private-right-panel .user-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: var(--tblr-bg-surface-secondary);
}

.private-right-panel .user-meta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--tblr-secondary);
}

.private-right-panel .user-meta-value {
  font-size: 0.84rem;
  font-weight: 600;
  text-align: right;
  max-width: 58%;
  overflow-wrap: anywhere;
}

body.theme-light .private-right-panel .user-section,
body.theme-light .private-right-panel .user-meta-item,
body.theme-light .private-right-panel .user-badge {
  background: #fff;
}

@media (max-width: 576px) {
  .user-list-card {
    padding: 0.64rem;
  }
  .user-list-avatar {
    width: 24px;
    height: 24px;
  }
  .user-list-discovery-toolbar {
    grid-template-columns: 1fr;
    gap: 0.34rem;
  }
  .user-filter-chip {
    font-size: 0.71rem;
    padding: 0.24rem 0.65rem;
  }
  .user-list-grouping-controls {
    flex-wrap: wrap;
  }
}

/* Modern Profile Settings Styles */
.profile-settings-modern {
  padding: 1.5rem;
}

/* Profile Header */
.profile-header {
  background: linear-gradient(
    135deg,
    var(--tblr-primary) 0%,
    var(--tblr-primary-fg) 100%
  );
  border-radius: 16px;
  padding: 2rem;
  color: white;
}

.profile-header-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.profile-avatar-large {
  position: relative;
}

.avatar-img-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.avatar-status-indicator {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--tblr-body-bg);
}

.avatar-status-indicator.online {
  background: #2ecc71;
}
.avatar-status-indicator.offline {
  background: #95a5a6;
}
.avatar-status-indicator.busy {
  background: #e74c3c;
}
.avatar-status-indicator.away {
  background: #f39c12;
}

/* Profile Status Badge */
.profile-status-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.profile-status-badge i {
  font-size: 0.9rem;
}

.profile-status-badge.status-approved {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.profile-status-badge.status-pending {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.profile-status-badge.status-rejected {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

#v-profile-verify .profile-status-badge {
  position: static;
  right: auto;
  bottom: auto;
  display: inline-flex;
}

.verification-pose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.verification-pose-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.75rem;
}

.verification-pose-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.verification-pose-image,
.verification-upload-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: 300px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.2);
}

.verification-pose-image {
  object-fit: contain;
}

.verification-upload-preview {
  object-fit: contain;
  object-position: center;
}

.verification-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.verification-upload-actions .btn {
  min-width: 150px;
}

.verification-upload-hint {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}

.verification-preview-actions {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.verification-preview-actions .btn {
  min-width: 135px;
}

.verified-user-icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: #2ecc71;
  line-height: 1;
  vertical-align: middle;
}

.verified-user-icon-inline.verified-user-icon-tick {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #2ecc71;
  color: #ffffff;
  margin-left: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.verified-user-icon-inline.verified-user-icon-tick i {
  font-size: 9px;
  font-weight: 700;
}

.private-list .verified-user-icon-inline {
  font-size: 13px;
}

.user-name-row .verified-user-icon-inline + .user-type-badge,
.private-list .verified-user-icon-inline + .user-type-badge {
  margin-left: 6px;
}

.user-name-row .online-status + .user-type-badge,
.private-list .user-name-row .online-status + .user-type-badge,
.group-users .user-name-row .online-status + .user-type-badge {
  margin-left: 6px;
}

@media (max-width: 640px) {
  .verification-pose-image,
  .verification-upload-preview {
    max-height: 240px;
  }

  .verification-upload-actions .btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .verification-preview-actions .btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* Preview Card Status Badge */
.preview-status-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.preview-status-badge i {
  font-size: 0.9rem;
}

.preview-status-badge.status-approved {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.preview-status-badge.status-pending {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.preview-status-badge.status-rejected {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* ===== Facebook/Twitter-Style Profile Settings ===== */
.profile-settings-modern {
  max-width: 780px;
  margin: 0 auto;
}

.badge-icon-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

/* Profile Page (My Profile tab) — same theme as settings */
.profile-page-modern {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.5rem;
}

.profile-page-avatar {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.profile-page-avatar .settings-avatar-img {
  border: 3px solid var(--tblr-border-color);
}

.profile-page-bio {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: var(--tblr-body-color);
  line-height: 1.5;
  white-space: pre-line;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.profile-info-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
}

.profile-info-item > i {
  font-size: 1.25rem;
  color: var(--tblr-primary);
  flex-shrink: 0;
}

.profile-info-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary);
}

.profile-info-value {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tblr-body-color);
}

/* Banner */
.settings-banner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 0;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.settings-banner-avatar {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.settings-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--tblr-border-color);
}

.settings-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
}

.settings-banner-avatar:hover .settings-avatar-overlay {
  opacity: 1;
}

.avatar-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.avatar-badge i {
  font-size: 1.6rem;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.avatar-badge .badge-label {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.1;
  text-align: center;
  max-width: 90%;
}

.badge-pending {
  background: rgba(245, 158, 11, 0.75);
}
.badge-rejected {
  background: rgba(239, 68, 68, 0.75);
}

.settings-banner-info {
  flex: 1;
  min-width: 0;
}

.settings-display-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: var(--tblr-body-color);
  line-height: 1.2;
}

.settings-handle {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.9rem;
  color: var(--tblr-secondary);
}

.settings-badges {
  display: flex;
  gap: 0.35rem;
}

.settings-remove-avatar {
  font-size: 0.8rem;
  align-self: center;
}

/* Groups & Labels */
.settings-group {
  margin-bottom: 1rem;
}

.settings-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tblr-secondary);
  margin-bottom: 0.35rem;
}

.settings-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  margin-top: 0.25rem;
}

/* Two-column rows */
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Divider */
.settings-divider {
  border: none;
  border-top: 1px solid var(--tblr-border-color);
  margin: 0.75rem 0 1rem;
}

/* Footer / Save */
.settings-footer {
  padding: 1rem 0 0;
}

/* Danger zone */
.settings-danger-zone {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0 0;
  margin-top: 1rem;
  border-top: 1px solid var(--tblr-danger-border-color);
}

/* Alert */
.settings-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.settings-alert-warning {
  background: var(--tblr-warning-bg-subtle);
  border: 1px solid var(--tblr-warning-border-color);
}

.settings-alert-icon {
  font-size: 1.25rem;
  color: var(--tblr-warning);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.settings-alert p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}

/* Static field (birthday) */
.settings-static-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 6px;
  color: var(--tblr-body-color);
  font-size: 0.9rem;
}

.settings-static-field i {
  color: var(--tblr-primary);
}

/* About Textarea */
.about-textarea-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.about-textarea-wrapper textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 500px;
  border-radius: 8px;
  overflow-y: auto;
  padding-bottom: 2rem;
  width: 100%;
}

.about-textarea-wrapper .resize-hint {
  position: absolute;
  bottom: 0.35rem;
  left: 0.75rem;
  font-size: 0.65rem;
  color: var(--tblr-secondary);
  opacity: 0.6;
  pointer-events: none;
}

.about-textarea-wrapper textarea:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.textarea-footer {
  position: absolute;
  bottom: 0.5rem;
  right: 0.75rem;
  font-size: 0.7rem;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* ===== Responsive ===== */
@media (max-width: 575.98px) {
  .settings-row {
    grid-template-columns: 1fr;
  }
  .settings-banner {
    flex-direction: column;
    text-align: center;
  }
  .settings-banner-info {
    text-align: center;
  }
  .settings-badges {
    justify-content: center;
  }
  .profile-info-grid {
    grid-template-columns: 1fr;
  }
  .profile-page-modern {
    padding: 1rem;
  }
}

/* User Profile Popup Modal */
.user-profile-popup {
  background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.profile-popup-container {
  padding: 0;
}

.profile-popup-header {
  text-align: center;
  padding: 1.25rem 1rem 0.75rem;
  position: relative;
}

.profile-popup-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
}

.profile-popup-avatar-section {
  position: relative;
  display: inline-block;
  margin-top: 30px;
}

.profile-popup-avatar {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.1);
}

.popup-status {
  bottom: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border: 2px solid #1e3a5f;
}

.popup-status.online {
  background: #2ecc71;
}
.popup-status.offline {
  background: #95a5a6;
}
.popup-status.busy {
  background: #e74c3c;
}
.popup-status.away {
  background: #f39c12;
}

.profile-popup-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0.75rem 0 0.2rem 0;
}

.profile-popup-username {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
}

.profile-popup-badges {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.profile-popup-badges .badge-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.profile-popup-badges .profile-status-badge {
  position: static;
  right: auto;
  bottom: auto;
  box-shadow: none;
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
}

.profile-popup-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0.75rem 1.5rem;
}

.profile-popup-content {
  padding: 0.75rem 1rem 1rem;
}

.profile-popup-about {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0 0.5rem;
}

.profile-popup-about span {
  display: block;
  white-space: pre-line;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-popup-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
}

.profile-popup-stats .stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 42px;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.profile-popup-stats .stat-icon {
  color: #60a5fa;
  font-size: 1.1rem;
  min-width: 20px;
}

.profile-popup-stats .stat-item span {
  text-align: center;
}

.profile-popup-groups {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.groups-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.groups-label i {
  color: #60a5fa;
}

.groups-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.group-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 15px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75rem;
  font-weight: 500;
}

.profile-popup-footer {
  text-align: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

.profile-popup-footer-meta {
  margin-bottom: 0.55rem;
}

.profile-popup-footer-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  min-height: 32px;
}

.profile-popup-footer-actions #popup-message-action {
  min-width: 170px;
  justify-content: center;
}

.profile-popup-footer-actions .popup-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
}

.profile-popup-footer-actions #popup-hide-action,
.profile-popup-footer-actions #popup-block-action {
  min-width: 118px;
  justify-content: center;
}

.profile-popup-footer-actions #popup-report-action {
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
  line-height: 1.1;
  opacity: 0.9;
}

.user-list-filter {
  padding: 0 0.25rem;
}

.user-list-filter .form-select {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  cursor: pointer;
}

.user-list-filter .form-select:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}

.user-list-filter .form-select option {
  background-color: #1e3a5f;
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .user-profile-popup .modal-lg {
    max-width: 95%;
    margin: 0.5rem auto;
  }

  .profile-popup-header {
    padding: 1rem 0.75rem 0.5rem;
  }

  .profile-popup-cover {
    height: 60px;
  }

  .profile-popup-avatar-section {
    margin-top: 20px;
  }

  .profile-popup-avatar {
    width: 80px;
    height: 80px;
    border-width: 3px;
  }

  .profile-popup-stats {
    grid-template-columns: 1fr;
  }

  .popup-status {
    width: 14px;
    height: 14px;
    border-width: 2px;
    bottom: 3px;
    right: 3px;
  }

  .profile-popup-name {
    font-size: 1.1rem;
  }

  .profile-popup-username {
    font-size: 0.85rem;
  }

  .profile-popup-badges .badge-icon {
    width: 20px;
    height: 20px;
  }

  .profile-popup-divider {
    margin: 0.5rem 1rem;
  }

  .profile-popup-content {
    padding: 0.5rem 0.75rem 0.75rem;
  }

  .profile-popup-about {
    font-size: 0.85rem;
    padding: 0 0.25rem;
  }

  .profile-popup-stats {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem;
  }

  .profile-stats-left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 0;
    padding-bottom: 0.75rem;
  }

  .profile-popup-stats .stat-item {
    font-size: 0.8rem;
  }

  .profile-popup-stats .stat-icon {
    font-size: 0.9rem;
  }

  .group-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* Responsive */
@media (max-width: 991px) {
  .profile-header-content {
    flex-direction: column;
    text-align: center;
  }

  .profile-badges {
    justify-content: center;
  }
}

body.media-uncensored-enabled .censored-buttons,
body.media-uncensored-enabled .censored-video-buttons {
  display: none !important;
}

body.dating-ads-hidden .ad-space {
  display: none !important;
}

.private-list-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.private-panel-pin-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  opacity: 0.88;
}

.private-panel-pin-toggle input {
  margin: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.private-panel-pin-toggle:hover {
  opacity: 1;
}

body.theme-trueblue .sidebar-private .dm-user-search,
.theme-trueblue .sidebar-private .dm-user-search {
  background: #2a2f38 !important;
  color: #e5e7eb !important;
  border-color: #3d4553 !important;
}

body.theme-trueblue .sidebar-private .dm-user-search::placeholder,
.theme-trueblue .sidebar-private .dm-user-search::placeholder {
  color: #97a1b1 !important;
}

body.theme-trueblue .sidebar-private .input-icon-addon,
.theme-trueblue .sidebar-private .input-icon-addon {
  color: #aeb7c5 !important;
  background: #2a2f38 !important;
  border-color: #3d4553 !important;
}

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

.private-topbar-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 30px;
}

.topbar .top-channel-name,
.topbar .private-top-user-meta {
  color: #111827;
}

#main-private .topbar .top-channel-name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08rem;
  font-size: 0.95rem !important;
  line-height: 1.12;
  max-width: min(36vw, 440px);
  white-space: normal;
  overflow: hidden;
}

#main-private .topbar .top-channel-name .private-top-name-main {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.16;
}

#main-private .topbar .top-channel-name .private-top-name-handle {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.84;
  line-height: 1.1;
}

.topbar .nav-link small,
.topbar .nav-link i {
  color: #111827;
}

body.theme-dark .topbar .top-channel-name,
.theme-dark .topbar .top-channel-name,
body.theme-dark .topbar .private-top-user-meta,
.theme-dark .topbar .private-top-user-meta,
body.theme-trueblue .topbar .top-channel-name,
.theme-trueblue .topbar .top-channel-name,
body.theme-trueblue .topbar .private-top-user-meta,
.theme-trueblue .topbar .private-top-user-meta {
  color: #f8fafc;
}

html.theme-dark .topbar .top-channel-name,
html.dark .topbar .top-channel-name,
body.theme-dark .topbar .top-channel-name,
body.dark .topbar .top-channel-name,
.theme-dark .topbar .top-channel-name,
html.theme-trueblue .topbar .top-channel-name,
html.trueblue .topbar .top-channel-name,
body.theme-trueblue .topbar .top-channel-name,
body.trueblue .topbar .top-channel-name,
.theme-trueblue .topbar .top-channel-name,
html.theme-dark .topbar .top-channel-name *,
html.dark .topbar .top-channel-name *,
body.theme-dark .topbar .top-channel-name *,
body.dark .topbar .top-channel-name *,
.theme-dark .topbar .top-channel-name *,
html.theme-trueblue .topbar .top-channel-name *,
html.trueblue .topbar .top-channel-name *,
body.theme-trueblue .topbar .top-channel-name *,
body.trueblue .topbar .top-channel-name *,
.theme-trueblue .topbar .top-channel-name * {
  color: #f8fafc !important;
}

.topbar .top-channel-name .guest-user-badge,
html.theme-dark .topbar .top-channel-name .guest-user-badge,
html.dark .topbar .top-channel-name .guest-user-badge,
body.theme-dark .topbar .top-channel-name .guest-user-badge,
body.dark .topbar .top-channel-name .guest-user-badge,
.theme-dark .topbar .top-channel-name .guest-user-badge,
html.theme-trueblue .topbar .top-channel-name .guest-user-badge,
html.trueblue .topbar .top-channel-name .guest-user-badge,
body.theme-trueblue .topbar .top-channel-name .guest-user-badge,
body.trueblue .topbar .top-channel-name .guest-user-badge,
.theme-trueblue .topbar .top-channel-name .guest-user-badge {
  color: #f59e0b !important;
  background: rgba(95, 103, 115, 0.12) !important;
  border-color: rgba(95, 103, 115, 0.25) !important;
}

body.theme-dark .topbar .nav-link small,
.theme-dark .topbar .nav-link small,
body.theme-dark .topbar .nav-link i,
.theme-dark .topbar .nav-link i,
body.theme-trueblue .topbar .nav-link small,
.theme-trueblue .topbar .nav-link small,
body.theme-trueblue .topbar .nav-link i,
.theme-trueblue .topbar .nav-link i {
  color: #f8fafc;
}

.private-top-user-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: min(52vw, 560px);
  color: var(--tblr-body-color, #212529);
}

.private-top-user-meta .private-top-meta-chip {
  --chip-text: var(--tblr-body-color, #212529);
  --chip-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.34);
  --chip-bg-1: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.24);
  --chip-bg-2: rgba(var(--tblr-info-rgb, 66, 153, 225), 0.14);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  background: linear-gradient(
    135deg,
    var(--chip-bg-1) 0%,
    var(--chip-bg-2) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
  filter: saturate(1.08);
}

@media (min-width: 992px) {
  .private-top-user-meta .private-top-meta-chip:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 3px 8px rgba(0, 0, 0, 0.12);
  }
}

.private-top-user-meta .private-top-meta-chip .ti {
  font-size: 1em;
}

.private-top-user-meta .private-top-meta-chip--age {
  --chip-border: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.34);
  --chip-bg-1: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.22);
  --chip-bg-2: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.14);
}

.private-top-user-meta .private-top-meta-chip--started {
  --chip-border: rgba(var(--tblr-warning-rgb, 245, 159, 0), 0.36);
  --chip-bg-1: rgba(var(--tblr-warning-rgb, 245, 159, 0), 0.24);
  --chip-bg-2: rgba(var(--tblr-danger-rgb, 214, 51, 132), 0.14);
}

.private-top-user-meta .private-top-meta-chip--verified-yes {
  --chip-border: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.38);
  --chip-bg-1: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.24);
  --chip-bg-2: rgba(var(--tblr-teal-rgb, 32, 201, 151), 0.16);
}

.private-top-user-meta .private-top-meta-chip--verified-no {
  --chip-border: rgba(var(--tblr-secondary-rgb, 108, 117, 125), 0.36);
  --chip-bg-1: rgba(var(--tblr-secondary-rgb, 108, 117, 125), 0.2);
  --chip-bg-2: rgba(var(--tblr-gray-500-rgb, 173, 181, 189), 0.12);
}

html.theme-dark .private-top-user-meta .private-top-meta-chip,
html.dark .private-top-user-meta .private-top-meta-chip,
body.theme-dark .private-top-user-meta .private-top-meta-chip,
body.dark .private-top-user-meta .private-top-meta-chip,
.theme-dark .private-top-user-meta .private-top-meta-chip,
html.theme-trueblue .private-top-user-meta .private-top-meta-chip,
html.trueblue .private-top-user-meta .private-top-meta-chip,
body.theme-trueblue .private-top-user-meta .private-top-meta-chip,
body.trueblue .private-top-user-meta .private-top-meta-chip,
.theme-trueblue .private-top-user-meta .private-top-meta-chip {
  --chip-text: var(--tblr-light, #f8fafc);
  --chip-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.3);
  --chip-bg-1: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.2);
  --chip-bg-2: rgba(var(--tblr-info-rgb, 66, 153, 225), 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.theme-dark .private-top-user-meta .private-top-meta-chip,
html.dark .private-top-user-meta .private-top-meta-chip,
body.theme-dark .private-top-user-meta .private-top-meta-chip,
body.dark .private-top-user-meta .private-top-meta-chip,
.theme-dark .private-top-user-meta .private-top-meta-chip,
html.theme-trueblue .private-top-user-meta .private-top-meta-chip,
html.trueblue .private-top-user-meta .private-top-meta-chip,
body.theme-trueblue .private-top-user-meta .private-top-meta-chip,
body.trueblue .private-top-user-meta .private-top-meta-chip,
.theme-trueblue .private-top-user-meta .private-top-meta-chip,
html.theme-dark .private-top-user-meta .private-top-meta-chip span,
html.dark .private-top-user-meta .private-top-meta-chip span,
body.theme-dark .private-top-user-meta .private-top-meta-chip span,
body.dark .private-top-user-meta .private-top-meta-chip span,
.theme-dark .private-top-user-meta .private-top-meta-chip span,
html.theme-trueblue .private-top-user-meta .private-top-meta-chip span,
html.trueblue .private-top-user-meta .private-top-meta-chip span,
body.theme-trueblue .private-top-user-meta .private-top-meta-chip span,
body.trueblue .private-top-user-meta .private-top-meta-chip span,
.theme-trueblue .private-top-user-meta .private-top-meta-chip span {
  color: #f8fafc !important;
}

html.theme-dark .private-top-user-meta .private-top-meta-chip--age,
html.dark .private-top-user-meta .private-top-meta-chip--age,
body.theme-dark .private-top-user-meta .private-top-meta-chip--age,
body.dark .private-top-user-meta .private-top-meta-chip--age,
.theme-dark .private-top-user-meta .private-top-meta-chip--age,
html.theme-trueblue .private-top-user-meta .private-top-meta-chip--age,
html.trueblue .private-top-user-meta .private-top-meta-chip--age,
body.theme-trueblue .private-top-user-meta .private-top-meta-chip--age,
body.trueblue .private-top-user-meta .private-top-meta-chip--age,
.theme-trueblue .private-top-user-meta .private-top-meta-chip--age {
  --chip-border: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.28);
  --chip-bg-1: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.18);
  --chip-bg-2: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.12);
}

html.theme-dark .private-top-user-meta .private-top-meta-chip--started,
html.dark .private-top-user-meta .private-top-meta-chip--started,
body.theme-dark .private-top-user-meta .private-top-meta-chip--started,
body.dark .private-top-user-meta .private-top-meta-chip--started,
.theme-dark .private-top-user-meta .private-top-meta-chip--started,
html.theme-trueblue .private-top-user-meta .private-top-meta-chip--started,
html.trueblue .private-top-user-meta .private-top-meta-chip--started,
body.theme-trueblue .private-top-user-meta .private-top-meta-chip--started,
body.trueblue .private-top-user-meta .private-top-meta-chip--started,
.theme-trueblue .private-top-user-meta .private-top-meta-chip--started {
  --chip-border: rgba(var(--tblr-warning-rgb, 245, 159, 0), 0.3);
  --chip-bg-1: rgba(var(--tblr-warning-rgb, 245, 159, 0), 0.18);
  --chip-bg-2: rgba(var(--tblr-danger-rgb, 214, 51, 132), 0.12);
}

html.theme-dark .private-top-user-meta .private-top-meta-chip--verified-yes,
html.dark .private-top-user-meta .private-top-meta-chip--verified-yes,
body.theme-dark .private-top-user-meta .private-top-meta-chip--verified-yes,
body.dark .private-top-user-meta .private-top-meta-chip--verified-yes,
.theme-dark .private-top-user-meta .private-top-meta-chip--verified-yes,
html.theme-trueblue .private-top-user-meta .private-top-meta-chip--verified-yes,
html.trueblue .private-top-user-meta .private-top-meta-chip--verified-yes,
body.theme-trueblue .private-top-user-meta .private-top-meta-chip--verified-yes,
body.trueblue .private-top-user-meta .private-top-meta-chip--verified-yes,
.theme-trueblue .private-top-user-meta .private-top-meta-chip--verified-yes {
  --chip-border: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.3);
  --chip-bg-1: rgba(var(--tblr-success-rgb, 46, 179, 126), 0.18);
  --chip-bg-2: rgba(var(--tblr-teal-rgb, 32, 201, 151), 0.12);
}

html.theme-dark .private-top-user-meta .private-top-meta-chip--verified-no,
html.dark .private-top-user-meta .private-top-meta-chip--verified-no,
body.theme-dark .private-top-user-meta .private-top-meta-chip--verified-no,
body.dark .private-top-user-meta .private-top-meta-chip--verified-no,
.theme-dark .private-top-user-meta .private-top-meta-chip--verified-no,
html.theme-trueblue .private-top-user-meta .private-top-meta-chip--verified-no,
html.trueblue .private-top-user-meta .private-top-meta-chip--verified-no,
body.theme-trueblue .private-top-user-meta .private-top-meta-chip--verified-no,
body.trueblue .private-top-user-meta .private-top-meta-chip--verified-no,
.theme-trueblue .private-top-user-meta .private-top-meta-chip--verified-no {
  --chip-border: rgba(var(--tblr-secondary-rgb, 108, 117, 125), 0.3);
  --chip-bg-1: rgba(var(--tblr-secondary-rgb, 108, 117, 125), 0.16);
  --chip-bg-2: rgba(var(--tblr-gray-500-rgb, 173, 181, 189), 0.1);
}

.group-chat .main-panel,
.private-chat .main-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.group-chat .main-panel > .chat-scroll,
.private-chat .main-panel > .chat-scroll {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0 !important;
}

.group-chat .main-panel > .chat-scroll::before,
.private-chat .main-panel > .chat-scroll::before {
  content: attr(data-watermark);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 0;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(var(--tblr-muted-rgb, 108, 117, 125), 0.13);
  white-space: normal;
}

.group-chat .main-panel > .chat-scroll::before {
  color: rgba(var(--tblr-muted-rgb, 108, 117, 125), 0.1);
  padding: var(--group-watermark-top-offset, 0.55rem) 1rem 1rem;
}

.private-chat .main-panel > .chat-scroll::before {
  content: attr(data-watermark-name);
  font-size: clamp(1.08rem, 2.35vw, 1.62rem);
  font-weight: 800;
  letter-spacing: 0.018em;
  color: rgba(var(--tblr-muted-rgb, 108, 117, 125), 0.24);
  padding: calc(var(--private-watermark-top-offset, 0.55rem) + 1rem) 1rem 1rem;
}

.private-chat .main-panel > .chat-scroll::after {
  content: attr(data-watermark-prefix);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 0;
  font-size: clamp(0.8rem, 1.7vw, 1.02rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(var(--tblr-muted-rgb, 108, 117, 125), 0.14);
  padding: var(--private-watermark-top-offset, 0.55rem) 1rem 1rem;
  white-space: normal;
}

.group-chat .main-panel .middle-top-ad-slot,
.private-chat .main-panel .middle-top-ad-slot {
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 0;
  width: 100%;
  height: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  overflow: visible;
  background: transparent !important;
  pointer-events: none;
}

.group-chat .main-panel .middle-top-ad-slot .middle-ad-cta,
.private-chat .main-panel .middle-top-ad-slot .middle-ad-cta {
  width: min(100%, 560px);
  max-width: 560px;
  margin-inline: auto;
  margin-top: 0.2rem;
  pointer-events: auto;
}

.group-chat .main-panel > .chat-scroll .messages.chats,
.private-chat .main-panel > .chat-scroll .messages.chats {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 1;
}

.private-chat .main-panel > .chat-scroll .messages.chats {
  padding-top: 1.5rem !important;
}

.group-chat .main-panel > .chat-scroll .messages.chats {
  padding-top: 1.5rem !important;
}

@media (max-width: 767.98px) {
  .group-chat .main-panel > .chat-scroll .messages.chats,
  .private-chat .main-panel > .chat-scroll .messages.chats {
    padding-top: 1.5rem !important;
  }
}

.private-chat .cht {
  margin-bottom: 24px !important;
}

.private-chat .cht .avatar {
  width: 30px;
  height: 30px;
  opacity: 0.92;
}

.private-chat .cht .message-data {
  max-width: 255px;
}

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

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

.private-chat .cht .message-data .sender-name {
  display: none;
}

.private-chat .cht .message-time {
  opacity: 0;
  font-size: 0.68rem;
  margin-top: 0.12rem;
  transition: opacity 0.15s ease;
}

.private-chat .cht:hover .message-time,
.private-chat .cht.active .message-time {
  opacity: 0.72;
}

.private-chat .cht .chat-actions {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.private-chat .new-date {
  margin: 0.2rem 0 0.35rem;
}

.private-chat .new-date p {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.82;
}

.private-chat .cht:hover .chat-actions,
.private-chat .cht.active .chat-actions {
  opacity: 1;
}

/* Unified modern surfaces for topbar, right panel, and editor */
:root {
  --chat-modern-surface-1: #ffffff;
  --chat-modern-surface-2: #eef3f8;
  --chat-modern-border: rgba(148, 163, 184, 0.34);
  --chat-modern-shadow: rgba(15, 23, 42, 0.16);
  --chat-modern-text: #0f172a;
  --chat-modern-muted: #64748b;
  --chat-modern-chip-bg: rgba(59, 130, 246, 0.12);
  --chat-modern-chip-border: rgba(59, 130, 246, 0.26);
  --chat-topbar-surface-1: var(--panel-bg, #f8fafc);
  --chat-topbar-surface-2: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.14);
  --chat-topbar-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.28);
  --chat-topbar-text: var(--default-text-color, #0f172a);
  --chat-topbar-muted: var(--muted-text-color, #64748b);
  --chat-topbar-chip-bg: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.14);
  --chat-topbar-chip-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.32);
  --chat-topbar-btn-surface-1: rgba(255, 255, 255, 0.92);
  --chat-topbar-btn-surface-2: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.2);
  --chat-topbar-icon: var(--accent-color-strong, var(--chat-accent, #3b82f6));
  --chat-topbar-hover-bg: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.16);
  --chat-modern-editor-bg-1: #f8fafc;
  --chat-modern-editor-bg-2: #e2e8f0;
  --chat-private-surface-1: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.18);
  --chat-private-surface-2: #1f2f46;
  --chat-private-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.34);
}

html.theme-dark,
html.dark,
body.theme-dark,
body.dark,
html.theme-trueblue,
html.trueblue,
body.theme-trueblue,
body.trueblue {
  --chat-modern-surface-1: rgba(15, 23, 42, 0.94);
  --chat-modern-surface-2: rgba(30, 41, 59, 0.92);
  --chat-modern-border: rgba(125, 211, 252, 0.26);
  --chat-modern-shadow: rgba(0, 0, 0, 0.36);
  --chat-modern-text: #e2e8f0;
  --chat-modern-muted: #a5b4cc;
  --chat-modern-chip-bg: rgba(56, 189, 248, 0.18);
  --chat-modern-chip-border: rgba(56, 189, 248, 0.34);
  --chat-topbar-surface-1: var(--dark-bg, #232428);
  --chat-topbar-surface-2: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.2);
  --chat-topbar-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.36);
  --chat-topbar-text: var(--default-text-color, #e2e8f0);
  --chat-topbar-muted: var(--muted-text-color, #a5b4cc);
  --chat-topbar-chip-bg: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.24);
  --chat-topbar-chip-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.44);
  --chat-topbar-btn-surface-1: rgba(
    var(--tblr-primary-rgb, 32, 107, 196),
    0.32
  );
  --chat-topbar-btn-surface-2: rgba(
    var(--tblr-primary-rgb, 32, 107, 196),
    0.22
  );
  --chat-topbar-icon: var(--accent-color-strong, var(--chat-accent, #7dd3fc));
  --chat-topbar-hover-bg: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.2);
  --chat-modern-editor-bg-1: rgba(15, 23, 42, 0.9);
  --chat-modern-editor-bg-2: rgba(30, 41, 59, 0.92);
  --chat-private-surface-1: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.2);
  --chat-private-surface-2: #111b2d;
  --chat-private-border: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.4);
}

/* Private conversation state: keep room blue DNA, but push into deeper private tones */
#main-private {
  --chat-topbar-surface-1: var(--chat-private-surface-1);
  --chat-topbar-surface-2: var(--chat-private-surface-2);
  --chat-topbar-border: var(--chat-private-border);
  --chat-topbar-text: #eff6ff;
  --chat-topbar-muted: #cbd5e1;
  --chat-topbar-chip-bg: rgba(219, 234, 254, 0.16);
  --chat-topbar-chip-border: rgba(147, 197, 253, 0.34);
  --chat-topbar-btn-surface-1: rgba(30, 58, 95, 0.9);
  --chat-topbar-btn-surface-2: rgba(15, 23, 42, 0.82);
  --chat-topbar-icon: #bfdbfe;
  --chat-topbar-hover-bg: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.22);
}

.page-content-wrapper > .navbar.topbar {
  background: linear-gradient(
    145deg,
    var(--chat-topbar-surface-1) 0%,
    var(--chat-topbar-surface-2) 100%
  );
  border-bottom: 1px solid var(--chat-topbar-border);
  box-shadow:
    0 8px 18px -14px var(--chat-modern-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-height: 3.3rem;
  height: auto;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  backdrop-filter: blur(8px);
  z-index: 220;
  overflow: visible;
}

/* In private mode, keep lower half theme-tinted and flow upward into private tone */
#main-private .page-content-wrapper > .navbar.topbar {
  background: linear-gradient(
    to top,
    var(--chat-private-surface-1) 0%,
    var(--chat-private-surface-1) 50%,
    var(--chat-private-surface-2) 100%
  ) !important;
}

.page-content-wrapper > .navbar.topbar .dropdown-menu {
  z-index: 230;
}

.page-content-wrapper > .navbar.topbar .top-channel-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
  background: var(--chat-topbar-chip-bg);
  border: 1px solid var(--chat-topbar-chip-border);
  color: var(--chat-topbar-icon);
}

.page-content-wrapper > .navbar.topbar .top-channel-name,
.page-content-wrapper > .navbar.topbar .private-top-user-meta {
  color: var(--chat-topbar-text) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.chat-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-left: 0.55rem;
  padding: 0.2rem 0.52rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.32);
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.14);
  color: var(--chat-topbar-text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.chat-mode-pill i {
  font-size: 0.78rem;
}

.chat-mode-pill-private {
  border-color: rgba(147, 197, 253, 0.38);
  background: rgba(191, 219, 254, 0.2);
  color: #eff6ff;
}

.top-channel-icon-private {
  background: rgba(191, 219, 254, 0.2) !important;
  border-color: rgba(147, 197, 253, 0.4) !important;
  color: #eff6ff !important;
}

.sidebar-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.32);
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.12);
  color: inherit;
  white-space: nowrap;
}

.sidebar-mode-badge i {
  font-size: 0.72rem;
}

.sidebar-mode-badge-private {
  border-color: rgba(147, 197, 253, 0.38);
  background: rgba(191, 219, 254, 0.18);
  color: #eff6ff;
}

.sidebar-room .topbar.topbar-channels {
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar-room .topbar.topbar-channels .room-name {
  min-width: 0;
}

.sidebar-private .private-list-header,
.sidebar-room-stats .private-list-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sidebar-private .private-list-header .sidebar-mode-badge,
.sidebar-room-stats .private-list-header .sidebar-mode-badge {
  margin-left: auto;
}

.sidebar-private .private-list-header .private-list-count-badge {
  margin-left: 0.45rem;
}

.sidebar-room-stats.sidebar-height-fix {
  overflow-y: hidden !important;
}

.sidebar-room-stats .inbox-room-stats-wrap {
  overflow-y: hidden !important;
}

.panel-mode-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.58rem 0.75rem 0.45rem;
  padding: 0.36rem 0.62rem;
  border-radius: 10px;
  border: 1px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.32);
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.12);
  color: var(--chat-modern-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.panel-mode-banner i {
  font-size: 0.82rem;
}

.panel-mode-banner-private {
  border-color: rgba(147, 197, 253, 0.38);
  background: rgba(191, 219, 254, 0.18);
  color: #eff6ff;
}

#main-private .private-right-panel .panel-mode-banner {
  width: fit-content;
  margin: 0.35rem auto 0.6rem;
}

@media (max-width: 991.98px) {
  .chat-mode-pill span,
  .sidebar-mode-badge span,
  .panel-mode-banner span {
    display: none;
  }

  .chat-mode-pill,
  .sidebar-mode-badge,
  .panel-mode-banner {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-left: 0.35rem;
  }
}

html.theme-dark .chat-mode-pill,
html.dark .chat-mode-pill,
body.theme-dark .chat-mode-pill,
body.dark .chat-mode-pill,
html.theme-trueblue .chat-mode-pill,
html.trueblue .chat-mode-pill,
body.theme-trueblue .chat-mode-pill,
body.trueblue .chat-mode-pill,
html.theme-dark .sidebar-mode-badge,
html.dark .sidebar-mode-badge,
body.theme-dark .sidebar-mode-badge,
body.dark .sidebar-mode-badge,
html.theme-trueblue .sidebar-mode-badge,
html.trueblue .sidebar-mode-badge,
body.theme-trueblue .sidebar-mode-badge,
body.trueblue .sidebar-mode-badge,
html.theme-dark .panel-mode-banner,
html.dark .panel-mode-banner,
body.theme-dark .panel-mode-banner,
body.dark .panel-mode-banner,
html.theme-trueblue .panel-mode-banner,
html.trueblue .panel-mode-banner,
body.theme-trueblue .panel-mode-banner,
body.trueblue .panel-mode-banner {
  color: #dbeafe;
  background: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.2);
  border-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.44);
}

html.theme-dark .chat-mode-pill-private,
html.dark .chat-mode-pill-private,
body.theme-dark .chat-mode-pill-private,
body.dark .chat-mode-pill-private,
html.theme-trueblue .chat-mode-pill-private,
html.trueblue .chat-mode-pill-private,
body.theme-trueblue .chat-mode-pill-private,
body.trueblue .chat-mode-pill-private,
html.theme-dark .sidebar-mode-badge-private,
html.dark .sidebar-mode-badge-private,
body.theme-dark .sidebar-mode-badge-private,
body.dark .sidebar-mode-badge-private,
html.theme-trueblue .sidebar-mode-badge-private,
html.trueblue .sidebar-mode-badge-private,
body.theme-trueblue .sidebar-mode-badge-private,
body.trueblue .sidebar-mode-badge-private,
html.theme-dark .panel-mode-banner-private,
html.dark .panel-mode-banner-private,
body.theme-dark .panel-mode-banner-private,
body.dark .panel-mode-banner-private,
html.theme-trueblue .panel-mode-banner-private,
html.trueblue .panel-mode-banner-private,
body.theme-trueblue .panel-mode-banner-private,
body.trueblue .panel-mode-banner-private {
  color: #eff6ff;
  background: rgba(191, 219, 254, 0.22);
  border-color: rgba(147, 197, 253, 0.48);
}

.page-content-wrapper > .navbar.topbar .nav-link {
  border-radius: 12px;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

@media (min-width: 992px) {
  .page-content-wrapper > .navbar.topbar {
    padding-left: 0.65rem;
    padding-right: 0.75rem;
    column-gap: 0.15rem;
  }

  .page-content-wrapper > .navbar.topbar > .me-auto {
    min-width: 0;
    padding-right: 0.5rem;
  }

  .page-content-wrapper > .navbar.topbar > a.nav-link.mobile-hidden,
  .page-content-wrapper > .navbar.topbar > button.rightbarToggle.mobile-hidden,
  .page-content-wrapper > .navbar.topbar > .nav-item.mobile-hidden > a.nav-link,
  .page-content-wrapper > .navbar.topbar > .join-voice.mobile-hidden {
    min-width: 72px !important;
    padding: 0.35rem 0.5rem !important;
    margin-bottom: 0 !important;
    border-radius: 13px;
  }

  .page-content-wrapper > .navbar.topbar > .nav-item.mobile-hidden,
  .page-content-wrapper > .navbar.topbar > a.nav-link.mobile-hidden,
  .page-content-wrapper > .navbar.topbar > button.rightbarToggle.mobile-hidden,
  .page-content-wrapper > .navbar.topbar > .join-voice.mobile-hidden {
    margin-left: 0.2rem !important;
    margin-right: 0.2rem !important;
  }

  .page-content-wrapper > .navbar.topbar a.nav-link.mobile-hidden i,
  .page-content-wrapper > .navbar.topbar button.rightbarToggle.mobile-hidden i,
  .page-content-wrapper > .navbar.topbar .nav-item.mobile-hidden > a.nav-link i,
  .page-content-wrapper > .navbar.topbar button.join-voice.mobile-hidden i {
    font-size: clamp(17px, 1.1vw, 21px) !important;
  }

  .page-content-wrapper > .navbar.topbar a.nav-link.mobile-hidden small,
  .page-content-wrapper
    > .navbar.topbar
    button.rightbarToggle.mobile-hidden
    small,
  .page-content-wrapper
    > .navbar.topbar
    .nav-item.mobile-hidden
    > a.nav-link
    small,
  .page-content-wrapper > .navbar.topbar button.join-voice.mobile-hidden small {
    font-size: 10px !important;
    margin-top: 0.2rem !important;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--chat-topbar-muted) !important;
  }

  .page-content-wrapper > .navbar.topbar .top-channel-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .page-content-wrapper > .navbar.topbar .top-channel-name {
    max-width: min(34vw, 460px);
  }

  #main-private .page-content-wrapper > .navbar.topbar .top-channel-name {
    max-width: min(38vw, 500px);
  }
}

@media (max-width: 991.98px) {
  #main-private .topbar .top-channel-name {
    font-size: 0.9rem !important;
    max-width: 45vw;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #main-private .topbar .top-channel-name .private-top-name-main {
    font-size: inherit;
  }

  #main-private .topbar .top-channel-name .private-top-name-handle {
    display: none;
  }
}

.page-content-wrapper > .navbar.topbar .nav-link:hover {
  background: var(--chat-topbar-hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -12px var(--chat-modern-shadow);
}

.page-content-wrapper > .navbar.topbar .nav-link i,
.page-content-wrapper > .navbar.topbar .nav-link small,
.page-content-wrapper > .navbar.topbar .desktop-rightbar-label,
.page-content-wrapper > .navbar.topbar .desktop-rightbar-icon {
  color: var(--chat-topbar-muted) !important;
}

.page-content-wrapper > .navbar.topbar .rightbarToggle,
.page-content-wrapper > .navbar.topbar .join-voice {
  border: 1px solid var(--chat-topbar-border);
  background: linear-gradient(
    155deg,
    var(--chat-topbar-btn-surface-1),
    var(--chat-topbar-btn-surface-2)
  );
  box-shadow: 0 8px 14px -12px var(--chat-modern-shadow);
}

/* Private Beskeder + Sog i beskeder panel only */
.sidebar-private .topbar-private {
  background: linear-gradient(
    to top,
    var(--chat-private-surface-1) 0%,
    var(--chat-private-surface-1) 50%,
    var(--chat-private-surface-2) 100%
  ) !important;
  border-bottom: 1px solid var(--chat-private-border) !important;
  box-shadow: inset 0 1px 0 rgba(219, 234, 254, 0.2);
}

.sidebar-private .topbar-private .private-list-header,
.sidebar-private .topbar-private .private-list-header span {
  color: #eff6ff !important;
}

.sidebar-private .topbar-private .private-list-header i {
  background: rgba(191, 219, 254, 0.18) !important;
  color: #eff6ff !important;
}

.sidebar-private .topbar-private .private-list-count-badge {
  color: #eff6ff !important;
  background: rgba(191, 219, 254, 0.2) !important;
  border-color: rgba(191, 219, 254, 0.34) !important;
}

.sidebar-private .private-search-wrap .dm-user-search {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.48) !important;
  color: #1e3a5f !important;
}

.sidebar-private .private-search-wrap .dm-user-search::placeholder {
  color: #5b6f88 !important;
}

.sidebar-private .private-search-wrap .input-icon-addon {
  color: #1e3a5f !important;
  background: rgba(219, 234, 254, 0.44) !important;
  border-color: rgba(147, 197, 253, 0.45) !important;
}

html.theme-dark .sidebar-private .private-search-wrap .dm-user-search,
html.dark .sidebar-private .private-search-wrap .dm-user-search,
body.theme-dark .sidebar-private .private-search-wrap .dm-user-search,
body.dark .sidebar-private .private-search-wrap .dm-user-search,
html.theme-trueblue .sidebar-private .private-search-wrap .dm-user-search,
html.trueblue .sidebar-private .private-search-wrap .dm-user-search,
body.theme-trueblue .sidebar-private .private-search-wrap .dm-user-search,
body.trueblue .sidebar-private .private-search-wrap .dm-user-search {
  background: rgba(15, 23, 42, 0.34) !important;
  border-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.52) !important;
  color: #eff6ff !important;
}

html.theme-dark
  .sidebar-private
  .private-search-wrap
  .dm-user-search::placeholder,
html.dark .sidebar-private .private-search-wrap .dm-user-search::placeholder,
body.theme-dark
  .sidebar-private
  .private-search-wrap
  .dm-user-search::placeholder,
body.dark .sidebar-private .private-search-wrap .dm-user-search::placeholder,
html.theme-trueblue
  .sidebar-private
  .private-search-wrap
  .dm-user-search::placeholder,
html.trueblue
  .sidebar-private
  .private-search-wrap
  .dm-user-search::placeholder,
body.theme-trueblue
  .sidebar-private
  .private-search-wrap
  .dm-user-search::placeholder,
body.trueblue
  .sidebar-private
  .private-search-wrap
  .dm-user-search::placeholder {
  color: #bfdbfe !important;
}

html.theme-dark .sidebar-private .private-search-wrap .input-icon-addon,
html.dark .sidebar-private .private-search-wrap .input-icon-addon,
body.theme-dark .sidebar-private .private-search-wrap .input-icon-addon,
body.dark .sidebar-private .private-search-wrap .input-icon-addon,
html.theme-trueblue .sidebar-private .private-search-wrap .input-icon-addon,
html.trueblue .sidebar-private .private-search-wrap .input-icon-addon,
body.theme-trueblue .sidebar-private .private-search-wrap .input-icon-addon,
body.trueblue .sidebar-private .private-search-wrap .input-icon-addon {
  color: #bfdbfe !important;
  background: rgba(30, 58, 95, 0.42) !important;
  border-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.54) !important;
}

.page-content-wrapper .rightbar-wrapper {
  background: linear-gradient(
    180deg,
    var(--chat-modern-surface-1) 0%,
    var(--chat-modern-surface-2) 100%
  ) !important;
  border-left: 1px solid var(--chat-modern-border) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    -10px 0 24px -22px var(--chat-modern-shadow);
  z-index: 90;
  overflow: hidden;
  overscroll-behavior: contain;
}

#main-room .page-content-wrapper .rightbar-wrapper {
  border-top: 2px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.26);
  display: flex;
  flex-direction: column;
  height: calc(var(--app-vh) - 50px);
  max-height: calc(var(--app-vh) - 50px);
  min-height: 0;
  overflow: hidden;
}

#main-room .page-content-wrapper .rightbar-wrapper .user-list-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#main-private .page-content-wrapper .rightbar-wrapper {
  border-top: 2px solid rgba(147, 197, 253, 0.4);
}

.page-content-wrapper .rightbar-wrapper .right-panel-switch {
  padding: 0.75rem 0.75rem 0.55rem;
  border-bottom: 1px solid var(--chat-modern-border);
  background: transparent;
}

#main-room .page-content-wrapper .rightbar-wrapper .right-panel-switch {
  position: sticky;
  top: 0;
  z-index: 8;
  background: linear-gradient(
    180deg,
    var(--chat-modern-surface-1) 0%,
    color-mix(in srgb, var(--chat-modern-surface-1) 84%, transparent) 100%
  );
}

.page-content-wrapper .rightbar-wrapper .right-panel-switch-btn {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--chat-modern-muted);
  background: rgba(148, 163, 184, 0.08);
  border-color: var(--chat-modern-border);
}

.page-content-wrapper .rightbar-wrapper .right-panel-switch-btn.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(
    135deg,
    var(--chat-accent, var(--accent-color, #3b82f6)),
    #38bdf8
  );
  box-shadow: 0 10px 18px -12px var(--chat-modern-shadow);
}

.page-content-wrapper .rightbar-wrapper .right-panel-section {
  padding: 0.2rem 0.55rem 0.85rem;
}

#main-room .page-content-wrapper .rightbar-wrapper .right-panel-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#main-room .page-content-wrapper .rightbar-wrapper .right-panel-members-section,
#main-room
  .page-content-wrapper
  .rightbar-wrapper
  .right-panel-members-section.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#main-room
  .page-content-wrapper
  .rightbar-wrapper
  .height-scroll-rpanelx.room-users-row,
#main-room
  .page-content-wrapper
  .rightbar-wrapper
  .height-scroll-rpanelx.group-users-row {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0.35rem 0;
}

#main-room .page-content-wrapper .rightbar-wrapper .user-list-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

#main-room .page-content-wrapper .rightbar-wrapper .user-list-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0.5rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

#main-room .page-content-wrapper .rightbar-wrapper .user-list-load-more {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  bottom: 0;
}

.page-content-wrapper .rightbar-wrapper .user-list-card,
.page-content-wrapper .rightbar-wrapper .shared-links-card,
.page-content-wrapper .rightbar-wrapper .shared-media-card,
.page-content-wrapper .private-right-panel .user-card,
.page-content-wrapper .private-right-panel .private-quick-actions,
.page-content-wrapper .private-right-panel .webcam-panel {
  border-radius: 14px;
  border: 1px solid var(--chat-modern-border) !important;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.86),
    rgba(241, 245, 249, 0.92)
  );
  box-shadow: 0 10px 22px -18px var(--chat-modern-shadow);
}

html.theme-dark .page-content-wrapper .rightbar-wrapper .user-list-card,
html.dark .page-content-wrapper .rightbar-wrapper .user-list-card,
html.theme-trueblue .page-content-wrapper .rightbar-wrapper .user-list-card,
html.trueblue .page-content-wrapper .rightbar-wrapper .user-list-card,
html.theme-dark .page-content-wrapper .rightbar-wrapper .shared-links-card,
html.dark .page-content-wrapper .rightbar-wrapper .shared-links-card,
html.theme-trueblue .page-content-wrapper .rightbar-wrapper .shared-links-card,
html.trueblue .page-content-wrapper .rightbar-wrapper .shared-links-card,
html.theme-dark .page-content-wrapper .rightbar-wrapper .shared-media-card,
html.dark .page-content-wrapper .rightbar-wrapper .shared-media-card,
html.theme-trueblue .page-content-wrapper .rightbar-wrapper .shared-media-card,
html.trueblue .page-content-wrapper .rightbar-wrapper .shared-media-card,
html.theme-dark .page-content-wrapper .private-right-panel .user-card,
html.dark .page-content-wrapper .private-right-panel .user-card,
html.theme-trueblue .page-content-wrapper .private-right-panel .user-card,
html.trueblue .page-content-wrapper .private-right-panel .user-card,
html.theme-dark
  .page-content-wrapper
  .private-right-panel
  .private-quick-actions,
html.dark .page-content-wrapper .private-right-panel .private-quick-actions,
html.theme-trueblue
  .page-content-wrapper
  .private-right-panel
  .private-quick-actions,
html.trueblue .page-content-wrapper .private-right-panel .private-quick-actions,
html.theme-dark .page-content-wrapper .private-right-panel .webcam-panel,
html.dark .page-content-wrapper .private-right-panel .webcam-panel,
html.theme-trueblue .page-content-wrapper .private-right-panel .webcam-panel,
html.trueblue .page-content-wrapper .private-right-panel .webcam-panel {
  background: linear-gradient(
    160deg,
    rgba(15, 23, 42, 0.82),
    rgba(30, 41, 59, 0.84)
  );
}

.main-panel .room-editor,
.main-panel .private-editor {
  border-top: 0 !important;
  background: transparent;
}

#chat-editor .editor-wrap {
  padding: 0 0.2rem 0.25rem;
}

#chat-editor .reply-msg-row {
  background: linear-gradient(
    160deg,
    var(--chat-modern-editor-bg-1),
    var(--chat-modern-editor-bg-2)
  );
  border: 1px solid var(--chat-modern-border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  margin: 10px 12px -14px;
}

#chat-editor .reply-msg-row .replied-to {
  background: linear-gradient(
    160deg,
    var(--chat-modern-surface-1),
    var(--chat-modern-surface-2)
  );
  border: 1px solid var(--chat-modern-border);
  border-radius: 10px !important;
  color: var(--chat-modern-text);
}

#chat-editor .editor-container {
  background: transparent !important;
  border: 1px solid var(--chat-modern-border);
  border-radius: 14px;
  box-shadow:
    0 10px 20px -18px var(--chat-modern-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  min-height: 46px;
  margin: 12px;
  padding: 6px 10px;
}

#main-room #chat-editor .editor-container {
  border-top: 2px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.28);
}

#main-private #chat-editor .editor-container {
  border-top: 2px solid rgba(147, 197, 253, 0.44);
}

#chat-editor .editor-container .note-editor.note-frame {
  background: transparent;
}

#chat-editor
  .editor-container
  .note-editor.note-airframe
  .note-editing-area
  .note-editable,
#chat-editor
  .editor-container
  .note-editor.note-frame
  .note-editing-area
  .note-editable {
  color: var(--chat-modern-text) !important;
  background: transparent !important;
}

#chat-editor .attachment-col svg,
#chat-editor .emoji-col svg,
#chat-editor .editor-icon {
  color: var(--chat-modern-muted) !important;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

#chat-editor .attachment-col svg:hover,
#chat-editor .emoji-col svg:hover,
#chat-editor .editor-icon:hover {
  color: var(--chat-accent, var(--accent-color, #3b82f6)) !important;
  transform: translateY(-1px);
}

#chat-editor .attachments-container {
  border: 1px solid var(--chat-modern-border);
  background: linear-gradient(
    160deg,
    var(--chat-modern-surface-1),
    var(--chat-modern-surface-2)
  );
  border-radius: 12px;
  box-shadow: 0 10px 20px -18px var(--chat-modern-shadow);
}

#chat-editor .non-login-message,
#chat-editor .non-join-message,
#chat-editor .non-chat-select,
#chat-editor .user-restricted,
#chat-editor .permission-denied-editor,
#chat-editor .forward-selection {
  border: 1px solid var(--chat-modern-border);
  background: linear-gradient(
    160deg,
    var(--chat-modern-surface-1),
    var(--chat-modern-surface-2)
  );
  border-radius: 12px;
  box-shadow: 0 10px 20px -20px var(--chat-modern-shadow);
}

@media (max-width: 768px) {
  #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper
    .user-list-card
    .user-search-shell.is-collapsed {
    display: none;
  }

  #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper
    .user-list-card
    .user-search-shell.is-collapsed
    ~ .user-filter-pills,
  #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper
    .user-list-card
    .user-search-shell.is-collapsed
    ~ .user-list-discovery-meta {
    display: none;
  }

  #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper
    .user-list-card
    .user-list-compact-header {
    margin-bottom: 0.22rem;
  }

  .page-content-wrapper > .navbar.topbar {
    min-height: 3.05rem;
    padding-top: 0.14rem;
    padding-bottom: 0.14rem;
  }

  .page-content-wrapper .rightbar-wrapper .right-panel-switch {
    padding: 0.62rem 0.52rem 0.42rem;
  }

  #chat-editor .editor-container {
    margin: 6px 8px 8px;
    min-height: 40px;
    border-radius: 12px;
  }

  #chat-editor .reply-msg-row {
    margin: 6px 8px -12px;
  }

  /* iOS/Android auto-zoom guard: keep focused chat/search inputs at >=16px. */
  #chat-editor #chat_message,
  #chat-editor .chat_message,
  #chat-editor
    .editor-container
    .note-editor.note-airframe
    .note-editing-area
    .note-editable,
  #chat-editor
    .editor-container
    .note-editor.note-frame
    .note-editing-area
    .note-editable,
  #wrapper .rightbar-wrapper .room-user-search,
  #wrapper .rightbar-wrapper .group-user-search,
  #wrapper .rightbar-wrapper .dm-user-search {
    font-size: 16px !important;
    line-height: 1.4;
  }

  /* Mobile right panel: keep a single, anchored panel to avoid ghost/floating duplicates. */
  #wrapper .main-tab-pane .rightbar-wrapper {
    display: none !important;
  }

  #wrapper .main-tab-pane.active.show .rightbar-wrapper {
    display: block !important;
    position: fixed !important;
    top: calc(3.05rem + env(safe-area-inset-top, 0px));
    right: 0;
    left: auto !important;
    bottom: var(
      --mobile-bottom-nav-visible-height,
      calc(61px + (env(safe-area-inset-bottom, 0px) * 2))
    );
    width: min(86vw, 360px);
    min-width: min(86vw, 360px);
    max-width: min(92vw, 380px);
    margin: 0 !important;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    overflow: hidden;
    background: var(--chat-modern-surface-1) !important;
    box-shadow:
      -14px 0 28px -18px var(--chat-modern-shadow),
      inset 1px 0 0 rgba(255, 255, 255, 0.06);
    z-index: 1028;
    transform: translateX(104%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.22s ease,
      opacity 0.22s ease;
  }

  body.sb-rightnav-toggled
    #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  #wrapper .main-tab-pane.active.show .rightbar-wrapper .user-list-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper
    .right-panel-members-section.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #wrapper .main-tab-pane.active.show .rightbar-wrapper .right-panel-section {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper
    .height-scroll-rpanelx.room-users-row,
  #wrapper
    .main-tab-pane.active.show
    .rightbar-wrapper
    .height-scroll-rpanelx.group-users-row {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0.35rem 0;
    overflow: hidden;
  }

  #wrapper .main-tab-pane.active.show .rightbar-wrapper .user-list-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  #wrapper .main-tab-pane.active.show .rightbar-wrapper .user-list-content {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;
  }
}