.auth-bg:has(.legal-links) {
  place-items: stretch !important;
  padding: 0 !important;
}
.chat-bg .avatar-img {
  width: 32px;
  height: 32px;
}
.chat-bg .messages article {
  grid-template-columns: 34px 1fr;
  padding: 0.48rem 0.6rem;
}
.chat-bg .user-avatar {
  width: 23px;
  height: 23px;
}
.cam-user-button {
  order: 3;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
}
.typing-dots {
  margin-left: 0.3rem;
  color: var(--theme-secondary, #00ecf0);
  font-weight: 900;
  letter-spacing: 2px;
}
.smiley-group {
  grid-column: 1 / -1;
  position: sticky;
  top: -0.65rem;
  z-index: 2;
  padding: 0.42rem 0.5rem;
  background: #090909f2;
  color: var(--theme-secondary, #00ecf0);
  border-bottom: 1px solid var(--theme-accent, #ed001d);
  font-size: 0.76rem;
}
.channel-topic-inline[data-topic-style] {
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--topic-start) 13%, transparent), color-mix(in srgb, var(--topic-end) 13%, transparent)) !important;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.text-color {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #555;
  border-radius: 7px;
  background: #252525;
}
.text-color input {
  width: 26px;
  height: 26px;
  padding: 1px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.safety-alert {
  position: fixed;
  z-index: 9999;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 90vw);
  padding: 2rem;
  border: 3px solid var(--theme-accent, #ed001d);
  background: #050505;
  color: #fff;
  text-align: center;
  box-shadow:
    0 0 0 100vmax #000b,
    0 20px 70px #000;
}
.safety-alert strong {
  font-size: 1.5rem;
  color: #ff334d;
}
.safety-alert button {
  min-width: 160px;
}
body.chat-bg {
  -webkit-user-select: none;
  user-select: none;
}
.composer input {
  -webkit-user-select: text !important;
  user-select: text !important;
}
.chat-bg .app > header nav {
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}
.chat-bg header .admin-entry {
  order: 2;
  border-color: var(--theme-accent, #ed001d) !important;
  background: linear-gradient(135deg, var(--theme-accent, #ed001d), color-mix(in srgb, var(--theme-accent, #ed001d) 55%, #000)) !important;
  color: var(--theme-text, #fff) !important;
  font-weight: 900 !important;
}
.chat-bg header .logout-entry {
  order: 3;
}
.chat-bg header .status-bar {
  order: 1;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  gap: 0.25rem 0.6rem;
}
.chat-bg header .status-bar img {
  width: 15px;
  height: 15px;
}
.chat-bg .app {
  grid-template-rows: 82px max-content minmax(0, 1fr) 82px !important;
}
.chat-bg .app:has(#radio-player[hidden]) {
  grid-template-rows: 82px max-content minmax(0, 1fr) 0 !important;
}
.auth-bg {
  overflow: hidden !important;
}
.auth-bg:has(.legal-links) .auth-card {
  max-height: 100vh;
  overflow: hidden !important;
  padding-top: 20vh !important;
  padding-bottom: 2rem !important;
}
.auth-bg:has(.legal-links) .auth-card .form-grid {
  gap: 0.7rem;
}
.legal-links {
  font-size: 0.72rem;
  text-align: center;
  margin-top: 0.65rem !important;
}
.legal-links a {
  margin: 0 0.3rem;
}
body.chat-bg {
  background-size: var(--background-size, cover) !important;
  background-position: var(--background-position, center) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}
html:has(body.chat-bg),
.chat-bg .app,
.chat-bg .chat-layout,
.chat-bg .chat-panel {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.chat-bg .messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}
.format-buttons {
  display: flex;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.format-buttons button {
  width: 36px;
  height: 38px;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border: 1px solid #555 !important;
  border-radius: 7px !important;
  background: #252525 !important;
  color: #fff;
  font-size: 1rem;
}
.format-buttons button:hover {
  border-color: var(--theme-secondary, #00ecf0) !important;
}
.format-buttons button.active {
  background: var(--theme-accent, #ed001d) !important;
  border-color: var(--theme-secondary, #00ecf0) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--theme-secondary, #00ecf0) 60%, transparent);
}
@media (max-width: 600px) {
  .format-buttons { gap: 0.12rem; }
  .format-buttons button { width: 30px; }
}
.chat-bg .custom-player {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  align-self: center !important;
  overflow: hidden;
}
.chat-bg .custom-player[hidden] {
  display: none !important;
}
.chat-bg .custom-player .player-toggle,
.chat-bg .custom-player .player-logo {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  background: #000;
  padding: 2px;
}
@media (max-width: 760px) {
  .chat-bg .app {
    grid-template-rows: 70px max-content minmax(0, 1fr) 62px !important;
  }
  .chat-bg .app:has(#radio-player[hidden]) {
    grid-template-rows: 70px max-content minmax(0, 1fr) 0 !important;
  }
  .chat-bg .custom-player {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }
  .chat-bg .custom-player .player-toggle,
  .chat-bg .custom-player .player-logo {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Volledige mobiele chat: bediening, berichten, eigen cam en gebruikers blijven bereikbaar. */
@media (max-width: 760px) {
  .chat-bg .app {
    grid-template-rows: 58px max-content minmax(0, 1fr) 58px !important;
  }
  .chat-bg .app:has(#radio-player[hidden]) {
    grid-template-rows: 58px max-content minmax(0, 1fr) 0 !important;
  }
  .chat-bg .app > header {
    min-height: 58px !important;
    padding: 0.25rem 0.4rem !important;
    gap: 0.3rem;
  }
  .chat-bg .chat-brand,
  .chat-bg .chat-brand img {
    width: min(112px, 30vw) !important;
    height: auto !important;
    max-height: 48px !important;
  }
  .chat-bg header nav {
    min-width: 0;
    gap: 0.25rem !important;
  }
  .chat-bg header .status-bar {
    display: none !important;
  }
  .chat-bg header .admin-entry {
    padding: 0.42rem 0.48rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap;
  }
  .chat-bg .channel-bar {
    min-height: 34px;
    padding: 0.35rem 0.45rem !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .chat-bg .channel-topic-inline {
    max-width: none !important;
    overflow: visible !important;
  }
  .chat-bg .topic-edge {
    display: inline !important;
  }
  .chat-bg .chat-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(220px, 1fr) minmax(112px, 28vh) !important;
    min-height: 0 !important;
  }
  .chat-bg .chat-layout > aside.user-sidebar {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    padding: 0.4rem !important;
    overflow-y: auto !important;
    border-left: 0 !important;
    border-top: 1px solid var(--border-color, var(--theme-accent, #ed001d)) !important;
  }
  .chat-bg .user-sidebar > h2 {
    margin: 0.2rem 0 0.35rem !important;
    font-size: 0.82rem;
  }
  .chat-bg .user-row {
    padding: 0.3rem !important;
    font-size: 0.82rem;
  }
  .chat-bg .composer {
    display: grid !important;
    grid-template-columns: 42px 38px minmax(96px, 1fr) auto;
    gap: 0.32rem !important;
    padding: 0.42rem !important;
  }
  .chat-bg .composer #message {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    height: 40px;
  }
  .chat-bg .composer > button:last-child {
    grid-column: 4;
    grid-row: 1;
    padding: 0.45rem 0.6rem !important;
    font-size: 0.76rem;
  }
  .chat-bg .format-buttons {
    grid-column: 3;
    grid-row: 1;
  }
  .chat-bg .messages {
    padding: 0.35rem !important;
  }
  .chat-bg .messages article {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 0.35rem !important;
    padding: 0.35rem !important;
  }
  .chat-bg .avatar-img {
    width: 28px !important;
    height: 28px !important;
  }
  .chat-bg .custom-player {
    width: calc(100% - 0.4rem) !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0.2rem !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    gap: 0.35rem !important;
  }
}

@media (max-width: 420px) {
  .chat-bg header .admin-entry { font-size: 0; }
  .chat-bg header .admin-entry::after { content: "ADMIN"; font-size: 0.65rem; }
  .chat-bg header .logout-entry::after { content: "UIT"; }
  .chat-bg .chat-layout {
    grid-template-rows: minmax(190px, 1fr) minmax(105px, 25vh) !important;
  }
}
.auth-bg .auth-card {
  min-height: 100vh;
  width: min(430px, 100%) !important;
  margin: 0 !important;
  padding: 30vh 2.7rem 7rem !important;
  border: 0 !important;
  border-right: 3px solid #40cf9a !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.72) !important;
  box-shadow: 18px 0 55px #000 !important;
}
.auth-bg .auth-card:before {
  content: "";
  height: 62px;
  background-color: rgba(0, 0, 0, 0.86);
  background-image: url("chat4beat-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 50px;
  border-bottom: 1px solid #7d0b12;
  color: transparent;
}
.auth-bg .auth-card h1 {
  font-size: 1.35rem;
}
.auth-bg .auth-card button,
.auth-bg .auth-card .button {
  width: 100%;
  text-align: center;
  border-color: #e00014 !important;
  background: rgba(205, 0, 15, 0.82) !important;
}
.auth-bg .auth-card button:hover,
.auth-bg .auth-card .button:hover {
  background: #e00014 !important;
}
.auth-player {
  position: fixed;
  z-index: 50;
  left: 460px;
  right: 2.5%;
  bottom: 20px;
  min-height: 74px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 2px solid #67000d;
  border-radius: 999px;
  background: linear-gradient(90deg, #65000c, #98000f, #65000c);
  box-shadow: 0 10px 32px #000;
  color: #fff;
}
.auth-player button {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #79000d;
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
}
.auth-player-copy {
  min-width: 0;
  display: grid;
}
.auth-player-copy strong {
  font-size: 0.92rem;
}
.auth-player-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(1rem, 2vw, 1.55rem);
}
.auth-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-player-controls input {
  width: 105px;
  accent-color: #fff;
}
.auth-player audio {
  display: none;
}
.chat-mention {
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px var(--theme-secondary, #00ecf0);
  padding: 0 0.08rem;
}
.chat-mentioned-message {
  border-left: 3px solid var(--theme-secondary, #00ecf0) !important;
}
.chat-mentioned-message:after {
  content: "PING";
  align-self: start;
  justify-self: end;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--theme-secondary, #00ecf0);
  border-radius: 3px;
  color: var(--theme-secondary, #00ecf0);
  font-size: 0.62rem;
  font-weight: 900;
}
@media (max-width: 760px) {
  .auth-bg .auth-card {
    padding: 18vh 1.35rem 8rem !important;
    border-right: 0 !important;
    background: rgba(0, 0, 0, 0.82) !important;
  }
  .auth-player {
    left: 10px;
    right: 10px;
    bottom: 10px;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .auth-player button {
    width: 44px;
    height: 44px;
  }
  .auth-player-controls {
    display: none;
  }
}

/* RadioBot toont voortaan ook de uitgelezen stationinformatie. */
.chat-bg .radio-bot-line .station,
.chat-bg .bot-preview .station { display:inline!important; }
.chat-bg .radio-bot-line .station { color:var(--bs,#ff9d00)!important; }

.chat-tag {
  color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px var(--theme-secondary, #00ecf0);
  padding: 0 0.08rem;
}
.chat-mentioned-message:after { content: none !important; display: none !important; }

/* Chatopmaak: topic en commandoberichten ondersteunen kleur- en stijlcodes. */
.chat-color{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 1px}
.channel-topic-inline.topic-style-exact{font-weight:normal;white-space:pre-wrap;overflow-wrap:anywhere;border-bottom:0!important;text-shadow:none!important}
.channel-topic-inline.topic-style-exact b{font-weight:700}
.channel-topic-inline.topic-style-exact u{text-underline-offset:2px}
.messages article p .chat-color{border-radius:0}
.fun-action-line>span:first-child{font-weight:700}.fun-action-line em{font-style:normal}


/* Privéberichtvensters */
.user-row{cursor:pointer}.user-row[data-user-id="-1"],.user-row[data-user-id="-2"]{cursor:default}
.pm-layer{position:fixed;right:18px;bottom:92px;z-index:10030;display:flex;gap:10px;align-items:flex-end;max-width:calc(100vw - 20px);overflow-x:auto;padding:4px;pointer-events:none}
.pm-window{width:330px;max-width:92vw;height:360px;background:#07111f;border:1px solid var(--theme-accent,#ed001d);box-shadow:0 8px 28px #000b;color:#fff;display:flex;flex-direction:column;pointer-events:auto;border-radius:8px;overflow:hidden}
.pm-head{display:flex;align-items:center;gap:8px;background:#101d31;padding:8px 10px;border-bottom:1px solid #ffffff22}.pm-head strong{flex:1}.pm-close{background:transparent;color:#fff;border:0;font-size:20px;cursor:pointer}.pm-disclosure{font-size:11px;padding:5px 8px;background:#28130a;color:#ffd7a3;border-bottom:1px solid #7b4b1f}.pm-messages{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:6px}.pm-msg{padding:6px 8px;border-radius:6px;background:#102038;word-break:break-word}.pm-msg.mine{background:#17365f}.pm-msg.request{border-left:3px solid #ffb000}.pm-msg small{display:block;opacity:.6;margin-bottom:2px}.pm-form{display:flex;border-top:1px solid #ffffff22}.pm-form input{flex:1;min-width:0;background:#0a1524;color:#fff;border:0;padding:10px}.pm-form button{border:0;border-left:1px solid #ffffff22;padding:0 12px;background:var(--theme-accent,#ed001d);color:#fff;font-weight:700}
@media(max-width:700px){.pm-layer{left:6px;right:6px;bottom:82px}.pm-window{width:calc(100vw - 24px);min-width:calc(100vw - 24px);height:52vh}}

.pm-window.pm-system{border-color:#ffb000}.pm-window.pm-system .pm-head{background:#2b2004}.pm-window.pm-system .pm-disclosure{background:#332500;color:#ffe09a}.pm-window .pm-form[hidden]{display:none!important}
@media(max-width:760px){.pm-layer{bottom:70px;max-height:calc(100dvh - 82px)}.pm-window{height:min(60dvh,480px)}.mobile-user-panel,.user-sidebar{max-width:100vw}.camera-stage{max-width:100vw;overflow:auto}}

/* Luna Radio small player: strak als het aangeleverde voorbeeld, zonder buitenrand. */
.luna-player-wrap{width:min(980px,calc(100% - 20px));height:72px;min-height:72px;margin:8px auto 10px;padding:0!important;overflow:hidden;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;display:block;box-sizing:border-box}
.luna-player-wrap[hidden]{display:none!important}
.luna-player{width:100%;height:72px;min-height:72px;margin:0!important;padding:0!important;overflow:hidden;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important}
.luna-player>div{width:100%!important;max-width:100%!important;height:72px!important;min-height:72px!important;margin:0!important;border:0!important;outline:0!important;box-shadow:none!important}
.luna-player svg.lunaradioplayicon,.luna-player svg.lunaradiopauseicon{background:var(--luna-button-bg,#fff)!important;border-radius:50%!important}
.luna-player svg.lunaradioplayicon path,.luna-player svg.lunaradiopauseicon path{fill:var(--luna-button-icon,#36008f)!important}
.luna-player svg[class*="volume"] path{fill:var(--luna-volume,#6b43c8)!important}
.luna-player [class*="live"],.luna-player [class*="Live"]{color:var(--luna-live,#6b43c8)!important;fill:var(--luna-live,#6b43c8)!important}
/* Geen rand/ring rond de foto of het stationlogo. */
.luna-player img{border:0!important;outline:0!important;box-shadow:none!important}
@media(max-width:760px){.luna-player-wrap{width:calc(100% - 8px);height:60px;min-height:60px;margin:4px auto 6px}.luna-player,.luna-player>div{height:60px!important;min-height:60px!important;max-width:100%!important}}

/* Berichtenbalk: tekstgrootte instelbaar op pc en mobiel */
.text-size-buttons {
  display:flex;
  gap:.2rem;
  flex:0 0 auto;
  align-items:center;
}
.text-size-buttons button {
  width:34px;
  height:38px;
  padding:0!important;
  display:grid!important;
  place-items:center;
  border:1px solid #555!important;
  border-radius:7px!important;
  background:#252525!important;
  color:#fff!important;
  font-size:.78rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.text-size-buttons button:hover,
.text-size-buttons button:focus-visible {
  border-color:var(--theme-secondary,#00ecf0)!important;
  outline:none;
}
@media (max-width:760px) {
  .chat-bg .composer {
    grid-template-columns:42px 38px 96px 68px minmax(54px,1fr)!important;
    grid-template-rows:38px 42px!important;
  }
  .chat-bg .composer .smiley-toggle { grid-column:1!important; grid-row:1!important; }
  .chat-bg .composer .text-color { grid-column:2!important; grid-row:1!important; }
  .chat-bg .composer .format-buttons { grid-column:3!important; grid-row:1!important; width:96px!important; }
  .chat-bg .composer .text-size-buttons { grid-column:4!important; grid-row:1!important; width:68px!important; }
  .chat-bg .composer .text-size-buttons button { width:32px!important; height:38px!important; }
  .chat-bg .composer #message { grid-column:1/5!important; grid-row:2!important; height:42px!important; min-width:0!important; }
  .chat-bg .composer > button:last-child { grid-column:5!important; grid-row:2!important; height:42px!important; min-width:54px!important; padding:.3rem .4rem!important; font-size:.68rem!important; }
}
@media (max-width:360px) {
  .chat-bg .composer {
    grid-template-columns:38px 34px 88px 62px minmax(48px,1fr)!important;
    gap:.22rem!important;
  }
  .chat-bg .composer .smiley-toggle { width:38px!important; }
  .chat-bg .composer .text-color { width:34px!important; }
  .chat-bg .composer .format-buttons { width:88px!important; }
  .chat-bg .composer .format-buttons button { width:28px!important; }
  .chat-bg .composer .text-size-buttons { width:62px!important; gap:.1rem!important; }
  .chat-bg .composer .text-size-buttons button { width:30px!important; }
}

/* A-/A+ controls: vergroot/verklein ook de zichtbare chatberichten */
.messages article p,
.messages .fun-bot-line,
.messages .radio-bot-line,
.messages .request-bot-line {
  font-size: var(--chat-message-font-size,16px) !important;
  line-height: 1.45 !important;
}
.pm-messages .pm-msg { font-size: var(--chat-message-font-size,16px) !important; }


/* Mobiele smiley-picker fix: taps blijven klikbaar en Verstuur blijft bereikbaar. */
.smiley-picker,.smiley-choice,.smiley-choice img{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(max-width:760px){
  .chat-bg .composer-wrap{position:relative!important;z-index:35!important;overflow:visible!important}
  .chat-bg .smiley-picker{
    position:absolute!important;
    left:.35rem!important;right:.35rem!important;bottom:calc(100% + 4px)!important;
    width:auto!important;max-width:none!important;
    max-height:min(44vh,300px)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    z-index:120!important;
  }
  .chat-bg .smiley-choice{min-width:42px!important;min-height:42px!important;touch-action:manipulation!important}
  .chat-bg .composer>button[type="submit"]{position:relative!important;z-index:3!important;pointer-events:auto!important;touch-action:manipulation!important}
  body.smiley-picker-open .chat-bg .composer{position:relative!important;z-index:121!important}
}


/* Definitieve mobiele smileybediening: knop altijd boven overlays en echte touch-events. */
.chat-bg #smiley-toggle{position:relative!important;z-index:220!important;pointer-events:auto!important;touch-action:manipulation!important;-webkit-user-select:none;user-select:none}
@media(max-width:760px){
  .chat-bg .composer-wrap{overflow:visible!important;isolation:isolate!important}
  .chat-bg #smiley-toggle{display:grid!important;visibility:visible!important;opacity:1!important;grid-column:1!important;grid-row:1!important;width:42px!important;height:38px!important}
  .chat-bg #smiley-picker{z-index:10000!important;pointer-events:auto!important;overscroll-behavior:contain!important}
  .chat-bg #smiley-picker .smiley-choice{pointer-events:auto!important;cursor:pointer!important;-webkit-user-select:none!important;user-select:none!important}
  .chat-bg #smiley-picker .smiley-choice img{pointer-events:none!important}
}

/* Smiley-tabs + afbeelding upload */
.smiley-tabs{display:flex;gap:.25rem;overflow-x:auto;padding:.15rem .1rem .5rem;scrollbar-width:thin;grid-column:1/-1}
.smiley-tab{flex:0 0 auto!important;padding:.5rem .62rem!important;border:1px solid #444!important;background:#151515!important;color:#eee!important;font-size:.76rem!important}
.smiley-tab.active{border-color:var(--theme-accent,#ed001d)!important;background:linear-gradient(135deg,var(--theme-accent,#ed001d),#72000d)!important;color:#fff!important}
.smiley-tab-panels{grid-column:1/-1}.smiley-tab-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:.3rem}.smiley-tab-panel[hidden]{display:none!important}
.text-size-buttons .image-upload-toggle{font-size:1rem!important}
.image-upload-modal[hidden]{display:none!important}.image-upload-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72)}
.image-upload-card{width:min(460px,96vw);padding:16px;border:1px solid var(--theme-accent,#ed001d);border-radius:12px;background:#0c0c0d;color:#fff;box-shadow:0 20px 80px #000;max-height:90dvh;overflow:auto}.image-upload-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.image-upload-close{padding:.25rem .55rem!important;background:#262626!important}.image-upload-drop{display:grid;place-items:center;gap:.45rem;min-height:150px;padding:18px;border:1px dashed #666;border-radius:10px;background:#151515;cursor:pointer;text-align:center}.image-upload-icon{font-size:2rem}.image-upload-preview{display:flex;gap:12px;align-items:center;margin:12px 0;padding:10px;border:1px solid #333;border-radius:8px}.image-upload-preview img{width:80px;height:64px;object-fit:cover;border-radius:6px}.image-upload-preview div{min-width:0;display:grid}.image-upload-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-upload-send,.image-upload-cancel{width:100%;margin-top:8px}.image-upload-status{min-height:20px;margin-top:8px;color:#ffbf66;font-size:.84rem}.chat-upload-link{display:inline-block;max-width:min(520px,100%);margin-top:.35rem}.chat-upload-image{display:block;max-width:100%;max-height:420px;object-fit:contain;border:0!important;border-radius:8px}
@media(max-width:760px){.smiley-picker{width:calc(100vw - 12px)!important;max-width:none!important}.smiley-tab{font-size:.7rem!important;padding:.45rem .5rem!important}.chat-upload-image{max-height:52dvh}.image-upload-card{width:min(94vw,430px)}}

/* ===== Avatar / Gravatar lightbox - pc + mobiel ===== */
.chat-bg .avatar-zoomable{
  cursor:zoom-in!important;
  outline:none;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.chat-bg .avatar-zoomable:focus-visible{
  box-shadow:0 0 0 2px var(--theme-secondary,#00ecf0),0 0 0 4px rgba(0,0,0,.72)!important;
}
@media (hover:hover) and (pointer:fine){
  .chat-bg .avatar-zoomable:hover{transform:scale(1.06);filter:brightness(1.12)}
}
.avatar-lightbox[hidden]{display:none!important}
.avatar-lightbox{
  position:fixed;
  inset:0;
  z-index:20000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.avatar-lightbox-card{
  position:relative;
  width:min(420px,calc(100vw - 36px));
  max-height:calc(100dvh - 36px);
  display:grid;
  gap:10px;
  justify-items:center;
  padding:18px 18px 14px;
  border:1px solid var(--theme-accent,#ed001d);
  border-radius:16px;
  background:rgba(8,8,10,.96);
  box-shadow:0 22px 80px #000;
  overflow:auto;
}
.avatar-lightbox-image{
  display:block;
  width:min(340px,78vw);
  height:min(340px,78vw);
  max-width:340px;
  max-height:340px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--theme-accent,#ed001d);
  background:#111;
  box-shadow:0 0 0 4px rgba(255,255,255,.05),0 12px 38px #000;
}
.avatar-lightbox-name{
  max-width:100%;
  color:var(--theme-text,#f5f5f5);
  font-weight:800;
  text-align:center;
  overflow-wrap:anywhere;
}
.avatar-lightbox-close{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  font-size:26px!important;
  line-height:1!important;
  z-index:2;
}
body.avatar-lightbox-open{overflow:hidden!important}
@media(max-width:760px){
  .avatar-lightbox{padding:12px}
  .avatar-lightbox-card{width:min(94vw,390px);max-height:calc(100dvh - 24px);padding:16px 14px 12px}
  .avatar-lightbox-image{width:min(76vw,300px);height:min(76vw,300px);max-width:300px;max-height:300px}
}
@media(max-width:360px){
  .avatar-lightbox-image{width:min(72vw,250px);height:min(72vw,250px)}
}

/* V89 - privévenster altijd volledig binnen chat/viewport, zonder overlap of afsnijden */
.chat-bg .pm-layer{
  position:fixed!important;
  left:auto!important;
  right:314px!important;
  bottom:86px!important;
  z-index:2147482000!important;
  width:auto!important;
  max-width:calc(100vw - 330px)!important;
  max-height:calc(100dvh - 110px)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding:6px!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}
.chat-bg .pm-window{
  position:relative!important;
  flex:0 0 min(360px,calc(100vw - 350px))!important;
  width:min(360px,calc(100vw - 350px))!important;
  min-width:280px!important;
  max-width:360px!important;
  height:min(430px,calc(100dvh - 135px))!important;
  min-height:300px!important;
  max-height:430px!important;
  margin:0!important;
  border:1px solid var(--theme-accent,#ed001d)!important;
  border-radius:10px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  pointer-events:auto!important;
}
.chat-bg .pm-head{flex:0 0 auto!important;min-height:52px!important;padding:8px 10px!important;box-sizing:border-box!important}
.chat-bg .pm-close{flex:0 0 46px!important;width:46px!important;height:46px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid var(--theme-accent,#ed001d)!important;border-radius:8px!important}
.chat-bg .pm-disclosure{flex:0 0 auto!important;line-height:1.35!important;padding:7px 9px!important;box-sizing:border-box!important}
.chat-bg .pm-messages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important}
.chat-bg .pm-form{flex:0 0 44px!important;height:44px!important;min-height:44px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 72px!important;width:100%!important;box-sizing:border-box!important}
.chat-bg .pm-form input{width:100%!important;min-width:0!important;height:44px!important;box-sizing:border-box!important}
.chat-bg .pm-form button{width:72px!important;height:44px!important;padding:0 8px!important;box-sizing:border-box!important}

@media (max-width:760px){
  .chat-bg .pm-layer{
    left:6px!important;
    right:6px!important;
    bottom:74px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 86px)!important;
    padding:4px!important;
    align-items:flex-end!important;
    justify-content:center!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .chat-bg .pm-window{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:430px!important;
    height:min(56dvh,430px)!important;
    min-height:280px!important;
    max-height:calc(100dvh - 100px)!important;
  }
  .chat-bg .pm-head{min-height:48px!important}
  .chat-bg .pm-close{width:42px!important;height:42px!important;flex-basis:42px!important}
}

@media (min-width:761px) and (max-width:1050px){
  .chat-bg .pm-layer{right:274px!important;max-width:calc(100vw - 290px)!important}
  .chat-bg .pm-window{width:min(340px,calc(100vw - 310px))!important;flex-basis:min(340px,calc(100vw - 310px))!important;min-width:260px!important}
}