:root {
  --bg-color: #0F3B53;
  --border-color: #667F89;
  --text-color: #CCD4D8;
  --hl-bg-color: #0B2C3E;
  --hl-color: #E5E9EB;
  --system-bg-color: #FFF;
  --color-green: #22A573;
  --secondary-color: #7192A4;
  --tertiary-bg-color: #E7EDF0;
  --secondary-bg-color: #426E86;
}

.w-12{width: 0.75rem;}
.h-12{height: 0.75rem;}
.w-16{width: 1rem;}
.h-16{height: 1rem;}
.w-20{width: 1.25rem;}
.h-20{height: 1.25rem;}
.w-24{width: 1.5rem;}
.h-24{height: 1.5rem;}

/* AFFINO COLUMN/ROW STRUCTURE */
.aor:has(#chat-main) {
	position: relative;
	padding: 0 !important;
}
.aori:has(#chat-main) {
	max-width: none;
}
.aoc:has(#chat-main) {
	margin: 0 !important;
}
.aoci:has(#chat-main) {
	padding: 0 !important;
}

/* AI CHAT */
#chat-left .aos-DF,
#chat-form .aos-DF,
#chat-main .aos-DF {
	display: flex !important;
}

/*** LHC COLUMN (CONVERSATION LIST MENU) ***/
#chat-left > div {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
}
@media (max-width: 1024px) {
	#chat-left{
		width: 100%;
	}
}

#chat-left > div,		
#chat-left > div *,
#chat-left #chat-expand > span {	
	color: var(--text-color);
}
#chat-left > div,		
#chat-left #chat-expand > span {		
	background-color: var(--bg-color);
}

#chat-left hr {		
	background-color: var(--border-color);
}

.chat-logo {
	display: block;
	border: 0;
	max-width: 100%;	
}
#chat-left > div .chat-logo {
	max-width: 200px;
	max-height: 150px;
	margin-bottom: 15px;
}
@media (max-width: 1024px) {
	#chat-left > div .chat-logo,
	#chat-left > div a:has(>.chat-logo) {
		display: none;
	}
}

#chat-left #chat-expand .chat-logo {
	max-width: 150px;
	max-height: 36px;
}
@media (min-width: 1025px) {
	#chat-left #chat-expand .chat-logo,
	#chat-left #chat-expand a:has(>.chat-logo) {
		display: none;
	}
}


#chat-left .chat-button {		
	font-size: 0.875rem;
	cursor:pointer;
}
#chat-left .chat-button,	
#chat-namespace select {		
	border: 1px solid var(--border-color);
	background-color: var(--bg-color) !important;
	padding:10px;
	line-height: normal;
}
#chat-left .chat-button * {		
	background-color: transparent !important;
	transition: all .3s ease;
	  -webkit-transition: all .3s ease;
	  -ms-transition: all .3s ease;
	  -moz-transition: all .3s ease;
}

#chat-namespace > *:not(hr) {		
	font-size: 0.875rem;
	font-weight: 500;
	width: 100%;
	padding-left:10px;
}
#chat-namespace > span {		
	background-color: var(--hl-bg-color);
	color: var(--hl-color);
	padding: 5px 10px;
	font-weight: 700;
}


#chat-left > div:not(#chat-expand) {		
	width: 300px;
	overflow: hidden;		
}
@media (min-width: 1025px) {
	#chat-left #chat-expand{
		position: fixed;
		left: 0;
		z-index: 1;
	}

	#botWrappper:not(.expanded) #chat-left {
	  width: 80px;
	}
}

#chat-left #chat-expand #chat-active{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: calc(100vw - 80px);
	background-color: transparent;
}
@media (min-width: 1025px) {
	#chat-left #chat-expand #chat-active{
		display: none !important;
	}
}

#botWrappper.expanded #chat-left > div:not(#chat-expand) {
	-webkit-transform: translateX(0);
	-webkit-transition: .5s -webkit-transform ease;
	transform: translateX(0);
	transition: .5s transform ease;
}
#botWrappper:not(.expanded) #chat-left > div:not(#chat-expand) {		
	-webkit-transform: translateX(-100%);
	-webkit-transition: .5s transform ease;
	transform: translateX(-100%);
	transition: .5s transform ease;
}
#botWrappper{
	::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 7px;
	}
	::-webkit-scrollbar-thumb {
	  border-radius: 4px;
	  background-color: var(--hl-bg-color);
	  box-shadow: 0 0 1px var(--hl-bg-color);
	}
}

