.toast-samples {
	display: grid;
	gap: 0.6rem;
	width: min(24rem, 100%);
}

.toast-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.toast-trigger {
	min-width: 9rem;
	padding: 0.7rem 1.25rem;
	font: inherit;
	font-weight: 600;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
	cursor: pointer;
	transition:
		transform 160ms var(--ease-out),
		border-color 160ms ease,
		background-color 160ms ease;
}
.toast-trigger:active {
	transform: scale(0.97);
}
.toast-trigger[data-toast='success'] { --tone: #30d158; }
.toast-trigger[data-toast='error'] { --tone: #ff453a; }
.toast-trigger[data-toast='info'] { --tone: #0a84ff; }
.toast-trigger[data-toast='warning'] { --tone: #ffd60a; }
.toast-trigger[data-toast='action'],
.toast-trigger[data-toast='sticky'] { --tone: var(--muted); }
.toast-trigger { border-left: 3px solid var(--tone, var(--line)); }
@media (hover: hover) and (pointer: fine) {
	.toast-trigger:hover {
		background: #111;
		border-color: var(--tone, var(--muted));
	}
}

/* Regione dei toast: in basso a destra su schermi larghi, a tutta larghezza
   in basso su telefono. */
.toast-region {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: min(22rem, calc(100vw - 2.5rem));
	pointer-events: none;
}

.toast {
	--tone: #0a84ff;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 0.9rem 1rem 1rem;
	overflow: hidden;
	color: var(--text);
	background: #141414;
	border: 1px solid var(--line);
	border-radius: 0.85rem;
	box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.55);
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition:
		opacity 220ms var(--ease-out),
		transform 220ms var(--ease-out);

	@starting-style {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.96);
	}
}
.toast[data-leaving] {
	opacity: 0;
	transform: translateY(0.5rem) scale(0.97);
	transition-duration: 160ms;
}
.toast--success { --tone: #30d158; }
.toast--error { --tone: #ff453a; }
.toast--info { --tone: #0a84ff; }
.toast--warning { --tone: #ffd60a; }
.toast--neutral { --tone: var(--muted); }

.toast__icon {
	width: 1.4rem;
	height: 1.4rem;
	color: var(--tone);
}
.toast__body {
	min-width: 0;
}
.toast__title {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
}
.toast__text {
	margin-top: 0.1rem;
	font-size: 0.85rem;
	color: #b8b8b8;
}
.toast__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.toast__btn {
	padding: 0.35rem 0.6rem;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--tone);
	background: transparent;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		transform 160ms var(--ease-out);
}
.toast__btn:active {
	transform: scale(0.95);
}
@media (hover: hover) and (pointer: fine) {
	.toast__btn:hover {
		background: rgb(255 255 255 / 0.08);
	}
}
.toast__close {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	color: var(--muted);
}
.toast__close svg {
	width: 1rem;
	height: 1rem;
}

/* Barra del tempo residuo: lineare (è un tempo che scorre) e in pausa
   con hover/focus, gestito da JS con animation-play-state. */
.toast__bar {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--tone);
	transform-origin: left;
	animation: toast-bar var(--duration, 5000ms) linear forwards;
}
.toast[data-paused] .toast__bar {
	animation-play-state: paused;
}
@keyframes toast-bar {
	to {
		transform: scaleX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.toast__bar {
		display: none;
	}
}

@media (max-width: 36rem) {
	.toast-region {
		right: 0.75rem;
		left: 0.75rem;
		bottom: 0.75rem;
		width: auto;
	}
}