/* CHATLIVE.ONE — Full visual identity (matches main site) */
@import url('/fonts/tajawal.css');

:root {
  --cl-bg: #080c10;
  --cl-bg-card: #0a1120;
  --cl-bg-elevated: #111827;
  --cl-bg-input: #1e293b;
  --cl-surface-grey: #f0f2f5;
  --cl-header-dark: #0a1120;
  --cl-primary: #2563eb;
  --cl-primary-dark: #1d4ed8;
  --cl-accent: #0ea5e9;
  --cl-accent-light: #38bdf8;
  --cl-success: #22c55e;
  --cl-gold: #fbbf24;
  --cl-danger: #ef4444;
  --cl-text: #e8edf2;
  --cl-text-muted: #94a3b8;
  --cl-text-dim: #64748b;
  --cl-border: #1e293b;
  --cl-font-base: 15px;
  --cl-font-lg: 17px;
  --cl-line-height: 1.55;
}

body, html, input, textarea, select, button, p, h1, h2, h3, h4, h5, h6,
label:not(.fa):not([class*="fa-"]),
span:not(.fa):not([class*="fa-"]),
div:not(.fa):not([class*="fa-"]),
a:not(.fa):not([class*="fa-"]) {
  font-family: 'Tajawal', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CRITICAL: keep FontAwesome glyphs on icon elements (fixes broken X/box icons) */
.fa,
.fa::before,
.fa:before,
[class^="fa-"]::before,
[class*=" fa-"]::before,
[class^="fa-"]:before,
[class*=" fa-"]:before {
  font-family: 'FontAwesome' !important;
}

body, body.bg {
  background: linear-gradient(165deg, #080c10 0%, #0a1120 40%, #111827 100%) !important;
  color: var(--cl-text) !important;
  font-size: var(--cl-font-base) !important;
  line-height: var(--cl-line-height) !important;
}

/* Landing / login — unified light grey shell */
#tlogins, .login-panel, .panel-primary, .dad {
  background: var(--cl-surface-grey) !important;
  color: #1a1a1a !important;
}

#tlogins {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}
#tlogins .bg.mini {
  flex: 0 0 auto !important;
}
#tlogins .lonline,
#tlogins .cl-login-visitors {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  padding: 4px 6px !important;
  background: var(--cl-surface-grey) !important;
  background-color: var(--cl-surface-grey) !important;
  color: #1a1a1a !important;
  border-top: 1px solid #d8dee8 !important;
  outline: none !important;
  box-sizing: border-box !important;
}
#tlogins .lonline .uzr {
  width: 100% !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #e2e6ec !important;
  color: #1a1a1a !important;
}

#tlogins .nav-tabs > li > a,
#tlogins input, #tlogins textarea {
  font-size: var(--cl-font-lg) !important;
  font-weight: 500 !important;
}

#tlogins input, #tlogins textarea {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  font-size: var(--cl-font-base) !important;
}
#tlogins input::placeholder,
#tlogins textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
#tlogins > a.label.bg.d-flex.fl {
  flex: 0 0 auto !important;
  margin: 0 !important;
  background: var(--cl-header-dark) !important;
  background-color: var(--cl-header-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#tlogins .cl-login-nav {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 6px 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: var(--cl-header-dark) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}
#tlogins .cl-login-nav > li {
  flex: 1 1 0 !important;
  float: none !important;
  margin: 0 !important;
  text-align: center !important;
}
#tlogins .cl-login-nav > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 10px 4px !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px 10px 0 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
#tlogins .cl-login-nav > li.active > a,
#tlogins .cl-login-nav > li > a:hover,
#tlogins .cl-login-nav > li > a:focus {
  background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
  outline: none !important;
}
#tlogins .cl-login-panels {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 8px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  background: var(--cl-header-dark) !important;
  border: none !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
}
#tlogins .cl-login-pane {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
#tlogins .cl-login-pane.hid {
  display: none !important;
}
#tlogins .cl-login-pane.in.active {
  display: flex !important;
}
#tlogins .cl-login-input {
  flex: 1 1 140px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}
#tlogins .cl-login-submit {
  flex: 0 0 auto !important;
  min-width: 72px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}
#tlogins .cl-login-stealth {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
@media (max-width: 360px) {
  #tlogins .cl-login-nav > li > a {
    font-size: 11px !important;
    padding: 9px 2px !important;
  }
  #tlogins .cl-login-pane {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #tlogins .cl-login-submit {
    width: 100% !important;
  }
}

/* Chat message input: light, high-contrast (reverted for readability) */
#tbox, .tbox, .tboxbc, .tbox-custom {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #c7cdd6 !important;
  border-radius: 4px !important;
  font-size: var(--cl-font-base) !important;
  font-weight: 600 !important;
}
#tbox::placeholder, .tbox::placeholder, .tboxbc::placeholder, .tbox-custom::placeholder {
  color: #6b7280 !important;
}

.panel-primary > .panel-heading,
.nav-tabs > li.active > a,
.label-primary, .btn-primary {
  background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent)) !important;
  border-color: var(--cl-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.nav-tabs > li > a {
  color: var(--cl-text-muted) !important;
  background: var(--cl-bg-elevated) !important;
  font-weight: 600 !important;
}

/* Chat room interior */
#room {
  background: var(--cl-surface-grey) !important;
}

/* Chat message + user list areas: light background; avoid !important on text color so identity colors apply */
#d2, .d2, .chat-area, .lonline, #rooms, #chats {
  background: #f0f2f5 !important;
  color: #1a1a1a !important;
}
#users, #users-inroom, #users-online, #dpnl #users {
  background: #f0f2f5 !important;
  color: #111827 !important;
}

#d2 .uzr, #d2 .msg, .mi {
  font-size: var(--cl-font-base) !important;
  line-height: var(--cl-line-height) !important;
}
#room #d2 .mm:not(.hmsg):not(.cl-room-welcome):not(.cl-sys-msg) .u-topic,
#room #d2 .mm:not(.hmsg):not(.cl-room-welcome):not(.cl-sys-msg) .u-msg {
  -webkit-text-fill-color: currentColor;
}

.borderg {
  border-color: #e2e6ec !important;
}

.footer, .tablebox.footer {
  background: #eef1f5 !important;
  border-top: 1px solid #d7dce4 !important;
}

.u-topic, .u-msg {
  font-weight: 600 !important;
  font-size: var(--cl-font-base) !important;
}

/* Mic bar — single horizontal row + green speaker */
.broadcasters {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 50px !important;
  min-height: 50px !important;
  width: 100% !important;
  padding: 2px 4px !important;
  overflow: visible !important;
  position: relative !important;
}
.cl-mic-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  height: 50px !important;
  gap: 3px !important;
}
.broadcasters > div,
.broadcasters .cl-mic-slots-row.mics-container {
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
}
.cl-mic-speaker,
#muteall.cl-mic-speaker {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  margin: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  background-color: mediumseagreen !important;
  color: #000 !important;
  border-radius: 10% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}
.cl-mic-speaker span,
#muteall.cl-mic-speaker span {
  font-size: 26px !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.cl-mic-slots-row {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  direction: rtl !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  height: 46px !important;
  overflow: visible !important;
  padding: 0 2px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
}
.cl-mic-slots-row .prod,
.broadcasters .mics-container .prod,
.broadcasters > div > .prod {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
/* Vacant open seat — mic icon (always visible without JS class) */
.broadcasters .prod.fitimg:not(.mic-locked):not([id^="prod"]),
.cl-mic-slots-row .prod.mic-vacant:not(.mic-locked) {
  background-image: url(/imgs/mic-seat.svg) !important;
  background-color: #eef2f6 !important;
  border: 1px solid #cbd5e1 !important;
  background-size: contain !important;
}
.cl-mic-slots-row .prod.mic-pending {
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 768px) {
  .broadcasters {
    height: 44px !important;
    min-height: 44px !important;
    padding: 1px 2px !important;
  }
  .cl-mic-bar {
    height: 44px !important;
  }
  .cl-mic-speaker,
  #muteall.cl-mic-speaker {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  .cl-mic-speaker span,
  #muteall.cl-mic-speaker span {
    font-size: 20px !important;
  }
  .cl-mic-slots-row {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
    padding: 0 1px !important;
    height: 40px !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }
  .cl-mic-slots-row .prod,
  .broadcasters > div > .prod,
  .broadcasters .mics-container .prod {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 38px !important;
    margin: 0 !important;
  }
  .mic-dice-btn {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    top: calc(100% + 1px) !important;
    bottom: auto !important;
  }
}
/* Padlock ONLY when admin has locked the seat */
.broadcasters .prod.mic-locked::after {
  content: "🔒";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 8px;
  z-index: 100001;
  pointer-events: none;
}
.broadcasters .prod.mic-locked:not([id^="prod"]) {
  background-image: none !important;
  background-color: #e2e8f0 !important;
  opacity: 0.9;
}
.broadcasters .prod[id^="prod"] {
  border: 2px solid var(--cl-border) !important;
  background-size: cover !important;
}
/* Admin unlock menu on locked vacant seat */
.broadcasters .prod.mic-locked .evant {
  position: absolute;
  inset: 0;
  z-index: 100002;
}
.broadcasters .prod.mic-locked .evant #showpf.mic-menu-open,
.broadcasters .prod.mic-locked .evant #showpf[style*="display: block"],
.broadcasters .prod.mic-locked .evant #showpf[style*="display:block"] {
  display: flex !important;
  top: 100%;
  margin-top: 2px;
  margin-left: 0;
}

