@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap");

/* ==========================================================================
   luxury.css  —  refined, light, palette-agnostic skin for the chat site

   • Never hard-codes a hue. Every accent is derived from the colours the admin
     picks (btcolor / bgcolor / hicolor) through the --lx-* variables below.
   • Never goes dark: color-scheme is pinned to light, shadows are neutral.
   • Touches shape, depth, type and motion only. No width / height / padding /
     margin changes, so the pixel-based layout and client.min.js keep working.
   • Arabic text: no letter-spacing anywhere (it breaks letter joining).
   Load it AFTER the inline <style> block in index.ejs.
   ========================================================================== */


/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* Injected from the admin colours by the 3-line snippet in index.ejs.
     Fallbacks are system colours, not chosen hues. */
  --lx-brand: Highlight;
  --lx-bg: Canvas;
  --lx-hi: Canvas;
  --lx-ink: CanvasText;

  --lx-font-display: "El Messiri", "IBM Plex Sans Arabic", serif;
  --lx-font-body: "IBM Plex Sans Arabic", "El Messiri", sans-serif;

  --lx-r-sm: 10px;
  --lx-r-md: 2px;
  --lx-r-lg: 24px;
  --lx-r-pill: 999px;
  --lx-ease: cubic-bezier(.22, .8, .24, 1);

  /* Neutral fallbacks for browsers without color-mix() */
  --lx-line: rgb(0 0 0 / .14);
  --lx-line-soft: rgb(0 0 0 / .08);
  --lx-wash: rgb(0 0 0 / .04);
  --lx-surface: Canvas;
  --lx-surface-2: Canvas;
  --lx-brand-wash: rgb(0 0 0 / .06);
  --lx-brand-line: rgb(0 0 0 / .30);
  --lx-brand-ring: rgb(0 0 0 / .18);
  --lx-accent-ink: CanvasText;
  --lx-story-bg: none;

  --lx-shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 6px 16px -8px rgb(0 0 0 / .16);
  --lx-shadow-2: 0 2px 6px rgb(0 0 0 / .06), 0 24px 48px -18px rgb(0 0 0 / .32);
  /* Polished-metal feel on brand surfaces, works over any colour */
  --lx-gloss: inset 0 1px 0 rgb(255 255 255 / .34), inset 0 -12px 18px -14px rgb(0 0 0 / .30);
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --lx-line: color-mix(in srgb, var(--lx-ink) 14%, transparent);
    --lx-line-soft: color-mix(in srgb, var(--lx-ink) 8%, transparent);
    --lx-wash: color-mix(in srgb, var(--lx-ink) 4%, transparent);
    --lx-surface: color-mix(in srgb, var(--lx-hi) 38%, Canvas);
    --lx-surface-2: color-mix(in srgb, var(--lx-brand) 7%, Canvas);
    --lx-brand-wash: color-mix(in srgb, var(--lx-brand) 11%, transparent);
    --lx-brand-line: color-mix(in srgb, var(--lx-brand) 40%, transparent);
    --lx-brand-ring: color-mix(in srgb, var(--lx-brand) 28%, transparent);
    /* brand pulled toward the text colour so it stays readable on light surfaces */
    --lx-accent-ink: color-mix(in srgb, var(--lx-brand) 62%, var(--lx-ink));
    --lx-story-bg: linear-gradient(165deg, color-mix(in srgb, var(--lx-brand) 13%, Canvas), Canvas 62%);
  }
}


/* ---------- 2. Base, type, selection, scrollbars ------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft light from above on the area around the chat column (desktop) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 0%, rgb(255 255 255 / .22), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgb(0 0 0 / .10), transparent 70%);
}

@media (min-width: 700px) {
  body > .dad {
    box-shadow: 0 0 0 1px var(--lx-line), 0 30px 80px -24px rgb(0 0 0 / .35);
  }
}

/* Body face everywhere except icon elements (FontAwesome must keep its font).
   No !important: users' own font choices (inline / .member-name-el-messiri) still win. */
