/* Element 1.12.34 fixes this screen at 640px; keep verification usable on narrow screens. */
@media (max-width: 700px) {
  .mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthPage_modal {
    width: calc(100% - 24px);
    min-width: 0;
    margin: 12px auto auto;
  }

  .mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthPage_modalContent,
  .mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_Dialog_border,
  .mx_AuthPage .mx_CompleteSecurityBody,
  .mx_CompleteSecurityBody .mx_SetupEncryptionBody {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .mx_AuthPage .mx_CompleteSecurityBody {
    padding: 20px 16px 28px;
  }

  .mx_AccessSecretStorageDialog_recoveryKeyEntry button {
    width: 44px;
  }

  .mx_CompleteSecurityBody .mx_EncryptionCard_buttons button {
    height: auto;
    min-height: 48px;
    padding-block: 12px;
    white-space: normal;
    text-align: center;
  }

  .mx_AccessSecretStorageDialog_recoveryKeyEntry > div,
  .mx_AccessSecretStorageDialog_recoveryKeyEntry input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .mx_AccessSecretStorageDialog_recoveryKeyEntry input {
    padding-inline-end: 56px;
  }

  .mx_AuthPage:has(.mx_CompleteSecurityBody) .mx_AuthFooter a {
    display: inline-block;
    max-width: calc(100% - 24px);
    margin-inline: 12px;
  }

  .mx_UserSettingsDialog .mx_SettingsTab:has(.mx_FilteredDeviceList) {
    min-width: 0;
    padding-right: 16px;
  }

  .mx_UserSettingsDialog .mx_FilteredDeviceList_deviceDetails {
    margin-left: 0;
  }

  .mx_UserSettingsDialog .mx_FilteredDeviceList_list {
    grid-template-columns: minmax(0, 1fr);
  }

  .mx_UserSettingsDialog .mx_FilteredDeviceList_listItem {
    min-width: 0;
  }

  .mx_UserSettingsDialog .mx_DeviceSecurityCard_content,
  .mx_UserSettingsDialog .mx_DeviceTile_info,
  .mx_UserSettingsDialog .mx_DeviceDetailHeading > :first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mx_UserSettingsDialog .mx_DeviceDetailHeading {
    flex-wrap: wrap;
    gap: 8px;
  }

  .mx_UserSettingsDialog .mx_DeviceSecurityCard button {
    height: auto;
    min-height: 48px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .mx_UserSettingsDialog .mx_DeviceDetails {
    padding: 12px;
  }

  .mx_UserSettingsDialog .mx_DeviceSecurityCard {
    flex-direction: column;
    gap: 8px;
  }

  .mx_UserSettingsDialog .mx_DeviceSecurityCard_content {
    width: 100%;
  }

  .mx_UserSettingsDialog .mx_DeviceSecurityCard_icon {
    margin-right: 0;
  }
}