.broadcasters .prod.is_speaking,
.broadcasters .prod.mic-voice-live {
  border: 3px solid #22c55e !important;
  border-color: #22c55e !important;
  animation: micVoicePulse 0.42s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55), 0 0 20px rgba(34, 197, 94, 0.35) !important;
}

@keyframes micVoicePulse {
  from {
    border-color: #16a34a;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.45), 0 0 12px rgba(34, 197, 94, 0.2);
  }
  to {
    border-color: #4ade80;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.85), 0 0 28px rgba(34, 197, 94, 0.45);
  }
}

/* Mic-slot: show ONLY the avatar, never the username text */
.prod .evant span#name {
  display: none !important;
}

/* Mic dice — compact badge on horizontal row */
.broadcasters .prod,
.broadcasters span.prod {
  position: relative;
  margin-bottom: 0 !important;
}
.mic-dice-btn {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100002;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--cl-gold);
  background: linear-gradient(135deg, #7c3aed, var(--cl-primary));
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.mic-dice-btn.cl-dice-locked,
.mic-dice-btn:disabled {
  pointer-events: none !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.35);
}
.broadcasters .prod[id^="prod"] {
  overflow: visible !important;
}
.prod { position: relative; }

/* Draggable video panel */
.cl-video-drag-bar {
  cursor: grab;
  user-select: none;
  touch-action: none;
  background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent));
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 8px 8px 0 0;
  margin: -8px -8px 4px -8px;
}

.cl-dice-overlay {
  position: absolute;
  inset: 0;
  z-index: 100003;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 20, 0.72);
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  animation: cl-dice-shake 0.12s infinite;
}
.cl-dice-overlay.cl-dice-done { animation: none; background: rgba(8, 12, 20, 0.55); }
@keyframes cl-dice-shake {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.cl-dice-chat-msg {
  width: 100%;
  padding: 6px 10px;
  margin: 4px 0;
  background: rgba(37, 99, 235, 0.12);
  border: 1px dashed var(--cl-accent);
  border-radius: 10px;
  text-align: center;
}
.cl-dice-chat-inner { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cl-dice-chat-dice { display: flex; justify-content: center; margin: 6px 0; }
.cl-dice-chat-label { font-weight: 700; color: var(--cl-gold); text-align: center; }
.cl-dice-chat-done { border-style: solid; background: rgba(34, 197, 94, 0.12); }

/* 3D dice — compact */
.cl-real-dice-wrap {
  perspective: 120px;
  width: 36px;
  height: 36px;
  margin: 0 auto;
}
.cl-real-dice-wrap.cl-real-dice-sm {
  width: 32px;
  height: 32px;
  perspective: 100px;
}
.cl-dice-overlay .cl-real-dice-wrap {
  width: 72%;
  height: 72%;
  max-width: 100%;
  max-height: 100%;
  perspective: 90px;
}
.cl-real-dice-wrap.is-rolling .cl-real-dice {
  animation: cl-dice-spin 0.42s linear infinite;
}
.cl-real-dice-wrap.is-settling .cl-real-dice {
  animation: none !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@keyframes cl-dice-spin {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(720deg); }
}
.cl-real-dice {
  width: 32px;
  height: 32px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-dice-overlay .cl-real-dice { width: 100%; height: 100%; }
.cl-dice-overlay .cl-dice-face {
  width: 100%;
  height: 100%;
  border-radius: 18%;
}
.cl-dice-overlay .cl-dice-dot {
  width: 14%;
  height: 14%;
  margin: -7% 0 0 -7%;
}
.cl-real-dice[data-face="1"] { transform: rotateY(0deg) rotateX(0deg); }
.cl-real-dice[data-face="2"] { transform: rotateY(-90deg); }
.cl-real-dice[data-face="3"] { transform: rotateY(180deg); }
.cl-real-dice[data-face="4"] { transform: rotateY(90deg); }
.cl-real-dice[data-face="5"] { transform: rotateX(-90deg); }
.cl-real-dice[data-face="6"] { transform: rotateX(90deg); }
.cl-dice-face {
  position: absolute;
  width: 32px;
  height: 32px;
  background: linear-gradient(145deg, #fffef8, #e8e0d0);
  border: 2px solid #b8a88a;
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.25);
}
.cl-dice-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #444, #111);
  box-shadow: inset 0 -1px 2px rgba(255,255,255,0.3);
}
.cl-dice-face.f1 { transform: rotateY(0deg) translateZ(16px); }
.cl-dice-face.f2 { transform: rotateY(90deg) translateZ(16px); }
.cl-dice-face.f3 { transform: rotateY(180deg) translateZ(16px); }
.cl-dice-face.f4 { transform: rotateY(-90deg) translateZ(16px); }
.cl-dice-face.f5 { transform: rotateX(90deg) translateZ(16px); }
.cl-dice-face.f6 { transform: rotateX(-90deg) translateZ(16px); }
.cl-dice-overlay .cl-dice-face.f1 { transform: rotateY(0deg) translateZ(13px); }
.cl-dice-overlay .cl-dice-face.f2 { transform: rotateY(90deg) translateZ(13px); }
.cl-dice-overlay .cl-dice-face.f3 { transform: rotateY(180deg) translateZ(13px); }
.cl-dice-overlay .cl-dice-face.f4 { transform: rotateY(-90deg) translateZ(13px); }
.cl-dice-overlay .cl-dice-face.f5 { transform: rotateX(90deg) translateZ(13px); }
.cl-dice-overlay .cl-dice-face.f6 { transform: rotateX(-90deg) translateZ(13px); }

/* Incoming call modal */
.cl-incoming-call-modal {
  position: fixed; inset: 0; z-index: 2147483645;
  background: rgba(8, 12, 20, 0.88);
  display: flex; align-items: center; justify-content: center;
}
.cl-incoming-call-box {
  background: linear-gradient(160deg, #0f172a, #1e3a5f);
  border: 2px solid #f59e0b; border-radius: 20px;
  padding: 28px 24px; text-align: center; min-width: 280px;
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.35);
  animation: cl-alert-pulse 1.5s ease-in-out infinite;
}
.cl-incoming-call-pic {
  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px;
  background-size: cover; background-position: center;
  border: 3px solid var(--cl-gold);
}
.cl-incoming-call-title { color: var(--cl-gold); font-weight: 800; font-size: 18px; }
.cl-incoming-call-name { color: #fff; font-size: 22px; font-weight: 700; margin: 8px 0 16px; }
.cl-incoming-call-actions { display: flex; gap: 10px; justify-content: center; }
.cl-call-accept-btn, .cl-call-deny-btn {
  border: none; border-radius: 12px; padding: 12px 20px; font-weight: 800; cursor: pointer; font-size: 15px;
}
.cl-call-accept-btn { background: var(--cl-success); color: #fff; }
.cl-call-deny-btn { background: var(--cl-danger); color: #fff; }

/* YouTube mic music modal */
#cl-music-modal {
  display: none; position: fixed; inset: 0; z-index: 2147483644;
  background: rgba(8, 12, 16, 0.88); align-items: center; justify-content: center;
}
.cl-music-box {
  width: min(360px, 92vw); max-height: 80vh; overflow: auto;
  background: var(--cl-bg-card); border: 2px solid #7c3aed;
  border-radius: 16px; padding: 14px;
}
.cl-music-head { display: flex; justify-content: space-between; align-items: center; color: var(--cl-gold); font-weight: 800; margin-bottom: 10px; }
#cl-music-search {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--cl-border);
  margin-bottom: 8px;
  color: #000000 !important;
  background: #ffffff !important;
  -webkit-text-fill-color: #000000;
}
#cl-music-search::placeholder { color: #64748b !important; -webkit-text-fill-color: #64748b; }
.cl-music-result {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
  padding: 8px; margin: 4px 0; border: 1px solid var(--cl-border); border-radius: 10px;
  background: var(--cl-bg-elevated); color: var(--cl-text); cursor: pointer;
}
.cl-music-result img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
#cl-music-volume { width: 100%; margin: 8px 0; }

/* PM / call alert banner */
.cl-alert-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 2147483640;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 92vw;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  border: 2px solid var(--cl-accent);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: Tajawal, Arial, sans-serif;
}
.cl-alert-banner.cl-alert-show { transform: translateX(-50%) translateY(0); }
.cl-alert-banner.cl-alert-urgent {
  border-color: #f59e0b;
  animation: cl-alert-pulse 1.2s ease-in-out infinite;
}
@keyframes cl-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
}
.cl-alert-icon { font-size: 32px; line-height: 1; }
.cl-alert-title { color: var(--cl-gold); font-weight: 800; font-size: 15px; }
.cl-alert-msg { color: #e8edf2; font-size: 14px; margin-top: 2px; }
.cl-alert-close {
  margin-right: auto;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

/* TikTok-style like hearts */
#cl-like-float-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483630;
  overflow: hidden;
}
.cl-games-tabs { display: flex; gap: 4px; flex: 1; }
.cl-games-tab {
  flex: 1; background: transparent; border: 1px solid var(--cl-border); color: var(--cl-text);
  padding: 6px 4px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.cl-games-tab.active { background: var(--cl-accent); color: #fff; border-color: var(--cl-accent); }
.cl-spectate-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px;
  margin-bottom: 6px; background: var(--cl-bg-elevated); border: 1px solid var(--cl-border);
  border-radius: 10px; cursor: pointer; color: var(--cl-text); text-align: right;
}
.cl-spectate-row:hover { border-color: var(--cl-accent); }
.cl-spectate-icon { font-size: 28px; }
.cl-spectate-info { flex: 1; font-size: 13px; }
.cl-spectate-go { color: var(--cl-gold); font-weight: 800; font-size: 12px; white-space: nowrap; }
.cl-games-head { display: flex; align-items: center; gap: 8px; }
#cl-game-mode { color: var(--cl-gold); font-size: 13px; margin-right: auto; }

#cl-like-float-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200000;
  overflow: hidden;
}
.cl-tiktok-like {
  position: absolute;
  bottom: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(60px) scale(0.3);
  transition: none;
  animation: cl-tiktok-float 3.2s ease-out forwards;
}
.cl-tiktok-like.cl-tiktok-like-active {
  opacity: 1;
}
.cl-tiktok-like.cl-tiktok-like-out {
  animation: none;
  opacity: 0;
  transform: translateY(-240px) scale(0.7);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cl-tiktok-heart {
  font-size: 96px;
  filter: drop-shadow(0 0 18px rgba(239, 35, 60, 0.85));
  animation: cl-tiktok-heart-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cl-tiktok-like-name {
  margin-top: 6px;
  padding: 4px 14px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(239, 35, 60, 0.5);
  border-radius: 20px;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  text-shadow: 0 1px 4px #000;
}
@keyframes cl-tiktok-float {
  0% { opacity: 0; transform: translateY(40px) scale(0.4); }
  15% { opacity: 1; transform: translateY(0) scale(1.1); }
  70% { opacity: 1; transform: translateY(-120px) scale(1); }
  100% { opacity: 0; transform: translateY(-220px) scale(0.85); }
}
@keyframes cl-tiktok-heart-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
/* Mic context menu — consistent contrast & modern panel */
.broadcasters .prod .evant #showpf,
.prod .evant div[id^="showpf"] {
  background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  padding: 6px 5px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
  min-width: 92px !important;
  margin-left: -28px !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.prod .evant #showpf[style*="display: block"],
.prod .evant #showpf[style*="display:block"] {
  display: flex !important;
}
.prod #showpf br {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}
.broadcasters .prod #showpf i,
.prod #showpf i {
  display: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 5px 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  text-align: center !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  border: none !important;
  box-sizing: border-box !important;
}
.prod #showpf i.mic-menu-on {
  display: block !important;
}
.prod #showpf .sounds { background: #0284c7 !important; }
.prod #showpf .profiles { background: #2563eb !important; }
.prod #showpf .stopmic { background: #dc2626 !important; }
.prod #showpf .opencam {
  width: 100% !important;
  font-size: 11px !important;
  display: block !important;
  margin: 0 !important;
  background: #d97706 !important;
}
.prod #showpf .closeseat { background: #991b1b !important; }
.prod #showpf .unlockseat { background: #15803d !important; }

/* Public room chat — RTL for Arabic */
#room #tbox,
#room .footer .tbox.filw {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}
#room #d2 {
  direction: rtl;
  text-align: right;
  padding-right: 10px !important;
  padding-left: 6px !important;
  box-sizing: border-box !important;
}

