/* =========================================================
   CLEAN MODERN LOGIN THEME - rebuilt from zero
   Only login/front page styling. Does not style rooms/settings/chat internals.
   ========================================================= */

:root{
  --m-bg:#eef4f8;
  --m-panel:#ffffff;
  --m-primary:#0f766e;
  --m-primary2:#14b8a6;
  --m-dark:#0f172a;
  --m-soft:#f8fafc;
  --m-border:#dbe5ee;
  --m-green:#22c55e;
  --m-pink:#ef5b93;
}

html,body{
  width:100% !important;
  height:100% !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:linear-gradient(135deg,#edf6fb 0%,#f8fafc 100%) !important;
  font-family:Tahoma,Arial,sans-serif !important;
}

body.theme-custom-style .dad{
  width:100% !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  background:transparent !important;
  overflow:hidden !important;
}

/* Hide internal room behind login only */
body.theme-custom-style:not(.site-in-room) #room{
  visibility:hidden !important;
  pointer-events:none !important;
}
body.theme-custom-style.site-in-room #room{
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Main login shell: from near top to near bottom */
#tlogins{
  position:absolute !important;
  top:10px !important;
  bottom:10px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(430px,calc(100vw - 24px)) !important;
  min-width:320px !important;
  max-width:430px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  background:var(--m-panel) !important;
  border:1px solid rgba(15,118,110,.55) !important;
  border-radius:14px !important;
  box-shadow:0 18px 45px rgba(15,23,42,.18) !important;
  overflow:hidden !important;
  direction:rtl !important;
  z-index:5000 !important;
}

/* Header */
#tlogins > a.label-primary:first-of-type{
  flex:0 0 46px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  height:46px !important;
  line-height:46px !important;
  padding:0 10px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,var(--m-dark),var(--m-primary)) !important;
  color:#fff !important;
  text-align:right !important;
}
#tlogins > a.label-primary:first-of-type:after{
  content:var(--login-chat-name,"شات حديث") !important;
  font:bold 14px Tahoma,Arial !important;
  color:#fff !important;
  margin-right:6px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#tlogins > a.label-primary:first-of-type img{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:8px !important;
  background:#fff !important;
  padding:2px !important;
  margin:0 !important;
  object-fit:cover !important;
}
#tlogins > a.label-primary:first-of-type button,
#tlogins > a.label-primary:first-of-type .btn{
  margin-right:auto !important;
  width:34px !important;
  height:34px !important;
  line-height:34px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  color:#fff !important;
  box-shadow:0 5px 12px rgba(22,163,74,.25) !important;
}

/* Banner */
#mainLoginBanner{
  flex:0 0 136px !important;
  display:block !important;
  width:100% !important;
  height:136px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  border-bottom:1px solid var(--m-border) !important;
}
#mainLoginBanner .main-banner-art{
  position:relative !important;
  width:100% !important;
  height:136px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  background:
    radial-gradient(circle at 78% 45%,rgba(239,91,147,.22),transparent 17%),
    radial-gradient(circle at 22% 15%,rgba(20,184,166,.14),transparent 20%),
    linear-gradient(135deg,#ffffff 0%,#f8fbfd 100%) !important;
  background-size:cover !important;
  background-position:center !important;
}
#mainLoginBanner .main-heart{
  position:absolute !important;
  right:42px !important;
  top:52px !important;
  width:auto !important;
  height:auto !important;
  line-height:1 !important;
  color:var(--m-pink) !important;
  font:bold 42px Arial !important;
  opacity:.9 !important;
}
#mainLoginBanner .main-title{
  color:#111827 !important;
  font:bold 22px Tahoma,Arial !important;
  line-height:1.25 !important;
  margin:0 !important;
  max-width:75% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#mainLoginBanner .main-sub{
  color:var(--m-pink) !important;
  font:bold 15px Tahoma,Arial !important;
  margin:4px 0 0 0 !important;
  max-width:80% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#mainLoginBanner .main-url{
  color:#334155 !important;
  font:bold 10px Arial !important;
  letter-spacing:3px !important;
  margin-top:7px !important;
  text-transform:uppercase !important;
}

/* Info links */
#mainLoginLinks{
  flex:0 0 28px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:2px !important;
  width:100% !important;
  height:28px !important;
  padding:2px 10px !important;
  margin:0 !important;
  background:#fff !important;
  box-sizing:border-box !important;
}
#mainLoginLinks a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:24px !important;
  line-height:1 !important;
  padding:0 4px !important;
  margin:0 !important;
  background:linear-gradient(135deg,var(--m-primary),var(--m-primary2)) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:4px !important;
  font:bold 11px Tahoma,Arial !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Login tabs: clean equal buttons */
#tlogins ul.nav.nav-tabs{
  flex:0 0 42px !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
  width:100% !important;
  height:42px !important;
  padding:6px 10px !important;
  margin:0 !important;
  border:0 !important;
  background:#fff !important;
  box-sizing:border-box !important;
  direction:rtl !important;
}
#tlogins ul.nav.nav-tabs:before,
#tlogins ul.nav.nav-tabs:after{display:none !important;content:none !important;}
#tlogins ul.nav.nav-tabs > li{
  float:none !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#tlogins ul.nav.nav-tabs > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:30px !important;
  line-height:1 !important;
  padding:0 6px !important;
  margin:0 !important;
  border:1px solid #cbd5e1 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111827 !important;
  font:bold 12px Tahoma,Arial !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-shadow:none !important;
}
#tlogins ul.nav.nav-tabs > li.active > a,
#tlogins ul.nav.nav-tabs > li > a:hover{
  border-color:var(--m-primary) !important;
  color:#064e3b !important;
  box-shadow:inset 0 0 0 1px var(--m-primary) !important;
}

