/**
 * Shared mobile/native dialog geometry.
 *
 * The native shell and compact browser viewports use the same visual-viewport
 * contract so dialogs stay reachable above system bars and software keyboards.
 */
:root {
	--bmm-visual-viewport-height: 100vh;
	--bmm-visual-viewport-offset-top: 0px;
	--bmm-dialog-edge-gap: 12px;
	--bmm-mobile-comments-sheet-bottom: 0px;
	--bmm-mobile-comments-sheet-height: 90vh;
	--bmm-mobile-comments-sheet-top-clearance: 0px;
}

@supports (height: 100dvh) {
	:root {
		--bmm-visual-viewport-height: 100dvh;
		--bmm-mobile-comments-sheet-height: 90dvh;
	}
}

html:is(.bmm-native-container, .bmm-compact-viewport) body :where(
	[role="dialog"][aria-modal="true"],
	.bank-account-modal__content,
	.bmm-links-modal-card,
	.bmm-modal-content,
	.bmm-modal__content,
	.bmp-add-playlist-modal__dialog,
	.bmp-close-confirm-dialog,
	.bmp-external-warning__dialog,
	.bmp-feed-share-dialog,
	.bmp-group-confirm-dialog,
	.bmp-identity-dialog,
	.bmp-modal-content,
	.bmp-modal__content,
	.kah-top-friends-modal-panel,
	.kol-aft-modal,
	.kol-ams-auth-modal__panel,
	.kol-apes-reaction-login-modal__dialog,
	.kol-aps-profile-transparency-dialog,
	.kol-as-popup-content,
	.kol-as-share-dialog,
	.kol-as-tag-review-modal-dialog,
	.kol-awc-privacy-modal__dialog,
	.kol-chat-pinned-dialog,
	.kol-chat-popup-theme-dialog,
	.kol-chat-spam-dialog,
	.kol-chat-theme-dialog,
	.kol-comic-edit-dialog,
	.kol-emoji-picker-content,
	.kol-event-modal-dialog,
	.kol-external-link-dialog,
	.kol-global-reactors-dialog,
	.kol-guest-mode-modal__dialog,
	.kol-guestbook-settings-dialog,
	.kol-helpdesk-modal-panel,
	.kol-hub-modal-content,
	.kol-lgp-modal-card,
	.kol-modal-content,
	.kol-modal__content,
	.kol-myplace-avatar-dialog,
	.kol-myplace-confirm-dialog,
	.kol-myplace-external-link-dialog,
	.kol-myplace-top-friends-dialog,
	.kol-myplace-top-friends-modal-panel,
	.kol-persona-dialog,
	.kol-persona-media-dialog,
	.kol-privacy-modal-content,
	.kol-spam-modal-box,
	.kol-spam-report-modal-content,
	.kol-unsaved-modal-box,
	.kol-vidz-dialog-panel,
	.pvc-modal__container,
	.ui-dialog
) {
	box-sizing: border-box;
	max-height: calc(var(--bmm-visual-viewport-height) - (2 * var(--bmm-dialog-edge-gap))) !important;
	max-height: calc(
		var(--bmm-visual-viewport-height)
		- max(var(--bmm-dialog-edge-gap), env(safe-area-inset-top, 0px))
		- max(var(--bmm-dialog-edge-gap), env(safe-area-inset-bottom, 0px))
	) !important;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Preserve fixed headers/actions in flex dialogs while the content body scrolls. */
html:is(.bmm-native-container, .bmm-compact-viewport) body :where(
	.bmp-identity-dialog,
	.kah-top-friends-modal-panel,
	.kol-ams-auth-modal__panel,
	.kol-awc-privacy-modal__dialog,
	.kol-emoji-picker-content,
	.kol-helpdesk-modal-panel,
	.kol-myplace-avatar-dialog,
	.kol-myplace-top-friends-dialog,
	.kol-myplace-top-friends-modal-panel
) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

html:is(.bmm-native-container, .bmm-compact-viewport) body .kol-emoji-picker-content {
	max-height: min(
		420px,
		calc(
			var(--bmm-visual-viewport-height)
			- max(var(--bmm-dialog-edge-gap), env(safe-area-inset-top, 0px))
			- max(var(--bmm-dialog-edge-gap), env(safe-area-inset-bottom, 0px))
		)
	) !important;
}

@supports (height: 100dvh) {
	html:is(.bmm-native-container, .bmm-compact-viewport) body .kol-emoji-picker-content {
		max-height: min(
			420px,
			calc(
				100dvh
				- max(var(--bmm-dialog-edge-gap), env(safe-area-inset-top, 0px))
				- max(var(--bmm-dialog-edge-gap), env(safe-area-inset-bottom, 0px))
			)
		) !important;
	}
}

html:is(.bmm-native-container, .bmm-compact-viewport) body :where(
	.bmp-identity-body,
	.kah-top-friends-modal-body,
	.kol-ams-auth-modal__body,
	.kol-as-comments-modal-body,
	.kol-as-popup-body,
	.kol-awc-privacy-modal__body,
	.kol-emoji-grid,
	.kol-helpdesk-modal-panel .kol-helpdesk-form-container,
	.kol-modal-body,
	.kol-myplace-avatar-body,
	.kol-myplace-top-friends-picker,
	.kol-spam-modal-body
) {
	min-height: 0 !important;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Keep controls reachable on narrow screens without changing desktop sizing. */
@media (max-width: 782px) {
	/*
	 * Normalize every right-side comments implementation into the same mobile
	 * bottom sheet. Desktop keeps each plugin's native drawer layout.
	 */
	body :where(
		.bmp-share-lite-comments-drawer,
		.kol-as-comments-sidebar.kol-as-comments-modal,
		.kol-apes-sidebar
	) {
		z-index: 100000 !important;
		top: auto !important;
		right: 0 !important;
		bottom: max(var(--bmm-mobile-comments-sheet-bottom), env(safe-area-inset-bottom, 0px)) !important;
		left: 0 !important;
		box-sizing: border-box !important;
		width: auto !important;
		max-width: none !important;
		height: var(--bmm-mobile-comments-sheet-height) !important;
		max-height: var(--bmm-mobile-comments-sheet-height) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		border-top: 1px solid rgba(15, 23, 42, 0.14) !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-radius: 20px 20px 0 0 !important;
		box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.24) !important;
		transform: translate3d(0, calc(100% + 2px), 0) !important;
		transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
		will-change: transform;
	}

	body.bmp-share-lite-comments-open .bmp-share-lite-comments-drawer,
	body .kol-as-comments-sidebar.open,
	body .kol-apes-sidebar.open {
		transform: translate3d(0, 0, 0) !important;
	}

	body :where(
		.kol-blog-comments-drawer,
		.kol-comic-comments-drawer
	) {
		z-index: 100000 !important;
		top: auto !important;
		right: 0 !important;
		bottom: max(var(--bmm-mobile-comments-sheet-bottom), env(safe-area-inset-bottom, 0px)) !important;
		left: 0 !important;
		width: auto !important;
		max-width: none !important;
		height: var(--bmm-mobile-comments-sheet-height) !important;
		max-height: var(--bmm-mobile-comments-sheet-height) !important;
	}

	body :where(
		.kol-blog-comments-drawer__panel,
		.kol-comic-comments-drawer__panel
	) {
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		border-top: 1px solid rgba(15, 23, 42, 0.14) !important;
		border-right: 0 !important;
		border-left: 0 !important;
		border-radius: 20px 20px 0 0 !important;
		box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.24) !important;
		overflow: hidden;
		transform: translate3d(0, calc(100% + 2px), 0) !important;
		transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
		will-change: transform;
	}

	body .kol-blog-comments-drawer.is-open .kol-blog-comments-drawer__panel,
	body .kol-comic-comments-drawer.is-open .kol-comic-comments-drawer__panel {
		transform: translate3d(0, 0, 0) !important;
	}

	body :where(
		.bmp-share-lite-comments-drawer.is-restoring,
		.kol-blog-comments-drawer.is-restoring .kol-blog-comments-drawer__panel,
		.kol-comic-comments-drawer.is-restoring .kol-comic-comments-drawer__panel,
		.kol-apes-sidebar.kol-apes-sidebar-no-transition
	) {
		transition: none !important;
	}

	body :where(
		.kol-as-comments-sidebar-header,
		.kol-apes-sidebar-header
	) {
		margin-top: 0 !important;
	}

	body :where(
		.kol-as-comments-sidebar-content,
		.kol-apes-sidebar-content
	) {
		padding-bottom: 0 !important;
	}

	body .kol-as-comments-sidebar-header {
		padding-right: 58px !important;
	}

	body .kol-as-comments-sidebar-toolbar {
		flex-wrap: wrap !important;
		padding-right: 14px !important;
	}

	body .kol-as-comments-sidebar .kol-as-comments-sort-btn {
		flex: 1 1 calc(33.333% - 6px);
		justify-content: center;
		min-width: 0;
		padding-right: 8px !important;
		padding-left: 8px !important;
	}

	body .kol-as-comments-sidebar-close,
	body .kol-apes-sidebar-close {
		position: absolute !important;
		top: 12px !important;
		right: max(12px, env(safe-area-inset-right, 0px)) !important;
		z-index: 4 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}

	body :where(
		.bmp-share-lite-comments-close,
		.kol-blog-comments-drawer__close,
		.kol-comic-comments-drawer__close
	) {
		right: max(12px, env(safe-area-inset-right, 0px)) !important;
		flex: 0 0 auto !important;
	}

	html:is(.bmm-native-container, .bmm-compact-viewport) body :where(
		[role="dialog"][aria-modal="true"],
		[class$="-dialog"],
		[class*="-dialog "],
		[class$="-modal-content"],
		[class*="-modal-content "],
		[class$="-modal__content"],
		[class*="-modal__content "],
		[class$="-modal-panel"],
		[class*="-modal-panel "],
		[class$="-modal-box"],
		[class*="-modal-box "]
	) {
		max-width: calc(100vw - (2 * var(--bmm-dialog-edge-gap)));
	}

	html:is(.bmm-native-container, .bmm-compact-viewport) body :where(
		.kol-ams-auth-modal,
		.kol-apes-reaction-login-modal,
		.kol-guest-mode-modal
	) :where(.kol-login-prompt-qr, [class$="__qr"]) {
		display: none !important;
	}
}