/* Games center — left side */
#cl-games-center {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
}
#cl-room-tagline { display: none !important; }
#cl-games-btn {
  left: 14px !important;
  right: auto !important;
  top: 120px !important;
}
#cl-games-panel {
  left: 14px !important;
  right: auto !important;
  top: 176px !important;
}

/* Status & labels */
.label-warning { background: var(--cl-gold) !important; color: #000 !important; }
.label-danger, .btn-danger { background: var(--cl-danger) !important; }
.label-success, .btn-success { background: var(--cl-success) !important; }
.label-info { background: var(--cl-accent) !important; }

/* Branding footer — login page footer uses dark header tone */
.hostnm, .fr.borderg.minix {
  background: transparent !important;
  color: rgba(203, 213, 225, 0.82) !important;
  font-size: 12px !important;
}
#tlogins #cl-login-footer,
body.cl-page-login #cl-login-footer,
.cl-footer-login {
  background: var(--cl-header-dark) !important;
  background-color: #0a1120 !important;
  box-shadow: none !important;
}
#tlogins #cl-login-footer .cl-footer-line,
body.cl-page-login #cl-login-footer .cl-footer-line,
#cl-site-footer .cl-footer-line,
.cl-site-footer .cl-footer-line,
.cl-footer-line.minix {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
  width: 100% !important;
  padding: 8px 10px !important;
  margin: 0 !important;
}

.hostnm a, .cl-footer-link { color: var(--cl-accent-light) !important; font-weight: 700; text-decoration: none !important; }
.hostnm a:hover, .cl-footer-link:hover { text-decoration: underline !important; }

body.cl-page-login .center-block.dad {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}
body.cl-page-login #tlogins {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  float: none !important;
  width: 100% !important;
}
#tlogins .cl-login-panels,
#tlogins > a.label.bg.d-flex.fl,
#tlogins .isbnr {
  flex: 0 0 auto !important;
}
body.cl-page-login,
body.cl-page-login #tlogins,
body.cl-page-login #tlogins.light,
body.cl-page-login #tlogins.border.light {
  background: var(--cl-surface-grey) !important;
}
body.cl-page-login #cl-login-footer .cl-footer-line,
body.cl-page-login .cl-footer-login .cl-footer-line {
  color: #ffffff !important;
}
body.cl-page-login #cl-login-footer .cl-footer-text,
body.cl-page-login #cl-login-footer .cl-footer-link {
  color: #ffffff !important;
}
body.cl-page-login #cl-login-footer .cl-footer-link {
  color: #7dd3fc !important;
}
#tlogins #cl-login-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
}
body.cl-page-login #cl-login-footer,
.cl-footer-login {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  margin-top: auto !important;
  padding: 0 !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--cl-header-dark) !important;
  background-color: #0a1120 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  z-index: 1001 !important;
  position: sticky !important;
  bottom: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
}
body.cl-page-login #cl-login-footer .cl-footer-line,
body.cl-page-login .cl-footer-login .cl-footer-line {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
}
body.cl-page-login #cl-login-footer .cl-footer-text,
body.cl-page-login #cl-login-footer .cl-footer-link {
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: inline !important;
}
body.cl-page-login #cl-login-footer .cl-footer-link {
  color: #7dd3fc !important;
  font-weight: 600 !important;
}

.center-block.dad {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#cl-site-footer,
.cl-site-footer:not(.cl-footer-login) {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  text-align: center !important;
  border-top: none !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  z-index: 12 !important;
  overflow: visible !important;
  min-height: 24px !important;
}
body.cl-in-room #cl-site-footer,
body.cl-in-lobby #cl-site-footer {
  background: var(--cl-header-dark) !important;
  background-color: var(--cl-header-dark) !important;
}
.cl-footer-line {
  width: 100% !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  background: transparent !important;
  border: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}
#cl-login-footer .cl-footer-line,
body.cl-page-login .cl-footer-line {
  color: #ffffff !important;
}
#cl-login-footer .cl-footer-text,
body.cl-page-login .cl-footer-text,
#cl-login-footer .cl-footer-line .cl-footer-text {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
#cl-login-footer .cl-footer-link,
body.cl-page-login .cl-footer-link {
  color: #7dd3fc !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.cl-footer-link:hover {
  color: #7dd3fc !important;
  text-decoration: underline !important;
}
body.cl-in-room #cl-site-footer {
  flex-shrink: 0 !important;
  background: var(--cl-header-dark) !important;
  background-color: var(--cl-header-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Room club watermark */
.cl-chat-feed-shell {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}
#chat-watermark-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: none;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
}
.cl-chat-watermark-img,
#chat-watermark-img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(72%, 280px) !important;
  height: min(55vh, 280px) !important;
  object-fit: contain !important;
  opacity: 0.12 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