#conversations {
	overflow-y: auto;
	scrollbar-width: thin;
	padding-bottom: 10px;
	scrollbar-color: var(--border-color) var(--hl-bg-color);
}
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  #conversations {	
	scrollbar-width: auto;	
  }
} 

#conversations .conversation:hover,
#conversations .conversation:hover *,
#conversations .conversation.selected,
#conversations .conversation.selected *,
#conversations .conversation:has(.conversationActions.expanded),
#chat-left .chat-button:hover{
	background-color: var(--hl-bg-color);
}
#conversations .conversation:hover *,
#conversations .conversation.selected *,
#conversations .conversation:has(.conversationActions.expanded),
#chat-left .chat-button:hover,
#chat-left .chat-button:hover *{
	color: var(--hl-color);
}

#conversations .conversation svg{
	flex-shrink: 0;
}

#conversations .conversationWrapper > span {
	font-size: 0.75rem;
	line-height: 1rem;
}

#conversations .conversationWrapper .conversation > span {
	font-size: 0.875rem;
	line-height: 1rem;
	cursor:pointer;	
	/*text-overflow: ellipsis;*/
	text-overflow: clip;
	overflow: hidden;
	white-space: nowrap;	
	width: 100%;
	z-index: 0;
}

#chat-left .conversation .conversationActions {
	position:absolute;
	z-index: 1;
	right: 0;
	max-width: 20px;
	display:flex !important;
	background: linear-gradient(90deg, rgba(15, 59, 83, 0) 0%, rgba(15, 59, 83, 1) 50%) !important;
	/*transition: max-width .3s ease-in-out;
    -webkit-transition: max-width .3s ease-in-out;
    -moz-transition: max-width .3s ease-in-out;	*/
 	width: 100%;
 	height: 100%;
}
#chat-left .conversation:hover .conversationActions,
#chat-left .conversation.selected .conversationActions,
#chat-left .conversation .conversationActions.expanded {
	background: linear-gradient(90deg, rgba(11, 44, 62, 0) 0%, rgba(11, 44, 62, 1) 50%) !important;
}
#chat-left .conversation:hover .conversationActions,
#chat-left .conversation .conversationActions.expanded {
	max-width: 50px;		
}

#chat-left .conversation .conversationActions > span {
	opacity:0;
	visibility: hidden;	
	cursor:pointer;
	padding-right:3px;
	transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;	
}
#chat-left .conversation .conversationActions.expanded > span,
#chat-left .conversation:hover .conversationActions > span {
	opacity:1;
	visibility: visible;	
}

#chat-left .conversation .conversationActions > div {
  position:absolute;
  right: calc(100% - 20px);
  top: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  padding:3px;
  background-color: var(--hl-bg-color);
}

#chat-left .conversation .conversationActions > div span {
	font-size:.8em;
	white-space: nowrap;
	width: 100%;
	padding:3px 6px 3px 23px;
	cursor:pointer;
	border-radius: 3px;
	background-repeat: no-repeat;
	background-position: 3px center;
	background-size: 16px;
}
#chat-left .conversation .conversationActions > div span:hover {
	background-color: var(--bg-color);
	color:#FFF;
}

