/*
App Name: S-GO Chatbot
App URI: https://saargo.com
Author: SAARGO
Description: Styles for S-GO Chatbot
Version: 1.0.0
Author URI: https://saargo.com
*/

/* IMPORT */

/* Inter Font Family */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* Font Awesome Pro 6.5.1 */

@import url('fontawesome.min.css');
@import url('brands.min.css');
@import url('light.min.css');
@import url('regular.min.css');
@import url('solid.min.css');



:root {
	--primary: rgba(0,0,255,1);
	--primary-1: rgba(0,0,255,.9);
	--primary-2: rgba(0,0,255,.8);
	--primary-3: rgba(0,0,255,.7);
	--primary-4: rgba(0,0,255,.6);
	--primary-5: rgba(0,0,255,.5);
	--primary-6: rgba(0,0,255,.4);
	--primary-7: rgba(0,0,255,.3);
	--primary-8: rgba(0,0,255,.2);
	--primary-9: rgba(0,0,255,.1);
	
	--primary-light-1: rgba(0,0,255,.09);
	--primary-light-2: rgba(0,0,255,.08);
	--primary-light-3: rgba(0,0,255,.07);
	--primary-light-4: rgba(0,0,255,.06);
	--primary-light-5: rgba(0,0,255,.05);
	--primary-light-6: rgba(0,0,255,.04);
	--primary-light-7: rgba(0,0,255,.03);
	--primary-light-8: rgba(0,0,255,.02);
	--primary-light-9: rgba(0,0,255,.01);

	--text-primary: #383e44;
	
	--size-1: .25rem;
	--size-2: .5rem;
	--size-3: .75rem;
	--size-4: 1rem;
	--size-5: 1.25rem;
	--size-7: 1.5rem;
	--size-8: 1.75rem;
	--size-9: 2rem;
	
	--transition-015: all 0.15s ease-in-out;
	
	--offline: #cccccc;
	--online: #40c113;
	

}


/* RESET */

*, *::before, *::after {
	box-sizing: border-box; 
	border: 0 solid;
}
* {
	margin: 0; 
	padding: 0; 
}
ul[role='list'], ol[role='list'] {
	list-style: none; 
}
html:focus-within {
	scroll-behavior: smooth; 
}
a:not([class]) {
	text-decoration-skip-ink: auto; 
}
img, picture, svg, video, canvas {
	max-width: 100%;
	height: auto; 
	vertical-align: middle; 
	font-style: italic; 
	background-repeat: no-repeat; 
	background-size: cover;
}
input, button, textarea, select {
	font: inherit; 
}
ul {
	margin: 0;
	padding: 0;
}
@media (prefers-reduced-motion: reduce) {
	
	html:focus-within {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition: none;
	}
	
}
body, html {
	height: 100%; 
	scroll-behavior: smooth; 
}




/* GENERAL */

body {
	background-image: url('../img/sgo-background.jpg');
	background-repeat: no-repeat;
	background-position: 0 center;
	background-size: cover;
	font-family: "Inter", sans-serif;
	font-size: .9rem;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: "slnt" 0;
	letter-spacing: .017rem;
	line-height: 1.5;
	color: var(--text-primary);
}
h1, h2, h3 {
	font-weight: 500;
}
button {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none;
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
}
.hidden {
	display: none!important;
}

/* GENERAL > Width */

.w-100 {
	width: 100%;
}

/* GENERAL > position */

.sticky {
	position: sticky;
	top: 0;
}

/* GENERAL > Flex */