body,
body *:not(.fa) {
  font-family: var(--lx-font-body);
  font-weight: 500;
}

.fa {
  font-family: FontAwesome, var(--lx-font-body);
  font-weight: 500;
}

/* Display face for titles and navigation */
body .modal-title,
body .pnhead,
body .chat-trends-heading h2,
body .chat-trends-section-title h3,
body #tlogins > a.label-primary {
  font-family: var(--lx-font-display);
  font-weight: 700;
}

body .ae.main-nav-button,
body .trend-filter {
  font-family: FontAwesome, var(--lx-font-display);
  font-weight: 600;
}

body .ae.main-nav-button[data-target="#wall"] {
  font-family: var(--lx-font-display) !important;
  font-weight: 600 !important;
}

body .ae.main-nav-button[data-target="#wall"] > text {
  font-family: var(--lx-font-display) !important;
  font-weight: 600 !important;
}

body .modal-title { font-size: 18px !important; }
body .pnhead { font-size: 14px !important; }
body .chat-trends-heading h2 { font-size: 21px !important; }
body .chat-trends-section-title h3 { font-size: 17px !important; }

body #dpnl > .lx-panel-title-row {
  display: flex;
  float: left;
  align-items: center;
  gap: 1px;
  direction: rtl;
  position: relative;
  z-index: 20;
  margin: 3px 0 0 3px;
  margin-top: -16px;
}

body #dpnl > .lx-panel-title-row > .pnhead {
  float: none !important;
  margin: 0 !important;
  padding: 0 2px !important;
}

body #dpnl > .lx-panel-title-row > .brooms {
  display: none !important;
  position: static !important;
  box-sizing: border-box;
  width: auto;
  min-width: 20px;
  height: 20px;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

body #dpnl:has(> #rooms.active) > .lx-panel-title-row > .brooms {
  display: inline-flex !important;
}

::selection { background: var(--lx-brand-ring); }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--lx-brand-line) transparent;
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--lx-brand-line); border-radius: var(--lx-r-pill); }
}

/* Visible keyboard focus */
:where(a, button, [tabindex], input, textarea, select):focus-visible {
  outline: 2px solid var(--lx-accent-ink);
  outline-offset: 2px;
}


/* ---------- 3. Buttons, labels, fields ---------------------------------- */
body .btn {
  border-radius: var(--lx-r-sm) !important;
  transition: transform .18s var(--lx-ease), box-shadow .18s var(--lx-ease), filter .18s var(--lx-ease);
}

body label.label-danger:has(> span[aria-label="حذف الصورة الشخصية"]) {
  clip-path: inset(0 round var(--lx-r-sm)) !important;
}

body .btn:hover,
body a.label:hover { filter: brightness(1.05) saturate(1.04); }

body .btn:active { transform: translateY(1px) scale(.985); }

body .btn[disabled],
body .btn.disabled { opacity: .55; filter: saturate(.6); }

body .btn-primary,
body .label-primary,
body .bg-primary {
  border-color: transparent;
  box-shadow: var(--lx-gloss), 0 1px 2px rgb(0 0 0 / .12);
}

body .btn-success,
body .btn-danger,
body .btn-info,
body .btn-default {
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .30), 0 1px 2px rgb(0 0 0 / .12);
}

body .badge,
body .label-as-badge { border-radius: var(--lx-r-pill); }

body .form-control,
body select.form-control {
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-sm);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .05);
  transition: border-color .18s var(--lx-ease), box-shadow .18s var(--lx-ease);
}

body #u1, body #u2, body #u3, body #pass1, body #pass2,
body #usearch,
body .tbox {
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-sm) !important;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .05);
  transition: border-color .18s var(--lx-ease), box-shadow .18s var(--lx-ease);
}

body input[type="search"]#usearch,
body textarea#usearch { border-radius: 0 !important; }
body #tbox, body .tboxbc { border-radius: 18px !important; }

