/*
 * Pin the left navigation sidebar so it stays in place while the feed scrolls.
 * The app's .x-shell is a centered grid (max-width:1280px) whose first column is
 * a fixed track (220px, or 88px under 1100px), so taking .x-left out of flow with
 * position:fixed does NOT shift the center column — the track still reserves the
 * space. We align the fixed sidebar to that reserved track across breakpoints.
 */

/* Expanded sidebar (matches the default grid: 220px 1fr 340px). */
@media (min-width: 1101px) {
  .x-left {
    position: fixed;
    top: 0;
    left: max(0px, calc((100vw - 1280px) / 2));
    width: 220px;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 50;
  }
}

/* Icon-only sidebar (matches the 88px 1fr grid between 761px and 1100px). */
@media (min-width: 761px) and (max-width: 1100px) {
  .x-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 88px;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 50;
    align-items: center;
  }

  /* Hide every text label so only the icons remain — prevents the labels from
   * wrapping/overflowing the narrow 88px track ("menu bar text gets messed up"). */
  .x-left .x-nav-btn > span:not(.x-nav-icon-wrap),
  .x-left .x-left-profile-text,
  .x-left .x-logo {
    display: none !important;
  }

  /* Center the icon-only nav buttons inside the narrow rail. */
  .x-left .x-nav-btn,
  .x-left .x-nav-item {
    justify-content: center;
    text-align: center;
    gap: 0;
  }

  /* Compact the profile row and post button to icon size. */
  .x-left .x-left-profile,
  .x-left .x-left-profile-bottom {
    justify-content: center;
  }

  .x-left .x-post-btn {
    padding-inline: 0;
    font-size: 0;
  }

  .x-left .x-post-btn::before {
    content: "+";
    font-size: 1.4rem;
    font-weight: 700;
  }
}

/* Keep the pinned sidebar usable when it's taller than the viewport without
 * showing an intrusive scrollbar. */
@media (min-width: 761px) {
  .x-left {
    scrollbar-width: none;
  }
  .x-left::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}