/* ==========================================================================
   Avora Theme Custom CSS (X-Sidebar + Threads-Feed + Native App Mobile UI/UX)
   ========================================================================== */

:root, [data-theme], [data-theme$="-dark"], html, body {
  --font-sans: 'Urbanist', 'Segoe UI This', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
  --avora-primary: #027945 !important;
  --color-primary: #027945 !important;
  --color-primary-content: #ffffff !important;
  --primary: #027945 !important;
}

.btn-primary, .button--primary, [class*="btn-primary"] {
  background-color: #027945 !important;
  border-color: #027945 !important;
  color: #ffffff !important;
}

.text-primary {
  color: #027945 !important;
}

.bg-primary {
  background-color: #027945 !important;
}

.border-primary {
  border-color: #027945 !important;
}

body, html, input, textarea, select, button {
  font-family: 'Urbanist', 'Segoe UI This', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif !important;
}

html, body {
  overflow-x: clip !important;
}

/* Outer App Gutter (left & right side gap / fakaa) */
.avora-main-wrapper, #mainAppWrapper {
  width: 100% !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

#mainAppWrapper:has(#centerFeed),
.index-newsfeed #mainAppWrapper,
body[data-page="index"] #mainAppWrapper {
  column-gap: 1.5rem !important;
  justify-content: center !important;
}

.site-content {
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1536px) {
  .site-content {
    max-width: 1280px !important;
  }
}

/* Threads Feed Max-Width */
.avora-feed-col, #centerFeed {
  width: 100% !important;
  max-width: 590px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-inline: 0 !important;
  border: 0 !important;
}

@media (max-width: 767.98px) {
  .avora-main-wrapper, #mainAppWrapper {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  #centerFeed,
  .avora-feed-col {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-inline: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .avora-main-wrapper, #mainAppWrapper {
    justify-content: center !important;
  }
  #mainAppWrapper:has(#centerFeed),
  .index-newsfeed #mainAppWrapper,
  body[data-page="index"] #mainAppWrapper {
    column-gap: 1.5rem !important;
  }
  .avora-feed-col, #centerFeed {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 590px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 1280px) {
  .avora-main-wrapper, #mainAppWrapper {
    justify-content: center !important;
  }
  #mainAppWrapper:has(#centerFeed),
  .index-newsfeed #mainAppWrapper,
  body[data-page="index"] #mainAppWrapper {
    column-gap: 1.5rem !important;
  }
  .avora-feed-col, #centerFeed {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 590px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #rightSidebar,
  aside.hidden.xl\:flex {
    padding-inline-start: 0 !important;
  }
}

@media (min-width: 1536px) {
  .avora-main-wrapper, #mainAppWrapper {
    max-width: 1280px !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  #mainAppWrapper:has(#centerFeed),
  .index-newsfeed #mainAppWrapper,
  body[data-page="index"] #mainAppWrapper {
    column-gap: 1.5rem !important;
  }
  .avora-feed-col, #centerFeed {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 620px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #rightSidebar,
  aside.hidden.xl\:flex {
    padding-inline-start: 0 !important;
  }
}

/* Invisible Scrollbars Across Sidebars, Strips & Panels */
#site-sidebar,
#site-sidebar *,
#rightSidebar,
.js_stories-strip,
.js_scroller,
.dropdown-menu,
.no-scrollbar,
[class*="scrollbar-width:none"] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#site-sidebar::-webkit-scrollbar,
#site-sidebar *::-webkit-scrollbar,
#rightSidebar::-webkit-scrollbar,
.js_stories-strip::-webkit-scrollbar,
.js_scroller::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar,
[class*="scrollbar-width:none"]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Squircle Action Button */
.action-squircle {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  cursor: pointer;
  position: relative;
}
.action-squircle:hover {
  transform: translateY(-1px);
}
.action-squircle:active {
  transform: scale(0.95);
}

/* Shimmer Skeleton Animation for 100M-1B+ User Perceived Speed */
@keyframes avora-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.avora-skeleton {
  position: relative;
  overflow: hidden;
  background-color: rgba(150, 150, 150, 0.08);
}
.avora-skeleton::after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.18) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: avora-shimmer 1.8s infinite;
  content: '';
}
[data-theme$="-dark"] .avora-skeleton {
  background-color: rgba(255, 255, 255, 0.05);
}
[data-theme$="-dark"] .avora-skeleton::after {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.09) 60%,
    rgba(255, 255, 255, 0)
  );
}

