#viewport-telegram-ios {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	position: relative;

	> svg {
		display: block;
		width: 100%;
		height: auto;
		position: absolute;
		inset: 0;
		margin-top: 0.375rem;
	}

	> header {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		padding: 3.125rem 0.5rem 0.425rem;
		cursor: default;

		* {
			cursor: default;
		}

		> div {
			&:nth-child(1) {
				display: flex;
				align-items: center;

				> span {
					display: flex;
					align-items: center;
					font-size: 0.925rem;

					> svg {
						display: inline;
						font-size: 1.125rem;
					}
				}
			}

			&:nth-child(2) {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				overflow: hidden;
				max-width: 100%;
				text-overflow: ellipsis;

				> h2 {
					line-height: normal;
					font-size: 1rem;
					font-weight: 600;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					display: flex;
					max-width: 12rem;
				}

				> span {
					line-height: normal;
					font-size: 0.75rem;
				}
			}

			&:nth-child(3) {
				display: flex;
				align-items: center;
				justify-content: end;

				> span {
					display: flex;
					color: white;
					aspect-ratio: 1/1;
					border-radius: 50%;
					width: 2rem;
					align-items: center;
					justify-content: center;
					text-align: center;
					font-weight: 500;
				}
			}
		}
	}

	&.dark {
		> div:nth-child(3) {
			background: var(--telegram-ios-bg-gradient-dark);

			&::before {
				filter: invert(1);
			}
		}
	}

	> div:nth-child(3) {
		display: flex;
		content: "";
		flex-grow: 1;
		background: var(--telegram-ios-bg-gradient-light);
		position: relative;

		&::before {
			background: url("/assets/patterns/pattern-3.svg") repeat;
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			content: "";
			opacity: 0.125;
		}
	}

	> span:nth-child(4) {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.25);
	}

	&.open.expanded {
		background-color: black;

		> header {
			margin: 3.5rem 1rem 0;
			border-top-left-radius: 1rem;
			border-top-right-radius: 1rem;
			background-color: var(--tg-var-ios-light-section_bg_color) !important;
		}

		&.dark {
			> header {
				background-color: var(--tg-var-ios-dark-section_bg_color) !important;
			}
		}
	}

	> section {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		display: flex;
		flex-direction: column;
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		overflow: hidden;
		height: 68%;

		&.expanded {
			height: calc(100% - 4.25rem);
		}

		> header {
			display: grid;
			grid-template-columns: 1fr 2fr 1fr;
			padding: 0.5rem;
			cursor: default;

			> div {
				&:nth-child(1) {
					display: flex;
					align-items: center;

					> span {
						display: flex;
						align-items: center;
						font-size: 0.875rem;
						cursor: pointer;
					}
				}

				&:nth-child(2) {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					overflow: hidden;
					max-width: 100%;
					text-overflow: ellipsis;

					> h2 {
						line-height: normal;
						font-size: 0.925rem;
						font-weight: 600;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						display: flex;
						max-width: 100%;
					}

					> span {
						line-height: normal;
						font-size: 0.75rem;
					}
				}

				&:nth-child(3) {
					display: flex;
					align-items: center;
					justify-content: end;
					font-size: 1.125rem;

					svg {
						cursor: pointer;
					}
				}
			}
		}

		> section {
			display: flex;
			flex-direction: column;
			padding: 0;
			margin: 0;
			flex-grow: 1;
			position: relative;

			> div {
				position: absolute;
				inset: 0;
				z-index: 999999;
			}

			> webview {
				display: flex;
				padding: 0;
				margin: 0;
				flex-grow: 1;
				width: 100%;
				height: 100%;
			}
		}
	}

	> footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		display: flex;
		padding: 0.75rem 1rem 1.75rem;
		gap: 0.5rem;
		align-items: center;

		> button {
			cursor: pointer;
			line-height: normal;
			padding: 0 0.625rem;
			border-radius: 100rem;
			font-size: 0.875rem;
			display: flex;
			gap: 0.25rem;
			align-items: center;
			height: 2rem;

			> svg {
				font-size: 1.125rem;
			}
		}

		> div {
			display: flex;
			flex-grow: 1;
			align-items: center;
			border-radius: 100rem;
			padding: 0.25rem 0.75rem;

			> span {
				flex-grow: 1;
			}
		}

		svg {
			font-size: 1.325rem;
		}
	}
}
