/* font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


/* changing the mode lies from changing the lightness of the color when using hsl */

:root {
  /* colors and color variables */
  --primary-color-hue: 252;
  --dark-color-lightness: 17%;
  --light-color-lightness: 95%;
  --white-color-lightness: 100%;

  --color-white: hsl(252, 30%, var(--white-color-lightness));
  --color-light: hsl(252, 30%, var(--light-color-lightness));
  --color-gray: hsl(252, 15%, 65%);
  --color-primary: hsl(var(--primary-color-hue), 75%, 60%);
  --color-secondary: hsl(252, 100%, 90%);
  --color-success: hsl(120, 95%, 65%);
  --color-danger: hsl(0, 95%, 65%);
  --color-dark: hsl(252, 30%, var(--dark-color-lightness));
  --color-black: hsl(252, 30%, 10%);

  /* sizes and spaces */
  --border-radius: 2rem;
  --card-border-radius: 1rem;
  --btn-padding: 0.6rem 2rem;
  --search-padding: 0.6rem 1rem;
  --card-padding: 1rem;

  /* sticky positions */
  --sticky-top-left: 5.4rem;
  --sticky-top-right: -18rem;
  /* sidebar / compact bar theming */
  --sidebar-bg: hsl(var(--primary-color-hue), 30%, 12%);
    /* make sidebar background follow theme's dark/light variables so
      switching backgrounds updates the sidebar color */
    --sidebar-bg: hsl(var(--primary-color-hue), 30%, var(--dark-color-lightness));
  --sidebar-icon: var(--color-white);
  --sidebar-active-bg: hsl(var(--primary-color-hue), 80%, 45%);
    /* Make sidebar follow the current theme by using the theme-driven color variables */
    --sidebar-bg: var(--color-white);
    --sidebar-icon: var(--color-dark);
  --sidebar-width: 68px;
  --sidebar-radius: 1rem;
  /* floating action button size (used for spacing on small screens) */
  --fab-size: 55px;
}

/* Global responsive helpers for middle column so all devices can view content */
.middle {
  box-sizing: border-box;
}

/* Constrain feed width inside the middle column and center it for large screens
   while allowing full-width on very small screens. This prevents action icons
   from being pushed out of view on narrow displays. */