/* Threads Vertical Connector Line */
.thread-line {
  width: 2px;
  background-color: currentColor;
  opacity: 0.15;
  border-radius: 9999px;
}

.thread-connector-line {
  position: absolute;
  top: 48px;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-color: rgba(150, 150, 150, 0.25);
  border-radius: 9999px;
}
[data-theme$="-dark"] .thread-connector-line {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Mobile Safe Insets */
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}
.pb-safe {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* Mobile Bottom Sheet Smooth Slide Up */
#avoraBottomSheet {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
#avoraBottomSheetBackdrop {
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   Responsive Desktop Layout Display Helpers (Without Obsolete Fixed Widths)
   ========================================================================== */
@media (min-width: 1280px) {
  .xl\:flex {
    display: flex !important;
  }
  .xl\:inline {
    display: inline !important;
  }
  .xl\:justify-start {
    justify-content: flex-start !important;
  }
  .xl\:justify-between {
    justify-content: space-between !important;
  }
  .xl\:pe-4 {
    padding-inline-end: 1rem !important;
  }
  .xl\:ps-6 {
    padding-inline-start: 1.5rem !important;
  }
}

/* Feed Tabs 14px & #04AA6D Active State */
.avora-feed-tab {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}
@media (min-width: 640px) {
  .avora-feed-tab {
    font-size: 14px !important;
  }
}
.avora-feed-tab.is-active {
  background-color: #04AA6D !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(4, 170, 109, 0.35) !important;
}

/* Story Widget & Wallet Responsive Grid */
.avora-story-avatar {
  width: 52px !important;
  height: 52px !important;
}
.avora-wallet-credit-card {
  background: linear-gradient(135deg, #027945 0%, #04AA6D 100%) !important;
  color: #ffffff !important;
}
@media (min-width: 1024px) {
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5 !important;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7 !important;
  }
}

/* Publisher Modal Controls & Slider Scroll Fix */
.publisher-footer-buttons .accordion-toggle,
.publisher-footer-buttons .avora-publisher-settings-btn {
  width: 2.375rem !important;
  min-width: 2.375rem !important;
  max-width: 2.375rem !important;
  flex: 0 0 2.375rem !important;
}
.publisher-slider {
  overflow-x: hidden !important;
}
.publisher-footer-buttons {
  overflow-x: hidden !important;
}

/* Layout Divider and Border Lines Optimization (Task 7) */
#site-sidebar {
  border-inline-end: 1px solid #e5e7eb !important;
}
#centerFeed {
  border-inline: 0 !important;
  border: 0 !important;
}
#whoToFollowWidget,
#trendingTopicsWidget,
#publisher-trigger,
.post,
.avora-stories-card {
  border: 1px solid #e5e7eb !important;
}
@media (max-width: 767px) {
  #centerFeed {
    border-inline: 0 !important;
  }
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #site-sidebar {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.12) !important;
}
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #centerFeed {
  border-inline: 0 !important;
  border: 0 !important;
}
@media (max-width: 767px) {
  :is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #centerFeed {
    border-inline: 0 !important;
  }
}
/* Surface and Card Light/Day Mode Rules */
:is(html:not(.dark):not([data-theme$="-dark"]), html[data-theme="avora"]:not(.dark)) #whoToFollowWidget,
:is(html:not(.dark):not([data-theme$="-dark"]), html[data-theme="avora"]:not(.dark)) #trendingTopicsWidget,
:is(html:not(.dark):not([data-theme$="-dark"]), html[data-theme="avora"]:not(.dark)) #publisher-trigger,
:is(html:not(.dark):not([data-theme$="-dark"]), html[data-theme="avora"]:not(.dark)) .post,
:is(html:not(.dark):not([data-theme$="-dark"]), html[data-theme="avora"]:not(.dark)) .avora-stories-card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #0f172a !important;
}
:is(html:not(.dark):not([data-theme$="-dark"]), html[data-theme="avora"]:not(.dark)) #publisher-trigger > div > div.border-t {
  border-color: #f1f5f9 !important;
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #whoToFollowWidget,
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #trendingTopicsWidget,
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #publisher-trigger,
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) .post,
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) .avora-stories-card {
  background-color: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f5f5f5 !important;
}
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #publisher-trigger > div > div.border-t {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Almeet Modern Brand Logo (Urbanist + Segoe UI This)
   ========================================================================== */
.almeet-brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  background-color: transparent !important;
  user-select: none;
  gap: 0.625rem; /* 10px optical gap with icon */
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease, background-color 0.15s ease;
}