body .form-control:focus,
body #u1:focus, body #u2:focus, body #u3:focus, body #pass1:focus, body #pass2:focus,
body #usearch:focus,
body .tbox:focus {
  outline: 0;
  border-color: var(--lx-brand-line) !important;
  box-shadow: 0 0 0 4px var(--lx-brand-ring);
}


/* ---------- 4. Login screen --------------------------------------------- */
body #tlogins > a.label-primary {
  box-shadow: var(--lx-gloss), 0 10px 20px -14px var(--lx-brand-line);
}

body #tlogins > a.label-primary img {
  border-radius: var(--lx-r-sm);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .5);
}

body .nav-tabs {
  background: var(--lx-surface) !important;
  border-bottom: 1px solid var(--lx-line) !important;
}

body .nav-tabs > li > a,
body .nav-tabs > li > a:hover,
body .nav-tabs > li > a:focus,
body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--lx-ink) !important;
  opacity: .62;
  transition: opacity .2s var(--lx-ease), box-shadow .2s var(--lx-ease);
}

body .nav-tabs > li > a:hover { opacity: .9; }

body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus {
  opacity: 1;
  color: var(--lx-accent-ink) !important;
  box-shadow: inset 0 -3px 0 var(--lx-brand);
}

/* Login tabs: no surrounding tile/box; retain active color and a slim underline. */
body #tlogins > .nav-tabs {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #tlogins > .nav-tabs > li > a,
body #tlogins > .nav-tabs > li > a:hover,
body #tlogins > .nav-tabs > li > a:focus {
  outline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #tlogins > .nav-tabs > li > a:focus-visible {
  box-shadow: inset 0 -2px 0 var(--lx-brand-line) !important;
}

body #tlogins > .nav-tabs > li.active > a,
body #tlogins > .nav-tabs > li.active > a:hover,
body #tlogins > .nav-tabs > li.active > a:focus {
  color: var(--lx-accent-ink) !important;
  opacity: 1;
  box-shadow: inset 0 -3px 0 var(--lx-brand) !important;
}

body #tlogins .lonline {
  outline: 0 !important;
  box-shadow: inset 0 1px 0 var(--lx-line-soft);
}


/* ---------- 5. Bottom navigation ---------------------------------------- */
body .ae.main-nav-button {
  border: 1px solid transparent !important;
  border-radius: var(--lx-r-sm) !important;
  box-shadow: var(--lx-gloss), 0 1px 2px rgb(0 0 0 / .12);
  transition: transform .22s var(--lx-ease), box-shadow .22s var(--lx-ease), filter .18s var(--lx-ease);
}

body .ae.main-nav-button.button-interacted {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / .55),
    0 10px 20px -10px var(--lx-brand-line);
}

@property --lx-luxury-sheen-position {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@keyframes lxLuxurySheenClock {
  0% { --lx-luxury-sheen-position: 100%; }
  30%, 100% { --lx-luxury-sheen-position: 0%; }
}

html {
  animation: lxLuxurySheenClock 18s linear infinite;
}

@keyframes lxLoginSheen {
  0% { background-position: 100% 0; }
  73%, 100% { background-position: 0% 0; }
}

@keyframes lxProfileSheen {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

body #d0 {
  position: relative;
  box-shadow: 0 -10px 24px -18px rgb(0 0 0 / .4);
}

body #d0::after,
body .broadcasters::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: linear-gradient(105deg, transparent 44%, rgb(255 255 255 / 0) 47%, rgb(255 255 255 / .2) 50%, rgb(255 255 255 / 0) 53%, transparent 56%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  background-position: var(--lx-luxury-sheen-position, 100%) 0;
}

body #tlogins > a.lx-login-brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body #tlogins > a.lx-login-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: linear-gradient(105deg, transparent 44%, rgb(255 255 255 / 0) 47%, rgb(255 255 255 / .2) 50%, rgb(255 255 255 / 0) 53%, transparent 56%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  animation: lxLoginSheen 7.4s linear infinite;
}

