/* Critical mobile sizing rules are kept in a uniquely named file so that
 * iOS/PWA asset caches cannot continue serving the pre-0.25.2 modal width. */
.an-passkey-modal {
	box-sizing: border-box !important;
	width: 100vw !important;
	max-width: 100vw !important;
	padding: 12px !important;
	overflow: hidden !important;
}

.an-passkey-modal__panel {
	box-sizing: border-box !important;
	width: calc(100vw - 24px) !important;
	max-width: 440px !important;
	min-width: 0 !important;
	margin: 0 auto !important;
	padding: 25px 20px calc(24px + env(safe-area-inset-bottom)) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.an-passkey-modal__panel > p,
.an-passkey-modal__status {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

.an-passkey-modal form,
.an-passkey-modal form label,
.an-passkey-modal form input,
.an-passkey-modal form button,
.an-passkey-modal__panel > button:not(.an-passkey-modal__close) {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

@media (max-width: 680px) {
	.an-passkey-modal {
		align-items: end !important;
		padding-right: max(12px, env(safe-area-inset-right)) !important;
		padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
		padding-left: max(12px, env(safe-area-inset-left)) !important;
	}

	.an-passkey-modal__panel {
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important;
		max-height: calc(100dvh - 24px) !important;
		border-radius: 16px !important;
	}
}