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

:root{
	--toast-radius:14px;
	--toast-gap:12px;
	--toast-pad-y:12px;
	--toast-pad-x:14px;
	--toast-shadow:0 10px 30px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.25);
	--toast-bg:rgba(0, 0, 0, 0.57);
	--toast-fg:#fff;
	--toast-border:rgba(255, 255, 255, 0.57);
	--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:var(--toast-bg);
	color:var(--toast-fg);
	box-shadow:var(--toast-shadow);
	backdrop-filter:blur(8px);
	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 2px 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:var(--accent);
}

.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;
}

.toast-progress{
	grid-column:1/3;
	position:relative;height:3px;border-radius:2px;
	background:rgba(255,255,255,.10);overflow:hidden;
}
.toast-progress::after{
	content:"";
	position:absolute;left:0;top:0;bottom:0;width:100%;
	background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.20));
	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 var(--toast-border);
	background:rgba(255,255,255,.06);color:#fff;
	font-size:.85rem;cursor:pointer;
	transition:transform .15s ease,background .15s ease;
}
.toast-action:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}

@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;}