/* Common */

.ttw-button {
	display: block;
	border: 1px solid #0c459b;
	border-radius: 0.5rem;
	padding: 0.4rem .8rem;
	background: #ebf3ff;
	cursor: pointer;
	text-decoration: none;
	color: black;
	font-size: 1.2rem;
	user-select: none;
	line-height: normal;
}

.ttw-button:hover {
	background: white;
}

.ttw-button:active,
.ttw-dialogue-send-message-button:active {
	box-shadow: 1px 1px 2px #333333 inset !important;
}

.ttw-green-button {
	background: #28a745;
	border: 1px solid #1e7e34;
	color: white; 
}

.ttw-green-button:hover {
	background: #1e7e34;
}

.ttw-button-mini {
	padding: .2rem .4rem;
	font-size: 1rem;
}

.ttw-label {
	padding: 0;
	margin: 0;
	line-height: normal;
}

/* Notifications */

.ttw-overlay {
	position: fixed;
	background: #cccccc;
	opacity: .8;
	z-index: 1001;
}

.ttw-notification {
	position: fixed;
	width: 500px;
	left: calc(50% - 250px);
	padding: 1rem;
	background: white;
	box-shadow: 0 3px 7px #333333;
	border-radius: .5rem;
	z-index: 299999;
}

.ttw-notification.ttw-notification-error {
	background: rgba(217, 92, 92, 1);
}

.ttw-notification-info {
	background: rgba(91, 189, 114, 1);
}

.ttw-notification-text {
	font-size: 1.2rem;
	color: black !important;
}

