/**
 * Compact Spacing for Posts and Sidebars
 * Reduces vertical spacing to make the feed more compact
 */

/* ═══ TRENDING HASHTAGS SPACING ═══ */
.hashtags_container {
  gap: 0px !important;
  padding: 2px 0 !important;
}

.hashtag_item {
  padding: 2px 8px !important;
  min-height: 20px !important;
  margin-bottom: 0px !important;
}

/* ═══ POST SPACING ═══ */

/* Reduce post bottom margin for tighter feed */
.i_post_body {
  margin-bottom: 4px !important;
}

/* Reduce post form container spacing */
.i_postFormContainer {
  margin-bottom: 8px !important;
}

/* Reduce space between post elements */
.i_post_body_header {
  padding: 8px !important;
}

.i_post_container {
  padding: 0px !important;
}

/* Post text area with Facebook-style typography */
.i_post_text,
.i_post_text * {
  padding: 8px 14px 6px 14px !important;
  margin: 0 !important;
  font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3333 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Compact post footer */
.i_post_footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  flex-wrap: nowrap !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.i_post_footer_item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

.lp_sum,
.cp_sum {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 0 4px 0 2px !important;
}

/* Reduce spacing between posts and comments */
.i_post_comments_wrapper {
  padding: 0px 8px !important;
}

.i_post_comments_box {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ═══ SIDEBAR SPACING ═══ */

/* Left sidebar compact spacing */
.i_left_menu_box {
  margin: 2px 0 !important;
  padding: 12px 16px !important;
}

.leftSidebarWrapper {
  padding: 8px 6px !important;
}

/* Right sidebar trending/suggestions */
.i_sponsorad,
.i_u_details,
.suggestions-container,
.trending-item,
.ads-item {
  margin-bottom: 8px !important;
  padding: 10px !important;
}

/* Reduce wrapper container padding on desktop */
@media screen and (min-width: 941px) {
  .wrapper {
    padding: 10px 8px !important;
  }

  .th_middle {
    padding: 8px 6px !important;
  }

  .pageMiddle {
    padding: 8px !important;
  }
}

/* ═══ HEADER/FOOTER SPACING ═══ */

/* Reduce header padding */
.header {
  padding: 8px 12px !important;
}

/* Compact mobile bottom menu */
.mobile_bottom_menu {
  height: 56px !important;
}

.mobile_bottom_menu_item {
  margin: 0 !important;
  padding: 6px 8px !important;
}

/* ═══ FEATURED CONTENT SPACING ═══ */

/* Stories wrapper */
.stories_wrapper {
  padding: 8px !important;
  margin-bottom: 8px !important;
}

/* Announcements */
.i_announcement_wrapper {
  margin-bottom: 8px !important;
}

/* Boosted posts */
.boosted-post-container {
  margin-bottom: 8px !important;
}

/* ═══ LINE HEIGHT OPTIMIZATION ═══ */

/* Tighter line height for text */
.i_post_body_header,
.post-content {
  line-height: 1.35 !important;
}

/* Compact comment text */
.i_post_user_comment {
  line-height: 1.2 !important;
}

/* ═══ FORM SPACING ═══ */

/* Compact post form inputs */
.i_post_form_textarea textarea {
  min-height: 40px !important;
  margin-bottom: 4px !important;
}

/* Form buttons spacing */
.form_btn,
.i_pb_emojis,
.i_image_video_btn {
  margin: 0 4px 0 0 !important;
}

/* ═══ MODAL/POPUP SPACING ═══ */

/* General spacing optimization */
* {
  /* Reduce default margins where possible */
}

/* Ensure no excessive margins on flex containers */
.flex,
[display="flex"] {
  margin: 0 !important;
}

@media screen and (max-width: 940px) {
  .i_postFormContainer_swiper,
  .suggested_creators_box,
  .feed_ad_users,
  .horizontal_arrow {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     FACEBOOK-STYLE END-TO-END FULL BLEED MOBILE FEED
     ═══════════════════════════════════════════════════════════════ */
  /* Prevent horizontal scroll on mobile without clipping fixed overlays */
  body:not(.sv-open) {
    max-width: 100vw !important;
  }

  /* Feed column & wrappers stretch edge-to-edge with 0 side margins/padding */
  .wrapper,
  .th_middle,
  .pageMiddle,
  #moreType,
  .section,
  .i_section_wrapper,
  .profile_wrapper .th_middle .pageMiddle {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Post cards run edge-to-edge (end to end) like Facebook */
  .i_post_body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #e4e6eb !important;
    border-bottom: 1px solid #e4e6eb !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
  }

  body.night-mode .i_post_body {
    background-color: #242526 !important;
    border-top-color: #393a3b !important;
    border-bottom-color: #393a3b !important;
  }

  /* Post header with Facebook spacing */
  .i_post_body_header {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px 6px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* User avatar - circle, perfectly sized, never stretched */
  .user_post_user_avatar_plus {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .i_post_user_avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
  }

  .i_post_user_avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
  }

  /* Post author details & metadata */
  .i_post_i {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 8px 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
  }

  .i_post_username {
    width: 100% !important;
    text-align: left !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
  }

  .i_post_username a {
    color: #050505 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.night-mode .i_post_username a {
    color: #e4e6eb !important;
  }

  .i_post_shared_time {
    width: 100% !important;
    text-align: left !important;
    font-size: 12px !important;
    color: #65676b !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
  }

  body.night-mode .i_post_shared_time {
    color: #b0b3b8 !important;
  }

  .i_post_menu {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Post text container */
  .i_post_container,
  .post-content,
  .i_post_text {
    padding: 4px 14px 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .i_post_text p {
    margin: 0 0 6px 0 !important;
    line-height: 1.35 !important;
  }

  .i_post_text p:last-child {
    margin-bottom: 0 !important;
  }

  /* Media container - spans full bleed edge-to-edge */
  .i_post_u_images {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  .i_image_one {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .i_image_one .i_post_image_swip_wrapper {
    width: 100% !important;
    padding-top: 0 !important;
    height: auto !important;
    min-height: auto !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .i_image_one .i_p_image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .i_image_one .inline-video-player {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Multi-image grids on mobile */
  .i_image_two,
  .i_image_three,
  .i_image_four,
  .i_image_five {
    width: 100% !important;
    margin: 0 !important;
  }

  .i_post_image_swip_wrapper .i_p_image {
    object-fit: cover !important;
  }

  /* Post action footer bar - Facebook style */
  .i_post_footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border-top: 1px solid #e4e6eb !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }

  body.night-mode .i_post_footer {
    border-top-color: #393a3b !important;
  }

  .i_post_footer_item {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    border-radius: 6px !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  .i_post_footer_item .i_post_item_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  /* Post comments wrapper */
  .i_post_comments_wrapper {
    width: 100% !important;
    padding: 8px 12px 12px 12px !important;
    box-sizing: border-box !important;
  }

  /* Other mobile feed items run edge-to-edge */
  .i_welcomebox,
  .tt-mobile-compose-bar,
  .i_postFormContainer,
  .stories_wrapper,
  .i_announcement_wrapper,
  .boosted-post-container,
  .inu-row {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 8px !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }

  .tt-mobile-compose-bar {
    border-top: 1px solid #e4e6eb !important;
    border-bottom: 1px solid #e4e6eb !important;
  }

  body.night-mode .tt-mobile-compose-bar {
    border-top-color: #393a3b !important;
    border-bottom-color: #393a3b !important;
  }
}