#d2.cl-chat-feed,
#room #d2,
#room .cl-chat-feed-shell {
  position: relative !important;
  z-index: 1 !important;
  background-image: none !important;
  background-color: #f0f2f5 !important;
}
#room #d2 .u-pic,
#room #d2 .fitimg.u-pic {
  background-image: none !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
#room #d2 .u-pic img.u-pic-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
body.cl-in-room #cl-site-footer,
body.cl-in-lobby #cl-site-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 20 !important;
  background: var(--cl-header-dark) !important;
  background-color: var(--cl-header-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.cl-in-room #cl-site-footer .cl-footer-line,
body.cl-in-lobby #cl-site-footer .cl-footer-line,
#cl-site-footer .cl-footer-line.minix,
.cl-site-footer .cl-footer-line {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.cl-in-room #cl-site-footer .cl-footer-text,
body.cl-in-room #cl-site-footer .cl-footer-line,
body.cl-in-room #cl-site-footer .cl-footer-line .cl-footer-text,
body.cl-in-lobby #cl-site-footer .cl-footer-text,
body.cl-in-lobby #cl-site-footer .cl-footer-line,
body.cl-in-lobby #cl-site-footer .cl-footer-line .cl-footer-text {
  color: #ffffff !important;
}
body.cl-in-room #cl-site-footer .cl-footer-link,
body.cl-in-lobby #cl-site-footer .cl-footer-link {
  color: #7dd3fc !important;
}
#room #d2 .u-pic.hand,
#room #d2 .u-topic.hand,
#room #d2 img.u-pic-img.hand {
  cursor: pointer !important;
}
#room #d2 .u-topic.hand:hover {
  text-decoration: underline;
  opacity: 0.92;
}

/* Video panel — created by video-camera.js */
.cl-video-panel,
#video-call-panel {
  position: fixed; bottom: 80px; right: 12px; z-index: 2147483646;
  display: none; flex-direction: column; gap: 6px;
  background: #0a1120; border: 2px solid var(--cl-accent);
  border-radius: 12px; padding: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  max-width: 220px; touch-action: none;
}
.cl-video-panel video,
#video-call-panel video { width: 200px; height: 150px; object-fit: cover; border-radius: 8px; background: #000; }
.cl-cam-picker-root {
  position: fixed; inset: 0; z-index: 2147483647; display: none;
  background: rgba(8,12,16,0.88); align-items: center; justify-content: center;
}
.cl-cam-picker-box { background: #0a1120; border: 2px solid #0ea5e9; border-radius: 16px; padding: 24px; min-width: 280px; text-align: center; }
.cl-cam-picker-box h3 { color: #fbbf24; margin: 0 0 16px; }
.cl-cam-picker-box button { display: block; width: 100%; margin: 8px 0; padding: 14px; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; }

#camera-picker-modal {
  display: none; position: fixed; inset: 0; z-index: 9999999;
  background: rgba(8, 12, 16, 0.88); align-items: center; justify-content: center;
}
#camera-picker-modal.active { display: flex; }
.camera-picker-box {
  background: var(--cl-bg-card); border: 2px solid var(--cl-accent);
  border-radius: 16px; padding: 24px; text-align: center; min-width: 280px;
}
.camera-picker-box h3 { color: var(--cl-gold); margin: 0 0 16px; font-size: 20px; }
.camera-picker-box button {
  display: block; width: 100%; margin: 8px 0; padding: 14px;
  border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.cam-btn-front { background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent)); color: #fff; }
.cam-btn-rear { background: var(--cl-bg-elevated); color: var(--cl-text); border: 1px solid var(--cl-border) !important; }
.cam-btn-cancel { background: transparent; color: var(--cl-text-muted); }

.btn-video-toggle {
  background: linear-gradient(135deg, #7c3aed, var(--cl-primary)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  min-width: 36px !important;
  font-size: 14px !important;
}

/* Games center */
#cl-games-btn {
  position: fixed; top: 120px; bottom: auto; left: 14px; right: auto; z-index: 999990;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cl-primary), var(--cl-accent));
  border: 3px solid var(--cl-gold); color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 24px rgba(37,99,235,0.5);
}
#cl-games-panel {
  display: none; position: fixed; top: 176px; bottom: auto; left: 14px; right: auto; z-index: 999991;
  width: 300px; background: var(--cl-bg-card); border: 2px solid var(--cl-accent);
  border-radius: 16px; padding: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
#cl-games-panel.open { display: block; }
.cl-games-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--cl-gold); font-weight: 800; }
.cl-games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-game-card {
  background: var(--cl-bg-elevated); border: 1px solid var(--cl-border);
  border-radius: 12px; padding: 12px 8px; cursor: pointer; color: var(--cl-text);
  font-weight: 700; text-align: center; transition: border-color 0.2s;
}
.cl-game-card:hover { border-color: var(--cl-accent); }
.cl-game-icon { display: block; font-size: 28px; margin-bottom: 4px; }
#cl-games-modal {
  display: none; position: fixed; inset: 2%; z-index: 9999999;
  flex-direction: column; background: var(--cl-bg); border: 2px solid var(--cl-accent); border-radius: 16px;
}
.cl-games-modal-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--cl-bg-elevated); color: var(--cl-gold); font-weight: 700;
}
#cl-game-frame { flex: 1; border: none; width: 100%; min-height: 60vh; background: #0a0e12; }
#cl-game-loading { padding: 24px; text-align: center; color: var(--cl-gold); font-weight: 700; }
.cl-g-btn-accept { background: var(--cl-success); color: #fff; border: none; padding: 10px; border-radius: 8px; margin: 4px; font-weight: 700; cursor: pointer; }
.cl-g-btn-deny { background: var(--cl-danger); color: #fff; border: none; padding: 10px; border-radius: 8px; margin: 4px; font-weight: 700; cursor: pointer; }

#cl-games-pick-modal {
  display: none; position: fixed; inset: 0; z-index: 9999998;
  background: rgba(8, 12, 16, 0.82); align-items: center; justify-content: center;
}
.cl-games-pick-box {
  width: min(340px, 92vw); max-height: 70vh; overflow: auto;
  background: var(--cl-bg-card); border: 2px solid var(--cl-accent);
  border-radius: 16px; padding: 14px;
}
.cl-games-pick-head { display: flex; justify-content: space-between; align-items: center; color: var(--cl-gold); font-weight: 800; margin-bottom: 8px; }
.cl-games-pick-hint { font-size: 13px; color: var(--cl-text-muted); margin: 0 0 10px; }
.cl-games-empty { text-align: center; color: var(--cl-text-muted); padding: 12px; }
.cl-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin: 4px 0; border-radius: 10px;
  background: var(--cl-bg-elevated); cursor: pointer;
}
.cl-pick-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
/* أسماء الزوار في قائمة التحدي/الألعاب بلون فاتح واضح فوق الخلفية الغامقة */
.cl-pick-row span { flex: 1; font-weight: 600; color: #f5f7fa !important; }
.cl-pick-row span * { color: #f5f7fa !important; }
#cl-pick-send { width: 100%; margin-top: 10px; }

/* Images — prevent broken X */
img { image-rendering: auto; }
img[src=""], img:not([src]) { visibility: hidden; }

/* Entry effects */
#enterking, #enterqueen {
  position: fixed !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  width: 260px !important;
  height: 268px !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 2147483640 !important;
  display: none;
}
#enterking.cl-entry-in,
#enterking.cl-entry-out,
#enterqueen.cl-entry-in,
#enterqueen.cl-entry-out {
  display: block !important;
}
#enterking .king_gif, #enterqueen .king_gif {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#enterking .king_overlay, #enterqueen .king_overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 10px 14px !important;
  box-sizing: border-box !important;
}
#enterking .king_pic, #enterqueen .king_pic {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 76px !important;
  height: 76px !important;
  margin: 62px 0 6px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  z-index: 15 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  border: 3px solid #fff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
  flex-shrink: 0 !important;
}
#enterking .king_flag, #enterqueen .king_flag {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}
#enterking .king_topic, #enterqueen .king_topic {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 4px !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: bold !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-shadow: 0 1px 5px #000, 0 0 2px #000 !important;
  z-index: 17 !important;
}
#enterking.cl-entry-in, #enterqueen.cl-entry-in {
  animation: cl-entry-slide-in 0.22s ease-out forwards;
}
#enterking.cl-entry-out, #enterqueen.cl-entry-out {
  animation: cl-entry-slide-out 0.28s ease-in forwards;
}
@keyframes cl-entry-slide-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cl-entry-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}
/* Optimistic UI */
.broadcasters .prod.mic-pending { opacity: 0.88; }
.broadcasters .prod.mic-optimistic { box-shadow: 0 0 0 2px var(--cl-gold); }
body.cl-room-switching #d2 { opacity: 0.92; transition: opacity 0.12s; }

