:root{
  --bg:#0b0f14;
  --card:rgba(16,20,26,.72);
  --card2:rgba(0,0,0,.18);
  --line:rgba(255,255,255,.08);
  --text:#e9eef6;
  --muted:rgba(233,238,246,.62);
  --gold:#d3b17a;
  --gold2:#caa35f;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --r:18px;
  --r2:14px;
  --font:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(211,177,122,.10), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(211,177,122,.06), transparent 55%),
              var(--bg);
  color:var(--text);
  overflow:hidden;
}

/* Backdrop */
.backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:35;
}
.backdrop.show{ display:block; }

/* Topbar */
.topbar{
  height:64px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.12));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand{ display:flex; align-items:center; gap:10px; }
.dot{
  width:10px; height:10px; border-radius:50%;
  background:#3ddc84;
  box-shadow:0 0 10px rgba(61,220,132,.25);
}
.dot.bad{ background:#ff4b4b; box-shadow:0 0 10px rgba(255,75,75,.25); }
.dot.ok{ background:#3ddc84; }
.dot.away{ background:#ffb347; box-shadow:0 0 10px rgba(255,179,71,.25); }
.dot.busy{ background:#ff5b57; box-shadow:0 0 10px rgba(255,91,87,.25); }
.dot.offline{ background:#98a0ad; box-shadow:none; }
.dot.listening{ background:#7db8ff; box-shadow:0 0 10px rgba(125,184,255,.25); }
.dot.live{ background:#ff4b4b; box-shadow:0 0 16px rgba(255,75,75,.45); }

.twrap{ display:flex; flex-direction:column; line-height:1.1; }
.title{ font-weight:900; letter-spacing:.2px; }
.sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.right{ display:flex; align-items:center; gap:10px; }
.nickWrap{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius:999px;
  padding:7px 10px;
}
.nickLbl{ font-size:12px; color:var(--muted); }
.nick{
  width:180px;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text);
  font-weight:700;
}
@media (max-width:900px){
  .nickWrap{ display:none; }
}

/* Icons */
.iconBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  position:relative;
}
.iconBtn:hover{ border-color: rgba(211,177,122,.35); }
.iconBtn svg{ width:20px; height:20px; fill: currentColor; opacity:.92; }
.iconBtn.small{ width:34px; height:34px; border-radius:12px; font-weight:900; }
.notifyBubble{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:2px solid rgba(7,11,18,.98);
  background:linear-gradient(135deg, #ff3b5f, #ffd75e);
  color:#07101b;
  font-size:11px;
  font-weight:1000;
  line-height:1;
  box-shadow:0 0 16px rgba(255,73,96,.42);
  pointer-events:none;
  z-index:5;
}
.iconBtn.hasNotify{
  border-color:rgba(255,215,94,.45);
  box-shadow:0 0 0 1px rgba(255,215,94,.12), 0 0 18px rgba(255,73,96,.16);
}

/* Layout */
.chatLayout{
  height: calc(100vh - 64px);
  display:flex;
  min-height:0;
}

.chatMain{
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Messages */
.messages{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:14px 14px 6px;
}
.msgRow{
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:16px;
}
.msgRow.mine{
  background:rgba(93,169,255,.05);
  border:1px solid rgba(93,169,255,.10);
}
.msgRow.pendingSend{
  opacity:.72;
}
.msgRow.failedSend{
  border-color:rgba(255,82,82,.28);
  background:rgba(255,82,82,.06);
}
.msgRow:hover{ background: rgba(255,255,255,.03); }
.msgRow.imageOnly{
  padding:4px 8px;
  border-radius:0;
  background:transparent;
  border-color:transparent;
  gap:8px;
}
.msgRow.imageOnly.mine{
  background:transparent;
  border-color:transparent;
}
.msgRow.imageOnly:hover{
  background:rgba(255,255,255,.018);
}
.msgRow.imageOnly .avatar{
  width:36px;
  height:36px;
  font-size:14px;
}
.msgRow.imageOnly .meta{
  min-height:22px;
}
.msgRow.imageOnly .text{
  margin-top:0;
  line-height:1;
}
.msgRow.imageOnly .seenState{
  display:none;
}
.avatar{
  width:40px; height:40px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.75);
  font-weight:900;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.msgCol{ flex:1; min-width:0; }
.meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.nickLine{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
}
.nickName{
  display:inline-block;
  max-width:100%;
}
.nickProfile{
  border:0;
  background:transparent;
  padding:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
  text-align:left;
}
.nickProfile:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.time{ color:var(--muted); font-size:12px; white-space:nowrap; display:flex; align-items:center; gap:7px; }

.badge{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:rgba(255,255,255,.9);
}
.badge.live{
  border-color: rgba(255,82,82,.55);
  background: rgba(255,59,59,.08);
  color: #ff8d8d;
  box-shadow: 0 0 14px rgba(255,82,82,.18);
  gap: 5px;
}
.badge.live .livePulse{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5252;
  box-shadow: 0 0 0 0 rgba(255,82,82,.8);
  animation: livePulse 1.4s ease-out infinite;
}
@keyframes livePulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,82,82,.7); }
  70%{ box-shadow: 0 0 0 7px rgba(255,82,82,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,82,82,0); }
}
.badge.owner{ border-color: rgba(255,213,74,.35); color: #ffe27c; }
.badge.td{ border-color: rgba(255,213,74,.35); color: #ffe27c; }
.badge.bot{ border-color: rgba(211,177,122,.38); color:#d3b17a; }
.badge.private{ border-color: rgba(137,191,255,.35); color:#9dccff; }
.badge.vip{ border-color: rgba(61,220,132,.35); color:#9df7bd; }
.badge.regular{ border-color: rgba(137,191,255,.35); color:#a9d0ff; }
.liveNowBadge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(255,82,82,.45);
  color:#ffb3b3;
  font-size:10px;
  font-weight:1000;
}
.liveNowBadge i{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff3b3b;
  box-shadow:0 0 10px rgba(255,59,59,.75);
  animation:livePulse 1.1s infinite ease-in-out;
}
@keyframes livePulse{
  0%,100%{ transform:scale(.85); opacity:.72; }
  50%{ transform:scale(1.18); opacity:1; }
}

.text{
  margin-top:4px;
  font-size: var(--font);
  line-height:1.35;
  word-wrap:break-word;
}
.replyQuote{
  margin:0 0 8px;
  padding:9px 11px;
  border-left:3px solid rgba(211,177,122,.85);
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.replyQuote.hasMedia{
  display:inline-flex;
  flex-direction:column;
  max-width:min(300px, 100%);
}
.rqNick{
  font-size:12px;
  font-weight:900;
  color:#f3d6a4;
  margin-bottom:2px;
}
.rqText{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
.rqMedia{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.rqMedia img{
  width:42px;
  height:32px;
  object-fit:contain;
  border-radius:7px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  flex:0 0 auto;
}
.rqMedia span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.seenState{
  margin-top:8px;
  font-size:11px;
  color:#89bfff;
  font-weight:700;
}
.seenState.pending{
  color:rgba(233,238,246,.45);
}
.seenState.failed{
  color:#ff8b8b;
}
.text .bot{ color: var(--gold); font-weight:800; }
.mention{
  color:#9dccff;
  font-weight:900;
  padding:0 2px;
  border-radius:5px;
  background:rgba(93,169,255,.08);
}
.mentionMine{
  color:#ffe27c;
  background:rgba(211,177,122,.18);
}
.shoutBtn{
  color:#ff8585;
  border-color:rgba(255,82,82,.28);
}
.shoutBtn[hidden],
[data-staff-only][hidden]{
  display:none !important;
}
.shoutBtn:not([hidden]){
  display:grid;
}
.chatNotice{
  width:max-content;
  max-width:min(620px, calc(100% - 30px));
  margin:8px auto;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.34);
  color:#f4f7ff;
  font-size:13px;
  font-weight:800;
}
.chatNotice.error{
  border-color:rgba(255,90,90,.28);
  color:#ffb9b9;
}
.chatNotice.ok{
  border-color:rgba(61,220,132,.28);
  color:#b9ffd7;
}
.quickShoutPanel{
  position:fixed;
  z-index:90;
  display:grid;
  gap:5px;
  min-width:210px;
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(15,18,24,.98);
  box-shadow:var(--shadow);
}
.quickShoutPanel button{
  min-height:36px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.22);
  color:#fff;
  font-weight:900;
  text-align:left;
  cursor:pointer;
}
.quickShoutPanel button:hover{
  color:#ffe27c;
  border-color:rgba(211,177,122,.35);
}
/* V123: staff krijgt direct achter de naam een compact verwijderkruisje.
   Het volledige moderatiemenu opent voortaan via de naam zelf. */
.modDeleteBtn{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-grid;
  place-items:center;
  padding:0;
  margin-left:-3px;
  border:1px solid rgba(255,92,92,.24);
  border-radius:7px;
  background:rgba(120,26,32,.16);
  color:rgba(255,146,146,.90);
  font-size:16px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease,opacity .14s ease;
}
.modDeleteBtn:hover,
.modDeleteBtn:focus-visible{
  border-color:rgba(255,92,92,.58);
  background:rgba(166,36,44,.30);
  color:#fff;
  transform:translateY(-1px);
  outline:none;
}
.modDeleteBtn:focus-visible{box-shadow:0 0 0 2px rgba(255,92,92,.16)}
.modDeleteBtn:disabled,
.modDeleteBtn.isDeleting{
  opacity:.48;
  cursor:wait;
  transform:none;
}
.profileMiniCard,
.modMiniMenu{
  position:fixed;
  z-index:80;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(15,18,24,.98);
  box-shadow:var(--shadow);
}
.profileMiniCard{
  width:min(330px, calc(100vw - 20px));
  padding:13px;
  background:
    radial-gradient(circle at top left, rgba(255,216,106,.10), transparent 34%),
    linear-gradient(180deg, rgba(17,23,32,.98), rgba(8,11,17,.99));
}
.profileMiniTop{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.profileMiniTop img,
.profileMiniTop > span{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.07);
  display:grid;
  place-items:center;
  object-fit:cover;
  font-weight:900;
}
.profileMiniIdentity{
  min-width:0;
  display:grid;
  gap:4px;
}
.profileMiniName{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex-wrap:wrap;
}
.profileMiniTop b{
  display:block;
  font-size:15px;
  line-height:1.1;
}
.profileMiniStatusLine{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
}
.profileMiniChips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.profileMiniChip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:20px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(93,169,255,.10);
  border:1px solid rgba(93,169,255,.24);
  color:#d8ecff;
  font-size:10px;
  font-weight:900;
}
.profileMiniActions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
  margin-top:12px;
}
.profileMiniActions button,
.modMiniMenu button{
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.22);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.profileMiniActions button{
  min-height:38px;
  padding:8px 10px;
  text-align:center;
}
.profileMiniActions button.danger{
  border-color:rgba(255,82,82,.45);
  color:#ff8b8b;
}
.modMiniMenu{
  min-width:150px;
  padding:6px;
  display:grid;
  gap:4px;
}
.modMiniMenu button{
  padding:9px 10px;
  text-align:left;
}
.profileMiniActions button:hover,
.modMiniMenu button:hover{
  border-color:rgba(211,177,122,.35);
  color:#ffe27c;
}

.profileMiniCard{
  width:min(316px, calc(100vw - 20px));
  padding:12px;
}
.profileMiniCard .badge.live{
  border-color:rgba(255,83,83,.55);
  color:#ff8080;
}
.profileMiniName b{
  color:inherit;
  text-shadow:none;
}
.profileMiniActions button{
  min-height:38px;
  border-radius:8px;
  font-size:14px;
}
.profileMiniActions button.danger{
  background:rgba(255,54,54,.07);
}
.youtubeCard{
  display:block;
  width:min(420px, 92vw);
  aspect-ratio:16/9;
  margin-top:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.24);
  overflow:hidden;
}
.youtubeCard iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.hint{
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
}
.themeGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.themeGrid button{
  min-height:38px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(0,0,0,.18);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.themeGrid button.active{
  color:#07101d;
  border-color:transparent;
  background:linear-gradient(135deg, #95cdf5, #f4d96f);
}
.themeCompact .msgRow{ padding:10px 12px; gap:8px; }
.themeCompact .avatar{ width:36px; height:36px; }
.themeCompact .text{ margin-top:2px; }
.themeNeon{
  --accent:#42f5d7;
  --gold:#ff4fd8;
}
.themeNeon .chatShell,
.themeNeon .msgRow{
  box-shadow:0 0 22px rgba(66,245,215,.08);
}
.themeQuiet{
  --accent:#7fb7dd;
  --gold:#d8c68a;
}
.themeQuiet .msgRow,
.themeQuiet .chatShell{
  background:rgba(11,15,20,.9);
}

.msgRow.mentionMe{
  border:1px solid rgba(211,177,122,.25);
  background: rgba(211,177,122,.06);
}

/* images in chat */
.imgCard{
  display:inline-block;
  margin-top:0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  max-width: min(420px, 92vw);
}
.imgCard img{ display:block; width:100%; height:auto; }
.imgCardSticker{
  width:auto;
  max-width:min(360px, 82vw);
  background:transparent;
}
.imgCardSticker img{
  width:auto;
  object-fit:contain;
}
.imgCardLiveDj{
  max-width:min(300px, 76vw);
  padding:0;
  border-color:transparent;
}
.imgCardLiveDj img{
  max-width:min(290px, 72vw);
  max-height:58px;
}
.imgCardTextBanner{
  max-width:min(490px, 86vw);
  padding:0;
  border-color:transparent;
  margin-top:0;
  vertical-align:middle;
}
.imgCardTextBanner img{
  width:auto;
  height:auto;
  max-width:min(480px, 84vw);
  max-height:64px;
  object-fit:contain;
}
@media (max-width:560px){
  .imgCardTextBanner{ max-width:min(390px, 92vw); }
  .imgCardTextBanner img{
    max-width:min(380px, 90vw);
    max-height:54px;
  }
}
.imgCardEmote{
  border-color:transparent;
  padding:0;
}
.imgCardEmote img{
  max-width:48px;
  max-height:48px;
}

/* Reply bar */
.replyBar{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:0 14px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(0,0,0,.18);
}
.replyBar.show{ display:flex; }
.replyBar .t{ font-weight:900; }
.replyBar .p{
  color:var(--muted);
  font-size:12px;
  min-width:0;
  overflow:hidden;
  flex:1;
}
.replyBar .x{ margin-left:auto; }
.replyBarPreview{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  max-width:100%;
}
.replyBarPreview .rqNick{
  margin:0;
  flex:0 0 auto;
}
.replyBarPreview .rqText{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.replyBarPreview.hasMedia .rqMedia{
  min-width:0;
  max-width:100%;
}
.replyBarPreview.hasMedia .rqMedia img{
  width:36px;
  height:26px;
}

/* Composer */
.composer{
  padding:10px 12px;
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.30));
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.msg{
  flex:1;
  resize:none;
  max-height:120px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
.btn{
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--text);
  border-radius:14px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
}
.btn:hover{ border-color: rgba(211,177,122,.35); }
.btn.ghost{
  padding:0;
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  line-height:1;
}
.composer .btn.ghost svg{
  width:20px;
  height:20px;
  display:block;
}
.composer .btn.ghost img,
.composer .btn.ghost span{
  max-width:22px;
  max-height:22px;
}
.btn.ghost.youtubeBtn{
  color:#ff5f5f;
  border-color:rgba(255,82,82,.22);
}
.btn.ghost.youtubeBtn:hover{
  border-color:rgba(255,82,82,.5);
  background:rgba(255,59,59,.08);
}
.btn.ghost.youtubeBtn svg{
  width:22px;
  height:22px;
  fill:currentColor;
}
.btn.send{
  background: linear-gradient(90deg, rgba(211,177,122,.35), rgba(211,177,122,.18));
  border-color: rgba(211,177,122,.35);
}

/* Emoji panel */
.emojiPanel{
  position:absolute;
  left:12px;
  right:12px;
  bottom:74px;
  width:auto;
  max-width:none;
  max-height:min(38vh, 330px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(17,21,27,.98);
  box-shadow: var(--shadow);
  padding:12px;
  display:none;
  z-index:50;
}
.emojiPanel.show{ display:block; }
.emojiPanel.is-wide{ max-height:min(34vh, 310px); }
.emojiTabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.09);
  overflow:auto;
  scrollbar-width:thin;
}
.emojiTabs.is-hidden{ display:none; }
.emojiTab{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius:7px;
  padding:8px 12px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:34px;
}
.emojiTab.active{
    border-color: rgba(211,177,122,.45);
    background: rgba(211,177,122,.12);
    color:#f6deb3;
  }
.emojiTabIcon{
  font-size:18px;
  line-height:1;
}
.emojiTabLabel{
  display:none;
}
.emojiGrid{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding-bottom:44px;
}
.emojiGridCompact{ gap:7px; }
.emojiBtn{
  border:1px solid rgba(255,255,255,.06);
  background: transparent;
  border-radius:8px;
  width:34px;
  height:34px;
  padding:0;
  cursor:pointer;
  font-size:24px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.emojiBtn:hover{
  border-color: rgba(211,177,122,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.12));
  transform: translateY(-1px);
}
.pickerModes{
  position:sticky;
  left:0;
  bottom:0;
  display:flex;
  gap:5px;
  padding-top:10px;
  background:linear-gradient(180deg, rgba(17,21,27,0), rgba(17,21,27,.98) 35%);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.pickerMode{
  width:48px;
  min-width:48px;
  height:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  background:#050607;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  display:inline-grid;
  place-items:center;
  font-size:15px;
}
.pickerMode:first-child,
.pickerMode:nth-child(2){ font-size:19px; }
.pickerIconAemo{
  width:24px;
  height:24px;
  display:block;
  background:center/contain no-repeat url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDguNSA4LjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuMiAxLjFjLTEuOC0xZS03LTMuMiAxLjQtMy4yIDMuMi0uMDAzOSAxLjggMS40IDMuMiAzLjIgMy4yIDEuOCAwIDMuMi0xLjQgMy4yLTMuMi4wMDIyLTEuOC0xLjQtMy4yLTMuMi0zLjJ6bS42NiAxLjJjLjM4IDAgLjcuMzcuNy44My0uMDAxOC40Ni0uMzEuODItLjY5LjgzLS4zOCAwLS43LS4zNy0uNy0uODMtMS42ZS02LS40Ni4zMS0uODMuNjktLjgzem0tMi4yLjE5Yy4zOC0xLjNlLTYuNy4zNy43LjgzIDMuNmUtNi40Ni0uMzEuODMtLjY5LjgzLS4zOCAwLS43LS4zNy0uNy0uODMgMC0uNDYuMzEtLjgzLjctLjgzem0tLjEzIDIuMWMuMDIgMCAuMDQ0LjAwMy4wNy4wMjMuOC42NiAxLjcuNjYgMi41IDAgLjEtLjA4LjE4LjA1Ni4xMS4xOC0uMjUuNDctLjczLjktMS40LjktLjYyIDAtMS4xLS40My0xLjQtLjktLjA1LS4wOTUtLjAxOC0uMi4wNDMtLjJ6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTYuNCA4LjItLjQ1LTEuMi40My0xLjItMS4yLjQ1LTEuMi0uNDMuNDUgMS4yLS40MyAxLjIgMS4yLS40NXoiIGZpbGw9IiNmMmJjMmUiIHN0cm9rZS13aWR0aD0iLjQxIi8+PHBhdGggZD0ibTYuMyAzLjYuMzMuODctLjMyLjg3Ljg3LS4zMy44Ny4zMi0uMzMtLjg3LjMyLS44Ny0uODcuMzN6IiBmaWxsPSIjZWZiYjJlIiBzdHJva2Utd2lkdGg9Ii40MSIvPjwvc3ZnPg0K");
}
.pickerMode:nth-child(3),
.pickerMode:nth-child(4),
.pickerMode:nth-child(5){ width:94px; min-width:94px; }
.pickerMode.active{ background:#a91145; border-color:#c92661; }
.pickerMode[data-picker-mode="live"].active{ background:#a91145; border-color:#c92661; }
.pickerMode[data-picker-mode="text"].active{ background:#3d947d; border-color:#61b59f; }
.gifPickerGrid{ display:block; }
.tenorSearch{
  display:flex;
  justify-content:center;
  gap:0;
  margin:0 auto 14px;
  max-width:min(460px, 100%);
}
.tenorSearch .input{
  width:min(380px, 70vw);
  border-radius:6px 0 0 6px;
  background:#050607;
}
.tenorSearch .btn{
  border-radius:0 6px 6px 0;
  min-width:80px;
}
.gifStrip{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:8px;
  min-height:76px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.pickerHint{
  color:var(--muted);
  font-weight:800;
  padding:10px 2px;
}
.tenorChip{
  flex:0 0 auto;
  height:36px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:#050607;
  color:#fff;
  font-weight:900;
  padding:0 14px;
  cursor:pointer;
}
.tenorChip:hover{ border-color:rgba(211,177,122,.35); }
.gifTile{
  width:96px;
  height:58px;
  flex:0 0 auto;
  padding:0;
  border:2px solid rgba(255,255,255,.82);
  background:#111;
  cursor:pointer;
}
.gifTile img{ width:100%; height:100%; object-fit:cover; display:block; }
.emoteAsset{
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:transparent;
  padding:1px;
  cursor:pointer;
}
.emoteAsset img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.liveDjStrip{
  display:flex;
  gap:20px;
  align-items:center;
  overflow:auto;
  flex-wrap:nowrap;
  min-height:88px;
  padding:6px 2px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.liveDjImageSticker{
  flex:0 0 auto;
  max-width:190px;
  min-width:96px;
  min-height:44px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.liveDjImageSticker img{
  max-width:190px;
  max-height:58px;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
  animation:liveStickerFloat 1.35s ease-in-out infinite;
  filter:drop-shadow(0 0 7px rgba(255,209,31,.45));
}
@keyframes liveStickerFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-2px) scale(1.025); }
}
.liveDjSticker{
  flex:0 0 auto;
  max-width:180px;
  border:0;
  background:transparent;
  color:#ffd11f;
  font-weight:1000;
  font-size:18px;
  line-height:.9;
  text-shadow:2px 2px 0 #5d3200, 0 0 8px rgba(255,209,31,.55);
  cursor:pointer;
}
.textBannerGrid{
  gap:10px 18px;
  align-items:center;
}
.textBannerAsset{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.textBannerAsset img{
  max-width:min(285px, 78vw);
  max-height:46px;
  object-fit:contain;
  display:block;
}
.textBanner{
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:1000;
  font-size:22px;
  line-height:1;
  text-shadow:2px 2px 0 #000, 0 0 8px currentColor;
}
.textBanner0{ color:#ff7b2e; }
.textBanner1{ color:#ffdd44; background:rgba(108,32,0,.7); padding:8px 10px; }
.textBanner2{ color:#fff; -webkit-text-stroke:1px #f44; }
.textBanner3{ color:#ff5aa8; font-size:32px; }
.textBanner4{ color:#3ed6ff; font-style:italic; }
.textBanner5{ color:#70ff58; }

/* INTERNAL USERLIST (desktop) */
.sideUsers{
  width:320px;
  max-width:38vw;
  border-left:1px solid var(--line);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition: width .18s ease, opacity .18s ease;
}
.sideHead{
  padding:12px 12px 10px;
  border-bottom:1px solid var(--line);
}
.sideHead .ttl{ font-weight:900; }

.userlist{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:8px;
}
.user{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  border-radius:12px;
  border:1px solid transparent;
}
.user:hover{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
  cursor:pointer;
}
.user .l{ display:flex; align-items:center; gap:8px; min-width:0; width:100%; }
.userMeta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.user .pip{
  width:10px; height:10px;
  border-radius:50%;
  background:#3ddc84;
  box-shadow:0 0 10px rgba(61,220,132,.18);
  flex:0 0 auto;
}
.user .name{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
  min-width:0;
  overflow:hidden;
  flex-wrap:wrap;
  line-height:1.05;
}
.user .name .nickName{
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height:1.08;
}
.userStatusLine{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:var(--muted);
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.userStateDot{
  width:9px;
  height:9px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}
.userStateDot.green{ background:#3ddc84; box-shadow:0 0 10px rgba(61,220,132,.2); }
.userStateDot.orange{ background:#ffb347; box-shadow:0 0 10px rgba(255,179,71,.2); }
.userStateDot.red{ background:#ff5b57; box-shadow:0 0 10px rgba(255,91,87,.2); }
.userStateDot.gray{ background:#98a0ad; }
.userStateIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
}
.user .r{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
  padding-left:8px;
  align-self:flex-start;
}

.userAvatar{
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:14px;
}
.userAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.privateChatWindow{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  width:min(360px, calc(100vw - 28px));
  border:1px solid rgba(88,164,255,.22);
  border-radius:16px;
  overflow:hidden;
  background:rgba(11,15,22,.97);
  box-shadow:0 18px 70px rgba(0,0,0,.45);
}
.privateChatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.privateChatHead span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.privateChatHead strong{ color:#ffe18c; }
.privateChatActions{ display:flex; gap:6px; }
.privateChatActions button{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.privateChatBody{ padding:12px; display:grid; gap:8px; }
.privateChatMessages{
  min-height:150px;
  max-height:260px;
  overflow:auto;
  display:grid;
  gap:8px;
  align-content:start;
  padding-right:2px;
}
.privateChatHint{ color:var(--muted); font-size:12px; line-height:1.35; }
.privateBubble{
  width:fit-content;
  max-width:88%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-size:13px;
  line-height:1.35;
}
.privateBubble.out{
  justify-self:end;
  border-color:rgba(211,177,122,.25);
  background:rgba(211,177,122,.12);
}
.privateBubble.in{
  justify-self:start;
  border-color:rgba(88,164,255,.24);
  background:rgba(88,164,255,.10);
}
.privateBubble small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.privateChatInput{
  width:100%;
  resize:vertical;
  min-height:42px;
  max-height:110px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.32);
  color:var(--text);
  padding:10px;
  font:inherit;
}
.privateChatFoot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:8px;
  padding:0 12px 12px;
}
.privateChatWindow.has-new{
  border-color:rgba(255,216,106,.45);
  box-shadow:0 18px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,216,106,.16);
}
.privateChatWindow.is-minimized .privateChatBody,
.privateChatWindow.is-minimized .privateChatFoot{ display:none; }

.privateInboxList{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.privateInboxItem{
  width:100%;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.privateInboxItem:hover,
.privateInboxItem.has-unread{
  border-color:rgba(211,177,122,.34);
  background:rgba(211,177,122,.08);
}
.privateInboxAvatar{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  font-weight:1000;
}
.privateInboxMeta{
  min-width:0;
  display:grid;
  gap:2px;
}
.privateInboxMeta strong{
  color:#ffe18c;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.privateInboxMeta small{
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.privateInboxTime{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

body.usersCollapsed .sideUsers{
  width:0;
  opacity:0;
  border-left-color: transparent;
}

/* DRAWERS (Profile/Media/Settings) */
.drawer{
  position:fixed;
  top:76px;
  right:14px;
  bottom:96px;
  width:min(420px, 92vw);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: rgba(15,18,24,.98);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:none;
  z-index:45;
}
.drawer.open{ display:flex; flex-direction:column; }
.drawerTop{
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drawerTitle{ font-weight:900; }
.drawerBody{
  padding:12px;
  overflow:auto;
  min-height:0;
}

.block{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
}
.label{
  font-weight:900;
  margin-bottom:10px;
  color:rgba(255,255,255,.92);
}
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.segBtn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.segBtn.active{ border-color: rgba(211,177,122,.35); color: var(--gold); }

.avatarRow{ display:flex; gap:12px; align-items:center; }
.avatarBig{
  width:84px; height:84px; border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  display:grid;
  place-items:center;
  font-weight:900;
}
.avatarBig img{ width:100%; height:100%; object-fit:cover; display:block; }
.colorRow{ display:flex; gap:12px; align-items:center; }
.colorInput{
  width:64px;
  height:44px;
  padding:4px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:12px;
}
.colorRow .hint{
  margin-top:0;
  line-height:1.35;
}

.statusList{ display:flex; flex-direction:column; gap:8px; }
.statusItem{
  display:flex; align-items:center; gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.statusItem.active{ border-color: rgba(211,177,122,.35); color: var(--gold); }
.statusItem .pip{
  width:11px;
  height:11px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow:0 0 10px rgba(255,255,255,.12);
}
.pip.green{ background:#3ddc84; }
.pip.gray{ background:#7a8a9b; }
.pip.yellow{ background:#f4c542; }
.pip.red{ background:#ff4b4b; }
.pip.purple{ background:#a56bff; }
.pip.orange{ background:#ffb347; }
.pip.radio,
.pip.mic{
  width:auto;
  height:auto;
  background:transparent;
  font-size:14px;
  line-height:1;
  box-shadow:none;
}
.pip.radio::before{ content:"📻"; }
.pip.mic::before{ content:"🎙️"; }
.msgRow.privateRow{
  background:rgba(137,191,255,.055);
  border:1px solid rgba(137,191,255,.14);
}

.statusText{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}

.chk{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:rgba(255,255,255,.88);
}
.chk input{ transform: scale(1.15); }
.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
  margin:8px 0;
}

/* Media */
.mediaToolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.toolBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.toolBtn:hover{ border-color: rgba(211,177,122,.35); }

.tabs{ display:flex; gap:8px; margin-bottom:10px; }
.tab{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  font-weight:900;
}
.tab.active{ border-color: rgba(211,177,122,.35); color: var(--gold); }

.tabPanel{ display:none; }
.tabPanel.active{ display:block; }

.mediaList{ display:flex; flex-direction:column; gap:8px; }
.mediaEmpty{
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px;
  padding:14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.mediaItem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.mediaItem .left{ display:flex; align-items:center; gap:10px; min-width:0; }
.mediaThumb{
  width:34px; height:34px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.mediaThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mediaName{
  font-weight:800;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.mediaItem button{
  border:1px solid rgba(211,177,122,.35);
  border-radius:10px;
  background:rgba(211,177,122,.10);
  color:var(--gold);
  font-weight:900;
  padding:7px 10px;
  cursor:pointer;
}
.mediaItem button:hover{ background:rgba(211,177,122,.18); color:#fff; }

#drawCanvas{
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:#0f141c;
}
.drawActions{
  display:flex; gap:10px; margin-top:10px;
}

/* Mobile tweaks */
@media (max-width:900px){
  .chatLayout{ height: calc(100vh - 64px); }
  .emojiPanel{
    right:10px;
    left:10px;
    bottom:78px;
    width:auto;
    max-width:none;
  }
  .emojiGrid{
    display:flex;
  }
  .emojiTabs{
    display:flex;
    gap:7px;
    margin-bottom:12px;
    padding-bottom:10px;
  }
  .emojiTabs.is-hidden{ display:none; }
  .emojiTab{
    min-height:40px;
    padding:8px 10px;
  }
  .pickerModes{ overflow:auto; }
  .pickerMode{ width:48px; min-width:48px; flex:0 0 auto; }
  .pickerMode:nth-child(3),
  .pickerMode:nth-child(4),
  .pickerMode:nth-child(5){ width:82px; min-width:82px; }
  .sideUsers{
    position:fixed;
    right:12px;
    top:76px;
    bottom:96px;
    width:min(330px,90vw);
    border-radius:18px;
    box-shadow: var(--shadow);
    transform: translateX(calc(100% + 16px));
    opacity:0;
    transition: transform .2s ease, opacity .2s ease;
    z-index:45;
  }
  body.usersOpen .sideUsers{
    transform: translateX(0);
    opacity:1;
  }
  body.usersCollapsed .sideUsers{ width:min(360px,92vw); opacity:1; border-left:1px solid rgba(255,255,255,.10); }
  .user{
    align-items:flex-start;
    padding:10px 9px;
  }
  .user .l{
    align-items:flex-start;
  }
  .userMeta{
    width:100%;
  }
  .user .name{
    display:grid;
    gap:3px;
    align-items:flex-start;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size:15px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }
  .user .name .nickName{
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.18;
    word-break:break-word;
  }
  .user .r{
    white-space:nowrap;
    padding-top:2px;
    font-size:10px;
    display:none;
  }
  .userStatusLine{
    font-size:11px;
    line-height:1.25;
  }
}

/* Mobile polish 2026-04-27 */
@media (max-width:640px){
  html,
  body{
    max-width:100%;
    overflow:hidden;
  }

  .topbar{
    height:auto;
    min-height:58px;
    padding:7px 8px;
    gap:6px;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
    gap:7px;
  }

  .twrap{
    min-width:0;
  }

  .title{
    font-size:.96rem;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .sub{
    max-width:43vw;
    font-size:10.5px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .right{
    flex:0 0 auto;
    gap:5px;
  }

  .iconBtn{
    width:36px;
    height:36px;
    border-radius:12px;
  }

  .chatLayout{
    height:calc(100vh - 58px);
  }

  .messages{
    padding:10px 8px 6px;
  }

  .msgRow{
    gap:8px;
    padding:9px 7px;
    border-radius:14px;
  }

  .avatar{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .meta{
    align-items:flex-start;
    gap:6px;
  }

  .nickLine{
    flex-wrap:wrap;
    gap:5px;
  }

  .time{
    font-size:11px;
  }

  .text{
    font-size:16px;
    line-height:1.32;
  }

  .composer{
    padding:8px;
    gap:7px;
    align-items:center;
  }

  .composer .btn.ghost,
  .composer .btn.send{
    min-width:44px;
    height:44px;
    padding:0 10px;
    border-radius:14px;
  }

  .composer .btn.send{
    min-width:96px;
    font-size:.95rem;
  }

  .msg{
    min-height:44px;
    max-height:88px;
    padding:9px 10px;
    border-radius:14px;
  }

  .sideUsers{
    right:8px;
    left:8px;
    width:auto;
    max-width:none;
  }

  .drawer{
    top:64px;
    right:8px;
    left:8px;
    bottom:76px;
    width:auto;
  }
}

@media (max-width:390px){
  .sub{
    max-width:40vw;
  }

  .iconBtn{
    width:34px;
    height:34px;
  }

  .composer .btn.send{
    min-width:84px;
    font-size:.9rem;
  }
}

/* =========================================================
   Mobile composer / viewport polish - 2026-09-13
   Op telefoons krijgt de typbalk altijd een volledige eigen rij.
   De actieknoppen staan eronder, zodat het invoerveld nooit meer
   tot een smal strookje wordt samengedrukt.
   ========================================================= */
@supports (height: 100dvh) {
  .chatLayout {
    height: calc(100dvh - 64px);
  }
}

@media (max-width: 900px) {
  .chatMain {
    overflow: hidden;
  }

  .composer {
    flex: 0 0 auto;
    position: relative;
    z-index: 20;
  }

  .msg {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* voorkomt iOS auto-zoom bij focus */
    line-height: 1.35;
  }
}

@media (max-width: 640px) {
  @supports (height: 100dvh) {
    .chatLayout {
      height: calc(100dvh - 58px);
    }
  }

  .composer {
    display: grid;
    grid-template-columns: repeat(4, 44px) minmax(0, 1fr) auto;
    grid-template-rows: auto 44px;
    align-items: center;
    gap: 8px;
    padding: 9px 8px max(9px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(8,12,18,.97), rgba(5,8,13,.995));
    box-shadow: 0 -8px 24px rgba(0,0,0,.22);
  }

  .composer .msg {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    min-height: 52px;
    max-height: 108px;
    padding: 13px 14px;
    border-radius: 15px;
    font-size: 16px;
    line-height: 1.35;
  }

  .composer #btnEmoji { grid-column: 1; grid-row: 2; }
  .composer #btnUpload { grid-column: 2; grid-row: 2; }
  .composer #btnYoutube { grid-column: 3; grid-row: 2; }
  .composer #btnShout { grid-column: 4; grid-row: 2; }

  .composer .btn.ghost {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 13px;
  }

  .composer .btn.send {
    grid-column: 5 / 7;
    grid-row: 2;
    justify-self: end;
    width: min(100%, 132px);
    min-width: 104px;
    height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    white-space: nowrap;
  }

  .replyBar {
    margin: 0 8px 7px;
    padding: 8px 10px;
  }

  .emojiPanel {
    left: 8px;
    right: 8px;
    bottom: 122px;
    max-height: min(42dvh, 340px);
  }

  .drawer {
    bottom: 126px;
  }

  .privateChatWindow {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .privateChatMessages {
    max-height: min(42dvh, 300px);
  }

  .privateChatFoot {
    grid-template-columns: 1fr;
  }

  .privateChatInput {
    min-height: 52px;
    font-size: 16px;
  }

  .privateChatFoot .btn.send {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  .composer {
    grid-template-columns: repeat(4, 42px) minmax(92px, 1fr);
    gap: 6px;
  }

  .composer .btn.ghost {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .composer #btnEmoji { grid-column: 1; }
  .composer #btnUpload { grid-column: 2; }
  .composer #btnYoutube { grid-column: 3; }
  .composer #btnShout { grid-column: 4; grid-row: 2; }

  .composer .btn.send {
    grid-column: 5;
    grid-row: 2;
    width: 100%;
    min-width: 92px;
    height: 42px;
    padding-inline: 10px;
  }

  .emojiPanel {
    bottom: 118px;
  }
}

/* =========================================================
   Mobile composer hard-fix - 2026-09-13
   Flex-wrap i.p.v. een kwetsbaar grid: typbalk altijd volle breedte,
   knoppen eronder en Verstuur nooit meer over de typbalk heen.
   ========================================================= */
.composer [hidden],
#btnShout[hidden] {
  display: none !important;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  .composer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 8px max(9px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .composer .msg {
    order: -1 !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 54px !important;
    max-height: 112px !important;
    padding: 14px 14px !important;
    border-radius: 15px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  .composer .btn.ghost {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 13px !important;
  }

  .composer .btn.send {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 108px !important;
    height: 44px !important;
    margin-left: auto !important;
    padding: 0 15px !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
  }

  .emojiPanel { bottom: 128px !important; }
  .drawer { bottom: 132px !important; }
}

@media (max-width: 390px) {
  .composer { gap: 6px !important; }
  .composer .msg { min-height: 52px !important; padding: 13px 12px !important; }
  .composer .btn.ghost {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  .composer .btn.send {
    min-width: 92px !important;
    height: 40px !important;
    padding-inline: 11px !important;
    font-size: .88rem !important;
  }
}

/* =========================================================
   Mobiele chatnaam - 2026-09-13
   Desktop gebruikt CHAT_APP_NAME; telefoon/tablet gebruikt
   CHAT_MOBILE_APP_NAME uit /chat/config.php.
   ========================================================= */
.titleMobile { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  .titleDesktop { display: none !important; }
  .titleMobile { display: inline !important; }
  .topbar .brand .title {
    max-width: min(34vw, 170px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 390px) {
  .topbar .brand .title { max-width: 118px; }
}


/* =========================================================
   Mobiele chatnaam zichtbaar + bewerkbaar - 2026-09-13
   Dezelfde #nick input wordt op desktop en mobiel gebruikt.
   Op telefoon komt de naam in een eigen volle rij onder de
   chatkop, zodat hij nooit door de icoonknoppen wordt verstopt.
   ========================================================= */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  html,
  body {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .topbar {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 7px !important;
    min-height: 0 !important;
    padding: 7px 8px 8px !important;
  }

  .topbar .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .topbar .right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  .topbar > .nickWrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 11px !important;
    gap: 8px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(211,177,122,.20) !important;
    background: rgba(0,0,0,.24) !important;
  }

  .topbar > .nickWrap .nickLbl {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .topbar > .nickWrap .nick {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 2px !important;
    font-size: 16px !important;
    line-height: 30px !important;
    color: var(--text) !important;
    background: transparent !important;
  }

  .topbar > .nickWrap .nick::placeholder {
    color: rgba(233,238,246,.42) !important;
  }

  .topbar > .nickWrap:focus-within {
    border-color: rgba(211,177,122,.58) !important;
    box-shadow: 0 0 0 2px rgba(211,177,122,.08) !important;
  }

  .chatLayout {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 390px) {
  .topbar {
    column-gap: 5px !important;
    row-gap: 6px !important;
    padding-inline: 6px !important;
  }
  .topbar > .nickWrap {
    min-height: 40px !important;
    padding: 5px 9px !important;
  }
}


/* =========================================================
   Chat mobile contrast + small-device polish - 2026-09-13
   ========================================================= */
.composer .btn.ghost {
  color: #f4f7ff !important;
  background: rgba(11,17,27,.90) !important;
  border-color: rgba(173,192,224,.25) !important;
}
.composer .btn.ghost:hover,
.composer .btn.ghost:focus-visible {
  color: #ffffff !important;
  background: rgba(31,47,72,.96) !important;
  border-color: rgba(211,177,122,.62) !important;
}
.composer .btn.ghost svg,
.composer #btnUpload svg,
.iconBtn svg {
  fill: currentColor !important;
  color: inherit !important;
  opacity: 1 !important;
}
.composer #btnUpload { color: #eaf2ff !important; }
.composer #btnYoutube { color: #ff5f69 !important; }
.composer #btnEmoji { color: #ffd76a !important; font-size: 1.18rem !important; }
.composer #btnShout { color: #ffe4ad !important; }
.iconBtn {
  color: #f4f7ff !important;
  background: rgba(11,17,27,.88) !important;
  border-color: rgba(173,192,224,.22) !important;
}
.iconBtn:hover,
.iconBtn:focus-visible {
  color: #ffffff !important;
  border-color: rgba(211,177,122,.55) !important;
  background: rgba(29,43,64,.96) !important;
}

@media (max-width:760px), (pointer: coarse) and (max-width:1024px) {
  body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }
  .topbar { width: 100% !important; max-width: 100vw !important; }
  .topbar .right { gap: 5px !important; }
  .topbar .right .iconBtn { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
  .topbar .right .iconBtn svg { width: 19px !important; height: 19px !important; }
  .topbar .brand .title { max-width: min(32vw, 150px) !important; }
  .topbar .brand .sub { max-width: min(32vw, 150px) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .messages,
  .message,
  .bubble,
  .text,
  .meta,
  .nickLine { min-width: 0 !important; max-width: 100% !important; }
  .text { overflow-wrap: anywhere; word-break: break-word; }
  .composer { width: 100% !important; max-width: 100vw !important; }
  .composer .btn.send { color: #fffaf0 !important; background: linear-gradient(90deg, rgba(211,177,122,.48), rgba(126,98,58,.42)) !important; }
  .drawer,
  .sideUsers,
  .emojiPanel,
  .privateChatWindow { max-width: calc(100vw - 12px) !important; }
}

@media (max-width:420px) {
  .topbar .right { gap: 4px !important; }
  .topbar .right .iconBtn { width: 34px !important; height: 34px !important; }
  .topbar .brand .title { max-width: 96px !important; }
  .topbar .brand .sub { display: none !important; }
  .composer .btn.ghost { flex-basis: 39px !important; width: 39px !important; min-width: 39px !important; height: 39px !important; }
  .composer .btn.send { min-width: 88px !important; height: 39px !important; padding-inline: 10px !important; }
}

@media (max-width:360px) {
  .topbar { padding-inline: 5px !important; }
  .topbar .right .iconBtn { width: 31px !important; height: 31px !important; border-radius: 9px !important; }
  .topbar .right .iconBtn svg { width: 17px !important; height: 17px !important; }
  .topbar .brand .title { max-width: 72px !important; font-size: .88rem !important; }
  .composer { gap: 5px !important; padding-inline: 6px !important; }
  .composer .btn.ghost { flex-basis: 36px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 11px !important; }
  .composer .btn.send { min-width: 80px !important; height: 36px !important; font-size: .82rem !important; }
}

/* =========================================================
   FINAL MOBILE CHAT FIX - 2026-09-13
   Eén consistente mobiele laag boven de eerdere hotfixes.
   ========================================================= */
:root {
  --chat-visual-height: 100dvh;
  --chat-topbar-h: 64px;
  --chat-composer-h: 108px;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--chat-visual-height) !important;
    min-height: var(--chat-visual-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body {
    display: flex !important;
    flex-direction: column !important;
  }

  .topbar {
    position: relative !important;
    z-index: 30 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 7px !important;
    row-gap: 7px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 8px 8px !important;
    background: rgba(11,15,20,.985) !important;
  }

  .topbar .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    gap: 7px !important;
  }
  .topbar .twrap { min-width: 0 !important; }
  .topbar .brand .title {
    max-width: min(34vw,150px) !important;
    font-size: .94rem !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .topbar .brand .sub {
    max-width: min(34vw,150px) !important;
    font-size: .64rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .topbar .right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  .topbar .right .iconBtn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    color: #f6f8ff !important;
    background: #111821 !important;
    border-color: rgba(204,218,239,.25) !important;
  }
  .topbar .right .iconBtn svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    opacity: 1 !important;
  }

  .topbar > .nickWrap {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 5px 10px !important;
    gap: 7px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(211,177,122,.25) !important;
    background: #0d1219 !important;
  }
  .topbar > .nickWrap .nickLbl {
    flex: 0 0 auto !important;
    color: #aeb8c8 !important;
    font-size: 11px !important;
  }
  .topbar > .nickWrap .nick {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 29px !important;
    padding: 0 2px !important;
    border: 0 !important;
    outline: 0 !important;
    font-size: 16px !important;
    line-height: 29px !important;
    color: #fff !important;
  }

  .chatLayout {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .chatMain {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .messages {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 10px 8px 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .msgRow,
  .message,
  .bubble,
  .meta,
  .nickLine,
  .text {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .text,
  .bubble {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .composer {
    position: relative !important;
    z-index: 24 !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 40px) minmax(0,1fr) auto !important;
    grid-template-rows: auto 40px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding: 8px 7px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: linear-gradient(180deg,#0c1118,#070b10) !important;
    box-shadow: 0 -10px 25px rgba(0,0,0,.24) !important;
  }
  .composer [hidden],
  #btnShout[hidden] { display: none !important; }

  .composer .msg {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    max-height: 112px !important;
    height: auto !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(178,196,223,.22) !important;
    background: #0b1017 !important;
    color: #f5f7fb !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    resize: none !important;
  }
  .composer .msg::placeholder { color: rgba(233,238,246,.48) !important; }

  .composer .btn.ghost {
    grid-row: 2 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    color: #f5f8ff !important;
    background: #111821 !important;
    border-color: rgba(204,218,239,.25) !important;
    display: grid !important;
    place-items: center !important;
  }
  .composer #btnEmoji { grid-column: 1 !important; color: #ffd76a !important; }
  .composer #btnUpload { grid-column: 2 !important; color: #f0f5ff !important; }
  .composer #btnYoutube { grid-column: 3 !important; color: #ff5d67 !important; }
  .composer #btnShout { grid-column: 4 !important; color: #ffe3ae !important; }
  .composer .btn.ghost svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
    opacity: 1 !important;
  }

  .composer .btn.send {
    grid-column: 5 / 7 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 94px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 11px !important;
    color: #fffdf7 !important;
    white-space: nowrap !important;
    background: linear-gradient(90deg,rgba(211,177,122,.46),rgba(126,98,58,.40)) !important;
    border-color: rgba(211,177,122,.45) !important;
    font-size: .86rem !important;
  }

  .replyBar {
    flex: 0 0 auto !important;
    margin: 0 7px 6px !important;
    max-width: calc(100% - 14px) !important;
  }

  /* Userlijst wordt een compacte kaart i.p.v. een enorme lege kolom. */
  .sideUsers {
    position: fixed !important;
    z-index: 46 !important;
    top: calc(var(--chat-topbar-h) + 8px) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    width: auto !important;
    max-width: 430px !important;
    max-height: min(58vh, 470px) !important;
    height: auto !important;
    margin-left: auto !important;
    border-radius: 16px !important;
    border: 1px solid rgba(211,177,122,.20) !important;
    background: rgba(12,16,22,.99) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
    transform: translateY(-7px) scale(.985) !important;
    transform-origin: top right !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }
  body.usersOpen .sideUsers {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.usersCollapsed .sideUsers {
    width: auto !important;
    opacity: 0 !important;
  }
  .sideUsers .sideHead {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
  }
  .sideUsers .userlist {
    min-height: 0 !important;
    max-height: calc(min(58vh, 470px) - 44px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-bottom: 6px !important;
  }

  .drawer {
    position: fixed !important;
    z-index: 46 !important;
    top: calc(var(--chat-topbar-h) + 8px) !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: 430px !important;
    max-height: calc(var(--chat-visual-height) - var(--chat-topbar-h) - 16px) !important;
    margin-left: auto !important;
    border-radius: 16px !important;
  }
  .drawerBody {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .emojiPanel {
    position: fixed !important;
    z-index: 52 !important;
    left: 7px !important;
    right: 7px !important;
    bottom: calc(var(--chat-composer-h) + 7px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(40vh, 330px) !important;
    border-radius: 15px !important;
  }

  .privateChatWindow {
    width: calc(100vw - 14px) !important;
    max-width: 430px !important;
    right: 7px !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    max-height: calc(var(--chat-visual-height) - 14px) !important;
  }

  .backdrop {
    z-index: 40 !important;
    background: rgba(0,0,0,.62) !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    column-gap: 5px !important;
    padding-inline: 6px !important;
  }
  .topbar .brand .title { max-width: 94px !important; }
  .topbar .brand .sub { display: none !important; }
  .topbar .right .iconBtn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
  }
  .topbar .right .iconBtn svg { width: 17px !important; height: 17px !important; }
  .composer {
    grid-template-columns: repeat(4, 38px) minmax(0,1fr) auto !important;
    grid-template-rows: auto 38px !important;
    gap: 5px !important;
    padding-inline: 6px !important;
  }
  .composer .btn.ghost {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }
  .composer .btn.send {
    min-width: 86px !important;
    height: 38px !important;
    padding-inline: 10px !important;
    font-size: .82rem !important;
  }
}

@media (max-width: 350px) {
  .topbar .right { gap: 3px !important; }
  .topbar .right .iconBtn {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    border-radius: 8px !important;
  }
  .topbar .brand .title { max-width: 70px !important; font-size: .84rem !important; }
  .composer {
    grid-template-columns: repeat(4, 35px) minmax(0,1fr) auto !important;
    grid-template-rows: auto 36px !important;
  }
  .composer .btn.ghost {
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
  }
  .composer .btn.send { min-width: 78px !important; height: 36px !important; }
}

.sideUsersClose { display: none; }
@media (max-width:760px), (pointer:coarse) and (max-width:1024px) {
  .sideUsers .sideHead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .sideUsersClose {
    display: grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    color: #fff !important;
  }
}

/* =========================================================
   FINAL MOBILE CHAT v12 - dezelfde breakpoint als JavaScript.
   Voorkomt dat de gebruikerslijst op sommige telefoons als vaste kolom blijft staan.
   ========================================================= */
@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--chat-visual-height, 100dvh) !important;
    min-height: var(--chat-visual-height, 100dvh) !important;
    overflow: hidden !important;
  }

  .chatLayout,
  .chatMain {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 8px !important;
  }

  /* Op mobiel is de userlijst uitsluitend een overlay na een expliciete klik. */
  body:not(.usersOpen) .sideUsers {
    display: none !important;
  }
  body.usersOpen .sideUsers {
    display: flex !important;
    position: fixed !important;
    z-index: 60 !important;
    top: calc(var(--chat-topbar-h, 104px) + 7px) !important;
    right: 7px !important;
    bottom: calc(var(--chat-composer-h, 108px) + 7px) !important;
    left: 7px !important;
    width: auto !important;
    max-width: 430px !important;
    max-height: none !important;
    height: auto !important;
    margin-left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    border-radius: 15px !important;
    border: 1px solid rgba(211,177,122,.24) !important;
    background: rgba(9,13,19,.995) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.6) !important;
  }
  body.usersOpen .sideUsers .userlist {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* Geen oude desktop-collapse status door laten lekken naar mobiel. */
  body.usersCollapsed .sideUsers {
    width: auto !important;
    opacity: 1 !important;
  }

  .backdrop.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50 !important;
  }

  .drawer {
    z-index: 60 !important;
    top: calc(var(--chat-topbar-h, 104px) + 7px) !important;
    right: 7px !important;
    bottom: 7px !important;
    left: 7px !important;
    width: auto !important;
    max-width: 430px !important;
    max-height: calc(var(--chat-visual-height, 100dvh) - var(--chat-topbar-h, 104px) - 14px) !important;
    margin-left: auto !important;
  }

  .composer {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .composer .msg {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    max-height: 104px !important;
    font-size: 16px !important; /* voorkomt iOS/Android zoom */
  }

  .topbar > .nickWrap {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .topbar > .nickWrap .nick {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
}

@media (max-width: 380px) {
  .topbar .right .iconBtn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }
  .topbar .right .iconBtn svg { width: 16px !important; height: 16px !important; }
  .topbar .brand .title { max-width: 68px !important; font-size: .82rem !important; }
  .composer {
    grid-template-columns: repeat(4, 34px) minmax(0,1fr) auto !important;
    gap: 4px !important;
    padding-inline: 5px !important;
  }
  .composer .btn.ghost {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }
  .composer .btn.send {
    min-width: 74px !important;
    height: 35px !important;
    padding-inline: 8px !important;
    font-size: .78rem !important;
  }
}

/* =========================================================
   Chat naam UX + responsive topbar FINAL - V21
   Desktop: naamveld verder naar rechts, met duidelijke hint.
   Mobiel/tablet: naamveld blijft volledig zichtbaar en bruikbaar.
   ========================================================= */
.nickArea{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
  margin-left:auto;
}
.nickHint{
  display:flex;
  align-items:center;
  gap:6px;
  color:#d9c18f;
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  opacity:.92;
  user-select:none;
}
.nickHint b{
  color:#ffd76a;
  font-size:16px;
  line-height:1;
  transform:translateY(-1px);
}
.topbar > .nickArea .nickWrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:245px;
  max-width:310px;
  margin:0;
  border-color:rgba(211,177,122,.18);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.topbar > .nickArea .nickWrap:hover{
  border-color:rgba(211,177,122,.35);
  background:rgba(0,0,0,.25);
}
.topbar > .nickArea .nickWrap:focus-within{
  border-color:rgba(255,215,106,.58);
  box-shadow:0 0 0 2px rgba(255,215,106,.08);
}
.nickSaveState{
  flex:0 0 auto;
  min-width:0;
  max-width:70px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#7fdca7;
  font-size:10px;
  font-weight:800;
  opacity:0;
  transition:opacity .18s ease;
}
.nickSaveState.is-visible{ opacity:1; }
.nickSaveState.is-saving{ color:#ffd76a; }
.nickSaveState.is-error{ color:#ff8a8a; }

/* Zet het naamgedeelte bewust aan de rechterkant van de desktop topbar. */
@media (min-width: 901px){
  .topbar{
    justify-content:flex-start;
    gap:14px;
  }
  .topbar .brand{ flex:0 1 auto; min-width:0; }
  .topbar > .nickArea{ margin-left:auto; }
  .topbar > .right{ flex:0 0 auto; }
}

/* Middelgrote laptops: hint korter, maar invoer blijft rechts. */
@media (min-width: 901px) and (max-width: 1180px){
  .nickHint span{ font-size:0; }
  .nickHint span::after{ content:"Chatnaam"; font-size:11px; }
  .topbar > .nickArea .nickWrap{ min-width:210px; max-width:245px; }
}

/* Telefoon/tablet: eigen volle rij onder de chatkop. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px){
  .topbar > .nickArea{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
    width:100% !important;
    margin:0 !important;
  }
  .nickHint{
    justify-content:flex-start !important;
    padding-left:4px;
    font-size:10px;
    color:#e1c98f;
  }
  .nickHint b{
    order:-1;
    transform:rotate(90deg);
    font-size:13px;
  }
  .topbar > .nickArea .nickWrap{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:42px !important;
    padding:6px 10px !important;
    border-radius:12px !important;
    background:#0d1219 !important;
  }
  .topbar > .nickArea .nickWrap .nick{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    height:30px !important;
    padding:0 2px !important;
    font-size:16px !important;
    line-height:30px !important;
  }
  .nickSaveState{ max-width:64px; font-size:9px; }
}

@media (max-width:380px){
  .nickHint{ font-size:9px; }
  .topbar > .nickArea .nickWrap{ min-height:40px !important; padding:5px 8px !important; }
  .topbar > .nickArea .nickWrap .nickLbl{ font-size:10px !important; }
  .nickSaveState{ max-width:54px; }
}


/* V22 - native emoji en tekst-emoticon weergave */
.text, .rqText, .replyBarPreview {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   V27 — EMBED MOBILE SCROLL CHAIN
   In de homepage-iframe mag een swipe aan de rand van de chat
   doorlopen naar de bovenliggende website. Losse/fullscreen chat
   houdt zijn normale interne scrolling.
   ========================================================= */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  body.chatEmbedded .messages {
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom !important;
  }
  body.chatEmbedded .chatMain,
  body.chatEmbedded .chatLayout {
    touch-action: pan-y pinch-zoom !important;
  }
}


/* =========================================================
   V28 — CHAT STABIELE NAAM/STATUS + MELDINGEN
   ========================================================= */
.nickName,
.userMeta .name,
.userStatusLine,
#topSub,
.nickWrap input {
  transition: none !important;
}
.user .nickName,
.msgRow .nickName {
  text-decoration: none !important;
}
#btnPrivate .notifyBubble {
  pointer-events: none !important;
}


/* =========================================================
   V45 - Homepage embedded chat (desktop)
   Volle breedte voor berichten, gebruikerslijst als overlay.
   ========================================================= */
body.chatEmbeddedHome .chatLayout {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
}
body.chatEmbeddedHome .chatMain {
  flex: 1 1 auto;
  min-width: 0;
}
body.chatEmbeddedHome .messages {
  padding: 14px 14px 8px !important;
}
body.chatEmbeddedHome .sideUsers {
  display: none;
  position: absolute !important;
  z-index: 40 !important;
  top: 12px !important;
  right: 12px !important;
  bottom: 92px !important;
  left: auto !important;
  width: min(320px, 32vw) !important;
  max-width: 320px !important;
  height: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(211,177,122,.20) !important;
  background: rgba(10,14,20,.99) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
}
body.chatEmbeddedHome.usersOpen .sideUsers {
  display: flex !important;
}
body.chatEmbeddedHome .sideUsers .userlist {
  overflow-y: auto !important;
}
body.chatEmbeddedHome .sideUsersClose {
  display: inline-flex !important;
}
body.chatEmbeddedHome .backdrop {
  z-index: 35 !important;
}
body.chatEmbeddedHome.usersOpen .backdrop.show {
  display: block !important;
}
@media (max-width: 900px) {
  body.chatEmbeddedHome .sideUsers {
    position: fixed !important;
    top: calc(var(--chat-topbar-h, 104px) + 7px) !important;
    right: 7px !important;
    bottom: calc(var(--chat-composer-h, 108px) + 7px) !important;
    left: 7px !important;
    width: auto !important;
    max-width: 430px !important;
  }
}


/* =========================================================
   V46 - Homepage embedded chat: gebruikerslijst terug op desktop
   De lijst blijft zichtbaar, maar compacter zodat de chat genoeg ruimte houdt.
   De bestaande gebruikersknop kan hem nog steeds in-/uitklappen.
   ========================================================= */
@media (min-width: 901px) {
  body.chatEmbeddedHome .chatLayout {
    display: flex !important;
    align-items: stretch !important;
  }

  body.chatEmbeddedHome .chatMain {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.chatEmbeddedHome .sideUsers {
    display: flex !important;
    position: relative !important;
    z-index: 2 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 280px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid var(--line) !important;
    background: rgba(0,0,0,.18) !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.chatEmbeddedHome.usersCollapsed .sideUsers {
    display: none !important;
    flex-basis: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.chatEmbeddedHome .sideUsersClose {
    display: none !important;
  }

  body.chatEmbeddedHome .sideUsers .userlist {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.chatEmbeddedHome .sideUsers {
    flex-basis: 230px !important;
    width: 230px !important;
    max-width: 230px !important;
  }
}


/* =========================================================
   V57 - Media knoppen zichtbaar + GIF provider hint
   ========================================================= */
.toolBtn {
  color: #f5f8ff !important;
  background: #111821 !important;
  border-color: rgba(204,218,239,.24) !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}
.toolBtn:hover,
.toolBtn:focus-visible {
  color: #fff !important;
  background: #182230 !important;
  border-color: rgba(255,215,106,.48) !important;
  outline: none !important;
}
.toolBtn--code { color: #8fc6ff !important; }
.toolBtn--quote { color: #ffd76a !important; font-size: 1.16rem !important; }
.gifProviderHint {
  grid-column: 1 / -1;
  width: 100%;
  opacity: .78;
  padding-top: 4px;
}


/* =========================================================
   V57 - mobiele gebruikers-teller / snelle userlist
   ========================================================= */
.mobileUsersLauncher {
  display: none;
}

@media (max-width: 900px) {
  .mobileUsersLauncher {
    position: fixed;
    z-index: 38;
    right: max(9px, env(safe-area-inset-right));
    bottom: calc(var(--chat-composer-h, 108px) + max(10px, env(safe-area-inset-bottom)));
    min-width: 82px;
    height: 43px;
    padding: 0 13px;
    border: 1px solid rgba(211,177,122,.28);
    border-radius: 12px;
    background: rgba(8,12,18,.96);
    color: #f4f7ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.42);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, opacity .15s ease, border-color .15s ease, background .15s ease;
  }
  .mobileUsersLauncher:hover,
  .mobileUsersLauncher:focus-visible {
    border-color: rgba(211,177,122,.52);
    background: rgba(21,26,35,.98);
    outline: none;
  }
  .mobileUsersLauncher:active {
    transform: scale(.97);
  }
  .mobileUsersLauncher svg {
    width: 21px;
    height: 21px;
    fill: #c4cada;
    flex: 0 0 auto;
  }
  .mobileUsersCount {
    min-width: 34px;
    text-align: center;
    font-size: .97rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .045em;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }
  body.usersOpen .mobileUsersLauncher {
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px) scale(.96);
  }

  /* In de embedded homechat blijft de teller boven de composer staan. */
  body.chatEmbeddedHome .mobileUsersLauncher {
    right: 9px;
    bottom: calc(var(--chat-composer-h, 108px) + 9px);
  }
}

@media (max-width: 420px) {
  .mobileUsersLauncher {
    min-width: 75px;
    height: 40px;
    padding-inline: 11px;
    border-radius: 11px;
  }
  .mobileUsersLauncher svg { width: 19px; height: 19px; }
  .mobileUsersCount { min-width: 31px; font-size: .9rem; }
}


/* =========================================================
   V60 - compacte !help popup + robuuste privéchat
   ========================================================= */
.chatHelpOverlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 7, 14, .76);
  backdrop-filter: blur(7px);
}
.chatHelpModal {
  width: min(720px, calc(100vw - 24px));
  max-height: min(82vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(113, 161, 230, .25);
  border-radius: 20px;
  background: #0c121c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  color: #edf4ff;
}
.chatHelpHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(113, 161, 230, .15);
}
.chatHelpHead > div { display: grid; gap: 2px; }
.chatHelpKicker {
  color: #f3ca6b;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chatHelpHead strong { font-size: 1.12rem; }
.chatHelpClose {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(113, 161, 230, .22);
  border-radius: 12px;
  background: #111a28;
  color: #eef5ff;
  font-size: 1.5rem;
  cursor: pointer;
}
.chatHelpBody {
  overflow: auto;
  padding: 16px 18px 20px;
  overscroll-behavior: contain;
}
.chatHelpBody h3 {
  margin: 16px 0 8px;
  color: #f3ca6b;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.chatHelpBody h3:first-child { margin-top: 0; }
.chatHelpBody > p { margin: 7px 0; color: #c9d5e6; line-height: 1.5; }
.chatHelpLine {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  margin: 7px 0;
  color: #dce7f7;
}
.chatHelpLine > span { color: #5da9ff; font-weight: 900; }
.chatHelpLine p { margin: 0; line-height: 1.45; }
.chatHelpSpacer { height: 5px; }
.chatHelpFoot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(113, 161, 230, .12);
}
.chatHelpOk { min-width: 120px; }
@media (max-width: 560px) {
  .chatHelpOverlay { padding: 8px; align-items: end; }
  .chatHelpModal {
    width: 100%;
    max-height: 88dvh;
    border-radius: 18px 18px 12px 12px;
  }
  .chatHelpHead { padding: 14px; }
  .chatHelpBody { padding: 13px 14px 18px; }
  .chatHelpFoot { padding: 10px 14px 14px; }
  .chatHelpOk { width: 100%; }
}

/* =========================================================
   V62 - privéchat, tekstkleur en profielbediening
   ========================================================= */
.messageBody { color: inherit; overflow-wrap: anywhere; }
.chatAppearanceBlock { display: grid; gap: 12px; }
.appearanceField { display: grid; gap: 7px; }
.appearanceField > span,
.appearanceColorField > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.appearanceColors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.appearanceColorField {
  display: grid;
  grid-template-columns: minmax(0,1fr) 48px;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.appearanceColorField .colorInput {
  width: 48px;
  height: 30px;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
}
.miniResetButton {
  justify-self: start;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.miniResetButton:hover { border-color: rgba(88,164,255,.4); }
.privateChatHint--error { color: #ffb6bd; }
.privateChatInput:disabled { opacity: .7; cursor: wait; }
.privateChatWindow .send:disabled { opacity: .65; cursor: wait; }
.privateInboxItem { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.privateInboxItem:hover { transform: translateY(-1px); }
.privateInboxItem.has-unread::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffcf55;
  box-shadow: 0 0 0 3px rgba(255,207,85,.12);
}
@media (max-width: 540px) {
  .appearanceColors { grid-template-columns: 1fr; }
  .privateChatFoot { grid-template-columns: 1fr; }
  .privateChatFoot .send { width: 100%; }
}
.privateInboxItem { position: relative; }
.privateInboxItem.has-unread::after {
  position: absolute;
  right: 9px;
  top: 9px;
}


/* =========================================================
   V63 - persistente tekstkleur + Live DJ herkenbaarheid
   ========================================================= */
.composer .msg,
.privateChatInput {
  color: var(--chat-own-text-color, #eef4ff);
  caret-color: var(--chat-own-text-color, #eef4ff);
}
.composer .msg::placeholder,
.privateChatInput::placeholder {
  color: rgba(233,238,246,.48) !important;
}
.badge.live {
  color: #ff8d8d !important;
  border-color: rgba(255,82,82,.65) !important;
  background: rgba(255,59,59,.10) !important;
}
.badge.live .livePulse { background: #ff5252 !important; }

/* V65 - privéchat herstelknop */
.privateRetryBtn{margin-top:10px;min-height:36px;padding:7px 12px;border:1px solid rgba(120,165,220,.32);border-radius:10px;background:#111a26;color:#eef4ff;font:inherit;font-weight:700;cursor:pointer}
.privateRetryBtn:hover,.privateRetryBtn:focus-visible{border-color:rgba(120,165,220,.62);background:#162235;outline:none}


/* =========================================================
   V71 — vaste rolkleuren, browser-onafhankelijk
   ========================================================= */
.msgRow[data-role="dj"] .nickName,
.user[data-role="dj"] .nickName,
.profileMiniCard[data-role="dj"] .profileMiniName b {
  color:#ff5252 !important;
}
.msgRow[data-role="admin"] .nickName,
.msgRow[data-role="td"] .nickName,
.user[data-role="admin"] .nickName,
.user[data-role="td"] .nickName,
.profileMiniCard[data-role="admin"] .profileMiniName b,
.profileMiniCard[data-role="td"] .profileMiniName b {
  color:#ffd54a !important;
}
.badge.live {
  color:#ff5252 !important;
  border-color:rgba(255,82,82,.72) !important;
}
.badge.owner,
.badge.td {
  color:#ffd54a !important;
  border-color:rgba(255,213,74,.55) !important;
}

.privateSeenState{white-space:nowrap;}
.privateBubble.out .privateSeenState{color:rgba(255,255,255,.68);}

/* =========================================================
   V76 — privéchat gelijkwaardig aan hoofdchat
   ========================================================= */
.privateChatWindow{
  width:min(420px, calc(100vw - 24px));
}
.privateChatPeerLine{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.privateChatPeerLine strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.privateChatPeerBadge .badge{
  vertical-align:middle;
  font-size:9px;
}
.privateChatFoot{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  padding:0 12px 12px;
}
.privateComposeRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:8px;
}
.privateChatTools{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:38px;
}
.privateToolBtn{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0 !important;
  display:grid !important;
  place-items:center;
  border-radius:11px !important;
}
.privateToolBtn svg{
  width:19px;
  height:19px;
  fill:currentColor;
}
.privateToolEmoji{ color:#ffd76a !important; font-size:1.08rem !important; }
.privateToolUpload{ color:#eef4ff !important; }
.privateToolYoutube{ color:#ff5f69 !important; }
.privateToolColors{ color:#9fd0ff !important; font-size:1.06rem !important; }
.privatePickerPanel,
.privateColorPanel{
  border:1px solid rgba(125,166,220,.20);
  border-radius:12px;
  background:rgba(8,12,19,.98);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}
.privatePickerPanel{
  max-height:min(300px, 36vh);
  overflow:auto;
  padding:8px;
}
.privatePickerPanel[hidden],
.privateColorPanel[hidden]{ display:none !important; }
.privatePickerModes{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:8px;
}
.privatePickerModes button{
  min-height:30px;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.privatePickerModes button.active{
  color:#fff1bd;
  border-color:rgba(255,215,106,.42);
  background:rgba(255,215,106,.09);
}
.privateEmojiGroupRow{ margin-bottom:7px; }
.privateEmojiGroup{
  width:100%;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#0d141e;
  color:var(--text);
  padding:5px 8px;
  font:inherit;
  font-size:11px;
}
.privatePickerContent{ min-height:42px; }
.privateEmojiGrid{
  display:grid;
  grid-template-columns:repeat(8, minmax(30px,1fr));
  gap:4px;
}
.privateEmojiBtn{
  width:100%;
  aspect-ratio:1;
  border:1px solid transparent;
  border-radius:8px;
  background:rgba(255,255,255,.025);
  font-size:20px;
  cursor:pointer;
}
.privateEmojiBtn:hover{ background:rgba(255,255,255,.08); border-color:var(--line); }
.privateAssetGrid,
.privateGifResults{
  display:grid;
  grid-template-columns:repeat(4, minmax(64px,1fr));
  gap:7px;
}
.privateAssetGrid--small{ grid-template-columns:repeat(5, minmax(48px,1fr)); }
.privateAssetGrid--text{ grid-template-columns:repeat(2, minmax(120px,1fr)); }
.privateAssetBtn,
.privateGifTile{
  min-height:62px;
  padding:4px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
  overflow:hidden;
}
.privateAssetBtn img,
.privateGifTile img{
  width:100%;
  height:72px;
  object-fit:contain;
  display:block;
}
.privateAssetGrid--text .privateAssetBtn img{ height:80px; }
.privatePickerEmpty{
  grid-column:1/-1;
  color:var(--muted);
  font-size:11px;
  padding:10px 4px;
}
.privateGifSearch{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  margin-bottom:7px;
}
.privateGifSearch .input{ min-width:0; }
.privateGifChips{
  display:flex;
  gap:5px;
  overflow:auto;
  margin-bottom:7px;
  padding-bottom:2px;
}
.privateColorPanel{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:7px;
  padding:9px;
}
.privateColorPanel label{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  align-items:center;
  gap:7px;
  min-height:38px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  padding:5px 7px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.privateColorPanel input[type="color"]{
  width:42px;
  height:28px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#0b1119;
  cursor:pointer;
}
.privateColorPanel input:disabled{ opacity:.55; cursor:not-allowed; }
.privateColorHint{
  grid-column:1/-1;
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
}
.privateTransientHint{
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(98,201,143,.25);
  background:rgba(98,201,143,.07);
  color:#aee7c7;
  font-size:10px;
}
.privateTransientHint.error{
  border-color:rgba(255,99,112,.28);
  background:rgba(255,99,112,.07);
  color:#ffb6bd;
}
.privateBubble{
  min-width:126px;
  max-width:92%;
}
.privateBubbleMeta{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:4px;
  min-height:15px;
}
.privateBubbleName{
  font-size:11px;
  font-weight:900;
  line-height:1.15;
}
.privateBubbleRole{
  display:inline-flex;
  align-items:center;
}
.privateBubbleRole .badge{
  font-size:8px;
  padding:1px 5px;
  line-height:1.25;
}
.privateBubbleBody{
  overflow-wrap:anywhere;
  word-break:normal;
}
.privateBubbleBody .imgCard{
  display:block;
  max-width:100%;
  margin:2px 0;
}
.privateBubbleBody .imgCard img{
  width:auto;
  max-width:100%;
  max-height:180px;
  object-fit:contain;
  border-radius:9px;
  display:block;
}
.privateBubbleBody .imgCardSticker img{ max-height:130px; }
.privateBubbleBody .youtubeCard{
  width:100%;
  min-width:230px;
  margin-top:5px;
}
.privateBubbleBody .youtubeCard iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
  border-radius:9px;
}
.privateInboxAvatar{ overflow:hidden; }
.privateInboxAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.privateChatWindow.is-minimized .privatePickerPanel,
.privateChatWindow.is-minimized .privateColorPanel{ display:none !important; }

@media (max-width:540px){
  .privateChatWindow{
    right:6px;
    bottom:max(6px, env(safe-area-inset-bottom));
    width:calc(100vw - 12px);
  }
  .privateEmojiGrid{ grid-template-columns:repeat(7, minmax(30px,1fr)); }
  .privateAssetGrid{ grid-template-columns:repeat(4, minmax(56px,1fr)); }
  .privateAssetGrid--small{ grid-template-columns:repeat(5, minmax(44px,1fr)); }
  .privateAssetGrid--text{ grid-template-columns:repeat(2, minmax(110px,1fr)); }
  .privateComposeRow{ grid-template-columns:minmax(0,1fr) auto; }
  .privateComposeRow .send{ min-width:92px; width:auto !important; }
}
@media (max-width:390px){
  .privateColorPanel{ grid-template-columns:1fr; }
  .privateColorHint{ grid-column:1; }
  .privateEmojiGrid{ grid-template-columns:repeat(6, minmax(30px,1fr)); }
  .privateComposeRow{ grid-template-columns:1fr; }
  .privateComposeRow .send{ width:100% !important; }
}
.privateToolShout{ color:#ffe4ad !important; }
.privateQuickShoutPanel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(9,13,20,.98);
}
.privateQuickShoutPanel button{
  min-height:34px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.privateQuickShoutPanel button:hover{ background:rgba(255,255,255,.08); }
@media(max-width:390px){.privateQuickShoutPanel{grid-template-columns:1fr;}}
/* V76: standaard privékop gebruikt gewone tekstkleur; vaste/gekozen naamkleur wordt inline toegepast. */
.privateChatHead strong{ color:var(--text); }


/* =========================================================
   V77 — compactere en rustigere privéchat
   ========================================================= */
.privateChatWindow{
  width:min(410px, calc(100vw - 20px));
  max-height:min(690px, calc(100dvh - 20px));
  display:flex;
  flex-direction:column;
  border-radius:15px;
  border-color:rgba(100,158,225,.30);
  background:rgba(9,14,21,.985);
  box-shadow:0 22px 70px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.02);
}
.privateChatHead{
  flex:0 0 auto;
  min-height:58px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border-bottom-color:rgba(126,164,211,.16);
}
.privateChatHead > div:first-child{
  min-width:0;
}
.privateChatHead span{
  font-size:10px;
  letter-spacing:.055em;
}
.privateChatPeerLine{
  margin-top:2px;
  gap:6px;
}
.privateChatPeerLine strong{
  font-size:14px;
  line-height:1.2;
}
.privateChatActions{
  flex:0 0 auto;
  gap:5px;
}
.privateChatActions button{
  width:30px;
  height:30px;
  border-radius:9px;
  background:rgba(5,9,14,.48);
}
.privateChatActions button:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(125,166,220,.38);
}
.privateChatBody{
  flex:1 1 auto;
  min-height:0;
  padding:9px 10px 7px;
  display:flex;
}
.privateChatMessages{
  width:100%;
  min-height:210px;
  height:min(350px, 42vh);
  max-height:350px;
  overflow-y:auto;
  overflow-x:hidden;
  gap:9px;
  padding:3px 5px 5px 2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,177,204,.62) transparent;
}
.privateChatMessages::-webkit-scrollbar{ width:7px; }
.privateChatMessages::-webkit-scrollbar-track{ background:transparent; }
.privateChatMessages::-webkit-scrollbar-thumb{
  background:rgba(156,177,204,.52);
  border-radius:999px;
}
.privateBubble{
  min-width:0;
  max-width:84%;
  padding:8px 10px 7px;
  border-radius:13px;
  box-shadow:0 4px 14px rgba(0,0,0,.13);
}
.privateBubble.in{
  border-bottom-left-radius:5px;
  background:rgba(60,122,189,.13);
  border-color:rgba(88,164,255,.27);
}
.privateBubble.out{
  border-bottom-right-radius:5px;
  background:rgba(202,164,99,.13);
  border-color:rgba(220,184,121,.27);
}
.privateBubbleMeta{
  gap:5px;
  margin-bottom:5px;
}
.privateBubbleName{
  font-size:11px;
  line-height:1.1;
}
.privateBubbleBody{
  font-size:13px;
  line-height:1.4;
}
.privateBubble > small{
  margin-top:5px;
  font-size:9px;
  line-height:1.2;
  opacity:.88;
}
.privateChatFoot{
  flex:0 0 auto;
  gap:7px !important;
  padding:8px 10px 10px !important;
  border-top:1px solid rgba(126,164,211,.12);
  background:rgba(7,11,17,.74);
}
.privateChatTools{
  gap:5px;
  min-height:36px;
}
.privateToolBtn{
  width:36px;
  min-width:36px;
  height:36px;
  border-radius:10px !important;
}
.privateToolBtn:hover{
  transform:translateY(-1px);
}
.privateComposeRow{
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  align-items:stretch;
}
.privateChatInput{
  min-height:54px;
  max-height:112px;
  resize:none;
  border-radius:12px;
  padding:9px 10px;
  line-height:1.35;
  background:rgba(2,6,11,.58);
  border-color:rgba(132,165,207,.25);
}
.privateChatInput:focus{
  outline:none;
  border-color:rgba(108,170,238,.62);
  box-shadow:0 0 0 2px rgba(88,164,255,.10);
}
.privateComposeRow .send{
  min-width:112px;
  min-height:54px;
  padding:8px 12px;
  border-radius:12px;
  align-self:stretch;
}
.privatePickerPanel,
.privateColorPanel{
  max-height:min(270px, 34vh);
}
@media (max-width:540px){
  .privateChatWindow{
    right:6px;
    bottom:max(6px, env(safe-area-inset-bottom));
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 12px);
  }
  .privateChatMessages{
    min-height:180px;
    height:min(320px, 39vh);
    max-height:320px;
  }
  .privateComposeRow .send{
    min-width:100px;
  }
}
@media (max-width:390px){
  .privateChatHead{ padding:9px 10px; }
  .privateChatBody{ padding:7px 8px 6px; }
  .privateChatFoot{ padding:7px 8px 8px !important; }
  .privateChatTools{ gap:4px; }
  .privateToolBtn{ width:34px; min-width:34px; height:34px; }
  .privateComposeRow{ grid-template-columns:1fr; }
  .privateComposeRow .send{ width:100% !important; min-height:44px; }
}

/* V78 - duidelijke YouTube knop + eigen linkvenster */
.youtubeGlyph{display:inline-flex;align-items:center;justify-content:center;width:23px;height:16px;border-radius:5px;background:#ff0033;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;position:relative;flex:0 0 auto}.youtubeGlyph>span{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid #fff;margin-left:2px}.youtubeGlyph--large{width:34px;height:24px;border-radius:7px}.youtubeGlyph--large>span{border-top-width:6px;border-bottom-width:6px;border-left-width:10px}.btn.ghost.youtubeBtn,.privateToolYoutube{color:#fff!important}.btn.ghost.youtubeBtn svg,.privateToolYoutube svg{display:none!important}
.youtubeComposerOverlay{position:fixed;inset:0;z-index:12000;background:rgba(2,7,14,.76);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}.youtubeComposerModal{width:min(520px,100%);border:1px solid rgba(122,161,211,.28);border-radius:17px;background:linear-gradient(180deg,#101722,#0b111a);box-shadow:0 24px 70px rgba(0,0,0,.52);overflow:hidden}.youtubeComposerHead{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.youtubeComposerTitle{display:flex;align-items:center;gap:12px}.youtubeComposerTitle>div{display:grid;gap:1px}.youtubeComposerTitle small{font-size:10px;letter-spacing:.12em;color:#8fa0b8}.youtubeComposerTitle strong{font-size:16px;color:#f4f7fb}.youtubeComposerClose{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111a27;color:#fff;font-size:21px;cursor:pointer}.youtubeComposerBody{display:grid;gap:8px;padding:17px 16px}.youtubeComposerBody label{font-size:12px;font-weight:800;color:#d5deea}.youtubeComposerInput{width:100%;height:46px;border:1px solid rgba(119,153,197,.28);border-radius:11px;background:#080d14;color:#fff;padding:0 13px;outline:none;font:inherit}.youtubeComposerInput:focus{border-color:rgba(73,151,255,.7);box-shadow:0 0 0 3px rgba(73,151,255,.12)}.youtubeComposerBody p{margin:0;color:#8e9bae;font-size:12px;line-height:1.45}.youtubeComposerError{padding:9px 11px;border-radius:9px;border:1px solid rgba(255,88,88,.28);background:rgba(255,72,72,.08);color:#ff9f9f;font-size:12px}.youtubeComposerFoot{display:flex;justify-content:flex-end;gap:9px;padding:13px 16px 16px}.youtubeComposerFoot .btn{min-width:110px}
@media(max-width:520px){.youtubeComposerOverlay{padding:10px;align-items:flex-end}.youtubeComposerModal{border-radius:16px 16px 0 0}.youtubeComposerFoot{display:grid;grid-template-columns:1fr 1fr}.youtubeComposerFoot .btn{min-width:0;width:100%}}

/* V78 - banvenster */
.banComposerOverlay{position:fixed;inset:0;z-index:12020;background:rgba(2,7,14,.78);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}.banComposerModal{width:min(500px,100%);border:1px solid rgba(255,90,90,.25);border-radius:17px;background:linear-gradient(180deg,#121821,#0b1118);box-shadow:0 24px 70px rgba(0,0,0,.56);overflow:hidden}.banComposerHead{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.banComposerHead>div{display:grid;gap:2px}.banComposerHead small{font-size:10px;letter-spacing:.12em;color:#ff8c8c}.banComposerHead strong{font-size:16px}.banComposerClose{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111a27;color:#fff;font-size:21px;cursor:pointer}.banComposerBody{display:grid;gap:12px;padding:16px}.banComposerBody label{display:grid;gap:6px;font-size:12px;font-weight:800}.banComposerBody input,.banComposerBody select{height:43px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#080d14;color:#fff;padding:0 11px;font:inherit}.banComposerBody p{margin:0;color:#91a0b4;font-size:12px;line-height:1.5}.banTargetRow{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.banTargetRow span{color:#91a0b4}.banComposerFoot{display:flex;justify-content:flex-end;gap:9px;padding:0 16px 16px}.banComposerSubmit{background:rgba(255,69,69,.15)!important;border-color:rgba(255,89,89,.4)!important;color:#ffb0b0!important}
.privateTenorLink{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 10px;border:1px solid rgba(90,160,255,.24);border-radius:9px;background:rgba(55,115,190,.08);color:#bcd8ff;text-decoration:none;font-size:12px;font-weight:800}.privateTenorLink:hover{border-color:rgba(90,160,255,.48);background:rgba(55,115,190,.14)}.gifProviderHint a{color:#9ec8ff;text-decoration:none;font-weight:800}.gifProviderHint a:hover{text-decoration:underline}

/* V79 — bericht melden */
.reportMsgBtn{width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:var(--muted);display:inline-grid;place-items:center;cursor:pointer;font-size:14px;line-height:1;transition:.16s ease}.reportMsgBtn:hover,.reportMsgBtn:focus-visible{background:rgba(255,183,77,.12);color:#ffc36f;outline:none}.reportComposerOverlay{position:fixed;inset:0;z-index:12030;background:rgba(2,7,14,.78);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}.reportComposerModal{width:min(520px,100%);border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(180deg,#121821,#0b1118);box-shadow:0 24px 70px rgba(0,0,0,.56);overflow:hidden}.reportComposerHead{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.reportComposerHead>div{display:grid;gap:2px}.reportComposerHead small{font-size:10px;letter-spacing:.12em;color:#ffc36f}.reportComposerHead strong{font-size:16px}.reportComposerClose{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#111a27;color:#fff;font-size:21px;cursor:pointer}.reportComposerBody{display:grid;gap:12px;padding:16px}.reportComposerBody label{display:grid;gap:6px;font-size:12px;font-weight:800}.reportComposerBody label span{font-weight:500;color:var(--muted)}.reportComposerBody select,.reportComposerBody textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#080d14;color:#fff;padding:10px 11px;font:inherit}.reportComposerBody p{margin:0;color:#91a0b4;font-size:12px;line-height:1.5}.reportTargetRow{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.reportTargetRow span{color:#91a0b4}.reportPreview{padding:11px 12px;border-left:3px solid rgba(255,195,111,.55);background:rgba(255,255,255,.03);border-radius:8px;color:#dbe5f3;font-size:13px;line-height:1.45;max-height:100px;overflow:auto}.reportComposerFoot{display:flex;justify-content:flex-end;gap:9px;padding:0 16px 16px}.reportComposerSubmit{background:rgba(255,183,77,.15)!important;border-color:rgba(255,195,111,.35)!important;color:#ffd49a!important}
.privateReportBtn{margin-left:8px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:10px;cursor:pointer;padding:2px 4px;border-radius:6px}.privateReportBtn:hover{color:#ffc36f;background:rgba(255,183,77,.1)}

/* =========================================================
   V90 — chat volgt het actieve website-thema
   Alleen seizoenthema's overschrijven de standaard blauwe chatlook.
   ========================================================= */
body.siteTheme-halloween{
  --bg:#08060d;--card:rgba(27,12,37,.82);--card2:rgba(12,7,18,.72);
  --line:rgba(239,124,42,.20);--text:#fff3df;--muted:#decfec;--gold:#ef7c2a;--gold2:#8f59bb;
  background:radial-gradient(900px 520px at 10% 0,rgba(239,124,42,.11),transparent 58%),radial-gradient(780px 480px at 90% 10%,rgba(143,89,187,.11),transparent 55%),#08060d;
}
body.siteTheme-kerst{
  --bg:#07100d;--card:rgba(13,40,29,.84);--card2:rgba(7,18,14,.74);
  --line:rgba(72,160,108,.20);--text:#f5fbf7;--muted:#d8eadf;--gold:#d7b75c;--gold2:#c7444d;
  background:radial-gradient(900px 520px at 10% 0,rgba(47,141,97,.11),transparent 58%),radial-gradient(780px 480px at 90% 10%,rgba(215,183,92,.10),transparent 55%),#07100d;
}
body.siteTheme-sinterklaas{
  --bg:#120f14;--card:rgba(44,15,27,.84);--card2:rgba(19,12,17,.74);
  --line:rgba(220,183,88,.21);--text:#fff4d8;--muted:#eadccd;--gold:#dcb758;--gold2:#b12d39;
  background:radial-gradient(900px 520px at 10% 0,rgba(177,45,57,.10),transparent 58%),radial-gradient(780px 480px at 90% 10%,rgba(220,183,88,.10),transparent 55%),#120f14;
}
body.siteTheme-halloween .topbar,body.siteTheme-halloween .userList,body.siteTheme-halloween .composer,
body.siteTheme-halloween .drawer,body.siteTheme-halloween .privateChatWindow,
body.siteTheme-halloween .privateChatHead,body.siteTheme-halloween .privateChatFoot,
body.siteTheme-halloween .profilePanel,body.siteTheme-halloween .settingsPanel,
body.siteTheme-halloween .mediaPanel{background:rgba(16,9,24,.96)!important;border-color:rgba(239,124,42,.22)!important}
body.siteTheme-kerst .topbar,body.siteTheme-kerst .userList,body.siteTheme-kerst .composer,
body.siteTheme-kerst .drawer,body.siteTheme-kerst .privateChatWindow,
body.siteTheme-kerst .privateChatHead,body.siteTheme-kerst .privateChatFoot,
body.siteTheme-kerst .profilePanel,body.siteTheme-kerst .settingsPanel,
body.siteTheme-kerst .mediaPanel{background:rgba(8,23,17,.96)!important;border-color:rgba(72,160,108,.22)!important}
body.siteTheme-sinterklaas .topbar,body.siteTheme-sinterklaas .userList,body.siteTheme-sinterklaas .composer,
body.siteTheme-sinterklaas .drawer,body.siteTheme-sinterklaas .privateChatWindow,
body.siteTheme-sinterklaas .privateChatHead,body.siteTheme-sinterklaas .privateChatFoot,
body.siteTheme-sinterklaas .profilePanel,body.siteTheme-sinterklaas .settingsPanel,
body.siteTheme-sinterklaas .mediaPanel{background:rgba(24,13,19,.96)!important;border-color:rgba(220,183,88,.22)!important}

body.siteTheme-halloween .msgRow.mine,body.siteTheme-halloween .privateBubble.in{background:rgba(143,89,187,.09)!important;border-color:rgba(239,124,42,.20)!important}
body.siteTheme-kerst .msgRow.mine,body.siteTheme-kerst .privateBubble.in{background:rgba(47,141,97,.09)!important;border-color:rgba(72,160,108,.20)!important}
body.siteTheme-sinterklaas .msgRow.mine,body.siteTheme-sinterklaas .privateBubble.in{background:rgba(177,45,57,.09)!important;border-color:rgba(220,183,88,.20)!important}
body.siteTheme-halloween .privateBubble.out{background:rgba(239,124,42,.11)!important;border-color:rgba(239,124,42,.23)!important}
body.siteTheme-kerst .privateBubble.out{background:rgba(215,183,92,.10)!important;border-color:rgba(215,183,92,.22)!important}
body.siteTheme-sinterklaas .privateBubble.out{background:rgba(220,183,88,.10)!important;border-color:rgba(220,183,88,.22)!important}

body.siteTheme-halloween .nickWrap,body.siteTheme-halloween .iconBtn,body.siteTheme-halloween .composer .msg,
body.siteTheme-halloween .privateChatInput,body.siteTheme-halloween .privateChatActions button,body.siteTheme-halloween .privateToolBtn{
  border-color:rgba(239,124,42,.22)!important;background:rgba(24,11,33,.72)!important;color:#fff3df!important}
body.siteTheme-kerst .nickWrap,body.siteTheme-kerst .iconBtn,body.siteTheme-kerst .composer .msg,
body.siteTheme-kerst .privateChatInput,body.siteTheme-kerst .privateChatActions button,body.siteTheme-kerst .privateToolBtn{
  border-color:rgba(72,160,108,.22)!important;background:rgba(12,35,26,.74)!important;color:#f5fbf7!important}
body.siteTheme-sinterklaas .nickWrap,body.siteTheme-sinterklaas .iconBtn,body.siteTheme-sinterklaas .composer .msg,
body.siteTheme-sinterklaas .privateChatInput,body.siteTheme-sinterklaas .privateChatActions button,body.siteTheme-sinterklaas .privateToolBtn{
  border-color:rgba(220,183,88,.22)!important;background:rgba(43,15,28,.74)!important;color:#fff4d8!important}

body.siteTheme-halloween .privateChatInput:focus{border-color:rgba(239,124,42,.62)!important;box-shadow:0 0 0 2px rgba(239,124,42,.10)!important}
body.siteTheme-kerst .privateChatInput:focus{border-color:rgba(72,160,108,.62)!important;box-shadow:0 0 0 2px rgba(72,160,108,.10)!important}
body.siteTheme-sinterklaas .privateChatInput:focus{border-color:rgba(220,183,88,.62)!important;box-shadow:0 0 0 2px rgba(220,183,88,.10)!important}

body.siteTheme-halloween .btn.send,body.siteTheme-halloween .privateComposeRow .send{background:linear-gradient(135deg,#ef7c2a,#8f59bb)!important;border-color:rgba(239,124,42,.28)!important;color:#fff!important}
body.siteTheme-kerst .btn.send,body.siteTheme-kerst .privateComposeRow .send{background:linear-gradient(135deg,#2f8d61,#c7444d)!important;border-color:rgba(215,183,92,.24)!important;color:#fff!important}
body.siteTheme-sinterklaas .btn.send,body.siteTheme-sinterklaas .privateComposeRow .send{background:linear-gradient(135deg,#b12d39,#d0a647)!important;border-color:rgba(220,183,88,.24)!important;color:#fff!important}

body.siteTheme-halloween .privateChatWindow{box-shadow:0 22px 70px rgba(0,0,0,.58),0 0 0 1px rgba(239,124,42,.08)!important}
body.siteTheme-kerst .privateChatWindow{box-shadow:0 22px 70px rgba(0,0,0,.56),0 0 0 1px rgba(72,160,108,.08)!important}
body.siteTheme-sinterklaas .privateChatWindow{box-shadow:0 22px 70px rgba(0,0,0,.56),0 0 0 1px rgba(220,183,88,.08)!important}

/* =========================================================
   V99 — professional seasonal radio themes
   ========================================================= */
body.siteTheme-halloween{
  --bg:#08060d;--card:rgba(20,12,28,.94);--card2:rgba(10,7,15,.96);
  --line:rgba(231,123,47,.14);--text:#f7f2f9;--muted:#c7b8cf;--gold:#d96f2b;--gold2:#8051a6;
  background:radial-gradient(circle at 82% 0,rgba(128,81,166,.12),transparent 34%),linear-gradient(180deg,#0c0711,#07050b)!important;
}
body.siteTheme-kerst{
  --bg:#07100c;--card:rgba(11,28,20,.94);--card2:rgba(7,15,11,.96);
  --line:rgba(201,173,87,.14);--text:#f2f8f4;--muted:#b7cec0;--gold:#caae55;--gold2:#b63e47;
  background:radial-gradient(circle at 82% 0,rgba(47,132,91,.13),transparent 34%),linear-gradient(180deg,#09150f,#050b08)!important;
}
body.siteTheme-sinterklaas{
  --bg:#110a0e;--card:rgba(33,13,19,.94);--card2:rgba(17,8,12,.96);
  --line:rgba(205,170,85,.14);--text:#f8f1e8;--muted:#cbbcab;--gold:#c9a74e;--gold2:#9f2833;
  background:radial-gradient(circle at 82% 0,rgba(159,40,51,.12),transparent 34%),linear-gradient(180deg,#160a0f,#0c0709)!important;
}
body.siteTheme-halloween .topbar,body.siteTheme-halloween .userList,body.siteTheme-halloween .composer,body.siteTheme-halloween .drawer,body.siteTheme-halloween .privateChatWindow,body.siteTheme-halloween .privateChatHead,body.siteTheme-halloween .privateChatFoot,body.siteTheme-halloween .profilePanel,body.siteTheme-halloween .settingsPanel,body.siteTheme-halloween .mediaPanel{background:linear-gradient(180deg,rgba(20,12,28,.97),rgba(10,7,15,.99))!important;border-color:rgba(231,123,47,.14)!important}
body.siteTheme-kerst .topbar,body.siteTheme-kerst .userList,body.siteTheme-kerst .composer,body.siteTheme-kerst .drawer,body.siteTheme-kerst .privateChatWindow,body.siteTheme-kerst .privateChatHead,body.siteTheme-kerst .privateChatFoot,body.siteTheme-kerst .profilePanel,body.siteTheme-kerst .settingsPanel,body.siteTheme-kerst .mediaPanel{background:linear-gradient(180deg,rgba(11,28,20,.97),rgba(7,15,11,.99))!important;border-color:rgba(201,173,87,.14)!important}
body.siteTheme-sinterklaas .topbar,body.siteTheme-sinterklaas .userList,body.siteTheme-sinterklaas .composer,body.siteTheme-sinterklaas .drawer,body.siteTheme-sinterklaas .privateChatWindow,body.siteTheme-sinterklaas .privateChatHead,body.siteTheme-sinterklaas .privateChatFoot,body.siteTheme-sinterklaas .profilePanel,body.siteTheme-sinterklaas .settingsPanel,body.siteTheme-sinterklaas .mediaPanel{background:linear-gradient(180deg,rgba(33,13,19,.97),rgba(17,8,12,.99))!important;border-color:rgba(205,170,85,.14)!important}
body.siteTheme-halloween .msgRow.mine,body.siteTheme-halloween .privateBubble.in{background:rgba(128,81,166,.06)!important;border-color:rgba(231,123,47,.13)!important}
body.siteTheme-kerst .msgRow.mine,body.siteTheme-kerst .privateBubble.in{background:rgba(47,132,91,.06)!important;border-color:rgba(201,173,87,.12)!important}
body.siteTheme-sinterklaas .msgRow.mine,body.siteTheme-sinterklaas .privateBubble.in{background:rgba(159,40,51,.06)!important;border-color:rgba(205,170,85,.12)!important}
body.siteTheme-halloween .privateBubble.out{background:rgba(217,111,43,.07)!important;border-color:rgba(217,111,43,.15)!important}
body.siteTheme-kerst .privateBubble.out{background:rgba(201,173,87,.06)!important;border-color:rgba(201,173,87,.14)!important}
body.siteTheme-sinterklaas .privateBubble.out{background:rgba(201,167,78,.06)!important;border-color:rgba(205,170,85,.14)!important}
body.siteTheme-halloween .btn.send,body.siteTheme-halloween .privateComposeRow .send{background:linear-gradient(135deg,#d96f2b,#704795)!important;border-color:rgba(231,123,47,.20)!important}
body.siteTheme-kerst .btn.send,body.siteTheme-kerst .privateComposeRow .send{background:linear-gradient(135deg,#2f845b,#a73942)!important;border-color:rgba(201,173,87,.20)!important}
body.siteTheme-sinterklaas .btn.send,body.siteTheme-sinterklaas .privateComposeRow .send{background:linear-gradient(135deg,#9f2833,#b88837)!important;border-color:rgba(205,170,85,.20)!important}
body.siteTheme-halloween .nickWrap,body.siteTheme-halloween .iconBtn,body.siteTheme-halloween .composer .msg,body.siteTheme-halloween .privateChatInput,body.siteTheme-halloween .privateChatActions button,body.siteTheme-halloween .privateToolBtn{background:rgba(10,7,15,.78)!important;border-color:rgba(231,123,47,.12)!important}
body.siteTheme-kerst .nickWrap,body.siteTheme-kerst .iconBtn,body.siteTheme-kerst .composer .msg,body.siteTheme-kerst .privateChatInput,body.siteTheme-kerst .privateChatActions button,body.siteTheme-kerst .privateToolBtn{background:rgba(7,15,11,.78)!important;border-color:rgba(201,173,87,.12)!important}
body.siteTheme-sinterklaas .nickWrap,body.siteTheme-sinterklaas .iconBtn,body.siteTheme-sinterklaas .composer .msg,body.siteTheme-sinterklaas .privateChatInput,body.siteTheme-sinterklaas .privateChatActions button,body.siteTheme-sinterklaas .privateToolBtn{background:rgba(17,8,12,.78)!important;border-color:rgba(205,170,85,.12)!important}

/* V104 — seasonal radio theme polish */
body.siteTheme-kerst{background:linear-gradient(180deg,#07130e,#050b08)!important;color:#f5faf7!important}
body.siteTheme-kerst .topbar,body.siteTheme-kerst .userList,body.siteTheme-kerst .composer,body.siteTheme-kerst .drawer,body.siteTheme-kerst .privateChatWindow,body.siteTheme-kerst .privateChatHead,body.siteTheme-kerst .privateChatFoot,body.siteTheme-kerst .profilePanel,body.siteTheme-kerst .settingsPanel,body.siteTheme-kerst .mediaPanel{background:linear-gradient(180deg,rgba(10,29,21,.98),rgba(6,15,11,.99))!important;border-color:rgba(219,190,98,.15)!important}
body.siteTheme-kerst .btn.send,body.siteTheme-kerst .privateComposeRow .send{background:linear-gradient(135deg,#33875f,#a93642)!important;border-color:rgba(219,190,98,.22)!important}
body.siteTheme-sinterklaas{background:linear-gradient(180deg,#210c12,#11070a)!important;color:#fff7eb!important}
body.siteTheme-sinterklaas .topbar,body.siteTheme-sinterklaas .userList,body.siteTheme-sinterklaas .composer,body.siteTheme-sinterklaas .drawer,body.siteTheme-sinterklaas .privateChatWindow,body.siteTheme-sinterklaas .privateChatHead,body.siteTheme-sinterklaas .privateChatFoot,body.siteTheme-sinterklaas .profilePanel,body.siteTheme-sinterklaas .settingsPanel,body.siteTheme-sinterklaas .mediaPanel{background:linear-gradient(180deg,rgba(35,12,18,.98),rgba(18,8,11,.99))!important;border-color:rgba(222,185,91,.15)!important}
body.siteTheme-sinterklaas .btn.send,body.siteTheme-sinterklaas .privateComposeRow .send{background:linear-gradient(135deg,#a82e3a,#b68835)!important;border-color:rgba(222,185,91,.22)!important}
body.siteTheme-halloween{background:linear-gradient(180deg,#100817,#08050c)!important;color:#f7f1f8!important}
body.siteTheme-halloween .topbar,body.siteTheme-halloween .userList,body.siteTheme-halloween .composer,body.siteTheme-halloween .drawer,body.siteTheme-halloween .privateChatWindow,body.siteTheme-halloween .privateChatHead,body.siteTheme-halloween .privateChatFoot,body.siteTheme-halloween .profilePanel,body.siteTheme-halloween .settingsPanel,body.siteTheme-halloween .mediaPanel{background:linear-gradient(180deg,rgba(18,10,26,.98),rgba(8,5,13,.99))!important;border-color:rgba(225,115,45,.14)!important}
body.siteTheme-halloween .btn.send,body.siteTheme-halloween .privateComposeRow .send{background:linear-gradient(135deg,#d66e2a,#654188)!important;border-color:rgba(225,115,45,.20)!important}


/* =========================================================
   V139 — compacte userlist ALLEEN op echte kleine schermen
   Compacte lijst: minder hoogte, geen grote kaarten, status compact.
   ========================================================= */
body.trueMobileUserlist .sideUsers{
  right:8px !important;
  top:68px !important;
  bottom:82px !important;
  width:min(286px, calc(100vw - 16px)) !important;
  border-radius:14px !important;
}
body.trueMobileUserlist .sideUsers .sideHead{
  min-height:42px !important;
  padding:8px 10px !important;
}
body.trueMobileUserlist .sideUsers .sideHead .ttl{
  font-size:14px !important;
  line-height:1 !important;
}
body.trueMobileUserlist .sideUsers .sideUsersClose{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
}
body.trueMobileUserlist .sideUsers .userlist{
  padding:4px 7px 8px !important;
}
body.trueMobileUserlist .sideUsers .user{
  min-height:0 !important;
  padding:7px 3px !important;
  gap:6px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:center !important;
}
body.trueMobileUserlist .sideUsers .user:last-child{
  border-bottom:0 !important;
}
body.trueMobileUserlist .sideUsers .user:hover{
  transform:none !important;
  background:rgba(255,255,255,.02) !important;
  box-shadow:none !important;
}
body.trueMobileUserlist .sideUsers .user::before{
  display:none !important;
}
body.trueMobileUserlist .sideUsers .user .l{
  align-items:center !important;
  gap:7px !important;
}
body.trueMobileUserlist .sideUsers .userAvatar{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  font-size:11px !important;
}
body.trueMobileUserlist .sideUsers .userMeta{
  gap:1px !important;
  min-width:0 !important;
}
body.trueMobileUserlist .sideUsers .user .name{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
  min-width:0 !important;
  overflow:hidden !important;
  font-size:12.5px !important;
  line-height:1.05 !important;
}
body.trueMobileUserlist .sideUsers .user .name .nickName{
  display:block !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:148px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  font-size:12.5px !important;
  line-height:1.05 !important;
}
body.trueMobileUserlist .sideUsers .badge{
  flex:0 0 auto !important;
  font-size:8px !important;
  line-height:1 !important;
  padding:1px 5px !important;
  border-radius:999px !important;
}
body.trueMobileUserlist .sideUsers .badge.live{
  gap:3px !important;
}
body.trueMobileUserlist .sideUsers .badge.live .livePulse{
  width:4px !important;
  height:4px !important;
}
body.trueMobileUserlist .sideUsers .userStatusLine{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  font-size:10px !important;
  line-height:1.06 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.trueMobileUserlist .sideUsers .userStateDot{
  width:7px !important;
  height:7px !important;
}
body.trueMobileUserlist .sideUsers .userStateIcon{
  font-size:10px !important;
}
body.trueMobileUserlist .sideUsers .user .r{
  display:none !important;
}
@media (max-width:360px){
  body.trueMobileUserlist .sideUsers{
    width:min(272px, calc(100vw - 12px)) !important;
    right:6px !important;
  }
  body.trueMobileUserlist .sideUsers .user .name .nickName{
    max-width:128px !important;
  }
}

/* =========================================================
   V171 — embedded homepage chat: één definitieve layoutbron
   Alleen ?embed=1&home=1. De volledige /chat/ blijft onaangeraakt.
   De iframehoogte komt van de homepage; intern gebruikt de chat uitsluitend
   100% daarvan. Alleen de berichtenlijst mag scrollen.
   ========================================================= */
html.chatEmbeddedHomeRoot,
html.chatEmbeddedHomeRoot body.chatEmbeddedHome {
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  overflow:hidden !important;
}
html.chatEmbeddedHomeRoot *,
html.chatEmbeddedHomeRoot *::before,
html.chatEmbeddedHomeRoot *::after {
  box-sizing:border-box;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome {
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  grid-template-columns:minmax(0,1fr) !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome > .topbar {
  grid-row:1 !important;
  flex:none !important;
  min-width:0 !important;
  min-height:0 !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome > .chatLayout {
  grid-row:2 !important;
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:100% !important;
  overflow:hidden !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome .chatMain {
  position:relative !important;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) auto auto !important;
  flex:1 1 0 !important;
  width:auto !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:100% !important;
  overflow:hidden !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome .messages {
  grid-row:1 !important;
  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior-y:contain !important;
  -webkit-overflow-scrolling:touch !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome .replyBar {
  grid-row:2 !important;
  flex:none !important;
  min-height:0 !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome .composer {
  grid-row:3 !important;
  display:flex !important;
  position:relative !important;
  inset:auto !important;
  flex:none !important;
  width:100% !important;
  max-width:100% !important;
  min-height:64px !important;
  margin:0 !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  overflow:visible !important;
  z-index:35 !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome .composer .msg {
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:44px !important;
}
html.chatEmbeddedHomeRoot body.chatEmbeddedHome .sideUsers {
  flex:0 0 auto !important;
  height:100% !important;
  min-height:0 !important;
  max-height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
@media (max-width:760px) {
  html.chatEmbeddedHomeRoot body.chatEmbeddedHome .messages {
    overscroll-behavior-y:auto !important;
    touch-action:pan-y pinch-zoom !important;
  }
  html.chatEmbeddedHomeRoot body.chatEmbeddedHome .composer {
    display:grid !important;
    min-height:0 !important;
  }
  html.chatEmbeddedHomeRoot body.chatEmbeddedHome .sideUsers {
    height:auto !important;
    max-height:none !important;
  }
}

/* V178 centrale website-mededeling in de chat, compact zodat composer zichtbaar blijft. */
.chatSiteNotice{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.35;flex:0 0 auto;z-index:12}
.chatSiteNotice--info{background:#17395f;color:#fff}.chatSiteNotice--warning{background:#6a4807;color:#fff}.chatSiteNotice--maintenance{background:#5a1d1d;color:#fff}
.chatSiteNotice strong{white-space:nowrap}.chatSiteNotice span{min-width:0}
@media(max-width:700px){.chatSiteNotice{-webkit-align-items:flex-start;align-items:flex-start;-webkit-flex-direction:column;flex-direction:column;gap:2px;padding:6px 10px;font-size:12px}}
.hasSiteNotice{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;min-height:0}
.hasSiteNotice .topbar{-webkit-flex:0 0 64px;flex:0 0 64px}
.hasSiteNotice .chatSiteNotice{-webkit-flex:0 0 auto;flex:0 0 auto}
.hasSiteNotice .chatLayout{height:auto!important;min-height:0!important;-webkit-flex:1 1 auto;flex:1 1 auto}


/* =========================================================
   V211 - standalone chat: compacte vaste radio player
   Alleen /chat/ (niet de embedded homepage-chat).
   ========================================================= */
body:not(.chatEmbedded) .chatRadioBar{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:8px 10px 0;
  padding:8px 10px;
  min-height:70px;
  border:1px solid rgba(74,142,235,.28);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(7,19,37,.97),rgba(4,10,22,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.18);
}
body:not(.chatEmbedded) .chatRadioBar__photo{
  width:54px;height:54px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(88,164,255,.30);background:#030813;
}
body:not(.chatEmbedded) .chatRadioBar__photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
body:not(.chatEmbedded) .chatRadioBar__info{min-width:0;display:grid;gap:5px;}
body:not(.chatEmbedded) .chatRadioBar__top{display:flex;align-items:center;gap:9px;min-width:0;}
body:not(.chatEmbedded) .chatRadioBar__top strong{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body:not(.chatEmbedded) .chatRadioBar__badge{
  display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:0 7px;border-radius:999px;
  border:1px solid rgba(88,164,255,.28);background:rgba(88,164,255,.12);color:#cfe2ff;
  font-size:.55rem;font-weight:900;letter-spacing:.08em;white-space:nowrap;
}
body:not(.chatEmbedded) .chatRadioBar__badge.is-live{border-color:rgba(45,211,111,.36);background:rgba(45,211,111,.13);color:#79f0aa;}
body:not(.chatEmbedded) .chatRadioBar__song{color:#aebbd0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body:not(.chatEmbedded) .chatRadioBar__controls{display:flex;align-items:center;gap:8px;}
body:not(.chatEmbedded) .chatRadioBar__play,
body:not(.chatEmbedded) .chatRadioBar__mute{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  border:1px solid rgba(88,164,255,.28);background:#10213c;color:#fff;cursor:pointer;font-weight:900;
}
body:not(.chatEmbedded) .chatRadioBar__play{border-radius:50%;background:linear-gradient(145deg,#398cff,#1764cf);box-shadow:0 0 0 2px rgba(255,197,61,.35);}
body:not(.chatEmbedded) .chatRadioBar__play.is-playing{background:linear-gradient(145deg,#2777df,#1555ad);}
body:not(.chatEmbedded) .chatRadioBar__controls input[type="range"]{width:132px;min-width:90px;accent-color:#5ca1ff;}
body:not(.chatEmbedded) .chatRadioBar + .chatLayout{height:calc(100dvh - 156px);}
body:not(.chatEmbedded).hasSiteNotice .chatRadioBar + .chatLayout{height:calc(100dvh - 220px);}
@media (max-width:720px){
  body:not(.chatEmbedded) .chatRadioBar{grid-template-columns:44px minmax(0,1fr) auto;gap:8px;margin:6px 6px 0;padding:7px 8px;min-height:60px;border-radius:14px;}
  body:not(.chatEmbedded) .chatRadioBar__photo{width:44px;height:44px;border-radius:10px;}
  body:not(.chatEmbedded) .chatRadioBar__song{font-size:.72rem;}
  body:not(.chatEmbedded) .chatRadioBar__top strong{font-size:.85rem;}
  body:not(.chatEmbedded) .chatRadioBar__controls input[type="range"]{width:82px;}
  body:not(.chatEmbedded) .chatRadioBar__play,body:not(.chatEmbedded) .chatRadioBar__mute{width:34px;height:34px;}
  body:not(.chatEmbedded) .chatRadioBar + .chatLayout{height:calc(100dvh - 146px);}
}
@media (max-width:480px){
  body:not(.chatEmbedded) .chatRadioBar{grid-template-columns:40px minmax(0,1fr);}
  body:not(.chatEmbedded) .chatRadioBar__photo{width:40px;height:40px;}
  body:not(.chatEmbedded) .chatRadioBar__controls{grid-column:1/-1;justify-content:flex-end;border-top:1px solid rgba(88,164,255,.12);padding-top:6px;}
  body:not(.chatEmbedded) .chatRadioBar__controls input[type="range"]{width:min(44vw,160px);}
  body:not(.chatEmbedded) .chatRadioBar + .chatLayout{height:calc(100dvh - 188px);}
}


/* =========================================================
   V212 - Antwoorden, emoji-reacties en clipboard-afbeeldingen
   ========================================================= */
.replyBar .t{
  flex:0 0 auto;
  color:#f1cf70;
  letter-spacing:.01em;
}
.messageReactionLine{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  margin-top:5px;
}
.messageReactions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
}
.messageReactionLine .reactionAddBtn{
  width:27px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(126,171,230,.20);
  background:rgba(8,18,31,.66);
  color:#9fb5d2;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.messageReactionLine .reactionAddBtn:hover,
.messageReactionLine .reactionAddBtn:focus-visible{
  color:#ffcf58;
  border-color:rgba(255,207,88,.46);
  background:rgba(255,207,88,.08);
}
.reactionChip{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 8px;
  border-radius:999px;
  border:1px solid rgba(126,171,230,.20);
  background:rgba(11,24,41,.74);
  color:#dce9fa;
  font:inherit;
  cursor:pointer;
}
.reactionChip span{font-size:14px;line-height:1;}
.reactionChip b{font-size:11px;line-height:1;font-weight:900;color:#b7c9df;}
.reactionChip.mine{
  border-color:rgba(255,207,88,.48);
  background:rgba(255,207,88,.10);
}
.reactionPicker{
  display:none;
  width:max-content;
  max-width:100%;
  gap:4px;
  margin-top:5px;
  padding:5px;
  border:1px solid rgba(126,171,230,.22);
  border-radius:12px;
  background:rgba(4,11,20,.96);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  position:relative;
  z-index:25;
}
.reactionPicker.show{display:flex;}
.reactionPicker button{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  font-size:19px;
  cursor:pointer;
}
.reactionPicker button:hover,
.reactionPicker button:focus-visible{background:rgba(255,255,255,.08);}
.msgRow.imageOnly .messageReactionLine{margin-top:3px;}
@media (max-width:560px){
  .messageReactionLine{margin-top:4px;}
  .reactionPicker button{width:36px;height:36px;font-size:20px;}
}


/* =========================================================
   V213 - reactieknop direct vóór de berichttijd
   ========================================================= */
.msgRow .time{
  align-items:center;
}
.msgRow .time .reactionAddBtn--meta{
  width:26px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  margin:0 1px 0 0;
  border-radius:999px;
  border:1px solid rgba(126,171,230,.22);
  background:rgba(8,18,31,.68);
  color:#a9bdd7;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.msgRow .time .reactionAddBtn--meta:hover,
.msgRow .time .reactionAddBtn--meta:focus-visible{
  color:#ffcf58;
  border-color:rgba(255,207,88,.46);
  background:rgba(255,207,88,.08);
}
.msgRow .messageTimeText{
  display:inline-block;
  min-width:max-content;
}
.messageReactionLine{
  min-height:0;
  margin-top:0;
}
.messageReactionLine:not(.hasReactions){
  display:none;
}
.messageReactionLine.hasReactions{
  display:flex;
  margin-top:5px;
}
@media (max-width:560px){
  .msgRow .time .reactionAddBtn--meta{
    width:28px;
    height:26px;
    font-size:16px;
  }
}