html, body {
	margin: 0;
	height: 100%; /* can also use viewport units (height: 100vh) */
	
	background-color:#f1f1f1;
}

#container {
	display: flex; /* displays flex-items (children) inline */
	flex-direction: column; /* stacks them vertically */
	height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}

main {
	flex: 1; /* takes the remaining height of the "container" div */
	overflow: auto; /* to scroll just the "main" div */
}

section {
	height: 100%; /* takes the visible area of the "main" div */
	overflow: auto; /* recommended */
	border-bottom: 1px solid;
	// background: lightgreen;
}

// header {background: #f88}
section:last-child {border: none}
footer {
	// background: lightblue
}  

.hidden {
	display: none;
}

#chat-messages {
	list-style: none;
	   padding: 0;
	margin: 0;
}

#chat-messages .message {
	margin-bottom: 5px;
	padding: 5px;
	border-radius: 5px;
}

#chat-messages .message_user {
	background-color:   #e6e6e6; // #f1f1f1; // #ced4da;
	border: 1px solid #adb5bd;
	color: #495057;
	
	padding-left:15px;
	padding-right:15px;
	
	max-width: 60%;
	min-width: min(250px, 100%);
	margin-left: auto;
	width: fit-content;
}

#chat-messages .message_image {
	background-color: #e6e6e6; // #ced4da;
	border: 1px solid #adb5bd;
	color: #495057;

	padding:15px;
	
	max-width: 60%;
	//min-width: min(400px, 100%);
	margin-left: auto;
	width: fit-content;
	margin-bottom:20px;
}

#chat-messages .message_image img {
	border-radius: 5px;
	margin: 0 auto;
	
	// max-width: 100%;
	max-width: 500px;
	max-height: 600px;
	height: auto;
	width: auto;
	display: block;
}


@media (max-width: 600px) {
	#chat-messages .message_image {
		max-width: 100%;
  	}
  	#chat-messages .message_image img {
		max-width: 350px;  
	}
}



#chat-messages .message_assistant {
	/* background-color: #95d4ea; Hellgrau für Nachrichten des Bots */
	//background-color: #fff;
	position:relative;
	padding:15px;
	margin-bottom:20px;
	
	
	background-color: #fcfcfd;
	border: 1px solid #d5dbe0; //  #adb5bd; #e9ecef; #c4c8cb
	color: #495057;
	
	// light
	// background-color: var(--bs-light-bg-subtle);
	// border: 1px solid var(--bs-light-border-subtle);
	// color: var(--bs-light-text-emphasis); 
	
	
}

#chat-messages .message_system {
	background-color: var(--bs-primary-bg-subtle); //#cfe2ff; //#ccc;
	// border-color: #9ec5fe;
	border: 1px solid var(--bs-primary-border-subtle); // #9ec5fe;
	color: var(--bs-primary-text-emphasis); // #052c65;
	position:relative;
	padding:15px;
	margin-bottom:20px;
	
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 0.85em;
	
	
}

.message_assistant pre {
	padding: 10px;
	background-color: #f1f1f1;
	margin: 10px;
	border-radius: 5px;
}

.debugPerformance {
	//margin-top:20px;
	font-size: 0.8em;
	//#display: block;
}

.btn_copyToClipboard {
	/*position: absolute;
	bottom: 10px;
	right: 10px;*/
}


#libraryHeader {
	overflow-y: auto;
}

#libraryHeader .list-group-item {
	cursor: pointer;
}

#libraryHeader .list-group-item:hover {
	color: var(--bs-list-group-action-hover-color);
	text-decoration: none;
	background-color: var(--bs-list-group-action-hover-bg);
}

#libraryHeader .list-group-item .history-item {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#libraryHeader .list-group-item .dropdown .dropdown-item {
	font-size: small;
}

.config_helptext {
	font-size: 0.7em;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #efefef;
	margin-top: 5px;
	border-radius: 5px;
}

textarea {
  width:100%;
  border:none;
  resize: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

#loadingScreen {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin-top: auto;
	height: 100%;
	background-color: rgb(186 186 186 / 50%);
}