/* TikTok effects */
.tt-effect-layer, .tt-flash-bg, .tt-neon-text {
  display: block !important; opacity: 1 !important; visibility: visible !important;
}

/* Popover profile */
.popover.right {
  background-color: var(--cl-bg-card) !important;
  border: 1px solid var(--cl-border) !important;
}
.popover.right .popover-title {
  background: var(--cl-bg-elevated) !important;
  color: var(--cl-text) !important;
}
.popover.right .popover-content {
  background: var(--cl-bg-card) !important;
  color: var(--cl-text) !important;
}

/* Room list cards */
.rmr .borderg, #rooms .label-primary {
  font-weight: 600 !important;
}

#tlogins.cl-login-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html,
body.cl-in-room {
  height: 100% !important;
  max-height: 100% !important;
}
body.cl-in-room {
  overflow: hidden !important;
  background: #f0f2f5 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.cl-in-room > .dad,
body.cl-in-room .center-block.dad,
body.cl-in-room .dad.cl-app-active {
  background: #f0f2f5 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  float: none !important;
}
body.cl-in-room #room,
body.cl-in-room #room.break,
body.cl-in-room #room.c-flex,
body.cl-in-room #room.fr {
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.cl-in-lobby {
  overflow: hidden !important;
  background: var(--cl-header-dark) !important;
  color: #ffffff !important;
}
body.cl-in-lobby .dad {
  max-width: 100% !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background: var(--cl-header-dark) !important;
}
body.cl-in-lobby #cl-room-lobby {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* App shell after login */
.dad.cl-app-active {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  height: 100% !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}
.dad.cl-app-active #cl-room-lobby,
.dad.cl-app-active #room {
  float: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.dad.cl-app-active {
  position: relative !important;
}

/* In-room chat layout — flex column, bottom bar flush to viewport */
.dad.cl-app-active #room {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 1 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f0f2f5 !important;
}
body.cl-in-room .dad.cl-app-active #room > .broadcasters {
  flex: 0 0 auto !important;
}
body.cl-in-room .dad.cl-app-active #room #d2,
body.cl-in-room .dad.cl-app-active #room > .d2 {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
body.cl-in-room .cl-room-bottom-chrome::after,
body.cl-in-room #d0::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.cl-in-room .cl-room-bottom-chrome,
body.cl-in-room .cl-room-bottom-chrome .footer,
body.cl-in-room .cl-room-bottom-chrome .tablebox.footer,
body.cl-in-room #d0,
body.cl-in-room #d0 .ae,
body.cl-in-room #d0 button {
  float: none !important;
  clear: none !important;
}
.cl-room-bottom-chrome {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  background: #eef1f5 !important;
  border-top: 1px solid #d7dce4 !important;
  box-sizing: border-box !important;
}
body.cl-in-room .cl-room-bottom-chrome {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}
body.cl-in-room .cl-room-bottom-chrome .footer,
body.cl-in-room .cl-room-bottom-chrome .tablebox.footer,
body.cl-in-room #d0,
body.cl-in-room #d0 .ae,
body.cl-in-room #d0 button {
  float: none !important;
  clear: none !important;
  margin-bottom: 0 !important;
}
body.cl-in-room .cl-room-bottom-chrome #d0,
body.cl-in-room .cl-room-bottom-chrome .room-bottom-nav {
  padding: 2px 4px 0 !important;
  margin: 0 !important;
}
.cl-room-bottom-chrome .footer,
.cl-room-bottom-chrome .tablebox.footer {
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 !important;
}
.cl-room-bottom-chrome #d0,
.cl-room-bottom-chrome .room-bottom-nav {
  border-top: 1px solid #d7dce4 !important;
  margin: 0 !important;
}
#room .isreply {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#dpnl.dpnl {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 300 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #f0f2f5 !important;
  flex-direction: column !important;
  transform-origin: right center;
}
#dpnl .cl-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  border-bottom: 1px solid #d8dee8 !important;
  background: var(--cl-surface-grey) !important;
}
#dpnl .cl-panel-header .pnhead {
  flex: 1 1 auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  text-align: start !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 52px) !important;
  color: #0a0a0a !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  -webkit-text-fill-color: #0a0a0a !important;
  opacity: 1 !important;
}
#dpnl .cl-panel-close {
  flex: 0 0 auto !important;
  float: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 6px 10px !important;
  width: auto !important;
  min-width: 36px !important;
  border-radius: 6px !important;
  border: 1px solid #8b1e1e !important;
}
#dpnl.dpnl:not([style*="display: none"]) {
  display: flex !important;
}
#dpnl.dpnl.cl-panel-slide-in {
  animation: cl-panel-slide-in 0.22s ease-out forwards;
}
@keyframes cl-panel-slide-in {
  from {
    opacity: 0.92;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#dpnl .tab-pane.active:not(.hid):not(#rooms):not(#settings) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  background: var(--cl-surface-grey) !important;
  color: #1a1a1a !important;
}
#dpnl .tab-pane.hid,
#dpnl #wall.tab-pane.hid,
#dpnl #users.tab-pane.hid,
#dpnl #chats.tab-pane.hid,
#dpnl #settings.tab-pane.hid,
#dpnl #rooms.tab-pane.hid {
  display: none !important;
  visibility: hidden !important;
}
#dpnl #rooms.tab-pane.active,
#dpnl #rooms.active:not(.hid) {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#room #d2 .mm.hmsg .u-pic,
#room #d2 .mm.hmsg .u-ico,
#room #d2 .mm.cl-room-welcome .u-pic,
#room #d2 .mm.cl-room-welcome .u-ico,
#room #d2 .mm.hmsg .d-flex.fr,
#room #d2 .mm.cl-room-welcome .d-flex.fr {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#room #d2 .mm.hmsg .uzr.flex-fill,
#room #d2 .mm.cl-room-welcome .uzr.flex-fill {
  padding-right: 14px !important;
  padding-left: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
#room #d2 .mm.hmsg,
#room #d2 .mm.cl-room-welcome,
#room #d2 .mm.hmsg.uzr,
#room #d2 .mm.cl-room-welcome.uzr {
  padding: 6px 12px 6px 8px !important;
  margin: 4px 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
#room #d2 .mm.hmsg .u-msg,
#room #d2 .mm.cl-room-welcome .u-msg,
#room #d2 .hmsg .u-msg,
#room #d2 .cl-room-welcome .u-msg {
  padding: 6px 14px 6px 10px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: right !important;
  direction: rtl !important;
  unicode-bidi: plaintext;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#room #d2 .mm.hmsg .u-topic,
#room #d2 .mm.cl-room-welcome .u-topic {
  padding-right: 8px !important;
  padding-left: 6px !important;
}
#room #d2 .mm.hmsg .roomh img,
#room #d2 .mm.cl-room-welcome .roomh img {
  display: none !important;
}

#dpnl #rooms.active:not(.hid) > .bgg {
  flex: 0 0 auto !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#dpnl #rooms.active:not(.hid) .rmr {
  width: 100% !important;
  min-height: 120px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}