body #upro .wetchedprofile.modal-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body #upro .wetchedprofile.modal-header::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: linear-gradient(105deg, transparent 44%, rgb(255 255 255 / 0) 47%, rgb(255 255 255 / .36) 50%, rgb(255 255 255 / 0) 53%, transparent 56%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  background-position: 0% 0;
}

body #upro.in .wetchedprofile.modal-header::after {
  animation: lxProfileSheen 5.4s linear both;
}

/* ---------- 6. Chat stream and composer --------------------------------- */
body #d2 .uzr.mm,
body #wall .uzr.mm,
body #wallm .uzr.mm,
body .d2 .uzr.mm {
  border: 1px solid var(--lx-line-soft) !important;
  border-radius: var(--lx-r-md) !important;
  box-shadow: var(--lx-shadow-1);
}

/* Public and private message cards: one soft bottom separator, never a doubled frame. */
body #d2 .uzr.mm,
body #d2 .uzr.mm.contest-notice,
body .dad > .bgg.border.corner[class*=" w"] .d2 .uzr.mm {
  border: 0 !important;
  border-bottom: 1px solid var(--lx-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

body .ppppmsgc,
body .pmrsgc {
  background-color: var(--lx-surface-2) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-md) !important;
}

body .tablebox.footer {
  border-top: 1px solid var(--lx-line);
  box-shadow: 0 -12px 26px -20px rgb(0 0 0 / .45);
}

body .tablebox .btn { border-radius: var(--lx-r-sm) !important; }

/* Compact message copy to reduce vertical overflow; keep member-name typography untouched. */
body #d2 .u-msg,
body #chats .u-msg,
body .cw .d2 .u-msg,
body #wall .u-msg,
body #wallm .u-msg,
body #d2bc .u-msg {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

/* Hide only the scrollbar chrome; keep message scrolling usable. */
body #d2,
body #chats .d2,
body .cw .d2,
body #wall #d2bc,
body #wallm {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body #d2::-webkit-scrollbar,
body #chats .d2::-webkit-scrollbar,
body .cw .d2::-webkit-scrollbar,
body #wall #d2bc::-webkit-scrollbar,
body #wallm::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Message text itself must expand naturally; only the conversation list scrolls. */
body #d2 .uzr.mm,
body #chats .uzr.mm,
body #chats .d2 .uzr.mm,
body .cw .d2 .uzr.mm,
body #wall .uzr.mm,
body #wallm .uzr.mm,
body #wall #d2bc .uzr.mm {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body #d2 .u-msg,
body #chats .u-msg,
body #chats .d2 .u-msg,
body .cw .d2 .u-msg,
body #wall .u-msg,
body #wallm .u-msg,
body #wall #d2bc .u-msg {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Pin the reply action to a fixed corner so zoomed text cannot push it onto a new line. */
body #d2 .uzr.mm:has(> .fa-reply.minix),
body #chats .uzr.mm:has(> .fa-reply.minix),
body #chats .d2 .uzr.mm:has(> .fa-reply.minix),
body .cw .d2 .uzr.mm:has(> .fa-reply.minix) {
  position: relative !important;
}

body #d2 .uzr.mm > .fa-reply.minix,
body #chats .uzr.mm > .fa-reply.minix,
body #chats .d2 .uzr.mm > .fa-reply.minix,
body .cw .d2 .uzr.mm > .fa-reply.minix {
  position: absolute !important;
  top: auto !important;
  right: 31px !important;
  bottom: 4px !important;
  left: auto !important;
  z-index: 3;
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  clear: none !important;
  box-sizing: border-box;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 1px !important;
  overflow: hidden;
  white-space: nowrap !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body #d2 .uzr.mm > .fa-reply.minix::before,
body #chats .uzr.mm > .fa-reply.minix::before,
body #chats .d2 .uzr.mm > .fa-reply.minix::before,
body .cw .d2 .uzr.mm > .fa-reply.minix::before {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1;
}

body #d2 .uzr.mm:has(> .fa-reply.minix) > .fa-times.minix,
body #chats .uzr.mm:has(> .fa-reply.minix) > .fa-times.minix,
body #chats .d2 .uzr.mm:has(> .fa-reply.minix) > .fa-times.minix,
body .cw .d2 .uzr.mm:has(> .fa-reply.minix) > .fa-times.minix {
  position: absolute !important;
  top: auto !important;
  right: 5px !important;
  bottom: 4px !important;
  left: auto !important;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  clear: none !important;
  box-sizing: border-box;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 1px !important;
  line-height: 1 !important;
}

body #wall { background: var(--lx-surface) !important; }

body .youtubeSearch > div:nth-of-type(2) {
  background: var(--lx-surface) !important;
  border-bottom: 1px solid var(--lx-line) !important;
}

body #youtubeSearchButton {
  background: var(--lx-wash) !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-sm) !important;
  box-shadow: none !important;
}


