html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.widget-wrapper {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.logos {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem;
	border: 0 solid transparent;

	&.top {
		grid-row: 1;
		border-bottom-width: 1px;
		padding: 17px 15px;
	}
	&.bottom {
		padding: 0;
		grid-row: 3;
		border-top-width: 1px;
	}

	& img {
		max-width: 100%;
		height: auto;
	}
}

iframe {
	width: 100%;
	height: 100%;
	border: none;
	z-index: 1;
}

.widget-wrapper {
	background-color: #bebeb9;
}

iframe,
.disconnection-reason,
.loading-spinner-container {
	grid-row: 2;
	grid-column: 1;
}

.disconnection-reason {
	display: grid;
	place-items: center;
	padding: 1em;
	z-index: 2;

	& * {
		margin: 0;
	}

	&[hidden] {
		display: none;
	}

	& .message {
		padding: 1em;
		border-radius: 1em;
		white-space: pre-wrap;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 1em;
		max-width: 800px;
		overflow-wrap: break-word;
	}

	& .message-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
	}

	& .message-actions {
		display: flex;
		gap: 1em;
		justify-content: flex-end;

		&:empty {
			display: none;
		}
	}

	& button {
		padding: 0.5em 1em;
		border: currentColor solid 1px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 1em;
	}
}

.loading-spinner-container {
	display: grid;
	place-items: center;
	z-index: 0;

	& img {
		animation: spin 1s linear infinite;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}