<script lang="ts">
	import "./layout.css";
	import favicon from "$lib/assets/favicon.svg";
	import GlobalPlayer from "$lib/components/GlobalPlayer.svelte";
	import ClientOnly from "$lib/components/util/ClientOnly.svelte";

	let { children } = $props();
</script>

<svelte:head
	><link rel="icon" href={favicon} /><title>AMQ Train</title></svelte:head
>

<!--
	App shell:
	- Mobile/tablet: single column, player renders client-only (mobile bar/drawer)
	- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
-->
<div class="min-h-dvh lg:grid gap-16 lg:grid-cols-[1fr_420px]">
	<main>
		{@render children()}
	</main>

	<!-- Desktop sidebar column (in normal flow) -->
	<aside class="hidden lg:block">
		<ClientOnly showFallback={false}>
			{#snippet children()}
				<GlobalPlayer />
			{/snippet}
		</ClientOnly>
	</aside>
</div>

<!-- Mobile player is rendered by the same GlobalPlayer instance above.
     On small screens, it uses fixed positioning internally so it can overlay. -->
