#alert {
	display: relative;
	z-index: 10;
}

alert- {
	--alert-background-color: color-mix(
		in srgb,
		var(--pico-del-color) 90%,
		white
	);

	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--alert-background-color);
	border: 1px solid var(--pico-del-color);
	color: var(--pico-card-background-color);
	padding: var(--pico-spacing) calc(1.25 * var(--pico-spacing));
	border-radius: var(--pico-border-radius);
	box-shadow: var(--pico-box-shadow);
	max-width: 20rem;
	width: 24rem;

	form {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: calc(2 * var(--pico-spacing));
	}

	content- {
		display: flex;
		flex-direction: column;
		gap: calc(0.5 * var(--pico-spacing));
	}

	p {
		color: inherit;
		margin-bottom: 0;
	}

	button[type="submit"] {
		background-color: transparent;
		border: none;
		width: auto;
		padding: 0;
		margin: 0;

		&:hover {
			background-color: color-mix(
				in srgb,
				var(--alert-background-color) 90%,
				white
			);
		}

		svg {
			color: var(--pico-primary-inverse);
		}
	}
}

@media (min-width: 768px) {
	alert- {
		top: 0.5rem;
		max-width: 28rem;
	}
}

@media (min-width: 1024px) {
	alert- {
		top: 1rem;
		max-width: 32rem;
	}
}
body:has(.loading-player) {
	overflow: hidden;
}
centered-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
}
body:has(chat-) {
	height: 100vh;
	overflow: hidden;
}

chat- {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: var(--content-height);
	overflow: hidden;

	messages- {
		--messages-spacing: calc(2 * var(--pico-spacing));

		-ms-overflow-style: none;
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 100vh;
		margin-top: var(--messages-spacing);
		overflow-y: auto;
		padding: var(--messages-spacing);
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		tool-call {
			align-self: flex-start;
			display: flex;
			justify-content: start;
			margin-bottom: calc(0.5 * var(--pico-spacing));

			p {
				text-transform: uppercase;
				font-weight: bold;
				margin-bottom: 0;
			}
		}

		message- {
			border: 1px solid var(--pico-muted-border-color);
			border-radius: calc(2 * var(--pico-border-radius));
			display: flex;
			margin-bottom: var(--messages-spacing);
			padding: var(--pico-spacing);
			max-width: 100%;

			&.user {
				align-self: flex-end;
				text-align: right;
				background-color: color-mix(
					in srgb,
					var(--pico-background-color) 95%,
					white
				);
			}

			&.assistant {
				align-self: flex-start;
				display: flex;
				background-color: color-mix(
					in srgb,
					var(--pico-background-color) 86%,
					white
				);
			}

			p {
				margin-bottom: 0;
				line-height: var(--pico-line-height);
			}
		}
	}
}

chat-input {
	--chat-input-padding: calc(0.7 * var(--pico-spacing));

	display: block;
	border-top: 1px solid var(--pico-muted-border-color);
	padding: var(--chat-input-padding) 0 var(--chat-input-padding) 0;

	form {
		align-items: center;
		display: flex;
		flex-grow: 1;
		padding-left: var(--pico-spacing);
		padding-right: var(--pico-spacing);
		width: 100%;

		fieldset {
			margin: 0;
		}

		input {
			height: auto !important;
		}
	}
}

@media (min-width: 1024px) {
	chat- messages- message- {
		max-width: 80%;
	}
}
.container {
	display: flex;
	flex-direction: column;
}
.flex {
	display: flex;

	@.flex-col {
		flex-direction: column;
	}

	@.justify-between {
		justify-content: space-between;
	}

	@.justify-end {
		justify-content: end;
	}

	@.gap {
		gap: var(--pico-spacing);
	}
}
.hero {
	--hero-margin: calc(3 * var(--pico-spacing));
	--button-margin: calc(1.5 * var(--pico-spacing));

	margin-top: var(--hero-margin);
	margin-bottom: var(--hero-margin);

	hgroup {
		text-align: center;

		h1 {
			font-size: 4rem;
		}

		p {
			font-size: 2rem;
		}
	}

	a {
		margin-top: var(--button-margin);
	}
}
[aria-busy="true"]:has(.icon) {
	.icon {
		display: none;
	}
}