#chat-left .conversation .conversationActions .copyQ {
	background-size: 20px;
	background-position: 1px center;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgb(229, 233, 235)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9.64286 6.4999H8.07143C7.65466 6.4999 7.25496 6.66546 6.96026 6.96016C6.66556 7.25486 6.5 7.65456 6.5 8.07132V17.4999C6.5 17.9167 6.66556 18.3164 6.96026 18.6111C7.25496 18.9058 7.65466 19.0713 8.07143 19.0713H15.9286C16.3453 19.0713 16.745 18.9058 17.0397 18.6111C17.3344 18.3164 17.5 17.9167 17.5 17.4999V8.07132C17.5 7.65456 17.3344 7.25486 17.0397 6.96016C16.745 6.66546 16.3453 6.4999 15.9286 6.4999H14.3571M9.64286 6.4999C9.64286 6.91666 9.80842 7.31636 10.1031 7.61106C10.3978 7.90576 10.7975 8.07132 11.2143 8.07132H12.7857C13.2025 8.07132 13.6022 7.90576 13.8969 7.61106C14.1916 7.31636 14.3571 6.91666 14.3571 6.4999M9.64286 6.4999C9.64286 6.08313 9.80842 5.68343 10.1031 5.38873C10.3978 5.09403 10.7975 4.92847 11.2143 4.92847H12.7857C13.2025 4.92847 13.6022 5.09403 13.8969 5.38873C14.1916 5.68343 14.3571 6.08313 14.3571 6.4999'/%3e%3c/svg%3e");
}
#chat-left .conversation .conversationActions .copyLink {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='rgb(229, 233, 235)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z'/%3e%3c/svg%3e");
}
#chat-left .conversation .conversationActions .deleteC {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='rgb(229, 233, 235)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z'/%3e%3c/svg%3e");
}

#chat-left .conversation .conversationActions .copyQ:hover {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9.64286 6.4999H8.07143C7.65466 6.4999 7.25496 6.66546 6.96026 6.96016C6.66556 7.25486 6.5 7.65456 6.5 8.07132V17.4999C6.5 17.9167 6.66556 18.3164 6.96026 18.6111C7.25496 18.9058 7.65466 19.0713 8.07143 19.0713H15.9286C16.3453 19.0713 16.745 18.9058 17.0397 18.6111C17.3344 18.3164 17.5 17.9167 17.5 17.4999V8.07132C17.5 7.65456 17.3344 7.25486 17.0397 6.96016C16.745 6.66546 16.3453 6.4999 15.9286 6.4999H14.3571M9.64286 6.4999C9.64286 6.91666 9.80842 7.31636 10.1031 7.61106C10.3978 7.90576 10.7975 8.07132 11.2143 8.07132H12.7857C13.2025 8.07132 13.6022 7.90576 13.8969 7.61106C14.1916 7.31636 14.3571 6.91666 14.3571 6.4999M9.64286 6.4999C9.64286 6.08313 9.80842 5.68343 10.1031 5.38873C10.3978 5.09403 10.7975 4.92847 11.2143 4.92847H12.7857C13.2025 4.92847 13.6022 5.09403 13.8969 5.38873C14.1916 5.68343 14.3571 6.08313 14.3571 6.4999'/%3e%3c/svg%3e");
}
#chat-left .conversation .conversationActions .copyLink:hover {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='rgb(255, 255, 255)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z'/%3e%3c/svg%3e");
}
#chat-left .conversation .conversationActions .deleteC:hover {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='rgb(255, 255, 255)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z'/%3e%3c/svg%3e");
}

#chat-left .conversation .conversationActions > div {
	display:none;	
}
#chat-left .conversation .conversationActions.expanded > div {
	display:flex;
}

#chat-left .aos-Select {	
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='rgb(204, 212, 216)' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3e%3c/svg%3e");
    background-size: 24px;
    background-position: calc(100% - 5px) 50%;
	padding-right: 30px !important;
}

#chat-left .conversation span.delete,
#chat-left .conversation span.editC {
	cursor:pointer;
	height:24px;
	width: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#chat-debug.superuser {	
		align-self: flex-end;
		width:calc(100% - 40px);
}

#chat-debug label{
	margin-top: 0;
}

.debugContainer > h3 {
	margin:0;
}
@media (max-width: 799px) {
	.debugContainer div {
		border-left:0 none;
	}
}

@media (max-width: 1024px) {
	#chat-left #chat-expand {
		background-color: var(--bg-color);
		padding: 8px;
		width: 100%;
		height: 50px;
		position: fixed;
		z-index: 1;
	}

	#chat-left #chat-expand * {
		background-color: var(--bg-color);
		color: var(--text-color);
		border-color: var(--border-color);
	}
	#chat-left #chat-expand > span {		
		width: 34px;
	}

	#chat-left .chat-button {
		padding:5px;
		height: 34px;
		min-width: 34px;
	}
}

