/* ==========================================================================
   DEMUREGRAM 2026 MASTER RESPONSIVE & LAYOUT ENGINE
   Guarantees 0% overlap, 100% compatibility on Desktop, Tablet, and Mobile
   ========================================================================== */

:root {
  --ig-sidebar-width: 72px;
  --ig-sidebar-margin: 14px;
  --ig-content-offset: 100px; /* 72px + 14px + 14px clearance */
  --ig-mobile-top-height: 52px;
  --ig-mobile-bottom-height: 54px;
  --ig-feed-max-width: 470px;
  --ig-widgets-width: 320px;
  --ig-gap: 32px;
  --ig-bg: #000000;
  --ig-card-bg: #000000;
  --ig-border: #262626;
  --ig-text: #f0f2f5;
  --ig-text-muted: #8e96a3;
}

/* Base Body Resets */
html, body {
  background-color: var(--ig-bg) !important;
  color: var(--ig-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ==========================================================================
   1. DESKTOP & TABLET ARCHITECTURE (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
  /* Slim Fixed Left Rail */
  .slim-left-sidebar,
  aside.slim-left-sidebar {
    position: fixed !important;
    top: 14px !important;
    bottom: 14px !important;
    left: var(--ig-sidebar-margin) !important;
    width: var(--ig-sidebar-width) !important;
    height: calc(100vh - 28px) !important;
    max-height: calc(100vh - 28px) !important;
    border-radius: 40px !important;
    background: #000000 !important;
    border: 1px solid var(--ig-border) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 0 !important;
    z-index: 1030 !important;
    box-sizing: border-box !important;
  }

  /* Universal Left Offset for ALL Desktop Pages */
  /* This prevents ANY page content from ever sitting under the left sidebar */
  body:not(.page-admin) {
    margin-left: var(--ig-content-offset) !important;
    width: calc(100% - var(--ig-content-offset)) !important;
    max-width: calc(100% - var(--ig-content-offset)) !important;
    box-sizing: border-box !important;
  }

  /* Page shells & wrappers */
  .app-wrapper,
  .main-content-container,
  .ig-feed-container,
  .ig-page-shell,
  .ig-messages-page,
  .reels-page-wrapper,
  .ig-create-page,
  .creator-studio-app,
  .profile-page-container,
  .sg-offcanvas,
  .container,
  .container-fluid {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Feed + Right Sidebar Grid on Desktop */
  .main-content-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: var(--ig-gap) !important;
    max-width: 980px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-top: 24px !important;
    padding-bottom: 48px !important;
  }

  .feed-column {
    width: 100% !important;
    max-width: var(--ig-feed-max-width) !important;
    flex-shrink: 0 !important;
  }

  .widgets-column {
    width: var(--ig-widgets-width) !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 24px !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  .widgets-column::-webkit-scrollbar {
    display: none !important;
  }
}

/* Medium Screens / Laptops (768px to 1120px) */
@media (min-width: 768px) and (max-width: 1120px) {
  /* Auto-hide the right widgets column when screen is too narrow to fit both side-by-side */
  .widgets-column,
  .ig-feed-sidebar,
  .main-content-container .widgets-column {
    display: none !important;
  }

  .feed-column,
  .main-content-container .feed-column {
    max-width: 540px !important;
    margin: 0 auto !important;
  }

  .main-content-container {
    justify-content: center !important;
    gap: 0 !important;
  }
}

/* ==========================================================================
   2. MOBILE ARCHITECTURE (max-width: 767.98px)
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Hide Desktop Sidebar Rail completely */
  .slim-left-sidebar,
  aside.slim-left-sidebar {
    display: none !important;
  }

  /* Body Padding for Fixed Top and Bottom Mobile Bars */
  body:not(.page-admin) {
    margin-left: 0 !important;
    padding-top: var(--ig-mobile-top-height) !important;
    padding-bottom: var(--ig-mobile-bottom-height) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fixed Top Bar */
  .mobile-top-bar,
  header.mobile-top-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--ig-mobile-top-height) !important;
    background: #000000 !important;
    border-bottom: 1px solid var(--ig-border) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 16px !important;
    z-index: 1040 !important;
  }

  /* Fixed Bottom Bar */
  .mobile-bottom-nav,
  nav.mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--ig-mobile-bottom-height) !important;
    background: #000000 !important;
    border-top: 1px solid var(--ig-border) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 1040 !important;
    padding: 0 10px !important;
  }

  .mobile-bottom-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ig-text) !important;
    font-size: 20px !important;
    text-decoration: none !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Full Width Responsive Containers on Mobile */
  .app-wrapper,
  .main-content-container,
  .feed-column,
  .ig-feed-container,
  .ig-page-shell,
  .ig-messages-page,
  .reels-page-wrapper,
  .ig-create-page,
  .creator-studio-app,
  .profile-page-container,
  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .main-content-container {
    padding-top: 8px !important;
    padding-bottom: 20px !important;
  }

  /* Hide right widgets on mobile */
  .widgets-column,
  .ig-feed-sidebar {
    display: none !important;
  }

  /* Mobile Stories Bar */
  .stories-container {
    padding: 8px 12px 14px 12px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--ig-border) !important;
    gap: 12px !important;
  }

  /* Mobile Post Card: Edge to Edge */
  .instagram-post-card,
  .post {
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
  }

  .post-media-frame {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
}