#dpnl #rooms.active:not(.hid) .rmr .room {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}
#dpnl #rooms.active:not(.hid) .rmr .room .u-pic,
#dpnl #rooms.active:not(.hid) .rmr .room .st,
#dpnl #rooms.active:not(.hid) .rmr .room .roomhas,
#dpnl #rooms.active:not(.hid) .rmr .room .u-msg,
#dpnl #rooms.active:not(.hid) .rmr .room .c-flex {
  display: none !important;
}
#dpnl #rooms.active:not(.hid) .rmr .room .u-topic {
  color: #ffffff !important;
  font-weight: 600 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#dpnl #rooms.active:not(.hid) .rmr .room .u-msg {
  color: #cbd5e1 !important;
}
body.cl-side-panel-open #room .cl-room-bottom-chrome > .footer,
body.cl-side-panel-open #room .cl-room-bottom-chrome > .tablebox.footer {
  display: none !important;
}
body.cl-side-panel-open .mic-dice-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.dad.cl-app-active #room > .broadcasters {
  flex: 0 0 auto !important;
  float: none !important;
}
.dad.cl-app-active #room #d2 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  float: none !important;
}
.dad.cl-app-active #room > .footer,
.dad.cl-app-active #room > .tablebox.footer,
.cl-room-bottom-chrome > .footer,
.cl-room-bottom-chrome > .tablebox.footer {
  flex: 0 0 auto !important;
  float: none !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 3px 5px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  gap: 3px !important;
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
}
body.cl-in-room .cl-room-bottom-chrome > .footer,
body.cl-in-room .cl-room-bottom-chrome > .tablebox.footer {
  padding-bottom: 3px !important;
  margin-bottom: 0 !important;
}
.dad.cl-app-active #room #d0,
.dad.cl-app-active #room .room-bottom-nav,
.cl-room-bottom-chrome #d0,
.cl-room-bottom-chrome .room-bottom-nav {
  flex: 0 0 auto !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 2px 4px 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 2px !important;
  background: #eef1f5 !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
body.cl-in-room .cl-room-bottom-chrome #d0,
body.cl-in-room .cl-room-bottom-chrome .room-bottom-nav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.dad.cl-app-active #room #d0 .ae,
.dad.cl-app-active #room #d0 .label-primary,
body.cl-in-room #d0 .cl-room-nav-btn,
body.cl-in-room #d0 .ae.label,
body.cl-in-room #d0 .ae {
  float: none !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 3px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  border-radius: 5px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 0 !important;
  height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
}
body.cl-in-room #d0 .cl-room-nav-btn span,
body.cl-in-room #d0 .ae span {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}
#room > .footer .tbox,
#room > .tablebox.footer .tbox,
#room #tbox {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-height: 36px !important;
  height: 36px !important;
  max-height: 72px !important;
  margin-top: 0 !important;
  padding: 8px 10px !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
  resize: none !important;
}
#room > .footer .btn,
#room > .tablebox.footer .btn {
  flex: 0 0 auto !important;
  float: none !important;
  margin-top: 0 !important;
  height: 36px !important;
  min-width: 36px !important;
}

@supports (height: 100dvh) {
  body.cl-in-room,
  body.cl-in-room .dad.cl-app-active {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
  }
  body:not(.cl-in-room) .dad.cl-app-active {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
  }
}

@media (max-width: 600px) {
  body.cl-in-room {
    overflow: hidden !important;
  }
  body.cl-in-room .center-block.dad,
  body.cl-in-room .dad.cl-app-active {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body.cl-in-room .cl-room-bottom-chrome {
    max-width: 100% !important;
    margin-top: auto !important;
  }
}
.dad.cl-app-active #enterking {
  float: none !important;
}

/* Settings panel — compact professional layout */
#users .uzr .u-pic,
#users .usr .u-pic,
#dpnl #users .u-pic {
  position: relative !important;
  min-width: 52px !important;
  width: 52px !important;
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #e8ecf1 !important;
  display: block !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
#users-inroom.cl-users-inroom {
  width: 100%;
  display: block;
  flex-shrink: 0;
}
#users-inroom.cl-users-inroom .uzr {
  width: 100%;
  box-sizing: border-box;
}
#users-online.cl-users-online,
#users .usr.cl-users-online {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
#dpnl #users .ninr {
  display: block !important;
  width: 100% !important;
  margin: 6px 0 4px !important;
  padding: 5px 8px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-weight: 700 !important;
}
#users .uzr .u-pic img.u-pic-img,
#users .usr .u-pic img.u-pic-img,
#dpnl #users .u-pic img.u-pic-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  background: #e8ecf1 !important;
}
#users .uzr .fa-comments,
#users-inroom .uzr .fa-comments,
#users-online .uzr .fa-comments,
#dpnl #users .uzr .fa-comments {
  display: none !important;
}
#users .uzr .muted.fa,
#users-inroom .uzr .muted.fa,
#users-online .uzr .muted.fa {
  display: none !important;
}

#settings.cl-settings-panel {
  height: 100%;
  width: 100%;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#settings .cl-settings-form {
  background: transparent;
  width: 100%;
  padding: 6px 6px 2px;
  margin: 0 0 2px;
  box-sizing: border-box;
}
#settings .cl-settings-label {
  display: inline-block;
  width: 100%;
  max-width: 140px;
  margin: 4px 0 2px;
  padding: 2px 6px;
  font-size: 12px;
}
#settings .cl-settings-input {
  width: 100%;
  margin: 0 0 4px;
  box-sizing: border-box;
}
#settings .cl-settings-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 4px 0;
  min-height: 32px;
  flex-wrap: nowrap;
}
#settings .cl-settings-row .cl-settings-label {
  flex: 0 0 38%;
  max-width: 140px;
  min-width: 108px;
  margin: 0;
  align-self: center;
  line-height: 1.25;
  white-space: nowrap;
}
#settings .cl-color-swatch-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 28px;
  margin: 0;
  pointer-events: auto !important;
  z-index: 2;
}
#settings .cl-color-swatch-wrap input[type="color"].cl-native-color,
#settings .cl-color-swatch-wrap input[type="color"].cpick,
#settings .cl-color-swatch,
#settings .cl-settings-row .cpick {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 72px !important;
  min-width: 72px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  align-self: center;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  z-index: 3 !important;
  border: 1px solid #64748b !important;
  background: transparent !important;
}
#settings .cl-palette-btn {
  flex: 0 0 28px;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  z-index: 3 !important;
  color: #ffffff !important;
  background: #334155 !important;
  border-color: #475569 !important;
}
#dpnl #settings.tab-pane.active:not(.hid),
#dpnl #settings.cl-settings-panel.active:not(.hid) {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}
.ppop-color-container {
  pointer-events: auto !important;
  z-index: 20001 !important;
}
.ppop-color-container .colorSelector {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.ppop-color-container .cl-custom-hex {
  pointer-events: auto !important;
}
.clickaway-container {
  background: transparent !important;
}
#settings .cl-settings-save,
#settings .cl-settings-select,
#settings .cl-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 8px);
  margin: 2px 4px !important;
  padding: 5px 8px !important;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.2;
  min-height: 32px !important;
}
#settings .cl-settings-select {
  display: block;
}
#settings .cl-settings-btn-toggle {
  background: #f0f4f8 !important;
  color: #1a2332 !important;
  border: 1px solid #b8c4d4 !important;
  font-weight: 600 !important;
}
#settings .cl-settings-btn-toggle .fa {
  color: #1a2332 !important;
}
#settings .cl-settings-avatar {
  width: 28px;
  height: 28px;
  margin: 0 4px 0 0;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
#settings .cl-settings-btn-emoji { background: #ffeb3b; color: #111; }
#settings .cl-settings-btn-music { background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; }
#settings .cl-settings-btn-advanced { background: linear-gradient(45deg, #d9534f, #f8f8ff); color: #000; font-weight: bold; }
#settings br { display: none; }

/* Modal / popup headers — close button at far edge */
.modal-header,
#upro .modal-header,
.cl-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.modal-header .close,
.modal-header .pphide,
.modal-header .btn-danger.fr,
.modal-header .fa-close {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.modal-header > :first-child:not(.close):not(.btn):not(.fa-close),
.modal-header .modal-title {
  flex: 1 1 auto !important;
  margin: 0 !important;
  text-align: start !important;
}

/* Settings — الزخرفة / الحالة inputs must stay dark and readable */
#settings input.stopic,
#settings input.smsg,
#settings .stopic,
#settings .smsg {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background-color: #ffffff !important;
  border: 1px solid #c7cdd6 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
  caret-color: #111827 !important;
}
#settings input.stopic::placeholder,
#settings input.smsg::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

