/* iPhone-first additions layered on the pinned Element Web stylesheet. */
:root {
  --astra-visual-viewport-height: 100dvh;
  --astra-visual-viewport-top: 0px;
  color-scheme: dark;
}

html,
body,
#matrixchat,
.mx_MatrixChat {
  min-height: 100%;
}

@media (max-width: 720px) {
  html,
  body {
    height: var(--astra-visual-viewport-height, 100dvh) !important;
    max-height: var(--astra-visual-viewport-height, 100dvh) !important;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    touch-action: manipulation;
  }

  #matrixchat,
  .mx_MatrixChat {
    box-sizing: border-box;
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0;
    width: 100%;
  }

  /* Prevent iOS from zooming the whole messenger when a field receives focus. */
  input,
  select,
  textarea,
  [contenteditable="true"] {
    font-size: max(16px, 1em) !important;
  }

  button,
  [role="button"],
  .mx_AccessibleButton,
  a.mx_AccessibleButton {
    touch-action: manipulation;
  }

  .mx_RoomView,
  .mx_RoomView_body,
  .mx_RoomView_messagePanel,
  .mx_ScrollPanel,
  .mx_RoomList,
  .mx_RoomListPanel {
    min-width: 0 !important;
    overscroll-behavior: contain;
  }

  .mx_RoomHeader {
    box-sizing: border-box;
    min-height: 52px;
    padding-inline: 8px !important;
  }

  .mx_RoomHeader button,
  .mx_MessageComposer button,
  .mx_LeftPanel button,
  .mx_RoomListPanel button {
    min-height: 44px;
    min-width: 44px;
  }

  .mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
  .mx_EventTile[data-layout="bubble"] .mx_EventTile_content {
    max-width: min(88%, calc(100vw - 56px)) !important;
    overflow-wrap: anywhere;
  }

  .mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
    transition: transform 160ms cubic-bezier(.2, .8, .2, 1);
  }

  .mx_EventTile.astra-swipe-reply .mx_EventTile_line {
    transform: translate3d(var(--astra-swipe-x, 0), 0, 0);
    transition: none;
    will-change: transform;
  }

  .mx_EventTile.astra-swipe-reply::after {
    align-items: center;
    background: #213d55;
    background: color-mix(in srgb, var(--astra-accent) 22%, transparent);
    border: 1px solid #47779e;
    border: 1px solid color-mix(in srgb, var(--astra-accent) 50%, transparent);
    border-radius: 50%;
    color: var(--astra-accent);
    content: "↩";
    display: flex;
    font-size: 21px;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    opacity: var(--astra-swipe-progress, 0);
    pointer-events: none;
    position: absolute;
    right: max(10px, env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%) scale(.86);
    transition: background-color 100ms ease, transform 100ms ease;
    width: 36px;
    z-index: 2;
  }

  .mx_EventTile.astra-swipe-reply-ready::after {
    background: var(--astra-accent);
    color: #08131d;
    transform: translateY(-50%) scale(1);
  }

  .mx_MessageComposer {
    box-sizing: border-box;
    padding-right: max(6px, env(safe-area-inset-right)) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    padding-left: max(6px, env(safe-area-inset-left)) !important;
  }

  .mx_MessageComposer_wrapper {
    min-height: 44px;
  }

  .mx_EventTile img,
  .mx_EventTile video {
    height: auto;
    max-width: 100%;
  }

  .mx_Dialog,
  .mx_Dialog_wrapper,
  .mx_ContextualMenu,
  [role="dialog"] {
    box-sizing: border-box;
    max-height: calc(var(--astra-visual-viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
  }

  .mx_RightPanel {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
  .mx_EventTile[data-layout="bubble"] .mx_EventTile_content {
    max-width: min(92%, calc(100vw - 44px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mx_EventTile[data-layout="bubble"] .mx_EventTile_line,
  .mx_EventTile.astra-swipe-reply::after {
    transition-duration: 1ms !important;
  }
}