/* Forms */
#tlogins #l1,
#tlogins #l2,
#tlogins #l3{
  flex:0 0 auto !important;
  width:100% !important;
  min-height:138px !important;
  padding:8px 10px 10px 10px !important;
  margin:0 !important;
  background:#fff !important;
  border:0 !important;
  direction:rtl !important;
  text-align:center !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
#tlogins #u1,
#tlogins #u2,
#tlogins #u3,
#tlogins #pass1,
#tlogins #pass2{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:30px !important;
  line-height:30px !important;
  margin:6px 0 !important;
  padding:0 10px !important;
  border:1px solid #f0a9c3 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111827 !important;
  font:bold 13px Tahoma,Arial !important;
  text-align:center !important;
  outline:none !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}
#tlogins #u1:focus,
#tlogins #u2:focus,
#tlogins #u3:focus,
#tlogins #pass1:focus,
#tlogins #pass2:focus{
  border-color:var(--m-primary2) !important;
  box-shadow:0 0 0 2px rgba(20,184,166,.16) !important;
}
#tlogins #l1 button,
#tlogins #l2 button,
#tlogins #l3 button,
#tlogins button[onclick*="login"]{
  display:block !important;
  width:100% !important;
  height:32px !important;
  line-height:30px !important;
  padding:0 !important;
  margin:8px 0 0 0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--m-primary),var(--m-primary2)) !important;
  color:#fff !important;
  font:bold 13px Tahoma,Arial !important;
  text-align:center !important;
  box-shadow:0 8px 18px rgba(15,118,110,.20) !important;
}
#tlogins .stealth-eye-btn{
  display:block !important;
  width:28px !important;
  height:22px !important;
  line-height:22px !important;
  margin:6px 12px 0 0 !important;
  color:#000 !important;
  text-align:center !important;
  background:transparent !important;
  border:0 !important;
}
#tlogins .stealth-eye-btn input{display:none !important;}

/* Status bars */
#tlogins .loginstat{
  flex:0 0 28px !important;
  display:block !important;
  float:none !important;
  width:100% !important;
  height:28px !important;
  line-height:28px !important;
  margin:0 !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,#22c55e,#4ade80) !important;
  color:#fff !important;
  font:bold 12px Tahoma,Arial !important;
  text-align:right !important;
  box-sizing:border-box !important;
}
#tlogins label[title="المتواجدين الآن"]{
  flex:0 0 32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  float:none !important;
  width:100% !important;
  height:32px !important;
  line-height:32px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,var(--m-primary),var(--m-primary2)) !important;
  color:#fff !important;
  font:bold 12px Tahoma,Arial !important;
  text-align:center !important;
}
#tlogins label[title="المتواجدين الآن"] .s1{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:42px !important;
  height:32px !important;
  line-height:32px !important;
  padding:0 8px !important;
  margin:0 0 0 8px !important;
  background:#4ade80 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:0 !important;
}

/* Online list takes all remaining height */
#tlogins .lonline{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
  border:0 !important;
  outline:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
#tlogins .lonline::-webkit-scrollbar{width:8px !important;}
#tlogins .lonline::-webkit-scrollbar-track{background:#eef2f7 !important;}
#tlogins .lonline::-webkit-scrollbar-thumb{background:rgba(15,118,110,.55) !important;border-radius:10px !important;}
#tlogins .uzr{
  margin:0 !important;
  padding:4px !important;
  border:0 !important;
  border-bottom:1px solid #e5edf4 !important;
  border-radius:0 !important;
  background:#fff !important;
  min-height:54px !important;
}
#tlogins .u-pic,#tlogins .fitimg{
  border-radius:10px !important;
  object-fit:cover !important;
}

/* After login: do not affect internal chat */
body.site-in-room,
body.site-in-room .dad{
  background:var(--site-content-bg,#e9eef3) !important;
}
body.site-in-room #room,
body.site-in-room #d2,
body.site-in-room #d0,
body.site-in-room .footer{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.site-in-room #tlogins,
body.site-in-room #mainLoginBanner,
body.site-in-room #mainLoginLinks,
body.site-in-room #frontSiteBanner,
body.site-in-room #frontFaceButtons,
body.site-in-room #frontFaceMarquee{
  display:none !important;
}

@media (max-height:720px){
  #mainLoginBanner{flex-basis:108px !important;height:108px !important;}
  #mainLoginBanner .main-banner-art{height:108px !important;}
  #mainLoginBanner .main-title{font-size:19px !important;}
  #mainLoginBanner .main-sub{font-size:13px !important;}
  #tlogins #l1,#tlogins #l2,#tlogins #l3{min-height:118px !important;}
}

/* ===== FIX: remove checkbox squares from login tab buttons ===== */
#tlogins ul.nav.nav-tabs input[type="checkbox"],
#tlogins ul.nav.nav-tabs input[type="radio"],
#tlogins ul.nav.nav-tabs > li > a input,
#tlogins ul.nav.nav-tabs > li > a .checkbox,
#tlogins ul.nav.nav-tabs > li > a .radio{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#tlogins ul.nav.nav-tabs > li > a{
  gap:0 !important;
}


/* ===== REAL FIX: remove FontAwesome square icons from login tabs ===== */
#tlogins ul.nav.nav-tabs > li > a:before,
#tlogins ul.nav.nav-tabs > li > a:after,
#tlogins ul.nav.nav-tabs > li > a.login-tab-clean:before,
#tlogins ul.nav.nav-tabs > li > a.login-tab-clean:after{
  content:"" !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#tlogins ul.nav.nav-tabs > li > a.login-tab-clean{
  font-family:Tahoma, Arial, sans-serif !important;
}

