.kitan-bot-container .kb-header {
	border-bottom: 1px solid $neutral-500-25;
	background: $primary-1;
	color: $neutral-100;

	.kb-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;	
		align-items: center;
		transition: gap .3s;

  	@include media-down(xs) {
  		gap: 8px !important;
  	}
	}

	.head-info {
		display: flex;
		flex-direction: column;
		transition: gap .3s;
		// transition-delay: 0;


		.header-img {
			visibility: visible;
			opacity: 1;
			height: 60px;

			transition-duration: .3s;
			// transition-delay: 0;
			transition-property: visibility, opacity, height;


			.kb-icon {
				width: 60px;
				height: 100%;
				transition-duration: .3s;
				// transition-delay: 0;
				transition-property: height, width;
			}
		}

		.heading {
			font-size: 23px;
			font-weight: 700;
			margin: 0;
			transition: font-size .3s;
			// transition-delay: 0;
		}
	}

	.chat-control-btns {
		transition-duration: .3s;
		transition-delay: 0;
		transition-property: opacity, visibility;

		.do-rate {
			display: flex;
			align-items: center;
			gap: 4px;
		}

		button {
			display: flex;
			width: 40px;
			height: 40px;
			justify-content: center;
			align-items: center;
			gap: 8px;
			border-radius: 100%;
			border: 0;
			background: none;
			transition: background .2s;

			&:hover, &.active {
				background: $primary-1-dark;
			}
		}
	}


	&.kb-state {
		&-main {
			padding: 32px 24px;
			
			.kb-row	{
				gap: 0px;
			}

			.head-info {
				gap: 16px;
			}

			.chat-control-btns {
				visibility: hidden;
				opacity: 0;

				@include media-down(xs) {
					width: 0;
				}
			}
		}

		&-compact {
			padding: 16px;

			.kb-row	{
				gap: 40px;
			}

			.head-info {
				gap: 0;
				// transition-delay: .3s;

				.header-img {
					visibility: hidden;
					opacity: 0;
					height: 0;
					// transition-delay: .3s;

					.kb-icon {
						width: 0;
						height: 0;
						// transition-delay: .3s;
					}
				}

				.heading {
					font-size: $font-size-h4;
					@include media-down(xs) {
						font-size: 15px;
					}
					// transition-delay: .3s;
				}
			}

			.chat-control-btns {
				visibility: visibility;
				opacity: 1;
				width: initial;
				transition-delay: .3s;
			}
		}
	}
}