/*** END LHC COLUMN (CONVERSATION LIST MENU) ***/


/*** MAIN COLUMN (CHAT) ***/
#chat-main {	
	width:100%;
	padding-bottom: 180px;
	padding-top: 50px;
}
@media (min-width: 1025px) {
	#chat-main {			
		padding-left:80px;	
		padding-top: 0;
	}
	#botWrappper.expanded #chat-main {		
		padding-left:300px;
	}
	#chat-main #prompt-area > div,	
	#chat-main #chat-area {
		float:none;
		margin: auto;
		max-width: 830px;
	}
}

#chat-main #chat-intro {
	float:none;
	margin-left: auto;
	margin-right: auto;
	max-width: 830px;
}

#chat-main #chat-intro > span.aos-NS {
	line-height: 140%;
}
#chat-main #chat-intro #suggested-prompts > span {
	width:calc(50% - 5px);
	transition: transform .25s ease-in;
  -moz-transition: transform .25s ease-in;
  -webkit-transition: transform .25s ease-in;
}
#chat-main #chat-intro #suggested-prompts > span:hover {
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);
  -ms-box-shadow: 0 0 4px rgba(0,0,0,.2);
  transform: scale(1.02);
  -ms-transform: scale(1.02);
  -webkit-transform: scale(1.02);
}

#chat-area > div {
	margin-bottom: 20px;
	display: flex;
	width: 100%;
	float: left;
	gap:10px;
	position: relative;
	overflow: hidden;
}
#chat-area > div > div {	
	position: relative;
}

/*#chat-area div .debug {
	border: 2px solid #3391A4;
}*/
#chat-area div .debug span.aos-W100 {
	width:100%;
	height:auto;
}

#chat-area > .answer {
	flex-wrap: wrap;
}
#chat-area > .answer > div {
	width: calc(100% - 50px);
}

#chat-area div > span {
	height:40px;
	width:40px;	
	flex-shrink: 0;	
}

#chat-area .answer > div P {    
    margin-block-end: 1em;
}
#chat-area .answer > div > *:last-child {    
    margin-block-end: 0em;
}

#chat-area .answer > span {
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: center;
}
#chat-area nav {
	display: flex;	
	flex-shrink: 0;
	align-items: center;
}
#chat-area > .answer nav {
  padding-left: 50px;
}

@media (max-width: 799px) {
	#chat-area > .question {
		flex-wrap: wrap;
	}
	#chat-area > .question > div {
	  width: calc(100% - 50px);
	}
	#chat-area nav:not(#feedback_Panel) {
		padding-top: 0;
    padding-left: 50px;
	}
}

#chat-area nav:not(#feedback_Panel) span {
	height:24px;
	width: 24px;
	cursor:pointer;	
	background-repeat: no-repeat;
}