@scope (.icon) {
	:scope {
		--icon-color: var(--pico-form-element-color);

		--icon-padding: calc(0.25 * var(--pico-spacing));
		--icon-padding-lg: calc(1.25 * var(--icon-padding));

		--icon-size: calc(2.5 * var(--pico-spacing));
		--icon-size-sm: calc(0.8 * var(--icon-size));
		--icon-size-lg: calc(1.25 * var(--icon-size));

		align-items: center;
		border-radius: 9999px;
		color: var(--icon-color);
		display: flex;
		height: var(--icon-size);
		justify-content: center;
		padding: var(--icon-padding);
		transition: all 0.3s ease;
		width: var(--icon-size);
	}

	&:not(.vinyl):hover {
		box-shadow: var(--pico-group-box-shadow-focus-with-button);
	}

	button > &:hover {
		box-shadow: none;
	}

	&.vinyl {
		--vinyl-size: var(--icon-size);

		height: var(--vinyl-size);
		width: var(--vinyl-size);

		.vinyl-rotate {
			animation: vinyl-spin 2s linear infinite;
			transform-origin: center;
			transform-box: fill-box;
		}
		.vinyl-reflection {
			pointer-events: none;
		}
	}
}

@keyframes vinyl-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
header,
main,
footer {
	padding-block: var(--pico-block-spacing-vertical);
}

section {
	margin-bottom: calc(3*var(--pico-block-spacing-vertical)) !important;

	hgroup h1 {
		margin-bottom: calc(1.5*var(--pico-block-spacing-vertical));
	}
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
	.loading-inline {
		display: none;
	}
	.htmx-request.loading-inline {
		display: inline;
	}
	.htmx-request .loading-inline {
		display: inline;
	}
	.htmx-request :has(~ .loading-inline) {
		display: none;
	}
}
new-station {
	/*<div class="flex flex-col gap-8 p-4 mt-4 items-center min-h-screen w-full overflow-x-hidden"> */
}
:has(.loading-player) playbar- {
	display: none;
}

playbar- {
	--border-radius: calc(1.5 * var(--pico-border-radius));
	--font-size: calc(0.8 * var(--pico-font-size));
	--padding: calc(0.25 * var(--pico-spacing));

	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--pico-background-color);
	border-top: 1px solid var(--pico-muted-border-color);

	#playbar {
		appearance: none;
		background: transparent;
		cursor: pointer;
		border-radius: var(--border-radius);
		width: 100%;
		accent-color: var(--pico-primary);
		margin-bottom: 0;
		margin-left: var(--pico-spacing);
		margin-right: var(--pico-spacing);

		&:focus {
			outline: none;
			box-shadow: 0 0 0 3px var(--pico-primary-focus);
		}
	}

	loading- {
		display: flex;
		justify-content: space-between;
	}

	playback- {
		display: flex;
		width: 100%;
		align-items: center;
		font-size: var(--font-size);
	}

	buttons- {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--pico-spacing);

		icon-back .icon,
		icon-skip .icon {
			padding: var(--icon-padding);
		}

		icon-play,
		icon-pause {
			width: var(--icon-size-lg);
			height: var(--icon-size-lg);
		}

		icon-play .icon,
		icon-pause .icon {
			width: var(--icon-size-lg);
			height: var(--icon-size-lg);
			padding: var(--icon-padding-lg);
		}

		icon-back .icon {
			transform: scaleX(-1);
		}
	}
}

@media (min-width: 1024px) {
	playbar- {
		--padding: calc(var(--pico-spacing));

		padding-left: var(--padding);
		padding-right: var(--padding);

		playback- {
			--max-width: 768px;

			width: var(--max-width);
		}
	}
}
:root {
	--header-height: 105px;
	--footer-height: 140px;
	--content-height: calc(
		100vh - var(--header-height) - var(--footer-height)
	);
}