/* ===== FINAL FULL HEIGHT EDGE-TO-EDGE LOGIN PANEL ===== */
html,body,.dad{
  width:100% !important;
  height:100vh !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
body.theme-custom-style:not(.site-in-room){
  background:#eef4f8 !important;
}
body.theme-custom-style:not(.site-in-room) #tlogins{
  top:0 !important;
  bottom:0 !important;
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(430px,100vw) !important;
  max-width:min(430px,100vw) !important;
  min-width:320px !important;
  margin:0 !important;
  border-radius:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.theme-custom-style:not(.site-in-room) #tlogins .lonline{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow-y:auto !important;
}


/* ===== FRONT BUTTONS ADMIN LINKING FIX =====
   الأزرار الموجودة في #mainLoginLinks هي المعتمدة الآن.
   يتم تفعيلها/تعطيلها وربط روابطها من لوحة التحكم.
   تم إلغاء أزرار frontFaceButtons القديمة حتى لا يظهر ستايل مزدوج. */
#frontFaceButtons { display: none !important; }
body:not(.site-front-buttons-on) #mainLoginLinks { display: none !important; }
body.site-front-buttons-on #mainLoginLinks { display: grid !important; }
#mainLoginLinks a { cursor: pointer !important; }
body:not(.site-front-buttons-on) #mainLoginLinks a { pointer-events: none !important; }


/* ===== SETTINGS BUTTON CLICK FIX ===== */
#settings .voice-settings-actions,
#settings .voice-settings-actions *{
  pointer-events:auto !important;
}
#settings .voice-setting-btn{
  cursor:pointer !important;
  user-select:none !important;
}
#settings .voice-setting-btn img,
#settings .voice-setting-btn span,
#settings .voice-setting-btn i{
  pointer-events:none !important;
}


/* =========================================================
   STYLE 3 - سوالف الخليج (Front Login)
   ========================================================= */