/*
 * When the keyboard leaves a very short visual viewport, keep the composer
 * inside the sheet instead of letting its desktop minimums spill over the
 * bottom navigation. The sheet body remains the primary scrolling region.
 */
@media (max-width: 782px) and (max-height: 520px) {
	body :where(
		.bmp-share-lite-comments-footer,
		.kol-as-comments-sidebar-footer,
		.kol-blog-comments-drawer__footer,
		.kol-comic-comments-drawer__footer,
		.kol-apes-comment-form
	) {
		flex: 0 1 auto !important;
		min-height: 0 !important;
		max-height: 55% !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}

	body .kol-blog-comments-drawer__footer {
		padding: 6px 10px 8px !important;
	}

	body .kol-blog-comments-drawer__footer .kol-blog-comments-composer {
		padding: 8px !important;
	}

	body .kol-blog-comments-composer textarea {
		height: 38px !important;
		min-height: 38px !important;
		max-height: 52px !important;
		padding: 7px 9px !important;
		resize: none !important;
	}

	body .kol-blog-comments-composer__controls {
		gap: 6px !important;
		margin-top: 6px !important;
	}

	body .kol-blog-comments-composer__actions {
		gap: 5px !important;
	}

	body .kol-blog-comments-composer button,
	body .kol-blog-comments-composer__tools .kol-emoji-trigger,
	body .kol-blog-comments-composer__tools .kol-giphy-trigger {
		min-height: 30px !important;
		height: 30px !important;
	}

	body .kol-blog-comments-composer button {
		padding-right: 9px !important;
		padding-left: 9px !important;
	}

	body .kol-blog-comments-composer__tools .kol-emoji-trigger,
	body .kol-blog-comments-composer__tools .kol-giphy-trigger {
		flex-basis: 30px !important;
		width: 30px !important;
		min-width: 30px !important;
	}

	body .kol-comic-comments-drawer__footer {
		padding: 6px 8px 8px !important;
	}

	body .kol-comic-comments-drawer__footer .kol-comic-comment-form {
		padding: 8px !important;
	}

	body .kol-comic-comments-drawer__footer .kol-comic-comment-compose {
		gap: 6px !important;
	}

	body .kol-comic-comments-drawer__footer .kol-comic-comment-input {
		height: 38px !important;
		min-height: 38px !important;
		max-height: 48px !important;
		padding: 7px 9px !important;
		font-size: 14px !important;
		resize: none !important;
	}

	body .kol-comic-comments-drawer__footer .kol-comic-comment-submit {
		min-width: 78px !important;
		min-height: 34px !important;
		font-size: 14px !important;
	}

	body .bmp-share-lite-comments-footer {
		padding: 0 8px 8px !important;
	}

	body .bmp-share-lite-comments-composer {
		padding: 7px 8px !important;
	}

	body .bmp-share-lite-comments-composer textarea,
	body .bmp-share-lite-comments-composer textarea:focus,
	body .bmp-share-lite-comments-composer textarea:not(:placeholder-shown) {
		height: 36px !important;
		min-height: 36px !important;
		max-height: 48px !important;
		padding: 7px 9px !important;
	}

	body :where(.kol-as-comments-sidebar-footer, .kol-apes-comment-form) {
		margin-bottom: 8px !important;
		padding: 7px 9px !important;
	}

	body .kol-apes-comment-form.is-expanded .kol-apes-comment-input {
		height: 48px !important;
		min-height: 48px !important;
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
	body :where(
		.bmp-share-lite-comments-drawer,
		.kol-as-comments-sidebar.kol-as-comments-modal,
		.kol-apes-sidebar,
		.kol-blog-comments-drawer__panel,
		.kol-comic-comments-drawer__panel
	) {
		transition: none !important;
	}
}