player- {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
	height: var(--content-height);

	now-playing {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-grow: 1;

		track- {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: calc(2 * var(--pico-spacing));
			width: 100%;
			padding-bottom: 160px /* playbar- height */;

			album-cover {
				border-radius: calc(
					2 * var(--pico-border-radius)
				);
				width: 100%;
				padding-left: calc(0.5 * var(--pico-spacing));
				padding-right: calc(
					0.5 * var(--pico-spacing-sm)
				);
				max-width: 18rem;

				img {
					border-radius: calc(
						2 * var(--pico-border-radius)
					);
					filter: drop-shadow(
						0 var(--pico-spacing)
							calc(
								0.5 *
									var(
										--pico-spacing
									)
							)
							var(--pico-shadow-color)
					);
				}
			}

			details- {
				display: flex;
				flex-direction: column;
				gap: var(--pico-spacing);

				h2 {
					text-align: center;
					font-weight: 700;
					letter-spacing: -0.025em;
					margin-bottom: 0;
				}

				h3 {
					text-align: center;
					font-weight: 500;
					color: var(--pico-muted-color);
					margin-bottom: 0;
				}
			}
		}
	}
}

@media (min-width: 1024px) {
	player- now-playing track- album-cover {
		width: 80%;
	}
	player- now-playing track- details- {
		gap: calc(0.5 * var(--pico-spacing));
	}
}
.settings {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--footer-height);
}
sidebar- {
	background-color: var(--pico-background-color);
	border-right: 1px solid var(--pico-muted-border-color);
	box-shadow:
		0 4px 6px -1px rgb(0 0 0 / 0.1),
		0 2px 4px -2px rgb(0 0 0 / 0.1);
	height: 100%;
	inset: 0 auto 0 0;
	position: fixed;
	transform: translateX(-100%);
	transition: transform 300ms;
	width: 100%;
	z-index: 20;

	&.open {
		transform: translateX(0);
	}

	stations- {
		display: flex;
		flex-direction: column;
		gap: var(--pico-spacing);

		station- {
			display: flex;
			gap: calc(0.5 * var(--pico-spacing));

			.station-form {
				width: 100%;

				input[type="submit"] {
					height: auto;
					padding: calc(
						0.25 * var(--pico-spacing)
					);
					width: 100%;
				}
			}

			.icon {
				height: var(--icon-size-sm);
				width: var(--icon-size-sm);
			}
		}
	}
}

@media (min-width: 1024px) {
	sidebar- {
		padding-left: var(--pico-spacing);
		padding-right: var(--pico-spacing);
		width: calc(24 * var(--pico-spacing));
	}
}
.stations-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	a {
		color: var(--pico-primary);
	}
}

stations- {
	--stations-row-gap: calc(2 * var(--pico-grid-row-gap));

	display: grid;
	gap: var(--stations-row-gap) 0;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	align-items: start;

	station- {
		--station-size: calc(12 * var(--pico-spacing));

		width: 100%;
		max-width: var(--station-size);
	}
}

@media (min-width: 1024px) {
	stations- {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
}

station- {
	img {
		border-radius: calc(2 * var(--pico-border-radius));
	}
}

station-:not([current]) {
	--station-size: calc(12 * var(--pico-spacing));

	width: var(--station-size);

	a {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		gap: var(--pico-spacing);
		width: 100%;

		img {
			height: var(--station-size);
			object-fit: contain;
			width: 100%;
		}

		p {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

station-[current] {
	display: flex;
	gap: calc(2 * var(--pico-spacing));
	align-items: center;

	img {
		--station-size: calc(24 * var(--pico-spacing));

		height: var(--station-size);
		width: var(--station-size);
	}

	span {
		font-size: 1.5rem;
	}
}
/*
.topbar {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding-bottom: var(--pico-spacing);
	padding-left: 0;
	padding-right: 0;
	padding-top: calc(0.5 * var(--pico-spacing));

	#hamburger {
		padding-top: calc(0.15 * var(--pico-spacing));
	}
}
*/
vinyl-loading {
	position: fixed;
	bottom: 110px;
	right: var(--pico-spacing);

	display: flex;
	gap: calc(0.5 * var(--pico-spacing));
	align-items: center;
	border: 1px solid var(--pico-muted-border-color);
	background-color: var(--pico-background-color);
	padding: var(--pico-spacing);
	z-index: 9;

	p {
		margin-bottom: 0;
	}
}

@media (min-width: 1024px) {
	vinyl-loading {
		bottom: calc(var(--footer-height) + var(--pico-spacing));
	}
}