.almeet-brand-logo:hover {
  opacity: 0.94;
}

.almeet-brand-logo:active {
  transform: scale(0.98);
}

.almeet-logo-icon {
  width: 2.25rem; /* 36px */
  height: 2.25rem;
  object-fit: contain;
  border-radius: 0.625rem;
  flex-shrink: 0;
  display: block;
}

.almeet-logo-icon.hidden,
:is(html:not(.dark):not([data-theme$="-dark"])) .almeet-logo-icon.hidden {
  display: none !important;
}

:is(html.dark, html[data-theme$="-dark"], html:not([data-theme="avora"]) body.night-mode) .almeet-logo-icon.dark\:hidden {
  display: none !important;
}

:is(html.dark, html[data-theme$="-dark"], html:not([data-theme="avora"]) body.night-mode) .almeet-logo-icon.dark\:block {
  display: block !important;
}

.almeet-logo-text {
  font-family: 'Urbanist', 'Segoe UI This', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.5625rem !important; /* 25px */
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "kern" 1 !important;
  vertical-align: middle;
}

/* Default display for logo text outside sidebar */
:not(#site-sidebar) > .almeet-brand-logo .almeet-logo-text,
.almeet-brand-logo:not(#site-sidebar *) .almeet-logo-text {
  display: inline-block;
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) .almeet-logo-text {
  color: #ffffff !important;
}

/* ==========================================================================
   Responsive Sidebar Brand Logo & Icon (Tablet / Compact vs Full Desktop)
   ========================================================================== */
#site-sidebar .almeet-brand-logo {
  justify-content: center !important;
  width: 3rem !important; /* 48px square matching icon buttons */
  height: 3rem !important;
  padding: 0.375rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0 !important;
}

#site-sidebar .almeet-logo-text {
  display: none !important;
}

@media (min-width: 1280px) {
  #site-sidebar .almeet-brand-logo {
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    padding: 0.375rem 0.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0.625rem !important;
  }

  #site-sidebar .almeet-logo-text {
    display: inline-block !important;
  }
}

/* ==========================================================================
   Profile, Page, Group & Event Layout (Posts Feed on Left, About on Right)
   5B+ User Mindset: Zero Layout Shifts, Full Responsive Fidelity
   ========================================================================== */

