<div class="kb-body">
	<div class="chat-container">

		<!-- <button class="kb-btn">Default</button>
		<button class="kb-btn large">Large btn</button>
		<button class="kb-btn large disabled">Large btn</button>
		<button class="kb-btn tricky">Tricky</button>
		<button class="kb-btn tricky">
			<svg class="kb-icon" width="16" height="16">
				<use href="#kb-star"></use>
			</svg>
			Tricky
		</button>
		<a href="#" class="kb-btn tricky">
			Купити
			<svg class="kb-icon" width="24" height="24">
				<use href="#kb-arrow-right"></use>
			</svg>
		</a> -->

		<div class="message agent assistant">
			<div class="leftside">
				<div class="avatar">
					<svg class="kb-icon" width="32" height="32">
						<use href="#kb-redes-sm-avatar"></use>
					</svg>
				</div>
			</div>

			<div class="rightside">
				<div class="head">
					<div class="name">Bot</div>
				</div>
				<div class="kb-card bubble first">
					Звісно! Ось список частих запитань, які мені ставлять:
				</div>
				<div class="kb-card bubble">
					Оберіть категорію, яка Вас цікавить, і ми допоможемо вирішити питання
				</div>
				<div class="foot">
					<span class="timestamp">15:47</span>
				</div>
			</div>
		</div>

		<div class="message agent assistant state-waiting">
			<div class="leftside">
				<div class="avatar">
					<svg class="kb-icon" width="32" height="32">
						<use href="#kb-redes-sm-avatar"></use>
					</svg>
				</div>
			</div>

			<div class="rightside">
				<div class="head">
					<div class="name">Bot</div>
				</div>
				<div class="kb-card bubble first">
					<span class="waiting">
						<span></span>
						<span></span>
						<span></span>
					</span>
				</div>
				<div class="foot">
					<span class="timestamp">15:47</span>
				</div>
			</div>
		</div>

		<div class="message user">
			<div class="leftside">
				<div class="avatar">
					<svg class="kb-icon" width="16" height="16">
						<use href="#kb-user"></use>
					</svg>
				</div>
			</div>

			<div class="rightside">
				<div class="kb-card bubble first">
					Цікавить програма курсу Ревіталізація шкіри голови та волосся
				</div>
				<div class="foot">
					<span class="timestamp">15:47</span>
				</div>
			</div>
		</div>

		<div class="message agent">
			<div class="leftside">
				<div class="avatar">
					<svg class="kb-icon" width="32" height="32">
						<use href="#kb-redes-sm-avatar"></use>
					</svg>
				</div>
			</div>

			<div class="rightside">
				<div class="head">
					<div class="name">Bot</div>
				</div>
				<div class="kb-card bubble first">
					Звісно! Ось список частих запитань, які мені ставлять:
				</div>
				<div class="kb-card bubble">
					Оберіть категорію, яка Вас цікавить, і ми допоможемо вирішити питання
				</div>
				<button class="kb-btn large call-meat">Чат з консультантом</button>
				<div class="foot">
					<span class="timestamp">15:47</span>
				</div>
			</div>
		</div>

		@@include('frequently-asked.html')
		@@include('frequently-questions.html')
		@@include('event-card.html')
		@@include('product-card.html')
		@@include('auth-card.html')
		@@include('signup-card.html')

	</div>	
</div>