:root {
	--primary-color: #0d1011; /* Dark slate gray for base elements */
	/* --primary-color-alt: #0d1011; */
	--secondary-color: #4A9C8E; /* Teal for accent elements, vibrant yet industrial */
	--tertiary-color-light: #B0BEC5; /* Light gray for secondary elements and backgrounds */
	--tertiary-color-dark: #37474F; /* Darker gray for additional contrast */
	--tertiary-color-darker: #252829; /* Darkest gray for additional contrast */
	--text-color: #ECEFF1; /* Soft white for text for readability */
	--error-color: #D32F2F; /* Muted red for errors, alerts, and warnings */
}

html {
	background: #2b383f;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template: 100% / 100%;
}

body {
	/* background-color: var(--primary-color); */
	margin: 0;
	padding: 1.5em;
	background: linear-gradient(to bottom right, #2b2d2f, #2b383f);
	background-repeat: no-repeat;
	color: var(--text-color);
	font-family: 'Courier New', Courier, monospace; /* Emphasizing the monospace theme */
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	padding-top: 0.33em;
	padding-bottom: 1em;
}


.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;
	/* vertical-align: initial; */
	/* display: inline-flex; */
	vertical-align: bottom;
}

*::-webkit-scrollbar {
	width: 1.8ex;
	height: 1.8ex;
}
*::-webkit-scrollbar-thumb {
	background: var(--secondary-color);
}
*::-webkit-scrollbar-thumb:hover {
	background: var(--tertiary-color-light);
}
*::-webkit-scrollbar-track {
	background: var(--tertiary-color-dark);
}
*::-webkit-scrollbar-corner {
	background: var(--tertiary-color-dark);
}

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

button {
	color: var(--secondary-color);
	background-color: var(--tertiary-color-dark);
	border: none;
	font-size: 1em;
	padding: 1.6ex 2.8ex;
	font-weight: bold;
	cursor: pointer;
}
button:disabled {
	color: var(--tertiary-color-darker);
	background-color: var(--tertiary-color-dark);
	cursor: not-allowed;
}
a {
	color: var(--secondary-color);
}
input[type="text"], input[type="number"] {
	background-color: var(--tertiary-color-dark);
	color: var(--text-color);
	border: none;
	padding: 1ex 1ex;
	font-size: 1em;
}
input[type="range"] {
	background-color: var(--tertiary-color-dark);
	color: var(--text-color);
	border: none;
	padding: 0.5ex 1ex;
	font-size: 1em;
}
input:disabled {
	color: var(--tertiary-color-darker);
	cursor: not-allowed;
}
select {
	background-color: var(--tertiary-color-dark);
	color: var(--text-color);
	border: none;
	padding: 0.5ex 1ex;
	font-size: 1em;
}

label span.unit {
	font-size: 0.8em;
	margin-left: 1ex;
}


.error,
.alert {
	color: var(--error-color);
}


div.header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	h1 {
		margin: 0.7ex 0;
	}
}
div.participantinfo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1ex;
	user-select: none;

	& span.material-symbols-outlined:before {
		display: block;
		content: "progress_activity";
		animation: loading_animation 1.6s linear infinite;
	}
	&.disabled span.material-symbols-outlined:before {
		content: "cloud_off";
		animation: none;
	}
	&.committed span.material-symbols-outlined:before {
		content: "cloud_done";
		animation: none;
	}
}

div#root {
	display: grid;
	/* grid-template-columns: auto 1fr auto;
	grid-template-rows: minmax(auto, 30vh) minmax(auto, 30vh) auto auto; */
	/* grid-template:
		"playbackv playbackv playbackv playbackv" min-content
		"fileupload filepicker mprompt mprompt" minmax(50ex, 1fr)
		"serverwslog serverwslog serverwslog connquests" minmax(auto, 16vh) /
      minmax(31ex, 0.1fr) minmax(105ex, 1fr) minmax(60ex, 1fr) 0.6fr; */
	grid-template:
		"playbackv playbackv playbackv" min-content
		"filepicker mprompt mprompt" minmax(50ex, 1fr)
		"serverwslog serverwslog connquests" minmax(auto, 14vh) /
      minmax(105ex, 1fr) minmax(60ex, 1fr) 0.6fr;
	gap: 2ex;
}

#serverwslog {
	grid-area: serverwslog;
	/* grid-column: span 2; */
}

.logcontainer {
	display: grid;
	background-color: var(--primary-color);
	padding: 1.5ex;
	grid-template-rows: auto 1fr;
	gap: 1.2ex;
}
.logcontainer > h2 {
	margin: 0;
}
.logcontainer .msglog {
	overflow-y: scroll;
}

