/*!
Theme Name: _System by Architech
Theme URI:	https://architech.vc/_system
Version:	3.4.0
Author:		Architech
*/

/* ----- MSG ----- */

.modal-backdrop {
	--bs-backdrop-zindex: 999990;
	--bs-backdrop-bg: rgba(32, 32, 32, 0.9);
	z-index: 999990 !important;
}

.modal-backdrop.show {
	z-index: 999990 !important;
}

#msg-modal {
	--bs-modal-zindex: 999999;
	z-index: 999999 !important;
}

#msg-modal .modal-dialog {
	position: relative;
	margin-top: 30px !important;
	z-index: 1000000 !important;
}
.modal-body h4 {
	color: #202020 !important
}
.modal-body p {
	color: #202020 !important
}
.modal-body .btn {
	color: #f1f1f1 !important;
	border-color: #202020 !important;
	background-color: #202020 !important;
}
.progress {
	padding: 0px;
	background: rgba(35, 35, 35, 1);
	border-radius: 0px;
}
.progress-bar {	
	height: 10px;
	background: rgba(35, 35, 35, 1);
	border-radius: 0px; 
	transition: 0.4s linear;  
	transition-property: width, background-color;    
}

/* ----- MSG AI PROGRESS ----- */

#msg-modal .ai-shell {
	overflow: hidden;
}

#msg-modal .ai-fade {
	width: 100%;
	overflow: hidden;
}

#msg-modal .progress {
	height: 10px;
	overflow: hidden;
	padding: 0;
	background: rgba(35, 35, 35, 1);
	border-radius: 0;
}

#msg-modal .progress-bar {
	position: relative;
	width: 0;
	height: 10px;
	border-radius: 0;
	transition: none;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--ai-accent, #7c3aed) 72%, black),
		var(--ai-accent, #7c3aed),
		color-mix(in srgb, var(--ai-accent, #7c3aed) 72%, white),
		color-mix(in srgb, var(--ai-accent, #7c3aed) 88%, white)
	);
	animation: system-msg-progress max(0.1s, calc(var(--msg-timeout, 5s) - 0.5s)) cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-play-state: paused;
}

#msg-modal.msg-progress-active .progress-bar {
	animation-play-state: running;
}

#msg-modal .ai {
	width: 100%;
	height: 100%;
}

@keyframes system-msg-progress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

/* ----- MSG PROGRESS PULSE ----- */

#msg-modal .progress-bar {
	position: relative;
	overflow: hidden;
}

#msg-modal .progress-bar::before,
#msg-modal .progress-bar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 28%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--ai-accent) 72%, white) 35%,
		color-mix(in srgb, var(--ai-accent) 58%, white) 50%,
		color-mix(in srgb, var(--ai-accent) 72%, white) 65%,
		transparent 100%
	);
	opacity: 0.62;
	transform: translate3d(-140%, 0, 0);
	will-change: transform;
	pointer-events: none;
}

#msg-modal .progress-bar::before {
	animation: system-msg-pulse-forward 2.2s linear infinite;
}

#msg-modal .progress-bar::after {
	animation: system-msg-pulse-forward 2.2s linear -1.1s infinite;
	opacity: 0.42;
}

@keyframes system-msg-pulse-forward {
	from {
		transform: translate3d(-140%, 0, 0);
	}
	to {
		transform: translate3d(470%, 0, 0);
	}
}