.hero {
  min-height: auto;
  padding-block: 42px 34px;
  align-items: start;
}

.hero-copy h1 {
  font-size: clamp(2.7rem, 5vw, 4.8rem);
  margin-bottom: 18px;
}

.status-pill { margin-bottom: 18px; }
.coming-next { margin-top: 20px; }
.signature-line { margin-top: 18px; }

.chat-layout {
  align-items: start;
  grid-template-columns: 220px minmax(0, 1fr) 235px;
}

.left-sidebar-stack {
  display: grid;
  gap: 10px;
  align-self: start;
}

.room-sidebar,
.member-sidebar,
.lounge-newcomers {
  height: auto;
}

.collapsible-panel {
  overflow: hidden;
}

.collapsible-summary {
  list-style: none;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.collapsible-summary.compact {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.collapsible-summary::-webkit-details-marker,
.member-group-title::-webkit-details-marker { display: none; }

.collapsible-panel[open] > .collapsible-summary {
  border-bottom-color: var(--line);
}

.collapsible-summary .eyebrow {
  display: block;
  margin: 0 0 3px;
  font-size: .58rem;
}

.collapsible-summary strong {
  font-size: .94rem;
}

.chevron {
  color: var(--muted);
  transition: transform .16s ease;
}

.collapsible-panel[open] .chevron { transform: rotate(180deg); }

.panel-badge {
  padding: 4px 7px;
  border: 1px solid rgba(213,161,91,.25);
  border-radius: 999px;
  background: rgba(213,161,91,.08);
  color: var(--gold);
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.room-list {
  display: grid;
  gap: 5px;
  padding: 8px;
}

.room-button {
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  padding: 8px;
  border-radius: 11px;
}

.room-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: .62rem;
}

.room-copy strong { font-size: .76rem; }
.room-copy small { font-size: .6rem; }
.sidebar-note { padding: 10px 12px; font-size: .61rem; }

.lounge-newcomers-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px 10px;
}

.lounge-newcomer-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px;
}

.lounge-newcomer-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
}

.lounge-newcomer-item small {
  color: var(--muted);
  font-size: .57rem;
  white-space: nowrap;
}

.compact-empty {
  margin: 0;
  color: #77727d;
  font-size: .64rem;
  line-height: 1.5;
}