/* Tailwind arbitrary grid column classes polyfill */
@media (min-width: 1024px) {
  .lg\:grid-cols-\[minmax\(0\,1fr\)_23rem\] {
    grid-template-columns: minmax(0, 1fr) 23rem !important;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-\[minmax\(0\,1fr\)_18rem_18rem\] {
    grid-template-columns: minmax(0, 1fr) 18rem 18rem !important;
  }
}

/* Core Layout Grids for Profile, Page, Group, and Event */
.almeet-profile-grid,
.almeet-page-grid,
.almeet-group-grid,
.almeet-event-grid {
  display: grid;
  width: 100%;
}

/* Mobile & Tablet (< 1024px):
   - Single column grid
   - About accordion toggle stays at top (order: 1) for instant discovery
   - Feed follows directly below (order: 2)
   - Chatbox follows at bottom (order: 3)
*/
@media (max-width: 1023.98px) {
  .almeet-profile-grid .almeet-sidebar-col,
  .almeet-page-grid .almeet-sidebar-col,
  .almeet-group-grid .almeet-sidebar-col,
  .almeet-event-grid .almeet-sidebar-col {
    order: 1 !important;
  }

  .almeet-profile-grid .almeet-feed-col,
  .almeet-page-grid .almeet-feed-col,
  .almeet-group-grid .almeet-feed-col,
  .almeet-event-grid .almeet-feed-col {
    order: 2 !important;
  }

  .almeet-group-grid .almeet-chatbox-col,
  .almeet-event-grid .almeet-chatbox-col {
    order: 3 !important;
  }
}

/* Desktop (>= 1024px):
   - Left Column: Primary Feed (minmax(0, 1fr))
   - Right Column: About Details Sidebar (23rem / 368px)
*/
@media (min-width: 1024px) {
  .almeet-profile-grid.has-sidebar,
  .almeet-profile-grid:has(.almeet-sidebar-col),
  .almeet-page-grid.has-sidebar,
  .almeet-page-grid:has(.almeet-sidebar-col),
  .almeet-group-grid.has-sidebar,
  .almeet-group-grid:has(.almeet-sidebar-col),
  .almeet-event-grid.has-sidebar,
  .almeet-event-grid:has(.almeet-sidebar-col) {
    grid-template-columns: minmax(0, 1fr) 23rem !important;
  }

  .almeet-profile-grid .almeet-feed-col,
  .almeet-page-grid .almeet-feed-col,
  .almeet-group-grid .almeet-feed-col,
  .almeet-event-grid .almeet-feed-col {
    order: 1 !important;
    grid-column: 1 !important;
  }

  .almeet-profile-grid .almeet-sidebar-col,
  .almeet-page-grid .almeet-sidebar-col,
  .almeet-group-grid .almeet-sidebar-col,
  .almeet-event-grid .almeet-sidebar-col {
    order: 2 !important;
    grid-column: 2 !important;
  }
}

/* XL Desktop (>= 1280px) when 3 columns exist (Group / Event with chatbox):
   - Column 1 (Left): Feed (minmax(0, 1fr))
   - Column 2 (Middle/Right): About (18rem)
   - Column 3 (Far Right): Chatbox (18rem)
*/
@media (min-width: 1280px) {
  .almeet-group-grid.has-chatbox,
  .almeet-group-grid:has(.almeet-chatbox-col),
  .almeet-event-grid.has-chatbox,
  .almeet-event-grid:has(.almeet-chatbox-col) {
    grid-template-columns: minmax(0, 1fr) 18rem 18rem !important;
  }

  .almeet-group-grid .almeet-chatbox-col,
  .almeet-event-grid .almeet-chatbox-col {
    order: 3 !important;
    grid-column: 3 !important;
  }
}

/* ==========================================================================
   Publisher Modal UI/UX Scroll & Large Post Fix (Desktop & Mobile)
   5B+ User Mindset: Zero Layout Shifts, Hidden Scrollbar, Smooth Touch/Wheel
   - Fully enables mouse-wheel scrolling (desktop) and touch swiping (mobile)
   - Scrollbar completely hidden visually (borderless native-app aesthetic)
   - When scrolling down, Post button, attachments & toolbar are visible & accessible
   ========================================================================== */

/* Universal Scrollbar Elimination for Publisher Modal (Firefox, IE/Edge, WebKit) */
.publisher-modal-body,
#publisher-wapper-modal,
#publisher-wapper-modal #publisher-box,
#publisher-wapper-modal .publisher-slider,
#publisher-wapper-modal .publisher-message,
#publisher-wapper-modal .colored-text-wrapper,
#publisher-wapper-modal .ql-container,
#publisher-wapper-modal .ql-editor,
.no-scrollbar {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE & Edge */
}

.publisher-modal-body::-webkit-scrollbar,
#publisher-wapper-modal::-webkit-scrollbar,
#publisher-wapper-modal #publisher-box::-webkit-scrollbar,
#publisher-wapper-modal .publisher-slider::-webkit-scrollbar,
#publisher-wapper-modal .publisher-message::-webkit-scrollbar,
#publisher-wapper-modal .colored-text-wrapper::-webkit-scrollbar,
#publisher-wapper-modal .ql-container::-webkit-scrollbar,
#publisher-wapper-modal .ql-editor::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Modal Dialog Sizing & Flex Layout in Modal Mode */
.modal__dialog.modal__dialog--scroll-inside:has(#publisher-wapper-modal),
.modal__dialog:has(#publisher-wapper-modal),
.modal__dialog:has(.publisher-modal-body) {
  max-height: min(52rem, calc(100dvh - 3rem)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#modal-content:has(#publisher-wapper-modal),
#modal-content:has(.publisher-modal-body) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: min(52rem, calc(100dvh - 3rem)) !important;
  height: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 639.98px) {
  .modal__dialog.modal__dialog--scroll-inside:has(#publisher-wapper-modal),
  .modal__dialog:has(#publisher-wapper-modal),
  .modal__dialog:has(.publisher-modal-body) {
    max-height: calc(100dvh - 1.5rem) !important;
    height: auto !important;
  }
}

/* Smooth-scrolling modal body container */
.modal__body:has(#publisher-wapper-modal),
.publisher-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 7.5rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

@media (max-width: 639.98px) {
  .modal__body:has(#publisher-wapper-modal),
  .publisher-modal-body {
    max-height: calc(100dvh - 5.5rem) !important;
  }
}

/* Modal Publisher Wrapper and Box Flow */
#publisher-wapper-modal {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

#publisher-wapper-modal #publisher-box {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  width: 100% !important;
}

#publisher-wapper-modal .publisher-message {
  flex-shrink: 0 !important;
  min-height: auto !important;
}

#publisher-wapper-modal .ql-container {
  font-family: inherit !important;
  height: auto !important;
}

#publisher-wapper-modal .ql-editor {
  min-height: 7rem !important;
  height: auto !important;
  overflow: visible !important;
}

#publisher-wapper-modal .publisher-slider {
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* Sticky footer toolbar & Post button inside modal */
#publisher-wapper-modal .publisher-footer-buttons {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 30 !important;
  background-color: #ffffff !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04) !important;
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #publisher-wapper-modal .publisher-footer-buttons {
  background-color: #161616 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45) !important;
}

/* ==========================================================================
   Missing Tabler Icon Utilities (16 Missing Glyph Classes)
   Supported utility classes:
   icon-[tabler--api-app]
   icon-[tabler--brand-alipay]
   icon-[tabler--brand-coinbase]
   icon-[tabler--brand-google]
   icon-[tabler--chart-arrows-vertical]
   icon-[tabler--clock-dollar]
   icon-[tabler--credit-card-pay]
   icon-[tabler--device-mobile-off]
   icon-[tabler--eye-check]
   icon-[tabler--folders]
   icon-[tabler--gavel]
   icon-[tabler--player-track-next]
   icon-[tabler--refresh-dot]
   icon-[tabler--vector]
   icon-[tabler--video-plus]
   icon-[tabler--world-www]
   ========================================================================== */
.icon-\[tabler--api-app\],
.icon-\[tabler--brand-alipay\],
.icon-\[tabler--brand-coinbase\],
.icon-\[tabler--brand-google\],
.icon-\[tabler--chart-arrows-vertical\],
.icon-\[tabler--clock-dollar\],
.icon-\[tabler--credit-card-pay\],
.icon-\[tabler--device-mobile-off\],
.icon-\[tabler--eye-check\],
.icon-\[tabler--folders\],
.icon-\[tabler--gavel\],
.icon-\[tabler--player-track-next\],
.icon-\[tabler--refresh-dot\],
.icon-\[tabler--vector\],
.icon-\[tabler--video-plus\],
.icon-\[tabler--world-www\] {
  width: 1em;
  height: 1em;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.icon-\[tabler--api-app\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15h-6.5a2.5 2.5 0 1 1 0 -5h4.5m0 0v-5.5a2.5 2.5 0 1 1 5 0v4.5m0 0h5.5a2.5 2.5 0 1 1 0 5h-4.5m0 0v5.5a2.5 2.5 0 1 1 -5 0v-4.5'/%3E%3C/svg%3E");
}
.icon-\[tabler--brand-alipay\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 3h-14a2 2 0 0 0 -2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2 -2v-14a2 2 0 0 0 -2 -2zM7 7h10M12 7v5m-4 0h8M9 16c1.5 -2 3.5 -3 6 -3m-4 2c1.5 1.5 2.5 3 3 5'/%3E%3C/svg%3E");
}
.icon-\[tabler--brand-coinbase\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3a9 9 0 1 0 9 9a9 9 0 0 0 -9 -9zm0 5a4 4 0 0 1 4 4h-3a1 1 0 0 0 -1 -1v-3z'/%3E%3C/svg%3E");
}
.icon-\[tabler--brand-google\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.788 5.108a9 9 0 1 0 3.212 6.892h-8'/%3E%3C/svg%3E");
}
.icon-\[tabler--chart-arrows-vertical\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 21v-14m-3 3l3 -3l3 3M9 18l3 3l3 -3M9 3v14M6 6l3 -3l3 3'/%3E%3C/svg%3E");
}
.icon-\[tabler--clock-dollar\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.866 10.45a9 9 0 1 0 -7.815 10.488M12 7v5l1.5 1.5M21 15h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5m1 1v-8'/%3E%3C/svg%3E");
}
.icon-\[tabler--credit-card-pay\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19h-6a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5M3 10h18M16 19h6m-3 -3l3 3l-3 3'/%3E%3C/svg%3E");
}
.icon-\[tabler--device-mobile-off\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7.159 3.185c.256 -.119 .54 -.185 .841 -.185h8a2 2 0 0 1 2 2v9m0 4v1a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-13M11 4h2M12 17v.01M3 3l18 18'/%3E%3C/svg%3E");
}
.icon-\[tabler--eye-check\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0M11.102 17.957c-3.204 -.307 -5.91 -2.293 -8.102 -5.957c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6a19.5 19.5 0 0 1 -.663 1.032M15 19l2 2l4 -4'/%3E%3C/svg%3E");
}
.icon-\[tabler--folders\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 4h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h2'/%3E%3C/svg%3E");
}
.icon-\[tabler--gavel\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 10l7.383 7.418c.823 .82 .823 2.164 0 2.985a2.11 2.11 0 0 1 -2.988 0l-7.395 -7.403M6 9l4 4M13 6l-4 -4l-4.172 4.172a2 2 0 0 0 0 2.828l1.172 1.172a2 2 0 0 0 2.828 0l4.172 -4.172zM11 14l-4 -4l-4.172 4.172a2 2 0 0 0 0 2.828l1.172 1.172a2 2 0 0 0 2.828 0l4.172 -4.172z'/%3E%3C/svg%3E");
}
.icon-\[tabler--player-track-next\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5v14l8 -7zM14 5v14l8 -7zM21 5v14'/%3E%3C/svg%3E");
}
.icon-\[tabler--refresh-dot\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'/%3E%3C/svg%3E");
}
.icon-\[tabler--vector\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1zM17 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1zM17 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1zM3 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1zM5 7v10M19 7v10M7 5h10M7 19h10'/%3E%3C/svg%3E");
}
.icon-\[tabler--video-plus\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4zM3 8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2zM7 12h4M9 10v4'/%3E%3C/svg%3E");
}
.icon-\[tabler--world-www\] {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4M11.5 3a16.989 16.989 0 0 0 -1.826 4M12.5 3a16.989 16.989 0 0 1 1.828 4M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4M11.5 21a16.989 16.989 0 0 1 -1.826 -4M12.5 21a16.989 16.989 0 0 0 1.828 -4M2 10l1 4l1.5 -4l1.5 4l1 -4M17 10l1 4l1.5 -4l1.5 4l1 -4M9.5 10l1 4l1.5 -4l1.5 4l1 -4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Post Photo Grid Layout Utilities (Classic, Columns, Frame)
   Supported utility classes:
   sm:grid-cols-4
   sm:h-96
   sm:h-[30rem]
   sm:h-[34rem]
   sm:mt-10
   sm:mt-12
   gap-0.5
   sm:gap-4
   sm:p-4
   ========================================================================== */
.gap-0\.5 {
  gap: 0.125rem !important;
}

@media (min-width: 640px) {
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .sm\:h-96 {
    height: 24rem !important;
  }
  .sm\:h-\[30rem\] {
    height: 30rem !important;
  }
  .sm\:h-\[34rem\] {
    height: 34rem !important;
  }
  .sm\:mt-10 {
    margin-top: 2.5rem !important;
  }
  .sm\:mt-12 {
    margin-top: 3rem !important;
  }
  .sm\:gap-4 {
    gap: 1rem !important;
  }
  .sm\:p-4 {
    padding: 1rem !important;
  }
}

/* ==========================================================================
   Messenger Floating Chat Box Stacking & Opaque Background
   ========================================================================== */
.chat-widget,
.chat-box {
  z-index: 1050 !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) .chat-widget,
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) .chat-box {
  background-color: #181818 !important;
  opacity: 1 !important;
}

.chat-message-bubble .text.js_chat-color-me a,
.conversation.right .chat-message-bubble .text a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.chat-message-bubble .text.js_chat-color-me a:hover,
.conversation.right .chat-message-bubble .text a:hover {
  color: #f0fdf4 !important;
  text-decoration: underline !important;
}


/* Publisher Photo Layout Selector Icons */
.js_photo-layout-icon,
.js_photo-layout-option span[class*="icon-"] {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   High-Performance Skeleton Loader Shimmer (almeet-skeleton)
   ========================================================================== */
.almeet-skeleton {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 0.5rem;
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) .almeet-skeleton {
  background-color: rgba(255, 255, 255, 0.06);
}

.almeet-skeleton::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.25) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: almeet-shimmer 1.8s infinite;
  content: '';
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) .almeet-skeleton::after {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0)
  );
}

@keyframes almeet-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Topbar & Header Popups Opaque Solid Background & Stacking */
#gridPopup,
#createPopup {
  z-index: 100 !important;
  background-color: #ffffff !important;
}

:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #gridPopup,
:is(html[data-theme$="-dark"], html.dark, html:not([data-theme="avora"]) body.night-mode) #createPopup {
  background-color: #161616 !important;
}