#qdevices {
	grid-area: connquests;

	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto 1fr;

	gap: 1ex;
}
#qdevices div.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2ex;
}
#qdevices button.refresh {
	font-size: 1.5em;
	padding: 0.5ex 1ex;
}
#qdevices :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
}
#qdevices > .devicelist {
	display: flex;
	flex-direction: column;
	gap: 1ex;
	overflow-y: scroll;
}
#qdevices > .devicelist > .device {
	background-color: var(--primary-color);
	padding: 1ex;
	display: flex;
	flex-direction: column;
	gap: 0.5ex;
	border-left: 4px solid var(--secondary-color);
}
#qdevices > .devicelist > .device.notacked {
	border-left: 4px solid var(--secondary-color);
	transition: border-color 1s linear;
	animation: notackedDeviceFlash 1.6s linear infinite;
}
@keyframes notackedDeviceFlash {
	from, to {
		border-color: var(--secondary-color);
	}
	40%, 60% {
		border-color: var(--primary-color);
	}
}

#qdevices > .devicelist > .device > h2 {
	margin-top: 0;
}
#qdevices > .devicelist > .device > h2 > small {
	font-size: 0.5em;
}
#qdevices > .devicelist > .device > h3 > small {
	font-size: 0.6em;
}

#dragndroptacton {
	grid-area: fileupload;
	/* grid-column: span 2; */

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2ex;
	flex-direction: column;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto;
	border: 2px dashed var(--tertiary-color-light);
	padding: 2ex;
	text-align: center;
}
#dragndroptacton strong {
	font-size: 2em;
}
#dragndroptacton.dragover {
	background-color: var(--tertiary-color-dark);
}
#dragndroptacton > small {
	font-size: 0.75em;
	font-weight: bold;
}

#hapfilepicker {
	grid-area: filepicker;
	/* grid-column: span 1; */
	display: grid;
	grid-template:
		"single" 100% / 100%;
}
#hapfilepicker > div.folderselect {
	grid-area: single;

	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to bottom right, #2b383f, #2b2d2f);
	/* background-color: var(--tertiary-color-darker); */
	/* border: 2px solid var(--tertiary-color-light); */
	/* background: repeating-linear-gradient(
		45deg,
		var(--tertiary-color-darker),
		var(--tertiary-color-darker) 20px,
		var(--tertiary-color-light) 20px,
		var(--tertiary-color-light) 30px
	); */
}
#hapfilepicker > div.openeddirectory {
	grid-area: single;
	background: linear-gradient(to bottom right, #2b383f, #2b2d2f);
	display: grid;
	grid-template:
		"header" auto
		"filelist" minmax(0, 1fr) / minmax(auto,100%);
}
#hapfilepicker > div.openeddirectory > div.dirheader {
	grid-area: header;
	display: grid;
	justify-content: space-between;
	align-items: center;
	padding: 1ex;
	padding-right: 0;
	gap: 4ex;
	grid-template-columns: minmax(0px, 1fr) auto;

	h2 {
		word-break: break-all;
		margin: 0;
	}
}
#hapfilepicker > div.openeddirectory div.filelist {
	grid-area: filelist;
	display: flex;
	flex-direction: column;
	gap: 1ex;
	overflow-y: auto;


	div.file {
		background-color: var(--primary-color);
		padding: 1ex;
		display: grid;
		grid-template-columns: auto minmax(0px, 1fr) 20ex auto;
		gap: 1.5ex;
		/* justify-content: space-between; */
		cursor: pointer;


		div.syncstatus {
			display: flex;
			align-items: center;
			position: relative;
		}
		div.syncstatus {
			&:hover:after {
				content: "sync is disabled. (set participant id)";
				width: max-content;
				position: absolute;
				top: 5ex;
				background-color: var(--tertiary-color-darker);
				z-index: 99;
			}
			span:before {
				content: "cloud_off";
			}
		}
		&.sync-failed div.syncstatus {
			&:hover:after {
				content: "sync failed. (check console)";
			}
			span:before {
				content: "sync_problem";
			}
		}
		&.syncing div.syncstatus {
			&:hover:after {
				content: "syncing...";
			}
			span:before {
				content: "sync";
				animation: loading_animation 1.6s linear infinite;
			}
		}
		&.synced div.syncstatus {
			&:hover:after {
				content: "successfully synced.";
			}
			span:before {
				content: "cloud_done";
			}
		}

		span.filename {
			display: flex;
			align-items: center;
			padding: 0.2ex 1ex;
			word-break: break-all;
		}
		div.waveformcontainer {
			overflow: hidden;
			/* height: 0px; */
			/* min-height: 100%; */
			contain: size layout paint style; /* instead of height: 0; min-height: 100% */
		}

		div.buttons {
			display: flex;
			gap: 1ex;
		}

		button {
			padding: 0.5ex 1ex;
		}
		button .material-symbols-outlined {
			transition: 0.12s;
		}

		&.starred button.star .material-symbols-outlined{
			font-variation-settings:
				'FILL' 1,
				'wght' 400,
				'GRAD' 0,
				'opsz' 24;

			color: gold;
		}
		&.upvoted button.upvote .material-symbols-outlined{
			font-variation-settings:
				'FILL' 1,
				'wght' 400,
				'GRAD' 0,
				'opsz' 24;
			color: #8ff8ff;
		}
		&.downvoted button.downvote .material-symbols-outlined{
			font-variation-settings:
				'FILL' 1,
				'wght' 400,
				'GRAD' 0,
				'opsz' 24;

			color: #f08080;
		}
	}

}
@keyframes generateButtonProgress {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.75;
	}
}
div.genmodelpromptcont {
	grid-area: mprompt;

	background-color: var(--primary-color);
	user-select: none;
	overflow-y: auto;

	div.apiprompt {
		display: grid;
		grid-template-rows: auto auto auto minmax(0,1fr);
		gap: 2ex;
		padding: 2ex;
		font-size: 1.2em;
		padding-top: 2ex;
		button.generate {
			font-size: 1.5em;
			position: relative;
		}
		button.generate::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 10%;
			background-color: var(--secondary-color);
			transform-origin: left;
			transform: scaleX(0%);
			opacity: 0;
		}
		button.generate.generating::after {
			opacity: 1;
			animation: generateButtonProgress 1.6s ease-in-out infinite alternate;
		}
		div.resultspane {
			display: grid;
			grid-template-columns: min-content minmax(0,1fr) min-content;
			grid-template-rows: 100%;
			gap: 1ex;
			/* padding: 1ex; */
			/* border: 2px solid var(--tertiary-color-light); */

			div.reslistcontainer {
				display: grid;
				grid-template-rows: auto 1fr;

				h3 {
					margin: 0;
					text-align: center;
					position: relative;
				}
				h3::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 10%;
					background-color: var(--secondary-color);
					transform-origin: left;
					transform: scaleX(0%);
					opacity: 0;
				}
				h3.generating::after {
					opacity: 1;
					animation: generateButtonProgress 1.6s ease-in-out infinite alternate;
				}
			}

			div.resultslist {
				display: flex;
				flex-direction: column;
				gap: 1ex;
				overflow-y: scroll;
				width: 36ex;
				padding: 1ex;
				background-color: var(--tertiary-color-darker);

				div.result {
					/* background-color: var(--tertiary-color-dark); */
					cursor: pointer;
					height: 10ex;
					/* width: 35ex; */
					border: 2px solid var(--tertiary-color-dark);

					position: relative;
				}

				div.result.selected {
					border-color: var(--secondary-color);
				}

				div.result::before {
					position: absolute;
					top: 0px;
					left: 0px;
					content: attr(data-index);
					margin: 0.5ex;
					color: var(--tertiary-color-light);
					/* background-color: #00000083; */
					/* text-shadow: 1px 1px 2px #000; */
					background: radial-gradient(#000000, #00000000);
				}
			}
			div.selectedresult {
				display: grid;
				grid-template-rows: minmax(0px, 1fr) auto;
				gap: 1ex;

				div.waveformcontainer {
					overflow: hidden;
				}

				div.controls {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 1ex;

					button.download {
						padding: 1ex 10ex;
						display: flex;
						align-items: center;

						.material-symbols-outlined {
							font-size: 2em;
						}
					}
				}
			}
		}
	}

	h2 {
		margin: 0;
		text-align: center;
		margin-bottom: -2ex;
	}

	& div.promptcont {
		display: grid;
		grid-template-rows: auto 1fr;
		gap: 1ex;

		input[type="text"] {
			padding: 1.2ex;
		}
	}
}

