/* Keep the expanded-menu content inset when the icon rail releases more room.
   Percentages use the workspace width, including its real scrollbar allowance.
   The original main width/padding remain untouched with the menu expanded. */
.workspace {
  --page-base-gutter: 40px;
  --page-expanded-sidebar: 240px;
  --page-recovered-width: 0px;
  --page-content-inset: max(var(--page-base-gutter), calc((100% - var(--page-recovered-width) - 1510px) / 2 + var(--page-base-gutter)));
}

@media (min-width: 721px) {
  body[data-sidebar-collapsed="true"]:not([data-view="portal"]) .workspace {
    --page-recovered-width: calc(var(--page-expanded-sidebar) - 80px);
  }

  body[data-sidebar-collapsed="true"]:not([data-view="portal"]) .workspace > #main:not(.inbox-main) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--page-content-inset);
  }
}

/* A little breathing room around the conversation, without adding another
   scrolling page or taking the composer out of its bounded flex layout. */
body[data-view="inbox"] #main.inbox-main {
  padding-inline: var(--page-content-inset);
  padding-bottom: 20px;
}

body[data-view="inbox"] .inbox-heading,
body[data-view="inbox"] .inbox-navigation {
  padding-inline: 0;
}

body[data-view="inbox"] .inbox-shell {
  border: 1px solid #dce4e9;
  border-radius: 18px;
}

@media (max-width: 1200px) {
  .workspace {
    --page-base-gutter: 28px;
    --page-expanded-sidebar: 214px;
  }
}

@media (max-width: 980px) {
  .workspace { --page-expanded-sidebar: 190px; }
}

@media (max-width: 720px) {
  .workspace {
    --page-base-gutter: 19px;
    --page-expanded-sidebar: 0px;
  }

  body[data-view="inbox"] #main.inbox-main {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  body[data-view="inbox"] .inbox-shell,
  body[data-view="inbox"] .inbox-shell.chat-open {
    border-radius: 16px;
  }
}