/* BabaDeda — mobile fit for Element Web.
   Element is desktop-oriented (icon rail + room-list panel + chat, side by side),
   which overflows and cramps phones. For a single-room family chat we force a
   clean full-width single column, like any messaging app.

   Selectors are prefixed "html body" to outrank Element's own runtime styles
   (higher specificity wins the cascade regardless of load order).
   Loaded via <link> in index.html; served no-cache so updates always apply. */

/* Hide Element's encryption nag toasts ("set up recovery" / "verify this
   session"). We don't use encryption; these only prompt users into bootstrapping
   cross-signing, which brings back the verification wall. Group calls show
   in-room (not as toasts), so hiding the toast area is safe here. Applies at all
   widths. */
html body .mx_ToastContainer { display: none !important; }

/* Safety net: hide the "get started" home page and its room/DM-creation buttons.
   boot.js redirects users into the family chat, but if they ever reach home we
   don't want the buttons that let them create stray encrypted DMs. */
html body .mx_HomePage_default_buttons,
html body .mx_HomePage_button_createGroup,
html body .mx_HomePage_button_sendDm,
html body .mx_HomePage_button_explore {
  display: none !important;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  /* Hide the left icon rail (spaces) and the room-list panel: with one family
     room, users land straight in it and never navigate a list. */
  html body .mx_SpacePanel,
  html body .mx_LeftPanel,
  html body .mx_LeftPanel_outerWrapper,
  html body .mx_ResizeHandle,
  html body .mx_SpacePanel_toggleCollapse {
    display: none !important;
    width: 0 !important;
  }

  /* Conversation takes the whole screen. */
  html body .mx_MatrixChat,
  html body .mx_MatrixChat_wrapper,
  html body .mx_RoomView,
  html body .mx_RoomView_body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    left: 0 !important;
  }

  /* Room header inside the screen; drop the overflowing member pile. */
  html body .mx_RoomHeader { max-width: 100vw !important; overflow: hidden !important; }
  html body .mx_FacePile, html body .mx_RoomHeader_members { display: none !important; }

  /* Composer never wider than the screen. */
  html body .mx_MessageComposer,
  html body .mx_BasicMessageComposer,
  html body .mx_SendMessageComposer {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}