.ttw-notification-buttons {
	border-top: 1px solid black;
	padding-top: .6rem;
	margin-top: .5rem;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

/* ~Notifications */

/* Chat bubble */
  
.ttw-chat-floating-bubble {
	position: fixed;
	right: 40px;
	bottom: 40px;
	width: 100px;
	height: 100px;
	cursor: pointer;
	border-radius: 50px;
	box-shadow: 2px 2px 6px #575757;
	transition: all .15s;
	z-index: 99999;
}

.ttw-chat-floating-bubble:hover {
	transform: scale(1.08);
}

.ttw-chat-floating-bubble img {
	width: 100px;
}

/* Promo popup */

.vappv-ttw-chat-promo-popup {
	position: fixed;
	right: 40px;
	bottom: 175px;
	width: 300px;
	height: 390px;
	background: white;
	border: 5px solid #3399ce;
	border-radius: 20px;
	box-shadow: 2px 2px 6px #575757;
	z-index: 99999;
}

.ttw-chat-promo-popup-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ttw-promo-popup-inner-buttons {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.ttw-promo-popup-inner-buttons > div {
	margin-left: .5rem;
	margin-right: .5rem;
}

/* Main dialogue cloud (big rounded rectangle) */

.vappv-ttw-chat-dialogue {
	box-sizing: border-box;
	position: fixed;
	right: 40px;
	bottom: 175px;
	width: 400px;
	height: 550px;
	background: #ebf3ff;
	border: 5px solid #3399ce;
	border-radius: 20px;
	box-shadow: 2px 2px 6px #575757;
	z-index: 99999;
}

.ttw-chat-first-inner-block-any,
.ttw-chat-promo-popup-inner {
	width: 100%;
	height: 100%;
	background: white;
	border-radius: 1rem;
}

/* Main chat dialogue, bottom triangle */

.ttw-dialogue-window-triangle-cloud-background-shadow {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 18px solid #3399ce;
	margin-right: 1rem;
	margin-left: 1rem;
	top: 6px; 
	z-index: 1;
}

.ttw-dialogue-window-triangle-cloud-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 16px solid white;
	margin-right: 1rem;
	margin-left: 1rem;
	top: 1px;
	left: 2px;
	z-index: 2;
}

.ttw-dialogue-window-triangle-container {
	height: 1px; 
	overflow: visible;
	position: absolute;
	bottom: 0px;
	right: 78px;
}

/* "Powered by TTW" label at the bottom */

.ttw-dialogue-powered-by-ttw-container {
	height: 1px; 
	overflow: visible;
	position: absolute;
	bottom: 0px;
}

.ttw-dialogue-powered-by-ttw-text {
	position: relative;
	top: 15px;
	left: 20px;
	font-size: 14px;
	color: #333333;
}

.ttw-dialogue-powered-by-ttw-text a {
	color: #333333 !important;
	text-decoration: none;
	border-bottom: 1px solid #333333;
}

/* --- "Introduce yourself" frame --- */

.ttw-introduce-yourself-head-image,
.ttw-ai-is-sleeping-head-image
.ttw-ai-about-section-head-image,
.ttw-chat-promo-popup-head-image {
	margin-bottom: .5rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
  
.ttw-introduce-yourself-area,
.ttw-ai-is-sleeping-now, 
.ttw-ai-about-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ttw-introduce-yourself-head-label,
.ttw-ai-is-sleeping-head-label,
.ttw-ai-about-head-label,
.ttw-promo-popup-head-label {
	font-size: 1.2rem;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	text-align: center;
	font-weight: bold;
	margin-bottom: 1.5rem;
}

.ttw-ai-is-sleeping-head-label,
.ttw-ai-about-head-label {
	margin-top: 2rem;
}

.ttw-promo-popup-head-label {
	margin-top: 1rem;
	font-size: 1.6rem;
}

.ttw-ai-is-sleeping-explanation,
.ttw-ai-about-explanation,
.ttw-promo-popup-explanation { 
	font-size: 1rem;
	text-align: center;
	padding-left: 2rem;
	padding-right: 2rem;
}

.ttw-introduce-yourself-submit-button { 
	margin-top: 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ttw-introduce-yourself-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ttw-introduce-yourself-field {
	margin-bottom: 1rem;
}

.ttw-introduce-yourself-label {
	font-size: 1.2rem;
	margin-bottom: .4rem;
}

.ttw-introduce-yourself-input input, .ttw-introduce-yourself-input select, .ttw-introduce-yourself-input textarea {
	width: 250px;
	box-shadow: 1px 1px 2px #ccc inset;

	color: #000000;
	background-color: #f7fbfe;
	border-style: none;
	border-radius: 8px 8px 8px 8px !important;
	padding: 12px 0px 12px 15px !important;

	font-family: sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
}

.ttw-introduce-yourself-errors-area {
	margin-top: 1rem;
	color: red;
	text-align: center;
	padding-left: 1rem;
	padding-right: 1rem;
	font-size: 1.2rem;
}

.ttw-introduce-yourself-close-modal-button {
	margin-top: 1rem;
	display: none;
}

/* --- "Chat" frame --- */

.ttw-dialogue-heading-area {
	box-sizing: border-box;
	height: 100px;
	background: #b3e3fb;
	border-bottom: 5px solid #3399ce;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.ttw-dialogue-heading-label {
	font-family: sans-serif !important;
	font-size: 18px !important;
	line-height: 25px !important;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 16px;
}

#ttw-click-here-to-know-more-about-plugin {
	color: #1a84a5;
	border-bottom: 1px solid #84c5d9;
	cursor: pointer;
	font-size: 1.2rem;
}

.ttw-ai-about-explanation a {
	color: #1a84a5;
	border-bottom: 1px solid #84c5d9;
	cursor: pointer;
	text-decoration: none !important;
}
  
.ttw-dialogue-content-area {
	box-sizing: border-box;
	height: calc(100% - 200px);
	position: relative;
	overflow-y: scroll;
	padding: 1rem;
	padding-right: 0;
	padding-left: 0;
	background-image: url(../../admin/img/chat_tile_background_v3.png);
	background-repeat: repeat-x;
	background-size: initial;
	padding-bottom: 0;
}

.ttw-dialogue-interaction-area {
	box-sizing: border-box;
	background: white;
	height: 100px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	border-top: 5px solid #3399ce;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	box-shadow: 1px 1px 2px #a7a7a7 inset;
}

.ttw-dialogue-interaction-area.ttw-disabled {
	background: #dbdbdb;
}

.ttw-dialogue-window-triangle-cloud-arrow.ttw-disabled {
	border-top: 16px solid #dbdbdb;
}

.ttw-dialogue-send-message-button.ttw-disabled {
	opacity: .5;
}

.ttw-dialogue-message-text {
	box-sizing: border-box;
	width: calc(100% - 100px);
	height: 100%;
	line-height: 24px !important;
	font-size: 15px !important;
	font-family: sans-serif;
	border-radius: 0 !important;
	border-bottom-left-radius: 1rem !important;
	padding: .5rem !important;
	padding-left: .7rem !important;
	resize: none !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
}

.ttw-dialogue-message-text:active {
	outline: none !important;
}

.ttw-dialogue-send-message-button-outer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100%;
}

.ttw-dialogue-send-message-button {
	user-select: none;
	background: #28a745;
	border: 1px solid #1e7e34;
	color: white;
	border-radius: .8rem;
	box-shadow: 1px 2px 2px #6b6b6b;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: .5rem;
	margin-left: 3px;
	transition: all .15s;
}

.ttw-dialogue-send-message-button:hover {
	transform: scale(1.08);
	background: #117e2a;
	box-shadow: 1px 2px 3px #363636;
}

.ttw-send-svg-icon {
	height: 55px;
}

.ttw-send-chat-message-label {
	position: relative; 
	font-size: 1rem;
	text-shadow: 0 0 3px #000000;
}

.ttw-robot-sleeping-ta-background {
	background: #cfcfcf;
}

.ttw-robot-is-sleeping-textarea {
	width: 100%;
}

.ttw-dialogue-window-triangle-cloud-arrow.ttw-robot-sleeping-ta-background-triangle { 
	border-top: 16px solid #cfcfcf !important;
}

.ttw-view-my-conversation-history-with-sleeping-robot {
	margin-top: 1.5rem;
	color: #16668d;
	font-size: 1.2rem;
	border-bottom: 1px solid #54a1c7;
	cursor: pointer;
}

.ttw-ai-about-back-to-chat-button {
	margin-top: 1.5rem;
}

/* Chat messages */

.ttw-waiting-for-ai-response-text-block,
.ttw-loading-user-messages-text-block {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: white;
	width: calc(100% - 2rem);
	padding-top: .5rem;
	padding-bottom: .5rem;
	border-radius: .5rem;
	border-left: 4px solid #76c0ed;
	border-right: 4px solid #76c0ed;
	margin-bottom: 1rem;
	margin-left: 1rem;
	box-shadow: 0px 1px 2px #333333;
	color: #022027;
}

.ttw-waiting-for-ai-response-circle-loader,
.ttw-loading-admin-messages-circle-loader {
	margin-right: .5rem;
}

.ttw-dialogue-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.ttw-chat-message {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: 1rem;
}

.ttw-chat-message-by-user {
	width: 80%;
	margin-left: auto;
	text-align: right;
	margin-right: 1rem; 
	align-items: flex-end;
}

.ttw-chat-message-by-ai {
	width: 80%; 
	text-align: left;  
	align-items: flex-start;
	margin-left: 1rem;
}

.ttw-message-body {
	background: #6fdbf2;
	color: #00476b;
	padding: .5rem .7rem;
	border-radius: .5rem;
	line-height: normal;
	box-shadow: 0px 1px 2px #333333;
	font-size: 1rem;
}

.ttw-message-body-text {
	word-break: break-word;
}

.ttw-message-body a {
	color: #1a84a5;
	border-bottom: 1px solid #84c5d9;
	cursor: pointer; 
}

.ttw-chat-message-by-ai .ttw-message-body {
	/* background: #00c7ee; */
	background: white;
	color: #00476d;
}

.ttw-message-body-ps {
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px solid #cccccc;
}

.ttw-message-meta {
	margin-top: .5rem;
	font-weight: bold;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	font-size: 1rem;
}

.ttw-message-meta-sentdate {
	font-size: .8rem;
	position: relative;
	top: -4px;
	color: #939393;
}

.ttw-chat-message-by-ai .ttw-message-meta {
	justify-content: flex-start;
	align-items: flex-start;
}

.ttw-chat-message-by-user .ttw-message-meta {
	justify-content: flex-start;
	align-items: flex-end;
}

.ttw-message-meta-username {
	display: flex;
	flex-direction: row;
}

.ttw-chat-message-by-ai .ttw-message-meta-username {
	justify-content: flex-start;
	align-items: center;
}

.ttw-chat-message-by-user .ttw-message-meta-username {
	justify-content: flex-end;
	align-items: center;
}

.ttw-message-triangle-container {
	height: 1px;
	position: relative;
	overflow: visible;
}

.ttw-message-triangle-cloud-background-shadow {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #333333; 
	margin-right: .9rem;
	margin-left: .9rem;  
	opacity: .8;
	z-index: 1;
}

.ttw-message-triangle-cloud-arrow { 
	position: absolute;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #6fdbf2; 
	margin-right: .9rem;
	margin-left: .9rem; 
	z-index: 2;
}

.ttw-chat-message-by-ai .ttw-message-triangle-cloud-arrow {
	border-top: 8px solid white; 
}

.ttw-chat-message-by-user .ttw-message-triangle-cloud-background-shadow,
.ttw-chat-message-by-user  .ttw-message-triangle-cloud-arrow {
	right: 0;
}

.ttw-chat-ai-icon {
	width: 20px;
	height: 20px;
	margin-right: .5rem;
}

.ttw-chat-user-icon {
	width: 20px;
	height: 20px;
	margin-left: .5rem;
}

.ttw-testing-chat-tab-admin-icon {
	margin-left: .5rem;
}

.ttw-dialogue-separator {
	border-top: 2px solid #999999;
	border-bottom: 2px solid #999999;
	margin-bottom: 1.5rem;
	text-align: center;
	padding-top: .5rem;
	padding-bottom: .5rem;
	background: white;
	font-size: 1rem;
}

/* Mobile version of the dialogue */

.ttw-dialogue-mobile-heading-area {
	height: 60px;
	background: #b3e3fb;
	border-bottom: 5px solid #3399ce;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 1rem;
	display: none;
}

.ttw-dialogue-mobile-image img {
	width: 30px;
	height: 30px; 
}

#ttw-button-close-chat-from-mobile {
	margin-left: auto;
	margin-right: 1rem;
	height: 30px;
	line-height: normal;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#ttw-button-close-chat-from-mobile .dashicons-no {
	font-size: 1.5rem;
	position: relative;
	margin-right: .2rem;
}

