/*
 * Center the open Zoho chat window on small screens.
 *
 * Zoho pins the open window 50px from the bottom-right corner (the flow's
 * launcher spacing) and makes it 364px wide and 82vh tall. On a phone that
 * pushes it past the left edge of the screen, and because mobile browsers
 * measure vh as if the address bar were hidden, its top slides under the
 * address bar. Here the window is centered and sized to the visible viewport
 * (dvh), keeping a 16px gutter on every side.
 *
 * Zoho's class names are hashed per build, so this selects on its
 * data-test-id attributes instead. The same fixed container holds the
 * launcher bubble while the chat is closed, so the rules only apply when the
 * launcher is absent (chat open). Browsers without :has() skip these rules
 * and keep Zoho's default layout.
 */
@media (max-width: 480px), (max-height: 480px) {
	#zohogc-helper-main {
		--carchief-chat-gutter: 16px;
		--carchief-chat-width: min(364px, calc(100vw - 2 * var(--carchief-chat-gutter)));
		--carchief-chat-height: min(780px, calc(100vh - 2 * var(--carchief-chat-gutter)));
	}

	@supports (height: 100dvh) {
		#zohogc-helper-main {
			--carchief-chat-height: min(780px, calc(100dvh - 2 * var(--carchief-chat-gutter)));
		}
	}

	#zohogc-helper-main [data-test-id="AppContainer"] > [data-test-id="boxComponent"] > [data-test-id="containerComponent"]:not(:has(> [data-test-id="launcherContainer"])) {
		inset: 0;
		margin: auto;
		width: var(--carchief-chat-width);
		height: var(--carchief-chat-height);
	}

	#zohogc-helper-main [data-test-id="AppContainer"] > [data-test-id="boxComponent"] > [data-test-id="containerComponent"]:not(:has(> [data-test-id="launcherContainer"])) > [data-test-id="widgetLayout"] {
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: none;
	}
}