#chat-area nav .negativeSent {
	cursor:default;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgb(239, 68, 68)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M16.4356 5.8309L13.3114 5.04985C13.1796 5.01683 13.0443 5.00008 12.9084 5H9.56988C9.2612 5.00001 8.95864 5.08599 8.69608 5.24831C8.43353 5.41062 8.22138 5.64285 8.0834 5.91897L5.17526 11.7353C5.04866 11.9886 4.98891 12.2701 5.00169 12.5531C5.01447 12.836 5.09935 13.111 5.24828 13.3519C5.3972 13.5928 5.60523 13.7916 5.85261 13.9295C6.09999 14.0675 6.37851 14.1399 6.66174 14.1399H10.6201H12.2819M16.4356 5.8309L16.4364 13.309L13.618 17.5366C13.2881 18.031 13.1128 18.6109 13.1128 19.205C13.1128 19.6196 12.7763 19.9561 12.3609 19.9561H12.2811C11.8404 19.9561 11.4177 19.7811 11.106 19.4694C10.7944 19.1578 10.6193 18.7351 10.6193 18.2944V14.1399M16.4356 5.8309H18.0982C18.5389 5.8309 18.9616 6.00598 19.2733 6.31763C19.5849 6.62927 19.76 7.05196 19.76 7.49269V12.4781C19.76 12.9188 19.5849 13.3415 19.2733 13.6531C18.9616 13.9648 18.5389 14.1399 18.0982 14.1399H16.021'/%3e%3c/svg%3e");
}
#chat-area nav .positiveSent {
	cursor:default;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgb(34, 165, 115)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M13.759 10.3383H17.7174C18.0006 10.3383 18.2792 10.4107 18.5265 10.5486C18.7739 10.6865 18.9819 10.8853 19.1309 11.1262C19.2798 11.3672 19.3647 11.6421 19.3774 11.9251C19.3902 12.208 19.3305 12.4895 19.2039 12.7429L16.2957 18.5591C16.1577 18.8354 15.9454 19.0677 15.6827 19.23C15.42 19.3924 15.1172 19.4783 14.8084 19.4781H11.4707C11.3353 19.4781 11.1998 19.4615 11.0677 19.4283L7.94273 18.6472M13.759 10.3383V6.18377C13.759 5.74303 13.5839 5.32035 13.2723 5.0087C12.9606 4.69705 12.5379 4.52197 12.0972 4.52197H12.0183C11.6028 4.52197 11.2663 4.85849 11.2663 5.27393C11.2663 5.86719 11.091 6.44716 10.7611 6.94071L7.94273 11.1691V18.6472M13.759 10.3383H12.0972M7.94273 18.6472H6.28093C5.8402 18.6472 5.41752 18.4721 5.10587 18.1605C4.79422 17.8488 4.61914 17.4262 4.61914 16.9854V12C4.61914 11.5593 4.79422 11.1366 5.10587 10.825C5.41752 10.5133 5.8402 10.3383 6.28093 10.3383H8.35818'/%3e%3c/svg%3e");
}

#chat-area #feedback_Panel {
	float:right;
	gap:10px;
	padding-left:10px;
}
#chat-area #feedback_Panel span {
	cursor:pointer;
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 24px;
	min-width: 24px;
}
#chat-area #feedback_Panel span.close {	
	height: 44px;
	width: 44px;
}
/*** END MAIN COLUMN (CONVERSATION PANEL) ***/

/*** SYSTEM ROLE PANEL ***/
.grow-wrap {  
  display: grid;
}
.grow-wrap::after {  
  content: attr(data-replicated-value) " ";/* To prevent jumpy behavior */  
  white-space: pre-wrap;/* This is how textarea text behaves */  
  visibility: hidden;/* Hidden from view, clicks, and screen readers */
}
.grow-wrap textarea,
.grow-wrap::after {  
  grid-area: 1 / 1 / 2 / 2; /* Place on top of each other */
}
.grow-wrap textarea {		
	resize: none;  
  overflow-y: auto;
}

#chat-system textarea {	
	border:0 none;
	outline: 2px solid var(--secondary-bg-color);
	background-color: var(--system-bg-color);
	border-radius:5px;
	font-size:.9em;
	max-height: 100%;
	min-height: 220px;	
}


#prompt-area .aos-SystemRole:not(.active) .aos-SystemRoleDetail {
	background-color:transparent;
}
#prompt-area .aos-SystemRole.active .aos-SystemRoleDetail {
	border-color:transparent;
}

#prompt-area #prompt-collapse,
#prompt-area #prompt-tooltip > span:first-of-type {
	height: 40px;
	width: 40px;	
	display:flex;
	align-items: center;
  	justify-content: center;
  	cursor:pointer;
  	/*color: var(--secondary-color);*/
}
#prompt-area #prompt-collapse {
	/*background-color: var(--tertiary-bg-color);*/
	border-radius:3px;
}

#prompt-area #prompt-tooltip {
	position: relative;
}
#prompt-area #prompt-tooltip > span:last-of-type {
	/*background-color: var(--system-bg-color);*/
	border-radius: 3px;
	position: absolute;
	top: 0;
	right: 100%;
	width: 300px;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;	
}

#prompt-area #prompt-tooltip:hover > span:last-of-type {
	visibility: visible;
	opacity: 1;
}

#prompt-area > div > button {
	width: calc(100% - 25px);
}

#prompt-area nav {		
		position:fixed;
		/*left:0;*/
		z-index: 1;
}
#prompt-area #aos-SystemRoleContainer {		
		padding-top:75px;
}
#botWrappper.expanded #prompt-area nav {		
		width:calc(100% - 300px);
}

