@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import "_include.scss";

.kitan-bot-widget {
	font-family: $font-main;
	font-size: $font-size-body-m;
	font-weight: $font-weight-regular;
	line-height: 1.5;
	color: $neutral-800;

	position: fixed;
	bottom: 24px;
	right: 16px;
	width: 100%;
	max-width: 450px;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 40px;

	font-size: 14px;

	@include media-down(xs) {
		bottom: 16px;
		right: 8px;
		max-width: 358px;
		gap: 16px;
		max-height: 640px;
	}

	* {
		box-sizing: border-box;
		font-family: Montserrat;
	}

	svg {
		font-size: revert;
	}


	h1 {
		font-size: $font-size-h1;
		font-weight: $font-weight-regular;
	}

	h2 {
		font-size: $font-size-h2;
		font-weight: $font-weight-regular;
	}

	h3 {
		font-size: $font-size-h3;
		font-weight: $font-weight-regular;
	}

	h4 {
		font-size: $font-size-h4;
		font-weight: $font-weight-bold;
	}

	h1, h2, h3, h4, h5, h6 {
		margin: 0;
	}

	.kb {
		&-body-l {
			font-size: $font-size-body-l;
			font-weight: $font-weight-regular;
		}

		&-body-m {
			font-size: $font-size-body-m;
			font-weight: $font-weight-regular;
		}

		&-body-s {
			font-size: $font-size-body-s;
			font-weight: $font-weight-regular;
		}
	}

	a {
		text-decoration: none;
		color: $primary-1;
	}

	.kitan-bot-container,
	.kitan-bot-container-fadeshadow {
		position: relative;
		width: 100%;
		max-width: 450px;
		height: 100vh;
		max-height: 738px;
		background: $neutral-100;
		overflow: hidden;
		border-radius: 15px;
		opacity: 0;
		visibility: hidden;
		transition-duration: .15s;
		transition-property: opacity, visibility;

		display: flex;
		flex-direction: column;
		gap: 24px;
		justify-content: space-between;

		@include media-down(xs) {
			gap: 0;
			max-height: 564px;
		}
	}

	.kitan-bot-container {
		z-index: 2;

		&.fadein {
			opacity: 1;
			visibility: visible;
		}
	}

	.kitan-bot-container-fadeshadow {
		position: absolute;
		z-index: 1;
		box-shadow: 0 0 0px 0px rgba(0, 0, 0, .1);
		transition-duration: .15s;
		opacity: 1;
		right: 0;
		bottom: 120px;
		border-radius: 20px;
		visibility: visible;
		transition-property: bottom, right, border-radius, height, width, box-shadow;
		
		@include media-down(xs) {
			bottom: 68px;
		}

		&.fadeout {
			box-shadow: 0 0 5px 5px rgba(0, 0, 0, .1);
			width: 60px;
			height: 60px;
			bottom: 10px;
			right: 10px;
			border-radius: $bord-rad-b;

			@include media-down(xs) {
				width: 40px;
				height: 40px;
			}
		}
	}

	.waiting {
		display: inline-flex;
		gap: 8px;
		align-items: center;
		justify-content: center;
	}

	.waiting span {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #A0A3BD;
		animation: pulse 1.2s infinite ease-in-out;
	}

	.waiting span:nth-child(1) {
		animation-delay: 0s;
	}
	.waiting span:nth-child(2) {
		animation-delay: 0.2s;
	}
	.waiting span:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes pulse {
		0%, 80%, 100% {
			background-color: #A0A3BD;
			transform: scale(1);
		}
		40% {
			background-color: #4E4B66;
			transform: scale(1.2);
		}
	}

}