/**
 * Splash Screen Styles
 *
 * Left panel: branding, API Key input, notice on white background.
 * Right panel: full-bleed platform iframe.
 */

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */

.splash-screen-container {
	position: fixed;
	top: 32px;
	left: 160px;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	z-index: 1;
	overflow: hidden;
	background: var(--color-bg-secondary);
}

/* WordPress admin menu adjustments */
body.folded .splash-screen-container {
	left: 36px;
}

@media screen and (max-width: 782px) {
	.splash-screen-container {
		top: 46px;
		left: 0;
	}

	body.folded .splash-screen-container {
		left: 0;
	}
}

body.is-fullscreen-mode .splash-screen-container {
	top: 0;
	left: 0;
}

.splash-screen {
	display: flex;
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* ========================================
   LEFT PANEL - White background
   ======================================== */

.splash-screen__left {
	width: 41.67%;
	padding: var(--space-12) var(--space-10);
	position: relative;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--color-white);
	border-right: 1px solid var(--color-border);
}

/* Logo */
.splash-screen__logo {
	margin-bottom: var(--space-8);
	animation: slide-up var(--duration-slow) var(--ease-out-expo);
	animation-delay: var(--delay-1);
	animation-fill-mode: both;
}

.splash-screen__logo svg {
	height: 36px;
	width: auto;
}

/* Header: headline + subtext */
.splash-screen__header {
	margin-bottom: var(--space-8);
	animation: slide-up var(--duration-slow) var(--ease-out-expo);
	animation-delay: var(--delay-2);
	animation-fill-mode: both;
}

.splash-screen__headline {
	font-family: var(--font-heading) !important;
	font-size: var(--text-2xl) !important;
	font-weight: var(--weight-bold) !important;
	color: var(--color-text-primary) !important;
	line-height: var(--leading-tight) !important;
	margin: 0 0 var(--space-3) !important;
	letter-spacing: var(--tracking-tight) !important;
}

.splash-screen__subtext {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	font-weight: var(--weight-normal) !important;
	color: var(--color-text-secondary) !important;
	line-height: var(--leading-relaxed) !important;
	margin: 0 !important;
}

/* Collapsible API key toggle */
.splash-screen__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: none;
	padding: 0;
	margin-bottom: var(--space-5);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-text-secondary);
	transition: color var(--duration-fast) var(--ease-out-quad);
	animation: slide-up var(--duration-slow) var(--ease-out-expo);
	animation-delay: var(--delay-2);
	animation-fill-mode: both;
}

.splash-screen__toggle:hover {
	color: var(--color-text-primary);
}

.splash-screen__toggle svg {
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--ease-out-quad);
}

.splash-screen__toggle--open svg {
	transform: rotate(180deg);
}

/* ========================================
   API KEY INPUT
   ======================================== */

.splash-screen__field-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	animation: slide-up var(--duration-slow) var(--ease-out-expo);
	animation-delay: var(--delay-2);
	animation-fill-mode: both;
}

.splash-screen__label {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text-primary);
	font-family: var(--font-heading);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* Input + circle button side by side */
.splash-screen__input-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.splash-screen__input-wrapper {
	position: relative;
	flex: 1;
}

.splash-screen__input {
	width: 100%;
	height: 48px;
	padding: 0 var(--space-5);

	font-family: var(--font-mono);
	font-size: var(--text-base);
	font-weight: var(--weight-normal);

	background: var(--color-white);
	color: var(--color-text-primary);
	border: 1.5px solid var(--color-border-medium);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
	transition: all var(--duration-base) var(--ease-out-expo);
}

.splash-screen__input::placeholder {
	color: var(--color-text-tertiary);
	font-family: var(--font-body);
}

.splash-screen__input:hover:not(:disabled) {
	border-color: var(--color-primary-light);
	background: var(--color-white);
}

.splash-screen__input:focus {
	outline: none !important;
	border-color: #5F5BF3 !important;
	background: var(--color-white);
	box-shadow: 0 0 0 3px rgba(95, 91, 243, 0.15) !important;
}

.splash-screen__input--error {
	border-color: var(--color-error) !important;
	background: var(--color-error-bg);
}

.splash-screen__input--error:focus {
	outline: none !important;
	border-color: var(--color-error) !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Clear button */
.splash-screen__clear {
	position: absolute;
	right: var(--space-3);
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	font-size: 20px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	padding: var(--space-1);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-base);
	transition: all var(--duration-fast) var(--ease-out-quad);
}

.splash-screen__clear:hover {
	background: var(--color-gray-100);
	color: var(--color-text-primary);
}

/* Circle arrow submit button */
.splash-screen__submit {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: var(--gradient-brand);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--duration-base) var(--ease-out-expo);
	box-shadow: var(--shadow-sm);
}

.splash-screen__submit svg {
	width: 22px;
	height: 22px;
}

.splash-screen__submit:hover:not(:disabled) {
	background: var(--gradient-brand);
	filter: brightness(0.9);
	box-shadow: var(--shadow-md);
	transform: scale(1.05);
}

.splash-screen__submit:active:not(:disabled) {
	transform: scale(0.95);
}

.splash-screen__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Error message */
.splash-screen__error {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-error);
	margin: 0;
	font-family: var(--font-body);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	animation: slide-down var(--duration-fast) var(--ease-out-quad);
}

.splash-screen__error::before {
	content: '⚠';
	font-size: var(--text-base);
}

/* ========================================
   NOTICE BOX
   ======================================== */

.splash-screen__notice {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--color-gray-50);
	border-radius: var(--radius-md);
	border: none;
	margin-top: auto;
	animation: slide-up var(--duration-slow) var(--ease-out-expo);
	animation-delay: var(--delay-3);
	animation-fill-mode: both;
}

.splash-screen__notice-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.splash-screen__notice-content {
	flex: 1;
}

.splash-screen__notice-title {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	margin: 0 0 var(--space-2);
	color: var(--color-text-primary);
}

.splash-screen__notice-text {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-normal);
	margin: 0;
	color: var(--color-text-secondary);
	line-height: var(--leading-relaxed);
}

/* ========================================
   DEV-MODE SHORTCUTS (footer)
   ======================================== */

/* ========================================
   RIGHT PANEL — Full-bleed platform iframe
   ======================================== */

.splash-screen__right {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.splash-screen__iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.splash-screen__validating {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 12px;
}

.splash-screen__validating-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* ========================================
   LOADING SPINNER
   ======================================== */

.splash-screen__spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: var(--color-white);
	animation: splash-spin 0.6s linear infinite;
}

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

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
	.splash-screen__left {
		padding: var(--space-8);
	}
}

@media (max-width: 900px) {
	.splash-screen-container {
		overflow-y: auto;
	}

	.splash-screen {
		flex-direction: column;
		min-height: calc(100vh - 46px);
		height: auto;
	}

	.splash-screen__left {
		width: 100%;
		padding: var(--space-8);
		border-right: none;
		border-bottom: 1px solid var(--color-border);
	}

	.splash-screen__right {
		min-height: 50vh;
	}
}

@media (max-width: 640px) {
	.splash-screen__logo {
		margin-bottom: var(--space-6);
	}

	.splash-screen__input {
		height: 44px;
	}
}

@media (min-width: 901px) {
	.splash-screen {
		min-height: calc(100vh - 32px);
	}
}