html {
  overscroll-behavior: none;
}

body {
  --footer-height: calc((var(--block-space)) + 3.6em + var(--block-space));
  --navbar-height: 54px;
  --sidebar-width: 0vw;

  display: grid;
  grid-template-areas:
    "sidebar nav"
    "sidebar main";
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: min-content 1fr;
  max-block-size: 100dvh;

  /* The header trims 2px below tablet-portrait so it stays proportional
     as the shell narrows. */
  @media (max-width: 833.9px) {
    --navbar-height: 52px;
  }

  /* Sidebar states: docked >=1280 (272px wide desktop, 240px narrow),
     a 60px icon rail 834-1279 that expands over the content on demand,
     and an off-canvas drawer below 834. */
  &.sidebar {
    @media (min-width: 834px) {
      --sidebar-width: 60px;
    }

    @media (min-width: 1280px) {
      --sidebar-width: 272px;
    }
  }
}

#nav {
  grid-area: nav;
}

#main-content {
  align-content: start;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  grid-area: main;
  overflow: auto;
  position: relative;

  .sidebar & {
    justify-content: end;

    @media (min-width: 1024px) {
      border-inline-start: 1px solid var(--color-border-darker);
    }
  }
}

#main-content > #app {
  overflow: auto;
}

#sidebar {
  grid-area: sidebar;
  position: relative;
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);

  .sidebar & {
    background-color: var(--color-bg-sunk);
    block-size: 100dvh;
    contain: layout style;
    max-block-size: 100dvh;
    z-index: 3;

    /* Drawer: off-canvas over a scrim */
    @media (max-width: 833.9px) {
      inline-size: min(300px, 85vw);
      inset: 0 auto 0 0;
      position: fixed;
      padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
      transform: translate(-100%);
    }

    /* Rail: docked at 60px; opening expands it over the conversation */
    @media (min-width: 834px) and (max-width: 1279.9px) {
      &.open {
        box-shadow: var(--shadow-overlay);
        inline-size: 264px;
        inset: 0 auto 0 0;
        position: fixed;
      }
    }
  }

  &.open {
    @media (max-width: 833.9px) {
      transform: translate(0);
    }
  }
}

/* Below the docked breakpoint an open sidebar overlays the content:
   dim it with a scrim (clicks land on body and close via the controller)
   and lock the page scroll. */
@media (max-width: 1279.9px) {
  body.sidebar:has(#sidebar.open) {
    overflow: hidden;

    &::after {
      background-color: oklch(var(--lch-always-black) / 0.4);
      content: "";
      inset: 0;
      position: fixed;
      z-index: 2;
    }
  }
}

/* Contextual panels dock only after their own width fits beside the sidebar and
   a readable transcript. Room info earns a 288px column at 1160px; threads
   need their 360px column at 1232px. Until then, thread_panel.css keeps them
   as overlays so the transcript retains its full measure. */
@media (min-width: 1160px) {
  body:has(#thread-panel:not([hidden]) [data-panel-kind="roster"]) {
    --thread-width: 288px;

    grid-template-areas:
      "sidebar nav thread"
      "sidebar main thread";
    grid-template-columns: var(--sidebar-width) 1fr var(--thread-width);
  }
}

@media (min-width: 1232px) {
  body:has(#thread-panel:not([hidden]) [data-panel-kind="thread"]) {
    --thread-width: 360px;

    grid-template-areas:
      "sidebar nav thread"
      "sidebar main thread";
    grid-template-columns: var(--sidebar-width) 1fr var(--thread-width);
  }
}

/* A forum post is a reading column, not a thread. Keep its existing wider
   clamp and inline treatment. */
@media (min-width: 1024px) {
  body:has(#thread-panel:not([hidden]) [data-panel-kind="forum"]) {
    --thread-width: clamp(360px, 42vw, 680px);

    grid-template-areas:
      "sidebar nav thread"
      "sidebar main thread";
    grid-template-columns: var(--sidebar-width) 1fr var(--thread-width);
  }
}

#thread-panel {
  grid-area: thread;
}

/* DM split view: the conversation rail docks between the sidebar and the
   open conversation. Below the split width, direct rooms hide the rail
   (conversation full-width, back link in the header) while the DM inbox
   promotes it to the whole content area — the list is the screen. */
#list-rail {
  display: none;
  grid-area: rail;
}

@media (min-width: 1024px) {
  body:has(#list-rail) {
    grid-template-areas:
      "sidebar rail nav"
      "sidebar rail main";
    grid-template-columns: var(--sidebar-width) 272px minmax(0, 1fr);
  }

  #list-rail {
    background-color: var(--color-bg);
    border-inline-end: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;

    .sidebar & {
      border-inline-start: 1px solid var(--color-border-darker);
    }
  }

  body:has(#list-rail) .dm-back {
    display: none;
  }
}

@media (min-width: 1160px) {
  body:has(#list-rail):has(#thread-panel:not([hidden]) [data-panel-kind="roster"]) {
    grid-template-areas:
      "sidebar rail nav thread"
      "sidebar rail main thread";
    grid-template-columns: var(--sidebar-width) 272px minmax(0, 1fr) var(--thread-width);
  }
}

@media (min-width: 1232px) {
  body:has(#list-rail):has(#thread-panel:not([hidden]) [data-panel-kind="thread"]) {
    grid-template-areas:
      "sidebar rail nav thread"
      "sidebar rail main thread";
    grid-template-columns: var(--sidebar-width) 272px minmax(0, 1fr) var(--thread-width);
  }
}

@media (max-width: 1023.9px) {
  body.inbox:has(#list-rail) {
    #list-rail {
      display: flex;
      flex-direction: column;
      grid-area: main;
      min-block-size: 0;
    }

    #main-content {
      display: none;
    }
  }
}

#footer {
  grid-area: footer;
}