body.theme-custom-style.front-theme-classic3,
body.theme-custom-style.front-theme-classic3 .dad{
  background:#4a4b64 !important;
}
body.theme-custom-style.front-theme-classic3:not(.site-in-room) #tlogins{
  width:min(390px,calc(100vw - 20px)) !important;
  max-width:390px !important;
  top:12px !important;
  bottom:12px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  border-radius:6px !important;
  border:1px solid #8086a6 !important;
  box-shadow:none !important;
  background:#f5f5f7 !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins > a.label-primary:first-of-type{
  height:36px !important;
  min-height:36px !important;
  flex:0 0 36px !important;
  background:#4d527f !important;
  border-bottom:1px solid #697095 !important;
  padding:0 10px !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins > a.label-primary:first-of-type:after{
  content:var(--login-chat-name,"شات سوالف الخليج") !important;
  font:bold 13px Tahoma,Arial !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins > a.label-primary:first-of-type img{
  width:28px !important;height:28px !important;border-radius:3px !important;padding:1px !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins > a.label-primary:first-of-type button,
body.theme-custom-style.front-theme-classic3 #tlogins > a.label-primary:first-of-type .btn,
body.theme-custom-style.front-theme-classic3 #frontSiteBanner .front-site-refresh{
  width:28px !important;height:28px !important;line-height:28px !important;border-radius:6px !important;
  background:#60cb4d !important;box-shadow:none !important;
}
body.theme-custom-style.front-theme-classic3 #frontSiteBanner{
  flex:0 0 124px !important;
  height:124px !important;
  border-bottom:1px solid #7d83a5 !important;
  background:#d7d7df !important;
}
body.theme-custom-style.front-theme-classic3 #frontSiteBanner .front-site-banner-img{
  width:100% !important;height:124px !important;object-fit:cover !important;
}
body.theme-custom-style.front-theme-classic3 #mainLoginBanner{
  flex:0 0 0 !important;height:0 !important;min-height:0 !important;overflow:hidden !important;border:0 !important;padding:0 !important;
}
body.theme-custom-style.front-theme-classic3 #mainLoginLinks{
  flex:0 0 34px !important;
  height:34px !important;
  background:#4d527f !important;
  padding:4px 6px !important;
  gap:4px !important;
  border-bottom:1px solid #7d83a5 !important;
}
body.theme-custom-style.front-theme-classic3 #mainLoginLinks a{
  background:#4d527f !important;
  border:1px solid #ffffff !important;
  border-radius:14px !important;
  color:#fff !important;
  font:bold 11px Tahoma,Arial !important;
  height:24px !important;
}
body.theme-custom-style.front-theme-classic3 #frontFaceMarquee{
  display:block !important;
  flex:0 0 24px !important;
  height:24px !important;
  margin:0 8px !important;
  padding:0 8px !important;
  background:#4d527f !important;
  color:#fff !important;
  border-radius:12px !important;
  line-height:24px !important;
  font:bold 11px Tahoma,Arial !important;
  border:1px solid #fff !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .nav.nav-tabs{
  order:20 !important;
  display:flex !important;
  gap:4px !important;
  padding:2px 6px 6px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .nav.nav-tabs > li{
  float:none !important;display:block !important;flex:1 1 0 !important;margin:0 !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .nav.nav-tabs > li > a{
  height:28px !important;line-height:28px !important;padding:0 6px !important;
  background:#f7f7f7 !important;border:1px solid #a4aac8 !important;border-radius:14px !important;
  color:#2d4670 !important;font:bold 11px Tahoma,Arial !important;text-align:center !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .nav.nav-tabs > li.active > a{
  background:#fff !important;border-color:#4d527f !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins #l1,
body.theme-custom-style.front-theme-classic3 #tlogins #l2,
body.theme-custom-style.front-theme-classic3 #tlogins #l3{
  order:21 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  padding:0 10px 8px !important;
  margin:0 !important;
  background:transparent !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins #u1,
body.theme-custom-style.front-theme-classic3 #tlogins #u2,
body.theme-custom-style.front-theme-classic3 #tlogins #u3,
body.theme-custom-style.front-theme-classic3 #tlogins #pass1,
body.theme-custom-style.front-theme-classic3 #tlogins #pass2{
  grid-column:1 !important;
  width:100% !important;
  height:34px !important;
  background:#fff !important;
  border:1px solid #d9b9c6 !important;
  border-radius:16px !important;
  padding:0 12px !important;
  text-align:center !important;
  font:bold 13px Tahoma,Arial !important;
  box-sizing:border-box !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins #l1 button.btn,
body.theme-custom-style.front-theme-classic3 #tlogins #l2 button.btn,
body.theme-custom-style.front-theme-classic3 #tlogins #l3 button.btn,
body.theme-custom-style.front-theme-classic3 #tlogins button[onclick*="login"]{
  grid-column:1 !important;
  width:100% !important;
  height:36px !important;
  border:0 !important;
  border-radius:18px !important;
  background:#4d527f !important;
  color:#fff !important;
  font:bold 14px Tahoma,Arial !important;
  box-shadow:none !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .stealth-eye-btn{
  order:22 !important;
  position:static !important;
  width:auto !important;height:auto !important;margin:0 12px 6px auto !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .stealth-eye-btn .fa,
body.theme-custom-style.front-theme-classic3 #tlogins .stealth-eye-btn{color:#000 !important;font-size:18px !important;}
body.theme-custom-style.front-theme-classic3 #tlogins .loginstat{
  order:23 !important;
  display:flex !important;align-items:center !important;justify-content:flex-end !important;
  height:30px !important;padding:0 12px !important;margin:0 !important;
  background:#61c74f !important;color:#fff !important;font:bold 13px Tahoma,Arial !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins label[title="المتواجدين الآن"]{
  order:24 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  height:30px !important;padding:0 12px !important;margin:0 !important;
  background:#4d527f !important;color:#fff !important;font:bold 13px Tahoma,Arial !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins label[title="المتواجدين الآن"] .s1{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  min-width:48px !important;height:30px !important;padding:0 10px !important;
  background:#61c74f !important;color:#fff !important;border-radius:0 !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .lonline{
  order:25 !important;
  flex:1 1 auto !important;
  min-height:180px !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
  overflow:auto !important;
  border-top:1px solid #d6d6e2 !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .lonline::-webkit-scrollbar{width:8px !important;}
body.theme-custom-style.front-theme-classic3 #tlogins .lonline::-webkit-scrollbar-thumb{background:#8b8fa8 !important;border-radius:10px !important;}
body.theme-custom-style.front-theme-classic3 #tlogins .uzr{
  min-height:53px !important;
  padding:4px 8px !important;
  border-bottom:1px solid #d8d8e6 !important;
  background:#fff !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .u-pic{width:50px !important;height:50px !important;border-radius:0 !important;}
body.theme-custom-style.front-theme-classic3 #tlogins .u-topic{font:bold 12px Tahoma,Arial !important;color:#000 !important;}
body.theme-custom-style.front-theme-classic3 #tlogins .u-msg,
body.theme-custom-style.front-theme-classic3 #tlogins .u-stat{font:12px Tahoma,Arial !important;color:#666 !important;}
body.theme-custom-style.front-theme-classic3 #tlogins .copyright,
body.theme-custom-style.front-theme-classic3 #tlogins #u-copyright,
body.theme-custom-style.front-theme-classic3 #tlogins .copyrights,
body.theme-custom-style.front-theme-classic3 #tlogins .cpys{
  order:26 !important;
  display:block !important;
  padding:8px 10px !important;
  text-align:center !important;
  background:#fff !important;
  color:#5b5b79 !important;
  border-top:1px solid #d8d8e6 !important;
  font:12px Tahoma,Arial !important;
}

/* ===== STYLE 3 COMPACT GAP FIX =====
   سبب الفراغات كان أن تبويبات الدخول المخفية (#l1/#l2/#l3) كانت تُعرض كـ grid بسبب الستايل.
   هنا نعرض التبويب النشط فقط ونضغط المسافات. */
body.theme-custom-style.front-theme-classic3 #tlogins #l1.hid,
body.theme-custom-style.front-theme-classic3 #tlogins #l2.hid,
body.theme-custom-style.front-theme-classic3 #tlogins #l3.hid,
body.theme-custom-style.front-theme-classic3 #tlogins .tab-pane.hid,
body.theme-custom-style.front-theme-classic3 #tlogins .tab-pane:not(.active):not(.in){
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins #l1:not(.hid),
body.theme-custom-style.front-theme-classic3 #tlogins #l2:not(.hid),
body.theme-custom-style.front-theme-classic3 #tlogins #l3:not(.hid),
body.theme-custom-style.front-theme-classic3 #tlogins .tab-pane.active,
body.theme-custom-style.front-theme-classic3 #tlogins .tab-pane.in{
  display:grid !important;
  min-height:0 !important;
  height:auto !important;
  padding:6px 10px 8px !important;
  margin:0 !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins #l1:not(.hid),
body.theme-custom-style.front-theme-classic3 #tlogins #l3:not(.hid){
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;
  gap:6px !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins #l2:not(.hid){
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;
  gap:6px !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins #u1,
body.theme-custom-style.front-theme-classic3 #tlogins #u2,
body.theme-custom-style.front-theme-classic3 #tlogins #u3,
body.theme-custom-style.front-theme-classic3 #tlogins #pass1,
body.theme-custom-style.front-theme-classic3 #tlogins #pass2,
body.theme-custom-style.front-theme-classic3 #tlogins #l1 button.btn,
body.theme-custom-style.front-theme-classic3 #tlogins #l2 button.btn,
body.theme-custom-style.front-theme-classic3 #tlogins #l3 button.btn{
  grid-column:1 !important;
  grid-row:auto !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .stealth-eye-btn{
  position:absolute !important;
  right:14px !important;
  margin-top:-36px !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .nav.nav-tabs{
  margin:0 !important;
  padding:3px 6px 4px !important;
}
body.theme-custom-style.front-theme-classic3 #tlogins .loginstat{
  margin-top:0 !important;
}

/* ===== GLOBAL COMPACT LOGIN SPACING FIX - ALL CUSTOM STYLES =====
   إزالة الفراغات الزائدة وجعل جميع الستايلات متقاربة ومتناسقة */
body.theme-custom-style #frontSiteBanner,
body.theme-custom-style #mainLoginBanner,
body.theme-custom-style #mainLoginLinks,
body.theme-custom-style #frontFaceMarquee,
body.theme-custom-style #tlogins > a.label,
body.theme-custom-style #tlogins > a.label-primary{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
body.theme-custom-style #mainLoginBanner{padding:8px 10px 6px !important;}
body.theme-custom-style #mainLoginLinks{padding:4px 8px !important; gap:4px !important;}
body.theme-custom-style #frontFaceMarquee{padding:3px 8px !important;}
body.theme-custom-style #tlogins .nav.nav-tabs{
  margin:0 !important;
  padding:6px 8px 4px !important;
  gap:6px !important;
}
body.theme-custom-style #tlogins .nav.nav-tabs > li{
  margin:0 !important;
}
body.theme-custom-style #tlogins #l1.hid,
body.theme-custom-style #tlogins #l2.hid,
body.theme-custom-style #tlogins #l3.hid,
body.theme-custom-style #tlogins .tab-pane.hid,
body.theme-custom-style #tlogins .tab-pane:not(.active):not(.in){
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
body.theme-custom-style #tlogins #l1:not(.hid),
body.theme-custom-style #tlogins #l2:not(.hid),
body.theme-custom-style #tlogins #l3:not(.hid),
body.theme-custom-style #tlogins .tab-pane.active,
body.theme-custom-style #tlogins .tab-pane.in{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;
  align-content:start !important;
  gap:8px !important;
  min-height:0 !important;
  height:auto !important;
  padding:6px 10px 8px !important;
  margin:0 !important;
}
body.theme-custom-style #tlogins #u1,
body.theme-custom-style #tlogins #u2,
body.theme-custom-style #tlogins #u3,
body.theme-custom-style #tlogins #pass1,
body.theme-custom-style #tlogins #pass2,
body.theme-custom-style #tlogins #l1 button.btn,
body.theme-custom-style #tlogins #l2 button.btn,
body.theme-custom-style #tlogins #l3 button.btn,
body.theme-custom-style #tlogins button[onclick*="login"]{
  grid-column:1 !important;
  grid-row:auto !important;
  margin:0 !important;
}
body.theme-custom-style #tlogins .stealth-eye-btn{
  margin:0 !important;
}
body.theme-custom-style #tlogins .loginstat{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
body.theme-custom-style #tlogins label[title="المتواجدين الآن"]{
  margin-top:0 !important;
}


