/* =====================================================================
   ShotGram v96 — a real computer layout for the website.

   Until now a computer got the exact phone layout: one 540px column in the
   middle of the screen, the phone's top bar, and the phone's bottom tab bar —
   an iPhone screen on a monitor. From 1024px wide, on the WEBSITE only
   (html.sg-web — never the iPhone/Android app), it becomes instagram.com-like:

     · a fixed sidebar on the left: logo, Home, Search, Reels, Messages,
       Notifications, Create, LIVE, Clans, Profile, Settings (with badges)
     · no phone top bar, no bottom tab bar
     · content in a wider column beside it
     · 1024–1279px: the sidebar shows icons only; 1280px+: icons + names

   The phone bars' heights (--top-h, --bar-h, --dock-gap) are set to 0 here, so
   every screen that measured itself around those bars simply fills the space.
   ===================================================================== */

.sidenav { display: none; }

@media (min-width: 1024px) {
  html.sg-web {
    --top-h: 0px;
    --bar-h: 0px;
    --dock-gap: 0px;
    --side-w: 76px;
    --shell: 660px;
  }
  html.sg-web .topbar,
  html.sg-web .tabbar { display: none !important; }

  html.sg-web #app { padding-inline-start: var(--side-w); }
  html.sg-web .app-shell { border-inline: 0; }
  html.sg-web .screen { padding-top: 24px; }

  /* ---- the sidebar ---- */
  html.sg-web .sidenav {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    width: var(--side-w);
    display: flex; flex-direction: column; gap: 4px;
    padding: 22px 12px 18px;
    background: var(--ink, #06070f);
    border-inline-end: 1px solid var(--line, rgba(255, 255, 255, .09));
    overflow-y: auto; scrollbar-width: none;
  }
  html.sg-web .sidenav::-webkit-scrollbar { display: none; }

  .sidenav-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 22px; color: inherit; background: none; border: 0;
  }
  .sidenav-brand img { border-radius: 10px; flex: none; }
  .sidenav-brand .wordmark { display: none; font-size: 22px; }

  .sidenav-list { display: grid; gap: 4px; }
  .side-item {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 50px; padding: 0 12px;
    border-radius: 14px; border: 0; background: none;
    color: var(--text, #f4f5ff); font-size: 15.5px; text-align: start;
    cursor: pointer; transition: background .15s ease;
  }
  .side-item:hover { background: rgba(255, 255, 255, .06); }
  .side-item:active { transform: scale(.98); }
  .side-item.active { font-weight: 800; }
  .side-item.active .side-ico svg { stroke-width: 2.3; }
  .side-item.active .tab-avatar { box-shadow: 0 0 0 2px var(--text, #fff); border-radius: 50%; }
  .side-ico { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
  .side-ico svg { width: 26px; height: 26px; }
  .side-ico .count-badge { position: absolute; top: -6px; inset-inline-end: -8px; }
  .side-label { display: none; white-space: nowrap; }
  .side-item.is-live .side-ico { color: #ff3b6b; }
  .side-more { margin-top: auto; }

  /* ---- floating things were centred on the whole window; centre them on
         the content instead, now that the sidebar takes the left edge ---- */
  html.sg-web .toast { left: calc(50% + var(--side-w) / 2) !important; }

  /* ---- full-screen experiences keep the whole window ---- */
  html.sg-web body.live-open .sidenav { display: none; }
  html.sg-web body.live-open #app { padding-inline-start: 0; }
}

@media (min-width: 1280px) {
  html.sg-web { --side-w: 248px; }
  .sidenav-brand .wordmark { display: inline; }
  .side-label { display: inline; }
}

/* An open chat is pinned to the window: centre it in the content area
   (beside the sidebar, never under it) and give it more width. */
@media (min-width: 1024px) {
  html.sg-web body.chat-open { --shell: 820px; }
  html.sg-web .room {
    left: calc(50% + var(--side-w) / 2);
    width: min(var(--shell), calc(100% - var(--side-w) - 32px));
  }
}

/* v139.3 — the full-screen post viewer opened UNDER the sidebar on a
   computer: its Back button sat behind the logo and could not be clicked.
   It now fills the content area beside the sidebar, and the post is shown
   as a centred phone-width column instead of stretched across the monitor. */
@media (min-width: 1024px) {
  html.sg-web body.watch-open .watch { inset-inline-start: var(--side-w); }
  html.sg-web body.watch-open .watch-stack .w-slide { max-width: min(560px, 100%); margin-inline: auto; }
  /* v1.3.9-fix60 — the "Find related content" bar sits centred over the post column (same width as the post).
     The old inset-inline-start:0 fought the centring rule in v139-62-calm.css and slid half the bar under the sidebar. */
  html.sg-web body.watch-open .watch-top { inset-inline-start: auto; left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); }
}