@import 'base.css';

body {
	font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: var(--bg);
	color: var(--text);
	margin: 0;
	font-size: 12px;
	-webkit-text-size-adjust: 100%;

	.view {
		max-width: 800px;
		margin: 0 auto;
	}

	h1 {
		margin-bottom: 12px;
		font-size: 26px;
		font-weight: 600;
		color: #e6f0ff;
	}

	.container {
		max-width: 98vw;
		margin: 0 auto;
	}

	.site-header {
		border-bottom: 1px solid rgba(255, 255, 255, 0.03);
		min-width: 320px;
		position: fixed;
		width: 100%;
		background: var(--bg);
		z-index: 1;
		top: 0;
		left: 0;

		.header-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 18px;
			gap: 18px;

			.site-logo {
				display: flex;
				align-items: center;

				a {
					padding: 0;
					margin: 0;
					display: flex;

					img {
						height: 32px;
						width: auto;
					}
				}
			}

			.site-title {
				a {
					color: var(--text);
					text-decoration: none;
					font-weight: 700;
					font-size: 1.25rem
				}
			}

			.search-toggle {
				position: relative;
				display: flex;
				align-items: center;
				border: 1px solid rgba(255, 255, 255, 0.12);
				border-radius: 32px;
				height: 32px;
				width: 32px;
				transition: width 0.5s ease;

				&:hover {
					background: #ffffff0d;
				}

				.search-icon {
					cursor: pointer;
					position: relative;
					z-index: 2;
					border: 0 transparent;
					height: 30px;
					display: flex;
					padding: 0;
					align-items: center;
					justify-content: center;
					width: 30px;
					color: #ffffff7a;
					border-radius: 0 15px 15px 0;

					&:hover {
						background: none;
					}

					&:focus {
						position: absolute;
						right: 0;
						outline: none;
						border: 0 transparent;
						box-shadow: none;
					}
				}

				input {
					width: 0;
					opacity: 0;
					padding: 0;
					background: rgba(0, 0, 0, 0);
					border: none;
					color: #fff;
					outline: none;
					transition: width 0.5s ease;
					height: 32px;

					&:focus, &:focus-within {
						border: 0 transparent;
						box-shadow: none;
					}
				}

				&.opened {
					width: 220px;

					&:hover {
						background: none;
					}

					input {
						width: 190px;
						opacity: 1;
						padding: 10px 10px;
						font-size: 16px;
						line-height: 1.3;
						-webkit-text-size-adjust: 100%;
					}

					.search-icon {
						&:hover {
							background: #ffffff0d;
						}
					}
				}
			}

			.mobile-menu-button {
				display: none;
				border: 0;
				background: transparent;
				color: inherit;
				font-size: 20px;
				padding: 6px 8px;
				cursor: pointer
			}

			.user-area {
				.user-menu-widget {
					--display-menu: none;

					&:hover {
						--display-menu: flex;
					}

					.user-avatar {
						&:hover {
							background-color: var(--user-avatar-bg-hover);
							box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
							inset 0 1px 0 rgba(255, 255, 255, 0.05);
						}
					}

					.user-menu-placeholder {
						position: relative;

						&:hover {
							--display-menu: flex;
						}

						.user-menu {
							&:hover {
								--display-menu: flex;
							}

							display: var(--display-menu);
							flex-direction: column;
							gap: 2px;
							min-width: 180px;
							transition: all .15s ease;
							position: absolute;
							background: linear-gradient(
								180deg,
								rgba(20, 32, 48, 0.98),
								rgba(12, 22, 36, 0.98)
							);
							box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
							inset 0 1px 0 rgba(255, 255, 255, 0.05);
							border-radius: var(--radius);
							right: 0;
							padding: 8px 15px 8px 5px;

							.user-name {
								font-weight: 600;
								padding: 5px 16px;
								border-bottom: 1px solid rgba(255, 255, 255, 0.03);
							}
						}
					}
				}
			}
		}
	}

	.page {
		margin-top: 54px;
		padding: 0 6px;

		article {
			&.empty-posts-list {
				background: linear-gradient(
					180deg,
					rgba(255, 255, 255, 0.025),
					rgba(255, 255, 255, 0.01)
				);
				border-radius: var(--radius);
				box-shadow: var(--shadow),
				inset 0 1px 0 rgba(255, 255, 255, 0.04);
				border: 1px solid rgba(255, 255, 255, 0.04);
				padding: 12px;
				animation: pageFadeIn 0.25s ease-out;
				margin: 5px auto;
				font-size: 16px;
				text-align: center;
			}

			&.layer {
				background: linear-gradient(
					180deg,
					rgba(255, 255, 255, 0.025),
					rgba(255, 255, 255, 0.01)
				);
				border-radius: var(--radius);
				box-shadow: var(--shadow),
				inset 0 1px 0 rgba(255, 255, 255, 0.04);
				border: 1px solid rgba(255, 255, 255, 0.04);
				padding: 12px;
				animation: pageFadeIn 0.25s ease-out;
				margin: 5px auto;
				font-size: 16px;
			}
		}

		.post {
			background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.025),
				rgba(255, 255, 255, 0.01)
			);
			border-radius: var(--radius);
			box-shadow: var(--shadow),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);
			border: 1px solid rgba(255, 255, 255, 0.04);
			padding: 12px;
			animation: pageFadeIn 0.25s ease-out;
			margin: 5px auto;

			.post-image {
				overflow: hidden;
				border-radius: 10px;
				width: 100%;
				height: 37vh;
				border: 1px solid var(--input-border-color);
				background: #111;
				margin-bottom: 16px;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.video-link-container {
				display: flex;
				width: 100%;

				.video-link-img {
					margin: 0 auto;
					cursor: pointer;
					width: 450px;
					@media (max-width: 450px) {
						width: 100%;
					}
				}
			}

			&.preview {
				display: flex;
				flex-direction: column;
				height: 75vh;
				width: 100%;
				overflow: hidden;
				position: relative;
				line-height: 1.55;
				color: inherit;
				transition: transform .25s cubic-bezier(.22, .61, .36, 1),
				background .25s ease;
				will-change: transform;

				&:hover {
					background: linear-gradient(
						180deg,
						rgba(255, 255, 255, 0.05),
						rgba(255, 255, 255, 0.02)
					);

					h1 {
						color: #fff;
						text-shadow: 0 0 18px rgba(110, 170, 255, .35);
					}

					.post-image img {
						transform: scale(1.12);
						filter: saturate(1.1) brightness(1);
					}

					.post-image::after {
						opacity: 1;
					}

					.video-link-img {
						display: none;
					}
				}

				&::after {
					content: '';
					position: absolute;
					inset: auto 0 0 0;
					height: 36px;
					background: linear-gradient(
						to bottom,
						rgba(10, 15, 25, 0),
						var(--bg)
					);
				}

				.preview-header {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					align-items: flex-start;
					justify-content: flex-start;
					transition: transform .25s ease;
					width: 100%;

					.post-image {
						img {
							transition: transform .45s cubic-bezier(.22, .61, .36, 1),
							filter .25s ease;
							filter: saturate(.9) brightness(.9);
						}

						&::after {
							content: '';
							position: absolute;
							inset: 0;
							background: radial-gradient(
								120% 100% at 30% 0%,
								rgba(120, 170, 255, 0.25),
								transparent 60%
							);
							opacity: 0;
							transition: opacity .25s ease;
							pointer-events: none;
						}
					}
				}

				.preview-content {
					font-size: 16px;
				}

				.info-panel {
					display: flex;
					position: absolute;
					bottom: 0;
					width: 100%;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: center;
					align-items: center;
					gap: 36px;

					.item {
						display: flex;
						align-items: center;
						gap: 6px;
						height: 100%;
						line-height: 20px;

						svg {
							height: 20px;
							width: 20px;
						}
					}
				}
			}

			.meta {
				display: flex;
				align-items: center;
				gap: 12px;
				margin: 0 0 12px 0;

				.second-col {
					display: flex;
					flex-direction: column;

					.second-info {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 12px;

						.author-name {
							font-weight: 600;
							color: var(--text);
						}

						.date {
							color: var(--muted);
							@media (max-width: 640px) {
								font-size: 12px;
							}
						}
					}

					.hashtags {
						color: var(--hashtags);
						display: flex;
						gap: 4px;
						align-items: center;
						justify-content: flex-start;
						flex-wrap: wrap;
					}
				}
			}

			.full-content {
				font-size: 16px;
				margin-bottom: 100px;

				stl {
					.stl-viewer-container {
						width: 100%;
						height: 37vh;
						border: 1px solid #0d6efd;
						border-radius: 8px;
						margin: 12px 0;
						background: #000;
						position: relative;
					}
				}

				.download-block {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 36px;
					flex-wrap: nowrap;
					justify-content: center;
				}
			}

			h1 {
				margin: 0 0 -6px 0;
				font-size: 22px;
				color: var(--text);
				transition: color .2s ease, text-shadow .25s ease;
			}

			p {
				line-height: 1.6;
				color: var(--muted);
			}

			.info-panel {
				display: flex;
				width: 100%;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
				gap: 36px;
				font-size: 18px;
				padding: 12px 0;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: var(--bg);
				border-top: 1px solid rgba(255, 255, 255, 0.03);

				.item {
					display: flex;
					align-items: center;
					gap: 10px;
					height: 100%;
					cursor: pointer;

					&.like {
						&.active {
							svg {
								transform: scale(0.96);
								transition: transform 50ms;
							}
						}
					}

					svg {
						height: 24px;
						width: 24px;
					}
				}
			}
		}
	}

	.recovery-page-form {
		width: 360px;
		padding: 24px;
		margin: 64px auto;
		background: linear-gradient(
			180deg,
			#0b1a2e,
			#071226
		);
		border-radius: 18px;
		box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);

		.form-title {
			margin-bottom: 18px;
			font-size: 16px;
			font-weight: 600;
			color: #6fb3ff;
		}

		.field {
			position: relative;
			margin-bottom: 16px;

			input {
				width: 100%;
				padding: 14px 12px;
				background: transparent;
				border: 1px solid rgba(255, 255, 255, 0.12);
				border-radius: 10px;
				color: #ffffff;
				outline: none;
				transition: border-color 0.15s ease,
				box-shadow 0.15s ease;

				&:focus, &:not(:placeholder-shown) {
					border-color: #6fb3ff;
				}

				&:focus + label, &:not(:placeholder-shown) + label {
					transform: translateY(-160%);
					color: #6fb3ff;
				}
			}

			label {
				position: absolute;
				left: 12px;
				top: 50%;
				transform: translateY(-50%);
				color: rgba(200, 220, 255, 0.6);
				pointer-events: none;
				transition: transform 0.15s ease,
				font-size 0.15s ease,
				color 0.15s ease;
			}
		}

		.alert {
			display: flex;
			gap: 10px;
			align-items: flex-start;
			padding: 12px 14px;
			margin-bottom: 16px;
			border-radius: 12px;
			line-height: 1.45;

			&.alert-error {
				background: linear-gradient(
					180deg,
					rgba(255, 90, 90, 0.18),
					rgba(255, 90, 90, 0.12)
				);
				border: 1px solid rgba(255, 90, 90, 0.35);
				color: #ffd6d6;

				.alert-icon {
					margin-top: 2px;
				}
			}
		}

		.primary-btn {
			width: 100%;
			padding: 12px;
			border-radius: 12px;
			border: none;
			background: linear-gradient(
				180deg,
				#3b82f6,
				#2563eb
			);
			color: #ffffff;
			font-weight: 600;
			cursor: pointer;
			transition: transform 0.12s ease,
			box-shadow 0.12s ease;

			&:hover {
				transform: translateY(-1px);
				box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
			}

			&:active {
				transform: translateY(0);
			}
		}
	}

	.verify-page {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background: radial-gradient(
			120% 120% at 50% 0%,
			rgba(20, 40, 70, 0.35),
			rgba(5, 10, 25, 0.95)
		);

		.verify-card {
			width: 420px;
			padding: 32px 28px;
			text-align: center;
			background: linear-gradient(
				180deg,
				#0b1a2e,
				#071226
			);
			border-radius: 22px;
			box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);

			.verify-icon {
				width: 56px;
				height: 56px;
				margin: 0 auto 18px;
				border-radius: 50%;
				background: linear-gradient(
					180deg,
					#22c55e,
					#16a34a
				);
				color: #ffffff;
				font-size: 28px;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 10px 30px rgba(34, 197, 94, 0.45);
			}

			h1 {
				margin-bottom: 12px;
				font-size: 20px;
				font-weight: 600;
				color: #e6f0ff;
			}

			p {
				margin-bottom: 24px;
				line-height: 1.6;
				color: rgba(200, 220, 255, 0.75);
			}
		}
	}

	.page-privacy {
		min-height: 100vh;
		padding: 48px 16px;
		background: radial-gradient(
			120% 120% at 50% 0%,
			rgba(20, 40, 70, 0.35),
			rgba(5, 10, 25, 0.95)
		);

		.container {
			max-width: 880px;
			margin: 0 auto;
			padding: 36px 40px;
			background: linear-gradient(
				180deg,
				#0b1a2e,
				#071226
			);
			border-radius: 22px;
			box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);
		}

		.meta {
			margin-bottom: 28px;
			line-height: 1.6;
			color: rgba(200, 220, 255, 0.6);

			a {
				color: #8bbcff;
				text-decoration: none;
			}
		}
	}

	.post-comments {
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: column;
		padding: 6px;
		top: 44px;
		margin: 0 auto;
		max-width: 810px;
		max-height: 93dvh;
		@media (max-width: 1024px) {
			padding: 12px;
			top: 38px;
		}

		.top-box {
			position: sticky;
			z-index: 10;
			background: #09172b;
			flex-shrink: 0;
			padding: 12px;
			margin-top: 14px;
			@media (max-width: 1024px) {
			}
		}

		.comment-box {
			margin-bottom: 6px;

			p {
				margin: 0;
				padding: 0;
			}

			.comment-box-row {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: flex-start;
				flex-wrap: nowrap;
				margin-bottom: 12px;
				gap: 12px;

				&.bottom {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					flex-wrap: nowrap;
				}
			}

			.col {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 12px;
			}

			.comment-input {
				width: calc(100% - 45px);
				max-width: calc(100% - 45px);
				padding: 8px 12px;
				border: 1px solid rgba(255, 255, 255, 0.06);
				border-radius: 20px;

				&:focus, &:focus-visible {
					outline: 1px solid rgba(255, 255, 255, 0.06);
					border: 1px solid rgba(255, 255, 255, 0.06);
					box-shadow: none;
				}

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.comment-length-container {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 4px;
				font-size: 12px;
				color: rgba(200, 220, 255, 0.6);
			}

			.btn-comment-send {
				border-radius: 20px;
				padding: 8px 16px;
			}
		}

		.comments-list {
			padding: 0 12px;
			display: flex;
			flex-direction: column;
			gap: 6px;
			width: 100%;
			align-items: center;
			justify-content: flex-start;
			flex: 1 1 auto;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;

			& > .comment > .comment-row > .comment {
				padding: 0 0 0 25px;
			}

			.comment {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				gap: 12px;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 8px 0 0 0;
				width: 100%;

				p {
					margin: 0;
					padding: 0;
				}

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.comment-col {
					&:first-child {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						gap: 4px;
					}

					&.main {
						width: 100%;
						flex: 1;
						@media (max-width: 640px), (max-width: 1024px) {
							width: 88%;
						}
					}
				}

				.comment-row {
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: space-between;
					gap: 12px;
					max-width: 100%;
					width: 100%;
					flex-wrap: wrap;

					&.bottom {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						gap: 12px;
						padding: 16px 0;
					}
				}

				.user-fullname {
					font-size: 14px;
					margin-bottom: 4px;
				}

				.comment-text {
					max-width: calc(100% - 12px);
					overflow: auto;
				}

				.comment-date {
					color: var(--muted);
					font-size: 10px;
				}

				.btn-reply {
					border: none;
					cursor: pointer;
				}

				.reply-container {
					width: 100%;
				}
			}
		}
	}
}

.verify-icon {
	color: #0e950e;
	font-size: 32px;
	font-weight: bold;
	border: 1px solid;
	border-radius: 50%;
	max-width: 50px;
	background-color: #00800030;
	margin: 0 auto;
}

@keyframes pageFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 1024px) {
	body {
		font-size: 16px;

		.page {
			margin-top: 52px;
		}
	}
}

@media (max-width: 640px) {
	.page {
		margin-top: 28px;

		.page-box {
			padding: 18px;
		}
	}
}