body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}

.webgl {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for the 3D viewer application */
@layer components {
	.main-container {
		@apply flex w-full h-screen;
	}

	.canvas-container {
		@apply w-[70%] h-full relative;
	}

	.side-panel {
		@apply w-[30%] h-full bg-white shadow-md overflow-y-auto;
	}

	.panel-content {
		@apply p-8;
	}

	.panel-header {
		@apply flex justify-between items-center mb-5 pb-3 border-b border-gray-200;
	}

	.panel-title {
		@apply text-2xl font-bold m-0 text-gray-800;
	}

	.accordion {
		@apply w-full;
	}

	.accordion-item {
		@apply mb-4 border border-gray-200 rounded-lg overflow-hidden shadow-sm transition-all duration-300;
	}

	.accordion-item.active {
		@apply border-blue-500;
	}

	.accordion-header {
		@apply bg-gray-50 p-4 cursor-pointer flex justify-between items-center;
	}

	.accordion-title {
		@apply font-bold m-0 text-gray-700 flex items-center;
	}

	.camera-indicator {
		@apply inline-block w-3 h-3 rounded-full bg-blue-500 mr-2.5 opacity-50;
	}

	.accordion-item.active .camera-indicator {
		@apply opacity-100;
	}

	.accordion-icon {
		@apply transition-transform duration-300 text-blue-500;
	}

	.accordion-item.active .accordion-icon {
		@apply transform rotate-180;
	}

	.accordion-content {
		@apply bg-white leading-relaxed transition-all duration-300 overflow-hidden max-h-0 p-0;
	}

	.accordion-item.active .accordion-content {
		@apply max-h-[500px] p-4;
	}

	.view-instructions {
		@apply text-center mt-5 p-3 bg-gray-50 rounded text-sm text-gray-600;
	}

	.loading-indicator {
		@apply fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center bg-white bg-opacity-90 z-50;
	}

	.loading-spinner {
		@apply w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4;
	}

	.loading-text {
		@apply text-lg text-gray-700 font-medium;
	}
	ul {
		@apply list-disc;
	}
	ul li {
		@apply mb-2;
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}