/* Toaster wrapper */
.ai-toaster {
	position: fixed;
	z-index: 10000;
	width: 356px;
	max-width: calc(100vw - 32px);
	pointer-events: none;
}

.ai-toaster[data-pos='top-center'] {
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
}

.ai-toaster[data-pos='top-left'] {
	top: 24px;
	left: 20px;
}

.ai-toaster[data-pos='top-right'] {
	top: 24px;
	right: 20px;
}

.ai-toaster[data-pos='bottom-center'] {
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
}

.ai-toaster[data-pos='bottom-left'] {
	bottom: 24px;
	left: 20px;
}

.ai-toaster[data-pos='bottom-right'] {
	bottom: 24px;
	right: 20px;
}

/* Toast list */
.ai-toast-list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Individual toast */
.ai-toast {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	background: var(--ai-toast-bg);
	border: 1px solid var(--ai-toast-border);
	border-radius: var(--ai-toast-radius);
	box-shadow: var(--ai-toast-shadow);
	cursor: default;
	user-select: none;
	pointer-events: auto;
	backface-visibility: hidden;
	font-family: var(--ii-font-body, Inter, sans-serif);
	overflow: hidden;
	transition:
		transform 400ms cubic-bezier(0.21, 1.02, 0.73, 1),
		opacity 400ms ease,
		height 400ms cubic-bezier(0.21, 1.02, 0.73, 1);
}

.ai-toaster[data-pos^='bottom'] .ai-toast::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 8px;
}

.ai-toaster[data-pos^='top'] .ai-toast::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 8px;
}

/* Swiping: disable transition so the toast tracks the pointer exactly */
.ai-toast[data-swiping='true'] {
	transition: opacity 150ms ease;
	cursor: grabbing;
}

/* Icon */
.ai-toast-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}

.ai-toast-icon svg {
	width: 16px;
	height: 16px;
}

.ai-toast[data-type='error'] .ai-toast-icon {
	color: var(--ai-toast-error);
}

/* Body */
.ai-toast-body {
	flex: 1;
	min-width: 0;
}

.ai-toast-title {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ai-toast-text-primary);
}

.ai-toast-desc {
	font-size: 12.5px;
	line-height: 1.45;
	margin-top: 2px;
	color: var(--ai-toast-text-secondary);
}

/* Close button */
.ai-toast-close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ai-toast-text-secondary);
	cursor: pointer;
	padding: 0;
	opacity: 0;
	transition:
		opacity 0.15s,
		background 0.15s,
		border-color 0.15s,
		color 0.15s;
}

.ai-toast-close svg {
	width: 10px;
	height: 10px;
}

.ai-toast:hover .ai-toast-close,
.ai-toast-list[data-expanded='true'] .ai-toast-close {
	opacity: 1;
}

.ai-toast-close:hover {
	background: var(--ai-toast-close-hover);
	border-color: var(--ai-toast-border);
	color: var(--ai-toast-text-primary);
}

.ai-toast-action {
	display: inline-flex;
	align-items: center;
	margin-top: 6px;
	padding: 4px 10px;
	border-radius: 5px;
	background: var(--ai-toast-action-bg);
	border: 1px solid var(--ai-toast-action-border);
	color: inherit;
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 150ms,
		border-color 150ms;
}

.ai-toast-action:hover {
	background: var(--ai-toast-action-hover-bg);
	border-color: var(--ai-toast-action-hover-border);
	color: inherit;
}

/* Multi-button actions row */
.ai-toast-actions {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.ai-toast-action-btn {
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: var(--ii-radius-sm, 6px);
	cursor: pointer;
	border: 1px solid transparent;
	line-height: 1.4;
	font-family: var(--ii-font-body, Inter, sans-serif);
	transition:
		background 0.15s ease,
		opacity 0.15s ease;
}

.ai-toast-action-btn--default {
	background: transparent;
	border-color: var(--ai-toast-btn-border);
	color: inherit;
}

.ai-toast-action-btn--default:hover {
	background: var(--ai-toast-btn-hover-bg);
}

.ai-toast-action-btn--primary {
	background: var(--ii-accent, #2563eb);
	color: #fff;
	border-color: transparent;
}

.ai-toast-action-btn--primary:hover {
	opacity: 0.88;
}

/* Upload-progress track (type:'progress' toasts) */
.ai-toast-upload-track {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 0 0 var(--ai-toast-radius) var(--ai-toast-radius);
	background: var(--ai-toast-progress-track);
	overflow: hidden;
}

.ai-toast-upload-fill {
	height: 100%;
	background: var(--ai-toast-upload-fill);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variant Picker Modal (.ii-vp-*) - opened from "Compare images" in ⋮ popper or AIImageViewer compare button. */