/* ===== STEP17 REFRESH LOGIN CLEAN FIX =====
   عند تحديث الصفحة يجب إخفاء الشات الداخلي وشريط الإرسال حتى يتم تسجيل الدخول بنجاح. */
body.login-screen-active #room,
body.login-screen-active #d2,
body.login-screen-active #d0,
body.login-screen-active .footer,
body:not(.site-in-room) #room,
body:not(.site-in-room) #d2,
body:not(.site-in-room) #d0,
body:not(.site-in-room) .footer{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body.site-in-room #room,
body.site-in-room #d2,
body.site-in-room #d0,
body.site-in-room .footer{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

body.login-screen-active #tlogins,
body:not(.site-in-room) #tlogins{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:9999 !important;
}

/* ===== CLEAN ROOT CHAT LAYOUT REBUILD 100MB MEDIA =====
   إعادة بناء تخطيط الشات من الجذور بدون تكديس باتشات قديمة:
   - الشات العام مساحة واحدة غير منقسمة
   - صندوق الكتابة ظاهر دائماً
   - الحائط لوحة مستقلة لا تغطي شريط الإرسال
   - يعمل على الكمبيوتر والجوال
*/
html, body{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body.site-in-room{
  overflow:hidden !important;
}
body.site-in-room .dad{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
/* removed 100dvh fixed height for mobile performance */

/* غرفة الشات الرئيسية */
body.site-in-room #room{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  display:block !important;
  visibility:visible !important;
}
/* removed 100dvh room fixed height for mobile performance */

/* مساحة الرسائل */
body.site-in-room #d2{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:70px !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  box-sizing:border-box !important;
  display:block !important;
  visibility:visible !important;
}

/* شريط الكتابة العام */
body.site-in-room #room > .tablebox.footer,
body.site-in-room #room > .footer{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:34px !important;
  width:auto !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:0 !important;
  padding:2px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:3px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  z-index:1200 !important;
}
body.site-in-room #room > .footer > *,
body.site-in-room #room > .tablebox.footer > *{
  float:none !important;
  box-sizing:border-box !important;
}
body.site-in-room #room > .footer button,
body.site-in-room #room > .tablebox.footer button,
body.site-in-room #room > .footer img.emobox,
body.site-in-room #room > .tablebox.footer img.emobox{
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  line-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.site-in-room #tbox,
body.site-in-room #room > .footer textarea#tbox,
body.site-in-room #room > .tablebox.footer textarea#tbox{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:80px !important;
  max-width:none !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  line-height:22px !important;
  margin:0 !important;
  padding:5px 8px !important;
  resize:none !important;
  overflow:hidden !important;
  background:#fff !important;
  color:#111 !important;
  border:1px solid #999 !important;
  border-radius:5px !important;
  box-sizing:border-box !important;
  font-size:14px !important;
}