/* Room selection lobby — dark premium layout */
.cl-room-lobby {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #060b14 0%, #0a1120 38%, #111827 100%) !important;
  overflow: hidden;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  z-index: 200;
  position: relative;
  color: #ffffff !important;
}
.cl-room-lobby::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(56, 189, 248, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(251, 191, 36, 0.08), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.cl-room-lobby > * {
  position: relative;
  z-index: 1;
}
.cl-lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 16px 14px;
  background: rgba(10, 17, 32, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
}
.cl-lobby-brand-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  transform: scale(1.08);
  transform-origin: right center;
}
.cl-lobby-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 183, 3, 0.35);
  box-shadow: 0 0 24px rgba(255, 183, 3, 0.15);
  flex-shrink: 0;
}
.cl-lobby-ball {
  width: 38px;
  height: 38px;
  animation: clLobbyBallSpin 5s linear infinite;
}
@keyframes clLobbyBallSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.cl-lobby-brand-text {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.6px;
  line-height: 1;
  white-space: nowrap;
  font-family: "Arial Black", "Segoe UI", sans-serif;
}
.cl-lobby-brand-gold {
  color: #ffb703 !important;
  -webkit-text-fill-color: #ffb703 !important;
  text-shadow: 0 0 22px rgba(255, 183, 3, 0.45);
}
.cl-lobby-brand-dot {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
.cl-lobby-brand-white {
  color: #ef233c !important;
  -webkit-text-fill-color: #ef233c !important;
  text-shadow: 0 0 18px rgba(239, 35, 60, 0.35);
}
.cl-lobby-refresh {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2) !important;
}
.cl-lobby-hero {
  padding: 20px 16px 12px;
  text-align: center;
  background: transparent !important;
}
.cl-lobby-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
}
.cl-lobby-title-main {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.cl-lobby-sub {
  margin: 0 0 4px;
  font-size: 16px;
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
.cl-lobby-hint {
  margin: 0;
  font-size: 13px;
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
.cl-lobby-user {
  color: #fbbf24 !important;
  -webkit-text-fill-color: #fbbf24 !important;
  font-weight: 800;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.4);
}
.cl-lobby-loading {
  text-align: center;
  padding: 12px;
  color: #cbd5e1 !important;
  font-size: 14px;
}
.cl-lobby-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: start;
}
.cl-lobby-card {
  display: flex;
  gap: 12px;
  width: 100%;
  text-align: right;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  padding: 12px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}
.cl-lobby-card:hover,
.cl-lobby-card:focus {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.18);
  outline: none;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(255, 255, 255, 0.06)) !important;
}
.cl-lobby-card-pic-wrap {
  flex-shrink: 0;
  padding: 2px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.45), rgba(56, 189, 248, 0.35));
}
.cl-lobby-card-pic {
  width: 68px;
  min-width: 68px;
  height: 68px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
  border: 2px solid rgba(15, 23, 42, 0.85);
}
.cl-lobby-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.cl-lobby-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cl-lobby-title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 15px;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
.cl-lobby-count {
  flex: 0 0 auto;
  font-size: 12px !important;
  padding: 3px 10px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25);
}
.cl-lobby-about {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #94a3b8 !important;
}
.cl-lobby-lock,
.cl-lobby-mic {
  margin-left: 4px;
  font-size: 12px;
  color: var(--cl-gold);
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--cl-primary); border-radius: 4px; }
::-webkit-scrollbar-track { background: #e2e8f0; }

/* === Unified light grey surface (#f0f2f5) — login + in-room views only === */
body.cl-page-login.bg,
body.cl-in-room.bg,
body.cl-page-login,
body.cl-in-room {
  background: var(--cl-surface-grey) !important;
  color: #1a1a1a !important;
}
#dpnl.dpnl,
#dpnl .tab-pane:not(#rooms):not(#settings),
#dpnl .tab-pane.active:not(.hid):not(#rooms):not(#settings),
#dpnl #wall,
#dpnl #story,
#dpnl #newoption,
#dpnl #TOP_WETCH,
#dpnl #TOP_BAR,
#dpnl #chats,
#dpnl #users,
.cl-chat-feed-shell,
#users-inroom.cl-users-inroom,
#users-online.cl-users-online {
  background: var(--cl-surface-grey) !important;
  background-color: var(--cl-surface-grey) !important;
}
#dpnl #wall.border,
#dpnl #wall.tab-pane,
#dpnl #story.tab-pane,
#dpnl #story.border,
#dpnl .tab-pane.border:not(#rooms):not(#settings) {
  background: var(--cl-surface-grey) !important;
  background-color: var(--cl-surface-grey) !important;
  color: #1a1a1a !important;
}
body.cl-page-login #cl-login-footer .cl-footer-text {
  color: #64748b !important;
}
body.cl-page-login #cl-login-footer .cl-footer-link {
  color: #2563eb !important;
}

#dpnl:has(#wall.active:not(.hid)) .cl-panel-header,
#dpnl:has(#story.active:not(.hid)) .cl-panel-header {
  background: var(--cl-header-dark) !important;
  background-color: var(--cl-header-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#dpnl:has(#wall.active:not(.hid)) .cl-panel-header .pnhead,
#dpnl:has(#story.active:not(.hid)) .cl-panel-header .pnhead {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Lobby page — card shell only (typography colors set per-element above) */
#cl-room-lobby .cl-lobby-card,
#cl-room-lobby .cl-lobby-card-body,
#cl-room-lobby .cl-lobby-card-top {
  color: inherit;
}

/* === Dark premium panels — match CHATLIVE logo header (#0a1120) === */
#tlogins > a.label.bg.d-flex.fl,
#tlogins .cl-login-nav,
#tlogins .cl-login-panels,
#dpnl #rooms.tab-pane,
#dpnl #rooms.active:not(.hid),
#dpnl #settings.tab-pane,
#dpnl #settings.cl-settings-panel,
#settings.cl-settings-panel {
  background: var(--cl-header-dark) !important;
  background-color: var(--cl-header-dark) !important;
  color: #ffffff !important;
}

/* Login dark zone — readable labels & counts */
#tlogins .cl-login-panels,
#tlogins .cl-login-nav > li > a {
  color: #ffffff !important;
}
#tlogins .cl-login-stealth {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Rooms modal — dark shell + white text */
#dpnl #rooms .cl-rooms-search-bar,
#dpnl #rooms .bgg {
  background: #111827 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#dpnl #rooms #roomSearchInput,
#dpnl #rooms .tbox-custom {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  -webkit-text-fill-color: #ffffff !important;
}
#dpnl #rooms #roomSearchInput::placeholder {
  color: #94a3b8 !important;
}
#dpnl #rooms.active:not(.hid) .rmr {
  background: var(--cl-header-dark) !important;
}
#dpnl #rooms.active:not(.hid) .rmr .room {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
#dpnl #rooms.active:not(.hid) .rmr .room:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
#dpnl #rooms .label,
#dpnl #rooms button,
#dpnl #rooms .btn {
  color: #ffffff !important;
}

/* Settings modal — dark shell + white labels */
#dpnl #settings.cl-settings-panel,
#settings.cl-settings-panel {
  color: #ffffff !important;
}
#settings .cl-settings-label,
#settings .label.label-primary.cl-settings-label {
  color: #ffffff !important;
  background: transparent !important;
  -webkit-text-fill-color: #ffffff !important;
}
#settings .cl-settings-input,
#settings input.stopic,
#settings input.smsg,
#settings .stopic,
#settings .smsg {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  caret-color: #ffffff !important;
}
#settings input.stopic::placeholder,
#settings input.smsg::placeholder,
#settings .cl-settings-input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
#settings .cl-settings-select,
#settings #zoom,
#settings #turn_server {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
#settings .cl-settings-select option {
  background: #1e293b !important;
  color: #ffffff !important;
}
#settings .cl-settings-row .cl-settings-label {
  color: #ffffff !important;
}
#settings .cl-settings-btn-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#settings .cl-settings-btn-toggle .fa {
  color: #ffffff !important;
}

/* EXCEPTION: Stories panel stays light grey with dark readable text */
#dpnl #story,
#dpnl #story.tab-pane,
#dpnl #story.border,
#dpnl #story .itemstory,
#dpnl #story p {
  background: var(--cl-surface-grey) !important;
  background-color: var(--cl-surface-grey) !important;
  color: #1a1a1a !important;
}

/* === LOCATION FIXES (highest priority — do not alter global theme elsewhere) === */

/* 1. Login / visitor-list page footer */
footer#cl-login-footer.cl-footer-login,
body.cl-page-login #cl-login-footer,
#tlogins #cl-login-footer {
  background: var(--cl-header-dark) !important;
  background-color: #0a1120 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
footer#cl-login-footer .cl-footer-line,
footer#cl-login-footer .cl-footer-text,
footer#cl-login-footer .cl-footer-line .cl-footer-text,
body.cl-page-login #cl-login-footer .cl-footer-line,
body.cl-page-login #cl-login-footer .cl-footer-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
footer#cl-login-footer .cl-footer-link,
body.cl-page-login #cl-login-footer .cl-footer-link {
  color: #7dd3fc !important;
  -webkit-text-fill-color: #7dd3fc !important;
}

/* 2. THE WALL (الحائط) — dark header only; light-grey feed when active */
#dpnl:has(#wall.active:not(.hid)) .cl-panel-header {
  background: var(--cl-header-dark) !important;
  background-color: #0a1120 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#dpnl:has(#wall.active:not(.hid)) .cl-panel-header .pnhead,