div.genmodelpromptcont div.btmrow {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2.5ex;

	&> div {
		display: grid;
		grid-template-rows: auto 1fr;
		gap: 1ex;
	}

	& div.durationrow {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

div#playbackv {
	grid-area: playbackv;
	display: grid;
	grid-template:
		"waveformcontainer" minmax(0px, 1fr)
		"playbackstatus" auto / 100%;
	gap: 0ex;
}
div#playbackv.workshopmode {
	div#waveformcontainer {
		display: none;
	}
	div.playbackstatus span.filename {
		font-size: 1.5em;
		padding: 1ex;
	}
}

#waveformcontainer {
	grid-area: waveformcontainer;
	/* grid-column: span 3; */
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
}

#waveformcontainer > canvas {
	grid-area: 1 / 1 / 2 / 2;
}

div#playbackv > div.playbackstatus {
	grid-area: playbackstatus;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-template-areas: "main";
}
div.playbackstatus > span.filename {
	grid-area: main;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.3ex;
	font-size: 1.3em;
}
div.playbackstatus > progress.playback {
	grid-area: main;
	width: 100%;
	height: 100%;
	appearance: none;
}
div.playbackstatus > progress.playback::-webkit-progress-bar {
	background-color: var(--primary-color);
}
div.playbackstatus > progress.playback::-webkit-progress-value {
	background-color: var(--secondary-color);
}
div.playbackstatus > progress.playback:not([value]) {
	border: 3ex solid var(--tertiary-color-light);
	animation: notackedDeviceFlash 1.6s linear infinite;
}