/* شريط التبويبات السفلي */
body.site-in-room #d0{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:auto !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  margin:0 !important;
  padding:2px !important;
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  z-index:1250 !important;
}
body.site-in-room #d0 .ae,
body.site-in-room #d0 label,
body.site-in-room #d0 button{
  float:none !important;
  flex:0 0 auto !important;
  height:28px !important;
  line-height:26px !important;
  min-width:30px !important;
  margin:0 !important;
  padding:1px 7px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}


/* الحائط يبنى كعمود: ستوري + رسائل + كتابة */
body.site-in-room #wall{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
body.site-in-room #wallStories{
  flex:0 0 auto !important;
  width:100% !important;
  min-height:70px !important;
  max-height:92px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  box-sizing:border-box !important;
}
body.site-in-room #d2bc{
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  box-sizing:border-box !important;
}
body.site-in-room #wall .wall-input-box{
  flex:0 0 42px !important;
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  margin:0 !important;
  padding:3px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:3px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  z-index:10 !important;
}
body.site-in-room #wall .wall-input-box > *{
  float:none !important;
  box-sizing:border-box !important;
}
body.site-in-room #wall .wall-input-box button,
body.site-in-room #wall .wall-input-box img.emobc{
  flex:0 0 32px !important;
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  line-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.site-in-room #wall .tboxbc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:60px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  margin:0 !important;
  padding:5px 7px !important;
  resize:none !important;
  overflow:hidden !important;
  background:#fff !important;
  color:#111 !important;
  border:1px solid #999 !important;
  border-radius:5px !important;
  box-sizing:border-box !important;
}

@media (max-width:768px){
  body.site-in-room #d2{bottom:76px !important;}
  body.site-in-room #room > .tablebox.footer,
  body.site-in-room #room > .footer{
    bottom:38px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
  }
  body.site-in-room #d0{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
  }
  body.site-in-room #room > .footer button,
  body.site-in-room #room > .tablebox.footer button,
  body.site-in-room #room > .footer img.emobox,
  body.site-in-room #room > .tablebox.footer img.emobox{
    flex-basis:34px !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
  }
  body.site-in-room #tbox{
    min-width:70px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    font-size:15px !important;
  }
  body.site-in-room #d0 .ae,
  body.site-in-room #d0 label,
  body.site-in-room #d0 button{
    height:32px !important;
    line-height:30px !important;
    min-width:34px !important;
    padding:1px 7px !important;
  }
  
}


/* === WALL OLD STYLE RESTORE: remove comment/reply features from wall only === */
#wallCommentsPanel,
#wall .wall-comments-panel,
#wall .commentbc-btn,
#wall .wall-reply-preview,
#wallReplyPreview,
#wall .chat-reply-btn,
#wall .chat-reply-quote{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  max-height:0 !important;
  overflow:hidden !important;
}
#wall .wall-input-box .tboxbc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* === FINAL WALL OLD STYLE + MESSAGE REPLY RESTORE ===
   هدفه: إرجاع شكل الحائط القديم، إخفاء تعليقات الحائط فقط،
   وإبقاء زر الرد على الرسائل ظاهرًا في العام والحائط. */
#wallCommentsPanel,
#wall .wall-comments-panel,
#wall .commentbc-btn,
#wall .commentbc-count{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* لا تخفي زر الرد على الرسائل */
#wall .chat-reply-btn,
#d2 .chat-reply-btn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  min-width:24px !important;
  height:22px !important;
  min-height:22px !important;
  line-height:20px !important;
  padding:0 !important;
  margin:0 2px !important;
  border-radius:5px !important;
  font-size:11px !important;
  float:right !important;
  box-sizing:border-box !important;
}

/* اقتباس الرد يظهر في الرسالة، وليس نافذة تعليقات */
#wall .chat-reply-quote,
#d2 .chat-reply-quote{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
}

body.site-in-room .dpnl{
  top:0px !important;
  right:0 !important;
  left:auto !important;
  bottom:31px !important;
  height:auto !important;
  /padding-top: !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
body.site-in-room .dpnl .pnhead{
  top:7px !important;
  height:24px !important;
  line-height:24px !important;
}
body.site-in-room .dpnl > label.fa-close,
body.site-in-room .dpnl > label.fa.fa-close{
  top:3px !important;
}

body.site-in-room #wall{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#f4f4f6 !important;
  box-sizing:border-box !important;
}
body.site-in-room #wallStories{
  flex:0 0 76px !important;
  height:76px !important;
  min-height:76px !important;
  max-height:76px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  border-bottom:1px solid #ddd !important;
  background:#f8f8fb !important;
  box-sizing:border-box !important;
}
body.site-in-room #wall #d2bc,
body.site-in-room #wall .d2bc{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 0 6px 0 !important;
  background:#fff !important;
  box-sizing:border-box !important;
}
body.site-in-room #wall .wall-input-box{
  flex:0 0 42px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  flex-wrap:nowrap !important;
  padding:3px !important;
  margin:0 !important;
  background:#fff !important;
  border-top:1px solid #ccc !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