/* ==========================================================================
   3. UNIVERSAL Z-INDEX & OVERLAP PROTECTIONS
   ========================================================================== */
.modal-backdrop { z-index: 1055 !important; }
.modal { z-index: 1060 !important; }
.dropdown-menu { z-index: 1050 !important; background: #121212 !important; border: 1px solid var(--ig-border) !important; }
.publisher-overlay { z-index: 1045 !important; }

/* Clean Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 3px;
}

/* ==========================================================================
   DISCOVER PEOPLE & CREATORS HUB (INSTAGRAM 2026 ARCHITECTURE)
   ========================================================================== */
.ig-people-hub-container {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 16px 16px 48px 16px !important;
  box-sizing: border-box !important;
}

.ig-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  background: #121212 !important;
  border: 1px solid #262626 !important;
  color: #8e96a3 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.ig-pill-btn:hover {
  background: #222222 !important;
  color: #ffffff !important;
}

.ig-pill-btn.active {
  background: #ff9d00 !important;
  border-color: #ff9d00 !important;
  color: #000000 !important;
}

.ig-people-list-card .list-group-item {
  background: transparent !important;
  border-color: #262626 !important;
  padding: 16px 20px !important;
  color: #f0f2f5 !important;
}

.ig-people-list-card .list-group-item:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* User Card Avatar & Details */
.profile-meta-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-meta-text .user-handle {
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
}

.profile-meta-text .user-fullname {
  color: #8e96a3;
  font-size: 12px;
}

/* ==========================================================================
   DIAMOND WIDGETS & SIDEBAR SPACING PRECISION STYLING
   ========================================================================== */
.ig-feed-container .row {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 32px !important;
  margin: 0 auto !important;
  max-width: 1000px !important;
}

.ig-feed-main {
  width: 100% !important;
  max-width: 600px !important;
  flex: 1 1 600px !important;
  padding: 0 !important;
}

.ig-feed-sidebar {
  width: 340px !important;
  max-width: 340px !important;
  flex: 0 0 340px !important;
  padding: 0 !important;
  position: sticky !important;
  top: 24px !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.ig-feed-sidebar::-webkit-scrollbar {
  display: none !important;
}

/* Tablet / narrow laptop collapse */
@media (max-width: 1080px) {
  .ig-feed-sidebar {
    display: none !important;
  }
  .ig-feed-main {
    max-width: 600px !important;
    margin: 0 auto !important;
  }
  .ig-feed-container .row {
    gap: 0 !important;
  }
}

/* Diamond Widgets Cards */
.dw-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.dw-widget {
  background: #000000 !important;
  border: 1px solid #262626 !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.dw-widget-header {
  background: transparent !important;
  border-bottom: 1px solid #1f1f1f !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dw-widget-title {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
}

.dw-widget-icon {
  color: #ff9d00 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.dw-see-all {
  color: #ff9d00 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.dw-see-all:hover {
  text-decoration: underline !important;
  color: #ffb833 !important;
}

.dw-widget-body {
  padding: 14px 16px !important;
}

.dw-empty-state {
  color: #8e96a3 !important;
  font-size: 12.5px !important;
  text-align: center !important;
  padding: 8px 4px !important;
  margin: 0 !important;
}

/* Community Stats Grid */
.dw-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
}