.middle .feeds .feed {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* give a small horizontal padding baseline so icons aren't flush */
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Use a clamped right padding that accounts for the sidebar/FAB and safe-area,
   but remains reasonable on very small screens. */
.middle .feeds .feed,
.middle .feed .action-buttons,
.middle .create-post {
  padding-right: clamp(0.8rem, 3vw, calc(var(--sidebar-width) + var(--fab-size) * 0.6 + 1rem + env(safe-area-inset-right)));
}

/* Make create-post robust across sizes */
.middle .create-post {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.middle .create-post input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}
.middle .create-post input[type="submit"] {
  flex: 0 0 auto;
}

/* Ensure action buttons area compresses gracefully */
.middle .feed .action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

/* When the feed content is narrow, keep icons visible by preventing overflow */
.middle .feed .action-buttons > * {
  flex: 0 0 auto;
}

/* Reduce image aspect on very small screens but keep proportional scaling */
.middle .feed .photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Very small screen overrides to prevent large computed right-padding
   (some CSS earlier may include sidebar widths that are unsuitable for
   narrow phones like Samsung A12). These keep icons/buttons visible. */
@media (max-width: 420px) {
  .middle .feeds .feed {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.6rem;
    padding-right: 1rem; /* small fixed padding so icons remain visible */
  }

  .middle .create-post,
  .middle .feed .action-buttons,
  .middle .feed .action-buttons > * {
    padding-right: 1rem;
    gap: 0.4rem;
  }

  /* slightly reduce elements that take vertical space */
  .middle .stories {
    height: min(7.6rem, 18vh);
  }
}

/* Extra-tight overrides for very narrow phones (<=360px logical width).
   This handles compact small phones and older Android devices. */
@media (max-width: 360px) {
  .middle .feeds .feed {
    padding-left: 0.5rem;
    padding-right: 0.8rem;
  }

  .middle .create-post input[type="text"] {
    font-size: 0.95rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .middle .create-post input[type="submit"] {
    padding: 0.45rem 0.6rem;
  }

  .middle .feed .action-buttons {
    gap: 0.35rem;
  }
}

/* Ensure slightly larger small phones also get full-width, unclipped layout
   (covers devices like Samsung S20, Galaxy A12/12S, Galaxy 12 etc). */
@media (max-width: 450px) {
  /* Remove centered max-width and let feeds fill available width */
  .middle .feeds .feed,
  .middle .feeds {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.45rem !important;
    padding-right: 0.6rem !important;
    box-sizing: border-box;
  }

  /* Ensure the middle container doesn't add extra right offset */
  main .container .middle {
    padding-left: 0.5rem !important;
    padding-right: 0.6rem !important;
  }

  /* Pin action buttons inside the feed to avoid being cut by the slim sidebar */
  .middle .feed .action-buttons {
    position: absolute;
    top: 0.6rem;
    right: 0.5rem;
    z-index: 10010; /* well above sidebar */
    background: transparent;
    gap: 0.4rem;
    font-size: 1rem;
  }

  /* Make sure icons don't overflow the viewport */
  .middle .feed .action-buttons > * {
    flex: 0 0 auto;
    margin: 0;
  }

  /* Compress create-post so submit remains visible */
  .middle .create-post {
    padding: 0.3rem 0.5rem !important;
    gap: 0.35rem !important;
  }

  .middle .create-post input[type="text"] {
    padding: 0.28rem 0.35rem !important;
    font-size: 0.95rem !important;
  }

  .middle .create-post input[type="submit"] {
    padding: 0.32rem 0.5rem !important;
    min-width: 44px !important;
    flex: 0 0 auto !important;
  }

  /* Limit image heights so feed cards don't become too tall and push icons off-screen */
  .middle .feed .photo img {
    max-height: 36vh;
  }

  /* Add a small right-safe padding to the feed container to account for FAB, but keep it small */
  .middle .feeds {
    padding-bottom: calc(var(--fab-size) + env(safe-area-inset-bottom) + 0.6rem);
  }
}

/* Final nudge for bookmark icon and create-post submit on narrow phones */
@media (max-width: 480px) {
  /* Slightly increase right padding so icons/buttons become fully visible */
  .middle .feeds .feed {
    padding-right: 1.8rem !important;
  }

  .middle .create-post {
    padding-right: 1.8rem !important;
  }

  /* Move absolutely-positioned action buttons a bit more inward from the edge */
  .middle .feed .action-buttons {
    right: 1.1rem !important;
  }

  /* Ensure the submit button is displayed above the slim sidebar and moved inward */
  .middle .create-post input[type="submit"] {
    position: relative;
    transform: translateX(-8px) !important;
    z-index: 10030 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }
}

/* Ultra-narrow phones (<=320px / 300px widths) — ensure controls stay visible */
@media (max-width: 320px) {
  .middle .feeds .feed {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.4rem;
    padding-right: 0.6rem; /* very small fixed padding for 300px widths */
  }

  .middle .create-post {
    gap: 0.25rem;
    padding-right: 0.6rem;
  }

  .middle .create-post input[type="text"] {
    font-size: 0.9rem;
    padding: 0.35rem 0.45rem;
  }

  .middle .create-post input[type="submit"] {
    padding: 0.35rem 0.45rem;
    font-size: 0.88rem;
  }

  .middle .feed .action-buttons {
    gap: 0.3rem;
    padding-right: 0.5rem;
  }

  .middle .feed .action-buttons > * {
    flex: 0 0 auto;
  }

  /* Make room at the bottom for floating button + gesture area */
  .middle {
    padding-bottom: calc(var(--fab-size) + env(safe-area-inset-bottom) + 0.8rem);
  }

  /* Slightly reduce story avatar size to free vertical space */
  .middle .stories .story {
    min-width: 3.8rem;
    height: 3.8rem;
  }
}

/* Targeted aggressive reductions for narrow phones (<=380px and <=360px)
   — shrink paddings, tighten gaps, reduce image height and pin action
   buttons to the right so bookmark and post button remain visible/clickable. */
@media (max-width: 380px) {
  .middle .feeds .feed {
    position: relative; /* needed for absolutely positioned action buttons */
    margin: 0.35rem 0;
    padding: 0.35rem;
    font-size: 0.82rem;
    border-radius: 0.6rem;
  }

  .middle .feed .photo img {
    max-height: 32vh;
    object-fit: cover;
    margin-top: 6px;
  }

  .middle .feed .action-buttons {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10005;
    display: flex;
    gap: 0.35rem;
    align-items: center;
    background: transparent;
    padding: 0; /* keep tight */
    font-size: 0.98rem;
  }

  /* Ensure each icon/button inside action-buttons doesn't shrink */
  .middle .feed .action-buttons > * {
    flex: 0 0 auto;
    margin: 0;
  }

  /* Compress create-post and keep submit visible */
  .middle .create-post {
    padding: 0.22rem 0.5rem;
    gap: 0.32rem;
  }

  .middle .create-post input[type="text"] {
    padding: 0.3rem 0.4rem;
    font-size: 0.9rem;
  }

  .middle .create-post input[type="submit"] {
    padding: 0.32rem 0.48rem;
    font-size: 0.86rem;
    min-width: 44px;
    flex: 0 0 auto;
  }

  /* reduce story header sizes to free vertical space */
  .middle .stories { height: 7.8rem; }
  .middle .stories .story { padding: 0.5rem; }
}

@media (max-width: 360px) {
  .middle .feeds .feed {
    padding: 0.28rem;
    margin: 0.3rem 0;
    font-size: 0.8rem;
  }

  .middle .feed .action-buttons { top: 0.45rem; right: 0.45rem; font-size: 0.94rem; }

  .middle .feed .photo img { max-height: 30vh; }

  .middle .create-post input[type="submit"] { min-width: 40px; padding: 0.28rem 0.42rem; }
}

/* Extra safety rules for narrow displays to prevent clipping of icons/buttons */
@media (max-width: 420px) {
  /* Use max() so the safe-area inset is respected but we never get an excessively large value */
  .middle .feeds .feed {
    padding-right: max(0.8rem, env(safe-area-inset-right));
  }

  /* Action buttons should stay inside the feed box and float above content if needed */
  .middle .feed .action-buttons {
    position: relative;
    right: 0;
    z-index: 5;
    overflow: visible;
    padding-right: max(0.6rem, env(safe-area-inset-right));
  }

  /* Prevent icons/buttons from wrapping or being compressed to zero */
  .middle .feed .action-buttons > * {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Ensure the create-post submit button does not wrap or get pushed out */
  .middle .create-post input[type="submit"] {
    white-space: nowrap;
    margin: 0;
    box-sizing: border-box;
    z-index: 6;
  }
}

/* When the mobile slim sidebar / menu is open, add extra right padding to the
   middle column so the slim bar doesn't overlap feed content on narrow phones. */
@media screen and (max-width: 992px) {
  body.menu-open main .container .middle {
    padding-right: calc(var(--sidebar-width) + 0.8rem + env(safe-area-inset-right));
  }

  body.menu-open .middle .feeds .feed {
    padding-right: calc(var(--sidebar-width) + 0.8rem + env(safe-area-inset-right));
  }

  /* Ensure action icons and create-post button stack above the slim sidebar */
  .middle .feed .action-buttons,
  .middle .create-post input[type="submit"] {
    position: relative;
    z-index: 10002; /* above the slim sidebar (which uses z-index ~10000) */
  }
}

/* 
zero everything for before and after,
this will help to avoid any default styling issues and give a clean slate
*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  border: none;
}

/* Prevent horizontal scroll at the root */
html {
  overflow-x: hidden;
}

/* 
overflow-x hidden to avoid horizontal scroll bar
set font family and color globally for body
*/
body {
  font-family: "Poppins", sans-serif;
  color: var(--color-dark);
  background-color: var(--color-light);
  overflow-x: hidden;
}

/* GENERAL STYLES */
/* for every container */
.container {
  width: 80%;
  margin: 0 auto;
}

/* for profile photo */
.profile-photo img {
  width: 2.7rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

/* ensure the image fills the small circular container ......*/
.middle .story .profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* for images */
img {
  display: block;
  width: 100%;
}

/* ensure media doesn't cause overflow */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* for button */
.btn {
  display: inline-block;
  padding: var(--btn-padding);
  font-weight: 500;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 300ms ease;
  font-size: 0.9rem;
}

.btn:hover {
  opacity: 0.8;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-secondary {
  background-color: var(--color-secondary);
}

.btn-success {
  background-color: var(--color-success);
}

.btn-danger {
  background-color: var(--color-danger);
}

/* muted text */
.text-muted {
  color: var(--color-gray);
}

/* ========================== NAVBAR SECTION ============================= */
nav {
  width: 100%;
  background: var(--color-white);
  padding: 0.7rem 0;
  position: fixed;
  z-index: 10;
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-bar {
  background: var(--color-light);
  border-radius: var(--border-radius);
  padding: var(--search-padding);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}


.search-bar i {
  color: var(--color-gray);
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.search-bar input[type="search"] {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--color-dark);
  width: clamp(140px, 28vw, 420px);
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* ensure the search input shrinks on very small screens */
@media (max-width: 520px) {
  .search-bar input[type="search"] {
    width: clamp(100px, 40vw, 220px);
  }
}

/* remove browser default focus outline and blue glow on search inputs (covers text and search types) */
.search-bar input:focus,
.search-bar input:active,
.search-bar input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}

nav .search-bar input[type="search"]::placeholder {
  color: var(--color-gray);
}

nav .create {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/*========================== MAIN SECTION STYLES ============================= */
/* because of the fixed position of the navigation, we have some parts of our main section under the navbar, so make the main section relative and push it down a bit   */
main {
  position: relative;
  top: 5.4rem;
}

/* main section container using flex-box to create a 3 column layout */
main .container {
  display: grid;
  grid-template-columns: 18vw auto 20vw;
  column-gap: 2rem;
  position: relative;
}

  .middle .feed .action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    /* keep vertical spacing but avoid lateral margins that push icons out */
    margin: 0.6rem 0;
    padding: 0 0.4rem; /* small horizontal padding to keep icons inside */
    box-sizing: border-box;
    width: 100%;
  }

  /* make the left group of interaction icons layout predictably */
  .middle .feed .action-buttons .interaction-buttons {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex: 0 0 auto;
  }

main .container .left .profile {
  padding: var(--card-padding);
  background: var(--color-white);
  border-radius: var(--card-border-radius);
  display: flex;
  align-items: center;
  column-gap: 1rem;
  width: 100%;
}

/* =========================== SIDEBAR STYLES ======================= */
/* sidebar menu items */
.left .sidebar {
  margin-top: 1rem;
  background: var(--color-white);
  border-radius: var(--card-border-radius);
}

.left .sidebar .menu-item {
  display: flex;
  align-items: center;
  height: 4rem;
  cursor: pointer;
  transition: all 300ms ease;
  position: relative;
}

/* hover effect for sidebar menu items */
.left .sidebar .menu-item:hover {
  background: var(--color-light);
}

/* for the icons in the sidebar menu items */
.left .sidebar i {
  font-size: 1.4rem;
  color: var(--color-gray);
  margin-left: 2rem;
  position: relative;
}

/* notification in the sidebar */
.left .sidebar i .notification-count {
  background: var(--color-danger);
  color: white;
  font-size: 0.7rem;
  width: fit-content;
  padding: 0.1rem 0.4rem;
  position: absolute;
  top: -0.2rem;
  right: -0.3rem;
}

.left .sidebar h3 {
  margin: 1.5rem;
  font-size: 1rem;
}

.left .sidebar .active {
  background: var(--color-light);
}

.left .sidebar .active i,
.left .sidebar .active h3 {
  color: var(--color-primary);
}

/* menu item was relative so wen use absolute here */
.left .sidebar .active::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 100%;
  position: absolute;
  background: var(--color-primary);
}

/* first and last menu item to have border radius */
.left .sidebar .menu-item:first-child {
  border-top-left-radius: var(--card-border-radius);
  overflow: hidden;
}
.left .sidebar .menu-item:last-child {
  border-bottom-left-radius: var(--card-border-radius);
  overflow: hidden;
}

.left .btn {
  /* keep vertical spacing but remove horizontal margins to avoid overflowing the left column */
  margin: 1rem 0;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
}

/* ============ NOTIFICATION POP-UP =================== */
/* since menu items are positioned relative, here we position the notification pop-up absolutely inside the menu item */
.left .notification-popup {
  position: absolute;
  top: 0;
  left: 110%;
  width: 30rem;
  background: var(--color-white);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  box-shadow: 0 0 2rem hsl(var(--color-primary), 75%, 60%, 25%);
  z-index: 8;
  display: none; /* will be shown using javascript */
}

.left .notification-popup::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  background: var(--color-white);
  position: absolute;
  left: -0.6rem;
  transform: rotate(45deg);
}

/* direct divs which are individual notification items */
.left .notification-popup > div {
  display: flex;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.left .notification-popup small {
  display: block;
}

/* ========================== MIDDLE STYLES =================================== */
.middle .stories {
  display: flex;
  justify-content: space-between;
  height: 12rem;
  gap: 0.5rem;
}

.middle .stories .story {
  padding: var(--card-padding);
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 0.75rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* before of each story for the story names to be well visible, using the before element */
.middle .stories .story::before {
  content: "";
  display: block;
  width: 100%;
  height: 5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  position: absolute;
  bottom: 0;
}
/* z-index is used to control the stacking order of elements, in this case to place the overlay behind the story text */
.middle .stories .story .name {
  z-index: 2;
}

/* each story will have an image as a background, using pseudo class */
/* first story */
.middle .stories .story:nth-child(1) {
  background: url("./images/story-1.jpg") no-repeat center center/cover;
}
/* second story */
.middle .stories .story:nth-child(2) {
  background: url("./images/story-2.jpg") no-repeat center center/cover;
}
/* third story */
.middle .stories .story:nth-child(3) {
  background: url("./images/story-3.jpg") no-repeat center center/cover;
}
/* fourth story */
.middle .stories .story:nth-child(4) {
  background: url("./images/story-4.jpg") no-repeat center center/cover;
}
/* fifth story */
.middle .stories .story:nth-child(5) {
  background: url("./images/story-5.jpg") no-repeat center center/cover;
}
/* sixth story */
.middle .stories .story:nth-child(6) {
  background: url("./images/story-6.jpg") no-repeat center center/cover;
}

/* sth....changed */
.middle .story .profile-photo {
  width: 2rem;
  height: 2rem;
  align-self: start;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  overflow: hidden;
}

/* ================== Create Post section =================================== */
.middle .create-post {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  background: var(--color-white);
  padding: 0.4rem var(--card-padding);
  border-radius: var(--card-border-radius);
}
.middle .create-post input[type="text"] {
  justify-self: start;
  width: 100%;
  padding-left: 1rem;
  background: transparent;
  color: var(--color-dark);
  margin-right: 1rem;
}

/* Make the create-post input visually match the navbar search
   - remove default borders/outlines and focus shadows
   - ensure placeholder color matches other muted text */
.middle .create-post input[type="text"] {
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.middle .create-post input[type="text"]::placeholder {
  color: var(--color-gray);
}

/* ================================ FEEDS =========================================== */
.middle .feeds .feed {
  background: var(--color-white);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  margin: 1rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.middle .feed .head {
  display: flex;
  justify-content: space-between;
}

.middle .feed .user {
  display: flex;
  gap: 1rem;
}

.middle .feed .photo {
  border-radius: var(--card-border-radius);
  overflow: hidden;
  margin: 0.7rem 0;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
}

.middle .feed .photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
  border-top: 4px solid var(--color-primary);
  margin-top: 10px;
}

.middle .feed .action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
  margin: 0.6rem;
}

.middle .liked-by {
  display: flex;
}

/* margin-left is negative for overlapping effect  on the left */
.middle .liked-by span {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-white);
  margin-left: -0.6rem;
}

/* first liked-by span should not have margin-left */
.middle .liked-by span:first-child {
  margin-left: 0;
}

.middle .liked-by p {
  margin-left: 0.5rem;
}

/* ========================== RIGHT SECTION STYLES ============================= */
main .container .right {
  height: max-content;
  position: sticky;
  top: var(--sticky-top-right);
}

.right .messages {
  background: var(--color-white);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
}

.right .messages .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.right .messages i {
  font-size: 1.4rem;
}

/* search bar on messages */
.right .messages .search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  background: var(--color-light);
  border-radius: var(--border-radius);
  padding: var(--search-padding);
}

.right .messages .search-bar i {
  color: var(--color-gray);
  font-size: 1.2rem;
}

.right .messages .search-bar input {
  background: transparent;
  width: 100%;
  margin-left: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-dark);
  border: none;
  padding: 0.2rem 0.4rem;
}

.right .messages .search-bar input::placeholder {
  color: var(--color-gray);
}

.right .messages .category {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.right .messages .category h6 {
  width: 100%;
  text-align: center;
  border-bottom: 4px solid var(--color-light);
  padding-bottom: 0.5rem;
  font-size: 0.85rem;
}

.right .messages .category .active {
  border-color: var(--color-dark);
}

.right .messages .message-requests {
  color: var(--color-primary);
}

.right .messages .message {
  display: flex;
  align-items: start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.right .messages .message .profile-photo {
  position: relative;
  overflow: visible;
}

.right .profile-photo img {
  border-radius: 50%;
}

.right .messages .message:last-child {
  margin-bottom: 0;
}

.right .messages .message p {
  font-size: 0.8rem;
}

.right .messages .message .profile-photo .active {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 3px solid var(--color-white);
  background: var(--color-success);
  position: absolute;
  bottom: 0;
  right: 0;
}

/* =========== FRIEND REQUESTS ============= */
.right .friend-requests {
  margin-top: 1rem;
}

.right .friend-requests h4 {
  color: var(--color-gray);
  margin-bottom: 1rem 0;
}

.right .request {
  background: var(--color-white);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding);
  margin-bottom: 0.7rem;
}

.right .request .info {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.right .request .action {
  display: flex;
  gap: 1rem;
}

/* =================== THEME CUSTOMIZATION MODAL =================== */
.customize-theme {
  /* Force full-viewport overlay. Use !important to override any stacking context issues. */
  position: fixed !important;
  inset: 0 !important; /* top:0; right:0; bottom:0; left:0 */
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  z-index: 99999 !important;
  text-align: center;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  /* modal (hidden by default) */
  display: none;
}

.customize-theme .card {
  background: var(--color-white);
  padding: 3rem;
  border-radius: var(--card-border-radius);
  width: 50%;
  box-shadow: 0 0 1rem var(--color-primary);
  /* ensure card sits above overlay background */
  z-index: 100000;
}

/* font size */
.customize-theme .font-size {
  margin-top: 5rem;
}

/* every direct div */
.customize-theme .font-size > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-light);
  padding: var(--search-padding);
  border-radius: var(--card-border-radius);
}

.customize-theme .choose-size {
  background: var(--color-secondary);
  height: 0.3rem;
  width: 100%;
  margin: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customize-theme .choose-size span {
  width: 1rem;
  height: 1rem;
  background: var(--color-secondary);
  border-radius: 50%;
  cursor: pointer;
}

/* span with a class of active */
.customize-theme .choose-size span.active {
  background: var(--color-primary);
}

/* colors */
.customize-theme .color {
  margin-top: 2rem;
}

.customize-theme .choose-color {
  background: var(--color-light);
  padding: var(--search-padding);
  border-radius: var(--card-border-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.customize-theme .choose-color span {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
}

/* css pseudo class to get different colors, but you can use their classes too if they are given */
/* changing hue helps to change the colors, hence easy to change theme-colors and colors in the website */
/* saturation and light remain the same, only the hue changes to change or obtain the color */
.customize-theme .choose-color span:nth-child(1) {
  background: hsl(252, 75%, 60%);
}

.customize-theme .choose-color span:nth-child(2) {
  background: hsl(52, 75%, 60%);
}

.customize-theme .choose-color span:nth-child(3) {
  background: hsl(352, 75%, 60%);
}

.customize-theme .choose-color span:nth-child(4) {
  background: hsl(152, 75%, 60%);
}

.customize-theme .choose-color span:nth-child(5) {
  background: hsl(202, 75%, 60%);
}

.customize-theme .choose-color span.active {
  border: 5px solid white;
}

/* background */
.customize-theme .background {
  margin-top: 2rem;
}

.customize-theme .choose-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.customize-theme .choose-bg > div {
  padding: var(--card-padding);
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 0.4rem;
  cursor: pointer;
}

.customize-theme .choose-bg > div.active {
  border: 2px solid var(--color-primary);
}

.customize-theme .choose-bg .bg-1 {
  background: white;
  color: black;
}

.customize-theme .choose-bg .bg-2 {
  background: hsl(252, 30%, 17%);
  color: white;
}

.customize-theme .choose-bg .bg-3 {
  background: hsl(252, 30%, 20%);
  color: white;
}

.customize-theme .choose-bg > div span {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-gray);
  border-radius: 50%;
  margin-right: 1rem;
}

/* responsive design */
/* 1st media queries for small laptops and big tablets */
@media screen and (max-width: 1200px) {
  /* affecting the whole container */
  .container {
    width: 96%;
  }

  /* grid template will affect left,center,right */
  main .container {
    grid-template-columns: 5rem auto 30vw;
    gap: 1rem;
  }

  /* left to be on top by using z-index */
  .left {
    width: 5rem;
    z-index: 5;
  }

  /* profile to disappear */
  main .container .left .profile {
    display: none;
  }

  /* removing all h3 on the left sidebar */
  .left .sidebar h3 {
    display: none;
  }

  /* removing the button as well */
  .left .btn {
    display: none;
  }

  /* 
    width 80vw to make the customize theme modal take most of the viewport width on smaller screens
    80vw instead of 100vw to avoid horizontal scroll bar due to any potential overflow
    */
  .customize-theme .card {
    width: 80vw;
  }
}

/* 2nd media queries for small tablets and mobile phones */
@media screen and (max-width: 992px) {
  nav .search-bar {
    display: none;
  }

  main .container {
    grid-template-columns: 0 auto 5rem;
    gap: 0;
  }

  /* 
    shifting the left side bar at 4, since it begins at 1 
    /* 
    grid-column 3/4 to move the left section to the rightmost column, column start 3 to column end 4
    */
  main .container .left {
    grid-column: 3/4;
    position: fixed;
    bottom: 0;
    right: 0;
  }

  /* notification pop up */
  /* 
    position absolute to position the notification pop-up absolutely within the menu item
    left -20rem to position the pop-up to the left of the menu item
    width 20rem for the pop-up width
    */
  .left .notification-popup {
    position: absolute;
    /* for compact right-side bar: show the popup to the left of the bar */
    left: auto;
    right: calc(100% + 8px);
    top: 0;
    width: 20rem;
    z-index: 10002;
    display: block;
  }

  /* For small/compact mobile bar we will render a fixed popup appended to body instead
     of relying on the popup inside the sidebar (sidebar may have overflow hidden). */
  .mobile-notification-popup {
    position: fixed;
    top: 10vh;
    /* place to the left of the slim right-anchored sidebar */
    right: calc(12px + var(--sidebar-width) + 8px);
    width: 20rem;
    background: var(--color-white);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    box-shadow: 0 6px 24px rgba(8, 10, 20, 0.18);
    z-index: 10003;
  }

  .mobile-notification-popup::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    background: var(--color-white);
    position: absolute;
    right: -0.6rem;
    top: 1.2rem;
    transform: rotate(45deg);
  }

  /* Mobile messages popup - appears to the left of the slim sidebar like notifications */
  .mobile-messages-popup {
    position: fixed;
    top: 8vh;
    right: calc(12px + var(--sidebar-width) + 8px);
    width: 20rem;
    max-width: 420px;
    min-width: 260px;
    max-height: 78vh;
    overflow: hidden;
    background: var(--color-white);
    border-radius: calc(var(--card-border-radius) + 0.25rem);
    padding: 0; /* inner content handles padding */
    box-shadow: 0 10px 30px rgba(8, 10, 20, 0.22);
    z-index: 10004;
    display: flex;
    flex-direction: column;
    transition: transform 260ms ease, opacity 260ms ease;
    transform: translateX(12px);
    opacity: 0;
  }

  .mobile-messages-popup::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    background: var(--color-white);
    position: absolute;
    right: -0.6rem;
    top: 1.2rem;
    transform: rotate(45deg);
  }

  .mobile-messages-popup.visible {
    transform: translateX(0);
    opacity: 1;
  }

  /* inside container for cloned messages content */
  .mobile-messages-popup .cloned-messages {
    padding: var(--card-padding);
    overflow: auto;
    max-height: calc(78vh - 3.2rem);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .mobile-messages-popup .cloned-messages .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-light);
  }

  .mobile-messages-popup .cloned-messages .heading h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-dark);
  }

  .mobile-messages-popup .close-btn {
    background: transparent;
    border: none;
    color: var(--color-dark);
    font-size: 1.2rem;
    padding: 0.35rem;
    border-radius: 0.4rem;
    cursor: pointer;
  }

  .mobile-messages-popup .close-btn:hover {
    background: var(--color-light);
  }

  /* adjust inner search bar for the small popup */
  .mobile-messages-popup .cloned-messages .search-bar {
    padding: 0.35rem 0.45rem;
    border-radius: calc(var(--border-radius) / 2);
    /* make search bar look like the main nav search: full width, icon left, rounded */
    background: var(--color-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-messages-popup .cloned-messages .search-bar i {
    color: var(--color-gray);
    font-size: 1.05rem;
    margin-left: 0.25rem;
  }

  .mobile-messages-popup .cloned-messages .search-bar input {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    padding: 0.4rem 0.25rem;
    color: var(--color-dark);
  }


  .mobile-messages-popup .cloned-messages .message {
    gap: 0.6rem;
    padding: 0.35rem 0;
  }

  /* force message categories to be horizontal and evenly spaced for small popup */
  .mobile-messages-popup .cloned-messages .category {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
    margin: 0.6rem 0 0.4rem 0;
  }

  .mobile-messages-popup .cloned-messages .category h6 {
    flex: 1 1 0;
    text-align: center;
    margin: 0;
    padding: 0.45rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 0.45rem;
    background: transparent;
  }

  .mobile-messages-popup .cloned-messages .category h6.active {
    background: var(--color-light);
    border-bottom: none;
  }

  @media screen and (max-width: 420px) {
    .mobile-messages-popup {
      right: 8px;
      left: 8px;
      width: auto;
      min-width: 0;
      max-width: calc(100% - 16px);
      top: 6vh;
    }
    .mobile-messages-popup::before { display: none; }
    .mobile-messages-popup .cloned-messages { max-height: calc(80vh - 3rem); }
  }

  /* 
    display absolute to position the arrow absolutely within the pop-up
    top 1.3rem to align the top of the arrow with the top of the pop-up
    left calc(20rem - 0.6rem) to position the arrow at the right edge of the pop-up, subtracting half the width of the arrow (0.6rem) to center it
    */
  .left .notification-popup::before {
    position: absolute;
    top: 1.3rem;
    /* arrow on the right edge pointing to the sidebar */
    right: -0.6rem;
    left: auto;
    display: block;
  }

  /* 
    middle to have enough space on display
    grid-column 1/3 to make the middle section span from column 1 to column 3 (full width except the right section)
    */
  main .container .middle {
    grid-column: 1/3;
  }

  /* right to be displayed none */
  main .container .right {
    display: none;
  }

  .customize-theme .card {
    width: 92vw;
  }

  /* Mobile: when the menu button opens the sidebar we show a slim
     vertical icon bar anchored to the right (matches the design screenshot).
     Labels are hidden and icons centered. Notifications float to the left. */
  main .container .left {
    /* hidden off-canvas to the right by default */
    transform: translateX(100%);
    transition: transform 0.35s ease;
    position: fixed;
    top: 10vh;
    right: 12px;
    width: var(--sidebar-width);
    height: 80vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix mobile scroll behaviour: ensure the page (body) handles the
     vertical scroll rather than inner containers capturing the first
     wheel/touch event. This prevents jumping to the next feed on the
     first small scroll on some mobile browsers. */
  main, .container, .middle, .feeds {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch; /* smooth native momentum */
    touch-action: pan-y; /* allow vertical panning */
    overscroll-behavior-y: auto; /* don't trap scroll unexpectedly */
  }

  /* When open: slide in the slim bar */
  main .container .left.open {
    transform: translateX(0);
  }

  /* style the panel itself */
  main .container .left .sidebar {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 0;
  }

  /* menu item visuals */
  main .container .left .sidebar .menu-item {
    position: relative;
    transition: background 200ms ease, transform 150ms ease;
    border-radius: 0.6rem;
  }

  main .container .left .sidebar .menu-item:hover {
    transform: translateX(-4px);
    background: rgba(255,255,255,0.04);
  }

  main .container .left .sidebar .menu-item.active {
    background: var(--sidebar-active-bg);
    box-shadow: 0 6px 20px rgba(8,10,20,0.2);
  }

  /* make the active icon stand out */
  main .container .left .sidebar .menu-item.active i {
    color: white;
    transform: scale(1.05);
  }

  /* center icons and hide labels for compact bar */
  main .container .left .sidebar .menu-item {
    height: auto;
    padding: 0.6rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  main .container .left .sidebar h3 {
    display: none;
  }

  main .container .left .sidebar i {
    color: var(--sidebar-icon);
    /* slightly larger icons for better visibility on small screens */
    font-size: 1.6rem;
  }

  /* make create button smaller and pill-like inside the slim panel */
  main .container .left .btn {
    display: block;
    width: 48px;
    height: 36px;
    padding: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    align-self: center;
    margin-top: 0.5rem;
  }

  /* hide create post button inside the compact mobile bar */
  main .container .left .btn {
    display: none;
  }
}

/* Extra spacing for middle content on small screens so content isn't cut
   by the slim right bar or the floating action button. */
@media screen and (max-width: 992px) {
  /* Ensure middle column has breathing room on left and right */
  main .container .middle {
    padding-left: 0.75rem;
    /* account for the slim right sidebar + FAB + safe area on foldables/notched phones */
    padding-right: calc(var(--sidebar-width) + var(--fab-size) + 1rem + env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* Ensure feed cards and their action buttons leave room on the right so
     the slim sidebar / FAB doesn't cover icons like the bookmark. */
  .middle .feeds .feed {
    padding-right: calc(var(--sidebar-width) + var(--fab-size) + 1.25rem + env(safe-area-inset-right));
  }

  .middle .feed .action-buttons {
    margin: 0.6rem;
    padding-right: calc(var(--sidebar-width) + var(--fab-size) * 0.25 + 0.5rem + env(safe-area-inset-right));
  }

  /* Ensure create-post input + button don't overflow or get cut */
  .middle .create-post {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-right: calc(var(--sidebar-width) + var(--fab-size) + 1rem + env(safe-area-inset-right));
    position: relative;
    z-index: 2;
  }

  .middle .create-post input[type="text"] {
    flex: 1 1 auto;
    min-width: 0; /* allows shrinking inside flex */
  }

  .middle .create-post input[type="submit"] {
    flex: 0 0 auto;
    min-width: 56px;
  }

  /* Give the feeds extra bottom padding so the FAB doesn't cover the last posts */
  .middle .feeds {
    /* include safe-area inset at the bottom for devices with gesture areas */
    padding-bottom: calc(var(--fab-size) + 1.25rem + env(safe-area-inset-bottom));
  }

  /* Make each feed use full available width and avoid being clipped */
  .middle .feeds .feed {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    box-sizing: border-box;
  }

  /* Ensure images and media scale properly and don't overflow */
  .middle .feed .photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: calc(var(--card-border-radius) - 0.4rem);
  }

  /* Slightly increase container padding on very small screens */
  @media (max-width: 420px) {
    main .container .middle {
      padding-left: 0.5rem;
      padding-right: calc(var(--sidebar-width) + 0.6rem + env(safe-area-inset-right));
    }
    .middle .feeds .feed {
      padding-left: 0.6rem;
      padding-right: 0.6rem;
    }
  }

  /* Very small screens: tighten spacing and reduce paddings so feed isn't clipped */
  @media screen and (max-width: 404px) {
    /* make container use full width and keep small horizontal padding */
    .container {
      width: 100%;
      padding: 0 0.5rem;
    }

    /* grid: hide sidebar labels and keep slim right bar */
    main .container {
      grid-template-columns: 0 auto 5rem;
      column-gap: 0.4rem;
    }

    /* reduce middle column lateral padding but keep room for the slim bar */
    main .container .middle {
      padding-left: 0.4rem;
      padding-right: calc(var(--sidebar-width) + 0.6rem + env(safe-area-inset-right));
    }

    /* reduce overall card padding and margins so content fits */
    .middle .feeds .feed {
      margin: 0.5rem 0;
      padding: 0.45rem;
      font-size: 0.9rem;
      line-height: 1.35;
    }

    /* make images a bit shorter on very small screens to avoid tall cards */
    .middle .feed .photo img {
      /* reduce image height so the whole post fits and action icons remain visible */
      max-height: 38vh;
      object-fit: cover;
      margin-top: 6px;
      border-top: 3px solid var(--color-primary);
    }

    /* reduce header and story heights */
    .middle .stories {
      height: 9.5rem;
      gap: 0.4rem;
    }

    /* slightly reduce action buttons size so icons fit inside viewport */
    .middle .feed .action-buttons {
      font-size: 1.05rem;
      margin: 0.45rem;
      padding-right: 0.25rem;
    }

    /* captions slightly smaller on very small screens */
    .middle .feed .caption p {
      font-size: 0.9rem;
    }

    .middle .create-post {
      padding: 0.35rem 0.6rem;
    }

    /* TIGHTEN: reduce vertical spacing from stories -> create-post -> feeds so
       the middle column displays more content without clipping on very small screens */
    .middle .stories {
      height: 8.2rem;
      gap: 0.35rem;
    }

    .middle .story {
      padding: 0.6rem 0.6rem;
      font-size: 0.72rem;
    }

    .middle .create-post {
      padding: 0.28rem 0.5rem;
    }

    .middle .create-post input[type="text"] {
      padding-left: 0.6rem;
      font-size: 0.9rem;
    }

    /* tighten feed header and spacing */
    .middle .feed {
      margin: 0.45rem 0;
      padding: 0.45rem 0.5rem;
    }

    .middle .feed .head {
      margin-bottom: 0.35rem;
    }

    .middle .feed .user .info h3 {
      font-size: 0.95rem;
      margin-bottom: 0.05rem;
    }

    .middle .feed .user .info small {
      font-size: 0.7rem;
    }

    /* shrink liked-by and caption sizes */
    .middle .liked-by span {
      width: 1.1rem;
      height: 1.1rem;
    }

    .middle .liked-by p {
      font-size: 0.78rem;
      margin-left: 0.45rem;
    }

    .middle .feed .caption p {
      font-size: 0.82rem;
    }

    .middle .comments {
      font-size: 0.78rem;
    }

    /* ensure FAB does not overlap final content */
    .middle .feeds {
      padding-bottom: calc(var(--fab-size) + 1rem + env(safe-area-inset-bottom));
    }

    /* reduce size of floating menu toggle slightly on very small screens */
    .mobile-menu-toggle {
      width: 48px;
      height: 48px;
      bottom: 16px;
      right: 12px;
    }

    /* smaller profile photos in feeds to save horizontal space */
    .middle .feed .user .profile-photo img,
    .middle .story .profile-photo img {
      width: 2rem;
      height: 2rem;
    }
  }
}





/* Responsive: stack background choices on small screens (phones) */
@media screen and (max-width: 600px) {
  .customize-theme .choose-bg {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    justify-content: center;
  }

  .customize-theme .choose-bg > div {
    width: 100%;
    justify-content: flex-start; /* place the circle then the label */
  }

  .customize-theme .choose-bg > div span {
    margin-right: 0.75rem;
    flex: 0 0 auto;
  }

  .customize-theme .choose-bg > div h5 {
    margin: 0;
    font-size: 0.95rem;
  }

  /* Modal sizing for small screens */
  .customize-theme {
    align-items: center;
  }

  .customize-theme .card {
    width: 92vw;
    max-width: 520px;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 12px 30px rgba(8, 10, 20, 0.4);
    overflow: hidden;
  }

  /* allow modal content to scroll if it exceeds viewport height */
  .customize-theme .card {
    max-height: 90vh;
    overflow-y: auto;
  }

  /* make container fluid on small screens to avoid extra horizontal space */
  .container {
    width: 100%;
    padding: 0 0.75rem;
  }

  /* avoid any element using vw that can create overflow when scrollbars appear */
  main .container {
    grid-template-columns: 0 auto 5rem;
    column-gap: 0.5rem;
  }
}


/* floating button for the sidebar on small devices*/
/* ============= MOBILE: HIDE BOTTOM BAR BY DEFAULT & ADD FAB ============= */
@media screen and (max-width: 992px) {
    /* Hide the left sidebar off-canvas to the right by default and
       show a slim right-anchored icon bar when opened */
    main .container .left {
      transform: translateX(100%);
      transition: transform 0.35s ease;
      position: fixed;
      top: 10vh;
      right: 12px;
      width: 68px;
      height: 80vh;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    main .container .left.open {
      transform: translateX(0);
    }

    /* Floating Action Button */
    .mobile-menu-toggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 55px;
      height: 55px;
      background: var(--color-primary);
      color: white;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 1.8rem;
      cursor: pointer;
      z-index: 20050; /* keep above the opened sidebar (9999) and feed icons */
      pointer-events: auto;
      box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4);
      transition: all 0.3s ease;
    }

    .mobile-menu-toggle:hover {
        transform: scale(1.1);
    }

    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }

    /* Rotate icon when menu is open */
    .mobile-menu-toggle.open i {
        transform: rotate(45deg);
    }

    /* Optional: Dim background when menu is open */
    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    body.menu-open::before {
        opacity: 1;
        visibility: visible;
    }

    /* When the mobile menu is open we want floating controls (FAB / sidebar)
       to appear above feed-level action icons like the bookmark. Some
       responsive rules set the action buttons' z-index high (eg. 10010),
       so lower them while the mobile menu is open to avoid stacking issues. */
    body.menu-open .middle .feed .action-buttons,
    body.menu-open .middle .feed .action-buttons *,
    body.menu-open .middle .create-post input[type="submit"] {
      z-index: 900 !important;
    }

    /* When the mobile menu is open, keep a single scrollbar by disabling
       the page (outer) scrollbar and enabling scrolling only inside the
       main content area. This prevents two simultaneous scrollbars. */
    body.menu-open {
      overflow: hidden; /* prevent outer scrollbar */
    }

    /* Make the main feed scrollable inside the viewport while menu is open */
    main {
      height: calc(100vh - 5.4rem);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Ensure the opened sidebar does not create its own scrollbar */
    main .container .left.open {
      max-height: calc(100vh - 6vh);
      overflow: visible !important;
    }

    /* d removed from sidebar on small screens due to cloning */
    .left .notification-popup {
        display: none !important;
    }
}

/* Toast notifications for small screens when tapping sidebar icons */
.toast-container {
  position: fixed;
  bottom: 90px; /* sits above the floating menu toggle */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10005;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none; /* allow clicks to pass through */
}

.toast {
  background: rgba(0, 0, 0, 0.86);
  color: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(8, 10, 20, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: auto;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 400px) {
  .toast {
    font-size: 0.9rem;
    padding: 0.45rem 0.75rem;
  }
  .toast-container { bottom: 100px; }
}

/* On large screens: keep normal sidebar behavior */
@media screen and (min-width: 993px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}


/* preventing two vertical scroll bars on the viewport */
html, body {
  /* Avoid forcing viewport width which can cause layout and scroll issues */
  overflow-x: hidden !important;
  width: auto;
  max-width: 100%;
}

/* Prevent any child from forcing horizontal scroll */
* {
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure only a single vertical scrollbar on desktop: keep columns visible and
   allow modals/panels to scroll internally when needed. This prevents inner
   containers from creating an extra scrollbar (the "ninja"). */
@media screen and (min-width: 993px) {
  /* Hide the browser (outer) scrollbar and make the main area the
     single scroll container on large screens. This creates one inner
     scrollbar for the feed and avoids double-scrollbar UX. */
  html, body {
    height: 100%;
    overflow: hidden; /* hide outer scrollbar */
  }

  /* Size main to the viewport minus the fixed nav, and make it scrollable */
  main {
    height: calc(100vh - 5.4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure the grid container fills the scroll area and does not create its own scrollbar */
  main .container {
    height: 100%;
    overflow: visible !important;
  }

  /* Keep left/middle/right panels visible but let main handle scrolling */
  main .container .left,
  main .container .middle,
  main .container .right {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Keep modals and panels scrollable inside their own area */
  .customize-theme .card,
  .mobile-messages-popup .cloned-messages {
    max-height: calc(100vh - 8vh);
    overflow-y: auto;
  }
}