.ttw-ai-mobile-headlabel {
	margin-left: .5rem;
	font-size: 2rem;
	font-weight: bold;
}

.ttw-chat-website-background-overlay-mobile {
	background: #dbdbdb;
	opacity: .7;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50000;
}

/* ------------------------------------------------- */
/*			    	 Mobile adaptivity				 */
/* ------------------------------------------------- */

/* Low resolution laptops (Macbook 13 inches for example) */
@media (max-height: 750px) {
	.vappv-ttw-chat-dialogue {
		height: 500px;
	}
}

/* ------------------------------------------------- */

@media (max-width: 1200px) {
	
}

@media (max-width: 992px) {
	 
}
 
@media (max-width: 768px), (-webkit-device-pixel-ratio: 3) {
	 .ttw-chat-floating-bubble {
		right: auto;
		left: calc(50% - 50px) !important;
	 }

	 .vappv-ttw-chat-dialogue {
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 199999;
		border-radius: 0;
		border: none;
	 }

	 .ttw-dialogue-heading-area {
		border-radius: 0;
	 }

	 .ttw-triangle-container-main-dialogue {
		display: none;
	 }

	 .ttw-triangle-container-promo-popup {
		right: calc(50% + 29px) !important;
	 }

	 .vappv-ttw-chat-promo-popup {
		height: 325px;
		right: calc(50% - 150px) !important;
	 }

	.ttw-promo-popup-head-label {
		margin-top: .5rem;
		margin-bottom: .8rem;
	}

	 .ttw-chat-promo-popup-head-image svg {
		width: 70px !important;
		height: 70px !important;
	 }

	 .ttw-dialogue-interaction-area {
		border-radius: 0;
	 }

	 .ttw-dialogue-heading-area {
		height: 70px;
	 }

	 .ttw-dialogue-content-area {
		height: calc(100% - 230px);
	 }

	 .ttw-dialogue-mobile-heading-area {
		display: flex;
	 }

	 .ttw-dialogue-heading-label {
		text-align: center;
	 }

	 .ttw-dialogue-message-text {
		border-radius: 0 !important;
	 }

	 .ttw-ai-about-back-to-chat-button { 
		height: 30px;
		line-height: normal;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.ttw-notification {
		width: 400px; 
	}

	.ttw-ask-robot-anything-you-want {
		display: none;
	}

	.ttw-introduce-yourself-close-modal-button {
		display: block;
	}
}