.kb-body {
	min-height: 270px;
	height: 100%;
	padding-left: 24px;
	padding-right: 8px;

  @include media-down(xs) {
		padding-left: 8px;
		padding-right: 8px;
  }

	.chat-container {
		max-height: 100%;
		height: 100%;
		overflow-y: auto;
		padding-right: 8px;

		display: flex;
		flex-direction: column;
		gap: 24px;

		@include media-down(xs) {
			gap: 16px;
			padding-top: 16px;
			padding-bottom: 16px;
  	}

		.message {
			display: flex;
			flex-direction: row;
			gap: 8px;

			.bubble {
				h1 {
					font-size: $font-size-h3;
					font-weight: 700;
					line-height: 38px;
				}

				h2 {
					font-size: $font-size-h4;
					font-weight: 700;
					line-height: 30px;
				}

				h3 {
					font-size: $font-size-body-xs;
					font-weight: 700;
					line-height: 22px;
				}

				p {
					&:first-of-type {
						margin-top: 0;
					}

					&:last-of-type {
						margin-bottom: 0;
					}

					a {
						color: #1A0DAB;
					}
				}

				ol {
					padding-left: 20px;
				}

				ul li::marker {
					font-size: 12px;
				}
				
			}

			.leftside {
				.avatar {

				}
			}

			.rightside {
				display: flex;
				flex-direction: column;
				gap: 6px;

				.head {
					.name {
						color: $neutral-800;
						font-size: $font-size-body-xs;
						font-weight: 400;
					}
				}

				.bubble {
					width: 290px;
				}

				.foot {	
					display: flex;
					flex-direction: row;
					justify-content: flex-end;

					.timestamp {
						color: $neutral-500;
						font-size: $font-size-body-xs;
						font-weight: 400;
					}
				}
			}

			&.state-waiting .bubble {
				width: 85px;
			}

			
			&.agent {
				.bubble {

					&.first {
						border-radius: $border-rad-1;
					}
				}

				.call-meat {
					font-size: $font-size-body-xs;
				}
			}

			&.user {
				justify-content: flex-end;

				.bubble {
					border: 1px solid $neutral-500-25;
					background: $primary-1;
					color: $neutral-100;

					&.first {
						border-radius: $border-rad-2;
					}
				}
			}
		}

		 &::-webkit-scrollbar {
				width: 8px;
			}

			&::-webkit-scrollbar-track {
				border-radius: 4px;
				background: $neutral-300;
			}

			&::-webkit-scrollbar-thumb {
				border-radius: 4px;
				background: $neutral-500;
			}

			&::-webkit-scrollbar-thumb:hover {
				background: $neutral-600;
			}

	}
}