.flex {
	display: flex;
}
.justify-between {
	justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.align-items-center {
	align-items: center;
}

/* GENERAL > Padding */

.pl-1 {
	padding-left: var(--size-1);
}
.pl-2 {
	padding-left: var(--size-2);
}
.py-1 {
	padding-top: var(--size-1);
	padding-bottom: var(--size-1);
}
.py-2 {
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.py-3 {
	padding-top: .75rem;
	padding-bottom: .75rem;
}
.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.py-5 {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.px-1 {
	padding-left: .25rem;
	padding-right: .25rem;
}
.px-2 {
	padding-left: .5rem;
	padding-right: .5rem;
}
.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

/* GENERAL > Margin */

.mb-1 {
	margin-bottom: .25rem;
}
.mb-2 {
	margin-bottom: .5rem;
}
.mb-3 {
	margin-bottom: .75rem;
}

/* GENERAL > Rounded */

.rounded-lg {
	border-radius: .5rem;
}
.rounded-md {
	border-radius: .375rem;
}

/* GENERAL > Color */

.bg-primary-3,
.btn-primary-3 {
	background-color: var(--primary-3);
}
.btn-primary-3:hover {
	background-color: var(--primary-2);
}
.bg-primary-4,
.btn-primary-4 {
	background-color: var(--primary-4);
}
.btn-primary-4 {
	color: #fff;
}
.btn-primary-4:hover {
	background-color: var(--primary-3);
}

.bg-primary-9,
.btn-primary-9 {
	background-color: var(--primary-9);
}
.btn-primary-9:hover {
	background-color: var(--primary-8);
}

.bg-primary-light-1 {
	background-color: var(--primary-light-1);
}  
.bg-primary-light-7,
.btn-primary-light-7 {
	background-color: var(--primary-light-7);
}
.btn-primary-light-7:hover {
	background-color: var(--primary-light-5);
} 

/* GENERAL > Button */

.btn {
	transition: var(--transition-015);
}
.btn:hover {
	cursor: pointer;
}
.btn.btn-link {
	background-color: transparent;
	color: var(--primary-3);
}
.btn.btn-link:hover {
	background-color: var(--primary-4);
	color: #fff;
}

/* GENERAL > Font */

.font-medium {
	font-weight: 500;
}

/* GENERAL > Text */

.txt-base {
	font-size: .9rem;
	line-height: 1.5rem;
}
.txt-xs {
	font-size: .75rem;
	line-height: 1rem;
}
.txt-sm {
	font-size: .875rem;
	line-height: 1.25rem;
}
.txt-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}
.txt-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
}

/* S-GO CHATBOT */

.sgo-chatbot {	
	background-color: #edf0f6;
	box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
	opacity: 1;
	overflow: hidden !important;
	position: fixed !important;
	z-index: 99999!important;
}
@media only screen and (min-width: 667px) {
	
	.sgo-chatbot {
		border-radius: 1rem;
		bottom: 104px;
		height: calc(90% - 64px - 20px);
		max-height: 640px !important;
		min-height: 250px !important;
		width: 400px !important;
	}
	
}
.sgo-chatbot.sgo-right {
	right: 20px;
}
.sgo-chatbot .sgo-container {
	height: 100%;
	overflow: auto;
	position: relative!important;
}

/* S-GO CHATBOT > Header */

.sgo-header {
	background-color: #fff;
	transition: all 0.15s ease-in-out;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
}
.sgo-start .sgo-header {
	background-color: transparent;
}
.sgo-header.scroll {
	opacity: .2;
	z-index: -1;
}
.sgo-header .sgo-logo img {
	width: 50px;
}

/* S-GO CHATBOT > Body */

.sgo-body {
	z-index: 2;
}

/* S-GO CHATBOT > Footer */

.sgo-footer.stick {
	background-color: #edf0f6;
	position: sticky;
	bottom: 0;
}
.sgo-footer p {
	font-size: var(--size-3);
}
.sgo-footer p a {
	margin-left: 5px;
	font-weight: 500;
	text-decoration: none;
	color: var(--primary-3);
}


/* S-GO CHATBOT > Box */

.sgo-start .sgo-box {
	background-color: #fff;
}

/* S-GO CHATBOT > List */

.sgo-box-list {
	list-style-type: none;
}
.sgo-box-list li {
	margin-bottom: .5rem;
}
.sgo-box-list li:last-child {
	margin-bottom: 0;
}
.sgo-box-list li button span {
	text-align: left;
	line-height: 1.4;
	
} 

/* S-GO CHATBOT > Form */

.sgo-form .sgo-input-wrap {
	margin-bottom: .9rem;
}
.sgo-form label {
	margin-bottom: .2rem;
	display: block;
	font-size: var(--size-3);
	font-weight: 500;
}
.sgo-form input, 
.sgo-form textarea, 
.sgo-form select {
	width: 100%;	
	padding: var(--size-3) var(--size-3);
	display: block;
	border: 1px solid var(--primary-8);
	border-radius: .375rem;
	transition: var(--transition-015);
}
.sgo-form textarea {
	height: 100px;
}
.sgo-form input:focus, 
.sgo-form textarea:focus, 
.sgo-form select:focus {
	outline: 0;
	border-color: var(--primary-4);
}
.sgo-form .sgo-input-status {
	margin-top: .275rem;
	margin-bottom: .375rem;
	font-size: var(--size-3);
	font-weight: 500;
}
.sgo-form .sgo-input-status:empty {
	margin-bottom: 0;
}

/* S-GO CHATBOT > Brand */

.sgo-header-brand .sgo-back {
	height: 100%;
	margin-right: .5rem;
}
.sgo-header-brand .sgo-btn-back {
	height: 100%;
	margin-left: -.5rem;
	padding-left: .5rem;
	padding-right: .5rem;
	font-size: 1.4rem;
}
.sgo-header-brand .sgo-logo {
	margin-right: .5rem;
}
.sgo-header-brand .sgo-logo img {
	width: 35px;
}
.sgo-header-brand .sgo-id-name {
	line-height: 1.1;
}
.sgo-header-brand .sgo-status {
	background-color: var(--offline);
	margin-left: .1rem;
	width: 10px;
	height: 10px;
	border-radius: 20px;
	display: inline-block;
}
.sgo-header-brand .sgo-status.online {
	background-color: var(--online);
}
.sgo-exit {
	margin-left: auto;
}
.btn-exit {
	height: 100%;
	margin-right: -.5rem;
	padding-left: .5rem;
	padding-right: .5rem;
	font-size: 1.2rem;
}

/* S-GO CHATBOT > Article */

.sgo-box-article {
	padding-bottom: 2rem;
}
.sgo-title {
	margin-bottom: .5rem;
	font-size: 2rem;
	line-height: 1.3;
}
.sgo-date {
	margin-bottom: 2rem;
	display: block;
}
.sgo-box-article p {
	margin-bottom: 1rem;
}


/* S-GO CHATBOT > Conversation */

.sgo-conversation .sgo-container {
	display: flex;
	flex-direction: column;
}
.sgo-conversation .sgo-header {
	z-index: 9;
}
.sgo-conversation .sgo-footer.stick {
	background-color: transparent;
	margin-top: auto;
	padding-bottom: 0;
	z-index: 9;
}
.sgo-conversation .sgo-footer .sgo-copy {
	background-color: #edf0f5;
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.sgo-chat-date {
	padding-top: .75rem;
	padding-bottom: .75rem;
}
.sgo-chat-day {
	display: block;
	text-align: center;
	position: relative;
	font-size: .8rem;
}
.sgo-chat-day:before,
.sgo-chat-day:after {
	background-color: rgba(0,0,0,0.17);
	content: "";
	height: 1px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(50% - 50px);
}
.sgo-chat-day:before {
	right: 0;
}
.sgo-chat-day:after {
	left: 0;
}

.sgo-user-message-wrap,
.sgo-bot-message-wrap {
	margin-bottom: 1rem;
}
.sgo-user-message,
.sgo-bot-message {
	display: flex;
	flex-direction: row;
	max-width: 85%;
}
.sgo-user-message {
	align-items: flex-end;
	justify-content: flex-end;
	margin: 0 .25rem .125rem auto;
	text-align: right;
}
.sgo-bot-message {
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0 auto .125rem .25rem;
	text-align: left;
}
.sgo-bubble {
	box-shadow: 0 .25rem 6px rgba(50, 50, 93, .08), 0 1px 3px rgba(0, 0, 0, .05);
	border-radius: 1rem;
	display: inline-block;
	font-size: .8rem;
	line-height: 1.5;
	padding: .75rem 1rem;
	text-align: left;
	word-break: break-word;
}
.sgo-bubble.sgo-user {
	background-color: var(--primary-4);
	border-bottom-right-radius: .2rem;
	border-top-right-radius: .2rem;
	color: #fff;
}
.sgo-user-message:last-child .sgo-bubble.sgo-user {
	border-top-right-radius: .2rem;
	border-bottom-right-radius: .2rem;
}
.sgo-user-message:first-child .sgo-bubble.sgo-user {
	border-top-right-radius: 1rem;
}
.sgo-bubble.sgo-bot {
	background-color: #fff;
	border-bottom-left-radius: .2rem;
	border-top-left-radius: .2rem;
}
.sgo-bot-message:last-child .sgo-bubble.sgo-bot {
	border-top-left-radius: .2rem;
	border-bottom-left-radius: .2rem;
}
.sgo-bot-message:first-child .sgo-bubble.sgo-bot {
	border-top-left-radius: 1rem;
}
.sgo-message-input-wrap {
	background-color: #fff;
	align-items: center;
	display: flex;
	padding: 0 .5rem 0 .75rem;
	border-radius: 7px;
	box-shadow: 0 0 15px rgba(0,0,0,0.05);
} 
.sgo-message-input-wrap .sgo-message-input {
	width: 100%;
	margin-top: .5rem;
	margin-bottom: .5rem;
	height: 2rem;
	min-height: 2rem;
	max-height: 15rem;
	padding: .25rem;
	display: block;
	resize: none;
}
.sgo-message-input-wrap .sgo-message-input:focus {
	outline: 0;
}
.sgo-message-input-wrap .btn-send {
	width: 32px;
	transition: var(--transition-015);
	font-size: 1.1rem;
	color: rgba(0,0,0,0.1);
}
.sgo-message-input-wrap .btn-send.active {
	color: var(--primary-4);
}
.sgo-open-chatbot {
	position: fixed;
	right: 20px;
	bottom: 30px;
	display: flex;
	align-items: center;
}
.btn-open-chat {
	background-color: var(--primary);
	padding: .7rem 1.5rem;
	border-radius: 100px;
	display: flex;
	align-items: center;
	font-size: 1rem;
	color: #fff;
}
.btn-open-chat i {
	margin-right: 7px;
}
.btn-close-chat {
	background-color: var(--primary);
	height: 60px;
	width: 60px;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: #fff;
}