@import "tailwindcss";
@source "../../src/Views/Panel/";

/* Shadow DOM fallback properties - these will be merged into @layer base */
@layer base {
	*, ::before, ::after, ::backdrop {
		--tw-shadow: 0 0 #0000;
		--tw-shadow-color: initial;
		--tw-shadow-alpha: 100%;
		--tw-inset-shadow: 0 0 #0000;
		--tw-inset-shadow-color: initial;
		--tw-inset-shadow-alpha: 100%;
		--tw-ring-color: initial;
		--tw-ring-shadow: 0 0 #0000;
		--tw-inset-ring-color: initial;
		--tw-inset-ring-shadow: 0 0 #0000;
		--tw-ring-inset: initial;
		--tw-ring-offset-width: 0px;
		--tw-ring-offset-color: #fff;
		--tw-ring-offset-shadow: 0 0 #0000;
		--tw-outline-style: solid;
		--tw-outline-offset: 0px;
		--tw-border-style: solid;
		--tw-gradient-position: ;
		--tw-gradient-from: #0000;
		--tw-gradient-via: #0000;
		--tw-gradient-to: #0000;
		--tw-gradient-stops: ;
		--tw-gradient-via-stops: ;
		--tw-gradient-from-position: 0%;
		--tw-gradient-via-position: 50%;
		--tw-gradient-to-position: 100%;
	}
}

@theme {
	/* Panel dimensions */
	--rwp-panel-width: 380px;
	--rwp-panel-max-height: 640px;
	--rwp-panel-max-height-friend: 400px;

	/* Panel shadow */
	--rwp-panel-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	/* Launcher shadow */
	--rwp-launcher-shadow: none;

	/* Card shadows */
	--rwp-card-shadow: 0 3px 10px -2px rgb(0 0 0 / 0.1), 0 1px 4px -1px rgb(0 0 0 / 0.07);
	--rwp-card-ring: 0 0 0 1px rgb(0 0 0 / 0.07);

	/* Z-index layers */
	--rwp-z-launcher: 9999;
	--rwp-z-panel: 9999;
	--rwp-z-close-button: 10000;

	/* Brand colors */
	--color-rwp-brand: #2563eb;
	--color-rwp-brand-hover: #1d4ed8;

	/* Foreground/text/icon on top of brand */
	--color-rwp-brand-foreground: #fff;

	/* Widget colors */
	--color-rwp-widget-bg: #fff;
	--color-rwp-widget-text: #374151;
	--color-rwp-widget-heading: #111827;
	--color-rwp-widget-header-text: var(--color-rwp-brand-foreground);
	--color-rwp-widget-button-text: var(--color-rwp-brand-foreground);
	--color-rwp-widget-icon-text: var(--color-gray-700);

	/* Scrollbar colors. These need to stay in @theme so the shadow DOM can access them. */
	--scrollbar-track: transparent;
	--scrollbar-thumb: rgba(0, 0, 0, 0.2);
	--scrollbar-thumb-hover: rgba(0, 0, 0, 0.4);
}

/* Card shadow utilities */
@utility shadow-card {
	box-shadow: var(--rwp-card-shadow), var(--rwp-card-ring);
}

/* Firefox: standard scrollbar properties (only keywords, no pixel control) */
@supports not selector(::-webkit-scrollbar) {
	.custom-scrollbar {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	}
}

/* Webkit browsers (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
	width: var(--rwp-scrollbar-width, 8px);
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	border-radius: 4px;
	transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover);
}

/* Mobile panel base styles */
.rwp-mobile-panel {
	display: flex;
}

.rwp-mobile-panel[hidden] {
	display: none;
}

/* Desktop panel base styles */
.rwp-desktop-panel {
	display: block;
	position: var(--rwp-panel-position);
	top: var(--rwp-panel-top);
	bottom: var(--rwp-panel-bottom);
	left: var(--rwp-panel-left);
	right: var(--rwp-panel-right);
	width: min(var(--rwp-panel-width), 100vw - 48px);
	height: clamp(400px, calc(100dvh - 150px), var(--rwp-panel-max-height));
	box-shadow: var(--rwp-panel-shadow);
}

