@media (max-width: 767px) {
  /* Keep the Copilot title/settings in the document flow on phones so they
     scroll away with the page instead of remaining pinned over content. */
  div:has(> header > button[aria-label="Open Copilot integration settings"]) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  div:has(> header > button[aria-label="Open Copilot integration settings"]) > header {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    /* Visually align the title and settings control with the mobile app-bar
       row while preserving their in-flow footprint, so they still scroll
       naturally with the Copilot page rather than becoming viewport-fixed. */
    top: -80px !important;
    width: 100% !important;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 56px 1.25rem 0 60px;
  }

  /* The former inner scroller reserved 78px for the absolutely-positioned
     header. Once the header participates in layout, remove that spacer and
     let the outer Copilot page own vertical scrolling. */
  div:has(> header > button[aria-label="Open Copilot integration settings"]) > header + div {
    height: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
  }
}