body.site-in-room #wall .wall-input-box > *{
  float:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
body.site-in-room #wall .wall-input-box button,
body.site-in-room #wall .wall-input-box .btn,
body.site-in-room #wall .wall-input-box img.emobc{
  flex:0 0 33px !important;
  width:33px !important;
  min-width:33px !important;
  max-width:33px !important;
  height:33px !important;
  min-height:33px !important;
  max-height:33px !important;
  line-height:31px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.site-in-room #wall .wall-input-box .tboxbc{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:72px !important;
  height:33px !important;
  min-height:33px !important;
  max-height:33px !important;
  padding:5px 7px !important;
  resize:none !important;
  background:#fff !important;
  color:#111 !important;
  border:1px solid #999 !important;
  border-radius:5px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
body.site-in-room #wall .wall-input-box .sndbc{
  flex:0 0 42px !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
}

@media (max-width:768px){
  body.site-in-room .dpnl{
    width:min(340px, 86vw) !important;
    max-width:86vw !important;
    min-width:260px !important;
    bottom:76px !important;
  }
}


/* ===== FINAL FIX: panel buttons, wall theme color, wall conversations ===== */
:root{
  --final-chat-color: var(--site-button-bg, var(--theme-header-bg, var(--theme-primary, #8b1a80)));
}
body.site-in-room .dpnl{
  background-color: var(--final-chat-color) !important;
  border-color: #111 !important;
  pointer-events:auto !important;
  z-index:3000 !important;
}
body.site-in-room .dpnl .pnhead,
#wall .pnhead,
#wallCommentsPanel .wall-comments-head,
#wall .wall-youtube-head{
  background: var(--final-chat-color) !important;
  background-image:none !important;
  color:#fff !important;
  border-color: var(--final-chat-color) !important;
}
body.site-in-room #d0,
body.site-in-room #d0 *{
  pointer-events:auto !important;
}
body.site-in-room #d0{
  z-index:5000 !important;
}
body.site-in-room #d0 .ae,
body.site-in-room #d0 label,
body.site-in-room #d0 button{
  cursor:pointer !important;
}
#wall,
body.site-in-room #wall{
  background:#fff !important;
}
#wallStories,
#d2bc,
#wall .wall-input-box{
  background:#fff !important;
}
#wallCommentsPanel,
#wall .wall-comments-panel{
  display:none;
  visibility:visible !important;
  opacity:1 !important;
  width:320px !important;
  max-width:calc(100vw - 16px) !important;
  min-height:220px !important;
  max-height:calc(100vh - 90px) !important;
  height:auto !important;
  overflow:hidden !important;
}
#wallCommentsPanel[style*="display: flex"],
#wallCommentsPanel[style*="display:flex"]{
  display:flex !important;
}
#wall .commentbc-btn,
#wall .chat-reply-btn,
#d2 .chat-reply-btn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  align-items:center !important;
  justify-content:center !important;
}
#wall .chat-reply-quote,
#d2 .chat-reply-quote{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-height:none !important;
  overflow:hidden !important;
}
#wall .commentbc-count{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
}
body.site-wall-comments-disabled #wall .commentbc-btn,
body.site-wall-comments-disabled #wallCommentsPanel{
  display:none !important;
}
#wall .wall-comment-topic{
  background:transparent !important;
  color:#111 !important;
  padding:0 !important;
  border-radius:0 !important;
}
#wallCommentsPanel .wall-comments-close{
  background:var(--final-chat-color) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  color:#fff !important;
}
#wallCommentsPanel .wall-comments-send{
  background:var(--final-chat-color) !important;
  border-color:var(--final-chat-color) !important;
  color:#fff !important;
}
#wall .wall-comments-input,
#wallCommentInput{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#fff !important;
  color:#111 !important;
}
@media(max-width:768px){
  #wallCommentsPanel,
  #wall .wall-comments-panel{
    left:6px !important;
    right:6px !important;
    top:44px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - 120px) !important;
  }
}


/* === FIX: remove message-reply only from wall, keep comments + public chat reply === */
#wallReplyPreview,
#wall .wall-reply-preview,
#wall .chat-reply-btn,
#wall .chat-reply-quote{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;

  height:0 !important;
  max-height:0 !important;
  overflow:hidden !important;
}
#wall .commentbc-btn,
#wall .commentbc-count{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  align-items:center !important;
  justify-content:center !important;
}
#wallCommentsPanel{
  visibility:visible !important;
  opacity:1 !important;
  width:320px !important;
  max-width:calc(100vw - 16px) !important;
  min-height:220px !important;
  max-height:calc(100vh - 90px) !important;
}
#wallCommentsPanel[style*="display: flex"],
#wallCommentsPanel[style*="display:flex"]{
  display:flex !important;
}
#d2 .chat-reply-btn,
body .d2 .chat-reply-btn,
body .room .chat-reply-btn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  min-width:24px !important;
  min-height:22px !important;
  max-height:none !important;
  overflow:visible !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}