/* ---------- 7. Side panel, lists, rooms --------------------------------- */
body #dpnl {
  border: 1px solid var(--lx-line) !important;
  border-radius: 4px !important;
  box-shadow: var(--lx-shadow-2);
}

@keyframes lxPanelEnter {
  from { opacity: .9; transform: scale(.997); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes lxPanelContentEnter {
  from { opacity: .88; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lxNotificationEnter {
  0% { opacity: 0; transform: scale(.96); }
  72% { opacity: 1; transform: scale(1.005); }
  100% { opacity: 1; transform: scale(1); }
}

/* Subtle panel entrance; room count is in the title row outside transformed tab panes. */
body #dpnl[style*="display: block"] {
  animation: lxPanelEnter .30s cubic-bezier(.22, .8, .24, 1) both;
}

/* Re-run a subtler entrance when switching the active sidebar tab. */
body #dpnl > .tab-pane.active {
  animation: lxPanelContentEnter .24s cubic-bezier(.22, .8, .24, 1) both;
}

/* Short, restrained entrance for new toast notifications and notification cards. */
body .dad > .hand.corner,
body #notification > .notification {
  animation: lxNotificationEnter .28s cubic-bezier(.22, .8, .24, 1) both;
}

body #dpnl > .label-danger {
  display: inline-flex !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center;
}

body #dpnl > .label-danger::before {
  display: block;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1;
}

body #users .uzr:not(.ninr):not(.hascover),
body #chats .uzr,
body #rooms .room {
  border-radius: var(--lx-r-md) !important;
  box-shadow: inset 0 0 0 1px var(--lx-line-soft);
}

/* Room rows use the same single soft bottom separator as message cards. */
body #rooms .room {
  border: 0 !important;
  border-bottom: 1px solid var(--lx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* One soft separator per online member and public/private message card. */
body #users .uzr:not(.ninr):not(.hascover),
body #d2 .uzr.mm,
body #chats .uzr.mm,
body #chats .d2 .uzr.mm,
body .cw .d2 .uzr.mm,
body .w .d2 .uzr.mm,
body #wall .uzr.mm,
body #wallm .uzr.mm,
body #wall #d2bc .uzr.mm,
body #d2bc .uzr.mm {
  border: 0 !important;
  border-bottom: 1px solid var(--lx-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body #users .u-pic:not(.roundpic),
body #rooms .u-pic {
  border-radius: var(--lx-r-sm) !important;
}

body .bgg { background-color: var(--lx-surface-2); }
body .pophead { background-color: var(--lx-brand-wash); }

body #settings .tc,
body .addGruMsg {
  border-radius: var(--lx-r-md) !important;
  box-shadow: var(--lx-shadow-1);
}

/* Settings panel: give its controls and inner cards one intentionally rounded style. */
body #settings .borderg.corner,
body #settings .panel,
body #settings .well {
  border-radius: 14px !important;
  border-color: var(--lx-line-soft) !important;
}

body #settings .btn,
body #settings button,
body #settings .label,
body #settings .tc {
  border-radius: 12px !important;
}

