/*! smart-lazy-soft-office-parsers-word v.1.0.10 (1776714604813) © Rene Pally */
.mainContainer {
	height: 100vh;
	width: 100%;
	background: var(--bg, #f5f4ff);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
}

.header {
	width: 100%;
	background: linear-gradient(
		135deg,
		var(--header-grad-start, #5b47ef) 0%,
		var(--header-grad-end, #4133c4) 100%
	);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em;
	font-weight: 600;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 12px rgba(91, 71, 239, 0.22);
	border-radius: 0 0 14px 14px;
	flex-shrink: 0;
	min-height: 56px;
}

.mainAppContainer {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
}

.app {
	width: 100%;
	min-height: 100vh;
	background: transparent;
}

/* Global theme tokens (light & dark) */
:root {
	--bg: #f5f4ff;
	--surface: #ffffff;
	--surface-2: #efedff;
	--text: #12102a;
	--muted: #6e6a8a;
	--border: #e2deff;
	--primary: #5b47ef;
	--primary-hover: #4737d4;
	--primary-contrast: #ffffff;
	--danger: #e5484d;
	--danger-hover: #c93b40;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(91, 71, 239, 0.1);
	--selected: #2563eb;
	--selected-soft: rgba(37, 99, 235, 0.1);
	--selected-bg: rgba(37, 99, 235, 0.035);
	--focus-ring: var(--primary);
	--transition-colors:
		background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, fill 0.2s ease,
		stroke 0.2s ease;
}

[data-theme='dark'] {
	--bg: #0d0b1a;
	--surface: #131024;
	--surface-2: #1b1830;
	--text: #e8e6ff;
	--muted: #8e8aaa;
	--border: #2d2850;
	--primary: #7c6ff7;
	--primary-hover: #9b91fa;
	--primary-contrast: #0d0b1a;
	--selected: #60a5fa;
	--selected-soft: rgba(96, 165, 250, 0.13);
	--selected-bg: rgba(96, 165, 250, 0.05);
	--danger: #f87171;
	--danger-hover: #ef4444;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(124, 111, 247, 0.12);
}

/* Numeric input contrast adjustments */
input[type='number'],
.react-numeric-input input {
	background: var(--surface-2);
	color: var(--text);
	border: 1px solid var(--border);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
}

input[type='number']:focus,
.react-numeric-input input:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

[data-theme='dark'] input[type='number'],
[data-theme='dark'] .react-numeric-input input {
	background: #1b2538;
	color: var(--text);
	border-color: #2f425f;
}

[data-theme='dark'] input[type='number']::placeholder,
[data-theme='dark'] .react-numeric-input input::placeholder {
	color: var(--muted);
}

html,
body,
#root,
#container {
	background: var(--bg);
	color: var(--text);
	transition: var(--transition-colors);
}

/* Generic element resets using tokens */
button,
input,
select,
textarea {
	color: var(--text);
	font-family: inherit;
	transition: var(--transition-colors);
}

/* Utility classes mapping tokens (to help incremental migration) */
.bg-surface {
	background: var(--surface) !important;
}
.bg-surface-2 {
	background: var(--surface-2) !important;
}
.bg-bg {
	background: var(--bg) !important;
}
.text-primary {
	color: var(--primary) !important;
}
.text-muted {
	color: var(--muted) !important;
}
.text-base {
	color: var(--text) !important;
}
.border-token {
	border-color: var(--border) !important;
}
.shadow-token {
	box-shadow: var(--shadow) !important;
}
.btn {
	cursor: pointer;
	border-radius: 6px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
	font-size: 14px;
	border: 1px solid transparent;
	padding: 6px 14px;
	transition: var(--transition-colors);
}
.btn-primary {
	background: var(--primary);
	color: var(--primary-contrast);
	border-color: var(--primary);
}
.btn-primary:hover {
	background: var(--primary-hover);
}
.btn-ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border);
}
.btn-ghost:hover {
	background: var(--surface-2);
}
.btn-danger {
	background: var(--danger);
	border-color: var(--danger);
	color: #fff;
}
.btn-danger:hover {
	background: var(--danger-hover);
}
.focus-ring:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Form fields */
.field {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 6px;
	padding: 6px 10px;
}
.field:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
::placeholder {
	color: color-mix(in srgb, var(--text) 45%, transparent);
	opacity: 1;
}

/* Cards / panels */
.card {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: var(--shadow);
	transition: var(--transition-colors);
}

/* Selection highlight adaptation */
::selection {
	background: var(--primary);
	color: var(--primary-contrast);
}

/* Legacy variable bridge (designSystem.css removal path) */
:root,
[data-theme='light'] {
	--color-bg: var(--bg);
	--color-bg-alt: var(--surface-2);
	--color-fg: var(--text);
	--color-fg-subtle: var(--muted);
	--color-border: var(--border);
	--color-accent: var(--primary);
	--color-accent-hover: var(--primary-hover);
	--header-grad-start: #5b47ef;
	--header-grad-end: #4133c4;
	--header-grad-hover-start: #6b57ff;
	--header-grad-hover-end: #4737d4;
}
[data-theme='dark'] {
	--color-bg: var(--bg);
	--color-bg-alt: var(--surface-2);
	--color-fg: var(--text);
	--color-fg-subtle: var(--muted);
	--color-border: var(--border);
	--color-accent: var(--primary);
	--color-accent-hover: var(--primary-hover);
	--header-grad-start: #3d2ec2;
	--header-grad-end: #1a1632;
	--header-grad-hover-start: #5041d8;
	--header-grad-hover-end: #1a1632;
}

/* ── Global animation keyframes ─────────────────────────────── */

/* Panel entry: fade + rise */
@keyframes fadeSlideUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Icon gentle float */
@keyframes floatIcon {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-5px);
	}
}

/* Drag-active pulse ring */
@keyframes pulseRing {
	0% {
		box-shadow:
			0 0 0 0 rgba(91, 71, 239, 0.45),
			0 0 0 3px rgba(91, 71, 239, 0.15);
	}
	60% {
		box-shadow:
			0 0 0 10px rgba(91, 71, 239, 0),
			0 0 0 3px rgba(91, 71, 239, 0.15);
	}
	100% {
		box-shadow:
			0 0 0 0 rgba(91, 71, 239, 0),
			0 0 0 3px rgba(91, 71, 239, 0.15);
	}
}
[data-theme='dark'] {
	--pulse-a: rgba(124, 111, 247, 0.5);
	--pulse-b: rgba(124, 111, 247, 0.18);
}
@keyframes pulseRingDark {
	0% {
		box-shadow:
			0 0 0 0 rgba(124, 111, 247, 0.5),
			0 0 0 3px rgba(124, 111, 247, 0.18);
	}
	60% {
		box-shadow:
			0 0 0 10px rgba(124, 111, 247, 0),
			0 0 0 3px rgba(124, 111, 247, 0.18);
	}
	100% {
		box-shadow:
			0 0 0 0 rgba(124, 111, 247, 0),
			0 0 0 3px rgba(124, 111, 247, 0.18);
	}
}

