/* ==================================================================
   AI API Gateway — Notification System stylesheet
   ==================================================================
   Deliberately self-contained (its own tokens, not the panel's
   `.aiapi-panel` custom properties) so toasts look identical and
   correct whether they're triggered from the public panel, the
   wp-admin screens, or a page that hasn't finished loading the rest
   of the panel's styles yet.
   ================================================================== */

.aiapi-toast-viewport {
	position: fixed;
	top: 16px;
	inset-inline-start: 50%;
	transform: translateX(50%) translateY(0) scale(1);
	z-index: 999999;
	width: min(380px, calc(100vw - 24px));
	pointer-events: none;
}

.aiapi-toast {
	/* Type accent, tinted background, and border — overridden per type below.
	   These are solid (opaque) colors on purpose: an rgba() with low alpha
	   would let whatever is behind the toast show through it. */
	--aiapi-toast-accent: #2563eb;
	--aiapi-toast-accent-bg: #e6ecfd;
	--aiapi-toast-accent-border: #c0d1f9;

	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	top: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	background: var(--aiapi-toast-accent-bg);
	border: 1px solid var(--aiapi-toast-accent-border);
	border-radius: 14px;
	box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 8px -2px rgba(15, 23, 42, 0.08);
	padding: 12px 14px;
	padding-inline-end: 26px;
	font: 500 13px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Vazirmatn, Roboto, sans-serif;
	color: var(--aiapi-toast-accent);
	opacity: 0;
	pointer-events: auto;
	transform: translateY(-140%);
	transition: transform 0.34s cubic-bezier(.22, .95, .32, 1.1), opacity 0.26s ease, box-shadow 0.2s ease;
	will-change: transform, opacity;
}

.aiapi-toast.is-visible {
	opacity: 1;
}

.aiapi-toast.is-leaving {
	opacity: 0 !important;
	transform: translateY(-140%) scale(0.94) !important;
}

.aiapi-toast.is-behind {
	box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.16);
}

.aiapi-toast.is-behind::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(15, 23, 42, 0.035);
	pointer-events: none;
}

.aiapi-toast--success { --aiapi-toast-accent: #16a34a; --aiapi-toast-accent-bg: #e3f6ea; --aiapi-toast-accent-border: #b7e4c7; }
.aiapi-toast--error   { --aiapi-toast-accent: #dc2626; --aiapi-toast-accent-bg: #fce9e9; --aiapi-toast-accent-border: #f6bcbc; }
.aiapi-toast--warning { --aiapi-toast-accent: #d97706; --aiapi-toast-accent-bg: #fcf0e2; --aiapi-toast-accent-border: #f5d6b4; }
.aiapi-toast--info    { --aiapi-toast-accent: #2563eb; --aiapi-toast-accent-bg: #e6ecfd; --aiapi-toast-accent-border: #c0d1f9; }

.aiapi-toast-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid var(--aiapi-toast-accent);
	color: var(--aiapi-toast-accent);
	margin-inline-start: 4px;
}

.aiapi-toast-icon svg {
	width: 14px;
	height: 14px;
}

.aiapi-toast-body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 1px;
}

.aiapi-toast-title {
	font-weight: 700;
	color: var(--aiapi-toast-accent);
	margin-bottom: 2px;
}

.aiapi-toast-message {
	color: var(--aiapi-toast-accent);
	word-break: break-word;
}

.aiapi-toast-close {
	position: absolute;
	top: -8px;
	inset-inline-end: -8px;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 1.5px solid var(--aiapi-toast-accent);
	background: var(--aiapi-toast-accent-bg);
	color: var(--aiapi-toast-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
	transition: background 0.15s ease, color 0.15s ease;
}

.aiapi-toast-close:hover {
	background: var(--aiapi-toast-accent);
	color: #ffffff;
}

.aiapi-toast-close svg {
	width: 11px;
	height: 11px;
}

@media (max-width: 480px) {
	.aiapi-toast-viewport {
		top: 10px;
		width: calc(100vw - 20px);
	}
}