.member-sidebar {
  align-self: start;
  max-height: min(500px, calc(100vh - 104px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.member-sidebar-heading {
  min-height: 62px;
  padding: 12px 14px;
}

.member-sidebar-heading .eyebrow {
  margin-bottom: 2px;
  font-size: .58rem;
}

.member-sidebar-heading h2 { font-size: 1rem; }

.member-groups {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 5px 7px 7px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.member-group {
  padding-block: 2px 5px;
}

.member-group + .member-group { border-top: 1px solid rgba(255,255,255,.06); }

.member-group-title {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 5px;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.member-group-title::after {
  content: '⌄';
  order: 3;
  transition: transform .16s ease;
}

.member-group[open] > .member-group-title::after { transform: rotate(180deg); }

.member-group-title strong {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--text);
  font-size: .56rem;
}

.member-list { display: grid; gap: 1px; }

.member-item {
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 34px;
  padding: 3px 5px;
  border-radius: 8px;
}

.member-avatar {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  font-size: .55rem;
}

.member-name { font-size: .68rem; }
.member-status { width: 6px; height: 6px; }
.member-empty { padding: 4px 5px 7px; font-size: .61rem; }
.member-sidebar-note { padding: 8px 10px; font-size: .58rem; }

.chat-header { padding: 20px 22px; }
.chat-header h2 { font-size: 1.7rem; }
.chat-header-actions { gap: 7px; }
.message-list { min-height: 420px; }

.message-report-button,
.footer-link-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.message-report-button {
  margin-left: auto;
  font-size: .62rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message-report-button:hover,
.footer-link-button:hover { color: var(--text); }

textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  color: var(--text);
  resize: vertical;
  font: inherit;
}

.site-footer--expanded {
  width: 100%;
  border-top: 1px solid var(--line);
  background: rgba(10,10,14,.72);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-block: 28px;
}

.footer-brand,
.footer-links {
  display: grid;
  align-content: start;
  gap: 7px;
  color: var(--muted);
  font-size: .7rem;
}

.footer-brand > strong,
.footer-links > strong {
  margin-bottom: 4px;
  color: var(--text);
  font-size: .76rem;
}

.footer-links a,
.footer-link-button {
  width: fit-content;
  text-align: left;
  line-height: 1.4;
}

.footer-company {
  max-width: 420px;
  line-height: 1.55;
}

.footer-empty { color: #66616c; }

@media (min-width: 1181px) {
  .room-sidebar { max-height: 330px; }
  .room-list { max-height: 205px; overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 1180px) {
  .chat-layout { grid-template-columns: 205px minmax(0, 1fr); }
  .left-sidebar-stack { min-width: 0; }
  .member-sidebar { max-height: none; height: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 30px; }
  .left-sidebar-stack { display: contents; }

  .lounge-newcomers {
    position: fixed;
    z-index: 70;
    left: 12px;
    bottom: 12px;
    width: min(320px, calc(100vw - 24px));
    max-height: 190px;
    transform: translateX(calc(-100% - 24px));
    pointer-events: none;
  }

  .room-sidebar.is-open + .lounge-newcomers {
    transform: translateX(0);
    pointer-events: auto;
  }

  .room-sidebar.is-open { bottom: 202px; }
}

@media (max-width: 620px) {
  .hero { padding-block: 24px; }
  .hero-copy h1 { font-size: clamp(2.35rem, 13vw, 3.5rem); }
  .hero-lede { font-size: .92rem; }
  .chat-header { padding: 14px 12px; }
  .chat-header h2 { font-size: 1.45rem; }
  .member-sidebar { max-height: calc(100vh - 82px); }
  .member-sidebar-heading { min-height: 58px; padding: 10px 12px; }
  .member-item { grid-template-columns: 29px minmax(0, 1fr) auto; min-height: 36px; }
  .member-avatar { width: 29px; height: 29px; }
  .lounge-newcomers-list { padding: 8px 10px 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; padding-block: 22px; }
}


.member-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.member-region,
.message-region {
  overflow: hidden;
  color: var(--muted);
  font-size: .56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-region::before {
  content: '· ';
}

.message--woman .message-avatar,
.member-item--women .member-avatar,
.newcomer--women .member-avatar {
  background: linear-gradient(
    135deg,
    rgba(226,72,118,.88),
    rgba(138,55,116,.78)
  );
}

.message--woman .message-meta strong {
  color: #ef8dad;
}

.message--man .message-avatar,
.member-item--men .member-avatar,
.newcomer--men .member-avatar {
  background: linear-gradient(
    135deg,
    rgba(45,132,220,.90),
    rgba(62,77,177,.80)
  );
}

.message--man .message-meta strong {
  color: #79b9f1;
}

.new-chat-timer {
  color: var(--muted);
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   CHAT VIEWPORT LAYOUT
   De chat blijft volledig binnen het zichtbare browservenster.
   Alleen berichten en zijlijsten scrollen intern.
   ========================================================= */

html,
body {
  overflow-x: hidden;
}

.chat-section {
  min-height: 0;
  padding-block: 12px 16px;
  scroll-margin-top: 76px;
}

.chat-layout {
  height: calc(100dvh - 104px);
  min-height: 0;
  align-items: stretch;
}

/* Middenkolom */
.chat-shell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto
    auto;
  overflow: hidden;
}

/* Alleen dit gedeelte scrollt */
.message-list {
  min-height: 0 !important;
  max-height: none !important;
  height: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Composer blijft altijd zichtbaar */
.composer {
  position: relative;
  bottom: auto;
  z-index: 4;
  flex-shrink: 0;
}

.chat-footnote {
  flex-shrink: 0;
}

/* Linkerkolom */
.left-sidebar-stack {
  min-height: 0;
  height: 100%;
  align-self: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Rechterkolom */
.member-sidebar {
  min-height: 0;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch;
}

.member-groups {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Lege chat mag niet kunstmatig te hoog worden */
.empty-chat {
  min-height: 100%;
}


/* =========================================================
   TABLET
   Rechts wordt een drawer.
   ========================================================= */

@media (max-width: 1180px) {
  .chat-layout {
    height: calc(100dvh - 104px);
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .member-sidebar {
    height: auto !important;
    max-height: none !important;
  }
}


/* =========================================================
   MOBIEL
   Chat neemt vrijwel het hele scherm.
   Rooms links, Leden rechts.
   ========================================================= */

@media (max-width: 900px) {
  .chat-section.shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    scroll-margin-top: 76px;
  }

  .chat-layout {
    display: block;
    width: 100%;
    height: calc(100dvh - 76px);
    min-height: 0;
  }

  .chat-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /*
   * Linker drawer:
   * Chatrooms + Nieuw in chat samen.
   */
  .left-sidebar-stack {
    position: fixed;
    z-index: 70;
    top: 84px;
    left: 12px;
    bottom: 12px;

    width: min(340px, calc(100vw - 24px));
    height: auto;

    display: grid;
    align-content: start;
    gap: 10px;

    padding: 0;
    overflow-y: auto;

    transform: translateX(calc(-100% - 28px));
    transition: transform .2s ease;
    pointer-events: none;
  }

  .left-sidebar-stack.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  /*
   * De twee kaarten zitten nu gewoon ín de linker drawer.
   */
  .left-sidebar-stack .room-sidebar,
  .left-sidebar-stack .lounge-newcomers {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .left-sidebar-stack .room-sidebar.is-open {
    transform: none !important;
  }

  .room-sidebar > .sidebar-close {
    position: absolute;
    z-index: 4;
    top: 12px;
    right: 12px;
  }

  .room-list {
    max-height: 38dvh;
    overflow-y: auto;
  }

  .lounge-newcomers-list {
    max-height: 30dvh;
    overflow-y: auto;
  }

  /*
   * Rechter drawer.
   */
  .member-sidebar {
    position: fixed;
    z-index: 70;
    top: 84px;
    right: 12px;
    bottom: 12px;

    width: min(340px, calc(100vw - 24px));
    height: auto !important;
    max-height: none !important;

    transform: translateX(calc(100% + 28px));
    transition: transform .2s ease;
  }

  .member-sidebar.is-open {
    transform: translateX(0);
  }

  .member-groups {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto;
  }

  /*
   * Compacte chatheader.
   */
  .chat-header {
    flex: 0 0 auto;
    padding: 12px;
    gap: 8px;
  }

  .chat-header h2 {
    margin-bottom: 2px;
    font-size: 1.35rem;
  }

  .chat-header .eyebrow {
    margin-bottom: 2px;
    font-size: .55rem;
  }

  .chat-header .muted {
    margin-bottom: 0;
    font-size: .68rem;
    line-height: 1.35;
  }

  .chat-header-actions {
    gap: 6px;
  }

  .system-banner {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: .68rem;
    line-height: 1.35;
  }

  .message-list {
    min-height: 0 !important;
    max-height: none !important;
    height: auto;
    padding: 12px;
  }

  .composer {
    position: relative !important;
    bottom: auto !important;
    padding:
      9px
      10px
      calc(9px + env(safe-area-inset-bottom));
  }

  .chat-footnote {
    padding: 5px 10px 7px;
    font-size: .56rem;
    line-height: 1.25;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 69;
  }
}


/* =========================================================
   KLEINE TELEFOONS
   ========================================================= */

@media (max-width: 620px) {
  .chat-layout {
    height: calc(100dvh - 68px);
  }

  .chat-section.shell {
    scroll-margin-top: 68px;
  }

  .left-sidebar-stack,
  .member-sidebar {
    top: 72px;
    bottom: 8px;
  }

  .chat-header {
    padding: 8px 10px;
  }

  .chat-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .mobile-panel-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .mobile-panel-actions .button {
    width: 100%;
    min-height: 34px;
  }

  .online-pill {
    padding: 6px 8px;
    font-size: .66rem;
  }

  #report-room,
  #leave-chat {
    min-height: 34px;
    padding-inline: 10px;
    font-size: .68rem;
  }

  .system-banner {
    display: block;
  }

  .system-banner strong {
    display: block;
    margin-bottom: 2px;
  }

  .message {
    margin-bottom: 10px;
  }

  .message-bubble {
    padding: 9px 11px;
    font-size: .86rem;
  }

  .composer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .composer input {
    min-height: 42px;
  }

  .composer .button {
    min-width: 78px;
    min-height: 42px;
    padding-inline: 12px;
  }
}


/* Lage schermen zoals telefoon landscape */
@media (max-height: 650px) {
  .chat-header .muted,
  .chat-footnote {
    display: none;
  }

  .chat-header {
    padding-block: 7px;
  }

  .system-banner {
    padding-block: 6px;
  }
}

/* =========================================================
   ACTIVE CHAT = VASTE APP-WEERGAVE
   Geen paginascroll tijdens het chatten.
   ========================================================= */

body.chat-active {
  height: 100dvh;
  overflow: hidden;
}

/*
 * Grote Coming Soon / intro-banner verdwijnt
 * zodra iemand in de chat zit.
 */
body.chat-active .hero {
  display: none !important;
}

/*
 * Footer is tijdens chat niet nodig.
 * Zo krijgt de chat de volledige beschikbare hoogte.
 */
body.chat-active .site-footer {
  display: none !important;
}

body.chat-active main {
  height: calc(100dvh - 76px);
  min-height: 0;
  overflow: hidden;
}

body.chat-active .chat-section {
  width: 100%;
  height: 100%;
  min-height: 0;

  padding-top: 10px;
  padding-bottom: 10px;

  overflow: hidden;
}

body.chat-active .chat-layout {
  height: 100%;
  min-height: 0;
}

body.chat-active .chat-shell {
  height: 100%;
  min-height: 0;

  display: grid;
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto
    auto;
}

/*
 * Alleen de berichten scrollen.
 */
body.chat-active .message-list {
  min-height: 0 !important;
  max-height: none !important;
  height: auto;

  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/*
 * Typvak blijft altijd onderaan zichtbaar.
 */
body.chat-active .composer {
  position: relative !important;
  bottom: auto !important;
  z-index: 5;
}

/*
 * Linker en rechter kolommen blijven ook
 * binnen dezelfde viewport.
 */
body.chat-active .left-sidebar-stack,
body.chat-active .member-sidebar {
  min-height: 0;
  max-height: none !important;
  height: 100%;
}

body.chat-active .left-sidebar-stack {
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.chat-active .member-groups {
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto;
  overscroll-behavior: contain;
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 900px) {

  body.chat-active main {
    height: calc(100dvh - 76px);
  }

  body.chat-active .chat-section {
    padding: 0;
  }

  body.chat-active .chat-layout {
    width: 100%;
    height: 100%;
  }

  body.chat-active .chat-shell {
    width: 100%;
    height: 100%;

    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  body.chat-active .message-list {
    min-height: 0 !important;
    max-height: none !important;
  }

  /*
   * Safe area voor iPhone e.d.
   */
  body.chat-active .composer {
    padding-bottom:
      calc(9px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
   KLEINE TELEFOONS
   ========================================================= */

@media (max-width: 620px) {

  body.chat-active main {
    height: calc(100dvh - 76px);
  }

  body.chat-active .chat-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.chat-active .system-banner {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.chat-active .chat-footnote {
    padding-top: 4px;
    padding-bottom: 5px;
  }
}


/*
 * Op zeer lage schermen gebruiken we iedere pixel
 * voor de berichten en typbalk.
 */
@media (max-height: 650px) {

  body.chat-active .chat-footnote {
    display: none;
  }

  body.chat-active .chat-header .muted {
    display: none;
  }
}


/* =========================================================
   RESPONSIVE CHAT POLISH
   ========================================================= */

@media (max-width: 1180px) {
  body.chat-active .left-sidebar-stack {
    position: fixed;
    z-index: 90;
    top: 84px;
    left: 10px;
    bottom: 10px;
    width: min(360px, calc(100vw - 20px));
    height: auto;
    display: grid;
    align-content: start;
    gap: 10px;
    overflow-y: auto;
    transform: translateX(calc(-100% - 26px));
    transition: transform .22s ease;
    pointer-events: none;
  }

  body.chat-active .left-sidebar-stack.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  body.chat-active .member-sidebar {
    position: fixed;
    z-index: 90;
    top: 84px;
    right: 10px;
    bottom: 10px;
    width: min(360px, calc(100vw - 20px));
    height: auto !important;
    max-height: none !important;
    transform: translateX(calc(100% + 26px));
    transition: transform .22s ease;
  }

  body.chat-active .member-sidebar.is-open {
    transform: translateX(0);
  }

  body.chat-active .left-sidebar-stack .room-sidebar,
  body.chat-active .left-sidebar-stack .lounge-newcomers {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-height: none !important;
    transform: none !important;
  }
}

body.chat-active #report-room,
body.chat-active #leave-chat {
  min-width: 36px;
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}

body.chat-active #report-room::before {
  content: "⚑";
  font-size: 1rem;
}

body.chat-active #leave-chat::before {
  content: "↪";
  font-size: 1.05rem;
}

body.chat-active .message-report-button {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0;
  opacity: .4;
}

body.chat-active .message-report-button::before {
  content: "⚑";
  font-size: .62rem;
}

body.chat-active .message-avatar,
body.chat-active .message-meta strong,
body.chat-active .member-avatar,
body.chat-active .member-name {
  cursor: pointer;
}

.user-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: 119;
  background: rgba(5,5,9,.72);
  backdrop-filter: blur(5px);
}

.user-action-sheet {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 18px;
  width: min(430px, calc(100vw - 24px));
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(31,31,41,.99),
    rgba(18,18,25,.99)
  );
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

.user-action-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.user-action-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), #873044);
  font-weight: 900;
}

.user-action-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.user-action-copy small {
  color: var(--muted);
}

.user-action-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.user-action-list {
  display: grid;
  padding: 8px;
}

.user-action-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.user-action-button:hover {
  background: rgba(255,255,255,.055);
}

@media (max-width: 620px) {
  body.chat-active .chat-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    gap: 6px;
  }

  body.chat-active .mobile-panel-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}


/* === FINAL CHAT HEADER POLISH V1 === */

/* ===============================================
   DESKTOP - nette 3 kolommen
   =============================================== */

body.chat-active .chat-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 16px !important;
}

body.chat-active .chat-header-actions {
  width: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 6px !important;
}

body.chat-active .mobile-panel-actions {
  display: none !important;
}

body.chat-active .online-pill {
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px;
  padding: 0 10px !important;
  margin: 0;
  flex: 0 0 auto;
  gap: 7px;
  font-size: .68rem !important;
  white-space: nowrap;
}

body.chat-active .online-pill > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
}

body.chat-active .online-pill strong {
  font-size: .72rem;
}

.chat-icon-button {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 50% !important;
}

.chat-icon-button svg {
  display: block;
  width: 17px;
  height: 17px;
}

body.chat-active #report-room::before,
body.chat-active #leave-chat::before,
body.chat-active .message-report-button::before {
  content: none !important;
}

body.chat-active .message-report-button {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  padding: 0 !important;
  margin-left: auto;
  display: inline-grid !important;
  place-items: center;
  border-radius: 50%;
  opacity: .25;
  transition:
    opacity .15s ease,
    background .15s ease;
}

body.chat-active .message-report-button svg {
  width: 12px;
  height: 12px;
}

body.chat-active .message:hover .message-report-button,
body.chat-active .message-report-button:focus-visible {
  opacity: .85;
  background: rgba(255,255,255,.055);
}

body.chat-active .member-item:hover {
  background: rgba(255,255,255,.035);
}


/* ===============================================
   TABLET
   Rooms links drawer / leden rechts drawer
   =============================================== */

@media (max-width: 1180px) {

  body.chat-active .mobile-panel-actions {
    width: auto !important;
    display: flex !important;
    flex: 0 0 auto;
    gap: 5px !important;
    order: 0 !important;
  }

  body.chat-active .mobile-panel-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    flex: 0 0 36px !important;
  }

  body.chat-active .online-pill {
    margin-left: auto;
  }

  body.chat-active .left-sidebar-stack,
  body.chat-active .member-sidebar {
    box-shadow:
      0 24px 80px rgba(0,0,0,.55);
  }
}


/* ===============================================
   MOBIEL
   alles compact op één actieregel
   =============================================== */

@media (max-width: 720px) {

  body.chat-active .chat-header {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px 10px !important;
  }

  body.chat-active .chat-header > div:first-child {
    min-width: 0;
  }

  body.chat-active .chat-header h2 {
    margin-bottom: 1px;
    font-size: 1.28rem !important;
  }

  body.chat-active #room-access-label {
    margin-bottom: 2px;
    font-size: .52rem;
  }

  body.chat-active #chat-welcome {
    display: none;
  }

  body.chat-active .chat-header-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  body.chat-active .mobile-panel-actions {
    display: flex !important;
    width: auto !important;
    flex: 0 0 auto;
  }

  body.chat-active .online-pill {
    margin-left: auto;
    height: 34px;
    padding-inline: 8px !important;
  }

  body.chat-active .system-banner {
    padding: 6px 10px !important;
    font-size: .62rem !important;
  }

  body.chat-active .system-banner strong {
    margin-right: 5px;
  }
}


/* Heel smalle telefoons */
@media (max-width: 390px) {

  .chat-icon-button,
  body.chat-active .mobile-panel-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    flex-basis: 34px !important;
  }

  body.chat-active .online-pill {
    height: 34px;
    padding-inline: 7px !important;
    font-size: .62rem !important;
  }
}


/* Touch: meldvlag mag iets zichtbaarder */
@media (pointer: coarse) {

  body.chat-active .message-report-button {
    opacity: .45;
  }
}


/* Desktop kolommen strak uitlijnen */
@media (min-width: 1181px) {

  body.chat-active .chat-layout {
    grid-template-columns:
      230px
      minmax(0, 1fr)
      250px !important;

    gap: 12px !important;
    align-items: stretch !important;
  }

  body.chat-active .left-sidebar-stack,
  body.chat-active .chat-shell,
  body.chat-active .member-sidebar {
    height: 100% !important;
  }
}

/* MEMBERS PANEL - KAARTJES MET RUIMTE */

body.chat-active .member-groups {
  display: grid;
  gap: 10px;
  padding: 10px;
  align-content: start;
}

body.chat-active .member-group {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );
}

body.chat-active .member-group + .member-group {
  border-top: 1px solid rgba(255,255,255,.07);
}

body.chat-active .member-group-title {
  min-height: 38px;
  padding: 8px 10px;
  background: rgba(255,255,255,.018);
}

body.chat-active .member-list {
  display: grid;
  gap: 5px;
  padding: 4px 7px 8px;
}

body.chat-active .member-item {
  min-height: 40px;
  padding: 5px 7px;
  border-radius: 10px;
  transition:
    background .15s ease,
    transform .15s ease;
}

body.chat-active .member-item:hover {
  background: rgba(255,255,255,.045);
}

body.chat-active .member-empty {
  padding: 8px 7px 10px;
}

body.chat-active .member-sidebar-note {
  margin-top: 4px;
  padding: 8px 12px 10px;
}

@media (max-width: 620px) {
  body.chat-active .member-groups {
    gap: 12px;
    padding: 10px;
  }

  body.chat-active .member-group {
    border-radius: 15px;
  }

  body.chat-active .member-group-title {
    min-height: 40px;
  }

  body.chat-active .member-item {
    min-height: 42px;
  }
}


/* =========================================================
   DESIRE DISTRICT - CHAT ALIGNMENT FINAL
   ========================================================= */

body.chat-active .chat-section {
  width: 100%;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box;
}

body.chat-active .chat-layout {
  width: 100%;
  max-width: 1900px;
  margin-left: auto;
  margin-right: auto;
}

/* Lobby mooi centreren */

body.chat-active .chat-header {
  position: relative;
  min-height: 90px;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  padding: 12px 150px !important;
  text-align: center;
}

body.chat-active .chat-header > div:first-child {
  width: 100%;
  min-width: 0;
  text-align: center;
}

body.chat-active .chat-header .eyebrow {
  text-align: center;
}

body.chat-active .chat-header h2 {
  margin: 2px auto 3px !important;
  text-align: center;
  font-size: 1.55rem;
}

body.chat-active .chat-header .muted {
  margin: 0 auto;
  text-align: center;
}

/* Acties rechts */

body.chat-active .chat-header-actions {
  position: absolute !important;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: auto !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
}

/* Bericht + meldknop */

body.chat-active .message {
  position: relative;
  padding-right: 42px !important;
}

body.chat-active .message-report-button {
  position: absolute !important;
  right: 8px;
  top: 8px;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  opacity: .28;
}

body.chat-active .message:hover .message-report-button,
body.chat-active .message-report-button:focus-visible {
  opacity: .9;
  background: rgba(255,255,255,.055);
}

body.chat-active .message-bubble {
  max-width: min(760px, calc(100% - 12px));
  overflow-wrap: anywhere;
}

/* Desktop */

@media (min-width: 1181px) {
  body.chat-active .chat-layout {
    grid-template-columns:
      230px
      minmax(0, 1fr)
      250px !important;
    gap: 14px !important;
  }

  body.chat-active .left-sidebar-stack,
  body.chat-active .chat-shell,
  body.chat-active .member-sidebar {
    min-width: 0;
  }
}

/* Tablet */

@media (max-width: 1180px) {
  body.chat-active .chat-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.chat-active .left-sidebar-stack {
    left: 8px !important;
    top: 82px !important;
    bottom: 8px !important;
    width: min(360px, calc(100vw - 16px)) !important;
  }

  body.chat-active .member-sidebar {
    right: 8px !important;
    top: 82px !important;
    bottom: 8px !important;
    width: min(360px, calc(100vw - 16px)) !important;
  }

  body.chat-active .chat-shell {
    width: 100%;
    border-radius: 18px;
  }
}

/* Mobiel */

@media (max-width: 720px) {
  body.chat-active .chat-section {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body.chat-active .chat-shell {
    border-radius: 16px !important;
  }

  body.chat-active .chat-header {
    min-height: 116px;
    display: block !important;
    padding: 10px 10px 52px !important;
  }

  body.chat-active .chat-header > div:first-child {
    width: 100%;
    text-align: center;
  }

  body.chat-active .chat-header h2 {
    font-size: 1.4rem !important;
    text-align: center;
  }

  body.chat-active .chat-header .eyebrow,
  body.chat-active .chat-header .muted {
    text-align: center;
  }

  body.chat-active .chat-header-actions {
    position: absolute !important;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 8px;
    width: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 7px;
  }

  body.chat-active .mobile-panel-actions {
    display: flex !important;
    width: auto !important;
    gap: 6px !important;
  }

  body.chat-active .online-pill {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  body.chat-active .message {
    padding-right: 36px !important;
  }

  body.chat-active .message-report-button {
    right: 5px;
    top: 6px;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  body.chat-active .message-bubble {
    max-width: calc(100% - 4px);
  }

  body.chat-active .left-sidebar-stack {
    left: 6px !important;
    top: 70px !important;
    bottom: 6px !important;
    width: calc(100vw - 12px) !important;
    max-width: 360px;
  }

  body.chat-active .member-sidebar {
    right: 6px !important;
    top: 70px !important;
    bottom: 6px !important;
    width: calc(100vw - 12px) !important;
    max-width: 360px;
  }
}

/* Zeer smalle gsm */

@media (max-width: 390px) {
  body.chat-active .chat-header {
    min-height: 112px;
  }

  body.chat-active .chat-header-actions {
    left: 7px;
    right: 7px;
    gap: 5px;
  }

  body.chat-active .online-pill {
    padding-inline: 7px !important;
    font-size: .62rem !important;
  }
}



/* One continuous online list: new arrivals, women, men, then other members. */
body.chat-active #online-member-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 8px;
}
body.chat-active #online-member-list .member-item {
  min-height: 43px;
  padding: 6px 7px;
  border-radius: 10px;
}
body.chat-active #online-member-list .member-item + .member-item { margin-top: 3px; }
.member-arrival { display: block; margin-top: 2px; color: var(--gold); font-size: .62rem; }

/* Chat viewport, including a mobile software keyboard. */
body.chat-active { position: fixed; inset: var(--chat-viewport-top, 0px) 0 auto; height: var(--chat-viewport-height, 100dvh); }
body.chat-active main { height: calc(var(--chat-viewport-height, 100dvh) - 76px); }
body.chat-active .chat-layout { align-items: stretch; gap: 8px !important; }
body.chat-active .chat-shell { grid-template-rows: auto auto auto minmax(0,1fr) auto auto; }
#chat-status { margin: 0; padding: 4px 10px; color: var(--gold); font-size: .72rem; }
#chat-status:empty { padding: 0; }
body.chat-active .chat-header { min-height: 0; padding: 8px 10px !important; display: grid !important; gap: 6px; }
body.chat-active .chat-header-actions { position: static !important; transform: none !important; width: 100% !important; justify-content: center !important; }
body.chat-active .chat-header h2 { font-size: 1.2rem !important; }
body.chat-active .chat-header .muted { font-size: .7rem; }
body.chat-active .chat-section { padding-block: 6px; }
body.chat-active .member-sidebar { overflow: hidden; }
body.chat-active .member-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; }
.member-status.is-idle { background: #d8ac58; box-shadow: none; }
.gold-badge { margin-left: 5px; color: #f2ca72; font-size: .65rem; border: 1px solid #a88743; border-radius: 5px; padding: 1px 4px; }
.gold-badge--glow { text-shadow: 0 0 7px #efc04f; box-shadow: 0 0 7px #c7983970; }
[role="button"] { cursor: pointer; }
[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dm-inbox { padding: 10px; }
#dm-list { max-height: 35dvh; overflow-y: auto; }
#dm-list .room-button { display: block; width: 100%; text-align: left; }
#dm-dialog { width: min(760px,calc(100vw - 16px)); height: min(680px,calc(var(--chat-viewport-height,100dvh) - 16px)); max-height: calc(var(--chat-viewport-height,100dvh) - 16px); max-width: calc(100vw - 16px); padding: 12px; border: 1px solid #49404c; border-radius: 16px; background: #15121a; color: #eee; }
#dm-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; gap: 8px; }
#dm-dialog header { display: flex; align-items: center; justify-content: space-between; }
#dm-dialog h2 { font-size: 1.1rem; margin: 0; }
#dm-messages { min-height: 0; overflow-y: auto; }
#dm-status { margin: 0; font-size: .8rem; color: #f2ca72; }
#dm-form { display: flex; gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
#dm-input { min-width: 0; flex: 1; font-size: 16px; }
#dm-dialog button { min-height: 40px; }
dialog.user-action-sheet { position: fixed; inset: 0; margin: auto; width: min(360px,calc(100vw - 24px)); max-height: calc(var(--chat-viewport-height,100dvh) - 24px); overflow: auto; border: 1px solid #49404c; border-radius: 16px; padding: 16px; background: #19141f; color: #eee; transform: none; }
dialog.user-action-sheet:not([open]) { display: none; }
dialog.user-action-sheet::backdrop, #dm-dialog::backdrop { background: #0009; }
.user-action-sheet h3 { margin: 0 0 10px; }
.user-action-sheet .user-action-button { width: 100%; min-height: 42px; }
@media (max-width:1180px) {
  body.chat-active .chat-layout { grid-template-columns: minmax(0,1fr) !important; }
  body.chat-active .left-sidebar-stack,body.chat-active .member-sidebar { top: 6px !important; bottom: 6px !important; height: calc(var(--chat-viewport-height,100dvh) - 12px) !important; width: min(340px,calc(100vw - 16px)) !important; }
  body.chat-active .left-sidebar-stack .room-sidebar { position: static !important; transform: none !important; width: 100% !important; max-height: 100% !important; }
  body.chat-active .left-sidebar-stack { background: #15121a; border-radius: 16px; }
  body.chat-active .mobile-panel-actions { display: flex !important; }
  body.chat-active .message-list { touch-action: pan-y; }
}
@media (max-height:500px) {
  body.chat-active .system-banner,body.chat-active .chat-footnote,body.chat-active .chat-header .eyebrow,body.chat-active .chat-header .muted { display: none !important; }
  body.chat-active .chat-header { gap: 2px; padding-block: 3px !important; }
}
@media (prefers-reduced-motion:reduce) { .left-sidebar-stack,.member-sidebar { transition: none !important; } .gold-badge--glow { text-shadow: none; box-shadow: none; } }

body.chat-active .chat-shell > #chat-status { grid-row: 1; }
body.chat-active .chat-shell > .chat-header { grid-row: 2; }
body.chat-active .chat-shell > .system-banner { grid-row: 3; }
body.chat-active .chat-shell > .message-list { grid-row: 4; }
body.chat-active .chat-shell > .composer { grid-row: 5; }
body.chat-active .chat-shell > .chat-footnote { grid-row: 6; }

/* One scrolling list; the title stays outside the scroll area. */
body.chat-active .member-sidebar-heading,
body.chat-active .member-sidebar-note { flex: 0 0 auto; }
#online-member-list .member-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 5px 5px;
  color: #b9adb9;
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.4;
}
#online-member-list .member-section:first-child { margin-top: 3px; }
#online-member-list .member-section::after {
  content: "";
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: #ffffff16;
}
#online-member-list [data-member-section$="-new"] { color: #e7c88d; }
.member-item--couples .member-avatar { background: #725a8629; color: #d5b4e8; }
.member-item--trans_non_binary .member-avatar { background: #477b8229; color: #abd6dc; }
.room-button.is-locked { opacity: .8; cursor: pointer; }
.room-button.is-locked:hover, .room-button.is-locked:focus-visible { opacity: 1; }
#room-access-dialog {
  width: min(440px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(var(--chat-viewport-height, 100dvh) - 24px);
  margin: auto;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid #53414e;
  border-radius: 20px;
  padding: clamp(18px, 4vw, 28px);
  background: #19141f;
  color: #f4edf3;
  box-shadow: 0 24px 90px #0008;
}
#room-access-dialog:not([open]) { display: none; }
#room-access-dialog::backdrop { background: #09070dbd; }
#room-access-dialog h2 { margin: 8px 0 14px; font-size: clamp(1.2rem, 5vw, 1.6rem); line-height: 1.25; }
#room-access-description { font-size: .91rem; line-height: 1.7; color: #c9bbc9; }
#room-access-dialog.is-gold { border-color: #8d7344; }
#room-access-dialog.is-gold h2 { color: #f0cf8b; }
.room-access-actions { display: grid; gap: 8px; margin-top: 20px; }
.room-access-actions .button { white-space: normal; text-align: center; min-height: 42px; }


/* Room navigation has one scroll area below a fixed header. */
body.chat-active .left-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  scrollbar-gutter: auto;
}
body.chat-active .left-sidebar-stack .room-sidebar {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: hidden;
}
.room-sidebar-heading { flex: 0 0 auto; min-height: 62px; padding: 12px 14px; }
.room-sidebar-heading h2 { font-size: 1rem; }
.room-sidebar-heading .eyebrow { font-size: .58rem; margin: 0 0 4px; }
.room-panel-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
body.chat-active #room-list { max-height: none; overflow: visible; align-content: start; }
.preview-chat-role { display: grid; gap: 7px; padding: 10px 12px; font-size: .7rem; color: #c8bdca; }
.preview-chat-role select { width: 100%; min-width: 0; min-height: 40px; font-size: .74rem; padding: 8px; }
body.chat-active .member-sidebar { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
body.chat-active #chat-staff-contact { margin: 4px 8px 8px; width: calc(100% - 16px); min-height: 64px; height: auto; }
body.chat-active #online-member-list { align-content: start; grid-auto-rows: max-content; }
.chat-ad {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 116px;
  padding: 12px;
  border: 1px solid #6e43544d;
  border-radius: 15px;
  background: radial-gradient(ellipse at top right, #8c37552b, transparent 80%), #18141d;
}
.chat-ad[hidden] { display: none !important; }
.chat-ad-label { display: block; margin-bottom: 9px; color: #a59ba8; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.chat-ad a { display: grid; gap: 7px; color: #eadde7; text-decoration: none; }
.chat-ad a strong { font-size: .84rem; }
.chat-ad a > span { font-size: .66rem; color: #c7a0b4; line-height: 1.5; }
.chat-ad a:hover > span { color: #f6c5db; }
.chat-ad a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.chat-ad--right { margin: 0 8px 8px; }
@media (max-height: 500px) {
  .chat-ad { min-height: 74px; padding: 8px 10px; }
  .chat-ad-label { margin-bottom: 5px; }
  .chat-ad a { gap: 3px; }
  .room-sidebar-heading { min-height: 50px; padding-block: 8px; }
}

/* Collapsible categories and personal conversations share the online list. */
#online-member-list .member-category { min-width: 0; }
#online-member-list .member-section { list-style: none; cursor: pointer; min-height: 32px; margin: 3px 5px; }
#online-member-list .member-section::-webkit-details-marker { display: none; }
#online-member-list .member-section::before { content: "›"; font-size: 1rem; transform: rotate(0deg); color: #9e8e9f; }
#online-member-list .member-category[open] > .member-section::before { transform: rotate(90deg); }
#online-member-list .member-section:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.member-section-count { color: #968699; font-size: .6rem; }
#online-member-list .member-dm-inbox { min-width: 0; padding: 4px 5px 10px; margin-bottom: 3px; border-bottom: 1px solid #ffffff16; }
.member-dm-inbox > summary { cursor: pointer; font-size: .75rem; color: #eadbe6; padding: 8px 0; }
#dm-count { display: inline-block; margin-left: 5px; padding: 2px 6px; border-radius: 7px; background: #b9416526; color: #e5a3bc; font-size: .64rem; }
.member-dm-inbox #dm-list { max-height: 180px; overflow-y: auto; }
.member-dm-inbox #dm-list .room-button { padding: 8px 5px; font-size: .72rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.dm-empty { margin: 0; padding: 5px 0; color: #aa9dad; font-size: .65rem; line-height: 1.6; }
#chat-ad-right { min-height: clamp(140px, 28dvh, 260px); display: flex; flex-direction: column; }
#chat-ad-right a { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
#chat-ad-right a strong { font-size: 1.12rem; line-height: 1.35; }
#chat-ad-right a > span { font-size: .74rem; }
@media (max-height: 500px) {
  #chat-ad-right { min-height: 100px; }
  #chat-ad-right a { gap: 5px; }
  #chat-ad-right a strong { font-size: .88rem; }
}

/* Chat entry, priority access, pin rotation and clearly labelled inventory. */
.chat-experience-dialog { width:min(560px,calc(100vw - 24px)); max-height:calc(var(--chat-viewport-height,100dvh) - 24px); margin:auto; overflow-y:auto; box-sizing:border-box; border:1px solid #65505e; border-radius:22px; padding:clamp(18px,4vw,30px); color:#f4edf3; background:#1b1721; box-shadow:0 24px 90px #0009; }
.chat-experience-dialog:not([open]) {display:none;}
.chat-experience-dialog::backdrop {background:#09070de0;backdrop-filter:blur(5px);}
.chat-experience-dialog h2 {font-size:clamp(1.3rem,5vw,1.8rem);line-height:1.2;margin:8px 0 16px;}
.chat-experience-dialog p,.chat-rules-list {font-size:.86rem;line-height:1.65;color:#ccbfce;}
.chat-rules-list {padding-left:20px;}
.chat-rules-list li {margin-bottom:8px;}
.chat-experience-dialog .check-row {display:flex;align-items:flex-start;gap:10px;font-size:.84rem;margin:18px 0;}
.chat-experience-dialog .check-row input {width:18px;height:18px;flex:0 0 18px;}
.chat-experience-dialog .button {white-space:normal;min-height:42px;margin:4px 0;}
.chat-safety-link {display:block;padding:13px;border:1px solid #71524a;border-radius:12px;background:#b2813420;color:#edce91;font-size:.88rem;}
.chat-rules-disclosure {font-size:.75rem!important;}
.chat-highlight {border-left:2px solid #c59852;padding-left:12px;color:#e7c994!important;}
.chat-purchase-options {display:grid;gap:5px;}
.chat-purchase-options button:disabled {opacity:.65;cursor:not-allowed;}
.chat-tools {display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;}
.chat-tools button,.chat-tools a {border:1px solid #ffffff18;background:#ffffff05;border-radius:8px;color:#b9aabc;text-decoration:none;padding:8px;font:inherit;font-size:.68rem;cursor:pointer;}
body.chat-active .chat-shell {grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;}
body.chat-active .chat-shell > #chat-pin-bar {grid-row:4;}
body.chat-active .chat-shell > .message-list {grid-row:5;}
body.chat-active .chat-shell > .composer {grid-row:6;}
body.chat-active .chat-shell > .chat-footnote {grid-row:7;}
.chat-pin-bar {display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:9px 16px;background:linear-gradient(110deg,#63451e4d,#28202e);border-bottom:1px solid #b8914244;min-width:0;}
.chat-pin-bar[hidden] {display:none;}
.chat-pin-bar strong {font-size:.72rem;color:#f1cf8b;}
.chat-pin-bar > span {font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-pin-bar small {font-size:.58rem;color:#b2a291;grid-column:1/-1;}
.message-pin-button {background:none;border:1px solid #a98a5040;color:#d6b981;border-radius:6px;font-size:.62rem;cursor:pointer;padding:3px 7px;}
.member-statistics {padding:10px;border:1px solid #be964646;border-radius:10px;color:#d9c28c;font-size:.78rem;line-height:1.7;}
#chat-ad-left-upper,#chat-ad-left {min-height:clamp(140px,17dvh,190px);}
#chat-ad-left.is-combined {min-height:clamp(240px,34dvh,380px);}
#chat-ad-right {min-height:clamp(165px,32dvh,300px);}
.chat-text-ad {border:1px solid #98633b55;border-radius:12px;padding:12px 16px;margin:10px 4px;background:#6545231f;display:grid;gap:5px;}
.chat-text-ad small {font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:#bd9874;}
.chat-text-ad a {font-size:.82rem;color:#f1d8b8;text-decoration:none;line-height:1.6;}
.home-discovery {padding-block:26px 38px;border-top:1px solid #ffffff12;}
body.chat-active .home-discovery {display:none;}
.home-advertisement {min-height:115px;display:grid;align-content:center;gap:8px;padding:24px;border:1px solid #7b4d6250;border-radius:18px;background:radial-gradient(ellipse at right,#92395928,transparent 80%),#19151d;}
.home-advertisement small {font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#b1a0b1;}
.home-advertisement a {color:#e8cfdb;text-decoration:none;}
.home-category-links {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:24px 0;border-bottom:1px solid #ffffff18;}
.home-category-links a {min-height:66px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;border:1px solid #ffffff17;border-radius:13px;background:#211c25;color:#eee1ed;text-decoration:none;font-weight:600;font-size:.86rem;}
.home-category-links a:hover {border-color:#bb617e;background:#37232e;}
@media(max-width:720px){
 .chat-pin-bar {padding:7px 10px;gap:4px;grid-template-columns:1fr;}
 .chat-pin-bar > span {font-size:.75rem;}
 .home-category-links {grid-template-columns:repeat(2,minmax(0,1fr));}
 .home-category-links a:last-child {grid-column:1/-1;}
}
@media(max-height:650px){
 #chat-ad-left-upper,#chat-ad-left {min-height:92px;padding:10px;}
 #chat-ad-left.is-combined {min-height:192px;}
 #chat-ad-right {min-height:130px;}
}
@media(max-height:450px){
 #chat-ad-left-upper,#chat-ad-left {min-height:68px;padding:7px;}
 #chat-ad-left.is-combined {min-height:144px;}
 #chat-ad-right {min-height:100px;}
 .chat-pin-bar small {display:none;}
 .chat-pin-bar {padding:4px 9px;}
}


/* DD CHAT UI V1 START */

/*
 * Homepage/SEO blok staat niet boven de actieve chat.
 * De HTML zelf blijft bestaan.
 */
body.chat-active .home-discovery,
body.chat-active .seo-intro {
  display: none;
}


/*
 * Centrale chat gebruikt de beschikbare hoogte.
 */
body.chat-active .chat-layout {
  min-height: 0;
}

body.chat-active .chat-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}


/*
 * Alleen berichten scrollen.
 */
body.chat-active .message-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}


/*
 * Schrijfbalk permanent onderaan.
 */
body.chat-active .composer {
  position: sticky;
  bottom: 0;
  z-index: 40;

  flex: 0 0 auto;

  width: 100%;
  margin-top: auto;

  background: rgba(19, 19, 26, .985);

  border-top:
    1px solid var(--line);

  box-shadow:
    0 -10px 30px rgba(0, 0, 0, .22);
}


/*
 * Footerregel blijft onder invoercontrole.
 */
body.chat-active .chat-footnote {
  flex: 0 0 auto;
}


/*
 * Actieve roomnaam in goud.
 */
body.chat-active.dd-chat-title-gold #chat-title {
  color: var(--gold);
}


/*
 * Linker onderste advertentie:
 * breedte blijft gelijk,
 * hoogte wordt minstens ongeveer 50% groter.
 */
body.chat-active #chat-ad-left {
  min-height: var(--dd-chat-left-ad-min-height, 180px);
}

body.chat-active #chat-ad-left > a {
  min-height: 145px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}


/*
 * Online beheer visueel benadrukken.
 */
#chat-staff-contact.has-online-admin strong {
  color: var(--gold);
}


@media (max-width: 760px) {

  body.chat-active .composer {
    bottom: 0;
  }

  body.chat-active #chat-ad-left {
    min-height: 150px;
  }
}

/* DD CHAT UI V1 END */


/* DD CHAT ADMIN V2 RUNTIME START */

/*
 * Standaard gebruikt de bestaande chat-layout zijn normale composer.
 * Alleen wanneer JS de klasse toevoegt, wordt hij sticky.
 */

body.chat-active.dd-chat-composer-sticky .composer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 40 !important;
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
}


/*
 * Zonder sticky-instelling blijft de bestaande layout gelden.
 */

body.chat-active:not(.dd-chat-composer-sticky) .composer {
  position: relative !important;
  bottom: auto !important;
}


/*
 * Gouden titel wordt beheerd via body-class.
 */

body.chat-active.dd-chat-title-gold #chat-title {
  color: var(--gold);
}


/*
 * Als goud uit staat, laat de normale stylesheet de kleur bepalen.
 */

body.chat-active:not(.dd-chat-title-gold) #chat-title {
  color: inherit;
}


/*
 * Hoogte van de linker onderste advertentie
 * wordt vanuit Chat Admin via CSS custom property ingesteld.
 */

body.chat-active #chat-ad-left {
  min-height:
    var(
      --dd-chat-left-ad-min-height,
      180px
    );
}


/*
 * De inhoud van het advertentievak volgt dezelfde minimumhoogte.
 */

body.chat-active #chat-ad-left > a {
  min-height:
    calc(
      var(
        --dd-chat-left-ad-min-height,
        180px
      ) - 35px
    );
}


/*
 * Mobiele layout behoudt de configureerbare waarde,
 * maar mag nooit extreem klein worden.
 */

@media (max-width: 760px) {

  body.chat-active #chat-ad-left {
    min-height:
      max(
        150px,
        var(
          --dd-chat-left-ad-min-height,
          180px
        )
      );
  }
}

/* DD CHAT ADMIN V2 RUNTIME END */


/* ============================================================
   Chat Preferences Premium Glow
   ============================================================ */

body.dd-chat-glow .composer {
    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.45);
    border-color:
        rgba(212, 175, 55, 0.75);
}

body.dd-chat-glow #message-input {
    border-color:
        rgba(212, 175, 55, 0.8);
}

/* Homepage content must not consume the chat viewport. */
html.dd-chat-route .dd-home-business-section,
body.chat-active .dd-home-business-section { display: none !important; }

/* Three separate advertising positions; keep the composer in the viewport. */
body.chat-active .left-sidebar-stack{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
body.chat-active .left-sidebar-stack #room-sidebar{flex:1 1 auto;min-height:150px;overflow:auto;}
body.chat-active #chat-ad-left-upper,body.chat-active #chat-ad-left,body.chat-active #chat-ad-right{flex:0 0 auto;min-height:0;height:auto;max-height:250px;padding:10px;overflow:hidden;}
body.chat-active .chat-ad[hidden]{display:none!important;}
body.chat-active .chat-ad>a{display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-height:0!important;}
body.chat-active .chat-ad .chat-ad-image{display:block;width:100%;height:clamp(70px,12dvh,150px);object-fit:cover;border-radius:8px;}
body.chat-active .chat-ad .chat-ad-image[hidden]{display:none;}
body.chat-active .chat-ad a strong{font-size:.82rem;line-height:1.3;}
body.chat-active .chat-ad a>span{font-size:.72rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.chat-active #member-sidebar{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
body.chat-active #chat-ad-right{margin-top:auto;}
body.chat-active #chat-ad-right a strong{font-size:.82rem;line-height:1.3;}
body.chat-active #online-member-list{flex:1 1 auto;min-height:80px;overflow-y:auto;}
@media(max-height:700px){body.chat-active .chat-ad .chat-ad-image{height:65px;}body.chat-active .chat-ad>a>span{display:none;}body.chat-active .left-sidebar-stack #room-sidebar{min-height:120px;}}
@media(max-width:820px){body.chat-active .left-sidebar-stack{overflow-y:auto;}body.chat-active #member-sidebar{overflow-y:auto;}body.chat-active .chat-ad .chat-ad-image{height:100px;}}