/* WebTV alert dialog, lifted from the shell's iframe.css so the standalone
   chat page can draw its own modal instead of asking a parent frame that
   isn't there. Same look as the real WebTV HD dialog. */

#wtvDialog {
	display: flex;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25vw;
	min-width: 320px;
	min-height: 16vh;
	max-height: 50vh;
	padding: 1.5vw;
	flex-direction: column;
	border: 0;
	border-radius: 6px;
	background: #424242;
	color: var(--webtv-gold, #e7ce4a);
	box-shadow:
		0.6vw 0.6vw #00000080,
		inset 1px 1px 1px #424242,
		inset 2px 2px 2px 2px #969696,
		inset -1px -1px 1px #424242,
		inset -2px -2px 2px 2px #202020;
	text-shadow: 0.1vw 0.1vw #000;
	z-index: 9999;
	visibility: hidden;
}

#wtvDialog.shown { visibility: visible; }

#wtvDialogBackdrop {
	position: fixed;
	inset: 0;
	background: #0006;
	z-index: 9998;
	display: none;
}

#wtvDialogBackdrop.shown { display: block; }

#wtvDialog .dialog-message-container {
	display: flex;
	align-items: center;
	z-index: 10000;
}

#wtvDialogLogo {
	display: block;
	position: relative;
	width: 7.5vw;
	min-width: 70px;
	height: 5vw;
	min-height: 55px;
	background-image: url(../images/WebTVShadowInset.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 1vw;
	flex-shrink: 0;
}

#wtvDialogMessage {
	position: relative;
	margin: auto;
	font-size: 1.6vw;
	word-wrap: break-word;
	text-shadow: 0.1vw 0.1vw #000;
}

#wtvDialog .dialog-separator {
	display: block;
	margin-top: 1.2vw;
	margin-bottom: 1.2vw;
	z-index: 10000;
}

#wtvDialog .dialog-buttons {
	display: flex;
	justify-content: right;
	min-height: 1px;
}

#wtvDialogButton {
	margin-left: 1vw;
	padding: 0.1vw 1vw;
	font-size: 1.3vw;
	z-index: 10003;
}

/* An empty button label means "still working" - hide it entirely. */
#wtvDialogButton.empty { display: none; }

@media (max-width: 760px) {
	#wtvDialog {
		width: 80vw;
		min-width: 0;
		padding: 4.5vw;
	}
	#wtvDialogLogo {
		width: 22vw;
		height: 18vw;
		margin-right: 3vw;
	}
	#wtvDialogMessage {
		font-size: 4.5vw;
		width: 100%;
		text-shadow: 0.3vw 0.3vw #000;
	}
	#wtvDialogButton { font-size: 3.5vw; padding: 1vw 4vw; }
	#wtvDialog .dialog-separator { margin: 3vw 0; }
}