#dpnl:has(#wall.active:not(.hid)) .cl-panel-header .cl-panel-close {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#dpnl #wall.tab-pane.active:not(.hid).cl-wall-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  color: #1a1a1a !important;
}
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-toolbar {
  flex: 0 0 auto !important;
  width: 100% !important;
  display: block !important;
  background: var(--cl-header-dark) !important;
  background-color: #0a1120 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-toolbar .story,
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-toolbar label.story {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  margin: 0 !important;
}
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-feed-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  color: #1a1a1a !important;
}
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-feed-body .youtubeSearch,
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-youtube-bar,
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-composer,
#dpnl #wall.tab-pane.active:not(.hid) .tablebox.light {
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  color: #1a1a1a !important;
  border-color: #dde1e6 !important;
}
#dpnl #wall.tab-pane.active:not(.hid) .cl-wall-youtube-bar .fa-search {
  color: #64748b !important;
}
#dpnl #wall.tab-pane.active:not(.hid) #d2bc,
#dpnl #wall.tab-pane.active:not(.hid) #d2bc.cl-wall-feed {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 52px !important;
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate;
  background: var(--cl-surface-grey) !important;
  background-color: #f0f2f5 !important;
  color: #1a1a1a !important;
}
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .mm,
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .uzr,
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .cl-wall-post {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom-color: #dde1e6 !important;
}
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .u-pic,
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .fitimg.u-pic {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  flex-shrink: 0 !important;
  background-color: #f0f2f5 !important;
  background-image: none !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: auto !important;
  box-shadow: none !important;
  contain: layout paint style;
  isolation: isolate;
}
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .u-pic img.u-pic-img,
#dpnl #wall.tab-pane.active:not(.hid) #d2bc img.u-pic-img {
  display: block !important;
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .u-topic,
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .u-msg,
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .msg {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background: transparent !important;
  background-color: transparent !important;
}
#dpnl #wall.tab-pane.active:not(.hid) #d2bc .tago {
  color: #64748b !important;
}
#dpnl #wall.tab-pane.active:not(.hid) .tboxbc {
  background: #ffffff !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  border: 1px solid #d1d5db !important;
}

/* 3. Room selection lobby page — dark shell with layered typography */
body.cl-in-lobby,
body.cl-in-lobby.bg,
body.cl-in-lobby .dad,
body.cl-in-lobby .center-block.dad,
body.cl-in-lobby #cl-room-lobby,
#cl-room-lobby.cl-room-lobby {
  background: var(--cl-header-dark) !important;
  background-color: #0a1120 !important;
  color: #f8fafc !important;
}
#cl-room-lobby .cl-lobby-kicker {
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
}
#cl-room-lobby .cl-lobby-title-main {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}
#cl-room-lobby .cl-lobby-sub {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
#cl-room-lobby .cl-lobby-user {
  color: #fbbf24 !important;
  -webkit-text-fill-color: #fbbf24 !important;
}
#cl-room-lobby .cl-lobby-hint,
#cl-room-lobby .cl-lobby-loading {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}
#cl-room-lobby .cl-lobby-title {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
#cl-room-lobby .cl-lobby-about {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}
#cl-room-lobby .cl-lobby-brand-gold {
  color: #ffb703 !important;
  -webkit-text-fill-color: #ffb703 !important;
}
#cl-room-lobby .cl-lobby-brand-white {
  color: #ef233c !important;
  -webkit-text-fill-color: #ef233c !important;
}

/* In-room copyright footer (unchanged — dark bar) */
footer#cl-site-footer.cl-site-footer:not(.cl-footer-login) {
  background: var(--cl-header-dark) !important;
  background-color: #0a1120 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
footer#cl-site-footer.cl-site-footer:not(.cl-footer-login) .cl-footer-line,
footer#cl-site-footer.cl-site-footer:not(.cl-footer-login) .cl-footer-text,
footer#cl-site-footer.cl-site-footer:not(.cl-footer-login) .cl-footer-line .cl-footer-text,
footer#cl-site-footer.cl-site-footer:not(.cl-footer-login) .mini.cl-footer-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
footer#cl-site-footer.cl-site-footer:not(.cl-footer-login) .cl-footer-link,
footer#cl-site-footer.cl-site-footer:not(.cl-footer-login) a.cl-footer-link {
  color: #7dd3fc !important;
  -webkit-text-fill-color: #7dd3fc !important;
}

#dpnl #wall #d2bc.d2bc.cl-wall-feed,
#dpnl #wall.active:not(.hid) #d2bc,
#dpnl #wall #d2bc .mm,
#dpnl #wall #d2bc .uzr,
#dpnl #wall #d2bc .uzr.d-flex,
#dpnl #wall #d2bc .cl-wall-post {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#dpnl #wall #d2bc.d2bc.cl-wall-feed {
  background: #f0f2f5 !important;
  background-color: #f0f2f5 !important;
  color: #1a1a1a !important;
}
#dpnl #wall #d2bc .u-pic,
#dpnl #wall #d2bc .fitimg.u-pic {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  flex-shrink: 0 !important;
  background-color: #f0f2f5 !important;
  background-image: none !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: auto !important;
  contain: layout paint style;
}
#dpnl #wall #d2bc .u-pic img.u-pic-img {
  display: block !important;
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#dpnl #wall #d2bc .u-topic,
#dpnl #wall #d2bc .u-msg,
#dpnl #wall #d2bc .msg {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  background: transparent !important;
  background-color: transparent !important;
}

#dpnl #wall #d2bc .cl-bot-msg .u-topic,
#dpnl #wall #d2bc .cl-bot-msg .u-msg,
#d2 .cl-bot-msg .u-topic,
#d2 .cl-bot-msg .u-msg,
#d2bc .cl-bot-msg .u-topic,
#d2bc .cl-bot-msg .u-msg {
  opacity: 1 !important;
  visibility: visible !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Active users panel (المتواجدين) — layout/visibility; nick colors from inline ucol */
#dpnl #users.tab-pane.active:not(.hid),
#dpnl #users.tab-pane.active:not(.hid) #users-inroom,
#dpnl #users.tab-pane.active:not(.hid) #users-online,
#dpnl #users.tab-pane.active:not(.hid) .usr {
  color: #64748b !important;
}
#dpnl #users #users-inroom .uzr .u-topic,
#dpnl #users #users-online .uzr .u-topic,
#users-inroom.cl-users-inroom .uzr .u-topic,
#users-online.cl-users-online .uzr .u-topic,
#dpnl #users .usr .uzr .u-topic {
  display: inline-block !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
#dpnl #users #users-inroom .uzr .u-topic *,
#dpnl #users #users-online .uzr .u-topic *,
#users-inroom .uzr .u-topic *,
#users-online .uzr .u-topic * {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

#dpnl #users .uzr,
#users-inroom.cl-users-inroom .uzr,
#users-online.cl-users-online .uzr,
#dpnl #users .usr .uzr {
  opacity: 1 !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
#dpnl #users .uzr .u-msg,
#users-inroom .uzr .u-msg,
#users-online .uzr .u-msg {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #64748b !important;
  font-size: 12px !important;
}
#dpnl #users .uzr .ustat,
#users-inroom .uzr .ustat,
#users-online .uzr .ustat,
#dpnl #users .usr .uzr .ustat {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 5px !important;
  min-width: 5px !important;
  max-width: 5px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 62px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  border-radius: 2px !important;
}
#dpnl #users .uzr .di1,
#users-inroom .uzr .di1,
#users-online .uzr .di1 {
  align-items: stretch !important;
}

/* Profile modal — portal overlay above bottom nav (#dpnl z-index 300) */
#upro.cl-profile-modal-root,
body.cl-profile-modal-open #upro.modal {
  position: fixed !important;
  z-index: 10050 !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
body.cl-profile-modal-open .modal-backdrop,
body.cl-profile-modal-open .modal-backdrop.cl-profile-modal-backdrop {
  z-index: 10040 !important;
}
body.cl-profile-modal-open #upro.modal.in {
  display: block !important;
}
#upro.cl-profile-modal-root .modal-dialog {
  position: relative;
  z-index: 10051;
  margin: 30px auto;
}

/* Public chat — inline reply shortcut beside sender name */
#d2 .cl-msg-reply,
#d2bc .cl-msg-reply {
  display: none;
  flex: 0 0 auto;
  width: 22px !important;
  min-width: 22px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 1px 2px 0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  background: #f8fafc !important;
  color: #2563eb !important;
  font-size: 11px !important;
  line-height: 16px !important;
  opacity: 0.92;
}
#d2 .cl-msg-reply:hover,
#d2bc .cl-msg-reply:hover {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}
#d2 .mm .d-flex.flex-grow-1 {
  align-items: center;
  min-width: 0;
}

/* ===== Global layout containment ===== */
#dpnl.dpnl {
  isolation: isolate;
}
#chat-watermark-layer,
.cl-room-watermark,
#chat-watermark-layer * {
  pointer-events: none !important;
}
#wall .youtubeSearch {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
#wall .youtubeLoad {
  pointer-events: none !important;
}
#wall .cl-wall-composer,
#dpnl #wall .cl-wall-composer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 4px !important;
  display: flex !important;
  background-color: #f0f2f5 !important;
  box-sizing: border-box !important;
}
#d2bc #bcmore {
  z-index: 1 !important;
}
#d2 .mm,
#d2bc .mm,
#d2bc .cl-wall-post {
  position: relative !important;
  z-index: auto !important;
  overflow: visible !important;
}
#d2 .u-pic img.u-pic-img,
#d2bc .u-pic img.u-pic-img {
  position: static !important;
  z-index: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.fitimg.u-pic:not(.spic) {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
body:not(.cl-profile-modal-open) .modal-backdrop:not(.in) {
  display: none !important;
  pointer-events: none !important;
}