@import url('/.library/css/default.css');
/* ----- ----- ----- */
main > section:nth-of-type(1) {
	width: 100%;
	height: auto;
	padding: 80px 24px 24px;
	/* ----- ----- ----- */
	& > div:nth-of-type(1) banner div#qrcode > div.noclick {
		&::after {
			content: '';

			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			width: 32%;
			height: 32%;
			border: min(8px, 2vw) solid white;
			border-radius: 50%;

			background: white;
			background-image: url('/.library/img/solana.gif');
			background-size: 100%;
			box-shadow: 0 0 8px rgb(200, 200, 200) inset;
		}
		/* ----- ----- ----- */
		& img {
			pointer-events: none;
			max-width: 25dvw;
		}
	}
	/* ----- ----- ----- */
	& > div:nth-of-type(2) {
		height: 100%;
		max-height: calc(100svh - 104px);
		border: 2px solid rgba(var(--scrollbar), 0.3);
		box-shadow: 0 0 16px rgba(var(--scrollbar), 1);
		/* ----- ----- ----- */
		> div {
			width: 100%;
			height: 40px;

			box-shadow: 0 0 8px rgba(var(--scrollbar), 0.5);
			/* ----- ----- ----- */
			& > span {
				width: 12px;
				height: 12px;
				border-radius: 50%;
			}
		}
		/* ----- ----- ----- */
		& > ul.chat {
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			scroll-behavior: smooth;

			/* mask: linear-gradient(0deg, white 75%, transparent); */
			/* -webkit-mask: linear-gradient(0deg, white 75%, transparent); */
			/* ----- ----- ----- */
			& li {
				width: auto;
				height: auto;
				padding: 16px;
				border-radius: 5px;

				background: rgba(var(--color), 0.025);
				box-shadow: 0 1px 4px rgba(var(--hr));
				/* ----- ----- ----- */
				& time {
					padding: 2px 8px 0;
					border-radius: 24px;

					background: rgba(var(--hr));
				}
			}
		}
		/* ----- ----- ----- */
		& form.chat {
			margin: 16px;
			width: calc(100% - 32px);
			padding: 0 6px 0 12px;
			border: 2px solid rgba(var(--scrollbar), 0.3);
			background: rgba(200, 200, 200, 0.05);
			/* ----- ----- ----- */
			& input {
				height: 48px;
			}
			/* ----- ----- ----- */
			& button[type='submit'] {
				width: 104px;
				height: 36px;
				box-shadow: 0 0 4px var(--rose);
				/* ----- ----- ----- */
				&:hover, &:focus {
					--q-low: none;
					--q-high: btn-arrows 1s linear;
					--q-ultra: var(--q-high);

					box-shadow: 0 0 4px var(--rose);
					outline: 2px solid transparent;
					outline-offset: 4px;

					transition: all 0.5s linear;
					/* ----- ----- ----- */
					& svg path:nth-of-type(1) {
						--q-low: none;
						--q-high: btn-arrow 1s infinite 0.6s;
						--q-ultra: var(--q-high);

						transform: translateX(0);
					}
					& svg path:nth-of-type(2) {
						--q-low: none;
						--q-high: btn-arrow 1s infinite 0.4s;
						--q-ultra: var(--q-high);

						transform: translateX(0);
					}
					& svg path:nth-of-type(3) {
						--q-low: none;
						--q-high: btn-arrow 1s infinite 0.2s;
						--q-ultra: var(--q-high);
					}
				}
				/* ----- ----- ----- */
				& svg path:nth-of-type(1) {
					transition: 0.4s;
					transform: translateX(-60%);
				}
				& svg path:nth-of-type(2) {
					transition: 0.5s;
					transform: translateX(-30%);
				}
			}
		}
	}
	/* ---- @typpy ----- */
	& div.tippy-box {
		background: transparent;
		/* ----- ----- ----- */
		& div.tippy-content {
			padding: 0;
			box-shadow: 0 2px 4px rgba(var(--hr));
		}
		& div.tippy-arrow {
			color: rgb(240, 240, 240);
		}
		& form#setusername {
			& input {
				width: 104px;
				height: 32px;
				padding: 0 8px;
				border-radius: 3px 0 0 3px;

				background: rgb(240, 240, 240);
				color: rgb(var(--color));
			}
			& button {
				width: auto;
				height: 32px;
				padding: 0 8px;
				border-radius: 0 3px 3px 0;

				box-shadow: -4px 0 4px -4px var(--rose);
			}
		}
	}
}
/* ----- ----- ----- */
@media (max-width: 1599px) {
	main > section:nth-of-type(1) {
		flex-wrap: wrap;
		align-items: center;
		flex-direction: column-reverse;

		height: auto;
	}
}