@media(max-width:700px){
  #d2 .chat-reply-btn,
  body .d2 .chat-reply-btn,
  body .room .chat-reply-btn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    min-width:30px !important;
    min-height:28px !important;
    line-height:26px !important;
    padding:2px 6px !important;
    font-size:13px !important;
    z-index:20 !important;
  }
  #d2 .chat-reply-quote{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}
/* Mobile normal input behavior block removed for native mobile behavior */


/* ===== PHASE 5 MOBILE PERFORMANCE CSS ===== */
@media (max-width: 768px){
  #d2, #d2bc, #users, #rooms, .lonline{
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }
  #d2 img, #d2bc img, #wall img{
    max-width:100%;
    height:auto;
  }
  #d2 video, #d2bc video, #wall video, #storyViewer video{
    max-width:100%;
    height:auto;
  }
  .msg, .mm, .uzr, .room{
    contain: layout paint;
  }
}


/* ===== MOBILE TOUCH / PANEL STABILITY PATCH =====
   Prevent hidden rooms/private/wall panels from catching taps over the chat box. */
@media (max-width: 768px) {
  .tab-content > .tab-pane:not(.active),
  .dpnl > .tab-pane:not(.active),
  #rooms:not(.active),
  #chats:not(.active),
  #wall:not(.active),
  #settings:not(.active) {
    pointer-events: none !important;
  }
  .tab-content > .tab-pane.active,
  .dpnl > .tab-pane.active {
    pointer-events: auto !important;
  }
  #d0,
  #tbox,
  .tbox,
  .tboxbc,
  .sendbtn,
  .sendBox,
  .send-box,
  .chat-input-area,
  .bottom-send-bar {
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .popover:not(.in),
  .modal:not(.in),
  .wall-comments-panel[style*="display: none"],
  .wall-comments-panel[style*="display:none"],
  .wall-youtube-box[style*="display: none"],
  .wall-youtube-box[style*="display:none"] {
    pointer-events: none !important;
  }
  body:not(.story-open) #storyViewer[style*="display: none"],
  body:not(.story-open) #storyViewer[style*="display:none"] {
    pointer-events: none !important;
  }
}
/* ===== END MOBILE TOUCH / PANEL STABILITY PATCH ===== */


/* =========================================================
   SEO HIDDEN LANDING TEXT FIX
   Keeps SEO landing text in HTML/source without showing it in the chat/login layout.
   ========================================================= */
#seoLandingContent.seo-landing-content{
  position:absolute!important;
  left:-99999px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  max-width:1px!important;
  max-height:1px!important;
  overflow:hidden!important;
  clip:rect(1px,1px,1px,1px)!important;
  clip-path:inset(50%)!important;
  white-space:normal!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
  pointer-events:none!important;
}
#seoLandingContent.seo-landing-content h1,
#seoLandingContent.seo-landing-content p{
  margin:0!important;
  padding:0!important;
  font-size:1px!important;
  line-height:1px!important;
  color:transparent!important;
}
#seoLandingContent .seo-landing-keywords{
  font-size:1px!important;
  line-height:1px!important;
  color:transparent!important;
}

/* Mobile profile/image close safety: hidden overlays should not trap taps */
@media (max-width: 768px){
  #profileImageViewer[style*="display: none"]{
    pointer-events:none !important;
  }
  #profileImageViewer,
  #upro{
    pointer-events:auto !important;
  }
  .modal-backdrop{
    pointer-events:none !important;
  }
}


/* =========================================================
   Chat quick media tools: image / flash emoji / clear chat
   ========================================================= */
.chat-tools-btn{
  min-width:32px !important;
  height:32px !important;
  padding:6px 8px !important;
  line-height:18px !important;
  text-align:center !important;
}
.chat-quick-tools{
  position:fixed;
  z-index:1000005;
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.16);
  padding:8px 10px;
  display:flex;
  gap:12px;
  align-items:center;
  direction:ltr;
  pointer-events:auto;
}
.chat-quick-tools .chat-tool-btn{
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  font-size:24px;
  line-height:34px;
  text-align:center;
  cursor:pointer;
  padding:0;
}
.chat-tool-emoji{ color:#00bcd4; }
.chat-tool-media{ color:#ff3d45; }
.chat-tool-clear{ color:#8e24aa; }
.flash-emoji-store{
  position:fixed;
  width:320px;
  max-width:calc(100vw - 16px);
  max-height:310px;
  overflow:hidden;
  z-index:1000006;
  background:#fff;
  border-radius:12px;
  box-shadow:0 5px 24px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.08);
  direction:rtl;
}
.flash-emoji-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--site-button-bg, #7d1766);
  color:#fff;
  padding:8px 10px;
  font-weight:bold;
}
.flash-emoji-head button{
  border:0;
  background:#d84a4a;
  color:#fff;
  border-radius:6px;
  width:28px;
  height:28px;
  line-height:22px;
  font-size:20px;
}
.flash-emoji-body{
  padding:10px;
  max-height:260px;
  overflow:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  background:#fff;
}
.flash-emoji-item{
  width:38px;
  height:38px;
  border:1px solid #e5e7eb;
  border-radius:9px;
  background:#fff;
  font-size:24px;
  line-height:34px;
  text-align:center;
  cursor:pointer;
  padding:0;
}
.flash-emoji-item img{
  max-width:32px;
  max-height:32px;
  object-fit:contain;
}
@media (max-width:768px){
  .chat-quick-tools{ z-index:1000007; }
  .flash-emoji-store{ left:8px !important; right:8px !important; width:auto; top:auto !important; bottom:62px; }
  .flash-emoji-body{ max-height:230px; }
  #chatQuickToolsBtn,.chat-tools-btn{ min-width:32px !important; }
}