/* CSS Document */

html {
	height: 100%;	
}

body {
	margin: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	line-height: 1.4;
	font-size: 18px;
	color: #444;
	height: 100%;
}



#chatSearch {
	background-color: #1A4FFF;
	padding: 12px 0 0 0;

	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	
	a {
		color: #fff;
	}

	li {
		margin: 4px 0 0 0;
	}
	
	.inner {
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: flex-start;
		gap: 0;
		align-self: stretch;
		padding: 0 40px 12px 40px !important;

		max-width: 720px;
		margin: 0 auto;
	}

	.brandmark {
		display: flex;
		margin: auto 16px auto 0;
	}

	#searchInput {
		font-size: 18px;
		padding: 0 20px;
		width: 100vw;
		border-radius: 20px 0 0 20px;
		border: none;
		outline-style: none;
		height: 40px;
	}

	#searchInput:focus {
		border: none;
		outline-style: none;
	}

	.submitSearch {
		padding: 8px 10px 6px 6px;
		height: 40px;
		width: 48px;
		border: none;
		border-radius: 0 20px 20px 0;
		background-color: #7B98F9;
	}

	.searchResults {
		overflow: hidden;
		height: 0px;
	}

	.searchSummary {
		color: #fff;
	}

	.searchSummary div {
		width: 100vw;
	}

	.carousel li {
		padding: 0;
	}

	.carousel h4 {
		margin: 12px 0 16px 0;
		font-weight: 400;
	}

	.close {
		border: 0;
		padding: 0 12px;
		background-color: #1A4FFF;
	}
}


.carousel {
	display: flex;
	margin: 0;
	padding: 0 40px;
	font-size: 14px;
	overflow: hidden;
	overflow-x: auto; /* scroll */
	max-width: 720px;
	margin: 0 auto;

	li {
		width: 210px;
		min-width: 210px;
		margin-right: 12px;
		padding: 0 0 12px 0;
		/*
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color:  #fff;
		*/
		float: left;
		overflow: hidden;
	}

	h4 {
		font-size: 16px;
		margin: 12px 0 8px 0;
	
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical; 
		overflow: hidden;
	}

	.image {
		width: 185px;
		height: 185px;
		background-color: #fff;
		border-radius: 100px;
		
		display: flex;
		align-items: center;
		justify-content: center;
	
		min-width: 185px;
		min-height: 185px;
		overflow: hidden;

		img {
			width: 140px;
			height: 140px;
			object-fit: contain;
		}
	}
}

#chatHome {
	background-color: #EBEBEF;
	

	#content {
		margin: 80px auto;
	}
	
	p {
		margin: 10px 0;
	}

	.inner {
		padding: 0 40px 16px 40px;
		max-width: 720px;
		margin: 0 auto;
	}

	h2 {
		margin: 28px 0 0 0;
	}

	.inner {
		padding: 0 40px;
		max-width: 720px;
		margin: 0 auto;
	}

	.postscript {
		padding-bottom: 24px;
		font-size: 15px;
	}
}