body #settings input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body #settings select,
body #settings textarea,
body #settings .form-control {
  border-radius: 11px !important;
}

body #settings img {
  border-radius: 10px;
}

/* Profile moderation fields: rounded inputs with their actions on the same row. */
body #upro .likebox,
body #upro .pointsbox,
body #upro .msgbox {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--lx-line) !important;
  border-left: 1px solid var(--lx-line) !important;
  border-radius: 0 !important;
}

body #upro .likebox {
  border-top: 1px solid var(--lx-line) !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

body #upro .pointsbox,
body #upro .msgbox {
  border-top: 0 !important;
}

body #upro .msgbox {
  border-bottom: 1px solid var(--lx-line) !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

body #upro .likebox .likec,
body #upro .pointsbox .pointss,
body #upro .msgbox .usmsg,
body #upro .roomzbox .rpwd {
  display: inline-block !important;
  box-sizing: border-box;
  width: calc(100% - 88px) !important;
  max-width: 230px;
  min-width: 0;
  height: 34px !important;
  margin: 0 4px 3px 0 !important;
  padding: 6px 10px !important;
  vertical-align: middle;
  border: 1px solid var(--lx-line) !important;
  border-radius: 12px !important;
}

body #upro .likebox .ulikec,
body #upro .pointsbox .upointss,
body #upro .msgbox .usmsgs,
body #upro .roomzbox .uroomz {
  display: inline-flex !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 34px !important;
  margin: 0 0 3px 0 !important;
  padding: 0 10px !important;
  vertical-align: middle;
  border-radius: 12px !important;
  white-space: nowrap;
}

body #upro .roomzbox .rpwd + br {
  display: none !important;
}

/* Room selector, room password and transfer action align like the group controls. */
body #upro .roomzbox {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) auto;
  align-items: end;
  column-gap: 7px;
  box-sizing: border-box;
}

body #upro .roomzbox > br {
  display: none !important;
}

body #upro .roomzbox > label:first-of-type {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0 0 3px !important;
}

body #upro .roomzbox > .roomz {
  grid-column: 1;
  grid-row: 2;
  width: 100% !important;
  min-width: 0;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

body #upro .roomzbox > label:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0 0 3px !important;
}

body #upro .roomzbox > .rpwd {
  grid-column: 2;
  grid-row: 2;
  width: 100% !important;
  max-width: none;
  height: 34px !important;
  margin: 0 !important;
}

body #upro .roomzbox > .uroomz {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  min-width: 60px;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  white-space: nowrap;
}

/* Group, duration and save controls share one compact row in the profile. */
body #upro .powerbox {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) auto;
  align-items: end;
  column-gap: 7px;
  box-sizing: border-box;
}

body #upro .powerbox > br {
  display: none !important;
}

body #upro .powerbox > label:first-of-type {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0 0 3px !important;
}

body #upro .powerbox > .userpower {
  grid-column: 1;
  grid-row: 2;
  width: 100% !important;
  min-width: 0;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

body #upro .powerbox > label:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0 0 3px !important;
}

body #upro .powerbox > .userdays {
  grid-column: 2;
  grid-row: 2;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: 34px !important;
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 1px solid var(--lx-line) !important;
  border-radius: 12px !important;
}

body #upro .powerbox > .upower {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 60px;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  line-height: 1 !important;
  text-align: center !important;
  border-radius: 12px !important;
  white-space: nowrap;
}

/* Merge the group and room controls into one panel; hide the optional room password. */
body #upro .powerbox,
body #upro .roomzbox {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  border-right: 1px solid var(--lx-line) !important;
  border-left: 1px solid var(--lx-line) !important;
  border-radius: 0 !important;
}

body #upro .powerbox {
  border-top: 1px solid var(--lx-line) !important;
  border-bottom: 0 !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

body #upro .roomzbox {
  grid-template-columns: minmax(0, 1fr) auto;
  border-top: 0 !important;
  border-bottom: 1px solid var(--lx-line) !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