/* Generate panel: slow breathing glow */
@keyframes generateBreath {
	0%,
	100% {
		box-shadow:
			0 1px 3px rgba(0, 0, 0, 0.06),
			0 4px 16px rgba(91, 71, 239, 0.08);
	}
	50% {
		box-shadow:
			0 1px 3px rgba(0, 0, 0, 0.06),
			0 6px 24px rgba(91, 71, 239, 0.2);
	}
}
@keyframes generateBreathDark {
	0%,
	100% {
		box-shadow:
			0 1px 4px rgba(0, 0, 0, 0.4),
			0 4px 18px rgba(124, 111, 247, 0.1);
	}
	50% {
		box-shadow:
			0 1px 4px rgba(0, 0, 0, 0.4),
			0 6px 28px rgba(124, 111, 247, 0.26);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Upload / Drop Box ───────────────────────────────────────── */

.upload-box {
	--accent: var(--primary, #5b47ef);
	--accent-glow: rgba(91, 71, 239, 0.15);
	--border: var(--border, rgba(91, 71, 239, 0.22));
	--border-active: var(--primary, #5b47ef);
	--bg: var(--surface, rgba(255, 255, 255, 0.82));
	--shadow: var(--shadow, 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(91, 71, 239, 0.06));
	--shadow-hover: 0 4px 20px rgba(91, 71, 239, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	border: 1.5px dashed var(--border);
	border-radius: 16px;
	background: var(--bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 1.5rem 1.5rem 1.35rem;
	min-height: 130px;
	height: 100%;
	box-shadow: var(--shadow);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.18s ease;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.upload-box:hover {
	box-shadow:
		0 6px 28px rgba(91, 71, 239, 0.13),
		0 1px 6px rgba(0, 0, 0, 0.06);
	transform: scale(1.013);
}

.upload-box:focus-visible {
	outline: none;
	border-color: var(--border-active);
	box-shadow:
		0 0 0 3px var(--accent-glow),
		var(--shadow-hover);
}

.upload-box-active {
	border-style: solid;
	border-color: var(--border-active) !important;
	background: rgba(91, 71, 239, 0.07);
	animation: pulseRing 1.3s ease-out infinite !important;
	transform: translateY(-1px);
}
[data-theme='dark'] .upload-box-active {
	animation: pulseRingDark 1.3s ease-out infinite !important;
}

/* Prevent children from swallowing drag events */
.upload-icon,
.upload-title,
.upload-subtitle,
.sr-only {
	pointer-events: none;
}

.upload-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(91, 71, 239, 0.14), rgba(91, 71, 239, 0.07));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary, #5b47ef);
	margin-bottom: 4px;
	transition:
		background 0.2s,
		transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: floatIcon 3.4s ease-in-out infinite;
}

.upload-box:hover .upload-icon {
	animation-play-state: paused;
	transform: scale(1.15);
	background: linear-gradient(135deg, rgba(91, 71, 239, 0.22), rgba(91, 71, 239, 0.12));
}

.upload-box-active .upload-icon {
	animation-play-state: paused;
	transform: scale(1.1);
	background: linear-gradient(135deg, rgba(91, 71, 239, 0.22), rgba(91, 71, 239, 0.12));
}

.upload-title {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0;
	color: var(--text, #1a1a2e);
	font-family: 'Segoe UI', system-ui, sans-serif;
	letter-spacing: -0.01em;
}

.upload-subtitle {
	margin: 0;
	font-size: 0.72rem;
	color: var(--muted, #7c7c9a);
	font-family: 'Segoe UI', system-ui, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 500;
}

/* ── Ghost Thumbnails ───────────────────────────────────────── */
.upload-ghost-thumbnails {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: 16px;
	z-index: 0;
}

.ghost-thumb {
	position: absolute;
	background: var(--surface-2, rgba(240, 240, 245, 0.6));
	border: 1px solid var(--border, rgba(91, 71, 239, 0.1));
	border-radius: 8px;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme='dark'] .ghost-thumb {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.05);
}

.thumb-1 {
	width: 40px;
	height: 50px;
	top: 20%;
	left: 15%;
	transform: rotate(-15deg) translateY(20px);
}

.thumb-2 {
	width: 50px;
	height: 40px;
	top: 15%;
	right: 15%;
	transform: rotate(10deg) translateY(20px);
}

.thumb-3 {
	width: 45px;
	height: 45px;
	bottom: 15%;
	left: 25%;
	transform: rotate(-5deg) translateY(20px);
}

.upload-box:hover .ghost-thumb {
	opacity: 0.6;
	transform: rotate(var(--rot, 0deg)) translateY(0);
}

.upload-box:hover .thumb-1 {
	--rot: -15deg;
}
.upload-box:hover .thumb-2 {
	--rot: 10deg;
}
.upload-box:hover .thumb-3 {
	--rot: -5deg;
}

.upload-box-active .ghost-thumb {
	opacity: 0.8;
	transform: rotate(var(--rot, 0deg)) translateY(-5px) scale(1.05);
	border-color: var(--primary, #5b47ef);
}

.upload-box-active .thumb-1 {
	--rot: -15deg;
}
.upload-box-active .thumb-2 {
	--rot: 10deg;
}
.upload-box-active .thumb-3 {
	--rot: -5deg;
}

/* Ensure content stays above ghost thumbnails */
.upload-icon,
.upload-title,
.upload-subtitle {
	position: relative;
	z-index: 1;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

.header h2,
.header h3,
.header .ms-Text {
	color: #fff !important;
}

/* Dark mode: subtle scale + soft purple glow, no border highlight */
[data-theme='dark'] .upload-box:hover {
	border-color: var(--border);
	box-shadow:
		0 6px 28px rgba(124, 111, 247, 0.16),
		0 1px 8px rgba(0, 0, 0, 0.35);
	transform: scale(1.013);
}

[data-theme='dark'] .upload-box:hover .upload-icon {
	background: linear-gradient(135deg, rgba(124, 111, 247, 0.18), rgba(124, 111, 247, 0.09));
}

/* ── Paste Web Page Box ─────────────────────────────────────── */

.paste-box {
	--accent: var(--primary, #5b47ef);
	--accent-glow: rgba(91, 71, 239, 0.15);
	--border: var(--border, rgba(91, 71, 239, 0.22));
	--border-active: var(--primary, #5b47ef);
	--bg: var(--surface, rgba(255, 255, 255, 0.82));
	--shadow: var(--shadow, 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(91, 71, 239, 0.06));
	--shadow-hover: 0 4px 20px rgba(91, 71, 239, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	border: 1.5px dashed var(--border);
	border-radius: 16px;
	background: var(--bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 1.5rem 1.5rem 1.35rem;
	min-height: 130px;
	height: 100%;
	box-shadow: var(--shadow);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.18s ease;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.paste-box:hover {
	box-shadow:
		0 6px 28px rgba(91, 71, 239, 0.13),
		0 1px 6px rgba(0, 0, 0, 0.06);
	transform: scale(1.013);
}

.paste-box-focused,
.paste-box:focus-visible {
	outline: none;
	border-color: var(--border-active);
	box-shadow:
		0 0 0 3px var(--accent-glow),
		var(--shadow-hover);
}

.paste-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(91, 71, 239, 0.14), rgba(91, 71, 239, 0.07));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary, #5b47ef);
	margin-bottom: 4px;
	transition:
		background 0.2s,
		transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: floatIcon 3.8s ease-in-out infinite;
	/* desync from upload icon */
	animation-delay: -1.4s;
}

.paste-box:hover .paste-icon,
.paste-box-focused .paste-icon {
	animation-play-state: paused;
	transform: scale(1.15);
	background: linear-gradient(135deg, rgba(91, 71, 239, 0.22), rgba(91, 71, 239, 0.12));
}

.paste-title {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0;
	color: var(--text, #1a1a2e);
	font-family: 'Segoe UI', system-ui, sans-serif;
	letter-spacing: -0.01em;
}

.paste-subtitle {
	font-size: 0.75rem;
	color: var(--muted, #7c7c9a);
	font-style: italic;
	margin: 0;
	font-family: 'Segoe UI', system-ui, sans-serif;
}

.paste-hint {
	margin-top: 4px;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted, #9ca3af);
	font-weight: 600;
	display: flex;
	gap: 4px;
	align-items: center;
}

.paste-hint .key {
	background: var(--surface-2, rgba(255, 255, 255, 0.9));
	border: 1px solid var(--border, rgba(91, 71, 239, 0.2));
	border-radius: 5px;
	padding: 2px 6px;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--primary, #5b47ef);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	letter-spacing: 0.03em;
}

.paste-hidden-target {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
	resize: none;
}

/* ── Ghost Thumbnails ───────────────────────────────────────── */
.paste-ghost-thumbnails {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: 16px;
	z-index: 0;
}

.ghost-thumb {
	position: absolute;
	background: var(--surface-2, rgba(240, 240, 245, 0.6));
	border: 1px solid var(--border, rgba(91, 71, 239, 0.1));
	border-radius: 8px;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme='dark'] .ghost-thumb {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.05);
}

.thumb-1 {
	width: 45px;
	height: 45px;
	top: 15%;
	left: 20%;
	transform: rotate(-10deg) translateY(20px);
}

.thumb-2 {
	width: 40px;
	height: 50px;
	top: 20%;
	right: 15%;
	transform: rotate(15deg) translateY(20px);
}

.thumb-3 {
	width: 50px;
	height: 40px;
	bottom: 15%;
	left: 15%;
	transform: rotate(-5deg) translateY(20px);
}

.paste-box:hover .ghost-thumb,
.paste-box-focused .ghost-thumb {
	opacity: 0.6;
	transform: rotate(var(--rot, 0deg)) translateY(0);
}

.paste-box:hover .thumb-1,
.paste-box-focused .thumb-1 {
	--rot: -10deg;
}
.paste-box:hover .thumb-2,
.paste-box-focused .thumb-2 {
	--rot: 15deg;
}
.paste-box:hover .thumb-3,
.paste-box-focused .thumb-3 {
	--rot: -5deg;
}

/* Ensure content stays above ghost thumbnails */
.paste-icon,
.paste-title,
.paste-subtitle,
.paste-hint {
	position: relative;
	z-index: 1;
}

/* no taskpane-width media query — taskpane is always narrow, avoid font-size jumps */

/* Dark mode: subtle scale + soft purple glow, no border highlight */
[data-theme='dark'] .paste-box:hover {
	border-color: var(--border);
	box-shadow:
		0 6px 28px rgba(124, 111, 247, 0.16),
		0 1px 8px rgba(0, 0, 0, 0.35);
	transform: scale(1.013);
}

[data-theme='dark'] .paste-box:hover .paste-icon {
	background: linear-gradient(135deg, rgba(124, 111, 247, 0.18), rgba(124, 111, 247, 0.09));
}

/* ── Container ───────────────────────────────────────────────── */
.fpContainer {
	display: flex;
	flex-direction: column;
	padding: 12px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--surface-2, #f5f4ff);
}

.fpUnifiedCard {
	display: flex;
	flex-direction: column;
	background: var(--surface, #ffffff);
	border-radius: 16px;
	box-shadow: var(--shadow4, 0 4px 16px rgba(0, 0, 0, 0.08));
	padding: 12px;
	gap: 10px;
	flex: 1;
	min-height: 0;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.fpContainer:hover .fpUnifiedCard {
	box-shadow: var(--shadow8, 0 8px 24px rgba(0, 0, 0, 0.12));
}

/* ── Navigation row: tabs, full width ─────────────────────── */
.fpTabList {
	width: 100%;
}

/* ── Selection status MessageBar ─────────────────────────────── */
.fpSelectionBar {
	border-radius: 8px;
	margin-top: 4px;
	animation: fadeSlideUp 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
	flex-shrink: 0;
}

/* ── Content panel ─────────────────────────────────────────────── */
.fpTabContent {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	position: relative;
}

.fpSection {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	animation: fadeSlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Processing spinner overlay */
.fpOverlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 12px;
	z-index: 5;
}

[data-theme='dark'] .fpOverlay {
	background: rgba(0, 0, 0, 0.4);
}

/* ── Selection Tools panel ────────────────────────────────────── */
.fpSelectionSection {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 2px;
}

.fpSelectionHeader {
	display: flex;
	align-items: center;
	gap: 7px;
}

.fpSelectionHeaderIcon {
	font-size: 18px;
	color: var(--colorBrandForeground1, #5b47ef);
	flex-shrink: 0;
}

.fpSelectionHeaderTitle {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--colorBrandForeground1, #5b47ef);
}

/* 2-column tool grid */
.fpSelectionGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.fpSelectionTool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 8px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	text-align: center;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.1s ease,
		box-shadow 0.15s ease;
}

/* Primary action: Auto Color */
.fpSelectionTool--primary {
	background: rgba(91, 71, 239, 0.08);
	border-color: rgba(91, 71, 239, 0.4);
	color: var(--colorBrandForeground1, #5b47ef);
}

.fpSelectionTool--primary:hover:not(:disabled) {
	background: rgba(91, 71, 239, 0.15);
	border-color: var(--colorBrandBackground, #5b47ef);
	box-shadow: 0 2px 8px rgba(91, 71, 239, 0.25);
	transform: translateY(-1px);
}

.fpSelectionTool--primary:active:not(:disabled) {
	transform: translateY(0);
}

/* Muted / coming-soon actions */
.fpSelectionTool--muted {
	background: var(--surface-2, #f5f5f5);
	border-color: transparent;
	color: var(--text-disabled, #a19f9d);
	opacity: 0.65;
	cursor: not-allowed;
}

.fpSelectionToolIcon {
	font-size: 20px;
}

.fpSelectionToolLabel {
	line-height: 1.2;
}

.fpSelectionToolSpinner {
	font-size: 20px;
}

.fpSelectionFootnote {
	font-size: 10px;
	color: var(--text-secondary, #a19f9d);
	margin: 0;
	text-align: center;
	line-height: 1.4;
}

/* ─── Generate Image section ─────────────────────────────────── */
.fpGenerateSection {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fpGenerateHeader {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fpGenerateIcon {
	font-size: 18px;
	color: var(--primary, #0078d4);
}

.fpGenerateTitle {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text, #323130);
}

.fpGenerateSuggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.fpSuggestionChip {
	background: var(--surface-2, #f3f2f1);
	border: 1px solid var(--border, #e1dfdd);
	border-radius: 16px;
	padding: 4px 12px;
	font-size: 0.75rem;
	color: var(--text-secondary, #605e5c);
	cursor: pointer;
	transition: all 0.2s ease;
}

.fpSuggestionChip:hover {
	background: var(--surface-hover, #edebe9);
	color: var(--primary, #0078d4);
	border-color: var(--primary, #0078d4);
}

.fpGenerateActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: auto;
}

.fpGenerateError {
	color: var(--danger, #c4314b);
	font-size: 0.75rem;
	flex: 1;
}

.fpGenerateBtn {
	transition: all 0.3s ease;
}

.fpGenerateBtnActive {
	background: linear-gradient(135deg, #0078d4, #5b47ef) !important;
	color: white !important;
	border: none !important;
	box-shadow: 0 4px 12px rgba(91, 71, 239, 0.3);
}

.fpGenerateBtnActive:hover {
	box-shadow: 0 6px 16px rgba(91, 71, 239, 0.4);
	transform: translateY(-1px);
}

@keyframes fadeSlideUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Delete confirmation dialog ──────────────────────────────────────────── */

.dlg-delete-surface {
	max-width: 360px !important;
	padding: 28px 28px 24px !important;
	border-radius: 12px !important;
}

/* Fluent's DialogBody is a grid; override to a flex column centered */
.dlg-delete-body {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0 !important;
}

/* ── Icon circle ─────────────────────────────────────────────────────────── */
.dlg-delete-icon-wrap {
	margin-bottom: 18px;
	display: flex;
	justify-content: center;
}

.dlg-delete-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--colorPaletteRedBackground2);
	color: var(--colorPaletteRedForeground1);
	font-size: 30px;
	flex-shrink: 0;
	animation: dlg-icon-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes dlg-icon-pop {
	from {
		transform: scale(0.35);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.dlg-delete-title,
.dlg-delete-title > * {
	text-align: center !important;
	width: 100% !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--colorNeutralForeground1) !important;
	margin-bottom: 8px !important;
	padding: 0 !important;
}

/* Hide Fluent's default action slot (close button area) */
.dlg-delete-title [class*='DialogTitle__action'] {
	display: none !important;
}

/* ── Message ─────────────────────────────────────────────────────────────── */
.dlg-delete-content {
	text-align: center !important;
	color: var(--colorNeutralForeground2) !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	width: 100% !important;
	margin-bottom: 24px !important;
	padding: 0 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.dlg-delete-actions {
	display: flex !important;
	flex-direction: row !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 0 !important;
	justify-content: stretch !important;
}

.dlg-delete-cancel {
	flex: 1 !important;
	min-width: 0 !important;
	border-radius: 8px !important;
}

.dlg-delete-confirm {
	flex: 1 !important;
	min-width: 0 !important;
	border-radius: 8px !important;
	background-color: var(--colorPaletteRedBackground3) !important;
	color: #fff !important;
	border-color: transparent !important;
	transition: background-color 0.17s ease, box-shadow 0.17s ease, transform 0.1s ease !important;
}

.dlg-delete-confirm:hover {
	background-color: var(--colorPaletteRedForeground3, #a4262c) !important;
	box-shadow: 0 4px 16px rgba(196, 49, 75, 0.38) !important;
}

.dlg-delete-confirm:active {
	transform: scale(0.97) !important;
	box-shadow: none !important;
}

.image {
	width: 100%;
	/* height: 100%; */
	object-fit: contain;
}

.divUnselected {
	background-color: lightblue;
}

/* Footer row: primary insert + overflow menu */
.image-card__footer {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 2px 6px 4px;
}

/* Make media area center its content and render a small thumbnail (~20% of container width) */
.image-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
}
.image-card__media .image-thumb {
	/* Fill card width, constrained height for gallery density */
	max-height: 180px;
	height: auto;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 6px;
	transition: transform 0.2s ease;
}

/* Selected state highlight — card border is the sole indicator */
.image-card__media {
	position: relative;
	border-radius: 8px;
	transition: transform 0.2s ease;
}
.image-card.is-selected .image-card__media:hover {
	transform: translateY(-1px);
}

/* PDF card media area — no pixel image, just document info overlay */
.image-card__media--pdf {
	min-height: 120px;
	background: color-mix(in srgb, var(--primary) 8%, var(--surface));
	border-radius: 8px;
}

[data-theme='dark'] .image-card__media--pdf {
	background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

/* PDF file-type badge (bottom-left of image card) */
.pdf-badge {
	position: absolute;
	bottom: 6px;
	left: 6px;
	padding: 1px 6px;
	border-radius: 4px;
	background: #d32f2f;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-family: system-ui, sans-serif;
	letter-spacing: 0.5px;
	line-height: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	z-index: 4;
	pointer-events: none;
	user-select: none;
}

/* Animated circular selection-order badge */
.selection-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	min-width: 24px;
	height: 24px;
	padding: 0 5px;
	border-radius: 50%;
	background: var(--selected);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11.5px;
	font-weight: 700;
	font-family: system-ui, sans-serif;
	line-height: 1;
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.85),
		0 2px 8px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: scale(0.55);
	transition:
		opacity 0.18s ease,
		transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
	z-index: 4;
}
[data-theme='dark'] .selection-badge {
	box-shadow:
		0 0 0 2px rgba(0, 0, 0, 0.5),
		0 2px 8px rgba(0, 0, 0, 0.35);
}
.image-card.is-selected .selection-badge {
	opacity: 1;
	transform: scale(1);
}

/* Dimension overlay (shown when dimensions available) */
.image-dimensions-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-size: 11px;
	font-weight: 500;
}
.image-dimensions-overlay .dim-line {
	position: absolute;
	color: var(--primary);
	font-family: system-ui, sans-serif;
	letter-spacing: 0.5px;
}
.image-dimensions-overlay .dim-label {
	background: var(--surface-2, rgba(0, 0, 0, 0.55));
	color: var(--text);
	padding: 2px 6px;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(4px);
}
.image-dimensions-overlay .dim-line-horizontal {
	left: 10px;
	right: 10px;
	bottom: 8px;
	height: 0;
}
.image-dimensions-overlay .dim-line-horizontal::before,
.image-dimensions-overlay .dim-line-horizontal::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
}
.image-dimensions-overlay .dim-line-horizontal::before {
	left: 0;
	border-left: 1px solid var(--primary);
	border-top: 1px solid var(--primary);
	transform: translateY(-50%) rotate(-45deg);
}
.image-dimensions-overlay .dim-line-horizontal::after {
	right: 0;
	border-right: 1px solid var(--primary);
	border-top: 1px solid var(--primary);
	transform: translateY(-50%) rotate(45deg);
}
.image-dimensions-overlay .dim-line-horizontal .dim-rule {
	position: absolute;
	left: 12px;
	right: 12px;
	top: 50%;
	border-top: 1px dashed var(--primary);
	transform: translateY(-50%);
	opacity: 0.9;
}
.image-dimensions-overlay .dim-line-horizontal .dim-label {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translate(-50%, 100%);
}

.image-dimensions-overlay .dim-line-vertical {
	top: 10px;
	bottom: 10px;
	right: 4px;
	left: auto;
	width: 0;
}
.image-dimensions-overlay .dim-line-vertical::before,
.image-dimensions-overlay .dim-line-vertical::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 10px;
	height: 10px;
	transform: translateX(-50%);
}
.image-dimensions-overlay .dim-line-vertical::before {
	top: 0;
	border-left: 1px solid var(--primary);
	border-top: 1px solid var(--primary);
	transform: translateX(-50%) rotate(45deg);
}
.image-dimensions-overlay .dim-line-vertical::after {
	bottom: 0;
	border-left: 1px solid var(--primary);
	border-bottom: 1px solid var(--primary);
	transform: translateX(-50%) rotate(-45deg);
}
.image-dimensions-overlay .dim-line-vertical .dim-rule {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 50%;
	border-left: 1px dashed var(--primary);
	transform: translateX(-50%);
	opacity: 0.9;
}
.image-dimensions-overlay .dim-line-vertical .dim-label {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translate(0, -50%) rotate(-90deg);
	transform-origin: center;
}

/* Reduce clutter on very small images */
.image-card__media.small-dims .image-dimensions-overlay {
	display: none;
}

/* Focus outline harmonized with selection */
.image-card__media:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Make the meta (width x height) text 14px and align nicely */
.image-card__footer .image-meta {
	font-size: 12px;
	line-height: 1.2;
}
/* Tweak Fluent Checkbox label to 12px to reduce size */
.image-card__footer .fui-Checkbox,
.image-card__footer .fui-Checkbox *,
.image-card__footer label {
	font-size: 12px;
}

/* Rely on Fluent UI button styling; only adjust spacing */
.image-card__footer .fui-Button {
	min-height: 32px;
}

/* ── Insert animation ────────────────────────────────────────────── */
@keyframes insertFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes insertArrowBounce {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-7px) scale(1.12);
	}
}

@keyframes insertCardGlow {
	0%,
	100% {
		box-shadow: 0 0 0 2px var(--colorBrandBackground);
	}
	50% {
		box-shadow:
			0 0 0 3px var(--colorBrandBackground),
			0 0 20px 5px color-mix(in srgb, var(--colorBrandBackground) 40%, transparent);
	}
}

@keyframes insertShimmer {
	0% {
		background-position: -250% center;
	}
	100% {
		background-position: 250% center;
	}
}

/* Semi-transparent overlay shown on the image while inserting */
.insert-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.48);
	backdrop-filter: blur(3px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	animation: insertFadeIn 0.18s ease;
	pointer-events: none;
}

/* Shimmer sweep across the overlay */
.insert-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background: linear-gradient(
		120deg,
		transparent 30%,
		rgba(255, 255, 255, 0.12) 50%,
		transparent 70%
	);
	background-size: 250% 100%;
	animation: insertShimmer 1.4s linear infinite;
}

/* Bouncing arrow circle */
.insert-overlay__arrow {
	position: relative;
	z-index: 1;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--colorBrandBackground);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: insertArrowBounce 0.85s ease-in-out infinite;
	box-shadow: 0 3px 14px color-mix(in srgb, var(--colorBrandBackground) 60%, transparent);
}

.insert-overlay__arrow svg {
	width: 20px;
	height: 20px;
	color: #fff;
	stroke: #fff;
}

/* Label below the arrow */
.insert-overlay__label {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	font-family: system-ui, sans-serif;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Zoom button — top-right corner, visible on hover only */
.image-card__zoom {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	z-index: 10;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 6px;
	padding: 2px;
	color: #fff;
	opacity: 0;
	transition: opacity 0.18s ease;
}
.image-card:hover .image-card__zoom {
	opacity: 1;
}
/* Ensure the button itself is white */
.image-card__zoom .fui-Button {
	color: #fff;
}

/* Footer more-options button — always visible, subtle */
.image-card__footer-menu-btn {
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}
.image-card__footer-menu-btn:hover {
	opacity: 1;
}

/* PDF card ⋯ action button */
.pdf-menu-btn {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}
.pdf-menu-btn:hover {
	opacity: 1;
}

@keyframes pdf-menu-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0px rgba(59, 130, 246, 0.55);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
	}
}

.pdf-menu-btn--selected {
	opacity: 1;
	border-radius: 4px;
	background-color: var(--colorBrandBackground2, rgba(59, 130, 246, 0.12)) !important;
	box-shadow: 0 0 0 0px rgba(59, 130, 246, 0.55);
	animation: pdf-menu-pulse 1.4s ease-in-out infinite;
}

/* Dimension badge — shown on hover only */
.dimension-badge {
	position: absolute;
	bottom: 4px;
	right: 4px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	white-space: nowrap;
	pointer-events: auto;
	letter-spacing: 0.02em;
	user-select: none;
	opacity: 0;
	transition: opacity 0.18s ease;
}
.image-card:hover .dimension-badge {
	opacity: 1;
}

/* Pulsing glow on the whole media container while inserting */
.image-card.is-inserting .image-card__media {
	animation: insertCardGlow 1.1s ease-in-out infinite;
	border-radius: 8px;
}

/* Block interactions when any operation is running */
.image-card.is-busy .image-card__media,
.image-card.is-busy .image-card__toolbar-row {
	pointer-events: none;
	opacity: 0.55;
}

/* ── "New" flash animation for freshly generated / transformed images ── */
@keyframes newImageFlash {
	0% {
		box-shadow:
			0 0 0 0 rgba(91, 71, 239, 0.7),
			inset 0 0 12px rgba(91, 71, 239, 0.15);
		transform: scale(1);
		border-color: rgba(91, 71, 239, 0.8);
	}
	8% {
		box-shadow:
			0 0 20px 8px rgba(91, 71, 239, 0.6),
			inset 0 0 16px rgba(91, 71, 239, 0.2);
		transform: scale(1.03);
		border-color: rgba(91, 71, 239, 0.9);
	}
	20% {
		box-shadow:
			0 0 8px 3px rgba(91, 71, 239, 0.3),
			inset 0 0 8px rgba(91, 71, 239, 0.08);
		transform: scale(1);
		border-color: rgba(91, 71, 239, 0.6);
	}
	35% {
		box-shadow:
			0 0 18px 6px rgba(91, 71, 239, 0.5),
			inset 0 0 14px rgba(91, 71, 239, 0.15);
		transform: scale(1.02);
		border-color: rgba(91, 71, 239, 0.8);
	}
	55% {
		box-shadow:
			0 0 6px 2px rgba(91, 71, 239, 0.2),
			inset 0 0 6px rgba(91, 71, 239, 0.06);
		transform: scale(1);
		border-color: rgba(91, 71, 239, 0.5);
	}
	70% {
		box-shadow:
			0 0 14px 5px rgba(91, 71, 239, 0.35),
			inset 0 0 10px rgba(91, 71, 239, 0.1);
		border-color: rgba(91, 71, 239, 0.6);
	}
	100% {
		box-shadow:
			0 0 0 0 rgba(91, 71, 239, 0),
			inset 0 0 0 rgba(91, 71, 239, 0);
		border-color: rgba(91, 71, 239, 0);
	}
}
[data-theme='dark'] .image-card.is-new {
	--new-color: rgba(124, 111, 247, 0.6);
}
@keyframes newImageFlashDark {
	0% {
		box-shadow:
			0 0 0 0 rgba(124, 111, 247, 0.7),
			inset 0 0 12px rgba(124, 111, 247, 0.2);
		transform: scale(1);
		border-color: rgba(124, 111, 247, 0.8);
	}
	8% {
		box-shadow:
			0 0 22px 8px rgba(124, 111, 247, 0.65),
			inset 0 0 18px rgba(124, 111, 247, 0.25);
		transform: scale(1.03);
		border-color: rgba(124, 111, 247, 0.9);
	}
	20% {
		box-shadow:
			0 0 8px 3px rgba(124, 111, 247, 0.35),
			inset 0 0 8px rgba(124, 111, 247, 0.1);
		transform: scale(1);
		border-color: rgba(124, 111, 247, 0.6);
	}
	35% {
		box-shadow:
			0 0 20px 7px rgba(124, 111, 247, 0.55),
			inset 0 0 14px rgba(124, 111, 247, 0.2);
		transform: scale(1.02);
		border-color: rgba(124, 111, 247, 0.8);
	}
	55% {
		box-shadow:
			0 0 6px 2px rgba(124, 111, 247, 0.25),
			inset 0 0 6px rgba(124, 111, 247, 0.08);
		transform: scale(1);
		border-color: rgba(124, 111, 247, 0.5);
	}
	70% {
		box-shadow:
			0 0 16px 5px rgba(124, 111, 247, 0.4),
			inset 0 0 10px rgba(124, 111, 247, 0.12);
		border-color: rgba(124, 111, 247, 0.6);
	}
	100% {
		box-shadow:
			0 0 0 0 rgba(124, 111, 247, 0),
			inset 0 0 0 rgba(124, 111, 247, 0);
		border-color: rgba(124, 111, 247, 0);
	}
}

.image-card.is-new {
	animation: newImageFlash 5s ease-in-out;
	border-color: rgba(91, 71, 239, 0.7);
}
[data-theme='dark'] .image-card.is-new {
	animation: newImageFlashDark 5s ease-in-out;
	border-color: rgba(124, 111, 247, 0.7);
}

/* ── "New" text badge ── */
@keyframes newBadgePop {
	0% {
		opacity: 0;
		transform: scale(0.3) rotate(-12deg);
	}
	12% {
		opacity: 1;
		transform: scale(1.15) rotate(2deg);
	}
	22% {
		transform: scale(0.95) rotate(-1deg);
	}
	32% {
		transform: scale(1.05) rotate(0deg);
	}
	45% {
		transform: scale(1);
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(0.8);
	}
}

.new-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	padding: 2px 10px;
	border-radius: 10px;
	background: linear-gradient(135deg, #7c5cfc, #5b47ef);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	font-family: system-ui, sans-serif;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.6;
	box-shadow:
		0 0 10px 2px rgba(91, 71, 239, 0.5),
		0 2px 6px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	z-index: 5;
	animation: newBadgePop 5s ease-in-out forwards;
}

[data-theme='dark'] .new-badge {
	background: linear-gradient(135deg, #9580ff, #7c6ff7);
	box-shadow:
		0 0 12px 3px rgba(124, 111, 247, 0.55),
		0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ===== ImageEditToolbar — floating panels (rendered via React portal) ===== */

.iet-panel {
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	background: var(--colorNeutralBackground1, #ffffff);
	border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
}

.iet-panel-grid {
	display: grid;
	grid-template-columns: auto 1fr 32px;
	align-items: center;
	gap: 0 4px;
	flex: 1;
	min-width: 0;
}

/* Compact Fluent Label inside adjustment grid */
.iet-panel-grid > label {
	font-size: 10px;
	line-height: 1;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

/* Compact Fluent Slider inside adjustment grid */
.iet-panel-grid .fui-Slider {
	min-width: 0;
	min-height: 0;
	--fui-Slider__thumb--size: 12px;
	--fui-Slider__rail--size: 3px;
}

/* Collapse Slider internal grid rows to remove vertical padding */
.iet-panel-grid .fui-Slider__input {
	height: 18px;
}

/* Hide step tick marks (the dashed lines) */
.iet-panel-grid .fui-Slider__rail::before {
	background-image: none !important;
}

/* Smaller thumb */
.iet-panel-grid .fui-Slider__thumb {
	width: 12px;
	height: 12px;
}

/* ── Gradient rails per adjustment slider (nth-child in 3-col grid) ── */
/* Brightness (child 2): dark → light */
.iet-panel-grid > :nth-child(2) .fui-Slider__rail {
	background: linear-gradient(to right, #2c2c3a, #e8e4d8, #fffdf5) !important;
}
/* Contrast (child 5): soft gray → deep black */
.iet-panel-grid > :nth-child(5) .fui-Slider__rail {
	background: linear-gradient(to right, #c8c8c8, #606060, #1a1a2e) !important;
}
/* Saturation (child 8): muted gray → vivid rose */
.iet-panel-grid > :nth-child(8) .fui-Slider__rail {
	background: linear-gradient(to right, #a8a8a8, #e07888, #e83e5a) !important;
}
/* Hue (child 11): full spectrum */
.iet-panel-grid > :nth-child(11) .fui-Slider__rail {
	background: linear-gradient(to right, #ef4444, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444) !important;
}
/* Sepia (child 14): neutral → warm amber */
.iet-panel-grid > :nth-child(14) .fui-Slider__rail {
	background: linear-gradient(to right, #9e9e9e, #c8a882, #b8865a) !important;
}
/* Blur (child 17): crisp teal → soft sky */
.iet-panel-grid > :nth-child(17) .fui-Slider__rail {
	background: linear-gradient(to right, #2496a8, #7bc4d4, #c5e4ee) !important;
}
/* Sharpness (child 20): light lavender → deep violet */
.iet-panel-grid > :nth-child(20) .fui-Slider__rail {
	background: linear-gradient(to right, #c9b8e8, #9575cd, #5e35b1) !important;
}

/* Round the gradient rail ends */
.iet-panel-grid .fui-Slider__rail {
	border-radius: 2px;
}

.iet-panel-label {
	font-size: 10px;
	color: var(--colorNeutralForeground1, #333333);
	white-space: nowrap;
	user-select: none;
}

.iet-panel-slider {
	width: 100%;
	min-width: 40px;
}

.iet-panel-slider:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.iet-panel-value {
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
	user-select: none;
	color: var(--colorNeutralForeground2, #616161);
	line-height: 1;
	padding: 0;
}

.iet-binary-auto-label {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--colorNeutralForeground1, #333333);
	cursor: pointer;
	user-select: none;
}

.iet-panel-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: stretch;
	flex-shrink: 0;
}

.iet-panel-icon {
	font-size: 13px;
	color: var(--colorNeutralForeground2, #666666);
	flex-shrink: 0;
}

/* ===== ImageEditToolbar v2 — grouped tab bar ===== */

/* Outer wrapper */
.iet-toolbar {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

/* ── Tab bar ── */
.iet-tab-bar {
	display: flex;
	align-items: center;
	gap: 2px;
	border-bottom: 1px solid var(--colorNeutralStroke1, #e0e0e0);
	padding: 2px 4px 0;
}

.iet-tab {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 28px;
	padding: 3px 2px;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 6px 6px 0 0;
	background: transparent;
	cursor: pointer;
	font-size: 10px;
	font-weight: 500;
	color: var(--colorNeutralForeground2, #666666);
	transition:
		background 0.12s,
		color 0.12s,
		border-color 0.12s;
	user-select: none;
}

.iet-tab:hover {
	background: var(--colorNeutralBackground1Hover, #f5f5f5);
	color: var(--colorNeutralForeground1, #1a1a1a);
}

.iet-tab.is-active {
	color: var(--colorBrandForeground1, #0f6cbd);
	border-bottom-color: var(--colorBrandForeground1, #0f6cbd);
	font-weight: 700;
	background: var(--colorBrandBackground2, #e6f2fb);
}

.iet-tab__icon {
	font-size: 13px;
	display: flex;
	align-items: center;
}

.iet-tab__label {
	font-size: 9px;
	line-height: 1;
}

/* AI tab has a special gradient label */
.iet-tab--ai {
	position: relative;
}

.iet-tab--ai .iet-tab__icon,
.iet-tab--ai .iet-tab__label {
	background: linear-gradient(90deg, #a855f7, #3b82f6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.iet-tab--ai.is-active {
	border-bottom-color: #7c3aed;
	background: #f5f0ff;
}

/* ── Group panel (expands below the tab bar) ── */
.iet-group-panel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px 4px 4px;
	animation: iet-fade-in 0.12s ease;
	border-bottom: 1px solid var(--colorNeutralStroke1, #e0e0e0);
}

@keyframes iet-fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.iet-group-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
}

/* ── Group buttons (labeled icon buttons inside a panel) ── */
.iet-group-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 0;
	max-width: none;
	min-height: 28px;
	padding: 2px 4px;
	border: 1px solid var(--colorNeutralStroke1, #d0d0d0);
	border-radius: 5px;
	background: var(--colorNeutralBackground1, #fff);
	cursor: pointer;
	color: var(--colorNeutralForeground1, #1a1a1a);
	transition:
		background 0.12s,
		border-color 0.12s,
		color 0.12s;
	font-family: inherit;
}

.iet-group-btn:hover {
	background: var(--colorNeutralBackground1Hover, #f0f0f0);
	border-color: var(--colorNeutralStroke1Hover, #bbb);
}

.iet-group-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.iet-group-btn.is-active {
	background: var(--colorBrandBackground2, #e6f2fb);
	border-color: var(--colorBrandForeground1, #0f6cbd);
	color: var(--colorBrandForeground1, #0f6cbd);
}

.iet-group-btn__icon {
	font-size: 12px;
	display: flex;
	align-items: center;
	line-height: 1;
}

.iet-group-btn__label {
	font-size: 8px;
	font-weight: 500;
	white-space: nowrap;
	text-align: center;
	line-height: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* AI badge (top-right corner) */
.iet-ai-badge {
	position: absolute;
	top: 3px;
	right: 4px;
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	padding: 1px 3px;
	border-radius: 3px;
	background: linear-gradient(135deg, #a855f7, #3b82f6);
	color: #fff;
	letter-spacing: 0.02em;
}

/* ── Sub-panel (binary / adjustments) — floating draggable dialog ── */
.iet-sub-panel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 2px 0 0;
	animation: iet-fade-in 0.12s ease;
}

.iet-sub-panel--floating {
	position: fixed;
	z-index: 10000;
	min-width: 280px;
	max-width: 400px;
	padding: 0;
	background: var(--colorNeutralBackground1, #ffffff);
	border: 1px solid var(--colorNeutralStroke1, #d0d0d0);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
	animation: iet-fade-in 0.15s ease;
}

/* Group panel floating variant — slightly wider for the button grid */
.iet-group-panel--floating {
	min-width: 320px;
	max-width: 480px;
}

.iet-group-panel__body {
	padding: 6px 8px;
}

[data-theme='dark'] .iet-sub-panel--floating {
	background: var(--colorNeutralBackground1, #292929);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.iet-sub-panel--floating .iet-panel-grid,
.iet-sub-panel--floating .iet-slider-row,
.iet-sub-panel--floating .fui-Checkbox {
	padding: 0 10px;
}

.iet-sub-panel--floating .iet-sub-panel__actions {
	padding: 6px 10px;
	margin-top: 2px;
}

/* Drag handle — title bar of floating panel */
.iet-sub-panel__drag-handle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 4px 4px 10px;
	cursor: grab;
	user-select: none;
	border-bottom: 1px solid var(--colorNeutralStroke2, #e8e8e8);
	border-radius: 8px 8px 0 0;
	background: var(--colorNeutralBackground3, #f5f5f5);
}

[data-theme='dark'] .iet-sub-panel__drag-handle {
	background: rgba(255, 255, 255, 0.04);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.iet-sub-panel__drag-handle:active {
	cursor: grabbing;
}

.iet-sub-panel__close {
	min-width: 24px;
	min-height: 24px;
	padding: 0;
}

.iet-sub-panel__title {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-bottom: 0;
}

.iet-sub-panel__actions {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
	padding-top: 2px;
	border-top: 1px solid var(--colorNeutralStroke2, #e8e8e8);
}

/* Checkbox row inside sub-panel */
.iet-checkbox-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--colorNeutralForeground1, #1a1a1a);
	cursor: pointer;
	user-select: none;
}

.iet-checkbox-row input[type='checkbox'] {
	accent-color: var(--colorBrandBackground, #0f6cbd);
	margin: 0;
	cursor: pointer;
}

/* Slider rows inside sub-panel / adjustments grid */
.iet-slider-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Compact Fluent Slider inside sub-panels (threshold etc.) */
.iet-sub-panel .fui-Slider {
	--fui-Slider__thumb--size: 14px;
	--fui-Slider__rail--size: 3px;
}

.iet-sub-panel .fui-Slider__rail::before {
	background-image: none !important;
}

.iet-slider {
	flex: 1;
	min-width: 60px;
	accent-color: var(--colorBrandBackground, #0f6cbd);
}

.iet-slider:disabled {
	opacity: 0.35;
}

.iet-slider-value {
	min-width: 32px;
	text-align: right;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--colorNeutralForeground2, #555);
	flex-shrink: 0;
}

/* Hint line below a group panel */
.iet-hint {
	font-size: 11px;
	color: var(--colorNeutralForeground3, #888);
	margin: 2px 0 0;
	line-height: 1.4;
}

.iet-hint--ai {
	color: #7c3aed;
}

/* Capture controls section (Area / Freeform / Eraser) inside Crop panel */
.iet-capture-section {
	border-top: 1px solid var(--colorNeutralStroke2, #e8e8e8);
	padding-top: 6px;
	margin-top: 2px;
}

.iet-capture-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* Save-to-gallery row (bottom of toolbar) */
.iet-save-row {
	display: flex;
	justify-content: flex-end;
	padding: 4px 4px 0;
	border-top: 1px solid var(--colorNeutralStroke1, #e0e0e0);
	gap: 6px;
	align-items: center;
}

/* Image list container with proper scrolling */
.image-list-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
}

/* Control bar — acts as the workspace card's header */
.image-list-controls {
	padding: 6px 12px;
	gap: 4px;
	min-height: 40px;
	max-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--colorNeutralStroke2, #e8e8e8);
	background: var(--colorNeutralBackground2, #fafafa);
	flex-shrink: 0;
}

[data-theme='dark'] .image-list-controls {
	background: rgba(255, 255, 255, 0.035);
	border-bottom-color: rgba(124, 111, 247, 0.15);
}

/* Scrollable images area */
.image-list-content {
	padding: 4px 4px 8px;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
	flex: 1 1 auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.image-list-content::-webkit-scrollbar {
	width: 5px;
}

.image-list-content::-webkit-scrollbar-track {
	background: transparent;
}

.image-list-content::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

.image-list-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .image-list-content {
	scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

[data-theme='dark'] .image-list-content::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
}

[data-theme='dark'] .image-list-content::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Responsive grid — single column in narrow taskpane, multi-column when wider */
.image-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px;
	padding: 0;
	margin: 0;
}

/* Item wrapper — transparent; card handles visuals */
.image-item {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	overflow: visible;
	animation: fadeSlideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.image-item:nth-child(1) {
	animation-delay: 0ms;
}
.image-item:nth-child(2) {
	animation-delay: 55ms;
}
.image-item:nth-child(3) {
	animation-delay: 110ms;
}
.image-item:nth-child(4) {
	animation-delay: 165ms;
}
.image-item:nth-child(n + 5) {
	animation-delay: 210ms;
}

.image-item:hover {
	transform: none;
	box-shadow: none;
}

/* The image card */
.image-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: 12px;
	padding: 6px;
	gap: 4px;
	box-shadow: var(--shadow);
	transition: all 0.2s ease;
	overflow: visible;
}

.image-card:hover {
	box-shadow:
		0 4px 18px rgba(0, 0, 0, 0.08),
		0 1px 4px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

[data-theme='dark'] .image-card {
	background: rgba(19, 16, 36, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

[data-theme='dark'] .image-card:hover {
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.3),
		0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Selected: refined single-border selection with ambient halo and lift */
.image-card.is-selected {
	border-color: var(--selected);
	border-width: 1.5px;
	background: var(--selected-bg);
	box-shadow:
		0 0 0 3px var(--selected-soft),
		0 1px 3px rgba(0, 0, 0, 0.04),
		0 8px 24px rgba(0, 0, 0, 0.07);
}

[data-theme='dark'] .image-card.is-selected {
	background: var(--selected-bg);
	box-shadow:
		0 0 0 3px var(--selected-soft),
		0 1px 3px rgba(0, 0, 0, 0.15),
		0 8px 24px rgba(0, 0, 0, 0.25);
}

.image-card.is-selected:focus-within {
	outline: none;
}

.image-card:not(.is-selected):focus-visible {
	outline: 2px solid var(--selected);
	outline-offset: 2px;
}

.image-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.image-card__footer {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	min-height: 28px;
}
.image-card__footer .fui-Checkbox,
.image-card__footer button {
	margin: 0;
}
.image-card__footer .fui-Checkbox label {
	line-height: 1.1;
}

/* Fabric UI overrides */
.ms-Grid {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.ms-Grid-row {
	overflow: visible !important;
}

/* Spinner and dialog positioning */
.image-list-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

.ms-welcome {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	min-height: 500px;
	min-width: 320px;
	overflow: auto;
	overflow-x: hidden;
}

.ms-welcome__header {
	min-height: 250px;
	padding: 20px;
	padding-bottom: 30px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.ms-welcome__header > h1 {
	margin-top: 30px;
	text-align: center;
}

.ms-welcome__main {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex: 1 0 0;
	flex: 1 0 0;
	padding: 30px 20px;
}

.ms-welcome__main > h2 {
	width: 100%;
	text-align: center;
}

.ms-welcome__features {
	list-style-type: none;
	margin-top: 30px;
}

.ms-welcome__features.ms-List .ms-ListItem {
	padding: 0px;
	padding-bottom: 20px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-align-items: center;
	align-items: center;
}

.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
	font-size: 14pt;
}

.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
	margin-right: 10px;
}

.ms-welcome__action.ms-Button--hero {
	margin-top: 30px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

.ms-welcome__action.ms-Button--hero .ms-Button-icon .ms-Icon {
	margin-left: 5px;
	margin-top: 4px;
	border: none;
	font-size: 14pt;
}

.ms-welcome__action.ms-Button--hero:hover .ms-Button-icon .ms-Icon {
	border: none;
}

@media (min-width: 0) and (max-width: 350px) {
	.ms-welcome__features {
		width: 100%;
	}
}

/*! CSS Used from: Embedded */
a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

@media print {
	*,
	:after,
	:before {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: ' (' attr(href) ')';
	}

	a[href^='#']:after {
		content: '';
	}
}

*,
:after,
:before {
	box-sizing: border-box;
}

a {
	color: #337ab7;
	text-decoration: none;
}

a:focus,
a:hover {
	color: #23527c;
	text-decoration: underline;
}

a:focus {
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

ul {
	margin-top: 0;
	margin-bottom: 10px;
}

.pagination {
	display: inline-block;
	padding-left: 0;
	margin: auto;
	width: auto;
	border-radius: 4px;
}

.pagination > li {
	display: inline;
}

.pagination > li > a {
	position: relative;
	float: left;
	padding: 6px 12px;
	line-height: 1.42857143;
	text-decoration: none;
	color: #337ab7;
	background-color: #fff;
	border: 1px solid #ddd;
	margin-left: -1px;
}

.pagination > li:first-child > a {
	margin-left: 0;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}

.pagination > li > a:focus,
.pagination > li > a:hover {
	z-index: 2;
	color: #23527c;
	background-color: #eee;
	border-color: #ddd;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover {
	z-index: 3;
	color: #fff;
	background-color: #337ab7;
	border-color: #337ab7;
	cursor: default;
}

.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover {
	color: #777;
	background-color: #fff;
	border-color: #ddd;
	cursor: not-allowed;
}

/* PaginationToolbar - token based styles (light/dark supported via CSS variables) */
.pagination-toolbar {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 500;
	--_btn-bg: transparent;
	--_btn-border: var(--border, #d0d7de);
	--_btn-fg: var(--text, #222);
	--_btn-bg-hover: var(--surface-2, #f3f4f6);
	--_btn-bg-active: var(--primary, #2563eb);
	--_btn-fg-active: var(--primary-contrast, #fff);
	--_btn-bg-disabled: var(--surface, #e5e7eb);
	--_btn-fg-disabled: var(--muted, #999);
}

.pagination-toolbar.inline {
	font-size: 11px;
	gap: 2px;
}

.pagination-toolbar button {
	appearance: none;
	border: 1px solid var(--_btn-border);
	background: var(--_btn-bg);
	color: var(--_btn-fg);
	padding: 4px 8px;
	line-height: 1.1;
	min-width: 32px;
	border-radius: 4px;
	cursor: pointer;
	font: inherit;
	position: relative;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}

.pagination-toolbar.inline button {
	padding: 2px 6px;
	min-width: auto;
}

.pagination-toolbar button:hover:not(:disabled) {
	background: var(--_btn-bg-hover);
}

.pagination-toolbar button[aria-current='page'],
.pagination-toolbar button.active {
	background: var(--_btn-bg-active);
	color: var(--_btn-fg-active);
	border-color: var(--_btn-bg-active);
	font-weight: 600;
}

.pagination-toolbar button:disabled {
	cursor: not-allowed;
	background: var(--_btn-bg-disabled);
	color: var(--_btn-fg-disabled);
}

.pagination-toolbar button:focus-visible {
	outline: 2px solid var(--primary, #2563eb);
	outline-offset: 2px;
	z-index: 1;
}

.pagination-toolbar .ellipsis {
	padding: 0 4px;
	color: var(--muted, #666);
	user-select: none;
}

@media (hover: none) {
	.pagination-toolbar button:hover:not(:disabled) {
		background: var(--_btn-bg);
	}
}

/* Wrapper retained for structural spacing when inline */
.pagination-inline-wrapper {
	display: flex;
	align-items: center;
	font-size: 11px;
}

/* Legacy classes (from react-js-pagination) intentionally removed after migration
	 This file now only keeps minimal wrapper styling. */

/* ── Images view — unified workspace card layout ──────────────────────── */

.images-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	padding: 0 0 4px;
	gap: 4px;
}

/* ── Unified elevated workspace card ──────────────────────────────────── */

.workspace-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--colorNeutralBackground1, #fff);
	border: 1px solid var(--colorNeutralStroke2, #e8e8e8);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.06),
		0 4px 24px rgba(91, 71, 239, 0.07);
}

[data-theme='dark'] .workspace-card {
	background: rgba(19, 16, 36, 0.82);
	border-color: rgba(124, 111, 247, 0.18);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.4),
		0 4px 24px rgba(91, 71, 239, 0.15);
}

/* ── Card scrollable body ─────────────────────────────────────────────── */

.workspace-card__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* ── Card footer ──────────────────────────────────────────────────────── */

.workspace-card__footer {
	flex-shrink: 0;
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--colorNeutralStroke2, #e8e8e8);
	background: var(--colorNeutralBackground2, #fafafa);
}

[data-theme='dark'] .workspace-card__footer {
	background: rgba(19, 16, 36, 0.6);
	border-top-color: rgba(124, 111, 247, 0.15);
}

.workspace-card__footer-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* "+ Add more images" ghost link */
.workspace-card__add-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 6px 0 2px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--colorBrandForeground1, #5b47ef);
	font-size: 12px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s ease, opacity 0.15s ease;
	white-space: nowrap;
}

.workspace-card__add-link:hover {
	background: var(--colorBrandBackground2, rgba(91, 71, 239, 0.08));
}

.workspace-card__add-link:active {
	opacity: 0.7;
}

/* Spacer pushes settings to right */
.workspace-card__footer-spacer {
	flex: 1;
}

/* Pagination gets its own row so wide page sets never displace the settings button */
.workspace-card__footer-pagination {
	display: flex;
	justify-content: center;
}

/* ── Primary Insert CTA ───────────────────────────────────────────────── */

.workspace-card__insert-btn {
	width: 100% !important;
	min-height: 40px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	letter-spacing: 0.01em !important;
	transition:
		background-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.1s ease !important;
}

.workspace-card__insert-btn:not(:disabled):hover {
	box-shadow: 0 4px 18px rgba(91, 71, 239, 0.35) !important;
}

.workspace-card__insert-btn:not(:disabled):active {
	transform: scale(0.985) !important;
}

/* Basic design system tokens (light + dark) */
:root {
	--color-bg: #ffffff;
	--color-bg-alt: #f5f7fa;
	--color-fg: #1b1d21;
	--color-fg-subtle: #4b5563;
	--color-border: #d0d7e2;
	--color-accent: #2563eb;
	--color-accent-hover: #1d4ed8;
	/* Header gradient tokens */
	--header-grad-start: #2563eb;
	--header-grad-end: #1e40af;
	--header-grad-hover-start: #3b82f6;
	--header-grad-hover-end: #1e40af;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--radius-sm: 4px;
	--radius-md: 8px;
	--transition-fast: 120ms ease;
}

[data-theme='dark'] {
	--color-bg: #1e1f24;
	--color-bg-alt: #2a2c33;
	--color-fg: #f3f4f6;
	--color-fg-subtle: #9ca3af;
	--color-border: #3a3d45;
	--color-accent: #3b82f6;
	--color-accent-hover: #60a5fa;
	--header-grad-start: #1e3a8a; /* deeper blue */
	--header-grad-end: #0f172a; /* slate/navy */
	--header-grad-hover-start: #1e40af;
	--header-grad-hover-end: #0f172a;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
}

body,
html,
#container {
	background: var(--color-bg);
	color: var(--color-fg);
}

.theme-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	padding: 4px 8px;
	gap: 8px;
}

.theme-header button {
	background: var(--color-accent);
	color: #fff;
	border: none;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 12px;
	line-height: 1.2;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-fast);
}

.theme-header button:hover {
	background: var(--color-accent-hover);
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
#container > div {
  height: 100%;
  width: 100%;
}
.ms-welcome {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-height: 500px;
  min-width: 320px;
  overflow: auto;
  overflow-x: hidden;
}
.ms-welcome__progress,
.ms-welcome__header {
  padding: 20px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.ms-welcome__progress h1,
.ms-welcome__header h1 {
  margin-top: 30px;
  text-align: center;
}
.ms-welcome__progress {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.ms-welcome__progress h1 {
  margin-bottom: 80px;
}
.ms-welcome__progress .ms-Spinner .ms-Spinner-label {
  color: #999;
}
.ms-welcome__progress .ms-Spinner .ms-Spinner-circle {
  color: #333333;
  border: 1.5px solid #ccc;
  border-top-color: #333333;
}
.ms-welcome__main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex: 1 0 0;
  padding: 30px 20px;
}
.ms-welcome__main h2 {
  width: 100%;
  text-align: center;
}
.ms-welcome__features {
  list-style-type: none;
  margin-top: 30px;
  margin-bottom: 30px;
}
.ms-welcome__features.ms-List .ms-ListItem {
  padding: 0px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
  font-size: 14pt;
  margin-right: 10px;
}
.ms-welcome__action {
  margin-top: 30px;
}
@media (min-width: 0) and (max-width: 350px) {
  .ms-welcome__features {
    width: 100%;
  }
}


/*# sourceMappingURL=app.fbf60099ec1dffe77694.css.map*/