<button class="kitan-bot-btn kb-state-closed">
	<svg class="kb-icon for-opened" width="42" height="42">
		<use href="#kb-cross"></use>
	</svg>
	<svg class="kb-icon for-closed" width="48" height="48">
		<use href="#kb-support"></use>
	</svg>
</button>

<script>
	document.addEventListener("DOMContentLoaded", e => {
		document.querySelector(".kitan-bot-btn").addEventListener("click", e => {
			const self = e.currentTarget;
			if(self.classList.contains("kb-state-closed")) {
				kitanBotOpen();
			} else {
				kitanBotClose();
			}
		});
	});

	function kitanBotOpen() {
		const container = document.querySelector(".kitan-bot-container");
		const shadow = document.querySelector(".kitan-bot-container-fadeshadow");
		const btn = document.querySelector(".kitan-bot-btn");

		restoreMsgStorage();

		shadow.classList.remove("fadeout");
		setTimeout(() => {
			container.classList.add("fadein");
		}, 150);

		btn.classList.remove("kb-state-closed");
		btn.classList.add("kb-state-opened");
		setTimeout(() => {
			scrollMsgsContainerDown();
		}, 100);
	}

	function kitanBotClose() {
		const container = document.querySelector(".kitan-bot-container");
		const shadow = document.querySelector(".kitan-bot-container-fadeshadow");
		const btn = document.querySelector(".kitan-bot-btn");

		container.classList.remove("fadein");
		setTimeout(() => {
			shadow.classList.add("fadeout");
		}, 150);
		
		btn.classList.remove("kb-state-opened");
		btn.classList.add("kb-state-closed");
	}
</script>