main {
	user-select: none;
	width: 100%;
	height: 100vh;
	background-color: var(--color-background);
	display: grid;
	grid-template-columns: repeat(8,1fr);
	> div.stage {
		grid-row: 1/2;
		grid-column: 3/7;
		z-index: 1;
		width: 100%;
		display: grid;
		justify-content: center;
		align-items: center;
		> figure {
			grid-area: 1/1/2/2;
			width: min(1024px,100%);
			height: min(1024px,100vh);
			&:nth-of-type(1) {
				z-index: 1;
			}
			&:nth-of-type(2) {
				z-index: 2;
			}
			> img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
	> div.message {
		grid-row: 1/2;
		grid-column: 6/9;
		z-index: 2;
		width: 100%;
		height: 100vh;
		justify-self: end;
		align-self: end;
		padding-block: 10px;
		padding-inline: 10px;
		> div.messages {
			width: 100%;
			height: 100vh;
			padding: 1rem;
			overflow-y: auto;
			scroll-behavior: smooth;
			display: flex;
			flex-direction: column;
			> div.messageWrapper {
				display: flex;
				flex-direction: column;
				margin-bottom: 0.5rem;
				max-width: 70%;
				&.myMessage {
					align-self: flex-end;
					> div.messageBubble {
						background-color: rgba(120,255,120,0.4);
						color: #111;
						border-radius: 10px 10px 0 10px;
					}
					> div.timestamp {
						align-self: flex-end;
						margin-right: 10px;
					}
				}
				&.aiMessage {
					align-self: flex-start;
					> div.messageBubble {
						background-color: rgba(255,255,255,0.5);
						color: #111;
						border-radius: 10px 10px 10px 0;
					}
					> div.timestamp {
						align-self: flex-start;
						margin-left: 10px;
					}
				}
				> div.messageBubble {
					padding: 0.4rem 1rem;
					word-wrap: break-word;
					white-space: pre-wrap;
					line-height: 1.4;
				}
				> div.timestamp {
					font-size: 0.75rem;
					color: rgba(0,0,0,0.3);
					margin-top: 4px;
				}
			}
		}
	}
	> div.control {
		grid-row: 1/2;
		grid-column: 1/3;
		z-index: 2;
		width: 100%;
		justify-self: start;
		align-self: end;
		padding-block: 10px;
		padding-inline: 10px;
		> div.button {
			display: flex;
			column-gap: 3px;
			> button {
				width: 100%;
				background-color: rgba(255,255,255,0.8);
				border: solid 1px rgba(50,40,30,0.3);
				border-radius: 3px;
				color: #543;
				cursor: pointer;
				padding-block: 5px;
				padding-inline: 5px;
				white-space: nowrap;
				background-color: rgba(255,255,255,0.5);
				&:hover {
					border-color: #fff;
				}
				&:disabled {
					opacity: 0.3;
				}
			}
		}
		> div.status {
			margin-top: 3px;
			border: solid 1px rgba(255,255,255,0.3);
			padding-block: 5px;
			padding-inline: 5px;
			background-color: rgba(255,255,255,0.1);
			border-radius: 3px;
			> p {
				text-align: center;
				font-size: 0.8rem;
				line-height: 1.4;
				color: #543;
				font-weight: 500;
			}
		}
		> div.send {
			margin-top: 3px;
			display: flex;
			column-gap: 3px;
			> textarea {
				field-sizing: content;
				width: 100%;
				min-height: 100px;
				padding-block: 5px;
				padding-inline: 5px;
				font-size: 0.8rem;
				font-family: inherit;
			}
			> button {
				background-color: transparent;
				border: solid 1px rgba(50,40,30,0.3);
				border-radius: 3px;
				color: #543;
				cursor: pointer;
				padding-block: 5px;
				padding-inline: 5px;
				white-space: nowrap;
				background-color: rgba(255,255,255,0.3);
				&:hover {
					border-color: #fff;
				}
				&:disabled {
					opacity: 0.2;
				}
			}
		}
	}
}