body #upro .roomzbox > label:nth-of-type(2),
body #upro .roomzbox > .rpwd {
  display: none !important;
}

body #upro .roomzbox > .roomz {
  grid-column: 1;
  grid-row: 2;
}

body #upro .roomzbox > .uroomz {
  grid-column: 2;
  grid-row: 2;
}


/* ---------- 8. Trends page ---------------------------------------------- */
body .chat-trends-section {
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-r-md);
  box-shadow: var(--lx-shadow-1);
}

body .trend-filter {
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-pill);
  background: transparent;
  color: inherit;
  transition: background-color .2s var(--lx-ease), border-color .2s var(--lx-ease), color .2s var(--lx-ease);
}

body .trend-filter.active {
  background: var(--lx-brand-wash);
  border-color: var(--lx-brand-line);
  color: var(--lx-accent-ink);
}

body .chat-trends-empty { opacity: .65; }


/* ---------- 9. Stories --------------------------------------------------- */
body #story {
  background-color: var(--lx-surface) !important;
  background-image: var(--lx-story-bg) !important;
}

body .syriastory { background: var(--lx-surface-2) !important; }
body #BarStory { background-color: var(--lx-brand); border-radius: var(--lx-r-pill); }
body #StoryProgress { background-color: var(--lx-line); border-radius: var(--lx-r-pill); }


/* ---------- 10. Modals, popovers, calls --------------------------------- */
body .modal-backdrop.in {
  opacity: .30;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body .modal-content {
  position: relative;
  border: 0;
  border-radius: var(--lx-r-lg);
  box-shadow: var(--lx-shadow-2), 0 0 0 1px var(--lx-line-soft);
}

body #upro .modal-dialog,
body #upro .modal-content {
  border-radius: 2px !important;
}

body #upro .modal-title {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body #mnot .modal-dialog,
body #mnot .modal-content,
body #pollModal .modal-dialog,
body #pollModal .modal-content,
body #mkr .modal-dialog,
body #mkr .modal-content,
body #changePasswordModal .modal-dialog,
body #changePasswordModal .modal-content {
  border-radius: 2px !important;
}

body #gridSystemModal .modal-dialog,
body #gridSystemModal .modal-content {
  border-radius: 2px !important;
}

body #mnot .modal-title,
body #pollModal .modal-title,
body #mkr .modal-title,
body #changePasswordModal .modal-title {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body #mnot .modal-title::before,
body #pollModal .modal-title::before,
body #mkr .modal-title::before,
body #changePasswordModal .modal-title::before {
  font-family: FontAwesome !important;
  font-size: .9em !important;
  font-weight: 400 !important;
  margin-inline-end: 6px;
  vertical-align: middle;
}

body .modal-header {
  border-bottom: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

body .modal-footer {
  border-top: 1px solid var(--lx-line-soft);
  background: var(--lx-wash);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Engraved inner frame on the simple dialogs (delete these 5 lines to drop it) */
body #changePasswordModal .modal-content::after,
body #pollModal .modal-content::after,
body #mnot .modal-content::after,
body #gridSystemModal .modal-content::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--lx-line-soft);
  border-radius: calc(var(--lx-r-lg) - 5px);
  pointer-events: none;
}

body #changePasswordModal .modal-content::after,
body #pollModal .modal-content::after,
body #mnot .modal-content::after,
body #gridSystemModal .modal-content::after {
  border-radius: 1px !important;
}

body .modal.fade .modal-dialog {
  transform: translateY(14px) scale(.975);
  transition: transform .34s var(--lx-ease);
}

body .modal.in .modal-dialog { transform: none; }

body .popover {
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-r-md);
  box-shadow: var(--lx-shadow-2);
}

body #callvideonot > div,
body #videoCall > div {
  border: 1px solid var(--lx-line) !important;
  border-radius: var(--lx-r-lg) !important;
  box-shadow: var(--lx-shadow-2);
}

body .profile-action-box { border-radius: var(--lx-r-sm) !important; }


/* ---------- 11. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}