/* For the pages made to be shown in iframes on our Lovable pages (Controller/Iframes.php) - /iframes/* */

/* the page the iframe is on shows through */
html, body {
	background: transparent !important;
}

/* in dark mode, the same color-scheme as the dark Lovable pages (their html has color-scheme: dark) - when the iframe's
   color-scheme differs from the page it's on, the browser paints an opaque (white) backdrop behind it, so it isn't transparent */
html:has(.mlg_visualizer_widget.dark_mode) {
	color-scheme: dark;
}

/* the iframe has a fixed height on the Lovable page, and the MLG texts have different lengths - so the widget is the height of
   the iframe (minus main's py-3), and the description scrolls when it's too long. Only side by side - stacked, the page scrolls */
@media (min-width: 900px){
	/* only the description scrolls - not the page around it too */
	main:has(.mlg_visualizer_widget){
		overflow-y: hidden;
	}

	.mlg_visualizer_widget{
		height: calc(100vh - 2rem);

		> .texts{
			display: flex;
			flex-direction: column;
			min-height: 0;
		}

		.description{
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
			padding-right: .5rem; /* room between the text and the scrollbar */
		}
	}
}


/* the overlay behind the dialogs (e.g. "Update your MLG") - transparent, the page the iframe is on shows through.
   It's still there, so clicking it still works */
.ui-widget-overlay {
	background: transparent !important;
}