/* ============================================================================
   The one toast stack (#4108) - bottom-right, newest on top, max 3.
   Rendered by public/js/eq-toast.js; visuals from the approved v2 spec
   (docs/mockups/design-system-v2.html#feedback).

   Its own file (not tokens.css) because the customer-facing widget layouts
   render the same stack and must not take the portal chrome that ships with
   it. Pair it with base-tokens.css, which every layout that links this one
   also links - that is where the --ed-* values come from.
   ========================================================================== */

.ed-toasts {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: var(--ed-z-toast);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
	pointer-events: none;
}
.ed-toasts > * { pointer-events: auto; }

.ed-toast {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	background: var(--ed-surface);
	border: 1px solid var(--ed-border);
	border-left: 3px solid var(--ed-success);
	border-radius: 11px;
	box-shadow: var(--ed-shadow-pop);
	padding: 12px 14px;
	width: 320px;
	position: relative;
	overflow: hidden;
	animation: ed-toast-in var(--ed-fast);
}
.ed-toast-icon {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 800;
	flex: 0 0 26px;
}
.ed-toast-body { min-width: 0; }
.ed-toast-title { display: block; font-size: 13px; font-weight: 700; color: var(--ed-ink); }
.ed-toast-msg { font: var(--ed-small-12); color: var(--ed-muted); display: block; }
.ed-toast-action {
	color: var(--ed-navy-600);
	font-weight: 700;
	font-size: 12px;
	margin-top: 3px;
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.ed-toast-x {
	margin-left: auto;
	color: var(--ed-faint);
	background: none;
	border: none;
	font-size: 12px;
	padding: 0;
	cursor: pointer;
	flex: 0 0 auto;
}
.ed-toast-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	background: var(--ed-border);
	width: 100%;
}
.ed-toast-bar i {
	display: block;
	height: 100%;
	background: var(--ed-success);
	animation: ed-toast-run 5s linear forwards;
}
.ed-toast.is-success { border-left-color: var(--ed-success); }
.ed-toast.is-success .ed-toast-icon { background: var(--ed-success-soft); color: var(--ed-success); }
.ed-toast.is-warning { border-left-color: var(--ed-warning); }
.ed-toast.is-warning .ed-toast-icon { background: var(--ed-warning-soft); color: var(--ed-warning); }
.ed-toast.is-warning .ed-toast-bar i { background: var(--ed-warning); }
.ed-toast.is-error { border-left-color: var(--ed-danger); }
.ed-toast.is-error .ed-toast-icon { background: var(--ed-danger-soft); color: var(--ed-danger); }
.ed-toast.is-info { border-left-color: var(--ed-navy-600); }
.ed-toast.is-info .ed-toast-icon { background: var(--ed-navy-100); color: var(--ed-navy-600); }
.ed-toast.is-info .ed-toast-bar i { background: var(--ed-navy-600); }

/* The quiet auto-save confirmation. */
.ed-toast-saved {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--ed-ink);
	color: var(--ed-surface);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 700;
	box-shadow: var(--ed-shadow-pop);
	animation: ed-toast-in var(--ed-fast);
}

.ed-toast.is-out,
.ed-toast-saved.is-out {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 180ms ease, transform 180ms ease;
}

@keyframes ed-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ed-toast-run { from { width: 100%; } to { width: 0; } }

@media (max-width: 640px) {
	.ed-toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
	.ed-toast { width: auto; }
}

/* The widget puts the stack bottom-LEFT. Its bottom-right corner belongs to the
   AI chat launcher and the cart drawer trigger, and a toast that lands on top of
   either hides its own dismiss button. The portal keeps the right corner. */
body.eq-widget .ed-toasts {
	left: 16px;
	right: auto;
	align-items: flex-start;
}

@media (max-width: 640px) {
	/* Full width here, so lift the stack clear of the launcher instead. */
	body.eq-widget .ed-toasts { left: 12px; right: 12px; bottom: 88px; }
}