/* © 2025 Mark Kats. Все права защищены. Копирование и переработка запрещены. */

:root{
	--toast-radius:14px;
	--toast-gap:12px;
	--toast-pad-y:12px;
	--toast-pad-x:14px;
	--toast-shadow:0 10px 28px rgba(0,0,0,0.32),0 2px 8px rgba(0,0,0,0.22);
	--toast-bg:rgba(0,0,0,0.50);
	--toast-fg:#fff;
	--toast-border:rgba(255,255,255,0.20);
	--toast-info-tint:#2C65D2;
	--toast-success-tint:#009555;
	--toast-warning-tint:#FFA500;
	--toast-error-tint:#D81E00;
	--indicator-w:9px;
}

.toast-container{
	position:fixed;
	left:calc(env(safe-area-inset-left) + 16px);
	bottom:calc(env(safe-area-inset-bottom) + 16px);
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:var(--toast-gap);
	max-width:min(92vw,520px);
	z-index:100001;
	pointer-events:none;
}

.toast{
	pointer-events:all;
	position:relative;
	display:inline-grid;
	align-self:flex-start;
	width:fit-content;
	max-width:min(92vw,520px);
	grid-template-columns:auto 1fr;
	align-items:center;
	gap:10px;
	padding:var(--toast-pad-y) var(--toast-pad-x);
	border-radius:var(--toast-radius);
	background:linear-gradient(0deg, rgba(255,255,255,.030), rgba(255,255,255,.030)), var(--toast-bg);
	color:var(--toast-fg);
	box-shadow:var(--toast-shadow);
	backdrop-filter:blur(8px) saturate(115%);
	transform:translateY(10px);
	opacity:0;
	transition:transform .22s ease,opacity .22s ease;
	contain:content;
	--accent:var(--toast-info-tint);
	--icon-color:var(--accent);
}

.toast.enter{transform:translateY(10px);opacity:0;}
.toast:not(.enter){transform:translateY(0);opacity:1;}
.toast.leaving{opacity:0;transform:translateY(10px);}
.toast.dragging{transition:none;}

.toast::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:var(--toast-radius);
	pointer-events:none;
	box-shadow:inset 0 0 0 1px var(--toast-border);
}

.toast::after{
	content:"";
	position:absolute;
	left:0;top:0;bottom:0;
	width:var(--indicator-w);
	border-radius:var(--toast-radius) 0 0 var(--toast-radius);
	background:color-mix(in oklab, var(--accent), #000 18%);
}

.toast.info{--accent:var(--toast-info-tint);}
.toast.success{--accent:var(--toast-success-tint);}
.toast.warning{--accent:var(--toast-warning-tint);}
.toast.error{--accent:var(--toast-error-tint);}

.toast-icon{
	width:20px;
	height:20px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:none !important;
	border:none !important;
	box-shadow:none !important;
	color:var(--icon-color);
}

.toast-icon svg{
	display:block;
	width:18px;
	height:18px;
	overflow:visible;
	fill:none !important;
	stroke:currentColor !important;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	background:none !important;
}

.toast-content{
	display:grid;
	grid-template-columns:1fr auto;
	grid-template-rows:auto auto;
	align-items:center;
	column-gap:8px;
	row-gap:6px;
	min-width:220px;
	max-width:min(86vw,460px);
}

.toast-message{
	grid-column:1/2;
	font-family:"IBM Plex Sans Condensed",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	font-size:.95rem;
	line-height:1.25rem;
	white-space:pre-line;
	word-break:break-word;
	color:rgba(255,255,255,.92);
}

.toast-progress{
	grid-column:1/3;
	position:relative;
	height:3px;
	border-radius:2px;
	background:rgba(255,255,255,.085);
	overflow:hidden;
}

.toast-progress::after{
	content:"";
	position:absolute;
	left:0;top:0;bottom:0;width:100%;
	background:linear-gradient(90deg, rgba(255,255,255,.40), rgba(255,255,255,.12));
	animation:toast-progress var(--dur,4500ms) linear forwards;
}

@keyframes toast-progress{
	from{transform:translateX(0)}
	to{transform:translateX(-100%)}
}

.toast.paused .toast-progress::after{
	animation-play-state:paused
}

.toast-action{
	justify-self:start;
	padding:6px 10px;
	border-radius:10px;
	border:1px solid rgba(255,255,255,.18);
	background:rgba(255,255,255,.055);
	color:#fff;
	font-size:.85rem;
	cursor:pointer;
	transition:transform .15s ease,background .15s ease,border-color .15s ease;
}

.toast-action:hover{
	transform:translateY(-1px);
	background:rgba(255,255,255,.10);
	border-color:rgba(255,255,255,.24);
}

@media (max-width:767px){
	.toast-container{
		left:7px;
		bottom:calc(env(safe-area-inset-bottom) + 7px);
		align-items:stretch;
	}
	.toast{
		display:grid;
		width:auto;
		max-width:none;
	}
	.toast-content{
		max-width:100%;
	}
}

@media (prefers-reduced-motion:reduce){
	.toast{transition:none}
	.toast-progress::after{animation:none;display:none}
}

#notification{display:none !important;}