.dw-stat-cell {
  background: #121212 !important;
  border: 1px solid #262626 !important;
  border-radius: 12px !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

.dw-stat-cell:hover {
  background: #1a1a1a !important;
  border-color: #ff9d00 !important;
  transform: translateY(-1px) !important;
}

.dw-stat-icon {
  color: #ff9d00 !important;
  margin-bottom: 2px !important;
}

.dw-stat-value {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.dw-stat-label {
  font-size: 11px !important;
  color: #8e96a3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

.dw-stat-period {
  color: #8e96a3 !important;
  font-size: 11.5px !important;
  text-align: center !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

/* User Row & List items in Diamond Widgets */
.dw-user-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  color: #f0f2f5 !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}

.dw-user-link:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
}

.dw-user-name {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Mini footer styling */
.mini-footer {
  padding: 16px 4px !important;
  font-size: 12px !important;
  color: #8e96a3 !important;
}

.mini-footer a {
  color: #8e96a3 !important;
  text-decoration: none !important;
}

.mini-footer a:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   SITE-WIDE BALANCED ARCHITECTURE: FEED TO THE LEFT, SIDEBAR TO THE RIGHT
   ========================================================================== */

/* 1. Universal Container Sizing Across Desktop */
@media (min-width: 1081px) {
  .ig-feed-container,
  .ig-people-hub-container,
  .sg-offcanvas {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 24px 36px 48px 36px !important;
    box-sizing: border-box !important;
  }

  /* Homepage 2-Column: Feed pushed LEFT, Widgets pushed RIGHT */
  .ig-feed-container .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 40px !important;
  }

  .ig-feed-main {
    width: 630px !important;
    max-width: 630px !important;
    flex: 0 0 630px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ig-feed-sidebar {
    width: 350px !important;
    max-width: 350px !important;
    flex: 0 0 350px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: sticky !important;
    top: 24px !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  /* People Hub 2-Column: Stream pushed LEFT, Filters pushed RIGHT */
  .ig-people-hub-container .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 40px !important;
  }

  .ig-people-hub-container .col-lg-8 {
    width: 660px !important;
    max-width: 660px !important;
    flex: 0 0 660px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ig-people-hub-container .col-lg-4 {
    width: 360px !important;
    max-width: 360px !important;
    flex: 0 0 360px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Standard Subpages (sg-offcanvas) */
  .sg-offcanvas > .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 36px !important;
  }

  .sg-offcanvas-sidebar {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    padding: 0 !important;
  }

  .sg-offcanvas-mainbar {
    flex: 1 1 calc(100% - 336px) !important;
    max-width: calc(100% - 336px) !important;
    padding: 0 !important;
  }
}

/* 2. Intermediate Breakpoint (768px to 1080px) */
@media (min-width: 768px) and (max-width: 1080px) {
  .ig-feed-container,
  .ig-people-hub-container,
  .sg-offcanvas {
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 16px 20px 36px 20px !important;
  }

  .ig-feed-sidebar {
    display: none !important;
  }

  .ig-feed-main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .ig-feed-container .row {
    gap: 0 !important;
    margin: 0 !important;
  }

  .ig-people-hub-container .col-lg-8,
  .ig-people-hub-container .col-lg-4 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* 3. Mobile (< 768px) Edge-to-Edge */
@media (max-width: 767.98px) {
  .ig-feed-container,
  .ig-people-hub-container,
  .sg-offcanvas {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 24px 0 !important;
    margin: 0 !important;
  }

  .ig-feed-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .ig-feed-sidebar {
    display: none !important;
  }
}

/* ==========================================================================
   UNBREAKABLE 2-COLUMN DESKTOP ENGINE: FEED ON LEFT, WIDGETS ON RIGHT
   (NEVER WRAP, NEVER STACK BENEATH, ALWAYS TO THE RIGHT)
   ========================================================================== */
@media (min-width: 900px) {
  .ig-feed-container {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 24px 16px 48px 16px !important;
    box-sizing: border-box !important;
  }

  .ig-feed-container .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* CRITICAL: Prevents sidebar from EVER dropping below the feed */
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 32px !important;
  }

  /* Center Feed: STRICTLY on the LEFT */
  .ig-feed-main {
    flex: 1 1 620px !important;
    max-width: 630px !important;
    width: 100% !important;
    min-width: 320px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Right Widgets Column: STRICTLY to the RIGHT of the Feed */
  .ig-feed-sidebar {
    display: block !important;
    flex: 0 0 330px !important;
    width: 330px !important;
    max-width: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: sticky !important;
    top: 24px !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  .ig-feed-sidebar::-webkit-scrollbar {
    display: none !important;
  }
}

/* Profile page avatar reset (prevent any line/cutoff) */
.profile-avatar-img,
.author-avatar,
.avatar-ring img {
  border-radius: 50% !important;
  object-fit: cover !important;
  border: none !important;
  outline: none !important;
  display: block !important;
}

.avatar-ring {
  padding: 3px !important;
  border-radius: 50% !important;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   STORIES AVATAR FIX: 100% UNCUT, ZERO CLIPPING, NO DOUBLE BORDERS
   ========================================================================== */
.card:has(.stories-wrapper),
.card.stories-card {
  background: #000000 !important;
  border: 1px solid #262626 !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Remove the inner box border that was cutting off the avatar */
.stories-wrapper,
.card-body.stories-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 16px 16px 16px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Stories container: absolutely zero negative margins */
.stories,
#stories,
.stories.carousel,
.stories.sngine {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Add Story button */
.add-story {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  width: 68px !important;
  height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.add-story .img {
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 2px solid #383838 !important;
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.add-story .add {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 22px !important;
  height: 22px !important;
  background: #0095f6 !important;
  border: 2px solid #000000 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  transform: none !important;
  left: auto !important;
  z-index: 5 !important;
}

.add-story .add svg,
.add-story .add .svg-container {
  width: 12px !important;
  height: 12px !important;
  fill: #ffffff !important;
}


/* ==========================================================================
   SOLID BLACK SITE-WIDE BACKGROUND & PUBLISHER ZERO-OVERLAP ENGINE 2026
   ========================================================================== */

/* 1. SOLID PURE BLACK BACKGROUND SITE-WIDE (#000000) */
html, body,
#wrapper, .wrapper, .main-wrapper,
.content-container, .main-content,
.app-container, .page-content,
.ig-feed-container,
body:not(.page-admin),
body.night-mode {
  background: #000000 !important;
  background-color: #000000 !important;
}

:root {
  --ig-bg: #000000 !important;
  --background: 0 0% 0% !important;
  --card: 0 0% 7% !important;
  --sidebar: 0 0% 0% !important;
}

/* 2. COMPLETE REMOVAL OF BLOCKAGE / GREYED-OUT OVERLAY */
.publisher-overlay,
body.publisher-focus .publisher-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  z-index: -9999 !important;
}

/* 3. ZERO-OVERLAP CLEAN PUBLISHER ARCHITECTURE */
.publisher {
  position: relative !important;
  background: #000000 !important;
  border: 1px solid #262626 !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

body.night-mode .publisher {
  background: #000000 !important;
  border-color: #262626 !important;
}

/* Top message row: clean flexbox, no absolute avatar collisions */
.publisher-message {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.publisher-avatar {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #333333 !important;
}

.colored-text-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.publisher .colored-text-wrapper .quill-editor {
  min-height: 40px !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  line-height: 1.5 !important;
  border: none !important;
  background: transparent !important;
}

.publisher .colored-text-wrapper .ql-editor {
  padding: 8px 10px !important;
  font-size: 14px !important;
  color: #f5f5f5 !important;
  min-height: 40px !important;
}

.publisher .colored-text-wrapper .ql-editor.ql-blank::before {
  color: #8e8e8e !important;
  font-style: normal !important;
  left: 10px !important;
  font-size: 14px !important;
}

/* Quick Creation Bar */
.ig-publisher-quick-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #262626 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  background: #000000 !important;
}

.ig-publisher-quick-bar::-webkit-scrollbar {
  display: none !important;
}

.ig-quick-item {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 36px !important;
  padding: 0 14px !important;
  background: #141414 !important;
  border: 1px solid #2e2e2e !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  user-select: none !important;
  transition: all 0.15s ease-in-out !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.ig-quick-item:hover {
  background: #2a2a2a !important;
  border-color: #555555 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.ig-quick-item i {
  font-size: 15px !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 1 !important;
}

.ig-quick-item .ig-quick-text {
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Sngine injected form stays as transparent click overlay */
.ig-quick-item form.x-uploader {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  z-index: 10 !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.ig-quick-item form.x-uploader input[type="file"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 11 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ig-quick-studio-btn {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.2), rgba(131, 58, 180, 0.2)) !important;
  border-color: rgba(225, 48, 108, 0.4) !important;
  color: #f472b6 !important;
}

.ig-quick-studio-btn:hover {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.35), rgba(131, 58, 180, 0.35)) !important;
  border-color: rgba(225, 48, 108, 0.7) !important;
  color: #ffffff !important;
}

/* Publisher Slider visibility */
body.publisher-focus .publisher-slider,
.publisher.has-media .publisher-slider,
.publisher.has-attachments .publisher-slider,
.publisher-slider.active,
.publisher-slider.show,
.publisher-slider:has(.publisher-attachments:not(:empty)),
.publisher-slider:has(.publisher-media-preview-card.active),
.publisher-slider:has(video[src]) {
  display: block !important;
}

/* Attachments container: visible previews when files uploaded */
.publisher-attachments:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.publisher-attachments:not(:empty),
.publisher-attachments.has-attachments,
.publisher-attachments.is-active,
.publisher-attachments.active,
.publisher-attachments.show,
.publisher-attachments.x-hidden:not(:empty) {
  display: block !important;
  padding: 12px 16px !important;
  background: #000000 !important;
  border-top: 1px solid #262626 !important;
}

.publisher-attachments ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.publisher-attachments li {
  position: relative !important;
  width: 94px !important;
  height: 94px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #333333 !important;
  background: #1a1a1a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.15s ease, border-color 0.15s ease !important;
}

.publisher-attachments li:hover {
  border-color: #555555 !important;
  transform: translateY(-2px) !important;
}

.publisher-attachments li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Loading state: instant preview image under progress bar */
.publisher-attachments li.loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #1a1a1a !important;
  background-repeat: no-repeat !important;
}

.publisher-attachments li.loading::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1 !important;
}

.publisher-attachments li.loading .progress.x-progress {
  position: relative !important;
  z-index: 2 !important;
  width: 80% !important;
  height: 6px !important;
  margin: 0 auto !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.publisher-attachments li.loading .progress-bar {
  background: linear-gradient(90deg, #0095f6, #00d2ff) !important;
  transition: width 0.2s ease !important;
}

.publisher-attachments li button.btn-close,
.publisher-attachments li .js_publisher-attachment-image-remover,
.publisher-attachments li .js_publisher-attachment-file-remover {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 22px !important;
  height: 22px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  z-index: 10 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.publisher-attachments li button.btn-close:hover {
  background: rgba(239, 68, 68, 0.9) !important;
  transform: scale(1.1) !important;
}

/* Video and Reel Live Media Preview Card */
.publisher-media-preview-card {
  margin: 12px 16px !important;
  padding: 12px !important;
  background: #000000 !important;
  border: 1px solid #262626 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.publisher-media-preview-card.active,
.publisher-media-preview-card.show,
.publisher-meta.publisher-media-preview-card[style*="display: block"],
.publisher-media-preview-card:has(video[src]) {
  display: block !important;
}

.publisher-media-preview-card.x-hidden,
.publisher-media-preview-card[style*="display: none"] {
  display: none !important;
}

.publisher-media-preview-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  padding: 0 4px !important;
}

.publisher-media-preview-badge {
  display: flex !important;
  align-items: center !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #f1f1f1 !important;
}

.publisher-media-preview-body {
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.publisher-video-preview-player {
  width: 100% !important;
  max-height: 280px !important;
  background: #000000 !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

.publisher-media-preview-card .btn-close {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 0.9 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.publisher-media-preview-card .btn-close:hover {
  background: rgba(239, 68, 68, 0.8) !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* Publisher Footer: Post button & Privacy */
.publisher-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  border-top: 1px solid #262626 !important;
  background: #000000 !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}

.publisher-footer .publisher-footer-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

.publisher-footer .js_publisher-btn {
  background: #0095f6 !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 22px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.publisher-footer .js_publisher-btn:hover {
  background: #1877f2 !important;
}

.publisher-footer .js_publisher-btn span {
  display: inline-block !important;
}

.publisher-footer .js_publisher-btn i {
  display: none !important;
}

/* ==========================================================================
   FEED POST COMMENTS CONTAINER & INLINE STYLES
   ========================================================================== */
.post-comments.js_post-comments-container {
  padding: 8px 16px 12px 16px !important;
  border-top: 1px solid #1e1e1e !important;
  background: transparent !important;
}

.post-comments.js_post-comments-container ul.js_comments {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
}

.post-comments.js_post-comments-container ul.js_comments li {
  position: relative !important;
  display: block !important;
  background: transparent !important;
}

.post-comments.js_post-comments-container .comment {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  color: #efefef !important;
}

.post-comments.js_post-comments-container .comment-avatar {
  flex-shrink: 0 !important;
}

.post-comments.js_post-comments-container .comment-avatar .comment-avatar-picture {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid #333333 !important;
}

.post-comments.js_post-comments-container .comment-data {
  flex-grow: 1 !important;
  min-width: 0 !important;
}

.post-comments.js_post-comments-container .comment-author a {
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  margin-right: 6px !important;
}

.post-comments.js_post-comments-container .comment-text {
  color: #e5e5e5 !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}

.post-comments.js_post-comments-container .comment-time {
  font-size: 11px !important;
  color: #8e8e8e !important;
  margin-top: 4px !important;
}

.post-comments.js_post-comments-container .comment-btn.dropdown {
  flex-shrink: 0 !important;
  color: #737373 !important;
  cursor: pointer !important;
}

.post-comments.js_post-comments-container .comment-btn.dropdown:hover {
  color: #ffffff !important;
}

/* Quick Comment Bar Styling */
.post-details .comment-row,
.instagram-post-card .comment-row,
.comment-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 12px -16px -14px -16px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #262626 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.comment-row input.js_post-comment-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  outline: none !important;
  padding: 6px 0 !important;
}

.comment-row input.js_post-comment-input::placeholder {
  color: #737373 !important;
}

.comment-row button.js_post-comment-submit {
  background: transparent !important;
  border: none !important;
  color: #0095f6 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  transition: color 0.15s ease, opacity 0.15s ease !important;
}

.comment-row button.js_post-comment-submit:hover {
  color: #ffffff !important;
}

.comment-row button.js_post-comment-submit:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}


/* ==========================================================================
   INSTAGRAM OPTIMISTIC INTERACTIONS & ANIMATIONS (DEMUREGRAM 2026)
   ========================================================================== */

/* Heart Pop Keyframe Animation */
@keyframes ig-heart-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.ig-heart-pop {
  display: inline-block !important;
  animation: ig-heart-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* Double-Tap Heart Burst Animation */
.ig-heart-burst-anim {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  z-index: 100 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease-out !important;
  opacity: 0 !important;
}

.ig-heart-burst-anim.animate {
  transform: translate(-50%, -50%) scale(1.4) !important;
  opacity: 1 !important;
}

.ig-heart-burst-anim i {
  font-size: 80px !important;
  color: #ff3040 !important;
  filter: drop-shadow(0 4px 16px rgba(255, 48, 64, 0.65)) !important;
}

/* Instant Toast Notification */
.ig-toast {
  position: fixed !important;
  bottom: 28px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: #262626 !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  pointer-events: none !important;
}

.ig-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Optimistic Comment Entry Styling (Instant 0ms Appearance) */
@keyframes commentFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.optimistic-comment {
  opacity: 1 !important;
  animation: commentFadeInUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.optimistic-comment .comment {
  transition: background-color 0.2s ease !important;
}

/* Reels Comments Drawer / Bottom Sheet */
.reel-comments-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.reel-comments-modal.x-hidden {
  display: none !important;
}

.reel-comments-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  cursor: pointer !important;
}

.reel-comments-sheet {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 65vh !important;
  max-height: 580px !important;
  background: #000000 !important;
  border: 1px solid #1e1e1e !important;
  border-bottom: none !important;
  border-radius: 16px 16px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8) !important;
  z-index: 2 !important;
  overflow: hidden !important;
  animation: ig-sheet-up 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes ig-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.reel-comments-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid #1a1a1a !important;
}

.sheet-drag-handle {
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 36px !important;
  height: 4px !important;
  background: #444444 !important;
  border-radius: 2px !important;
}

.reel-comments-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.btn-close-comments {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #8e8e8e !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 4px !important;
}

.btn-close-comments:hover {
  color: #ffffff !important;
}

.reel-comments-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px 16px !important;
}

.reel-comments-stream {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.reel-comments-footer {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  border-top: 1px solid #1e1e1e !important;
  background: #000000 !important;
}

.reel-user-avatar, .reel-comments-footer .comment-avatar-picture {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid #2e2e2e !important;
  flex-shrink: 0 !important;
}

.reel-comment-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  outline: none !important;
}

.reel-comment-input::placeholder {
  color: #737373 !important;
}

.reel-comment-submit-btn {
  background: transparent !important;
  border: none !important;
  color: #0095f6 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
}

.reel-comment-submit-btn:hover {
  color: #ffffff !important;
}

/* -------------------------------------------------------------
   INSTANT LIKE / REACT HEART STYLES (0ms DELAY)
   ------------------------------------------------------------- */
.action-btn.react-btn.liked,
.action-btn.react-btn.active,
.action-btn.react-btn.is-liked,
.action-btn.react-btn i.fa-solid.fa-heart,
.btn-reel-action.react-btn.liked,
.btn-reel-action.react-btn.active,
.btn-reel-action.react-btn.is-liked,
.btn-reel-action.react-btn i.fa-solid.fa-heart,
.ig-like-action.liked,
.ig-like-action.active,
.ig-like-action.is-liked,
.ig-like-action i.fa-solid.fa-heart {
  color: #ff3040 !important;
}

.action-btn.react-btn:not(.liked):not(.active) i.fa-regular.fa-heart,
.btn-reel-action.react-btn:not(.liked):not(.active) i.fa-regular.fa-heart,
.ig-like-action:not(.liked):not(.active) i.fa-regular.fa-heart {
  color: #ffffff !important;
}


/* Uniform Right Sidebar Styling (Instagram Standard) */
.ig-feed-sidebar .card,
.ig-feed-sidebar .dw-widget {
  background: #000000 !important;
  border: 1px solid #262626 !important;
  border-radius: 14px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.ig-feed-sidebar .card-header,
.ig-feed-sidebar .dw-widget-header {
  background: transparent !important;
  border-bottom: 1px solid #1f1f1f !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.ig-feed-sidebar .card-body,
.ig-feed-sidebar .dw-widget-body {
  padding: 14px 16px !important;
  background: transparent !important;
}

.ig-feed-sidebar .user-switch-card {
  background: #000000 !important;
  border: 1px solid #262626 !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
}


/* ==========================================================================
   COMMENT REACTIONS & REPLIES FIX
   ========================================================================== */
.reactions-container {
  position: fixed !important;
  z-index: 100050 !important;
  background: #181818 !important;
  border: 1px solid #333333 !important;
  border-radius: 30px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85) !important;
  padding: 4px 8px !important;
}

.reactions-container .reactions_item {
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reactions-container .reactions_item:hover {
  transform: scale(1.25) !important;
}

.reactions-wrapper {
  position: relative !important;
  cursor: pointer !important;
}

.reaction-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
}

.reaction-btn-name {
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.reaction-btn-name:hover {
  text-decoration: underline !important;
}

.comment-actions .js_reply {
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.comment-actions .js_reply:hover {
  text-decoration: underline !important;
}

.comment-replies {
  margin-top: 8px !important;
  padding-left: 12px !important;
  border-left: 2px solid #262626 !important;
}

.comment-replies:not(.x-hidden) {
  display: block !important;
}

.js_reply-form:not(.x-hidden) {
  display: block !important;
  margin-top: 8px !important;
}

.js_reply-form .comment-form textarea {
  background: #141414 !important;
  border: 1px solid #262626 !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  width: 100% !important;
  resize: none !important;
  outline: none !important;
}

.js_reply-form .comment-form textarea:focus {
  border-color: #444444 !important;
}