/*
 * Phone layout for Element Web (linked from index.html by patch-index.py).
 * Element has no responsive chat layout; on a phone the resizable panel group
 * squeezes the room list to 0px next to the timeline. Show the list when no
 * room is open and the room when one is; mobile-nav.js adds the "back to list"
 * arrow, which stays hidden on wider screens.
 */
.tq-back-button {
  display: none !important;
}

@media (max-width: 599px) {
  .tq-back-button {
    display: inline-flex !important;
  }
  .mx_MatrixChat:has(.mx_RoomView) .mx_SpacePanel,
  .mx_MatrixChat:has(.mx_RoomView) #left-panel,
  .mx_MatrixChat .mx_Separator {
    display: none !important;
  }
  .mx_MatrixChat:not(:has(.mx_RoomView)) .mx_Separator ~ div {
    display: none !important;
  }
  .mx_MatrixChat:not(:has(.mx_RoomView)) #left-panel {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #left-panel .mx_LeftPanel_outerWrapper {
    max-width: none;
    width: 100%;
  }
  .mx_Separator ~ div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .mx_RoomHeader {
    padding: 0 12px !important;
  }
  .mx_RoomHeader .mx_RoomHeader_heading {
    font-size: 15px !important;
  }
  .mx_RoomHeader .mx_RoomHeader_info > [class*="_font-body-sm-"],
  .mx_RoomHeader .mx_FacePile {
    display: none !important;
  }
  .mx_RoomView_body {
    --RoomView_MessageList-padding: 10px;
  }
  .mx_EventTile {
    --event-tile-group-gutter: 50px; /* 8 + 32 avatar + 10 gap */
    --event-tile-group-timestamp-width: 46px;
  }
  .mx_EventTile[class*="_layoutGroup_"]:not([class*="_stateInfo_"]) [data-testid="event-tile-line"] {
    padding-inline-end: 44px !important;
  }
  .mx_EventTile[class*="_layoutGroup_"] [data-testid="event-tile-slot-timestamp"] {
    inset-inline-end: 4px !important;
  }
  /* Element reserves 80px on the right for read receipts; 36px is plenty on a phone. */
  .mx_EventTile[class*="_layoutGroup_"][class*="_hasReceiptSlot_"] [data-testid="event-tile-line"] {
    margin-inline-end: 36px !important;
  }
  .mx_EventTile[class*="_layoutGroup_"] [data-testid="event-tile-slot-avatar"] {
    inset-inline-start: 8px !important;
  }
  .mx_EventTile[class*="_layoutGroup_"]:not([class*="_stateInfo_"]):not([class*="_shapeThreadsList_"]) [data-testid="event-tile-slot-avatar"] .mx_BaseAvatar {
    --cpd-avatar-size: 32px !important;
    inline-size: 32px !important;
    block-size: 32px !important;
    line-height: 30px !important;
    font-size: 15px !important;
  }
  .mx_EventTile[class*="_layoutGroup_"]:not([class*="_stateInfo_"]):not([class*="_shapeThreadsList_"]) [data-testid="event-tile-slot-avatar"] .mx_BaseAvatar img {
    width: 32px !important;
    height: 32px !important;
    inline-size: 32px !important;
    block-size: 32px !important;
  }
  .mx_NewRoomIntro {
    margin: 12px 4px !important;
    padding: 16px 18px !important;
  }
  .mx_RoomView .mx_MessageComposer {
    padding: 6px 10px 10px !important;
  }
  .mx_MessageComposer_input {
    min-height: 44px !important;
  }
  /* iOS auto-zooms into inputs below 16px. */
  .mx_MessageComposer_input,
  .mx_MessageComposer_input .mx_BasicMessageComposer_input,
  .mx_AuthBody .mx_Field input,
  .mx_AuthBody .mx_Field select,
  .mx_SpotlightDialog input {
    font-size: 16px !important;
  }
  .mx_MessageComposer_sendMessage::after {
    display: none; /* icon only on phones */
  }
  .mx_RoomView .mx_MainSplit {
    position: relative;
  }
  .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 10;
  }
  .mx_RightPanel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
  }
  .mx_MainSplit > .mx_ResizeHandle,
  .mx_RightPanel_ResizeWrapper .mx_ResizeHandle {
    display: none !important;
  }
  .mx_Dialog {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
  }
}