/* M8SH Messenger — layout: make #messenger-app fill viewport below navbar.
   The actual component styles are scoped in MessengerApp.vue.
   This CSS ensures the height chain works: body > .full.height > .page-content > #messenger-app */

/* .full.height is a flex item in body (flex column). Make it also a flex container
   so its children (navbar + page-content) can fill height. */
.full.height:has(#messenger-app) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important; /* cancel the 64px bottom padding */
}

/* .page-content contains #messenger-app. Make it fill remaining height. */
.page-content:has(#messenger-app) {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 0 !important; /* cancel the 16px page-spacing margin-top */
  padding: 0 !important;
  min-height: 0; /* allow inner scroll areas to work */
  overflow: hidden;
}

/* #messenger-app is the Vue mount point — fill its parent */
#messenger-app {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}