/* Sidebar destinations share the main app screen and its scrolling behavior. */
.feature-page{
  box-sizing:border-box;
  padding:24px 28px;
  background:var(--panel);
}
.feature-page-panel{
  box-sizing:border-box;
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  min-width:0;
}
.feature-page-panel > .modal-head{
  position:sticky;
  top:0;
  z-index:3;
  padding:0 0 18px;
  background:var(--panel);
}
.feature-page-panel > .modal-head h2{ font-size:22px; }
.feature-page-panel > .modal-body{ padding:22px 0; }
.feature-page-panel > .modal-foot{ padding:18px 0; }
#todoOverlay .feature-page-panel{ max-width:960px; }
#usersOverlay .feature-page-panel{ max-width:1200px; }
#recycleBinOverlay .feature-page-panel{ max-width:1000px; }
#chatOverlay .feature-page-panel{ max-width:1500px; }
#dataHubOverlay .feature-page-panel{ max-width:1280px; }
#allFilesOverlay .feature-page-panel{ max-width:1200px; }
#activityOverlay .feature-page-panel{ max-width:1200px; }

.feature-page-panel.act-modal .act-toolbar{ padding:16px 0; }
.feature-page-panel.act-modal .act-list{ overflow:visible; padding:0 0 24px; }
.feature-page-panel.act-modal .act-day{ top:48px; }

.feature-page-panel.chat{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:480px;
}
.feature-page-panel.chat > .modal-head{ flex:0 0 auto; }
.feature-page-panel.chat .chat-wrap{
  flex:1 1 auto;
  height:auto;
  min-height:0;
  border:1px solid var(--panel-edge);
  border-radius:12px;
  overflow:hidden;
}
.feature-page-panel.dh-modal{ max-height:none; overflow:visible; }
.feature-page-panel.dh-modal .dh-body{ overflow:visible; }

@media (max-width:720px){
  .feature-page{ padding:16px 16px calc(86px + env(safe-area-inset-bottom, 0px)); }
  #chatOverlay, #dataHubOverlay, #activityOverlay{ padding:16px 16px calc(86px + env(safe-area-inset-bottom, 0px)); }
  #chatOverlay > .feature-page-panel.chat,
  #dataHubOverlay > .feature-page-panel.dh-modal{
    width:100%;
    max-width:none;
    max-height:none;
    height:100%;
    min-height:0;
    margin:0;
  }
  .feature-page-panel > .modal-head h2{ font-size:19px; }
  .feature-page-panel.chat.chat-in-thread > .modal-head{ display:none; }
  .feature-page-panel.chat .chat-wrap{ min-height:0; }
  #dataHubOverlay .dh-body{ padding:16px 0; }
  .feature-page-panel.act-modal .act-toolbar{ padding:12px 0; }
  .feature-page-panel.act-modal .act-list{ padding:0 0 24px; }
}