:root{
	
	--main-color: #2a7dcf;
	--mute-color: #e0e0e0;
	--text-color: #3d3d3d;
	
}

/* Default Behavior */

body{margin: 0; font-family: "Open Sans", serif; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: minmax(0, 1fr); color: var(--text-color); height: 100vh; overflow: hidden; transition: all .3s ease;}

a{text-decoration: none; color: inherit;}

img, svg{max-width: 100%; vertical-align: bottom;}

dialog:not([open]){display: none !important;}

textarea{overflow-y: hidden;}

*{box-sizing: border-box; margin: 0; border: 0; background-color: initial;}

/* Helper Classes */

.row, .grid, .column{display: flex; gap: inherit;}
.column{flex-direction: column;}
.grid{display: grid;}
.grid.layered > *{grid-row: 1; grid-column: 1;}

.btn{padding: 8px 16px; width: fit-content; border-radius: 6px; align-items: center; background-color: var(--main-color); color: #fff; font: inherit; cursor: pointer; gap: 5px; cursor: pointer; user-select: none;}
.btn.hollow{color: var(--main-color); background-color: transparent; border: 2px solid;}
.btn.selectable{background: transparent; color: var(--text-color);}
.btn.selectable:hover,
.btn.selectable.configuring{background-color: var(--mute-color);}
.btn.selectable.selected{background-color: var(--main-color); color: #fff;}

/* Login */

body:has(form#login){place-items: center; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);}

form#login{gap: 20px; padding: 20px; border-radius: 20px; box-shadow: 0 0 10px -1px rgba(0 0 0 / 30%); width: 400px;}
form#login img{width: 250px; align-self: center;}
form#login label{gap: 5px;}
form#login label span{font-size: 0.875rem;}
form#login label input{padding: 10px 20px; font: inherit; border: 1px solid var(--mute-color); border-radius: 5px;}
form#login .actions{justify-content: space-between; align-items: center;}
form#login .actions a{color: var(--main-color);}
form#login .btn{align-self: end;}

/* Aside */

aside#mainMenu{padding: 3vh 1vw; gap: 20px; align-items: center; grid-template-rows: max-content minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); box-shadow: -5px 0 10px -1px rgba(0 0 0 / 20%); position: relative; width: 250px;}

aside#mainMenu label#menuTrigger{padding: 10px; position: absolute; top: 5vh; right: 100%; background-color: #fff; color: var(--text-color); z-index: 1; font-size: 30px; border-radius: 5px 0 0 5px; box-shadow: 0 5px 10px -1px rgba(0 0 0 / 20%), -5px 0 10px -1px rgba(0 0 0 / 20%); cursor: pointer; clip-path: polygon(-100% -100%, 0 200%, 100% 200%, 100% -100%);}
aside#mainMenu label#menuTrigger:before{content: 'arrow_back_ios_new';}
aside#mainMenu label#menuTrigger:has(input:checked):before{content: 'arrow_forward_ios';}

aside#mainMenu header{align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid #dedede;}
aside#mainMenu header .row{align-items: center; gap: 10px;}
aside#mainMenu header .row img{width: 40px; border-radius: 5px;}
aside#mainMenu header .btn{justify-content: center;}

aside#mainMenu .btn{width: 100%; text-align: left; white-space: nowrap; overflow: hidden;}
aside#mainMenu .conversationSelect{padding-right: 6px; gap: 10px; width: 100%; overflow: auto; grid-auto-rows: max-content;}
aside#mainMenu .conversationSelect::-webkit-scrollbar{width: 4px;}
aside#mainMenu .conversationSelect::-webkit-scrollbar-thumb{background-color: #e0e0e0; border-radius: 100vw;}
aside#mainMenu .conversationSelect .btn{grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: start;}
aside#mainMenu .conversationSelect .btn .convoName{font: inherit; color: inherit; resize: none; white-space: normal;}
aside#mainMenu .conversationSelect .btn .convoName[readonly]{pointer-events: none;}
aside#mainMenu .conversationSelect .btn button{width: fit-content; padding: 0; justify-self: end; background-color: inherit; cursor: pointer; color: inherit;}
aside#mainMenu .conversationSelect .btn:not(:is(:hover, .configuring)) button{opacity: 0;}
aside#mainMenu .conversationSelect .fixedConvos{grid-row: 1; padding-bottom: 10px;}
aside#mainMenu .conversationSelect label.btn + .fixedConvos{border-bottom: 1px solid var(--text-color);}

/* Convo Options */

dialog#convoOptions{background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px 3px rgba(0 0 0 / 20%); padding: 10px; gap: 5px; z-index: 1;}
dialog#convoOptions .btn{font-size: 0.875rem; padding: 8px; width: 100%;}
dialog#convoOptions .btn span.material-symbols-outlined{font-size: 18px;}

/* Chat Area */

main#chatArea{padding: 5vh 1vw; align-items: center; justify-items: center;}

main#chatArea dialog#conversationIntroduction{width: clamp(0px, 100%, 800px); gap: 20px; position: relative;}
main#chatArea dialog#conversationIntroduction section{padding: 20px; border-radius: 20px; background-color: #e9fbff; box-shadow: 0 5px 20px -1px rgba(0 0 0 / 30%);}
main#chatArea dialog#conversationIntroduction header{align-items: center; gap: 15px;}
main#chatArea dialog#conversationIntroduction header span{font-size: 2.5rem;}
main#chatArea dialog#conversationIntroduction header img{width: 40px; border-radius: 5px;}
main#chatArea dialog#conversationIntroduction footer{gap: 10px; align-items: center; justify-content: space-between;}
main#chatArea dialog#conversationIntroduction footer div.row{align-items: center; font-size: 12px; color: grey; gap: 5px;}
main#chatArea dialog#conversationIntroduction footer div.row img{width: 50px;}

main#chatArea:has(dialog#conversationIntroduction[open]) section#conversationArea{display: none;}

main#chatArea section#conversationArea{justify-items: center; grid-template-rows: 1fr max-content; height: 100%; overflow: hidden; gap: 20px; width: 100%;}
main#chatArea section#conversationArea.loading:before{content: 'Carregando'; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; align-content: center; z-index: 1; background-color: rgba(255 255 255 / 10%); backdrop-filter: blur(5px); font-size: 3rem; animation: loading 1s linear infinite;}

@keyframes loading{
	
	0%{content: 'Carregando';}
	33%{content: '.Carregando.';}
	66%{content: '..Carregando..';}
	100%{content: '...Carregando...';}
	
}

main#chatArea section#conversationArea #messagesArea{gap: 20px; overflow: auto; padding: 20px calc((100% - 800px)/2) 0; width: 100%;}
main#chatArea section#conversationArea #messagesArea::-webkit-scrollbar{width: 8px; height: 8px;}
main#chatArea section#conversationArea #messagesArea::-webkit-scrollbar-thumb{background-color: var(--mute-color); border-radius: 100vw;}

main#chatArea section#conversationArea #messagesArea .msg{max-width: 60%; width: fit-content; padding: 20px; position: relative; text-wrap: auto; font: inherit; text-align: justify;}
main#chatArea section#conversationArea #messagesArea .msg:after{content: ''; position: absolute; top: 0;  background-color: inherit; width: 20px; height: 20px;}
main#chatArea section#conversationArea #messagesArea .msg:before{content: ''; position: absolute; top: 0;  width: 40px; height: 40px; background-size: cover; border-radius: 5px;}
main#chatArea section#conversationArea #messagesArea .msg pre:has(code){overflow: auto; padding: 10px; background-color: #303030; color: #fff; border-radius: 5px;}
main#chatArea section#conversationArea #messagesArea .msg *:not(pre) > code{background-color: rgba(0 0 0 / 40%); color: #fff; padding: 0.2em 0.6em; border-radius: 0.4em;}

main#chatArea section#conversationArea #messagesArea .msg.sentMessage{align-self: end; border-radius: 10px 0 10px 10px; background-color: var(--main-color); color: #fff;}
main#chatArea section#conversationArea #messagesArea .msg.sentMessage:after{left: calc(100% - 1px); clip-path: polygon(0% 0%, 0% 100%, 100% 0);}
main#chatArea section#conversationArea #messagesArea .msg.sentMessage:before{background-image: url("../assets/images/user-profile-pic.jfif"); left: 100%; translate: 30px -50%; background-position: left;}

main#chatArea section#conversationArea #messagesArea .msg.receivedMessage{border-radius: 0 10px 10px 10px; background-color: var(--mute-color); text-indent: 1em;}
main#chatArea section#conversationArea #messagesArea .msg.receivedMessage:after{right: calc(100% - 1px); clip-path: polygon(0% 0%, 100% 0%, 100% 100%);}
main#chatArea section#conversationArea #messagesArea .msg.receivedMessage:before{background-image: url("../assets/images/bot-profile-pic.jfif"); right: 100%; translate: -30px -50%;}

main#chatArea section#conversationArea #messagesArea .msg.receivedMessage.typing{display: flex; gap: 5px;}
main#chatArea section#conversationArea #messagesArea .msg.receivedMessage.typing hr{animation: typing .5s ease-in-out infinite; width: 15px; height: 15px; background-color: rgba(0 0 0 / 20%); border-radius: 50%; translate: 0 -10%;}
main#chatArea section#conversationArea #messagesArea .msg.receivedMessage.typing hr:nth-child(2){animation-delay: .1s;}
main#chatArea section#conversationArea #messagesArea .msg.receivedMessage.typing hr:nth-child(3){animation-delay: .2s;}

main#chatArea section#conversationArea form#inputArea{gap: 10px; align-items: center; padding: 5px; width: clamp(0px, 60%, 800px);}
main#chatArea section#conversationArea form#inputArea label{grid-template-columns: 1fr max-content; align-items: center; padding: 10px 20px; box-shadow: 0 0 10px -1px rgba(0 0 0 / 50%);}
main#chatArea section#conversationArea form#inputArea label textarea{resize: none; width: 100%; font: inherit; font-size: .875rem; align-content: center; outline: 0; max-height: 300px;}
main#chatArea section#conversationArea form#inputArea.generating label textarea{pointer-events: none;}
main#chatArea section#conversationArea form#inputArea button.btn span:first-child:before{content: 'send';}
main#chatArea section#conversationArea form#inputArea button.btn span:last-child:before{content: 'Enviar';}
main#chatArea section#conversationArea form#inputArea.generating button.btn span:first-child:before{content: 'stop_circle';}
main#chatArea section#conversationArea form#inputArea.generating button.btn span:last-child:before{content: 'Cancelar';}

@keyframes typing{
	
	0%{translate: 0 -20%;}
	50%{translate: 0 20%;}
	100%{translate: 0 -20%;}
	
}

/* Responsive */

@media(min-width: 901px){
	
	body:not(:has(aside#mainMenu label#menuTrigger input:checked)){grid-template-columns: minmax(0, 1fr) 0px;}
	
}
	
@media(max-width: 900px){
	
	body{grid-template-columns: 1fr;}
	
	main#chatArea{padding: 0 5vw 5vh;}
	
	aside#mainMenu{position: absolute; top: 0; right: 0; bottom: 0; background-color: #fff; padding: 20px 15px; transition: all .3s ease;}
	aside#mainMenu:not(:has(label#menuTrigger input:checked)){translate: 100% 0;}
	
	main#chatArea section#conversationArea #messagesArea{padding: 40px 20px 20px; gap: 15px;}
	main#chatArea section#conversationArea #messagesArea .msg{max-width: calc(100% - 40px);}
	main#chatArea section#conversationArea #messagesArea .msg.sentMessage{margin-right: 70px; padding: 10px 15px;}
	main#chatArea section#conversationArea #messagesArea .msg.receivedMessage{margin-left: 70px;}
	
	main#chatArea section#conversationArea form#inputArea{width: 100%;}
	
}

.account_form_actions {
	height: 26px;
	width: 50px;
	margin-top: -5px;
	margin-left: 10px;
	display: none;
}

#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner {
	border: 12px solid #f3f3f3;
	border-top: 12px solid #3498db;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.file-names {
	font-size: 10px;
}

/*
TRIGGER
Personaliza mensagens do sistema
*/
.trigger{
	display: block;
	width: 100%;
	padding: 15px;
	background: #333;
	font-size: 0.9em;
	color: #fff;
	margin-bottom: 20px;
}

.trigger p{
	margin-top: 8px;
}

.trigger_success{background-color: #00B494;}
.trigger_info{background-color: #0E96E5;}
.trigger_alert{background-color: #FAAD50;}
.trigger_error{background-color: #F45563;}

.trigger_none{
	margin-bottom: 0;
}