/*** END SYSTEM ROLE PANEL ***/

/*** BOTTOM (SEND QUESTION PANEL) ***/
#chat-form {
	position:fixed;
    bottom: 0;
    top:unset;
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
}

@media (min-width: 1025px){
	#botWrappper.expanded #chat-form {
		padding-left:300px;
	}
}

#chat-form > div {
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 800px) {
	#chat-form > div > div {
		float:none;
		margin: auto;
		max-width: 800px;
	}
	#chat-form > div > div#chat-info {
		max-width: 600px;
	}
}

#chat-addquestion > span {
	position: absolute;
	top: 10px;
	right:10px;
	cursor:pointer;
}
#chat-addquestion > textarea {
	height: 45px;
	min-height: 45px;
	padding-right:40px;
	resize: vertical;
	overflow: hidden;
}
#chat-addquestion > textarea:focus {
	outline: none;
}

#chat-system svg:hover {
	cursor:pointer;
}

#prev-system,
#close-system {	
	flex-shrink: 0;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-moz-transition: all .3s ease;
}

#save-system:disabled:hover {
	cursor:not-allowed !important;
}

#chat-regenerate {
	display:flex;
	gap:10px;
}

#chat-info > span > p {
	line-height: 130%;
}

#collectDataTooltip {
	position: relative;
	cursor:pointer;
}
#collectDataTooltip > div {
	/*background-color: var(--system-bg-color);*/
	border-radius: 3px;
	position: absolute;
	bottom: calc(100% + 10px);
	left: -20px;
	width: 300px;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;	
}

#collectDataTooltip:hover > div {
	visibility: visible;
	opacity: 1;
}

#botWrappper .disabled {
  opacity:.3;
  cursor:not-allowed
}
/*** END BOTTOM (SEND QUESTION PANEL) ***/


/*** MODAL ***/
#aos-ChatBot-Modal #aos-Modal-Action > div {
	display:flex;
	align-items:center;
	flex-shrink:0
}
#aos-ChatBot-Modal .aos-Modal-dialog {
	height:auto;
	max-width:900px
}
#aos-ChatBot-Modal .aos-Modal-Close {
	cursor:pointer
}
#aos-ChatBot-Modal textarea {
	resize:vertical;
	min-height:130px;
	max-height:200px;
}
/*** END MODAL ***/


/* ANIMATION */
#chat-left .dot, 
#chat-area .dot {
	margin-left:48px;
	margin-top:10px;
	width:30px;
	height:20px;
	--d:radial-gradient(farthest-side,currentColor 90%,#0000);
	background:var(--d),var(--d),var(--d);
	background-size: 5px 5px;
	background-repeat:no-repeat;
	animation: loadingAnimation 1s infinite;
	display: inline-block;
}

@keyframes loadingAnimation {
	0%   {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
	12.5%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
	25%  {background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 100%, calc(3*100%/3) 100%}
	37.5%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 100%}
	50%  {background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }
	62.5%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }
	75%  {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0   , calc(3*100%/3) 0   }
	87.5%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0   }
	100% {background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
}

:where(html) {
	--size-1: .25rem;
	--size-2: .5rem;	
	--size-3: .75rem;	
	--size-4: 1rem;

	--primary-text: hsl(0 0% 100%);
  --success: hsl(157 66% 39%);

	--font-size-1: .775rem; 
	--font-weight-5: 500;
	--radius-2: 4px;

	--shadow-color: 220 3% 15%;
  --shadow-strength: 1%;  
  --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));
}

.chat-notification {
    display: flex;
    align-items: center;
    gap: var(--size-1);
    padding: var(--size-2);
    width: fit-content;    
    color: var(--primary-text);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-5);
    box-shadow: var(--shadow-3);
    border-radius: var(--radius-2);
    background-color: var(--success);
    opacity: 0;
    transform: translateX(150%);
    /*position: absolute;*/
    position: fixed;
    z-index: 1;
    /*top: var(--size-4);*/
    right: var(--size-4);
    transition: all .5s ease-in-out;

    &.open {
        opacity: 1;
        transform: translateX(0);
    }
}