#chatContent {
	margin: 0;
	font-size: 18px;

	#content {
		margin: 0 auto;
	}
	
	.breadcrumb {
		margin: 0 0 8px 0;
		font-size: 16px;
		display: flex;
		flex-flow: row;
		width: 100vw;
	}
	.breadcrumb img {
		margin: 0 8px 0 24px;
		vertical-align: bottom;
	}

	.productID {
		background: #3F6BFF;
		color: #ffffff;
		padding: 8px 20px 16px 20px;
		display: flex;
		flex-flow: column;
		gap: 8px;
	}
	.productID .inner {
		display: flex;
		flex-direction: row;
		gap: 16px;
		margin: 66px auto 0 auto;
		width: 100%;
	}
	.productImage {
		width: 140px;
		height: 140px;
		border-radius: 70px;
		background-color: #fff;
	
		display: flex;
		align-items: center;
		justify-content: center;
	
		min-width: 140px;
		overflow: hidden;
	}
	.productImage img {
		width: 120px;
		height: 120px;
		object-fit: contain;
	}
	.productDetails {
		margin: auto 0;
	}
	.productTitle {
		line-height: 1.3;
		word-break: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-ms-box-orient: vertical;
		box-orient: vertical;
		-webkit-line-clamp: 2;
		-moz-line-clamp: 2;
		-ms-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		/* background-color: pink; */
	}
	.productText {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 16px;
		align-items: center;
		flex: 1 0 0;
		padding-top: 8px;
	}
	.productPrice {
		color: #BFCAEF;
	}

	#content {
		height: 100%;
	}

	.chatUI {
		display: flex;
		flex-direction: column;
	}

	#buyLink {
		color: #3F6BFF;
		background-color: #fff;
	}
	#buyLink:link, #buyLink:visited, #buyLink:hover, #buyLink:active {
		text-decoration: none;
		font-weight: 500;
	}

	.chats {
		flex: 1 0 0;
		background-color: #EBEBEF;
		padding: 16px 20px;
		overflow-y: auto; /* scroll; */
	}
	
	.chats .inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 14px;
		align-items: center;
		margin: 0 auto;
	}
	
	.chat {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		align-self: stretch;
	}
	
	.user {
		padding-left: 48px;
		justify-content: flex-end;
	}

	.system {
		justify-content: flex-end;
	}
	
	.model, .error {
		padding-right: 48px;
		justify-content: flex-start;
	}
	
	.chat h4 {
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	
	.chatUser {
		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: flex-end;
		align-self: stretch;
	}
	
	.model .chatUser, .error .chatUser {
		justify-content: left;
	}
	
	.user .chatUser {
		justify-content: right;
	}
	
	
	
	.chatMsg {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: flex-start;
		align-self: stretch;
	}
	.chatMsg .inner {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: flex-start;
		gap: 10px;
		align-self: stretch;
	}
	.user .chatMsg {
		align-items: flex-end;
	}
	
	.user .chatMsg > div {
		border-radius: 24px 0 24px 24px;
		padding: 0px 16px;

		background: #3F6BFF;
		color: #fff;
		/* background: #fff; */
	}
	
	.model .chatMsg > div {
		border-radius: 0px 24px 24px 24px;
		padding: 0px 16px;

		background: #fff;
		color: #111;
	}

	.error .chatMsg > div {
		border-radius: 0px 24px 24px 24px;
		border: 1px dotted #D93939;
		padding: 0px 16px;

		color: #D93939;
	}


	.suggestions {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: flex-end;
		align-self: stretch;
		padding: 0;
		margin: 0;
	}
	.suggest {
		border-radius: 20px 20px 20px 20px;
		padding: 0px 16px;
		border: 1px solid #BFCAEF;
		color: #3F6BFF;
		list-style-type: none;
		margin: 12px 0 0 0;
		cursor: pointer;
	}
	.suggest p {
		margin: 8px 0;
	}



	.status_msgs {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: center;
		align-self: stretch;
		padding: 0;
		margin: 0;
	}
	.status {
		border-radius: 20px 20px 20px 20px;
		padding: 0px 12px;
		background-color:#BFCAEF;
		color: #111;
		list-style-type: none;
		margin: 0;
		font-size: 14px;
		font-weight: 500;
	}
	.status p {
		margin: 8px 0;
	}

	.chatMsg {
		.chatInner {
			margin: 12px 0;
		}
		
		h2, p, ul, li {
			margin: 12px 0;
		}
		ul, ol {
			padding-left: 24px;
		}
	}
	.model .chatMsg {
		color: #fff;
	}
	.user .chatMsg {
		color: #444;
	}
	
	
	.addChat {
		border-top: 1px solid #BFCAEF;
		border-bottom: 1px solid #BFCAEF;
		padding: 12px 20px;
	}
	.addChat .inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		margin: auto;
	}
	input {
		font-size: 16px;
	}
	#chatInput {
		font-size: 18px;
		padding: 4px 16px;
		width: 100vw;
		border: none;
		outline-style: none;
	}
	#chatInput:focus {
		border: none;
		outline-style: none;
	}
	.submitInput {
		padding: 6px;
		height: 32px;
		width: 32px;
		border: none;
		right: 24px;
	}
	
}




h1 {
	font-size: 32px;
	color: #111;
	margin: 20px 0 10px 0;
}

a {
	color: #3F6BFF;
	text-decoration: none;
}

h2 {
	font-size: 26px;
	margin: 36px 0 8px 0;
	color: #111;
}
h3 {
	font-size: 20px;
	margin: 24px 0 12px 0;
	color: #111;
}
h4 {
	font-weight: 500;
}
li {
	margin: 12px 0 0 0;
}

::placeholder {
	color: #bbb;
}





.breadcrumb {
	font-size: 12px;
	margin: 24px 0 0 0;
}
.breadcrumb a {
	color: #fff;
}


.inner {
	max-width: 720px;
}

.button {
	color: #fff;
	background-color: #3F6BFF;
	padding: 4px 12px;
	border-radius: 24px;
	display: inline;
	font-size: 14px;
	cursor: pointer;
}




@media only screen and (max-width: 767px) {
	
	body {
		font-size: 16px;
	}

	.carousel {
		padding: 0 20px;
		
		li {
			width: 165px;
			min-width: 165px;
		}

		h4 {
			font-size: 15px;
		}

		.image {
			width: 140px;
			height: 140px;
			min-width: 140px;
			min-height: 140px;

			img {
				width: 110px;
				height: 110px;
			}
		}
	}

	#chatHome {
		.inner {
			padding: 0 20px;
		}
	}

	#chatSearch {
		#searchInput {
			font-size: 16px;
		}

		.inner {
			padding: 0 20px 12px 20px !important;
		}
	}

	.button {
		font-size: 12px;
	}

	#chatContent {
		font-size: 16px;
	}

	#chatContent {
		.productID .inner {
			gap: 12px;
		}

		.inner {
			padding: 0;
		}
		
		.user {
			padding-left: 32px;
		}
		
		.model, .error {
			padding-right: 32px;
		}

		.breadcrumb img {
			margin: 0 8px 0 8px;
		}

		.productImage {
			width: 100px;
			height: 100px;
			border-radius: 50px;
			min-width: 100px;
		}

		.productImage img {
			width: 80px;
			height: 80px;
		}

		#chatInput {
			font-size: 16px;
			line-height: 20px;
		}
		
		.chatMsg {
			h2, p, ul, li {
				margin: 8px 0;
			}
		}

		.model .chatMsg > div, .error .chatMsg > div, .user .chatMsg > div {
			padding: 0px 12px;
		}

		.submitInput {
			right: 15px;
		}
	}

	input {
		font-size: 16px;
	}

}