.rwp-desktop-panel[hidden] {
	display: none;
}

/* Friend claim panel uses smaller height and adds a visible border ring */
.rwp-desktop-panel[data-panel-state="friend-claim"] {
	height: clamp(300px, calc(100dvh - 150px), var(--rwp-panel-max-height-friend));
	box-shadow: var(--rwp-panel-shadow), 0 0 0 1px rgb(0 0 0 / 0.04);
}

/* Launcher button positioning */
.rwp-launcher {
	position: var(--rwp-launcher-position);
	bottom: var(--rwp-launcher-bottom);
	left: var(--rwp-launcher-left);
	right: var(--rwp-launcher-right);
	box-shadow: var(--rwp-launcher-shadow);
}

/* Animation: Scale - base state */
.rwp-desktop-panel--scale {
	opacity: 1;
	transform: scale(1);
	transform-origin: var(--rwp-panel-transform-origin, bottom right);
}

/* Keyframes (only animate when referenced in motion-safe block) */
@keyframes panel-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes panel-slide-in-right {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes panel-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Animations only when motion is OK */
@media (prefers-reduced-motion: no-preference) {
	/* Mobile panel animation */
	.rwp-mobile-panel {
		transform: translateY(0);
		transition: transform 300ms ease-out, display 300ms ease-out allow-discrete;
	}

	.rwp-mobile-panel[hidden] {
		transform: translateY(100%);
	}

	@starting-style {
		.rwp-mobile-panel:not([hidden]) {
			transform: translateY(100%);
		}
	}

	/* Desktop panel animation */
	.rwp-desktop-panel {
		transition: opacity 300ms ease-out, transform 300ms ease-out, display 300ms ease-out allow-discrete;
	}

	/* Scale animation */
	.rwp-desktop-panel--scale[hidden] {
		opacity: 0;
		transform: scale(0.95);
	}

	@starting-style {
		.rwp-desktop-panel--scale:not([hidden]) {
			opacity: 0;
			transform: scale(0.95);
		}
	}

	/* Internal panel transitions (iOS-style slide) */
	.rwp-panel-slide-forward {
		animation: panel-slide-in-right 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
	}

	.rwp-panel-slide-back {
		animation: panel-slide-in-left 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
	}

	/* Initial panel load animation (subtle fade up) */
	.rwp-panel-fade-up {
		animation: panel-fade-up 400ms cubic-bezier(0.2, 0.9, 0.3, 1);
	}

	/* Staggered fade up for child elements */
	.rwp-stagger-fade-up {
		animation: panel-fade-up 400ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
	}

	.rwp-stagger-fade-up.rwp-stagger-1 { animation-delay: 0ms; }
	.rwp-stagger-fade-up.rwp-stagger-2 { animation-delay: 75ms; }
	.rwp-stagger-fade-up.rwp-stagger-3 { animation-delay: 150ms; }
	.rwp-stagger-fade-up.rwp-stagger-4 { animation-delay: 225ms; }

	/* Staggered slide from left for back navigation */
	.rwp-stagger-slide-left {
		animation: panel-slide-in-left 300ms cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
	}

	.rwp-stagger-slide-left.rwp-stagger-1 { animation-delay: 0ms; }
	.rwp-stagger-slide-left.rwp-stagger-2 { animation-delay: 75ms; }
	.rwp-stagger-slide-left.rwp-stagger-3 { animation-delay: 150ms; }
	.rwp-stagger-slide-left.rwp-stagger-4 { animation-delay: 225ms; }

	/* Fixed header slide down animation */
	.rwp-fixed-header {
		transition: opacity 200ms ease-out, transform 200ms ease-out, display 200ms ease-out allow-discrete;
	}

	.rwp-fixed-header[hidden] {
		opacity: 0;
		transform: translateY(-100%);
	}

	@starting-style {
		.rwp-fixed-header:not([hidden]) {
			opacity: 0;
			transform: translateY(-100%);
		}
	}
}